@mobilon-dev/chotto 0.3.101 → 0.3.103

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

@@ -1,28 +1,29 @@
-import { defineComponent as we, inject as Ce, watch as d, ref as E, computed as _, nextTick as S, unref as u, onMounted as Ae, onUnmounted as Ee, createElementBlock as k, openBlock as F, createElementVNode as h, createVNode as O, normalizeClass as j, createBlock as Fe, createCommentVNode as U, renderSlot as Y, toDisplayString as Me, withDirectives as Re, withKeys as He, vModelText as ke } from "vue";
-import { useImmediateDebouncedRef as Le } from "../../../hooks/useImmediateDebouncedRef.js";
-import { useMessageDraft as De, commitChatDraftToList as Pe } from "../../../hooks/useMessageDraft.js";
+import { defineComponent as Be, inject as Ne, watch as p, ref as _, computed as x, provide as je, nextTick as b, unref as a, onMounted as Ke, onUnmounted as $e, createElementBlock as C, openBlock as S, createElementVNode as u, createVNode as z, normalizeClass as O, toDisplayString as U, createCommentVNode as V, Fragment as Ge, renderList as Oe, createBlock as Ue, renderSlot as le, withDirectives as Ve, withKeys as Ye, vModelText as Xe } from "vue";
+import { useImmediateDebouncedRef as Je } from "../../../hooks/useImmediateDebouncedRef.js";
+import { MAX_ATTACHED_FILES as ie, useMessageDraft as Qe, getDraftFiles as Ze, commitChatDraftToList as et } from "../../../hooks/useMessageDraft.js";
 import "../../../hooks/useSearchModel.js";
 import "../../../hooks/useTheme.js";
-import { useEmojiNative as We } from "../../../hooks/useEmojiNative.js";
+import { useEmojiNative as tt } from "../../../hooks/useEmojiNative.js";
 /* empty css                              */
 /* empty css                                              */
