dify
This commit is contained in:
@@ -0,0 +1,71 @@
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
GeneralChunk,
|
||||
ParentChildChunk,
|
||||
QuestionAndAnswer,
|
||||
} from '@/app/components/base/icons/src/vender/knowledge'
|
||||
import cn from '@/utils/classnames'
|
||||
import { ChunkStructureEnum } from '../../types'
|
||||
import type { Option } from './type'
|
||||
|
||||
export const useChunkStructure = () => {
|
||||
const { t } = useTranslation()
|
||||
const GeneralOption: Option = {
|
||||
id: ChunkStructureEnum.general,
|
||||
icon: (isActive: boolean) => (
|
||||
<GeneralChunk
|
||||
className={cn(
|
||||
'h-[18px] w-[18px] text-text-tertiary group-hover:text-util-colors-indigo-indigo-600',
|
||||
isActive && 'text-util-colors-indigo-indigo-600',
|
||||
)} />
|
||||
),
|
||||
title: t('datasetCreation.stepTwo.general'),
|
||||
description: t('datasetCreation.stepTwo.generalTip'),
|
||||
effectColor: 'blue',
|
||||
}
|
||||
const ParentChildOption: Option = {
|
||||
id: ChunkStructureEnum.parent_child,
|
||||
icon: (isActive: boolean) => (
|
||||
<ParentChildChunk
|
||||
className={cn(
|
||||
'h-[18px] w-[18px] text-text-tertiary group-hover:text-util-colors-blue-light-blue-light-500',
|
||||
isActive && 'text-util-colors-blue-light-blue-light-500',
|
||||
)}
|
||||
/>
|
||||
),
|
||||
title: t('datasetCreation.stepTwo.parentChild'),
|
||||
description: t('datasetCreation.stepTwo.parentChildTip'),
|
||||
effectColor: 'blue-light',
|
||||
}
|
||||
const QuestionAnswerOption: Option = {
|
||||
id: ChunkStructureEnum.question_answer,
|
||||
icon: (isActive: boolean) => (
|
||||
<QuestionAndAnswer
|
||||
className={cn(
|
||||
'h-[18px] w-[18px] text-text-tertiary group-hover:text-util-colors-teal-teal-600',
|
||||
isActive && 'text-util-colors-teal-teal-600',
|
||||
)}
|
||||
/>
|
||||
),
|
||||
title: 'Q&A',
|
||||
description: t('datasetCreation.stepTwo.qaTip'),
|
||||
effectColor: 'teal',
|
||||
}
|
||||
|
||||
const optionMap: Record<ChunkStructureEnum, Option> = {
|
||||
[ChunkStructureEnum.general]: GeneralOption,
|
||||
[ChunkStructureEnum.parent_child]: ParentChildOption,
|
||||
[ChunkStructureEnum.question_answer]: QuestionAnswerOption,
|
||||
}
|
||||
|
||||
const options = [
|
||||
GeneralOption,
|
||||
ParentChildOption,
|
||||
QuestionAnswerOption,
|
||||
]
|
||||
|
||||
return {
|
||||
options,
|
||||
optionMap,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
import { memo } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { RiAddLine } from '@remixicon/react'
|
||||
import { Field } from '@/app/components/workflow/nodes/_base/components/layout'
|
||||
import type { ChunkStructureEnum } from '../../types'
|
||||
import OptionCard from '../option-card'
|
||||
import Selector from './selector'
|
||||
import { useChunkStructure } from './hooks'
|
||||
import Button from '@/app/components/base/button'
|
||||
import Instruction from './instruction'
|
||||
|
||||
type ChunkStructureProps = {
|
||||
chunkStructure?: ChunkStructureEnum
|
||||
onChunkStructureChange: (value: ChunkStructureEnum) => void
|
||||
readonly?: boolean
|
||||
}
|
||||
const ChunkStructure = ({
|
||||
chunkStructure,
|
||||
onChunkStructureChange,
|
||||
readonly = false,
|
||||
}: ChunkStructureProps) => {
|
||||
const { t } = useTranslation()
|
||||
const {
|
||||
options,
|
||||
optionMap,
|
||||
} = useChunkStructure()
|
||||
|
||||
return (
|
||||
<Field
|
||||
fieldTitleProps={{
|
||||
title: t('workflow.nodes.knowledgeBase.chunkStructure'),
|
||||
tooltip: t('workflow.nodes.knowledgeBase.chunkStructureTip.message'),
|
||||
operation: chunkStructure && (
|
||||
<Selector
|
||||
options={options}
|
||||
value={chunkStructure}
|
||||
onChange={onChunkStructureChange}
|
||||
readonly={readonly}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
>
|
||||
{
|
||||
chunkStructure && (
|
||||
<OptionCard
|
||||
{...optionMap[chunkStructure]}
|
||||
selectedId={chunkStructure}
|
||||
enableSelect={false}
|
||||
enableHighlightBorder={false}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
!chunkStructure && (
|
||||
<>
|
||||
<Selector
|
||||
options={options}
|
||||
onChange={onChunkStructureChange}
|
||||
readonly={readonly}
|
||||
trigger={(
|
||||
<Button
|
||||
className='w-full'
|
||||
variant='secondary-accent'
|
||||
>
|
||||
<RiAddLine className='mr-1 h-4 w-4' />
|
||||
{t('workflow.nodes.knowledgeBase.chooseChunkStructure')}
|
||||
</Button>
|
||||
)}
|
||||
/>
|
||||
<Instruction className='mt-2' />
|
||||
</>
|
||||
)
|
||||
}
|
||||
</Field>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(ChunkStructure)
|
||||
@@ -0,0 +1,47 @@
|
||||
import React from 'react'
|
||||
import { AddChunks } from '@/app/components/base/icons/src/vender/knowledge'
|
||||
import Line from './line'
|
||||
import cn from '@/utils/classnames'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useDocLink } from '@/context/i18n'
|
||||
|
||||
type InstructionProps = {
|
||||
className?: string
|
||||
}
|
||||
|
||||
const Instruction = ({
|
||||
className,
|
||||
}: InstructionProps) => {
|
||||
const { t } = useTranslation()
|
||||
const docLink = useDocLink()
|
||||
|
||||
return (
|
||||
<div className={cn('flex flex-col gap-y-2 overflow-hidden rounded-[10px] bg-workflow-process-bg p-4', className)}>
|
||||
<div className='relative flex size-10 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg shadow-lg backdrop-blur-[5px]'>
|
||||
<AddChunks className='size-5 text-text-accent' />
|
||||
<Line className='absolute -left-px bottom-[-76px]' type='vertical' />
|
||||
<Line className='absolute -right-px bottom-[-76px]' type='vertical' />
|
||||
<Line className='absolute -top-px right-[-184px]' type='horizontal' />
|
||||
<Line className='absolute -bottom-px right-[-184px]' type='horizontal' />
|
||||
</div>
|
||||
<div className='flex flex-col gap-y-1'>
|
||||
<div className='system-sm-medium text-text-secondary'>
|
||||
{t('workflow.nodes.knowledgeBase.chunkStructureTip.title')}
|
||||
</div>
|
||||
<div className='system-xs-regular'>
|
||||
<p className='text-text-tertiary'>{t('workflow.nodes.knowledgeBase.chunkStructureTip.message')}</p>
|
||||
<a
|
||||
href={docLink('/guides/knowledge-base/create-knowledge-and-upload-documents/chunking-and-cleaning-text')}
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
className='text-text-accent'
|
||||
>
|
||||
{t('workflow.nodes.knowledgeBase.chunkStructureTip.learnMore')}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Instruction)
|
||||
@@ -0,0 +1,41 @@
|
||||
import React from 'react'
|
||||
|
||||
type LineProps = {
|
||||
type?: 'vertical' | 'horizontal'
|
||||
className?: string
|
||||
}
|
||||
|
||||
const Line = ({
|
||||
type = 'vertical',
|
||||
className,
|
||||
}: LineProps) => {
|
||||
if (type === 'vertical') {
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='2' height='132' viewBox='0 0 2 132' fill='none' className={className}>
|
||||
<path d='M1 0L1 132' stroke='url(#paint0_linear_10882_18766)' />
|
||||
<defs>
|
||||
<linearGradient id='paint0_linear_10882_18766' x1='-7.99584' y1='132' x2='-7.96108' y2='6.4974e-07' gradientUnits='userSpaceOnUse'>
|
||||
<stop stopColor='var(--color-background-gradient-mask-transparent)' />
|
||||
<stop offset='0.877606' stopColor='var(--color-divider-subtle)' />
|
||||
<stop offset='1' stopColor='var(--color-background-gradient-mask-transparent)' />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='240' height='2' viewBox='0 0 240 2' fill='none' className={className}>
|
||||
<path d='M0 1H240' stroke='url(#paint0_linear_10882_18763)' />
|
||||
<defs>
|
||||
<linearGradient id='paint0_linear_10882_18763' x1='240' y1='9.99584' x2='3.95539e-05' y2='9.88094' gradientUnits='userSpaceOnUse'>
|
||||
<stop stopColor='var(--color-background-gradient-mask-transparent)' />
|
||||
<stop offset='0.9031' stopColor='var(--color-divider-subtle)' />
|
||||
<stop offset='1' stopColor='var(--color-background-gradient-mask-transparent)' />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Line)
|
||||
@@ -0,0 +1,93 @@
|
||||
import type { ReactNode } from 'react'
|
||||
import { useCallback, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
PortalToFollowElem,
|
||||
PortalToFollowElemContent,
|
||||
PortalToFollowElemTrigger,
|
||||
} from '@/app/components/base/portal-to-follow-elem'
|
||||
import Button from '@/app/components/base/button'
|
||||
import type { ChunkStructureEnum } from '../../types'
|
||||
import OptionCard from '../option-card'
|
||||
import type { Option } from './type'
|
||||
|
||||
type SelectorProps = {
|
||||
options: Option[]
|
||||
value?: ChunkStructureEnum
|
||||
onChange: (key: ChunkStructureEnum) => void
|
||||
readonly?: boolean
|
||||
trigger?: ReactNode
|
||||
}
|
||||
const Selector = ({
|
||||
options,
|
||||
value,
|
||||
onChange,
|
||||
readonly,
|
||||
trigger,
|
||||
}: SelectorProps) => {
|
||||
const { t } = useTranslation()
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
const handleSelect = useCallback((optionId: ChunkStructureEnum) => {
|
||||
onChange(optionId)
|
||||
setOpen(false)
|
||||
}, [onChange])
|
||||
|
||||
return (
|
||||
<PortalToFollowElem
|
||||
placement='bottom-end'
|
||||
offset={{
|
||||
mainAxis: 0,
|
||||
crossAxis: -8,
|
||||
}}
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
>
|
||||
<PortalToFollowElemTrigger
|
||||
asChild
|
||||
onClick={() => {
|
||||
if (readonly)
|
||||
return
|
||||
setOpen(!open)
|
||||
}}
|
||||
>
|
||||
{
|
||||
trigger || (
|
||||
<Button
|
||||
size='small'
|
||||
variant='ghost-accent'
|
||||
>
|
||||
{t('workflow.panel.change')}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-10'>
|
||||
<div className='w-[404px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-xl backdrop-blur-[5px]'>
|
||||
<div className='system-sm-semibold px-3 pt-3.5 text-text-primary'>
|
||||
{t('workflow.nodes.knowledgeBase.changeChunkStructure')}
|
||||
</div>
|
||||
<div className='space-y-1 p-3 pt-2'>
|
||||
{
|
||||
options.map(option => (
|
||||
<OptionCard
|
||||
key={option.id}
|
||||
id={option.id}
|
||||
selectedId={value}
|
||||
icon={option.icon}
|
||||
title={option.title}
|
||||
description={option.description}
|
||||
readonly={readonly}
|
||||
onClick={handleSelect}
|
||||
effectColor={option.effectColor}
|
||||
></OptionCard>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem>
|
||||
)
|
||||
}
|
||||
|
||||
export default Selector
|
||||
@@ -0,0 +1,10 @@
|
||||
import type { ReactNode } from 'react'
|
||||
import type { ChunkStructureEnum } from '../../types'
|
||||
|
||||
export type Option = {
|
||||
id: ChunkStructureEnum
|
||||
icon: ReactNode | ((isActive: boolean) => ReactNode)
|
||||
title: string
|
||||
description: string
|
||||
effectColor?: string
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import {
|
||||
memo,
|
||||
useCallback,
|
||||
useMemo,
|
||||
} from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Field } from '@/app/components/workflow/nodes/_base/components/layout'
|
||||
import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
|
||||
import { useModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
|
||||
import type { DefaultModel } from '@/app/components/header/account-setting/model-provider-page/declarations'
|
||||
import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
|
||||
|
||||
type EmbeddingModelProps = {
|
||||
embeddingModel?: string
|
||||
embeddingModelProvider?: string
|
||||
onEmbeddingModelChange?: (model: {
|
||||
embeddingModel: string
|
||||
embeddingModelProvider: string
|
||||
}) => void
|
||||
readonly?: boolean
|
||||
}
|
||||
const EmbeddingModel = ({
|
||||
embeddingModel,
|
||||
embeddingModelProvider,
|
||||
onEmbeddingModelChange,
|
||||
readonly = false,
|
||||
}: EmbeddingModelProps) => {
|
||||
const { t } = useTranslation()
|
||||
const {
|
||||
data: embeddingModelList,
|
||||
} = useModelList(ModelTypeEnum.textEmbedding)
|
||||
const embeddingModelConfig = useMemo(() => {
|
||||
if (!embeddingModel || !embeddingModelProvider)
|
||||
return undefined
|
||||
|
||||
return {
|
||||
providerName: embeddingModelProvider,
|
||||
modelName: embeddingModel,
|
||||
}
|
||||
}, [embeddingModel, embeddingModelProvider])
|
||||
|
||||
const handleEmbeddingModelChange = useCallback((model: DefaultModel) => {
|
||||
onEmbeddingModelChange?.({
|
||||
embeddingModelProvider: model.provider,
|
||||
embeddingModel: model.model,
|
||||
})
|
||||
}, [onEmbeddingModelChange])
|
||||
|
||||
return (
|
||||
<Field
|
||||
fieldTitleProps={{
|
||||
title: t('datasetSettings.form.embeddingModel'),
|
||||
}}
|
||||
>
|
||||
<ModelSelector
|
||||
defaultModel={embeddingModelConfig && { provider: embeddingModelConfig.providerName, model: embeddingModelConfig.modelName }}
|
||||
modelList={embeddingModelList}
|
||||
onSelect={handleEmbeddingModelChange}
|
||||
readonly={readonly}
|
||||
showDeprecatedWarnIcon
|
||||
/>
|
||||
</Field>
|
||||
)
|
||||
}
|
||||
export default memo(EmbeddingModel)
|
||||
@@ -0,0 +1,128 @@
|
||||
import {
|
||||
memo,
|
||||
useCallback,
|
||||
} from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { RiQuestionLine } from '@remixicon/react'
|
||||
import {
|
||||
Economic,
|
||||
HighQuality,
|
||||
} from '@/app/components/base/icons/src/vender/knowledge'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import Slider from '@/app/components/base/slider'
|
||||
import Input from '@/app/components/base/input'
|
||||
import { Field } from '@/app/components/workflow/nodes/_base/components/layout'
|
||||
import OptionCard from './option-card'
|
||||
import cn from '@/utils/classnames'
|
||||
import {
|
||||
ChunkStructureEnum,
|
||||
IndexMethodEnum,
|
||||
} from '../types'
|
||||
|
||||
type IndexMethodProps = {
|
||||
chunkStructure: ChunkStructureEnum
|
||||
indexMethod?: IndexMethodEnum
|
||||
onIndexMethodChange: (value: IndexMethodEnum) => void
|
||||
keywordNumber: number
|
||||
onKeywordNumberChange: (value: number) => void
|
||||
readonly?: boolean
|
||||
}
|
||||
const IndexMethod = ({
|
||||
chunkStructure,
|
||||
indexMethod,
|
||||
onIndexMethodChange,
|
||||
keywordNumber,
|
||||
onKeywordNumberChange,
|
||||
readonly = false,
|
||||
}: IndexMethodProps) => {
|
||||
const { t } = useTranslation()
|
||||
const isHighQuality = indexMethod === IndexMethodEnum.QUALIFIED
|
||||
const isEconomy = indexMethod === IndexMethodEnum.ECONOMICAL
|
||||
|
||||
const handleIndexMethodChange = useCallback((newIndexMethod: IndexMethodEnum) => {
|
||||
onIndexMethodChange(newIndexMethod)
|
||||
}, [onIndexMethodChange])
|
||||
|
||||
const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = Number(e.target.value)
|
||||
if (!Number.isNaN(value))
|
||||
onKeywordNumberChange(value)
|
||||
}, [onKeywordNumberChange])
|
||||
|
||||
return (
|
||||
<Field
|
||||
fieldTitleProps={{
|
||||
title: t('datasetCreation.stepTwo.indexMode'),
|
||||
}}
|
||||
>
|
||||
<div className='space-y-1'>
|
||||
<OptionCard<IndexMethodEnum>
|
||||
id={IndexMethodEnum.QUALIFIED}
|
||||
selectedId={indexMethod}
|
||||
icon={
|
||||
<HighQuality
|
||||
className={cn(
|
||||
'h-[15px] w-[15px] text-text-tertiary group-hover:text-util-colors-orange-orange-500',
|
||||
isHighQuality && 'text-util-colors-orange-orange-500',
|
||||
)}
|
||||
/>
|
||||
}
|
||||
title={t('datasetCreation.stepTwo.qualified')}
|
||||
description={t('datasetSettings.form.indexMethodHighQualityTip')}
|
||||
onClick={handleIndexMethodChange}
|
||||
isRecommended
|
||||
effectColor='orange'
|
||||
></OptionCard>
|
||||
{
|
||||
chunkStructure === ChunkStructureEnum.general && (
|
||||
<OptionCard
|
||||
id={IndexMethodEnum.ECONOMICAL}
|
||||
selectedId={indexMethod}
|
||||
icon={
|
||||
<Economic
|
||||
className={cn(
|
||||
'h-[15px] w-[15px] text-text-tertiary group-hover:text-util-colors-indigo-indigo-500',
|
||||
isEconomy && 'text-util-colors-indigo-indigo-500',
|
||||
)}
|
||||
/>
|
||||
}
|
||||
title={t('datasetSettings.form.indexMethodEconomy')}
|
||||
description={t('datasetSettings.form.indexMethodEconomyTip', { count: keywordNumber })}
|
||||
onClick={handleIndexMethodChange}
|
||||
effectColor='blue'
|
||||
>
|
||||
<div className='flex items-center'>
|
||||
<div className='flex grow items-center'>
|
||||
<div className='system-xs-medium truncate text-text-secondary'>
|
||||
{t('datasetSettings.form.numberOfKeywords')}
|
||||
</div>
|
||||
<Tooltip
|
||||
popupContent='number of keywords'
|
||||
>
|
||||
<RiQuestionLine className='ml-0.5 h-3.5 w-3.5 text-text-quaternary' />
|
||||
</Tooltip>
|
||||
</div>
|
||||
<Slider
|
||||
disabled={readonly}
|
||||
className='mr-3 w-24 shrink-0'
|
||||
value={keywordNumber}
|
||||
onChange={onKeywordNumberChange}
|
||||
/>
|
||||
<Input
|
||||
disabled={readonly}
|
||||
className='shrink-0'
|
||||
wrapperClassName='shrink-0 w-[72px]'
|
||||
type='number'
|
||||
value={keywordNumber}
|
||||
onChange={handleInputChange}
|
||||
/>
|
||||
</div>
|
||||
</OptionCard>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</Field>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(IndexMethod)
|
||||
@@ -0,0 +1,150 @@
|
||||
import type { ReactNode } from 'react'
|
||||
import {
|
||||
memo,
|
||||
useMemo,
|
||||
} from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import cn from '@/utils/classnames'
|
||||
import Badge from '@/app/components/base/badge'
|
||||
import {
|
||||
OptionCardEffectBlue,
|
||||
OptionCardEffectBlueLight,
|
||||
OptionCardEffectOrange,
|
||||
OptionCardEffectPurple,
|
||||
OptionCardEffectTeal,
|
||||
} from '@/app/components/base/icons/src/public/knowledge'
|
||||
import { ArrowShape } from '@/app/components/base/icons/src/vender/knowledge'
|
||||
|
||||
const HEADER_EFFECT_MAP: Record<string, ReactNode> = {
|
||||
'blue': <OptionCardEffectBlue />,
|
||||
'blue-light': <OptionCardEffectBlueLight />,
|
||||
'orange': <OptionCardEffectOrange />,
|
||||
'purple': <OptionCardEffectPurple />,
|
||||
'teal': <OptionCardEffectTeal />,
|
||||
}
|
||||
type OptionCardProps<T> = {
|
||||
id?: T
|
||||
selectedId?: T
|
||||
enableSelect?: boolean
|
||||
enableHighlightBorder?: boolean
|
||||
enableRadio?: boolean
|
||||
wrapperClassName?: string | ((isActive: boolean) => string)
|
||||
className?: string | ((isActive: boolean) => string)
|
||||
icon?: ReactNode | ((isActive: boolean) => ReactNode)
|
||||
title: string
|
||||
description?: string
|
||||
isRecommended?: boolean
|
||||
children?: ReactNode
|
||||
effectColor?: string
|
||||
onClick?: (id: T) => void
|
||||
readonly?: boolean
|
||||
}
|
||||
const OptionCard = memo(({
|
||||
id,
|
||||
selectedId,
|
||||
enableSelect = true,
|
||||
enableHighlightBorder = true,
|
||||
enableRadio,
|
||||
wrapperClassName,
|
||||
className,
|
||||
icon,
|
||||
title,
|
||||
description,
|
||||
isRecommended,
|
||||
children,
|
||||
effectColor,
|
||||
onClick,
|
||||
readonly,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const isActive = useMemo(() => {
|
||||
return id === selectedId
|
||||
}, [id, selectedId])
|
||||
|
||||
const effectElement = useMemo(() => {
|
||||
if (effectColor) {
|
||||
return (
|
||||
<div className={cn(
|
||||
'absolute left-[-2px] top-[-2px] hidden h-14 w-14 rounded-full',
|
||||
'group-hover:block',
|
||||
isActive && 'block',
|
||||
)}>
|
||||
{HEADER_EFFECT_MAP[effectColor]}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return null
|
||||
}, [effectColor, isActive])
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'group overflow-hidden rounded-xl border border-components-option-card-option-border bg-components-option-card-option-bg',
|
||||
isActive && enableHighlightBorder && 'border-[1.5px] border-components-option-card-option-selected-border',
|
||||
enableSelect && 'cursor-pointer hover:shadow-xs',
|
||||
readonly && 'cursor-not-allowed',
|
||||
wrapperClassName && (typeof wrapperClassName === 'function' ? wrapperClassName(isActive) : wrapperClassName),
|
||||
)}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
if (!readonly && enableSelect && id)
|
||||
onClick?.(id)
|
||||
}}
|
||||
>
|
||||
<div className={cn(
|
||||
'relative flex rounded-t-xl p-2',
|
||||
className && (typeof className === 'function' ? className(isActive) : className),
|
||||
)}>
|
||||
{effectElement}
|
||||
{
|
||||
icon && (
|
||||
<div className='mr-1 flex h-[18px] w-[18px] shrink-0 items-center justify-center'>
|
||||
{typeof icon === 'function' ? icon(isActive) : icon}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<div className='grow py-1 pt-[1px]'>
|
||||
<div className='flex items-center'>
|
||||
<div className='system-sm-medium flex grow items-center text-text-secondary'>
|
||||
{title}
|
||||
{
|
||||
isRecommended && (
|
||||
<Badge className='ml-1 h-4 border-text-accent-secondary text-text-accent-secondary'>
|
||||
{t('datasetCreation.stepTwo.recommend')}
|
||||
</Badge>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
{
|
||||
enableRadio && (
|
||||
<div className={cn(
|
||||
'ml-2 h-4 w-4 shrink-0 rounded-full border border-components-radio-border bg-components-radio-bg',
|
||||
isActive && 'border-[5px] border-components-radio-border-checked',
|
||||
)}>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
{
|
||||
description && (
|
||||
<div className='system-xs-regular mt-1 text-text-tertiary'>
|
||||
{description}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
{
|
||||
children && isActive && (
|
||||
<div className='relative rounded-b-xl bg-components-panel-bg p-3'>
|
||||
<ArrowShape className='absolute left-[14px] top-[-11px] h-4 w-4 text-components-panel-bg' />
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}) as <T>(props: OptionCardProps<T>) => React.ReactElement
|
||||
|
||||
export default OptionCard
|
||||
@@ -0,0 +1,93 @@
|
||||
import { useMemo } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
FullTextSearch,
|
||||
HybridSearch,
|
||||
VectorSearch,
|
||||
} from '@/app/components/base/icons/src/vender/knowledge'
|
||||
import {
|
||||
HybridSearchModeEnum,
|
||||
IndexMethodEnum,
|
||||
RetrievalSearchMethodEnum,
|
||||
} from '../../types'
|
||||
import type {
|
||||
HybridSearchModeOption,
|
||||
Option,
|
||||
} from './type'
|
||||
|
||||
export const useRetrievalSetting = (indexMethod?: IndexMethodEnum) => {
|
||||
const { t } = useTranslation()
|
||||
const VectorSearchOption: Option = useMemo(() => {
|
||||
return {
|
||||
id: RetrievalSearchMethodEnum.semantic,
|
||||
icon: VectorSearch as any,
|
||||
title: t('dataset.retrieval.semantic_search.title'),
|
||||
description: t('dataset.retrieval.semantic_search.description'),
|
||||
effectColor: 'purple',
|
||||
}
|
||||
}, [t])
|
||||
const FullTextSearchOption: Option = useMemo(() => {
|
||||
return {
|
||||
id: RetrievalSearchMethodEnum.fullText,
|
||||
icon: FullTextSearch as any,
|
||||
title: t('dataset.retrieval.full_text_search.title'),
|
||||
description: t('dataset.retrieval.full_text_search.description'),
|
||||
effectColor: 'purple',
|
||||
}
|
||||
}, [t])
|
||||
const HybridSearchOption: Option = useMemo(() => {
|
||||
return {
|
||||
id: RetrievalSearchMethodEnum.hybrid,
|
||||
icon: HybridSearch as any,
|
||||
title: t('dataset.retrieval.hybrid_search.title'),
|
||||
description: t('dataset.retrieval.hybrid_search.description'),
|
||||
effectColor: 'purple',
|
||||
}
|
||||
}, [t])
|
||||
const InvertedIndexOption: Option = useMemo(() => {
|
||||
return {
|
||||
id: RetrievalSearchMethodEnum.keywordSearch,
|
||||
icon: HybridSearch as any,
|
||||
title: t('dataset.retrieval.keyword_search.title'),
|
||||
description: t('dataset.retrieval.keyword_search.description'),
|
||||
effectColor: 'purple',
|
||||
}
|
||||
}, [t])
|
||||
|
||||
const WeightedScoreModeOption: HybridSearchModeOption = useMemo(() => {
|
||||
return {
|
||||
id: HybridSearchModeEnum.WeightedScore,
|
||||
title: t('dataset.weightedScore.title'),
|
||||
description: t('dataset.weightedScore.description'),
|
||||
}
|
||||
}, [t])
|
||||
const RerankModelModeOption: HybridSearchModeOption = useMemo(() => {
|
||||
return {
|
||||
id: HybridSearchModeEnum.RerankingModel,
|
||||
title: t('common.modelProvider.rerankModel.key'),
|
||||
description: t('common.modelProvider.rerankModel.tip'),
|
||||
}
|
||||
}, [t])
|
||||
|
||||
return useMemo(() => ({
|
||||
options: indexMethod === IndexMethodEnum.ECONOMICAL ? [
|
||||
InvertedIndexOption,
|
||||
] : [
|
||||
VectorSearchOption,
|
||||
FullTextSearchOption,
|
||||
HybridSearchOption,
|
||||
],
|
||||
hybridSearchModeOptions: [
|
||||
WeightedScoreModeOption,
|
||||
RerankModelModeOption,
|
||||
],
|
||||
}), [
|
||||
VectorSearchOption,
|
||||
FullTextSearchOption,
|
||||
HybridSearchOption,
|
||||
InvertedIndexOption,
|
||||
indexMethod,
|
||||
WeightedScoreModeOption,
|
||||
RerankModelModeOption,
|
||||
])
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
import {
|
||||
memo,
|
||||
} from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Field } from '@/app/components/workflow/nodes/_base/components/layout'
|
||||
import type {
|
||||
HybridSearchModeEnum,
|
||||
RetrievalSearchMethodEnum,
|
||||
} from '../../types'
|
||||
import type {
|
||||
IndexMethodEnum,
|
||||
WeightedScore,
|
||||
} from '../../types'
|
||||
import { useRetrievalSetting } from './hooks'
|
||||
import type { TopKAndScoreThresholdProps } from './top-k-and-score-threshold'
|
||||
import type { RerankingModelSelectorProps } from './reranking-model-selector'
|
||||
import SearchMethodOption from './search-method-option'
|
||||
|
||||
type RetrievalSettingProps = {
|
||||
indexMethod?: IndexMethodEnum
|
||||
readonly?: boolean
|
||||
searchMethod?: RetrievalSearchMethodEnum
|
||||
onRetrievalSearchMethodChange: (value: RetrievalSearchMethodEnum) => void
|
||||
hybridSearchMode?: HybridSearchModeEnum
|
||||
onHybridSearchModeChange: (value: HybridSearchModeEnum) => void
|
||||
rerankingModelEnabled?: boolean
|
||||
onRerankingModelEnabledChange?: (value: boolean) => void
|
||||
weightedScore?: WeightedScore
|
||||
onWeightedScoreChange: (value: { value: number[] }) => void
|
||||
} & RerankingModelSelectorProps & TopKAndScoreThresholdProps
|
||||
|
||||
const RetrievalSetting = ({
|
||||
indexMethod,
|
||||
readonly,
|
||||
searchMethod,
|
||||
onRetrievalSearchMethodChange,
|
||||
hybridSearchMode,
|
||||
onHybridSearchModeChange,
|
||||
weightedScore,
|
||||
onWeightedScoreChange,
|
||||
rerankingModelEnabled,
|
||||
onRerankingModelEnabledChange,
|
||||
rerankingModel,
|
||||
onRerankingModelChange,
|
||||
topK,
|
||||
onTopKChange,
|
||||
scoreThreshold,
|
||||
onScoreThresholdChange,
|
||||
isScoreThresholdEnabled,
|
||||
onScoreThresholdEnabledChange,
|
||||
}: RetrievalSettingProps) => {
|
||||
const { t } = useTranslation()
|
||||
const {
|
||||
options,
|
||||
hybridSearchModeOptions,
|
||||
} = useRetrievalSetting(indexMethod)
|
||||
|
||||
return (
|
||||
<Field
|
||||
fieldTitleProps={{
|
||||
title: t('datasetSettings.form.retrievalSetting.title'),
|
||||
subTitle: (
|
||||
<div className='body-xs-regular flex items-center 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('workflow.nodes.knowledgeBase.aboutRetrieval')}
|
||||
</div>
|
||||
),
|
||||
}}
|
||||
>
|
||||
<div className='space-y-1'>
|
||||
{
|
||||
options.map(option => (
|
||||
<SearchMethodOption
|
||||
key={option.id}
|
||||
option={option}
|
||||
hybridSearchModeOptions={hybridSearchModeOptions}
|
||||
searchMethod={searchMethod}
|
||||
onRetrievalSearchMethodChange={onRetrievalSearchMethodChange}
|
||||
hybridSearchMode={hybridSearchMode}
|
||||
onHybridSearchModeChange={onHybridSearchModeChange}
|
||||
weightedScore={weightedScore}
|
||||
onWeightedScoreChange={onWeightedScoreChange}
|
||||
topK={topK}
|
||||
onTopKChange={onTopKChange}
|
||||
scoreThreshold={scoreThreshold}
|
||||
onScoreThresholdChange={onScoreThresholdChange}
|
||||
isScoreThresholdEnabled={isScoreThresholdEnabled}
|
||||
onScoreThresholdEnabledChange={onScoreThresholdEnabledChange}
|
||||
rerankingModelEnabled={rerankingModelEnabled}
|
||||
onRerankingModelEnabledChange={onRerankingModelEnabledChange}
|
||||
rerankingModel={rerankingModel}
|
||||
onRerankingModelChange={onRerankingModelChange}
|
||||
readonly={readonly}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</Field>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(RetrievalSetting)
|
||||
@@ -0,0 +1,52 @@
|
||||
import {
|
||||
memo,
|
||||
useMemo,
|
||||
} from 'react'
|
||||
import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
|
||||
import { useModelListAndDefaultModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
|
||||
import type { DefaultModel } from '@/app/components/header/account-setting/model-provider-page/declarations'
|
||||
import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
|
||||
import type { RerankingModel } from '../../types'
|
||||
|
||||
export type RerankingModelSelectorProps = {
|
||||
rerankingModel?: RerankingModel
|
||||
onRerankingModelChange?: (model: RerankingModel) => void
|
||||
readonly?: boolean
|
||||
}
|
||||
const RerankingModelSelector = ({
|
||||
rerankingModel,
|
||||
onRerankingModelChange,
|
||||
readonly = false,
|
||||
}: RerankingModelSelectorProps) => {
|
||||
const {
|
||||
modelList: rerankModelList,
|
||||
} = useModelListAndDefaultModel(ModelTypeEnum.rerank)
|
||||
const rerankModel = useMemo(() => {
|
||||
if (!rerankingModel)
|
||||
return undefined
|
||||
|
||||
return {
|
||||
providerName: rerankingModel.reranking_provider_name,
|
||||
modelName: rerankingModel.reranking_model_name,
|
||||
}
|
||||
}, [rerankingModel])
|
||||
|
||||
const handleRerankingModelChange = (model: DefaultModel) => {
|
||||
onRerankingModelChange?.({
|
||||
reranking_provider_name: model.provider,
|
||||
reranking_model_name: model.model,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<ModelSelector
|
||||
defaultModel={rerankModel && { provider: rerankModel.providerName, model: rerankModel.modelName }}
|
||||
modelList={rerankModelList}
|
||||
onSelect={handleRerankingModelChange}
|
||||
readonly={readonly}
|
||||
showDeprecatedWarnIcon
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(RerankingModelSelector)
|
||||
@@ -0,0 +1,204 @@
|
||||
import {
|
||||
memo,
|
||||
useCallback,
|
||||
useMemo,
|
||||
} from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import cn from '@/utils/classnames'
|
||||
import WeightedScoreComponent from '@/app/components/app/configuration/dataset-config/params-config/weighted-score'
|
||||
import { DEFAULT_WEIGHTED_SCORE } from '@/models/datasets'
|
||||
import Switch from '@/app/components/base/switch'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import {
|
||||
HybridSearchModeEnum,
|
||||
RetrievalSearchMethodEnum,
|
||||
} from '../../types'
|
||||
import type {
|
||||
WeightedScore,
|
||||
} from '../../types'
|
||||
import OptionCard from '../option-card'
|
||||
import type {
|
||||
HybridSearchModeOption,
|
||||
Option,
|
||||
} from './type'
|
||||
import type { TopKAndScoreThresholdProps } from './top-k-and-score-threshold'
|
||||
import TopKAndScoreThreshold from './top-k-and-score-threshold'
|
||||
import type { RerankingModelSelectorProps } from './reranking-model-selector'
|
||||
import RerankingModelSelector from './reranking-model-selector'
|
||||
|
||||
type SearchMethodOptionProps = {
|
||||
readonly?: boolean
|
||||
option: Option
|
||||
hybridSearchModeOptions: HybridSearchModeOption[]
|
||||
searchMethod?: RetrievalSearchMethodEnum
|
||||
onRetrievalSearchMethodChange: (value: RetrievalSearchMethodEnum) => void
|
||||
hybridSearchMode?: HybridSearchModeEnum
|
||||
onHybridSearchModeChange: (value: HybridSearchModeEnum) => void
|
||||
weightedScore?: WeightedScore
|
||||
onWeightedScoreChange: (value: { value: number[] }) => void
|
||||
rerankingModelEnabled?: boolean
|
||||
onRerankingModelEnabledChange?: (value: boolean) => void
|
||||
} & RerankingModelSelectorProps & TopKAndScoreThresholdProps
|
||||
const SearchMethodOption = ({
|
||||
readonly,
|
||||
option,
|
||||
hybridSearchModeOptions,
|
||||
searchMethod,
|
||||
onRetrievalSearchMethodChange,
|
||||
hybridSearchMode,
|
||||
onHybridSearchModeChange,
|
||||
weightedScore,
|
||||
onWeightedScoreChange,
|
||||
rerankingModelEnabled,
|
||||
onRerankingModelEnabledChange,
|
||||
rerankingModel,
|
||||
onRerankingModelChange,
|
||||
topK,
|
||||
onTopKChange,
|
||||
scoreThreshold,
|
||||
onScoreThresholdChange,
|
||||
isScoreThresholdEnabled,
|
||||
onScoreThresholdEnabledChange,
|
||||
}: SearchMethodOptionProps) => {
|
||||
const { t } = useTranslation()
|
||||
const Icon = option.icon
|
||||
const isHybridSearch = option.id === RetrievalSearchMethodEnum.hybrid
|
||||
const isHybridSearchWeightedScoreMode = hybridSearchMode === HybridSearchModeEnum.WeightedScore
|
||||
|
||||
const weightedScoreValue = useMemo(() => {
|
||||
const sematicWeightedScore = weightedScore?.vector_setting.vector_weight ?? DEFAULT_WEIGHTED_SCORE.other.semantic
|
||||
const keywordWeightedScore = weightedScore?.keyword_setting.keyword_weight ?? DEFAULT_WEIGHTED_SCORE.other.keyword
|
||||
const mergedValue = [sematicWeightedScore, keywordWeightedScore]
|
||||
|
||||
return {
|
||||
value: mergedValue,
|
||||
}
|
||||
}, [weightedScore])
|
||||
|
||||
const icon = useCallback((isActive: boolean) => {
|
||||
return (
|
||||
<Icon
|
||||
className={cn(
|
||||
'h-[15px] w-[15px] text-text-tertiary group-hover:text-util-colors-purple-purple-600',
|
||||
isActive && 'text-util-colors-purple-purple-600',
|
||||
)}
|
||||
/>
|
||||
)
|
||||
}, [Icon])
|
||||
|
||||
const hybridSearchModeWrapperClassName = useCallback((isActive: boolean) => {
|
||||
return isActive ? 'border-[1.5px] bg-components-option-card-option-selected-bg' : ''
|
||||
}, [])
|
||||
|
||||
const showRerankModelSelectorSwitch = useMemo(() => {
|
||||
if (searchMethod === RetrievalSearchMethodEnum.semantic)
|
||||
return true
|
||||
|
||||
if (searchMethod === RetrievalSearchMethodEnum.fullText)
|
||||
return true
|
||||
|
||||
return false
|
||||
}, [searchMethod])
|
||||
const showRerankModelSelector = useMemo(() => {
|
||||
if (searchMethod === RetrievalSearchMethodEnum.semantic)
|
||||
return true
|
||||
|
||||
if (searchMethod === RetrievalSearchMethodEnum.fullText)
|
||||
return true
|
||||
|
||||
if (searchMethod === RetrievalSearchMethodEnum.hybrid && hybridSearchMode !== HybridSearchModeEnum.WeightedScore)
|
||||
return true
|
||||
|
||||
return false
|
||||
}, [hybridSearchMode, searchMethod])
|
||||
|
||||
return (
|
||||
<OptionCard
|
||||
key={option.id}
|
||||
id={option.id}
|
||||
selectedId={searchMethod}
|
||||
icon={icon}
|
||||
title={option.title}
|
||||
description={option.description}
|
||||
effectColor={option.effectColor}
|
||||
isRecommended={option.id === RetrievalSearchMethodEnum.hybrid}
|
||||
onClick={onRetrievalSearchMethodChange}
|
||||
readonly={readonly}
|
||||
>
|
||||
<div className='space-y-3'>
|
||||
{
|
||||
isHybridSearch && (
|
||||
<div className='space-y-1'>
|
||||
{
|
||||
hybridSearchModeOptions.map(hybridOption => (
|
||||
<OptionCard
|
||||
key={hybridOption.id}
|
||||
id={hybridOption.id}
|
||||
selectedId={hybridSearchMode}
|
||||
enableHighlightBorder={false}
|
||||
enableRadio
|
||||
wrapperClassName={hybridSearchModeWrapperClassName}
|
||||
className='p-3'
|
||||
title={hybridOption.title}
|
||||
description={hybridOption.description}
|
||||
onClick={onHybridSearchModeChange}
|
||||
readonly={readonly}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
isHybridSearch && isHybridSearchWeightedScoreMode && (
|
||||
<WeightedScoreComponent
|
||||
value={weightedScoreValue}
|
||||
onChange={onWeightedScoreChange}
|
||||
readonly={readonly}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
showRerankModelSelector && (
|
||||
<div>
|
||||
{
|
||||
showRerankModelSelectorSwitch && (
|
||||
<div className='system-sm-semibold mb-1 flex items-center text-text-secondary'>
|
||||
<Switch
|
||||
className='mr-1'
|
||||
defaultValue={rerankingModelEnabled}
|
||||
onChange={onRerankingModelEnabledChange}
|
||||
disabled={readonly}
|
||||
/>
|
||||
{t('common.modelProvider.rerankModel.key')}
|
||||
<Tooltip
|
||||
triggerClassName='ml-0.5 shrink-0 w-3.5 h-3.5'
|
||||
popupContent={t('common.modelProvider.rerankModel.tip')}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<RerankingModelSelector
|
||||
rerankingModel={rerankingModel}
|
||||
onRerankingModelChange={onRerankingModelChange}
|
||||
readonly={readonly}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<TopKAndScoreThreshold
|
||||
topK={topK}
|
||||
onTopKChange={onTopKChange}
|
||||
scoreThreshold={scoreThreshold}
|
||||
onScoreThresholdChange={onScoreThresholdChange}
|
||||
isScoreThresholdEnabled={isScoreThresholdEnabled}
|
||||
onScoreThresholdEnabledChange={onScoreThresholdEnabledChange}
|
||||
readonly={readonly}
|
||||
hiddenScoreThreshold={searchMethod === RetrievalSearchMethodEnum.keywordSearch}
|
||||
/>
|
||||
</div>
|
||||
</OptionCard>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(SearchMethodOption)
|
||||
@@ -0,0 +1,112 @@
|
||||
import { memo, useCallback } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import Switch from '@/app/components/base/switch'
|
||||
import { InputNumber } from '@/app/components/base/input-number'
|
||||
|
||||
export type TopKAndScoreThresholdProps = {
|
||||
topK: number
|
||||
onTopKChange: (value: number) => void
|
||||
scoreThreshold?: number
|
||||
onScoreThresholdChange?: (value: number) => void
|
||||
isScoreThresholdEnabled?: boolean
|
||||
onScoreThresholdEnabledChange?: (value: boolean) => void
|
||||
readonly?: boolean
|
||||
hiddenScoreThreshold?: boolean
|
||||
}
|
||||
|
||||
const maxTopK = (() => {
|
||||
const configValue = Number.parseInt(globalThis.document?.body?.getAttribute('data-public-top-k-max-value') || '', 10)
|
||||
if (configValue && !isNaN(configValue))
|
||||
return configValue
|
||||
return 10
|
||||
})()
|
||||
const TOP_K_VALUE_LIMIT = {
|
||||
amount: 1,
|
||||
min: 1,
|
||||
max: maxTopK,
|
||||
}
|
||||
const SCORE_THRESHOLD_VALUE_LIMIT = {
|
||||
step: 0.01,
|
||||
min: 0,
|
||||
max: 1,
|
||||
}
|
||||
|
||||
const TopKAndScoreThreshold = ({
|
||||
topK,
|
||||
onTopKChange,
|
||||
scoreThreshold,
|
||||
onScoreThresholdChange,
|
||||
isScoreThresholdEnabled,
|
||||
onScoreThresholdEnabledChange,
|
||||
readonly,
|
||||
hiddenScoreThreshold,
|
||||
}: TopKAndScoreThresholdProps) => {
|
||||
const { t } = useTranslation()
|
||||
const handleTopKChange = useCallback((value: number) => {
|
||||
let notOutRangeValue = Number.parseInt(value.toFixed(0))
|
||||
notOutRangeValue = Math.max(TOP_K_VALUE_LIMIT.min, notOutRangeValue)
|
||||
notOutRangeValue = Math.min(TOP_K_VALUE_LIMIT.max, notOutRangeValue)
|
||||
onTopKChange?.(notOutRangeValue)
|
||||
}, [onTopKChange])
|
||||
|
||||
const handleScoreThresholdChange = (value: number) => {
|
||||
let notOutRangeValue = Number.parseFloat(value.toFixed(2))
|
||||
notOutRangeValue = Math.max(SCORE_THRESHOLD_VALUE_LIMIT.min, notOutRangeValue)
|
||||
notOutRangeValue = Math.min(SCORE_THRESHOLD_VALUE_LIMIT.max, notOutRangeValue)
|
||||
onScoreThresholdChange?.(notOutRangeValue)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='grid grid-cols-2 gap-4'>
|
||||
<div>
|
||||
<div className='system-xs-medium mb-0.5 flex h-6 items-center text-text-secondary'>
|
||||
{t('appDebug.datasetConfig.top_k')}
|
||||
<Tooltip
|
||||
triggerClassName='ml-0.5 shrink-0 w-3.5 h-3.5'
|
||||
popupContent={t('appDebug.datasetConfig.top_kTip')}
|
||||
/>
|
||||
</div>
|
||||
<InputNumber
|
||||
disabled={readonly}
|
||||
type='number'
|
||||
{...TOP_K_VALUE_LIMIT}
|
||||
size='regular'
|
||||
value={topK}
|
||||
onChange={handleTopKChange}
|
||||
/>
|
||||
</div>
|
||||
{
|
||||
!hiddenScoreThreshold && (
|
||||
<div>
|
||||
<div className='mb-0.5 flex h-6 items-center'>
|
||||
<Switch
|
||||
className='mr-2'
|
||||
defaultValue={isScoreThresholdEnabled}
|
||||
onChange={onScoreThresholdEnabledChange}
|
||||
disabled={readonly}
|
||||
/>
|
||||
<div className='system-sm-medium grow truncate text-text-secondary'>
|
||||
{t('appDebug.datasetConfig.score_threshold')}
|
||||
</div>
|
||||
<Tooltip
|
||||
triggerClassName='shrink-0 ml-0.5 w-3.5 h-3.5'
|
||||
popupContent={t('appDebug.datasetConfig.score_thresholdTip')}
|
||||
/>
|
||||
</div>
|
||||
<InputNumber
|
||||
disabled={readonly || !isScoreThresholdEnabled}
|
||||
type='number'
|
||||
{...SCORE_THRESHOLD_VALUE_LIMIT}
|
||||
size='regular'
|
||||
value={scoreThreshold}
|
||||
onChange={handleScoreThresholdChange}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(TopKAndScoreThreshold)
|
||||
@@ -0,0 +1,20 @@
|
||||
import type { ComponentType } from 'react'
|
||||
import type {
|
||||
HybridSearchModeEnum,
|
||||
RetrievalSearchMethodEnum,
|
||||
} from '../../types'
|
||||
|
||||
export type Option = {
|
||||
id: RetrievalSearchMethodEnum
|
||||
icon: ComponentType<any>
|
||||
title: any
|
||||
description: string
|
||||
effectColor?: string
|
||||
showEffectColor?: boolean,
|
||||
}
|
||||
|
||||
export type HybridSearchModeOption = {
|
||||
id: HybridSearchModeEnum
|
||||
title: string
|
||||
description: string
|
||||
}
|
||||
115
dify/web/app/components/workflow/nodes/knowledge-base/default.ts
Normal file
115
dify/web/app/components/workflow/nodes/knowledge-base/default.ts
Normal file
@@ -0,0 +1,115 @@
|
||||
import type { NodeDefault } from '../../types'
|
||||
import type { KnowledgeBaseNodeType } from './types'
|
||||
import { genNodeMetaData } from '@/app/components/workflow/utils'
|
||||
import { BlockEnum } from '@/app/components/workflow/types'
|
||||
import { IndexingType } from '@/app/components/datasets/create/step-two'
|
||||
|
||||
const metaData = genNodeMetaData({
|
||||
sort: 3.1,
|
||||
type: BlockEnum.KnowledgeBase,
|
||||
isRequired: true,
|
||||
isUndeletable: true,
|
||||
isSingleton: true,
|
||||
isTypeFixed: true,
|
||||
})
|
||||
const nodeDefault: NodeDefault<KnowledgeBaseNodeType> = {
|
||||
metaData,
|
||||
defaultValue: {
|
||||
index_chunk_variable_selector: [],
|
||||
keyword_number: 10,
|
||||
retrieval_model: {
|
||||
top_k: 3,
|
||||
score_threshold_enabled: false,
|
||||
score_threshold: 0.5,
|
||||
},
|
||||
},
|
||||
checkValid(payload, t) {
|
||||
const {
|
||||
chunk_structure,
|
||||
indexing_technique,
|
||||
retrieval_model,
|
||||
embedding_model,
|
||||
embedding_model_provider,
|
||||
index_chunk_variable_selector,
|
||||
_embeddingModelList,
|
||||
_rerankModelList,
|
||||
} = payload
|
||||
|
||||
const {
|
||||
search_method,
|
||||
reranking_enable,
|
||||
reranking_model,
|
||||
} = retrieval_model || {}
|
||||
|
||||
const currentEmbeddingModelProvider = _embeddingModelList?.find(provider => provider.provider === embedding_model_provider)
|
||||
const currentEmbeddingModel = currentEmbeddingModelProvider?.models.find(model => model.model === embedding_model)
|
||||
|
||||
const currentRerankingModelProvider = _rerankModelList?.find(provider => provider.provider === reranking_model?.reranking_provider_name)
|
||||
const currentRerankingModel = currentRerankingModelProvider?.models.find(model => model.model === reranking_model?.reranking_model_name)
|
||||
|
||||
if (!chunk_structure) {
|
||||
return {
|
||||
isValid: false,
|
||||
errorMessage: t('workflow.nodes.knowledgeBase.chunkIsRequired'),
|
||||
}
|
||||
}
|
||||
|
||||
if (index_chunk_variable_selector.length === 0) {
|
||||
return {
|
||||
isValid: false,
|
||||
errorMessage: t('workflow.nodes.knowledgeBase.chunksVariableIsRequired'),
|
||||
}
|
||||
}
|
||||
|
||||
if (!indexing_technique) {
|
||||
return {
|
||||
isValid: false,
|
||||
errorMessage: t('workflow.nodes.knowledgeBase.indexMethodIsRequired'),
|
||||
}
|
||||
}
|
||||
|
||||
if (indexing_technique === IndexingType.QUALIFIED) {
|
||||
if (!embedding_model || !embedding_model_provider) {
|
||||
return {
|
||||
isValid: false,
|
||||
errorMessage: t('workflow.nodes.knowledgeBase.embeddingModelIsRequired'),
|
||||
}
|
||||
}
|
||||
else if (!currentEmbeddingModel) {
|
||||
return {
|
||||
isValid: false,
|
||||
errorMessage: t('workflow.nodes.knowledgeBase.embeddingModelIsInvalid'),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!retrieval_model || !search_method) {
|
||||
return {
|
||||
isValid: false,
|
||||
errorMessage: t('workflow.nodes.knowledgeBase.retrievalSettingIsRequired'),
|
||||
}
|
||||
}
|
||||
|
||||
if (reranking_enable) {
|
||||
if (!reranking_model || !reranking_model.reranking_provider_name || !reranking_model.reranking_model_name) {
|
||||
return {
|
||||
isValid: false,
|
||||
errorMessage: t('workflow.nodes.knowledgeBase.rerankingModelIsRequired'),
|
||||
}
|
||||
}
|
||||
else if (!currentRerankingModel) {
|
||||
return {
|
||||
isValid: false,
|
||||
errorMessage: t('workflow.nodes.knowledgeBase.rerankingModelIsInvalid'),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
isValid: true,
|
||||
errorMessage: '',
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
export default nodeDefault
|
||||
@@ -0,0 +1,266 @@
|
||||
import {
|
||||
useCallback,
|
||||
} from 'react'
|
||||
import { produce } from 'immer'
|
||||
import { useStoreApi } from 'reactflow'
|
||||
import { useNodeDataUpdate } from '@/app/components/workflow/hooks'
|
||||
import type { ValueSelector } from '@/app/components/workflow/types'
|
||||
import {
|
||||
ChunkStructureEnum,
|
||||
IndexMethodEnum,
|
||||
RetrievalSearchMethodEnum,
|
||||
WeightedScoreEnum,
|
||||
} from '../types'
|
||||
import type {
|
||||
KnowledgeBaseNodeType,
|
||||
RerankingModel,
|
||||
} from '../types'
|
||||
import {
|
||||
HybridSearchModeEnum,
|
||||
} from '../types'
|
||||
import { isHighQualitySearchMethod } from '../utils'
|
||||
import { DEFAULT_WEIGHTED_SCORE, RerankingModeEnum } from '@/models/datasets'
|
||||
|
||||
export const useConfig = (id: string) => {
|
||||
const store = useStoreApi()
|
||||
const { handleNodeDataUpdateWithSyncDraft } = useNodeDataUpdate()
|
||||
|
||||
const getNodeData = useCallback(() => {
|
||||
const { getNodes } = store.getState()
|
||||
const nodes = getNodes()
|
||||
|
||||
return nodes.find(node => node.id === id)
|
||||
}, [store, id])
|
||||
|
||||
const handleNodeDataUpdate = useCallback((data: Partial<KnowledgeBaseNodeType>) => {
|
||||
handleNodeDataUpdateWithSyncDraft({
|
||||
id,
|
||||
data,
|
||||
})
|
||||
}, [id, handleNodeDataUpdateWithSyncDraft])
|
||||
|
||||
const getDefaultWeights = useCallback(({
|
||||
embeddingModel,
|
||||
embeddingModelProvider,
|
||||
}: {
|
||||
embeddingModel: string
|
||||
embeddingModelProvider: string
|
||||
}) => {
|
||||
return {
|
||||
vector_setting: {
|
||||
vector_weight: DEFAULT_WEIGHTED_SCORE.other.semantic,
|
||||
embedding_provider_name: embeddingModelProvider || '',
|
||||
embedding_model_name: embeddingModel,
|
||||
},
|
||||
keyword_setting: {
|
||||
keyword_weight: DEFAULT_WEIGHTED_SCORE.other.keyword,
|
||||
},
|
||||
}
|
||||
}, [])
|
||||
|
||||
const handleChunkStructureChange = useCallback((chunkStructure: ChunkStructureEnum) => {
|
||||
const nodeData = getNodeData()
|
||||
const {
|
||||
indexing_technique,
|
||||
retrieval_model,
|
||||
chunk_structure,
|
||||
index_chunk_variable_selector,
|
||||
} = nodeData?.data || {}
|
||||
const { search_method } = retrieval_model || {}
|
||||
handleNodeDataUpdate({
|
||||
chunk_structure: chunkStructure,
|
||||
indexing_technique: (chunkStructure === ChunkStructureEnum.parent_child || chunkStructure === ChunkStructureEnum.question_answer) ? IndexMethodEnum.QUALIFIED : indexing_technique,
|
||||
retrieval_model: {
|
||||
...retrieval_model,
|
||||
search_method: ((chunkStructure === ChunkStructureEnum.parent_child || chunkStructure === ChunkStructureEnum.question_answer) && !isHighQualitySearchMethod(search_method)) ? RetrievalSearchMethodEnum.keywordSearch : search_method,
|
||||
},
|
||||
index_chunk_variable_selector: chunkStructure === chunk_structure ? index_chunk_variable_selector : [],
|
||||
})
|
||||
}, [handleNodeDataUpdate, getNodeData])
|
||||
|
||||
const handleIndexMethodChange = useCallback((indexMethod: IndexMethodEnum) => {
|
||||
const nodeData = getNodeData()
|
||||
|
||||
handleNodeDataUpdate(produce(nodeData?.data as KnowledgeBaseNodeType, (draft) => {
|
||||
draft.indexing_technique = indexMethod
|
||||
|
||||
if (indexMethod === IndexMethodEnum.ECONOMICAL)
|
||||
draft.retrieval_model.search_method = RetrievalSearchMethodEnum.keywordSearch
|
||||
else if (indexMethod === IndexMethodEnum.QUALIFIED)
|
||||
draft.retrieval_model.search_method = RetrievalSearchMethodEnum.semantic
|
||||
}))
|
||||
}, [handleNodeDataUpdate, getNodeData])
|
||||
|
||||
const handleKeywordNumberChange = useCallback((keywordNumber: number) => {
|
||||
handleNodeDataUpdate({ keyword_number: keywordNumber })
|
||||
}, [handleNodeDataUpdate])
|
||||
|
||||
const handleEmbeddingModelChange = useCallback(({
|
||||
embeddingModel,
|
||||
embeddingModelProvider,
|
||||
}: {
|
||||
embeddingModel: string
|
||||
embeddingModelProvider: string
|
||||
}) => {
|
||||
const nodeData = getNodeData()
|
||||
const defaultWeights = getDefaultWeights({
|
||||
embeddingModel,
|
||||
embeddingModelProvider,
|
||||
})
|
||||
const changeData = {
|
||||
embedding_model: embeddingModel,
|
||||
embedding_model_provider: embeddingModelProvider,
|
||||
retrieval_model: {
|
||||
...nodeData?.data.retrieval_model,
|
||||
},
|
||||
}
|
||||
if (changeData.retrieval_model.weights) {
|
||||
changeData.retrieval_model = {
|
||||
...changeData.retrieval_model,
|
||||
weights: {
|
||||
...changeData.retrieval_model.weights,
|
||||
vector_setting: {
|
||||
...changeData.retrieval_model.weights.vector_setting,
|
||||
embedding_provider_name: embeddingModelProvider,
|
||||
embedding_model_name: embeddingModel,
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
else {
|
||||
changeData.retrieval_model = {
|
||||
...changeData.retrieval_model,
|
||||
weights: defaultWeights,
|
||||
}
|
||||
}
|
||||
handleNodeDataUpdate(changeData)
|
||||
}, [getNodeData, getDefaultWeights, handleNodeDataUpdate])
|
||||
|
||||
const handleRetrievalSearchMethodChange = useCallback((searchMethod: RetrievalSearchMethodEnum) => {
|
||||
const nodeData = getNodeData()
|
||||
const changeData = {
|
||||
retrieval_model: {
|
||||
...nodeData?.data.retrieval_model,
|
||||
search_method: searchMethod,
|
||||
reranking_mode: nodeData?.data.retrieval_model.reranking_mode || RerankingModeEnum.RerankingModel,
|
||||
},
|
||||
}
|
||||
if (searchMethod === RetrievalSearchMethodEnum.hybrid) {
|
||||
changeData.retrieval_model = {
|
||||
...changeData.retrieval_model,
|
||||
reranking_enable: changeData.retrieval_model.reranking_mode === RerankingModeEnum.RerankingModel,
|
||||
}
|
||||
}
|
||||
handleNodeDataUpdate(changeData)
|
||||
}, [getNodeData, handleNodeDataUpdate])
|
||||
|
||||
const handleHybridSearchModeChange = useCallback((hybridSearchMode: HybridSearchModeEnum) => {
|
||||
const nodeData = getNodeData()
|
||||
const defaultWeights = getDefaultWeights({
|
||||
embeddingModel: nodeData?.data.embedding_model || '',
|
||||
embeddingModelProvider: nodeData?.data.embedding_model_provider || '',
|
||||
})
|
||||
handleNodeDataUpdate({
|
||||
retrieval_model: {
|
||||
...nodeData?.data.retrieval_model,
|
||||
reranking_mode: hybridSearchMode,
|
||||
reranking_enable: hybridSearchMode === HybridSearchModeEnum.RerankingModel,
|
||||
weights: nodeData?.data.retrieval_model.weights || defaultWeights,
|
||||
},
|
||||
})
|
||||
}, [getNodeData, getDefaultWeights, handleNodeDataUpdate])
|
||||
|
||||
const handleRerankingModelEnabledChange = useCallback((rerankingModelEnabled: boolean) => {
|
||||
const nodeData = getNodeData()
|
||||
handleNodeDataUpdate({
|
||||
retrieval_model: {
|
||||
...nodeData?.data.retrieval_model,
|
||||
reranking_enable: rerankingModelEnabled,
|
||||
},
|
||||
})
|
||||
}, [getNodeData, handleNodeDataUpdate])
|
||||
|
||||
const handleWeighedScoreChange = useCallback((weightedScore: { value: number[] }) => {
|
||||
const nodeData = getNodeData()
|
||||
handleNodeDataUpdate({
|
||||
retrieval_model: {
|
||||
...nodeData?.data.retrieval_model,
|
||||
weights: {
|
||||
weight_type: WeightedScoreEnum.Customized,
|
||||
vector_setting: {
|
||||
...nodeData?.data.retrieval_model.weights?.vector_setting,
|
||||
vector_weight: weightedScore.value[0],
|
||||
},
|
||||
keyword_setting: {
|
||||
keyword_weight: weightedScore.value[1],
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
}, [getNodeData, handleNodeDataUpdate])
|
||||
|
||||
const handleRerankingModelChange = useCallback((rerankingModel: RerankingModel) => {
|
||||
const nodeData = getNodeData()
|
||||
handleNodeDataUpdate({
|
||||
retrieval_model: {
|
||||
...nodeData?.data.retrieval_model,
|
||||
reranking_model: {
|
||||
reranking_provider_name: rerankingModel.reranking_provider_name,
|
||||
reranking_model_name: rerankingModel.reranking_model_name,
|
||||
},
|
||||
},
|
||||
})
|
||||
}, [getNodeData, handleNodeDataUpdate])
|
||||
|
||||
const handleTopKChange = useCallback((topK: number) => {
|
||||
const nodeData = getNodeData()
|
||||
handleNodeDataUpdate({
|
||||
retrieval_model: {
|
||||
...nodeData?.data.retrieval_model,
|
||||
top_k: topK,
|
||||
},
|
||||
})
|
||||
}, [getNodeData, handleNodeDataUpdate])
|
||||
|
||||
const handleScoreThresholdChange = useCallback((scoreThreshold: number) => {
|
||||
const nodeData = getNodeData()
|
||||
handleNodeDataUpdate({
|
||||
retrieval_model: {
|
||||
...nodeData?.data.retrieval_model,
|
||||
score_threshold: scoreThreshold,
|
||||
},
|
||||
})
|
||||
}, [getNodeData, handleNodeDataUpdate])
|
||||
|
||||
const handleScoreThresholdEnabledChange = useCallback((isEnabled: boolean) => {
|
||||
const nodeData = getNodeData()
|
||||
handleNodeDataUpdate({
|
||||
retrieval_model: {
|
||||
...nodeData?.data.retrieval_model,
|
||||
score_threshold_enabled: isEnabled,
|
||||
},
|
||||
})
|
||||
}, [getNodeData, handleNodeDataUpdate])
|
||||
|
||||
const handleInputVariableChange = useCallback((inputVariable: string | ValueSelector) => {
|
||||
handleNodeDataUpdate({
|
||||
index_chunk_variable_selector: Array.isArray(inputVariable) ? inputVariable : [],
|
||||
})
|
||||
}, [handleNodeDataUpdate])
|
||||
|
||||
return {
|
||||
handleChunkStructureChange,
|
||||
handleIndexMethodChange,
|
||||
handleKeywordNumberChange,
|
||||
handleEmbeddingModelChange,
|
||||
handleRetrievalSearchMethodChange,
|
||||
handleHybridSearchModeChange,
|
||||
handleRerankingModelEnabledChange,
|
||||
handleWeighedScoreChange,
|
||||
handleRerankingModelChange,
|
||||
handleTopKChange,
|
||||
handleScoreThresholdChange,
|
||||
handleScoreThresholdEnabledChange,
|
||||
handleInputVariableChange,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import {
|
||||
IndexMethodEnum,
|
||||
RetrievalSearchMethodEnum,
|
||||
} from '../types'
|
||||
|
||||
export const useSettingsDisplay = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return {
|
||||
[IndexMethodEnum.QUALIFIED]: t('datasetCreation.stepTwo.qualified'),
|
||||
[IndexMethodEnum.ECONOMICAL]: t('datasetSettings.form.indexMethodEconomy'),
|
||||
[RetrievalSearchMethodEnum.semantic]: t('dataset.retrieval.semantic_search.title'),
|
||||
[RetrievalSearchMethodEnum.fullText]: t('dataset.retrieval.full_text_search.title'),
|
||||
[RetrievalSearchMethodEnum.hybrid]: t('dataset.retrieval.hybrid_search.title'),
|
||||
[RetrievalSearchMethodEnum.keywordSearch]: t('dataset.retrieval.keyword_search.title'),
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
import type { FC } from 'react'
|
||||
import { memo } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import type { KnowledgeBaseNodeType } from './types'
|
||||
import { useSettingsDisplay } from './hooks/use-settings-display'
|
||||
import type { NodeProps } from '@/app/components/workflow/types'
|
||||
|
||||
const Node: FC<NodeProps<KnowledgeBaseNodeType>> = ({ data }) => {
|
||||
const { t } = useTranslation()
|
||||
const settingsDisplay = useSettingsDisplay()
|
||||
|
||||
return (
|
||||
<div className='mb-1 space-y-0.5 px-3 py-1'>
|
||||
<div className='flex h-6 items-center rounded-md bg-workflow-block-parma-bg px-1.5'>
|
||||
<div className='system-xs-medium-uppercase mr-2 shrink-0 text-text-tertiary'>
|
||||
{t('datasetCreation.stepTwo.indexMode')}
|
||||
</div>
|
||||
<div
|
||||
className='system-xs-medium grow truncate text-right text-text-secondary'
|
||||
title={data.indexing_technique}
|
||||
>
|
||||
{settingsDisplay[data.indexing_technique as keyof typeof settingsDisplay]}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex h-6 items-center rounded-md bg-workflow-block-parma-bg px-1.5'>
|
||||
<div className='system-xs-medium-uppercase mr-2 shrink-0 text-text-tertiary'>
|
||||
{t('datasetSettings.form.retrievalSetting.title')}
|
||||
</div>
|
||||
<div
|
||||
className='system-xs-medium grow truncate text-right text-text-secondary'
|
||||
title={data.retrieval_model?.search_method}
|
||||
>
|
||||
{settingsDisplay[data.retrieval_model?.search_method as keyof typeof settingsDisplay]}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(Node)
|
||||
175
dify/web/app/components/workflow/nodes/knowledge-base/panel.tsx
Normal file
175
dify/web/app/components/workflow/nodes/knowledge-base/panel.tsx
Normal file
@@ -0,0 +1,175 @@
|
||||
import type { FC } from 'react'
|
||||
import {
|
||||
memo,
|
||||
useCallback,
|
||||
useMemo,
|
||||
} from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import type { KnowledgeBaseNodeType } from './types'
|
||||
import {
|
||||
ChunkStructureEnum,
|
||||
IndexMethodEnum,
|
||||
} from './types'
|
||||
import ChunkStructure from './components/chunk-structure'
|
||||
import IndexMethod from './components/index-method'
|
||||
import RetrievalSetting from './components/retrieval-setting'
|
||||
import EmbeddingModel from './components/embedding-model'
|
||||
import { useConfig } from './hooks/use-config'
|
||||
import type { NodePanelProps } from '@/app/components/workflow/types'
|
||||
import {
|
||||
BoxGroup,
|
||||
BoxGroupField,
|
||||
Group,
|
||||
} from '@/app/components/workflow/nodes/_base/components/layout'
|
||||
import Split from '../_base/components/split'
|
||||
import { useNodesReadOnly } from '@/app/components/workflow/hooks'
|
||||
import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
|
||||
import type { Var } from '@/app/components/workflow/types'
|
||||
|
||||
const Panel: FC<NodePanelProps<KnowledgeBaseNodeType>> = ({
|
||||
id,
|
||||
data,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const { nodesReadOnly } = useNodesReadOnly()
|
||||
const {
|
||||
handleChunkStructureChange,
|
||||
handleIndexMethodChange,
|
||||
handleKeywordNumberChange,
|
||||
handleEmbeddingModelChange,
|
||||
handleRetrievalSearchMethodChange,
|
||||
handleHybridSearchModeChange,
|
||||
handleRerankingModelEnabledChange,
|
||||
handleWeighedScoreChange,
|
||||
handleRerankingModelChange,
|
||||
handleTopKChange,
|
||||
handleScoreThresholdChange,
|
||||
handleScoreThresholdEnabledChange,
|
||||
handleInputVariableChange,
|
||||
} = useConfig(id)
|
||||
|
||||
const filterVar = useCallback((variable: Var) => {
|
||||
if (!data.chunk_structure) return false
|
||||
switch (data.chunk_structure) {
|
||||
case ChunkStructureEnum.general:
|
||||
return variable.schemaType === 'general_structure'
|
||||
case ChunkStructureEnum.parent_child:
|
||||
return variable.schemaType === 'parent_child_structure'
|
||||
case ChunkStructureEnum.question_answer:
|
||||
return variable.schemaType === 'qa_structure'
|
||||
default:
|
||||
return false
|
||||
}
|
||||
}, [data.chunk_structure])
|
||||
|
||||
const chunkTypePlaceHolder = useMemo(() => {
|
||||
if (!data.chunk_structure) return ''
|
||||
let placeholder = ''
|
||||
switch (data.chunk_structure) {
|
||||
case ChunkStructureEnum.general:
|
||||
placeholder = 'general_structure'
|
||||
break
|
||||
case ChunkStructureEnum.parent_child:
|
||||
placeholder = 'parent_child_structure'
|
||||
break
|
||||
case ChunkStructureEnum.question_answer:
|
||||
placeholder = 'qa_structure'
|
||||
break
|
||||
default:
|
||||
return ''
|
||||
}
|
||||
return placeholder.charAt(0).toUpperCase() + placeholder.slice(1)
|
||||
}, [data.chunk_structure])
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Group
|
||||
className='py-3'
|
||||
withBorderBottom={!!data.chunk_structure}
|
||||
>
|
||||
<ChunkStructure
|
||||
chunkStructure={data.chunk_structure}
|
||||
onChunkStructureChange={handleChunkStructureChange}
|
||||
readonly={nodesReadOnly}
|
||||
/>
|
||||
</Group>
|
||||
{
|
||||
data.chunk_structure && (
|
||||
<>
|
||||
<BoxGroupField
|
||||
boxGroupProps={{
|
||||
boxProps: { withBorderBottom: true },
|
||||
}}
|
||||
fieldProps={{
|
||||
fieldTitleProps: {
|
||||
title: t('workflow.nodes.knowledgeBase.chunksInput'),
|
||||
tooltip: t('workflow.nodes.knowledgeBase.chunksInputTip'),
|
||||
},
|
||||
}}
|
||||
>
|
||||
<VarReferencePicker
|
||||
nodeId={id}
|
||||
isShowNodeName
|
||||
value={data.index_chunk_variable_selector}
|
||||
onChange={handleInputVariableChange}
|
||||
readonly={nodesReadOnly}
|
||||
filterVar={filterVar}
|
||||
isFilterFileVar
|
||||
isSupportFileVar={false}
|
||||
preferSchemaType
|
||||
typePlaceHolder={chunkTypePlaceHolder}
|
||||
/>
|
||||
</BoxGroupField>
|
||||
<BoxGroup>
|
||||
<div className='space-y-3'>
|
||||
<IndexMethod
|
||||
chunkStructure={data.chunk_structure}
|
||||
indexMethod={data.indexing_technique}
|
||||
onIndexMethodChange={handleIndexMethodChange}
|
||||
keywordNumber={data.keyword_number}
|
||||
onKeywordNumberChange={handleKeywordNumberChange}
|
||||
readonly={nodesReadOnly}
|
||||
/>
|
||||
{
|
||||
data.indexing_technique === IndexMethodEnum.QUALIFIED && (
|
||||
<EmbeddingModel
|
||||
embeddingModel={data.embedding_model}
|
||||
embeddingModelProvider={data.embedding_model_provider}
|
||||
onEmbeddingModelChange={handleEmbeddingModelChange}
|
||||
readonly={nodesReadOnly}
|
||||
/>
|
||||
)
|
||||
}
|
||||
<div className='pt-1'>
|
||||
<Split className='h-[1px]' />
|
||||
</div>
|
||||
<RetrievalSetting
|
||||
indexMethod={data.indexing_technique}
|
||||
searchMethod={data.retrieval_model.search_method}
|
||||
onRetrievalSearchMethodChange={handleRetrievalSearchMethodChange}
|
||||
hybridSearchMode={data.retrieval_model.reranking_mode}
|
||||
onHybridSearchModeChange={handleHybridSearchModeChange}
|
||||
weightedScore={data.retrieval_model.weights}
|
||||
onWeightedScoreChange={handleWeighedScoreChange}
|
||||
rerankingModelEnabled={data.retrieval_model.reranking_enable}
|
||||
onRerankingModelEnabledChange={handleRerankingModelEnabledChange}
|
||||
rerankingModel={data.retrieval_model.reranking_model}
|
||||
onRerankingModelChange={handleRerankingModelChange}
|
||||
topK={data.retrieval_model.top_k}
|
||||
onTopKChange={handleTopKChange}
|
||||
scoreThreshold={data.retrieval_model.score_threshold}
|
||||
onScoreThresholdChange={handleScoreThresholdChange}
|
||||
isScoreThresholdEnabled={data.retrieval_model.score_threshold_enabled}
|
||||
onScoreThresholdEnabledChange={handleScoreThresholdEnabledChange}
|
||||
readonly={nodesReadOnly}
|
||||
/>
|
||||
</div>
|
||||
</BoxGroup>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(Panel)
|
||||
@@ -0,0 +1,55 @@
|
||||
import type { CommonNodeType } from '@/app/components/workflow/types'
|
||||
import type { IndexingType } from '@/app/components/datasets/create/step-two'
|
||||
import type { RETRIEVE_METHOD } from '@/types/app'
|
||||
import type { WeightedScoreEnum } from '@/models/datasets'
|
||||
import type { RerankingModeEnum } from '@/models/datasets'
|
||||
import type { Model } from '@/app/components/header/account-setting/model-provider-page/declarations'
|
||||
export { WeightedScoreEnum } from '@/models/datasets'
|
||||
export { IndexingType as IndexMethodEnum } from '@/app/components/datasets/create/step-two'
|
||||
export { RETRIEVE_METHOD as RetrievalSearchMethodEnum } from '@/types/app'
|
||||
export { RerankingModeEnum as HybridSearchModeEnum } from '@/models/datasets'
|
||||
|
||||
export enum ChunkStructureEnum {
|
||||
general = 'text_model',
|
||||
parent_child = 'hierarchical_model',
|
||||
question_answer = 'qa_model',
|
||||
}
|
||||
|
||||
export type RerankingModel = {
|
||||
reranking_provider_name: string
|
||||
reranking_model_name: string
|
||||
}
|
||||
|
||||
export type WeightedScore = {
|
||||
weight_type: WeightedScoreEnum
|
||||
vector_setting: {
|
||||
vector_weight: number
|
||||
embedding_provider_name: string
|
||||
embedding_model_name: string
|
||||
}
|
||||
keyword_setting: {
|
||||
keyword_weight: number
|
||||
}
|
||||
}
|
||||
|
||||
export type RetrievalSetting = {
|
||||
search_method?: RETRIEVE_METHOD
|
||||
reranking_enable?: boolean
|
||||
reranking_model?: RerankingModel
|
||||
weights?: WeightedScore
|
||||
top_k: number
|
||||
score_threshold_enabled: boolean
|
||||
score_threshold: number
|
||||
reranking_mode?: RerankingModeEnum
|
||||
}
|
||||
export type KnowledgeBaseNodeType = CommonNodeType & {
|
||||
index_chunk_variable_selector: string[]
|
||||
chunk_structure?: ChunkStructureEnum
|
||||
indexing_technique?: IndexingType
|
||||
embedding_model?: string
|
||||
embedding_model_provider?: string
|
||||
keyword_number: number
|
||||
retrieval_model: RetrievalSetting
|
||||
_embeddingModelList?: Model[]
|
||||
_rerankModelList?: Model[]
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import type { InputVar, Variable } from '@/app/components/workflow/types'
|
||||
import { InputVarType } from '@/app/components/workflow/types'
|
||||
import { useCallback, useMemo } from 'react'
|
||||
import type { KnowledgeBaseNodeType } from './types'
|
||||
|
||||
type Params = {
|
||||
id: string,
|
||||
payload: KnowledgeBaseNodeType
|
||||
runInputData: Record<string, any>
|
||||
getInputVars: (textList: string[]) => InputVar[]
|
||||
setRunInputData: (data: Record<string, any>) => void
|
||||
toVarInputs: (variables: Variable[]) => InputVar[]
|
||||
}
|
||||
const useSingleRunFormParams = ({
|
||||
payload,
|
||||
runInputData,
|
||||
setRunInputData,
|
||||
}: Params) => {
|
||||
const { t } = useTranslation()
|
||||
const query = runInputData.query
|
||||
const setQuery = useCallback((newQuery: string) => {
|
||||
setRunInputData({
|
||||
...runInputData,
|
||||
query: newQuery,
|
||||
})
|
||||
}, [runInputData, setRunInputData])
|
||||
|
||||
const forms = useMemo(() => {
|
||||
return [
|
||||
{
|
||||
inputs: [{
|
||||
label: t('workflow.nodes.common.inputVars'),
|
||||
variable: 'query',
|
||||
type: InputVarType.paragraph,
|
||||
required: true,
|
||||
}],
|
||||
values: { query },
|
||||
onChange: (keyValue: Record<string, any>) => setQuery(keyValue.query),
|
||||
},
|
||||
]
|
||||
}, [query, setQuery, t])
|
||||
|
||||
const getDependentVars = () => {
|
||||
return [payload.index_chunk_variable_selector]
|
||||
}
|
||||
const getDependentVar = (variable: string) => {
|
||||
if(variable === 'query')
|
||||
return payload.index_chunk_variable_selector
|
||||
}
|
||||
|
||||
return {
|
||||
forms,
|
||||
getDependentVars,
|
||||
getDependentVar,
|
||||
}
|
||||
}
|
||||
|
||||
export default useSingleRunFormParams
|
||||
@@ -0,0 +1,9 @@
|
||||
import {
|
||||
RetrievalSearchMethodEnum,
|
||||
} from './types'
|
||||
|
||||
export const isHighQualitySearchMethod = (searchMethod: RetrievalSearchMethodEnum) => {
|
||||
return searchMethod === RetrievalSearchMethodEnum.semantic
|
||||
|| searchMethod === RetrievalSearchMethodEnum.hybrid
|
||||
|| searchMethod === RetrievalSearchMethodEnum.fullText
|
||||
}
|
||||
Reference in New Issue
Block a user