Skip to main content

消息组件

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

ConversationList​

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

基本用法​

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

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

响应式适配​

📱 详见 响应式适配指南

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

Props​

属性类型默认值说明
variant'auto' | 'mobile' | 'desktop''auto'显示模式
classNamestring-自定义类名
styleCSSProperties-自定义样式
autoScrollbooleantrue是否自动滚动到底部
closablebooleantrue是否显示关闭按钮
closeIconReactNode-自定义关闭图标
onClose() => void-关闭回调
children(props: IConversationRenderProps) => ReactNode-自定义渲染

自定义渲染​

<ConversationList>
    {({conversations, latestConversation}) => (
        <div className="my-conversation-list">
            {conversations.map(conv => (
                <div key={conv.id} className="my-conversation-item">
                    {conv.type === 'client' ? '用户' : 'AI'}
                </div>
            ))}
        </div>
    )}
</ConversationList>

样式定制​

类名说明
.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 使用，也可单独使用：

import {Conversation} from '@bdky/aaas-pilot-kit-react-widget';

function CustomList({conversations}) {
    return (
        <div>
            {conversations.map(conv => (
                <Conversation
                    key={conv.id}
                    conversation={conv}
                    isLatest={conv === conversations[conversations.length - 1]}
                />
            ))}
        </div>
    );
}

响应式适配​

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

Props​

属性类型默认值说明
conversationAnyConversation必填对话对象
isLatestbooleanfalse是否是最新一条
variant'auto' | 'mobile' | 'desktop''auto'显示模式
classNamestring-自定义类名
styleCSSProperties-自定义样式
onComplete(payload) => void-对话完成回调
children(props: IConversationContentProps) => ReactNode-自定义渲染

自定义渲染​

<Conversation conversation={conv}>
    {({contents, fullText, type, isCompleted}) => (
        <div className={`my-message my-message--${type}`}>
            <p>{fullText}</p>
            {!isCompleted && <span className="typing">...</span>}
        </div>
    )}
</Conversation>

样式定制​

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

Subtitle​

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

基本用法​

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

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

可展开字幕​

const [expanded, setExpanded] = useState(false);

<Subtitle
    expandable
    expanded={expanded}
    onExpand={() => setExpanded(true)}
/>

Props​

属性类型默认值说明
classNamestring-自定义类名
styleCSSProperties-自定义样式
showSpeakerbooleantrue是否显示说话人
aiSpeakerNamestring'AI'AI 说话人名称
userSpeakerNamestring'我'用户说话人名称
expandablebooleanfalse是否可展开
expandedbooleanfalse是否已展开
onExpand() => void-展开回调
children(props: ISubtitleRenderProps) => ReactNode-自定义渲染

自定义渲染​

<Subtitle>
    {({speakerName, fullText, conversation, isExpanded, toggleExpand}) => (
        <div className="my-subtitle">
            <span className="speaker">{speakerName}</span>
            <p className="text">{fullText}</p>
            <button onClick={toggleExpand}>
                {isExpanded ? '收起' : '展开'}
            </button>
        </div>
    )}
</Subtitle>

样式定制​

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

相关​