用Reactchatui/core构建AI聊天前端aliendao aiitchat webui源码完整解析【免费下载链接】aliendaohuggingface mirror download项目地址: https://gitcode.com/gh_mirrors/al/aliendaoaliendao 的 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.cssChatUI 主题定制样式后端则是同目录下的aiitchat/aiitchat.pyaiohttp 服务以及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 个quickRepliesChatGLM2、通义千问、历史、token 设置。点击handleQuickReplyClick时会做两件事修改模块级变量modelnameChatGLM-6b或Qwen-7b后续请求会带上该字段调用changeTitleStyle把标题颜色切成黑/绿用视觉方式提示当前模型避免用户混淆。这是一种低成本的多模型切换实现前端只负责传modelname真正的模型路由在后端aiitchat/aiitchat.py的stream_v2里完成。4.3 轮询式流式输出onGenCode 递归请求AI 回答是逐段吐出来的。前端没有用 WebSocket而是采用递归 XMLHttpRequest 轮询的方式onGenCode(prompt, count)向/api/stream/v2?tokenxxx发起 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追加用户气泡并触发onGenCodeonGenCodePOST 到后端/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 聊天前端的搭建套路。【免费下载链接】aliendaohuggingface mirror download项目地址: https://gitcode.com/gh_mirrors/al/aliendao创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
用React+@chatui/core构建AI聊天前端：aliendao aiitchat webui源码完整解析
用Reactchatui/core构建AI聊天前端aliendao aiitchat webui源码完整解析【免费下载链接】aliendaohuggingface mirror download项目地址: https://gitcode.com/gh_mirrors/al/aliendaoaliendao 的 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.cssChatUI 主题定制样式后端则是同目录下的aiitchat/aiitchat.pyaiohttp 服务以及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 个quickRepliesChatGLM2、通义千问、历史、token 设置。点击handleQuickReplyClick时会做两件事修改模块级变量modelnameChatGLM-6b或Qwen-7b后续请求会带上该字段调用changeTitleStyle把标题颜色切成黑/绿用视觉方式提示当前模型避免用户混淆。这是一种低成本的多模型切换实现前端只负责传modelname真正的模型路由在后端aiitchat/aiitchat.py的stream_v2里完成。4.3 轮询式流式输出onGenCode 递归请求AI 回答是逐段吐出来的。前端没有用 WebSocket而是采用递归 XMLHttpRequest 轮询的方式onGenCode(prompt, count)向/api/stream/v2?tokenxxx发起 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追加用户气泡并触发onGenCodeonGenCodePOST 到后端/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 聊天前端的搭建套路。【免费下载链接】aliendaohuggingface mirror download项目地址: https://gitcode.com/gh_mirrors/al/aliendao创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考