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交互