@actioneer/ads 0.1.0

package/components/ai-elements/chain-of-thought.js

@@ -0,0 +1,182 @@
+"use client";
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { Badge as C } from "../badge.js";
+import { Collapsible as p, CollapsibleTrigger as N, CollapsibleContent as O } from "../collapsible.js";
+import { Brain as v, ChevronDown as y } from "../../lib/icons.js";
+import { cn as i } from "../../lib/cn.js";
+import { createContext as T, memo as c, useMemo as b, useState as w, useRef as S, useCallback as z, useContext as j } from "react";
+function R({
+  prop: e,
+  defaultProp: a,
+  onChange: n
+}) {
+  const [s, r] = w(a), l = e !== void 0, h = l ? e : s, o = S(n);
+  o.current = n;
+  const u = z(
+    (m) => {
+      var f;
+      l || r(m), (f = o.current) == null || f.call(o, m);
+    },
+    [l]
+  );
+  return [h, u];
+}
+const g = T(
+  null
+), x = () => {
+  const e = j(g);
+  if (!e)
+    throw new Error(
+      "ChainOfThought components must be used within ChainOfThought"
+    );
+  return e;
+}, I = c(
+  ({
+    className: e,
+    open: a,
+    defaultOpen: n = !1,
+    onOpenChange: s,
+    children: r,
+    ...l
+  }) => {
+    const [h, o] = R({
+      prop: a,
+      defaultProp: n,
+      onChange: s
+    }), u = b(
+      () => ({ isOpen: h, setIsOpen: o }),
+      [h, o]
+    );
+    return /* @__PURE__ */ t(g.Provider, { value: u, children: /* @__PURE__ */ t("div", { className: i("max-w-prose space-y-4", e), ...l, children: r }) });
+  }
+), B = c(
+  ({ className: e, children: a, ...n }) => {
+    const { isOpen: s, setIsOpen: r } = x();
+    return /* @__PURE__ */ t(p, { onOpenChange: r, open: s, children: /* @__PURE__ */ d(
+      N,
+      {
+        className: i(
+          "flex w-full items-center gap-2 text-base text-secondary transition-colors hover:text-foreground",
+          e
+        ),
+        ...n,
+        children: [
+          /* @__PURE__ */ t(v, { className: "size-4" }),
+          /* @__PURE__ */ t("span", { className: "flex-1 text-left", children: a ?? "Chain of Thought" }),
+          /* @__PURE__ */ t(
+            y,
+            {
+              className: i(
+                "size-4 transition-transform duration-(--duration-fast) ease-out motion-reduce:transition-none",
+                s ? "rotate-180" : "rotate-0"
+              )
+            }
+          )
+        ]
+      }
+    ) });
+  }
+), H = c(
+  ({
+    className: e,
+    icon: a,
+    label: n,
+    description: s,
+    status: r = "complete",
+    children: l,
+    ...h
+  }) => /* @__PURE__ */ d(
+    "div",
+    {
+      className: i(
+        "flex gap-2 text-base",
+        {
+          complete: "text-secondary",
+          active: "text-primary",
+          pending: "text-tertiary/60"
+        }[r],
+        "fade-in-0 slide-in-from-top-2 animate-in motion-reduce:animate-none",
+        e
+      ),
+      ...h,
+      children: [
+        /* @__PURE__ */ d("div", { className: "relative mt-0.5", children: [
+          a ? /* @__PURE__ */ t(a, { className: "size-4" }) : (
+            // ADS status markers are square (principle 6), not a filled dot.
+            /* @__PURE__ */ t(
+              "span",
+              {
+                "aria-hidden": !0,
+                className: "flex size-4 items-center justify-center",
+                children: /* @__PURE__ */ t("span", { className: "size-1.5 rounded-dot bg-current" })
+              }
+            )
+          ),
+          /* @__PURE__ */ t("div", { className: "absolute bottom-0 left-1/2 top-7 w-px -translate-x-1/2 bg-border" })
+        ] }),
+        /* @__PURE__ */ d("div", { className: "flex-1 space-y-2 overflow-hidden", children: [
+          /* @__PURE__ */ t("div", { children: n }),
+          s && /* @__PURE__ */ t("div", { className: "text-xs text-tertiary", children: s }),
+          l
+        ] })
+      ]
+    }
+  )
+), P = c(
+  ({ className: e, ...a }) => /* @__PURE__ */ t(
+    "div",
+    {
+      className: i("flex flex-wrap items-center gap-2", e),
+      ...a
+    }
+  )
+), k = c(
+  ({ className: e, children: a, ...n }) => /* @__PURE__ */ t(
+    C,
+    {
+      className: i("gap-1 font-normal", e),
+      color: "default",
+      variant: "soft",
+      ...n,
+      children: a
+    }
+  )
+), D = c(
+  ({ className: e, children: a, ...n }) => {
+    const { isOpen: s } = x();
+    return /* @__PURE__ */ t(p, { open: s, children: /* @__PURE__ */ t(
+      O,
+      {
+        className: i(
+          "mt-2 space-y-3",
+          "text-foreground outline-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",
+          e
+        ),
+        ...n,
+        children: a
+      }
+    ) });
+  }
+), E = c(
+  ({ className: e, children: a, caption: n, ...s }) => /* @__PURE__ */ d("div", { className: i("mt-2 space-y-2", e), ...s, children: [
+    /* @__PURE__ */ t("div", { className: "relative flex max-h-88 items-center justify-center overflow-hidden rounded-lg bg-muted p-3", children: a }),
+    n && /* @__PURE__ */ t("p", { className: "text-xs text-tertiary", children: n })
+  ] })
+);
+I.displayName = "ChainOfThought";
+B.displayName = "ChainOfThoughtHeader";
+H.displayName = "ChainOfThoughtStep";
+P.displayName = "ChainOfThoughtSearchResults";
+k.displayName = "ChainOfThoughtSearchResult";
+D.displayName = "ChainOfThoughtContent";
+E.displayName = "ChainOfThoughtImage";
+export {
+  I as ChainOfThought,
+  D as ChainOfThoughtContent,
+  B as ChainOfThoughtHeader,
+  E as ChainOfThoughtImage,
+  k as ChainOfThoughtSearchResult,
+  P as ChainOfThoughtSearchResults,
+  H as ChainOfThoughtStep
+};

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

