Trace message¶

Usage¶

Use trace messages to make multi-step AI activity transparent without exposing every internal event. Show one message for each user-relevant step or phase and arrange related messages in execution order.

• Use a concise label that describes the activity.
• Set state to running, completed, or failed to communicate its current status.
• Set icon to customize the completed activity marker. It defaults to element-record-filled.
• Project optional details such as Markdown, metadata, or tool output into the component. Users can expand and collapse this content from the trace header.
• Use expanded to control the initial disclosure state or to synchronize it with application state.

Avoid using trace messages for low-level implementation details that do not help users understand the AI's progress or result.

Code¶

<si-trace-message label="Searched the knowledge base" state="completed" icon="element-search">
  <p>Found 12 relevant documents in the product knowledge base.</p>
</si-trace-message>

SiTraceMessageComponent API Documentation¶

Displays a meaningful step or phase in an AI activity trace.

The marker communicates whether the activity is running, completed, or failed. The message can be expanded to reveal additional projected content such as markdown, metadata, or tool output.

Input Properties¶

Name	Type	Default	Description
expanded ¶	boolean	false	Whether the trace details are expanded.
icon ¶	string	'element-record-filled'	Icon displayed for the activity when it is completed.
label ¶	TranslatableString		Label describing the activity.
state ¶	TraceMessageState	'completed'	Current execution state of the activity.

Output Properties¶

Types Documentation¶