feat(X-Pack): Page embedding feature

frontend/src/router/watch.ts

@@ -8,7 +8,7 @@ const appearanceStore = useAppearanceStoreWithOut()
 const userStore = useUserStore()
 const { wsCache } = useCache()
 const whiteList = ['/login']
-const assistantWhiteList = ['/assistant']
+const assistantWhiteList = ['/assistant', '/embeddedPage']
 export const watchRouter = (router: any) => {
   router.beforeEach(async (to: any, from: any, next: any) => {
     await loadXpackStatic()

frontend/src/views/embedded/page.vue

@@ -1,13 +1,100 @@
 <template>
   <div class="sqlbot--embedded-page">
-    <chat-component ref="chatRef" />
+    <chat-component v-if="!loading" ref="chatRef" />
   </div>
 </template>
 <script setup lang="ts">
 import ChatComponent from '@/views/chat/index.vue'
-import { ref } from 'vue'
+import { onBeforeMount, onBeforeUnmount, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { assistantApi } from '@/api/assistant'
+import { useAssistantStore } from '@/stores/assistant'
 
 const chatRef = ref()
+const assistantStore = useAssistantStore()
+const route = useRoute()
+const assistantName = ref('')
+
+const validator = ref({
+  id: '',
+  valid: false,
+  id_match: false,
+  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']
+      assistantStore.setType(1)
+      assistantStore.setCertificate(certificate)
+      assistantStore.resolveCertificate(certificate)
+    }
+    if (event.data?.busi == 'setOnline') {
+      setFormatOnline(event.data.online)
+    }
+  }
+}
+const setFormatOnline = (text?: any) => {
+  if (text === null || typeof text === 'undefined') {
+    assistantStore.setOnline(false)
+    return
+  }
+  if (typeof text === 'boolean') {
+    assistantStore.setOnline(text)
+    return
+  }
+  if (typeof text === 'string') {
+    assistantStore.setOnline(text.toLowerCase() === 'true')
+    return
+  }
+  assistantStore.setOnline(false)
+}
+
+onBeforeMount(async () => {
+  debugger
+  const assistantId = route.query.id
+  if (!assistantId) {
+    ElMessage.error('Miss embedded id, please check embedded url')
+    return
+  }
+  const online = route.query.online
+  setFormatOnline(online)
+
+  let name = route.query.name
+  if (name) {
+    assistantName.value = decodeURIComponent(name.toString())
+  }
+  const now = Date.now()
+  assistantStore.setFlag(now)
+  assistantStore.setId(assistantId?.toString() || '')
+  const param = {
+    id: assistantId,
+    virtual: assistantStore.getFlag,
+    online,
+  }
+  validator.value = await assistantApi.validate(param)
+  assistantStore.setToken(validator.value.token)
+  assistantStore.setAssistant(true)
+  loading.value = false
+
+  window.addEventListener('message', communicationCb)
+  const readyData = {
+    eventName: 'sqlbot_embedded_event',
+    busi: 'ready',
+    ready: true,
+    messageId: assistantId,
+  }
+  window.parent.postMessage(readyData, '*')
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('message', communicationCb)
+})
 </script>
 
 <style lang="less" scoped>