Vue AI Chat UI

一个基于 Vue 3 的 AI 智能问答 UI 组件库，专注于提供流畅的对话体验。 风格模仿饿了么 UI (Element Plus)，简洁美观。

✨ 特性

• 💬 对话框 (ChatBox): 支持消息历史展示，内置 Markdown 渲染和代码高亮。
• ⌨️ 输入框 (ChatInput): 支持多行文本、文件上传、自动调整高度。
• 🌊 流式响应: 内置流式打字机效果（光标动画），完美适配 AI 生成式回复。
• 🎨 可定制: 样式易于覆盖 (SCSS)，开箱即用。

📦 安装

npm install vue-ai-chat-ui
# 或者
yarn add vue-ai-chat-ui

🚀 快速开始

引入组件和样式

在你的主入口文件（如 main.ts）中全局注册：

import { createApp } from 'vue'
import App from './App.vue'
import { ChatBox, ChatInput } from 'vue-ai-chat-ui'
import 'vue-ai-chat-ui/style.css'

const app = createApp(App)
// 全局注册
app.component('ChatBox', ChatBox)
app.component('ChatInput', ChatInput)
app.mount('#app')

或者在组件中直接引入：

<script setup>
import { ref } from 'vue'
import { ChatBox, ChatInput } from 'vue-ai-chat-ui'
import 'vue-ai-chat-ui/style.css'

const messages = ref([
  { role: 'assistant', content: '你好！我是你的 AI 助手，有什么可以帮你的吗？' }
])

const handleSend = ({ text, file }) => {
  messages.value.push({ role: 'user', content: text })
  // 这里处理 API 调用...
}
</script>

<template>
  <div style="height: 500px; display: flex; flex-direction: column;">
    <ChatBox :messages="messages" />
    <ChatInput @send="handleSend" />
  </div>
</template>

📚 组件 API

ChatBox (对话容器)

| 属性名 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | messages | Array | [] | 消息列表，格式：{ role: 'user'\|'assistant', content: string, streaming?: boolean } | | loading | Boolean | false | 是否显示加载中状态（对方正在输入） | | autoScroll | Boolean | true | 是否在收到新消息时自动滚动到底部 |

ChatInput (输入框)

| 属性名 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | placeholder | String | '请输入内容...' | 输入框提示文本 | | disabled | Boolean | false | 是否禁用输入框 | | allowFile | Boolean | true | 是否显示文件上传按钮 | | allowMultiline | Boolean | true | 是否允许通过 Shift+Enter 换行（Enter 发送） | | rows | Number | 2 | 输入框初始行数 |

🔔 事件

ChatInput

• send: 用户点击发送或按回车时触发。回调参数: { text: string, file: File | null }
• file-change: 用户选择了文件时触发。

🧩 插槽 (Slots)

ChatBox

• user-avatar: 自定义用户头像内容。
• assistant-avatar: 自定义助手头像内容。