@cognite/aura 0.2.0 → 0.3.1

package/dist/components/ui/core/message/message.d.ts

@@ -1,4 +1,5 @@
-import { ComponentProps, HTMLAttributes } from 'react';
+import { ComponentProps, HTMLAttributes, MemoExoticComponent, ReactNode } from 'react';
+import { JSX } from 'react/jsx-runtime';
 import { Streamdown } from 'streamdown';
 import { FileUIPart, UIMessage } from '../../../../lib/ai/types';
 import { Avatar, AvatarIcon } from '../avatar/avatar';
@@ -6,50 +7,50 @@ import { Button } from '../button/button';
 type MessageProps = HTMLAttributes<HTMLDivElement> & {
     isResponse?: boolean;
 };
-declare const Message: ({ className, isResponse, ...props }: MessageProps) => import("react/jsx-runtime").JSX.Element;
+declare const Message: ({ className, isResponse, ...props }: MessageProps) => ReactNode;
 type MessageContentProps = HTMLAttributes<HTMLDivElement>;
-declare const MessageContent: ({ children, className, ...props }: MessageContentProps) => import("react/jsx-runtime").JSX.Element;
+declare const MessageContent: ({ children, className, ...props }: MessageContentProps) => ReactNode;
 type MessageAvatarProps = ComponentProps<typeof Avatar> & {
     avatarUrl?: string;
     name?: string;
 };
-declare const MessageAvatar: ({ avatarUrl, name, className, children, variant, sizes, ...props }: MessageAvatarProps) => import("react/jsx-runtime").JSX.Element;
+declare const MessageAvatar: ({ avatarUrl, name, className, children, variant, sizes, ...props }: MessageAvatarProps) => ReactNode;
 type MessageAvatarIconProps = ComponentProps<typeof AvatarIcon>;
-declare const MessageAvatarIcon: (props: MessageAvatarIconProps) => import("react/jsx-runtime").JSX.Element;
+declare const MessageAvatarIcon: (props: MessageAvatarIconProps) => ReactNode;
 type MessageActionsProps = ComponentProps<'div'>;
-declare const MessageActions: ({ className, children, ...props }: MessageActionsProps) => import("react/jsx-runtime").JSX.Element;
+declare const MessageActions: ({ className, children, ...props }: MessageActionsProps) => ReactNode;
 type MessageActionProps = ComponentProps<typeof Button> & {
     tooltip?: string;
     label?: string;
 };
-declare const MessageAction: ({ tooltip, children, label, className, variant, size, ...props }: MessageActionProps) => import("react/jsx-runtime").JSX.Element;
+declare const MessageAction: ({ tooltip, children, label, className, variant, size, ...props }: MessageActionProps) => ReactNode;
 type MessageBranchProps = HTMLAttributes<HTMLDivElement> & {
     defaultBranch?: number;
     onBranchChange?: (branchIndex: number) => void;
 };
-declare const MessageBranch: ({ defaultBranch, onBranchChange, className, ...props }: MessageBranchProps) => import("react/jsx-runtime").JSX.Element;
+declare const MessageBranch: ({ defaultBranch, onBranchChange, className, ...props }: MessageBranchProps) => ReactNode;
 type MessageBranchContentProps = HTMLAttributes<HTMLDivElement>;
-declare const MessageBranchContent: ({ children, ...props }: MessageBranchContentProps) => import("react/jsx-runtime").JSX.Element[];
+declare const MessageBranchContent: ({ children, ...props }: MessageBranchContentProps) => ReactNode[];
 type MessageBranchSelectorProps = HTMLAttributes<HTMLDivElement> & {
     from: UIMessage['role'];
 };
-declare const MessageBranchSelector: ({ ...props }: MessageBranchSelectorProps) => import("react/jsx-runtime").JSX.Element | null;
+declare const MessageBranchSelector: ({ ...props }: MessageBranchSelectorProps) => ReactNode;
 type MessageBranchPreviousProps = ComponentProps<typeof Button>;
-declare const MessageBranchPrevious: ({ children, ...props }: MessageBranchPreviousProps) => import("react/jsx-runtime").JSX.Element;
+declare const MessageBranchPrevious: ({ children, ...props }: MessageBranchPreviousProps) => ReactNode;
 type MessageBranchNextProps = ComponentProps<typeof Button>;
