From edd41a30eb930fa1646880fe1b8a8e0bf054650f Mon Sep 17 00:00:00 2001 From: twwu Date: Thu, 28 Aug 2025 15:31:30 +0800 Subject: [PATCH] feat: add AddChunks icon and related components for knowledge base chunk structure --- .../assets/vender/knowledge/add-chunks.svg | 8 ++ .../icons/src/vender/knowledge/AddChunks.json | 71 ++++++++++++ .../icons/src/vender/knowledge/AddChunks.tsx | 20 ++++ .../base/icons/src/vender/knowledge/index.ts | 1 + .../detail/completed/common/empty.tsx | 16 +-- .../components/chunk-structure/index.tsx | 32 +++--- .../chunk-structure/instruction/index.tsx | 47 ++++++++ .../chunk-structure/instruction/line.tsx | 41 +++++++ .../workflow/nodes/knowledge-base/panel.tsx | 107 +++++++++--------- web/i18n/en-US/workflow.ts | 5 + web/i18n/zh-Hans/workflow.ts | 5 + 11 files changed, 278 insertions(+), 75 deletions(-) create mode 100644 web/app/components/base/icons/assets/vender/knowledge/add-chunks.svg create mode 100644 web/app/components/base/icons/src/vender/knowledge/AddChunks.json create mode 100644 web/app/components/base/icons/src/vender/knowledge/AddChunks.tsx create mode 100644 web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/instruction/index.tsx create mode 100644 web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/instruction/line.tsx diff --git a/web/app/components/base/icons/assets/vender/knowledge/add-chunks.svg b/web/app/components/base/icons/assets/vender/knowledge/add-chunks.svg new file mode 100644 index 0000000000..378baf3658 --- /dev/null +++ b/web/app/components/base/icons/assets/vender/knowledge/add-chunks.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/web/app/components/base/icons/src/vender/knowledge/AddChunks.json b/web/app/components/base/icons/src/vender/knowledge/AddChunks.json new file mode 100644 index 0000000000..51e1b17fb4 --- /dev/null +++ b/web/app/components/base/icons/src/vender/knowledge/AddChunks.json @@ -0,0 +1,71 @@ +{ + "icon": { + "type": "element", + "isRootNode": true, + "name": "svg", + "attributes": { + "width": "20", + "height": "20", + "viewBox": "0 0 20 20", + "fill": "none", + "xmlns": "http://www.w3.org/2000/svg" + }, + "children": [ + { + "type": "element", + "name": "path", + "attributes": { + "d": "M10.0855 2.50411C10.5056 2.54689 10.8333 2.90198 10.8333 3.33337C10.8333 3.79361 10.4602 4.16671 10 4.16671H6.00017C5.51971 4.16671 5.20926 4.16776 4.97315 4.18705C4.74683 4.20555 4.66278 4.23686 4.62159 4.25785C4.46494 4.33771 4.33768 4.46498 4.25782 4.62162C4.23683 4.66282 4.20551 4.74687 4.18702 4.97319C4.16772 5.2093 4.16667 5.51975 4.16667 6.0002V13.9999C4.16667 14.4803 4.16772 14.7908 4.18702 15.0269C4.20551 15.2532 4.23684 15.3373 4.25782 15.3785C4.33771 15.5351 4.465 15.6624 4.62159 15.7422C4.66278 15.7632 4.74684 15.7945 4.97315 15.813C5.20926 15.8323 5.51971 15.8334 6.00017 15.8334H13.9998C14.4803 15.8334 14.7907 15.8323 15.0269 15.813C15.2532 15.7945 15.3372 15.7632 15.3784 15.7422C15.5351 15.6624 15.6624 15.5351 15.7422 15.3785C15.7632 15.3373 15.7945 15.2532 15.813 15.0269C15.8323 14.7908 15.8333 14.4803 15.8333 13.9999V10C15.8333 9.53981 16.2064 9.16671 16.6667 9.16671C17.1269 9.16671 17.5 9.53981 17.5 10V13.9999C17.5 14.4528 17.5009 14.8431 17.4748 15.1628C17.4478 15.4922 17.388 15.82 17.2274 16.1353C16.9878 16.6055 16.6054 16.9878 16.1353 17.2274C15.82 17.3881 15.4922 17.4479 15.1628 17.4748C14.843 17.5009 14.4528 17.5 13.9998 17.5H6.00017C5.54721 17.5 5.15697 17.5009 4.83724 17.4748C4.50786 17.4479 4.18 17.3881 3.86475 17.2274C3.39449 16.9878 3.01223 16.6054 2.77263 16.1353C2.61199 15.82 2.55216 15.4922 2.52523 15.1628C2.49911 14.8431 2.5 14.4528 2.5 13.9999V6.0002C2.5 5.54725 2.49911 5.15701 2.52523 4.83728C2.55216 4.5079 2.612 4.18003 2.77263 3.86479C3.01227 3.3946 3.39456 3.0123 3.86475 2.77266C4.18 2.61203 4.50786 2.55219 4.83724 2.52527C5.15697 2.49915 5.54721 2.50004 6.00017 2.50004H10L10.0855 2.50411Z", + "fill": "currentColor" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "d": "M10.8333 12.5C11.2936 12.5 11.6667 12.8731 11.6667 13.3334C11.6667 13.7936 11.2936 14.1667 10.8333 14.1667H6.66667C6.20643 14.1667 5.83334 13.7936 5.83334 13.3334C5.83334 12.8731 6.20643 12.5 6.66667 12.5H10.8333Z", + "fill": "currentColor" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "d": "M8.33334 9.16671C8.79357 9.16671 9.16667 9.5398 9.16667 10C9.16667 10.4603 8.79357 10.8334 8.33334 10.8334H6.66667C6.20643 10.8334 5.83334 10.4603 5.83334 10C5.83334 9.5398 6.20643 9.16671 6.66667 9.16671H8.33334Z", + "fill": "currentColor" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "d": "M13.3333 9.16671C13.7936 9.16671 14.1667 9.5398 14.1667 10C14.1667 10.4603 13.7936 10.8334 13.3333 10.8334H10.8333C10.3731 10.8334 10 10.4603 10 10C10 9.5398 10.3731 9.16671 10.8333 9.16671H13.3333Z", + "fill": "currentColor" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "d": "M10 5.83337C10.4602 5.83337 10.8333 6.20647 10.8333 6.66671C10.8333 7.12694 10.4602 7.50004 10 7.50004H6.66667C6.20643 7.50004 5.83334 7.12694 5.83334 6.66671C5.83334 6.20647 6.20643 5.83338 6.66667 5.83337H10Z", + "fill": "currentColor" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "d": "M15.8333 0.833374C16.2936 0.833374 16.6667 1.20647 16.6667 1.66671V3.33337H18.3333C18.7936 3.33337 19.1667 3.70647 19.1667 4.16671C19.1667 4.62694 18.7936 5.00004 18.3333 5.00004H16.6667V6.66671C16.6667 7.12694 16.2936 7.50004 15.8333 7.50004C15.3731 7.50004 15 7.12694 15 6.66671V5.00004H13.3333C12.8731 5.00004 12.5 4.62694 12.5 4.16671C12.5 3.70647 12.8731 3.33338 13.3333 3.33337H15V1.66671C15 1.20647 15.3731 0.833376 15.8333 0.833374Z", + "fill": "currentColor" + }, + "children": [] + } + ] + }, + "name": "AddChunks" +} diff --git a/web/app/components/base/icons/src/vender/knowledge/AddChunks.tsx b/web/app/components/base/icons/src/vender/knowledge/AddChunks.tsx new file mode 100644 index 0000000000..fc1270ae66 --- /dev/null +++ b/web/app/components/base/icons/src/vender/knowledge/AddChunks.tsx @@ -0,0 +1,20 @@ +// GENERATE BY script +// DON NOT EDIT IT MANUALLY + +import * as React from 'react' +import data from './AddChunks.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 = 'AddChunks' + +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 1ad91ea8af..74e5a5fce8 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 AddChunks } from './AddChunks' export { default as ArrowShape } from './ArrowShape' export { default as Chunk } from './Chunk' export { default as Collapse } from './Collapse' diff --git a/web/app/components/datasets/documents/detail/completed/common/empty.tsx b/web/app/components/datasets/documents/detail/completed/common/empty.tsx index eef2aa9e25..93813cfa22 100644 --- a/web/app/components/datasets/documents/detail/completed/common/empty.tsx +++ b/web/app/components/datasets/documents/detail/completed/common/empty.tsx @@ -22,13 +22,13 @@ const Line = React.memo(({ className, }: LineProps) => { return ( - - + + - - - - + + + + @@ -47,8 +47,8 @@ const Empty: FC = ({
- - + +
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 index 92e72c7753..6410ab706f 100644 --- 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 @@ -7,6 +7,7 @@ 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 @@ -51,20 +52,23 @@ const ChunkStructure = ({ } { !chunkStructure && ( - - - {t('workflow.nodes.knowledgeBase.chooseChunkStructure')} - - )} - /> + <> + + + {t('workflow.nodes.knowledgeBase.chooseChunkStructure')} + + )} + /> + + ) } diff --git a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/instruction/index.tsx b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/instruction/index.tsx new file mode 100644 index 0000000000..596f7993c0 --- /dev/null +++ b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/instruction/index.tsx @@ -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 ( +
+
+ + + + + +
+
+
+ {t('workflow.nodes.knowledgeBase.chunkStructureTip.title')} +
+
+

{t('workflow.nodes.knowledgeBase.chunkStructureTip.message')}

+ + {t('workflow.nodes.knowledgeBase.chunkStructureTip.learnMore')} + +
+
+
+ ) +} + +export default React.memo(Instruction) diff --git a/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/instruction/line.tsx b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/instruction/line.tsx new file mode 100644 index 0000000000..1177130d2b --- /dev/null +++ b/web/app/components/workflow/nodes/knowledge-base/components/chunk-structure/instruction/line.tsx @@ -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 ( + + + + + + + + + + + ) + } + + return ( + + + + + + + + + + + ) +} + +export default React.memo(Line) diff --git a/web/app/components/workflow/nodes/knowledge-base/panel.tsx b/web/app/components/workflow/nodes/knowledge-base/panel.tsx index c076493f81..c3dd15ed42 100644 --- a/web/app/components/workflow/nodes/knowledge-base/panel.tsx +++ b/web/app/components/workflow/nodes/knowledge-base/panel.tsx @@ -47,7 +47,7 @@ const Panel: FC> = ({ } = useConfig(id) const filterVar = useCallback((variable: Var) => { - if(!data.chunk_structure) return false + if (!data.chunk_structure) return false switch (data.chunk_structure) { case ChunkStructureEnum.general: return variable.schemaType === 'general_structure' @@ -55,37 +55,16 @@ const Panel: FC> = ({ return variable.schemaType === 'parent_child_structure' case ChunkStructureEnum.question_answer: return variable.schemaType === 'qa_structure' + default: + return false } - return false }, [data.chunk_structure]) return (
- - - > = ({ readonly={nodesReadOnly} /> - -
- { - data.chunk_structure && ( - <> + { + data.chunk_structure && ( + <> + + + + +
> = ({
- - ) - } - -
- + +
+ + + ) + }
) } diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts index c21f0dc1b2..3585d7535b 100644 --- a/web/i18n/en-US/workflow.ts +++ b/web/i18n/en-US/workflow.ts @@ -934,6 +934,11 @@ const translation = { knowledgeBase: { chunkStructure: 'Chunk Structure', chooseChunkStructure: 'Choose a chunk structure', + chunkStructureTip: { + title: 'Please choose a chunk structure', + message: 'After configuring chunk structure, this node will automatically load the remaining configurations.', + learnMore: 'Learn more', + }, changeChunkStructure: 'Change Chunk Structure', aboutRetrieval: 'about retrieval method.', chunkIsRequired: 'Chunk structure is required', diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts index 498966537b..189331f44b 100644 --- a/web/i18n/zh-Hans/workflow.ts +++ b/web/i18n/zh-Hans/workflow.ts @@ -933,6 +933,11 @@ const translation = { knowledgeBase: { chunkStructure: '分段结构', chooseChunkStructure: '选择分段结构', + chunkStructureTip: { + title: '请选择分段结构', + message: '配置完成分段结构后，将自动加载剩余配置。', + learnMore: '了解更多', + }, changeChunkStructure: '更改分段结构', aboutRetrieval: '关于知识检索。', chunkIsRequired: '分段结构是必需的',