fix: fix variable inspect panel width in subgraphs

web/app/components/sub-graph/components/sub-graph-children.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react'
 import type { MentionConfig } from '@/app/components/workflow/nodes/_base/types'
 import type { NodeOutPutVar } from '@/app/components/workflow/types'
-import { memo, useMemo } from 'react'
+import { memo, useEffect, useMemo, useRef } from 'react'
 import { useStore as useReactFlowStore } from 'reactflow'
 import { useShallow } from 'zustand/react/shallow'
 import { useIsChatMode, useWorkflowVariables } from '@/app/components/workflow/hooks'
@@ -26,6 +26,37 @@ const SubGraphChildren: FC<SubGraphChildrenProps> = ({
   const { getNodeAvailableVars } = useWorkflowVariables()
   const isChatMode = useIsChatMode()
   const nodePanelWidth = useStore(s => s.nodePanelWidth)
+  const setRightPanelWidth = useStore(s => s.setRightPanelWidth)
+  const panelRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const element = panelRef.current
+    if (!element)
+      return
+
+    const updateWidth = (width: number) => {
+      if (width > 0)
+        setRightPanelWidth(width)
+    }
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.borderBoxSize?.length)
+          updateWidth(entry.borderBoxSize[0].inlineSize)
+        else if (entry.contentRect.width > 0)
+          updateWidth(entry.contentRect.width)
+        else
+          updateWidth(element.getBoundingClientRect().width)
+      }
+    })
+
+    resizeObserver.observe(element)
+    updateWidth(element.getBoundingClientRect().width)
+
+    return () => {
+      resizeObserver.disconnect()
+    }
+  }, [setRightPanelWidth])
 
   const selectedNode = useReactFlowStore(useShallow((s) => {
     return s.getNodes().find(node => node.data.selected)
@@ -66,7 +97,7 @@ const SubGraphChildren: FC<SubGraphChildrenProps> = ({
 
   return (
     <div className="pointer-events-none absolute inset-y-0 right-0 z-10 flex">
-      <div className="pointer-events-auto">
+      <div className="pointer-events-auto" ref={panelRef}>
         {nodePanel || (
           <div className="relative mr-1 h-full">
             <div

web/app/components/sub-graph/components/sub-graph-main.tsx

@@ -1,10 +1,14 @@
 import type { FC } from 'react'
 import type { Viewport } from 'reactflow'
+import type { Shape as HooksStoreShape } from '@/app/components/workflow/hooks-store'
 import type { MentionConfig } from '@/app/components/workflow/nodes/_base/types'
 import type { Edge, Node } from '@/app/components/workflow/types'
 import { useCallback, useMemo } from 'react'
 import { useStoreApi } from 'reactflow'
 import { WorkflowWithInnerContext } from '@/app/components/workflow'
+import { useSetWorkflowVarsWithValue } from '@/app/components/workflow/hooks/use-fetch-workflow-inspect-vars'
+import { useInspectVarsCrudCommon } from '@/app/components/workflow/hooks/use-inspect-vars-crud-common'
+import { FlowType } from '@/types/common'
 import { useAvailableNodesMetaData } from '../hooks'
 import SubGraphChildren from './sub-graph-children'
 
@@ -14,6 +18,7 @@ type SubGraphMainProps = {
   viewport: Viewport
   agentName: string
   extractorNodeId: string
+  configsMap?: HooksStoreShape['configsMap']
   mentionConfig: MentionConfig
   onMentionConfigChange: (config: MentionConfig) => void
   onSave?: (nodes: Node[], edges: Edge[]) => void
@@ -25,12 +30,23 @@ const SubGraphMain: FC<SubGraphMainProps> = ({
   viewport,
   agentName,
   extractorNodeId,
+  configsMap,
   mentionConfig,
   onMentionConfigChange,
   onSave,
 }) => {
   const reactFlowStore = useStoreApi()
   const availableNodesMetaData = useAvailableNodesMetaData()
+  const flowType = configsMap?.flowType ?? FlowType.appFlow
+  const flowId = configsMap?.flowId ?? ''
+  const { fetchInspectVars } = useSetWorkflowVarsWithValue({
+    flowType,
+    flowId,
+  })
+  const inspectVarsCrud = useInspectVarsCrudCommon({
+    flowType,
+    flowId,
+  })
 
   const handleSyncSubGraphDraft = useCallback(() => {
     const { getNodes, edges } = reactFlowStore.getState()
@@ -40,11 +56,14 @@ const SubGraphMain: FC<SubGraphMainProps> = ({
   const hooksStore = useMemo(() => ({
     interactionMode: 'subgraph',
     availableNodesMetaData,
+    configsMap,
+    fetchInspectVars,
+    ...inspectVarsCrud,
     doSyncWorkflowDraft: async () => {
       handleSyncSubGraphDraft()
     },
     syncWorkflowDraftWhenPageClose: handleSyncSubGraphDraft,
-  }), [availableNodesMetaData, handleSyncSubGraphDraft])
+  }), [availableNodesMetaData, configsMap, fetchInspectVars, handleSyncSubGraphDraft, inspectVarsCrud])
 
   return (
     <WorkflowWithInnerContext

web/app/components/sub-graph/index.tsx

@@ -7,6 +7,7 @@ import { memo, useEffect, useMemo } from 'react'
 import WorkflowWithDefaultContext from '@/app/components/workflow'
 import { NODE_WIDTH_X_OFFSET, START_INITIAL_POSITION } from '@/app/components/workflow/constants'
 import { WorkflowContextProvider } from '@/app/components/workflow/context'
+import { useHooksStore } from '@/app/components/workflow/hooks-store'
 import { useStore } from '@/app/components/workflow/store'
 import { BlockEnum, EditionType, isPromptMessageContext, PromptRole } from '@/app/components/workflow/types'
 import SubGraphMain from './components/sub-graph-main'
@@ -46,6 +47,7 @@ const SubGraphContent: FC<SubGraphProps> = (props) => {
 
   const setParentAvailableVars = useStore(state => state.setParentAvailableVars)
   const setParentAvailableNodes = useStore(state => state.setParentAvailableNodes)
+  const configsMap = useHooksStore(state => state.configsMap)
 
   useEffect(() => {
     setParentAvailableVars?.(parentAvailableVars || [])
@@ -187,6 +189,7 @@ const SubGraphContent: FC<SubGraphProps> = (props) => {
         viewport={defaultViewport}
         agentName={agentName}
         extractorNodeId={`${toolNodeId}_ext_${paramKey}`}
+        configsMap={configsMap}
         mentionConfig={mentionConfig}
         onMentionConfigChange={onMentionConfigChange}
         onSave={onSave}

web/app/components/workflow/index.tsx

@@ -419,7 +419,7 @@ export const Workflow: FC<WorkflowProps> = memo(({
       >
         {!isSubGraph && <Control />}
       </div>
-      {!isSubGraph && <Operator handleRedo={handleHistoryForward} handleUndo={handleHistoryBack} />}
+      <Operator handleRedo={handleHistoryForward} handleUndo={handleHistoryBack} />
       {!isSubGraph && <PanelContextmenu />}
       {!isSubGraph && <NodeContextmenu />}
       {!isSubGraph && <SelectionContextmenu />}

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

@@ -2,6 +2,7 @@ import type { Node } from 'reactflow'
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react'
 import { MiniMap } from 'reactflow'
 import UndoRedo from '../header/undo-redo'
+import { useHooksStore } from '../hooks-store'
 import { useStore } from '../store'
 import VariableInspectPanel from '../variable-inspect'
 import VariableTrigger from '../variable-inspect/trigger'
@@ -14,16 +15,19 @@ export type OperatorProps = {
 
 const Operator = ({ handleUndo, handleRedo }: OperatorProps) => {
   const bottomPanelRef = useRef<HTMLDivElement>(null)
+  const interactionMode = useHooksStore(s => s.interactionMode)
   const workflowCanvasWidth = useStore(s => s.workflowCanvasWidth)
   const rightPanelWidth = useStore(s => s.rightPanelWidth)
+  const nodePanelWidth = useStore(s => s.nodePanelWidth)
   const setBottomPanelWidth = useStore(s => s.setBottomPanelWidth)
   const setBottomPanelHeight = useStore(s => s.setBottomPanelHeight)
 
   const bottomPanelWidth = useMemo(() => {
-    if (!workflowCanvasWidth || !rightPanelWidth)
+    const panelWidth = rightPanelWidth || nodePanelWidth
+    if (!workflowCanvasWidth || !panelWidth)
       return 'auto'
-    return Math.max((workflowCanvasWidth - rightPanelWidth), 400)
-  }, [workflowCanvasWidth, rightPanelWidth])
+    return Math.max((workflowCanvasWidth - panelWidth), 400)
+  }, [interactionMode, nodePanelWidth, rightPanelWidth, workflowCanvasWidth])
 
   const getMiniMapNodeClassName = useCallback((node: Node) => {
     return node.data?.selected