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

空

暂无会话

<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

数据来自 ChatProvider 提供的聊天上下文。

属性	类型	默认值	说明
showCreateButton	boolean	true	是否显示新建会话按钮
showSearch	boolean	true	是否显示搜索框
emptyText	string	暂无会话	空状态文案

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

插槽	参数	说明
item	{ conversation, active, editing, select }	自定义会话条目内容
actions	{ conversation, close }	自定义会话操作菜单

注意事项

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