epam/ai-dial-chat
A default UI for AI DIAL
什麼是 AI DIAL Chat？
AI DIAL Chat 是一個以 Nx 單體儲存庫（monorepo）建構的 全棧聊天應用程式。它整合了現代化的 React 前端與 NestJS 後端，並連接到 EPAM 的 AI DIAL Core（公司的大語言模型服務）。此儲存庫是一個真實且可投入生產的程式碼基礎，而非僅僅是一連串連結或教學範例。
核心組件
| 組件 | 技術 | 功能 |
|---|---|---|
| 前端（apps/chat） | React 19, TypeScript 6, Vite, Tailwind CSS, i18next | 用戶介面 – 聊天視窗、訊息編輯器、側邊欄、主題支援、國際化。 |
| 後端（apps/chat‑api） | NestJS 11, TypeScript 6, Express 5, Swagger/OpenAPI | REST API，負責使用者驗證、將請求轉發至 DIAL Core、提供靜態資源，並支援 Swagger 文件。 |
| 覆蓋層沙盒（apps/chat‑overlay‑sandbox） | Vite + 簡易主頁 | 測試工具，可讓您將聊天嵌入 iframe（@epam/ai-dial-chat-overlay）並測試 postMessage 協定。 |
| 共用函式庫（libs/…） | 私有工作區套件（Nx） | UI 原語、領域模型、OpenAPI 用戶端、目錄 UI、訊息清單、附件處理、側邊欄、主題設定等。所有元件皆拆分為可重用的函式庫，而非單一巨石式結構。 |
| OpenAPI / Postman 工具 | npm run openapi, npm run postman |
從 NestJS 控制器產生類型化 API 用戶端（libs/chat-api-client）與 Postman 清單。 |
各組件如何協同運作
- 使用者開啟 React 應用程式（
http://localhost:4207）。該應用程式僅與 聊天 API（http://localhost:5000/api）通訊。 - 聊天 API 驗證請求（支援 OIDC 提供者，如 Keycloak、Auth0、Google 等），並將與聊天相關的請求轉發至 EPAM AI DIAL Core – 即實際產生回應的大語言模型服務。
- 回應透過 API 流回 React UI，並使用函式庫元件（訊息氣泡、引用、附件預覽等）進行渲染。
- 在嵌入情境中，主頁可載入 覆蓋層 套件作為 iframe。覆蓋層透過明確定義的
postMessage握手協定（INIT_READY → READY → READY_TO_INTERACT）與主頁通訊。
快速入門（快速概要）
# 1. 克隆並安裝相依套件
git clone <repo‑url>
cd ai-dial-chat
npm install
# 2. 複製環境變數範本並填入至少一個 OIDC 提供者
cp apps/chat-api/.env.template .env.local
# 編輯 .env.local → 設定 AUTH_KEYCLOAK_CLIENT_ID, AUTH_KEYCLOAK_SECRET 等
# 3. 同時啟動前後端
npm run start:all # 或在不同終端機中分別執行 npm run start 與 npm run start:api
- 前端可透過 http://localhost:4207 存取。
- API（含 Swagger UI）位於 http://localhost:5000/api/docs。
哪些人會使用它？
- 產品團隊：需要一個已準備好的聊天介面，並與 EPAM 的 DIAL 大語言模型服務整合。
- 開發者：尋找全棧 AI 聊天應用的參考實作 – 單體儲存庫架構、Nx 工具與產生的 OpenAPI 用戶端皆為可重用的模式。
- 企業：希望透過覆蓋層套件將聊天嵌入自有入口網站。
值得注意的功能
- 模組化函式庫架構 – UI 元件（編輯器、訊息清單、目錄、側邊欄等）皆為獨立套件，方便重新設計或替換。
- 國際化 – 支援 i18next、RTL 排版，以及提供 CSS 自訂屬性的主題主機。
- 多種身分驗證提供者 – 內建支援 Auth0、Azure AD、Keycloak、Google、Okta、Cognito 等。
- Swagger/OpenAPI – 自動產生文件與類型化用戶端（
libs/chat-api-client）。 - 覆蓋層整合 – 專用函式庫（
@epam/ai-dial-chat-overlay）與沙盒環境，支援快速測試。 - Nx 單體儲存庫工具 – 提供服務、建構、測試、檢查與專案相依關係可視化的指令。
更多資訊來源
- 架構圖 – 在 README 的 Architecture 章節中。
- 遷移指南 – 從舊版
development-legacy分支遷移的說明。 - 函式庫 README – 每個
libs/*資料夾皆有獨立文件。 - Docs 資料夾 – 詳細指南，包含主題自訂、覆蓋層遷移與 API 規格說明。
TL;DR
AI DIAL Chat 是一個真實、可投入生產的聊天平台，使用 React 與 NestJS 建構，緊密整合 EPAM 的 AI DIAL Core。它以模組化 Nx 單體儲存庫組織，包含完整的驗證支援、OpenAPI 工具與可嵌入的 iframe 覆蓋層元件，是任何人開發 AI 驅動對話介面的穩固起點。
相關
- 專案
- 專案
- 專案
- 專案
- 專案