microsoft/BotFramework-WebChat
A highly-customizable web-based client for Azure Bot Services.
Bot Framework Web Chat 是什麼？
Bot Framework Web Chat 是一個 即時可用、高度可自訂的 Web UI，可讓您將 Microsoft Bot Framework 機器人嵌入任何網站。它建構於 Bot Framework 的 Direct Line（以及 Direct Line Speech）通道之上，處理 UI、活動渲染、檔案上傳、語音、自適應卡片及其他對話功能，讓您專注於機器人的邏輯。
誰會使用它？
- 希望為網站加入聊天視窗但不想從零開始建構 UI 的 Web 開發者。
- 在 Azure Bot Service 上建立機器人且需要安全、可嵌入前端的 機器人創作者。
- 希望對聊天介面進行主題化（包含 Fluent UI 主題）或以 React 組件取代 UI 部分的 產品團隊。
核心功能（如 README 所述）
| 功能 | 意義 |
|---|---|
| Direct Line 集成 | 透過從機器人密鑰產生的權杖，將 UI 與機器人連接。 |
| Direct Line Speech | 使用 Azure Speech Services 內建語音轉文字／文字轉語音。 |
| 即時串流回應 | 機器人可邊產生回應邊串流傳輸部分內容。 |
| 自適應卡片 v1.6 | 渲染豐富的卡片 UI；可透過 adaptiveCardsParserMaxVersion 限制版本。 |
| 主題套件 | 將一整套樣式自訂發佈為 NPM 套件；實驗性 Fluent UI 主題套件模擬 Copilot 風格外觀。 |
| Markdown 中的 HTML | Markdown 可包含安全的 HTML；可透過 styleOptions.markdownRenderHTML 關閉。 |
| 可存取性 | 提供視覺焦點指示器、ARIA 支援以及專用的可存取性指南。 |
| 自訂 | 透過 CDN 套件（簡單 CSS/JS）或 React 套件（完整元件重構、自訂渲染器、Redux DevTools）實現。 |
| 瀏覽器支援 | 現代瀏覽器（Chrome、Edge、Firefox 的最新兩個版本）。v4.16 後不再支援 IE 11。 |
| 安全性 | 推薦使用內容安全政策（Content-Security-Policy）；建議使用權杖認證而非公開機器人密鑰。 |
如何快速上手（來自 README 的簡要步驟）
- 在 Azure Bot Service 中 建立機器人。
- 從 Azure 入口網站取得 Web Chat 密鑰，並換取 Direct Line 權杖。
- 加入腳本（或安裝 NPM 套件）至您的頁面。
- 呼叫
WebChat.renderWebChat({ directLine: WebChat.createDirectLine({ token }) }, element)（或使用 React 的<ReactWebChat>組件）。 - 可選地，透過 React API 自訂顏色、大小、CSS，或取代元件。
如何取得更多資訊
- CHANGELOG.md – 詳細的版本變更記錄。
- docs/ – API 參考、遷移指南、可存取性、本地化、遙測與語音文件。
- samples/ – CDN 套件、React 主機、ES5 套件與自訂主題套件的現成範例。
- NPM – 套件
botframework-webchat（完整功能套件）與botframework-webchat-fluent-theme（用於 Fluent UI 主題）。
TL;DR
Bot Framework Web Chat 是由 Microsoft 維護的、適用於 Azure Bot Framework 機器人的生產級 Web 客戶端。它提供開箱即用的 UI、語音、自適應卡片、主題化，以及深度的 React 級別自訂能力，同時鼓勵使用安全的權杖認證與現代瀏覽器。
相關
- 專案
- 專案
- 專案
- 專案