From 6cbb4c0017534c1ce53804d9696c47df79787af5 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Sat, 8 Mar 2025 20:36:52 -0700
Subject: [PATCH] improvement(ui): add tooltip to show if a field is required

---
 .../components/sub-block/sub-block.tsx        | 31 ++++++++++++++++++-
 blocks/blocks/crewai.ts                       |  2 +-
 blocks/blocks/drive.ts                        |  2 +-
 blocks/blocks/exa.ts                          |  2 +-
 blocks/blocks/sheets.ts                       |  2 +-
 5 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/app/w/[id]/components/workflow-block/components/sub-block/sub-block.tsx b/app/w/[id]/components/workflow-block/components/sub-block/sub-block.tsx
index 40bbd5f4d2..7732540f05 100644
--- a/app/w/[id]/components/workflow-block/components/sub-block/sub-block.tsx
+++ b/app/w/[id]/components/workflow-block/components/sub-block/sub-block.tsx
@@ -1,4 +1,7 @@
 import { Label } from '@/components/ui/label'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { useWorkflowStore } from '@/stores/workflows/workflow/store'
+import { getBlock } from '@/blocks/index'
 import { SubBlockConfig } from '../../../../../../../blocks/types'
 import { CheckboxList } from './components/checkbox-list'
 import { Code } from './components/code'
@@ -27,6 +30,16 @@ export function SubBlock({ blockId, config, isConnecting }: SubBlockProps) {
     e.stopPropagation()
   }
 
+  const isFieldRequired = () => {
+    const blockType = useWorkflowStore.getState().blocks[blockId]?.type
+    if (!blockType) return false
+
+    const blockConfig = getBlock(blockType)
+    if (!blockConfig) return false
+
+    return blockConfig.inputs[config.id]?.required === true
+  }
+
   const renderInput = () => {
     switch (config.type) {
       case 'short-input':
@@ -139,9 +152,25 @@ export function SubBlock({ blockId, config, isConnecting }: SubBlockProps) {
     }
   }
 
+  const required = isFieldRequired()
+
   return (
     <div className="space-y-1" onMouseDown={handleMouseDown}>
-      {config.type !== 'switch' && <Label>{config.title}</Label>}
+      {config.type !== 'switch' && (
+        <Label>
+          {config.title}
+          {required && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span className="text-red-500 ml-1 cursor-help">*</span>
+              </TooltipTrigger>
+              <TooltipContent side="top">
+                <p>This field is required</p>
+              </TooltipContent>
+            </Tooltip>
+          )}
+        </Label>
+      )}
       {renderInput()}
     </div>
   )
diff --git a/blocks/blocks/crewai.ts b/blocks/blocks/crewai.ts
index 48dee6c3a2..96cffb96a8 100644
--- a/blocks/blocks/crewai.ts
+++ b/blocks/blocks/crewai.ts
@@ -31,7 +31,7 @@ export const CrewAIVisionBlock: BlockConfig<VisionResponse> = {
       title: 'Prompt',
       type: 'long-input',
       layout: 'full',
-      placeholder: 'Enter prompt for image analysis (optional)',
+      placeholder: 'Enter prompt for image analysis',
     },
     {
       id: 'apiKey',
diff --git a/blocks/blocks/drive.ts b/blocks/blocks/drive.ts
index 9db2d3c2fe..7592648c32 100644
--- a/blocks/blocks/drive.ts
+++ b/blocks/blocks/drive.ts
@@ -75,7 +75,7 @@ export const GoogleDriveBlock: BlockConfig<GoogleDriveResponse> = {
       title: 'Parent Folder ID',
       type: 'short-input',
       layout: 'full',
-      placeholder: 'ID of the parent folder (optional, leave empty for root folder)',
+      placeholder: 'ID of the parent folder (leave empty for root folder)',
       condition: { field: 'operation', value: 'upload' },
     },
     // Download Fields
diff --git a/blocks/blocks/exa.ts b/blocks/blocks/exa.ts
index 530586423b..7232a08419 100644
--- a/blocks/blocks/exa.ts
+++ b/blocks/blocks/exa.ts
@@ -96,7 +96,7 @@ export const ExaBlock: BlockConfig<ExaResponse> = {
       title: 'Summary Query',
       type: 'long-input',
       layout: 'full',
-      placeholder: 'Optional: Enter a query to guide the summary generation...',
+      placeholder: 'Enter a query to guide the summary generation...',
       condition: { field: 'operation', value: 'exa_get_contents' },
     },
     // Find Similar Links operation inputs
diff --git a/blocks/blocks/sheets.ts b/blocks/blocks/sheets.ts
index cd41fa1411..2db9609faa 100644
--- a/blocks/blocks/sheets.ts
+++ b/blocks/blocks/sheets.ts
@@ -57,7 +57,7 @@ export const GoogleSheetsBlock: BlockConfig<GoogleSheetsResponse> = {
       title: 'Range',
       type: 'short-input',
       layout: 'full',
-      placeholder: 'Optional: Sheet name and cell range (e.g., Sheet1!A1:D10)',
+      placeholder: 'Sheet name and cell range (e.g., Sheet1!A1:D10)',
     },
     // Write-specific Fields
     {