diff --git a/ui/src/assets/icon_robot.svg b/ui/src/assets/icon_robot.svg
new file mode 100644
index 000000000..7f4369b02
--- /dev/null
+++ b/ui/src/assets/icon_robot.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.33333 1.33337H6.66667V3.33337H7.33333V4.66671H3.66667C2.93029 4.66671 2.33333 5.26366 2.33333 6.00004V13.3334C2.33333 14.0698 2.93029 14.6667 3.66667 14.6667H12.3333C13.0697 14.6667 13.6667 14.0698 13.6667 13.3334V6.00004C13.6667 5.26366 13.0697 4.66671 12.3333 4.66671H8.66667V3.33337H9.33333V1.33337ZM4.66667 8.66671H6.66667V10.6667H4.66667V8.66671ZM11.3333 8.66671V10.6667H9.33333V8.66671H11.3333Z" fill="white"/>
+<path d="M1.33333 8.00004H0V11.3334H1.33333V8.00004Z" fill="white"/>
+<path d="M14.6667 8.00004H16V11.3334H14.6667V8.00004Z" fill="white"/>
+</svg>
diff --git a/ui/src/components/ai-dialog/index.vue b/ui/src/components/ai-dialog/index.vue
index 9a9d0fa36..2dbdacf64 100644
--- a/ui/src/components/ai-dialog/index.vue
+++ b/ui/src/components/ai-dialog/index.vue
@@ -1,20 +1,138 @@
 <template>
-  <div class="flex">
-    <AppAvatar>
-      <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
-    </AppAvatar>
-    <div class="ml-8 w-full">
-      <el-card shadow="always"> XXXXXXXXX </el-card>
-      <el-card shadow="always" class="mt-12"> XXXXXXXXX </el-card>
+  <div class="ai-dialog">
+    <el-scrollbar>
+      <div class="ai-dialog__content">
+        <div class="avatar">
+          <AppAvatar class="avatar-gradient">
+            <img src="@/assets/icon_robot.svg" style="width: 54%" alt="" />
+          </AppAvatar>
+          <AppAvatar>
+            <img src="@/assets/user-icon.svg" style="width: 54%" alt="" />
+          </AppAvatar>
+        </div>
+
+        <div class="content ml-8">
+          <el-card shadow="always" class="dialog-card">
+            <h4>您好，我是 MaxKB 智能小助手</h4>
+            <div class="mt-4">
+              <el-text type="info">回答用户提出的 MaxKB 产品使用问题</el-text>
+            </div>
+          </el-card>
+          <el-card shadow="always" class="dialog-card mt-12">
+            <h4>您可以尝试输入以下问题：</h4>
+            <div class="mt-8">
+              <el-row :gutter="20">
+                <el-col :span="12">
+                  <el-button icon="EditPen" class="problem-button w-full">
+                    DataEase支持哪些类型的数据源？
+                  </el-button>
+                </el-col>
+                <el-col :span="12">
+                  <el-button icon="EditPen" class="problem-button w-full">
+                    DataEase支持哪些类型的数据源？
+                  </el-button>
+                </el-col>
+              </el-row>
+            </div>
+          </el-card>
+
+          <el-card shadow="always" class="dialog-card mt-12"> XXXXXXXXX </el-card>
+          <el-card shadow="always" class="dialog-card mt-12"> XXXXXXXXX </el-card>
+          <el-card shadow="always" class="dialog-card mt-12"> XXXXXXXXX </el-card>
+          <el-card shadow="always" class="dialog-card mt-12"> XXXXXXXXX </el-card>
+          <el-card shadow="always" class="dialog-card mt-12"> XXXXXXXXX </el-card>
+          <el-card shadow="always" class="dialog-card mt-12"> XXXXXXXXX </el-card>
+          <el-card shadow="always" class="dialog-card mt-12"> XXXXXXXXX </el-card>
+          <el-card shadow="always" class="dialog-card mt-12"> XXXXXXXXX </el-card>
+          <el-card shadow="always" class="dialog-card mt-12"> XXXXXXXXX </el-card>
+          <el-card shadow="always" class="dialog-card mt-12"> XXXXXXXXX </el-card>
+        </div>
+      </div>
+    </el-scrollbar>
+    <div class="ai-dialog__textarea flex">
+      <el-input
+        v-model="inputValue"
+        type="textarea"
+        placeholder="请输入"
+        :autosize="{ minRows: 1, maxRows: 8 }"
+      />
+      <div class="operate">
+        <el-button text class="sent-button" disabled>
+          <AppIcon iconName="app-send"></AppIcon>
+        </el-button>
+      </div>
     </div>
   </div>
 </template>
 <script setup lang="ts">
+import { ref } from 'vue'
 const props = defineProps({
   data: {
     type: Array<any>,
     default: () => []
   }
 })
