@actioneer/ads 0.2.3 → 0.3.0

package/components/ai-elements/message.js

@@ -1,65 +1,102 @@
 "use client";
-import { jsx as r, jsxs as f, Fragment as N } from "react/jsx-runtime";
+import { jsx as r, jsxs as h, Fragment as w } from "react/jsx-runtime";
 import * as o from "react";
-import { cva as M } from "class-variance-authority";
-import { cn as l } from "../../lib/cn.js";
-import { Button as p } from "../button.js";
-import { Avatar as w } from "../avatar.js";
-import { Tooltip as x } from "../tooltip.js";
+import { cva as x } from "class-variance-authority";
+import { cn as i } from "../../lib/cn.js";
+import { Button as f } from "../button.js";
+import { Avatar as M } from "../avatar.js";
+import { Tooltip as b } from "../tooltip.js";
 import { ChevronLeft as B, ChevronRight as R, Paperclip as A, Close as C } from "../../lib/icons.js";
-const z = o.forwardRef(
-  ({ className: e, from: t, ...s }, a) => /* @__PURE__ */ r(
+const z = x("group flex w-full max-w-[95%] flex-col gap-2", {
+  variants: {
+    align: {
+      start: "is-align-start mr-auto items-start",
+      end: "is-align-end ml-auto items-end"
+    }
+  },
+  defaultVariants: { align: "start" }
+}), k = o.forwardRef(
+  ({ align: e, className: t, from: a, ...s }, n) => /* @__PURE__ */ r(
     "div",
     {
-      ref: a,
-      className: l(
-        "group flex w-full max-w-[95%] flex-col gap-2",
-        t === "user" ? "is-user ml-auto justify-end" : "is-assistant",
-        e
+      ref: n,
+      className: i(
+        z({ align: e ?? "start" }),
+        a === "user" ? "is-user" : "is-assistant",
+        t
       ),
       ...s
     }
   )
 );
-z.displayName = "Message";
-const k = M(
-  "flex w-fit max-w-full min-w-0 flex-col gap-2 overflow-hidden text-base",
+k.displayName = "Message";
+const P = x(
+  "flex max-w-full min-w-0 flex-col gap-2 overflow-hidden text-base",
   {
     variants: {
       variant: {
         // Contained: the user turn reads as a quiet filled bubble; the
         // assistant turn is plain full-width text.
-        contained: "group-[.is-user]:ml-auto group-[.is-user]:rounded-xl group-[.is-user]:bg-muted group-[.is-user]:px-4 group-[.is-user]:py-2.5 group-[.is-user]:text-foreground group-[.is-assistant]:text-foreground",
+        contained: "w-fit group-[.is-user]:rounded-xl group-[.is-user]:bg-muted group-[.is-user]:px-4 group-[.is-user]:py-2.5 group-[.is-user]:text-foreground group-[.is-assistant]:text-foreground",
         // Flat: the user turn steps to a recessed tint (no bubble); the
         // assistant turn is full-width plain text — a cleaner, modern look.
-        flat: "group-[.is-user]:ml-auto group-[.is-user]:rounded-lg group-[.is-user]:bg-surface group-[.is-user]:px-3 group-[.is-user]:py-2 group-[.is-user]:text-foreground group-[.is-assistant]:text-foreground"
+        flat: "w-fit group-[.is-user]:rounded-lg group-[.is-user]:bg-surface group-[.is-user]:px-3 group-[.is-user]:py-2 group-[.is-user]:text-foreground group-[.is-assistant]:text-foreground",
+        // Plain: no fill, radius, or padding. Pair `align="start"` with a
+        // user turn for the clean, left-aligned prompt treatment.
+        plain: "w-full text-foreground group-[.is-user]:text-lg",
+        // Request: the user turn is a brief put forward for research, not a
+        // chat utterance — no fill, no rule, full width, set large and light
+        // so it leads the turn on size alone. The answer below is its body.
+        // `text-2xl` (26px) is the TOP of the type scale — the request must
+        // outrank every heading around it, including a `Heading level={1}`
+        // page title, or it stops reading as the thing being asked.
+        // `gap-4` sets the question-to-MessageMeta distance (16px): the
+        // parameters read as part of the request, and the thread's own
+        // turn gap (32px) is the larger break before the answer.
+        request: "w-full text-foreground group-[.is-user]:gap-4 group-[.is-user]:text-2xl group-[.is-user]:leading-snug"
       }
     },
-    defaultVariants: { variant: "contained" }
+    defaultVariants: { variant: "request" }
   }
-), P = o.forwardRef(({ children: e, className: t, variant: s, ...a }, n) => /* @__PURE__ */ r(
+), T = o.forwardRef(({ children: e, className: t, variant: a, ...s }, n) => /* @__PURE__ */ r(
   "div",
   {
     ref: n,
-    className: l(k({ variant: s }), t),
-    ...a,
+    className: i(P({ variant: a }), t),
+    ...s,
     children: e
   }
 ));
-P.displayName = "MessageContent";
-const T = o.forwardRef(({ src: e, name: t, className: s, ...a }, n) => /* @__PURE__ */ r(
-  w,
+T.displayName = "MessageContent";
+const j = o.forwardRef(
+  ({ className: e, ...t }, a) => /* @__PURE__ */ r(
+    "div",
+    {
+      ref: a,
+      "data-slot": "message-meta",
+      className: i(
+        "flex flex-wrap items-center gap-x-2 gap-y-1.5",
+        "text-xs font-normal leading-normal tracking-normal text-tertiary",
+        e
+      ),
+      ...t
+    }
+  )
+);
+j.displayName = "MessageMeta";
+const V = o.forwardRef(({ src: e, name: t, className: a, ...s }, n) => /* @__PURE__ */ r(
+  M,
   {
     ref: n,
     src: e,
     name: t,
     size: "sm",
-    className: l("ring-2 ring-background", s),
-    ...a
+    className: i("ring-2 ring-background", a),
+    ...s
   }
 ));
-T.displayName = "MessageAvatar";
-const j = l(
+V.displayName = "MessageAvatar";
+const S = i(
   "size-full text-base leading-relaxed text-foreground",
   "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
   "[&_p]:my-2",
@@ -70,83 +107,89 @@ const j = l(
   "[&_a]:font-medium [&_a]:underline [&_a]:underline-offset-2",
   "[&_code]:rounded-xs [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:text-xs [&_code]:tabular-nums",
   "[&_pre]:my-3 [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:bg-surface [&_pre]:p-3 [&_pre]:text-xs [&_pre_code]:bg-transparent [&_pre_code]:p-0",
-  "[&_table]:my-3 [&_table]:w-full [&_table]:text-xs [&_th]:px-2 [&_th]:py-1.5 [&_th]:text-left [&_th]:font-bold [&_td]:px-2 [&_td]:py-1.5 [&_thead]:text-secondary"
-), S = o.memo(
+  // Markdown tables only. Scoped off `[data-slot=table]` so a composed ADS
+  // <Table> nested in a response keeps its own padding and per-column
+  // alignment — unscoped, these descendant rules silently beat it.
+  "[&_table:not([data-slot=table])]:my-3 [&_table:not([data-slot=table])]:w-full [&_table:not([data-slot=table])]:text-xs",
+  "[&_table:not([data-slot=table])_th]:px-2 [&_table:not([data-slot=table])_th]:py-1.5 [&_table:not([data-slot=table])_th]:text-left [&_table:not([data-slot=table])_th]:font-bold",
+  "[&_table:not([data-slot=table])_td]:px-2 [&_table:not([data-slot=table])_td]:py-1.5",
+  "[&_table:not([data-slot=table])_thead]:text-secondary"
+), W = o.memo(
   o.forwardRef(
-    ({ className: e, children: t, ...s }, a) => /* @__PURE__ */ r("div", { ref: a, className: l(j, e), ...s, children: t })
+    ({ className: e, children: t, ...a }, s) => /* @__PURE__ */ r("div", { ref: s, className: i(S, e), ...a, children: t })
   ),
   (e, t) => e.children === t.children
 );
-S.displayName = "MessageResponse";
-const V = o.forwardRef(({ className: e, children: t, ...s }, a) => /* @__PURE__ */ r(
+W.displayName = "MessageResponse";
+const q = o.forwardRef(({ className: e, children: t, ...a }, s) => /* @__PURE__ */ r(
   "div",
   {
-    ref: a,
-    className: l("flex items-center gap-1", e),
-    ...s,
+    ref: s,
+    className: i("flex items-center gap-1", e),
+    ...a,
     children: t
   }
 ));
-V.displayName = "MessageActions";
-const W = o.forwardRef(
-  ({ tooltip: e, children: t, label: s, variant: a = "ghost", size: n = "icon-sm", ...i }, d) => {
-    const c = /* @__PURE__ */ f(p, { ref: d, size: n, type: "button", variant: a, ...i, children: [
+q.displayName = "MessageActions";
+const E = o.forwardRef(
+  ({ tooltip: e, children: t, label: a, variant: s = "ghost", size: n = "icon-sm", ...l }, d) => {
+    const c = /* @__PURE__ */ h(f, { ref: d, size: n, type: "button", variant: s, ...l, children: [
       t,
-      /* @__PURE__ */ r("span", { className: "sr-only", children: s || e })
+      /* @__PURE__ */ r("span", { className: "sr-only", children: a || e })
     ] });
-    return e ? /* @__PURE__ */ r(x, { content: e, children: c }) : c;
+    return e ? /* @__PURE__ */ r(b, { content: e, children: c }) : c;
   }
 );
-W.displayName = "MessageAction";
-const _ = o.createContext(null), m = () => {
+E.displayName = "MessageAction";
+const _ = o.createContext(null), g = () => {
   const e = o.useContext(_);
   if (!e)
     throw new Error(
       "MessageBranch components must be used within MessageBranch"
     );
   return e;
-}, E = o.forwardRef(({ defaultBranch: e = 0, onBranchChange: t, className: s, ...a }, n) => {
-  const [i, d] = o.useState(e), [c, g] = o.useState([]), h = (u) => {
+}, I = o.forwardRef(({ defaultBranch: e = 0, onBranchChange: t, className: a, ...s }, n) => {
+  const [l, d] = o.useState(e), [c, m] = o.useState([]), p = (u) => {
     d(u), t == null || t(u);
-  }, b = () => {
-    const u = i > 0 ? i - 1 : c.length - 1;
-    h(u);
+  }, v = () => {
+    const u = l > 0 ? l - 1 : c.length - 1;
+    p(u);
   }, y = () => {
-    const u = i < c.length - 1 ? i + 1 : 0;
-    h(u);
-  }, v = {
-    currentBranch: i,
+    const u = l < c.length - 1 ? l + 1 : 0;
+    p(u);
+  }, N = {
+    currentBranch: l,
     totalBranches: c.length,
-    goToPrevious: b,
+    goToPrevious: v,
     goToNext: y,
     branches: c,
-    setBranches: g
+    setBranches: m
   };
-  return /* @__PURE__ */ r(_.Provider, { value: v, children: /* @__PURE__ */ r(
+  return /* @__PURE__ */ r(_.Provider, { value: N, children: /* @__PURE__ */ r(
     "div",
     {
       ref: n,
-      className: l("grid w-full gap-2 [&>div]:pb-0", s),
-      ...a
+      className: i("grid w-full gap-2 [&>div]:pb-0", a),
+      ...s
     }
   ) });
 });
-E.displayName = "MessageBranch";
-const I = ({
+I.displayName = "MessageBranch";
+const L = ({
   children: e,
   ...t
 }) => {
-  const { currentBranch: s, setBranches: a, branches: n } = m(), i = o.Children.toArray(
+  const { currentBranch: a, setBranches: s, branches: n } = g(), l = o.Children.toArray(
     e
   );
   return o.useEffect(() => {
-    n.length !== i.length && a(i);
-  }, [i, n, a]), /* @__PURE__ */ r(N, { children: i.map((d, c) => /* @__PURE__ */ r(
+    n.length !== l.length && s(l);
+  }, [l, n, s]), /* @__PURE__ */ r(w, { children: l.map((d, c) => /* @__PURE__ */ r(
     "div",
     {
-      className: l(
+      className: i(
         "grid gap-2 overflow-hidden [&>div]:pb-0",
-        c === s ? "block" : "hidden"
+        c === a ? "block" : "hidden"
       ),
       ...t,
       children: d
@@ -154,28 +197,28 @@ const I = ({
     d.key
   )) });
 };
-I.displayName = "MessageBranchContent";
-const L = o.forwardRef(({ className: e, from: t, ...s }, a) => {
-  const { totalBranches: n } = m();
+L.displayName = "MessageBranchContent";
+const F = o.forwardRef(({ className: e, from: t, ...a }, s) => {
+  const { totalBranches: n } = g();
   return n <= 1 ? null : /* @__PURE__ */ r(
     "div",
     {
-      ref: a,
-      className: l("inline-flex items-center gap-0.5", e),
-      ...s
+      ref: s,
+      className: i("inline-flex items-center gap-0.5", e),
+      ...a
     }
   );
 });
-L.displayName = "MessageBranchSelector";
-const F = o.forwardRef(({ children: e, ...t }, s) => {
-  const { goToPrevious: a, totalBranches: n } = m();
+F.displayName = "MessageBranchSelector";
+const D = o.forwardRef(({ children: e, ...t }, a) => {
+  const { goToPrevious: s, totalBranches: n } = g();
   return /* @__PURE__ */ r(
-    p,
+    f,
     {
-      ref: s,
+      ref: a,
       "aria-label": "Previous branch",
       disabled: n <= 1,
-      onClick: a,
+      onClick: s,
       size: "icon-sm",
       type: "button",
       variant: "ghost",
@@ -184,16 +227,16 @@ const F = o.forwardRef(({ children: e, ...t }, s) => {
     }
   );
 });
-F.displayName = "MessageBranchPrevious";
-const q = o.forwardRef(({ children: e, ...t }, s) => {
-  const { goToNext: a, totalBranches: n } = m();
+D.displayName = "MessageBranchPrevious";
+const G = o.forwardRef(({ children: e, ...t }, a) => {
+  const { goToNext: s, totalBranches: n } = g();
   return /* @__PURE__ */ r(
-    p,
+    f,
     {
-      ref: s,
+      ref: a,
       "aria-label": "Next branch",
       disabled: n <= 1,
-      onClick: a,
+      onClick: s,
       size: "icon-sm",
       type: "button",
       variant: "ghost",
@@ -202,39 +245,39 @@ const q = o.forwardRef(({ children: e, ...t }, s) => {
     }
   );
 });
-q.displayName = "MessageBranchNext";
-const D = o.forwardRef(({ className: e, ...t }, s) => {
-  const { currentBranch: a, totalBranches: n } = m();
-  return /* @__PURE__ */ f(
+G.displayName = "MessageBranchNext";
+const H = o.forwardRef(({ className: e, ...t }, a) => {
+  const { currentBranch: s, totalBranches: n } = g();
+  return /* @__PURE__ */ h(
     "span",
     {
-      ref: s,
-      className: l(
+      ref: a,
+      className: i(
         "px-1.5 text-xs tabular-nums text-tertiary select-none",
         e
       ),
       ...t,
       children: [
-        a + 1,
+        s + 1,
         " of ",
         n
       ]
     }
   );
 });
-D.displayName = "MessageBranchPage";
-const G = o.forwardRef(({ data: e, className: t, onRemove: s, ...a }, n) => {
-  var g;
-  const i = e.filename || "", d = !!((g = e.mediaType) != null && g.startsWith("image/") && e.url), c = i || (d ? "Image" : "Attachment");
-  return /* @__PURE__ */ f(
+H.displayName = "MessageBranchPage";
+const J = o.forwardRef(({ data: e, className: t, onRemove: a, ...s }, n) => {
+  var m;
+  const l = e.filename || "", d = !!((m = e.mediaType) != null && m.startsWith("image/") && e.url), c = l || (d ? "Image" : "Attachment");
+  return /* @__PURE__ */ h(
     "div",
     {
       ref: n,
-      className: l(
+      className: i(
         "group/attachment relative size-24 overflow-hidden rounded-lg bg-muted",
         t
       ),
-      ...a,
+      ...s,
       children: [
         d ? /* @__PURE__ */ r(
           "img",
@@ -243,17 +286,17 @@ const G = o.forwardRef(({ data: e, className: t, onRemove: s, ...a }, n) => {
             className: "size-full object-cover",
             src: e.url
           }
-        ) : /* @__PURE__ */ r(x, { content: c, children: /* @__PURE__ */ r("div", { className: "flex size-full items-center justify-center text-muted-foreground", children: /* @__PURE__ */ r(A, { className: "size-4" }) }) }),
-        s && /* @__PURE__ */ r(
-          p,
+        ) : /* @__PURE__ */ r(b, { content: c, children: /* @__PURE__ */ r("div", { className: "flex size-full items-center justify-center text-muted-foreground", children: /* @__PURE__ */ r(A, { className: "size-4" }) }) }),
+        a && /* @__PURE__ */ r(
+          f,
           {
             "aria-label": "Remove attachment",
-            className: l(
+            className: i(
               "absolute top-1.5 right-1.5 size-6 rounded-full p-0 opacity-0 transition-opacity group-hover/attachment:opacity-100",
               d && "bg-elevated/80 backdrop-blur-sm hover:bg-elevated"
             ),
-            onClick: (h) => {
-              h.stopPropagation(), s();
+            onClick: (p) => {
+              p.stopPropagation(), a();
             },
             size: "icon-xs",
             type: "button",
@@ -265,44 +308,48 @@ const G = o.forwardRef(({ data: e, className: t, onRemove: s, ...a }, n) => {
     }
   );
 });
-G.displayName = "MessageAttachment";
-const H = o.forwardRef(({ children: e, className: t, ...s }, a) => e ? /* @__PURE__ */ r(
+J.displayName = "MessageAttachment";
+const K = o.forwardRef(({ children: e, className: t, ...a }, s) => e ? /* @__PURE__ */ r(
   "div",
   {
-    ref: a,
-    className: l("ml-auto flex w-fit flex-wrap items-start gap-2", t),
-    ...s,
+    ref: s,
+    className: i(
+      "flex w-fit flex-wrap items-start gap-2 group-[.is-align-start]:mr-auto group-[.is-align-end]:ml-auto",
+      t
+    ),
+    ...a,
     children: e
   }
 ) : null);
-H.displayName = "MessageAttachments";
-const J = o.forwardRef(({ className: e, children: t, ...s }, a) => /* @__PURE__ */ r(
+K.displayName = "MessageAttachments";
+const O = o.forwardRef(({ className: e, children: t, ...a }, s) => /* @__PURE__ */ r(
   "div",
   {
-    ref: a,
-    className: l(
+    ref: s,
+    className: i(
       "mt-3 flex w-full items-center justify-between gap-4",
       e
     ),
-    ...s,
+    ...a,
     children: t
   }
 ));
-J.displayName = "MessageToolbar";
+O.displayName = "MessageToolbar";
 export {
-  z as Message,
-  W as MessageAction,
-  V as MessageActions,
-  G as MessageAttachment,
-  H as MessageAttachments,
-  T as MessageAvatar,
-  E as MessageBranch,
-  I as MessageBranchContent,
-  q as MessageBranchNext,
-  D as MessageBranchPage,
-  F as MessageBranchPrevious,
-  L as MessageBranchSelector,
-  P as MessageContent,
-  S as MessageResponse,
-  J as MessageToolbar
+  k as Message,
+  E as MessageAction,
+  q as MessageActions,
+  J as MessageAttachment,
+  K as MessageAttachments,
+  V as MessageAvatar,
+  I as MessageBranch,
+  L as MessageBranchContent,
+  G as MessageBranchNext,
+  H as MessageBranchPage,
+  D as MessageBranchPrevious,
+  F as MessageBranchSelector,
+  T as MessageContent,
+  j as MessageMeta,
+  W as MessageResponse,
+  O as MessageToolbar
 };

package/components/ai-elements/research-activity.d.ts

@@ -0,0 +1,45 @@
+import * as React from "react";
+export type ResearchActivityStatus = "active" | "complete";
+export interface ResearchActivityProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    status: ResearchActivityStatus;
+    /** Consumer-formatted elapsed or total time, for example `0:36`. */
+    elapsed: React.ReactNode;
+    sourceCount: number;
+    /** Consumer-formatted time to the first useful result. */
+    firstInsight?: React.ReactNode;
+    /**
+     * What the agent is doing right now, e.g. "Querying NPA movement". When
+     * provided, the active state renders as a single live line that morphs
+     * between steps — the trace stays behind a click instead of stacking above
+     * the answer. Without it, the active trace opens in full (legacy behavior).
+     */
+    activity?: React.ReactNode;
+    /** Keys the live-line morph. Required when `activity` is not a string. */
+    activityKey?: string | number;
+    /** 1-based position of the current step — renders a quiet "3 of 7" before the elapsed time. */
+    stepIndex?: number;
+    /** Total planned steps; the counter renders only when both are provided. */
+    stepCount?: number;
+    /** Replaces the generated completed summary. */
+    summary?: React.ReactNode;
+    /**
+     * Pin the summary/live line to the top of the scroll container while the
+     * trace beneath it scrolls. For long open traces, where the line would
+     * otherwise scroll away exactly when the run is still moving.
+     */
+    sticky?: boolean;
+    /** Controlled disclosure of the trace. */
+    open?: boolean;
+    /** Initial disclosure state. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: React.ReactNode;
+}
+/**
+ * Streaming research disclosure. With an `activity`, the run reads as a single
+ * live line — the current step morphing in place while the full trace waits
+ * one click away — and completion settles the same line into a source/timing
+ * summary. A reader's expand/collapse choice sticks across the transition.
+ * Without an `activity`, the active trace stays fully open (legacy behavior).
+ */
+export declare const ResearchActivity: React.ForwardRefExoticComponent<ResearchActivityProps & React.RefAttributes<HTMLDivElement>>;