@vegintech/langchain-react-agent 0.0.11 → 0.0.13

package/dist/index.d.mts

@@ -1,6 +1,7 @@
 import * as react from "react";
-import { CSSProperties, ReactNode } from "react";
+import React$1, { CSSProperties, ReactNode } from "react";
 import { Components } from "streamdown";
+import { BaseMessage } from "@langchain/core/messages";
 import { BaseNode, InsertPosition, NodeRender, SenderProps, SkillType, SlotConfigType } from "@ant-design/x/es/sender/interface.ts";
 
 //#region src/types.d.ts
@@ -88,10 +89,7 @@ interface SenderSubmitParams {
 /** onPreSend 钩子返回值：只返回消息数组 */
 interface PreSendResult {
   /** 要发送的消息数组 */
-  messages: Array<{
-    type: string;
-    content: string;
-  }>;
+  messages: BaseMessage[];
 }
 /** Sender 组件的可定制参数 */
 interface SenderCustomizationProps {
@@ -130,11 +128,27 @@ interface ToolParameterSchema {
 }
 /** 消息类型，用于区分用户和助手消息 */
 type MessageType = "human" | "ai" | "system" | "tool" | "function";
+/** 消息内容块类型 */
+type MessageContentBlock = {
+  type: "text";
+  text: string;
+} | {
+  type: "image_url";
+  image_url: {
+    url: string;
+  };
+} | {
+  type: string;
+  [key: string]: unknown;
+};
+/** 消息内容类型：字符串或内容块数组 */
+type MessageContent = string | MessageContentBlock[];
 /** 扩展的消息类型，确保包含 id 和必要的字段 */
 interface ChatMessage {
   id: string;
   type: MessageType;
-  content: string;
+  /** 消息内容，保留原始结构（字符串或内容块数组） */
+  content: MessageContent;
   name?: string;
   additional_kwargs?: Record<string, unknown>;
   /** 思考内容（来自 additional_kwargs.reasoning_content） */
@@ -255,6 +269,36 @@ interface AgentChatRef {
   /** 聚焦输入框 */
   focusInput: () => void;
 }
+/** Streamdown 安全过滤配置 */
+interface StreamdownSecurityConfig {
+  /** 允许的标签及其属性 */
+  allowedTags?: Record<string, string[]>;
+  /** 作为字面量内容处理的标签（不解析内部 Markdown） */
+  literalTagContent?: string[];
+}
+interface MessageListProps {
+  messages: ChatMessage[];
+  isLoading?: boolean;
+  className?: string;
+  /** 工具定义列表 */
+  tools?: ToolDefinition<any>[];
+  /** 工具执行记录 */
+  toolExecutions: Map<string, ToolExecutionRecord>;
+  /** Markdown 自定义组件 */
+  components?: Components;
+  /** Streamdown 安全过滤配置 */
+  securityConfig?: StreamdownSecurityConfig;
+  /** Loading 动画颜色，支持 CSS 颜色值 */
+  loadingColor?: string;
+  /** Interrupt 渲染函数，用于在消息列表中渲染中断 UI */
+  interruptRender?: () => ReactNode;
+  /** 空状态配置 */
+  emptyState?: {
+    /** 空状态标题 */title?: string; /** 空状态描述 */
+    description?: string; /** 自定义渲染 */
+    render?: () => ReactNode;
+  };
+}
 //#endregion
 //#region src/components/AgentChat.d.ts
 declare const AgentChat: react.ForwardRefExoticComponent<AgentChatProps & react.RefAttributes<AgentChatRef>>;
@@ -266,4 +310,33 @@ declare const AgentChat: react.ForwardRefExoticComponent<AgentChatProps & react.
  */
 declare const ToolCard: React.FC<ToolCardProps>;
 //#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 MessageType, type SenderCustomizationProps, type SenderSlotConfig, type SenderSubmitParams, type ToolCallInput, ToolCard, type ToolCardProps, type ToolCardStyles, type ToolDefinition, type ToolExecutionRecord, type ToolExecutionStatus, type ToolParameterSchema, type ToolRenderProps };
+//#region src/components/MessageContentRenderer.d.ts
+interface MessageContentRendererProps {
+  content: MessageContent;
+  components?: Components;
+  securityConfig?: MessageListProps["securityConfig"];
+}
+/** 消息内容渲染组件 - 支持字符串和多模态内容块 */
+declare const MessageContentRenderer: React$1.FC<MessageContentRendererProps>;
+//#endregion
+//#region src/utils/messageUtils.d.ts
+/**
+ * 创建人类消息（HumanMessage）
+ * @param content 消息内容，可以是字符串或多模态内容块数组
+ * @returns HumanMessage 实例
+ * @example
+ * // 纯文本消息
+ * createHumanMessage("你好")
+ *
+ * // 多模态消息
+ * createHumanMessage([
+ *   { type: "text", text: "看看这张图片" },
+ *   { type: "image_url", image_url: { url: "https://example.com/image.png" } }
+ * ])
+ */
+declare function createHumanMessage(content: string | {
+  type: string;
+  [key: string]: unknown;
+}[]): BaseMessage;
+//#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, createHumanMessage };

package/dist/index.mjs

@@ -3,6 +3,7 @@ import { useStream } from "@langchain/react";
 import { Actions, Bubble, Sender, Think } from "@ant-design/x";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Streamdown } from "streamdown";
+import { HumanMessage } from "@langchain/core/messages";
 //#region src/components/ChatInput.tsx
 const slotConfig = [];
 const ChatInput = forwardRef(({ onSend, onStop, isLoading = false, disabled = false, placeholder = "输入消息...", className = "", footer, skill: externalSkill, header, prefix }, ref) => {
@@ -164,6 +165,65 @@ const ReasoningContent = ({ content }) => {
 	})] });
 };
 //#endregion
