DHTMLX

DHTMLX Chatbot 是什麼

DHTMLX Chatbot 是用於建構 AI 聊天介面的 JavaScript 組件，適用於客服助手、企業知識問答以及多代理對話等 Web 應用。它提供可配置的前端互動層，但不包含大語言模型、知識庫、帳號系統或託管後端。

開發者需要將元件連接到自己的伺服器或模型供應商，再決定授權、訊息儲存、搜尋功能強化、內容審核以及用量控制的方式。因此，它更接近於聊天產品的 UI 開發套件，而非即插即用的聊天機器人服務。

核心功能

• 提供 blocks、bubbles、cards 和 flow 四種消息呈現方式，可按產品視覺選擇。
• 支援純文字與 Markdown 訊息，並能設定逐字顯示和流式輸入狀態。
• 可建立單代理或多代理聊天，側欄用於新建、選擇和刪除會話。
• 支援載入既有的聊天與訊息，便於連接業務資料庫以恢復歷史記錄。
• 提供只讀模式，適合展示對話記錄、審計頁面或不可編輯的演示。
• 介面能適應窄螢幕和行動瀏覽器，但它並非獨立的原生手機應用。
• 組件體積約 65KB，適合嵌入現有網頁而不必重建整套聊天佈局。

輸入、輸出與資料結構

代理的回應函數可以直接傳回一條訊息，也可以傳回異步結果。在服務端接入時，開發者通常會將訊息傳送到自己的介面，再由該介面將回應顯示出來。

安裝與初始化

1. 選擇安裝方式，將組件腳本和樣式加入專案。
2. 準備一個 HTML 容器，並建立 ChatBot 實例。
3. 配置當前用戶、代理、消息格式、佈局和側欄。
4. 編寫代理回應函數，將用戶訊息傳送至自己的後端。
5. 在後端安全保存模型金鑰，並完成驗證、限流和錯誤處理。
6. 將模型回應轉換成組件訊息，可用追加訊息方式實現流式顯示。
7. 測試歷史記錄、刪除會話、移動端佈局和異常網路狀態後再上線。

聊天介面配置

消息佈局與格式

render 設定可切換四種訊息模板，format 則可在 text 與 markdown 之間選擇。Markdown 適合用於顯示代碼、清單以及富文本格式的內容，但應用程式仍需對模型輸出的內容進行安全處理，以避免未經過處理的內容出現在頁面上。

多代理與聊天歷史

agents、chats、activeAgent 和 activeChat 用於組織多個助手與會話。客服產品可以按部門設定代理，內部助手則可按知識庫或任務類型區分。

只讀與本地緩存

readonly 可禁止用戶修改介面數據，withCache 可將訊息保存在瀏覽器本地。若訊息屬於機密資料，共用設備或瀏覽器緩存可能會導致資料洩漏的風險，開發者應評估是否應關閉緩存，並改用受控的伺服器端儲存方式。

組件 API 能做什麼

• 新增、刪除或選擇聊天會話。
• 新增消息、向現有消息追加文本以及切換打字狀態。
• 向組件提供消息，或在選擇會話時請求對應消息。
• 讀取和動態更新當前配置。
• 監聽或攔截新增消息、刪除會話和選擇會話等動作。

此處的 API 是前端組件編程接口，而非 DHTMLX 所提供的託管 AI 推理接口。若要調用模型，仍需使用模型供應商的 API 或企業自身的推理服務。

連接 OpenAI 或其他模型

文件中提供了 OpenAI 的接入範例，並說明了如何將組件的歷史訊息轉換為模型所需的對話格式。此產品亦可連接到 Claude、Gemini 或其他支援伺服器調用的模型，而各模型的具體功能則由相關供應商決定。

1. 前端監聽用戶新增消息事件。
2. 將必要的會話上下文傳送至受保護的業務後端。
3. 後端驗證使用者身分和額度，再調用模型服務。
4. 過濾或轉換回應，並將普通結果或分段結果返回前端。
5. 透過新增或追加訊息方法呈現答案，同時處理超時和重試。

示範代碼為了便於閱讀，可能會直接在瀏覽器中呼叫模型，但在實際的生產環境中，不應將 API 金鑰寫入前端。否則，訪客就能夠取得這些金鑰，進而產生未經授權的費用。

價格與許可證

Chatbot 免費並不等於整個 AI 應用都沒有成本，也不代表其他 DHTMLX 組件也都免費。模型調用、伺服器、資料庫、監控以及第三方服務都可能需要另外付費。

MIT許可證通常允許使用、複製、修改、散發以及用於商業目的，但在散發時必須保留許可證及版權聲明。團隊應以下載包中附有的實際許可證內容為依據，以確保符合相關規定。

版本、GitHub 與開源狀態

