@mobilon-dev/chotto 0.3.100 → 0.3.103

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

@@ -1,7 +1,8 @@
 import o from "./FilePreview.vue2.js";
 /* empty css                 */
-import r from "../../../_virtual/_plugin-vue_export-helper.js";
-const i = /* @__PURE__ */ r(o, [["__scopeId", "data-v-94cf2f67"]]);
+/* empty css                 */
+import e from "../../../_virtual/_plugin-vue_export-helper.js";
+const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-592e055e"]]);
 export {
-  i as default
+  p as default
 };

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

@@ -1,5 +1,5 @@
-import { defineComponent as V, inject as $, ref as s, computed as I, onMounted as x, createElementBlock as n, openBlock as o, createElementVNode as i, createBlock as h, withDirectives as k, vShow as g, createCommentVNode as r, toDisplayString as c, Teleport as A, createVNode as L, Transition as U, withCtx as T, unref as N } from "vue";
-import z from "../../2_modals/ModalFullscreen/ModalFullscreen.vue.js";
+import { defineComponent as _, inject as b, ref as g, computed as N, createElementBlock as l, openBlock as i, createElementVNode as n, createBlock as m, createCommentVNode as o, toDisplayString as c, Teleport as V, createVNode as C, Transition as T, withCtx as d, unref as u } from "vue";
+import U from "../../2_modals/ModalFullscreen/ModalFullscreen.vue.js";
 import "../../../hooks/useMessageDraft.js";
 import "../../../hooks/useSearchModel.js";
 import { useTheme as B } from "../../../hooks/useTheme.js";
@@ -11,20 +11,16 @@ import "../../../locale/useLocale.js";
 import "../../../node_modules/linkifyjs/dist/linkify.js";
 import "../../../node_modules/linkify-string/dist/linkify-string.js";
 import "../../../functions/parseMarkdown.js";
