@elabs-ai/components-ai 4.1.0 → 4.2.0

package/src/jsx-preview.tsx

@@ -46,7 +46,23 @@ interface JSXPreviewContextValue {
 
 const JSXPreviewContext = createContext<JSXPreviewContextValue | null>(null);
 
-const TAG_REGEX = /<\/?([a-zA-Z][a-zA-Z0-9]*)\s*([^>]*?)(\/)?>/;
+/**
+ * HTML elements that must never render from agent/model-authored JSX: script
+ * execution, style/link/meta/base injection, and embeddable third-party
+ * surfaces (iframe/object/embed) or a form that could post data out. Merged
+ * with `react-jsx-parser`'s own default (`script`) via `blacklistedTags`.
+ */
+const JSX_PREVIEW_BLACKLISTED_TAGS = [
+  "script",
+  "style",
+  "iframe",
+  "form",
+  "object",
+  "embed",
+  "link",
+  "meta",
+  "base",
+];
 
 export const useJSXPreview = () => {
   const context = useContext(JSXPreviewContext);
@@ -56,37 +72,101 @@ export const useJSXPreview = () => {
   return context;
 };
 
-const matchJsxTag = (code: string) => {
-  if (code.trim() === "") {
-    return null;
-  }
+const TAG_NAME_START = /[a-zA-Z]/;
+const TAG_NAME_CHAR = /[a-zA-Z0-9]/;
 
-  const match = code.match(TAG_REGEX);
+interface JsxTagMatch {
+  tagName: string;
+  type: "opening" | "closing" | "self-closing";
+  endIndex: number;
+}
 
-  if (!match || match.index === undefined) {
-    return null;
-  }
+/**
+ * Finds the next complete JSX tag at or after `fromIndex`, tracking brace
+ * depth and quoted strings so a `>` inside an attribute expression (e.g.
+ * `onClick={() => foo()}`) is never mistaken for the tag's own closing
+ * bracket (the previous plain regex did exactly that). Walks the ORIGINAL
+ * string by absolute index — no per-iteration substring slicing — so one
+ * pass over the whole input is linear.
+ */
+function findNextJsxTag(code: string, fromIndex: number): JsxTagMatch | null {
+  const len = code.length;
+  let i = fromIndex;
+
+  while (i < len) {
+    if (code[i] !== "<") {
+      i++;
+      continue;
+    }
 
-  const [fullMatch = "", tagName = "", attributes = "", selfClosing] = match;
+    let j = i + 1;
+    const closing = code[j] === "/";
+    if (closing) j++;
 
-  let type: "self-closing" | "closing" | "opening";
-  if (selfClosing) {
-    type = "self-closing";
-  } else if (fullMatch.startsWith("</")) {
-    type = "closing";
-  } else {
-    type = "opening";
+    const nameStart = j;
+    if (!TAG_NAME_START.test(code[nameStart] ?? "")) {
+      i++;
+      continue;
+    }
+    j++;
+    while (j < len && TAG_NAME_CHAR.test(code[j] ?? "")) {
+      j++;
+    }
+    const tagName = code.slice(nameStart, j);
+
+    let depth = 0;
+    let quote: string | null = null;
+    let k = j;
+    let closedAt = -1;
+    let selfClosing = false;
+
+    while (k < len) {
+      const ch = code[k];
+      if (quote) {
+        if (ch === quote) quote = null;
+        k++;
+        continue;
+      }
+      if (ch === '"' || ch === "'") {
+        quote = ch;
+        k++;
+        continue;
+      }
+      if (ch === "{") {
+        depth++;
+        k++;
+        continue;
+      }
+      if (ch === "}") {
+        depth = Math.max(0, depth - 1);
+        k++;
+        continue;
+      }
+      if (depth === 0 && ch === ">") {
+        let p = k - 1;
+        while (p > j && code[p] === " ") p--;
+        selfClosing = code[p] === "/";
+        closedAt = k + 1;
+        break;
+      }
+      k++;
+    }
+
+    // No closing '>' yet for this tag at this depth — it is incomplete, not
+    // a match; the caller treats everything from here on as trailing text.
+    if (closedAt === -1) {
+      return null;
+    }
+
+    return {
+      endIndex: closedAt,
+      tagName,
+      type: closing ? "closing" : selfClosing ? "self-closing" : "opening",
+    };
   }
 
-  return {
-    attributes: attributes.trim(),
-    endIndex: match.index + fullMatch.length,
-    startIndex: match.index,
-    tag: fullMatch,
-    tagName,
-    type,
-  };
-};
+  return null;
+}
 
 const stripIncompleteTag = (text: string) => {
   // Find the last '<' that isn't part of a complete tag
@@ -106,32 +186,28 @@ const stripIncompleteTag = (text: string) => {
 
 const completeJsxTag = (code: string) => {
   const stack: string[] = [];
-  let result = "";
-  let currentPosition = 0;
+  let position = 0;
 
-  while (currentPosition < code.length) {
-    const match = matchJsxTag(code.slice(currentPosition));
+  while (position < code.length) {
+    const match = findNextJsxTag(code, position);
     if (!match) {
-      // No more tags found, strip any trailing incomplete tag
-      result += stripIncompleteTag(code.slice(currentPosition));
+      // No more complete tags ahead; everything past `position` is trailing
+      // text (possibly a mid-typed tag), handled by stripIncompleteTag below.
       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") {
+    if (match.type === "opening") {
+      stack.push(match.tagName);
+    } else if (match.type === "closing") {
       stack.pop();
     }
 
-    currentPosition += endIndex;
+    position = match.endIndex;
   }
 
   return (
-    result +
+    code.slice(0, position) +
+    stripIncompleteTag(code.slice(position)) +
     [...stack]
       .reverse()
       .map((tag) => `</${tag}>`)
@@ -139,6 +215,35 @@ const completeJsxTag = (code: string) => {
   );
 };
 
+/** How often `completeJsxTag` may re-run while content is still streaming in. */
+const STREAM_RECOMPUTE_THROTTLE_MS = 80;
+
+/**
+ * Tag-balances `jsx` like `completeJsxTag`, but while `isStreaming` is true it
+ * skips a fresh (expensive, whole-string) recompute more often than once per
+ * `STREAM_RECOMPUTE_THROTTLE_MS` — otherwise every incoming token re-scans the
+ * entire accumulated string from scratch. Settled input (`isStreaming` false)
+ * always recomputes immediately so the final render is exact.
+ */
+function useCompletedJsx(jsx: string, isStreaming: boolean): string {
+  const cacheRef = useRef({ jsx, result: completeJsxTag(jsx), time: 0 });
+
+  return useMemo(() => {
+    const cache = cacheRef.current;
+    if (jsx === cache.jsx) return cache.result;
+
+    const now = Date.now();
+    if (isStreaming && now - cache.time < STREAM_RECOMPUTE_THROTTLE_MS) {
+      return cache.result;
+    }
+
+    const result = completeJsxTag(jsx);
+    cacheRef.current = { jsx, result, time: now };
+    return result;
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- cacheRef is a stable ref, not reactive state
+  }, [jsx, isStreaming]);
+}
+
 export type JSXPreviewProps = ComponentProps<"div"> & {
   jsx: string;
   /** Content is arriving incrementally — build up, suppress transient errors. */
@@ -177,8 +282,9 @@ export const JSXPreview = memo(
 
     // The tag-balanced best-effort of the current input. When it differs from the
     // raw jsx, the input ends mid-tag → it is INCOMPLETE (still streaming / being
-    // typed), not invalid. This is the timer-free "not-ready" signal.
-    const completed = useMemo(() => completeJsxTag(jsx), [jsx]);
+    // typed), not invalid. This is the timer-free "not-ready" signal. Throttled
+    // while streaming so every incoming token doesn't re-scan the whole string.
+    const completed = useCompletedJsx(jsx, isStreaming);
     const isIncomplete = jsx.trim() !== "" && completed !== jsx;
 
     const processedJsx = useMemo(() => {
@@ -293,7 +399,9 @@ export const JSXPreviewContent = memo(({ className, ...props }: JSXPreviewConten
   return (
     <div className={cn("jsx-preview-content", className)} {...props}>
       <JsxParser
+        allowUnknownElements={false}
         bindings={bindings}
+        blacklistedTags={JSX_PREVIEW_BLACKLISTED_TAGS}
         components={components}
         jsx={displayJsx}
         onError={handleError}

package/src/markdown-view.test.tsx

@@ -1,5 +1,5 @@
 import { math } from "@streamdown/math";
-import { cleanup, render, screen } from "@testing-library/react";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
 import type { ComponentProps } from "react";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { MarkdownView } from "./markdown-view";
@@ -93,7 +93,7 @@ A paragraph with [a link](https://example.com) and \`inline\` code.
     expect(screen.getAllByRole("listitem")).toHaveLength(2);
   });
 
-  it("merges a real `plugins.cjk` override in (append), keeps sanitisation on, and keeps the untouched `plugins.math` default alive (#10)", () => {
+  it("merges a real `plugins.cjk` override in (append), keeps sanitisation on, and keeps the untouched `plugins.math` default alive (#10)", async () => {
     // A real, discriminating lock — NOT `plugins={{}}` (that exercises zero
     // slots and passes identically under merge, replace, or a no-op; #10
     // review I3). This test supplies a genuine `cjk` plugin (one of the two
@@ -135,7 +135,11 @@ $$x^2$$
     expect(cjkRemarkSpy).toHaveBeenCalled();
     // (2b) …and the internal `math` default the consumer did not set is
     // still active — real KaTeX markup, not the literal `$$x^2$$` text.
-    expect(document.querySelector(".katex")).toBeInTheDocument();
+    // `math` is now lazy-loaded off the source text (#perf-5) — it starts
+    // `undefined` and arrives after a dynamic import, hence `waitFor`.
+    await waitFor(() => {
+      expect(document.querySelector(".katex")).toBeInTheDocument();
+    });
   });
 });
 

package/src/markdown-view.tsx

@@ -48,6 +48,7 @@ import {
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import { stripSanitizerOverrides, warnOnTrustedPluginSlots } from "./_streamdown-safety";
 import {
+  getStreamdownPluginsKey,
   useStreamdownMermaidOptions,
   useStreamdownPlugins,
   useStreamdownTranslations,
@@ -227,7 +228,10 @@ export const MarkdownView = ({
   const translations = useStreamdownTranslations();
   // Brand-token-derived `code` plugin, not the package's static github-*
   // default (#315 follow-up) — re-derives when the active theme changes.
-  const internalPlugins = useStreamdownPlugins();
+  // `math`/`cjk` are lazy-loaded off the raw markdown source (#perf-5, see
+  // `_streamdown-i18n.ts`) — pass `children` so they load only when this
+  // view actually needs them.
+  const internalPlugins = useStreamdownPlugins(typeof children === "string" ? children : "");
   // Same per-key merge as `components` — see the `plugins` prop doc above.
   // `math.rehypePlugin`/`mermaid` are the two slots that land in the DOM after
   // (or outside) the sanitiser chain, so replacing one is a TRUSTED-CODE
@@ -243,6 +247,9 @@ export const MarkdownView = ({
   const mermaidOptions = useStreamdownMermaidOptions();
   return (
     <Streamdown
+      // Forces a remount the first time the lazy math/cjk slot resolves —
+      // see `getStreamdownPluginsKey`'s doc in `_streamdown-i18n.ts` for why.
+      key={getStreamdownPluginsKey(internalPlugins)}
       data-slot="markdown-view"
       className={cn("space-y-3 [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", className)}
       components={components}

package/src/message-form.stories.tsx

@@ -17,7 +17,14 @@
  */
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
-import { MessageForm } from "./message-form";
+import {
+  MessageForm,
+  MessageFormFields,
+  MessageFormProvider,
+  MessageFormRoot,
+  MessageFormSubmit,
+  MessageFormTitle,
+} from "./message-form";
 import type { FormSpec, FormValues } from "./message-form-spec";
 
 const meta = {
@@ -95,7 +102,7 @@ export const Default: Story = {
  */
 export const StreamingPartial: Story = {
   args: {
-    streaming: true,
+    isStreaming: true,
     spec: {
       formName: "book_demo",
       title: "Book a demo",
@@ -111,11 +118,37 @@ export const StreamingPartial: Story = {
 /** Streaming with nothing parsed yet → a layout-shaped skeleton. */
 export const StreamingSkeleton: Story = {
   args: {
-    streaming: true,
+    isStreaming: true,
     spec: { formName: "book_demo", title: "Book a demo", fields: [] },
   },
 };
 
+/**
+ * The compound composition — `MessageFormProvider` + the parts directly,
+ * instead of the `MessageForm` convenience wrapper (see the file-level doc
+ * comment's "compound structure" section). `isStreaming` lives on the
+ * provider itself since it is the one that owns the lifted form state; a
+ * custom layout that skips `MessageForm` still needs to pass it through here.
+ */
+export const ProviderStreaming: Story = {
+  render: () => (
+    <MessageFormProvider
+      isStreaming
+      spec={{
+        formName: "book_demo",
+        title: "Book a demo",
+        fields: [{ type: "string", name: "fullName", label: "Full name", required: true }],
+      }}
+    >
+      <MessageFormRoot>
+        <MessageFormTitle />
+        <MessageFormFields />
+        <MessageFormSubmit />
+      </MessageFormRoot>
+    </MessageFormProvider>
+  ),
+};
+
 /** Empty (not streaming) → a calm fallback, never broken UI. */
 export const Empty: Story = {
   args: {

package/src/message-form.test.tsx

@@ -116,16 +116,22 @@ describe("MessageForm — never throws / fallback", () => {
   });
 
   it("renders a skeleton (not a fallback) for an empty spec while streaming", () => {
-    const { container } = render(<MessageForm spec={{ formName: "x", fields: [] }} streaming />);
+    const { container } = render(<MessageForm spec={{ formName: "x", fields: [] }} isStreaming />);
     expect(screen.queryByText(/no fields/i)).not.toBeInTheDocument();
     // Skeleton placeholders are aria-hidden decoration.
     expect(container.querySelector('[aria-hidden="true"] .animate-pulse')).not.toBeNull();
   });
 
+  it("still honors the deprecated `streaming` alias", () => {
+    const { container } = render(<MessageForm spec={{ formName: "x", fields: [] }} streaming />);
+    expect(screen.queryByText(/no fields/i)).not.toBeInTheDocument();
+    expect(container.querySelector('[aria-hidden="true"] .animate-pulse')).not.toBeNull();
+  });
+
   it("drops half-arrived fields while streaming instead of crashing", () => {
     render(
       <MessageForm
-        streaming
+        isStreaming
         spec={{
           formName: "x",
           fields: [

package/src/message-form.tsx

@@ -88,7 +88,7 @@ interface MessageFormContextValue {
   submitted: boolean;
   submitting: boolean;
   disabled: boolean;
-  streaming: boolean;
+  isStreaming: boolean;
   formId: string;
   headingId: string;
 }
@@ -145,6 +145,8 @@ export interface MessageFormProviderProps {
   /** In-flight submit: controls disabled, the submit button shows a spinner. */
   submitting?: boolean;
   /** The spec is still streaming in (renders a skeleton when no fields yet). */
+  isStreaming?: boolean;
+  /** @deprecated Use `isStreaming`. */
   streaming?: boolean;
   children: ReactNode;
 }
@@ -161,9 +163,11 @@ export function MessageFormProvider({
   disabled = false,
   submitted = false,
   submitting = false,
+  isStreaming,
   streaming = false,
   children,
 }: MessageFormProviderProps) {
+  const resolvedStreaming = isStreaming ?? streaming;
   const formId = useId();
   const headingId = `${formId}-title`;
 
@@ -231,7 +235,7 @@ export function MessageFormProvider({
       submitted,
       submitting,
       disabled,
-      streaming,
+      isStreaming: resolvedStreaming,
       formId,
       headingId,
     }),
@@ -246,7 +250,7 @@ export function MessageFormProvider({
       submitted,
       submitting,
       disabled,
-      streaming,
+      resolvedStreaming,
       formId,
       headingId,
     ],
@@ -570,9 +574,9 @@ export type MessageFormFieldsProps = HTMLAttributes<HTMLDivElement>;
 /** Renders every field in the spec, in order. A skeleton while streaming empty. */
 export const MessageFormFields = forwardRef<HTMLDivElement, MessageFormFieldsProps>(
   function MessageFormFields({ className, ...props }, ref) {
-    const { spec, streaming } = useMessageFormContext();
+    const { spec, isStreaming } = useMessageFormContext();
 
-    if (spec.fields.length === 0 && streaming) {
+    if (spec.fields.length === 0 && isStreaming) {
       return (
         <div ref={ref} className={cn("flex flex-col gap-4", className)} {...props}>
           <span className="sr-only" role="status" aria-live="polite">
@@ -771,6 +775,8 @@ export interface MessageFormProps extends Omit<
   /** In-flight submit: controls disabled, spinner on submit. */
   submitting?: boolean;
   /** The spec is still streaming (renders a skeleton when no fields yet). */
+  isStreaming?: boolean;
+  /** @deprecated Use `isStreaming`. */
   streaming?: boolean;
 }
 
@@ -789,12 +795,14 @@ export const MessageForm = forwardRef<HTMLDivElement, MessageFormProps>(function
     disabled,
     submitted,
     submitting,
+    isStreaming,
     streaming,
     className,
     ...props
   },
   ref,
 ) {
+  const resolvedStreaming = isStreaming ?? streaming;
   const result = normalizeFormSpec(spec);
   if (!result.ok) {
     return (
@@ -806,7 +814,7 @@ export const MessageForm = forwardRef<HTMLDivElement, MessageFormProps>(function
   const empty = normalized.fields.length === 0;
 
   // Not streaming + no fields → the spec is structurally valid but useless.
-  if (empty && !streaming) {
+  if (empty && !resolvedStreaming) {
     return (
       <MessageFormFallback
         ref={ref}
@@ -826,7 +834,7 @@ export const MessageForm = forwardRef<HTMLDivElement, MessageFormProps>(function
       disabled={disabled}
       submitted={submitted}
       submitting={submitting}
-      streaming={streaming}
+      isStreaming={resolvedStreaming}
     >
       <div ref={ref} className={cn("w-full", className)} {...props}>
         <MessageFormRoot>

package/src/message-table.stories.tsx

@@ -105,7 +105,7 @@ export const Truncated: Story = {
 /** Streaming / partial — columns known, rows still arriving → skeleton rows. */
 export const StreamingRows: Story = {
   args: {
-    streaming: true,
+    isStreaming: true,
     spec: { title: "Loading results", columns: invoicesSpec.columns, rows: [] },
   },
 };
@@ -113,7 +113,7 @@ export const StreamingRows: Story = {
 /** Missing cells render an em-dash — a half-arrived row never crashes. */
 export const PartialRows: Story = {
   args: {
-    streaming: true,
+    isStreaming: true,
     spec: {
       title: "Streaming rows",
       columns: invoicesSpec.columns,

package/src/message-table.test.tsx

@@ -65,6 +65,13 @@ describe("MessageTable — never throws / fallback", () => {
   });
 
   it("renders skeleton rows while streaming with no rows yet", () => {
+    const { container } = render(
+      <MessageTable spec={{ columns: spec.columns, rows: [] }} isStreaming />,
+    );
+    expect(container.querySelector('[aria-hidden="true"] .animate-pulse')).not.toBeNull();
+  });
+
+  it("still honors the deprecated `streaming` alias", () => {
     const { container } = render(
       <MessageTable spec={{ columns: spec.columns, rows: [] }} streaming />,
     );

package/src/message-table.tsx

@@ -116,6 +116,8 @@ export interface MessageTableProps extends Omit<HTMLAttributes<HTMLDivElement>,
   /** Per-cell render override for custom composition. */
   renderCell?: RenderCell;
   /** The spec is still streaming (columns-but-no-rows shows skeleton rows). */
+  isStreaming?: boolean;
+  /** @deprecated Use `isStreaming`. */
   streaming?: boolean;
 }
 
@@ -145,12 +147,14 @@ export const MessageTable = forwardRef<HTMLDivElement, MessageTableProps>(functi
     onSortChange,
     maxRows,
     renderCell,
+    isStreaming,
     streaming = false,
     className,
     ...props
   },
   ref,
 ) {
+  const resolvedStreaming = isStreaming ?? streaming;
   const { t } = useLocale();
   const reactId = useId();
   const isControlled = sortProp !== undefined;
@@ -181,7 +185,7 @@ export const MessageTable = forwardRef<HTMLDivElement, MessageTableProps>(functi
 
   // No columns: skeleton while streaming, otherwise a fallback.
   if (columns.length === 0) {
-    if (streaming) {
+    if (resolvedStreaming) {
       return (
         <div ref={ref} className={cn("w-full", className)} {...props}>
           <span className="sr-only" role="status" aria-live="polite">
@@ -256,7 +260,7 @@ export const MessageTable = forwardRef<HTMLDivElement, MessageTableProps>(functi
         </p>
       )}
       <div className="overflow-hidden rounded-md border border-border">
-        {streaming && cappedRows.length === 0 && (
+        {resolvedStreaming && cappedRows.length === 0 && (
           <span className="sr-only" role="status" aria-live="polite">
             Loading table…
           </span>
@@ -264,7 +268,7 @@ export const MessageTable = forwardRef<HTMLDivElement, MessageTableProps>(functi
         <Table
           aria-labelledby={titleId}
           aria-label={title ? undefined : t("ai.messageTable.label")}
-          aria-busy={(streaming && cappedRows.length === 0) || undefined}
+          aria-busy={(resolvedStreaming && cappedRows.length === 0) || undefined}
         >
           {truncatedCount > 0 && (
             <TableCaption className="mb-2 mt-3 px-3 text-caption">
@@ -322,7 +326,7 @@ export const MessageTable = forwardRef<HTMLDivElement, MessageTableProps>(functi
             </TableRow>
           </TableHeader>
           <TableBody>
-            {cappedRows.length === 0 && streaming ? (
+            {cappedRows.length === 0 && resolvedStreaming ? (
               [0, 1, 2].map((i) => (
                 <TableRow key={`skeleton-${i}`} aria-hidden="true">
                   {columns.map((column) => (