什麼是DHTMLX ChatBot？
DHTMLX 推出的 AI 聊天機器人 UI 套件，專為客服支援人員打造，讓你可以快速建立與任何大型語言模型（如 ChatGPT、Claude 3、Gemini）串接的聊天介面。這支輕量級的 JavaScript 元件僅 65KB，採用 MIT 授權，完全免費使用。它支援多種對話顯示模式、Markdown 排版、聊天歷史記錄，甚至內建多代理 UI，方便團隊同時管理不同 LLM 對話。不論是企業客服系統還是個人專案，都能零成本整合，快速上線。
DHTMLX ChatBot的特色是什麼？
- 四種對話顯示模式：可選擇「區塊」、「氣泡」、「卡片」或「流程」模式，因應不同使用情境調整訊息樣貌。
- 打字機效果：讓 AI 回覆以逐字顯示的方式呈現，營造更自然的對話節奏。
- Markdown 支援：直接在訊息內使用 Markdown 語法，輕鬆呈現程式碼、列表、標題等豐富格式。
- 聊天歷史與代理管理：側邊欄可列出與不同 AI 代理的對話記錄，方便切換、追蹤多線對話。
- 輕量高效：壓縮後僅 65KB，不拖累網頁載入速度，且支援手機與桌上型裝置。
- 只讀模式：可設定為唯讀介面，適合展示過往對話或作為培訓教材。
- 完整的後端整合範例：DHTMLX 提供現成的後端串接範例（如 Node.js），讓你只要複製貼上就能連上 LLM API。
DHTMLX ChatBot的使用案例有哪些？
- 客服後台系統：協助客服人員同時與多個 AI 模型（如 ChatGPT + Claude）對話，快速比對不同回覆再手動回覆客戶。
- 企業內部知識庫機器人：將公司 SOP、技術文件餵給 LLM，並用此 Widget 打造內部查詢介面，讓員工用自然語言問問題。
- 銷售培訓模擬：利用唯讀模式展示 AI 與客戶的理想對話範例，作為新人訓練教材。
- 多語言客服支援：替不同語言分別設定不同 AI 代理，並在單一介面中統一管理對話記錄。
如何使用DHTMLX ChatBot？
- 步驟 1：從 DHTMLX 官網下載 Chatbot 套件（MIT 授權，免費），可透過 Email 取得下載連結。
- 步驟 2：在專案中引入 JavaScript 與 CSS 檔案，依照官方文件初始化元件，設定 API Key 與 LLM 端點。
- 步驟 3：選擇「區塊 / 氣泡 / 卡片 / 流程」其中一種顯示模式，並啟用打字機效果與 Markdown 支援。
- 步驟 4：若需多代理功能，在側邊欄中設定不同 AI 代理的名稱與對應的 LLM 模型。
- 步驟 5：利用提供的 Node.js 後端範例，快速串接 ChatGPT、Claude 或 Gemini API，完成對話流程。
