@bdky/aaas-pilot-kit-react-widget

百度数字员工 AaaS Pilot Kit 的 React UI 组件库，开箱即用的数字员工 UI 组件，5 分钟搭建完整交互界面

安装

npm

npm install @bdky/aaas-pilot-kit-react-widget

yarn

yarn add @bdky/aaas-pilot-kit-react-widget

快速开始

import {
    PilotKit,
    Layout,
    ConversationList,
    Input,
    ControlPanel
} from '@bdky/aaas-pilot-kit-react-widget';
import '@bdky/aaas-pilot-kit-react-widget/styles.css';
import {type IOptions} from '@bdky/aaas-pilot-kit';

const options: IOptions = {
    figureId: '209337',
    ttsPer: 'LITE_audiobook_female_1',
    agentConfig: {
        token: 'xxxx',
        robotId: 'xxxx'
    }
};

function App() {
    return (
        <PilotKit options={options}>
            <Layout>
                <ConversationList />
                <Input />
                <ControlPanel />
            </Layout>
        </PilotKit>
    );
}

组件列表

| 组件 | 说明 | |------|------| | PilotKit | 主容器组件，包含 Provider 和数字人渲染区域 | | Layout | 布局组件，支持横向/纵向自适应 | | ConversationList | 对话列表组件，自动滚动到底部 | | Conversation | 单条对话组件，支持流式渲染 | | Input | 输入框组件，支持文本输入和语音输入切换 | | ControlPanel | 控制面板，包含静音、挂断等按钮 | | Subtitle | 字幕组件，实时显示 AI 回复 | | RecommendedQuestions | 推荐问题组件 | | StartupScreen | 启动屏幕，用于手动激活 | | LoadingOverlay | 加载遮罩层 | | StatusOverlay | 状态遮罩层 | | DebugPanel | 调试面板（开发环境） |

Hooks

| Hook | 说明 | |------|------| | usePilotKitContext | 获取 PilotKit 上下文 | | useLayout | 获取布局上下文 | | useIsMobile | 检测是否为移动端 | | useIsTablet | 检测是否为平板 | | useIsDesktop | 检测是否为桌面端 | | useResponsive | 响应式断点 Hook |

样式导入

// 方式 1: 直接导入 CSS
import '@bdky/aaas-pilot-kit-react-widget/styles.css';

// 方式 2: 导入 CSS 变量（用于自定义主题）
import {styles} from '@bdky/aaas-pilot-kit-react-widget';

参考资料

• 核心库文档：@bdky/aaas-pilot-kit
• React 封装库：@bdky/aaas-pilot-kit-react

技术支持

如遇问题请联系：[email protected]、[email protected]