@mobilon-dev/chotto 0.3.84 → 0.3.86

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

@@ -1,4 +1,4 @@
-import { defineComponent as ie, inject as le, ref as w, computed as p, watch as me, createElementBlock as r, openBlock as o, Fragment as re, createElementVNode as l, createBlock as c, unref as a, normalizeStyle as F, normalizeClass as y, createCommentVNode as i, createVNode as m, withCtx as d, createTextVNode as ue, toDisplayString as T, Transition as b, withModifiers as P, Teleport as de } from "vue";
+import { defineComponent as ie, inject as le, ref as w, computed as p, watch as me, createElementBlock as r, openBlock as o, Fragment as re, createElementVNode as l, createBlock as c, unref as a, normalizeStyle as B, normalizeClass as y, createCommentVNode as i, createVNode as m, withCtx as d, createTextVNode as ue, toDisplayString as R, Transition as b, withModifiers as F, Teleport as de } from "vue";
 import ce from "../../1_atoms/ContextMenu/ContextMenu.vue.js";
 import ge from "../../1_atoms/LinkPreview/LinkPreview.vue.js";
 import ve from "../../1_atoms/EmbedPreview/EmbedPreview.vue.js";
@@ -11,27 +11,29 @@ import pe from "../../1_atoms/Tooltip/Tooltip.vue.js";
 import { useMessageActions as he } from "../../../hooks/messages/useMessageActions.js";
 import { useMessageLinks as xe } from "../../../hooks/messages/useMessageLinks.js";
 import { useChannelAccentColor as Me } from "../../../hooks/messages/useChannelAccentColor.js";
-import { useSubtextTooltip as Te } from "../../../hooks/messages/useSubtextTooltip.js";
-import { getStatus as Re, getStatusTitle as Ce } from "../../../functions/getStatusMessage.js";
-import { safeMediaPlayVoid as $ } from "../../../functions/safeMediaPlay.js";
-import { getMessageClass as Se } from "../../../functions/getMessageClass.js";
-import { createReactionHandlers as Ie } from "../../../functions/createReactionHandlers.js";
-import "../../../functions/parseMarkdown.js";
+import { useSubtextTooltip as Re } from "../../../hooks/messages/useSubtextTooltip.js";
 import "../../../hooks/useMessageDraft.js";
 import "../../../hooks/useSearchModel.js";
-import { useTheme as Ae } from "../../../hooks/useTheme.js";
+import { useTheme as Te } from "../../../hooks/useTheme.js";
+import "../../../hooks/useEmojiNative.js";
 /* empty css                              */
 /* empty css                                              */
