Chat Composer

InstallationCopy Anchor Link

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

UsageCopy Anchor Link

import { ChatComposer } from "@/components/blocks/stream-manager/chat-composer";
import type { ChatDestination } from "@/components/blocks/stream-manager/chat-platform";

const destinations: ChatDestination[] = [
  { id: "yt", platform: "youtube", state: "connected", write: "ready" },
  { id: "tw", platform: "twitch", state: "connected", write: "ready" },
  { id: "x", platform: "x", state: "connected", write: "read-only" },
];

<ChatComposer
  destinations={destinations}
  onSend={(text, { destinationIds }) => send(text, destinationIds)}
  pending={sending}
/>;

A message goes to every destination whose write is ready. With more than one, the "To:" picker lets the streamer narrow a send; onSend then gets the picked destinationIds, and without a pick it gets none. The draft must fit the strictest destination it reaches: 200 characters, 140 with X.

The line under the field speaks only for the exceptions: a destination the send skips ("X read-only"), a failed send's reason with Retry, and "Sending…" while a send is on its way. A finished send says nothing: the message shows up in chat.

ExamplesCopy Anchor Link

Local commandsCopy Anchor Link

Pass commands and the field completes them after "/": ↑ and ↓ move, Tab or ↵ completes. A command runs through onCommand and never posts to chat; "//" sends one literal slash. notice is the composer's answer, read politely: "Marker saved at 30:44 · Untitled marker". The demo above wires Videorc's /marker and /clip.

A failed sendCopy Anchor Link

failures names each destination a send didn't reach, with its reason; onRetry adds Retry. YouTube's chip names it in words: its mark may not shrink to a chip's 12 px.

The window owns the draftCopy Anchor Link

Pass value and onValueChange when something else fills the field, such as a row's ⋯ Reply that writes "@Maya Chen ", and inputRef for ⌘L to focus it.

ThemingCopy Anchor Link

KeyboardCopy Anchor Link

AccessibilityCopy Anchor Link

The field is named "Message", or "Message or local command" with commands. The send button's name says where it sends: "Send message to all writable destinations", "Send message to Twitch", or why it can't. The picker is named "Send to: All". notice is a polite status, and an over-limit count carries the alert icon as well as its number.

API referenceCopy Anchor Link

ChatComposerCommandCopy Anchor Link

ChatSendFailureCopy Anchor Link

chatDestinationNotes(destinations, sendPlatforms) and chatDraftMaxChars(platforms) are the rules the composer follows, for a status of your own.