@ulearning/ai-sdk 0.0.0-stage → 1.0.0-next.0

package/src/tests/generative-ui.primitive.test.tsx

@@ -0,0 +1,176 @@
+// @vitest-environment jsdom
+
+import { cleanup, render } from "./vue";
+import { screen, waitFor } from "@testing-library/dom";
+import {
+  defineComponent,
+  h,
+  type Component,
+  type FunctionalComponent,
+} from "vue";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { AssistantRuntimeProvider } from "../context";
+import * as MessagePrimitive from "../primitives/message";
+import * as ThreadPrimitive from "../primitives/thread";
+import { useLocalRuntime } from "@ulearning/ai-core/vue";
+import type {
+  ChatModelAdapter,
+  GenerativeUISpec,
+  MessagePartState,
+  ThreadMessageLike,
+} from "../index";
+
+afterEach(cleanup);
+
+const noOpAdapter: ChatModelAdapter = {
+  async *run() {},
+};
+
+const Card: FunctionalComponent<{ title?: string }> = (
+  { title },
+  { slots },
+) => (
+  <div data-component="Card">
+    <h3 data-testid="card-title">{title}</h3>
+    {slots.default?.()}
+  </div>
+);
+
+const Button = ({ label }: { label?: string }) => (
+  <button type="button" data-component="Button">
+    {label}
+  </button>
+);
+
+const Fallback = ({ component }: { component: string; props?: unknown }) => (
+  <span data-fallback={component}>missing</span>
+);
+
+const spec: GenerativeUISpec = {
+  root: {
+    component: "Card",
+    props: { title: "Hello" },
+    children: [{ component: "Button", props: { label: "Click me" } }],
+  },
+};
+
+const unknownSpec: GenerativeUISpec = {
+  root: { component: "NotAllowed", props: { foo: 1 } },
+};
+
+const generativeMessages = (s: GenerativeUISpec): ThreadMessageLike[] => [
+  {
+    role: "assistant",
+    content: [{ type: "generative-ui", spec: s }],
+    status: { type: "complete", reason: "stop" },
+  },
+];
+
+const RuntimeProvider = defineComponent(
+  (props: { messages: ThreadMessageLike[] }, { slots }) => {
+    const runtime = useLocalRuntime(noOpAdapter, () => ({
+      initialMessages: props.messages,
+    }));
+    return () => (
+      <AssistantRuntimeProvider runtime={runtime}>
+        {slots.default?.()}
+      </AssistantRuntimeProvider>
+    );
+  },
+  { props: ["messages"] },
+);
+
+const renderThread = (
+  MessageComponent: Component,
+  messages: ThreadMessageLike[],
+) => {
+  render(
+    <RuntimeProvider messages={messages}>
+      <ThreadPrimitive.Messages components={{ Message: MessageComponent }} />
+    </RuntimeProvider>,
+  );
+};
+
+describe("MessagePrimitive.Parts generative-ui (store-backed)", () => {
+  it("renders a generative-ui part via the components.generativeUI allowlist", async () => {
+    const Message = () => (
+      <MessagePrimitive.Parts
+        components={{ generativeUI: { components: { Card, Button } } }}
+      />
+    );
+
+    renderThread(Message, generativeMessages(spec));
+
+    await waitFor(() => {
+      expect(screen.getByTestId("card-title").textContent).toBe("Hello");
+    });
+    expect(screen.getByText("Click me")).toBeTruthy();
+    expect(document.querySelector('[data-component="Card"]')).not.toBeNull();
+    expect(document.querySelector('[data-component="Button"]')).not.toBeNull();
+  });
+
+  it("renders nothing for a generative-ui part when no allowlist is provided and warns in dev", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+
+    const Message = () => (
+      <div data-testid="parts-host">
+        <MessagePrimitive.Parts components={{}} />
+      </div>
+    );
+
+    renderThread(Message, generativeMessages(spec));
+
+    await waitFor(() => {
+      expect(screen.getByTestId("parts-host")).toBeTruthy();
+    });
+
+    expect(document.querySelector('[data-component="Card"]')).toBeNull();
+    expect(document.querySelector('[data-component="Button"]')).toBeNull();
+    expect(screen.getByTestId("parts-host").textContent).toBe("");
+    expect(warn).toHaveBeenCalledWith(
+      expect.stringContaining("`components.generativeUI.components` allowlist"),
+    );
+
+    warn.mockRestore();
+  });
+
+  it("renders the Fallback for an unknown component name instead of throwing", async () => {
+    const Message = () => (
+      <MessagePrimitive.Parts
+        components={{ generativeUI: { components: { Card }, Fallback } }}
+      />
+    );
+
+    renderThread(Message, generativeMessages(unknownSpec));
+
+    await waitFor(() => {
+      expect(
+        document.querySelector('[data-fallback="NotAllowed"]'),
+      ).not.toBeNull();
+    });
+    expect(screen.getByText("missing")).toBeTruthy();
+  });
+});
+
+describe("MessagePrimitive.GenerativeUI (store-backed, reads part from scope)", () => {
+  it("renders the spec read from the surrounding part scope when no spec prop is passed", async () => {
+    const Message = defineComponent(
+      () => () =>
+        h(MessagePrimitive.Parts, {
+          children: ({ part }: { part: MessagePartState }) =>
+            part.type === "generative-ui"
+              ? h(MessagePrimitive.GenerativeUI, {
+                  components: { Card, Button },
+                })
+              : null,
+        }),
+    );
+
+    renderThread(Message, generativeMessages(spec));
+
+    await waitFor(() => {
+      expect(screen.getByTestId("card-title").textContent).toBe("Hello");
+    });
+    expect(screen.getByText("Click me")).toBeTruthy();
+  });
+});

