@vegintech/langchain-react-agent 0.0.9 → 0.0.10

package/dist/index.d.mts

@@ -241,6 +241,8 @@ interface AgentChatProps {
   agentState?: Record<string, unknown>;
   /** Agent 状态变化回调 */
   onAgentStateChange?: (state: Record<string, unknown>) => void;
+  /** 是否显示调试面板，默认 false。仅在开发环境生效 */
+  showDebug?: boolean;
 }
 /** AgentChat 组件对外暴露的方法 */
 interface AgentChatRef {

package/dist/index.mjs

@@ -226,7 +226,7 @@ const renderMessageContent = (message, isLastMessage, isLoading, tools, toolExec
 				children: /* @__PURE__ */ jsx(ReasoningContent, { content: message.reasoningContent })
 			}),
 			message.content && /* @__PURE__ */ jsx("div", {
-				style: { marginTop: message.reasoningContent ? "8px" : 0 },
+				style: { marginTop: message.reasoningContent ? "8px" : "3px" },
 				children: /* @__PURE__ */ jsx(Streamdown, {
 					components: {
 						p: CustomParagraph,
@@ -377,6 +377,443 @@ const MessageList = ({ messages, isLoading = false, className = "", tools, toolE
 	});
 };
 //#endregion
+//#region src/components/DebugPanel.tsx
+const isDevelopment = () => {
+	if (typeof process !== "undefined" && process.env) return process.env.NODE_ENV === "development";
+	const viteEnv = import.meta.env;
+	if (typeof import.meta !== "undefined" && viteEnv) return viteEnv.DEV === true || viteEnv.MODE === "development";
+	return false;
+};
+function DebugPanel({ messages, streamState, visible = true }) {
+	if (!isDevelopment() || !visible) return null;
+	const [isOpen, setIsOpen] = useState(false);
+	const [activeTab, setActiveTab] = useState("messages");
+	const [expandedRows, setExpandedRows] = useState(/* @__PURE__ */ new Set());
+	const [buttonPos, setButtonPos] = useState({
+		x: 0,
+		y: 0
+	});
+	const [isDraggingButton, setIsDraggingButton] = useState(false);
+	const buttonDragRef = useRef(null);
+	const [dialogPos, setDialogPos] = useState({
+		x: -400,
+		y: -300
+	});
+	const [isDraggingDialog, setIsDraggingDialog] = useState(false);
+	const dialogDragRef = useRef(null);
+	const handleButtonMouseDown = useCallback((e) => {
+		e.preventDefault();
+		buttonDragRef.current = {
+			startX: e.clientX,
+			startY: e.clientY,
+			initialX: buttonPos.x,
+			initialY: buttonPos.y
+		};
+		setIsDraggingButton(true);
+	}, [buttonPos]);
+	const handleDialogMouseDown = useCallback((e) => {
+		if (!e.target.closest(".debug-panel-header")) return;
+		e.preventDefault();
+		dialogDragRef.current = {
+			startX: e.clientX,
+			startY: e.clientY,
+			initialX: dialogPos.x,
+			initialY: dialogPos.y
+		};
+		setIsDraggingDialog(true);
+	}, [dialogPos]);
+	useEffect(() => {
+		const handleMouseMove = (e) => {
+			if (isDraggingButton && buttonDragRef.current) {
+				const dx = e.clientX - buttonDragRef.current.startX;
+				const dy = e.clientY - buttonDragRef.current.startY;
+				setButtonPos({
+					x: buttonDragRef.current.initialX + dx,
+					y: buttonDragRef.current.initialY + dy
+				});
+			}
+			if (isDraggingDialog && dialogDragRef.current) {
+				const dx = e.clientX - dialogDragRef.current.startX;
+				const dy = e.clientY - dialogDragRef.current.startY;
+				setDialogPos({
+					x: dialogDragRef.current.initialX + dx,
+					y: dialogDragRef.current.initialY + dy
+				});
+			}
+		};
+		const handleMouseUp = () => {
+			setIsDraggingButton(false);
+			setIsDraggingDialog(false);
+			buttonDragRef.current = null;
+			dialogDragRef.current = null;
+		};
+		if (isDraggingButton || isDraggingDialog) {
+			document.addEventListener("mousemove", handleMouseMove);
+			document.addEventListener("mouseup", handleMouseUp);
+		}
+		return () => {
+			document.removeEventListener("mousemove", handleMouseMove);
+			document.removeEventListener("mouseup", handleMouseUp);
+		};
+	}, [isDraggingButton, isDraggingDialog]);
+	const formatJson = (data) => {
+		try {
+			return JSON.stringify(data, null, 2);
+		} catch {
+			return String(data);
+		}
+	};
+	const toggleRow = (index) => {
+		setExpandedRows((prev) => {
+			const next = new Set(prev);
+			if (next.has(index)) next.delete(index);
+			else next.add(index);
+			return next;
+		});
+	};
+	const getTypeTagStyle = (type) => {
+		const color = {
+			human: {
+				bg: "#e6f4ff",
+				color: "#0958d9"
+			},
+			ai: {
+				bg: "#f6ffed",
+				color: "#389e0d"
+			},
+			tool: {
+				bg: "#fff7e6",
+				color: "#d46b08"
+			},
+			system: {
+				bg: "#f9f0ff",
+				color: "#722ed1"
+			},
+			function: {
+				bg: "#fff2f0",
+				color: "#cf1322"
+			}
+		}[type || ""] || {
+			bg: "#f5f5f5",
+			color: "#666"
+		};
+		return {
+			display: "inline-block",
+			padding: "2px 8px",
+			borderRadius: "4px",
+			fontSize: "12px",
+			fontWeight: 500,
+			background: color.bg,
+			color: color.color
+		};
+	};
+	const formatContent = (content) => {
+		if (!content) return "-";
+		return content;
+	};
+	const buttonStyle = {
+		position: "fixed",
+		right: `${20 - buttonPos.x}px`,
+		bottom: `${20 - buttonPos.y}px`,
+		width: "48px",
+		height: "48px",
+		borderRadius: "50%",
+		background: "#1677ff",
+		color: "#fff",
+		border: "none",
+		cursor: isDraggingButton ? "grabbing" : "grab",
+		boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		fontSize: "20px",
+		zIndex: 9998,
+		transition: isDraggingButton ? "none" : "box-shadow 0.2s",
+		userSelect: "none"
+	};
+	const dialogStyle = {
+		position: "fixed",
+		right: `${20 - dialogPos.x}px`,
+		bottom: `${80 - dialogPos.y}px`,
+		width: "800px",
+		maxWidth: "90vw",
+		height: "600px",
+		maxHeight: "85vh",
+		background: "#fff",
+		borderRadius: "12px",
+		boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
+		zIndex: 9999,
+		display: "flex",
+		flexDirection: "column",
+		overflow: "hidden",
+		cursor: isDraggingDialog ? "grabbing" : "default",
+		userSelect: "none"
+	};
+	const headerStyle = {
+		padding: "12px 16px",
+		background: "#f5f5f5",
+		borderBottom: "1px solid #e8e8e8",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "space-between",
+		cursor: isDraggingDialog ? "grabbing" : "grab"
+	};
+	const tabContainerStyle = {
+		display: "flex",
+		gap: "8px"
+	};
+	const getTabStyle = (isActive) => ({
+		padding: "6px 16px",
+		borderRadius: "6px",
+		border: "none",
+		background: isActive ? "#1677ff" : "transparent",
+		color: isActive ? "#fff" : "#666",
+		cursor: "pointer",
+		fontSize: "14px",
+		transition: "all 0.2s"
+	});
+	const closeButtonStyle = {
+		width: "28px",
+		height: "28px",
+		borderRadius: "50%",
+		border: "none",
+		background: "#ff4d4f",
+		color: "#fff",
+		cursor: "pointer",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		fontSize: "16px",
+		transition: "background 0.2s"
+	};
+	const contentStyle = {
+		flex: 1,
+		overflow: "auto",
+		padding: "16px",
+		background: "#fafafa"
+	};
+	const preStyle = {
+		margin: 0,
+		padding: "12px",
+		background: "#f8f9fa",
+		color: "#333",
+		borderRadius: "8px",
+		fontSize: "12px",
+		fontFamily: "\"Fira Code\", \"Monaco\", \"Consolas\", monospace",
+		lineHeight: 1.5,
+		overflow: "auto",
+		whiteSpace: "pre-wrap",
+		wordBreak: "break-word",
+		border: "1px solid #e8e8e8"
+	};
+	const statsStyle = {
+		padding: "8px 12px",
+		background: "#e6f4ff",
+		borderRadius: "6px",
+		marginBottom: "12px",
+		fontSize: "13px",
+		color: "#0958d9"
+	};
+	const tableStyle = {
+		width: "100%",
+		borderCollapse: "collapse",
+		fontSize: "13px",
+		background: "#fff",
+		borderRadius: "8px",
+		overflow: "hidden",
+		boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)"
+	};
+	const tableHeaderStyle = {
+		background: "#f5f5f5",
+		fontWeight: 600,
+		color: "#333",
+		textAlign: "left",
+		padding: "10px 12px",
+		borderBottom: "1px solid #e8e8e8",
+		whiteSpace: "nowrap"
+	};
+	const tableCellStyle = {
+		padding: "10px 12px",
+		borderBottom: "1px solid #f0f0f0",
+		verticalAlign: "top"
+	};
+	const expandButtonStyle = {
+		width: "20px",
+		height: "20px",
+		border: "none",
+		background: "transparent",
+		cursor: "pointer",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		fontSize: "12px",
+		color: "#666",
+		borderRadius: "4px",
+		transition: "background 0.2s"
+	};
+	const expandedRowStyle = { background: "#fafafa" };
+	const jsonContainerStyle = {
+		padding: "12px",
+		background: "#fff",
+		borderRadius: "6px",
+		margin: "8px 0",
+		border: "1px solid #e8e8e8"
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
+		style: buttonStyle,
+		onMouseDown: handleButtonMouseDown,
+		onClick: () => !isDraggingButton && setIsOpen(true),
+		title: "打开调试面板",
+		children: "🐛"
+	}), isOpen && /* @__PURE__ */ jsxs("div", {
+		style: dialogStyle,
+		onMouseDown: handleDialogMouseDown,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "debug-panel-header",
+			style: headerStyle,
+			children: [/* @__PURE__ */ jsxs("div", {
+				style: tabContainerStyle,
+				children: [/* @__PURE__ */ jsxs("button", {
+					style: getTabStyle(activeTab === "messages"),
+					onClick: () => setActiveTab("messages"),
+					children: [
+						"Messages (",
+						messages.length,
+						")"
+					]
+				}), /* @__PURE__ */ jsx("button", {
+					style: getTabStyle(activeTab === "state"),
+					onClick: () => setActiveTab("state"),
+					children: "State"
+				})]
+			}), /* @__PURE__ */ jsx("button", {
+				style: closeButtonStyle,
+				onClick: () => setIsOpen(false),
+				title: "关闭",
+				children: "×"
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			style: contentStyle,
+			children: activeTab === "messages" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+				style: statsStyle,
+				children: [
+					"共 ",
+					messages.length,
+					" 条消息"
+				]
+			}), /* @__PURE__ */ jsxs("table", {
+				style: tableStyle,
+				children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+					/* @__PURE__ */ jsx("th", { style: {
+						...tableHeaderStyle,
+						width: "30px"
+					} }),
+					/* @__PURE__ */ jsx("th", {
+						style: {
+							...tableHeaderStyle,
+							width: "60px"
+						},
+						children: "类型"
+					}),
+					/* @__PURE__ */ jsx("th", {
+						style: tableHeaderStyle,
+						children: "内容"
+					}),
+					/* @__PURE__ */ jsx("th", {
+						style: {
+							...tableHeaderStyle,
+							width: "100px"
+						},
+						children: "ID"
+					})
+				] }) }), /* @__PURE__ */ jsx("tbody", { children: messages.map((msg, index) => {
+					const message = msg;
+					const isExpanded = expandedRows.has(index);
+					return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("tr", {
+						style: {
+							cursor: "pointer",
+							transition: "background 0.2s"
+						},
+						onClick: () => toggleRow(index),
+						onMouseEnter: (e) => {
+							e.currentTarget.style.background = "#f5f5f5";
+						},
+						onMouseLeave: (e) => {
+							e.currentTarget.style.background = "transparent";
+						},
+						children: [
+							/* @__PURE__ */ jsx("td", {
+								style: tableCellStyle,
+								children: /* @__PURE__ */ jsx("button", {
+									style: expandButtonStyle,
+									onClick: (e) => {
+										e.stopPropagation();
+										toggleRow(index);
+									},
+									children: isExpanded ? "▼" : "▶"
+								})
+							}),
+							/* @__PURE__ */ jsx("td", {
+								style: tableCellStyle,
+								children: /* @__PURE__ */ jsx("span", {
+									style: getTypeTagStyle(message.type),
+									children: message.type || "unknown"
+								})
+							}),
+							/* @__PURE__ */ jsx("td", {
+								style: tableCellStyle,
+								children: /* @__PURE__ */ jsx("div", {
+									style: {
+										color: "#333",
+										lineHeight: 1.5,
+										wordBreak: "break-all"
+									},
+									children: formatContent(message.content)
+								})
+							}),
+							/* @__PURE__ */ jsx("td", {
+								style: {
+									...tableCellStyle,
+									color: "#999",
+									fontSize: "12px"
+								},
+								children: message.id?.slice(-8) || "-"
+							})
+						]
+					}, index), isExpanded && /* @__PURE__ */ jsx("tr", {
+						style: expandedRowStyle,
+						children: /* @__PURE__ */ jsx("td", {
+							colSpan: 4,
+							style: {
+								padding: 0,
+								borderBottom: "1px solid #e8e8e8"
+							},
+							children: /* @__PURE__ */ jsx("div", {
+								style: jsonContainerStyle,
+								children: /* @__PURE__ */ jsx("pre", {
+									style: {
+										...preStyle,
+										margin: 0,
+										maxHeight: "300px",
+										overflow: "auto"
+									},
+									children: formatJson(message)
+								})
+							})
+						})
+					})] });
+				}) })]
+			})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+				style: statsStyle,
+				children: ["State 键数量: ", Object.keys(streamState).length]
+			}), /* @__PURE__ */ jsx("pre", {
+				style: preStyle,
+				children: formatJson(streamState)
+			})] })
+		})]
+	})] });
+}
+//#endregion
 //#region src/hooks/useInterrupt.tsx
 /**
 * InterruptManager - 管理 Interrupt 状态的 Hook
@@ -786,7 +1223,7 @@ function injectStyles() {
 //#endregion
 //#region src/components/AgentChat.tsx
 injectStyles();
-const AgentChat = forwardRef(({ apiUrl, assistantId, headers, threadId: externalThreadId, onThreadIdChange, className = "", tools, contexts, messageConfig, inputConfig, onError, interruptConfig, agentState, onAgentStateChange }, ref) => {
+const AgentChat = forwardRef(({ apiUrl, assistantId, headers, threadId: externalThreadId, onThreadIdChange, className = "", tools, contexts, messageConfig, inputConfig, onError, interruptConfig, agentState, onAgentStateChange, showDebug }, ref) => {
 	const [internalThreadId, setInternalThreadId] = useState(externalThreadId);
 	useEffect(() => {
 		setInternalThreadId(externalThreadId);
@@ -901,33 +1338,41 @@ const AgentChat = forwardRef(({ apiUrl, assistantId, headers, threadId: external
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: `agent-chat-container ${className}`,
-		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
-		})]
+		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
+			}),
+			/* @__PURE__ */ jsx(DebugPanel, {
+				messages: stream.messages,
+				streamState: stream.values || {},
+				visible: showDebug
+			})
+		]
 	});
 });
 AgentChat.displayName = "AgentChat";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vegintech/langchain-react-agent",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "LangChain Agent UI component library for React",
   "license": "MIT",
   "files": [
@@ -15,13 +15,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "build": "vp pack",
-    "dev": "vp pack --watch",
-    "test": "vp test",
-    "check": "vp check",
-    "prepublishOnly": "vp run build"
-  },
   "dependencies": {
     "@ant-design/x": "^2.4.0",
     "@langchain/core": "^1.1.36",
@@ -43,5 +36,11 @@
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "dev": "vp pack --watch",
+    "test": "vp test",
+    "check": "vp check"
   }
-}
+}