@@ -0,0 +1,11 @@
+export * from './chain-of-thought';
+export * from './inline-citation';
+export * from './message';
+export * from './queue';
+export * from './reasoning';
+export * from './shimmer';
+export * from './speech-input';
+export * from './task';
+export * from './task-progress';
+export * from './tool';
+export * from './voice';

package/components/ai-elements/inline-citation.d.ts

@@ -0,0 +1,44 @@
+import { BadgeProps } from '../badge';
+import * as React from "react";
+export type InlineCitationProps = React.ComponentProps<"span">;
+export declare const InlineCitation: ({ className, ...props }: InlineCitationProps) => React.JSX.Element;
+export type InlineCitationTextProps = React.ComponentProps<"span">;
+export declare const InlineCitationText: ({ className, ...props }: InlineCitationTextProps) => React.JSX.Element;
+export interface InlineCitationCardProps {
+    children?: React.ReactNode;
+    /** Controlled open state. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    openDelay?: number;
+    closeDelay?: number;
+}
+export declare const InlineCitationCard: ({ children, open: openProp, defaultOpen, onOpenChange, openDelay, closeDelay, }: InlineCitationCardProps) => React.JSX.Element;
+export type InlineCitationCardTriggerProps = BadgeProps & {
+    sources: string[];
+};
+export declare const InlineCitationCardTrigger: ({ sources, className, ...props }: InlineCitationCardTriggerProps) => React.JSX.Element;
+export type InlineCitationCardBodyProps = React.ComponentProps<"div">;
+export declare const InlineCitationCardBody: ({ className, children, ...props }: InlineCitationCardBodyProps) => React.ReactPortal;
+export type InlineCitationCarouselProps = React.ComponentProps<"div">;
+export declare const InlineCitationCarousel: ({ className, children, ...props }: InlineCitationCarouselProps) => React.JSX.Element;
+export type InlineCitationCarouselContentProps = React.ComponentProps<"div">;
+export declare const InlineCitationCarouselContent: ({ className, children, ...props }: InlineCitationCarouselContentProps) => React.JSX.Element;
+export type InlineCitationCarouselItemProps = React.ComponentProps<"div">;
+export declare const InlineCitationCarouselItem: ({ className, ...props }: InlineCitationCarouselItemProps) => React.JSX.Element;
+export type InlineCitationCarouselHeaderProps = React.ComponentProps<"div">;
+export declare const InlineCitationCarouselHeader: ({ className, ...props }: InlineCitationCarouselHeaderProps) => React.JSX.Element;
+export type InlineCitationCarouselIndexProps = React.ComponentProps<"div">;
+export declare const InlineCitationCarouselIndex: ({ children, className, ...props }: InlineCitationCarouselIndexProps) => React.JSX.Element;
+export type InlineCitationCarouselPrevProps = React.ComponentProps<"button">;
+export declare const InlineCitationCarouselPrev: ({ className, ...props }: InlineCitationCarouselPrevProps) => React.JSX.Element;
+export type InlineCitationCarouselNextProps = React.ComponentProps<"button">;
+export declare const InlineCitationCarouselNext: ({ className, ...props }: InlineCitationCarouselNextProps) => React.JSX.Element;
+export type InlineCitationSourceProps = React.ComponentProps<"div"> & {
+    title?: string;
+    url?: string;
+    description?: string;
+};
+export declare const InlineCitationSource: ({ title, url, description, className, children, ...props }: InlineCitationSourceProps) => React.JSX.Element;
+export type InlineCitationQuoteProps = React.ComponentProps<"blockquote">;
+export declare const InlineCitationQuote: ({ children, className, ...props }: InlineCitationQuoteProps) => React.JSX.Element;

package/components/ai-elements/inline-citation.js

@@ -0,0 +1,314 @@
+"use client";
+import { jsx as i, jsxs as k } from "react/jsx-runtime";
+import * as o from "react";
+import { createPortal as M } from "react-dom";
+import { MotionConfig as R, AnimatePresence as E, motion as L } from "motion/react";
+import { cn as c } from "../../lib/cn.js";
+import { floatVariants as T } from "../../lib/motion.js";
+import { ArrowRight as P, ArrowLeft as z } from "../../lib/icons.js";
+import { Badge as S } from "../badge.js";
+const F = ({ className: e, ...t }) => /* @__PURE__ */ i(
+  "span",
+  {
+    className: c("group/citation inline items-center gap-1", e),
+    ...t
+  }
+), H = ({
+  className: e,
+  ...t
+}) => /* @__PURE__ */ i(
+  "span",
+  {
+    className: c(
+      "rounded-xs transition-colors group-hover/citation:bg-accent",
+      e
+    ),
+    ...t
+  }
+), g = o.createContext(null);
+function N(e) {
+  const t = o.useContext(g);
+  if (!t)
+    throw new Error(`${e} must be used within an <InlineCitationCard>.`);
+  return t;
+}
+const Q = ({
+  children: e,
+  open: t,
+  defaultOpen: s = !1,
+  onOpenChange: n,
+  openDelay: r = 0,
+  closeDelay: a = 0
+}) => {
+  const d = t !== void 0, [C, l] = o.useState(s), h = d ? t : C, u = o.useRef(null), f = o.useRef(null), m = o.useRef({}), x = o.useCallback(
+    (b) => {
+      d || l(b), n == null || n(b);
+    },
+    [d, n]
+  ), p = o.useCallback(() => {
+    window.clearTimeout(m.current.close), m.current.open = window.setTimeout(() => x(!0), r);
+  }, [r, x]), w = o.useCallback(() => {
+    window.clearTimeout(m.current.open), m.current.close = window.setTimeout(
+      () => x(!1),
+      a + 120
+    );
+  }, [a, x]);
+  return o.useEffect(
+    () => () => {
+      window.clearTimeout(m.current.open), window.clearTimeout(m.current.close);
+    },
+    []
+  ), /* @__PURE__ */ i(
+    g.Provider,
+    {
+      value: { open: h, triggerRef: u, contentRef: f, handleOpen: p, handleClose: w },
+      children: e
+    }
+  );
+}, V = ({
+  sources: e,
+  className: t,
+  ...s
+}) => {
+  const { open: n, triggerRef: r, handleOpen: a, handleClose: d } = N(
+    "InlineCitationCardTrigger"
+  ), C = o.useMemo(() => {
+    if (!e[0]) return "unknown";
+    let l = e[0];
+    try {
+      l = new URL(e[0]).hostname;
+    } catch {
+    }
+    return e.length > 1 ? `${l} +${e.length - 1}` : l;
+  }, [e]);
+  return /* @__PURE__ */ i(
+    S,
+    {
+      ref: r,
+      variant: "soft",
+      className: c("ml-1 cursor-default align-middle", t),
+      role: "button",
+      tabIndex: 0,
+      "aria-expanded": n,
+      "aria-haspopup": "dialog",
+      onMouseEnter: a,
+      onMouseLeave: d,
+      onFocus: a,
+      onBlur: d,
+      ...s,
+      children: C
+    }
+  );
+}, X = ({
+  className: e,
+  children: t,
+  ...s
+}) => {
+  const { open: n, triggerRef: r, contentRef: a, handleOpen: d, handleClose: C } = N("InlineCitationCardBody"), [l, h] = o.useState(null);
+  return o.useLayoutEffect(() => {
+    if (!n) return;
+    const u = r.current;
+    if (!u) return;
+    const f = () => {
+      var b;
+      const m = u.getBoundingClientRect(), x = ((b = a.current) == null ? void 0 : b.offsetWidth) ?? 320, p = window.innerWidth - x - 8, w = m.left > p ? Math.max(8, p) : m.left;
+      h({ top: m.bottom + 6, left: w });
+    };
+    return f(), window.addEventListener("resize", f), window.addEventListener("scroll", f, !0), () => {
+      window.removeEventListener("resize", f), window.removeEventListener("scroll", f, !0);
+    };
+  }, [n, r]), M(
+    /* @__PURE__ */ i(R, { reducedMotion: "user", children: /* @__PURE__ */ i(E, { children: n && /* @__PURE__ */ i(
+      L.div,
+      {
+        ref: a,
+        role: "dialog",
+        variants: T,
+        initial: "hidden",
+        animate: "visible",
+        exit: "hidden",
+        onMouseEnter: d,
+        onMouseLeave: C,
+        style: {
+          position: "fixed",
+          top: (l == null ? void 0 : l.top) ?? 0,
+          left: (l == null ? void 0 : l.left) ?? 0,
+          visibility: l ? "visible" : "hidden",
+          transformOrigin: "top left"
+        },
+        className: c(
+          "z-50 w-80 overflow-hidden rounded-lg border border-border bg-elevated text-foreground shadow-elevation",
+          e
+        ),
+        ...s,
+        children: t
+      }
+    ) }) }),
+    document.body
+  );
+}, I = o.createContext(null);
+function v() {
+  const e = o.useContext(I);
+  if (!e)
+    throw new Error(
+      "InlineCitationCarousel parts must be used within an <InlineCitationCarousel>."
+    );
+  return e;
+}
+const G = ({
+  className: e,
+  children: t,
+  ...s
+}) => {
+  const [n, r] = o.useState(0), [a, d] = o.useState(0), C = o.useCallback(
+    () => r((u) => Math.max(0, u - 1)),
+    []
+  ), l = o.useCallback(
+    () => r((u) => Math.min(Math.max(0, a - 1), u + 1)),
+    [a]
+  ), h = o.useCallback((u) => {
+    d(u), r((f) => Math.min(f, Math.max(0, u - 1)));
+  }, []);
+  return /* @__PURE__ */ i(
+    I.Provider,
+    {
+      value: { index: n, count: a, setCount: h, scrollPrev: C, scrollNext: l },
+      children: /* @__PURE__ */ i("div", { className: c("w-full", e), ...s, children: t })
+    }
+  );
+}, J = ({
+  className: e,
+  children: t,
+  ...s
+}) => {
+  const { index: n, setCount: r } = v(), a = o.Children.count(t);
+  return o.useEffect(() => {
+    r(a);
+  }, [a, r]), /* @__PURE__ */ i("div", { className: c("overflow-hidden", e), ...s, children: /* @__PURE__ */ i(
+    "div",
+    {
+      className: "flex transition-transform duration-(--duration-normal) ease-out motion-reduce:transition-none",
+      style: { transform: `translateX(-${n * 100}%)` },
+      children: t
+    }
+  ) });
+}, K = ({
+  className: e,
+  ...t
+}) => /* @__PURE__ */ i(
+  "div",
+  {
+    className: c("w-full shrink-0 space-y-2 p-4", e),
+    ...t
+  }
+), O = ({
+  className: e,
+  ...t
+}) => /* @__PURE__ */ i(
+  "div",
+  {
+    className: c(
+      "flex items-center justify-between gap-2 rounded-t-lg bg-muted p-2",
+      e
+    ),
+    ...t
+  }
+), Y = ({
+  children: e,
+  className: t,
+  ...s
+}) => {
+  const { index: n, count: r } = v();
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: c(
+        "flex flex-1 items-center justify-end px-3 py-1 text-xs text-tertiary tabular-nums",
+        t
+      ),
+      ...s,
+      children: e ?? `${r === 0 ? 0 : n + 1}/${r}`
+    }
+  );
+}, y = c(
+  "inline-flex size-5 shrink-0 items-center justify-center rounded-sm text-secondary",
+  "outline-none transition-colors hover:text-foreground",
+  "focus-visible:ring-3 focus-visible:ring-ring",
+  "disabled:pointer-events-none disabled:opacity-40"
+), Z = ({
+  className: e,
+  ...t
+}) => {
+  const { scrollPrev: s, index: n } = v();
+  return /* @__PURE__ */ i(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Previous source",
+      disabled: n <= 0,
+      onClick: s,
+      className: c(y, e),
+      ...t,
+      children: /* @__PURE__ */ i(z, { className: "size-4" })
+    }
+  );
+}, _ = ({
+  className: e,
+  ...t
+}) => {
+  const { scrollNext: s, index: n, count: r } = v();
+  return /* @__PURE__ */ i(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Next source",
+      disabled: n >= r - 1,
+      onClick: s,
+      className: c(y, e),
+      ...t,
+      children: /* @__PURE__ */ i(P, { className: "size-4" })
+    }
+  );
+}, D = ({
+  title: e,
+  url: t,
+  description: s,
+  className: n,
+  children: r,
+  ...a
+}) => /* @__PURE__ */ k("div", { className: c("space-y-1", n), ...a, children: [
+  e && /* @__PURE__ */ i("p", { className: "truncate font-medium text-base leading-tight text-primary", children: e }),
+  t && /* @__PURE__ */ i("p", { className: "truncate break-all text-xs text-tertiary", children: t }),
+  s && /* @__PURE__ */ i("p", { className: "line-clamp-3 text-base leading-relaxed text-secondary", children: s }),
+  r
+] }), ee = ({
+  children: e,
+  className: t,
+  ...s
+}) => /* @__PURE__ */ i(
+  "blockquote",
+  {
+    className: c(
+      "border-l-2 border-border pl-3 text-base italic text-tertiary",
+      t
+    ),
+    ...s,
+    children: e
+  }
+);
+export {
+  F as InlineCitation,
+  Q as InlineCitationCard,
+  X as InlineCitationCardBody,
+  V as InlineCitationCardTrigger,
+  G as InlineCitationCarousel,
+  J as InlineCitationCarouselContent,
+  O as InlineCitationCarouselHeader,
+  Y as InlineCitationCarouselIndex,
+  K as InlineCitationCarouselItem,
+  _ as InlineCitationCarouselNext,
+  Z as InlineCitationCarouselPrev,
+  ee as InlineCitationQuote,
+  D as InlineCitationSource,
+  H as InlineCitationText
+};

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

