external knowledge api (#8913)

Co-authored-by: Yi <yxiaoisme@gmail.com>

web/app/components/datasets/documents/detail/completed/SegmentCard.tsx

@@ -36,6 +36,12 @@ export type UsageScene = 'doc' | 'hitTesting'
 type ISegmentCardProps = {
   loading: boolean
   detail?: SegmentDetailModel & { document: { name: string } }
+  contentExternal?: string
+  refSource?: {
+    title: string
+    uri: string
+  }
+  isExternal?: boolean
   score?: number
   onClick?: () => void
   onChangeSwitch?: (segId: string, enabled: boolean) => Promise<void>
@@ -48,6 +54,9 @@ type ISegmentCardProps = {
 
 const SegmentCard: FC<ISegmentCardProps> = ({
   detail = {},
+  contentExternal,
+  isExternal,
+  refSource,
   score,
   onClick,
   onChangeSwitch,
@@ -88,6 +97,9 @@ const SegmentCard: FC<ISegmentCardProps> = ({
       )
     }
 
+    if (contentExternal)
+      return contentExternal
+
     return content
   }
 
@@ -199,16 +211,16 @@ const SegmentCard: FC<ISegmentCardProps> = ({
               </div>
               <div className={cn('w-full bg-gray-50 group-hover:bg-white')}>
                 <Divider />
-                <div className="relative flex items-center w-full">
+                <div className="relative flex items-center w-full pb-1">
                   <DocumentTitle
-                    name={detail?.document?.name || ''}
-                    extension={(detail?.document?.name || '').split('.').pop() || 'txt'}
+                    name={detail?.document?.name || refSource?.title || ''}
+                    extension={(detail?.document?.name || refSource?.title || '').split('.').pop() || 'txt'}
                     wrapperCls='w-full'
                     iconCls="!h-4 !w-4 !bg-contain"
                     textCls="text-xs text-gray-700 !font-normal overflow-hidden whitespace-nowrap text-ellipsis"
                   />
                   <div className={cn(s.chartLinkText, 'group-hover:inline-flex')}>
-                    {t('datasetHitTesting.viewChart')}
+                    {isExternal ? t('datasetHitTesting.viewDetail') : t('datasetHitTesting.viewChart')}
                     <ArrowUpRightIcon className="w-3 h-3 ml-1 stroke-current stroke-2" />
                   </div>
                 </div>

web/app/components/datasets/external-api/declarations.ts

@@ -0,0 +1,16 @@
+export type CreateExternalAPIReq = {
+  name: string
+  settings: {
+    endpoint: string
+    api_key: string
+  }
+}
+
+export type FormSchema = {
+  variable: string
+  type: 'text' | 'secret'
+  label: {
+    [key: string]: string
+  }
+  required: boolean
+}

web/app/components/datasets/external-api/external-api-modal/Form.tsx

@@ -0,0 +1,90 @@
+import React, { useState } from 'react'
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiBookOpenLine } from '@remixicon/react'
+import type { CreateExternalAPIReq, FormSchema } from '../declarations'
+import Input from '@/app/components/base/input'
+import cn from '@/utils/classnames'
+
+type FormProps = {
+  className?: string
+  itemClassName?: string
+  fieldLabelClassName?: string
+  value: CreateExternalAPIReq
+  onChange: (val: CreateExternalAPIReq) => void
+  formSchemas: FormSchema[]
+  inputClassName?: string
+}
+
+const Form: FC<FormProps> = React.memo(({
+  className,
+  itemClassName,
+  fieldLabelClassName,
+  value,
+  onChange,
+  formSchemas,
+  inputClassName,
+}) => {
+  const { t, i18n } = useTranslation()
+  const [changeKey, setChangeKey] = useState('')
+
+  const handleFormChange = (key: string, val: string) => {
+    setChangeKey(key)
+    if (key === 'name') {
+      onChange({ ...value, [key]: val })
+    }
+    else {
+      onChange({
+        ...value,
+        settings: {
+          ...value.settings,
+          [key]: val,
+        },
+      })
+    }
+  }
+
+  const renderField = (formSchema: FormSchema) => {
+    const { variable, type, label, required } = formSchema
+    const fieldValue = variable === 'name' ? value[variable] : (value.settings[variable as keyof typeof value.settings] || '')
+
+    return (
+      <div key={variable} className={cn(itemClassName, 'flex flex-col items-start gap-1 self-stretch')}>
+        <div className="flex justify-between items-center w-full">
+          <label className={cn(fieldLabelClassName, 'text-text-secondary system-sm-semibold')} htmlFor={variable}>
+            {label[i18n.language] || label.en_US}
+            {required && <span className='ml-1 text-red-500'>*</span>}
+          </label>
+          {variable === 'endpoint' && (
+            <a
+              href={'https://docs.dify.ai/guides/knowledge-base/external-knowledge-api-documentation' || '/'}
+              target='_blank'
+              rel='noopener noreferrer'
+              className='text-text-accent body-xs-regular flex items-center'
+            >
+              <RiBookOpenLine className='w-3 h-3 text-text-accent mr-1' />
+              {t('dataset.externalAPIPanelDocumentation')}
+            </a>
+          )}
+        </div>
+        <Input
+          type={type === 'secret' ? 'password' : 'text'}
+          id={variable}
+          name={variable}
+          value={fieldValue}
+          onChange={val => handleFormChange(variable, val.target.value)}
+          required={required}
+          className={cn(inputClassName)}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <form className={cn('flex flex-col justify-center items-start gap-4 self-stretch', className)}>
+      {formSchemas.map(formSchema => renderField(formSchema))}
+    </form>
+  )
+})
+
+export default Form

web/app/components/datasets/external-api/external-api-modal/index.tsx

@@ -0,0 +1,218 @@
+import type { FC } from 'react'
+import {
+  memo,
+  useEffect,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiBook2Line,
+  RiCloseLine,
+  RiInformation2Line,
+  RiLock2Fill,
+} from '@remixicon/react'
+import type { CreateExternalAPIReq, FormSchema } from '../declarations'
+import Form from './Form'
+import ActionButton from '@/app/components/base/action-button'
+import Confirm from '@/app/components/base/confirm'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+} from '@/app/components/base/portal-to-follow-elem'
+import { createExternalAPI } from '@/service/datasets'
+import { useToastContext } from '@/app/components/base/toast'
+import Button from '@/app/components/base/button'
+import Tooltip from '@/app/components/base/tooltip'
+
+type AddExternalAPIModalProps = {
+  data?: CreateExternalAPIReq
+  onSave: (formValue: CreateExternalAPIReq) => void
+  onCancel: () => void
+  onEdit?: (formValue: CreateExternalAPIReq) => Promise<void>
+  datasetBindings?: { id: string; name: string }[]
+  isEditMode: boolean
+}
+
+const formSchemas: FormSchema[] = [
+  {
+    variable: 'name',
+    type: 'text',
+    label: {
+      en_US: 'Name',
+    },
+    required: true,
+  },
+  {
+    variable: 'endpoint',
+    type: 'text',
+    label: {
+      en_US: 'API Endpoint',
+    },
+    required: true,
+  },
+  {
+    variable: 'api_key',
+    type: 'secret',
+    label: {
+      en_US: 'API Key',
+    },
+    required: true,
+  },
+]
+
+const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCancel, datasetBindings, isEditMode, onEdit }) => {
+  const { t } = useTranslation()
+  const { notify } = useToastContext()
+  const [loading, setLoading] = useState(false)
+  const [showConfirm, setShowConfirm] = useState(false)
+  const [formData, setFormData] = useState<CreateExternalAPIReq>({ name: '', settings: { endpoint: '', api_key: '' } })
+
+  useEffect(() => {
+    if (isEditMode && data)
+      setFormData(data)
+  }, [isEditMode, data])
+
+  const hasEmptyInputs = Object.values(formData).some(value =>
+    typeof value === 'string' ? value.trim() === '' : Object.values(value).some(v => v.trim() === ''),
+  )
+  const handleDataChange = (val: CreateExternalAPIReq) => {
+    setFormData(val)
+  }
+
+  const handleSave = async () => {
+    if (formData && formData.settings.api_key && formData.settings.api_key?.length < 5) {
+      notify({ type: 'error', message: t('common.apiBasedExtension.modal.apiKey.lengthError') })
+      setLoading(false)
+      return
+    }
+    try {
+      setLoading(true)
+      if (isEditMode && onEdit) {
+        await onEdit(
+          {
+            ...formData,
+            settings: { ...formData.settings, api_key: formData.settings.api_key ? '[__HIDDEN__]' : formData.settings.api_key },
+          },
+        )
+        notify({ type: 'success', message: 'External API updated successfully' })
+      }
+      else {
+        const res = await createExternalAPI({ body: formData })
+        if (res && res.id) {
+          notify({ type: 'success', message: 'External API saved successfully' })
+          onSave(res)
+        }
+      }
+      onCancel()
+    }
+    catch (error) {
+      console.error('Error saving/updating external API:', error)
+      notify({ type: 'error', message: 'Failed to save/update External API' })
+    }
+    finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <PortalToFollowElem open>
+      <PortalToFollowElemContent className='w-full h-full z-[60]'>
+        <div className='fixed inset-0 flex items-center justify-center bg-black/[.25]'>
+          <div className='flex relative w-[480px] flex-col items-start bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadows-shadow-xl'>
+            <div className='flex flex-col pt-6 pl-6 pb-3 pr-14 items-start gap-2 self-stretch'>
+              <div className='self-stretch text-text-primary title-2xl-semi-bold flex-grow'>
+                {
+                  isEditMode ? t('dataset.editExternalAPIFormTitle') : t('dataset.createExternalAPI')
+                }
+              </div>
+              {isEditMode && (datasetBindings?.length ?? 0) > 0 && (
+                <div className='text-text-tertiary system-xs-regular flex items-center'>
+                  {t('dataset.editExternalAPIFormWarning.front')}
+                  <span className='text-text-accent cursor-pointer flex items-center'>
+                    &nbsp;{datasetBindings?.length} {t('dataset.editExternalAPIFormWarning.end')}&nbsp;
+                    <Tooltip
+                      popupClassName='flex items-center self-stretch w-[320px]'
+                      popupContent={
+                        <div className='p-1'>
+                          <div className='flex pt-1 pb-0.5 pl-2 pr-3 items-start self-stretch'>
+                            <div className='text-text-tertiary system-xs-medium-uppercase'>{`${datasetBindings?.length} ${t('dataset.editExternalAPITooltipTitle')}`}</div>
+                          </div>
+                          {datasetBindings?.map(binding => (
+                            <div key={binding.id} className='flex px-2 py-1 items-center gap-1 self-stretch'>
+                              <RiBook2Line className='w-4 h-4 text-text-secondary' />
+                              <div className='text-text-secondary system-sm-medium'>{binding.name}</div>
+                            </div>
+                          ))}
+                        </div>
+                      }
+                      asChild={false}
+                      position='bottom'
+                    >
+                      <RiInformation2Line className='w-3.5 h-3.5' />
+                    </Tooltip>
+                  </span>
+                </div>
+              )}
+            </div>
+            <ActionButton className='absolute top-5 right-5' onClick={onCancel}>
+              <RiCloseLine className='w-[18px] h-[18px] text-text-tertiary flex-shrink-0' />
+            </ActionButton>
+            <Form
+              value={formData}
+              onChange={handleDataChange}
+              formSchemas={formSchemas}
+              className='flex px-6 py-3 flex-col justify-center items-start gap-4 self-stretch'
+            />
+            <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
+              <Button type='button' variant='secondary' onClick={onCancel}>
+                {t('dataset.externalAPIForm.cancel')}
+              </Button>
+              <Button
+                type='submit'
+                variant='primary'
+                onClick={() => {
+                  if (isEditMode && (datasetBindings?.length ?? 0) > 0)
+                    setShowConfirm(true)
+                  else if (isEditMode && onEdit)
+                    onEdit(formData)
+
+                  else
+                    handleSave()
+                }}
+                disabled={hasEmptyInputs || loading}
+              >
+                {t('dataset.externalAPIForm.save')}
+              </Button>
+            </div>
+            <div className='flex px-2 py-3 justify-center items-center gap-1 self-stretch rounded-b-2xl
+              border-t-[0.5px] border-divider-subtle bg-background-soft text-text-tertiary system-xs-regular'
+            >
+              <RiLock2Fill className='w-3 h-3 text-text-quaternary' />
+              {t('dataset.externalAPIForm.encrypted.front')}
+              <a
+                className='text-text-accent'
+                target='_blank' rel='noopener noreferrer'
+                href='https://pycryptodome.readthedocs.io/en/latest/src/cipher/oaep.html'
+              >
+                PKCS1_OAEP
+              </a>
+              {t('dataset.externalAPIForm.encrypted.end')}
+            </div>
+          </div>
+          {showConfirm && (datasetBindings?.length ?? 0) > 0 && (
+            <Confirm
+              isShow={showConfirm}
+              type='warning'
+              title='Warning'
+              content={`${t('dataset.editExternalAPIConfirmWarningContent.front')} ${datasetBindings?.length} ${t('dataset.editExternalAPIConfirmWarningContent.end')}`}
+              onCancel={() => setShowConfirm(false)}
+              onConfirm={handleSave}
+            />
+          )}
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default memo(AddExternalAPIModal)

web/app/components/datasets/external-api/external-api-panel/index.tsx

@@ -0,0 +1,90 @@
+import React from 'react'
+import {
+  RiAddLine,
+  RiBookOpenLine,
+  RiCloseLine,
+} from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import ExternalKnowledgeAPICard from '../external-knowledge-api-card'
+import cn from '@/utils/classnames'
+import { useExternalKnowledgeApi } from '@/context/external-knowledge-api-context'
+import ActionButton from '@/app/components/base/action-button'
+import Button from '@/app/components/base/button'
+import Loading from '@/app/components/base/loading'
+import { useModalContext } from '@/context/modal-context'
+
+type ExternalAPIPanelProps = {
+  onClose: () => void
+}
+
+const ExternalAPIPanel: React.FC<ExternalAPIPanelProps> = ({ onClose }) => {
+  const { t } = useTranslation()
+  const { setShowExternalKnowledgeAPIModal } = useModalContext()
+  const { externalKnowledgeApiList, mutateExternalKnowledgeApis, isLoading } = useExternalKnowledgeApi()
+
+  const handleOpenExternalAPIModal = () => {
+    setShowExternalKnowledgeAPIModal({
+      payload: { name: '', settings: { endpoint: '', api_key: '' } },
+      datasetBindings: [],
+      onSaveCallback: () => {
+        mutateExternalKnowledgeApis()
+      },
+      onCancelCallback: () => {
+        mutateExternalKnowledgeApis()
+      },
+      isEditMode: false,
+    })
+  }
+
+  return (
+    <div
+      tabIndex={-1}
+      className={cn('absolute top-14 right-0 bottom-2 flex z-10 outline-none')}
+    >
+      <div
+        className={cn(
+          'relative flex flex-col w-[420px] bg-components-panel-bg-alt rounded-l-2xl h-full border border-components-panel-border',
+        )}
+      >
+        <div className='flex items-start self-stretch p-4 pb-0'>
+          <div className='flex flex-col items-start gap-1 flex-grow'>
+            <div className='self-stretch text-text-primary system-xl-semibold'>{t('dataset.externalAPIPanelTitle')}</div>
+            <div className='self-stretch text-text-tertiary body-xs-regular'>{t('dataset.externalAPIPanelDescription')}</div>
+            <a className='flex justify-center items-center gap-1 self-stretch cursor-pointer' href='https://docs.dify.ai/guides/knowledge-base/external-knowledge-api-documentation' target='_blank'>
+              <RiBookOpenLine className='w-3 h-3 text-text-accent' />
+              <div className='flex-grow text-text-accent body-xs-regular'>{t('dataset.externalAPIPanelDocumentation')}</div>
+            </a>
+          </div>
+          <div className='flex items-center'>
+            <ActionButton onClick={() => onClose()}>
+              <RiCloseLine className='w-4 h-4 text-text-tertiary' />
+            </ActionButton>
+          </div>
+        </div>
+        <div className='flex px-4 py-3 flex-col justify-center items-start gap-2 self-stretch'>
+          <Button
+            variant={'primary'}
+            className='flex justify-center items-center px-3 py-2 gap-0.5'
+            onClick={handleOpenExternalAPIModal}
+          >
+            <RiAddLine className='w-4 h-4 text-components-button-primary-text' />
+            <div className='text-components-button-primary-text system-sm-medium'>{t('dataset.createExternalAPI')}</div>
+          </Button>
+        </div>
+        <div className='flex py-0 px-4 flex-col items-start gap-1 flex-grow self-stretch'>
+          {isLoading
+            ? (
+              <Loading />
+            )
+            : (
+              externalKnowledgeApiList.map(api => (
+                <ExternalKnowledgeAPICard key={api.id} api={api} />
+              ))
+            )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ExternalAPIPanel

web/app/components/datasets/external-api/external-knowledge-api-card/index.tsx

@@ -0,0 +1,151 @@
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiDeleteBinLine,
+  RiEditLine,
+} from '@remixicon/react'
+import type { CreateExternalAPIReq } from '../declarations'
+import type { ExternalAPIItem } from '@/models/datasets'
+import { checkUsageExternalAPI, deleteExternalAPI, fetchExternalAPI, updateExternalAPI } from '@/service/datasets'
+import { ApiConnectionMod } from '@/app/components/base/icons/src/vender/solid/development'
+import { useExternalKnowledgeApi } from '@/context/external-knowledge-api-context'
+import { useModalContext } from '@/context/modal-context'
+import ActionButton from '@/app/components/base/action-button'
+import Confirm from '@/app/components/base/confirm'
+
+type ExternalKnowledgeAPICardProps = {
+  api: ExternalAPIItem
+}
+
+const ExternalKnowledgeAPICard: React.FC<ExternalKnowledgeAPICardProps> = ({ api }) => {
+  const { setShowExternalKnowledgeAPIModal } = useModalContext()
+  const [showConfirm, setShowConfirm] = useState(false)
+  const [isHovered, setIsHovered] = useState(false)
+  const [usageCount, setUsageCount] = useState(0)
+  const { mutateExternalKnowledgeApis } = useExternalKnowledgeApi()
+
+  const { t } = useTranslation()
+
+  const handleEditClick = async () => {
+    try {
+      const response = await fetchExternalAPI({ apiTemplateId: api.id })
+      const formValue: CreateExternalAPIReq = {
+        name: response.name,
+        settings: {
+          endpoint: response.settings.endpoint,
+          api_key: response.settings.api_key,
+        },
+      }
+
+      setShowExternalKnowledgeAPIModal({
+        payload: formValue,
+        onSaveCallback: () => {
+          mutateExternalKnowledgeApis()
+        },
+        onCancelCallback: () => {
+          mutateExternalKnowledgeApis()
+        },
+        isEditMode: true,
+        datasetBindings: response.dataset_bindings,
+        onEditCallback: async (updatedData: CreateExternalAPIReq) => {
+          try {
+            await updateExternalAPI({
+              apiTemplateId: api.id,
+              body: {
+                ...response,
+                name: updatedData.name,
+                settings: {
+                  ...response.settings,
+                  endpoint: updatedData.settings.endpoint,
+                  api_key: updatedData.settings.api_key,
+                },
+              },
+            })
+            mutateExternalKnowledgeApis()
+          }
+          catch (error) {
+            console.error('Error updating external knowledge API:', error)
+          }
+        },
+      })
+    }
+    catch (error) {
+      console.error('Error fetching external knowledge API data:', error)
+    }
+  }
+
+  const handleDeleteClick = async () => {
+    try {
+      const usage = await checkUsageExternalAPI({ apiTemplateId: api.id })
+      if (usage.is_using)
+        setUsageCount(usage.count)
+
+      setShowConfirm(true)
+    }
+    catch (error) {
+      console.error('Error checking external API usage:', error)
+    }
+  }
+
+  const handleConfirmDelete = async () => {
+    try {
+      const response = await deleteExternalAPI({ apiTemplateId: api.id })
+      if (response && response.result === 'success') {
+        setShowConfirm(false)
+        mutateExternalKnowledgeApis()
+      }
+      else {
+        console.error('Failed to delete external API')
+      }
+    }
+    catch (error) {
+      console.error('Error deleting external knowledge API:', error)
+    }
+  }
+
+  return (
+    <>
+      <div className={`flex p-2 pl-3 items-start self-stretch rounded-lg border-[0.5px] 
+        border-components-panel-border-subtle bg-components-panel-on-panel-item-bg 
+        shadows-shadow-xs ${isHovered ? 'bg-state-destructive-hover border-state-destructive-border' : ''}`}
+      >
+        <div className='flex py-1 flex-col justify-center items-start gap-1.5 flex-grow'>
+          <div className='flex items-center gap-1 self-stretch text-text-secondary'>
+            <ApiConnectionMod className='w-4 h-4' />
+            <div className='system-sm-medium'>{api.name}</div>
+          </div>
+          <div className='self-stretch text-text-tertiary system-xs-regular'>{api.settings.endpoint}</div>
+        </div>
+        <div className='flex items-start gap-1'>
+          <ActionButton onClick={handleEditClick}>
+            <RiEditLine className='w-4 h-4 text-text-tertiary hover:text-text-secondary' />
+          </ActionButton>
+          <ActionButton
+            className='hover:bg-state-destructive-hover'
+            onClick={handleDeleteClick}
+            onMouseEnter={() => setIsHovered(true)}
+            onMouseLeave={() => setIsHovered(false)}
+          >
+            <RiDeleteBinLine className='w-4 h-4 text-text-tertiary hover:text-text-destructive' />
+          </ActionButton>
+        </div>
+      </div>
+      {showConfirm && (
+        <Confirm
+          isShow={showConfirm}
+          title={`${t('dataset.deleteExternalAPIConfirmWarningContent.title.front')} ${api.name}${t('dataset.deleteExternalAPIConfirmWarningContent.title.end')}`}
+          content={
+            usageCount > 0
+              ? `${t('dataset.deleteExternalAPIConfirmWarningContent.content.front')} ${usageCount} ${t('dataset.deleteExternalAPIConfirmWarningContent.content.end')}`
+              : t('dataset.deleteExternalAPIConfirmWarningContent.noConnectionContent')
+          }
+          type='warning'
+          onConfirm={handleConfirmDelete}
+          onCancel={() => setShowConfirm(false)}
+        />
+      )}
+    </>
+  )
+}
+
+export default ExternalKnowledgeAPICard

web/app/components/datasets/external-knowledge-base/connector/index.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import React, { useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { useToastContext } from '@/app/components/base/toast'
+import ExternalKnowledgeBaseCreate from '@/app/components/datasets/external-knowledge-base/create'
+import type { CreateKnowledgeBaseReq } from '@/app/components/datasets/external-knowledge-base/create/declarations'
+import { createExternalKnowledgeBase } from '@/service/datasets'
+
+const ExternalKnowledgeBaseConnector = () => {
+  const { notify } = useToastContext()
+  const [loading, setLoading] = useState(false)
+  const router = useRouter()
+
+  const handleConnect = async (formValue: CreateKnowledgeBaseReq) => {
+    try {
+      setLoading(true)
+      const result = await createExternalKnowledgeBase({ body: formValue })
+      if (result && result.id) {
+        notify({ type: 'success', message: 'External Knowledge Base Connected Successfully' })
+        router.back()
+      }
+      else { throw new Error('Failed to create external knowledge base') }
+    }
+    catch (error) {
+      console.error('Error creating external knowledge base:', error)
+      notify({ type: 'error', message: 'Failed to connect External Knowledge Base' })
+    }
+    setLoading(false)
+  }
+  return (
+    <ExternalKnowledgeBaseCreate onConnect={handleConnect} loading={loading} />
+  )
+}
+
+export default ExternalKnowledgeBaseConnector

web/app/components/datasets/external-knowledge-base/create/ExternalApiSelect.tsx

@@ -0,0 +1,110 @@
+import React, { useEffect, useState } from 'react'
+import {
+  RiAddLine,
+  RiArrowDownSLine,
+} from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { useRouter } from 'next/navigation'
+import { ApiConnectionMod } from '@/app/components/base/icons/src/vender/solid/development'
+import { useModalContext } from '@/context/modal-context'
+import { useExternalKnowledgeApi } from '@/context/external-knowledge-api-context'
+
+type ApiItem = {
+  value: string
+  name: string
+  url: string
+}
+
+type ExternalApiSelectProps = {
+  items: ApiItem[]
+  value?: string
+  onSelect: (item: ApiItem) => void
+}
+
+const ExternalApiSelect: React.FC<ExternalApiSelectProps> = ({ items, value, onSelect }) => {
+  const { t } = useTranslation()
+  const [isOpen, setIsOpen] = useState(false)
+  const [selectedItem, setSelectedItem] = useState<ApiItem | null>(
+    items.find(item => item.value === value) || null,
+  )
+  const { setShowExternalKnowledgeAPIModal } = useModalContext()
+  const { mutateExternalKnowledgeApis } = useExternalKnowledgeApi()
+  const router = useRouter()
+
+  useEffect(() => {
+    const newSelectedItem = items.find(item => item.value === value) || null
+    setSelectedItem(newSelectedItem)
+  }, [value, items])
+
+  const handleAddNewAPI = () => {
+    setShowExternalKnowledgeAPIModal({
+      payload: { name: '', settings: { endpoint: '', api_key: '' } },
+      onSaveCallback: async () => {
+        mutateExternalKnowledgeApis()
+        router.refresh()
+      },
+      onCancelCallback: () => {
+        mutateExternalKnowledgeApis()
+      },
+      isEditMode: false,
+    })
+  }
+
+  const handleSelect = (item: ApiItem) => {
+    setSelectedItem(item)
+    onSelect(item)
+    setIsOpen(false)
+  }
+
+  return (
+    <div className="relative w-full">
+      <div
+        className={`flex items-center justify-between cursor-pointer px-2 py-1 gap-0.5 self-stretch rounded-lg 
+        bg-components-input-bg-normal hover:bg-state-base-hover-alt ${isOpen && 'bg-state-base-hover-alt'}`}
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        {selectedItem
+          ? (
+            <div className="flex p-1 items-center gap-2 self-stretch rounded-lg">
+              <ApiConnectionMod className='text-text-secondary w-4 h-4' />
+              <div className='flex items-center flex-grow'>
+                <span className='text-components-input-text-filled text-ellipsis system-sm-regular overflow-hidden'>{selectedItem.name}</span>
+              </div>
+            </div>
+          )
+          : (
+            <span className='text-components-input-text-placeholder system-sm-regular'>{t('dataset.selectExternalKnowledgeAPI.placeholder')}</span>
+          )}
+        <RiArrowDownSLine className={`w-4 h-4 text-text-quaternary transition-transform ${isOpen ? 'text-text-secondary' : ''}`} />
+      </div>
+      {isOpen && (
+        <div className="absolute z-10 w-full mt-1 bg-components-panel-bg-blur border rounded-xl shadow-lg">
+          {items.map(item => (
+            <div
+              key={item.value}
+              className="flex p-1 items-center cursor-pointer"
+              onClick={() => handleSelect(item)}
+            >
+              <div className="flex p-2 items-center gap-2 self-stretch rounded-lg hover:bg-state-base-hover w-full">
+                <ApiConnectionMod className='text-text-secondary w-4 h-4' />
+                <span className='text-text-secondary text-ellipsis system-sm-medium overflow-hidden flex-grow'>{item.name}</span>
+                <span className='text-text-tertiary overflow-hidden text-right text-ellipsis system-xs-regular'>{item.url}</span>
+              </div>
+            </div>
+          ))}
+          <div className='flex p-1 flex-col items-start self-stretch'>
+            <div
+              className='flex p-2 items-center gap-2 self-stretch rounded-lg cursor-pointer hover:bg-state-base-hover'
+              onClick={handleAddNewAPI}
+            >
+              <RiAddLine className='text-text-secondary w-4 h-4' />
+              <span className='flex-grow overflow-hidden text-text-secondary text-ellipsis system-sm-medium'>{t('dataset.createNewExternalAPI')}</span>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ExternalApiSelect

web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx

@@ -0,0 +1,96 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiAddLine } from '@remixicon/react'
+import { useRouter } from 'next/navigation'
+import ExternalApiSelect from './ExternalApiSelect'
+import Input from '@/app/components/base/input'
+import Button from '@/app/components/base/button'
+import { useModalContext } from '@/context/modal-context'
+import { useExternalKnowledgeApi } from '@/context/external-knowledge-api-context'
+
+type ExternalApiSelectionProps = {
+  external_knowledge_api_id: string
+  external_knowledge_id: string
+  onChange: (data: { external_knowledge_api_id?: string; external_knowledge_id?: string }) => void
+}
+
+const ExternalApiSelection: React.FC<ExternalApiSelectionProps> = ({ external_knowledge_api_id, external_knowledge_id, onChange }) => {
+  const { t } = useTranslation()
+  const router = useRouter()
+  const { externalKnowledgeApiList } = useExternalKnowledgeApi()
+  const [selectedApiId, setSelectedApiId] = useState(external_knowledge_api_id)
+  const { setShowExternalKnowledgeAPIModal } = useModalContext()
+  const { mutateExternalKnowledgeApis } = useExternalKnowledgeApi()
+
+  const apiItems = externalKnowledgeApiList.map(api => ({
+    value: api.id,
+    name: api.name,
+    url: api.settings.endpoint,
+  }))
+
+  useEffect(() => {
+    if (apiItems.length > 0) {
+      const newSelectedId = external_knowledge_api_id || apiItems[0].value
+      setSelectedApiId(newSelectedId)
+      if (newSelectedId !== external_knowledge_api_id)
+        onChange({ external_knowledge_api_id: newSelectedId, external_knowledge_id })
+    }
+  }, [apiItems, external_knowledge_api_id, external_knowledge_id, onChange])
+
+  const handleAddNewAPI = () => {
+    setShowExternalKnowledgeAPIModal({
+      payload: { name: '', settings: { endpoint: '', api_key: '' } },
+      onSaveCallback: async () => {
+        mutateExternalKnowledgeApis()
+        router.refresh()
+      },
+      onCancelCallback: () => {
+        mutateExternalKnowledgeApis()
+      },
+      isEditMode: false,
+    })
+  }
+
+  useEffect(() => {
+    if (!external_knowledge_api_id && apiItems.length > 0)
+      onChange({ external_knowledge_api_id: apiItems[0].value, external_knowledge_id })
+  }, [])
+
+  return (
+    <form className='flex flex-col gap-4 self-stretch'>
+      <div className='flex flex-col gap-1 self-stretch'>
+        <div className='flex flex-col self-stretch'>
+          <label className='text-text-secondary system-sm-semibold'>{t('dataset.externalAPIPanelTitle')}</label>
+        </div>
+        {apiItems.length > 0
+          ? <ExternalApiSelect
+            items={apiItems}
+            value={selectedApiId}
+            onSelect={(e) => {
+              setSelectedApiId(e.value)
+              onChange({ external_knowledge_api_id: e.value, external_knowledge_id })
+            }}
+          />
+          : <Button variant={'tertiary'} onClick={handleAddNewAPI} className='justify-start gap-0.5'>
+            <RiAddLine className='w-4 h-4 text-text-tertiary' />
+            <span className='text-text-tertiary system-sm-regular'>{t('dataset.noExternalKnowledge')}</span>
+          </Button>
+        }
+      </div>
+      <div className='flex flex-col gap-1 self-stretch'>
+        <div className='flex flex-col self-stretch'>
+          <label className='text-text-secondary system-sm-semibold'>{t('dataset.externalKnowledgeId')}</label>
+        </div>
+        <Input
+          value={external_knowledge_id}
+          onChange={e => onChange({ external_knowledge_id: e.target.value, external_knowledge_api_id })}
+          placeholder={t('dataset.externalKnowledgeIdPlaceholder') ?? ''}
+        />
+      </div>
+    </form>
+  )
+}
+
+export default ExternalApiSelection

web/app/components/datasets/external-knowledge-base/create/InfoPanel.tsx

@@ -0,0 +1,33 @@
+import { RiBookOpenLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+
+const InfoPanel = () => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='flex w-[360px] pt-[108px] pb-2 pr-8 flex-col items-start'>
+      <div className='flex min-w-[240px] w-full p-6 flex-col items-start gap-3 self-stretch rounded-xl bg-background-section'>
+        <div className='flex p-1 w-10 h-10 justify-center items-center gap-2 flex-grow self-stretch rounded-lg border-[0.5px] border-components-card-border bg-components-card-bg'>
+          <RiBookOpenLine className='w-5 h-5 text-text-accent' />
+        </div>
+        <p className='flex flex-col items-start gap-2 self-stretch'>
+          <span className='self-stretch text-text-secondary system-xl-semibold'>
+            {t('dataset.connectDatasetIntro.title')}
+          </span>
+          <span className='text-text-tertiary system-sm-regular'>
+            {t('dataset.connectDatasetIntro.content.front')}
+            <a className='text-text-accent system-sm-regular ml-1' href='https://docs.dify.ai/guides/knowledge-base/external-knowledge-api-documentation' target='_blank' rel="noopener noreferrer">
+              {t('dataset.connectDatasetIntro.content.link')}
+            </a>
+            {t('dataset.connectDatasetIntro.content.end')}
+          </span>
+          <a className='self-stretch text-text-accent system-sm-regular' href='https://docs.dify.ai/guides/knowledge-base/connect-external-knowledge' target='_blank' rel="noopener noreferrer">
+            {t('dataset.connectDatasetIntro.learnMore')}
+          </a>
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default InfoPanel

web/app/components/datasets/external-knowledge-base/create/KnowledgeBaseInfo.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+import { RiBookOpenLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import Input from '@/app/components/base/input'
+
+type KnowledgeBaseInfoProps = {
+  name: string
+  description?: string
+  onChange: (data: { name?: string; description?: string }) => void
+}
+
+const KnowledgeBaseInfo: React.FC<KnowledgeBaseInfoProps> = ({ name, description, onChange }) => {
+  const { t } = useTranslation()
+
+  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange({ name: e.target.value })
+  }
+
+  const handleDescriptionChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    onChange({ description: e.target.value })
+  }
+
+  return (
+    <form className='flex flex-col gap-4 self-stretch'>
+      <div className='flex flex-col gap-4 self-stretch'>
+        <div className='flex flex-col gap-1 self-stretch'>
+          <div className='flex flex-col justify-center self-stretch'>
+            <label className='text-text-secondary system-sm-semibold'>{t('dataset.externalKnowledgeName')}</label>
+          </div>
+          <Input
+            value={name}
+            onChange={handleNameChange}
+            placeholder={t('dataset.externalKnowledgeNamePlaceholder') ?? ''}
+          />
+        </div>
+        <div className='flex flex-col gap-1 self-stretch'>
+          <div className='flex flex-col justify-center self-stretch'>
+            <label className='text-text-secondary system-sm-semibold'>{t('dataset.externalKnowledgeDescription')}</label>
+          </div>
+          <div className='flex flex-col gap-1 self-stretch'>
+            <textarea
+              value={description}
+              onChange={ e => handleDescriptionChange(e)}
+              placeholder={t('dataset.externalKnowledgeDescriptionPlaceholder') ?? ''}
+              className={`flex h-20 py-2 p-3 self-stretch items-start rounded-lg bg-components-input-bg-normal ${description ? 'text-components-input-text-filled' : 'text-components-input-text-placeholder'} system-sm-regular`}
+            />
+            <a
+              className='flex py-0.5 gap-1 self-stretch'
+              href='https://docs.dify.ai/features/datasets#how-to-write-a-good-dataset-description'
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <div className='flex p-0.5 items-center gap-2'>
+                <RiBookOpenLine className='w-3 h-3 text-text-tertiary' />
+              </div>
+              <div className='flex-grow text-text-tertiary body-xs-regular'>{t('dataset.learnHowToWriteGoodKnowledgeDescription')}</div>
+            </a>
+          </div>
+        </div>
+      </div>
+    </form>
+  )
+}
+
+export default KnowledgeBaseInfo

web/app/components/datasets/external-knowledge-base/create/RetrievalSettings.tsx

@@ -0,0 +1,67 @@
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import TopKItem from '@/app/components/base/param-item/top-k-item'
+import ScoreThresholdItem from '@/app/components/base/param-item/score-threshold-item'
+import cn from '@/utils/classnames'
+
+type RetrievalSettingsProps = {
+  topK: number
+  scoreThreshold: number
+  scoreThresholdEnabled: boolean
+  isInHitTesting?: boolean
+  isInRetrievalSetting?: boolean
+  onChange: (data: { top_k?: number; score_threshold?: number; score_threshold_enabled?: boolean }) => void
+}
+
+const RetrievalSettings: FC<RetrievalSettingsProps> = ({
+  topK,
+  scoreThreshold,
+  scoreThresholdEnabled,
+  onChange,
+  isInHitTesting = false,
+  isInRetrievalSetting = false,
+}) => {
+  const { t } = useTranslation()
+
+  const handleScoreThresholdChange = (enabled: boolean) => {
+    onChange({ score_threshold_enabled: enabled })
+  }
+
+  return (
+    <div className={cn('flex flex-col gap-2 self-stretch', isInRetrievalSetting && 'w-full max-w-[480px]')}>
+      {!isInHitTesting && !isInRetrievalSetting && <div className='flex h-7 pt-1 flex-col gap-2 self-stretch'>
+        <label className='text-text-secondary system-sm-semibold'>{t('dataset.retrievalSettings')}</label>
+      </div>}
+      <div className={cn(
+        'flex gap-4 self-stretch',
+        {
+          'flex-col': isInHitTesting,
+          'flex-row': isInRetrievalSetting,
+          'flex-col sm:flex-row': !isInHitTesting && !isInRetrievalSetting,
+        },
+      )}>
+        <div className='flex flex-col gap-1 flex-grow'>
+          <TopKItem
+            className='grow'
+            value={topK}
+            onChange={(_key, v) => onChange({ top_k: v })}
+            enable={true}
+          />
+        </div>
+        <div className='flex flex-col gap-1 flex-grow'>
+          <ScoreThresholdItem
+            className='grow'
+            value={scoreThreshold}
+            onChange={(_key, v) => onChange({ score_threshold: v })}
+            enable={scoreThresholdEnabled}
+            hasSwitch={true}
+            onSwitchChange={(_key, v) => handleScoreThresholdChange(v)}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default RetrievalSettings

web/app/components/datasets/external-knowledge-base/create/declarations.ts

@@ -0,0 +1,12 @@
+export type CreateKnowledgeBaseReq = {
+  name: string
+  description?: string
+  external_knowledge_api_id: string
+  provider: 'external'
+  external_knowledge_id: string
+  external_retrieval_model: {
+    top_k: number
+    score_threshold: number
+    score_threshold_enabled: boolean
+  }
+}

web/app/components/datasets/external-knowledge-base/create/index.tsx

@@ -0,0 +1,128 @@
+'use client'
+
+import { useCallback, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { RiArrowLeftLine, RiArrowRightLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import KnowledgeBaseInfo from './KnowledgeBaseInfo'
+import ExternalApiSelection from './ExternalApiSelection'
+import RetrievalSettings from './RetrievalSettings'
+import InfoPanel from './InfoPanel'
+import type { CreateKnowledgeBaseReq } from './declarations'
+import Divider from '@/app/components/base/divider'
+import Button from '@/app/components/base/button'
+
+type ExternalKnowledgeBaseCreateProps = {
+  onConnect: (formValue: CreateKnowledgeBaseReq) => void
+  loading: boolean
+}
+
+const ExternalKnowledgeBaseCreate: React.FC<ExternalKnowledgeBaseCreateProps> = ({ onConnect, loading }) => {
+  const { t } = useTranslation()
+  const router = useRouter()
+  const [formData, setFormData] = useState<CreateKnowledgeBaseReq>({
+    name: '',
+    description: '',
+    external_knowledge_api_id: '',
+    external_knowledge_id: '',
+    external_retrieval_model: {
+      top_k: 2,
+      score_threshold: 0.5,
+      score_threshold_enabled: false,
+    },
+    provider: 'external',
+
+  })
+
+  const navBackHandle = useCallback(() => {
+    router.replace('/datasets')
+  }, [router])
+
+  const handleFormChange = (newData: CreateKnowledgeBaseReq) => {
+    setFormData(newData)
+  }
+
+  const isFormValid = formData.name.trim() !== ''
+    && formData.external_knowledge_api_id !== ''
+    && formData.external_knowledge_id !== ''
+    && formData.external_retrieval_model.top_k !== undefined
+    && formData.external_retrieval_model.score_threshold !== undefined
+
+  return (
+    <div className='flex flex-col flex-grow self-stretch rounded-t-2xl border-t border-effects-highlight bg-components-panel-bg'>
+      <div className='flex justify-center flex-grow self-stretch'>
+        <div className='flex w-full max-w-[960px] px-14 py-0 flex-col items-center'>
+          <div className='flex w-full max-w-[640px] pt-6 pb-8 flex-col grow items-center gap-4'>
+            <div className='relative flex flex-col py-2 items-center gap-[2px] self-stretch'>
+              <div className='flex-grow text-text-primary system-xl-semibold self-stretch'>{t('dataset.connectDataset')}</div>
+              <p className='text-text-tertiary system-sm-regular'>
+                <span>{t('dataset.connectHelper.helper1')}</span>
+                <span className='text-text-secondary system-sm-medium'>{t('dataset.connectHelper.helper2')}</span>
+                <span>{t('dataset.connectHelper.helper3')}</span>
+                <a className='self-stretch text-text-accent system-sm-regular' href='https://docs.dify.ai/guides/knowledge-base/connect-external-knowledge' target='_blank' rel="noopener noreferrer">
+                  {t('dataset.connectHelper.helper4')}
+                </a>
+                <span>{t('dataset.connectHelper.helper5')} </span>
+              </p>
+              <Button
+                className='flex w-8 h-8 p-2 items-center justify-center absolute left-[-44px] top-1 rounded-full'
+                variant='tertiary'
+                onClick={navBackHandle}
+              >
+                <RiArrowLeftLine className='w-4 h-4 text-text-tertiary' />
+              </Button>
+            </div>
+            <KnowledgeBaseInfo
+              name={formData.name}
+              description={formData.description ?? ''}
+              onChange={data => handleFormChange({
+                ...formData,
+                ...data,
+              })}
+            />
+            <Divider />
+            <ExternalApiSelection
+              external_knowledge_api_id={formData.external_knowledge_api_id}
+              external_knowledge_id={formData.external_knowledge_id}
+              onChange={data => handleFormChange({
+                ...formData,
+                ...data,
+              })}
+            />
+            <RetrievalSettings
+              topK={formData.external_retrieval_model.top_k}
+              scoreThreshold={formData.external_retrieval_model.score_threshold}
+              scoreThresholdEnabled={formData.external_retrieval_model.score_threshold_enabled}
+              onChange={data => handleFormChange({
+                ...formData,
+                external_retrieval_model: {
+                  ...formData.external_retrieval_model,
+                  ...data,
+                },
+              })}
+            />
+            <div className='flex py-2 justify-end items-center gap-2 self-stretch'>
+              <Button variant='secondary' onClick={navBackHandle}>
+                <div className='text-components-button-secondary-text system-sm-medium'>{t('dataset.externalKnowledgeForm.cancel')}</div>
+              </Button>
+              <Button
+                variant='primary'
+                onClick={() => {
+                  onConnect(formData)
+                }}
+                disabled={!isFormValid}
+                loading={loading}
+              >
+                <div className='text-components-button-primary-text system-sm-medium'>{t('dataset.externalKnowledgeForm.connect')}</div>
+                <RiArrowRightLine className='w-4 h-4 text-components-button-primary-text' />
+              </Button>
+            </div>
+          </div>
+        </div>
+        <InfoPanel />
+      </div>
+    </div>
+  )
+}
+
+export default ExternalKnowledgeBaseCreate

web/app/components/datasets/hit-testing/hit-detail.tsx

@@ -26,12 +26,15 @@ const HitDetail: FC<IHitDetailProps> = ({ segInfo }) => {
       )
     }
 
-    return segInfo?.content
+    return <div className='mb-4 text-md text-gray-800 h-full'>{segInfo?.content}</div>
   }
 
   return (
-    <div className='overflow-x-auto'>
-      <div className="bg-gray-25 p-6">
+    segInfo?.id === 'external'
+      ? <div className='w-full overflow-x-auto px-2'>
+        <div className={s.segModalContent}>{renderContent()}</div>
+      </div>
+      : <div className='overflow-x-auto'>
         <div className="flex items-center">
           <SegmentIndexTag
             positionId={segInfo?.position || ''}
@@ -59,7 +62,6 @@ const HitDetail: FC<IHitDetailProps> = ({ segInfo }) => {
             })}
         </div>
       </div>
-    </div>
   )
 }
 

web/app/components/datasets/hit-testing/index.tsx

@@ -13,7 +13,7 @@ import s from './style.module.css'
 import HitDetail from './hit-detail'
 import ModifyRetrievalModal from './modify-retrieval-modal'
 import cn from '@/utils/classnames'
-import type { HitTestingResponse, HitTesting as HitTestingType } from '@/models/datasets'
+import type { ExternalKnowledgeBaseHitTestingResponse, ExternalKnowledgeBaseHitTesting as ExternalKnowledgeBaseHitTestingType, HitTestingResponse, HitTesting as HitTestingType } from '@/models/datasets'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal'
 import Drawer from '@/app/components/base/drawer'
@@ -49,8 +49,10 @@ const HitTesting: FC<Props> = ({ datasetId }: Props) => {
   const isMobile = media === MediaType.mobile
 
   const [hitResult, setHitResult] = useState<HitTestingResponse | undefined>() // 初始化记录为空数组
+  const [externalHitResult, setExternalHitResult] = useState<ExternalKnowledgeBaseHitTestingResponse | undefined>()
   const [submitLoading, setSubmitLoading] = useState(false)
   const [currParagraph, setCurrParagraph] = useState<{ paraInfo?: HitTestingType; showModal: boolean }>({ showModal: false })
+  const [externalCurrParagraph, setExternalCurrParagraph] = useState<{ paraInfo?: ExternalKnowledgeBaseHitTestingType; showModal: boolean }>({ showModal: false })
   const [text, setText] = useState('')
 
   const [currPage, setCurrPage] = React.useState<number>(0)
@@ -66,12 +68,52 @@ const HitTesting: FC<Props> = ({ datasetId }: Props) => {
     setCurrParagraph({ paraInfo: detail, showModal: true })
   }
 
+  const onClickExternalCard = (detail: ExternalKnowledgeBaseHitTestingType) => {
+    setExternalCurrParagraph({ paraInfo: detail, showModal: true })
+  }
   const { dataset: currentDataset } = useContext(DatasetDetailContext)
+  const isExternal = currentDataset?.provider === 'external'
 
   const [retrievalConfig, setRetrievalConfig] = useState(currentDataset?.retrieval_model_dict as RetrievalConfig)
   const [isShowModifyRetrievalModal, setIsShowModifyRetrievalModal] = useState(false)
   const [isShowRightPanel, { setTrue: showRightPanel, setFalse: hideRightPanel, set: setShowRightPanel }] = useBoolean(!isMobile)
 
+  const renderHitResults = (results: any[], onClickCard: (record: any) => void) => (
+    <>
+      <div className='text-gray-600 font-semibold mb-4'>{t('datasetHitTesting.hit.title')}</div>
+      <div className='overflow-auto flex-1'>
+        <div className={s.cardWrapper}>
+          {results.map((record, idx) => (
+            <SegmentCard
+              key={idx}
+              loading={false}
+              refSource= {{
+                title: record.title,
+                uri: record.metadata ? record.metadata['x-amz-bedrock-kb-source-uri'] : '',
+              }}
+              isExternal={isExternal}
+              detail={record.segment}
+              contentExternal={record.content}
+              score={record.score}
+              scene='hitTesting'
+              className='h-[216px] mb-4'
+              onClick={() => onClickCard(record)}
+            />
+          ))}
+        </div>
+      </div>
+    </>
+  )
+
+  const renderEmptyState = () => (
+    <div className='h-full flex flex-col justify-center items-center'>
+      <div className={cn(docStyle.commonIcon, docStyle.targetIcon, '!bg-gray-200 !h-14 !w-14')} />
+      <div className='text-gray-300 text-[13px] mt-3'>
+        {t('datasetHitTesting.hit.emptyTip')}
+      </div>
+    </div>
+  )
+
   useEffect(() => {
     setShowRightPanel(!isMobile)
   }, [isMobile, setShowRightPanel])
@@ -86,12 +128,14 @@ const HitTesting: FC<Props> = ({ datasetId }: Props) => {
         <Textarea
           datasetId={datasetId}
           setHitResult={setHitResult}
+          setExternalHitResult={setExternalHitResult}
           onSubmit={showRightPanel}
           onUpdateList={recordsMutate}
           loading={submitLoading}
           setLoading={setSubmitLoading}
           setText={setText}
           text={text}
+          isExternal={isExternal}
           onClickRetrievalMethod={() => setIsShowModifyRetrievalModal(true)}
           retrievalConfig={retrievalConfig}
           isEconomy={currentDataset?.indexing_technique === 'economy'}
@@ -159,47 +203,42 @@ const HitTesting: FC<Props> = ({ datasetId }: Props) => {
                 className='h-[216px]'
               />
             </div>
-            : !hitResult?.records.length
-              ? (
-                <div className='h-full flex flex-col justify-center items-center'>
-                  <div className={cn(docStyle.commonIcon, docStyle.targetIcon, '!bg-gray-200 !h-14 !w-14')} />
-                  <div className='text-gray-300 text-[13px] mt-3'>
-                    {t('datasetHitTesting.hit.emptyTip')}
-                  </div>
-                </div>
-              )
-              : (
-                <>
-                  <div className='text-gray-600 font-semibold mb-4'>{t('datasetHitTesting.hit.title')}</div>
-                  <div className='overflow-auto flex-1'>
-                    <div className={s.cardWrapper}>
-                      {hitResult?.records.map((record, idx) => {
-                        return <SegmentCard
-                          key={idx}
-                          loading={false}
-                          detail={record.segment as any}
-                          score={record.score}
-                          scene='hitTesting'
-                          className='h-[216px] mb-4'
-                          onClick={() => onClickCard(record as any)}
-                        />
-                      })}
-                    </div>
-                  </div>
-                </>
-              )
+            : (
+              (() => {
+                if (!hitResult?.records.length && !externalHitResult?.records.length)
+                  return renderEmptyState()
+
+                if (hitResult?.records.length)
+                  return renderHitResults(hitResult.records, onClickCard)
+
+                return renderHitResults(externalHitResult?.records || [], onClickExternalCard)
+              })()
+            )
           }
         </div>
       </FloatRightContainer>
       <Modal
-        className='w-[520px] p-0'
+        className={isExternal ? 'py-10 px-8' : 'w-full'}
         closable
-        onClose={() => setCurrParagraph({ showModal: false })}
-        isShow={currParagraph.showModal}
+        onClose={() => {
+          setCurrParagraph({ showModal: false })
+          setExternalCurrParagraph({ showModal: false })
+        }}
+        isShow={currParagraph.showModal || externalCurrParagraph.showModal}
       >
-        {currParagraph.showModal && <HitDetail
-          segInfo={currParagraph.paraInfo?.segment}
-        />}
+        {currParagraph.showModal && (
+          <HitDetail
+            segInfo={currParagraph.paraInfo?.segment}
+          />
+        )}
+        {externalCurrParagraph.showModal && (
+          <HitDetail
+            segInfo={{
+              id: 'external',
+              content: externalCurrParagraph.paraInfo?.content,
+            }}
+          />
+        )}
       </Modal>
       <Drawer isOpen={isShowModifyRetrievalModal} onClose={() => setIsShowModifyRetrievalModal(false)} footer={null} mask={isMobile} panelClassname='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[640px] rounded-xl'>
         <ModifyRetrievalModal

web/app/components/datasets/hit-testing/modify-external-retrieval-modal.tsx

@@ -0,0 +1,71 @@
+import { useState } from 'react'
+import {
+  RiCloseLine,
+} from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import RetrievalSettings from '../external-knowledge-base/create/RetrievalSettings'
+import Button from '@/app/components/base/button'
+import ActionButton from '@/app/components/base/action-button'
+
+type ModifyExternalRetrievalModalProps = {
+  onClose: () => void
+  onSave: (data: { top_k: number; score_threshold: number; score_threshold_enabled: boolean }) => void
+  initialTopK: number
+  initialScoreThreshold: number
+  initialScoreThresholdEnabled: boolean
+}
+
+const ModifyExternalRetrievalModal: React.FC<ModifyExternalRetrievalModalProps> = ({
+  onClose,
+  onSave,
+  initialTopK,
+  initialScoreThreshold,
+  initialScoreThresholdEnabled,
+}) => {
+  const { t } = useTranslation()
+  const [topK, setTopK] = useState(initialTopK)
+  const [scoreThreshold, setScoreThreshold] = useState(initialScoreThreshold)
+  const [scoreThresholdEnabled, setScoreThresholdEnabled] = useState(initialScoreThresholdEnabled)
+
+  const handleSettingsChange = (data: { top_k?: number; score_threshold?: number; score_threshold_enabled?: boolean }) => {
+    if (data.top_k !== undefined)
+      setTopK(data.top_k)
+    if (data.score_threshold !== undefined)
+      setScoreThreshold(data.score_threshold)
+    if (data.score_threshold_enabled !== undefined)
+      setScoreThresholdEnabled(data.score_threshold_enabled)
+  }
+
+  const handleSave = () => {
+    onSave({ top_k: topK, score_threshold: scoreThreshold, score_threshold_enabled: scoreThresholdEnabled })
+    onClose()
+  }
+
+  return (
+    <div className='absolute z-10 top-[36px] right-[14px] flex w-[320px] flex-col items-start rounded-2xl border-[0.5px]
+      border-components-panel-border bg-components-panel-bg shadows-shadow-2xl'
+    >
+      <div className='flex p-4 pb-2 items-center justify-between self-stretch'>
+        <div className='text-text-primary system-xl-semibold flex-grow'>{t('datasetHitTesting.settingTitle')}</div>
+        <ActionButton className='ml-auto' onClick={onClose}>
+          <RiCloseLine className='w-4 h-4 flex-shrink-0' />
+        </ActionButton>
+      </div>
+      <div className='flex p-4 pt-2 flex-col justify-center items-start gap-4 self-stretch'>
+        <RetrievalSettings
+          topK={topK}
+          scoreThreshold={scoreThreshold}
+          scoreThresholdEnabled={scoreThresholdEnabled}
+          onChange={handleSettingsChange}
+          isInHitTesting={true}
+        />
+      </div>
+      <div className='flex p-4 pt-2 justify-end items-end gap-1 w-full'>
+        <Button className='flex-shrink-0 min-w-[72px]' onClick={onClose}>{t('common.operation.cancel')}</Button>
+        <Button variant='primary' className='flex-shrink-0 min-w-[72px]' onClick={handleSave}>{t('common.operation.save')}</Button>
+      </div>
+    </div>
+  )
+}
+
+export default ModifyExternalRetrievalModal

web/app/components/datasets/hit-testing/textarea.tsx

@@ -1,12 +1,17 @@
+import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import {
+  RiEqualizer2Line,
+} from '@remixicon/react'
 import Button from '../../base/button'
 import Tag from '../../base/tag'
 import { getIcon } from '../common/retrieval-method-info'
 import s from './style.module.css'
+import ModifyExternalRetrievalModal from './modify-external-retrieval-modal'
 import Tooltip from '@/app/components/base/tooltip'
 import cn from '@/utils/classnames'
-import type { HitTestingResponse } from '@/models/datasets'
-import { hitTesting } from '@/service/datasets'
+import type { ExternalKnowledgeBaseHitTestingResponse, HitTestingResponse } from '@/models/datasets'
+import { externalKnowledgeBaseHitTesting, hitTesting } from '@/service/datasets'
 import { asyncRunSafe } from '@/utils'
 import { RETRIEVE_METHOD, type RetrievalConfig } from '@/types/app'
 
@@ -14,10 +19,12 @@ type TextAreaWithButtonIProps = {
   datasetId: string
   onUpdateList: () => void
   setHitResult: (res: HitTestingResponse) => void
+  setExternalHitResult: (res: ExternalKnowledgeBaseHitTestingResponse) => void
   loading: boolean
   setLoading: (v: boolean) => void
   text: string
   setText: (v: string) => void
+  isExternal?: boolean
   onClickRetrievalMethod: () => void
   retrievalConfig: RetrievalConfig
   isEconomy: boolean
@@ -28,16 +35,29 @@ const TextAreaWithButton = ({
   datasetId,
   onUpdateList,
   setHitResult,
+  setExternalHitResult,
   setLoading,
   loading,
   text,
   setText,
+  isExternal = false,
   onClickRetrievalMethod,
   retrievalConfig,
   isEconomy,
   onSubmit: _onSubmit,
 }: TextAreaWithButtonIProps) => {
   const { t } = useTranslation()
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false)
+  const [externalRetrievalSettings, setExternalRetrievalSettings] = useState({
+    top_k: 2,
+    score_threshold: 0.5,
+    score_threshold_enabled: false,
+  })
+
+  const handleSaveExternalRetrievalSettings = (data: { top_k: number; score_threshold: number; score_threshold_enabled: boolean }) => {
+    setExternalRetrievalSettings(data)
+    setIsSettingsOpen(false)
+  }
 
   function handleTextChange(event: any) {
     setText(event.target.value)
@@ -63,28 +83,70 @@ const TextAreaWithButton = ({
     _onSubmit && _onSubmit()
   }
 
+  const externalRetrievalTestingOnSubmit = async () => {
+    const [e, res] = await asyncRunSafe<ExternalKnowledgeBaseHitTestingResponse>(
+      externalKnowledgeBaseHitTesting({
+        datasetId,
+        query: text,
+        external_retrieval_model: {
+          top_k: externalRetrievalSettings.top_k,
+          score_threshold: externalRetrievalSettings.score_threshold,
+          score_threshold_enabled: externalRetrievalSettings.score_threshold_enabled,
+        },
+      }) as Promise<ExternalKnowledgeBaseHitTestingResponse>,
+    )
+    if (!e) {
+      setExternalHitResult(res)
+      onUpdateList?.()
+    }
+    setLoading(false)
+  }
+
   const retrievalMethod = isEconomy ? RETRIEVE_METHOD.invertedIndex : retrievalConfig.search_method
   const Icon = getIcon(retrievalMethod)
   return (
     <>
       <div className={s.wrapper}>
-        <div className='pt-2 rounded-tl-xl rounded-tr-xl bg-[#EEF4FF]'>
+        <div className='relative pt-2 rounded-tl-xl rounded-tr-xl bg-[#EEF4FF]'>
           <div className="px-4 pb-2 flex justify-between h-8 items-center">
             <span className="text-gray-800 font-semibold text-sm">
               {t('datasetHitTesting.input.title')}
             </span>
-            <Tooltip
-              popupContent={t('dataset.retrieval.changeRetrievalMethod')}
-            >
-              <div
-                onClick={onClickRetrievalMethod}
-                className='flex px-2 h-7 items-center space-x-1 bg-white hover:bg-[#ECE9FE] rounded-md shadow-sm cursor-pointer text-[#6927DA]'
+            {isExternal
+              ? <Button
+                variant='secondary'
+                size='small'
+                onClick={() => setIsSettingsOpen(!isSettingsOpen)}
               >
-                <Icon className='w-3.5 h-3.5'></Icon>
-                <div className='text-xs font-medium'>{t(`dataset.retrieval.${retrievalMethod}.title`)}</div>
-              </div>
-            </Tooltip>
+                <RiEqualizer2Line className='text-components-button-secondary-text w-3.5 h-3.5' />
+                <div className='flex px-[3px] justify-center items-center gap-1'>
+                  <span className='text-components-button-secondary-text system-xs-medium'>{t('datasetHitTesting.settingTitle')}</span>
+                </div>
+              </Button>
+              : <Tooltip
+                popupContent={t('dataset.retrieval.changeRetrievalMethod')}
+              >
+                <div
+                  onClick={onClickRetrievalMethod}
+                  className='flex px-2 h-7 items-center space-x-1 bg-white hover:bg-[#ECE9FE] rounded-md shadow-sm cursor-pointer text-[#6927DA]'
+                >
+                  <Icon className='w-3.5 h-3.5'></Icon>
+                  <div className='text-xs font-medium'>{t(`dataset.retrieval.${retrievalMethod}.title`)}</div>
+                </div>
+              </Tooltip>
+            }
           </div>
+          {
+            isSettingsOpen && (
+              <ModifyExternalRetrievalModal
+                onClose={() => setIsSettingsOpen(false)}
+                onSave={handleSaveExternalRetrievalSettings}
+                initialTopK={externalRetrievalSettings.top_k}
+                initialScoreThreshold={externalRetrievalSettings.score_threshold}
+                initialScoreThresholdEnabled={externalRetrievalSettings.score_threshold_enabled}
+              />
+            )
+          }
           <div className='h-2 rounded-tl-xl rounded-tr-xl bg-white'></div>
         </div>
         <div className='px-4 pb-11'>
@@ -122,7 +184,7 @@ const TextAreaWithButton = ({
 
             <div>
               <Button
-                onClick={onSubmit}
+                onClick={isExternal ? externalRetrievalTestingOnSubmit : onSubmit}
                 variant="primary"
                 loading={loading}
                 disabled={(!text?.length || text?.length > 200)}
@@ -132,7 +194,6 @@ const TextAreaWithButton = ({
             </div>
           </div>
         </div>
-
       </div>
     </>
   )

web/app/components/datasets/rename-modal/index.tsx

@@ -26,6 +26,8 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
   const [loading, setLoading] = useState(false)
   const [name, setName] = useState<string>(dataset.name)
   const [description, setDescription] = useState<string>(dataset.description)
+  const [externalKnowledgeId, setExternalKnowledgeId] = useState<string>(dataset.external_knowledge_info.external_knowledge_id)
+  const [externalKnowledgeApiId, setExternalKnowledgeApiId] = useState<string>(dataset.external_knowledge_info.external_knowledge_api_id)
 
   const onConfirm: MouseEventHandler = async () => {
     if (!name.trim()) {
@@ -34,12 +36,17 @@ const RenameDatasetModal = ({ show, dataset, onSuccess, onClose }: RenameDataset
     }
     try {
       setLoading(true)
+      const body: Partial<DataSet> & { external_knowledge_id?: string; external_knowledge_api_id?: string } = {
+        name,
+        description,
+      }
+      if (externalKnowledgeId && externalKnowledgeApiId) {
+        body.external_knowledge_id = externalKnowledgeId
+        body.external_knowledge_api_id = externalKnowledgeApiId
+      }
       await updateDatasetSetting({
         datasetId: dataset.id,
-        body: {
-          name,
-          description,
-        },
+        body,
       })
       notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
       if (onSuccess)

web/app/components/datasets/settings/form/index.tsx

@@ -8,11 +8,14 @@ import { useSWRConfig } from 'swr'
 import { unstable_serialize } from 'swr/infinite'
 import PermissionSelector from '../permission-selector'
 import IndexMethodRadio from '../index-method-radio'
+import RetrievalSettings from '../../external-knowledge-base/create/RetrievalSettings'
 import cn from '@/utils/classnames'
 import RetrievalMethodConfig from '@/app/components/datasets/common/retrieval-method-config'
 import EconomicalRetrievalMethodConfig from '@/app/components/datasets/common/economical-retrieval-method-config'
 import { ToastContext } from '@/app/components/base/toast'
 import Button from '@/app/components/base/button'
+import Divider from '@/app/components/base/divider'
+import { ApiConnectionMod } from '@/app/components/base/icons/src/vender/solid/development'
 import { updateDatasetSetting } from '@/service/datasets'
 import type { DataSetListResponse } from '@/models/datasets'
 import DatasetDetailContext from '@/context/dataset-detail'
@@ -55,6 +58,9 @@ const Form = () => {
   const [name, setName] = useState(currentDataset?.name ?? '')
   const [description, setDescription] = useState(currentDataset?.description ?? '')
   const [permission, setPermission] = useState(currentDataset?.permission)
+  const [topK, setTopK] = useState(currentDataset?.external_retrieval_model.top_k ?? 2)
+  const [scoreThreshold, setScoreThreshold] = useState(currentDataset?.external_retrieval_model.score_threshold ?? 0.5)
+  const [scoreThresholdEnabled, setScoreThresholdEnabled] = useState(currentDataset?.external_retrieval_model.score_threshold_enabled ?? false)
   const [selectedMemberIDs, setSelectedMemberIDs] = useState<string[]>(currentDataset?.partial_member_list || [])
   const [memberList, setMemberList] = useState<Member[]>([])
   const [indexMethod, setIndexMethod] = useState(currentDataset?.indexing_technique)
@@ -85,6 +91,15 @@ const Form = () => {
       setMemberList(accounts)
   }
 
+  const handleSettingsChange = (data: { top_k?: number; score_threshold?: number; score_threshold_enabled?: boolean }) => {
+    if (data.top_k !== undefined)
+      setTopK(data.top_k)
+    if (data.score_threshold !== undefined)
+      setScoreThreshold(data.score_threshold)
+    if (data.score_threshold_enabled !== undefined)
+      setScoreThresholdEnabled(data.score_threshold_enabled)
+  }
+
   useMount(() => {
     getMembers()
   })
@@ -126,10 +141,17 @@ const Form = () => {
           description,
           permission,
           indexing_technique: indexMethod,
+          external_retrieval_model: {
+            top_k: topK,
+            score_threshold: scoreThreshold,
+            score_threshold_enabled: scoreThresholdEnabled,
+          },
           retrieval_model: {
             ...postRetrievalConfig,
             score_threshold: postRetrievalConfig.score_threshold_enabled ? postRetrievalConfig.score_threshold : 0,
           },
+          external_knowledge_id: currentDataset!.external_knowledge_info.external_knowledge_id,
+          external_knowledge_api_id: currentDataset!.external_knowledge_info.external_knowledge_api_id,
           embedding_model: embeddingModel.model,
           embedding_model_provider: embeddingModel.provider,
         },
@@ -161,7 +183,7 @@ const Form = () => {
     <div className='w-full sm:w-[800px] p-4 sm:px-16 sm:py-6'>
       <div className={rowClass}>
         <div className={labelClass}>
-          <div>{t('datasetSettings.form.name')}</div>
+          <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.name')}</div>
         </div>
         <div className='w-full max-w-[480px]'>
           <input
@@ -174,7 +196,7 @@ const Form = () => {
       </div>
       <div className={rowClass}>
         <div className={labelClass}>
-          <div>{t('datasetSettings.form.desc')}</div>
+          <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.desc')}</div>
         </div>
         <div className='w-full max-w-[480px]'>
           <textarea
@@ -192,7 +214,7 @@ const Form = () => {
       </div>
       <div className={rowClass}>
         <div className={labelClass}>
-          <div>{t('datasetSettings.form.permissions')}</div>
+          <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.permissions')}</div>
         </div>
         <div className='w-full sm:w-[480px]'>
           <PermissionSelector
@@ -210,7 +232,7 @@ const Form = () => {
           <div className='w-full h-0 border-b-[0.5px] border-b-gray-200 my-2' />
           <div className={rowClass}>
             <div className={labelClass}>
-              <div>{t('datasetSettings.form.indexMethod')}</div>
+              <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.indexMethod')}</div>
             </div>
             <div className='w-full sm:w-[480px]'>
               <IndexMethodRadio
@@ -225,7 +247,7 @@ const Form = () => {
       {indexMethod === 'high_quality' && (
         <div className={rowClass}>
           <div className={labelClass}>
-            <div>{t('datasetSettings.form.embeddingModel')}</div>
+            <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.embeddingModel')}</div>
           </div>
           <div className='w-[480px]'>
             <ModelSelector
@@ -240,32 +262,76 @@ const Form = () => {
         </div>
       )}
       {/* Retrieval Method Config */}
-      <div className={rowClass}>
-        <div className={labelClass}>
-          <div>
-            <div>{t('datasetSettings.form.retrievalSetting.title')}</div>
-            <div className='leading-[18px] text-xs font-normal text-gray-500'>
-              <a target='_blank' rel='noopener noreferrer' href='https://docs.dify.ai/guides/knowledge-base/create-knowledge-and-upload-documents#id-4-retrieval-settings' className='text-[#155eef]'>{t('datasetSettings.form.retrievalSetting.learnMore')}</a>
-              {t('datasetSettings.form.retrievalSetting.description')}
+      {currentDataset?.provider === 'external'
+        ? <>
+          <div className={rowClass}><Divider/></div>
+          <div className={rowClass}>
+            <div className={labelClass}>
+              <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.retrievalSetting.title')}</div>
+            </div>
+            <RetrievalSettings
+              topK={topK}
+              scoreThreshold={scoreThreshold}
+              scoreThresholdEnabled={scoreThresholdEnabled}
+              onChange={handleSettingsChange}
+              isInRetrievalSetting={true}
+            />
+          </div>
+          <div className={rowClass}><Divider/></div>
+          <div className={rowClass}>
+            <div className={labelClass}>
+              <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.externalKnowledgeAPI')}</div>
+            </div>
+            <div className='w-full max-w-[480px]'>
+              <div className='flex h-full px-3 py-2 items-center gap-1 rounded-lg bg-components-input-bg-normal'>
+                <ApiConnectionMod className='w-4 h-4 text-text-secondary' />
+                <div className='overflow-hidden text-text-secondary text-ellipsis system-sm-medium'>
+                  {currentDataset?.external_knowledge_info.external_knowledge_api_name}
+                </div>
+                <div className='text-text-tertiary system-xs-regular'>·</div>
+                <div className='text-text-tertiary system-xs-regular'>{currentDataset?.external_knowledge_info.external_knowledge_api_endpoint}</div>
+              </div>
             </div>
           </div>
+          <div className={rowClass}>
+            <div className={labelClass}>
+              <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.externalKnowledgeID')}</div>
+            </div>
+            <div className='w-full max-w-[480px]'>
+              <div className='flex h-full px-3 py-2 items-center gap-1 rounded-lg bg-components-input-bg-normal'>
+                <div className='text-text-tertiary system-xs-regular'>{currentDataset?.external_knowledge_info.external_knowledge_id}</div>
+              </div>
+            </div>
+          </div>
+          <div className={rowClass}><Divider/></div>
+        </>
+        : <div className={rowClass}>
+          <div className={labelClass}>
+            <div>
+              <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.retrievalSetting.title')}</div>
+              <div className='leading-[18px] text-xs font-normal text-gray-500'>
+                <a target='_blank' rel='noopener noreferrer' href='https://docs.dify.ai/guides/knowledge-base/create-knowledge-and-upload-documents#id-4-retrieval-settings' className='text-[#155eef]'>{t('datasetSettings.form.retrievalSetting.learnMore')}</a>
+                {t('datasetSettings.form.retrievalSetting.description')}
+              </div>
+            </div>
+          </div>
+          <div className='w-[480px]'>
+            {indexMethod === 'high_quality'
+              ? (
+                <RetrievalMethodConfig
+                  value={retrievalConfig}
+                  onChange={setRetrievalConfig}
+                />
+              )
+              : (
+                <EconomicalRetrievalMethodConfig
+                  value={retrievalConfig}
+                  onChange={setRetrievalConfig}
+                />
+              )}
+          </div>
         </div>
-        <div className='w-[480px]'>
-          {indexMethod === 'high_quality'
-            ? (
-              <RetrievalMethodConfig
-                value={retrievalConfig}
-                onChange={setRetrievalConfig}
-              />
-            )
-            : (
-              <EconomicalRetrievalMethodConfig
-                value={retrievalConfig}
-                onChange={setRetrievalConfig}
-              />
-            )}
-        </div>
-      </div>
+      }
       <div className={rowClass}>
         <div className={labelClass} />
         <div className='w-[480px]'>