@vegintech/langchain-react-agent 0.0.1

package/README.md

@@ -0,0 +1,208 @@
+# @vegintech/agentkit
+
+一个用于 React 的 LangChain Agent UI 组件库，基于 Ant Design X 构建，提供开箱即用的智能对话界面。
+
+## 特性
+
+- 🚀 **基于 LangChain** - 与 LangChain 生态无缝集成，支持 LangGraph 后端
+- 💬 **流式消息** - 内置流式响应支持，实时显示 AI 回复
+- 🛠️ **工具调用** - 支持前端工具和后端工具的定义与执行
+- 🎨 **Ant Design X** - 基于 Ant Design X 组件，提供优秀的视觉体验
+- 🔧 **高度可定制** - 灵活的配置选项，支持自定义消息渲染和输入框行为
+- 📱 **响应式设计** - 适配各种屏幕尺寸
+
+## 安装
+
+```bash
+npm install @vegintech/agentkit
+# 或
+yarn add @vegintech/agentkit
+# 或
+pnpm add @vegintech/agentkit
+```
+
+### 对等依赖
+
+确保你的项目已安装以下依赖：
+
+```bash
+npm install react react-dom @langchain/react
+```
+
+## 快速开始
+
+```tsx
+import { AgentChat } from '@vegintech/agentkit';
+import '@vegintech/agentkit/style.css';
+
+function App() {
+  return (
+    <AgentChat
+      apiUrl="http://localhost:8000/api"
+      assistantId="my-assistant"
+      onThreadIdChange={(threadId) => {
+        console.log('New thread:', threadId);
+      }}
+    />
+  );
+}
+```
+
+## 组件
+
+### AgentChat
+
+核心聊天组件，封装了消息列表、输入框和工具管理功能。
+
+```tsx
+import { AgentChat } from '@vegintech/agentkit';
+
+<AgentChat
+  // 连接配置
+  apiUrl="https://api.example.com"
+  assistantId="your-assistant-id"
+  threadId={threadId}              // 可选：会话 ID
+  headers={{ Authorization: 'Bearer token' }}  // 可选：自定义请求头
+  onThreadIdChange={(id) => setThreadId(id)}  // 可选：会话 ID 变化回调
+
+  // 工具配置
+  tools={[frontendTool, backendTool]}  // 可选：工具定义数组
+
+  // 上下文
+  contexts={[{ description: '用户信息', value: '用户ID: 123' }]}  // 可选
+
+  // 消息渲染配置
+  messageConfig={{
+    components: { /* 自定义 Markdown 组件 */ },
+    allowedTags: { div: ['class'] },
+  }}
+
+  // 输入框配置
+  inputConfig={{
+    placeholder: '请输入消息...',
+    onPreSend: (params) => ({
+      messages: [{ type: 'human', content: params.message }],
+    }),
+  }}
+
+  // 错误处理
+  onError={(error) => console.error(error)}
+/>
+```
+
+## 工具定义
+
+### 前端工具
+
+前端工具在浏览器端执行，适用于需要访问浏览器 API 或不需要后端处理的场景。
+
+```tsx
+import type { FrontendTool } from '@vegintech/agentkit';
+
+const alertTool: FrontendTool = {
+  type: 'frontend',
+  name: 'alert',
+  description: '显示一个警告弹窗',
+  parameters: {
+    type: 'object',
+    properties: {
+      message: { type: 'string', description: '警告消息内容' },
+    },
+    required: ['message'],
+  },
+  execute: async (args) => {
+    alert(args.message);
+    return { success: true };
+  },
+  render: (props) => (
+    <div className="tool-alert">
+      {props.status === 'running' ? '显示弹窗中...' : '弹窗已显示'}
+    </div>
+  ),
+};
+```
+
+### 后端工具
+
+后端工具由 LangChain Agent 在后端执行，适用于需要访问数据库、API 等后端资源的场景。
+
+```tsx
+import type { BackendTool } from '@vegintech/agentkit';
+
+const searchTool: BackendTool = {
+  type: 'backend',
+  name: 'search',
+  description: '搜索知识库',
+  parameters: {
+    type: 'object',
+    properties: {
+      query: { type: 'string', description: '搜索关键词' },
+    },
+    required: ['query'],
+  },
+  render: (props) => (
+    <div className="tool-search">
+      {props.status === 'pending' && '等待执行...'}
+      {props.status === 'running' && `搜索: ${props.arguments.query}`}
+      {props.status === 'success' && `找到 ${props.result?.count || 0} 条结果`}
+    </div>
+  ),
+};
+```
+
+## API 参考
+
+### AgentChat Props
+
+| 属性 | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| apiUrl | string | 是 | LangGraph API 地址 |
+| assistantId | string | 是 | 助手 ID |
+| threadId | string | 否 | 会话 ID，不传则创建新会话 |
+| headers | Record<string, string \| undefined \| null> | 否 | 自定义请求头 |
+| onThreadIdChange | (threadId: string) => void | 否 | 会话 ID 变化回调 |
+| className | string | 否 | 自定义 CSS 类名 |
+| tools | ToolDefinition[] | 否 | 工具定义数组 |
+| contexts | ContextItem[] | 否 | 上下文信息数组 |
+| messageConfig | MessageConfig | 否 | 消息渲染配置 |
+| inputConfig | InputConfig | 否 | 输入框配置 |
+| onError | (error: Error) => void | 否 | 错误处理回调 |
+
+### 类型定义
+
+```tsx
+import type {
+  AgentChatProps,
+  AgentChatRef,
+  FrontendTool,
+  BackendTool,
+  ToolDefinition,
+  ChatMessage,
+  ContextItem,
+  MessageConfig,
+  InputConfig,
+} from '@vegintech/agentkit';
+```
+
+## 开发
+
+```bash
+# 安装依赖
+vp install
+
+# 开发模式
+vp dev
+
+# 运行测试
+vp test
+
+# 构建
+vp pack
+
+# 代码检查
+vp check
+```
+
+## 许可证
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,203 @@
+import * as react from "react";
+import { ReactNode } from "react";
+import { Components } from "streamdown";
+import { BaseNode, InsertPosition, NodeRender, SenderProps, SkillType, SlotConfigType } from "@ant-design/x/es/sender/interface.ts";
+import { BaseMessage } from "@langchain/core/messages";
+
+//#region src/types.d.ts
+/** Context Item，用于传递上下文信息 */
+interface ContextItem {
+  /** 描述信息 */
+  description: string;
+  /** 上下文值 */
+  value: string;
+}
+/** Sender onSubmit 插槽配置类型 */
+type SenderSlotConfig = SenderProps['slotConfig'];
+/** Sender onSubmit 完整参数 */
+interface SenderSubmitParams {
+  message: string;
+  slotConfig?: SenderSlotConfig;
+  skillData?: SkillType;
+}
+/** onPreSend 钩子返回值：messages + 其他任意字段作为 state */
+interface PreSendResult {
+  /** 要发送的消息数组 */
+  messages: Array<{
+    type: string;
+    content: string;
+  }>;
+  /** 其他任意字段会作为额外参数一起 submit */
+  [x: string]: unknown;
+}
+/** Sender 组件的可定制参数 */
+interface SenderCustomizationProps {
+  /** 底部区域，可放置操作按钮等 */
+  footer?: BaseNode | NodeRender;
+  /** 技能配置，用于提示用户输入 */
+  skill?: SkillType;
+  /** 插槽配置 */
+  slotConfig?: SlotConfigType[];
+  /** 头部区域 */
+  header?: BaseNode | NodeRender;
+  /** 前缀区域 */
+  prefix?: BaseNode | NodeRender;
+}
+/** ChatInput 组件对外暴露的方法 */
+interface AgentChatInputRef {
+  /** 清空输入框 */
+  clear: () => void;
+  /** 聚焦输入框 */
+  focus: () => void;
+  /** 插入内容到输入框 */
+  insert: (slotConfig: SlotConfigType[], position?: InsertPosition, replaceCharacters?: string, preventScroll?: boolean) => void;
+  /** 设置技能配置 */
+  setSkill: (skill?: SkillType) => void;
+}
+/** 简化版 JSON Schema 类型 */
+interface ToolParameterSchema {
+  type: string | string[];
+  properties?: Record<string, ToolParameterSchema>;
+  required?: string[];
+  items?: ToolParameterSchema;
+  description?: string;
+  enum?: (string | number)[];
+  default?: unknown;
+  [key: string]: unknown;
+}
+/** 消息类型，用于区分用户和助手消息 */
+type MessageType = 'human' | 'ai' | 'system' | 'tool' | 'function';
+/** 扩展的消息类型，确保包含 id 和必要的字段 */
+interface ChatMessage {
+  id: string;
+  type: MessageType;
+  content: string;
+  name?: string;
+  additional_kwargs?: Record<string, unknown>;
+  /** 思考内容（来自 additional_kwargs.reasoning_content） */
+  reasoningContent?: string;
+  /** 工具调用信息（AIMessage 时可能有） */
+  toolCalls?: ToolCallInput[];
+  /** 工具调用 ID（ToolMessage 时使用） */
+  toolCallId?: string;
+  /** 工具执行结果（ToolMessage 时使用） */
+  toolCallResult?: unknown;
+}
+/** 工具调用输入（来自 LLM 的 tool_call） */
+interface ToolCallInput {
+  id: string;
+  name: string;
+  arguments: Record<string, unknown>;
+  /** 后端工具执行结果（来自 ToolMessage） */
+  result?: unknown;
+}
+/** 工具执行状态 */
+type ToolExecutionStatus = 'pending' | 'running' | 'success' | 'error';
+/** 工具执行结果 */
+interface ToolExecutionRecord {
+  callId: string;
+  name: string;
+  arguments: Record<string, unknown>;
+  status: ToolExecutionStatus;
+  result?: unknown;
+  error?: string;
+}
+/** 渲染函数的 props */
+interface ToolRenderProps<TArgs = Record<string, unknown>> {
+  name: string;
+  arguments: TArgs;
+  result?: unknown;
+  status: ToolExecutionStatus;
+  error?: string;
+}
+/** 工具基础属性 */
+interface ToolBase<TArgs = Record<string, unknown>> {
+  name: string;
+  description: string;
+  parameters: ToolParameterSchema;
+  /** 渲染函数：可选，用于在消息列表中展示工具调用过程/结果 */
+  render?: (props: ToolRenderProps<TArgs>) => ReactNode;
+}
+/** 前端工具：必须有 execute */
+interface FrontendTool<TArgs = Record<string, unknown>> extends ToolBase<TArgs> {
+  /** 前端工具必须有 execute */
+  type: 'frontend';
+  execute: (args: TArgs) => Promise<unknown> | unknown;
+}
+/** 后端工具：不能有 execute */
+interface BackendTool<TArgs = Record<string, unknown>> extends ToolBase<TArgs> {
+  /** 后端工具由 Agent 执行 */
+  type: 'backend';
+  execute?: never;
+}
+/** 工具定义联合类型 */
+type ToolDefinition<TArgs = Record<string, unknown>> = FrontendTool<TArgs> | BackendTool<TArgs>;
+/** 消息渲染配置 */
+interface MessageConfig {
+  /** Markdown 自定义组件 */
+  components?: Components;
+  /** 允许的标签及其属性 */
+  allowedTags?: Record<string, string[]>;
+  /** 作为字面量内容处理的标签（不解析内部 Markdown） */
+  literalTagContent?: string[];
+}
+/** 输入框配置 */
+interface InputConfig extends SenderCustomizationProps {
+  /** 提交前的钩子，允许修改消息内容和添加状态参数 */
+  onPreSend?: (params: SenderSubmitParams) => PreSendResult | Promise<PreSendResult>;
+  /** 输入框占位符文本 */
+  placeholder?: string;
+}
+interface AgentChatProps {
+  apiUrl?: string;
+  assistantId: string;
+  threadId?: string;
+  headers?: Record<string, string | undefined | null>;
+  onThreadIdChange?: (threadId: string) => void;
+  className?: string;
+  tools?: ToolDefinition<any>[];
+  contexts?: ContextItem[];
+  messageConfig?: MessageConfig;
+  inputConfig?: InputConfig;
+  onError?: (error: Error) => void;
+}
+/** AgentChat 组件对外暴露的方法 */
+interface AgentChatRef {
+  /** ChatInput 组件的引用 */
+  input: AgentChatInputRef | null;
+  /** 设置技能配置 */
+  setSkill: (skill?: SkillType) => void;
+  /** 清空输入框 */
+  clearInput: () => void;
+  /** 聚焦输入框 */
+  focusInput: () => void;
+}
+//#endregion
+//#region src/AgentChat.d.ts
+declare const AgentChat: react.ForwardRefExoticComponent<AgentChatProps & react.RefAttributes<AgentChatRef>>;
+//#endregion
+//#region src/messageUtils.d.ts
+/**
+ * 从 BaseMessage 中提取 tool_calls
+ */
+declare function extractToolCalls(message: BaseMessage): ToolCallInput[] | undefined;
+/**
+ * 从 BaseMessage 中提取文本内容
+ */
+declare function extractContent(message: BaseMessage): string;
+/**
+ * 将 BaseMessage 转换为 ChatMessage
+ */
+declare function toChatMessage(message: BaseMessage, toolResults: Map<string, unknown>): ChatMessage | null;
+/**
+ * 预处理消息列表：建立 tool_call_id -> result 映射，并过滤 ToolMessage
+ */
+declare function processMessages(rawMessages: BaseMessage[]): {
+  messages: ChatMessage[];
+  toolResults: Map<string, unknown>;
+};
+//#endregion
+//#region src/injectStyles.d.ts
+declare function injectStyles(): void;
+//#endregion
+export { AgentChat, type AgentChatInputRef, type AgentChatProps, type AgentChatRef, type BackendTool, type ChatMessage, type ContextItem, type FrontendTool, type InputConfig, type MessageConfig, type MessageType, type SenderCustomizationProps, type SenderSlotConfig, type SenderSubmitParams, type ToolCallInput, type ToolDefinition, type ToolExecutionRecord, type ToolExecutionStatus, type ToolParameterSchema, type ToolRenderProps, extractContent, extractToolCalls, injectStyles, processMessages, toChatMessage };

