Chat Message React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Chat Message is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import ChatMessage from @/components/ui/chat-message.

import { ChatMessage, type ChatMessageData, type ChatMessageLabels } from "@/components/ui/chat-message"

const labels: Partial<ChatMessageLabels> = {
  assistant: "Summit Assistant",
  assistantWrote: (name) => `${name} replied`,
  regenerate: "Try again",
  good: "Helpful",
  bad: "Not helpful",
  feedbackThanks: "Thanks for the feedback",
}

export function Answer({ message, onRegenerate }: { message: ChatMessageData; onRegenerate: () => Promise<void> }) {
  return (
    <ChatMessage
      {...message}
      isLatest
      labels={labels}
      onRegenerate={onRegenerate}
      onFeedbackChange={(feedback) => console.log(message.id, feedback)}
    />
  )
}

Props

• roledefault "assistant"
  "user" | "assistant" | "system"

  Who wrote it. user: the person's bubble with Copy and Edit. assistant: the answer with its thinking, tools, sources and response actions. system: a quiet centered line between hairlines, without avatar or actions.

• contentdefault ""
  string

  The message as markdown (tables, lists, code). Empty on a finished assistant message renders only the footer; empty while pending or streaming shows the typing dots. The playground falls back to the canonical invoice answer.

• statusdefault "complete"
  "pending" | "streaming" | "complete" | "stopped" | "error"

  pending: sent, nothing back yet (typing dots). streaming: text arriving (caret, aria-busy, actions hidden). stopped: a Stopped note in the meta line, actions still work. error: the error row with Retry.

• modeldefault ""
  string

  The model that wrote the answer, shown in the meta line (a mono chip in the flat header).

• errordefault ""
  ReactNode

  The message of the error row when status is "error"; empty shows labels.error.

• editeddefault false
  boolean

  Adds "edited" to the meta line.

• variantdefault "default"
  "default" | "bubbles" | "flat"

  default: the person in a bubble on the right, the answer as text on the left (ChatGPT). bubbles: both sides in bubbles (a messenger, a support widget). flat: both on the left with avatars and name headers, no bubbles (team threads, docs).

• sizedefault "md"
  "sm" | "md"

  Text 14 / 15px, bubble padding and avatars 24 / 28px. sm fits copilot side panels.

• bubbledefault "soft"
  "soft" | "solid"

  The person's bubble: a light tint of the tone, or a solid fill (black / white when neutral).

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The color of the person's bubble and the edit Send button. Neutral is gray (soft) or black / white (solid).

• colordefault ""
  string

  Any CSS color for the bubble; replaces the tone. Text on a solid fill turns black or white by lightness.

• showAvatardefault "assistant"
  "assistant" | "all" | "none"

  Which side shows an avatar. The flat variant always shows both unless "none".

• assistantAvatar
  ReactNode

  Replaces the assistant's round Sparkles mark: a MatrixOrb, a logo, an image.

• assistantNamedefault ""
  string

  The assistant's name in the flat header and the screen reader heading; falls back to author.name, then labels.assistant.

• timestampdefault "hover"
  "hover" | "always" | "never"

  The time (and model) in the meta line: shown on hover, focus or a tap, always, or never. The flat header always shows the time.

• timeFormatdefault "time"
  "relative" | "time" | "date" | "datetime"

  "16:35", or relative ("5 min. ago", ticking once a minute), a date, or both.

• actionsdefault "auto"
  "auto" | "always" | "hover" | "never"

  auto: always visible on the latest assistant message, on hover, focus or a tap elsewhere. always / hover force one rule; never hides the action bar (the long-press sheet still works).

• isLatestdefault false
  boolean

  The last assistant message of a thread (chat-thread sets it). Drives actions="auto".

• groupeddefault false
  boolean

  A follow-up from the same sender: the avatar and header hide (the text stays aligned) and the bubble tightens its corner on the sender's side.

• copyFormatdefault "markdown"
  "markdown" | "text"

  What Copy puts on the clipboard: the markdown source, or plain text through markdownToText.

• caretdefault "dot"
  "dot" | "bar" | "block" | "none"

  The caret at the end of streaming text.

• codeAccentdefault ""
  string

  The accent of code blocks in the answer and the tool inputs and outputs; empty keeps the code block's own.

