From 701e44134914d07f34c65d899da2a6aafee33dfa Mon Sep 17 00:00:00 2001
From: StyleZhang <jasonapring2015@outlook.com>
Date: Thu, 22 Feb 2024 15:37:13 +0800
Subject: [PATCH] panel

---
 web/app/components/workflow/context.tsx       |  2 +
 web/app/components/workflow/index.tsx         | 10 ++--
 .../_base/components}/node-control.tsx        |  2 +-
 .../components/workflow/nodes/_base/node.tsx  |  2 +-
 .../components/workflow/nodes/_base/panel.tsx |  2 +-
 web/app/components/workflow/nodes/index.tsx   | 21 ++++----
 .../debug-and-preview/chat-wrapper.tsx        |  0
 .../{ => panel}/debug-and-preview/index.tsx   |  2 +-
 web/app/components/workflow/panel/index.tsx   | 49 +++++++++++++++++++
 .../workflow-info.tsx}                        | 16 ++----
 10 files changed, 74 insertions(+), 32 deletions(-)
 rename web/app/components/workflow/{ => nodes/_base/components}/node-control.tsx (87%)
 rename web/app/components/workflow/{ => panel}/debug-and-preview/chat-wrapper.tsx (100%)
 rename web/app/components/workflow/{ => panel}/debug-and-preview/index.tsx (80%)
 create mode 100644 web/app/components/workflow/panel/index.tsx
 rename web/app/components/workflow/{app-info-panel.tsx => panel/workflow-info.tsx} (82%)

diff --git a/web/app/components/workflow/context.tsx b/web/app/components/workflow/context.tsx
index 9dff560b43..9625ada607 100644
--- a/web/app/components/workflow/context.tsx
+++ b/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: [],
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index 0d9727f420..1ed63fca17 100644
--- a/web/app/components/workflow/index.tsx
+++ b/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,
diff --git a/web/app/components/workflow/node-control.tsx b/web/app/components/workflow/nodes/_base/components/node-control.tsx
similarity index 87%
rename from web/app/components/workflow/node-control.tsx
rename to web/app/components/workflow/nodes/_base/components/node-control.tsx
index b66220be87..6f4dcd42b3 100644
--- a/web/app/components/workflow/node-control.tsx
+++ b/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'>
diff --git a/web/app/components/workflow/nodes/_base/node.tsx b/web/app/components/workflow/nodes/_base/node.tsx
index 7272653e38..42c262028a 100644
--- a/web/app/components/workflow/nodes/_base/node.tsx
+++ b/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
diff --git a/web/app/components/workflow/nodes/_base/panel.tsx b/web/app/components/workflow/nodes/_base/panel.tsx
index 9cb1d558b4..9337787cce 100644
--- a/web/app/components/workflow/nodes/_base/panel.tsx
+++ b/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
diff --git a/web/app/components/workflow/nodes/index.tsx b/web/app/components/workflow/nodes/index.tsx
index 6d1e2562f4..c3197ed628 100644
--- a/web/app/components/workflow/nodes/index.tsx
+++ b/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>
diff --git a/web/app/components/workflow/debug-and-preview/chat-wrapper.tsx b/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx
similarity index 100%
rename from web/app/components/workflow/debug-and-preview/chat-wrapper.tsx
rename to web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx
diff --git a/web/app/components/workflow/debug-and-preview/index.tsx b/web/app/components/workflow/panel/debug-and-preview/index.tsx
similarity index 80%
rename from web/app/components/workflow/debug-and-preview/index.tsx
rename to web/app/components/workflow/panel/debug-and-preview/index.tsx
index 970b2096c5..ce33d64206 100644
--- a/web/app/components/workflow/debug-and-preview/index.tsx
+++ b/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'>
diff --git a/web/app/components/workflow/panel/index.tsx b/web/app/components/workflow/panel/index.tsx
new file mode 100644
index 0000000000..8ff9aaa078
--- /dev/null
+++ b/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)
diff --git a/web/app/components/workflow/app-info-panel.tsx b/web/app/components/workflow/panel/workflow-info.tsx
similarity index 82%
rename from web/app/components/workflow/app-info-panel.tsx
rename to web/app/components/workflow/panel/workflow-info.tsx
index 6201f3639f..42f1b9ce36 100644
--- a/web/app/components/workflow/app-info-panel.tsx
+++ b/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)