@assistant-ui/react-generative-ui 0.0.16 → 0.0.18

package/src/vocabulary/text.test.tsx

@@ -70,4 +70,33 @@ describe("textVocabulary", () => {
       '<p data-aui="caption">muted note</p>',
     );
   });
+
+  it.each([
+    [
+      { $type: "Header", text: { unexpected: true } },
+      undefined,
+      '<h2 data-aui="header" data-aui-size="lg"></h2>',
+    ],
+    [
+      { $type: "Text", value: { unexpected: true } },
+      { status: "streaming" as const },
+      '<span data-aui="text" data-aui-size="md"></span>',
+    ],
+    [
+      { $type: "Caption", value: { unexpected: true } },
+      { status: "streaming" as const },
+      '<p data-aui="caption"></p>',
+    ],
+    [
+      { $type: "Text", value: 42 },
+      { status: "streaming" as const },
+      '<span data-aui="text" data-aui-size="md">42</span>',
+    ],
+  ])("renders only supported text properties", (node, options, expected) => {
+    expect(
+      renderToStaticMarkup(
+        <>{renderGenerativeUI(node, textVocabulary, options)}</>,
+      ),
+    ).toBe(expected);
+  });
 });

package/src/vocabulary/text.tsx

@@ -1,6 +1,7 @@
 import { z } from "zod";
 import type { GenerativeUILibrary } from "../types";
 import { COLORS, TEXT_SIZES, WEIGHTS } from "../ir";
+import { toTextContent } from "./toTextContent";
 
 export const textVocabulary = {
   Header: {
@@ -14,7 +15,7 @@ export const textVocabulary = {
     }),
     render: ({ text, size, children }) => (
       <h2 data-aui="header" data-aui-size={size ?? "lg"}>
-        {text}
+        {toTextContent(text)}
         {children}
       </h2>
     ),
@@ -38,7 +39,7 @@ export const textVocabulary = {
         data-aui-weight={weight}
         data-aui-color={color}
       >
-        {value}
+        {toTextContent(value)}
         {children}
       </span>
     ),
@@ -51,7 +52,7 @@ export const textVocabulary = {
     streamProperties: true,
     render: ({ value, children }) => (
       <p data-aui="caption">
-        {value}
+        {toTextContent(value)}
         {children}
       </p>
     ),

package/src/vocabulary/toTextContent.ts

@@ -0,0 +1,2 @@
+export const toTextContent = (value: unknown): string | number | null =>
+  typeof value === "string" || typeof value === "number" ? value : null;