@agents24/chat-react 0.4.0 → 0.5.0

package/dist/templates/index.cjs

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var templates_exports = {};
 __export(templates_exports, {
   AgentChatApp: () => AgentChatApp,
+  AgentChatAppearanceControl: () => AgentChatAppearanceControl,
   AgentChatLayout: () => AgentChatLayout,
   AgentChatShell: () => AgentChatShell,
   AgentChatStatePanel: () => AgentChatStatePanel,
@@ -1449,7 +1450,7 @@ var MessageResponse = React5.memo(
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       import_streamdown.Streamdown,
       {
-        className: cn("size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", className),
+        className: cn("a24-message-response", className),
         components: streamdownComponents,
         rehypePlugins: rehypePlugins || MESSAGE_RESPONSE_REHYPE_PLUGINS,
         ...props,
@@ -1927,8 +1928,84 @@ function connectionLabel(state) {
 function AgentAvatar({ agent }) {
   return agent.avatarUrl ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("img", { alt: "", className: "a24-avatar", height: 36, src: agent.avatarUrl, width: 36 }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("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 = React8.useRef(null);
+  const triggerRef = React8.useRef(null);
+  const inputId = React8.useId();
+  const [draft, setDraft] = React8.useState(selector.value);
+  const [error, setError] = React8.useState(null);
+  const [open, setOpen] = React8.useState(false);
+  const [submitting, setSubmitting] = React8.useState(false);
+  React8.useEffect(() => setDraft(selector.value), [selector.value]);
+  React8.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__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "a24-target-selector", "data-open": open || void 0, ref: rootRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      "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__ */ (0, import_jsx_runtime10.jsx)(AgentAvatar, { agent }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "a24-target-selector__copy", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { children: agent.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: agent.description || "Click to change target" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react5.ChevronDown, { "aria-hidden": "true" })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("form", { "aria-label": `Change ${selector.label}`, className: "a24-target-selector__panel", onSubmit: (event) => void apply(event), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { htmlFor: inputId, children: selector.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("input", { autoComplete: "off", id: inputId, onChange: (event) => setDraft(event.target.value), placeholder: selector.placeholder, spellCheck: false, value: draft }),
+      selector.helperText ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { children: selector.helperText }) : null,
+      error ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "a24-target-selector__error", role: "alert", children: error }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("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,
@@ -1938,12 +2015,14 @@ function ThreadNavigation({
   onNewThread,
   onOpenThread,
   slots,
+  targetSelector,
   threads
 }) {
   const [query, setQuery] = React8.useState("");
   const normalizedQuery = query.trim().toLocaleLowerCase();
   const visibleThreads = normalizedQuery ? threads.filter((thread) => String(thread.title || "New chat").toLocaleLowerCase().includes(normalizedQuery)) : threads;
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "a24-sidebar__inner", children: [
+    targetSelector ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AgentTargetSelector, { agent, selector: targetSelector }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "a24-sidebar__top", children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
         "button",
@@ -2050,6 +2129,7 @@ function AgentChatLayout({
   slots,
   state = "ready",
   streamingMessageId,
+  targetSelector,
   threads,
   title
 }) {
@@ -2094,6 +2174,7 @@ function AgentChatLayout({
       ThreadNavigation,
       {
         activeThreadId,
+        agent,
         close: closeSidebar,
         hasMoreThreads,
         isDeletingThread,
@@ -2103,6 +2184,7 @@ function AgentChatLayout({
         onNewThread,
         onOpenThread,
         slots,
+        targetSelector,
         threads
       }
     ) }),
@@ -2464,9 +2546,51 @@ function AgentChatApp({
     }
   );
 }
+
+// src/templates/appearance-control.tsx
+var import_lucide_react6 = require("lucide-react");
+var React10 = __toESM(require("react"), 1);
+var import_jsx_runtime12 = require("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] = React10.useState(() => storedMode(storageKey));
+  React10.useEffect(() => applyMode(mode), [mode]);
+  const label = `Appearance: ${mode[0]?.toUpperCase()}${mode.slice(1)}`;
+  const Icon = mode === "light" ? import_lucide_react6.Sun : mode === "dark" ? import_lucide_react6.Moon : import_lucide_react6.Monitor;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "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__ */ (0, import_jsx_runtime12.jsx)(Icon, { "aria-hidden": "true" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "a24-sr-only", children: label })
+      ]
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AgentChatApp,
+  AgentChatAppearanceControl,
   AgentChatLayout,
   AgentChatShell,
   AgentChatStatePanel,