package/src/tests/generative-ui.test.tsx

@@ -0,0 +1,130 @@
+import { describe, expect, it, vi } from "vitest";
+import { createSSRApp, type FunctionalComponent, type VNode } from "vue";
+import { renderToString } from "vue/server-renderer";
+import {
+  GenerativeUIRender,
+  GenerativeUIRenderError,
+  type GenerativeUISpec,
+} from "../index";
+
+const Card: FunctionalComponent<{ title?: string }> = (
+  { title },
+  { slots },
+) => (
+  <div data-component="Card">
+    <h3>{title}</h3>
+    {slots.default?.()}
+  </div>
+);
+const Button = ({ label }: { label?: string }) => (
+  <button type="button" data-component="Button">
+    {label}
+  </button>
+);
+
+const renderToStaticMarkup = async (node: VNode) => {
+  const html = await renderToString(createSSRApp({ render: () => node }));
+  // Native fragment and empty-node anchors carry no visible output.
+  return html.replace(/<!--\[-->|<!--\]-->|<!---->/g, "");
+};
+
+describe("MessagePrimitive.GenerativeUI (same-realm renderer)", () => {
+  it("renders a flat tree with allowlisted components", async () => {
+    const spec: GenerativeUISpec = {
+      root: {
+        component: "Card",
+        props: { title: "Hello" },
+        children: [{ component: "Button", props: { label: "Click me" } }],
+      },
+    };
+
+    const out = await renderToStaticMarkup(
+      <GenerativeUIRender spec={spec} components={{ Card, Button }} />,
+    );
+
+    expect(out).toContain('data-component="Card"');
+    expect(out).toContain("<h3>Hello</h3>");
+    expect(out).toContain('data-component="Button"');
+    expect(out).toContain("Click me");
+  });
+
+  it("renders an array root", async () => {
+    const spec: GenerativeUISpec = {
+      root: [
+        { component: "Card", props: { title: "A" } },
+        { component: "Card", props: { title: "B" } },
+      ],
+    };
+    const out = await renderToStaticMarkup(
+      <GenerativeUIRender spec={spec} components={{ Card }} />,
+    );
+    expect(out).toContain("<h3>A</h3>");
+    expect(out).toContain("<h3>B</h3>");
+  });
+
+  it("renders string children inline", async () => {
+    const spec: GenerativeUISpec = {
+      root: {
+        component: "Card",
+        props: { title: "T" },
+        children: ["hello ", "world"],
+      },
+    };
+    const out = await renderToStaticMarkup(
+      <GenerativeUIRender spec={spec} components={{ Card }} />,
+    );
+    expect(out).toContain("hello world");
+  });
+
+  it("handles empty / partial specs gracefully (stream-friendly)", async () => {
+    const out1 = await renderToStaticMarkup(
+      <GenerativeUIRender spec={{ root: [] }} components={{ Card }} />,
+    );
+    expect(out1).toBe("");
+
+    // Partial spec — top-level component resolved but no children yet.
+    const out2 = await renderToStaticMarkup(
+      <GenerativeUIRender
+        spec={{ root: { component: "Card", props: { title: "loading" } } }}
+        components={{ Card }}
+      />,
+    );
+    expect(out2).toContain("<h3>loading</h3>");
+  });
+
+  it("skips malformed nodes with non-string component names", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const malformedNode = { component: 123, props: { title: "bad" } };
+    const spec = { root: malformedNode } as unknown as GenerativeUISpec;
+
+    try {
+      const out = await renderToStaticMarkup(
+        <GenerativeUIRender spec={spec} components={{ Card }} />,
+      );
+
+      expect(out).toBe("");
+      expect(warn).toHaveBeenCalledWith(
+        "[generative-ui] Skipping malformed node at 0:",
+        malformedNode,
+      );
+    } finally {
+      warn.mockRestore();
+    }
+  });
+
+  it("throws a typed error naming the offending unknown component", async () => {
+    try {
+      await renderToStaticMarkup(
+        <GenerativeUIRender
+          spec={{ root: { component: "Bad" } }}
+          components={{ Card }}
+        />,
+      );
+      throw new Error("should have thrown");
+    } catch (e) {
+      expect(e).toBeInstanceOf(GenerativeUIRenderError);
+      expect((e as GenerativeUIRenderError).componentName).toBe("Bad");
+      expect((e as Error).name).toBe("GenerativeUIRenderError");
+    }
+  });
+});

