From 8cc7d1aa2432d94efe97b4fbbb3c819343aac229 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Tue, 18 Jun 2024 14:52:46 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E6=96=B0=E5=BB=BA?=
 =?UTF-8?q?=E5=BA=94=E7=94=A8=E6=B5=81=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/api/type/application.ts                |   1 +
 .../items/table/ProgressTableItem.vue         |   8 +-
 ui/src/views/application/CreateAndSetting.vue |   7 +-
 .../AddDatasetDialog.vue                      |   0
 .../component/CreateApplicationDialog.vue     | 191 ++++++++++++++++++
 .../ParamSettingDialog.vue                    |   0
 .../components/CreateApplicationDialog.vue    |  94 ---------
 ui/src/views/application/index.vue            |   9 +-
 .../nodes/search-dataset-node/index.vue       |   4 +-
 9 files changed, 210 insertions(+), 104 deletions(-)
 rename ui/src/views/application/{components => component}/AddDatasetDialog.vue (100%)
 create mode 100644 ui/src/views/application/component/CreateApplicationDialog.vue
 rename ui/src/views/application/{components => component}/ParamSettingDialog.vue (100%)
 delete mode 100644 ui/src/views/application/components/CreateApplicationDialog.vue

diff --git a/ui/src/api/type/application.ts b/ui/src/api/type/application.ts
index 6da9dd84a..242ae8200 100644
--- a/ui/src/api/type/application.ts
+++ b/ui/src/api/type/application.ts
@@ -11,6 +11,7 @@ interface ApplicationFormType {
   model_setting?: any
   problem_optimization?: boolean
   icon?: string | undefined
+  type?: string
 }
 interface chatType {
   id: string
diff --git a/ui/src/components/dynamics-form/items/table/ProgressTableItem.vue b/ui/src/components/dynamics-form/items/table/ProgressTableItem.vue
index edccac235..baf9e3e14 100644
--- a/ui/src/components/dynamics-form/items/table/ProgressTableItem.vue
+++ b/ui/src/components/dynamics-form/items/table/ProgressTableItem.vue
@@ -5,10 +5,10 @@
         <el-progress v-bind="$attrs" :percentage="row[value_field]"></el-progress
       ></template>
       <div>
-        <el-row v-for="(item, index) in view_card" :key="index"
-          ><el-col :span="6">{{ item.title }}</el-col
-          ><el-col :span="18"> <span class="value" :innerHTML="value_html(item)"> </span></el-col
-        ></el-row>
+        <el-row v-for="(item, index) in view_card" :key="index">
+          <el-col :span="6">{{ item.title }}</el-col>
+          <el-col :span="18"> <span class="value" :innerHTML="value_html(item)"> </span></el-col>
+        </el-row>
       </div>
     </el-popover>
   </div>
diff --git a/ui/src/views/application/CreateAndSetting.vue b/ui/src/views/application/CreateAndSetting.vue
index 30c31f498..bd4713aa0 100644
--- a/ui/src/views/application/CreateAndSetting.vue
+++ b/ui/src/views/application/CreateAndSetting.vue
@@ -317,8 +317,8 @@
 import { reactive, ref, watch, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { groupBy } from 'lodash'
-import ParamSettingDialog from './components/ParamSettingDialog.vue'
-import AddDatasetDialog from './components/AddDatasetDialog.vue'
+import ParamSettingDialog from './component/ParamSettingDialog.vue'
+import AddDatasetDialog from './component/AddDatasetDialog.vue'
 import CreateModelDialog from '@/views/template/component/CreateModelDialog.vue'
 import SelectProviderDialog from '@/views/template/component/SelectProviderDialog.vue'
 import { MdEditor } from 'md-editor-v3'
@@ -372,7 +372,8 @@ const applicationForm = ref<ApplicationFormType>({
   model_setting: {
     prompt: defaultPrompt
   },
-  problem_optimization: false
+  problem_optimization: false,
+  type: 'SIMPLE'
 })
 
 const rules = reactive<FormRules<ApplicationFormType>>({
diff --git a/ui/src/views/application/components/AddDatasetDialog.vue b/ui/src/views/application/component/AddDatasetDialog.vue
similarity index 100%
rename from ui/src/views/application/components/AddDatasetDialog.vue
rename to ui/src/views/application/component/AddDatasetDialog.vue
diff --git a/ui/src/views/application/component/CreateApplicationDialog.vue b/ui/src/views/application/component/CreateApplicationDialog.vue
new file mode 100644
index 000000000..e4704d0e3
--- /dev/null
+++ b/ui/src/views/application/component/CreateApplicationDialog.vue
@@ -0,0 +1,191 @@
+<template>
+  <el-dialog
+    :title="$t('views.application.applicationForm.title.create')"
+    v-model="dialogVisible"
+    width="650"
+    append-to-body
+  >
+    <el-form
+      ref="applicationFormRef"
+      :model="applicationForm"
+      :rules="rules"
+      label-position="top"
+      require-asterisk-position="right"
+    >
+      <el-form-item :label="$t('views.application.applicationForm.form.appName.label')" prop="name">
+        <el-input
+          v-model="applicationForm.name"
+          maxlength="64"
+          :placeholder="$t('views.application.applicationForm.form.appName.placeholder')"
+          show-word-limit
+        />
+      </el-form-item>
+      <el-form-item :label="$t('views.application.applicationForm.form.appDescription.label')">
+        <el-input
+          v-model="applicationForm.desc"
+          type="textarea"
+          :placeholder="$t('views.application.applicationForm.form.appDescription.placeholder')"
+          :rows="3"
+          maxlength="256"
+          show-word-limit
+        />
+      </el-form-item>
+      <el-form-item label="选择应用类型">
+        <el-radio-group v-model="applicationForm.type" class="card__radio">
+          <el-row :gutter="16">
+            <el-col :span="12">
+              <el-card
+                shadow="never"
+                class="mb-16"
+                :class="applicationForm.type === 'SIMPLE' ? 'active' : ''"
+              >
+                <el-radio value="SIMPLE" size="large">
+                  <p class="mb-4">简单配置</p>
+                  <el-text type="info">适合新手创建小助手</el-text>
+                </el-radio>
+              </el-card>
+            </el-col>
+            <el-col :span="12">
+              <el-card
+                shadow="never"
+                class="mb-16"
+                :class="applicationForm.type === 'WORK_FLOW' ? 'active' : ''"
+              >
+                <el-radio value="WORK_FLOW" size="large">
+                  <p class="mb-4">高级编排</p>
+                  <el-text type="info">适合高级用户自定义小助手的工作流</el-text>
+                </el-radio>
+              </el-card>
+            </el-col>
+          </el-row>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click.prevent="dialogVisible = false">
+          {{ $t('views.application.applicationForm.buttons.cancel') }}
+        </el-button>
+        <el-button type="primary" @click="submitHandle(applicationFormRef)">
+          {{ $t('views.application.applicationForm.buttons.create') }}
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref, watch, reactive } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import type { ApplicationFormType } from '@/api/type/application'
+import type { FormInstance, FormRules } from 'element-plus'
+import applicationApi from '@/api/application'
+import { MsgSuccess } from '@/utils/message'
+import useStore from '@/stores'
+import { t } from '@/locales'
+const router = useRouter()
+
+// @ts-ignore
+const defaultPrompt = t('views.application.prompt.defaultPrompt', {
+  data: '{data}',
+  question: '{question}'
+})
+const applicationFormRef = ref()
+
+const loading = ref(false)
+const dialogVisible = ref<boolean>(false)
+
+const applicationForm = ref<ApplicationFormType>({
+  name: '',
+  desc: '',
+  model_id: '',
+  multiple_rounds_dialogue: false,
+  prologue: t('views.application.prompt.defaultPrologue'),
+  dataset_id_list: [],
+  dataset_setting: {
+    top_n: 3,
+    similarity: 0.6,
+    max_paragraph_char_number: 5000,
+    search_mode: 'embedding',
+    no_references_setting: {
+      status: 'ai_questioning',
+      value: '{question}'
+    }
+  },
+  model_setting: {
+    prompt: defaultPrompt
+  },
+  problem_optimization: false,
+  type: 'SIMPLE'
+})
+
+const rules = reactive<FormRules<ApplicationFormType>>({
+  name: [
+    {
+      required: true,
+      message: t('views.application.applicationForm.form.appName.placeholder'),
+      trigger: 'blur'
+    }
+  ],
+  model_id: [
+    {
+      required: false,
+      message: t('views.application.applicationForm.form.aiModel.placeholder'),
+      trigger: 'change'
+    }
+  ]
+})
+
+watch(dialogVisible, (bool) => {
+  if (!bool) {
+    applicationForm.value = {
+      name: '',
+      desc: '',
+      model_id: '',
+      multiple_rounds_dialogue: false,
+      prologue: t('views.application.prompt.defaultPrologue'),
+      dataset_id_list: [],
+      dataset_setting: {
+        top_n: 3,
+        similarity: 0.6,
+        max_paragraph_char_number: 5000,
+        search_mode: 'embedding',
+        no_references_setting: {
+          status: 'ai_questioning',
+          value: '{question}'
+        }
+      },
+      model_setting: {
+        prompt: defaultPrompt
+      },
+      problem_optimization: false,
+      type: 'SIMPLE'
+    }
+    applicationFormRef.value?.clearValidate()
+  }
+})
+
+const open = () => {
+  dialogVisible.value = true
+}
+
+const submitHandle = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid) => {
+    if (valid) {
+      applicationApi.postApplication(applicationForm.value, loading).then((res) => {
+        MsgSuccess(t('views.application.applicationForm.buttons.createSuccess'))
+        if (applicationForm.value.type === 'WORK_FLOW') {
+          router.push({ path: `/application//workflow?id=${res.data.id}` })
+        } else {
+          router.push({ path: `/application/${res.data.id}/setting` })
+        }
+
+        dialogVisible.value = false
+      })
+    }
+  })
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scope></style>
diff --git a/ui/src/views/application/components/ParamSettingDialog.vue b/ui/src/views/application/component/ParamSettingDialog.vue
similarity index 100%
rename from ui/src/views/application/components/ParamSettingDialog.vue
rename to ui/src/views/application/component/ParamSettingDialog.vue
diff --git a/ui/src/views/application/components/CreateApplicationDialog.vue b/ui/src/views/application/components/CreateApplicationDialog.vue
deleted file mode 100644
index 1e961d5da..000000000
--- a/ui/src/views/application/components/CreateApplicationDialog.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <el-dialog
-    :title="$t('views.application.applicationForm.title.create')"
-    v-model="dialogVisible"
-    width="600"
-    append-to-body
-  >
-    <el-form
-      ref="applicationFormRef"
-      :model="applicationForm"
-      :rules="rules"
-      label-position="top"
-      require-asterisk-position="right"
-    >
-      <el-form-item :label="$t('views.application.applicationForm.form.appName.label')" prop="name">
-        <el-input
-          v-model="applicationForm.name"
-          maxlength="64"
-          :placeholder="$t('views.application.applicationForm.form.appName.placeholder')"
-          show-word-limit
-        />
-      </el-form-item>
-      <el-form-item :label="$t('views.application.applicationForm.form.appDescription.label')">
-        <el-input
-          v-model="applicationForm.desc"
-          type="textarea"
-          :placeholder="$t('views.application.applicationForm.form.appDescription.placeholder')"
-          :rows="3"
-          maxlength="256"
-          show-word-limit
-        />
-      </el-form-item>
-      <el-form-item label="选择应用类型">
-        <el-radio-group v-model="applicationForm.search_mode" class="card__radio">
-          <el-card
-            shadow="never"
-            class="mb-16"
-            :class="applicationForm.search_mode === 'embedding' ? 'active' : ''"
-          >
-            <el-radio value="embedding" size="large">
-              <p class="mb-4">简单配置</p>
-              <el-text type="info">适合新手创建小助手</el-text>
-            </el-radio>
-          </el-card>
-          <el-card
-            shadow="never"
-            class="mb-16"
-            :class="applicationForm.search_mode === 'keywords' ? 'active' : ''"
-          >
-            <el-radio value="keywords" size="large">
-              <p class="mb-4">高级编排</p>
-              <el-text type="info">适合高级用户自定义小助手的工作流</el-text>
-            </el-radio>
-          </el-card>
-        </el-radio-group>
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button @click.prevent="dialogVisible = false">
-          {{ $t('views.application.applicationForm.buttons.cancel') }}
-        </el-button>
-        <el-button type="primary" @click="submitHandle">
-          {{ $t('views.application.applicationForm.buttons.create') }}
-        </el-button>
-      </span>
-    </template>
-  </el-dialog>
-</template>
-<script setup lang="ts">
-import { ref, watch } from 'vue'
-import type { ApplicationFormType } from '@/api/type/application'
-
-const dialogVisible = ref<boolean>(false)
-
-const applicationForm = ref<ApplicationFormType>({
-  name: '',
-  desc: ''
-})
-watch(dialogVisible, (bool) => {
-  if (!bool) {
-  }
-})
-
-const open = () => {
-  dialogVisible.value = true
-}
-const submitHandle = () => {
-  dialogVisible.value = false
-}
-
-defineExpose({ open })
-</script>
-<style lang="scss" scope></style>
diff --git a/ui/src/views/application/index.vue b/ui/src/views/application/index.vue
index 8be49ad6b..f5e9b0072 100644
--- a/ui/src/views/application/index.vue
+++ b/ui/src/views/application/index.vue
@@ -24,7 +24,7 @@
           <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb-16">
             <CardAdd
               :title="$t('views.application.applicationList.card.createApplication')"
-              @click="router.push({ path: '/application/create' })"
+              @click="openCreateDialog"
             />
           </el-col>
           <el-col
@@ -104,11 +104,13 @@
         </el-row>
       </InfiniteScroll>
     </div>
+    <CreateApplicationDialog ref="CreateApplicationDialogRef" />
   </div>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, reactive } from 'vue'
 import applicationApi from '@/api/application'
