AssistantOrb

npx @glasskit-ui/cli add assistant-orb

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/assistant-orb.tsximport type { ReactNode } from "react";import { cn } from "../lib/utils";/** * <AssistantOrb> — the Meta-AI presence: a glowing gradient orb that animates * per `state` (idle = gentle breathe, listening = pulse, thinking = swirl, * speaking = quick pulse). Pair it with a `label` / transcript line. Motion * collapses under reduce-motion. */export function AssistantOrb({  state = "idle",  label,  className,}: {  state?: "idle" | "listening" | "thinking" | "speaking";  /** Optional caption (e.g. "Listening…" or the transcript). */  label?: ReactNode;  className?: string;}) {  return (    <div      className={cn("gk-orb", `gk-orb--${state}`, className)}      role="status"      aria-label={typeof label === "string" ? label : `Assistant ${state}`}    >      <span className="gk-orb__core" aria-hidden="true" />      {label != null ? (        <span className="gk-orb__label t-body">{label}</span>      ) : null}    </div>  );}