-const Ee = ["messageId"], Le = ["src"], Be = {
+import { buildReplyPayload as Se } from "../../../hooks/messages/buildReplyPayload.js";
+import { getStatus as Ce, getStatusTitle as Ie } from "../../../functions/getStatusMessage.js";
+import { safeMediaPlayVoid as N } from "../../../functions/safeMediaPlay.js";
+import { getMessageClass as Ae } from "../../../functions/getMessageClass.js";
+import { createReactionHandlers as Ee } from "../../../functions/createReactionHandlers.js";
+import "../../../functions/parseMarkdown.js";
+const Le = ["messageId"], Pe = ["src"], Be = {
   key: 1,
   class: "video-message__subtext"
-}, Fe = ["src"], Pe = {
+}, Fe = ["src"], Ne = {
   key: 0,
   class: "video-message__info-container"
-}, $e = { class: "video-message__time" }, Oe = {
+}, Ue = { class: "video-message__time" }, $e = {
   key: 1,
   class: "video-message__text-container"
-}, je = ["innerHTML"], He = ["src", "alt"], us = /* @__PURE__ */ ie({
+}, Oe = ["innerHTML"], je = ["src", "alt"], gs = /* @__PURE__ */ ie({
   inheritAttrs: !1,
   __name: "VideoMessage",
   props: {
@@ -51,6 +53,19 @@ const Ee = ["messageId"], Le = ["src"], Be = {
       type: Boolean,
       default: !0
     },
+    reactionsMode: {
+      type: String,
+      default: "single",
+      validator: (e) => ["single", "multi"].includes(e)
+    },
+    currentUserId: {
+      type: [String, Number],
+      default: void 0
+    },
+    reactionUserNames: {
+      type: Object,
+      default: void 0
+    },
     subtextTooltipData: {
       type: Object,
       required: !1,
@@ -63,31 +78,31 @@ const Ee = ["messageId"], Le = ["src"], Be = {
     }
   },
   emits: ["action", "reply", "sms-invite"],
-  setup(e, { emit: O }) {
-    const j = le("chatAppId"), { getTheme: R } = Ae(j), t = e, h = O;
-    function C(u) {
-      return Se(u.position, "video-message");
+  setup(e, { emit: U }) {
+    const $ = le("chatAppId"), { getTheme: T } = Te($), t = e, h = U;
+    function S(u) {
+      return Ae(u.position, "video-message");
     }
-    const S = w(), g = w(), x = w(!1), v = w(!1), { linkedHtml: H, inNewWindow: I } = xe(() => t.message.text), {
+    const C = w(), g = w(), x = w(!1), v = w(!1), { linkedHtml: O, inNewWindow: I } = xe(() => t.message.text), {
       isOpenMenu: M,
-      buttonMenuVisible: N,
-      showMenu: V,
+      buttonMenuVisible: j,
+      showMenu: H,
       hideMenu: A,
-      clickAction: q,
+      clickAction: V,
       viewsAction: E,
-      handleClickReplied: D
-    } = he(t.message, h), U = () => {
-      V(), v.value = !0;
-    }, z = p(() => Re(t.message.status)), W = p(() => Ce(t.message.status, t.message.statusMsg)), { bubbleStyle: G } = Me(
+      handleClickReplied: q
+    } = he(t.message, h), D = () => {
+      H(), v.value = !0;
+    }, z = p(() => Ce(t.message.status)), W = p(() => Ie(t.message.status, t.message.statusMsg)), { bubbleStyle: G } = Me(
       p(() => t.message),
       { cssVariable: "--chotto-videomessage-right-bg", position: "right" }
     ), J = () => {
-      g.value && (g.value.currentTime = 0, $(g.value));
+      g.value && (g.value.currentTime = 0, N(g.value));
     };
-    me([S, g], ([u, s]) => {
-      u ? s && (s.pause(), s.currentTime = 0) : s && (s.currentTime = 0, $(s));
+    me([C, g], ([u, s]) => {
+      u ? s && (s.pause(), s.currentTime = 0) : s && (s.currentTime = 0, N(s));
     });
-    const K = p(() => t.message.reply && t.message.text ? "0" : t.message.text ? "5px 5px 0 0" : t.message.reply ? "0 0 5px 5px" : "8px"), Q = () => x.value = !1, { onToggleReaction: X, onAddReaction: Y, onRemoveReaction: Z } = Ie(h), _ = async () => {
+    const K = p(() => t.message.reply && t.message.text ? "0" : t.message.text ? "5px 5px 0 0" : t.message.reply ? "0 0 5px 5px" : "8px"), Q = () => x.value = !1, { onToggleReaction: X, onAddReaction: Y, onRemoveReaction: Z } = Ee(h), _ = async () => {
       var u, s;
       if (t.message.url)
         try {
@@ -107,23 +122,23 @@ const Ee = ["messageId"], Le = ["src"], Be = {
             "application/octet-stream": k || "mp4"
           };
           let L = k && ["mp4", "mov", "webm", "ogv", "mkv"].includes(k) ? k : ne[te] || "mp4";
-          const oe = t.message.alt ? t.message.alt.includes(".") ? t.message.alt : `${t.message.alt}.${L}` : `video-${t.message.messageId}.${L}`, B = window.URL.createObjectURL(ae), f = document.createElement("a");
-          f.href = B, f.download = oe, document.body.appendChild(f), f.click(), document.body.removeChild(f), window.URL.revokeObjectURL(B);
+          const oe = t.message.alt ? t.message.alt.includes(".") ? t.message.alt : `${t.message.alt}.${L}` : `video-${t.message.messageId}.${L}`, P = window.URL.createObjectURL(ae), f = document.createElement("a");
+          f.href = P, f.download = oe, document.body.appendChild(f), f.click(), document.body.removeChild(f), window.URL.revokeObjectURL(P);
         } catch (n) {
           console.error("Ошибка при скачивании видео:", n), window.open(t.message.url, "_blank");
         }
-    }, ee = Te(() => t.message, () => t.subtextTooltipData);
+    }, ee = Re(() => t.message, () => t.subtextTooltipData);
     function se() {
       h("sms-invite", t.message);
     }
     return (u, s) => (o(), r(re, null, [
       l("div", {
         class: y(["video-message", [
-          C(e.message),
+          S(e.message),
           e.applyStyle(e.message)
         ]]),
         messageId: e.message.messageId,
-        style: F(a(G)),
+        style: B(a(G)),
         onMouseleave: s[5] || (s[5] = //@ts-ignore
         (...n) => a(A) && a(A)(...n))
       }, [
@@ -133,7 +148,7 @@ const Ee = ["messageId"], Le = ["src"], Be = {
           src: e.message.avatar,
           height: "32",
           width: "32"
-        }, null, 8, Le)) : i("", !0),
+        }, null, 8, Pe)) : i("", !0),
         e.message.subText && e.isFirstInSeries ? (o(), r("p", Be, [
           m(pe, {
             text: a(ee),
@@ -141,7 +156,7 @@ const Ee = ["messageId"], Le = ["src"], Be = {
             offset: 8
           }, {
             default: d(() => [
-              ue(T(e.message.subText), 1)
+              ue(R(e.message.subText), 1)
             ]),
             _: 1
           }, 8, ["text", "position"])
@@ -154,19 +169,19 @@ const Ee = ["messageId"], Le = ["src"], Be = {
             style: { margin: "10px 10px 4px 16px" },
             class: y(e.message.position),
             message: e.message.reply,
-            onReply: a(D)
+            onReply: a(q)
           }, null, 8, ["class", "message", "onReply"])) : i("", !0),
           l("div", {
             class: "video-message__preview-button",
             onClick: s[1] || (s[1] = (n) => x.value = !0),
-            onMouseenter: U,
+            onMouseenter: D,
             onMouseleave: s[2] || (s[2] = (n) => v.value = !v.value)
           }, [
             l("video", {
               ref_key: "previewPlayer",
               ref: g,
               class: "video-message__video",
-              style: F({ borderRadius: K.value }),
+              style: B({ borderRadius: K.value }),
               src: e.message.url,
               muted: !0,
               autoplay: "",
@@ -174,23 +189,23 @@ const Ee = ["messageId"], Le = ["src"], Be = {
             }, null, 44, Fe),
             m(b, { name: "modal-fade" }, {
               default: d(() => [
-                v.value ? (o(), r("div", Pe, [
+                v.value ? (o(), r("div", Ne, [
                   e.message.views ? (o(), r("div", {
                     key: 0,
                     class: "video-message__views",
-                    onClick: s[0] || (s[0] = P(
+                    onClick: s[0] || (s[0] = F(
                       //@ts-ignore
                       (...n) => a(E) && a(E)(...n),
                       ["stop"]
                     ))
                   }, [
                     s[6] || (s[6] = l("span", { class: "pi pi-eye" }, null, -1)),
-                    l("p", null, T(e.message.views), 1)
+                    l("p", null, R(e.message.views), 1)
                   ])) : i("", !0),
-                  l("span", $e, T(e.message.time), 1),
+                  l("span", Ue, R(e.message.time), 1),
                   m(ke, {
                     "base-class": "video-message",
-                    "message-class": C(e.message),
+                    "message-class": S(e.message),
                     "message-status": e.message.status,
                     "status-class": z.value,
                     "status-title": W.value
@@ -205,7 +220,7 @@ const Ee = ["messageId"], Le = ["src"], Be = {
                   key: 0,
                   class: "video-message__download-button",
                   type: "button",
-                  onClick: P(_, ["stop"])
+                  onClick: F(_, ["stop"])
                 }, [...s[7] || (s[7] = [
                   l("span", { class: "pi pi-download" }, null, -1)
                 ])])) : i("", !0)
@@ -215,7 +230,7 @@ const Ee = ["messageId"], Le = ["src"], Be = {
           ], 32),
           m(b, { name: "modal-fade" }, {
             default: d(() => [
-              a(N) && e.message.actions ? (o(), r("button", {
+              a(j) && e.message.actions ? (o(), r("button", {
                 key: 0,
                 class: "video-message__menu-button",
                 onClick: s[3] || (s[3] = (n) => M.value = !a(M))
@@ -231,17 +246,17 @@ const Ee = ["messageId"], Le = ["src"], Be = {
                 key: 0,
                 class: "video-message__context-menu",
                 actions: e.message.actions,
-                onClick: a(q)
+                onClick: a(V)
               }, null, 8, ["actions", "onClick"])) : i("", !0)
             ]),
             _: 1
           }),
-          e.message.text ? (o(), r("div", Oe, [
+          e.message.text ? (o(), r("div", $e, [
             l("p", {
               onClick: s[4] || (s[4] = //@ts-ignore
               (...n) => a(I) && a(I)(...n)),
-              innerHTML: a(H)
-            }, null, 8, je)
+              innerHTML: a(O)
+            }, null, 8, Oe)
           ])) : i("", !0),
           m(we, {
             status: e.message.status,
@@ -262,32 +277,36 @@ const Ee = ["messageId"], Le = ["src"], Be = {
           m(be, {
             reactions: e.message.reactions,
             "message-id": e.message.messageId,
+            reply: a(Se)(e.message, "message.video"),
             enabled: e.reactionsEnabled,
+            mode: e.reactionsMode,
+            "current-user-id": e.currentUserId,
+            "reaction-user-names": e.reactionUserNames,
             onToggleReaction: a(X),
             onAddReaction: a(Y),
             onRemoveReaction: a(Z)
-          }, null, 8, ["reactions", "message-id", "enabled", "onToggleReaction", "onAddReaction", "onRemoveReaction"])
+          }, null, 8, ["reactions", "message-id", "reply", "enabled", "mode", "current-user-id", "reaction-user-names", "onToggleReaction", "onAddReaction", "onRemoveReaction"])
         ], 2)
-      ], 46, Ee),
+      ], 46, Le),
       (o(), c(de, { to: "body" }, [
         m(b, { name: "modal-fade" }, {
           default: d(() => [
             x.value ? (o(), c(ye, {
               key: 0,
-              "data-theme": a(R)().theme ? a(R)().theme : "light",
+              "data-theme": a(T)().theme ? a(T)().theme : "light",
               title: e.message.alt,
               onClose: Q
             }, {
               default: d(() => [
                 l("video", {
                   ref_key: "player",
-                  ref: S,
+                  ref: C,
                   class: "video-message__modal-video",
                   src: e.message.url,
                   alt: e.message.alt,
                   controls: "",
                   autoplay: ""
-                }, null, 8, He)
+                }, null, 8, je)
               ]),
               _: 1
             }, 8, ["data-theme", "title"])) : i("", !0)
@@ -299,5 +318,5 @@ const Ee = ["messageId"], Le = ["src"], Be = {
   }
 });
 export {
-  us as default
+  gs as default
 };

package/dist/components/3_compounds/ChatInput/ChatInput.vue.js

@@ -1,7 +1,7 @@
 import t from "./ChatInput.vue2.js";
 /* empty css               */
 import o from "../../../_virtual/_plugin-vue_export-helper.js";
-const a = /* @__PURE__ */ o(t, [["__scopeId", "data-v-efefc137"]]);
+const f = /* @__PURE__ */ o(t, [["__scopeId", "data-v-db02cef9"]]);
 export {
-  a as default
+  f as default
 };

package/dist/components/3_compounds/ChatInput/ChatInput.vue2.js

@@ -1,20 +1,25 @@
-import { defineComponent as N, inject as G, ref as y, computed as x, watch as p, nextTick as f, unref as r, onMounted as U, createElementBlock as _, openBlock as b, createElementVNode as u, withDirectives as J, createVNode as w, renderSlot as T, toDisplayString as Q, withKeys as X, vModelText as Z, normalizeClass as ee } from "vue";
-import { useImmediateDebouncedRef as te } from "../../../hooks/useImmediateDebouncedRef.js";
-import { useMessageDraft as ne } from "../../../hooks/useMessageDraft.js";
+import { defineComponent as X, inject as Z, ref as f, computed as h, watch as m, nextTick as v, unref as a, onMounted as ee, createElementBlock as g, openBlock as y, createElementVNode as u, createVNode as H, renderSlot as A, toDisplayString as te, createCommentVNode as ne, withDirectives as le, withKeys as ie, normalizeClass as E, vModelText as oe } from "vue";
+import { useImmediateDebouncedRef as se } from "../../../hooks/useImmediateDebouncedRef.js";
+import { useMessageDraft as ae } from "../../../hooks/useMessageDraft.js";
 import "../../../hooks/useSearchModel.js";
 import "../../../hooks/useTheme.js";
+import { useEmojiNative as re } 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 { textToAppleEmojiHtml as ue } from "../../../functions/renderAppleEmojis.js";
 import { t as c } from "../../../locale/useLocale.js";
-import le from "./icons/SendIcon.vue.js";
-import ie from "../../2_chatinput_elements/TextFormatToolbar/TextFormatToolbar.vue.js";
-const oe = { class: "chat-input__container" }, se = ["id"], ae = ["id"], re = { class: "chat-input__inline-buttons" }, ue = {
+import ce from "./icons/SendIcon.vue.js";
+import de from "../../2_chatinput_elements/TextFormatToolbar/TextFormatToolbar.vue.js";
+const pe = { class: "chat-input__container" }, fe = ["id"], he = ["id"], me = { class: "chat-input__inline-buttons" }, ve = {
   key: 0,
   class: "chat-input__input chat-input__disabled-placeholder"
-}, ce = ["disabled", "placeholder"], de = ["disabled"], pe = { class: "" }, fe = { class: "chat-input__third-line" }, De = /* @__PURE__ */ N({
+}, ge = {
+  key: 1,
+  class: "chat-input__input-wrap"
+}, ye = ["innerHTML"], _e = ["disabled", "placeholder"], xe = ["disabled"], be = { class: "" }, Ie = { class: "chat-input__third-line" }, We = /* @__PURE__ */ X({
   __name: "ChatInput",
   props: {
     state: {
@@ -43,101 +48,103 @@ const oe = { class: "chat-input__container" }, se = ["id"], ae = ["id"], re = {
     }
   },
   emits: ["send", "typing"],
-  setup(d, { emit: A }) {
-    const h = A, m = G("chatAppId"), { resetMessage: D, getMessage: i, setMessageText: v, setForceSendMessage: F } = ne(m), n = y(), E = te("", 2e3), M = y(), a = d, P = x(() => !!(a.state == "disabled" || i().text == "" && !i().file || i().isRecording)), R = x(() => {
+  setup(d, { emit: k }) {
+    const _ = k, p = Z("chatAppId"), { resetMessage: D, getMessage: l, setMessageText: x, setForceSendMessage: F } = ae(p), { isNative: C } = re(p), n = f(), b = f(), L = se("", 2e3), P = f(), R = h(() => ue(l().text || "")), T = () => {
+      b.value && n.value && (b.value.scrollTop = n.value.scrollTop);
+    }, r = d, z = h(() => !!(r.state == "disabled" || l().text == "" && !l().file || l().isRecording)), B = h(() => {
       var t;
-      if (a.inputButtonColor)
-        return a.inputButtonColor;
-      if (!((t = a.selectedChannel) != null && t.channelId))
+      if (r.inputButtonColor)
+        return r.inputButtonColor;
+      if (!((t = r.selectedChannel) != null && t.channelId))
         return "#25D366";
-      const e = a.selectedChannel.channelId.toLowerCase();
+      const e = r.selectedChannel.channelId.toLowerCase();
       return e.includes("whatsapp") || e.includes("waba") ? "#25D366" : e.includes("telegram") ? "#37AFE2" : e.includes("sms") ? "#6C757D" : e.includes("max") ? "#4B0082" : "#25D366";
-    }), k = x(() => {
+    }), W = h(() => {
       var t;
-      if (!((t = a.selectedChannel) != null && t.channelId))
+      if (!((t = r.selectedChannel) != null && t.channelId))
         return c("component.ChatInput.InputPlaceholder");
-      const e = a.selectedChannel.channelId.toLowerCase();
+      const e = r.selectedChannel.channelId.toLowerCase();
       return e.includes("whatsapp") || e.includes("waba") ? c("component.ChatInput.WhatsappInputPlaceholder") : e.includes("telegram") ? c("component.ChatInput.TelegramInputPlaceholder") : e.includes("sms") ? c("component.ChatInput.SmsInputPlaceholder") : e.includes("max") ? c("component.ChatInput.MaxInputPlaceholder") : c("component.ChatInput.InputPlaceholder");
     });
-    p(
-      () => E.value,
+    m(
+      () => L.value,
       () => {
-        h("typing");
+        _("typing");
       }
-    ), p(
-      () => a.focusOnInputArea,
+    ), m(
+      () => r.focusOnInputArea,
       () => {
-        a.focusOnInputArea && f(() => {
-          const e = r(n);
+        r.focusOnInputArea && v(() => {
+          const e = a(n);
           e == null || e.focus();
         });
       },
       { immediate: !0 }
-    ), p(
-      () => i().text,
+    ), m(
+      () => l().text,
       () => {
-        f(() => {
+        v(() => {
           const e = n.value;
           if (!e) return;
           const t = e.scrollTop;
           e.style.height = "auto";
-          const l = getComputedStyle(e), o = parseFloat(l.fontSize) || 16, W = parseFloat(l.lineHeight) || o * 1.4, I = 40, C = W * 11, S = e.scrollHeight, O = i().text.split(`
+          const i = getComputedStyle(e), o = parseFloat(i.fontSize) || 16, q = parseFloat(i.lineHeight) || o * 1.4, S = 40, w = q * 11, M = e.scrollHeight, K = l().text.split(`
 `).length > 1, s = document.createElement("div");
-          s.style.position = "absolute", s.style.visibility = "hidden", s.style.whiteSpace = "nowrap", s.style.font = l.font, s.style.fontSize = l.fontSize, s.style.fontFamily = l.fontFamily, s.style.fontWeight = l.fontWeight, s.style.letterSpacing = l.letterSpacing, s.textContent = i().text, document.body.appendChild(s);
-          const Y = s.offsetWidth;
+          s.style.position = "absolute", s.style.visibility = "hidden", s.style.whiteSpace = "nowrap", s.style.font = i.font, s.style.fontSize = i.fontSize, s.style.fontFamily = i.fontFamily, s.style.fontWeight = i.fontWeight, s.style.letterSpacing = i.letterSpacing, s.textContent = l().text, document.body.appendChild(s);
+          const V = s.offsetWidth;
           document.body.removeChild(s);
-          const q = parseFloat(l.paddingLeft) || 0, K = parseFloat(l.paddingRight) || 0, j = e.clientWidth - q - K, V = Y > j, $ = O || V;
-          i().text.trim() && $ ? S <= C ? (e.style.height = S + "px", e.style.overflowY = "hidden") : (e.style.height = C + "px", e.style.overflowY = "auto", e.scrollTop = t) : (e.style.height = I + "px", e.style.overflowY = "hidden");
+          const $ = parseFloat(i.paddingLeft) || 0, G = parseFloat(i.paddingRight) || 0, U = e.clientWidth - $ - G, J = V > U, Q = K || J;
+          l().text.trim() && Q ? M <= w ? (e.style.height = M + "px", e.style.overflowY = "hidden") : (e.style.height = w + "px", e.style.overflowY = "auto", e.scrollTop = t) : (e.style.height = S + "px", e.style.overflowY = "hidden"), T();
         });
       },
       { immediate: !0 }
-    ), p(
-      () => i().forceSend,
+    ), m(
+      () => l().forceSend,
       () => {
-        i().forceSend && (g(), F(!1));
+        l().forceSend && (I(), F(!1));
       }
     );
-    const z = (e) => {
+    const j = (e) => {
       const t = e.target;
-      h("typing", t.value);
-    }, B = () => {
-      f(() => {
+      _("typing", t.value);
+    }, N = () => {
+      v(() => {
         const e = n.value;
         e && (e.style.height = "40px", e.style.overflowY = "hidden");
       });
     };
-    U(() => {
-      B();
+    ee(() => {
+      N();
     });
-    const H = (e) => {
+    const O = (e) => {
       if (e.shiftKey) {
         if (n.value instanceof HTMLTextAreaElement) {
           let t = n.value.selectionStart;
           t && (n.value.setRangeText(`
-`, t, t, "end"), v(n.value.value));
+`, t, t, "end"), x(n.value.value));
         }
         e.preventDefault();
       } else if (e.ctrlKey) {
         if (n.value instanceof HTMLTextAreaElement) {
           let t = n.value.selectionStart;
           t && (n.value.setRangeText(`
-`, t, t, "end"), v(n.value.value));
+`, t, t, "end"), x(n.value.value));
         }
         e.preventDefault();
       } else
-        e.preventDefault(), g();
-    }, L = (e) => {
+        e.preventDefault(), I();
+    }, Y = (e) => {
       if (n.value) {
         const t = n.value.value;
         n.value.value = e.newText;
-        const l = e.newText.length - (t.length - (e.end - e.start)), o = e.start + l;
-        v(e.newText), f(() => {
+        const i = e.newText.length - (t.length - (e.end - e.start)), o = e.start + i;
+        x(e.newText), v(() => {
           n.value && (n.value.setSelectionRange(o, o), n.value.focus());
         });
       }
-    }, g = () => {
-      var t, l;
-      const e = y(i());
+    }, I = () => {
+      var t, i;
+      const e = f(l());
       if (e.value.text != "" || e.value.file) {
         const o = {
           type: "",
@@ -147,53 +154,63 @@ const oe = { class: "chat-input__container" }, se = ["id"], ae = ["id"], re = {
           size: "",
           reply: void 0
         };
-        e.value.file ? (o.type = "message." + e.value.file.type, o.url = e.value.file.url, o.filename = e.value.file.name, o.size = (t = e.value.file.size) == null ? void 0 : t.toString(), o.text = (l = e == null ? void 0 : e.value) == null ? void 0 : l.text.trim()) : (o.type = "message.text", o.text = e.value.text.trim()), e.value.reply && (o.reply = e.value.reply), h("send", o), D(), M.value = void 0, n.value && n.value.focus();
+        e.value.file ? (o.type = "message." + e.value.file.type, o.url = e.value.file.url, o.filename = e.value.file.name, o.size = (t = e.value.file.size) == null ? void 0 : t.toString(), o.text = (i = e == null ? void 0 : e.value) == null ? void 0 : i.text.trim()) : (o.type = "message.text", o.text = e.value.text.trim()), e.value.reply && (o.reply = e.value.reply), _("send", o), D(), P.value = void 0, n.value && n.value.focus();
       }
     };
-    return (e, t) => (b(), _("div", oe, [
+    return (e, t) => (y(), g("div", pe, [
       u("div", {
-        id: "chat-input-reply-line-" + r(m),
+        id: "chat-input-reply-line-" + a(p),
         class: "chat-input__reply-line"
-      }, null, 8, se),
+      }, null, 8, fe),
       u("div", {
-        id: "chat-input-file-line-" + r(m),
+        id: "chat-input-file-line-" + a(p),
         class: "chat-input__file-line"
-      }, null, 8, ae),
-      u("div", re, [
-        T(e.$slots, "inline-buttons", {}, void 0, !0)
+      }, null, 8, he),
+      u("div", me, [
+        A(e.$slots, "inline-buttons", {}, void 0, !0)
       ]),
-      d.disabledPlaceholder && (d.state == "disabled" || r(i)().isRecording) ? (b(), _("div", ue, Q(d.disabledPlaceholder), 1)) : J((b(), _("textarea", {
-        key: 1,
-        ref_key: "refInput",
-        ref: n,
-        "onUpdate:modelValue": t[0] || (t[0] = (l) => r(i)().text = l),
-        disabled: d.state == "disabled" || r(i)().isRecording,
-        class: "chat-input__input",
-        placeholder: k.value,
-        onKeydown: X(H, ["enter"]),
-        onInput: z
-      }, null, 40, ce)), [
-        [Z, r(i)().text]
-      ]),
-      w(ie, {
+      d.disabledPlaceholder && (d.state == "disabled" || a(l)().isRecording) ? (y(), g("div", ve, te(d.disabledPlaceholder), 1)) : (y(), g("div", ge, [
+        !a(C) && a(l)().text ? (y(), g("div", {
+          key: 0,
+          ref_key: "refMirror",
+          ref: b,
+          class: "chat-input__input-mirror",
+          "aria-hidden": "true",
+          innerHTML: R.value
+        }, null, 8, ye)) : ne("", !0),
+        le(u("textarea", {
+          ref_key: "refInput",
+          ref: n,
+          "onUpdate:modelValue": t[0] || (t[0] = (i) => a(l)().text = i),
+          disabled: d.state == "disabled" || a(l)().isRecording,
+          class: E(["chat-input__input", { "chat-input__input--emoji-images": !a(C) }]),
+          placeholder: W.value,
+          onKeydown: ie(O, ["enter"]),
+          onInput: j,
+          onScroll: T
+        }, null, 42, _e), [
+          [oe, a(l)().text]
+        ])
+      ])),
+      H(de, {
         textarea: n.value,
-        onFormatApplied: L
+        onFormatApplied: Y
       }, null, 8, ["textarea"]),
       u("button", {
-        class: ee(["chat-input__button", { "chat-input__button-disabled": P.value }]),
-        disabled: r(i)().isRecording,
-        onClick: g
+        class: E(["chat-input__button", { "chat-input__button-disabled": z.value }]),
+        disabled: a(l)().isRecording,
+        onClick: I
       }, [
-        u("span", pe, [
-          w(r(le), { color: R.value }, null, 8, ["color"])
+        u("span", be, [
+          H(a(ce), { color: B.value }, null, 8, ["color"])
         ])
-      ], 10, de),
-      u("div", fe, [
-        T(e.$slots, "buttons", {}, void 0, !0)
+      ], 10, xe),
+      u("div", Ie, [
+        A(e.$slots, "buttons", {}, void 0, !0)
       ])
     ]));
   }
 });
 export {
-  De as default
+  We as default
 };

package/dist/components/3_compounds/Feed/Feed.vue.js

@@ -1,7 +1,7 @@
 import o from "./Feed.vue2.js";
 /* empty css          */
-import d from "../../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ d(o, [["__scopeId", "data-v-dd263ded"]]);
+import t from "../../../_virtual/_plugin-vue_export-helper.js";
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-7733717c"]]);
 export {
-  m as default
+  p as default
 };