feat: last run frontend (#21369)

The frontend of feat: Persist Variables for Enhanced Debugging Workflow (#20699).

Co-authored-by: jZonG <jzongcode@gmail.com>

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

@@ -1,8 +1,10 @@
-import { memo } from 'react'
+import { memo, useEffect, useMemo, useRef } from 'react'
 import { MiniMap } from 'reactflow'
 import UndoRedo from '../header/undo-redo'
 import ZoomInOut from './zoom-in-out'
-import Control from './control'
+import VariableTrigger from '../variable-inspect/trigger'
+import VariableInspectPanel from '../variable-inspect'
+import { useStore } from '../store'
 
 export type OperatorProps = {
   handleUndo: () => void
@@ -10,25 +12,65 @@ export type OperatorProps = {
 }
 
 const Operator = ({ handleUndo, handleRedo }: OperatorProps) => {
+  const bottomPanelRef = useRef<HTMLDivElement>(null)
+  const workflowCanvasWidth = useStore(s => s.workflowCanvasWidth)
+  const rightPanelWidth = useStore(s => s.rightPanelWidth)
+  const setBottomPanelWidth = useStore(s => s.setBottomPanelWidth)
+  const setBottomPanelHeight = useStore(s => s.setBottomPanelHeight)
+
+  const bottomPanelWidth = useMemo(() => {
+    if (!workflowCanvasWidth || !rightPanelWidth)
+      return 'auto'
+    return Math.max((workflowCanvasWidth - rightPanelWidth), 400)
+  }, [workflowCanvasWidth, rightPanelWidth])
+
+  // update bottom panel height
+  useEffect(() => {
+    if (bottomPanelRef.current) {
+      const resizeContainerObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          const { inlineSize, blockSize } = entry.borderBoxSize[0]
+          setBottomPanelWidth(inlineSize)
+          setBottomPanelHeight(blockSize)
+        }
+      })
+      resizeContainerObserver.observe(bottomPanelRef.current)
+      return () => {
+        resizeContainerObserver.disconnect()
+      }
+    }
+  }, [setBottomPanelHeight, setBottomPanelWidth])
+
   return (
-    <>
-      <MiniMap
-        pannable
-        zoomable
-        style={{
-          width: 102,
-          height: 72,
-        }}
-        maskColor='var(--color-workflow-minimap-bg)'
-        className='!absolute !bottom-14 !left-4 z-[9] !m-0 !h-[72px] !w-[102px] !rounded-lg !border-[0.5px]
-        !border-divider-subtle !bg-background-default-subtle !shadow-md !shadow-shadow-shadow-5'
-      />
-      <div className='absolute bottom-4 left-4 z-[9] mt-1 flex items-center gap-2'>
-        <ZoomInOut />
+    <div
+      ref={bottomPanelRef}
+      className='absolute bottom-0 left-0 right-0 z-10 px-1'
+      style={
+        {
+          width: bottomPanelWidth,
+        }
+      }
+    >
+      <div className='flex justify-between px-1 pb-2'>
         <UndoRedo handleUndo={handleUndo} handleRedo={handleRedo} />
-        <Control />
+        <VariableTrigger />
+        <div className='relative'>
+          <MiniMap
+            pannable
+            zoomable
+            style={{
+              width: 102,
+              height: 72,
+            }}
+            maskColor='var(--color-workflow-minimap-bg)'
+            className='!absolute !bottom-10 z-[9] !m-0 !h-[73px] !w-[103px] !rounded-lg !border-[0.5px]
+            !border-divider-subtle !bg-background-default-subtle !shadow-md !shadow-shadow-shadow-5'
+          />
+          <ZoomInOut />
+        </div>
       </div>
-    </>
+      <VariableInspectPanel />
+    </div>
   )
 }