LiveCaptions

npx @glasskit-ui/cli add live-captions

npm install @glasskit-ui/react

// components/lib/utils.tsexport type ClassValue = string | number | null | undefined | false;/** * Join truthy class names. Dependency-free on purpose: the lens components * style via bespoke semantic classes (no conflicting Tailwind utilities to * de-dupe), so this needs no clsx/tailwind-merge and resolves from anywhere * the registry is vendored. */export function cn(...inputs: ClassValue[]): string {  return inputs.filter(Boolean).join(" ");}/** * Accessible name from a free-form `label` prop: the label itself when it's a * plain string, otherwise undefined (a ReactNode can't become an aria-label). */export function stringLabel(label: unknown): string | undefined {  return typeof label === "string" ? label : undefined;}

// components/glasskit/live-captions.tsximport type { ReactNode } from "react";import { cn } from "../lib/utils";/** * <LiveCaptions> — real-time transcription / translation, read at a glance: an * optional speaker label and the running caption text on a surface, anchored low * (like the real Captions app). You feed the text; keep the last 1–2 lines. */export function LiveCaptions({  speaker,  children,  translated = false,  className,}: {  /** Who is speaking. */  speaker?: ReactNode;  /** The caption text (latest line[s]). */  children: ReactNode;  /** Mark as a translation (shows a small badge). */  translated?: boolean;  className?: string;}) {  return (    <div      className={cn("gk-captions gk-surface", className)}      role="status"      aria-live="polite"    >      {speaker != null || translated ? (        <div className="gk-captions__head">          {speaker != null ? (            <span className="gk-captions__speaker t-caption">{speaker}</span>          ) : null}          {translated ? (            <span className="gk-captions__badge t-caption">Translated</span>          ) : null}        </div>      ) : null}      <p className="gk-captions__text t-readout">{children}</p>    </div>  );}