fix(custom-tool): fix textarea, param dropdown for available params, validation for invalid schemas, variable resolution in custom tools and subflow tags (#1117)

* fix(custom-tools): fix text area for custom tools

* added param dropdown in agent custom tool

* add syntax highlighting for params, fix dropdown styling

* ux

* add tooltip to prevent indicate invalid json schema on schema and code tabs

* feat(custom-tool): added stricter JSON schema validation and error when saving json schema for custom tools

* fix(custom-tool): allow variable resolution in custom tools

* fix variable resolution in subflow tags

* refactored function execution to use helpers

* cleanup

* fix block variable resolution to inject at runtime

* fix highlighting code

---------

Co-authored-by: Vikhyath Mondreti <[email protected]>

Author: waleedlatif1

apps/sim/app/api/function/execute/route.ts

@@ -213,24 +213,81 @@ function createUserFriendlyErrorMessage(
 }
 
 /**
- * Resolves environment variables and tags in code
- * @param code - Code with variables
- * @param params - Parameters that may contain variable values
- * @param envVars - Environment variables from the workflow
- * @returns Resolved code
+ * Resolves workflow variables with <variable.name> syntax
  */
+function resolveWorkflowVariables(
+  code: string,
+  workflowVariables: Record<string, any>,
+  contextVariables: Record<string, any>
+): string {
+  let resolvedCode = code
 
-function resolveCodeVariables(
+  const variableMatches = resolvedCode.match(/<variable\.([^>]+)>/g) || []
+  for (const match of variableMatches) {
+    const variableName = match.slice('<variable.'.length, -1).trim()
+
+    // Find the variable by name (workflowVariables is indexed by ID, values are variable objects)
+    const foundVariable = Object.entries(workflowVariables).find(
+      ([_, variable]) => (variable.name || '').replace(/\s+/g, '') === variableName
+    )
+
+    if (foundVariable) {
+      const variable = foundVariable[1]
+      // Get the typed value - handle different variable types
+      let variableValue = variable.value
+
+      if (variable.value !== undefined && variable.value !== null) {
+        try {
+          // Handle 'string' type the same as 'plain' for backward compatibility
+          const type = variable.type === 'string' ? 'plain' : variable.type
+
+          // For plain text, use exactly what's entered without modifications
+          if (type === 'plain' && typeof variableValue === 'string') {
+            // Use as-is for plain text
+          } else if (type === 'number') {
+            variableValue = Number(variableValue)
+          } else if (type === 'boolean') {
+            variableValue = variableValue === 'true' || variableValue === true
+          } else if (type === 'json') {
+            try {
+              variableValue =
+                typeof variableValue === 'string' ? JSON.parse(variableValue) : variableValue
+            } catch {
+              // Keep original value if JSON parsing fails
+            }
+          }
+        } catch (error) {
+          // Fallback to original value on error
+          variableValue = variable.value
+        }
+      }
+
+      // Create a safe variable reference
+      const safeVarName = `__variable_${variableName.replace(/[^a-zA-Z0-9_]/g, '_')}`
+      contextVariables[safeVarName] = variableValue
+
+      // Replace the variable reference with the safe variable name
+      resolvedCode = resolvedCode.replace(new RegExp(escapeRegExp(match), 'g'), safeVarName)
+    } else {
+      // Variable not found - replace with empty string to avoid syntax errors
+      resolvedCode = resolvedCode.replace(new RegExp(escapeRegExp(match), 'g'), '')
+    }
+  }
+
+  return resolvedCode
+}
+
+/**
+ * Resolves environment variables with {{var_name}} syntax
+ */
+function resolveEnvironmentVariables(
   code: string,
   params: Record<string, any>,
-  envVars: Record<string, string> = {},
-  blockData: Record<string, any> = {},
-  blockNameMapping: Record<string, string> = {}
-): { resolvedCode: string; contextVariables: Record<string, any> } {
+  envVars: Record<string, string>,
+  contextVariables: Record<string, any>
+): string {
   let resolvedCode = code
-  const contextVariables: Record<string, any> = {}
 
-  // Resolve environment variables with {{var_name}} syntax
   const envVarMatches = resolvedCode.match(/\{\{([^}]+)\}\}/g) || []
   for (const match of envVarMatches) {
     const varName = match.slice(2, -2).trim()
@@ -245,7 +302,21 @@ function resolveCodeVariables(
     resolvedCode = resolvedCode.replace(new RegExp(escapeRegExp(match), 'g'), safeVarName)
   }
 
-  // Resolve tags with <tag_name> syntax (including nested paths like <block.response.data>)
+  return resolvedCode
+}
+
+/**
+ * Resolves tags with <tag_name> syntax (including nested paths like <block.response.data>)
+ */
+function resolveTagVariables(
+  code: string,
+  params: Record<string, any>,
+  blockData: Record<string, any>,
+  blockNameMapping: Record<string, string>,
+  contextVariables: Record<string, any>
+): string {
+  let resolvedCode = code
+
   const tagMatches = resolvedCode.match(/<([a-zA-Z_][a-zA-Z0-9_.]*[a-zA-Z0-9_])>/g) || []
 
   for (const match of tagMatches) {
@@ -300,6 +371,42 @@ function resolveCodeVariables(
     resolvedCode = resolvedCode.replace(new RegExp(escapeRegExp(match), 'g'), safeVarName)
   }
 
+  return resolvedCode
+}
+
+/**
+ * Resolves environment variables and tags in code
+ * @param code - Code with variables
+ * @param params - Parameters that may contain variable values
+ * @param envVars - Environment variables from the workflow
+ * @returns Resolved code
+ */
+function resolveCodeVariables(
+  code: string,
+  params: Record<string, any>,
+  envVars: Record<string, string> = {},
+  blockData: Record<string, any> = {},
+  blockNameMapping: Record<string, string> = {},
+  workflowVariables: Record<string, any> = {}
+): { resolvedCode: string; contextVariables: Record<string, any> } {
+  let resolvedCode = code
+  const contextVariables: Record<string, any> = {}
+
+  // Resolve workflow variables with <variable.name> syntax first
+  resolvedCode = resolveWorkflowVariables(resolvedCode, workflowVariables, contextVariables)
+
+  // Resolve environment variables with {{var_name}} syntax
+  resolvedCode = resolveEnvironmentVariables(resolvedCode, params, envVars, contextVariables)
+
+  // Resolve tags with <tag_name> syntax (including nested paths like <block.response.data>)
+  resolvedCode = resolveTagVariables(
+    resolvedCode,
+    params,
+    blockData,
+    blockNameMapping,
+    contextVariables
+  )
+
   return { resolvedCode, contextVariables }
 }
 
@@ -338,6 +445,7 @@ export async function POST(req: NextRequest) {
       envVars = {},
       blockData = {},
       blockNameMapping = {},
+      workflowVariables = {},
       workflowId,
       isCustomTool = false,
     } = body
@@ -360,16 +468,17 @@ export async function POST(req: NextRequest) {
       executionParams,
       envVars,
       blockData,
-      blockNameMapping
+      blockNameMapping,
+      workflowVariables
     )
     resolvedCode = codeResolution.resolvedCode
     const contextVariables = codeResolution.contextVariables
 
     const executionMethod = 'vm' // Default execution method
 
     logger.info(`[${requestId}] Using VM for code execution`, {
-      resolvedCode,
       hasEnvVars: Object.keys(envVars).length > 0,
+      hasWorkflowVariables: Object.keys(workflowVariables).length > 0,
     })
 
     // Create a secure context with console logging

apps/sim/app/api/providers/route.ts

@@ -39,6 +39,9 @@ export async function POST(request: NextRequest) {
       stream,
       messages,
       environmentVariables,
+      workflowVariables,
+      blockData,
+      blockNameMapping,
       reasoningEffort,
       verbosity,
     } = body
@@ -60,6 +63,7 @@ export async function POST(request: NextRequest) {
       messageCount: messages?.length || 0,
       hasEnvironmentVariables:
         !!environmentVariables && Object.keys(environmentVariables).length > 0,
+      hasWorkflowVariables: !!workflowVariables && Object.keys(workflowVariables).length > 0,
       reasoningEffort,
       verbosity,
     })
@@ -103,6 +107,9 @@ export async function POST(request: NextRequest) {
       stream,
       messages,
       environmentVariables,
+      workflowVariables,
+      blockData,
+      blockNameMapping,
       reasoningEffort,
       verbosity,
     })

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx

@@ -18,6 +18,7 @@ interface CodeEditorProps {
   highlightVariables?: boolean
   onKeyDown?: (e: React.KeyboardEvent) => void
   disabled?: boolean
+  schemaParameters?: Array<{ name: string; type: string; description: string; required: boolean }>
 }
 
 export function CodeEditor({
@@ -30,6 +31,7 @@ export function CodeEditor({
   highlightVariables = true,
   onKeyDown,
   disabled = false,
+  schemaParameters = [],
 }: CodeEditorProps) {
   const [code, setCode] = useState(value)
   const [visualLineHeights, setVisualLineHeights] = useState<number[]>([])
@@ -120,25 +122,80 @@ export function CodeEditor({
     // First, get the default Prism highlighting
     let highlighted = highlight(code, languages[language], language)
 
-    // Then, highlight environment variables with {{var_name}} syntax in blue
-    if (highlighted.includes('{{')) {
-      highlighted = highlighted.replace(
-        /\{\{([^}]+)\}\}/g,
-        '<span class="text-blue-500">{{$1}}</span>'
-      )
+    // Collect all syntax highlights to apply in a single pass
+    type SyntaxHighlight = {
+      start: number
+      end: number
+      replacement: string
     }
+    const highlights: SyntaxHighlight[] = []
 
-    // Also highlight tags with <tag_name> syntax in blue
-    if (highlighted.includes('<') && !language.includes('html')) {
-      highlighted = highlighted.replace(/<([^>\s/]+)>/g, (match, group) => {
-        // Avoid replacing HTML tags in comments
-        if (match.startsWith('<!--') || match.includes('</')) {
-          return match
+    // Find environment variables with {{var_name}} syntax
+    let match
+    const envVarRegex = /\{\{([^}]+)\}\}/g
+    while ((match = envVarRegex.exec(highlighted)) !== null) {
+      highlights.push({
+        start: match.index,
+        end: match.index + match[0].length,
+        replacement: `<span class="text-blue-500">${match[0]}</span>`,
+      })
+    }
+
+    // Find tags with <tag_name> syntax (not in HTML context)
+    if (!language.includes('html')) {
+      const tagRegex = /<([^>\s/]+)>/g
+      while ((match = tagRegex.exec(highlighted)) !== null) {
+        // Skip HTML comments and closing tags
+        if (!match[0].startsWith('<!--') && !match[0].includes('</')) {
+          const escaped = `&lt;${match[1]}&gt;`
+          highlights.push({
+            start: match.index,
+            end: match.index + match[0].length,
+            replacement: `<span class="text-blue-500">${escaped}</span>`,
+          })
+        }
+      }
+    }
+
+    // Find schema parameters as whole words
+    if (schemaParameters.length > 0) {
+      schemaParameters.forEach((param) => {
+        // Escape special regex characters in parameter name
+        const escapedName = param.name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+        const paramRegex = new RegExp(`\\b(${escapedName})\\b`, 'g')
+        while ((match = paramRegex.exec(highlighted)) !== null) {
+          // Check if this position is already inside an HTML tag
+          // by looking for unclosed < before this position
+          let insideTag = false
+          let pos = match.index - 1
+          while (pos >= 0) {
+            if (highlighted[pos] === '>') break
+            if (highlighted[pos] === '<') {
+              insideTag = true
+              break
+            }
+            pos--
+          }
+
+          if (!insideTag) {
+            highlights.push({
+              start: match.index,
+              end: match.index + match[0].length,
+              replacement: `<span class="text-green-600 font-medium">${match[0]}</span>`,
+            })
+          }
         }
-        return `<span class="text-blue-500">&lt;${group}&gt;</span>`
       })
     }
 
+    // Sort highlights by start position (reverse order to maintain positions)
+    highlights.sort((a, b) => b.start - a.start)
+
+    // Apply all highlights
+    highlights.forEach(({ start, end, replacement }) => {
+      highlighted = highlighted.slice(0, start) + replacement + highlighted.slice(end)
+    })
+
     return highlighted
   }
 
@@ -204,12 +261,17 @@ export function CodeEditor({
           disabled={disabled}
           style={{
             fontFamily: 'inherit',
-            minHeight: '46px',
+            minHeight: minHeight,
             lineHeight: '21px',
+            height: '100%',
           }}
-          className={cn('focus:outline-none', isCollapsed && 'pointer-events-none select-none')}
+          className={cn(
+            'h-full focus:outline-none',
+            isCollapsed && 'pointer-events-none select-none'
+          )}
           textareaClassName={cn(
             'focus:outline-none focus:ring-0 bg-transparent',
+            '!min-h-full !h-full resize-none !block',
             (isCollapsed || disabled) && 'pointer-events-none'
           )}
         />