opensource
/
dify
mirror of https://github.com/langgenius/dify.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

base-node base-panel

This commit is contained in:
StyleZhang 2024-02-19 19:44:48 +08:00
parent c7ee8ac1c7
commit c909319413
25 changed files with 120 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
web/app/components/workflow/nodes/_base/node.tsx
View File

@ -1,16 +1,15 @@
import type {
FC,
ReactNode,
ReactElement,
} from 'react'
import {
cloneElement,
memo,
useCallback,
useMemo,
} from 'react'
import {
getOutgoers,
useNodeId,
} from 'reactflow'
import type { NodeProps } from 'reactflow'
import { getOutgoers } from 'reactflow'
import { useWorkflowContext } from '../../context'
import BlockSelector from '../../block-selector'
import { getBlockByType } from '../../block-selector/utils'
@ -18,13 +17,14 @@ import BlockIcon from '../../block-icon'
import { Plus } from '@/app/components/base/icons/src/vender/line/general'
type BaseNodeProps = {
children: ReactNode
}
children: ReactElement
} & Pick<NodeProps, 'id' | 'data'>
const BaseNode: FC<BaseNodeProps> = ({
id: nodeId,
data,
children,
}) => {
const nodeId = useNodeId()
const {
nodes,
edges,
@ -74,7 +74,7 @@ const BaseNode: FC<BaseNodeProps> = ({
{getBlockByType(currentNode!.data.type)?.title}
</div>
</div>
{children}
{cloneElement(children, { id: nodeId, data })}
<div className='px-3 pt-1 pb-1 text-xs text-gray-500'>
Define the initial parameters for launching a workflow
</div>

17
web/app/components/workflow/nodes/_base/panel.tsx
View File

@ -1,7 +1,12 @@
import type {
FC,
ReactNode,
ReactElement,
} from 'react'
import {
cloneElement,
memo,
} from 'react'
import type { NodeProps } from 'reactflow'
import { useWorkflowContext } from '../../context'
import BlockIcon from '../../block-icon'
import { getBlockByType } from '../../block-selector/utils'
@ -10,10 +15,12 @@ import { XClose } from '@/app/components/base/icons/src/vender/line/general'
import { GitBranch01 } from '@/app/components/base/icons/src/vender/line/development'
type BasePanelProps = {
children?: ReactNode
}
children: ReactElement
} & Pick<NodeProps, 'id' | 'data'>
const BasePanel: FC<BasePanelProps> = ({
id,
data,
children,
}) => {
const {
@ -47,7 +54,7 @@ const BasePanel: FC<BasePanelProps> = ({
</div>
</div>
<div className='py-2 border-b-[0.5px] border-black/5'>
{children}
{cloneElement(children, { id, data })}
</div>
<div className='p-4'>
<div className='flex items-center mb-1 text-gray-700 text-[13px] font-semibold'>
@ -63,4 +70,4 @@ const BasePanel: FC<BasePanelProps> = ({
)
}
export default BasePanel
export default memo(BasePanel)

5
web/app/components/workflow/nodes/code/node.tsx
View File

@ -1,11 +1,8 @@
import type { FC } from 'react'
import BaseNode from '../_base/node'
const Node: FC = () => {
return (
<BaseNode>
<div>code</div>
</BaseNode>
<div>code</div>
)
}

5
web/app/components/workflow/nodes/code/panel.tsx
View File

@ -1,11 +1,8 @@
import type { FC } from 'react'
import BasePanel from '../_base/panel'
const Panel: FC = () => {
return (
<BasePanel>
<div>start panel inputs</div>
</BasePanel>
<div>start panel inputs</div>
)
}

5
web/app/components/workflow/nodes/direct-answer/node.tsx
View File

@ -1,11 +1,8 @@
import type { FC } from 'react'
import BaseNode from '../_base/node'
const Node: FC = () => {
return (
<BaseNode>
<div>directAnswer</div>
</BaseNode>
<div>directAnswer</div>
)
}

5
web/app/components/workflow/nodes/direct-answer/panel.tsx
View File

@ -1,11 +1,8 @@
import type { FC } from 'react'
import BasePanel from '../_base/panel'
const Panel: FC = () => {
return (
<BasePanel>
<div>start panel inputs</div>
</BasePanel>
<div>start panel inputs</div>
)
}

5
web/app/components/workflow/nodes/end/node.tsx
View File

@ -1,11 +1,8 @@
import type { FC } from 'react'
import BaseNode from '../_base/node'
const Node: FC = () => {
return (
<BaseNode>
<div>end</div>
</BaseNode>
<div>end</div>
)
}

5
web/app/components/workflow/nodes/end/panel.tsx
View File

@ -1,11 +1,8 @@
import type { FC } from 'react'
import BasePanel from '../_base/panel'
const Panel: FC = () => {
return (
<BasePanel>
<div>start panel inputs</div>
</BasePanel>
<div>start panel inputs</div>
)
}

5
web/app/components/workflow/nodes/http/node.tsx
View File

@ -1,11 +1,8 @@
import type { FC } from 'react'
import BaseNode from '../_base/node'
const Node: FC = () => {
return (
<BaseNode>
<div>http</div>
</BaseNode>
<div>http</div>
)
}

5
web/app/components/workflow/nodes/http/panel.tsx
View File

@ -1,11 +1,8 @@
import type { FC } from 'react'
import BasePanel from '../_base/panel'
const Panel: FC = () => {
return (
<BasePanel>
<div>start panel inputs</div>
</BasePanel>
<div>start panel inputs</div>
)
}

5
web/app/components/workflow/nodes/if-else/node.tsx
View File

@ -1,11 +1,8 @@
import type { FC } from 'react'
import BaseNode from '../_base/node'
const Node: FC = () => {
return (
<BaseNode>
<div>if else</div>
</BaseNode>
<div>if else</div>
)
}

5
web/app/components/workflow/nodes/if-else/panel.tsx
View File

@ -1,11 +1,8 @@
import type { FC } from 'react'
import BasePanel from '../_base/panel'
const Panel: FC = () => {
return (
<BasePanel>
<div>start panel inputs</div>
</BasePanel>
<div>start panel inputs</div>
)
}

17
web/app/components/workflow/nodes/index.tsx
View File

@ -9,8 +9,11 @@ import {
NodeMap,
PanelMap,
} from './constants'
import BaseNode from './_base/node'
import BasePanel from './_base/panel'
const CustomNode = ({
id,
data,
}: NodeProps) => {
const NodeComponent = NodeMap[data.type]
@ -22,7 +25,12 @@ const CustomNode = ({
position={Position.Top}
className='!-top-0.5 !w-2 !h-0.5 !bg-primary-500 !rounded-none !border-none !min-h-[2px]'
/>
<NodeComponent />
<BaseNode
id={id}
data={data}
>
<NodeComponent />
</BaseNode>
<Handle
type='source'
position={Position.Bottom}
@ -41,7 +49,12 @@ export const Panel = () => {
const PanelComponent = PanelMap[selectedNode.data.type]
return (
<PanelComponent />
<BasePanel
id={selectedNode.id}
data={selectedNode.data}
>
<PanelComponent />
</BasePanel>
)
}

5
web/app/components/workflow/nodes/knowledge-retrieval/node.tsx
View File

@ -1,11 +1,8 @@
import type { FC } from 'react'
import BaseNode from '../_base/node'
const Node: FC = () => {
return (
<BaseNode>
<div>knowledge-retrieval</div>
</BaseNode>
<div>knowledge-retrieval</div>
)
}

5
web/app/components/workflow/nodes/knowledge-retrieval/panel.tsx
View File

@ -1,11 +1,8 @@
import type { FC } from 'react'
import BasePanel from '../_base/panel'
const Panel: FC = () => {
return (
<BasePanel>
<div>start panel inputs</div>
</BasePanel>
<div>start panel inputs</div>
)
}

7
web/app/components/workflow/nodes/llm/node.tsx
View File

@ -1,17 +1,12 @@
import type { FC } from 'react'
import { useTranslation } from 'react-i18next'
import BaseNode from '../_base/node'
const i18nPrefix = 'workflow.nodes.llm'
const Node: FC = () => {
const { t } = useTranslation()
return (
<BaseNode>
<div>
llm
</div>
</BaseNode>
<div>llm</div>
)
}

129
web/app/components/workflow/nodes/llm/panel.tsx
View File

@ -1,6 +1,5 @@
import type { FC } from 'react'
import { useTranslation } from 'react-i18next'
import BasePanel from '../_base/panel'
import VarList from '../_base/components/variable/var-list'
import useConfig from './use-config'
import { mockLLMNodeData } from './mock'
@ -29,75 +28,73 @@ const Panel: FC = () => {
// const isChatMode = modelMode === 'chat'
return (
<BasePanel>
<div className='mt-2 px-4 space-y-4'>
<Field
title={t(`${i18nPrefix}.model`)}
>
<ModelParameterModal
popupClassName='!w-[387px]'
isAdvancedMode={true}
mode={model?.mode}
provider={model?.provider}
completionParams={model.completion_params}
modelId={model.name}
setModel={handleModelChanged}
onCompletionParamsChange={handleCompletionParamsChange}
hideDebugWithMultipleModel
debugWithMultipleModel={false}
/>
</Field>
<div className='mt-2 px-4 space-y-4'>
<Field
title={t(`${i18nPrefix}.model`)}
>
<ModelParameterModal
popupClassName='!w-[387px]'
isAdvancedMode={true}
mode={model?.mode}
provider={model?.provider}
completionParams={model.completion_params}
modelId={model.name}
setModel={handleModelChanged}
onCompletionParamsChange={handleCompletionParamsChange}
hideDebugWithMultipleModel
debugWithMultipleModel={false}
/>
</Field>
<Field
title={t(`${i18nPrefix}.variables`)}
operations={
<AddButton onClick={handleAddVariable} />
}
>
<VarList
readonly={readOnly}
list={inputs.variables}
onChange={handleVarListChange}
/>
</Field>
<Field
title={t(`${i18nPrefix}.variables`)}
operations={
<AddButton onClick={handleAddVariable} />
}
>
<VarList
readonly={readOnly}
list={inputs.variables}
onChange={handleVarListChange}
/>
</Field>
<Field
title={t(`${i18nPrefix}.context`)}
operations={
<Switch
defaultValue={inputs.context.enabled}
onChange={toggleContextEnabled}
size='md'
/>
}
>
{inputs.context.enabled
? (
<div>Context</div>
)
: null}
</Field>
<Field
title={t(`${i18nPrefix}.prompt`)}
>
Prompt
</Field>
<Split />
<Field
title={t(`${i18nPrefix}.vision`)}
<Field
title={t(`${i18nPrefix}.context`)}
operations={
<Switch
defaultValue={inputs.context.enabled}
onChange={toggleContextEnabled}
size='md'
/>
}
>
{inputs.context.enabled
? (
<div>Context</div>
)
: null}
</Field>
<Field
title={t(`${i18nPrefix}.prompt`)}
>
Prompt
</Field>
<Split />
<Field
title={t(`${i18nPrefix}.vision`)}
inline
>
Vision
</Field>
{/* This version not support function */}
{/* <Field
title={t(`${i18nPrefix}.fu`)}
inline
>
Vision
</Field>
{/* This version not support function */}
{/* <Field
title={t(`${i18nPrefix}.fu`)}
inline
>
Functions
</Field> */}
</div>
</BasePanel>
Functions
</Field> */}
</div>
)
}

5
web/app/components/workflow/nodes/question-classifier/node.tsx
View File

@ -1,11 +1,8 @@
import type { FC } from 'react'
import BaseNode from '../_base/node'
const Node: FC = () => {
return (
<BaseNode>
<div>question-classifier</div>
</BaseNode>
<div>question-classifier</div>
)
}

5
web/app/components/workflow/nodes/question-classifier/panel.tsx
View File

@ -1,11 +1,8 @@
import type { FC } from 'react'
import BasePanel from '../_base/panel'
const Panel: FC = () => {
return (
<BasePanel>
<div>start panel inputs</div>
</BasePanel>
<div>start panel inputs</div>
)
}

5
web/app/components/workflow/nodes/start/node.tsx
View File

@ -1,11 +1,8 @@
import type { FC } from 'react'
import BaseNode from '../_base/node'
const Node: FC = () => {
return (
<BaseNode>
<div>start node</div>
</BaseNode>
<div>start node</div>
)
}

5
web/app/components/workflow/nodes/start/panel.tsx
View File

@ -1,11 +1,8 @@
import type { FC } from 'react'
import BasePanel from '../_base/panel'
const Panel: FC = () => {
return (
<BasePanel>
<div>start panel inputs</div>
</BasePanel>
<div>start panel inputs</div>
)
}

5
web/app/components/workflow/nodes/template-transform/node.tsx
View File

@ -1,11 +1,8 @@
import type { FC } from 'react'
import BaseNode from '../_base/node'
const Node: FC = () => {
return (
<BaseNode>
<div>template-transform</div>
</BaseNode>
<div>template-transform</div>
)
}

5
web/app/components/workflow/nodes/template-transform/panel.tsx
View File

@ -1,11 +1,8 @@
import type { FC } from 'react'
import BasePanel from '../_base/panel'
const Panel: FC = () => {
return (
<BasePanel>
<div>start panel inputs</div>
</BasePanel>
<div>start panel inputs</div>
)
}

5
web/app/components/workflow/nodes/tool/node.tsx
View File

@ -1,11 +1,8 @@
import type { FC } from 'react'
import BaseNode from '../_base/node'
const Node: FC = () => {
return (
<BaseNode>
<div>tool</div>
</BaseNode>
<div>tool</div>
)
}

5
web/app/components/workflow/nodes/tool/panel.tsx
View File

@ -1,11 +1,8 @@
import type { FC } from 'react'
import BasePanel from '../_base/panel'
const Panel: FC = () => {
return (
<BasePanel>
<div>start panel inputs</div>
</BasePanel>
<div>start panel inputs</div>
)
}