From 6f3df271fd7be5e3e29ee81ba056dcdf77dda7ec Mon Sep 17 00:00:00 2001 From: Siddharth Ganesan <33737564+Sg312@users.noreply.github.com> Date: Mon, 13 Oct 2025 19:56:02 -0700 Subject: [PATCH] feat(copilot+canvas rendering): add context window tracking to copilot and selectively render canvas components (#1622) * Copilot context window * Fix pill * Speed up canvas * Fix react hook bug * Context pill div --- apps/sim/app/api/copilot/chat/route.ts | 3 + .../[workflowId]/components/diff-controls.tsx | 69 +- .../context-usage-pill/context-usage-pill.tsx | 60 + .../components/user-input/user-input.tsx | 178 +- .../components/action-bar/action-bar.tsx | 261 +- .../sub-block/hooks/use-sub-block-value.ts | 11 +- .../components/sub-block/sub-block.tsx | 1048 ++++---- .../workflow-block/workflow-block.tsx | 2251 +++++++++-------- .../hooks/use-current-workflow.ts | 37 +- .../[workspaceId]/w/[workflowId]/workflow.tsx | 79 +- apps/sim/stores/copilot/store.ts | 25 +- apps/sim/stores/copilot/types.ts | 10 + 12 files changed, 2071 insertions(+), 1961 deletions(-) create mode 100644 apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/context-usage-pill/context-usage-pill.tsx diff --git a/apps/sim/app/api/copilot/chat/route.ts b/apps/sim/app/api/copilot/chat/route.ts index 815270c361..558f61a94c 100644 --- a/apps/sim/app/api/copilot/chat/route.ts +++ b/apps/sim/app/api/copilot/chat/route.ts @@ -463,6 +463,8 @@ export async function POST(req: NextRequest) { logger.debug(`[${tracker.requestId}] Sent initial chatId event to client`) } + // Note: context_usage events are forwarded from sim-agent (which has accurate token counts) + // Start title generation in parallel if needed if (actualChatId && !currentChat?.title && conversationHistory.length === 0) { generateChatTitle(message) @@ -594,6 +596,7 @@ export async function POST(req: NextRequest) { lastSafeDoneResponseId = responseIdFromDone } } + // Note: context_usage events are forwarded from sim-agent break case 'error': diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls.tsx index db334379c3..2e996dd7ae 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls.tsx @@ -1,3 +1,4 @@ +import { memo, useCallback } from 'react' import { Eye, EyeOff } from 'lucide-react' import { Button } from '@/components/ui/button' import { createLogger } from '@/lib/logs/console/logger' @@ -9,31 +10,46 @@ import { useWorkflowStore } from '@/stores/workflows/workflow/store' const logger = createLogger('DiffControls') -export function DiffControls() { - const { - isShowingDiff, - isDiffReady, - diffWorkflow, - toggleDiffView, - acceptChanges, - rejectChanges, - diffMetadata, - } = useWorkflowDiffStore() +export const DiffControls = memo(function DiffControls() { + // Optimized: Single diff store subscription + const { isShowingDiff, isDiffReady, diffWorkflow, toggleDiffView, acceptChanges, rejectChanges } = + useWorkflowDiffStore( + useCallback( + (state) => ({ + isShowingDiff: state.isShowingDiff, + isDiffReady: state.isDiffReady, + diffWorkflow: state.diffWorkflow, + toggleDiffView: state.toggleDiffView, + acceptChanges: state.acceptChanges, + rejectChanges: state.rejectChanges, + }), + [] + ) + ) - const { updatePreviewToolCallState, clearPreviewYaml, currentChat, messages } = useCopilotStore() - const { activeWorkflowId } = useWorkflowRegistry() + // Optimized: Single copilot store subscription for needed values + const { updatePreviewToolCallState, clearPreviewYaml, currentChat, messages } = useCopilotStore( + useCallback( + (state) => ({ + updatePreviewToolCallState: state.updatePreviewToolCallState, + clearPreviewYaml: state.clearPreviewYaml, + currentChat: state.currentChat, + messages: state.messages, + }), + [] + ) + ) - // Don't show anything if no diff is available or diff is not ready - if (!diffWorkflow || !isDiffReady) { - return null - } + const { activeWorkflowId } = useWorkflowRegistry( + useCallback((state) => ({ activeWorkflowId: state.activeWorkflowId }), []) + ) - const handleToggleDiff = () => { + const handleToggleDiff = useCallback(() => { logger.info('Toggling diff view', { currentState: isShowingDiff }) toggleDiffView() - } + }, [isShowingDiff, toggleDiffView]) - const createCheckpoint = async () => { + const createCheckpoint = useCallback(async () => { if (!activeWorkflowId || !currentChat?.id) { logger.warn('Cannot create checkpoint: missing workflowId or chatId', { workflowId: activeWorkflowId, @@ -184,9 +200,9 @@ export function DiffControls() { logger.error('Failed to create checkpoint:', error) return false } - } + }, [activeWorkflowId, currentChat, messages]) - const handleAccept = async () => { + const handleAccept = useCallback(async () => { logger.info('Accepting proposed changes with backup protection') try { @@ -239,9 +255,9 @@ export function DiffControls() { console.error('Workflow update failed:', errorMessage) alert(`Failed to save workflow changes: ${errorMessage}`) } - } + }, [createCheckpoint, clearPreviewYaml, updatePreviewToolCallState, acceptChanges]) - const handleReject = () => { + const handleReject = useCallback(() => { logger.info('Rejecting proposed changes (optimistic)') // Clear preview YAML immediately @@ -279,6 +295,11 @@ export function DiffControls() { rejectChanges().catch((error) => { logger.error('Failed to reject changes (background):', error) }) + }, [clearPreviewYaml, updatePreviewToolCallState, rejectChanges]) + + // Don't show anything if no diff is available or diff is not ready + if (!diffWorkflow || !isDiffReady) { + return null } return ( @@ -319,4 +340,4 @@ export function DiffControls() { ) -} +}) diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/context-usage-pill/context-usage-pill.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/context-usage-pill/context-usage-pill.tsx new file mode 100644 index 0000000000..068aaf3a6f --- /dev/null +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/context-usage-pill/context-usage-pill.tsx @@ -0,0 +1,60 @@ +'use client' + +import { memo } from 'react' +import { Plus } from 'lucide-react' +import { cn } from '@/lib/utils' + +interface ContextUsagePillProps { + percentage: number + className?: string + onCreateNewChat?: () => void +} + +export const ContextUsagePill = memo( + ({ percentage, className, onCreateNewChat }: ContextUsagePillProps) => { + // Don't render if invalid (but DO render if 0 or very small) + if (percentage === null || percentage === undefined || Number.isNaN(percentage)) return null + + const isHighUsage = percentage >= 75 + + // Determine color based on percentage (similar to Cursor IDE) + const getColorClass = () => { + if (percentage >= 90) return 'bg-red-500/10 text-red-600 dark:text-red-400' + if (percentage >= 75) return 'bg-orange-500/10 text-orange-600 dark:text-orange-400' + if (percentage >= 50) return 'bg-yellow-500/10 text-yellow-600 dark:text-yellow-400' + return 'bg-gray-500/10 text-gray-600 dark:text-gray-400' + } + + // Format: show 1 decimal for <1%, 0 decimals for >=1% + const formattedPercentage = percentage < 1 ? percentage.toFixed(1) : percentage.toFixed(0) + + return ( +
+ {formattedPercentage}% + {isHighUsage && onCreateNewChat && ( + + )} +
+ ) + } +) + +ContextUsagePill.displayName = 'ContextUsagePill' diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx index ac7868ba8f..d2a98dc748 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx @@ -55,6 +55,7 @@ import { cn } from '@/lib/utils' import { useCopilotStore } from '@/stores/copilot/store' import type { ChatContext } from '@/stores/copilot/types' import { useWorkflowStore } from '@/stores/workflows/workflow/store' +import { ContextUsagePill } from '../context-usage-pill/context-usage-pill' const logger = createLogger('CopilotUserInput') @@ -182,18 +183,16 @@ const UserInput = forwardRef( const [isLoadingLogs, setIsLoadingLogs] = useState(false) const { data: session } = useSession() - const { currentChat, workflowId, enabledModels, setEnabledModels } = useCopilotStore() + const { + currentChat, + workflowId, + enabledModels, + setEnabledModels, + contextUsage, + createNewChat, + } = useCopilotStore() const params = useParams() const workspaceId = params.workspaceId as string - // Track per-chat preference for auto-adding workflow context - const [workflowAutoAddDisabledMap, setWorkflowAutoAddDisabledMap] = useState< - Record - >({}) - // Also track for new chats (no ID yet) - const [newChatWorkflowDisabled, setNewChatWorkflowDisabled] = useState(false) - const workflowAutoAddDisabled = currentChat?.id - ? workflowAutoAddDisabledMap[currentChat.id] || false - : newChatWorkflowDisabled // Determine placeholder based on mode const effectivePlaceholder = @@ -251,98 +250,6 @@ const UserInput = forwardRef( } }, [enabledModels, setEnabledModels]) - // Track the last chat ID we've seen to detect chat changes - const [lastChatId, setLastChatId] = useState(undefined) - // Track if we just sent a message to avoid re-adding context after submit - const [justSentMessage, setJustSentMessage] = useState(false) - - // Reset states when switching to a truly new chat - useEffect(() => { - const currentChatId = currentChat?.id - - // Detect when we're switching to a different chat - if (lastChatId !== currentChatId) { - // If switching to a new chat (undefined ID) from a different state - // reset the disabled flag so each new chat starts fresh - if (!currentChatId && lastChatId !== undefined) { - setNewChatWorkflowDisabled(false) - } - - // If a new chat just got an ID assigned, transfer the disabled state - if (currentChatId && !lastChatId && newChatWorkflowDisabled) { - setWorkflowAutoAddDisabledMap((prev) => ({ - ...prev, - [currentChatId]: true, - })) - // Keep newChatWorkflowDisabled as false for the next new chat - setNewChatWorkflowDisabled(false) - } - - // Reset the "just sent" flag when switching chats - setJustSentMessage(false) - - setLastChatId(currentChatId) - } - }, [currentChat?.id, lastChatId, newChatWorkflowDisabled]) - - // Auto-add workflow context when message is empty and not disabled - useEffect(() => { - // Don't auto-add if disabled or no workflow - if (!workflowId || workflowAutoAddDisabled) return - - // Don't auto-add right after sending a message - if (justSentMessage) return - - // Only add when message is empty (new message being composed) - if (message && message.trim().length > 0) return - - // Check if current_workflow context already exists - const hasCurrentWorkflowContext = selectedContexts.some( - (ctx) => ctx.kind === 'current_workflow' && (ctx as any).workflowId === workflowId - ) - if (hasCurrentWorkflowContext) { - return - } - - const addWorkflowContext = async () => { - // Double-check disabled state right before adding - if (workflowAutoAddDisabled) return - - // Get workflow name - let workflowName = 'Current Workflow' - - // Try loaded workflows first - const existingWorkflow = workflows.find((w) => w.id === workflowId) - if (existingWorkflow) { - workflowName = existingWorkflow.name - } else if (workflows.length === 0) { - // If workflows not loaded yet, try to fetch this specific one - try { - const resp = await fetch(`/api/workflows/${workflowId}`) - if (resp.ok) { - const data = await resp.json() - workflowName = data?.data?.name || 'Current Workflow' - } - } catch {} - } - - // Add current_workflow context using functional update to prevent duplicates - setSelectedContexts((prev) => { - const alreadyHasCurrentWorkflow = prev.some( - (ctx) => ctx.kind === 'current_workflow' && (ctx as any).workflowId === workflowId - ) - if (alreadyHasCurrentWorkflow) return prev - - return [ - ...prev, - { kind: 'current_workflow', workflowId, label: workflowName } as ChatContext, - ] - }) - } - - addWorkflowContext() - }, [workflowId, workflowAutoAddDisabled, workflows.length, message, justSentMessage]) // Re-run when message changes - // Auto-resize textarea and toggle vertical scroll when exceeding max height useEffect(() => { const textarea = textareaRef.current @@ -710,16 +617,8 @@ const UserInput = forwardRef( size: f.size, })) - // Build contexts to send: hide current_workflow in UI but always include it in payload - const uiContexts = selectedContexts.filter((c) => (c as any).kind !== 'current_workflow') - const finalContexts: any[] = [...uiContexts] - - if (workflowId) { - // Include current_workflow for the agent; label not shown in UI - finalContexts.push({ kind: 'current_workflow', workflowId, label: 'Current Workflow' }) - } - - onSubmit(trimmedMessage, fileAttachments, finalContexts as any) + // Send only the explicitly selected contexts + onSubmit(trimmedMessage, fileAttachments, selectedContexts as any) // Clean up preview URLs before clearing attachedFiles.forEach((f) => { @@ -736,17 +635,8 @@ const UserInput = forwardRef( } setAttachedFiles([]) - // Clear @mention contexts after submission, but preserve current_workflow if not disabled - setSelectedContexts((prev) => { - // Keep current_workflow context if it's not disabled - const currentWorkflowCtx = prev.find( - (ctx) => ctx.kind === 'current_workflow' && !workflowAutoAddDisabled - ) - return currentWorkflowCtx ? [currentWorkflowCtx] : [] - }) - - // Mark that we just sent a message to prevent auto-add - setJustSentMessage(true) + // Clear @mention contexts after submission + setSelectedContexts([]) setOpenSubmenuFor(null) setShowMentionMenu(false) @@ -1440,11 +1330,6 @@ const UserInput = forwardRef( setInternalMessage(newValue) } - // Reset the "just sent" flag when user starts typing - if (justSentMessage && newValue.length > 0) { - setJustSentMessage(false) - } - const caret = e.target.selectionStart ?? newValue.length const active = getActiveMentionQueryAtPosition(caret, newValue) if (active) { @@ -1714,34 +1599,22 @@ const UserInput = forwardRef( // Keep selected contexts in sync with inline @label tokens so deleting inline tokens updates pills useEffect(() => { if (!message) { - // When message is empty, preserve current_workflow if not disabled - // Clear other contexts - setSelectedContexts((prev) => { - const currentWorkflowCtx = prev.find( - (ctx) => ctx.kind === 'current_workflow' && !workflowAutoAddDisabled - ) - return currentWorkflowCtx ? [currentWorkflowCtx] : [] - }) + // When message is empty, clear all contexts + setSelectedContexts([]) return } const presentLabels = new Set() const ranges = computeMentionRanges() for (const r of ranges) presentLabels.add(r.label) setSelectedContexts((prev) => { - // Keep contexts that are mentioned in text OR are current_workflow (unless disabled) + // Keep only contexts that are mentioned in text const filteredContexts = prev.filter((c) => { - // Always preserve current_workflow context if it's not disabled - // It should only be removable via the X button - if (c.kind === 'current_workflow' && !workflowAutoAddDisabled) { - return true - } - // For other contexts, check if they're mentioned in text return !!c.label && presentLabels.has(c.label!) }) return filteredContexts }) - }, [message, workflowAutoAddDisabled]) + }, [message]) // Manage aggregate mode and preloading when needed useEffect(() => { @@ -2050,7 +1923,7 @@ const UserInput = forwardRef(
( onDragOver={handleDragOver} onDrop={handleDrop} > + {/* Context Usage Pill - Top Right */} + {contextUsage && contextUsage.percentage > 0 && ( +
+ +
+ )} {/* Attached Files Display with Thumbnails */} {attachedFiles.length > 0 && (
@@ -2172,7 +2054,7 @@ const UserInput = forwardRef( {/* Highlight overlay */} 
                 {(() => {
@@ -2220,7 +2102,7 @@ const UserInput = forwardRef(
               placeholder={isDragging ? 'Drop files here...' : effectivePlaceholder}
               disabled={disabled}
               rows={1}
-              className='relative z-[2] mb-2 min-h-[32px] w-full resize-none overflow-y-auto overflow-x-hidden break-words border-0 bg-transparent px-[2px] py-1 font-sans text-sm text-transparent leading-[1.25rem] caret-foreground focus-visible:ring-0 focus-visible:ring-offset-0'
+              className='relative z-[2] mb-2 min-h-[32px] w-full resize-none overflow-y-auto overflow-x-hidden break-words border-0 bg-transparent pl-[2px] pr-14 py-1 font-sans text-sm text-transparent leading-[1.25rem] caret-foreground focus-visible:ring-0 focus-visible:ring-offset-0'
               style={{ height: 'auto', wordBreak: 'break-word' }}
             />
 
@@ -3364,7 +3246,7 @@ const UserInput = forwardRef(
{/* Right side: Attach Button + Send Button */} -
+
{/* Attach Button */} - - - {getTooltipMessage(isEnabled ? 'Disable Block' : 'Enable Block')} - - - - {!isStarterBlock && ( - {getTooltipMessage('Duplicate Block')} + + {getTooltipMessage(isEnabled ? 'Disable Block' : 'Enable Block')} + - )} - {/* Remove from subflow - only show when inside loop/parallel */} - {!isStarterBlock && parentId && (parentType === 'loop' || parentType === 'parallel') && ( - - - - - {getTooltipMessage('Remove From Subflow')} - - )} + {!isStarterBlock && ( + + + + + {getTooltipMessage('Duplicate Block')} + + )} - - - - - - {getTooltipMessage(horizontalHandles ? 'Vertical Ports' : 'Horizontal Ports')} - - + {/* Remove from subflow - only show when inside loop/parallel */} + {!isStarterBlock && parentId && (parentType === 'loop' || parentType === 'parallel') && ( + + + + + {getTooltipMessage('Remove From Subflow')} + + )} - {!isStarterBlock && ( - {getTooltipMessage('Delete Block')} + + {getTooltipMessage(horizontalHandles ? 'Vertical Ports' : 'Horizontal Ports')} + - )} -
- ) -} + + {!isStarterBlock && ( + + + + + {getTooltipMessage('Delete Block')} + + )} +
+ ) + }, + (prevProps, nextProps) => { + // Only re-render if props actually changed + return ( + prevProps.blockId === nextProps.blockId && + prevProps.blockType === nextProps.blockType && + prevProps.disabled === nextProps.disabled + ) + } +) diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/hooks/use-sub-block-value.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/hooks/use-sub-block-value.ts index 995e3b8044..68c98f1209 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/hooks/use-sub-block-value.ts +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/hooks/use-sub-block-value.ts @@ -60,7 +60,7 @@ export function useSubBlockValue( const wasStreamingRef = useRef(false) // Get value from subblock store, keyed by active workflow id - // We intentionally depend on activeWorkflowId so this recomputes when it changes. + // Optimized: use shallow equality comparison to prevent re-renders when other fields change const storeValue = useSubBlockStore( useCallback( (state) => { @@ -69,7 +69,8 @@ export function useSubBlockValue( return state.workflowValues[activeWorkflowId]?.[blockId]?.[subBlockId] ?? null }, [activeWorkflowId, blockId, subBlockId] - ) + ), + (a, b) => isEqual(a, b) // Use deep equality to prevent re-renders for same values ) // Check if we're in diff mode and get diff value if available @@ -84,8 +85,10 @@ export function useSubBlockValue( subBlockId === 'apiKey' || (subBlockId?.toLowerCase().includes('apikey') ?? false) // Always call this hook unconditionally - don't wrap it in a condition - const modelSubBlockValue = useSubBlockStore((state) => - blockId ? state.getValue(blockId, 'model') : null + // Optimized: only re-render if model value actually changes + const modelSubBlockValue = useSubBlockStore( + useCallback((state) => (blockId ? state.getValue(blockId, 'model') : null), [blockId]), + (a, b) => a === b ) // Determine if this is a provider-based block type diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/sub-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/sub-block.tsx index 19f896e1fd..354f3849f8 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/sub-block.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/components/sub-block/sub-block.tsx @@ -1,5 +1,5 @@ import type React from 'react' -import { useEffect, useState } from 'react' +import { memo, useState } from 'react' import { AlertTriangle, Info } from 'lucide-react' import { Label, Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui' import { cn } from '@/lib/utils' @@ -54,164 +54,171 @@ interface SubBlockProps { isWide?: boolean } -export function SubBlock({ - blockId, - config, - isConnecting, - isPreview = false, - subBlockValues, - disabled = false, - fieldDiffStatus, - allowExpandInPreview, - isWide = false, -}: SubBlockProps) { - const [isValidJson, setIsValidJson] = useState(true) +export const SubBlock = memo( + function SubBlock({ + blockId, + config, + isConnecting, + isPreview = false, + subBlockValues, + disabled = false, + fieldDiffStatus, + allowExpandInPreview, + isWide = false, + }: SubBlockProps) { + const [isValidJson, setIsValidJson] = useState(true) - // Debug field diff status - useEffect(() => { - if (fieldDiffStatus) { - console.log(`[SubBlock ${config.id}] fieldDiffStatus:`, fieldDiffStatus) + // Removed debug logging for performance + + const handleMouseDown = (e: React.MouseEvent) => { + e.stopPropagation() } - }, [fieldDiffStatus, config.id]) - const handleMouseDown = (e: React.MouseEvent) => { - e.stopPropagation() - } + const handleValidationChange = (isValid: boolean) => { + setIsValidJson(isValid) + } - const handleValidationChange = (isValid: boolean) => { - setIsValidJson(isValid) - } + const isFieldRequired = () => { + return config.required === true + } - const isFieldRequired = () => { - return config.required === true - } + // Get preview value for this specific sub-block + const getPreviewValue = () => { + if (!isPreview || !subBlockValues) return undefined + return subBlockValues[config.id]?.value ?? null + } - // Get preview value for this specific sub-block - const getPreviewValue = () => { - if (!isPreview || !subBlockValues) return undefined - return subBlockValues[config.id]?.value ?? null - } + const renderInput = () => { + const previewValue = getPreviewValue() + // Disable input if explicitly disabled or in preview mode + const isDisabled = disabled || isPreview - const renderInput = () => { - const previewValue = getPreviewValue() - // Disable input if explicitly disabled or in preview mode - const isDisabled = disabled || isPreview - - switch (config.type) { - case 'short-input': - return ( - - ) - case 'long-input': - return ( - - ) - case 'dropdown': - return ( -
- -
- ) - case 'combobox': - return ( -
- -
- ) - case 'slider': - return ( - - ) - case 'table': - return ( - - ) - case 'code': - return ( - - ) - case 'switch': - if (config.id === 'remoteExecution') { + ) + case 'long-input': return ( - + ) + case 'dropdown': + return ( +
+ +
+ ) + case 'combobox': + return ( +
+ +
+ ) + case 'slider': + return ( + + ) + case 'table': + return ( +
+ ) + case 'code': + return ( + + ) + case 'switch': + if (config.id === 'remoteExecution') { + return ( + + ) + } + return ( + ) + case 'tool-input': + return ( + + ) + case 'checkbox-list': + return ( + + ) + case 'grouped-checkbox-list': + return ( + + ) + case 'condition-input': + return ( + + ) + case 'eval-input': + return ( + + ) + case 'time-input': + return ( + + ) + case 'file-upload': + return ( + + ) + case 'webhook-config': { + // For webhook config, we need to construct the value from multiple subblock values + const webhookValue = + isPreview && subBlockValues + ? { + webhookProvider: subBlockValues.webhookProvider?.value, + webhookPath: subBlockValues.webhookPath?.value, + providerConfig: subBlockValues.providerConfig?.value, + } + : previewValue + + return ( + + ) } - return ( - - ) - case 'tool-input': - return ( - - ) - case 'checkbox-list': - return ( - - ) - case 'grouped-checkbox-list': - return ( - - ) - case 'condition-input': - return ( - - ) - case 'eval-input': - return ( - - ) - case 'time-input': - return ( - - ) - case 'file-upload': - return ( - - ) - case 'webhook-config': { - // For webhook config, we need to construct the value from multiple subblock values - const webhookValue = - isPreview && subBlockValues - ? { - webhookProvider: subBlockValues.webhookProvider?.value, - webhookPath: subBlockValues.webhookPath?.value, - providerConfig: subBlockValues.providerConfig?.value, - } - : previewValue + case 'trigger-config': { + // For trigger config, we need to construct the value from multiple subblock values + const triggerValue = + isPreview && subBlockValues + ? { + triggerId: subBlockValues.triggerId?.value, + triggerPath: subBlockValues.triggerPath?.value, + triggerConfig: subBlockValues.triggerConfig?.value, + } + : previewValue + return ( + + ) + } + case 'schedule-config': + return ( + + ) + case 'oauth-input': + return ( + + ) + case 'file-selector': + return ( + + ) + case 'project-selector': + return ( + + ) + case 'folder-selector': + return ( + + ) + case 'knowledge-base-selector': + return ( + + ) + case 'knowledge-tag-filters': + return ( + + ) - return ( - - ) + case 'document-tag-entry': + return ( + + ) + case 'document-selector': + return ( + + ) + case 'input-format': { + return ( + + ) + } + case 'input-mapping': { + return ( + + ) + } + case 'response-format': + return ( + + ) + case 'channel-selector': + return ( + + ) + case 'mcp-server-selector': + return ( + + ) + case 'mcp-tool-selector': + return ( + + ) + case 'mcp-dynamic-args': + return ( + + ) + default: + return
Unknown input type: {config.type}
} - case 'trigger-config': { - // For trigger config, we need to construct the value from multiple subblock values - const triggerValue = - isPreview && subBlockValues - ? { - triggerId: subBlockValues.triggerId?.value, - triggerPath: subBlockValues.triggerPath?.value, - triggerConfig: subBlockValues.triggerConfig?.value, - } - : previewValue - return ( - - ) - } - case 'schedule-config': - return ( - - ) - case 'oauth-input': - return ( - - ) - case 'file-selector': - return ( - - ) - case 'project-selector': - return ( - - ) - case 'folder-selector': - return ( - - ) - case 'knowledge-base-selector': - return ( - - ) - case 'knowledge-tag-filters': - return ( - - ) - - case 'document-tag-entry': - return ( - - ) - case 'document-selector': - return ( - - ) - case 'input-format': { - return ( - - ) - } - case 'input-mapping': { - return ( - - ) - } - case 'response-format': - return ( - - ) - case 'channel-selector': - return ( - - ) - case 'mcp-server-selector': - return ( - - ) - case 'mcp-tool-selector': - return ( - - ) - case 'mcp-dynamic-args': - return ( - - ) - default: - return
Unknown input type: {config.type}
} + + const required = isFieldRequired() + + return ( +
+ {config.type !== 'switch' && ( + + )} + {renderInput()} +
+ ) + }, + (prevProps, nextProps) => { + // Custom comparison to prevent unnecessary re-renders + return ( + prevProps.blockId === nextProps.blockId && + prevProps.config === nextProps.config && + prevProps.isConnecting === nextProps.isConnecting && + prevProps.isPreview === nextProps.isPreview && + prevProps.subBlockValues === nextProps.subBlockValues && + prevProps.disabled === nextProps.disabled && + prevProps.fieldDiffStatus === nextProps.fieldDiffStatus && + prevProps.allowExpandInPreview === nextProps.allowExpandInPreview && + prevProps.isWide === nextProps.isWide + ) } - - const required = isFieldRequired() - - return ( -
- {config.type !== 'switch' && ( - - )} - {renderInput()} -
- ) -} +) diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx index 1cf40e9deb..9166be1e39 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx @@ -1,4 +1,4 @@ -import { useEffect, useRef, useState } from 'react' +import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react' import { BookOpen, Code, Info, RectangleHorizontal, RectangleVertical, Zap } from 'lucide-react' import { useParams } from 'next/navigation' import { Handle, type NodeProps, Position, useUpdateNodeInternals } from 'reactflow' @@ -39,1143 +39,707 @@ interface WorkflowBlockProps { blockState?: any // Block state data passed in preview mode } -// Combine both interfaces into a single component -export function WorkflowBlock({ id, data }: NodeProps) { - const { type, config, name, isActive: dataIsActive, isPending } = data - - // State management - const [isConnecting, setIsConnecting] = useState(false) - - const [isEditing, setIsEditing] = useState(false) - const [editedName, setEditedName] = useState('') - const [isLoadingScheduleInfo, setIsLoadingScheduleInfo] = useState(false) - const [scheduleInfo, setScheduleInfo] = useState<{ - scheduleTiming: string - nextRunAt: string | null - lastRanAt: string | null - timezone: string - status?: string - isDisabled?: boolean - id?: string - } | null>(null) - const [webhookInfo, setWebhookInfo] = useState<{ - webhookPath: string - provider: string - } | null>(null) - - // Refs - const blockRef = useRef(null) - const contentRef = useRef(null) - const nameInputRef = useRef(null) - const updateNodeInternals = useUpdateNodeInternals() - - // Workflow store selectors - const lastUpdate = useWorkflowStore((state) => state.lastUpdate) - - // Use the clean abstraction for current workflow state - const currentWorkflow = useCurrentWorkflow() - const currentBlock = currentWorkflow.getBlockById(id) - - // In preview mode, use the blockState provided; otherwise use current workflow state - const isEnabled = data.isPreview - ? (data.blockState?.enabled ?? true) - : (currentBlock?.enabled ?? true) - - // Get diff status from the block itself (set by diff engine) - const diffStatus: DiffStatus = - currentWorkflow.isDiffMode && currentBlock && hasDiffStatus(currentBlock) - ? currentBlock.is_diff - : undefined - - // Get field-level diff information for this specific block from the diff store - const diffAnalysisForFields = useWorkflowDiffStore((state) => state.diffAnalysis) - const fieldDiff = currentWorkflow.isDiffMode - ? diffAnalysisForFields?.field_diffs?.[id] - : undefined - - // Debug: Log diff status for this block - useEffect(() => { - if (currentWorkflow.isDiffMode) { - console.log(`[WorkflowBlock ${id}] Diff status:`, { - blockId: id, - blockName: currentBlock?.name, - isDiffMode: currentWorkflow.isDiffMode, - diffStatus, - hasFieldDiff: !!fieldDiff, - timestamp: Date.now(), - }) - } - }, [id, currentWorkflow.isDiffMode, diffStatus, fieldDiff, currentBlock?.name]) - - // Check if this block is marked for deletion (in original workflow, not diff) - const diffAnalysis = useWorkflowDiffStore((state) => state.diffAnalysis) - const isShowingDiff = useWorkflowDiffStore((state) => state.isShowingDiff) - const isDeletedBlock = !isShowingDiff && diffAnalysis?.deleted_blocks?.includes(id) - - // Debug: Log when in diff mode or when blocks are marked for deletion - useEffect(() => { - if (currentWorkflow.isDiffMode) { - console.log( - `[WorkflowBlock ${id}] Diff mode active, block exists: ${!!currentBlock}, diff status: ${diffStatus}` - ) - if (fieldDiff) { - console.log(`[WorkflowBlock ${id}] Field diff:`, fieldDiff) - } - } - if (diffAnalysis && !isShowingDiff) { - console.log(`[WorkflowBlock ${id}] Diff analysis available in original workflow:`, { - deleted_blocks: diffAnalysis.deleted_blocks, - isDeletedBlock, - isShowingDiff, - }) - } - if (isDeletedBlock) { - console.log(`[WorkflowBlock ${id}] Block marked for deletion in original workflow`) - } - }, [ - currentWorkflow.isDiffMode, - currentBlock, - diffStatus, - fieldDiff || null, - isDeletedBlock, - diffAnalysis, - isShowingDiff, - id, - ]) - // Always call hooks to maintain consistent hook order - const storeHorizontalHandles = useWorkflowStore( - (state) => state.blocks[id]?.horizontalHandles ?? true - ) - const storeIsWide = useWorkflowStore((state) => state.blocks[id]?.isWide ?? false) - const storeBlockHeight = useWorkflowStore((state) => state.blocks[id]?.height ?? 0) - const storeBlockLayout = useWorkflowStore((state) => state.blocks[id]?.layout) - const storeBlockAdvancedMode = useWorkflowStore( - (state) => state.blocks[id]?.advancedMode ?? false - ) - const storeBlockTriggerMode = useWorkflowStore((state) => state.blocks[id]?.triggerMode ?? false) - - // Get block properties from currentWorkflow when in diff mode, otherwise from workflow store - const horizontalHandles = data.isPreview - ? (data.blockState?.horizontalHandles ?? true) // In preview mode, use blockState and default to horizontal - : currentWorkflow.isDiffMode - ? (currentWorkflow.blocks[id]?.horizontalHandles ?? true) - : storeHorizontalHandles - - const isWide = currentWorkflow.isDiffMode - ? (currentWorkflow.blocks[id]?.isWide ?? false) - : storeIsWide - - const blockHeight = currentWorkflow.isDiffMode - ? (currentWorkflow.blocks[id]?.height ?? 0) - : storeBlockHeight - - const blockWidth = currentWorkflow.isDiffMode - ? (currentWorkflow.blocks[id]?.layout?.measuredWidth ?? 0) - : (storeBlockLayout?.measuredWidth ?? 0) - - // Get per-block webhook status by checking if webhook is configured - const activeWorkflowId = useWorkflowRegistry((state) => state.activeWorkflowId) - - const hasWebhookProvider = useSubBlockStore( - (state) => state.workflowValues[activeWorkflowId || '']?.[id]?.webhookProvider - ) - const hasWebhookPath = useSubBlockStore( - (state) => state.workflowValues[activeWorkflowId || '']?.[id]?.webhookPath - ) - const blockWebhookStatus = !!(hasWebhookProvider && hasWebhookPath) - - const blockAdvancedMode = currentWorkflow.isDiffMode - ? (currentWorkflow.blocks[id]?.advancedMode ?? false) - : storeBlockAdvancedMode - - // Get triggerMode from currentWorkflow blocks when in diff mode, otherwise from workflow store - const blockTriggerMode = currentWorkflow.isDiffMode - ? (currentWorkflow.blocks[id]?.triggerMode ?? false) - : storeBlockTriggerMode - - // Local UI state for diff mode controls - const [diffIsWide, setDiffIsWide] = useState(isWide) - const [diffAdvancedMode, setDiffAdvancedMode] = useState(blockAdvancedMode) - const [diffTriggerMode, setDiffTriggerMode] = useState(blockTriggerMode) - - useEffect(() => { - if (currentWorkflow.isDiffMode) { - setDiffIsWide(isWide) - setDiffAdvancedMode(blockAdvancedMode) - setDiffTriggerMode(blockTriggerMode) - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [currentWorkflow.isDiffMode, id]) - - const displayIsWide = currentWorkflow.isDiffMode ? diffIsWide : isWide - const displayAdvancedMode = currentWorkflow.isDiffMode - ? diffAdvancedMode - : data.isPreview - ? (data.blockState?.advancedMode ?? false) - : blockAdvancedMode - const displayTriggerMode = currentWorkflow.isDiffMode - ? diffTriggerMode - : data.isPreview - ? (data.blockState?.triggerMode ?? false) - : blockTriggerMode - - // Collaborative workflow actions - const { - collaborativeUpdateBlockName, - collaborativeToggleBlockWide, - collaborativeToggleBlockAdvancedMode, - collaborativeToggleBlockTriggerMode, - collaborativeSetSubblockValue, - } = useCollaborativeWorkflow() - - // Clear credential-dependent fields when credential changes - const prevCredRef = useRef(undefined) - useEffect(() => { - const activeWorkflowId = useWorkflowRegistry.getState().activeWorkflowId - if (!activeWorkflowId) return - const current = useSubBlockStore.getState().workflowValues[activeWorkflowId]?.[id] - if (!current) return - const cred = current.credential?.value as string | undefined - if (prevCredRef.current !== cred) { - prevCredRef.current = cred - const keys = Object.keys(current) - const dependentKeys = keys.filter((k) => k !== 'credential') - dependentKeys.forEach((k) => collaborativeSetSubblockValue(id, k, '')) - } - }, [id, collaborativeSetSubblockValue]) - - // Workflow store actions - const updateBlockLayoutMetrics = useWorkflowStore((state) => state.updateBlockLayoutMetrics) - - // Execution store - const isActiveBlock = useExecutionStore((state) => state.activeBlockIds.has(id)) - const isActive = dataIsActive || isActiveBlock - - // Get the current workflow ID from URL params instead of global state - // This prevents race conditions when switching workflows rapidly - const params = useParams() - const currentWorkflowId = params.workflowId as string - - // Check if this is a starter block or trigger block - const isStarterBlock = type === 'starter' - const isTriggerBlock = config.category === 'triggers' - const isWebhookTriggerBlock = type === 'webhook' - - const reactivateSchedule = async (scheduleId: string) => { - try { - const response = await fetch(`/api/schedules/${scheduleId}`, { - method: 'PUT', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ action: 'reactivate' }), - }) - - if (response.ok) { - // Use the current workflow ID from params instead of global state - if (currentWorkflowId) { - fetchScheduleInfo(currentWorkflowId) - } - } else { - logger.error('Failed to reactivate schedule') - } - } catch (error) { - logger.error('Error reactivating schedule:', error) - } - } - - const disableSchedule = async (scheduleId: string) => { - try { - const response = await fetch(`/api/schedules/${scheduleId}`, { - method: 'PUT', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ action: 'disable' }), - }) - - if (response.ok) { - // Refresh schedule info to show updated status - if (currentWorkflowId) { - fetchScheduleInfo(currentWorkflowId) - } - } else { - logger.error('Failed to disable schedule') - } - } catch (error) { - logger.error('Error disabling schedule:', error) - } - } - - const fetchScheduleInfo = async (workflowId: string) => { - if (!workflowId) return - - try { - setIsLoadingScheduleInfo(true) - - // For schedule trigger blocks, always include the blockId parameter - const url = new URL('/api/schedules', window.location.origin) - url.searchParams.set('workflowId', workflowId) - url.searchParams.set('mode', 'schedule') - url.searchParams.set('blockId', id) // Always include blockId for schedule blocks - - const response = await fetch(url.toString(), { - cache: 'no-store', - headers: { - 'Cache-Control': 'no-cache', - }, - }) - - if (!response.ok) { - setScheduleInfo(null) - return - } - - const data = await response.json() - - if (!data.schedule) { - setScheduleInfo(null) - return - } - - let scheduleTiming = 'Unknown schedule' - if (data.schedule.cronExpression) { - scheduleTiming = parseCronToHumanReadable(data.schedule.cronExpression) - } - - const baseInfo = { - scheduleTiming, - nextRunAt: data.schedule.nextRunAt as string | null, - lastRanAt: data.schedule.lastRanAt as string | null, - timezone: data.schedule.timezone || 'UTC', - status: data.schedule.status as string, - isDisabled: data.schedule.status === 'disabled', - id: data.schedule.id as string, - } - - try { - const statusRes = await fetch(`/api/schedules/${baseInfo.id}/status`, { - cache: 'no-store', - headers: { 'Cache-Control': 'no-cache' }, - }) - - if (statusRes.ok) { - const statusData = await statusRes.json() - setScheduleInfo({ - scheduleTiming: baseInfo.scheduleTiming, - nextRunAt: statusData.nextRunAt ?? baseInfo.nextRunAt, - lastRanAt: statusData.lastRanAt ?? baseInfo.lastRanAt, - timezone: baseInfo.timezone, - status: statusData.status ?? baseInfo.status, - isDisabled: statusData.isDisabled ?? baseInfo.isDisabled, - id: baseInfo.id, - }) - return - } - } catch (err) { - logger.error('Error fetching schedule status:', err) - } - - setScheduleInfo(baseInfo) - } catch (error) { - logger.error('Error fetching schedule info:', error) - setScheduleInfo(null) - } finally { - setIsLoadingScheduleInfo(false) - } - } - - useEffect(() => { - if (type === 'schedule' && currentWorkflowId) { - fetchScheduleInfo(currentWorkflowId) - } else { - setScheduleInfo(null) - setIsLoadingScheduleInfo(false) // Reset loading state when not a schedule block - } - - // Cleanup function to reset loading state when component unmounts or workflow changes - return () => { - setIsLoadingScheduleInfo(false) - } - }, [isStarterBlock, isTriggerBlock, type, currentWorkflowId, lastUpdate]) - - // Get webhook information for the tooltip - useEffect(() => { - if (!blockWebhookStatus) { - setWebhookInfo(null) - } - }, [blockWebhookStatus]) - - // Update node internals when handles change - useEffect(() => { - updateNodeInternals(id) - }, [id, horizontalHandles, updateNodeInternals]) - - const debounce = (func: (...args: any[]) => void, wait: number) => { - let timeout: NodeJS.Timeout - return (...args: any[]) => { - clearTimeout(timeout) - timeout = setTimeout(() => func(...args), wait) - } - } - - // Add effect to observe size changes with debounced updates - useEffect(() => { - if (!contentRef.current) return - - let rafId: number - const debouncedUpdate = debounce((dimensions: { width: number; height: number }) => { - if (dimensions.height !== blockHeight || dimensions.width !== blockWidth) { - updateBlockLayoutMetrics(id, dimensions) - updateNodeInternals(id) - } - }, 100) - - const resizeObserver = new ResizeObserver((entries) => { - // Cancel any pending animation frame - if (rafId) { - cancelAnimationFrame(rafId) - } - - // Schedule the update on the next animation frame - rafId = requestAnimationFrame(() => { - for (const entry of entries) { - const rect = entry.target.getBoundingClientRect() - const height = entry.borderBoxSize[0]?.blockSize ?? rect.height - const width = entry.borderBoxSize[0]?.inlineSize ?? rect.width - debouncedUpdate({ width, height }) - } - }) - }) - - resizeObserver.observe(contentRef.current) - - return () => { - resizeObserver.disconnect() - if (rafId) { - cancelAnimationFrame(rafId) - } - } - }, [id, blockHeight, blockWidth, updateBlockLayoutMetrics, updateNodeInternals, lastUpdate]) - - // SubBlock layout management - function groupSubBlocks(subBlocks: SubBlockConfig[], blockId: string) { - const rows: SubBlockConfig[][] = [] - let currentRow: SubBlockConfig[] = [] - let currentRowWidth = 0 - - // Get the appropriate state for conditional evaluation - let stateToUse: Record = {} - - if (data.isPreview && data.subBlockValues) { - // In preview mode, use the preview values - stateToUse = data.subBlockValues - } else if (currentWorkflow.isDiffMode && currentBlock) { - // In diff mode, use the diff workflow's subblock values - stateToUse = currentBlock.subBlocks || {} - } else { - // In normal mode, use merged state - const blocks = useWorkflowStore.getState().blocks - const activeWorkflowId = useWorkflowRegistry.getState().activeWorkflowId || undefined - const mergedState = mergeSubblockState(blocks, activeWorkflowId, blockId)[blockId] - stateToUse = mergedState?.subBlocks || {} - } - - const effectiveAdvanced = displayAdvancedMode - const effectiveTrigger = displayTriggerMode - const e2bClientEnabled = isTruthy(getEnv('NEXT_PUBLIC_E2B_ENABLED')) - - // Filter visible blocks and those that meet their conditions - const visibleSubBlocks = subBlocks.filter((block) => { - if (block.hidden) return false - - // Filter out E2B-related blocks if E2B is not enabled on the client - if (!e2bClientEnabled && (block.id === 'remoteExecution' || block.id === 'language')) { - return false - } - - // Special handling for trigger mode - if (block.type === ('trigger-config' as SubBlockType)) { - // Show trigger-config blocks when in trigger mode OR for pure trigger blocks - const isPureTriggerBlock = config?.triggers?.enabled && config.category === 'triggers' - return effectiveTrigger || isPureTriggerBlock - } - - if (effectiveTrigger && block.type !== ('trigger-config' as SubBlockType)) { - // In trigger mode, hide all non-trigger-config blocks - return false - } - - // Filter by mode if specified - if (block.mode) { - if (block.mode === 'basic' && effectiveAdvanced) return false - if (block.mode === 'advanced' && !effectiveAdvanced) return false - } - - // If there's no condition, the block should be shown - if (!block.condition) return true - - // If condition is a function, call it to get the actual condition object - const actualCondition = - typeof block.condition === 'function' ? block.condition() : block.condition - - // Get the values of the fields this block depends on from the appropriate state - const fieldValue = stateToUse[actualCondition.field]?.value - const andFieldValue = actualCondition.and - ? stateToUse[actualCondition.and.field]?.value +// Combine both interfaces into a single component - wrapped in memo for performance +export const WorkflowBlock = memo( + function WorkflowBlock({ id, data }: NodeProps) { + const { type, config, name, isActive: dataIsActive, isPending } = data + + // State management + const [isConnecting, setIsConnecting] = useState(false) + + const [isEditing, setIsEditing] = useState(false) + const [editedName, setEditedName] = useState('') + const [isLoadingScheduleInfo, setIsLoadingScheduleInfo] = useState(false) + const [scheduleInfo, setScheduleInfo] = useState<{ + scheduleTiming: string + nextRunAt: string | null + lastRanAt: string | null + timezone: string + status?: string + isDisabled?: boolean + id?: string + } | null>(null) + const [webhookInfo, setWebhookInfo] = useState<{ + webhookPath: string + provider: string + } | null>(null) + + // Refs + const blockRef = useRef(null) + const contentRef = useRef(null) + const nameInputRef = useRef(null) + const updateNodeInternals = useUpdateNodeInternals() + + // Use the clean abstraction for current workflow state + const currentWorkflow = useCurrentWorkflow() + const currentBlock = currentWorkflow.getBlockById(id) + + // In preview mode, use the blockState provided; otherwise use current workflow state + const isEnabled = data.isPreview + ? (data.blockState?.enabled ?? true) + : (currentBlock?.enabled ?? true) + + // Get diff status from the block itself (set by diff engine) + const diffStatus: DiffStatus = + currentWorkflow.isDiffMode && currentBlock && hasDiffStatus(currentBlock) + ? currentBlock.is_diff : undefined - // Check if the condition value is an array - const isValueMatch = Array.isArray(actualCondition.value) - ? fieldValue != null && - (actualCondition.not - ? !actualCondition.value.includes(fieldValue as string | number | boolean) - : actualCondition.value.includes(fieldValue as string | number | boolean)) - : actualCondition.not - ? fieldValue !== actualCondition.value - : fieldValue === actualCondition.value + // Optimized: Single diff store subscription for all diff-related data + const { diffAnalysis, isShowingDiff, fieldDiff } = useWorkflowDiffStore( + useCallback( + (state) => ({ + diffAnalysis: state.diffAnalysis, + isShowingDiff: state.isShowingDiff, + fieldDiff: currentWorkflow.isDiffMode ? state.diffAnalysis?.field_diffs?.[id] : undefined, + }), + [id, currentWorkflow.isDiffMode] + ) + ) + const isDeletedBlock = !isShowingDiff && diffAnalysis?.deleted_blocks?.includes(id) - // Check both conditions if 'and' is present - const isAndValueMatch = - !actualCondition.and || - (Array.isArray(actualCondition.and.value) - ? andFieldValue != null && - (actualCondition.and.not - ? !actualCondition.and.value.includes(andFieldValue as string | number | boolean) - : actualCondition.and.value.includes(andFieldValue as string | number | boolean)) - : actualCondition.and.not - ? andFieldValue !== actualCondition.and.value - : andFieldValue === actualCondition.and.value) + // Removed debug logging for performance + // Optimized: Single store subscription for all block properties + const { + storeHorizontalHandles, + storeIsWide, + storeBlockHeight, + storeBlockLayout, + storeBlockAdvancedMode, + storeBlockTriggerMode, + } = useWorkflowStore( + useCallback( + (state) => { + const block = state.blocks[id] + return { + storeHorizontalHandles: block?.horizontalHandles ?? true, + storeIsWide: block?.isWide ?? false, + storeBlockHeight: block?.height ?? 0, + storeBlockLayout: block?.layout, + storeBlockAdvancedMode: block?.advancedMode ?? false, + storeBlockTriggerMode: block?.triggerMode ?? false, + } + }, + [id] + ) + ) - return isValueMatch && isAndValueMatch - }) + // Get block properties from currentWorkflow when in diff mode, otherwise from workflow store + const horizontalHandles = data.isPreview + ? (data.blockState?.horizontalHandles ?? true) // In preview mode, use blockState and default to horizontal + : currentWorkflow.isDiffMode + ? (currentWorkflow.blocks[id]?.horizontalHandles ?? true) + : storeHorizontalHandles - visibleSubBlocks.forEach((block) => { - const blockWidth = block.layout === 'half' ? 0.5 : 1 - if (currentRowWidth + blockWidth > 1) { - if (currentRow.length > 0) { - rows.push([...currentRow]) - } - currentRow = [block] - currentRowWidth = blockWidth - } else { - currentRow.push(block) - currentRowWidth += blockWidth + const isWide = currentWorkflow.isDiffMode + ? (currentWorkflow.blocks[id]?.isWide ?? false) + : storeIsWide + + const blockHeight = currentWorkflow.isDiffMode + ? (currentWorkflow.blocks[id]?.height ?? 0) + : storeBlockHeight + + const blockWidth = currentWorkflow.isDiffMode + ? (currentWorkflow.blocks[id]?.layout?.measuredWidth ?? 0) + : (storeBlockLayout?.measuredWidth ?? 0) + + // Get per-block webhook status by checking if webhook is configured + const activeWorkflowId = useWorkflowRegistry((state) => state.activeWorkflowId) + + // Optimized: Single SubBlockStore subscription for webhook info + const blockWebhookStatus = useSubBlockStore( + useCallback( + (state) => { + const blockValues = state.workflowValues[activeWorkflowId || '']?.[id] + return !!(blockValues?.webhookProvider && blockValues?.webhookPath) + }, + [activeWorkflowId, id] + ) + ) + + const blockAdvancedMode = currentWorkflow.isDiffMode + ? (currentWorkflow.blocks[id]?.advancedMode ?? false) + : storeBlockAdvancedMode + + // Get triggerMode from currentWorkflow blocks when in diff mode, otherwise from workflow store + const blockTriggerMode = currentWorkflow.isDiffMode + ? (currentWorkflow.blocks[id]?.triggerMode ?? false) + : storeBlockTriggerMode + + // Local UI state for diff mode controls + const [diffIsWide, setDiffIsWide] = useState(isWide) + const [diffAdvancedMode, setDiffAdvancedMode] = useState(blockAdvancedMode) + const [diffTriggerMode, setDiffTriggerMode] = useState(blockTriggerMode) + + useEffect(() => { + if (currentWorkflow.isDiffMode) { + setDiffIsWide(isWide) + setDiffAdvancedMode(blockAdvancedMode) + setDiffTriggerMode(blockTriggerMode) } - }) + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [currentWorkflow.isDiffMode, id]) - if (currentRow.length > 0) { - rows.push(currentRow) + const displayIsWide = currentWorkflow.isDiffMode ? diffIsWide : isWide + const displayAdvancedMode = currentWorkflow.isDiffMode + ? diffAdvancedMode + : data.isPreview + ? (data.blockState?.advancedMode ?? false) + : blockAdvancedMode + const displayTriggerMode = currentWorkflow.isDiffMode + ? diffTriggerMode + : data.isPreview + ? (data.blockState?.triggerMode ?? false) + : blockTriggerMode + + // Collaborative workflow actions + const { + collaborativeUpdateBlockName, + collaborativeToggleBlockWide, + collaborativeToggleBlockAdvancedMode, + collaborativeToggleBlockTriggerMode, + collaborativeSetSubblockValue, + } = useCollaborativeWorkflow() + + // Clear credential-dependent fields when credential changes + const prevCredRef = useRef(undefined) + useEffect(() => { + const activeWorkflowId = useWorkflowRegistry.getState().activeWorkflowId + if (!activeWorkflowId) return + const current = useSubBlockStore.getState().workflowValues[activeWorkflowId]?.[id] + if (!current) return + const cred = current.credential?.value as string | undefined + if (prevCredRef.current !== cred) { + prevCredRef.current = cred + const keys = Object.keys(current) + const dependentKeys = keys.filter((k) => k !== 'credential') + dependentKeys.forEach((k) => collaborativeSetSubblockValue(id, k, '')) + } + }, [id, collaborativeSetSubblockValue]) + + // Workflow store actions + const updateBlockLayoutMetrics = useWorkflowStore((state) => state.updateBlockLayoutMetrics) + + // Execution store + const isActiveBlock = useExecutionStore((state) => state.activeBlockIds.has(id)) + const isActive = dataIsActive || isActiveBlock + + // Get the current workflow ID from URL params instead of global state + // This prevents race conditions when switching workflows rapidly + const params = useParams() + const currentWorkflowId = params.workflowId as string + + // Check if this is a starter block or trigger block + const isStarterBlock = type === 'starter' + const isTriggerBlock = config.category === 'triggers' + const isWebhookTriggerBlock = type === 'webhook' + + const reactivateSchedule = async (scheduleId: string) => { + try { + const response = await fetch(`/api/schedules/${scheduleId}`, { + method: 'PUT', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ action: 'reactivate' }), + }) + + if (response.ok) { + // Use the current workflow ID from params instead of global state + if (currentWorkflowId) { + fetchScheduleInfo(currentWorkflowId) + } + } else { + logger.error('Failed to reactivate schedule') + } + } catch (error) { + logger.error('Error reactivating schedule:', error) + } } - return rows - } + const disableSchedule = async (scheduleId: string) => { + try { + const response = await fetch(`/api/schedules/${scheduleId}`, { + method: 'PUT', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ action: 'disable' }), + }) - const subBlockRows = groupSubBlocks(config.subBlocks, id) - - // Name editing handlers - const handleNameClick = (e: React.MouseEvent) => { - e.stopPropagation() // Prevent drag handler from interfering - setEditedName(name) - setIsEditing(true) - } - - // Auto-focus the input when edit mode is activated - useEffect(() => { - if (isEditing && nameInputRef.current) { - nameInputRef.current.focus() + if (response.ok) { + // Refresh schedule info to show updated status + if (currentWorkflowId) { + fetchScheduleInfo(currentWorkflowId) + } + } else { + logger.error('Failed to disable schedule') + } + } catch (error) { + logger.error('Error disabling schedule:', error) + } } - }, [isEditing]) - // Handle node name change with validation - const handleNodeNameChange = (newName: string) => { - const validatedName = validateName(newName) - setEditedName(validatedName.slice(0, 18)) - } + const fetchScheduleInfo = async (workflowId: string) => { + if (!workflowId) return - const handleNameSubmit = () => { - const trimmedName = editedName.trim().slice(0, 18) - if (trimmedName && trimmedName !== name) { - collaborativeUpdateBlockName(id, trimmedName) + try { + setIsLoadingScheduleInfo(true) + + // For schedule trigger blocks, always include the blockId parameter + const url = new URL('/api/schedules', window.location.origin) + url.searchParams.set('workflowId', workflowId) + url.searchParams.set('mode', 'schedule') + url.searchParams.set('blockId', id) // Always include blockId for schedule blocks + + const response = await fetch(url.toString(), { + cache: 'no-store', + headers: { + 'Cache-Control': 'no-cache', + }, + }) + + if (!response.ok) { + setScheduleInfo(null) + return + } + + const data = await response.json() + + if (!data.schedule) { + setScheduleInfo(null) + return + } + + let scheduleTiming = 'Unknown schedule' + if (data.schedule.cronExpression) { + scheduleTiming = parseCronToHumanReadable(data.schedule.cronExpression) + } + + const baseInfo = { + scheduleTiming, + nextRunAt: data.schedule.nextRunAt as string | null, + lastRanAt: data.schedule.lastRanAt as string | null, + timezone: data.schedule.timezone || 'UTC', + status: data.schedule.status as string, + isDisabled: data.schedule.status === 'disabled', + id: data.schedule.id as string, + } + + try { + const statusRes = await fetch(`/api/schedules/${baseInfo.id}/status`, { + cache: 'no-store', + headers: { 'Cache-Control': 'no-cache' }, + }) + + if (statusRes.ok) { + const statusData = await statusRes.json() + setScheduleInfo({ + scheduleTiming: baseInfo.scheduleTiming, + nextRunAt: statusData.nextRunAt ?? baseInfo.nextRunAt, + lastRanAt: statusData.lastRanAt ?? baseInfo.lastRanAt, + timezone: baseInfo.timezone, + status: statusData.status ?? baseInfo.status, + isDisabled: statusData.isDisabled ?? baseInfo.isDisabled, + id: baseInfo.id, + }) + return + } + } catch (err) { + logger.error('Error fetching schedule status:', err) + } + + setScheduleInfo(baseInfo) + } catch (error) { + logger.error('Error fetching schedule info:', error) + setScheduleInfo(null) + } finally { + setIsLoadingScheduleInfo(false) + } } - setIsEditing(false) - } - const handleNameKeyDown = (e: React.KeyboardEvent) => { - if (e.key === 'Enter') { - handleNameSubmit() - } else if (e.key === 'Escape') { + useEffect(() => { + if (type === 'schedule' && currentWorkflowId) { + fetchScheduleInfo(currentWorkflowId) + } else { + setScheduleInfo(null) + setIsLoadingScheduleInfo(false) // Reset loading state when not a schedule block + } + + // Cleanup function to reset loading state when component unmounts or workflow changes + return () => { + setIsLoadingScheduleInfo(false) + } + }, [isStarterBlock, isTriggerBlock, type, currentWorkflowId]) + + // Get webhook information for the tooltip + useEffect(() => { + if (!blockWebhookStatus) { + setWebhookInfo(null) + } + }, [blockWebhookStatus]) + + // Update node internals when handles change + useEffect(() => { + updateNodeInternals(id) + }, [id, horizontalHandles, updateNodeInternals]) + + // Memoized debounce function to avoid recreating on every render + const debounce = useCallback((func: (...args: any[]) => void, wait: number) => { + let timeout: NodeJS.Timeout + return (...args: any[]) => { + clearTimeout(timeout) + timeout = setTimeout(() => func(...args), wait) + } + }, []) + + // Add effect to observe size changes with debounced updates + useEffect(() => { + if (!contentRef.current) return + + let rafId: number + const debouncedUpdate = debounce((dimensions: { width: number; height: number }) => { + if (dimensions.height !== blockHeight || dimensions.width !== blockWidth) { + updateBlockLayoutMetrics(id, dimensions) + updateNodeInternals(id) + } + }, 100) + + const resizeObserver = new ResizeObserver((entries) => { + // Cancel any pending animation frame + if (rafId) { + cancelAnimationFrame(rafId) + } + + // Schedule the update on the next animation frame + rafId = requestAnimationFrame(() => { + for (const entry of entries) { + const rect = entry.target.getBoundingClientRect() + const height = entry.borderBoxSize[0]?.blockSize ?? rect.height + const width = entry.borderBoxSize[0]?.inlineSize ?? rect.width + debouncedUpdate({ width, height }) + } + }) + }) + + resizeObserver.observe(contentRef.current) + + return () => { + resizeObserver.disconnect() + if (rafId) { + cancelAnimationFrame(rafId) + } + } + }, [id, blockHeight, blockWidth, updateBlockLayoutMetrics, updateNodeInternals, debounce]) + + // Memoized SubBlock layout management - only recalculate when dependencies change + const subBlockRows = useMemo(() => { + const rows: SubBlockConfig[][] = [] + let currentRow: SubBlockConfig[] = [] + let currentRowWidth = 0 + + // Get the appropriate state for conditional evaluation + let stateToUse: Record = {} + + if (data.isPreview && data.subBlockValues) { + // In preview mode, use the preview values + stateToUse = data.subBlockValues + } else if (currentWorkflow.isDiffMode && currentBlock) { + // In diff mode, use the diff workflow's subblock values + stateToUse = currentBlock.subBlocks || {} + } else { + // In normal mode, use merged state + const blocks = useWorkflowStore.getState().blocks + const activeWorkflowId = useWorkflowRegistry.getState().activeWorkflowId || undefined + const mergedState = mergeSubblockState(blocks, activeWorkflowId, id)[id] + stateToUse = mergedState?.subBlocks || {} + } + + const effectiveAdvanced = displayAdvancedMode + const effectiveTrigger = displayTriggerMode + const e2bClientEnabled = isTruthy(getEnv('NEXT_PUBLIC_E2B_ENABLED')) + + // Filter visible blocks and those that meet their conditions + const visibleSubBlocks = config.subBlocks.filter((block) => { + if (block.hidden) return false + + // Filter out E2B-related blocks if E2B is not enabled on the client + if (!e2bClientEnabled && (block.id === 'remoteExecution' || block.id === 'language')) { + return false + } + + // Special handling for trigger mode + if (block.type === ('trigger-config' as SubBlockType)) { + // Show trigger-config blocks when in trigger mode OR for pure trigger blocks + const isPureTriggerBlock = config?.triggers?.enabled && config.category === 'triggers' + return effectiveTrigger || isPureTriggerBlock + } + + if (effectiveTrigger && block.type !== ('trigger-config' as SubBlockType)) { + // In trigger mode, hide all non-trigger-config blocks + return false + } + + // Filter by mode if specified + if (block.mode) { + if (block.mode === 'basic' && effectiveAdvanced) return false + if (block.mode === 'advanced' && !effectiveAdvanced) return false + } + + // If there's no condition, the block should be shown + if (!block.condition) return true + + // If condition is a function, call it to get the actual condition object + const actualCondition = + typeof block.condition === 'function' ? block.condition() : block.condition + + // Get the values of the fields this block depends on from the appropriate state + const fieldValue = stateToUse[actualCondition.field]?.value + const andFieldValue = actualCondition.and + ? stateToUse[actualCondition.and.field]?.value + : undefined + + // Check if the condition value is an array + const isValueMatch = Array.isArray(actualCondition.value) + ? fieldValue != null && + (actualCondition.not + ? !actualCondition.value.includes(fieldValue as string | number | boolean) + : actualCondition.value.includes(fieldValue as string | number | boolean)) + : actualCondition.not + ? fieldValue !== actualCondition.value + : fieldValue === actualCondition.value + + // Check both conditions if 'and' is present + const isAndValueMatch = + !actualCondition.and || + (Array.isArray(actualCondition.and.value) + ? andFieldValue != null && + (actualCondition.and.not + ? !actualCondition.and.value.includes(andFieldValue as string | number | boolean) + : actualCondition.and.value.includes(andFieldValue as string | number | boolean)) + : actualCondition.and.not + ? andFieldValue !== actualCondition.and.value + : andFieldValue === actualCondition.and.value) + + return isValueMatch && isAndValueMatch + }) + + visibleSubBlocks.forEach((block) => { + const blockWidth = block.layout === 'half' ? 0.5 : 1 + if (currentRowWidth + blockWidth > 1) { + if (currentRow.length > 0) { + rows.push([...currentRow]) + } + currentRow = [block] + currentRowWidth = blockWidth + } else { + currentRow.push(block) + currentRowWidth += blockWidth + } + }) + + if (currentRow.length > 0) { + rows.push(currentRow) + } + + return rows + }, [ + config.subBlocks, + id, + displayAdvancedMode, + displayTriggerMode, + data.isPreview, + data.subBlockValues, + currentWorkflow.isDiffMode, + currentBlock, + ]) + + // Name editing handlers + const handleNameClick = (e: React.MouseEvent) => { + e.stopPropagation() // Prevent drag handler from interfering + setEditedName(name) + setIsEditing(true) + } + + // Auto-focus the input when edit mode is activated + useEffect(() => { + if (isEditing && nameInputRef.current) { + nameInputRef.current.focus() + } + }, [isEditing]) + + // Handle node name change with validation + const handleNodeNameChange = (newName: string) => { + const validatedName = validateName(newName) + setEditedName(validatedName.slice(0, 18)) + } + + const handleNameSubmit = () => { + const trimmedName = editedName.trim().slice(0, 18) + if (trimmedName && trimmedName !== name) { + collaborativeUpdateBlockName(id, trimmedName) + } setIsEditing(false) } - } - // Check webhook indicator - const showWebhookIndicator = (isStarterBlock || isWebhookTriggerBlock) && blockWebhookStatus - - const getProviderName = (providerId: string): string => { - const providers: Record = { - whatsapp: 'WhatsApp', - github: 'GitHub', - discord: 'Discord', - stripe: 'Stripe', - generic: 'General', - slack: 'Slack', - airtable: 'Airtable', - gmail: 'Gmail', + const handleNameKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter') { + handleNameSubmit() + } else if (e.key === 'Escape') { + setIsEditing(false) + } } - return providers[providerId] || 'Webhook' - } - const shouldShowScheduleBadge = - type === 'schedule' && !isLoadingScheduleInfo && scheduleInfo !== null - const userPermissions = useUserPermissionsContext() - const registryDeploymentStatuses = useWorkflowRegistry((state) => state.deploymentStatuses) - const [childActiveVersion, setChildActiveVersion] = useState(null) - const [childIsDeployed, setChildIsDeployed] = useState(false) - const [isLoadingChildVersion, setIsLoadingChildVersion] = useState(false) + // Check webhook indicator + const showWebhookIndicator = (isStarterBlock || isWebhookTriggerBlock) && blockWebhookStatus - // Use the store directly for real-time updates when workflow dropdown changes - const [workflowIdFromStore] = useSubBlockValue(id, 'workflowId') - - // Determine if this is a workflow block (child workflow selector) and fetch child status - const isWorkflowSelector = type === 'workflow' || type === 'workflow_input' - let childWorkflowId: string | undefined - if (!data.isPreview) { - // Use store value for real-time updates - const val = workflowIdFromStore - if (typeof val === 'string' && val.trim().length > 0) { - childWorkflowId = val + const getProviderName = (providerId: string): string => { + const providers: Record = { + whatsapp: 'WhatsApp', + github: 'GitHub', + discord: 'Discord', + stripe: 'Stripe', + generic: 'General', + slack: 'Slack', + airtable: 'Airtable', + gmail: 'Gmail', + } + return providers[providerId] || 'Webhook' } - } else if (data.isPreview && data.subBlockValues?.workflowId?.value) { - const val = data.subBlockValues.workflowId.value - if (typeof val === 'string' && val.trim().length > 0) childWorkflowId = val - } - const childDeployment = childWorkflowId ? registryDeploymentStatuses[childWorkflowId] : null + const shouldShowScheduleBadge = + type === 'schedule' && !isLoadingScheduleInfo && scheduleInfo !== null + const userPermissions = useUserPermissionsContext() + const registryDeploymentStatuses = useWorkflowRegistry((state) => state.deploymentStatuses) + const [childActiveVersion, setChildActiveVersion] = useState(null) + const [childIsDeployed, setChildIsDeployed] = useState(false) + const [isLoadingChildVersion, setIsLoadingChildVersion] = useState(false) - // Fetch active deployment version for the selected child workflow - useEffect(() => { - let cancelled = false - const fetchActiveVersion = async (wfId: string) => { - try { - setIsLoadingChildVersion(true) - const res = await fetch(`/api/workflows/${wfId}/deployments`, { - cache: 'no-store', - headers: { 'Cache-Control': 'no-cache' }, - }) - if (!res.ok) { + // Use the store directly for real-time updates when workflow dropdown changes + const [workflowIdFromStore] = useSubBlockValue(id, 'workflowId') + + // Determine if this is a workflow block (child workflow selector) and fetch child status + const isWorkflowSelector = type === 'workflow' || type === 'workflow_input' + let childWorkflowId: string | undefined + if (!data.isPreview) { + // Use store value for real-time updates + const val = workflowIdFromStore + if (typeof val === 'string' && val.trim().length > 0) { + childWorkflowId = val + } + } else if (data.isPreview && data.subBlockValues?.workflowId?.value) { + const val = data.subBlockValues.workflowId.value + if (typeof val === 'string' && val.trim().length > 0) childWorkflowId = val + } + + const childDeployment = childWorkflowId ? registryDeploymentStatuses[childWorkflowId] : null + + // Fetch active deployment version for the selected child workflow + useEffect(() => { + let cancelled = false + const fetchActiveVersion = async (wfId: string) => { + try { + setIsLoadingChildVersion(true) + const res = await fetch(`/api/workflows/${wfId}/deployments`, { + cache: 'no-store', + headers: { 'Cache-Control': 'no-cache' }, + }) + if (!res.ok) { + if (!cancelled) { + setChildActiveVersion(null) + setChildIsDeployed(false) + } + return + } + const json = await res.json() + const versions = Array.isArray(json?.data?.versions) + ? json.data.versions + : Array.isArray(json?.versions) + ? json.versions + : [] + const active = versions.find((v: any) => v.isActive) + if (!cancelled) { + const v = active ? Number(active.version) : null + setChildActiveVersion(v) + setChildIsDeployed(v != null) + } + } catch { if (!cancelled) { setChildActiveVersion(null) setChildIsDeployed(false) } - return + } finally { + if (!cancelled) setIsLoadingChildVersion(false) } - const json = await res.json() - const versions = Array.isArray(json?.data?.versions) - ? json.data.versions - : Array.isArray(json?.versions) - ? json.versions - : [] - const active = versions.find((v: any) => v.isActive) - if (!cancelled) { - const v = active ? Number(active.version) : null - setChildActiveVersion(v) - setChildIsDeployed(v != null) - } - } catch { - if (!cancelled) { - setChildActiveVersion(null) - setChildIsDeployed(false) - } - } finally { - if (!cancelled) setIsLoadingChildVersion(false) } - } - // Always fetch when childWorkflowId changes - if (childWorkflowId) { - void fetchActiveVersion(childWorkflowId) - } else { - setChildActiveVersion(null) - setChildIsDeployed(false) - } - return () => { - cancelled = true - } - }, [childWorkflowId]) + // Always fetch when childWorkflowId changes + if (childWorkflowId) { + void fetchActiveVersion(childWorkflowId) + } else { + setChildActiveVersion(null) + setChildIsDeployed(false) + } + return () => { + cancelled = true + } + }, [childWorkflowId]) - return ( -
- - {/* Show debug indicator for pending blocks */} - {isPending && ( -
- Next Step -
- )} - - - {/* Connection Blocks - Don't show for trigger blocks, starter blocks, or blocks in trigger mode */} - {config.category !== 'triggers' && type !== 'starter' && !displayTriggerMode && ( - - )} - - {/* Input Handle - Don't show for trigger blocks, starter blocks, or blocks in trigger mode */} - {config.category !== 'triggers' && type !== 'starter' && !displayTriggerMode && ( - connection.source !== id} - /> - )} - - {/* Block Header */} -
+ 0 && 'border-b' + 'relative cursor-default select-none shadow-md', + 'transition-block-bg transition-ring', + displayIsWide ? 'w-[480px]' : 'w-[320px]', + !isEnabled && 'shadow-sm', + isActive && 'animate-pulse-ring ring-2 ring-blue-500', + isPending && 'ring-2 ring-amber-500', + // Diff highlighting + diffStatus === 'new' && 'bg-green-50/50 ring-2 ring-green-500 dark:bg-green-900/10', + diffStatus === 'edited' && + 'bg-orange-50/50 ring-2 ring-orange-500 dark:bg-orange-900/10', + // Deleted block highlighting (in original workflow) + isDeletedBlock && 'bg-red-50/50 ring-2 ring-red-500 dark:bg-red-900/10', + 'z-[20]' )} - onMouseDown={(e) => { - e.stopPropagation() - }} > -
-
- + {/* Show debug indicator for pending blocks */} + {isPending && ( +
+ Next Step
-
- {isEditing ? ( - handleNodeNameChange(e.target.value)} - onBlur={handleNameSubmit} - onKeyDown={handleNameKeyDown} - className='border-none bg-transparent p-0 font-medium text-md outline-none' - maxLength={18} - /> - ) : ( - - {name} - - )} -
-
-
- {isWorkflowSelector && childWorkflowId && ( - - -
-
-
- - - - {childIsDeployed - ? isLoadingChildVersion - ? 'Deployed' - : childActiveVersion != null - ? `Deployed (v${childActiveVersion})` - : 'Deployed' - : 'Not Deployed'} - - - - )} - {!isEnabled && ( - - Disabled - - )} - {/* Schedule indicator badge - displayed for starter blocks with active schedules */} - {shouldShowScheduleBadge && ( - - - reactivateSchedule(scheduleInfo.id!) - : () => disableSchedule(scheduleInfo.id!) - : undefined - } - > -
-
-
-
- {scheduleInfo?.isDisabled ? 'Disabled' : 'Scheduled'} - - - - {scheduleInfo?.isDisabled ? ( -

- This schedule is currently disabled. Click the badge to reactivate it. -

- ) : ( -

Click the badge to disable this schedule.

- )} - - - )} - {/* Webhook indicator badge - displayed for starter blocks with active webhooks */} - {showWebhookIndicator && ( - - - -
-
-
-
- Webhook - - - - {webhookInfo ? ( - <> -

{getProviderName(webhookInfo.provider)} Webhook

-

- Path: {webhookInfo.webhookPath} -

- - ) : ( -

- This workflow is triggered by a webhook. -

- )} - - - )} - {config.subBlocks.some((block) => block.mode) && ( - - - - - - {!userPermissions.canEdit && !currentWorkflow.isDiffMode - ? userPermissions.isOfflineMode - ? 'Connection lost - please refresh' - : 'Read-only mode' - : displayAdvancedMode - ? 'Switch to Basic Mode' - : 'Switch to Advanced Mode'} - - - )} - {/* Trigger Mode Button - Show for hybrid blocks that support triggers (not pure trigger blocks) */} - {config.triggers?.enabled && config.category !== 'triggers' && ( - - - - - - {!userPermissions.canEdit && !currentWorkflow.isDiffMode - ? userPermissions.isOfflineMode - ? 'Connection lost - please refresh' - : 'Read-only mode' - : displayTriggerMode - ? 'Switch to Action Mode' - : 'Switch to Trigger Mode'} - - - )} - {config.docsLink ? ( - - - - - See Docs - - ) : ( - config.longDescription && ( - - - - - -
-
-

Description

-

{config.longDescription}

-
- {config.outputs && Object.keys(config.outputs).length > 0 && ( -
-

Output

-
- {Object.entries(config.outputs).map(([key, value]) => ( -
- {key}{' '} - {typeof value === 'object' && value !== null && 'type' in value ? ( - // New format: { type: 'string', description: '...' } - {value.type} - ) : typeof value === 'object' && value !== null ? ( - // Legacy complex object format -
- {Object.entries(value).map(([typeKey, typeValue]) => ( -
- - {typeKey}: - - - {typeValue as string} - -
- ))} -
- ) : ( - // Old format: just a string - {value as string} - )} -
- ))} -
-
- )} -
- - - ) - )} - {subBlockRows.length > 0 && ( - - - - - - {!userPermissions.canEdit && !currentWorkflow.isDiffMode - ? userPermissions.isOfflineMode - ? 'Connection lost - please refresh' - : 'Read-only mode' - : displayIsWide - ? 'Narrow Block' - : 'Expand Block'} - - - )} -
-
+ )} - {/* Block Content - Only render if there are subblocks */} - {subBlockRows.length > 0 && ( -
{ - e.stopPropagation() - }} - > - {subBlockRows.map((row, rowIndex) => ( -
- {row.map((subBlock, blockIndex) => ( -
- -
- ))} -
- ))} -
- )} + + {/* Connection Blocks - Don't show for trigger blocks, starter blocks, or blocks in trigger mode */} + {config.category !== 'triggers' && type !== 'starter' && !displayTriggerMode && ( + + )} - {/* Output Handle */} - {type !== 'condition' && type !== 'response' && ( - <> + {/* Input Handle - Don't show for trigger blocks, starter blocks, or blocks in trigger mode */} + {config.category !== 'triggers' && type !== 'starter' && !displayTriggerMode && ( ) { : { left: '50%', transform: 'translateX(-50%)' }), }} data-nodeid={id} - data-handleid='source' - isConnectableStart={true} - isConnectableEnd={false} - isValidConnection={(connection) => connection.target !== id} + data-handleid='target' + isConnectableStart={false} + isConnectableEnd={true} + isValidConnection={(connection) => connection.source !== id} /> + )} - {/* Error Handle - Don't show for trigger blocks, starter blocks, or blocks in trigger mode */} - {config.category !== 'triggers' && type !== 'starter' && !displayTriggerMode && ( + {/* Block Header */} +
0 && 'border-b' + )} + onMouseDown={(e) => { + e.stopPropagation() + }} + > +
+
+ +
+
+ {isEditing ? ( + handleNodeNameChange(e.target.value)} + onBlur={handleNameSubmit} + onKeyDown={handleNameKeyDown} + className='border-none bg-transparent p-0 font-medium text-md outline-none' + maxLength={18} + /> + ) : ( + + {name} + + )} +
+
+
+ {isWorkflowSelector && childWorkflowId && ( + + +
+
+
+ + + + {childIsDeployed + ? isLoadingChildVersion + ? 'Deployed' + : childActiveVersion != null + ? `Deployed (v${childActiveVersion})` + : 'Deployed' + : 'Not Deployed'} + + + + )} + {!isEnabled && ( + + Disabled + + )} + {/* Schedule indicator badge - displayed for starter blocks with active schedules */} + {shouldShowScheduleBadge && ( + + + reactivateSchedule(scheduleInfo.id!) + : () => disableSchedule(scheduleInfo.id!) + : undefined + } + > +
+
+
+
+ {scheduleInfo?.isDisabled ? 'Disabled' : 'Scheduled'} + + + + {scheduleInfo?.isDisabled ? ( +

+ This schedule is currently disabled. Click the badge to reactivate it. +

+ ) : ( +

Click the badge to disable this schedule.

+ )} + + + )} + {/* Webhook indicator badge - displayed for starter blocks with active webhooks */} + {showWebhookIndicator && ( + + + +
+
+
+
+ Webhook + + + + {webhookInfo ? ( + <> +

{getProviderName(webhookInfo.provider)} Webhook

+

+ Path: {webhookInfo.webhookPath} +

+ + ) : ( +

+ This workflow is triggered by a webhook. +

+ )} + + + )} + {config.subBlocks.some((block) => block.mode) && ( + + + + + + {!userPermissions.canEdit && !currentWorkflow.isDiffMode + ? userPermissions.isOfflineMode + ? 'Connection lost - please refresh' + : 'Read-only mode' + : displayAdvancedMode + ? 'Switch to Basic Mode' + : 'Switch to Advanced Mode'} + + + )} + {/* Trigger Mode Button - Show for hybrid blocks that support triggers (not pure trigger blocks) */} + {config.triggers?.enabled && config.category !== 'triggers' && ( + + + + + + {!userPermissions.canEdit && !currentWorkflow.isDiffMode + ? userPermissions.isOfflineMode + ? 'Connection lost - please refresh' + : 'Read-only mode' + : displayTriggerMode + ? 'Switch to Action Mode' + : 'Switch to Trigger Mode'} + + + )} + {config.docsLink ? ( + + + + + See Docs + + ) : ( + config.longDescription && ( + + + + + +
+
+

Description

+

{config.longDescription}

+
+ {config.outputs && Object.keys(config.outputs).length > 0 && ( +
+

Output

+
+ {Object.entries(config.outputs).map(([key, value]) => ( +
+ {key}{' '} + {typeof value === 'object' && + value !== null && + 'type' in value ? ( + // New format: { type: 'string', description: '...' } + {value.type} + ) : typeof value === 'object' && value !== null ? ( + // Legacy complex object format +
+ {Object.entries(value).map(([typeKey, typeValue]) => ( +
+ + {typeKey}: + + + {typeValue as string} + +
+ ))} +
+ ) : ( + // Old format: just a string + {value as string} + )} +
+ ))} +
+
+ )} +
+ + + ) + )} + {subBlockRows.length > 0 && ( + + + + + + {!userPermissions.canEdit && !currentWorkflow.isDiffMode + ? userPermissions.isOfflineMode + ? 'Connection lost - please refresh' + : 'Read-only mode' + : displayIsWide + ? 'Narrow Block' + : 'Expand Block'} + + + )} +
+
+ + {/* Block Content - Only render if there are subblocks */} + {subBlockRows.length > 0 && ( +
{ + e.stopPropagation() + }} + > + {subBlockRows.map((row, rowIndex) => ( +
+ {row.map((subBlock, blockIndex) => ( +
+ +
+ ))} +
+ ))} +
+ )} + + {/* Output Handle */} + {type !== 'condition' && type !== 'response' && ( + <> connection.target !== id} /> - )} - - )} - -
- ) -} + + {/* Error Handle - Don't show for trigger blocks, starter blocks, or blocks in trigger mode */} + {config.category !== 'triggers' && type !== 'starter' && !displayTriggerMode && ( + connection.target !== id} + /> + )} + + )} + +
+ ) + }, + (prevProps, nextProps) => { + // Custom comparison function to prevent unnecessary re-renders + // Only re-render if these specific props change + // Return TRUE to skip re-render, FALSE to re-render + const shouldSkipRender = + prevProps.id === nextProps.id && + prevProps.data.type === nextProps.data.type && + prevProps.data.name === nextProps.data.name && + prevProps.data.isActive === nextProps.data.isActive && + prevProps.data.isPending === nextProps.data.isPending && + prevProps.data.isPreview === nextProps.data.isPreview && + prevProps.data.config === nextProps.data.config && + prevProps.data.subBlockValues === nextProps.data.subBlockValues && + prevProps.data.blockState === nextProps.data.blockState && + prevProps.selected === nextProps.selected && + prevProps.dragging === nextProps.dragging && + // Position changes should trigger re-render + prevProps.xPos === nextProps.xPos && + prevProps.yPos === nextProps.yPos + + return shouldSkipRender + } +) diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-current-workflow.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-current-workflow.ts index 2190aca88d..d3c386666a 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-current-workflow.ts +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/hooks/use-current-workflow.ts @@ -1,5 +1,6 @@ import { useMemo } from 'react' import type { Edge } from 'reactflow' +import { shallow } from 'zustand/shallow' import { useWorkflowDiffStore } from '@/stores/workflow-diff/store' import type { DeploymentStatus } from '@/stores/workflows/registry/types' import { useWorkflowStore } from '@/stores/workflows/workflow/store' @@ -40,13 +41,27 @@ export interface CurrentWorkflow { * Automatically handles diff vs normal mode without exposing the complexity to consumers. */ export function useCurrentWorkflow(): CurrentWorkflow { - // Get normal workflow state - const normalWorkflow = useWorkflowStore((state) => state.getWorkflowState()) + // Get normal workflow state - optimized with shallow comparison + // This prevents re-renders when only subblock values change (not block structure) + const normalWorkflow = useWorkflowStore((state) => { + const workflow = state.getWorkflowState() + return { + blocks: workflow.blocks, + edges: workflow.edges, + loops: workflow.loops, + parallels: workflow.parallels, + lastSaved: workflow.lastSaved, + isDeployed: workflow.isDeployed, + deployedAt: workflow.deployedAt, + deploymentStatuses: workflow.deploymentStatuses, + needsRedeployment: workflow.needsRedeployment, + } + }, shallow) // Get diff state - now including isDiffReady const { isShowingDiff, isDiffReady, diffWorkflow } = useWorkflowDiffStore() - // Create the abstracted interface + // Create the abstracted interface - optimized to prevent unnecessary re-renders const currentWorkflow = useMemo((): CurrentWorkflow => { // Determine which workflow to use - only use diff if it's ready const hasDiffBlocks = @@ -56,8 +71,8 @@ export function useCurrentWorkflow(): CurrentWorkflow { return { // Current workflow state - blocks: activeWorkflow.blocks, - edges: activeWorkflow.edges, + blocks: activeWorkflow.blocks || {}, + edges: activeWorkflow.edges || [], loops: activeWorkflow.loops || {}, parallels: activeWorkflow.parallels || {}, lastSaved: activeWorkflow.lastSaved, @@ -71,14 +86,14 @@ export function useCurrentWorkflow(): CurrentWorkflow { isNormalMode: !shouldUseDiff, // Full workflow state (for cases that need the complete object) - workflowState: activeWorkflow, + workflowState: activeWorkflow as WorkflowState, // Helper methods - getBlockById: (blockId: string) => activeWorkflow.blocks[blockId], - getBlockCount: () => Object.keys(activeWorkflow.blocks).length, - getEdgeCount: () => activeWorkflow.edges.length, - hasBlocks: () => Object.keys(activeWorkflow.blocks).length > 0, - hasEdges: () => activeWorkflow.edges.length > 0, + getBlockById: (blockId: string) => activeWorkflow.blocks?.[blockId], + getBlockCount: () => Object.keys(activeWorkflow.blocks || {}).length, + getEdgeCount: () => (activeWorkflow.edges || []).length, + hasBlocks: () => Object.keys(activeWorkflow.blocks || {}).length > 0, + hasEdges: () => (activeWorkflow.edges || []).length > 0, } }, [normalWorkflow, isShowingDiff, isDiffReady, diffWorkflow]) diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx index c2074c8684..3486b0732e 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx @@ -1,6 +1,6 @@ 'use client' -import React, { useCallback, useEffect, useMemo, useState } from 'react' +import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { useParams, useRouter } from 'next/navigation' import ReactFlow, { Background, @@ -52,7 +52,7 @@ import { useWorkflowStore } from '@/stores/workflows/workflow/store' const logger = createLogger('Workflow') -// Define custom node and edge types +// Define custom node and edge types - memoized outside component to prevent re-creation const nodeTypes: NodeTypes = { workflowBlock: WorkflowBlock, subflowNode: SubflowNodeComponent, @@ -62,6 +62,15 @@ const edgeTypes: EdgeTypes = { workflowEdge: WorkflowEdge, // Keep for backward compatibility } +// Memoized ReactFlow props to prevent unnecessary re-renders +const defaultEdgeOptions = { type: 'custom' } +const connectionLineStyle = { + stroke: '#94a3b8', + strokeWidth: 2, + strokeDasharray: '5,5', +} +const snapGrid: [number, number] = [20, 20] + interface SelectedEdgeInfo { id: string parentLoopId?: string @@ -1188,14 +1197,46 @@ const WorkflowContent = React.memo(() => { validateAndNavigate() }, [params.workflowId, workflows, isLoading, workspaceId, router]) + // Cache block configs to prevent unnecessary re-fetches + const blockConfigCache = useRef>(new Map()) + const getBlockConfig = useCallback((type: string) => { + if (!blockConfigCache.current.has(type)) { + blockConfigCache.current.set(type, getBlock(type)) + } + return blockConfigCache.current.get(type) + }, []) + + // Track previous blocks hash to prevent unnecessary recalculations + const prevBlocksHashRef = useRef('') + const prevBlocksRef = useRef(blocks) + + // Create a stable hash of block properties that affect node rendering + // This prevents nodes from recreating when only subblock values change + const blocksHash = useMemo(() => { + // Only recalculate hash if blocks reference actually changed + if (prevBlocksRef.current === blocks) { + return prevBlocksHashRef.current + } + + prevBlocksRef.current = blocks + const hash = Object.values(blocks) + .map( + (b) => + `${b.id}:${b.type}:${b.name}:${b.position.x.toFixed(0)}:${b.position.y.toFixed(0)}:${b.isWide}:${b.height}:${b.data?.parentId || ''}` + ) + .join('|') + + prevBlocksHashRef.current = hash + return hash + }, [blocks]) + // Transform blocks and loops into ReactFlow nodes const nodes = useMemo(() => { const nodeArray: any[] = [] // Add block nodes Object.entries(blocks).forEach(([blockId, block]) => { - if (!block.type || !block.name) { - logger.warn(`Skipping invalid block: ${blockId}`, { block }) + if (!block || !block.type || !block.name) { return } @@ -1220,7 +1261,7 @@ const WorkflowContent = React.memo(() => { return } - const blockConfig = getBlock(block.type) + const blockConfig = getBlockConfig(block.type) if (!blockConfig) { logger.error(`No configuration found for block type: ${block.type}`, { block, @@ -1233,6 +1274,7 @@ const WorkflowContent = React.memo(() => { const isActive = activeBlockIds.has(block.id) const isPending = isDebugModeEnabled && pendingBlocks.includes(block.id) + // Create stable node object - React Flow will handle shallow comparison nodeArray.push({ id: block.id, type: 'workflowBlock', @@ -1242,7 +1284,7 @@ const WorkflowContent = React.memo(() => { extent: block.data?.extent || undefined, data: { type: block.type, - config: blockConfig, + config: blockConfig, // Cached config reference name: block.name, isActive, isPending, @@ -1250,11 +1292,21 @@ const WorkflowContent = React.memo(() => { // Include dynamic dimensions for container resizing calculations width: block.isWide ? 450 : 350, // Standard width based on isWide state height: Math.max(block.height || 100, 100), // Use actual height with minimum + // Explicitly set measured to prevent ReactFlow from recalculating + measured: { width: block.isWide ? 450 : 350, height: Math.max(block.height || 100, 100) }, }) }) return nodeArray - }, [blocks, activeBlockIds, pendingBlocks, isDebugModeEnabled, nestedSubflowErrors]) + }, [ + blocksHash, + blocks, + activeBlockIds, + pendingBlocks, + isDebugModeEnabled, + nestedSubflowErrors, + getBlockConfig, + ]) // Update nodes - use store version to avoid collaborative feedback loops const onNodesChange = useCallback( @@ -1919,13 +1971,9 @@ const WorkflowContent = React.memo(() => { minZoom={0.1} maxZoom={1.3} panOnScroll - defaultEdgeOptions={{ type: 'custom' }} + defaultEdgeOptions={defaultEdgeOptions} proOptions={{ hideAttribution: true }} - connectionLineStyle={{ - stroke: '#94a3b8', - strokeWidth: 2, - strokeDasharray: '5,5', - }} + connectionLineStyle={connectionLineStyle} connectionLineType={ConnectionLineType.SmoothStep} onNodeClick={(e, _node) => { e.stopPropagation() @@ -1945,8 +1993,11 @@ const WorkflowContent = React.memo(() => { onNodeDragStop={effectivePermissions.canEdit ? onNodeDragStop : undefined} onNodeDragStart={effectivePermissions.canEdit ? onNodeDragStart : undefined} snapToGrid={false} - snapGrid={[20, 20]} + snapGrid={snapGrid} elevateEdgesOnSelect={true} + // Performance optimizations + onlyRenderVisibleElements={true} + deleteKeyCode={null} elevateNodesOnSelect={true} autoPanOnConnect={effectivePermissions.canEdit} autoPanOnNodeDrag={effectivePermissions.canEdit} diff --git a/apps/sim/stores/copilot/store.ts b/apps/sim/stores/copilot/store.ts index d1e2c6fcb9..c39d9316fa 100644 --- a/apps/sim/stores/copilot/store.ts +++ b/apps/sim/stores/copilot/store.ts @@ -1166,6 +1166,25 @@ const sseHandlers: Record = { context.currentTextBlock = null updateStreamingMessage(set, context) }, + context_usage: (data, _context, _get, set) => { + try { + const usageData = data?.data + if (usageData) { + set({ + contextUsage: { + usage: usageData.usage || 0, + percentage: usageData.percentage || 0, + model: usageData.model || '', + contextWindow: usageData.context_window || usageData.contextWindow || 0, + when: usageData.when || 'start', + estimatedTokens: usageData.estimated_tokens || usageData.estimatedTokens, + }, + }) + } + } catch (err) { + logger.warn('Failed to handle context_usage event:', err) + } + }, default: () => {}, } @@ -1304,6 +1323,7 @@ const initialState = { showPlanTodos: false, toolCallsById: {} as Record, suppressAutoSelect: false, + contextUsage: null, } export const useCopilotStore = create()( @@ -1314,7 +1334,7 @@ export const useCopilotStore = create()( setMode: (mode) => set({ mode }), // Clear messages - clearMessages: () => set({ messages: [] }), + clearMessages: () => set({ messages: [], contextUsage: null }), // Workflow selection setWorkflowId: async (workflowId: string | null) => { @@ -1374,6 +1394,7 @@ export const useCopilotStore = create()( planTodos: [], showPlanTodos: false, suppressAutoSelect: false, + contextUsage: null, }) // Background-save the previous chat's latest messages before switching (optimistic) @@ -1442,6 +1463,7 @@ export const useCopilotStore = create()( planTodos: [], showPlanTodos: false, suppressAutoSelect: true, + contextUsage: null, }) }, @@ -2041,6 +2063,7 @@ export const useCopilotStore = create()( for await (const data of parseSSEStream(reader, decoder)) { const { abortController } = get() if (abortController?.signal.aborted) break + const handler = sseHandlers[data.type] || sseHandlers.default await handler(data, context, get, set) if (context.streamComplete) break diff --git a/apps/sim/stores/copilot/types.ts b/apps/sim/stores/copilot/types.ts index a1410bd4b0..48ee024bae 100644 --- a/apps/sim/stores/copilot/types.ts +++ b/apps/sim/stores/copilot/types.ts @@ -124,6 +124,16 @@ export interface CopilotState { currentUserMessageId?: string | null // Per-message metadata captured at send-time for reliable stats + + // Context usage tracking for percentage pill + contextUsage: { + usage: number + percentage: number + model: string + contextWindow: number + when: 'start' | 'end' + estimatedTokens?: number + } | null } export interface CopilotActions {