[feat][ai聊天][折叠消息]

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

@@ -15,7 +15,7 @@
         <div class="main-content">
             <div class="chat-container">
                 <div class="message-list">
-                    <div v-for="item in chatRecordList" :key="item.id">
+                    <div v-for="(item, index) in chatRecordList" :key="item.id">
                         <!-- 会话图标 -->
                         <!--<div :class="item.isUser == 1? 'user-image' : 'system-image' "></div>-->
                         <div v-if="item.isUser == 1" class="user-message">
@@ -24,7 +24,10 @@
                         </div>
                         <div v-else class="message bot-message">
                             <img src="@/assets/images/common/ai/system.png" alt="icon"/>
-                            <div class="bot-message-content" v-html="item.content"></div>
+                            <div v-show="!expandIndexList.includes(index)" class="bot-message-content" v-html="item.content.substring(0, 80)"></div>
+                            <div v-show="expandIndexList.includes(index)" class="bot-message-content" v-html="item.content"></div>
+                            <el-button v-if="item.content.length>80" @click="foldOrExplandMessage(index, expandIndexList.includes(index))">{{expandIndexList.includes(index)?'折叠':'展开'}}</el-button>
+                            <el-button>播放</el-button>
                         </div>
                     </div>
                 </div>
@@ -90,6 +93,11 @@
     let inputMessage = ref('')
     // 发送标识
     let isSending = ref(false)
+    // 选中的消息，用于展开折叠
+    let expandIndexList = ref([])
+    // 展开状态
+    let activeIndex = ref(0);
+
     // 查看所有聊天记录
     list();
     function list() {
@@ -103,10 +111,10 @@
     }
 
     const sendMessage = () => {
-/*        if (inputMessage.value.trim()) {
+        if (inputMessage.value.trim()) {
             sendRequest(inputMessage.value.trim())
             inputMessage.value = ''
-        }*/
+        }
     }
 
     const sendRequest = async(message) => {
@@ -181,6 +189,17 @@
         isLoading.value = false;
     }
 
+    function foldOrExplandMessage(index, flag){
+        activeIndex.value = index;
+        if(flag){
+            expandIndexList.value = expandIndexList.value.filter((item)=>{
+                return item !== index;
+            })
+        }else{
+            expandIndexList.value.push(index)
+        }
+    }
+
     onMounted(()=>{
         sendMessage()
     })