Message

AI chats

About

A single conversation turn in an AI chat transcript, pairing an author name and initials mark with a message bubble and an optional footer for citations or confidence.

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

Code

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

Usage.tsx

import Message from "@/components/ui/message";

export default function MessageDemo() {
  return (
    <div className="flex flex-col gap-5 bg-[var(--background)] p-6">
      <Message role="user" author="Felix Kim">
        Which of the Noida backend candidates have payments experience?
      </Message>
      <Message
        role="assistant"
        footer={
          <>
            <a
              className="rr-cite"
              href="/records/aarav-sharma-cv"
              target="_blank"
              rel="noreferrer"
              aria-label="Source 1: Aarav Sharma - CV"
            >
              <span className="rr-cite__index">1</span>
              <span className="rr-cite__source">Aarav Sharma - CV</span>
            </a>
            <a
              className="rr-cite"
              href="/records/screening-call-notes"
              target="_blank"
              rel="noreferrer"
              aria-label="Source 2: Screening call notes"
            >
              <span className="rr-cite__index">2</span>
              <span className="rr-cite__source">Screening call notes</span>
            </a>
            <span className="rr-confidence rr-confidence--high">
              <span className="rr-confidence__bars" aria-hidden="true">
                <span className="rr-confidence__bar rr-confidence__bar--on" />
                <span className="rr-confidence__bar rr-confidence__bar--on" />
                <span className="rr-confidence__bar rr-confidence__bar--on" />
              </span>
              <span className="rr-confidence__label">high confidence</span>
              <span className="rr-confidence__note">
                both sources are first-hand
              </span>
            </span>
          </>
        }
      >
        Three of the twelve. Aarav Sharma led a payments platform team for four
        years, Meera Nair worked on settlement reconciliation, and Rohit Verma
        spent two years on a UPI integration.
      </Message>
    </div>
  );
}