diff --git a/web/app/components/base/icons/assets/public/common/line-3.svg b/web/app/components/base/icons/assets/public/common/line-3.svg new file mode 100644 index 0000000000..f4fdb7083b --- /dev/null +++ b/web/app/components/base/icons/assets/public/common/line-3.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/app/components/base/icons/assets/vender/solid/development/variable-02.svg b/web/app/components/base/icons/assets/vender/solid/development/variable-02.svg new file mode 100644 index 0000000000..75ad244bb7 --- /dev/null +++ b/web/app/components/base/icons/assets/vender/solid/development/variable-02.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/web/app/components/base/icons/src/public/common/Line3.json b/web/app/components/base/icons/src/public/common/Line3.json new file mode 100644 index 0000000000..32f6d50bb8 --- /dev/null +++ b/web/app/components/base/icons/src/public/common/Line3.json @@ -0,0 +1,28 @@ +{ + "icon": { + "type": "element", + "isRootNode": true, + "name": "svg", + "attributes": { + "width": "5", + "height": "12", + "viewBox": "0 0 5 12", + "fill": "none", + "xmlns": "http://www.w3.org/2000/svg" + }, + "children": [ + { + "type": "element", + "name": "path", + "attributes": { + "id": "Line 3", + "d": "M1 11.3545L3.94174 0.645781", + "stroke": "#D0D5DD", + "stroke-linecap": "round" + }, + "children": [] + } + ] + }, + "name": "Line3" +} \ No newline at end of file diff --git a/web/app/components/base/icons/src/public/common/Line3.tsx b/web/app/components/base/icons/src/public/common/Line3.tsx new file mode 100644 index 0000000000..a9c99816b9 --- /dev/null +++ b/web/app/components/base/icons/src/public/common/Line3.tsx @@ -0,0 +1,16 @@ +// GENERATE BY script +// DON NOT EDIT IT MANUALLY + +import * as React from 'react' +import data from './Line3.json' +import IconBase from '@/app/components/base/icons/IconBase' +import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase' + +const Icon = React.forwardRef, Omit>(( + props, + ref, +) => ) + +Icon.displayName = 'Line3' + +export default Icon diff --git a/web/app/components/base/icons/src/public/common/index.ts b/web/app/components/base/icons/src/public/common/index.ts index bd62f00322..b65032834b 100644 --- a/web/app/components/base/icons/src/public/common/index.ts +++ b/web/app/components/base/icons/src/public/common/index.ts @@ -1,6 +1,7 @@ export { default as DiagonalDividingLine } from './DiagonalDividingLine' export { default as Dify } from './Dify' export { default as Github } from './Github' +export { default as Line3 } from './Line3' export { default as MessageChatSquare } from './MessageChatSquare' export { default as MultiPathRetrieval } from './MultiPathRetrieval' export { default as NTo1Retrieval } from './NTo1Retrieval' diff --git a/web/app/components/base/icons/src/vender/solid/development/Variable02.json b/web/app/components/base/icons/src/vender/solid/development/Variable02.json new file mode 100644 index 0000000000..f506afd8bb --- /dev/null +++ b/web/app/components/base/icons/src/vender/solid/development/Variable02.json @@ -0,0 +1,62 @@ +{ + "icon": { + "type": "element", + "isRootNode": true, + "name": "svg", + "attributes": { + "width": "24", + "height": "24", + "viewBox": "0 0 24 24", + "fill": "none", + "xmlns": "http://www.w3.org/2000/svg" + }, + "children": [ + { + "type": "element", + "name": "g", + "attributes": { + "id": "variable-02" + }, + "children": [ + { + "type": "element", + "name": "g", + "attributes": { + "id": "Vector" + }, + "children": [ + { + "type": "element", + "name": "path", + "attributes": { + "d": "M13.9986 8.76189C14.6132 8.04115 15.5117 7.625 16.459 7.625H16.5486C17.1009 7.625 17.5486 8.07272 17.5486 8.625C17.5486 9.17728 17.1009 9.625 16.5486 9.625H16.459C16.0994 9.625 15.7564 9.78289 15.5205 10.0595L13.1804 12.8039L13.9213 15.4107C13.9372 15.4666 13.9859 15.5 14.0355 15.5H15.4296C15.9819 15.5 16.4296 15.9477 16.4296 16.5C16.4296 17.0523 15.9819 17.5 15.4296 17.5H14.0355C13.0858 17.5 12.2562 16.8674 11.9975 15.9575L11.621 14.6328L10.1457 16.3631C9.5311 17.0839 8.63257 17.5 7.68532 17.5H7.59564C7.04336 17.5 6.59564 17.0523 6.59564 16.5C6.59564 15.9477 7.04336 15.5 7.59564 15.5H7.68532C8.04487 15.5 8.38789 15.3421 8.62379 15.0655L10.964 12.3209L10.2231 9.71433C10.2072 9.65839 10.1586 9.625 10.1089 9.625H8.71484C8.16256 9.625 7.71484 9.17728 7.71484 8.625C7.71484 8.07272 8.16256 7.625 8.71484 7.625H10.1089C11.0586 7.625 11.8883 8.25756 12.1469 9.16754L12.5234 10.4921L13.9986 8.76189Z", + "fill": "currentColor" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "d": "M5.429 3C3.61372 3 2.143 4.47071 2.143 6.286V10.4428L1.29289 11.2929C1.10536 11.4804 1 11.7348 1 12C1 12.2652 1.10536 12.5196 1.29289 12.7071L2.143 13.5572V17.714C2.143 19.5293 3.61372 21 5.429 21C5.98128 21 6.429 20.5523 6.429 20C6.429 19.4477 5.98128 19 5.429 19C4.71828 19 4.143 18.4247 4.143 17.714V13.143C4.143 12.8778 4.03764 12.6234 3.85011 12.4359L3.41421 12L3.85011 11.5641C4.03764 11.3766 4.143 11.1222 4.143 10.857V6.286C4.143 5.57528 4.71828 5 5.429 5C5.98128 5 6.429 4.55228 6.429 4C6.429 3.44772 5.98128 3 5.429 3Z", + "fill": "currentColor" + }, + "children": [] + }, + { + "type": "element", + "name": "path", + "attributes": { + "d": "M18.5708 3C18.0185 3 17.5708 3.44772 17.5708 4C17.5708 4.55228 18.0185 5 18.5708 5C19.2815 5 19.8568 5.57529 19.8568 6.286V10.857C19.8568 11.1222 19.9622 11.3766 20.1497 11.5641L20.5856 12L20.1497 12.4359C19.9622 12.6234 19.8568 12.8778 19.8568 13.143V17.714C19.8568 18.4244 19.2808 19 18.5708 19C18.0185 19 17.5708 19.4477 17.5708 20C17.5708 20.5523 18.0185 21 18.5708 21C20.3848 21 21.8568 19.5296 21.8568 17.714V13.5572L22.7069 12.7071C23.0974 12.3166 23.0974 11.6834 22.7069 11.2929L21.8568 10.4428V6.286C21.8568 4.47071 20.3861 3 18.5708 3Z", + "fill": "currentColor" + }, + "children": [] + } + ] + } + ] + } + ] + }, + "name": "Variable02" +} \ No newline at end of file diff --git a/web/app/components/base/icons/src/vender/solid/development/Variable02.tsx b/web/app/components/base/icons/src/vender/solid/development/Variable02.tsx new file mode 100644 index 0000000000..3d166bf3d1 --- /dev/null +++ b/web/app/components/base/icons/src/vender/solid/development/Variable02.tsx @@ -0,0 +1,16 @@ +// GENERATE BY script +// DON NOT EDIT IT MANUALLY + +import * as React from 'react' +import data from './Variable02.json' +import IconBase from '@/app/components/base/icons/IconBase' +import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase' + +const Icon = React.forwardRef, Omit>(( + props, + ref, +) => ) + +Icon.displayName = 'Variable02' + +export default Icon diff --git a/web/app/components/base/icons/src/vender/solid/development/index.ts b/web/app/components/base/icons/src/vender/solid/development/index.ts index 6a86439adf..30883e1f8e 100644 --- a/web/app/components/base/icons/src/vender/solid/development/index.ts +++ b/web/app/components/base/icons/src/vender/solid/development/index.ts @@ -6,3 +6,4 @@ export { default as PatternRecognition } from './PatternRecognition' export { default as PuzzlePiece01 } from './PuzzlePiece01' export { default as Semantic } from './Semantic' export { default as TerminalSquare } from './TerminalSquare' +export { default as Variable02 } from './Variable02' diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx index 9ee9621d90..06482e5d05 100644 --- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx +++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx @@ -2,9 +2,11 @@ import type { FC } from 'react' import React from 'react' import cn from 'classnames' -import { BlockEnum } from '@/app/components/workflow/types' +import { mockNodesData } from '../../../mock' import type { ValueSelector } from '@/app/components/workflow/types' import { VarBlockIcon } from '@/app/components/workflow/block-icon' +import { Line3 } from '@/app/components/base/icons/src/public/common' +import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development' type Props = { className?: string isShowNodeName: boolean @@ -13,32 +15,49 @@ type Props = { onChange: (value: ValueSelector) => void } -const getNodeInfoById = () => { - +const getNodeInfoById = (id: string) => { + return mockNodesData[id] } const VarReferencePicker: FC = ({ + readonly, className, isShowNodeName, value, }) => { - const valueNotSet = value.length === 0 - const nodeName = !valueNotSet ? value[0] : '' - const varName = !valueNotSet ? value[value.length - 1] : '' + const hasValue = value.length > 0 + const node = hasValue ? getNodeInfoById(value[0]) : null + const varName = hasValue ? value[value.length - 1] : '' // TODO: get var type through node and value const getVarType = () => { return 'string' } return ( -
-
- {isShowNodeName && ( - - )} / - {!valueNotSet ? (`${varName} / ${getVarType()}`) : ''} +
+
+
+ {hasValue && ( + <> + {isShowNodeName && ( +
+
+ +
+
{node?.title}
+ +
+ )} +
+ +
{varName}
+
+
{getVarType()}
+ + )} +
) diff --git a/web/app/components/workflow/nodes/llm/mock.ts b/web/app/components/workflow/nodes/llm/mock.ts index ef7403ac87..d1ac8b7009 100644 --- a/web/app/components/workflow/nodes/llm/mock.ts +++ b/web/app/components/workflow/nodes/llm/mock.ts @@ -17,11 +17,11 @@ export const mockLLMNodeData: LLMNodeData = { variables: [ { variable: 'name', - value_selector: ['start', 'name'], + value_selector: ['aaa', 'name'], }, { variable: 'age', - value_selector: ['a', 'b', 'c'], + value_selector: ['bbb', 'b', 'c'], }, ], prompt: [], diff --git a/web/app/components/workflow/nodes/mock.ts b/web/app/components/workflow/nodes/mock.ts index e69de29bb2..5d1a323c3e 100644 --- a/web/app/components/workflow/nodes/mock.ts +++ b/web/app/components/workflow/nodes/mock.ts @@ -0,0 +1,13 @@ +import { BlockEnum } from '@/app/components/workflow/types' + +export const mockNodesData: Record = { + aaa: { + title: 'Start', + type: BlockEnum.Start, + + }, + bbb: { + title: 'Knowledge', + type: BlockEnum.KnowledgeRetrieval, + }, +}