@actioneer/ads 0.6.0 → 0.8.0

package/components/assistant-ui/composer.js

@@ -1,191 +1,195 @@
 "use client";
-import { jsx as e, jsxs as f, Fragment as L } from "react/jsx-runtime";
-import * as l from "react";
-import { useContext as D } from "react";
-import { ComposerAttachments as I, ComposerAddImage as k } from "./attachment.js";
-import { ComposerAddContext as F } from "./composer-add-context.js";
-import { ComposerHarness as B } from "./composer-harness.js";
-import { ComposerQuotePreview as H } from "./quote.js";
-import { ThreadComponentsContext as K } from "./thread-context.js";
-import { TooltipIconButton as S } from "./tooltip-icon-button.js";
-import { Button as N } from "../ui/button.js";
-import { ComposerPrimitive as s, MessagePrimitive as j, unstable_useComposerInput as q, AuiIf as _ } from "@assistant-ui/react";
-import { Mic as U, Stop as R, ArrowUp as Y } from "../../lib/icons.js";
-const O = 24, Q = 850, V = 1800, X = 3e3;
-function G(i) {
+import { jsx as e, jsxs as p, Fragment as D } from "react/jsx-runtime";
+import * as u from "react";
+import { useContext as I } from "react";
+import { ComposerAttachments as k, ComposerAddImage as F } from "./attachment.js";
+import { ComposerAddContext as B } from "./composer-add-context.js";
+import { ComposerHarness as H } from "./composer-harness.js";
+import { ComposerQuotePreview as K } from "./quote.js";
+import { ThreadComponentsContext as j } from "./thread-context.js";
+import { TooltipIconButton as P } from "./tooltip-icon-button.js";
+import { Button as A } from "../ui/button.js";
+import { ComposerPrimitive as s, MessagePrimitive as q, unstable_useComposerInput as U, AuiIf as S } from "@assistant-ui/react";
+import { Mic as Y, Stop as M, ArrowUp as O } from "../../lib/icons.js";
+const Q = 24, V = 850, X = 1800, G = 3e3;
+function J(a) {
   return Math.min(
-    V,
-    Math.max(Q, i.length * O)
+    X,
+    Math.max(V, a.length * Q)
   );
 }
-function J(i, t, p, b, T) {
-  if (t <= 0 || i.length === 0)
-    return p(i), { promise: Promise.resolve(), cancel: () => {
+function W(a, n, r, f, x) {
+  if (n <= 0 || a.length === 0)
+    return r(a), { promise: Promise.resolve(), cancel: () => {
     } };
-  let w = 0, v, o;
+  let v = 0, C, N;
   return {
-    promise: new Promise((u) => {
-      o = u;
-      let y = performance.now(), h = null;
-      const r = (c) => {
-        if (b()) {
-          u();
+    promise: new Promise((y) => {
+      N = y;
+      let m = performance.now(), h = null;
+      const T = (i) => {
+        if (f()) {
+          y();
           return;
         }
-        if (T()) {
-          h === null && (h = c), v = window.setTimeout(() => r(performance.now()), 100);
+        if (x()) {
+          h === null && (h = i), C = window.setTimeout(() => T(performance.now()), 100);
           return;
         }
-        h !== null && (y += c - h, h = null);
-        const a = Math.min(1, (c - y) / t), d = a >= 1 ? i.length : Math.floor(a * i.length);
-        if (p(i.slice(0, d)), a >= 1) {
-          u();
+        h !== null && (m += i - h, h = null);
+        const l = Math.min(1, (i - m) / n), c = l >= 1 ? a.length : Math.floor(l * a.length);
+        if (r(a.slice(0, c)), l >= 1) {
+          y();
           return;
         }
-        w = requestAnimationFrame(r);
+        v = requestAnimationFrame(T);
       };
-      w = requestAnimationFrame(r);
+      v = requestAnimationFrame(T);
     }),
     cancel: () => {
-      cancelAnimationFrame(w), v !== void 0 && window.clearTimeout(v), o();
+      cancelAnimationFrame(v), C !== void 0 && window.clearTimeout(C), N();
     }
   };
 }
-const W = () => {
-  const { setText: i } = q(), t = l.useContext(M), [p, b] = l.useState(
-    (t == null ? void 0 : t[0]) ?? "Send a message…"
-  ), [T, w] = l.useState(!1), v = l.useRef(null), [o, z] = l.useState(null), u = l.useRef(!1), y = l.useCallback((r) => {
-    v.current = r, z(r);
+const Z = ({
+  autoFocus: a = !0
+}) => {
+  const { setText: n } = U(), r = u.useContext(L), [f, x] = u.useState(
+    (r == null ? void 0 : r[0]) ?? "Send a message…"
+  ), [v, C] = u.useState(!1), N = u.useRef(null), [o, y] = u.useState(null), m = u.useRef(!1), h = u.useCallback((i) => {
+    N.current = i, y(i);
   }, []);
-  l.useEffect(() => {
+  u.useEffect(() => {
     if (!o) return;
-    let r = 0;
-    const c = (n) => {
-      u.current = n || document.activeElement === o, w(n);
-    }, a = () => {
-      const n = o.value.length > 0;
-      c(n);
-    }, d = () => {
-      window.clearTimeout(r), r = window.setTimeout(a, 0);
+    let i = 0;
+    const l = (t) => {
+      m.current = t || document.activeElement === o, C(t);
+    }, c = () => {
+      const t = o.value.length > 0;
+      l(t);
     }, g = () => {
-      u.current = o.value.length > 0 || document.activeElement === o;
-    }, E = (n, m) => {
-      i(n), o.value = n, o.dispatchEvent(new Event("input", { bubbles: !0 })), c(n.length > 0), window.setTimeout(() => {
-        document.activeElement === o && o.setSelectionRange(m, m);
+      window.clearTimeout(i), i = window.setTimeout(c, 0);
+    }, b = () => {
+      m.current = o.value.length > 0 || document.activeElement === o;
+    }, z = (t, d) => {
+      n(t), o.value = t, o.dispatchEvent(new Event("input", { bubbles: !0 })), l(t.length > 0), window.setTimeout(() => {
+        document.activeElement === o && o.setSelectionRange(d, d);
       }, 0);
-    }, P = (n) => {
-      const m = o.selectionStart ?? 0, A = o.selectionEnd ?? m;
-      return m === A || n.inputType !== "deleteContentBackward" && n.inputType !== "deleteContentForward" && n.inputType !== "deleteByCut" ? !1 : (n.preventDefault(), E(
-        o.value.slice(0, m) + o.value.slice(A),
-        m
+    }, R = (t) => {
+      const d = o.selectionStart ?? 0, _ = o.selectionEnd ?? d;
+      return d === _ || t.inputType !== "deleteContentBackward" && t.inputType !== "deleteContentForward" && t.inputType !== "deleteByCut" ? !1 : (t.preventDefault(), z(
+        o.value.slice(0, d) + o.value.slice(_),
+        d
       ), !0);
-    }, C = (n) => {
-      if (!n.isComposing && !P(n)) {
-        if (typeof n.data == "string" && n.data.length > 0) {
-          c(!0);
+    }, E = (t) => {
+      if (!t.isComposing && !R(t)) {
+        if (typeof t.data == "string" && t.data.length > 0) {
+          l(!0);
           return;
         }
-        d();
+        g();
       }
-    }, x = (n) => {
-      (n.metaKey || n.ctrlKey) && !n.altKey && n.key.toLowerCase() === "a" && (n.preventDefault(), o.select());
+    }, w = (t) => {
+      (t.metaKey || t.ctrlKey) && !t.altKey && t.key.toLowerCase() === "a" && (t.preventDefault(), o.select());
     };
-    return a(), o.addEventListener("beforeinput", C), o.addEventListener("input", a), o.addEventListener("focus", g), o.addEventListener("blur", g), o.addEventListener("keydown", x), () => {
-      window.clearTimeout(r), o.removeEventListener("beforeinput", C), o.removeEventListener("input", a), o.removeEventListener("focus", g), o.removeEventListener("blur", g), o.removeEventListener("keydown", x);
+    return c(), o.addEventListener("beforeinput", E), o.addEventListener("input", c), o.addEventListener("focus", b), o.addEventListener("blur", b), o.addEventListener("keydown", w), () => {
+      window.clearTimeout(i), o.removeEventListener("beforeinput", E), o.removeEventListener("input", c), o.removeEventListener("focus", b), o.removeEventListener("blur", b), o.removeEventListener("keydown", w);
     };
-  }, [o, i]), l.useEffect(() => {
-    var C;
-    if (!(t != null && t.length)) {
-      b("Send a message…");
+  }, [o, n]), u.useEffect(() => {
+    var E;
+    if (!(r != null && r.length)) {
+      x("Send a message…");
       return;
     }
-    if ((C = window.matchMedia) != null && C.call(window, "(prefers-reduced-motion: reduce)").matches) {
-      b(t[0]);
+    if ((E = window.matchMedia) != null && E.call(window, "(prefers-reduced-motion: reduce)").matches) {
+      x(r[0]);
       return;
     }
-    let r = !1, c = 0, a, d;
-    const g = (x) => new Promise((n) => {
-      a = window.setTimeout(n, x);
-    }), E = () => r;
+    let i = !1, l = 0, c, g;
+    const b = (w) => new Promise((t) => {
+      c = window.setTimeout(t, w);
+    }), z = () => i;
     return (async () => {
-      for (; !r; ) {
-        for (; u.current && !r; ) await g(100);
-        if (r) return;
-        const x = t[c];
-        b("");
-        const { promise: n, cancel: m } = J(
+      for (; !i; ) {
+        for (; m.current && !i; ) await b(100);
+        if (i) return;
+        const w = r[l];
+        x("");
+        const { promise: t, cancel: d } = W(
+          w,
+          J(w),
           x,
-          G(x),
-          b,
-          E,
-          () => u.current
+          z,
+          () => m.current
         );
-        if (d = m, await n, d = void 0, r) return;
-        if (!u.current) {
-          if (await g(X), r) return;
-          c = (c + 1) % t.length;
+        if (g = d, await t, g = void 0, i) return;
+        if (!m.current) {
+          if (await b(G), i) return;
+          l = (l + 1) % r.length;
         }
       }
     })(), () => {
-      r = !0, d == null || d(), a && window.clearTimeout(a);
+      i = !0, g == null || g(), c && window.clearTimeout(c);
     };
-  }, [t]);
-  const h = !!(t != null && t.length) && !T;
-  return /* @__PURE__ */ f("div", { className: "group/input relative", children: [
-    h && /* @__PURE__ */ e(
+  }, [r]);
+  const T = !!(r != null && r.length) && !v;
+  return /* @__PURE__ */ p("div", { className: "group/input relative", children: [
+    T && /* @__PURE__ */ e(
       "div",
       {
         "aria-hidden": !0,
         className: "pointer-events-none absolute inset-x-2.5 top-1 z-0 line-clamp-2 max-h-(--composer-placeholder-max-h) overflow-hidden text-base text-muted-foreground/80 group-focus-within/input:hidden",
-        children: /* @__PURE__ */ e("span", { children: p })
+        children: /* @__PURE__ */ e("span", { children: f })
       }
     ),
     /* @__PURE__ */ e(
       s.Input,
       {
-        ref: y,
-        placeholder: t != null && t.length ? "" : p,
+        ref: h,
+        placeholder: r != null && r.length ? "" : f,
         className: "aui-composer-input caret-primary placeholder:text-muted-foreground/80 relative z-10 max-h-32 min-h-14 w-full resize-none bg-transparent px-2.5 py-1 text-base text-foreground outline-none",
         rows: 1,
-        autoFocus: !0,
+        autoFocus: a,
         enterKeyHint: "send",
         "aria-label": "Message input"
       }
     )
   ] });
-}, M = l.createContext(
+}, L = u.createContext(
   void 0
 );
-function de({
-  prompts: i,
-  children: t
+function me({
+  prompts: a,
+  children: n
 }) {
-  return /* @__PURE__ */ e(M.Provider, { value: i, children: t });
+  return /* @__PURE__ */ e(L.Provider, { value: a, children: n });
 }
-const me = () => /* @__PURE__ */ e(s.Root, { className: "aui-composer-root animate-in fade-in slide-in-from-bottom-2 fill-mode-both relative flex w-full flex-col duration-200 delay-[420ms]", children: /* @__PURE__ */ e(s.Unstable_TriggerPopoverRoot, { children: /* @__PURE__ */ e(s.AttachmentDropzone, { asChild: !0, children: /* @__PURE__ */ f(
+const pe = ({
+  autoFocus: a = !0
+}) => /* @__PURE__ */ e(s.Root, { className: "aui-composer-root animate-in fade-in slide-in-from-bottom-2 fill-mode-both relative flex w-full flex-col duration-200 delay-[420ms]", children: /* @__PURE__ */ e(s.Unstable_TriggerPopoverRoot, { children: /* @__PURE__ */ e(s.AttachmentDropzone, { asChild: !0, children: /* @__PURE__ */ p(
   "div",
   {
     "data-slot": "aui_composer-shell",
-    onMouseDown: (i) => {
-      var p;
-      i.target.closest("button, a, input, textarea, [role='button']") || (p = i.currentTarget.querySelector("textarea")) == null || p.focus();
+    onMouseDown: (n) => {
+      var f;
+      n.target.closest("button, a, input, textarea, [role='button']") || (f = n.currentTarget.querySelector("textarea")) == null || f.focus();
     },
-    className: "border-border/60 data-[dragging=true]:border-ring focus-within:border-border relative flex w-full flex-col gap-2 rounded-(--composer-radius) border bg-(--composer-bg) p-(--composer-padding) shadow-[0_4px_16px_-8px_rgba(0,0,0,0.08),0_1px_2px_rgba(0,0,0,0.04)] transition-[border-color,box-shadow] focus-within:shadow-[0_6px_24px_-8px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.05)] data-[dragging=true]:border-dashed data-[dragging=true]:bg-[color-mix(in_oklab,var(--color-accent)_50%,var(--color-background))]",
+    className: "border-wg2 data-[dragging=true]:border-ring focus-within:border-border relative flex w-full flex-col gap-2 rounded-(--composer-radius) border bg-(--composer-bg) p-(--composer-padding) shadow-400 transition-[border-color,box-shadow] data-[dragging=true]:border-dashed data-[dragging=true]:bg-[color-mix(in_oklab,var(--color-accent)_50%,var(--color-background))]",
     children: [
-      /* @__PURE__ */ e(H, { className: "mx-0 mt-0" }),
-      /* @__PURE__ */ e(I, {}),
-      /* @__PURE__ */ e(W, {}),
-      /* @__PURE__ */ e(Z, {})
+      /* @__PURE__ */ e(K, { className: "mx-0 mt-0" }),
+      /* @__PURE__ */ e(k, {}),
+      /* @__PURE__ */ e(Z, { autoFocus: a }),
+      /* @__PURE__ */ e($, {})
     ]
   }
-) }) }) }), Z = () => {
-  const { ComposerAccessories: i = $ } = D(K);
-  return /* @__PURE__ */ f("div", { className: "aui-composer-action-wrapper relative flex items-center justify-between", children: [
-    /* @__PURE__ */ e("div", { className: "flex items-center gap-1", children: /* @__PURE__ */ e(i, {}) }),
-    /* @__PURE__ */ f("div", { className: "flex items-center gap-1.5", children: [
-      /* @__PURE__ */ f(_, { condition: (t) => t.thread.capabilities.dictation, children: [
-        /* @__PURE__ */ e(_, { condition: (t) => t.composer.dictation == null, children: /* @__PURE__ */ e(s.Dictate, { asChild: !0, children: /* @__PURE__ */ e(
-          S,
+) }) }) }), $ = () => {
+  const { ComposerAccessories: a = ee } = I(j);
+  return /* @__PURE__ */ p("div", { className: "aui-composer-action-wrapper relative flex items-center justify-between", children: [
+    /* @__PURE__ */ e("div", { className: "flex items-center gap-1", children: /* @__PURE__ */ e(a, {}) }),
+    /* @__PURE__ */ p("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ p(S, { condition: (n) => n.thread.capabilities.dictation, children: [
+        /* @__PURE__ */ e(S, { condition: (n) => n.composer.dictation == null, children: /* @__PURE__ */ e(s.Dictate, { asChild: !0, children: /* @__PURE__ */ e(
+          P,
           {
             tooltip: "Voice input",
             side: "bottom",
@@ -194,11 +198,11 @@ const me = () => /* @__PURE__ */ e(s.Root, { className: "aui-composer-root anima
             size: "icon",
             className: "aui-composer-dictate size-7 rounded-full",
             "aria-label": "Start voice input",
-            children: /* @__PURE__ */ e(U, { className: "aui-composer-dictate-icon size-4" })
+            children: /* @__PURE__ */ e(Y, { className: "aui-composer-dictate-icon size-4" })
           }
         ) }) }),
-        /* @__PURE__ */ e(_, { condition: (t) => t.composer.dictation != null, children: /* @__PURE__ */ e(s.StopDictation, { asChild: !0, children: /* @__PURE__ */ e(
-          S,
+        /* @__PURE__ */ e(S, { condition: (n) => n.composer.dictation != null, children: /* @__PURE__ */ e(s.StopDictation, { asChild: !0, children: /* @__PURE__ */ e(
+          P,
           {
             tooltip: "Stop dictation",
             side: "bottom",
@@ -207,12 +211,12 @@ const me = () => /* @__PURE__ */ e(s.Root, { className: "aui-composer-root anima
             size: "icon",
             className: "aui-composer-stop-dictation text-destructive size-7 rounded-full",
             "aria-label": "Stop voice input",
-            children: /* @__PURE__ */ e(R, { className: "aui-composer-stop-dictation-icon size-3.5 animate-pulse fill-current" })
+            children: /* @__PURE__ */ e(M, { className: "aui-composer-stop-dictation-icon size-3.5 animate-pulse fill-current" })
           }
         ) }) })
       ] }),
-      /* @__PURE__ */ e(_, { condition: (t) => !t.thread.isRunning, children: /* @__PURE__ */ e(s.Send, { asChild: !0, children: /* @__PURE__ */ e(
-        S,
+      /* @__PURE__ */ e(S, { condition: (n) => !n.thread.isRunning, children: /* @__PURE__ */ e(s.Send, { asChild: !0, children: /* @__PURE__ */ e(
+        P,
         {
           tooltip: "Send message",
           side: "bottom",
@@ -221,32 +225,32 @@ const me = () => /* @__PURE__ */ e(s.Root, { className: "aui-composer-root anima
           size: "icon",
           className: "aui-composer-send size-7 rounded-full",
           "aria-label": "Send message",
-          children: /* @__PURE__ */ e(Y, { className: "aui-composer-send-icon size-4.5" })
+          children: /* @__PURE__ */ e(O, { className: "aui-composer-send-icon size-4.5" })
         }
       ) }) }),
-      /* @__PURE__ */ e(_, { condition: (t) => t.thread.isRunning, children: /* @__PURE__ */ e(s.Cancel, { asChild: !0, children: /* @__PURE__ */ e(
-        N,
+      /* @__PURE__ */ e(S, { condition: (n) => n.thread.isRunning, children: /* @__PURE__ */ e(s.Cancel, { asChild: !0, children: /* @__PURE__ */ e(
+        A,
         {
           type: "button",
           variant: "default",
           size: "icon",
           className: "aui-composer-cancel size-7 rounded-full",
           "aria-label": "Stop generating",
-          children: /* @__PURE__ */ e(R, { className: "aui-composer-cancel-icon size-3.5 fill-current" })
+          children: /* @__PURE__ */ e(M, { className: "aui-composer-cancel-icon size-3.5 fill-current" })
         }
       ) }) })
     ] })
   ] });
-}, $ = () => /* @__PURE__ */ f(L, { children: [
+}, ee = () => /* @__PURE__ */ p(D, { children: [
+  /* @__PURE__ */ e(B, {}),
   /* @__PURE__ */ e(F, {}),
-  /* @__PURE__ */ e(k, {}),
-  /* @__PURE__ */ e(B, {})
-] }), pe = () => /* @__PURE__ */ e(
-  j.Root,
+  /* @__PURE__ */ e(H, {})
+] }), fe = () => /* @__PURE__ */ e(
+  q.Root,
   {
     "data-slot": "aui_edit-composer-wrapper",
     className: "flex flex-col px-2 [contain-intrinsic-size:auto_200px] [content-visibility:auto]",
-    children: /* @__PURE__ */ f(s.Root, { className: "aui-edit-composer-root border-border/60 ms-auto flex w-full max-w-[85%] flex-col rounded-(--composer-radius) border bg-(--composer-bg) shadow-[0_4px_16px_-8px_rgba(0,0,0,0.08),0_1px_2px_rgba(0,0,0,0.04)]", children: [
+    children: /* @__PURE__ */ p(s.Root, { className: "aui-edit-composer-root border-border/60 ms-auto flex w-full max-w-[85%] flex-col rounded-(--composer-radius) border bg-(--composer-bg) shadow-200", children: [
       /* @__PURE__ */ e(
         s.Input,
         {
@@ -254,9 +258,9 @@ const me = () => /* @__PURE__ */ e(s.Root, { className: "aui-composer-root anima
           autoFocus: !0
         }
       ),
-      /* @__PURE__ */ f("div", { className: "aui-edit-composer-footer mx-2.5 mb-2.5 flex items-center gap-1.5 self-end", children: [
+      /* @__PURE__ */ p("div", { className: "aui-edit-composer-footer mx-2.5 mb-2.5 flex items-center gap-1.5 self-end", children: [
         /* @__PURE__ */ e(s.Cancel, { asChild: !0, children: /* @__PURE__ */ e(
-          N,
+          A,
           {
             variant: "ghost",
             size: "sm",
@@ -264,13 +268,13 @@ const me = () => /* @__PURE__ */ e(s.Root, { className: "aui-composer-root anima
             children: "Cancel"
           }
         ) }),
-        /* @__PURE__ */ e(s.Send, { asChild: !0, children: /* @__PURE__ */ e(N, { size: "sm", className: "h-8 rounded-full px-3.5", children: "Update" }) })
+        /* @__PURE__ */ e(s.Send, { asChild: !0, children: /* @__PURE__ */ e(A, { size: "sm", className: "h-8 rounded-full px-3.5", children: "Update" }) })
       ] })
     ] })
   }
 );
 export {
-  me as Composer,
-  de as ComposerPlaceholdersProvider,
-  pe as EditComposer
+  pe as Composer,
+  me as ComposerPlaceholdersProvider,
+  fe as EditComposer
 };