@copilotkit/react-ui 1.55.3 → 1.56.1

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,
@@ -838,11 +839,11 @@ function VersionInfo({ showDevConsole, versionStatus, currentVersion, latestVers
 		`@copilotkit/react-textarea@${latestVersion}`,
 		`&& npm install @copilotkit/runtime@${latestVersion}`
 	].join(" ");
-	const handleCopyClick = () => {
-		navigator.clipboard.writeText(installCommand.trim()).then(() => {
+	const handleCopyClick = async () => {
+		if (await (0, _copilotkit_shared.copyToClipboard)(installCommand.trim())) {
 			setCopyStatus("Command copied to clipboard!");
 			setTimeout(() => setCopyStatus(""), 1e3);
-		});
+		}
 	};
 	if (versionStatus === "update-available" || versionStatus === "outdated") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "copilotKitVersionInfo",
@@ -1338,7 +1339,7 @@ const defaultComponents = {
 			language: match && match[1] || "",
 			value: String(children).replace(/\n$/, ""),
 			...props
-		}, Math.random());
+		});
 	},
 	h1: ({ children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h1", {
 		className: "copilotKitMarkdownElement",
@@ -1370,8 +1371,8 @@ const defaultComponents = {
 		...props,
 		children
 	}),
-	p: ({ children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-		className: "copilotKitMarkdownElement",
+	p: ({ children, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "copilotKitMarkdownElement copilotKitParagraph",
 		...props,
 		children
 	}),
@@ -1396,8 +1397,8 @@ 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, (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.components === nextProps.components && prevProps.urlTransform === nextProps.urlTransform);
+const Markdown = ({ content, components, urlTransform }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: "copilotKitMarkdown",
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MemoizedReactMarkdown, {
@@ -1407,6 +1408,7 @@ const Markdown = ({ content, components }) => {
 			}), [components]),
 			remarkPlugins: [remark_gfm.default, [remark_math.default, { singleDollarTextMath: false }]],
 			rehypePlugins: [rehype_raw.default],
+			...urlTransform !== void 0 ? { urlTransform } : {},
 			children: content
 		})
 	});
@@ -1418,16 +1420,12 @@ const AssistantMessage = (props) => {
 	const { icons, labels } = useChatContext();
 	const { message, isLoading, onRegenerate, onCopy, onThumbsUp, onThumbsDown, isCurrentMessage, feedback, markdownTagRenderers } = props;
 	const [copied, setCopied] = (0, react.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), 2e3);
-		} else if (content) {
-			navigator.clipboard.writeText(content);
+		if (!content) return;
+		if (await (0, _copilotkit_shared.copyToClipboard)(content)) {
 			setCopied(true);
+			if (onCopy) onCopy(content);
 			setTimeout(() => setCopied(false), 2e3);
 		}
 	};
@@ -1705,7 +1703,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,
@@ -1844,13 +1842,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
@@ -1869,7 +1872,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);
@@ -1887,15 +1890,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)(() => {
@@ -2973,6 +2977,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;