@vegintech/langchain-react-agent 0.0.1 → 0.0.3

package/README.md

@@ -1,4 +1,4 @@
-# @vegintech/agentkit
+# @vegintech/langchain-react-agent
 
 一个用于 React 的 LangChain Agent UI 组件库，基于 Ant Design X 构建，提供开箱即用的智能对话界面。
 
@@ -14,11 +14,11 @@
 ## 安装
 
 ```bash
-npm install @vegintech/agentkit
+npm install @vegintech/langchain-react-agent
 # 或
-yarn add @vegintech/agentkit
+yarn add @vegintech/langchain-react-agent
 # 或
-pnpm add @vegintech/agentkit
+pnpm add @vegintech/langchain-react-agent
 ```
 
 ### 对等依赖
@@ -32,16 +32,15 @@ npm install react react-dom @langchain/react
 ## 快速开始
 
 ```tsx
-import { AgentChat } from '@vegintech/agentkit';
-import '@vegintech/agentkit/style.css';
+import { AgentChat } from "@vegintech/langchain-react-agent";
 
 function App() {
   return (
     <AgentChat
-      apiUrl="http://localhost:8000/api"
+      apiUrl="http://localhost:2024"
       assistantId="my-assistant"
       onThreadIdChange={(threadId) => {
-        console.log('New thread:', threadId);
+        console.log("New thread:", threadId);
       }}
     />
   );
@@ -55,39 +54,36 @@ function App() {
 核心聊天组件，封装了消息列表、输入框和工具管理功能。
 
 ```tsx
-import { AgentChat } from '@vegintech/agentkit';
+import { AgentChat } from "@vegintech/langchain-react-agent";
 
 <AgentChat
   // 连接配置
   apiUrl="https://api.example.com"
   assistantId="your-assistant-id"
-  threadId={threadId}              // 可选：会话 ID
-  headers={{ Authorization: 'Bearer token' }}  // 可选：自定义请求头
-  onThreadIdChange={(id) => setThreadId(id)}  // 可选：会话 ID 变化回调
-
+  threadId={threadId} // 可选：会话 ID
+  headers={{ Authorization: "Bearer token" }} // 可选：自定义请求头
+  onThreadIdChange={(id) => setThreadId(id)} // 可选：会话 ID 变化回调
   // 工具配置
-  tools={[frontendTool, backendTool]}  // 可选：工具定义数组
-
+  tools={[frontendTool, backendTool]} // 可选：工具定义数组
   // 上下文
-  contexts={[{ description: '用户信息', value: '用户ID: 123' }]}  // 可选
-
+  contexts={[{ description: "用户信息", value: "用户ID: 123" }]} // 可选
   // 消息渲染配置
   messageConfig={{
-    components: { /* 自定义 Markdown 组件 */ },
-    allowedTags: { div: ['class'] },
+    components: {
+      /* 自定义 Markdown 组件 */
+    },
+    allowedTags: { div: ["class"] },
   }}
-
   // 输入框配置
   inputConfig={{
-    placeholder: '请输入消息...',
+    placeholder: "请输入消息...",
     onPreSend: (params) => ({
-      messages: [{ type: 'human', content: params.message }],
+      messages: [{ type: "human", content: params.message }],
     }),
   }}
-
   // 错误处理
   onError={(error) => console.error(error)}
-/>
+/>;
 ```
 
 ## 工具定义
@@ -97,27 +93,25 @@ import { AgentChat } from '@vegintech/agentkit';
 前端工具在浏览器端执行，适用于需要访问浏览器 API 或不需要后端处理的场景。
 
 ```tsx
-import type { FrontendTool } from '@vegintech/agentkit';
+import type { FrontendTool } from "@vegintech/langchain-react-agent";
 
 const alertTool: FrontendTool = {
-  type: 'frontend',
-  name: 'alert',
-  description: '显示一个警告弹窗',
+  type: "frontend",
+  name: "alert",
+  description: "显示一个警告弹窗",
   parameters: {
-    type: 'object',
+    type: "object",
     properties: {
-      message: { type: 'string', description: '警告消息内容' },
+      message: { type: "string", description: "警告消息内容" },
     },
-    required: ['message'],
+    required: ["message"],
   },
   execute: async (args) => {
     alert(args.message);
     return { success: true };
   },
   render: (props) => (
-    <div className="tool-alert">
-      {props.status === 'running' ? '显示弹窗中...' : '弹窗已显示'}
-    </div>
+    <div className="tool-alert">{props.status === "running" ? "显示弹窗中..." : "弹窗已显示"}</div>
   ),
 };
 ```
@@ -127,24 +121,24 @@ const alertTool: FrontendTool = {
 后端工具由 LangChain Agent 在后端执行，适用于需要访问数据库、API 等后端资源的场景。
 
 ```tsx
