@jump-mp/td-chat（Vue 2.7 版本）

🎉 特性

• Vue 2.7 适配：专为 Vue 2.7 技术栈设计，支持 Composition API
• 流式渲染：支持 AI 对话的流式数据实时渲染
• AGUI 协议：内置 AGUI 协议解析支持，适配大模型对话场景
• 与 TDesign 保持一致：API、UI 与 TDesign 其他框架版本保持一致

📦 环境要求

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

🔨 安装

npm install @jump-mp/td-chat

# 若遇 peer vue 版本冲突（如 tdesign-vue 要求 ~2.6），可使用：
npm install --legacy-peer-deps

# 或
pnpm install

🚀 基础使用

import { createApp } from 'vue';
import TdChat from '@jump-mp/td-chat';
import '@jump-mp/td-chat/es/style/index.css';
import App from './app.vue';

const app = createApp(App);
app.use(TdChat);

使用 Chat Hook

<template>
  <div>
    <t-chat-list ref="listRef">
      <t-chat-message
        v-for="(message, idx) in messages"
        :key="message.id"
        :role="message.role"
        :content="message.content"
      />
    </t-chat-list>
    <t-chat-sender
      v-model="inputValue"
      :loading="senderLoading"
      @send="sendHandler"
    />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useChat } from '@jump-mp/td-chat';

const { chatEngine, messages, status } = useChat({
  chatServiceConfig: {
    endpoint: 'https://your-api-endpoint.com/chat',
    protocol: 'agui',  // 开启 AGUI 协议解析支持
    stream: true,      // 启用流式响应
  },
});

const senderLoading = computed(() => {
  return status.value === 'pending' || status.value === 'streaming';
});
</script>