From cdb615deeb46d02e94f61a3a3735c36a782395a5 Mon Sep 17 00:00:00 2001 From: zxhlyh Date: Mon, 28 Apr 2025 18:36:55 +0800 Subject: [PATCH] knowledge base node --- .../option-card-effect-blue-light.svg | 12 +++ .../knowledge/option-card-effect-blue.svg | 24 ++--- .../knowledge/option-card-effect-purple.svg | 6 +- .../assets/vender/knowledge/economic.svg | 4 +- .../assets/vender/knowledge/general-chunk.svg | 12 +++ .../vender/knowledge/parent-child-chunk.svg | 9 ++ .../vender/knowledge/question-and-answer.svg | 5 + .../knowledge/OptionCardEffectBlue.json | 5 +- .../knowledge/OptionCardEffectBlueLight.json | 90 ++++++++++++++++ .../knowledge/OptionCardEffectBlueLight.tsx | 20 ++++ .../knowledge/OptionCardEffectPurple.json | 6 +- .../base/icons/src/public/knowledge/index.ts | 1 + .../src/vender/knowledge/GeneralChunk.json | 101 ++++++++++++++++++ .../src/vender/knowledge/GeneralChunk.tsx | 20 ++++ .../vender/knowledge/ParentChildChunk.json | 62 +++++++++++ .../src/vender/knowledge/ParentChildChunk.tsx | 20 ++++ .../vender/knowledge/QuestionAndAnswer.json | 38 +++++++ .../vender/knowledge/QuestionAndAnswer.tsx | 20 ++++ .../base/icons/src/vender/knowledge/index.ts | 3 + .../nodes/_base/components/layout/box.tsx | 24 +++++ .../_base/components/layout/field-title.tsx | 38 +++++++ .../nodes/_base/components/layout/field.tsx | 19 ++++ .../components/layout/group-with-box.tsx | 28 +++++ .../nodes/_base/components/layout/group.tsx | 24 +++++ .../nodes/_base/components/layout/index.tsx | 5 + .../components/chunk-structure/constants.ts | 0 .../components/chunk-structure/hooks.tsx | 52 +++++++++ .../components/chunk-structure/index.tsx | 33 ++++++ .../components/chunk-structure/selector.tsx | 69 ++++++++++++ .../components/chunk-structure/type.ts | 10 ++ .../components/embedding-model.tsx | 34 ++++++ .../components/index-method.tsx | 42 ++++++-- .../components/input-variable.tsx | 26 +++++ .../knowledge-base/components/option-card.tsx | 53 +++++---- .../retrieval-setting/full-text-search.tsx | 20 ++++ .../retrieval-setting/hybrid-search.tsx | 21 ++++ .../components/retrieval-setting/index.tsx | 35 ++++++ .../retrieval-setting/vector-search.tsx | 20 ++++ .../workflow/nodes/knowledge-base/panel.tsx | 29 ++++- 39 files changed, 986 insertions(+), 54 deletions(-) create mode 100644 web/app/components/base/icons/assets/public/knowledge/option-card-effect-blue-light.svg create mode 100644 web/app/components/base/icons/assets/vender/knowledge/general-chunk.svg create mode 100644 web/app/components/base/icons/assets/vender/knowledge/parent-child-chunk.svg create mode 100644 web/app/components/base/icons/assets/vender/knowledge/question-and-answer.svg create mode 100644 web/app/components/base/icons/src/public/knowledge/OptionCardEffectBlueLight.json create mode 100644 web/app/components/base/icons/src/public/knowledge/OptionCardEffectBlueLight.tsx create mode 100644 web/app/components/base/icons/src/vender/knowledge/GeneralChunk.json create mode 100644 web/app/components/base/icons/src/vender/knowledge/GeneralChunk.tsx create mode 100644 web/app/components/base/icons/src/vender/knowledge/ParentChildChunk.json create mode 100644 web/app/components/base/icons/src/vender/knowledge/ParentChildChunk.tsx create mode 100644 web/app/components/base/icons/src/vender/knowledge/QuestionAndAnswer.json create mode 100644 web/app/components/base/icons/src/vender/knowledge/QuestionAndAnswer.tsx create mode 100644 web/app/components/workflow/nodes/_base/components/layout/box.tsx create mode 100644 web/app/components/workflow/nodes/_base/components/layout/field-title.tsx create mode 100644 web/app/components/workflow/nodes/_base/components/layout/field.tsx create mode 100644 web/app/components/workflow/nodes/_base/components/layout/group-with-box.tsx create mode 100644 web/app/components/workflow/nodes/_base/components/layout/group.tsx create mode 100644 web/app/components/workflow/nodes/_base/components/layout/index.tsx create mode 100644 web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/constants.ts create mode 100644 web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/hooks.tsx create mode 100644 web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/index.tsx create mode 100644 web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/selector.tsx create mode 100644 web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/type.ts create mode 100644 web/app/components/workflow/nodes/knowledge-base/components/embedding-model.tsx create mode 100644 web/app/components/workflow/nodes/knowledge-base/components/input-variable.tsx create mode 100644 web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/full-text-search.tsx create mode 100644 web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/hybrid-search.tsx create mode 100644 web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/index.tsx create mode 100644 web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/vector-search.tsx diff --git a/web/app/components/base/icons/assets/public/knowledge/option-card-effect-blue-light.svg b/web/app/components/base/icons/assets/public/knowledge/option-card-effect-blue-light.svg new file mode 100644 index 0000000000..81386f2793 --- /dev/null +++ b/web/app/components/base/icons/assets/public/knowledge/option-card-effect-blue-light.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + 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 index f1fb0dfe54..c5cc5e1640 100644 --- 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 @@ -1,12 +1,12 @@ - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + 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 index a7857f8e57..b2cae60e9c 100644 --- 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 @@ -1,12 +1,12 @@ - + - + - + diff --git a/web/app/components/base/icons/assets/vender/knowledge/economic.svg b/web/app/components/base/icons/assets/vender/knowledge/economic.svg index c25dcd6885..6db729b1bc 100644 --- a/web/app/components/base/icons/assets/vender/knowledge/economic.svg +++ b/web/app/components/base/icons/assets/vender/knowledge/economic.svg @@ -1,8 +1,8 @@ - - + + diff --git a/web/app/components/base/icons/assets/vender/knowledge/general-chunk.svg b/web/app/components/base/icons/assets/vender/knowledge/general-chunk.svg new file mode 100644 index 0000000000..fac8d7c699 --- /dev/null +++ b/web/app/components/base/icons/assets/vender/knowledge/general-chunk.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/web/app/components/base/icons/assets/vender/knowledge/parent-child-chunk.svg b/web/app/components/base/icons/assets/vender/knowledge/parent-child-chunk.svg new file mode 100644 index 0000000000..e106b06e19 --- /dev/null +++ b/web/app/components/base/icons/assets/vender/knowledge/parent-child-chunk.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/web/app/components/base/icons/assets/vender/knowledge/question-and-answer.svg b/web/app/components/base/icons/assets/vender/knowledge/question-and-answer.svg new file mode 100644 index 0000000000..4ce2d164cb --- /dev/null +++ b/web/app/components/base/icons/assets/vender/knowledge/question-and-answer.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/web/app/components/base/icons/src/public/knowledge/OptionCardEffectBlue.json b/web/app/components/base/icons/src/public/knowledge/OptionCardEffectBlue.json index 9aa24bdbe6..f9f7018706 100644 --- a/web/app/components/base/icons/src/public/knowledge/OptionCardEffectBlue.json +++ b/web/app/components/base/icons/src/public/knowledge/OptionCardEffectBlue.json @@ -4,17 +4,18 @@ "isRootNode": true, "name": "svg", "attributes": { - "xmlns": "http://www.w3.org/2000/svg", "width": "214", "height": "124", "viewBox": "0 0 214 124", - "fill": "none" + "fill": "none", + "xmlns": "http://www.w3.org/2000/svg" }, "children": [ { "type": "element", "name": "g", "attributes": { + "id": "Effect", "opacity": "0.5", "filter": "url(#filter0_f_6128_89310)" }, diff --git a/web/app/components/base/icons/src/public/knowledge/OptionCardEffectBlueLight.json b/web/app/components/base/icons/src/public/knowledge/OptionCardEffectBlueLight.json new file mode 100644 index 0000000000..7d8935078c --- /dev/null +++ b/web/app/components/base/icons/src/public/knowledge/OptionCardEffectBlueLight.json @@ -0,0 +1,90 @@ +{ + "icon": { + "type": "element", + "isRootNode": true, + "name": "svg", + "attributes": { + "width": "212", + "height": "74", + "viewBox": "0 0 212 74", + "fill": "none", + "xmlns": "http://www.w3.org/2000/svg" + }, + "children": [ + { + "type": "element", + "name": "g", + "attributes": { + "id": "Effect", + "opacity": "0.8", + "filter": "url(#filter0_f_6128_88629)" + }, + "children": [ + { + "type": "element", + "name": "circle", + "attributes": { + "cx": "24", + "cy": "24", + "r": "28", + "fill": "#0BA5EC" + }, + "children": [] + } + ] + }, + { + "type": "element", + "name": "defs", + "attributes": {}, + "children": [ + { + "type": "element", + "name": "filter", + "attributes": { + "id": "filter0_f_6128_88629", + "x": "-164", + "y": "-164", + "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_88629" + }, + "children": [] + } + ] + } + ] + } + ] + }, + "name": "OptionCardEffectBlueLight" +} \ No newline at end of file diff --git a/web/app/components/base/icons/src/public/knowledge/OptionCardEffectBlueLight.tsx b/web/app/components/base/icons/src/public/knowledge/OptionCardEffectBlueLight.tsx new file mode 100644 index 0000000000..bf4264f1bd --- /dev/null +++ b/web/app/components/base/icons/src/public/knowledge/OptionCardEffectBlueLight.tsx @@ -0,0 +1,20 @@ +// GENERATE BY script +// DON NOT EDIT IT MANUALLY + +import * as React from 'react' +import data from './OptionCardEffectBlueLight.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 = 'OptionCardEffectBlueLight' + +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 index 81a7914f52..ae242f8865 100644 --- a/web/app/components/base/icons/src/public/knowledge/OptionCardEffectPurple.json +++ b/web/app/components/base/icons/src/public/knowledge/OptionCardEffectPurple.json @@ -17,7 +17,7 @@ "attributes": { "id": "Effect", "opacity": "0.8", - "filter": "url(#filter0_f_481_16453)" + "filter": "url(#filter0_f_5863_82395)" }, "children": [ { @@ -42,7 +42,7 @@ "type": "element", "name": "filter", "attributes": { - "id": "filter0_f_481_16453", + "id": "filter0_f_5863_82395", "x": "-156", "y": "-156", "width": "376", @@ -76,7 +76,7 @@ "name": "feGaussianBlur", "attributes": { "stdDeviation": "80", - "result": "effect1_foregroundBlur_481_16453" + "result": "effect1_foregroundBlur_5863_82395" }, "children": [] } 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 0b816f3166..51619b16b7 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,7 @@ 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 OptionCardEffectBlueLight } from './OptionCardEffectBlueLight' export { default as OptionCardEffectBlue } from './OptionCardEffectBlue' export { default as OptionCardEffectOrange } from './OptionCardEffectOrange' export { default as OptionCardEffectPurple } from './OptionCardEffectPurple' diff --git a/web/app/components/base/icons/src/vender/knowledge/GeneralChunk.json b/web/app/components/base/icons/src/vender/knowledge/GeneralChunk.json new file mode 100644 index 0000000000..2c59950aa3 --- /dev/null +++ b/web/app/components/base/icons/src/vender/knowledge/GeneralChunk.json @@ -0,0 +1,101 @@ +{ + "icon": { + "type": "element", + "isRootNode": true, + "name": "svg", + "attributes": { + "width": "18", + "height": "18", + "viewBox": "0 0 18 18", + "fill": "none", + "xmlns": "http://www.w3.org/2000/svg" + }, + "children": [ + { + "type": "element", + "name": "g", + "attributes": { + "id": "general" + }, + "children": [ + { + "type": "element", + "name": "g", + "attributes": { + "id": "Vector" + }, + "children": [ + { + "type": "element", + "name": "path", + "attributes": { + "fill-rule": "evenodd", + "clip-rule": "evenodd", + "d": "M12.375 3.75C12.375 3.12868 12.8787 2.625 13.5 2.625H15.75C16.3713 2.625 16.875 3.12868 16.875 3.75C16.875 4.37132 16.3713 4.875 15.75 4.875H13.5C12.8787 4.875 12.375 4.37132 12.375 3.75Z", + "fill": "currentColor" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "fill-rule": "evenodd", + "clip-rule": "evenodd", + "d": "M1.125 3.75C1.125 3.12868 1.62868 2.625 2.25 2.625H9.75C10.3713 2.625 10.875 3.12868 10.875 3.75C10.875 4.37132 10.3713 4.875 9.75 4.875H2.25C1.62868 4.875 1.125 4.37132 1.125 3.75Z", + "fill": "currentColor" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "fill-rule": "evenodd", + "clip-rule": "evenodd", + "d": "M1.125 9C1.125 8.37868 1.62868 7.875 2.25 7.875H4.5C5.12132 7.875 5.625 8.37868 5.625 9C5.625 9.62132 5.12132 10.125 4.5 10.125H2.25C1.62868 10.125 1.125 9.62132 1.125 9Z", + "fill": "currentColor" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "fill-rule": "evenodd", + "clip-rule": "evenodd", + "d": "M7.125 9C7.125 8.37868 7.62868 7.875 8.25 7.875H15.75C16.3713 7.875 16.875 8.37868 16.875 9C16.875 9.62132 16.3713 10.125 15.75 10.125H8.25C7.62868 10.125 7.125 9.62132 7.125 9Z", + "fill": "currentColor" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "fill-rule": "evenodd", + "clip-rule": "evenodd", + "d": "M12.375 14.25C12.375 13.6287 12.8787 13.125 13.5 13.125H15.75C16.3713 13.125 16.875 13.6287 16.875 14.25C16.875 14.8713 16.3713 15.375 15.75 15.375H13.5C12.8787 15.375 12.375 14.8713 12.375 14.25Z", + "fill": "currentColor" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "fill-rule": "evenodd", + "clip-rule": "evenodd", + "d": "M1.125 14.25C1.125 13.6287 1.62868 13.125 2.25 13.125H9.75C10.3713 13.125 10.875 13.6287 10.875 14.25C10.875 14.8713 10.3713 15.375 9.75 15.375H2.25C1.62868 15.375 1.125 14.8713 1.125 14.25Z", + "fill": "currentColor" + }, + "children": [] + } + ] + } + ] + } + ] + }, + "name": "GeneralChunk" +} \ No newline at end of file diff --git a/web/app/components/base/icons/src/vender/knowledge/GeneralChunk.tsx b/web/app/components/base/icons/src/vender/knowledge/GeneralChunk.tsx new file mode 100644 index 0000000000..6e75ed920a --- /dev/null +++ b/web/app/components/base/icons/src/vender/knowledge/GeneralChunk.tsx @@ -0,0 +1,20 @@ +// GENERATE BY script +// DON NOT EDIT IT MANUALLY + +import * as React from 'react' +import data from './GeneralChunk.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 = 'GeneralChunk' + +export default Icon diff --git a/web/app/components/base/icons/src/vender/knowledge/ParentChildChunk.json b/web/app/components/base/icons/src/vender/knowledge/ParentChildChunk.json new file mode 100644 index 0000000000..cea50af24b --- /dev/null +++ b/web/app/components/base/icons/src/vender/knowledge/ParentChildChunk.json @@ -0,0 +1,62 @@ +{ + "icon": { + "type": "element", + "isRootNode": true, + "name": "svg", + "attributes": { + "width": "18", + "height": "18", + "viewBox": "0 0 18 18", + "fill": "none", + "xmlns": "http://www.w3.org/2000/svg" + }, + "children": [ + { + "type": "element", + "name": "g", + "attributes": { + "id": "parent-child" + }, + "children": [ + { + "type": "element", + "name": "g", + "attributes": { + "id": "Vector" + }, + "children": [ + { + "type": "element", + "name": "path", + "attributes": { + "d": "M5.56251 5.8125C6.77063 5.8125 7.75001 4.83312 7.75001 3.625C7.75001 2.41688 6.77063 1.4375 5.56251 1.4375C4.35439 1.4375 3.37501 2.41688 3.37501 3.625C3.37501 4.83312 4.35439 5.8125 5.56251 5.8125Z", + "fill": "currentColor" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "d": "M12.4375 5.8125C13.6456 5.8125 14.625 4.83312 14.625 3.625C14.625 2.41688 13.6456 1.4375 12.4375 1.4375C11.2294 1.4375 10.25 2.41688 10.25 3.625C10.25 4.83312 11.2294 5.8125 12.4375 5.8125Z", + "fill": "currentColor" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "d": "M12.4375 7.0625C11.7566 7.06326 11.0868 7.23541 10.4899 7.56309C9.89294 7.89077 9.38811 8.36342 9.02188 8.9375C9.51723 8.94327 9.99017 9.14485 10.3374 9.49819C10.6846 9.85154 10.8779 10.3279 10.875 10.8233C10.8721 11.3187 10.6733 11.7928 10.322 12.1421C9.97065 12.4913 9.49539 12.6874 9.00001 12.6874C8.50462 12.6874 8.02937 12.4913 7.67805 12.1421C7.32674 11.7928 7.12793 11.3187 7.12504 10.8233C7.12215 10.3279 7.31542 9.85154 7.66263 9.49819C8.00984 9.14485 8.48278 8.94327 8.97813 8.9375C8.50629 8.1962 7.80649 7.62817 6.984 7.31887C6.16151 7.00957 5.26082 6.97572 4.41744 7.22243C3.57406 7.46914 2.8336 7.98305 2.30746 8.68685C1.78132 9.39065 1.49796 10.2463 1.50001 11.125V15.1875C1.50001 15.3533 1.56586 15.5122 1.68307 15.6294C1.80028 15.7466 1.95925 15.8125 2.12501 15.8125H6.50001V14.25L4.25001 12.5625C4.18435 12.5132 4.12903 12.4515 4.08721 12.3809C4.0454 12.3103 4.0179 12.2321 4.00629 12.1509C3.98285 11.9868 4.02555 11.8201 4.12501 11.6875C4.22447 11.5549 4.37253 11.4672 4.53662 11.4438C4.70072 11.4203 4.8674 11.463 5.00001 11.5625L7.33313 13.3125H10.6669L13 11.5625C13.1326 11.463 13.2993 11.4203 13.4634 11.4438C13.6275 11.4672 13.7755 11.5549 13.875 11.6875C13.9745 11.8201 14.0172 11.9868 13.9937 12.1509C13.9703 12.315 13.8826 12.463 13.75 12.5625L11.5 14.25V15.8125H15.875C16.0408 15.8125 16.1997 15.7466 16.3169 15.6294C16.4342 15.5122 16.5 15.3533 16.5 15.1875V11.125C16.4987 10.048 16.0702 9.01541 15.3087 8.25383C14.5471 7.49226 13.5145 7.06382 12.4375 7.0625Z", + "fill": "currentColor" + }, + "children": [] + } + ] + } + ] + } + ] + }, + "name": "ParentChildChunk" +} \ No newline at end of file diff --git a/web/app/components/base/icons/src/vender/knowledge/ParentChildChunk.tsx b/web/app/components/base/icons/src/vender/knowledge/ParentChildChunk.tsx new file mode 100644 index 0000000000..949cd508de --- /dev/null +++ b/web/app/components/base/icons/src/vender/knowledge/ParentChildChunk.tsx @@ -0,0 +1,20 @@ +// GENERATE BY script +// DON NOT EDIT IT MANUALLY + +import * as React from 'react' +import data from './ParentChildChunk.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 = 'ParentChildChunk' + +export default Icon diff --git a/web/app/components/base/icons/src/vender/knowledge/QuestionAndAnswer.json b/web/app/components/base/icons/src/vender/knowledge/QuestionAndAnswer.json new file mode 100644 index 0000000000..357db7ae35 --- /dev/null +++ b/web/app/components/base/icons/src/vender/knowledge/QuestionAndAnswer.json @@ -0,0 +1,38 @@ +{ + "icon": { + "type": "element", + "isRootNode": true, + "name": "svg", + "attributes": { + "width": "18", + "height": "18", + "viewBox": "0 0 18 18", + "fill": "none", + "xmlns": "http://www.w3.org/2000/svg" + }, + "children": [ + { + "type": "element", + "name": "g", + "attributes": { + "id": "qa" + }, + "children": [ + { + "type": "element", + "name": "path", + "attributes": { + "id": "Vector", + "fill-rule": "evenodd", + "clip-rule": "evenodd", + "d": "M16.5015 3.75C16.5015 2.92157 15.8299 2.25 15.0015 2.25H6.00146C5.17304 2.25 4.50146 2.92157 4.50146 3.75V5.25H3.00146C2.17304 5.25 1.50146 5.92157 1.50146 6.75V12.75C1.50146 13.5784 2.17304 14.25 3.00146 14.25H3.75146V15.375C3.75146 15.6407 3.89209 15.8867 4.12112 16.0214C4.35015 16.1562 4.6334 16.1597 4.8657 16.0307L8.07083 14.25H12.0015C12.8299 14.25 13.5015 13.5784 13.5015 12.75V11.25H15.0015C15.8299 11.25 16.5015 10.5785 16.5015 9.75V3.75ZM12.0015 5.25H6.00146V3.75H15.0015V9.75H13.5015V6.75C13.5015 5.92157 12.8299 5.25 12.0015 5.25ZM5.25 7.5C4.83579 7.5 4.5 7.83579 4.5 8.25C4.5 8.66421 4.83579 9 5.25 9H9.75C10.1642 9 10.5 8.66421 10.5 8.25C10.5 7.83579 10.1642 7.5 9.75 7.5H5.25ZM5.25 10.5C4.83579 10.5 4.5 10.8358 4.5 11.25C4.5 11.6642 4.83579 12 5.25 12H7.5C7.91421 12 8.25 11.6642 8.25 11.25C8.25 10.8358 7.91421 10.5 7.5 10.5H5.25Z", + "fill": "currentColor" + }, + "children": [] + } + ] + } + ] + }, + "name": "QuestionAndAnswer" +} \ No newline at end of file diff --git a/web/app/components/base/icons/src/vender/knowledge/QuestionAndAnswer.tsx b/web/app/components/base/icons/src/vender/knowledge/QuestionAndAnswer.tsx new file mode 100644 index 0000000000..6ebc279a15 --- /dev/null +++ b/web/app/components/base/icons/src/vender/knowledge/QuestionAndAnswer.tsx @@ -0,0 +1,20 @@ +// GENERATE BY script +// DON NOT EDIT IT MANUALLY + +import * as React from 'react' +import data from './QuestionAndAnswer.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 = 'QuestionAndAnswer' + +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 fe405de651..449caae776 100644 --- a/web/app/components/base/icons/src/vender/knowledge/index.ts +++ b/web/app/components/base/icons/src/vender/knowledge/index.ts @@ -1,6 +1,9 @@ export { default as ArrowShape } from './ArrowShape' export { default as Economic } from './Economic' export { default as FullTextSearch } from './FullTextSearch' +export { default as GeneralChunk } from './GeneralChunk' export { default as HighQuality } from './HighQuality' export { default as HybridSearch } from './HybridSearch' +export { default as ParentChildChunk } from './ParentChildChunk' +export { default as QuestionAndAnswer } from './QuestionAndAnswer' export { default as VectorSearch } from './VectorSearch' diff --git a/web/app/components/workflow/nodes/_base/components/layout/box.tsx b/web/app/components/workflow/nodes/_base/components/layout/box.tsx new file mode 100644 index 0000000000..b7ed768a94 --- /dev/null +++ b/web/app/components/workflow/nodes/_base/components/layout/box.tsx @@ -0,0 +1,24 @@ +import type { ReactNode } from 'react' +import cn from '@/utils/classnames' + +export type BoxProps = { + className?: string + children?: ReactNode + withBorderBottom?: boolean +} +export const Box = ({ + className, + children, + withBorderBottom, +}: BoxProps) => { + return ( +
+ {children} +
+ ) +} diff --git a/web/app/components/workflow/nodes/_base/components/layout/field-title.tsx b/web/app/components/workflow/nodes/_base/components/layout/field-title.tsx new file mode 100644 index 0000000000..3a66c730c4 --- /dev/null +++ b/web/app/components/workflow/nodes/_base/components/layout/field-title.tsx @@ -0,0 +1,38 @@ +import type { ReactNode } from 'react' +import Tooltip from '@/app/components/base/tooltip' +import cn from '@/utils/classnames' + +export type FieldTitleProps = { + title: string + operation?: ReactNode + subTitle?: string | ReactNode + tooltip?: string +} +export const FieldTitle = ({ + title, + operation, + subTitle, + tooltip, +}: FieldTitleProps) => { + return ( +
+
+
+ {title} + { + tooltip && ( + + ) + } +
+ {operation} +
+ { + subTitle + } +
+ ) +} diff --git a/web/app/components/workflow/nodes/_base/components/layout/field.tsx b/web/app/components/workflow/nodes/_base/components/layout/field.tsx new file mode 100644 index 0000000000..27f2df5ef8 --- /dev/null +++ b/web/app/components/workflow/nodes/_base/components/layout/field.tsx @@ -0,0 +1,19 @@ +import type { ReactNode } from 'react' +import type { FieldTitleProps } from '.' +import { FieldTitle } from '.' + +export type FieldProps = { + fieldTitleProps: FieldTitleProps + children: ReactNode +} +export const Field = ({ + fieldTitleProps, + children, +}: FieldProps) => { + return ( +
+ + {children} +
+ ) +} diff --git a/web/app/components/workflow/nodes/_base/components/layout/group-with-box.tsx b/web/app/components/workflow/nodes/_base/components/layout/group-with-box.tsx new file mode 100644 index 0000000000..e351bc84d6 --- /dev/null +++ b/web/app/components/workflow/nodes/_base/components/layout/group-with-box.tsx @@ -0,0 +1,28 @@ +import type { ReactNode } from 'react' +import { + Box, + Group, +} from '.' +import type { + BoxProps, + GroupProps, +} from '.' + +type GroupWithBoxProps = { + children?: ReactNode + boxProps?: Omit + groupProps?: Omit +} +export const GroupWithBox = ({ + children, + boxProps, + groupProps, +}: GroupWithBoxProps) => { + return ( + + + {children} + + + ) +} diff --git a/web/app/components/workflow/nodes/_base/components/layout/group.tsx b/web/app/components/workflow/nodes/_base/components/layout/group.tsx new file mode 100644 index 0000000000..2b7f4ed492 --- /dev/null +++ b/web/app/components/workflow/nodes/_base/components/layout/group.tsx @@ -0,0 +1,24 @@ +import type { ReactNode } from 'react' +import cn from '@/utils/classnames' + +export type GroupProps = { + className?: string + children?: ReactNode + withBorderBottom?: boolean +} +export const Group = ({ + className, + children, + withBorderBottom, +}: GroupProps) => { + return ( +
+ {children} +
+ ) +} diff --git a/web/app/components/workflow/nodes/_base/components/layout/index.tsx b/web/app/components/workflow/nodes/_base/components/layout/index.tsx new file mode 100644 index 0000000000..3323405d19 --- /dev/null +++ b/web/app/components/workflow/nodes/_base/components/layout/index.tsx @@ -0,0 +1,5 @@ +export * from './box' +export * from './group' +export * from './group-with-box' +export * from './field-title' +export * from './field' diff --git a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/constants.ts b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/constants.ts new file mode 100644 index 0000000000..e69de29bb2 diff --git a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/hooks.tsx b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/hooks.tsx new file mode 100644 index 0000000000..8e2ae4bb1b --- /dev/null +++ b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/hooks.tsx @@ -0,0 +1,52 @@ +import { useState } from 'react' +import { + GeneralChunk, + ParentChildChunk, + QuestionAndAnswer, +} from '@/app/components/base/icons/src/vender/knowledge' +import type { Option } from './type' + +export const useChunkStructure = () => { + const [chunk, setChunk] = useState('general') + const GeneralOption: Option = { + key: 'general', + icon: , + title: 'General', + description: 'General text chunking mode, the chunks retrieved and recalled are the same.', + effectColor: 'blue', + showEffectColor: true, + } + const ParentChildOption: Option = { + key: 'parent-child', + icon: , + title: 'Parent-Child', + description: 'Parent-child text chunking mode, the chunks retrieved and recalled are different.', + effectColor: 'blue-light', + showEffectColor: true, + } + const QuestionAnswerOption: Option = { + key: 'question-answer', + icon: , + title: 'Question-Answer', + description: 'Question-answer text chunking mode, the chunks retrieved and recalled are different.', + } + + const optionMap: Record = { + 'general': GeneralOption, + 'parent-child': ParentChildOption, + 'question-answer': QuestionAnswerOption, + } + + const options = [ + GeneralOption, + ParentChildOption, + QuestionAnswerOption, + ] + + return { + options, + optionMap, + chunk, + setChunk, + } +} diff --git a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/index.tsx b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/index.tsx new file mode 100644 index 0000000000..5420cc77ee --- /dev/null +++ b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/index.tsx @@ -0,0 +1,33 @@ +import { Field } from '@/app/components/workflow/nodes/_base/components/layout' +import OptionCard from '../option-card' +import Selector from './selector' +import { useChunkStructure } from './hooks' + +const ChunkStructure = () => { + const { + chunk, + setChunk, + options, + optionMap, + } = useChunkStructure() + + return ( + + ), + }} + > + + + ) +} + +export default ChunkStructure diff --git a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/selector.tsx b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/selector.tsx new file mode 100644 index 0000000000..7844d38a27 --- /dev/null +++ b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/selector.tsx @@ -0,0 +1,69 @@ +import { useState } from 'react' +import { + PortalToFollowElem, + PortalToFollowElemContent, + PortalToFollowElemTrigger, +} from '@/app/components/base/portal-to-follow-elem' +import Button from '@/app/components/base/button' +import OptionCard from '../option-card' +import type { Option } from './type' + +type SelectorProps = { + options: Option[] + value: string + onChange: (key: string) => void +} +const Selector = ({ + options, + value, + onChange, +}: SelectorProps) => { + const [open, setOpen] = useState(false) + + return ( + + setOpen(!open)}> + + + +
+
+ change Chunk Structure +
+
+ { + options.map(option => ( + { + onChange(option.key) + setOpen(false) + }} + showHighlightBorder={value === option.key} + > + )) + } +
+
+ + + ) +} + +export default Selector diff --git a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/type.ts b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/type.ts new file mode 100644 index 0000000000..db6fe122c9 --- /dev/null +++ b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/type.ts @@ -0,0 +1,10 @@ +import type { ReactNode } from 'react' + +export type Option = { + key: string + icon: ReactNode + title: string + description: string + effectColor?: string + showEffectColor?: boolean, +} diff --git a/web/app/components/workflow/nodes/knowledge-base/components/embedding-model.tsx b/web/app/components/workflow/nodes/knowledge-base/components/embedding-model.tsx new file mode 100644 index 0000000000..8480458d1a --- /dev/null +++ b/web/app/components/workflow/nodes/knowledge-base/components/embedding-model.tsx @@ -0,0 +1,34 @@ +import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal' +import { Field } from '@/app/components/workflow/nodes/_base/components/layout' + +const EmbeddingModel = () => { + const handleModelChange = () => { + console.log('Model changed') + } + const handleCompletionParamsChange = () => { + console.log('Completion parameters changed') + } + + return ( + + + + ) +} +export default EmbeddingModel 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 index 5b8b4d48ea..c11f18c9de 100644 --- a/web/app/components/workflow/nodes/knowledge-base/components/index-method.tsx +++ b/web/app/components/workflow/nodes/knowledge-base/components/index-method.tsx @@ -1,3 +1,4 @@ +import { useState } from 'react' import { useTranslation } from 'react-i18next' import { RiQuestionLine } from '@remixicon/react' import { @@ -7,27 +8,52 @@ import { 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' const IndexMethod = () => { const { t } = useTranslation() + const [method, setMethod] = useState('high_quality') return ( -
-
Index method
+
} + icon={ + + } title={t('datasetCreation.stepTwo.qualified')} description={t('datasetSettings.form.indexMethodHighQualityTip')} - showHighlightBorder + showHighlightBorder={method === 'high_quality'} + onClick={() => setMethod('high_quality')} + isRecommended > } + icon={ + + } title={t('datasetSettings.form.indexMethodEconomy')} description={t('datasetSettings.form.indexMethodEconomyTip')} - showChildren - showHighlightBorder + showChildren={method === 'economy'} + showHighlightBorder={method === 'economy'} + onClick={() => setMethod('economy')} + effectColor='blue' + showEffectColor={method === 'economy'} >
@@ -55,7 +81,7 @@ const IndexMethod = () => {
-
+ ) } diff --git a/web/app/components/workflow/nodes/knowledge-base/components/input-variable.tsx b/web/app/components/workflow/nodes/knowledge-base/components/input-variable.tsx new file mode 100644 index 0000000000..9e23835f55 --- /dev/null +++ b/web/app/components/workflow/nodes/knowledge-base/components/input-variable.tsx @@ -0,0 +1,26 @@ +import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker' +import { Field } from '@/app/components/workflow/nodes/_base/components/layout' + +const EmbeddingModel = () => { + const handleChange = () => { + console.log('') + } + + return ( + + + + ) +} +export default EmbeddingModel 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 index ea90688221..6a6bb98275 100644 --- a/web/app/components/workflow/nodes/knowledge-base/components/option-card.tsx +++ b/web/app/components/workflow/nodes/knowledge-base/components/option-card.tsx @@ -2,17 +2,19 @@ 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, + OptionCardEffectBlueLight, OptionCardEffectOrange, OptionCardEffectPurple, } from '@/app/components/base/icons/src/public/knowledge' +import { ArrowShape } from '@/app/components/base/icons/src/vender/knowledge' -const EffectMap = { - blue: , - orange: , - purple: , +const HEADER_EFFECT_MAP: Record = { + 'blue': , + 'blue-light': , + 'orange': , + 'purple': , } type OptionCardProps = { showHighlightBorder?: boolean @@ -24,7 +26,9 @@ type OptionCardProps = { isRecommended?: boolean children?: ReactNode showChildren?: boolean - effectColor?: 'blue' | 'orange' | 'purple' + effectColor?: string + showEffectColor?: boolean + onClick?: () => void } const OptionCard = ({ showHighlightBorder, @@ -36,36 +40,42 @@ const OptionCard = ({ isRecommended, children, showChildren, - effectColor = 'blue', + effectColor, + showEffectColor, + onClick, }: OptionCardProps) => { return ( -
-
+
+
{ - showChildren && ( - + effectColor && showEffectColor && ( +
+ {HEADER_EFFECT_MAP[effectColor]} +
) } - { - showChildren && effectColor && EffectMap[effectColor] - } { icon && ( -
+
{icon}
) } -
+
{title} { isRecommended && ( - + Recommend ) @@ -92,7 +102,8 @@ const OptionCard = ({
{ children && showChildren && ( -
+
+ {children}
) diff --git a/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/full-text-search.tsx b/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/full-text-search.tsx new file mode 100644 index 0000000000..13b602b08d --- /dev/null +++ b/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/full-text-search.tsx @@ -0,0 +1,20 @@ +import { FullTextSearch } from '@/app/components/base/icons/src/vender/knowledge' +import OptionCard from '../option-card' + +const FullTextSearchCard = () => { + return ( + } + title='Full-Text Search' + description="Execute full-text search and vector searches simultaneously, re-rank to select the best match for the user's query. Users can choose to set weights or configure to a Rerank model." + effectColor='purple' + > +
+
Vector Search Settings
+
Additional Settings
+
+ + ) +} + +export default FullTextSearchCard diff --git a/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/hybrid-search.tsx b/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/hybrid-search.tsx new file mode 100644 index 0000000000..7eec4f97c7 --- /dev/null +++ b/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/hybrid-search.tsx @@ -0,0 +1,21 @@ +import { HybridSearch } from '@/app/components/base/icons/src/vender/knowledge' +import OptionCard from '../option-card' + +const HybridSearchCard = () => { + return ( + } + title='Hybrid Search' + description="Execute full-text search and vector searches simultaneously, re-rank to select the best match for the user's query. Users can choose to set weights or configure to a Rerank model." + effectColor='purple' + isRecommended + > +
+
Vector Search Settings
+
Additional Settings
+
+ + ) +} + +export default HybridSearchCard diff --git a/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/index.tsx b/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/index.tsx new file mode 100644 index 0000000000..bbcba2c72a --- /dev/null +++ b/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/index.tsx @@ -0,0 +1,35 @@ +import { Field } from '@/app/components/workflow/nodes/_base/components/layout' +import VectorSearchCard from './vector-search' +import FullTextSearchCard from './full-text-search' +import HybridSearchCard from './hybrid-search' + +const RetrievalSetting = () => { + return ( + + + Learn more + +   + about retrieval method. +
+ ), + }} + > +
+ + + +
+ + ) +} + +export default RetrievalSetting diff --git a/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/vector-search.tsx b/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/vector-search.tsx new file mode 100644 index 0000000000..8d17858b1c --- /dev/null +++ b/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/vector-search.tsx @@ -0,0 +1,20 @@ +import { VectorSearch } from '@/app/components/base/icons/src/vender/knowledge' +import OptionCard from '../option-card' + +const VectorSearchCard = () => { + return ( + } + title='Vector Search' + description='Generate query embeddings and search for the text chunk most similar to its vector representation.' + effectColor='purple' + > +
+
Vector Search Settings
+
Additional Settings
+
+ + ) +} + +export default VectorSearchCard diff --git a/web/app/components/workflow/nodes/knowledge-base/panel.tsx b/web/app/components/workflow/nodes/knowledge-base/panel.tsx index 655ee0a52a..344a79a207 100644 --- a/web/app/components/workflow/nodes/knowledge-base/panel.tsx +++ b/web/app/components/workflow/nodes/knowledge-base/panel.tsx @@ -1,17 +1,40 @@ import type { FC } from 'react' import { memo } from 'react' import type { KnowledgeBaseNodeType } from './types' +import InputVariable from './components/input-variable' +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 type { NodePanelProps } from '@/app/components/workflow/types' +import { + Group, + GroupWithBox, +} from '@/app/components/workflow/nodes/_base/components/layout' +import Split from '../_base/components/split' const Panel: FC> = () => { return (
-
-
+ + + + + + + +
+ +
+ +
+
-
+
) }