@copilotkit/react-ui 1.55.3 → 1.56.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@copilotkit/react-ui",
-  "version": "1.55.3",
+  "version": "1.56.1",
   "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.1",
+    "@copilotkit/runtime-client-gql": "1.56.1",
+    "@copilotkit/shared": "1.56.1"
   },
   "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}>
@@ -127,15 +126,21 @@ const MemoizedReactMarkdown: FC<Options> = memo(
   ReactMarkdown,
   (prevProps, nextProps) =>
     prevProps.children === nextProps.children &&
-    prevProps.components === nextProps.components,
+    prevProps.components === nextProps.components &&
+    prevProps.urlTransform === nextProps.urlTransform,
 );
 
 type MarkdownProps = {
   content: string;
   components?: Components;
+  urlTransform?: Options["urlTransform"];
 };
 
-export const Markdown = ({ content, components }: MarkdownProps) => {
+export const Markdown = ({
+  content,
+  components,
+  urlTransform,
+}: MarkdownProps) => {
   const mergedComponents = useMemo(
     () => ({ ...defaultComponents, ...components }),
     [components],
@@ -149,6 +154,7 @@ export const Markdown = ({ content, components }: MarkdownProps) => {
           [remarkMath, { singleDollarTextMath: false }],
         ]}
         rehypePlugins={[rehypeRaw]}
+        {...(urlTransform !== undefined ? { urlTransform } : {})}
       >
         {content}
       </MemoizedReactMarkdown>

package/src/components/chat/Messages.tsx

@@ -112,9 +112,9 @@ export const Messages = ({
             />
           );
         })}
-        {messages[messages.length - 1]?.role === "user" && inProgress && (
-          <LoadingIcon />
-        )}
+        {inProgress &&
+          (messages[messages.length - 1]?.role === "user" ||
+            messages[messages.length - 1]?.role === "tool") && <LoadingIcon />}
         {interrupt}
         {chatError && ErrorMessage && (
           <ErrorMessage error={chatError} isCurrentMessage />

package/src/components/chat/index.tsx

@@ -2,6 +2,8 @@ export * from "./props";
 export { CopilotPopup } from "./Popup";
 export { CopilotSidebar } from "./Sidebar";
 export { CopilotChat } from "./Chat";
+export { CopilotModal } from "./Modal";
+export type { CopilotModalProps } from "./Modal";
 export { Markdown } from "./Markdown";
 export { AssistantMessage } from "./messages/AssistantMessage";
 export { UserMessage } from "./messages/UserMessage";

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";
 
@@ -84,13 +84,16 @@ export function CopilotDevConsole() {
   };
 
   useEffect(() => {
+    if (!showDevConsole) {
+      return;
+    }
     if (dontRunTwiceInDevMode.current === true) {
       return;
     }
     dontRunTwiceInDevMode.current = true;
 
     checkForUpdates();
-  }, []);
+  }, [showDevConsole]);
 
   if (!showDevConsole) {
     return null;
@@ -170,11 +173,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;
 }
 

package/src/css/messages.css

@@ -21,7 +21,8 @@
   margin: 8px auto 0 auto;
   justify-content: flex-start;
   flex-direction: column;
