feat: parent child retrieval (#12106)

Signed-off-by: -LAN- <laipz8200@outlook.com>
Co-authored-by: -LAN- <laipz8200@outlook.com>

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

@@ -8,16 +8,16 @@ 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 { IndexingType } from '../../create/step-two'
 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 Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
-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 { type DataSetListResponse, RerankingModeEnum } from '@/models/datasets'
 import DatasetDetailContext from '@/context/dataset-detail'
 import { type RetrievalConfig } from '@/types/app'
 import { useAppContext } from '@/context/app-context'
@@ -31,12 +31,11 @@ import type { DefaultModel } from '@/app/components/header/account-setting/model
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { fetchMembers } from '@/service/common'
 import type { Member } from '@/models/common'
+import AlertTriangle from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback/AlertTriangle'
 
-const rowClass = `
-  flex justify-between py-4 flex-wrap gap-y-2
-`
+const rowClass = 'flex'
 const labelClass = `
-  flex items-center w-[168px] h-9
+  flex items-center shrink-0 w-[180px] h-9
 `
 
 const getKey = (pageIndex: number, previousPageData: DataSetListResponse) => {
@@ -122,7 +121,10 @@ const Form = () => {
     }
     const postRetrievalConfig = ensureRerankModelSelected({
       rerankDefaultModel: rerankDefaultModel!,
-      retrievalConfig,
+      retrievalConfig: {
+        ...retrievalConfig,
+        reranking_enable: retrievalConfig.reranking_mode === RerankingModeEnum.RerankingModel,
+      },
       indexMethod,
     })
     if (postRetrievalConfig.weights) {
@@ -179,12 +181,12 @@ const Form = () => {
   }
 
   return (
-    <div className='w-full sm:w-[800px] p-4 sm:px-16 sm:py-6'>
+    <div className='w-full sm:w-[880px] px-14 py-8 flex flex-col gap-y-4'>
       <div className={rowClass}>
         <div className={labelClass}>
           <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.name')}</div>
         </div>
-        <div className='w-full max-w-[480px]'>
+        <div className='grow'>
           <Input
             disabled={!currentDataset?.embedding_available}
             className='h-9'
@@ -197,10 +199,10 @@ const Form = () => {
         <div className={labelClass}>
           <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.desc')}</div>
         </div>
-        <div className='w-full max-w-[480px]'>
+        <div className='grow'>
           <Textarea
             disabled={!currentDataset?.embedding_available}
-            className='mb-2 h-[120px] resize-none'
+            className='h-[120px] resize-none'
             placeholder={t('datasetSettings.form.descPlaceholder') || ''}
             value={description}
             onChange={e => setDescription(e.target.value)}
@@ -211,7 +213,7 @@ const Form = () => {
         <div className={labelClass}>
           <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.permissions')}</div>
         </div>
-        <div className='w-full sm:w-[480px]'>
+        <div className='grow'>
           <PermissionSelector
             disabled={!currentDataset?.embedding_available || isCurrentWorkspaceDatasetOperator}
             permission={permission}
@@ -224,42 +226,53 @@ const Form = () => {
       </div>
       {currentDataset && currentDataset.indexing_technique && (
         <>
-          <div className='w-full h-0 border-b-[0.5px] border-b-gray-200 my-2' />
+          <div className='w-full h-0 border-b border-divider-subtle my-1' />
           <div className={rowClass}>
             <div className={labelClass}>
               <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.indexMethod')}</div>
             </div>
-            <div className='w-full sm:w-[480px]'>
+            <div className='grow'>
               <IndexMethodRadio
                 disable={!currentDataset?.embedding_available}
                 value={indexMethod}
                 onChange={v => setIndexMethod(v)}
+                docForm={currentDataset.doc_form}
+                currentValue={currentDataset.indexing_technique}
               />
+              {currentDataset.indexing_technique === IndexingType.ECONOMICAL && indexMethod === IndexingType.QUALIFIED && <div className='mt-2 h-10 p-2 flex items-center gap-x-0.5 rounded-xl border-[0.5px] border-components-panel-border overflow-hidden bg-components-panel-bg-blur backdrop-blur-[5px] shadow-xs'>
+                <div className='absolute top-0 left-0 right-0 bottom-0 bg-[linear-gradient(92deg,rgba(247,144,9,0.25)_0%,rgba(255,255,255,0.00)_100%)] opacity-40'></div>
+                <div className='p-1'>
+                  <AlertTriangle className='size-4 text-text-warning-secondary' />
+                </div>
+                <span className='system-xs-medium'>{t('datasetSettings.form.upgradeHighQualityTip')}</span>
+              </div>}
             </div>
           </div>
         </>
       )}
       {indexMethod === 'high_quality' && (
-        <div className={rowClass}>
-          <div className={labelClass}>
-            <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.embeddingModel')}</div>
+        <>
+          <div className={rowClass}>
+            <div className={labelClass}>
+              <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.embeddingModel')}</div>
+            </div>
+            <div className='grow'>
+              <ModelSelector
+                triggerClassName=''
+                defaultModel={embeddingModel}
+                modelList={embeddingModelList}
+                onSelect={(model: DefaultModel) => {
+                  setEmbeddingModel(model)
+                }}
+              />
+            </div>
           </div>
-          <div className='w-[480px]'>
-            <ModelSelector
-              triggerClassName=''
-              defaultModel={embeddingModel}
-              modelList={embeddingModelList}
-              onSelect={(model: DefaultModel) => {
-                setEmbeddingModel(model)
-              }}
-            />
-          </div>
-        </div>
+        </>
       )}
       {/* Retrieval Method Config */}
       {currentDataset?.provider === 'external'
         ? <>
-          <div className={rowClass}><Divider /></div>
+          <div className='w-full h-0 border-b border-divider-subtle my-1' />
           <div className={rowClass}>
             <div className={labelClass}>
               <div className='text-text-secondary system-sm-semibold'>{t('datasetSettings.form.retrievalSetting.title')}</div>
@@ -272,12 +285,12 @@ const Form = () => {
               isInRetrievalSetting={true}
             />
           </div>
-          <div className={rowClass}><Divider /></div>
+          <div className='w-full h-0 border-b border-divider-subtle my-1' />
           <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='w-full'>
               <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'>
@@ -292,44 +305,47 @@ const Form = () => {
             <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='w-full'>
               <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 className='w-full h-0 border-b border-divider-subtle my-1' />
+          <div className={rowClass}>
+            <div className={labelClass}>
+              <div>
+                <div className='text-text-secondary system-sm-semibold'>{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>
               </div>
             </div>
+            <div className='grow'>
+              {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='w-full h-0 border-b border-divider-subtle my-1' />
       <div className={rowClass}>
         <div className={labelClass} />
-        <div className='w-[480px]'>
+        <div className='grow'>
           <Button
             className='min-w-24'
             variant='primary'

web/app/components/datasets/settings/index-method-radio/index.module.css

@@ -1,54 +0,0 @@
-.icon {
-  margin-right: 12px;
-  width: 24px;
-  height: 24px;
-  background:  center center no-repeat;
-  background-size: contain;
-}
-
-.high-quality-icon {
-  background-image: url(./assets/high-quality.svg);
-}
-.economy-icon {
-  background-image: url(./assets/economy.svg);
-}
-
-.wrapper .item:hover {
-  background-color: #ffffff;
-  border-color: #B2CCFF;
-  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
-}
-
-.wrapper .item-active {
-  background-color: #ffffff;
-  border-width: 1.5px;
-  border-color: #528BFF;
-  box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
-}
-
-.wrapper .item-active .radio {
-  border-width: 5px;
-  border-color: #155EEF;
-}
-
-.wrapper .item-active:hover {
-  border-width: 1.5px;
-  border-color: #528BFF;
-  box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
-}
-
-.wrapper .item.disable {
-  @apply opacity-60;
-}
-.wrapper .item-active.disable {
-  @apply opacity-60;
-}
-.wrapper .item.disable:hover {
-  @apply bg-gray-25 border border-gray-100 shadow-none cursor-default opacity-60;
-}
-.wrapper .item-active.disable:hover {
-  @apply cursor-default opacity-60;
-  border-width: 1.5px;
-  border-color: #528BFF;
-  box-shadow: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
-}

web/app/components/datasets/settings/index-method-radio/index.tsx

@@ -1,70 +1,103 @@
 'use client'
 import { useTranslation } from 'react-i18next'
-import s from './index.module.css'
+import Image from 'next/image'
+import { useRef } from 'react'
+import { useHover } from 'ahooks'
+import { IndexingType } from '../../create/step-two'
+import { OptionCard } from '../../create/step-two/option-card'
+import { indexMethodIcon } from '../../create/icons'
 import classNames from '@/utils/classnames'
 import type { DataSet } from '@/models/datasets'
+import { ChunkingMode } from '@/models/datasets'
+import Badge from '@/app/components/base/badge'
+import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
 
-const itemClass = `
-  w-full sm:w-[234px] p-3 rounded-xl bg-gray-25 border border-gray-100 cursor-pointer
-`
-const radioClass = `
-  w-4 h-4 border-[2px] border-gray-200 rounded-full
-`
 type IIndexMethodRadioProps = {
   value?: DataSet['indexing_technique']
   onChange: (v?: DataSet['indexing_technique']) => void
   disable?: boolean
-  itemClassName?: string
+  docForm?: ChunkingMode
+  currentValue?: DataSet['indexing_technique']
 }
 
 const IndexMethodRadio = ({
   value,
   onChange,
   disable,
-  itemClassName,
+  docForm,
+  currentValue,
 }: IIndexMethodRadioProps) => {
   const { t } = useTranslation()
+  const economyDomRef = useRef<HTMLDivElement>(null)
+  const isHoveringEconomy = useHover(economyDomRef)
+  const isEconomyDisabled = currentValue === IndexingType.QUALIFIED
   const options = [
     {
       key: 'high_quality',
-      text: t('datasetSettings.form.indexMethodHighQuality'),
+      text: <div className='flex items-center'>
+        {t('datasetCreation.stepTwo.qualified')}
+        <Badge uppercase className='ml-auto border-text-accent-secondary text-text-accent-secondary'>
+          {t('datasetCreation.stepTwo.recommend')}
+        </Badge>
+      </div>,
       desc: t('datasetSettings.form.indexMethodHighQualityTip'),
-      icon: 'high-quality',
     },
     {
       key: 'economy',
       text: t('datasetSettings.form.indexMethodEconomy'),
       desc: t('datasetSettings.form.indexMethodEconomyTip'),
-      icon: 'economy',
     },
   ]
 
   return (
-    <div className={classNames(s.wrapper, 'flex justify-between w-full flex-wrap gap-y-2')}>
+    <div className={classNames('flex justify-between w-full gap-2')}>
       {
-        options.map(option => (
-          <div
-            key={option.key}
-            className={classNames(
-              itemClass,
-              itemClassName,
-              s.item,
-              option.key === value && s['item-active'],
-              disable && s.disable,
-            )}
-            onClick={() => {
-              if (!disable)
-                onChange(option.key as DataSet['indexing_technique'])
-            }}
-          >
-            <div className='flex items-center mb-1'>
-              <div className={classNames(s.icon, s[`${option.icon}-icon`])} />
-              <div className='grow text-sm text-gray-900'>{option.text}</div>
-              <div className={classNames(radioClass, s.radio)} />
-            </div>
-            <div className='pl-9 text-xs text-gray-500 leading-[18px]'>{option.desc}</div>
-          </div>
-        ))
+        options.map((option) => {
+          const isParentChild = docForm === ChunkingMode.parentChild
+          return (
+            <PortalToFollowElem
+              key={option.key}
+              open={
+                isHoveringEconomy && option.key === 'economy'
+              }
+              placement={'top'}
+            >
+              <PortalToFollowElemTrigger>
+                <OptionCard
+                  disabled={
+                    disable
+                    || (isEconomyDisabled && option.key === IndexingType.ECONOMICAL)
+                  }
+                  isActive={option.key === value}
+                  onSwitched={() => {
+                    if (isParentChild && option.key === IndexingType.ECONOMICAL)
+                      return
+                    if (isEconomyDisabled && option.key === IndexingType.ECONOMICAL)
+                      return
+                    if (!disable)
+                      onChange(option.key as DataSet['indexing_technique'])
+                  } }
+                  icon={
+                    <Image
+                      src={option.key === 'high_quality' ? indexMethodIcon.high_quality : indexMethodIcon.economical}
+                      alt={option.desc}
+                    />
+                  }
+                  title={option.text}
+                  description={option.desc}
+                  ref={option.key === 'economy' ? economyDomRef : undefined}
+                  className={classNames((isEconomyDisabled && option.key === 'economy') && 'cursor-not-allowed')}
+                >
+                </OptionCard>
+              </PortalToFollowElemTrigger>
+              <PortalToFollowElemContent style={{ zIndex: 60 }}>
+                <div className='p-3 bg-components-tooltip-bg border-components-panel-border text-xs font-medium text-text-secondary rounded-lg shadow-lg'>
+                  {t('datasetSettings.form.indexMethodChangeToEconomyDisabledTip')}
+                </div>
+              </PortalToFollowElemContent>
+            </PortalToFollowElem>
+          )
+        })
       }
     </div>
   )