-import { safeMediaPlay as D } from "../../../functions/safeMediaPlay.js";
-const j = { class: "preview__container" }, F = { class: "preview__block" }, O = ["src"], q = ["src"], G = {
+const x = { class: "preview" }, z = ["src", "alt"], F = ["src"], M = {
   key: 2,
-  style: { display: "flex", gap: "5px" }
-}, H = ["src"], J = { class: "pi pi-play" }, K = { class: "pi pi-pause" }, Q = { key: 3 }, R = { class: "preview__control-block" }, W = { class: "preview__information" }, X = { class: "preview__name" }, Y = {
+  class: "pi pi-play preview__thumb-play"
+}, S = {
+  key: 1,
+  class: "pi pi-file preview__icon"
+}, j = { class: "preview__info" }, A = ["title"], E = {
   key: 0,
   class: "preview__size"
-}, Z = {
-  key: 1,
-  class: "preview__audio-time"
-}, ee = {
-  key: 2,
-  class: "preview__audio-time"
-}, ie = { class: "preview__reset" }, te = ["src"], le = ["src"], ye = /* @__PURE__ */ V({
+}, O = ["aria-label"], P = ["src"], $ = ["src", "alt"], ee = /* @__PURE__ */ _({
   __name: "FilePreview",
   props: {
     fileInfo: {
@@ -33,124 +29,81 @@ const j = { class: "preview__container" }, F = { class: "preview__block" }, O =
     }
   },
   emits: ["reset"],
-  setup(t, { emit: C }) {
-    const b = $("chatAppId"), { getTheme: p } = B(b), E = C, e = s(), a = s(), u = s(!1), d = s(0), _ = s(0), v = s(!1), M = () => v.value = !1;
-    function P() {
-      e.value && (u.value ? e.value.pause() : D(e.value), u.value = !u.value);
+  setup(e, { emit: v }) {
+    const p = b("chatAppId"), { getTheme: r } = B(p), s = e, I = v, a = g(!1), h = N(
+      () => !!s.fileInfo.previewUrl && (s.fileInfo.isImage || s.fileInfo.isVideo)
+    );
+    function w() {
+      a.value = !1;
     }
-    const w = (m) => {
-      const l = Math.floor(m / 60), f = Math.floor(m % 60);
-      return `${l.toString().padStart(2, "0")}:${f.toString().padStart(2, "0")}`;
-    }, S = I(() => e.value ? w(_.value) : "0:00"), y = I(() => e.value || a.value ? w(d.value) : "0:00");
-    return x(() => {
-      e.value != null && (e.value.addEventListener("loadedmetadata", () => {
-        e.value != null && (e.value.duration == 1 / 0 || Number.isNaN(e.value.duration)) && (e.value.currentTime = 1e101, e.value.addEventListener("timeupdate", () => {
-          e.value && (e.value.currentTime = 0, d.value = e.value.duration);
-        }, { once: !0 })), d.value = e.value != null ? e.value.duration : 0;
-      }), e.value.addEventListener("timeupdate", () => {
-        _.value = e.value != null ? e.value.currentTime : 0;
-      })), a.value && a.value.addEventListener("loadedmetadata", () => {
-        a.value && (d.value = a.value.duration, (a.value.duration == 1 / 0 || Number.isNaN(a.value.duration)) && (a.value.currentTime = 1e101, a.value.addEventListener("timeupdate", () => {
-          a.value && (a.value.currentTime = 0, d.value = a.value.duration);
-        }, { once: !0 })));
-      });
-    }), (m, l) => (o(), n("div", j, [
-      i("div", F, [
-        t.fileInfo.isImage ? (o(), n("div", {
+    function y(f) {
+      const t = f.target;
+      t.currentTime === 0 && (t.currentTime = 0.1);
+    }
+    return (f, t) => (i(), l("div", x, [
+      h.value ? (i(), l("div", {
+        key: 0,
+        class: "preview__thumb",
+        onClick: t[0] || (t[0] = (k) => a.value = !0)
+      }, [
+        e.fileInfo.isImage ? (i(), l("img", {
           key: 0,
-          style: { position: "relative" },
-          onClick: l[0] || (l[0] = (f) => v.value = !0)
-        }, [
-          i("img", {
-            src: t.fileInfo.previewUrl,
-            alt: "Image Preview",
-            class: "preview__image"
-          }, null, 8, O),
-          l[3] || (l[3] = i("div", { class: "preview__shadow" }, [
-            i("span", { class: "pi pi-plus-circle" })
-          ], -1))
-        ])) : t.fileInfo.isVideo ? (o(), n("div", {
+          src: e.fileInfo.previewUrl,
+          alt: e.fileInfo.fileName,
+          class: "preview__thumb-media"
+        }, null, 8, z)) : e.fileInfo.isVideo ? (i(), l("video", {
           key: 1,
-          style: { position: "relative" },
-          onClick: l[1] || (l[1] = (f) => v.value = !0)
-        }, [
-          i("video", {
-            ref_key: "video",
-            ref: a,
-            src: t.fileInfo.previewUrl,
-            class: "preview__video"
-          }, null, 8, q),
-          l[4] || (l[4] = i("div", { class: "preview__shadow" }, [
-            i("span", { class: "pi pi-play" })
-          ], -1))
-        ])) : t.fileInfo.isAudio ? (o(), n("div", G, [
-          l[5] || (l[5] = i("span", {
-            class: "pi pi-headphones",
-            style: { "font-size": "1rem", margin: "auto" }
-          }, null, -1)),
-          i("audio", {
-            ref_key: "audio",
-            ref: e,
-            src: t.fileInfo.previewUrl
-          }, null, 8, H),
-          i("button", {
-            class: "preview__audio-control",
-            onClick: P
-          }, [
-            k(i("span", J, null, 512), [
-              [g, !u.value]
-            ]),
-            k(i("span", K, null, 512), [
-              [g, u.value]
-            ])
-          ])
-        ])) : (o(), n("div", Q, [...l[6] || (l[6] = [
-          i("span", {
-            class: "pi pi-file",
-            style: { "font-size": "2.5rem" }
-          }, null, -1)
-        ])]))
-      ]),
-      i("div", R, [
-        i("div", W, [
-          i("span", X, c(t.fileInfo.fileName), 1),
-          !t.fileInfo.isAudio && !t.fileInfo.isVideo ? (o(), n("span", Y, c(t.fileInfo.fileSize), 1)) : r("", !0),
-          t.fileInfo.isAudio ? (o(), n("span", Z, c(`${S.value} / ${y.value}`), 1)) : r("", !0),
-          t.fileInfo.isVideo ? (o(), n("span", ee, c(y.value), 1)) : r("", !0)
-        ]),
-        i("div", ie, [
-          i("span", {
-            class: "pi pi-times",
-            onClick: l[2] || (l[2] = (f) => E("reset"))
-          })
-        ])
+          src: e.fileInfo.previewUrl,
+          class: "preview__thumb-media",
+          muted: "",
+          playsinline: "",
+          preload: "metadata",
+          onLoadedmetadata: y
+        }, null, 40, F)) : o("", !0),
+        e.fileInfo.isVideo ? (i(), l("span", M)) : o("", !0)
+      ])) : (i(), l("span", S)),
+      n("div", j, [
+        n("span", {
+          class: "preview__name",
+          title: e.fileInfo.fileName
+        }, c(e.fileInfo.fileName), 9, A),
+        e.fileInfo.fileSize ? (i(), l("span", E, c(e.fileInfo.fileSize), 1)) : o("", !0)
       ]),
-      (o(), h(A, { to: "body" }, [
-        L(U, { name: "modal-fade" }, {
-          default: T(() => [
-            v.value ? (o(), h(z, {
+      n("button", {
+        type: "button",
+        class: "preview__reset",
+        "aria-label": e.fileInfo.fileName,
+        onClick: t[1] || (t[1] = (k) => I("reset"))
+      }, [...t[2] || (t[2] = [
+        n("span", { class: "pi pi-times" }, null, -1)
+      ])], 8, O),
+      (i(), m(V, { to: "body" }, [
+        C(T, { name: "modal-fade" }, {
+          default: d(() => [
+            a.value ? (i(), m(U, {
               key: 0,
-              theme: N(p)().theme ? N(p)().theme : "",
-              title: t.fileInfo.fileName,
-              onClose: M
+              theme: u(r)().theme ? u(r)().theme : "light",
+              title: e.fileInfo.fileName,
+              onClose: w
             }, {
-              default: T(() => [
-                t.fileInfo.isVideo ? (o(), n("video", {
+              default: d(() => [
+                e.fileInfo.isVideo ? (i(), l("video", {
                   key: 0,
                   class: "preview__modal-video",
-                  src: t.fileInfo.previewUrl,
+                  src: e.fileInfo.previewUrl,
                   controls: "",
-                  autoplay: ""
-                }, null, 8, te)) : r("", !0),
-                t.fileInfo.isImage ? (o(), n("img", {
+                  autoplay: "",
+                  playsinline: ""
+                }, null, 8, P)) : o("", !0),
+                e.fileInfo.isImage ? (i(), l("img", {
                   key: 1,
                   class: "preview__modal-image",
-                  src: t.fileInfo.previewUrl,
-                  alt: "Image Preview"
-                }, null, 8, le)) : r("", !0)
+                  src: e.fileInfo.previewUrl,
+                  alt: e.fileInfo.fileName
+                }, null, 8, $)) : o("", !0)
               ]),
               _: 1
-            }, 8, ["theme", "title"])) : r("", !0)
+            }, 8, ["theme", "title"])) : o("", !0)
           ]),
           _: 1
         })
@@ -159,5 +112,5 @@ const j = { class: "preview__container" }, F = { class: "preview__block" }, O =
   }
 });
 export {
-  ye as default
+  ee as default
 };

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

@@ -1,7 +1,7 @@
 import o from "./FileUploader.vue2.js";
 /* empty css                  */
 import r from "../../../_virtual/_plugin-vue_export-helper.js";
-const a = /* @__PURE__ */ r(o, [["__scopeId", "data-v-f82b23fd"]]);
+const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-0d65ea38"]]);
 export {
-  a as default
+  p as default
 };

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

@@ -1,7 +1,7 @@
-import { defineComponent as D, ref as r, inject as x, computed as M, watchEffect as z, watch as A, onMounted as O, onUnmounted as P, createElementBlock as y, openBlock as b, Fragment as $, createCommentVNode as H, createElementVNode as a, normalizeClass as L, createVNode as j, unref as R } from "vue";
-import { buildFilePreview as q } from "../../../hooks/uploadFile/generatePreview.js";
-import { uploadFile as G } from "../../../hooks/uploadFile/uploadFile.js";
-import { useMessageDraft as J } from "../../../hooks/useMessageDraft.js";
+import { defineComponent as H, ref as n, inject as S, computed as _, unref as U, watchEffect as L, watch as O, onMounted as $, onUnmounted as T, createElementBlock as w, openBlock as A, Fragment as R, createCommentVNode as X, createElementVNode as d, normalizeClass as q, createVNode as G } from "vue";
+import { buildFilePreview as J } from "../../../hooks/uploadFile/generatePreview.js";
+import { uploadFile as K } from "../../../hooks/uploadFile/uploadFile.js";
+import { MAX_ATTACHED_FILES as D, useMessageDraft as Q, getDraftFiles as C } from "../../../hooks/useMessageDraft.js";
 import "../../../hooks/useSearchModel.js";
 import "../../../hooks/useTheme.js";
 import "../../../hooks/useEmojiNative.js";
@@ -12,14 +12,14 @@ import "../../../locale/useLocale.js";
 import "../../../node_modules/linkifyjs/dist/linkify.js";
 import "../../../node_modules/linkify-string/dist/linkify-string.js";
 import "../../../functions/parseMarkdown.js";
-import K from "./icons/FileUploaderIcon.vue.js";
-const Q = {
+import W from "./icons/FileUploaderIcon.vue.js";
+const Y = {
   key: 0,
   class: "file-uploader__status file-uploader__status--uploading"
-}, T = {
+}, Z = {
   key: 1,
   class: "file-uploader__status file-uploader__status--error"
-}, W = ["disabled"], de = /* @__PURE__ */ D({
+}, ee = ["disabled"], Fe = /* @__PURE__ */ H({
   __name: "FileUploader",
   props: {
     filebumpUrl: {
@@ -29,111 +29,132 @@ const Q = {
     state: {
       type: String,
       default: "active"
+    },
+    maxAttachedFiles: {
+      type: Number,
+      default: void 0
     }
   },
   emits: ["fileUploaded"],
-  setup(d, { emit: X }) {
-    const m = d, o = r(""), i = r(), _ = r();
-    _.value;
-    const n = x("chatAppId"), { setMessageFile: U, resetMessageFile: k, getMessage: w, setRecordingMessage: C } = J(n), u = r("#5F5F5F"), p = r("#404040"), v = r(!1);
-    let s = null;
-    const g = () => {
-      if (!n) {
-        u.value = "#5F5F5F", p.value = "#404040";
+  setup(v, { emit: te }) {
+    const s = v, r = n(""), a = n(), M = n();
+    M.value;
+    const u = S("chatAppId"), N = S("maxAttachedFiles", D), { addMessageFiles: V, getMessage: g, setRecordingMessage: E } = Q(u), F = _(() => {
+      const t = s.maxAttachedFiles;
+      if (typeof t == "number" && t > 0) return Math.floor(t);
+      const e = U(N);
+      return typeof e == "number" && e > 0 ? Math.floor(e) : D;
+    }), f = n("#5F5F5F"), p = n("#404040"), y = n(!1);
+    let c = null;
+    const h = () => {
+      if (!u) {
+        f.value = "#5F5F5F", p.value = "#404040";
         return;
       }
-      const l = document.getElementById(n);
-      if (!l) {
-        u.value = "#5F5F5F", p.value = "#404040";
+      const t = document.getElementById(u);
+      if (!t) {
+        f.value = "#5F5F5F", p.value = "#404040";
         return;
       }
-      const e = window.getComputedStyle(l), t = e.getPropertyValue("--chotto-fileuploader-trigger-color").trim(), f = e.getPropertyValue("--chotto-fileuploader-trigger-hover-color").trim();
-      u.value = t || "#5F5F5F", p.value = f || "#404040";
-    }, S = M(() => v.value ? p.value : u.value);
-    z(() => {
-      g();
+      const e = window.getComputedStyle(t), l = e.getPropertyValue("--chotto-fileuploader-trigger-color").trim(), i = e.getPropertyValue("--chotto-fileuploader-trigger-hover-color").trim();
+      f.value = l || "#5F5F5F", p.value = i || "#404040";
+    }, B = _(() => y.value ? p.value : f.value);
+    L(() => {
+      h();
     });
-    const F = M(() => !w().file), c = () => {
-      i.value && (i.value.value = "");
-    }, N = () => {
-      k(), o.value = "", c();
-    }, V = async () => {
-      var e, t;
-      const l = (t = (e = i.value) == null ? void 0 : e.files) == null ? void 0 : t[0];
-      N(), l && await E(l), c();
-    }, B = () => {
-      i.value && F.value && m.state == "active" && (c(), i.value.click());
-    }, h = async (l) => {
-      var t;
-      const e = (t = l.clipboardData) == null ? void 0 : t.items;
-      if (e) {
-        for (let f of e)
-          if (f.type.indexOf("image") !== -1) {
-            l.preventDefault();
-            const I = f.getAsFile();
-            I && E(I);
+    const m = _(() => C(g()).length < F.value), b = () => {
+      a.value && (a.value.value = "");
+    }, P = () => F.value - C(g()).length, I = async (t) => {
+      const e = t.slice(0, Math.max(0, P()));
+      if (e.length) {
+        r.value = "uploading", E(!0);
+        try {
+          const l = [];
+          for (const i of e) {
+            const o = await K(
+              typeof s.filebumpUrl == "string" ? s.filebumpUrl : null,
+              i
+            );
+            o.status == "success" ? l.push({
+              url: o.url,
+              name: o.name,
+              size: o.size,
+              type: o.type,
+              preview: J(o.name, o.preview)
+            }) : r.value = "error";
           }
+          l.length ? (V(l, F.value), r.value !== "error" && (r.value = "success")) : r.value !== "error" && (r.value = "error");
+        } finally {
+          E(!1);
+        }
       }
-    }, E = async (l) => {
-      o.value = "uploading", C(!0);
-      const e = typeof m.filebumpUrl == "string" ? m.filebumpUrl : null;
-      await G(e, l).then((t) => {
-        C(!1), o.value = t.status, t.status == "success" && U({
-          url: t.url,
-          name: t.name,
-          size: t.size,
-          type: t.type,
-          preview: q(t.name, t.preview)
-        });
-      });
+    }, j = async () => {
+      var l;
+      const t = (l = a.value) == null ? void 0 : l.files, e = t ? Array.from(t) : [];
+      b(), await I(e);
+    }, z = () => {
+      a.value && m.value && s.state == "active" && (b(), a.value.click());
+    }, x = async (t) => {
+      var i;
+      if (!m.value || s.state !== "active") return;
+      const e = (i = t.clipboardData) == null ? void 0 : i.items;
+      if (!e) return;
+      const l = [];
+      for (const o of e)
+        if (o.type.indexOf("image") !== -1) {
+          const k = o.getAsFile();
+          k && l.push(k);
+        }
+      l.length && (t.preventDefault(), await I(l));
     };
-    return A(
-      () => w().file,
-      (l) => {
-        l || (o.value = "", c());
+    return O(
+      () => C(g()).length,
+      (t) => {
+        t || (r.value = "", b());
       }
-    ), O(() => {
-      if (window.addEventListener("paste", h), g(), n) {
-        const l = document.getElementById(n);
-        l && (s = new MutationObserver((e) => {
-          e.forEach((t) => {
-            t.type === "attributes" && t.attributeName === "data-theme" && g();
+    ), $(() => {
+      if (window.addEventListener("paste", x), h(), u) {
+        const t = document.getElementById(u);
+        t && (c = new MutationObserver((e) => {
+          e.forEach((l) => {
+            l.type === "attributes" && l.attributeName === "data-theme" && h();
           });
-        }), s.observe(l, {
+        }), c.observe(t, {
           attributes: !0,
           attributeFilter: ["data-theme"]
         }));
       }
-    }), P(() => {
-      window.removeEventListener("paste", h), s && (s.disconnect(), s = null);
-    }), (l, e) => (b(), y($, null, [
-      o.value === "uploading" ? (b(), y("div", Q, [...e[2] || (e[2] = [
-        a("span", null, "Загрузка", -1),
-        a("span", null, "файла...", -1)
-      ])])) : o.value === "error" ? (b(), y("div", T, [...e[3] || (e[3] = [
-        a("span", null, "Ошибка при загрузке файла.", -1)
-      ])])) : H("", !0),
-      a("span", {
+    }), T(() => {
+      window.removeEventListener("paste", x), c && (c.disconnect(), c = null);
+    }), (t, e) => (A(), w(R, null, [
+      r.value === "uploading" ? (A(), w("div", Y, [...e[2] || (e[2] = [
+        d("span", null, "Загрузка", -1),
+        d("span", null, "файла...", -1)
+      ])])) : r.value === "error" ? (A(), w("div", Z, [...e[3] || (e[3] = [
+        d("span", null, "Ошибка при загрузке файла.", -1)
+      ])])) : X("", !0),
+      d("span", {
         ref_key: "triggerElement",
-        ref: _,
-        class: L(["file-uploader__trigger", { "file-uploader__disabled": !F.value || d.state == "disabled" }]),
-        disabled: !F.value || d.state == "disabled",
-        onClick: B,
-        onMouseenter: e[0] || (e[0] = (t) => v.value = !0),
-        onMouseleave: e[1] || (e[1] = (t) => v.value = !1)
+        ref: M,
+        class: q(["file-uploader__trigger", { "file-uploader__disabled": !m.value || v.state == "disabled" }]),
+        disabled: !m.value || v.state == "disabled",
+        onClick: z,
+        onMouseenter: e[0] || (e[0] = (l) => y.value = !0),
+        onMouseleave: e[1] || (e[1] = (l) => y.value = !1)
       }, [
-        j(R(K), { fill: S.value }, null, 8, ["fill"])
-      ], 42, W),
-      a("input", {
+        G(U(W), { fill: B.value }, null, 8, ["fill"])
+      ], 42, ee),
+      d("input", {
         ref_key: "fileInput",
-        ref: i,
+        ref: a,
         style: { display: "none" },
         type: "file",
-        onChange: V
+        multiple: "",
+        onChange: j
       }, null, 544)
     ], 64));
   }
 });
 export {
-  de as default
+  Fe 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 r = /* @__PURE__ */ o(t, [["__scopeId", "data-v-c13af78f"]]);
+const m = /* @__PURE__ */ o(t, [["__scopeId", "data-v-9692636b"]]);
 export {
-  r as default
+  m as default
 };