From 8fcb0349d2b1faf89b70ea2369cc79acd344f5e8 Mon Sep 17 00:00:00 2001 From: Siddharth Ganesan Date: Thu, 8 Jan 2026 15:10:17 -0800 Subject: [PATCH] Fix rendering of edit subblocks --- .../components/tool-call/tool-call.tsx | 103 +++++++++--------- .../workflow-block/workflow-block.tsx | 3 +- 2 files changed, 55 insertions(+), 51 deletions(-) diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx index a5416440fb..505fbacab9 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx @@ -8,6 +8,7 @@ import { ClientToolCallState } from '@/lib/copilot/tools/client/base-tool' import { getClientTool } from '@/lib/copilot/tools/client/manager' import { getRegisteredTools } from '@/lib/copilot/tools/client/registry' import CopilotMarkdownRenderer from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/markdown-renderer' +import { getDisplayValue } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block' import { getBlock } from '@/blocks/registry' import { CLASS_TOOL_METADATA, useCopilotStore } from '@/stores/panel/copilot/store' import type { CopilotToolCall, SubAgentContentBlock } from '@/stores/panel/copilot/types' @@ -954,7 +955,9 @@ function WorkflowEditSummary({ toolCall }: { toolCall: CopilotToolCall }) { // Group operations by type with block info interface SubBlockPreview { id: string + title: string value: any + isPassword?: boolean } interface BlockChange { @@ -1014,14 +1017,42 @@ function WorkflowEditSummary({ toolCall }: { toolCall: CopilotToolCall }) { const change: BlockChange = { blockId, blockName, blockType } - // Extract subblock info from operation params + // Extract subblock info from operation params, ordered by block config if (op.params?.inputs && typeof op.params.inputs === 'object') { + const inputs = op.params.inputs as Record + const blockConfig = getBlock(blockType) + + // Filter visible subblocks from config (same logic as canvas) + const visibleSubBlocks = + blockConfig?.subBlocks?.filter((sb) => { + // Skip hidden subblocks + if (sb.hidden) return false + if (sb.hideFromPreview) return false + // Skip advanced mode subblocks (not visible by default) + if (sb.mode === 'advanced') return false + // Skip trigger mode subblocks + if (sb.mode === 'trigger') return false + return true + }) ?? [] + + // Build subBlocks array respecting config order const subBlocks: SubBlockPreview[] = [] - for (const [id, value] of Object.entries(op.params.inputs)) { - // Skip empty values and connections - if (value === null || value === undefined || value === '') continue - subBlocks.push({ id, value }) + + // Add subblocks that are visible in config, in config order + for (const subBlockConfig of visibleSubBlocks) { + if (subBlockConfig.id in inputs) { + const value = inputs[subBlockConfig.id] + // Skip empty values and connections + if (value === null || value === undefined || value === '') continue + subBlocks.push({ + id: subBlockConfig.id, + title: subBlockConfig.title ?? subBlockConfig.id, + value, + isPassword: subBlockConfig.password === true, + }) + } } + if (subBlocks.length > 0) { if (op.operation_type === 'add') { change.subBlocks = subBlocks @@ -1055,38 +1086,6 @@ function WorkflowEditSummary({ toolCall }: { toolCall: CopilotToolCall }) { return getBlock(blockType) } - // Format subblock value for display - const formatSubBlockValue = (value: any): string => { - if (value === null || value === undefined) return '' - if (typeof value === 'string') { - // Truncate long strings - return value.length > 60 ? `${value.slice(0, 60)}...` : value - } - if (typeof value === 'boolean') return value ? 'true' : 'false' - if (typeof value === 'number') return String(value) - if (Array.isArray(value)) { - if (value.length === 0) return '[]' - return `[${value.length} items]` - } - if (typeof value === 'object') { - const keys = Object.keys(value) - if (keys.length === 0) return '{}' - return `{${keys.length} fields}` - } - return String(value) - } - - // Format subblock ID to readable label - const formatSubBlockLabel = (id: string): string => { - return id - .replace(/([A-Z])/g, ' $1') - .replace(/[_-]/g, ' ') - .trim() - .split(' ') - .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()) - .join(' ') - } - // Render a single block item with action icon and details const renderBlockItem = (change: BlockChange, type: 'add' | 'edit' | 'delete') => { const blockConfig = getBlockConfig(change.blockType) @@ -1128,21 +1127,25 @@ function WorkflowEditSummary({ toolCall }: { toolCall: CopilotToolCall }) { {symbol} - {/* Subblock details */} + {/* Subblock details - uses same title and value formatting as canvas */} {subBlocksToShow && subBlocksToShow.length > 0 && (
- {subBlocksToShow.map((sb) => ( -
- - {formatSubBlockLabel(sb.id)}: - - - {formatSubBlockValue(sb.value)} - -
- ))} + {subBlocksToShow.map((sb) => { + // Mask password fields like the canvas does + const displayValue = sb.isPassword ? '•••' : getDisplayValue(sb.value) + return ( +
+ + {sb.title}: + + + {displayValue} + +
+ ) + })}
)} 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 efa8ddb2d9..3347f12815 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 @@ -199,8 +199,9 @@ const tryParseJson = (value: unknown): unknown => { /** * Formats a subblock value for display, intelligently handling nested objects and arrays. + * Used by both the canvas workflow blocks and copilot edit summaries. */ -const getDisplayValue = (value: unknown): string => { +export const getDisplayValue = (value: unknown): string => { if (value == null || value === '') return '-' // Try parsing JSON strings first