@copilotkit/react-core 1.74.0 → 1.75.0

package/dist/{copilotkit-C5FS3iDK.cjs → copilotkit-D2emzYuj.cjs}

@@ -1635,7 +1635,7 @@ function useRenderToolCall() {
 
 //#endregion
 //#region package.json
-var version = "1.74.0";
+var version = "1.75.0";
 
 //#endregion
 //#region src/v2/components/CopilotKitInspector.tsx
@@ -6364,7 +6364,7 @@ function BoundInspectorButton({ inspectorButton, messageId, openInspector, ...pr
 		})
 	});
 }
-function CopilotChatAssistantMessage({ message, messages, isRunning, onThumbsUp, onThumbsDown, onReadAloud, onRegenerate, additionalToolbarItems, toolbarVisible = true, markdownRenderer, toolbar, copyButton, inspectorButton, thumbsUpButton, thumbsDownButton, readAloudButton, regenerateButton, toolCallsView, children, className, ...props }) {
+function CopilotChatAssistantMessage({ message, messages, isRunning, isLatest, onThumbsUp, onThumbsDown, onReadAloud, onRegenerate, additionalToolbarItems, toolbarVisible = true, markdownRenderer, toolbar, copyButton, inspectorButton, thumbsUpButton, thumbsDownButton, readAloudButton, regenerateButton, toolCallsView, children, className, ...props }) {
 	useKatexStyles();
 	const { isInspectorEnabled, openInspector } = useCopilotKitInspector();
 	const shortcutsHidden = useInspectorShortcutsHidden();
@@ -6400,7 +6400,7 @@ function CopilotChatAssistantMessage({ message, messages, isRunning, onThumbsUp,
 		messages
 	});
 	const hasContent = !!(message.content && message.content.trim().length > 0);
-	const isLatestAssistantMessage = message.role === "assistant" && messages?.[messages.length - 1]?.id === message.id;
+	const isLatestAssistantMessage = message.role === "assistant" && (isLatest ?? messages?.[messages.length - 1]?.id === message.id);
 	const shouldShowToolbar = toolbarVisible && (hasContent || showInspectorShortcut) && !(isRunning && isLatestAssistantMessage);
 	if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-copilotkit": true,
@@ -6914,8 +6914,8 @@ function formatDuration(seconds) {
 	if (secs === 0) return `${mins} minute${mins > 1 ? "s" : ""}`;
 	return `${mins}m ${secs}s`;
 }
-function CopilotChatReasoningMessage({ message, messages, isRunning, header, contentView, toggle, children, className, ...props }) {
-	const isLatest = messages?.[messages.length - 1]?.id === message.id;
+function CopilotChatReasoningMessage({ message, messages, isRunning, isLatest: isLatestProp, header, contentView, toggle, children, className, ...props }) {
+	const isLatest = isLatestProp ?? messages?.[messages.length - 1]?.id === message.id;
 	const isStreaming = !!(isRunning && isLatest);
 	const hasContent = !!(message.content && message.content.length > 0);
 	const startTimeRef = (0, react.useRef)(null);
@@ -7310,24 +7310,31 @@ const INTELLIGENCE_TURN_HEAD = "__cpk_turn_head__";
 * emits exactly one `IntelligenceIndicator` per entry, keyed by the turn id and
 * positioned at the anchor; the per-turn key also lets every past turn keep its
 * own indicator in scroll-back.
+*
+* `visibleMessages` is what actually renders, when that differs from
+* `messages` (the chat's `transformMessages`). Turns are still read from the
+* full list, so hiding a user message does not merge its turn into the one
+* before it, and anchors are only chosen among visible messages. A message the
+* transform built itself joins the turn of the visible message before it.
 */
-function getIntelligenceTurnAnchors(messages) {
-	const anchors = /* @__PURE__ */ new Map();
+function getIntelligenceTurnAnchors(messages, visibleMessages = messages) {
+	const turnOfMessage = /* @__PURE__ */ new Map();
 	let turnId = INTELLIGENCE_TURN_HEAD;
-	let anchorId = null;
-	const commit = () => {
-		if (anchorId !== null) anchors.set(anchorId, turnId);
-		anchorId = null;
-	};
 	for (const m of messages) {
-		if (m.role === "user") {
-			commit();
-			turnId = m.id;
-			continue;
+		if (m.role === "user") turnId = m.id;
+		turnOfMessage.set(m.id, turnId);
+	}
+	const anchors = /* @__PURE__ */ new Map();
+	const anchoredTurns = /* @__PURE__ */ new Set();
+	let currentTurn = INTELLIGENCE_TURN_HEAD;
+	for (const m of visibleMessages) {
+		currentTurn = turnOfMessage.get(m.id) ?? currentTurn;
+		if (m.role === "user") continue;
+		if (!anchoredTurns.has(currentTurn) && messageHasMatchingToolCall(m)) {
+			anchors.set(m.id, currentTurn);
+			anchoredTurns.add(currentTurn);
 		}
-		if (anchorId === null && messageHasMatchingToolCall(m)) anchorId = m.id;
 	}
-	commit();
 	return anchors;
 }
 /**
@@ -7473,11 +7480,12 @@ function resolveSlotComponent(slot, DefaultComponent) {
 /**
 * Memoized wrapper for assistant messages to prevent re-renders when other messages change.
 */
-const MemoizedAssistantMessage = react.default.memo(function MemoizedAssistantMessage({ message, messages, isRunning, AssistantMessageComponent, slotProps }) {
+const MemoizedAssistantMessage = react.default.memo(function MemoizedAssistantMessage({ message, messages, isRunning, isLatest, AssistantMessageComponent, slotProps }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AssistantMessageComponent, {
 		message,
 		messages,
 		isRunning,
+		isLatest,
 		...slotProps
 	});
 }, (prevProps, nextProps) => {
@@ -7499,7 +7507,7 @@ const MemoizedAssistantMessage = react.default.memo(function MemoizedAssistantMe
 		if (prevToolResults.length !== nextToolResults.length) return false;
 		for (let i = 0; i < prevToolResults.length; i++) if (prevToolResults[i].content !== nextToolResults[i].content) return false;
 	}
-	if (nextProps.messages[nextProps.messages.length - 1]?.id === nextProps.message.id && prevProps.isRunning !== nextProps.isRunning) return false;
+	if ((prevProps.isRunning && prevProps.isLatest) !== (nextProps.isRunning && nextProps.isLatest)) return false;
 	if (prevProps.AssistantMessageComponent !== nextProps.AssistantMessageComponent) return false;
 	if (prevProps.slotProps !== nextProps.slotProps) return false;
 	return true;
@@ -7533,20 +7541,19 @@ const MemoizedActivityMessage = react.default.memo(function MemoizedActivityMess
 /**
 * Memoized wrapper for reasoning messages to prevent re-renders when other messages change.
 */
-const MemoizedReasoningMessage = react.default.memo(function MemoizedReasoningMessage({ message, messages, isRunning, ReasoningMessageComponent, slotProps }) {
+const MemoizedReasoningMessage = react.default.memo(function MemoizedReasoningMessage({ message, messages, isRunning, isLatest, ReasoningMessageComponent, slotProps }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReasoningMessageComponent, {
 		message,
 		messages,
 		isRunning,
+		isLatest,
 		...slotProps
 	});
 }, (prevProps, nextProps) => {
 	if (prevProps.message.id !== nextProps.message.id) return false;
 	if (prevProps.message.content !== nextProps.message.content) return false;
-	const prevIsLatest = prevProps.messages[prevProps.messages.length - 1]?.id === prevProps.message.id;
-	const nextIsLatest = nextProps.messages[nextProps.messages.length - 1]?.id === nextProps.message.id;
-	if (prevIsLatest !== nextIsLatest) return false;
-	if (nextIsLatest && prevProps.isRunning !== nextProps.isRunning) return false;
+	if (prevProps.isLatest !== nextProps.isLatest) return false;
+	if (nextProps.isLatest && prevProps.isRunning !== nextProps.isRunning) return false;
 	if (prevProps.ReasoningMessageComponent !== nextProps.ReasoningMessageComponent) return false;
 	if (prevProps.slotProps !== nextProps.slotProps) return false;
 	return true;
@@ -7630,7 +7637,7 @@ function deduplicateMessages(messages) {
 	return [...acc.values()];
 }
 const VIRTUALIZE_THRESHOLD = 50;
-function CopilotChatMessageView({ messages = [], assistantMessage, userMessage, reasoningMessage, cursor, intelligenceIndicator, isRunning = false, children, className, ...props }) {
+function CopilotChatMessageView({ messages = [], assistantMessage, userMessage, reasoningMessage, cursor, intelligenceIndicator, isRunning = false, transformMessages, children, className, ...props }) {
 	const isPinnedToBottom = (0, react.useContext)(ScrollPinnedContext);
 	const renderCustomMessage = useRenderCustomMessages();
 	const { renderActivityMessage } = useRenderActivityMessage();
@@ -7663,13 +7670,27 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 		return copilotkit.getStateByRun(config.agentId, config.threadId, resolvedRunId);
 	};
 	const deduplicatedMessages = (0, react.useMemo)(() => deduplicateMessages(messages), [messages]);
+	const renderedMessages = (0, react.useMemo)(() => transformMessages ? transformMessages(deduplicatedMessages) : deduplicatedMessages, [deduplicatedMessages, transformMessages]);
+	const latestRenderedId = renderedMessages[renderedMessages.length - 1]?.id;
+	const transformDuplicateId = (0, react.useMemo)(() => {
+		if (process.env.NODE_ENV === "production" || !transformMessages) return;
+		const seen = /* @__PURE__ */ new Set();
+		for (const message of renderedMessages) {
+			if (seen.has(message.id)) return message.id;
+			seen.add(message.id);
+		}
+	}, [renderedMessages, transformMessages]);
+	(0, react.useEffect)(() => {
+		if (transformDuplicateId === void 0) return;
+		console.warn(`[CopilotKit] CopilotChatMessageView: \`transformMessages\` returned more than one message with id "${transformDuplicateId}". Return each id at most once; a message you create needs its own id, stable across renders.`);
+	}, [transformDuplicateId]);
 	const rowKeyStoreRef = (0, react.useRef)(null);
 	rowKeyStoreRef.current ??= (0, _copilotkit_shared.createRowKeyStore)();
 	const rowKeyStore = rowKeyStoreRef.current;
-	const rowRenderKeys = (0, react.useMemo)(() => (0, _copilotkit_shared.resolveRowRenderKeysById)(rowKeyStore, deduplicatedMessages), [rowKeyStore, deduplicatedMessages]);
+	const rowRenderKeys = (0, react.useMemo)(() => (0, _copilotkit_shared.resolveRowRenderKeysById)(rowKeyStore, renderedMessages), [rowKeyStore, renderedMessages]);
 	(0, react.useLayoutEffect)(() => {
-		(0, _copilotkit_shared.commitRowKeyStore)(rowKeyStore, deduplicatedMessages);
-	}, [rowKeyStore, deduplicatedMessages]);
+		(0, _copilotkit_shared.commitRowKeyStore)(rowKeyStore, renderedMessages);
+	}, [rowKeyStore, renderedMessages]);
 	if (process.env.NODE_ENV === "development" && deduplicatedMessages.length < messages.length) console.warn(`CopilotChatMessageView: Merged ${messages.length - deduplicatedMessages.length} message(s) with duplicate IDs.`);
 	const { Component: AssistantComponent, slotProps: assistantSlotProps } = (0, react.useMemo)(() => resolveSlotComponent(assistantMessage, CopilotChatAssistantMessage_default), [assistantMessage]);
 	const agentId = config?.agentId;
@@ -7703,7 +7724,18 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 	(0, react.useEffect)(() => {
 		if (process.env.NODE_ENV !== "production" && scrollElementFromCtx && scrollElementFromCtx.clientHeight === 0) console.warn("[CopilotKit] Chat scroll container has clientHeight=0 — virtualization disabled. Ensure the chat is rendered in a visible container with a non-zero height.");
 	}, [scrollElementFromCtx]);
-	const shouldVirtualize = !!scrollElement && !children && deduplicatedMessages.length > VIRTUALIZE_THRESHOLD;
+	const shouldVirtualize = !!scrollElement && !children && renderedMessages.length > VIRTUALIZE_THRESHOLD;
+	const childrenDisabledVirtualization = !!children && !!scrollElement && renderedMessages.length > VIRTUALIZE_THRESHOLD;
+	const warnedChildrenRef = (0, react.useRef)(false);
+	(0, react.useEffect)(() => {
+		if (process.env.NODE_ENV === "production" || !childrenDisabledVirtualization || warnedChildrenRef.current) return;
+		warnedChildrenRef.current = true;
+		console.warn(`[CopilotKit] CopilotChatMessageView: the \`children\` render prop disables virtualization, so all ${renderedMessages.length} messages are mounted. ` + (transformMessages ? "`transformMessages` keeps virtualization on by itself; drop `children` to use it." : "To reshape the list and keep virtualization, use `transformMessages` instead."));
+	}, [
+		childrenDisabledVirtualization,
+		renderedMessages.length,
+		transformMessages
+	]);
 	const measuredRef = react.default.useRef({
 		total: 0,
 		sizes: /* @__PURE__ */ new Map()
@@ -7738,7 +7770,7 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 		return item.start < (instance.scrollOffset ?? 0) + scrollAdjustments;
 	}, []);
 	const virtualizer = (0, _tanstack_react_virtual.useVirtualizer)({
-		count: shouldVirtualize ? deduplicatedMessages.length : 0,
+		count: shouldVirtualize ? renderedMessages.length : 0,
 		getScrollElement: () => scrollElement,
 		estimateSize: estimateRowSize,
 		overscan: 5,
@@ -7751,10 +7783,10 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 	isPinnedToBottomRef.current = isPinnedToBottom;
 	virtualizer.shouldAdjustScrollPositionOnItemSizeChange = shouldAdjustScrollOnResize;
 	(0, react.useLayoutEffect)(() => {
-		if (!shouldVirtualize || !deduplicatedMessages.length) return;
-		virtualizer.scrollToIndex(deduplicatedMessages.length - 1, { align: "end" });
+		if (!shouldVirtualize || !renderedMessages.length) return;
+		virtualizer.scrollToIndex(renderedMessages.length - 1, { align: "end" });
 	}, [shouldVirtualize, firstMessageId]);
-	const intelligenceTurnAnchors = (0, react.useMemo)(() => getIntelligenceTurnAnchors(deduplicatedMessages), [deduplicatedMessages]);
+	const intelligenceTurnAnchors = (0, react.useMemo)(() => getIntelligenceTurnAnchors(deduplicatedMessages, renderedMessages), [deduplicatedMessages, renderedMessages]);
 	const renderMessageBlock = (message) => {
 		const elements = [];
 		const stateSnapshot = renderCustomMessage ? getStateSnapshotForMessage(message.id) : void 0;
@@ -7769,6 +7801,7 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 			message,
 			messages,
 			isRunning,
+			isLatest: message.id === latestRenderedId,
 			AssistantMessageComponent: AssistantComponent,
 			slotProps: assistantSlotPropsWithFeedback
 		}, rowKey));
@@ -7785,6 +7818,7 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 			message,
 			messages,
 			isRunning,
+			isLatest: message.id === latestRenderedId,
 			ReasoningMessageComponent: ReasoningComponent,
 			slotProps: reasoningSlotProps
 		}, rowKey));
@@ -7802,7 +7836,7 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 		}, `intelligence-${intelligenceTurnId}`));
 		return elements.filter(Boolean);
 	};
-	const messageElements = shouldVirtualize ? [] : deduplicatedMessages.flatMap(renderMessageBlock);
+	const messageElements = shouldVirtualize ? [] : renderedMessages.flatMap(renderMessageBlock);
 	if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		"data-copilotkit": true,
 		style: { display: "contents" },
@@ -7813,7 +7847,7 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 			interruptElement
 		})
 	});
-	const lastMessage = messages[messages.length - 1];
+	const lastMessage = renderedMessages[renderedMessages.length - 1];
 	const showCursor = isRunning && lastMessage?.role !== "reasoning";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-copilotkit": true,
@@ -7827,7 +7861,7 @@ function CopilotChatMessageView({ messages = [], assistantMessage, userMessage,
 					position: "relative"
 				},
 				children: virtualizer.getVirtualItems().map((virtualItem) => {
-					const message = deduplicatedMessages[virtualItem.index];
+					const message = renderedMessages[virtualItem.index];
 					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						"data-index": virtualItem.index,
 						ref: virtualizer.measureElement,
@@ -13081,4 +13115,4 @@ Object.defineProperty(exports, 'useToast', {
     return useToast;
   }
 });
-//# sourceMappingURL=copilotkit-C5FS3iDK.cjs.map
+//# sourceMappingURL=copilotkit-D2emzYuj.cjs.map