@actioneer/ads 0.1.0

package/components/answer.js

@@ -0,0 +1,543 @@
+"use client";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import * as h from "react";
+import { cva as E } from "class-variance-authority";
+import { z as t } from "zod/v4";
+import { Alert as B, AlertTitle as L, AlertDescription as $ } from "./alert.js";
+import { Badge as g } from "./badge.js";
+import { Button as D } from "./button.js";
+import { FollowUpSuggestion as O } from "./assistant-ui/follow-up-suggestions.js";
+import { AreaChart as V, BarChart as _, LineChart as z } from "./chart.js";
+import { Progress as P } from "./progress.js";
+import { cn as c } from "../lib/cn.js";
+const I = "render_answer", K = "Render the final answer with one curated ADS template. Choose the semantic kind that best matches the answer and provide only validated data; the application owns the layout.", x = t.enum([
+  "default",
+  "primary",
+  "success",
+  "warning",
+  "danger",
+  "info"
+]), M = t.object({
+  id: t.string().min(1),
+  label: t.string().min(1),
+  prompt: t.string().min(1).optional()
+}), W = t.object({
+  id: t.string().min(1),
+  label: t.string().min(1),
+  description: t.string().optional()
+}), b = t.object({
+  label: t.string().optional(),
+  text: t.string().min(1),
+  tone: x.optional()
+}), p = {
+  eyebrow: t.string().optional(),
+  headline: t.string().min(1),
+  summary: t.string().optional(),
+  followUps: t.array(M).max(3).optional(),
+  sources: t.array(W).max(8).optional()
+}, A = t.object({
+  value: t.string().min(1),
+  detail: t.string().optional(),
+  tone: x.optional()
+}), F = t.object({
+  ...p,
+  kind: t.literal("comparison"),
+  subjects: t.tuple([
+    t.object({ label: t.string().min(1), description: t.string().optional() }),
+    t.object({ label: t.string().min(1), description: t.string().optional() })
+  ]),
+  rows: t.array(
+    t.object({
+      label: t.string().min(1),
+      values: t.tuple([A, A]),
+      delta: t.object({
+        value: t.string().min(1),
+        tone: x.optional()
+      }).optional()
+    })
+  ).min(1).max(8),
+  takeaway: b.optional()
+}), v = t.enum([
+  "primary",
+  "success",
+  "warning",
+  "danger",
+  "info"
+]), H = t.discriminatedUnion("kind", [
+  t.object({
+    kind: t.literal("line"),
+    value: t.union([t.number(), t.string()]),
+    axis: t.enum(["x", "y"]).optional(),
+    label: t.string().optional(),
+    color: v.optional()
+  }),
+  t.object({
+    kind: t.literal("band"),
+    from: t.union([t.number(), t.string()]),
+    to: t.union([t.number(), t.string()]),
+    axis: t.enum(["x", "y"]).optional(),
+    label: t.string().optional(),
+    color: v.optional()
+  }),
+  t.object({
+    kind: t.literal("point"),
+    x: t.union([t.number(), t.string()]),
+    y: t.number(),
+    label: t.string().min(1),
+    description: t.string().optional(),
+    color: v.optional()
+  })
+]), q = t.record(
+  t.string(),
+  t.union([t.string(), t.number(), t.null()])
+), G = t.object({
+  ...p,
+  kind: t.literal("trend"),
+  metric: t.object({
+    label: t.string().min(1),
+    value: t.string().min(1),
+    change: t.string().optional(),
+    tone: x.optional()
+  }).optional(),
+  chart: t.object({
+    type: t.enum(["line", "area", "bar"]),
+    data: t.array(q).min(1).max(100),
+    categoryKey: t.string().min(1),
+    series: t.array(t.string().min(1)).min(1).max(4),
+    seriesLabels: t.record(t.string(), t.string()).optional(),
+    highlight: t.string().optional(),
+    unit: t.string().optional(),
+    annotations: t.array(H).max(8).optional()
+  }),
+  insight: b.optional()
+}), J = t.object({
+  ...p,
+  kind: t.literal("status"),
+  overall: t.object({
+    label: t.string().min(1),
+    value: t.string().min(1),
+    tone: x.optional()
+  }).optional(),
+  items: t.array(
+    t.object({
+      label: t.string().min(1),
+      status: t.string().min(1),
+      detail: t.string().optional(),
+      meta: t.string().optional(),
+      tone: x.optional()
+    })
+  ).min(1).max(12),
+  recommendation: b.optional()
+}), Q = t.object({
+  ...p,
+  kind: t.literal("breakdown"),
+  total: t.object({ label: t.string().min(1), value: t.string().min(1) }).optional(),
+  items: t.array(
+    t.object({
+      label: t.string().min(1),
+      value: t.string().min(1),
+      share: t.number().min(0).max(100),
+      detail: t.string().optional(),
+      tone: x.optional()
+    })
+  ).min(1).max(12),
+  insight: b.optional()
+}), X = t.object({
+  ...p,
+  kind: t.literal("explanation"),
+  sections: t.array(
+    t.object({
+      title: t.string().min(1),
+      body: t.string().optional(),
+      bullets: t.array(t.string().min(1)).max(5).optional()
+    })
+  ).min(1).max(6),
+  takeaway: b.optional()
+}), Y = t.discriminatedUnion("kind", [
+  F,
+  G,
+  J,
+  Q,
+  X
+]), ht = {
+  name: I,
+  description: K,
+  inputSchema: Y
+}, N = E("font-semibold tabular-nums text-foreground", {
+  variants: {
+    tone: {
+      default: "text-foreground",
+      primary: "text-brand",
+      success: "text-success-700",
+      warning: "text-warning-700",
+      danger: "text-danger-700",
+      info: "text-info-700"
+    }
+  },
+  defaultVariants: { tone: "default" }
+}), Z = new Intl.NumberFormat("en-US", {
+  notation: "compact",
+  maximumFractionDigits: 1
+}), U = (a) => a === "success" || a === "warning" || a === "danger" || a === "info" ? a : "default", tt = (a) => a === "success" || a === "warning" || a === "danger" || a === "info" ? a : "primary";
+function f({ spec: a }) {
+  return /* @__PURE__ */ i("div", { className: "space-y-2", children: [
+    a.eyebrow && /* @__PURE__ */ e("p", { className: "text-xs font-semibold uppercase tracking-wider text-tertiary", children: a.eyebrow }),
+    /* @__PURE__ */ e("h2", { className: "max-w-2xl text-xl font-bold leading-tight tracking-tight text-foreground", children: a.headline }),
+    a.summary && /* @__PURE__ */ e("p", { className: "max-w-2xl text-sm leading-6 text-secondary", children: a.summary })
+  ] });
+}
+function y({ signal: a }) {
+  return /* @__PURE__ */ i(B, { variant: U(a.tone), children: [
+    /* @__PURE__ */ e(L, { children: a.label ?? "Takeaway" }),
+    /* @__PURE__ */ e($, { children: a.text })
+  ] });
+}
+function w({
+  followUps: a,
+  sources: r,
+  onFollowUp: s,
+  onSourceSelect: o
+}) {
+  return !(a != null && a.length) && !(r != null && r.length) ? null : /* @__PURE__ */ i("div", { className: "space-y-3 pt-1", children: [
+    !!(a != null && a.length) && /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2", children: a.map((l) => /* @__PURE__ */ e(
+      O,
+      {
+        type: "button",
+        disabled: !s,
+        onClick: () => s == null ? void 0 : s(l),
+        children: l.label
+      },
+      l.id
+    )) }),
+    !!(r != null && r.length) && /* @__PURE__ */ i("div", { className: "flex flex-wrap items-center gap-1.5", children: [
+      /* @__PURE__ */ e("span", { className: "mr-1 text-xs font-medium text-tertiary", children: "Sources" }),
+      r.map(
+        (l) => o ? /* @__PURE__ */ e(
+          D,
+          {
+            type: "button",
+            size: "xs",
+            variant: "ghost",
+            title: l.description,
+            className: "h-6 rounded-full px-2 text-muted-foreground",
+            onClick: () => o(l),
+            children: l.label
+          },
+          l.id
+        ) : /* @__PURE__ */ e(g, { variant: "soft", title: l.description, children: l.label }, l.id)
+      )
+    ] })
+  ] });
+}
+const j = h.forwardRef(({ spec: a, onFollowUp: r, onSourceSelect: s, className: o, ...l }, d) => /* @__PURE__ */ i(
+  "div",
+  {
+    ref: d,
+    "data-answer-kind": a.kind,
+    className: c("w-full max-w-2xl space-y-5", o),
+    ...l,
+    children: [
+      /* @__PURE__ */ e(f, { spec: a }),
+      /* @__PURE__ */ e("div", { className: "overflow-x-auto rounded-2xl bg-surface p-2", children: /* @__PURE__ */ i("table", { className: "w-full min-w-[32rem] border-separate border-spacing-y-1 text-left", children: [
+        /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ i("tr", { children: [
+          /* @__PURE__ */ e("th", { className: "w-2/5 px-3 py-2 text-xs font-medium text-tertiary", children: "Measure" }),
+          a.subjects.map((n) => /* @__PURE__ */ i("th", { className: "px-3 py-2 align-bottom", children: [
+            /* @__PURE__ */ e("span", { className: "block text-sm font-semibold text-foreground", children: n.label }),
+            n.description && /* @__PURE__ */ e("span", { className: "mt-0.5 block text-xs font-normal text-tertiary", children: n.description })
+          ] }, n.label))
+        ] }) }),
+        /* @__PURE__ */ e("tbody", { children: a.rows.map((n) => /* @__PURE__ */ i("tr", { className: "[&>*]:bg-muted/60", children: [
+          /* @__PURE__ */ i("th", { className: "rounded-l-xl px-3 py-3 text-xs font-medium text-secondary", children: [
+            /* @__PURE__ */ e("span", { children: n.label }),
+            n.delta && /* @__PURE__ */ e(
+              "span",
+              {
+                className: c(
+                  N({ tone: n.delta.tone }),
+                  "ml-2 text-xs"
+                ),
+                children: n.delta.value
+              }
+            )
+          ] }),
+          n.values.map((m, u) => /* @__PURE__ */ i(
+            "td",
+            {
+              className: c(
+                "px-3 py-3 align-top last:rounded-r-xl",
+                N({ tone: m.tone })
+              ),
+              children: [
+                /* @__PURE__ */ e("span", { className: "block text-sm", children: m.value }),
+                m.detail && /* @__PURE__ */ e("span", { className: "mt-0.5 block text-xs font-normal text-tertiary", children: m.detail })
+              ]
+            },
+            `${n.label}-${a.subjects[u].label}`
+          ))
+        ] }, n.label)) })
+      ] }) }),
+      a.takeaway && /* @__PURE__ */ e(y, { signal: a.takeaway }),
+      /* @__PURE__ */ e(
+        w,
+        {
+          followUps: a.followUps,
+          sources: a.sources,
+          onFollowUp: r,
+          onSourceSelect: s
+        }
+      )
+    ]
+  }
+));
+j.displayName = "ComparisonAnswer";
+const S = h.forwardRef(
+  ({ spec: a, onFollowUp: r, onSourceSelect: s, className: o, ...l }, d) => {
+    const n = h.useMemo(
+      () => a.chart.unit ? (u) => `${Z.format(u)}${a.chart.unit}` : void 0,
+      [a.chart.unit]
+    ), m = {
+      data: a.chart.data,
+      categoryKey: a.chart.categoryKey,
+      series: a.chart.series,
+      seriesLabels: a.chart.seriesLabels,
+      highlight: a.chart.highlight,
+      annotations: a.chart.annotations,
+      formatValue: n,
+      height: 224
+    };
+    return /* @__PURE__ */ i(
+      "div",
+      {
+        ref: d,
+        "data-answer-kind": a.kind,
+        className: c("w-full max-w-2xl space-y-5", o),
+        ...l,
+        children: [
+          /* @__PURE__ */ i("div", { className: "flex flex-col justify-between gap-4 sm:flex-row sm:items-end", children: [
+            /* @__PURE__ */ e(f, { spec: a }),
+            a.metric && /* @__PURE__ */ i("div", { className: "shrink-0 rounded-xl bg-muted px-4 py-3 sm:text-right", children: [
+              /* @__PURE__ */ e("p", { className: "text-xs font-medium text-tertiary", children: a.metric.label }),
+              /* @__PURE__ */ e(
+                "p",
+                {
+                  className: c(
+                    N({ tone: a.metric.tone }),
+                    "mt-1 text-2xl tracking-tight"
+                  ),
+                  children: a.metric.value
+                }
+              ),
+              a.metric.change && /* @__PURE__ */ e("p", { className: "mt-0.5 text-xs text-secondary", children: a.metric.change })
+            ] })
+          ] }),
+          /* @__PURE__ */ e("div", { className: "rounded-2xl bg-surface px-3 pb-2 pt-4 sm:px-4", children: a.chart.type === "area" ? /* @__PURE__ */ e(V, { ...m }) : a.chart.type === "bar" ? /* @__PURE__ */ e(_, { ...m }) : /* @__PURE__ */ e(z, { ...m }) }),
+          a.insight && /* @__PURE__ */ e(y, { signal: a.insight }),
+          /* @__PURE__ */ e(
+            w,
+            {
+              followUps: a.followUps,
+              sources: a.sources,
+              onFollowUp: r,
+              onSourceSelect: s
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+S.displayName = "TrendAnswer";
+const C = h.forwardRef(
+  ({ spec: a, onFollowUp: r, onSourceSelect: s, className: o, ...l }, d) => /* @__PURE__ */ i(
+    "div",
+    {
+      ref: d,
+      "data-answer-kind": a.kind,
+      className: c("w-full max-w-2xl space-y-5", o),
+      ...l,
+      children: [
+        /* @__PURE__ */ i("div", { className: "flex flex-col justify-between gap-3 sm:flex-row sm:items-start", children: [
+          /* @__PURE__ */ e(f, { spec: a }),
+          a.overall && /* @__PURE__ */ i(
+            g,
+            {
+              variant: "soft",
+              color: a.overall.tone ?? "default",
+              className: "self-start",
+              children: [
+                a.overall.label,
+                " · ",
+                a.overall.value
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e("ul", { className: "space-y-2", children: a.items.map((n) => /* @__PURE__ */ i(
+          "li",
+          {
+            className: "flex items-start justify-between gap-4 rounded-xl bg-surface px-4 py-3",
+            children: [
+              /* @__PURE__ */ i("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ e("p", { className: "text-sm font-medium text-foreground", children: n.label }),
+                n.detail && /* @__PURE__ */ e("p", { className: "mt-1 text-xs leading-5 text-secondary", children: n.detail })
+              ] }),
+              /* @__PURE__ */ i("div", { className: "shrink-0 text-right", children: [
+                /* @__PURE__ */ e(g, { variant: "dot", color: n.tone ?? "default", children: n.status }),
+                n.meta && /* @__PURE__ */ e("p", { className: "mt-1 text-xs tabular-nums text-tertiary", children: n.meta })
+              ] })
+            ]
+          },
+          n.label
+        )) }),
+        a.recommendation && /* @__PURE__ */ e(y, { signal: a.recommendation }),
+        /* @__PURE__ */ e(
+          w,
+          {
+            followUps: a.followUps,
+            sources: a.sources,
+            onFollowUp: r,
+            onSourceSelect: s
+          }
+        )
+      ]
+    }
+  )
+);
+C.displayName = "StatusAnswer";
+const R = h.forwardRef(({ spec: a, onFollowUp: r, onSourceSelect: s, className: o, ...l }, d) => /* @__PURE__ */ i(
+  "div",
+  {
+    ref: d,
+    "data-answer-kind": a.kind,
+    className: c("w-full max-w-2xl space-y-5", o),
+    ...l,
+    children: [
+      /* @__PURE__ */ i("div", { className: "flex flex-col justify-between gap-3 sm:flex-row sm:items-end", children: [
+        /* @__PURE__ */ e(f, { spec: a }),
+        a.total && /* @__PURE__ */ i("div", { className: "shrink-0 sm:text-right", children: [
+          /* @__PURE__ */ e("p", { className: "text-xs font-medium text-tertiary", children: a.total.label }),
+          /* @__PURE__ */ e("p", { className: "mt-1 text-2xl font-semibold tabular-nums tracking-tight text-foreground", children: a.total.value })
+        ] })
+      ] }),
+      /* @__PURE__ */ e("ol", { className: "space-y-2", children: a.items.map((n, m) => /* @__PURE__ */ i("li", { className: "rounded-xl bg-surface px-4 py-3", children: [
+        /* @__PURE__ */ i("div", { className: "mb-2 flex items-start justify-between gap-4", children: [
+          /* @__PURE__ */ i("div", { className: "flex min-w-0 items-start gap-2.5", children: [
+            /* @__PURE__ */ e(g, { variant: "soft", className: "mt-0.5 tabular-nums", children: m + 1 }),
+            /* @__PURE__ */ i("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ e("p", { className: "text-sm font-medium text-foreground", children: n.label }),
+              n.detail && /* @__PURE__ */ e("p", { className: "mt-0.5 text-xs text-tertiary", children: n.detail })
+            ] })
+          ] }),
+          /* @__PURE__ */ i("div", { className: "shrink-0 text-right", children: [
+            /* @__PURE__ */ e("p", { className: c(N({ tone: n.tone }), "text-sm"), children: n.value }),
+            /* @__PURE__ */ i("p", { className: "mt-0.5 text-xs tabular-nums text-tertiary", children: [
+              n.share,
+              "%"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ e(
+          P,
+          {
+            value: n.share,
+            size: "sm",
+            color: tt(n.tone),
+            label: `${n.label}: ${n.share}%`
+          }
+        )
+      ] }, n.label)) }),
+      a.insight && /* @__PURE__ */ e(y, { signal: a.insight }),
+      /* @__PURE__ */ e(
+        w,
+        {
+          followUps: a.followUps,
+          sources: a.sources,
+          onFollowUp: r,
+          onSourceSelect: s
+        }
+      )
+    ]
+  }
+));
+R.displayName = "BreakdownAnswer";
+const T = h.forwardRef(({ spec: a, onFollowUp: r, onSourceSelect: s, className: o, ...l }, d) => /* @__PURE__ */ i(
+  "div",
+  {
+    ref: d,
+    "data-answer-kind": a.kind,
+    className: c("w-full max-w-2xl space-y-5", o),
+    ...l,
+    children: [
+      /* @__PURE__ */ e(f, { spec: a }),
+      /* @__PURE__ */ e("ol", { className: "space-y-2", children: a.sections.map((n, m) => {
+        var u;
+        return /* @__PURE__ */ i("li", { className: "flex gap-3 rounded-xl bg-surface px-4 py-3.5", children: [
+          /* @__PURE__ */ e(g, { variant: "soft", className: "mt-0.5 h-fit tabular-nums", children: m + 1 }),
+          /* @__PURE__ */ i("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ e("h3", { className: "text-sm font-semibold text-foreground", children: n.title }),
+            n.body && /* @__PURE__ */ e("p", { className: "mt-1 text-sm leading-6 text-secondary", children: n.body }),
+            !!((u = n.bullets) != null && u.length) && /* @__PURE__ */ e("ul", { className: "mt-2 space-y-1.5", children: n.bullets.map((k) => /* @__PURE__ */ i("li", { className: "flex items-start gap-2 text-xs leading-5 text-secondary", children: [
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  "aria-hidden": !0,
+                  className: "mt-2 size-1 shrink-0 rounded-dot bg-muted-foreground"
+                }
+              ),
+              /* @__PURE__ */ e("span", { children: k })
+            ] }, k)) })
+          ] })
+        ] }, n.title);
+      }) }),
+      a.takeaway && /* @__PURE__ */ e(y, { signal: a.takeaway }),
+      /* @__PURE__ */ e(
+        w,
+        {
+          followUps: a.followUps,
+          sources: a.sources,
+          onFollowUp: r,
+          onSourceSelect: s
+        }
+      )
+    ]
+  }
+));
+T.displayName = "ExplanationAnswer";
+const at = h.forwardRef(
+  ({ spec: a, ...r }, s) => {
+    switch (a.kind) {
+      case "comparison":
+        return /* @__PURE__ */ e(j, { ref: s, spec: a, ...r });
+      case "trend":
+        return /* @__PURE__ */ e(S, { ref: s, spec: a, ...r });
+      case "status":
+        return /* @__PURE__ */ e(C, { ref: s, spec: a, ...r });
+      case "breakdown":
+        return /* @__PURE__ */ e(R, { ref: s, spec: a, ...r });
+      case "explanation":
+        return /* @__PURE__ */ e(T, { ref: s, spec: a, ...r });
+    }
+  }
+);
+at.displayName = "AnswerRenderer";
+export {
+  K as ANSWER_TOOL_DESCRIPTION,
+  I as ANSWER_TOOL_NAME,
+  M as AnswerFollowUpSchema,
+  at as AnswerRenderer,
+  b as AnswerSignalSchema,
+  W as AnswerSourceSchema,
+  Y as AnswerSpecSchema,
+  x as AnswerToneSchema,
+  R as BreakdownAnswer,
+  Q as BreakdownAnswerSchema,
+  j as ComparisonAnswer,
+  F as ComparisonAnswerSchema,
+  T as ExplanationAnswer,
+  X as ExplanationAnswerSchema,
+  C as StatusAnswer,
+  J as StatusAnswerSchema,
+  S as TrendAnswer,
+  G as TrendAnswerSchema,
+  ht as answerTool
+};

package/components/assistant-ui/action-bar.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+export declare const AssistantActionBar: FC;
+export declare const UserActionBar: FC;

package/components/assistant-ui/action-bar.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { MessageTiming as s } from "./message-timing.js";
+import { TooltipIconButton as i } from "./tooltip-icon-button.js";
+import { ActionBarPrimitive as t, AuiIf as r, ActionBarMorePrimitive as a } from "@assistant-ui/react";
+import { Check as d, Copy as l, Refresh as c, MoreHorizontal as m, Download as u, Pencil as h } from "../../lib/icons.js";
+const C = () => /* @__PURE__ */ o(
+  t.Root,
+  {
+    hideWhenRunning: !0,
+    autohide: "not-last",
+    className: "aui-assistant-action-bar-root text-muted-foreground animate-in fade-in col-start-3 row-start-2 -ms-1 flex gap-1 duration-(--duration-normal)",
+    children: [
+      /* @__PURE__ */ e(t.Copy, { asChild: !0, children: /* @__PURE__ */ o(i, { tooltip: "Copy", children: [
+        /* @__PURE__ */ e(r, { condition: (n) => n.message.isCopied, children: /* @__PURE__ */ e(d, { className: "animate-in zoom-in-95 fade-in duration-(--duration-normal) ease-out motion-reduce:animate-none" }) }),
+        /* @__PURE__ */ e(r, { condition: (n) => !n.message.isCopied, children: /* @__PURE__ */ e(l, { className: "animate-in zoom-in-95 fade-in duration-(--duration-fast) ease-out motion-reduce:animate-none" }) })
+      ] }) }),
+      /* @__PURE__ */ e(t.Reload, { asChild: !0, children: /* @__PURE__ */ e(i, { tooltip: "Refresh", children: /* @__PURE__ */ e(c, {}) }) }),
+      /* @__PURE__ */ e(s, {}),
+      /* @__PURE__ */ o(a.Root, { children: [
+        /* @__PURE__ */ e(a.Trigger, { asChild: !0, children: /* @__PURE__ */ e(
+          i,
+          {
+            tooltip: "More",
+            className: "data-[state=open]:bg-accent",
+            children: /* @__PURE__ */ e(m, {})
+          }
+        ) }),
+        /* @__PURE__ */ e(
+          a.Content,
+          {
+            side: "bottom",
+            align: "start",
+            sideOffset: 6,
+            className: "aui-action-bar-more-content bg-popover/95 text-popover-foreground data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=closed]:animate-out data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-xl border p-1.5 shadow-lg backdrop-blur-sm",
+            children: /* @__PURE__ */ e(t.ExportMarkdown, { asChild: !0, children: /* @__PURE__ */ o(a.Item, { className: "aui-action-bar-more-item hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex cursor-pointer items-center gap-2 rounded-lg px-2.5 py-1.5 text-xs outline-none select-none", children: [
+              /* @__PURE__ */ e(u, { className: "size-4" }),
+              "Export as Markdown"
+            ] }) })
+          }
+        )
+      ] })
+    ]
+  }
+), N = () => /* @__PURE__ */ e(
+  t.Root,
+  {
+    hideWhenRunning: !0,
+    autohide: "not-last",
+    className: "aui-user-action-bar-root flex flex-col items-end",
+    children: /* @__PURE__ */ e(t.Edit, { asChild: !0, children: /* @__PURE__ */ e(i, { tooltip: "Edit", className: "aui-user-action-edit", children: /* @__PURE__ */ e(h, {}) }) })
+  }
+);
+export {
+  C as AssistantActionBar,
+  N as UserActionBar
+};

package/components/assistant-ui/answer-tool-ui.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Registers ADS's validated `render_answer` contract with assistant-ui.
+ * `Thread` mounts it by default; export remains public for custom shells.
+ */
+export declare const RenderAnswerToolUI: import('@assistant-ui/react').AssistantToolUI;

package/components/assistant-ui/answer-tool-ui.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import * as a from "react";
+import { makeAssistantToolUI as c, useAssistantRuntime as i } from "@assistant-ui/react";
+import { ANSWER_TOOL_NAME as m, AnswerSpecSchema as d, AnswerRenderer as p } from "../answer.js";
+import { Alert as u, AlertTitle as h, AlertDescription as w } from "../alert.js";
+import { Skeleton as n } from "../skeleton.js";
+function A() {
+  return /* @__PURE__ */ l("div", { className: "w-full max-w-2xl space-y-4", "aria-label": "Building answer", children: [
+    /* @__PURE__ */ l("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ e(n, { className: "h-3 w-24" }),
+      /* @__PURE__ */ e(n, { className: "h-7 w-4/5" }),
+      /* @__PURE__ */ e(n, { className: "h-4 w-full" })
+    ] }),
+    /* @__PURE__ */ e(n, { className: "h-48 w-full rounded-2xl" })
+  ] });
+}
+function f({ spec: s }) {
+  const r = i(), t = a.useCallback(
+    (o) => {
+      r.thread.append({
+        role: "user",
+        content: [{ type: "text", text: o.prompt ?? o.label }]
+      });
+    },
+    [r]
+  );
+  return /* @__PURE__ */ e(p, { spec: s, onFollowUp: t });
+}
+const b = c({
+  toolName: m,
+  render: ({ args: s, status: r }) => {
+    const t = d.safeParse(s);
+    return t.success ? /* @__PURE__ */ e(f, { spec: t.data }) : r.type === "running" ? /* @__PURE__ */ e(A, {}) : /* @__PURE__ */ l(u, { variant: "danger", children: [
+      /* @__PURE__ */ e(h, { children: "Unable to render this answer" }),
+      /* @__PURE__ */ e(w, { children: "The tool response did not match the ADS AnswerSpec contract." })
+    ] });
+  }
+});
+export {
+  b as RenderAnswerToolUI
+};