-import type { BackendTool } from '@vegintech/agentkit';
+import type { BackendTool } from "@vegintech/langchain-react-agent";
 
 const searchTool: BackendTool = {
-  type: 'backend',
-  name: 'search',
-  description: '搜索知识库',
+  type: "backend",
+  name: "search",
+  description: "搜索知识库",
   parameters: {
-    type: 'object',
+    type: "object",
     properties: {
-      query: { type: 'string', description: '搜索关键词' },
+      query: { type: "string", description: "搜索关键词" },
     },
-    required: ['query'],
+    required: ["query"],
   },
   render: (props) => (
     <div className="tool-search">
-      {props.status === 'pending' && '等待执行...'}
-      {props.status === 'running' && `搜索: ${props.arguments.query}`}
-      {props.status === 'success' && `找到 ${props.result?.count || 0} 条结果`}
+      {props.status === "pending" && "等待执行..."}
+      {props.status === "running" && `搜索: ${props.arguments.query}`}
+      {props.status === "success" && `找到 ${props.result?.count || 0} 条结果`}
     </div>
   ),
 };
@@ -154,19 +148,19 @@ const searchTool: BackendTool = {
 
 ### 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 | 否 | 错误处理回调 |
+| 属性             | 类型                                        | 必填 | 说明                      |
+| ---------------- | ------------------------------------------- | ---- | ------------------------- |
+| 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                      | 否   | 错误处理回调              |
 
 ### 类型定义
 
@@ -181,28 +175,5 @@ import type {
   ContextItem,
   MessageConfig,
   InputConfig,
-} from '@vegintech/agentkit';
-```
-
-## 开发
-
-```bash
-# 安装依赖
-vp install
-
-# 开发模式
-vp dev
-
-# 运行测试
-vp test
-
-# 构建
-vp pack
-
-# 代码检查
-vp check
-```
-
-## 许可证
-
-MIT
+} from "@vegintech/langchain-react-agent";
+```

package/dist/index.d.mts

@@ -13,7 +13,7 @@ interface ContextItem {
   value: string;
 }
 /** Sender onSubmit 插槽配置类型 */
-type SenderSlotConfig = SenderProps['slotConfig'];
+type SenderSlotConfig = SenderProps["slotConfig"];
 /** Sender onSubmit 完整参数 */
 interface SenderSubmitParams {
   message: string;
@@ -66,7 +66,7 @@ interface ToolParameterSchema {
   [key: string]: unknown;
 }
 /** 消息类型，用于区分用户和助手消息 */
-type MessageType = 'human' | 'ai' | 'system' | 'tool' | 'function';
+type MessageType = "human" | "ai" | "system" | "tool" | "function";
 /** 扩展的消息类型，确保包含 id 和必要的字段 */
 interface ChatMessage {
   id: string;
@@ -92,7 +92,7 @@ interface ToolCallInput {
   result?: unknown;
 }
 /** 工具执行状态 */
-type ToolExecutionStatus = 'pending' | 'running' | 'success' | 'error';
+type ToolExecutionStatus = "pending" | "running" | "success" | "error";
 /** 工具执行结果 */
 interface ToolExecutionRecord {
   callId: string;
@@ -121,13 +121,13 @@ interface ToolBase<TArgs = Record<string, unknown>> {
 /** 前端工具：必须有 execute */
 interface FrontendTool<TArgs = Record<string, unknown>> extends ToolBase<TArgs> {
   /** 前端工具必须有 execute */
-  type: 'frontend';
+  type: "frontend";
   execute: (args: TArgs) => Promise<unknown> | unknown;
 }
 /** 后端工具：不能有 execute */
 interface BackendTool<TArgs = Record<string, unknown>> extends ToolBase<TArgs> {
   /** 后端工具由 Agent 执行 */
-  type: 'backend';
+  type: "backend";
   execute?: never;
 }
 /** 工具定义联合类型 */
@@ -140,6 +140,8 @@ interface MessageConfig {
   allowedTags?: Record<string, string[]>;
   /** 作为字面量内容处理的标签（不解析内部 Markdown） */
   literalTagContent?: string[];
+  /** Loading 动画颜色，支持 CSS 颜色值 */
+  loadingColor?: string;
 }
 /** 输入框配置 */
 interface InputConfig extends SenderCustomizationProps {

package/dist/index.mjs

@@ -162,7 +162,7 @@ ChatInput.displayName = "ChatInput";
 //#region src/ToolCallRenderer.tsx
 /**
 * 工具调用渲染组件
-* 
+*
 * 职责：
 * 1. 渲染单个工具调用的状态和结果
 * 2. 支持自定义 render 函数
@@ -212,12 +212,12 @@ const DefaultToolCallRenderer = ({ record }) => {
 //#region src/ToolManager.tsx
 /**
 * 工具管理器组件
-* 
+*
 * 职责：
 * 1. 管理工具执行状态
 * 2. 自动执行前端工具（避免重复执行）
 * 3. 通知外部执行状态变化
-* 
+*
 * 这是一个无 UI 组件，只负责逻辑处理
 */
 const ToolManager = ({ tools, toolCalls, isLoading = false, onExecutionChange, onToolResult, completedToolResults }) => {
@@ -383,7 +383,7 @@ const ReasoningContent = ({ content }) => {
 			border: "none",
 			background: "transparent",
 			cursor: "pointer",
-			color: "#1677ff"
+			color: "#ffffff"
 		},
 		children: "查看全部"
 	})] });
@@ -546,7 +546,7 @@ const roleConfig = {
 		}
 	}
 };
