@copilotkit/react-ui 1.55.3 → 1.56.1

package/dist/index.mjs

@@ -4,7 +4,7 @@ import * as React$1 from "react";
 import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { defaultCopilotContextCategories, shouldShowDevConsole, useCopilotChatInternal, useCopilotChatSuggestions as useCopilotChatSuggestions$1, useCopilotContext, useCopilotMessagesContext } from "@copilotkit/react-core";
-import { COPILOTKIT_VERSION, CopilotKitError, CopilotKitErrorCode, ErrorVisibility, Severity, exceedsMaxSize, formatFileSize, formatFileSize as formatFileSize$1, generateVideoThumbnail, getDocumentIcon, getModalityFromMimeType, getSourceUrl, isMacOS, matchesAcceptFilter, randomUUID, readFileAsBase64, styledConsole } from "@copilotkit/shared";
+import { COPILOTKIT_VERSION, CopilotKitError, CopilotKitErrorCode, ErrorVisibility, Severity, copyToClipboard, exceedsMaxSize, formatFileSize, formatFileSize as formatFileSize$1, generateVideoThumbnail, getDocumentIcon, getModalityFromMimeType, getSourceUrl, isMacOS, matchesAcceptFilter, randomUUID, readFileAsBase64, styledConsole } from "@copilotkit/shared";
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
 import ReactMarkdown from "react-markdown";
 import { Light, Prism } from "react-syntax-highlighter";
@@ -761,10 +761,11 @@ function CopilotDevConsole() {
 		});
 	};
 	useEffect(() => {
+		if (!showDevConsole) return;
 		if (dontRunTwiceInDevMode.current === true) return;
 		dontRunTwiceInDevMode.current = true;
 		checkForUpdates();
-	}, []);
+	}, [showDevConsole]);
 	if (!showDevConsole) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		ref: consoleRef,
@@ -806,11 +807,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 copyToClipboard(installCommand.trim())) {
 			setCopyStatus("Command copied to clipboard!");
 			setTimeout(() => setCopyStatus(""), 1e3);
-		});
+		}
 	};
 	if (versionStatus === "update-available" || versionStatus === "outdated") return /* @__PURE__ */ jsxs("div", {
 		className: "copilotKitVersionInfo",
@@ -1306,7 +1307,7 @@ const defaultComponents = {
 			language: match && match[1] || "",
 			value: String(children).replace(/\n$/, ""),
 			...props
-		}, Math.random());
+		});
 	},
 	h1: ({ children, ...props }) => /* @__PURE__ */ jsx("h1", {
 		className: "copilotKitMarkdownElement",
@@ -1338,8 +1339,8 @@ const defaultComponents = {
 		...props,
 		children
 	}),
-	p: ({ children, ...props }) => /* @__PURE__ */ jsx("p", {
-		className: "copilotKitMarkdownElement",
+	p: ({ children, ...props }) => /* @__PURE__ */ jsx("div", {
+		className: "copilotKitMarkdownElement copilotKitParagraph",
 		...props,
 		children
 	}),
@@ -1364,8 +1365,8 @@ const defaultComponents = {
 		children
 	})
 };
-const MemoizedReactMarkdown = memo(ReactMarkdown, (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.components === nextProps.components);
-const Markdown = ({ content, components }) => {
+const MemoizedReactMarkdown = memo(ReactMarkdown, (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.components === nextProps.components && prevProps.urlTransform === nextProps.urlTransform);
+const Markdown = ({ content, components, urlTransform }) => {
 	return /* @__PURE__ */ jsx("div", {
 		className: "copilotKitMarkdown",
 		children: /* @__PURE__ */ jsx(MemoizedReactMarkdown, {
@@ -1375,6 +1376,7 @@ const Markdown = ({ content, components }) => {
 			}), [components]),
 			remarkPlugins: [remarkGfm, [remarkMath, { singleDollarTextMath: false }]],
 			rehypePlugins: [rehypeRaw],
+			...urlTransform !== void 0 ? { urlTransform } : {},
 			children: content
 		})
 	});
@@ -1386,16 +1388,12 @@ const AssistantMessage = (props) => {
 	const { icons, labels } = useChatContext();
 	const { message, isLoading, onRegenerate, onCopy, onThumbsUp, onThumbsDown, isCurrentMessage, feedback, markdownTagRenderers } = 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), 2e3);
-		} else if (content) {
-			navigator.clipboard.writeText(content);
+		if (!content) return;
+		if (await copyToClipboard(content)) {
 			setCopied(true);
+			if (onCopy) onCopy(content);
 			setTimeout(() => setCopied(false), 2e3);
 		}
 	};
@@ -1673,7 +1671,7 @@ const Messages = ({ inProgress, children, RenderMessage, AssistantMessage, UserM
 						markdownTagRenderers
 					}, index);
 				}),
-				messages[messages.length - 1]?.role === "user" && inProgress && /* @__PURE__ */ jsx(LoadingIcon, {}),
+				inProgress && (messages[messages.length - 1]?.role === "user" || messages[messages.length - 1]?.role === "tool") && /* @__PURE__ */ jsx(LoadingIcon, {}),
 				interrupt,
 				chatError && ErrorMessage && /* @__PURE__ */ jsx(ErrorMessage, {
 					error: chatError,
@@ -1812,13 +1810,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
@@ -1837,7 +1840,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] = useState("idle");
 	const mediaStreamRef = useRef(null);
 	const audioContextRef = useRef(null);
@@ -1855,15 +1858,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]);
 	useEffect(() => {
@@ -2938,5 +2942,5 @@ function useCopilotChatSuggestions(config, dependencies = []) {
 }
 
 //#endregion
-export { AssistantMessage, CopilotChat, CopilotDevConsole, CopilotPopup, CopilotSidebar, ImageRenderer, Markdown, Suggestion as RenderSuggestion, Suggestions as RenderSuggestionsList, UserMessage, shouldShowDevConsole, suppressDeprecationWarnings, useChatContext, useCopilotChatSuggestions };
+export { AssistantMessage, CopilotChat, CopilotDevConsole, CopilotModal, CopilotPopup, CopilotSidebar, ImageRenderer, Markdown, Suggestion as RenderSuggestion, Suggestions as RenderSuggestionsList, UserMessage, shouldShowDevConsole, suppressDeprecationWarnings, useChatContext, useCopilotChatSuggestions };
 //# sourceMappingURL=index.mjs.map