@vegintech/langchain-react-agent 0.0.23 → 0.0.25

package/dist/index.d.mts

@@ -2,10 +2,28 @@ import * as react from "react";
 import React$1, { ReactNode } from "react";
 import { ThoughtChainItemProps } from "@ant-design/x";
 import { Components } from "streamdown";
-import * as _langchain_langgraph_sdk_react0 from "@langchain/langgraph-sdk/react";
+import { UseStreamOptions, useStream } from "@langchain/langgraph-sdk/react";
 import { BaseNode, InsertPosition, NodeRender, SenderProps, SkillType, SlotConfigType } from "@ant-design/x/es/sender/interface.ts";
 import { Message } from "@langchain/langgraph-sdk";
 
+//#region src/hooks/useAgentStream.d.ts
+type AgentStreamOptions = UseStreamOptions;
+type AgentStream = ReturnType<typeof useStream>;
+/**
+ * 包装 useStream hook，为 AgentChat 提供统一的 stream 实例创建方式
+ *
+ * @example
+ * ```tsx
+ * const stream = useAgentStream({
+ *   apiUrl: "http://localhost:2026",
+ *   assistantId: "demo",
+ * });
+ *
+ * <AgentChat stream={stream} />
+ * ```
+ */
+declare function useAgentStream(options: AgentStreamOptions): AgentStream;
+//#endregion
 //#region src/types.d.ts
 /** ToolCard 组件 Props */
 interface ToolCardProps extends Omit<ThoughtChainItemProps, "children"> {
@@ -211,8 +229,6 @@ interface MessageConfig {
   literalTagContent?: string[];
   /** Loading 动画颜色，支持 CSS 颜色值 */
   loadingColor?: string;
-  /** 空状态配置 */
-  emptyState?: EmptyStateConfig;
 }
 /** 输入框配置 */
 interface InputConfig extends SenderCustomizationProps {
@@ -222,24 +238,23 @@ interface InputConfig extends SenderCustomizationProps {
   placeholder?: string;
 }
 interface AgentChatProps {
-  apiUrl?: string;
-  assistantId: string;
-  threadId?: string;
-  headers?: Record<string, string | undefined | null>;
-  onThreadIdChange?: (threadId: string) => void;
+  /**
+   * Stream 实例
+   * 由外部通过 useAgentStream hook 创建并传入
+   */
+  stream: AgentStream;
   className?: string;
   tools?: ToolDefinition<any>[];
   contexts?: ContextItem[];
   messageConfig?: MessageConfig;
   inputConfig?: InputConfig;
-  onError?: (error: Error) => void;
   interruptConfig?: InterruptConfig;
   /** Agent 状态值 */
   agentState?: Record<string, unknown>;
-  /** Agent 状态变化回调 */
-  onAgentStateChange?: (state: Record<string, unknown>) => void;
   /** 是否显示调试面板，默认 false。仅在开发环境生效 */
   showDebug?: boolean;
+  /** 欢迎组件，当消息列表为空且非加载状态时显示 */
+  welcome?: ReactNode;
 }
 /** AgentChat 组件对外暴露的方法 */
 interface AgentChatRef {
@@ -251,19 +266,6 @@ interface AgentChatRef {
   clearInput: () => void;
   /** 聚焦输入框 */
   focusInput: () => void;
-  /**
-   * LangGraph Stream 实例
-   * 提供对底层流式连接的完整访问，包括：
-   * - messages: 当前消息列表
-   * - values: Agent 状态值
-   * - isLoading: 是否正在加载
-   * - submit: 提交消息
-   * - stop: 停止流
-   * - interrupt: 中断事件
-   * - client: LangGraph 客户端（可通过 client.threads.create() 创建新线程）
-   * 等完整功能
-   */
-  stream: ReturnType<typeof _langchain_langgraph_sdk_react0.useStream> | null;
 }
 /** Streamdown 安全过滤配置 */
 interface StreamdownSecurityConfig {
@@ -288,12 +290,6 @@ interface MessageListProps {
   loadingColor?: string;
   /** Interrupt 渲染函数，用于在消息列表中渲染中断 UI */
   interruptRender?: () => ReactNode;
-  /** 空状态配置 */
-  emptyState?: {
-    /** 空状态标题 */title?: string; /** 空状态描述 */
-    description?: string; /** 自定义渲染 */
-    render?: () => ReactNode;
-  };
 }
 //#endregion
 //#region src/components/AgentChat.d.ts
@@ -315,4 +311,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 ToolDefinition, type ToolExecutionRecord, type ToolExecutionStatus, type ToolParameterSchema, type ToolRenderProps };
+export { AgentChat, type AgentChatInputRef, type AgentChatProps, type AgentChatRef, type AgentStream, type AgentStreamOptions, 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, useAgentStream };

package/dist/index.mjs

@@ -314,7 +314,7 @@ const renderMessageContent = (message, isLastMessage, isLoading, tools, toolExec
 				children: /* @__PURE__ */ jsx(ReasoningContent, { content: message.reasoningContent })
 			}),
 			!isContentEmpty && /* @__PURE__ */ jsx("div", {
-				style: { marginTop: message.reasoningContent ? "8px" : "3px" },
+				style: { marginTop: message.type == "human" ? "0px" : "8px" },
 				children: /* @__PURE__ */ jsx(MessageContentRenderer, {
 					content: message.content,
 					components,
@@ -378,7 +378,7 @@ const roleConfig = {
 		}
 	}
 };
-const MessageList = ({ messages, isLoading = false, className = "", tools, toolExecutions, components, securityConfig, loadingColor, interruptRender, emptyState }) => {
+const MessageList = ({ messages, isLoading = false, className = "", tools, toolExecutions, components, securityConfig, loadingColor, interruptRender }) => {
 	const reasoningCacheRef = useRef(/* @__PURE__ */ new Map());
 	const processedMessages = useMemo(() => {
 		const cache = reasoningCacheRef.current;
@@ -444,19 +444,10 @@ const MessageList = ({ messages, isLoading = false, className = "", tools, toolE
 		placement: "start",
 		style: { paddingBlock: 0 }
 	}] : items;
-	if (allItems.length === 0) {
-		if (emptyState?.render) return /* @__PURE__ */ jsx("div", {
-			className: `agent-message-list empty ${className}`,
-			children: emptyState.render()
-		});
-		return /* @__PURE__ */ jsx("div", {
-			className: `agent-message-list empty ${className}`,
-			children: /* @__PURE__ */ jsxs("div", {
-				className: "agent-message-empty",
-				children: [emptyState?.title && /* @__PURE__ */ jsx("h4", { children: emptyState.title }), emptyState?.description ? /* @__PURE__ */ jsx("p", { children: emptyState.description }) : /* @__PURE__ */ jsx("p", { children: "开始对话吧" })]
-			})
-		});
-	}
+	if (allItems.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: `agent-message-list empty ${className}`,
+		children: /* @__PURE__ */ jsx("div", { className: "agent-message-empty" })
+	});
 	return /* @__PURE__ */ jsx(Bubble.List, {
 		className: `agent-message-list ${className}`,
 		items: allItems,
@@ -1358,33 +1349,15 @@ function injectStyles() {
 //#endregion
 //#region src/components/AgentChat.tsx
 injectStyles();
-const AgentChat = forwardRef(({ apiUrl, assistantId, headers, threadId, onThreadIdChange, className = "", tools, contexts, messageConfig, inputConfig, onError, interruptConfig, agentState, onAgentStateChange, showDebug }, ref) => {
+const AgentChat = forwardRef(({ stream, className = "", tools, contexts, messageConfig, inputConfig, interruptConfig, agentState, showDebug, welcome }, ref) => {
 	const { onPreSend, ...chatInputConfig } = inputConfig || {};
 	const chatInputRef = useRef(null);
-	const stream = useStream({
-		apiUrl,
-		assistantId,
-		threadId,
-		onThreadId: (newThreadId) => {
-			onThreadIdChange?.(newThreadId);
-		},
-		defaultHeaders: headers,
-		messagesKey: "messages",
-		onError: (error) => {
-			const err = error instanceof Error ? error : new Error(String(error));
-			onError?.(err);
-		}
-	});
 	useImperativeHandle(ref, () => ({
 		input: chatInputRef.current,
 		setSkill: (skill) => chatInputRef.current?.setSkill?.(skill),
 		clearInput: () => chatInputRef.current?.clear?.(),
-		focusInput: () => chatInputRef.current?.focus?.(),
-		stream
+		focusInput: () => chatInputRef.current?.focus?.()
 	}));
-	useEffect(() => {
-		if (stream.values && onAgentStateChange) onAgentStateChange(stream.values);
-	}, [stream.values, onAgentStateChange]);
 	const { renderInterrupt: interruptRender } = useInterrupt({
 		interrupt: stream.interrupt,
 		config: interruptConfig,
@@ -1475,13 +1448,16 @@ const AgentChat = forwardRef(({ apiUrl, assistantId, headers, threadId, onThread
 		onToolResultsBatch: handleToolResultsBatch,
 		completedToolResults: toolResults
 	});
+	const shouldRenderWelcome = messages.length === 0 && !isLoading && welcome;
 	return /* @__PURE__ */ jsxs("div", {
 		className: `agent-chat-container ${className}`,
 		children: [
-			/* @__PURE__ */ jsx(MessageList, {
+			shouldRenderWelcome ? /* @__PURE__ */ jsx("div", {
+				className: "agent-message-list agent-chat-welcome",
+				children: welcome
+			}) : /* @__PURE__ */ jsx(MessageList, {
 				messages,
 				isLoading: stream.isLoading,
-				className: "agent-chat-messages",
 				tools,
 				toolExecutions,
 				components: messageConfig?.components,
@@ -1490,8 +1466,7 @@ const AgentChat = forwardRef(({ apiUrl, assistantId, headers, threadId, onThread
 					literalTagContent: messageConfig?.literalTagContent
 				},
 				loadingColor: messageConfig?.loadingColor,
-				interruptRender,
-				emptyState: messageConfig?.emptyState
+				interruptRender
 			}),
 			/* @__PURE__ */ jsx(ChatInput, {
 				ref: chatInputRef,
@@ -1527,4 +1502,22 @@ const ToolCard = ({ children, style, ...rest }) => {
 	}), children] });
 };
 //#endregion
-export { AgentChat, MessageContentRenderer, ToolCard };
+//#region src/hooks/useAgentStream.ts
+/**
+* 包装 useStream hook，为 AgentChat 提供统一的 stream 实例创建方式
+*
+* @example
+* ```tsx
+* const stream = useAgentStream({
+*   apiUrl: "http://localhost:2026",
+*   assistantId: "demo",
+* });
+*
+* <AgentChat stream={stream} />
+* ```
+*/
+function useAgentStream(options) {
+	return useStream(options);
+}
+//#endregion
+export { AgentChat, MessageContentRenderer, ToolCard, useAgentStream };

package/package.json

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