@agents24/chat-react 0.5.0 → 0.5.2

package/dist/templates/index.js

@@ -1,846 +0,0 @@
-import {
-  LatestThreadScroller,
-  validateMcpCallbackResult,
-  waitForMcpOauthComplete
-} from "../chunk-LI67M74F.js";
-import {
-  AgentChatComposer,
-  AgentChatDefaultActions,
-  AgentChatMessage,
-  cn
-} from "../chunk-R7WFL3YR.js";
-import "../chunk-CHAU7FNW.js";
-
-// src/templates/agent-chat-shell.tsx
-import * as React from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-function getAgentChatShellScrollState(viewport) {
-  const canScroll = viewport.scrollHeight - viewport.clientHeight > 1;
-  return {
-    canScroll,
-    isScrolled: canScroll && viewport.scrollTop > 4
-  };
-}
-var defaultOutlineLabel = (content, index) => {
-  const label = String(content || "").replace(/\s+/g, " ").trim();
-  return label || `Turn ${index + 1}`;
-};
-var defaultOutlinePreview = (content) => String(content || "").replace(/\s+/g, " ").trim();
-function buildAgentChatOutlineItems(messages, getLabel = (message, index) => defaultOutlineLabel(message.content, index), getResponsePreview = (message) => defaultOutlinePreview(message.content)) {
-  return messages.reduce((items, message) => {
-    if (message.role === "user") {
-      items.push({
-        id: message.id,
-        label: getLabel(message, items.length),
-        messageIds: [message.id]
-      });
-      return items;
-    }
-    const currentItem = items[items.length - 1];
-    currentItem?.messageIds?.push(message.id);
-    if (currentItem && !currentItem.responsePreview && message.role === "assistant") {
-      currentItem.responsePreview = getResponsePreview(message);
-    }
-    return items;
-  }, []);
-}
-function AgentChatShell({
-  className,
-  composer,
-  composerOverlayClassName,
-  composerOverlayHeight,
-  contentClassName,
-  defaultComposerOverlayHeight = 192,
-  dir = "ltr",
-  emptyInputAttachmentCount = 0,
-  emptyTitle = "Ready when you are.",
-  hideComposer = false,
-  isLoadingOlder = false,
-  messages,
-  onLoadOlder,
-  onScrollStateChange,
-  outlineItems,
-  outlineSide = "left",
-  renderEmptyState,
-  renderMessage,
-  renderOlderLoader
-}) {
-  const overlayRef = React.useRef(null);
-  const viewportRef = React.useRef(null);
-  const contentRef = React.useRef(null);
-  const lastScrollStateRef = React.useRef(null);
-  const [measuredOverlayHeight, setMeasuredOverlayHeight] = React.useState(
-    defaultComposerOverlayHeight
-  );
-  const olderPageRequestRef = React.useRef(false);
-  const items = React.useMemo(
-    () => outlineItems || buildAgentChatOutlineItems(messages),
-    [messages, outlineItems]
-  );
-  const updateScrollState = React.useCallback(() => {
-    const viewport = viewportRef.current;
-    if (!viewport || !onScrollStateChange) return;
-    const next = getAgentChatShellScrollState(viewport);
-    const previous = lastScrollStateRef.current;
-    if (previous && previous.canScroll === next.canScroll && previous.isScrolled === next.isScrolled) {
-      return;
-    }
-    lastScrollStateRef.current = next;
-    onScrollStateChange(next);
-  }, [onScrollStateChange]);
-  React.useEffect(() => {
-    const overlay = overlayRef.current;
-    if (!overlay || hideComposer) return;
-    const updateHeight = () => {
-      setMeasuredOverlayHeight(Math.ceil(overlay.getBoundingClientRect().height));
-    };
-    updateHeight();
-    const observer = new ResizeObserver(updateHeight);
-    observer.observe(overlay);
-    return () => observer.disconnect();
-  }, [hideComposer]);
-  React.useEffect(() => {
-    if (!onScrollStateChange) return;
-    updateScrollState();
-    const viewport = viewportRef.current;
-    const content = contentRef.current;
-    if (!viewport || typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(updateScrollState);
-    observer.observe(viewport);
-    if (content) observer.observe(content);
-    return () => observer.disconnect();
-  }, [messages, onScrollStateChange, updateScrollState]);
-  const handleScroll = React.useCallback(
-    (event) => {
-      updateScrollState();
-      if (!onLoadOlder || isLoadingOlder || olderPageRequestRef.current || event.currentTarget.scrollTop > 48) {
-        return;
-      }
-      olderPageRequestRef.current = true;
-      void Promise.resolve(onLoadOlder()).finally(() => {
-        olderPageRequestRef.current = false;
-      });
-    },
-    [isLoadingOlder, onLoadOlder, updateScrollState]
-  );
-  const bottomPadding = hideComposer ? 32 : (composerOverlayHeight ?? measuredOverlayHeight) + 72;
-  const isEmptyState = messages.length === 0;
-  if (isEmptyState) {
-    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(
-            "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: "a24-shell__empty-composer mx-auto w-full max-w-3xl px-4", children: composer }) : null
-    ] }) }) });
-  }
-  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,
-        {
-          onScroll: handleScroll,
-          onViewportChange: (node) => {
-            viewportRef.current = node;
-            updateScrollState();
-          },
-          children: /* @__PURE__ */ jsxs(
-            LatestThreadScroller.Content,
-            {
-              ref: contentRef,
-              className: cn(
-                "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 },
-              children: [
-                isLoadingOlder ? renderOlderLoader?.() : null,
-                messages.map((message, index) => /* @__PURE__ */ jsx(
-                  LatestThreadScroller.Item,
-                  {
-                    messageId: message.id,
-                    scrollAnchor: message.role === "user",
-                    children: renderMessage(message, index)
-                  },
-                  message.id
-                ))
-              ]
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        LatestThreadScroller.Outline,
-        {
-          dir,
-          items,
-          side: outlineSide
-        }
-      )
-    ] }),
-    !hideComposer && composer ? /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: overlayRef,
-        className: cn(
-          "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: "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 AgentTargetSelector({ agent, selector }) {
-  const rootRef = React2.useRef(null);
-  const triggerRef = React2.useRef(null);
-  const inputId = React2.useId();
-  const [draft, setDraft] = React2.useState(selector.value);
-  const [error, setError] = React2.useState(null);
-  const [open, setOpen] = React2.useState(false);
-  const [submitting, setSubmitting] = React2.useState(false);
-  React2.useEffect(() => setDraft(selector.value), [selector.value]);
-  React2.useEffect(() => {
-    if (!open) return void 0;
-    const closeOnPointerDown = (event) => {
-      if (!rootRef.current?.contains(event.target)) setOpen(false);
-    };
-    const closeOnEscape = (event) => {
-      if (event.key !== "Escape") return;
-      event.preventDefault();
-      setOpen(false);
-      triggerRef.current?.focus();
-    };
-    document.addEventListener("pointerdown", closeOnPointerDown);
-    document.addEventListener("keydown", closeOnEscape);
-    return () => {
-      document.removeEventListener("pointerdown", closeOnPointerDown);
-      document.removeEventListener("keydown", closeOnEscape);
-    };
-  }, [open]);
-  const apply = async (event) => {
-    event.preventDefault();
-    const value = draft.trim();
-    if (!value) {
-      setError(`${selector.label} is required.`);
-      return;
-    }
-    setSubmitting(true);
-    setError(null);
-    try {
-      await selector.onApply(value);
-      setOpen(false);
-    } catch (nextError) {
-      setError(nextError instanceof Error ? nextError.message : "The target could not be changed.");
-    } finally {
-      setSubmitting(false);
-    }
-  };
-  return /* @__PURE__ */ jsxs2("div", { className: "a24-target-selector", "data-open": open || void 0, ref: rootRef, children: [
-    /* @__PURE__ */ jsxs2(
-      "button",
-      {
-        "aria-expanded": open,
-        "aria-haspopup": "dialog",
-        "aria-label": `Change ${selector.label}`,
-        className: "a24-target-selector__trigger",
-        onClick: () => setOpen((value) => !value),
-        ref: triggerRef,
-        type: "button",
-        children: [
-          /* @__PURE__ */ jsx2(AgentAvatar, { agent }),
-          /* @__PURE__ */ jsxs2("span", { className: "a24-target-selector__copy", children: [
-            /* @__PURE__ */ jsx2("strong", { children: agent.name }),
-            /* @__PURE__ */ jsx2("span", { children: agent.description || "Click to change target" })
-          ] }),
-          /* @__PURE__ */ jsx2(ChevronDown, { "aria-hidden": "true" })
-        ]
-      }
-    ),
-    open ? /* @__PURE__ */ jsxs2("form", { "aria-label": `Change ${selector.label}`, className: "a24-target-selector__panel", onSubmit: (event) => void apply(event), children: [
-      /* @__PURE__ */ jsx2("label", { htmlFor: inputId, children: selector.label }),
-      /* @__PURE__ */ jsx2("input", { autoComplete: "off", id: inputId, onChange: (event) => setDraft(event.target.value), placeholder: selector.placeholder, spellCheck: false, value: draft }),
-      selector.helperText ? /* @__PURE__ */ jsx2("p", { children: selector.helperText }) : null,
-      error ? /* @__PURE__ */ jsx2("p", { className: "a24-target-selector__error", role: "alert", children: error }) : null,
-      /* @__PURE__ */ jsx2("button", { className: "a24-button a24-target-selector__apply", disabled: submitting || !draft.trim(), type: "submit", children: submitting ? "Switching\u2026" : "Use target" })
-    ] }) : null
-  ] });
-}
-function ThreadNavigation({
-  activeThreadId,
-  agent,
-  close,
-  hasMoreThreads,
-  isDeletingThread,
-  isLoadingThreads,
-  onDeleteThread,
-  onLoadMoreThreads,
-  onNewThread,
-  onOpenThread,
-  slots,
-  targetSelector,
-  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: [
-    targetSelector ? /* @__PURE__ */ jsx2(AgentTargetSelector, { agent, selector: targetSelector }) : null,
-    /* @__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,
-  targetSelector,
-  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,
-        agent,
-        close: closeSidebar,
-        hasMoreThreads,
-        isDeletingThread,
-        isLoadingThreads,
-        onDeleteThread,
-        onLoadMoreThreads,
-        onNewThread,
-        onOpenThread,
-        slots,
-        targetSelector,
-        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 })
-    }
-  );
-}
-
-// src/templates/appearance-control.tsx
-import { Monitor, Moon, Sun } from "lucide-react";
-import * as React4 from "react";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var MODES = ["system", "light", "dark"];
-function storedMode(storageKey) {
-  if (typeof window === "undefined") return "system";
-  const value = window.localStorage.getItem(storageKey);
-  return value === "light" || value === "dark" ? value : "system";
-}
-function applyMode(mode) {
-  if (typeof document === "undefined") return;
-  document.documentElement.dataset.agents24ColorMode = mode;
-}
-function AgentChatAppearanceControl({
-  storageKey = "agents24-color-mode"
-}) {
-  const [mode, setMode] = React4.useState(() => storedMode(storageKey));
-  React4.useEffect(() => applyMode(mode), [mode]);
-  const label = `Appearance: ${mode[0]?.toUpperCase()}${mode.slice(1)}`;
-  const Icon = mode === "light" ? Sun : mode === "dark" ? Moon : Monitor;
-  return /* @__PURE__ */ jsxs3(
-    "button",
-    {
-      "aria-label": `${label}. Activate to change.`,
-      className: "a24-icon-button a24-appearance",
-      onClick: () => {
-        const next = MODES[(MODES.indexOf(mode) + 1) % MODES.length] || "system";
-        window.localStorage.setItem(storageKey, next);
-        setMode(next);
-      },
-      title: label,
-      type: "button",
-      children: [
-        /* @__PURE__ */ jsx4(Icon, { "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx4("span", { className: "a24-sr-only", children: label })
-      ]
-    }
-  );
-}
-export {
-  AgentChatApp,
-  AgentChatAppearanceControl,
-  AgentChatLayout,
-  AgentChatShell,
-  AgentChatStatePanel,
-  buildAgentChatOutlineItems,
-  getAgentChatShellScrollState
-};
-//# sourceMappingURL=index.js.map