fix(duplicate): added isWide and advacnedMode to optimistic duplicate, persist collapsed subblock state (#847)

* fix(duplicate): added isWide and advacnedMode to optimistic duplicate, ensured it persists on client & server

* use collaborative set subblock value instead of doing it locally for collapsed subblocks

* cleamup

Author: waleedlatif1

apps/sim/app/api/__test-utils__/utils.ts

@@ -98,6 +98,7 @@ export const sampleWorkflowState = {
       enabled: true,
       horizontalHandles: true,
       isWide: false,
+      advancedMode: false,
       height: 95,
     },
     'agent-id': {
@@ -125,6 +126,7 @@ export const sampleWorkflowState = {
       enabled: true,
       horizontalHandles: true,
       isWide: false,
+      advancedMode: false,
       height: 680,
     },
   },

apps/sim/app/api/tools/edit-workflow/route.ts

@@ -175,6 +175,7 @@ export async function POST(request: NextRequest) {
         enabled: true,
         horizontalHandles: true,
         isWide: false,
+        advancedMode: false,
         height: 0,
         data: block.data || {},
       }

apps/sim/app/api/workflows/[id]/yaml/route.ts

@@ -283,6 +283,7 @@ export async function PUT(request: NextRequest, { params }: { params: Promise<{
           enabled: true,
           horizontalHandles: true,
           isWide: false,
+          advancedMode: false,
           height: 0,
           data: block.data || {},
         }
@@ -325,6 +326,7 @@ export async function PUT(request: NextRequest, { params }: { params: Promise<{
           enabled: true,
           horizontalHandles: true,
           isWide: false,
+          advancedMode: false,
           height: 0,
           data: block.data || {},
         }

apps/sim/app/api/workflows/route.ts

@@ -129,6 +129,7 @@ export async function POST(req: NextRequest) {
           enabled: true,
           horizontalHandles: true,
           isWide: false,
+          advancedMode: false,
           height: 95,
         },
       },
@@ -176,6 +177,7 @@ export async function POST(req: NextRequest) {
         enabled: true,
         horizontalHandles: true,
         isWide: false,
+        advancedMode: false,
         height: '95',
         subBlocks: {
           startWorkflow: {

apps/sim/app/api/workspaces/route.ts

@@ -161,6 +161,7 @@ async function createWorkspace(userId: string, name: string) {
             enabled: true,
             horizontalHandles: true,
             isWide: false,
+            advancedMode: false,
             height: 95,
           },
         },
@@ -206,6 +207,7 @@ async function createWorkspace(userId: string, name: string) {
         enabled: true,
         horizontalHandles: true,
         isWide: false,
+        advancedMode: false,
         height: '95',
         subBlocks: {
           startWorkflow: {

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

@@ -14,6 +14,7 @@ import { WandPromptBar } from '@/app/workspace/[workspaceId]/w/[workflowId]/comp
 import { useSubBlockValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/hooks/use-sub-block-value'
 import { useWand } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-wand'
 import type { GenerationType } from '@/blocks/types'
+import { useCollaborativeWorkflow } from '@/hooks/use-collaborative-workflow'
 import { useTagSelection } from '@/hooks/use-tag-selection'
 import { useSubBlockStore } from '@/stores/workflows/subblock/store'
 
@@ -96,7 +97,11 @@ export function Code({
   const collapsedStateKey = `${subBlockId}_collapsed`
   const isCollapsed =
     (useSubBlockStore((state) => state.getValue(blockId, collapsedStateKey)) as boolean) ?? false
-  const setCollapsedValue = useSubBlockStore((state) => state.setValue)
+
+  const { collaborativeSetSubblockValue } = useCollaborativeWorkflow()
+  const setCollapsedValue = (blockId: string, subblockId: string, value: any) => {
+    collaborativeSetSubblockValue(blockId, subblockId, value)
+  }
 
   const showCollapseButton =
     (subBlockId === 'responseFormat' || subBlockId === 'code') && code.split('\n').length > 5

apps/sim/hooks/use-collaborative-workflow.ts

@@ -148,7 +148,7 @@ export function useCollaborativeWorkflow() {
               workflowStore.setBlockWide(payload.id, payload.isWide)
               break
             case 'update-advanced-mode':
-              workflowStore.toggleBlockAdvancedMode(payload.id)
+              workflowStore.setBlockAdvancedMode(payload.id, payload.advancedMode)
               break
             case 'toggle-handles': {
               const currentBlock = workflowStore.blocks[payload.id]
@@ -433,6 +433,7 @@ export function useCollaborativeWorkflow() {
           enabled: true,
           horizontalHandles: true,
           isWide: false,
+          advancedMode: false,
           height: 0,
           parentId,
           extent,
@@ -504,6 +505,7 @@ export function useCollaborativeWorkflow() {
         enabled: true,
         horizontalHandles: true,
         isWide: false,
+        advancedMode: false,
         height: 0, // Default height, will be set by the UI
         parentId,
         extent,
@@ -811,6 +813,7 @@ export function useCollaborativeWorkflow() {
         enabled: sourceBlock.enabled ?? true,
         horizontalHandles: sourceBlock.horizontalHandles ?? true,
         isWide: sourceBlock.isWide ?? false,
+        advancedMode: sourceBlock.advancedMode ?? false,
         height: sourceBlock.height || 0,
       }
 
@@ -821,7 +824,14 @@ export function useCollaborativeWorkflow() {
         offsetPosition,
         sourceBlock.data ? JSON.parse(JSON.stringify(sourceBlock.data)) : {},
         sourceBlock.data?.parentId,
-        sourceBlock.data?.extent
+        sourceBlock.data?.extent,
+        {
+          enabled: sourceBlock.enabled,
+          horizontalHandles: sourceBlock.horizontalHandles,
+          isWide: sourceBlock.isWide,
+          advancedMode: sourceBlock.advancedMode,
+          height: sourceBlock.height,
+        }
       )
 
       executeQueuedOperation('duplicate', 'block', duplicatedBlockData, () => {
@@ -830,7 +840,16 @@ export function useCollaborativeWorkflow() {
           sourceBlock.type,
           newName,
           offsetPosition,
-          sourceBlock.data ? JSON.parse(JSON.stringify(sourceBlock.data)) : {}
+          sourceBlock.data ? JSON.parse(JSON.stringify(sourceBlock.data)) : {},
+          sourceBlock.data?.parentId,
+          sourceBlock.data?.extent,
+          {
+            enabled: sourceBlock.enabled,
+            horizontalHandles: sourceBlock.horizontalHandles,
+            isWide: sourceBlock.isWide,
+            advancedMode: sourceBlock.advancedMode,
+            height: sourceBlock.height,
+          }
         )
 
         // Apply subblock values locally for immediate UI feedback