你好，我是喵喵侠。随着最近两年AI的爆火，市面上出现了各种各样的大模型，而用户和大模型最常见的交互方式就是聊天对话形式，而这个对话框的交互逻辑从IM软件诞生那一刻就已经出现了。对于前端开发来说，巧妙的利用CSS的属性，可以快速的布局一个聊天窗口。下面来一起看看吧！
某次我接到一个开发任务，那就是要开发一个AI对话聊天窗口。由于好久没开发类似这样的需求，显得有些生疏，正好研究完成后，可以用这篇文章记录一下。
在这个任务中，需要实现一个基本的聊天界面，用户可以发送消息，并接收来自AI模型的回复。每次用户的提问和AI的回答都将组成一个对话单元，展示在页面上。
由上图可以看到，这种自己的消息在右边，对方的回复在左边的布局还蛮特别的，因为它不是固定朝向某一个方向对齐，而是先是右边后是左边这样的。知道了这个布局要求，接着就是想办法实现了。
实现思路
我的实现核心思路是用布局，flex布局是设置实现垂直排列，然后分别设置子元素的属性。，自己的消息是是靠右，AI回复的消息是是靠左。这样布局就很快实现了。
我的完整代码示例如下：
我上面写的每个对话气泡，都设置了，这是为了防止消息宽度超出屏幕，同时也适配了消息长度比较小的情况。
如果要开发的不是AI聊天一问一答的形式，而是通过WebSocket的实时聊天室这样的，那么这个数组对下的结构就不太使用了。你可以给别人的消息标记一个类名是，给自己的消息标记为，这样你设置了后布局还是一样的效果。
上面的案例只是实现了对话框对话部分的布局，具体的发送消息框和按钮，以及发送消息后容器滚动到指定位置等细节，可以自行完善。