From 8e72eb86164ff5a9f7e536f521b03eb9aea923e6 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Mon, 20 Nov 2023 18:56:31 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E5=BA=94=E7=94=A8=E5=AF=B9?=
 =?UTF-8?q?=E8=AF=9D=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/assets/icon_robot.svg                  |   5 +
 ui/src/components/ai-dialog/index.vue         | 108 ++++++++++++++++--
 ui/src/components/icons/index.ts              |  24 ++++
 ui/src/styles/app.scss                        |  12 ++
 ui/src/styles/variables.scss                  |   1 +
 .../views/application/CreateApplication.vue   |   8 +-
 6 files changed, 149 insertions(+), 9 deletions(-)
 create mode 100644 ui/src/assets/icon_robot.svg

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..45693f89c 100644
--- a/ui/src/components/ai-dialog/index.vue
+++ b/ui/src/components/ai-dialog/index.vue
@@ -1,20 +1,112 @@
 <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">
+    <div class="ai-dialog__content flex">
+      <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 class="ml-8 w-full">
+        <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>
+      </div>
+    </div>
+    <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">
+          <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 {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  &__content {
+    flex: 1;
+    .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;
+
+    &:has(.el-textarea__inner:focus) {
+      border: 1px solid var(--el-color-primary);
+    }
+    .operate {
+      padding: 10px 12px;
+      .sent-button {
+        .el-icon {
+          font-size: 24px;
+        }
+      }
+    }
+    :deep(.el-textarea__inner) {
+      border-radius: 8px !important;
+      box-shadow: none;
+      resize: none;
+      padding: 12px 16px;
+    }
+  }
+}
+</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..e7451ad09 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);
 }
@@ -280,6 +287,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">

From 7ecb48434bc7f184cfbc2bb6bf3d130d71c196fc Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Tue, 21 Nov 2023 10:56:25 +0800
Subject: [PATCH 2/3] feat:

---
 ui/src/components/ai-dialog/index.vue    | 98 ++++++++++++++----------
 ui/src/views/dataset/step/StepSecond.vue | 35 +++++++--
 2 files changed, 85 insertions(+), 48 deletions(-)

diff --git a/ui/src/components/ai-dialog/index.vue b/ui/src/components/ai-dialog/index.vue
index 45693f89c..e84ba54da 100644
--- a/ui/src/components/ai-dialog/index.vue
+++ b/ui/src/components/ai-dialog/index.vue
@@ -1,40 +1,51 @@
 <template>
   <div class="ai-dialog">
-    <div class="ai-dialog__content flex">
-      <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 class="ml-8 w-full">
-        <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-scrollbar>
+      <div class="ai-dialog__content flex">
+        <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 class="ml-8 w-full">
+          <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>
+          <el-card shadow="always" class="dialog-card mt-12"> XXXXXXXXX </el-card>
+        </div>
       </div>
-    </div>
+    </el-scrollbar>
     <div class="ai-dialog__textarea flex">
       <el-input
         v-model="inputValue"
@@ -43,7 +54,7 @@
         :autosize="{ minRows: 1, maxRows: 8 }"
       />
       <div class="operate">
-        <el-button text class="sent-button">
+        <el-button text class="sent-button" disabled>
           <AppIcon iconName="app-send"></AppIcon>
         </el-button>
       </div>
@@ -62,9 +73,12 @@ const inputValue = ref('')
 </script>
 <style lang="scss" scoped>
 .ai-dialog {
-  height: 100%;
+  // min-height: 400px;
+  // height: 100%;
+  height: calc(100% - 10px);
   display: flex;
   flex-direction: column;
+  box-sizing: border-box;
   &__content {
     flex: 1;
     .problem-button {
@@ -89,10 +103,18 @@ const inputValue = ref('')
     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 {
@@ -101,12 +123,6 @@ const inputValue = ref('')
         }
       }
     }
-    :deep(.el-textarea__inner) {
-      border-radius: 8px !important;
-      box-shadow: none;
-      resize: none;
-      padding: 12px 16px;
-    }
   }
 }
 </style>
diff --git a/ui/src/views/dataset/step/StepSecond.vue b/ui/src/views/dataset/step/StepSecond.vue
index 814a52783..5c8783e7b 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>
@@ -110,7 +131,7 @@ function splitDocument() {
 }
 
 const initSplitPatternList = () => {
-  DatasetApi.listSplitPattern(patternLoading).then(ok => {
+  DatasetApi.listSplitPattern(patternLoading).then((ok) => {
     splitPatternList.value = ok.data
   })
 }

From 42dc41db1954cf54764325c47e5f7051ffaf9cde Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Tue, 21 Nov 2023 11:43:47 +0800
Subject: [PATCH 3/3] feat:

---
 ui/src/components/ai-dialog/index.vue | 32 ++++++++++++++++++---------
 ui/src/styles/app.scss                |  4 ++++
 ui/src/views/document/index.vue       |  8 +++++++
 3 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/ui/src/components/ai-dialog/index.vue b/ui/src/components/ai-dialog/index.vue
index e84ba54da..2dbdacf64 100644
--- a/ui/src/components/ai-dialog/index.vue
+++ b/ui/src/components/ai-dialog/index.vue
@@ -1,14 +1,17 @@
 <template>
   <div class="ai-dialog">
     <el-scrollbar>
-      <div class="ai-dialog__content flex">
-        <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 class="ml-8 w-full">
+      <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">
@@ -73,14 +76,21 @@ const inputValue = ref('')
 </script>
 <style lang="scss" scoped>
 .ai-dialog {
-  // min-height: 400px;
-  // height: 100%;
-  height: calc(100% - 10px);
+  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;
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index e7451ad09..3f4ce3c54 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -267,6 +267,7 @@ h4 {
 
 // 表格第一行插入自定义行
 .table-quick-append {
+  background: #ffffff;
   .el-table__append-wrapper {
     position: absolute;
     top: 0;
@@ -277,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 {
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>