@mzy0217/chat-ui

@mzy0217/chat-ui

Vue3 Chat UI 组件，支持 SSE 流式输出、工具调用和多模态交互。

特性

• 📡 SSE 流式消息推送
• 🛠️ 工具调用表单支持（Collect / Action 模式）
• 🎨 Tailwind CSS 样式系统
• 📱 多模式支持（Page / Drawer / Widget）
• 💬 会话管理和历史记录
• 🔄 完整的 TypeScript 类型定义

安装

pnpm add @mzy0217/chat-ui

2.0 破坏性升级：本库自 2.0 起基于 Tailwind CSS v4，所有 utility 前缀由 cui- 改为 cui:（如 cui:flex）。 接入方式更简单——只需 import 样式，不再需要任何 Tailwind 配置或 preset。从 1.x 升级请参考下方接入说明。

使用

1. 引入样式（唯一需要的样式步骤）

// main.ts
import '@mzy0217/chat-ui/style.css'

组件库已内置物理级样式隔离（基于 Tailwind v4 prefix(cui)）：所有 Tailwind utility 都带 cui: 前缀 （cui:flex、cui:bg-primary …），CSS 变量带 --cui- 前缀且只挂在 .chat-ui-scope 作用域根上，且不注入 全局 reset（preflight 已禁用）。因此与宿主项目的 Tailwind / Element Plus / vben 等不可能撞名污染，双向隔离。

2. 无需任何 Tailwind 配置

dist/style.css 已是 Tailwind v4 编译完成、带 cui: 前缀的完整样式，import 即用。 宿主不需要继承 preset，也不需要扫描本库 dist。宿主继续使用自己独立的 Tailwind（v3 或 v4 均可，无前缀）即可， 两套 Tailwind 互不干扰。

3. 主题定制（可选）

宿主想换肤或适配暗色，只需覆盖 .chat-ui-scope 上的 --cui-* 变量；暗色在作用域根或其祖先加 .dark 类即可切换：

.chat-ui-scope {
  --cui-primary: 262 83% 58%;   /* 改主色（HSL 分量） */
  --cui-radius: 0.75rem;         /* 改圆角 */
}

4. 使用组件

<script setup lang="ts">
import { ChatPanel } from '@mzy0217/chat-ui'
import type { ChatConfig } from '@mzy0217/chat-ui'

const config: ChatConfig = {
  apiUrl: '/api/ai-agent/chat',
  mode: 'page',
  suggestions: ['帮我查询订单', '生成报告'],
  createSession: async () => {
    // 创建会话逻辑
  },
  createTask: async (sessionId) => {
    // 创建任务逻辑
  },
  fetchSessions: async () => {
    // 获取会话列表
  },
  loadHistory: async (sessionId) => {
    // 加载历史消息
  },
  deleteSession: async (sessionId) => {
    // 删除会话
  },
}
</script>

<template>
  <ChatPanel :config="config" />
</template>

API

ChatConfig

详见 types.ts。

开发

# 安装依赖
pnpm install

# 构建包
pnpm --filter @mzy0217/chat-ui build

# 启动 playground
pnpm --filter playground dev

License

MIT