epam/ai-dial-chat
A default UI for AI DIAL
什么是 AI DIAL Chat？
AI DIAL Chat 是一个 全栈聊天应用，以 Nx 单体仓库的形式构建。它将现代 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 对请求进行认证（支持 Keycloak、Auth0、Google 等 OIDC 提供商），并将与聊天相关的调用转发至 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 大语言模型服务的现成聊天 UI。
- 开发者：希望获得一个全栈 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 单体仓库工具链——支持服务、构建、测试、 lint 和项目依赖可视化等命令。
更多信息的查阅位置
- 架构图——在 README 的 Architecture 部分。
- 迁移指南——用于从旧版
development-legacy分支迁移。 - 库的 README——每个
libs/*文件夹都有独立文档。 - Docs 文件夹——包含主题定制、覆盖层迁移和 API 规范的详细指南。
TL;DR
AI DIAL Chat 是一个真实的、生产级别的聊天平台，基于 React 和 NestJS 构建，与 EPAM 的 AI DIAL Core 紧密集成。它采用模块化的 Nx 单体仓库结构，包含完整的认证支持、OpenAPI 工具链以及可嵌入的 iframe 覆盖层组件，是构建 AI 驱动对话界面的坚实起点。
相关
- 项目
- 项目
- 项目
- 项目
- 项目