refactor: refactor mobile pages for the chat model updating

web/src/views/mobile/ChatSession.vue

@@ -1,13 +1,13 @@
 <template>
   <van-config-provider :theme="getMobileTheme()">
-    <div class="mobile-chat">
+    <div class="mobile-chat" v-loading="loading" element-loading-text="正在连接会话...">
       <van-sticky ref="navBarRef" :offset-top="0" position="top">
         <van-nav-bar left-arrow left-text="返回" @click-left="router.back()">
           <template #title>
             <van-dropdown-menu>
               <van-dropdown-item :title="title">
                 <van-cell center title="角色"> {{ role.name }}</van-cell>
-                <van-cell center title="模型">{{ model }}</van-cell>
+                <van-cell center title="模型">{{ modelValue }}</van-cell>
               </van-dropdown-item>
             </van-dropdown-menu>
           </template>
@@ -28,7 +28,6 @@
       <div id="message-list-box" :style="{height: winHeight+'px'}" class="message-list-box">
         <van-list
             v-model:error="error"
-            v-model:loading="loading"
             :finished="finished"
             error-text="请求失败，点击重新加载"
             @load="onLoad"
@@ -47,6 +46,12 @@
                         :icon="item.icon"
                         :org-content="item.orgContent"
                         :tokens="item['tokens']"/>
+            <chat-mid-journey v-else-if="item.type==='mj'"
+                              :content="item.content"
+                              :icon="item.icon"
+                              @disable-input="disableInput(true)"
+                              @enable-input="enableInput"
+                              :created-at="dateFormat(item['created_at'])"/>
           </van-cell>
         </van-list>
       </div>
@@ -80,7 +85,7 @@
 
 <script setup>
 import {nextTick, onMounted, ref} from "vue";
-import {showToast, showDialog} from "vant";
+import {showToast} from "vant";
 import {useRouter} from "vue-router";
 import {dateFormat, randString, renderInputText, UUID} from "@/utils/libs";
 import {getChatConfig} from "@/store/chat";
@@ -89,9 +94,10 @@ import hl from "highlight.js";
 import 'highlight.js/styles/a11y-dark.css'
 import ChatPrompt from "@/components/mobile/ChatPrompt.vue";
 import ChatReply from "@/components/mobile/ChatReply.vue";
-import {getSessionId} from "@/store/session";
+import {getSessionId, getUserToken} from "@/store/session";
 import {checkSession} from "@/action/session";
 import {getMobileTheme} from "@/store/system";
+import ChatMidJourney from "@/components/mobile/ChatMidJourney.vue";
 
 const winHeight = ref(0)
 const navBarRef = ref(null)
@@ -101,6 +107,7 @@ const router = useRouter()
 const chatConfig = getChatConfig()
 const role = chatConfig.role
 const model = chatConfig.model
+const modelValue = chatConfig.modelValue
 const title = chatConfig.title
 const chatId = chatConfig.chatId
 const loginUser = ref(null)