-declare const MessageBranchNext: ({ children, ...props }: MessageBranchNextProps) => import("react/jsx-runtime").JSX.Element;
+declare const MessageBranchNext: ({ children, ...props }: MessageBranchNextProps) => ReactNode;
 type MessageBranchPageProps = HTMLAttributes<HTMLSpanElement>;
-declare const MessageBranchPage: ({ className, ...props }: MessageBranchPageProps) => import("react/jsx-runtime").JSX.Element;
+declare const MessageBranchPage: ({ className, ...props }: MessageBranchPageProps) => ReactNode;
 type MessageResponseProps = ComponentProps<typeof Streamdown>;
-declare const MessageResponse: import('react').MemoExoticComponent<({ className, components, plugins, controls, ...props }: MessageResponseProps) => import("react/jsx-runtime").JSX.Element>;
+declare const MessageResponse: MemoExoticComponent<({ className, components, plugins, controls, ...props }: MessageResponseProps) => JSX.Element>;
 type MessageAttachmentProps = HTMLAttributes<HTMLDivElement> & {
     data: FileUIPart;
     className?: string;
     onRemove?: () => void;
 };
-declare function MessageAttachment({ data, className, onRemove, ...props }: MessageAttachmentProps): import("react/jsx-runtime").JSX.Element;
+declare function MessageAttachment({ data, className, onRemove, ...props }: MessageAttachmentProps): ReactNode;
 type MessageAttachmentsProps = ComponentProps<'div'>;
-declare function MessageAttachments({ children, className, ...props }: MessageAttachmentsProps): import("react/jsx-runtime").JSX.Element | null;
+declare function MessageAttachments({ children, className, ...props }: MessageAttachmentsProps): ReactNode;
 type MessageToolbarProps = ComponentProps<'div'>;
-declare const MessageToolbar: ({ className, children, ...props }: MessageToolbarProps) => import("react/jsx-runtime").JSX.Element;
+declare const MessageToolbar: ({ className, children, ...props }: MessageToolbarProps) => ReactNode;
 export { Message, MessageAction, MessageActions, MessageAttachment, MessageAttachments, MessageAvatar, MessageAvatarIcon, MessageBranch, MessageBranchContent, MessageBranchNext, MessageBranchPage, MessageBranchPrevious, MessageBranchSelector, MessageContent, MessageResponse, MessageToolbar, };

package/dist/components/ui/core/message/message.js

