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/variable-inspect/index.tsx

@@ -0,0 +1,61 @@
+import type { FC } from 'react'
+import {
+  useCallback,
+  useMemo,
+} from 'react'
+import { debounce } from 'lodash-es'
+import { useStore } from '../store'
+import { useResizePanel } from '../nodes/_base/hooks/use-resize-panel'
+import Panel from './panel'
+import cn from '@/utils/classnames'
+
+const VariableInspectPanel: FC = () => {
+  const showVariableInspectPanel = useStore(s => s.showVariableInspectPanel)
+  const workflowCanvasHeight = useStore(s => s.workflowCanvasHeight)
+  const variableInspectPanelHeight = useStore(s => s.variableInspectPanelHeight)
+  const setVariableInspectPanelHeight = useStore(s => s.setVariableInspectPanelHeight)
+
+  const maxHeight = useMemo(() => {
+      if (!workflowCanvasHeight)
+        return 480
+      return workflowCanvasHeight - 60
+    }, [workflowCanvasHeight])
+
+  const handleResize = useCallback((width: number, height: number) => {
+    localStorage.setItem('workflow-variable-inpsect-panel-height', `${height}`)
+    setVariableInspectPanelHeight(height)
+    }, [setVariableInspectPanelHeight])
+
+  const {
+    triggerRef,
+    containerRef,
+  } = useResizePanel({
+    direction: 'vertical',
+    triggerDirection: 'top',
+    minHeight: 120,
+    maxHeight,
+    onResize: debounce(handleResize),
+  })
+
+  if (!showVariableInspectPanel)
+    return null
+
+  return (
+    <div className={cn('relative pb-1')}>
+      <div
+        ref={triggerRef}
+        className='absolute -top-1 left-0 flex h-1 w-full cursor-row-resize resize-y items-center justify-center'>
+        <div className='h-0.5 w-10 rounded-sm bg-state-base-handle hover:w-full hover:bg-state-accent-solid active:w-full active:bg-state-accent-solid'></div>
+      </div>
+      <div
+        ref={containerRef}
+        className={cn('overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl')}
+        style={{ height: `${variableInspectPanelHeight}px` }}
+      >
+        <Panel />
+      </div>
+    </div>
+  )
+}
+
+export default VariableInspectPanel