TDesign AI Chat - Vue3.x组件库 | 腾讯开源的AIGC对话交互解决方案

---

TDesign AI Chat简介

TDesign AI Chat 是腾讯TDesign为AIGC场景开发的UI组件系列之一，主要用于构建ChatBot对话交互界面。该组件包含完整对话UI解决方案，支持Vue3.x，并已发布0.2版本，新增思考过程组件、增强交互输入框及多语言适配能力，帮助开发者快速实现AI对话功能。

官方文档

---

组件预览 & 功能概述

TDesign AI Chat 目前适配桌面端（Vue3.x），即将支持React版本。主要组成部分包括：

组件名	功能描述
Chat	整体对话容器，通过data配置快速搭建
ChatAction	提供点赞/点踩/重新生成/复制等交互
ChatContent	轻量Markdown渲染（支持代码高亮、XSS防护）
ChatInput	基础输入框
ChatItem	单条对话单元
ChatLoading	加载动画（0.2版本新增）
ChatReasoning	思考过程模拟（支持折叠与自定义）
ChatSender	多模态扩展输入框（支持模型切换）

---

开发体验 & 核心功能

1. 安装与使用

npm i @tdesign-vue-next/chat

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

const app = createApp(App);
app.use(TDesignChat); // 全量注册

支持按需引入、多语言适配、自定义主题（参考文档）

2. ChatContent：智能对话渲染

• 代码高亮：内置highlight.js
• 轻量化：基于marked.js实现基础Markdown解析
• 安全防护：过滤HTML内容，防止XSS攻击
• 智能区分：用户输入按原样显示；AI回复自动启用Markdown渲染

3. 流式传输（Streaming）优化

AIGC场景常见挑战：大模型响应时间长、数据分批返回。TDesign AI Chat提供现成的流式解析方案：

export const fetchSSE = async (options: FetchSSEOptions = {}) => {
  // 示例代码：处理流式JSON数据（如OpenAI兼容格式）
  const response = await fetch(API_URL);
  const reader = response.body.getReader();
  const decoder = new TextDecoder();
  // ...解析逻辑（完整代码参考官方文档）
};

适用场景：ChatGPT类应用、实时AI交互

---

使用建议

✅ 适用场景

• 现有项目集成AIGC对话功能
• 快速搭建ChatBot类应用（推荐搭配TDesign全家库使用）

设计资源：
0.2版本已发布Figma设计文件，方便产品/设计团队直接调用。

---

开源协议

MIT License - 可免费商用，无限制。
官网地址：https://tdesign.tencent.com/chat

---

同类型推荐：阿里系同类方案 Lobe UI（AntDesign生态）