BubbleList

BubbleList 渲染消息数组，并在新增消息或流式输出时自动滚动到底部。

导入方式

按需导入

import { BubbleList } 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)

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

基础用法

U

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

03:30 PM

AI

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

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

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

🌐

状态卡片

HTML · v1

03:31 PM

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

<template>
  <div style="height: 420px">
    <BubbleList :messages="sampleMessages" enable-markdown />
  </div>
</template>

API

属性	类型	默认值	说明
messages	Message[]	必填	消息列表
isGenerating	boolean	false	是否生成中
enableMarkdown	boolean	false	是否启用 Markdown
onRetry	(id: string) => void	undefined	重试消息
onDelete	(id: string) => void	undefined	删除消息

注意事项

外层容器需要提供高度，否则滚动区域无法形成。