diff --git a/web/app/components/base/icons/assets/public/knowledge/option-card-effect-blue.svg b/web/app/components/base/icons/assets/public/knowledge/option-card-effect-blue.svg new file mode 100644 index 0000000000..f1fb0dfe54 --- /dev/null +++ b/web/app/components/base/icons/assets/public/knowledge/option-card-effect-blue.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/web/app/components/base/icons/assets/public/knowledge/option-card-effect-orange.svg b/web/app/components/base/icons/assets/public/knowledge/option-card-effect-orange.svg new file mode 100644 index 0000000000..d833764f0c --- /dev/null +++ b/web/app/components/base/icons/assets/public/knowledge/option-card-effect-orange.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/web/app/components/base/icons/assets/public/knowledge/option-card-effect-purple.svg b/web/app/components/base/icons/assets/public/knowledge/option-card-effect-purple.svg new file mode 100644 index 0000000000..a7857f8e57 --- /dev/null +++ b/web/app/components/base/icons/assets/public/knowledge/option-card-effect-purple.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/web/app/components/base/icons/assets/vender/knowledge/arrow-shape.svg b/web/app/components/base/icons/assets/vender/knowledge/arrow-shape.svg new file mode 100644 index 0000000000..d2d1ac53b1 --- /dev/null +++ b/web/app/components/base/icons/assets/vender/knowledge/arrow-shape.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/app/components/base/icons/src/public/knowledge/OptionCardEffectBlue.json b/web/app/components/base/icons/src/public/knowledge/OptionCardEffectBlue.json new file mode 100644 index 0000000000..9aa24bdbe6 --- /dev/null +++ b/web/app/components/base/icons/src/public/knowledge/OptionCardEffectBlue.json @@ -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" +} \ No newline at end of file diff --git a/web/app/components/base/icons/src/public/knowledge/OptionCardEffectBlue.tsx b/web/app/components/base/icons/src/public/knowledge/OptionCardEffectBlue.tsx new file mode 100644 index 0000000000..85697f9dae --- /dev/null +++ b/web/app/components/base/icons/src/public/knowledge/OptionCardEffectBlue.tsx @@ -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 & { + ref?: React.RefObject>; + }, +) => + +Icon.displayName = 'OptionCardEffectBlue' + +export default Icon diff --git a/web/app/components/base/icons/src/public/knowledge/OptionCardEffectOrange.json b/web/app/components/base/icons/src/public/knowledge/OptionCardEffectOrange.json new file mode 100644 index 0000000000..08ca31e72f --- /dev/null +++ b/web/app/components/base/icons/src/public/knowledge/OptionCardEffectOrange.json @@ -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" +} \ No newline at end of file diff --git a/web/app/components/base/icons/src/public/knowledge/OptionCardEffectOrange.tsx b/web/app/components/base/icons/src/public/knowledge/OptionCardEffectOrange.tsx new file mode 100644 index 0000000000..bd6cda4470 --- /dev/null +++ b/web/app/components/base/icons/src/public/knowledge/OptionCardEffectOrange.tsx @@ -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 & { + ref?: React.RefObject>; + }, +) => + +Icon.displayName = 'OptionCardEffectOrange' + +export default Icon diff --git a/web/app/components/base/icons/src/public/knowledge/OptionCardEffectPurple.json b/web/app/components/base/icons/src/public/knowledge/OptionCardEffectPurple.json new file mode 100644 index 0000000000..81a7914f52 --- /dev/null +++ b/web/app/components/base/icons/src/public/knowledge/OptionCardEffectPurple.json @@ -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" +} \ No newline at end of file diff --git a/web/app/components/base/icons/src/public/knowledge/OptionCardEffectPurple.tsx b/web/app/components/base/icons/src/public/knowledge/OptionCardEffectPurple.tsx new file mode 100644 index 0000000000..b70808ef8c --- /dev/null +++ b/web/app/components/base/icons/src/public/knowledge/OptionCardEffectPurple.tsx @@ -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 & { + ref?: React.RefObject>; + }, +) => + +Icon.displayName = 'OptionCardEffectPurple' + +export default Icon diff --git a/web/app/components/base/icons/src/public/knowledge/index.ts b/web/app/components/base/icons/src/public/knowledge/index.ts index e6564cd1f2..0b816f3166 100644 --- a/web/app/components/base/icons/src/public/knowledge/index.ts +++ b/web/app/components/base/icons/src/public/knowledge/index.ts @@ -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' diff --git a/web/app/components/base/icons/src/vender/knowledge/ArrowShape.json b/web/app/components/base/icons/src/vender/knowledge/ArrowShape.json new file mode 100644 index 0000000000..417b319696 --- /dev/null +++ b/web/app/components/base/icons/src/vender/knowledge/ArrowShape.json @@ -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" +} \ No newline at end of file diff --git a/web/app/components/base/icons/src/vender/knowledge/ArrowShape.tsx b/web/app/components/base/icons/src/vender/knowledge/ArrowShape.tsx new file mode 100644 index 0000000000..72ae12c7dd --- /dev/null +++ b/web/app/components/base/icons/src/vender/knowledge/ArrowShape.tsx @@ -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 & { + ref?: React.RefObject>; + }, +) => + +Icon.displayName = 'ArrowShape' + +export default Icon diff --git a/web/app/components/base/icons/src/vender/knowledge/index.ts b/web/app/components/base/icons/src/vender/knowledge/index.ts index 580d9c0435..fe405de651 100644 --- a/web/app/components/base/icons/src/vender/knowledge/index.ts +++ b/web/app/components/base/icons/src/vender/knowledge/index.ts @@ -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' diff --git a/web/app/components/workflow/nodes/knowledge-base/components/index-method.tsx b/web/app/components/workflow/nodes/knowledge-base/components/index-method.tsx new file mode 100644 index 0000000000..5b8b4d48ea --- /dev/null +++ b/web/app/components/workflow/nodes/knowledge-base/components/index-method.tsx @@ -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 ( +
+
Index method
+
+ } + title={t('datasetCreation.stepTwo.qualified')} + description={t('datasetSettings.form.indexMethodHighQualityTip')} + showHighlightBorder + > + } + title={t('datasetSettings.form.indexMethodEconomy')} + description={t('datasetSettings.form.indexMethodEconomyTip')} + showChildren + showHighlightBorder + > +
+
+
+ Number of Keywords +
+ + + +
+ { + console.log('change') + }} + /> + +
+ +
+
+ ) +} + +export default IndexMethod diff --git a/web/app/components/workflow/nodes/knowledge-base/components/option-card.tsx b/web/app/components/workflow/nodes/knowledge-base/components/option-card.tsx new file mode 100644 index 0000000000..ea90688221 --- /dev/null +++ b/web/app/components/workflow/nodes/knowledge-base/components/option-card.tsx @@ -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: , + orange: , + purple: , +} +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 ( +
+
+ { + showChildren && ( + + ) + } + { + showChildren && effectColor && EffectMap[effectColor] + } + { + icon && ( +
+ {icon} +
+ ) + } +
+
+
+ {title} + { + isRecommended && ( + + Recommend + + ) + } +
+ { + showRadio && ( +
+
+ ) + } +
+ { + description && ( +
+ {description} +
+ ) + } +
+
+ { + children && showChildren && ( +
+ {children} +
+ ) + } +
+ ) +} + +export default memo(OptionCard) diff --git a/web/app/components/workflow/nodes/knowledge-base/panel.tsx b/web/app/components/workflow/nodes/knowledge-base/panel.tsx index 8303a61a5a..655ee0a52a 100644 --- a/web/app/components/workflow/nodes/knowledge-base/panel.tsx +++ b/web/app/components/workflow/nodes/knowledge-base/panel.tsx @@ -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> = () => { return ( -
- Knowledge Base +
+
+
+ +
+
) }