panel

web/app/components/workflow/context.tsx

@@ -11,6 +11,7 @@ import type {
 } from './types'
 
 export type WorkflowContextValue = {
+  mode: string
   reactFlow: ReactFlowInstance
   nodes: Node[]
   edges: Edge[]
@@ -22,6 +23,7 @@ export type WorkflowContextValue = {
 }
 
 export const WorkflowContext = createContext<WorkflowContextValue>({
+  mode: 'workflow',
   reactFlow: null as any,
   nodes: [],
   edges: [],

web/app/components/workflow/index.tsx

@@ -15,13 +15,10 @@ import {
 } from './context'
 import { useWorkflow } from './hooks'
 import Header from './header'
-import CustomNode, {
-  Panel,
-} from './nodes'
-// import AppInfoPanel from './app-info-panel'
-import DebugAndPreview from './debug-and-preview'
+import CustomNode from './nodes'
 import ZoomInOut from './zoom-in-out'
 import CustomEdge from './custom-edge'
+import Panel from './panel'
 import type { Node } from './types'
 
 const nodeTypes = {
@@ -40,8 +37,6 @@ const Workflow = () => {
   return (
     <div className='relative w-full h-full'>
       <Header />
-      {/* <AppInfoPanel /> */}
-      <DebugAndPreview />
       <Panel />
       <ZoomInOut />
       <ReactFlow
@@ -87,6 +82,7 @@ const WorkflowWrap: FC<WorkflowWrapProps> = ({
 
   return (
     <WorkflowContext.Provider value={{
+      mode: 'workflow',
       reactFlow,
       selectedNodeId,
       handleSelectedNodeIdChange,

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

@@ -16,7 +16,7 @@ const NodeControl: FC<NodeControlProps> = ({
   isRunning,
 }) => {
   return (
-    <div className='absolute left-0 -top-7 flex items-center px-0.5 h-6 bg-white rounded-lg border-[0.5px] border-gray-100 shadow-xs text-gray-500'>
+    <div className='absolute right-0 -top-7 flex items-center px-0.5 h-6 bg-white rounded-lg border-[0.5px] border-gray-100 shadow-xs text-gray-500'>
       {
         isRunning && (
           <div className='flex items-center px-1 h-5 rounded-md bg-primary-50 text-xs font-medium text-primary-600'>

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

@@ -9,9 +9,9 @@ import {
 } from 'react'
 import type { NodeProps } from 'reactflow'
 import { useWorkflowContext } from '../../context'
-import NodeControl from '../../node-control'
 import BlockIcon from '../../block-icon'
 import BlockSelector from '../../block-selector'
+import NodeControl from './components/node-control'
 
 type BaseNodeProps = {
   children: ReactElement

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

@@ -31,7 +31,7 @@ const BasePanel: FC<BasePanelProps> = ({
   } = useWorkflowContext()
 
   return (
-    <div className='absolute top-14 right-2 bottom-2 w-[420px] bg-white shadow-lg border-[0.5px] border-gray-200 rounded-2xl z-10 overflow-y-auto'>
+    <div className='mr-2 w-[420px] h-full bg-white shadow-lg border-[0.5px] border-gray-200 rounded-2xl z-10 overflow-y-auto'>
       <div className='sticky top-0 bg-white border-b-[0.5px] border-black/5'>
         <div className='flex items-center px-4 pt-3'>
           <BlockIcon

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

@@ -1,10 +1,11 @@
+import type { FC } from 'react'
 import { memo } from 'react'
 import type { NodeProps } from 'reactflow'
 import {
   Handle,
   Position,
 } from 'reactflow'
-import { useWorkflowContext } from '../context'
+import type { Node } from '../types'
 import { BlockEnum } from '../types'
 import {
   NodeComponentMap,
@@ -49,18 +50,18 @@ const CustomNode = ({
   )
 }
 
-export const Panel = memo(() => {
-  const { selectedNode } = useWorkflowContext()
-
-  if (!selectedNode)
-    return null
-
-  const PanelComponent = PanelComponentMap[selectedNode.data.type]
+type PanelProps = {
+  node: Node
+}
+export const Panel: FC<PanelProps> = memo(({
+  node,
+}) => {
+  const PanelComponent = PanelComponentMap[node.data.type]
 
   return (
     <BasePanel
-      id={selectedNode.id}
-      data={selectedNode.data}
+      id={node.id}
+      data={node.data}
     >
       <PanelComponent />
     </BasePanel>

web/app/components/workflow/panel/debug-and-preview/index.tsx

@@ -4,7 +4,7 @@ import ChatWrapper from './chat-wrapper'
 const DebugAndPreview: FC = () => {
   return (
     <div
-      className='flex flex-col absolute top-14 right-0 bottom-2 w-[400px] rounded-l-2xl border border-black/[0.02] shadow-xl z-10'
+      className='flex flex-col w-[400px] h-full rounded-l-2xl border border-black/[0.02] shadow-xl z-10'
       style={{ background: 'linear-gradient(156deg, rgba(242, 244, 247, 0.80) 0%, rgba(242, 244, 247, 0.00) 99.43%), var(--white, #FFF)' }}
     >
       <div className='shrink-0 flex items-center justify-between px-4 pt-3 pb-2'>

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

@@ -0,0 +1,49 @@
+import type { FC } from 'react'
+import {
+  memo,
+  useMemo,
+} from 'react'
+import { useWorkflowContext } from '../context'
+import { Panel as NodePanel } from '../nodes'
+import WorkflowInfo from './workflow-info'
+import DebugAndPreview from './debug-and-preview'
+
+const Panel: FC = () => {
+  const {
+    mode,
+    selectedNode,
+  } = useWorkflowContext()
+  const {
+    showWorkflowInfoPanel,
+    showNodePanel,
+    showDebugAndPreviewPanel,
+  } = useMemo(() => {
+    return {
+      showWorkflowInfoPanel: mode === 'workflow' && !selectedNode,
+      showNodePanel: selectedNode,
+      showDebugAndPreviewPanel: mode === 'chatbot' && !selectedNode,
+    }
+  }, [mode, selectedNode])
+
+  return (
+    <div className='absolute top-14 right-0 bottom-2 flex'>
+      {
+        showNodePanel && (
+          <NodePanel node={selectedNode!} />
+        )
+      }
+      {
+        showWorkflowInfoPanel && (
+          <WorkflowInfo />
+        )
+      }
+      {
+        showDebugAndPreviewPanel && (
+          <DebugAndPreview />
+        )
+      }
+    </div>
+  )
+}
+
+export default memo(Panel)

web/app/components/workflow/panel/workflow-info.tsx

@@ -1,19 +1,13 @@
 import type { FC } from 'react'
 import { memo } from 'react'
-import BlockIcon from './block-icon'
-import { BlockEnum } from './types'
-import { useWorkflowContext } from './context'
+import BlockIcon from '../block-icon'
+import { BlockEnum } from '../types'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
 import { FileCheck02 } from '@/app/components/base/icons/src/vender/line/files'
 
-const AppInfoPanel: FC = () => {
-  const { selectedNode } = useWorkflowContext()
-
-  if (selectedNode)
-    return null
-
+const WorkflowInfo: FC = () => {
   return (
-    <div className='absolute top-14 right-2 bottom-2 w-[420px] bg-white shadow-lg border-[0.5px] border-gray-200 rounded-2xl z-10 overflow-y-auto'>
+    <div className='mr-2 w-[420px] h-full bg-white shadow-lg border-[0.5px] border-gray-200 rounded-2xl z-10 overflow-y-auto'>
       <div className='sticky top-0 bg-white border-b-[0.5px] border-black/5'>
         <div className='flex pt-4 px-4 pb-1'>
           <div className='mr-3 w-10 h-10'></div>
@@ -55,4 +49,4 @@ const AppInfoPanel: FC = () => {
   )
 }
 
-export default memo(AppInfoPanel)
+export default memo(WorkflowInfo)