@vegintech/langchain-react-agent 0.0.41 → 0.0.43

package/dist/index.d.mts

@@ -318,8 +318,8 @@ interface MessageContentRendererProps {
   components?: Components;
   securityConfig?: MessageListProps["securityConfig"];
 }
-/** 消息内容渲染组件 - 支持字符串和多模态内容块 */
-declare const MessageContentRenderer: React$1.FC<MessageContentRendererProps>;
+/** memo 化：content/components/securityConfig 未变化时跳过重渲染 */
+declare const MessageContentRenderer: React$1.NamedExoticComponent<MessageContentRendererProps>;
 //#endregion
 //#region src/components/DebugPanel.d.ts
 interface DebugPanelProps {
@@ -351,4 +351,4 @@ type AgentStream = ReturnType<typeof useStream>;
  */
 declare function useAgentStream(options: AgentStreamOptions): AgentStream;
 //#endregion
-export { AgentChat, type AgentChatInputRef, type AgentChatProps, type AgentChatRef, type AgentChatStreamProps, type AgentStream, type AgentStreamOptions, type BackendTool, type ChatMessage, type ContextItem, DebugPanel, type DebugPanelProps, type EmptyStateConfig, type FrontendTool, type InputConfig, type InterruptConfig, type InterruptEvent, type InterruptManagerProps, type InterruptRenderProps, type MessageConfig, type MessageContent, type MessageContentBlock, MessageContentRenderer, type MessageContentRendererProps, type MessageType, type SenderCustomizationProps, type SenderSlotConfig, type SenderSubmitParams, type ToolCallInput, ToolCard, type ToolCardProps, type ToolDefinition, type ToolExecutionRecord, type ToolExecutionStatus, type ToolParameterSchema, type ToolRenderProps, useAgentStream };
+export { AgentChat, type AgentChatInputRef, type AgentChatProps, type AgentChatRef, type AgentChatStreamProps, type AgentStream, type AgentStreamOptions, type BackendTool, type ChatMessage, type ContextItem, DebugPanel, type DebugPanelProps, type EmptyStateConfig, type FrontendTool, type InputConfig, type InterruptConfig, type InterruptEvent, type InterruptManagerProps, type InterruptRenderProps, type MessageConfig, type MessageContent, type MessageContentBlock, MessageContentRenderer, type MessageContentRendererProps, type MessageType, type PreSendResult, type SenderCustomizationProps, type SenderSlotConfig, type SenderSubmitParams, type ToolCallInput, ToolCard, type ToolCardProps, type ToolDefinition, type ToolExecutionRecord, type ToolExecutionStatus, type ToolParameterSchema, type ToolRenderProps, useAgentStream };

package/dist/index.mjs

@@ -1,11 +1,11 @@
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { Actions, Bubble, Sender, Think, ThoughtChain } from "@ant-design/x";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Streamdown } from "streamdown";
 import { useStream } from "@langchain/langgraph-sdk/react";
 //#region src/components/ChatInput.tsx
 const slotConfig = [];