+const inputValue = ref('')
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.ai-dialog {
+  min-height: 400px;
+  height: 100%;
+  padding-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  &__content {
+    flex: 1;
+
+    .avatar {
+      float: left;
+    }
+    .content {
+      padding-left: 50px;
+    }
+    .problem-button {
+      border: none;
+      border-radius: 8px;
+      background: var(--app-layout-bg-color);
+      height: 46px;
+      justify-content: left;
+      &:hover {
+        background: var(--el-color-primary-light-9);
+      }
+      :deep(.el-icon) {
+        color: var(--el-color-primary);
+      }
+    }
+  }
+  .dialog-card {
+    border: none;
+  }
+  &__textarea {
+    box-shadow: 0px 6px 24px 0px rgba(31, 35, 41, 0.08);
+    background-color: #ffffff;
+    border-radius: 8px;
+    border: 1px solid #ffffff;
+    box-sizing: border-box;
+
+    &:has(.el-textarea__inner:focus) {
+      border: 1px solid var(--el-color-primary);
+    }
+
+    :deep(.el-textarea__inner) {
+      border-radius: 8px !important;
+      box-shadow: none;
+      resize: none;
+      padding: 12px 16px;
+    }
+    .operate {
+      padding: 10px 12px;
+      .sent-button {
+        .el-icon {
+          font-size: 24px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/ui/src/components/icons/index.ts b/ui/src/components/icons/index.ts
index c9ae91982..c4911742f 100644
--- a/ui/src/components/icons/index.ts
+++ b/ui/src/components/icons/index.ts
@@ -173,5 +173,29 @@ export const iconMap: any = {
         )
       ])
     }
+  },
+  'app-send': {
+    iconReader: () => {
+      return h('i', [
+        h(
+          'svg',
+          {
+            viewBox: '0 0 24 24',
+            version: '1.1',
+            xmlns: 'http://www.w3.org/2000/svg'
+          },
+          [
+            h('path', {
+              d: 'M20.1716 1.68834C20.6753 1.53273 21.0458 2.16193 20.6652 2.52691L12.2658 10.5836C11.0058 11.7921 9.32754 12.4668 7.5817 12.4668C5.68044 12.4668 3.8669 11.667 2.58487 10.263L1.45879 9.02985C1.33225 8.90313 1.24137 8.74527 1.19534 8.5722C1.14931 8.39913 1.14974 8.21698 1.19661 8.04413C1.24347 7.87129 1.3351 7.71386 1.46225 7.58775C1.5894 7.46164 1.74757 7.3713 1.92079 7.32585L20.1716 1.68834Z',
+              fill: 'currentColor'
+            }),
+            h('path', {
+              d: 'M12 16.1851C12 14.2766 12.7377 12.4419 14.0588 11.0646L21.4664 3.34177C21.8268 2.96601 22.4499 3.32266 22.3084 3.82374L17.143 22.1182C17.0971 22.291 17.0064 22.4487 16.8801 22.5754C16.7538 22.7021 16.5964 22.7932 16.4237 22.8397C16.251 22.8862 16.0691 22.8864 15.8964 22.8402C15.7236 22.794 15.566 22.7031 15.4395 22.5767L14.4439 21.6791C12.8881 20.2764 12 18.2799 12 16.1851Z',
+              fill: 'currentColor'
+            })
+          ]
+        )
+      ])
+    }
   }
 }
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index fbe03752a..3f4ce3c54 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -103,6 +103,10 @@ h4 {
   width: 240px;
 }
 
+.mt-4 {
+  margin-top: calc(var(--app-base-px) - 4px);
+}
+
 .mt-8 {
   margin-top: var(--app-base-px);
 }
