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

@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import { memo } from 'react'
+import { memo, useEffect, useRef } from 'react'
 import { useNodes } from 'reactflow'
 import type { CommonNodeType } from '../types'
 import { Panel as NodePanel } from '../nodes'
@@ -21,10 +21,48 @@ const Panel: FC<PanelProps> = ({
   const showEnvPanel = useStore(s => s.showEnvPanel)
   const isRestoring = useStore(s => s.isRestoring)
 
+  const rightPanelRef = useRef<HTMLDivElement>(null)
+  const setRightPanelWidth = useStore(s => s.setRightPanelWidth)
+
+  // get right panel width
+  useEffect(() => {
+    if (rightPanelRef.current) {
+      const resizeRightPanelObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          const { inlineSize } = entry.borderBoxSize[0]
+          setRightPanelWidth(inlineSize)
+        }
+      })
+      resizeRightPanelObserver.observe(rightPanelRef.current)
+      return () => {
+        resizeRightPanelObserver.disconnect()
+      }
+    }
+  }, [setRightPanelWidth])
+
+  const otherPanelRef = useRef<HTMLDivElement>(null)
+  const setOtherPanelWidth = useStore(s => s.setOtherPanelWidth)
+
+  // get other panel width
+  useEffect(() => {
+    if (otherPanelRef.current) {
+      const resizeOtherPanelObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          const { inlineSize } = entry.borderBoxSize[0]
+          setOtherPanelWidth(inlineSize)
+        }
+      })
+      resizeOtherPanelObserver.observe(otherPanelRef.current)
+      return () => {
+        resizeOtherPanelObserver.disconnect()
+      }
+    }
+  }, [setOtherPanelWidth])
   return (
     <div
+      ref={rightPanelRef}
       tabIndex={-1}
-      className={cn('absolute bottom-2 right-0 top-14 z-10 flex outline-none')}
+      className={cn('absolute bottom-1 right-0 top-14 z-10 flex outline-none')}
       key={`${isRestoring}`}
     >
       {
@@ -35,14 +73,19 @@ const Panel: FC<PanelProps> = ({
           <NodePanel {...selectedNode!} />
         )
       }
-      {
-        components?.right
-      }
-      {
-        showEnvPanel && (
-          <EnvPanel />
-        )
-      }
+      <div
+        className='relative'
+        ref={otherPanelRef}
+      >
+        {
+          components?.right
+        }
+        {
+          showEnvPanel && (
+            <EnvPanel />
+          )
+        }
+      </div>
     </div>
   )
 }