用React+@chatui/core构建AI聊天前端：aliendao aiitchat webui源码完整解析

用React+@chatui/core构建AI聊天前端：aliendao aiitchat webui源码完整解析

【免费下载链接】aliendaohuggingface 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/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时会做两件事：

1. 修改模块级变量modelname（"ChatGLM-6b"或"Qwen-7b"），后续请求会带上该字段；
2. 调用changeTitleStyle把标题颜色切成黑/绿，用视觉方式提示当前模型，避免用户混淆。

这是一种低成本的"多模型切换"实现：前端只负责传modelname，真正的模型路由在后端aiitchat/aiitchat.py的stream_v2里完成。

4.3 轮询式流式输出：onGenCode 递归请求

AI 回答是逐段"吐"出来的。前端没有用 WebSocket，而是采用递归 XMLHttpRequest 轮询的方式：

1. onGenCode(prompt, count)向/api/stream/v2?token=xxx发起 POST，请求体包含{ context: { prompt, history }, modelname }；
2. 返回{ response, history, stop }后，updateMsg直接把最后一条.Bubble.text的innerHTML替换为marked渲染后的 Markdown，并自动滚动到底部；
3. 若stop === false则count++后再次调用自身，直到模型结束；
4. 前端把history裁剪到最多 5 条（if (history.length > 5) history.shift()），控制上下文长度；
5. 顶部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}注入），它实现了输入框的"智能提示"：

1. 监听onChange，当输入内容以.或。结尾时，把前文发给提示接口codegen_prompt/v1，请求 5 条候选；
2. 拿到候选后渲染 AutoCompletion.js 下拉列表，悬浮在输入框上方（位置通过读取.Composer节点高度动态计算）；
3. 键盘事件接管：上下键移动选中项、回车选中回填，其余按键交还给输入框，回车发送（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 级更新，省去了层层透传状态。

七、前后端如何协作？

整体数据流非常清晰：

1. 前端MComposer发送文本 →App.js的handleSend追加用户气泡并触发onGenCode；
2. onGenCodePOST 到后端/api/stream/v2（定义于aiitchat/aiitchat.py）；
3. 后端做敏感词过滤与 token 校验后，根据modelname转发给 ChatGLM_6b.py 或 Qwen_7b.py，这两个模块只是简单的 HTTP 转发到内网模型服务，失败时统一返回"算力不足，请稍候再试！"；
4. 结果 JSON 回到前端，经marked渲染后增量刷入气泡。

八、总结：新手能学到什么？

✅ 一个<Chat>组件 +useMessages，快速搭出完整聊天界面； ✅ 用递归轮询实现流式输出，理解 SSE/WebSocket 之前的常见方案； ✅ 用Composer属性注入自定义组件，实现输入框增强（自动补全、快捷键）； ✅ 用少量覆盖 CSS + 类名选择器完成主题定制； ✅localStorage+ 查询参数实现轻量 token 鉴权。

如果你正在做自己的 AI 对话产品，aiitchat 的 webui 源码（aiitchat/chat/src/目录）是一个麻雀虽小、五脏俱全的参考样本——先跑起来，再逐行对照本文读代码，一天之内就能掌握 AI 聊天前端的搭建套路。🚀

【免费下载链接】aliendaohuggingface mirror download项目地址: https://gitcode.com/gh_mirrors/al/aliendao