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

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

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

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

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

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

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

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

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

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

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]'
       />
+      <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 (
+    <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>
   )
 }
 

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

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,7 +28,6 @@ const Panel: FC = () => {
   // const isChatMode = modelMode === 'chat'
 
   return (
-    <BasePanel>
     <div className='mt-2 px-4 space-y-4'>
       <Field
         title={t(`${i18nPrefix}.model`)}
@@ -97,7 +95,6 @@ const Panel: FC = () => {
           Functions
         </Field> */}
     </div>
-    </BasePanel>
   )
 }
 

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

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

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

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

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

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

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

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