@vegintech/langchain-react-agent 0.0.16 → 0.0.18

package/dist/index.d.mts

@@ -1,41 +1,17 @@
 import * as react from "react";
-import React$1, { CSSProperties, ReactNode } from "react";
+import React$1, { ReactNode } from "react";
+import { ThoughtChainItemProps } from "@ant-design/x";
 import { Components } from "streamdown";
 import { BaseNode, InsertPosition, NodeRender, SenderProps, SkillType, SlotConfigType } from "@ant-design/x/es/sender/interface.ts";
 import { Message } from "@langchain/langgraph-sdk";
 
 //#region src/types.d.ts
-/** ToolCard 各部件的样式配置 */
-interface ToolCardStyles {
-  /** icon 容器的样式 */
-  icon?: CSSProperties;
-  /** prefix 文本的样式 */
-  prefix?: CSSProperties;
-  /** content 文本的样式 */
-  content?: CSSProperties;
-}
 /** ToolCard 组件 Props */
-interface ToolCardProps {
-  /**
-   * 前缀文本（中文，使用小字体）
-   */
-  prefix: string;
-  /**
-   * 正文内容（英文/文件名，保持默认大小）
-   */
-  content?: string;
-  /**
-   * 左侧图标
-   */
-  icon: ReactNode;
-  /**
-   * 根节点样式
-   */
-  style?: CSSProperties;
+interface ToolCardProps extends Omit<ThoughtChainItemProps, "children"> {
   /**
-   * 各部件的样式配置，可分别设置 icon、prefix、content 的样式
+   * 子组件，会作为 ThoughtChain.Item 的内容
    */
-  styles?: ToolCardStyles;
+  children?: ReactNode;
 }
 /** Interrupt 事件数据结构 */
 interface InterruptEvent {
@@ -321,4 +297,4 @@ interface MessageContentRendererProps {
 /** 消息内容渲染组件 - 支持字符串和多模态内容块 */
 declare const MessageContentRenderer: React$1.FC<MessageContentRendererProps>;
 //#endregion
-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 MessageContent, type MessageContentBlock, MessageContentRenderer, type MessageContentRendererProps, type MessageType, type SenderCustomizationProps, type SenderSlotConfig, type SenderSubmitParams, type ToolCallInput, ToolCard, type ToolCardProps, type ToolCardStyles, type ToolDefinition, type ToolExecutionRecord, type ToolExecutionStatus, type ToolParameterSchema, type ToolRenderProps };
+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 MessageContent, type MessageContentBlock, MessageContentRenderer, type MessageContentRendererProps, 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,5 +1,5 @@
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
-import { Actions, Bubble, Sender, Think } from "@ant-design/x";
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Actions, Bubble, Sender, Think, ThoughtChain } from "@ant-design/x";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Streamdown } from "streamdown";
 import { useStream } from "@langchain/langgraph-sdk/react";
@@ -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
 			}),
@@ -1481,41 +1517,15 @@ AgentChat.displayName = "AgentChat";
 * ToolCard 组件 - 用于展示工具调用结果
 * 样式：圆角矩形框，左侧 icon，label 分两行显示（prefix 小字体，content 默认字体）
 */
-const ToolCard = ({ prefix, content, icon, style, styles }) => {
-	return /* @__PURE__ */ jsxs("div", {
+const ToolCard = ({ children, style, ...rest }) => {
+	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(ThoughtChain.Item, {
+		variant: "text",
+		...rest,
 		style: {
-			display: "inline-flex",
-			alignItems: "center",
-			gap: 8,
-			borderRadius: 8,
-			fontSize: 13,
+			paddingLeft: 0,
 			...style
-		},
-		children: [/* @__PURE__ */ jsx("span", {
-			style: {
-				display: "flex",
-				alignItems: "center",
-				...styles?.icon
-			},
-			children: icon
-		}), /* @__PURE__ */ jsxs("span", {
-			style: {
-				display: "flex",
-				alignItems: "center",
-				gap: 4
-			},
-			children: [/* @__PURE__ */ jsx("span", {
-				style: {
-					fontSize: 12,
-					...styles?.prefix
-				},
-				children: prefix
-			}), /* @__PURE__ */ jsx("span", {
-				style: { ...styles?.content },
-				children: content
-			})]
-		})]
-	});
+		}
+	}), children] });
 };
 //#endregion
 export { AgentChat, MessageContentRenderer, ToolCard };

package/package.json

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