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

package/dist/index.cjs

@@ -793,10 +793,11 @@ function CopilotDevConsole() {
 		});
 	};
 	(0, react.useEffect)(() => {
+		if (!showDevConsole) return;
 		if (dontRunTwiceInDevMode.current === true) return;
 		dontRunTwiceInDevMode.current = true;
 		checkForUpdates();
-	}, []);
+	}, [showDevConsole]);
 	if (!showDevConsole) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref: consoleRef,
@@ -1396,17 +1397,25 @@ const defaultComponents = {
 		children
 	})
 };
-const MemoizedReactMarkdown = (0, react.memo)(react_markdown.default, (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.components === nextProps.components);
-const Markdown = ({ content, components }) => {
+const MemoizedReactMarkdown = (0, react.memo)(react_markdown.default);
+const Markdown = ({ content, components, remarkPlugins, rehypePlugins, ...rest }) => {
+	const mergedComponents = (0, react.useMemo)(() => ({
+		...defaultComponents,
+		...components
+	}), [components]);
+	const mergedRemarkPlugins = (0, react.useMemo)(() => [
+		remark_gfm.default,
+		[remark_math.default, { singleDollarTextMath: false }],
+		...remarkPlugins ?? []
+	], [remarkPlugins]);
+	const mergedRehypePlugins = (0, react.useMemo)(() => [rehype_raw.default, ...rehypePlugins ?? []], [rehypePlugins]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "copilotKitMarkdown",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedReactMarkdown, {
-			components: (0, react.useMemo)(() => ({
-				...defaultComponents,
-				...components
-			}), [components]),
-			remarkPlugins: [remark_gfm.default, [remark_math.default, { singleDollarTextMath: false }]],
-			rehypePlugins: [rehype_raw.default],
+			...rest,
+			components: mergedComponents,
+			remarkPlugins: mergedRemarkPlugins,
+			rehypePlugins: mergedRehypePlugins,
 			children: content
 		})
 	});
@@ -1701,7 +1710,7 @@ const Messages = ({ inProgress, children, RenderMessage, AssistantMessage, UserM
 						markdownTagRenderers
 					}, index);
 				}),
-				messages[messages.length - 1]?.role === "user" && inProgress && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadingIcon, {}),
+				inProgress && (messages[messages.length - 1]?.role === "user" || messages[messages.length - 1]?.role === "tool") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadingIcon, {}),
 				interrupt,
 				chatError && ErrorMessage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorMessage, {
 					error: chatError,
@@ -1840,13 +1849,18 @@ const startRecording = async (mediaStreamRef, mediaRecorderRef, audioContextRef,
 	};
 	mediaRecorderRef.current.onstop = onStop;
 };
-const stopRecording = (mediaRecorderRef) => {
+const stopRecording = (mediaRecorderRef, mediaStreamRef) => {
 	if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") mediaRecorderRef.current.stop();
+	if (mediaStreamRef?.current) {
+		mediaStreamRef.current.getTracks().forEach((track) => track.stop());
+		mediaStreamRef.current = null;
+	}
 };
-const transcribeAudio = async (recordedChunks, transcribeAudioUrl) => {
-	const completeBlob = new Blob(recordedChunks, { type: "audio/mp4" });
+const transcribeAudio = async (recordedChunks, transcribeAudioUrl, mediaType = "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",
 		body: formData
@@ -1865,7 +1879,7 @@ const playAudioResponse = (text, textToSpeechUrl, audioContext) => {
 		console.error("Error with decoding audio data", error);
 	});
 };
-const usePushToTalk = ({ sendFunction, inProgress }) => {
+const usePushToTalk = ({ sendFunction, inProgress, mediaType = "audio/mp4" }) => {
 	const [pushToTalkState, setPushToTalkState] = (0, react.useState)("idle");
 	const mediaStreamRef = (0, react.useRef)(null);
 	const audioContextRef = (0, react.useRef)(null);
@@ -1883,15 +1897,16 @@ const usePushToTalk = ({ sendFunction, inProgress }) => {
 			setPushToTalkState("transcribing");
 		});
 		else {
-			stopRecording(mediaRecorderRef);
-			if (pushToTalkState === "transcribing") transcribeAudio(recordedChunks.current, context.copilotApiConfig.transcribeAudioUrl).then(async (transcription) => {
+			stopRecording(mediaRecorderRef, mediaStreamRef);
+			if (pushToTalkState === "transcribing") transcribeAudio(recordedChunks.current, context.copilotApiConfig.transcribeAudioUrl, mediaType).then(async (transcription) => {
 				recordedChunks.current = [];
 				setPushToTalkState("idle");
-				setStartReadingFromMessageId((await sendFunction(transcription)).id);
+				const message = await sendFunction(transcription);
+				if (message) setStartReadingFromMessageId(message.id);
 			});
 		}
 		return () => {
-			stopRecording(mediaRecorderRef);
+			stopRecording(mediaRecorderRef, mediaStreamRef);
 		};
 	}, [pushToTalkState]);
 	(0, react.useEffect)(() => {
@@ -2969,6 +2984,7 @@ function useCopilotChatSuggestions(config, dependencies = []) {
 exports.AssistantMessage = AssistantMessage;
 exports.CopilotChat = CopilotChat;
 exports.CopilotDevConsole = CopilotDevConsole;
+exports.CopilotModal = CopilotModal;
 exports.CopilotPopup = CopilotPopup;
 exports.CopilotSidebar = CopilotSidebar;
 exports.ImageRenderer = ImageRenderer;