From de00770bffbce855bc45f3fc817ee60297d684f0 Mon Sep 17 00:00:00 2001
From: Twilight <im@ivampiresp.com>
Date: Sun, 4 Aug 2024 23:09:39 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E8=BF=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/chats/[id]/index.vue | 147 +++++++++++++++++++--------------
 src/pages/tools/validate.vue   | 126 ++++++++++++++--------------
 2 files changed, 145 insertions(+), 128 deletions(-)

diff --git a/src/pages/chats/[id]/index.vue b/src/pages/chats/[id]/index.vue
index e0997b7..4e05ab9 100644
--- a/src/pages/chats/[id]/index.vue
+++ b/src/pages/chats/[id]/index.vue
@@ -2,13 +2,18 @@
   <div>
     <h3 class="mb-3">聊天记录</h3>
 
-    <v-card v-for="message in messages.data" :key="message.id" class="mx-auto mt-3" width="100%">
+    <v-card
+      v-for="message in messages.data"
+      :key="message.id"
+      class="mx-auto mt-3"
+      width="100%"
+    >
       <template #title>
         <div class="font-weight-black">
-          <div v-if="message.role == 'assistant'"> AI </div>
-          <div v-else-if="message.role == 'system'"> 系统 </div>
+          <div v-if="message.role == 'assistant'">AI</div>
+          <div v-else-if="message.role == 'system'">系统</div>
 
-          <div v-else-if="message.role == 'user'" class="text-right"> 用户 </div>
+          <div v-else-if="message.role == 'user'" class="text-right">用户</div>
 
           <div v-else>
             {{ message.role }}
@@ -24,40 +29,52 @@
 
     <div class="mt-3">
       <div v-if="toolError" class="mb-3">
-        <v-alert density="compact" text="这个工具出现了异常，这应该不是我们的问题，如果你是此工具的开发者，请打开开发者控制台查看具体错误。"
-          :title="'工具 ' + toolName + ' 出现异常'" type="warning"></v-alert>
+        <v-alert
+          density="compact"
+          text="这个工具出现了异常，这应该不是我们的问题，如果你是此工具的开发者，请打开开发者控制台查看具体错误。"
+          :title="'工具 ' + toolName + ' 出现异常'"
+          type="warning"
+        ></v-alert>
       </div>
 
       <div v-show="toolCalling">
-        <v-progress-circular color="primary" indeterminate :size="16"></v-progress-circular>
+        <v-progress-circular
+          color="primary"
+          indeterminate
+          :size="16"
+        ></v-progress-circular>
         正在执行 {{ toolName }}
       </div>
-      <v-text-field v-model="input" label="输入消息" @keyup.enter="sendMessage"></v-text-field>
+      <v-text-field
+        v-model="input"
+        label="输入消息"
+        @keyup.enter="sendMessage"
+      ></v-text-field>
       <v-btn color="primary" @click="sendMessage">发送</v-btn>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ApiV1ChatsIdMessagesGet200Response } from "@/api"
-import { ref } from "vue"
-import { api, conf } from "@/plugins/api"
-import VueMarkdown from "vue-markdown-render"
+import { ApiV1ChatsIdMessagesGet200Response } from "@/api";
+import { ref } from "vue";
+import { api, conf } from "@/plugins/api";
+import VueMarkdown from "vue-markdown-render";
 
 // @ts-ignore
