Added gmail tool to send/reach/search gmail, added condition display of sub-blocks. Need to integrate oauth2 credentials for gmail

app/w/[id]/components/workflow-block/components/sub-block/components/dropdown.tsx

@@ -9,7 +9,7 @@ import {
 import { useSubBlockValue } from '../hooks/use-sub-block-value'
 
 interface DropdownProps {
-  options: string[]
+  options: Array<string | { label: string; id: string }>
   defaultValue?: string
   blockId: string
   subBlockId: string
@@ -21,14 +21,24 @@ export function Dropdown({ options, defaultValue, blockId, subBlockId }: Dropdow
   // Set the value to the first option if it's not set
   useEffect(() => {
     if (!value && options.length > 0) {
-      setValue(defaultValue ?? options[0])
+      const firstOption = options[0]
+      const firstValue = typeof firstOption === 'string' ? firstOption : firstOption.id
+      setValue(firstValue)
     }
   }, [value, options, defaultValue, setValue])
 
+  const getOptionValue = (option: string | { label: string; id: string }) => {
+    return typeof option === 'string' ? option : option.id
+  }
+
+  const getOptionLabel = (option: string | { label: string; id: string }) => {
+    return typeof option === 'string' ? option : option.label
+  }
+
   return (
     <Select
       value={value as string | undefined}
-      defaultValue={defaultValue ?? options[0]}
+      defaultValue={defaultValue ?? getOptionValue(options[0])}
       onValueChange={(value) => setValue(value)}
     >
       <SelectTrigger className="text-left">
@@ -36,8 +46,8 @@ export function Dropdown({ options, defaultValue, blockId, subBlockId }: Dropdow
       </SelectTrigger>
       <SelectContent>
         {options.map((option) => (
-          <SelectItem key={option} value={option}>
-            {option}
+          <SelectItem key={getOptionValue(option)} value={getOptionValue(option)}>
+            {getOptionLabel(option)}
           </SelectItem>
         ))}
       </SelectContent>

app/w/[id]/components/workflow-block/components/sub-block/sub-block.tsx

@@ -10,6 +10,7 @@ import { SliderInput } from './components/slider-input'
 import { Switch } from './components/switch'
 import { Table } from './components/table'
 import { ToolInput } from './components/tool-input'
+import { useSubBlockValue } from './hooks/use-sub-block-value'
 
 interface SubBlockProps {
   blockId: string
@@ -18,10 +19,18 @@ interface SubBlockProps {
 }
 
 export function SubBlock({ blockId, config, isConnecting }: SubBlockProps) {
+  const [fieldValue] = useSubBlockValue(blockId, config.condition?.field || '')
+
   const handleMouseDown = (e: React.MouseEvent) => {
     e.stopPropagation()
   }
 
+  // Check if the sub-block should be rendered based on its condition
+  const shouldRender = () => {
+    if (!config.condition) return true
+    return fieldValue === config.condition.value
+  }
+
   const renderInput = () => {
     switch (config.type) {
       case 'short-input':
@@ -99,6 +108,10 @@ export function SubBlock({ blockId, config, isConnecting }: SubBlockProps) {
     }
   }
 
+  if (!shouldRender()) {
+    return null
+  }
+
   return (
     <div className="space-y-1" onMouseDown={handleMouseDown}>
       {config.type !== 'switch' && <Label>{config.title}</Label>}