dify

2025-12-01 17:21:38 +08:00
parent 32fee2b8ab
commit fab8c13cb3
7511 changed files with 996300 additions and 0 deletions
--- a/dify/web/app/components/datasets/settings/index-method/index.tsx
+++ b/dify/web/app/components/datasets/settings/index-method/index.tsx
@@ -0,0 +1,94 @@
+'use client'
+import { useTranslation } from 'react-i18next'
+import { useRef } from 'react'
+import { useHover } from 'ahooks'
+import { IndexingType } from '../../create/step-two'
+import classNames from '@/utils/classnames'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import { Economic, HighQuality } from '@/app/components/base/icons/src/vender/knowledge'
+import { EffectColor } from '../chunk-structure/types'
+import OptionCard from '../option-card'
+import KeywordNumber from './keyword-number'
+
+type IndexMethodProps = {
+  value: IndexingType
+  onChange: (id: IndexingType) => void
+  disabled?: boolean
+  currentValue?: IndexingType
+  keywordNumber: number
+  onKeywordNumberChange: (value: number) => void
+}
+
+const IndexMethod = ({
+  value,
+  onChange,
+  disabled,
+  currentValue,
+  keywordNumber,
+  onKeywordNumberChange,
+}: IndexMethodProps) => {
+  const { t } = useTranslation()
+  const economyDomRef = useRef<HTMLDivElement>(null)
+  const isHoveringEconomy = useHover(economyDomRef)
+  const isEconomyDisabled = currentValue === IndexingType.QUALIFIED
+
+  return (
+    <div className={classNames('flex flex-col gap-y-2')}>
+      {/* High Quality */}
+      <OptionCard
+        id={IndexingType.QUALIFIED}
+        isActive={value === IndexingType.QUALIFIED}
+        onClick={onChange}
+        icon={<HighQuality className='size-[18px]' />}
+        iconActiveColor='text-util-colors-orange-orange-500'
+        title={t('datasetCreation.stepTwo.qualified')}
+        description={t('datasetSettings.form.indexMethodHighQualityTip')}
+        disabled={disabled}
+        isRecommended
+        effectColor={EffectColor.orange}
+        showEffectColor
+        className='gap-x-2'
+      />
+      {/* Economy */}
+      <PortalToFollowElem
+        open={isHoveringEconomy}
+        offset={4}
+        placement={'right'}
+      >
+        <PortalToFollowElemTrigger>
+          <OptionCard
+            ref={economyDomRef}
+            id={IndexingType.ECONOMICAL}
+            isActive={value === IndexingType.ECONOMICAL}
+            onClick={onChange}
+            icon={<Economic className='size-[18px]' />}
+            iconActiveColor='text-util-colors-indigo-indigo-600'
+            title={t('datasetSettings.form.indexMethodEconomy')}
+            description={t('datasetSettings.form.indexMethodEconomyTip', { count: keywordNumber })}
+            disabled={disabled || isEconomyDisabled}
+            effectColor={EffectColor.indigo}
+            showEffectColor
+            showChildren
+            className='gap-x-2'
+          >
+            <KeywordNumber
+              keywordNumber={keywordNumber}
+              onKeywordNumberChange={onKeywordNumberChange}
+            />
+          </OptionCard>
+        </PortalToFollowElemTrigger>
+        <PortalToFollowElemContent style={{ zIndex: 60 }}>
+          <div className='rounded-lg border-components-panel-border bg-components-tooltip-bg p-3 text-xs font-medium text-text-secondary shadow-lg'>
+            {t('datasetSettings.form.indexMethodChangeToEconomyDisabledTip')}
+          </div>
+        </PortalToFollowElemContent>
+      </PortalToFollowElem>
+    </div>
+  )
+}
+
+export default IndexMethod