@actioneer/ads 0.1.0

package/components/ai-elements/message.js

@@ -0,0 +1,308 @@
+"use client";
+import { jsx as r, jsxs as f, Fragment as N } 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 { 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(
+    "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
+      ),
+      ...s
+    }
+  )
+);
+z.displayName = "Message";
+const k = M(
+  "flex w-fit 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",
+        // 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"
+      }
+    },
+    defaultVariants: { variant: "contained" }
+  }
+), P = o.forwardRef(({ children: e, className: t, variant: s, ...a }, n) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: n,
+    className: l(k({ variant: s }), t),
+    ...a,
+    children: e
+  }
+));
+P.displayName = "MessageContent";
+const T = o.forwardRef(({ src: e, name: t, className: s, ...a }, n) => /* @__PURE__ */ r(
+  w,
+  {
+    ref: n,
+    src: e,
+    name: t,
+    size: "sm",
+    className: l("ring-2 ring-background", s),
+    ...a
+  }
+));
+T.displayName = "MessageAvatar";
+const j = l(
+  "size-full text-base leading-relaxed text-foreground",
+  "[&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+  "[&_p]:my-2",
+  "[&_h1]:mt-4 [&_h1]:mb-2 [&_h1]:text-xl [&_h1]:font-bold [&_h1]:tracking-tight",
+  "[&_h2]:mt-4 [&_h2]:mb-2 [&_h2]:text-lg [&_h2]:font-bold [&_h2]:tracking-tight",
+  "[&_h3]:mt-3 [&_h3]:mb-1 [&_h3]:text-base [&_h3]:font-bold",
+  "[&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5 [&_li]:my-1",
+  "[&_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(
+  o.forwardRef(
+    ({ className: e, children: t, ...s }, a) => /* @__PURE__ */ r("div", { ref: a, className: l(j, e), ...s, children: t })
+  ),
+  (e, t) => e.children === t.children
+);
+S.displayName = "MessageResponse";
+const V = o.forwardRef(({ className: e, children: t, ...s }, a) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: a,
+    className: l("flex items-center gap-1", e),
+    ...s,
+    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: [
+      t,
+      /* @__PURE__ */ r("span", { className: "sr-only", children: s || e })
+    ] });
+    return e ? /* @__PURE__ */ r(x, { content: e, children: c }) : c;
+  }
+);
+W.displayName = "MessageAction";
+const _ = o.createContext(null), m = () => {
+  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) => {
+    d(u), t == null || t(u);
+  }, b = () => {
+    const u = i > 0 ? i - 1 : c.length - 1;
+    h(u);
+  }, y = () => {
+    const u = i < c.length - 1 ? i + 1 : 0;
+    h(u);
+  }, v = {
+    currentBranch: i,
+    totalBranches: c.length,
+    goToPrevious: b,
+    goToNext: y,
+    branches: c,
+    setBranches: g
+  };
+  return /* @__PURE__ */ r(_.Provider, { value: v, children: /* @__PURE__ */ r(
+    "div",
+    {
+      ref: n,
+      className: l("grid w-full gap-2 [&>div]:pb-0", s),
+      ...a
+    }
+  ) });
+});
+E.displayName = "MessageBranch";
+const I = ({
+  children: e,
+  ...t
+}) => {
+  const { currentBranch: s, setBranches: a, branches: n } = m(), i = 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(
+    "div",
+    {
+      className: l(
+        "grid gap-2 overflow-hidden [&>div]:pb-0",
+        c === s ? "block" : "hidden"
+      ),
+      ...t,
+      children: d
+    },
+    d.key
+  )) });
+};
+I.displayName = "MessageBranchContent";
+const L = o.forwardRef(({ className: e, from: t, ...s }, a) => {
+  const { totalBranches: n } = m();
+  return n <= 1 ? null : /* @__PURE__ */ r(
+    "div",
+    {
+      ref: a,
+      className: l("inline-flex items-center gap-0.5", e),
+      ...s
+    }
+  );
+});
+L.displayName = "MessageBranchSelector";
+const F = o.forwardRef(({ children: e, ...t }, s) => {
+  const { goToPrevious: a, totalBranches: n } = m();
+  return /* @__PURE__ */ r(
+    p,
+    {
+      ref: s,
+      "aria-label": "Previous branch",
+      disabled: n <= 1,
+      onClick: a,
+      size: "icon-sm",
+      type: "button",
+      variant: "ghost",
+      ...t,
+      children: e ?? /* @__PURE__ */ r(B, { className: "size-4", strokeWidth: 2 })
+    }
+  );
+});
+F.displayName = "MessageBranchPrevious";
+const q = o.forwardRef(({ children: e, ...t }, s) => {
+  const { goToNext: a, totalBranches: n } = m();
+  return /* @__PURE__ */ r(
+    p,
+    {
+      ref: s,
+      "aria-label": "Next branch",
+      disabled: n <= 1,
+      onClick: a,
+      size: "icon-sm",
+      type: "button",
+      variant: "ghost",
+      ...t,
+      children: e ?? /* @__PURE__ */ r(R, { className: "size-4", strokeWidth: 2 })
+    }
+  );
+});
+q.displayName = "MessageBranchNext";
+const D = o.forwardRef(({ className: e, ...t }, s) => {
+  const { currentBranch: a, totalBranches: n } = m();
+  return /* @__PURE__ */ f(
+    "span",
+    {
+      ref: s,
+      className: l(
+        "px-1.5 text-xs tabular-nums text-tertiary select-none",
+        e
+      ),
+      ...t,
+      children: [
+        a + 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(
+    "div",
+    {
+      ref: n,
+      className: l(
+        "group/attachment relative size-24 overflow-hidden rounded-lg bg-muted",
+        t
+      ),
+      ...a,
+      children: [
+        d ? /* @__PURE__ */ r(
+          "img",
+          {
+            alt: c,
+            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,
+          {
+            "aria-label": "Remove attachment",
+            className: l(
+              "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();
+            },
+            size: "icon-xs",
+            type: "button",
+            variant: "ghost",
+            children: /* @__PURE__ */ r(C, { className: "size-3" })
+          }
+        )
+      ]
+    }
+  );
+});
+G.displayName = "MessageAttachment";
+const H = o.forwardRef(({ children: e, className: t, ...s }, a) => e ? /* @__PURE__ */ r(
+  "div",
+  {
+    ref: a,
+    className: l("ml-auto flex w-fit flex-wrap items-start gap-2", t),
+    ...s,
+    children: e
+  }
+) : null);
+H.displayName = "MessageAttachments";
+const J = o.forwardRef(({ className: e, children: t, ...s }, a) => /* @__PURE__ */ r(
+  "div",
+  {
+    ref: a,
+    className: l(
+      "mt-3 flex w-full items-center justify-between gap-4",
+      e
+    ),
+    ...s,
+    children: t
+  }
+));
+J.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
+};

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

@@ -0,0 +1,60 @@
+import { Button } from '../button';
+import { Collapsible, CollapsibleContent } from '../collapsible';
+import * as React from "react";
+export type QueueMessagePart = {
+    type: string;
+    text?: string;
+    url?: string;
+    filename?: string;
+    mediaType?: string;
+};
+export type QueueMessage = {
+    id: string;
+    parts: QueueMessagePart[];
+};
+export type QueueTodo = {
+    id: string;
+    title: string;
+    description?: string;
+    status?: "pending" | "completed";
+};
+export type QueueItemProps = React.ComponentProps<"li">;
+export declare const QueueItem: ({ className, ...props }: QueueItemProps) => React.JSX.Element;
+export type QueueItemIndicatorProps = React.ComponentProps<"span"> & {
+    completed?: boolean;
+};
+export declare const QueueItemIndicator: ({ completed, className, ...props }: QueueItemIndicatorProps) => React.JSX.Element;
+export type QueueItemContentProps = React.ComponentProps<"span"> & {
+    completed?: boolean;
+};
+export declare const QueueItemContent: ({ completed, className, ...props }: QueueItemContentProps) => React.JSX.Element;
+export type QueueItemDescriptionProps = React.ComponentProps<"div"> & {
+    completed?: boolean;
+};
+export declare const QueueItemDescription: ({ completed, className, ...props }: QueueItemDescriptionProps) => React.JSX.Element;
+export type QueueItemActionsProps = React.ComponentProps<"div">;
+export declare const QueueItemActions: ({ className, ...props }: QueueItemActionsProps) => React.JSX.Element;
+export type QueueItemActionProps = Omit<React.ComponentProps<typeof Button>, "variant" | "size">;
+export declare const QueueItemAction: ({ className, ...props }: QueueItemActionProps) => React.JSX.Element;
+export type QueueItemAttachmentProps = React.ComponentProps<"div">;
+export declare const QueueItemAttachment: ({ className, ...props }: QueueItemAttachmentProps) => React.JSX.Element;
+export type QueueItemImageProps = React.ComponentProps<"img">;
+export declare const QueueItemImage: ({ className, ...props }: QueueItemImageProps) => React.JSX.Element;
+export type QueueItemFileProps = React.ComponentProps<"span">;
+export declare const QueueItemFile: ({ children, className, ...props }: QueueItemFileProps) => React.JSX.Element;
+export type QueueListProps = React.ComponentProps<"div">;
+export declare const QueueList: ({ children, className, ...props }: QueueListProps) => React.JSX.Element;
+export type QueueSectionProps = React.ComponentProps<typeof Collapsible>;
+export declare const QueueSection: ({ className, defaultOpen, ...props }: QueueSectionProps) => React.JSX.Element;
+export type QueueSectionTriggerProps = React.ComponentProps<"button">;
+export declare const QueueSectionTrigger: ({ children, className, ...props }: QueueSectionTriggerProps) => React.JSX.Element;
+export type QueueSectionLabelProps = React.ComponentProps<"span"> & {
+    count?: number;
+    label: string;
+    icon?: React.ReactNode;
+};
+export declare const QueueSectionLabel: ({ count, label, icon, className, ...props }: QueueSectionLabelProps) => React.JSX.Element;
+export type QueueSectionContentProps = React.ComponentProps<typeof CollapsibleContent>;
+export declare const QueueSectionContent: ({ className, ...props }: QueueSectionContentProps) => React.JSX.Element;
+export type QueueProps = React.ComponentProps<"div">;
+export declare const Queue: ({ className, ...props }: QueueProps) => React.JSX.Element;

package/components/ai-elements/queue.js

@@ -0,0 +1,193 @@
+"use client";
+import { jsx as s, jsxs as r } from "react/jsx-runtime";
+import { cn as a } from "../../lib/cn.js";
+import { Button as c } from "../button.js";
+import { Collapsible as l, CollapsibleContent as u, CollapsibleTrigger as m } from "../collapsible.js";
+import { Paperclip as d, ChevronDown as p } from "../../lib/icons.js";
+const y = ({ className: e, ...t }) => /* @__PURE__ */ s(
+  "li",
+  {
+    className: a(
+      "group flex flex-col gap-1 rounded-md px-3 py-1 text-base transition-colors hover:bg-muted",
+      e
+    ),
+    ...t
+  }
+), N = ({
+  completed: e = !1,
+  className: t,
+  ...o
+}) => /* @__PURE__ */ s(
+  "span",
+  {
+    "aria-hidden": !0,
+    className: a(
+      // ADS status dots are square, not circular (principle 6).
+      "mt-0.5 inline-block size-2.5 shrink-0 rounded-dot",
+      e ? "bg-success" : "bg-tertiary",
+      t
+    ),
+    ...o
+  }
+), Q = ({
+  completed: e = !1,
+  className: t,
+  ...o
+}) => /* @__PURE__ */ s(
+  "span",
+  {
+    className: a(
+      "line-clamp-1 grow break-words",
+      e ? "text-tertiary line-through" : "text-secondary",
+      t
+    ),
+    ...o
+  }
+), v = ({
+  completed: e = !1,
+  className: t,
+  ...o
+}) => /* @__PURE__ */ s(
+  "div",
+  {
+    className: a(
+      "ml-6 text-xs text-tertiary",
+      e && "line-through",
+      t
+    ),
+    ...o
+  }
+), I = ({
+  className: e,
+  ...t
+}) => /* @__PURE__ */ s("div", { className: a("flex shrink-0 gap-1", e), ...t }), w = ({
+  className: e,
+  ...t
+}) => /* @__PURE__ */ s(
+  c,
+  {
+    type: "button",
+    variant: "ghost",
+    size: "icon-xs",
+    className: a(
+      "size-6 text-tertiary opacity-0 transition-opacity",
+      "hover:text-foreground focus-visible:opacity-100 group-hover:opacity-100",
+      e
+    ),
+    ...t
+  }
+), C = ({
+  className: e,
+  ...t
+}) => /* @__PURE__ */ s("div", { className: a("mt-1 flex flex-wrap gap-2", e), ...t }), k = ({
+  className: e,
+  ...t
+}) => /* @__PURE__ */ s(
+  "img",
+  {
+    alt: "",
+    height: 32,
+    width: 32,
+    className: a(
+      "size-8 rounded-md border border-border object-cover",
+      e
+    ),
+    ...t
+  }
+), z = ({
+  children: e,
+  className: t,
+  ...o
+}) => /* @__PURE__ */ r(
+  "span",
+  {
+    className: a(
+      "flex items-center gap-1 rounded-md bg-muted px-2 py-1 text-xs text-secondary",
+      t
+    ),
+    ...o,
+    children: [
+      /* @__PURE__ */ s(d, { className: "size-3 shrink-0" }),
+      /* @__PURE__ */ s("span", { className: "max-w-28 truncate", children: e })
+    ]
+  }
+), j = ({
+  children: e,
+  className: t,
+  ...o
+}) => /* @__PURE__ */ s(
+  "div",
+  {
+    className: a("-mb-1 mt-2 max-h-40 overflow-y-auto pr-1", t),
+    ...o,
+    children: /* @__PURE__ */ s("ul", { children: e })
+  }
+), S = ({
+  className: e,
+  defaultOpen: t = !0,
+  ...o
+}) => /* @__PURE__ */ s(l, { className: a(e), defaultOpen: t, ...o }), A = ({
+  children: e,
+  className: t,
+  ...o
+}) => /* @__PURE__ */ s(m, { asChild: !0, children: /* @__PURE__ */ s(
+  "button",
+  {
+    type: "button",
+    className: a(
+      "group flex w-full items-center justify-between rounded-md bg-muted px-3 py-2 text-left font-medium text-base text-secondary transition-colors hover:bg-fill",
+      t
+    ),
+    ...o,
+    children: e
+  }
+) }), D = ({
+  count: e,
+  label: t,
+  icon: o,
+  className: n,
+  ...i
+}) => /* @__PURE__ */ r("span", { className: a("flex items-center gap-2", n), ...i, children: [
+  /* @__PURE__ */ s(
+    p,
+    {
+      strokeWidth: 2,
+      className: "size-4 shrink-0 transition-transform group-data-[state=closed]:-rotate-90"
+    }
+  ),
+  o,
+  /* @__PURE__ */ r("span", { children: [
+    e,
+    " ",
+    t
+  ] })
+] }), L = ({
+  className: e,
+  ...t
+}) => /* @__PURE__ */ s(u, { className: a(e), ...t }), T = ({ className: e, ...t }) => /* @__PURE__ */ s(
+  "div",
+  {
+    className: a(
+      "flex flex-col gap-2 rounded-xl bg-card px-3 py-2",
+      e
+    ),
+    ...t
+  }
+);
+export {
+  T as Queue,
+  y as QueueItem,
+  w as QueueItemAction,
+  I as QueueItemActions,
+  C as QueueItemAttachment,
+  Q as QueueItemContent,
+  v as QueueItemDescription,
+  z as QueueItemFile,
+  k as QueueItemImage,
+  N as QueueItemIndicator,
+  j as QueueList,
+  S as QueueSection,
+  L as QueueSectionContent,
+  D as QueueSectionLabel,
+  A as QueueSectionTrigger
+};

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

@@ -0,0 +1,26 @@
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '../collapsible';
+import { ComponentProps, ReactNode } from 'react';
+type ReasoningContextValue = {
+    isStreaming: boolean;
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
+    duration: number | undefined;
+};
+export declare const useReasoning: () => ReasoningContextValue;
+export type ReasoningProps = ComponentProps<typeof Collapsible> & {
+    isStreaming?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    duration?: number;
+};
+export declare const Reasoning: import('react').MemoExoticComponent<({ className, isStreaming, open, defaultOpen, onOpenChange, duration: durationProp, children, ...props }: ReasoningProps) => import("react").JSX.Element>;
+export type ReasoningTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
+    getThinkingMessage?: (isStreaming: boolean, duration?: number) => ReactNode;
+};
+export declare const ReasoningTrigger: import('react').MemoExoticComponent<({ className, children, getThinkingMessage, ...props }: ReasoningTriggerProps) => import("react").JSX.Element>;
+export type ReasoningContentProps = Omit<ComponentProps<typeof CollapsibleContent>, "children"> & {
+    children: ReactNode;
+};
+export declare const ReasoningContent: import('react').MemoExoticComponent<({ className, children, ...props }: ReasoningContentProps) => import("react").JSX.Element>;
+export {};