Complete chat layout
User Message
User Message
Multiple user messages
User Media
Suggestions
User Message Do’s and Don’ts
Agent Message
Agent message represents responses from the Agent. Unlike user messages, agent messages are fluid in their content and layout.Markdown Text
Rich Markdown Agent Message
Example of using many markdown types in one Agent Message. For illustrative purposes of features, this should not be considered a high quality agent message. Agent messages are primarily built on top of markdown text. The majority of markdown features are supported. See the Markdown component page for each feature in action.Action Log
Media Card
Media cards represent an asset within the chat layout. Differences between media representation between agent and user messages:- Agent media cards can be ordered anywhere in the agent message. User message media is fixed to above the message content.
- Agent media cards stretch to the width of the agent message.
Artifact Card
Artifact cards represent an asset within the chat layout. When selected, content should display in the artifact panel.Guidance Card
Toolbar
Agent Thinking
Agent Thinking represents the visual representation of where the agent is currently thinking. There is exactly one Agent Thinking in the chat layout.Examples of Agent Thinking location in action
Just after a user message, Agent Thinking acts as a loading state. As text streams in, Agent Thinking sits below the incoming text. Its label is typically omitted during streaming. After an agent message finishes, Agent Thinking sits below the toolbar.Agent Message Do’s and Don’ts
- Do: Maintain a consistent location of the Agent Toolbar. Outside of Agent Thinking, this is always at the bottom of the agent message.
- Do: Show the Agent Toolbar only after the agent message is finished.
- Do: Use loading mechanisms when possible to indicate the agent is processing the message.
- Do: Arrange the layout of Agent Message content to produce a clear and readable message. Unlike user messages, agent messages are fluid in order for most parts of the message.
- Don’t: Use multiple Agent Thinkings in the chat layout.
Related Components
- Prompt Bar — Accepts free-form user input
- User Message — Presents user-authored content
- Agent Message — Presents agent-authored content and feedback actions
- Media — Presents user- or agent-authored attachments
- Artifact Card — Opens generated content
- Suggestions — Offers concise follow-up actions
- Agent Prompt — Requests a structured answer
- Guidance Card — Presents proposed changes for review
Related Patterns
- Agentic Experience Shell — Composes the chat layout with supporting content