@jump-ai/vue-chat（Vue 2.7 版本）

当前版本：0.6.1

🎉 特性

• Vue 2.7 适配：专为 Vue 2.7 技术栈设计，支持 Composition API
• 流式渲染：支持 AI 对话的流式数据实时渲染
• AGUI 协议：内置 AGUI 协议解析支持，适配大模型对话场景
• Chat 开箱即用：安装本包即可使用 Chat 能力；tdesign-vue 已作为依赖内置，样式已打入本包 CSS
• 按需注册基础组件：Vue.use(TdChat) 会注册 Chat 及其内部依赖的一小部分 TDesign 组件（非全量）

📦 环境要求

• Node.js >= 18
• Vue >= 2.7.16（peer dependency）

🔨 安装

仅使用 Chat 能力时：

pnpm add @jump-ai/vue-chat vue@^2.7.16

tdesign-vue / tdesign-icons-vue 已是本包 dependencies，一般不必为「跑通 Chat」再单独安装。

🚀 基础使用

import Vue from 'vue';
import TdChat from '@jump-ai/vue-chat';
import '@jump-ai/vue-chat/dist/style/index.css';
import App from './app.vue';

Vue.use(TdChat);

new Vue({
  el: '#app',
  render: (h) => h(App),
});

Vue.use(TdChat) 会注册什么？

1. Chat 组件：如 t-chatbot、t-chat-list、t-chat-sender、t-chat-message 等
2. Chat 内部依赖的基础组件（与 utils/installTdesignComponents.ts 保持一致）：
   • Button / Textarea / Tooltip
   • Collapse / CollapsePanel
   • Divider / Popconfirm / Skeleton / Space
   • ConfigProvider

不会全量注册 tdesign-vue（例如 Card、Menu、Dialog、Form、Tag、Progress 等仍需业务自行注册）。

样式文件 @jump-ai/vue-chat/dist/style/index.css 已包含 tdesign-vue 全量样式 与 Chat 样式，一般无需再单独引入 tdesign-vue 的 CSS。

使用 Chat Hook

以下示例使用 Vue 2.7 Composition API（setup 函数写法），并通过 useChat 管理对话状态：

<template>
  <div>
    <t-chat-list>
      <t-chat-message
        v-for="message in messages"
        :key="message.id"
        :role="message.role"
        :content="message.content"
        :placement="message.role === 'user' ? 'right' : 'left'"
      />
    </t-chat-list>
    <t-chat-sender v-model="inputValue" :loading="senderLoading" @send="sendHandler" />
  </div>
</template>

<script>
import { defineComponent, ref, computed } from 'vue';
import { useChat } from '@jump-ai/vue-chat';

export default defineComponent({
  setup() {
    const inputValue = ref('');

    const { chatEngine, messages, status } = useChat({
      chatServiceConfig: {
        endpoint: 'https://your-api-endpoint.com/chat',
        protocol: 'agui',
        stream: true,
      },
    });

    const senderLoading = computed(() => status.value === 'pending' || status.value === 'streaming');

    const sendHandler = async (value) => {
      await chatEngine.value?.sendUserMessage({ prompt: value });
      inputValue.value = '';
    };

    return {
      inputValue,
      messages,
      senderLoading,
      sendHandler,
    };
  },
});
</script>

按需引入

如果只需要部分组件，可单独注册：

import Vue from 'vue';
import { ChatList, ChatSender, ChatMessage, useChat } from '@jump-ai/vue-chat';
import '@jump-ai/vue-chat/dist/style/index.css';

Vue.use(ChatList);
Vue.use(ChatSender);
Vue.use(ChatMessage);

按需 Vue.use(ChatXxx) 时，同样会自动注册上文列出的那批基础组件（只会注册一次）。

消息提示、主题与图标

消息提示、主题配置与图标均可直接从本包导入；样式已包含在 dist/style/index.css 中：

import { MessagePlugin, ConfigProvider, DesktopIcon, LockOnIcon } from '@jump-ai/vue-chat';

MessagePlugin.success('操作成功');

使用 ConfigProvider 定制主题时，可在根组件包裹 <t-config-provider>（全量或按需注册后均可直接使用）。

业务使用更多 TDesign 组件时

若页面还需要 t-card、t-dialog、t-menu 等未在自动注册列表中的组件，或业务代码中出现：

import { Card, Space } from 'tdesign-vue';

请注意：

1. 注册：对未自动注册的组件执行 Vue.use(Card)（或全量 Vue.use(TDesign)）
2. pnpm：请将 tdesign-vue 声明为项目直接依赖（pnpm add [email protected]），不要只依赖传递安装；直接从 tdesign-vue 导入时尤其如此
3. 样式：一般仍只需本包的 dist/style/index.css，不必再引一份 tdesign-vue CSS

🌐 浏览器兼容性

支持现代浏览器，建议：

| 浏览器 | 最低版本 | | ------ | -------- | | Chrome | >= 84 | | Edge | >= 84 | | Firefox| >= 83 | | Safari | >= 14.1 |

🤝 参与贡献

欢迎任何愿意参与贡献的开发者。在提交代码前，请阅读仓库根目录的 CONTRIBUTING.md，并遵循其中的分支与提交规范。

📄 开源协议

本项目遵循 MIT 协议。