@vunex/support-chat 1.0.6 → 1.0.8

package/dist/gig-support-chat.es.js

@@ -1,241 +1,434 @@
-import { ref as c, defineComponent as B, computed as Y, openBlock as f, createElementBlock as w, normalizeClass as L, createElementVNode as s, createTextVNode as O, toDisplayString as R, createCommentVNode as $, onMounted as N, onUnmounted as V, normalizeStyle as A, createStaticVNode as P, withModifiers as D, Fragment as j, renderList as F, createBlock as K, withDirectives as q, withKeys as J, vModelText as Q, nextTick as Z, createVNode as _, Transition as ee, withCtx as te, unref as k } from "vue";
-import { defineStore as se } from "pinia";
-import { io as ne } from "socket.io-client";
-const ie = se("gigSupportChat", () => {
-  const e = c(null), v = c([]), t = c(!1), g = c(!1), i = c(0), l = c(""), r = c([]), u = c(!1), p = c(null), o = c(null), b = (d) => {
-    o.value = d;
-  }, I = () => {
-    var d;
-    (d = e.value) != null && d.connected || !o.value || (e.value = ne(o.value.apiUrl, {
-      path: o.value.path || "/ws",
+import { ref as w, defineComponent as q, computed as j, openBlock as c, createElementBlock as v, normalizeClass as L, createElementVNode as e, toDisplayString as T, createTextVNode as re, createCommentVNode as I, Fragment as N, onMounted as ie, onUnmounted as ne, normalizeStyle as ue, createStaticVNode as ge, withModifiers as D, renderList as se, createBlock as oe, unref as y, createVNode as _, Transition as G, withCtx as A, withDirectives as de, withKeys as ce, vModelText as ve, nextTick as me } from "vue";
+import { defineStore as he } from "pinia";
+import { io as pe } from "socket.io-client";
+const J = he("gigSupportChat", () => {
+  const n = w(null), k = w([]), l = w(!1), C = w(!1), r = w(0), m = w(""), U = w([]), b = w(!1), a = w(null), p = w(null), z = (g) => {
+    p.value = g;
+  }, $ = () => {
+    var g;
+    (g = n.value) != null && g.connected || !p.value || (n.value = pe(p.value.apiUrl, {
+      path: p.value.path || "/ws",
       transports: ["websocket", "polling"],
       auth: {
-        apiKey: o.value.apiKey,
-        uuid: o.value.uuid,
-        metaUser: o.value.metaUser
+        apiKey: p.value.apiKey,
+        uuid: p.value.uuid,
+        metaUser: p.value.metaUser
       }
-    }), e.value.on("connect", () => {
-      console.log("[GigSupportChat] Connected"), t.value = !0;
-    }), e.value.on("connected", (n) => {
-      console.log("[GigSupportChat] Registered as:", n.userId), l.value = n.userId, M();
-    }), e.value.on("disconnect", () => {
-      console.log("[GigSupportChat] Disconnected"), t.value = !1;
-    }), e.value.on("new_message", (n) => {
-      n.status === "SUCCESS" && (v.value.find((m) => m.id === n.message.id) || (v.value.push(n.message), g.value || i.value++));
-    }), e.value.on("message_sent", (n) => {
-      n.status === "SUCCESS" && (v.value.find((m) => m.id === n.message.id) || v.value.push(n.message));
-    }), e.value.on("history", (n) => {
-      n.status === "SUCCESS" && (v.value = n.messages);
-    }), e.value.on("error", (n) => {
-      console.error("[GigSupportChat] Socket error:", n);
+    }), n.value.on("connect", () => {
+      console.log("[GigSupportChat] Connected"), l.value = !0;
+    }), n.value.on("connected", (o) => {
+      console.log("[GigSupportChat] Registered as:", o.userId), m.value = o.userId, R();
+    }), n.value.on("disconnect", () => {
+      console.log("[GigSupportChat] Disconnected"), l.value = !1;
+    }), n.value.on("new_message", (o) => {
+      var d;
+      o.status === "SUCCESS" && (k.value.find((M) => M.id === o.message.id) || (k.value.push(o.message), C.value ? o.message.userId !== m.value && ((d = n.value) == null || d.emit("mark_read", { messageIds: [o.message.id] }), o.message.isRead = !0) : o.message.userId !== m.value && r.value++));
+    }), n.value.on("message_sent", (o) => {
+      o.status === "SUCCESS" && (k.value.find((d) => d.id === o.message.id) || k.value.push(o.message));
+    }), n.value.on("history", (o) => {
+      if (o.status === "SUCCESS" && (k.value = o.messages, !C.value)) {
+        const d = k.value.filter((M) => !M.isRead && M.userId !== m.value);
+        r.value = d.length;
+      }
+    }), n.value.on("error", (o) => {
+      console.error("[GigSupportChat] Socket error:", o);
     }));
-  }, C = () => {
-    e.value && (e.value.disconnect(), e.value = null), t.value = !1, v.value = [], i.value = 0, l.value = "";
-  }, S = (d) => {
-    var n, m;
-    !e.value || !t.value || (e.value.emit("send_message", {
-      userId: l.value,
-      text: d,
-      replyToMessageId: (n = p.value) == null ? void 0 : n.id,
-      metaUser: (m = o.value) == null ? void 0 : m.metaUser
-    }), p.value = null);
-  }, M = () => {
-    !e.value || !l.value || e.value.emit("get_history", {
-      userId: l.value,
+  }, S = () => {
+    n.value && (n.value.disconnect(), n.value = null), l.value = !1, k.value = [], r.value = 0, m.value = "";
+  }, H = (g) => {
+    var o, d;
+    !n.value || !l.value || (n.value.emit("send_message", {
+      userId: m.value,
+      text: g,
+      replyToMessageId: (o = a.value) == null ? void 0 : o.id,
+      metaUser: (d = p.value) == null ? void 0 : d.metaUser
+    }), a.value = null);
+  }, R = () => {
+    !n.value || !m.value || n.value.emit("get_history", {
+      userId: m.value,
       limit: 50,
       offset: 0
     });
   };
   return {
-    messages: v,
-    isConnected: t,
-    isWidgetOpen: g,
-    unreadCount: i,
-    currentUserId: l,
-    stickers: r,
-    isLoadingStickers: u,
-    replyingToMessage: p,
-    init: b,
-    connect: I,
-    disconnect: C,
-    sendMessage: S,
-    sendSticker: (d) => {
-      var n, m;
-      !e.value || !t.value || (e.value.emit("send_message", {
-        userId: l.value,
-        stickerId: d,
+    messages: k,
+    isConnected: l,
+    isWidgetOpen: C,
+    unreadCount: r,
+    currentUserId: m,
+    stickers: U,
+    isLoadingStickers: b,
+    replyingToMessage: a,
+    init: z,
+    connect: $,
+    disconnect: S,
+    sendMessage: H,
+    sendSticker: (g) => {
+      var o, d;
+      !n.value || !l.value || (n.value.emit("send_message", {
+        userId: m.value,
+        stickerId: g,
         messageType: "sticker",
-        replyToMessageId: (n = p.value) == null ? void 0 : n.id,
-        metaUser: (m = o.value) == null ? void 0 : m.metaUser
-      }), p.value = null);
+        replyToMessageId: (o = a.value) == null ? void 0 : o.id,
+        metaUser: (d = p.value) == null ? void 0 : d.metaUser
+      }), a.value = null);
     },
     fetchStickers: async () => {
-      var d;
-      if ((d = o.value) != null && d.apiUrl) {
-        u.value = !0;
+      var g;
+      if ((g = p.value) != null && g.apiUrl) {
+        b.value = !0;
         try {
-          const m = await (await fetch(`${o.value.apiUrl}/api/v1.0/stickers?activeOnly=true`, {
+          const d = await (await fetch(`${p.value.apiUrl}/api/v1.0/stickers?activeOnly=true`, {
             headers: {
-              "x-api-key": o.value.apiKey || ""
+              "x-api-key": p.value.apiKey || ""
             }
           })).json();
-          m.status === "SUCCESS" && (r.value = m.content);
-        } catch (n) {
-          console.error("[GigSupportChat] Error fetching stickers:", n);
+          d.status === "SUCCESS" && (U.value = d.content);
+        } catch (o) {
+          console.error("[GigSupportChat] Error fetching stickers:", o);
         } finally {
-          u.value = !1;
+          b.value = !1;
         }
       }
     },
     toggleWidget: () => {
-      g.value = !g.value, g.value && (i.value = 0);
+      if (C.value = !C.value, C.value) {
+        r.value = 0;
+        const g = k.value.filter((o) => !o.isRead && o.userId !== m.value);
+        if (g.length > 0 && n.value) {
+          const o = g.map((d) => d.id);
+          n.value.emit("mark_read", { messageIds: o }), k.value.forEach((d) => {
+            o.includes(d.id) && (d.isRead = !0);
+          });
+        }
+      }
     },
-    loadHistory: M,
-    startReply: (d) => {
-      p.value = d;
+    loadHistory: R,
+    startReply: (g) => {
+      a.value = g;
     },
     cancelReply: () => {
-      p.value = null;
+      a.value = null;
     }
   };
-}), ae = ["data-message-id"], oe = {
+}), fe = ["data-message-id"], ye = { class: "gig-message-group" }, we = {
   key: 0,
   class: "gig-message-author"
-}, le = ["src", "alt"], re = ["innerHTML"], ue = { class: "gig-message-time" }, ge = /* @__PURE__ */ B({
+}, ke = { class: "gig-author-avatar" }, xe = { style: { "font-size": "10px", "font-weight": "700", opacity: "0.7", "margin-bottom": "2px" } }, Ce = { style: { "font-size": "11px", opacity: "0.8", "white-space": "nowrap", overflow: "hidden", "text-overflow": "ellipsis", "max-width": "200px" } }, be = ["src", "alt"], Me = ["src", "alt"], $e = {
+  key: 1,
+  class: "gig-message-attachment-file"
+}, Se = { class: "gig-file-info" }, Te = ["title"], Ie = { class: "gig-file-size" }, Ue = ["innerHTML"], ze = ["innerHTML"], Be = { class: "gig-message-meta-out" }, Re = {
+  key: 0,
+  viewBox: "0 0 24 24",
+  width: "14",
+  height: "14",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, He = {
+  key: 1,
+  viewBox: "0 0 24 24",
+  width: "14",
+  height: "14",
+  fill: "none",
+  stroke: "currentColor",
+  "stroke-width": "2"
+}, We = /* @__PURE__ */ q({
   __name: "ChatMessage",
   props: {
     message: {},
     currentUserId: {}
   },
-  emits: ["reply", "scroll-to"],
-  setup(e) {
-    const v = e, t = Y(() => v.message.userId === v.currentUserId), g = (r) => r ? new Date(r).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : "", i = (r) => {
-      const u = r.trim().split(/\s+/);
-      return u.length >= 2 ? `${u[0]} ${u[1][0]}.` : r;
-    }, l = (r) => {
-      if (!r) return "";
-      const u = r.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), p = /(https?:\/\/[^\s]+)/g;
-      return u.replace(p, (o) => `<a href="${o}" target="_blank" style="color: inherit; text-decoration: underline;">${o}</a>`);
+  emits: ["reply", "scroll-to", "open-image"],
+  setup(n, { emit: k }) {
+    const l = n, C = J(), r = j(() => l.message.userId === l.currentUserId), m = (i) => C.messages.find((t) => t.id === i), U = (i) => i.userId === l.currentUserId ? "Вы" : R(i.userName || "Support"), b = (i) => i.messageType === "sticker" ? "[Стикер]" : i.attachmentName || i.attachmentBase64 || i.attachmentUrl || i.attachment ? "[Вложение]" : i.text || "", a = j(() => {
+      const i = l.message, t = i.attachment || i.Attachment || {}, f = l.message.attachmentName || t.name || t.attachmentName || t.attachment_name || "Вложение", g = l.message.attachmentMimeType || t.mimeType || t.mime_type || "application/octet-stream", o = l.message.attachmentSize || t.size || t.attachmentSize || t.attachment_size || 0, d = l.message.attachmentBase64 || t.base64 || t.attachmentBase64 || t.attachment_base64 || null, M = l.message.attachmentUrl || t.url || t.attachmentUrl || t.attachment_url || null;
+      if (f !== "Вложение" || o > 0 || d || M) {
+        let E = M;
+        return d && (E = `data:${g};base64,${d}`), { name: f, mimeType: g, size: Number(o), base64: d, url: M, previewUrl: E };
+      }
+      return null;
+    }), p = j(() => {
+      var i;
+      return ((i = a.value) == null ? void 0 : i.mimeType.startsWith("image/")) || !1;
+    }), z = () => {
+      if (!a.value) return;
+      const i = a.value, t = document.createElement("a");
+      if (t.download = i.name, i.previewUrl)
+        t.href = i.previewUrl;
+      else if (i.url)
+        t.href = i.url, t.target = "_blank", t.rel = "noopener";
+      else
+        return;
+      document.body.appendChild(t), t.click(), document.body.removeChild(t);
+    }, $ = (i) => {
+      if (i === 0) return "0 B";
+      const t = 1024, f = ["B", "KB", "MB", "GB"], g = Math.floor(Math.log(i) / Math.log(t));
+      return parseFloat((i / Math.pow(t, g)).toFixed(1)) + " " + f[g];
+    }, S = (i, t = 22) => {
+      if (!i || i.length <= t) return i;
+      const f = i.lastIndexOf(".");
+      if (f <= 0) return i.substring(0, t - 3) + "...";
+      const g = i.substring(f), o = i.substring(0, f);
+      return o.length + g.length <= t ? i : o.substring(0, t - g.length - 3) + "..." + g;
+    }, H = (i) => i ? new Date(i).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : "", R = (i) => {
+      if (!i) return "Support";
+      const t = i.trim().split(/\s+/);
+      return t.length >= 2 ? `${t[0]} ${t[1][0]}.` : i;
+    }, V = (i) => {
+      if (i.toLowerCase() === "support") return "GP";
+      const t = i.trim().split(/\s+/);
+      return t.length >= 2 ? `${t[0][0]}${t[1][0]}`.toUpperCase() : t.length === 1 && t[0].length >= 2 ? t[0].substring(0, 2).toUpperCase() : t[0] ? t[0][0].toUpperCase() : "GP";
+    }, W = (i) => {
+      if (!i) return "";
+      const t = i.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"), f = /(https?:\/\/[^\s]+)/g;
+      return t.replace(f, (g) => `<a href="${g}" target="_blank" style="color: inherit; text-decoration: underline;">${g}</a>`);
     };
-    return (r, u) => (f(), w("div", {
-      class: L(["gig-message-row", t.value ? "sent" : "received"]),
-      "data-message-id": e.message.id
+    return (i, t) => (c(), v("div", {
+      class: L(["gig-message-row", r.value ? "sent" : "received"]),
+      "data-message-id": n.message.id
     }, [
-      s("div", {
-        class: L(["gig-message-bubble", { "is-sticker": e.message.messageType === "sticker" }])
-      }, [
-        t.value ? $("", !0) : (f(), w("div", oe, [
-          u[1] || (u[1] = s("div", { class: "gig-author-avatar" }, "GP", -1)),
-          O(" " + R(i(e.message.userName || "Support")), 1)
-        ])),
-        e.message.replyToMessageId ? (f(), w("div", {
-          key: 1,
-          class: "gig-message-reply-preview",
-          onClick: u[0] || (u[0] = (p) => r.$emit("scroll-to", e.message.replyToMessageId))
-        })) : $("", !0),
-        e.message.messageType === "sticker" && e.message.sticker ? (f(), w("img", {
-          key: 2,
-          src: `data:${e.message.sticker.mimeType || "image/png"};base64,${e.message.sticker.base64}`,
-          class: "gig-sticker-img",
-          alt: e.message.sticker.name
-        }, null, 8, le)) : (f(), w("div", {
-          key: 3,
-          innerHTML: l(e.message.text || "")
-        }, null, 8, re)),
-        s("div", ue, R(g(e.message.createdAt)), 1)
-      ], 2)
-    ], 10, ae));
+      e("div", ye, [
+        e("div", {
+          class: L(["gig-message-bubble", { "is-sticker": n.message.messageType === "sticker" }])
+        }, [
+          r.value ? I("", !0) : (c(), v("div", we, [
+            e("div", ke, T(V(n.message.userName || "Support")), 1),
+            re(" " + T(R(n.message.userName || "Support")), 1)
+          ])),
+          n.message.replyToMessageId && m(n.message.replyToMessageId) ? (c(), v("div", {
+            key: 1,
+            class: "gig-message-reply-preview",
+            onClick: t[0] || (t[0] = (f) => i.$emit("scroll-to", n.message.replyToMessageId))
+          }, [
+            e("div", xe, T(U(m(n.message.replyToMessageId))), 1),
+            e("div", Ce, T(b(m(n.message.replyToMessageId))), 1)
+          ])) : I("", !0),
+          n.message.messageType === "sticker" && n.message.sticker ? (c(), v("img", {
+            key: 2,
+            src: `data:${n.message.sticker.mimeType || "image/png"};base64,${n.message.sticker.base64}`,
+            class: "gig-sticker-img",
+            alt: n.message.sticker.name
+          }, null, 8, be)) : a.value ? (c(), v(N, { key: 3 }, [
+            p.value ? (c(), v("div", {
+              key: 0,
+              class: "gig-message-attachment-image",
+              onClick: t[1] || (t[1] = (f) => i.$emit("open-image", a.value.previewUrl))
+            }, [
+              e("img", {
+                src: a.value.previewUrl,
+                alt: a.value.name
+              }, null, 8, Me)
+            ])) : (c(), v("div", $e, [
+              t[4] || (t[4] = e("div", { class: "gig-file-icon" }, [
+                e("svg", {
+                  viewBox: "0 0 24 24",
+                  width: "24",
+                  height: "24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  "stroke-width": "2"
+                }, [
+                  e("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
+                  e("polyline", { points: "13 2 13 9 20 9" })
+                ])
+              ], -1)),
+              e("div", Se, [
+                e("div", {
+                  class: "gig-file-name",
+                  title: a.value.name
+                }, T(S(a.value.name)), 9, Te),
+                e("div", Ie, T($(a.value.size)), 1)
+              ]),
+              e("button", {
+                class: "gig-btn-icon gig-file-download",
+                onClick: z
+              }, [...t[3] || (t[3] = [
+                e("svg", {
+                  viewBox: "0 0 24 24",
+                  width: "20",
+                  height: "20",
+                  fill: "none",
+                  stroke: "currentColor",
+                  "stroke-width": "2"
+                }, [
+                  e("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+                  e("polyline", { points: "7 10 12 15 17 10" }),
+                  e("line", {
+                    x1: "12",
+                    y1: "15",
+                    x2: "12",
+                    y2: "3"
+                  })
+                ], -1)
+              ])])
+            ])),
+            n.message.text ? (c(), v("div", {
+              key: 2,
+              innerHTML: W(n.message.text),
+              style: { "margin-top": "8px" }
+            }, null, 8, Ue)) : I("", !0)
+          ], 64)) : (c(), v("div", {
+            key: 4,
+            innerHTML: W(n.message.text || "")
+          }, null, 8, ze)),
+          e("button", {
+            class: L(["gig-message-reply-btn", r.value ? "left-side" : "right-side"]),
+            onClick: t[2] || (t[2] = (f) => i.$emit("reply", n.message))
+          }, [...t[5] || (t[5] = [
+            e("svg", {
+              viewBox: "0 0 24 24",
+              width: "14",
+              height: "14",
+              fill: "none",
+              stroke: "currentColor",
+              "stroke-width": "2.5"
+            }, [
+              e("polyline", { points: "9 17 4 12 9 7" }),
+              e("path", { d: "M20 18v-2a4 4 0 0 0-4-4H4" })
+            ], -1)
+          ])], 2)
+        ], 2),
+        e("div", Be, [
+          e("span", null, T(H(n.message.createdAt)), 1),
+          r.value ? (c(), v(N, { key: 0 }, [
+            n.message.isRead ? (c(), v("svg", Re, [...t[6] || (t[6] = [
+              e("polyline", { points: "18 6 11 15 7 11" }, null, -1),
+              e("polyline", { points: "22 6 15 15 13 13" }, null, -1)
+            ])])) : (c(), v("svg", He, [...t[7] || (t[7] = [
+              e("polyline", { points: "20 6 9 17 4 12" }, null, -1)
+            ])]))
+          ], 64)) : I("", !0)
+        ])
+      ])
+    ], 10, fe));
   }
-}), ce = (e, v) => {
-  const t = e.__vccOpts || e;
-  for (const [g, i] of v)
-    t[g] = i;
-  return t;
-}, de = /* @__PURE__ */ ce(ge, [["__scopeId", "data-v-ca90faac"]]), ve = {
+}), Ee = (n, k) => {
+  const l = n.__vccOpts || n;
+  for (const [C, r] of k)
+    l[C] = r;
+  return l;
+}, Le = /* @__PURE__ */ Ee(We, [["__scopeId", "data-v-85f97065"]]), _e = {
   key: 0,
   style: { "text-align": "center", color: "#94a3b8", "padding-top": "40px" }
-}, me = { class: "gig-input-area" }, pe = { class: "gig-input-box" }, he = ["onKeydown"], fe = ["disabled"], ye = {
+}, Ge = {
+  key: 0,
+  class: "gig-sticker-picker"
+}, Ae = { class: "gig-sticker-header" }, Ve = { class: "gig-sticker-body" }, De = {
+  key: 0,
+  style: { "text-align": "center", color: "#94a3b8", padding: "30px" }
+}, Ne = {
+  key: 1,
+  style: { "text-align": "center", color: "#94a3b8", padding: "30px" }
+}, Oe = {
+  key: 2,
+  class: "gig-sticker-grid"
+}, Xe = ["onClick"], Ye = ["src", "alt"], Ke = { class: "gig-input-area" }, Pe = {
+  key: 0,
+  class: "gig-reply-preview-container"
+}, Fe = { class: "gig-reply-content" }, je = { class: "gig-reply-author" }, qe = { class: "gig-reply-text" }, Je = { class: "gig-input-box" }, Qe = ["onKeydown"], Ze = ["disabled"], et = {
   viewBox: "0 0 24 24",
   width: "18",
   height: "18",
   fill: "none",
   stroke: "currentColor",
   "stroke-width": "2",
-  style: { transform: "rotate(45deg)", "margin-bottom": "2px" }
-}, we = /* @__PURE__ */ B({
+  style: { transform: "rotate(45deg) translate(-1px, 2px)" }
+}, tt = ["src"], st = /* @__PURE__ */ q({
   __name: "ChatWindow",
   props: {
     messages: {},
     currentUserId: {}
   },
   emits: ["close", "send"],
-  setup(e, { emit: v }) {
-    const t = v, g = c(""), i = c(null), l = c(null), r = c({ x: 32, y: 112 }), u = c({ width: 440, height: 600 }), p = c(!1), o = c(null), b = c(!1), I = () => {
-      b.value = !b.value;
+  setup(n, { emit: k }) {
+    const l = n, C = k, r = J(), m = w(""), U = w(null), b = w(null), a = w({ x: 32, y: 112 }), p = w({ width: 440, height: 600 }), z = w(!1), $ = w(null), S = w(!1), H = () => {
+      S.value = !S.value, S.value && r.stickers.length === 0 && r.fetchStickers();
+    }, R = (u) => {
+      r.sendSticker(u), S.value = !1, F();
+    }, V = (u) => {
+      const s = u.trim().split(/\s+/);
+      return s.length >= 2 ? `${s[0]} ${s[1][0]}.` : u;
+    }, W = (u) => u.userId === l.currentUserId ? "Вы" : V(u.userName || "Support"), i = (u) => u.messageType === "sticker" ? "[Стикер]" : u.text || "", t = (u) => {
+      const s = document.querySelector(`.gig-message-row[data-message-id="${u}"]`);
+      s && (s.scrollIntoView({ behavior: "smooth", block: "center" }), s.classList.add("gig-highlighted"), setTimeout(() => s.classList.remove("gig-highlighted"), 1500));
+    }, f = w(null), g = (u) => {
+      f.value = u;
+    }, o = () => {
+      f.value = null;
     };
-    let C = 0, S = 0, M = 0, z = 0, U = 0, T = 0;
-    const G = (h) => {
-      h.button === 0 && (p.value = !0, C = h.clientX, S = h.clientY, U = r.value.x, T = r.value.y, window.addEventListener("mousemove", E), window.addEventListener("mouseup", m));
-    }, E = (h) => {
-      p.value && (r.value = {
-        x: U - (h.clientX - C),
-        y: T - (h.clientY - S)
-      });
-    }, d = (h, a) => {
-      h.preventDefault(), o.value = a, C = h.clientX, S = h.clientY, M = u.value.width, z = u.value.height, U = r.value.x, T = r.value.y, window.addEventListener("mousemove", n), window.addEventListener("mouseup", m);
-    }, n = (h) => {
-      if (!o.value) return;
-      const a = C - h.clientX, y = S - h.clientY;
-      if (o.value === "left" || o.value === "corner") {
-        const x = M + a;
-        x > 320 && x < 800 && (u.value.width = x);
+    let d = 0, M = 0, E = 0, Q = 0, O = 0, X = 0;
+    const ae = (u) => {
+      u.button === 0 && (z.value = !0, d = u.clientX, M = u.clientY, O = a.value.x, X = a.value.y, window.addEventListener("mousemove", Z), window.addEventListener("mouseup", K));
+    }, Z = (u) => {
+      if (!z.value) return;
+      let s = O - (u.clientX - d), h = X - (u.clientY - M);
+      const x = window.innerWidth - p.value.width, B = window.innerHeight - p.value.height;
+      s < 0 && (s = 0), s > x && (s = x), h < 0 && (h = 0), h > B && (h = B), a.value = { x: s, y: h };
+    }, Y = (u, s) => {
+      u.preventDefault(), $.value = s, d = u.clientX, M = u.clientY, E = p.value.width, Q = p.value.height, O = a.value.x, X = a.value.y, window.addEventListener("mousemove", ee), window.addEventListener("mouseup", K);
+    }, ee = (u) => {
+      if (!$.value) return;
+      const s = d - u.clientX, h = M - u.clientY;
+      if ($.value === "left" || $.value === "corner") {
+        let x = E + s;
+        const B = window.innerWidth - a.value.x;
+        x > B && (x = B), x >= 320 && (p.value.width = x);
       }
-      if (o.value === "top" || o.value === "corner") {
-        const x = z + y;
-        x > 400 && x < 900 && (u.value.height = x);
+      if ($.value === "top" || $.value === "corner") {
+        let x = Q + h;
+        const B = window.innerHeight - a.value.y;
+        x > B && (x = B), x >= 400 && (p.value.height = x);
       }
-    }, m = () => {
-      p.value = !1, o.value = null, window.removeEventListener("mousemove", E), window.removeEventListener("mousemove", n);
-    }, H = () => {
-      g.value.trim() && (t("send", g.value), g.value = "", l.value && (l.value.style.height = "auto"), W());
-    }, X = () => {
-      l.value && (l.value.style.height = "auto", l.value.style.height = Math.min(l.value.scrollHeight, 120) + "px");
-    }, W = async () => {
-      await Z(), i.value && (i.value.scrollTop = i.value.scrollHeight);
+    }, K = () => {
+      z.value = !1, $.value = null, window.removeEventListener("mousemove", Z), window.removeEventListener("mousemove", ee);
+    }, P = () => {
+      const u = window.innerWidth - p.value.width, s = window.innerHeight - p.value.height;
+      a.value.x < 0 && (a.value.x = 0), a.value.x > u && u > 0 ? a.value.x = u : a.value.x > window.innerWidth && (a.value.x = 0), a.value.y < 0 && (a.value.y = 0), a.value.y > s && s > 0 ? a.value.y = s : a.value.y > window.innerHeight && (a.value.y = 0);
+    }, te = () => {
+      m.value.trim() && (C("send", m.value), m.value = "", b.value && (b.value.style.height = "auto"), F());
+    }, le = () => {
+      b.value && (b.value.style.height = "auto", b.value.style.height = Math.min(b.value.scrollHeight, 120) + "px");
+    }, F = async () => {
+      await me(), U.value && (U.value.scrollTop = U.value.scrollHeight);
     };
-    return N(W), V(m), (h, a) => (f(), w("div", {
+    return ie(() => {
+      F(), window.addEventListener("resize", P), P();
+    }), ne(() => {
+      K(), window.removeEventListener("resize", P);
+    }), (u, s) => (c(), v("div", {
       class: "gig-chat-window",
-      style: A({
-        width: u.value.width + "px",
-        height: u.value.height + "px",
-        bottom: r.value.y + "px",
-        right: r.value.x + "px",
-        cursor: p.value ? "grabbing" : "auto"
+      style: ue({
+        width: p.value.width + "px",
+        height: p.value.height + "px",
+        bottom: a.value.y + "px",
+        right: a.value.x + "px",
+        cursor: z.value ? "grabbing" : "auto"
       })
     }, [
-      s("div", {
+      e("div", {
         class: "gig-resizer gig-resizer-l",
-        onMousedown: a[0] || (a[0] = (y) => d(y, "left"))
+        onMousedown: s[0] || (s[0] = (h) => Y(h, "left"))
       }, null, 32),
-      s("div", {
+      e("div", {
         class: "gig-resizer gig-resizer-t",
-        onMousedown: a[1] || (a[1] = (y) => d(y, "top"))
+        onMousedown: s[1] || (s[1] = (h) => Y(h, "top"))
       }, null, 32),
-      s("div", {
+      e("div", {
         class: "gig-resizer gig-resizer-tl",
-        onMousedown: a[2] || (a[2] = (y) => d(y, "corner"))
+        onMousedown: s[2] || (s[2] = (h) => Y(h, "corner"))
       }, null, 32),
-      s("div", {
+      e("div", {
         class: "gig-chat-header",
-        onMousedown: G
+        onMousedown: ae
       }, [
-        a[6] || (a[6] = P('<div class="gig-header-left"><div class="gig-header-icon"><svg viewBox="0 0 24 24" width="22" height="22" stroke="currentColor" fill="none" stroke-width="2"><path d="M3 18v-6a9 9 0 0 1 18 0v6"></path><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"></path></svg></div><div><h3 class="gig-header-title">Чат поддержки</h3><div class="gig-header-status"><div class="gig-status-dot"></div><span>Мы онлайн!</span></div></div></div>', 1)),
-        s("button", {
+        s[10] || (s[10] = ge('<div class="gig-header-left"><div class="gig-header-icon"><svg viewBox="0 0 24 24" width="22" height="22" stroke="currentColor" fill="none" stroke-width="2"><path d="M3 18v-6a9 9 0 0 1 18 0v6"></path><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"></path></svg></div><div><h3 class="gig-header-title">Чат поддержки</h3><div class="gig-header-status"><div class="gig-status-dot"></div><span>Мы онлайн!</span></div></div></div>', 1)),
+        e("button", {
           class: "gig-btn-icon",
-          onClick: a[3] || (a[3] = D((y) => h.$emit("close"), ["stop"])),
+          onClick: s[3] || (s[3] = D((h) => u.$emit("close"), ["stop"])),
           style: { opacity: "0.8" }
-        }, [...a[5] || (a[5] = [
-          s("svg", {
+        }, [...s[9] || (s[9] = [
+          e("svg", {
             viewBox: "0 0 24 24",
             width: "22",
             height: "22",
@@ -243,13 +436,13 @@ const ie = se("gigSupportChat", () => {
             fill: "none",
             "stroke-width": "2.5"
           }, [
-            s("line", {
+            e("line", {
               x1: "18",
               y1: "6",
               x2: "6",
               y2: "18"
             }),
-            s("line", {
+            e("line", {
               x1: "6",
               y1: "6",
               x2: "18",
@@ -258,25 +451,131 @@ const ie = se("gigSupportChat", () => {
           ], -1)
         ])])
       ], 32),
-      s("div", {
+      e("div", {
         ref_key: "messagesArea",
-        ref: i,
+        ref: U,
         class: "gig-messages-area"
       }, [
-        e.messages.length === 0 ? (f(), w("div", ve, " Здесь будет история переписки ")) : $("", !0),
-        (f(!0), w(j, null, F(e.messages, (y) => (f(), K(de, {
-          key: y.id,
-          message: y,
-          "current-user-id": e.currentUserId
+        n.messages.length === 0 ? (c(), v("div", _e, " Здесь будет история переписки ")) : I("", !0),
+        (c(!0), v(N, null, se(n.messages, (h) => (c(), oe(Le, {
+          key: h.id,
+          message: h,
+          "current-user-id": n.currentUserId,
+          onReply: s[4] || (s[4] = (x) => y(r).replyingToMessage = x),
+          onScrollTo: t,
+          onOpenImage: g
         }, null, 8, ["message", "current-user-id"]))), 128))
       ], 512),
-      s("div", me, [
-        s("div", pe, [
-          s("div", {
+      _(G, { name: "gig-fade" }, {
+        default: A(() => [
+          S.value ? (c(), v("div", Ge, [
+            e("div", Ae, [
+              s[12] || (s[12] = e("span", { style: { "font-size": "11px", "font-weight": "700", color: "#94a3b8", "text-transform": "uppercase" } }, "Выберите стикер", -1)),
+              e("button", {
+                class: "gig-btn-icon",
+                style: { color: "#94a3b8", width: "24px", height: "24px" },
+                onClick: s[5] || (s[5] = (h) => S.value = !1)
+              }, [...s[11] || (s[11] = [
+                e("svg", {
+                  viewBox: "0 0 24 24",
+                  width: "20",
+                  height: "20",
+                  stroke: "currentColor",
+                  fill: "none",
+                  "stroke-width": "2.5"
+                }, [
+                  e("line", {
+                    x1: "18",
+                    y1: "6",
+                    x2: "6",
+                    y2: "18"
+                  }),
+                  e("line", {
+                    x1: "6",
+                    y1: "6",
+                    x2: "18",
+                    y2: "18"
+                  })
+                ], -1)
+              ])])
+            ]),
+            e("div", Ve, [
+              y(r).isLoadingStickers ? (c(), v("div", De, " Загрузка... ")) : y(r).stickers.length === 0 ? (c(), v("div", Ne, " Стикеры не найдены ")) : (c(), v("div", Oe, [
+                (c(!0), v(N, null, se(y(r).stickers, (h) => (c(), v("div", {
+                  key: h.id,
+                  class: "gig-sticker-item",
+                  onClick: (x) => R(h.id)
+                }, [
+                  e("img", {
+                    src: `data:${h.mimeType || "image/png"};base64,${h.base64}`,
+                    class: "gig-sticker-thumbnail",
+                    alt: h.name
+                  }, null, 8, Ye)
+                ], 8, Xe))), 128))
+              ]))
+            ])
+          ])) : I("", !0)
+        ]),
+        _: 1
+      }),
+      e("div", Ke, [
+        _(G, { name: "gig-fade" }, {
+          default: A(() => [
+            y(r).replyingToMessage ? (c(), v("div", Pe, [
+              s[14] || (s[14] = e("div", { class: "gig-reply-icon" }, [
+                e("svg", {
+                  viewBox: "0 0 24 24",
+                  width: "16",
+                  height: "16",
+                  fill: "none",
+                  stroke: "var(--gig-brand-dark-green)",
+                  "stroke-width": "2.5"
+                }, [
+                  e("polyline", { points: "9 17 4 12 9 7" }),
+                  e("path", { d: "M20 18v-2a4 4 0 0 0-4-4H4" })
+                ])
+              ], -1)),
+              e("div", Fe, [
+                e("div", je, T(W(y(r).replyingToMessage)), 1),
+                e("div", qe, T(i(y(r).replyingToMessage)), 1)
+              ]),
+              e("button", {
+                class: "gig-btn-icon gig-reply-close",
+                style: { color: "#94a3b8", width: "20px", height: "20px", "flex-shrink": "0" },
+                onClick: s[6] || (s[6] = (h) => y(r).replyingToMessage = null)
+              }, [...s[13] || (s[13] = [
+                e("svg", {
+                  viewBox: "0 0 24 24",
+                  width: "16",
+                  height: "16",
+                  stroke: "currentColor",
+                  fill: "none",
+                  "stroke-width": "2.5"
+                }, [
+                  e("line", {
+                    x1: "18",
+                    y1: "6",
+                    x2: "6",
+                    y2: "18"
+                  }),
+                  e("line", {
+                    x1: "6",
+                    y1: "6",
+                    x2: "18",
+                    y2: "18"
+                  })
+                ], -1)
+              ])])
+            ])) : I("", !0)
+          ]),
+          _: 1
+        }),
+        e("div", Je, [
+          e("div", {
             class: "gig-input-star",
-            onClick: I
-          }, [...a[7] || (a[7] = [
-            s("svg", {
+            onClick: H
+          }, [...s[15] || (s[15] = [
+            e("svg", {
               viewBox: "0 0 24 24",
               width: "20",
               height: "20",
@@ -284,114 +583,166 @@ const ie = se("gigSupportChat", () => {
               stroke: "currentColor",
               "stroke-width": "2"
             }, [
-              s("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })
+              e("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" })
             ], -1)
           ])]),
-          q(s("textarea", {
+          de(e("textarea", {
             ref_key: "textareaRef",
-            ref: l,
-            "onUpdate:modelValue": a[4] || (a[4] = (y) => g.value = y),
+            ref: b,
+            "onUpdate:modelValue": s[7] || (s[7] = (h) => m.value = h),
             placeholder: "Напишите сообщение...",
             class: "gig-textarea",
             rows: "1",
-            onKeydown: J(D(H, ["exact", "prevent"]), ["enter"]),
-            onInput: X
-          }, null, 40, he), [
-            [Q, g.value]
+            onKeydown: ce(D(te, ["exact", "prevent"]), ["enter"]),
+            onInput: le
+          }, null, 40, Qe), [
+            [ve, m.value]
           ]),
-          s("button", {
-            class: L(["gig-send-btn", { active: g.value.trim() }]),
-            disabled: !g.value.trim(),
-            onClick: H
+          e("button", {
+            class: L(["gig-send-btn", { active: m.value.trim() }]),
+            disabled: !m.value.trim(),
+            onClick: te
           }, [
-            (f(), w("svg", ye, [...a[8] || (a[8] = [
-              s("path", { d: "M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" }, null, -1)
+            (c(), v("svg", et, [...s[16] || (s[16] = [
+              e("path", { d: "M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" }, null, -1)
             ])]))
-          ], 10, fe)
+          ], 10, Ze)
         ]),
-        a[9] || (a[9] = s("div", { class: "gig-footer" }, [
-          s("div", { class: "gig-footer-line" }),
-          s("span", { class: "gig-footer-text" }, "Работает на GigSupport"),
-          s("div", { class: "gig-footer-line" })
+        s[17] || (s[17] = e("div", { class: "gig-footer" }, [
+          e("div", { class: "gig-footer-line" }),
+          e("span", { class: "gig-footer-text" }, "Работает на GigSupport"),
+          e("div", { class: "gig-footer-line" })
         ], -1))
-      ])
+      ]),
+      _(G, { name: "gig-fade" }, {
+        default: A(() => [
+          f.value ? (c(), v("div", {
+            key: 0,
+            class: "gig-image-viewer",
+            onClick: o
+          }, [
+            e("button", {
+              class: "gig-btn-icon gig-image-viewer-close",
+              onClick: D(o, ["stop"])
+            }, [...s[18] || (s[18] = [
+              e("svg", {
+                viewBox: "0 0 24 24",
+                width: "28",
+                height: "28",
+                stroke: "currentColor",
+                fill: "none",
+                "stroke-width": "2"
+              }, [
+                e("line", {
+                  x1: "18",
+                  y1: "6",
+                  x2: "6",
+                  y2: "18"
+                }),
+                e("line", {
+                  x1: "6",
+                  y1: "6",
+                  x2: "18",
+                  y2: "18"
+                })
+              ], -1)
+            ])]),
+            e("img", {
+              src: f.value,
+              alt: "Просмотр",
+              onClick: s[8] || (s[8] = D(() => {
+              }, ["stop"]))
+            }, null, 8, tt)
+          ])) : I("", !0)
+        ]),
+        _: 1
+      })
     ], 4));
   }
-}), ke = { class: "gig-chat-wrapper" }, xe = {
+}), it = { class: "gig-chat-wrapper" }, nt = {
   key: 0,
   class: "gig-chat-badge"
-}, Ce = {
-  key: 1,
+}, ot = { class: "gig-trigger-icon-wrapper" }, at = {
+  key: 0,
+  class: "gig-trigger-icon",
   viewBox: "0 0 24 24",
-  width: "32",
-  height: "32",
+  width: "36",
+  height: "36",
   fill: "none",
   stroke: "white",
   "stroke-width": "2"
-}, Se = {
-  key: 2,
+}, lt = {
+  key: 1,
+  class: "gig-trigger-icon",
   viewBox: "0 0 24 24",
-  width: "32",
-  height: "32",
+  width: "36",
+  height: "36",
   fill: "none",
   stroke: "white",
   "stroke-width": "2"
-}, Me = /* @__PURE__ */ B({
+}, rt = /* @__PURE__ */ q({
   __name: "GigSupportChat",
   props: {
     config: {}
   },
-  setup(e) {
-    const v = e, t = ie();
-    return N(() => {
-      t.init(v.config), t.connect();
-    }), V(() => {
-      t.disconnect();
-    }), (g, i) => (f(), w("div", ke, [
-      _(ee, { name: "gig-fade" }, {
-        default: te(() => [
-          k(t).isWidgetOpen ? (f(), K(we, {
+  setup(n) {
+    const k = n, l = J();
+    return ie(() => {
+      l.init(k.config), l.connect();
+    }), ne(() => {
+      l.disconnect();
+    }), (C, r) => (c(), v("div", it, [
+      _(G, { name: "gig-popup" }, {
+        default: A(() => [
+          y(l).isWidgetOpen ? (c(), oe(st, {
             key: 0,
-            messages: k(t).messages,
-            "is-connected": k(t).isConnected,
-            "current-user-id": k(t).currentUserId,
-            onSend: i[0] || (i[0] = (l) => k(t).sendMessage(l)),
-            onClose: i[1] || (i[1] = (l) => k(t).toggleWidget())
-          }, null, 8, ["messages", "is-connected", "current-user-id"])) : $("", !0)
+            messages: y(l).messages,
+            "is-connected": y(l).isConnected,
+            "current-user-id": y(l).currentUserId,
+            onSend: r[0] || (r[0] = (m) => y(l).sendMessage(m)),
+            onClose: r[1] || (r[1] = (m) => y(l).toggleWidget())
+          }, null, 8, ["messages", "is-connected", "current-user-id"])) : I("", !0)
         ]),
         _: 1
       }),
-      s("button", {
-        class: "gig-chat-trigger",
-        onClick: i[2] || (i[2] = (l) => k(t).toggleWidget())
+      e("button", {
+        class: L(["gig-chat-trigger", { "is-open": y(l).isWidgetOpen }]),
+        onClick: r[2] || (r[2] = (m) => y(l).toggleWidget())
       }, [
-        k(t).unreadCount > 0 ? (f(), w("div", xe, R(k(t).unreadCount), 1)) : $("", !0),
-        k(t).isWidgetOpen ? (f(), w("svg", Se, [...i[4] || (i[4] = [
-          s("line", {
-            x1: "18",
-            y1: "6",
-            x2: "6",
-            y2: "18"
-          }, null, -1),
-          s("line", {
-            x1: "6",
-            y1: "6",
-            x2: "18",
-            y2: "18"
-          }, null, -1)
-        ])])) : (f(), w("svg", Ce, [...i[3] || (i[3] = [
-          s("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }, null, -1)
-        ])]))
-      ])
+        y(l).unreadCount > 0 ? (c(), v("div", nt, T(y(l).unreadCount), 1)) : I("", !0),
+        e("div", ot, [
+          _(G, { name: "gig-icon-spin" }, {
+            default: A(() => [
+              y(l).isWidgetOpen ? (c(), v("svg", lt, [...r[4] || (r[4] = [
+                e("line", {
+                  x1: "18",
+                  y1: "6",
+                  x2: "6",
+                  y2: "18"
+                }, null, -1),
+                e("line", {
+                  x1: "6",
+                  y1: "6",
+                  x2: "18",
+                  y2: "18"
+                }, null, -1)
+              ])])) : (c(), v("svg", at, [...r[3] || (r[3] = [
+                e("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }, null, -1)
+              ])]))
+            ]),
+            _: 1
+          })
+        ])
+      ], 2)
     ]));
   }
-}), Te = {
-  install: (e) => {
-    e.component("GigSupportChat", Me);
+}), ct = {
+  install: (n) => {
+    n.component("GigSupportChat", rt);
   }
 };
 export {
-  Me as GigSupportChat,
-  Te as default,
-  ie as useSupportChat
+  rt as GigSupportChat,
+  ct as default,
+  J as useSupportChat
 };