feat: get and set value from store

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 = [

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',

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',

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,

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<NodeProps<StartNodeType>> = ({
+  data,
+}) => {
   const { t } = useTranslation()
-  const { variables } = mockData
+  const { variables } = data
 
   return (
     <div className='px-3'>

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<NodeProps<StartNodeType>> = ({
+  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 (
     <div className='mt-2'>

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<StartNodeType>(initInputs)
+import { useWorkflow } from '@/app/components/workflow/hooks'
+const useConfig = (id: string, payload: StartNodeType) => {
+  const { handleNodeDataUpdate } = useWorkflow()
+  // const [inputs, setInputs] = useState<StartNodeType>(initInputs)
+  const inputs = payload
+  const setInputs = (newInputs: StartNodeType) => {
+    handleNodeDataUpdate({
+      id,
+      data: newInputs,
+    })
+  }
 
   const [isShowAddVarModal, {
     setTrue: showAddVarModal,

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',

web/app/components/workflow/types.ts

@@ -23,7 +23,7 @@ export type Branch = {
   name: string
 }
 
-export type CommonNodeType = {
+export type CommonNodeType<T = {}> = {
   index?: {
     x: number
     y: number
@@ -34,10 +34,11 @@ export type CommonNodeType = {
   title: string
   desc: string
   type: BlockEnum
-}
+} & T
 
 export type Node = ReactFlowNode<CommonNodeType>
 export type SelectedNode = Pick<Node, 'id' | 'data'>
+export type NodeProps<T> = { id: string; data: CommonNodeType<T> }
 export type Edge = ReactFlowEdge
 
 export type ValueSelector = string[] // [nodeId, key | obj key path]