perf: 优化chat初始化socket

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;

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;
-      }
     }
   }
 }

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'),

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()
       })
     }

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>

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>