feat: 应用配置引用知识库

src/apis/knowledge.ts

@@ -73,6 +73,14 @@ export function fetchTrainKnowledge<T>(payload: object) {
   return request.post<T>('/knowledgeRest/trainKnowledge.json', payload)
 }
 
+/**
+ * @params kdIds 知识库Id列表
+ * @returns 【根据知识库ID】获取知识库列表
+ */
+export function fetchGetKnowledgeListByKdIds<T>(kdIds: number[]) {
+  return request.post<T>('/knowledgeRest/getKnowledgeListByKnowledgeInfoIds.json', kdIds)
+}
+
 /* 知识库部分结束 */
 
 /* 知识库文档部分开始 */

src/components/custom-modal/custom-modal.vue

@@ -15,6 +15,7 @@ interface Props {
   confirmBtnText?: string // 取消按钮文字
   labelWidth?: number // 标签的宽度
   labelPlacement?: 'left' | 'top' // 标签显示的位置
+  contentStyle?: object
 }
 
 interface Emits {
@@ -35,6 +36,7 @@ const props = withDefaults(defineProps<Props>(), {
   confirmBtnText: 'common_module.confirm_btn_text',
   labelWidth: 80,
   labelPlacement: 'left',
+  contentStyle: () => ({}),
 })
 
 const emit = defineEmits<Emits>()
@@ -47,6 +49,10 @@ const modalBasicStyle = {
   borderRadius: props.borderRadius + 'px',
 }
 
+const contentStyle = computed(() => {
+  return { ...modalContentStyle, ...props.contentStyle }
+})
+
 const showModal = computed({
   get() {
     return props.isShow
@@ -76,14 +82,14 @@ function handleConfirm() {
     :bordered="false"
     :auto-focus="false"
     :header-style="modalHeaderStyle"
-    :content-style="modalContentStyle"
+    :content-style="contentStyle"
     :footer-style="modalFooterStyle"
     :on-mask-click="handleCloseModal"
     @close="handleCloseModal"
   >
     <template #header>
       <slot v-if="slots.header" name="header" />
-      <div v-else>{{ title }}</div>
+      <div v-else class="text-[18px] leading-none">{{ title }}</div>
     </template>
 
     <div>

src/components/custom-modal/modal-style.ts

 export const modalHeaderStyle = {
-  padding: '24px 24px 16px',
-  fontSize: '18px',
+  padding: '24px',
 }
 
 export const modalContentStyle = {

src/locales/langs/en.yaml

@@ -75,6 +75,13 @@ common_module:
   wipe_data: 'Wipe Data '
   delete_all_tip_title: 'Clear Data Prompt'
   search: 'Search'
+  add: 'Add'
+  remove: 'Remove'
+  add_knowledge: 'Add Knowledge Base'
+  no_file: 'No file'
+  view_file: 'View file'
+  total_file: '1 file in total | {count} files in total'
+
 
   dialogue_module:
     continue_question_message: 'You can keep asking questions'
@@ -257,6 +264,8 @@ personal_space_module:
         memory_variable_delete_tip_content: 'After deletion, it cannot be revoked. If the application has already been released, after the update is released, users of the application will not be able to use the memory variable. Do you want to continue?'
         memory_fragment_delete_all_tip_content: 'After data is cleared, it cannot be revoked. Are you sure you want to clear it all?'
         memory_fragment_delete_row_tip_content: 'After data deletion, it cannot be revoked. Are you sure you want to delete it?'
+        add_knowledge_successfully: 'Data set {0} was added successfully'
+        remove_knowledge_successfully: 'Data set {0} was removed successfully'
 
         memory_variable_modal:
           edit_memory_variable: 'Edit memory variable'

src/locales/langs/zh-cn.yaml

@@ -74,6 +74,13 @@ common_module:
   wipe_data: '清空数据'
   delete_all_tip_title: '清空数据提示'
   search: '搜索'
+  add: '添加'
+  remove: '移除'
+  add_knowledge: '添加知识库'
+  no_file: '暂无文件'
+  view_file: '查看文件'
+  total_file: '共{count}个文件'
+
 
   dialogue_module:
     continue_question_message: '你可以继续提问'
@@ -255,6 +262,8 @@ personal_space_module:
         memory_variable_delete_tip_content: '删除后不可撤销。如应用已发布，更新发布后该应用的用户无法使用该记忆变量，是否继续？'
         memory_fragment_delete_all_tip_content: '数据清空后不可撤销，确定要全部清空吗?'
         memory_fragment_delete_row_tip_content: '数据删除后不可撤销，确定要删除吗?'
+        add_knowledge_successfully: '数据集 {0} 添加成功'
+        remove_knowledge_successfully: '数据集 {0} 移除成功'
 
         memory_variable_modal:
           edit_memory_variable: '编辑记忆变量'

src/locales/langs/zh-hk.yaml

@@ -74,6 +74,12 @@ common_module:
   wipe_data: '清空數據'
   delete_all_tip_title: '清空數據提示'
   search: '搜索'
+  add: '添加'
+  remove: '移除'
+  add_knowledge: '添加知識庫'
+  no_file: '暫無文件'
+  view_file: '查看文件'
+  total_file: '共{count}個文件'
 
   dialogue_module:
     continue_question_message: '你可以繼續提問'
@@ -255,6 +261,8 @@ personal_space_module:
         memory_variable_delete_tip_content: '删除後不可撤銷。 如應用已發佈，更新發佈後該應用的用戶無法使用該記憶變數，是否繼續？'
         memory_fragment_delete_all_tip_content: '數據清空後不可撤銷，確定要全部清空嗎？'
         memory_fragment_delete_row_tip_content: '數據删除後不可撤銷，確定要删除嗎?'
+        add_knowledge_successfully: '數據集 {0} 添加成功'
+        remove_knowledge_successfully: '數據集 {0} 移除成功'
 
         memory_variable_modal:
           edit_memory_variable: '編輯記憶變數'

src/store/types/personal-app-config.ts

@@ -26,7 +26,7 @@ export interface PersonalAppConfigState {
     isLongMemory: string
   }
   knowledgeConfig: {
-    knowledgeIds: string[] //知识库ID
+    knowledgeIds: number[] //知识库ID
   }
   commModelConfig: {
     largeModel: string //大模型

src/views/personal-space/personal-app-setting/components/agent-associated-knowledge.vue

+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { Plus, RightOne } from '@icon-park/vue-next'
+import { fetchGetKnowledgeListByKdIds } from '@/apis/knowledge'
+import AssociatedKnowledgeModal from './associated-knowledge-modal.vue'
+import { KnowledgeItem } from '../../personal-knowledge/knowledge-type'
+
+const { t } = useI18n()
+
+const knowledgeConfig = defineModel<{ knowledgeIds: number[] }>('knowledgeConfig', { required: true })
+
+const isShowAssociatedKnowledgeModel = ref(false)
+const knowledgeConfigExpandedNames = ref<string[]>([])
+const selectKnowledgeList = ref<KnowledgeItem[]>([])
+const hoverKdId = ref(0)
+
+watch(
+  () => knowledgeConfig.value.knowledgeIds,
+  async (newKdIds) => {
+    if (newKdIds.length > 0) {
+      knowledgeConfigExpandedNames.value = ['knowledge']
+      await handleGetKnowledgeListByIds()
+
+      knowledgeConfig.value.knowledgeIds = []
+      selectKnowledgeList.value.forEach((knowledgeItem) => {
+        knowledgeConfig.value.knowledgeIds.push(knowledgeItem.id)
+      })
+    }
+  },
+  { once: true },
+)
+
+const isHoverKnowledgeItem = computed(() => (kdId: number) => {
+  return hoverKdId.value === kdId
+})
+
+async function handleGetKnowledgeListByIds() {
+  const res = await fetchGetKnowledgeListByKdIds<KnowledgeItem[]>(knowledgeConfig.value.knowledgeIds)
+
+  if (res.code === 0) {
+    selectKnowledgeList.value = res.data
+  }
+}
+
+function handleShowAssociatedKnowledgeModel() {
+  isShowAssociatedKnowledgeModel.value = true
+}
+
+function handleUpdateKnowledgeConfigExpandedNames(expandedNames: string[]) {
+  knowledgeConfigExpandedNames.value = expandedNames
+}
+
+function handleMouseoverKnowledgeItem(kdId: number) {
+  hoverKdId.value = kdId
+}
+
+function handleMouseleaveKnowledgeItem() {
+  hoverKdId.value = 0
+}
+
+function handleToKnowledgeDocument(kdId: number) {
+  const url = `${window.location.origin}/fe/knowledge/document/${kdId}`
+  window.open(url, '_blank')
+}
+
+function handleDeleteKnowledgeItem(kdId: number) {
+  knowledgeConfig.value.knowledgeIds = knowledgeConfig.value.knowledgeIds.filter((id) => id !== kdId)
+  selectKnowledgeList.value = selectKnowledgeList.value.filter((item) => item.id !== kdId)
+}
+
+function handleCloseAssociatedKnowledgeModal() {
+  knowledgeConfig.value.knowledgeIds.length && handleGetKnowledgeListByIds()
+}
+</script>
+
+<template>
+  <section class="border-b border-[#e8e9eb] px-5">
+    <div class="pt-4">
+      <h2 class="my-3 text-[#84868c]">
+        {{ t('personal_space_module.agent_module.agent_setting_module.agent_config_module.knowledge') }}
+      </h2>
+
+      <NCollapse
+        :expanded-names="knowledgeConfigExpandedNames"
+        :trigger-areas="['main', 'arrow']"
+        @update:expanded-names="handleUpdateKnowledgeConfigExpandedNames"
+      >
+        <template #arrow>
+          <RightOne theme="multi-color" size="17" fill="#333" />
+        </template>
+
+        <NCollapseItem
+          :title="t('personal_space_module.agent_module.agent_setting_module.agent_config_module.knowledge_base')"
+          name="knowledge"
+          class="my-[13px]!"
+        >
+          <template #header-extra>
+            <NTooltip trigger="hover">
+              <template #trigger>
+                <Plus
+                  theme="outline"
+                  size="21"
+                  :stroke-width="3"
+                  class="text-theme-color cursor-pointer"
+                  @click="handleShowAssociatedKnowledgeModel"
+                />
+              </template>
+              {{ t('common_module.add_knowledge') }}
+            </NTooltip>
+          </template>
+
+          <ul v-show="selectKnowledgeList.length" class="flex flex-col gap-2">
+            <li
+              v-for="knowledgeItem in selectKnowledgeList"
+              :key="knowledgeItem.id"
+              class="rounded-theme flex cursor-pointer justify-between gap-2 border border-[#f2f5f9] px-3 py-1.5 hover:bg-[#f2f5f9]"
+              @mouseover="handleMouseoverKnowledgeItem(knowledgeItem.id)"
+              @mouseleave="handleMouseleaveKnowledgeItem"
+              @click="handleToKnowledgeDocument(knowledgeItem.id)"
+            >
+              <div class="flex items-center gap-2 overflow-hidden">
+                <div
+                  class="h-6 w-6 bg-[url(https://gsst-poe-sit.gz.bcebos.com/data/20241012/1728700558225.png)] bg-contain bg-no-repeat"
+                />
+
+                <n-ellipsis class="flex-1">
+                  <span class="text-xs">{{ knowledgeItem.knowledgeName }}</span>
+                  <template #tooltip>
+                    <div class="max-w-[500px]">
+                      <span class="text-xs"> {{ knowledgeItem.knowledgeName }}</span>
+                    </div>
+                  </template>
+                </n-ellipsis>
+              </div>
+
+              <div v-show="isHoverKnowledgeItem(knowledgeItem.id)" class="flex items-center justify-center">
+                <i
+                  class="hover:text-error-font-color text-font-color iconfont icon-reduce cursor-pointer outline-none"
+                  @click.stop="handleDeleteKnowledgeItem(knowledgeItem.id)"
+                />
+              </div>
+            </li>
+          </ul>
+
+          <span v-show="!knowledgeConfig.knowledgeIds.length" class="text-xs text-[#84868c]">
+            {{ t('personal_space_module.agent_module.agent_setting_module.agent_config_module.knowledge_base_desc') }}
+          </span>
+        </NCollapseItem>
+      </NCollapse>
+    </div>
+  </section>
+
+  <AssociatedKnowledgeModal
+    v-model:is-show-modal="isShowAssociatedKnowledgeModel"
+    v-model:knowledge-ids="knowledgeConfig.knowledgeIds"
+    :btn-loading="false"
+    :modal-title="t('common_module.add_knowledge')"
+    @close="handleCloseAssociatedKnowledgeModal"
+  />
+</template>

src/views/personal-space/personal-app-setting/components/app-preview.vue

@@ -91,7 +91,7 @@ function handleOpenMemoryPreviewModal(MemoryTabName: string) {
 </script>
 
 <template>
-  <div class="flex h-full min-w-[300px] flex-1 flex-col overflow-hidden bg-[#f2f5f9]">
+  <div class="flex h-full min-w-[300px] flex-[2_2_0%] flex-col overflow-hidden bg-[#f2f5f9]">
     <div class="flex justify-between">
       <div class="mb-[18px] flex w-full items-center justify-between px-5 py-[18px]">
         <p class="text-base">

src/views/personal-space/personal-app-setting/components/page-narbar.vue

@@ -86,6 +86,14 @@ watch(
   { deep: true },
 )
 
+watch(
+  () => personalAppConfig.value.knowledgeConfig.knowledgeIds,
+  (newVal) => {
+    newVal && (isInitGetAgentAppDetail.value = true)
+  },
+  { once: true },
+)
+
 onMounted(() => {
   if (router.currentRoute.value.params.agentId) {
     isInitGetAgentAppDetail.value = true

src/views/personal-space/personal-app-setting/personal-app-setting.vue

 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import PageNarbar from './components/page-narbar.vue'
+import PageNarBar from './components/page-narbar.vue'
 import AppSetting from './components/app-setting.vue'
 import AppPreview from './components/app-preview.vue'
 import AppPublish from './components/app-publish.vue'
@@ -29,8 +29,8 @@ function handleChangeAgentAppTabKey(currentTabKey: string) {
 </script>
 
 <template>
-  <main class="h-full min-w-[1000px]">
-    <PageNarbar @change-agent-app-tab-key="handleChangeAgentAppTabKey" />
+  <main class="h-full min-w-[1280px]">
+    <PageNarBar @change-agent-app-tab-key="handleChangeAgentAppTabKey" />
 
     <div class="h-content flex w-full flex-1">
       <div v-if="currentAgentAppTabKey === 'config'" class="flex h-full w-full flex-1">

types/locales.d.ts

@@ -75,6 +75,12 @@ declare namespace I18n {
       wipe_data: string
       delete_all_tip_title: string
       search: string
+      add: string
+      remove: string
+      add_knowledge: string
+      no_file: string
+      view_file: string
+      total_file: string
 
       dialogue_module: {
         continue_question_message: string
@@ -255,6 +261,8 @@ declare namespace I18n {
             memory_variable_delete_tip_content: string
             memory_fragment_delete_all_tip_content: string
             memory_fragment_delete_row_tip_content: string
+            add_knowledge_successfully: string
+            remove_knowledge_successfully: string
 
             memory_variable_modal: {
               edit_memory_variable: string