fix: supabase, dropdown, short-input, tool execution

Author: emir-karabeg

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

@@ -1,4 +1,4 @@
-import { useMemo } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import {
   Select,
   SelectContent,
@@ -19,6 +19,7 @@ interface DropdownProps {
 
 export function Dropdown({ options, defaultValue, blockId, subBlockId }: DropdownProps) {
   const [value, setValue] = useSubBlockValue<string>(blockId, subBlockId, true)
+  const [storeInitialized, setStoreInitialized] = useState(false)
 
   // Evaluate options if it's a function
   const evaluatedOptions = useMemo(() => {
@@ -33,33 +34,57 @@ export function Dropdown({ options, defaultValue, blockId, subBlockId }: Dropdow
     return typeof option === 'string' ? option : option.label
   }
 
+  // Get the default option value (first option or provided defaultValue)
+  const defaultOptionValue = useMemo(() => {
+    if (defaultValue !== undefined) {
+      return defaultValue
+    }
+
+    if (evaluatedOptions.length > 0) {
+      return getOptionValue(evaluatedOptions[0])
+    }
+
+    return undefined
+  }, [defaultValue, evaluatedOptions, getOptionValue])
+
+  // Mark store as initialized on first render
+  useEffect(() => {
+    setStoreInitialized(true)
+  }, [])
+
+  // Only set default value once the store is confirmed to be initialized
+  // and we know the actual value is null/undefined (not just loading)
+  useEffect(() => {
+    if (
+      storeInitialized &&
+      (value === null || value === undefined) &&
+      defaultOptionValue !== undefined
+    ) {
+      setValue(defaultOptionValue)
+    }
+  }, [storeInitialized, value, defaultOptionValue, setValue])
+
   // Calculate the effective value to use in the dropdown
-  // Priority: 1. Stored value (value) > 2. Provided defaultValue > 3. First option
   const effectiveValue = useMemo(() => {
     // If we have a value from the store, use that
     if (value !== null && value !== undefined) {
       return value
     }
 
-    // Fall back to provided defaultValue
-    if (defaultValue !== undefined) {
-      return defaultValue
-    }
-
-    // Last resort: use first option value if available
-    if (evaluatedOptions.length > 0) {
-      return getOptionValue(evaluatedOptions[0])
+    // Only return defaultOptionValue if store is initialized
+    if (storeInitialized) {
+      return defaultOptionValue
     }
 
-    // No valid value available
+    // While store is loading, don't use any value
     return undefined
-  }, [value, defaultValue, evaluatedOptions])
+  }, [value, defaultOptionValue, storeInitialized])
 
   // Handle the case where evaluatedOptions changes and the current selection is no longer valid
   const isValueInOptions = useMemo(() => {
     if (!effectiveValue || evaluatedOptions.length === 0) return false
     return evaluatedOptions.some((opt) => getOptionValue(opt) === effectiveValue)
-  }, [effectiveValue, evaluatedOptions])
+  }, [effectiveValue, evaluatedOptions, getOptionValue])
 
   return (
     <Select

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

@@ -119,18 +119,23 @@ export function ShortInput({
     }
   }
 
-  // Update the auto-scroll effect to handle both input and overlay
+  // Remove the auto-scroll effect that forces cursor position and replace with natural scrolling
   useEffect(() => {
-    if (inputRef.current && isFocused) {
-      const input = inputRef.current
-      const scrollPosition = (input.selectionStart ?? 0) * 8
-      input.scrollLeft = scrollPosition - input.offsetWidth / 2
-
-      if (overlayRef.current) {
-        overlayRef.current.scrollLeft = input.scrollLeft
-      }
+    if (inputRef.current && overlayRef.current) {
+      overlayRef.current.scrollLeft = inputRef.current.scrollLeft
     }
-  }, [value, isFocused])
+  }, [value])
+
+  // Handle paste events to ensure long values are handled correctly
+  const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
+    // Let the paste happen normally
+    // Then ensure scroll positions are synced after the content is updated
+    setTimeout(() => {
+      if (inputRef.current && overlayRef.current) {
+        overlayRef.current.scrollLeft = inputRef.current.scrollLeft
+      }
+    }, 0)
+  }
 
   // Handle wheel events to control ReactFlow zoom
   const handleWheel = (e: React.WheelEvent<HTMLInputElement>) => {
@@ -176,9 +181,8 @@ export function ShortInput({
     }
 
     // For regular scrolling (without Ctrl/Cmd), let the default behavior happen
-    if (overlayRef.current) {
-      overlayRef.current.scrollLeft = e.currentTarget.scrollLeft
-    }
+    // Don't interfere with normal scrolling
+    return true
   }
 
   // Drag and Drop handlers
@@ -271,7 +275,7 @@ export function ShortInput({
       <Input
         ref={inputRef}
         className={cn(
-          'w-full placeholder:text-muted-foreground/50 allow-scroll text-transparent caret-foreground',
+          'w-full placeholder:text-muted-foreground/50 allow-scroll text-transparent caret-foreground overflow-auto',
           isConnecting &&
             config?.connectionDroppable !== false &&
             'focus-visible:ring-blue-500 ring-2 ring-blue-500 ring-offset-2'
@@ -304,17 +308,25 @@ export function ShortInput({
         onDrop={handleDrop}
         onDragOver={handleDragOver}
         onScroll={handleScroll}
+        onPaste={handlePaste}
         onWheel={handleWheel}
         onKeyDown={handleKeyDown}
         autoComplete="off"
+        style={{ overflowX: 'auto' }}
       />
       <div
         ref={overlayRef}
-        className="absolute inset-0 pointer-events-none px-3 flex items-center overflow-x-auto whitespace-pre text-sm bg-transparent"
+        className="absolute inset-0 pointer-events-none px-3 flex items-center overflow-x-auto text-sm bg-transparent"
+        style={{ overflowX: 'auto' }}
       >
-        {password && !isFocused
-          ? '•'.repeat(value?.toString().length ?? 0)
-          : formatDisplayText(value?.toString() ?? '')}
+        <div
+          className="whitespace-pre w-full"
+          style={{ scrollbarWidth: 'none', minWidth: 'fit-content' }}
+        >
+          {password && !isFocused
+            ? '•'.repeat(value?.toString().length ?? 0)
+            : formatDisplayText(value?.toString() ?? '')}
+        </div>
       </div>
       <EnvVarDropdown
         visible={showEnvVars}

sim/blocks/blocks/supabase.ts

@@ -12,7 +12,7 @@ export const SupabaseBlock: BlockConfig<SupabaseResponse> = {
   name: 'Supabase',
   description: 'Use Supabase database',
   longDescription:
-    'Integrate with Supabase to manage your database, authentication, storage, and more. Query data, manage users, and interact with Supabase services using OAuth authentication.',
+    'Integrate with Supabase to manage your database, authentication, storage, and more. Query data, manage users, and interact with Supabase services directly.',
   category: 'tools',
   bgColor: '#1C1C1C',
   icon: SupabaseIcon,
@@ -24,29 +24,17 @@ export const SupabaseBlock: BlockConfig<SupabaseResponse> = {
       type: 'dropdown',
       layout: 'full',
       options: [
-        { label: 'Query Data', id: 'query' },
-        { label: 'Insert Data', id: 'insert' },
-        { label: 'Update Data', id: 'update' },
+        { label: 'Read All Rows', id: 'query' },
+        { label: 'Insert Rows', id: 'insert' },
       ],
     },
-    // Supabase Credentials
-    {
-      id: 'credential',
-      title: 'Supabase Account',
-      type: 'oauth-input',
-      layout: 'full',
-      provider: 'supabase',
-      serviceId: 'supabase',
-      requiredScopes: ['database.read', 'database.write', 'projects.read'],
-      placeholder: 'Select Supabase account',
-    },
     // Common Fields
     {
       id: 'projectId',
       title: 'Project ID',
       type: 'short-input',
       layout: 'full',
-      placeholder: 'ID of the Supabase project',
+      placeholder: 'Your Supabase project ID (e.g., jdrkgepadsdopsntdlom)',
     },
     {
       id: 'table',
@@ -55,94 +43,65 @@ export const SupabaseBlock: BlockConfig<SupabaseResponse> = {
       layout: 'full',
       placeholder: 'Name of the table',
     },
-    // Query-specific Fields
     {
-      id: 'select',
-      title: 'Select',
+      id: 'apiKey',
+      title: 'Client Anon Key',
       type: 'short-input',
       layout: 'full',
-      placeholder: 'Columns to select (e.g., id, name, email)',
-      condition: { field: 'operation', value: 'query' },
-    },
-    {
-      id: 'filter',
-      title: 'Filter',
-      type: 'long-input',
-      layout: 'full',
-      placeholder:
-        'Filter conditions as JSON (e.g., {"column": "name", "operator": "eq", "value": "John"})',
-      condition: { field: 'operation', value: 'query' },
+      placeholder: 'Your Supabase client anon key',
+      password: true,
     },
-    // Insert/Update-specific Fields
+    // Insert-specific Fields
     {
       id: 'data',
       title: 'Data',
-      type: 'long-input',
+      type: 'code',
       layout: 'full',
-      placeholder:
-        'Data to insert/update as JSON (e.g., {"name": "John", "email": "john@example.com"})',
+      placeholder: '{\n  "column1": "value1",\n  "column2": "value2"\n}',
       condition: { field: 'operation', value: 'insert' },
     },
-    {
-      id: 'data',
-      title: 'Data',
-      type: 'long-input',
-      layout: 'full',
-      placeholder:
-        'Data to insert/update as JSON (e.g., {"name": "John", "email": "john@example.com"})',
-      condition: { field: 'operation', value: 'update' },
-    },
-    // Update-specific Fields
-    {
-      id: 'filter',
-      title: 'Filter',
-      type: 'long-input',
-      layout: 'full',
-      placeholder:
-        'Filter conditions as JSON (e.g., {"column": "id", "operator": "eq", "value": 123})',
-      condition: { field: 'operation', value: 'update' },
-    },
   ],
   tools: {
-    access: ['supabase_query', 'supabase_insert', 'supabase_update'],
+    access: ['supabase_query', 'supabase_insert'],
     config: {
       tool: (params) => {
         switch (params.operation) {
           case 'query':
             return 'supabase_query'
           case 'insert':
             return 'supabase_insert'
-          case 'update':
-            return 'supabase_update'
           default:
             throw new Error(`Invalid Supabase operation: ${params.operation}`)
         }
       },
       params: (params) => {
-        const { credential, data, filter, ...rest } = params
+        const { data, ...rest } = params
 
-        // Parse JSON strings to objects if they exist
-        const parsedData = data ? JSON.parse(data as string) : undefined
-        const parsedFilter = filter ? JSON.parse(filter as string) : undefined
+        // Parse JSON data if it's a string
+        let parsedData;
+        if (data && typeof data === 'string') {
+          try {
+            parsedData = JSON.parse(data);
+          } catch (e) {
+            throw new Error('Invalid JSON data format');
+          }
+        } else {
+          parsedData = data;
+        }
 
         return {
           ...rest,
           data: parsedData,
-          filter: parsedFilter,
-          credential,
         }
       },
     },
   },
   inputs: {
     operation: { type: 'string', required: true },
-    credential: { type: 'string', required: true },
     projectId: { type: 'string', required: true },
     table: { type: 'string', required: true },
-    // Query operation inputs
-    select: { type: 'string', required: false },
-    filter: { type: 'string', required: false },
-    // Insert/Update operation inputs
+    apiKey: { type: 'string', required: true },
+    // Insert operation inputs
     data: { type: 'string', required: false },
   },
   outputs: {

sim/blocks/index.ts

@@ -27,7 +27,7 @@ import { SerperBlock } from './blocks/serper'
 import { GoogleSheetsBlock } from './blocks/sheets'
 import { SlackBlock } from './blocks/slack'
 import { StarterBlock } from './blocks/starter'
-// import { SupabaseBlock } from './blocks/supabase'
+import { SupabaseBlock } from './blocks/supabase'
 import { TavilyBlock } from './blocks/tavily'
 import { TranslateBlock } from './blocks/translate'
 import { TwilioSMSBlock } from './blocks/twilio'
@@ -61,7 +61,7 @@ export {
   YouTubeBlock,
   NotionBlock,
   GmailBlock,
-  // SupabaseBlock,
+  SupabaseBlock,
   XBlock,
   StarterBlock,
   PineconeBlock,
@@ -109,7 +109,7 @@ const blocks: Record<string, BlockConfig> = {
   serper: SerperBlock,
   slack: SlackBlock,
   starter: StarterBlock,
-  // supabase: SupabaseBlock,
+  supabase: SupabaseBlock,
   tavily: TavilyBlock,
   translate: TranslateBlock,
   twilio_sms: TwilioSMSBlock,