@@ -123,7 +130,6 @@ checkSession().then(user => {
 const onLoad = () => {
   httpGet('/api/chat/history?chat_id=' + chatId).then(res => {
     // 加载状态结束
-    loading.value = false;
     finished.value = true;
     const data = res.data
     if (data && data.length > 0) {
@@ -132,6 +138,11 @@ const onLoad = () => {
         if (data[i].type === "prompt") {
           chatData.value.push(data[i]);
           continue;
+        } else if (data[i].type === "mj") {
+          data[i].content = JSON.parse(data[i].content)
+          data[i].content.html = md.render(data[i].content?.content)
+          chatData.value.push(data[i]);
+          continue;
         }
 
         data[i].orgContent = data[i].content;
@@ -189,14 +200,14 @@ const connect = function (chat_id, role_id) {
       host = 'ws://' + location.host;
     }
   }
-  const _socket = new WebSocket(host + `/api/chat/new?session_id=${_sessionId}&role_id=${role_id}&chat_id=${chat_id}&model=${model}`);
+  const _socket = new WebSocket(host + `/api/chat/new?session_id=${_sessionId}&role_id=${role_id}&chat_id=${chat_id}&model_id=${model}`);
   _socket.addEventListener('open', () => {
+    loading.value = false
     previousText.value = '';
     canSend.value = true;
     activelyClose.value = false;
 
     if (isNewChat) { // 加载打招呼信息
-      loading.value = false;
       chatData.value.push({
         type: "reply",
         id: randString(32),
@@ -220,10 +231,39 @@ const connect = function (chat_id, role_id) {
             icon: role.icon,
             content: ""
           });
+        } else if (data.type === "mj") {
+          disableInput(true)
+          const content = data.content;
+          const md = require('markdown-it')({breaks: true});
+          content.html = md.render(content.content)
+          let key = content.key
+          // fixed bug: 执行 Upscale 和 Variation 操作的时候覆盖之前的绘画
+          if (content.status === "Finished") {
+            key = randString(32)
+            enableInput()
+          }
+          // console.log(content)
+          // check if the message is in chatData
+          let flag = false
+          for (let i = 0; i < chatData.value.length; i++) {
+            if (chatData.value[i].id === content.key) {
+              flag = true
+              chatData.value[i].content = content
+              chatData.value[i].id = key
+              break
+            }
+          }
+          if (flag === false) {
+            chatData.value.push({
+              type: "mj",
+              id: key,
+              icon: "/images/avatar/mid_journey.png",
+              content: content
+            });
+          }
+
         } else if (data.type === 'end') { // 消息接收完毕
-          canSend.value = true;
-          showReGenerate.value = true;
-          showStopGenerate.value = false;
+          enableInput()
           lineBuffer.value = ''; // 清空缓冲
 
         } else {
@@ -250,7 +290,6 @@ const connect = function (chat_id, role_id) {
   });
 
   _socket.addEventListener('close', () => {
-    console.log(activelyClose.value)
     if (activelyClose.value) { // 忽略主动关闭
       return;
     }
@@ -260,18 +299,26 @@ const connect = function (chat_id, role_id) {
     checkSession().then(() => {
       connect(chat_id, role_id)
     }).catch(() => {
-      showDialog({
-        title: '会话提示',
-        message: '当前会话已经失效，请重新登录！',
-      }).then(() => {
-        router.push('/login')
-      });
+      loading.value = true
+      setTimeout(() => connect(chat_id, role_id), 3000)
     });
   });
 
   socket.value = _socket;
 }
 
+const disableInput = (force) => {
+  canSend.value = false;
+  showReGenerate.value = false;
+  showStopGenerate.value = !force;
+}
+
+const enableInput = () => {
+  canSend.value = true;
+  showReGenerate.value = previousText.value !== "";
+  showStopGenerate.value = false;
+}
+
 // 将聊天框的滚动条滑动到最底部
 const scrollListBox = () => {
   document.getElementById('message-list-box').scrollTo(0, document.getElementById('message-list-box').scrollHeight + 46)
@@ -300,9 +347,7 @@ const sendMessage = () => {
     scrollListBox()
   })
 
-  canSend.value = false;
-  showStopGenerate.value = true;
-  showReGenerate.value = false;
+  disableInput(false)
   socket.value.send(prompt.value);
   previousText.value = prompt.value;
   prompt.value = '';
@@ -312,17 +357,12 @@ const sendMessage = () => {
 const stopGenerate = () => {
   showStopGenerate.value = false;
   httpGet("/api/chat/stop?session_id=" + getSessionId()).then(() => {
-    canSend.value = true;
-    if (previousText.value !== '') {
-      showReGenerate.value = true;
-    }
+    enableInput()
   })
 }
 
 const reGenerate = () => {
-  canSend.value = false;
-  showStopGenerate.value = true;
-  showReGenerate.value = false;
+  disableInput(false)
   const text = '重新生成上述问题的答案：' + previousText.value;
   // 追加消息
   chatData.value.push({