Skip to content

Commit 225ca42

Browse files
Sg312Sg312
committed
Overlays
1 parent dd04498 commit 225ca42

File tree

1 file changed

+126
-32
lines changed
  • apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call

1 file changed

+126
-32
lines changed

‎apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx‎

Lines changed: 126 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -240,42 +240,136 @@ function SubAgentToolCall({ toolCall }: { toolCall: CopilotToolCall }) {
240240
toolCall.state === ClientToolCallState.executing
241241

242242
const showButtons = shouldShowRunSkipButtons(toolCall)
243+
const isSpecial = isSpecialToolCall(toolCall)
244+
245+
// Get params for table rendering
246+
const params = (toolCall as any).parameters || (toolCall as any).input || (toolCall as any).params || {}
247+
248+
// Render table for tools that support it
249+
const renderSubAgentTable = () => {
250+
if (toolCall.name === 'set_environment_variables') {
251+
const variables = params.variables || params.env_vars || {}
252+
const entries = Array.isArray(variables)
253+
? variables.map((v: any, i: number) => [v.name || `var_${i}`, v.value || ''])
254+
: Object.entries(variables).map(([key, val]) => {
255+
if (typeof val === 'object' && val !== null && 'value' in (val as any)) {
256+
return [key, (val as any).value]
257+
}
258+
return [key, val]
259+
})
260+
if (entries.length === 0) return null
261+
return (
262+
<div className='mt-1.5 w-full overflow-hidden rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-1)]'>
263+
<table className='w-full table-fixed bg-transparent'>
264+
<thead className='bg-transparent'>
265+
<tr className='border-[var(--border-1)] border-b bg-transparent'>
266+
<th className='w-[36%] border-[var(--border-1)] border-r bg-transparent px-[10px] py-[5px] text-left font-medium text-[12px] text-[var(--text-tertiary)]'>Variable</th>
267+
<th className='w-[64%] bg-transparent px-[10px] py-[5px] text-left font-medium text-[12px] text-[var(--text-tertiary)]'>Value</th>
268+
</tr>
269+
</thead>
270+
<tbody className='bg-transparent'>
271+
{entries.map((entry) => {
272+
const [key, value] = entry as [string, any]
273+
return (
274+
<tr key={key} className='border-[var(--border-1)] border-t bg-transparent'>
275+
<td className='w-[36%] border-[var(--border-1)] border-r bg-transparent px-[10px] py-[6px]'>
276+
<span className='truncate font-medium text-[var(--text-primary)] text-xs'>{key}</span>
277+
</td>
278+
<td className='w-[64%] bg-transparent px-[10px] py-[6px]'>
279+
<span className='font-mono text-[var(--text-muted)] text-xs'>{String(value)}</span>
280+
</td>
281+
</tr>
282+
)
283+
})}
284+
</tbody>
285+
</table>
286+
</div>
287+
)
288+
}
289+
290+
if (toolCall.name === 'set_global_workflow_variables') {
291+
const ops = Array.isArray(params.operations) ? (params.operations as any[]) : []
292+
if (ops.length === 0) return null
293+
return (
294+
<div className='mt-1.5 w-full overflow-hidden rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-1)]'>
295+
<div className='grid grid-cols-3 gap-0 border-[var(--border-1)] border-b bg-[var(--surface-4)] py-1.5'>
296+
<div className='self-start px-2 font-medium font-season text-[10px] text-[var(--text-secondary)] uppercase tracking-wide'>Name</div>
297+
<div className='self-start px-2 font-medium font-season text-[10px] text-[var(--text-secondary)] uppercase tracking-wide'>Type</div>
298+
<div className='self-start px-2 font-medium font-season text-[10px] text-[var(--text-secondary)] uppercase tracking-wide'>Value</div>
299+
</div>
300+
<div className='divide-y divide-[var(--border-1)]'>
301+
{ops.map((op, idx) => (
302+
<div key={idx} className='grid grid-cols-3 gap-0 py-1.5'>
303+
<div className='min-w-0 self-start px-2'>
304+
<span className='font-season text-[var(--text-primary)] text-xs'>{String(op.name || '')}</span>
305+
</div>
306+
<div className='self-start px-2'>
307+
<span className='rounded border border-[var(--border-1)] px-1 py-0.5 font-[470] font-season text-[10px] text-[var(--text-primary)]'>{String(op.type || '')}</span>
308+
</div>
309+
<div className='min-w-0 self-start px-2'>
310+
<span className='font-[470] font-mono text-[var(--text-muted)] text-xs'>{op.value !== undefined ? String(op.value) : '—'}</span>
311+
</div>
312+
</div>
313+
))}
314+
</div>
315+
</div>
316+
)
317+
}
318+
319+
if (toolCall.name === 'run_workflow') {
320+
let inputs = params.input || params.inputs || params.workflow_input
321+
if (typeof inputs === 'string') {
322+
try { inputs = JSON.parse(inputs) } catch { inputs = {} }
323+
}
324+
if (params.workflow_input && typeof params.workflow_input === 'object') {
325+
inputs = params.workflow_input
326+
}
327+
if (!inputs || typeof inputs !== 'object') {
328+
const { workflowId, workflow_input, ...rest } = params
329+
inputs = rest
330+
}
331+
const safeInputs = inputs && typeof inputs === 'object' ? inputs : {}
332+
const inputEntries = Object.entries(safeInputs)
333+
if (inputEntries.length === 0) return null
334+
return (
335+
<div className='mt-1.5 w-full overflow-hidden rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-1)]'>
336+
<table className='w-full table-fixed bg-transparent'>
337+
<thead className='bg-transparent'>
338+
<tr className='border-[var(--border-1)] border-b bg-transparent'>
339+
<th className='w-[36%] border-[var(--border-1)] border-r bg-transparent px-[10px] py-[5px] text-left font-medium text-[12px] text-[var(--text-tertiary)]'>Input</th>
340+
<th className='w-[64%] bg-transparent px-[10px] py-[5px] text-left font-medium text-[12px] text-[var(--text-tertiary)]'>Value</th>
341+
</tr>
342+
</thead>
343+
<tbody className='bg-transparent'>
344+
{inputEntries.map(([key, value]) => (
345+
<tr key={key} className='border-[var(--border-1)] border-t bg-transparent'>
346+
<td className='w-[36%] border-[var(--border-1)] border-r bg-transparent px-[10px] py-[6px]'>
347+
<span className='truncate font-medium text-[var(--text-primary)] text-xs'>{key}</span>
348+
</td>
349+
<td className='w-[64%] bg-transparent px-[10px] py-[6px]'>
350+
<span className='font-mono text-[var(--text-muted)] text-xs'>{String(value)}</span>
351+
</td>
352+
</tr>
353+
))}
354+
</tbody>
355+
</table>
356+
</div>
357+
)
358+
}
359+
360+
return null
361+
}
243362

244363
return (
245364
<div className='py-0.5'>
246-
<span className='relative inline-block font-[470] font-season text-[12px] text-[var(--text-tertiary)]'>
247-
{displayName}
248-
{isLoading && !showButtons && (
249-
<span
250-
aria-hidden='true'
251-
className='pointer-events-none absolute inset-0 select-none overflow-hidden'
252-
>
253-
<span
254-
className='block text-transparent'
255-
style={{
256-
backgroundImage:
257-
'linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0) 100%)',
258-
backgroundSize: '200% 100%',
259-
backgroundRepeat: 'no-repeat',
260-
WebkitBackgroundClip: 'text',
261-
backgroundClip: 'text',
262-
animation: 'subagent-shimmer 1.4s ease-in-out infinite',
263-
mixBlendMode: 'screen',
264-
}}
265-
>
266-
{displayName}
267-
</span>
268-
</span>
269-
)}
270-
</span>
365+
<ShimmerOverlayText
366+
text={displayName}
367+
active={isLoading && !showButtons}
368+
isSpecial={isSpecial}
369+
className='font-[470] font-season text-[12px] text-[var(--text-tertiary)]'
370+
/>
371+
{renderSubAgentTable()}
271372
{showButtons && <RunSkipButtons toolCall={toolCall} />}
272-
<style>{`
273-
@keyframes subagent-shimmer {
274-
0% { background-position: 150% 0; }
275-
50% { background-position: 0% 0; }
276-
100% { background-position: -150% 0; }
277-
}
278-
`}</style>
279373
</div>
280374
)
281375
}

0 commit comments

Comments
 (0)