feat:修复ai对话展示顺序混乱的问题

src/components/AIChatter/AIChatter.module.scss

@@ -1,7 +1,7 @@
 .container {
   position: relative;
   width: 100%;
-  height: 75%; // 原值：60%
+  height: 60%; // 原值：60%
   padding: 10px;
   box-sizing: border-box;
   background-color: #ffffff;

src/components/AIChatter/AIChatter.vue

@@ -3,6 +3,7 @@
   Author: BaiQi
   Created Date: 2024-6-21
 -->
+<!--TODO: 设置单次ai对话次数：10次-->
 <template>
   <div :class="[{'teacher-view': props.isTeacher},$style.container]">
     <!--大语言模型选择器-->
@@ -23,11 +24,11 @@
         </div>
       </div>
      </div>
-  
+
     <!-- 消息区域，采用ChatGPT的交互模式 -->
     <div :class="$style['message-box']" ref="containerTopRef">
       <div
-          v-for="(item, index) in data.messages.slice().reverse()"
+          v-for="(item, index) in messageList"
           :key="index"
           :class="$style.item"
       >
@@ -43,7 +44,7 @@
         </div>
         <div style="margin-left: 15px">
           <!--名字-->
-          <div style="margin-bottom: 2px">{{ index % 2 === 0 ? 'Student' : data.model }}</div>
+          <div style="margin-bottom: 2px">{{ index % 2 === 0 ? 'You' : data.model }}</div>
           <!--内容-->
           <div :class="$style.content">{{ item?.content }}</div>
         </div>
@@ -85,7 +86,7 @@
               </el-dropdown-menu>
               </template>
           </el-dropdown>
-        </div>        
+        </div>
       </div>
     </div>
   </div>
@@ -137,6 +138,9 @@
   const messagesEndRef = ref(null);
   const containerTopRef = ref(null);
 
+  // 用于处理ai对话展示异常问题
+  let messageList:IDialogue[] = []
+
   let data = reactive<{
     model: string;
     questionContent: string;
@@ -156,6 +160,7 @@
   // 加载聊天记录，并滚动至最后
   onMounted(() => {
     if (props.messages) data.messages = props.messages;
+    // console.log(props.messages)
     scrollToEnd();
   });
 
@@ -166,6 +171,8 @@
   watch(() => props.messages, (newMessages:any) => {
     if (newMessages)
       data.messages = newMessages;
+    console.log(newMessages)
+    handleMessageList()
     scrollToEnd();
   });
 
@@ -193,12 +200,12 @@
     });
   });
 
-  //  BUG: 按这套逻辑显示的名字可能与内容对不上 
+  //  BUG: 按这套逻辑显示的名字可能与内容对不上
   const handleSendQuestion = () => {
     data.loading = true;
 
     let requestBody:IDialogue[] = data.messages
-    requestBody.unshift({
+    requestBody.push({
       role: 'user',
       content: data.questionContent
     })
@@ -206,8 +213,8 @@
     apis.requestAI(props.dialogueId, data.model, requestBody)
         .then((_res:any) => {
           const resDialogue = _res.data.data;
-          console.log(resDialogue);
           data.messages.push(resDialogue);
+          handleMessageList()
         })
         .catch((_err:any) => {
           console.log(_err);
@@ -225,10 +232,33 @@
 
   // 选择模板问题
   const handleMenuClick = (key:any) => {
-    data.questionContent = questionTemplates[key];
-    inputRef.value.focus();// 设置焦点自动回到Input
+    // data.questionContent = questionTemplates[key];
+    // inputRef.value.focus();// 设置焦点自动回到Input
+    console.log(data.messages)
   };
 
+  // 处理ai对话显示异常问题
+  const handleMessageList = () => {
+    let count1 = 0
+    let count2 = 1
+    for(let message of data.messages){
+      if(message.role == "user"){
+        messageList[count1] = {
+          role: "user",
+          content: message.content
+        }
+        count1+=2
+      }
+      if(message.role == "assistant"){
+        messageList[count2] = {
+          role: "assistant",
+          content: message.content
+        }
+        count2+=2
+      }
+    }
+  }
+
 
 </script>