@copilotkit/react-ui 1.60.2 → 1.61.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@copilotkit/react-ui",
-  "version": "1.60.2",
+  "version": "1.61.1",
   "private": false,
   "keywords": [
     "ai",
@@ -46,11 +46,12 @@
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^15.6.1",
     "rehype-raw": "^7.0.0",
+    "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
-    "@copilotkit/runtime-client-gql": "1.60.2",
-    "@copilotkit/shared": "1.60.2",
-    "@copilotkit/react-core": "1.60.2"
+    "@copilotkit/react-core": "1.61.1",
+    "@copilotkit/shared": "1.61.1",
+    "@copilotkit/runtime-client-gql": "1.61.1"
   },
   "devDependencies": {
     "@types/react": "^19.1.0",
@@ -58,12 +59,13 @@
     "eslint": "^8.56.0",
     "postcss": "^8.4.20",
     "react": "^18.2.0",
+    "react-dom": "^19.2.0",
     "tailwindcss": "^3.3.0",
     "tsdown": "^0.20.3",
     "typescript": "^5.2.3",
     "vitest": "^3.2.4",
-    "tsconfig": "1.4.12",
-    "tailwind-config": "1.4.12"
+    "tailwind-config": "1.4.12",
+    "tsconfig": "1.4.12"
   },
   "peerDependencies": {
     "react": "^18 || ^19 || ^19.0.0-rc"

package/src/components/chat/Input.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useRef, useState } from "react";
-import { InputProps } from "./props";
+import type { InputProps } from "./props";
 import { useChatContext } from "./ChatContext";
 import AutoResizingTextarea from "./Textarea";
 import { usePushToTalk } from "../../hooks/use-push-to-talk";
