From 3cd7b2961132d8029231f1ce36a96bbaed5b78da Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Thu, 14 Nov 2024 12:07:40 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E3=80=90=E5=BA=94=E7=94=A8=E3=80=91?=
 =?UTF-8?q?=E7=AE=80=E5=8D=95=E9=85=8D=E7=BD=AE=E4=B8=AD=E5=AF=B9=E8=BF=87?=
 =?UTF-8?q?=E9=95=BF=E5=90=8D=E7=A7=B0=E7=9F=A5=E8=AF=86=E5=BA=93=E8=BF=9B?=
 =?UTF-8?q?=E8=A1=8C=E5=85=B3=E8=81=94=E6=97=B6=E6=9C=89=E6=A6=82=E7=8E=87?=
 =?UTF-8?q?=E5=AF=BC=E8=87=B4=E6=97=A0=E6=B3=95=E6=98=BE=E7=A4=BA=E7=9F=A5?=
 =?UTF-8?q?=E8=AF=86=E5=BA=93=E5=85=A8=E9=83=A8=E5=90=8D=E7=A7=B0(#1596)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/infinite-scroll/index.vue   |  10 +-
 ui/src/router/modules/application.ts          |   7 -
 ui/src/router/modules/dataset.ts              |   2 +-
 .../views/application/ApplicationSetting.vue  |  22 +-
 ui/src/views/application/CreateAndSetting.vue | 546 ------------------
 .../component/AddDatasetDialog.vue            |   4 +-
 6 files changed, 26 insertions(+), 565 deletions(-)
 delete mode 100644 ui/src/views/application/CreateAndSetting.vue

diff --git a/ui/src/components/infinite-scroll/index.vue b/ui/src/components/infinite-scroll/index.vue
index a562c5c28..9fd629a3d 100644
--- a/ui/src/components/infinite-scroll/index.vue
+++ b/ui/src/components/infinite-scroll/index.vue
@@ -12,7 +12,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 
 defineOptions({ name: 'InfiniteScroll' })
 const props = defineProps({
@@ -47,6 +47,14 @@ const props = defineProps({
 const emit = defineEmits(['update:current_page', 'load'])
 const current = ref(props.current_page)
 
+watch(
+  () => props.current_page,
+  (val) => {
+    if (val === 1) {
+      current.value = 1
+    }
+  }
+)
 const noMore = computed(
   () =>
     props.size > 0 && props.size === props.total && props.total > props.page_size && !props.loading
diff --git a/ui/src/router/modules/application.ts b/ui/src/router/modules/application.ts
index df37b7dc6..07fc42e76 100644
--- a/ui/src/router/modules/application.ts
+++ b/ui/src/router/modules/application.ts
@@ -12,13 +12,6 @@ const applicationRouter = {
       name: 'application',
       component: () => import('@/views/application/index.vue')
     },
-    {
-      path: '/application/create',
-      name: 'CreateApplication',
-      meta: { activeMenu: '/application' },
-      component: () => import('@/views/application/CreateAndSetting.vue'),
-      hidden: true
-    },
     {
       path: '/application/:id/:type',
       name: 'ApplicationDetail',
diff --git a/ui/src/router/modules/dataset.ts b/ui/src/router/modules/dataset.ts
index 333802a6e..b6d4c2b9b 100644
--- a/ui/src/router/modules/dataset.ts
+++ b/ui/src/router/modules/dataset.ts
@@ -12,7 +12,7 @@ const datasetRouter = {
       component: () => import('@/views/dataset/index.vue')
     },
     {
-      path: '/dataset/:type', // create 或者 upload
+      path: '/dataset/:type', // upload
       name: 'UploadDocumentDataset',
       meta: { activeMenu: '/dataset' },
       component: () => import('@/views/dataset/UploadDocumentDataset.vue'),
diff --git a/ui/src/views/application/ApplicationSetting.vue b/ui/src/views/application/ApplicationSetting.vue
index ebd043ad2..dd302438c 100644
--- a/ui/src/views/application/ApplicationSetting.vue
+++ b/ui/src/views/application/ApplicationSetting.vue
@@ -252,12 +252,12 @@
                             <AppAvatar v-else class="mr-8 avatar-blue" shape="square" :size="32">
                               <img src="@/assets/icon_document.svg" style="width: 58%" alt="" />
                             </AppAvatar>
-                            <auto-tooltip
-                              :content="relatedObject(datasetList, item, 'id')?.name"
-                              style="width: 80%"
+                            <span
+                              class="ellipsis cursor"
+                              :title="relatedObject(datasetList, item, 'id')?.name"
+                            >
+                              {{ relatedObject(datasetList, item, 'id')?.name }}</span
                             >
-                              {{ relatedObject(datasetList, item, 'id')?.name }}
-                            </auto-tooltip>
                           </div>
                           <el-button text @click="removeDataset(item)">
                             <el-icon>
@@ -326,7 +326,11 @@
                         <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
                       </el-tooltip> -->
                     </div>
-                    <el-switch size="small" v-model="applicationForm.stt_model_enable" @change="sttModelEnableChange"/>
+                    <el-switch
+                      size="small"
+                      v-model="applicationForm.stt_model_enable"
+                      @change="sttModelEnableChange"
+                    />
                   </div>
                 </template>
                 <el-select
@@ -406,7 +410,11 @@
                         <el-icon class="mr-4"><Setting /></el-icon>
                         设置
                       </el-button>
-                      <el-switch size="small" v-model="applicationForm.tts_model_enable" @change="ttsModelEnableChange"/>
+                      <el-switch
+                        size="small"
+                        v-model="applicationForm.tts_model_enable"
+                        @change="ttsModelEnableChange"
+                      />
                     </div>
                   </div>
                 </template>
diff --git a/ui/src/views/application/CreateAndSetting.vue b/ui/src/views/application/CreateAndSetting.vue
deleted file mode 100644
index 7967f3641..000000000
--- a/ui/src/views/application/CreateAndSetting.vue
+++ /dev/null
@@ -1,546 +0,0 @@
-<template>
-  <LayoutContainer
-    :header="
-      id
-        ? $t('views.application.applicationForm.title.edit')
-        : $t('views.application.applicationForm.title.create')
-    "
-    :back-to="id ? '' : '-1'"
-    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="历史聊天记录" @click.prevent>
-                <el-input-number
-                  v-model="applicationForm.dialogue_number"
-                  :min="0"
-                  :value-on-clear="0"
-                  controls-position="right"
-                  class="w-full"
-                />
-              </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 avatar-blue" 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 v-if="!id" @click="router.push({ path: `/application` })"
-            >{{ $t('views.application.applicationForm.buttons.cancel') }}
-          </el-button>
-          <el-button type="primary" @click="submit(applicationFormRef)" :disabled="loading">
-            {{
-              id
-                ? $t('views.application.applicationForm.buttons.save')
-                : $t('views.application.applicationForm.buttons.create')
-            }}
-          </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 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, dataset, application, user } = useStore()
-
-const router = useRouter()
-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: '',
-  dialogue_number: 0,
-  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) {
-      if (id) {
-        application.asyncPutApplication(id, applicationForm.value, loading).then((res) => {
-          MsgSuccess(t('views.application.applicationForm.buttons.saveSuccess'))
-        })
-      } else {
-        applicationApi.postApplication(applicationForm.value, loading).then((res) => {
-          MsgSuccess(t('views.application.applicationForm.buttons.createSuccess'))
-          router.push({ path: `/application` })
-        })
-      }
-    }
-  })
-}
-
-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() {
-  if (id) {
-    application.asyncGetApplicationDataset(id, datasetLoading).then((res: any) => {
-      datasetList.value = res.data
-    })
-  } else {
-    dataset.asyncGetAllDataset(datasetLoading).then((res: any) => {
-      datasetList.value = res.data?.filter((v: any) => v.user_id === user.userInfo?.id)
-    })
-  }
-}
-
-function getModel() {
-  loading.value = true
-  if (id) {
-    applicationApi
-      .getApplicationModel(id)
-      .then((res: any) => {
-        modelOptions.value = groupBy(res?.data, 'provider')
-        loading.value = false
-      })
-      .catch(() => {
-        loading.value = false
-      })
-  } else {
-    model
-      .asyncGetModel()
-      .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()
-  if (id) {
-    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>
diff --git a/ui/src/views/application/component/AddDatasetDialog.vue b/ui/src/views/application/component/AddDatasetDialog.vue
index 6313d7531..2c7ecaa1f 100644
--- a/ui/src/views/application/component/AddDatasetDialog.vue
+++ b/ui/src/views/application/component/AddDatasetDialog.vue
@@ -40,9 +40,7 @@
         <el-row :gutter="12" v-loading="loading">
           <el-col :span="12" v-for="(item, index) in filterData" :key="index" class="mb-16">
             <CardCheckbox value-field="id" :data="item" v-model="checkList" @change="changeHandle">
-              <auto-tooltip :content="item.name" style="max-width: 170px">
-                {{ item.name }}
-              </auto-tooltip>
+              <span class="ellipsis cursor" :title="item.name"> {{ item.name }}</span>
             </CardCheckbox>
           </el-col>
         </el-row>