@economic/agents-react 1.4.5 → 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,9 +10,11 @@ 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;
   created_at: number;
   updated_at: number;
 };
@@ -29,6 +31,7 @@ type GetChatsHandler = () => Promise<ChatSummary[]>;
 type CreateChatHandler = () => Promise<string>;
 type OpenChatHandler = (chatId: string) => void;
 type DeleteChatHandler = (chatId: string) => Promise<void>;
+type RenameChatHandler = (chatId: string, title: string) => Promise<void>;
 //#endregion
 //#region src/useAgent.d.ts
 interface UseAgentReturn {
@@ -76,6 +79,7 @@ interface Assistant {
   createChat: CreateChatHandler;
   openChat: OpenChatHandler;
   deleteChat: DeleteChatHandler;
+  renameChat: RenameChatHandler;
 }
 interface UseAssistantReturn {
   currentChatName: string | undefined;
@@ -89,4 +93,4 @@ interface UseAssistantOptions<ToolContext extends Record<string, unknown> = Reco
 }
 declare function useAssistant<ToolContext extends Record<string, unknown>>(options: UseAssistantOptions<ToolContext>): UseAssistantReturn;
 //#endregion
-export { type Agent, type AgentConnectionStatus, type AgentConnectionType, type Assistant, type Chat, type ChatSummary, type CreateChatHandler, type DeleteChatHandler, type GetChatsHandler, type GetMessageFeedbackHandler, type MessageFeedback, type MessageFeedbackHandler, type OpenChatHandler, type UseAgentReturn, type UseAssistantReturn, type UseChatReturn, getToolApproval, getToolCallId, getToolPartState, useAgent, useAssistant, useChat };
+export { type Agent, type AgentConnectionStatus, type AgentConnectionType, type Assistant, type Chat, type ChatSummary, type CreateChatHandler, type DeleteChatHandler, type GetChatsHandler, type GetMessageFeedbackHandler, type MessageFeedback, type MessageFeedbackHandler, type OpenChatHandler, type RenameChatHandler, type UseAgentReturn, type UseAssistantReturn, type UseChatReturn, getToolApproval, getToolCallId, getToolPartState, useAgent, useAssistant, useChat };

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,30 @@ 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) => {
+		await assistant.call("renameChat", [chatId, title]);
 		await refreshChats();
 	};
 	const isChatEnabled = !!chatId && !!subAgentName;
@@ -183,16 +274,31 @@ 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,
 			createChat,
 			openChat,
-			deleteChat
+			deleteChat,
+			renameChat
 		},
 		chat
 	};

package/package.json

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