Add File

frontend/src/views/embedded/page.vue

@@ -0,0 +1,202 @@
+<template>
+  <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>
+<script setup lang="ts">
+import ChatComponent from '@/views/chat/index.vue'
+import { nextTick, onBeforeMount, onBeforeUnmount, reactive, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { assistantApi } from '@/api/assistant'
+import { useAssistantStore } from '@/stores/assistant'
+import { useAppearanceStoreWithOut } from '@/stores/appearance'
+import { useI18n } from 'vue-i18n'
+import { request } from '@/utils/request'
+import { setCurrentColor } from '@/utils/utils'
+
+const { t } = useI18n()
+const chatRef = ref()
+const appearanceStore = useAppearanceStoreWithOut()
+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'),
+  welcome_desc: t('embedded.data_analysis_now'),
+  theme: '#1CBA90',
+  header_font_color: '#1F2329',
+}) as { [key: string]: any }
+const logo = ref()
+const basePath = import.meta.env.VITE_API_BASE_URL
+const baseUrl = basePath + '/system/assistant/picture/'
+const validator = ref({
+  id: '',
+  valid: false,
+  id_match: false,
+  token: '',
+})
+const loading = ref(true)
+const eventName = 'sqlbot_embedded_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 type = parseInt(event.data['type'])
+      const certificate = event.data['certificate']
+      assistantStore.setType(type)
+      if (type === 4) {
+        assistantStore.setToken(certificate)
+        assistantStore.setAssistant(true)
+        loading.value = false
+        return
+      }
+      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)
+}
+
+const registerReady = (assistantId: any) => {
+  window.addEventListener('message', communicationCb)
+  const readyData = {
+    eventName: 'sqlbot_embedded_event',
+    busi: 'ready',
+    ready: true,
+    messageId: assistantId,
+  }
+  window.parent.postMessage(readyData, '*')
+}
+
+const setPageCustomColor = (val: any) => {
+  const ele = document.querySelector('body') as HTMLElement
+  setCurrentColor(val, ele)
+}
+
+onBeforeMount(async () => {
+  const assistantId = route.query.id
+  if (!assistantId) {
+    ElMessage.error('Miss embedded id, please check embedded url')
+    return
+  }
+  const typeParam = route.query.type
+  let assistantType = 2
+  if (typeParam) {
+    assistantType = parseInt(typeParam.toString())
+    assistantStore.setType(assistantType)
+  }
+  dynamicType.value = assistantType
+  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() || '')
+  if (assistantType === 4) {
+    assistantStore.setAssistant(true)
+    registerReady(assistantId)
+    return
+  }
+  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
+
+  registerReady(assistantId)
+
+  request.get(`/system/assistant/${assistantId}`).then((res) => {
+    if (res?.configuration) {
+      const rawData = JSON.parse(res?.configuration)
+      if (rawData.logo) {
+        logo.value = baseUrl + rawData.logo
+      }
+
+      for (const key in customSet) {
+        if (
+          Object.prototype.hasOwnProperty.call(customSet, key) &&
+          ![null, undefined].includes(rawData[key])
+        ) {
+          customSet[key] = rawData[key]
+        }
+      }
+
+      if (!rawData.theme) {
+        const { customColor, themeColor } = appearanceStore
+        const currentColor =
+          themeColor === 'custom' && customColor
+            ? customColor
+            : themeColor === 'blue'
+              ? '#3370ff'
+              : '#1CBA90'
+        customSet.theme = currentColor || customSet.theme
+      }
+
+      nextTick(() => {
+        setPageCustomColor(customSet.theme)
+      })
+    }
+  })
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('message', communicationCb)
+})
+</script>
+
+<style lang="less" scoped>
+.sqlbot--embedded-page {
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  background: #fff;
+}
+.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>