@mobilon-dev/chotto 0.3.105 → 0.3.107

package/dist/components/2_feed_elements/MessageReactions/MessageReactions.vue2.js

@@ -1,32 +1,14 @@
-import { defineComponent as Se, inject as E, ref as M, computed as c, unref as i, onMounted as _e, onUnmounted as Ne, watch as je, createElementBlock as d, openBlock as l, normalizeClass as K, createBlock as Q, Fragment as A, renderList as F, withCtx as C, createElementVNode as p, createCommentVNode as S, createVNode as u, toDisplayString as Ue, Teleport as Pe, Transition as D, withDirectives as V, normalizeStyle as $, withModifiers as y, vShow as z } from "vue";
-import Le from "../../../node_modules/vue3-emoji-picker-ru/dist/emoji-picker.es.js";
-/* empty css                                                        */
-import "../../../hooks/useMessageDraft.js";
-import "../../../hooks/useSearchModel.js";
-import "../../../hooks/useTheme.js";
-import { useEmojiNative as Te } from "../../../hooks/useEmojiNative.js";
-/* empty css                              */
-/* empty css                                              */
-import "../../../locale/useLocale.js";
-/* empty css                                                            */
-import { isRightMessage as qe, findMessageContent as xe } from "./composables/usePositioning.js";
-import Be from "./icons/ReplyIcon.vue.js";
-import "../../../node_modules/linkifyjs/dist/linkify.js";
-import "../../../node_modules/linkify-string/dist/linkify-string.js";
-import "../../../functions/parseMarkdown.js";
-import { useStartReply as we } from "../../../hooks/messages/useStartReply.js";
-import H from "../../1_atoms/EmojiGlyph/EmojiGlyph.vue.js";
-import Oe from "../../1_atoms/Tooltip/Tooltip.vue.js";
-import Ke from "./icons/ExpandReactionsIcon.vue.js";
-import Qe from "./icons/MessageActionsIcon.vue.js";
-import { QUICK_REACTION_EMOJIS as Ae } from "./utils/quickReactions.js";
-import { buildReactionTooltipText as Fe } from "./utils/reactionTooltip.js";
-import { useReactionsState as De } from "./composables/useReactionsState.js";
-import { useReactionsPanel as Ve } from "./composables/useReactionsPanel.js";
-const $e = ["onClick"], ze = { class: "message-reactions__emoji" }, He = {
+import { defineComponent as V, inject as u, ref as q, computed as s, unref as i, createElementBlock as g, openBlock as c, normalizeClass as y, Fragment as w, renderList as $, createBlock as z, withCtx as D, createElementVNode as R, createCommentVNode as F, createVNode as G, toDisplayString as H } from "vue";
+import { MESSAGE_REACTIONS_PATCH_KEY as L } from "../../../hooks/messages/useMessageReactionsInFeed.js";
+import P from "../../1_atoms/EmojiGlyph/EmojiGlyph.vue.js";
+import Y from "../../1_atoms/Tooltip/Tooltip.vue.js";
+import { buildReactionTooltipText as J } from "./utils/reactionTooltip.js";
+import { isRightMessage as Q } from "./composables/usePositioning.js";
+import { useReactionsState as W } from "./composables/useReactionsState.js";
+const X = ["onClick"], Z = { class: "message-reactions__emoji" }, ee = {
   key: 0,
   class: "message-reactions__count"
-}, Je = ["title", "onClick"], It = /* @__PURE__ */ Se({
+}, ce = /* @__PURE__ */ V({
   __name: "MessageReactions",
   props: {
     reactions: {
@@ -38,10 +20,6 @@ const $e = ["onClick"], ze = { class: "message-reactions__emoji" }, He = {
       type: [String, Number],
       required: !0
     },
-    readonly: {
-      type: Boolean,
-      default: !1
-    },
     enabled: {
       type: Boolean,
       default: !0
@@ -49,257 +27,96 @@ const $e = ["onClick"], ze = { class: "message-reactions__emoji" }, He = {
     mode: {
       type: String,
       default: "single",
-      validator: (s) => ["single", "multi"].includes(s)
+      validator: (a) => ["single", "multi"].includes(a)
     },
-    /** Id текущего пользователя — для расчёта reactedByMe и локальных add/remove */
     currentUserId: {
       type: [String, Number],
       default: void 0
     },
-    /** Имя текущего пользователя — для тултипа при локальном добавлении реакции */
     currentUserName: {
       type: String,
       default: void 0
     },
-    /** userId → имя (если в item нет name) */
     reactionUserNames: {
       type: Object,
       default: void 0
-    },
-    reply: {
-      type: Object,
-      default: void 0
-    },
-    replyEnabled: {
-      type: Boolean,
-      default: !0
-    },
-    /** Показывать кнопку меню действий сообщения в панели быстрых реакций */
-    menuEnabled: {
-      type: Boolean,
-      default: !0
     }
   },
-  emits: ["toggle-reaction", "add-reaction", "remove-reaction", "menu"],
-  setup(s, { emit: J }) {
-    const n = s, a = J, g = E("chatAppId"), G = E("currentUserId", void 0), W = E("reactionUserNames", void 0), { startReply: X } = we(g || ""), m = M(null), f = M(null), _ = M("light"), { isNative: Y, emojiSrc: Z } = Te(g || ""), N = c(() => Ae), ee = c(() => n.mode), k = c(() => n.currentUserId ?? i(G)), j = c(() => n.reactionUserNames ?? i(W)), te = c(() => {
-      var t, r;
-      const e = (t = n.currentUserName) == null ? void 0 : t.trim();
+  emits: ["toggle-reaction", "add-reaction", "remove-reaction"],
+  setup(a, { expose: I, emit: h }) {
+    const o = a, r = h, N = u("currentUserId", void 0), U = u("reactionUserNames", void 0), l = q(null), b = s(() => o.mode), d = s(() => o.currentUserId ?? i(N)), f = s(() => o.reactionUserNames ?? i(U)), C = s(() => {
+      var t, m;
+      const e = (t = o.currentUserName) == null ? void 0 : t.trim();
       if (e) return e;
-      const o = k.value;
-      if (o != null)
-        return (r = j.value) == null ? void 0 : r[String(o)];
-    }), ne = c(() => n.mode === "multi"), U = De(
-      c(() => n.reactions),
-      ee,
-      k,
-      te
-    ), { displayedReactions: oe, hasReactions: ie, addReaction: h, removeReaction: P, toggleReaction: se, isMyReaction: L } = U;
-    function re(e) {
-      return Fe(e.events, j.value);
+      const n = d.value;
+      if (n != null)
+        return (m = f.value) == null ? void 0 : m[String(n)];
+    }), S = s(() => o.mode === "multi"), p = W(
+      s(() => o.reactions),
+      b,
+      d,
+      C
+    ), { displayedReactions: j, hasReactions: x, addReaction: T, removeReaction: M, toggleReaction: k, localReactions: E } = p, v = u(L, null);
+    function _() {
+      const e = E.value;
+      !v || !e || v({
+        ...e,
+        items: e.items.map((n) => ({ ...n })),
+        meta: e.meta ? { ...e.meta } : void 0
+      });
+    }
+    function B(e) {
+      return J(e.events, f.value);
     }
-    const ae = Ve(N, m), {
-      isQuickReactionsOpen: le,
-      isFullPickerOpen: ce,
-      pickerRef: ue,
-      quickReactionsRef: de,
-      quickPanelStyle: me,
-      pickerStyle: fe,
-      closeQuickPanel: v,
-      handleMessageMouseEnter: pe,
-      handleMessageMouseLeave: ge,
-      openFullPicker: ve,
-      closeFullPicker: T,
-      handleQuickPanelMouseEnter: q,
-      handleQuickPanelMouseLeave: x,
-      handlePickerMouseEnter: B,
-      handlePickerMouseLeave: w,
-      handleClickOutside: O
-    } = ae, ye = c(() => m.value ? qe(m.value) : !1), ke = () => {
-      var o;
-      if (!g) return "light";
-      const e = document.getElementById(g);
-      return (o = e == null ? void 0 : e.getAttribute("data-theme")) != null && o.includes("dark") ? "dark" : "light";
-    };
-    function I() {
-      return !n.readonly && n.enabled && k.value != null;
+    const K = s(() => Q(l.value));
+    function A() {
+      return o.enabled && d.value != null;
     }
-    function he(e) {
-      if (I()) {
-        if (n.mode === "single") {
-          if (U.myReactionKey.value === e)
-            P(e), a("remove-reaction", { messageId: n.messageId, key: e });
+    function O(e) {
+      if (A()) {
+        if (o.mode === "single") {
+          if (p.myReactionKey.value === e)
+            M(e), r("remove-reaction", { messageId: o.messageId, key: e });
           else {
-            const t = h(e);
-            t && a("remove-reaction", { messageId: n.messageId, key: t }), a("add-reaction", { messageId: n.messageId, key: e });
+            const t = T(e);
+            t && r("remove-reaction", { messageId: o.messageId, key: t }), r("add-reaction", { messageId: o.messageId, key: e });
           }
+          _();
           return;
         }
-        se(e), a("toggle-reaction", { messageId: n.messageId, key: e });
+        k(e), r("toggle-reaction", { messageId: o.messageId, key: e }), _();
       }
     }
-    function Ie(e) {
-      var o, t;
-      return e instanceof Node ? !!((o = f.value) != null && o.contains(e) || (t = m.value) != null && t.contains(e)) : !1;
-    }
-    function b() {
-      n.readonly || !n.enabled || pe();
-    }
-    function R(e) {
-      n.readonly || !n.enabled || Ie(e.relatedTarget) || ge();
-    }
-    function be(e) {
-      if (I()) {
-        if (L(e))
-          P(e), a("remove-reaction", { messageId: n.messageId, key: e });
-        else {
-          const o = h(e);
-          o && a("remove-reaction", { messageId: n.messageId, key: o }), a("add-reaction", { messageId: n.messageId, key: e });
-        }
-        v();
-      }
-    }
-    function Re() {
-      n.readonly || !n.enabled || !n.reply || (X(n.reply), v());
-    }
-    function Ee(e) {
-      if (n.readonly || !n.enabled || !n.menuEnabled) return;
-      const o = e.currentTarget, t = o instanceof HTMLElement ? (() => {
-        const r = o.getBoundingClientRect();
-        return { top: r.top, right: r.right, bottom: r.bottom, left: r.left, width: r.width, height: r.height };
-      })() : void 0;
-      a("menu", { messageId: n.messageId, triggerRect: t, event: e });
-    }
-    async function Me() {
-      n.readonly || !n.enabled || (_.value = ke(), await ve());
-    }
-    function Ce(e) {
-      if (T(), v(), !I()) return;
-      const o = e.i;
-      if (L(o))
-        return;
-      const t = h(o);
-      t && a("remove-reaction", { messageId: n.messageId, key: t }), a("add-reaction", { messageId: n.messageId, key: o });
-    }
-    return _e(() => {
-      document.addEventListener("click", O);
-      const e = xe(m.value);
-      e && (f.value = e, e.addEventListener("pointerenter", b), e.addEventListener("pointerleave", R));
-    }), Ne(() => {
-      document.removeEventListener("click", O), f.value && (f.value.removeEventListener("pointerenter", b), f.value.removeEventListener("pointerleave", R));
-    }), je(
-      () => [n.enabled, n.readonly],
-      ([e, o]) => {
-        (!e || o) && (v(), T());
-      }
-    ), (e, o) => (l(), d("div", {
+    return I({ reactionsContainerRef: l }), (e, n) => (c(), g("div", {
       ref_key: "reactionsContainerRef",
-      ref: m,
-      class: K(["message-reactions", { "has-reactions": i(ie), "is-right-message": ye.value, "is-disabled": !s.enabled }]),
-      onPointerenter: b,
-      onPointerleave: R
+      ref: l,
+      class: y(["message-reactions", { "has-reactions": i(x), "is-right-message": K.value, "is-disabled": !a.enabled }])
     }, [
-      (l(!0), d(A, null, F(i(oe), (t) => (l(), Q(Oe, {
+      (c(!0), g(w, null, $(i(j), (t) => (c(), z(Y, {
         key: t.key,
-        text: re(t),
+        text: B(t),
         position: "bottom-right",
         offset: 6,
         delay: 400
       }, {
-        default: C(() => [
-          p("button", {
-            class: K(["message-reactions__chip", { "is-active": t.reactedByMe && t.count === 1 }]),
-            onClick: (r) => he(t.key)
+        default: D(() => [
+          R("button", {
+            class: y(["message-reactions__chip", { "is-active": t.reactedByMe && t.count === 1 }]),
+            onClick: (m) => O(t.key)
           }, [
-            p("span", ze, [
-              u(H, {
+            R("span", Z, [
+              G(P, {
                 emoji: t.key
               }, null, 8, ["emoji"])
             ]),
-            ne.value || t.count > 1 ? (l(), d("span", He, Ue(t.count), 1)) : S("", !0)
-          ], 10, $e)
+            S.value || t.count > 1 ? (c(), g("span", ee, H(t.count), 1)) : F("", !0)
+          ], 10, X)
         ]),
         _: 2
-      }, 1032, ["text"]))), 128)),
-      (l(), Q(Pe, { to: "body" }, [
-        u(D, { name: "message-reactions-popover" }, {
-          default: C(() => [
-            V(p("div", {
-              ref_key: "quickReactionsRef",
-              ref: de,
-              class: "message-reactions__quick-panel",
-              style: $(i(me)),
-              onMouseenter: o[0] || (o[0] = //@ts-ignore
-              (...t) => i(q) && i(q)(...t)),
-              onMouseleave: o[1] || (o[1] = //@ts-ignore
-              (...t) => i(x) && i(x)(...t))
-            }, [
-              (l(!0), d(A, null, F(N.value, (t) => (l(), d("button", {
-                key: t,
-                class: "message-reactions__quick-item",
-                title: t,
-                onClick: y((r) => be(t), ["stop"])
-              }, [
-                u(H, { emoji: t }, null, 8, ["emoji"])
-              ], 8, Je))), 128)),
-              p("button", {
-                class: "message-reactions__expand",
-                title: "Развернуть",
-                onClick: y(Me, ["stop"])
-              }, [
-                u(Ke)
-              ]),
-              s.replyEnabled && s.reply ? (l(), d("button", {
-                key: 0,
-                class: "message-reactions__quick-item",
-                title: "Ответить",
-                onClick: y(Re, ["stop"])
-              }, [
-                u(Be)
-              ])) : S("", !0),
-              s.menuEnabled ? (l(), d("button", {
-                key: 1,
-                class: "message-reactions__quick-item",
-                title: "Действия",
-                onClick: y(Ee, ["stop"])
-              }, [
-                u(Qe)
-              ])) : S("", !0)
-            ], 36), [
-              [z, i(le) && !s.readonly && s.enabled]
-            ])
-          ]),
-          _: 1
-        }),
-        u(D, { name: "message-reactions-popover" }, {
-          default: C(() => [
-            V(p("div", {
-              ref_key: "pickerRef",
-              ref: ue,
-              class: "message-reactions__picker",
-              style: $(i(fe)),
-              onMouseenter: o[2] || (o[2] = //@ts-ignore
-              (...t) => i(B) && i(B)(...t)),
-              onMouseleave: o[3] || (o[3] = //@ts-ignore
-              (...t) => i(w) && i(w)(...t))
-            }, [
-              u(i(Le), {
-                native: i(Y),
-                "emoji-src": i(Z),
-                theme: _.value,
-                "picker-type": "",
-                onSelect: Ce
-              }, null, 8, ["native", "emoji-src", "theme"])
-            ], 36), [
-              [z, i(ce) && !s.readonly && s.enabled]
-            ])
-          ]),
-          _: 1
-        })
-      ]))
-    ], 34));
+      }, 1032, ["text"]))), 128))
+    ], 2));
   }
 });
 export {
-  It as default
+  ce as default
 };

package/dist/components/2_feed_elements/MessageReactions/MessageReactionsOverlay.vue.js

@@ -0,0 +1,7 @@
+import o from "./MessageReactionsOverlay.vue2.js";
+/* empty css                             */
+import t from "../../../_virtual/_plugin-vue_export-helper.js";
+const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-2fb2f337"]]);
+export {
+  s as default
+};

package/dist/components/2_feed_elements/MessageReactions/MessageReactionsOverlay.vue2.js

@@ -0,0 +1,231 @@
+import { defineComponent as fe, inject as E, computed as a, ref as x, watch as I, shallowRef as ge, unref as o, onMounted as ke, onUnmounted as Re, createBlock as B, openBlock as s, Teleport as he, createVNode as l, Transition as F, withCtx as Q, createElementBlock as u, createCommentVNode as g, normalizeStyle as K, createElementVNode as ye, Fragment as Me, renderList as Ee, withModifiers as k, resolveDynamicComponent as Ie } from "vue";
+import "../../../hooks/useMessageDraft.js";
+import "../../../hooks/useSearchModel.js";
+import "../../../hooks/useTheme.js";
+import { useEmojiNative as _e } from "../../../hooks/useEmojiNative.js";
+/* empty css                              */
+/* empty css                                              */
+import "../../../locale/useLocale.js";
+/* empty css                                                            */
+import { calculatePanelPosition as Ce } from "./composables/usePositioning.js";
+import { useFeedReactionsOverlayState as Pe, registerFeedReactionsPanelBridge as V } from "../../3_compounds/Feed/composables/useFeedReactionsOverlay.js";
+import be from "./icons/ReplyIcon.vue.js";
+import "../../../node_modules/linkifyjs/dist/linkify.js";
+import "../../../node_modules/linkify-string/dist/linkify-string.js";
+import "../../../functions/parseMarkdown.js";
+import { useStartReply as je } from "../../../hooks/messages/useStartReply.js";
+import Ne from "../../1_atoms/EmojiGlyph/EmojiGlyph.vue.js";
+import we from "./icons/ExpandReactionsIcon.vue.js";
+import Se from "./icons/MessageActionsIcon.vue.js";
+import { QUICK_REACTION_EMOJIS as Te } from "./utils/quickReactions.js";
+import { useReactionsState as Ue } from "./composables/useReactionsState.js";
+import { useReactionsPanel as qe } from "./composables/useReactionsPanel.js";
+const Le = ["title", "onClick"], st = /* @__PURE__ */ fe({
+  __name: "MessageReactionsOverlay",
+  setup(Oe) {
+    const d = E("chatAppId"), D = E("currentUserId", void 0), W = E("reactionUserNames", void 0), { startReply: $ } = je(d || ""), { isNative: z, emojiSrc: H } = _e(d || ""), r = Pe(), i = a(() => (r == null ? void 0 : r.activeTarget.value) ?? null), R = x(null);
+    I(
+      () => r == null ? void 0 : r.anchorRef.value,
+      (e) => {
+        R.value = e ?? null;
+      },
+      { immediate: !0 }
+    );
+    const _ = x("light"), p = ge(null), h = a(() => Te), y = a(() => o(D)), J = a(() => o(W)), G = a(() => {
+      var t;
+      const e = y.value;
+      if (e != null)
+        return (t = J.value) == null ? void 0 : t[String(e)];
+    }), X = a(() => {
+      var e;
+      return ((e = i.value) == null ? void 0 : e.mode) ?? "single";
+    }), Y = a(() => {
+      var e;
+      return (e = i.value) == null ? void 0 : e.reactions;
+    }), Z = Ue(
+      Y,
+      X,
+      y,
+      G
+    ), { addReaction: C, removeReaction: ee, isMyReaction: P, localReactions: te } = Z, ne = qe(h, R), {
+      isQuickReactionsOpen: M,
+      isFullPickerOpen: b,
+      pickerRef: j,
+      quickReactionsRef: v,
+      quickPanelStyle: N,
+      pickerStyle: oe,
+      closeQuickPanel: f,
+      closeFullPicker: w,
+      handleMessageMouseEnter: ie,
+      handleMessageMouseLeave: se,
+      openFullPicker: ae,
+      handleQuickPanelMouseEnter: S,
+      handleQuickPanelMouseLeave: T,
+      handlePickerMouseEnter: U,
+      handlePickerMouseLeave: q,
+      handleClickOutside: L
+    } = ne;
+    I(R, async (e) => {
+      var n;
+      if (!e || !M.value) return;
+      const t = ((n = v.value) == null ? void 0 : n.offsetWidth) || h.value.length * 40 + 40;
+      N.value = await Ce(v.value, e, t);
+    });
+    function O() {
+      var e;
+      return !!((e = i.value) != null && e.enabled && y.value != null);
+    }
+    function re() {
+      var t;
+      if (!d) return "light";
+      const e = document.getElementById(d);
+      return (t = e == null ? void 0 : e.getAttribute("data-theme")) != null && t.includes("dark") ? "dark" : "light";
+    }
+    async function ce() {
+      if (p.value) return;
+      await Promise.resolve({                                                   });
+      const e = await import("../../../node_modules/vue3-emoji-picker-ru/dist/emoji-picker.es.js");
+      p.value = e.default;
+    }
+    function A() {
+      const e = i.value, t = te.value;
+      !e || !t || e.patchReactions({
+        ...t,
+        items: t.items.map((n) => ({ ...n })),
+        meta: t.meta ? { ...t.meta } : void 0
+      });
+    }
+    function le(e) {
+      const t = i.value;
+      if (!(!t || !O())) {
+        if (P(e))
+          ee(e), t.handlers.onRemoveReaction({ messageId: t.messageId, key: e });
+        else {
+          const n = C(e);
+          n && t.handlers.onRemoveReaction({ messageId: t.messageId, key: n }), t.handlers.onAddReaction({ messageId: t.messageId, key: e });
+        }
+        A(), f();
+      }
+    }
+    function ue() {
+      const e = i.value;
+      e != null && e.reply && ($(e.reply), f());
+    }
+    function me(e) {
+      const t = i.value;
+      if (!(t != null && t.menuEnabled)) return;
+      const n = e.currentTarget, m = n instanceof HTMLElement ? (() => {
+        const c = n.getBoundingClientRect();
+        return { top: c.top, right: c.right, bottom: c.bottom, left: c.left, width: c.width, height: c.height };
+      })() : void 0;
+      t.handlers.onMenu({ messageId: t.messageId, triggerRect: m, event: e });
+    }
+    async function de() {
+      var e;
+      (e = i.value) != null && e.enabled && (_.value = re(), await ce(), await ae());
+    }
+    function pe(e) {
+      const t = i.value;
+      if (w(), f(), !t || !O()) return;
+      const n = e.i;
+      if (P(n)) return;
+      const m = C(n);
+      m && t.handlers.onRemoveReaction({ messageId: t.messageId, key: m }), t.handlers.onAddReaction({ messageId: t.messageId, key: n }), A();
+    }
+    function ve(e) {
+      var t, n;
+      return !!((t = v.value) != null && t.contains(e) || (n = j.value) != null && n.contains(e));
+    }
+    return ke(() => {
+      document.addEventListener("click", L), V({
+        onMessageEnter: ie,
+        onMessageLeave: se,
+        isPanelOpen: () => M.value || b.value,
+        containsNode: ve
+      });
+    }), Re(() => {
+      document.removeEventListener("click", L), V(null);
+    }), I(
+      () => i.value,
+      (e) => {
+        e || (f(), w());
+      }
+    ), (e, t) => (s(), B(he, { to: "body" }, [
+      l(F, { name: "message-reactions-popover" }, {
+        default: Q(() => [
+          o(M) && i.value ? (s(), u("div", {
+            key: 0,
+            ref_key: "quickReactionsRef",
+            ref: v,
+            class: "message-reactions__quick-panel",
+            style: K(o(N)),
+            onMouseenter: t[0] || (t[0] = //@ts-ignore
+            (...n) => o(S) && o(S)(...n)),
+            onMouseleave: t[1] || (t[1] = //@ts-ignore
+            (...n) => o(T) && o(T)(...n))
+          }, [
+            (s(!0), u(Me, null, Ee(h.value, (n) => (s(), u("button", {
+              key: n,
+              class: "message-reactions__quick-item",
+              title: n,
+              onClick: k((m) => le(n), ["stop"])
+            }, [
+              l(Ne, { emoji: n }, null, 8, ["emoji"])
+            ], 8, Le))), 128)),
+            ye("button", {
+              class: "message-reactions__expand",
+              title: "Развернуть",
+              onClick: k(de, ["stop"])
+            }, [
+              l(we)
+            ]),
+            i.value.replyEnabled && i.value.reply ? (s(), u("button", {
+              key: 0,
+              class: "message-reactions__quick-item",
+              title: "Ответить",
+              onClick: k(ue, ["stop"])
+            }, [
+              l(be)
+            ])) : g("", !0),
+            i.value.menuEnabled ? (s(), u("button", {
+              key: 1,
+              class: "message-reactions__quick-item",
+              title: "Действия",
+              onClick: k(me, ["stop"])
+            }, [
+              l(Se)
+            ])) : g("", !0)
+          ], 36)) : g("", !0)
+        ]),
+        _: 1
+      }),
+      l(F, { name: "message-reactions-popover" }, {
+        default: Q(() => [
+          o(b) && i.value && p.value ? (s(), u("div", {
+            key: 0,
+            ref_key: "pickerRef",
+            ref: j,
+            class: "message-reactions__picker",
+            style: K(o(oe)),
+            onMouseenter: t[2] || (t[2] = //@ts-ignore
+            (...n) => o(U) && o(U)(...n)),
+            onMouseleave: t[3] || (t[3] = //@ts-ignore
+            (...n) => o(q) && o(q)(...n))
+          }, [
+            (s(), B(Ie(p.value), {
+              native: o(z),
+              "emoji-src": o(H),
+              theme: _.value,
+              "picker-type": "",
+              onSelect: pe
+            }, null, 40, ["native", "emoji-src", "theme"]))
+          ], 36)) : g("", !0)
+        ]),
+        _: 1
+      })
+    ]));
+  }
+});
+export {
+  st as default
+};