improvement(context-menu): added awareness for chat and variables being open, fixed select calculation to match height calculation for selecting multiple blocks (#2715)

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/context-menu/pane-context-menu.tsx

@@ -24,9 +24,11 @@ export function PaneContextMenu({
   onAddBlock,
   onAutoLayout,
   onOpenLogs,
-  onOpenVariables,
-  onOpenChat,
+  onToggleVariables,
+  onToggleChat,
   onInvite,
+  isVariablesOpen = false,
+  isChatOpen = false,
   hasClipboard = false,
   disableEdit = false,
   disableAdmin = false,
@@ -125,19 +127,19 @@ export function PaneContextMenu({
         </PopoverItem>
         <PopoverItem
           onClick={() => {
-            onOpenVariables()
+            onToggleVariables()
             onClose()
           }}
         >
-          Variables
+          {isVariablesOpen ? 'Close Variables' : 'Open Variables'}
         </PopoverItem>
         <PopoverItem
           onClick={() => {
-            onOpenChat()
+            onToggleChat()
             onClose()
           }}
         >
-          Open Chat
+          {isChatOpen ? 'Close Chat' : 'Open Chat'}
         </PopoverItem>
 
         {/* Admin action */}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/context-menu/types.ts

@@ -77,9 +77,13 @@ export interface PaneContextMenuProps {
   onAddBlock: () => void
   onAutoLayout: () => void
   onOpenLogs: () => void
-  onOpenVariables: () => void
-  onOpenChat: () => void
+  onToggleVariables: () => void
+  onToggleChat: () => void
   onInvite: () => void
+  /** Whether the variables panel is currently open */
+  isVariablesOpen?: boolean
+  /** Whether the chat panel is currently open */
+  isChatOpen?: boolean
   /** Whether clipboard has content for pasting */
   hasClipboard?: boolean
   /** Whether edit actions are disabled (no permission) */

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx

@@ -911,7 +911,7 @@ export const WorkflowBlock = memo(function WorkflowBlock({
       type,
       config.category,
       displayTriggerMode,
-      subBlockRows.length,
+      subBlockRows.reduce((acc, row) => acc + row.length, 0),
       conditionRows.length,
       routerRows.length,
       horizontalHandles,

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx

@@ -269,6 +269,10 @@ const WorkflowContent = React.memo(() => {
 
   const snapToGridSize = useGeneralStore((state) => state.snapToGridSize)
   const snapToGrid = snapToGridSize > 0
+
+  // Panel open states for context menu
+  const isVariablesOpen = useVariablesStore((state) => state.isOpen)
+  const isChatOpen = useChatStore((state) => state.isChatOpen)
   const snapGrid: [number, number] = useMemo(
     () => [snapToGridSize, snapToGridSize],
     [snapToGridSize]
@@ -766,12 +770,14 @@ const WorkflowContent = React.memo(() => {
     router.push(`/workspace/${workspaceId}/logs?workflowIds=${workflowIdParam}`)
   }, [router, workspaceId, workflowIdParam])
 
-  const handleContextOpenVariables = useCallback(() => {
-    useVariablesStore.getState().setIsOpen(true)
+  const handleContextToggleVariables = useCallback(() => {
+    const { isOpen, setIsOpen } = useVariablesStore.getState()
+    setIsOpen(!isOpen)
   }, [])
 
-  const handleContextOpenChat = useCallback(() => {
-    useChatStore.getState().setIsChatOpen(true)
+  const handleContextToggleChat = useCallback(() => {
+    const { isChatOpen, setIsChatOpen } = useChatStore.getState()
+    setIsChatOpen(!isChatOpen)
   }, [])
 
   const handleContextInvite = useCallback(() => {
@@ -2864,9 +2870,11 @@ const WorkflowContent = React.memo(() => {
               onAddBlock={handleContextAddBlock}
               onAutoLayout={handleAutoLayout}
               onOpenLogs={handleContextOpenLogs}
-              onOpenVariables={handleContextOpenVariables}
-              onOpenChat={handleContextOpenChat}
+              onToggleVariables={handleContextToggleVariables}
+              onToggleChat={handleContextToggleChat}
               onInvite={handleContextInvite}
+              isVariablesOpen={isVariablesOpen}
+              isChatOpen={isChatOpen}
               hasClipboard={hasClipboard()}
               disableEdit={!effectivePermissions.canEdit}
               disableAdmin={!effectivePermissions.canAdmin}