# chatUI

**Repository Path**: test-error/chat-ui

## Basic Information

- **Project Name**: chatUI
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-03
- **Last Updated**: 2026-07-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Dify ChatUI 多应用集成平台

基于 [ChatUI](https://chatui.io) + React + Node.js 构建的 Dify 多应用统一对话界面。

## 功能特性

- 多应用卡片主页，支持搜索和类型筛选
- 流式输出（打字机效果）
- Markdown 渲染（代码高亮、表格、列表等）
- 文件上传（图片、PDF、Word 等）
- 语音输入（Web Speech API）
- 消息点赞/点踩反馈
- 对话历史记录（本地存储）
- 对话导出（复制/下载 .txt）
- 响应式布局（PC + H5）

## 快速启动

### 1. 配置 API Keys

编辑 `backend/.env`，填入各应用的 Dify API Key：

```env
DIFY_BASE_URL=http://113.57.194.146/v1

APP_KEY_knowledge_bot_1=app-your-key-here
APP_KEY_campus_knowledge=app-your-key-here
APP_KEY_chengcheng=app-your-key-here
APP_KEY_quotation=app-your-key-here
APP_KEY_test=app-your-key-here
APP_KEY_scheduling_simple=app-your-key-here
APP_KEY_contract_review=app-your-key-here
APP_KEY_scheduling_auto=app-your-key-here
```

> 在 Dify 控制台 → 应用 → 访问 API → API 密钥 中获取

### 2. 启动后端（端口 3001）

```bash
cd backend
npm install
npm run dev
```

### 3. 启动前端（端口 5173）

```bash
cd frontend
npm install
npm run dev
```

### 4. 访问

- PC/H5 浏览器访问：http://localhost:5173

## 添加新应用

1. 在 `backend/.env` 添加：`APP_KEY_your_app_id=app-xxx`
2. 在 `frontend/src/config/apps.ts` 的 `DIFY_APPS` 数组中添加应用配置

## 项目结构

```
├── backend/          # Node.js + Express 代理后端
│   ├── src/index.ts  # 代理服务器（转发 Dify API，隐藏 API Key）
│   └── .env          # API Keys 配置（勿提交到 Git）
└── frontend/         # React + Vite + ChatUI 前端
    └── src/
        ├── config/apps.ts         # 应用配置
        ├── pages/HomePage.tsx     # 应用列表主页
        ├── pages/ChatPage.tsx     # 聊天页面
        ├── components/            # UI 组件
        └── hooks/                 # 业务逻辑 hooks
```

## 技术栈

| 层级 | 技术 |
|------|------|
| 前端框架 | React 19 + TypeScript + Vite |
| 对话 UI | @chatui/core 3.x（阿里 ChatUI）|
| 样式 | Tailwind CSS v4 |
| 路由 | React Router v7 |
| Markdown | react-markdown + rehype-highlight |
| 后端 | Node.js + Express + TypeScript |
| 流式 | SSE（Server-Sent Events）|