51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 53:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"CodeEditor"] 54:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 55:T3460,// Hairline UI · chat-notice · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { AlertCircle, ChevronDown, Hourglass, Layers, RotateCcw, WifiOff } from "lucide-react"; import { NumberRoll } from "./number-roll"; import { StatusButton } from "./status-button"; import { TextMorph } from "./text-morph"; /* ───────────────────────────────────────────────────────── * CHAT NOTICE: the moments an AI app has to say no * * error the answer failed; Retry opens a spinner and * morphs to "Retrying" while it runs * offline no connection; "Reconnecting" opens in * rate-limit out of messages; the countdown rolls down to * the reset, then the hourglass blurs into a check * that draws itself and the words morph to "You can * send messages again" * context the chat is too long; start fresh with a summary * * Calm, inline and specific: what happened, what happens next, * and the one action that helps. Technical details fold away. * ───────────────────────────────────────────────────────── */ export type ChatNoticeKind = "error" | "offline" | "rate-limit" | "context"; export interface ChatNoticeProps extends Omit, "title"> { kind: ChatNoticeKind; title?: string; description?: string; /** Rate limit: when sending is allowed again (ms). Shows a live countdown. */ resetAt?: number; onReset?: () => void; onRetry?: () => void; /** Shows a spinner on Retry, or "Reconnecting" when offline. */ retrying?: boolean; onUpgrade?: () => void; upgradeLabel?: string; /** Context: start a new chat carrying a summary of this one. */ onSummarize?: () => void; onNewChat?: () => void; /** Technical details, e.g. an error message or request ID. */ details?: string; } const MORPH = "cubic-bezier(0.16,1,0.3,1)"; const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"; const BUTTON = `inline-flex h-7 items-center gap-1.5 rounded-full px-3 text-[12px] font-medium transition-[background-color,color,transform] duration-300 active:scale-[0.97] ${FOCUS}`; const SECONDARY = `cursor-pointer ${BUTTON} text-foreground shadow-[inset_0_0_0_1px_var(--border)] hover:bg-accent`; const PRIMARY = `cursor-pointer ${BUTTON} bg-primary text-primary-foreground hover:bg-primary/90`; const TWO_DIGITS = { minimumIntegerDigits: 2 }; const reducedQuery = "(prefers-reduced-motion: reduce)"; const subscribeReduced = (onChange: () => void) => { const query = window.matchMedia(reducedQuery); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; const useReducedMotion = () => React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false); /** Icons trade places through a blur: the old one shrinks away as the new one grows in. */ const swap = (on: boolean, reduced: boolean): React.CSSProperties => ({ opacity: on ? 1 : 0, transform: on ? "none" : "scale(0.6)", filter: on ? "none" : "blur(3px)", transition: reduced ? "none" : `opacity 260ms ${MORPH}, transform 380ms ${MORPH}, filter 260ms ${MORPH}`, }); /** A piece of a line that opens out of nothing and folds back into it. */ function Reveal({ show, reduced, className = "", children }: { show: boolean; reduced: boolean; className?: string; children: React.ReactNode }) { return ( {children} ); } function useCountdown(resetAt: number | undefined, onReset?: () => void) { // Unknown until mounted, so the first paint never claims the limit has already reset. const [now, setNow] = React.useState(null); const fired = React.useRef(false); React.useEffect(() => { if (resetAt === undefined) return; fired.current = false; const tick = () => { const t = Date.now(); setNow(t); if (t >= resetAt && !fired.current) { fired.current = true; onReset?.(); } }; tick(); const timer = window.setInterval(tick, 1000); return () => window.clearInterval(timer); }, [resetAt, onReset]); return resetAt === undefined || now === null ? undefined : Math.max(0, resetAt - now); } /** "4:59" rolling down a second at a time ("1h 05m" when it's over an hour); seconds roll back 00 → 59 like a clock. */ function Countdown({ ms, reduced }: { ms: number; reduced: boolean }) { const s = Math.max(0, Math.ceil(ms / 1000)); const hours = Math.floor(s / 3600); const minutes = hours ? Math.floor((s % 3600) / 60) : Math.floor(s / 60); return ( 0} reduced={reduced}> : ); } export function ChatNotice({ kind, title, description, resetAt, onReset, onRetry, retrying = false, onUpgrade, upgradeLabel = "Upgrade", onSummarize, onNewChat, details, className = "", ...props }: ChatNoticeProps) { const reduced = useReducedMotion(); const left = useCountdown(kind === "rate-limit" ? resetAt : undefined, onReset); const ready = left === 0; const [detailsOpen, setDetailsOpen] = React.useState(false); const detailsId = React.useId(); const counting = kind === "rate-limit" && description === undefined && resetAt !== undefined && !ready; const preset = { error: { title: "Something went wrong", description: "The answer didn’t finish. Your message is safe.", }, offline: { title: "You’re offline", description: "We’ll pick up where you left off when your connection is back.", }, "rate-limit": { title: ready ? "You can send messages again" : "You’ve reached your limit", description: ready ? "Your limit has reset." : resetAt !== undefined ? "It resets in" : "It resets soon.", }, context: { title: "This chat is getting long", description: "Earlier messages may be forgotten. Start fresh with a summary to keep answers sharp.", }, }[kind]; const iconKey = kind === "rate-limit" && ready ? "ready" : kind; const icons: Record = { error: , offline: , "rate-limit": , ready: ( ), context: , }; const shownIcons = kind === "rate-limit" ? ["rate-limit", "ready"] : [kind]; const resetsAt = resetAt !== undefined && left !== undefined ? new Date(resetAt).toLocaleTimeString([], { hour: "numeric", minute: "2-digit" }) : undefined; return (

{title ?? preset.title}

{description ?? preset.description} {kind === "rate-limit" && description === undefined && resetAt !== undefined && ( // The ticking digits are hidden from screen readers (the notice is a live region); they hear the time it resets instead. {resetsAt && counting && at {resetsAt}} )} {kind === "offline" && ( )}

{details && ( <>

{details}

)}

{(kind === "error" || kind === "offline") && onRetry && ( } status={retrying ? "pending" : "idle"} labels={kind === "offline" ? { idle: "Try now", pending: "Trying" } : { idle: "Retry", pending: "Retrying" }} onClick={onRetry} /> )} {kind === "rate-limit" && onUpgrade && ( // Folds away once the limit has reset. )} {kind === "context" && onNewChat && ( )} {kind === "context" && onSummarize && ( )}

); } 50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L51",null,{"namespace":"@hairline","registryDependencies":["https://hairlineui.com/r/number-roll.json?as=dependency","https://hairlineui.com/r/status-button.json?as=dependency","https://hairlineui.com/r/text-morph.json?as=dependency"]}]]}],["$","$L52",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L53",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@keyframes ui-fade-up {\n\tfrom {\n\t\topacity: 0;\n\t\ttransform: translateY(4px);\n\t}\n\tto {\n\t\topacity: 1;\n\t\ttransform: none;\n\t}\n}\n\n@keyframes ui-breathe {\n\t0%, 100% {\n\t\ttransform: scale(0.82);\n\t\topacity: 0.55;\n\t}\n\t50% {\n\t\ttransform: scale(1);\n\t\topacity: 1;\n\t}\n}"}]}]]}]]}]}]}]]}],["$","$L54",null,{"files":[{"path":"registry/chat-notice.tsx","content":"$55","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]