ChatContainer

ChatContainer 组合欢迎页、消息列表和输入框，适合作为完整聊天界面的主体。

导入方式

按需导入

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

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

基础用法

✦

开始对话

ChatContainer 组合欢迎页、消息列表和输入框。

文档示例使用本地模拟回复。

<script setup lang="ts">
import { ChatContainer, ChatProvider } from '@weimin96/ai-chat-vue'
import {
  demoAdapter,
  promptCards,
  suggestions,
} from '../../.vitepress/theme/demo-data'
</script>

<template>
  <div class="docs-chat-shell">
    <ChatProvider :adapter="demoAdapter">
      <ChatContainer
        welcome-title="开始对话"
        welcome-subtitle="ChatContainer 组合欢迎页、消息列表和输入框。"
        :prompt-cards="promptCards"
        :suggestions="suggestions"
      >
        <template #footer>文档示例使用本地模拟回复。</template>
      </ChatContainer>
    </ChatProvider>
  </div>
</template>

API

属性	类型	默认值	说明
showWelcome	boolean	true	空会话时是否展示欢迎页
welcomeTitle	string	undefined	欢迎页标题
welcomeSubtitle	string	undefined	欢迎页副标题
promptCards	Array<{ icon?: string; title: string; prompt: string }>	undefined	欢迎页提示卡片
suggestions	string[]	undefined	输入框建议项
placeholder	string	undefined	输入框占位文本
enableVoice	boolean	false	是否启用语音按钮
enableAttachments	boolean	false	是否启用附件按钮
enableMarkdown	boolean	true	是否渲染助手 Markdown

插槽	说明
footer	输入框底部提示

注意事项

组件必须位于 ChatProvider 内部，否则无法访问聊天上下文。