@vunex/support-chat 1.0.3 → 1.0.6

package/dist/components/ChatMessage.vue.d.ts

@@ -1,5 +1,6 @@
+import { ChatMessage as ChatMessageType } from '../store/supportChat';
 type __VLS_Props = {
-    message: any;
+    message: ChatMessageType;
     currentUserId: string;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {

package/dist/components/ChatWindow.vue.d.ts

@@ -1,13 +1,16 @@
+import { ChatMessage as ChatMessageType } from '../store/supportChat';
 type __VLS_Props = {
-    messages: any[];
-    isConnected: boolean;
+    messages: ChatMessageType[];
     currentUserId: string;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    send: (...args: any[]) => void;
     close: (...args: any[]) => void;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSend?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    messagesContainer: HTMLDivElement;
+    messagesArea: HTMLDivElement;
+    textareaRef: HTMLTextAreaElement;
 }, HTMLDivElement>;
 export default _default;

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

@@ -1,299 +1,255 @@
-import { ref as p, defineComponent as G, computed as j, openBlock as v, createElementBlock as h, normalizeClass as R, createElementVNode as e, toDisplayString as M, createCommentVNode as $, watch as J, onMounted as P, onUnmounted as X, normalizeStyle as Q, withModifiers as K, Fragment as A, renderList as O, createBlock as Y, unref as m, createVNode as L, Transition as z, withCtx as B, createStaticVNode as Z, withDirectives as _, withKeys as ee, vModelText as se, nextTick as te } from "vue";
-import { defineStore as ne } from "pinia";
-import { io as ie } from "socket.io-client";
-const q = ne("gigSupportChat", () => {
-  const s = p(null), w = p([]), n = p(!1), u = p(!1), i = p(0), d = p(""), g = p([]), l = p(!1), y = p(null), c = p(null), k = (x) => {
-    c.value = x;
-  }, C = () => {
-    var x;
-    (x = s.value) != null && x.connected || !c.value || (s.value = ie(c.value.apiUrl, {
-      path: c.value.path || "/ws",
+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",
       transports: ["websocket", "polling"],
       auth: {
-        apiKey: c.value.apiKey,
-        uuid: c.value.uuid,
-        metaUser: c.value.metaUser
+        apiKey: o.value.apiKey,
+        uuid: o.value.uuid,
+        metaUser: o.value.metaUser
       }
-    }), s.value.on("connect", () => {
-      console.log("[GigSupportChat] Connected"), n.value = !0;
-    }), s.value.on("connected", (o) => {
-      console.log("[GigSupportChat] Registered as:", o.userId), d.value = o.userId, T();
-    }), s.value.on("disconnect", () => {
-      console.log("[GigSupportChat] Disconnected"), n.value = !1;
-    }), s.value.on("new_message", (o) => {
-      o.status === "SUCCESS" && (w.value.find((f) => f.id === o.message.id) || (w.value.push(o.message), u.value || i.value++));
-    }), s.value.on("message_sent", (o) => {
-      o.status === "SUCCESS" && (w.value.find((f) => f.id === o.message.id) || w.value.push(o.message));
-    }), s.value.on("history", (o) => {
-      o.status === "SUCCESS" && (w.value = o.messages);
-    }), s.value.on("error", (o) => {
-      console.error("[GigSupportChat] Socket error:", o);
+    }), 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);
     }));
-  }, U = () => {
-    s.value && (s.value.disconnect(), s.value = null), n.value = !1, w.value = [], i.value = 0, d.value = "";
-  }, E = (x) => {
-    var o, f;
-    !s.value || !n.value || (s.value.emit("send_message", {
-      userId: d.value,
-      text: x,
-      replyToMessageId: (o = y.value) == null ? void 0 : o.id,
-      metaUser: (f = c.value) == null ? void 0 : f.metaUser
-    }), y.value = null);
-  }, T = () => {
-    !s.value || !d.value || s.value.emit("get_history", {
-      userId: d.value,
+  }, 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,
       limit: 50,
       offset: 0
     });
   };
   return {
-    messages: w,
-    isConnected: n,
-    isWidgetOpen: u,
+    messages: v,
+    isConnected: t,
+    isWidgetOpen: g,
     unreadCount: i,
-    currentUserId: d,
-    stickers: g,
-    isLoadingStickers: l,
-    replyingToMessage: y,
-    init: k,
-    connect: C,
-    disconnect: U,
-    sendMessage: E,
-    sendSticker: (x) => {
-      var o, f;
-      !s.value || !n.value || (s.value.emit("send_message", {
-        userId: d.value,
-        stickerId: x,
+    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,
         messageType: "sticker",
-        replyToMessageId: (o = y.value) == null ? void 0 : o.id,
-        metaUser: (f = c.value) == null ? void 0 : f.metaUser
-      }), y.value = null);
+        replyToMessageId: (n = p.value) == null ? void 0 : n.id,
+        metaUser: (m = o.value) == null ? void 0 : m.metaUser
+      }), p.value = null);
     },
     fetchStickers: async () => {
-      var x;
-      if ((x = c.value) != null && x.apiUrl) {
-        l.value = !0;
+      var d;
+      if ((d = o.value) != null && d.apiUrl) {
+        u.value = !0;
         try {
-          const f = await (await fetch(`${c.value.apiUrl}/api/v1.0/stickers?activeOnly=true`, {
+          const m = await (await fetch(`${o.value.apiUrl}/api/v1.0/stickers?activeOnly=true`, {
             headers: {
-              "x-api-key": c.value.apiKey || ""
+              "x-api-key": o.value.apiKey || ""
             }
           })).json();
-          f.status === "SUCCESS" && (g.value = f.content);
-        } catch (o) {
-          console.error("[GigSupportChat] Error fetching stickers:", o);
+          m.status === "SUCCESS" && (r.value = m.content);
+        } catch (n) {
+          console.error("[GigSupportChat] Error fetching stickers:", n);
         } finally {
-          l.value = !1;
+          u.value = !1;
         }
       }
     },
     toggleWidget: () => {
-      u.value = !u.value, u.value && (i.value = 0);
+      g.value = !g.value, g.value && (i.value = 0);
     },
-    loadHistory: T,
-    startReply: (x) => {
-      y.value = x;
+    loadHistory: M,
+    startReply: (d) => {
+      p.value = d;
     },
     cancelReply: () => {
-      y.value = null;
+      p.value = null;
     }
   };
-}), oe = ["data-message-id"], ae = {
+}), ae = ["data-message-id"], oe = {
   key: 0,
   class: "gig-message-author"
-}, le = { class: "gig-author-name" }, re = { class: "gig-reply-author" }, ue = { class: "gig-reply-text" }, ge = ["src", "alt"], ce = ["innerHTML"], de = { class: "gig-message-meta" }, ve = { class: "gig-message-time" }, pe = /* @__PURE__ */ G({
+}, le = ["src", "alt"], re = ["innerHTML"], ue = { class: "gig-message-time" }, ge = /* @__PURE__ */ B({
   __name: "ChatMessage",
   props: {
     message: {},
     currentUserId: {}
   },
   emits: ["reply", "scroll-to"],
-  setup(s) {
-    const w = s, n = j(() => w.message.userId === w.currentUserId), u = (g) => new Date(g).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), i = (g) => {
-      if (!g || g === "GIGMARKET Support") return g;
-      const l = g.trim().split(/\s+/);
-      return l.length >= 2 && l[1] ? `${l[0]} ${l[1][0]}.` : g;
-    }, d = (g) => {
-      if (!g) return "";
-      const y = ((k) => k.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;"))(g), c = /(https?:\/\/[^\s<]+[^\s<.,;:!?'")\]}>])/gi;
-      return y.replace(c, (k) => `<a href="${k.replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, '"').replace(/&#039;/g, "'")}" target="_blank" rel="noopener noreferrer">${k}</a>`);
+  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>`);
     };
-    return (g, l) => (v(), h("div", {
-      class: R(["gig-message-wrapper", n.value ? "sent" : "received"]),
-      "data-message-id": s.message.id
+    return (r, u) => (f(), w("div", {
+      class: L(["gig-message-row", t.value ? "sent" : "received"]),
+      "data-message-id": e.message.id
     }, [
-      n.value ? $("", !0) : (v(), h("div", ae, [
-        l[2] || (l[2] = e("div", { class: "gig-author-avatar" }, "GP", -1)),
-        e("span", le, M(i(s.message.userName || "Support")), 1)
-      ])),
-      e("div", {
-        class: R(["gig-message-bubble", s.message.messageType === "sticker" ? "is-sticker" : ""])
+      s("div", {
+        class: L(["gig-message-bubble", { "is-sticker": e.message.messageType === "sticker" }])
       }, [
-        s.message.replyToMessage ? (v(), h("div", {
-          key: 0,
-          class: "gig-reply-preview",
-          onClick: l[0] || (l[0] = (y) => g.$emit("scroll-to", s.message.replyToMessageId))
-        }, [
-          e("div", re, M(s.message.replyToMessage.userId === s.currentUserId ? "Вы" : i(s.message.replyToMessage.userName || "Support")), 1),
-          e("div", ue, M(s.message.replyToMessage.messageType === "sticker" ? "[Стикер]" : s.message.replyToMessage.text), 1)
-        ])) : $("", !0),
-        s.message.messageType === "sticker" && s.message.sticker ? (v(), h("img", {
+        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,
-          src: `data:${s.message.sticker.mimeType || "image/png"};base64,${s.message.sticker.base64}`,
-          class: "gig-sticker-img",
-          alt: s.message.sticker.name
-        }, null, 8, ge)) : (v(), h("div", {
+          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,
-          class: "gig-message-text",
-          innerHTML: d(s.message.text || "")
-        }, null, 8, ce)),
-        e("div", de, [
-          e("span", ve, M(u(s.message.createdAt)), 1)
-        ]),
-        e("button", {
-          class: "gig-message-reply-btn",
-          onClick: l[1] || (l[1] = (y) => g.$emit("reply", s.message))
-        }, [...l[3] || (l[3] = [
-          e("svg", {
-            viewBox: "0 0 24 24",
-            width: "14",
-            height: "14",
-            fill: "none",
-            stroke: "currentColor",
-            "stroke-width": "2"
-          }, [
-            e("polyline", { points: "9 17 4 12 9 7" }),
-            e("path", { d: "M20 18v-2a4 4 0 0 0-4-4H4" })
-          ], -1)
-        ])])
+          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, oe));
+    ], 10, ae));
   }
-}), F = (s, w) => {
-  const n = s.__vccOpts || s;
-  for (const [u, i] of w)
-    n[u] = i;
-  return n;
-}, me = /* @__PURE__ */ F(pe, [["__scopeId", "data-v-0f2196d9"]]), he = { class: "gig-header-info" }, ye = { class: "gig-status-area" }, fe = { class: "gig-status-text" }, we = {
+}), 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 = {
   key: 0,
-  class: "gig-empty-state"
-}, ke = {
-  key: 0,
-  class: "gig-sticker-picker"
-}, xe = { class: "gig-picker-header" }, Ce = { class: "gig-sticker-grid" }, Se = {
-  key: 0,
-  class: "gig-loading"
-}, Me = ["onClick"], $e = ["src", "alt"], Te = {
-  key: 0,
-  class: "gig-reply-bar"
-}, be = { class: "gig-reply-content" }, Ie = { class: "gig-reply-title" }, Ue = { class: "gig-reply-preview" }, Ee = { class: "gig-chat-input-area" }, Re = { class: "gig-input-wrapper" }, Le = ["onKeydown"], ze = ["disabled"], Be = /* @__PURE__ */ G({
+  style: { "text-align": "center", color: "#94a3b8", "padding-top": "40px" }
+}, me = { class: "gig-input-area" }, pe = { class: "gig-input-box" }, he = ["onKeydown"], fe = ["disabled"], ye = {
+  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({
   __name: "ChatWindow",
   props: {
     messages: {},
-    isConnected: { type: Boolean },
     currentUserId: {}
   },
-  emits: ["close"],
-  setup(s, { emit: w }) {
-    const n = s, u = q(), i = p(""), d = p(null), g = p({ x: 30, y: 110 }), l = p({ width: 440, height: 600 }), y = p(!1), c = p(null), k = p({ x: 0, y: 0, w: 0, h: 0 }), C = p(!1), U = () => {
-      C.value = !C.value, C.value && u.stickers.length === 0 && u.fetchStickers();
-    }, E = (a) => {
-      u.sendSticker(a), C.value = !1, b();
-    }, T = () => {
-      i.value.trim() && (u.sendMessage(i.value), i.value = "", b());
-    }, H = (a) => a.userId === n.currentUserId ? "вам" : V(a.userName || "Support"), N = (a) => a.messageType === "sticker" ? "[Стикер]" : a.text || "", V = (a) => a.trim().split(/\s+/)[0], b = async () => {
-      await te(), d.value && (d.value.scrollTop = d.value.scrollHeight);
-    }, W = (a) => {
-      var r;
-      const t = (r = d.value) == null ? void 0 : r.querySelector(`[data-message-id="${a}"]`);
-      t && (t.scrollIntoView({ behavior: "smooth", block: "center" }), t.classList.add("gig-highlight"), setTimeout(() => t.classList.remove("gig-highlight"), 2e3));
-    }, x = (a) => {
-      a.target.closest("button") || (y.value = !0, k.value = { x: a.clientX + g.value.x, y: a.clientY + g.value.y, w: 0, h: 0 }, window.addEventListener("mousemove", o), window.addEventListener("mouseup", I));
-    }, o = (a) => {
-      y.value && (g.value = { x: k.value.x - a.clientX, y: k.value.y - a.clientY });
-    }, f = (a, t) => {
-      a.preventDefault(), c.value = t, k.value = { x: a.clientX, y: a.clientY, w: l.value.width, h: l.value.height }, window.addEventListener("mousemove", D), window.addEventListener("mouseup", I);
-    }, D = (a) => {
-      if (!c.value) return;
-      const t = k.value.x - a.clientX, r = k.value.y - a.clientY;
-      if (c.value === "left" || c.value === "corner") {
-        const S = k.value.w + t;
-        S > 320 && S < 800 && (l.value.width = S);
+  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;
+    };
+    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);
       }
-      if (c.value === "top" || c.value === "corner") {
-        const S = k.value.h + r;
-        S > 400 && S < 900 && (l.value.height = S);
+      if (o.value === "top" || o.value === "corner") {
+        const x = z + y;
+        x > 400 && x < 900 && (u.value.height = x);
       }
-    }, I = () => {
-      y.value = !1, c.value = null, window.removeEventListener("mousemove", o), window.removeEventListener("mousemove", D), window.removeEventListener("mouseup", I);
+    }, 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);
     };
-    return J(() => n.messages.length, b), P(b), X(I), (a, t) => (v(), h("div", {
+    return N(W), V(m), (h, a) => (f(), w("div", {
       class: "gig-chat-window",
-      style: Q({
-        width: l.value.width + "px",
-        height: l.value.height + "px",
-        bottom: g.value.y + "px",
-        right: g.value.x + "px",
-        cursor: y.value ? "grabbing" : "auto"
+      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"
       })
     }, [
-      e("div", {
-        class: "gig-resize-h gig-resize-left",
-        onMousedown: t[0] || (t[0] = (r) => f(r, "left"))
+      s("div", {
+        class: "gig-resizer gig-resizer-l",
+        onMousedown: a[0] || (a[0] = (y) => d(y, "left"))
       }, null, 32),
-      e("div", {
-        class: "gig-resize-h gig-resize-top",
-        onMousedown: t[1] || (t[1] = (r) => f(r, "top"))
+      s("div", {
+        class: "gig-resizer gig-resizer-t",
+        onMousedown: a[1] || (a[1] = (y) => d(y, "top"))
       }, null, 32),
-      e("div", {
-        class: "gig-resize-corner",
-        onMousedown: t[2] || (t[2] = (r) => f(r, "corner"))
+      s("div", {
+        class: "gig-resizer gig-resizer-tl",
+        onMousedown: a[2] || (a[2] = (y) => d(y, "corner"))
       }, null, 32),
-      e("div", {
+      s("div", {
         class: "gig-chat-header",
-        onMousedown: x
+        onMousedown: G
       }, [
-        t[13] || (t[13] = e("div", { class: "gig-header-brand-overlay" }, null, -1)),
-        e("div", he, [
-          t[11] || (t[11] = e("div", { class: "gig-header-avatar" }, [
-            e("svg", {
-              viewBox: "0 0 24 24",
-              width: "20",
-              height: "20",
-              fill: "none",
-              stroke: "currentColor",
-              "stroke-width": "2"
-            }, [
-              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" })
-            ])
-          ], -1)),
-          e("div", null, [
-            t[10] || (t[10] = e("h3", null, "Поддержка", -1)),
-            e("div", ye, [
-              t[9] || (t[9] = e("span", { class: "gig-status-pulse" }, null, -1)),
-              e("span", fe, M(s.isConnected ? "В сети" : "Подключение..."), 1)
-            ])
-          ])
-        ]),
-        e("button", {
-          onClick: t[3] || (t[3] = K((r) => a.$emit("close"), ["stop"])),
-          class: "gig-close-btn"
-        }, [...t[12] || (t[12] = [
-          e("svg", {
+        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", {
+          class: "gig-btn-icon",
+          onClick: a[3] || (a[3] = D((y) => h.$emit("close"), ["stop"])),
+          style: { opacity: "0.8" }
+        }, [...a[5] || (a[5] = [
+          s("svg", {
             viewBox: "0 0 24 24",
-            width: "20",
-            height: "20",
-            fill: "none",
+            width: "22",
+            height: "22",
             stroke: "currentColor",
-            "stroke-width": "2"
+            fill: "none",
+            "stroke-width": "2.5"
           }, [
-            e("line", {
+            s("line", {
               x1: "18",
               y1: "6",
               x2: "6",
               y2: "18"
             }),
-            e("line", {
+            s("line", {
               x1: "6",
               y1: "6",
               x2: "18",
@@ -302,101 +258,25 @@ const q = ne("gigSupportChat", () => {
           ], -1)
         ])])
       ], 32),
-      e("div", {
-        class: "gig-messages-container",
-        ref_key: "messagesContainer",
-        ref: d
+      s("div", {
+        ref_key: "messagesArea",
+        ref: i,
+        class: "gig-messages-area"
       }, [
-        s.messages.length === 0 ? (v(), h("div", we, [...t[14] || (t[14] = [
-          e("div", { class: "gig-empty-icon" }, [
-            e("svg", {
-              viewBox: "0 0 24 24",
-              width: "40",
-              height: "40",
-              fill: "none",
-              stroke: "currentColor",
-              "stroke-width": "1.5"
-            }, [
-              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" })
-            ])
-          ], -1),
-          e("p", null, "Чем мы можем вам помочь?", -1)
-        ])])) : $("", !0),
-        (v(!0), h(A, null, O(s.messages, (r) => (v(), Y(me, {
-          key: r.id,
-          message: r,
-          "current-user-id": s.currentUserId,
-          onReply: t[4] || (t[4] = (S) => m(u).startReply(S)),
-          onScrollTo: W
+        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
         }, null, 8, ["message", "current-user-id"]))), 128))
       ], 512),
-      L(z, { name: "gig-slide-up" }, {
-        default: B(() => [
-          C.value ? (v(), h("div", ke, [
-            e("div", xe, [
-              t[15] || (t[15] = e("span", null, "Выберите стикер", -1)),
-              e("button", {
-                onClick: t[5] || (t[5] = (r) => C.value = !1),
-                class: "gig-picker-close"
-              }, "×")
-            ]),
-            e("div", Ce, [
-              m(u).isLoadingStickers ? (v(), h("div", Se, "...")) : $("", !0),
-              (v(!0), h(A, null, O(m(u).stickers, (r) => (v(), h("div", {
-                key: r.id,
-                class: "gig-sticker-item",
-                onClick: (S) => E(r.id)
-              }, [
-                e("img", {
-                  src: `data:${r.mimeType || "image/png"};base64,${r.base64}`,
-                  alt: r.name
-                }, null, 8, $e)
-              ], 8, Me))), 128))
-            ])
-          ])) : $("", !0)
-        ]),
-        _: 1
-      }),
-      L(z, { name: "gig-fade" }, {
-        default: B(() => [
-          m(u).replyingToMessage ? (v(), h("div", Te, [
-            t[16] || (t[16] = e("div", { class: "gig-reply-line" }, null, -1)),
-            e("div", be, [
-              e("div", Ie, "Ответ " + M(H(m(u).replyingToMessage)), 1),
-              e("div", Ue, M(N(m(u).replyingToMessage)), 1)
-            ]),
-            e("button", {
-              onClick: t[6] || (t[6] = (r) => m(u).cancelReply()),
-              class: "gig-reply-close"
-            }, "×")
-          ])) : $("", !0)
-        ]),
-        _: 1
-      }),
-      e("div", Ee, [
-        e("div", Re, [
-          e("button", {
-            class: R(["gig-sticker-toggle", { active: C.value }]),
-            onClick: U
-          }, [...t[17] || (t[17] = [
-            Z('<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" data-v-4a6ac4c2><circle cx="12" cy="12" r="10" data-v-4a6ac4c2></circle><path d="M8 14s1.5 2 4 2 4-2 4-2" data-v-4a6ac4c2></path><line x1="9" y1="9" x2="9.01" y2="9" data-v-4a6ac4c2></line><line x1="15" y1="9" x2="15.01" y2="9" data-v-4a6ac4c2></line></svg>', 1)
-          ])], 2),
-          _(e("textarea", {
-            "onUpdate:modelValue": t[7] || (t[7] = (r) => i.value = r),
-            onKeydown: ee(K(T, ["exact", "prevent"]), ["enter"]),
-            placeholder: "Введите сообщение...",
-            class: "gig-chat-input",
-            rows: "1",
-            onFocus: t[8] || (t[8] = (r) => C.value = !1)
-          }, null, 40, Le), [
-            [se, i.value]
-          ]),
-          e("button", {
-            onClick: T,
-            class: "gig-send-btn",
-            disabled: !i.value.trim()
-          }, [...t[18] || (t[18] = [
-            e("svg", {
+      s("div", me, [
+        s("div", pe, [
+          s("div", {
+            class: "gig-input-star",
+            onClick: I
+          }, [...a[7] || (a[7] = [
+            s("svg", {
               viewBox: "0 0 24 24",
               width: "20",
               height: "20",
@@ -404,26 +284,43 @@ const q = ne("gigSupportChat", () => {
               stroke: "currentColor",
               "stroke-width": "2"
             }, [
-              e("line", {
-                x1: "22",
-                y1: "2",
-                x2: "11",
-                y2: "13"
-              }),
-              e("polygon", { points: "22 2 15 22 11 13 2 9 22 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" })
             ], -1)
-          ])], 8, ze)
+          ])]),
+          q(s("textarea", {
+            ref_key: "textareaRef",
+            ref: l,
+            "onUpdate:modelValue": a[4] || (a[4] = (y) => g.value = y),
+            placeholder: "Напишите сообщение...",
+            class: "gig-textarea",
+            rows: "1",
+            onKeydown: J(D(H, ["exact", "prevent"]), ["enter"]),
+            onInput: X
+          }, null, 40, he), [
+            [Q, g.value]
+          ]),
+          s("button", {
+            class: L(["gig-send-btn", { active: g.value.trim() }]),
+            disabled: !g.value.trim(),
+            onClick: H
+          }, [
+            (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)
+            ])]))
+          ], 10, fe)
         ]),
-        t[19] || (t[19] = e("div", { class: "gig-powered-by" }, [
-          e("span", null, "Powered by GIGMARKET")
+        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" })
         ], -1))
       ])
     ], 4));
   }
-}), Ge = /* @__PURE__ */ F(Be, [["__scopeId", "data-v-4a6ac4c2"]]), He = { class: "gig-chat-wrapper" }, Ne = {
+}), ke = { class: "gig-chat-wrapper" }, xe = {
   key: 0,
   class: "gig-chat-badge"
-}, Ve = {
+}, Ce = {
   key: 1,
   viewBox: "0 0 24 24",
   width: "32",
@@ -431,7 +328,7 @@ const q = ne("gigSupportChat", () => {
   fill: "none",
   stroke: "white",
   "stroke-width": "2"
-}, We = {
+}, Se = {
   key: 2,
   viewBox: "0 0 24 24",
   width: "32",
@@ -439,62 +336,62 @@ const q = ne("gigSupportChat", () => {
   fill: "none",
   stroke: "white",
   "stroke-width": "2"
-}, De = /* @__PURE__ */ G({
+}, Me = /* @__PURE__ */ B({
   __name: "GigSupportChat",
   props: {
     config: {}
   },
-  setup(s) {
-    const w = s, n = q();
-    return P(() => {
-      n.init(w.config), n.connect();
-    }), X(() => {
-      n.disconnect();
-    }), (u, i) => (v(), h("div", He, [
-      L(z, { name: "gig-fade" }, {
-        default: B(() => [
-          m(n).isWidgetOpen ? (v(), Y(Ge, {
+  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, {
             key: 0,
-            messages: m(n).messages,
-            "is-connected": m(n).isConnected,
-            "current-user-id": m(n).currentUserId,
-            onSend: i[0] || (i[0] = (d) => m(n).sendMessage(d)),
-            onClose: i[1] || (i[1] = (d) => m(n).toggleWidget())
+            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)
         ]),
         _: 1
       }),
-      e("button", {
+      s("button", {
         class: "gig-chat-trigger",
-        onClick: i[2] || (i[2] = (d) => m(n).toggleWidget())
+        onClick: i[2] || (i[2] = (l) => k(t).toggleWidget())
       }, [
-        m(n).unreadCount > 0 ? (v(), h("div", Ne, M(m(n).unreadCount), 1)) : $("", !0),
-        m(n).isWidgetOpen ? (v(), h("svg", We, [...i[4] || (i[4] = [
-          e("line", {
+        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),
-          e("line", {
+          s("line", {
             x1: "6",
             y1: "6",
             x2: "18",
             y2: "18"
           }, null, -1)
-        ])])) : (v(), h("svg", Ve, [...i[3] || (i[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)
+        ])])) : (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)
         ])]))
       ])
     ]));
   }
-}), Pe = {
-  install: (s) => {
-    s.component("GigSupportChat", De);
+}), Te = {
+  install: (e) => {
+    e.component("GigSupportChat", Me);
   }
 };
 export {
-  De as GigSupportChat,
-  Pe as default,
-  q as useSupportChat
+  Me as GigSupportChat,
+  Te as default,
+  ie as useSupportChat
 };

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

@@ -1 +1 @@
-(function(y,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("pinia"),require("socket.io-client")):typeof define=="function"&&define.amd?define(["exports","vue","pinia","socket.io-client"],e):(y=typeof globalThis<"u"?globalThis:y||self,e(y.GigSupportChat={},y.Vue,y.Pinia,y.io))})(this,(function(y,e,L,R){"use strict";const S=L.defineStore("gigSupportChat",()=>{const t=e.ref(null),f=e.ref([]),n=e.ref(!1),c=e.ref(!1),o=e.ref(0),m=e.ref(""),d=e.ref([]),r=e.ref(!1),p=e.ref(null),g=e.ref(null),h=k=>{g.value=k},E=()=>{var k;(k=t.value)!=null&&k.connected||!g.value||(t.value=R.io(g.value.apiUrl,{path:g.value.path||"/ws",transports:["websocket","polling"],auth:{apiKey:g.value.apiKey,uuid:g.value.uuid,metaUser:g.value.metaUser}}),t.value.on("connect",()=>{console.log("[GigSupportChat] Connected"),n.value=!0}),t.value.on("connected",l=>{console.log("[GigSupportChat] Registered as:",l.userId),m.value=l.userId,V()}),t.value.on("disconnect",()=>{console.log("[GigSupportChat] Disconnected"),n.value=!1}),t.value.on("new_message",l=>{l.status==="SUCCESS"&&(f.value.find(u=>u.id===l.message.id)||(f.value.push(l.message),c.value||o.value++))}),t.value.on("message_sent",l=>{l.status==="SUCCESS"&&(f.value.find(u=>u.id===l.message.id)||f.value.push(l.message))}),t.value.on("history",l=>{l.status==="SUCCESS"&&(f.value=l.messages)}),t.value.on("error",l=>{console.error("[GigSupportChat] Socket error:",l)}))},x=()=>{t.value&&(t.value.disconnect(),t.value=null),n.value=!1,f.value=[],o.value=0,m.value=""},B=k=>{var l,u;!t.value||!n.value||(t.value.emit("send_message",{userId:m.value,text:k,replyToMessageId:(l=p.value)==null?void 0:l.id,metaUser:(u=g.value)==null?void 0:u.metaUser}),p.value=null)},V=()=>{!t.value||!m.value||t.value.emit("get_history",{userId:m.value,limit:50,offset:0})};return{messages:f,isConnected:n,isWidgetOpen:c,unreadCount:o,currentUserId:m,stickers:d,isLoadingStickers:r,replyingToMessage:p,init:h,connect:E,disconnect:x,sendMessage:B,sendSticker:k=>{var l,u;!t.value||!n.value||(t.value.emit("send_message",{userId:m.value,stickerId:k,messageType:"sticker",replyToMessageId:(l=p.value)==null?void 0:l.id,metaUser:(u=g.value)==null?void 0:u.metaUser}),p.value=null)},fetchStickers:async()=>{var k;if((k=g.value)!=null&&k.apiUrl){r.value=!0;try{const u=await(await fetch(`${g.value.apiUrl}/api/v1.0/stickers?activeOnly=true`,{headers:{"x-api-key":g.value.apiKey||""}})).json();u.status==="SUCCESS"&&(d.value=u.content)}catch(l){console.error("[GigSupportChat] Error fetching stickers:",l)}finally{r.value=!1}}},toggleWidget:()=>{c.value=!c.value,c.value&&(o.value=0)},loadHistory:V,startReply:k=>{p.value=k},cancelReply:()=>{p.value=null}}}),z=["data-message-id"],D={key:0,class:"gig-message-author"},G={class:"gig-author-name"},H={class:"gig-reply-author"},W={class:"gig-reply-text"},K=["src","alt"],q=["innerHTML"],A={class:"gig-message-meta"},O={class:"gig-message-time"},P=e.defineComponent({__name:"ChatMessage",props:{message:{},currentUserId:{}},emits:["reply","scroll-to"],setup(t){const f=t,n=e.computed(()=>f.message.userId===f.currentUserId),c=d=>new Date(d).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"}),o=d=>{if(!d||d==="GIGMARKET Support")return d;const r=d.trim().split(/\s+/);return r.length>=2&&r[1]?`${r[0]} ${r[1][0]}.`:d},m=d=>{if(!d)return"";const p=(h=>h.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;"))(d),g=/(https?:\/\/[^\s<]+[^\s<.,;:!?'")\]}>])/gi;return p.replace(g,h=>`<a href="${h.replace(/&amp;/g,"&").replace(/&lt;/g,"<").replace(/&gt;/g,">").replace(/&quot;/g,'"').replace(/&#039;/g,"'")}" target="_blank" rel="noopener noreferrer">${h}</a>`)};return(d,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["gig-message-wrapper",n.value?"sent":"received"]),"data-message-id":t.message.id},[n.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",D,[r[2]||(r[2]=e.createElementVNode("div",{class:"gig-author-avatar"},"GP",-1)),e.createElementVNode("span",G,e.toDisplayString(o(t.message.userName||"Support")),1)])),e.createElementVNode("div",{class:e.normalizeClass(["gig-message-bubble",t.message.messageType==="sticker"?"is-sticker":""])},[t.message.replyToMessage?(e.openBlock(),e.createElementBlock("div",{key:0,class:"gig-reply-preview",onClick:r[0]||(r[0]=p=>d.$emit("scroll-to",t.message.replyToMessageId))},[e.createElementVNode("div",H,e.toDisplayString(t.message.replyToMessage.userId===t.currentUserId?"Вы":o(t.message.replyToMessage.userName||"Support")),1),e.createElementVNode("div",W,e.toDisplayString(t.message.replyToMessage.messageType==="sticker"?"[Стикер]":t.message.replyToMessage.text),1)])):e.createCommentVNode("",!0),t.message.messageType==="sticker"&&t.message.sticker?(e.openBlock(),e.createElementBlock("img",{key:1,src:`data:${t.message.sticker.mimeType||"image/png"};base64,${t.message.sticker.base64}`,class:"gig-sticker-img",alt:t.message.sticker.name},null,8,K)):(e.openBlock(),e.createElementBlock("div",{key:2,class:"gig-message-text",innerHTML:m(t.message.text||"")},null,8,q)),e.createElementVNode("div",A,[e.createElementVNode("span",O,e.toDisplayString(c(t.message.createdAt)),1)]),e.createElementVNode("button",{class:"gig-message-reply-btn",onClick:r[1]||(r[1]=p=>d.$emit("reply",t.message))},[...r[3]||(r[3]=[e.createElementVNode("svg",{viewBox:"0 0 24 24",width:"14",height:"14",fill:"none",stroke:"currentColor","stroke-width":"2"},[e.createElementVNode("polyline",{points:"9 17 4 12 9 7"}),e.createElementVNode("path",{d:"M20 18v-2a4 4 0 0 0-4-4H4"})],-1)])])],2)],10,z))}}),M=(t,f)=>{const n=t.__vccOpts||t;for(const[c,o]of f)n[c]=o;return n},X=M(P,[["__scopeId","data-v-0f2196d9"]]),Y={class:"gig-header-info"},j={class:"gig-status-area"},F={class:"gig-status-text"},J={key:0,class:"gig-empty-state"},Q={key:0,class:"gig-sticker-picker"},Z={class:"gig-picker-header"},_={class:"gig-sticker-grid"},ee={key:0,class:"gig-loading"},te=["onClick"],se=["src","alt"],ne={key:0,class:"gig-reply-bar"},oe={class:"gig-reply-content"},le={class:"gig-reply-title"},ae={class:"gig-reply-preview"},re={class:"gig-chat-input-area"},ie={class:"gig-input-wrapper"},ce=["onKeydown"],de=["disabled"],ge=M(e.defineComponent({__name:"ChatWindow",props:{messages:{},isConnected:{type:Boolean},currentUserId:{}},emits:["close"],setup(t,{emit:f}){const n=t,c=S(),o=e.ref(""),m=e.ref(null),d=e.ref({x:30,y:110}),r=e.ref({width:440,height:600}),p=e.ref(!1),g=e.ref(null),h=e.ref({x:0,y:0,w:0,h:0}),E=e.ref(!1),x=()=>{E.value=!E.value,E.value&&c.stickers.length===0&&c.fetchStickers()},B=a=>{c.sendSticker(a),E.value=!1,N()},V=()=>{o.value.trim()&&(c.sendMessage(o.value),o.value="",N())},T=a=>a.userId===n.currentUserId?"вам":b(a.userName||"Support"),$=a=>a.messageType==="sticker"?"[Стикер]":a.text||"",b=a=>a.trim().split(/\s+/)[0],N=async()=>{await e.nextTick(),m.value&&(m.value.scrollTop=m.value.scrollHeight)},U=a=>{var i;const s=(i=m.value)==null?void 0:i.querySelector(`[data-message-id="${a}"]`);s&&(s.scrollIntoView({behavior:"smooth",block:"center"}),s.classList.add("gig-highlight"),setTimeout(()=>s.classList.remove("gig-highlight"),2e3))},k=a=>{a.target.closest("button")||(p.value=!0,h.value={x:a.clientX+d.value.x,y:a.clientY+d.value.y,w:0,h:0},window.addEventListener("mousemove",l),window.addEventListener("mouseup",C))},l=a=>{p.value&&(d.value={x:h.value.x-a.clientX,y:h.value.y-a.clientY})},u=(a,s)=>{a.preventDefault(),g.value=s,h.value={x:a.clientX,y:a.clientY,w:r.value.width,h:r.value.height},window.addEventListener("mousemove",I),window.addEventListener("mouseup",C)},I=a=>{if(!g.value)return;const s=h.value.x-a.clientX,i=h.value.y-a.clientY;if(g.value==="left"||g.value==="corner"){const w=h.value.w+s;w>320&&w<800&&(r.value.width=w)}if(g.value==="top"||g.value==="corner"){const w=h.value.h+i;w>400&&w<900&&(r.value.height=w)}},C=()=>{p.value=!1,g.value=null,window.removeEventListener("mousemove",l),window.removeEventListener("mousemove",I),window.removeEventListener("mouseup",C)};return e.watch(()=>n.messages.length,N),e.onMounted(N),e.onUnmounted(C),(a,s)=>(e.openBlock(),e.createElementBlock("div",{class:"gig-chat-window",style:e.normalizeStyle({width:r.value.width+"px",height:r.value.height+"px",bottom:d.value.y+"px",right:d.value.x+"px",cursor:p.value?"grabbing":"auto"})},[e.createElementVNode("div",{class:"gig-resize-h gig-resize-left",onMousedown:s[0]||(s[0]=i=>u(i,"left"))},null,32),e.createElementVNode("div",{class:"gig-resize-h gig-resize-top",onMousedown:s[1]||(s[1]=i=>u(i,"top"))},null,32),e.createElementVNode("div",{class:"gig-resize-corner",onMousedown:s[2]||(s[2]=i=>u(i,"corner"))},null,32),e.createElementVNode("div",{class:"gig-chat-header",onMousedown:k},[s[13]||(s[13]=e.createElementVNode("div",{class:"gig-header-brand-overlay"},null,-1)),e.createElementVNode("div",Y,[s[11]||(s[11]=e.createElementVNode("div",{class:"gig-header-avatar"},[e.createElementVNode("svg",{viewBox:"0 0 24 24",width:"20",height:"20",fill:"none",stroke:"currentColor","stroke-width":"2"},[e.createElementVNode("path",{d:"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"})])],-1)),e.createElementVNode("div",null,[s[10]||(s[10]=e.createElementVNode("h3",null,"Поддержка",-1)),e.createElementVNode("div",j,[s[9]||(s[9]=e.createElementVNode("span",{class:"gig-status-pulse"},null,-1)),e.createElementVNode("span",F,e.toDisplayString(t.isConnected?"В сети":"Подключение..."),1)])])]),e.createElementVNode("button",{onClick:s[3]||(s[3]=e.withModifiers(i=>a.$emit("close"),["stop"])),class:"gig-close-btn"},[...s[12]||(s[12]=[e.createElementVNode("svg",{viewBox:"0 0 24 24",width:"20",height:"20",fill:"none",stroke:"currentColor","stroke-width":"2"},[e.createElementVNode("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e.createElementVNode("line",{x1:"6",y1:"6",x2:"18",y2:"18"})],-1)])])],32),e.createElementVNode("div",{class:"gig-messages-container",ref_key:"messagesContainer",ref:m},[t.messages.length===0?(e.openBlock(),e.createElementBlock("div",J,[...s[14]||(s[14]=[e.createElementVNode("div",{class:"gig-empty-icon"},[e.createElementVNode("svg",{viewBox:"0 0 24 24",width:"40",height:"40",fill:"none",stroke:"currentColor","stroke-width":"1.5"},[e.createElementVNode("path",{d:"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"})])],-1),e.createElementVNode("p",null,"Чем мы можем вам помочь?",-1)])])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.messages,i=>(e.openBlock(),e.createBlock(X,{key:i.id,message:i,"current-user-id":t.currentUserId,onReply:s[4]||(s[4]=w=>e.unref(c).startReply(w)),onScrollTo:U},null,8,["message","current-user-id"]))),128))],512),e.createVNode(e.Transition,{name:"gig-slide-up"},{default:e.withCtx(()=>[E.value?(e.openBlock(),e.createElementBlock("div",Q,[e.createElementVNode("div",Z,[s[15]||(s[15]=e.createElementVNode("span",null,"Выберите стикер",-1)),e.createElementVNode("button",{onClick:s[5]||(s[5]=i=>E.value=!1),class:"gig-picker-close"},"×")]),e.createElementVNode("div",_,[e.unref(c).isLoadingStickers?(e.openBlock(),e.createElementBlock("div",ee,"...")):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(c).stickers,i=>(e.openBlock(),e.createElementBlock("div",{key:i.id,class:"gig-sticker-item",onClick:w=>B(i.id)},[e.createElementVNode("img",{src:`data:${i.mimeType||"image/png"};base64,${i.base64}`,alt:i.name},null,8,se)],8,te))),128))])])):e.createCommentVNode("",!0)]),_:1}),e.createVNode(e.Transition,{name:"gig-fade"},{default:e.withCtx(()=>[e.unref(c).replyingToMessage?(e.openBlock(),e.createElementBlock("div",ne,[s[16]||(s[16]=e.createElementVNode("div",{class:"gig-reply-line"},null,-1)),e.createElementVNode("div",oe,[e.createElementVNode("div",le,"Ответ "+e.toDisplayString(T(e.unref(c).replyingToMessage)),1),e.createElementVNode("div",ae,e.toDisplayString($(e.unref(c).replyingToMessage)),1)]),e.createElementVNode("button",{onClick:s[6]||(s[6]=i=>e.unref(c).cancelReply()),class:"gig-reply-close"},"×")])):e.createCommentVNode("",!0)]),_:1}),e.createElementVNode("div",re,[e.createElementVNode("div",ie,[e.createElementVNode("button",{class:e.normalizeClass(["gig-sticker-toggle",{active:E.value}]),onClick:x},[...s[17]||(s[17]=[e.createStaticVNode('<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" data-v-4a6ac4c2><circle cx="12" cy="12" r="10" data-v-4a6ac4c2></circle><path d="M8 14s1.5 2 4 2 4-2 4-2" data-v-4a6ac4c2></path><line x1="9" y1="9" x2="9.01" y2="9" data-v-4a6ac4c2></line><line x1="15" y1="9" x2="15.01" y2="9" data-v-4a6ac4c2></line></svg>',1)])],2),e.withDirectives(e.createElementVNode("textarea",{"onUpdate:modelValue":s[7]||(s[7]=i=>o.value=i),onKeydown:e.withKeys(e.withModifiers(V,["exact","prevent"]),["enter"]),placeholder:"Введите сообщение...",class:"gig-chat-input",rows:"1",onFocus:s[8]||(s[8]=i=>E.value=!1)},null,40,ce),[[e.vModelText,o.value]]),e.createElementVNode("button",{onClick:V,class:"gig-send-btn",disabled:!o.value.trim()},[...s[18]||(s[18]=[e.createElementVNode("svg",{viewBox:"0 0 24 24",width:"20",height:"20",fill:"none",stroke:"currentColor","stroke-width":"2"},[e.createElementVNode("line",{x1:"22",y1:"2",x2:"11",y2:"13"}),e.createElementVNode("polygon",{points:"22 2 15 22 11 13 2 9 22 2"})],-1)])],8,de)]),s[19]||(s[19]=e.createElementVNode("div",{class:"gig-powered-by"},[e.createElementVNode("span",null,"Powered by GIGMARKET")],-1))])],4))}}),[["__scopeId","data-v-4a6ac4c2"]]),me={class:"gig-chat-wrapper"},pe={key:0,class:"gig-chat-badge"},ue={key:1,viewBox:"0 0 24 24",width:"32",height:"32",fill:"none",stroke:"white","stroke-width":"2"},fe={key:2,viewBox:"0 0 24 24",width:"32",height:"32",fill:"none",stroke:"white","stroke-width":"2"},v=e.defineComponent({__name:"GigSupportChat",props:{config:{}},setup(t){const f=t,n=S();return e.onMounted(()=>{n.init(f.config),n.connect()}),e.onUnmounted(()=>{n.disconnect()}),(c,o)=>(e.openBlock(),e.createElementBlock("div",me,[e.createVNode(e.Transition,{name:"gig-fade"},{default:e.withCtx(()=>[e.unref(n).isWidgetOpen?(e.openBlock(),e.createBlock(ge,{key:0,messages:e.unref(n).messages,"is-connected":e.unref(n).isConnected,"current-user-id":e.unref(n).currentUserId,onSend:o[0]||(o[0]=m=>e.unref(n).sendMessage(m)),onClose:o[1]||(o[1]=m=>e.unref(n).toggleWidget())},null,8,["messages","is-connected","current-user-id"])):e.createCommentVNode("",!0)]),_:1}),e.createElementVNode("button",{class:"gig-chat-trigger",onClick:o[2]||(o[2]=m=>e.unref(n).toggleWidget())},[e.unref(n).unreadCount>0?(e.openBlock(),e.createElementBlock("div",pe,e.toDisplayString(e.unref(n).unreadCount),1)):e.createCommentVNode("",!0),e.unref(n).isWidgetOpen?(e.openBlock(),e.createElementBlock("svg",fe,[...o[4]||(o[4]=[e.createElementVNode("line",{x1:"18",y1:"6",x2:"6",y2:"18"},null,-1),e.createElementVNode("line",{x1:"6",y1:"6",x2:"18",y2:"18"},null,-1)])])):(e.openBlock(),e.createElementBlock("svg",ue,[...o[3]||(o[3]=[e.createElementVNode("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)])]))])]))}}),he={install:t=>{t.component("GigSupportChat",v)}};y.GigSupportChat=v,y.default=he,y.useSupportChat=S,Object.defineProperties(y,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+(function(k,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("pinia"),require("socket.io-client")):typeof define=="function"&&define.amd?define(["exports","vue","pinia","socket.io-client"],e):(k=typeof globalThis<"u"?globalThis:k||self,e(k.GigSupportChat={},k.Vue,k.Pinia,k.io))})(this,(function(k,e,I,z){"use strict";const M=I.defineStore("gigSupportChat",()=>{const t=e.ref(null),u=e.ref([]),s=e.ref(!1),d=e.ref(!1),o=e.ref(0),r=e.ref(""),l=e.ref([]),c=e.ref(!1),f=e.ref(null),a=e.ref(null),C=g=>{a.value=g},V=()=>{var g;(g=t.value)!=null&&g.connected||!a.value||(t.value=z.io(a.value.apiUrl,{path:a.value.path||"/ws",transports:["websocket","polling"],auth:{apiKey:a.value.apiKey,uuid:a.value.uuid,metaUser:a.value.metaUser}}),t.value.on("connect",()=>{console.log("[GigSupportChat] Connected"),s.value=!0}),t.value.on("connected",n=>{console.log("[GigSupportChat] Registered as:",n.userId),r.value=n.userId,E()}),t.value.on("disconnect",()=>{console.log("[GigSupportChat] Disconnected"),s.value=!1}),t.value.on("new_message",n=>{n.status==="SUCCESS"&&(u.value.find(m=>m.id===n.message.id)||(u.value.push(n.message),d.value||o.value++))}),t.value.on("message_sent",n=>{n.status==="SUCCESS"&&(u.value.find(m=>m.id===n.message.id)||u.value.push(n.message))}),t.value.on("history",n=>{n.status==="SUCCESS"&&(u.value=n.messages)}),t.value.on("error",n=>{console.error("[GigSupportChat] Socket error:",n)}))},v=()=>{t.value&&(t.value.disconnect(),t.value=null),s.value=!1,u.value=[],o.value=0,r.value=""},w=g=>{var n,m;!t.value||!s.value||(t.value.emit("send_message",{userId:r.value,text:g,replyToMessageId:(n=f.value)==null?void 0:n.id,metaUser:(m=a.value)==null?void 0:m.metaUser}),f.value=null)},E=()=>{!t.value||!r.value||t.value.emit("get_history",{userId:r.value,limit:50,offset:0})};return{messages:u,isConnected:s,isWidgetOpen:d,unreadCount:o,currentUserId:r,stickers:l,isLoadingStickers:c,replyingToMessage:f,init:C,connect:V,disconnect:v,sendMessage:w,sendSticker:g=>{var n,m;!t.value||!s.value||(t.value.emit("send_message",{userId:r.value,stickerId:g,messageType:"sticker",replyToMessageId:(n=f.value)==null?void 0:n.id,metaUser:(m=a.value)==null?void 0:m.metaUser}),f.value=null)},fetchStickers:async()=>{var g;if((g=a.value)!=null&&g.apiUrl){c.value=!0;try{const m=await(await fetch(`${a.value.apiUrl}/api/v1.0/stickers?activeOnly=true`,{headers:{"x-api-key":a.value.apiKey||""}})).json();m.status==="SUCCESS"&&(l.value=m.content)}catch(n){console.error("[GigSupportChat] Error fetching stickers:",n)}finally{c.value=!1}}},toggleWidget:()=>{d.value=!d.value,d.value&&(o.value=0)},loadHistory:E,startReply:g=>{f.value=g},cancelReply:()=>{f.value=null}}}),L=["data-message-id"],G={key:0,class:"gig-message-author"},R=["src","alt"],D=["innerHTML"],H={class:"gig-message-time"},W=((t,u)=>{const s=t.__vccOpts||t;for(const[d,o]of u)s[d]=o;return s})(e.defineComponent({__name:"ChatMessage",props:{message:{},currentUserId:{}},emits:["reply","scroll-to"],setup(t){const u=t,s=e.computed(()=>u.message.userId===u.currentUserId),d=l=>l?new Date(l).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"}):"",o=l=>{const c=l.trim().split(/\s+/);return c.length>=2?`${c[0]} ${c[1][0]}.`:l},r=l=>{if(!l)return"";const c=l.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"),f=/(https?:\/\/[^\s]+)/g;return c.replace(f,a=>`<a href="${a}" target="_blank" style="color: inherit; text-decoration: underline;">${a}</a>`)};return(l,c)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["gig-message-row",s.value?"sent":"received"]),"data-message-id":t.message.id},[e.createElementVNode("div",{class:e.normalizeClass(["gig-message-bubble",{"is-sticker":t.message.messageType==="sticker"}])},[s.value?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",G,[c[1]||(c[1]=e.createElementVNode("div",{class:"gig-author-avatar"},"GP",-1)),e.createTextVNode(" "+e.toDisplayString(o(t.message.userName||"Support")),1)])),t.message.replyToMessageId?(e.openBlock(),e.createElementBlock("div",{key:1,class:"gig-message-reply-preview",onClick:c[0]||(c[0]=f=>l.$emit("scroll-to",t.message.replyToMessageId))})):e.createCommentVNode("",!0),t.message.messageType==="sticker"&&t.message.sticker?(e.openBlock(),e.createElementBlock("img",{key:2,src:`data:${t.message.sticker.mimeType||"image/png"};base64,${t.message.sticker.base64}`,class:"gig-sticker-img",alt:t.message.sticker.name},null,8,R)):(e.openBlock(),e.createElementBlock("div",{key:3,innerHTML:r(t.message.text||"")},null,8,D)),e.createElementVNode("div",H,e.toDisplayString(d(t.message.createdAt)),1)],2)],10,L))}}),[["__scopeId","data-v-ca90faac"]]),K={key:0,style:{"text-align":"center",color:"#94a3b8","padding-top":"40px"}},O={class:"gig-input-area"},X={class:"gig-input-box"},Y=["onKeydown"],P=["disabled"],_={viewBox:"0 0 24 24",width:"18",height:"18",fill:"none",stroke:"currentColor","stroke-width":"2",style:{transform:"rotate(45deg)","margin-bottom":"2px"}},j=e.defineComponent({__name:"ChatWindow",props:{messages:{},currentUserId:{}},emits:["close","send"],setup(t,{emit:u}){const s=u,d=e.ref(""),o=e.ref(null),r=e.ref(null),l=e.ref({x:32,y:112}),c=e.ref({width:440,height:600}),f=e.ref(!1),a=e.ref(null),C=e.ref(!1),V=()=>{C.value=!C.value};let v=0,w=0,E=0,N=0,x=0,S=0;const T=p=>{p.button===0&&(f.value=!0,v=p.clientX,w=p.clientY,x=l.value.x,S=l.value.y,window.addEventListener("mousemove",B),window.addEventListener("mouseup",m))},B=p=>{f.value&&(l.value={x:x-(p.clientX-v),y:S-(p.clientY-w)})},g=(p,i)=>{p.preventDefault(),a.value=i,v=p.clientX,w=p.clientY,E=c.value.width,N=c.value.height,x=l.value.x,S=l.value.y,window.addEventListener("mousemove",n),window.addEventListener("mouseup",m)},n=p=>{if(!a.value)return;const i=v-p.clientX,h=w-p.clientY;if(a.value==="left"||a.value==="corner"){const y=E+i;y>320&&y<800&&(c.value.width=y)}if(a.value==="top"||a.value==="corner"){const y=N+h;y>400&&y<900&&(c.value.height=y)}},m=()=>{f.value=!1,a.value=null,window.removeEventListener("mousemove",B),window.removeEventListener("mousemove",n)},b=()=>{d.value.trim()&&(s("send",d.value),d.value="",r.value&&(r.value.style.height="auto"),U())},Z=()=>{r.value&&(r.value.style.height="auto",r.value.style.height=Math.min(r.value.scrollHeight,120)+"px")},U=async()=>{await e.nextTick(),o.value&&(o.value.scrollTop=o.value.scrollHeight)};return e.onMounted(U),e.onUnmounted(m),(p,i)=>(e.openBlock(),e.createElementBlock("div",{class:"gig-chat-window",style:e.normalizeStyle({width:c.value.width+"px",height:c.value.height+"px",bottom:l.value.y+"px",right:l.value.x+"px",cursor:f.value?"grabbing":"auto"})},[e.createElementVNode("div",{class:"gig-resizer gig-resizer-l",onMousedown:i[0]||(i[0]=h=>g(h,"left"))},null,32),e.createElementVNode("div",{class:"gig-resizer gig-resizer-t",onMousedown:i[1]||(i[1]=h=>g(h,"top"))},null,32),e.createElementVNode("div",{class:"gig-resizer gig-resizer-tl",onMousedown:i[2]||(i[2]=h=>g(h,"corner"))},null,32),e.createElementVNode("div",{class:"gig-chat-header",onMousedown:T},[i[6]||(i[6]=e.createStaticVNode('<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.createElementVNode("button",{class:"gig-btn-icon",onClick:i[3]||(i[3]=e.withModifiers(h=>p.$emit("close"),["stop"])),style:{opacity:"0.8"}},[...i[5]||(i[5]=[e.createElementVNode("svg",{viewBox:"0 0 24 24",width:"22",height:"22",stroke:"currentColor",fill:"none","stroke-width":"2.5"},[e.createElementVNode("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e.createElementVNode("line",{x1:"6",y1:"6",x2:"18",y2:"18"})],-1)])])],32),e.createElementVNode("div",{ref_key:"messagesArea",ref:o,class:"gig-messages-area"},[t.messages.length===0?(e.openBlock(),e.createElementBlock("div",K," Здесь будет история переписки ")):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.messages,h=>(e.openBlock(),e.createBlock(W,{key:h.id,message:h,"current-user-id":t.currentUserId},null,8,["message","current-user-id"]))),128))],512),e.createElementVNode("div",O,[e.createElementVNode("div",X,[e.createElementVNode("div",{class:"gig-input-star",onClick:V},[...i[7]||(i[7]=[e.createElementVNode("svg",{viewBox:"0 0 24 24",width:"20",height:"20",fill:"none",stroke:"currentColor","stroke-width":"2"},[e.createElementVNode("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)])]),e.withDirectives(e.createElementVNode("textarea",{ref_key:"textareaRef",ref:r,"onUpdate:modelValue":i[4]||(i[4]=h=>d.value=h),placeholder:"Напишите сообщение...",class:"gig-textarea",rows:"1",onKeydown:e.withKeys(e.withModifiers(b,["exact","prevent"]),["enter"]),onInput:Z},null,40,Y),[[e.vModelText,d.value]]),e.createElementVNode("button",{class:e.normalizeClass(["gig-send-btn",{active:d.value.trim()}]),disabled:!d.value.trim(),onClick:b},[(e.openBlock(),e.createElementBlock("svg",_,[...i[8]||(i[8]=[e.createElementVNode("path",{d:"M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"},null,-1)])]))],10,P)]),i[9]||(i[9]=e.createElementVNode("div",{class:"gig-footer"},[e.createElementVNode("div",{class:"gig-footer-line"}),e.createElementVNode("span",{class:"gig-footer-text"},"Работает на GigSupport"),e.createElementVNode("div",{class:"gig-footer-line"})],-1))])],4))}}),A={class:"gig-chat-wrapper"},q={key:0,class:"gig-chat-badge"},F={key:1,viewBox:"0 0 24 24",width:"32",height:"32",fill:"none",stroke:"white","stroke-width":"2"},J={key:2,viewBox:"0 0 24 24",width:"32",height:"32",fill:"none",stroke:"white","stroke-width":"2"},$=e.defineComponent({__name:"GigSupportChat",props:{config:{}},setup(t){const u=t,s=M();return e.onMounted(()=>{s.init(u.config),s.connect()}),e.onUnmounted(()=>{s.disconnect()}),(d,o)=>(e.openBlock(),e.createElementBlock("div",A,[e.createVNode(e.Transition,{name:"gig-fade"},{default:e.withCtx(()=>[e.unref(s).isWidgetOpen?(e.openBlock(),e.createBlock(j,{key:0,messages:e.unref(s).messages,"is-connected":e.unref(s).isConnected,"current-user-id":e.unref(s).currentUserId,onSend:o[0]||(o[0]=r=>e.unref(s).sendMessage(r)),onClose:o[1]||(o[1]=r=>e.unref(s).toggleWidget())},null,8,["messages","is-connected","current-user-id"])):e.createCommentVNode("",!0)]),_:1}),e.createElementVNode("button",{class:"gig-chat-trigger",onClick:o[2]||(o[2]=r=>e.unref(s).toggleWidget())},[e.unref(s).unreadCount>0?(e.openBlock(),e.createElementBlock("div",q,e.toDisplayString(e.unref(s).unreadCount),1)):e.createCommentVNode("",!0),e.unref(s).isWidgetOpen?(e.openBlock(),e.createElementBlock("svg",J,[...o[4]||(o[4]=[e.createElementVNode("line",{x1:"18",y1:"6",x2:"6",y2:"18"},null,-1),e.createElementVNode("line",{x1:"6",y1:"6",x2:"18",y2:"18"},null,-1)])])):(e.openBlock(),e.createElementBlock("svg",F,[...o[3]||(o[3]=[e.createElementVNode("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)])]))])]))}}),Q={install:t=>{t.component("GigSupportChat",$)}};k.GigSupportChat=$,k.default=Q,k.useSupportChat=M,Object.defineProperties(k,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/dist/support-chat.css

@@ -1 +1 @@
-.gig-message-wrapper[data-v-0f2196d9]{display:flex;flex-direction:column;margin-bottom:4px;max-width:85%;position:relative}.gig-message-wrapper.sent[data-v-0f2196d9]{align-self:flex-end}.gig-message-wrapper.received[data-v-0f2196d9]{align-self:flex-start}.gig-message-author[data-v-0f2196d9]{display:flex;align-items:center;gap:8px;margin-bottom:6px;margin-left:2px}.gig-author-avatar[data-v-0f2196d9]{width:20px;height:20px;border-radius:50%;background:var(--gig-primary-gradient);color:#fff;font-size:8px;font-weight:900;display:flex;align-items:center;justify-content:center}.gig-author-name[data-v-0f2196d9]{font-size:11px;font-weight:700;color:var(--gig-text-muted)}.gig-message-bubble[data-v-0f2196d9]{padding:12px 16px;border-radius:var(--gig-radius-sm);font-size:14px;line-height:1.5;position:relative;box-shadow:var(--gig-shadow-sm)}.gig-message-bubble.is-sticker[data-v-0f2196d9]{padding:0;background:transparent!important;box-shadow:none!important}.sent .gig-message-bubble[data-v-0f2196d9]{background:var(--gig-brand-dark-green);color:#fff;border-bottom-right-radius:4px}.received .gig-message-bubble[data-v-0f2196d9]{background:#fff;color:var(--gig-text-main);border-bottom-left-radius:4px;border:1px solid var(--gig-border-light)}.gig-sticker-img[data-v-0f2196d9]{max-width:160px;max-height:160px;display:block}.gig-message-meta[data-v-0f2196d9]{margin-top:4px;font-size:10px;opacity:.6}.sent .gig-message-meta[data-v-0f2196d9]{text-align:right}.gig-reply-preview[data-v-0f2196d9]{background:#0000000d;border-left:3px solid var(--gig-brand-dark-green);padding:6px 10px;border-radius:8px;margin-bottom:8px;font-size:12px;cursor:pointer}.sent .gig-reply-preview[data-v-0f2196d9]{background:#ffffff1a;border-left-color:#fff}.gig-reply-author[data-v-0f2196d9]{font-weight:700;font-size:10px;margin-bottom:2px}.gig-reply-text[data-v-0f2196d9]{opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gig-message-reply-btn[data-v-0f2196d9]{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid var(--gig-border-light);color:var(--gig-text-muted);display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--gig-transition);cursor:pointer;box-shadow:var(--gig-shadow-sm)}.gig-message-bubble:hover .gig-message-reply-btn[data-v-0f2196d9]{opacity:1}.sent .gig-message-reply-btn[data-v-0f2196d9]{left:-40px}.received .gig-message-reply-btn[data-v-0f2196d9]{right:-40px}[data-v-0f2196d9] .gig-message-text a{color:inherit;font-weight:600;text-decoration:underline}.gig-chat-window[data-v-4a6ac4c2]{position:fixed;background:var(--gig-glass-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--gig-glass-border);border-radius:var(--gig-radius);box-shadow:var(--gig-shadow-premium);display:flex;flex-direction:column;overflow:hidden;z-index:9999;-webkit-user-select:none;user-select:none}.gig-resize-h[data-v-4a6ac4c2]{position:absolute;z-index:10}.gig-resize-left[data-v-4a6ac4c2]{left:0;top:0;width:6px;height:100%;cursor:w-resize}.gig-resize-top[data-v-4a6ac4c2]{left:0;top:0;width:100%;height:6px;cursor:n-resize}.gig-resize-corner[data-v-4a6ac4c2]{left:0;top:0;width:20px;height:20px;cursor:nw-resize;z-index:11}.gig-chat-header[data-v-4a6ac4c2]{padding:24px;background:var(--gig-brand-dark-green);color:#fff;display:flex;justify-content:space-between;align-items:center;cursor:grab;position:relative;overflow:hidden}.gig-chat-header[data-v-4a6ac4c2]:active{cursor:grabbing}.gig-header-brand-overlay[data-v-4a6ac4c2]{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--gig-primary-gradient);opacity:.1}.gig-header-info[data-v-4a6ac4c2]{display:flex;align-items:center;gap:12px;position:relative;z-index:1}.gig-header-avatar[data-v-4a6ac4c2]{width:40px;height:40px;background:#ffffff1a;border-radius:50%;display:flex;align-items:center;justify-content:center}.gig-header-info h3[data-v-4a6ac4c2]{margin:0;font-size:18px;font-weight:700;line-height:1.2}.gig-status-area[data-v-4a6ac4c2]{display:flex;align-items:center;gap:6px;margin-top:2px}.gig-status-pulse[data-v-4a6ac4c2]{width:8px;height:8px;background:#4ade80;border-radius:50%;box-shadow:0 0 0 2px #4ade8033}.gig-status-text[data-v-4a6ac4c2]{font-size:12px;font-weight:500;color:#ffffffb3}.gig-close-btn[data-v-4a6ac4c2]{background:transparent;border:none;color:#fff;opacity:.6;cursor:pointer;padding:4px;transition:var(--gig-transition);z-index:1}.gig-close-btn[data-v-4a6ac4c2]:hover{opacity:1;transform:scale(1.1)}.gig-messages-container[data-v-4a6ac4c2]{flex:1;overflow-y:auto;padding:24px;background:var(--gig-bg-light);display:flex;flex-direction:column;gap:16px;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.1) transparent}.gig-empty-state[data-v-4a6ac4c2]{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--gig-text-muted);text-align:center}.gig-empty-icon[data-v-4a6ac4c2]{width:80px;height:80px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:var(--gig-shadow-sm)}.gig-reply-bar[data-v-4a6ac4c2]{background:#fff;padding:12px 20px;border-top:1px solid var(--gig-border-light);display:flex;align-items:center;gap:12px}.gig-reply-line[data-v-4a6ac4c2]{width:3px;height:32px;background:var(--gig-brand-dark-green);border-radius:4px}.gig-reply-content[data-v-4a6ac4c2]{flex:1;min-width:0}.gig-reply-title[data-v-4a6ac4c2]{font-size:10px;font-weight:800;color:var(--gig-brand-dark-green);text-transform:uppercase;letter-spacing:.5px}.gig-reply-preview[data-v-4a6ac4c2]{font-size:12px;color:var(--gig-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gig-reply-close[data-v-4a6ac4c2]{background:none;border:none;font-size:18px;color:var(--gig-text-muted);cursor:pointer}.gig-sticker-picker[data-v-4a6ac4c2]{position:absolute;bottom:100px;left:20px;right:20px;background:#fff;border-radius:20px;box-shadow:var(--gig-shadow-premium);border:1px solid var(--gig-border-light);z-index:100;max-height:250px;display:flex;flex-direction:column}.gig-picker-header[data-v-4a6ac4c2]{padding:12px 16px;border-bottom:1px solid var(--gig-border-light);display:flex;justify-content:space-between;font-size:12px;font-weight:700;color:var(--gig-text-muted)}.gig-sticker-grid[data-v-4a6ac4c2]{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px}.gig-sticker-item[data-v-4a6ac4c2]{aspect-ratio:1;padding:4px;cursor:pointer;transition:.2s}.gig-sticker-item[data-v-4a6ac4c2]:hover{transform:scale(1.1);background:var(--gig-bg-light);border-radius:12px}.gig-sticker-item img[data-v-4a6ac4c2]{width:100%;height:100%;object-fit:contain}.gig-chat-input-area[data-v-4a6ac4c2]{padding:24px;background:#fff;border-top:1px solid var(--gig-border-light)}.gig-input-wrapper[data-v-4a6ac4c2]{background:var(--gig-bg-light);border-radius:16px;padding:8px;display:flex;align-items:flex-end;gap:8px;border:1px solid transparent;transition:var(--gig-transition)}.gig-input-wrapper[data-v-4a6ac4c2]:focus-within{background:#fff;border-color:rgba(var(--gig-brand-dark-green-rgb),.2);box-shadow:0 0 0 4px rgba(var(--gig-brand-dark-green-rgb),.05)}.gig-chat-input[data-v-4a6ac4c2]{flex:1;background:transparent;border:none;outline:none;padding:10px 4px;font-size:14px;line-height:1.5;resize:none;max-height:120px}.gig-sticker-toggle[data-v-4a6ac4c2]{background:transparent;border:none;color:var(--gig-text-muted);width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:10px;transition:.2s}.gig-sticker-toggle[data-v-4a6ac4c2]:hover{background:#fff;color:var(--gig-brand-dark-green)}.gig-sticker-toggle.active[data-v-4a6ac4c2]{color:var(--gig-brand-dark-green);background:#fff}.gig-send-btn[data-v-4a6ac4c2]{background:var(--gig-brand-dark-green);color:#fff;border:none;width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--gig-transition)}.gig-send-btn[data-v-4a6ac4c2]:disabled{background:#cbd5e1;cursor:not-allowed}.gig-send-btn[data-v-4a6ac4c2]:not(:disabled):hover{transform:scale(1.05);box-shadow:0 4px 12px rgba(var(--gig-brand-dark-green-rgb),.3)}.gig-powered-by[data-v-4a6ac4c2]{text-align:center;margin-top:12px;font-size:9px;font-weight:800;color:var(--gig-text-muted);opacity:.4;text-transform:uppercase;letter-spacing:1px}.gig-slide-up-enter-active[data-v-4a6ac4c2],.gig-slide-up-leave-active[data-v-4a6ac4c2]{transition:all .3s ease}.gig-slide-up-enter-from[data-v-4a6ac4c2],.gig-slide-up-leave-to[data-v-4a6ac4c2]{opacity:0;transform:translateY(10px)}.gig-fade-enter-active[data-v-4a6ac4c2],.gig-fade-leave-active[data-v-4a6ac4c2]{transition:all .2s ease}.gig-fade-enter-from[data-v-4a6ac4c2],.gig-fade-leave-to[data-v-4a6ac4c2]{opacity:0}@keyframes gig-highlight-anim-4a6ac4c2{0%{background:rgba(var(--gig-brand-dark-green-rgb),.05)}to{background:transparent}}.gig-highlight[data-v-4a6ac4c2]{animation:gig-highlight-anim-4a6ac4c2 2s ease-out}:root{--gig-brand-dark-green: #00332c;--gig-brand-dark-green-rgb: 0, 51, 44;--gig-primary-gradient: linear-gradient(135deg, #FED733 0%, #F54E19 100%);--gig-brand-gradient: linear-gradient(135deg, #00332c 0%, #004d42 100%);--gig-glass-bg: rgba(255, 255, 255, .95);--gig-glass-border: rgba(0, 0, 0, .08);--gig-shadow-premium: 0 20px 50px rgba(0, 0, 0, .15);--gig-shadow-sm: 0 4px 12px rgba(0, 0, 0, .05);--gig-text-main: #1e293b;--gig-text-muted: #64748b;--gig-text-on-primary: #ffffff;--gig-radius: 24px;--gig-radius-sm: 12px;--gig-transition: all .3s cubic-bezier(.4, 0, .2, 1);--gig-bg-light: #f8fafc;--gig-border-light: #f1f5f9}.gig-chat-wrapper{font-family:Inter,system-ui,-apple-system,sans-serif;position:fixed;bottom:30px;right:30px;z-index:9999;display:flex;flex-direction:column;align-items:flex-end}.gig-chat-trigger{width:64px;height:64px;border-radius:50%;background:var(--gig-primary-gradient);box-shadow:0 8px 24px #f54e194d;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--gig-transition);position:relative;overflow:hidden}.gig-chat-trigger:hover{transform:scale(1.08) translateY(-4px);box-shadow:0 12px 32px #f54e1966}.gig-chat-trigger:active{transform:scale(.95)}.gig-chat-badge{position:absolute;top:0;right:0;background:#ff3b30;color:#fff;font-size:12px;font-weight:700;padding:4px 8px;border-radius:10px;border:2px solid white}.gig-chat-window{width:400px;height:600px;background:var(--gig-glass-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--gig-glass-border);border-radius:var(--gig-radius);box-shadow:var(--gig-shadow-premium);margin-bottom:20px;display:flex;flex-direction:column;overflow:hidden;transition:var(--gig-transition);transform-origin:bottom right}.gig-chat-header{padding:20px;background:var(--gig-primary-gradient);color:#fff;display:flex;justify-content:space-between;align-items:center}.gig-chat-header h3{margin:0;font-size:18px;font-weight:700}.gig-messages-container{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin}.gig-message{max-width:80%;padding:12px 16px;border-radius:18px;font-size:14px;line-height:1.5;position:relative;animation:messageSlide .4s ease-out}@keyframes messageSlide{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.gig-message.sent{align-self:flex-end;background:var(--gig-primary-gradient);color:#fff;border-bottom-right-radius:4px}.gig-message.received{align-self:flex-start;background:#fff;color:var(--gig-text-main);border-bottom-left-radius:4px;box-shadow:0 4px 12px #0000000d}.gig-chat-input-area{padding:20px;background:#ffffff80;border-top:1px solid rgba(0,0,0,.05);display:flex;gap:10px;align-items:center}.gig-chat-input{flex:1;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:25px;padding:12px 20px;outline:none;font-size:14px;transition:var(--gig-transition)}.gig-chat-input:focus{border-color:#f54e19;box-shadow:0 0 0 4px #f54e191a}.gig-send-btn{background:var(--gig-primary-gradient);width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:var(--gig-transition)}.gig-send-btn:hover{transform:rotate(15deg) scale(1.1)}.gig-fade-enter-active,.gig-fade-leave-active{transition:all .4s cubic-bezier(.175,.885,.32,1.275)}.gig-fade-enter-from,.gig-fade-leave-to{opacity:0;transform:scale(.8) translateY(40px)}
+.gig-message-reply-preview[data-v-ca90faac]{margin-bottom:8px;padding:6px 10px;border-radius:8px;background:#0000000d;border-left:3px solid var(--gig-brand-dark-green);font-size:12px;cursor:pointer}:root{--gig-brand-dark-green: #002F23;--gig-brand-light-green: #9FE46D;--gig-brand-mint: #D5F5E6;--gig-brand-yellow: #FED733;--gig-brand-orange: #F54E19;--gig-brand-gradient-primary: linear-gradient(135deg, #FED733 0%, #F54E19 100%);--gig-bg-gray: #f8fafc;--gig-border-gray: #e2e8f0;--gig-text-gray: #94a3b8}.gig-chat-wrapper{font-family:Inter,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}.gig-chat-trigger{position:fixed;bottom:24px;right:24px;width:60px;height:60px;border-radius:50%;background:var(--gig-brand-dark-green);color:#fff;border:none;cursor:pointer;box-shadow:0 4px 12px #00000026;display:flex;align-items:center;justify-content:center;z-index:9997;transition:transform .2s cubic-bezier(.175,.885,.32,1.275)}.gig-chat-trigger:hover{transform:scale(1.05)}.gig-chat-window{position:fixed;z-index:9998;display:flex;flex-direction:column;overflow:hidden;border-radius:20px;border:1px solid rgba(0,0,0,.05);box-shadow:0 20px 40px #0003;background:#fff;-webkit-user-select:none;user-select:none}.gig-chat-header{background:var(--gig-brand-dark-green);padding:20px 24px;color:#fff;display:flex;justify-content:space-between;align-items:center;cursor:grab}.gig-chat-header:active{cursor:grabbing}.gig-header-left{display:flex;align-items:center;gap:12px}.gig-header-icon{width:44px;height:44px;border-radius:50%;background:#ffffff1a;display:flex;align-items:center;justify-content:center}.gig-header-title{font-size:18px;font-weight:700;margin:0}.gig-header-status{display:flex;align-items:center;gap:6px;font-size:12px;color:#4ade80;margin-top:2px}.gig-status-dot{width:8px;height:8px;background:#22c55e;border-radius:50%}.gig-messages-area{flex:1;overflow-y:auto;padding:20px;background:#fff;display:flex;flex-direction:column;gap:20px}.gig-messages-area::-webkit-scrollbar{width:5px}.gig-messages-area::-webkit-scrollbar-thumb{background:#e2e8f0;border-radius:10px}.gig-input-area{padding:16px 20px 12px;background:#fff;border-top:1px solid #f1f5f9}.gig-input-box{background:#f1f5f9;border-radius:12px;padding:10px 12px;display:flex;align-items:center;gap:12px;border:1px solid transparent;transition:all .2s}.gig-input-box:focus-within{background:#fff;border-color:#e2e8f0;box-shadow:0 4px 6px -1px #0000000d}.gig-input-star{color:#94a3b8;cursor:pointer;flex-shrink:0}.gig-input-star:hover{color:var(--gig-brand-dark-green)}.gig-textarea{flex:1;background:transparent;border:none;outline:none;font-size:14px;color:#1e293b;resize:none;padding:4px 0;font-family:inherit;width:100%}.gig-send-btn{width:36px;height:36px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;color:#94a3b8;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;flex-shrink:0}.gig-send-btn.active{background:var(--gig-brand-dark-green);color:#fff;border-color:var(--gig-brand-dark-green)}.gig-send-btn:disabled{opacity:.5;cursor:not-allowed}.gig-footer{padding:8px 0 16px;display:flex;align-items:center;justify-content:center;gap:12px;opacity:.4}.gig-footer-line{height:1px;width:60px;background:#cbd5e1}.gig-footer-text{font-size:9px;font-weight:800;letter-spacing:.1em;color:#475569;text-transform:uppercase}.gig-resizer{position:absolute;z-index:9999}.gig-resizer-l{top:0;left:0;width:6px;height:100%;cursor:w-resize}.gig-resizer-t{top:0;left:0;width:100%;height:6px;cursor:n-resize}.gig-resizer-tl{top:0;left:0;width:16px;height:16px;cursor:nw-resize}.gig-message-row{display:flex;width:100%}.gig-message-row.sent{justify-content:flex-end}.gig-message-row.received{justify-content:flex-start}.gig-message-bubble{max-width:85%;border-radius:16px;position:relative;transition:all .2s;box-shadow:0 1px 3px #0000000d}.gig-message-bubble:not(.is-sticker){padding:16px;font-size:14px}.sent .gig-message-bubble:not(.is-sticker){background:var(--gig-brand-dark-green);color:#fff;border-top-right-radius:0}.received .gig-message-bubble:not(.is-sticker){background:#fff;color:#1e293b;border-top-left-radius:0;border:1px solid #f1f5f9}.gig-message-author{font-size:11px;font-weight:700;color:#64748b;margin-bottom:6px;display:flex;align-items:center;gap:8px}.gig-author-avatar{width:20px;height:20px;border-radius:50%;background:var(--gig-brand-gradient-primary);color:#fff;font-size:8px;font-weight:900;display:flex;align-items:center;justify-content:center}.gig-message-time{font-size:10px;margin-top:8px;opacity:.5;font-weight:500}.sent .gig-message-time{text-align:right;color:#86efac}.received .gig-message-time{color:#94a3b8}.is-sticker{background:transparent!important;box-shadow:none!important;border:none!important}.gig-sticker-img{max-width:180px;max-height:180px;object-fit:contain;filter:drop-shadow(0 10px 8px rgba(0,0,0,.04));transition:transform .2s}.gig-sticker-img:hover{transform:scale(1.05)}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vunex/support-chat",
-    "version": "1.0.3",
+    "version": "1.0.6",
     "private": false,
     "publishConfig": {
         "access": "public"