# AI Message List

Copilot thread with hundreds of messages that pages backwards when scrolling up without moving what is being read.

- id: `ai-message-list`
- Page: https://agentic-ui-kit.com/components/ai-message-list
- Live preview: https://agentic-ui-kit.com/live/component/ai-message-list

## Install

```bash
agentic-ui add ai-message-list
npx shadcn@4.17.0 add @agentic-ui/ai-message-list
```

## Metadata

- **Level:** block
- **Category:** block
- **Installable in:** Radix UI (registry variant new-york)
- **Capabilities:** virtualized-rendering, variable-height-measurement, day-grouping, relative-day-labels, floating-day-label, follow-output, smart-scroll-to-bottom, unread-counter, scroll-anchoring, history-paging, keyboard-feed-navigation, live-announcements, loading-state, empty-state, error-recovery
- **Intents:** converse, communicate
- **Suits domains:** ai-workspace, ai-agents, support, devtools, saas
- **Interaction:** scroll-to-bottom, load-older-history, keyboard-navigation, retry-after-error
- **Screen role:** communication
- **Density:** medium
- **Dark mode:** yes
- **Use it for:** copilot thread with hundreds of messages that pages backwards when scrolling up without moving what is being read, support chat where replies arrive while the agent reviews the history and a button shows '3 new messages', agent console that follows streaming output while the user is at the bottom and stops following when they scroll up, incident channel grouped by day (Today, Yesterday, weekday) with keyboard navigation between messages
- **Avoid when:** short lists of a few messages with no history or streaming: stacking ai-message-bubble is enough, thread views with nested or branching replies, where ai-conversation-branching or a comment tree fits
- **Preserve when adapting:** follow-output-state-machine, message-anchored-scroll-restoration, roving-tabindex-feed, day-grouping-by-time-zone
- **Replace when adapting:** message-renderer, day-label-copy, empty-and-error-copy, page-size-and-fetching
- **Adaptation effort:** low
- **Coupling:** low
- **Quality score:** 8.75/10
- **Quality breakdown:** visual 8/10, responsive 9/10, accessibility 9/10, code 8/10
- **Uses primitives:** button, skeleton
- **Motion:** profile subtle, library css, reduced-motion fallback yes
- **Registry dependencies:** ai-message-bubble, lib-primitives