feat: knowledge components

Author: wangdan-fit2cloud

ui/src/components/dynamics-form/constructor/items/KnowledgeConstructor.vue

@@ -1,8 +1,13 @@
 <template>
   <el-form-item
-    :label="$t('dynamicsForm.Knowledge.label', '可选知识库')"
     prop="knowledge_list"
-    :rules="[{ message: '请至少选择一个可选知识库', type: 'array', min: 1 }]"
+    :rules="[
+      {
+        message: $t('dynamicsForm.KnowledgeConstructor.optionalKnowledgePlaceholder'),
+        type: 'array',
+        min: 1,
+      },
+    ]"
   >
     <template #label>
       <div
@@ -16,7 +21,10 @@
           >
             <CaretRight />
           </el-icon>
-          <span class="lighter">可选知识库</span>
+          <span class="lighter"
+            >{{ $t('dynamicsForm.KnowledgeConstructor.optionalKnowledge') }}
+            <span class="color-danger">*</span>
+          </span>
           <span class="ml-4" v-if="formValue.knowledge_list?.length"
             >({{ formValue.knowledge_list.length }})</span
           >
@@ -29,14 +37,16 @@
       </div>
     </template>
     <div class="w-full" v-if="collapseData.optional_knowledge">
-      <el-text type="info" v-if="formValue.knowledge_list?.length === 0">
-        请选择关联的知识库
-      </el-text>
-      <div v-else>
-        <template v-for="(item, index) in formValue.knowledge_list" :key="item.id">
-          <div class="flex-between border border-r-6 white-bg mb-4" style="padding: 5px 8px">
+      <div v-if="formValue.knowledge_list?.length > 0">
+        <template v-for="(item, index) in formValue.knowledge_list" :key="index">
+          <div class="flex-between border border-r-6 white-bg mb-8" style="padding: 3px 12px">
             <div class="flex align-center" style="width: 80%">
-              <KnowledgeIcon :type="item.type" class="mr-8" :size="20" />
+              <KnowledgeIcon
+                :type="item.type"
+                class="mr-8"
+                :size="20"
+                style="--el-avatar-border-radius: 6px"
+              />
 
               <span class="ellipsis cursor" :title="item.name"> {{ item.name }}</span>
             </div>
@@ -46,19 +56,20 @@
           </div>
         </template>
       </div>
+      <el-text type="info" v-else>
+        {{ $t('dynamicsForm.KnowledgeConstructor.optionalKnowledgePlaceholder') }}
+      </el-text>
     </div>
   </el-form-item>
   <el-form-item
-    :label="$t('dynamicsForm.Knowledge.defaultLabel', '默认知识库')"
+    :label="$t('dynamicsForm.KnowledgeConstructor.defaultKnowledge')"
     prop="default_value"
     required
-    :rules="[{ message: '请选择默认知识库', type: 'array', min: 1 }]"
+    :rules="[{ message: $t('views.chatLog.selectKnowledgePlaceholder'), type: 'array', min: 1 }]"
+    v-if="formValue.knowledge_list && formValue.knowledge_list.length > 0"
   >
     <div class="w-full" v-if="formValue.knowledge_list?.length > 0">
-      <Knowledge
-        v-model="formValue.default_value"
-        :form-field="formField"
-      />
+      <Knowledge v-model="formValue.default_value" :form-field="formField" />
     </div>
   </el-form-item>
   <AddKnowledgeDialog
@@ -73,6 +84,7 @@ import { computed, reactive, ref } from 'vue'
 import AddKnowledgeDialog from '@/views/application/component/AddKnowledgeDialog.vue'
 import Knowledge from '../../items/knowledge/Knowledge.vue'
 import type { FormField } from '../../type'
+
 const props = defineProps<{
   modelValue: any
 }>()

ui/src/components/dynamics-form/constructor/items/ModelConstructor.vue

@@ -20,13 +20,13 @@
   </el-form-item>
 
   <el-form-item
-    :label="$t('dynamicsForm.ModelConstructor.optionalModel.label')"
+    :label="$t('dynamicsForm.ModelConstructor.optionalModel')"
     required
     prop="provider_list"
     :rules="[
       {
         required: true,
-        message: $t('dynamicsForm.ModelConstructor.optionalModel.required'),
+        message: $t('dynamicsForm.ModelConstructor.modelPlaceholder'),
         type: 'array',
       },
     ]"
@@ -35,7 +35,7 @@
       <ModelSelect
         multiple
         v-model="selectedIds"
-        :placeholder="$t('dynamicsForm.ModelConstructor.optionalModel.required')"
+        :placeholder="$t('dynamicsForm.ModelConstructor.modelPlaceholder')"
         :options="groupedModelOptions"
         @change="handleProviderListChange"
         :model-type="formValue.model_type"
@@ -44,12 +44,12 @@
     </div>
   </el-form-item>
   <el-form-item
-    :label="$t('dynamicsForm.ModelConstructor.defaultModel.label')"
+    :label="$t('dynamicsForm.ModelConstructor.defaultModel')"
     required
     :rules="[
       {
         required: true,
-        message: $t('dynamicsForm.ModelConstructor.defaultModel.required'),
+        message: $t('dynamicsForm.ModelConstructor.modelPlaceholder'),
       },
     ]"
     v-if="formValue.provider_list && formValue.provider_list.length > 0"
