Merge branch 'pr@main@application_flow' of github.com:1Panel-dev/MaxKB into pr@main@application_flow

ui/src/components/ai-chat/index.vue

@@ -631,7 +631,9 @@ watch(
 
 onMounted(() => {
   setTimeout(() => {
-    quickInputRef.value.textarea.style.height = '0'
+    if (quickInputRef.value) {
+      quickInputRef.value.textarea.style.height = '0'
+    }
   }, 1000)
 })
 

ui/src/layout/components/breadcrumb/index.vue

@@ -161,7 +161,10 @@ function changeMenu(id: string) {
       router.push({ name: lastMatched.name, params: { id: id } })
     } else if (isApplication.value) {
       const type = list.value?.filter((v) => v.id === id)?.[0]?.type
-      if (lastMatched.name === 'AppSetting' && type === 'WORK_FLOW') {
+      if (
+        type === 'WORK_FLOW' &&
+        (lastMatched.name === 'AppSetting' || lastMatched.name === 'AppHitTest')
+      ) {
         router.push({ path: `/application/${id}/${type}/overview` })
       } else {
         router.push({

ui/src/layout/components/sidebar/SidebarItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!menu.meta || !menu.meta.hidden" class="sidebar-item">
+  <div v-if="(!menu.meta || !menu.meta.hidden) && showMenu()" class="sidebar-item">
     <el-menu-item
       ref="subMenu"
       :index="menu.path"
@@ -23,15 +23,22 @@ const props = defineProps<{
   activeMenu: any
 }>()
 
-const route = useRoute()
-
 const router = useRouter()
+const route = useRoute()
 const {
   params: { id, type }
 } = route as any
 
+function showMenu() {
+  if (type === 'WORK_FLOW') {
+    return props.menu.name !== 'AppHitTest'
+  } else {
+    return true
+  }
+}
+
 function clickHandle(item: any) {
-  if (item.name === 'AppSetting' && type === 'WORK_FLOW') {
+  if (type === 'WORK_FLOW' && item.name === 'AppSetting') {
     router.push({ path: `/application/${id}/workflow` })
   }
 }

ui/src/router/modules/application.ts

@@ -48,7 +48,7 @@ const applicationRouter = {
             parentPath: '/application/:id/:type',
             parentName: 'ApplicationDetail'
           },
-          component: () => import('@/views/application/CreateAndSetting.vue')
+          component: () => import('@/views/application/ApplicationSetting.vue')
         },
         {
           path: 'hit-test',

ui/src/views/application-workflow/index.vue

@@ -4,6 +4,9 @@
       <div class="flex align-center">
         <back-button to="-1"></back-button>
         <h4>{{ detail?.name }}</h4>
+        <el-text type="info" class="ml-16" v-if="saveTime"
+          >保存时间：{{ datetimeFormat(saveTime) }}</el-text
+        >
       </div>
       <div>
         <el-button icon="Plus" @click="showPopover = !showPopover" v-click-outside="clickoutside">
@@ -13,7 +16,8 @@
           <AppIcon iconName="app-play-outlined" class="mr-4"></AppIcon>
           调试</el-button
         >
-        <el-button type="primary" @click="publicHandle"> 保存 </el-button>
+        <el-button @click="saveApplication"> 保存 </el-button>
+        <el-button type="primary" @click="publicHandle"> 发布 </el-button>
       </div>
     </div>
     <!-- 下拉框 -->
@@ -77,6 +81,7 @@ import { menuNodes } from '@/workflow/common/data'
 import { iconComponent } from '@/workflow/icons/utils'
 import applicationApi from '@/api/application'
 import { MsgSuccess, MsgConfirm } from '@/utils/message'
+import { datetimeFormat } from '@/utils/time'
 import useStore from '@/stores'
 const { application } = useStore()
 const route = useRoute()
@@ -94,6 +99,7 @@ const detail = ref<any>(null)
 const showPopover = ref(false)
 const showDebug = ref(false)
 const enlarge = ref(false)
+const saveTime = ref<any>('')
 
 function publicHandle() {
   workflowRef.value?.validate().then(() => {
@@ -132,15 +138,21 @@ function getDetail() {
   })
 }
 
+function saveApplication() {
+  const obj = {
+    work_flow: getGraphData()
+  }
+  application.asyncPutApplication(id, obj).then((res) => {
+    saveTime.value = new Date()
+  })
+}
+
 /**
  * 定时保存
  */
 const initInterval = () => {
   interval = setInterval(() => {
-    const obj = {
-      work_flow: getGraphData()
-    }
-    application.asyncPutApplication(id, obj)
+    saveApplication()
   }, 60000)
 }
 
@@ -181,9 +193,9 @@ onBeforeUnmount(() => {
     user-select: none; /* CSS3属性 */
     position: absolute;
     top: 110px;
-    right: 23px;
+    right: 77px;
     z-index: 99;
-    width: 253px;
+    width: 263px;
     box-shadow: 0px 4px 8px 0px var(--app-text-color-light-1);
     background: #ffffff;
     padding-bottom: 8px;

ui/src/views/application/ApplicationSetting.vue

@@ -0,0 +1,507 @@
+<template>
+  <LayoutContainer
+    :header="$t('views.application.applicationForm.title.edit')"
+    class="create-application"
+  >
+    <el-row v-loading="loading">
+      <el-col :span="10">
+        <div class="p-24 mb-16" style="padding-bottom: 0">
+          <h4 class="title-decoration-1">
+            {{ $t('views.application.applicationForm.title.info') }}
+          </h4>
+        </div>
+        <div class="scrollbar-height-left">
+          <el-scrollbar>
+            <el-form
+              hide-required-asterisk
+              ref="applicationFormRef"
+              :model="applicationForm"
+              :rules="rules"
+              label-position="top"
+              require-asterisk-position="right"
+              class="p-24"
+              style="padding-top: 0"
+            >
+              <el-form-item prop="name">
+                <template #label>
+                  <div class="flex-between">
+                    <span
+                      >{{ $t('views.application.applicationForm.form.appName.label') }}
+                      <span class="danger">*</span></span
+                    >
+                  </div>
+                </template>
+                <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="$t('views.application.applicationForm.form.aiModel.label')"
+                prop="model_id"
+              >
+                <template #label>
+                  <div class="flex-between">
+                    <span>{{ $t('views.application.applicationForm.form.aiModel.label') }}</span>
+                  </div>
+                </template>
+                <el-select
+                  v-model="applicationForm.model_id"
+                  :placeholder="$t('views.application.applicationForm.form.aiModel.placeholder')"
+                  class="w-full"
+                  popper-class="select-model"
+                  :clearable="true"
+                >
+                  <el-option-group
+                    v-for="(value, label) in modelOptions"
+                    :key="value"
+                    :label="relatedObject(providerOptions, label, 'provider')?.name"
+                  >
+                    <el-option
+                      v-for="item in value.filter((v: any) => v.status === 'SUCCESS')"
+                      :key="item.id"
+                      :label="item.name"
+                      :value="item.id"
+                      class="flex-between"
+                    >
+                      <div class="flex">
+                        <span
+                          v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                          class="model-icon mr-8"
+                        ></span>
+                        <span>{{ item.name }}</span>
+                      </div>
+                      <el-icon class="check-icon" v-if="item.id === applicationForm.model_id"
+                        ><Check
+                      /></el-icon>
+                    </el-option>
+                    <!-- 不可用 -->
+                    <el-option
+                      v-for="item in value.filter((v: any) => v.status !== 'SUCCESS')"
+                      :key="item.id"
+                      :label="item.name"
+                      :value="item.id"
+                      class="flex-between"
+                      disabled
+                    >
+                      <div class="flex">
+                        <span
+                          v-html="relatedObject(providerOptions, label, 'provider')?.icon"
+                          class="model-icon mr-8"
+                        ></span>
+                        <span>{{ item.name }}</span>
+                        <span class="danger">{{
+                          $t('views.application.applicationForm.form.aiModel.unavailable')
+                        }}</span>
+                      </div>
+                      <el-icon class="check-icon" v-if="item.id === applicationForm.model_id"
+                        ><Check
+                      /></el-icon>
+                    </el-option>
+                  </el-option-group>
+                  <template #footer>
+                    <div class="w-full text-left cursor" @click="openCreateModel()">
+                      <el-button type="primary" link>
+                        <el-icon class="mr-4"><Plus /></el-icon>
+                        {{ $t('views.application.applicationForm.form.addModel') }}
+                      </el-button>
+                    </div>
+                  </template>
+                </el-select>
+              </el-form-item>
+              <el-form-item
+                :label="$t('views.application.applicationForm.form.prompt.label')"
+                prop="model_setting.prompt"
+              >
+                <template #label>
+                  <div class="flex align-center">
+                    <div class="flex-between mr-4">
+                      <span
+                        >{{ $t('views.application.applicationForm.form.prompt.label') }}
+                        <span class="danger">*</span></span
+                      >
+                    </div>
+                    <el-tooltip effect="dark" placement="right">
+                      <template #content>{{
+                        $t('views.application.applicationForm.form.prompt.tooltip', {
+                          data: '{data}',
+                          question: '{question}'
+                        })
+                      }}</template>
+                      <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+                    </el-tooltip>
+                  </div>
+                </template>
+                <el-input
+                  v-model="applicationForm.model_setting.prompt"
+                  :rows="6"
+                  type="textarea"
+                  maxlength="2048"
+                  :placeholder="defaultPrompt"
+                />
+              </el-form-item>
+              <el-form-item
+                :label="$t('views.application.applicationForm.form.multipleRoundsDialogue')"
+                @click.prevent
+              >
+                <el-switch
+                  size="small"
+                  v-model="applicationForm.multiple_rounds_dialogue"
+                ></el-switch>
+              </el-form-item>
+              <el-form-item
+                label="$t('views.application.applicationForm.form.relatedKnowledgeBase')"
+              >
+                <template #label>
+                  <div class="flex-between">
+                    <span>{{
+                      $t('views.application.applicationForm.form.relatedKnowledgeBase')
+                    }}</span>
+                    <div>
+                      <el-button type="primary" link @click="openParamSettingDialog">
+                        <AppIcon iconName="app-operation" class="mr-4"></AppIcon
+                        >{{ $t('views.application.applicationForm.form.paramSetting') }}
+                      </el-button>
+                      <el-button type="primary" link @click="openDatasetDialog">
+                        <el-icon class="mr-4"><Plus /></el-icon
+                        >{{ $t('views.application.applicationForm.form.add') }}
+                      </el-button>
+                    </div>
+                  </div>
+                </template>
+                <div class="w-full">
+                  <el-text type="info" v-if="applicationForm.dataset_id_list?.length === 0">{{
+                    $t('views.application.applicationForm.form.relatedKnowledgeBaseWhere')
+                  }}</el-text>
+                  <el-row :gutter="12" v-else>
+                    <el-col
+                      :xs="24"
+                      :sm="24"
+                      :md="24"
+                      :lg="12"
+                      :xl="12"
+                      class="mb-8"
+                      v-for="(item, index) in applicationForm.dataset_id_list"
+                      :key="index"
+                    >
+                      <el-card class="relate-dataset-card border-r-4" shadow="never">
+                        <div class="flex-between">
+                          <div class="flex align-center">
+                            <AppAvatar
+                              v-if="relatedObject(datasetList, item, 'id')?.type === '1'"
+                              class="mr-8 avatar-purple"
+                              shape="square"
+                              :size="32"
+                            >
+                              <img src="@/assets/icon_web.svg" style="width: 58%" alt="" />
+                            </AppAvatar>
+
+                            <AppAvatar v-else class="mr-8" shape="square" :size="32">
+                              <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
+                            </AppAvatar>
+                            <div class="ellipsis">
+                              {{ relatedObject(datasetList, item, 'id')?.name }}
+                            </div>
+                          </div>
+                          <el-button text @click="removeDataset(item)">
+                            <el-icon><Close /></el-icon>
+                          </el-button>
+                        </div>
+                      </el-card>
+                    </el-col>
+                  </el-row>
+                </div>
+              </el-form-item>
+              <el-form-item :label="$t('views.application.applicationForm.form.prologue')">
+                <MdEditor
+                  class="prologue-md-editor"
+                  v-model="applicationForm.prologue"
+                  :preview="false"
+                  :toolbars="[]"
+                  :footers="[]"
+                />
+              </el-form-item>
+              <el-form-item @click.prevent>
+                <template #label>
+                  <div class="flex align-center">
+                    <span class="mr-4">{{
+                      $t('views.application.applicationForm.form.problemOptimization.label')
+                    }}</span>
+                    <el-tooltip
+                      effect="dark"
+                      :content="
+                        $t('views.application.applicationForm.form.problemOptimization.tooltip')
+                      "
+                      placement="right"
+                    >
+                      <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+                    </el-tooltip>
+                  </div>
+                </template>
+                <el-switch size="small" v-model="applicationForm.problem_optimization"></el-switch>
+              </el-form-item>
+            </el-form>
+          </el-scrollbar>
+        </div>
+        <div class="text-right border-t p-16">
+          <el-button type="primary" @click="submit(applicationFormRef)" :disabled="loading">
+            保存并发布
+          </el-button>
+        </div>
+      </el-col>
+      <el-col :span="14" class="p-24 border-l">
+        <h4 class="title-decoration-1 mb-16">
+          {{ $t('views.application.applicationForm.form.apptest') }}
+        </h4>
+        <div class="dialog-bg">
+          <h4 class="p-24">
+            {{
+              applicationForm?.name || $t('views.application.applicationForm.form.appName.label')
+            }}
+          </h4>
+          <div class="scrollbar-height">
+            <AiChat :data="applicationForm"></AiChat>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+
+    <ParamSettingDialog ref="ParamSettingDialogRef" @refresh="refreshParam" />
+    <AddDatasetDialog
+      ref="AddDatasetDialogRef"
+      @addData="addDataset"
+      :data="datasetList"
+      @refresh="refresh"
+      :loading="datasetLoading"
+    />
+
+    <!-- 添加模版 -->
+    <CreateModelDialog
+      ref="createModelRef"
+      @submit="getModel"
+      @change="openCreateModel($event)"
+    ></CreateModelDialog>
+    <SelectProviderDialog ref="selectProviderRef" @change="openCreateModel($event)" />
+  </LayoutContainer>
+</template>
+<script setup lang="ts">
+import { reactive, ref, watch, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { groupBy } from 'lodash'
+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'
+import applicationApi from '@/api/application'
+import type { FormInstance, FormRules } from 'element-plus'
+import type { ApplicationFormType } from '@/api/type/application'
+import type { Provider } from '@/api/type/model'
+import { relatedObject } from '@/utils/utils'
+import { MsgSuccess } from '@/utils/message'
+import useStore from '@/stores'
+import { t } from '@/locales'
+const { model, application } = useStore()
+
+const route = useRoute()
+const {
+  params: { id }
+} = route as any
+// @ts-ignore
+const defaultPrompt = t('views.application.prompt.defaultPrompt', {
+  data: '{data}',
+  question: '{question}'
+})
+
+const ParamSettingDialogRef = ref<InstanceType<typeof ParamSettingDialog>>()
+const createModelRef = ref<InstanceType<typeof CreateModelDialog>>()
+const selectProviderRef = ref<InstanceType<typeof SelectProviderDialog>>()
+
+const applicationFormRef = ref<FormInstance>()
+const AddDatasetDialogRef = ref()
+
+const loading = ref(false)
+const datasetLoading = ref(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'
+    }
+  ],
+  'model_setting.prompt': [
+    {
+      required: true,
+      message: t('views.application.applicationForm.form.prompt.placeholder'),
+      trigger: 'blur'
+    }
+  ]
+})
+const modelOptions = ref<any>(null)
+const providerOptions = ref<Array<Provider>>([])
+const datasetList = ref([])
+
+const submit = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      application.asyncPutApplication(id, applicationForm.value, loading).then((res) => {
+        MsgSuccess(t('views.application.applicationForm.buttons.saveSuccess'))
+      })
+    }
+  })
+}
+
+const openParamSettingDialog = () => {
+  ParamSettingDialogRef.value?.open(applicationForm.value.dataset_setting)
+}
+
+function refreshParam(data: any) {
+  applicationForm.value.dataset_setting = data
+}
+
+const openCreateModel = (provider?: Provider) => {
+  if (provider && provider.provider) {
+    createModelRef.value?.open(provider)
+  } else {
+    selectProviderRef.value?.open()
+  }
+}
+
+function removeDataset(id: any) {
+  if (applicationForm.value.dataset_id_list) {
+    applicationForm.value.dataset_id_list.splice(
+      applicationForm.value.dataset_id_list.indexOf(id),
+      1
+    )
+  }
+}
+function addDataset(val: Array<string>) {
+  applicationForm.value.dataset_id_list = val
+}
+function openDatasetDialog() {
+  AddDatasetDialogRef.value.open(applicationForm.value.dataset_id_list)
+}
+
+function getDetail() {
+  application.asyncGetApplicationDetail(id, loading).then((res: any) => {
+    applicationForm.value = res.data
+    applicationForm.value.model_id = res.data.model
+  })
+}
+
+function getDataset() {
+  application.asyncGetApplicationDataset(id, datasetLoading).then((res: any) => {
+    datasetList.value = res.data
+  })
+}
+
+function getModel() {
+  loading.value = true
+  applicationApi
+    .getApplicationModel(id)
+    .then((res: any) => {
+      modelOptions.value = groupBy(res?.data, 'provider')
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+function getProvider() {
+  loading.value = true
+  model
+    .asyncGetProvider()
+    .then((res: any) => {
+      providerOptions.value = res?.data
+      loading.value = false
+    })
+    .catch(() => {
+      loading.value = false
+    })
+}
+
+function refresh() {
+  getDataset()
+}
+
+onMounted(() => {
+  getProvider()
+  getModel()
+  getDataset()
+  getDetail()
+})
+</script>
+<style lang="scss" scoped>
+.create-application {
+  .relate-dataset-card {
+    color: var(--app-text-color);
+  }
+  .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) - 127px);
+  }
+  .scrollbar-height {
+    height: calc(var(--app-main-height) - 150px);
+  }
+}
+
+.prologue-md-editor {
+  height: 150px;
+}
+</style>