From 4f0deb5054abff86f6fcdafe67a2369f389671a9 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Thu, 20 Feb 2025 15:57:41 -0800
Subject: [PATCH] improvement(start): only allow one starter block

---
 .../components/action-bar/action-bar.tsx      | 61 +++++++++++--------
 .../workflow-block/workflow-block.tsx         |  2 +-
 app/w/components/toolbar/toolbar.tsx          | 17 +++---
 3 files changed, 44 insertions(+), 36 deletions(-)

diff --git a/app/w/[id]/components/workflow-block/components/action-bar/action-bar.tsx b/app/w/[id]/components/workflow-block/components/action-bar/action-bar.tsx
index 61bc7a1756..07f2fc9887 100644
--- a/app/w/[id]/components/workflow-block/components/action-bar/action-bar.tsx
+++ b/app/w/[id]/components/workflow-block/components/action-bar/action-bar.tsx
@@ -6,9 +6,10 @@ import { useWorkflowStore } from '@/stores/workflow/store'
 
 interface ActionBarProps {
   blockId: string
+  blockType: string
 }
 
-export function ActionBar({ blockId }: ActionBarProps) {
+export function ActionBar({ blockId, blockType }: ActionBarProps) {
   const removeBlock = useWorkflowStore((state) => state.removeBlock)
   const toggleBlockEnabled = useWorkflowStore((state) => state.toggleBlockEnabled)
   const toggleBlockHandles = useWorkflowStore((state) => state.toggleBlockHandles)
@@ -18,6 +19,8 @@ export function ActionBar({ blockId }: ActionBarProps) {
     (state) => state.blocks[blockId]?.horizontalHandles ?? false
   )
 
+  const isStarterBlock = blockType === 'starter'
+
   return (
     <div className="absolute top-0 -right-20 flex flex-col items-center gap-2 p-2 bg-background rounded-md shadow-sm border border-gray-200 dark:border-gray-800">
       {/* <Tooltip>
@@ -51,19 +54,21 @@ export function ActionBar({ blockId }: ActionBarProps) {
         <TooltipContent side="right">{isEnabled ? 'Disable Block' : 'Enable 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 side="right">Duplicate Block</TooltipContent>
-      </Tooltip>
+      {!isStarterBlock && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => duplicateBlock(blockId)}
+              className="text-gray-500"
+            >
+              <Copy className="h-4 w-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="right">Duplicate Block</TooltipContent>
+        </Tooltip>
+      )}
 
       <Tooltip>
         <TooltipTrigger asChild>
@@ -85,19 +90,21 @@ export function ActionBar({ blockId }: ActionBarProps) {
         </TooltipContent>
       </Tooltip>
 
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => removeBlock(blockId)}
-            className="text-gray-500 hover:text-red-600"
-          >
-            <Trash2 className="h-4 w-4" />
-          </Button>
-        </TooltipTrigger>
-        <TooltipContent side="right">Delete Block</TooltipContent>
-      </Tooltip>
+      {!isStarterBlock && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => removeBlock(blockId)}
+              className="text-gray-500 hover:text-red-600"
+            >
+              <Trash2 className="h-4 w-4" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="right">Delete Block</TooltipContent>
+        </Tooltip>
+      )}
     </div>
   )
 }
diff --git a/app/w/[id]/components/workflow-block/workflow-block.tsx b/app/w/[id]/components/workflow-block/workflow-block.tsx
index 18cfc6c83d..cdecb0a543 100644
--- a/app/w/[id]/components/workflow-block/workflow-block.tsx
+++ b/app/w/[id]/components/workflow-block/workflow-block.tsx
@@ -191,7 +191,7 @@ export function WorkflowBlock({ id, data, selected }: NodeProps<WorkflowBlockPro
           isActiveBlock && 'ring-2 animate-pulse-ring'
         )}
       >
-        {selected && <ActionBar blockId={id} />}
+        {selected && <ActionBar blockId={id} blockType={type} />}
         <ConnectionBlocks blockId={id} setIsConnecting={setIsConnecting} />
 
         {/* Input Handle - Don't show for starter blocks */}
diff --git a/app/w/components/toolbar/toolbar.tsx b/app/w/components/toolbar/toolbar.tsx
index ed52cc0413..98b371f543 100644
--- a/app/w/components/toolbar/toolbar.tsx
+++ b/app/w/components/toolbar/toolbar.tsx
@@ -16,15 +16,16 @@ export function Toolbar() {
   const [isCollapsed, setIsCollapsed] = useState(false)
 
   const blocks = useMemo(() => {
-    if (!searchQuery.trim()) {
-      return getBlocksByCategory(activeTab)
-    }
+    const filteredBlocks = !searchQuery.trim() ? getBlocksByCategory(activeTab) : getAllBlocks()
 
-    const query = searchQuery.toLowerCase()
-    return getAllBlocks().filter(
-      (block) =>
-        block.name.toLowerCase().includes(query) || block.description.toLowerCase().includes(query)
-    )
+    return filteredBlocks.filter((block) => {
+      if (block.type === 'starter') return false
+      return (
+        !searchQuery.trim() ||
+        block.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        block.description.toLowerCase().includes(searchQuery.toLowerCase())
+      )
+    })
   }, [searchQuery, activeTab])
 
   if (isCollapsed) {