+//#region src/components/MessageContentRenderer.tsx
+const CustomParagraph = (props) => {
+	const { node: _node, ...rest } = props;
+	return /* @__PURE__ */ jsx("span", { ...rest });
+};
+/** 渲染单个内容块 */
+const ContentBlock = ({ block, index, components, securityConfig }) => {
+	if (block.type === "text" && "text" in block) return /* @__PURE__ */ jsx(Streamdown, {
+		components: {
+			p: CustomParagraph,
+			...components
+		},
+		allowedTags: securityConfig?.allowedTags,
+		literalTagContent: securityConfig?.literalTagContent,
+		controls: { table: {
+			copy: false,
+			download: false,
+			fullscreen: false
+		} },
+		children: String(block.text)
+	}, index);
+	if (block.type === "image_url" && "image_url" in block) {
+		const imageUrl = block.image_url.url;
+		return /* @__PURE__ */ jsx("img", {
+			src: imageUrl,
+			alt: "Message content",
+			style: {
+				maxWidth: "100%",
+				borderRadius: "8px",
+				marginTop: "8px"
+			}
+		}, index);
+	}
+	return null;
+};
+/** 消息内容渲染组件 - 支持字符串和多模态内容块 */
+const MessageContentRenderer = ({ content, components, securityConfig }) => {
+	if (typeof content === "string") return /* @__PURE__ */ jsx(Streamdown, {
+		components: {
+			p: CustomParagraph,
+			...components
+		},
+		allowedTags: securityConfig?.allowedTags,
+		literalTagContent: securityConfig?.literalTagContent,
+		controls: { table: {
+			copy: false,
+			download: false,
+			fullscreen: false
+		} },
+		children: content
+	});
+	return /* @__PURE__ */ jsx(Fragment, { children: content.map((block, index) => /* @__PURE__ */ jsx(ContentBlock, {
+		block,
+		index,
+		components,
+		securityConfig
+	}, index)) });
+};
+//#endregion
 //#region src/components/WaveLoading.tsx
 /**
 * 波浪动画 Loading 组件
@@ -204,13 +264,10 @@ const WaveLoading = ({ color = "#1890ff" }) => {
 };
 //#endregion
 //#region src/components/MessageList.tsx
-const CustomParagraph = (props) => {
-	const { node, ...rest } = props;
-	return /* @__PURE__ */ jsx("span", { ...rest });
-};
 const renderMessageContent = (message, isLastMessage, isLoading, tools, toolExecutions, components, securityConfig) => {
 	const hasToolCalls = message.toolCalls && message.toolCalls.length > 0;
-	const shouldBlink = isLastMessage && isLoading && !message.content && message.toolCalls?.length == 0;
+	const isContentEmpty = !message.content || (typeof message.content === "string" ? message.content === "" : message.content.length === 0);
+	const shouldBlink = isLastMessage && isLoading && isContentEmpty && message.toolCalls?.length == 0;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "message-item",
 		children: [
@@ -225,21 +282,12 @@ const renderMessageContent = (message, isLastMessage, isLoading, tools, toolExec
 				blink: shouldBlink,
 				children: /* @__PURE__ */ jsx(ReasoningContent, { content: message.reasoningContent })
 			}),
-			message.content && /* @__PURE__ */ jsx("div", {
+			!isContentEmpty && /* @__PURE__ */ jsx("div", {
 				style: { marginTop: message.reasoningContent ? "8px" : "3px" },
-				children: /* @__PURE__ */ jsx(Streamdown, {
-					components: {
-						p: CustomParagraph,
-						...components
-					},
-					allowedTags: securityConfig?.allowedTags,
-					literalTagContent: securityConfig?.literalTagContent,
-					controls: { table: {
-						copy: false,
-						download: false,
-						fullscreen: false
-					} },
-					children: message.content
+				children: /* @__PURE__ */ jsx(MessageContentRenderer, {
+					content: message.content,
+					components,
+					securityConfig
 				})
 			}),
 			hasToolCalls && /* @__PURE__ */ jsx("div", {
@@ -349,7 +397,16 @@ const MessageList = ({ messages, isLoading = false, className = "", tools, toolE
 			placement: "start"
 		};
 	});
-	const allItems = processedMessages[processedMessages.length - 1]?.type === "human" && isLoading ? [...items, {
+	const hasVisibleContent = (msg) => {
+		if (!msg) return false;
+		const hasContent = msg.content && (typeof msg.content === "string" ? msg.content !== "" : msg.content.length > 0);
+		const hasReasoning = !!msg.reasoningContent;
+		const hasToolCalls = msg.toolCalls && msg.toolCalls.length > 0;
+		return hasContent || hasReasoning || hasToolCalls;
+	};
+	const lastMessage = processedMessages[processedMessages.length - 1];
+	const isLastMessageFromUser = lastMessage?.type === "human";
+	const allItems = isLoading && (isLastMessageFromUser || !hasVisibleContent(lastMessage)) ? [...items, {
 		key: "loading",
 		role: "ai",
 		content: /* @__PURE__ */ jsx(WaveLoading, { color: loadingColor }),
@@ -508,8 +565,60 @@ function DebugPanel({ messages, streamState, visible = true }) {
 		};
 	};
 	const formatContent = (content) => {
-		if (!content) return "-";
-		return content;
+		if (!content) return "";
+		if (Array.isArray(content)) return content.map((item) => typeof item === "string" ? item : JSON.stringify(item)).join("");
+		return String(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",
@@ -547,8 +656,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 +864,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", {
@@ -1008,6 +1109,23 @@ function useToolExecution({ tools, toolCalls, isLoading = false, onExecutionChan
 //#endregion
 //#region src/utils/messageUtils.ts
 /**
+* 创建人类消息（HumanMessage）
+* @param content 消息内容，可以是字符串或多模态内容块数组
+* @returns HumanMessage 实例
+* @example
+* // 纯文本消息
+* createHumanMessage("你好")
+*
+* // 多模态消息
+* createHumanMessage([
+*   { type: "text", text: "看看这张图片" },
+*   { type: "image_url", image_url: { url: "https://example.com/image.png" } }
+* ])
+*/
+function createHumanMessage(content) {
+	return new HumanMessage({ content });
+}
+/**
 * 从 BaseMessage 中提取 tool_calls
 */
 function extractToolCalls(message) {
@@ -1018,14 +1136,31 @@ function extractToolCalls(message) {
 	}));
 }
 /**
-* 从 BaseMessage 中提取文本内容
+* 从 BaseMessage 中提取原始内容
+* 保留原始结构：字符串或内容块数组
 */
 function extractContent(message) {
 	if (typeof message.content === "string") return message.content;
-	if (Array.isArray(message.content)) return message.content.map((c) => typeof c === "object" && "text" in c ? c.text : "").join("");
+	if (Array.isArray(message.content)) return message.content.map((c) => {
+		if (typeof c === "object" && c !== null) return c;
+		return {
+			type: "text",
+			text: String(c)
+		};
+	});
 	return "";
 }
 /**
+* 从 MessageContent 中提取纯文本内容（用于渲染）
+*/
+function extractTextFromContent(content) {
+	if (typeof content === "string") return content;
+	return content.map((block) => {
+		if (block.type === "text") return block.text;
+		return "";
+	}).join("");
+}
+/**
 * 将 BaseMessage 转换为 ChatMessage
 */
 function toChatMessage(message, toolResults) {
@@ -1059,11 +1194,11 @@ function processMessages(rawMessages) {
 	for (const message of rawMessages) if (message.type === "tool") {
 		const toolCallId = message.tool_call_id || message.additional_kwargs?.tool_call_id;
 		if (toolCallId) {
-			const content = extractContent(message);
+			const textContent = extractTextFromContent(extractContent(message));
 			try {
-				toolResults.set(toolCallId, JSON.parse(content));
+				toolResults.set(toolCallId, JSON.parse(textContent));
 			} catch {
-				toolResults.set(toolCallId, content);
+				toolResults.set(toolCallId, textContent);
 			}
 		}
 	}
@@ -1405,4 +1540,4 @@ const ToolCard = ({ prefix, content, icon, style, styles }) => {
 	});
 };
 //#endregion
-export { AgentChat, ToolCard };
+export { AgentChat, MessageContentRenderer, ToolCard, createHumanMessage };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vegintech/langchain-react-agent",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "description": "LangChain Agent UI component library for React",
   "license": "MIT",
   "files": [
@@ -15,6 +15,13 @@
   "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",
@@ -36,11 +43,5 @@
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
-  },
-  "scripts": {
-    "build": "vp pack",
-    "dev": "vp pack --watch",
-    "test": "vp test",
-    "check": "vp check"
   }
-}
+}