@actioneer/ads 0.2.3 → 0.3.0

package/components/ai-elements/chart.d.ts

@@ -0,0 +1,30 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+export declare const aiChartVariants: (props?: ({
+    status?: "error" | "pending" | "querying" | "partial" | "rendering" | "ready" | "cancelled" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type AIChartStatus = NonNullable<VariantProps<typeof aiChartVariants>["status"]>;
+export interface AIChartProgress {
+    received: number;
+    total?: number;
+}
+export interface AIChartProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "title">, VariantProps<typeof aiChartVariants> {
+    title: React.ReactNode;
+    tag?: React.ReactNode;
+    source?: string;
+    progress?: AIChartProgress;
+    /** Consumer-formatted elapsed time, for example `0:36` or `3:42`. */
+    elapsed?: string;
+    /** Replaces the status/progress metadata at the end of the trigger row. */
+    meta?: React.ReactNode;
+    /** Concise nonvisual summary of the chart's result and important values. */
+    accessibleSummary?: React.ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onSourceSelect?: (source: string) => void;
+    errorContent?: React.ReactNode;
+    onRetry?: () => void;
+    children?: React.ReactNode;
+}
+export declare const AIChart: React.ForwardRefExoticComponent<AIChartProps & React.RefAttributes<HTMLDivElement>>;

package/components/ai-elements/chart.js

@@ -0,0 +1,303 @@
+"use client";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import * as x from "react";
+import { cva as M } from "class-variance-authority";
+import { Badge as Q } from "../badge.js";
+import { Button as T } from "../button.js";
+import { Collapsible as V, CollapsibleTrigger as W, CollapsibleContent as E } from "../collapsible.js";
+import { Skeleton as g } from "../skeleton.js";
+import { Spinner as v } from "../spinner.js";
+import { Database as O, ChevronDown as P, WarningCircle as S, Refresh as F, CloseCircle as G } from "../../lib/icons.js";
+import { cn as d } from "../../lib/cn.js";
+const H = M(
+  "w-full overflow-hidden rounded-lg text-foreground",
+  {
+    variants: {
+      status: {
+        pending: "[&_[data-slot=ai-chart-icon]]:text-tertiary [&_[data-slot=ai-chart-meta]]:text-tertiary",
+        querying: "[&_[data-slot=ai-chart-icon]]:text-info-700 [&_[data-slot=ai-chart-meta]]:text-info-700",
+        partial: "[&_[data-slot=ai-chart-icon]]:text-info-700 [&_[data-slot=ai-chart-meta]]:text-info-700",
+        rendering: "[&_[data-slot=ai-chart-icon]]:text-info-700 [&_[data-slot=ai-chart-meta]]:text-info-700",
+        ready: "[&_[data-slot=ai-chart-icon]]:text-secondary [&_[data-slot=ai-chart-meta]]:text-tertiary",
+        error: "[&_[data-slot=ai-chart-icon]]:text-danger-700 [&_[data-slot=ai-chart-meta]]:text-danger-700",
+        cancelled: "[&_[data-slot=ai-chart-icon]]:text-tertiary [&_[data-slot=ai-chart-meta]]:text-tertiary"
+      }
+    },
+    defaultVariants: { status: "ready" }
+  }
+), J = {
+  pending: "Pending",
+  querying: "Querying",
+  partial: "Receiving",
+  rendering: "Rendering",
+  ready: "Chart",
+  error: "Error",
+  cancelled: "Cancelled"
+}, K = {
+  pending: "Chart pending",
+  querying: "Querying chart data",
+  partial: "Chart data partially received",
+  rendering: "Rendering chart",
+  ready: "Chart ready",
+  error: "Chart failed",
+  cancelled: "Chart cancelled"
+}, L = {
+  pending: "Waiting for chart data",
+  querying: "Querying chart data",
+  rendering: "Rendering chart"
+};
+function U(t) {
+  if (t)
+    return t.total == null ? `${t.received} received` : `${t.received} of ${t.total} received`;
+}
+function X(t, r, n) {
+  const o = [
+    r ? r.total == null ? `${r.received} received` : `${r.received} / ${r.total}` : J[t]
+  ];
+  return n && o.push(n), o.join(" · ");
+}
+function Y({
+  status: t
+}) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: "relative h-40 overflow-hidden rounded-md",
+      "data-slot": "ai-chart-skeleton",
+      children: [
+        /* @__PURE__ */ e(g, { className: "absolute inset-0 h-full w-full" }),
+        /* @__PURE__ */ a("div", { className: "absolute inset-0 flex items-center justify-center gap-2 text-xs text-tertiary", children: [
+          t !== "pending" && /* @__PURE__ */ e(
+            v,
+            {
+              "aria-hidden": !0,
+              role: "presentation",
+              size: "sm",
+              color: "muted"
+            }
+          ),
+          /* @__PURE__ */ e("span", { children: L[t] })
+        ] })
+      ]
+    }
+  );
+}
+function Z({
+  status: t,
+  progress: r,
+  errorContent: n,
+  onRetry: o,
+  children: s
+}) {
+  return t === "error" ? /* @__PURE__ */ a(
+    "div",
+    {
+      className: "flex min-h-40 flex-col items-center justify-center gap-3 rounded-md bg-surface p-4 text-center",
+      "data-slot": "ai-chart-error",
+      children: [
+        /* @__PURE__ */ e(S, { className: "size-5 text-danger-700", "aria-hidden": !0 }),
+        /* @__PURE__ */ e("div", { className: "text-xs text-secondary", children: n ?? "The chart could not be generated." }),
+        o && /* @__PURE__ */ e(
+          T,
+          {
+            type: "button",
+            size: "sm",
+            variant: "secondary",
+            startContent: /* @__PURE__ */ e(F, { "aria-hidden": !0 }),
+            onClick: o,
+            children: "Retry"
+          }
+        )
+      ]
+    }
+  ) : t === "cancelled" ? /* @__PURE__ */ a(
+    "div",
+    {
+      className: "flex min-h-40 flex-col items-center justify-center gap-2 rounded-md bg-surface p-4 text-center",
+      "data-slot": "ai-chart-cancelled",
+      children: [
+        /* @__PURE__ */ e(G, { className: "size-5 text-tertiary", "aria-hidden": !0 }),
+        /* @__PURE__ */ e("p", { className: "text-xs text-secondary", children: "Chart generation was cancelled." })
+      ]
+    }
+  ) : t === "partial" ? /* @__PURE__ */ a("div", { className: "space-y-2", "data-slot": "ai-chart-partial", children: [
+    /* @__PURE__ */ a("div", { className: "flex items-center gap-2 text-xs text-info-700", children: [
+      /* @__PURE__ */ e(
+        v,
+        {
+          "aria-hidden": !0,
+          role: "presentation",
+          size: "sm",
+          color: "current"
+        }
+      ),
+      /* @__PURE__ */ e("span", { children: U(r) ?? "Receiving chart data" })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "min-h-40", children: s ?? /* @__PURE__ */ e(g, { className: "h-40 w-full" }) })
+  ] }) : t !== "ready" ? /* @__PURE__ */ e(Y, { status: t }) : (
+    // The ready chart draws itself in left→right (the reveal wipe) instead of
+    // popping after the loading state — data entrance, not chrome.
+    /* @__PURE__ */ e("div", { className: "ads-reveal ads-reveal-wipe min-h-40", "data-slot": "ai-chart-visual", children: s })
+  );
+}
+const ee = x.forwardRef(
+  ({
+    className: t,
+    status: r,
+    title: n,
+    tag: o,
+    source: s,
+    progress: l,
+    elapsed: y,
+    meta: c,
+    accessibleSummary: u,
+    open: b,
+    defaultOpen: N = !1,
+    onOpenChange: C,
+    onSourceSelect: m,
+    errorContent: _,
+    onRetry: w,
+    children: k,
+    role: A = "region",
+    "aria-label": R,
+    "aria-describedby": j,
+    "aria-busy": z,
+    ...I
+  }, $) => {
+    const i = r ?? "ready", B = i === "querying" || i === "partial" || i === "rendering", h = c !== void 0 ? c : X(i, l, y), q = K[i], f = x.useId(), p = i === "ready" && u != null, D = [
+      j,
+      p ? f : void 0
+    ].filter(Boolean).join(" ") || void 0;
+    return /* @__PURE__ */ a(
+      V,
+      {
+        ref: $,
+        open: b,
+        defaultOpen: N,
+        onOpenChange: C,
+        role: A,
+        "aria-label": R ?? (typeof n == "string" ? n : "AI chart evidence"),
+        "aria-describedby": D,
+        "data-slot": "ai-chart",
+        "data-status": i,
+        className: d(H({ status: i }), t),
+        ...I,
+        children: [
+          /* @__PURE__ */ e(
+            "span",
+            {
+              className: "sr-only",
+              role: "status",
+              "aria-live": "polite",
+              "aria-atomic": "true",
+              children: q
+            }
+          ),
+          p && /* @__PURE__ */ e("span", { id: f, className: "sr-only", children: u }),
+          /* @__PURE__ */ e(W, { asChild: !0, children: /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              className: d(
+                "group/ai-chart-trigger flex min-h-9 w-full items-center gap-2 rounded-md px-1 py-1 text-left",
+                "outline-none transition-[background,color,transform] duration-(--duration-fast) ease-out hover:bg-muted active:scale-(--scale-press)",
+                "focus-visible:ring-3 focus-visible:ring-inset focus-visible:ring-ring motion-reduce:transition-none"
+              ),
+              children: [
+                /* @__PURE__ */ e(
+                  O,
+                  {
+                    "data-slot": "ai-chart-icon",
+                    className: "size-4 shrink-0",
+                    "aria-hidden": !0
+                  }
+                ),
+                /* @__PURE__ */ e("span", { className: "min-w-0 truncate text-xs font-medium text-secondary", children: n }),
+                o != null && /* @__PURE__ */ e(
+                  Q,
+                  {
+                    className: "shrink-0 rounded-sm px-1.5 font-normal",
+                    color: "default",
+                    variant: "solid",
+                    children: o
+                  }
+                ),
+                h != null && /* @__PURE__ */ e(
+                  "span",
+                  {
+                    "data-slot": "ai-chart-meta",
+                    className: "ml-auto shrink-0 text-xs tabular-nums",
+                    children: h
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  P,
+                  {
+                    className: "size-4 shrink-0 text-tertiary transition-transform duration-(--duration-normal) ease-out group-data-[state=open]/ai-chart-trigger:rotate-180 motion-reduce:transition-none",
+                    "aria-hidden": !0
+                  }
+                )
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ a(
+            E,
+            {
+              className: d(
+                "overflow-hidden px-2.5 pb-2.5 outline-none",
+                "data-[state=closed]:pointer-events-none data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 data-[state=closed]:animate-out data-[state=open]:animate-in motion-reduce:animate-none"
+              ),
+              children: [
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    "data-slot": "ai-chart-body",
+                    "aria-busy": z ?? (B || void 0),
+                    children: /* @__PURE__ */ e(
+                      Z,
+                      {
+                        status: i,
+                        progress: l,
+                        errorContent: _,
+                        onRetry: w,
+                        children: k
+                      }
+                    )
+                  }
+                ),
+                s && /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: "mt-2 text-xs text-tertiary",
+                    "data-slot": "ai-chart-source",
+                    children: m ? /* @__PURE__ */ a(
+                      "button",
+                      {
+                        type: "button",
+                        className: "rounded-sm text-left outline-none transition-colors duration-(--duration-fast) ease-out hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring motion-reduce:transition-none",
+                        "aria-label": `Open source ${s}`,
+                        onClick: () => m(s),
+                        children: [
+                          "from ",
+                          /* @__PURE__ */ e("span", { className: "font-medium tabular-nums", children: s })
+                        ]
+                      }
+                    ) : /* @__PURE__ */ a("p", { children: [
+                      "from ",
+                      /* @__PURE__ */ e("span", { className: "font-medium tabular-nums", children: s })
+                    ] })
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ee.displayName = "AIChart";
+export {
+  ee as AIChart,
+  H as aiChartVariants
+};

package/components/ai-elements/index.d.ts

@@ -1,8 +1,9 @@
 export * from './chain-of-thought';
+export * from './chart';
 export * from './inline-citation';
 export * from './message';
 export * from './queue';
-export * from './reasoning';
+export * from './research-activity';
 export * from './shimmer';
 export * from './speech-input';
 export * from './task';

package/components/ai-elements/message.d.ts

@@ -19,19 +19,34 @@ export type MessageFilePart = {
     mediaType?: string;
     filename?: string;
 };
-export type MessageProps = React.HTMLAttributes<HTMLDivElement> & {
+declare const messageVariants: (props?: ({
+    align?: "end" | "start" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type MessageProps = Omit<React.HTMLAttributes<HTMLDivElement>, "align"> & VariantProps<typeof messageVariants> & {
     from: MessageRole;
 };
-export declare const Message: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+export declare const Message: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "align"> & VariantProps<(props?: ({
+    align?: "end" | "start" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string> & {
     from: MessageRole;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const messageContentVariants: (props?: ({
-    variant?: "flat" | "contained" | null | undefined;
+    variant?: "flat" | "plain" | "contained" | "request" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type MessageContentProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof messageContentVariants>;
 export declare const MessageContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "flat" | "contained" | null | undefined;
+    variant?: "flat" | "plain" | "contained" | "request" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
+export type MessageMetaProps = React.HTMLAttributes<HTMLDivElement>;
+/**
+ * The quiet line beneath a request — when it was sent, and the parameters it
+ * carried (harness, research mode, sources). Place it after the question so
+ * the question leads and the metadata supports it.
+ *
+ * It resets the display typography the `request` variant applies to the user
+ * turn; without that reset the metadata inherits the question's size.
+ */
+export declare const MessageMeta: React.ForwardRefExoticComponent<MessageMetaProps & React.RefAttributes<HTMLDivElement>>;
 export type MessageAvatarProps = React.HTMLAttributes<HTMLSpanElement> & {
     src: string;
     name?: string;