Chore/slice workflow (#18351)

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

@@ -1,43 +1,25 @@
 import type { FC } from 'react'
 import { memo } from 'react'
 import { useNodes } from 'reactflow'
-import { useShallow } from 'zustand/react/shallow'
 import type { CommonNodeType } from '../types'
 import { Panel as NodePanel } from '../nodes'
 import { useStore } from '../store'
-import {
-  useIsChatMode,
-} from '../hooks'
-import DebugAndPreview from './debug-and-preview'
-import Record from './record'
-import WorkflowPreview from './workflow-preview'
-import ChatRecord from './chat-record'
-import ChatVariablePanel from './chat-variable-panel'
 import EnvPanel from './env-panel'
-import GlobalVariablePanel from './global-variable-panel'
-import VersionHistoryPanel from './version-history-panel'
 import cn from '@/utils/classnames'
-import { useStore as useAppStore } from '@/app/components/app/store'
-import MessageLogModal from '@/app/components/base/message-log-modal'
 
-const Panel: FC = () => {
+export type PanelProps = {
+  components?: {
+    left?: React.ReactNode
+    right?: React.ReactNode
+  }
+}
+const Panel: FC<PanelProps> = ({
+  components,
+}) => {
   const nodes = useNodes<CommonNodeType>()
-  const isChatMode = useIsChatMode()
   const selectedNode = nodes.find(node => node.data.selected)
-  const historyWorkflowData = useStore(s => s.historyWorkflowData)
-  const showDebugAndPreviewPanel = useStore(s => s.showDebugAndPreviewPanel)
   const showEnvPanel = useStore(s => s.showEnvPanel)
-  const showChatVariablePanel = useStore(s => s.showChatVariablePanel)
-  const showGlobalVariablePanel = useStore(s => s.showGlobalVariablePanel)
-  const showWorkflowVersionHistoryPanel = useStore(s => s.showWorkflowVersionHistoryPanel)
   const isRestoring = useStore(s => s.isRestoring)
-  const { currentLogItem, setCurrentLogItem, showMessageLogModal, setShowMessageLogModal, currentLogModalActiveTab } = useAppStore(useShallow(state => ({
-    currentLogItem: state.currentLogItem,
-    setCurrentLogItem: state.setCurrentLogItem,
-    showMessageLogModal: state.showMessageLogModal,
-    setShowMessageLogModal: state.setShowMessageLogModal,
-    currentLogModalActiveTab: state.currentLogModalActiveTab,
-  })))
 
   return (
     <div
@@ -46,18 +28,7 @@ const Panel: FC = () => {
       key={`${isRestoring}`}
     >
       {
-        showMessageLogModal && (
-          <MessageLogModal
-            fixedWidth
-            width={400}
-            currentLogItem={currentLogItem}
-            onCancel={() => {
-              setCurrentLogItem()
-              setShowMessageLogModal(false)
-            }}
-            defaultTab={currentLogModalActiveTab}
-          />
-        )
+        components?.left
       }
       {
         !!selectedNode && (
@@ -65,45 +36,13 @@ const Panel: FC = () => {
         )
       }
       {
-        historyWorkflowData && !isChatMode && (
-          <Record />
-        )
-      }
-      {
-        historyWorkflowData && isChatMode && (
-          <ChatRecord />
-        )
-      }
-      {
-        showDebugAndPreviewPanel && isChatMode && (
-          <DebugAndPreview />
-        )
-      }
-      {
-        showDebugAndPreviewPanel && !isChatMode && (
-          <WorkflowPreview />
-        )
+        components?.right
       }
       {
         showEnvPanel && (
           <EnvPanel />
         )
       }
-      {
-        showChatVariablePanel && (
-          <ChatVariablePanel />
-        )
-      }
-      {
-        showGlobalVariablePanel && (
-          <GlobalVariablePanel />
-        )
-      }
-      {
-        showWorkflowVersionHistoryPanel && (
-          <VersionHistoryPanel/>
-        )
-      }
     </div>
   )
 }