TDesign AI Chat - Vue3.x 可用！腾讯出品的 AIGC 交互对话组件，免费开源、包含设计资源

各位前端开发者有遇到做 AI Chat 项目的聊天交互界面需求了吗？TDesign 出品的这个组件很不错，推荐给大家。

TDesign AI Chat 简介

TDesign AI Chat 是 TDesign 为 AIGC 场景开发的 UI 系列组件中的一部分，主要用于开发目前非常流行的 ChatBot 对话交互场景。最近 TDesign AI Chat 发布了 0.2 的版本，增加了思考过程、增强版的可扩展输入框和配套加载动画等相关组件，同时配套内置支持了多语言能力，让我们开发者可以快速构建具有 AI ChatBot 对话交互功能的项目。

组件预览
组件预览

TDesign AI Chat 适配的是桌面端，目前提供的是 vue3.x 版本，据官方透露，很快就会支持 React。

Chat 组件介绍

TDesign AI Chat 的组件由多个组成 Chat 组件的子组件。开发过程中，如果 Chat 组件无法满足需求，可以尝试用子组件自由组合来满足更多的使用场景。

组件名描述
Chat整体对话容器组件，通过 data 配置，快速实现 ChatBot 的界面效果
ChatAction对话单元操作组合（点赞/点踩/重新生成/复制）
ChatContent对话内容组件
ChatInput对话输入框
ChatItem对话单元组件
ChatLoading加载动画组件 ，新版本新增。为 Chat 相关加载场景设计的加载效果
ChatReasoning思考过程组件，新版本新增。模拟推理过程，支持折叠交互与自定义内容
ChatSender可扩展的对话输入框，新版本新增。在 ChatInput 的基础上，支持多模态扩展，模型切换的能力展示
Chat 组件一览表

开发上手体验

NPM 安装

npm i @tdesign-vue-next/chat

基础使用

import { createApp } from 'vue';
import App from './app.vue';
import TDesignChat from '@tdesign-vue-next/chat'; // 引入chat组件

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

这种方式会全量注册所有组件，适合在项目大规模使用这个系列组件。当然支持摇树优化的按需引入，还有多语言支持（这个很有必要）、自定义主题等，具体方法参考官方文档。

TDisign AI Chat 官网
TDisign AI Chat 官网

重点说说 ChatContent 对话内容组件

ChatContent 是用于渲染对话内容的组件，内置了轻量化 Markdown 渲染效果， 能够满足一定程度的对话内容需求，体现在下面几点：

  1. 代码高亮：内置 highlight.js，支持代码块的语法高亮；
  2. 轻量：内置 Marked.js 体积轻巧，保留 Markdown 基础渲染能力，更高阶的能力需要额外的插件支持；
  3. 安全：过滤 HTML 内容，防止 XSS 攻击。

除了这些，TDesign AI Chat 还内置了对话内容属性的判断，用户侧的文本不做转义，按用户输入的默认格式显示，不会对代码做高亮；Bot 侧的文本消息，则默认开启 Markdown 的相关渲染逻辑。如果这些都要自己去实现，那真的需要费不少心思。

轻松接入流式传输

流式输出，也称为流式传输，是指服务器持续地将数据推送到客户端，而不是一次性发送完毕。这种模式下，连接一旦建立，服务器就能实时、不间断地发送更新给客户端。

因为受当前大模型推理时间、token 数量限制，这也是目前 AIGC 交互的主要数据传输方式。举例来说，前端收到的流式数据是这样的：

data: {"id":"7eced65bb3cb122d9f927563fc0e5673","created":1695218378,"choices":[{"delta":{"role":"assistant","content":"我是"}}],"usage":{"prompt_tokens":10,"completion_tokens":1,"total_tokens":11}}

data: {"id":"7eced65bb3cb122d9f927563fc0e5673","created":1695218378,"choices":[{"delta":{"role":"assistant","content":"由腾"}}],"usage":{"prompt_tokens":10,"completion_tokens":3,"total_tokens":13}}

