{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "message-branch", "title": "Message branch", "description": "Message branch is a production-ready ai component from BJORK UI, packaged for shadcn registries.", "dependencies": [ "clsx", "framer-motion", "lucide-react", "next-themes", "tailwind-merge" ], "files": [ { "path": "components/bjork-ui/ai/message-branch.tsx", "content": "\"use client\";\n\nimport { useEffect, useId, useRef, useState, type KeyboardEvent, type ReactNode } from \"react\";\nimport { Check, Copy, PencilLine, RefreshCw } from \"lucide-react\";\nimport { LiveRegion } from \"@/components/bjork-ui/_core/a11y\";\nimport { easeCss } from \"@/components/bjork-ui/_core/motion\";\nimport {\n FOCUS_RING,\n PRESS,\n SHIMMER_TEXT_CSS,\n useAiTone,\n useHydrated,\n useReduceMotion,\n type BjorkTone,\n} from \"@/components/bjork-ui/ai/_shared\";\nimport { StrokeMorphIcon } from \"@/components/bjork-ui/utilities/stroke-morph-icon\";\nimport { cn } from \"@/lib/utils\";\n\nexport type MessageBranchRole = \"user\" | \"assistant\";\n\nexport interface MessageVersion {\n id: string;\n /** Plain text. Blank lines split paragraphs. Use `renderContent` for markdown. */\n content: string;\n /** Model name shown in the meta line, such as \"Halcyon 3 Pro\". */\n model?: string;\n /** When the version was created. Epoch milliseconds, ISO string or Date. Formatted on the client. */\n createdAt?: number | string | Date;\n /** True while this version is still being written. */\n streaming?: boolean;\n}\n\nexport interface MessageBranchProps {\n versions: MessageVersion[];\n role?: MessageBranchRole;\n /** Controlled version index. */\n index?: number;\n /** Uncontrolled start. Defaults to the newest version. Uncontrolled branches jump to a new version when one is added. */\n defaultIndex?: number;\n onIndexChange?: (index: number) => void;\n /** Assistant only. Shows Regenerate; a placeholder version streams until a new version arrives in `versions`. */\n onRegenerate?: () => void;\n /** User only. Shows Edit; \"Save & submit\" calls this with the new text so a new branch can be added. */\n onEdit?: (content: string) => void;\n /** Called after a version is copied. */\n onCopy?: (content: string) => void;\n /** Custom rendering for a version's content, for example a StreamingMessage. */\n renderContent?: (version: MessageVersion) => ReactNode;\n tone?: BjorkTone;\n className?: string;\n}\n\nconst HOUR = 3_600_000;\nconst BASE = Date.UTC(2026, 9, 8, 14, 12);\n\nexport const SAMPLE_USER_VERSIONS: MessageVersion[] = [\n {\n id: \"u1\",\n content: \"Write a one-line release note for the new offline drafts feature in Fieldnotes.\",\n createdAt: BASE,\n },\n];\n\nexport const SAMPLE_ASSISTANT_VERSIONS: MessageVersion[] = [\n {\n id: \"a1\",\n content: \"Drafts now save on your device first, so a dropped connection never costs you a sentence.\",\n model: \"Halcyon 3 Pro\",\n createdAt: BASE + 20_000,\n },\n {\n id: \"a2\",\n content:\n \"Fieldnotes now keeps every draft on your device and syncs it when you're back online. Write on a plane, in a tunnel or in a café with bad Wi-Fi, and nothing is lost.\",\n model: \"Halcyon 3 Pro\",\n createdAt: BASE + 0.05 * HOUR,\n },\n {\n id: \"a3\",\n content: \"Offline drafts: write anywhere, sync when you're back.\",\n model: \"Kestrel Mini\",\n createdAt: BASE + 0.1 * HOUR,\n },\n];\n\nfunction toDate(value: MessageVersion[\"createdAt\"]): Date | null {\n if (value === undefined) return null;\n const d = value instanceof Date ? value : new Date(value);\n return Number.isNaN(d.getTime()) ? null : d;\n}\n\nconst iconButton = cn(\n \"relative grid size-7 cursor-pointer place-items-center rounded-[7px] text-[color:var(--bjork-text-faint)] transition-colors hover:bg-[var(--bjork-surface-active)] hover:text-[color:var(--bjork-text)] disabled:pointer-events-none disabled:opacity-40 aria-disabled:cursor-default aria-disabled:bg-transparent aria-disabled:opacity-40\",\n FOCUS_RING,\n PRESS,\n);\n\n/**\n * A chat message with versions. Step between branches with the switcher or the arrow keys, copy, regenerate an\n * answer or edit a prompt into a new branch. Versions crossfade in place, so switching never moves the thread.\n */\nexport function MessageBranch({\n versions,\n role = \"assistant\",\n index,\n defaultIndex,\n onIndexChange,\n onRegenerate,\n onEdit,\n onCopy,\n renderContent,\n tone: toneProp,\n className,\n}: MessageBranchProps) {\n const { pal, style } = useAiTone(toneProp);\n const reduce = useReduceMotion();\n const hydrated = useHydrated();\n const isUser = role === \"user\";\n const total = versions.length;\n const textareaId = useId();\n\n // Uncontrolled index. A new version arriving clears the regenerate placeholder and, uncontrolled, selects it.\n const [inner, setInner] = useState({\n index: defaultIndex ?? Math.max(0, total - 1),\n count: total,\n pending: false,\n });\n if (inner.count !== total) {\n setInner({\n index: total > inner.count ? total - 1 : Math.min(inner.index, Math.max(0, total - 1)),\n count: total,\n pending: false,\n });\n }\n const controlled = index !== undefined;\n const current = Math.min(Math.max(0, controlled ? index : inner.index), Math.max(0, total - 1));\n const pending = inner.pending;\n const shown = pending ? total : current; // the placeholder sits after the last version\n const count = pending ? total + 1 : total;\n\n const select = (next: number) => {\n const clamped = Math.min(Math.max(0, next), total - 1);\n if (clamped === current && !pending) return;\n setInner((s) => ({ ...s, index: clamped, pending: false }));\n onIndexChange?.(clamped);\n };\n\n const step = (delta: number) => {\n if (pending) {\n if (delta < 0) select(total - 1);\n return;\n }\n select(current + delta);\n };\n\n const onSwitcherKey = (e: KeyboardEvent) => {\n if (e.key === \"ArrowLeft\") {\n e.preventDefault();\n step(-1);\n } else if (e.key === \"ArrowRight\") {\n e.preventDefault();\n step(1);\n }\n };\n\n // Copy, with a short \"Copied\" state.\n const [copied, setCopied] = useState(false);\n const copyTimer = useRef(undefined);\n useEffect(() => () => window.clearTimeout(copyTimer.current), []);\n const version = versions[current];\n const copy = async () => {\n if (!version) return;\n try {\n await navigator.clipboard.writeText(version.content);\n } catch {\n return;\n }\n onCopy?.(version.content);\n setCopied(true);\n window.clearTimeout(copyTimer.current);\n copyTimer.current = window.setTimeout(() => setCopied(false), 1600);\n };\n\n const regenerate = () => {\n setInner((s) => ({ ...s, pending: true }));\n onRegenerate?.();\n };\n\n // Inline edit for user messages.\n const [draft, setDraft] = useState(null);\n const editButtonRef = useRef(null);\n const editing = draft !== null;\n const closeEdit = () => {\n setDraft(null);\n requestAnimationFrame(() => editButtonRef.current?.focus());\n };\n const submitEdit = () => {\n const text = draft?.trim();\n if (!text) return;\n onEdit?.(text);\n closeEdit();\n };\n\n const [announce, setAnnounce] = useState({ shown, message: \"\" });\n if (announce.shown !== shown) {\n setAnnounce({ shown, message: pending ? \"Regenerating response\" : `Version ${shown + 1} of ${count}` });\n }\n const liveMessage = copied ? \"Copied\" : announce.message;\n\n const meta = (() => {\n if (pending) return \"Regenerating…\";\n if (!version) return \"\";\n const date = hydrated ? toDate(version.createdAt) : null;\n const time = date ? date.toLocaleTimeString(\"en-US\", { hour: \"numeric\", minute: \"2-digit\" }) : null;\n return [version.model, time].filter(Boolean).join(\" · \");\n })();\n\n const body = (v: MessageVersion) => {\n if (v.streaming && v.content === \"\") return ;\n if (renderContent) return renderContent(v);\n return v.content\n .split(/\\n{2,}/)\n .map((p, i) => (\n

\n {p}\n

\n ));\n };\n\n const fade = reduce ? \"none\" : `opacity 220ms ${easeCss.out}, filter 220ms ${easeCss.out}`;\n\n return (\n \n \n\n {editing ? (\n
\n \n setDraft(e.target.value)}\n onFocus={(e) => e.currentTarget.setSelectionRange(e.currentTarget.value.length, e.currentTarget.value.length)}\n onKeyDown={(e) => {\n if (e.key === \"Escape\") {\n e.preventDefault();\n closeEdit();\n } else if (e.key === \"Enter\" && (e.metaKey || e.ctrlKey)) {\n e.preventDefault();\n submitEdit();\n }\n }}\n rows={2}\n className=\"block max-h-48 min-h-[44px] w-full resize-none rounded-[8px] bg-transparent px-1.5 py-1 text-[14px] leading-[22px] text-[color:var(--bjork-text)] outline-none [field-sizing:content] placeholder:text-[color:var(--bjork-text-faint)]\"\n />\n
\n \n Cancel\n \n \n Save & submit\n \n
\n
\n ) : (\n \n {/* Every version shares one grid cell, so the box is as tall as the tallest and switching never jumps. */}\n {versions.map((v, i) => {\n const active = !pending && i === current;\n return (\n \n {body(v)}\n \n );\n })}\n {pending && (\n
\n \n
\n )}\n \n )}\n\n {!editing && (\n
\n {isUser && meta &&
\n )}\n\n \n \n \n \n\n {!isUser && onRegenerate && (\n \n \n \n )}\n\n {isUser && onEdit && (\n setDraft(version?.content ?? \"\")}\n className={iconButton}\n >\n \n \n )}\n\n {!isUser && meta && }\n \n )}\n\n \n \n );\n}\n\nfunction MetaLine({ text, className }: { text: string; className?: string }) {\n return (\n \n {text}\n \n );\n}\n\n/** Three shimmering lines for a version that has not produced text yet. */\nfunction Placeholder() {\n return (\n
\n Writing a new version…\n \n \n
\n );\n}\n", "type": "registry:component", "target": "@components/bjork-ui/ai/message-branch.tsx" }, { "path": "components/bjork-ui/_core/a11y.tsx", "content": "import type { ReactNode } from \"react\";\n\n// Text for assistive tech only.\nexport function VisuallyHidden({ children }: { children: ReactNode }) {\n return {children};\n}\n\n// Announces `message` when it changes. Same text re-rendered does not re-announce.\nexport function LiveRegion({\n message,\n politeness = \"polite\",\n}: {\n message: string;\n politeness?: \"polite\" | \"assertive\";\n}) {\n return (\n \n {message}\n \n );\n}\n", "type": "registry:component", "target": "@components/bjork-ui/_core/a11y.tsx" }, { "path": "components/bjork-ui/_core/motion.ts", "content": "// Shared springs, easings and durations. Components import these instead of inventing values.\n\nexport const springs = {\n press: { type: \"spring\", stiffness: 500, damping: 30, mass: 0.6 },\n snappy: { type: \"spring\", stiffness: 400, damping: 25, mass: 1 },\n standard: { type: \"spring\", stiffness: 300, damping: 30, mass: 0.8 },\n soft: { type: \"spring\", stiffness: 200, damping: 25, mass: 1.2 },\n settle: { type: \"spring\", stiffness: 380, damping: 30, mass: 0.8 },\n blurIn: { type: \"spring\", stiffness: 400, damping: 28, mass: 0.6 },\n} as const;\n\nexport const ease = {\n out: [0.23, 1, 0.32, 1],\n inOut: [0.77, 0, 0.175, 1],\n drawer: [0.32, 0.72, 0, 1],\n} as const;\n\nexport const easeCss = {\n out: \"cubic-bezier(0.23,1,0.32,1)\",\n inOut: \"cubic-bezier(0.77,0,0.175,1)\",\n drawer: \"cubic-bezier(0.32,0.72,0,1)\",\n} as const;\n\nexport const durations = { press: 140, tooltip: 160, menu: 200, panel: 280 } as const; // ms\n\n// Cubic bezier easing for canvas and rAF code. Returns progress y for input x in [0, 1].\nexport function cubicBezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number {\n const cx = 3 * x1;\n const bx = 3 * (x2 - x1) - cx;\n const ax = 1 - cx - bx;\n const cy = 3 * y1;\n const by = 3 * (y2 - y1) - cy;\n const ay = 1 - cy - by;\n const sampleX = (s: number) => ((ax * s + bx) * s + cx) * s;\n const sampleY = (s: number) => ((ay * s + by) * s + cy) * s;\n const sampleDX = (s: number) => (3 * ax * s + 2 * bx) * s + cx;\n\n const solveX = (x: number) => {\n let s = x;\n for (let i = 0; i < 8; i++) {\n const err = sampleX(s) - x;\n if (Math.abs(err) < 1e-6) return s;\n const d = sampleDX(s);\n if (Math.abs(d) < 1e-6) break;\n s -= err / d;\n }\n let lo = 0;\n let hi = 1;\n s = x;\n while (lo < hi) {\n const v = sampleX(s);\n if (Math.abs(v - x) < 1e-6) return s;\n if (x > v) lo = s;\n else hi = s;\n s = (lo + hi) / 2;\n if (hi - lo < 1e-7) break;\n }\n return s;\n };\n\n return (t: number) => {\n if (t <= 0) return 0;\n if (t >= 1) return 1;\n return sampleY(solveX(t));\n };\n}\n", "type": "registry:component", "target": "@components/bjork-ui/_core/motion.ts" }, { "path": "components/bjork-ui/ai/_shared.ts", "content": "\"use client\";\n\n// Shared plumbing for the bjork-ui AI components: tone tokens, reduced motion, controllable state and\n// number formatting. Every AI component imports from here so they read as one family.\n\nimport {\n useCallback,\n useLayoutEffect,\n useRef,\n useState,\n useSyncExternalStore,\n type CSSProperties,\n} from \"react\";\nimport { useReducedMotion } from \"framer-motion\";\nimport { BJORK_PALETTE, type BjorkTone } from \"@/components/bjork-ui/_core/palette\";\nimport { useBjorkTone } from \"@/components/bjork-ui/_core/tone\";\nimport { surfaceVars } from \"@/components/bjork-ui/_core/surface\";\n\nexport type { BjorkTone };\nexport type BjorkPalette = (typeof BJORK_PALETTE)[BjorkTone];\n\nconst noopSubscribe = () => () => {};\n\n/** False on the server and the first client render, true after hydration. */\nexport function useHydrated(): boolean {\n return useSyncExternalStore(\n noopSubscribe,\n () => true,\n () => false,\n );\n}\n\n/** Hydration-safe reduced motion: both sides report \"not reduced\" until mount, then the real value applies. */\nexport function useReduceMotion(): boolean {\n const hydrated = useHydrated();\n const reduced = useReducedMotion();\n return hydrated && reduced === true;\n}\n\n/**\n * Resolves the tone and returns the CSS custom properties for it. Spread `style` on the component root so an\n * explicit `tone` prop wins over the page theme, and status colours (success, warning, error) are always defined.\n */\nexport function useAiTone(toneProp?: BjorkTone) {\n const tone = useBjorkTone(toneProp);\n const pal = BJORK_PALETTE[tone];\n const style = {\n ...surfaceVars(tone),\n \"--bjork-text\": pal.text,\n \"--bjork-text-medium\": pal.textMedium,\n \"--bjork-text-muted\": pal.textMuted,\n \"--bjork-text-soft\": pal.textSoft,\n \"--bjork-text-faint\": pal.textFaint,\n \"--bjork-hair\": pal.hair,\n \"--bjork-border\": pal.border,\n \"--bjork-border-strong\": pal.borderStrong,\n \"--bjork-surface\": pal.surface,\n \"--bjork-raised\": pal.raised,\n \"--bjork-surface-active\": pal.active,\n \"--bjork-accent\": pal.accent,\n \"--bjork-accent-ink\": pal.accentInk,\n \"--bjork-accent-fill\": pal.accentFill,\n \"--bjork-accent-soft\": pal.accentSoft,\n \"--bjork-accent-muted\": pal.accentMuted,\n \"--bjork-accent-foreground\": pal.accentFg,\n \"--bjork-success\": pal.success,\n \"--bjork-warning\": pal.warning,\n \"--bjork-error\": pal.error,\n \"--bjork-ring-offset\": pal.bg,\n colorScheme: tone,\n } as CSSProperties;\n return { tone, pal, style };\n}\n\n/** Classes for the shared keyboard focus ring. */\nexport const FOCUS_RING =\n \"outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--bjork-accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[color:var(--bjork-ring-offset)]\";\n\n/** Classes for the shared press feedback. */\nexport const PRESS = \"transition-transform duration-150 ease-out active:scale-[0.97] motion-reduce:transition-none\";\n\n/**\n * Controlled-or-uncontrolled state. Pass `value` to control it; `onChange` fires for every change either way.\n */\nexport function useControllable(\n value: T | undefined,\n defaultValue: T,\n onChange?: (next: T) => void,\n): [T, (next: T) => void] {\n const controlled = value !== undefined;\n const [inner, setInner] = useState(defaultValue);\n const current = controlled ? value : inner;\n const onChangeRef = useRef(onChange);\n useLayoutEffect(() => {\n onChangeRef.current = onChange;\n });\n const set = useCallback(\n (next: T) => {\n if (!controlled) setInner(next);\n onChangeRef.current?.(next);\n },\n [controlled],\n );\n return [current, set];\n}\n\n/** 1234 -> \"1,234\", 18400 -> \"18.4k\", 1_200_000 -> \"1.2M\". */\nexport function formatTokens(n: number): string {\n if (n < 10_000) return Math.round(n).toLocaleString(\"en-US\");\n if (n < 1_000_000) return `${(n / 1000).toFixed(n < 100_000 ? 1 : 0).replace(/\\.0$/, \"\")}k`;\n return `${(n / 1_000_000).toFixed(n < 10_000_000 ? 2 : 1).replace(/\\.?0+$/, \"\")}M`;\n}\n\n/** US dollars with sub-cent precision when it matters: 0.0042 -> \"$0.0042\", 12.5 -> \"$12.50\". */\nexport function formatCost(usd: number): string {\n if (usd === 0) return \"$0.00\";\n if (Math.abs(usd) < 0.01) return `$${usd.toFixed(4)}`;\n if (Math.abs(usd) < 1) return `$${usd.toFixed(3)}`;\n return `$${usd.toLocaleString(\"en-US\", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;\n}\n\n/** 640 -> \"640ms\", 4200 -> \"4.2s\", 95000 -> \"1m 35s\". */\nexport function formatDuration(ms: number): string {\n if (ms < 1000) return `${Math.round(ms)}ms`;\n if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;\n const m = Math.floor(ms / 60_000);\n const s = Math.round((ms % 60_000) / 1000);\n return `${m}m ${s}s`;\n}\n\n/** 2_400_000 bytes -> \"2.4 MB\". */\nexport function formatBytes(bytes: number): string {\n if (bytes < 1024) return `${bytes} B`;\n const units = [\"KB\", \"MB\", \"GB\"];\n let v = bytes / 1024;\n let i = 0;\n while (v >= 1024 && i < units.length - 1) {\n v /= 1024;\n i++;\n }\n return `${v.toFixed(v < 10 ? 1 : 0)} ${units[i]}`;\n}\n\n/** Shimmer keyframes for \"working\" text. Mount once with