Control Components

Interactive control related components: ControlPanel, Input, RecommendedQuestions.

ControlPanel

Voice/text input control panel, supports mode switching.

Basic Usage

<script setup lang="ts">
import {PilotKit, ControlPanel} from '@bdky/aaas-pilot-kit-vue3-widget';
import '@bdky/aaas-pilot-kit-vue3-widget/styles.css';
</script>

<template>
    <PilotKit v-bind="props">
        <ControlPanel />
    </PilotKit>
</template>

Responsive Adaptation

📱 See Responsive Adaptation Guide

Feature	PC	Mobile
Input Width	479px fixed	100% adaptive
Button Size	54-55px	50px
Layout	Centered absolute positioning	Full-width flex
Hangup Button	Optional display	Always display

Props

Property	Type	Default	Description
variant	'auto' | 'mobile' | 'desktop'	'auto'	Display mode
class	string	-	Custom class name
style	CSSProperties	-	Custom style
mode	'voice' | 'text'	-	Controlled mode
defaultMode	'voice' | 'text'	'voice'	Default mode
inputValue	string	-	Controlled input value
inputPlaceholder	string	'请输入...'	Input placeholder
inputDisabled	boolean	false	Whether to disable input
showHangupButton	boolean	false	Whether to show hangup button

Events

Event	Type	Description
@modeChange	(mode) => void	Mode switch callback
@inputChange	(value) => void	Input change callback
@send	(value) => void	Send callback
@muteToggle	(muted) => void	Mute toggle callback
@hangup	() => void	Hangup callback

Slots

Slot	Description
default	Fully custom rendering
muteIcon	Mute state icon
unmuteIcon	Unmute state icon
hangupIcon	Hangup button icon
asrIcon	ASR mode icon
keyboardIcon	Keyboard mode icon
sendIcon	Send button icon

Custom Rendering

<template>
    <ControlPanel>
        <!-- Fully custom control panel -->
        <div class="my-control-panel">
            <button>Custom Button</button>
        </div>
    </ControlPanel>
</template>

Style Customization

Class Name	Description
.apk-control-panel	Root container
.apk-control-panel--mobile	Mobile style
.apk-control-panel__inner	Inner container
.apk-control-panel__mode-btn	Mode switch button
.apk-control-panel__input-wrapper	Input wrapper
.apk-control-panel__input	Input
.apk-control-panel__send-btn	Send button
.apk-control-panel__mic-btn	Microphone button
.apk-control-panel__hangup-btn	Hangup button
.apk-control-panel__icon	Icon
.apk-control-panel__icon-mute	Mute icon

---

Input

Independent text input component.

Basic Usage

<script setup lang="ts">
import {PilotKit, Input} from '@bdky/aaas-pilot-kit-vue3-widget';
import '@bdky/aaas-pilot-kit-vue3-widget/styles.css';
</script>

<template>
    <PilotKit v-bind="props">
        <Input placeholder="Enter message..." />
    </PilotKit>
</template>

Responsive Adaptation

Feature	PC	Mobile
Width	479px	100%
Height	55px	50px
Border Radius	28px	20px
Padding	24px	16px

Props

Property	Type	Default	Description
variant	'auto' | 'mobile' | 'desktop'	'auto'	Display mode
class	string	-	Custom class name
style	CSSProperties	-	Custom style
modelValue	string	-	v-model binding value
defaultValue	string	''	Default value
placeholder	string	'请输入...'	Placeholder
disabled	boolean	false	Whether disabled
maxLength	number	-	Maximum length
autoFocus	boolean	false	Whether to auto focus
status	'default' | 'error' | 'warning'	'default'	Status
loading	boolean	false	Whether loading
showSendIcon	boolean	true	Whether to show send icon

Events

Event	Type	Description
@update:modelValue	(value) => void	v-model update
@textChange	(value) => void	Text change callback
@send	(value) => void	Send callback
@focus	(e) => void	Focus callback
@blur	(e) => void	Blur callback
@keydown	(e) => void	Keydown callback

Slots

Slot	Props	Description
default	{value, setValue, handleSend, disabled, loading}	Custom render
sendIcon	-	Custom send icon

Custom Rendering

<template>
    <Input v-slot="{value, setValue, handleSend, disabled, loading}">
        <div class="my-input">
            <input
                :value="value"
                @input="e => setValue(e.target.value)"
                :disabled="disabled"
            />
            <button @click="handleSend" :disabled="loading">
                Send
            </button>
        </div>
    </Input>
</template>

Style Customization

Class Name	Description
.apk-input	Root container
.apk-input--mobile	Mobile style
.apk-input--desktop	Desktop style
.apk-input__field	Input field
.apk-input__send-icon	Send icon
.apk-input__loader	Loading indicator
.apk-input--error	Error state
.apk-input--warning	Warning state
.apk-input--disabled	Disabled state
.apk-input--loading	Loading state

---

RecommendedQuestions

Recommended questions list component.

Basic Usage

<script setup lang="ts">
import {ref} from 'vue';
import {PilotKit, RecommendedQuestions, type IPilotKitRef} from '@bdky/aaas-pilot-kit-vue3-widget';
import '@bdky/aaas-pilot-kit-vue3-widget/styles.css';

const pilotKitRef = ref<IPilotKitRef | null>(null);

function handleQuestionClick(question: string) {
    pilotKitRef.value?.input(question);
}
</script>

<template>
    <PilotKit ref="pilotKitRef" v-bind="props">
        <RecommendedQuestions
            :questions="['Introduce yourself', 'What can you do?', 'Help me check my order']"
            @questionClick="handleQuestionClick"
        />
    </PilotKit>
</template>

Responsive Adaptation

Feature	PC	Mobile
Layout	Horizontal arrangement	Vertical arrangement
Background	Semi-transparent capsule	Transparent
Question Item	Text + arrow	Card style
Title	Visible	Hidden by default
Divider	Visible	Hidden

Props

Property	Type	Default	Description
variant	'auto' | 'mobile' | 'desktop'	'auto'	Display mode
class	string	-	Custom class name
style	CSSProperties	-	Custom style
questions	string[]	[]	Question list
title	string	'试试这样问：'	Title text
showTitle	boolean	false	Whether to show title
showDivider	boolean	true	Whether to show divider
expanded	boolean	false	Whether expanded

Events

Event	Type	Description
@questionClick	(question: string) => void	Question click callback

Slots

Slot	Description
arrowIcon	Custom arrow icon

Style Customization

Class Name	Description
.apk-recommended-questions	Root container
.apk-recommended-questions--mobile	Mobile style
.apk-recommended-questions__title	Title
.apk-recommended-questions__divider	Divider
.apk-recommended-questions__list	Question list
.apk-recommended-questions__item	Question item
.apk-recommended-questions__arrow	Arrow icon
.apk-recommended-questions__arrow-icon	Mobile arrow icon

Related

• PilotKit - Core container component
• Vue 3 SDK Composables - Underlying Composables