58: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"] 59: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"] 5a: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"] 5b: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"] 50:["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@streamdown/mermaid"}] 51:["$","li","radix-ui",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","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"}]]}]}] 52:["$","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"}]]}]}] 53:["$","li","@hugeicons/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Freact","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":"@hugeicons/react"}]]}]}] 54:["$","li","@hugeicons/core-free-icons",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Fcore-free-icons","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":"@hugeicons/core-free-icons"}]]}]}] 55:["$","$L58",null,{"namespace":"@nexus-ui","registryDependencies":["button","avatar","tooltip","kbd"]}] 56:["$","$L59",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":["$","$L5a",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@source \"../node_modules/streamdown/dist/index.js\" {\n\n}\n\n@source \"../node_modules/@streamdown/code/dist/*.js\" {\n\n}\n\n@source \"../node_modules/@streamdown/mermaid/dist/*.js\" {\n\n}\n\n@source \"../node_modules/@streamdown/math/dist/*.js\" {\n\n}\n\n@source \"../node_modules/@streamdown/cjk/dist/*.js\" {\n\n}\n\n@layer base {\n\tcode {\n\t\tcounter-reset: line;\n\t}\n\tcode .line::before {\n\t\tcounter-increment: line;\n\t\tcontent: counter(line);\n\t\tdisplay: inline-block;\n\t\twidth: 1rem;\n\t\tmargin-right: 1.25rem;\n\t\ttext-align: right;\n\t\tcolor: #737373;\n\t\tpadding-left: 0;\n\t\tfont-size: 14px;\n\t}\n\tcode .line {\n\t\tpadding-left: 0px !important;\n\t}\n\t.no-scrollbar {\n\t\t-ms-overflow-style: none;\n\t\tscrollbar-width: none;\n\t}\n\t.no-scrollbar::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n}"}]}]]}]]}]}]}] 5c:T2463,"use client"; import * as React from "react"; import { Slot } from "@radix-ui/react-slot"; import { Streamdown } from "streamdown"; import { cjk } from "@streamdown/cjk"; import { code } from "@streamdown/code"; import { math } from "@streamdown/math"; import { mermaid } from "@streamdown/mermaid"; import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; import { CodeBlock } from "@/components/nexus-ui/codeblock"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip"; import { Kbd } from "@/components/ui/kbd"; import { cn } from "@/lib/utils"; const streamdownPlugins = { cjk, code, math, mermaid } as const; const messageMarkdownProseClasses = [ "prose max-w-none text-primary font-normal text-sm leading-6.5", // headings "prose-headings:font-[450] prose-headings:leading-5.5 prose-h2:tracking-[-0.45px] prose-headings:mb-4 prose-headings:mt-6 prose-h1:text-xl prose-h2:text-lg prose-h3:text-base prose-h3:leading-4.5 prose-h3:tracking-[-0.4px] prose-h4:text-sm prose-h5:text-xs prose-h6:text-xs", // heading links "prose-headings:[&_a]:no-underline prose-headings:[&_a]:shadow-none prose-headings:[&_a]:text-inherit", // body text "prose-p:mb-1 prose-p:mt-4", // lead "prose-lead:text-primary", // links "[&_[data-streamdown=link]]:text-foreground [&_[data-streamdown=link]]:font-normal [&_[data-streamdown=link]]:underline [&_[data-streamdown=link]]:underline-offset-2", // strong "[&_[data-streamdown=strong]]:text-foreground [&_[data-streamdown=strong]]:font-[550]", // lists "prose-li:my-[-0.5px] prose-li:marker:text-muted-foreground/50 prose-ul:my-0 prose-ol:my-0 prose-ol:pl-3", ] as const; type MessageFrom = "user" | "assistant"; type MessageContextValue = { from: MessageFrom; }; const MessageContext = React.createContext(null); function useMessageContext() { return React.useContext(MessageContext); } type MessageProps = React.HTMLAttributes & { from: MessageFrom; }; const Message = React.forwardRef(function Message( { className, from, children, "aria-label": ariaLabelProp, "aria-labelledby": ariaLabelledBy, ...props }, ref, ) { const ariaLabel = ariaLabelProp ?? (ariaLabelledBy == null ? from === "user" ? "User message" : "Assistant message" : undefined); return (

