@copilotkit/react-ui 1.55.3 → 1.56.0

package/package.json

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

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

@@ -0,0 +1,101 @@
+import { readFileSync } from "fs";
+import { resolve } from "path";
+
+/**
+ * These tests verify that CSS selectors in markdown.css correctly target
+ * the class names used by the Markdown component. When the p tag was changed
+ * to a div (to fix hydration errors), the CSS selectors must use class-only
+ * selectors instead of element-qualified selectors for paragraphs.
+ */
+
+const cssPath = resolve(__dirname, "../../css/markdown.css");
+const tsxPath = resolve(__dirname, "Markdown.tsx");
+
+const cssContent = readFileSync(cssPath, "utf-8");
+const tsxContent = readFileSync(tsxPath, "utf-8");
+
+describe("Markdown CSS/component selector consistency", () => {
+  it("should not use p.copilotKitMarkdownElement selector in CSS", () => {
+    // After the p->div change, CSS must not use element-qualified p selectors
+    expect(cssContent).not.toMatch(/\bp\.copilotKitMarkdownElement\b/);
+  });
+
+  it("should have .copilotKitParagraph selector in CSS for paragraph styling", () => {
+    expect(cssContent).toMatch(/\.copilotKitParagraph\s*\{/);
+  });
+
+  it("should have .copilotKitParagraph:not(:last-child) selector for paragraph spacing", () => {
+    expect(cssContent).toMatch(/\.copilotKitParagraph:not\(:last-child\)/);
+  });
+
+  it("should use copilotKitParagraph class on the paragraph component", () => {
+    // The p component override in Markdown.tsx should include copilotKitParagraph
+    expect(tsxContent).toMatch(/copilotKitParagraph/);
+  });
+
+  it("should render a div instead of p for the paragraph component", () => {
+    // The paragraph component should use <div> to avoid hydration errors
+    // when block-level elements are nested inside markdown paragraphs
+    const pComponentMatch = tsxContent.match(
+      /p:\s*\(\{[^}]*\}\)\s*=>\s*\(\s*<(\w+)/,
+    );
+    expect(pComponentMatch).not.toBeNull();
+    expect(pComponentMatch![1]).toBe("div");
+  });
+
+  it("should still have copilotKitMarkdownElement class on the paragraph div", () => {
+    // The div should retain the base class for any shared styling
+    const pSection = tsxContent.match(/p:\s*\([^)]*\)\s*=>\s*\([^)]+\)/s);
+    expect(pSection).not.toBeNull();
+    expect(pSection![0]).toContain("copilotKitMarkdownElement");
+  });
+
+  it("should use .copilotKitParagraph (not p) inside blockquote selector", () => {
+    // After p->div, blockquote nested paragraph selector must target the class
+    expect(cssContent).toMatch(
+      /blockquote\.copilotKitMarkdownElement\s+\.copilotKitParagraph\s*\{/,
+    );
+    expect(cssContent).not.toMatch(
+      /blockquote\.copilotKitMarkdownElement\s+p\s*\{/,
+    );
+  });
+
+  describe("other element selectors remain valid", () => {
+    const elementSelectors = [
+      { element: "h1", selector: "h1.copilotKitMarkdownElement" },
+      { element: "h2", selector: "h2.copilotKitMarkdownElement" },
+      { element: "h3", selector: "h3.copilotKitMarkdownElement" },
+      { element: "h4", selector: "h4.copilotKitMarkdownElement" },
+      { element: "h5", selector: "h5.copilotKitMarkdownElement" },
+      { element: "h6", selector: "h6.copilotKitMarkdownElement" },
+      { element: "a", selector: "a.copilotKitMarkdownElement" },
+      { element: "pre", selector: "pre.copilotKitMarkdownElement" },
+      {
+        element: "blockquote",
+        selector: "blockquote.copilotKitMarkdownElement",
+      },
+      { element: "ul", selector: "ul.copilotKitMarkdownElement" },
+      { element: "li", selector: "li.copilotKitMarkdownElement" },
+    ];
+
+    for (const { element, selector } of elementSelectors) {
+      it(`should have ${element} component rendering <${element}> with copilotKitMarkdownElement class`, () => {
+        // Verify the component still uses the actual HTML element
+        // Some components use arrow syntax, others use function syntax
+        const arrowRegex = new RegExp(
+          `${element}:\\s*\\(\\{[^}]*\\}\\)\\s*=>\\s*\\(\\s*<${element}[\\s\\S]*?copilotKitMarkdownElement`,
+        );
+        const funcRegex = new RegExp(
+          `${element}\\([^)]*\\)\\s*\\{[\\s\\S]*?<${element}[\\s\\S]*?copilotKitMarkdownElement`,
+        );
+        const matches =
+          arrowRegex.test(tsxContent) || funcRegex.test(tsxContent);
+        expect(matches).toBe(true);
+      });
+
+      it(`should have CSS selector ${selector}`, () => {
+        expect(cssContent).toContain(selector);
+      });
+    }
+  });
+});

package/src/components/chat/Markdown.tsx

@@ -59,7 +59,6 @@ const defaultComponents: Components = {
 
     return (
       <CodeBlock
-        key={Math.random()}
         language={(match && match[1]) || ""}
         value={String(children).replace(/\n$/, "")}
         {...props}
@@ -97,9 +96,9 @@ const defaultComponents: Components = {
     </h6>
   ),
   p: ({ children, ...props }) => (
-    <p className="copilotKitMarkdownElement" {...props}>
+    <div className="copilotKitMarkdownElement copilotKitParagraph" {...props}>
       {children}
-    </p>
+    </div>
   ),
   pre: ({ children, ...props }) => (
     <pre className="copilotKitMarkdownElement" {...props}>

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

@@ -3,6 +3,7 @@ import { useChatContext } from "../ChatContext";
 import { Markdown } from "../Markdown";
 import { useState } from "react";
 import React from "react";
+import { copyToClipboard } from "@copilotkit/shared";
 
 export const AssistantMessage = (props: AssistantMessageProps) => {
   const { icons, labels } = useChatContext();
@@ -19,16 +20,14 @@ export const AssistantMessage = (props: AssistantMessageProps) => {
   } = props;
   const [copied, setCopied] = useState(false);
 
-  const handleCopy = () => {
+  const handleCopy = async () => {
     const content = message?.content || "";
-    if (content && onCopy) {
-      navigator.clipboard.writeText(content);
-      setCopied(true);
-      onCopy(content);
-      setTimeout(() => setCopied(false), 2000);
-    } else if (content) {
-      navigator.clipboard.writeText(content);
+    if (!content) return;
+
+    const success = await copyToClipboard(content);
+    if (success) {
       setCopied(true);
+      if (onCopy) onCopy(content);
       setTimeout(() => setCopied(false), 2000);
     }
   };

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

@@ -2,22 +2,21 @@ import { ErrorMessageProps } from "../props";
 import { useChatContext } from "../ChatContext";
 import { Markdown } from "../Markdown";
 import { useState } from "react";
+import { copyToClipboard } from "@copilotkit/shared";
 
 export const ErrorMessage = (props: ErrorMessageProps) => {
   const { icons, labels } = useChatContext();
   const { error, onRegenerate, onCopy, isCurrentMessage } = props;
   const [copied, setCopied] = useState(false);
 
-  const handleCopy = () => {
+  const handleCopy = async () => {
     const content = error.message;
-    if (content && onCopy) {
-      navigator.clipboard.writeText(content);
-      setCopied(true);
-      onCopy(content);
-      setTimeout(() => setCopied(false), 2000);
-    } else if (content) {
-      navigator.clipboard.writeText(content);
+    if (!content) return;
+
+    const success = await copyToClipboard(content);
+    if (success) {
       setCopied(true);
+      if (onCopy) onCopy(content);
       setTimeout(() => setCopied(false), 2000);
     }
   };

package/src/components/dev-console/console.tsx

@@ -20,7 +20,7 @@ import {
   ExclamationMarkTriangleIcon,
 } from "./icons";
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
-import { COPILOTKIT_VERSION } from "@copilotkit/shared";
+import { COPILOTKIT_VERSION, copyToClipboard } from "@copilotkit/shared";
 import { SmallSpinnerIcon } from "../chat/Icons";
 import { CopilotKitHelpModal } from "../help-modal";
 
@@ -170,11 +170,12 @@ function VersionInfo({
     `&& npm install @copilotkit/runtime@${latestVersion}`,
   ].join(" ");
 
-  const handleCopyClick = () => {
-    navigator.clipboard.writeText(installCommand.trim()).then(() => {
+  const handleCopyClick = async () => {
+    const success = await copyToClipboard(installCommand.trim());
+    if (success) {
       setCopyStatus("Command copied to clipboard!");
       setTimeout(() => setCopyStatus(""), 1000);
-    });
+    }
   };
 
   if (versionStatus === "update-available" || versionStatus === "outdated") {

package/src/css/colors.css

@@ -48,7 +48,7 @@ html.dark,
 body.dark,
 [data-theme="dark"],
 html[style*="color-scheme: dark"],
-body[style*="color-scheme: dark"] :root {
+body[style*="color-scheme: dark"] {
   /* Main brand/action color - used for buttons, interactive elements */
   --copilot-kit-primary-color: rgb(255, 255, 255);
   /* Color that contrasts with primary - used for text on primary elements */

package/src/css/console.css

@@ -83,22 +83,28 @@
   color: var(--copilot-kit-dev-console-text);
 }
 
-.dark,
-html.dark,
-body.dark,
-[data-theme="dark"],
-html[style*="color-scheme: dark"],
+.dark .copilotKitDevConsole .copilotKitDebugMenuTriggerButton,
+html.dark .copilotKitDevConsole .copilotKitDebugMenuTriggerButton,
+body.dark .copilotKitDevConsole .copilotKitDebugMenuTriggerButton,
+[data-theme="dark"] .copilotKitDevConsole .copilotKitDebugMenuTriggerButton,
+html[style*="color-scheme: dark"]
+  .copilotKitDevConsole
+  .copilotKitDebugMenuTriggerButton,
 body[style*="color-scheme: dark"]
   .copilotKitDevConsole
   .copilotKitDebugMenuTriggerButton {
   color: white;
 }
 
-.dark,
-html.dark,
-body.dark,
-[data-theme="dark"],
-html[style*="color-scheme: dark"],
+.dark .copilotKitDevConsole .copilotKitDebugMenuTriggerButton:hover,
+html.dark .copilotKitDevConsole .copilotKitDebugMenuTriggerButton:hover,
+body.dark .copilotKitDevConsole .copilotKitDebugMenuTriggerButton:hover,
+[data-theme="dark"]
+  .copilotKitDevConsole
+  .copilotKitDebugMenuTriggerButton:hover,
+html[style*="color-scheme: dark"]
+  .copilotKitDevConsole
+  .copilotKitDebugMenuTriggerButton:hover,
 body[style*="color-scheme: dark"]
   .copilotKitDevConsole
   .copilotKitDebugMenuTriggerButton:hover {

package/src/css/input.css

@@ -145,11 +145,11 @@
   margin: 0 !important;
 }
 
-.dark,
-html.dark,
-body.dark,
-[data-theme="dark"],
-html[style*="color-scheme: dark"],
+.dark .poweredBy,
+html.dark .poweredBy,
+body.dark .poweredBy,
+[data-theme="dark"] .poweredBy,
+html[style*="color-scheme: dark"] .poweredBy,
 body[style*="color-scheme: dark"] .poweredBy {
   color: rgb(69, 69, 69) !important;
 }

package/src/css/markdown.css

@@ -47,14 +47,14 @@ a.copilotKitMarkdownElement {
   text-decoration: underline;
 }
 
-p.copilotKitMarkdownElement {
+.copilotKitParagraph {
   padding: 0px;
   margin: 0px;
   line-height: 1.75;
   font-size: 1rem;
 }
 
-p.copilotKitMarkdownElement:not(:last-child),
+.copilotKitParagraph:not(:last-child),
 pre.copilotKitMarkdownElement:not(:last-child),
 ol.copilotKitMarkdownElement:not(:last-child),
 ul.copilotKitMarkdownElement:not(:last-child),
@@ -70,7 +70,7 @@ blockquote.copilotKitMarkdownElement {
   padding-left: 10px;
 }
 
-blockquote.copilotKitMarkdownElement p {
+blockquote.copilotKitMarkdownElement .copilotKitParagraph {
   padding: 0.7em 0;
 }