base-node base-panel

web/app/components/workflow/nodes/_base/node.tsx

 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>

web/app/components/workflow/nodes/_base/panel.tsx

 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)

web/app/components/workflow/nodes/code/node.tsx

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

web/app/components/workflow/nodes/code/panel.tsx

 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>
   )
 }
 

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

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

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

 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>
   )
 }
 

web/app/components/workflow/nodes/end/node.tsx

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

web/app/components/workflow/nodes/end/panel.tsx

 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>
   )
 }
 

web/app/components/workflow/nodes/http/node.tsx

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

web/app/components/workflow/nodes/http/panel.tsx

 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>
   )
 }
 

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

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

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

 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>
   )
 }
 

web/app/components/workflow/nodes/index.tsx

@@ -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>
   )
 }
 

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

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

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

 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>
   )
 }
 

web/app/components/workflow/nodes/llm/node.tsx

 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>
   )
 }
 

web/app/components/workflow/nodes/llm/panel.tsx

 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>
   )
 }
 

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

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

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

 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>
   )
 }
 

web/app/components/workflow/nodes/start/node.tsx

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

web/app/components/workflow/nodes/start/panel.tsx

 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>
   )
 }
 

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

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

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

 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>
   )
 }
 

web/app/components/workflow/nodes/tool/node.tsx

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

web/app/components/workflow/nodes/tool/panel.tsx

 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>
   )
 }