Conversations 对话容器

组合 BubbleList + ThoughtChain + Attachments 的一站式对话列表。

在线演示

Props

Prop	类型	默认值	说明
list	ConversationItem[]	[]	对话项列表
loading	boolean	false	是否加载中
autoScroll	boolean	true	自动滚动

Slots：default（{ item, index }）/ footer / empty

ConversationItem 类型

interface ConversationItem {
  key: string | number
  role: 'ai' | 'user' | 'system'
  avatar?: string
  content?: string           // 文本消息
  files?: FilesType[]        // 文件附件
  thinking?: ThinkingItem[]  // 思考链步骤
  prompts?: PromptItem[]     // 引导提示词
  [key: string]: any         // 透传到 Bubble
}

用法

<script setup lang="ts">
const items = [
  { key: '1', role: 'user', content: '帮我分析项目架构' },
  {
    key: '2',
    role: 'ai',
    content: '好的，我来梳理。',
    thinking: [
      { title: '理解项目', content: '识别模块划分', status: 'success', duration: 180 },
    ],
    prompts: [
      { key: 'a', label: '继续深入' },
      { key: 'b', label: '生成架构图' },
    ],
  },
]
</script>

<template>
  <Conversations :list="items" max-height="400px" />
</template>