53: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"] 54: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"] 55:T25fd,"use client"; import { useEffect, useMemo, useReducer, useRef, useState, type FC, } from "react"; import { useShikiHighlighter, type ShikiHighlighterProps, } from "react-shiki/core"; import { createHighlighterCore, guessEmbeddedLanguages, type HighlighterCore, type LanguageInput, type ThemeInput, } from "shiki/core"; import { createJavaScriptRegexEngine } from "shiki/engine/javascript"; import { bundledLanguages } from "shiki/langs"; import { bundledThemes } from "shiki/themes"; import { cn } from "@/lib/utils"; /** * Props for the SyntaxHighlighter component */ export type SyntaxHighlighterProps = Omit< ShikiHighlighterProps, "children" | "theme" > & { theme?: ShikiHighlighterProps["theme"]; code: string; highlightLines?: readonly number[] | undefined; /** Skips tokenization and renders the plain code while `true`. */ streaming?: boolean; }; const containerClassName = "aui-shiki-base [&_pre]:border-border/50 [&_pre]:bg-muted/30! [&_.line]:px-0! [&_pre]:overflow-x-auto [&_pre]:rounded-t-none [&_pre]:rounded-b-xl [&_pre]:border [&_pre]:border-t-0 [&_pre]:p-3.5 [&_pre]:text-[13px] [&_pre]:leading-relaxed"; const PlainCode: FC<{ code: string }> = ({ code }) => (

    {code}

); const createHighlightedLinesTransformer = ( highlightLines: readonly number[], ): NonNullable[number] => { const highlightedLines = new Set(highlightLines); return { name: "assistant-ui:highlight-lines", line(node, line) { if (highlightedLines.has(line)) { this.addClassToHast(node, "highlighted"); } return node; }, }; }; type HighlighterOptions = Omit< ShikiHighlighterProps, "children" | "language" | "theme" >; type Engine = NonNullable; type CodeProps = { code: string; language: SyntaxHighlighterProps["language"]; theme: NonNullable; options: HighlighterOptions; }; const namedEngines = { javascript: () => createJavaScriptRegexEngine(), oniguruma: () => import("shiki/engine/oniguruma").then(({ createOnigurumaEngine }) => createOnigurumaEngine(import("shiki/wasm")), ), }; const namedEngineKeys = { javascript: {}, oniguruma: {} }; const highlighters = new WeakMap>(); const attemptedLoads = new WeakMap>(); const getHighlighter = (engine: Engine) => { const key = typeof engine === "string" ? namedEngineKeys[engine] : engine; const cached = highlighters.get(key); if (cached) return cached; const highlighter = createHighlighterCore({ engine: typeof engine === "string" ? namedEngines[engine]() : engine, }); highlighters.set(key, highlighter); highlighter.catch(() => highlighters.delete(key)); return highlighter; }; const findBundled = (bundle: Record, id: string) => Object.hasOwn(bundle, id) ? bundle[id] : undefined; type PendingLoad = { key: string; inputs: unknown[]; langs: LanguageInput[]; themes: ThemeInput[]; }; const findPendingLoad = ( highlighter: HighlighterCore, { code, language, theme, options }: CodeProps, ): PendingLoad => { const attempted = attemptedLoads.get(highlighter); const loadedLangs = highlighter.getLoadedLanguages(); const loadedThemes = highlighter.getLoadedThemes(); const pending: PendingLoad = { key: "", inputs: [], langs: [], themes: [] }; const isPending = (input: unknown, id: string, loaded: string[]) => !loaded.includes(id) && !attempted?.has(input); const track = (input: unknown, id: string) => { pending.inputs.push(input); pending.key += `${id}|`; }; const addBundledLanguage = (lang: string) => { const id = lang.trim(); const target = Object.entries(options.langAlias ?? {}).find( ([alias]) => alias.toLowerCase() === id.toLowerCase(), )?.[1] ?? id; const bundled = findBundled(bundledLanguages, target); if (!bundled || !isPending(target, target, loadedLangs)) return; pending.langs.push(bundled); track(target, target); }; for (const lang of [ language, ...[options.preloadLanguages ?? []].flat(), ...[options.customLanguages ?? []].flat(), ]) { if (!lang) continue; if (typeof lang === "string") { addBundledLanguage(lang); } else if ("scopeName" in lang) { if (!isPending(lang, lang.name, loadedLangs)) continue; pending.langs.push(lang); track(lang, lang.name); } else if (!attempted?.has(lang)) { pending.langs.push(lang); track(lang, "*"); } } if (typeof language === "string") { for (const embedded of guessEmbeddedLanguages(code, language)) { addBundledLanguage(embedded); } } const themes = typeof theme === "string" || "tokenColors" in theme || "settings" in theme ? [theme] : Object.values(theme); for (const name of themes) { if (typeof name !== "string") continue; const bundled = findBundled(bundledThemes, name); if (!bundled || !isPending(name, name, loadedThemes)) continue; pending.themes.push(bundled); track(name, name); } return pending; }; /** * Keeps one Shiki highlighter per RegExp engine, unlike react-shiki's page-wide * singleton, so an explicit `engine` is honored. The JavaScript engine is the * default because the Oniguruma engine compiles WebAssembly, which a Content * Security Policy without 'wasm-unsafe-eval' blocks. */ const useEngineHighlighter = (engine: Engine, props: CodeProps) => { const [resolved, setResolved] = useState<{ engine: Engine; highlighter: HighlighterCore; }>(); const [, rerender] = useReducer((count: number) => count + 1, 0); const [failedKey, setFailedKey] = useState(); useEffect(() => { let active = true; getHighlighter(engine).then( (highlighter) => { if (active) setResolved({ engine, highlighter }); }, (error: unknown) => { console.error("[shiki-highlighter] highlighter failed", error); }, ); return () => { active = false; }; }, [engine]); const highlighter = resolved?.engine === engine ? resolved.highlighter : undefined; const pending = highlighter ? findPendingLoad(highlighter, props) : undefined; const pendingRef = useRef(pending); pendingRef.current = pending; useEffect(() => { const load = pendingRef.current; if (!highlighter || !load?.key) return; const attempted = attemptedLoads.get(highlighter) ?? new Set(); attemptedLoads.set(highlighter, attempted); Promise.all([ highlighter.loadLanguage(...load.langs), highlighter.loadTheme(...load.themes), ]).then( () => { for (const input of load.inputs) attempted.add(input); rerender(); }, (error: unknown) => { console.error("[shiki-highlighter] loading failed", error); setFailedKey(load.key); }, ); }, [highlighter, pending?.key]); return pending?.key === "" || pending?.key === failedKey ? highlighter : undefined; }; const ShikiCode: FC = ({ code, language, theme, options }) => { const highlighted = useShikiHighlighter(code, language, theme, { ...options, defaultColor: "light-dark()", }); return <>{highlighted ?? }; }; const EngineCode: FC = ({ engine, ...props }) => { const highlighter = useEngineHighlighter(engine, props); if (!highlighter) return ; return ; }; const HighlightedCode: FC = (props) => { const { engine = "javascript", highlighter, ...options } = props.options; if (highlighter) return ; return ; }; /** * SyntaxHighlighter component, using react-shiki * * Skips tokenization while `streaming` and renders the plain code in the * same container, so streaming costs no Shiki work and settling is a color * change rather than a layout shift. */ export const SyntaxHighlighter: FC = ({ code, language, theme = { dark: "github-dark-default", light: "github-light-default" }, className, style, // Inert: useShikiHighlighter output has no default styles or language label. addDefaultStyles: _addDefaultStyles, showLanguage: _showLanguage, delay = 150, // the part settles before smooth streaming finishes draining, so code keeps changing for a few frames streaming = false, highlightLines, ...options }) => { const trimmed = code.trim(); const highlightKey = highlightLines?.join(",") ?? ""; const callerTransformers = options.transformers; const transformers = useMemo( () => highlightKey ? [ ...(callerTransformers ?? []), createHighlightedLinesTransformer( highlightKey.split(",").map(Number), ), ] : callerTransformers, [highlightKey, callerTransformers], ); return (

{streaming ? ( ) : ( )}

); }; SyntaxHighlighter.displayName = "SyntaxHighlighter"; 52:["$","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","react-shiki",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-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":"react-shiki"}]]}]}],["$","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"}]]}]}]]}],["$","$L53",null,{"namespace":"@assistant-ui","registryDependencies":[]}]]}],null]}],["$","$L54",null,{"files":[{"path":"components/assistant-ui/elements/shiki-highlighter.tsx","content":"$55","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]