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

package/src/legacy-runtime/AssistantRuntimeProvider.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { defineComponent, h } from "vue";
+import {
+  type AssistantClient,
+  type AuiConfig,
+  useAui,
+} from "@ulearning/ai-store";
+import { useIsomorphicLayoutEffect } from "@ulearning/ai-store/internal";
+import type { AssistantRuntime } from "@ulearning/ai-core";
+import { AssistantProviderBase } from "@ulearning/ai-core/vue";
+import { ThreadPrimitiveViewportProvider } from "../context/providers/ThreadViewportProvider";
+import { DevToolsProviderApi } from "../devtools/DevToolsHooks";
+
+export namespace AssistantRuntimeProvider {
+  export type Props = {
+    runtime: AssistantRuntime;
+    /** Explicit parent client; omitted providers start an isolated scope. */
+    aui?: AssistantClient | undefined;
+    config?: AuiConfig | undefined;
+  };
+}
+const DevToolsRegistration = defineComponent({
+  name: "DevToolsRegistration",
+  setup() {
+    const aui = useAui();
+    useIsomorphicLayoutEffect(() => {
+      if (
+        typeof process === "undefined" ||
+        process.env.NODE_ENV === "production"
+      )
+        return;
+      return DevToolsProviderApi.register(aui);
+    }, []);
+    return () => null;
+  },
+});
+export const AssistantRuntimeProviderImpl = defineComponent(
+  function AssistantRuntimeProvider(
+    props: AssistantRuntimeProvider.Props,
+    { slots },
+  ) {
+    return () =>
+      h(
+        AssistantProviderBase,
+        {
+          runtime: props.runtime,
+          aui: props.aui ?? null,
+          config: props.config,
+        },
+        {
+          default: () => [
+            h(DevToolsRegistration),
+            h(ThreadPrimitiveViewportProvider, null, slots),
+          ],
+        },
+      );
+  },
+  { name: "AssistantRuntimeProvider", props: ["runtime", "aui", "config"] },
+);
+export const AssistantRuntimeProvider = AssistantRuntimeProviderImpl;

package/src/mcp-apps/McpAppRenderer.composer.test.tsx

@@ -0,0 +1,129 @@
+// @vitest-environment jsdom
+import { act, cleanup, render } from "../tests/vue";
+import { waitFor } from "@testing-library/dom";
+import { defineComponent, h } from "vue";
+import { resource, useResource, useTapRoot } from "@ulearning/ai-tap";
+import {
+  AssistantRuntimeProvider,
+  MessageByIndexProvider,
+  useExternalStoreRuntime,
+  type ToolCallMessagePartProps,
+} from "@ulearning/ai-core/vue";
+import type { ThreadMessageLike } from "@ulearning/ai-core";
+import { afterEach, expect, it, vi } from "vitest";
+import type { AssistantRuntime } from "../index";
+import type { McpAppBridgeHandlers, McpAppsHost } from "./types";
+
+const { framePropsMock } = vi.hoisted(() => ({ framePropsMock: vi.fn() }));
+
+vi.mock("./app-frame", () => ({
+  McpAppFrame: (props: unknown) => {
+    framePropsMock(props);
+    return null;
+  },
+}));
+
+import { McpAppRenderer } from "./McpAppRenderer";
+
+const Host = resource(({ host }: { host: McpAppsHost }) => host);
+
+const host: McpAppsHost = {
+  loadResource: vi.fn(async ({ uri }) => ({
+    uri,
+    mimeType: "text/html;profile=mcp-app" as const,
+    html: "",
+  })),
+  callTool: vi.fn(),
+  readResource: vi.fn(),
+  listResources: vi.fn(),
+};
+
+const part: ToolCallMessagePartProps = {
+  type: "tool-call",
+  toolCallId: "call-1",
+  toolName: "search",
+  args: {},
+  argsText: "{}",
+  status: { type: "complete" },
+  mcp: { app: { resourceUri: "ui://example/search" } },
+  addResult: vi.fn(),
+  resume: vi.fn(),
+  respondToApproval: vi.fn(),
+};
+
+const messages: ThreadMessageLike[] = [
+  { role: "assistant", content: "Here is the app" },
+];
+
+afterEach(cleanup);
+
+const AppPart = defineComponent({
+  setup() {
+    const root = useTapRoot(() =>
+      useResource(McpAppRenderer({ host: Host({ host }) })),
+    );
+    const Renderer = root.getValue().render;
+    return () => h(Renderer, part);
+  },
+});
+
+let runtime!: AssistantRuntime;
+
+const App = defineComponent({
+  setup() {
+    runtime = useExternalStoreRuntime({
+      messages,
+      convertMessage: (message: ThreadMessageLike) => message,
+      onNew: async () => {},
+    });
+    return () =>
+      h(
+        AssistantRuntimeProvider,
+        { runtime },
+        {
+          default: () =>
+            h(
+              MessageByIndexProvider,
+              { index: 0 },
+              {
+                default: () => h(AppPart),
+              },
+            ),
+        },
+      );
+  },
+});
+
+const renderApp = async () => {
+  framePropsMock.mockClear();
+  render(<App />);
+  await waitFor(() => expect(framePropsMock).toHaveBeenCalled());
+  const handlers = framePropsMock.mock.lastCall?.[0]
+    .handlers as McpAppBridgeHandlers;
+  return handlers;
+};
+
+it("fills the thread composer from an MCP App message inside a message", async () => {
+  const handlers = await renderApp();
+
+  let result: unknown;
+  act(() => {
+    result = handlers.sendMessage?.({ text: "Open Grade 5 Math" });
+  });
+
+  expect(result).toEqual({ ok: true });
+  expect(runtime.thread.composer.getState().text).toBe("Open Grade 5 Math");
+});
+
+it("keeps the user's draft when an MCP App message arrives", async () => {
+  const handlers = await renderApp();
+  act(() => runtime.thread.composer.setText("Show my classes"));
+
+  act(() => {
+    handlers.sendMessage?.({ text: "Open Grade 5 Math" });
+  });
+
+  expect(runtime.thread.composer.getState().text).toBe(
+    "Show my classes Open Grade 5 Math",
+  );
+});