@traiyani/chatsdk-react 1.0.3 → 1.0.5

package/dist/chatsdk-react.mjs

@@ -1,9 +1,9 @@
-import de from "axios";
-import { io as Ye } from "socket.io-client";
-import { jsxs as M, jsx as u, Fragment as Je } from "react/jsx-runtime";
-import * as q from "react";
-import Qe, { useState as T, useRef as le, useCallback as De, useEffect as Y, createContext as Ze, useContext as Xe } from "react";
-class et {
+import ge from "axios";
+import { io as Xe } from "socket.io-client";
+import { jsxs as M, jsx as u, Fragment as et } from "react/jsx-runtime";
+import * as V from "react";
+import tt, { useState as N, useRef as ne, useCallback as Ie, useEffect as P, createContext as at, useContext as st } from "react";
+class nt {
   constructor(e) {
     this.api = null, this.config = null, this.chatSDK = e;
   }
@@ -11,7 +11,7 @@ class et {
    * Initialize AuthManager with configuration
    */
   async init(e) {
-    this.config = e, this.api = de.create({
+    this.config = e, this.api = ge.create({
       baseURL: e.apiBaseUrl,
       headers: {
         "Content-Type": "application/json"
@@ -281,7 +281,7 @@ class et {
     localStorage.removeItem("chatSDKToken");
   }
 }
-class tt {
+class rt {
   constructor(e) {
     this.api = null, this.config = null, this.chatSDK = e;
   }
@@ -289,7 +289,7 @@ class tt {
    * Initialize ChatUserManager with configuration
    */
   async init(e) {
-    this.config = e, this.api = de.create({
+    this.config = e, this.api = ge.create({
       baseURL: e.apiBaseUrl,
       headers: {
         "Content-Type": "application/json"
@@ -535,13 +535,13 @@ class tt {
         }
       };
       s && Object.keys(s).length > 0 && (m.chatMetadata = s);
-      const p = await this.api.post("/api/chat-users/chats", m), E = p.data.data || p.data.conversation || p.data;
+      const p = await this.api.post("/api/chat-users/chats", m), D = p.data.data || p.data.conversation || p.data;
       return (n = this.config) != null && n.enableLogging && console.log("💬 ChatUserManager: Product chat started successfully", {
-        conversationId: E.id,
+        conversationId: D.id,
         userId: t,
         productId: a.productId,
         productName: a.productName
-      }), (o = this.chatSDK.socket) != null && o.isConnected() && this.chatSDK.socket.joinRoom(E.id), (r = this.chatSDK.events) == null || r.emit("conversation.created", { conversation: E }), E;
+      }), (o = this.chatSDK.socket) != null && o.isConnected() && this.chatSDK.socket.joinRoom(D.id), (r = this.chatSDK.events) == null || r.emit("conversation.created", { conversation: D }), D;
     } catch (m) {
       throw (i = this.config) != null && i.enableLogging && console.error("❌ ChatUserManager: Start product chat failed", ((l = m.response) == null ? void 0 : l.data) || m.message), new Error(((h = (d = m.response) == null ? void 0 : d.data) == null ? void 0 : h.message) || "Failed to start product chat");
     }
@@ -607,8 +607,8 @@ class tt {
       if ((t = this.config) != null && t.enableLogging && console.log("📖 ChatUserManager: Marking room as read", { conversationId: e }), (a = this.chatSDK.socket) != null && a.isConnected())
         return this.chatSDK.socket.emit("mark_room_read", { roomId: e }), (s = this.config) != null && s.enableLogging && console.log("📡 ChatUserManager: mark_room_read sent via socket", { roomId: e }), (n = this.chatSDK.events) == null || n.emit("conversation.read", { conversationId: e, markedCount: 0 }), 0;
       (o = this.config) != null && o.enableLogging && console.log("📡 ChatUserManager: Socket not connected, falling back to API");
-      const E = (await this.api.post(`/api/chat-users/chats/${e}/mark-read`)).data.data.markedAsReadCount || 0;
-      return (r = this.config) != null && r.enableLogging && console.log("✅ ChatUserManager: Room messages marked as read via API", { conversationId: e, markedCount: E }), (i = this.chatSDK.events) == null || i.emit("conversation.read", { conversationId: e, markedCount: E }), E;
+      const D = (await this.api.post(`/api/chat-users/chats/${e}/mark-read`)).data.data.markedAsReadCount || 0;
+      return (r = this.config) != null && r.enableLogging && console.log("✅ ChatUserManager: Room messages marked as read via API", { conversationId: e, markedCount: D }), (i = this.chatSDK.events) == null || i.emit("conversation.read", { conversationId: e, markedCount: D }), D;
     } catch (p) {
       throw console.error("❌ ChatUserManager: Mark room messages as read failed", {
         conversationId: e,
@@ -663,7 +663,7 @@ class tt {
     }), (a = this.config) != null && a.enableLogging && console.log("👁️ ChatUserManager: Stopped viewing conversation", { conversationId: e }));
   }
 }
-class at {
+class ot {
   constructor(e) {
     this.api = null, this.config = null, this.chatSDK = e;
   }
@@ -671,7 +671,7 @@ class at {
    * Initialize UserManager with configuration
    */
   async init(e) {
-    this.config = e, this.api = de.create({
+    this.config = e, this.api = ge.create({
       baseURL: e.apiBaseUrl,
       headers: {
         "Content-Type": "application/json"
@@ -846,7 +846,7 @@ class at {
     }
   }
 }
-class st {
+class it {
   constructor(e) {
     this.api = null, this.config = null, this.chatSDK = e;
   }
@@ -854,7 +854,7 @@ class st {
    * Initialize ConversationManager with configuration
    */
   async init(e) {
-    this.config = e, this.api = de.create({
+    this.config = e, this.api = ge.create({
       baseURL: e.apiBaseUrl,
       headers: {
         "Content-Type": "application/json"
@@ -926,15 +926,15 @@ class st {
         }
       };
       s && Object.keys(s).length > 0 && (p.chatMetadata = s), (n = this.config) != null && n.enableLogging && console.log("⚡ Using externalGroupId:", e);
-      const E = await this.api.post("/api/chat-users/chats", p);
-      console.log("📡 Server response:", E.data);
-      const P = E.data.data || E.data.conversation || E.data;
+      const D = await this.api.post("/api/chat-users/chats", p);
+      console.log("📡 Server response:", D.data);
+      const O = D.data.data || D.data.conversation || D.data;
       return (o = this.config) != null && o.enableLogging && console.log("💬 ConversationManager: Product chat started successfully", {
-        conversationId: P.id,
+        conversationId: O.id,
         userId: t,
         productId: a.productId,
         productName: a.productName
-      }), (r = this.chatSDK.socket) != null && r.isConnected() && this.chatSDK.socket.joinRoom(P.id), (i = this.chatSDK.events) == null || i.emit("conversation.created", { conversation: P }), P;
+      }), (r = this.chatSDK.socket) != null && r.isConnected() && this.chatSDK.socket.joinRoom(O.id), (i = this.chatSDK.events) == null || i.emit("conversation.created", { conversation: O }), O;
     } catch (p) {
       throw (l = this.config) != null && l.enableLogging && console.error("❌ ConversationManager: Start product chat failed", ((d = p.response) == null ? void 0 : d.data) || p.message), new Error(((m = (h = p.response) == null ? void 0 : h.data) == null ? void 0 : m.message) || "Failed to start product chat");
     }
@@ -1265,7 +1265,7 @@ class st {
     }
   }
 }
-class nt {
+class ct {
   constructor(e) {
     this.api = null, this.config = null, this.chatSDK = e;
   }
@@ -1273,7 +1273,7 @@ class nt {
    * Initialize MessageManager with configuration
    */
   async init(e) {
-    this.config = e, this.api = de.create({
+    this.config = e, this.api = ge.create({
       baseURL: e.apiBaseUrl,
       headers: {
         "Content-Type": "application/json"
@@ -1557,7 +1557,7 @@ class nt {
     }
   }
 }
-class rt {
+class lt {
   constructor(e) {
     this.api = null, this.config = null, this.maxFileSize = 50 * 1024 * 1024, this.allowedTypes = [
       "image/jpeg",
@@ -1582,7 +1582,7 @@ class rt {
    * Initialize MediaManager with configuration
    */
   async init(e) {
-    this.config = e, this.api = de.create({
+    this.config = e, this.api = ge.create({
       baseURL: e.apiBaseUrl,
       headers: {
         "Content-Type": "application/json"
@@ -1809,7 +1809,7 @@ class rt {
     return parseFloat((e / Math.pow(t, s)).toFixed(2)) + " " + a[s];
   }
 }
-class ot {
+class dt {
   constructor(e) {
     this.config = null, this.socket = null, this.eventListeners = /* @__PURE__ */ new Map(), this.isConnected = !1, this.reconnectAttempts = 0, this.maxReconnectAttempts = 5, this.reconnectDelay = 1e3, this.heartbeatInterval = null, this.connectionTimeout = null, this.chatSDK = e;
   }
@@ -2007,7 +2007,7 @@ class ot {
     return Array.from(this.eventListeners.keys());
   }
 }
-class Ue {
+class Ae {
   /**
    * Parse user data - handles standard server format only
    * @param data User data from server
@@ -2146,7 +2146,7 @@ class Ue {
     return Array.isArray(e) ? e : [];
   }
 }
-class it {
+class gt {
   constructor(e) {
     this.socket = null, this.config = null, this.currentUserId = null, this.joinedRooms = /* @__PURE__ */ new Set(), this.chatSDK = e;
   }
@@ -2165,7 +2165,7 @@ class it {
         wsUrl: e.wsUrl,
         apiBaseUrl: e.apiBaseUrl,
         environment: e.environment
-      }), this.socket = Ye(o, {
+      }), this.socket = Xe(o, {
         transports: ["websocket", "polling"],
         // Try websocket first, fallback to polling
         autoConnect: !1,
@@ -2213,14 +2213,14 @@ class it {
         (p = this.config) != null && p.enableLogging && console.error("❌ SocketManager: Connection timeout after 10 seconds"), h(new Error("Connection timeout"));
       }, 1e4);
       this.socket.connect(), this.socket.on("connect", () => {
-        var p, E, P;
-        clearTimeout(m), (p = this.config) != null && p.enableLogging && console.log("✅ SocketManager: Connected to WebSocket server successfully!"), this.socket.emit("authenticate", { userId: e, appId: (E = this.config) == null ? void 0 : E.appId }), (P = this.config) != null && P.enableLogging && console.log("🔐 SocketManager: Sent authentication for user:", e), d();
+        var p, D, O;
+        clearTimeout(m), (p = this.config) != null && p.enableLogging && console.log("✅ SocketManager: Connected to WebSocket server successfully!"), this.socket.emit("authenticate", { userId: e, appId: (D = this.config) == null ? void 0 : D.appId }), (O = this.config) != null && O.enableLogging && console.log("🔐 SocketManager: Sent authentication for user:", e), d();
       }), this.socket.on("connect_error", (p) => {
-        var E;
-        clearTimeout(m), (E = this.config) != null && E.enableLogging && console.error("❌ SocketManager: Connection failed with error:", p), h(p);
+        var D;
+        clearTimeout(m), (D = this.config) != null && D.enableLogging && console.error("❌ SocketManager: Connection failed with error:", p), h(p);
       }), this.socket.on("disconnect", (p) => {
-        var E;
-        (E = this.config) != null && E.enableLogging && console.log("🔌 SocketManager: Disconnected from server, reason:", p);
+        var D;
+        (D = this.config) != null && D.enableLogging && console.log("🔌 SocketManager: Disconnected from server, reason:", p);
       });
     });
   }
@@ -2290,7 +2290,7 @@ class it {
     this.socket && (this.socket.on("message_received", (e) => {
       var t, a, s;
       try {
-        const n = Ue.parseMessage(e);
+        const n = Ae.parseMessage(e);
         (t = this.chatSDK.events) == null || t.emit("message.received", { message: n });
       } catch (n) {
         (a = this.config) != null && a.enableLogging && console.error("❌ SocketManager: Failed to parse received message", n), (s = this.chatSDK.events) == null || s.emit("message.received", { message: e });
@@ -2342,7 +2342,7 @@ class it {
     }), this.socket.on("online-users", (e) => {
       var t, a, s, n;
       try {
-        const o = Ue.parseUsers(e);
+        const o = Ae.parseUsers(e);
         (t = this.config) != null && t.enableLogging && console.log("🌐 SocketManager: Online users update", { count: o.length }), (a = this.chatSDK.events) == null || a.emit("users.online", { users: o });
       } catch (o) {
         (s = this.config) != null && s.enableLogging && console.error("❌ SocketManager: Failed to parse online users", o), (n = this.chatSDK.events) == null || n.emit("users.online", { users: e });
@@ -2418,15 +2418,15 @@ class it {
     this.socket && (this.socket.off(e, t), (a = this.config) != null && a.enableLogging && console.log("🔇 SocketManager: Stopped listening to event:", e));
   }
 }
-const ie = class ie {
+const ce = class ce {
   constructor() {
-    this.config = null, this.isInitialized = !1, this.currentUser = null, this.auth = new et(this), this.chatUsers = new tt(this), this.users = new at(this), this.conversations = new st(this), this.messages = new nt(this), this.media = new rt(this), this.events = new ot(this), this.socket = new it(this);
+    this.config = null, this.isInitialized = !1, this.currentUser = null, this.auth = new nt(this), this.chatUsers = new rt(this), this.users = new ot(this), this.conversations = new it(this), this.messages = new ct(this), this.media = new lt(this), this.events = new dt(this), this.socket = new gt(this);
   }
   /**
    * Get singleton instance of ChatSDK
    */
   static getInstance() {
-    return ie.instance || (ie.instance = new ie()), ie.instance;
+    return ce.instance || (ce.instance = new ce()), ce.instance;
   }
   /**
    * Initialize ChatSDK with configuration
@@ -2545,29 +2545,29 @@ const ie = class ie {
       throw new Error("ChatSDK not initialized. Call ChatSDK.init() first.");
   }
 };
-ie.instance = null;
-let R = ie;
+ce.instance = null;
+let R = ce;
 R.getInstance();
-const ct = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const ht = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   ChatSDK: R
 }, Symbol.toStringTag, { value: "Module" }));
-let lt = { data: "" }, dt = (c) => typeof window == "object" ? ((c ? c.querySelector("#_goober") : window._goober) || Object.assign((c || document.head).appendChild(document.createElement("style")), { innerHTML: " ", id: "_goober" })).firstChild : c || lt, gt = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g, ht = /\/\*[^]*?\*\/|  +/g, Fe = /\n+/g, se = (c, e) => {
+let ut = { data: "" }, mt = (c) => typeof window == "object" ? ((c ? c.querySelector("#_goober") : window._goober) || Object.assign((c || document.head).appendChild(document.createElement("style")), { innerHTML: " ", id: "_goober" })).firstChild : c || ut, ft = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g, pt = /\/\*[^]*?\*\/|  +/g, xe = /\n+/g, se = (c, e) => {
   let t = "", a = "", s = "";
   for (let n in c) {
     let o = c[n];
     n[0] == "@" ? n[1] == "i" ? t = n + " " + o + ";" : a += n[1] == "f" ? se(o, n) : n + "{" + se(o, n[1] == "k" ? "" : e) + "}" : typeof o == "object" ? a += se(o, e ? e.replace(/([^,])+/g, (r) => n.replace(/([^,]*:\S+\([^)]*\))|([^,])+/g, (i) => /&/.test(i) ? i.replace(/&/g, r) : r ? r + " " + i : i)) : n) : o != null && (n = /^--/.test(n) ? n : n.replace(/[A-Z]/g, "-$&").toLowerCase(), s += se.p ? se.p(n, o) : n + ":" + o + ";");
   }
   return t + (e && s ? e + "{" + s + "}" : s) + a;
-}, X = {}, xe = (c) => {
+}, X = {}, Ne = (c) => {
   if (typeof c == "object") {
     let e = "";
-    for (let t in c) e += t + xe(c[t]);
+    for (let t in c) e += t + Ne(c[t]);
     return e;
   }
   return c;
-}, ut = (c, e, t, a, s) => {
-  let n = xe(c), o = X[n] || (X[n] = ((i) => {
+}, wt = (c, e, t, a, s) => {
+  let n = Ne(c), o = X[n] || (X[n] = ((i) => {
     let l = 0, d = 11;
     for (; l < i.length; ) d = 101 * d + i.charCodeAt(l++) >>> 0;
     return "go" + d;
@@ -2575,7 +2575,7 @@ let lt = { data: "" }, dt = (c) => typeof window == "object" ? ((c ? c.querySele
   if (!X[o]) {
     let i = n !== c ? c : ((l) => {
       let d, h, m = [{}];
-      for (; d = gt.exec(l.replace(ht, "")); ) d[4] ? m.shift() : d[3] ? (h = d[3].replace(Fe, " ").trim(), m.unshift(m[0][h] = m[0][h] || {})) : m[0][d[1]] = d[2].replace(Fe, " ").trim();
+      for (; d = ft.exec(l.replace(pt, "")); ) d[4] ? m.shift() : d[3] ? (h = d[3].replace(xe, " ").trim(), m.unshift(m[0][h] = m[0][h] || {})) : m[0][d[1]] = d[2].replace(xe, " ").trim();
       return m[0];
     })(c);
     X[o] = se(s ? { ["@keyframes " + o]: i } : i, t ? "" : "." + o);
@@ -2584,7 +2584,7 @@ let lt = { data: "" }, dt = (c) => typeof window == "object" ? ((c ? c.querySele
   return t && (X.g = X[o]), ((i, l, d, h) => {
     h ? l.data = l.data.replace(h, i) : l.data.indexOf(i) === -1 && (l.data = d ? i + l.data : l.data + i);
   })(X[o], e, a, r), o;
-}, mt = (c, e, t) => c.reduce((a, s, n) => {
+}, kt = (c, e, t) => c.reduce((a, s, n) => {
   let o = e[n];
   if (o && o.call) {
     let r = o(t), i = r && r.props && r.props.className || /^go/.test(r) && r;
@@ -2592,33 +2592,33 @@ let lt = { data: "" }, dt = (c) => typeof window == "object" ? ((c ? c.querySele
   }
   return a + s + (o ?? "");
 }, "");
-function me(c) {
+function pe(c) {
   let e = this || {}, t = c.call ? c(e.p) : c;
-  return ut(t.unshift ? t.raw ? mt(t, [].slice.call(arguments, 1), e.p) : t.reduce((a, s) => Object.assign(a, s && s.call ? s(e.p) : s), {}) : t, dt(e.target), e.g, e.o, e.k);
+  return wt(t.unshift ? t.raw ? kt(t, [].slice.call(arguments, 1), e.p) : t.reduce((a, s) => Object.assign(a, s && s.call ? s(e.p) : s), {}) : t, mt(e.target), e.g, e.o, e.k);
 }
-let Ne, ke, ye;
-me.bind({ g: 1 });
-let ee = me.bind({ k: 1 });
-function ft(c, e, t, a) {
-  se.p = e, Ne = c, ke = t, ye = a;
+let Ke, be, Me;
+pe.bind({ g: 1 });
+let ee = pe.bind({ k: 1 });
+function yt(c, e, t, a) {
+  se.p = e, Ke = c, be = t, Me = a;
 }
-function ne(c, e) {
+function re(c, e) {
   let t = this || {};
   return function() {
     let a = arguments;
     function s(n, o) {
       let r = Object.assign({}, n), i = r.className || s.className;
-      t.p = Object.assign({ theme: ke && ke() }, r), t.o = / *go\d+/.test(i), r.className = me.apply(t, a) + (i ? " " + i : "");
+      t.p = Object.assign({ theme: be && be() }, r), t.o = / *go\d+/.test(i), r.className = pe.apply(t, a) + (i ? " " + i : "");
       let l = c;
-      return c[0] && (l = r.as || c, delete r.as), ye && l[0] && ye(r), Ne(l, r);
+      return c[0] && (l = r.as || c, delete r.as), Me && l[0] && Me(r), Ke(l, r);
     }
     return s;
   };
 }
-var pt = (c) => typeof c == "function", ve = (c, e) => pt(c) ? c(e) : c, wt = /* @__PURE__ */ (() => {
+var vt = (c) => typeof c == "function", Ce = (c, e) => vt(c) ? c(e) : c, bt = /* @__PURE__ */ (() => {
   let c = 0;
   return () => (++c).toString();
-})(), kt = /* @__PURE__ */ (() => {
+})(), Mt = /* @__PURE__ */ (() => {
   let c;
   return () => {
     if (c === void 0 && typeof window < "u") {
@@ -2627,15 +2627,15 @@ var pt = (c) => typeof c == "function", ve = (c, e) => pt(c) ? c(e) : c, wt = /*
     }
     return c;
   };
-})(), yt = 20, Te = (c, e) => {
+})(), Ct = 20, ze = (c, e) => {
   switch (e.type) {
     case 0:
-      return { ...c, toasts: [e.toast, ...c.toasts].slice(0, yt) };
+      return { ...c, toasts: [e.toast, ...c.toasts].slice(0, Ct) };
     case 1:
       return { ...c, toasts: c.toasts.map((n) => n.id === e.toast.id ? { ...n, ...e.toast } : n) };
     case 2:
       let { toast: t } = e;
-      return Te(c, { type: c.toasts.find((n) => n.id === t.id) ? 1 : 0, toast: t });
+      return ze(c, { type: c.toasts.find((n) => n.id === t.id) ? 1 : 0, toast: t });
     case 3:
       let { toastId: a } = e;
       return { ...c, toasts: c.toasts.map((n) => n.id === a || a === void 0 ? { ...n, dismissed: !0, visible: !1 } : n) };
@@ -2647,33 +2647,33 @@ var pt = (c) => typeof c == "function", ve = (c, e) => pt(c) ? c(e) : c, wt = /*
       let s = e.time - (c.pausedAt || 0);
       return { ...c, pausedAt: void 0, toasts: c.toasts.map((n) => ({ ...n, pauseDuration: n.pauseDuration + s })) };
   }
-}, vt = [], we = { toasts: [], pausedAt: void 0 }, Me = (c) => {
-  we = Te(we, c), vt.forEach((e) => {
-    e(we);
+}, _t = [], ve = { toasts: [], pausedAt: void 0 }, _e = (c) => {
+  ve = ze(ve, c), _t.forEach((e) => {
+    e(ve);
   });
-}, bt = (c, e = "blank", t) => ({ createdAt: Date.now(), visible: !0, dismissed: !1, type: e, ariaProps: { role: "status", "aria-live": "polite" }, message: c, pauseDuration: 0, ...t, id: (t == null ? void 0 : t.id) || wt() }), ue = (c) => (e, t) => {
-  let a = bt(e, c, t);
-  return Me({ type: 2, toast: a }), a.id;
-}, V = (c, e) => ue("blank")(c, e);
-V.error = ue("error");
-V.success = ue("success");
-V.loading = ue("loading");
-V.custom = ue("custom");
-V.dismiss = (c) => {
-  Me({ type: 3, toastId: c });
+}, St = (c, e = "blank", t) => ({ createdAt: Date.now(), visible: !0, dismissed: !1, type: e, ariaProps: { role: "status", "aria-live": "polite" }, message: c, pauseDuration: 0, ...t, id: (t == null ? void 0 : t.id) || bt() }), me = (c) => (e, t) => {
+  let a = St(e, c, t);
+  return _e({ type: 2, toast: a }), a.id;
+}, G = (c, e) => me("blank")(c, e);
+G.error = me("error");
+G.success = me("success");
+G.loading = me("loading");
+G.custom = me("custom");
+G.dismiss = (c) => {
+  _e({ type: 3, toastId: c });
 };
-V.remove = (c) => Me({ type: 4, toastId: c });
-V.promise = (c, e, t) => {
-  let a = V.loading(e.loading, { ...t, ...t == null ? void 0 : t.loading });
+G.remove = (c) => _e({ type: 4, toastId: c });
+G.promise = (c, e, t) => {
+  let a = G.loading(e.loading, { ...t, ...t == null ? void 0 : t.loading });
   return typeof c == "function" && (c = c()), c.then((s) => {
-    let n = e.success ? ve(e.success, s) : void 0;
-    return n ? V.success(n, { id: a, ...t, ...t == null ? void 0 : t.success }) : V.dismiss(a), s;
+    let n = e.success ? Ce(e.success, s) : void 0;
+    return n ? G.success(n, { id: a, ...t, ...t == null ? void 0 : t.success }) : G.dismiss(a), s;
   }).catch((s) => {
-    let n = e.error ? ve(e.error, s) : void 0;
-    n ? V.error(n, { id: a, ...t, ...t == null ? void 0 : t.error }) : V.dismiss(a);
+    let n = e.error ? Ce(e.error, s) : void 0;
+    n ? G.error(n, { id: a, ...t, ...t == null ? void 0 : t.error }) : G.dismiss(a);
   }), c;
 };
-var Mt = ee`
+var Lt = ee`
 from {
   transform: scale(0) rotate(45deg);
 	opacity: 0;
@@ -2681,7 +2681,7 @@ from {
 to {
  transform: scale(1) rotate(45deg);
   opacity: 1;
-}`, Ct = ee`
+}`, Dt = ee`
 from {
   transform: scale(0);
   opacity: 0;
@@ -2689,7 +2689,7 @@ from {
 to {
   transform: scale(1);
   opacity: 1;
-}`, _t = ee`
+}`, Et = ee`
 from {
   transform: scale(0) rotate(90deg);
 	opacity: 0;
@@ -2697,7 +2697,7 @@ from {
 to {
   transform: scale(1) rotate(90deg);
 	opacity: 1;
-}`, St = ne("div")`
+}`, Ut = re("div")`
   width: 20px;
   opacity: 0;
   height: 20px;
@@ -2706,14 +2706,14 @@ to {
   position: relative;
   transform: rotate(45deg);
 
-  animation: ${Mt} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+  animation: ${Lt} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
     forwards;
   animation-delay: 100ms;
 
   &:after,
   &:before {
     content: '';
-    animation: ${Ct} 0.15s ease-out forwards;
+    animation: ${Dt} 0.15s ease-out forwards;
     animation-delay: 150ms;
     position: absolute;
     border-radius: 3px;
@@ -2726,18 +2726,18 @@ to {
   }
 
   &:before {
-    animation: ${_t} 0.15s ease-out forwards;
+    animation: ${Et} 0.15s ease-out forwards;
     animation-delay: 180ms;
     transform: rotate(90deg);
   }
-`, Lt = ee`
+`, Ft = ee`
   from {
     transform: rotate(0deg);
   }
   to {
     transform: rotate(360deg);
   }
-`, Et = ne("div")`
+`, It = re("div")`
   width: 12px;
   height: 12px;
   box-sizing: border-box;
@@ -2745,8 +2745,8 @@ to {
   border-radius: 100%;
   border-color: ${(c) => c.secondary || "#e0e0e0"};
   border-right-color: ${(c) => c.primary || "#616161"};
-  animation: ${Lt} 1s linear infinite;
-`, Dt = ee`
+  animation: ${Ft} 1s linear infinite;
+`, At = ee`
 from {
   transform: scale(0) rotate(45deg);
 	opacity: 0;
@@ -2754,7 +2754,7 @@ from {
 to {
   transform: scale(1) rotate(45deg);
 	opacity: 1;
-}`, Ut = ee`
+}`, xt = ee`
 0% {
 	height: 0;
 	width: 0;
@@ -2768,7 +2768,7 @@ to {
 100% {
   opacity: 1;
   height: 10px;
-}`, Ft = ne("div")`
+}`, Tt = re("div")`
   width: 20px;
   opacity: 0;
   height: 20px;
@@ -2777,13 +2777,13 @@ to {
   position: relative;
   transform: rotate(45deg);
 
-  animation: ${Dt} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+  animation: ${At} 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275)
     forwards;
   animation-delay: 100ms;
   &:after {
     content: '';
     box-sizing: border-box;
-    animation: ${Ut} 0.2s ease-out forwards;
+    animation: ${xt} 0.2s ease-out forwards;
     opacity: 0;
     animation-delay: 200ms;
     position: absolute;
@@ -2795,16 +2795,16 @@ to {
     height: 10px;
     width: 6px;
   }
-`, It = ne("div")`
+`, Nt = re("div")`
   position: absolute;
-`, At = ne("div")`
+`, Kt = re("div")`
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   min-width: 20px;
   min-height: 20px;
-`, xt = ee`
+`, zt = ee`
 from {
   transform: scale(0.6);
   opacity: 0.4;
@@ -2812,23 +2812,23 @@ from {
 to {
   transform: scale(1);
   opacity: 1;
-}`, Nt = ne("div")`
+}`, Rt = re("div")`
   position: relative;
   transform: scale(0.6);
   opacity: 0.4;
   min-width: 20px;
-  animation: ${xt} 0.3s 0.12s cubic-bezier(0.175, 0.885, 0.32, 1.275)
+  animation: ${zt} 0.3s 0.12s cubic-bezier(0.175, 0.885, 0.32, 1.275)
     forwards;
-`, Tt = ({ toast: c }) => {
+`, Bt = ({ toast: c }) => {
   let { icon: e, type: t, iconTheme: a } = c;
-  return e !== void 0 ? typeof e == "string" ? q.createElement(Nt, null, e) : e : t === "blank" ? null : q.createElement(At, null, q.createElement(Et, { ...a }), t !== "loading" && q.createElement(It, null, t === "error" ? q.createElement(St, { ...a }) : q.createElement(Ft, { ...a })));
-}, Kt = (c) => `
+  return e !== void 0 ? typeof e == "string" ? V.createElement(Rt, null, e) : e : t === "blank" ? null : V.createElement(Kt, null, V.createElement(It, { ...a }), t !== "loading" && V.createElement(Nt, null, t === "error" ? V.createElement(Ut, { ...a }) : V.createElement(Tt, { ...a })));
+}, $t = (c) => `
 0% {transform: translate3d(0,${c * -200}%,0) scale(.6); opacity:.5;}
 100% {transform: translate3d(0,0,0) scale(1); opacity:1;}
-`, zt = (c) => `
+`, Pt = (c) => `
 0% {transform: translate3d(0,0,-1px) scale(1); opacity:1;}
 100% {transform: translate3d(0,${c * -150}%,-1px) scale(.6); opacity:0;}
-`, Rt = "0%{opacity:0;} 100%{opacity:1;}", Bt = "0%{opacity:1;} 100%{opacity:0;}", $t = ne("div")`
+`, Ot = "0%{opacity:0;} 100%{opacity:1;}", jt = "0%{opacity:1;} 100%{opacity:0;}", Wt = re("div")`
   display: flex;
   align-items: center;
   background: #fff;
@@ -2840,30 +2840,30 @@ to {
   pointer-events: auto;
   padding: 8px 10px;
   border-radius: 8px;
-`, Pt = ne("div")`
+`, qt = re("div")`
   display: flex;
   justify-content: center;
   margin: 4px 10px;
   color: inherit;
   flex: 1 1 auto;
   white-space: pre-line;
-`, Ot = (c, e) => {
-  let t = c.includes("top") ? 1 : -1, [a, s] = kt() ? [Rt, Bt] : [Kt(t), zt(t)];
+`, Vt = (c, e) => {
+  let t = c.includes("top") ? 1 : -1, [a, s] = Mt() ? [Ot, jt] : [$t(t), Pt(t)];
   return { animation: e ? `${ee(a)} 0.35s cubic-bezier(.21,1.02,.73,1) forwards` : `${ee(s)} 0.4s forwards cubic-bezier(.06,.71,.55,1)` };
 };
-q.memo(({ toast: c, position: e, style: t, children: a }) => {
-  let s = c.height ? Ot(c.position || e || "top-center", c.visible) : { opacity: 0 }, n = q.createElement(Tt, { toast: c }), o = q.createElement(Pt, { ...c.ariaProps }, ve(c.message, c));
-  return q.createElement($t, { className: c.className, style: { ...s, ...t, ...c.style } }, typeof a == "function" ? a({ icon: n, message: o }) : q.createElement(q.Fragment, null, n, o));
+V.memo(({ toast: c, position: e, style: t, children: a }) => {
+  let s = c.height ? Vt(c.position || e || "top-center", c.visible) : { opacity: 0 }, n = V.createElement(Bt, { toast: c }), o = V.createElement(qt, { ...c.ariaProps }, Ce(c.message, c));
+  return V.createElement(Wt, { className: c.className, style: { ...s, ...t, ...c.style } }, typeof a == "function" ? a({ icon: n, message: o }) : V.createElement(V.Fragment, null, n, o));
 });
-ft(q.createElement);
-me`
+yt(V.createElement);
+pe`
   z-index: 9999;
   > * {
     pointer-events: auto;
   }
 `;
-var z = V;
-const jt = {
+var z = G;
+const Gt = {
   // General
   send: "Send",
   // Conversations
@@ -2971,7 +2971,7 @@ const jt = {
   chat_with_owner: "Chat with Owner",
   your_product: "Your Product",
   owner_label: "Owner:"
-}, Wt = {
+}, Ht = {
   // General
   send: "إرسال",
   // Conversations
@@ -3079,15 +3079,31 @@ const jt = {
   chat_with_owner: "الدردشة مع المالك",
   your_product: "منتجك",
   owner_label: "المالك:"
-}, be = {
-  en: jt,
-  ar: Wt
+}, Re = "chatsdk-root";
+let ue = null;
+const na = (c) => {
+  ue = c;
+}, ra = () => {
+  if (ue && ue.isConnected)
+    return ue;
+  const c = document.querySelector(`.${Re}`);
+  return c ? (ue = c, c) : null;
+}, Se = (c) => {
+  document.querySelectorAll(`.${Re}`).forEach(c);
+}, fe = {
+  en: Gt,
+  ar: Ht
 };
-let he = "en";
-const Ie = (c) => {
-  be[c] ? (he = c, document.documentElement.lang = c, document.documentElement.dir = qt() ? "rtl" : "ltr", localStorage.setItem("chatSDK_language", c)) : (console.warn(`Locale "${c}" not found, falling back to "en".`), he = "en", document.documentElement.lang = "en", document.documentElement.dir = "ltr");
-}, Zt = () => he, qt = () => he === "ar", w = (c, e) => {
-  let t = be[he][c] || be.en[c] || c;
+let le = "en", Te = !1;
+const we = () => {
+  const c = le, e = Yt() ? "rtl" : "ltr";
+  Se((t) => {
+    t.setAttribute("lang", c), t.setAttribute("dir", e);
+  });
+}, oa = (c) => {
+  fe[c] ? (le = c, localStorage.setItem("chatSDK_language", c)) : (console.warn(`Locale "${c}" not found, falling back to "en".`), le = "en"), we();
+}, ia = () => le, Yt = () => le === "ar", w = (c, e) => {
+  let t = fe[le][c] || fe.en[c] || c;
   if (e)
     for (const a in e)
       t = t.replace(
@@ -3095,11 +3111,14 @@ const Ie = (c) => {
         String(e[a])
       );
   return t;
-}, Ae = localStorage.getItem("chatSDK_language");
-Ie(Ae || "en");
-const Xt = ({ conversation: c, currentUser: e, onClose: t, onBack: a }) => {
-  var Se;
-  const [s, n] = T([]), [o, r] = T(""), [i, l] = T(!1), [d, h] = T(!1), [m, p] = T({}), [E, P] = T(!1), [Ce, ge] = T(!0), [y, C] = T(1), [O, G] = T(null), [B, J] = T(!1), [D, F] = T(!1), [N, x] = T(!1), [K, j] = T(null), [te, ae] = T(!1), Q = le(null), ce = le(null), $ = le(null), H = le(null), re = 20, oe = De(() => {
+}, Be = () => {
+  if (Te) return;
+  Te = !0;
+  const c = localStorage.getItem("chatSDK_language");
+  c && fe[c] && (le = c), we();
+}, Jt = ({ conversation: c, currentUser: e, onClose: t, onBack: a }) => {
+  var Ee;
+  const [s, n] = N([]), [o, r] = N(""), [i, l] = N(!1), [d, h] = N(!1), [m, p] = N({}), [D, O] = N(!1), [Le, he] = N(!0), [y, C] = N(1), [j, H] = N(null), [B, J] = N(!1), [E, F] = N(!1), [T, x] = N(!1), [K, W] = N(null), [te, ae] = N(!1), Q = ne(null), de = ne(null), $ = ne(null), Y = ne(null), oe = 20, ie = Ie(() => {
     if (!c || !e) return null;
     const g = c.participants || [];
     if (g.length === 0) return null;
@@ -3108,7 +3127,7 @@ const Xt = ({ conversation: c, currentUser: e, onClose: t, onBack: a }) => {
       const S = v.id || v.userId, k = v.externalUserId || v.external_user_id;
       return !(f && S && S === f || b && k && k === b) && (S || k);
     }) || null;
-  }, [c, e]), U = oe(), W = De(() => {
+  }, [c, e]), U = ie(), q = Ie(() => {
     if (!c) return { userName: w("conversations_title"), productName: null, productImage: null, productMetadata: null };
     const g = U && (U.name || U.userName || U.displayName || U.externalUserId) || w("unknown_user"), f = c.productContext || c.product_context;
     return f ? {
@@ -3119,9 +3138,9 @@ const Xt = ({ conversation: c, currentUser: e, onClose: t, onBack: a }) => {
       productMetadata: f.productMetadata || f.product_metadata
     } : { userName: g, productName: null, productImage: null, productMetadata: null };
   }, [c, U])();
-  Y(() => (c && (x(!1), qe(1, !1), ze(), R.getInstance().chatUsers.startViewingConversation(c.id)), () => {
-    c && (Re(), R.getInstance().chatUsers.stopViewingConversation(c.id));
-  }), [c]), Y(() => {
+  P(() => (c && (x(!1), Ye(1, !1), Pe(), R.getInstance().chatUsers.startViewingConversation(c.id)), () => {
+    c && (Oe(), R.getInstance().chatUsers.stopViewingConversation(c.id));
+  }), [c]), P(() => {
     const g = R.getInstance(), f = (k) => {
       const _ = k.message;
       _.roomId === (c == null ? void 0 : c.id) && n((I) => I.some((L) => L.id === _.id) ? I : (_.senderId !== e.id && g.chatUsers.markMessageRead(_.id).catch((L) => {
@@ -3159,53 +3178,53 @@ const Xt = ({ conversation: c, currentUser: e, onClose: t, onBack: a }) => {
         ...c.metadata || {},
         blockedUsers: I
       };
-      const A = e.id || e.userId, L = oe(), Z = L ? L.id || L.userId || L.externalUserId || L.external_user_id : null;
+      const A = e.id || e.userId, L = ie(), Z = L ? L.id || L.userId || L.externalUserId || L.external_user_id : null;
       J(I[A] === 1), F(Z ? I[Z] === 1 : !1);
     };
     return g.events.on("message.received", f), g.events.on("message.read.receipt", b), g.events.on("messages.read.receipt", v), g.events.on("conversation.block_status", S), () => {
       g.events.off("message.received", f), g.events.off("message.read.receipt", b), g.events.off("messages.read.receipt", v), g.events.off("conversation.block_status", S);
     };
-  }, [c == null ? void 0 : c.id, e == null ? void 0 : e.id]), Y(() => {
+  }, [c == null ? void 0 : c.id, e == null ? void 0 : e.id]), P(() => {
     if (!c || !e) {
-      J(!1), F(!1), G(null);
+      J(!1), F(!1), H(null);
       return;
     }
-    const f = (c.metadata || {}).blockedUsers || {}, b = e.id || e.userId, v = oe(), S = v ? v.id || v.userId || v.externalUserId || v.external_user_id : null;
-    J(f[b] === 1), F(S ? f[S] === 1 : !1), G({
+    const f = (c.metadata || {}).blockedUsers || {}, b = e.id || e.userId, v = ie(), S = v ? v.id || v.userId || v.externalUserId || v.external_user_id : null;
+    J(f[b] === 1), F(S ? f[S] === 1 : !1), H({
       chatId: c.id,
       currentUserId: b,
       isBlockedByOther: f[b] === 1,
       usersBlockedByMe: Object.keys(f).filter((k) => f[k] === 1),
       blockedUsers: f
     });
-  }, [c == null ? void 0 : c.id, JSON.stringify(c == null ? void 0 : c.metadata), e == null ? void 0 : e.id]), Y(() => {
-    Be();
-  }, [s]), Y(() => {
+  }, [c == null ? void 0 : c.id, JSON.stringify(c == null ? void 0 : c.metadata), e == null ? void 0 : e.id]), P(() => {
+    je();
+  }, [s]), P(() => {
     const g = (f) => {
       f.target.closest(".chat-options-wrapper") || x(!1);
     };
     return document.addEventListener("click", g), () => {
-      document.removeEventListener("click", g), H.current && clearTimeout(H.current);
+      document.removeEventListener("click", g), Y.current && clearTimeout(Y.current);
     };
   }, []);
-  const ze = () => {
+  const Pe = () => {
     c && R.getInstance().socket.joinRoom(c.id);
-  }, Re = () => {
+  }, Oe = () => {
     c && R.getInstance().socket.leaveRoom(c.id);
-  }, Be = () => {
+  }, je = () => {
     var g;
     (g = Q.current) == null || g.scrollIntoView({ behavior: "smooth" });
-  }, $e = (g) => new Date(g).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), pe = (g) => {
+  }, We = (g) => new Date(g).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), ye = (g) => {
     const f = new Date(g), b = /* @__PURE__ */ new Date(), v = new Date(b.getFullYear(), b.getMonth(), b.getDate()), S = new Date(f.getFullYear(), f.getMonth(), f.getDate()), k = Math.floor((v.getTime() - S.getTime()) / (1e3 * 60 * 60 * 24));
     if (k === 0) return "Today";
     if (k === 1) return "Yesterday";
     const _ = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], I = f.getDate().toString().padStart(2, "0"), A = (f.getMonth() + 1).toString().padStart(2, "0");
     return k < 7 ? `${_[f.getDay()]}, ${I}/${A}` : `${I}/${A}/${f.getFullYear()}`;
-  }, Pe = (g, f) => {
+  }, qe = (g, f) => {
     if (f === 0) return !0;
     const b = s[f - 1], v = new Date(b.timestamp).toDateString(), S = new Date(g.timestamp).toDateString();
     return v !== S;
-  }, Oe = (g) => g ? g.includes("pdf") ? "📄" : g.includes("word") ? "📝" : g.includes("excel") ? "📊" : g.includes("audio") ? "🎵" : g.includes("video") ? "🎥" : "📎" : "📎", je = () => {
+  }, Ve = (g) => g ? g.includes("pdf") ? "📄" : g.includes("word") ? "📝" : g.includes("excel") ? "📊" : g.includes("audio") ? "🎵" : g.includes("video") ? "🎥" : "📎" : "📎", Ge = () => {
     if (!$.current) return;
     const g = $.current, f = g.querySelectorAll(".date-divider[data-date]");
     if (f.length === 0) return;
@@ -3218,10 +3237,10 @@ const Xt = ({ conversation: c, currentUser: e, onClose: t, onBack: a }) => {
         break;
       }
     }
-    !b && s.length > 0 && (b = pe(s[0].timestamp)), b && (j(b), ae(!0), H.current && clearTimeout(H.current), H.current = setTimeout(() => {
+    !b && s.length > 0 && (b = ye(s[0].timestamp)), b && (W(b), ae(!0), Y.current && clearTimeout(Y.current), Y.current = setTimeout(() => {
       ae(!1);
     }, 2e3));
-  }, We = () => {
+  }, He = () => {
     if (!U) return;
     const g = U, f = g.phone || g.phoneNumber || g.mobile || g.externalUserId || "";
     if (!f) {
@@ -3234,25 +3253,25 @@ const Xt = ({ conversation: c, currentUser: e, onClose: t, onBack: a }) => {
       const v = document.createElement("textarea");
       v.value = f, document.body.appendChild(v), v.select(), document.execCommand("copy"), document.body.removeChild(v), z.success(w("number_copied") || `Phone number copied: ${f}`);
     });
-  }, qe = async (g = 1, f = !1) => {
+  }, Ye = async (g = 1, f = !1) => {
     if (c) {
-      g === 1 ? (l(!0), n([]), C(1), ge(!0)) : P(!0);
+      g === 1 ? (l(!0), n([]), C(1), he(!0)) : O(!0);
       try {
         const v = await R.getInstance().messages.getMessages({
           conversationId: c.id,
-          limit: re,
-          offset: (g - 1) * re
+          limit: oe,
+          offset: (g - 1) * oe
         }), S = v.sort(
           (k, _) => new Date(k.timestamp).getTime() - new Date(_.timestamp).getTime()
         );
-        f && g > 1 ? n((k) => [...S, ...k]) : n(S), ge(v.length === re), C(g);
+        f && g > 1 ? n((k) => [...S, ...k]) : n(S), he(v.length === oe), C(g);
       } catch {
         z.error(w("error_load_messages"));
       } finally {
-        l(!1), P(!1);
+        l(!1), O(!1);
       }
     }
-  }, Ve = async (g) => {
+  }, Je = async (g) => {
     if (g.preventDefault(), !c || !o.trim() || B) {
       B && z.error(w("you_are_blocked"));
       return;
@@ -3264,7 +3283,7 @@ const Xt = ({ conversation: c, currentUser: e, onClose: t, onBack: a }) => {
     } catch {
       r(f), z.error(w("error_send_message"));
     }
-  }, Ge = async (g) => {
+  }, Qe = async (g) => {
     if (!c) return;
     const f = `temp_${Date.now()}`, b = {
       id: f,
@@ -3325,7 +3344,7 @@ const Xt = ({ conversation: c, currentUser: e, onClose: t, onBack: a }) => {
     } finally {
       h(!1);
     }
-  }, He = async () => {
+  }, Ze = async () => {
     if (x(!1), !(!c || !e) && window.confirm(w("block_user_confirm")))
       try {
         const g = R.getInstance();
@@ -3348,7 +3367,7 @@ const Xt = ({ conversation: c, currentUser: e, onClose: t, onBack: a }) => {
       } catch {
         z.error(w("failed_to_block"));
       }
-  }, _e = async () => {
+  }, De = async () => {
     if (x(!1), !(!c || !e) && window.confirm(w("unblock_user_confirm")))
       try {
         const g = R.getInstance();
@@ -3378,27 +3397,27 @@ const Xt = ({ conversation: c, currentUser: e, onClose: t, onBack: a }) => {
     /* @__PURE__ */ M("div", { className: "chat-header", children: [
       /* @__PURE__ */ M("div", { className: "chat-header-left", children: [
         a && /* @__PURE__ */ u("button", { className: "chat-back-btn", onClick: a, title: w("back") || "Back", children: /* @__PURE__ */ u("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ u("polyline", { points: "15 18 9 12 15 6" }) }) }),
-        /* @__PURE__ */ u("div", { className: "chat-header-avatar", children: /* @__PURE__ */ u("div", { className: "avatar-placeholder", children: W.userName ? W.userName.charAt(0).toUpperCase() : "?" }) }),
-        /* @__PURE__ */ u("div", { className: "chat-header-info", children: /* @__PURE__ */ u("h3", { className: "chat-participant-name", children: W.userName }) })
+        /* @__PURE__ */ u("div", { className: "chat-header-avatar", children: /* @__PURE__ */ u("div", { className: "avatar-placeholder", children: q.userName ? q.userName.charAt(0).toUpperCase() : "?" }) }),
+        /* @__PURE__ */ u("div", { className: "chat-header-info", children: /* @__PURE__ */ u("h3", { className: "chat-participant-name", children: q.userName }) })
       ] }),
       /* @__PURE__ */ M("div", { className: "chat-header-actions", children: [
-        U && /* @__PURE__ */ u("button", { onClick: We, className: "chat-action-btn", title: w("call") || "Call", children: /* @__PURE__ */ u("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ u("path", { d: "M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" }) }) }),
+        U && /* @__PURE__ */ u("button", { onClick: He, className: "chat-action-btn", title: w("call") || "Call", children: /* @__PURE__ */ u("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ u("path", { d: "M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" }) }) }),
         t && /* @__PURE__ */ u("button", { onClick: t, className: "chat-action-btn", title: w("close") || "Close", children: /* @__PURE__ */ u("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ u("path", { d: "M4 14h6v6M20 10h-6V4M14 10l7-7M3 21l7-7" }) }) }),
         c && U && /* @__PURE__ */ M("div", { className: "chat-options-wrapper", children: [
-          /* @__PURE__ */ u("button", { onClick: () => x(!N), className: "chat-action-btn", title: w("options") || "Options", children: /* @__PURE__ */ M("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: [
+          /* @__PURE__ */ u("button", { onClick: () => x(!T), className: "chat-action-btn", title: w("options") || "Options", children: /* @__PURE__ */ M("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: [
             /* @__PURE__ */ u("circle", { cx: "12", cy: "5", r: "2" }),
             /* @__PURE__ */ u("circle", { cx: "12", cy: "12", r: "2" }),
             /* @__PURE__ */ u("circle", { cx: "12", cy: "19", r: "2" })
           ] }) }),
-          N && /* @__PURE__ */ M("div", { className: "chat-options-menu", children: [
-            !B && !D && /* @__PURE__ */ M("button", { onClick: He, className: "danger", children: [
+          T && /* @__PURE__ */ M("div", { className: "chat-options-menu", children: [
+            !B && !E && /* @__PURE__ */ M("button", { onClick: Ze, className: "danger", children: [
               /* @__PURE__ */ M("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
                 /* @__PURE__ */ u("circle", { cx: "12", cy: "12", r: "10" }),
                 /* @__PURE__ */ u("line", { x1: "4.93", y1: "4.93", x2: "19.07", y2: "19.07" })
               ] }),
               w("block_user")
             ] }),
-            D && /* @__PURE__ */ M("button", { onClick: _e, children: [
+            E && /* @__PURE__ */ M("button", { onClick: De, children: [
               /* @__PURE__ */ M("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
                 /* @__PURE__ */ u("circle", { cx: "12", cy: "12", r: "10" }),
                 /* @__PURE__ */ u("path", { d: "M2 12h20" })
@@ -3409,26 +3428,26 @@ const Xt = ({ conversation: c, currentUser: e, onClose: t, onBack: a }) => {
         ] })
       ] })
     ] }),
-    W.productName && /* @__PURE__ */ M("div", { className: "chat-product-bar", children: [
-      W.productImage && /* @__PURE__ */ u("img", { src: W.productImage, alt: W.productName }),
+    q.productName && /* @__PURE__ */ M("div", { className: "chat-product-bar", children: [
+      q.productImage && /* @__PURE__ */ u("img", { src: q.productImage, alt: q.productName }),
       /* @__PURE__ */ M("div", { className: "chat-product-bar-info", children: [
-        /* @__PURE__ */ u("p", { className: "chat-product-bar-name", children: W.productName }),
-        ((Se = W.productMetadata) == null ? void 0 : Se.price) && /* @__PURE__ */ M("p", { className: "chat-product-bar-price", children: [
-          W.productMetadata.price,
+        /* @__PURE__ */ u("p", { className: "chat-product-bar-name", children: q.productName }),
+        ((Ee = q.productMetadata) == null ? void 0 : Ee.price) && /* @__PURE__ */ M("p", { className: "chat-product-bar-price", children: [
+          q.productMetadata.price,
           " ",
-          W.productMetadata.currency || "QAR"
+          q.productMetadata.currency || "QAR"
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ M("div", { className: "chat-messages", ref: $, onScroll: je, onClick: () => x(!1), children: [
+    /* @__PURE__ */ M("div", { className: "chat-messages", ref: $, onScroll: Ge, onClick: () => x(!1), children: [
       K && !i && s.length > 0 && /* @__PURE__ */ u("div", { className: `sticky-date-header ${te ? "sticky-date-visible" : ""}`, children: /* @__PURE__ */ u("span", { className: "sticky-date-pill", children: K }) }),
-      i ? /* @__PURE__ */ u("div", { className: "loading-messages", children: w("loading_messages") }) : /* @__PURE__ */ M(Je, { children: [
+      i ? /* @__PURE__ */ u("div", { className: "loading-messages", children: w("loading_messages") }) : /* @__PURE__ */ M(et, { children: [
         s.map((g, f) => {
-          var b, v, S, k, _, I, A, L, Z, Le;
-          return /* @__PURE__ */ M(Qe.Fragment, { children: [
-            Pe(g, f) && /* @__PURE__ */ M("div", { className: "date-divider", "data-date": pe(g.timestamp), children: [
+          var b, v, S, k, _, I, A, L, Z, Ue;
+          return /* @__PURE__ */ M(tt.Fragment, { children: [
+            qe(g, f) && /* @__PURE__ */ M("div", { className: "date-divider", "data-date": ye(g.timestamp), children: [
               /* @__PURE__ */ u("div", { className: "date-divider-line" }),
-              /* @__PURE__ */ u("span", { className: "date-divider-text", children: pe(g.timestamp) }),
+              /* @__PURE__ */ u("span", { className: "date-divider-text", children: ye(g.timestamp) }),
               /* @__PURE__ */ u("div", { className: "date-divider-line" })
             ] }),
             /* @__PURE__ */ u("div", { className: `message ${g.senderId === e.id ? "sent" : "received"}`, children: /* @__PURE__ */ M("div", { className: "message-content", children: [
@@ -3441,8 +3460,8 @@ const Xt = ({ conversation: c, currentUser: e, onClose: t, onBack: a }) => {
                     alt: ((S = g.metadata) == null ? void 0 : S.fileName) || w("image"),
                     className: g.isUploading ? "uploading-image" : "",
                     onClick: () => {
-                      var Ee;
-                      return !g.isUploading && ((Ee = g.metadata) == null ? void 0 : Ee.fileUrl) && window.open(g.metadata.fileUrl, "_blank");
+                      var Fe;
+                      return !g.isUploading && ((Fe = g.metadata) == null ? void 0 : Fe.fileUrl) && window.open(g.metadata.fileUrl, "_blank");
                     }
                   }
                 ),
@@ -3458,7 +3477,7 @@ const Xt = ({ conversation: c, currentUser: e, onClose: t, onBack: a }) => {
                 /* File Message */
                 /* @__PURE__ */ M("div", { className: "message-attachment file-attachment", children: [
                   /* @__PURE__ */ M("div", { className: "file-info", children: [
-                    /* @__PURE__ */ u("div", { className: "file-icon", children: Oe((A = g.metadata) == null ? void 0 : A.mimeType) }),
+                    /* @__PURE__ */ u("div", { className: "file-icon", children: Ve((A = g.metadata) == null ? void 0 : A.mimeType) }),
                     /* @__PURE__ */ M("div", { className: "file-details", children: [
                       /* @__PURE__ */ u("div", { className: "file-name", children: ((L = g.metadata) == null ? void 0 : L.fileName) || w("file") }),
                       /* @__PURE__ */ u("div", { className: "file-size", children: (Z = g.metadata) != null && Z.fileSize ? `${Math.round(g.metadata.fileSize / 1024)} KB` : w("unknown_size") })
@@ -3467,7 +3486,7 @@ const Xt = ({ conversation: c, currentUser: e, onClose: t, onBack: a }) => {
                   /* @__PURE__ */ u(
                     "a",
                     {
-                      href: ((Le = g.metadata) == null ? void 0 : Le.fileUrl) || "#",
+                      href: ((Ue = g.metadata) == null ? void 0 : Ue.fileUrl) || "#",
                       target: "_blank",
                       rel: "noopener noreferrer",
                       className: "download-btn",
@@ -3480,7 +3499,7 @@ const Xt = ({ conversation: c, currentUser: e, onClose: t, onBack: a }) => {
                 g.content
               ),
               /* @__PURE__ */ M("div", { className: "message-footer", children: [
-                /* @__PURE__ */ u("span", { className: "message-time", children: $e(g.timestamp) }),
+                /* @__PURE__ */ u("span", { className: "message-time", children: We(g.timestamp) }),
                 g.senderId === e.id && /* @__PURE__ */ u("span", { className: "message-status", children: /* @__PURE__ */ u("span", { className: "read-status", children: g.isRead ? /* @__PURE__ */ M("svg", { className: "read-check is-read", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", width: "20", height: "20", children: [
                   /* @__PURE__ */ u("polyline", { points: "1 13 5 17 11 9" }),
                   /* @__PURE__ */ u("polyline", { points: "7 13 11 17 17 9" })
@@ -3492,23 +3511,23 @@ const Xt = ({ conversation: c, currentUser: e, onClose: t, onBack: a }) => {
         /* @__PURE__ */ u("div", { ref: Q })
       ] })
     ] }),
-    D && /* @__PURE__ */ M("div", { className: "blocked-ui blocked-by-me", children: [
-      /* @__PURE__ */ u("div", { className: "blocked-title", children: w("you_have_blocked", { userName: W.userName || w("unknown_user") }) }),
+    E && /* @__PURE__ */ M("div", { className: "blocked-ui blocked-by-me", children: [
+      /* @__PURE__ */ u("div", { className: "blocked-title", children: w("you_have_blocked", { userName: q.userName || w("unknown_user") }) }),
       /* @__PURE__ */ u("div", { className: "blocked-message", children: w("you_have_blocked_submessage") }),
-      /* @__PURE__ */ u("button", { onClick: _e, className: "unblock-btn", children: w("unblock_user") })
+      /* @__PURE__ */ u("button", { onClick: De, className: "unblock-btn", children: w("unblock_user") })
     ] }),
-    B && !D && /* @__PURE__ */ M("div", { className: "blocked-ui blocked-by-other", children: [
-      /* @__PURE__ */ u("div", { className: "blocked-title", children: w("blocked_by_user", { userName: W.userName || w("unknown_user") }) }),
+    B && !E && /* @__PURE__ */ M("div", { className: "blocked-ui blocked-by-other", children: [
+      /* @__PURE__ */ u("div", { className: "blocked-title", children: w("blocked_by_user", { userName: q.userName || w("unknown_user") }) }),
       /* @__PURE__ */ u("div", { className: "blocked-message", children: w("blocked_by_user_submessage") })
     ] }),
-    !D && !B && /* @__PURE__ */ M("form", { onSubmit: Ve, className: "chat-input", children: [
+    !E && !B && /* @__PURE__ */ M("form", { onSubmit: Je, className: "chat-input", children: [
       /* @__PURE__ */ u(
         "button",
         {
           type: "button",
           onClick: () => {
             var g;
-            return (g = ce.current) == null ? void 0 : g.click();
+            return (g = de.current) == null ? void 0 : g.click();
           },
           disabled: i || d || B,
           className: "attachment-btn",
@@ -3519,14 +3538,14 @@ const Xt = ({ conversation: c, currentUser: e, onClose: t, onBack: a }) => {
       /* @__PURE__ */ u(
         "input",
         {
-          ref: ce,
+          ref: de,
           type: "file",
           style: { display: "none" },
           accept: "image/*,video/*,audio/*,.pdf,.doc,.docx,.txt",
           onChange: (g) => {
             var b;
             const f = (b = g.target.files) == null ? void 0 : b[0];
-            f && (Ge(f), g.target.value = "");
+            f && (Qe(f), g.target.value = "");
           }
         }
       ),
@@ -3543,92 +3562,97 @@ const Xt = ({ conversation: c, currentUser: e, onClose: t, onBack: a }) => {
       /* @__PURE__ */ u("button", { type: "submit", disabled: !o.trim() || i || d || B, className: "send-btn", children: w(d ? "uploading" : "send") })
     ] })
   ] });
-}, ea = ({
+}, ca = (c) => {
+  const e = ne(null);
+  return P(() => {
+    Be(), we();
+  }, []), /* @__PURE__ */ u("div", { ref: e, className: "chatsdk-root", children: /* @__PURE__ */ u(Jt, { ...c }) });
+}, Qt = ({
   currentUser: c,
   onSelectConversation: e,
   selectedConversationId: t
 }) => {
-  const [a, s] = T([]), [n, o] = T(!1), [r, i] = T(""), l = le(t), d = le(c.id);
-  Y(() => {
+  const [a, s] = N([]), [n, o] = N(!1), [r, i] = N(""), l = ne(t), d = ne(c.id);
+  P(() => {
     l.current = t;
-  }, [t]), Y(() => {
+  }, [t]), P(() => {
     d.current = c.id;
-  }, [c.id]), Y(() => {
+  }, [c.id]), P(() => {
     m();
-  }, []), Y(() => {
+  }, []), P(() => {
     c && (s([]), m());
-  }, [c.id]), Y(() => {
+  }, [c.id]), P(() => {
     var J;
-    const y = R.getInstance(), C = (D) => {
-      const F = D.message, N = F.roomId || F.conversationId;
+    const y = R.getInstance(), C = (E) => {
+      const F = E.message, T = F.roomId || F.conversationId;
       s(
         (x) => x.map((K) => {
-          if (K.id === N) {
-            const j = F.senderId !== d.current, te = l.current !== N;
+          if (K.id === T) {
+            const W = F.senderId !== d.current, te = l.current !== T;
             return {
               ...K,
               lastMessage: F,
-              unreadCount: j && te ? K.unreadCount + 1 : K.unreadCount
+              unreadCount: W && te ? K.unreadCount + 1 : K.unreadCount
             };
           }
           return K;
-        }).sort((K, j) => {
-          var Q, ce;
-          const te = ((Q = K.lastMessage) == null ? void 0 : Q.timestamp) || K.createdAt, ae = ((ce = j.lastMessage) == null ? void 0 : ce.timestamp) || j.createdAt;
+        }).sort((K, W) => {
+          var Q, de;
+          const te = ((Q = K.lastMessage) == null ? void 0 : Q.timestamp) || K.createdAt, ae = ((de = W.lastMessage) == null ? void 0 : de.timestamp) || W.createdAt;
           return new Date(ae).getTime() - new Date(te).getTime();
         })
-      ), F.senderId !== d.current && l.current === N && R.getInstance().chatUsers.markMessageRead(F.id).then(() => {
+      ), F.senderId !== d.current && l.current === T && R.getInstance().chatUsers.markMessageRead(F.id).then(() => {
         s(
           (K) => K.map(
-            (j) => j.id === N ? { ...j, unreadCount: 0 } : j
+            (W) => W.id === T ? { ...W, unreadCount: 0 } : W
           )
         );
       }).catch((K) => {
         console.warn("Failed to auto-mark message as read:", K);
       });
-    }, O = (D) => {
-      var K, j, te, ae;
-      const F = D.conversationId || ((K = D.conversation) == null ? void 0 : K.id) || ((j = D.conversation) == null ? void 0 : j.conversationId);
+    }, j = (E) => {
+      var K, W, te, ae;
+      const F = E.conversationId || ((K = E.conversation) == null ? void 0 : K.id) || ((W = E.conversation) == null ? void 0 : W.conversationId);
       if (!F) return;
-      const N = D.lastMessage || ((te = D.conversation) == null ? void 0 : te.lastMessage), x = (ae = D.conversation) == null ? void 0 : ae.unreadCount;
+      const T = E.lastMessage || ((te = E.conversation) == null ? void 0 : te.lastMessage), x = (ae = E.conversation) == null ? void 0 : ae.unreadCount;
       s((Q) => Q.some(($) => $.id === F) ? Q.map(($) => {
         if ($.id !== F) return $;
-        const H = l.current === F, re = d.current;
+        const Y = l.current === F, oe = d.current;
         if (typeof x == "number")
           return {
             ...$,
-            lastMessage: N || $.lastMessage,
-            unreadCount: H ? 0 : x
+            lastMessage: T || $.lastMessage,
+            unreadCount: Y ? 0 : x
           };
-        const oe = (N == null ? void 0 : N.senderId) && N.senderId !== re, U = !!N && oe && !H;
+        const ie = (T == null ? void 0 : T.senderId) && T.senderId !== oe, U = !!T && ie && !Y;
         return {
           ...$,
-          lastMessage: N || $.lastMessage,
-          unreadCount: H ? 0 : U ? $.unreadCount + 1 : $.unreadCount
+          lastMessage: T || $.lastMessage,
+          unreadCount: Y ? 0 : U ? $.unreadCount + 1 : $.unreadCount
         };
-      }).sort(($, H) => {
-        var U, fe;
-        const re = ((U = $.lastMessage) == null ? void 0 : U.timestamp) || $.createdAt, oe = ((fe = H.lastMessage) == null ? void 0 : fe.timestamp) || H.createdAt;
-        return new Date(oe).getTime() - new Date(re).getTime();
+      }).sort(($, Y) => {
+        var U, ke;
+        const oe = ((U = $.lastMessage) == null ? void 0 : U.timestamp) || $.createdAt, ie = ((ke = Y.lastMessage) == null ? void 0 : ke.timestamp) || Y.createdAt;
+        return new Date(ie).getTime() - new Date(oe).getTime();
       }) : (m(), Q));
-    }, G = (D) => {
-      const F = D.conversationId || D.roomId;
+    }, H = (E) => {
+      const F = E.conversationId || E.roomId;
       F && s(
-        (N) => N.map(
+        (T) => T.map(
           (x) => x.id === F ? { ...x, unreadCount: 0 } : x
         )
       );
-    }, B = (D) => {
-      const F = D.roomId || D.conversationId;
+    }, B = (E) => {
+      const F = E.roomId || E.conversationId;
       F && s(
-        (N) => N.map(
+        (T) => T.map(
           (x) => x.id === F ? { ...x, unreadCount: 0 } : x
         )
       );
     };
-    return y.events.on("message.received", C), y.events.on("conversation.updated", O), y.events.on("conversation.read", G), (J = y.socket) != null && J.isConnected() && (y.socket.on("auto_marked_read", B), y.socket.on("room_marked_read", G)), () => {
-      var D;
-      y.events.off("message.received", C), y.events.off("conversation.updated", O), y.events.off("conversation.read", G), (D = y.socket) != null && D.isConnected() && (y.socket.off("auto_marked_read", B), y.socket.off("room_marked_read", G));
+    return y.events.on("message.received", C), y.events.on("conversation.updated", j), y.events.on("conversation.read", H), (J = y.socket) != null && J.isConnected() && (y.socket.on("auto_marked_read", B), y.socket.on("room_marked_read", H)), () => {
+      var E;
+      y.events.off("message.received", C), y.events.off("conversation.updated", j), y.events.off("conversation.read", H), (E = y.socket) != null && E.isConnected() && (y.socket.off("auto_marked_read", B), y.socket.off("room_marked_read", H));
     };
   }, []);
   const h = async (y) => {
@@ -3645,26 +3669,26 @@ const Xt = ({ conversation: c, currentUser: e, onClose: t, onBack: a }) => {
     o(!0);
     try {
       const C = await R.getInstance().chatUsers.getConversations();
-      let O = C;
-      C && typeof C == "object" && !Array.isArray(C) && (O = C.conversations || C.data || []), s(Array.isArray(O) ? O : []);
+      let j = C;
+      C && typeof C == "object" && !Array.isArray(C) && (j = C.conversations || C.data || []), s(Array.isArray(j) ? j : []);
     } catch {
       z.error(w("error_load_conversations"));
     } finally {
       o(!1);
     }
-  }, p = (y) => y.participants.find((C) => C.id !== c.id), E = (y) => {
+  }, p = (y) => y.participants.find((C) => C.id !== c.id), D = (y) => {
     const C = p(y);
     return (C == null ? void 0 : C.name) || w("unknown_user");
-  }, P = (y) => {
+  }, O = (y) => {
     var C;
     return ((C = y.lastMessage) == null ? void 0 : C.content) || w("no_messages_yet");
-  }, Ce = (y) => {
-    const C = new Date(y), G = ((/* @__PURE__ */ new Date()).getTime() - C.getTime()) / (1e3 * 60 * 60), B = G / 24;
-    return G < 24 ? C.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : B < 7 ? `${Math.floor(B)}d ago` : `${C.getDate()} ${["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][C.getMonth()]}`;
-  }, ge = r.trim() ? a.filter((y) => {
-    var J, D;
-    const C = r.toLowerCase().trim(), O = E(y).toLowerCase(), G = ((D = (J = y.productContext) == null ? void 0 : J.productName) == null ? void 0 : D.toLowerCase()) || "", B = P(y).toLowerCase();
-    return O.includes(C) || G.includes(C) || B.includes(C);
+  }, Le = (y) => {
+    const C = new Date(y), H = ((/* @__PURE__ */ new Date()).getTime() - C.getTime()) / (1e3 * 60 * 60), B = H / 24;
+    return H < 24 ? C.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) : B < 7 ? `${Math.floor(B)}d ago` : `${C.getDate()} ${["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"][C.getMonth()]}`;
+  }, he = r.trim() ? a.filter((y) => {
+    var J, E;
+    const C = r.toLowerCase().trim(), j = D(y).toLowerCase(), H = ((E = (J = y.productContext) == null ? void 0 : J.productName) == null ? void 0 : E.toLowerCase()) || "", B = O(y).toLowerCase();
+    return j.includes(C) || H.includes(C) || B.includes(C);
   }) : a;
   return n ? /* @__PURE__ */ u("div", { className: "conversation-list loading", children: /* @__PURE__ */ u("div", { className: "loading-spinner", children: w("loading_conversations") }) }) : /* @__PURE__ */ M("div", { className: "conversation-list", children: [
     /* @__PURE__ */ u("div", { className: "conversation-list-header", children: /* @__PURE__ */ u("h3", { children: w("conversations_title") }) }),
@@ -3683,11 +3707,11 @@ const Xt = ({ conversation: c, currentUser: e, onClose: t, onBack: a }) => {
         }
       )
     ] }) }),
-    /* @__PURE__ */ u("div", { className: "conversations", children: ge.length === 0 ? /* @__PURE__ */ M("div", { className: "empty-conversations", children: [
+    /* @__PURE__ */ u("div", { className: "conversations", children: he.length === 0 ? /* @__PURE__ */ M("div", { className: "empty-conversations", children: [
       /* @__PURE__ */ u("p", { children: r ? w("no_search_results") || "No results found" : w("no_conversations_title") }),
       !r && /* @__PURE__ */ u("p", { children: w("no_conversations_message") })
-    ] }) : ge.map((y) => {
-      var O;
+    ] }) : he.map((y) => {
+      var j;
       const C = t === y.id;
       return /* @__PURE__ */ M(
         "div",
@@ -3695,21 +3719,21 @@ const Xt = ({ conversation: c, currentUser: e, onClose: t, onBack: a }) => {
           className: `conversation-item ${C ? "selected" : ""} ${y.unreadCount > 0 ? "has-unread" : ""}`,
           onClick: () => h(y),
           children: [
-            /* @__PURE__ */ u("div", { className: "conversation-avatar", children: (O = y.productContext) != null && O.productImage ? /* @__PURE__ */ u(
+            /* @__PURE__ */ u("div", { className: "conversation-avatar", children: (j = y.productContext) != null && j.productImage ? /* @__PURE__ */ u(
               "img",
               {
                 src: y.productContext.productImage,
                 alt: y.productContext.productName,
                 className: "product-image"
               }
-            ) : /* @__PURE__ */ u("div", { className: "avatar-placeholder", children: E(y).charAt(0).toUpperCase() }) }),
+            ) : /* @__PURE__ */ u("div", { className: "avatar-placeholder", children: D(y).charAt(0).toUpperCase() }) }),
             /* @__PURE__ */ M("div", { className: "conversation-content", children: [
               /* @__PURE__ */ M("div", { className: "conversation-header", children: [
-                /* @__PURE__ */ u("div", { className: "conversation-title-wrapper", children: /* @__PURE__ */ u("h4", { className: "conversation-participant-name", children: E(y) }) }),
-                y.lastMessage && /* @__PURE__ */ u("span", { className: "conversation-time", children: Ce(y.lastMessage.timestamp) })
+                /* @__PURE__ */ u("div", { className: "conversation-title-wrapper", children: /* @__PURE__ */ u("h4", { className: "conversation-participant-name", children: D(y) }) }),
+                y.lastMessage && /* @__PURE__ */ u("span", { className: "conversation-time", children: Le(y.lastMessage.timestamp) })
               ] }),
               /* @__PURE__ */ M("div", { className: "conversation-details", children: [
-                /* @__PURE__ */ u("p", { className: "conversation-last-message", children: P(y) }),
+                /* @__PURE__ */ u("p", { className: "conversation-last-message", children: O(y) }),
                 y.unreadCount > 0 && /* @__PURE__ */ u("span", { className: "unread-badge", children: y.unreadCount })
               ] })
             ] })
@@ -3719,18 +3743,23 @@ const Xt = ({ conversation: c, currentUser: e, onClose: t, onBack: a }) => {
       );
     }) })
   ] });
-}, Vt = () => {
-  const [c, e] = T(() => typeof window < "u" && localStorage.getItem("chatSDK-theme") || "auto"), [t, a] = T(() => typeof window < "u" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"), s = c === "auto" ? t : c;
-  Y(() => {
+}, la = (c) => {
+  const e = ne(null);
+  return P(() => {
+    Be(), we();
+  }, []), /* @__PURE__ */ u("div", { ref: e, className: "chatsdk-root", children: /* @__PURE__ */ u(Qt, { ...c }) });
+}, Zt = () => {
+  const [c, e] = N(() => typeof window < "u" && localStorage.getItem("chatSDK-theme") || "auto"), [t, a] = N(() => typeof window < "u" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"), s = c === "auto" ? t : c;
+  P(() => {
     if (typeof window > "u" || !window.matchMedia) return;
     const r = window.matchMedia("(prefers-color-scheme: dark)"), i = (l) => {
       a(l.matches ? "dark" : "light");
     };
     return r.addEventListener("change", i), () => r.removeEventListener("change", i);
-  }, []), Y(() => {
-    if (typeof window > "u") return;
-    const r = document.documentElement;
-    r.classList.remove("theme-light", "theme-dark"), r.removeAttribute("data-theme"), r.classList.add(`theme-${s}`), r.setAttribute("data-theme", s);
+  }, []), P(() => {
+    typeof window > "u" || Se((r) => {
+      r.classList.remove("theme-light", "theme-dark"), r.removeAttribute("data-theme"), r.classList.add(`theme-${s}`), r.setAttribute("data-theme", s);
+    });
   }, [s]);
   const n = (r) => {
     e(r), typeof window < "u" && localStorage.setItem("chatSDK-theme", r);
@@ -3743,19 +3772,19 @@ const Xt = ({ conversation: c, currentUser: e, onClose: t, onBack: a }) => {
       n(c === "auto" ? t === "light" ? "dark" : "light" : s === "light" ? "dark" : "light");
     }
   };
-}, Ke = Ze(void 0), ta = ({ children: c }) => {
-  const e = Vt();
-  return /* @__PURE__ */ u(Ke.Provider, { value: e, children: c });
-}, Gt = () => {
-  const c = Xe(Ke);
+}, $e = at(void 0), da = ({ children: c }) => {
+  const e = Zt();
+  return /* @__PURE__ */ u($e.Provider, { value: e, children: c });
+}, Xt = () => {
+  const c = st($e);
   if (!c)
     throw new Error("useThemeContext must be used within a ThemeProvider");
   return c;
-}, aa = ({
+}, ga = ({
   className: c = "",
   showLabel: e = !1
 }) => {
-  const { theme: t, actualTheme: a, setTheme: s } = Gt(), n = () => {
+  const { theme: t, actualTheme: a, setTheme: s } = Xt(), n = () => {
     switch (t) {
       case "light":
         return /* @__PURE__ */ u("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ u("path", { d: "M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z" }) });
@@ -3810,11 +3839,13 @@ const Xt = ({ conversation: c, currentUser: e, onClose: t, onBack: a }) => {
       ]
     }
   );
-}, sa = () => {
+}, ha = () => {
   var s;
   const c = localStorage.getItem("chatSDK-theme"), e = (s = window.matchMedia) == null ? void 0 : s.call(window, "(prefers-color-scheme: dark)").matches, t = c || "auto", a = t === "auto" ? e ? "dark" : "light" : t;
-  document.documentElement.classList.add(`theme-${a}`), document.documentElement.setAttribute("data-theme", a);
-}, na = {
+  Se((n) => {
+    n.classList.add(`theme-${a}`), n.setAttribute("data-theme", a);
+  });
+}, ua = {
   // Material Design 3 Primary Colors
   primary: {
     main: "#2196F3",
@@ -3898,7 +3929,7 @@ const Xt = ({ conversation: c, currentUser: e, onClose: t, onBack: a }) => {
     black: "#000000",
     transparent: "transparent"
   }
-}, ra = {
+}, ma = {
   primary: {
     main: "#90CAF9",
     onPrimary: "#0D47A1",
@@ -3946,9 +3977,9 @@ const Xt = ({ conversation: c, currentUser: e, onClose: t, onBack: a }) => {
     timestamp: "#BDBDBD",
     primaryText: "#FFFFFF"
   }
-}, oa = {
+}, fa = {
   async init(c) {
-    const { ChatSDK: e } = await Promise.resolve().then(() => ct);
+    const { ChatSDK: e } = await Promise.resolve().then(() => ht);
     return e.getInstance().init(c);
   },
   formatFileSize(c) {
@@ -3962,28 +3993,32 @@ const Xt = ({ conversation: c, currentUser: e, onClose: t, onBack: a }) => {
   }
 };
 export {
-  et as AuthManager,
+  nt as AuthManager,
   R as ChatSDK,
-  oa as ChatSDKHelpers,
-  Xt as ChatWindow,
-  ea as ConversationList,
-  st as ConversationManager,
-  ot as EventManager,
-  rt as MediaManager,
-  nt as MessageManager,
-  Ue as ParseUtils,
-  it as SocketManager,
-  ta as ThemeProvider,
-  aa as ThemeToggle,
-  at as UserManager,
-  Ie as changeLanguage,
-  ra as darkThemeConfig,
-  Zt as getCurrentLanguage,
-  sa as initializeTheme,
-  qt as isRTL,
+  fa as ChatSDKHelpers,
+  ca as ChatWindow,
+  la as ConversationList,
+  it as ConversationManager,
+  dt as EventManager,
+  lt as MediaManager,
+  ct as MessageManager,
+  Ae as ParseUtils,
+  gt as SocketManager,
+  da as ThemeProvider,
+  ga as ThemeToggle,
+  ot as UserManager,
+  we as applyLanguageToDOM,
+  oa as changeLanguage,
+  ma as darkThemeConfig,
+  ia as getCurrentLanguage,
+  ra as getSDKRoot,
+  Be as initializeI18n,
+  ha as initializeTheme,
+  Yt as isRTL,
+  na as setSDKRoot,
   w as t,
-  na as themeConfig,
-  Vt as useTheme,
-  Gt as useThemeContext
+  ua as themeConfig,
+  Zt as useTheme,
+  Xt as useThemeContext
 };
 //# sourceMappingURL=chatsdk-react.mjs.map