From c97c97c6ab650a6a4eea2092018f242c98fce515 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Wed, 22 Nov 2023 17:04:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=9B=E5=BB=BA=E5=BA=94=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/api/type/application.ts                |  10 ++
 ui/src/components/ai-dialog/index.vue         |  43 +++--
 ui/src/styles/app.scss                        |   2 +-
 ui/src/styles/element-plus.scss               |   4 +-
 .../views/application/CreateApplication.vue   | 169 ++++++++++++++++--
 ui/src/views/dataset/component/BaseForm.vue   |   8 +-
 .../dataset/component/UploadComponent.vue     |   8 +-
 ui/src/views/dataset/step/StepSecond.vue      |  13 +-
 .../paragraph/component/ParagraphForm.vue     |   9 +-
 .../setting/component/CreateMemberDialog.vue  |   1 +
 10 files changed, 221 insertions(+), 46 deletions(-)
 create mode 100644 ui/src/api/type/application.ts

diff --git a/ui/src/api/type/application.ts b/ui/src/api/type/application.ts
new file mode 100644
index 000000000..ff4f7b8e0
--- /dev/null
+++ b/ui/src/api/type/application.ts
@@ -0,0 +1,10 @@
+interface ApplicationFormType {
+  name: string
+  desc: string
+  model_id: string
+  multiple_rounds_dialogue: boolean
+  prologue: string
+  example: string[]
+  dataset_id_list: string[]
+}
+export type { ApplicationFormType }
diff --git a/ui/src/components/ai-dialog/index.vue b/ui/src/components/ai-dialog/index.vue
index f1c38dff7..03b587719 100644
--- a/ui/src/components/ai-dialog/index.vue
+++ b/ui/src/components/ai-dialog/index.vue
@@ -15,31 +15,23 @@
           <div class="content">
             <el-card shadow="always" class="dialog-card">
               <h4>您好，我是 MaxKB 智能小助手</h4>
-              <div class="mt-4">
-                <el-text type="info">回答用户提出的 MaxKB 产品使用问题</el-text>
+              <div class="mt-4" v-if="data?.prologue">
+                <el-text type="info">{{ data?.prologue }}</el-text>
               </div>
             </el-card>
             <el-card shadow="always" class="dialog-card mt-12">
               <h4 class="mb-8">您可以尝试输入以下问题：</h4>
-              <div class="problem-button cursor">
-                <el-icon><EditPen /></el-icon>
-                DataEase支持哪些类型的数据源？XXXXXXXXXXX
-              </div>
-              <el-button icon="EditPen" class="problem-button">
-                <div>DataEase支持哪些类型的数据源？XXXXXXXXXXX</div>
-              </el-button>
+              <el-space wrap>
+                <div class="problem-button cursor ellipsis-2">
+                  <el-icon><EditPen /></el-icon>
+                  DataEase支持哪些类型的数据源？
+                </div>
+                <div class="problem-button cursor ellipsis-2">
+                  <el-icon><EditPen /></el-icon>
+                  DataEase支持哪些类型的数据源？XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+                </div>
+              </el-space>
             </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 class="item-content mb-16">
@@ -87,8 +79,8 @@
 import { ref } from 'vue'
 const props = defineProps({
   data: {
-    type: Array<any>,
-    default: () => []
+    type: Object,
+    default: () => {}
   }
 })
 const inputValue = ref('')
@@ -122,7 +114,12 @@ const inputValue = ref('')
       border-radius: 8px;
       background: var(--app-layout-bg-color);
       height: 46px;
