一个类 ChatGPT 的 AI 对话应用,支持 Markdown 渲染和自定义引用语法。
- 对话界面:类 ChatGPT 的聊天界面,支持会话管理
- Markdown 渲染:支持完整的 Markdown 语法,包括代码高亮、表格等
- 引用标注:支持
[^1]和[[文档名]]格式的引用,鼠标悬浮显示原文 - 流式响应:打字机效果,实时显示 AI 回复
- Mock 模式:内置测试数据,方便 UI 开发和调试
- 状态持久化:对话历史自动保存到本地存储
- 知识库管理(一期增强):支持知识库卡片页、文档表格管理、上传/重命名/删除/下载、启用禁用、标签、预览、筛选排序分页与批量操作
- Next.js 16 (App Router)
- React 19
- shadcn/ui
- Jotai (状态管理)
- react-markdown
- FastAPI
- asyncpg
- Pydantic v2
- SSE (Server-Sent Events)
hry-chat/
├── frontend/ # Next.js 前端
│ ├── app/ # 页面
│ ├── components/
│ │ ├── chat/ # 聊天组件
│ │ ├── cards/ # 自定义卡片(扩展)
│ │ └── ui/ # shadcn 组件
│ ├── lib/
│ │ ├── markdown/ # Markdown 渲染
│ │ ├── atoms.ts # Jotai 状态
│ │ └── api.ts # API 调用
│ └── types/ # TypeScript 类型
│
├── backend/ # FastAPI 后端
│ ├── app/
│ │ ├── main.py # 应用入口
│ │ ├── routers/ # API 路由
│ │ ├── models/ # 数据模型
│ │ ├── services/ # 业务逻辑
│ │ └── core/ # 核心配置
│ └── pyproject.toml # Python 依赖
│
└── README.md
- Node.js 18+
- Python 3.12+
- uv (Python 包管理器)
# 进入后端目录
cd backend
# 安装依赖(uv 会自动创建虚拟环境)
uv sync
# 启动服务(默认 Mock 模式)
uv run uvicorn app.main:app --reload --port 8000后端服务启动后:
- API 文档: http://localhost:8000/docs
- 健康检查: http://localhost:8000/health
# 进入前端目录
cd frontend
# 安装依赖
npm install
# 启动开发服务器
npm run dev前端服务启动后访问: http://localhost:3000
# 应用配置
APP_NAME=HRY Chat
DEBUG=false
# LLM 配置
LLM_PROVIDER=openai # openai / azure / anthropic / mock
LLM_API_KEY=sk-your-api-key
LLM_BASE_URL=https://api.openai.com/v1
LLM_MODEL=gpt-4o-mini
# Mock 模式(设为 true 使用固定回复,用于 UI 测试)
MOCK_MODE=true
# CORS 配置
CORS_ORIGINS=["http://localhost:3000"]# 后端 API 地址
NEXT_PUBLIC_API_URL=http://localhost:8000
# 是否显示模型配置
NEXT_PUBLIC_SHOW_MODEL_CONFIG=true流式聊天接口,返回 SSE 事件流。
请求体:
{
"messages": [
{"id": "1", "role": "user", "content": "你好", "created_at": "2024-01-01T00:00:00Z"}
],
"conversation_id": "optional-id",
"temperature": 0.7
}响应(SSE):
event: message
data: {"content": "你", "done": false}
event: message
data: {"content": "你好", "done": false}
event: message
data: {"content": "", "done": true, "message_id": "xxx", "citations": [...]}
获取应用配置(安全信息,不包含 API Key)。
响应:
{
"provider": "openai",
"model": "gpt-4o-mini",
"mock_mode": true,
"app_name": "HRY Chat"
}GET /api/conversations- 获取会话列表POST /api/conversations- 创建会话GET /api/conversations/{id}- 获取会话详情PUT /api/conversations/{id}- 更新会话DELETE /api/conversations/{id}- 删除会话
GET /api/knowledge-bases- 获取知识库列表POST /api/knowledge-bases- 创建知识库GET /api/knowledge-bases/{kb_id}/documents- 获取文档分页列表(支持 keyword/sort/filter/page)POST /api/knowledge-bases/{kb_id}/documents/upload- 上传文档到知识库(支持冲突策略)PATCH /api/knowledge-bases/{kb_id}/documents/{doc_id}- 重命名/启用禁用PATCH /api/knowledge-bases/{kb_id}/documents/{doc_id}/tags- 更新标签DELETE /api/knowledge-bases/{kb_id}/documents/{doc_id}- 删除文档(硬删除)POST /api/knowledge-bases/{kb_id}/documents/batch- 批量删除/启用/禁用GET /api/knowledge-bases/{kb_id}/documents/{doc_id}/download- 下载文档GET /api/knowledge-bases/{kb_id}/documents/{doc_id}/preview- 预览 txt/md 文档
一期约束:
- 文件类型白名单:
.pdf/.md/.txt/.docx - 单文件大小限制:20MB
- 文档状态字段保留
status,并新增is_enabled(用于后续检索开关)
支持两种引用格式:
- 脚注格式:
[^1],[^2]等 - 双括号格式:
[[文档名称]],[[参考资料]]等
示例:
根据官方文档[^1],这个功能非常强大。
另外,[[技术报告]]中也提到了相关内容。渲染后,引用会显示为带下划线的可交互元素,鼠标悬浮时显示原文气泡。
解析说明:
- 使用 remark AST 插件在解析阶段识别引用语法,再交给渲染组件处理。
- 引用解析只作用于普通文本节点,避免影响代码块/行内代码。
- 引用可以出现在加粗、斜体、链接等内联标记中,都会被正确识别。
默认开启 Mock 模式(MOCK_MODE=true),后端会返回固定的测试内容,包含各种 Markdown 格式,方便测试 UI 渲染效果。
- 设置
MOCK_MODE=false - 配置
LLM_API_KEY为你的 API 密钥 - 根据需要配置
LLM_PROVIDER和LLM_MODEL
- Tooltip 外层不要设置
overflow-hidden,否则箭头会被裁切并出现延迟显示。若需要裁切内容,请把overflow-hidden放在内部容器上。
- 知识库管理页面(一期完成)
- 用户认证系统
- LangChain/LangGraph 智能体集成
- 多模型切换
- 自定义组件卡片系统
- 数据库持久化
MIT License