Chat Toolbar

InstallationCopy Anchor Link

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

UsageCopy Anchor Link

import {
  ChatToolbar,
  DEFAULT_CHAT_FILTER,
  filterChatMessages,
} from "@/components/blocks/stream-manager/chat-toolbar";
import type { ChatFilter } from "@/components/blocks/stream-manager/chat-toolbar";

const [filter, setFilter] = useState<ChatFilter>(DEFAULT_CHAT_FILTER);
const shown = filterChatMessages(messages, filter, {
  mentionNames: ["@nightowlstudio"],
  questionIds,
});

<ChatToolbar
  filter={filter}
  onFilterChange={setFilter}
  platforms={["youtube", "twitch", "x"]}
  questions={questionIds.size > 0}
/>;

The filter is plain data you own:

interface ChatFilter {
  platform: ChatPlatform | "all";
  questions: boolean;
  mentions: boolean;
  search: string;
}

filterChatMessages(messages, filter, { questionIds, mentionNames }) applies it: one platform, the messages behind Buddy's open questions, the ones that mention your accounts, and a search through words and names. chatFilterActive(filter) says whether anything narrows chat, for an empty state that reads "No messages match these filters."

The Questions chip shows while Buddy has open questions (questions), and stays while it's on. The search field takes ⌘F's focus through searchRef; Esc clears it.

ResponsiveCopy Anchor Link

Inside the Stream Manager, the strip follows the window's own width: from 640 px the filters are inline chips, and below it they fold into one Filters menu with a count of what's on. On its own, outside the Stream Manager's container, the chips always show.

ThemingCopy Anchor Link

KeyboardCopy Anchor Link

AccessibilityCopy Anchor Link

The platform chips are a group named "Show chat from", and Questions and Mentions a group named "Chat filters", each explained on hover. The search field is named "Search chat". Below 640 px the Filters button is named "Chat filters" and its menu holds the same choices as radio and checkbox items.

API referenceCopy Anchor Link