weixin_40951507的博客

上一篇给大家讲解了如何将消息发送给机器人,本篇将为大家讲解，在实际开发过程中，不难发现，我们的机器人在流式输出文字的过程中，由于篇幅长度的变化，界面不但要控制高度，同时要做到滚动条的自动滚动，那么本节将以源码加实战的方式给大家讲解前端源码地址：https://gitee.com/wanyushu/chat-ai后端源码链接：https://gitee.com/wanyushu/springboot-demo.git三、重难点讲解1、聊天记录锚点的设置注意该锚点设置在 v-for 标签的下面：以下

上一篇我们讲解了如何让我们的消息发送框悬浮在固定位置,本编讲为大家讲解如何讲消息发送给机器人，这里需要用到http请求，后端需要提供对应的接口1、服务端代码已为大家准备好,请参考springboot的使用技巧2、测试页面源码，请参考从零开始搭建AI聊天四、重难度讲解1、集成 sse客户端,并配置后端的服务请求地址2、页面监听enter键3、index组件最终源码4、chat-main组件源码5、chat-send源码演示效果1、集成sse并初始化连接对象的过程中，需要注意请求头

如何让我们的消息框悬浮在固定位置

在聊天的过程中，我们聊天往往有个特点好友的在左侧，自己的在右侧，本篇为讲解如何快速实现聊天记录的展示。

1、在布局左右侧布局的过程中，注意使用 flex布局，justify-content: flex-start;2、设置左侧面板的高度为 height: calc(100vh);这样控制了高度，保证右侧会话界面在聊天的过程中整体界面不重叠3、注意设置聊天内容为 overflow-y: auto;