@layers-app/shared 0.4.4 → 0.4.6

package/dist/components/Chat/MessageActions/index.js

@@ -0,0 +1,68 @@
+import { jsx as e, jsxs as n, Fragment as b } from "react/jsx-runtime";
+import w, { useState as v } from "react";
+import { Group as y, ActionIcon as d, Menu as i } from "@mantine/core";
+import { SmileIcon as j, LinkBackwardIcon as A, MoreVerticalIcon as x, Copy01Icon as B, Share08Icon as P, PinIcon as $, Edit02Icon as E, Delete02Icon as O } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as o } from "@hugeicons/react";
+import { EmojiPicker as _ } from "../../EmojiPicker/EmojiPicker.js";
+import { IconEntity as D } from "../../ProjectIcon/ProjectIcon.js";
+import G from "./MessageActions.module.css.js";
+const H = w.memo(function({
+  onReaction: t,
+  canAddReaction: I = !0,
+  onReply: m,
+  onEdit: r,
+  onDelete: c,
+  onCopy: s,
+  onForward: a,
+  onPin: l,
+  showEdit: h,
+  showDelete: p,
+  className: u,
+  style: g
+}) {
+  const [z, k] = v(!1), S = !!(r || c || s || a || l || h || p), C = (f) => {
+    if (!t) return;
+    const M = D.parse(f);
+    t(M?.emoji ?? f);
+  };
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: `${G.root}${u ? ` ${u}` : ""}`,
+      style: g,
+      "data-testid": "message-actions",
+      children: /* @__PURE__ */ n(y, { gap: 2, wrap: "nowrap", children: [
+        t && I && /* @__PURE__ */ e(
+          _,
+          {
+            onChange: C,
+            position: "top-start",
+            showRemoveButton: !1,
+            showIcons: !1,
+            showRandomButton: !1,
+            withinPortal: !0,
+            children: /* @__PURE__ */ e(d, { variant: "subtle", color: "gray", size: 22, radius: 8, "aria-label": "Add reaction", children: /* @__PURE__ */ e(o, { icon: j, size: 16 }) })
+          }
+        ),
+        m && /* @__PURE__ */ e(d, { variant: "subtle", color: "gray", size: 22, radius: 8, onClick: m, "aria-label": "Reply", children: /* @__PURE__ */ e(o, { icon: A, size: 16 }) }),
+        S && /* @__PURE__ */ n(i, { position: "bottom-end", withinPortal: !0, shadow: "md", width: 200, opened: z, onChange: k, children: [
+          /* @__PURE__ */ e(i.Target, { children: /* @__PURE__ */ e(d, { variant: "subtle", color: "gray", size: 22, radius: 8, "aria-label": "More actions", children: /* @__PURE__ */ e(o, { icon: x, size: 16 }) }) }),
+          /* @__PURE__ */ n(i.Dropdown, { children: [
+            s && /* @__PURE__ */ e(i.Item, { leftSection: /* @__PURE__ */ e(o, { icon: B, size: 16 }), onClick: s, children: "Copy" }),
+            a && /* @__PURE__ */ e(i.Item, { leftSection: /* @__PURE__ */ e(o, { icon: P, size: 16 }), onClick: a, children: "Forward" }),
+            l && /* @__PURE__ */ e(i.Item, { leftSection: /* @__PURE__ */ e(o, { icon: $, size: 16 }), onClick: l, children: "Pin" }),
+            (h || r) && /* @__PURE__ */ e(i.Item, { leftSection: /* @__PURE__ */ e(o, { icon: E, size: 16 }), onClick: r, children: "Edit" }),
+            (p || c) && /* @__PURE__ */ n(b, { children: [
+              /* @__PURE__ */ e(i.Divider, {}),
+              /* @__PURE__ */ e(i.Item, { color: "red", leftSection: /* @__PURE__ */ e(o, { icon: O, size: 16 }), onClick: c, children: "Delete" })
+            ] })
+          ] })
+        ] })
+      ] })
+    }
+  );
+});
+H.displayName = "MessageActions";
+export {
+  H as MessageActions
+};

