Lumeo

AgentMessageList

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

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

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.

Live Chat Transcript

Session started 08:23

08:21You

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

Lumeo Copilot08:21

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

Role Switcher — interactive

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.

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

Actions, Branches & Markdown Export

You

Give me a tagline for a productivity app.

Copilot

"Do more, faster."

Assistant turns can carry a copy/regenerate/retry toolbar and branch navigation between alternate responses. Export the whole thread to Markdown.

Empty State

No messages yet

Ask a question to get started.

Set IsEmpty to show a placeholder while there are no messages — a localized default, or your own EmptyState slot.

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.
ShowScrollButton	bool	true	Shows a floating scroll-to-latest button when the list is scrolled away from the bottom.
Virtualize	bool	false	Opt-in virtualization for long threads. When true and `Items` is supplied, messages render through `Virtualize<TItem>` so only the rows near the viewport are in the DOM.
Items	IReadOnlyList<RenderFragment>?	null	The per-message render fragments to virtualize. Only used when `Virtualize` is true.
ItemSize	float	80	Estimated row height in pixels for the virtualizer.
OverscanCount	int	4	Extra rows to render above/below the viewport to smooth scrolling.
IsEmpty	bool	false	Renders the `EmptyState` slot (or a localized default) instead of the messages.
EmptyState	RenderFragment?	—	Custom placeholder shown when `IsEmpty` is true.
ToMarkdown(…)	static string	—	Serializes `AgentMessageMarkdown` turns to a Markdown transcript (pair with `DownloadFile`).
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.
TimeZone	TimeZoneInfo?	null	Time zone to render `Timestamp` in — pass the end user's zone (Blazor Server runs on the server, so `ToLocalTime()` would show the server's zone). When null, the timestamp renders in the offset it already carries.
TimestampFormat	string	"HH:mm"	Custom format string for the visible timestamp.
TimestampCulture	CultureInfo?	null	Culture used to format the timestamp. Defaults to `CultureInfo.CurrentCulture`.
IsStreaming	bool	false	Appends a pulsing caret to the body while the model is generating.
Avatar	RenderFragment?	—	Optional avatar rendered alongside the bubble.
Actions	RenderFragment?	—	Toolbar under the body — typically `<AgentMessageActions>` (copy/regenerate/retry) and/or `<AgentMessageBranchNav>`.
ChildContent	RenderFragment?	—	Message body — plain text, `<StreamingText>`, or any markup.

AgentMessageActions

Property	Type	Default	Description
CopyText	string?	null	Text copied to the clipboard by the built-in Copy action. When null, no Copy button is rendered.
OnCopy	EventCallback<string>	—	Invoked after a successful copy (receives the copied text).
OnRegenerate	EventCallback	—	When set, renders a Regenerate action invoking this callback.
OnRetry	EventCallback	—	When set, renders a Retry action invoking this callback.

AgentMessageAction

Property	Type	Default	Description
Label	string?	null	Accessible name for the button — used for `aria-label`, the visually-hidden label, and the tooltip fallback. Required for a11y.
Icon	IconSource?	null	Icon to render (e.g. `LumeoIcons.Copy`). Ignored when `ChildContent` is supplied.
Tooltip	string?	null	Native title tooltip; defaults to `Label` when unset.
OnClick	EventCallback	—	Fires when the button is clicked.
Disabled	bool	false	Disables the button.

AgentMessageBranchNav

Property	Type	Default	Description
Index	int	0	Current branch, 0-based. Two-way bindable via `@bind-Index`.
IndexChanged	EventCallback<int>	—	Two-way callback for `Index`.
Count	int	0	Total number of branches.
Loop	bool	false	When true, previous/next wrap around the ends instead of disabling at the first/last branch.
OnPrevious	EventCallback	—	Invoked (after `IndexChanged`) when moving to the previous branch.
OnNext	EventCallback	—	Invoked (after `IndexChanged`) when moving to the next branch.

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