Chat Message

InstallationCopy Anchor Link

$ pnpm dlx shadcn@latest add @videorc/chat-message

UsageCopy Anchor Link

import { ChatMessage } from "@/components/blocks/stream-manager/chat-message";
import type { ChatMessageData } from "@/components/blocks/stream-manager/chat-message";

const message: ChatMessageData = {
  id: "m1",
  platform: "youtube",
  authorName: "Maya Chen",
  text: "Which microphone are you using on stream today?",
  time: "8:41 PM",
};

<ol aria-label="Chat messages">
  <ChatMessage
    highlight={{ phase: onStream === message.id ? "live" : "idle" }}
    message={message}
    onHighlight={toggleOnStream}
    onReply={replyTo}
  />
</ol>;

A message is plain data. ChatMessage renders one <li>, so put the rows in an <ol>. With onHighlight the row is one button: a click puts the message on stream, and a click on the row that's on stream takes it off. Without it the row is plain text, as in History.

Format time yourself, once, so the server and the browser agree: formatChatTime(receivedAt) gives Videorc's "8:42 PM".

ExamplesCopy Anchor Link

Every stateCopy Anchor Link

The row on stream wears the live chrome plate. A member's row is the quieter plate with a member-hue edge, a paid message is the warning fill with a hairline ring, and Buddy's "Talking about this" is the flat accent. A row paints one of them at most, and the row on stream beats them all. Chips sit after the name: roles, first chat, @you for a mention, the amount, Buddy's mark, the stream state and the removal. A failed show and an unusual removal say why on the row's own line.

CompactCopy Anchor Link

density="compact" sets 12 px text and a 32 px avatar, for a narrow rail beside the Studio. The Stream Manager keeps the 15 px rows.

ThemingCopy Anchor Link

KeyboardCopy Anchor Link

AccessibilityCopy Anchor Link

A highlightable row is one button named by what it says: author, platform and words ("Maya Chen on YouTube: Which microphone…"). aria-pressed says it's on stream and the description says what a click does, then any outcome the row shows. A drag that selects words in the row copies them and never puts the message on stream. The time and the ⋯ wait for the pointer while live (timestamps="hover") and appear with keyboard focus. Every chip that stands for more says it in a tooltip, never a native title.

API referenceCopy Anchor Link

ChatMessageDataCopy Anchor Link

ChatMessageHighlightCopy Anchor Link

ChatMessageRemovalCopy Anchor Link

ChatMessageFlagCopy Anchor Link

HelpersCopy Anchor Link

HighlightStatus and RemovalStatus are the row's two status chips, for rows of your own that share the slot (the Activity Feed does). chatMessageMenu(message, options) builds the ⋯ items; chatMessageMentions(message, names), chatMessageCanHighlight(message), chatMessageInitials(name) and formatChatTime(iso) are the rules the row follows.