Skip to content

fix(variables): boolean type support and input improvements #2981

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
waleedlatif1 merged 2 commits into from
Jan 24, 2026
Merged

fix(variables): boolean type support and input improvements #2981

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8a1fe7d
fix(variables): boolean type support and input improvements
waleedlatif1 Jan 24, 2026
0f23edb
fix formatting
waleedlatif1 Jan 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 90 additions & 44 deletions ...nel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,15 @@
import { useEffect, useRef, useState } from 'react'
import { Plus } from 'lucide-react'
import { useParams } from 'next/navigation'
import { Badge, Button, Combobox, Input, Label, Textarea } from '@/components/emcn'
import {
Badge,
Button,
Combobox,
type ComboboxOption,
Input,
Label,
Textarea,
} from '@/components/emcn'
import { Trash } from '@/components/emcn/icons/trash'
import { cn } from '@/lib/core/utils/cn'
import { formatDisplayText } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/formatted-text'
Expand Down Expand Up @@ -38,6 +46,14 @@ const DEFAULT_ASSIGNMENT: Omit<VariableAssignment, 'id'> = {
isExisting: false,
}

/**
* Boolean value options for Combobox
*/
const BOOLEAN_OPTIONS: ComboboxOption[] = [
{ label: 'true', value: 'true' },
{ label: 'false', value: 'false' },
]