@@ -0,0 +1,96 @@
+import { VariantProps } from 'class-variance-authority';
+import { ButtonProps } from '../button';
+import * as React from "react";
+/**
+ * Message — the chat turn family, ported from Vercel AI Elements onto ADS.
+ *
+ * Standalone and props-driven (no assistant-ui runtime): the same compound
+ * API as upstream (`Message` + `from`, `MessageContent`, `MessageResponse`,
+ * the `MessageBranch*` navigator, `MessageActions`/`MessageAction`,
+ * `MessageAttachment(s)`, `MessageToolbar`) so upstream examples translate
+ * 1:1 — implemented with ADS tokens, primitives, and icons.
+ */
+/** Mirror of `ai`'s `UIMessage["role"]` (inlined to avoid the `ai` dep). */
+export type MessageRole = "user" | "assistant" | "system";
+/** Mirror of `ai`'s `FileUIPart` (inlined to avoid the `ai` dep). */
+export type MessageFilePart = {
+    type?: "file";
+    url: string;
+    mediaType?: string;
+    filename?: string;
+};
+export type MessageProps = React.HTMLAttributes<HTMLDivElement> & {
+    from: MessageRole;
+};
+export declare const Message: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    from: MessageRole;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const messageContentVariants: (props?: ({
+    variant?: "flat" | "contained" | 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;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
+export type MessageAvatarProps = React.HTMLAttributes<HTMLSpanElement> & {
+    src: string;
+    name?: string;
+};
+export declare const MessageAvatar: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
+    src: string;
+    name?: string;
+} & React.RefAttributes<HTMLSpanElement>>;
+export type MessageResponseProps = React.HTMLAttributes<HTMLDivElement> & {
+    children?: React.ReactNode;
+};
+export declare const MessageResponse: React.NamedExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export type MessageActionsProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const MessageActions: React.ForwardRefExoticComponent<MessageActionsProps & React.RefAttributes<HTMLDivElement>>;
+export type MessageActionProps = ButtonProps & {
+    tooltip?: string;
+    label?: string;
+};
+export declare const MessageAction: React.ForwardRefExoticComponent<ButtonProps & {
+    tooltip?: string;
+    label?: string;
+} & React.RefAttributes<HTMLButtonElement>>;
+export type MessageBranchProps = React.HTMLAttributes<HTMLDivElement> & {
+    defaultBranch?: number;
+    onBranchChange?: (branchIndex: number) => void;
+};
+export declare const MessageBranch: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    defaultBranch?: number;
+    onBranchChange?: (branchIndex: number) => void;
+} & React.RefAttributes<HTMLDivElement>>;
+export type MessageBranchContentProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const MessageBranchContent: {
+    ({ children, ...props }: MessageBranchContentProps): React.JSX.Element;
+    displayName: string;
+};
+export type MessageBranchSelectorProps = React.HTMLAttributes<HTMLDivElement> & {
+    from: MessageRole;
+};
+export declare const MessageBranchSelector: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    from: MessageRole;
+} & React.RefAttributes<HTMLDivElement>>;
+export type MessageBranchPreviousProps = ButtonProps;
+export declare const MessageBranchPrevious: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export type MessageBranchNextProps = ButtonProps;
+export declare const MessageBranchNext: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export type MessageBranchPageProps = React.HTMLAttributes<HTMLSpanElement>;
+export declare const MessageBranchPage: React.ForwardRefExoticComponent<MessageBranchPageProps & React.RefAttributes<HTMLSpanElement>>;
+export type MessageAttachmentProps = React.HTMLAttributes<HTMLDivElement> & {
+    data: MessageFilePart;
+    onRemove?: () => void;
+};
+export declare const MessageAttachment: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    data: MessageFilePart;
+    onRemove?: () => void;
+} & React.RefAttributes<HTMLDivElement>>;
+export type MessageAttachmentsProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const MessageAttachments: React.ForwardRefExoticComponent<MessageAttachmentsProps & React.RefAttributes<HTMLDivElement>>;
+export type MessageToolbarProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const MessageToolbar: React.ForwardRefExoticComponent<MessageToolbarProps & React.RefAttributes<HTMLDivElement>>;
+export {};