@vegintech/langchain-react-agent 0.0.10 → 0.0.12

package/dist/index.mjs

@@ -396,8 +396,8 @@ function DebugPanel({ messages, streamState, visible = true }) {
 	const [isDraggingButton, setIsDraggingButton] = useState(false);
 	const buttonDragRef = useRef(null);
 	const [dialogPos, setDialogPos] = useState({
-		x: -400,
-		y: -300
+		x: 0,
+		y: 0
 	});
 	const [isDraggingDialog, setIsDraggingDialog] = useState(false);
 	const dialogDragRef = useRef(null);
@@ -508,9 +508,60 @@ function DebugPanel({ messages, streamState, visible = true }) {
 		};
 	};
 	const formatContent = (content) => {
-		if (!content) return "-";
+		if (!content) return "";
 		return content;
 	};
+	const renderMessageContent = (message) => {
+		const hasToolCalls = message.tool_calls && Array.isArray(message.tool_calls) && message.tool_calls.length > 0;
+		return /* @__PURE__ */ jsxs("div", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: "8px"
+			},
+			children: [message.content && /* @__PURE__ */ jsx("div", {
+				style: {
+					color: "#333",
+					lineHeight: 1.5,
+					wordBreak: "break-all"
+				},
+				children: formatContent(message.content)
+			}), hasToolCalls && /* @__PURE__ */ jsxs("div", {
+				style: {
+					marginTop: "4px",
+					padding: "8px",
+					background: "#f6ffed",
+					border: "1px solid #b7eb8f",
+					borderRadius: "6px"
+				},
+				children: [/* @__PURE__ */ jsxs("div", {
+					style: {
+						fontSize: "11px",
+						fontWeight: 600,
+						color: "#389e0d",
+						marginBottom: "6px",
+						display: "flex",
+						alignItems: "center",
+						gap: "4px"
+					},
+					children: [/* @__PURE__ */ jsx("span", { children: "🔧" }), /* @__PURE__ */ jsxs("span", { children: [
+						"Tool Calls (",
+						message.tool_calls.length,
+						")"
+					] })]
+				}), /* @__PURE__ */ jsx("pre", {
+					style: {
+						...preStyle,
+						background: "#fff",
+						border: "1px solid #d9f7be",
+						maxHeight: "200px",
+						fontSize: "11px"
+					},
+					children: formatJson(message.tool_calls)
+				})]
+			})]
+		});
+	};
 	const buttonStyle = {
 		position: "fixed",
 		right: `${20 - buttonPos.x}px`,
@@ -533,11 +584,12 @@ function DebugPanel({ messages, streamState, visible = true }) {
 	};
 	const dialogStyle = {
 		position: "fixed",
-		right: `${20 - dialogPos.x}px`,
-		bottom: `${80 - dialogPos.y}px`,
-		width: "800px",
+		left: "50%",
+		top: "50%",
+		transform: `translate(calc(-50% + ${dialogPos.x}px), calc(-50% + ${dialogPos.y}px))`,
+		width: "1000px",
 		maxWidth: "90vw",
-		height: "600px",
+		height: "650px",
 		maxHeight: "85vh",
 		background: "#fff",
 		borderRadius: "12px",
@@ -546,8 +598,7 @@ function DebugPanel({ messages, streamState, visible = true }) {
 		display: "flex",
 		flexDirection: "column",
 		overflow: "hidden",
-		cursor: isDraggingDialog ? "grabbing" : "default",
-		userSelect: "none"
+		cursor: isDraggingDialog ? "grabbing" : "default"
 	};
 	const headerStyle = {
 		padding: "12px 16px",
@@ -718,13 +769,6 @@ function DebugPanel({ messages, streamState, visible = true }) {
 					/* @__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;
@@ -762,28 +806,13 @@ function DebugPanel({ messages, streamState, visible = true }) {
 							}),
 							/* @__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) || "-"
+								children: renderMessageContent(message)
 							})
 						]
 					}, index), isExpanded && /* @__PURE__ */ jsx("tr", {
 						style: expandedRowStyle,
 						children: /* @__PURE__ */ jsx("td", {
-							colSpan: 4,
+							colSpan: 3,
 							style: {
 								padding: 0,
 								borderBottom: "1px solid #e8e8e8"
@@ -1314,7 +1343,7 @@ const AgentChat = forwardRef(({ apiUrl, assistantId, headers, threadId: external
 	}, [submitToStream]);
 	const handleSend = useCallback(async (params) => {
 		let messages = [];
-		if (onPreSend && params.message.trim()) messages = (await onPreSend(params)).messages.filter((m) => m != null);
+		if (onPreSend && params.message.trim()) messages = (await onPreSend(params)).messages.filter((m) => m != null).map((m) => ({ ...m }));
 		else {
 			if (!params.message.trim()) return;
 			messages = [{

package/package.json

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