package/src/tests/in-memory-thread-list.test.tsx

@@ -0,0 +1,142 @@
+// @vitest-environment jsdom
+
+import { cleanup, render } from "./vue";
+import { waitFor } from "@testing-library/dom";
+import { defineComponent } from "vue";
+import { afterEach, describe, it, expect, vi } from "vitest";
+import { useAui, AuiProvider } from "@ulearning/ai-store";
+import { InMemoryThreadList } from "@ulearning/ai-core/store";
+import { ExternalThread } from "../index";
+
+afterEach(cleanup);
+
+const renderThreads = () => {
+  const captured: { aui?: ReturnType<typeof useAui> } = {};
+  const Capture = defineComponent(() => {
+    captured.aui = useAui();
+    return () => null;
+  });
+  const App = defineComponent(() => {
+    const aui = useAui({
+      threads: InMemoryThreadList({
+        thread: () => ExternalThread({ messages: [] }),
+      }),
+    });
+    return () => (
+      <AuiProvider value={aui}>
+        <Capture />
+      </AuiProvider>
+    );
+  });
+  render(<App />);
+  return { aui: () => captured.aui! };
+};
+
+describe("InMemoryThreadList", () => {
+  it("falls back to a live thread when the switch target is deleted in the same tick", async () => {
+    const { aui } = renderThreads();
+
+    aui().threads.switchToNewThread();
+    await waitFor(() =>
+      expect(aui().threads.getState().mainThreadId).not.toBe("main"),
+    );
+    const newId = aui().threads.getState().mainThreadId;
+    aui().threads.switchToThread("main");
+    await waitFor(() =>
+      expect(aui().threads.getState().mainThreadId).toBe("main"),
+    );
+
+    aui().threads.switchToThread(newId);
+    aui().threads.item({ id: newId }).delete();
+
+    await waitFor(() => {
+      const state = aui().threads.getState();
+      expect(state.mainThreadId).toBe("main");
+      expect(state.threadIds).not.toContain(newId);
+    });
+  });
+
+  it("creates unique IDs for threads created in the same millisecond", async () => {
+    const now = vi.spyOn(Date, "now").mockReturnValue(1_000);
+
+    try {
+      const { aui } = renderThreads();
+      aui().threads.switchToNewThread();
+      aui().threads.switchToNewThread();
+
+      await waitFor(() => {
+        const generatedIds = aui()
+          .threads.getState()
+          .threadIds.filter((id) => id !== "main");
+        expect(generatedIds).toHaveLength(2);
+        expect(new Set(generatedIds).size).toBe(2);
+      });
+    } finally {
+      now.mockRestore();
+    }
+  });
+});
+
+describe("InMemoryThreadList reloadMainThread", () => {
+  it("routes reloadMainThread to the main thread's refetch callback", async () => {
+    const refetched: string[] = [];
+    const captured: { aui?: ReturnType<typeof useAui> } = {};
+    const Capture = defineComponent(() => {
+      captured.aui = useAui();
+      return () => null;
+    });
+    const App = defineComponent(() => {
+      const aui = useAui({
+        threads: InMemoryThreadList({
+          thread: (threadId) =>
+            ExternalThread({
+              messages: [],
+              onRefetchThread: async () => {
+                refetched.push(threadId);
+              },
+            }),
+        }),
+      });
+      return () => (
+        <AuiProvider value={aui}>
+          <Capture />
+        </AuiProvider>
+      );
+    });
+    render(<App />);
+    const aui = () => captured.aui!;
+
+    await waitFor(() => expect(captured.aui).toBeDefined());
+    await aui().threads.reloadMainThread();
+    expect(refetched).toEqual(["main"]);
+
+    aui().threads.switchToNewThread();
+    await waitFor(() =>
+      expect(aui().threads.getState().mainThreadId).not.toBe("main"),
+    );
+    const newId = aui().threads.getState().mainThreadId;
+
+    await aui().threads.reloadMainThread();
+    expect(refetched).toEqual(["main", newId]);
+  });
+
+  it("resolves reloadMainThread when the thread has no refetch callback", async () => {
+    const { aui } = renderThreads();
+
+    await waitFor(() => expect(aui()).toBeDefined());
+    await expect(aui().threads.reloadMainThread()).resolves.toBeUndefined();
+  });
+});
+
+describe("InMemoryThreadList suggestions", () => {
+  it("derives the suggestions scope from the main thread", async () => {
+    const { aui } = renderThreads();
+
+    await waitFor(() => {
+      expect(aui().suggestions.getState()).toEqual({ suggestions: [] });
+    });
+    expect(aui().suggestions.getState()).toBe(
+      aui().thread.suggestions().getState(),
+    );
+  });
+});