Commit 474c7865 authored by Joel's avatar Joel

feat: get and set value from store

parent bd205f63
...@@ -4,18 +4,51 @@ import type { FC } from 'react' ...@@ -4,18 +4,51 @@ import type { FC } from 'react'
import { memo } from 'react' import { memo } from 'react'
import Workflow from '@/app/components/workflow' import Workflow from '@/app/components/workflow'
import { BlockEnum } from '@/app/components/workflow/types' 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 = [ 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.IfElse/* 6 */, BlockEnum.Code/* 7 */, BlockEnum.TemplateTransform/* 8 */, BlockEnum.HttpRequest/* 9 */, BlockEnum.Tool/* 10 */,
BlockEnum.VariableAssigner/* 11 */, BlockEnum.End/* 12 */, BlockEnum.VariableAssigner/* 11 */, BlockEnum.End/* 12 */,
].map((item, i) => ({ ].map((item, i) => {
id: `${i + 1}`, const payload = allMockData[item]
type: 'custom', return ({
position: { x: 330, y: 30 + i * 300 }, id: `${i + 1}`,
data: { type: item, name: item }, type: 'custom',
selected: i === 0, // for test: always select the first node 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 initialNodes = nodes
const initialEdges = [ const initialEdges = [
......
import { BlockEnum } from '../../types'
import { CodeLanguage } from './types' import { CodeLanguage } from './types'
import type { CodeNodeType } from './types' import type { CodeNodeType } from './types'
export const mockData: CodeNodeType = { export const mockData: CodeNodeType = {
title: 'Test', title: 'Test',
desc: 'Test', desc: 'Test',
type: 'Test', type: BlockEnum.Code,
variables: [ variables: [
{ {
variable: 'name', variable: 'name',
......
import { BlockEnum } from '../../types'
import type { DirectAnswerNodeType } from './types' import type { DirectAnswerNodeType } from './types'
export const mockData: DirectAnswerNodeType = { export const mockData: DirectAnswerNodeType = {
title: 'Test', title: 'Test',
desc: 'Test', desc: 'Test',
type: 'Test', type: BlockEnum.DirectAnswer,
variables: [ variables: [
{ {
variable: 'age', variable: 'age',
......
import type { StartNodeType } from './types' import type { StartNodeType } from './types'
import { InputVarType } from '@/app/components/workflow/types' import { BlockEnum, InputVarType } from '@/app/components/workflow/types'
export const mockData: StartNodeType = { export const mockData: StartNodeType = {
title: 'Test', title: 'Test',
desc: 'Test', desc: 'Test',
type: 'Test', type: BlockEnum.Start,
variables: [ variables: [
{ {
type: InputVarType.textInput, type: InputVarType.textInput,
label: 'Test', label: 'Test',
variable: 'str', variable: 'a',
max_length: 10, max_length: 10,
default: 'test', default: 'test',
required: true, required: true,
......
import type { FC } from 'react' import type { FC } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import InputVarTypeIcon from '../_base/components/input-var-type-icon' 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 { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
import type { NodeProps } from '@/app/components/workflow/types'
const i18nPrefix = 'workflow.nodes.start' const i18nPrefix = 'workflow.nodes.start'
const Node: FC = () => { const Node: FC<NodeProps<StartNodeType>> = ({
data,
}) => {
const { t } = useTranslation() const { t } = useTranslation()
const { variables } = mockData const { variables } = data
return ( return (
<div className='px-3'> <div className='px-3'>
......
...@@ -2,16 +2,20 @@ import type { FC } from 'react' ...@@ -2,16 +2,20 @@ import type { FC } from 'react'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import VarList from './components/var-list' import VarList from './components/var-list'
import useConfig from './use-config' 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 Split from '@/app/components/workflow/nodes/_base/components/split'
import Field from '@/app/components/workflow/nodes/_base/components/field' import Field from '@/app/components/workflow/nodes/_base/components/field'
import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars' import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
import AddButton from '@/app/components/base/button/add-button' import AddButton from '@/app/components/base/button/add-button'
import ConfigVarModal from '@/app/components/app/configuration/config-var/config-modal' 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 i18nPrefix = 'workflow.nodes.start'
const Panel: FC = () => { const Panel: FC<NodeProps<StartNodeType>> = ({
id,
data,
}) => {
const { t } = useTranslation() const { t } = useTranslation()
const readOnly = false const readOnly = false
const { const {
...@@ -21,7 +25,7 @@ const Panel: FC = () => { ...@@ -21,7 +25,7 @@ const Panel: FC = () => {
handleAddVariable, handleAddVariable,
hideAddVarModal, hideAddVarModal,
handleVarListChange, handleVarListChange,
} = useConfig(mockData) } = useConfig(id, data)
return ( return (
<div className='mt-2'> <div className='mt-2'>
......
import { useCallback, useState } from 'react' import { useCallback } from 'react'
import produce from 'immer' import produce from 'immer'
import { useBoolean } from 'ahooks' import { useBoolean } from 'ahooks'
import type { StartNodeType } from './types' import type { StartNodeType } from './types'
import type { InputVar } from '@/app/components/workflow/types' import type { InputVar } from '@/app/components/workflow/types'
import { useWorkflow } from '@/app/components/workflow/hooks'
const useConfig = (initInputs: StartNodeType) => { const useConfig = (id: string, payload: StartNodeType) => {
const [inputs, setInputs] = useState<StartNodeType>(initInputs) const { handleNodeDataUpdate } = useWorkflow()
// const [inputs, setInputs] = useState<StartNodeType>(initInputs)
const inputs = payload
const setInputs = (newInputs: StartNodeType) => {
handleNodeDataUpdate({
id,
data: newInputs,
})
}
const [isShowAddVarModal, { const [isShowAddVarModal, {
setTrue: showAddVarModal, setTrue: showAddVarModal,
......
import { BlockEnum } from '../../types'
import type { TemplateTransformNodeType } from './types' import type { TemplateTransformNodeType } from './types'
export const mockData: TemplateTransformNodeType = { export const mockData: TemplateTransformNodeType = {
title: 'Test', title: 'Test',
desc: 'Test', desc: 'Test',
type: 'Test', type: BlockEnum.TemplateTransform,
variables: [ variables: [
{ {
variable: 'name', variable: 'name',
......
...@@ -23,7 +23,7 @@ export type Branch = { ...@@ -23,7 +23,7 @@ export type Branch = {
name: string name: string
} }
export type CommonNodeType = { export type CommonNodeType<T = {}> = {
index?: { index?: {
x: number x: number
y: number y: number
...@@ -34,10 +34,11 @@ export type CommonNodeType = { ...@@ -34,10 +34,11 @@ export type CommonNodeType = {
title: string title: string
desc: string desc: string
type: BlockEnum type: BlockEnum
} } & T
export type Node = ReactFlowNode<CommonNodeType> export type Node = ReactFlowNode<CommonNodeType>
export type SelectedNode = Pick<Node, 'id' | 'data'> export type SelectedNode = Pick<Node, 'id' | 'data'>
export type NodeProps<T> = { id: string; data: CommonNodeType<T> }
export type Edge = ReactFlowEdge export type Edge = ReactFlowEdge
export type ValueSelector = string[] // [nodeId, key | obj key path] export type ValueSelector = string[] // [nodeId, key | obj key path]
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment