@economic/agents-react 1.5.0 → 1.6.0

package/README.md

@@ -123,22 +123,27 @@ function Chat({ userId, authToken }: { userId: string; authToken: string }) {
 | Field             | Type                    | Description                                                                 |
 | ----------------- | ----------------------- | --------------------------------------------------------------------------- |
 | `status`          | `AgentConnectionStatus` | Connection status of the assistant, or of the active chat once one is open. |
-| `chats`           | `ChatSummary[]`         | The user's chats, most recently updated first.                              |
+| `chats`           | `ChatSummary[]`         | Started chats plus the active empty draft, most recently updated first.     |
 | `currentChatName` | `string \| undefined`   | Id of the active chat, if any.                                              |
-| `assistant`       | `AssistantActions`      | `getChats`, `createChat`, `openChat`, `deleteChat`.                         |
+| `assistant`       | `AssistantActions`      | `getChats`, `createChat`, `openChat`, `deleteChat`, `renameChat`.           |
 | `chat`            | `useChat` result        | The active chat — `chat.chat` is the message interface (see below).         |
 
 `assistant` actions:
 
-| Action               | Signature                           | Description                                      |
-| -------------------- | ----------------------------------- | ------------------------------------------------ |
-| `createChat()`       | `() => Promise<string>`             | Creates a chat, makes it active, returns its id. |
-| `openChat(chatId)`   | `(chatId: string) => void`          | Switches the active chat.                        |
-| `getChats()`         | `() => Promise<ChatSummary[]>`      | Refreshes and returns the chat list.             |
-| `deleteChat(chatId)` | `(chatId: string) => Promise<void>` | Deletes a chat and clears the active selection.  |
+| Action               | Signature                                          | Description                                      |
+| -------------------- | -------------------------------------------------- | ------------------------------------------------ |
+| `createChat()`       | `() => Promise<string>`                            | Creates a chat, makes it active, returns its id. |
+| `openChat(chatId)`   | `(chatId: string) => void`                         | Switches the active chat.                        |
+| `getChats()`         | `() => Promise<ChatSummary[]>`                     | Refreshes and returns the chat list.             |
+| `deleteChat(chatId)` | `(chatId: string) => Promise<void>`                | Deletes a chat and clears the active selection.  |
+| `renameChat(chatId)` | `(chatId: string, title: string) => Promise<void>` | Renames a registered chat.                       |
 
 > Titles and summaries are generated server-side a few seconds after the first message, so refetch with `getChats()` shortly after sending the opening message if you want the new title to appear.
 
+The active empty chat is represented locally until its first turn registers it on the server.
+
+After the active draft's first turn finishes, `useAssistant` refreshes the chat list automatically so the temporary entry is replaced by its persisted title and summary.
+
 ---
 
 ## Options
@@ -174,6 +179,7 @@ type AgentConnectionState = {
 
 type ChatSummary = {
   name: string;
+  isTemporary?: boolean; // true for the active chat before its first turn is registered
   title?: string;
   summary?: string;
   created_at: number;

package/dist/index.d.mts

@@ -10,7 +10,8 @@ type Chat = ReturnType<typeof useAgentChat>;
 type AgentConnectionStatus = "connecting" | "connected" | "disconnected" | "unauthorized" | "error";
 type AgentConnectionType = "agent" | "chat" | "assistant";
 type ChatSummary = {
-  name: string;
+  name: string; /** True when this entry only represents the active, unregistered chat facet. */
+  isTemporary?: boolean;
   title?: string;
   summary?: string;
   title_set_by_user?: number;

package/dist/index.mjs

@@ -29,10 +29,56 @@ function getCloseReason(code) {
 		1015: "tls-handshake-failure"
 	}[code] ?? "unknown";
 }
+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;
+}
 function useAgent(options) {
 	const { enabled, host, agentName, actorId, name, sub, authToken, onError, onOpen, onClose, onMessage } = options;
-	const [type, setType] = useState(void 0);
-	const [status, setStatus] = useState("connecting");
+	const target = {
+		enabled,
+		host,
+		agentName,
+		actorId,
+		name,
+		sub,
+		authToken
+	};
+	const connection = useRef({
+		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 [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,
+			type: nextType
+		});
+	};
+	const currentAgent = useRef(null);
 	const agent = useAgent$1({
 		enabled,
 		host,
@@ -43,7 +89,7 @@ function useAgent(options) {
 			onOpen?.(event);
 		},
 		onClose: (event) => {
-			if (event.code >= 3e3) setStatus("unauthorized");
+			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", {
@@ -57,18 +103,19 @@ function useAgent(options) {
 		},
 		onMessage: (event) => {
 			const msg = JSON.parse(event.data);
-			if (msg.type === "connection_status") {
+			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") setType(msg.agentType);
+			} else if (msg.type === "agent_type" && (!event.target || event.target === currentAgent.current)) setType(msg.agentType);
 			onMessage?.(event);
 		},
 		onError: (event) => {
-			setStatus("error");
+			if (!event.target || event.target === currentAgent.current) setStatus("error");
 			onError?.(event);
 		},
 		...getTokenArgs(authToken)
 	});
+	currentAgent.current = agent;
 	return {
 		agent,
 		status,
@@ -130,6 +177,16 @@ function useAssistant(options) {
 	const { toolContext, welcomeMessage, initialChatId, ...agentOptions } = options;
 	const [chatId, setChatId] = useState(initialChatId);
 	const [chats, setChats] = useState([]);
+	const [draftChat, setDraftChat] = useState(() => {
+		if (!initialChatId) return void 0;
+		const now = Date.now();
+		return {
+			name: initialChatId,
+			isTemporary: true,
+			created_at: now,
+			updated_at: now
+		};
+	});
 	const [subAgentName, setSubAgentName] = useState(void 0);
 	const { agent: assistant, status: assistantStatus } = useAgent({
 		...agentOptions,
@@ -148,8 +205,29 @@ function useAssistant(options) {
 			return c;
 		});
 		setChats(fetched);
+		setDraftChat((current) => {
+			if (current && fetched.some((chat) => chat.name === current.name)) return;
+			return current;
+		});
 		return fetched;
 	}, [assistant]);
+	const refreshChatsRef = useRef(refreshChats);
+	refreshChatsRef.current = refreshChats;
+	const draftRefreshTimeouts = useRef(/* @__PURE__ */ new Map());
+	const scheduleDraftRefresh = useCallback((draftId) => {
+		const existingTimeout = draftRefreshTimeouts.current.get(draftId);
+		if (existingTimeout) clearTimeout(existingTimeout);
+		const timeout = setTimeout(() => {
+			draftRefreshTimeouts.current.delete(draftId);
+			refreshChatsRef.current().catch(console.error);
+		}, 3e3);
+		draftRefreshTimeouts.current.set(draftId, timeout);
+	}, []);
+	useEffect(() => {
+		return () => {
+			for (const timeout of draftRefreshTimeouts.current.values()) clearTimeout(timeout);
+		};
+	}, []);
 	useEffect(() => {
 		if (assistantStatus === "connected") refreshChats().catch(console.error);
 	}, [assistantStatus, refreshChats]);
@@ -157,17 +235,26 @@ function useAssistant(options) {
 		return refreshChats();
 	};
 	const createChat = async () => {
+		if (draftChat && draftChat.name === chatId) scheduleDraftRefresh(draftChat.name);
 		const newChatId = await assistant.call("createChat");
+		const now = Date.now();
 		setChatId(newChatId);
-		await refreshChats();
+		setDraftChat({
+			name: newChatId,
+			isTemporary: true,
+			created_at: now,
+			updated_at: now
+		});
 		return newChatId;
 	};
-	const openChat = (chatId) => {
-		setChatId(chatId);
+	const openChat = (nextChatId) => {
+		if (draftChat && draftChat.name === chatId) scheduleDraftRefresh(draftChat.name);
+		setChatId(nextChatId);
 	};
 	const deleteChat = async (chatId) => {
 		await assistant.call("deleteChat", [chatId]);
 		setChatId(void 0);
+		setDraftChat((current) => current?.name === chatId ? void 0 : current);
 		await refreshChats();
 	};
 	const renameChat = async (chatId, title) => {
@@ -187,10 +274,24 @@ function useAssistant(options) {
 		toolContext,
 		welcomeMessage
 	});
+	const previousChatStatus = useRef(chat.chat.status);
+	useEffect(() => {
+		const wasRunning = previousChatStatus.current === "submitted" || previousChatStatus.current === "streaming";
+		const hasFinished = chat.chat.status === "ready" || chat.chat.status === "error";
+		previousChatStatus.current = chat.chat.status;
+		if (!draftChat || draftChat.name !== chatId || !wasRunning || !hasFinished) return;
+		scheduleDraftRefresh(draftChat.name);
+	}, [
+		chat.chat.status,
+		chatId,
+		draftChat,
+		scheduleDraftRefresh
+	]);
+	const status = isChatEnabled && chat.status !== "connecting" ? chat.status : assistantStatus;
 	return {
 		currentChatName: chatId,
-		chats,
-		status: isChatEnabled && chat.status !== "connecting" ? chat.status : assistantStatus,
+		chats: draftChat && draftChat.name === chatId && !chats.some((persistedChat) => persistedChat.name === draftChat.name) ? [draftChat, ...chats] : chats,
+		status,
 		assistant: {
 			agent: assistant,
 			getChats,

package/package.json

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