diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css index c260032460..a177876575 100644 --- a/apps/sim/app/_styles/globals.css +++ b/apps/sim/app/_styles/globals.css @@ -11,7 +11,7 @@ */ :root { --sidebar-width: 232px; /* SIDEBAR_WIDTH.DEFAULT */ - --panel-width: 290px; /* PANEL_WIDTH.DEFAULT */ + --panel-width: 320px; /* PANEL_WIDTH.DEFAULT */ --toolbar-triggers-height: 300px; /* TOOLBAR_TRIGGERS_HEIGHT.DEFAULT */ --editor-connections-height: 172px; /* EDITOR_CONNECTIONS_HEIGHT.DEFAULT */ --terminal-height: 155px; /* TERMINAL_HEIGHT.DEFAULT */ @@ -77,24 +77,6 @@ cursor: grabbing !important; } -/** - * Selected node ring indicator - * Uses a pseudo-element overlay to match the original behavior (absolute inset-0 z-40) - */ -.react-flow__node.selected > div > div { - position: relative; -} - -.react-flow__node.selected > div > div::after { - content: ""; - position: absolute; - inset: 0; - z-index: 40; - border-radius: 8px; - box-shadow: 0 0 0 1.75px var(--brand-secondary); - pointer-events: none; -} - /** * Color tokens - single source of truth for all colors * Light mode: Warm theme @@ -576,32 +558,6 @@ input[type="search"]::-ms-clear { transition-duration: 300ms; } - .streaming-effect { - @apply relative overflow-hidden; - } - - .streaming-effect::after { - content: ""; - @apply pointer-events-none absolute left-0 top-0 h-full w-full; - background: linear-gradient( - 90deg, - rgba(128, 128, 128, 0) 0%, - rgba(128, 128, 128, 0.1) 50%, - rgba(128, 128, 128, 0) 100% - ); - animation: code-shimmer 1.5s infinite; - z-index: 10; - } - - .dark .streaming-effect::after { - background: linear-gradient( - 90deg, - rgba(180, 180, 180, 0) 0%, - rgba(180, 180, 180, 0.1) 50%, - rgba(180, 180, 180, 0) 100% - ); - } - .loading-placeholder::placeholder { animation: placeholder-pulse 1.5s ease-in-out infinite; } diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx index 38d94b92bd..f778c9c4aa 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx @@ -336,6 +336,10 @@ export function Code({ setCode('') } + handleStreamChunkRef.current = (chunk: string) => { + setCode((prev) => prev + chunk) + } + handleGeneratedContentRef.current = (generatedCode: string) => { setCode(generatedCode) if (!isPreview && !disabled) { @@ -691,11 +695,7 @@ export function Code({ /> )} - e.preventDefault()} - onDrop={handleDrop} - isStreaming={isAiStreaming} - > + e.preventDefault()} onDrop={handleDrop}>
{wandConfig?.enabled && !isAiStreaming && @@ -761,6 +761,11 @@ export function Code({ }} onFocus={() => { hasEditedSinceFocusRef.current = false + // Show tag dropdown on focus when code is empty + if (!isPreview && !disabled && !readOnly && code.trim() === '') { + setShowTags(true) + setCursorPosition(0) + } }} highlight={createHighlightFunction(effectiveLanguage, shouldHighlightReference)} {...getCodeEditorProps({ isStreaming: isAiStreaming, isPreview, disabled })} diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx index 27232889b6..b37e6ecba1 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx @@ -115,6 +115,7 @@ export function ConditionInput({ const accessiblePrefixes = useAccessibleReferencePrefixes(blockId) const containerRef = useRef(null) + const inputRefs = useRef>(new Map()) /** * Determines if a reference string should be highlighted in the editor. @@ -728,6 +729,20 @@ export function ConditionInput({ }) }, [conditionalBlocks.length]) + // Capture textarea refs from Editor components (condition mode) + useEffect(() => { + if (!isRouterMode && containerRef.current) { + conditionalBlocks.forEach((block) => { + const textarea = containerRef.current?.querySelector( + `[data-block-id="${block.id}"] textarea` + ) as HTMLTextAreaElement | null + if (textarea) { + inputRefs.current.set(block.id, textarea) + } + }) + } + }, [conditionalBlocks, isRouterMode]) + // Show loading or empty state if not ready or no blocks if (!isReady || conditionalBlocks.length === 0) { return ( @@ -842,6 +857,9 @@ export function ConditionInput({ onDrop={(e) => handleDrop(block.id, e)} >