Merge branch 'main' of https://github.com/dataease/SQLBot

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/chat/RecommendQuestion.vue

@@ -68,7 +68,7 @@ function clickQuestion(question: string): void {
   .question-grid {
     display: grid;
     grid-gap: 12px;
-    grid-template-columns: repeat(2, 50%);
+    grid-template-columns: repeat(2, calc(50% - 6px));
   }
 
   .question {

frontend/src/views/chat/chat-block/UserChat.vue

@@ -45,6 +45,7 @@ function clickPredict() {
 
   .prefix-title {
     color: rgba(28, 186, 144, 1);
+    white-space: nowrap;
   }
 }
 </style>

frontend/src/views/chat/index.vue

@@ -116,7 +116,7 @@
                     @finish="onChartAnswerFinish"
                     @error="onChartAnswerError"
                   >
-                    <ChartBlock :message="message" />
+                    <ChartBlock style="margin-top: 12px" :message="message" />
                     <div
                       v-if="message.record?.error && message.record?.error?.trim().length > 0"
                       class="error-container"
@@ -220,7 +220,7 @@
                     @finish="onPredictAnswerFinish"
                     @error="onPredictAnswerError"
                   >
-                    <ChartBlock :message="message" is-predict />
+                    <ChartBlock style="margin-top: 12px" :message="message" is-predict />
                     <div
                       v-if="message.record?.error && message.record?.error?.trim().length > 0"
                       class="error-container"

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>