AI DIAL聊天UI

Prerequisites

• Node.js: 24 or higher (production images build on node:24.17-alpine)
• npm: 11 or higher (bundled with Node 24)
• Git: Latest version

Visualize project dependencies

nx graph ```

1. Clone and Install

git clone <repository-url>
cd ai-dial-chat
npm install

Build a specific app

nx build <app-name>

Deployment

Building for Production

```bash

Build all projects

npm run build:all

Or build individually

npm run build # Frontend npm run build:api # Backend ```

Build Outputs

• Frontend: apps/chat/dist/
• Backend: apps/chat-api/dist/
• Overlay sandbox: apps/chat-overlay-sandbox/dist/

Production Deployment

The NestJS API serves both the API endpoints and the built React application:

1. Build both applications 2. Deploy the API server with the built frontend alongside it 3. The API serves static files from apps/chat/dist/ 4. All routes except /api/* (and /overlay-sandbox/* when the sandbox is enabled) fall through to the React app's index.html

Dockerfile at the repository root builds this arrangement into a single image.

Installation Issues

Clear dependencies and reinstall:

rm -rf node_modules package-lock.json
npm install

Quick Start

DIAL_CORE_URL=https://your-dial-core-url.example.com

THEMES_CONFIG_URL=https://your-themes-config-url.example.com

```

apps/chat-api/.env.template is the authoritative list — it documents every supported variable, including the per-provider auth fields, announcement banner and footer content, file-transfer and skill upload limits, voice/ASR, the utility model, catalog filtering, CSP/overlay origins, and feature toggles. apps/chat-api/README.md explains each group.

Migration guides

• Legacy Chat Migration Guide - Moving a deployment from the legacy DIAL Chat to 1.0
• Chat Overlay Migration Guide - Migrating an embedded overlay from the legacy chat
• Chat API environment variables - The full variable reference, with apps/chat-api/.env.template as the annotated source

2. Configure Environment

Set up the API environment variables:

cp apps/chat-api/.env.template .env.local

Edit .env.local with your configuration. At least one identity provider must be configured — a provider is registered only when its CLIENT_ID variable is set. The template ships nine providers (Auth0, Azure AD, Azure B2C, GitLab, Google, Keycloak, PingID, Cognito, Okta); Keycloak is shown here:

```bash PORT=5000 API_PREFIX=api CORS_ORIGIN=http://localhost:4207 AUTH_SESSION_SECRET=<64-character-hex-secret> AUTH_CALLBACK_BASE_URL=http://localhost:5000 AUTH_POST_LOGOUT_REDIRECT_URI=http://localhost:4207 AUTH_KEYCLOAK_CLIENT_ID=your-client-id AUTH_KEYCLOAK_SECRET=<client-secret> AUTH_KEYCLOAK_HOST=keycloak.example.com/realms/dial

Environment Variables in Production

Ensure these environment variables are set in production:

PORT=5000
API_PREFIX=api
CORS_ORIGIN=https://your-frontend-domain.com
AUTH_SESSION_SECRET=<64-character-hex-secret>
AUTH_CALLBACK_BASE_URL=https://your-api-domain.com
AUTH_POST_LOGOUT_REDIRECT_URI=https://your-frontend-domain.com
AUTH_KEYCLOAK_CLIENT_ID=your-client-id
AUTH_KEYCLOAK_SECRET=<client-secret>
AUTH_KEYCLOAK_HOST=keycloak.example.com/realms/dial
DIAL_CORE_URL=https://your-dial-core-url
DIAL_API_VERSION=2024-10-21
DIAL_API_KEY=your-production-api-key
THEMES_CONFIG_URL=https://your-themes-url
CHAT_VERSION=<ci-build-identifier>

Every variable is validated at boot by apps/chat-api/src/config/environment.config.ts, so a missing or malformed value fails the container fast rather than at first request.

DIAL_API_VERSION=2024-10-21

DIAL_API_KEY=your-dial-api-key

OpenAPI & Postman

The generated API client in libs/chat-api-client is part of the endpoint contract — run these after any change to a chat-api controller or DTO.

Chat API (NestJS Backend)

RESTful API server with OpenAPI documentation.

Key Features:

• NestJS framework
• Swagger/OpenAPI documentation
• CORS configuration
• Bearer authentication support
• Static file serving for React app
• Environment-based configuration
• DIAL Core integration

Documentation: apps/chat-api/README.md

Port: 5000

Development Workflow

1. Create a feature branch
2. Make your changes
3. Run linting and tests (npm run lint:check, npm run test)
4. Regenerate the API client if you touched an endpoint contract (npm run openapi)
5. Update the affected docs — including docs/architecture.md when the structure changes — in the same commit
6. Commit and push
7. Create a pull request

Troubleshooting