mirror of https://github.com/langgenius/dify.git
knowledge base node
This commit is contained in:
zxhlyh
parent
53f2882077
commit
abbba1d004
|
|
@ -0,0 +1,12 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="214" height="124" viewBox="0 0 214 124" fill="none">
|
||||
<g opacity="0.5" filter="url(#filter0_f_6128_89310)">
|
||||
<circle cx="26" cy="26" r="28" fill="#6172F3"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_f_6128_89310" x="-162" y="-162" width="376" height="376" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="80" result="effect1_foregroundBlur_6128_89310"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 638 B |
|
|
@ -0,0 +1,12 @@
|
|||
<svg width="220" height="220" viewBox="0 0 220 220" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Effect" opacity="0.8" filter="url(#filter0_f_481_16338)">
|
||||
<circle cx="32" cy="32" r="28" fill="#EF6820"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_f_481_16338" x="-156" y="-156" width="376" height="376" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="80" result="effect1_foregroundBlur_481_16338"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 610 B |
|
|
@ -0,0 +1,12 @@
|
|||
<svg width="220" height="220" viewBox="0 0 220 220" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="Effect" opacity="0.8" filter="url(#filter0_f_481_16453)">
|
||||
<circle cx="32" cy="32" r="28" fill="#6938EF"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_f_481_16453" x="-156" y="-156" width="376" height="376" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
|
||||
<feGaussianBlur stdDeviation="80" result="effect1_foregroundBlur_481_16453"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 610 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="24" height="11" viewBox="0 0 24 11" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path id="Arrow Shape" d="M9.87868 1.12132C11.0503 -0.0502525 12.9497 -0.0502525 14.1213 1.12132L23.3137 10.3137H0.686292L9.87868 1.12132Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 258 B |
|
|
@ -0,0 +1,89 @@
|
|||
{
|
||||
"icon": {
|
||||
"type": "element",
|
||||
"isRootNode": true,
|
||||
"name": "svg",
|
||||
"attributes": {
|
||||
"xmlns": "http://www.w3.org/2000/svg",
|
||||
"width": "214",
|
||||
"height": "124",
|
||||
"viewBox": "0 0 214 124",
|
||||
"fill": "none"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "g",
|
||||
"attributes": {
|
||||
"opacity": "0.5",
|
||||
"filter": "url(#filter0_f_6128_89310)"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "circle",
|
||||
"attributes": {
|
||||
"cx": "26",
|
||||
"cy": "26",
|
||||
"r": "28",
|
||||
"fill": "#6172F3"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "element",
|
||||
"name": "defs",
|
||||
"attributes": {},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "filter",
|
||||
"attributes": {
|
||||
"id": "filter0_f_6128_89310",
|
||||
"x": "-162",
|
||||
"y": "-162",
|
||||
"width": "376",
|
||||
"height": "376",
|
||||
"filterUnits": "userSpaceOnUse",
|
||||
"color-interpolation-filters": "sRGB"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "feFlood",
|
||||
"attributes": {
|
||||
"flood-opacity": "0",
|
||||
"result": "BackgroundImageFix"
|
||||
},
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"type": "element",
|
||||
"name": "feBlend",
|
||||
"attributes": {
|
||||
"mode": "normal",
|
||||
"in": "SourceGraphic",
|
||||
"in2": "BackgroundImageFix",
|
||||
"result": "shape"
|
||||
},
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"type": "element",
|
||||
"name": "feGaussianBlur",
|
||||
"attributes": {
|
||||
"stdDeviation": "80",
|
||||
"result": "effect1_foregroundBlur_6128_89310"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"name": "OptionCardEffectBlue"
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
// GENERATE BY script
|
||||
// DON NOT EDIT IT MANUALLY
|
||||
|
||||
import * as React from 'react'
|
||||
import data from './OptionCardEffectBlue.json'
|
||||
import IconBase from '@/app/components/base/icons/IconBase'
|
||||
import type { IconData } from '@/app/components/base/icons/IconBase'
|
||||
|
||||
const Icon = (
|
||||
{
|
||||
ref,
|
||||
...props
|
||||
}: React.SVGProps<SVGSVGElement> & {
|
||||
ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>;
|
||||
},
|
||||
) => <IconBase {...props} ref={ref} data={data as IconData} />
|
||||
|
||||
Icon.displayName = 'OptionCardEffectBlue'
|
||||
|
||||
export default Icon
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
{
|
||||
"icon": {
|
||||
"type": "element",
|
||||
"isRootNode": true,
|
||||
"name": "svg",
|
||||
"attributes": {
|
||||
"width": "220",
|
||||
"height": "220",
|
||||
"viewBox": "0 0 220 220",
|
||||
"fill": "none",
|
||||
"xmlns": "http://www.w3.org/2000/svg"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "g",
|
||||
"attributes": {
|
||||
"id": "Effect",
|
||||
"opacity": "0.8",
|
||||
"filter": "url(#filter0_f_481_16338)"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "circle",
|
||||
"attributes": {
|
||||
"cx": "32",
|
||||
"cy": "32",
|
||||
"r": "28",
|
||||
"fill": "#EF6820"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "element",
|
||||
"name": "defs",
|
||||
"attributes": {},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "filter",
|
||||
"attributes": {
|
||||
"id": "filter0_f_481_16338",
|
||||
"x": "-156",
|
||||
"y": "-156",
|
||||
"width": "376",
|
||||
"height": "376",
|
||||
"filterUnits": "userSpaceOnUse",
|
||||
"color-interpolation-filters": "sRGB"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "feFlood",
|
||||
"attributes": {
|
||||
"flood-opacity": "0",
|
||||
"result": "BackgroundImageFix"
|
||||
},
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"type": "element",
|
||||
"name": "feBlend",
|
||||
"attributes": {
|
||||
"mode": "normal",
|
||||
"in": "SourceGraphic",
|
||||
"in2": "BackgroundImageFix",
|
||||
"result": "shape"
|
||||
},
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"type": "element",
|
||||
"name": "feGaussianBlur",
|
||||
"attributes": {
|
||||
"stdDeviation": "80",
|
||||
"result": "effect1_foregroundBlur_481_16338"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"name": "OptionCardEffectOrange"
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
// GENERATE BY script
|
||||
// DON NOT EDIT IT MANUALLY
|
||||
|
||||
import * as React from 'react'
|
||||
import data from './OptionCardEffectOrange.json'
|
||||
import IconBase from '@/app/components/base/icons/IconBase'
|
||||
import type { IconData } from '@/app/components/base/icons/IconBase'
|
||||
|
||||
const Icon = (
|
||||
{
|
||||
ref,
|
||||
...props
|
||||
}: React.SVGProps<SVGSVGElement> & {
|
||||
ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>;
|
||||
},
|
||||
) => <IconBase {...props} ref={ref} data={data as IconData} />
|
||||
|
||||
Icon.displayName = 'OptionCardEffectOrange'
|
||||
|
||||
export default Icon
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
{
|
||||
"icon": {
|
||||
"type": "element",
|
||||
"isRootNode": true,
|
||||
"name": "svg",
|
||||
"attributes": {
|
||||
"width": "220",
|
||||
"height": "220",
|
||||
"viewBox": "0 0 220 220",
|
||||
"fill": "none",
|
||||
"xmlns": "http://www.w3.org/2000/svg"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "g",
|
||||
"attributes": {
|
||||
"id": "Effect",
|
||||
"opacity": "0.8",
|
||||
"filter": "url(#filter0_f_481_16453)"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "circle",
|
||||
"attributes": {
|
||||
"cx": "32",
|
||||
"cy": "32",
|
||||
"r": "28",
|
||||
"fill": "#6938EF"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "element",
|
||||
"name": "defs",
|
||||
"attributes": {},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "filter",
|
||||
"attributes": {
|
||||
"id": "filter0_f_481_16453",
|
||||
"x": "-156",
|
||||
"y": "-156",
|
||||
"width": "376",
|
||||
"height": "376",
|
||||
"filterUnits": "userSpaceOnUse",
|
||||
"color-interpolation-filters": "sRGB"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "feFlood",
|
||||
"attributes": {
|
||||
"flood-opacity": "0",
|
||||
"result": "BackgroundImageFix"
|
||||
},
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"type": "element",
|
||||
"name": "feBlend",
|
||||
"attributes": {
|
||||
"mode": "normal",
|
||||
"in": "SourceGraphic",
|
||||
"in2": "BackgroundImageFix",
|
||||
"result": "shape"
|
||||
},
|
||||
"children": []
|
||||
},
|
||||
{
|
||||
"type": "element",
|
||||
"name": "feGaussianBlur",
|
||||
"attributes": {
|
||||
"stdDeviation": "80",
|
||||
"result": "effect1_foregroundBlur_481_16453"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"name": "OptionCardEffectPurple"
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
// GENERATE BY script
|
||||
// DON NOT EDIT IT MANUALLY
|
||||
|
||||
import * as React from 'react'
|
||||
import data from './OptionCardEffectPurple.json'
|
||||
import IconBase from '@/app/components/base/icons/IconBase'
|
||||
import type { IconData } from '@/app/components/base/icons/IconBase'
|
||||
|
||||
const Icon = (
|
||||
{
|
||||
ref,
|
||||
...props
|
||||
}: React.SVGProps<SVGSVGElement> & {
|
||||
ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>;
|
||||
},
|
||||
) => <IconBase {...props} ref={ref} data={data as IconData} />
|
||||
|
||||
Icon.displayName = 'OptionCardEffectPurple'
|
||||
|
||||
export default Icon
|
||||
|
|
@ -3,6 +3,9 @@ export { default as Collapse } from './Collapse'
|
|||
export { default as File } from './File'
|
||||
export { default as GeneralType } from './GeneralType'
|
||||
export { default as LayoutRight2LineMod } from './LayoutRight2LineMod'
|
||||
export { default as OptionCardEffectBlue } from './OptionCardEffectBlue'
|
||||
export { default as OptionCardEffectOrange } from './OptionCardEffectOrange'
|
||||
export { default as OptionCardEffectPurple } from './OptionCardEffectPurple'
|
||||
export { default as ParentChildType } from './ParentChildType'
|
||||
export { default as SelectionMod } from './SelectionMod'
|
||||
export { default as Watercrawl } from './Watercrawl'
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"icon": {
|
||||
"type": "element",
|
||||
"isRootNode": true,
|
||||
"name": "svg",
|
||||
"attributes": {
|
||||
"width": "24",
|
||||
"height": "11",
|
||||
"viewBox": "0 0 24 11",
|
||||
"fill": "none",
|
||||
"xmlns": "http://www.w3.org/2000/svg"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "path",
|
||||
"attributes": {
|
||||
"id": "Arrow Shape",
|
||||
"d": "M9.87868 1.12132C11.0503 -0.0502525 12.9497 -0.0502525 14.1213 1.12132L23.3137 10.3137H0.686292L9.87868 1.12132Z",
|
||||
"fill": "currentColor"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
"name": "ArrowShape"
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
// GENERATE BY script
|
||||
// DON NOT EDIT IT MANUALLY
|
||||
|
||||
import * as React from 'react'
|
||||
import data from './ArrowShape.json'
|
||||
import IconBase from '@/app/components/base/icons/IconBase'
|
||||
import type { IconData } from '@/app/components/base/icons/IconBase'
|
||||
|
||||
const Icon = (
|
||||
{
|
||||
ref,
|
||||
...props
|
||||
}: React.SVGProps<SVGSVGElement> & {
|
||||
ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>;
|
||||
},
|
||||
) => <IconBase {...props} ref={ref} data={data as IconData} />
|
||||
|
||||
Icon.displayName = 'ArrowShape'
|
||||
|
||||
export default Icon
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
export { default as ArrowShape } from './ArrowShape'
|
||||
export { default as Economic } from './Economic'
|
||||
export { default as FullTextSearch } from './FullTextSearch'
|
||||
export { default as HighQuality } from './HighQuality'
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
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 OptionCard from './option-card'
|
||||
|
||||
const IndexMethod = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className='system-sm-semibold-uppercase mb-0.5 flex h-6 items-center text-text-secondary'>Index method</div>
|
||||
<div className='space-y-1'>
|
||||
<OptionCard
|
||||
icon={<HighQuality className='h-[15px] w-[15px] text-util-colors-orange-orange-500' />}
|
||||
title={t('datasetCreation.stepTwo.qualified')}
|
||||
description={t('datasetSettings.form.indexMethodHighQualityTip')}
|
||||
showHighlightBorder
|
||||
></OptionCard>
|
||||
<OptionCard
|
||||
icon={<Economic className='h-[15px] w-[15px] text-text-tertiary' />}
|
||||
title={t('datasetSettings.form.indexMethodEconomy')}
|
||||
description={t('datasetSettings.form.indexMethodEconomyTip')}
|
||||
showChildren
|
||||
showHighlightBorder
|
||||
>
|
||||
<div className='flex items-center'>
|
||||
<div className='flex grow items-center'>
|
||||
<div className='system-xs-medium truncate text-text-secondary'>
|
||||
Number of Keywords
|
||||
</div>
|
||||
<Tooltip
|
||||
popupContent='number of keywords'
|
||||
>
|
||||
<RiQuestionLine className='ml-0.5 h-3.5 w-3.5 text-text-quaternary' />
|
||||
</Tooltip>
|
||||
</div>
|
||||
<Slider
|
||||
className='mr-3 w-24 shrink-0'
|
||||
value={0}
|
||||
onChange={() => {
|
||||
console.log('change')
|
||||
}}
|
||||
/>
|
||||
<Input
|
||||
className='shrink-0'
|
||||
wrapperClassName='shrink-0 w-[72px]'
|
||||
type='number'
|
||||
/>
|
||||
</div>
|
||||
</OptionCard>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default IndexMethod
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
import type { ReactNode } from 'react'
|
||||
import { memo } from 'react'
|
||||
import cn from '@/utils/classnames'
|
||||
import Badge from '@/app/components/base/badge'
|
||||
import { ArrowShape } from '@/app/components/base/icons/src/vender/knowledge'
|
||||
import {
|
||||
OptionCardEffectBlue,
|
||||
OptionCardEffectOrange,
|
||||
OptionCardEffectPurple,
|
||||
} from '@/app/components/base/icons/src/public/knowledge'
|
||||
|
||||
const EffectMap = {
|
||||
blue: <OptionCardEffectBlue className='absolute left-1 top-1 h-14 w-14 fill-util-colors-indigo-indigo-500 text-util-colors-indigo-indigo-500 opacity-80 blur-[80px]' />,
|
||||
orange: <OptionCardEffectOrange className='absolute left-1 top-1 h-14 w-14 opacity-80 blur-[80px]' />,
|
||||
purple: <OptionCardEffectPurple className='absolute left-1 top-1 h-14 w-14 opacity-80 blur-[80px]' />,
|
||||
}
|
||||
type OptionCardProps = {
|
||||
showHighlightBorder?: boolean
|
||||
showRadio?: boolean
|
||||
radioIsActive?: boolean
|
||||
icon?: ReactNode
|
||||
title: string
|
||||
description?: string
|
||||
isRecommended?: boolean
|
||||
children?: ReactNode
|
||||
showChildren?: boolean
|
||||
effectColor?: 'blue' | 'orange' | 'purple'
|
||||
}
|
||||
const OptionCard = ({
|
||||
showHighlightBorder,
|
||||
showRadio,
|
||||
radioIsActive,
|
||||
icon,
|
||||
title,
|
||||
description,
|
||||
isRecommended,
|
||||
children,
|
||||
showChildren,
|
||||
effectColor = 'blue',
|
||||
}: OptionCardProps) => {
|
||||
return (
|
||||
<div className={cn(
|
||||
'cursor-pointer rounded-xl border border-components-option-card-option-border bg-components-option-card-option-bg',
|
||||
showHighlightBorder && 'border-[2px] border-components-option-card-option-selected-border',
|
||||
)}>
|
||||
<div className='relative flex p-2'>
|
||||
{
|
||||
showChildren && (
|
||||
<ArrowShape className='absolute bottom-[-13px] left-[13px] h-4 w-4 text-components-panel-bg' />
|
||||
)
|
||||
}
|
||||
{
|
||||
showChildren && effectColor && EffectMap[effectColor]
|
||||
}
|
||||
{
|
||||
icon && (
|
||||
<div className='mr-1 shrink-0 p-[3px]'>
|
||||
{icon}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<div className='grow py-1'>
|
||||
<div className='flex items-center'>
|
||||
<div className='system-sm-medium flex grow items-center text-text-secondary'>
|
||||
{title}
|
||||
{
|
||||
isRecommended && (
|
||||
<Badge>
|
||||
Recommend
|
||||
</Badge>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
{
|
||||
showRadio && (
|
||||
<div className={cn(
|
||||
'ml-2 h-4 w-4 shrink-0 rounded-full border border-components-radio-border bg-components-radio-bg',
|
||||
radioIsActive && '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 && showChildren && (
|
||||
<div className='p-3'>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(OptionCard)
|
||||
|
|
@ -1,12 +1,17 @@
|
|||
import type { FC } from 'react'
|
||||
import { memo } from 'react'
|
||||
import type { KnowledgeBaseNodeType } from './types'
|
||||
import IndexMethod from './components/index-method'
|
||||
import type { NodePanelProps } from '@/app/components/workflow/types'
|
||||
|
||||
const Panel: FC<NodePanelProps<KnowledgeBaseNodeType>> = () => {
|
||||
return (
|
||||
<div className='mb-2 mt-2 space-y-4 px-4'>
|
||||
Knowledge Base
|
||||
<div>
|
||||
<div className='py-2'>
|
||||
<div className='px-4 py-2'>
|
||||
<IndexMethod />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue