@copilotkit/react-ui 1.55.3-canary.1776243725 → 1.55.3-canary.1776979102

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@copilotkit/react-ui",
-  "version": "1.55.3-canary.1776243725",
+  "version": "1.55.3-canary.1776979102",
   "private": false,
   "keywords": [
     "ai",
@@ -48,9 +48,9 @@
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
-    "@copilotkit/react-core": "1.55.3-canary.1776243725",
-    "@copilotkit/runtime-client-gql": "1.55.3-canary.1776243725",
-    "@copilotkit/shared": "1.55.3-canary.1776243725"
+    "@copilotkit/react-core": "1.55.3-canary.1776979102",
+    "@copilotkit/shared": "1.55.3-canary.1776979102",
+    "@copilotkit/runtime-client-gql": "1.55.3-canary.1776979102"
   },
   "devDependencies": {
     "@types/react": "^19.1.0",
@@ -62,8 +62,8 @@
     "tsdown": "^0.20.3",
     "typescript": "^5.2.3",
     "vitest": "^3.2.4",
-    "tailwind-config": "1.4.12",
-    "tsconfig": "1.4.12"
+    "tsconfig": "1.4.12",
+    "tailwind-config": "1.4.12"
   },
   "peerDependencies": {
     "react": "^18 || ^19 || ^19.0.0-rc"

package/src/components/chat/Markdown.tsx

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

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

@@ -3,7 +3,6 @@ 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();
@@ -20,14 +19,16 @@ export const AssistantMessage = (props: AssistantMessageProps) => {
   } = props;
   const [copied, setCopied] = useState(false);
 
-  const handleCopy = async () => {
+  const handleCopy = () => {
     const content = message?.content || "";
-    if (!content) return;
-
-    const success = await copyToClipboard(content);
-    if (success) {
+    if (content && onCopy) {
+      navigator.clipboard.writeText(content);
+      setCopied(true);
+      onCopy(content);
+      setTimeout(() => setCopied(false), 2000);
+    } else if (content) {
+      navigator.clipboard.writeText(content);
       setCopied(true);
-      if (onCopy) onCopy(content);
       setTimeout(() => setCopied(false), 2000);
     }
   };

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

@@ -2,21 +2,22 @@ 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 = async () => {
+  const handleCopy = () => {
     const content = error.message;
-    if (!content) return;
-
-    const success = await copyToClipboard(content);
-    if (success) {
+    if (content && onCopy) {
+      navigator.clipboard.writeText(content);
+      setCopied(true);
+      onCopy(content);
+      setTimeout(() => setCopied(false), 2000);
+    } else if (content) {
+      navigator.clipboard.writeText(content);
       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, copyToClipboard } from "@copilotkit/shared";
+import { COPILOTKIT_VERSION } from "@copilotkit/shared";
 import { SmallSpinnerIcon } from "../chat/Icons";
 import { CopilotKitHelpModal } from "../help-modal";
 
@@ -170,12 +170,11 @@ function VersionInfo({
     `&& npm install @copilotkit/runtime@${latestVersion}`,
   ].join(" ");
 
-  const handleCopyClick = async () => {
-    const success = await copyToClipboard(installCommand.trim());
-    if (success) {
+  const handleCopyClick = () => {
+    navigator.clipboard.writeText(installCommand.trim()).then(() => {
       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"] {
+body[style*="color-scheme: dark"] :root {
   /* 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,28 +83,22 @@
   color: var(--copilot-kit-dev-console-text);
 }
 
-.dark .copilotKitDevConsole .copilotKitDebugMenuTriggerButton,
-html.dark .copilotKitDevConsole .copilotKitDebugMenuTriggerButton,
-body.dark .copilotKitDevConsole .copilotKitDebugMenuTriggerButton,
-[data-theme="dark"] .copilotKitDevConsole .copilotKitDebugMenuTriggerButton,
-html[style*="color-scheme: dark"]
-  .copilotKitDevConsole
-  .copilotKitDebugMenuTriggerButton,
+.dark,
+html.dark,
+body.dark,
+[data-theme="dark"],
+html[style*="color-scheme: dark"],
 body[style*="color-scheme: dark"]
   .copilotKitDevConsole
   .copilotKitDebugMenuTriggerButton {
   color: white;
 }
 
-.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,
+.dark,
+html.dark,
+body.dark,
+[data-theme="dark"],
+html[style*="color-scheme: dark"],
 body[style*="color-scheme: dark"]
   .copilotKitDevConsole
   .copilotKitDebugMenuTriggerButton:hover {

package/src/css/input.css

@@ -145,11 +145,11 @@
   margin: 0 !important;
 }
 
-.dark .poweredBy,
-html.dark .poweredBy,
-body.dark .poweredBy,
-[data-theme="dark"] .poweredBy,
-html[style*="color-scheme: dark"] .poweredBy,
+.dark,
+html.dark,
+body.dark,
+[data-theme="dark"],
+html[style*="color-scheme: dark"],
 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;
 }
 
-.copilotKitParagraph {
+p.copilotKitMarkdownElement {
   padding: 0px;
   margin: 0px;
   line-height: 1.75;
   font-size: 1rem;
 }
 
-.copilotKitParagraph:not(:last-child),
+p.copilotKitMarkdownElement: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 .copilotKitParagraph {
+blockquote.copilotKitMarkdownElement p {
   padding: 0.7em 0;
 }
 

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

@@ -1,101 +0,0 @@
-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);
-      });
-    }
-  });
-});