@vegintech/langchain-react-agent 0.0.1 → 0.0.2

package/README.md

@@ -32,8 +32,8 @@ npm install react react-dom @langchain/react
 ## 快速开始
 
 ```tsx
-import { AgentChat } from '@vegintech/agentkit';
-import '@vegintech/agentkit/style.css';
+import { AgentChat } from "@vegintech/agentkit";
+import "@vegintech/agentkit/style.css";
 
 function App() {
   return (
@@ -41,7 +41,7 @@ function App() {
       apiUrl="http://localhost:8000/api"
       assistantId="my-assistant"
       onThreadIdChange={(threadId) => {
-        console.log('New thread:', threadId);
+        console.log("New thread:", threadId);
       }}
     />
   );
@@ -55,39 +55,36 @@ function App() {
 核心聊天组件，封装了消息列表、输入框和工具管理功能。
 
 ```tsx
-import { AgentChat } from '@vegintech/agentkit';
+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 变化回调
-
+  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 +94,25 @@ import { AgentChat } from '@vegintech/agentkit';
 前端工具在浏览器端执行，适用于需要访问浏览器 API 或不需要后端处理的场景。
 
 ```tsx
-import type { FrontendTool } from '@vegintech/agentkit';
+import type { FrontendTool } from "@vegintech/agentkit";
 
 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 +122,24 @@ const alertTool: FrontendTool = {
 后端工具由 LangChain Agent 在后端执行，适用于需要访问数据库、API 等后端资源的场景。
 
 ```tsx
-import type { BackendTool } from '@vegintech/agentkit';
+import type { BackendTool } from "@vegintech/agentkit";
 
 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 +149,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,7 +176,7 @@ import type {
   ContextItem,
   MessageConfig,
   InputConfig,
-} from '@vegintech/agentkit';
+} from "@vegintech/agentkit";
 ```
 
 ## 开发

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;
 }
 /** 工具定义联合类型 */

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 }) => {

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@vegintech/langchain-react-agent",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "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"
   }
 }