-const MessageList = ({ messages, isLoading = false, className = "", tools, toolExecutions, components, securityConfig }) => {
+const MessageList = ({ messages, isLoading = false, className = "", tools, toolExecutions, components, securityConfig, loadingColor }) => {
 	const reasoningCacheRef = useRef(/* @__PURE__ */ new Map());
 	const processedMessages = useMemo(() => {
 		const cache = reasoningCacheRef.current;
@@ -593,7 +593,7 @@ const MessageList = ({ messages, isLoading = false, className = "", tools, toolE
 	const allItems = processedMessages[processedMessages.length - 1]?.type === "human" && isLoading ? [...items, {
 		key: "loading",
 		role: "ai",
-		content: /* @__PURE__ */ jsx(WaveLoading, {}),
+		content: /* @__PURE__ */ jsx(WaveLoading, { color: loadingColor }),
 		placement: "start",
 		style: { paddingBlock: 0 }
 	}] : items;
@@ -800,7 +800,8 @@ const AgentChat = forwardRef(({ apiUrl, assistantId, headers, threadId: external
 				securityConfig: {
 					allowedTags: messageConfig?.allowedTags,
 					literalTagContent: messageConfig?.literalTagContent
-				}
+				},
+				loadingColor: messageConfig?.loadingColor
 			}),
 			/* @__PURE__ */ jsx(ChatInput, {
 				ref: chatInputRef,

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@vegintech/langchain-react-agent",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "LangChain Agent UI component library for React",
   "license": "MIT",
-  "sideEffects": false,
   "files": [
     "dist"
   ],
   "type": "module",
+  "sideEffects": false,
   "exports": {
     ".": "./dist/index.mjs",
     "./package.json": "./package.json"
@@ -22,26 +22,26 @@
     "check": "vp check",
     "prepublishOnly": "vp run build"
   },
-  "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+  "dependencies": {
+    "@ant-design/x": "^2.4.0",
+    "@langchain/core": "^1.1.36",
+    "@langchain/react": "^0.2.3",
+    "streamdown": "^2.5.0"
   },
   "devDependencies": {
     "@types/node": "^25.5.0",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "@typescript/native-preview": "7.0.0-dev.20260316.1",
-    "@vitejs/plugin-react": "catalog:",
+    "@vitejs/plugin-react": "^6.0.1",
     "bumpp": "^11.0.1",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "typescript": "^5.9.3",
-    "vite-plus": "^0.1.11"
+    "vite-plus": "^0.1.14"
   },
-  "dependencies": {
-    "@ant-design/x": "catalog:",
-    "@langchain/core": "catalog:",
-    "@langchain/react": "catalog:",
-    "streamdown": "catalog:"
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   }
 }