@alfadocs/ui-kit 0.1.8 → 0.1.9

package/dist/_chunks/message-tray-xHUCra-Y.js

@@ -0,0 +1,419 @@
+import { jsx as s, jsxs as c, Fragment as L } from "react/jsx-runtime";
+import { forwardRef as de, useState as q, useCallback as F, useLayoutEffect as oe, useEffect as H, useRef as p, useMemo as ce, useImperativeHandle as le } from "react";
+import * as b from "@radix-ui/react-popover";
+import { c as k } from "./index-D2ZczOXr.js";
+import { useTranslation as W } from "react-i18next";
+import { I as me } from "./icon-button-Wnnde5lc.js";
+import { B as _ } from "./button-7mLWcMp_.js";
+import { S as U } from "./separator-B4wXDLNC.js";
+import { S as g } from "./skeleton-dtqyF09N.js";
+import { M as ue } from "./message-card-qhoGv947.js";
+import { u as pe } from "./registry-C9nwlNyL.js";
+import { M as Y } from "./mail-C8irm52s.js";
+const ge = {
+  id: "message-tray",
+  capabilities: ["open", "close", "select_single", "dismiss"],
+  state: {
+    items: {
+      type: "Array<{ id: string; read: boolean }>",
+      descriptionKey: "ui.agent.messageTray.state.items",
+      description: "Currently-displayed messages. Ids + read flag only — no PHI / no sender names.",
+      read: (a) => a.getItems()
+    },
+    unreadCount: {
+      type: "number",
+      descriptionKey: "ui.agent.messageTray.state.unreadCount",
+      description: "Badge unread count surfaced by the host.",
+      read: (a) => a.getUnreadCount()
+    },
+    isOpen: {
+      type: "boolean",
+      descriptionKey: "ui.agent.messageTray.state.isOpen",
+      description: "Whether the dropdown panel is currently open.",
+      read: (a) => a.isOpen()
+    }
+  },
+  actions: {
+    open: {
+      safety: "read",
+      descriptionKey: "ui.agent.messageTray.actions.open",
+      description: "Open the message panel.",
+      invoke: (a) => {
+        a.open();
+      }
+    },
+    close: {
+      safety: "read",
+      descriptionKey: "ui.agent.messageTray.actions.close",
+      description: "Close the message panel.",
+      invoke: (a) => {
+        a.close();
+      }
+    },
+    select_item: {
+      safety: "read",
+      argsType: "{ id: string }",
+      descriptionKey: "ui.agent.messageTray.actions.selectItem",
+      description: "Activate the message with the given id.",
+      invoke: (a, t) => {
+        a.selectItem(t.id);
+      }
+    },
+    mark_read: {
+      safety: "write",
+      argsType: "{ id: string }",
+      descriptionKey: "ui.agent.messageTray.actions.markRead",
+      description: "Request the host to mark a message as read.",
+      invoke: (a, t) => {
+        a.markRead(t.id);
+      }
+    },
+    dismiss: {
+      safety: "destructive",
+      argsType: "{ id: string }",
+      descriptionKey: "ui.agent.messageTray.actions.dismiss",
+      description: "Request the host to dismiss / archive the message with the given id.",
+      invoke: (a, t) => {
+        a.dismiss(t.id);
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "message-tray",
+      description: "Marks the MessageTray wrapper."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop. Required to address a specific tray from the agent."
+    },
+    item: {
+      attr: "data-message-id",
+      description: "Stable message id emitted on each rendered MessageCard inside the tray."
+    }
+  }
+}, fe = k("ds:relative ds:inline-flex ds:items-center", {
+  variants: {
+    size: {
+      sm: "",
+      md: ""
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+}), ve = k(
+  [
+    "ds:flex ds:flex-col",
+    "ds:bg-[var(--popover)] ds:text-[var(--popover-foreground)]",
+    "ds:border ds:border-[color:var(--border)]",
+    "ds:rounded-[var(--radius-md)]",
+    "ds:shadow-[var(--shadow-lg)]",
+    "ds:z-[var(--z-popover)]",
+    // Width: fluid below the design cap so narrow viewports keep a visible
+    // gutter on both sides (shadow included). Cap slightly wider than
+    // NotificationTray because message rows carry subject + preview.
+    "ds:w-[min(26rem,calc(100vw-2*var(--spacing-md)))]",
+    // Height: below the `sm` breakpoint the panel takes a near-full-screen
+    // sheet shape so the user gets room to triage an inbox without
+    // scrolling a tiny popover. `6rem` reserves space for the Header
+    // (≈4rem) plus the sideOffset + collisionPadding (≈2rem). Above `sm`
+    // it returns to `h-auto` so the list's own cap governs the height.
+    "ds:h-[calc(100dvh-6rem)] ds:sm:h-auto",
+    "ds:data-[state=open]:animate-in ds:data-[state=closed]:animate-out",
+    "ds:data-[state=closed]:fade-out-0 ds:data-[state=open]:fade-in-0",
+    "ds:data-[state=closed]:zoom-out-95 ds:data-[state=open]:zoom-in-95",
+    "ds:motion-reduce:transition-none ds:motion-reduce:animate-none",
+    "ds:focus-visible:outline-none",
+    "ds:forced-colors:border-[CanvasText]"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "ds:p-[var(--spacing-xs)]",
+        md: "ds:p-[var(--spacing-sm)]"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+), ye = k(
+  [
+    "ds:absolute ds:-top-[var(--spacing-xs)] ds:-end-[var(--spacing-xs)]",
+    "ds:inline-flex ds:items-center ds:justify-center",
+    "ds:min-w-[calc(var(--spacing-md)+var(--spacing-xs))] ds:h-[calc(var(--spacing-md)+var(--spacing-xs))] ds:ps-[calc(var(--spacing-xs)/1.5)] ds:pe-[calc(var(--spacing-xs)/1.5)]",
+    "ds:rounded-[var(--radius-full)]",
+    "ds:bg-[color:var(--destructive)] ds:text-[color:var(--destructive-foreground)]",
+    "ds:text-[length:var(--font-size-xs)] ds:font-semibold ds:leading-none",
+    "ds:pointer-events-none ds:select-none",
+    "ds:forced-colors:outline ds:forced-colors:outline-1 ds:forced-colors:outline-[CanvasText]"
+  ].join(" ")
+);
+function he(a, t) {
+  return a > 99 ? t : String(a);
+}
+function S() {
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: "ds:flex ds:items-start ds:gap-[var(--spacing-sm)] ds:p-[var(--spacing-sm)]",
+      children: [
+        /* @__PURE__ */ s(g, { variant: "circular", size: "sm" }),
+        /* @__PURE__ */ c("div", { className: "ds:flex-1 ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: [
+          /* @__PURE__ */ s(g, { variant: "text", size: "md", width: "60%" }),
+          /* @__PURE__ */ s(g, { variant: "text", size: "sm", width: "80%" }),
+          /* @__PURE__ */ s(g, { variant: "text", size: "sm", width: "95%" }),
+          /* @__PURE__ */ s(g, { variant: "text", size: "sm", width: "30%" })
+        ] })
+      ]
+    }
+  );
+}
+function xe() {
+  const { t: a } = W();
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      className: "ds:flex ds:flex-col ds:items-center ds:justify-center ds:gap-[var(--spacing-xs)] ds:p-[var(--spacing-lg)] ds:text-center",
+      children: [
+        /* @__PURE__ */ s(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "ds:inline-flex ds:items-center ds:justify-center ds:size-10 ds:rounded-[var(--radius-full)] ds:bg-[color:var(--muted)] ds:text-[color:var(--muted-foreground)] ds:[&>svg]:size-5",
+            children: /* @__PURE__ */ s(Y, {})
+          }
+        ),
+        /* @__PURE__ */ s("p", { className: "type-title-item ds:text-[color:var(--foreground)]", children: a("ui.messageTray.noMessages", "No messages") }),
+        /* @__PURE__ */ s("p", { className: "type-meta ds:text-[color:var(--muted-foreground)]", children: a(
+          "ui.messageTray.noMessagesDescription",
+          "Your inbox is clear."
+        ) })
+      ]
+    }
+  );
+}
+const be = de(
+  ({
+    id: a,
+    items: t,
+    unreadCount: T,
+    open: C,
+    onOpenChange: f,
+    onItemClick: m,
+    onDismiss: u,
+    onMarkRead: v,
+    onMarkAllRead: j,
+    loading: G = !1,
+    maxVisible: J,
+    viewAllLabel: I,
+    onViewAll: Q,
+    align: X = "end",
+    side: Z = "bottom",
+    size: w = "md",
+    className: $,
+    ...D
+  }, ee) => {
+    var A;
+    const { t: d } = W(), N = C !== void 0, [se, ae] = q(!1), z = N ? C : se, y = F(
+      (e) => {
+        N || ae(e), f == null || f(e);
+      },
+      [N, f]
+    ), [h, K] = q(
+      () => t.map((e) => ({ item: e, leaving: !1 }))
+    ), O = F(() => {
+      if (typeof window > "u") return 200;
+      const e = window.getComputedStyle(document.documentElement).getPropertyValue("--animation-duration");
+      if (!e) return 200;
+      const r = e.trim(), n = parseFloat(r);
+      return Number.isFinite(n) ? r.endsWith("ms") ? n : n * 1e3 : 200;
+    }, []);
+    oe(() => {
+      K((e) => {
+        const r = new Set(t.map((i) => i.id)), n = new Set(e.map((i) => i.item.id)), o = e.map((i) => {
+          if (r.has(i.item.id)) {
+            const E = t.find((ie) => ie.id === i.item.id);
+            return E ? { item: E, leaving: !1 } : { ...i, leaving: !0 };
+          }
+          return { ...i, leaving: !0 };
+        });
+        for (const i of t)
+          n.has(i.id) || o.push({ item: i, leaving: !1 });
+        return o;
+      });
+    }, [t]), H(() => {
+      if (!h.some((n) => n.leaving)) return;
+      const e = O(), r = setTimeout(() => {
+        K((n) => n.filter((o) => !o.leaving));
+      }, e);
+      return () => clearTimeout(r);
+    }, [h, O]);
+    const M = p(null), V = p((A = t[0]) == null ? void 0 : A.id);
+    H(() => {
+      var n;
+      const e = (n = t[0]) == null ? void 0 : n.id, r = V.current;
+      if (r && e && r !== e && M.current) {
+        const o = t[0];
+        o && !o.read && (M.current.textContent = d(
+          "ui.messageTray.newMessage",
+          {
+            sender: o.sender.name,
+            defaultValue: "New message from {{sender}}"
+          }
+        ));
+      }
+      V.current = e;
+    }, [t, d]);
+    const x = T ?? 0, te = x > 0 ? d("ui.messageTray.triggerLabel", {
+      count: x,
+      defaultValue: "Messages, {{count}} unread"
+    }) : d("ui.messageTray.triggerLabelNone", "Messages, none unread"), re = he(
+      x,
+      d("ui.messageTray.badgeCountOverflow", "99+")
+    ), ne = ve({ size: w }), l = p(t);
+    l.current = t;
+    const P = p(T);
+    P.current = T;
+    const B = p(z);
+    B.current = z;
+    const R = ce(
+      () => ({
+        open: () => y(!0),
+        close: () => y(!1),
+        isOpen: () => B.current,
+        getItems: () => l.current.map((e) => ({ id: e.id, read: !!e.read })),
+        getUnreadCount: () => P.current ?? l.current.filter((e) => !e.read).length,
+        selectItem: (e) => {
+          const r = l.current.find((n) => n.id === e);
+          r && (m == null || m(r));
+        },
+        markRead: (e) => {
+          const r = l.current.find((n) => n.id === e);
+          r && (v == null || v(r));
+        },
+        dismiss: (e) => {
+          const r = l.current.find((n) => n.id === e);
+          r && (u == null || u(r));
+        }
+      }),
+      [y, m, v, u]
+    );
+    return le(ee, () => R, [R]), pe(ge, R, a), /* @__PURE__ */ s(
+      "div",
+      {
+        "data-component": "message-tray",
+        "data-component-id": a,
+        className: [fe({ size: w }), $].filter(Boolean).join(" "),
+        ...D,
+        children: /* @__PURE__ */ c(b.Root, { open: z, onOpenChange: y, children: [
+          /* @__PURE__ */ s(b.Trigger, { asChild: !0, children: /* @__PURE__ */ s(
+            me,
+            {
+              icon: /* @__PURE__ */ s(Y, {}),
+              intent: "outline",
+              size: w === "sm" ? "sm" : "md",
+              "aria-label": te,
+              "aria-haspopup": "dialog"
+            }
+          ) }),
+          x > 0 ? /* @__PURE__ */ s(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-testid": "message-tray-badge",
+              className: ye(),
+              children: re
+            }
+          ) : null,
+          /* @__PURE__ */ s(
+            "div",
+            {
+              ref: M,
+              "aria-live": "polite",
+              "aria-atomic": "true",
+              className: "ds:sr-only"
+            }
+          ),
+          /* @__PURE__ */ s(b.Portal, { children: /* @__PURE__ */ c(
+            b.Content,
+            {
+              role: "dialog",
+              "aria-label": d("ui.messageTray.panelTitle", "Messages"),
+              side: Z,
+              align: X,
+              sideOffset: 8,
+              collisionPadding: 16,
+              className: ne,
+              children: [
+                /* @__PURE__ */ c("div", { className: "ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)] ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:pb-[var(--spacing-xs)]", children: [
+                  /* @__PURE__ */ s("h3", { className: "ds:m-0 type-title-card ds:text-[color:var(--foreground)]", children: d("ui.messageTray.panelTitle", "Messages") }),
+                  j && t.some((e) => !e.read) ? /* @__PURE__ */ s(
+                    _,
+                    {
+                      intent: "link",
+                      size: "sm",
+                      onClick: j,
+                      className: "ds:text-[length:var(--font-size-xs)]",
+                      children: d("ui.messageTray.markAllRead", "Mark all as read")
+                    }
+                  ) : null
+                ] }),
+                /* @__PURE__ */ s(U, {}),
+                /* @__PURE__ */ s(
+                  "div",
+                  {
+                    role: "list",
+                    "data-max-visible": J,
+                    className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)] ds:overflow-y-auto ds:pt-[var(--spacing-xs)] ds:flex-1 ds:sm:flex-none ds:sm:[max-block-size:var(--message-tray-max-block-size,26rem)]",
+                    children: G ? /* @__PURE__ */ c(L, { children: [
+                      /* @__PURE__ */ s(S, {}),
+                      /* @__PURE__ */ s(S, {}),
+                      /* @__PURE__ */ s(S, {})
+                    ] }) : h.length === 0 ? /* @__PURE__ */ s(xe, {}) : h.map(({ item: e, leaving: r }) => /* @__PURE__ */ s(
+                      ue,
+                      {
+                        item: e,
+                        variant: "compact",
+                        leaving: r,
+                        onActivate: m,
+                        onDismiss: u,
+                        "data-message-id": e.id
+                      },
+                      e.id
+                    ))
+                  }
+                ),
+                I ? /* @__PURE__ */ c(L, { children: [
+                  /* @__PURE__ */ s(U, {}),
+                  /* @__PURE__ */ s("div", { className: "ds:pt-[var(--spacing-xs)]", children: /* @__PURE__ */ s(
+                    _,
+                    {
+                      intent: "link",
+                      size: "sm",
+                      onClick: Q,
+                      className: "ds:w-full ds:justify-center",
+                      children: I
+                    }
+                  ) })
+                ] }) : null
+              ]
+            }
+          ) })
+        ] })
+      }
+    );
+  }
+);
+be.displayName = "MessageTray";
+export {
+  be as M,
+  ge as m
+};
+//# sourceMappingURL=message-tray-xHUCra-Y.js.map