-      justify-content: left;
+      padding: 0 12px;
+      line-height: 46px;
+      box-sizing: border-box;
+      color: var(--el-text-color-regular);
+      -webkit-line-clamp: 1;
+      word-break: break-all;
       &:hover {
         background: var(--el-color-primary-light-9);
       }
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 34909148e..27bb8856c 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -214,7 +214,7 @@ h4 {
 
 .ellipsis-1 {
   display: inline-block;
-  max-width: 100px;
+  max-width: 130px;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 9f05a554f..a554b543a 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -172,8 +172,10 @@
 }
 
 .input-with-select {
-
   .el-input-group__prepend {
     background-color: var(--el-fill-color-blank);
   }
 }
+.el-textarea__inner {
+  font-size: 13px;
+}
diff --git a/ui/src/views/application/CreateApplication.vue b/ui/src/views/application/CreateApplication.vue
index 3dfd92334..749f2dc0f 100644
--- a/ui/src/views/application/CreateApplication.vue
+++ b/ui/src/views/application/CreateApplication.vue
@@ -1,13 +1,127 @@
 <template>
-  <LayoutContainer header="创建应用" back-to="-1">
+  <LayoutContainer header="创建应用" back-to="-1" class="create-application">
     <el-row>
-      <el-col :span="10" class="p-24"> </el-col>
+      <el-col :span="10">
+        <div class="p-24 mb-16" style="padding-bottom: 0;">
+          <h4 class="title-decoration-1">应用信息</h4>
+        </div>
+        <div class="scrollbar-height-left">
+          <el-scrollbar>
+            <el-form
+              ref="applicationFormRef"
+              :model="applicationForm"
+              :rules="rules"
+              label-position="top"
+              require-asterisk-position="right"
+              class="p-24"
+              style="padding-top: 0;"
+            >
+              <el-form-item label="应用名称" prop="name">
+                <el-input
+                  v-model="applicationForm.name"
+                  maxlength="64"
+                  placeholder="请输入应用名称"
+                  show-word-limit
+                />
+              </el-form-item>
+              <el-form-item label="应用描述">
+                <el-input
+                  v-model="applicationForm.desc"
+                  type="textarea"
+                  placeholder="描述该应用的应用场景及用途，如：MaxKB 小助手回答用户提出的 MaxKB 产品使用问题"
+                  :rows="3"
+                  maxlength="500"
+                  show-word-limit
+                />
+              </el-form-item>
+              <el-form-item label="选择模型" prop="model_id">
+                <el-select v-model="applicationForm.model_id" placeholder="请选择模型">
+                  <el-option label="Zone one" value="shanghai" />
+                  <el-option label="Zone two" value="beijing" />
+                </el-select>
+              </el-form-item>
+
+              <el-form-item label="多轮对话">
+                <el-switch v-model="applicationForm.multiple_rounds_dialogue" />
+              </el-form-item>
+              <el-form-item label="关联数据集">
+                <template #label>
+                  <div class="flex-between">
+                    <span>关联数据集</span>
+                    <el-button type="primary" link>
+                      <el-icon class="mr-4"><Plus /></el-icon> 添加
+                    </el-button>
+                  </div>
+                </template>
+                <div>
+                  <el-text type="info">关联的数据集展示在这里</el-text>
+                </div>
+                <div class="w-full">
+                  <el-row :gutter="12">
+                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="mb-8">
+                      <el-card shadow="never">
+                        <div class="flex-between">
+                          <div class="flex align-center">
+                            <AppAvatar class="mr-12" shape="square" :size="32">
+                              <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+                            </AppAvatar>
+                            <h4 class="ellipsis-1">DataEase 数据集</h4>
+                          </div>
+                          <el-button text>
+                            <el-icon><Close /></el-icon>
+                          </el-button>
+                        </div>
+                      </el-card>
+                    </el-col>
+                    <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="mb-8">
+                      <el-card shadow="never">
+                        <div class="flex-between">
+                          <div class="flex align-center">
+                            <AppAvatar class="mr-12" shape="square" :size="32">
+                              <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+                            </AppAvatar>
+                            <h4 class="ellipsis-1">DataEase 数据集</h4>
+                          </div>
+                          <el-button text>
+                            <el-icon><Close /></el-icon>
+                          </el-button>
+                        </div>
+                      </el-card>
+                    </el-col>
+                  </el-row>
+                </div>
+              </el-form-item>
+              <el-form-item label="开场白">
+                <el-input
+                  v-model="applicationForm.prologue"
+                  type="textarea"
+                  placeholder="开始对话的欢迎语。您可以这样写：您好，我是 MaxKB 智能小助手，您可以向我提出 MaxKB 产品使用中遇到的任何问题。"
+                  :rows="3"
+                />
+              </el-form-item>
+              <el-form-item label="示例">
+                <template v-for="(item, index) in exampleList" :key="index">
+                  <el-input
+                    v-model="exampleList[index]"
+                    :placeholder="`用户提问 示例${index + 1}`"
+                    class="mb-8"
+                  />
+                </template>
+              </el-form-item>
+            </el-form>
+          </el-scrollbar>
+        </div>
+        <div class="text-right border-t p-16">
+          <el-button> 取消 </el-button>
+          <el-button type="primary" :disabled="loading"> 创建 </el-button>
+        </div>
+      </el-col>
       <el-col :span="14" class="p-24 border-l">
         <h4 class="title-decoration-1 mb-16">调试预览</h4>
         <div class="dialog-bg">
-          <h4 class="p-24">DataEase 智能客服</h4>
-          <div class="dialog-height">
-            <AiDialog></AiDialog>
+          <h4 class="p-24">{{ applicationForm?.name || '应用名称' }}</h4>
+          <div class="scrollbar-height">
+            <AiDialog :data="applicationForm"></AiDialog>
           </div>
         </div>
       </el-col>
@@ -15,15 +129,48 @@
   </LayoutContainer>
 </template>
 <script setup lang="ts">
+import { reactive, ref } from 'vue'
 import AiDialog from '@/components/ai-dialog/index.vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { ApplicationFormType } from '@/api/application'
+
+const applicationFormRef = ref<FormInstance>()
+
+const loading = ref(false)
+const exampleList = ref(['', ''])
+const applicationForm = reactive<ApplicationFormType>({
+  name: '',
+  desc: '',
+  model_id: '',
+  multiple_rounds_dialogue: false,
+  prologue: '',
+  example: [],
+  dataset_id_list: []
+})
+
+const rules = reactive<FormRules<ApplicationFormType>>({
+  name: [{ required: true, message: '请输入应用名称', trigger: 'blur' }],
+  model_id: [
+    {
+      required: true,
+      message: '请选择模型',
+      trigger: 'change'
+    }
+  ]
+})
 </script>
 <style lang="scss" scoped>
-.dialog-bg {
-  border-radius: 8px;
-  background: var(--dialog-bg-gradient-color);
-  overflow: hidden;
-  box-sizing: border-box;
-  .dialog-height {
+.create-application {
+  .dialog-bg {
+    border-radius: 8px;
+    background: var(--dialog-bg-gradient-color);
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+  .scrollbar-height-left {
+    height: calc(var(--app-main-height) - 100px);
+  }
+  .scrollbar-height {
     height: calc(var(--app-main-height) - 150px);
   }
 }
diff --git a/ui/src/views/dataset/component/BaseForm.vue b/ui/src/views/dataset/component/BaseForm.vue
index 34a3a1457..bc1a320dd 100644
--- a/ui/src/views/dataset/component/BaseForm.vue
+++ b/ui/src/views/dataset/component/BaseForm.vue
@@ -1,6 +1,12 @@
 <template>
   <h4 class="title-decoration-1 mb-16">基本信息</h4>
-  <el-form ref="FormRef" :model="form" :rules="rules" label-position="top">
+  <el-form
+    ref="FormRef"
+    :model="form"
+    :rules="rules"
+    label-position="top"
+    require-asterisk-position="right"
+  >
     <el-form-item label="数据集名称" prop="name">
       <el-input
         v-model.trim="form.name"
diff --git a/ui/src/views/dataset/component/UploadComponent.vue b/ui/src/views/dataset/component/UploadComponent.vue
index fcdd2164f..7899e1223 100644
--- a/ui/src/views/dataset/component/UploadComponent.vue
+++ b/ui/src/views/dataset/component/UploadComponent.vue
@@ -1,6 +1,12 @@
 <template>
   <h4 class="title-decoration-1 mb-8">上传文档</h4>
-  <el-form ref="FormRef" :model="form" :rules="rules" label-position="top">
+  <el-form
+    ref="FormRef"
+    :model="form"
+    :rules="rules"
+    label-position="top"
+    require-asterisk-position="right"
+  >
     <el-form-item prop="fileList">
       <el-upload
         class="w-full"
diff --git a/ui/src/views/dataset/step/StepSecond.vue b/ui/src/views/dataset/step/StepSecond.vue
index 0cab87a22..a0426af8d 100644
--- a/ui/src/views/dataset/step/StepSecond.vue
+++ b/ui/src/views/dataset/step/StepSecond.vue
@@ -3,7 +3,7 @@
     <el-row>
       <el-col :span="10" class="p-24">
         <h4 class="title-decoration-1 mb-8">设置分段规则</h4>
-        <div>
+        <div class="set-rules__right">
           <el-scrollbar>
             <div class="left-height">
               <el-radio-group v-model="radio" class="set-rules__radio">
@@ -102,15 +102,14 @@ const paragraphList = ref<any[]>([])
 const patternLoading = ref<boolean>(false)
 
 const form = reactive<{
-  patterns: Array<string>,
-  limit: number,
-  with_filter: boolean,
+  patterns: Array<string>
+  limit: number
+  with_filter: boolean
   [propName: string]: any
 }>({
   patterns: [],
   limit: 0,
-  with_filter: false,
-
+  with_filter: false
 })
 
 function splitDocument() {
@@ -124,7 +123,7 @@ function splitDocument() {
   if (radio.value === '2') {
     Object.keys(form).forEach((key) => {
       if (key == 'patterns') {
-        form.patterns.forEach(item => fd.append('patterns', item))
+        form.patterns.forEach((item) => fd.append('patterns', item))
       } else {
         fd.append(key, form[key])
       }
diff --git a/ui/src/views/paragraph/component/ParagraphForm.vue b/ui/src/views/paragraph/component/ParagraphForm.vue
index 4adfdc911..31128e1a3 100644
--- a/ui/src/views/paragraph/component/ParagraphForm.vue
+++ b/ui/src/views/paragraph/component/ParagraphForm.vue
@@ -1,5 +1,12 @@
 <template>
-  <el-form ref="paragraphFormRef" :model="form" label-position="top" :rules="rules" @submit.prevent>
+  <el-form
+    ref="paragraphFormRef"
+    :model="form"
+    label-position="top"
+    require-asterisk-position="right"
+    :rules="rules"
+    @submit.prevent
+  >
     <el-form-item label="分段标题">
       <el-input v-if="isEdit" v-model="form.title" placeholder="请输入分段标题"> </el-input>
       <span v-else>{{ form.title }}</span>
diff --git a/ui/src/views/setting/component/CreateMemberDialog.vue b/ui/src/views/setting/component/CreateMemberDialog.vue
index 539508cdc..1250dfe56 100644
--- a/ui/src/views/setting/component/CreateMemberDialog.vue
+++ b/ui/src/views/setting/component/CreateMemberDialog.vue
@@ -16,6 +16,7 @@
       :model="memberForm"
       label-position="top"
       :rules="rules"
+      require-asterisk-position="right"
       @submit.prevent
     >
       <el-form-item label="用户名/邮箱" prop="users">