@vegintech/langchain-react-agent 0.0.16 → 0.0.17

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { Actions, Bubble, Sender, Think } from "@ant-design/x";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Streamdown } from "streamdown";
@@ -188,14 +188,45 @@ const ContentBlock = ({ block, index, components, securityConfig }) => {
 	}, 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 baseStyle = {
+				borderRadius: "8px",
+				marginTop: "8px",
+				objectFit: "contain"
+			};
+			if (!imageSize) return {
+				...baseStyle,
+				maxWidth: "100%",
+				maxHeight: "400px"
+			};
+			if (imageSize.width / imageSize.height < 1) return {
+				...baseStyle,
+				maxHeight: "400px",
+				width: "auto",
+				height: "auto"
+			};
+			else return {
+				...baseStyle,
+				maxWidth: "100%",
+				width: "auto",
+				height: "auto"
+			};
+		};
 		return /* @__PURE__ */ jsx("img", {
 			src: imageUrl,
 			alt: "Message content",
-			style: {
-				maxWidth: "100%",
-				borderRadius: "8px",
-				marginTop: "8px"
-			}
+			style: getImageStyle()
 		}, index);
 	}
 	return null;
@@ -1364,6 +1395,11 @@ const AgentChat = forwardRef(({ apiUrl, assistantId, headers, threadId: external
 		onSubmit: stream.submit
 	});
 	const [toolExecutions, setToolExecutions] = useState(/* @__PURE__ */ new Map());
+	const hasToolExecuting = useMemo(() => {
+		for (const record of toolExecutions.values()) if (record.status === "running" || record.status === "pending") return true;
+		return false;
+	}, [toolExecutions]);
+	const isLoading = stream.isLoading || hasToolExecuting;
 	const { messages, toolResults } = useMemo(() => {
 		return processMessages(stream.messages);
 	}, [stream.messages]);
@@ -1462,7 +1498,7 @@ const AgentChat = forwardRef(({ apiUrl, assistantId, headers, threadId: external
 				ref: chatInputRef,
 				onSend: handleSend,
 				onStop: handleStop,
-				isLoading: stream.isLoading,
+				isLoading,
 				className: "agent-chat-input",
 				...chatInputConfig
 			}),

package/package.json

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