[feat][ai聊天][消息折叠与展开]

src/views/xjc-integratedmachine/common/ai/chat.vue

@@ -23,18 +23,46 @@
                         <div v-else class="bot-message">
                             <img src="@/assets/images/common/ai/system.png" alt="icon" style="margin-left: 4px"/>
                             <div>
-                                <div v-show="!expandIndexList.includes(index)" class="bot-message-content" style="margin-left: 4px" v-html="item.content.substring(0, 80)"></div>
-                                <div v-show="expandIndexList.includes(index)" class="bot-message-content" style="margin-left: 4px" v-html="item.content"></div>
+                                <div class="bot-message-content" style="margin-left: 4px">
+      <!--                              <div v-show="!expandIndexList.includes(index)" v-html="item.content.substring(0, 80)"></div>
+                                    <div v-show="expandIndexList.includes(index)" v-html="item.content"></div>-->
+                                    <div v-if="index === chatRecordList.length-1">
+                                        <div v-if="item.isTyping">
+                                            <div v-html="item.content"></div>
+                                            <span class="loading-dots" style="display: flex;justify-content: center">
+                                                <span class="dot"></span>
+                                                <span class="dot"></span>
+                                            </span>
+                                        </div>
+                                        <div v-else>
+                                            <div v-html="item.content"></div>
+                                        </div>
+                                    </div>
+                                    <div v-else>
+                                        <div v-show="!expandIndexList.includes(index)" v-html="item.content.substring(0, 80)"></div>
+                                        <div v-show="expandIndexList.includes(index)" v-html="item.content"></div>
+                                    </div>
+                                </div>
                                 <div style="margin: 4px">
                                     <el-text>{{item.createTime}}</el-text>
                                 </div>
                             </div>
-
-                            <el-button v-if="item.content.length>80" style="margin-left: 4px" @click="foldOrExpandMessage(index, expandIndexList.includes(index))">{{expandIndexList.includes(index)?'折叠':'展开'}}</el-button>
+                            <div v-if="index !== chatRecordList.length-1">
+                                <el-button v-if="item.content.length>80" style="margin-left: 4px"
+                                           @click="foldOrExpandMessage(index, expandIndexList.includes(index))">
+                                    {{expandIndexList.includes(index)?'折叠':'展开'}}
+                                </el-button>
+                            </div>
+         <!--                   <div v-else>
+                                <el-button v-if="item.content.length>80" style="margin-left: 4px"
+                                           @click="foldOrExpandMessage(index, expandIndexList.includes(index))">
+                                    {{expandIndexList.includes(index)?'折叠':'展开'}}
+                                </el-button>
+                            </div>-->
                             <el-button>播放</el-button>
                         </div>
                     </div>
-                    <div class="bot-message" v-if="streamHtmlData">
+<!--                    <div class="bot-message" v-if="streamHtmlData">
                         <img src="@/assets/images/common/ai/system.png" alt="icon"/>
                         <div class="bot-message-content">
                             <div v-html="streamHtmlData"></div>
@@ -45,8 +73,8 @@
                                 </span>
                             </div>
                         </div>
-
-                    </div>
+                        <el-button>播放</el-button>
+                    </div>-->
                 </div>
             </div>
             <div class="input-container">
@@ -155,6 +183,15 @@
         }
         // 消息加入聊天记录
         chatRecordList.value.push(userMessage)
+        const botMsg = {
+            isUser: false,
+            content: '', // 增量填充
+            isTyping: true, // 显示加载动画
+        }
+        chatRecordList.value.push(botMsg)
+        const lastMsg = chatRecordList.value[chatRecordList.value.length - 1]
+
+
         try{
             isLoading.value = true;
             streamMarkdownData.value = ''; // 清空之前的数据
@@ -190,18 +227,22 @@
                 chunk = chunk.replace(/\n\n/g, '').replace(/data:/g, '')
                 streamMarkdownData.value += chunk;
                 streamHtmlData.value = marked(streamMarkdownData.value)
+                lastMsg.content = marked(streamMarkdownData.value)
             }
         }catch (error) {
             // 如果是手动中止，不显示错误
             if (error.name !== 'AbortError') {
                 console.error('流式读取失败:', error);
-                streamMarkdownData.value = 'Error: ' + error.message;
+                streamHtmlData.value = 'Error: ' + error.message;
             }
         } finally {
             isLoading.value = false;
             let htmlData = marked(streamMarkdownData.value);
             addRecord(htmlData);
             streamHtmlData.value = htmlData;
+            lastMsg.content = marked(streamMarkdownData.value)
+            lastMsg.isTyping = false
+            list()
         }
     }