perf: Assistant message

Author: fit2cloud-chenyw

frontend/public/assistant.js

@@ -40,7 +40,7 @@
   const getChatContainerHtml = (data) => {
     return `
 <div id="sqlbot-assistant-chat-container">
-  <iframe id="sqlbot-assistant-chat" allow="microphone" src="${data.domain_url}/#/assistant?id=${data.id}"></iframe>
+  <iframe id="sqlbot-assistant-chat-iframe-${data.id}" allow="microphone" src="${data.domain_url}/#/assistant?id=${data.id}"></iframe>
 <div class="sqlbot-assistant-operate">
   <div class="sqlbot-assistant-closeviewport sqlbot-assistant-viewportnone">
     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
@@ -311,7 +311,7 @@
     #sqlbot-assistant #sqlbot-assistant-chat-container .sqlbot-assistant-viewportnone{
       display:none;
     }
-    #sqlbot-assistant #sqlbot-assistant-chat-container #sqlbot-assistant-chat{
+    #sqlbot-assistant #sqlbot-assistant-chat-container #sqlbot-assistant-chat-iframe-${data.id}{
      height:100%;
      width:100%;
      border: none;
@@ -334,7 +334,79 @@
     const url = new URL(src)
     return url.searchParams.get(key)
   }
+  function parsrCertificate(config) {
+    const certificateList = config.certificate
+    if (!certificateList?.length) {
+      return null
+    }
+    const list = certificateList.map((item) => formatCertificate(item)).filter((item) => !!item)
+    return JSON.stringify(list)
+  }
+  function isEmpty(obj) {
+    return obj == null || typeof obj == 'undefined'
+  }
+  function formatCertificate(item) {
+    const { type, source, target, target_key, target_val } = item
+    let source_val = null
+    if (type.toLocaleLowerCase() == 'localstorage') {
+      source_val = localStorage.getItem(source)
+    }
+    if (type.toLocaleLowerCase() == 'sessionstorage') {
+      source_val = sessionStorage.getItem(source)
+    }
+    if (type.toLocaleLowerCase() == 'cookie') {
+      source_val = getCookie(source)
+    }
+    if (type.toLocaleLowerCase() == 'custom') {
+      source_val = source
+    }
+    if (isEmpty(source_val)) {
+      return null
+    }
+    return {
+      target,
+      key: target_key || source,
+      value: (target_val && eval(target_val)) || source_val,
+    }
+  }
+  function getCookie(key) {
+    if (!key || !document.cookie) {
+      return null
+    }
+    const cookies = document.cookie.split(';')
+    for (let i = 0; i < cookies.length; i++) {
+      const cookie = cookies[i].trim()
 
+      if (cookie.startsWith(key + '=')) {
+        return decodeURIComponent(cookie.substring(key.length + 1))
+      }
+    }
+    return null
+  }
+  function registerMessageEvent(id, data) {
+    const iframe = document.getElementById(`sqlbot-assistant-chat-iframe-${id}`)
+    const url = iframe.src
+    const eventName = 'sqlbot_assistant_event'
+    window.addEventListener('message', (event) => {
+      if (event.data?.eventName === eventName) {
+        if (event.data?.messageId !== id) {
+          return
+        }
+        if (event.data?.busi == 'ready' && event.data?.ready) {
+          const certificate = parsrCertificate(data)
+          console.log(certificate)
+          params = {
+            busi: 'certificate',
+            certificate,
+            eventName,
+            messageId: id,
+          }
+          const contentWindow = iframe.contentWindow
+          contentWindow.postMessage(params, url)
+        }
+      }
+    })
+  }
   function loadScript(src, id) {
     const domain_url = getDomain(src)
     let url = `${domain_url}/api/v1/system/assistant/info/${id}`
@@ -353,6 +425,10 @@
           tempData = Object.assign(tempData, config)
         }
         initsqlbot_assistant(tempData)
+        if (data.type == 1) {
+          registerMessageEvent(id, tempData)
+          // postMessage the certificate to iframe
+        }
       })
   }
   function getDomain(src) {

frontend/src/stores/assistant.ts

@@ -9,6 +9,8 @@ interface AssistantState {
   token: string
   assistant: boolean
   flag: number
+  type: number
+  certificate: string
 }
 
 export const AssistantStore = defineStore('assistant', {
@@ -17,9 +19,14 @@ export const AssistantStore = defineStore('assistant', {
       token: '',
       assistant: false,
       flag: 0,
+      type: 0,
+      certificate: '',
     }
   },
   getters: {
+    getCertificate(): string {
+      return this.certificate
+    },
     getToken(): string {
       return this.token
     },
@@ -29,8 +36,17 @@ export const AssistantStore = defineStore('assistant', {
     getFlag(): number {
       return this.flag
     },
+    getType(): number {
+      return this.type
+    },
   },
   actions: {
+    setCertificate(certificate: string) {
+      this.certificate = certificate
+    },
+    setType(type: number) {
+      this.type = type
+    },
     setToken(token: string) {
       this.token = token
     },

frontend/src/views/embedded/assistant.vue

@@ -57,7 +57,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { onBeforeMount, ref } from 'vue'
+import { onBeforeMount, onBeforeUnmount, ref } from 'vue'
 import ChatComponent from '@/views/chat/index.vue'
 import AssistantGif from '@/assets/img/assistant.gif'
 import history from '@/assets/svg/chart/history.svg'
@@ -101,6 +101,21 @@ const validator = ref({
   token: '',
 })
 const loading = ref(true)
+const eventName = 'sqlbot_assistant_event'
+const communicationCb = async (event: any) => {
+  if (event.data?.eventName === eventName) {
+    if (event.data?.messageId !== route.query.id) {
+      return
+    }
+    if (event.data?.busi == 'certificate') {
+      const certificate = event.data['certificate']
+      console.log(certificate)
+      assistantStore.setType(1)
+      assistantStore.setCertificate(certificate)
+      // store certificate to pinia
+    }
+  }
+}
 onBeforeMount(async () => {
   const assistantId = route.query.id
   const online = route.query.online
@@ -116,6 +131,19 @@ onBeforeMount(async () => {
   assistantStore.setToken(validator.value.token)
   assistantStore.setAssistant(true)
   loading.value = false
+
+  window.addEventListener('message', communicationCb)
+  const readyData = {
+    eventName: 'sqlbot_assistant_event',
+    busi: 'ready',
+    ready: true,
+    messageId: assistantId,
+  }
+  window.parent.postMessage(readyData, '*')
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('message', communicationCb)
 })
 </script>