消息组件

消息展示相关组件：ConversationList、Conversation、Subtitle。

ConversationList

对话历史列表组件，自动订阅对话变化。

基本用法

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

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

响应式适配

📱 详见 响应式适配指南

特性	PC 端	移动端
对话显示	显示全部历史	仅显示最新一条
关闭按钮	显示	隐藏
滚动跟随按钮	显示	隐藏
位置	绝对定位左侧	相对定位

Props

属性	类型	默认值	说明
variant	'auto' | 'mobile' | 'desktop'	'auto'	显示模式
class	string	-	自定义类名
style	CSSProperties	-	自定义样式
autoScroll	boolean	true	是否自动滚动到底部
closable	boolean	true	是否显示关闭按钮

事件

事件	类型	说明
@close	() => void	关闭回调

Slots

插槽	Props	说明
default	{conversations, latestConversation}	自定义渲染
closeIcon	-	自定义关闭图标

自定义渲染

<template>
    <ConversationList v-slot="{conversations, latestConversation}">
        <div class="my-conversation-list">
            <div
                v-for="conv in conversations"
                :key="conv.id"
                class="my-conversation-item"
            >
                {{ conv.type === 'client' ? '用户' : 'AI' }}
            </div>
        </div>
    </ConversationList>
</template>

样式定制

类名	说明
.apk-conversation-list	根容器
.apk-conversation-list--mobile	移动端样式
.apk-conversation-list--desktop	桌面端样式
.apk-conversation-list__inner	内层滚动容器
.apk-conversation-list__follow-button	滚动跟随按钮
.apk-conversation-list__icons-wrapper	关闭按钮容器

---

Conversation

单条消息组件，展示消息内容。

基本用法

通常配合 ConversationList 使用，也可单独使用：

<script setup lang="ts">
import {Conversation} from '@bdky/aaas-pilot-kit-vue3-widget';

defineProps<{
    conversations: any[];
}>();
</script>

<template>
    <div>
        <Conversation
            v-for="(conv, index) in conversations"
            :key="conv.id"
            :conversation="conv"
            :isLatest="index === conversations.length - 1"
        />
    </div>
</template>

响应式适配

特性	PC 端	移动端
圆角	20px	不同方向不同圆角
边距	左右 30px	左右 39px
背景	半透明	更深的半透明

Props

属性	类型	默认值	说明
conversation	AnyConversation	必填	对话对象
isLatest	boolean	false	是否是最新一条
variant	'auto' | 'mobile' | 'desktop'	'auto'	显示模式
class	string	-	自定义类名
style	CSSProperties	-	自定义样式

事件

事件	类型	说明
@complete	(payload) => void	对话完成回调

Slots

插槽	Props	说明
default	{contents, fullText, type, isCompleted}	自定义渲染

自定义渲染

<template>
    <Conversation
        :conversation="conv"
        v-slot="{contents, fullText, type, isCompleted}"
    >
        <div :class="['my-message', `my-message--${type}`]">
            <p>{{ fullText }}</p>
            <span v-if="!isCompleted" class="typing">...</span>
        </div>
    </Conversation>
</template>

样式定制

类名	说明
.apk-conversation	根容器
.apk-conversation--client	用户消息
.apk-conversation--ai	AI 消息
.apk-conversation--mobile	移动端样式
.apk-conversation--desktop	桌面端样式
.apk-conversation__content-item	内容项
.apk-conversation__content-text	文字内容
.apk-conversation__content-image	图片内容
.apk-conversation__content-video	视频内容

---

Subtitle

实时字幕组件，显示最新一条对话的内容。

基本用法

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

<template>
    <PilotKit v-bind="props">
        <Subtitle showSpeaker />
    </PilotKit>
</template>

可展开字幕

<script setup lang="ts">
import {ref} from 'vue';
import {Subtitle} from '@bdky/aaas-pilot-kit-vue3-widget';

const expanded = ref(false);
</script>

<template>
    <Subtitle
        expandable
        :expanded="expanded"
        @expand="expanded = true"
    />
</template>

Props

属性	类型	默认值	说明
class	string	-	自定义类名
style	CSSProperties	-	自定义样式
showSpeaker	boolean	true	是否显示说话人
aiSpeakerName	string	'AI'	AI 说话人名称
userSpeakerName	string	'我'	用户说话人名称
expandable	boolean	false	是否可展开
expanded	boolean	false	是否已展开

事件

事件	类型	说明
@expand	() => void	展开回调

Slots

插槽	Props	说明
default	{speakerName, fullText, conversation, isExpanded, toggleExpand}	自定义渲染

自定义渲染

<template>
    <Subtitle v-slot="{speakerName, fullText, isExpanded, toggleExpand}">
        <div class="my-subtitle">
            <span class="speaker">{{ speakerName }}</span>
            <p class="text">{{ fullText }}</p>
            <button @click="toggleExpand">
                {{ isExpanded ? '收起' : '展开' }}
            </button>
        </div>
    </Subtitle>
</template>

样式定制

类名	说明
.apk-subtitle	根容器
.apk-subtitle__wrapper	内容包装器
.apk-subtitle__expand-btn	展开按钮
.apk-subtitle__text	文本区域
.apk-subtitle__scroll-view	滚动视图

相关

• Vue 3 SDK useConversation - 底层 Composable
• Vue 3 SDK useConversationList - 底层 Composable