-const ChatInput = forwardRef(({ onSend, onStop, isLoading = false, disabled = false, placeholder = "输入消息...", className = "", onPasteFile, footer, skill: externalSkill, header, prefix }, ref) => {
+const ChatInputInner = forwardRef(({ onSend, onStop, isLoading = false, disabled = false, placeholder = "输入消息...", className = "", onPasteFile, footer, skill: externalSkill, header, prefix }, ref) => {
 	const senderRef = useRef(null);
 	const [internalSkill, setInternalSkill] = useState(externalSkill);
 	useImperativeHandle(ref, () => ({
@@ -16,6 +16,7 @@ const ChatInput = forwardRef(({ onSend, onStop, isLoading = false, disabled = fa
 	}));
 	const handleSubmit = useCallback((message, slotConfig, skillData) => {
 		if (message.trim() && !disabled && !isLoading) {
+			console.log("handle submit", slotConfig);
 			onSend({
 				message,
 				slotConfig,
@@ -50,7 +51,9 @@ const ChatInput = forwardRef(({ onSend, onStop, isLoading = false, disabled = fa
 		})
 	});
 });
-ChatInput.displayName = "ChatInput";
+ChatInputInner.displayName = "ChatInput";
+/** 输入框组件：memo 化，避免父组件每次渲染时重建 Sender 内部状态 */
+const ChatInput = memo(ChatInputInner);
 //#endregion
 //#region src/components/ToolCallRenderer.tsx
 /**
@@ -62,9 +65,10 @@ ChatInput.displayName = "ChatInput";
 * 3. 默认渲染：简单的工具卡片样式
 */
 const ToolCallRenderer = ({ tool, record, isLoading }) => {
-	if (tool?.render) return /* @__PURE__ */ jsx("div", {
+	const customRender = tool?.render;
+	if (customRender) return /* @__PURE__ */ jsx("div", {
 		className: "tool-call-wrapper",
-		children: tool.render({
+		children: /* @__PURE__ */ jsx(customRender, {
 			name: record.name,
 			args: record.args,
 			result: record.result,
@@ -119,25 +123,25 @@ function isFrontendTool(tool) {
 //#endregion
 //#region src/components/ReasoningContent.tsx
 const REASONING_CONTENT_MAX_HEIGHT = 58;
-const ReasoningContent = ({ content }) => {
+const ReasoningContent = memo(function ReasoningContent({ content }) {
 	const [isExpanded, setIsExpanded] = useState(false);
 	const containerRef = useRef(null);
 	const [isOverflowing, setIsOverflowing] = useState(false);
+	const checkOverflow = useCallback(() => {
+		const node = containerRef.current;
+		if (!node) return;
+		setIsOverflowing(node.scrollHeight > REASONING_CONTENT_MAX_HEIGHT);
+	}, []);
 	useEffect(() => {
-		const checkOverflow = () => {
-			if (containerRef.current) {
-				const originalMaxHeight = containerRef.current.style.maxHeight;
-				containerRef.current.style.maxHeight = "none";
-				const height = containerRef.current.scrollHeight;
-				containerRef.current.style.maxHeight = originalMaxHeight;
-				setIsOverflowing(height > REASONING_CONTENT_MAX_HEIGHT);
-			}
-		};
 		checkOverflow();
+	}, [content, checkOverflow]);
+	useEffect(() => {
+		const node = containerRef.current;
+		if (!node) return;
 		const resizeObserver = new ResizeObserver(checkOverflow);
-		if (containerRef.current) resizeObserver.observe(containerRef.current);
+		resizeObserver.observe(node);
 		return () => resizeObserver.disconnect();
-	}, [content]);
+	}, [checkOverflow]);
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 		ref: containerRef,
 		style: {
@@ -164,49 +168,46 @@ const ReasoningContent = ({ content }) => {
 		}],
 		onClick: () => setIsExpanded(true)
 	})] });
-};
+});
+ReasoningContent.displayName = "ReasoningContent";
 //#endregion
 //#region src/components/MessageContentRenderer.tsx
 const CustomParagraph = (props) => {
 	const { node: _node, ...rest } = props;
 	return /* @__PURE__ */ jsx("span", { ...rest });
 };
-/** 渲染单个内容块 */
-const ContentBlock = ({ block, index, components, securityConfig }) => {
-	if (block.type === "text" && "text" in block) return /* @__PURE__ */ jsx(Streamdown, {
-		components: {
-			p: CustomParagraph,
-			...components
-		},
-		allowedTags: securityConfig?.allowedTags,
-		literalTagContent: securityConfig?.literalTagContent,
-		controls: {
-			table: {
-				copy: false,
-				download: false,
-				fullscreen: false
-			},
-			code: {
-				copy: false,
-				download: false
-			}
-		},
-		children: String(block.text)
-	}, index);
-	if (block.type === "image_url" && "image_url" in block) {
-		const imageUrl = block.image_url.url;
-		const [imageSize, setImageSize] = React.useState(null);
-		React.useEffect(() => {
-			const img = new Image();
-			img.onload = () => {
-				setImageSize({
-					width: img.naturalWidth,
-					height: img.naturalHeight
-				});
-			};
-			img.src = imageUrl;
-		}, [imageUrl]);
-		const getImageStyle = () => {
+const STREAMDOWN_CONTROLS = {
+	table: {
+		copy: false,
+		download: false,
+		fullscreen: false
+	},
+	code: {
+		copy: false,
+		download: false
+	}
+};
+/**
+* 图片内容块
+*
+* 独立组件承载图片加载状态（修复在条件分支中调用 hooks 的问题）
+*/
+const ImageBlock = memo(function ImageBlock({ imageUrl }) {
+	const [imageSize, setImageSize] = React.useState(null);
+	React.useEffect(() => {
+		const img = new Image();
+		img.onload = () => {
+			setImageSize({
+				width: img.naturalWidth,
+				height: img.naturalHeight
+			});
+		};
+		img.src = imageUrl;
+	}, [imageUrl]);
+	return /* @__PURE__ */ jsx("img", {
+		src: imageUrl,
+		alt: "Message content",
+		style: useMemo(() => {
 			const baseStyle = {
 				borderRadius: "8px",
 				marginTop: "8px",
@@ -223,50 +224,55 @@ const ContentBlock = ({ block, index, components, securityConfig }) => {
 				width: "auto",
 				height: "auto"
 			};
-			else return {
+			return {
 				...baseStyle,
 				maxWidth: "100%",
 				width: "auto",
 				height: "auto"
 			};
-		};
-		return /* @__PURE__ */ jsx("img", {
-			src: imageUrl,
-			alt: "Message content",
-			style: getImageStyle()
-		}, index);
+		}, [imageSize])
+	});
+});
+/** 渲染单个内容块（memo 化，内容未变化时跳过重渲染） */
+const ContentBlock = memo(function ContentBlock({ block, components, securityConfig }) {
+	const mergedComponents = useMemo(() => ({
+		p: CustomParagraph,
+		...components
+	}), [components]);
+	if (block.type === "text" && "text" in block) return /* @__PURE__ */ jsx(Streamdown, {
+		components: mergedComponents,
+		allowedTags: securityConfig?.allowedTags,
+		literalTagContent: securityConfig?.literalTagContent,
+		controls: STREAMDOWN_CONTROLS,
+		children: String(block.text)
+	});
+	if (block.type === "image_url" && "image_url" in block) {
+		const imageUrl = block.image_url.url;
+		return /* @__PURE__ */ jsx(ImageBlock, { imageUrl });
 	}
 	return null;
-};
+});
 /** 消息内容渲染组件 - 支持字符串和多模态内容块 */
-const MessageContentRenderer = ({ content, components, securityConfig }) => {
+const MessageContentRendererInner = ({ content, components, securityConfig }) => {
+	const mergedComponents = useMemo(() => ({
+		p: CustomParagraph,
+		...components
+	}), [components]);
 	if (typeof content === "string") return /* @__PURE__ */ jsx(Streamdown, {
-		components: {
-			p: CustomParagraph,
-			...components
-		},
+		components: mergedComponents,
 		allowedTags: securityConfig?.allowedTags,
 		literalTagContent: securityConfig?.literalTagContent,
-		controls: {
-			table: {
-				copy: false,
-				download: false,
-				fullscreen: false
-			},
-			code: {
-				copy: false,
-				download: false
-			}
-		},
+		controls: STREAMDOWN_CONTROLS,
 		children: content
 	});
 	return /* @__PURE__ */ jsx(Fragment, { children: content.map((block, index) => /* @__PURE__ */ jsx(ContentBlock, {
 		block,
-		index,
 		components,
 		securityConfig
 	}, index)) });
 };
+/** memo 化：content/components/securityConfig 未变化时跳过重渲染 */
+const MessageContentRenderer = memo(MessageContentRendererInner);
 //#endregion
 //#region src/components/WaveLoading.tsx
 /**
@@ -308,6 +314,32 @@ const WaveLoading = ({ color = "#1890ff" }) => {
 };
 //#endregion
 //#region src/components/MessageList.tsx
+/** 浅比较依赖数组（用于判断渲染结果是否可以复用） */
+const depsEqual = (a, b) => {
+	if (a.length !== b.length) return false;
+	for (let i = 0; i < a.length; i++) if (!Object.is(a[i], b[i])) return false;
+	return true;
+};
+/**
+* 依赖不变时复用缓存值
+*
+* 保证 React 元素/渲染项的引用稳定，让 React 的 bailout 与 antd Bubble 的 memo 生效，
+* 流式更新时只重建真正变化的消息
+*/
+const getCachedValue = (cache, key, deps, build) => {
+	const cached = cache.get(key);
+	if (cached && depsEqual(cached.deps, deps)) return cached.value;
+	const value = build();
+	cache.set(key, {
+		deps,
+		value
+	});
+	return value;
+};
+/** 清理已不存在的缓存项（如切换会话后） */
+const sweepCache = (cache, aliveKeys) => {
+	for (const key of cache.keys()) if (!aliveKeys.has(key)) cache.delete(key);
+};
 const renderMessageContent = (message, isLastMessage, isLoading, tools, toolExecutions, components, securityConfig) => {
 	const hasToolCalls = message.toolCalls && message.toolCalls.length > 0;
 	const isContentEmpty = !message.content || (typeof message.content === "string" ? message.content === "" : message.content.length === 0);
@@ -342,14 +374,6 @@ const renderMessageContent = (message, isLastMessage, isLoading, tools, toolExec
 		]
 	}, message.id);
 };
-const toBubbleItem = (message, isLastMessage, isLoading, tools, toolExecutions, components, securityConfig) => {
-	return {
-		key: message.id,
-		role: message.type === "human" ? "user" : "ai",
-		content: renderMessageContent(message, isLastMessage, isLoading, tools, toolExecutions, components, securityConfig),
-		placement: message.type === "human" ? "end" : "start"
-	};
-};
 const renderToolCalls = (toolCalls, tools, toolExecutions, isLoading) => {
 	return toolCalls.map((call) => {
 		const tool = findTool(tools, call.name);
@@ -395,18 +419,32 @@ const roleConfig = {
 };
 const MessageList = ({ messages, isLoading = false, className = "", tools, toolExecutions, components, securityConfig, loadingColor, interruptRender }) => {
 	const reasoningCacheRef = useRef(/* @__PURE__ */ new Map());
+	const fixedMessageCacheRef = useRef(/* @__PURE__ */ new Map());
+	const messageElementCacheRef = useRef(/* @__PURE__ */ new Map());
+	const bubbleItemCacheRef = useRef(/* @__PURE__ */ new Map());
 	const processedMessages = useMemo(() => {
 		const cache = reasoningCacheRef.current;
+		const fixedCache = fixedMessageCacheRef.current;
 		return messages.map((message) => {
-			if (message.type === "ai" && message.reasoningContent) cache.set(message.id, message.reasoningContent);
-			if (message.type === "ai" && !message.reasoningContent) {
-				const cachedReasoning = cache.get(message.id);
-				if (cachedReasoning) return {
-					...message,
-					reasoningContent: cachedReasoning
-				};
+			if (message.type !== "ai") return message;
+			if (message.reasoningContent) {
+				cache.set(message.id, message.reasoningContent);
+				return message;
 			}
-			return message;
+			const cachedReasoning = cache.get(message.id);
+			if (!cachedReasoning) return message;
+			const existing = fixedCache.get(message.id);
+			if (existing && existing.raw === message && existing.reasoning === cachedReasoning) return existing.fixed;
+			const fixed = {
+				...message,
+				reasoningContent: cachedReasoning
+			};
+			fixedCache.set(message.id, {
+				raw: message,
+				reasoning: cachedReasoning,
+				fixed
+			});
+			return fixed;
 		});
 	}, [messages]);
 	const groupedItems = useMemo(() => {
@@ -421,28 +459,48 @@ const MessageList = ({ messages, isLoading = false, className = "", tools, toolE
 		}
 		return groups;
 	}, [processedMessages]);
+	const getMessageElement = (message, isLastMessage) => {
+		const hasToolCalls = !!(message.toolCalls && message.toolCalls.length > 0);
+		const deps = [
+			message,
+			isLastMessage,
+			components,
+			securityConfig
+		];
+		if (isLastMessage || hasToolCalls) deps.push(isLoading);
+		if (hasToolCalls) {
+			deps.push(tools);
+			for (const call of message.toolCalls) {
+				const execution = toolExecutions.get(call.id);
+				deps.push(call.id, execution?.status, execution?.result, execution?.error);
+			}
+		}
+		return getCachedValue(messageElementCacheRef.current, message.id, deps, () => renderMessageContent(message, isLastMessage, isLoading, tools, toolExecutions, components, securityConfig));
+	};
 	const items = groupedItems.map((group, groupIndex) => {
 		const isLastGroup = groupIndex === groupedItems.length - 1;
 		const isLastAiGroup = isLastGroup && group.type === "ai";
-		if (group.type === "user" || group.messages.length === 1) {
-			const message = group.messages[0];
-			const bubbleItem = toBubbleItem(message, isLastGroup && group.messages.length === 1, isLoading, tools, toolExecutions, components, securityConfig);
-			if (isLastAiGroup && interruptRender) return {
-				...bubbleItem,
-				content: /* @__PURE__ */ jsxs(Fragment, { children: [bubbleItem.content, interruptRender()] })
+		const cacheKey = group.messages[0].id;
+		const elements = group.messages.map((message, msgIndex) => getMessageElement(message, isLastGroup && msgIndex === group.messages.length - 1));
+		const includeInterrupt = !!(isLastAiGroup && interruptRender);
+		const deps = [
+			isLastGroup,
+			isLastAiGroup,
+			...elements
+		];
+		if (includeInterrupt) deps.push(interruptRender);
+		return getCachedValue(bubbleItemCacheRef.current, cacheKey, deps, () => {
+			const content = includeInterrupt ? /* @__PURE__ */ jsxs(Fragment, { children: [elements, interruptRender?.()] }) : elements.length === 1 ? elements[0] : /* @__PURE__ */ jsx(Fragment, { children: elements });
+			return {
+				key: cacheKey,
+				role: group.type === "user" ? "user" : "ai",
+				content,
+				placement: group.type === "user" ? "end" : "start"
 			};
-			return bubbleItem;
-		}
-		const mergedContent = /* @__PURE__ */ jsxs(Fragment, { children: [group.messages.map((message, msgIndex) => {
-			return renderMessageContent(message, isLastGroup && msgIndex === group.messages.length - 1, isLoading, tools, toolExecutions, components, securityConfig);
-		}), isLastAiGroup && interruptRender?.()] });
-		return {
-			key: group.messages.map((m) => m.id).join("-"),
-			role: "ai",
-			content: mergedContent,
-			placement: "start"
-		};
+		});
 	});
+	if (messageElementCacheRef.current.size > processedMessages.length) sweepCache(messageElementCacheRef.current, new Set(processedMessages.map((m) => m.id)));
+	if (bubbleItemCacheRef.current.size > groupedItems.length) sweepCache(bubbleItemCacheRef.current, new Set(groupedItems.map((group) => group.messages[0].id)));
 	const hasVisibleContent = (msg) => {
 		if (!msg) return false;
 		const hasContent = msg.content && (typeof msg.content === "string" ? msg.content !== "" : msg.content.length > 0);
@@ -577,9 +635,13 @@ function useToolExecution({ tools, toolCalls, isLoading = false, onExecutionChan
 	const batchSubmittedRef = useRef(false);
 	const cancelledCallIdsRef = useRef(/* @__PURE__ */ new Set());
 	const cancelledExecutionsRef = useRef(/* @__PURE__ */ new Set());
+	const toolCallsRef = useRef(toolCalls);
+	useEffect(() => {
+		toolCallsRef.current = toolCalls;
+	}, [toolCalls]);
 	useEffect(() => {
 		if (!completedToolResults || completedToolResults.size === 0) return;
-		completedToolResults.forEach(({ result, status }, callId) => {
+		completedToolResults.forEach(({ result }, callId) => {
 			if (notifiedCompletedRef.current.has(callId)) return;
 			if (cancelledExecutionsRef.current.has(callId)) {
 				notifiedCompletedRef.current.add(callId);
@@ -733,7 +795,7 @@ function useToolExecution({ tools, toolCalls, isLoading = false, onExecutionChan
 				cancelledExecutionsRef.current.add(callId);
 				batchCallIdsRef.current.delete(callId);
 			}
-			const call = toolCalls.find((c) => c.id === callId);
+			const call = toolCallsRef.current.find((c) => c.id === callId);
 			if (call) onExecutionChange?.({
 				callId,
 				name: call.name,
@@ -741,7 +803,7 @@ function useToolExecution({ tools, toolCalls, isLoading = false, onExecutionChan
 				status: "cancelled"
 			});
 		}
-	}, [toolCalls, onExecutionChange]);
+	}, [onExecutionChange]);
 	useEffect(() => {
 		processToolCalls();
 	}, [useMemo(() => {
@@ -826,37 +888,72 @@ function toChatMessage(message, toolResults) {
 	};
 }
 /**
-* 预处理消息列表：建立 tool_call_id -> { result, status } 映射，并过滤 ToolMessage
+* 创建增量消息处理器
+*
+* 与每次全量重建不同，处理器按消息对象引用做缓存：
+* - 未变化的原始消息会复用同一个 ChatMessage 引用（流式场景下大部分消息不变，下游 memo 才能生效）
+* - ToolMessage 的 JSON 解析结果逐条缓存，避免每个流式分片重复解析
+* - 工具结果集合未变化时返回同一个 Map 引用
 */
-function processMessages(rawMessages) {
-	const toolResults = /* @__PURE__ */ new Map();
-	for (const message of rawMessages) if (message.type === "tool") {
-		const toolCallId = message.tool_call_id || message.additional_kwargs?.tool_call_id;
-		if (toolCallId) {
-			const textContent = extractTextFromContent(extractContent(message));
-			const status = message.status;
-			try {
-				toolResults.set(toolCallId, {
-					result: JSON.parse(textContent),
-					status
-				});
-			} catch {
-				toolResults.set(toolCallId, {
-					result: textContent,
-					status
-				});
+function createMessageProcessor() {
+	const toolParseCache = /* @__PURE__ */ new WeakMap();
+	const chatCache = /* @__PURE__ */ new WeakMap();
+	let toolResults = /* @__PURE__ */ new Map();
+	return { process(rawMessages) {
+		const nextToolResults = /* @__PURE__ */ new Map();
+		for (const message of rawMessages) {
+			if (message.type !== "tool") continue;
+			let parsed = toolParseCache.get(message);
+			if (!parsed) {
+				const callId = message.tool_call_id || message.additional_kwargs?.tool_call_id;
+				if (!callId) continue;
+				const textContent = extractTextFromContent(extractContent(message));
+				const status = message.status;
+				let result;
+				try {
+					result = JSON.parse(textContent);
+				} catch {
+					result = textContent;
+				}
+				parsed = {
+					callId,
+					entry: {
+						result,
+						status
+					}
+				};
+				toolParseCache.set(message, parsed);
 			}
+			nextToolResults.set(parsed.callId, parsed.entry);
 		}
-	}
-	const messages = [];
-	for (const message of rawMessages) {
-		const chatMessage = toChatMessage(message, toolResults);
-		if (chatMessage) messages.push(chatMessage);
-	}
-	return {
-		messages,
-		toolResults
-	};
+		let toolResultsChanged = nextToolResults.size !== toolResults.size;
+		if (!toolResultsChanged) {
+			for (const [callId, entry] of nextToolResults) if (toolResults.get(callId) !== entry) {
+				toolResultsChanged = true;
+				break;
+			}
+		}
+		if (toolResultsChanged) toolResults = nextToolResults;
+		const messages = [];
+		for (const message of rawMessages) {
+			let chat;
+			if (chatCache.has(message)) {
+				chat = chatCache.get(message) ?? null;
+				if (chat && chat.toolCalls && toolResultsChanged) {
+					chat = toChatMessage(message, toolResults);
+					chatCache.set(message, chat);
+				}
+			} else {
+				chat = toChatMessage(message, toolResults);
+				chatCache.set(message, chat);
+			}
+			if (chat) messages.push(chat);
+		}
+		return {
+			messages,
+			toolResults
+		};
+	} };
 }
 //#endregion
 //#region src/utils/injectStyles.ts
@@ -1045,6 +1142,11 @@ injectStyles();
 const AgentChat = forwardRef(({ stream, className = "", tools, contexts, messageConfig, inputConfig, interruptConfig, agentState, welcome }, ref) => {
 	const { onPreSend, ...chatInputConfig } = inputConfig || {};
 	const chatInputRef = useRef(null);
+	const [messageProcessor] = useState(() => createMessageProcessor());
+	const streamRef = useRef(stream);
+	useEffect(() => {
+		streamRef.current = stream;
+	});
 	useImperativeHandle(ref, () => ({
 		input: chatInputRef.current,
 		setSkill: (skill) => chatInputRef.current?.setSkill?.(skill),
@@ -1052,18 +1154,19 @@ const AgentChat = forwardRef(({ stream, className = "", tools, contexts, message
 		focusInput: () => chatInputRef.current?.focus?.()
 	}));
 	const interruptEvent = stream.interrupt;
+	const submitLatest = useCallback((values, options) => streamRef.current.submit(values, options), []);
 	const { renderInterrupt: interruptRender } = useInterrupt({
 		interrupt: interruptEvent ? {
 			value: interruptEvent.value,
 			id: interruptEvent.id
 		} : null,
 		config: interruptConfig,
-		onSubmit: stream.submit
+		onSubmit: submitLatest
 	});
 	const [toolExecutions, setToolExecutions] = useState(/* @__PURE__ */ new Map());
 	const { messages, toolResults } = useMemo(() => {
-		return processMessages(stream.messages);
-	}, [stream.messages]);
+		return messageProcessor.process(stream.messages);
+	}, [messageProcessor, stream.messages]);
 	const allToolCalls = useMemo(() => {
 		return messages.flatMap((msg) => msg.toolCalls || []);
 	}, [messages]);
@@ -1083,8 +1186,12 @@ const AgentChat = forwardRef(({ stream, className = "", tools, contexts, message
 		return false;
 	}, [toolExecutions, frontendToolNames]);
 	const isLoading = stream.isLoading || hasToolExecuting;
+	const securityConfig = useMemo(() => ({
+		allowedTags: messageConfig?.allowedTags,
+		literalTagContent: messageConfig?.literalTagContent
+	}), [messageConfig?.allowedTags, messageConfig?.literalTagContent]);
 	const submitToStream = useCallback(async (submitMessages) => {
-		await stream.submit({
+		await streamRef.current.submit({
 			...agentState,
 			messages: submitMessages,
 			agentkit: {
@@ -1104,7 +1211,6 @@ const AgentChat = forwardRef(({ stream, className = "", tools, contexts, message
 			}
 		});
 	}, [
-		stream,
 		frontendTools,
 		contexts,
 		agentState
@@ -1137,8 +1243,8 @@ const AgentChat = forwardRef(({ stream, className = "", tools, contexts, message
 	});
 	const handleStop = useCallback(async () => {
 		cancelToolExecution();
-		await stream.stop();
-	}, [stream, cancelToolExecution]);
+		await streamRef.current.stop();
+	}, [cancelToolExecution]);
 	const shouldRenderWelcome = messages.length === 0 && !isLoading && welcome;
 	return /* @__PURE__ */ jsxs("div", {
 		className: `agent-chat-container ${className}`,
@@ -1151,10 +1257,7 @@ const AgentChat = forwardRef(({ stream, className = "", tools, contexts, message
 			tools,
 			toolExecutions,
 			components: messageConfig?.components,
-			securityConfig: {
-				allowedTags: messageConfig?.allowedTags,
-				literalTagContent: messageConfig?.literalTagContent
-			},
+			securityConfig,
 			loadingColor: messageConfig?.loadingColor,
 			interruptRender
 		}), /* @__PURE__ */ jsx(ChatInput, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vegintech/langchain-react-agent",
-  "version": "0.0.41",
+  "version": "0.0.43",
   "description": "LangChain Agent UI component library for React",
   "license": "MIT",
   "files": [
@@ -23,9 +23,9 @@
     "prepublishOnly": "vp run build"
   },
   "dependencies": {
-    "@ant-design/x": "^2.4.0",
+    "@ant-design/x": "^2.8.0",
     "@langchain/langgraph-sdk": "^1.8.7",
-    "streamdown": "^2.5.0"
+    "streamdown": "^2.6.0"
   },
   "devDependencies": {
     "@types/node": "^25.5.0",