diff --git a/frontend/src/api/embedded.ts b/frontend/src/api/embedded.ts
index 05ca09a8..5c70c721 100644
--- a/frontend/src/api/embedded.ts
+++ b/frontend/src/api/embedded.ts
@@ -12,6 +12,7 @@ export const embeddedApi = {
     request.get(`/system/embedded/${pageNum}/${pageSize}`, {
       params,
     }),
+  secret: (id: any) => request.patch(`/system/embedded/secret/${id}`),
   updateEmbedded: (data: any) => request.put('/system/embedded', data),
   addEmbedded: (data: any) => request.post('/system/embedded', data),
   deleteEmbedded: (params: any) => request.delete('/system/embedded', { data: params }),
diff --git a/frontend/src/assets/embedded/Card.png b/frontend/src/assets/embedded/Card.png
new file mode 100644
index 00000000..04eb68ff
Binary files /dev/null and b/frontend/src/assets/embedded/Card.png differ
diff --git a/frontend/src/assets/svg/tool-bar.svg b/frontend/src/assets/svg/tool-bar.svg
new file mode 100644
index 00000000..e0462b3d
--- /dev/null
+++ b/frontend/src/assets/svg/tool-bar.svg
@@ -0,0 +1,67 @@
+<svg width="136" height="125" viewBox="0 0 136 125" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_3119_44444)">
+<rect x="13" y="25" width="115" height="75" rx="2" fill="white" fill-opacity="0.8" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter1_d_3119_44444)">
+<rect x="8" y="20" width="115" height="75" rx="2" fill="white"/>
+</g>
+<path d="M8 21C8 20.4477 8.44772 20 9 20H122C122.552 20 123 20.4477 123 21V32C123 32.5523 122.552 33 122 33H9C8.44772 33 8 32.5523 8 32V21Z" class="icon-primary" fill-opacity="0.1"/>
+<rect x="97" y="36" width="22" height="55" rx="1" fill="#F5F6F7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 88.9821V90C12 90.5523 12.4477 91 13 91H14.0125V90H13L13 88.9821H12ZM12 86.9464H13V84.9107H12V86.9464ZM12 82.875H13V80.8393H12V82.875ZM12 78.8036H13V76.7679H12V78.8036ZM12 74.7321H13V72.6964H12V74.7321ZM12 70.6607H13V68.625H12V70.6607ZM12 66.5893H13V64.5536H12V66.5893ZM12 62.5179H13V60.4821H12V62.5179ZM12 58.4464H13V56.4107H12V58.4464ZM12 54.375H13V52.3393H12V54.375ZM12 50.3036H13V48.2679H12V50.3036ZM12 46.2321H13V44.1964H12V46.2321ZM12 42.0893H13V40.0536H12V42.0893ZM12 38.0179H13V37L14.0125 37V36H13C12.4477 36 12 36.4477 12 37V38.0179ZM16.0375 36V37H18.0625V36H16.0375ZM20.0875 36V37H22.1125V36H20.0875ZM24.1375 36V37H26.1625V36H24.1375ZM28.1875 36V37H30.2125V36H28.1875ZM32.2375 36V37H34.2625V36H32.2375ZM36.2875 36V37H38.3125V36H36.2875ZM40.3375 36V37H42.3625V36H40.3375ZM44.3875 36V37H46.4125V36H44.3875ZM48.4375 36V37H50.4625V36H48.4375ZM52.4875 36V37H54.5125V36H52.4875ZM56.5375 36V37H58.5625V36H56.5375ZM60.5875 36V37H62.6125V36H60.5875ZM64.6375 36V37H66.6625V36H64.6375ZM68.6875 36V37H70.7125V36H68.6875ZM72.7375 36V37H74.7625V36H72.7375ZM76.7875 36V37H78.8125V36H76.7875ZM80.8375 36V37H82.8625V36H80.8375ZM84.8875 36V37H86.9125V36H84.8875ZM88.9375 36V37H90.9625V36H88.9375ZM92.9875 36V37H94V38.0179H95V37C95 36.4477 94.5523 36 94 36H92.9875ZM95 40.0536H94V42.0893H95V40.0536ZM95 44.1964H94V46.2321H95V44.1964ZM95 48.2679H94V50.3036H95V48.2679ZM95 52.3393H94V54.375H95V52.3393ZM95 56.4107H94V58.4464H95V56.4107ZM95 60.4821H94V62.5179H95V60.4821ZM95 64.5536H94V66.5893H95V64.5536ZM95 68.625H94V70.6607H95V68.625ZM95 72.6964H94V74.7321H95V72.6964ZM95 76.7679H94V78.8036H95V76.7679ZM95 80.8393H94V82.875H95V80.8393ZM95 84.9107H94V86.9464H95V84.9107ZM95 88.9821H94V90H92.9875V91H94C94.5523 91 95 90.5523 95 90V88.9821ZM90.9625 91V90H88.9375V91H90.9625ZM86.9125 91V90H84.8875V91H86.9125ZM82.8625 91V90H80.8375V91H82.8625ZM78.8125 91V90H76.7875V91H78.8125ZM74.7625 91V90H72.7375V91H74.7625ZM70.7125 91V90H68.6875V91H70.7125ZM66.6625 91V90H64.6375V91H66.6625ZM62.6125 91V90H60.5875V91H62.6125ZM58.5625 91V90H56.5375V91H58.5625ZM54.5125 91V90H52.4875V91H54.5125ZM50.4625 91V90H48.4375V91H50.4625ZM46.4125 91V90H44.3875V91H46.4125ZM42.3625 91V90H40.3375V91H42.3625ZM38.3125 91V90H36.2875V91H38.3125ZM34.2625 91V90H32.2375V91H34.2625ZM30.2125 91V90H28.1875V91H30.2125ZM26.1625 91V90H24.1375V91H26.1625ZM22.1125 91V90H20.0875V91H22.1125ZM18.0625 91V90H16.0375V91H18.0625Z" fill="#DEE0E3"/>
+<path d="M50.8198 63.7429H26.8831C26.5517 63.7429 26.2235 63.8082 25.9173 63.935C25.6111 64.0619 25.3329 64.2478 25.0986 64.4821C24.8642 64.7165 24.6783 64.9947 24.5515 65.3009C24.4247 65.6071 24.3594 65.9353 24.3594 66.2667V77.762C24.3594 78.4314 24.6253 79.0733 25.0986 79.5466C25.5719 80.0199 26.2138 80.2858 26.8831 80.2858H50.8198C51.4891 80.2858 52.131 80.0199 52.6043 79.5466C53.0776 79.0733 53.3435 78.4314 53.3435 77.762V66.2667C53.3435 65.9353 53.2783 65.6071 53.1514 65.3009C53.0246 64.9947 52.8387 64.7165 52.6043 64.4821C52.37 64.2478 52.0918 64.0619 51.7856 63.935C51.4794 63.8082 51.1512 63.7429 50.8198 63.7429Z" class="icon-primary"/>
+<path d="M24 47C24 46.4477 24.4477 46 25 46H81.8768C82.4291 46 82.8768 46.4477 82.8768 47V47.563C82.8768 48.1153 82.4291 48.563 81.8768 48.563H25C24.4477 48.563 24 48.1153 24 47.563V47Z" class="icon-primary"/>
+<path d="M24 52.1429C24 51.5906 24.4477 51.1429 25 51.1429H81.8768C82.4291 51.1429 82.8768 51.5906 82.8768 52.1429V52.7059C82.8768 53.2582 82.4291 53.7059 81.8768 53.7059H25C24.4477 53.7059 24 53.2582 24 52.7059V52.1429Z" class="icon-primary"/>
+<path d="M24 57.2856C24 56.7334 24.4477 56.2856 25 56.2856H50.4286C50.9809 56.2856 51.4286 56.7334 51.4286 57.2856V57.8571C51.4286 58.4094 50.9809 58.8571 50.4286 58.8571H25C24.4477 58.8571 24 58.4094 24 57.8571V57.2856Z" class="icon-primary_60"/>
+<path d="M35.7535 68.4558H28.1326C27.8177 68.4558 27.5156 68.5809 27.2929 68.8036C27.0702 69.0263 26.9451 69.3284 26.9451 69.6433V76.0891C26.9451 76.404 27.0702 76.7061 27.2929 76.9288C27.5156 77.1515 27.8177 77.2766 28.1326 77.2766H35.7535C36.0684 77.2766 36.3705 77.1515 36.5932 76.9288C36.8159 76.7061 36.941 76.404 36.941 76.0891V69.6433C36.941 69.3284 36.8159 69.0263 36.5932 68.8036C36.3705 68.5809 36.0684 68.4558 35.7535 68.4558Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M37.0837 71.8593L32.3932 75.8776L29.9251 74.7629L28.1508 77.3399L27.6848 77.019L29.7272 74.0528L32.2983 75.214L36.7157 71.4297L37.0837 71.8593Z" class="icon-primary"/>
+<path d="M51.6398 69.0918H40.1155V68.5261H51.6398V69.0918Z" fill="white"/>
+<path d="M45.2911 71.4442H40.1155V70.8785H45.2911V71.4442Z" fill="white"/>
+<path d="M51.6398 73.9143H40.1155V73.3486H51.6398V73.9143Z" fill="white"/>
+<path d="M49.5249 76.0312H40.1155V75.4655H49.5249V76.0312Z" fill="white"/>
+<path d="M31.8976 72.5636C32.2049 72.5636 32.4996 72.4415 32.7169 72.2242C32.9342 72.0069 33.0563 71.7122 33.0563 71.405C33.0563 71.0977 32.9342 70.803 32.7169 70.5857C32.4996 70.3684 32.2049 70.2463 31.8976 70.2463C31.5903 70.2463 31.2956 70.3684 31.0784 70.5857C30.8611 70.803 30.739 71.0977 30.739 71.405C30.739 71.7122 30.8611 72.0069 31.0784 72.2242C31.2956 72.4415 31.5903 72.5636 31.8976 72.5636Z" class="icon-primary"/>
+<path d="M71.71 79.9976C75.9603 79.9976 79.4364 76.683 79.6946 72.4976C79.7116 72.222 79.4861 71.9976 79.21 71.9976C76.71 71.9976 74.21 71.9976 71.71 71.9976C71.71 69.0427 71.71 66.5425 71.71 64.4972C71.71 64.221 71.4855 63.9959 71.2099 64.0129C67.0245 64.2711 63.71 67.7472 63.71 71.9976C63.71 76.4158 67.2917 79.9976 71.71 79.9976Z" class="icon-primary"/>
+<path d="M74.1902 70.2827C73.7671 70.2827 73.4241 69.9397 73.4241 69.5166V63.9935C73.4241 63.6893 73.6873 63.4502 73.9869 63.5026C77.1529 64.0563 79.6505 66.5539 80.2042 69.7199C80.2566 70.0195 80.0175 70.2827 79.7133 70.2827H74.1902Z" class="icon-primary_60"/>
+<rect x="54" y="24" width="8" height="5" rx="1" class="icon-primary"/>
+<rect x="64" y="24" width="8" height="5" rx="1" class="icon-primary_60"/>
+<rect x="74" y="24" width="8" height="5" rx="1" class="icon-primary_60"/>
+<defs>
+<filter id="filter0_d_3119_44444" x="5" y="21" width="131" height="91" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="4"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.121569 0 0 0 0 0.137255 0 0 0 0 0.160784 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3119_44444"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3119_44444" result="shape"/>
+</filter>
+<filter id="filter1_d_3119_44444" x="0" y="16" width="131" height="91" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="4"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.121569 0 0 0 0 0.137255 0 0 0 0 0.160784 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3119_44444"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3119_44444" result="shape"/>
+</filter>
+<filter id="filter2_d_3119_44444" x="57" y="26.75" width="17.1487" height="18.3621" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3119_44444"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3119_44444" result="shape"/>
+</filter>
+<filter id="filter3_d_3119_44444" x="55.4375" y="24.75" width="21.1448" height="22.7092" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3119_44444"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3119_44444" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
index a72014ee..931630e5 100644
--- a/frontend/src/i18n/en.json
+++ b/frontend/src/i18n/en.json
@@ -6,6 +6,8 @@
     "AI Model Configuration": "AI Model Configuration"
   },
   "professional": {
+    "code_for_debugging": "Copy the following code for debugging",
+    "full_screen_mode": "Full screen mode",
     "editing_terminology": "Editing Terminology",
     "professional_terminology": "Professional Terminology",
     "term_name": "Term Name",
@@ -644,4 +646,4 @@
     "setting_successfully": "Setting Successfully",
     "customize_theme_color": "Customize theme color"
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/i18n/zh-CN.json b/frontend/src/i18n/zh-CN.json
index 0dfae875..87e6913a 100644
--- a/frontend/src/i18n/zh-CN.json
+++ b/frontend/src/i18n/zh-CN.json
@@ -6,6 +6,8 @@
     "AI Model Configuration": "模型配置"
   },
   "professional": {
+    "code_for_debugging": "复制以下代码进行调试",
+    "full_screen_mode": "全屏模式",
     "editing_terminology": "编辑术语",
     "professional_terminology": "专业术语",
     "term_name": "术语名称",
@@ -644,4 +646,4 @@
     "setting_successfully": "设置成功",
     "customize_theme_color": "自定义主题色"
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/views/dashboard/canvas/CanvasCore.vue b/frontend/src/views/dashboard/canvas/CanvasCore.vue
index dea6f0a0..89f2acee 100644
--- a/frontend/src/views/dashboard/canvas/CanvasCore.vue
+++ b/frontend/src/views/dashboard/canvas/CanvasCore.vue
@@ -8,7 +8,7 @@ import { findComponent } from '@/views/dashboard/components/component-list.ts'
 import { storeToRefs } from 'pinia'
 import { useEmitt, useEmittLazy } from '@/utils/useEmitt.ts'
 import html2canvas from 'html2canvas'
-import EmptyBackground from '@/views/dashboard/common/EmptyBackground.vue'
+import EmptyBackground from '@/views/dashboard/common/EmptyBackgroundSvgMain.vue'
 import { useI18n } from 'vue-i18n'
 import { isMainCanvas } from '@/views/dashboard/utils/canvasUtils.ts'
 
@@ -1209,7 +1209,6 @@ defineExpose({
     <EmptyBackground
       v-if="!canvasComponentData.length && isMainCanvas(canvasId)"
       :description="t('dashboard.add_component_tips')"
-      img-type="addComponent"
     />
     <template v-if="renderOk">
       <CanvasShape
diff --git a/frontend/src/views/dashboard/common/EmptyBackgroundSvgMain.vue b/frontend/src/views/dashboard/common/EmptyBackgroundSvgMain.vue
new file mode 100644
index 00000000..53b293cd
--- /dev/null
+++ b/frontend/src/views/dashboard/common/EmptyBackgroundSvgMain.vue
@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import nothingSelectDashboard from '@/assets/svg/tool-bar.svg'
+defineProps({
+  imageSize: {
+    type: Number,
+    default: 125,
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div class="ed-empty empty-info">
+    <div class="ed-empty__image" style="width: 125px">
+      <el-icon size="125" class="icon-primary">
+        <nothingSelectDashboard></nothingSelectDashboard>
+      </el-icon>
+    </div>
+    <div class="ed-empty__description">
+      <p>{{ description }}</p>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.empty-info {
+  height: 90%;
+  padding-top: 0;
+}
+:deep(.ed-empty__description) {
+  margin-top: 8px;
+
+  color: var(--N600, #646a73);
+  text-align: center;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+}
+</style>
diff --git a/frontend/src/views/system/embedded/Page.vue b/frontend/src/views/system/embedded/Page.vue
index a1252bbc..b972e1d8 100644
--- a/frontend/src/views/system/embedded/Page.vue
+++ b/frontend/src/views/system/embedded/Page.vue
@@ -168,6 +168,9 @@ const cancelRefresh = (row: any) => {
 }
 
 const refresh = (row: any) => {
+  embeddedApi.secret(row.id).then(() => {
+    ElMessage.success(t('common.update_success'))
+  })
   cancelRefresh(row)
 }
 
diff --git a/frontend/src/views/system/embedded/iframe.vue b/frontend/src/views/system/embedded/iframe.vue
index e1e87b1c..b360d82d 100644
--- a/frontend/src/views/system/embedded/iframe.vue
+++ b/frontend/src/views/system/embedded/iframe.vue
@@ -7,6 +7,7 @@ import EmptyBackground from '@/views/dashboard/common/EmptyBackground.vue'
 import icon_database_colorful from '@/assets/embedded/icon_database_colorful.png'
 import icon_web_site_colorful from '@/assets/embedded/icon_web-site_colorful.png'
 import floating_window from '@/assets/embedded/window.png'
+import full_window from '@/assets/embedded/Card.png'
 import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
 import icon_delete from '@/assets/svg/icon_delete.svg'
 import icon_copy_outlined from '@/assets/embedded/icon_copy_outlined.svg'
@@ -43,6 +44,7 @@ const urlFormRef = ref()
 const certificateFormRef = ref()
 const dialogTitle = ref('')
 const drawerTitle = ref('')
+const activeMode = ref('full')
 
 const embeddedList = ref<any[]>([])
 const systemCredentials = ['localStorage', 'custom', 'cookie', 'sessionStorage']
@@ -374,6 +376,7 @@ const saveEmbedded = () => {
 const dialogVisible = ref(false)
 const scriptElement = ref('')
 const jsCodeElement = ref('')
+const jsCodeElementFull = ref('')
 const handleEmbedded = (row: any) => {
   dialogVisible.value = true
   const { origin, pathname } = window.location
@@ -393,6 +396,19 @@ const handleEmbedded = (row: any) => {
     script.id = "sqlbot-assistant-float-script-${row.id}";
     document.head.appendChild(script);
   })()`
+
+  jsCodeElementFull.value = `(function(){
+    const script = document.createElement('script');
+    script.defer = true;
+    script.async = true;
+    script.src = "${origin + pathname}xpack_static/sqlbot-embedded-dynamic.umd.js";
+    document.head.appendChild(script);
+  })()
+  
+  sqlbot_embedded_handler.mounted('.copilot', {
+    "embeddedId": "${row.id}",
+    "online": true
+})`
 }
 const copyJsCode = () => {
   copy(jsCodeElement.value)
@@ -403,6 +419,16 @@ const copyJsCode = () => {
       ElMessage.error(t('embedded.copy_successful'))
     })
 }
+
+const copyJsCodeFull = () => {
+  copy(jsCodeElementFull.value)
+    .then(function () {
+      ElMessage.success(t('embedded.copy_successful'))
+    })
+    .catch(function () {
+      ElMessage.error(t('embedded.copy_successful'))
+    })
+}
 const copyCode = () => {
   copy(scriptElement.value)
     .then(function () {
@@ -836,37 +862,70 @@ const saveHandler = () => {
     modal-class="embed-third_party"
   >
     <div class="floating-window">
-      <div class="floating">
-        <div class="title">{{ $t('embedded.floating_window_mode') }}</div>
-        <img :src="floating_window" width="180px" height="120px" alt="" />
-      </div>
-      <div class="code">
-        <div class="copy">
-          {{ $t('embedded.code_to_embed') }}
-          <el-tooltip effect="dark" :content="t('datasource.copy')" placement="top">
-            <el-icon size="16" @click="copyCode">
-              <icon_copy_outlined></icon_copy_outlined>
-            </el-icon>
-          </el-tooltip>
+      <div class="mode">
+        <div
+          class="floating"
+          :class="activeMode === 'full' && 'active'"
+          @click="activeMode = 'full'"
+        >
+          <div class="title">{{ $t('professional.full_screen_mode') }}</div>
+          <img :src="full_window" width="180px" height="120px" alt="" />
         </div>
-
-        <div class="script">
-          {{ scriptElement }}
+        <div
+          class="floating"
+          :class="activeMode === 'floating' && 'active'"
+          @click="activeMode = 'floating'"
+        >
+          <div class="title">{{ $t('embedded.floating_window_mode') }}</div>
+          <img :src="floating_window" width="180px" height="120px" alt="" />
         </div>
       </div>
+      <div v-if="activeMode === 'floating'" class="code-bg">
+        <div class="code">
+          <div class="copy">
+            {{ $t('embedded.code_to_embed') }}
+            <el-tooltip effect="dark" :content="t('datasource.copy')" placement="top">
+              <el-icon size="16" @click="copyCode">
+                <icon_copy_outlined></icon_copy_outlined>
+              </el-icon>
+            </el-tooltip>
+          </div>
 
-      <div class="code">
-        <div class="copy">
-          {{ $t('common.or') }}
-          <el-tooltip effect="dark" :content="t('datasource.copy')" placement="top">
-            <el-icon size="16" @click="copyJsCode">
-              <icon_copy_outlined></icon_copy_outlined>
-            </el-icon>
-          </el-tooltip>
+          <div class="script">
+            {{ scriptElement }}
+          </div>
         </div>
+        <div class="line"></div>
 
-        <div class="script">
-          {{ jsCodeElement }}
+        <div class="code">
+          <div class="copy">
+            {{ $t('professional.code_for_debugging') }}
+            <el-tooltip effect="dark" :content="t('datasource.copy')" placement="top">
+              <el-icon size="16" @click="copyJsCode">
+                <icon_copy_outlined></icon_copy_outlined>
+              </el-icon>
+            </el-tooltip>
+          </div>
+
+          <div class="script">
+            {{ jsCodeElement }}
+          </div>
+        </div>
+      </div>
+      <div v-else class="code-bg">
+        <div class="code">
+          <div class="copy">
+            {{ $t('embedded.code_to_embed') }}
+            <el-tooltip effect="dark" :content="t('datasource.copy')" placement="top">
+              <el-icon size="16" @click="copyJsCodeFull">
+                <icon_copy_outlined></icon_copy_outlined>
+              </el-icon>
+            </el-tooltip>
+          </div>
+
+          <div class="script">
+            {{ jsCodeElementFull }}
+          </div>
         </div>
       </div>
     </div>
@@ -1197,25 +1256,52 @@ const saveHandler = () => {
 
 .embed-third_party {
   .floating-window {
-    border: 1px solid #dee0e3;
     width: 552px;
-    height: 431px;
-    opacity: 1;
-    border-radius: 4px;
+    .mode {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .code-bg {
+      background: #f5f6f7;
+      border-radius: 6px;
+      overflow: hidden;
+      margin-top: 16px;
+    }
 
     .floating {
       padding: 16px;
       padding-bottom: 0;
+      border-radius: 6px;
+      border: 1px solid #dee0e3;
+      cursor: pointer;
+      width: 268px;
+      height: 182px;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+
       .title {
         font-weight: 500;
         font-size: 14px;
         line-height: 22px;
-        margin-bottom: 16px;
+        margin-bottom: 8px;
       }
+
+      &.active {
+        background: var(--ed-color-primary-1a, #1cba901a);
+        border-color: var(--ed-color-primary, #1cba90);
+      }
+    }
+    .line {
+      background-color: #1f232926;
+      width: calc(100% - 32px);
+      height: 1px;
+      margin-left: 16px;
     }
 
     .code {
-      border-top: 1px solid #1f232926;
       padding: 16px;
       .copy {
         display: flex;