fix(api): requests and table

emir-karabeg · emir-karabeg · commit 24e9a1b4260b · 2025-04-05T20:25:15.000-07:00
diff --git a/sim/app/api/proxy/route.ts b/sim/app/api/proxy/route.ts
@@ -117,13 +117,22 @@ export async function POST(request: Request) {
         startTime: startTimeISO,
         endTime: endTimeISO,
       })
-      return NextResponse.json(responseWithTimingData)
+      
+      // Return the response with CORS headers
+      return NextResponse.json(responseWithTimingData, {
+        headers: {
+          'Access-Control-Allow-Origin': '*',
+          'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+          'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+        },
+      })
     } catch (error: any) {
       throw error
     }
   } catch (error: any) {
     logger.error(`[${requestId}] Proxy request failed`, {
       error: error instanceof Error ? error.message : String(error),
+      stack: error instanceof Error ? error.stack : undefined
     })
 
     // Add timing information even to error responses
@@ -137,6 +146,25 @@ export async function POST(request: Request) {
       startTime: startTimeISO,
       endTime: endTimeISO,
       duration,
+    }, {
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+        'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+      },
     })
   }
 }
+
+// Add OPTIONS handler for CORS preflight requests
+export async function OPTIONS() {
+  return new NextResponse(null, {
+    status: 204,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
+      'Access-Control-Allow-Headers': 'Content-Type, Authorization',
+      'Access-Control-Max-Age': '86400',
+    },
+  })
+}
diff --git a/sim/app/w/[id]/components/workflow-block/components/sub-block/components/table.tsx b/sim/app/w/[id]/components/workflow-block/components/sub-block/components/table.tsx
@@ -22,6 +22,9 @@ interface TableRow {
 export function Table({ columns, blockId, subBlockId }: TableProps) {
   const [value, setValue] = useSubBlockValue(blockId, subBlockId)
 
+  // Create refs for input elements
+  const inputRefs = useRef<Map<string, HTMLInputElement>>(new Map())
+
   // Ensure value is properly typed and initialized
   const rows = useMemo(() => {
     if (!Array.isArray(value)) {
@@ -47,6 +50,26 @@ export function Table({ columns, blockId, subBlockId }: TableProps) {
     element?: HTMLElement | null
   } | null>(null)
 
+  // Sync overlay scroll with input scroll
+  useEffect(() => {
+    if (activeCell) {
+      const cellKey = `${activeCell.rowIndex}-${activeCell.column}`
+      const input = inputRefs.current.get(cellKey)
+      const overlay = document.querySelector(`[data-overlay="${cellKey}"]`) as HTMLElement
+
+      if (input && overlay) {
+        const handleScroll = () => {
+          overlay.scrollLeft = input.scrollLeft
+        }
+
+        input.addEventListener('scroll', handleScroll)
+        return () => {
+          input.removeEventListener('scroll', handleScroll)
+        }
+      }
+    }
+  }, [activeCell])
+
   const handleCellChange = (rowIndex: number, column: string, value: string) => {
     const updatedRows = [...rows].map((row, idx) =>
       idx === rowIndex
@@ -92,14 +115,18 @@ export function Table({ columns, blockId, subBlockId }: TableProps) {
 
   const renderCell = (row: TableRow, rowIndex: number, column: string, cellIndex: number) => {
     const cellValue = row.cells[column] || ''
+    const cellKey = `${rowIndex}-${column}`
 
     return (
       <td
         key={`${row.id}-${column}`}
         className={cn('p-1 relative', cellIndex < columns.length - 1 && 'border-r')}
       >
-        <div className="relative">
+        <div className="relative w-full">
           <Input
+            ref={(el) => {
+              if (el) inputRefs.current.set(cellKey, el)
+            }}
             value={cellValue}
             placeholder={column}
             onChange={(e) => {
@@ -145,10 +172,13 @@ export function Table({ columns, blockId, subBlockId }: TableProps) {
                 setActiveCell(null)
               }
             }}
-            className="border-0 focus-visible:ring-0 focus-visible:ring-offset-0 text-transparent caret-foreground placeholder:text-muted-foreground/50"
+            className="border-0 focus-visible:ring-0 focus-visible:ring-offset-0 text-transparent caret-foreground placeholder:text-muted-foreground/50 w-full"
           />
-          <div className="absolute inset-0 pointer-events-none px-3 flex items-center overflow-x-auto whitespace-pre text-sm bg-transparent">
-            {formatDisplayText(cellValue)}
+          <div
+            data-overlay={cellKey}
+            className="absolute inset-0 pointer-events-none px-3 flex items-center text-sm bg-transparent overflow-hidden"
+          >
+            <div className="whitespace-pre">{formatDisplayText(cellValue)}</div>
           </div>
         </div>
       </td>
diff --git a/sim/blocks/blocks/reddit.ts b/sim/blocks/blocks/reddit.ts
@@ -23,7 +23,7 @@ export const RedditBlock: BlockConfig<RedditHotPostsResponse> = {
     // Limit input
     {
       id: 'limit',
-      title: 'Number of Posts',
+      title: 'Number of Top Posts',
       type: 'short-input',
       layout: 'full',
       placeholder: '10',
diff --git a/sim/blocks/index.ts b/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,
diff --git a/sim/tools/index.ts b/sim/tools/index.ts
@@ -47,7 +47,7 @@ import { tavilyExtractTool, tavilySearchTool } from './tavily'
 import { sendSMSTool } from './twilio/send'
 import { typeformFilesTool, typeformInsightsTool, typeformResponsesTool } from './typeform'
 import { OAuthTokenPayload, ToolConfig, ToolResponse } from './types'
-import { formatRequestParams, validateToolRequest } from './utils'
+import { formatRequestParams, validateToolRequest, transformTable } from './utils'
 import { visionTool } from './vision/vision'
 import { whatsappSendMessageTool } from './whatsapp'
 import { xReadTool, xSearchTool, xUserTool, xWriteTool } from './x'
@@ -559,6 +559,109 @@ async function handleInternalRequest(
   const requestParams = formatRequestParams(tool, params)
 
   try {
+    // Special handling for HTTP request tool - direct fetch
+    if (toolId === 'http_request') {
+      logger.info(`Direct fetch for HTTP request to: ${params.url}`)
+      
+      // Prepare fetch options
+      const fetchOptions: RequestInit = {
+        method: params.method || 'GET',
+        headers: transformTable(params.headers || null),
+      }
+      
+      // Add body for non-GET requests
+      if (params.method && params.method !== 'GET' && params.method !== 'HEAD' && params.body) {
+        if (typeof params.body === 'object') {
+          fetchOptions.body = JSON.stringify(params.body)
+          // Ensure Content-Type is set
+          if (fetchOptions.headers) {
+            (fetchOptions.headers as Record<string, string>)['Content-Type'] = 'application/json'
+          } else {
+            fetchOptions.headers = { 'Content-Type': 'application/json' }
+          }
+        } else {
+          fetchOptions.body = params.body
+        }
+      }
+      
+      // Handle timeout
+      const controller = new AbortController()
+      const timeout = params.timeout || 50000
+      const timeoutId = setTimeout(() => controller.abort(), timeout)
+      fetchOptions.signal = controller.signal
+      
+      try {
+        // Make the actual fetch request
+        const response = await fetch(params.url, fetchOptions)
+        clearTimeout(timeoutId)
+        
+        // Use the tool's response transformer if available
+        if (tool.transformResponse) {
+          return await tool.transformResponse(response, params)
+        }
+        
+        // Default response handling
+        const headers: Record<string, string> = {}
+        response.headers.forEach((value, key) => {
+          headers[key] = value
+        })
+        
+        let data
+        try {
+          // Try to parse as JSON first
+          if (response.headers.get('content-type')?.includes('application/json')) {
+            data = await response.json()
+          } else {
+            data = await response.text()
+          }
+        } catch (error) {
+          data = await response.text()
+        }
+        
+        return {
+          success: response.ok,
+          output: {
+            data,
+            status: response.status,
+            headers,
+          },
+          error: response.ok ? undefined : `HTTP error ${response.status}: ${response.statusText}`
+        }
+      } catch (error: any) {
+        clearTimeout(timeoutId)
+        
+        // Handle specific abort error
+        if (error.name === 'AbortError') {
+          return {
+            success: false,
+            output: {},
+            error: `Request timeout after ${timeout}ms`
+          }
+        }
+        
+        // Use the tool's error transformer if available
+        if (tool.transformError) {
+          try {
+            const errorResult = tool.transformError(error)
+            if (typeof errorResult === 'string') {
+              return {
+                success: false,
+                output: {},
+                error: errorResult,
+              }
+            }
+          } catch {} // Fallthrough to default error handling
+        }
+        
+        return {
+          success: false,
+          output: {},
+          error: error.message || 'Failed to fetch'
+        }
+      }
+    }
+    
+    // Standard handling for other tools (existing code)
     const baseUrl = process.env.NEXT_PUBLIC_APP_URL || ''
     // Handle the case where url may be a function or string
     const endpointUrl =

Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ export const RedditBlock: BlockConfig<RedditHotPostsResponse> = {`
`23`	`23`	`// Limit input`
`24`	`24`	`{`
`25`	`25`	`id: 'limit',`
`26`		`- title: 'Number of Posts',`
	`26`	`+ title: 'Number of Top Posts',`
`27`	`27`	`type: 'short-input',`
`28`	`28`	`layout: 'full',`
`29`	`29`	`placeholder: '10',`