• maxUserLinesdefault 8
  number

  Long questions fold past this many lines behind "Show more"; 0 never folds.

• longPressdefault true
  boolean

  On touch screens a long press on the message opens an action sheet with every action (and a haptic tick). Links, code and the buttons keep their own touch behavior.

• localedefault ""
  string

  Times, durations and file sizes. Empty uses UIProvider's locale, then the browser's.

• createdAt
  Date | string | number

  When it was sent; the meta line, the flat header and the screen reader heading show it.

• author
  ChatPerson

  { id, name, avatar? }: the person (their avatar and name) or the assistant (its name and picture).

• attachments
  ChatAttachment[]

  Images in a grid that opens the full-screen viewer (one large, two to four as tiles, more as +N), files as tiles with their type color and size.

• reasoning
  ChatReasoning

  { content, status?, startedAt?, endedAt?, durationMs? }: the thinking row above the answer (ReasoningIndicator).

• toolCalls
  ToolCall[]

  The tools it used, as an inline summary that expands into the timeline (ToolCallTimeline variant inline).

• sources
  ChatSource[]

  Chips under the answer with favicon, domain and number; they open their url in a new tab.

• id
  string

  The message id, set on the root; keeps the tap-to-show state per message.

• branch
  { index: number; count: number }

  Which version this is (1-based) of how many: shows the "‹ 2 / 3 ›" switcher when count is above 1, and the text cross-fades on every switch.

• onBranchChange
  (index: number) => void

  The switcher's previous / next, with the new 1-based index. Without it the arrows are disabled.

• onCopy
  (text: string) => void

  After copying (Copy is built in).

• onRegenerate
  () => (void | Promise<unknown>)

  Shows Regenerate on assistant messages; a returned promise keeps it spinning.

• onEdit
  (content: string) => (void | Promise<unknown>)

  Shows Edit on user messages; Send calls it with the new text (unchanged text just closes the editor). A promise keeps Send loading and the editor open until it resolves.

• feedback
  "up" | "down" | null

  Controlled thumbs; without onFeedbackChange they are read-only (in the bar and the long-press sheet). The thumbs show when any of feedback, defaultFeedback or onFeedbackChange is set.

• defaultFeedbackdefault ""
  "up" | "down" | null

  The starting thumbs while uncontrolled; unset (null) shows neither pressed.

• onFeedbackChange
  (feedback: "up" | "down" | null) => (void | Promise<unknown>)

  Pressing the pressed thumb clears it. Optimistic: a rejected promise rolls the choice back.

• onRetry
  () => (void | Promise<unknown>)

  Shows Retry in the error row; a promise keeps it loading.

• menu
  MenuEntry[]

  The "⋯" menu (Share, Read aloud, Report, Delete): a dropdown on desktop, a bottom sheet on phones; its items also join the long-press sheet.

• onSourceClick
  (source: ChatSource) => void

  Replaces opening the source url.

• onAttachmentClick
  (attachment: ChatAttachment) => void

  Replaces the default: images open the viewer, files open their url.

• now
  Date | number

  Pins the clock for relative times and live durations (screenshots, tests). Default: a shared ticker.

• markdownProps
  Partial<MarkdownProps>

  Passed to the Markdown of the content (labels, linkTarget, components). Keep it stable.

• reasoningProps
  Partial<ReasoningIndicatorProps>

  Passed to the thinking row (labels, variant, peek). Keep it stable.

• toolCallProps
  Partial<ToolCallTimelineProps>

  Passed to the inline tool timeline (labels, onApprove, onReject). Keep it stable.

• labels
  Partial<ChatMessageLabels>

  Every visible and spoken string: you, assistant, youWrote, personWrote(name), assistantWrote(name), system, copy, copied, regenerate, edit, save, cancel, good, bad, feedbackThanks, more, retry, error, stopped, edited, sources, attachments, previous, next, branch(index, count), branchLabel(index, count), showMore, showLess, thinking, attachment(name, size), openImage(name), moreImages(count). English by default (see Parts).

• classNames
  Partial<Record<"avatar" | "header" | "attachments" | "bubble" | "reasoning" | "tools" | "content" | "typing" | "error" | "sources" | "footer" | "actions" | "action" | "meta" | "editor", string>>

  Extra classes for the inner parts.

Parts

FAQ

Used in

More React AI components