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.
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
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.

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 — 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.