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:T1c07,"use client"; import { createContext, useContext, type ComponentProps, type CSSProperties, } from "react"; import { ArrowDown01Icon, CancelCircleIcon, CheckmarkCircle01Icon, Clock01Icon, Loading03Icon, ToolsIcon, } from "@hugeicons/core-free-icons"; import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/react"; import { Badge } from "@/components/ui/badge"; import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/components/ui/collapsible"; import { cn } from "@/lib/utils"; import { CodeBlock, CodeBlockContent, CodeblockShiki, } from "@/components/nexus-ui/codeblock-new"; type ToolStatus = "pending" | "ready" | "running" | "completed" | "error"; type ToolMeta = { label: string; icon: IconSvgElement; color: { bg: string; fg: string }; iconClassName?: string; }; const TOOL_META: Record = { pending: { label: "Pending", icon: ToolsIcon, color: { bg: "var(--color-gray-100)", fg: "var(--color-gray-500)" }, }, ready: { label: "Ready", icon: Clock01Icon, color: { bg: "var(--color-orange-100)", fg: "var(--color-orange-600)" }, }, running: { label: "Running", icon: Loading03Icon, color: { bg: "var(--color-blue-100)", fg: "var(--color-blue-600)" }, iconClassName: "animate-spin", }, completed: { label: "Completed", icon: CheckmarkCircle01Icon, color: { bg: "var(--color-green-100)", fg: "var(--color-green-600)" }, }, error: { label: "Error", icon: CancelCircleIcon, color: { bg: "var(--color-red-100)", fg: "var(--color-red-600)" }, }, }; type ToolContextValue = { status: ToolStatus; meta: ToolMeta; }; const ToolContext = createContext(null); function isToolStatus(value: unknown): value is ToolStatus { return ( typeof value === "string" && Object.prototype.hasOwnProperty.call(TOOL_META, value) ); } function useToolContext(component: string): ToolContextValue { const context = useContext(ToolContext); if (!context) { throw new Error(`${component} must be used within `); } return context; } function stringifyToolPayload(payload: unknown): string { if (typeof payload === "string") return payload; if (payload === undefined) return ""; try { return JSON.stringify(payload, null, 2); } catch { return String(payload); } } type ToolProps = ComponentProps & { status: ToolStatus; }; function Tool({ status, className, style, ...props }: ToolProps) { const resolvedStatus = isToolStatus(status) ? status : "pending"; const meta = TOOL_META[resolvedStatus]; return ( ); } type ToolTriggerProps = Omit< ComponentProps, "children" > & { name: string; }; function ToolTrigger({ name, className, ...props }: ToolTriggerProps) { const { meta } = useToolContext("ToolTrigger"); return (

{name} {meta.label}

); } type ToolContentProps = ComponentProps; function ToolContent({ className, ...props }: ToolContentProps) { return ( ); } type ToolPartProps = { kind: "input" | "output"; payload: unknown; errorText?: string; }; function ToolPart({ kind, payload, errorText }: ToolPartProps) { const { status } = useToolContext("ToolPart"); const code = stringifyToolPayload(payload); const isOutputError = kind === "output" && status === "error"; const hasPayload = payload !== undefined && payload !== null; const shouldShowCodeblock = !isOutputError || hasPayload; const title = kind === "input" ? "Input" : isOutputError ? "Error" : "Output"; return (

{title} {isOutputError ? (

{errorText ?? "Tool execution failed"}

) : null} {shouldShowCodeblock ? ( {code} ) : null}

); } type ToolPayloadProps = { payload: unknown; }; function ToolInput({ payload }: ToolPayloadProps) { return ; } type ToolOutputProps = ToolPayloadProps & { showWhen?: ToolStatus[]; errorText?: string; }; function ToolOutput({ payload, showWhen = ["completed"], errorText, }: ToolOutputProps) { const { status } = useToolContext("ToolOutput"); if (!showWhen.includes(status)) return null; return ; } export type { ToolStatus }; export { Tool, ToolTrigger, ToolContent, ToolInput, ToolOutput }; 53:T1d85,"use client"; import { FileIcon } from "@react-symbols/icons/utils"; import { Copy01Icon, Tick02Icon } from "@hugeicons/core-free-icons"; import { HugeiconsIcon } from "@hugeicons/react"; import { createContext, useEffect, useContext, useState, type CSSProperties, type ComponentProps, type ReactNode, } from "react"; import { cn } from "@/lib/utils"; import { highlight, Themes } from "@/lib/shiki/highlighter"; import type { BundledLanguage } from "shiki/bundle/web"; const highlighterPromise = highlight(); type DivProps = ComponentProps<"div">; type CodeBlockProps = DivProps & { keepBackground?: boolean; }; type CodeBlockCopyContextValue = { content: string; setContent: (value: string) => void; }; const CodeBlockCopyContext = createContext( null, ); interface CodeblockClientShikiProps extends DivProps { code?: string; language?: string; lineNumbers?: boolean; children?: ReactNode; } type ShikiToken = { content: string; htmlStyle?: Record; }; const buildRawTokenRows = (input: string): ShikiToken[][] => input.split(/\r?\n/).map((line) => [{ content: line || "\u00A0" }]); const EMPTY_TOKEN_ROW: ShikiToken[] = [{ content: "\u00A0" }]; const resolveCodeToHighlight = (children: ReactNode, code?: string): string => typeof children === "string" ? children : Array.isArray(children) && children.length === 1 && typeof children[0] === "string" ? children[0] : (code ?? ""); const CodeBlock = ({ children, className, keepBackground = false, ...props }: CodeBlockProps) => { const [copyContent, setCopyContent] = useState(""); return (

{children}

); }; type CodeBlockHeaderProps = DivProps; const CodeBlockHeader = ({ children, className, ...props }: CodeBlockHeaderProps) => { return (

{children}

); }; interface CodeBlockIconProps extends DivProps { language?: string; } const CodeBlockIcon = ({ language, className }: CodeBlockIconProps) => { return ( ); }; type CodeBlockGroupProps = DivProps; const CodeBlockGroup = ({ children, className, ...props }: CodeBlockGroupProps) => { return (

{children}

); }; const CodeBlockContent = ({ className, children, ...props }: DivProps) => { return (

{children}

); }; const CodeblockShiki = ({ code, language = "tsx", lineNumbers = false, className, children, ...props }: CodeblockClientShikiProps) => { const setCopyContent = useContext(CodeBlockCopyContext)?.setContent; const codeToHighlight = resolveCodeToHighlight(children, code); const [tokenRows, setTokenRows] = useState(() => buildRawTokenRows(codeToHighlight), ); useEffect(() => { setCopyContent?.(codeToHighlight); }, [codeToHighlight, setCopyContent]); useEffect(() => { let cancelled = false; async function clientHighlight() { const rawRows = buildRawTokenRows(codeToHighlight); if (!cancelled) { setTokenRows(rawRows); } if (!codeToHighlight) { return; } try { const highlighter = await highlighterPromise; const result = await highlighter.codeToTokens(codeToHighlight, { lang: language as BundledLanguage, themes: { light: Themes.light, dark: Themes.dark, }, }); if (!cancelled) { setTokenRows((result.tokens ?? rawRows) as ShikiToken[][]); } } catch { if (!cancelled) { setTokenRows(rawRows); } } } void clientHighlight(); return () => { cancelled = true; }; }, [codeToHighlight, language]); return (

        
          {tokenRows.map((row, rowIndex) => (
            
              {(row.length ? row : EMPTY_TOKEN_ROW).map((token, tokenIndex) => (
                
                  {token.content || "\u00A0"}
                
              ))}
              {rowIndex < tokenRows.length - 1 && "\n"}
            
          ))}

); }; type CodeBlockCopyButtonProps = ComponentProps<"button">; const CodeBlockCopyButton = ({ className, ...props }: CodeBlockCopyButtonProps) => { const content = useContext(CodeBlockCopyContext)?.content ?? ""; const [isCopied, setIsCopied] = useState(false); const copyToClipboard = async (text: string) => { try { await navigator.clipboard.writeText(text); return true; } catch (err) { console.error("Failed to copy text: ", err); return false; } }; useEffect(() => { if (!isCopied) return; const timeout = setTimeout(() => { setIsCopied(false); }, 2000); return () => clearTimeout(timeout); }, [isCopied]); const handleCopy = async () => { if (!content) return; await copyToClipboard(content); setIsCopied(true); }; return ( ); }; export { CodeBlock, CodeBlockHeader, CodeBlockIcon, CodeBlockGroup, CodeBlockContent, CodeblockShiki, CodeBlockCopyButton, }; 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","@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"}]]}]}],["$","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"}]]}]}],["$","li","@react-symbols/icons",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40react-symbols%2Ficons","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":"@react-symbols/icons"}]]}]}],["$","li","shiki",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/shiki","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":"shiki"}]]}]}]]}],["$","$L50",null,{"namespace":"@nexus-ui","registryDependencies":["badge","collapsible"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/nexus-ui/tool.tsx","content":"$52","type":"registry:file","target":"~/components/nexus-ui/tool.tsx"},{"path":"components/nexus-ui/codeblock-new.tsx","content":"$53","type":"registry:file","target":"~/components/nexus-ui/codeblock-new.tsx"},{"path":"lib/shiki/highlighter.ts","content":"import { createJavaScriptRegexEngine } from \"shiki/engine/javascript\";\nimport {\n bundledLanguages,\n type Highlighter,\n type RegexEngine,\n createHighlighter,\n} from \"shiki/bundle/web\";\n\nlet jsEngine: RegexEngine | null = null;\nlet highlighter: Promise | null = null;\n\n// Settings for UI components\nconst Themes = {\n light: \"github-light\",\n dark: \"github-dark\",\n};\n\nconst allBundledLanguageIds = Object.keys(bundledLanguages);\n\n\nconst getJsEngine = (): RegexEngine => {\n jsEngine ??= createJavaScriptRegexEngine();\n return jsEngine;\n};\n\nconst highlight = async (): Promise => {\n highlighter ??= createHighlighter({\n langs: allBundledLanguageIds,\n themes: [\"github-light\", \"github-dark\"],\n engine: getJsEngine(),\n });\n return highlighter;\n};\nexport { highlight, Themes };\n","type":"registry:file","target":"~/lib/shiki/highlighter.ts"}],"className":"h-[70svh] min-h-80"}]]}]