@vegintech/langchain-react-agent 0.0.11 → 0.0.12

package/dist/index.mjs

@@ -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`,
@@ -547,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",
@@ -756,14 +806,7 @@ 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)
-								})
+								children: renderMessageContent(message)
 							})
 						]
 					}, index), isExpanded && /* @__PURE__ */ jsx("tr", {
@@ -1300,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.11",
+  "version": "0.0.12",
   "description": "LangChain Agent UI component library for React",
   "license": "MIT",
   "files": [