A compact conversation minimap that navigates user turns while keeping the full thread visible.
import MessageScroller, { MessageScrollerMessage } from '@/components/ui/message-scroller'
export default function Demo() {
const messages: MessageScrollerMessage[] = [
{ id: '1', content: 'Open the component catalog.' },
{ id: '2', content: 'The catalog is open. Which patterns should I show?', from: 'assistant' },
{ id: '3', content: 'Show only the AI-native patterns.', from: 'user' },
{ id: '4', content: 'Done. I found nine AI-native components.', from: 'assistant' },
{ id: '5', content: 'Group the sidebar into clear sections.' },
{ id: '6', content: 'I grouped them by conversation, input, and output.', from: 'assistant' },
{ id: '7', content: 'Make the navigation more compact.' },
{ id: '8', content: 'The spacing and labels are now tighter.', from: 'assistant' },
{ id: '9', content: 'Update the prompt input styling.' },
{ id: '10', content: 'Updated to match the rest of the catalog.', from: 'assistant' },
{ id: '11', content: 'Use the same radius across every card.' },
{ id: '12', content: 'All cards now share the same radius.', from: 'assistant' },
{ id: '13', content: 'Remove the extra metadata chips.' },
{ id: '14', content: 'Removed. The output reads more cleanly now.', from: 'assistant' },
{ id: '15', content: 'Add a subtle shadow to the output.' },
{ id: '16', content: 'Added a low-contrast shadow.', from: 'assistant' },
{ id: '17', content: 'Turn the message scroller into a conversation minimap.' },
]
return <MessageScroller className="max-w-lg" messages={messages} />
}
Part of Pasta UI — browse the full library on 21st.dev.