@assistant-ui/react-generative-ui 0.0.6 → 0.0.7

package/src/vocabulary/text.test.tsx

@@ -0,0 +1,73 @@
+import { describe, it, expect } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { renderGenerativeUI } from "../renderGenerativeUI";
+import { textVocabulary } from "./text";
+
+const render = (node: unknown) =>
+  renderToStaticMarkup(<>{renderGenerativeUI(node, textVocabulary)}</>);
+
+describe("textVocabulary", () => {
+  it("Header renders an h2 with the text and a size hook", () => {
+    expect(render({ $type: "Header", text: "Title", size: "xl" })).toBe(
+      '<h2 data-aui="header" data-aui-size="xl">Title</h2>',
+    );
+  });
+
+  it("Header defaults size to lg when omitted", () => {
+    expect(render({ $type: "Header", text: "Title" })).toBe(
+      '<h2 data-aui="header" data-aui-size="lg">Title</h2>',
+    );
+  });
+
+  it("Text renders a span with size/weight/color hooks and the value", () => {
+    expect(
+      render({
+        $type: "Text",
+        value: "hi",
+        size: "sm",
+        weight: "bold",
+        color: "secondary",
+      }),
+    ).toBe(
+      '<span data-aui="text" data-aui-size="sm" data-aui-weight="bold" data-aui-color="secondary">hi</span>',
+    );
+  });
+
+  it("Text defaults size to md and leaves weight/color undefined", () => {
+    expect(render({ $type: "Text", value: "hi" })).toBe(
+      '<span data-aui="text" data-aui-size="md">hi</span>',
+    );
+  });
+
+  it("Text renders partial value while streaming (streamProperties: true)", () => {
+    expect(
+      renderToStaticMarkup(
+        <>
+          {renderGenerativeUI(
+            { $type: "Text", value: "partial" },
+            textVocabulary,
+            { status: "streaming" },
+          )}
+        </>,
+      ),
+    ).toBe('<span data-aui="text" data-aui-size="md">partial</span>');
+  });
+
+  it("Text renders nested children (span-in-span, valid HTML)", () => {
+    expect(
+      render({
+        $type: "Text",
+        value: "before",
+        children: { $type: "Text", value: "after" },
+      }),
+    ).toBe(
+      '<span data-aui="text" data-aui-size="md">before<span data-aui="text" data-aui-size="md">after</span></span>',
+    );
+  });
+
+  it("Caption renders a p with the value", () => {
+    expect(render({ $type: "Caption", value: "muted note" })).toBe(
+      '<p data-aui="caption">muted note</p>',
+    );
+  });
+});

package/src/vocabulary/text.tsx

@@ -0,0 +1,59 @@
+import { z } from "zod";
+import type { GenerativeUILibrary } from "../types";
+import { COLORS, TEXT_SIZES, WEIGHTS } from "../ir";
+
+export const textVocabulary = {
+  Header: {
+    description: "A section heading. Renders as a bold title.",
+    properties: z.object({
+      text: z.string().describe("The heading text."),
+      size: z
+        .enum(TEXT_SIZES)
+        .optional()
+        .describe("Heading size; defaults to `lg`."),
+    }),
+    render: ({ text, size, children }) => (
+      <h2 data-aui="header" data-aui-size={size ?? "lg"}>
+        {text}
+        {children}
+      </h2>
+    ),
+  },
+  Text: {
+    description: "A run of text. Use for paragraphs, labels, or inline copy.",
+    properties: z.object({
+      value: z.string().describe("The text content."),
+      size: z
+        .enum(TEXT_SIZES)
+        .optional()
+        .describe("Text size; defaults to `md`."),
+      weight: z.enum(WEIGHTS).optional().describe("Font weight."),
+      color: z.enum(COLORS).optional().describe("Foreground color token."),
+    }),
+    streamProperties: true,
+    render: ({ value, size, weight, color, children }) => (
+      <span
+        data-aui="text"
+        data-aui-size={size ?? "md"}
+        data-aui-weight={weight}
+        data-aui-color={color}
+      >
+        {value}
+        {children}
+      </span>
+    ),
+  },
+  Caption: {
+    description: "Secondary, de-emphasized text under a primary element.",
+    properties: z.object({
+      value: z.string().describe("The caption text."),
+    }),
+    streamProperties: true,
+    render: ({ value, children }) => (
+      <p data-aui="caption">
+        {value}
+        {children}
+      </p>
+    ),
+  },
+} satisfies GenerativeUILibrary;