Resolves #381

Author: haydenbleasel

.changeset/fix-streaming-jsx-flash.md

@@ -0,0 +1,5 @@
+---
+"ai-elements": patch
+---
+
+Fix JSXPreview flashing between rendered content and parse errors during streaming. Strip incomplete tags cut off mid-attribute, and fall back to last successfully rendered JSX when parse errors occur during streaming.

packages/elements/__tests__/jsx-preview.test.tsx

@@ -249,6 +249,37 @@ describe("jSXPreview streaming mode", () => {
     expect(screen.getByText("Complete")).toBeInTheDocument();
     expect(screen.getByText("Incomplete")).toBeInTheDocument();
   });
+
+  it("strips incomplete opening tag with partial attribute", () => {
+    render(
+      <JSXPreview
+        isStreaming
+        jsx='<div><p>Done</p><span className="incomp'
+      >
+        <JSXPreviewContent />
+      </JSXPreview>
+    );
+    expect(screen.getByText("Done")).toBeInTheDocument();
+  });
+
+  it("strips incomplete tag at start of stream", () => {
+    render(
+      <JSXPreview isStreaming jsx='<div className="foo'>
+        <JSXPreviewContent />
+      </JSXPreview>
+    );
+    // Should render without error since the incomplete tag is stripped
+    expect(true).toBeTruthy();
+  });
+
+  it("handles tag cut off mid-name", () => {
+    render(
+      <JSXPreview isStreaming jsx="<div><p>Text</p><sp">
+        <JSXPreviewContent />
+      </JSXPreview>
+    );
+    expect(screen.getByText("Text")).toBeInTheDocument();
+  });
 });
 
 describe("jSXPreview integration", () => {

packages/elements/src/jsx-preview.tsx

@@ -19,8 +19,10 @@ 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;
@@ -70,6 +72,22 @@ const matchJsxTag = (code: string) => {
   };
 };
 
+const stripIncompleteTag = (text: string) => {
+  // 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 = "";
@@ -78,8 +96,8 @@ const completeJsxTag = (code: string) => {
   while (currentPosition < code.length) {
     const match = matchJsxTag(code.slice(currentPosition));
     if (!match) {
-      // No more tags found, append remaining content
-      result += code.slice(currentPosition);
+      // No more tags found, strip any trailing incomplete tag
+      result += stripIncompleteTag(code.slice(currentPosition));
       break;
     }
     const { tagName, type, endIndex } = match;
@@ -126,6 +144,7 @@ export const JSXPreview = memo(
   }: JSXPreviewProps) => {
     const [prevJsx, setPrevJsx] = useState(jsx);
     const [error, setError] = useState<Error | null>(null);
+    const [lastGoodJsx, setLastGoodJsx] = useState("");
 
     // Clear error when jsx changes (derived state pattern)
     if (jsx !== prevJsx) {
@@ -143,12 +162,23 @@ export const JSXPreview = memo(
         bindings,
         components,
         error,
+        isStreaming,
         jsx,
         onErrorProp: onError,
         processedJsx,
         setError,
+        setLastGoodJsx,
       }),
-      [bindings, components, error, jsx, onError, processedJsx, setError]
+      [
+        bindings,
+        components,
+        error,
+        isStreaming,
+        jsx,
+        onError,
+        processedJsx,
+        setError,
+      ]
     );
 
     return (
@@ -167,14 +197,24 @@ export type JSXPreviewContentProps = Omit<ComponentProps<"div">, "children">;
 
 export const JSXPreviewContent = memo(
   ({ className, ...props }: JSXPreviewContentProps) => {
-    const { processedJsx, components, bindings, setError, onErrorProp } =
-      useJSXPreview();
+    const {
+      processedJsx,
+      isStreaming,
+      components,
+      bindings,
+      setError,
+      setLastGoodJsx,
+      onErrorProp,
+    } = useJSXPreview();
     const errorReportedRef = useRef<string | null>(null);
+    const lastGoodJsxRef = useRef("");
+    const [hadError, setHadError] = useState(false);
 
     // Reset error tracking when jsx changes
     // biome-ignore lint/correctness/useExhaustiveDependencies: processedJsx change should reset tracking
     useEffect(() => {
       errorReportedRef.current = null;
+      setHadError(false);
     }, [processedJsx]);
 
     const handleError = useCallback(
@@ -184,18 +224,38 @@ export const JSXPreviewContent = memo(
           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, onErrorProp, setError]
+      [processedJsx, isStreaming, onErrorProp, setError]
     );
 
+    // Track the last JSX that rendered without error
+    // biome-ignore lint/correctness/useExhaustiveDependencies: update when processedJsx changes 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 (
       <div className={cn("jsx-preview-content", className)} {...props}>
         <JsxParser
           bindings={bindings}
           components={components}
-          jsx={processedJsx}
+          jsx={displayJsx}
           onError={handleError}
           renderInWrapper={false}
         />