山东大学软件学院创新实训——项目记录（十二）

零、前言

本篇记录主要是关于大模型对话页面的遇到问题与解决方式。

一、用户发问内容与模型回复内容的展示

一开始的设计是将用户的发问和模型回复区分开，然后用v-if来控制回复内容的可见性。
但是这样做的问题是用户div块会和模型块叠合在一起，无法实现对话来回往复的效果。

经过思考后改用以下方法;
首先固定内容格式：

{
      type:"user/robot",
      content:"消息内容",
}

通过将消息集成为对象的形式，用对象的type属性来判断渲染形式，
接下来则是利用vue的v-for和v-if特性，来动态的选择样式渲染，以及对话层叠

<div class="right_layout" style="overflow: auto; height: 80vh">
        <div v-for="(message, index) in chats" :key="index">
          <!-- 用户 -->
          <div v-if="message.type === 'user'" class="right_layout_son">
            <div class="right_layout_myselfChat">
              <div
                class="flase_img_son"
                style="margin-left: 10px; width: 40px; height: 40px"
              ></div>
              <div class="my_chat">
                {{ message.content }}
              </div>
            </div>
          </div>
          <!-- 机器人 -->
          <div v-if="message.type === 'robot'" class="left_layout_son">
            <div class="left_layout_robotChat">
              <div
                class="left_img_son"
                style="margin-left: 10px; width: 40px; height: 40px"
              ></div>
              <div class="robot_chat" style="margin-top: 10px">
                {{ message.content }}
              </div>
            </div>
</div>

最终实现效果如下：

二、问题的发送与返回结果的处理

在发送框输入问题后，回车后需要做到三件事：

1. 清空输入框
2. 在对话页面渲染问题
3. 向后端api发送问题后进行消息返回的处理。
   解决方案;

以上问题的核心均是在sendMessage()函数中对vue页面组件的自身属性值进行动态改变，以及异步响应。

解决的核心代码如下：

if (this.inputText.trim() !== "") {
        let message = {
          type: "user",
          content: this.inputText,
        };
        // 将用户输入的消息添加到聊天记录中
        this.chats.push(message);
        const messageToSend = this.inputText;
        this.inputText = ""; // 清空输入框

        // 测试对话存储;
        message = {
          type: "robot",
          content: "生成中......",
        }; // 
        this.chats.push(message);

三、为了异步处理的准备

在前后端数据传输选择了websocket，主要是为了适配后端提供的接口。
以及对结果的逐字节接受与流式输出。