QuickReplyChips

npx @glasskit-ui/cli add quick-reply-chips

npm install @glasskit-ui/react

// components/lib/utils.tsimport { clsx, type ClassValue } from "clsx";import { twMerge } from "tailwind-merge";export type { ClassValue };/** * Merge class names the shadcn way: clsx joins conditionals, tailwind-merge * de-dupes conflicting Tailwind utilities so a consumer's `className` override * wins (e.g. passing `px-2` beats the component's `px-6`). Lens components are * Tailwind utilities + `--gk-*` tokens, so this de-dupe matters. */export function cn(...inputs: ClassValue[]): string {  return twMerge(clsx(inputs));}/** * 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/quick-reply-chips.tsximport { cn } from "../lib/utils";/** * <QuickReplyChips> — tappable canned replies (the comms job; there is no * keyboard on the lens — text is voice). Each chip is D-pad-focusable. Keep the * set short and the labels glanceable. */export function QuickReplyChips({  options,  onSelect,  className,}: {  options: string[];  onSelect?: (reply: string) => void;  className?: string;}) {  return (    <div className={cn("flex flex-wrap justify-center gap-2", className)}>      {options.map((o, i) => (        <button          key={`${i}-${o}`}          type="button"          onClick={onSelect ? () => onSelect(o) : undefined}          className="focusable press-scale t-body surface rounded-full py-3.5 px-[22px]"        >          {o}        </button>      ))}    </div>  );}