52: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"] 53:T513b,"use client"; import { useEffect, useId, useLayoutEffect, useRef, useState, type CSSProperties, type ReactNode, type RefObject } from "react"; /* * Comment Thread – one comment with its replies, including an assistant that reports what it did, in a single * self-contained file. Assistant replies can fold open to show the details; replying shows a thinking state * while an async answer comes back. The styles are injected below, so no extra files are needed. */ export type ThreadAuthor = { name: string; avatar?: ReactNode | string; assistant?: boolean }; export type ThreadMessage = { id: string; author: ThreadAuthor; createdAt: Date | number; text: string; /** Assistant replies: a short status line that folds open to show these details */ status?: string; details?: string[]; }; export type CommentThreadProps = { title?: string; messages: ThreadMessage[]; currentUser: ThreadAuthor; /** The assistant that answers – used for the thinking state */ assistant?: ThreadAuthor; /** * Called with every new reply. Return a message (or a promise of one) to let the assistant answer; * return nothing to just post the reply. */ onReply?: (text: string) => ThreadMessage | Promise | void; onClose?: () => void; className?: string; }; function ago(time: number, now: number) { const s = Math.max(0, Math.round((now - time) / 1000)); if (s < 45) return "just now"; const m = Math.round(s / 60); if (m < 60) return `${m}min ago`; const h = Math.round(m / 60); if (h < 24) return `${h}h ago`; const d = Math.round(h / 24); if (d < 30) return `${d}d ago`; return d < 365 ? `${Math.round(d / 30)}mo ago` : `${Math.round(d / 365)}y ago`; } // 1284 → "1,284" const count = new Intl.NumberFormat("en"); /** Two initials from whole letters – skips emoji and stray spaces, so "🦊 Fox" gives "F" */ const initials = (name: string) => name .split(/\s+/) .map((w) => Array.from(w).find((c) => /[\p{L}\p{N}]/u.test(c))) .filter(Boolean) .slice(0, 2) .join("") .toUpperCase(); export function CommentThread({ title = "Comment", messages: initial, currentUser, assistant, onReply, onClose, className, }: CommentThreadProps) { const [messages, setMessages] = useState(initial); // Assistant replies that are there from the start come in a beat after the comment above them const [firstIds] = useState(() => new Set(initial.filter((m) => m.author.assistant).map((m) => m.id))); const [open, setOpen] = useState>(new Set()); const [draft, setDraft] = useState(""); const [thinking, setThinking] = useState(false); const [now, setNow] = useState(() => Date.now()); const listRef = useRef(null); const morphRef = useSmoothHeight(listRef); useEffect(() => { const t = window.setInterval(() => setNow(Date.now()), 30_000); return () => window.clearInterval(t); }, []); // Follow the conversation as it grows useEffect(() => { listRef.current?.scrollTo({ top: listRef.current.scrollHeight, behavior: "smooth" }); }, [messages.length, thinking]); const send = async () => { const text = draft.trim(); if (!text || thinking) return; setDraft(""); setNow(Date.now()); lockHeight(true); setMessages((m) => [...m, { id: `m-${Date.now()}`, author: currentUser, createdAt: Date.now(), text }]); const answer = onReply?.(text); if (!answer) return; setThinking(true); try { const reply = await answer; if (reply) setMessages((m) => [...m, { ...reply, createdAt: Date.now() }]); } finally { setThinking(false); setNow(Date.now()); } }; // New messages keep the card at its height and the conversation scrolls up; folding details lets it grow again const lockHeight = (on: boolean) => { const list = listRef.current; if (list) list.style.maxHeight = on ? `${list.offsetHeight}px` : ""; }; const toggle = (id: string) => { lockHeight(false); setOpen((o) => { const next = new Set(o); if (next.has(id)) next.delete(id); else next.add(id); return next; }); }; return ( <>

{title}

{count.format(messages.length)} {messages.length === 1 ? "message" : "messages"} {onClose && ( )}

