flowporr

Appearance

ai-chat-vue ​

Vue3 AI 聊天组件库 —— 聊天界面 · 思考链 · 智能输入框 · 附件卡片。

在线演示 ​

安装 ​

bash
# ai-chat-vue 依赖 Element Plus（peer）
pnpm add @flowporr/ai-chat-vue element-plus

注册 ​

ts
// 全局注册
import ElementPlusX from '@flowporr/ai-chat-vue'
import '@flowporr/ai-chat-vue/style'
app.use(ElementPlusX)

// 或按需引入
import { BubbleList, XSender } from '@flowporr/ai-chat-vue'

组件结构 ​

ConfigProvider（主题 + 命名空间配置）
├── Conversations（对话列表容器）
│   └── item
│       ├── Bubble（聊天气泡）
│       ├── ThoughtChain（思考链）
│       │   └── Thinking（单步思考）
│       ├── Attachments（附件列表）
│       │   └── FilesCard（文件卡片）× N
│       └── Prompts（引导提示词）
├── Welcome（欢迎页 / 空状态）
└── XSender（智能输入框）
    ├── SendButton / LoadingButton / ClearButton
    └── x-sender（底层输入引擎）

组件一览 ​

组件说明文档
ConfigProvider全局配置（namespace / 主题 / autoDark）总览下方
Bubble聊天气泡（变体 / 形状 / 打字机）Bubble
BubbleList虚拟滚动对话列表Bubble
Conversations高层对话容器Conversations
Thinking / ThoughtChain思考链Thinking
Attachments / FilesCard文件附件Attachments
Prompts引导提示词Prompts
Welcome欢迎页 / 空状态Welcome
XSender智能输入框XSender

ConfigProvider — 全局配置 ​

在应用根组件提供命名空间前缀和主题覆盖。

Prop类型默认值说明
namespacestring'elx'全局 CSS 类名前缀
themeOverridesThemeOverridesundefined主题变量覆盖
autoDarkbooleantrue自动跟随系统暗色模式
vue
<ConfigProvider
  namespace="my-app"
  :theme-overrides="{ bubble: { bgColor: 'var(--js-surface)', borderRadius: '12px' } }"
  :auto-dark="true"
>
  <App />
</ConfigProvider>

主题 ​

组件用 --js-* 设计 token（--js-surface / --js-text / --js-primary 等），支持 6 套配色 × 2 模式。暗色走 [data-theme-mode='dark'] 选择器。文档站已内置一套 token，可在应用里覆盖。

子菜单 ​