improvement(ui): add tooltip to show if a field is required

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>
   )

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',

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

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

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
     {