From 27864be41d885259a78779b410651c6c5db44628 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Chuailei000=E2=80=9D?= <2280131253@qq.com>
Date: Thu, 14 Dec 2023 19:30:53 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96chat=E5=88=9D?=
 =?UTF-8?q?=E5=A7=8B=E5=8C=96socket?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Apps/ChatAi/components/ChitChat/ChatInput.vue |  9 ++++++---
 .../ChatAi/components/ChitChat/ChatMessage.vue    |  3 ---
 .../Apps/ChatAi/components/ChitChat/index.vue     | 14 ++++++++------
 src/components/Apps/ChatAi/index.vue              | 15 +++++++++++++--
 src/components/Apps/DrawerPanel/index.vue         |  2 +-
 src/layout/components/AppMain.vue                 |  4 +++-
 6 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/src/components/Apps/ChatAi/components/ChitChat/ChatInput.vue b/src/components/Apps/ChatAi/components/ChitChat/ChatInput.vue
index 0f5f9e313..47098c816 100644
--- a/src/components/Apps/ChatAi/components/ChitChat/ChatInput.vue
+++ b/src/components/Apps/ChatAi/components/ChitChat/ChatInput.vue
@@ -3,7 +3,7 @@
     <div class="chat-action">
       <Select2
         v-model="select.value"
-        :disabled="isLoading"
+        :disabled="isLoading || isSelectDisabled"
         v-bind="select"
         @change="onSelectChange"
       />
@@ -58,7 +58,10 @@ export default {
   computed: {
     ...mapState({
       isLoading: state => state.chat.loading
-    })
+    }),
+    isSelectDisabled() {
+      return !!this.select.value
+    }
   },
   methods: {
     onKeyEnter(event) {
@@ -97,7 +100,7 @@ export default {
       .el-input__inner {
         height: 28px;
         line-height: 28px;
-        border-radius: 16px;
+        border-radius: 14px;
         border-color: transparent;
         background-color: #f7f7f8;
         font-size: 13px;
diff --git a/src/components/Apps/ChatAi/components/ChitChat/ChatMessage.vue b/src/components/Apps/ChatAi/components/ChitChat/ChatMessage.vue
index f624dbfc0..30307bcc7 100644
--- a/src/components/Apps/ChatAi/components/ChitChat/ChatMessage.vue
+++ b/src/components/Apps/ChatAi/components/ChitChat/ChatMessage.vue
@@ -180,9 +180,6 @@ export default {
         background-color: var(--menu-hover);
         border-radius: 12px 2px 12px 12px;
       }
-      .el-dropdown {
-        margin-right: 4px;
-      }
     }
   }
 }
diff --git a/src/components/Apps/ChatAi/components/ChitChat/index.vue b/src/components/Apps/ChatAi/components/ChitChat/index.vue
index 8af15a4fd..bfceb60c5 100644
--- a/src/components/Apps/ChatAi/components/ChitChat/index.vue
+++ b/src/components/Apps/ChatAi/components/ChitChat/index.vue
@@ -23,7 +23,7 @@
         size="small"
         @click="onStopHandle"
       >{{ $tc('common.Stop') }}</el-button>
-      <ChatInput @send="onSendHandle" @select-prompt="onSelectPromptHandle" />
+      <ChatInput ref="chatInput" @send="onSendHandle" @select-prompt="onSelectPromptHandle" />
     </div>
   </div>
 </template>
@@ -56,7 +56,7 @@ export default {
   data() {
     return {
       socket: {},
-      prompt: [],
+      prompt: '',
       currentConversationId: '',
       showIntroduction: false,
       introduction: [
@@ -77,14 +77,14 @@ export default {
       activeChat: state => state.chat.activeChat
     })
   },
-  mounted() {
-    this.initWebSocket()
-    this.initChatMessage()
-  },
   destroyed() {
     closeWebSocket()
   },
   methods: {
+    init() {
+      this.initWebSocket()
+      this.initChatMessage()
+    },
     initWebSocket() {
       const { NODE_ENV, VUE_APP_KAEL_HOST } = process.env || {}
       const api = '/kael/chat/system/'
@@ -96,8 +96,10 @@ export default {
       createWebSocket(url, this.onWebSocketMessage)
     },
     initChatMessage() {
+      this.prompt = ''
       this.showIntroduction = true
       this.currentConversationId = ''
+      this.$refs.chatInput.select.value = ''
       const chat = {
         message: {
           content: this.$t('common.ChatHello'),
diff --git a/src/components/Apps/ChatAi/index.vue b/src/components/Apps/ChatAi/index.vue
index 6f237de18..a28b43964 100644
--- a/src/components/Apps/ChatAi/index.vue
+++ b/src/components/Apps/ChatAi/index.vue
@@ -27,6 +27,7 @@
 import Sidebar from './components/Sidebar/index.vue'
 import Chat from './components/ChitChat/index.vue'
 import { getInputFocus } from './useChat.js'
+import { ws } from '@/utils/socket'
 
 export default {
   components: {
@@ -39,6 +40,10 @@ export default {
       default: function() {
         return this.$t('setting.ChatAI')
       }
+    },
+    drawerPanelVisible: {
+      type: Boolean,
+      default: () => false
     }
   },
   data() {
@@ -54,6 +59,13 @@ export default {
       ]
     }
   },
+  watch: {
+    drawerPanelVisible(value) {
+      if (value && !ws) {
+        this.$refs.component?.init()
+      }
+    }
+  },
   methods: {
     onClose() {
       this.$parent.show = false
@@ -61,8 +73,7 @@ export default {
     onNewChat() {
       this.active = 'chat'
       this.$nextTick(() => {
-        this.$refs.component.initWebSocket()
-        this.$refs.component.initChatMessage()
+        this.$refs.component?.init()
         getInputFocus()
       })
     }
diff --git a/src/components/Apps/DrawerPanel/index.vue b/src/components/Apps/DrawerPanel/index.vue
index af52722e2..8eb6a632d 100644
--- a/src/components/Apps/DrawerPanel/index.vue
+++ b/src/components/Apps/DrawerPanel/index.vue
@@ -7,7 +7,7 @@
         <img v-else :src="icon" alt="">
       </div>
       <div class="drawer-panel-item">
-        <slot />
+        <slot :drawer-panel-visible="show" />
       </div>
     </div>
   </div>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index b93e98d76..44872c9ed 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -6,7 +6,9 @@
       </keep-alive>
     </transition>
     <DrawerPanel v-if="chatAiEnabled" :icon="robotUrl" :modal="false" @toggle="onToggle">
-      <ChatGPT />
+      <template scope="panelData">
+        <ChatGPT :drawer-panel-visible="panelData.drawerPanelVisible" />
+      </template>
     </DrawerPanel>
   </section>
 </template>