如何快速实现AI大模型聊天对话框的页面布局？

原创

喵喵侠

修改于 2024-08-10 23:17:27

2600

修改于 2024-08-10 23:17:27

前言

你好，我是喵喵侠。随着最近两年AI的爆火，市面上出现了各种各样的大模型，而用户和大模型最常见的交互方式就是聊天对话形式，而这个对话框的交互逻辑从IM软件诞生那一刻就已经出现了。对于前端开发来说，巧妙的利用CSS的属性，可以快速的布局一个聊天窗口。下面来一起看看吧！

需求描述

某次我接到一个开发任务，那就是要开发一个AI对话聊天窗口。由于好久没开发类似这样的需求，显得有些生疏，正好研究完成后，可以用这篇文章记录一下。

在这个任务中，需要实现一个基本的聊天界面，用户可以发送消息，并接收来自AI模型的回复。每次用户的提问和AI的回答都将组成一个对话单元，展示在页面上。

由上图可以看到，这种自己的消息在右边，对方的回复在左边的布局还蛮特别的，因为它不是固定朝向某一个方向对齐，而是先是右边后是左边这样的。知道了这个布局要求，接着就是想办法实现了。

实现思路

我的实现核心思路是用flex布局，flex布局是设置flex-direction:column实现垂直排列，然后分别设置子元素的align-self属性。，自己的消息是align-self:flex-end是靠右，AI回复的消息是align-self:flex-start是靠左。这样布局就很快实现了。

我的完整代码示例如下：

<template>
  <div class="chat-container">
    <div class="chat-item" v-for="(message, index) in messages" :key="index">
      <!-- 用户发送的消息 -->
      <div class="chat-ask">{{ message.ask }}</div>
      <!-- AI 回复的消息 -->
      <div class="chat-answer">{{ message.answer }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 用于存储每组对话的数组
      messages: [
        { ask: "你好，喵喵AI！", answer: "你好！有什么我能帮助你的吗？" },
        { ask: "今天天气怎么样？", answer: "今天的天气非常好，阳光明媚。" },
      ],
    };
  },
};
</script>

<style scoped>
.chat-container {
  padding: 20px;
  background-color: #f0f4f8;
}

.chat-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.chat-ask {
  /* 右对齐，模拟用户的消息 */
  align-self: flex-end;
  background: #419fff;
  color: #fff;
  border-radius: 12px 2px 12px 12px;
  padding: 8px;
  max-width: 80%; /* 确保内容不超过屏幕宽度 */
  word-break: break-all; /* 长单词自动换行 */
  margin-bottom: 10px;
}

.chat-answer {
  /* 左对齐，模拟AI的回复 */
  align-self: flex-start;
  background: #daedff;
  color: #333;
  border-radius: 12px;
  padding: 8px;
  max-width: 80%; /* 确保内容不超过屏幕宽度 */
  word-break: break-all; /* 长单词自动换行 */
}
</style>

我上面写的每个对话气泡，都设置了max-width，这是为了防止消息宽度超出屏幕，同时也适配了消息长度比较小的情况。

如果要开发的不是AI聊天一问一答的形式，而是通过WebSocket的实时聊天室这样的，那么这个数组对下的结构就不太使用了。你可以给别人的消息标记一个类名是right-msg，给自己的消息标记为left-msg，这样你设置了align-self后布局还是一样的效果。

上面的案例只是实现了对话框对话部分的布局，具体的发送消息框和按钮，以及发送消息后容器滚动到指定位置等细节，可以自行完善。