diff --git a/web/app/components/base/icons/assets/vender/line/editor/align-left.svg b/web/app/components/base/icons/assets/vender/line/editor/align-left.svg new file mode 100644 index 0000000000..086ff82888 --- /dev/null +++ b/web/app/components/base/icons/assets/vender/line/editor/align-left.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/web/app/components/base/icons/assets/vender/line/editor/letter-spacing-01.svg b/web/app/components/base/icons/assets/vender/line/editor/letter-spacing-01.svg new file mode 100644 index 0000000000..4f0c99e0c2 --- /dev/null +++ b/web/app/components/base/icons/assets/vender/line/editor/letter-spacing-01.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/web/app/components/base/icons/assets/vender/line/general/check-done-01.svg b/web/app/components/base/icons/assets/vender/line/general/check-done-01.svg new file mode 100644 index 0000000000..6603f3d0aa --- /dev/null +++ b/web/app/components/base/icons/assets/vender/line/general/check-done-01.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/web/app/components/base/icons/src/vender/line/editor/AlignLeft.json b/web/app/components/base/icons/src/vender/line/editor/AlignLeft.json new file mode 100644 index 0000000000..ae8b150447 --- /dev/null +++ b/web/app/components/base/icons/src/vender/line/editor/AlignLeft.json @@ -0,0 +1,39 @@ +{ + "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": "align-left" + }, + "children": [ + { + "type": "element", + "name": "path", + "attributes": { + "id": "Icon", + "d": "M16 10H3M20 6H3M20 14H3M16 18H3", + "stroke": "currentColor", + "stroke-width": "2", + "stroke-linecap": "round", + "stroke-linejoin": "round" + }, + "children": [] + } + ] + } + ] + }, + "name": "AlignLeft" +} \ No newline at end of file diff --git a/web/app/components/base/icons/src/vender/line/editor/AlignLeft.tsx b/web/app/components/base/icons/src/vender/line/editor/AlignLeft.tsx new file mode 100644 index 0000000000..4d2ade7998 --- /dev/null +++ b/web/app/components/base/icons/src/vender/line/editor/AlignLeft.tsx @@ -0,0 +1,16 @@ +// GENERATE BY script +// DON NOT EDIT IT MANUALLY + +import * as React from 'react' +import data from './AlignLeft.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 = 'AlignLeft' + +export default Icon diff --git a/web/app/components/base/icons/src/vender/line/editor/LetterSpacing01.json b/web/app/components/base/icons/src/vender/line/editor/LetterSpacing01.json new file mode 100644 index 0000000000..98b3cd6617 --- /dev/null +++ b/web/app/components/base/icons/src/vender/line/editor/LetterSpacing01.json @@ -0,0 +1,39 @@ +{ + "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": "letter-spacing-01" + }, + "children": [ + { + "type": "element", + "name": "path", + "attributes": { + "id": "Icon", + "d": "M9 13L15 13M7 17L11.2717 7.60225C11.5031 7.09323 11.6188 6.83872 11.7791 6.75976C11.9184 6.69115 12.0816 6.69115 12.2209 6.75976C12.3812 6.83872 12.4969 7.09323 12.7283 7.60225L17 17M21 3V21M3 3L3 21", + "stroke": "currentColor", + "stroke-width": "2", + "stroke-linecap": "round", + "stroke-linejoin": "round" + }, + "children": [] + } + ] + } + ] + }, + "name": "LetterSpacing01" +} \ No newline at end of file diff --git a/web/app/components/base/icons/src/vender/line/editor/LetterSpacing01.tsx b/web/app/components/base/icons/src/vender/line/editor/LetterSpacing01.tsx new file mode 100644 index 0000000000..effd85a3a1 --- /dev/null +++ b/web/app/components/base/icons/src/vender/line/editor/LetterSpacing01.tsx @@ -0,0 +1,16 @@ +// GENERATE BY script +// DON NOT EDIT IT MANUALLY + +import * as React from 'react' +import data from './LetterSpacing01.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 = 'LetterSpacing01' + +export default Icon diff --git a/web/app/components/base/icons/src/vender/line/editor/index.ts b/web/app/components/base/icons/src/vender/line/editor/index.ts index 6a80cab122..9181a73470 100644 --- a/web/app/components/base/icons/src/vender/line/editor/index.ts +++ b/web/app/components/base/icons/src/vender/line/editor/index.ts @@ -1,3 +1,5 @@ +export { default as AlignLeft } from './AlignLeft' export { default as BezierCurve03 } from './BezierCurve03' export { default as Colors } from './Colors' +export { default as LetterSpacing01 } from './LetterSpacing01' export { default as TypeSquare } from './TypeSquare' diff --git a/web/app/components/base/icons/src/vender/line/general/CheckDone01.json b/web/app/components/base/icons/src/vender/line/general/CheckDone01.json new file mode 100644 index 0000000000..85355f93fd --- /dev/null +++ b/web/app/components/base/icons/src/vender/line/general/CheckDone01.json @@ -0,0 +1,39 @@ +{ + "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": "check-done-01" + }, + "children": [ + { + "type": "element", + "name": "path", + "attributes": { + "id": "Icon", + "d": "M6 15L8 17L12.5 12.5M8 8V5.2C8 4.0799 8 3.51984 8.21799 3.09202C8.40973 2.71569 8.71569 2.40973 9.09202 2.21799C9.51984 2 10.0799 2 11.2 2H18.8C19.9201 2 20.4802 2 20.908 2.21799C21.2843 2.40973 21.5903 2.71569 21.782 3.09202C22 3.51984 22 4.0799 22 5.2V12.8C22 13.9201 22 14.4802 21.782 14.908C21.5903 15.2843 21.2843 15.5903 20.908 15.782C20.4802 16 19.9201 16 18.8 16H16M5.2 22H12.8C13.9201 22 14.4802 22 14.908 21.782C15.2843 21.5903 15.5903 21.2843 15.782 20.908C16 20.4802 16 19.9201 16 18.8V11.2C16 10.0799 16 9.51984 15.782 9.09202C15.5903 8.71569 15.2843 8.40973 14.908 8.21799C14.4802 8 13.9201 8 12.8 8H5.2C4.0799 8 3.51984 8 3.09202 8.21799C2.71569 8.40973 2.40973 8.71569 2.21799 9.09202C2 9.51984 2 10.0799 2 11.2V18.8C2 19.9201 2 20.4802 2.21799 20.908C2.40973 21.2843 2.71569 21.5903 3.09202 21.782C3.51984 22 4.07989 22 5.2 22Z", + "stroke": "currentColor", + "stroke-width": "2", + "stroke-linecap": "round", + "stroke-linejoin": "round" + }, + "children": [] + } + ] + } + ] + }, + "name": "CheckDone01" +} \ No newline at end of file diff --git a/web/app/components/base/icons/src/vender/line/general/CheckDone01.tsx b/web/app/components/base/icons/src/vender/line/general/CheckDone01.tsx new file mode 100644 index 0000000000..5b52debb0e --- /dev/null +++ b/web/app/components/base/icons/src/vender/line/general/CheckDone01.tsx @@ -0,0 +1,16 @@ +// GENERATE BY script +// DON NOT EDIT IT MANUALLY + +import * as React from 'react' +import data from './CheckDone01.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 = 'CheckDone01' + +export default Icon diff --git a/web/app/components/base/icons/src/vender/line/general/index.ts b/web/app/components/base/icons/src/vender/line/general/index.ts index 879e619902..0616292a11 100644 --- a/web/app/components/base/icons/src/vender/line/general/index.ts +++ b/web/app/components/base/icons/src/vender/line/general/index.ts @@ -1,5 +1,6 @@ export { default as AtSign } from './AtSign' export { default as Bookmark } from './Bookmark' +export { default as CheckDone01 } from './CheckDone01' export { default as Check } from './Check' export { default as DotsHorizontal } from './DotsHorizontal' export { default as Edit02 } from './Edit02' diff --git a/web/app/components/workflow/nodes/_base/components/input-var-type-icon.tsx b/web/app/components/workflow/nodes/_base/components/input-var-type-icon.tsx new file mode 100644 index 0000000000..22c406866f --- /dev/null +++ b/web/app/components/workflow/nodes/_base/components/input-var-type-icon.tsx @@ -0,0 +1,31 @@ +'use client' +import type { FC } from 'react' +import React from 'react' +import { InputVarType } from '../../../types' +import { AlignLeft, LetterSpacing01 } from '@/app/components/base/icons/src/vender/line/editor' +import { CheckDone01, Hash02 } from '@/app/components/base/icons/src/vender/line/general' + +type Props = { + className?: string + type: InputVarType +} + +const getIcon = (type: InputVarType) => { + return ({ + [InputVarType.textInput]: LetterSpacing01, + [InputVarType.paragraph]: AlignLeft, + [InputVarType.select]: CheckDone01, + [InputVarType.number]: Hash02, + } as any)[type] || LetterSpacing01 +} + +const InputVarTypeIcon: FC = ({ + className, + type, +}) => { + const Icon = getIcon(type) + return ( + + ) +} +export default React.memo(InputVarTypeIcon) diff --git a/web/app/components/workflow/nodes/if-else/mock.ts b/web/app/components/workflow/nodes/if-else/mock.ts index 4c719c5df1..cbafa33143 100644 --- a/web/app/components/workflow/nodes/if-else/mock.ts +++ b/web/app/components/workflow/nodes/if-else/mock.ts @@ -1,7 +1,7 @@ -import type { IfElseType } from './types' +import type { IfElseNodeType } from './types' import { ComparisonOperator, LogicalOperator } from './types' -export const mockData: IfElseType = { +export const mockData: IfElseNodeType = { title: 'Test', desc: 'Test', type: 'Test', diff --git a/web/app/components/workflow/nodes/if-else/types.ts b/web/app/components/workflow/nodes/if-else/types.ts index 7746faf931..a952f39184 100644 --- a/web/app/components/workflow/nodes/if-else/types.ts +++ b/web/app/components/workflow/nodes/if-else/types.ts @@ -31,7 +31,7 @@ export type Condition = { value: string } -export type IfElseType = CommonNodeType & { +export type IfElseNodeType = CommonNodeType & { logical_operator: LogicalOperator conditions: Condition[] } diff --git a/web/app/components/workflow/nodes/start/mock.ts b/web/app/components/workflow/nodes/start/mock.ts new file mode 100644 index 0000000000..a10ddf9dbc --- /dev/null +++ b/web/app/components/workflow/nodes/start/mock.ts @@ -0,0 +1,44 @@ +import type { StartNodeType } from './types' +import { InputVarType } from '@/app/components/workflow/types' + +export const mockData: StartNodeType = { + title: 'Test', + desc: 'Test', + type: 'Test', + variables: [ + { + type: InputVarType.textInput, + label: 'Test', + variable: 'str', + max_length: 10, + default: 'test', + required: true, + hint: 'Test', + }, + { + type: InputVarType.paragraph, + label: 'Test', + variable: 'para', + default: 'test', + required: true, + hint: 'Test', + }, + { + type: InputVarType.select, + label: 'Test', + variable: 'sel', + default: 'test', + required: false, + hint: 'Test', + options: ['op1', 'op2'], + }, + { + type: InputVarType.number, + label: 'Test', + variable: 'num', + default: '1', + required: true, + hint: 'Test', + }, + ], +} diff --git a/web/app/components/workflow/nodes/start/node.tsx b/web/app/components/workflow/nodes/start/node.tsx index 3f2d7a2d3f..80a2f27570 100644 --- a/web/app/components/workflow/nodes/start/node.tsx +++ b/web/app/components/workflow/nodes/start/node.tsx @@ -1,8 +1,31 @@ import type { FC } from 'react' +import { useTranslation } from 'react-i18next' +import InputVarTypeIcon from '../_base/components/input-var-type-icon' +import { mockData } from './mock' +import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development' +const i18nPrefix = 'workflow.nodes.start' const Node: FC = () => { + const { t } = useTranslation() + const { variables } = mockData return ( -
start node
+
+
+ {variables.map(variable => ( +
+
+ + {variable.variable} +
+ +
+ {variable.required && {t(`${i18nPrefix}.required`)}} + +
+
+ ))} +
+
) } diff --git a/web/app/components/workflow/nodes/start/types.ts b/web/app/components/workflow/nodes/start/types.ts new file mode 100644 index 0000000000..18834b8af3 --- /dev/null +++ b/web/app/components/workflow/nodes/start/types.ts @@ -0,0 +1,5 @@ +import type { CommonNodeType, InputVar } from '@/app/components/workflow/types' + +export type StartNodeType = CommonNodeType & { + variables: InputVar[] +} diff --git a/web/app/components/workflow/types.ts b/web/app/components/workflow/types.ts index 95b82a0140..69847ac480 100644 --- a/web/app/components/workflow/types.ts +++ b/web/app/components/workflow/types.ts @@ -36,6 +36,26 @@ export type Variable = { value_selector: ValueSelector } +export enum InputVarType { + textInput = 'text-input', + paragraph = 'paragraph', + select = 'select', + number = 'number', + url = 'url', + files = 'files', +} + +export type InputVar = { + type: InputVarType + label: string + variable: string + max_length?: number + default?: string + required: boolean + hint?: string + options?: string[] +} + export type ModelConfig = { provider: string name: string diff --git a/web/i18n/lang/workflow.en.ts b/web/i18n/lang/workflow.en.ts index 4b8d779c99..221efc0c91 100644 --- a/web/i18n/lang/workflow.en.ts +++ b/web/i18n/lang/workflow.en.ts @@ -4,6 +4,9 @@ const translation = { outputVars: 'Output Variables', insertVarTip: 'Insert Variable', }, + start: { + required: 'required', + }, directAnswer: { answer: 'Answer', inputVars: 'Input Variables', diff --git a/web/i18n/lang/workflow.zh.ts b/web/i18n/lang/workflow.zh.ts index 9384c18bac..76cd83c490 100644 --- a/web/i18n/lang/workflow.zh.ts +++ b/web/i18n/lang/workflow.zh.ts @@ -4,6 +4,9 @@ const translation = { outputVars: '输出变量', insertVarTip: '插入变量', }, + start: { + required: '必填', + }, directAnswer: { answer: '回复', inputVars: '输入变量',