{children}

); }); type MessageStackProps = React.HTMLAttributes; function MessageStack({ className, ...props }: MessageStackProps) { const ctx = useMessageContext(); const from = ctx?.from ?? "assistant"; return (

); } type MessageContentProps = React.HTMLAttributes; function MessageContent({ className, ...props }: MessageContentProps) { const ctx = useMessageContext(); const from = ctx?.from ?? "assistant"; return (

); } type MessageMarkdownProps = React.ComponentProps; function MessageMarkdown({ className, components, ...props }: MessageMarkdownProps) { const mergedComponents = React.useMemo( () => { const defaultComponents = { code: CodeBlock, inlineCode: ({ children, className, ...props }: React.HTMLAttributes) => (


            {children}

), table: (props: React.HTMLAttributes) => (

), th: (props: React.ThHTMLAttributes) => (

), td: (props: React.TdHTMLAttributes) => (	), }; return { ...(defaultComponents as object), ...((components ?? {}) as object), }; }, [components], ); return ( :first-child]:mt-0 [&>:last-child]:mb-0", className, )} components={mergedComponents as MessageMarkdownProps["components"]} shikiTheme={["github-light", "github-dark"]} plugins={streamdownPlugins} {...props} /> ); } type MessageActionsProps = React.HTMLAttributes; function MessageActions({ className, ...props }: MessageActionsProps) { const ctx = useMessageContext(); const from = ctx?.from ?? "assistant"; return ( ); } type MessageActionGroupProps = React.HTMLAttributes; function MessageActionGroup({ className, ...props }: MessageActionGroupProps) { return ( ); } type MessageActionProps = React.HTMLAttributes & { asChild?: boolean; tooltip?: \| string \| { content?: string; side?: "top" \| "right" \| "bottom" \| "left"; shortcut?: string; }; }; function MessageAction({ asChild = false, tooltip, ...props }: MessageActionProps) { const Comp = asChild ? Slot : "div"; const { content, side, shortcut } = typeof tooltip === "string" ? { content: tooltip } : tooltip ?? {}; if (!content) { return ; } return ( {content} {shortcut ? `{shortcut}` : null} ); } export type MessageAvatarProps = { src: string; alt?: string; fallback?: React.ReactNode; delayMs?: React.ComponentProps["delayMs"]; size?: React.ComponentProps["size"]; className?: string; }; function MessageAvatar({ src, alt = "", fallback, delayMs, size, className, }: MessageAvatarProps) { return ( {fallback} ); } export { Message, MessageStack, MessageContent, MessageMarkdown, MessageActions, MessageActionGroup, MessageAction, MessageAvatar, }; 5d:T42a3,"use client"; /** * Streamdown `components.code` for fenced blocks (Shiki via {@link @streamdown/code}). * Installed together with Message (`@nexus-ui/message`): same registry item as `message.tsx`, not a separate add. * * Nexus chrome: title row (optional via `showTitleRow`), copy, bordered card, scroll viewport. * Set `components.inlineCode` per * [Streamdown](https://streamdown.ai/docs/components#inline-code). / import { HugeiconsIcon } from "@hugeicons/react"; import { Copy01Icon, Tick02Icon } from "@hugeicons/core-free-icons"; import { code as codeHighlighter } from "@streamdown/code"; import type { Element as HastElement } from "hast"; import { type ComponentProps, type CSSProperties, type DetailedHTMLProps, type HTMLAttributes, type MouseEventHandler, type ReactNode, isValidElement, memo, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react"; import type { BundledLanguage, CodeHighlighterPlugin, ExtraProps, } from "streamdown"; import { StreamdownContext, useIsCodeFenceIncomplete } from "streamdown"; import { cn } from "@/lib/utils"; // ----------------------------------------------------------------------------- // Types // ----------------------------------------------------------------------------- type MarkdownCodeElementProps = DetailedHTMLProps< HTMLAttributes, HTMLElement > & ExtraProps; /* Streamdown `components.code` props: markdown element props plus Nexus chrome overrides. / export type CodeBlockProps = MarkdownCodeElementProps & { /* Language label + copy in a header row. When false, copy floats top-right. Defaults to true when omitted. / showTitleRow?: boolean; }; type HighlightResult = NonNullable< ReturnType >; type CodeBlockPreProps = Omit, "children"> & { result: HighlightResult; language: string; lineNumbers?: boolean; /* 1-based first line (`startLine=`); uses `app/global.css` `code .line`. / lineNumbersStart?: number; }; type CodeBlockFencedViewProps = { code: string; language: string; className?: string; isIncomplete?: boolean; startLine?: number; lineNumbers?: boolean; codePlugin?: CodeHighlighterPlugin; showTitleRow?: boolean; }; // ----------------------------------------------------------------------------- // Constants // ----------------------------------------------------------------------------- const LANGUAGE_REGEX = /language-([^\s]+)/; const START_LINE_PATTERN = /startLine=(\d+)/; const NO_LINE_NUMBERS_PATTERN = /\bnoLineNumbers\b/; // ----------------------------------------------------------------------------- // Utilities (pure) // ----------------------------------------------------------------------------- function sameNodePosition(prev?: HastElement, next?: HastElement): boolean { if (!(prev?.position \|\| next?.position)) return true; if (!(prev?.position && next?.position)) return false; const ps = prev.position.start; const ns = next.position.start; const pe = prev.position.end; const ne = next.position.end; return ( ps?.line === ns?.line && ps?.column === ns?.column && pe?.line === ne?.line && pe?.column === ne?.column ); } function extractCodeString(children: ReactNode): string { if ( isValidElement(children) && children.props && typeof children.props === "object" && "children" in children.props && typeof (children.props as { children?: unknown }).children === "string" ) { return (children.props as { children: string }).children; } if (typeof children === "string") return children; return ""; } function getMetastring(node?: HastElement): string \| undefined { const raw = node?.properties?.metastring; return typeof raw === "string" ? raw : undefined; } function trimTrailingNewlines(str: string): string { let end = str.length; while (end > 0 && str[end - 1] === "\n") end--; return str.slice(0, end); } function buildRawHighlightResult(trimmed: string): HighlightResult { return { bg: "transparent", fg: "inherit", tokens: trimmed.split("\n").map((line) => [ { content: line, color: "inherit", bgColor: "transparent", htmlStyle: {}, offset: 0, }, ]), }; } function parseRootStyle(rootStyle: string): Record { const style: Record = {}; for (const decl of rootStyle.split(";")) { const idx = decl.indexOf(":"); if (idx > 0) { const prop = decl.slice(0, idx).trim(); const val = decl.slice(idx + 1).trim(); if (prop && val) style[prop] = val; } } return style; } // ----------------------------------------------------------------------------- // Primitives: copy control // ----------------------------------------------------------------------------- const COPIED_RESET_MS = 1500; function useCopyButton( onCopy: () => void \| Promise, ): [checked: boolean, onClick: MouseEventHandler] { const [checked, setChecked] = useState(false); const callbackRef = useRef(onCopy); const timeoutRef = useRef \| null>(null); useEffect(() => { callbackRef.current = onCopy; }, [onCopy]); const onClick = useCallback(() => { if (timeoutRef.current) clearTimeout(timeoutRef.current); void Promise.resolve(callbackRef.current()).then(() => { setChecked(true); timeoutRef.current = setTimeout(() => { setChecked(false); }, COPIED_RESET_MS); }); }, []); useEffect(() => { return () => { if (timeoutRef.current) clearTimeout(timeoutRef.current); }; }, []); return [checked, onClick]; } function CodeBlockCopyButton({ text, showGlow = false, className, }: { text: string; showGlow?: boolean; className?: string; }) { const [checked, onClick] = useCopyButton(() => { void navigator.clipboard.writeText(text); }); return ( {showGlow ? ( ) : null} ); } // ----------------------------------------------------------------------------- // Primitives: title row // ----------------------------------------------------------------------------- function CodeBlockTitleRow({ title, copyText, }: { title: string; copyText: string; }) { return ( {title} ); } // ----------------------------------------------------------------------------- // Primitives: scroll viewport // ----------------------------------------------------------------------------- function CodeBlockViewport({ /* `top` when a title row sits above; `all` when the viewport is the only block body. */ rounding = "top", children, }: { rounding?: "top" \| "all"; children: React.ReactNode; }) { return ( {children} ); } // ----------------------------------------------------------------------------- // Primitives: figure chrome (outer shell + inner card) // ----------------------------------------------------------------------------- function CodeBlockFigureChrome({ className, language, isIncomplete, showTitleRow, title, copyText, children, }: { className?: string; language: string; isIncomplete?: boolean; showTitleRow: boolean; title: string; copyText: string; children: React.ReactNode; }) { return ( {showTitleRow ? ( ) : ( )} {children} ); } // ----------------------------------------------------------------------------- // Primitives: highlighted token lines → pre/code // ----------------------------------------------------------------------------- function CodeBlockTokenSpan({ token, }: { token: HighlightResult["tokens"][number][number]; }) { const tokenStyle: Record = {}; let hasBg = Boolean(token.bgColor); if (token.color) tokenStyle["--sdm-c"] = token.color; if (token.bgColor) tokenStyle["--sdm-tbg"] = token.bgColor; if (token.htmlStyle) { for (const [key, value] of Object.entries(token.htmlStyle)) { if (value == null) continue; if (key === "color") { tokenStyle["--sdm-c"] = String(value); } else if (key === "background-color") { tokenStyle["--sdm-tbg"] = String(value); hasBg = true; } else { tokenStyle[key] = String(value); } } } const htmlAttrs = ( token as { htmlAttrs?: Record } ).htmlAttrs; return ( {token.content} ); } const CodeBlockPre = memo( function CodeBlockPre({ result, language, className, lineNumbers = true, lineNumbersStart = 1, ...rest }: CodeBlockPreProps) { const preStyle = useMemo(() => { const style: Record = {}; if (result.bg) style["--sdm-bg"] = result.bg; if (result.fg) style["--sdm-fg"] = result.fg; if (result.rootStyle && typeof result.rootStyle === "string") { Object.assign(style, parseRootStyle(result.rootStyle)); } return style as CSSProperties; }, [result.bg, result.fg, result.rootStyle]); return ( `{result.tokens.map((row, rowIndex) => ( {row.length === 0 \|\| (row.length === 1 && row[0].content === "") ? "\n" : row.map((token, tokenIndex) => ( ))} ))}` ); }, (prev, next) => prev.result === next.result && prev.language === next.language && prev.className === next.className && prev.lineNumbers === next.lineNumbers && prev.lineNumbersStart === next.lineNumbersStart, ); CodeBlockPre.displayName = "CodeBlockPre"; // ----------------------------------------------------------------------------- // Primitives: async Shiki highlight + pre // ----------------------------------------------------------------------------- function CodeBlockShikiPre({ code, language, raw, className, lineNumbers, lineNumbersStart, codePlugin, }: { code: string; language: string; raw: HighlightResult; className?: string; lineNumbers?: boolean; lineNumbersStart?: number; codePlugin: CodeHighlighterPlugin; }) { const { shikiTheme } = useContext(StreamdownContext); const [result, setResult] = useState(raw); useEffect(() => { codePlugin.highlight( { code, language: language as BundledLanguage, themes: shikiTheme, }, (highlighted) => setResult(highlighted), ); }, [code, language, shikiTheme, codePlugin, raw]); return ( ); } // ----------------------------------------------------------------------------- // Composed: CodeBlockFencedView (string + meta → chrome + Shiki) // ----------------------------------------------------------------------------- function CodeBlockFencedView({ code, language, className, isIncomplete, startLine, lineNumbers = true, codePlugin = codeHighlighter, showTitleRow: showTitleRowProp, }: CodeBlockFencedViewProps) { const showTitleRow = showTitleRowProp ?? true; const trimmed = useMemo(() => trimTrailingNewlines(code), [code]); const raw = useMemo(() => buildRawHighlightResult(trimmed), [trimmed]); const title = (language \|\| "code").toLowerCase(); const showLineNumbers = lineNumbers !== false && trimmed.split("\n").length > 1; return ( ); } // ----------------------------------------------------------------------------- // Export: Streamdown `components.code` // ----------------------------------------------------------------------------- export const CodeBlock = memo( function CodeBlock({ node, className, children, showTitleRow, }: CodeBlockProps) { const { lineNumbers: contextLineNumbers } = useContext(StreamdownContext); const isIncompleteFence = useIsCodeFenceIncomplete(); const match = className?.match(LANGUAGE_REGEX); const language = match?.[1] ?? ""; const metastring = getMetastring(node); const startLineMatch = metastring?.match(START_LINE_PATTERN); const parsedStart = startLineMatch ? Number.parseInt(startLineMatch[1], 10) : undefined; const startLine = parsedStart !== undefined && parsedStart >= 1 ? parsedStart : undefined; const metaNoLineNumbers = metastring ? NO_LINE_NUMBERS_PATTERN.test(metastring) : false; const showLineNumbers = !metaNoLineNumbers && contextLineNumbers !== false; const codeText = extractCodeString(children); return ( ); }, (p, n) => p.className === n.className && sameNodePosition(p.node, n.node) && p.showTitleRow === n.showTitleRow, ); CodeBlock.displayName = "CodeBlock"; 57:["$","$L5b",null,{"files":[{"path":"components/nexus-ui/message.tsx","content":"$5c","type":"registry:file","target":"~/components/nexus-ui/message.tsx"},{"path":"components/nexus-ui/codeblock.tsx","content":"$5d","type":"registry:file","target":"~/components/nexus-ui/codeblock.tsx"}],"className":"h-[70svh] min-h-80"}]

), td: (props: React.TdHTMLAttributes) => (

), }; return { ...(defaultComponents as object), ...((components ?? {}) as object), }; }, [components], ); return ( *:first-child]:mt-0 [&>*:last-child]:mb-0", className, )} components={mergedComponents as MessageMarkdownProps["components"]} shikiTheme={["github-light", "github-dark"]} plugins={streamdownPlugins} {...props} /> ); } type MessageActionsProps = React.HTMLAttributes; function MessageActions({ className, ...props }: MessageActionsProps) { const ctx = useMessageContext(); const from = ctx?.from ?? "assistant"; return (

); } type MessageActionGroupProps = React.HTMLAttributes; function MessageActionGroup({ className, ...props }: MessageActionGroupProps) { return (

); } type MessageActionProps = React.HTMLAttributes & { asChild?: boolean; tooltip?: | string | { content?: string; side?: "top" | "right" | "bottom" | "left"; shortcut?: string; }; }; function MessageAction({ asChild = false, tooltip, ...props }: MessageActionProps) { const Comp = asChild ? Slot : "div"; const { content, side, shortcut } = typeof tooltip === "string" ? { content: tooltip } : tooltip ?? {}; if (!content) { return ; } return ( {content} {shortcut ? {shortcut} : null} ); } export type MessageAvatarProps = { src: string; alt?: string; fallback?: React.ReactNode; delayMs?: React.ComponentProps["delayMs"]; size?: React.ComponentProps["size"]; className?: string; }; function MessageAvatar({ src, alt = "", fallback, delayMs, size, className, }: MessageAvatarProps) { return ( {fallback} ); } export { Message, MessageStack, MessageContent, MessageMarkdown, MessageActions, MessageActionGroup, MessageAction, MessageAvatar, }; 5d:T42a3,"use client"; /** * Streamdown `components.code` for fenced blocks (Shiki via {@link @streamdown/code}). * Installed together with **Message** (`@nexus-ui/message`): same registry item as `message.tsx`, not a separate add. * * Nexus chrome: title row (optional via **`showTitleRow`**), copy, bordered card, scroll viewport. * Set `components.inlineCode` per * [Streamdown](https://streamdown.ai/docs/components#inline-code). */ import { HugeiconsIcon } from "@hugeicons/react"; import { Copy01Icon, Tick02Icon } from "@hugeicons/core-free-icons"; import { code as codeHighlighter } from "@streamdown/code"; import type { Element as HastElement } from "hast"; import { type ComponentProps, type CSSProperties, type DetailedHTMLProps, type HTMLAttributes, type MouseEventHandler, type ReactNode, isValidElement, memo, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react"; import type { BundledLanguage, CodeHighlighterPlugin, ExtraProps, } from "streamdown"; import { StreamdownContext, useIsCodeFenceIncomplete } from "streamdown"; import { cn } from "@/lib/utils"; // ----------------------------------------------------------------------------- // Types // ----------------------------------------------------------------------------- type MarkdownCodeElementProps = DetailedHTMLProps< HTMLAttributes, HTMLElement > & ExtraProps; /** Streamdown `components.code` props: markdown element props plus Nexus chrome overrides. */ export type CodeBlockProps = MarkdownCodeElementProps & { /** Language label + copy in a header row. When false, copy floats top-right. Defaults to true when omitted. */ showTitleRow?: boolean; }; type HighlightResult = NonNullable< ReturnType >; type CodeBlockPreProps = Omit, "children"> & { result: HighlightResult; language: string; lineNumbers?: boolean; /** 1-based first line (`startLine=`); uses `app/global.css` `code .line`. */ lineNumbersStart?: number; }; type CodeBlockFencedViewProps = { code: string; language: string; className?: string; isIncomplete?: boolean; startLine?: number; lineNumbers?: boolean; codePlugin?: CodeHighlighterPlugin; showTitleRow?: boolean; }; // ----------------------------------------------------------------------------- // Constants // ----------------------------------------------------------------------------- const LANGUAGE_REGEX = /language-([^\s]+)/; const START_LINE_PATTERN = /startLine=(\d+)/; const NO_LINE_NUMBERS_PATTERN = /\bnoLineNumbers\b/; // ----------------------------------------------------------------------------- // Utilities (pure) // ----------------------------------------------------------------------------- function sameNodePosition(prev?: HastElement, next?: HastElement): boolean { if (!(prev?.position || next?.position)) return true; if (!(prev?.position && next?.position)) return false; const ps = prev.position.start; const ns = next.position.start; const pe = prev.position.end; const ne = next.position.end; return ( ps?.line === ns?.line && ps?.column === ns?.column && pe?.line === ne?.line && pe?.column === ne?.column ); } function extractCodeString(children: ReactNode): string { if ( isValidElement(children) && children.props && typeof children.props === "object" && "children" in children.props && typeof (children.props as { children?: unknown }).children === "string" ) { return (children.props as { children: string }).children; } if (typeof children === "string") return children; return ""; } function getMetastring(node?: HastElement): string | undefined { const raw = node?.properties?.metastring; return typeof raw === "string" ? raw : undefined; } function trimTrailingNewlines(str: string): string { let end = str.length; while (end > 0 && str[end - 1] === "\n") end--; return str.slice(0, end); } function buildRawHighlightResult(trimmed: string): HighlightResult { return { bg: "transparent", fg: "inherit", tokens: trimmed.split("\n").map((line) => [ { content: line, color: "inherit", bgColor: "transparent", htmlStyle: {}, offset: 0, }, ]), }; } function parseRootStyle(rootStyle: string): Record { const style: Record = {}; for (const decl of rootStyle.split(";")) { const idx = decl.indexOf(":"); if (idx > 0) { const prop = decl.slice(0, idx).trim(); const val = decl.slice(idx + 1).trim(); if (prop && val) style[prop] = val; } } return style; } // ----------------------------------------------------------------------------- // Primitives: copy control // ----------------------------------------------------------------------------- const COPIED_RESET_MS = 1500; function useCopyButton( onCopy: () => void | Promise, ): [checked: boolean, onClick: MouseEventHandler] { const [checked, setChecked] = useState(false); const callbackRef = useRef(onCopy); const timeoutRef = useRef | null>(null); useEffect(() => { callbackRef.current = onCopy; }, [onCopy]); const onClick = useCallback(() => { if (timeoutRef.current) clearTimeout(timeoutRef.current); void Promise.resolve(callbackRef.current()).then(() => { setChecked(true); timeoutRef.current = setTimeout(() => { setChecked(false); }, COPIED_RESET_MS); }); }, []); useEffect(() => { return () => { if (timeoutRef.current) clearTimeout(timeoutRef.current); }; }, []); return [checked, onClick]; } function CodeBlockCopyButton({ text, showGlow = false, className, }: { text: string; showGlow?: boolean; className?: string; }) { const [checked, onClick] = useCopyButton(() => { void navigator.clipboard.writeText(text); }); return (

{showGlow ? (

) : null}

); } // ----------------------------------------------------------------------------- // Primitives: title row // ----------------------------------------------------------------------------- function CodeBlockTitleRow({ title, copyText, }: { title: string; copyText: string; }) { return (

