@vegintech/langchain-react-agent 0.0.3 → 0.0.5

package/README.md

@@ -176,4 +176,4 @@ import type {
   MessageConfig,
   InputConfig,
 } from "@vegintech/langchain-react-agent";
-```
+```

package/dist/index.d.mts

@@ -2,9 +2,57 @@ import * as react from "react";
 import { ReactNode } from "react";
 import { Components } from "streamdown";
 import { BaseNode, InsertPosition, NodeRender, SenderProps, SkillType, SlotConfigType } from "@ant-design/x/es/sender/interface.ts";
-import { BaseMessage } from "@langchain/core/messages";
 
 //#region src/types.d.ts
+/** ToolCard 组件 Props */
+interface ToolCardProps {
+  /**
+   * 前缀文本（中文，使用小字体）
+   */
+  prefix: string;
+  /**
+   * 正文内容（英文/文件名，保持默认大小）
+   */
+  content?: string;
+  /**
+   * 左侧图标
+   */
+  icon: ReactNode;
+}
+/** Interrupt 事件数据结构 */
+interface InterruptEvent {
+  /** Interrupt 的值，可以是任意类型（由 LangChain 后端决定） */
+  value: unknown;
+  /** Interrupt 的唯一标识 */
+  id: string;
+}
+/** Interrupt 渲染函数的参数 */
+interface InterruptRenderProps {
+  /** Interrupt 事件数据 */
+  event: InterruptEvent;
+  /** 解决 Interrupt 的回调函数，传入响应值 */
+  resolve: (response: unknown) => void;
+}
+/** Interrupt 处理配置 */
+interface InterruptConfig {
+  /** 自定义 Interrupt 渲染函数 */
+  render: (props: InterruptRenderProps) => ReactNode;
+}
+/** InterruptManager Hook 的 Props */
+interface InterruptManagerProps {
+  /** 当前 interrupt 事件 */
+  interrupt: InterruptEvent | null;
+  /** Interrupt 处理配置 */
+  config?: InterruptConfig;
+  /** 提交回调 */
+  onSubmit: (values: {
+    [x: string]: unknown;
+  } | null | undefined, options?: {
+    command?: {
+      resume: unknown;
+    };
+  }) => Promise<void> | void;
+}
 /** Context Item，用于传递上下文信息 */
 interface ContextItem {
   /** 描述信息 */
@@ -132,6 +180,15 @@ interface BackendTool<TArgs = Record<string, unknown>> extends ToolBase<TArgs> {
 }
 /** 工具定义联合类型 */
 type ToolDefinition<TArgs = Record<string, unknown>> = FrontendTool<TArgs> | BackendTool<TArgs>;
+/** 空状态配置 */
+interface EmptyStateConfig {
+  /** 空状态标题 */
+  title?: string;
+  /** 空状态描述 */
+  description?: string;
+  /** 自定义渲染 */
+  render?: () => ReactNode;
+}
 /** 消息渲染配置 */
 interface MessageConfig {
   /** Markdown 自定义组件 */
@@ -142,6 +199,8 @@ interface MessageConfig {
   literalTagContent?: string[];
   /** Loading 动画颜色，支持 CSS 颜色值 */
   loadingColor?: string;
+  /** 空状态配置 */
+  emptyState?: EmptyStateConfig;
 }
 /** 输入框配置 */
 interface InputConfig extends SenderCustomizationProps {
@@ -162,6 +221,7 @@ interface AgentChatProps {
   messageConfig?: MessageConfig;
   inputConfig?: InputConfig;
   onError?: (error: Error) => void;
+  interruptConfig?: InterruptConfig;
 }
 /** AgentChat 组件对外暴露的方法 */
 interface AgentChatRef {
@@ -175,31 +235,14 @@ interface AgentChatRef {
   focusInput: () => void;
 }
 //#endregion
-//#region src/AgentChat.d.ts
+//#region src/components/AgentChat.d.ts
 declare const AgentChat: react.ForwardRefExoticComponent<AgentChatProps & react.RefAttributes<AgentChatRef>>;
 //#endregion
-//#region src/messageUtils.d.ts
-/**
- * 从 BaseMessage 中提取 tool_calls
- */
-declare function extractToolCalls(message: BaseMessage): ToolCallInput[] | undefined;
-/**
- * 从 BaseMessage 中提取文本内容
- */
-declare function extractContent(message: BaseMessage): string;
+//#region src/components/ToolCard.d.ts
 /**
- * 将 BaseMessage 转换为 ChatMessage
+ * ToolCard 组件 - 用于展示工具调用结果
+ * 样式：圆角矩形框，左侧 icon，label 分两行显示（prefix 小字体，content 默认字体）
  */
-declare function toChatMessage(message: BaseMessage, toolResults: Map<string, unknown>): ChatMessage | null;
-/**
- * 预处理消息列表：建立 tool_call_id -> result 映射，并过滤 ToolMessage
- */
-declare function processMessages(rawMessages: BaseMessage[]): {
-  messages: ChatMessage[];
-  toolResults: Map<string, unknown>;
-};
-//#endregion
-//#region src/injectStyles.d.ts
-declare function injectStyles(): void;
+declare const ToolCard: React.FC<ToolCardProps>;
 //#endregion
-export { AgentChat, type AgentChatInputRef, type AgentChatProps, type AgentChatRef, type BackendTool, type ChatMessage, type ContextItem, type FrontendTool, type InputConfig, type MessageConfig, type MessageType, type SenderCustomizationProps, type SenderSlotConfig, type SenderSubmitParams, type ToolCallInput, type ToolDefinition, type ToolExecutionRecord, type ToolExecutionStatus, type ToolParameterSchema, type ToolRenderProps, extractContent, extractToolCalls, injectStyles, processMessages, toChatMessage };
+export { AgentChat, type AgentChatInputRef, type AgentChatProps, type AgentChatRef, type BackendTool, type ChatMessage, type ContextItem, type EmptyStateConfig, type FrontendTool, type InputConfig, type InterruptConfig, type InterruptEvent, type InterruptManagerProps, type InterruptRenderProps, type MessageConfig, type MessageType, type SenderCustomizationProps, type SenderSlotConfig, type SenderSubmitParams, type ToolCallInput, ToolCard, type ToolCardProps, type ToolDefinition, type ToolExecutionRecord, type ToolExecutionStatus, type ToolParameterSchema, type ToolRenderProps };

package/dist/index.mjs

@@ -1,117 +1,9 @@
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { useStream } from "@langchain/react";
-import { Bubble, Sender, Think } from "@ant-design/x";
+import { Actions, Bubble, Sender, Think } from "@ant-design/x";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Streamdown } from "streamdown";
-//#region src/injectStyles.ts
-const styles = `
-/* Agent Chat Container */
-.agent-chat-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  background-color: transparent;
-  overflow: hidden;
-}
-
-/* Message List */
-.agent-message-list {
-  flex: 1;
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-}
-
-.agent-message-list .empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.agent-message-list .ant-think-status-text {
-  font-size: 13px;
-}
-
-.agent-message-empty {
-  color: #8b8d91;
-  font-size: 14px;
-  text-align: center;
-}
-
-@keyframes agent-loading-bounce {
-  0%,
-  80%,
-  100% {
-    transform: scale(0);
-  }
-  40% {
-    transform: scale(1);
-  }
-}
-
-/* Chat Input */
-.agent-chat-input-container {
-  padding: 12px 4px;
-  background-color: transparent;
-}
-
-/* Tool Calls Container */
-.tool-calls-container {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-top: 8px;
-}
-
-/* Tool Call Default Style */
-.tool-call-default {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 6px 0;
-}
-
-.tool-call-header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.tool-call-name {
-  font-weight: 500;
-  font-size: 13px;
-  color: #fff;
-}
-
-.tool-call-status {
-  font-size: 12px;
-  color: #8b8d91;
-  margin-left: auto;
-}
-
-.tool-call-error {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 12px;
-  color: #ff4d4f;
-}
-
-.tool-call-wrapper {
-  width: 100%;
-}
-`;
-let injected = false;
-function injectStyles() {
-	if (injected || typeof document === "undefined") return;
-	const styleElement = document.createElement("style");
-	styleElement.textContent = styles;
-	document.head.appendChild(styleElement);
-	injected = true;
-}
-//#endregion
-//#region src/ChatInput.tsx
-injectStyles();
+//#region src/components/ChatInput.tsx
 const slotConfig = [];
 const ChatInput = forwardRef(({ onSend, onStop, isLoading = false, disabled = false, placeholder = "输入消息...", className = "", footer, skill: externalSkill, header, prefix }, ref) => {
 	const senderRef = useRef(null);
@@ -159,7 +51,7 @@ const ChatInput = forwardRef(({ onSend, onStop, isLoading = false, disabled = fa
 });
 ChatInput.displayName = "ChatInput";
 //#endregion
-//#region src/ToolCallRenderer.tsx
+//#region src/components/ToolCallRenderer.tsx
 /**
 * 工具调用渲染组件
 *
@@ -209,125 +101,7 @@ const DefaultToolCallRenderer = ({ record }) => {
 	});
 };
 //#endregion
-//#region src/ToolManager.tsx
-/**
-* 工具管理器组件
-*
-* 职责：
-* 1. 管理工具执行状态
-* 2. 自动执行前端工具（避免重复执行）
-* 3. 通知外部执行状态变化
-*
-* 这是一个无 UI 组件，只负责逻辑处理
-*/
-const ToolManager = ({ tools, toolCalls, isLoading = false, onExecutionChange, onToolResult, completedToolResults }) => {
-	const executedCallsRef = useRef(/* @__PURE__ */ new Set());
-	const executingCallsRef = useRef(/* @__PURE__ */ new Set());
-	const pendingNotifiedRef = useRef(/* @__PURE__ */ new Set());
-	const initializedRef = useRef(false);
-	useEffect(() => {
-		if (initializedRef.current || !completedToolResults || completedToolResults.size === 0) return;
-		initializedRef.current = true;
-		completedToolResults.forEach((result, callId) => {
-			executedCallsRef.current.add(callId);
-			const call = toolCalls.find((c) => c.id === callId);
-			if (call) onExecutionChange?.({
-				callId,
-				name: call.name,
-				arguments: call.arguments,
-				status: "success",
-				result
-			});
-		});
-	}, [completedToolResults]);
-	/**
-	* 执行单个前端工具
-	*/
-	const executeFrontendTool = useCallback(async (tool, call) => {
-		const callId = call.id;
-		executingCallsRef.current.add(callId);
-		onExecutionChange?.({
-			callId,
-			name: call.name,
-			arguments: call.arguments,
-			status: "running"
-		});
-		try {
-			const result = await tool.execute(call.arguments);
-			onExecutionChange?.({
-				callId,
-				name: call.name,
-				arguments: call.arguments,
-				status: "success",
-				result
-			});
-			onToolResult?.(callId, call.name, result);
-		} catch (error) {
-			const errorMessage = error instanceof Error ? error.message : String(error);
-			onExecutionChange?.({
-				callId,
-				name: call.name,
-				arguments: call.arguments,
-				status: "error",
-				error: errorMessage
-			});
-		} finally {
-			executingCallsRef.current.delete(callId);
-			executedCallsRef.current.add(callId);
-		}
-	}, [onExecutionChange, onToolResult]);
-	/**
-	* 处理工具调用
-	*/
-	const processToolCalls = useCallback(async () => {
-		if (!tools) return;
-		for (const call of toolCalls) {
-			const callId = call.id;
-			if (executedCallsRef.current.has(callId) || executingCallsRef.current.has(callId)) continue;
-			const tool = tools.find((t) => t.name === call.name);
-			if (isLoading) {
-				if (!pendingNotifiedRef.current.has(callId)) {
-					pendingNotifiedRef.current.add(callId);
-					onExecutionChange?.({
-						callId,
-						name: call.name,
-						arguments: call.arguments,
-						status: "pending"
-					});
-				}
-				continue;
-			}
-			if (!tool) {
-				onExecutionChange?.({
-					callId,
-					name: call.name,
-					arguments: call.arguments,
-					status: "pending"
-				});
-				continue;
-			}
-			if (tool.type === "frontend") await executeFrontendTool(tool, call);
-			else onExecutionChange?.({
-				callId,
-				name: call.name,
-				arguments: call.arguments,
-				status: "pending"
-			});
-		}
-	}, [
-		tools,
-		toolCalls,
-		isLoading,
-		executeFrontendTool,
-		onExecutionChange
-	]);
-	useEffect(() => {
-		processToolCalls();
-	}, [useMemo(() => {
-		return toolCalls.filter((call) => !executedCallsRef.current.has(call.id) && !executingCallsRef.current.has(call.id)).map((call) => call.id).sort().join(",");
-	}, [toolCalls]), isLoading]);
-	return null;
-};
+//#region src/utils/toolUtils.ts
 /**
 * 辅助函数：根据工具名查找工具定义
 */
@@ -341,7 +115,7 @@ function isFrontendTool(tool) {
 	return tool.type === "frontend";
 }
 //#endregion
-//#region src/ReasoningContent.tsx
+//#region src/components/ReasoningContent.tsx
 const REASONING_CONTENT_MAX_HEIGHT = 58;
 const ReasoningContent = ({ content }) => {
 	const [isExpanded, setIsExpanded] = useState(false);
@@ -374,22 +148,23 @@ const ReasoningContent = ({ content }) => {
 			justifyContent: "flex-end"
 		},
 		children: content.trim()
-	}), isOverflowing && !isExpanded && /* @__PURE__ */ jsx("button", {
-		onClick: () => setIsExpanded(true),
-		style: {
-			marginLeft: "-8px",
-			fontSize: "12px",
-			padding: "4px 8px",
-			border: "none",
-			background: "transparent",
-			cursor: "pointer",
-			color: "#ffffff"
-		},
-		children: "查看全部"
+	}), isOverflowing && !isExpanded && /* @__PURE__ */ jsx(Actions, {
+		items: [{
+			key: "expand",
+			icon: /* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: "12px",
+					marginLeft: "-4px",
+					opacity: .8
+				},
+				children: "查看全部"
+			})
+		}],
+		onClick: () => setIsExpanded(true)
 	})] });
 };
 //#endregion
-//#region src/WaveLoading.tsx
+//#region src/components/WaveLoading.tsx
 /**
 * 波浪动画 Loading 组件
 * 三个小圆点波浪状动画效果
@@ -428,8 +203,7 @@ const WaveLoading = ({ color = "#1890ff" }) => {
 	});
 };
 //#endregion
-//#region src/MessageList.tsx
-injectStyles();
+//#region src/components/MessageList.tsx
 const CustomParagraph = (props) => {
 	const { node, ...rest } = props;
 	return /* @__PURE__ */ jsx("span", { ...rest });
@@ -530,7 +304,7 @@ const renderToolCalls = (toolCalls, tools, toolExecutions) => {
 			tool,
 			record
 		}, call.id);
-	});
+	}).filter(Boolean);
 };
 const roleConfig = {
 	user: {
@@ -546,7 +320,7 @@ const roleConfig = {
 		}
 	}
 };
-const MessageList = ({ messages, isLoading = false, className = "", tools, toolExecutions, components, securityConfig, loadingColor }) => {
+const MessageList = ({ messages, isLoading = false, className = "", tools, toolExecutions, components, securityConfig, loadingColor, interruptRender, emptyState }) => {
 	const reasoningCacheRef = useRef(/* @__PURE__ */ new Map());
 	const processedMessages = useMemo(() => {
 		const cache = reasoningCacheRef.current;
@@ -576,13 +350,19 @@ const MessageList = ({ messages, isLoading = false, className = "", tools, toolE
 	}, [processedMessages]);
 	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];
-			return toBubbleItem(message, isLastGroup && group.messages.length === 1, isLoading, tools, toolExecutions, components, securityConfig);
+			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()] })
+			};
+			return bubbleItem;
 		}
-		const mergedContent = /* @__PURE__ */ jsx(Fragment, { children: group.messages.map((message, msgIndex) => {
+		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",
@@ -597,13 +377,19 @@ const MessageList = ({ messages, isLoading = false, className = "", tools, toolE
 		placement: "start",
 		style: { paddingBlock: 0 }
 	}] : items;
-	if (allItems.length === 0) return /* @__PURE__ */ jsx("div", {
-		className: `agent-message-list empty ${className}`,
-		children: /* @__PURE__ */ jsx("div", {
-			className: "agent-message-empty",
-			children: /* @__PURE__ */ jsx("p", { children: "欢迎使用AI智能剪辑助手" })
-		})
-	});
+	if (allItems.length === 0) {
+		if (emptyState?.render) return /* @__PURE__ */ jsx("div", {
+			className: `agent-message-list empty ${className}`,
+			children: emptyState.render()
+		});
+		return /* @__PURE__ */ jsx("div", {
+			className: `agent-message-list empty ${className}`,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "agent-message-empty",
+				children: [emptyState?.title && /* @__PURE__ */ jsx("h4", { children: emptyState.title }), emptyState?.description ? /* @__PURE__ */ jsx("p", { children: emptyState.description }) : /* @__PURE__ */ jsx("p", { children: "开始对话吧" })]
+			})
+		});
+	}
 	return /* @__PURE__ */ jsx(Bubble.List, {
 		className: `agent-message-list ${className}`,
 		items: allItems,
@@ -612,7 +398,169 @@ const MessageList = ({ messages, isLoading = false, className = "", tools, toolE
 	});
 };
 //#endregion
-//#region src/messageUtils.ts
+//#region src/hooks/useInterrupt.tsx
+/**
+* InterruptManager - 管理 Interrupt 状态的 Hook
+*
+* 封装 Interrupt 状态管理和处理逻辑，避免在 AgentChat 组件中臃肿
+*/
+function useInterrupt({ interrupt, config, onSubmit }) {
+	const [activeInterrupt, setActiveInterrupt] = useState(null);
+	const processedInterruptIdRef = useRef(null);
+	useEffect(() => {
+		if (interrupt) {
+			const interruptEvent = interrupt;
+			if (interruptEvent.id !== processedInterruptIdRef.current) {
+				processedInterruptIdRef.current = interruptEvent.id;
+				setActiveInterrupt(interruptEvent);
+			}
+		} else {
+			processedInterruptIdRef.current = null;
+			setActiveInterrupt(null);
+		}
+	}, [interrupt?.id]);
+	const handleResolveInterrupt = useCallback((response) => {
+		onSubmit(null, { command: { resume: response } });
+		setActiveInterrupt(null);
+	}, [onSubmit]);
+	return {
+		activeInterrupt,
+		handleResolveInterrupt,
+		renderInterrupt: useCallback(() => {
+			if (!activeInterrupt || !config?.render) return null;
+			return /* @__PURE__ */ jsx("div", {
+				className: "agent-chat-interrupt",
+				children: config.render({
+					event: activeInterrupt,
+					resolve: handleResolveInterrupt
+				})
+			});
+		}, [
+			activeInterrupt,
+			config,
+			handleResolveInterrupt
+		])
+	};
+}
+//#endregion
+//#region src/hooks/useToolExecution.ts
+/**
+* useToolExecution - 管理前端工具执行的 Hook
+*
+* 职责：
+* 1. 管理工具执行状态
+* 2. 自动执行前端工具（避免重复执行）
+* 3. 通知外部执行状态变化
+*/
+function useToolExecution({ tools, toolCalls, isLoading = false, onExecutionChange, onToolResult, completedToolResults }) {
+	const executedCallsRef = useRef(/* @__PURE__ */ new Set());
+	const executingCallsRef = useRef(/* @__PURE__ */ new Set());
+	const pendingNotifiedRef = useRef(/* @__PURE__ */ new Set());
+	const initializedRef = useRef(false);
+	useEffect(() => {
+		if (initializedRef.current || !completedToolResults || completedToolResults.size === 0) return;
+		initializedRef.current = true;
+		completedToolResults.forEach((result, callId) => {
+			executedCallsRef.current.add(callId);
+			const call = toolCalls.find((c) => c.id === callId);
+			if (call) onExecutionChange?.({
+				callId,
+				name: call.name,
+				arguments: call.arguments,
+				status: "success",
+				result
+			});
+		});
+	}, [completedToolResults]);
+	/**
+	* 执行单个前端工具
+	*/
+	const executeFrontendTool = useCallback(async (tool, call) => {
+		const callId = call.id;
+		executingCallsRef.current.add(callId);
+		onExecutionChange?.({
+			callId,
+			name: call.name,
+			arguments: call.arguments,
+			status: "running"
+		});
+		try {
+			const result = await tool.execute(call.arguments);
+			onExecutionChange?.({
+				callId,
+				name: call.name,
+				arguments: call.arguments,
+				status: "success",
+				result
+			});
+			onToolResult?.(callId, call.name, result);
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : String(error);
+			onExecutionChange?.({
+				callId,
+				name: call.name,
+				arguments: call.arguments,
+				status: "error",
+				error: errorMessage
+			});
+		} finally {
+			executingCallsRef.current.delete(callId);
+			executedCallsRef.current.add(callId);
+		}
+	}, [onExecutionChange, onToolResult]);
+	/**
+	* 处理工具调用
+	*/
+	const processToolCalls = useCallback(async () => {
+		if (!tools) return;
+		for (const call of toolCalls) {
+			const callId = call.id;
+			if (executedCallsRef.current.has(callId) || executingCallsRef.current.has(callId)) continue;
+			const tool = findTool(tools, call.name);
+			if (isLoading) {
+				if (!pendingNotifiedRef.current.has(callId)) {
+					pendingNotifiedRef.current.add(callId);
+					onExecutionChange?.({
+						callId,
+						name: call.name,
+						arguments: call.arguments,
+						status: "pending"
+					});
+				}
+				continue;
+			}
+			if (!tool) {
+				onExecutionChange?.({
+					callId,
+					name: call.name,
+					arguments: call.arguments,
+					status: "pending"
+				});
+				continue;
+			}
+			if (isFrontendTool(tool)) await executeFrontendTool(tool, call);
+			else onExecutionChange?.({
+				callId,
+				name: call.name,
+				arguments: call.arguments,
+				status: "pending"
+			});
+		}
+	}, [
+		tools,
+		toolCalls,
+		isLoading,
+		executeFrontendTool,
+		onExecutionChange
+	]);
+	useEffect(() => {
+		processToolCalls();
+	}, [useMemo(() => {
+		return toolCalls.filter((call) => !executedCallsRef.current.has(call.id) && !executingCallsRef.current.has(call.id)).map((call) => call.id).sort().join(",");
+	}, [toolCalls]), isLoading]);
+}
+//#endregion
+//#region src/utils/messageUtils.ts
 /**
 * 从 BaseMessage 中提取 tool_calls
 */
@@ -684,9 +632,115 @@ function processMessages(rawMessages) {
 	};
 }
 //#endregion
-//#region src/AgentChat.tsx
+//#region src/utils/injectStyles.ts
+const styles = `
+/* Agent Chat Container */
+.agent-chat-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: transparent;
+  overflow: hidden;
+}
+
+/* Message List */
+.agent-message-list {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.agent-message-list .empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.agent-message-list .ant-think-status-text {
+  font-size: 13px;
+}
+
+.agent-message-empty {
+  color: #8b8d91;
+  font-size: 14px;
+  text-align: center;
+}
+
+@keyframes agent-loading-bounce {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
+  }
+}
+
+/* Chat Input */
+.agent-chat-input-container {
+  padding: 12px 4px;
+  background-color: transparent;
+}
+
+/* Tool Calls Container */
+.tool-calls-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+/* Tool Call Default Style */
+.tool-call-default {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 6px 0;
+}
+
+.tool-call-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.tool-call-name {
+  font-weight: 500;
+  font-size: 13px;
+}
+
+.tool-call-status {
+  font-size: 12px;
+  color: #8b8d91;
+  margin-left: auto;
+}
+
+.tool-call-error {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: #ff4d4f;
+}
+
+.tool-call-wrapper {
+  width: 100%;
+}
+`;
+let injected = false;
+function injectStyles() {
+	if (injected || typeof document === "undefined") return;
+	const styleElement = document.createElement("style");
+	styleElement.textContent = styles;
+	document.head.appendChild(styleElement);
+	injected = true;
+}
+//#endregion
+//#region src/components/AgentChat.tsx
 injectStyles();
-const AgentChat = forwardRef(({ apiUrl, assistantId, headers, threadId: externalThreadId, onThreadIdChange, className = "", tools, contexts, messageConfig, inputConfig, onError }, ref) => {
+const AgentChat = forwardRef(({ apiUrl, assistantId, headers, threadId: externalThreadId, onThreadIdChange, className = "", tools, contexts, messageConfig, inputConfig, onError, interruptConfig }, ref) => {
 	const [internalThreadId, setInternalThreadId] = useState(externalThreadId);
 	useEffect(() => {
 		setInternalThreadId(externalThreadId);
@@ -714,6 +768,11 @@ const AgentChat = forwardRef(({ apiUrl, assistantId, headers, threadId: external
 			onError?.(err);
 		}
 	});
+	const { renderInterrupt: interruptRender } = useInterrupt({
+		interrupt: stream.interrupt,
+		config: interruptConfig,
+		onSubmit: stream.submit
+	});
 	const [toolExecutions, setToolExecutions] = useState(/* @__PURE__ */ new Map());
 	const { messages, toolResults } = useMemo(() => {
 		return processMessages(stream.messages);
@@ -728,8 +787,8 @@ const AgentChat = forwardRef(({ apiUrl, assistantId, headers, threadId: external
 			return next;
 		});
 	}, []);
-	const submitToStream = useCallback((submitMessages, extraState = {}) => {
-		stream.submit({
+	const submitToStream = useCallback(async (submitMessages, extraState = {}) => {
+		await stream.submit({
 			messages: submitMessages,
 			...extraState,
 			agentkit: {
@@ -774,51 +833,85 @@ const AgentChat = forwardRef(({ apiUrl, assistantId, headers, threadId: external
 			}];
 		}
 		if (messages.length === 0) return;
-		submitToStream(messages, extraState);
+		await submitToStream(messages, extraState);
 	}, [onPreSend, submitToStream]);
-	const handleStop = useCallback(() => {
-		stream.stop();
+	const handleStop = useCallback(async () => {
+		await stream.stop();
 	}, [stream]);
+	useToolExecution({
+		tools,
+		toolCalls: allToolCalls,
+		isLoading: stream.isLoading,
+		onExecutionChange: handleExecutionChange,
+		onToolResult: handleToolResult,
+		completedToolResults: toolResults
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: `agent-chat-container ${className}`,
-		children: [
-			/* @__PURE__ */ jsx(ToolManager, {
-				tools,
-				toolCalls: allToolCalls,
-				isLoading: stream.isLoading,
-				onExecutionChange: handleExecutionChange,
-				onToolResult: handleToolResult,
-				completedToolResults: toolResults
-			}),
-			/* @__PURE__ */ jsx(MessageList, {
-				messages,
-				isLoading: stream.isLoading,
-				className: "agent-chat-messages",
-				tools,
-				toolExecutions,
-				components: messageConfig?.components,
-				securityConfig: {
-					allowedTags: messageConfig?.allowedTags,
-					literalTagContent: messageConfig?.literalTagContent
-				},
-				loadingColor: messageConfig?.loadingColor
-			}),
-			/* @__PURE__ */ jsx(ChatInput, {
-				ref: chatInputRef,
-				onSend: handleSend,
-				onStop: handleStop,
-				isLoading: stream.isLoading,
-				className: "agent-chat-input",
-				footer,
-				skill,
-				slotConfig,
-				header,
-				prefix,
-				placeholder
-			})
-		]
+		children: [/* @__PURE__ */ jsx(MessageList, {
+			messages,
+			isLoading: stream.isLoading,
+			className: "agent-chat-messages",
+			tools,
+			toolExecutions,
+			components: messageConfig?.components,
+			securityConfig: {
+				allowedTags: messageConfig?.allowedTags,
+				literalTagContent: messageConfig?.literalTagContent
+			},
+			loadingColor: messageConfig?.loadingColor,
+			interruptRender,
+			emptyState: messageConfig?.emptyState
+		}), /* @__PURE__ */ jsx(ChatInput, {
+			ref: chatInputRef,
+			onSend: handleSend,
+			onStop: handleStop,
+			isLoading: stream.isLoading,
+			className: "agent-chat-input",
+			footer,
+			skill,
+			slotConfig,
+			header,
+			prefix,
+			placeholder
+		})]
 	});
 });
 AgentChat.displayName = "AgentChat";
 //#endregion
-export { AgentChat, extractContent, extractToolCalls, injectStyles, processMessages, toChatMessage };
+//#region src/components/ToolCard.tsx
+/**
+* ToolCard 组件 - 用于展示工具调用结果
+* 样式：圆角矩形框，左侧 icon，label 分两行显示（prefix 小字体，content 默认字体）
+*/
+const ToolCard = ({ prefix, content, icon }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: 8,
+			borderRadius: 8,
+			fontSize: 13
+		},
+		children: [/* @__PURE__ */ jsx("span", {
+			style: {
+				display: "flex",
+				alignItems: "center"
+			},
+			children: icon
+		}), /* @__PURE__ */ jsxs("span", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 4,
+				color: "rgba(0, 0, 0, 0.45)"
+			},
+			children: [/* @__PURE__ */ jsx("span", {
+				style: { fontSize: 12 },
+				children: prefix
+			}), /* @__PURE__ */ jsx("span", { children: content })]
+		})]
+	});
+};
+//#endregion
+export { AgentChat, ToolCard };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vegintech/langchain-react-agent",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "LangChain Agent UI component library for React",
   "license": "MIT",
   "files": [