@@ -58,7 +58,7 @@
       <el-select
         v-model="formValue.default_value"
         value-key="model_id"
-        :placeholder="$t('dynamicsForm.ModelConstructor.defaultModel.required')"
+        :placeholder="$t('dynamicsForm.ModelConstructor.modelPlaceholder')"
       >
         <el-option-group
           v-for="(modelList, providerName) in selectedModelsOptions"
@@ -251,13 +251,6 @@ function handleProviderListChange() {
   }
 }
 
-function removeSelectedModel(modelId: string) {
-  formValue.value.provider_list = formValue.value.provider_list.filter(
-    (p: any) => p.model_id !== modelId,
-  )
-  handleProviderListChange()
-}
-
 const getData = () => {
   const providerList = (formValue.value.provider_list || []).map((p: any) => {
     const modelInfo = getModelInfo(p.model_id)

ui/src/components/dynamics-form/items/Knowledge/Knowledge.vue

@@ -4,28 +4,23 @@
       v-model="selectedIds"
       multiple
       class="w-full"
-      :placeholder="$t('dynamicsForm.Knowledge.placeholder', '请选择知识库')"
+      :placeholder="$t('views.chatLog.selectKnowledgePlaceholder')"
     >
       <el-option v-for="item in availableList" :key="item.id" :label="item.name" :value="item.id">
-        <div class="flex align-center">
-          <KnowledgeIcon :type="item.type" class="mr-8" :size="20" />
+        <el-space :size="8">
+          <KnowledgeIcon :type="item.type" :size="20" style="--el-avatar-border-radius: 6px" />
           <span>{{ item.name }}</span>
-        </div>
+        </el-space>
       </el-option>
-      <template #tag>
-        <el-tag
-          v-for="item in selectedItems"
-          :key="item.id"
-          closable
-          type="info"
-          @close="removeItem(item.id)"
-          style="margin-right: 4px"
-        >
-          <div class="flex align-center">
-            <KnowledgeIcon :type="item.type" class="mr-4" :size="16" />
-            <span>{{ item.name }}</span>
-          </div>
-        </el-tag>
+      <template #label="{ label, value }">
+        <el-space :size="8">
+          <KnowledgeIcon
+            :type="relatedObject(availableList, value, 'id')?.type"
+            :size="14"
+            style="--el-avatar-border-radius: 4px"
+          />
+          <span>{{ label }}</span>
+        </el-space>
       </template>
     </el-select>
   </div>
@@ -34,7 +29,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { FormField } from '../../type'
-
+import { relatedObject } from '@/utils/array'
 const props = withDefaults(
   defineProps<{
     modelValue?: string[]
@@ -57,19 +52,11 @@ const availableList = computed(() => {
   return (props.formField.attrs?.knowledge_list as any[]) || []
 })
 
-const selectedItems = computed(() => {
-  return availableList.value.filter((k: any) => selectedIds.value.includes(k.id))
-})
-
 const selectedIds = computed({
   get: () => model_value.value || [],
   set: (ids: string[]) => {
     model_value.value = ids
   },
 })
-
-function removeItem(id: string) {
-  model_value.value = model_value.value.filter((item_id: string) => item_id !== id)
-}
 </script>
 <style lang="scss" scoped></style>

ui/src/locales/lang/en-US/dynamics-form.ts

@@ -131,13 +131,13 @@ export default {
     },
   },
   ModelConstructor: {
-    optionalModel: {
-      label: 'Optional Model',
-      required: 'Please select optional models',
-    },
-    defaultModel: {
-      label: 'Default Model',
-      required: 'Please select a default model',
-    },
+    optionalModel: 'Optional Model',
+    defaultModel: 'Default Model',
+    modelPlaceholder: 'Please enter a model',
+  },
+  KnowledgeConstructor: {
+    optionalModel: 'Optional Model',
+    defaultModel: 'Default Model',
+    modelPlaceholder: 'Please enter a model',
   },
 }

ui/src/locales/lang/zh-CN/dynamics-form.ts

@@ -130,13 +130,13 @@ export default {
     },
   },
   ModelConstructor: {
-    optionalModel: {
-      label: '可选模型',
-      required: '请选择可选模型',
-    },
-    defaultModel: {
-      label: '默认模型',
-      required: '请选择默认模型',
-    },
+    optionalModel: '可选模型',
+    defaultModel: '默认模型',
+    modelPlaceholder: '请选择模型',
+  },
+  KnowledgeConstructor: {
+    optionalKnowledge: '可选知识库',
+    optionalKnowledgePlaceholder: '请选择可选知识库',
+    defaultKnowledge: '默认知识库',
   },
 }

ui/src/locales/lang/zh-Hant/dynamics-form.ts

@@ -131,13 +131,8 @@ export default {
     },
   },
   ModelConstructor: {
-    optionalModel: {
-      label: '可選模型',
-      required: '請選擇可選模型',
-    },
-    defaultModel: {
-      label: '默認模型',
-      required: '請選擇默認模型',
-    },
+    optionalModel: '選擇模型',
+    defaultModel: '預設模型',
+    modelPlaceholder: '請輸入模型名稱',
   },
 }