From 474c7865d76343980fcf67dde348786210d797ea Mon Sep 17 00:00:00 2001 From: Joel Date: Mon, 4 Mar 2024 15:50:56 +0800 Subject: [PATCH] feat: get and set value from store --- .../(commonLayout)/workflow/nodes/page.tsx | 49 ++++++++++++++++--- .../components/workflow/nodes/code/mock.ts | 3 +- .../workflow/nodes/direct-answer/mock.ts | 3 +- .../components/workflow/nodes/start/mock.ts | 6 +-- .../components/workflow/nodes/start/node.tsx | 9 ++-- .../components/workflow/nodes/start/panel.tsx | 10 ++-- .../workflow/nodes/start/use-config.ts | 16 ++++-- .../workflow/nodes/template-transform/mock.ts | 3 +- web/app/components/workflow/types.ts | 5 +- 9 files changed, 78 insertions(+), 26 deletions(-) diff --git a/web/app/(commonLayout)/workflow/nodes/page.tsx b/web/app/(commonLayout)/workflow/nodes/page.tsx index 7dc849e616..476c0b25fb 100644 --- a/web/app/(commonLayout)/workflow/nodes/page.tsx +++ b/web/app/(commonLayout)/workflow/nodes/page.tsx @@ -4,18 +4,51 @@ import type { FC } from 'react' import { memo } from 'react' import Workflow from '@/app/components/workflow' import { BlockEnum } from '@/app/components/workflow/types' +import { mockData as StartNodeMock } from '@/app/components/workflow/nodes/start/mock' +import { mockData as DirectAnswerNodeMock } from '@/app/components/workflow/nodes/direct-answer/mock' +import { mockData as LLMNodeMock } from '@/app/components/workflow/nodes/llm/mock' +import { mockData as KnowledgeRetrievalNodeMock } from '@/app/components/workflow/nodes/knowledge-retrieval/mock' +import { mockData as QuestionClassifierNodeMock } from '@/app/components/workflow/nodes/question-classifier/mock' +import { mockData as IfElseNodeMock } from '@/app/components/workflow/nodes/if-else/mock' +import { mockData as CodeNodeMock } from '@/app/components/workflow/nodes/code/mock' +import { mockData as TemplateTransformNodeMock } from '@/app/components/workflow/nodes/template-transform/mock' +import { mockData as HttpRequestNodeMock } from '@/app/components/workflow/nodes/http/mock' +import { mockData as ToolNodeMock } from '@/app/components/workflow/nodes/tool/mock' +import { mockData as VariableAssignerNodeMock } from '@/app/components/workflow/nodes/variable-assigner/mock' +import { mockData as EndNodeMock } from '@/app/components/workflow/nodes/end/mock' +const allMockData = { + [BlockEnum.Start]: StartNodeMock, + [BlockEnum.DirectAnswer]: DirectAnswerNodeMock, + [BlockEnum.LLM]: LLMNodeMock, + [BlockEnum.KnowledgeRetrieval]: KnowledgeRetrievalNodeMock, + [BlockEnum.QuestionClassifier]: QuestionClassifierNodeMock, + [BlockEnum.IfElse]: IfElseNodeMock, + [BlockEnum.Code]: CodeNodeMock, + [BlockEnum.TemplateTransform]: TemplateTransformNodeMock, + [BlockEnum.HttpRequest]: HttpRequestNodeMock, + [BlockEnum.Tool]: ToolNodeMock, + [BlockEnum.VariableAssigner]: VariableAssignerNodeMock, + [BlockEnum.End]: EndNodeMock, +} const nodes = [ - BlockEnum.LLM/* 3 */, BlockEnum.Start/* 1 */, BlockEnum.DirectAnswer/* 2 */, BlockEnum.KnowledgeRetrieval/* 4 */, BlockEnum.QuestionClassifier/* 5 */, + BlockEnum.Start/* 1 */, BlockEnum.LLM/* 3 */, BlockEnum.DirectAnswer/* 2 */, BlockEnum.KnowledgeRetrieval/* 4 */, BlockEnum.QuestionClassifier/* 5 */, BlockEnum.IfElse/* 6 */, BlockEnum.Code/* 7 */, BlockEnum.TemplateTransform/* 8 */, BlockEnum.HttpRequest/* 9 */, BlockEnum.Tool/* 10 */, BlockEnum.VariableAssigner/* 11 */, BlockEnum.End/* 12 */, -].map((item, i) => ({ - id: `${i + 1}`, - type: 'custom', - position: { x: 330, y: 30 + i * 300 }, - data: { type: item, name: item }, - selected: i === 0, // for test: always select the first node -})) +].map((item, i) => { + const payload = allMockData[item] + return ({ + id: `${i + 1}`, + type: 'custom', + position: { x: 330, y: 30 + i * 300 }, + data: { + selected: i === 0, // for test: always select the first node + name: item, + ...payload, + }, + }) +}) + const initialNodes = nodes const initialEdges = [ diff --git a/web/app/components/workflow/nodes/code/mock.ts b/web/app/components/workflow/nodes/code/mock.ts index 5a108d7d81..6d0d095341 100644 --- a/web/app/components/workflow/nodes/code/mock.ts +++ b/web/app/components/workflow/nodes/code/mock.ts @@ -1,10 +1,11 @@ +import { BlockEnum } from '../../types' import { CodeLanguage } from './types' import type { CodeNodeType } from './types' export const mockData: CodeNodeType = { title: 'Test', desc: 'Test', - type: 'Test', + type: BlockEnum.Code, variables: [ { variable: 'name', diff --git a/web/app/components/workflow/nodes/direct-answer/mock.ts b/web/app/components/workflow/nodes/direct-answer/mock.ts index df2a373c60..856606aeb7 100644 --- a/web/app/components/workflow/nodes/direct-answer/mock.ts +++ b/web/app/components/workflow/nodes/direct-answer/mock.ts @@ -1,9 +1,10 @@ +import { BlockEnum } from '../../types' import type { DirectAnswerNodeType } from './types' export const mockData: DirectAnswerNodeType = { title: 'Test', desc: 'Test', - type: 'Test', + type: BlockEnum.DirectAnswer, variables: [ { variable: 'age', diff --git a/web/app/components/workflow/nodes/start/mock.ts b/web/app/components/workflow/nodes/start/mock.ts index a10ddf9dbc..d74113753e 100644 --- a/web/app/components/workflow/nodes/start/mock.ts +++ b/web/app/components/workflow/nodes/start/mock.ts @@ -1,15 +1,15 @@ import type { StartNodeType } from './types' -import { InputVarType } from '@/app/components/workflow/types' +import { BlockEnum, InputVarType } from '@/app/components/workflow/types' export const mockData: StartNodeType = { title: 'Test', desc: 'Test', - type: 'Test', + type: BlockEnum.Start, variables: [ { type: InputVarType.textInput, label: 'Test', - variable: 'str', + variable: 'a', max_length: 10, default: 'test', required: true, diff --git a/web/app/components/workflow/nodes/start/node.tsx b/web/app/components/workflow/nodes/start/node.tsx index 329b6d1587..5b3da661f3 100644 --- a/web/app/components/workflow/nodes/start/node.tsx +++ b/web/app/components/workflow/nodes/start/node.tsx @@ -1,13 +1,16 @@ import type { FC } from 'react' import { useTranslation } from 'react-i18next' import InputVarTypeIcon from '../_base/components/input-var-type-icon' -import { mockData } from './mock' +import type { StartNodeType } from './types' import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development' +import type { NodeProps } from '@/app/components/workflow/types' const i18nPrefix = 'workflow.nodes.start' -const Node: FC = () => { +const Node: FC> = ({ + data, +}) => { const { t } = useTranslation() - const { variables } = mockData + const { variables } = data return (
diff --git a/web/app/components/workflow/nodes/start/panel.tsx b/web/app/components/workflow/nodes/start/panel.tsx index 2324658f99..8ebe4d7088 100644 --- a/web/app/components/workflow/nodes/start/panel.tsx +++ b/web/app/components/workflow/nodes/start/panel.tsx @@ -2,16 +2,20 @@ import type { FC } from 'react' import { useTranslation } from 'react-i18next' import VarList from './components/var-list' import useConfig from './use-config' -import { mockData } from './mock' +import type { StartNodeType } from './types' import Split from '@/app/components/workflow/nodes/_base/components/split' import Field from '@/app/components/workflow/nodes/_base/components/field' import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars' import AddButton from '@/app/components/base/button/add-button' import ConfigVarModal from '@/app/components/app/configuration/config-var/config-modal' +import type { NodeProps } from '@/app/components/workflow/types' const i18nPrefix = 'workflow.nodes.start' -const Panel: FC = () => { +const Panel: FC> = ({ + id, + data, +}) => { const { t } = useTranslation() const readOnly = false const { @@ -21,7 +25,7 @@ const Panel: FC = () => { handleAddVariable, hideAddVarModal, handleVarListChange, - } = useConfig(mockData) + } = useConfig(id, data) return (
diff --git a/web/app/components/workflow/nodes/start/use-config.ts b/web/app/components/workflow/nodes/start/use-config.ts index 8578746e20..e37b70fa38 100644 --- a/web/app/components/workflow/nodes/start/use-config.ts +++ b/web/app/components/workflow/nodes/start/use-config.ts @@ -1,11 +1,19 @@ -import { useCallback, useState } from 'react' +import { useCallback } from 'react' import produce from 'immer' import { useBoolean } from 'ahooks' import type { StartNodeType } from './types' import type { InputVar } from '@/app/components/workflow/types' - -const useConfig = (initInputs: StartNodeType) => { - const [inputs, setInputs] = useState(initInputs) +import { useWorkflow } from '@/app/components/workflow/hooks' +const useConfig = (id: string, payload: StartNodeType) => { + const { handleNodeDataUpdate } = useWorkflow() + // const [inputs, setInputs] = useState(initInputs) + const inputs = payload + const setInputs = (newInputs: StartNodeType) => { + handleNodeDataUpdate({ + id, + data: newInputs, + }) + } const [isShowAddVarModal, { setTrue: showAddVarModal, diff --git a/web/app/components/workflow/nodes/template-transform/mock.ts b/web/app/components/workflow/nodes/template-transform/mock.ts index 59b2186417..a22c6013cb 100644 --- a/web/app/components/workflow/nodes/template-transform/mock.ts +++ b/web/app/components/workflow/nodes/template-transform/mock.ts @@ -1,9 +1,10 @@ +import { BlockEnum } from '../../types' import type { TemplateTransformNodeType } from './types' export const mockData: TemplateTransformNodeType = { title: 'Test', desc: 'Test', - type: 'Test', + type: BlockEnum.TemplateTransform, variables: [ { variable: 'name', diff --git a/web/app/components/workflow/types.ts b/web/app/components/workflow/types.ts index 7cc4e03c06..96c7edeb91 100644 --- a/web/app/components/workflow/types.ts +++ b/web/app/components/workflow/types.ts @@ -23,7 +23,7 @@ export type Branch = { name: string } -export type CommonNodeType = { +export type CommonNodeType = { index?: { x: number y: number @@ -34,10 +34,11 @@ export type CommonNodeType = { title: string desc: string type: BlockEnum -} +} & T export type Node = ReactFlowNode export type SelectedNode = Pick +export type NodeProps = { id: string; data: CommonNodeType } export type Edge = ReactFlowEdge export type ValueSelector = string[] // [nodeId, key | obj key path]