• Chatbot 1.0 於 2024 年發布，目前可核驗到的維護版本為 1.0.3。
• 組件可透過 npm、CDN 或靜態套件取得，並提供公開文件、API 說明及範例。
• DHTMLX 的 GitHub 組織目前未發現 Chatbot 主組件的公開源碼倉庫，因此無法將該組織中的其他範例專案視為該組件的源碼。
• 組件標註的 MIT 授權與是否託管在 GitHub 是兩回事，授權權利應以實際分發的套件為準。

隱私與安全

DHTMLX Chatbot本身並不提供統一的聊天後端服務，因此，聊天資料的處理方式由應用程式開發者自行決定。啟用本地快取、呼叫第三方模型，或是將資料儲存於業務資料庫中，都會帶來不同的隱私與資料保存上的責任。

• 模型金鑰僅保存在服務端，並為不同環境使用獨立憑證。
• 對用戶輸入和 Markdown 輸出進行驗證、轉義或安全清理。
• 為歷史資訊設定最小化收集、訪問權限、保存期限和刪除機制。
• 向用戶說明使用的模型供應商、數據用途、跨境傳輸和人工查看範圍。
• 日誌中避免記錄完整提示詞、密鑰和敏感個人資訊。
• 對模型調用設置身份驗證、速率限制、費用上限和濫用檢測。

DHTMLX網站的隱私政策涉及下載表單、分析工具、行銷、訂單以及支援相關的資料，並聲明會在 30 天內處理刪除請求。此規定並不適用於使用者自行開發的聊天應用程式，這類應用程式的運營者仍需提供自己的隱私政策說明。

適合用戶與場景

• 前端開發者：快速搭建帶有歷史記錄及多種消息佈局的聊天界面。
• SaaS 團隊：將既有模型服務包裝成品牌化的客服或產品助手。
• 企業研發團隊：將內部知識檢索後端接入統一對話入口。
• 原型設計者：用 CDN 和模擬回應快速驗證聊天互動。
• 教育與技術產品：展示導師、代碼助手或多個任務代理。

優勢與限制

主要優勢

• 免費 MIT 授權，適合個人和商業專案。
• 專注 UI 層，能夠替換不同模型和後端。
• 多種消息佈局、Markdown、歷史記錄和多代理能力較完整。
• 安裝方式靈活，並提供方法、屬性、事件和整合範例。

能力邊界

• 不包含模型、知識庫、向量檢索、內容審核或生產後端。
• 沒有現成的用戶登入、權限、計費和運營後台。
• 本地緩存會把消息留在瀏覽器，敏感場景需重新設計儲存。
• 模型品質、延遲、費用和資料政策取決於接入方。
• 公開的 OpenAI 範例並非可直接照搬的生產安全架構。

常見問題

DHTMLX Chatbot 是完整的 AI 机器人嗎？

不是。它主要提供聊天界面和前端 API，模型推理、知識庫、後端與帳號系統需要開發者接入。

DHTMLX Chatbot 免費嗎？

組件免費，且採用 MIT 授權。外部模型 API、伺服器及其他商業組件的費用則不包括在內。

可以用於商業項目嗎？

MIT 授權允許商業使用，但在再次散發時必須保留授權條款及版權聲明。在正式上線之前，應先檢查實際下載的檔案中是否包含相關的授權文字。

支援哪些大模型？

組件不綁定特定模型，可透過開發者後端連接 OpenAI、Claude、Gemini 或其他系統。是否可用以及價格由相應服務決定。

支持流式回答嗎？

可以透過追加訊息和打字狀態逐步更新界面。真正的流式傳輸協議和斷線恢復需要後端自行實現。

如何安裝？

可使用 npm、CDN 或下載靜態檔案。生產專案宜固定明確版本，避免最新版本更新造成未經測試的變化。

聊天記錄保存在哪裡？

啟用 withCache 時，資料可儲存在瀏覽器本機，否則則由開發者的伺服器來提供。此元件並不會為應用程式統一決定資料的保存期限與刪除規則。

能在手機上使用嗎？

其介面支援反應式窄屏顯示，可嵌入行動網頁中。它並非由 DHTMLX 所提供的獨立 iOS 或 Android 應用程式。

可以把模型密鑰放在前端嗎？

不應這樣做。金鑰應保存在後端，由後端完成身分驗證、限流和模型調用。

有公開 GitHub 倉庫嗎？

目前還無法確認 Chatbot 的主要組件是否有公開的原始碼儲存庫。MIT 授權、可下載發布，以及由 GitHub 托管，這些並不是同一個概念。

總結

DHTMLX Chatbot 適合那些已擁有模型或後端能力，但希望快速完善聊天介面的開發團隊。它的優點在於具有可配置的介面以及前端 API，而其實際使用效果則取決於團隊所建置的安全後端、資料管理方式以及模型整合能力。