@@ -128,6 +132,9 @@ h4 {
 .ml-16 {
   margin-left: calc(var(--app-base-px) * 2);
 }
+.mr-4 {
+  margin-right: calc(var(--app-base-px) - 4px);
+}
 .mr-8 {
   margin-right: var(--app-base-px);
 }
@@ -260,6 +267,7 @@ h4 {
 
 // 表格第一行插入自定义行
 .table-quick-append {
+  background: #ffffff;
   .el-table__append-wrapper {
     position: absolute;
     top: 0;
@@ -270,9 +278,12 @@ h4 {
     align-items: center;
     display: flex;
     padding: 0 12px;
+    background: #ffffff;
     cursor: pointer;
+    z-index: 2;
     &:hover {
       background: var(--el-color-primary-light-9);
+      z-index: 1;
     }
   }
   .el-table__body {
@@ -280,6 +291,11 @@ h4 {
   }
 }
 
+// 头像渐变背景
+.avatar-gradient {
+  background: var(--app-avatar-gradient-color);
+}
+
 .success {
   color: var(--el-color-success);
 }
diff --git a/ui/src/styles/variables.scss b/ui/src/styles/variables.scss
index 81869b6d8..fc309228d 100644
--- a/ui/src/styles/variables.scss
+++ b/ui/src/styles/variables.scss
@@ -14,6 +14,7 @@
   --app-header-padding: 0 20px;
   --app-header-bg-color: linear-gradient(90deg, #ebf1ff 24.34%, #e5fbf8 56.18%, #f2ebfe 90.18%);
   --app-logo-color: linear-gradient(180deg, #3370ff 0%, #7f3bf5 100%);
+  --app-avatar-gradient-color: linear-gradient(270deg, #9258F7 0%, #3370FF 100%);
 
   // 计算高度
   --app-main-height: calc(100vh - var(--app-header-height) - var(--app-view-padding) * 2 - 40px);
diff --git a/ui/src/views/application/CreateApplication.vue b/ui/src/views/application/CreateApplication.vue
index 6d3a66b37..9ef7e8052 100644
--- a/ui/src/views/application/CreateApplication.vue
+++ b/ui/src/views/application/CreateApplication.vue
@@ -1,6 +1,12 @@
 <template>
   <LayoutContainer header="创建应用" back-to="-1">
-    <AiDialog></AiDialog>
+    <el-row>
+      <el-col :span="10" class="p-24"> </el-col>
+      <el-col :span="14" class="p-24 border-l">
+        <h4 class="title-decoration-1 mb-8">调试预览</h4>
+        <AiDialog></AiDialog>
+      </el-col>
+    </el-row>
   </LayoutContainer>
 </template>
 <script setup lang="ts">
diff --git a/ui/src/views/dataset/step/StepSecond.vue b/ui/src/views/dataset/step/StepSecond.vue
index a4b111e07..b9e9b1f8d 100644
--- a/ui/src/views/dataset/step/StepSecond.vue
+++ b/ui/src/views/dataset/step/StepSecond.vue
@@ -13,29 +13,50 @@
                 </el-radio>
                 <el-radio label="2" size="large" border class="mb-16">
                   <p>高级分段</p>
-                  <el-text type="info">用户可根据文档规范自行设置分段标识符、分段长度以及清洗规则
+                  <el-text type="info"
+                    >用户可根据文档规范自行设置分段标识符、分段长度以及清洗规则
                   </el-text>
                   <el-card shadow="never" class="card-never mt-16" v-if="radio === '2'">
                     <div class="set-rules__form">
                       <div class="form-item mb-16">
                         <div class="title flex align-center mb-8">
                           <span style="margin-right: 4px">分段标识</span>
-                          <el-tooltip effect="dark" content="按照所选符号先后顺序做递归分割，分割结果超出分段长度将截取至分段长度。" placement="right">
+                          <el-tooltip
+                            effect="dark"
+                            content="按照所选符号先后顺序做递归分割，分割结果超出分段长度将截取至分段长度。"
+                            placement="right"
+                          >
                             <el-icon style="font-size: 16px">
                               <Warning />
                             </el-icon>
                           </el-tooltip>
                         </div>
 
-                        <el-select v-loading="patternLoading" v-model="form.patterns" multiple placeholder="请选择">
-                          <el-option v-for="item in splitPatternList" :key="item" :label="item.key" :value="item.value"
-                            multiple>
+                        <el-select
+                          v-loading="patternLoading"
+                          v-model="form.patterns"
+                          multiple
+                          placeholder="请选择"
+                        >
+                          <el-option
+                            v-for="item in splitPatternList"
+                            :key="item"
+                            :label="item.key"
+                            :value="item.value"
+                            multiple
+                          >
                           </el-option>
                         </el-select>
                       </div>
                       <div class="form-item mb-16">
                         <div class="title mb-8">分段长度</div>
-                        <el-slider v-model="form.limit" show-input :show-input-controls="false" :min="50" :max="1024" />
+                        <el-slider
+                          v-model="form.limit"
+                          show-input
+                          :show-input-controls="false"
+                          :min="50"
+                          :max="1024"
+                        />
                       </div>
                       <div class="form-item mb-16">
                         <div class="title mb-8">自动清洗</div>
@@ -120,7 +141,7 @@ function splitDocument() {
 }
 
 const initSplitPatternList = () => {
-  DatasetApi.listSplitPattern(patternLoading).then(ok => {
+  DatasetApi.listSplitPattern(patternLoading).then((ok) => {
     splitPatternList.value = ok.data
   })
 }
diff --git a/ui/src/views/document/index.vue b/ui/src/views/document/index.vue
index eef9f4f5c..7afa6ff13 100644
--- a/ui/src/views/document/index.vue
+++ b/ui/src/views/document/index.vue
@@ -28,6 +28,7 @@
           @creatQuick="creatQuickHandle"
           @row-click="rowClickHandle"
           v-loading="loading"
+          :max-height="tableHeight"
         >
           <el-table-column prop="name" label="文件名称" min-width="280">
             <template #default="{ row }">
@@ -114,6 +115,7 @@ const loading = ref(false)
 const filterText = ref('')
 const documentData = ref<any[]>([])
 const currentMouseId = ref(null)
+const tableHeight = ref(0)
 
 const paginationConfig = reactive({
   currentPage: 1,
@@ -223,6 +225,12 @@ function getList() {
 }
 
 onMounted(() => {
+  tableHeight.value = window.innerHeight - 300
+  window.onresize = () => {
+    return (() => {
+      tableHeight.value = window.innerHeight - 300
+    })()
+  }
   getList()
 })
 </script>