@economic/agents-react 1.6.0 → 1.6.3

package/README.md

@@ -111,7 +111,12 @@ function Chat({ userId, authToken }: { userId: string; authToken: string }) {
       ))}
 
       <Composer
-        onSend={(text) => chat.chat.sendMessage({ role: "user", parts: [{ type: "text", text }] })}
+        onSend={(text) =>
+          chat.chat.sendMessage({
+            role: "user",
+            parts: [{ type: "text", text }],
+          })
+        }
       />
     </div>
   );
@@ -168,7 +173,13 @@ All hooks share these connection options (`useAssistant` omits `actorId`):
 ## Types
 
 ```ts
-type AgentConnectionStatus = "connecting" | "connected" | "disconnected" | "unauthorized" | "error";
+type AgentConnectionStatus =
+  | "connecting"
+  | "reconnecting"
+  | "connected"
+  | "disconnected"
+  | "unauthorized"
+  | "error";
 type AgentConnectionType = "agent" | "chat" | "assistant";
 
 type AgentConnectionState = {
@@ -202,5 +213,3 @@ The package also exports the handler types `AssistantActions`, `GetChatsHandler`
 ## Authentication
 
 Pass a JWT as `authToken`. It is sent both as an `Authorization: Bearer …` header and as a WebSocket subprotocol (`["bearer", token]`), matching the server-side [`getJwtAuthConfig`](../agents/README.md#authentication). When verification fails, the connection status becomes `"unauthorized"`.
-
-.

package/dist/index.d.mts

@@ -7,7 +7,7 @@ type Agent = Omit<_CfAgent, "call"> & {
   call<T = unknown>(method: string, args?: unknown[], options?: unknown): Promise<T>;
 };
 type Chat = ReturnType<typeof useAgentChat>;
-type AgentConnectionStatus = "connecting" | "connected" | "disconnected" | "unauthorized" | "error";
+type AgentConnectionStatus = "connecting" | "reconnecting" | "connected" | "disconnected" | "unauthorized" | "error";
 type AgentConnectionType = "agent" | "chat" | "assistant";
 type ChatSummary = {
   name: string; /** True when this entry only represents the active, unregistered chat facet. */

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { useAgent as useAgent$1 } from "agents/react";
 import { getToolApproval, getToolCallId, getToolPartState, useAgentChat } from "@cloudflare/ai-chat/react";
 //#region src/util.ts
@@ -11,6 +11,20 @@ function getTokenArgs(authToken) {
 }
 //#endregion
 //#region src/useAgent.ts
+function getAgentConnectionStatus(state, connectionId) {
+	return state.connectionId === connectionId ? state.status : "connecting";
+}
+function getNextAgentConnectionState(state, connectionId, status) {
+	if ((status === "disconnected" || status === "reconnecting") && state.connectionId === connectionId && state.status === "error") return state;
+	return {
+		connectionId,
+		status
+	};
+}
+function getAgentCloseStatus(code, shouldReconnect) {
+	if (code >= 3e3) return "unauthorized";
+	return shouldReconnect ? "reconnecting" : "disconnected";
+}
 function getCloseReason(code) {
 	return {
 		1e3: "normal-closure",
@@ -29,93 +43,166 @@ function getCloseReason(code) {
 		1015: "tls-handshake-failure"
 	}[code] ?? "unknown";
 }
+function getDefaultHost() {
+	return globalThis.window?.location?.host || "dummy-domain.com";
+}
+function normalizeAgentName(name) {
+	if (name === name.toUpperCase() && name !== name.toLowerCase()) return name.toLowerCase().replace(/_/g, "-");
+	const kebabified = name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+	return (kebabified.startsWith("-") ? kebabified.slice(1) : kebabified).replace(/_/g, "-").replace(/-$/, "");
+}
+function getSubPath(sub) {
+	if (!sub?.length) return void 0;
+	return sub.flatMap(({ agent, name }) => [
+		"sub",
+		normalizeAgentName(agent),
+		encodeURIComponent(name)
+	]).join("/");
+}
+function getAgentConnectionTarget(options) {
+	const effectiveName = options.actorId ? `${options.actorId}:${options.name}` : options.name;
+	return {
+		enabled: options.enabled ?? true,
+		host: options.host || getDefaultHost(),
+		agentName: normalizeAgentName(options.agentName),
+		name: effectiveName || "default",
+		subPath: getSubPath(options.sub),
+		authToken: options.authToken || void 0
+	};
+}
+function getAgentSocketTarget(agent) {
+	const options = agent.partySocketOptions;
+	if (typeof options?.host !== "string" || typeof options.party !== "string" || typeof options.room !== "string") return;
+	const protocols = options.protocols;
+	const authToken = Array.isArray(protocols) && protocols[0] === "bearer" && typeof protocols[1] === "string" ? protocols[1] : void 0;
+	return {
+		host: options.host,
+		agentName: options.party,
+		name: options.room,
+		subPath: typeof options.path === "string" && options.path ? options.path : void 0,
+		authToken
+	};
+}
+function isSameSocketTarget(a, b) {
+	return a.host === b.host && a.agentName === b.agentName && a.name === b.name && a.subPath === b.subPath && a.authToken === b.authToken;
+}
 function isSameConnectionTarget(a, b) {
-	if (a.enabled !== b.enabled || a.host !== b.host || a.agentName !== b.agentName || a.actorId !== b.actorId || a.name !== b.name || a.authToken !== b.authToken || a.sub?.length !== b.sub?.length) return false;
-	return a.sub?.every((subAgent, index) => subAgent.agent === b.sub?.[index]?.agent && subAgent.name === b.sub?.[index]?.name) ?? true;
+	return a.enabled === b.enabled && isSameSocketTarget(a, b);
+}
+function getNextAgentConnection(connection, target) {
+	return isSameConnectionTarget(connection.target, target) ? connection : {
+		id: connection.id + 1,
+		target
+	};
+}
+function isCurrentAgentSocketTarget(eventConnection, connection) {
+	if (!connection.target.enabled || !eventConnection) return false;
+	const socketTarget = getAgentSocketTarget(eventConnection);
+	return socketTarget !== void 0 && isSameSocketTarget(socketTarget, connection.target);
 }
 function useAgent(options) {
 	const { enabled, host, agentName, actorId, name, sub, authToken, onError, onOpen, onClose, onMessage } = options;
-	const target = {
-		enabled,
-		host,
-		agentName,
-		actorId,
-		name,
-		sub,
-		authToken
-	};
-	const connection = useRef({
+	const target = getAgentConnectionTarget(options);
+	const [connection, setConnection] = useState({
 		id: 0,
 		target
 	});
-	if (!isSameConnectionTarget(connection.current.target, target)) connection.current = {
-		id: connection.current.id + 1,
-		target
-	};
-	const connectionId = connection.current.id;
-	const currentConnectionId = useRef(connectionId);
-	currentConnectionId.current = connectionId;
+	const nextConnection = getNextAgentConnection(connection, target);
+	if (nextConnection !== connection) setConnection(nextConnection);
+	const connectionId = nextConnection.id;
 	const [connectionType, setConnectionType] = useState();
 	const type = connectionType?.connectionId === connectionId ? connectionType.type : void 0;
 	const [connectionStatus, setConnectionStatus] = useState({
 		connectionId,
 		status: "connecting"
 	});
-	const status = connectionStatus.connectionId === connectionId ? connectionStatus.status : "connecting";
-	const connectedConnectionId = useRef(void 0);
-	const setStatus = (nextStatus) => {
-		if (currentConnectionId.current !== connectionId) return;
-		if (nextStatus === "connected") connectedConnectionId.current = connectionId;
-		else if (nextStatus === "disconnected" && connectedConnectionId.current !== connectionId) return;
-		setConnectionStatus({
-			connectionId,
-			status: nextStatus
-		});
-	};
-	const setType = (nextType) => {
-		if (currentConnectionId.current === connectionId) setConnectionType({
-			connectionId,
+	const status = getAgentConnectionStatus(connectionStatus, connectionId);
+	const committedConnection = useRef({
+		connection: nextConnection,
+		callbacks: {
+			onOpen,
+			onClose,
+			onError,
+			onMessage
+		}
+	});
+	const setStatus = useCallback((nextStatus) => {
+		const committedConnectionId = committedConnection.current.connection.id;
+		setConnectionStatus((current) => getNextAgentConnectionState(current, committedConnectionId, nextStatus));
+	}, []);
+	const setType = useCallback((nextType) => {
+		setConnectionType({
+			connectionId: committedConnection.current.connection.id,
 			type: nextType
 		});
-	};
-	const currentAgent = useRef(null);
+	}, []);
+	const isCurrentConnectionEvent = useCallback((event) => {
+		const committed = committedConnection.current;
+		return isCurrentAgentSocketTarget(event.target, committed.connection);
+	}, []);
+	const handleOpen = useCallback((event) => {
+		if (!isCurrentConnectionEvent(event)) return;
+		committedConnection.current.callbacks.onOpen?.(event);
+	}, [isCurrentConnectionEvent]);
+	const handleClose = useCallback((event) => {
+		if (!isCurrentConnectionEvent(event)) return;
+		const shouldReconnect = event.target.shouldReconnect;
+		setStatus(getAgentCloseStatus(event.code, shouldReconnect));
+		if (event.code < 3e3 && !event.wasClean) console.warn("[useAgent] WebSocket closed unexpectedly", {
+			code: event.code,
+			reason: event.reason,
+			closeReason: getCloseReason(event.code),
+			wasClean: event.wasClean
+		});
+		committedConnection.current.callbacks.onClose?.(event);
+	}, [isCurrentConnectionEvent, setStatus]);
+	const handleMessage = useCallback((event) => {
+		if (!isCurrentConnectionEvent(event)) return;
+		const msg = JSON.parse(event.data);
+		if (msg.type === "connection_status") {
+			if (msg.status === "unauthorized") event.target.close(3e3);
+			setStatus(msg.status);
+		} else if (msg.type === "agent_type") setType(msg.agentType);
+		committedConnection.current.callbacks.onMessage?.(event);
+	}, [
+		isCurrentConnectionEvent,
+		setStatus,
+		setType
+	]);
+	const handleError = useCallback((event) => {
+		if (!isCurrentConnectionEvent(event)) return;
+		setStatus(event.target.shouldReconnect ? "reconnecting" : "error");
+		committedConnection.current.callbacks.onError?.(event);
+	}, [isCurrentConnectionEvent, setStatus]);
 	const agent = useAgent$1({
 		enabled,
 		host,
 		agent: agentName,
 		name: actorId ? `${actorId}:${name}` : name,
 		sub,
-		onOpen: (event) => {
-			onOpen?.(event);
-		},
-		onClose: (event) => {
-			if (!event.target || event.target === currentAgent.current) if (event.code >= 3e3) setStatus("unauthorized");
-			else {
-				setStatus("disconnected");
-				if (!event.wasClean) console.warn("[useAgent] WebSocket closed unexpectedly", {
-					code: event.code,
-					reason: event.reason,
-					closeReason: getCloseReason(event.code),
-					wasClean: event.wasClean
-				});
-			}
-			onClose?.(event);
-		},
-		onMessage: (event) => {
-			const msg = JSON.parse(event.data);
-			if (msg.type === "connection_status" && (!event.target || event.target === currentAgent.current)) {
-				if (msg.status === "unauthorized") agent.close(3e3);
-				setStatus(msg.status);
-			} else if (msg.type === "agent_type" && (!event.target || event.target === currentAgent.current)) setType(msg.agentType);
-			onMessage?.(event);
-		},
-		onError: (event) => {
-			if (!event.target || event.target === currentAgent.current) setStatus("error");
-			onError?.(event);
-		},
+		onOpen: handleOpen,
+		onClose: handleClose,
+		onMessage: handleMessage,
+		onError: handleError,
 		...getTokenArgs(authToken)
 	});
-	currentAgent.current = agent;
+	useLayoutEffect(() => {
+		committedConnection.current = {
+			connection: nextConnection,
+			callbacks: {
+				onOpen,
+				onClose,
+				onError,
+				onMessage
+			}
+		};
+	}, [
+		nextConnection,
+		onOpen,
+		onClose,
+		onError,
+		onMessage
+	]);
 	return {
 		agent,
 		status,
@@ -173,6 +260,11 @@ function useChat(options) {
 }
 //#endregion
 //#region src/useAssistant.ts
+function getAssistantConnectionStatus(currentChatName, isChatEnabled, assistantStatus, chatStatus) {
+	if (currentChatName === void 0) return assistantStatus;
+	if (!isChatEnabled) return assistantStatus === "connected" ? "connecting" : assistantStatus;
+	return chatStatus;
+}
 function useAssistant(options) {
 	const { toolContext, welcomeMessage, initialChatId, ...agentOptions } = options;
 	const [chatId, setChatId] = useState(initialChatId);
@@ -262,7 +354,6 @@ function useAssistant(options) {
 		await refreshChats();
 	};
 	const isChatEnabled = !!chatId && !!subAgentName;
-	const isChatReady = isChatEnabled && assistantStatus === "connected";
 	const chat = useChat({
 		...agentOptions,
 		enabled: isChatEnabled,
@@ -270,7 +361,6 @@ function useAssistant(options) {
 			agent: subAgentName,
 			name: chatId
 		}] : void 0,
-		getInitialMessages: isChatReady ? void 0 : null,
 		toolContext,
 		welcomeMessage
 	});
@@ -287,7 +377,7 @@ function useAssistant(options) {
 		draftChat,
 		scheduleDraftRefresh
 	]);
-	const status = isChatEnabled && chat.status !== "connecting" ? chat.status : assistantStatus;
+	const status = getAssistantConnectionStatus(chatId, isChatEnabled, assistantStatus, chat.status);
 	return {
 		currentChatName: chatId,
 		chats: draftChat && draftChat.name === chatId && !chats.some((persistedChat) => persistedChat.name === draftChat.name) ? [draftChat, ...chats] : chats,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@economic/agents-react",
-  "version": "1.6.0",
+  "version": "1.6.3",
   "license": "MIT",
   "files": [
     "dist"