-  width: 97%;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .copilotKitMessages::-webkit-scrollbar {

package/src/hooks/__tests__/use-push-to-talk.test.ts

@@ -0,0 +1,49 @@
+import { describe, it, expect, vi } from "vitest";
+
+/**
+ * Tests for the sendFunction handling in usePushToTalk.
+ *
+ * Issue #3011: sendFunction (wrapping sendMessage) returns Promise<void>,
+ * but the code did `const message = await sendFunction(transcription);`
+ * then `message.id` — causing a TypeError on undefined.
+ *
+ * Fix: Guard .id access with `if (message)` check, and update SendFunction
+ * type to accept `Promise<Message | void>`.
+ */
+
+describe("usePushToTalk sendFunction handling", () => {
+  it("should handle sendFunction returning void without crashing", async () => {
+    // Simulates what sendMessage actually returns: Promise<void>
+    const sendFunction = vi.fn().mockResolvedValue(undefined);
+    let startReadingFromMessageId: string | null = null;
+
+    const transcription = "Hello world";
+    const message = await sendFunction(transcription);
+
+    // Apply the same guard as the fix
+    if (message) {
+      startReadingFromMessageId = message.id;
+    }
+
+    // Should not have set the message id (because message is void)
+    expect(startReadingFromMessageId).toBeNull();
+    expect(sendFunction).toHaveBeenCalledWith(transcription);
+  });
+
+  it("should use message.id when sendFunction returns a message", async () => {
+    const sendFunction = vi.fn().mockResolvedValue({
+      id: "msg-123",
+      content: "test",
+      role: "user",
+    });
+    let startReadingFromMessageId: string | null = null;
+
+    const message = await sendFunction("Hello");
+
+    if (message) {
+      startReadingFromMessageId = message.id;
+    }
+
+    expect(startReadingFromMessageId).toBe("msg-123");
+  });
+});

package/src/hooks/use-push-to-talk.tsx

@@ -58,6 +58,7 @@ const startRecording = async (
 
 const stopRecording = (
   mediaRecorderRef: MutableRefObject<MediaRecorder | null>,
+  mediaStreamRef?: MutableRefObject<MediaStream | null>,
 ) => {
   if (
     mediaRecorderRef.current &&
@@ -65,15 +66,22 @@ const stopRecording = (
   ) {
     mediaRecorderRef.current.stop();
   }
+  // Release microphone tracks to free the device
+  if (mediaStreamRef?.current) {
+    mediaStreamRef.current.getTracks().forEach((track) => track.stop());
+    mediaStreamRef.current = null;
+  }
 };
 
 const transcribeAudio = async (
   recordedChunks: Blob[],
   transcribeAudioUrl: string,
+  mediaType: string = "audio/mp4",
 ) => {
-  const completeBlob = new Blob(recordedChunks, { type: "audio/mp4" });
+  const extension = mediaType.split("/")[1] || "mp4";
+  const completeBlob = new Blob(recordedChunks, { type: mediaType });
   const formData = new FormData();
-  formData.append("file", completeBlob, "recording.mp4");
+  formData.append("file", completeBlob, `recording.${extension}`);
 
   const response = await fetch(transcribeAudioUrl, {
     method: "POST",
@@ -112,14 +120,16 @@ const playAudioResponse = (
 
 export type PushToTalkState = "idle" | "recording" | "transcribing";
 
-export type SendFunction = (text: string) => Promise<Message>;
+export type SendFunction = (text: string) => Promise<Message | void>;
 
 export const usePushToTalk = ({
   sendFunction,
   inProgress,
+  mediaType = "audio/mp4",
 }: {
   sendFunction: SendFunction;
   inProgress: boolean;
+  mediaType?: string;
 }) => {
   const [pushToTalkState, setPushToTalkState] =
     useState<PushToTalkState>("idle");
@@ -146,22 +156,25 @@ export const usePushToTalk = ({
         },
       );
     } else {
-      stopRecording(mediaRecorderRef);
+      stopRecording(mediaRecorderRef, mediaStreamRef);
       if (pushToTalkState === "transcribing") {
         transcribeAudio(
           recordedChunks.current,
           context.copilotApiConfig.transcribeAudioUrl!,
+          mediaType,
         ).then(async (transcription) => {
           recordedChunks.current = [];
           setPushToTalkState("idle");
           const message = await sendFunction(transcription);
-          setStartReadingFromMessageId(message.id);
+          if (message) {
+            setStartReadingFromMessageId(message.id);
+          }
         });
       }
     }
 
     return () => {
-      stopRecording(mediaRecorderRef);
+      stopRecording(mediaRecorderRef, mediaStreamRef);
     };
   }, [pushToTalkState]);