From 0a891e5392a646bc31a76f8714775a47fa60a820 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Tue, 13 May 2025 16:17:59 +0800
Subject: [PATCH] feat: Update retrieval method configuration to use new
 OptionCard component and improve layout

---
 .../index.tsx                                 |  39 ++--
 .../common/retrieval-method-config/index.tsx  |  73 ++++---
 .../datasets/settings/form/index.tsx          | 189 ++++++++++--------
 3 files changed, 172 insertions(+), 129 deletions(-)

diff --git a/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx b/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx
index 17cb3ef123..024ba075b6 100644
--- a/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx
+++ b/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx
@@ -2,12 +2,12 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import Image from 'next/image'
 import RetrievalParamConfig from '../retrieval-param-config'
-import { OptionCard } from '../../create/step-two/option-card'
-import { retrievalIcon } from '../../create/icons'
 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
@@ -23,20 +23,25 @@ const EconomicalRetrievalMethodConfig: FC<Props> = ({
   const { t } = useTranslation()
 
   return (
-    <div className='space-y-2'>
-      <OptionCard
-        disabled={disabled} icon={<Image className='h-4 w-4' src={retrievalIcon.vector} alt='' />}
-        title={t('dataset.retrieval.invertedIndex.title')}
-        description={t('dataset.retrieval.invertedIndex.description')} isActive
-        activeHeaderClassName='bg-dataset-option-card-purple-gradient'
-      >
-        <RetrievalParamConfig
-          type={RETRIEVE_METHOD.invertedIndex}
-          value={value}
-          onChange={onChange}
-        />
-      </OptionCard>
-    </div>
+    <OptionCard
+      id={RETRIEVE_METHOD.invertedIndex}
+      disabled={disabled}
+      icon={<VectorSearch className='size-4' />}
+      iconActiveColor='text-util-colors-purple-purple-600'
+      title={t('dataset.retrieval.invertedIndex.title')}
+      description={t('dataset.retrieval.invertedIndex.description')}
+      isActive
+      effectColor={EffectColor.purple}
+      showEffectColor
+      showChildren
+      className='gap-x-2'
+    >
+      <RetrievalParamConfig
+        type={RETRIEVE_METHOD.invertedIndex}
+        value={value}
+        onChange={onChange}
+      />
+    </OptionCard>
   )
 }
 export default React.memo(EconomicalRetrievalMethodConfig)
diff --git a/web/app/components/datasets/common/retrieval-method-config/index.tsx b/web/app/components/datasets/common/retrieval-method-config/index.tsx
index f979447857..57d357442f 100644
--- a/web/app/components/datasets/common/retrieval-method-config/index.tsx
+++ b/web/app/components/datasets/common/retrieval-method-config/index.tsx
@@ -2,11 +2,7 @@
 import type { FC } from 'react'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import Image from 'next/image'
 import RetrievalParamConfig from '../retrieval-param-config'
-import { OptionCard } from '../../create/step-two/option-card'
-import Effect from '../../create/assets/option-card-effect-purple.svg'
-import { retrievalIcon } from '../../create/icons'
 import type { RetrievalConfig } from '@/types/app'
 import { RETRIEVE_METHOD } from '@/types/app'
 import { useProviderContext } from '@/context/provider-context'
@@ -17,7 +13,9 @@ import {
   RerankingModeEnum,
   WeightedScoreEnum,
 } from '@/models/datasets'
-import Badge from '@/app/components/base/badge'
+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
@@ -92,17 +90,21 @@ const RetrievalMethodConfig: FC<Props> = ({
   }, [value, rerankDefaultModel, isRerankDefaultModelValid, onChange])
 
   return (
-    <div className='space-y-2'>
+    <div className='flex flex-col gap-y-2'>
       {supportRetrievalMethods.includes(RETRIEVE_METHOD.semantic) && (
-        <OptionCard disabled={disabled} icon={<Image className='h-4 w-4' src={retrievalIcon.vector} alt='' />}
+        <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
-          }
-          onSwitched={() => onSwitch(RETRIEVE_METHOD.semantic)}
-          effectImg={Effect.src}
-          activeHeaderClassName='bg-dataset-option-card-purple-gradient'
+          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}
@@ -112,15 +114,19 @@ const RetrievalMethodConfig: FC<Props> = ({
         </OptionCard>
       )}
       {supportRetrievalMethods.includes(RETRIEVE_METHOD.fullText) && (
-        <OptionCard disabled={disabled} icon={<Image className='h-4 w-4' src={retrievalIcon.fullText} alt='' />}
+        <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
-          }
-          onSwitched={() => onSwitch(RETRIEVE_METHOD.fullText)}
-          effectImg={Effect.src}
-          activeHeaderClassName='bg-dataset-option-card-purple-gradient'
+          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}
@@ -130,19 +136,20 @@ const RetrievalMethodConfig: FC<Props> = ({
         </OptionCard>
       )}
       {supportRetrievalMethods.includes(RETRIEVE_METHOD.hybrid) && (
-        <OptionCard disabled={disabled} icon={<Image className='h-4 w-4' src={retrievalIcon.hybrid} alt='' />}
-          title={
-            <div className='flex items-center space-x-1'>
-              <div>{t('dataset.retrieval.hybrid_search.title')}</div>
-              <Badge text={t('dataset.retrieval.hybrid_search.recommend')!} className='ml-1 h-[18px] border-text-accent-secondary text-text-accent-secondary' uppercase />
-            </div>
-          }
-          description={t('dataset.retrieval.hybrid_search.description')} isActive={
-            value.search_method === RETRIEVE_METHOD.hybrid
-          }
-          onSwitched={() => onSwitch(RETRIEVE_METHOD.hybrid)}
-          effectImg={Effect.src}
-          activeHeaderClassName='bg-dataset-option-card-purple-gradient'
+        <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}
diff --git a/web/app/components/datasets/settings/form/index.tsx b/web/app/components/datasets/settings/form/index.tsx
index 60d09c792b..78ac144d40 100644
--- a/web/app/components/datasets/settings/form/index.tsx
+++ b/web/app/components/datasets/settings/form/index.tsx
@@ -38,6 +38,7 @@ import Divider from '@/app/components/base/divider'
 import ChunkStructure from '../chunk-structure'
 import Toast from '@/app/components/base/toast'
 import { RiAlertFill } from '@remixicon/react'
+import { useGetDocLanguage } from '@/context/i18n'
 
 const rowClass = 'flex gap-x-1'
 const labelClass = 'flex items-center shrink-0 w-[180px] h-7 pt-1'
@@ -91,6 +92,7 @@ const Form = () => {
   } = useModelListAndDefaultModelAndCurrentProviderAndModel(ModelTypeEnum.rerank)
   const { data: embeddingModelList } = useModelList(ModelTypeEnum.textEmbedding)
   const previousAppIcon = useRef(DEFAULT_APP_ICON)
+  const docLanguage = useGetDocLanguage()
 
   const getMembers = async () => {
     const { accounts } = await fetchMembers({ url: '/workspaces/current/members', params: {} })
@@ -181,6 +183,7 @@ const Form = () => {
               score_threshold_enabled: scoreThresholdEnabled,
             },
           }),
+          keyword_number: keywordNumber,
         },
       } as any
       if (permission === DatasetPermission.partialMembers) {
@@ -273,22 +276,20 @@ const Form = () => {
             />
             {/* Chunk Structure */}
             <div className={rowClass}>
-              <div>
-                <div className='flex w-[180px] shrink-0 flex-col'>
-                  <div className='system-sm-semibold flex h-8 items-center text-text-secondary'>
-                    {t('datasetSettings.form.chunkStructure.title')}
-                  </div>
-                  <div className='body-xs-regular text-text-tertiary'>
-                    <a
-                      target='_blank'
-                      rel='noopener noreferrer'
-                      href='https://example.com' // todo: replace link
-                      className='text-text-accent'
-                    >
-                      {t('datasetSettings.form.chunkStructure.learnMore')}
-                    </a>
-                    {t('datasetSettings.form.chunkStructure.description')}
-                  </div>
+              <div className='flex w-[180px] shrink-0 flex-col'>
+                <div className='system-sm-semibold flex h-8 items-center text-text-secondary'>
+                  {t('datasetSettings.form.chunkStructure.title')}
+                </div>
+                <div className='body-xs-regular text-text-tertiary'>
+                  <a
+                    target='_blank'
+                    rel='noopener noreferrer'
+                    href='https://example.com' // todo: replace link
+                    className='text-text-accent'
+                  >
+                    {t('datasetSettings.form.chunkStructure.learnMore')}
+                  </a>
+                  {t('datasetSettings.form.chunkStructure.description')}
                 </div>
               </div>
               <div className='grow'>
@@ -353,80 +354,110 @@ const Form = () => {
       )}
       {/* Retrieval Method Config */}
       {currentDataset?.provider === 'external'
-        ? <>
-          <div className='my-1 h-0 w-full border-b border-divider-subtle' />
-          <div className={rowClass}>
-            <div className={labelClass}>
-              <div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.retrievalSetting.title')}</div>
-            </div>
-            <RetrievalSettings
-              topK={topK}
-              scoreThreshold={scoreThreshold}
-              scoreThresholdEnabled={scoreThresholdEnabled}
-              onChange={handleSettingsChange}
-              isInRetrievalSetting={true}
+        ? (
+          <>
+            <Divider
+              type='horizontal'
+              className='my-1 h-px bg-divider-subtle'
             />
-          </div>
-          <div className='my-1 h-0 w-full border-b border-divider-subtle' />
-          <div className={rowClass}>
-            <div className={labelClass}>
-              <div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.externalKnowledgeAPI')}</div>
-            </div>
-            <div className='w-full'>
-              <div className='flex h-full items-center gap-1 rounded-lg bg-components-input-bg-normal px-3 py-2'>
-                <ApiConnectionMod className='h-4 w-4 text-text-secondary' />
-                <div className='system-sm-medium overflow-hidden text-ellipsis text-text-secondary'>
-                  {currentDataset?.external_knowledge_info.external_knowledge_api_name}
-                </div>
-                <div className='system-xs-regular text-text-tertiary'>·</div>
-                <div className='system-xs-regular text-text-tertiary'>{currentDataset?.external_knowledge_info.external_knowledge_api_endpoint}</div>
-              </div>
-            </div>
-          </div>
-          <div className={rowClass}>
-            <div className={labelClass}>
-              <div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.externalKnowledgeID')}</div>
-            </div>
-            <div className='w-full'>
-              <div className='flex h-full items-center gap-1 rounded-lg bg-components-input-bg-normal px-3 py-2'>
-                <div className='system-xs-regular text-text-tertiary'>{currentDataset?.external_knowledge_info.external_knowledge_id}</div>
-              </div>
-            </div>
-          </div>
-        </>
-        : indexMethod
-          ? <>
-            <div className='my-1 h-0 w-full border-b border-divider-subtle' />
             <div className={rowClass}>
               <div className={labelClass}>
-                <div>
-                  <div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.retrievalSetting.title')}</div>
-                  <div className='body-xs-regular text-text-tertiary'>
-                    <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-text-accent'>{t('datasetSettings.form.retrievalSetting.learnMore')}</a>
-                    {t('datasetSettings.form.retrievalSetting.description')}
+                <div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.retrievalSetting.title')}</div>
+              </div>
+              <RetrievalSettings
+                topK={topK}
+                scoreThreshold={scoreThreshold}
+                scoreThresholdEnabled={scoreThresholdEnabled}
+                onChange={handleSettingsChange}
+                isInRetrievalSetting={true}
+              />
+            </div>
+            <Divider
+              type='horizontal'
+              className='my-1 h-px bg-divider-subtle'
+            />
+            <div className={rowClass}>
+              <div className={labelClass}>
+                <div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.externalKnowledgeAPI')}</div>
+              </div>
+              <div className='w-full'>
+                <div className='flex h-full items-center gap-1 rounded-lg bg-components-input-bg-normal px-3 py-2'>
+                  <ApiConnectionMod className='h-4 w-4 text-text-secondary' />
+                  <div className='system-sm-medium overflow-hidden text-ellipsis text-text-secondary'>
+                    {currentDataset?.external_knowledge_info.external_knowledge_api_name}
+                  </div>
+                  <div className='system-xs-regular text-text-tertiary'>·</div>
+                  <div className='system-xs-regular text-text-tertiary'>
+                    {currentDataset?.external_knowledge_info.external_knowledge_api_endpoint}
                   </div>
                 </div>
               </div>
-              <div className='grow'>
-                {indexMethod === IndexingType.QUALIFIED
-                  ? (
-                    <RetrievalMethodConfig
-                      value={retrievalConfig}
-                      onChange={setRetrievalConfig}
-                    />
-                  )
-                  : (
-                    <EconomicalRetrievalMethodConfig
-                      value={retrievalConfig}
-                      onChange={setRetrievalConfig}
-                    />
-                  )}
+            </div>
+            <div className={rowClass}>
+              <div className={labelClass}>
+                <div className='system-sm-semibold text-text-secondary'>{t('datasetSettings.form.externalKnowledgeID')}</div>
+              </div>
+              <div className='w-full'>
+                <div className='flex h-full items-center gap-1 rounded-lg bg-components-input-bg-normal px-3 py-2'>
+                  <div className='system-xs-regular text-text-tertiary'>
+                    {currentDataset?.external_knowledge_info.external_knowledge_id}
+                  </div>
+                </div>
               </div>
             </div>
           </>
+        )
+        // eslint-disable-next-line sonarjs/no-nested-conditional
+        : indexMethod
+          ? (
+            <>
+              <Divider
+                type='horizontal'
+                className='my-1 h-px bg-divider-subtle'
+              />
+              <div className={rowClass}>
+                <div className={labelClass}>
+                  <div className='flex w-[180px] shrink-0 flex-col'>
+                    <div className='system-sm-semibold flex h-7 items-center pt-1 text-text-secondary'>
+                      {t('datasetSettings.form.retrievalSetting.title')}
+                    </div>
+                    <div className='body-xs-regular text-text-tertiary'>
+                      <a
+                        target='_blank'
+                        rel='noopener noreferrer'
+                        href={`https://docs.dify.ai/${docLanguage}/guides/knowledge-base/create-knowledge-and-upload-documents/setting-indexing-methods`}
+                        className='text-text-accent'
+                      >
+                        {t('datasetSettings.form.retrievalSetting.learnMore')}
+                      </a>
+                      {t('datasetSettings.form.retrievalSetting.description')}
+                    </div>
+                  </div>
+                </div>
+                <div className='grow'>
+                  {indexMethod === IndexingType.QUALIFIED
+                    ? (
+                      <RetrievalMethodConfig
+                        value={retrievalConfig}
+                        onChange={setRetrievalConfig}
+                      />
+                    )
+                    : (
+                      <EconomicalRetrievalMethodConfig
+                        value={retrievalConfig}
+                        onChange={setRetrievalConfig}
+                      />
+                    )}
+                </div>
+              </div>
+            </>
+          )
           : null
       }
-      <div className='my-1 h-0 w-full border-b border-divider-subtle' />
+      <Divider
+        type='horizontal'
+        className='my-1 h-px bg-divider-subtle'
+      />
       <div className={rowClass}>
         <div className={labelClass} />
         <div className='grow'>