DebugPanel

调试面板组件，用于开发阶段查看事件和状态。

基本用法

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

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

功能

DebugPanel 可以显示以下信息：

事件日志：SDK 触发的各种事件（ready、asrMessage、conversationChange 等）
状态变化：isReady、isMuted、isRendering 等状态
性能指标：TTFT（首字延迟）等性能数据

Props

属性	类型	默认值	说明
`show`	`boolean`	`false`	是否显示面板
`position`	`'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'`	`'bottom-right'`	面板位置
`className`	`string`	-	自定义类名
`style`	`CSSProperties`	-	自定义样式
`features`	`object`	见下方	启用的功能
`maxLogs`	`number`	`100`	最大日志条数

features 配置

<DebugPanel
    show
    features={{
        events: true,      // 显示事件日志
        performance: true, // 显示性能指标
        state: true        // 显示状态变化（每5秒）
    }}
/>

属性	类型	默认值	说明
`events`	`boolean`	`true`	是否显示事件日志
`performance`	`boolean`	`true`	是否显示性能指标
`state`	`boolean`	`true`	是否显示状态变化

日志类型

面板中的日志按类型区分颜色：

类型	颜色	说明
`event`	蓝色	SDK 事件
`state`	绿色	状态变化
`performance`	黄色	性能指标

交互功能

Clear 按钮：清空所有日志
折叠/展开：点击 ▼/▲ 按钮切换面板大小

样式定制

类名	说明
`.apk-debug-panel`	根容器
`.apk-debug-panel--expanded`	展开状态
`.apk-debug-panel--collapsed`	折叠状态
`.apk-debug-panel--top-left`	左上位置
`.apk-debug-panel--top-right`	右上位置
`.apk-debug-panel--bottom-left`	左下位置
`.apk-debug-panel--bottom-right`	右下位置
`.apk-debug-panel__header`	头部区域
`.apk-debug-panel__title`	标题
`.apk-debug-panel__actions`	操作按钮区域
`.apk-debug-panel__button`	按钮
`.apk-debug-panel__content`	内容区域
`.apk-debug-panel__log`	单条日志
`.apk-debug-panel__log--event`	事件日志
`.apk-debug-panel__log--state`	状态日志
`.apk-debug-panel__log--performance`	性能日志
`.apk-debug-panel__log-time`	时间戳
`.apk-debug-panel__log-type`	类型标签
`.apk-debug-panel__log-message`	消息内容
`.apk-debug-panel__log-data`	数据详情
`.apk-debug-panel__empty`	空状态

使用建议

仅在开发环境使用

DebugPanel 会持续监听事件和状态，可能影响性能。建议仅在开发环境启用：

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

监听的事件

DebugPanel 会自动监听以下事件：

事件	说明
`onReady`	SDK 就绪
`onAsrStart`	ASR 开始
`onAsrMessage`	ASR 识别结果
`onRenderStart`	开始播报
`onInactivity`	用户无操作
`onBusy`	系统繁忙
`onInterrupt`	播报打断
`onConversationChange`	对话变化
`onIsRenderingChange`	播报状态变化
`onReplyStart`	回复开始
`onTtft`	首字延迟指标

基本用法​

功能​

Props​

features 配置​

日志类型​

交互功能​

样式定制​

使用建议​

监听的事件​

相关​

基本用法

功能

Props

features 配置

日志类型

交互功能

样式定制

使用建议

监听的事件

相关