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] 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
   })
 }