@copilotkit/react-ui 1.56.0 → 1.56.2-canary.pin-to-send

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@copilotkit/react-ui",
-  "version": "1.56.0",
+  "version": "1.56.2-canary.pin-to-send",
   "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.56.0",
-    "@copilotkit/runtime-client-gql": "1.56.0",
-    "@copilotkit/shared": "1.56.0"
+    "@copilotkit/react-core": "1.56.2-canary.pin-to-send",
+    "@copilotkit/runtime-client-gql": "1.56.2-canary.pin-to-send",
+    "@copilotkit/shared": "1.56.2-canary.pin-to-send"
   },
   "devDependencies": {
     "@types/react": "^19.1.0",

package/src/components/chat/Markdown.tsx

@@ -122,32 +122,42 @@ const defaultComponents: Components = {
   ),
 };
 
-const MemoizedReactMarkdown: FC<Options> = memo(
-  ReactMarkdown,
-  (prevProps, nextProps) =>
-    prevProps.children === nextProps.children &&
-    prevProps.components === nextProps.components,
-);
+const MemoizedReactMarkdown: FC<Options> = memo(ReactMarkdown);
 
-type MarkdownProps = {
+type MarkdownProps = Omit<Options, "children"> & {
   content: string;
-  components?: Components;
 };
 
-export const Markdown = ({ content, components }: MarkdownProps) => {
+export const Markdown = ({
+  content,
+  components,
+  remarkPlugins,
+  rehypePlugins,
+  ...rest
+}: MarkdownProps) => {
   const mergedComponents = useMemo(
     () => ({ ...defaultComponents, ...components }),
     [components],
   );
+  const mergedRemarkPlugins = useMemo<Options["remarkPlugins"]>(
+    () => [
+      remarkGfm,
+      [remarkMath, { singleDollarTextMath: false }],
+      ...(remarkPlugins ?? []),
+    ],
+    [remarkPlugins],
+  );
+  const mergedRehypePlugins = useMemo<Options["rehypePlugins"]>(
+    () => [rehypeRaw, ...(rehypePlugins ?? [])],
+    [rehypePlugins],
+  );
   return (
     <div className="copilotKitMarkdown">
       <MemoizedReactMarkdown
+        {...rest}
         components={mergedComponents}
-        remarkPlugins={[
-          remarkGfm,
-          [remarkMath, { singleDollarTextMath: false }],
-        ]}
-        rehypePlugins={[rehypeRaw]}
+        remarkPlugins={mergedRemarkPlugins}
+        rehypePlugins={mergedRehypePlugins}
       >
         {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/dev-console/console.tsx

@@ -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;

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]);