data: {"id":"7eced65bb3cb122d9f927563fc0e5673","created":1695218378,"choices":[{"delta":{"role":"assistant","content":"讯公"}}],"usage":{"prompt_tokens":10,"completion_tokens":5,"total_tokens":15}}

data: {"id":"7eced65bb3cb122d9f927563fc0e5673","created":1695218378,"choices":[{"delta":{"role":"assistant","content":"司开"}}],"usage":{"prompt_tokens":10,"completion_tokens":7,"total_tokens":17}}

data: {"id":"7eced65bb3cb122d9f927563fc0e5673","created":1695218378,"choices":[{"delta":{"role":"assistant","content":"发的"}}],"usage":{"prompt_tokens":10,"completion_tokens":8,"total_tokens":18}}

根据 TDesign AI Chat 官方提供的代码片段，可以很容易解析和接入：

export const fetchSSE = async (options: FetchSSEOptions = {}) => {
  const { success, fail, complete } = options;
  // fetch请求流式接口url，需传入接口url和参数
  const responsePromise = fetch().catch((e) => {
    const msg = e.toString() || '流式接口异常';
    complete?.(false, msg);
    return Promise.reject(e); // 确保错误能够被后续的.catch()捕获
  });

  responsePromise
    .then((response) => {
      if (!response?.ok) {
        complete?.(false, response.statusText);
        fail?.();
        throw new Error('Request failed'); // 抛出错误以便链式调用中的下一个.catch()处理
      }
      const reader = response.body.getReader();
      const decoder = new TextDecoder();
      if (!reader) throw new Error('No reader available');

      const bufferArr: string[] = [];
      let dataText = ''; // 记录数据
      const event: SSEEvent = { type: null, data: null };

      async function processText({ done, value }: ReadableStreamReadResult<Uint8Array>): Promise<void> {
        if (done) {
          complete?.(true);
          return Promise.resolve();
        }
        const chunk = decoder.decode(value);
        const buffers = chunk.toString().split(/\r?\n/);
        bufferArr.push(...buffers);
        const i = 0;
        while (i < bufferArr.length) {
          const line = bufferArr[i];
          if (line) {
            dataText += line;
            const response = line.slice(6);
            if (response === '[DONE]') {
              event.type = 'finish';
              dataText = '';
            } else {
              const choices = JSON.parse(response.trim())?.choices?.[0];
              if (choices.finish_reason === 'stop') {
                event.type = 'finish';
                dataText = '';
              } else {
                event.type = 'delta';
                event.data = choices;
              }
            }
          }
          if (event.type && event.data) {
            const jsonData = JSON.parse(JSON.stringify(event));
            console.log('流式数据解析结果:', jsonData);
            // 回调更新数据
            success(jsonData);
            event.type = null;
            event.data = null;
          }
          bufferArr.splice(i, 1);
        }
        return reader.read().then(processText);
      }

      return reader.read().then(processText);
    })
    .catch(() => {
      // 处理整个链式调用过程中发生的任何错误
      fail?.();
    });
};

使用建议

看到这里，相信各位开发者应该也懂了，TDesign AI Chat 适用于用来搭建类似 ChatGPT 这样的对话式交互应用，无论是在已有项目里内嵌 AIGC，还是搭建全新的 AI 对话，TDesign AI Chat 都可以帮助我们节省大量的时间，建议搭配 TDesign 这套 UI 组件库一起使用。

组件文档
组件文档

如果你更习惯用阿里的 AntDesign，Ta 家也出了类似的 AI 对话组件 Lobe UI。

对了，TDesign AI Chat 最新的 0.2 版本也发布了 Figma 的设计资源，方便产品经理和设计师取用。

免费开源说明

TDesign AI Chat 属于 TDesign 开源组件库的一份子，同样是采用 MIT 开源协议，我们可以自由地下载来使用，用在商业项目上也没有问题。