right panel resize

web/app/components/workflow/hooks/use-workflow.ts

@@ -76,10 +76,6 @@ export const useWorkflow = () => {
   const appId = useStore(s => s.appId)
   const nodesExtraData = useNodesExtraData()
   const { data: workflowConfig } = useWorkflowConfig(appId)
-  const setPanelWidth = useCallback((width: number) => {
-    localStorage.setItem('workflow-node-panel-width', `${width}`)
-    workflowStore.setState({ panelWidth: width })
-  }, [workflowStore])
 
   const getTreeLeafNodes = useCallback((nodeId: string) => {
     const {
@@ -419,7 +415,6 @@ export const useWorkflow = () => {
   }, [store])
 
   return {
-    setPanelWidth,
     getTreeLeafNodes,
     getBeforeNodesInSameBranch,
     getBeforeNodesInSameBranchIncludeParent,

web/app/components/workflow/index.tsx

@@ -64,6 +64,7 @@ import { CUSTOM_LOOP_START_NODE } from './nodes/loop-start/constants'
 import CustomSimpleNode from './simple-node'
 import { CUSTOM_SIMPLE_NODE } from './simple-node/constants'
 import Operator from './operator'
+import Control from './operator/control'
 import CustomEdge from './custom-edge'
 import CustomConnectionLine from './custom-connection-line'
 import Panel from './panel'
@@ -135,6 +136,32 @@ const Workflow: FC<WorkflowProps> = memo(({
   const nodeAnimation = useStore(s => s.nodeAnimation)
   const showConfirm = useStore(s => s.showConfirm)
   const showImportDSLModal = useStore(s => s.showImportDSLModal)
+  const workflowCanvasHeight = useStore(s => s.workflowCanvasHeight)
+  const bottomPanelHeight = useStore(s => s.bottomPanelHeight)
+  const setWorkflowCanvasWidth = useStore(s => s.setWorkflowCanvasWidth)
+  const setWorkflowCanvasHeight = useStore(s => s.setWorkflowCanvasHeight)
+  const controlHeight = useMemo(() => {
+    if (!workflowCanvasHeight)
+      return '100%'
+    return workflowCanvasHeight - bottomPanelHeight
+  }, [workflowCanvasHeight, bottomPanelHeight])
+
+  // update workflow Canvas width and height
+  useEffect(() => {
+    if (workflowContainerRef.current) {
+      const resizeContainerObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          const { inlineSize, blockSize } = entry.borderBoxSize[0]
+          setWorkflowCanvasWidth(inlineSize)
+          setWorkflowCanvasHeight(blockSize)
+        }
+      })
+      resizeContainerObserver.observe(workflowContainerRef.current)
+      return () => {
+        resizeContainerObserver.disconnect()
+      }
+    }
+  }, [setWorkflowCanvasHeight, setWorkflowCanvasWidth])
 
   const {
     setShowConfirm,
@@ -299,6 +326,12 @@ const Workflow: FC<WorkflowProps> = memo(({
       <CandidateNode />
       <Header />
       <Panel />
+      <div
+        className='absolute left-0 top-0 z-10 flex w-12 items-center justify-center p-1'
+        style={{ height: controlHeight }}
+      >
+        <Control />
+      </div>
       <Operator handleRedo={handleHistoryForward} handleUndo={handleHistoryBack} />
       {
         showFeaturesPanel && <Features />

web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx

@@ -8,6 +8,8 @@ import {
   useCallback,
   useRef,
   useState,
+  useEffect,
+  useMemo,
 } from 'react'
 import {
   RiCloseLine,
@@ -36,7 +38,6 @@ import {
   useNodesReadOnly,
   useNodesSyncDraft,
   useToolIcon,
-  useWorkflow,
   useWorkflowHistory,
 } from '@/app/components/workflow/hooks'
 import {
@@ -54,6 +55,7 @@ import useOneStepRun from '../../hooks/use-one-step-run'
 import type { PanelExposedType } from '@/types/workflow'
 import BeforeRunForm from '../before-run-form'
 import { sleep } from '@/utils'
+import { debounce } from 'lodash-es'
 
 type BasePanelProps = {
   children: ReactNode
@@ -69,19 +71,30 @@ const BasePanel: FC<BasePanelProps> = ({
     showMessageLogModal: state.showMessageLogModal,
   })))
   const showSingleRunPanel = useStore(s => s.showSingleRunPanel)
-  const panelWidth = localStorage.getItem('workflow-node-panel-width') ? Number.parseFloat(localStorage.getItem('workflow-node-panel-width')!) : 420
+  const workflowCanvasWidth = useStore(s => s.workflowCanvasWidth)
-  const {
+  const nodePanelWidth = useStore(s => s.nodePanelWidth)
-    setPanelWidth,
+  const otherPanelWidth = useStore(s => s.otherPanelWidth)
-  } = useWorkflow()
+  const setNodePanelWidth = useStore(s => s.setNodePanelWidth)
-  const { handleNodeSelect } = useNodesInteractions()
+
-  const { handleSyncWorkflowDraft } = useNodesSyncDraft()
+  const maxNodePanelWidth = useMemo(() => {
-  const { nodesReadOnly } = useNodesReadOnly()
+    if (!workflowCanvasWidth)
-  const { availableNextBlocks } = useAvailableBlocks(data.type, data.isInIteration, data.isInLoop)
+      return 720
-  const toolIcon = useToolIcon(data)
+    if (!otherPanelWidth)
+      return workflowCanvasWidth - 400
+
+    return workflowCanvasWidth - otherPanelWidth - 400
+  }, [workflowCanvasWidth, otherPanelWidth])
+
+  const updateNodePanelWidth = useCallback((width: number) => {
+    // Ensure the width is within the min and max range
+    const newValue = Math.min(Math.max(width, 400), maxNodePanelWidth)
+    localStorage.setItem('workflow-node-panel-width', `${newValue}`)
+    setNodePanelWidth(newValue)
+  }, [maxNodePanelWidth, setNodePanelWidth])
 
   const handleResize = useCallback((width: number) => {
-    setPanelWidth(width)
+    updateNodePanelWidth(width)
-  }, [setPanelWidth])
+  }, [updateNodePanelWidth])
 
   const {
     triggerRef,
@@ -89,15 +102,28 @@ const BasePanel: FC<BasePanelProps> = ({
   } = useResizePanel({
     direction: 'horizontal',
     triggerDirection: 'left',
-    minWidth: 420,
+    minWidth: 400,
-    maxWidth: 720,
+    maxWidth: maxNodePanelWidth,
-    onResize: handleResize,
+    onResize: debounce(handleResize),
   })
 
+  const debounceUpdate = debounce(updateNodePanelWidth)
+  useEffect(() => {
+    if (!workflowCanvasWidth)
+      return
+    if (workflowCanvasWidth - 400 <= nodePanelWidth + otherPanelWidth)
+      debounceUpdate(workflowCanvasWidth - 400 - otherPanelWidth)
+  }, [nodePanelWidth, otherPanelWidth, workflowCanvasWidth, updateNodePanelWidth])
+
+  const { handleNodeSelect } = useNodesInteractions()
+  const { handleSyncWorkflowDraft } = useNodesSyncDraft()
+  const { nodesReadOnly } = useNodesReadOnly()
+  const { availableNextBlocks } = useAvailableBlocks(data.type, data.isInIteration, data.isInLoop)
+  const toolIcon = useToolIcon(data)
+
   const { saveStateToHistory } = useWorkflowHistory()
 
   const {
-    handleNodeDataUpdate,
     handleNodeDataUpdateWithSyncDraft,
   } = useNodeDataUpdate()
 
@@ -117,7 +143,6 @@ const BasePanel: FC<BasePanelProps> = ({
     isShowSingleRun,
     showSingleRun,
     hideSingleRun,
-    toVarInputs,
     runningStatus,
     handleRun,
     handleStop,
@@ -144,19 +169,19 @@ const BasePanel: FC<BasePanelProps> = ({
 
   return (
     <div className={cn(
-      'relative mr-2 h-full',
+      'relative mr-1 h-full',
       showMessageLogModal && '!absolute -top-[5px] right-[416px] z-0 !mr-0 w-[384px] overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border shadow-lg transition-all',
     )}>
       <div
         ref={triggerRef}
-        className='absolute -left-2 top-1/2 h-6 w-3 -translate-y-1/2 cursor-col-resize resize-x'>
+        className='absolute -left-1 top-0 flex h-full w-1 cursor-col-resize resize-x items-center justify-center'>
-        <div className='h-6 w-1 rounded-sm bg-divider-regular'></div>
+        <div className='h-10 w-0.5 rounded-sm bg-state-base-handle hover:h-full hover:bg-state-accent-solid active:h-full active:bg-state-accent-solid'></div>
       </div>
       <div
         ref={containerRef}
         className={cn('h-full rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg', showSingleRunPanel ? 'overflow-hidden' : 'overflow-y-auto')}
         style={{
-          width: `${panelWidth}px`,
+          width: `${nodePanelWidth}px`,
         }}
       >
         <div className='sticky top-0 z-10 border-b-[0.5px] border-divider-regular bg-components-panel-bg'>

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

@@ -45,7 +45,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 +58,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 +83,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

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

@@ -1,8 +1,8 @@
-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 { useStore } from '../store'
 
 export type OperatorProps = {
   handleUndo: () => void
@@ -10,25 +10,61 @@ 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 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 { blockSize } = entry.borderBoxSize[0]
+          setBottomPanelHeight(blockSize)
+        }
+      })
+      resizeContainerObserver.observe(bottomPanelRef.current)
+      return () => {
+        resizeContainerObserver.disconnect()
+      }
+    }
+  }, [setBottomPanelHeight])
+
   return (
-    <>
+    <div
-      <MiniMap
+      ref={bottomPanelRef}
-        pannable
+      className='absolute bottom-0 left-0 right-0 z-10 px-1'
-        zoomable
+      style={
-        style={{
+        {
-          width: 102,
+          width: bottomPanelWidth,
-          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]
+      <div className='flex justify-between px-1 pb-2'>
-        !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 />
         <UndoRedo handleUndo={handleUndo} handleRedo={handleRedo} />
-        <Control />
+        <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>
-    </>
+    </div>
   )
 }
 

web/app/components/workflow/panel/debug-and-preview/index.tsx

@@ -1,7 +1,7 @@
 import {
   memo,
   useCallback,
-  useEffect,
+  useMemo,
   useRef,
   useState,
 } from 'react'
@@ -16,6 +16,7 @@ import {
 } from '../../hooks'
 import { BlockEnum } from '../../types'
 import type { StartNodeType } from '../../nodes/start/types'
+import { useResizePanel } from '../../nodes/_base/hooks/use-resize-panel'
 import ChatWrapper from './chat-wrapper'
 import cn from '@/utils/classnames'
 import { RefreshCcw01 } from '@/app/components/base/icons/src/vender/line/arrows'
@@ -23,7 +24,7 @@ import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
 import Tooltip from '@/app/components/base/tooltip'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 import { useStore } from '@/app/components/workflow/store'
-import { noop } from 'lodash-es'
+import { debounce, noop } from 'lodash-es'
 
 export type ChatWrapperRefType = {
   handleRestart: () => void
@@ -37,6 +38,7 @@ const DebugAndPreview = () => {
   const varList = useStore(s => s.conversationVariables)
   const [expanded, setExpanded] = useState(true)
   const nodes = useNodes<StartNodeType>()
+  const selectedNode = nodes.find(node => node.data.selected)
   const startNode = nodes.find(node => node.data.type === BlockEnum.Start)
   const variables = startNode?.data.variables || []
 
@@ -54,94 +56,95 @@ const DebugAndPreview = () => {
     exactMatch: true,
   })
 
-  const [panelWidth, setPanelWidth] = useState(420)
+  const workflowCanvasWidth = useStore(s => s.workflowCanvasWidth)
-  const [isResizing, setIsResizing] = useState(false)
+  const nodePanelWidth = useStore(s => s.nodePanelWidth)
+  const [panelWidth, setPanelWidth] = useState(400)
+  const handleResize = useCallback((width: number) => {
+    setPanelWidth(width)
+  }, [setPanelWidth])
+  const maxPanelWidth = useMemo(() => {
+    if (!workflowCanvasWidth)
+      return 720
 
-  const startResizing = useCallback((e: React.MouseEvent) => {
+    if (!selectedNode)
-    e.preventDefault()
+      return workflowCanvasWidth - 400
-    setIsResizing(true)
-  }, [])
 
-  const stopResizing = useCallback(() => {
+    return workflowCanvasWidth - 400 - 400
-    setIsResizing(false)
+  }, [workflowCanvasWidth, selectedNode, nodePanelWidth])
-  }, [])
+  const {
-
+    triggerRef,
-  const resize = useCallback((e: MouseEvent) => {
+    containerRef,
-    if (isResizing) {
+  } = useResizePanel({
-      const newWidth = window.innerWidth - e.clientX
+    direction: 'horizontal',
-      if (newWidth > 420 && newWidth < 1024)
+    triggerDirection: 'left',
-        setPanelWidth(newWidth)
+    minWidth: 400,
-    }
+    maxWidth: maxPanelWidth,
-  }, [isResizing])
+    onResize: debounce(handleResize),
-
+  })
-  useEffect(() => {
-    window.addEventListener('mousemove', resize)
-    window.addEventListener('mouseup', stopResizing)
-    return () => {
-      window.removeEventListener('mousemove', resize)
-      window.removeEventListener('mouseup', stopResizing)
-    }
-  }, [resize, stopResizing])
 
   return (
-    <div
+    <div className='relative h-full'>
-      className={cn(
-        'relative flex h-full flex-col rounded-l-2xl border border-r-0 border-components-panel-border bg-chatbot-bg shadow-xl',
-      )}
-      style={{ width: `${panelWidth}px` }}
-    >
       <div
-        className="absolute bottom-0 left-[3px] top-1/2 z-50 h-6 w-[3px] cursor-col-resize rounded bg-gray-300"
+        ref={triggerRef}
-        onMouseDown={startResizing}
+        className='absolute -left-1 top-0 flex h-full w-1 cursor-col-resize resize-x items-center justify-center'>
-      />
+        <div className='h-10 w-0.5 rounded-sm bg-state-base-handle hover:h-full hover:bg-state-accent-solid active:h-full active:bg-state-accent-solid'></div>
-      <div className='system-xl-semibold flex shrink-0 items-center justify-between px-4 pb-2 pt-3 text-text-primary'>
+      </div>
-        <div className='h-8'>{t('workflow.common.debugAndPreview').toLocaleUpperCase()}</div>
+      <div
-        <div className='flex items-center gap-1'>
+        ref={containerRef}
-          <Tooltip
+        className={cn(
-            popupContent={t('common.operation.refresh')}
+          'relative flex h-full flex-col rounded-l-2xl border border-r-0 border-components-panel-border bg-chatbot-bg shadow-xl',
-          >
+        )}
-            <ActionButton onClick={() => handleRestartChat()}>
+        style={{ width: `${panelWidth}px` }}
-              <RefreshCcw01 className='h-4 w-4' />
+      >
-            </ActionButton>
+        <div className='system-xl-semibold flex shrink-0 items-center justify-between px-4 pb-2 pt-3 text-text-primary'>
-          </Tooltip>
+          <div className='h-8'>{t('workflow.common.debugAndPreview').toLocaleUpperCase()}</div>
-          {varList.length > 0 && (
+          <div className='flex items-center gap-1'>
             <Tooltip
-              popupContent={t('workflow.chatVariable.panelTitle')}
+              popupContent={t('common.operation.refresh')}
             >
-              <ActionButton onClick={() => setShowConversationVariableModal(true)}>
+              <ActionButton onClick={() => handleRestartChat()}>
-                <BubbleX className='h-4 w-4' />
+                <RefreshCcw01 className='h-4 w-4' />
               </ActionButton>
             </Tooltip>
-          )}
+            {varList.length > 0 && (
-          {variables.length > 0 && (
-            <div className='relative'>
               <Tooltip
-                popupContent={t('workflow.panel.userInputField')}
+                popupContent={t('workflow.chatVariable.panelTitle')}
               >
-                <ActionButton state={expanded ? ActionButtonState.Active : undefined} onClick={() => setExpanded(!expanded)}>
+                <ActionButton onClick={() => setShowConversationVariableModal(true)}>
-                  <RiEqualizer2Line className='h-4 w-4' />
+                  <BubbleX className='h-4 w-4' />
                 </ActionButton>
               </Tooltip>
-              {expanded && <div className='absolute bottom-[-17px] right-[5px] z-10 h-3 w-3 rotate-45 border-l-[0.5px] border-t-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg'/>}
+            )}
+            {variables.length > 0 && (
+              <div className='relative'>
+                <Tooltip
+                  popupContent={t('workflow.panel.userInputField')}
+                >
+                  <ActionButton state={expanded ? ActionButtonState.Active : undefined} onClick={() => setExpanded(!expanded)}>
+                    <RiEqualizer2Line className='h-4 w-4' />
+                  </ActionButton>
+                </Tooltip>
+                {expanded && <div className='absolute bottom-[-17px] right-[5px] z-10 h-3 w-3 rotate-45 border-l-[0.5px] border-t-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg'/>}
+              </div>
+            )}
+            <div className='mx-3 h-3.5 w-[1px] bg-divider-regular'></div>
+            <div
+              className='flex h-6 w-6 cursor-pointer items-center justify-center'
+              onClick={handleCancelDebugAndPreviewPanel}
+            >
+              <RiCloseLine className='h-4 w-4 text-text-tertiary' />
             </div>
-          )}
-          <div className='mx-3 h-3.5 w-[1px] bg-divider-regular'></div>
-          <div
-            className='flex h-6 w-6 cursor-pointer items-center justify-center'
-            onClick={handleCancelDebugAndPreviewPanel}
-          >
-            <RiCloseLine className='h-4 w-4 text-text-tertiary' />
           </div>
         </div>
-      </div>
+        <div className='grow overflow-y-auto rounded-b-2xl'>
-      <div className='grow overflow-y-auto rounded-b-2xl'>
+          <ChatWrapper
-        <ChatWrapper
+            ref={chatRef}
-          ref={chatRef}
+            showConversationVariableModal={showConversationVariableModal}
-          showConversationVariableModal={showConversationVariableModal}
+            onConversationModalHide={() => setShowConversationVariableModal(false)}
-          onConversationModalHide={() => setShowConversationVariableModal(false)}
+            showInputsFieldsPanel={expanded}
-          showInputsFieldsPanel={expanded}
+            onHide={() => setExpanded(false)}
-          onHide={() => setExpanded(false)}
+          />
-        />
+        </div>
       </div>
     </div>
   )

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 { useShallow } from 'zustand/react/shallow'
 import type { CommonNodeType } from '../types'
@@ -39,8 +39,46 @@ const Panel: FC = () => {
     currentLogModalActiveTab: state.currentLogModalActiveTab,
   })))
 
+  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')}
       key={`${isRestoring}`}
@@ -64,46 +102,49 @@ const Panel: FC = () => {
           <NodePanel {...selectedNode!} />
         )
       }
-      {
+      <div
-        historyWorkflowData && !isChatMode && (
+        className='relative'
-          <Record />
+        ref={otherPanelRef}
-        )
+      >
-      }
+        {showDebugAndPreviewPanel && isChatMode && (
-      {
-        historyWorkflowData && isChatMode && (
-          <ChatRecord />
-        )
-      }
-      {
-        showDebugAndPreviewPanel && isChatMode && (
           <DebugAndPreview />
-        )
+        )}
-      }
+        {
-      {
+          historyWorkflowData && !isChatMode && (
-        showDebugAndPreviewPanel && !isChatMode && (
+            <Record />
-          <WorkflowPreview />
+          )
-        )
+        }
-      }
+        {
-      {
+          historyWorkflowData && isChatMode && (
-        showEnvPanel && (
+            <ChatRecord />
-          <EnvPanel />
+          )
-        )
+        }
-      }
+        {
-      {
+          showDebugAndPreviewPanel && !isChatMode && (
-        showChatVariablePanel && (
+            <WorkflowPreview />
-          <ChatVariablePanel />
+          )
-        )
+        }
-      }
+        {
-      {
+          showEnvPanel && (
-        showGlobalVariablePanel && (
+            <EnvPanel />
-          <GlobalVariablePanel />
+          )
-        )
+        }
-      }
+        {
-      {
+          showChatVariablePanel && (
-        showWorkflowVersionHistoryPanel && (
+            <ChatVariablePanel />
-          <VersionHistoryPanel/>
+          )
-        )
+        }
-      }
+        {
+          showGlobalVariablePanel && (
+            <GlobalVariablePanel />
+          )
+        }
+        {
+          showWorkflowVersionHistoryPanel && (
+            <VersionHistoryPanel/>
+          )
+        }
+      </div>
     </div>
   )
 }

web/app/components/workflow/panel/workflow-preview.tsx

@@ -49,7 +49,7 @@ const WorkflowPreview = () => {
 
   return (
     <div className={`
-      flex h-full w-[420px] flex-col rounded-l-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl
+      flex h-full w-[400px] flex-col rounded-l-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl
     `}>
       <div className='flex items-center justify-between p-4 pb-1 text-base font-semibold text-text-primary'>
         {`Test Run${!workflowRunningData?.result.sequence_number ? '' : `#${workflowRunningData?.result.sequence_number}`}`}

web/app/components/workflow/store/workflow/index.ts

@@ -31,6 +31,8 @@ import type { CurrentVarsSliceShape } from './current-vars-slice'
 import { createCurrentVarsSlice } from './current-vars-slice'
 
 import { WorkflowContext } from '@/app/components/workflow/context'
+import type { LayoutSliceShape } from './layout-slice'
+import { createLayoutSlice } from './layout-slice'
 
 export type Shape =
   ChatVariableSliceShape &
@@ -45,7 +47,8 @@ export type Shape =
   WorkflowDraftSliceShape &
   WorkflowSliceShape &
   LastRunSliceShape &
-  CurrentVarsSliceShape
+  CurrentVarsSliceShape &
+  LayoutSliceShape
 
 export const createWorkflowStore = () => {
   return createStore<Shape>((...args) => ({
@@ -62,6 +65,7 @@ export const createWorkflowStore = () => {
     ...createWorkflowSlice(...args),
     ...createLastRunSlice(...args),
     ...createCurrentVarsSlice(...args),
+    ...createLayoutSlice(...args),
   }))
 }
 

web/app/components/workflow/store/workflow/layout-slice.ts

@@ -0,0 +1,36 @@
+import type { StateCreator } from 'zustand'
+
+export type LayoutSliceShape = {
+  workflowCanvasWidth?: number
+  workflowCanvasHeight?: number
+  setWorkflowCanvasWidth: (width: number) => void
+  setWorkflowCanvasHeight: (height: number) => void
+  // rightPanelWidth - otherPanelWidth = nodePanelWidth
+  rightPanelWidth?: number
+  setRightPanelWidth: (width: number) => void
+  nodePanelWidth: number
+  setNodePanelWidth: (width: number) => void
+  otherPanelWidth: number
+  setOtherPanelWidth: (width: number) => void
+  bottomPanelWidth: number // min-width = 400px; default-width = auto || 480px;
+  setBottomPanelWidth: (width: number) => void
+  bottomPanelHeight: number // min-height = 120px; max-height = 480px; default-height = 320px;
+  setBottomPanelHeight: (height: number) => void
+}
+
+export const createLayoutSlice: StateCreator<LayoutSliceShape> = set => ({
+  workflowCanvasWidth: undefined,
+  workflowCanvasHeight: undefined,
+  setWorkflowCanvasWidth: width => set(() => ({ workflowCanvasWidth: width })),
+  setWorkflowCanvasHeight: height => set(() => ({ workflowCanvasHeight: height })),
+  rightPanelWidth: undefined,
+  setRightPanelWidth: width => set(() => ({ rightPanelWidth: width })),
+  nodePanelWidth: localStorage.getItem('workflow-node-panel-width') ? Number.parseFloat(localStorage.getItem('workflow-node-panel-width')!) : 400,
+  setNodePanelWidth: width => set(() => ({ nodePanelWidth: width })),
+  otherPanelWidth: 400,
+  setOtherPanelWidth: width => set(() => ({ otherPanelWidth: width })),
+  bottomPanelWidth: 480,
+  setBottomPanelWidth: width => set(() => ({ bottomPanelWidth: width })),
+  bottomPanelHeight: 320,
+  setBottomPanelHeight: height => set(() => ({ bottomPanelHeight: height })),
+})