AI Messages

AI chats 7

About

A scrollable chat message list container that auto-scrolls to the newest message and shows a scroll-to-bottom button when the user scrolls up.

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

Code

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

Usage.tsx

import { AiMessages } from "@/components/ui/ai-messages";

function MessageBubble({
  role,
  children,
}: {
  role: "user" | "assistant";
  children: React.ReactNode;
}) {
  return (
    <div
      className={
        role === "user"
          ? "ml-auto max-w-[80%] rounded-lg bg-primary px-4 py-2 text-primary-foreground"
          : "mr-auto max-w-[80%] rounded-lg bg-muted px-4 py-2 text-foreground"
      }
    >
      {children}
    </div>
  );
}

export default function AiMessagesDemo() {
  return (
    <div className="h-[500px] w-full max-w-2xl border">
      <AiMessages>
        <MessageBubble role="user">
          Hey, can you explain what useEffect does?
        </MessageBubble>
        <MessageBubble role="assistant">
          Sure! useEffect lets you run side effects in a React component, like
          fetching data or subscribing to events, after the component renders.
        </MessageBubble>
        <MessageBubble role="user">Does it run on every render?</MessageBubble>
        <MessageBubble role="assistant">
          By default yes, but you can control that with a dependency array —
          pass an empty array to run it only once, or specific values to run it
          when they change.
        </MessageBubble>
        <MessageBubble role="user">Got it, thanks!</MessageBubble>
        <MessageBubble role="assistant">
          You're welcome! Happy coding 🎉
        </MessageBubble>
      </AiMessages>
    </div>
  );
}