@mobilon-dev/chotto 0.3.52 → 0.3.54

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

@@ -1,25 +1,26 @@
-import { defineComponent as ue, ref as k, computed as i, inject as D, unref as e, watch as me, nextTick as w, onMounted as fe, createElementBlock as c, openBlock as n, Fragment as j, createBlock as m, createCommentVNode as u, normalizeStyle as K, renderSlot as $, createVNode as b, Transition as h, withCtx as v, renderList as ye, resolveDynamicComponent as ge, createElementVNode as x, toDisplayString as be, Teleport as pe } from "vue";
-import ke from "../../2_feed_elements/DateMessageSticky/DateMessageSticky.vue.js";
-import he from "../../2_feed_elements/BaseReplyMessage/BaseReplyMessage.vue.js";
-import ve from "../../2_feed_elements/MessageKeyboard/MessageKeyboard.vue.js";
-import Se from "../../2_feed_elements/FeedKeyboard/FeedKeyboard.vue.js";
-import Re from "../../2_feed_elements/TypingMessage/TypingMessage.vue.js";
-import { useFeedButton as Be } from "./composables/useFeedButton.js";
-import { useFeedComponents as Te } from "./composables/useFeedComponents.js";
-import { useFeedGrouping as Ae } from "./composables/useFeedGrouping.js";
-import { useFeedKeyboard as Ie } from "./composables/useFeedKeyboard.js";
-import { useFeedLoadMore as Ce } from "./composables/useFeedLoadMore.js";
-import { useFeedMessageVisibility as Fe } from "./composables/useFeedMessageVisibility.js";
-import { useFeedReply as Me } from "./composables/useFeedReply.js";
-import { useFeedScroll as De } from "./composables/useFeedScroll.js";
-import { useFeedScrollTo as we } from "./composables/useFeedScrollTo.js";
-import { useStickyDate as je } from "./composables/useStickyDate.js";
-import { throttle as Ke } from "./functions/throttle.js";
-import $e from "./assets/chat-background.svg.js";
-const xe = ["id"], Oe = ["id", "onDblclick"], Ve = {
+import { defineComponent as fe, ref as k, computed as i, inject as w, unref as o, watch as ge, nextTick as j, onMounted as ye, createElementBlock as c, openBlock as l, Fragment as K, createBlock as f, createCommentVNode as u, normalizeStyle as x, renderSlot as L, withDirectives as pe, createVNode as g, createElementVNode as h, vShow as be, Transition as v, withCtx as S, renderList as ke, resolveDynamicComponent as he, toDisplayString as ve, Teleport as Se } from "vue";
+import Re from "../../2_feed_elements/DateMessageSticky/DateMessageSticky.vue.js";
+import Be from "../../2_feed_elements/BaseReplyMessage/BaseReplyMessage.vue.js";
+import Ie from "../../2_feed_elements/MessageKeyboard/MessageKeyboard.vue.js";
+import Te from "../../2_feed_elements/FeedKeyboard/FeedKeyboard.vue.js";
+import Ae from "../../2_feed_elements/TypingMessage/TypingMessage.vue.js";
+import Me from "../../1_atoms/LoadingIndicator/LoadingIndicator.vue.js";
+import { useFeedButton as Fe } from "./composables/useFeedButton.js";
+import { useFeedComponents as Ce } from "./composables/useFeedComponents.js";
+import { useFeedGrouping as De } from "./composables/useFeedGrouping.js";
+import { useFeedKeyboard as we } from "./composables/useFeedKeyboard.js";
+import { useFeedLoadMore as je } from "./composables/useFeedLoadMore.js";
+import { useFeedMessageVisibility as Ke } from "./composables/useFeedMessageVisibility.js";
+import { useFeedReply as xe } from "./composables/useFeedReply.js";
+import { useFeedScroll as Le } from "./composables/useFeedScroll.js";
+import { useFeedScrollTo as Oe } from "./composables/useFeedScrollTo.js";
+import { useStickyDate as Ve } from "./composables/useStickyDate.js";
+import { throttle as $e } from "./functions/throttle.js";
+import qe from "./assets/chat-background.svg.js";
+const ze = ["id"], Ee = { class: "message-feed__loading" }, Pe = ["id", "data-timestamp", "onDblclick"], We = {
   key: 0,
   class: "message-feed__unread-amount"
-}, qe = { style: { margin: "auto" } }, st = /* @__PURE__ */ ue({
+}, Ne = { style: { margin: "auto" } }, ct = /* @__PURE__ */ fe({
   __name: "Feed",
   props: {
     objects: {
@@ -55,7 +56,7 @@ const xe = ["id"], Oe = ["id", "onDblclick"], Ve = {
     keyboardAlign: {
       type: String,
       default: "right",
-      validator: (t) => ["left", "center", "right"].includes(t)
+      validator: (e) => ["left", "center", "right"].includes(e)
     },
     feedKeyboards: {
       type: Array,
@@ -65,7 +66,7 @@ const xe = ["id"], Oe = ["id", "onDblclick"], Ve = {
     feedKeyboardAlign: {
       type: String,
       default: "right",
-      validator: (t) => ["left", "center", "right"].includes(t)
+      validator: (e) => ["left", "center", "right"].includes(e)
     },
     chatBackground: {
       type: String,
@@ -97,225 +98,248 @@ const xe = ["id"], Oe = ["id", "onDblclick"], Ve = {
     "smsInvite",
     "delimiterRead"
   ],
-  setup(t, { emit: O }) {
-    const l = t, p = k(), r = k(), S = k(), {
+  setup(e, { emit: O }) {
+    const a = e, b = k(), r = k(), R = k(), {
       isShowButton: V,
-      isKeyboardPlace: q,
-      checkButtonVisibility: z
-    } = Be({
+      isKeyboardPlace: $,
+      checkButtonVisibility: q
+    } = Fe({
       feedRef: r,
-      keyboardRef: S
-    }), { componentsMap: E } = Te(), L = i(() => l.reactionsEnabled), { groupedObjects: P } = Ae({
-      objects: i(() => l.objects)
-    }), y = D("chatAppId"), R = D("selectedChat", void 0), B = i(() => {
-      if (R)
-        return e(R);
+      keyboardRef: R
+    }), { componentsMap: z } = Ce(), E = i(() => a.reactionsEnabled), { groupedObjects: P } = De({
+      objects: i(() => a.objects)
+    }), y = w("chatAppId"), B = w("selectedChat", void 0), I = i(() => {
+      if (B)
+        return o(B);
     });
+    function W(s) {
+      return s.timestamp;
+    }
     function N(s) {
-      var f;
-      const a = s;
-      if (!a.dialogId || !((f = B.value) != null && f.dialogs))
+      var m;
+      const n = s;
+      if (!n.dialogId || !((m = I.value) != null && m.dialogs))
         return;
-      const o = B.value.dialogs.find((g) => g.dialogId === a.dialogId);
-      return o == null ? void 0 : o.channelId;
+      const t = I.value.dialogs.find((p) => p.dialogId === n.dialogId);
+      return t == null ? void 0 : t.channelId;
     }
     const d = O, {
-      checkScrollPosition: W,
+      checkScrollPosition: G,
       startScrollWatch: T,
       stopScrollWatch: A,
-      resetAllowFlags: G
-    } = Ce({
+      resetAllowFlags: U
+    } = je({
       feedRef: r,
       emit: d,
-      isLoadingMoreRef: i(() => l.isLoadingMore)
+      isLoadingMoreRef: i(() => a.isLoadingMore)
     }), {
-      getMessage: I,
-      messageAction: J,
-      handleClickReplied: U,
-      feedObjectDoubleClick: H,
-      handleResetReply: Q
-    } = Me({
-      enableDoubleClickReply: l.enableDoubleClickReply,
+      getMessage: M,
+      messageAction: H,
+      handleClickReplied: J,
+      feedObjectDoubleClick: Q,
+      handleResetReply: X
+    } = xe({
+      enableDoubleClickReply: a.enableDoubleClickReply,
       emit: d
     });
-    function X(s) {
+    function Y(s) {
       d("smsInvite", s);
     }
-    function Y(s) {
+    function Z(s) {
       d("delimiterRead", s);
     }
     const {
-      showKeyboard: Z,
-      keyboardAction: _,
-      feedKeyboardAction: ee
-    } = Ie({
-      isKeyboardPlace: q,
-      objects: i(() => l.objects),
+      showKeyboard: _,
+      keyboardAction: ee,
+      feedKeyboardAction: te
+    } = we({
+      isKeyboardPlace: $,
+      objects: i(() => a.objects),
       emit: d
     }), {
-      showStickyDate: te,
-      stickyDateText: oe,
-      show: se
-    } = je({
+      showStickyDate: oe,
+      stickyDateText: se,
+      show: ne
+    } = Ve({
       feedRef: r,
-      trackingObjects: p
+      trackingObjects: b
     }), {
-      isInitialized: ne,
+      isInitialized: ae,
       performScrollToBottom: le,
-      ensureScrollToBottom: C,
-      initializeScroll: ae,
+      ensureScrollToBottom: F,
+      initializeScroll: ie,
       smoothScrollToBottom: re
-    } = De({
+    } = Le({
       feedRef: r,
-      objectsRef: i(() => l.objects),
-      scrollToBottomRef: i(() => l.scrollToBottom)
-    }), F = i(() => l.chatBackground ?? `data:image/svg+xml;charset=utf-8,${encodeURIComponent($e)}`);
-    function M(s = !0) {
-      z(), W(s), se();
+      objectsRef: i(() => a.objects),
+      scrollToBottomRef: i(() => a.scrollToBottom)
+    }), C = i(() => a.chatBackground ?? `data:image/svg+xml;charset=utf-8,${encodeURIComponent(qe)}`);
+    function D(s = !0) {
+      q(), G(s), ne();
     }
-    const ie = Ke(() => M(), 250);
-    function de() {
+    const de = $e(() => D(), 250);
+    function ce() {
       d("forceScrollToBottom"), re();
     }
-    const { restartObserving: ce } = Fe({
-      feedRef: r,
-      trackingObjects: p,
+    function ue(s) {
+      const n = a.objects;
+      if (s.startsWith("mid-")) {
+        const t = parseInt(s.slice(4), 10);
+        return n[t];
+      }
+      return n.find((t) => t.messageId === s);
+    }
+    const { restartObserving: me } = Ke({
+      trackingObjects: b,
       chatAppId: y,
+      getMessageById: ue,
       onMessageVisible: (s) => d("messageVisible", s)
     });
-    return me(
-      () => l.objects,
+    return ge(
+      () => a.objects,
       () => {
-        w(() => {
-          G(), M(!1), p.value = document.querySelectorAll(".tracking-message"), ce();
+        j(() => {
+          requestAnimationFrame(() => {
+            U(), D(!1), b.value = document.querySelectorAll(".tracking-message"), me();
+          });
         });
       },
       { immediate: !0 }
-    ), we({
-      targetIdRef: i(() => l.scrollTo),
+    ), Oe({
+      targetIdRef: i(() => a.scrollTo),
       feedContainerId: `feed-container-${y}`
-    }), fe(() => {
-      w(() => {
-        l.objects.length > 0 && !ne.value && ae();
+    }), ye(() => {
+      j(() => {
+        a.objects.length > 0 && !ae.value && ie();
         const s = new ResizeObserver(() => {
-          l.scrollToBottom && (le(), setTimeout(() => {
-            C();
+          a.scrollToBottom && (le(), setTimeout(() => {
+            F();
           }, 200), setTimeout(() => {
-            C();
+            F();
           }, 800));
         });
         r.value && s.observe(r.value);
       });
-    }), (s, a) => (n(), c(j, null, [
-      t.objects.length > 0 || t.typing ? (n(), c("div", {
+    }), (s, n) => (l(), c(K, null, [
+      e.objects.length > 0 || e.typing ? (l(), c("div", {
         key: 0,
-        id: "feed-container-" + e(y),
+        id: "feed-container-" + o(y),
         ref_key: "refFeed",
         ref: r,
         class: "message-feed",
-        style: K({ backgroundImage: `url(${F.value})` }),
-        onScroll: a[0] || (a[0] = (o) => e(ie)()),
-        onMousedown: a[1] || (a[1] = //@ts-ignore
-        (...o) => e(T) && e(T)(...o)),
-        onMouseup: a[2] || (a[2] = //@ts-ignore
-        (...o) => e(A) && e(A)(...o))
+        style: x({ backgroundImage: `url(${C.value})` }),
+        onScroll: n[0] || (n[0] = (t) => o(de)()),
+        onMousedown: n[1] || (n[1] = //@ts-ignore
+        (...t) => o(T) && o(T)(...t)),
+        onMouseup: n[2] || (n[2] = //@ts-ignore
+        (...t) => o(A) && o(A)(...t))
       }, [
-        $(s.$slots, "prepend", {}, void 0, !0),
-        b(h, null, {
-          default: v(() => [
-            e(te) ? (n(), m(ke, {
+        L(s.$slots, "prepend", {}, void 0, !0),
+        pe(h("div", Ee, [
+          g(Me, {
+            "is-loading": e.isLoadingMore,
+            size: "small",
+            position: "top"
+          }, null, 8, ["is-loading"])
+        ], 512), [
+          [be, e.isLoadingMore]
+        ]),
+        g(v, null, {
+          default: S(() => [
+            o(oe) && !e.isLoadingMore ? (l(), f(Re, {
               key: 0,
               class: "message-feed__sticky-date",
-              text: e(oe)
+              text: o(se)
             }, null, 8, ["text"])) : u("", !0)
           ]),
           _: 1
         }),
-        (n(!0), c(j, null, ye(e(P), (o, f) => (n(), c("div", {
-          id: JSON.stringify(o),
-          key: `${o.messageId ?? "mid"}-${f}`,
+        (l(!0), c(K, null, ke(o(P), (t, m) => (l(), c("div", {
+          id: "msg-" + (t.messageId ?? "mid-" + m),
+          key: t.messageId ?? "mid-" + m,
+          "data-timestamp": W(t),
           class: "tracking-message",
-          onDblclick: (g) => e(H)(g, o)
+          onDblclick: (p) => o(Q)(p, t)
         }, [
-          (n(), m(ge(e(E)(o.type)), {
-            key: `${o.messageId ?? "mid"}-${f}`,
+          (l(), f(he(o(z)(t.type)), {
+            key: t.messageId ?? "mid-" + m,
             class: "message-feed__message",
-            message: o,
-            "apply-style": t.applyStyle,
-            "is-first-in-series": o.isFirstInSeries,
-            "reactions-enabled": L.value,
-            "subtext-tooltip-data": t.subtextTooltipData,
-            channel: N(o),
-            onAction: e(J),
-            onReply: e(U),
-            onSmsInvite: (g) => X(o),
-            onRead: Y
+            message: t,
+            "apply-style": e.applyStyle,
+            "is-first-in-series": t.isFirstInSeries,
+            "reactions-enabled": E.value,
+            "subtext-tooltip-data": e.subtextTooltipData,
+            channel: N(t),
+            onAction: o(H),
+            onReply: o(J),
+            onSmsInvite: (p) => Y(t),
+            onRead: Z
           }, null, 40, ["message", "apply-style", "is-first-in-series", "reactions-enabled", "subtext-tooltip-data", "channel", "onAction", "onReply", "onSmsInvite"]))
-        ], 40, Oe))), 128)),
-        t.typing ? (n(), m(Re, {
+        ], 40, Pe))), 128)),
+        e.typing ? (l(), f(Ae, {
           key: 0,
           message: {
-            subText: t.typing.title,
-            avatar: t.typing.avatar
+            subText: e.typing.title,
+            avatar: e.typing.avatar
           }
         }, null, 8, ["message"])) : u("", !0),
-        b(h, null, {
-          default: v(() => [
-            e(Z) ? (n(), m(ve, {
+        g(v, null, {
+          default: S(() => [
+            o(_) ? (l(), f(Ie, {
               key: 0,
               ref_key: "keyboardRef",
-              ref: S,
+              ref: R,
               class: "message-feed__keyboard",
-              keyboard: t.objects[t.objects.length - 1].keyboard,
-              align: t.keyboardAlign,
-              onAction: e(_)
+              keyboard: e.objects[e.objects.length - 1].keyboard,
+              align: e.keyboardAlign,
+              onAction: o(ee)
             }, null, 8, ["keyboard", "align", "onAction"])) : u("", !0)
           ]),
           _: 1
         }),
-        b(h, null, {
-          default: v(() => [
-            e(V) ? (n(), c("button", {
+        g(v, null, {
+          default: S(() => [
+            o(V) ? (l(), c("button", {
               key: 0,
               class: "message-feed__button-down",
-              onClick: de
+              onClick: ce
             }, [
-              t.buttonParams ? (n(), c("div", Ve, be(t.buttonParams.unreadAmount), 1)) : u("", !0),
-              a[3] || (a[3] = x("span", { class: "pi pi-angle-down message-feed__icon-down" }, null, -1))
+              e.buttonParams ? (l(), c("div", We, ve(e.buttonParams.unreadAmount), 1)) : u("", !0),
+              n[3] || (n[3] = h("span", { class: "pi pi-angle-down message-feed__icon-down" }, null, -1))
             ])) : u("", !0)
           ]),
           _: 1
         }),
-        t.feedKeyboards && t.feedKeyboards.length > 0 ? (n(), m(Se, {
+        e.feedKeyboards && e.feedKeyboards.length > 0 ? (l(), f(Te, {
           key: 1,
-          buttons: t.feedKeyboards,
-          align: t.feedKeyboardAlign,
-          onAction: e(ee)
+          buttons: e.feedKeyboards,
+          align: e.feedKeyboardAlign,
+          onAction: o(te)
         }, null, 8, ["buttons", "align", "onAction"])) : u("", !0)
-      ], 44, xe)) : (n(), c("div", {
+      ], 44, ze)) : (l(), c("div", {
         key: 1,
         ref_key: "refFeed",
         ref: r,
         class: "message-feed",
-        style: K({ backgroundImage: `url(${F.value})` })
+        style: x({ backgroundImage: `url(${C.value})` })
       }, [
-        x("div", qe, [
-          $(s.$slots, "empty-feed", {}, void 0, !0)
+        h("div", Ne, [
+          L(s.$slots, "empty-feed", {}, void 0, !0)
         ])
       ], 4)),
-      e(I)().reply ? (n(), m(pe, {
+      o(M)().reply ? (l(), f(Se, {
         key: 2,
-        to: "#chat-input-reply-line-" + e(y)
+        to: "#chat-input-reply-line-" + o(y)
       }, [
-        b(he, {
+        g(Be, {
           class: "chat-input-reply",
-          message: e(I)().reply,
-          onReset: e(Q)
+          message: o(M)().reply,
+          onReset: o(X)
         }, null, 8, ["message", "onReset"])
       ], 8, ["to"])) : u("", !0)
     ], 64));
   }
 });
 export {
-  st as default
+  ct as default
 };

package/dist/components/3_compounds/Feed/composables/useFeedLoadMore.js

@@ -1,62 +1,65 @@
-import { ref as o, watch as d, nextTick as B, unref as v } from "vue";
-function W({ feedRef: u, emit: i, isLoadingMoreRef: p }) {
-  const t = o(!1), s = o(!1), n = o(!1), r = o(!1), h = o(0), T = o(0), c = o(!1), f = o(!1), g = (e = !0) => {
+import { ref as t, watch as m, unref as v, nextTick as w } from "vue";
+function F({ feedRef: u, emit: i, isLoadingMoreRef: p }) {
+  const s = t(!1), a = t(!1), n = t(!1), r = t(!1), h = t(0), T = t(0), c = t(!1), f = t(!1), d = (o = !0) => {
     const l = v(u);
     if (!l) return;
-    const a = l.scrollHeight - l.scrollTop - l.clientHeight;
-    r.value ? (l.scrollTop < 300 && (n.value = !1, t.value = !1), a < 300 && (s.value = !1, n.value = !0)) : e && (l.scrollTop < 300 && (h.value = l.scrollHeight, T.value = l.scrollTop, c.value = !0, t.value = !1), a < 300 && (s.value = !1));
-  }, S = (e = 0) => {
-    B(() => {
-      setTimeout(() => {
-        try {
-          const l = v(u);
-          if (!l || !c.value) return;
-          const a = l.style.scrollBehavior;
-          l.style.scrollBehavior = "auto";
-          const m = l.scrollHeight - h.value;
-          l.scrollTop = T.value + m, setTimeout(() => {
-            l.style.scrollBehavior = a || "auto";
-          }, 50);
-        } finally {
-          c.value = !1, f.value = !0, setTimeout(() => {
-            f.value = !1;
-          }, 500);
-        }
-      }, e);
-    });
+    const e = l.scrollHeight - l.scrollTop - l.clientHeight;
+    r.value ? (l.scrollTop < 300 && (n.value = !1, s.value = !1), e < 300 && (a.value = !1, n.value = !0)) : o && (l.scrollTop < 300 && (h.value = l.scrollHeight, T.value = l.scrollTop, c.value = !0, s.value = !1), e < 300 && (a.value = !1));
+  }, S = (o = 0) => {
+    const l = () => {
+      w(() => {
+        requestAnimationFrame(() => {
+          try {
+            const e = v(u);
+            if (!e || !c.value) return;
+            const g = e.style.scrollBehavior;
+            e.style.scrollBehavior = "auto";
+            const B = e.scrollHeight - h.value;
+            e.scrollTop = T.value + B, setTimeout(() => {
+              e.style.scrollBehavior = g || "auto";
+            }, 50);
+          } finally {
+            c.value = !1, f.value = !0, setTimeout(() => {
+              f.value = !1;
+            }, 500);
+          }
+        });
+      });
+    };
+    o > 0 ? setTimeout(l, o) : l();
   };
-  return i && d(
-    () => [s.value, t.value],
+  return i && m(
+    () => [a.value, s.value],
     () => {
-      s.value || i("loadMoreDown"), t.value || i("loadMore");
+      a.value || i("loadMoreDown"), s.value || i("loadMore");
     }
-  ), p && d(
+  ), p && m(
     () => p.value,
-    (e, l) => {
-      l === !0 && e === !1 && S(0);
+    (o, l) => {
+      l === !0 && o === !1 && S(0);
     }
   ), {
-    allowLoadMoreTop: t,
-    allowLoadMoreBottom: s,
+    allowLoadMoreTop: s,
+    allowLoadMoreBottom: a,
     movingDown: n,
     isScrollByMouseButton: r,
     pendingTopRestore: c,
     topLoadJustHappened: f,
-    checkScrollPosition: g,
+    checkScrollPosition: d,
     restoreScrollPosition: S,
-    startScrollWatch: (e) => {
+    startScrollWatch: (o) => {
       const l = v(u);
       if (!l) return;
-      (e.offsetX > l.clientWidth || e.offsetY > l.clientHeight) && (r.value = !0);
+      (o.offsetX > l.clientWidth || o.offsetY > l.clientHeight) && (r.value = !0);
     },
     stopScrollWatch: () => {
       r.value = !1;
     },
     resetAllowFlags: () => {
-      t.value = !0, s.value = !0;
+      s.value = !0, a.value = !0;
     }
   };
 }
 export {
-  W as useFeedLoadMore
+  F as useFeedLoadMore
 };

package/dist/components/3_compounds/Feed/composables/useFeedMessageVisibility.js

@@ -1,33 +1,31 @@
-function v({
-  trackingObjects: s,
-  chatAppId: a,
-  onMessageVisible: c
+function f({
+  trackingObjects: t,
+  chatAppId: c,
+  getMessageById: a,
+  onMessageVisible: g
 }) {
-  const i = (e) => {
+  const d = (e) => {
     e.forEach((n) => {
-      if (n.isIntersecting)
-        try {
-          const r = JSON.parse(n.target.id);
-          c(r);
-        } catch (r) {
-          console.error("Failed to parse message from IntersectionObserver:", r);
-        }
+      if (n.isIntersecting) {
+        const s = n.target.id, v = s.startsWith("msg-") ? s.slice(4) : s, i = a(v);
+        i && g(i);
+      }
     });
-  }, g = {
-    root: document.getElementById("feed-container-" + a),
+  }, l = {
+    root: document.getElementById("feed-container-" + c),
     rootMargin: "5px",
     threshold: 0
-  }, o = new IntersectionObserver(i, g), t = () => {
-    s.value && s.value.forEach((e) => o.observe(e));
+  }, o = new IntersectionObserver(d, l), r = () => {
+    t.value && t.value.forEach((e) => o.observe(e));
   };
   return {
     observer: o,
-    observeMessages: t,
+    observeMessages: r,
     restartObserving: () => {
-      t();
+      r();
     }
   };
 }
 export {
-  v as useFeedMessageVisibility
+  f as useFeedMessageVisibility
 };