dify

dify/web/app/components/datasets/common/check-rerank-model.ts

@@ -0,0 +1,70 @@
+import { RETRIEVE_METHOD, type RetrievalConfig } from '@/types/app'
+import type {
+  DefaultModelResponse,
+  Model,
+} from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { RerankingModeEnum } from '@/models/datasets'
+
+export const isReRankModelSelected = ({
+  retrievalConfig,
+  rerankModelList,
+  indexMethod,
+}: {
+  retrievalConfig: RetrievalConfig
+  rerankModelList: Model[]
+  indexMethod?: string
+}) => {
+  const rerankModelSelected = (() => {
+    if (retrievalConfig.reranking_model?.reranking_model_name) {
+      const provider = rerankModelList.find(({ provider }) => provider === retrievalConfig.reranking_model?.reranking_provider_name)
+
+      return provider?.models.find(({ model }) => model === retrievalConfig.reranking_model?.reranking_model_name)
+    }
+
+    return false
+  })()
+
+  if (
+    indexMethod === 'high_quality'
+    && ([RETRIEVE_METHOD.semantic, RETRIEVE_METHOD.fullText].includes(retrievalConfig.search_method))
+    && retrievalConfig.reranking_enable
+    && !rerankModelSelected
+  )
+    return false
+
+  if (
+    indexMethod === 'high_quality'
+    && (retrievalConfig.search_method === RETRIEVE_METHOD.hybrid && retrievalConfig.reranking_mode !== RerankingModeEnum.WeightedScore)
+    && !rerankModelSelected
+  )
+    return false
+
+  return true
+}
+
+export const ensureRerankModelSelected = ({
+  rerankDefaultModel,
+  indexMethod,
+  retrievalConfig,
+}: {
+  rerankDefaultModel: DefaultModelResponse
+  retrievalConfig: RetrievalConfig
+  indexMethod?: string
+}) => {
+  const rerankModel = retrievalConfig.reranking_model?.reranking_model_name ? retrievalConfig.reranking_model : undefined
+  if (
+    indexMethod === 'high_quality'
+    && (retrievalConfig.reranking_enable || retrievalConfig.search_method === RETRIEVE_METHOD.hybrid)
+    && !rerankModel
+    && rerankDefaultModel
+  ) {
+    return {
+      ...retrievalConfig,
+      reranking_model: {
+        reranking_provider_name: rerankDefaultModel.provider.provider,
+        reranking_model_name: rerankDefaultModel.model,
+      },
+    }
+  }
+  return retrievalConfig
+}

dify/web/app/components/datasets/common/chunking-mode-label.tsx

@@ -0,0 +1,30 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import Badge from '@/app/components/base/badge'
+import { GeneralChunk, ParentChildChunk } from '@/app/components/base/icons/src/vender/knowledge'
+
+type Props = {
+  isGeneralMode: boolean
+  isQAMode: boolean
+}
+
+const ChunkingModeLabel: FC<Props> = ({
+  isGeneralMode,
+  isQAMode,
+}) => {
+  const { t } = useTranslation()
+  const TypeIcon = isGeneralMode ? GeneralChunk : ParentChildChunk
+  const generalSuffix = isQAMode ? ' · QA' : ''
+
+  return (
+    <Badge>
+      <div className='flex h-full items-center space-x-0.5 text-text-tertiary'>
+        <TypeIcon className='h-3 w-3' />
+        <span className='system-2xs-medium-uppercase'>{isGeneralMode ? `${t('dataset.chunkingMode.general')}${generalSuffix}` : t('dataset.chunkingMode.parentChild')}</span>
+      </div>
+    </Badge>
+  )
+}
+export default React.memo(ChunkingModeLabel)

dify/web/app/components/datasets/common/credential-icon.tsx

