@agents24/chat-react 0.5.32 → 0.5.34

package/dist/runtime/index.js

@@ -3,7 +3,7 @@ import {
   createMcpPkceProof,
   validateMcpCallbackResult,
   waitForMcpOauthComplete
-} from "../chunk-ZCNHLFRB.js";
+} from "../chunk-QG5XSK2Z.js";
 import {
   SUPPORTED_INPUT_MIME_TYPES,
   attachmentFileAccept,
@@ -18,10 +18,155 @@ import {
 // src/runtime/use-agent-chat-runtime.ts
 import {
   useAgentAttachments,
-  useAgentChat,
-  useAgentMcp
+  useAgentChat
 } from "@agents24/react";
+import * as React2 from "react";
+
+// src/runtime/use-agent-chat-hitl.ts
+import { useAgentMcp } from "@agents24/react";
 import * as React from "react";
+function detach(operation) {
+  operation.abort.abort();
+  operation.popup?.close();
+}
+function useAgentChatHitl(options) {
+  const mcp = useAgentMcp();
+  const latest = React.useRef(options);
+  latest.current = options;
+  const mounted = React.useRef(true);
+  const operations = React.useRef(/* @__PURE__ */ new Map());
+  const [states, setStates] = React.useState({});
+  React.useEffect(() => {
+    mounted.current = true;
+    const active = operations.current;
+    return () => {
+      mounted.current = false;
+      for (const operation of active.values()) detach(operation);
+      active.clear();
+    };
+  }, []);
+  React.useEffect(() => {
+    for (const [key, operation] of operations.current) {
+      if (operation.isCurrent()) continue;
+      detach(operation);
+      operations.current.delete(key);
+      setStates((current) => {
+        const next = { ...current };
+        delete next[key];
+        return next;
+      });
+    }
+  });
+  React.useEffect(() => {
+    setStates({});
+  }, [options.client, options.controller.activeThreadId]);
+  const onHitlAction = React.useCallback(async (part, response) => {
+    const captured = latest.current;
+    const { controller, client, bootstrap, selectionGeneration } = captured;
+    const key = part.interruptId || part.id;
+    if (operations.current.has(key)) return;
+    const generation = selectionGeneration.current;
+    const threadId = controller.activeThreadId;
+    const runId = controller.messages.find((message) => message.parts.includes(part))?.runId || controller.activeRunId;
+    const operation = {
+      abort: new AbortController(),
+      phase: part.hitlKind === "mcp_auth" && response.action === "connect" ? "connecting" : "resuming",
+      isCurrent() {
+        const current = latest.current;
+        return mounted.current && !operation.abort.signal.aborted && current.client === client && current.selectionGeneration.current === generation && current.controller.activeThreadId === threadId && (!current.controller.activeRunId || current.controller.activeRunId === runId) && !["cancelling", "cancelled", "failed", "completed"].includes(current.controller.runState) && (operation.phase === "resuming" || current.controller.messages.some((message) => message.runId === runId && message.parts.some((candidate) => candidate.type === "hitl" && candidate.interruptId === part.interruptId && candidate.status === "pending")));
+      }
+    };
+    if (!operation.isCurrent()) return;
+    captured.clearOperationError();
+    operations.current.set(key, operation);
+    setStates((current) => ({ ...current, [key]: { action: response.action, status: operation.phase } }));
+    try {
+      if (operation.phase === "connecting") {
+        if (!runId) throw new Error("MCP authorization is missing its paused run.");
+        if (!bootstrap) throw new Error("MCP authorization requires runtime bootstrap.");
+        if (!captured.mcpRedirectUri) throw new Error("mcpRedirectUri is required for MCP Connect.");
+        const serverId = String(part.presentation.server_id || "").trim();
+        if (!serverId) throw new Error("MCP authorization is missing its server identity.");
+        const serverEmbed = bootstrap.authentication.modes.includes("server_embed");
+        const popupNonce = browserChatCrypto().randomUUID();
+        const popup = window.open("about:blank", "agents24-mcp", "popup,width=560,height=720");
+        if (!popup) throw new Error("Allow popups to connect this MCP account.");
+        operation.popup = popup;
+        popup.document.title = "Connecting to MCP";
+        popup.document.body.textContent = "Opening secure connection\u2026";
+        const proof = await createMcpPkceProof();
+        if (!operation.isCurrent()) return;
+        const started = await mcp.startAuthorization({
+          runId,
+          serverId,
+          interruptId: part.interruptId,
+          redirectUri: captured.mcpRedirectUri,
+          popupNonce,
+          codeChallenge: proof.challenge,
+          signal: operation.abort.signal
+        });
+        if (!operation.isCurrent()) return;
+        if (!started.callback_origin) throw new Error("MCP authorization did not return a callback origin.");
+        const completionPromise = waitForMcpOauthComplete({
+          popup,
+          callbackOrigin: started.callback_origin,
+          popupNonce,
+          serverId,
+          runId,
+          interruptId: part.interruptId,
+          signal: operation.abort.signal,
+          requireConnectionId: serverEmbed || Boolean(captured.completeMcpAuthorization)
+        });
+        void completionPromise.catch(() => void 0);
+        popup.location.replace(started.authorization_url);
+        const completion = await completionPromise;
+        if (!operation.isCurrent()) return;
+        if (captured.completeMcpAuthorization) {
+          await captured.completeMcpAuthorization({ completion, codeVerifier: proof.verifier, serverId });
+        } else if (serverEmbed) {
+          validateMcpCallbackResult({ server_id: completion.serverId, connection_id: completion.connectionId || "" }, serverId);
+        } else {
+          const redeemed = await mcp.redeemCallback({
+            code: completion.code,
+            codeVerifier: proof.verifier,
+            signal: operation.abort.signal
+          });
+          if (!operation.isCurrent()) return;
+          validateMcpCallbackResult(redeemed, serverId);
+        }
+        popup.close();
+      }
+      if (!operation.isCurrent()) return;
+      operation.phase = "resuming";
+      setStates((current) => ({ ...current, [key]: { action: response.action, status: "resuming" } }));
+      await controller.resumeHitl(part, response);
+    } catch (error) {
+      if (!operation.isCurrent()) return;
+      captured.onError(error);
+      setStates((current) => ({ ...current, [key]: {
+        action: response.action,
+        status: "error",
+        error: error instanceof Error ? error.message : String(error)
+      } }));
+      throw error;
+    } finally {
+      const ownsState = operation.isCurrent();
+      detach(operation);
+      if (operations.current.get(key) === operation) {
+        operations.current.delete(key);
+        if (ownsState) setStates((current) => {
+          if (current[key]?.status === "error") return current;
+          const next = { ...current };
+          delete next[key];
+          return next;
+        });
+      }
+    }
+  }, [mcp]);
+  return { onHitlAction, getHitlActionState: (part) => states[part.interruptId || part.id] };
+}
+
+// src/runtime/use-agent-chat-runtime.ts
 function agentChatRuntimeStateFromError(error) {
   const typed = error;
   if (typed?.kind === "authentication") return "expired";
@@ -60,9 +205,6 @@ function modelsFromEffectivePolicy(policy) {
     models
   };
 }
-function hitlKey(part) {
-  return part.interruptId || part.id;
-}
 function useAgentChatRuntime(options) {
   const {
     activeThreadId,
@@ -78,43 +220,39 @@ function useAgentChatRuntime(options) {
     activeThreadId === void 0 ? { client } : { activeThreadId, client }
   );
   const attachments = useAgentAttachments();
-  const mcp = useAgentMcp();
-  const [bootstrap, setBootstrap] = React.useState(null);
-  const bootstrapRef = React.useRef(bootstrap);
+  const [bootstrap, setBootstrap] = React2.useState(null);
+  const bootstrapRef = React2.useRef(bootstrap);
   bootstrapRef.current = bootstrap;
-  const [effectivePolicy, setEffectivePolicy] = React.useState(null);
-  const [isBootstrapping, setIsBootstrapping] = React.useState(true);
-  const [bootstrapError, setBootstrapError] = React.useState(null);
-  const [localOperationError, setLocalOperationError] = React.useState(null);
-  const [selectedModelId, setSelectedModelId] = React.useState(modelId ?? null);
-  const selectedModelIdRef = React.useRef(selectedModelId);
+  const [effectivePolicy, setEffectivePolicy] = React2.useState(null);
+  const [isBootstrapping, setIsBootstrapping] = React2.useState(true);
+  const [bootstrapError, setBootstrapError] = React2.useState(null);
+  const [localOperationError, setLocalOperationError] = React2.useState(null);
+  const [selectedModelId, setSelectedModelId] = React2.useState(modelId ?? null);
+  const selectedModelIdRef = React2.useRef(selectedModelId);
   selectedModelIdRef.current = selectedModelId;
-  const [selectedAgentId, setSelectedAgentId] = React.useState(null);
-  const selectedAgentIdRef = React.useRef(null);
+  const [selectedAgentId, setSelectedAgentId] = React2.useState(null);
+  const selectedAgentIdRef = React2.useRef(null);
   selectedAgentIdRef.current = selectedAgentId;
-  const [isChangingAgent, setIsChangingAgent] = React.useState(false);
-  const agentChangePromiseRef = React.useRef(null);
-  const [isSubmitting, setIsSubmitting] = React.useState(false);
-  const submitPromiseRef = React.useRef(null);
-  const [hitlStates, setHitlStates] = React.useState({});
-  const hitlStatesRef = React.useRef(hitlStates);
-  hitlStatesRef.current = hitlStates;
-  const mountedRef = React.useRef(true);
-  const clientRef = React.useRef(client);
+  const [isChangingAgent, setIsChangingAgent] = React2.useState(false);
+  const agentChangePromiseRef = React2.useRef(null);
+  const [isSubmitting, setIsSubmitting] = React2.useState(false);
+  const submitPromiseRef = React2.useRef(null);
+  const mountedRef = React2.useRef(true);
+  const clientRef = React2.useRef(client);
   clientRef.current = client;
-  const bootstrapPromiseRef = React.useRef(null);
-  React.useEffect(() => {
+  const bootstrapPromiseRef = React2.useRef(null);
+  React2.useEffect(() => {
     mountedRef.current = true;
     return () => {
       mountedRef.current = false;
     };
   }, []);
-  const previousControlledThreadRef = React.useRef(activeThreadId);
-  const threadSelectionGenerationRef = React.useRef(0);
-  const controlledSyncTargetRef = React.useRef(null);
-  const previousControllerThreadRef = React.useRef(controller.activeThreadId);
-  const pendingThreadTransitionRef = React.useRef(null);
-  const lastReportedThreadRef = React.useRef(activeThreadId ?? controller.activeThreadId);
+  const previousControlledThreadRef = React2.useRef(activeThreadId);
+  const threadSelectionGenerationRef = React2.useRef(0);
+  const controlledSyncTargetRef = React2.useRef(null);
+  const previousControllerThreadRef = React2.useRef(controller.activeThreadId);
+  const pendingThreadTransitionRef = React2.useRef(null);
+  const lastReportedThreadRef = React2.useRef(activeThreadId ?? controller.activeThreadId);
   if (activeThreadId !== previousControlledThreadRef.current) {
     threadSelectionGenerationRef.current += 1;
     previousControlledThreadRef.current = activeThreadId;
@@ -123,12 +261,12 @@ function useAgentChatRuntime(options) {
       lastReportedThreadRef.current = activeThreadId;
     }
   }
-  const reportActiveThread = React.useCallback((threadId, reason) => {
+  const reportActiveThread = React2.useCallback((threadId, reason) => {
     if (lastReportedThreadRef.current === threadId) return;
     lastReportedThreadRef.current = threadId;
     onActiveThreadIdChange?.({ threadId, reason });
   }, [onActiveThreadIdChange]);
-  const retryBootstrap = React.useCallback(() => {
+  const retryBootstrap = React2.useCallback(() => {
     if (bootstrapPromiseRef.current?.client === client) return bootstrapPromiseRef.current.promise;
     const requestClient = client;
     const request = (async () => {
@@ -166,7 +304,7 @@ function useAgentChatRuntime(options) {
     });
     return request;
   }, [client, controller.refreshThreads, modelId]);
-  const refreshEffectivePolicy = React.useCallback(async () => {
+  const refreshEffectivePolicy = React2.useCallback(async () => {
     if (bootstrap?.features.agents) {
       const refreshed = await client.bootstrap({ agentId: selectedAgentIdRef.current || void 0 });
       if (!mountedRef.current || clientRef.current !== client) return;
@@ -183,22 +321,18 @@ function useAgentChatRuntime(options) {
       setSelectedModelId((current) => available.models.some((item) => item.id === current) ? current : available.defaultModelId);
     }
   }, [bootstrap, client, modelId]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     void retryBootstrap();
   }, [retryBootstrap]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (modelId !== void 0) setSelectedModelId(modelId);
   }, [modelId]);
-  React.useEffect(() => {
-    hitlStatesRef.current = {};
-    setHitlStates({});
-  }, [client, controller.activeThreadId]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (controlledSyncTargetRef.current?.value === null && controller.activeThreadId) {
       controller.startNewThread();
     }
   }, [activeThreadId, controller.activeThreadId, controller.startNewThread]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     const previous = previousControllerThreadRef.current;
     const current = controller.activeThreadId;
     previousControllerThreadRef.current = current;
@@ -211,11 +345,11 @@ function useAgentChatRuntime(options) {
     if (pendingTransition && current === pendingTransition.value) return;
     if (previous === null && current !== null) reportActiveThread(current, "created");
   }, [activeThreadId, controller.activeThreadId, reportActiveThread]);
-  const clearOperationError = React.useCallback(() => {
+  const clearOperationError = React2.useCallback(() => {
     setLocalOperationError(null);
     controller.clearOperationError();
   }, [controller.clearOperationError]);
-  const submit = React.useCallback((input) => {
+  const submit = React2.useCallback((input) => {
     if (submitPromiseRef.current) return submitPromiseRef.current;
     clearOperationError();
     setIsSubmitting(true);
@@ -256,86 +390,24 @@ function useAgentChatRuntime(options) {
     void request.then(clearRequest, clearRequest);
     return request;
   }, [bootstrap, clearOperationError, controller.activeThreadId, controller.submit, refreshEffectivePolicy]);
-  const completeMcp = React.useCallback(async (part) => {
-    if (!mcpRedirectUri) throw new Error("mcpRedirectUri is required for MCP Connect.");
-    const serverId = String(part.presentation.server_id || "").trim();
-    if (!serverId) throw new Error("MCP authorization is missing its server identity.");
-    const runId = controller.activeRunId || controller.messages.find((message) => message.parts.includes(part))?.runId;
-    if (!runId) throw new Error("MCP authorization is missing its paused run.");
-    const popupNonce = browserChatCrypto().randomUUID();
-    const proof = await createMcpPkceProof();
-    const popup = window.open("about:blank", "agents24-mcp", "popup,width=560,height=720");
-    if (!popup) throw new Error("Allow popups to connect this MCP account.");
-    popup.document.title = "Connecting to MCP";
-    popup.document.body.textContent = "Opening secure connection\u2026";
-    try {
-      const started = await mcp.startAuthorization({
-        runId,
-        serverId,
-        interruptId: part.interruptId,
-        redirectUri: mcpRedirectUri,
-        popupNonce,
-        codeChallenge: proof.challenge
-      });
-      if (!started.callback_origin) throw new Error("MCP authorization did not return a callback origin.");
-      popup.location.replace(started.authorization_url);
-      const completion = await waitForMcpOauthComplete({
-        popup,
-        callbackOrigin: started.callback_origin,
-        popupNonce,
-        requireConnectionId: Boolean(completeMcpAuthorization),
-        serverId
-      });
-      if (completeMcpAuthorization) {
-        await completeMcpAuthorization({ completion, codeVerifier: proof.verifier, serverId });
-      } else {
-        const redeemed = await mcp.redeemCallback({ code: completion.code, codeVerifier: proof.verifier });
-        validateMcpCallbackResult(redeemed, serverId);
-      }
-    } finally {
-      popup.close();
-    }
-  }, [completeMcpAuthorization, controller.activeRunId, controller.messages, mcp, mcpRedirectUri]);
-  const onHitlAction = React.useCallback(async (part, response) => {
-    const action = response.action;
-    const key = hitlKey(part);
-    const current = hitlStatesRef.current[key];
-    if (current?.status === "connecting" || current?.status === "resuming") return;
-    clearOperationError();
-    const pending = {
-      action,
-      status: part.hitlKind === "mcp_auth" && action === "connect" ? "connecting" : "resuming"
-    };
-    hitlStatesRef.current = { ...hitlStatesRef.current, [key]: pending };
-    setHitlStates(hitlStatesRef.current);
-    try {
-      if (part.hitlKind === "mcp_auth" && action === "connect") await completeMcp(part);
-      await controller.resumeHitl(part, response);
-      setHitlStates((states) => {
-        const next = { ...states };
-        delete next[key];
-        hitlStatesRef.current = next;
-        return next;
-      });
-    } catch (error) {
-      setLocalOperationError(error);
-      const failedState = {
-        ...hitlStatesRef.current,
-        [key]: { action, error: agentChatRuntimeErrorMessage(error), status: "error" }
-      };
-      hitlStatesRef.current = failedState;
-      setHitlStates(failedState);
-      throw error;
-    }
-  }, [clearOperationError, completeMcp, controller.resumeHitl]);
-  const newThread = React.useCallback(() => {
+  const { onHitlAction, getHitlActionState } = useAgentChatHitl({
+    client,
+    bootstrap,
+    controller,
+    selectionGeneration: threadSelectionGenerationRef,
+    completeMcpAuthorization,
+    mcpRedirectUri,
+    clearOperationError,
+    onError: setLocalOperationError
+  });
+  const newThread = React2.useCallback(() => {
     threadSelectionGenerationRef.current += 1;
     clearOperationError();
     pendingThreadTransitionRef.current = null;
     reportActiveThread(null, "new");
     controller.startNewThread();
   }, [clearOperationError, controller.startNewThread, reportActiveThread]);
-  const openThread = React.useCallback(async (threadId) => {
+  const openThread = React2.useCallback(async (threadId) => {
     const requestGeneration = ++threadSelectionGenerationRef.current;
     clearOperationError();
     pendingThreadTransitionRef.current = { reason: "opened", value: threadId };
@@ -365,7 +437,7 @@ function useAgentChatRuntime(options) {
       if (requestGeneration === threadSelectionGenerationRef.current) pendingThreadTransitionRef.current = null;
     }
   }, [clearOperationError, client, controller.openThread, reportActiveThread]);
-  const deleteThread = React.useCallback(async (threadId) => {
+  const deleteThread = React2.useCallback(async (threadId) => {
     clearOperationError();
     const wasActive = controller.activeThreadId === threadId;
     if (wasActive) threadSelectionGenerationRef.current += 1;
@@ -382,7 +454,7 @@ function useAgentChatRuntime(options) {
       }
     }
   }, [clearOperationError, controller.activeThreadId, controller.deleteThread, reportActiveThread]);
-  const changeModel = React.useCallback((nextModelId) => {
+  const changeModel = React2.useCallback((nextModelId) => {
     if (modelId === void 0) setSelectedModelId(nextModelId);
     onModelChange?.(nextModelId);
     if (controller.activeThreadId && selectedAgentId && client.threads.setRuntimeSelection) {
@@ -393,7 +465,7 @@ function useAgentChatRuntime(options) {
       }).catch(setLocalOperationError);
     }
   }, [client.threads, controller.activeThreadId, modelId, onModelChange, selectedAgentId]);
-  const resolveAttachmentContent = React.useCallback(async (attachment, signal) => {
+  const resolveAttachmentContent = React2.useCallback(async (attachment, signal) => {
     const attachmentId = typeof attachment.id === "string" ? attachment.id.trim() : "";
     if (!attachmentId) throw new Error("Attachment content identity is unavailable.");
     const access = await attachments.createContentAccess({
@@ -403,7 +475,7 @@ function useAgentChatRuntime(options) {
     });
     return { url: access.url, validUntil: access.valid_until || null };
   }, [attachments.createContentAccess]);
-  const changeAgent = React.useCallback((nextAgentId) => {
+  const changeAgent = React2.useCallback((nextAgentId) => {
     if (agentChangePromiseRef.current) return agentChangePromiseRef.current;
     if (nextAgentId === selectedAgentIdRef.current || !canChangeAgentRuntime(controller.runState, controller.activeRunId)) return Promise.resolve();
     clearOperationError();
@@ -470,7 +542,7 @@ function useAgentChatRuntime(options) {
     deleteThread,
     errorMessage: agentChatRuntimeErrorMessage(fatalError || operationError),
     fatalError,
-    getHitlActionState: (part) => hitlStates[hitlKey(part)],
+    getHitlActionState,
     isBootstrapping,
     isChangingAgent,
     isSubmitting: isSubmitting || controller.isSubmitting,
@@ -489,11 +561,11 @@ function useAgentChatRuntime(options) {
 }
 
 // src/runtime/use-delegation-tasks.ts
-import * as React2 from "react";
+import * as React3 from "react";
 function useDelegationTasks({ threadId, source, pollIntervalMs = 2e3 }) {
-  const [state, setState] = React2.useState({ threadId: null, tasks: [], error: null, loading: false });
-  const [revision, refresh] = React2.useReducer((value) => value + 1, 0);
-  React2.useEffect(() => {
+  const [state, setState] = React3.useState({ threadId: null, tasks: [], error: null, loading: false });
+  const [revision, refresh] = React3.useReducer((value) => value + 1, 0);
+  React3.useEffect(() => {
     if (!threadId) {
       setState({ threadId: null, tasks: [], error: null, loading: false });
       return;