用React+@chatui/core构建AI聊天前端：aliendao aiitchat webui源码完整解析
【免费下载链接】aliendao huggingface mirror download 
项目地址: https://gitcode.com/gh_mirrors/al/aliendao
aliendao 的 aiitchat 模块是一个基于 React 18 + @chatui/core 构建的 AI 聊天前端（webui），对接 ChatGLM-6b 与通义千问 Qwen-7b 大模型，提供类微信风格的移动端聊天界面、模型一键切换、历史记录与输入自动补全功能。本文将带你快速跑通前端，并完整解析其 webui 源码的核心实现思路，帮助新手理解如何从零搭出一个 AI 对话界面。
一、项目结构：前端在哪个目录？
aiitchat 采用"前后端分离"的经典结构，前端源码位于 aiitchat/chat/ 目录，核心文件如下：
| 文件路径 | 作用 |
|---|---|
aiitchat/chat/package.json | 依赖与脚本定义（React、@chatui/core 等） |
aiitchat/chat/src/index.js | 应用入口，挂载 React 根组件 |
aiitchat/chat/src/App.js | 聊天主界面，含消息流、快速回复、弹窗逻辑 |
aiitchat/chat/src/MComposer.js | 自定义输入框组件 |
aiitchat/chat/src/AutoCompletion.js | 输入提示下拉列表组件 |
aiitchat/chat/src/chatui-theme.css | ChatUI 主题定制样式 |
后端则是同目录下的 aiitchat/aiitchat.py（aiohttp 服务），以及 aiitchat/ChatGLM_6b.py、aiitchat/Qwen_7b.py 两个模型调用模块。
💡 前端只需关心 chat/ 目录，3 个 JS 文件就撑起了整个聊天界面，非常适合新手学习。
二、技术栈：为什么选 @chatui/core？
打开 package.json 可以看到关键依赖：
{
"dependencies": {
"@chatui/core": "^2.4.2",
"react": "^18.2.0",
"marked": "^4.3.0",
"react-qr-code": "^2.0.11"
}
}
- @chatui/core：京东开源的聊天 UI 组件库，一个
<Chat>组件即提供导航栏、消息列表、气泡、快速回复、输入区等完整聊天骨架，省去大量布局代码。 - marked：把模型返回的 Markdown 文本渲染成 HTML。
- react-qr-code：用于展示"关于"弹窗中的二维码。
三、快速运行 webui：两条命令搞定
获取源码后（git clone https://gitcode.com/gh_mirrors/al/aliendao），按 aiitchat 模块 README 中的说明启动前台：
cd aiitchat/chat
npm start # 开发模式运行
npm run build # 生产环境打包
运行后浏览器会自动打开本地页面，即可体验类微信的 AI 聊天界面。
四、核心源码解析：App.js 的 4 个关键设计
App.js 是整个 webui 的核心，约 400 行代码，拆解后只有 4 个值得学习的设计点。
4.1 用 useMessages 管理消息流
入口文件 index.js 通过 ReactDOM.createRoot 把 <App/> 挂载到页面，App 内部使用 ChatUI 提供的 useMessages(initialMessages) 钩子，一行代码就拿到 messages、appendMsg、setTyping 三个能力：
- 用户发言：
appendMsg({ position: 'right', ... })追加到右侧气泡； - 模型回答：追加到左侧气泡，并先用
setTyping(true)显示"正在输入"状态。
4.2 快速回复实现"一键切换大模型"
导航栏下方配置了 4 个 quickReplies（ChatGLM2、通义千问、历史、token 设置）。点击 handleQuickReplyClick 时会做两件事：
- 修改模块级变量
modelname（"ChatGLM-6b"或"Qwen-7b"），后续请求会带上该字段； - 调用
changeTitleStyle把标题颜色切成黑/绿，用视觉方式提示当前模型，避免用户混淆。
这是一种低成本的"多模型切换"实现：前端只负责传 modelname，真正的模型路由在后端 aiitchat/aiitchat.py 的 stream_v2 里完成。
4.3 轮询式流式输出：onGenCode 递归请求
AI 回答是逐段"吐"出来的。前端没有用 WebSocket，而是采用递归 XMLHttpRequest 轮询的方式：
onGenCode(prompt, count)向/api/stream/v2?token=xxx发起 POST，请求体包含{ context: { prompt, history }, modelname }；- 返回
{ response, history, stop }后，updateMsg直接把最后一条.Bubble.text的innerHTML替换为marked渲染后的 Markdown，并自动滚动到底部； - 若
stop === false则count++后再次调用自身，直到模型结束； - 前端把
history裁剪到最多 5 条（if (history.length > 5) history.shift()），控制上下文长度； - 顶部
Progress进度条用count * 10模拟生成进度，超过 240 次仍未结束则强制停止，防止死循环。
🎯 这套"轮询 + 局部 DOM 更新"的方案虽简单，但避免了引入 SSE/WebSocket 的复杂度，是学习流式输出时很好的入门参考。
4.4 两个 Modal：历史记录与 token 设置
界面复用 ChatUI 的 <Modal> 组件弹出两块功能：
- 历史：展示最近提问，点击某条即通过
composerRef.current.setText(val)回填到输入框；"清除"按钮直接置空history数组。 - token 设置：输入后写入
localStorage（键名aiit-chat-token），每次请求自动携带，实现简单的访问凭证机制。
另外还有一个隐藏的 QRCode 弹窗，点击导航栏左侧图标弹出项目二维码与版本号。
五、亮点组件：输入框自动补全
MComposer.js 是对 ChatUI 默认 Composer 的替换（通过 Composer={MComposer} 注入），它实现了输入框的"智能提示"：
- 监听
onChange，当输入内容以.或。结尾时，把前文发给提示接口codegen_prompt/v1，请求 5 条候选； - 拿到候选后渲染 AutoCompletion.js 下拉列表，悬浮在输入框上方（位置通过读取
.Composer节点高度动态计算）； - 键盘事件接管：上下键移动选中项、回车选中回填，其余按键交还给输入框，回车发送（Shift+回车换行）。
选中建议后只回填、不自动发送，留给用户修改的机会——这是很好的交互细节。
六、主题定制：让 ChatUI 变成"自己的样子"
chatui-theme.css 只用了不到 60 行 CSS 就完成个性化：
.ChatApp, .Bubble { max-width: 100vw; }：移动端全屏铺满，不留两侧白边；.Message.right .Bubble { background: #95ec69; }：把右侧用户气泡改成微信绿，一眼就有"聊天软件"的感觉；.Composer-input调整输入框高度与边框，并用@media (max-width: 767px)区分桌面/手机两套规格；.ScrollView--x修正快速回复横滚区域的溢出问题。
💡 学习技巧：ChatUI 组件的类名（如 Bubble.text、Navbar-title、PullToRefresh）是稳定可复用的，App.js 里多处直接用 getElementsByClass 拿到这些节点做 DOM 级更新，省去了层层透传状态。
七、前后端如何协作？
整体数据流非常清晰：
- 前端
MComposer发送文本 →App.js的handleSend追加用户气泡并触发onGenCode； onGenCodePOST 到后端/api/stream/v2（定义于aiitchat/aiitchat.py）；- 后端做敏感词过滤与 token 校验后，根据
modelname转发给 ChatGLM_6b.py 或 Qwen_7b.py，这两个模块只是简单的 HTTP 转发到内网模型服务，失败时统一返回"算力不足，请稍候再试！"； - 结果 JSON 回到前端，经
marked渲染后增量刷入气泡。
八、总结：新手能学到什么？
✅ 一个 <Chat> 组件 + useMessages，快速搭出完整聊天界面； ✅ 用递归轮询实现流式输出，理解 SSE/WebSocket 之前的常见方案； ✅ 用 Composer 属性注入自定义组件，实现输入框增强（自动补全、快捷键）； ✅ 用少量覆盖 CSS + 类名选择器完成主题定制； ✅ localStorage + 查询参数实现轻量 token 鉴权。
如果你正在做自己的 AI 对话产品，aiitchat 的 webui 源码（aiitchat/chat/src/ 目录）是一个麻雀虽小、五脏俱全的参考样本——先跑起来，再逐行对照本文读代码，一天之内就能掌握 AI 聊天前端的搭建套路。🚀
【免费下载链接】aliendao huggingface mirror download 项目地址: https://gitcode.com/gh_mirrors/al/aliendao
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