{title}

); } // ----------------------------------------------------------------------------- // Primitives: scroll viewport // ----------------------------------------------------------------------------- function CodeBlockViewport({ /** `top` when a title row sits above; `all` when the viewport is the only block body. */ rounding = "top", children, }: { rounding?: "top" | "all"; children: React.ReactNode; }) { return (

{children}

); } // ----------------------------------------------------------------------------- // Primitives: figure chrome (outer shell + inner card) // ----------------------------------------------------------------------------- function CodeBlockFigureChrome({ className, language, isIncomplete, showTitleRow, title, copyText, children, }: { className?: string; language: string; isIncomplete?: boolean; showTitleRow: boolean; title: string; copyText: string; children: React.ReactNode; }) { return (

{showTitleRow ? ( ) : (

)} {children} ); } // ----------------------------------------------------------------------------- // Primitives: highlighted token lines → pre/code // ----------------------------------------------------------------------------- function CodeBlockTokenSpan({ token, }: { token: HighlightResult["tokens"][number][number]; }) { const tokenStyle: Record = {}; let hasBg = Boolean(token.bgColor); if (token.color) tokenStyle["--sdm-c"] = token.color; if (token.bgColor) tokenStyle["--sdm-tbg"] = token.bgColor; if (token.htmlStyle) { for (const [key, value] of Object.entries(token.htmlStyle)) { if (value == null) continue; if (key === "color") { tokenStyle["--sdm-c"] = String(value); } else if (key === "background-color") { tokenStyle["--sdm-tbg"] = String(value); hasBg = true; } else { tokenStyle[key] = String(value); } } } const htmlAttrs = ( token as { htmlAttrs?: Record } ).htmlAttrs; return ( {token.content} ); } const CodeBlockPre = memo( function CodeBlockPre({ result, language, className, lineNumbers = true, lineNumbersStart = 1, ...rest }: CodeBlockPreProps) { const preStyle = useMemo(() => { const style: Record = {}; if (result.bg) style["--sdm-bg"] = result.bg; if (result.fg) style["--sdm-fg"] = result.fg; if (result.rootStyle && typeof result.rootStyle === "string") { Object.assign(style, parseRootStyle(result.rootStyle)); } return style as CSSProperties; }, [result.bg, result.fg, result.rootStyle]); return (

        
          {result.tokens.map((row, rowIndex) => (
            
              {row.length === 0 || (row.length === 1 && row[0].content === "")
                ? "\n"
                : row.map((token, tokenIndex) => (
                    
                  ))}
            
          ))}

); }, (prev, next) => prev.result === next.result && prev.language === next.language && prev.className === next.className && prev.lineNumbers === next.lineNumbers && prev.lineNumbersStart === next.lineNumbersStart, ); CodeBlockPre.displayName = "CodeBlockPre"; // ----------------------------------------------------------------------------- // Primitives: async Shiki highlight + pre // ----------------------------------------------------------------------------- function CodeBlockShikiPre({ code, language, raw, className, lineNumbers, lineNumbersStart, codePlugin, }: { code: string; language: string; raw: HighlightResult; className?: string; lineNumbers?: boolean; lineNumbersStart?: number; codePlugin: CodeHighlighterPlugin; }) { const { shikiTheme } = useContext(StreamdownContext); const [result, setResult] = useState(raw); useEffect(() => { codePlugin.highlight( { code, language: language as BundledLanguage, themes: shikiTheme, }, (highlighted) => setResult(highlighted), ); }, [code, language, shikiTheme, codePlugin, raw]); return ( ); } // ----------------------------------------------------------------------------- // Composed: CodeBlockFencedView (string + meta → chrome + Shiki) // ----------------------------------------------------------------------------- function CodeBlockFencedView({ code, language, className, isIncomplete, startLine, lineNumbers = true, codePlugin = codeHighlighter, showTitleRow: showTitleRowProp, }: CodeBlockFencedViewProps) { const showTitleRow = showTitleRowProp ?? true; const trimmed = useMemo(() => trimTrailingNewlines(code), [code]); const raw = useMemo(() => buildRawHighlightResult(trimmed), [trimmed]); const title = (language || "code").toLowerCase(); const showLineNumbers = lineNumbers !== false && trimmed.split("\n").length > 1; return ( ); } // ----------------------------------------------------------------------------- // Export: Streamdown `components.code` // ----------------------------------------------------------------------------- export const CodeBlock = memo( function CodeBlock({ node, className, children, showTitleRow, }: CodeBlockProps) { const { lineNumbers: contextLineNumbers } = useContext(StreamdownContext); const isIncompleteFence = useIsCodeFenceIncomplete(); const match = className?.match(LANGUAGE_REGEX); const language = match?.[1] ?? ""; const metastring = getMetastring(node); const startLineMatch = metastring?.match(START_LINE_PATTERN); const parsedStart = startLineMatch ? Number.parseInt(startLineMatch[1], 10) : undefined; const startLine = parsedStart !== undefined && parsedStart >= 1 ? parsedStart : undefined; const metaNoLineNumbers = metastring ? NO_LINE_NUMBERS_PATTERN.test(metastring) : false; const showLineNumbers = !metaNoLineNumbers && contextLineNumbers !== false; const codeText = extractCodeString(children); return ( ); }, (p, n) => p.className === n.className && sameNodePosition(p.node, n.node) && p.showTitleRow === n.showTitleRow, ); CodeBlock.displayName = "CodeBlock"; 57:["$","$L5b",null,{"files":[{"path":"components/nexus-ui/message.tsx","content":"$5c","type":"registry:file","target":"~/components/nexus-ui/message.tsx"},{"path":"components/nexus-ui/codeblock.tsx","content":"$5d","type":"registry:file","target":"~/components/nexus-ui/codeblock.tsx"}],"className":"h-[70svh] min-h-80"}]