-const chatId = parseInt(useRoute().params.id as string)
+const chatId = parseInt(useRoute().params.id as string);
 
 const messages: Ref<ApiV1ChatsIdMessagesGet200Response> = ref({
   data: [],
-})
-const input = ref("")
-const toolName = ref("")
-const toolError = ref(false)
-const toolCalling = ref(false)
+});
+const input = ref("");
+const toolName = ref("");
+const toolError = ref(false);
+const toolCalling = ref(false);
 
 function sendMessage() {
   if (input.value !== "") {
-    toolError.value = false
+    toolError.value = false;
     api.ChatMessage.apiV1ChatsIdMessagesPost(chatId, {
       message: input.value,
     })
@@ -65,109 +82,113 @@ function sendMessage() {
         const newMessage = {
           content: input.value,
           role: "user",
-        }
+        };
 
         if (messages.value.data == null) {
-          messages.value.data = [newMessage]
+          messages.value.data = [newMessage];
         } else {
-          messages.value.data?.push(newMessage)
+          messages.value.data?.push(newMessage);
         }
 
-        const streamId = res.data.data?.stream_id
+        const streamId = res.data.data?.stream_id;
 
         if (streamId) {
-          streamChat(streamId)
+          streamChat(streamId);
         }
       })
       .catch((err) => {
         // if 409
         if (err.response.status === 409) {
-          const streamId = err.response.data.data?.stream_id
+          const streamId = err.response.data.data?.stream_id;
 
           if (streamId) {
-            streamChat(streamId)
+            streamChat(streamId);
           }
         }
-      })
+      });
   }
 }
 
 function streamChat(streamId: String) {
-  const url = conf.basePath + "/api/v1/stream/" + streamId
+  const url = conf.basePath + "/api/v1/stream/" + streamId;
 
-  const evtSource = new EventSource(url)
-
-  let messageAdded = false
+  const evtSource = new EventSource(url);
 
+  let messageAdded = false;
 
   // 滚动页面到最底部
-  window.scrollTo(0, document.body.scrollHeight)
+  window.scrollTo(0, document.body.scrollHeight);
 
   // set index
-  const i = (messages.value.data?.length ?? 1) - 1
+  const i = (messages.value.data?.length ?? 1) - 1;
 
   evtSource.addEventListener("data", (e) => {
-    const data = JSON.parse(e.data)
-    console.log(data.state)
-
-    let append = true
+    const data = JSON.parse(e.data);
+    console.log(data.state);
 
+    let append = true;
 
     switch (data.state) {
       case "tool_calling":
-        toolCalling.value = true
-        toolName.value = data.tool_call_message.tool_name + " 中的 " + data.tool_call_message.function_name
-        break
+        toolCalling.value = true;
+        toolName.value =
+          data.tool_call_message.tool_name +
+          " 中的 " +
+          data.tool_call_message.function_name;
+        break;
       case "tool_response":
         setTimeout(() => {
-          toolName.value = ""
-          toolCalling.value = false
-        }, 300)
-        break
+          toolName.value = "";
+          toolCalling.value = false;
+        }, 300);
+        break;
       case "tool_failed":
-        toolName.value = data.tool_response_message.tool_name + " 中的 " + data.tool_response_message.function_name
-        toolError.value = true
-        append = false
+        toolName.value =
+          data.tool_response_message.tool_name +
+          " 中的 " +
+          data.tool_response_message.function_name;
+        toolError.value = true;
+        append = false;
         setTimeout(() => {
-          toolCalling.value = false
-        }, 300)
-        break
+          toolCalling.value = false;
+        }, 300);
+        break;
       case "chunk":
         if (!messageAdded) {
           const newMessage = {
             content: "",
             role: "assistant",
-          }
+          };
 
           if (messages.value.data == null) {
-            messages.value.data = [newMessage]
+            messages.value.data = [newMessage];
           } else {
             // add to messages
-            messages.value.data?.push(newMessage)
+            messages.value.data?.push(newMessage);
           }
 
-          messageAdded = true
-          append = true
+          messageAdded = true;
+          append = true;
         }
     }
 
     if (append && messageAdded) {
       // @ts-ignore
-      messages.value.data[i].content += data.content
+      messages.value.data[i].content += data.content;
     }
-  })
+  });
 
   // close
   evtSource.addEventListener("close", () => {
-    evtSource.close()
-  })
+    evtSource.close();
+  });
 }
 
 const getMessages = () => {
   api.ChatMessage.apiV1ChatsIdMessagesGet(chatId).then((res) => {
-    messages.value = res.data
-  })
-}
+    messages.value = res.data;
+  });
+};
 
-getMessages()
+getMessages();
 </script>
diff --git a/src/pages/tools/validate.vue b/src/pages/tools/validate.vue
index a225bec..125448d 100644
--- a/src/pages/tools/validate.vue
+++ b/src/pages/tools/validate.vue
@@ -1,83 +1,79 @@
 <template>
-    <h3>验证语法</h3>
-    <p>目前处于测试阶段，不一定准确，但是能保证你添加成功。</p>
+  <h3>验证语法</h3>
+  <p>目前处于测试阶段，不一定准确，但是能保证你添加成功。</p>
 