{messages.map((m) => { const isOpen = open.has(m.id); const command = /^\/edit\b/i.test(m.text.trim()); return (

{m.author.name} {ago(+m.createdAt, now)}

{m.text && (

{command ? ( <> /Edit {m.text.trim().replace(/^\/edit\s*/i, "")} ) : ( m.text )}

)} {m.status && (

{!!m.details?.length && (

)}

); })} {thinking && assistant && (

{assistant.name}

Thinking…

)}

); } function Avatar({ author }: { author: ThreadAuthor }) { // A picture that fails to load falls back to the initials const [failed, setFailed] = useState(false); if (author.avatar && typeof author.avatar !== "string") return {author.avatar}; if (typeof author.avatar === "string" && !failed) { return

setFailed(true)} />; } return ( ); } /** A simple assistant mark: a full circle with a blue-to-violet gradient – pass your own logo as `avatar` instead */ export function AssistantMark() { const id = useId(); return ( ); } const Icon = ({ d, size = 16 }: { d: string; size?: number }) => ( ); /** * Lets a box glide to the height of its content instead of jumping: the outer box follows the inner one * with a height transition whenever the content grows or shrinks. */ function useSmoothHeight(inner: RefObject) { const outer = useRef(null); useLayoutEffect(() => { const o = outer.current; const i = inner.current; if (!o || !i) return; const sync = () => { o.style.height = `${i.offsetHeight}px`; }; sync(); const ro = new ResizeObserver(sync); ro.observe(i); // Transitions switch on after the first measurement, so the first render doesn't animate const frame = requestAnimationFrame(() => o.setAttribute("data-smooth", "")); return () => { ro.disconnect(); cancelAnimationFrame(frame); }; }, [inner]); return outer; } /* ---------- Styles ---------- */ const css = /* css */ ` .ui-ct { --ui-ct-tray: #f0f0f0; --ui-ct-card: #ffffff; --ui-ct-ink: #171717; --ui-ct-text: #404040; --ui-ct-muted: #8f8f8f; --ui-ct-accent: #2f6bff; --ui-ct-ok: #1f8a4c; --ui-ct-accent-text: #2f6bff; --ui-ct-border: #e5e5e5; --ui-ct-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); --ui-ct-hover: rgba(0, 0, 0, 0.05); --ui-ct-row-hover: #f5f5f5; --ui-ct-initials: #eef3ff; --ui-ct-dot: #d4d4d4; --ui-ct-subtle: #a3a3a3; --ui-ct-avatar-ring: rgba(0, 0, 0, 0.06); --ui-ct-ease: cubic-bezier(0.22, 1, 0.36, 1); box-sizing: border-box; width: 100%; max-width: 420px; /* Like the Chat Composer: a gray tray with heading and reply field, the white card sits on top of it */ background: var(--ui-ct-tray); /* The gray tray frames the white card on every side */ padding: 6px; border-radius: 22px; font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--ui-ct-ink); -webkit-font-smoothing: antialiased; } .ui-ct *, .ui-ct *::before, .ui-ct *::after { box-sizing: border-box; } .ui-ct button { margin: 0; font: inherit; color: inherit; cursor: pointer; } .ui-ct button:focus-visible { outline: 2px solid var(--ui-ct-accent); outline-offset: 2px; } .ui-ct__head { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 10px 6px 18px; } /* A long title takes two lines at most – the count and close stay in place */ .ui-ct__title { display: -webkit-box; min-width: 0; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; margin: 0; font-size: 15px; font-weight: 500; line-height: 22px; } .ui-ct__count { flex: none; margin-right: auto; white-space: nowrap; font-size: 12.5px; color: var(--ui-ct-muted); } .ui-ct__icon-btn { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ui-ct-muted) !important; transition: background-color 140ms ease, color 140ms ease; } .ui-ct__icon-btn:hover { background: var(--ui-ct-hover); color: var(--ui-ct-ink) !important; } .ui-ct__card { background: var(--ui-ct-card); border: 1px solid var(--ui-ct-border); border-radius: 16px; box-shadow: var(--ui-ct-shadow); } .ui-ct__scroll { display: grid; gap: 18px; align-content: start; min-height: var(--ui-ct-min-height, 0px); max-height: var(--ui-ct-max-height, 340px); padding: 16px 18px 18px; overflow-y: auto; scrollbar-width: thin; } /* Each message builds up piece by piece: name row, text, status – the assistant's first reply a beat later */ .ui-ct__msg { --ui-ct-d: 0ms; min-width: 0; } .ui-ct__msg[data-delayed] { --ui-ct-d: 700ms; } .ui-ct__msg > * { animation: ui-ct-in 420ms var(--ui-ct-ease) both; animation-delay: var(--ui-ct-d); } .ui-ct__msg > :nth-child(2) { animation-delay: calc(var(--ui-ct-d) + 80ms); } .ui-ct__msg > :nth-child(3) { animation-delay: calc(var(--ui-ct-d) + 160ms); } .ui-ct__meta { display: flex; align-items: center; gap: 9px; min-width: 0; } .ui-ct__avatar { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; object-fit: cover; overflow: hidden; } img.ui-ct__avatar { box-shadow: 0 0 0 1px var(--ui-ct-avatar-ring); } .ui-ct__avatar svg { width: 100%; height: 100%; } .ui-ct__avatar--initials { background: var(--ui-ct-initials); font-size: 9px; font-weight: 600; color: var(--ui-ct-accent-text); } .ui-ct__name { min-width: 0; overflow: hidden; font-size: 14px; font-weight: 500; line-height: 20px; white-space: nowrap; text-overflow: ellipsis; } .ui-ct__time { flex: none; margin-left: auto; white-space: nowrap; font-size: 12.5px; color: var(--ui-ct-muted); font-variant-numeric: tabular-nums; } .ui-ct__text { margin: 8px 0 0; font-size: 14px; line-height: 21px; overflow-wrap: anywhere; white-space: pre-line; text-align: start; color: var(--ui-ct-text); } .ui-ct__command { color: var(--ui-ct-muted); } .ui-ct__status { margin-top: 8px; } .ui-ct__status-btn { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; height: 26px; padding: 0 6px 0 8px; border: 0; border-radius: 8px; background: transparent; font-size: 14px !important; transition: background-color 140ms ease; } /* The global button reset sets margin: 0 – shift the row so the check icon sits centered under the avatars */ .ui-ct .ui-ct__status-btn { margin-left: -4px; } .ui-ct__status-btn:hover:not(:disabled) { background: var(--ui-ct-row-hover); } .ui-ct__status-btn:disabled { cursor: default; } .ui-ct__status-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ui-ct__check, .ui-ct__chevron { flex: none; } .ui-ct__check { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--ui-ct-ok); color: #fff; } .ui-ct__chevron { display: grid; color: var(--ui-ct-muted); transition: transform 260ms var(--ui-ct-ease); } .ui-ct__status-btn[aria-expanded="true"] .ui-ct__chevron { transform: rotate(180deg); } .ui-ct__details { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--ui-ct-ease); } .ui-ct__details[data-open] { grid-template-rows: 1fr; } .ui-ct__details ul { min-height: 0; overflow: hidden; margin: 0; padding: 0 0 0 28px; list-style: none; } .ui-ct__details li { position: relative; margin-top: 6px; font-size: 13px; line-height: 19px; overflow-wrap: anywhere; text-align: start; color: var(--ui-ct-muted); /* Closing: lines fade out quickly while the box folds */ opacity: 0; transform: translateY(-4px); transition: opacity 160ms ease, transform 220ms var(--ui-ct-ease); } /* Opening: lines come in one after another */ .ui-ct__details[data-open] li { opacity: 1; transform: none; transition-duration: 320ms, 420ms; transition-delay: calc(60ms + var(--i, 0) * 60ms); } /* Tree lines instead of dots: each line gets its own corner – down on the axis of the check icon, then a rounded turn right */ .ui-ct__details li:first-child { margin-top: 5px; } .ui-ct__details li::before { content: ""; position: absolute; left: -16.625px; top: -3px; width: 10.5px; height: 13px; border-left: 1.25px solid var(--ui-ct-dot); border-bottom: 1.25px solid var(--ui-ct-dot); border-bottom-left-radius: 5px; } /* The first branch starts with a small gap under the check icon */ .ui-ct__details li:first-child::before { top: -5px; height: 15px; } .ui-ct__thinking { display: inline-block; margin: 8px 0 0; font-size: 14px; background: linear-gradient(90deg, var(--ui-ct-subtle) 0%, var(--ui-ct-subtle) 35%, rgba(255, 255, 255, 0.9) 50%, var(--ui-ct-subtle) 65%, var(--ui-ct-subtle) 100%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: ui-ct-shine 1.6s linear infinite; } .ui-ct__composer { display: flex; align-items: center; gap: 10px; padding: 9px 9px 9px 18px; } .ui-ct__input { flex: 1; min-width: 0; height: 32px; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--ui-ct-ink); } .ui-ct__input::placeholder { color: var(--ui-ct-subtle); } .ui-ct__send { display: grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: linear-gradient(#323137, #201e25); box-shadow: 0 0 0 1px #0d0d0d, 0 2px 4px rgba(0, 0, 0, 0.1); color: #fff !important; transition: opacity 160ms ease, transform 160ms ease; } .ui-ct__send:disabled { opacity: 0.3; cursor: default; } .ui-ct__send:not(:disabled):active { transform: scale(0.94); } @keyframes ui-ct-in { from { opacity: 0; transform: translateY(4px); } } @keyframes ui-ct-shine { from { background-position: 100% 0; } to { background-position: 0% 0; } } @media (prefers-reduced-motion: reduce) { .ui-ct__msg > *, .ui-ct__thinking { animation: none; } .ui-ct__details, .ui-ct__details li, .ui-ct__chevron { transition: none; } } /* Height changes glide instead of jumping */ .ui-ct__morph { overflow: hidden; } .ui-ct__morph[data-smooth] { transition: height 380ms cubic-bezier(0.22, 1, 0.36, 1); } @media (prefers-reduced-motion: reduce) { .ui-ct__morph[data-smooth] { transition: none; } } /* Text fields: no focus box while typing – also against global :focus-visible rules of the host page */ .ui-ct input:not([type="checkbox"]):not([type="radio"]):focus-visible, .ui-ct textarea:focus-visible, .ui-ct [contenteditable]:focus-visible { outline: none; } /* Dark mode: follows a .dark class or data-theme="dark" on any ancestor, e.g. */ :where(.dark, [data-theme="dark"]) .ui-ct { --ui-ct-tray: #161618; --ui-ct-card: #232326; --ui-ct-ink: #ededed; --ui-ct-text: #c4c4c4; --ui-ct-muted: #8f8f8f; --ui-ct-ok: #2a9d5c; --ui-ct-accent-text: #6b95ff; --ui-ct-border: rgba(255, 255, 255, 0.08); --ui-ct-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); --ui-ct-hover: rgba(255, 255, 255, 0.06); --ui-ct-row-hover: rgba(255, 255, 255, 0.06); --ui-ct-initials: rgba(47, 107, 255, 0.16); --ui-ct-dot: rgba(255, 255, 255, 0.14); --ui-ct-subtle: #6b6b70; --ui-ct-avatar-ring: rgba(255, 255, 255, 0.08); } :where(.dark, [data-theme="dark"]) .ui-ct__send { background: linear-gradient(#f4f4f5, #e4e4e7); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.35), inset 0 1px 0 #ffffff; color: #121213 !important; } `; 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L52",null,{"files":[{"path":"registry/comment-thread/comment-thread.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]