Conversation

AI chats

About

A scrollable AI chat conversation container that auto-sticks to the bottom, with content, empty state, and a scroll-to-bottom button.

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

Code

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

Usage.tsx

"use client";

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

const messages = [
  { role: "user", text: "Hi! Can you help me plan a trip to Japan?" },
  {
    role: "assistant",
    text: "Absolutely! When are you planning to go, and how long will you stay?",
  },
  { role: "user", text: "Two weeks in April, mostly Tokyo and Kyoto." },
  {
    role: "assistant",
    text: "Great choice — April is cherry blossom season. I'd suggest 5 days in Tokyo, a day trip to Hakone, then 4 days in Kyoto with time for the temples and Arashiyama.",
  },
  { role: "user", text: "Sounds perfect. What about getting around?" },
  {
    role: "assistant",
    text: "A 14-day Japan Rail Pass covers the shinkansen between cities. Within each city, grab an IC card like Suica for trains and buses.",
  },
];

export default function ConversationDemo() {
  return (
    <div className="mx-auto flex h-[420px] w-full max-w-md flex-col rounded-lg border bg-background">
      <Conversation className="h-full">
        <ConversationContent>
          {messages.map((message, index) => (
            <div
              key={index}
              className={
                message.role === "user"
                  ? "ml-auto max-w-[80%] rounded-2xl bg-primary px-4 py-2 text-sm text-primary-foreground"
                  : "mr-auto max-w-[80%] rounded-2xl bg-muted px-4 py-2 text-sm text-foreground"
              }
            >
              {message.text}
            </div>
          ))}
        </ConversationContent>
        <ConversationScrollButton />
      </Conversation>
    </div>
  );
}