Skip to main content

Control Components

Interactive control related components: ControlPanel, Input, RecommendedQuestions.

ControlPanel​

Voice/text input control panel, supports mode switching.

Basic Usage​

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

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

Responsive Adaptation​

📱 See Responsive Adaptation Guide

FeaturePCMobile
Input Width479px fixed100% adaptive
Button Size54-55px50px
LayoutCentered absolute positioningFull-width flex
Hangup ButtonOptional displayAlways display

Props​

PropertyTypeDefaultDescription
variant'auto' | 'mobile' | 'desktop''auto'Display mode
classNamestring-Custom class name
styleCSSProperties-Custom style
mode'voice' | 'text'-Controlled mode
defaultMode'voice' | 'text''voice'Default mode
onModeChange(mode) => void-Mode switch callback
inputValuestring-Controlled input value
inputPlaceholderstring'请输入...'Input placeholder
inputDisabledbooleanfalseWhether to disable input
onInputChange(value) => void-Input change callback
onSend(value) => void-Send callback
onMuteToggle(muted) => void-Mute toggle callback
showHangupButtonbooleanfalseWhether to show hangup button
onHangup() => void-Hangup callback

Custom Icons​

PropertyTypeDescription
muteIconReactNodeMute state icon
unmuteIconReactNodeUnmute state icon
hangupIconReactNodeHangup button icon
asrIconReactNodeASR mode icon
keyboardIconReactNodeKeyboard mode icon
sendIconReactNodeSend button icon

Custom Rendering​

<ControlPanel>
    {/* Fully custom control panel */}
    <div className="my-control-panel">
        <button>Custom Button</button>
    </div>
</ControlPanel>

Style Customization​

Class NameDescription
.apk-control-panelRoot container
.apk-control-panel--mobileMobile style
.apk-control-panel__innerInner container
.apk-control-panel__mode-btnMode switch button
.apk-control-panel__input-wrapperInput wrapper
.apk-control-panel__inputInput
.apk-control-panel__send-btnSend button
.apk-control-panel__mic-btnMicrophone button
.apk-control-panel__hangup-btnHangup button
.apk-control-panel__iconIcon
.apk-control-panel__icon-muteMute icon

Input​

Independent text input component.

Basic Usage​

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

function App() {
    return (
        <PilotKit {...props}>
            <Input placeholder="Enter message..." />
        </PilotKit>
    );
}

Responsive Adaptation​

FeaturePCMobile
Width479px100%
Height55px50px
Border Radius28px20px
Padding24px16px

Props​

PropertyTypeDefaultDescription
variant'auto' | 'mobile' | 'desktop''auto'Display mode
classNamestring-Custom class name
styleCSSProperties-Custom style
valuestring-Controlled value
defaultValuestring''Default value
placeholderstring'请输入...'Placeholder
disabledbooleanfalseWhether disabled
maxLengthnumber-Maximum length
autoFocusbooleanfalseWhether to auto focus
status'default' | 'error' | 'warning''default'Status
loadingbooleanfalseWhether loading
showSendIconbooleantrueWhether to show send icon
sendIconReactNode-Custom send icon
onChange(e) => void-Native change event
onTextChange(value) => void-Text change callback
onSend(value) => void-Send callback
onFocus(e) => void-Focus callback
onBlur(e) => void-Blur callback
onKeyDown(e) => void-Keydown callback

Custom Rendering​

<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}>
                Send
            </button>
        </div>
    )}
</Input>

Style Customization​

Class NameDescription
.apk-inputRoot container
.apk-input--mobileMobile style
.apk-input--desktopDesktop style
.apk-input__fieldInput field
.apk-input__send-iconSend icon
.apk-input__loaderLoading indicator
.apk-input--errorError state
.apk-input--warningWarning state
.apk-input--disabledDisabled state
.apk-input--loadingLoading state

RecommendedQuestions​

Recommended questions list component.

Basic Usage​

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

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

    return (
        <PilotKit ref={pilotKitRef} {...props}>
            <RecommendedQuestions
                questions={['Introduce yourself', 'What can you do?', 'Help me check my order']}
                onQuestionClick={q => pilotKitRef.current?.input(q)}
            />
        </PilotKit>
    );
}

Responsive Adaptation​

FeaturePCMobile
LayoutHorizontal arrangementVertical arrangement
BackgroundSemi-transparent capsuleTransparent
Question ItemText + arrowCard style
TitleVisibleHidden by default
DividerVisibleHidden

Props​

PropertyTypeDefaultDescription
variant'auto' | 'mobile' | 'desktop''auto'Display mode
classNamestring-Custom class name
styleCSSProperties-Custom style
questionsstring[][]Question list
titlestring'试试这样问：'Title text
showTitlebooleanfalseWhether to show title
showDividerbooleantrueWhether to show divider
expandedbooleanfalseWhether expanded
arrowIconReactNode-Custom arrow icon
onQuestionClick(question: string) => void-Question click callback

Style Customization​

Class NameDescription
.apk-recommended-questionsRoot container
.apk-recommended-questions--mobileMobile style
.apk-recommended-questions__titleTitle
.apk-recommended-questions__dividerDivider
.apk-recommended-questions__listQuestion list
.apk-recommended-questions__itemQuestion item
.apk-recommended-questions__arrowArrow icon
.apk-recommended-questions__arrow-iconMobile arrow icon