From f1fb1625d89c90dcf9adc481a6f51fabb6df902d Mon Sep 17 00:00:00 2001
From: Twilight <im@ivampiresp.com>
Date: Mon, 16 Sep 2024 11:24:45 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E8=BF=9B=20=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=E8=B0=83=E7=94=A8=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/chat/Chat.vue | 48 +++++++++++++++++++++++++-----------
 src/layouts/Header.vue       | 10 +++++++-
 src/stores/chat.ts           |  1 +
 3 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/src/components/chat/Chat.vue b/src/components/chat/Chat.vue
index f904d4a..2207f6a 100644
--- a/src/components/chat/Chat.vue
+++ b/src/components/chat/Chat.vue
@@ -24,13 +24,22 @@
         class="fixed bottom-0 left-0 right-0"
         :class="onBottom ? 'hidden' : 'mb-6'"
       >
-        <div
+        <!-- <div
           class="mx-auto w-2xl max-w-2xl text-center mb-3 animate__animated animate__pulse text-lg"
           v-if="toolCalling"
         >
           <n-gradient-text type="info">
             {{ toolName }}
           </n-gradient-text>
+        </div> -->
+
+        <div
+          class="mx-auto w-2xl max-w-2xl text-center mb-3 animate__animated animate__pulse text-lg"
+          v-if="isMobile && chatStore.toolName != ''"
+        >
+          <n-gradient-text type="info">
+            正在执行 {{ chatStore.toolName }}
+          </n-gradient-text>
         </div>
         <div
           ref="inputContainer"
@@ -148,6 +157,7 @@ import MessageList from "./MessageList.vue";
 import { useChatStore } from "@/stores/chat";
 import router from "@/router";
 import element from "@/config/element";
+import { useIsMobile } from "@/utils/composables";
 
 // 获取组件传入的 chatId
 const chatId: Ref<string | number | undefined | null> = ref(null);
@@ -165,6 +175,7 @@ const props = defineProps({
   },
 });
 
+const isMobile = useIsMobile()
 const userStore = useUserStore();
 const chatStore = useChatStore();
 const compositionStart = ref(false);
@@ -178,9 +189,6 @@ const content = ref("");
 const inputExpanded = ref(false);
 const chatMessages: Ref<EntityChatMessage[] | undefined> = ref([]);
 const processing = ref(false);
-const toolName = ref("");
-const toolError = ref(false);
-const toolCalling = ref(false);
 const fileUpload = ref();
 const uploading = ref(false);
 const autoScroll = ref(true);
@@ -350,7 +358,7 @@ async function sendMessage(
     };
   }
 
-  toolError.value = false;
+  // toolError.value = false;
   getApi()
     .ChatMessage.apiV1ChatsIdMessagesPost(Number(chatId.value), payload)
     .then(async (res) => {
@@ -465,28 +473,38 @@ function streamChat(streamId: String, redirect = false) {
 
     switch (data.state) {
       case "tool_calling":
-        toolCalling.value = true;
-        toolName.value =
+        // toolCalling.value = true;
+        chatStore.toolName =
           data.tool_call_message.tool_name +
           " 中的 " +
           data.tool_call_message.function_name;
+        // toolName.value =
+        //   data.tool_call_message.tool_name +
+        //   " 中的 " +
+        //   data.tool_call_message.function_name;
         break;
       case "tool_response":
         setTimeout(() => {
-          toolName.value = "";
-          toolCalling.value = false;
+          chatStore.toolName = "";
         }, 300);
         break;
       case "tool_failed":
-        toolName.value =
-          data.tool_response_message.tool_name +
+        // toolName.value =
+        //   data.tool_response_message.tool_name +
+        //   " 中的 " +
+        //   data.tool_response_message.function_name;
+
+        chatStore.toolName =
+          data.tool_call_message.tool_name +
           " 中的 " +
-          data.tool_response_message.function_name;
-        toolError.value = true;
+          data.tool_call_message.function_name;
+
+        // toolError.value = true;
         append = false;
         setTimeout(() => {
-          toolCalling.value = false;
-        }, 300);
+          // toolCalling.value = false;
+          chatStore.toolName = "";
+        }, 1000);
         break;
       case "chunk":
         if (!messageAdded) {
diff --git a/src/layouts/Header.vue b/src/layouts/Header.vue
index 6744c90..487c38d 100644
--- a/src/layouts/Header.vue
+++ b/src/layouts/Header.vue
@@ -54,7 +54,10 @@
         <n-grid-item class="flex items-center justify-center select-none">
           <div v-show="!isMobile">
             <!-- 中间部分 -->
-            <n-popover trigger="hover" v-if="!chatStore.currentChat?.id && !chatStore.currentChat?.name">
+            <n-popover
+              trigger="hover"
+              v-if="!chatStore.currentChat?.id && !chatStore.currentChat?.name"
+            >
               <template #trigger>
                 <img
                   :src="leaflowpng"
@@ -64,6 +67,11 @@
               </template>
               <span> Leaflow 利飞 </span>
             </n-popover>
+            <div v-else-if="chatStore.toolName != ''">
+              <n-gradient-text type="info">
+                正在执行 {{ chatStore.toolName }}
+              </n-gradient-text>
+            </div>
             <div v-else>
               <span>{{ chatStore.currentChat?.name }}</span>
             </div>
diff --git a/src/stores/chat.ts b/src/stores/chat.ts
index 0d4d618..05788d4 100644
--- a/src/stores/chat.ts
+++ b/src/stores/chat.ts
@@ -6,6 +6,7 @@ export const useChatStore = defineStore("chats", {
   state: () => ({
     currentChat: <EntityChat | undefined> {},
     currentAssistantId: 0,
+    toolName: "",
     chats: <EntityChat[] | undefined>[],
   }),
 });