ai-dialog-plugin

Vue 3 + TypeScript + Element Plus AI 流式对话组件。

组件不内置弹窗和外框盒子，外层容器由业务自己决定；但消息内容的渲染方式由组件内部固定处理：

| 能力 | 说明 | |---|---| | API 请求 | 通过 api 配置发起请求 | | 流式解析 | 读取 ReadableStream，解析普通文本流、SSE、常见 JSON delta | | 打字机展示 | 将解析后的内容逐字追加到 assistant 消息 | | 固定内容渲染 | assistant 消息在组件内部统一使用 markstream-vue 渲染 Markdown / 代码块等格式 | | 流程图渲染 | 内部集成 mermaid >= 11，支持 Mermaid 流程图 | | 外框自定义 | 用户只负责外部盒子、页面布局和样式 |

安装

npm install ai-dialog-plugin

宿主项目需要同时安装并注册 vue 和 element-plus。

全局注册

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import AiDialogPlugin from 'ai-dialog-plugin';
import App from './App.vue';

createApp(App).use(ElementPlus).use(AiDialogPlugin).mount('#app');

使用方式

<script setup lang="ts">
import { AiStream, type AiDialogApiConfig } from 'ai-dialog-plugin';
import 'ai-dialog-plugin/style.css';

const api: AiDialogApiConfig = {
  url: '/api/chat',
  headers: {
    Authorization: 'Bearer your-token'
  },
  body: ({ text, messages }) => ({
    model: 'your-model',
    stream: true,
    messages: messages.map((message) => ({
      role: message.role,
      content: message.content
    }))
  })
};
</script>

<template>
  <section class="your-chat-box">
    <AiStream :api="api" :type-speed="24" />
  </section>
</template>

组件会自动完成请求发送、流式数据解析、消息追加、Markdown 渲染和打字机展示。业务侧只需要决定把 AiStream 放在弹窗、抽屉、页面卡片还是任意自定义盒子里。

Mermaid 示例：

```mermaid
flowchart TD
  A[插件接入] --> B[配置 API]
  B --> C[流式解析]
  C --> D[Markdown / Mermaid 渲染]
```

API 配置

| 字段 | 类型 | 默认值 | 说明 | |---|---|---|---| | url | string | 必填 | 请求地址 | | method | string | POST | 请求方法 | | headers | HeadersInit \| Function | - | 请求头，支持按当前输入和历史消息动态生成 | | body | object \| Function | { prompt, messages } | 请求体，支持完全自定义 | | promptKey | string | prompt | 未自定义 body 时，用户输入对应的字段名 | | messagesKey | string | messages | 未自定义 body 时，历史消息对应的字段名 | | credentials | RequestCredentials | - | 透传给 fetch | | parser | (chunk: string) => string | 内置解析器 | 自定义流式 chunk 解析逻辑 |

内置解析器兼容普通文本流、SSE data: 行，以及常见的 choices[0].delta.content / content / text / answer 字段。

常用 Props

| 字段 | 类型 | 默认值 | 说明 | |---|---|---|---| | typeSpeed | number | 24 | 打字机每个字符的间隔，单位毫秒 | | messages | AiDialogMessage[] | [] | 可选，用于外部同步消息 | | maxHeight | string \| number | 420px | 内部消息区域最大高度 | | autoSend | string | - | 组件挂载后自动发送的提示词 | | disabled | boolean | false | 禁用输入与发送 | | errorText | string | 请求失败，请稍后重试 | 请求失败时写入 assistant 消息的内容 | | placeholder | string | 请输入内容 | 输入框占位文本 | | sendText | string | 发送 | 发送按钮文案 | | stopText | string | 停止 | 停止按钮文案 | | clearText | string | 清空 | 清空按钮文案 | | emptyText | string | 暂无消息 | 空消息文案 | | loadingText | string | 思考中... | assistant 空内容加载文案 | | showComposer | boolean | true | 是否显示内部输入区 | | showMeta | boolean | false | 是否显示消息名称和时间 |

可选插槽

| 插槽 | 说明 | |---|---| | avatar | 自定义头像区域，不影响消息内容渲染 | | empty | 自定义空状态 | | composer | 自定义输入区；消息列表和内容渲染仍由组件内部固定处理 |

事件

| 事件 | 参数 | 说明 | |---|---|---| | send | { text, messages } | 用户发送后触发 | | done | { text, messages } | 流式响应完成后触发 | | error | { error, messages } | 请求或解析失败后触发 | | stop | - | 用户停止响应后触发 | | update:messages | AiDialogMessage[] | 内部消息变化时触发 |

发布

npm install
npm run build
npm login
npm publish --access public

发布前请按需修改 package.json 中的 name、version、description、author、keywords。

如果你准备发布到个人或组织 scope，建议把包名改成类似：

{
  "name": "@your-scope/ai-dialog-plugin"
}