ChatGPT Web 对话框消息实现：子路由切换、消息透传与对话面板设计——《ChatGPT 微服务应用体系构建》chatgpt-web 第5节实战

文档教程后端【免费下载链接】CodeGuide:books: 本代码库是作者小傅哥多年从事一线互联网 Java 开发的学习历程技术汇总旨在为大家提供一个清晰详细的学习教程侧重点更倾向编写Java核心内容。如果本仓库能为您提供帮助请给予支持(关注、点赞、分享)项目地址https://gitcode.com/gh_mirrors/code/CodeGuide点击查看免费下载本文是《ChatGPT 微服务应用体系构建》系列中chatgpt-web前端工程第5节的实战指南聚焦对话框消息面板的完整落地在上一节对话框列表的基础上打通点击对话列表元素 → 子路由跳转 → 消息透传 → 右侧渲染对应对话消息与输入框的完整链路。读者将掌握 React/TypeScript 下子路由子页面的配置与跳转、跨组件消息透传路由参数、对话面板界面设计与实现以及如何用目标结果导向的思路推进一个复杂页面的开发。一、本章诉求从列表到消息面板的承上启下在上一节 第4节对话框列表 中我们已经完成了对话框列表窗体以dialog-*为首的一系列组件实现了对话列表与列表元素并在点击按钮 时创建新的会话。此时整个页面已经具备微信式侧边栏 对话列表的形态但右侧还缺少真正的内容承载。本节要解决的核心诉求非常明确在已有的对话框列表基础上实现对话框消息面板——点击对话框列表中的某个元素如【心理咨询、面试官】后右侧面板应切换到该对话对应的消息记录增加消息输入能力——面板底部需要有一个输入框用于后续输入对话内容保持纯前端实现——截至本节所有操作仍不与服务端关联对话数据、消息数据都只在前端处理为后续第8节流式接口对接预留前端侧的完整骨架。在学习本章之前可以带着两个问题驱动思考对话框消息是怎么和对话框元素关联上的——每个对话应拥有唯一 ID消息集合以该 ID 为键建立关联点击列表元素时怎么切换到对应的聊天对话框消息——这需要子路由子页面机制 消息透传来完成。这正是本节子路由设置、页面跳转、消息透传、界面设计和实现四个重点的全部内涵。二、目标效果与整体设计思路2.1 目标效果在完成了对话框消息之后整个页面又完善了不少左侧仍然是对话列表右侧则呈现当前选中对话的消息面板包括消息气泡展示区域和底部输入框。测试验证时可以点击绿色的创建按钮按钮 新建对话每个对话会生成一个对应的 ID这个 ID 串联起对话框消息。当点击各个对话列表的元素如【心理咨询、面试官】时右侧会切换到对应的对话消息上。2.2 界面结构左侧列表 右侧面板整个页面以 PC 端微信的界面结构为参考系列课程在第2节工具栏面板中已确立该设计基调区域承载内容章节归属侧边栏聊天、角色两个功能按钮负责路由切换第2节对话列表不同角色普通对话、面试官、心理咨询师等的会话列表、列表元素第4节对话消息面板当前会话的消息气泡、输入框本节第5节对话角色设定角色列表、角色介绍与发起对话第7节流式接口对接fetch ReadableStream 打字机效果第8节2.3 代码改动范围本节工程改动以dialog文件下的内容为主用来实现整个对话框消息部分同时因为引入了页面的切换子路由home.tsx、chat.tsx也有对应少量代码的改动dialog目录新增/完善对话消息面板、消息元素、输入框等组件pages/home/home.tsx承载对话列表 对话消息面板的页面容器处理点击列表元素时的路由跳转pages/chat/chat.tsx对话消息子页面接收透传的消息参数并渲染对应对话内容。该工程由 WebStorm 的 Next.js TypeScript 模板创建包含src目录结构入口为page.tsx、layout.tsx业务页面从home.tsx开始扩展详见第1节Web页面工程初始化。三、核心机制一子路由设置与页面跳转3.1 为什么需要子路由在第2节工具栏面板中我们已经通过 TypeScript 提供的方法进行了界面操作地址路由点击侧边栏的聊天角色按钮右侧面板在加载不同的div模块间切换。本节进一步把对话消息独立成一个子页面chat子路由原因在于对话消息面板拥有独立的状态当前会话 ID、消息列表、输入内容独立成页便于聚焦维护点击对话列表元素 → 跳转到chat子路由 → 按会话 ID 渲染消息职责链路清晰与后续第7节对话角色设定中点击角色创建聊天信息到对话框、第8节流式接口对接中把应答结果依次填充到消息记录的扩展方向完全吻合。3.2 跳转与透传的实现思路页面跳转采用 React Route 路由子页面开发技术这也是项目简历技能清单中明确列出的一项技能清单。核心链路为home.tsx中监听对话列表元素的点击事件通过路由跳转携带对话 ID 参数进入chat.tsx子页面chat.tsx从路由参数中解析对话 ID作为消息透传的载体依据对话 ID 到前端消息数据源中取回该对话的消息记录并渲染面板底部输入框接收用户输入暂存于前端状态中本节不调用服务端。其中消息透传正是本节的关键设计点对话框元素与消息面板之间通过会话 ID这个唯一标识建立关联ID 在路由跳转时作为参数传递消息面板据此拉取对应数据。这也呼应了第4节中与谁在聊天、聊天了多少条、什么时候结束的最后一次对话这些信息建模的延续。四、核心机制二对话与消息的关联建模4.1 对话 ID 串联消息每个对话拥有一个唯一 ID该 ID 串联对话框消息。数据结构上可以抽象为对话Dialog/Conversationid唯一标识、name如心理咨询、面试官、最后一条消息摘要、时间等信息用于左侧列表展示消息MessagedialogId关联的对话 ID、发送方向用户/助手、内容文本、时间等信息用于右侧面板渲染。当用户点击列表元素时通过该元素的 ID 找到对应对话再以dialogId关联到消息集合。这套以 ID 为键、一对一/一对多关联的前端数据建模为第6节完善对话处理中把对话列表和消息存储到浏览器localStorage/zustand persist、以及后续扩展为服务端存储都留好了接口。4.2 创建对话与切换对话目标效果中明确了两类交互交互行为说明点击绿色按钮 创建新对话生成新的对话 ID并在左侧列表新增元素点击列表元素如心理咨询、面试官切换到对应对话消息子路由跳转 消息透传右侧渲染该对话的消息创建对话的入口在上一节第4节已经实现本节在其基础上补全右侧消息面板的响应切换对话则完全由本节的子路由 透传机制承担。五、界面设计与实现要点5.1 对话消息面板dialog 模块dialog文件下内容负责整个对话框消息部分包括消息展示区以气泡列表形式渲染当前对话的历史消息区分用户消息与助手消息的样式左/右对齐、不同底色输入框区域位于面板底部提供文本输入作为后续对话内容的入口消息元素组件单个消息的展示单元承载内容文本与基础样式。界面设计延续系列课程的 PC 微信风格左侧列表 右侧消息面板的经典双栏布局使对话列表 → 消息面板的视觉引导自然流畅。5.2 home.tsx 与 chat.tsx 的联动pages/home/home.tsx页面容器。这里承载了对话列表与消息面板两大区域的布局同时负责点击列表元素 → 跳转 chat 子路由的事件处理pages/chat/chat.tsx对话消息子页面。接收透传的对话 ID 参数拉取并渲染对应消息绑定输入框状态。两者的联动构成了完整的页面跳转 消息透传闭环后续第6节完善对话处理中扩展的chat-store.ts对话列表与对话信息的存储、markdown.tsxMD 渲染、输入框上方控制栏上下文控制与模型选择都是在这一基础上叠加的。六、本节在系列课程中的位置与延伸本节处于chatgpt-web前端的承上启下位置承上基于第4节对话框列表的列表能力补全右侧消息面板形成完整可交互的前端界面雏形启下第6节完善对话处理在消息发送和展现基础上将对话列表与消息存入浏览器减少对服务器的调用、扩展 Markdown 渲染 ChatGPT 返回的 MD 格式数据尤其是代码块、完善输入框上方控制栏模型选择、上下文控制参数透传至后端接口第7节对话角色设定将角色Java 面试官、文案写手、心灵导师等预设为好友点击对话时创建聊天信息到对话框中复用本节的对话创建与跳转机制第8节流式接口对接通过跨域处理、fetch 调用接口、ReadableStream 流式数据填充把服务端流式应答以打字机效果渲染进本节搭建的消息面板中第9节公众号扫码登录在对话信息必要位置加入权限拦截校验。本节完成后读者应能够在自己的 Next.js TypeScript 工程中独立实现列表 → 子路由 → 消息面板的对话界面并清楚理解对话 ID 是串联列表与消息的纽带子路由跳转与参数透传是切换对话的通道消息面板则是后续一切对话交互存储、渲染、流式填充、权限拦截的载体。附相关章节与仓库路径本节前置第4节对话框列表本节延伸第6节完善对话处理、第7节对话角色设定、第8节流式接口对接、第9节公众号扫码登录工程初始化与框架说明第1节Web页面工程初始化、第2节工具栏面板、第3节按钮定义与事件实现项目综述与技能清单项目综述、面试技能与简历汇总赞分享文档教程后端【免费下载链接】CodeGuide:books: 本代码库是作者小傅哥多年从事一线互联网 Java 开发的学习历程技术汇总旨在为大家提供一个清晰详细的学习教程侧重点更倾向编写Java核心内容。如果本仓库能为您提供帮助请给予支持(关注、点赞、分享)项目地址https://gitcode.com/gh_mirrors/code/CodeGuide点击查看免费下载相关推荐TUnit的异步数据提供器实现高效的异步测试数据源TUnit的异步数据提供器实现高效的异步测试数据源 在现代.NET应用开发中异步操作已成为提升性能的关键技术。然而许多测试框架在处理异步数据源时仍存在局限chatgpt-web 对话框列表实战pages 与 components 分层重构构建多角色会话管理界面chatgpt web 对话框列表实战pages 与 components 分层重构构建多角色会话管理界面 在《ChatGPT 微服务应用体系构建》的 ch文档教程后端解决Android Auto延迟AAWirelessDongle网络吞吐量优化指南解决Android Auto延迟AAWirelessDongle网络吞吐量优化指南 你是否在使用Android Auto时遇到过导航卡顿、音乐断断续续的问题上一篇PyTorch-NPU/stable-diffusion-2-1环境配置教程华为NPU深度学习环境搭建下一篇FFmpegFreeUI编码器完全解析40种视频编码器深度对比与实战指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考