@copilotkit/react-ui 1.80.0 → 1.81.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@copilotkit/react-ui",
-  "version": "1.80.0",
+  "version": "1.81.0",
   "private": false,
   "keywords": [
     "ai",
@@ -49,9 +49,9 @@
     "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
-    "@copilotkit/react-core": "1.80.0",
-    "@copilotkit/runtime-client-gql": "1.80.0",
-    "@copilotkit/shared": "1.80.0"
+    "@copilotkit/react-core": "1.81.0",
+    "@copilotkit/shared": "1.81.0",
+    "@copilotkit/runtime-client-gql": "1.81.0"
   },
   "devDependencies": {
     "@types/react": "^19.1.0",

package/src/components/chat/Markdown.generative-ui.test.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import { describe, expect, it, vi } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+
+const hoisted = vi.hoisted(() => ({
+  runtime: null as { transport: "tool" | "markdown" } | null,
+  surfacesProps: undefined as Record<string, unknown> | undefined,
+}));
+
+vi.mock("@copilotkit/react-core/v2/generative-ui", async (importOriginal) => {
+  const mod = await importOriginal<Record<string, unknown>>();
+  return {
+    ...mod,
+    useGenerativeUIRuntime: () => hoisted.runtime,
+    MarkdownSurfaces: (props: { content: string; messageId: string }) => {
+      hoisted.surfacesProps = props;
+      return (
+        <div data-testid="markdown-surfaces" data-message={props.messageId}>
+          {props.content}
+        </div>
+      );
+    },
+  };
+});
+
+import { Markdown } from "./Markdown";
+
+const FENCE = '```a2ui\n{"x":1}\n```';
+
+/**
+ * The v1 chat renders a2ui fences through the generative UI markdown
+ * transport when the v1 provider got a `generativeUI` prop with it.
+ */
+describe("v1 Markdown with the generative UI markdown transport", () => {
+  it("renders the message with MarkdownSurfaces when the transport is markdown", () => {
+    hoisted.runtime = { transport: "markdown" };
+    const html = renderToStaticMarkup(
+      <Markdown content={FENCE} messageId="m1" />,
+    );
+    expect(html).toContain('data-testid="markdown-surfaces"');
+    expect(html).toContain('data-message="m1"');
+    expect(html).not.toContain("<pre");
+  });
+
+  it("gives MarkdownSurfaces the app's tag renderers and plugins for the prose", () => {
+    hoisted.runtime = { transport: "markdown" };
+    const Link = () => null;
+    const remarkPlugin = () => undefined;
+    const rehypePlugin = () => undefined;
+    renderToStaticMarkup(
+      <Markdown
+        content={FENCE}
+        messageId="m1"
+        components={{ a: Link }}
+        remarkPlugins={[remarkPlugin]}
+        rehypePlugins={[rehypePlugin]}
+      />,
+    );
+    const props = hoisted.surfacesProps as {
+      components: Record<string, unknown>;
+      remarkPlugins: unknown[];
+      rehypePlugins: unknown[];
+    };
+    expect(props.components.a).toBe(Link);
+    expect(props.remarkPlugins).toContain(remarkPlugin);
+    // The app's rehype plugins run before the sanitizer, as without fences.
+    expect(props.rehypePlugins).toContain(rehypePlugin);
+    expect(props.rehypePlugins.length).toBe(3);
+  });
+
+  it("renders a plain code block with the tool transport", () => {
+    hoisted.runtime = { transport: "tool" };
+    const html = renderToStaticMarkup(
+      <Markdown content={FENCE} messageId="m1" />,
+    );
+    expect(html).not.toContain("markdown-surfaces");
+    expect(html).toContain("a2ui");
+  });
+
+  it("renders a plain code block without a generative UI provider", () => {
+    hoisted.runtime = null;
+    const html = renderToStaticMarkup(
+      <Markdown content={FENCE} messageId="m1" />,
+    );
+    expect(html).not.toContain("markdown-surfaces");
+  });
+
+  it("needs a message id to find the fences of the message", () => {
+    hoisted.runtime = { transport: "markdown" };
+    const html = renderToStaticMarkup(<Markdown content={FENCE} />);
+    expect(html).not.toContain("markdown-surfaces");
+  });
+});

package/src/components/chat/Markdown.tsx

@@ -21,6 +21,10 @@ import type { FC } from "react";
 import { memo, useMemo } from "react";
 import type { Options, Components } from "react-markdown";
 import ReactMarkdown from "react-markdown";
+import {
+  MarkdownSurfaces,
+  useGenerativeUIRuntime,
+} from "@copilotkit/react-core/v2/generative-ui";
 import { CodeBlock } from "./CodeBlock";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
@@ -148,6 +152,11 @@ const MemoizedReactMarkdown: FC<Options> = memo(ReactMarkdown);
 
 type MarkdownProps = Omit<Options, "children"> & {
   content: string;
+  /**
+   * The id of the message. With the generative UI markdown transport on the
+   * provider, the ```a2ui fences of the message render as surfaces.
+   */
+  messageId?: string;
 };
 
 export const Markdown = ({
@@ -155,13 +164,20 @@ export const Markdown = ({
   components,
   remarkPlugins,
   rehypePlugins,
+  messageId,
   ...rest
 }: MarkdownProps) => {
+  // The v1 provider sits on the v2 core, so a `generativeUI` prop on it
+  // reaches this hook. Without the markdown transport, a fence is a code
+  // block.
+  const generativeUI = useGenerativeUIRuntime();
+  const rendersSurfaces =
+    generativeUI?.transport === "markdown" && messageId !== undefined;
   const mergedComponents = useMemo(
     () => ({ ...defaultComponents, ...components }),
     [components],
   );
-  const mergedRemarkPlugins = useMemo<Options["remarkPlugins"]>(
+  const mergedRemarkPlugins = useMemo<NonNullable<Options["remarkPlugins"]>>(
     () => [
       remarkGfm,
       [remarkMath, { singleDollarTextMath: false }],
@@ -169,10 +185,25 @@ export const Markdown = ({
     ],
     [remarkPlugins],
   );
-  const mergedRehypePlugins = useMemo<Options["rehypePlugins"]>(
+  const mergedRehypePlugins = useMemo<NonNullable<Options["rehypePlugins"]>>(
     () => [rehypeRaw, ...(rehypePlugins ?? []), rehypeSanitize],
     [rehypePlugins],
   );
+  if (rendersSurfaces) {
+    return (
+      <div className="copilotKitMarkdown">
+        {/* The prose between the fences keeps the app's tag renderers and
+            the same plugins and sanitizing as a message without fences. */}
+        <MarkdownSurfaces
+          content={content}
+          messageId={messageId}
+          components={mergedComponents}
+          remarkPlugins={mergedRemarkPlugins}
+          rehypePlugins={mergedRehypePlugins}
+        />
+      </div>
+    );
+  }
   return (
     <div className="copilotKitMarkdown">
       <MemoizedReactMarkdown

package/src/components/chat/messages/AssistantMessage.tsx

@@ -88,7 +88,11 @@ export const AssistantMessage = (props: AssistantMessageProps) => {
       {content && (
         <div className="copilotKitMessage copilotKitAssistantMessage">
           {content && (
-            <Markdown content={content} components={markdownTagRenderers} />
+            <Markdown
+              content={content}
+              components={markdownTagRenderers}
+              messageId={message?.id}
+            />
           )}
 
           {content && !isLoading && (

package/vitest.config.mjs

@@ -4,7 +4,10 @@ export default defineConfig({
   test: {
     environment: "node",
     globals: true,
-    include: ["src/**/*.{test,spec}.ts", "oxlint-rules/**/*.{test,spec}.mjs"],
+    include: [
+      "src/**/*.{test,spec}.{ts,tsx}",
+      "oxlint-rules/**/*.{test,spec}.mjs",
+    ],
     reporters: [["default", { summary: false }]],
     silent: true,
   },