@vegintech/langchain-react-agent 0.0.2 → 0.0.4

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,13 +32,12 @@ 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);
@@ -55,7 +54,7 @@ function App() {
 核心聊天组件，封装了消息列表、输入框和工具管理功能。
 
 ```tsx
-import { AgentChat } from "@vegintech/agentkit";
+import { AgentChat } from "@vegintech/langchain-react-agent";
 
 <AgentChat
   // 连接配置
@@ -94,7 +93,7 @@ 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",
@@ -122,7 +121,7 @@ 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",
@@ -176,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

@@ -1,8 +1,7 @@
 import * as react from "react";
-import { ReactNode } from "react";
+import React, { 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，用于传递上下文信息 */
@@ -140,6 +139,8 @@ interface MessageConfig {
   allowedTags?: Record<string, string[]>;
   /** 作为字面量内容处理的标签（不解析内部 Markdown） */
   literalTagContent?: string[];
+  /** Loading 动画颜色，支持 CSS 颜色值 */
+  loadingColor?: string;
 }
 /** 输入框配置 */
 interface InputConfig extends SenderCustomizationProps {
@@ -176,28 +177,25 @@ interface AgentChatRef {
 //#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;
+//#region src/ToolCard.d.ts
+interface ToolCardProps {
+  /**
+   * 前缀文本（中文，使用小字体）
+   */
+  prefix: string;
+  /**
+   * 正文内容（英文/文件名，保持默认大小）
+   */
+  content?: string;
+  /**
+   * 左侧图标
+   */
+  icon: React.ReactNode;
+}
 /**
- * 预处理消息列表：建立 tool_call_id -> result 映射，并过滤 ToolMessage
+ * ToolCard 组件 - 用于展示工具调用结果
+ * 样式：圆角矩形框，左侧 icon，label 分两行显示（prefix 小字体，content 默认字体）
  */
-declare function processMessages(rawMessages: BaseMessage[]): {
-  messages: ChatMessage[];
-  toolResults: Map<string, unknown>;
-};
-//#endregion
-//#region src/injectStyles.d.ts
-declare function injectStyles(): void;
+declare const ToolCard: React.FC<ToolCardProps>;
 //#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 };
+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, ToolCard, type ToolCardProps, type ToolDefinition, type ToolExecutionRecord, type ToolExecutionStatus, type ToolParameterSchema, type ToolRenderProps };

package/dist/index.mjs

@@ -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,
@@ -820,4 +821,39 @@ const AgentChat = forwardRef(({ apiUrl, assistantId, headers, threadId: external
 });
 AgentChat.displayName = "AgentChat";
 //#endregion
-export { AgentChat, extractContent, extractToolCalls, injectStyles, processMessages, toChatMessage };
+//#region src/ToolCard.tsx
+/**
+* ToolCard 组件 - 用于展示工具调用结果
+* 样式：圆角矩形框，左侧 icon，label 分两行显示（prefix 小字体，content 默认字体）
+*/
+const ToolCard = ({ prefix, content, icon }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: 8,
+			borderRadius: 8,
+			fontSize: 13
+		},
+		children: [/* @__PURE__ */ jsx("span", {
+			style: {
+				display: "flex",
+				alignItems: "center"
+			},
+			children: icon
+		}), /* @__PURE__ */ jsxs("span", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 4,
+				color: "rgba(0, 0, 0, 0.45)"
+			},
+			children: [/* @__PURE__ */ jsx("span", {
+				style: { fontSize: 12 },
+				children: prefix
+			}), /* @__PURE__ */ jsx("span", { children: content })]
+		})]
+	});
+};
+//#endregion
+export { AgentChat, ToolCard };

package/package.json

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