@actioneer/ads 0.1.0

package/components/assistant-ui/image.js

@@ -0,0 +1,351 @@
+"use client";
+import { jsxs as u, jsx as a, Fragment as U } from "react/jsx-runtime";
+import { memo as E, useRef as D, useState as p, useEffect as b } from "react";
+import { createPortal as F } from "react-dom";
+import { cva as O } from "class-variance-authority";
+import { Image as P, ImageOff as A, Download as L, Copy as S, Loader as B, WarningCircle as W, Refresh as G } from "../../lib/icons.js";
+import { cn as c } from "../../lib/cn.js";
+const K = (e) => {
+  switch (e) {
+    case "image/png":
+      return "png";
+    case "image/jpeg":
+    case "image/jpg":
+      return "jpg";
+    case "image/webp":
+      return "webp";
+    case "image/gif":
+      return "gif";
+    case "image/svg+xml":
+      return "svg";
+    default:
+      return "png";
+  }
+}, I = (e) => {
+  var r;
+  const [t, n] = e.split(","), i = ((r = t == null ? void 0 : t.match(/data:([^;]+)/)) == null ? void 0 : r[1]) ?? "application/octet-stream";
+  if (!/;base64/i.test(t ?? ""))
+    return new Blob([decodeURIComponent(n ?? "")], { type: i });
+  const s = atob(n ?? ""), o = new Uint8Array(s.length);
+  for (let m = 0; m < s.length; m++) o[m] = s.charCodeAt(m);
+  return new Blob([o], { type: i });
+}, N = (e) => {
+  var t;
+  return (t = e.match(/^data:([^;,]+)/)) == null ? void 0 : t[1];
+}, M = (e) => {
+  if (typeof document > "u") return;
+  const t = K(N(e.image)), n = e.filename ?? `image.${t}`, s = e.image.startsWith("data:") ? URL.createObjectURL(I(e.image)) : null, o = s ?? e.image, r = document.createElement("a");
+  r.href = o, r.download = n, r.rel = "noopener", document.body.appendChild(r), r.click(), document.body.removeChild(r), s && URL.revokeObjectURL(s);
+}, T = async (e) => {
+  if (typeof navigator > "u" || !navigator.clipboard || typeof ClipboardItem > "u")
+    throw new Error("Clipboard API is not available in this environment.");
+  const t = e.image.startsWith("data:") ? I(e.image) : await fetch(e.image).then((i) => i.blob()), n = N(e.image) ?? t.type ?? "image/png";
+  await navigator.clipboard.write([new ClipboardItem({ [n]: t })]);
+}, V = O(
+  "aui-image-root relative overflow-hidden rounded-lg",
+  {
+    variants: {
+      variant: {
+        outline: "border-border border",
+        ghost: "",
+        muted: "bg-muted/50"
+      },
+      size: {
+        sm: "max-w-64",
+        default: "max-w-96",
+        lg: "max-w-[512px]",
+        full: "w-full"
+      }
+    },
+    defaultVariants: {
+      variant: "outline",
+      size: "default"
+    }
+  }
+);
+function h({
+  className: e,
+  variant: t,
+  size: n,
+  children: i,
+  ...s
+}) {
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      "data-slot": "image-root",
+      "data-variant": t,
+      "data-size": n,
+      className: c(V({ variant: t, size: n, className: e })),
+      ...s,
+      children: i
+    }
+  );
+}
+function z({
+  className: e,
+  containerClassName: t,
+  onLoad: n,
+  onError: i,
+  alt: s = "Image content",
+  src: o,
+  ...r
+}) {
+  const m = D(null), [f, l] = p(void 0), [y, R] = p(void 0), w = f === o, x = y === o;
+  return b(() => {
+    var g;
+    typeof o == "string" && ((g = m.current) != null && g.complete) && m.current.naturalWidth > 0 && l(o);
+  }, [o]), /* @__PURE__ */ u(
+    "div",
+    {
+      "data-slot": "image-preview",
+      className: c("relative min-h-32", t),
+      children: [
+        !w && !x && /* @__PURE__ */ a(
+          "div",
+          {
+            "data-slot": "image-preview-loading",
+            className: "bg-muted/50 absolute inset-0 flex items-center justify-center",
+            children: /* @__PURE__ */ a(P, { className: "text-muted-foreground size-8 animate-pulse" })
+          }
+        ),
+        x ? /* @__PURE__ */ a(
+          "div",
+          {
+            "data-slot": "image-preview-error",
+            className: "bg-muted/50 flex min-h-32 items-center justify-center p-4",
+            children: /* @__PURE__ */ a(A, { className: "text-muted-foreground size-8" })
+          }
+        ) : /* @__PURE__ */ a(
+          "img",
+          {
+            ref: m,
+            src: o,
+            alt: s,
+            className: c(
+              "block h-auto w-full object-contain",
+              !w && "invisible",
+              e
+            ),
+            onLoad: (g) => {
+              typeof o == "string" && l(o), n == null || n(g);
+            },
+            onError: (g) => {
+              typeof o == "string" && R(o), i == null || i(g);
+            },
+            ...r
+          }
+        )
+      ]
+    }
+  );
+}
+function v({
+  className: e,
+  children: t,
+  ...n
+}) {
+  return t ? /* @__PURE__ */ a(
+    "span",
+    {
+      "data-slot": "image-filename",
+      className: c(
+        "text-muted-foreground block truncate px-2 py-1.5 text-xs",
+        e
+      ),
+      ...n,
+      children: t
+    }
+  ) : null;
+}
+function C({ src: e, alt: t = "Image preview", children: n }) {
+  const [i, s] = p(!1), [o, r] = p(!1);
+  b(() => {
+    s(!0);
+  }, []);
+  const m = () => r(!0), f = () => r(!1);
+  return b(() => {
+    if (!o) return;
+    const l = (y) => {
+      y.key === "Escape" && r(!1);
+    };
+    return document.addEventListener("keydown", l), () => document.removeEventListener("keydown", l);
+  }, [o]), b(() => {
+    if (!o) return;
+    const l = document.body.style.overflow;
+    return document.body.style.overflow = "hidden", () => {
+      document.body.style.overflow = l;
+    };
+  }, [o]), /* @__PURE__ */ u(U, { children: [
+    /* @__PURE__ */ a(
+      "div",
+      {
+        onClick: m,
+        onKeyDown: (l) => l.key === "Enter" && m(),
+        role: "button",
+        tabIndex: 0,
+        className: "aui-image-zoom-trigger cursor-zoom-in",
+        "aria-label": "Click to zoom image",
+        children: n
+      }
+    ),
+    i && o && F(
+      /* @__PURE__ */ a(
+        "div",
+        {
+          "data-slot": "image-zoom-overlay",
+          role: "button",
+          tabIndex: 0,
+          className: "aui-image-zoom-overlay fade-in animate-in fixed inset-0 z-50 flex items-center justify-center bg-black/80 duration-(--duration-normal)",
+          onClick: f,
+          onKeyDown: (l) => l.key === "Enter" && f(),
+          "aria-label": "Close zoomed image",
+          children: /* @__PURE__ */ a(
+            "img",
+            {
+              "data-slot": "image-zoom-content",
+              src: e,
+              alt: t,
+              className: "aui-image-zoom-content fade-in zoom-in-95 animate-in max-h-[90vh] max-w-[90vw] cursor-zoom-out object-contain duration-(--duration-normal)",
+              onClick: (l) => {
+                l.stopPropagation(), f();
+              }
+            }
+          )
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+function j({ className: e }) {
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      "data-slot": "image-generating",
+      className: c(
+        "bg-muted/50 flex min-h-32 items-center justify-center p-4",
+        e
+      ),
+      children: [
+        /* @__PURE__ */ a(B, { className: "text-muted-foreground size-8 animate-spin" }),
+        /* @__PURE__ */ a("span", { className: "sr-only", children: "Generating image…" })
+      ]
+    }
+  );
+}
+function k({
+  className: e,
+  reason: t
+}) {
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      "data-slot": "image-content-filter-error",
+      className: c(
+        "bg-muted/50 flex min-h-32 flex-col items-center justify-center gap-2 p-4 text-center",
+        e
+      ),
+      children: [
+        /* @__PURE__ */ a(W, { className: "text-muted-foreground size-8" }),
+        /* @__PURE__ */ a("p", { className: "text-sm font-medium", children: "Image could not be generated" }),
+        t && /* @__PURE__ */ a("p", { className: "text-muted-foreground text-xs", children: t })
+      ]
+    }
+  );
+}
+function Z({
+  onRegenerate: e
+}) {
+  const [t, n] = p(!1);
+  return /* @__PURE__ */ a(
+    "button",
+    {
+      type: "button",
+      onClick: async () => {
+        n(!0);
+        try {
+          await e();
+        } finally {
+          n(!1);
+        }
+      },
+      disabled: t,
+      "data-slot": "image-regenerate",
+      "aria-label": "Regenerate image",
+      className: "hover:bg-muted inline-flex size-7 items-center justify-center rounded disabled:opacity-50",
+      children: /* @__PURE__ */ a(
+        G,
+        {
+          className: c("size-4", t && "animate-spin")
+        }
+      )
+    }
+  );
+}
+function $({ part: e, onRegenerate: t, className: n }) {
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      "data-slot": "image-actions",
+      className: c("flex items-center gap-1 p-1", n),
+      children: [
+        /* @__PURE__ */ a(
+          "button",
+          {
+            type: "button",
+            onClick: () => M(e),
+            "data-slot": "image-download",
+            "aria-label": "Download image",
+            className: "hover:bg-muted inline-flex size-7 items-center justify-center rounded",
+            children: /* @__PURE__ */ a(L, { className: "size-4" })
+          }
+        ),
+        /* @__PURE__ */ a(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              T(e).catch(() => {
+              });
+            },
+            "data-slot": "image-copy",
+            "aria-label": "Copy image",
+            className: "hover:bg-muted inline-flex size-7 items-center justify-center rounded",
+            children: /* @__PURE__ */ a(S, { className: "size-4" })
+          }
+        ),
+        t && /* @__PURE__ */ a(Z, { onRegenerate: t })
+      ]
+    }
+  );
+}
+const q = (e) => {
+  const { image: t, filename: n, status: i } = e;
+  return (i == null ? void 0 : i.type) === "running" ? /* @__PURE__ */ u(h, { children: [
+    /* @__PURE__ */ a(j, {}),
+    /* @__PURE__ */ a(v, { children: n })
+  ] }) : (i == null ? void 0 : i.type) === "incomplete" && i.reason === "content-filter" ? /* @__PURE__ */ a(h, { children: /* @__PURE__ */ a(k, { reason: "The provider blocked this image." }) }) : /* @__PURE__ */ u(h, { children: [
+    /* @__PURE__ */ a(C, { src: t, alt: n || "Image content", children: /* @__PURE__ */ a(z, { src: t, alt: n || "Image content" }) }),
+    /* @__PURE__ */ a(v, { children: n })
+  ] });
+}, d = E(q);
+d.displayName = "Image";
+d.Root = h;
+d.Preview = z;
+d.Filename = v;
+d.Zoom = C;
+d.Actions = $;
+d.Generating = j;
+d.ContentFilterError = k;
+export {
+  d as Image,
+  $ as ImageActions,
+  k as ImageContentFilterError,
+  v as ImageFilename,
+  j as ImageGenerating,
+  z as ImagePreview,
+  h as ImageRoot,
+  C as ImageZoom,
+  V as imageVariants
+};