+  <!-- input -->
+  <v-textarea v-model="input" label="你的 JSON 数据"></v-textarea>
 
-
-    <!-- input -->
-    <v-textarea v-model="input" label="你的 JSON 数据"></v-textarea>
-
-    <v-btn color="primary" class="mt-3 mb-3" @click="validate()">验证</v-btn>
-    <div v-show="checked">
-        <p v-show="error" class="text-danger">错误：{{ errorReason }}</p>
-        <p v-show="!error" class="text-success">正确</p>
-    </div>
-
+  <v-btn class="mt-3 mb-3" color="primary" @click="validate()">验证</v-btn>
+  <div v-show="checked">
+    <p v-show="error" class="text-danger">错误：{{ errorReason }}</p>
+    <p v-show="!error" class="text-success">正确</p>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { RagNewInternalSchemaToolDiscoveryInput } from '@/api'
-import { api } from '@/plugins/api'
+import { RagNewInternalSchemaToolDiscoveryInput } from "@/api";
+import { api } from "@/plugins/api";
 
 const exampleJSON = {
-    "name": "My Functions",
-    "description": "My Functions",
-    "homepage_url": "https://ivampiresp.com/test",
-    "callback_url": "https://ivampiresp.com/files/tool_test/index.php",
-    "functions": [
-        {
-            "name": "get_current_time",
-            "description": "当你想知道现在的时间时非常有用。",
-            "parameters": {}
+  name: "My Functions",
+  description: "My Functions",
+  homepage_url: "https://ivampiresp.com/test",
+  callback_url: "https://ivampiresp.com/files/tool_test/index.php",
+  functions: [
+    {
+      name: "get_current_time",
+      description: "当你想知道现在的时间时非常有用。",
+      parameters: {},
+    },
+    {
+      name: "get_current_weather",
+      description: "当你想查询指定城市的天气时非常有用。",
+      parameters: {
+        type: "object",
+        properties: {
+          location: {
+            type: "string",
+            description: "城市或县区，比如北京市、杭州市、余杭区等。",
+          },
         },
-        {
-            "name": "get_current_weather",
-            "description": "当你想查询指定城市的天气时非常有用。",
-            "parameters": {
-                "type": "object",
-                "properties": {
-                    "location": {
-                        "type": "string",
-                        "description": "城市或县区，比如北京市、杭州市、余杭区等。"
-                    }
-                }
-            },
-            "required": [
-                "location"
-            ]
-        }
-    ]
-}
+      },
+      required: ["location"],
+    },
+  ],
+};
 
-const input = ref("")
-const checked = ref(false)
-const error = ref(false)
-const errorReason = ref("")
+const input = ref("");
+const checked = ref(false);
+const error = ref(false);
+const errorReason = ref("");
 
 // unmashal
-input.value = JSON.stringify(exampleJSON, null, 4)
+input.value = JSON.stringify(exampleJSON, null, 4);
 
 function validate() {
-    checked.value = true
-    // 如果能解析为 json
-    try {
-        JSON.parse(input.value)
-    } catch (e) {
-        error.value = true
-        errorReason.value = "JSON 格式错误"
-        return
-    }
+  checked.value = true;
+  // 如果能解析为 json
+  try {
+    JSON.parse(input.value);
+  } catch (e) {
+    error.value = true;
+    errorReason.value = "JSON 格式错误";
+    return;
+  }
 
-    // 强制类型转换
-    const data: RagNewInternalSchemaToolDiscoveryInput = JSON.parse(input.value)
+  // 强制类型转换
+  const data: RagNewInternalSchemaToolDiscoveryInput = JSON.parse(input.value);
 
-
-    api.Tool.apiV1ToolsSyntaxPost(data).then((res) => {
-        error.value = false
-        errorReason.value = ""
-    }).catch((e) => {
-        error.value = true
-        errorReason.value = e.response.data.error
+  api.Tool.apiV1ToolsSyntaxPost(data)
+    .then(() => {
+      error.value = false;
+      errorReason.value = "";
     })
+    .catch((e) => {
+      error.value = true;
+      errorReason.value = e.response.data.error;
+    });
 }
-</script>
\ No newline at end of file
+</script>