package/dist/index.mjs

@@ -0,0 +1,823 @@
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { useStream } from "@langchain/react";
+import { Bubble, Sender, Think } from "@ant-design/x";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Streamdown } from "streamdown";
+//#region src/injectStyles.ts
+const styles = `
+/* Agent Chat Container */
+.agent-chat-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: transparent;
+  overflow: hidden;
+}
+
+/* Message List */
+.agent-message-list {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.agent-message-list .empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.agent-message-list .ant-think-status-text {
+  font-size: 13px;
+}
+
+.agent-message-empty {
+  color: #8b8d91;
+  font-size: 14px;
+  text-align: center;
+}
+
+@keyframes agent-loading-bounce {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
+  }
+}
+
+/* Chat Input */
+.agent-chat-input-container {
+  padding: 12px 4px;
+  background-color: transparent;
+}
+
+/* Tool Calls Container */
+.tool-calls-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+/* Tool Call Default Style */
+.tool-call-default {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 6px 0;
+}
+
+.tool-call-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.tool-call-name {
+  font-weight: 500;
+  font-size: 13px;
+  color: #fff;
+}
+
+.tool-call-status {
+  font-size: 12px;
+  color: #8b8d91;
+  margin-left: auto;
+}
+
+.tool-call-error {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+  color: #ff4d4f;
+}
+
+.tool-call-wrapper {
+  width: 100%;
+}
+`;
+let injected = false;
+function injectStyles() {
+	if (injected || typeof document === "undefined") return;
+	const styleElement = document.createElement("style");
+	styleElement.textContent = styles;
+	document.head.appendChild(styleElement);
+	injected = true;
+}
+//#endregion
+//#region src/ChatInput.tsx
+injectStyles();
+const slotConfig = [];
+const ChatInput = forwardRef(({ onSend, onStop, isLoading = false, disabled = false, placeholder = "输入消息...", className = "", footer, skill: externalSkill, header, prefix }, ref) => {
+	const senderRef = useRef(null);
+	const [internalSkill, setInternalSkill] = useState(externalSkill);
+	useImperativeHandle(ref, () => ({
+		clear: () => senderRef.current?.clear?.(),
+		focus: () => senderRef.current?.focus?.(),
+		insert: (slots, position, replaceChars, preventScroll) => senderRef.current?.insert?.(slots, position, replaceChars, preventScroll),
+		setSkill: (skill) => setInternalSkill(skill)
+	}));
+	const handleSubmit = useCallback((message, slotConfig, skillData) => {
+		if (message.trim() && !disabled && !isLoading) {
+			onSend({
+				message,
+				slotConfig,
+				skillData
+			});
+			senderRef.current?.clear?.();
+		}
+	}, [
+		disabled,
+		isLoading,
+		onSend
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className: `agent-chat-input-container ${className}`,
+		children: /* @__PURE__ */ jsx(Sender, {
+			ref: senderRef,
+			slotConfig,
+			placeholder,
+			loading: isLoading,
+			disabled,
+			onSubmit: handleSubmit,
+			onCancel: onStop,
+			autoSize: {
+				minRows: 1,
+				maxRows: 6
+			},
+			footer,
+			skill: internalSkill,
+			header,
+			prefix
+		})
+	});
+});
+ChatInput.displayName = "ChatInput";
+//#endregion
+//#region src/ToolCallRenderer.tsx
+/**
+* 工具调用渲染组件
+* 
+* 职责：
+* 1. 渲染单个工具调用的状态和结果
+* 2. 支持自定义 render 函数
+* 3. 默认渲染：简单的工具卡片样式
+*/
+const ToolCallRenderer = ({ tool, record }) => {
+	if (tool?.render) return /* @__PURE__ */ jsx("div", {
+		className: "tool-call-wrapper",
+		children: tool.render({
+			name: record.name,
+			arguments: record.arguments,
+			result: record.result,
+			status: record.status,
+			error: record.error
+		})
+	});
+	return /* @__PURE__ */ jsx(DefaultToolCallRenderer, { record });
+};
+/**
+* 默认工具调用渲染器
+*/
+const DefaultToolCallRenderer = ({ record }) => {
+	const { name, status } = record;
+	const getStatusText = () => {
+		switch (status) {
+			case "running": return "执行中...";
+			case "success": return "执行成功";
+			case "error": return "执行失败";
+			default: return "等待执行";
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: "tool-call-default",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "tool-call-header",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "tool-call-name",
+				children: name
+			}), /* @__PURE__ */ jsx("span", {
+				className: "tool-call-status",
+				children: getStatusText()
+			})]
+		})
+	});
+};
+//#endregion
+//#region src/ToolManager.tsx
+/**
+* 工具管理器组件
+* 
+* 职责：
+* 1. 管理工具执行状态
+* 2. 自动执行前端工具（避免重复执行）
+* 3. 通知外部执行状态变化
+* 
+* 这是一个无 UI 组件，只负责逻辑处理
+*/
+const ToolManager = ({ tools, toolCalls, isLoading = false, onExecutionChange, onToolResult, completedToolResults }) => {
+	const executedCallsRef = useRef(/* @__PURE__ */ new Set());
+	const executingCallsRef = useRef(/* @__PURE__ */ new Set());
+	const pendingNotifiedRef = useRef(/* @__PURE__ */ new Set());
+	const initializedRef = useRef(false);
+	useEffect(() => {
+		if (initializedRef.current || !completedToolResults || completedToolResults.size === 0) return;
+		initializedRef.current = true;
+		completedToolResults.forEach((result, callId) => {
+			executedCallsRef.current.add(callId);
+			const call = toolCalls.find((c) => c.id === callId);
+			if (call) onExecutionChange?.({
+				callId,
+				name: call.name,
+				arguments: call.arguments,
+				status: "success",
+				result
+			});
+		});
+	}, [completedToolResults]);
+	/**
+	* 执行单个前端工具
+	*/
+	const executeFrontendTool = useCallback(async (tool, call) => {
+		const callId = call.id;
+		executingCallsRef.current.add(callId);
+		onExecutionChange?.({
+			callId,
+			name: call.name,
+			arguments: call.arguments,
+			status: "running"
+		});
+		try {
+			const result = await tool.execute(call.arguments);
+			onExecutionChange?.({
+				callId,
+				name: call.name,
+				arguments: call.arguments,
+				status: "success",
+				result
+			});
+			onToolResult?.(callId, call.name, result);
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : String(error);
+			onExecutionChange?.({
+				callId,
+				name: call.name,
+				arguments: call.arguments,
+				status: "error",
+				error: errorMessage
+			});
+		} finally {
+			executingCallsRef.current.delete(callId);
+			executedCallsRef.current.add(callId);
+		}
+	}, [onExecutionChange, onToolResult]);
+	/**
+	* 处理工具调用
+	*/
+	const processToolCalls = useCallback(async () => {
+		if (!tools) return;
+		for (const call of toolCalls) {
+			const callId = call.id;
+			if (executedCallsRef.current.has(callId) || executingCallsRef.current.has(callId)) continue;
+			const tool = tools.find((t) => t.name === call.name);
+			if (isLoading) {
+				if (!pendingNotifiedRef.current.has(callId)) {
+					pendingNotifiedRef.current.add(callId);
+					onExecutionChange?.({
+						callId,
+						name: call.name,
+						arguments: call.arguments,
+						status: "pending"
+					});
+				}
+				continue;
+			}
+			if (!tool) {
+				onExecutionChange?.({
+					callId,
+					name: call.name,
+					arguments: call.arguments,
+					status: "pending"
+				});
+				continue;
+			}
+			if (tool.type === "frontend") await executeFrontendTool(tool, call);
+			else onExecutionChange?.({
+				callId,
+				name: call.name,
+				arguments: call.arguments,
+				status: "pending"
+			});
+		}
+	}, [
+		tools,
+		toolCalls,
+		isLoading,
+		executeFrontendTool,
+		onExecutionChange
+	]);
+	useEffect(() => {
+		processToolCalls();
+	}, [useMemo(() => {
+		return toolCalls.filter((call) => !executedCallsRef.current.has(call.id) && !executingCallsRef.current.has(call.id)).map((call) => call.id).sort().join(",");
+	}, [toolCalls]), isLoading]);
+	return null;
+};
+/**
+* 辅助函数：根据工具名查找工具定义
+*/
+function findTool(tools, name) {
+	return tools?.find((t) => t.name === name);
+}
+/**
+* 辅助函数：判断工具是否为前端工具
+*/
+function isFrontendTool(tool) {
+	return tool.type === "frontend";
+}
+//#endregion
+//#region src/ReasoningContent.tsx
+const REASONING_CONTENT_MAX_HEIGHT = 58;
+const ReasoningContent = ({ content }) => {
+	const [isExpanded, setIsExpanded] = useState(false);
+	const containerRef = useRef(null);
+	const [isOverflowing, setIsOverflowing] = useState(false);
+	useEffect(() => {
+		const checkOverflow = () => {
+			if (containerRef.current) {
+				const originalMaxHeight = containerRef.current.style.maxHeight;
+				containerRef.current.style.maxHeight = "none";
+				const height = containerRef.current.scrollHeight;
+				containerRef.current.style.maxHeight = originalMaxHeight;
+				setIsOverflowing(height > REASONING_CONTENT_MAX_HEIGHT);
+			}
+		};
+		checkOverflow();
+		const resizeObserver = new ResizeObserver(checkOverflow);
+		if (containerRef.current) resizeObserver.observe(containerRef.current);
+		return () => resizeObserver.disconnect();
+	}, [content]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		style: {
+			whiteSpace: "pre-wrap",
+			lineHeight: "1.6",
+			maxHeight: isExpanded ? "none" : `${REASONING_CONTENT_MAX_HEIGHT}px`,
+			overflow: "hidden",
+			display: "flex",
+			flexDirection: "column",
+			justifyContent: "flex-end"
+		},
+		children: content.trim()
+	}), isOverflowing && !isExpanded && /* @__PURE__ */ jsx("button", {
+		onClick: () => setIsExpanded(true),
+		style: {
+			marginLeft: "-8px",
+			fontSize: "12px",
+			padding: "4px 8px",
+			border: "none",
+			background: "transparent",
+			cursor: "pointer",
+			color: "#1677ff"
+		},
+		children: "查看全部"
+	})] });
+};
+//#endregion
+//#region src/WaveLoading.tsx
+/**
+* 波浪动画 Loading 组件
+* 三个小圆点波浪状动画效果
+*/
+const WaveLoading = ({ color = "#1890ff" }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "left",
+			gap: "6px",
+			padding: "16px 0"
+		},
+		children: [[
+			0,
+			1,
+			2
+		].map((index) => /* @__PURE__ */ jsx("div", { style: {
+			width: "6px",
+			height: "6px",
+			backgroundColor: color,
+			borderRadius: "50%",
+			animation: `wave 1.2s ease-in-out ${index * .2}s infinite`
+		} }, index)), /* @__PURE__ */ jsx("style", { children: `
+        @keyframes wave {
+          0%, 40%, 100% {
+            transform: scaleY(1);
+            opacity: 0.6;
+          }
+          20% {
+            transform: scaleY(1.8);
+            opacity: 1;
+          }
+        }
+      ` })]
+	});
+};
+//#endregion
+//#region src/MessageList.tsx
+injectStyles();
+const CustomParagraph = (props) => {
+	const { node, ...rest } = props;
+	return /* @__PURE__ */ jsx("span", { ...rest });
+};
+const renderMarkdown = (content, customComponents, securityConfig) => {
+	return /* @__PURE__ */ jsx(Streamdown, {
+		components: {
+			p: CustomParagraph,
+			...customComponents
+		},
+		allowedTags: securityConfig?.allowedTags,
+		literalTagContent: securityConfig?.literalTagContent,
+		controls: { table: {
+			copy: false,
+			download: false,
+			fullscreen: false
+		} },
+		children: content ?? ""
+	});
+};
+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;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "message-item",
+		children: [
+			message.reasoningContent && /* @__PURE__ */ jsx(Think, {
+				title: "深度思考",
+				style: {
+					paddingRight: "12px",
+					fontSize: "12px"
+				},
+				styles: { content: { marginTop: "6px" } },
+				defaultExpanded: true,
+				blink: shouldBlink,
+				children: /* @__PURE__ */ jsx(ReasoningContent, { content: message.reasoningContent })
+			}),
+			message.content && /* @__PURE__ */ jsx("div", {
+				style: { marginTop: message.reasoningContent ? "8px" : 0 },
+				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
+				})
+			}),
+			hasToolCalls && /* @__PURE__ */ jsx("div", {
+				className: "tool-calls-container",
+				style: { marginTop: "8px" },
+				children: renderToolCalls(message.toolCalls, tools, toolExecutions)
+			})
+		]
+	}, message.id);
+};
+const toBubbleItem = (message, isLastMessage, isLoading, tools, toolExecutions, components, securityConfig) => {
+	const hasReasoning = !!message.reasoningContent;
+	const hasToolCalls = message.toolCalls && message.toolCalls.length > 0;
+	if (hasReasoning || hasToolCalls) return {
+		key: message.id,
+		role: message.type === "human" ? "user" : "ai",
+		content: renderMessageContent(message, isLastMessage, isLoading, tools, toolExecutions, components, securityConfig),
+		placement: message.type === "human" ? "end" : "start"
+	};
+	return {
+		key: message.id,
+		role: message.type === "human" ? "user" : "ai",
+		content: message.content,
+		contentRender: (content) => renderMarkdown(content, components, securityConfig),
+		placement: message.type === "human" ? "end" : "start"
+	};
+};
+const renderToolCalls = (toolCalls, tools, toolExecutions) => {
+	return toolCalls.map((call) => {
+		const tool = findTool(tools, call.name);
+		let record;
+		if (tool && isFrontendTool(tool)) record = toolExecutions.get(call.id) || {
+			callId: call.id,
+			name: call.name,
+			arguments: call.arguments,
+			status: "pending"
+		};
+		else record = {
+			callId: call.id,
+			name: call.name,
+			arguments: call.arguments,
+			status: call.result !== void 0 ? "success" : "pending",
+			result: call.result
+		};
+		return /* @__PURE__ */ jsx(ToolCallRenderer, {
+			tool,
+			record
+		}, call.id);
+	});
+};
+const roleConfig = {
+	user: {
+		placement: "end",
+		style: { paddingBlock: "8px" }
+	},
+	ai: {
+		placement: "start",
+		variant: "borderless",
+		style: {
+			paddingInlineEnd: 0,
+			paddingBlock: "8px"
+		}
+	}
+};
+const MessageList = ({ messages, isLoading = false, className = "", tools, toolExecutions, components, securityConfig }) => {
+	const reasoningCacheRef = useRef(/* @__PURE__ */ new Map());
+	const processedMessages = useMemo(() => {
+		const cache = reasoningCacheRef.current;
+		return messages.map((message) => {
+			if (message.type === "ai" && message.reasoningContent) cache.set(message.id, message.reasoningContent);
+			if (message.type === "ai" && !message.reasoningContent) {
+				const cachedReasoning = cache.get(message.id);
+				if (cachedReasoning) return {
+					...message,
+					reasoningContent: cachedReasoning
+				};
+			}
+			return message;
+		});
+	}, [messages]);
+	const groupedItems = useMemo(() => {
+		const groups = [];
+		for (const message of processedMessages) {
+			const currentRole = message.type === "human" ? "user" : "ai";
+			if (groups.length === 0 || groups[groups.length - 1].type !== currentRole) groups.push({
+				type: currentRole,
+				messages: [message]
+			});
+			else groups[groups.length - 1].messages.push(message);
+		}
+		return groups;
+	}, [processedMessages]);
+	const items = groupedItems.map((group, groupIndex) => {
+		const isLastGroup = groupIndex === groupedItems.length - 1;
+		if (group.type === "user" || group.messages.length === 1) {
+			const message = group.messages[0];
+			return toBubbleItem(message, isLastGroup && group.messages.length === 1, isLoading, tools, toolExecutions, components, securityConfig);
+		}
+		const mergedContent = /* @__PURE__ */ jsx(Fragment, { children: group.messages.map((message, msgIndex) => {
+			return renderMessageContent(message, isLastGroup && msgIndex === group.messages.length - 1, isLoading, tools, toolExecutions, components, securityConfig);
+		}) });
+		return {
+			key: group.messages.map((m) => m.id).join("-"),
+			role: "ai",
+			content: mergedContent,
+			placement: "start"
+		};
+	});
+	const allItems = processedMessages[processedMessages.length - 1]?.type === "human" && isLoading ? [...items, {
+		key: "loading",
+		role: "ai",
+		content: /* @__PURE__ */ jsx(WaveLoading, {}),
+		placement: "start",
+		style: { paddingBlock: 0 }
+	}] : items;
+	if (allItems.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: `agent-message-list empty ${className}`,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "agent-message-empty",
+			children: /* @__PURE__ */ jsx("p", { children: "欢迎使用AI智能剪辑助手" })
+		})
+	});
+	return /* @__PURE__ */ jsx(Bubble.List, {
+		className: `agent-message-list ${className}`,
+		items: allItems,
+		role: roleConfig,
+		autoScroll: true
+	});
+};
+//#endregion
+//#region src/messageUtils.ts
+/**
+* 从 BaseMessage 中提取 tool_calls
+*/
+function extractToolCalls(message) {
+	if ("tool_calls" in message && Array.isArray(message.tool_calls)) return message.tool_calls.map((tc) => ({
+		id: tc.id || crypto.randomUUID(),
+		name: tc.name || tc.function?.name || "",
+		arguments: typeof tc.function?.arguments === "string" ? JSON.parse(tc.function.arguments) : tc.args || {}
+	}));
+}
+/**
+* 从 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("");
+	return "";
+}
+/**
+* 将 BaseMessage 转换为 ChatMessage
+*/
+function toChatMessage(message, toolResults) {
+	const additionalKwargs = message.additional_kwargs || {};
+	if (message.type === "tool") return null;
+	if (message.type === "system") return null;
+	let msgType = "ai";
+	if (message.type === "human") msgType = "human";
+	const toolCalls = extractToolCalls(message);
+	let toolCallsWithResult = toolCalls;
+	if (toolCalls) toolCallsWithResult = toolCalls.map((tc) => ({
+		...tc,
+		result: toolResults.get(tc.id)
+	}));
+	const reasoningContent = additionalKwargs.reasoning_content;
+	return {
+		id: message.id || crypto.randomUUID(),
+		type: msgType,
+		content: extractContent(message),
+		name: message.name,
+		additional_kwargs: additionalKwargs,
+		reasoningContent,
+		toolCalls: toolCallsWithResult
+	};
+}
+/**
+* 预处理消息列表：建立 tool_call_id -> result 映射，并过滤 ToolMessage
+*/
+function processMessages(rawMessages) {
+	const toolResults = /* @__PURE__ */ new Map();
+	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);
+			try {
+				toolResults.set(toolCallId, JSON.parse(content));
+			} catch {
+				toolResults.set(toolCallId, content);
+			}
+		}
+	}
+	const messages = [];
+	for (const message of rawMessages) {
+		const chatMessage = toChatMessage(message, toolResults);
+		if (chatMessage) messages.push(chatMessage);
+	}
+	return {
+		messages,
+		toolResults
+	};
+}
+//#endregion
+//#region src/AgentChat.tsx
+injectStyles();
+const AgentChat = forwardRef(({ apiUrl, assistantId, headers, threadId: externalThreadId, onThreadIdChange, className = "", tools, contexts, messageConfig, inputConfig, onError }, ref) => {
+	const [internalThreadId, setInternalThreadId] = useState(externalThreadId);
+	useEffect(() => {
+		setInternalThreadId(externalThreadId);
+	}, [externalThreadId]);
+	const { footer, skill, slotConfig, header, prefix, onPreSend, placeholder } = inputConfig || {};
+	const chatInputRef = useRef(null);
+	useImperativeHandle(ref, () => ({
+		input: chatInputRef.current,
+		setSkill: (skill) => chatInputRef.current?.setSkill?.(skill),
+		clearInput: () => chatInputRef.current?.clear?.(),
+		focusInput: () => chatInputRef.current?.focus?.()
+	}));
+	const stream = useStream({
+		apiUrl,
+		assistantId,
+		threadId: internalThreadId,
+		onThreadId: (newThreadId) => {
+			setInternalThreadId(newThreadId);
+			onThreadIdChange?.(newThreadId);
+		},
+		defaultHeaders: headers,
+		messagesKey: "messages",
+		onError: (error) => {
+			const err = error instanceof Error ? error : new Error(String(error));
+			onError?.(err);
+		}
+	});
+	const [toolExecutions, setToolExecutions] = useState(/* @__PURE__ */ new Map());
+	const { messages, toolResults } = useMemo(() => {
+		return processMessages(stream.messages);
+	}, [stream.messages]);
+	const allToolCalls = useMemo(() => {
+		return messages.flatMap((msg) => msg.toolCalls || []);
+	}, [messages]);
+	const handleExecutionChange = useCallback((record) => {
+		setToolExecutions((prev) => {
+			const next = new Map(prev);
+			next.set(record.callId, record);
+			return next;
+		});
+	}, []);
+	const submitToStream = useCallback((submitMessages, extraState = {}) => {
+		stream.submit({
+			messages: submitMessages,
+			...extraState,
+			agentkit: {
+				actions: tools,
+				context: contexts
+			}
+		}, {
+			streamResumable: true,
+			optimisticValues(prev) {
+				const newMessages = [...prev.messages ?? [], ...submitMessages];
+				return {
+					...prev,
+					messages: newMessages
+				};
+			}
+		});
+	}, [
+		stream,
+		tools,
+		contexts
+	]);
+	const handleToolResult = useCallback((callId, name, result) => {
+		submitToStream([{
+			type: "tool",
+			content: typeof result === "string" ? result : JSON.stringify(result),
+			tool_call_id: callId,
+			name
+		}]);
+	}, [submitToStream]);
+	const handleSend = useCallback(async (params) => {
+		let messages = [];
+		let extraState = {};
+		if (onPreSend && params.message.trim()) {
+			const { messages: resultMessages, ...rest } = await onPreSend(params);
+			messages = resultMessages.filter((m) => m != null);
+			extraState = rest;
+		} else {
+			if (!params.message.trim()) return;
+			messages = [{
+				type: "human",
+				content: params.message
+			}];
+		}
+		if (messages.length === 0) return;
+		submitToStream(messages, extraState);
+	}, [onPreSend, submitToStream]);
+	const handleStop = useCallback(() => {
+		stream.stop();
+	}, [stream]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: `agent-chat-container ${className}`,
+		children: [
+			/* @__PURE__ */ jsx(ToolManager, {
+				tools,
+				toolCalls: allToolCalls,
+				isLoading: stream.isLoading,
+				onExecutionChange: handleExecutionChange,
+				onToolResult: handleToolResult,
+				completedToolResults: toolResults
+			}),
+			/* @__PURE__ */ jsx(MessageList, {
+				messages,
+				isLoading: stream.isLoading,
+				className: "agent-chat-messages",
+				tools,
+				toolExecutions,
+				components: messageConfig?.components,
+				securityConfig: {
+					allowedTags: messageConfig?.allowedTags,
+					literalTagContent: messageConfig?.literalTagContent
+				}
+			}),
+			/* @__PURE__ */ jsx(ChatInput, {
+				ref: chatInputRef,
+				onSend: handleSend,
+				onStop: handleStop,
+				isLoading: stream.isLoading,
+				className: "agent-chat-input",
+				footer,
+				skill,
+				slotConfig,
+				header,
+				prefix,
+				placeholder
+			})
+		]
+	});
+});
+AgentChat.displayName = "AgentChat";
+//#endregion
+export { AgentChat, extractContent, extractToolCalls, injectStyles, processMessages, toChatMessage };

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@vegintech/langchain-react-agent",
+  "version": "0.0.1",
+  "description": "LangChain Agent UI component library for React",
+  "license": "MIT",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "dev": "vp pack --watch",
+    "test": "vp test",
+    "check": "vp check",
+    "prepublishOnly": "vp run build"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.5.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@typescript/native-preview": "7.0.0-dev.20260316.1",
+    "@vitejs/plugin-react": "catalog:",
+    "bumpp": "^11.0.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.9.3",
+    "vite-plus": "^0.1.11"
+  },
+  "dependencies": {
+    "@ant-design/x": "catalog:",
+    "@langchain/core": "catalog:",
+    "@langchain/react": "catalog:",
+    "streamdown": "catalog:"
+  }
+}