Skip to main content

React Widget 组件库

开箱即用的数字员工 UI 组件，5 分钟搭建完整交互界面。

为什么选择 Widget？​

开箱即用​

不需要从零设计 UI，像搭积木一样组合组件：

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

function App() {
    return (
        <PilotKit token="xxx" figureId="xxx" ttsPer="xxx">
            <ConversationList />
            <Subtitle />
            <ControlPanel />
        </PilotKit>
    );
}

自动适配​

PC 端、移动端自动切换布局，无需额外代码。所有组件都支持 variant 属性：

  • auto：自动检测设备类型（默认）
  • mobile：强制移动端样式
  • desktop：强制桌面端样式

可定制（当你需要时）​

每个组件都支持样式覆盖和自定义渲染，不会被"封装"限制住：

// 自定义渲染
<Subtitle>
    {({speakerName, fullText}) => (
        <div className="my-subtitle">
            <span>{speakerName}</span>
            <p>{fullText}</p>
        </div>
    )}
</Subtitle>

Widget vs SDK​

SDK 指 @bdky/aaas-pilot-kit-react，提供底层 Hooks 和事件能力，需要自行实现 UI。

场景推荐方案
快速上线，UI 要求不高Widget
需要完全自定义 UI 设计React SDK
80% 默认 + 20% 微调Widget + 样式定制
深度集成到现有设计系统React SDK
不确定？先用 Widget 试试

如果遇到限制，再切换到 SDK 也很容易——它们共享相同的底层 API。Widget 内部使用的 Hooks 和事件都来自 @bdky/aaas-pilot-kit-react。

组件一览​

核心容器​

组件用途
PilotKit核心容器，集成 Provider + 数字人渲染

消息展示​

组件用途
ConversationList消息历史列表
Conversation单条消息
Subtitle实时字幕

交互控制​

组件用途
ControlPanel语音/文字输入控制面板
Input独立文字输入框
RecommendedQuestions推荐问题列表

覆盖层​

组件用途
StartupScreen启动引导页（iOS 手动激活）
LoadingOverlay加载中状态
StatusOverlay通用状态提示（忙碌、超时等）

布局辅助​

组件用途
LayoutFlex 布局容器
FillAdapter自适应填充空间

开发工具​

组件用途
DebugPanel调试面板，显示事件和状态

下一步​

技术支持​