各位前端開發者有遇到做 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