Message Scroller

AI chats 20

About

A compact conversation minimap that navigates user turns while keeping the full thread visible.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Message Scroller to your project and fits it to your theme.

Code

How Message Scroller is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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} />
}