DebugPanel

Debug panel component, used to view events and status during development.

Basic Usage

<script setup lang="ts">
import {PilotKit, DebugPanel} from '@bdky/aaas-pilot-kit-vue3-widget';
import '@bdky/aaas-pilot-kit-vue3-widget/styles.css';

const isDev = import.meta.env.DEV;
</script>

<template>
    <PilotKit v-bind="props">
        <DebugPanel
            :show="isDev"
            position="bottom-right"
        />
    </PilotKit>
</template>

Features

DebugPanel can display following information:

• Event logs: Various events triggered by SDK (ready, asrMessage, conversationChange, etc.)
• Status changes: States such as isReady, isMuted, isRendering, etc.
• Performance metrics: TTFT (Time To First Token) and other performance data

Props

Property	Type	Default	Description
show	boolean	false	Whether to show panel
position	'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'	'bottom-right'	Panel position
class	string	-	Custom class name
style	CSSProperties	-	Custom style
features	object	See below	Enabled features
maxLogs	number	100	Maximum number of logs

features Configuration

<template>
    <DebugPanel
        show
        :features="{
            events: true,      // Show event logs
            performance: true, // Show performance metrics
            state: true        // Show status changes (every 5 seconds)
        }"
    />
</template>

Property	Type	Default	Description
events	boolean	true	Whether to show event logs
performance	boolean	true	Whether to show performance metrics
state	boolean	true	Whether to show status changes

Log Types

Logs in the panel are color-coded by type:

Type	Color	Description
event	Blue	SDK events
state	Green	Status changes
performance	Yellow	Performance metrics

Interactive Features

• Clear button: Clear all logs
• Collapse/Expand: Click ▼/▲ button to toggle panel size

Style Customization

Class Name	Description
.apk-debug-panel	Root container
.apk-debug-panel--expanded	Expanded state
.apk-debug-panel--collapsed	Collapsed state
.apk-debug-panel--top-left	Top-left position
.apk-debug-panel--top-right	Top-right position
.apk-debug-panel--bottom-left	Bottom-left position
.apk-debug-panel--bottom-right	Bottom-right position
.apk-debug-panel__header	Header area
.apk-debug-panel__title	Title
.apk-debug-panel__actions	Action button area
.apk-debug-panel__button	Button
.apk-debug-panel__content	Content area
.apk-debug-panel__log	Single log entry
.apk-debug-panel__log--event	Event log
.apk-debug-panel__log--state	Status log
.apk-debug-panel__log--performance	Performance log
.apk-debug-panel__log-time	Timestamp
.apk-debug-panel__log-type	Type label
.apk-debug-panel__log-message	Message content
.apk-debug-panel__log-data	Data details
.apk-debug-panel__empty	Empty state

Usage Recommendations

Only use in development environment

DebugPanel continuously listens to events and status, which may affect performance. It's recommended to only enable in development environment:

<script setup lang="ts">
const isDev = import.meta.env.DEV;
</script>

<template>
    <DebugPanel :show="isDev" />
</template>

Monitored Events

DebugPanel automatically monitors following events:

Event	Description
@ready	SDK ready
@asrStart	ASR started
@asrMessage	ASR recognition result
@renderStart	Started broadcasting
@inactivity	User inactivity
@busy	System busy
@interrupt	Broadcasting interrupted
@conversationChange	Conversation changed
@isRenderingChange	Broadcasting status changed
@replyStart	Reply started
@ttft	First token latency metric

Related

• Vue 3 SDK Events - Event details
• PilotKit Events - PilotKit events