update anonymous response waiting feature

app/src/assets/script/conversation.ts

@@ -27,17 +27,21 @@ export class Conversation {
   public async send(content: string): Promise<void> {
     this.state.value = true;
     this.addMessageFromUser(content);
-    const res = await axios.post("https://api.fystart.cn/gpt", {
+    try {
-      "id": this.id,
+      const res = await axios.post("https://api.fystart.cn/gpt", {
-      "message": content,
+        "id": this.id,
-    }, {
+        "message": content,
-      headers: { "Content-Type": "application/json" },
+      }, {
-      method: "POST",
+        headers: { "Content-Type": "application/json" },
-    });
+        method: "POST",
-    if (res.data.status === true) {
+      });
-      this.addMessageFromAI(res.data.message);
+      if (res.data.status === true) {
+        this.addMessageFromAI(res.data.message);
+      }
+    } catch (e) {
+      console.debug(e);
+      this.addMessageFromAI("网络错误，请稍后再试");
     }
-    this.state.value = false;
   }
 
   public addMessage(message: Message): void {
@@ -74,6 +78,7 @@ export class Conversation {
       cursor++;
       this.refresh();
       if (cursor > content.length) {
+        this.state.value = false;
         clearInterval(interval);
       }
     }, 35);

app/src/assets/style/anim.css

@@ -30,3 +30,12 @@
         transform: translateY(0);
     }
 }
+
+@keyframes RotateAnimation {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(359deg);
+    }
+}

app/src/components/icons/loading.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const props = defineProps<{
+  loading: boolean,
+}>();
+</script>
+<template>
+  <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" :class="{'loading': props.loading}">
+    <path fill="currentColor" d="M784.512 230.272v-50.56a32 32 0 1 1 64 0v149.056a32 32 0 0 1-32 32H667.52a32 32 0 1 1 0-64h92.992A320 320 0 1 0 524.8 833.152a320 320 0 0 0 320-320h64a384 384 0 0 1-384 384 384 384 0 0 1-384-384 384 384 0 0 1 643.712-282.88z"></path>
+  </svg>
+</template>
+<style scoped>
+@import "/src/assets/style/anim.css";
+.loading {
+  animation: RotateAnimation 1s linear infinite;
+}
+</style>

app/src/views/HomeView.vue

@@ -5,6 +5,7 @@ import Openai from "../components/icons/openai.vue";
 import { MdPreview } from 'md-editor-v3';
 import {Conversation} from "../assets/script/conversation";
 import {nextTick, onMounted, ref} from "vue";
+import Loading from "../components/icons/loading.vue";
 
 const conversation = new Conversation(1, refreshScrollbar);
 const state = conversation.getState(), length = conversation.getLength(), messages = conversation.getMessages();
@@ -14,7 +15,7 @@ const chatEl = ref<HTMLElement | undefined>();
 
 async function send() {
   let val = input.value.trim();
-  if (val) {
+  if (val && !state.value) {
     input.value = "";
     await conversation.send(val);
   }
@@ -67,7 +68,10 @@ onMounted(() => {
   <div class="input-wrapper">
     <div class="input">
       <input type="text" placeholder="写点什么" v-model="input" ref="inputEl" />
-      <div class="button" @click="send"><post /></div>
+      <div class="button" @click="send">
+        <loading v-if="state" :loading="state" />
+        <post v-else />
+      </div>
     </div>
   </div>
 </template>

main.go

@@ -3,6 +3,7 @@ package main
 import (
 	"chat/api"
 	"chat/connection"
+	"chat/middleware"
 	"github.com/gin-gonic/gin"
 	"github.com/spf13/viper"
 )
@@ -16,6 +17,7 @@ func main() {
 
 	app := gin.Default()
 	{
+		app.Use(middleware.CORSMiddleware())
 		app.POST("/api/anonymous", api.AnonymousAPI)
 	}
 	if err := app.Run(":" + viper.GetString("server.port")); err != nil {