-import { t as I } from "../../../locale/useLocale.js";
+import { t as h } from "../../../locale/useLocale.js";
 /* 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 qe, textContainsEmoji as Be, previousGraphemeIndex as V, nextGraphemeIndex as $, snapIndexToGrapheme as J } from "../../../functions/renderAppleEmojis.js";
-import { hideEditPreview as je } from "../../../hooks/messages/useStartEdit.js";
-import ze from "./icons/SendIcon.vue.js";
-import Ke from "../../2_chatinput_elements/TextFormatToolbar/TextFormatToolbar.vue.js";
-import Ne from "../../2_chatinput_elements/FilePreview/FilePreview.vue.js";
-const Ge = { class: "chat-input__container" }, Oe = ["id"], Ue = ["id"], Ye = { class: "chat-input__inline-buttons" }, Ve = {
+import { textToAppleEmojiHtml as nt, textContainsEmoji as lt, previousGraphemeIndex as oe, nextGraphemeIndex as se, snapIndexToGrapheme as ae } from "../../../functions/renderAppleEmojis.js";
+import { hideEditPreview as it } from "../../../hooks/messages/useStartEdit.js";
+import ot from "./icons/SendIcon.vue.js";
+import re from "./icons/ArrowIcon.vue.js";
+import st from "../../2_chatinput_elements/TextFormatToolbar/TextFormatToolbar.vue.js";
+import at from "../../2_chatinput_elements/FilePreview/FilePreview.vue.js";
+const rt = { class: "chat-input__container" }, ut = ["id"], ct = ["id"], dt = { class: "chat-input__file-counter" }, ft = { class: "chat-input__file-chips-wrap" }, pt = ["aria-label"], ht = ["aria-label"], mt = { class: "chat-input__inline-buttons" }, vt = {
   key: 0,
   class: "chat-input__input chat-input__disabled-placeholder"
-}, $e = {
+}, gt = {
   key: 1,
   class: "chat-input__input-wrap"
-}, Je = ["innerHTML"], Qe = ["disabled", "placeholder"], Xe = ["disabled"], Ze = { class: "" }, et = { class: "chat-input__third-line" }, z = 40, _t = /* @__PURE__ */ we({
+}, yt = ["innerHTML"], _t = ["disabled", "placeholder"], xt = ["disabled"], St = { class: "" }, It = { class: "chat-input__third-line" }, Y = 40, Kt = /* @__PURE__ */ Be({
   __name: "ChatInput",
   props: {
     state: {
@@ -48,333 +49,441 @@ const Ge = { class: "chat-input__container" }, Oe = ["id"], Ue = ["id"], Ye = {
       type: String,
       required: !1,
       default: null
+    },
+    maxAttachedFiles: {
+      type: Number,
+      required: !1,
+      default: ie
     }
   },
   emits: ["send", "typing"],
-  setup(T, { emit: Q }) {
-    const L = Q, b = Ce("chatAppId"), { resetMessage: X, getMessage: l, setMessageText: M, setForceSendMessage: Z, resetEdit: ee, resetMessageFile: te } = De(b), { isNative: ne, emojiSrc: ie } = We(b);
-    let K = l().id;
-    d(
-      () => l().id,
+  setup(E, { emit: ue }) {
+    const H = ue, M = Ne("chatAppId"), { resetMessage: ce, getMessage: o, setMessageText: D, setForceSendMessage: de, resetEdit: fe, removeMessageFile: pe } = Qe(M), { isNative: he, emojiSrc: me } = tt(M);
+    let X = o().id;
+    p(
+      () => o().id,
       (e) => {
-        K = e;
+        X = e;
       }
     );
-    const n = E(), m = E(), v = E(null), w = E(!1), oe = Le("", 2e3), D = _(() => {
-      var e;
-      return (e = l().file) == null ? void 0 : e.preview;
-    }), le = _(
-      () => qe(l().text || "", v.value, ie.value)
-    ), g = _(
-      () => !ne.value && Be(l().text || "")
-    ), c = () => {
-      if (!m.value || !n.value) return;
-      const e = n.value, t = m.value, o = Math.max(0, e.offsetWidth - e.clientWidth);
-      t.style.right = o > 0 ? `${o}px` : "", t.scrollTop = e.scrollTop;
+    const l = _(), F = _(), R = _(), T = _(null), k = _(!1), ve = Je("", 2e3), B = _(!1), N = _(!1);
+    let m = null;
+    const v = x(() => Ze(o()));
+    function W() {
+      const e = R.value;
+      if (!e) {
+        B.value = !1, N.value = !1;
+        return;
+      }
+      const t = e.scrollWidth - e.clientWidth;
+      B.value = e.scrollLeft > 1, N.value = t - e.scrollLeft > 1;
+    }
+    function ge(e) {
+      const t = e.firstElementChild;
+      if (!t) return e.clientWidth;
+      const n = parseFloat(getComputedStyle(e).gap) || 8;
+      return t.offsetWidth + n;
+    }
+    function J(e) {
+      const t = R.value;
+      if (!t) return;
+      const n = ge(t);
+      t.scrollBy({ left: e === "right" ? n : -n, behavior: "smooth" });
+    }
+    function Q() {
+      m == null || m.disconnect();
+      const e = R.value;
+      e && (m = new ResizeObserver(() => W()), m.observe(e));
+    }
+    function ye(e) {
+      return e.preview ?? {
+        isImage: !1,
+        isVideo: !1,
+        isAudio: !1,
+        fileName: e.name,
+        fileSize: ""
+      };
+    }
+    const _e = x(
+      () => nt(o().text || "", T.value, me.value)
+    ), A = x(
+      () => !he.value && lt(o().text || "")
+    ), g = () => {
+      if (!F.value || !l.value) return;
+      const e = l.value, t = F.value, n = Math.max(0, e.offsetWidth - e.clientWidth);
+      t.style.right = n > 0 ? `${n}px` : "", t.scrollTop = e.scrollTop;
     };
-    let y = 0;
-    function P() {
-      v.value = null;
+    let w = 0;
+    function j() {
+      T.value = null;
     }
-    function se(e = "nearest") {
-      const t = n.value;
-      if (!t || !g.value) return;
-      const o = t.value, i = J(o, t.selectionStart, e), r = J(o, t.selectionEnd, e);
-      (i !== t.selectionStart || r !== t.selectionEnd) && t.setSelectionRange(i, r);
+    function xe(e = "nearest") {
+      const t = l.value;
+      if (!t || !A.value) return;
+      const n = t.value, i = ae(n, t.selectionStart, e), s = ae(n, t.selectionEnd, e);
+      (i !== t.selectionStart || s !== t.selectionEnd) && t.setSelectionRange(i, s);
     }
-    function W() {
-      se("nearest"), f();
+    function K() {
+      xe("nearest"), I();
     }
-    function ae(e) {
-      if (!g.value || e.key !== "ArrowLeft" && e.key !== "ArrowRight" || e.altKey || e.metaKey || e.ctrlKey) return;
-      const t = n.value;
+    function Se(e) {
+      if (!A.value || e.key !== "ArrowLeft" && e.key !== "ArrowRight" || e.altKey || e.metaKey || e.ctrlKey) return;
+      const t = l.value;
       if (!t) return;
-      const o = t.value, i = t.selectionStart !== t.selectionEnd;
+      const n = t.value, i = t.selectionStart !== t.selectionEnd;
       if (e.shiftKey) {
-        requestAnimationFrame(() => W());
+        requestAnimationFrame(() => K());
         return;
       }
       if (i) {
         e.preventDefault();
-        const x = e.key === "ArrowLeft" ? t.selectionStart : t.selectionEnd, A = e.key === "ArrowLeft" ? V(o, x) : $(o, x);
-        t.setSelectionRange(A, A), f();
+        const f = e.key === "ArrowLeft" ? t.selectionStart : t.selectionEnd, y = e.key === "ArrowLeft" ? oe(n, f) : se(n, f);
+        t.setSelectionRange(y, y), I();
         return;
       }
       e.preventDefault();
-      const r = t.selectionStart, p = e.key === "ArrowLeft" ? V(o, r) : $(o, r);
-      t.setSelectionRange(p, p), f();
+      const s = t.selectionStart, d = e.key === "ArrowLeft" ? oe(n, s) : se(n, s);
+      t.setSelectionRange(d, d), I();
     }
-    function f() {
-      if (!g.value) {
-        P();
+    function I() {
+      if (!A.value) {
+        j();
         return;
       }
-      y && cancelAnimationFrame(y), y = requestAnimationFrame(() => {
-        var p;
-        y = 0;
-        const e = n.value;
+      w && cancelAnimationFrame(w), w = requestAnimationFrame(() => {
+        var d;
+        w = 0;
+        const e = l.value;
         if (!e) {
-          P();
+          j();
           return;
         }
-        const t = e.selectionStart, o = e.selectionEnd;
-        if (t === o) {
-          v.value !== null && (v.value = null, S(c));
+        const t = e.selectionStart, n = e.selectionEnd;
+        if (t === n) {
+          T.value !== null && (T.value = null, b(g));
           return;
         }
-        const i = v.value;
-        if (i && i.start === t && i.end === o) return;
-        const r = ((p = m.value) == null ? void 0 : p.scrollTop) ?? 0;
-        v.value = { start: t, end: o }, S(() => {
-          m.value && (m.value.scrollTop = r), c();
+        const i = T.value;
+        if (i && i.start === t && i.end === n) return;
+        const s = ((d = F.value) == null ? void 0 : d.scrollTop) ?? 0;
+        T.value = { start: t, end: n }, b(() => {
+          F.value && (F.value.scrollTop = s), g();
         });
       });
     }
-    function re(e) {
-      e.buttons && f();
+    function Ie(e) {
+      e.buttons && I();
     }
-    function N() {
-      document.activeElement === n.value && f();
+    function Z() {
+      document.activeElement === l.value && I();
     }
-    const a = T, ue = _(() => !!(a.state == "disabled" || l().text == "" && !l().file || l().isRecording)), ce = _(() => {
+    const c = E, ee = x(() => {
+      const e = Number(c.maxAttachedFiles);
+      return Number.isFinite(e) && e > 0 ? Math.floor(e) : ie;
+    });
+    je("maxAttachedFiles", ee);
+    const be = x(
+      () => h("component.ChatInput.FilesSelectedCount").replace("{count}", String(v.value.length)).replace("{max}", String(ee.value))
+    ), Ce = x(() => !!(c.state == "disabled" || o().text == "" && !v.value.length || o().isRecording)), Fe = x(() => {
       var t;
-      if (a.inputButtonColor)
-        return a.inputButtonColor;
-      if (!((t = a.selectedChannel) != null && t.channelId))
+      if (c.inputButtonColor)
+        return c.inputButtonColor;
+      if (!((t = c.selectedChannel) != null && t.channelId))
         return "#25D366";
-      const e = a.selectedChannel.channelId.toLowerCase();
+      const e = c.selectedChannel.channelId.toLowerCase();
       return e.includes("whatsapp") || e.includes("waba") ? "#25D366" : e.includes("telegram") ? "#37AFE2" : e.includes("sms") ? "#6C757D" : e.includes("max") ? "#4B0082" : "#25D366";
-    }), de = _(() => {
+    }), Te = x(() => {
       var t;
-      if (!((t = a.selectedChannel) != null && t.channelId))
-        return I("component.ChatInput.InputPlaceholder");
-      const e = a.selectedChannel.channelId.toLowerCase();
-      return e.includes("whatsapp") || e.includes("waba") ? I("component.ChatInput.WhatsappInputPlaceholder") : e.includes("telegram") ? I("component.ChatInput.TelegramInputPlaceholder") : e.includes("sms") ? I("component.ChatInput.SmsInputPlaceholder") : e.includes("max") ? I("component.ChatInput.MaxInputPlaceholder") : I("component.ChatInput.InputPlaceholder");
+      if (!((t = c.selectedChannel) != null && t.channelId))
+        return h("component.ChatInput.InputPlaceholder");
+      const e = c.selectedChannel.channelId.toLowerCase();
+      return e.includes("whatsapp") || e.includes("waba") ? h("component.ChatInput.WhatsappInputPlaceholder") : e.includes("telegram") ? h("component.ChatInput.TelegramInputPlaceholder") : e.includes("sms") ? h("component.ChatInput.SmsInputPlaceholder") : e.includes("max") ? h("component.ChatInput.MaxInputPlaceholder") : h("component.ChatInput.InputPlaceholder");
     });
-    d(
-      () => oe.value,
+    p(
+      () => ve.value,
       () => {
-        L("typing");
+        H("typing");
       }
-    ), d(
-      () => {
-        var e;
-        return (e = l().edit) == null ? void 0 : e.messageId;
-      },
-      (e, t) => {
-        e != null && e !== t && (w.value = !0, S(() => {
-          if (!w.value) return;
-          const o = n.value;
-          o && (C(o), w.value = !1, H(o), requestAnimationFrame(() => H(o)));
-        }));
+    );
+    function te(e = !1) {
+      b(() => {
+        if (e && !k.value) return;
+        const t = l.value;
+        t && (L(t), e && (k.value = !1), q(t), requestAnimationFrame(() => q(t)));
+      });
+    }
+    p(
+      () => o().edit,
+      (e) => {
+        (e == null ? void 0 : e.messageId) != null && (k.value = !0, te(!0));
       }
-    ), d(
-      () => a.focusOnInputArea,
+    ), p(
+      () => o().reply,
+      (e) => {
+        (e == null ? void 0 : e.messageId) != null && te();
+      }
+    ), p(
+      () => c.focusOnInputArea,
       () => {
-        a.focusOnInputArea && S(() => {
-          const e = u(n);
+        c.focusOnInputArea && b(() => {
+          const e = a(l);
           e == null || e.focus();
         });
       },
       { immediate: !0 }
-    ), d(
-      () => l().text,
+    ), p(
+      () => o().text,
       () => {
-        const e = n.value;
-        e && (C(e), w.value && (w.value = !1, H(e), requestAnimationFrame(() => H(e))));
+        const e = l.value;
+        e && (L(e), k.value && (k.value = !1, q(e), requestAnimationFrame(() => q(e))));
       },
       { immediate: !0, flush: "post" }
-    ), d(
-      () => l().id,
+    ), p(
+      () => o().id,
       () => {
-        const e = n.value;
-        e && (R(e), requestAnimationFrame(() => {
-          const t = n.value;
-          t && C(t);
+        const e = l.value;
+        e && (P(e), requestAnimationFrame(() => {
+          const t = l.value;
+          t && L(t);
         }));
       }
-    ), d(g, (e) => {
-      e && S(() => {
-        const t = n.value;
+    ), p(A, (e) => {
+      e && b(() => {
+        const t = l.value;
         if (!t) return;
-        const o = t.scrollTop;
-        C(t), t.scrollTop = o, c(), requestAnimationFrame(c);
+        const n = t.scrollTop;
+        L(t), t.scrollTop = n, g(), requestAnimationFrame(g);
       });
     });
-    function R(e) {
-      const t = l().inputHeight;
-      e.style.height = (t || z) + "px", (!t || t <= z) && (e.style.overflowY = "hidden");
+    function P(e) {
+      const t = o().inputHeight;
+      e.style.height = (t || Y) + "px", (!t || t <= Y) && (e.style.overflowY = "hidden");
     }
-    function fe(e) {
+    function Ae(e) {
       const t = parseFloat(e.style.height);
-      Number.isFinite(t) && (l().inputHeight = t);
+      Number.isFinite(t) && (o().inputHeight = t);
     }
-    function C(e) {
-      const t = l().text || "";
+    function L(e) {
+      const t = o().text || "";
       if (e.value !== t || e.clientWidth === 0) {
-        R(e);
+        P(e);
         return;
       }
-      const o = e.scrollTop;
+      const n = e.scrollTop;
       e.style.height = "auto";
-      const i = getComputedStyle(e), r = parseFloat(i.fontSize) || 16, p = parseFloat(i.lineHeight) || r * 1.4, x = z, A = p * 11, B = e.scrollHeight, xe = t.split(`
-`).length > 1, s = document.createElement("div");
-      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 = t, document.body.appendChild(s);
-      const _e = s.offsetWidth;
-      document.body.removeChild(s);
-      const Se = parseFloat(i.paddingLeft) || 0, Ie = parseFloat(i.paddingRight) || 0, Te = e.clientWidth - Se - Ie, be = _e > Te, G = xe || be;
-      if (G && B <= x + 1) {
-        R(e);
+      const i = getComputedStyle(e), s = parseFloat(i.fontSize) || 16, d = parseFloat(i.lineHeight) || s * 1.4, f = Y, y = d * 11, G = e.scrollHeight, He = t.split(`
+`).length > 1, r = document.createElement("div");
+      r.style.position = "absolute", r.style.visibility = "hidden", r.style.whiteSpace = "nowrap", r.style.font = i.font, r.style.fontSize = i.fontSize, r.style.fontFamily = i.fontFamily, r.style.fontWeight = i.fontWeight, r.style.letterSpacing = i.letterSpacing, r.textContent = t, document.body.appendChild(r);
+      const De = r.offsetWidth;
+      document.body.removeChild(r);
+      const We = parseFloat(i.paddingLeft) || 0, Pe = parseFloat(i.paddingRight) || 0, qe = e.clientWidth - We - Pe, ze = De > qe, ne = He || ze;
+      if (ne && G <= f + 1) {
+        P(e);
         return;
       }
-      t.trim() && G ? B <= A ? (e.style.height = B + "px", e.style.overflowY = "hidden") : (e.style.height = A + "px", e.style.overflowY = "auto", e.scrollTop = o) : (e.style.height = x + "px", e.style.overflowY = "hidden"), fe(e), c(), requestAnimationFrame(c);
+      t.trim() && ne ? G <= y ? (e.style.height = G + "px", e.style.overflowY = "hidden") : (e.style.height = y + "px", e.style.overflowY = "auto", e.scrollTop = n) : (e.style.height = f + "px", e.style.overflowY = "hidden"), Ae(e), g(), requestAnimationFrame(g);
     }
-    function H(e) {
-      if (a.state === "disabled" || l().isRecording) return;
+    function q(e) {
+      if (c.state === "disabled" || o().isRecording) return;
       const t = e.value.length;
-      e.focus(), e.setSelectionRange(t, t), e.scrollTop = e.scrollHeight, c();
+      e.focus(), e.setSelectionRange(t, t), e.scrollTop = e.scrollHeight, g();
     }
-    d(
-      () => l().forceSend,
+    p(
+      () => o().forceSend,
       () => {
-        l().forceSend && (q(), Z(!1));
+        o().forceSend && ($(), de(!1));
       }
     );
-    const pe = (e) => {
+    const we = (e) => {
       const t = e.target;
-      L("typing", t.value), f();
+      H("typing", t.value), I();
     };
-    Ae(() => {
-      const e = n.value;
-      e && (R(e), C(e)), document.addEventListener("selectionchange", N);
-    }), Ee(() => {
-      Pe(K), document.removeEventListener("selectionchange", N), y && cancelAnimationFrame(y);
+    p(
+      v,
+      (e, t) => {
+        b(() => {
+          Q(), W();
+          const n = R.value;
+          n && e.length > ((t == null ? void 0 : t.length) ?? 0) && n.scrollTo({ left: n.scrollWidth, behavior: "smooth" });
+        });
+      },
+      { flush: "post" }
+    ), Ke(() => {
+      const e = l.value;
+      e && (P(e), L(e)), Q(), W(), document.addEventListener("selectionchange", Z);
+    }), $e(() => {
+      et(X), document.removeEventListener("selectionchange", Z), m == null || m.disconnect(), w && cancelAnimationFrame(w);
     });
-    const he = (e) => {
+    const Ee = (e) => {
       if (e.shiftKey) {
-        if (n.value instanceof HTMLTextAreaElement) {
-          let t = n.value.selectionStart;
-          t && (n.value.setRangeText(`
-`, t, t, "end"), M(n.value.value));
+        if (l.value instanceof HTMLTextAreaElement) {
+          let t = l.value.selectionStart;
+          t && (l.value.setRangeText(`
+`, t, t, "end"), D(l.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"), M(n.value.value));
+        if (l.value instanceof HTMLTextAreaElement) {
+          let t = l.value.selectionStart;
+          t && (l.value.setRangeText(`
+`, t, t, "end"), D(l.value.value));
         }
         e.preventDefault();
       } else
-        e.preventDefault(), q();
-    }, me = (e) => {
-      if (n.value) {
-        const t = n.value.value;
-        n.value.value = e.newText;
-        const o = e.newText.length - (t.length - (e.end - e.start)), i = e.start + o;
-        M(e.newText), S(() => {
-          n.value && (n.value.setSelectionRange(i, i), n.value.focus());
+        e.preventDefault(), $();
+    }, Me = (e) => {
+      if (l.value) {
+        const t = l.value.value;
+        l.value.value = e.newText;
+        const n = e.newText.length - (t.length - (e.end - e.start)), i = e.start + n;
+        D(e.newText), b(() => {
+          l.value && (l.value.setSelectionRange(i, i), l.value.focus());
         });
       }
     };
-    function ve() {
-      te();
+    function Re(e) {
+      pe(e);
     }
-    function ge() {
-      ee(), M(""), je(b), n.value && n.value.focus();
+    function ke() {
+      fe(), D(""), it(M), l.value && l.value.focus();
     }
-    function ye() {
-      const e = l();
+    function Le() {
+      const e = o();
       return e.edit ? (e.text ?? "").trim() === (e.edit.text ?? "").trim() : !1;
     }
-    const q = () => {
-      var t, o;
-      const e = E(l());
-      if (e.value.edit && ye()) {
-        ge();
+    const $ = () => {
+      const e = _(o());
+      if (e.value.edit && Le() && !v.value.length) {
+        ke();
         return;
       }
-      if (e.value.text != "" || e.value.file) {
-        const i = {
+      if (e.value.text != "" || v.value.length) {
+        const t = {
           type: "",
           text: "",
           url: "",
           filename: "",
           size: "",
           reply: void 0
-        };
-        e.value.file ? (i.type = "message." + e.value.file.type, i.url = e.value.file.url, i.filename = e.value.file.name, i.size = (t = e.value.file.size) == null ? void 0 : t.toString(), i.text = (o = e == null ? void 0 : e.value) == null ? void 0 : o.text.trim()) : (i.type = "message.text", i.text = e.value.text.trim()), e.value.reply && (i.reply = e.value.reply), e.value.edit && (i.edit = e.value.edit), L("send", i), X(), n.value && n.value.focus();
+        }, n = v.value;
+        if (n.length) {
+          const i = e.value.text.trim();
+          n.forEach((s, d) => {
+            var y;
+            const f = {
+              type: "message." + s.type,
+              url: s.url,
+              filename: s.name,
+              size: (y = s.size) == null ? void 0 : y.toString(),
+              text: d === 0 ? i : ""
+            };
+            d === 0 && (e.value.reply && (f.reply = e.value.reply), e.value.edit && (f.edit = e.value.edit)), H("send", f);
+          });
+        } else
+          t.type = "message.text", t.text = e.value.text.trim(), e.value.reply && (t.reply = e.value.reply), e.value.edit && (t.edit = e.value.edit), H("send", t);
+        ce(), l.value && l.value.focus();
       }
     };
-    return (e, t) => (F(), k("div", Ge, [
-      h("div", {
-        id: "chat-input-reply-line-" + u(b),
+    return (e, t) => (S(), C("div", rt, [
+      u("div", {
+        id: "chat-input-reply-line-" + a(M),
         class: "chat-input__reply-line"
-      }, null, 8, Oe),
-      h("div", {
-        id: "chat-input-file-line-" + u(b),
-        class: j(["chat-input__file-line", { "chat-input__file-line--visible": !!D.value }])
+      }, null, 8, ut),
+      u("div", {
+        id: "chat-input-file-line-" + a(M),
+        class: O(["chat-input__file-line", { "chat-input__file-line--visible": v.value.length > 0 }])
       }, [
-        D.value ? (F(), Fe(Ne, {
-          key: 0,
-          "file-info": D.value,
-          onReset: ve
-        }, null, 8, ["file-info"])) : U("", !0)
-      ], 10, Ue),
-      h("div", Ye, [
-        Y(e.$slots, "inline-buttons", {}, void 0, !0)
+        u("span", dt, [
+          u("span", null, U(a(h)("component.ChatInput.FilesSelected")), 1),
+          u("span", null, U(be.value), 1)
+        ]),
+        u("div", ft, [
+          B.value ? (S(), C("button", {
+            key: 0,
+            type: "button",
+            class: "chat-input__file-scroll chat-input__file-scroll--left",
+            "aria-label": a(h)("component.ChatInput.FilesScrollLeft"),
+            onClick: t[0] || (t[0] = (n) => J("left"))
+          }, [
+            z(a(re))
+          ], 8, pt)) : V("", !0),
+          u("div", {
+            ref_key: "refFileChips",
+            ref: R,
+            class: "chat-input__file-chips",
+            onScroll: W
+          }, [
+            (S(!0), C(Ge, null, Oe(v.value, (n, i) => (S(), Ue(at, {
+              key: (n.url || n.name || "") + "-" + i,
+              "file-info": ye(n),
+              onReset: (s) => Re(i)
+            }, null, 8, ["file-info", "onReset"]))), 128))
+          ], 544),
+          N.value ? (S(), C("button", {
+            key: 1,
+            type: "button",
+            class: "chat-input__file-scroll chat-input__file-scroll--right",
+            "aria-label": a(h)("component.ChatInput.FilesScrollRight"),
+            onClick: t[1] || (t[1] = (n) => J("right"))
+          }, [
+            z(a(re))
+          ], 8, ht)) : V("", !0)
+        ])
+      ], 10, ct),
+      u("div", mt, [
+        le(e.$slots, "inline-buttons", {}, void 0, !0)
       ]),
-      T.disabledPlaceholder && (T.state == "disabled" || u(l)().isRecording) ? (F(), k("div", Ve, Me(T.disabledPlaceholder), 1)) : (F(), k("div", $e, [
-        g.value ? (F(), k("div", {
+      E.disabledPlaceholder && (E.state == "disabled" || a(o)().isRecording) ? (S(), C("div", vt, U(E.disabledPlaceholder), 1)) : (S(), C("div", gt, [
+        A.value ? (S(), C("div", {
           key: 0,
           ref_key: "refMirror",
-          ref: m,
+          ref: F,
           class: "chat-input__input-mirror",
           "aria-hidden": "true",
-          innerHTML: le.value
-        }, null, 8, Je)) : U("", !0),
-        Re(h("textarea", {
+          innerHTML: _e.value
+        }, null, 8, yt)) : V("", !0),
+        Ve(u("textarea", {
           ref_key: "refInput",
-          ref: n,
-          "onUpdate:modelValue": t[0] || (t[0] = (o) => u(l)().text = o),
+          ref: l,
+          "onUpdate:modelValue": t[2] || (t[2] = (n) => a(o)().text = n),
           rows: "1",
-          disabled: T.state == "disabled" || u(l)().isRecording,
-          class: j(["chat-input__input", { "chat-input__input--emoji-images": g.value }]),
-          placeholder: de.value,
+          disabled: E.state == "disabled" || a(o)().isRecording,
+          class: O(["chat-input__input", { "chat-input__input--emoji-images": A.value }]),
+          placeholder: Te.value,
           onKeydown: [
-            ae,
-            He(he, ["enter"])
+            Se,
+            Ye(Ee, ["enter"])
           ],
-          onInput: pe,
-          onScroll: c,
-          onSelect: f,
-          onMouseup: W,
-          onKeyup: W,
-          onMousemove: re,
-          onBlur: P
-        }, null, 42, Qe), [
-          [ke, u(l)().text]
+          onInput: we,
+          onScroll: g,
+          onSelect: I,
+          onMouseup: K,
+          onKeyup: K,
+          onMousemove: Ie,
+          onBlur: j
+        }, null, 42, _t), [
+          [Xe, a(o)().text]
         ])
       ])),
-      O(Ke, {
-        textarea: n.value,
-        onFormatApplied: me
+      z(st, {
+        textarea: l.value,
+        onFormatApplied: Me
       }, null, 8, ["textarea"]),
-      h("button", {
-        class: j(["chat-input__button", { "chat-input__button-disabled": ue.value }]),
-        disabled: u(l)().isRecording,
-        onClick: q
+      u("button", {
+        class: O(["chat-input__button", { "chat-input__button-disabled": Ce.value }]),
+        disabled: a(o)().isRecording,
+        onClick: $
       }, [
-        h("span", Ze, [
-          O(u(ze), { color: ce.value }, null, 8, ["color"])
+        u("span", St, [
+          z(a(ot), { color: Fe.value }, null, 8, ["color"])
         ])
-      ], 10, Xe),
-      h("div", et, [
-        Y(e.$slots, "buttons", {}, void 0, !0)
+      ], 10, xt),
+      u("div", It, [
+        le(e.$slots, "buttons", {}, void 0, !0)
       ])
     ]));
   }
 });
 export {
-  _t as default
+  Kt as default
 };