base panel

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

@@ -2,36 +2,20 @@ import type {
   FC,
   ReactNode,
 } from 'react'
-import { useState } from 'react'
 import { useWorkflowContext } from '../../context'
 import BlockIcon from '../../block-icon'
 import { getBlockByType } from '../../block-selector/utils'
 import NextStep from './components/next-step'
-import {
-  LogIn04,
-  LogOut04,
-  XClose,
-} from '@/app/components/base/icons/src/vender/line/general'
+import { XClose } from '@/app/components/base/icons/src/vender/line/general'
 import { GitBranch01 } from '@/app/components/base/icons/src/vender/line/development'
 
-enum TabEnum {
-  Inputs = 'inputs',
-  Outputs = 'outputs',
-}
-
 type BasePanelProps = {
-  defaultElement?: ReactNode
-  inputsElement?: ReactNode
-  outputsElement?: ReactNode
+  children?: ReactNode
 }
 
 const BasePanel: FC<BasePanelProps> = ({
-  defaultElement,
-  inputsElement,
-  outputsElement,
+  children,
 }) => {
-  const initialActiveTab = inputsElement ? TabEnum.Inputs : outputsElement ? TabEnum.Outputs : ''
-  const [activeTab, setActiveTab] = useState(initialActiveTab)
   const {
     handleSelectedNodeIdChange,
     selectedNode,
@@ -61,45 +45,9 @@ const BasePanel: FC<BasePanelProps> = ({
             Add description...
           </div>
         </div>
-        {
-          (inputsElement || outputsElement) && (
-            <div className='flex items-center px-4 h-[42px] text-[13px] font-semibold text-gray-400'>
-              {
-                inputsElement && (
-                  <div
-                    className={`relative flex items-center h-full cursor-pointer ${activeTab === TabEnum.Inputs && 'text-gray-700'}`}
-                    onClick={() => setActiveTab(TabEnum.Inputs)}
-                  >
-                    <LogIn04 className='mr-1 w-4 h-4' />
-                    INPUTS
-                    {
-                      activeTab === TabEnum.Inputs && <div className='absolute left-0 bottom-0 w-full h-0.5 bg-primary-600' />
-                    }
-                  </div>
-                )
-              }
-              {
-                outputsElement && (
-                  <div
-                    className={`relative flex items-center ml-4 h-full cursor-pointer ${activeTab === TabEnum.Outputs && 'text-gray-700'}`}
-                    onClick={() => setActiveTab(TabEnum.Outputs)}
-                  >
-                    <LogOut04 className='mr-1 w-4 h-4' />
-                    OUTPUTS
-                    {
-                      activeTab === TabEnum.Outputs && <div className='absolute left-0 bottom-0 w-full h-0.5 bg-primary-600' />
-                    }
-                  </div>
-                )
-              }
-            </div>
-          )
-        }
       </div>
       <div className='py-2 border-b-[0.5px] border-black/5'>
-        {defaultElement}
-        {activeTab === TabEnum.Inputs && inputsElement}
-        {activeTab === TabEnum.Outputs && outputsElement}
+        {children}
       </div>
       <div className='p-4'>
         <div className='flex items-center mb-1 text-gray-700 text-[13px] font-semibold'>

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

@@ -3,10 +3,9 @@ import BasePanel from '../_base/panel'
 
 const Panel: FC = () => {
   return (
-    <BasePanel
-      inputsElement={<div>start panel inputs</div>}
-      outputsElement={<div>start panel outputs</div>}
-    />
+    <BasePanel>
+      <div>start panel inputs</div>
+    </BasePanel>
   )
 }
 

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

@@ -3,10 +3,9 @@ import BasePanel from '../_base/panel'
 
 const Panel: FC = () => {
   return (
-    <BasePanel
-      inputsElement={<div>start panel inputs</div>}
-      outputsElement={<div>start panel outputs</div>}
-    />
+    <BasePanel>
+      <div>start panel inputs</div>
+    </BasePanel>
   )
 }
 

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

@@ -3,10 +3,9 @@ import BasePanel from '../_base/panel'
 
 const Panel: FC = () => {
   return (
-    <BasePanel
-      inputsElement={<div>start panel inputs</div>}
-      outputsElement={<div>start panel outputs</div>}
-    />
+    <BasePanel>
+      <div>start panel inputs</div>
+    </BasePanel>
   )
 }
 

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

@@ -3,10 +3,9 @@ import BasePanel from '../_base/panel'
 
 const Panel: FC = () => {
   return (
-    <BasePanel
-      inputsElement={<div>start panel inputs</div>}
-      outputsElement={<div>start panel outputs</div>}
-    />
+    <BasePanel>
+      <div>start panel inputs</div>
+    </BasePanel>
   )
 }
 

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

@@ -3,10 +3,9 @@ import BasePanel from '../_base/panel'
 
 const Panel: FC = () => {
   return (
-    <BasePanel
-      inputsElement={<div>start panel inputs</div>}
-      outputsElement={<div>start panel outputs</div>}
-    />
+    <BasePanel>
+      <div>start panel inputs</div>
+    </BasePanel>
   )
 }
 

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

@@ -3,10 +3,9 @@ import BasePanel from '../_base/panel'
 
 const Panel: FC = () => {
   return (
-    <BasePanel
-      inputsElement={<div>start panel inputs</div>}
-      outputsElement={<div>start panel outputs</div>}
-    />
+    <BasePanel>
+      <div>start panel inputs</div>
+    </BasePanel>
   )
 }
 

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

@@ -3,10 +3,9 @@ import BasePanel from '../_base/panel'
 
 const Panel: FC = () => {
   return (
-    <BasePanel
-      inputsElement={<div>start panel inputs</div>}
-      outputsElement={<div>start panel outputs</div>}
-    />
+    <BasePanel>
+      <div>start panel inputs</div>
+    </BasePanel>
   )
 }
 

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

@@ -3,10 +3,9 @@ import BasePanel from '../_base/panel'
 
 const Panel: FC = () => {
   return (
-    <BasePanel
-      inputsElement={<div>start panel inputs</div>}
-      outputsElement={<div>start panel outputs</div>}
-    />
+    <BasePanel>
+      <div>start panel inputs</div>
+    </BasePanel>
   )
 }
 

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

@@ -3,10 +3,9 @@ import BasePanel from '../_base/panel'
 
 const Panel: FC = () => {
   return (
-    <BasePanel
-      inputsElement={<div>start panel inputs</div>}
-      outputsElement={<div>start panel outputs</div>}
-    />
+    <BasePanel>
+      <div>start panel inputs</div>
+    </BasePanel>
   )
 }
 

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

@@ -3,10 +3,9 @@ import BasePanel from '../_base/panel'
 
 const Panel: FC = () => {
   return (
-    <BasePanel
-      inputsElement={<div>start panel inputs</div>}
-      outputsElement={<div>start panel outputs</div>}
-    />
+    <BasePanel>
+      <div>start panel inputs</div>
+    </BasePanel>
   )
 }