/**
* Parses a value that might be a JSON string or already an array of VariableAssignment.
* This handles the case where workflows are imported with stringified values.
Expand Down Expand Up @@ -104,8 +120,6 @@ export function VariablesInput({
const allVariablesAssigned =
!hasNoWorkflowVariables && getAvailableVariablesFor('new').length === 0

// Initialize with one empty assignment if none exist and not in preview/disabled mode
// Also add assignment when first variable is created
useEffect(() => {
if (!isReadOnly && assignments.length === 0 && currentWorkflowVariables.length > 0) {
const initialAssignment: VariableAssignment = {
Expand All @@ -116,45 +130,46 @@ export function VariablesInput({
}
}, [currentWorkflowVariables.length, isReadOnly, assignments.length, setStoreValue])

// Clean up assignments when their associated variables are deleted
useEffect(() => {
if (isReadOnly || assignments.length === 0) return

const currentVariableIds = new Set(currentWorkflowVariables.map((v) => v.id))
const validAssignments = assignments.filter((assignment) => {
// Keep assignments that haven't selected a variable yet
if (!assignment.variableId) return true
// Keep assignments whose variable still exists
return currentVariableIds.has(assignment.variableId)
})

// If all variables were deleted, clear all assignments
if (currentWorkflowVariables.length === 0) {
setStoreValue([])
} else if (validAssignments.length !== assignments.length) {
// Some assignments reference deleted variables, remove them
setStoreValue(validAssignments.length > 0 ? validAssignments : [])
}
}, [currentWorkflowVariables, assignments, isReadOnly, setStoreValue])

const addAssignment = () => {
if (isPreview || disabled || allVariablesAssigned) return
if (isReadOnly || allVariablesAssigned) return

const newAssignment: VariableAssignment = {
...DEFAULT_ASSIGNMENT,
id: crypto.randomUUID(),
}
setStoreValue([...(assignments || []), newAssignment])
setStoreValue([...assignments, newAssignment])
}

const removeAssignment = (id: string) => {
if (isPreview || disabled) return
setStoreValue((assignments || []).filter((a) => a.id !== id))
if (isReadOnly) return

if (assignments.length === 1) {
setStoreValue([{ ...DEFAULT_ASSIGNMENT, id: crypto.randomUUID() }])
return
}

setStoreValue(assignments.filter((a) => a.id !== id))
}

const updateAssignment = (id: string, updates: Partial<VariableAssignment>) => {
if (isPreview || disabled) return
setStoreValue((assignments || []).map((a) => (a.id === id ? { ...a, ...updates } : a)))
if (isReadOnly) return
setStoreValue(assignments.map((a) => (a.id === id ? { ...a, ...updates } : a)))
}

const handleVariableSelect = (assignmentId: string, variableId: string) => {
Expand All @@ -169,19 +184,12 @@ export function VariablesInput({
}
}

const handleTagSelect = (tag: string) => {
const handleTagSelect = (newValue: string) => {
if (!activeFieldId) return

const assignment = assignments.find((a) => a.id === activeFieldId)
if (!assignment) return

const currentValue = assignment.value || ''

const textBeforeCursor = currentValue.slice(0, cursorPosition)
const lastOpenBracket = textBeforeCursor.lastIndexOf('<')

const newValue =
currentValue.slice(0, lastOpenBracket) + tag + currentValue.slice(cursorPosition)
const originalValue = assignment?.value || ''
const textAfterCursor = originalValue.slice(cursorPosition)

updateAssignment(activeFieldId, { value: newValue })
setShowTags(false)
Expand All @@ -190,7 +198,7 @@ export function VariablesInput({
const inputEl = valueInputRefs.current[activeFieldId]
if (inputEl) {
inputEl.focus()
const newCursorPos = lastOpenBracket + tag.length
const newCursorPos = newValue.length - textAfterCursor.length
inputEl.setSelectionRange(newCursorPos, newCursorPos)
}
}, 10)
Expand Down Expand Up @@ -272,6 +280,18 @@ export function VariablesInput({
}))
}

const syncOverlayScroll = (assignmentId: string, scrollLeft: number) => {
const overlay = overlayRefs.current[assignmentId]
if (overlay) overlay.scrollLeft = scrollLeft
}

const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
if (e.key === 'Escape') {
setShowTags(false)
setActiveSourceBlockId(null)
}
}

if (isPreview && (!assignments || assignments.length === 0)) {
return (
<div className='flex flex-col items-center justify-center rounded-md border border-border/40 bg-muted/20 py-8 text-center'>
Expand Down Expand Up @@ -302,7 +322,7 @@ export function VariablesInput({

return (
<div className='space-y-[8px]'>
{assignments && assignments.length > 0 && (
{assignments.length > 0 && (
<div className='space-y-[8px]'>
{assignments.map((assignment, index) => {
const collapsed = collapsedAssignments[assignment.id] || false
Expand Down Expand Up @@ -334,7 +354,7 @@ export function VariablesInput({
<Button
variant='ghost'
onClick={addAssignment}
disabled={isPreview || disabled || allVariablesAssigned}
disabled={isReadOnly || allVariablesAssigned}
className='h-auto p-0'
>
<Plus className='h-[14px] w-[14px]' />
Expand All @@ -343,7 +363,7 @@ export function VariablesInput({
<Button
variant='ghost'
onClick={() => removeAssignment(assignment.id)}
disabled={isPreview || disabled || assignments.length === 1}
disabled={isReadOnly}
className='h-auto p-0 text-[var(--text-error)] hover:text-[var(--text-error)]'
>
<Trash className='h-[14px] w-[14px]' />
Expand All @@ -358,16 +378,26 @@ export function VariablesInput({
<Label className='text-[13px]'>Variable</Label>
<Combobox
options={availableVars.map((v) => ({ label: v.name, value: v.id }))}
value={assignment.variableId || assignment.variableName || ''}
value={assignment.variableId || ''}
onChange={(value) => handleVariableSelect(assignment.id, value)}
placeholder='Select a variable...'
disabled={isPreview || disabled}
disabled={isReadOnly}
/>
</div>

<div className='flex flex-col gap-[6px]'>
<Label className='text-[13px]'>Value</Label>
{assignment.type === 'object' || assignment.type === 'array' ? (
{assignment.type === 'boolean' ? (
<Combobox
options={BOOLEAN_OPTIONS}
value={assignment.value ?? ''}
onChange={(v) =>
!isReadOnly && updateAssignment(assignment.id, { value: v })
}
placeholder='Select value'
disabled={isReadOnly}
/>
) : assignment.type === 'object' || assignment.type === 'array' ? (
<div className='relative'>
<Textarea
ref={(el) => {
Expand All @@ -381,26 +411,32 @@ export function VariablesInput({
e.target.selectionStart ?? undefined
)
}
onKeyDown={handleKeyDown}
onFocus={() => {
if (!isPreview && !disabled && !assignment.value?.trim()) {
if (!isReadOnly && !assignment.value?.trim()) {
setActiveFieldId(assignment.id)
setCursorPosition(0)
setShowTags(true)
}
}}
onScroll={(e) => {
const overlay = overlayRefs.current[assignment.id]
if (overlay) {
overlay.scrollTop = e.currentTarget.scrollTop
overlay.scrollLeft = e.currentTarget.scrollLeft
}
}}
placeholder={
assignment.type === 'object'
? '{\n "key": "value"\n}'
: '[\n 1, 2, 3\n]'
}
disabled={isPreview || disabled}
disabled={isReadOnly}
className={cn(
'min-h-[120px] font-mono text-sm text-transparent caret-foreground placeholder:text-muted-foreground/50',
dragHighlight[assignment.id] && 'ring-2 ring-blue-500 ring-offset-2'
)}
style={{
fontFamily: 'inherit',
lineHeight: 'inherit',
wordBreak: 'break-word',
whiteSpace: 'pre-wrap',
}}
Expand All @@ -413,10 +449,7 @@ export function VariablesInput({
if (el) overlayRefs.current[assignment.id] = el
}}
className='pointer-events-none absolute inset-0 flex items-start overflow-auto bg-transparent px-3 py-2 font-mono text-sm'
style={{
fontFamily: 'inherit',
lineHeight: 'inherit',
}}
style={{ scrollbarWidth: 'none' }}
>
<div className='w-full whitespace-pre-wrap break-words'>
{formatDisplayText(assignment.value || '', {
Expand All @@ -441,21 +474,34 @@ export function VariablesInput({
e.target.selectionStart ?? undefined
)
}
onKeyDown={handleKeyDown}
onFocus={() => {
if (!isPreview && !disabled && !assignment.value?.trim()) {
if (!isReadOnly && !assignment.value?.trim()) {
setActiveFieldId(assignment.id)
setCursorPosition(0)
setShowTags(true)
}
}}
onScroll={(e) =>
syncOverlayScroll(assignment.id, e.currentTarget.scrollLeft)
}
onPaste={() =>
setTimeout(() => {
const input = valueInputRefs.current[assignment.id]
if (input)
syncOverlayScroll(
assignment.id,
(input as HTMLInputElement).scrollLeft
)
}, 0)
}
placeholder={`${assignment.type} value`}
disabled={isPreview || disabled}
disabled={isReadOnly}
autoComplete='off'
className={cn(
'allow-scroll w-full overflow-auto text-transparent caret-foreground',
'allow-scroll w-full overflow-x-auto overflow-y-hidden text-transparent caret-foreground',
dragHighlight[assignment.id] && 'ring-2 ring-blue-500 ring-offset-2'
)}
style={{ overflowX: 'auto' }}
onDrop={(e) => handleDrop(e, assignment.id)}
onDragOver={(e) => handleDragOver(e, assignment.id)}
onDragLeave={(e) => handleDragLeave(e, assignment.id)}
Expand All @@ -465,7 +511,7 @@ export function VariablesInput({
if (el) overlayRefs.current[assignment.id] = el
}}
className='pointer-events-none absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm'
style={{ overflowX: 'auto' }}
style={{ scrollbarWidth: 'none' }}
>
<div
className='w-full whitespace-pre'
Expand Down