+import CreateApplicationDialog from './component/CreateApplicationDialog.vue'
 import { MsgSuccess, MsgConfirm } from '@/utils/message'
 import { isAppIcon } from '@/utils/application'
 import { useRouter } from 'vue-router'
@@ -117,6 +119,7 @@ import { t } from '@/locales'
 const { application } = useStore()
 const router = useRouter()
 
+const CreateApplicationDialogRef = ref()
 const loading = ref(false)
 
 const applicationList = ref<any[]>([])
@@ -129,6 +132,10 @@ const paginationConfig = reactive({
 
 const searchValue = ref('')
 
+function openCreateDialog() {
+  CreateApplicationDialogRef.value.open()
+}
+
 function searchHandle() {
   paginationConfig.total = 0
   paginationConfig.current_page = 1
diff --git a/ui/src/workflow/nodes/search-dataset-node/index.vue b/ui/src/workflow/nodes/search-dataset-node/index.vue
index ae5c4944b..d47e9cf99 100644
--- a/ui/src/workflow/nodes/search-dataset-node/index.vue
+++ b/ui/src/workflow/nodes/search-dataset-node/index.vue
@@ -106,8 +106,8 @@ import { set } from 'lodash'
 import { app } from '@/main'
 import NodeContainer from '@/workflow/common/NodeContainer.vue'
 import NodeCascader from '@/workflow/common/NodeCascader.vue'
-import AddDatasetDialog from '@/views/application/components/AddDatasetDialog.vue'
-import ParamSettingDialog from '@/views/application/components/ParamSettingDialog.vue'
+import AddDatasetDialog from '@/views/application/component/AddDatasetDialog.vue'
+import ParamSettingDialog from '@/views/application/component/ParamSettingDialog.vue'
 
 import type { FormInstance } from 'element-plus'
 import { ref, computed, onMounted } from 'vue'