Message Components

Message display related components: ConversationList, Conversation, Subtitle.

ConversationList

Conversation history list component, automatically subscribes to conversation changes.

Basic Usage

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

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

Responsive Adaptation

📱 See Responsive Adaptation Guide

Feature	PC	Mobile
Conversation Display	Show all history	Show only latest one
Close Button	Visible	Hidden
Scroll Follow Button	Visible	Hidden
Position	Absolute positioning on left	Relative positioning

Props

Property	Type	Default	Description
variant	'auto' | 'mobile' | 'desktop'	'auto'	Display mode
class	string	-	Custom class name
style	CSSProperties	-	Custom style
autoScroll	boolean	true	Whether to auto-scroll to bottom
closable	boolean	true	Whether to show close button

Events

Event	Type	Description
@close	() => void	Close callback

Slots

Slot	Props	Description
default	{conversations, latestConversation}	Custom render
closeIcon	-	Custom close icon

Custom Rendering

<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' ? 'User' : 'AI' }}
            </div>
        </div>
    </ConversationList>
</template>

Style Customization

Class Name	Description
.apk-conversation-list	Root container
.apk-conversation-list--mobile	Mobile style
.apk-conversation-list--desktop	Desktop style
.apk-conversation-list__inner	Inner scroll container
.apk-conversation-list__follow-button	Scroll follow button
.apk-conversation-list__icons-wrapper	Close button container

---

Conversation

Single message component, displays message content.

Basic Usage

Usually used with ConversationList, but can also be used independently:

<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>

Responsive Adaptation

Feature	PC	Mobile
Border Radius	20px	Different border radius for different directions
Margin	Left/right 30px	Left/right 39px
Background	Semi-transparent	Darker semi-transparent

Props

Property	Type	Default	Description
conversation	AnyConversation	Required	Conversation object
isLatest	boolean	false	Whether it's the latest one
variant	'auto' | 'mobile' | 'desktop'	'auto'	Display mode
class	string	-	Custom class name
style	CSSProperties	-	Custom style

Events

Event	Type	Description
@complete	(payload) => void	Conversation completion callback

Slots

Slot	Props	Description
default	{contents, fullText, type, isCompleted}	Custom render

Custom Rendering

<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>

Style Customization

Class Name	Description
.apk-conversation	Root container
.apk-conversation--client	User message
.apk-conversation--ai	AI message
.apk-conversation--mobile	Mobile style
.apk-conversation--desktop	Desktop style
.apk-conversation__content-item	Content item
.apk-conversation__content-text	Text content
.apk-conversation__content-image	Image content
.apk-conversation__content-video	Video content

---

Subtitle

Real-time subtitle component, displays content of the latest conversation.

Basic Usage

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

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

Expandable Subtitle

<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

Property	Type	Default	Description
class	string	-	Custom class name
style	CSSProperties	-	Custom style
showSpeaker	boolean	true	Whether to show speaker
aiSpeakerName	string	'AI'	AI speaker name
userSpeakerName	string	'Me'	User speaker name
expandable	boolean	false	Whether expandable
expanded	boolean	false	Whether expanded

Events

Event	Type	Description
@expand	() => void	Expand callback

Slots

Slot	Props	Description
default	{speakerName, fullText, conversation, isExpanded, toggleExpand}	Custom render

Custom Rendering

<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 ? 'Collapse' : 'Expand' }}
            </button>
        </div>
    </Subtitle>
</template>

Style Customization

Class Name	Description
.apk-subtitle	Root container
.apk-subtitle__wrapper	Content wrapper
.apk-subtitle__expand-btn	Expand button
.apk-subtitle__text	Text area
.apk-subtitle__scroll-view	Scroll view

Related

• Vue 3 SDK useConversation - Underlying Composable
• Vue 3 SDK useConversationList - Underlying Composable