@@ -0,0 +1,63 @@
+import cn from '@/utils/classnames'
+import React, { useCallback, useMemo, useState } from 'react'
+
+type CredentialIconProps = {
+  avatar_url?: string
+  name: string
+  size?: number
+  className?: string
+}
+
+const ICON_BG_COLORS = [
+  'bg-components-icon-bg-orange-dark-solid',
+  'bg-components-icon-bg-pink-solid',
+  'bg-components-icon-bg-indigo-solid',
+  'bg-components-icon-bg-teal-solid',
+]
+
+export const CredentialIcon: React.FC<CredentialIconProps> = ({
+  avatar_url,
+  name,
+  size = 20,
+  className = '',
+}) => {
+  const [showAvatar, setShowAvatar] = useState(!!avatar_url && avatar_url !== 'default')
+  const firstLetter = useMemo(() => name.charAt(0).toUpperCase(), [name])
+  const bgColor = useMemo(() => ICON_BG_COLORS[firstLetter.charCodeAt(0) % ICON_BG_COLORS.length], [firstLetter])
+
+  const onImgLoadError = useCallback(() => {
+    setShowAvatar(false)
+  }, [])
+
+  if (avatar_url && avatar_url !== 'default' && showAvatar) {
+    return (
+      <div
+        className='flex shrink-0 items-center justify-center overflow-hidden rounded-md border border-divider-regular'
+        style={{ width: `${size}px`, height: `${size}px` }}
+      >
+        <img
+          src={avatar_url}
+          width={size}
+          height={size}
+          className={cn('shrink-0 object-contain', className)}
+          onError={onImgLoadError}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className={cn(
+        'flex shrink-0 items-center justify-center rounded-md border border-divider-regular',
+        bgColor,
+        className,
+      )}
+      style={{ width: `${size}px`, height: `${size}px` }}
+    >
+      <span className='bg-gradient-to-b from-components-avatar-shape-fill-stop-0 to-components-avatar-shape-fill-stop-100 bg-clip-text text-[13px] font-semibold leading-[1.2] text-transparent opacity-90'>
+        {firstLetter}
+      </span>
+    </div>
+  )
+}

dify/web/app/components/datasets/common/document-file-icon.tsx

@@ -0,0 +1,40 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import FileTypeIcon from '../../base/file-uploader/file-type-icon'
+import type { FileAppearanceType } from '@/app/components/base/file-uploader/types'
+import { FileAppearanceTypeEnum } from '@/app/components/base/file-uploader/types'
+
+const extendToFileTypeMap: { [key: string]: FileAppearanceType } = {
+  pdf: FileAppearanceTypeEnum.pdf,
+  json: FileAppearanceTypeEnum.document,
+  html: FileAppearanceTypeEnum.document,
+  txt: FileAppearanceTypeEnum.document,
+  markdown: FileAppearanceTypeEnum.markdown,
+  md: FileAppearanceTypeEnum.markdown,
+  xlsx: FileAppearanceTypeEnum.excel,
+  xls: FileAppearanceTypeEnum.excel,
+  csv: FileAppearanceTypeEnum.excel,
+  doc: FileAppearanceTypeEnum.word,
+  docx: FileAppearanceTypeEnum.word,
+}
+
+type Props = {
+  extension?: string
+  name?: string
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+  className?: string
+}
+
+const DocumentFileIcon: FC<Props> = ({
+  extension,
+  name,
+  size = 'md',
+  className,
+}) => {
+  const localExtension = extension?.toLowerCase() || name?.split('.')?.pop()?.toLowerCase()
+  return (
+    <FileTypeIcon type={extendToFileTypeMap[localExtension!] || FileAppearanceTypeEnum.document} size={size} className={className} />
+  )
+}
+export default React.memo(DocumentFileIcon)

dify/web/app/components/datasets/common/document-picker/document-list.tsx

@@ -0,0 +1,42 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import FileIcon from '../document-file-icon'
+import cn from '@/utils/classnames'
+import type { DocumentItem } from '@/models/datasets'
+
+type Props = {
+  className?: string
+  list: DocumentItem[]
+  onChange: (value: DocumentItem) => void
+}
+
+const DocumentList: FC<Props> = ({
+  className,
+  list,
+  onChange,
+}) => {
+  const handleChange = useCallback((item: DocumentItem) => {
+    return () => onChange(item)
+  }, [onChange])
+
+  return (
+    <div className={cn('max-h-[calc(100vh-120px)] overflow-auto', className)}>
+      {list.map((item) => {
+        const { id, name, extension } = item
+        return (
+          <div
+            key={id}
+            className='flex h-8 cursor-pointer items-center space-x-2 rounded-lg px-2 hover:bg-state-base-hover'
+            onClick={handleChange(item)}
+          >
+            <FileIcon name={item.name} extension={extension} size='lg' />
+            <div className='truncate text-sm text-text-secondary'>{name}</div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default React.memo(DocumentList)

dify/web/app/components/datasets/common/document-picker/index.tsx

@@ -0,0 +1,127 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
+import { useBoolean } from 'ahooks'
+import { RiArrowDownSLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import FileIcon from '../document-file-icon'
+import DocumentList from './document-list'
+import type { DocumentItem, ParentMode, SimpleDocumentDetail } from '@/models/datasets'
+import { ChunkingMode } from '@/models/datasets'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import cn from '@/utils/classnames'
+import SearchInput from '@/app/components/base/search-input'
+import { GeneralChunk, ParentChildChunk } from '@/app/components/base/icons/src/vender/knowledge'
+import { useDocumentList } from '@/service/knowledge/use-document'
+import Loading from '@/app/components/base/loading'
+
+type Props = {
+  datasetId: string
+  value: {
+    name?: string
+    extension?: string
+    chunkingMode?: ChunkingMode
+    parentMode?: ParentMode
+  }
+  onChange: (value: SimpleDocumentDetail) => void
+}
+
+const DocumentPicker: FC<Props> = ({
+  datasetId,
+  value,
+  onChange,
+}) => {
+  const { t } = useTranslation()
+  const {
+    name,
+    extension,
+    chunkingMode,
+    parentMode,
+  } = value
+  const [query, setQuery] = useState('')
+
+  const { data } = useDocumentList({
+    datasetId,
+    query: {
+      keyword: query,
+      page: 1,
+      limit: 20,
+    },
+  })
+  const documentsList = data?.data
+  const isGeneralMode = chunkingMode === ChunkingMode.text
+  const isParentChild = chunkingMode === ChunkingMode.parentChild
+  const isQAMode = chunkingMode === ChunkingMode.qa
+  const TypeIcon = isParentChild ? ParentChildChunk : GeneralChunk
+
+  const [open, {
+    set: setOpen,
+    toggle: togglePopup,
+  }] = useBoolean(false)
+  const ArrowIcon = RiArrowDownSLine
+
+  const handleChange = useCallback(({ id }: DocumentItem) => {
+    onChange(documentsList?.find(item => item.id === id) as SimpleDocumentDetail)
+    setOpen(false)
+  }, [documentsList, onChange, setOpen])
+
+  const parentModeLabel = useMemo(() => {
+    if (!parentMode)
+      return '--'
+    return parentMode === 'paragraph' ? t('dataset.parentMode.paragraph') : t('dataset.parentMode.fullDoc')
+  }, [parentMode, t])
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-start'
+    >
+      <PortalToFollowElemTrigger onClick={togglePopup}>
+        <div className={cn('ml-1 flex cursor-pointer select-none items-center rounded-lg px-2 py-0.5 hover:bg-state-base-hover', open && 'bg-state-base-hover')}>
+          <FileIcon name={name} extension={extension} size='xl' />
+          <div className='ml-1 mr-0.5 flex flex-col items-start'>
+            <div className='flex items-center space-x-0.5'>
+              <span className={cn('system-md-semibold text-text-primary')}> {name || '--'}</span>
+              <ArrowIcon className={'h-4 w-4 text-text-primary'} />
+            </div>
+            <div className='flex h-3 items-center space-x-0.5 text-text-tertiary'>
+              <TypeIcon className='h-3 w-3' />
+              <span className={cn('system-2xs-medium-uppercase', isParentChild && 'mt-0.5' /* to icon problem cause not ver align */)}>
+                {isGeneralMode && t('dataset.chunkingMode.general')}
+                {isQAMode && t('dataset.chunkingMode.qa')}
+                {isParentChild && `${t('dataset.chunkingMode.parentChild')} · ${parentModeLabel}`}
+              </span>
+            </div>
+          </div>
+        </div>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-[11]'>
+        <div className='w-[360px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 pt-2 shadow-lg backdrop-blur-[5px]'>
+          <SearchInput value={query} onChange={setQuery} className='mx-1' />
+          {documentsList
+            ? (
+              <DocumentList
+                className='mt-2'
+                list={documentsList.map(d => ({
+                  id: d.id,
+                  name: d.name,
+                  extension: d.data_source_detail_dict?.upload_file?.extension || '',
+                }))}
+                onChange={handleChange}
+              />
+            )
+            : (<div className='mt-2 flex h-[100px] w-[360px] items-center justify-center'>
+              <Loading />
+            </div>)}
+        </div>
+
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+export default React.memo(DocumentPicker)

dify/web/app/components/datasets/common/document-picker/preview-document-picker.tsx

@@ -0,0 +1,82 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import { useBoolean } from 'ahooks'
+import { RiArrowDownSLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import FileIcon from '../document-file-icon'
+import DocumentList from './document-list'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import cn from '@/utils/classnames'
+import Loading from '@/app/components/base/loading'
+import type { DocumentItem } from '@/models/datasets'
+
+type Props = {
+  className?: string
+  value: DocumentItem
+  files: DocumentItem[]
+  onChange: (value: DocumentItem) => void
+}
+
+const PreviewDocumentPicker: FC<Props> = ({
+  className,
+  value,
+  files,
+  onChange,
+}) => {
+  const { t } = useTranslation()
+  const { name, extension } = value
+
+  const [open, {
+    set: setOpen,
+    toggle: togglePopup,
+  }] = useBoolean(false)
+  const ArrowIcon = RiArrowDownSLine
+
+  const handleChange = useCallback((item: DocumentItem) => {
+    onChange(item)
+    setOpen(false)
+  }, [onChange, setOpen])
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-start'
+      offset={4}
+    >
+      <PortalToFollowElemTrigger onClick={togglePopup}>
+        <div className={cn('flex h-6 select-none items-center rounded-md px-1 hover:bg-state-base-hover', open && 'bg-state-base-hover', className)}>
+          <FileIcon name={name} extension={extension} size='lg' />
+          <div className='ml-1 flex flex-col items-start'>
+            <div className='flex items-center space-x-0.5'>
+              <span className={cn('system-md-semibold max-w-[200px] truncate text-text-primary')}> {name || '--'}</span>
+              <ArrowIcon className={'h-[18px] w-[18px] text-text-primary'} />
+            </div>
+          </div>
+        </div>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-[11]'>
+        <div className='w-[392px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-[5px]'>
+          {files?.length > 1 && <div className='system-xs-medium-uppercase flex h-8 items-center pl-2 text-text-tertiary'>{t('dataset.preprocessDocument', { num: files.length })}</div>}
+          {files?.length > 0
+            ? (
+              <DocumentList
+                list={files}
+                onChange={handleChange}
+              />
+            )
+            : (<div className='mt-2 flex h-[100px] w-[360px] items-center justify-center'>
+              <Loading />
+            </div>)}
+        </div>
+
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+export default React.memo(PreviewDocumentPicker)

dify/web/app/components/datasets/common/document-status-with-action/auto-disabled-document.tsx

@@ -0,0 +1,38 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import StatusWithAction from './status-with-action'
+import { useAutoDisabledDocuments, useDocumentEnable, useInvalidDisabledDocument } from '@/service/knowledge/use-document'
+import Toast from '@/app/components/base/toast'
+type Props = {
+  datasetId: string
+}
+
+const AutoDisabledDocument: FC<Props> = ({
+  datasetId,
+}) => {
+  const { t } = useTranslation()
+  const { data, isLoading } = useAutoDisabledDocuments(datasetId)
+  const invalidDisabledDocument = useInvalidDisabledDocument()
+  const documentIds = data?.document_ids
+  const hasDisabledDocument = documentIds && documentIds.length > 0
+  const { mutateAsync: enableDocument } = useDocumentEnable()
+  const handleEnableDocuments = useCallback(async () => {
+    await enableDocument({ datasetId, documentIds })
+    invalidDisabledDocument()
+    Toast.notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
+  }, [])
+  if (!hasDisabledDocument || isLoading)
+    return null
+
+  return (
+    <StatusWithAction
+      type='info'
+      description={t('dataset.documentsDisabled', { num: documentIds?.length })}
+      actionText={t('dataset.enable')}
+      onAction={handleEnableDocuments}
+    />
+  )
+}
+export default React.memo(AutoDisabledDocument)

dify/web/app/components/datasets/common/document-status-with-action/index-failed.tsx

@@ -0,0 +1,70 @@
+'use client'
+import type { FC } from 'react'
+import React, { useEffect, useReducer } from 'react'
+import { useTranslation } from 'react-i18next'
+import useSWR from 'swr'
+import StatusWithAction from './status-with-action'
+import { getErrorDocs, retryErrorDocs } from '@/service/datasets'
+import type { IndexingStatusResponse } from '@/models/datasets'
+import { noop } from 'lodash-es'
+
+type Props = {
+  datasetId: string
+}
+type IIndexState = {
+  value: string
+}
+type ActionType = 'retry' | 'success' | 'error'
+
+type IAction = {
+  type: ActionType
+}
+const indexStateReducer = (state: IIndexState, action: IAction) => {
+  const actionMap = {
+    retry: 'retry',
+    success: 'success',
+    error: 'error',
+  }
+
+  return {
+    ...state,
+    value: actionMap[action.type] || state.value,
+  }
+}
+
+const RetryButton: FC<Props> = ({ datasetId }) => {
+  const { t } = useTranslation()
+  const [indexState, dispatch] = useReducer(indexStateReducer, { value: 'success' })
+  const { data: errorDocs, isLoading } = useSWR({ datasetId }, getErrorDocs)
+
+  const onRetryErrorDocs = async () => {
+    dispatch({ type: 'retry' })
+    const document_ids = errorDocs?.data.map((doc: IndexingStatusResponse) => doc.id) || []
+    const res = await retryErrorDocs({ datasetId, document_ids })
+    if (res.result === 'success')
+      dispatch({ type: 'success' })
+    else
+      dispatch({ type: 'error' })
+  }
+
+  useEffect(() => {
+    if (errorDocs?.total === 0)
+      dispatch({ type: 'success' })
+    else
+      dispatch({ type: 'error' })
+  }, [errorDocs?.total])
+
+  if (isLoading || indexState.value === 'success')
+    return null
+
+  return (
+    <StatusWithAction
+      type='warning'
+      description={`${errorDocs?.total} ${t('dataset.docsFailedNotice')}`}
+      actionText={t('dataset.retry')}
+      disabled={indexState.value === 'retry'}
+      onAction={indexState.value === 'error' ? onRetryErrorDocs : noop}
+    />
+  )
+}
+export default RetryButton

dify/web/app/components/datasets/common/document-status-with-action/status-with-action.tsx

@@ -0,0 +1,70 @@
+'use client'
+import { RiAlertFill, RiCheckboxCircleFill, RiErrorWarningFill, RiInformation2Fill } from '@remixicon/react'
+import type { FC } from 'react'
+import React from 'react'
+import cn from '@/utils/classnames'
+import Divider from '@/app/components/base/divider'
+
+type Status = 'success' | 'error' | 'warning' | 'info'
+type Props = {
+  type?: Status
+  description: string
+  actionText?: string
+  onAction?: () => void
+  disabled?: boolean
+}
+
+const IconMap = {
+  success: {
+    Icon: RiCheckboxCircleFill,
+    color: 'text-text-success',
+  },
+  error: {
+    Icon: RiErrorWarningFill,
+    color: 'text-text-destructive',
+  },
+  warning: {
+    Icon: RiAlertFill,
+    color: 'text-text-warning-secondary',
+  },
+  info: {
+    Icon: RiInformation2Fill,
+    color: 'text-text-accent',
+  },
+}
+
+const getIcon = (type: Status) => {
+  return IconMap[type]
+}
+
+const StatusAction: FC<Props> = ({
+  type = 'info',
+  description,
+  actionText,
+  onAction,
+  disabled,
+}) => {
+  const { Icon, color } = getIcon(type)
+  return (
+    <div className='relative flex h-[34px] items-center rounded-lg border border-components-panel-border bg-components-panel-bg-blur pl-2 pr-3 shadow-xs'>
+      <div className={
+        `absolute inset-0 rounded-lg opacity-40 ${(type === 'success' && 'bg-[linear-gradient(92deg,rgba(23,178,106,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
+        || (type === 'warning' && 'bg-[linear-gradient(92deg,rgba(247,144,9,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
+        || (type === 'error' && 'bg-[linear-gradient(92deg,rgba(240,68,56,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
+        || (type === 'info' && 'bg-[linear-gradient(92deg,rgba(11,165,236,0.25)_0%,rgba(255,255,255,0.00)_100%)]')
+        }`}
+      />
+      <div className='relative z-10 flex h-full items-center space-x-2'>
+        <Icon className={cn('h-4 w-4', color)} />
+        <div className='text-[13px] font-normal text-text-secondary'>{description}</div>
+        {onAction && (
+          <>
+            <Divider type='vertical' className='!h-4' />
+            <div onClick={onAction} className={cn('cursor-pointer text-[13px] font-semibold text-text-accent', disabled && 'cursor-not-allowed text-text-disabled')}>{actionText}</div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+export default React.memo(StatusAction)

dify/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx

@@ -0,0 +1,47 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import RetrievalParamConfig from '../retrieval-param-config'
+import { RETRIEVE_METHOD } from '@/types/app'
+import type { RetrievalConfig } from '@/types/app'
+import OptionCard from '../../settings/option-card'
+import { VectorSearch } from '@/app/components/base/icons/src/vender/knowledge'
+import { EffectColor } from '../../settings/chunk-structure/types'
+
+type Props = {
+  disabled?: boolean
+  value: RetrievalConfig
+  onChange: (value: RetrievalConfig) => void
+}
+
+const EconomicalRetrievalMethodConfig: FC<Props> = ({
+  disabled = false,
+  value,
+  onChange,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <OptionCard
+      id={RETRIEVE_METHOD.keywordSearch}
+      disabled={disabled}
+      icon={<VectorSearch className='size-4' />}
+      iconActiveColor='text-util-colors-purple-purple-600'
+      title={t('dataset.retrieval.keyword_search.title')}
+      description={t('dataset.retrieval.keyword_search.description')}
+      isActive
+      effectColor={EffectColor.purple}
+      showEffectColor
+      showChildren
+      className='gap-x-2'
+    >
+      <RetrievalParamConfig
+        type={RETRIEVE_METHOD.keywordSearch}
+        value={value}
+        onChange={onChange}
+      />
+    </OptionCard>
+  )
+}
+export default React.memo(EconomicalRetrievalMethodConfig)

dify/web/app/components/datasets/common/retrieval-method-config/index.tsx

@@ -0,0 +1,164 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import RetrievalParamConfig from '../retrieval-param-config'
+import type { RetrievalConfig } from '@/types/app'
+import { RETRIEVE_METHOD } from '@/types/app'
+import { useProviderContext } from '@/context/provider-context'
+import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import {
+  DEFAULT_WEIGHTED_SCORE,
+  RerankingModeEnum,
+  WeightedScoreEnum,
+} from '@/models/datasets'
+import OptionCard from '../../settings/option-card'
+import { FullTextSearch, HybridSearch, VectorSearch } from '@/app/components/base/icons/src/vender/knowledge'
+import { EffectColor } from '../../settings/chunk-structure/types'
+
+type Props = {
+  disabled?: boolean
+  value: RetrievalConfig
+  onChange: (value: RetrievalConfig) => void
+}
+
+const RetrievalMethodConfig: FC<Props> = ({
+  disabled = false,
+  value,
+  onChange,
+}) => {
+  const { t } = useTranslation()
+  const { supportRetrievalMethods } = useProviderContext()
+  const {
+    defaultModel: rerankDefaultModel,
+    currentModel: isRerankDefaultModelValid,
+  } = useModelListAndDefaultModelAndCurrentProviderAndModel(ModelTypeEnum.rerank)
+
+  const onSwitch = useCallback((retrieveMethod: RETRIEVE_METHOD) => {
+    if ([RETRIEVE_METHOD.semantic, RETRIEVE_METHOD.fullText].includes(retrieveMethod)) {
+      onChange({
+        ...value,
+        search_method: retrieveMethod,
+        ...((!value.reranking_model.reranking_model_name || !value.reranking_model.reranking_provider_name)
+          ? {
+            reranking_model: {
+              reranking_provider_name: isRerankDefaultModelValid ? rerankDefaultModel?.provider?.provider ?? '' : '',
+              reranking_model_name: isRerankDefaultModelValid ? rerankDefaultModel?.model ?? '' : '',
+            },
+            reranking_enable: !!isRerankDefaultModelValid,
+          }
+          : {
+            reranking_enable: true,
+          }),
+      })
+    }
+    if (retrieveMethod === RETRIEVE_METHOD.hybrid) {
+      onChange({
+        ...value,
+        search_method: retrieveMethod,
+        ...((!value.reranking_model.reranking_model_name || !value.reranking_model.reranking_provider_name)
+          ? {
+            reranking_model: {
+              reranking_provider_name: isRerankDefaultModelValid ? rerankDefaultModel?.provider?.provider ?? '' : '',
+              reranking_model_name: isRerankDefaultModelValid ? rerankDefaultModel?.model ?? '' : '',
+            },
+            reranking_enable: !!isRerankDefaultModelValid,
+            reranking_mode: isRerankDefaultModelValid ? RerankingModeEnum.RerankingModel : RerankingModeEnum.WeightedScore,
+          }
+          : {
+            reranking_enable: true,
+            reranking_mode: RerankingModeEnum.RerankingModel,
+          }),
+        ...(!value.weights
+          ? {
+            weights: {
+              weight_type: WeightedScoreEnum.Customized,
+              vector_setting: {
+                vector_weight: DEFAULT_WEIGHTED_SCORE.other.semantic,
+                embedding_provider_name: '',
+                embedding_model_name: '',
+              },
+              keyword_setting: {
+                keyword_weight: DEFAULT_WEIGHTED_SCORE.other.keyword,
+              },
+            },
+          }
+          : {}),
+      })
+    }
+  }, [value, rerankDefaultModel, isRerankDefaultModelValid, onChange])
+
+  return (
+    <div className='flex flex-col gap-y-2'>
+      {supportRetrievalMethods.includes(RETRIEVE_METHOD.semantic) && (
+        <OptionCard
+          id={RETRIEVE_METHOD.semantic}
+          disabled={disabled}
+          icon={<VectorSearch className='size-4' />}
+          iconActiveColor='text-util-colors-purple-purple-600'
+          title={t('dataset.retrieval.semantic_search.title')}
+          description={t('dataset.retrieval.semantic_search.description')}
+          isActive={value.search_method === RETRIEVE_METHOD.semantic}
+          onClick={onSwitch}
+          effectColor={EffectColor.purple}
+          showEffectColor
+          showChildren={value.search_method === RETRIEVE_METHOD.semantic}
+          className='gap-x-2'
+        >
+          <RetrievalParamConfig
+            type={RETRIEVE_METHOD.semantic}
+            value={value}
+            onChange={onChange}
+          />
+        </OptionCard>
+      )}
+      {supportRetrievalMethods.includes(RETRIEVE_METHOD.fullText) && (
+        <OptionCard
+          id={RETRIEVE_METHOD.fullText}
+          disabled={disabled}
+          icon={<FullTextSearch className='size-4' />}
+          iconActiveColor='text-util-colors-purple-purple-600'
+          title={t('dataset.retrieval.full_text_search.title')}
+          description={t('dataset.retrieval.full_text_search.description')}
+          isActive={value.search_method === RETRIEVE_METHOD.fullText}
+          onClick={onSwitch}
+          effectColor={EffectColor.purple}
+          showEffectColor
+          showChildren={value.search_method === RETRIEVE_METHOD.fullText}
+          className='gap-x-2'
+        >
+          <RetrievalParamConfig
+            type={RETRIEVE_METHOD.fullText}
+            value={value}
+            onChange={onChange}
+          />
+        </OptionCard>
+      )}
+      {supportRetrievalMethods.includes(RETRIEVE_METHOD.hybrid) && (
+        <OptionCard
+          id={RETRIEVE_METHOD.hybrid}
+          disabled={disabled}
+          icon={<HybridSearch className='size-4' />}
+          iconActiveColor='text-util-colors-purple-purple-600'
+          title={t('dataset.retrieval.hybrid_search.title')}
+          description={t('dataset.retrieval.hybrid_search.description')}
+          isActive={value.search_method === RETRIEVE_METHOD.hybrid}
+          onClick={onSwitch}
+          effectColor={EffectColor.purple}
+          showEffectColor
+          isRecommended
+          showChildren={value.search_method === RETRIEVE_METHOD.hybrid}
+          className='gap-x-2'
+        >
+          <RetrievalParamConfig
+            type={RETRIEVE_METHOD.hybrid}
+            value={value}
+            onChange={onChange}
+          />
+        </OptionCard>
+      )}
+    </div>
+  )
+}
+export default React.memo(RetrievalMethodConfig)

dify/web/app/components/datasets/common/retrieval-method-info/index.tsx

@@ -0,0 +1,64 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import Image from 'next/image'
+import { retrievalIcon } from '../../create/icons'
+import type { RetrievalConfig } from '@/types/app'
+import { RETRIEVE_METHOD } from '@/types/app'
+import RadioCard from '@/app/components/base/radio-card'
+
+type Props = {
+  value: RetrievalConfig
+}
+
+export const getIcon = (type: RETRIEVE_METHOD) => {
+  return ({
+    [RETRIEVE_METHOD.semantic]: retrievalIcon.vector,
+    [RETRIEVE_METHOD.fullText]: retrievalIcon.fullText,
+    [RETRIEVE_METHOD.hybrid]: retrievalIcon.hybrid,
+    [RETRIEVE_METHOD.invertedIndex]: retrievalIcon.vector,
+    [RETRIEVE_METHOD.keywordSearch]: retrievalIcon.vector,
+  })[type] || retrievalIcon.vector
+}
+
+const EconomicalRetrievalMethodConfig: FC<Props> = ({
+  // type,
+  value,
+}) => {
+  const { t } = useTranslation()
+  const type = value.search_method
+  const icon = <Image className='size-3.5 text-util-colors-purple-purple-600' src={getIcon(type)} alt='' />
+  return (
+    <div className='space-y-2'>
+      <RadioCard
+        icon={icon}
+        title={t(`dataset.retrieval.${type}.title`)}
+        description={t(`dataset.retrieval.${type}.description`)}
+        noRadio
+        chosenConfigWrapClassName='!pb-3'
+        chosenConfig={
+          <div className='flex flex-wrap text-xs font-normal leading-[18px]'>
+            {value.reranking_model.reranking_model_name && (
+              <div className='mr-8 flex space-x-1'>
+                <div className='text-gray-500'>{t('common.modelProvider.rerankModel.key')}</div>
+                <div className='font-medium text-gray-800'>{value.reranking_model.reranking_model_name}</div>
+              </div>
+            )}
+
+            <div className='mr-8 flex space-x-1'>
+              <div className='text-gray-500'>{t('appDebug.datasetConfig.top_k')}</div>
+              <div className='font-medium text-gray-800'>{value.top_k}</div>
+            </div>
+
+            <div className='mr-8 flex space-x-1'>
+              <div className='text-gray-500'>{t('appDebug.datasetConfig.score_threshold')}</div>
+              <div className='font-medium text-gray-800'>{value.score_threshold}</div>
+            </div>
+          </div>
+        }
+      />
+    </div>
+  )
+}
+export default React.memo(EconomicalRetrievalMethodConfig)

dify/web/app/components/datasets/common/retrieval-param-config/index.tsx

@@ -0,0 +1,294 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import Image from 'next/image'
+import ProgressIndicator from '../../create/assets/progress-indicator.svg'
+import Reranking from '../../create/assets/rerank.svg'
+import cn from '@/utils/classnames'
+import TopKItem from '@/app/components/base/param-item/top-k-item'
+import ScoreThresholdItem from '@/app/components/base/param-item/score-threshold-item'
+import { RETRIEVE_METHOD } from '@/types/app'
+import Switch from '@/app/components/base/switch'
+import Tooltip from '@/app/components/base/tooltip'
+import type { RetrievalConfig } from '@/types/app'
+import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
+import { useCurrentProviderAndModel, useModelListAndDefaultModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import {
+  DEFAULT_WEIGHTED_SCORE,
+  RerankingModeEnum,
+  WeightedScoreEnum,
+} from '@/models/datasets'
+import WeightedScore from '@/app/components/app/configuration/dataset-config/params-config/weighted-score'
+import Toast from '@/app/components/base/toast'
+import RadioCard from '@/app/components/base/radio-card'
+
+type Props = {
+  type: RETRIEVE_METHOD
+  value: RetrievalConfig
+  onChange: (value: RetrievalConfig) => void
+}
+
+const RetrievalParamConfig: FC<Props> = ({
+  type,
+  value,
+  onChange,
+}) => {
+  const { t } = useTranslation()
+  const canToggleRerankModalEnable = type !== RETRIEVE_METHOD.hybrid
+  const isEconomical = type === RETRIEVE_METHOD.keywordSearch
+  const isHybridSearch = type === RETRIEVE_METHOD.hybrid
+  const {
+    modelList: rerankModelList,
+  } = useModelListAndDefaultModel(ModelTypeEnum.rerank)
+
+  const {
+    currentModel,
+  } = useCurrentProviderAndModel(
+    rerankModelList,
+    {
+      provider: value.reranking_model?.reranking_provider_name ?? '',
+      model: value.reranking_model?.reranking_model_name ?? '',
+    },
+  )
+
+  const handleToggleRerankEnable = useCallback((enable: boolean) => {
+    if (enable && !currentModel)
+      Toast.notify({ type: 'error', message: t('workflow.errorMsg.rerankModelRequired') })
+    onChange({
+      ...value,
+      reranking_enable: enable,
+    })
+  }, [currentModel, onChange, value])
+
+  const rerankModel = useMemo(() => {
+    return {
+      provider_name: value.reranking_model.reranking_provider_name,
+      model_name: value.reranking_model.reranking_model_name,
+    }
+  }, [value.reranking_model])
+
+  const handleChangeRerankMode = (v: RerankingModeEnum) => {
+    if (v === value.reranking_mode)
+      return
+
+    const result = {
+      ...value,
+      reranking_mode: v,
+    }
+
+    if (!result.weights && v === RerankingModeEnum.WeightedScore) {
+      result.weights = {
+        weight_type: WeightedScoreEnum.Customized,
+        vector_setting: {
+          vector_weight: DEFAULT_WEIGHTED_SCORE.other.semantic,
+          embedding_provider_name: '',
+          embedding_model_name: '',
+        },
+        keyword_setting: {
+          keyword_weight: DEFAULT_WEIGHTED_SCORE.other.keyword,
+        },
+      }
+    }
+    if (v === RerankingModeEnum.RerankingModel && !currentModel)
+      Toast.notify({ type: 'error', message: t('workflow.errorMsg.rerankModelRequired') })
+    onChange(result)
+  }
+
+  const rerankingModeOptions = [
+    {
+      value: RerankingModeEnum.WeightedScore,
+      label: t('dataset.weightedScore.title'),
+      tips: t('dataset.weightedScore.description'),
+    },
+    {
+      value: RerankingModeEnum.RerankingModel,
+      label: t('common.modelProvider.rerankModel.key'),
+      tips: t('common.modelProvider.rerankModel.tip'),
+    },
+  ]
+
+  return (
+    <div>
+      {!isEconomical && !isHybridSearch && (
+        <div>
+          <div className='mb-2 flex items-center space-x-2'>
+            {canToggleRerankModalEnable && (
+              <Switch
+                size='md'
+                defaultValue={value.reranking_enable}
+                onChange={handleToggleRerankEnable}
+              />
+            )}
+            <div className='flex items-center'>
+              <span className='system-sm-semibold mr-0.5 text-text-secondary'>{t('common.modelProvider.rerankModel.key')}</span>
+              <Tooltip
+                popupContent={
+                  <div className="w-[200px]">{t('common.modelProvider.rerankModel.tip')}</div>
+                }
+              />
+            </div>
+          </div>
+          {
+            value.reranking_enable && (
+              <ModelSelector
+                defaultModel={rerankModel && { provider: rerankModel.provider_name, model: rerankModel.model_name }}
+                modelList={rerankModelList}
+                onSelect={(v) => {
+                  onChange({
+                    ...value,
+                    reranking_model: {
+                      reranking_provider_name: v.provider,
+                      reranking_model_name: v.model,
+                    },
+                  })
+                }}
+              />
+            )
+          }
+        </div>
+      )}
+      {
+        !isHybridSearch && (
+          <div className={cn(!isEconomical && 'mt-4', 'space-between flex space-x-4')}>
+            <TopKItem
+              className='grow'
+              value={value.top_k}
+              onChange={(_key, v) => {
+                onChange({
+                  ...value,
+                  top_k: v,
+                })
+              }}
+              enable={true}
+            />
+            {(!isEconomical && !(value.search_method === RETRIEVE_METHOD.fullText && !value.reranking_enable)) && (
+              <ScoreThresholdItem
+                className='grow'
+                value={value.score_threshold}
+                onChange={(_key, v) => {
+                  onChange({
+                    ...value,
+                    score_threshold: v,
+                  })
+                }}
+                enable={value.score_threshold_enabled}
+                hasSwitch={true}
+                onSwitchChange={(_key, v) => {
+                  onChange({
+                    ...value,
+                    score_threshold_enabled: v,
+                  })
+                }}
+              />
+            )}
+          </div>
+        )
+      }
+      {
+        isHybridSearch && (
+          <>
+            <div className='mb-4 flex gap-2'>
+              {
+                rerankingModeOptions.map(option => (
+                  <RadioCard
+                    key={option.value}
+                    isChosen={value.reranking_mode === option.value}
+                    onChosen={() => handleChangeRerankMode(option.value)}
+                    icon={<Image src={
+                      option.value === RerankingModeEnum.WeightedScore
+                        ? ProgressIndicator
+                        : Reranking
+                    } alt='' />}
+                    title={option.label}
+                    description={option.tips}
+                    className='flex-1'
+                  />
+                ))
+              }
+            </div>
+            {
+              value.reranking_mode === RerankingModeEnum.WeightedScore && (
+                <WeightedScore
+                  value={{
+                    value: [
+                      value.weights!.vector_setting.vector_weight,
+                      value.weights!.keyword_setting.keyword_weight,
+                    ],
+                  }}
+                  onChange={(v) => {
+                    onChange({
+                      ...value,
+                      weights: {
+                        ...value.weights!,
+                        vector_setting: {
+                          ...value.weights!.vector_setting,
+                          vector_weight: v.value[0],
+                        },
+                        keyword_setting: {
+                          ...value.weights!.keyword_setting,
+                          keyword_weight: v.value[1],
+                        },
+                      },
+                    })
+                  }}
+                />
+              )
+            }
+            {
+              value.reranking_mode !== RerankingModeEnum.WeightedScore && (
+                <ModelSelector
+                  defaultModel={rerankModel && { provider: rerankModel.provider_name, model: rerankModel.model_name }}
+                  modelList={rerankModelList}
+                  onSelect={(v) => {
+                    onChange({
+                      ...value,
+                      reranking_model: {
+                        reranking_provider_name: v.provider,
+                        reranking_model_name: v.model,
+                      },
+                    })
+                  }}
+                />
+              )
+            }
+            <div className={cn(!isEconomical && 'mt-4', 'space-between flex space-x-6')}>
+              <TopKItem
+                className='grow'
+                value={value.top_k}
+                onChange={(_key, v) => {
+                  onChange({
+                    ...value,
+                    top_k: v,
+                  })
+                }}
+                enable={true}
+              />
+              <ScoreThresholdItem
+                className='grow'
+                value={value.score_threshold}
+                onChange={(_key, v) => {
+                  onChange({
+                    ...value,
+                    score_threshold: v,
+                  })
+                }}
+                enable={value.score_threshold_enabled}
+                hasSwitch={true}
+                onSwitchChange={(_key, v) => {
+                  onChange({
+                    ...value,
+                    score_threshold_enabled: v,
+                  })
+                }}
+              />
+            </div>
+          </>
+        )
+      }
+    </div>
+  )
+}
+export default React.memo(RetrievalParamConfig)