@economic/agents-react 0.4.0 → 1.0.1

package/dist/index.d.mts

@@ -1,6 +1,5 @@
 import { useAgentChat } from "@cloudflare/ai-chat/react";
 import { useAgent } from "agents/react";
-import { UIMessage } from "ai";
 
 //#region src/index.d.ts
 type AgentConnectionStatus = "connecting" | "connected" | "disconnected" | "unauthorized";
@@ -9,18 +8,21 @@ interface UseAIChatAgentOptions {
   host: string;
   basePath?: string;
   chatId: string;
+  /** When set with `subAgentName`, used as the coordinator agent instance name instead of `chatId`. */
+  userId?: string;
+  subAgentName?: string;
   authToken?: string;
   toolContext?: Record<string, unknown>;
   connectionParams?: Record<string, string>;
   welcomeMessage?: string;
   onConnectionStatusChange?: (status: AgentConnectionStatus) => void;
-  onOpen?: (event: Event) => void;
+  onOpen?: () => void;
   onClose?: (event: CloseEvent) => void;
   onError?: (event: ErrorEvent) => void;
 }
 type UseAIChatAgentResult = {
   agent: ReturnType<typeof useAgent>;
-  chat: ReturnType<typeof useAgentChat<unknown, UIMessage>>;
+  chat: ReturnType<typeof useAgentChat>;
   connectionStatus: AgentConnectionStatus;
 };
 declare function useAIChatAgent(options: UseAIChatAgentOptions): UseAIChatAgentResult;

package/dist/index.mjs

@@ -2,8 +2,21 @@ import { useAgentChat } from "@cloudflare/ai-chat/react";
 import { useAgent } from "agents/react";
 import React from "react";
 //#region src/index.ts
+function agentNameToKebab(name) {
+	if (name === name.toUpperCase() && name !== name.toLowerCase()) return name.toLowerCase().replace(/_/g, "-");
+	let result = name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+	result = result.startsWith("-") ? result.slice(1) : result;
+	return result.replace(/_/g, "-").replace(/-$/, "");
+}
+function buildAgentHttpBaseUrl(options) {
+	const hostPart = options.host.replace(/^https?:\/\//, "").replace(/\/$/, "");
+	const protocol = hostPart.startsWith("localhost:") || hostPart.startsWith("127.0.0.1:") || hostPart.startsWith("192.168.") || hostPart.startsWith("10.") ? "http" : "https";
+	let pathname = `/agents/${agentNameToKebab(options.agent)}/${encodeURIComponent(options.name)}`;
+	for (const step of options.sub ?? []) pathname += `/sub/${agentNameToKebab(step.agent)}/${encodeURIComponent(step.name)}`;
+	return `${protocol}://${hostPart}${pathname}`;
+}
 function useAIChatAgent(options) {
-	const { agent: agentName, host, basePath, chatId, authToken, toolContext, connectionParams, welcomeMessage, onConnectionStatusChange, onOpen: onOpenProp, onClose: onCloseProp, onError: onErrorProp } = options;
+	const { agent: agentName, host, basePath, chatId, userId, subAgentName, authToken, toolContext, connectionParams, welcomeMessage, onConnectionStatusChange, onOpen: onOpenProp, onClose: onCloseProp, onError: onErrorProp } = options;
 	const [connectionStatus, setConnectionStatus] = React.useState("connecting");
 	const updateConnectionStatus = React.useCallback((status) => {
 		setConnectionStatus(status);
@@ -15,16 +28,35 @@ function useAIChatAgent(options) {
 		headers["Authorization"] = `Bearer ${authToken}`;
 		protocols.push("bearer", authToken);
 	}
+	const instanceName = userId ?? chatId;
+	const subChain = React.useMemo(() => subAgentName ? [{
+		agent: subAgentName,
+		name: chatId
+	}] : [], [subAgentName, chatId]);
+	const messagesHttpBaseUrl = React.useMemo(() => buildAgentHttpBaseUrl({
+		host,
+		agent: agentName,
+		name: instanceName,
+		sub: subChain.length > 0 ? subChain : void 0
+	}), [
+		host,
+		agentName,
+		instanceName,
+		subChain
+	]);
 	const agent = useAgent({
 		agent: agentName,
 		host,
 		basePath,
-		name: chatId,
+		name: instanceName,
+		sub: subChain.length > 0 ? subChain : void 0,
 		query: connectionParams ?? {},
 		queryDeps: Object.keys(connectionParams ?? {}),
-		onOpen: (event) => {
-			updateConnectionStatus("connected");
-			onOpenProp?.(event);
+		onStateUpdate(state) {
+			if (state.status === "connected") {
+				updateConnectionStatus("connected");
+				onOpenProp?.();
+			}
 		},
 		onClose: (event) => {
 			if (event.code >= 3e3) {
@@ -39,10 +71,27 @@ function useAIChatAgent(options) {
 		onError: onErrorProp,
 		protocols
 	});
+	const fetchInitialMessages = React.useCallback(async (_options) => {
+		const url = `${messagesHttpBaseUrl}/get-messages`;
+		const response = await fetch(url, { headers });
+		if (!response.ok) {
+			console.warn(`[useAIChatAgent] Failed to fetch initial messages: ${response.status} ${response.statusText}`);
+			return [];
+		}
+		const text = await response.text();
+		if (!text.trim()) return [];
+		try {
+			return JSON.parse(text);
+		} catch (error) {
+			console.warn("[useAIChatAgent] Failed to parse initial messages JSON:", error);
+			return [];
+		}
+	}, [headers, messagesHttpBaseUrl]);
 	const chat = useAgentChat({
 		agent,
 		body: toolContext ?? {},
-		headers
+		headers,
+		getInitialMessages: fetchInitialMessages
 	});
 	const hasSentWelcome = React.useRef(false);
 	React.useEffect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@economic/agents-react",
-  "version": "0.4.0",
+  "version": "1.0.1",
   "license": "MIT",
   "files": [
     "dist"
@@ -19,19 +19,17 @@
     "prepublishOnly": "npm run build"
   },
   "devDependencies": {
-    "@cloudflare/ai-chat": "^0.6.2",
-    "@cloudflare/workers-types": "^4.20260430.1",
+    "@cloudflare/ai-chat": "^0.7.2",
+    "@cloudflare/workers-types": "^4.20260527.1",
     "@types/node": "^25.6.0",
     "@typescript/native-preview": "7.0.0-dev.20260412.1",
-    "ai": "^6.0.175",
     "tsdown": "^0.22.0",
     "typescript": "^6.0.2",
     "vitest": "^4.1.4"
   },
   "peerDependencies": {
-    "@cloudflare/ai-chat": ">=0.6.0 <1.0.0",
-    "agents": ">=0.12.0 <1.0.0",
-    "ai": "^6.0.0",
+    "@cloudflare/ai-chat": ">=0.7.2 <1.0.0",
+    "agents": ">=0.13.3 <1.0.0",
     "react": "^19.2.5"
   }
 }