chatgpt这么火？前端如何实现类似chatgpt的对话页面

本帖最后由 nettman 于 2023-3-15 22:18 编辑

前言
自从去年11月份chatgpt出圈之后，他的热度就居高不减，也出现了很多人借助接口开发的国内版本，那么本篇博客就从前端的角度来看看前端如何实现类似chatgpt的对话功能！

源码在文末获取！

因为这是我写在一个项目中的，单独提出来可能配色效果不同，但功能和做法只要我们掌握了，那么自己想怎么写就怎么写！

页面布局
这一块比较简单，分析过chatgpt的页面的就会知道，他的页面布局方式是采用flex布局的，flex布局确实好用，那么我也是基于Bootsrap+jquery+flex布局完成了简易版的对话功能！主要有两个地方用到了flex布局！

flex布局一

这里的头像和文字采用的就是flex布局，并且文字和图片顶部对齐，防止文字较多依旧和图片中间对齐的bug。
需要设置css:

其中align-items: flex-start;的作用就是让文字与图片顶部对齐！

flex布局二（重点）
第二处用到flex布局的地方就是这个搜索框：

很多人觉得这个对话框很简单，flex布局实现输入框和按钮在同一行确实简单，但你要好好看看chatgpt的官网，都是有小细节的，这里面还是有很多知识点的。

首先，我要说的是这个输入框用的textarea，而不是input，区别在于，input输入的内容是不能换行的，但textarea文本框可以，但使用textarea的问题是，参数rows设置为一行，这个文本框的高度会很低，达不到chatgpt的那个页面要求，rows设置大一点或者这个文本框的高度给高一点会有一个问题就是输入时他的光标不会在文本框的高度中间，而是在第一行，我们是没法通过其他方式让输入光标垂直居中的，因此这也不符合chatgpt页面的要求，所以这确实是个值的学习的一点！看了chatgpt页面的做法后，我悟了，下面一张图来说明chatgpt是如何做的：

如图，你只要将textarea边框取消掉，然后focus为类将边框效果也取消掉，外边再套一个div边框将textarea文本框和按钮套在里面就好了！

最后，将这个输入框定位到页面底部就好！

js部分
首先，页面部分，我们添加消息到页面，包括用户的问题以及ai的回复，添加消息到页面时需要向上滚动：

js.rar (382 Bytes, 下载次数: 2)

图文精华

chatgpt这么火？前端如何实现类似chatgpt的对话页面

推荐 /2