DebugPanel

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

Basic Usage

import {PilotKit, DebugPanel} from '@bdky/aaas-pilot-kit-react-widget';
import '@bdky/aaas-pilot-kit-react-widget/styles.css';

function App() {
    return (
        <PilotKit {...props}>
            <DebugPanel
                show={process.env.NODE_ENV === 'development'}
                position="bottom-right"
            />
        </PilotKit>
    );
}

Features

DebugPanel can display the following information:

• Event logs: Various events triggered by the 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
className	string	-	Custom class name
style	CSSProperties	-	Custom style
features	object	See below	Enabled features
maxLogs	number	100	Maximum number of logs

features Configuration

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

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:

<DebugPanel show={process.env.NODE_ENV === 'development'} />

Monitored Events

DebugPanel automatically monitors the following events:

Event	Description
onReady	SDK ready
onAsrStart	ASR started
onAsrMessage	ASR recognition result
onRenderStart	Started rendering
onInactivity	User inactivity
onBusy	System busy
onInterrupt	Rendering interrupted
onConversationChange	Conversation changed
onIsRenderingChange	Rendering status changed
onReplyStart	Reply started
onTtft	First token latency metric

Related

• React SDK Events - Event details
• PilotKit Event Callbacks - PilotKit events