From 38e3731111e9c9340d0e41c7ac449a9ef2276ad8 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Wed, 29 Jan 2025 21:29:40 -0800
Subject: [PATCH] Added duplicate block function

---
 .../components/action-bar/action-bar.tsx      | 17 +++++++-
 stores/workflow/types.ts                      |  1 +
 stores/workflow/workflow-store.ts             | 41 +++++++++++++++++++
 3 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/app/w/components/workflow-block/components/action-bar/action-bar.tsx b/app/w/components/workflow-block/components/action-bar/action-bar.tsx
index 8422cba5b4..da057c2f77 100644
--- a/app/w/components/workflow-block/components/action-bar/action-bar.tsx
+++ b/app/w/components/workflow-block/components/action-bar/action-bar.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@/components/ui/button'
-import { Trash2, Play, Circle, CircleOff } from 'lucide-react'
+import { Trash2, Play, Circle, CircleOff, Copy } from 'lucide-react'
 import { useWorkflowStore } from '@/stores/workflow/workflow-store'
 import {
   Tooltip,
@@ -16,6 +16,7 @@ export function ActionBar({ blockId }: ActionBarProps) {
   const toggleBlockEnabled = useWorkflowStore(
     (state) => state.toggleBlockEnabled
   )
+  const duplicateBlock = useWorkflowStore((state) => state.duplicateBlock)
   const isEnabled = useWorkflowStore(
     (state) => state.blocks[blockId]?.enabled ?? true
   )
@@ -36,6 +37,20 @@ export function ActionBar({ blockId }: ActionBarProps) {
         <TooltipContent>Delete Block</TooltipContent>
       </Tooltip>
 
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => duplicateBlock(blockId)}
+            className="text-gray-500"
+          >
+            <Copy className="h-4 w-4" />
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>Duplicate Block</TooltipContent>
+      </Tooltip>
+
       <Tooltip>
         <TooltipTrigger asChild>
           <Button
diff --git a/stores/workflow/types.ts b/stores/workflow/types.ts
index 08cd265b1f..5009895543 100644
--- a/stores/workflow/types.ts
+++ b/stores/workflow/types.ts
@@ -44,6 +44,7 @@ export interface WorkflowActions {
   clear: () => void
   updateLastSaved: () => void
   toggleBlockEnabled: (id: string) => void
+  duplicateBlock: (id: string) => void
 }
 
 export type WorkflowStore = WorkflowState & WorkflowActions 
\ No newline at end of file
diff --git a/stores/workflow/workflow-store.ts b/stores/workflow/workflow-store.ts
index 2ce76d2f08..c261e8281d 100644
--- a/stores/workflow/workflow-store.ts
+++ b/stores/workflow/workflow-store.ts
@@ -200,6 +200,47 @@ export const useWorkflowStore = create<WorkflowStoreWithHistory>()(
         set(newState)
         get().updateLastSaved()
       },
+
+      duplicateBlock: (id: string) => {
+        const block = get().blocks[id]
+        if (!block) return
+
+        const newId = crypto.randomUUID()
+        const offsetPosition = {
+          x: block.position.x + 250, // Offset to the right
+          y: block.position.y + 20,  // Slight offset down
+        }
+
+        // Deep clone the block's subBlocks
+        const newSubBlocks = Object.entries(block.subBlocks).reduce(
+          (acc, [subId, subBlock]) => ({
+            ...acc,
+            [subId]: {
+              ...subBlock,
+              value: JSON.parse(JSON.stringify(subBlock.value)), // Deep clone values
+            },
+          }),
+          {}
+        )
+
+        const newState = {
+          blocks: {
+            ...get().blocks,
+            [newId]: {
+              ...block,
+              id: newId,
+              name: `${block.name}`,
+              position: offsetPosition,
+              subBlocks: newSubBlocks,
+            },
+          },
+          edges: [...get().edges],
+        }
+
+        set(newState)
+        pushHistory(set, get, newState, `Duplicate ${block.type} block`)
+        get().updateLastSaved()
+      },
     })),
     { name: 'workflow-store' }
   )