From 981d2e185dc9b4d857625d24f6fe43574bc0b7f1 Mon Sep 17 00:00:00 2001
From: Zhang Minghan <zmh13054618081@dingtalk.com>
Date: Sat, 22 Jul 2023 08:51:14 +0800
Subject: [PATCH] update anonymous response waiting feature

---
 app/src/assets/script/conversation.ts | 25 +++++++++++++++----------
 app/src/assets/style/anim.css         |  9 +++++++++
 app/src/components/icons/loading.vue  | 16 ++++++++++++++++
 app/src/views/HomeView.vue            |  8 ++++++--
 main.go                               |  2 ++
 5 files changed, 48 insertions(+), 12 deletions(-)
 create mode 100644 app/src/components/icons/loading.vue

diff --git a/app/src/assets/script/conversation.ts b/app/src/assets/script/conversation.ts
index 31f656e..61286e4 100644
--- a/app/src/assets/script/conversation.ts
+++ b/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", {
-      "id": this.id,
-      "message": content,
-    }, {
-      headers: { "Content-Type": "application/json" },
-      method: "POST",
-    });
-    if (res.data.status === true) {
-      this.addMessageFromAI(res.data.message);
+    try {
+      const res = await axios.post("https://api.fystart.cn/gpt", {
+        "id": this.id,
+        "message": content,
+      }, {
+        headers: { "Content-Type": "application/json" },
+        method: "POST",
+      });
+      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);
diff --git a/app/src/assets/style/anim.css b/app/src/assets/style/anim.css
index 188629e..ac99162 100644
--- a/app/src/assets/style/anim.css
+++ b/app/src/assets/style/anim.css
@@ -30,3 +30,12 @@
         transform: translateY(0);
     }
 }
+
+@keyframes RotateAnimation {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(359deg);
+    }
+}
diff --git a/app/src/components/icons/loading.vue b/app/src/components/icons/loading.vue
new file mode 100644
index 0000000..b13aac6
--- /dev/null
+++ b/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>
diff --git a/app/src/views/HomeView.vue b/app/src/views/HomeView.vue
index 51858dc..4a3bd80 100644
--- a/app/src/views/HomeView.vue
+++ b/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>
diff --git a/main.go b/main.go
index 99f6748..5d82d6c 100644
--- a/main.go
+++ b/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 {