50: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"] 51: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"] 52:T8d9,"use client"; import { useState, type ComponentProps } from "react"; import { cn } from "./lib/cn"; import "./avatar.css"; export type AvatarProps = Omit, "children"> & { name: string; src?: string; alt?: string; /** Shown as a shape at the corner: filled, half, dash or ring. */ presence?: "online" | "away" | "busy" | "offline"; }; /** The same name always gets the same warm tone (six pairs, all at least 6.8:1). */ export function avatarTone(name: string) { let hash = 7; for (const char of name.trim().toLowerCase()) hash = (hash * 31 + char.codePointAt(0)!) >>> 0; return hash % 6; } function AvatarContent({ src, initials }: { src?: string; initials: string }) { const [failed, setFailed] = useState(false); return ( <> {src && !failed && ( { // A cached or pre-hydration failure may precede the error listener. if (image?.complete && image.naturalWidth === 0) setFailed(true); }} onError={() => setFailed(true)} /> )} ); } export function Avatar({ name, src, alt = name, presence, className, ...props }: AvatarProps) { const words = name.trim().normalize("NFC").split(/\s+/u); const initials = (Array.from(words[0] ?? "")[0] ?? "?") + (words.length > 1 ? (Array.from(words[words.length - 1]!)[0] ?? "") : ""); return ( {presence && ); } 53:T125a,"use client"; import { Slot, Slottable } from "@radix-ui/react-slot"; import { LoaderCircle } from "lucide-react"; import { useLayoutEffect, useRef, useState, type ComponentProps, type ReactNode, } from "react"; import { cn } from "./lib/cn"; import "./shared/loading-indicator.css"; import "./button.css"; /* Colour, material and press live in button.css keyed on data-variant, so a consumer's utility classes still override them. Raised to press: the button sinks 1px into an inner shade instead of scaling. */ const variants = { default: "", secondary: "", ghost: "", destructive: "", }; const sizes = { sm: "h-8 gap-1.5 rounded-control px-3 text-[13px] max-md:min-h-11 [@media(pointer:coarse)]:min-h-11", md: "h-[var(--control-height)] gap-2 rounded-button px-3.5 text-sm", lg: "h-11 gap-2 rounded-touch px-[18px] text-[15px]", icon: "size-[var(--control-height)] rounded-button p-0", }; export type ButtonProps = ComponentProps<"button"> & { variant?: keyof typeof variants; size?: keyof typeof sizes; asChild?: boolean; /** Shows a spinner over the label and swallows clicks while keeping focus and width. */ loading?: boolean; /** Animate a meaningful label/icon change, such as saving → saved. */ feedbackKey?: string; }; export function Button({ className, variant = "default", size = "md", asChild = false, loading = false, feedbackKey, disabled, "aria-disabled": ariaDisabled, children, onClick, onClickCapture, tabIndex, type = "button", ...props }: ButtonProps) { const Component = asChild ? Slot : "button"; const nativeDisabled = Boolean(disabled); const blocked = nativeDisabled || loading || ariaDisabled === true || ariaDisabled === "true"; return ( { if (blocked && (event.key === "Enter" || event.key === " ")) { event.preventDefault(); } props.onKeyDown?.(event); }} onClickCapture={(event) => { if (blocked) { event.preventDefault(); event.stopPropagation(); return; } onClickCapture?.(event); }} onClick={onClick} > {loading && asChild && ( )} {loading && !asChild && feedbackKey === undefined && ( )} {loading && !asChild && feedbackKey === undefined ? ( {children} ) : feedbackKey !== undefined && !asChild ? ( {loading && ( ) : ( children )} ); } function ButtonFeedback({ stateKey, children, }: { stateKey: string; children: ReactNode; }) { const content = useRef(null); const [initialKey] = useState(stateKey); const [width, setWidth] = useState(); useLayoutEffect(() => { const element = content.current; if (!element) return; const measure = () => setWidth(element.offsetWidth); measure(); const observer = new ResizeObserver(measure); observer.observe(element); return () => observer.disconnect(); }, [stateKey]); return ( {children} ); } 54:T20df,"use client"; import { ArrowDown } from "lucide-react"; import { useLayoutEffect, useRef, useState } from "react"; import { Avatar } from "./avatar"; import { Button } from "./button"; import { cn } from "./lib/cn"; import { ThreadComposer } from "./thread-composer"; import "./shared/table-skeleton.css"; import "./shared/comment-action.css"; import "./shared/chat-jump.css"; import "./chat-thread.css"; export type ChatPerson = { name: string; avatar?: string }; export type ChatMessage = { id: string; senderId: string; text: string; /** ISO timestamp. */ createdAt: string; status?: "sending" | "sent" | "read" | "failed"; }; const dayFormat = (timeZone: string) => new Intl.DateTimeFormat("en-US", { weekday: "long", month: "long", day: "numeric", timeZone }); const timeFormat = (timeZone: string) => new Intl.DateTimeFormat("en-US", { hour: "numeric", minute: "2-digit", timeZone }); const dayKey = (iso: string, zone: string) => new Intl.DateTimeFormat("en-CA", { timeZone: zone }).format(new Date(iso)); const statusText = { sending: "Sending…", sent: "Sent", read: "Read", failed: "Not sent" }; const NEAR = 72; export function ChatThread({ label, messages, people, currentUserId, onSend, onRetry, onLoadEarlier, hasEarlier, typing = [], loading, disabled, timeZone = "UTC", className, }: { label: string; messages: readonly ChatMessage[]; people: Readonly>; currentUserId: string; onSend: (text: string) => void; onRetry?: (id: string) => void; onLoadEarlier?: () => void; hasEarlier?: boolean; /** Names of people currently typing. */ typing?: readonly string[]; loading?: boolean; disabled?: boolean; timeZone?: string; className?: string; }) { const scroller = useRef(null); const last = useRef({ first: messages[0]?.id, newest: messages.at(-1)?.id, height: 0 }); const newest = messages.at(-1); const [pinned, setPinned] = useState(true), [seen, setSeen] = useState(newest?.id); // The newest message counts as seen when the reader is at the bottom or wrote it. if (newest && seen !== newest.id && (pinned || newest.senderId === currentUserId)) setSeen(newest.id); const seenAt = messages.findIndex((m) => m.id === seen); const away = pinned || seenAt < 0 ? 0 : messages.length - 1 - seenAt; const toBottom = () => { const el = scroller.current; if (!el) return; const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches; el.scrollTo({ top: el.scrollHeight, behavior: reduce ? "auto" : "smooth" }); }; // Keep the newest message in view when the reader is there or sent it; keep the place when history is added above. useLayoutEffect(() => { const el = scroller.current; if (!el) return; const before = last.current; const latest = messages.at(-1); if (before.first !== undefined && messages[0]?.id !== before.first && latest?.id === before.newest) { el.scrollTop += el.scrollHeight - before.height; } else if (latest?.id !== before.newest || before.height === 0) { if (pinned || latest?.senderId === currentUserId || before.height === 0) el.scrollTop = el.scrollHeight; } last.current = { first: messages[0]?.id, newest: latest?.id, height: el.scrollHeight }; }, [messages, pinned, currentUserId]); const onScroll = () => { const el = scroller.current!; const near = el.scrollHeight - el.scrollTop - el.clientHeight < NEAR; setPinned(near); last.current.height = el.scrollHeight; }; const day = dayFormat(timeZone), clock = timeFormat(timeZone); return (

{hasEarlier && ( )} {loading && !messages.length ? ( ) : !messages.length ? (

No messages yet. Say hello.

) : ( messages.map((message, i) => { const previous = messages[i - 1], next = messages[i + 1]; const mine = message.senderId === currentUserId; const person = people[message.senderId]; const newDay = !previous || dayKey(previous.createdAt, timeZone) !== dayKey(message.createdAt, timeZone); const close = (a?: ChatMessage, b?: ChatMessage) => !!a && !!b && a.senderId === b.senderId && dayKey(a.createdAt, timeZone) === dayKey(b.createdAt, timeZone) && Math.abs(Date.parse(b.createdAt) - Date.parse(a.createdAt)) < 5 * 60000; const first = !close(previous, message), tail = !close(message, next); return (

0 || undefined}> {newDay && (

{day.format(new Date(message.createdAt))}

)}

{!mine && ( {tail && } )}

{!mine && first && {person?.name ?? "Unknown"}}

{mine ? "You" : person?.name}, {clock.format(new Date(message.createdAt))}: {message.text}

{(tail || message.status === "failed") && ( {clock.format(new Date(message.createdAt))} {mine && message.status && · {statusText[message.status]}} {message.status === "failed" && onRetry && ( )} )}

); }) )}

0} role="status"> {typing.length > 0 && ( <> {typing.length === 1 ? `${typing[0]} is typing` : `${typing.join(" and ")} are typing`} )}

{away > 0 && ( )}

); } 55:Tc74,"use client"; import { SendHorizontal } from "lucide-react"; import { useId, useLayoutEffect, useRef, useState, type KeyboardEvent } from "react"; import { Button } from "./button"; import { cn } from "./lib/cn"; import "./thread-composer.css"; export function ThreadComposer({ label, onSubmit, onCancel, placeholder, submitLabel = "Send", submitOn = "enter", defaultValue = "", autoFocus, disabled, maxRows = 6, className, }: { label: string; onSubmit: (text: string) => void; onCancel?: () => void; placeholder?: string; submitLabel?: string; /** "enter" sends on Enter and breaks lines on Shift+Enter; "mod-enter" needs Ctrl or Cmd. */ submitOn?: "enter" | "mod-enter"; defaultValue?: string; autoFocus?: boolean; disabled?: boolean; maxRows?: number; className?: string; }) { const [text, setText] = useState(defaultValue); const field = useRef(null); const hint = useId(); const empty = !text.trim(); // Grow with the text up to maxRows, then scroll. useLayoutEffect(() => { const element = field.current; if (!element) return; element.style.height = "auto"; const line = parseFloat(getComputedStyle(element).lineHeight) || 20; element.style.height = `${Math.min(element.scrollHeight, line * maxRows + 16)}px`; }, [text, maxRows]); useLayoutEffect(() => { if (autoFocus) { field.current?.focus(); field.current?.setSelectionRange(field.current.value.length, field.current.value.length); } }, [autoFocus]); const send = () => { if (empty || disabled) return; onSubmit(text.trim()); setText(""); }; const keys = (event: KeyboardEvent) => { if (event.nativeEvent.isComposing) return; if (event.key === "Escape" && onCancel) { event.preventDefault(); onCancel(); } else if (event.key === "Enter") { const mod = event.metaKey || event.ctrlKey; if (submitOn === "enter" ? !event.shiftKey : mod) { event.preventDefault(); send(); } } }; return (
setText(event.target.value)} onKeyDown={keys} data-slot="thread-input" /> <div className="flex items-center justify-between gap-2"> <span id={hint} className="text-[11px] text-muted-foreground"> {submitOn === "enter" ? "Enter to send · Shift+Enter for a new line" : "Ctrl or ⌘ + Enter to send"} {onCancel ? " · Esc to cancel" : ""} </span> <div className="flex gap-1.5"> {onCancel && ( <Button variant="ghost" size="sm" onClick={onCancel}> Cancel </Button> )} <Button size="sm" disabled={empty || disabled} onClick={send}> {submitLabel} <SendHorizontal aria-hidden="true" /> </Button> </div> </div> </div> ); } 56:T91f,/* avatar.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { /* Avatars: a warm tone picked from the name; presence is a shape. */ [data-slot="avatar"] { --av-bg: #fdefe3; --av-fg: #8f3400; background: var(--av-bg); color: var(--av-fg); box-shadow: inset 0 0 0 1px rgb(20 20 28 / 8%); } [data-slot="avatar"] img { border-radius: inherit; } [data-slot="avatar"][data-tone="1"] { --av-bg: #e7f3fb; --av-fg: #00507a; } [data-slot="avatar"][data-tone="2"] { --av-bg: #e4f6ea; --av-fg: #0b5a34; } [data-slot="avatar"][data-tone="3"] { --av-bg: #fcf0d6; --av-fg: #6b4708; } [data-slot="avatar"][data-tone="4"] { --av-bg: #fdeceb; --av-fg: #9a1a20; } [data-slot="avatar"][data-tone="5"] { --av-bg: #efeafb; --av-fg: #4d3a8a; } [data-theme="dark"] [data-slot="avatar"], :root[data-theme="dark"] [data-slot="avatar"] { --av-bg: #2c180b; --av-fg: #f08a45; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%); } [data-theme="dark"] [data-slot="avatar"][data-tone="1"] { --av-bg: #0e2433; --av-fg: #6dbbe8; } [data-theme="dark"] [data-slot="avatar"][data-tone="2"] { --av-bg: #102719; --av-fg: #63d18f; } [data-theme="dark"] [data-slot="avatar"][data-tone="3"] { --av-bg: #2e2106; --av-fg: #e8be62; } [data-theme="dark"] [data-slot="avatar"][data-tone="4"] { --av-bg: #3a1718; --av-fg: #fe8a88; } [data-theme="dark"] [data-slot="avatar"][data-tone="5"] { --av-bg: #241d3a; --av-fg: #c3b4f5; } [data-slot="avatar-presence"] { position: absolute; right: -3px; bottom: -3px; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px var(--background); } [data-slot="avatar-presence"][data-presence="online"] { background: var(--success); } [data-slot="avatar-presence"][data-presence="away"] { background: linear-gradient(90deg, var(--warning) 50%, var(--background) 50%); box-shadow: 0 0 0 2px var(--background), inset 0 0 0 1.5px var(--warning); } [data-slot="avatar-presence"][data-presence="busy"] { background: radial-gradient(var(--background) 0 0) center / 5px 1.5px no-repeat, var(--danger); } [data-slot="avatar-presence"][data-presence="offline"] { background: var(--background); box-shadow: 0 0 0 2px var(--background), inset 0 0 0 1.5px var(--muted-foreground); } } 57:T136e,/* button.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { [data-slot="button"] { transition-property: background-color, color, border-color; transition-duration: var(--duration-fast); transition-timing-function: var(--ease-out); } /* Button material. Raised to press: a lit top edge and a small lift; the press travels 1px down and swaps the lift for an inner shade. Only translate animates (release on the settle curve); shadows swap. */ [data-slot="button"] { --b-bg: var(--raised); --b-bg-hover: var(--raised-hover); --b-bg-press: var(--raised-press); --b-fg: var(--foreground); --b-shadow: var(--shadow-raised); --b-shadow-press: var(--shadow-raised-press); background-color: var(--b-bg); color: var(--b-fg); box-shadow: var(--b-shadow); transition-property: background-color, color, border-color, translate; transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-fast), var(--duration-normal); transition-timing-function: var(--ease-out), var(--ease-out), var(--ease-out), var(--ease-settle); } [data-slot="button"][data-variant="default"] { --b-bg: var(--accent); --b-bg-hover: var(--accent-hover); --b-bg-press: var(--accent-press); --b-fg: var(--accent-foreground); --b-shadow: var(--shadow-accent); --b-shadow-press: var(--shadow-accent-press); } [data-slot="button"][data-variant="destructive"] { --b-bg: var(--danger-fill); --b-bg-hover: var(--danger-fill-hover); --b-bg-press: var(--danger-fill-press); --b-fg: var(--danger-fill-foreground); --b-shadow: var(--shadow-danger); --b-shadow-press: var(--shadow-danger-press); } [data-slot="button"][data-variant="ghost"] { --b-bg: transparent; --b-bg-hover: var(--muted); --b-bg-press: var(--muted); --b-fg: var(--muted-foreground); --b-shadow: none; --b-shadow-press: none; } @media (hover: hover) { [data-slot="button"]:hover { background-color: var(--b-bg-hover); } [data-slot="button"][data-variant="ghost"]:hover { color: var(--foreground); } } [data-slot="button"]:active:not(:disabled):not([aria-disabled="true"]):not( [aria-busy="true"] ) { translate: 0 var(--motion-press-travel); background-color: var(--b-bg-press); box-shadow: var(--b-shadow-press); transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-fast), 90ms; transition-timing-function: var(--ease-out); } [data-slot="button"]:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]) { background-color: var(--sunken); color: var(--muted-foreground); box-shadow: inset 0 0 0 1px var(--border); } [data-slot="button"][data-variant="ghost"]:is(:disabled, [aria-disabled="true"]):not( [aria-busy="true"] ) { background-color: transparent; box-shadow: none; } /* Loading keeps the exact width: the label stays in flow but invisible. */ [data-slot="button-label"] { display: inline-flex; align-items: center; gap: inherit; } /* Opacity, not visibility, so the label still names the button. */ [data-slot="button-label"][data-hidden="true"] { opacity: 0; } [data-slot="button-busy"] { position: absolute; inset: 0; display: grid; place-items: center; } [data-slot="button-feedback"] { display: inline-flex; align-items: center; gap: inherit; overflow: clip; transition: width var(--duration-normal) var(--ease-out); } [data-slot="button-feedback-label"] { display: inline-flex; flex-shrink: 0; align-items: center; gap: inherit; width: max-content; } [data-slot="button-feedback-label"][data-enter="true"] { animation: caliper-feedback-enter var(--duration-normal) var(--ease-out); } [data-slot="button"][aria-busy="true"] { pointer-events: none; } [data-slot="button"][data-action-phase="error"] { color: var(--danger); } @media (prefers-reduced-motion: reduce) { [data-slot="button"], [data-slot="button-feedback"] { transition: none; } [data-slot="button"]:active:not(:disabled):not([aria-disabled="true"]):not( [aria-busy="true"] ) { translate: none; } [data-slot="button-feedback-label"], [data-slot="button-feedback-label"][data-enter="true"] { animation: none; } } /* Toggle: pressed is recessed, as a toggled tool in a button group is. */ /* Four attributes, so it wins over the group and toolbar pressed rules in any stylesheet order. */ [data-slot="button"][data-variant="ghost"][data-toggle][aria-pressed="true"] { --b-bg: var(--sunken); --b-bg-hover: var(--sunken); --b-bg-press: var(--sunken); --b-fg: var(--foreground); --b-shadow: var(--shadow-sunken); --b-shadow-press: var(--shadow-sunken); } } 58:T41b,/* Shared by chat-thread.tsx, comment-thread.tsx, generative-renderer.tsx, link-unfurl.tsx, message.tsx, multi-chain-swap.tsx, notification-stack.tsx; each imports it. Edit freely. */ @layer theme, base, components, utilities; @layer components { [data-slot="comment-action"] { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.375rem; border-radius: var(--radius-control); font-size: 0.75rem; color: var(--muted-foreground); outline: none; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } [data-slot="comment-action"]:hover { background: var(--muted); color: var(--foreground); } [data-slot="comment-action"]:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; } [data-slot="comment-action"] svg { width: 0.75rem; height: 0.75rem; } @media (pointer: coarse) { [data-slot="comment-action"] { min-height: 2.75rem; padding-inline: 0.5rem; } } } 59:T40b,/* Shared by chat-thread.tsx, message-scroller.tsx; each imports it. Edit freely. */ @layer theme, base, components, utilities; @layer components { [data-slot="chat-jump"] { position: absolute; bottom: 0.75rem; left: 50%; translate: -50% 0; display: inline-flex; align-items: center; gap: 0.375rem; min-height: 2rem; padding: 0 0.75rem; border: 1px solid var(--border); border-radius: 999px; background: var(--elevated); box-shadow: var(--shadow-overlay, 0 4px 16px rgb(0 0 0 / 0.18)); font-size: 0.75rem; outline: none; animation: caliper-thread-in var(--duration-normal) var(--ease-out); } [data-slot="chat-jump"] svg { width: 0.875rem; height: 0.875rem; } [data-slot="chat-jump"]:hover { background: var(--muted); } [data-slot="chat-jump"]:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { [data-slot="chat-jump"] { animation: none !important; } } } 5a:Tf08,/* chat-thread.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { [data-slot="chat-log"] { display: flex; flex-direction: column; height: 100%; padding: 0.25rem 0.25rem 0.5rem; overflow-y: auto; overscroll-behavior: contain; outline: none; } [data-slot="chat-log"]:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; border-radius: var(--radius-control); } [data-slot="chat-log"] > :first-child { margin-top: auto; } [data-slot="chat-day"] { display: flex; justify-content: center; margin: 1rem 0 0.5rem; font-size: 0.6875rem; color: var(--muted-foreground); } [data-slot="chat-day"] span { padding: 0.125rem 0.625rem; border-radius: 999px; background: var(--muted); } [data-slot="chat-row"][data-first="true"] { margin-top: 0.5rem; } [data-slot="chat-row"][data-first="false"] { margin-top: 2px; } [data-slot="chat-row"][data-fresh]:last-of-type { animation: caliper-thread-in var(--duration-normal) var(--ease-out); } [data-slot="chat-line"] { display: flex; gap: 0.5rem; } [data-slot="chat-row"][data-mine="true"] [data-slot="chat-line"] { justify-content: flex-end; } [data-slot="chat-stack"] { display: flex; flex-direction: column; max-width: min(78%, 32rem); min-width: 0; } [data-slot="chat-row"][data-mine="true"] [data-slot="chat-stack"] { align-items: flex-end; } [data-slot="chat-bubble"] { margin: 0; padding: 0.5rem 0.75rem; border-radius: 1rem; background: var(--muted); font-size: 0.875rem; line-height: 1.375rem; white-space: pre-wrap; overflow-wrap: anywhere; transition: opacity var(--duration-fast) var(--ease-out); } [data-slot="chat-row"][data-mine="true"] [data-slot="chat-bubble"] { background: var(--accent); color: var(--accent-foreground); } [data-slot="chat-row"][data-mine="false"][data-first="false"] [data-slot="chat-bubble"] { border-top-left-radius: 0.25rem; } [data-slot="chat-row"][data-mine="false"][data-tail="false"] [data-slot="chat-bubble"] { border-bottom-left-radius: 0.25rem; } [data-slot="chat-row"][data-mine="true"][data-first="false"] [data-slot="chat-bubble"] { border-top-right-radius: 0.25rem; } [data-slot="chat-row"][data-mine="true"][data-tail="false"] [data-slot="chat-bubble"] { border-bottom-right-radius: 0.25rem; } [data-slot="chat-bubble"][data-status="sending"] { opacity: 0.6; } [data-slot="chat-bubble"][data-status="failed"] { outline: 1.5px solid var(--danger); outline-offset: 1px; } [data-slot="chat-meta"] { margin-top: 0.125rem; padding-inline: 0.25rem; font-size: 0.6875rem; color: var(--muted-foreground); } [data-slot="chat-meta"][data-status="failed"] { color: var(--danger); } [data-slot="chat-typing"] { display: flex; align-items: center; gap: 0.5rem; min-height: 1.5rem; margin-top: 0.25rem; padding-inline: 0.25rem; font-size: 0.75rem; color: var(--muted-foreground); } [data-slot="typing-dots"] { display: inline-flex; gap: 3px; } [data-slot="typing-dots"] i { width: 5px; height: 5px; border-radius: 999px; background: currentColor; animation: caliper-typing 1.1s ease-in-out infinite; } [data-slot="typing-dots"] i:nth-child(2) { animation-delay: 0.15s; } [data-slot="typing-dots"] i:nth-child(3) { animation-delay: 0.3s; } @media (prefers-reduced-motion: reduce) { [data-slot="chat-row"], [data-slot="typing-dots"] i { animation: none !important; } } @keyframes caliper-typing { 0%, 60%, 100% { opacity: 0.35; } 30% { opacity: 1; } } } 5b:T416,/* thread-composer.tsx's styles; it imports this file. Edit freely. */ @layer theme, base, components, utilities; @layer components { [data-slot="thread-input"] { display: block; width: 100%; min-height: 2.5rem; padding: 0.5rem 0.75rem; border: 1px solid color-mix(in srgb, var(--muted-foreground) 75%, transparent); border-radius: var(--radius-surface, 8px); background: var(--background); font-size: 0.875rem; line-height: 1.5rem; color: var(--foreground); resize: none; outline: none; overflow-y: auto; transition: border-color var(--duration-fast) var(--ease-out); } [data-slot="thread-input"]:hover:enabled { border-color: var(--muted-foreground); } [data-slot="thread-input"]:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring); } [data-slot="thread-input"]:disabled { opacity: 0.45; cursor: not-allowed; } [data-slot="thread-input"]::placeholder { color: var(--muted-foreground); } } 4f:["$","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","@radix-ui/react-slot",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-slot","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":"@radix-ui/react-slot"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","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"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L50",null,{"namespace":"@caliper","registryDependencies":["https://caliperui.site/r/styles.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"ui/avatar.tsx","content":"$52","type":"registry:ui","target":"components/ui/avatar.tsx"},{"path":"ui/button.tsx","content":"$53","type":"registry:ui","target":"components/ui/button.tsx"},{"path":"ui/chat-thread.tsx","content":"$54","type":"registry:ui","target":"components/ui/chat-thread.tsx"},{"path":"ui/lib/cn.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n extend: { theme: { radius: [\"control\", \"surface\", \"overlay\"], shadow: [\"overlay\"] } },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","type":"registry:ui","target":"components/ui/lib/cn.ts"},{"path":"ui/thread-composer.tsx","content":"$55","type":"registry:ui","target":"components/ui/thread-composer.tsx"},{"path":"ui/avatar.css","content":"$56","type":"registry:file","target":"components/ui/avatar.css"},{"path":"ui/shared/loading-indicator.css","content":"/* Shared by button.tsx, confirm-morph.tsx, expanding-button-group.tsx, field.tsx; each imports it. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"loading-indicator\"] {\n animation: caliper-spin var(--duration-loading) var(--ease-linear) infinite;\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-slot=\"loading-indicator\"] {\n animation: none;\n }\n }\n}\n","type":"registry:file","target":"components/ui/shared/loading-indicator.css"},{"path":"ui/button.css","content":"$57","type":"registry:file","target":"components/ui/button.css"},{"path":"ui/shared/table-skeleton.css","content":"/* Shared by blog-grid.tsx, chat-thread.tsx, link-unfurl.tsx, multi-chain-swap.tsx, sortable-table.tsx; each imports it. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"table-skeleton\"] {\n display: block;\n height: 0.75rem;\n border-radius: 4px;\n background: var(--muted);\n animation: caliper-skeleton-pulse 1.4s ease-in-out infinite;\n }\n @media (prefers-reduced-motion: reduce) {\n [data-slot=\"table-skeleton\"] {\n animation: none;\n }\n }\n}\n","type":"registry:file","target":"components/ui/shared/table-skeleton.css"},{"path":"ui/shared/comment-action.css","content":"$58","type":"registry:file","target":"components/ui/shared/comment-action.css"},{"path":"ui/shared/chat-jump.css","content":"$59","type":"registry:file","target":"components/ui/shared/chat-jump.css"},{"path":"ui/chat-thread.css","content":"$5a","type":"registry:file","target":"components/ui/chat-thread.css"},{"path":"ui/thread-composer.css","content":"$5b","type":"registry:file","target":"components/ui/thread-composer.css"}],"className":"h-[70svh] min-h-80"}]]}] </article></body></html>