@mobilon-dev/chotto 0.3.84 → 0.3.85

package/dist/components/1_atoms/ButtonContextMenu/ButtonContextMenu.vue2.js

@@ -3,12 +3,13 @@ import P from "../ContextMenu/ContextMenu.vue.js";
 import "../../../hooks/useMessageDraft.js";
 import "../../../hooks/useSearchModel.js";
 import { useTheme as U } from "../../../hooks/useTheme.js";
+import "../../../hooks/useEmojiNative.js";
 /* empty css                              */
 /* empty css                                              */
 import "../../../node_modules/linkifyjs/dist/linkify.js";
 import "../../../node_modules/linkify-string/dist/linkify-string.js";
 import "../../../functions/parseMarkdown.js";
-const $ = ["id"], Y = /* @__PURE__ */ _({
+const $ = ["id"], Z = /* @__PURE__ */ _({
   __name: "ButtonContextMenu",
   props: {
     actions: {
@@ -104,5 +105,5 @@ const $ = ["id"], Y = /* @__PURE__ */ _({
   }
 });
 export {
-  Y as default
+  Z as default
 };

package/dist/components/1_atoms/ContactContextMenu/ContactContextMenu.vue2.js

@@ -3,13 +3,14 @@ import J from "../ContextMenu/ContextMenu.vue.js";
 import "../../../hooks/useMessageDraft.js";
 import "../../../hooks/useSearchModel.js";
 import { useTheme as K } from "../../../hooks/useTheme.js";
+import "../../../hooks/useEmojiNative.js";
 /* empty css                              */
 /* empty css                                              */
 import "../../../node_modules/linkifyjs/dist/linkify.js";
 import "../../../node_modules/linkify-string/dist/linkify-string.js";
 import "../../../functions/parseMarkdown.js";
 import Q from "../../1_icons/MenuIcon.vue.js";
-const W = { class: "contact-context-menu__wrapper" }, X = ["id"], se = /* @__PURE__ */ V({
+const W = { class: "contact-context-menu__wrapper" }, X = ["id"], ue = /* @__PURE__ */ V({
   __name: "ContactContextMenu",
   props: {
     actions: {
@@ -127,5 +128,5 @@ const W = { class: "contact-context-menu__wrapper" }, X = ["id"], se = /* @__PUR
   }
 });
 export {
-  se as default
+  ue as default
 };

package/dist/components/1_atoms/EmojiGlyph/EmojiGlyph.vue.js

@@ -0,0 +1,38 @@
+import { defineComponent as f, inject as j, computed as c, createElementBlock as m, unref as g, openBlock as n, toDisplayString as d } from "vue";
+import "../../../hooks/useMessageDraft.js";
+import "../../../hooks/useSearchModel.js";
+import "../../../hooks/useTheme.js";
+import { useEmojiNative as h } from "../../../hooks/useEmojiNative.js";
+/* empty css                              */
+/* empty css                                              */
+import "../../../node_modules/linkifyjs/dist/linkify.js";
+import "../../../node_modules/linkify-string/dist/linkify-string.js";
+import "../../../functions/parseMarkdown.js";
+import { getAppleEmojiUrl as k, getAppleEmojiFallbackUrl as E } from "../../../functions/renderAppleEmojis.js";
+const _ = ["src", "alt"], y = { key: 1 }, D = /* @__PURE__ */ f({
+  __name: "EmojiGlyph",
+  props: {
+    emoji: {
+      type: String,
+      required: !0
+    }
+  },
+  setup(t) {
+    const r = t, p = j("chatAppId", ""), { isNative: a } = h(p), s = c(() => k(r.emoji)), l = c(() => E(r.emoji));
+    function u(i) {
+      const o = i.target, e = l.value;
+      e && o.src !== e && (o.src = e);
+    }
+    return (i, o) => g(a) ? (n(), m("span", y, d(t.emoji), 1)) : (n(), m("img", {
+      key: 0,
+      class: "chotto-emoji",
+      src: s.value,
+      alt: t.emoji,
+      draggable: "false",
+      onError: u
+    }, null, 40, _));
+  }
+});
+export {
+  D as default
+};

package/dist/components/1_atoms/EmojiGlyph/EmojiGlyph.vue2.js

@@ -0,0 +1,4 @@
+import f from "./EmojiGlyph.vue.js";
+export {
+  f as default
+};

package/dist/components/1_atoms/Tooltip/Tooltip.vue.js

@@ -1,7 +1,7 @@
 import o from "./Tooltip.vue2.js";
 /* empty css             */
 import t from "../../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-7691fdbe"]]);
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-a4d689d1"]]);
 export {
   m as default
 };

package/dist/components/1_atoms/Tooltip/Tooltip.vue2.js

@@ -1,13 +1,14 @@
-import { defineComponent as ot, inject as lt, ref as u, computed as S, onMounted as it, onUnmounted as rt, createElementBlock as g, openBlock as c, Fragment as O, createElementVNode as at, createBlock as nt, renderSlot as ut, Teleport as st, createVNode as ct, Transition as ft, withCtx as mt, createCommentVNode as ht, renderList as pt, normalizeStyle as vt, normalizeClass as dt, unref as M, toDisplayString as gt, nextTick as k } from "vue";
+import { defineComponent as ot, inject as lt, ref as f, computed as S, onMounted as it, onUnmounted as rt, createElementBlock as d, openBlock as c, Fragment as O, createElementVNode as at, createBlock as nt, renderSlot as ft, Teleport as ut, createVNode as ct, Transition as st, withCtx as mt, createCommentVNode as ht, renderList as pt, normalizeStyle as vt, normalizeClass as gt, unref as M, toDisplayString as dt, nextTick as k } from "vue";
 import "../../../hooks/useMessageDraft.js";
 import "../../../hooks/useSearchModel.js";
 import { useTheme as Tt } from "../../../hooks/useTheme.js";
+import "../../../hooks/useEmojiNative.js";
 /* empty css                              */
 /* empty css                                              */
 import "../../../node_modules/linkifyjs/dist/linkify.js";
 import "../../../node_modules/linkify-string/dist/linkify-string.js";
 import "../../../functions/parseMarkdown.js";
-const yt = { key: 0 }, wt = ["data-theme"], xt = 6, _t = 120, Nt = /* @__PURE__ */ ot({
+const yt = { key: 0 }, wt = ["data-theme"], xt = 6, _t = 120, Ot = /* @__PURE__ */ ot({
   __name: "Tooltip",
   props: {
     text: {
@@ -50,7 +51,7 @@ const yt = { key: 0 }, wt = ["data-theme"], xt = 6, _t = 120, Nt = /* @__PURE__
     }
   },
   setup(P, { expose: $ }) {
-    const T = lt("chatAppId"), { getTheme: C } = Tt(T), y = u(), f = u([]), s = u(!1), m = u(null), n = u(null), i = u(null), h = u(!1), p = u(!1), e = P, W = S(() => ({
+    const T = lt("chatAppId"), { getTheme: C } = Tt(T), y = f(), s = f([]), u = f(!1), m = f(null), n = f(null), r = f(null), h = f(!1), p = f(!1), e = P, W = S(() => ({
       tooltip__text: !0,
       [`tooltip--${e.position}`]: !0
     })), R = S(() => ({
@@ -59,58 +60,70 @@ const yt = { key: 0 }, wt = ["data-theme"], xt = 6, _t = 120, Nt = /* @__PURE__
       const t = Array.isArray(e.texts) ? e.texts.map((o) => String(o ?? "").trim()).filter(Boolean) : [];
       return t.length > 0 ? t : e.text ? [e.text] : [];
     }), V = (t, o) => {
-      const l = o.left < 0 ? o.left : 0, r = o.top < 0 ? o.top : 0;
+      const l = o.left < 0 ? o.left : 0, i = o.top < 0 ? o.top : 0;
       return {
         left: {
-          top: t.top - (o.height - t.height) / 2 - r,
+          top: t.top - (o.height - t.height) / 2 - i,
           left: t.left - o.width - l - e.offset
         },
         right: {
-          top: t.top - (o.height - t.height) / 2 - r,
+          top: t.top - (o.height - t.height) / 2 - i,
           left: t.left + t.width - l + e.offset
         },
         bottom: {
-          top: t.bottom - r + e.offset,
+          top: t.bottom - i + e.offset,
           left: t.left - l
         },
         "bottom-center": {
-          top: t.bottom - r + e.offset,
+          top: t.bottom - i + e.offset,
           left: t.left + t.width / 2 - o.width / 2 - l
         },
         top: {
-          top: t.top - o.height - e.offset - r,
+          top: t.top - o.height - e.offset - i,
           left: t.left - l
         },
         "top-center": {
-          top: t.top - o.height - e.offset - r,
+          top: t.top - o.height - e.offset - i,
           left: t.left + t.width / 2 - o.width / 2 - l
         },
+        "top-left": {
+          top: t.top - o.height - e.offset - i,
+          left: t.left + t.width - o.width - l
+        },
+        "top-right": {
+          top: t.top - o.height - e.offset - i,
+          left: t.left - l
+        },
         "bottom-left": {
-          top: t.bottom - r + e.offset,
+          top: t.bottom - i + e.offset,
           left: t.left + t.width - o.width - l
+        },
+        "bottom-right": {
+          top: t.bottom - i + e.offset,
+          left: t.left - l
         }
       }[e.position];
     }, L = () => {
-      if (!y.value || f.value.length === 0) return;
-      const t = y.value.getBoundingClientRect(), o = e.position.startsWith("top"), l = 8, r = T ? document.getElementById(T) : null, a = r == null ? void 0 : r.getBoundingClientRect(), U = (a == null ? void 0 : a.top) ?? 0, X = (a == null ? void 0 : a.left) ?? 0, Y = (a == null ? void 0 : a.right) ?? window.innerWidth, J = (a == null ? void 0 : a.bottom) ?? window.innerHeight;
-      f.value.forEach((x, Q) => {
-        const d = x.getBoundingClientRect(), _ = V(t, d), D = Q * (d.height + xt), Z = o ? _.top - D : _.top + D, I = U + l, b = J - d.height - l, N = X + l, B = Y - d.width - l, tt = Math.min(Math.max(Z, I), Math.max(I, b)), et = Math.min(Math.max(_.left, N), Math.max(N, B));
+      if (!y.value || s.value.length === 0) return;
+      const t = y.value.getBoundingClientRect(), o = e.position.startsWith("top"), l = 8, i = T ? document.getElementById(T) : null, a = i == null ? void 0 : i.getBoundingClientRect(), U = (a == null ? void 0 : a.top) ?? 0, X = (a == null ? void 0 : a.left) ?? 0, Y = (a == null ? void 0 : a.right) ?? window.innerWidth, J = (a == null ? void 0 : a.bottom) ?? window.innerHeight;
+      s.value.forEach((x, Q) => {
+        const g = x.getBoundingClientRect(), _ = V(t, g), D = Q * (g.height + xt), Z = o ? _.top - D : _.top + D, I = U + l, b = J - g.height - l, N = X + l, B = Y - g.width - l, tt = Math.min(Math.max(Z, I), Math.max(I, b)), et = Math.min(Math.max(_.left, N), Math.max(N, B));
         x.style.top = `${tt}px`, x.style.left = `${et}px`;
       });
     }, q = () => {
-      e.trigger !== "auto" && (n.value && (clearTimeout(n.value), n.value = null), i.value && (clearTimeout(i.value), i.value = null), n.value = setTimeout(() => {
-        s.value = !0, k(() => {
+      e.trigger !== "auto" && (n.value && (clearTimeout(n.value), n.value = null), r.value && (clearTimeout(r.value), r.value = null), n.value = setTimeout(() => {
+        u.value = !0, k(() => {
           L();
         }), n.value = null;
       }, e.delay));
     }, w = () => {
-      e.trigger !== "auto" && (n.value && (clearTimeout(n.value), n.value = null), i.value && (clearTimeout(i.value), i.value = null), s.value = !1, k(() => {
-        M(f).forEach((o) => {
+      e.trigger !== "auto" && (n.value && (clearTimeout(n.value), n.value = null), r.value && (clearTimeout(r.value), r.value = null), u.value = !1, k(() => {
+        M(s).forEach((o) => {
           o.style.top = "0", o.style.left = "0";
         });
       }));
     }, A = () => {
-      e.trigger !== "auto" && (i.value && clearTimeout(i.value), i.value = setTimeout(() => {
+      e.trigger !== "auto" && (r.value && clearTimeout(r.value), r.value = setTimeout(() => {
         !h.value && !p.value && w();
       }, _t));
     }, z = () => {
@@ -118,22 +131,22 @@ const yt = { key: 0 }, wt = ["data-theme"], xt = 6, _t = 120, Nt = /* @__PURE__
     }, j = () => {
       h.value = !1, A();
     }, F = () => {
-      p.value = !0, i.value && (clearTimeout(i.value), i.value = null);
+      p.value = !0, r.value && (clearTimeout(r.value), r.value = null);
     }, G = () => {
       p.value = !1, A();
     }, E = () => {
       if (e.hideOnClick) {
         if (h.value = !1, p.value = !1, e.trigger === "auto") {
-          v(), s.value = !1;
+          v(), u.value = !1;
           return;
         }
         w();
       }
     }, K = () => {
-      v(), s.value = !0, k(() => {
+      v(), u.value = !0, k(() => {
         L();
       }), e.autoShowDuration > 0 && (m.value = setTimeout(() => {
-        s.value = !1;
+        u.value = !1;
       }, e.autoShowDuration));
     }, v = () => {
       m.value && (clearTimeout(m.value), m.value = null);
@@ -141,12 +154,12 @@ const yt = { key: 0 }, wt = ["data-theme"], xt = 6, _t = 120, Nt = /* @__PURE__
     return it(() => {
       e.hideOnClick && document.addEventListener("mousedown", E, !0);
     }), rt(() => {
-      e.hideOnClick && document.removeEventListener("mousedown", E, !0), n.value && clearTimeout(n.value), i.value && clearTimeout(i.value), v();
+      e.hideOnClick && document.removeEventListener("mousedown", E, !0), n.value && clearTimeout(n.value), r.value && clearTimeout(r.value), v();
     }), $({
       startAutoShow: K,
       clearAutoTimer: v,
       hide: w
-    }), (t, o) => (c(), g(O, null, [
+    }), (t, o) => (c(), d(O, null, [
       at("div", {
         ref_key: "container",
         ref: y,
@@ -154,23 +167,23 @@ const yt = { key: 0 }, wt = ["data-theme"], xt = 6, _t = 120, Nt = /* @__PURE__
         onMouseenter: z,
         onMouseleave: j
       }, [
-        ut(t.$slots, "default", {}, void 0, !0)
+        ft(t.$slots, "default", {}, void 0, !0)
       ], 544),
-      (c(), nt(st, { to: "body" }, [
-        ct(ft, null, {
+      (c(), nt(ut, { to: "body" }, [
+        ct(st, null, {
           default: mt(() => [
-            s.value ? (c(), g("div", yt, [
-              (c(!0), g(O, null, pt(H.value, (l, r) => (c(), g("span", {
-                key: `${l}-${r}`,
+            u.value ? (c(), d("div", yt, [
+              (c(!0), d(O, null, pt(H.value, (l, i) => (c(), d("span", {
+                key: `${l}-${i}`,
                 ref_for: !0,
                 ref_key: "tooltipItems",
-                ref: f,
+                ref: s,
                 "data-theme": M(C)().theme ? M(C)().theme : "light",
-                class: dt(W.value),
+                class: gt(W.value),
                 style: vt(R.value),
                 onMouseenter: F,
                 onMouseleave: G
-              }, gt(l), 47, wt))), 128))
+              }, dt(l), 47, wt))), 128))
             ])) : ht("", !0)
           ]),
           _: 1
@@ -180,5 +193,5 @@ const yt = { key: 0 }, wt = ["data-theme"], xt = 6, _t = 120, Nt = /* @__PURE__
   }
 });
 export {
-  Nt as default
+  Ot as default
 };

package/dist/components/1_icons/CloseIcon.vue.js

@@ -0,0 +1,21 @@
+import { createElementBlock as e, openBlock as t, createElementVNode as o } from "vue";
+import n from "../../_virtual/_plugin-vue_export-helper.js";
+const r = {}, l = {
+  width: "18",
+  height: "18",
+  viewBox: "0 0 18 18",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+};
+function s(c, C) {
+  return t(), e("svg", l, [...C[0] || (C[0] = [
+    o("path", {
+      d: "M0.219947 1.28195C0.150215 1.21222 0.0949012 1.12943 0.0571625 1.03832C0.0194239 0.947213 7.34745e-10 0.849563 0 0.750947C-7.34745e-10 0.652332 0.0194239 0.554681 0.0571625 0.463572C0.0949012 0.372463 0.150215 0.289679 0.219947 0.219947C0.289679 0.150215 0.372463 0.0949012 0.463572 0.0571625C0.554681 0.0194239 0.652332 -7.34745e-10 0.750947 0C0.849563 7.34745e-10 0.947213 0.0194239 1.03832 0.0571625C1.12943 0.0949012 1.21222 0.150215 1.28195 0.219947L9.00095 7.94045L16.7199 0.219947C16.7897 0.150215 16.8725 0.0949012 16.9636 0.0571625C17.0547 0.0194239 17.1523 0 17.2509 0C17.3496 0 17.4472 0.0194239 17.5383 0.0571625C17.6294 0.0949012 17.7122 0.150215 17.7819 0.219947C17.8517 0.289679 17.907 0.372463 17.9447 0.463572C17.9825 0.554681 18.0019 0.652332 18.0019 0.750947C18.0019 0.849563 17.9825 0.947213 17.9447 1.03832C17.907 1.12943 17.8517 1.21222 17.7819 1.28195L10.0614 9.00095L17.7819 16.7199C17.8517 16.7897 17.907 16.8725 17.9447 16.9636C17.9825 17.0547 18.0019 17.1523 18.0019 17.2509C18.0019 17.3496 17.9825 17.4472 17.9447 17.5383C17.907 17.6294 17.8517 17.7122 17.7819 17.7819C17.7122 17.8517 17.6294 17.907 17.5383 17.9447C17.4472 17.9825 17.3496 18.0019 17.2509 18.0019C17.1523 18.0019 17.0547 17.9825 16.9636 17.9447C16.8725 17.907 16.7897 17.8517 16.7199 17.7819L9.00095 10.0614L1.28195 17.7819C1.21222 17.8517 1.12943 17.907 1.03832 17.9447C0.947213 17.9825 0.849563 18.0019 0.750947 18.0019C0.652332 18.0019 0.554681 17.9825 0.463572 17.9447C0.372463 17.907 0.289679 17.8517 0.219947 17.7819C0.150215 17.7122 0.0949012 17.6294 0.0571625 17.5383C0.0194239 17.4472 0 17.3496 0 17.2509C0 17.1523 0.0194239 17.0547 0.0571625 16.9636C0.0949012 16.8725 0.150215 16.7897 0.219947 16.7199L7.94045 9.00095L0.219947 1.28195Z",
+      fill: "#5F5F5F"
+    }, null, -1)
+  ])]);
+}
+const m = /* @__PURE__ */ n(r, [["render", s]]);
+export {
+  m as default
+};

package/dist/components/2_blocks/FeedSearch/FeedSearch.vue2.js

@@ -4,12 +4,13 @@ import { useDelayDebouncedRef as b } from "../../../hooks/useDelayDebouncedRef.j
 import "../../../hooks/useMessageDraft.js";
 import { useSearchModel as A } from "../../../hooks/useSearchModel.js";
 import "../../../hooks/useTheme.js";
+import "../../../hooks/useEmojiNative.js";
 /* empty css                              */
 /* empty css                                              */
 import "../../../node_modules/linkifyjs/dist/linkify.js";
 import "../../../node_modules/linkify-string/dist/linkify-string.js";
 import "../../../functions/parseMarkdown.js";
-const E = { class: "feed-search__container" }, N = { style: { "line-height": "40px" } }, T = ["placeholder"], O = /* @__PURE__ */ _({
+const E = { class: "feed-search__container" }, N = { style: { "line-height": "40px" } }, T = ["placeholder"], Q = /* @__PURE__ */ _({
   __name: "FeedSearch",
   props: {
     isFeedLocation: {
@@ -19,19 +20,19 @@ const E = { class: "feed-search__container" }, N = { style: { "line-height": "40
   },
   emits: ["search", "cancel", "switch"],
   setup(a, { emit: u }) {
-    const f = y("chatAppId"), { getModel: e } = A(f), c = u, l = a, i = v(), s = b("", 500), h = S(() => l.isFeedLocation ? "40px" : (l.isFeedLocation, "20px"));
+    const f = y("chatAppId"), { getModel: e } = A(f), i = u, l = a, c = v(), s = b("", 500), h = S(() => l.isFeedLocation ? "40px" : (l.isFeedLocation, "20px"));
     k(
       () => [e().text, s.value],
       () => {
-        s.value == e().text ? c("search", e().text) : s.value = e().text;
+        s.value == e().text ? i("search", e().text) : s.value = e().text;
       }
     );
     const x = () => {
-      const t = o(i);
-      t && (t.value = ""), e().text = "", c("cancel");
+      const t = o(c);
+      t && (t.value = ""), e().text = "", i("cancel");
     };
     return F(() => {
-      const t = o(i);
+      const t = o(c);
       t == null || t.focus();
     }), (t, n) => (m(), g(L, null, {
       default: w(() => [
@@ -39,7 +40,7 @@ const E = { class: "feed-search__container" }, N = { style: { "line-height": "40
           r("span", N, D(o(d)("component.FeedSearch.SearchLabel")), 1),
           C(r("input", {
             ref_key: "refInput",
-            ref: i,
+            ref: c,
             "onUpdate:modelValue": n[0] || (n[0] = (p) => o(e)().text = p),
             class: "feed-search__input",
             type: "text",
@@ -56,7 +57,7 @@ const E = { class: "feed-search__container" }, N = { style: { "line-height": "40
             key: 0,
             class: "pi pi-refresh",
             style: { "margin-left": "5px", "margin-top": "10px", cursor: "pointer" },
-            onClick: n[1] || (n[1] = (p) => c("switch"))
+            onClick: n[1] || (n[1] = (p) => i("switch"))
           })) : B("", !0)
         ])
       ]),
@@ -65,5 +66,5 @@ const E = { class: "feed-search__container" }, N = { style: { "line-height": "40
   }
 });
 export {
-  O as default
+  Q as default
 };

package/dist/components/2_chatinput_elements/ButtonCommandsSelector/ButtonCommandsSelector.vue2.js

@@ -1,14 +1,15 @@
-import { defineComponent as p, inject as g, useTemplateRef as C, watch as h, createBlock as n, openBlock as m, Transition as x, withCtx as i, createCommentVNode as y, unref as d, createElementVNode as B, normalizeClass as M } from "vue";
+import { defineComponent as p, inject as g, useTemplateRef as C, watch as h, createBlock as n, openBlock as m, Transition as x, withCtx as i, createCommentVNode as y, unref as r, createElementVNode as B, normalizeClass as M } from "vue";
 import { useMessageDraft as b } from "../../../hooks/useMessageDraft.js";
 import "../../../hooks/useSearchModel.js";
 import "../../../hooks/useTheme.js";
+import "../../../hooks/useEmojiNative.js";
 /* empty css                              */
 /* empty css                                              */
 import "../../../node_modules/linkifyjs/dist/linkify.js";
 import "../../../node_modules/linkify-string/dist/linkify-string.js";
 import "../../../functions/parseMarkdown.js";
 import k from "../../1_atoms/ButtonContextMenu/ButtonContextMenu.vue.js";
-const T = /* @__PURE__ */ p({
+const V = /* @__PURE__ */ p({
   __name: "ButtonCommandsSelector",
   props: {
     commands: {
@@ -27,8 +28,8 @@ const T = /* @__PURE__ */ p({
     }
   },
   emits: ["send"],
-  setup(e, { emit: r }) {
-    const c = e, l = r, u = g("chatAppId"), { getMessage: s } = b(u), a = C("refBCM"), f = (t) => {
+  setup(e, { emit: d }) {
+    const c = e, l = d, u = g("chatAppId"), { getMessage: s } = b(u), a = C("refBCM"), f = (t) => {
       console.log(t);
       const o = {
         type: "message.command",
@@ -50,13 +51,13 @@ const T = /* @__PURE__ */ p({
           ref: a,
           "menu-side": "top",
           mode: e.mode,
-          disabled: d(s)().isRecording || e.state == "disabled",
+          disabled: r(s)().isRecording || e.state == "disabled",
           actions: e.commands,
           onClick: f
         }, {
           default: i(() => [
             B("span", {
-              class: M(["commands__trigger", { commands__disabled: d(s)().isRecording || e.state == "disabled" }])
+              class: M(["commands__trigger", { commands__disabled: r(s)().isRecording || e.state == "disabled" }])
             }, " / ", 2)
           ]),
           _: 1
@@ -67,5 +68,5 @@ const T = /* @__PURE__ */ p({
   }
 });
 export {
-  T as default
+  V as default
 };

package/dist/components/2_chatinput_elements/ButtonEmojiPicker/ButtonEmojiPicker.vue.js

@@ -1,7 +1,7 @@
 import o from "./ButtonEmojiPicker.vue2.js";
 /* empty css                       */
 import t from "../../../_virtual/_plugin-vue_export-helper.js";
-const e = /* @__PURE__ */ t(o, [["__scopeId", "data-v-bce30537"]]);
+const c = /* @__PURE__ */ t(o, [["__scopeId", "data-v-e67f8c2a"]]);
 export {
-  e as default
+  c as default
 };

package/dist/components/2_chatinput_elements/ButtonEmojiPicker/ButtonEmojiPicker.vue2.js

@@ -1,16 +1,17 @@
-import { defineComponent as A, ref as l, inject as D, computed as W, watchEffect as z, onMounted as R, onUnmounted as U, createElementBlock as j, openBlock as C, Fragment as $, createCommentVNode as q, createVNode as g, unref as b, normalizeClass as G, createElementVNode as B, Transition as J, withCtx as K, withDirectives as Q, vShow as X } from "vue";
-import Y from "../../../node_modules/vue3-emoji-picker-ru/dist/emoji-picker.es.js";
+import { defineComponent as D, ref as l, inject as W, watch as z, computed as R, watchEffect as U, onMounted as $, onUnmounted as q, createElementBlock as j, openBlock as C, Fragment as G, createCommentVNode as J, createVNode as g, unref as b, normalizeClass as K, createElementVNode as B, Transition as Q, withCtx as X, withDirectives as Y, vShow as Z } from "vue";
+import ee from "../../../node_modules/vue3-emoji-picker-ru/dist/emoji-picker.es.js";
 /* empty css                                                        */
-import { useMessageDraft as Z } from "../../../hooks/useMessageDraft.js";
+import { useMessageDraft as te } from "../../../hooks/useMessageDraft.js";
 import "../../../hooks/useSearchModel.js";
 import "../../../hooks/useTheme.js";
+import { useEmojiNative as oe } from "../../../hooks/useEmojiNative.js";
 /* empty css                              */
 /* empty css                                              */
 import "../../../node_modules/linkifyjs/dist/linkify.js";
 import "../../../node_modules/linkify-string/dist/linkify-string.js";
 import "../../../functions/parseMarkdown.js";
-import ee from "./icons/SmilesIcon.vue.js";
-const ve = /* @__PURE__ */ A({
+import ne from "./icons/SmilesIcon.vue.js";
+const ke = /* @__PURE__ */ D({
   __name: "ButtonEmojiPicker",
   props: {
     state: {
@@ -23,63 +24,73 @@ const ve = /* @__PURE__ */ A({
       // или 'hover'
       validator: (r) => ["click", "hover"].includes(r)
     },
+    /**
+     * true — системные эмодзи; false — 3D (Apple) в пикере, инпуте и ленте.
+     * Значение пишется в общий store чата (useEmojiNative).
+     */
     native: {
       type: Boolean,
       default: !0
     }
   },
   setup(r) {
-    const t = r, v = l(null), f = l(null), o = l(!1), M = l("light"), i = D("chatAppId"), { setMessageText: P, getMessage: E } = Z(i), c = l("#5F5F5F"), u = l("#404040"), h = l(!1);
+    const t = r, v = l(null), f = l(null), o = l(!1), E = l("light"), i = W("chatAppId"), { setMessageText: P, getMessage: M } = te(i), { setNative: w } = oe(i);
+    z(
+      () => t.native,
+      (e) => w(e),
+      { immediate: !0 }
+    );
+    const c = l("#5F5F5F"), s = l("#404040"), h = l(!1);
     let a = null;
     const p = () => {
       if (!i) {
-        c.value = "#5F5F5F", u.value = "#404040";
+        c.value = "#5F5F5F", s.value = "#404040";
         return;
       }
       const e = document.getElementById(i);
       if (!e) {
-        c.value = "#5F5F5F", u.value = "#404040";
+        c.value = "#5F5F5F", s.value = "#404040";
         return;
       }
-      const n = window.getComputedStyle(e), d = n.getPropertyValue("--chotto-buttonemojipicker-button-span-color").trim(), H = n.getPropertyValue("--chotto-buttonemojipicker-button-span-hover-color").trim();
-      c.value = d || "#5F5F5F", u.value = H || "#404040";
-    }, w = W(() => h.value ? u.value : c.value);
-    z(() => {
+      const n = window.getComputedStyle(e), d = n.getPropertyValue("--chotto-buttonemojipicker-button-span-color").trim(), A = n.getPropertyValue("--chotto-buttonemojipicker-button-span-hover-color").trim();
+      c.value = d || "#5F5F5F", s.value = A || "#404040";
+    }, I = R(() => h.value ? s.value : c.value);
+    U(() => {
       p();
     });
-    let s = !1, m = !1;
-    const I = () => {
+    let u = !1, m = !1;
+    const N = () => {
       var n;
       const e = document.getElementById(i);
       return (n = e == null ? void 0 : e.getAttribute("data-theme")) != null && n.includes("dark") ? "dark" : "light";
     }, S = (e) => {
-      P(E().text + e.i), t.mode === "click" && (o.value = !1);
+      P(M().text + e.i), t.mode === "click" && (o.value = !1);
     }, y = () => {
-      t.state === "active" && (M.value = I(), o.value = !0);
+      t.state === "active" && (E.value = N(), o.value = !0);
     }, k = () => {
       o.value = !1;
     }, _ = () => {
       t.mode === "click" && (o.value = !o.value, o.value && y());
     }, T = () => {
-      t.mode === "hover" && (s = !0, y());
+      t.mode === "hover" && (u = !0, y());
     }, V = () => {
-      t.mode === "hover" && (s = !1, setTimeout(() => {
-        !m && !s && k();
+      t.mode === "hover" && (u = !1, setTimeout(() => {
+        !m && !u && k();
       }, 150));
     }, x = () => {
       h.value = !0, T();
     }, L = () => {
       h.value = !1, V();
-    }, N = () => {
-      t.mode === "hover" && (m = !0);
     }, O = () => {
+      t.mode === "hover" && (m = !0);
+    }, H = () => {
       t.mode === "hover" && (m = !1, setTimeout(() => {
-        !s && !m && k();
+        !u && !m && k();
       }, 150));
     }, F = (e) => {
       t.mode === "click" && o.value && f.value && v.value && e.target instanceof Node && !f.value.contains(e.target) && !v.value.contains(e.target) && k();
     };
-    return R(() => {
+    return $(() => {
       if (document.addEventListener("click", F), p(), i) {
         const e = document.getElementById(i);
         e && (a = new MutationObserver((n) => {
@@ -91,39 +102,39 @@ const ve = /* @__PURE__ */ A({
           attributeFilter: ["data-theme"]
         }));
       }
-    }), U(() => {
+    }), q(() => {
       document.removeEventListener("click", F), a && (a.disconnect(), a = null);
-    }), (e, n) => (C(), j($, null, [
-      b(E)().isRecording ? q("", !0) : (C(), j("button", {
+    }), (e, n) => (C(), j(G, null, [
+      b(M)().isRecording ? J("", !0) : (C(), j("button", {
         key: 0,
         ref_key: "emojiButton",
         ref: f,
-        class: G(["button", { "button-disabled": r.state === "disabled" }]),
+        class: K(["button", { "button-disabled": r.state === "disabled" }]),
         onClick: _,
         onMouseenter: x,
         onMouseleave: L
       }, [
         B("span", null, [
-          g(b(ee), { fill: w.value }, null, 8, ["fill"])
+          g(b(ne), { fill: I.value }, null, 8, ["fill"])
         ])
       ], 34)),
-      g(J, null, {
-        default: K(() => [
-          Q(B("div", {
+      g(Q, null, {
+        default: X(() => [
+          Y(B("div", {
             ref_key: "emoji",
             ref: v,
             class: "emoji",
-            onMouseenter: N,
-            onMouseleave: O
+            onMouseenter: O,
+            onMouseleave: H
           }, [
-            g(b(Y), {
+            g(b(ee), {
               native: r.native,
-              theme: M.value,
+              theme: E.value,
               "picker-type": "",
               onSelect: S
             }, null, 8, ["native", "theme"])
           ], 544), [
-            [X, o.value]
+            [Z, o.value]
           ])
         ]),
         _: 1
@@ -132,5 +143,5 @@ const ve = /* @__PURE__ */ A({
   }
 });
 export {
-  ve as default
+  ke as default
 };

package/dist/components/2_chatinput_elements/ButtonTemplateSelector/ButtonTemplateSelector.vue2.js

@@ -4,13 +4,14 @@ import P from "../../1_atoms/Tooltip/Tooltip.vue.js";
 import { useMessageDraft as j } from "../../../hooks/useMessageDraft.js";
 import "../../../hooks/useSearchModel.js";
 import "../../../hooks/useTheme.js";
+import "../../../hooks/useEmojiNative.js";
 /* empty css                              */
 /* empty css                                              */
 import "../../../node_modules/linkifyjs/dist/linkify.js";
 import "../../../node_modules/linkify-string/dist/linkify-string.js";
 import "../../../functions/parseMarkdown.js";
 import z from "./icons/ChatTemplatesIcon.vue.js";
-const R = { class: "" }, oe = /* @__PURE__ */ T({
+const R = { class: "" }, le = /* @__PURE__ */ T({
   __name: "ButtonTemplateSelector",
   props: {
     templates: {
@@ -132,5 +133,5 @@ const R = { class: "" }, oe = /* @__PURE__ */ T({
   }
 });
 export {
-  oe as default
+  le as default
 };