package/dist/components/Chat/MessageAuthor/index.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export interface MessageAuthorProps {
+    /** Author display name */
+    name: string;
+    /** Author color index 1-7 */
+    color?: 1 | 2 | 3 | 4 | 5 | 6 | 7;
+    /** Outgoing message uses green palette */
+    outgoing?: boolean;
+    /** Click handler */
+    onClick?: () => void;
+    /** Additional className */
+    className?: string;
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+export declare function MessageAuthor({ name, color, outgoing, onClick, className, style, }: MessageAuthorProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MessageAuthor {
+    var displayName: string;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Chat/MessageAuthor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Chat/MessageAuthor/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,kBAAkB;IACjC,0BAA0B;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,6BAA6B;IAC7B,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAClC,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAS,EACT,QAAQ,EACR,OAAO,EACP,SAAS,EACT,KAAK,GACN,EAAE,kBAAkB,2CAyBpB;yBAhCe,aAAa"}

package/dist/components/Chat/MessageAuthor/index.js

@@ -0,0 +1,36 @@
+import { jsx as u } from "react/jsx-runtime";
+import { useMemo as d } from "react";
+import { Text as n } from "@mantine/core";
+import { getAuthorColor as c } from "../colors.js";
+function l({
+  name: o,
+  color: s = 6,
+  outgoing: a,
+  onClick: e,
+  className: m,
+  style: r
+}) {
+  const t = a ? "var(--mantine-color-green-6)" : c(s), i = d(
+    () => ({ ...r, color: t, maxHeight: 38, cursor: e ? "pointer" : void 0 }),
+    [r, t, e]
+  );
+  return /* @__PURE__ */ u(
+    n,
+    {
+      size: "sm",
+      fw: 600,
+      truncate: !0,
+      className: m,
+      style: i,
+      mb: 4,
+      "data-testid": "message-author",
+      "data-clickable": e ? !0 : void 0,
+      onClick: e,
+      children: o
+    }
+  );
+}
+l.displayName = "MessageAuthor";
+export {
+  l as MessageAuthor
+};

package/dist/components/Chat/MessageForward/MessageForward.module.css.js

@@ -0,0 +1,7 @@
+const o = "_root_mla0n_1", t = {
+  root: o
+};
+export {
+  t as default,
+  o as root
+};

package/dist/components/Chat/MessageForward/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface MessageForwardProps {
+    from: string;
+    outgoing?: boolean;
+    onClick?: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function MessageForward({ from, outgoing, onClick, className, style, }: MessageForwardProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MessageForward {
+    var displayName: string;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Chat/MessageForward/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Chat/MessageForward/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,SAAS,EACT,KAAK,GACN,EAAE,mBAAmB,2CAcrB;yBApBe,cAAc"}

package/dist/components/Chat/MessageForward/index.js

@@ -0,0 +1,30 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { Text as e } from "@mantine/core";
+import m from "./MessageForward.module.css.js";
+function n({
+  from: o,
+  outgoing: s,
+  onClick: r,
+  className: a,
+  style: d
+}) {
+  return /* @__PURE__ */ i(
+    e,
+    {
+      size: "sm",
+      truncate: !0,
+      className: `${m.root} ${a || ""}`,
+      style: d,
+      "data-outgoing": s || void 0,
+      "data-testid": "message-forward",
+      children: [
+        /* @__PURE__ */ t(e, { span: !0, children: "Forwarded from " }),
+        /* @__PURE__ */ t(e, { span: !0, fw: 500, style: { cursor: r ? "pointer" : void 0 }, onClick: r, tabIndex: r ? 0 : void 0, role: r ? "button" : void 0, children: o })
+      ]
+    }
+  );
+}
+n.displayName = "MessageForward";
+export {
+  n as MessageForward
+};

package/dist/components/Chat/MessageList/MessageList.module.css.js

@@ -0,0 +1,21 @@
+const o = "_container_r29um_1", t = "_root_r29um_31", r = "_wrapper_r29um_45", _ = "_top_r29um_55", c = "_items_r29um_55", n = "_scrollToBottomWrap_r29um_99", s = "_floatingTopAction_r29um_119", a = "_scrollToBottomBadge_r29um_149", l = {
+  container: o,
+  root: t,
+  wrapper: r,
+  top: _,
+  items: c,
+  scrollToBottomWrap: n,
+  floatingTopAction: s,
+  scrollToBottomBadge: a
+};
+export {
+  o as container,
+  l as default,
+  s as floatingTopAction,
+  c as items,
+  t as root,
+  a as scrollToBottomBadge,
+  n as scrollToBottomWrap,
+  _ as top,
+  r as wrapper
+};

package/dist/components/Chat/MessageList/index.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+export interface MessageListProps {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    stickToBottom?: boolean;
+    unreadCount?: number;
+    onStickChange?: (stuck: boolean) => void;
+    resetKey?: string | null;
+    /**
+     * Called when the user scrolls near the top — used to load an older page of
+     * history. Should resolve once the older messages have been prepended; the
+     * list preserves the visual scroll position across the prepend.
+     */
+    onReachTop?: () => void | Promise<void>;
+    /**
+     * Floating control pinned bottom-right, stacked ABOVE the scroll-to-bottom
+     * arrow (e.g. the "jump to mention" button). Shown independently of the
+     * arrow — it raises above the arrow when the arrow is visible, otherwise
+     * sits at the arrow's spot.
+     */
+    floatingTopAction?: React.ReactNode;
+    /**
+     * Lift the floating controls (scroll-to-bottom arrow + floatingTopAction) up
+     * by this many px — so a composer that overlays the list bottom (frosted
+     * floating input) doesn't sit on top of them.
+     */
+    bottomOffset?: number;
+}
+export interface MessageListHandle {
+    /**
+     * Snap to the latest message and re-arm bottom-stick. Hosts call this when
+     * the local user sends a message so the view jumps to their just-sent
+     * content even if they had scrolled up — matching Telegram/Slack behavior.
+     */
+    scrollToBottom: () => void;
+}
+export declare const MessageList: React.ForwardRefExoticComponent<MessageListProps & React.RefAttributes<MessageListHandle>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Chat/MessageList/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Chat/MessageList/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAQf,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACxC;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,iBAAiB;IAChC;;;;OAIG;IACH,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW,4FAoOvB,CAAC"}

package/dist/components/Chat/MessageList/index.js

@@ -0,0 +1,159 @@
+import { jsxs as T, jsx as l } from "react/jsx-runtime";
+import { forwardRef as D, useRef as i, useState as P, useEffect as u, useCallback as W, useImperativeHandle as k } from "react";
+import { ArrowDown01Icon as C } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as G } from "@hugeicons/react";
+import { ScrollArea as J, ActionIcon as K } from "@mantine/core";
+import s from "./MessageList.module.css.js";
+const Q = D(
+  function({
+    children: L,
+    className: y,
+    style: E,
+    stickToBottom: f,
+    unreadCount: v = 0,
+    onStickChange: h,
+    resetKey: F,
+    onReachTop: g,
+    floatingTopAction: N,
+    bottomOffset: M = 0
+  }, $) {
+    const r = i(null), B = i(null), n = i(!0), w = i(0), [A, q] = P(!1), H = i(h), b = i(g), x = i(!1);
+    u(() => {
+      H.current = h;
+    }, [h]), u(() => {
+      b.current = g;
+    }, [g]), u(() => {
+      const e = r.current, o = B.current;
+      if (!e || !o) return;
+      const t = new IntersectionObserver(
+        (m) => {
+          if (!m[0]?.isIntersecting || x.current || !b.current || n.current) return;
+          x.current = !0;
+          const p = e.scrollHeight, c = e.scrollTop;
+          Promise.resolve(b.current()).then(() => {
+            requestAnimationFrame(() => {
+              const a = r.current;
+              if (!a) return;
+              const d = a.scrollHeight - p;
+              d > 0 && (a.scrollTop = c + d);
+            });
+          }).finally(() => {
+            x.current = !1;
+          });
+        },
+        { root: e, rootMargin: "300px 0px 0px 0px" }
+      );
+      return t.observe(o), () => t.disconnect();
+    }, []);
+    const z = W(() => {
+      r.current && r.current.scrollTo({
+        top: r.current.scrollHeight,
+        behavior: "smooth"
+      });
+    }, []);
+    k(
+      $,
+      () => ({
+        scrollToBottom: () => {
+          const e = r.current;
+          if (!e) return;
+          n.current = !0, H.current?.(!0), e.scrollTop = e.scrollHeight;
+          const o = () => {
+            const t = r.current;
+            t && (t.scrollTop = t.scrollHeight, n.current = !0);
+          };
+          requestAnimationFrame(() => {
+            o(), requestAnimationFrame(o);
+          });
+        }
+      }),
+      []
+    ), u(() => {
+      !f || !r.current || (n.current = !0, w.current = r.current.scrollHeight, r.current.scrollTop = r.current.scrollHeight);
+    }, [f, F]), u(() => {
+      const e = r.current;
+      if (!f || !e) return;
+      const o = new ResizeObserver(() => {
+        const c = e.scrollHeight;
+        c !== w.current && n.current && (e.scrollTop = c), w.current = c;
+      }), t = e.firstElementChild;
+      t && o.observe(t);
+      let m = !1;
+      const p = () => {
+        const { scrollTop: c, scrollHeight: a, clientHeight: d } = e, I = a - c - d, S = I < 40;
+        S !== n.current && (n.current = S, H.current?.(S));
+        const R = I > 200;
+        R !== m && (m = R, q(R));
+      };
+      return e.addEventListener("scroll", p, { passive: !0 }), () => {
+        o.disconnect(), e.removeEventListener("scroll", p);
+      };
+    }, [f]);
+    const O = v > 999 ? "999+" : v, j = v > 0;
+    return /* @__PURE__ */ T(
+      "div",
+      {
+        className: s.container,
+        style: { "--ml-bottom-offset": `${M}px` },
+        children: [
+          /* @__PURE__ */ l(
+            J,
+            {
+              className: `${s.root}${y ? ` ${y}` : ""}`,
+              style: E,
+              type: "auto",
+              scrollbars: "y",
+              viewportRef: r,
+              "data-testid": "message-list",
+              styles: {
+                content: {
+                  display: "flex",
+                  flexDirection: "column",
+                  minHeight: "100%"
+                }
+              },
+              children: /* @__PURE__ */ T("div", { className: s.wrapper, children: [
+                /* @__PURE__ */ l(
+                  "div",
+                  {
+                    ref: B,
+                    className: s.top,
+                    "data-testid": "message-list-top"
+                  }
+                ),
+                /* @__PURE__ */ l("div", { className: s.items, "data-testid": "message-list-items", children: L })
+              ] })
+            }
+          ),
+          A && /* @__PURE__ */ T("div", { className: s.scrollToBottomWrap, children: [
+            /* @__PURE__ */ l(
+              K,
+              {
+                variant: "default",
+                radius: "xl",
+                size: 34,
+                onClick: z,
+                "aria-label": "Scroll to bottom",
+                "data-testid": "scroll-to-bottom",
+                children: /* @__PURE__ */ l(G, { icon: C, size: 18 })
+              }
+            ),
+            j && /* @__PURE__ */ l("span", { className: s.scrollToBottomBadge, children: O })
+          ] }),
+          N && /* @__PURE__ */ l(
+            "div",
+            {
+              className: s.floatingTopAction,
+              "data-raised": A || void 0,
+              children: N
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Q.displayName = "MessageList";
+export {
+  Q as MessageList
+};

package/dist/components/Chat/MessageMeta/MessageMeta.module.css.js

@@ -0,0 +1,13 @@
+const t = "_root_q0fbi_1", e = "_time_q0fbi_61", i = "_edited_q0fbi_69", o = "_views_q0fbi_77", _ = {
+  root: t,
+  time: e,
+  edited: i,
+  views: o
+};
+export {
+  _ as default,
+  i as edited,
+  t as root,
+  e as time,
+  o as views
+};

package/dist/components/Chat/MessageMeta/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export interface MessageMetaProps {
+    time: string;
+    edited?: boolean;
+    views?: number;
+    outgoing?: boolean;
+    inReactions?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function MessageMeta({ time, edited, views, outgoing, inReactions, children, className, style, }: MessageMetaProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MessageMeta {
+    var displayName: string;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Chat/MessageMeta/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Chat/MessageMeta/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,MAAM,EACN,KAAK,EACL,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,SAAS,EACT,KAAK,GACN,EAAE,gBAAgB,2CAelB;yBAxBe,WAAW"}

package/dist/components/Chat/MessageMeta/index.js

@@ -0,0 +1,33 @@
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import e from "./MessageMeta.module.css.js";
+function l({
+  time: t,
+  edited: i,
+  views: s,
+  outgoing: d,
+  inReactions: o,
+  children: n,
+  className: r,
+  style: m
+}) {
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: `${e.root} ${r || ""}`,
+      style: m,
+      "data-outgoing": d || void 0,
+      "data-in-reactions": o || void 0,
+      "data-testid": "message-meta",
+      children: [
+        i && /* @__PURE__ */ a("span", { className: e.edited, children: "edited" }),
+        s !== void 0 && /* @__PURE__ */ a("span", { className: e.views, children: s }),
+        /* @__PURE__ */ a("span", { className: e.time, children: t }),
+        n
+      ]
+    }
+  );
+}
+l.displayName = "MessageMeta";
+export {
+  l as MessageMeta
+};

package/dist/components/Chat/MessageReactions/MessageReactions.module.css.js

@@ -0,0 +1,15 @@
+const t = "_row_mtm4b_1", m = "_pill_mtm4b_19", o = "_emoji_mtm4b_99", _ = "_count_mtm4b_141", c = "_meta_mtm4b_185", e = {
+  row: t,
+  pill: m,
+  emoji: o,
+  count: _,
+  meta: c
+};
+export {
+  _ as count,
+  e as default,
+  o as emoji,
+  c as meta,
+  m as pill,
+  t as row
+};

package/dist/components/Chat/MessageReactions/index.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+/**
+ * Max number of *distinct* emoji a single message can carry. Once reached, the
+ * add-reaction picker is hidden (you can still join one of the existing ones by
+ * clicking its pill). Mirrors the server cap so the UI and backend agree.
+ */
+export declare const MAX_MESSAGE_REACTIONS = 5;
+export interface ReactionReactor {
+    id: string;
+    name: string;
+    avatarUrl?: string;
+}
+export interface Reaction {
+    emoji: string;
+    count: number;
+    active?: boolean;
+    /**
+     * Who left this reaction (resolved to name + avatar by the host). Drives the
+     * who-reacted hover popover. Optional — when absent, the pill is a plain
+     * toggle with no popover.
+     */
+    reactors?: ReactionReactor[];
+}
+export interface MessageReactionsProps {
+    reactions: Reaction[];
+    onToggle?: (emoji: string) => void;
+    meta?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const MessageReactions: React.NamedExoticComponent<MessageReactionsProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Chat/MessageReactions/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Chat/MessageReactions/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,IAAI,CAAC;AAEvC,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAC;CAC9B;AAED,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,eAAO,MAAM,gBAAgB,mDA0E3B,CAAC"}

package/dist/components/Chat/MessageReactions/index.js

@@ -0,0 +1,72 @@
+import { jsxs as r, jsx as a } from "react/jsx-runtime";
+import m from "react";
+import { HoverCard as n, ScrollArea as h, Stack as u, Group as f, Text as g } from "@mantine/core";
+import { UserAvatar as v } from "../../UserAvatar/index.js";
+import t from "./MessageReactions.module.css.js";
+const R = 5, w = m.memo(function({
+  reactions: s,
+  onToggle: d,
+  meta: o,
+  className: l,
+  style: p
+}) {
+  return !s.length && !o ? null : /* @__PURE__ */ r(
+    "div",
+    {
+      className: `${t.row}${l ? ` ${l}` : ""}`,
+      style: p,
+      "data-testid": "message-reactions",
+      children: [
+        s.map((e) => {
+          const c = /* @__PURE__ */ r(
+            "button",
+            {
+              className: t.pill,
+              "data-active": e.active || void 0,
+              onClick: () => d?.(e.emoji),
+              type: "button",
+              "aria-pressed": e.active ?? !1,
+              "aria-label": `${e.emoji} ${e.count}`,
+              children: [
+                /* @__PURE__ */ a("span", { className: t.emoji, children: e.emoji }, e.count),
+                /* @__PURE__ */ a("span", { className: t.count, children: e.count })
+              ]
+            }
+          );
+          return e.reactors?.length ? /* @__PURE__ */ r(
+            n,
+            {
+              withArrow: !0,
+              openDelay: 250,
+              closeDelay: 100,
+              position: "top",
+              shadow: "md",
+              withinPortal: !0,
+              children: [
+                /* @__PURE__ */ a(n.Target, { children: c }),
+                /* @__PURE__ */ a(n.Dropdown, { p: "xs", children: /* @__PURE__ */ a(h.Autosize, { mah: 220, type: "auto", children: /* @__PURE__ */ a(u, { gap: 6, pr: 6, children: e.reactors.map((i) => /* @__PURE__ */ r(f, { gap: 8, wrap: "nowrap", miw: 0, children: [
+                  /* @__PURE__ */ a(
+                    v,
+                    {
+                      user: { id: i.id, name: i.name, avatarUrl: i.avatarUrl },
+                      size: 20,
+                      radius: "xl"
+                    }
+                  ),
+                  /* @__PURE__ */ a(g, { size: "sm", lineClamp: 1, maw: 200, children: i.name })
+                ] }, i.id)) }) }) })
+              ]
+            },
+            e.emoji
+          ) : /* @__PURE__ */ a(m.Fragment, { children: c }, e.emoji);
+        }),
+        o && /* @__PURE__ */ a("div", { className: t.meta, children: o })
+      ]
+    }
+  );
+});
+w.displayName = "MessageReactions";
+export {
+  R as MAX_MESSAGE_REACTIONS,
+  w as MessageReactions
+};

package/dist/components/Chat/MessageReply/MessageReply.module.css.js

@@ -0,0 +1,15 @@
+const t = "_root_13gux_21", o = "_border_13gux_15", e = "_content_13gux_67", _ = "_title_13gux_85", n = "_subtitle_13gux_109", s = {
+  root: t,
+  border: o,
+  content: e,
+  title: _,
+  subtitle: n
+};
+export {
+  o as border,
+  e as content,
+  s as default,
+  t as root,
+  n as subtitle,
+  _ as title
+};

package/dist/components/Chat/MessageReply/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface MessageReplyProps {
+    title: string;
+    subtitle: React.ReactNode;
+    color?: 1 | 2 | 3 | 4 | 5 | 6 | 7;
+    outgoing?: boolean;
+    onClick?: () => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function MessageReply({ title, subtitle, color, outgoing, onClick, className, style, }: MessageReplyProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MessageReply {
+    var displayName: string;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Chat/MessageReply/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Chat/MessageReply/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAS,EACT,KAAK,GACN,EAAE,iBAAiB,2CA2BnB;yBAnCe,YAAY"}