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/add-block.tsx

@@ -96,7 +96,7 @@ const AddBlock = ({
       onOpenChange={handleOpenChange}
       disabled={nodesReadOnly}
       onSelect={handleSelect}
-      placement='top-start'
+      placement='right-start'
       offset={offset ?? {
         mainAxis: 4,
         crossAxis: -8,

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

@@ -4,6 +4,8 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
+  RiAspectRatioFill,
+  RiAspectRatioLine,
   RiCursorLine,
   RiFunctionAddLine,
   RiHand,
@@ -11,6 +13,7 @@ import {
 } from '@remixicon/react'
 import {
   useNodesReadOnly,
+  useWorkflowCanvasMaximize,
   useWorkflowMoveMode,
   useWorkflowOrganize,
 } from '../hooks'
@@ -28,6 +31,7 @@ import cn from '@/utils/classnames'
 const Control = () => {
   const { t } = useTranslation()
   const controlMode = useStore(s => s.controlMode)
+  const maximizeCanvas = useStore(s => s.maximizeCanvas)
   const { handleModePointer, handleModeHand } = useWorkflowMoveMode()
   const { handleLayout } = useWorkflowOrganize()
   const { handleAddNote } = useOperator()
@@ -35,6 +39,7 @@ const Control = () => {
     nodesReadOnly,
     getNodesReadOnly,
   } = useNodesReadOnly()
+  const { handleToggleMaximizeCanvas } = useWorkflowCanvasMaximize()
 
   const addNote = (e: MouseEvent<HTMLDivElement>) => {
     if (getNodesReadOnly())
@@ -45,7 +50,7 @@ const Control = () => {
   }
 
   return (
-    <div className='flex items-center rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 text-text-tertiary shadow-lg'>
+    <div className='flex flex-col items-center rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 text-text-tertiary shadow-lg'>
       <AddBlock />
       <TipPopup title={t('workflow.nodes.note.addNote')}>
         <div
@@ -58,7 +63,7 @@ const Control = () => {
           <RiStickyNoteAddLine className='h-4 w-4' />
         </div>
       </TipPopup>
-      <Divider type='vertical' className='mx-0.5 h-3.5' />
+      <Divider className='my-1 w-3.5' />
       <TipPopup title={t('workflow.common.pointerMode')} shortcuts={['v']}>
         <div
           className={cn(
@@ -83,7 +88,7 @@ const Control = () => {
           <RiHand className='h-4 w-4' />
         </div>
       </TipPopup>
-      <Divider type='vertical' className='mx-0.5 h-3.5' />
+      <Divider className='my-1 w-3.5' />
       <ExportImage />
       <TipPopup title={t('workflow.panel.organizeBlocks')} shortcuts={['ctrl', 'o']}>
         <div
@@ -96,6 +101,19 @@ const Control = () => {
           <RiFunctionAddLine className='h-4 w-4' />
         </div>
       </TipPopup>
+      <TipPopup title={maximizeCanvas ? t('workflow.panel.minimize') : t('workflow.panel.maximize')} shortcuts={['f']}>
+        <div
+          className={cn(
+            'flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover hover:text-text-secondary',
+            maximizeCanvas ? 'bg-state-accent-active text-text-accent hover:text-text-accent' : 'hover:bg-state-base-hover hover:text-text-secondary',
+            `${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
+          )}
+          onClick={handleToggleMaximizeCanvas}
+        >
+          {maximizeCanvas && <RiAspectRatioFill className='h-4 w-4' />}
+          {!maximizeCanvas && <RiAspectRatioLine className='h-4 w-4' />}
+        </div>
+      </TipPopup>
     </div>
   )
 }

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>
   )
 }