Chat Platform

InstallationCopy Anchor Link

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

UsageCopy Anchor Link

import {
  CHAT_PLATFORM_LABELS,
  ChatPlatformIcon,
  chatStateLabel,
} from "@/components/blocks/stream-manager/chat-platform";

<ChatPlatformIcon platform="twitch" />

Every Stream Manager part names a platform through it: a message's mark, the filter chips, the stats' hover cards and the status bar's chat states. Pass decorative when the words beside the mark already name the platform.

ExamplesCopy Anchor Link

Chat statesCopy Anchor Link

chatStateLabel(destination) turns a destination's connection into Videorc's chat vocabulary: "Connected", "Read-only", "Reconnect to send", "Reconnecting…". It never says "receive-only", and never shows a raw value.

The marksCopy Anchor Link

Platform marks are the one place saturated colour is allowed in the chrome. Each mark is 20 px wherever it appears: YouTube's icon may not go below 20 px, so the others match it, and YouTube keeps clear space after it. A surface with no room for 20 px, such as a Badge, leaves the mark out and keeps the platform's name. The glyphs come from Icons (YoutubeIcon, TwitchIcon, XPlatformIcon…), so swapping one there swaps it here.

ThemingCopy Anchor Link

AccessibilityCopy Anchor Link

A mark is an image named by its platform. With decorative it's hidden from assistive tech, so the platform is named once.

API referenceCopy Anchor Link

ChatPlatformIconCopy Anchor Link

ChatDestinationCopy Anchor Link

CHAT_PLATFORM_LABELS maps each platform to its one name ("X", never "X / Twitter"; "Custom RTMP", never "Custom").