Bubble

Bubble 渲染单条消息，自动处理用户与助手布局，并组合头像、推理过程、工具调用、Artifact 和消息操作。

导入方式

按需导入

import { Bubble } from '@weimin96/ai-chat-vue'
import '@weimin96/ai-chat-vue/styles'

完整导入

import * as AiChatVue from '@weimin96/ai-chat-vue'
import '@weimin96/ai-chat-vue/styles'

app.use(AiChatVue)

// 模板中可直接使用 <Bubble />

基础用法

U

帮我总结这个组件库的核心能力。

03:30 PM

AI

识别用户目标：需要一个可复用的聊天界面。

组合消息气泡、输入框和 Markdown 渲染能力。

它提供 聊天容器、消息气泡、输入框 和 Markdown 渲染能力。

🌐

状态卡片

HTML · v1

03:31 PM

<script setup lang="ts">
import { Bubble } from '@weimin96/ai-chat-vue'
import { sampleMessages } from '../../.vitepress/theme/demo-data'
</script>

<template>
  <div class="docs-narrow">
    <Bubble :message="sampleMessages[0]" />
    <Bubble :message="sampleMessages[1]" />
  </div>
</template>

API

属性	类型	默认值	说明
message	Message	必填	消息对象
showAvatar	boolean	true	是否显示头像
enableMarkdown	boolean	true	助手消息是否渲染 Markdown
onRetry	() => void	undefined	重试回调
onEdit	(content: string) => void	undefined	编辑回调
onDelete	() => void	undefined	删除回调

注意事项

复杂消息内容由子组件渲染，建议通过 Message 类型组织数据。