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

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 组件无法满足需求，可以尝试用子组件自由组合来满足更多的使用场景。

NPM 安装

基础使用

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

重点说说 ChatContent 对话内容组件

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

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

轻松接入流式传输

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

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

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

看到这里，相信各位开发者应该也懂了，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 开源协议，我们可以自由地下载来使用，用在商业项目上也没有问题。

原文链接：https://www.thosefree.com/tdesign-ai-chat