From 82a827409f21bbb9dc5d653193fb320f2404b9fc Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Sat, 8 Feb 2025 22:13:00 -0800
Subject: [PATCH] Added block horizontal/vertical mode

---
 .../workflow-block/workflow-block.tsx         | 37 ++++++++++++++++---
 stores/workflow/store.ts                      | 13 +++++++
 stores/workflow/types.ts                      |  2 +
 3 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/app/w/[id]/components/workflow-block/workflow-block.tsx b/app/w/[id]/components/workflow-block/workflow-block.tsx
index d055b6c075..a8361b21c7 100644
--- a/app/w/[id]/components/workflow-block/workflow-block.tsx
+++ b/app/w/[id]/components/workflow-block/workflow-block.tsx
@@ -1,8 +1,11 @@
 import { useEffect, useRef, useState } from 'react'
+import { RectangleHorizontal, RectangleVertical } from 'lucide-react'
 import { Handle, Position } from 'reactflow'
 import { useUpdateNodeInternals } from 'reactflow'
 import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
 import { Card } from '@/components/ui/card'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { cn } from '@/lib/utils'
 import { useWorkflowStore } from '@/stores/workflow/store'
 import { BlockConfig, SubBlockConfig } from '../../../../../blocks/types'
@@ -31,6 +34,8 @@ export function WorkflowBlock({ id, type, config, name, selected }: WorkflowBloc
   const updateBlockName = useWorkflowStore((state) => state.updateBlockName)
   const blockRef = useRef<HTMLDivElement>(null)
   const updateNodeInternals = useUpdateNodeInternals()
+  const isWide = useWorkflowStore((state) => state.blocks[id]?.isWide ?? false)
+  const toggleBlockWide = useWorkflowStore((state) => state.toggleBlockWide)
 
   // Add effect to update node internals when handles change
   useEffect(() => {
@@ -91,7 +96,8 @@ export function WorkflowBlock({ id, type, config, name, selected }: WorkflowBloc
     <Card
       ref={blockRef}
       className={cn(
-        'w-[320px] shadow-md select-none group relative cursor-default',
+        'shadow-md select-none group relative cursor-default',
+        isWide ? 'w-[480px]' : 'w-[320px]',
         !isEnabled && 'shadow-sm'
       )}
     >
@@ -143,11 +149,30 @@ export function WorkflowBlock({ id, type, config, name, selected }: WorkflowBloc
             </span>
           )}
         </div>
-        {!isEnabled && (
-          <Badge variant="secondary" className="bg-gray-100 text-gray-500 hover:bg-gray-100">
-            Disabled
-          </Badge>
-        )}
+        <div className="flex items-center gap-2">
+          {!isEnabled && (
+            <Badge variant="secondary" className="bg-gray-100 text-gray-500 hover:bg-gray-100">
+              Disabled
+            </Badge>
+          )}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => toggleBlockWide(id)}
+                className="text-gray-500 p-1 h-7"
+              >
+                {isWide ? (
+                  <RectangleHorizontal className="h-5 w-5" />
+                ) : (
+                  <RectangleVertical className="h-5 w-5" />
+                )}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="top">{isWide ? 'Narrow Block' : 'Expand Block'}</TooltipContent>
+          </Tooltip>
+        </div>
       </div>
 
       <div className="px-4 pt-3 pb-4 space-y-4 cursor-pointer">
diff --git a/stores/workflow/store.ts b/stores/workflow/store.ts
index f2cb2e4d21..edde8c9c96 100644
--- a/stores/workflow/store.ts
+++ b/stores/workflow/store.ts
@@ -324,6 +324,19 @@ export const useWorkflowStore = create<WorkflowStoreWithHistory>()(
         pushHistory(set, get, newState, `${name} block name updated`)
         get().updateLastSaved()
       },
+
+      toggleBlockWide: (id: string) => {
+        set((state) => ({
+          blocks: {
+            ...state.blocks,
+            [id]: {
+              ...state.blocks[id],
+              isWide: !state.blocks[id].isWide,
+            },
+          },
+          edges: [...state.edges],
+        }))
+      },
     })),
     { name: 'workflow-store' }
   )
diff --git a/stores/workflow/types.ts b/stores/workflow/types.ts
index bc26374f07..3c37c2ca30 100644
--- a/stores/workflow/types.ts
+++ b/stores/workflow/types.ts
@@ -15,6 +15,7 @@ export interface BlockState {
   outputs: Record<string, BlockOutput>
   enabled: boolean
   horizontalHandles?: boolean
+  isWide?: boolean
 }
 
 export interface SubBlockState {
@@ -42,6 +43,7 @@ export interface WorkflowActions {
   duplicateBlock: (id: string) => void
   toggleBlockHandles: (id: string) => void
   updateBlockName: (id: string, name: string) => void
+  toggleBlockWide: (id: string) => void
 }
 
 export type WorkflowStore = WorkflowState & WorkflowActions