feat: Add a separate chat page

Author: fit2cloud-chenyw

frontend/src/components/layout/LayoutDsl.vue

@@ -11,7 +11,12 @@ import icon_side_expand_outlined from '@/assets/svg/icon_side-expand_outlined.sv
 import { useRoute, useRouter } from 'vue-router'
 import { useAppearanceStoreWithOut } from '@/stores/appearance'
 import { useEmitt } from '@/utils/useEmitt'
+import { isMobile } from '@/utils/utils'
+import { onBeforeMount } from 'vue'
 
+const isPhone = computed(() => {
+  return isMobile()
+})
 const router = useRouter()
 const collapse = ref(false)
 const collapseCopy = ref(false)
@@ -53,6 +58,12 @@ const route = useRoute()
 const showSysmenu = computed(() => {
   return route.path.includes('/system')
 })
+onBeforeMount(() => {
+  if (isPhone.value) {
+    collapse.value = true
+    collapseCopy.value = true
+  }
+})
 </script>
 
 <template>

frontend/src/router/index.ts

@@ -26,6 +26,8 @@ import Permission from '@/views/system/permission/index.vue'
 import User from '@/views/system/user/User.vue'
 import Workspace from '@/views/system/workspace/index.vue'
 import Page401 from '@/views/error/index.vue'
+import ChatPreview from '@/views/chat/preview.vue'
+
 import { i18n } from '@/i18n'
 import { watchRouter } from './watch'
 
@@ -245,6 +247,11 @@ export const routes = [
     name: 'assistantTest',
     component: assistantTest,
   },
+  {
+    path: '/chatPreview',
+    name: 'chatPreview',
+    component: ChatPreview,
+  },
   {
     path: '/admin-login',
     name: 'admin-login',

frontend/src/views/chat/index.vue

@@ -1014,7 +1014,7 @@ function stop(func?: (...p: any[]) => void, ...param: any[]) {
   }
 }
 const showFloatPopover = () => {
-  if (!isCompletePage.value && !floatPopoverVisible.value) {
+  if ((!isCompletePage.value || isPhone.value) && !floatPopoverVisible.value) {
     floatPopoverVisible.value = true
   }
 }
@@ -1324,6 +1324,7 @@ onMounted(() => {
     max-width: 800px;
     display: flex;
     gap: 16px;
+    padding: 0 16px;
     align-items: center;
     flex-direction: column;
 

frontend/src/views/chat/preview.vue

@@ -0,0 +1,58 @@
+<template>
+  <div v-loading="divLoading" class="sqlbot-embedded-assistant-page">
+    <chat-component
+      :welcome="customSet.welcome"
+      :welcome-desc="customSet.welcome_desc"
+      :logo-assistant="logo"
+      :page-embedded="true"
+      :app-name="customSet.name"
+    />
+  </div>
+</template>
+<script setup lang="ts">
+import ChatComponent from '@/views/chat/index.vue'
+import { nextTick, onMounted, reactive, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+//const chatRef = ref()
+
+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 divLoading = ref(true)
+
+onMounted(() => {
+  nextTick(() => {
+    setTimeout(() => {
+      divLoading.value = false
+    }, 1500)
+  })
+})
+</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>