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:T1d12,"use client"; import { cn } from "@/lib/utils"; import { AlertCircle } from "lucide-react"; import type { ComponentProps, ReactNode } from "react"; import { createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react"; import type { TProps as JsxParserProps } from "react-jsx-parser"; import JsxParser from "react-jsx-parser"; interface JSXPreviewContextValue { jsx: string; processedJsx: string; isStreaming: boolean; error: Error | null; setError: (error: Error | null) => void; setLastGoodJsx: (jsx: string) => void; components: JsxParserProps["components"]; bindings: JsxParserProps["bindings"]; onErrorProp?: (error: Error) => void; } const JSXPreviewContext = createContext(null); const TAG_REGEX = /<\/?([a-zA-Z][a-zA-Z0-9]*)\s*([^>]*?)(\/)?>/; export const useJSXPreview = () => { const context = useContext(JSXPreviewContext); if (!context) { throw new Error("JSXPreview components must be used within JSXPreview"); } return context; }; const matchJsxTag = (code: string) => { if (code.trim() === "") { return null; } const match = code.match(TAG_REGEX); if (!match || match.index === undefined) { return null; } const [fullMatch, tagName, attributes, selfClosing] = match; let type: "self-closing" | "closing" | "opening"; if (selfClosing) { type = "self-closing"; } else if (fullMatch.startsWith(" { // Find the last '<' that isn't part of a complete tag const lastOpen = text.lastIndexOf("<"); if (lastOpen === -1) { return text; } const afterOpen = text.slice(lastOpen); // If there's no closing '>' after the last '<', it's an incomplete tag if (!afterOpen.includes(">")) { return text.slice(0, lastOpen); } return text; }; const completeJsxTag = (code: string) => { const stack: string[] = []; let result = ""; let currentPosition = 0; while (currentPosition < code.length) { const match = matchJsxTag(code.slice(currentPosition)); if (!match) { // No more tags found, strip any trailing incomplete tag result += stripIncompleteTag(code.slice(currentPosition)); break; } const { tagName, type, endIndex } = match; // Include any text content before this tag result += code.slice(currentPosition, currentPosition + endIndex); if (type === "opening") { stack.push(tagName); } else if (type === "closing") { stack.pop(); } currentPosition += endIndex; } return ( result + stack .toReversed() .map((tag) => ``) .join("") ); }; export type JSXPreviewProps = ComponentProps<"div"> & { jsx: string; isStreaming?: boolean; components?: JsxParserProps["components"]; bindings?: JsxParserProps["bindings"]; onError?: (error: Error) => void; }; export const JSXPreview = memo( ({ jsx, isStreaming = false, components, bindings, onError, className, children, ...props }: JSXPreviewProps) => { const [prevJsx, setPrevJsx] = useState(jsx); const [error, setError] = useState(null); const [_lastGoodJsx, setLastGoodJsx] = useState(""); // Clear error when jsx changes (derived state pattern) if (jsx !== prevJsx) { setPrevJsx(jsx); setError(null); } const processedJsx = useMemo( () => (isStreaming ? completeJsxTag(jsx) : jsx), [jsx, isStreaming] ); const contextValue = useMemo( () => ({ bindings, components, error, isStreaming, jsx, onErrorProp: onError, processedJsx, setError, setLastGoodJsx, }), [ bindings, components, error, isStreaming, jsx, onError, processedJsx, setError, ] ); return (

{children}

); } ); JSXPreview.displayName = "JSXPreview"; export type JSXPreviewContentProps = Omit, "children">; export const JSXPreviewContent = memo( ({ className, ...props }: JSXPreviewContentProps) => { const { processedJsx, isStreaming, components, bindings, setError, setLastGoodJsx, onErrorProp, } = useJSXPreview(); const errorReportedRef = useRef(null); const lastGoodJsxRef = useRef(""); const [hadError, setHadError] = useState(false); // Reset error tracking when jsx changes useEffect(() => { errorReportedRef.current = null; setHadError(false); }, [processedJsx]); const handleError = useCallback( (err: Error) => { // Prevent duplicate error reports for the same jsx if (errorReportedRef.current === processedJsx) { return; } errorReportedRef.current = processedJsx; // During streaming, suppress errors and fall back to last good JSX if (isStreaming) { setHadError(true); return; } setError(err); onErrorProp?.(err); }, [processedJsx, isStreaming, onErrorProp, setError] ); // Track the last JSX that rendered without error useEffect(() => { if (!errorReportedRef.current) { lastGoodJsxRef.current = processedJsx; setLastGoodJsx(processedJsx); } }, [processedJsx, setLastGoodJsx]); // During streaming, if the current JSX errored, re-render with last good version const displayJsx = isStreaming && hadError ? lastGoodJsxRef.current : processedJsx; return (

); } ); JSXPreviewContent.displayName = "JSXPreviewContent"; export type JSXPreviewErrorProps = ComponentProps<"div"> & { children?: ReactNode | ((error: Error) => ReactNode); }; const renderChildren = ( children: ReactNode | ((error: Error) => ReactNode), error: Error ): ReactNode => { if (typeof children === "function") { return children(error); } return children; }; export const JSXPreviewError = memo( ({ className, children, ...props }: JSXPreviewErrorProps) => { const { error } = useJSXPreview(); if (!error) { return null; } return (

{children ? ( renderChildren(children, error) ) : ( <> {error.message} )}

); } ); JSXPreviewError.displayName = "JSXPreviewError"; 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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}],["$","li","react-jsx-parser",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-jsx-parser","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-jsx-parser"}]]}]}]]}],["$","$L50",null,{"namespace":"@ai-elements","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/ai-elements/jsx-preview.tsx","content":"$52","type":"registry:component","target":"components/ai-elements/jsx-preview.tsx"}],"className":"h-[70svh] min-h-80"}]]}]