Skip to content
Cuelark UI
AgentsAnimated

Conversation

A transcript that sticks to the bottom while streaming and lets go when you scroll.

Conversation is the scroll container for AI chat. It follows the newest message while a reply streams, stops following the moment you scroll up to read, and offers a "Latest" pill to jump back. Edges fade so text never cuts off hard.

Preview

What's the fastest way to add dark mode?
Put your colors in CSS variables, define a .dark block, and toggle the class on <html>. Cuelark's theme already does this.
And to avoid a flash on load?
Run a tiny inline script in <head> that reads the saved preference and sets the class before the first paint.
Can the user override the system setting?
Yes: store their choice in localStorage and only fall back to prefers-color-scheme when nothing is saved.

Installation

pnpm dlx shadcn@latest add https://ui.cuelark.com/r/conversation.json

The CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/conversation.

Builds on: motion

Usage

import { Conversation, ConversationContent } from "@/components/ui/conversation";

<Conversation className="h-[60vh]">
  <ConversationContent>{messages}</ConversationContent>
</Conversation>

Motion

How it moves

The Latest pill springs in when you leave the bottom.

Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.

API reference

Conversation · ConversationContent

Give Conversation a height.

Accessibility

  • role=log with polite announcements.
  • The Latest pill is skipped by Tab while hidden.

FAQ

Also searched as: chat scroll to bottom react · ai conversation component · stick to bottom chat · chat transcript ui · message list react