package/components/assistant-ui/index.d.ts

@@ -0,0 +1,28 @@
+export * from './primitives';
+export * from './thread';
+export * from './thread-context';
+export * from './answer-tool-ui';
+export * from './composer';
+export * from './message';
+export * from './action-bar';
+export * from './branch-picker';
+export * from './attachment';
+export * from './composer-add-context';
+export * from './composer-deep-research';
+export * from './composer-harness';
+export * from './composer-trigger-popover';
+export * from './directive-text';
+export * from './error';
+export * from './file';
+export * from './image';
+export * from './markdown-text';
+export * from './message-timing';
+export * from './quote';
+export * from './smart-message-text';
+export * from './sources';
+export * from './tool-fallback';
+export * from './tool-group';
+export * from './follow-up-suggestions';
+export * from './selection-toolbar';
+export * from './suggestions';
+export * from './tooltip-icon-button';

package/components/assistant-ui/markdown-text.d.ts

@@ -0,0 +1 @@
+export declare const MarkdownText: import('react').MemoExoticComponent<() => import("react").JSX.Element>;

package/components/assistant-ui/markdown-text.js

@@ -0,0 +1,242 @@
+"use client";
+import { jsx as o, jsxs as d } from "react/jsx-runtime";
+import "@assistant-ui/react-markdown/styles/dot.css";
+import { unstable_memoizeMarkdownComponents as i, useIsMarkdownCodeBlock as l, MarkdownTextPrimitive as n } from "@assistant-ui/react-markdown";
+import u from "remark-gfm";
+import { memo as c, useState as b } from "react";
+import { Copy as p, Check as f } from "../../lib/icons.js";
+import { TooltipIconButton as x } from "./tooltip-icon-button.js";
+import { cn as r } from "../../lib/cn.js";
+const h = () => /* @__PURE__ */ o(
+  n,
+  {
+    remarkPlugins: [u],
+    className: "aui-md",
+    components: y,
+    defer: !0
+  }
+), q = c(h), g = ({ language: t, code: e }) => {
+  const { isCopied: a, copyToClipboard: m } = N();
+  return /* @__PURE__ */ d("div", { className: "aui-code-header-root border-border/50 bg-muted/50 mt-3 flex items-center justify-between rounded-t-xl border border-b-0 px-3.5 py-1.5 text-xs", children: [
+    /* @__PURE__ */ o("span", { className: "aui-code-header-language text-muted-foreground font-medium lowercase", children: t }),
+    /* @__PURE__ */ d(x, { tooltip: "Copy", onClick: () => {
+      !e || a || m(e);
+    }, children: [
+      !a && /* @__PURE__ */ o(p, { className: "animate-in zoom-in-95 fade-in duration-(--duration-fast) ease-out motion-reduce:animate-none" }),
+      a && /* @__PURE__ */ o(f, { className: "animate-in zoom-in-95 fade-in duration-(--duration-normal) ease-out motion-reduce:animate-none" })
+    ] })
+  ] });
+}, N = ({
+  copiedDuration: t = 3e3
+} = {}) => {
+  const [e, a] = b(!1);
+  return { isCopied: e, copyToClipboard: (s) => {
+    !s || typeof navigator > "u" || !navigator.clipboard || navigator.clipboard.writeText(s).then(
+      () => {
+        a(!0), setTimeout(() => a(!1), t);
+      },
+      () => {
+      }
+    );
+  } };
+}, y = i({
+  h1: ({ className: t, ...e }) => /* @__PURE__ */ o(
+    "h1",
+    {
+      className: r(
+        "aui-md-h1 mt-5 mb-2 scroll-m-20 text-lg font-semibold first:mt-0 last:mb-0",
+        t
+      ),
+      ...e
+    }
+  ),
+  h2: ({ className: t, ...e }) => /* @__PURE__ */ o(
+    "h2",
+    {
+      className: r(
+        "aui-md-h2 mt-5 mb-2 scroll-m-20 text-lg font-semibold first:mt-0 last:mb-0",
+        t
+      ),
+      ...e
+    }
+  ),
+  h3: ({ className: t, ...e }) => /* @__PURE__ */ o(
+    "h3",
+    {
+      className: r(
+        "aui-md-h3 mt-4 mb-1.5 scroll-m-20 text-base font-semibold first:mt-0 last:mb-0",
+        t
+      ),
+      ...e
+    }
+  ),
+  h4: ({ className: t, ...e }) => /* @__PURE__ */ o(
+    "h4",
+    {
+      className: r(
+        "aui-md-h4 mt-3.5 mb-1 scroll-m-20 text-base font-medium first:mt-0 last:mb-0",
+        t
+      ),
+      ...e
+    }
+  ),
+  h5: ({ className: t, ...e }) => /* @__PURE__ */ o(
+    "h5",
+    {
+      className: r(
+        "aui-md-h5 mt-3 mb-1 text-xs font-semibold first:mt-0 last:mb-0",
+        t
+      ),
+      ...e
+    }
+  ),
+  h6: ({ className: t, ...e }) => /* @__PURE__ */ o(
+    "h6",
+    {
+      className: r(
+        "aui-md-h6 mt-3 mb-1 text-xs font-medium first:mt-0 last:mb-0",
+        t
+      ),
+      ...e
+    }
+  ),
+  p: ({ className: t, ...e }) => /* @__PURE__ */ o(
+    "p",
+    {
+      className: r(
+        "aui-md-p my-3 leading-relaxed first:mt-0 last:mb-0",
+        t
+      ),
+      ...e
+    }
+  ),
+  a: ({ className: t, ...e }) => /* @__PURE__ */ o(
+    "a",
+    {
+      className: r(
+        "aui-md-a text-primary hover:text-primary/80 underline underline-offset-2",
+        t
+      ),
+      ...e
+    }
+  ),
+  blockquote: ({ className: t, ...e }) => /* @__PURE__ */ o(
+    "blockquote",
+    {
+      className: r(
+        "aui-md-blockquote border-muted-foreground/30 text-muted-foreground my-3 border-s-2 ps-4",
+        t
+      ),
+      ...e
+    }
+  ),
+  ul: ({ className: t, ...e }) => /* @__PURE__ */ o(
+    "ul",
+    {
+      className: r(
+        "aui-md-ul marker:text-muted-foreground my-3 ms-5 list-disc [&>li]:mt-1",
+        t
+      ),
+      ...e
+    }
+  ),
+  ol: ({ className: t, ...e }) => /* @__PURE__ */ o(
+    "ol",
+    {
+      className: r(
+        "aui-md-ol marker:text-muted-foreground my-3 ms-5 list-decimal [&>li]:mt-1",
+        t
+      ),
+      ...e
+    }
+  ),
+  hr: ({ className: t, ...e }) => /* @__PURE__ */ o(
+    "hr",
+    {
+      className: r("aui-md-hr border-muted-foreground/20 my-3", t),
+      ...e
+    }
+  ),
+  table: ({ className: t, ...e }) => /* @__PURE__ */ o(
+    "table",
+    {
+      className: r(
+        "aui-md-table my-3 w-full border-separate border-spacing-0 overflow-y-auto",
+        t
+      ),
+      ...e
+    }
+  ),
+  th: ({ className: t, ...e }) => /* @__PURE__ */ o(
+    "th",
+    {
+      className: r(
+        "aui-md-th bg-muted px-3 py-1.5 text-start font-medium first:rounded-ss-lg last:rounded-se-lg [[align=center]]:text-center [[align=right]]:text-right",
+        t
+      ),
+      ...e
+    }
+  ),
+  td: ({ className: t, ...e }) => /* @__PURE__ */ o(
+    "td",
+    {
+      className: r(
+        "aui-md-td border-muted-foreground/20 border-s border-b px-3 py-1.5 text-start last:border-e [[align=center]]:text-center [[align=right]]:text-right",
+        t
+      ),
+      ...e
+    }
+  ),
+  tr: ({ className: t, ...e }) => /* @__PURE__ */ o(
+    "tr",
+    {
+      className: r(
+        "aui-md-tr m-0 border-b p-0 first:border-t [&:last-child>td:first-child]:rounded-es-lg [&:last-child>td:last-child]:rounded-ee-lg",
+        t
+      ),
+      ...e
+    }
+  ),
+  li: ({ className: t, ...e }) => /* @__PURE__ */ o("li", { className: r("aui-md-li leading-relaxed", t), ...e }),
+  strong: ({ className: t, ...e }) => /* @__PURE__ */ o(
+    "strong",
+    {
+      className: r("aui-md-strong font-semibold", t),
+      ...e
+    }
+  ),
+  sup: ({ className: t, ...e }) => /* @__PURE__ */ o(
+    "sup",
+    {
+      className: r("aui-md-sup [&>a]:text-xs [&>a]:no-underline", t),
+      ...e
+    }
+  ),
+  pre: ({ className: t, ...e }) => /* @__PURE__ */ o(
+    "pre",
+    {
+      className: r(
+        "aui-md-pre border-border/50 bg-muted/30 overflow-x-auto rounded-t-none rounded-b-xl border border-t-0 p-3.5 text-[13px] leading-relaxed",
+        t
+      ),
+      ...e
+    }
+  ),
+  code: function({ className: e, ...a }) {
+    const m = l();
+    return /* @__PURE__ */ o(
+      "code",
+      {
+        className: r(
+          !m && "aui-md-inline-code bg-muted rounded-md px-1.5 py-0.5 font-mono text-[0.85em]",
+          e
+        ),
+        ...a
+      }
+    );
+  },
+  CodeHeader: g
+});
+export {
+  q as MarkdownText
+};

package/components/assistant-ui/message-timing.d.ts

@@ -0,0 +1,25 @@
+import { FC } from 'react';
+/**
+ * Shows streaming stats (TTFT, total time, tok/s, chunks) as a badge with a
+ * hover/focus tooltip. Renders nothing until the stream completes.
+ *
+ * Place it inside `ActionBarPrimitive.Root` in your `thread.tsx` so it
+ * inherits the action bar's autohide behaviour:
+ *
+ * ```tsx
+ * import { MessageTiming } from "@/components/assistant-ui/message-timing";
+ *
+ * <ActionBarPrimitive.Root >
+ *   <ActionBarPrimitive.Copy />
+ *   <ActionBarPrimitive.Reload />
+ *   <MessageTiming />  // <-- add this
+ * </ActionBarPrimitive.Root>
+ * ```
+ *
+ * @param side - Side of the tooltip relative to the badge trigger.
+ * @default "right"
+ */
+export declare const MessageTiming: FC<{
+    className?: string;
+    side?: "top" | "right" | "bottom" | "left";
+}>;