Skip to main content

控制组件

交互控制相关组件：ControlPanel、Input、RecommendedQuestions。

ControlPanel​

语音/文字输入控制面板，支持模式切换。

基本用法​

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

function App() {
    return (
        <PilotKit {...props}>
            <ControlPanel />
        </PilotKit>
    );
}

响应式适配​

📱 详见 响应式适配指南

特性PC 端移动端
输入框宽度479px 固定100% 自适应
按钮大小54-55px50px
布局居中绝对定位全宽 flex
挂断按钮可选显示始终显示

Props​

属性类型默认值说明
variant'auto' | 'mobile' | 'desktop''auto'显示模式
classNamestring-自定义类名
styleCSSProperties-自定义样式
mode'voice' | 'text'-受控模式
defaultMode'voice' | 'text''voice'默认模式
onModeChange(mode) => void-模式切换回调
inputValuestring-受控输入值
inputPlaceholderstring'请输入...'输入框占位符
inputDisabledbooleanfalse是否禁用输入
onInputChange(value) => void-输入变化回调
onSend(value) => void-发送回调
onMuteToggle(muted) => void-静音切换回调
showHangupButtonbooleanfalse是否显示挂断按钮
onHangup() => void-挂断回调

自定义图标​

属性类型说明
muteIconReactNode静音状态图标
unmuteIconReactNode非静音状态图标
hangupIconReactNode挂断按钮图标
asrIconReactNodeASR 模式图标
keyboardIconReactNode键盘模式图标
sendIconReactNode发送按钮图标

自定义渲染​

<ControlPanel>
    {/* 完全自定义控制面板 */}
    <div className="my-control-panel">
        <button>自定义按钮</button>
    </div>
</ControlPanel>

样式定制​

类名说明
.apk-control-panel根容器
.apk-control-panel--mobile移动端样式
.apk-control-panel__inner内层容器
.apk-control-panel__mode-btn模式切换按钮
.apk-control-panel__input-wrapper输入框容器
.apk-control-panel__input输入框
.apk-control-panel__send-btn发送按钮
.apk-control-panel__mic-btn麦克风按钮
.apk-control-panel__hangup-btn挂断按钮
.apk-control-panel__icon图标
.apk-control-panel__icon-mute静音图标

Input​

独立的文字输入框组件。

基本用法​

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

function App() {
    return (
        <PilotKit {...props}>
            <Input placeholder="输入消息..." />
        </PilotKit>
    );
}

响应式适配​

特性PC 端移动端
宽度479px100%
高度55px50px
圆角28px20px
内边距24px16px

Props​

属性类型默认值说明
variant'auto' | 'mobile' | 'desktop''auto'显示模式
classNamestring-自定义类名
styleCSSProperties-自定义样式
valuestring-受控值
defaultValuestring''默认值
placeholderstring'请输入...'占位符
disabledbooleanfalse是否禁用
maxLengthnumber-最大长度
autoFocusbooleanfalse是否自动聚焦
status'default' | 'error' | 'warning''default'状态
loadingbooleanfalse是否加载中
showSendIconbooleantrue是否显示发送图标
sendIconReactNode-自定义发送图标
onChange(e) => void-原生 change 事件
onTextChange(value) => void-文本变化回调
onSend(value) => void-发送回调
onFocus(e) => void-聚焦回调
onBlur(e) => void-失焦回调
onKeyDown(e) => void-按键回调

自定义渲染​

<Input>
    {({value, setValue, handleSend, disabled, loading}) => (
        <div className="my-input">
            <input
                value={value}
                onChange={e => setValue(e.target.value)}
                disabled={disabled}
            />
            <button onClick={handleSend} disabled={loading}>
                发送
            </button>
        </div>
    )}
</Input>

样式定制​

类名说明
.apk-input根容器
.apk-input--mobile移动端样式
.apk-input--desktop桌面端样式
.apk-input__field输入框
.apk-input__send-icon发送图标
.apk-input__loader加载指示器
.apk-input--error错误状态
.apk-input--warning警告状态
.apk-input--disabled禁用状态
.apk-input--loading加载状态

RecommendedQuestions​

推荐问题列表组件。

基本用法​

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

function App() {
    const pilotKitRef = useRef(null);

    return (
        <PilotKit ref={pilotKitRef} {...props}>
            <RecommendedQuestions
                questions={['介绍一下自己', '你能做什么？', '帮我查询订单']}
                onQuestionClick={q => pilotKitRef.current?.input(q)}
            />
        </PilotKit>
    );
}

响应式适配​

特性PC 端移动端
布局水平排列垂直排列
背景半透明胶囊透明
问题项文字 + 箭头卡片样式
标题显示默认隐藏
分隔符显示隐藏

Props​

属性类型默认值说明
variant'auto' | 'mobile' | 'desktop''auto'显示模式
classNamestring-自定义类名
styleCSSProperties-自定义样式
questionsstring[][]问题列表
titlestring'试试这样问：'标题文本
showTitlebooleanfalse是否显示标题
showDividerbooleantrue是否显示分隔符
expandedbooleanfalse是否展开状态
arrowIconReactNode-自定义箭头图标
onQuestionClick(question: string) => void-点击问题回调

样式定制​

类名说明
.apk-recommended-questions根容器
.apk-recommended-questions--mobile移动端样式
.apk-recommended-questions__title标题
.apk-recommended-questions__divider分隔符
.apk-recommended-questions__list问题列表
.apk-recommended-questions__item问题项
.apk-recommended-questions__arrow箭头图标
.apk-recommended-questions__arrow-icon移动端箭头图标

相关​