@agents24/chat-react 0.3.1 → 0.4.0

package/dist/templates/index.js

@@ -1,9 +1,15 @@
 import {
-  LatestThreadScroller
-} from "../chunk-FFO6KEB4.js";
+  LatestThreadScroller,
+  validateMcpCallbackResult,
+  waitForMcpOauthComplete
+} from "../chunk-LI67M74F.js";
 import {
+  AgentChatComposer,
+  AgentChatDefaultActions,
+  AgentChatMessage,
   cn
-} from "../chunk-UU7OXHL3.js";
+} from "../chunk-NLEOWTZG.js";
+import "../chunk-CHAU7FNW.js";
 
 // src/templates/agent-chat-shell.tsx
 import * as React from "react";
@@ -120,21 +126,21 @@ function AgentChatShell({
   const bottomPadding = hideComposer ? 32 : (composerOverlayHeight ?? measuredOverlayHeight) + 72;
   const isEmptyState = messages.length === 0;
   if (isEmptyState) {
-    return /* @__PURE__ */ jsx("div", { className: cn("relative flex h-full min-h-0 w-full flex-col overflow-visible px-4", className), dir, children: renderEmptyState ? renderEmptyState({ composer: hideComposer ? void 0 : composer, title: emptyTitle }) : /* @__PURE__ */ jsx("div", { className: "relative z-10 flex h-full flex-1 flex-col justify-center p-0 pt-13", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-center pb-34 text-center animate-in fade-in slide-in-from-bottom-4 duration-500", children: [
+    return /* @__PURE__ */ jsx("div", { className: cn("a24-shell a24-shell--empty relative flex h-full min-h-0 w-full flex-col overflow-visible px-4", className), dir, children: renderEmptyState ? renderEmptyState({ composer: hideComposer ? void 0 : composer, title: emptyTitle }) : /* @__PURE__ */ jsx("div", { className: "a24-shell__empty relative z-10 flex h-full flex-1 flex-col justify-center p-0 pt-13", children: /* @__PURE__ */ jsxs("div", { className: "a24-shell__empty-content flex w-full flex-col items-center pb-34 text-center animate-in fade-in slide-in-from-bottom-4 duration-500", children: [
       /* @__PURE__ */ jsx(
         "p",
         {
           className: cn(
-            "pb-6 text-3xl font-semibold transition-transform duration-200",
+            "a24-shell__empty-title pb-6 text-3xl font-semibold transition-transform duration-200",
             emptyInputAttachmentCount > 0 && "-translate-y-12"
           ),
           children: emptyTitle
         }
       ),
-      !hideComposer && composer ? /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-3xl px-4", children: composer }) : null
+      !hideComposer && composer ? /* @__PURE__ */ jsx("div", { className: "a24-shell__empty-composer mx-auto w-full max-w-3xl px-4", children: composer }) : null
     ] }) }) });
   }
-  return /* @__PURE__ */ jsx("div", { className: cn("relative flex h-full min-h-0 w-full flex-col", className), dir, children: /* @__PURE__ */ jsxs(LatestThreadScroller.Provider, { children: [
+  return /* @__PURE__ */ jsx("div", { className: cn("a24-shell relative flex h-full min-h-0 w-full flex-col", className), dir, children: /* @__PURE__ */ jsxs(LatestThreadScroller.Provider, { children: [
     /* @__PURE__ */ jsxs(LatestThreadScroller.Root, { children: [
       /* @__PURE__ */ jsx(
         LatestThreadScroller.Viewport,
@@ -149,7 +155,7 @@ function AgentChatShell({
             {
               ref: contentRef,
               className: cn(
-                "mx-auto flex min-h-full w-full max-w-3xl flex-col gap-8 px-4 pt-12",
+                "a24-shell__content mx-auto flex min-h-full w-full max-w-3xl flex-col gap-8 px-4 pt-12",
                 contentClassName
               ),
               style: { paddingBottom: bottomPadding },
@@ -183,22 +189,534 @@ function AgentChatShell({
       {
         ref: overlayRef,
         className: cn(
-          "pointer-events-none absolute inset-x-0 bottom-0 z-20 overflow-visible px-4 pb-4 pt-10",
+          "a24-shell__composer-overlay pointer-events-none absolute inset-x-0 bottom-0 z-20 overflow-visible px-4 pb-4 pt-10",
           composerOverlayClassName
         ),
         style: {
           background: "linear-gradient(to bottom, transparent 0%, color-mix(in oklch, var(--chat-background, var(--background)) 85%, transparent) 45%, var(--chat-background, var(--background)) 65%, var(--chat-background, var(--background)) 100%)"
         },
         children: [
-          /* @__PURE__ */ jsx("div", { className: "pointer-events-auto absolute inset-x-0 top-0 flex -translate-y-full justify-center pb-3", children: /* @__PURE__ */ jsx(LatestThreadScroller.Button, {}) }),
-          /* @__PURE__ */ jsx("div", { className: "pointer-events-auto mx-auto w-full max-w-3xl px-4", children: composer })
+          /* @__PURE__ */ jsx("div", { className: "a24-shell__scroll-button pointer-events-auto absolute inset-x-0 top-0 flex -translate-y-full justify-center pb-3", children: /* @__PURE__ */ jsx(LatestThreadScroller.Button, {}) }),
+          /* @__PURE__ */ jsx("div", { className: "a24-shell__composer-inner pointer-events-auto mx-auto w-full max-w-3xl px-4", children: composer })
         ]
       }
     ) : null
   ] }) });
 }
+
+// src/templates/agent-chat-layout.tsx
+import * as React2 from "react";
+import {
+  ChevronDown,
+  Menu,
+  MessageSquare,
+  MoreHorizontal,
+  Plus,
+  RefreshCw,
+  Search,
+  Trash2,
+  Wifi,
+  WifiOff,
+  X
+} from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var stateCopy = {
+  loading: { title: "Loading chat", detail: "Your conversation is being prepared." },
+  reconnecting: { title: "Reconnecting", detail: "Messages are safe. Trying the connection again." },
+  offline: { title: "You\u2019re offline", detail: "Reconnect to continue this conversation." },
+  denied: { title: "Access denied", detail: "This deployment does not allow this request." },
+  quota: { title: "Usage limit reached", detail: "Try again after the deployment limit resets." },
+  failed: { title: "Something went wrong", detail: "The request could not be completed safely." },
+  expired: { title: "Session expired", detail: "Reconnect to start a new secure session." }
+};
+function AgentChatStatePanel({
+  errorMessage,
+  onRetry,
+  state
+}) {
+  const copy = stateCopy[state];
+  const retryable = state === "offline" || state === "failed" || state === "expired";
+  return /* @__PURE__ */ jsxs2("div", { className: "a24-state", "data-state": state, role: state === "failed" ? "alert" : "status", children: [
+    /* @__PURE__ */ jsx2("div", { className: "a24-state__icon", "aria-hidden": "true", children: state === "offline" ? /* @__PURE__ */ jsx2(WifiOff, {}) : state === "reconnecting" ? /* @__PURE__ */ jsx2(RefreshCw, {}) : /* @__PURE__ */ jsx2(MessageSquare, {}) }),
+    /* @__PURE__ */ jsx2("h2", { children: copy.title }),
+    /* @__PURE__ */ jsx2("p", { children: errorMessage || copy.detail }),
+    retryable && onRetry ? /* @__PURE__ */ jsx2("button", { className: "a24-button a24-button--primary", onClick: () => void onRetry(), type: "button", children: "Try again" }) : null
+  ] });
+}
+function connectionLabel(state) {
+  if (state === "connected") return "Connected";
+  if (state === "connecting") return "Connecting";
+  if (state === "reconnecting") return "Reconnecting";
+  if (state === "expired") return "Session expired";
+  return "Offline";
+}
+function AgentAvatar({ agent }) {
+  return agent.avatarUrl ? /* @__PURE__ */ jsx2("img", { alt: "", className: "a24-avatar", height: 36, src: agent.avatarUrl, width: 36 }) : /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", className: "a24-avatar a24-avatar--fallback", children: agent.name.trim().slice(0, 1).toUpperCase() || "A" });
+}
+function ThreadNavigation({
+  activeThreadId,
+  close,
+  hasMoreThreads,
+  isDeletingThread,
+  isLoadingThreads,
+  onDeleteThread,
+  onLoadMoreThreads,
+  onNewThread,
+  onOpenThread,
+  slots,
+  threads
+}) {
+  const [query, setQuery] = React2.useState("");
+  const normalizedQuery = query.trim().toLocaleLowerCase();
+  const visibleThreads = normalizedQuery ? threads.filter((thread) => String(thread.title || "New chat").toLocaleLowerCase().includes(normalizedQuery)) : threads;
+  return /* @__PURE__ */ jsxs2("div", { className: "a24-sidebar__inner", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "a24-sidebar__top", children: [
+      /* @__PURE__ */ jsxs2(
+        "button",
+        {
+          "aria-label": "New chat",
+          className: "a24-button a24-button--primary a24-sidebar__new",
+          onClick: () => {
+            onNewThread();
+            close();
+          },
+          type: "button",
+          children: [
+            /* @__PURE__ */ jsx2(Plus, { "aria-hidden": "true" }),
+            "New chat"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx2("button", { "aria-label": "Close conversations", className: "a24-icon-button a24-sidebar__mobile-close", onClick: close, type: "button", children: /* @__PURE__ */ jsx2(X, { "aria-hidden": "true" }) })
+    ] }),
+    /* @__PURE__ */ jsxs2("label", { className: "a24-search", children: [
+      /* @__PURE__ */ jsx2(Search, { "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx2("span", { className: "a24-sr-only", children: "Search conversations" }),
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          autoComplete: "off",
+          name: "conversation-search",
+          onChange: (event) => setQuery(event.target.value),
+          placeholder: "Search conversations\u2026",
+          type: "search",
+          value: query
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs2("nav", { "aria-label": "Conversations", className: "a24-thread-list", children: [
+      isLoadingThreads && threads.length === 0 ? /* @__PURE__ */ jsx2("p", { className: "a24-sidebar__hint", role: "status", children: "Loading conversations\u2026" }) : null,
+      !isLoadingThreads && visibleThreads.length === 0 ? /* @__PURE__ */ jsx2("p", { className: "a24-sidebar__hint", children: "No conversations yet." }) : null,
+      visibleThreads.map((thread) => {
+        const selected = thread.id === activeThreadId;
+        return /* @__PURE__ */ jsxs2("div", { className: "a24-thread", "data-selected": selected || void 0, children: [
+          /* @__PURE__ */ jsxs2(
+            "button",
+            {
+              "aria-current": selected ? "page" : void 0,
+              className: "a24-thread__open",
+              onClick: () => {
+                void onOpenThread(thread.id);
+                close();
+              },
+              type: "button",
+              children: [
+                /* @__PURE__ */ jsx2("span", { className: "a24-thread__title", children: thread.title || "New chat" }),
+                thread.status ? /* @__PURE__ */ jsx2("span", { className: "a24-thread__status", children: thread.status }) : null
+              ]
+            }
+          ),
+          slots?.threadActions ? slots.threadActions(thread) : onDeleteThread ? /* @__PURE__ */ jsx2(
+            "button",
+            {
+              "aria-label": `Delete ${thread.title || "conversation"}`,
+              className: "a24-icon-button a24-thread__delete",
+              disabled: isDeletingThread,
+              onClick: () => void onDeleteThread(thread.id),
+              type: "button",
+              children: /* @__PURE__ */ jsx2(Trash2, { "aria-hidden": "true" })
+            }
+          ) : null
+        ] }, thread.id);
+      })
+    ] }),
+    hasMoreThreads && onLoadMoreThreads ? /* @__PURE__ */ jsxs2("button", { className: "a24-button a24-button--quiet a24-sidebar__more", onClick: () => void onLoadMoreThreads(), type: "button", children: [
+      /* @__PURE__ */ jsx2(MoreHorizontal, { "aria-hidden": "true" }),
+      "Load more"
+    ] }) : null
+  ] });
+}
+function AgentChatLayout({
+  activeThreadId,
+  agent,
+  allowAttachments = true,
+  className,
+  connectionState = "connected",
+  dir = "ltr",
+  errorMessage,
+  hasMoreThreads,
+  isDeletingThread,
+  isLoadingOlder,
+  isLoadingThreads,
+  isRunning = false,
+  messages,
+  modelId,
+  models = [],
+  onDeleteThread,
+  onHitlAction,
+  onLoadMoreThreads,
+  onLoadOlder,
+  onModelChange,
+  onNewThread,
+  onOpenThread,
+  onRetryConnection,
+  onStop,
+  onSubmit,
+  placeholder,
+  slots,
+  state = "ready",
+  streamingMessageId,
+  threads,
+  title
+}) {
+  const [sidebarOpen, setSidebarOpen] = React2.useState(false);
+  const menuButtonRef = React2.useRef(null);
+  const closeSidebar = React2.useCallback(() => {
+    setSidebarOpen(false);
+    menuButtonRef.current?.focus();
+  }, []);
+  React2.useEffect(() => {
+    if (!sidebarOpen) return void 0;
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      closeSidebar();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [closeSidebar, sidebarOpen]);
+  const shellState = state === "streaming" || state === "paused" ? "ready" : state;
+  const showState = shellState !== "ready";
+  const liveLabel = state === "streaming" ? "Agent is responding" : state === "paused" ? "Waiting for your response" : connectionLabel(connectionState);
+  const composer = /* @__PURE__ */ jsx2(
+    AgentChatComposer,
+    {
+      allowAttachments,
+      disabled: state === "denied" || state === "quota" || state === "expired" || state === "offline",
+      inputToolbarContent: models.length > 0 ? /* @__PURE__ */ jsxs2("label", { className: "a24-model-select", children: [
+        /* @__PURE__ */ jsx2("span", { className: "a24-sr-only", children: "Model" }),
+        /* @__PURE__ */ jsx2("select", { "aria-label": "Model", onChange: (event) => onModelChange?.(event.target.value), value: modelId || models[0]?.id, children: models.map((model) => /* @__PURE__ */ jsx2("option", { value: model.id, children: model.label }, model.id)) }),
+        /* @__PURE__ */ jsx2(ChevronDown, { "aria-hidden": "true" })
+      ] }) : void 0,
+      isRunning,
+      onStop,
+      onSubmit,
+      placeholder
+    }
+  );
+  return /* @__PURE__ */ jsxs2("section", { className: cn("a24-chat", className), "data-agents24-chat-layout": "", dir, children: [
+    /* @__PURE__ */ jsx2("a", { className: "a24-skip-link", href: "#agents24-chat-main", children: "Skip to messages" }),
+    /* @__PURE__ */ jsx2("nav", { "aria-label": "Chat navigation", className: "a24-sidebar", "data-open": sidebarOpen || void 0, children: /* @__PURE__ */ jsx2(
+      ThreadNavigation,
+      {
+        activeThreadId,
+        close: closeSidebar,
+        hasMoreThreads,
+        isDeletingThread,
+        isLoadingThreads,
+        onDeleteThread,
+        onLoadMoreThreads,
+        onNewThread,
+        onOpenThread,
+        slots,
+        threads
+      }
+    ) }),
+    sidebarOpen ? /* @__PURE__ */ jsx2("button", { "aria-label": "Close conversations", className: "a24-sidebar-backdrop", onClick: closeSidebar, type: "button" }) : null,
+    /* @__PURE__ */ jsxs2("div", { className: "a24-chat__body", children: [
+      /* @__PURE__ */ jsxs2("header", { className: "a24-header", role: "banner", children: [
+        /* @__PURE__ */ jsx2("button", { "aria-label": "Open conversations", className: "a24-icon-button a24-header__menu", onClick: () => setSidebarOpen(true), ref: menuButtonRef, type: "button", children: /* @__PURE__ */ jsx2(Menu, { "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsx2(AgentAvatar, { agent }),
+        /* @__PURE__ */ jsxs2("div", { className: "a24-header__identity", children: [
+          /* @__PURE__ */ jsx2("h1", { children: title || agent.name }),
+          /* @__PURE__ */ jsxs2("div", { className: "a24-connection", "data-state": connectionState, children: [
+            connectionState === "offline" || connectionState === "expired" ? /* @__PURE__ */ jsx2(WifiOff, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx2(Wifi, { "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx2("span", { children: connectionLabel(connectionState) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx2("div", { className: "a24-header__actions", children: slots?.headerActions })
+      ] }),
+      /* @__PURE__ */ jsx2("main", { "aria-busy": state === "loading" || state === "reconnecting", className: "a24-main", id: "agents24-chat-main", children: showState ? /* @__PURE__ */ jsx2(AgentChatStatePanel, { errorMessage, onRetry: onRetryConnection, state: shellState }) : /* @__PURE__ */ jsx2(
+        AgentChatShell,
+        {
+          composer,
+          dir,
+          isLoadingOlder,
+          messages,
+          onLoadOlder,
+          renderEmptyState: slots?.empty ? () => slots.empty : void 0,
+          renderMessage: (message) => /* @__PURE__ */ jsx2(
+            AgentChatMessage,
+            {
+              actions: slots?.messageActions?.(message),
+              message,
+              onHitlAction: (part, action, comment) => void onHitlAction?.(part, action, comment),
+              renderAssistantContent: slots?.assistantBody,
+              streamingMessageId
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ jsx2("div", { "aria-live": "polite", "aria-atomic": "true", className: "a24-sr-only", children: liveLabel })
+    ] })
+  ] });
+}
+
+// src/templates/agent-chat-app.tsx
+import {
+  Agents24Provider,
+  useAgentAttachments,
+  useAgentChat,
+  useAgentMcp
+} from "@agents24/react";
+import * as React3 from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function browserCrypto() {
+  const value = globalThis.crypto;
+  if (!value?.subtle || !value.randomUUID) throw new Error("Secure browser crypto is required for MCP authorization.");
+  return value;
+}
+function base64Url(bytes) {
+  let binary = "";
+  bytes.forEach((byte) => {
+    binary += String.fromCharCode(byte);
+  });
+  return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/g, "");
+}
+async function createPkceProof() {
+  const crypto = browserCrypto();
+  const verifier = base64Url(crypto.getRandomValues(new Uint8Array(32)));
+  const bytes = new TextEncoder().encode(verifier);
+  const digest = await crypto.subtle.digest("SHA-256", bytes);
+  return { verifier, challenge: base64Url(new Uint8Array(digest)) };
+}
+function stateFromError(error) {
+  const typed = error;
+  if (typed?.kind === "authentication") return "expired";
+  if (typed?.kind === "authorization") return "denied";
+  if (typed?.kind === "quota" || typed?.kind === "rate_limit") return "quota";
+  if (typed?.kind === "network") return "offline";
+  return "failed";
+}
+function BoundAgentChatApp({
+  agent: agentOverride,
+  client,
+  completeMcpAuthorization,
+  mcpRedirectUri,
+  modelId,
+  models: modelOverrides,
+  onModelChange,
+  slots,
+  ...layoutProps
+}) {
+  const controller = useAgentChat();
+  const attachments = useAgentAttachments();
+  const mcp = useAgentMcp();
+  const [agent, setAgent] = React3.useState(agentOverride || { name: "Agent" });
+  const [capabilities, setCapabilities] = React3.useState([]);
+  const [bootstrapModels, setBootstrapModels] = React3.useState([]);
+  const [selectedModelId, setSelectedModelId] = React3.useState(modelId || null);
+  const [bootstrapLoading, setBootstrapLoading] = React3.useState(true);
+  const [localError, setLocalError] = React3.useState(null);
+  const [liked, setLiked] = React3.useState({});
+  const [disliked, setDisliked] = React3.useState({});
+  const loadBootstrap = React3.useCallback(async () => {
+    setBootstrapLoading(true);
+    setLocalError(null);
+    try {
+      const bootstrap = await client.bootstrap();
+      if (!agentOverride) setAgent({ name: bootstrap.deployment.name || "Agent" });
+      setCapabilities(bootstrap.capabilities);
+      const modelFeatures = bootstrap.features.models;
+      const allowedModelIds = Array.isArray(modelFeatures?.allowed_ids) ? modelFeatures.allowed_ids.filter((value) => typeof value === "string") : [];
+      if (bootstrap.capabilities.includes("models.select") && modelFeatures?.selectable) {
+        setBootstrapModels(allowedModelIds.map((id) => ({ id, label: id })));
+        if (!modelId) {
+          const defaultId = typeof modelFeatures.default_id === "string" ? modelFeatures.default_id : allowedModelIds[0];
+          setSelectedModelId(defaultId || null);
+        }
+      } else {
+        setBootstrapModels([]);
+      }
+      await controller.refreshThreads();
+    } catch (error2) {
+      setLocalError(error2);
+    } finally {
+      setBootstrapLoading(false);
+    }
+  }, [agentOverride, client, controller.refreshThreads, modelId]);
+  React3.useEffect(() => {
+    if (modelId !== void 0) setSelectedModelId(modelId);
+  }, [modelId]);
+  React3.useEffect(() => {
+    void loadBootstrap();
+  }, [loadBootstrap]);
+  const submit = React3.useCallback(async (message) => {
+    setLocalError(null);
+    try {
+      const uploaded = await Promise.all(message.files.map((file) => attachments.upload({
+        data: file.source,
+        name: file.filename,
+        mediaType: file.mediaType,
+        threadId: controller.activeThreadId || void 0
+      })));
+      await controller.submit({
+        text: message.text,
+        attachmentIds: uploaded.flatMap((attachment) => attachment.id ? [attachment.id] : []),
+        attachments: uploaded,
+        requestedModelId: selectedModelId || void 0
+      });
+    } catch (error2) {
+      setLocalError(error2);
+    }
+  }, [attachments, controller, selectedModelId]);
+  const deleteThread = React3.useCallback(async (threadId) => {
+    if (!window.confirm("Delete this conversation? This cannot be undone.")) return;
+    await controller.deleteThread(threadId);
+  }, [controller.deleteThread]);
+  const changeModel = React3.useCallback((nextModelId) => {
+    if (modelId === void 0) setSelectedModelId(nextModelId);
+    onModelChange?.(nextModelId);
+  }, [modelId, onModelChange]);
+  const handleMcp = React3.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 = browserCrypto().randomUUID();
+    const proof = await createPkceProof();
+    const popup = window.open("about:blank", "agents24-mcp", "popup,width=560,height=720");
+    try {
+      const start = await mcp.startAuthorization({
+        runId,
+        serverId,
+        interruptId: part.interruptId,
+        redirectUri: mcpRedirectUri,
+        popupNonce,
+        codeChallenge: proof.challenge
+      });
+      if (!start.callback_origin) throw new Error("MCP authorization did not return a callback origin.");
+      if (popup) popup.location.replace(start.authorization_url);
+      const completion = await waitForMcpOauthComplete({
+        popup,
+        callbackOrigin: start.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);
+      }
+      popup?.close();
+      await controller.resumeHitl(part, "connect");
+    } catch (error2) {
+      popup?.close();
+      throw error2;
+    }
+  }, [completeMcpAuthorization, controller, mcp, mcpRedirectUri]);
+  const onHitlAction = React3.useCallback(async (part, action, comment) => {
+    setLocalError(null);
+    try {
+      if (part.hitlKind === "mcp_auth" && action === "connect") await handleMcp(part);
+      else await controller.resumeHitl(part, action, comment);
+    } catch (error2) {
+      setLocalError(error2);
+    }
+  }, [controller, handleMcp]);
+  const error = localError || controller.error;
+  const state = bootstrapLoading ? "loading" : error ? stateFromError(error) : controller.runState === "streaming" ? "streaming" : controller.runState === "reconnecting" ? "reconnecting" : controller.runState === "paused" ? "paused" : "ready";
+  const connectionState = state === "offline" ? "offline" : state === "expired" ? "expired" : state === "reconnecting" ? "reconnecting" : bootstrapLoading ? "connecting" : "connected";
+  const defaultMessageActions = (message) => message.role === "assistant" ? /* @__PURE__ */ jsx3(
+    AgentChatDefaultActions,
+    {
+      handlers: {
+        copied: false,
+        disliked: Boolean(disliked[message.id]),
+        liked: Boolean(liked[message.id]),
+        onCopy: async (content) => navigator.clipboard.writeText(content),
+        onDislike: () => {
+          setDisliked((current) => ({ ...current, [message.id]: !current[message.id] }));
+          setLiked((current) => ({ ...current, [message.id]: false }));
+        },
+        onLike: () => {
+          setLiked((current) => ({ ...current, [message.id]: !current[message.id] }));
+          setDisliked((current) => ({ ...current, [message.id]: false }));
+        },
+        onRetry: () => controller.regenerate(message)
+      },
+      message
+    }
+  ) : null;
+  return /* @__PURE__ */ jsx3(
+    AgentChatLayout,
+    {
+      ...layoutProps,
+      activeThreadId: controller.activeThreadId,
+      agent,
+      allowAttachments: layoutProps.allowAttachments ?? capabilities.includes("attachments.write"),
+      connectionState,
+      errorMessage: error instanceof Error ? error.message : null,
+      isLoadingOlder: controller.isLoadingOlder,
+      isLoadingThreads: controller.isLoadingThreads,
+      isRunning: controller.runState === "streaming" || controller.isSubmitting,
+      messages: controller.messages,
+      hasMoreThreads: controller.hasMoreThreads,
+      modelId: selectedModelId,
+      models: modelOverrides ?? bootstrapModels,
+      onDeleteThread: deleteThread,
+      onHitlAction,
+      onLoadOlder: controller.hasOlderTurns ? controller.loadOlder : void 0,
+      onLoadMoreThreads: controller.hasMoreThreads ? controller.loadMoreThreads : void 0,
+      onModelChange: changeModel,
+      onNewThread: controller.startNewThread,
+      onOpenThread: controller.openThread,
+      onRetryConnection: loadBootstrap,
+      onStop: () => void controller.cancelRun(),
+      onSubmit: submit,
+      slots: { ...slots, messageActions: slots?.messageActions || defaultMessageActions },
+      state,
+      streamingMessageId: controller.streamingMessageId,
+      threads: controller.threads.map((thread) => ({ id: thread.id, title: thread.title, status: thread.last_run_status || thread.status, updatedAt: thread.updated_at }))
+    }
+  );
+}
+function AgentChatApp({
+  client,
+  createAbortController,
+  createId,
+  storage,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    Agents24Provider,
+    {
+      client,
+      createAbortController: createAbortController || (() => new AbortController()),
+      createId,
+      storage,
+      children: /* @__PURE__ */ jsx3(BoundAgentChatApp, { client, ...props })
+    }
+  );
+}
 export {
+  AgentChatApp,
+  AgentChatLayout,
   AgentChatShell,
+  AgentChatStatePanel,
   buildAgentChatOutlineItems,
   getAgentChatShellScrollState
 };