@@ -1,143 +1,313 @@
-import { jsx as e, jsxs as m } from "react/jsx-runtime";
-import { createContext as i, memo as b } from "react";
-import { mermaid as _ } from "@streamdown/mermaid";
-import "@tabler/icons-react";
-import { Streamdown as p } from "streamdown";
-import { cn as d } from "../../../../lib/utils.js";
-import "../avatar/avatar.js";
-import { Button as u } from "../button/button.js";
-import "../button-group/button-group.js";
-import { Tooltip as w, TooltipTrigger as g, TooltipContent as k } from "../tooltip/tooltip.js";
-import { MESSAGE_RESPONSE_DEFAULT_STREAMDOWN_CONTROLS as v } from "./message-response-default-streamdown-controls.js";
-const q = ({ className: t, isResponse: o = !1, ...a }) => /* @__PURE__ */ e(
+import { jsx as t, jsxs as l, Fragment as h } from "react/jsx-runtime";
+import { createContext as A, memo as T, useState as w, useCallback as v, useMemo as k, useEffect as z, useContext as C } from "react";
+import { mermaid as I } from "@streamdown/mermaid";
+import { IconX as f, IconPaperclip as P, IconChevronRight as E, IconChevronLeft as S } from "@tabler/icons-react";
+import { Streamdown as R } from "streamdown";
+import { cn as c, getInitials as j } from "../../../../lib/utils.js";
+import { Avatar as q, AvatarImage as L, AvatarFallback as O, AvatarIcon as F } from "../avatar/avatar.js";
+import { Button as g } from "../button/button.js";
+import { ButtonGroupText as G, ButtonGroup as D } from "../button-group/button-group.js";
+import { Tooltip as x, TooltipTrigger as N, TooltipContent as y } from "../tooltip/tooltip.js";
+import { MESSAGE_RESPONSE_DEFAULT_STREAMDOWN_CONTROLS as W } from "./message-response-default-streamdown-controls.js";
+const oe = ({
+  className: e,
+  isResponse: a = !1,
+  ...o
+}) => /* @__PURE__ */ t(
   "div",
   {
     "data-slot": "message",
-    className: d(
+    className: c(
       "group flex w-full items-start justify-start gap-3 mb-0 py-3",
-      o ? "is-assistant items-start" : "is-user flex-row-reverse",
-      t
+      a ? "is-assistant items-start" : "is-user flex-row-reverse",
+      e
     ),
-    ...a
+    ...o
   }
-), O = ({
-  children: t,
-  className: o,
-  ...a
-}) => /* @__PURE__ */ e(
+), re = ({
+  children: e,
+  className: a,
+  ...o
+}) => /* @__PURE__ */ t(
   "div",
   {
     "data-slot": "message-content",
-    className: d(
+    className: c(
       "is-user:dark flex flex-col gap-4 rounded-md text-base leading-tight tracking-tightest",
       "max-w-4/5",
       "group-[.is-user]:overflow-hidden group-[.is-user]:bg-accent-background group-[.is-user]:p-2 group-[.is-user]:text-foreground",
       "group-[.is-assistant]:text-foreground group-[.is-assistant]:pt-1",
-      o
+      a
     ),
-    ...a,
-    children: t
+    ...o,
+    children: e
   }
-), z = ({
-  className: t,
-  children: o,
-  ...a
-}) => /* @__PURE__ */ e(
+), de = ({
+  avatarUrl: e,
+  name: a,
+  className: o,
+  children: r,
+  variant: s,
+  sizes: n,
+  ...d
+}) => {
+  const m = a ? j(a) : "ME";
+  return /* @__PURE__ */ t(
+    q,
+    {
+      "data-slot": "message-avatar",
+      className: c("size-7 group-[.is-user]:mt-1", o),
+      variant: s,
+      sizes: n,
+      ...d,
+      children: r || /* @__PURE__ */ l(h, { children: [
+        e && /* @__PURE__ */ t(
+          L,
+          {
+            alt: a || "",
+            className: "mt-0 mb-0",
+            src: e
+          }
+        ),
+        /* @__PURE__ */ t(O, { children: m })
+      ] })
+    }
+  );
+}, se = (e) => /* @__PURE__ */ t(F, { "data-slot": "message-avatar-icon", ...e }), ne = ({
+  className: e,
+  children: a,
+  ...o
+}) => /* @__PURE__ */ t(
   "div",
   {
     "data-slot": "message-actions",
-    className: d("flex items-center gap-2 pt-2", t),
-    ...a,
-    children: o
+    className: c("flex items-center gap-2 pt-2", e),
+    ...o,
+    children: a
   }
-), D = ({
-  tooltip: t,
-  children: o,
-  label: a,
+), ce = ({
+  tooltip: e,
+  children: a,
+  label: o,
   className: r,
   variant: s = "ghost",
-  size: c = "sm",
-  ...l
+  size: n = "sm",
+  ...d
 }) => {
-  const n = /* @__PURE__ */ m(
-    u,
+  const m = /* @__PURE__ */ l(
+    g,
     {
       "data-slot": "message-action",
-      className: d(
+      className: c(
         "relative icon-sm text-muted-foreground hover:text-foreground",
         r
       ),
-      size: c,
+      size: n,
       type: "button",
       variant: s,
-      ...l,
+      ...d,
       children: [
-        o,
-        /* @__PURE__ */ e("span", { className: "sr-only", children: a || t })
+        a,
+        /* @__PURE__ */ t("span", { className: "sr-only", children: o || e })
       ]
     }
   );
-  return t ? /* @__PURE__ */ m(w, { children: [
-    /* @__PURE__ */ e(g, { render: n }),
-    /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e("p", { children: t }) })
-  ] }) : n;
-};
-i(
+  return e ? /* @__PURE__ */ l(x, { children: [
+    /* @__PURE__ */ t(N, { render: m }),
+    /* @__PURE__ */ t(y, { children: /* @__PURE__ */ t("p", { children: e }) })
+  ] }) : m;
+}, M = A(
   null
-);
-const f = {
-  h1: ({ children: t }) => /* @__PURE__ */ e("h1", { className: "mt-0 mb-2 scroll-m-20 text-xl font-medium tracking-tightest", children: t }),
-  h2: ({ children: t }) => /* @__PURE__ */ e("h2", { className: "mt-4 mb-1 scroll-m-20 text-lg font-medium tracking-tightest", children: t }),
-  h3: ({ children: t }) => /* @__PURE__ */ e("h3", { className: "mt-4 mb-1 scroll-m-20 text-base font-medium tracking-tighter", children: t }),
-  h4: ({ children: t }) => /* @__PURE__ */ e("h4", { className: "mt-2 mb-0 scroll-m-20 text-sm font-medium tracking-normal", children: t }),
-  h5: ({ children: t }) => /* @__PURE__ */ e("h5", { className: "mt-0 mb-0 scroll-m-20 text-xs font-medium tracking-tighter", children: t }),
-  h6: ({ children: t }) => /* @__PURE__ */ e("h6", { className: "mt-0 mb-0 scroll-m-20 text-2xs font-medium tracking-tighter", children: t }),
-  p: ({ children: t }) => /* @__PURE__ */ e("p", { className: "mt-2 mb-3 text-base font-normal leading-5 tracking-tightest", children: t }),
-  strong: ({ children: t }) => /* @__PURE__ */ e("strong", { className: "font-medium", children: t }),
-  em: ({ children: t }) => /* @__PURE__ */ e("em", { className: "italic", children: t }),
-  b: ({ children: t }) => /* @__PURE__ */ e("b", { className: "font-medium", children: t }),
-  i: ({ children: t }) => /* @__PURE__ */ e("i", { className: "italic", children: t }),
-  ul: ({ children: t }) => /* @__PURE__ */ e("ul", { className: "ml-8.25 mb-3 pt-2 pl-0 pb-0 list-disc text-base font-normal tracking-tightest", children: t }),
-  ol: ({ children: t }) => /* @__PURE__ */ e("ol", { className: "ml-8.25 mb-3 pt-2 pl-0 pb-0 list-decimal text-base font-normal tracking-tightest", children: t }),
-  li: ({ children: t }) => /* @__PURE__ */ e("li", { className: "py-0", children: t }),
-  blockquote: ({ children: t }) => /* @__PURE__ */ e("blockquote", { className: "my-3 pr-2 pl-2 border-l border-l-border text-sm text-muted-foreground font-normal tracking-tight not-italic", children: t }),
-  hr: () => /* @__PURE__ */ e("hr", { className: "my-4 border-border" }),
-  a: ({ children: t, href: o, ...a }) => /* @__PURE__ */ e(
+), p = () => {
+  const e = C(M);
+  if (!e)
+    throw new Error(
+      "MessageBranch components must be used within MessageBranch"
+    );
+  return e;
+}, me = ({
+  defaultBranch: e = 0,
+  onBranchChange: a,
+  className: o,
+  ...r
+}) => {
+  const [s, n] = w(e), [d, m] = w([]), i = v(() => {
+    n((b) => {
+      const u = b > 0 ? b - 1 : d.length - 1;
+      return a?.(u), u;
+    });
+  }, [d.length, a]), _ = v(() => {
+    n((b) => {
+      const u = b < d.length - 1 ? b + 1 : 0;
+      return a?.(u), u;
+    });
+  }, [d.length, a]), B = k(
+    () => ({
+      currentBranch: s,
+      totalBranches: d.length,
+      goToPrevious: i,
+      goToNext: _,
+      branches: d,
+      setBranches: m
+    }),
+    [s, d, i, _, m]
+  );
+  return /* @__PURE__ */ t(M.Provider, { value: B, children: /* @__PURE__ */ t(
+    "div",
+    {
+      "data-slot": "message-branch",
+      className: c("grid w-full gap-2 [&>div]:pb-0", o),
+      ...r
+    }
+  ) });
+}, le = ({
+  children: e,
+  ...a
+}) => {
+  const { currentBranch: o, setBranches: r, branches: s } = p(), n = k(
+    () => Array.isArray(e) ? e : [e],
+    [e]
+  );
+  return z(() => {
+    s.length !== n.length && r(n);
+  }, [n, s, r]), n.map((d, m) => /* @__PURE__ */ t(
+    "div",
+    {
+      "data-slot": "message-branch-content",
+      className: c(
+        "grid gap-2 overflow-hidden [&>div]:pb-0",
+        m === o ? "block" : "hidden"
+      ),
+      ...a,
+      children: d
+    },
+    d.key
+  ));
+}, ie = ({
+  ...e
+}) => {
+  const { totalBranches: a } = p();
+  return a <= 1 ? null : /* @__PURE__ */ t(
+    D,
+    {
+      "data-slot": "message-branch-selector",
+      className: "[&>*:not(:first-child)]:rounded-l-md [&>*:not(:last-child)]:rounded-r-md",
+      orientation: "horizontal",
+      ...e
+    }
+  );
+}, be = ({
+  children: e,
+  ...a
+}) => {
+  const { goToPrevious: o, totalBranches: r } = p();
+  return /* @__PURE__ */ t(
+    g,
+    {
+      "data-slot": "message-branch-previous",
+      "aria-label": "Previous branch",
+      disabled: r <= 1,
+      onClick: o,
+      size: "icon-sm",
+      type: "button",
+      variant: "ghost",
+      ...a,
+      children: e ?? /* @__PURE__ */ t(S, { size: 14 })
+    }
+  );
+}, ue = ({
+  children: e,
+  ...a
+}) => {
+  const { goToNext: o, totalBranches: r } = p();
+  return /* @__PURE__ */ t(
+    g,
+    {
+      "data-slot": "message-branch-next",
+      "aria-label": "Next branch",
+      disabled: r <= 1,
+      onClick: o,
+      size: "icon-sm",
+      type: "button",
+      variant: "ghost",
+      ...a,
+      children: e ?? /* @__PURE__ */ t(E, { size: 14 })
+    }
+  );
+}, ge = ({
+  className: e,
+  ...a
+}) => {
+  const { currentBranch: o, totalBranches: r } = p();
+  return /* @__PURE__ */ l(
+    G,
+    {
+      "data-slot": "message-branch-page",
+      className: c(
+        "border-none bg-transparent text-muted-foreground shadow-none px-2",
+        e
+      ),
+      ...a,
+      children: [
+        o + 1,
+        "/",
+        r
+      ]
+    }
+  );
+}, V = {
+  h1: ({ children: e }) => /* @__PURE__ */ t("h1", { className: "mt-0 mb-2 scroll-m-20 text-xl font-medium tracking-tightest", children: e }),
+  h2: ({ children: e }) => /* @__PURE__ */ t("h2", { className: "mt-4 mb-1 scroll-m-20 text-lg font-medium tracking-tightest", children: e }),
+  h3: ({ children: e }) => /* @__PURE__ */ t("h3", { className: "mt-4 mb-1 scroll-m-20 text-base font-medium tracking-tighter", children: e }),
+  h4: ({ children: e }) => /* @__PURE__ */ t("h4", { className: "mt-2 mb-0 scroll-m-20 text-sm font-medium tracking-normal", children: e }),
+  h5: ({ children: e }) => /* @__PURE__ */ t("h5", { className: "mt-0 mb-0 scroll-m-20 text-xs font-medium tracking-tighter", children: e }),
+  h6: ({ children: e }) => /* @__PURE__ */ t("h6", { className: "mt-0 mb-0 scroll-m-20 text-2xs font-medium tracking-tighter", children: e }),
+  p: ({ children: e }) => /* @__PURE__ */ t("p", { className: "mt-2 mb-3 text-base font-normal leading-5 tracking-tightest", children: e }),
+  strong: ({ children: e }) => /* @__PURE__ */ t("strong", { className: "font-medium", children: e }),
+  em: ({ children: e }) => /* @__PURE__ */ t("em", { className: "italic", children: e }),
+  b: ({ children: e }) => /* @__PURE__ */ t("b", { className: "font-medium", children: e }),
+  i: ({ children: e }) => /* @__PURE__ */ t("i", { className: "italic", children: e }),
+  ul: ({ children: e }) => /* @__PURE__ */ t("ul", { className: "ml-8.25 mb-3 pt-2 pl-0 pb-0 list-disc text-base font-normal tracking-tightest", children: e }),
+  ol: ({ children: e }) => /* @__PURE__ */ t("ol", { className: "ml-8.25 mb-3 pt-2 pl-0 pb-0 list-decimal text-base font-normal tracking-tightest", children: e }),
+  li: ({ children: e }) => /* @__PURE__ */ t("li", { className: "py-0", children: e }),
+  blockquote: ({ children: e }) => /* @__PURE__ */ t("blockquote", { className: "my-3 pr-2 pl-2 border-l border-l-border text-sm text-muted-foreground font-normal tracking-tight not-italic", children: e }),
+  hr: () => /* @__PURE__ */ t("hr", { className: "my-4 border-border" }),
+  a: ({ children: e, href: a, ...o }) => /* @__PURE__ */ t(
     "a",
     {
       className: "text-link-foreground no-underline hover:underline underline-offset-4",
-      href: o,
-      ...a,
-      children: t
+      href: a,
+      ...o,
+      children: e
     }
   ),
-  table: ({ children: t }) => /* @__PURE__ */ e(
+  table: ({ children: e }) => /* @__PURE__ */ t(
     "div",
     {
       className: "my-6 overflow-x-auto",
       tabIndex: 0,
       role: "group",
       "aria-label": "Atlas AI Chat Table",
-      children: /* @__PURE__ */ e("table", { className: "w-full", children: t })
+      children: /* @__PURE__ */ t("table", { className: "w-full", children: e })
     }
   ),
-  thead: ({ children: t }) => /* @__PURE__ */ e("thead", { children: t }),
-  tbody: ({ children: t }) => /* @__PURE__ */ e("tbody", { children: t }),
-  tr: ({ children: t }) => /* @__PURE__ */ e("tr", { className: "m-0 border-t p-0 even:bg-muted-background", children: t }),
-  th: ({ children: t }) => /* @__PURE__ */ e("th", { className: "border px-4 py-2 text-left font-bold", children: t }),
-  td: ({ children: t }) => /* @__PURE__ */ e("td", { className: "border px-4 py-2 text-left", children: t })
-}, h = b(
+  thead: ({ children: e }) => /* @__PURE__ */ t("thead", { children: e }),
+  tbody: ({ children: e }) => /* @__PURE__ */ t("tbody", { children: e }),
+  tr: ({ children: e }) => /* @__PURE__ */ t("tr", { className: "m-0 border-t p-0 even:bg-muted-background", children: e }),
+  th: ({ children: e }) => /* @__PURE__ */ t("th", { className: "border px-4 py-2 text-left font-bold", children: e }),
+  td: ({ children: e }) => /* @__PURE__ */ t("td", { className: "border px-4 py-2 text-left", children: e })
+}, X = T(
   ({
-    className: t,
-    components: o,
-    plugins: a,
+    className: e,
+    components: a,
+    plugins: o,
     controls: r,
     ...s
-  }) => /* @__PURE__ */ e(
-    p,
+  }) => /* @__PURE__ */ t(
+    R,
     {
       "data-slot": "message-response",
-      className: d(
+      className: c(
         "size-full",
         // Blockquote paragraph overrides
         "[&_blockquote_p]:text-sm",
@@ -236,21 +406,139 @@ const f = {
         // First and last child margin resets
         "[&>*:first-child]:mt-0",
         "[&>*:last-child]:mb-0",
-        t
+        e
       ),
-      components: { ...f, ...o },
-      controls: r ?? v,
-      plugins: { ...a, mermaid: _ },
+      components: { ...V, ...a },
+      controls: r ?? W,
+      plugins: { ...o, mermaid: I },
       ...s
     }
   ),
-  (t, o) => t.children === o.children
+  (e, a) => e.children === a.children
+);
+X.displayName = "MessageResponse";
+function pe({
+  data: e,
+  className: a,
+  onRemove: o,
+  ...r
+}) {
+  const s = e.filename || "", d = (e.mediaType?.startsWith("image/") && e.url ? "image" : "file") === "image", m = s || (d ? "Image" : "Attachment");
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      "data-slot": "message-attachment",
+      className: c(
+        "group relative size-24 overflow-hidden rounded-lg",
+        a
+      ),
+      ...r,
+      children: d ? /* @__PURE__ */ l(h, { children: [
+        /* @__PURE__ */ t(
+          "img",
+          {
+            alt: s || "attachment",
+            className: "size-full object-cover",
+            height: 100,
+            src: e.url,
+            width: 100
+          }
+        ),
+        o && /* @__PURE__ */ l(
+          g,
+          {
+            "aria-label": "Remove attachment",
+            className: "absolute top-2 right-2 size-6 rounded-full bg-background/80 p-0 opacity-0 backdrop-blur-sm transition-opacity hover:bg-background group-hover:opacity-100 [&>svg]:size-3",
+            onClick: (i) => {
+              i.stopPropagation(), o();
+            },
+            type: "button",
+            variant: "ghost",
+            children: [
+              /* @__PURE__ */ t(f, {}),
+              /* @__PURE__ */ t("span", { className: "sr-only", children: "Remove" })
+            ]
+          }
+        )
+      ] }) : /* @__PURE__ */ l(h, { children: [
+        /* @__PURE__ */ l(x, { children: [
+          /* @__PURE__ */ t(
+            N,
+            {
+              render: /* @__PURE__ */ t("div", { className: "flex size-full shrink-0 items-center justify-center rounded-lg bg-muted-background text-muted-foreground", children: /* @__PURE__ */ t(P, { className: "size-4" }) })
+            }
+          ),
+          /* @__PURE__ */ t(y, { children: /* @__PURE__ */ t("p", { children: m }) })
+        ] }),
+        o && /* @__PURE__ */ l(
+          g,
+          {
+            "aria-label": "Remove attachment",
+            className: "size-6 shrink-0 rounded-full p-0 opacity-0 transition-opacity hover:bg-accent-background group-hover:opacity-100 [&>svg]:size-3",
+            onClick: (i) => {
+              i.stopPropagation(), o();
+            },
+            type: "button",
+            variant: "ghost",
+            children: [
+              /* @__PURE__ */ t(f, {}),
+              /* @__PURE__ */ t("span", { className: "sr-only", children: "Remove" })
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+function he({
+  children: e,
+  className: a,
+  ...o
+}) {
+  return e ? /* @__PURE__ */ t(
+    "div",
+    {
+      "data-slot": "message-attachments",
+      className: c(
+        "ml-auto flex w-fit flex-wrap items-start gap-2",
+        a
+      ),
+      ...o,
+      children: e
+    }
+  ) : null;
+}
+const _e = ({
+  className: e,
+  children: a,
+  ...o
+}) => /* @__PURE__ */ t(
+  "div",
+  {
+    "data-slot": "message-toolbar",
+    className: c(
+      "mt-4 flex w-full items-center justify-between gap-4",
+      e
+    ),
+    ...o,
+    children: a
+  }
 );
-h.displayName = "MessageResponse";
 export {
-  q as Message,
-  D as MessageAction,
-  z as MessageActions,
-  O as MessageContent,
-  h as MessageResponse
+  oe as Message,
+  ce as MessageAction,
+  ne as MessageActions,
+  pe as MessageAttachment,
+  he as MessageAttachments,
+  de as MessageAvatar,
+  se as MessageAvatarIcon,
+  me as MessageBranch,
+  le as MessageBranchContent,
+  ue as MessageBranchNext,
+  ge as MessageBranchPage,
+  be as MessageBranchPrevious,
+  ie as MessageBranchSelector,
+  re as MessageContent,
+  X as MessageResponse,
+  _e as MessageToolbar
 };

package/dist/components/ui/core/pagination/pagination-size-context.d.ts

@@ -0,0 +1,5 @@
+import { Context } from 'react';
+type PaginationSize = 'default' | 'small';
+declare const PaginationSizeContext: Context<PaginationSize>;
+declare const usePaginationSize: () => PaginationSize;
+export { type PaginationSize, PaginationSizeContext, usePaginationSize };

package/dist/components/ui/core/pagination/pagination-size-context.js

@@ -0,0 +1,6 @@
+import { createContext as t, useContext as e } from "react";
+const o = t("default"), i = () => e(o);
+export {
+  o as PaginationSizeContext,
+  i as usePaginationSize
+};

package/dist/components/ui/core/pagination/pagination-teleport.d.ts

@@ -0,0 +1,11 @@
+import { ForwardRefExoticComponent, RefAttributes, ComponentProps } from 'react';
+import { Input } from '../input/input';
+import { PaginationSize } from './pagination-size-context';
+type PaginationTeleportProps = {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    size?: PaginationSize;
+} & Omit<ComponentProps<typeof Input>, 'size' | 'value' | 'onChange' | 'children' | 'type'>;
+declare const PaginationTeleport: ForwardRefExoticComponent<Omit<PaginationTeleportProps, 'ref'> & RefAttributes<HTMLInputElement>>;
+export { PaginationTeleport };