Chat message

Installation

$ npx shadcn@latest add https://goodui.dev/r/chat-message.json

The file lands in components/goodui/chat-message.tsx and is yours to edit. With the @goodui registry added, npx shadcn@latest add @goodui/chat-message works too.

Usage

import { ChatMessage } from "@/components/goodui/chat-message"

export function Thread({ messages }: { messages: { id: string; role: "user" | "assistant"; text: string; done: boolean }[] }) {
  return (
    <div className="flex flex-col">
      {messages.map((m, i) => (
        <ChatMessage
          key={m.id}
          role={m.role}
          name={m.role === "assistant" ? "Aiko" : "Lena"}
          content={m.text}
          streaming={!m.done}
          grouped={messages[i - 1]?.role === m.role}
          onFeedback={(v) => rate(m.id, v)}
          onRetry={() => regenerate(m.id)}
        />
      ))}
    </div>
  )
}

When to use

Examples

<ChatMessage role="assistant" name="Aiko" streaming={!done} copyText={answer}>
  <StreamingText text={answer} streaming={!done} onComplete={() => setDone(true)} className="block text-[15px] leading-7" />
</ChatMessage>

<ChatMessage role="assistant" content="I found a slot and held it for ten minutes.">
  <div className="mt-3 flex flex-col gap-2">
    <ToolCall name="find_free_slot" args={{ stylist: "Lena" }} status="success" duration={640} />
  </div>
</ChatMessage>

<ChatMessage role="user" content="Book Maya for Saturday" status="error" onRetry={resend} />

API reference

Accessibility

• •The author name is visible for assistant messages and screen-reader only for user messages.
• •Action buttons are real buttons with aria-labels (Copy, Good response, Bad response, Retry, Edit) and aria-pressed on the feedback pair; they appear on hover or keyboard focus and are always visible on touch screens.
• •Copy announces "Copied" through a polite live region.
• •Links in content open in a new tab with rel="noreferrer". System messages use role="note".
• •Built-in strings (labels for actions, statuses, default author names) go through the labels prop for translation.

Motion

• •A message fades and rises 8px on mount on a spring (stiffness 420, damping 32); animate={false} turns it off for restored history.
• •The streaming caret is a 1 s step blink in CSS; feedback icons pop on a spring when toggled; the copy icon cross-fades into a check for 1.6 s.
• •Reduced motion: the entrance has zero duration, the caret stops blinking and icon pops become plain swaps.

• •The markdown-ish parser is a single pass over lines, memoised on content, so a streaming message re-parses once per received chunk and never on unrelated re-renders.

Notes for AI

Coding agents read these rules through MCP and llms.txt, or paste this page with Copy page.

FAQ

Related