@@ -120,6 +120,7 @@ export const Input = ({
           autoFocus={false}
           maxRows={MAX_NEWLINES}
           value={text}
+          data-testid="copilot-chat-textarea"
           onChange={(event) => setText(event.target.value)}
           onCompositionStart={() => setIsComposing(true)}
           onCompositionEnd={() => setIsComposing(false)}
@@ -161,6 +162,7 @@ export const Input = ({
             disabled={sendDisabled}
             onClick={isInProgress && !hideStopButton ? onStop : send}
             data-copilotkit-in-progress={inProgress}
+            data-testid="copilot-send-button"
             data-test-id={
               inProgress
                 ? "copilot-chat-request-in-progress"

package/src/components/chat/Markdown.tsx

@@ -1,9 +1,12 @@
-import { FC, memo, useMemo } from "react";
-import ReactMarkdown, { Options, Components } from "react-markdown";
+import type { FC } from "react";
+import { memo, useMemo } from "react";
+import type { Options, Components } from "react-markdown";
+import ReactMarkdown from "react-markdown";
 import { CodeBlock } from "./CodeBlock";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import rehypeRaw from "rehype-raw";
+import rehypeSanitize from "rehype-sanitize";
 
 const defaultComponents: Components = {
   a({ children, ...props }) {
@@ -148,7 +151,7 @@ export const Markdown = ({
     [remarkPlugins],
   );
   const mergedRehypePlugins = useMemo<Options["rehypePlugins"]>(
-    () => [rehypeRaw, ...(rehypePlugins ?? [])],
+    () => [rehypeRaw, ...(rehypePlugins ?? []), rehypeSanitize],
     [rehypePlugins],
   );
   return (

package/src/components/chat/Markdown.xss.test.ts

@@ -0,0 +1,170 @@
+import React from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { Markdown } from "./Markdown";
+
+/**
+ * Security regression test: the legacy Markdown renderer uses
+ * react-markdown + rehype-raw, which parses raw HTML embedded in
+ * assistant/model output. Without an HTML sanitizer, that raw HTML
+ * reaches the DOM verbatim — a High-severity XSS sink (CWE-79).
+ *
+ * These tests render the REAL <Markdown> component (the same default
+ * path as AssistantMessage) and assert that dangerous raw-HTML
+ * payloads are stripped from the rendered output, while legitimate
+ * Markdown/GFM features continue to render.
+ *
+ * The file is a `.ts` (not `.tsx`) test using React.createElement
+ * because the vitest config only matches the `.ts` test glob in a node
+ * environment. We render with react-dom/server so the assertions
+ * exercise the actual production rendering pipeline.
+ */
+
+const h = React.createElement;
+
+function render(
+  content: string,
+  rehypePlugins?: React.ComponentProps<typeof Markdown>["rehypePlugins"],
+): string {
+  return renderToStaticMarkup(
+    h(Markdown, rehypePlugins ? { content, rehypePlugins } : { content }),
+  );
+}
+
+describe("Markdown XSS sanitization", () => {
+  describe("dangerous raw HTML is stripped", () => {
+    it("strips <script> tags", () => {
+      const html = render('Hello <script>alert("xss")</script> world');
+      expect(html).not.toMatch(/<script/i);
+      expect(html).not.toContain('alert("xss")');
+    });
+
+    it("strips <style> tags (CSS exfiltration / clickjacking)", () => {
+      const html = render(
+        "Hello <style>body { background: url('//evil') }</style> world",
+      );
+      // The <style> ELEMENT must not survive — that is the active sink.
+      // rehype-sanitize drops the element but keeps its (now inert) text,
+      // which is harmless escaped text, not a stylesheet.
+      expect(html).not.toMatch(/<style/i);
+      // The CSS payload must not survive as a functional stylesheet. Because
+      // the <style> element is stripped, the url('//evil') declaration can
+      // only appear (if at all) as inert escaped text, never inside a live
+      // <style> block where it would fetch the resource.
+      expect(html).not.toMatch(/<style[^>]*>[^<]*url\(/i);
+    });
+
+    it("strips <base href> (base-tag hijacking)", () => {
+      const html = render('Hello <base href="https://evil.example/"> world');
+      expect(html).not.toMatch(/<base/i);
+      expect(html).not.toContain("evil.example");
+    });
+
+    it("strips <form action> and <button formaction>", () => {
+      const html = render(
+        'Hi <form action="https://evil.example/steal">' +
+          '<button formaction="https://evil.example/steal">go</button>' +
+          "</form>",
+      );
+      expect(html).not.toMatch(/<form/i);
+      expect(html).not.toMatch(/formaction/i);
+      expect(html).not.toContain("evil.example");
+    });
+
+    it("strips inline event handlers (onerror/onclick)", () => {
+      const html = render(
+        'Look <img src="x" onerror="alert(1)"> and ' +
+          '<a href="#" onclick="alert(2)">link</a>',
+      );
+      expect(html).not.toMatch(/onerror/i);
+      expect(html).not.toMatch(/onclick/i);
+      expect(html).not.toContain("alert(1)");
+      expect(html).not.toContain("alert(2)");
+    });
+
+    it("strips javascript: URLs from links", () => {
+      // eslint-disable-next-line no-script-url
+      const html = render("[click](javascript:alert(1))");
+      expect(html).not.toContain("javascript:alert(1)");
+      // The href must be neutralized — not merely the payload string absent.
+      // A partially-broken sanitizer could drop the args but keep the scheme.
+      expect(html).not.toMatch(/href="javascript:/i);
+    });
+
+    it("strips <iframe>", () => {
+      const html = render(
+        'Hi <iframe src="https://evil.example"></iframe> bye',
+      );
+      expect(html).not.toMatch(/<iframe/i);
+      expect(html).not.toContain("evil.example");
+    });
+
+    it("sanitizes HTML injected by a consumer rehype plugin (sanitize must run last)", () => {
+      // A malicious/compromised consumer-supplied rehype plugin injects a
+      // raw <script> element directly into the HAST. rehype-sanitize must be
+      // the TERMINAL rehype pass so that ANY node a consumer plugin adds is
+      // still scrubbed. If consumer plugins run after sanitize, this payload
+      // survives to output — a sanitizer bypass (CWE-79).
+      const injectScript = () => (tree: any) => {
+        tree.children.push({
+          type: "element",
+          tagName: "script",
+          properties: {},
+          children: [{ type: "text", value: 'alert("pwned")' }],
+        });
+      };
+      const html = render("safe content", [injectScript]);
+      expect(html).not.toMatch(/<script/i);
+      expect(html).not.toContain('alert("pwned")');
+    });
+  });
+
+  describe("legitimate markdown features are preserved", () => {
+    it("renders headings, paragraphs, and links", () => {
+      const html = render(
+        "# Title\n\nSome **bold** [link](https://ok.example)",
+      );
+      expect(html).toMatch(/<h1[^>]*>/i);
+      expect(html).toContain("Title");
+      expect(html).toContain("https://ok.example");
+      expect(html).toMatch(/<strong>bold<\/strong>/i);
+    });
+
+    it("preserves language-* className on code blocks (syntax highlighting)", () => {
+      const html = render("```js\nconst x = 1;\n```");
+      // The CodeBlock renderer is driven by the language-js className that
+      // react-markdown derives from the fenced-code info string. Sanitize
+      // must not strip the class attribute that selects the language, and
+      // the highlighted code content must survive (the syntax highlighter
+      // tokenizes it across spans, so assert on the tokens, not a verbatim
+      // contiguous string).
+      //
+      // Assert language-js survives as an actual sanitized class ATTRIBUTE
+      // (class="...language-js...") rather than as a bare substring that a
+      // highlighter span or inline style could incidentally emit. This proves
+      // rehype-sanitize kept the class attribute on the code element.
+      expect(html).toMatch(/class="[^"]*\blanguage-js\b[^"]*"/);
+      expect(html).toMatch(/const/);
+      expect(html).toMatch(/x/);
+      expect(html).toMatch(/1/);
+    });
+
+    it("renders GFM tables", () => {
+      const md = ["| a | b |", "| - | - |", "| 1 | 2 |"].join("\n");
+      const html = render(md);
+      expect(html).toMatch(/<table/i);
+      expect(html).toMatch(/<td[^>]*>1<\/td>/i);
+    });
+
+    it("renders GFM strikethrough", () => {
+      const html = render("~~gone~~");
+      expect(html).toMatch(/<del>gone<\/del>/i);
+    });
+
+    it("preserves the streaming cursor marker", () => {
+      // The Markdown component renders a pulsing span for the ▍ cursor
+      // emitted during streaming. Sanitization must not remove it.
+      const html = render("partial answer `▍`");
+      expect(html).toContain("▍");
+    });
+  });
+});

package/src/components/chat/Textarea.tsx

@@ -15,6 +15,7 @@ interface AutoResizingTextareaProps {
   onCompositionStart?: () => void;
   onCompositionEnd?: () => void;
   autoFocus?: boolean;
+  "data-testid"?: string;
 }
 
 const AutoResizingTextarea = forwardRef<
@@ -31,6 +32,7 @@ const AutoResizingTextarea = forwardRef<
       onCompositionStart,
       onCompositionEnd,
       autoFocus,
+      "data-testid": dataTestId,
     },
     ref,
   ) => {
@@ -69,6 +71,7 @@ const AutoResizingTextarea = forwardRef<
     return (
       <textarea
         ref={internalTextareaRef}
+        data-testid={dataTestId}
         value={value}
         onChange={onChange}
         onKeyDown={onKeyDown}

package/src/components/chat/input.testids.test.ts

@@ -0,0 +1,47 @@
+import { readFileSync } from "fs";
+import { resolve } from "path";
+
+/**
+ * Verifies stable `data-testid` markers exist on the CopilotChat input controls
+ * so e2e tests (e.g. Playwright) can deterministically locate the textarea and
+ * send button on the default `<CopilotChat>` surface. See GitHub issue #4215.
+ *
+ * The selector names mirror the V2 components in
+ * `@copilotkit/react-core` (`copilot-chat-textarea`, `copilot-send-button`) so a
+ * test recipe written against V2 carries over to the default surface unchanged.
+ *
+ * This runs in the package's node test environment (no DOM), so it asserts the
+ * wiring at the source level. Crucially it checks BOTH that `Input.tsx` passes
+ * the testid AND that `Textarea.tsx` forwards it onto the rendered `<textarea>`:
+ * `AutoResizingTextarea` destructures a fixed prop set with no `{...rest}`
+ * spread, so a testid passed from `Input.tsx` is silently dropped unless the
+ * inner component explicitly declares and applies it.
+ */
+
+const inputPath = resolve(__dirname, "Input.tsx");
+const textareaPath = resolve(__dirname, "Textarea.tsx");
+
+const inputSrc = readFileSync(inputPath, "utf-8");
+const textareaSrc = readFileSync(textareaPath, "utf-8");
+
+describe("CopilotChat input stable testids", () => {
+  it("Input passes the copilot-chat-textarea testid to the textarea", () => {
+    expect(inputSrc).toMatch(/data-testid="copilot-chat-textarea"/);
+  });
+
+  it("Input puts the copilot-send-button testid on the send control", () => {
+    expect(inputSrc).toMatch(/data-testid="copilot-send-button"/);
+  });
+
+  it("Input preserves the legacy data-test-id for back-compat", () => {
+    expect(inputSrc).toMatch(/data-test-id=/);
+    expect(inputSrc).toMatch(/copilot-chat-ready/);
+  });
+
+  it("Textarea declares and forwards data-testid onto the inner textarea", () => {
+    // Declared on the props interface...
+    expect(textareaSrc).toMatch(/"data-testid"\?: string/);
+    // ...and actually applied to the rendered <textarea> (the dropped-prop guard).
+    expect(textareaSrc).toMatch(/data-testid=\{dataTestId\}/);
+  });
+});