网站接入ai聊天界面设计思路

需求分析：我们要实现一个简单版的ai聊天网页，聊天消息布局和 微信等日常聊天软件相似

思路分析 ：

一

我们通过获取input框输入的值（text），调用api，获取ai回答的消息（response），把text和response都加入list数组中，动态渲染

二

动态渲染后消息布局应该是一左一右，和微信一致

这里使用flex布局，在消息div(container)动态渲染left类，right类两种消息，css格式如下

.container {
  display: flex;
  flex-direction: column;
  // 高度自己定义，我这里示例比较简陋，设为的100px好实现 scrollToBottom函数
  height: 80vh;
  overflow-y: scroll;
}
.left {
  align-self: flex-start;
  border: 1px solid red;
  width: 70vw;
}
.right {
  align-self: flex-end;
  border: 1px solid blue;
  width: 70vw;
}

三

消息更新后div要到最底部

function scrollToBottom(div) { 
     div.scrollTop = div.scrollHeight;
 }

所以实现如下，我这里用的是vue3，接入的是谷歌的gemini

<