# AgentMessageList

Source: https://lumeo.nativ.sh/components/agent-message-list

# AgentMessageList

Auto-scrolling chat-style message list for AI agent conversations. Distinguishes user, assistant, and tool turns.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## Usage

@using Lumeo

<AgentMessageList />

## When to Use

-   Rendering an LLM conversation where user, assistant, and tool messages need distinct styling.
-   Streaming multi-turn responses — `AutoScroll` sticks to the bottom as new tokens arrive.
-   Composing with `<StreamingText>`, `<ToolCallCard>`, and `<ReasoningDisplay>` for a full agent UI.

Preview Code

Live Chat Transcript

Session started 14:59

14:57You

Summarise the quarterly revenue numbers for EMEA and tell me which region grew fastest.

Lumeo Copilot14:57

Reasoned for 2.4s

User wants EMEA revenue breakdown. I should call the sales tool to pull Q1–Q4 numbers, then compute growth per sub-region. DACH looked strong last quarter.

query\_sales\_db success842ms

Input

```
{
  "region": "EMEA",
  "period": "2026-Q1"
}
```

Output

```
{
  "DACH": 12_400_000,
  "UK": 9_800_000,
  "Nordics": 4_200_000,
  "Iberia": 3_100_000
}
```

Lumeo Copilot

The fastest grower was DACH at +18% YoY, driven mainly by…

0 / 2000

Preview Code

Role Switcher — interactive

User Assistant System Tool

Copilot

This is a **Assistant** message. Its bubble style, alignment, and label adapt to the selected role.

Pick a role to see how a single AgentMessage renders for each turn type.

Preview Code

Roles at a Glance

System-level notice — session info, warnings, or injected context.

Alice

A user turn — right-aligned bubble with name.

Assistant

An assistant turn — left-aligned with optional streaming caret.

example\_tool success12ms

Input

```
{}
```

Output

```
OK
```

## API Reference

### AgentMessageList

Property

Type

Default

Description

ChildContent

RenderFragment?

—

Usually one or more `<AgentMessage>` children.

AutoScroll

bool

true

Keeps the list scrolled to the bottom when new content arrives via a MutationObserver.

Class

string?

—

Additional CSS classes on the root scroll container.

### AgentMessage

Property

Type

Default

Description

Role

AgentMessageRole

Assistant

One of `User`, `Assistant`, `System`, `Tool`.

Name

string?

—

Display name shown above the message bubble.

Timestamp

DateTimeOffset?

—

Optional timestamp displayed next to the name.

IsStreaming

bool

false

Appends a pulsing caret to the body while the model is generating.

Avatar

RenderFragment?

—

Optional avatar rendered alongside the bubble.

ChildContent

RenderFragment?

—

Message body — plain text, `<StreamingText>`, or any markup.

## Related Components

-   [PromptInput](/components/prompt-input) — Auto-grow textarea with send button, token count slot, and file attach slot.
-   [StreamingText](/components/streaming-text) — Token-by-token text reveal with pulsing caret.
-   [ToolCallCard](/components/tool-call-card) — Collapsible card showing tool name, input, output, and status.
-   [AI Chat Primitives](/components/ai) — Overview of all AI chat components in Lumeo.