perf: Page Embedding Logic Optimization

Author: fit2cloud-chenyw

frontend/src/stores/assistant.ts

@@ -19,6 +19,7 @@ interface AssistantState {
   type: number
   certificate: string
   online: boolean
+  pageEmbedded?: boolean
   requestPromiseMap: Map<string, PendingRequest>
 }
 
@@ -32,6 +33,7 @@ export const AssistantStore = defineStore('assistant', {
       type: 0,
       certificate: '',
       online: false,
+      pageEmbedded: false,
       requestPromiseMap: new Map<string, PendingRequest>(),
     }
   },
@@ -57,13 +59,16 @@ export const AssistantStore = defineStore('assistant', {
     getOnline(): boolean {
       return this.online
     },
+    getPageEmbedded(): boolean {
+      return this.pageEmbedded || false
+    },
     getEmbedded(): boolean {
       return this.assistant && this.type === 4
     },
   },
   actions: {
     refreshCertificate<T>() {
-      const timeout = 5000
+      const timeout = 30000
       return new Promise((resolve, reject) => {
         const timeoutId = setTimeout(() => {
           this.requestPromiseMap.delete(this.id)
@@ -82,7 +87,7 @@ export const AssistantStore = defineStore('assistant', {
           },
         })
         const readyData = {
-          eventName: 'sqlbot_assistant_event',
+          eventName: this.pageEmbedded ? 'sqlbot_embedded_event' : 'sqlbot_assistant_event',
           busi: 'ready',
           ready: true,
           messageId: this.id,
@@ -119,6 +124,9 @@ export const AssistantStore = defineStore('assistant', {
         wsCache.set(flagKey, flag)
       }
     },
+    setPageEmbedded(embedded?: boolean) {
+      this.pageEmbedded = !!embedded
+    },
     setOnline(online: boolean) {
       this.online = !!online
     },

frontend/src/views/chat/index.vue

@@ -1,6 +1,9 @@
 <template>
   <el-container class="chat-container no-padding">
-    <el-aside v-if="isCompletePage && chatListSideBarShow" class="chat-container-left">
+    <el-aside
+      v-if="(isCompletePage || pageEmbedded) && chatListSideBarShow"
+      class="chat-container-left"
+    >
       <ChatListContainer
         v-model:chat-list="chatList"
         v-model:current-chat-id="currentChatId"
@@ -16,9 +19,9 @@
       />
     </el-aside>
     <div
-      v-if="!isCompletePage || !chatListSideBarShow"
+      v-if="(!isCompletePage && !pageEmbedded) || !chatListSideBarShow"
       class="hidden-sidebar-btn"
-      :class="{ 'assistant-popover-sidebar': !isCompletePage }"
+      :class="{ 'assistant-popover-sidebar': !isCompletePage && !pageEmbedded }"
     >
       <el-popover
         :width="280"
@@ -86,8 +89,8 @@
       <el-main
         class="chat-record-list"
         :class="{
-          'hide-sidebar': isCompletePage && !chatListSideBarShow,
-          'assistant-chat-main': !isCompletePage,
+          'hide-sidebar': (isCompletePage || pageEmbedded) && !chatListSideBarShow,
+          'assistant-chat-main': !isCompletePage && !pageEmbedded,
         }"
       >
         <div v-if="computedMessages.length == 0 && !loading" class="welcome-content-block">
@@ -392,6 +395,7 @@ const props = defineProps<{
   welcomeDesc?: string
   logoAssistant?: string
   welcome?: string
+  pageEmbedded?: boolean
 }>()
 const floatPopoverRef = ref()
 const floatPopoverVisible = ref(false)
@@ -588,7 +592,7 @@ function onChatRenamed(chat: Chat) {
 
 const chatListSideBarShow = ref<boolean>(true)
 function hideSideBar() {
-  if (!isCompletePage.value) {
+  if (!isCompletePage.value && !props.pageEmbedded) {
     floatPopoverVisible.value = false
     return
   }
@@ -894,7 +898,7 @@ const showFloatPopover = () => {
   }
 }
 const assistantPrepareInit = () => {
-  if (isCompletePage.value) {
+  if (isCompletePage.value || props.pageEmbedded) {
     return
   }
   Object.assign(defaultFloatPopoverStyle.value, {

frontend/src/views/embedded/page.vue

@@ -1,11 +1,12 @@
 <template>
-  <div class="sqlbot--embedded-page">
+  <div :class="dynamicType === 4 ? 'sqlbot--embedded-page' : 'sqlbot-embedded-assistant-page'">
     <chat-component
       v-if="!loading"
       ref="chatRef"
       :welcome="customSet.welcome"
       :welcome-desc="customSet.welcome_desc"
       :logo-assistant="logo"
+      :page-embedded="true"
     />
   </div>
 </template>
@@ -22,8 +23,10 @@ import { setCurrentColor } from '@/utils/utils'
 const { t } = useI18n()
 const chatRef = ref()
 const assistantStore = useAssistantStore()
+assistantStore.setPageEmbedded(true)
 const route = useRoute()
 const assistantName = ref('')
+const dynamicType = ref(0)
 const customSet = reactive({
   name: '',
   welcome: t('embedded.i_am_sqlbot'),
@@ -50,7 +53,7 @@ const communicationCb = async (event: any) => {
     if (event.data?.busi == 'certificate') {
       const type = parseInt(event.data['type'])
       const certificate = event.data['certificate']
-      assistantStore.setType(type || 3)
+      assistantStore.setType(type)
       if (type === 4) {
         assistantStore.setToken(certificate)
         assistantStore.setAssistant(true)
@@ -93,7 +96,9 @@ const registerReady = (assistantId: any) => {
 }
 
 const setPageCustomColor = (val: any) => {
-  const ele = document.querySelector('.sqlbot--embedded-page') as HTMLElement
+  const selector =
+    dynamicType.value === 4 ? '.sqlbot--embedded-page' : '.sqlbot-embedded-assistant-page'
+  const ele = document.querySelector(selector) as HTMLElement
   setCurrentColor(val, ele)
 }
 
@@ -109,6 +114,7 @@ onBeforeMount(async () => {
     assistantType = parseInt(typeParam.toString())
     assistantStore.setType(assistantType)
   }
+  dynamicType.value = assistantType
   const online = route.query.online
   setFormatOnline(online)
 
@@ -168,4 +174,15 @@ onBeforeUnmount(() => {
   position: relative;
   background: #f7f8fa;
 }
+.sqlbot-embedded-assistant-page {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: #f7f8fa;
+  box-sizing: border-box;
+  overflow: auto;
+  padding-bottom: 48px;
+}
 </style>