ConversationList

ConversationList 展示会话列表、置顶会话和最近会话，并提供新建、重命名、置顶、归档、删除和导出入口。

导入方式

按需导入

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

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

基础用法

() => null

💬

No conversations yet

<script setup lang="ts">
import { onMounted } from 'vue'
import { ChatProvider, ConversationList, useChat } from '@weimin96/ai-chat-vue'

function SeedConversations() {
  const chat = useChat()
  onMounted(() => {
    if (chat.conversations.value.length) return
    const first = chat.createConversation('产品方案讨论')
    chat.addMessage({ role: 'user', content: '整理组件文档结构。' })
    chat.pinConversation(first.id, true)
    chat.createConversation('流式输出验证')
    chat.addMessage({ role: 'assistant', content: '本地适配器已准备完成。' })
  })
  return () => null
}
</script>

<template>
  <div style="height: 360px; max-width: 340px">
    <ChatProvider>
      <SeedConversations />
      <ConversationList />
    </ChatProvider>
  </div>
</template>

API

该组件不接收公开 Props，数据来自 ChatProvider 提供的聊天上下文。

操作	说明
新建会话	调用上下文中的 createConversation()
选择会话	调用 setActive(id)
导出会话	生成 JSON 文件

注意事项

ConversationList 适合侧栏布局，需要外层提供明确高度。