@lilaquadrat/chat 0.1.2 → 0.1.4

package/dist/wc/lilaquadrat-studio-chat.js

@@ -14561,7 +14561,8 @@ const categoryColors = {
   plugins: "background-color: #3f2d56; color: #FFF",
   startup: "background-color: #5A8C99; color: #FFF",
   auth: "background-color: #5A8C99; color: #FFF",
-  websocket: "background-color: #5A8C99; color: #FFF"
+  websocket: "background-color: #5A8C99; color: #FFF",
+  session: "background-color: #7a5a99; color: #FFF"
   // Add other predefined categories and colors as needed
 };
 const logger = new Proxy({}, {
@@ -14841,6 +14842,16 @@ const useUserStore = /* @__PURE__ */ defineStore("user", () => {
 });
 const useMainStore = /* @__PURE__ */ defineStore("main", () => {
   const leftTarget = /* @__PURE__ */ ref("conversations");
+  watch(leftTarget, (value) => {
+    try {
+      if (value) {
+        localStorage.setItem("studio-chat:left-target", value);
+      } else {
+        localStorage.removeItem("studio-chat:left-target");
+      }
+    } catch {
+    }
+  });
   const mainTarget = /* @__PURE__ */ ref("chat");
   const state = /* @__PURE__ */ ref("disconnected");
   const fullscreen = /* @__PURE__ */ ref(false);
@@ -14998,6 +15009,17 @@ const useUsersCacheStore = /* @__PURE__ */ defineStore("usersCache", () => {
 const useConversationsStore = /* @__PURE__ */ defineStore("conversations", () => {
   const conversations = /* @__PURE__ */ ref([]);
   const activeConversation = /* @__PURE__ */ ref();
+  watch(activeConversation, (conversation) => {
+    try {
+      const id = conversation?._id ?? conversation?.id;
+      if (id) {
+        localStorage.setItem("studio-chat:active-conversation", id);
+      } else {
+        localStorage.removeItem("studio-chat:active-conversation");
+      }
+    } catch {
+    }
+  });
   const unreadConversations = computed(
     () => conversations.value.filter((conversation) => conversation.unread)
   );
@@ -15066,16 +15088,35 @@ const useConversationsStore = /* @__PURE__ */ defineStore("conversations", () =>
     const response = await sdk.conversations.list();
     const newConversations = response.data || [];
     newConversations.forEach((newConv) => {
-      const exists = conversations.value.some(
+      const existing = conversations.value.find(
         (existingConv) => existingConv._id === newConv._id || existingConv.id === newConv.id && newConv.id
       );
-      if (!exists) {
+      if (existing) {
+        existing.unreadCount = newConv.unreadCount;
+        existing.unread = newConv.unread;
+        existing.lastMessage = newConv.lastMessage;
+        existing.messagesCount = newConv.messagesCount;
+        existing.participant = { ...existing.participant, ...newConv.participant };
+      } else {
         conversations.value.push(newConv);
       }
       useUsersCacheStore().ingest(newConv.participants);
     });
     updateAllUnread();
   }
+  function refreshConversations() {
+    StudioSDK.flushCache("conversations", "list");
+    StudioSDK.flushCache("messages", "list");
+    return getAllConversations();
+  }
+  async function handleReconnect() {
+    await refreshConversations();
+    const active = activeConversation.value;
+    if (active && !active.isNew && active._id) {
+      const messages = await getMessagesFromApi(active._id);
+      addMessagesToConversation(messages, active._id);
+    }
+  }
   async function getMessagesFromApi(conversation, beforeId) {
     const sdk = new StudioSDK("chat", sdkOptions2());
     const response = await sdk.messages.list(conversation, beforeId);
@@ -15291,6 +15332,8 @@ const useConversationsStore = /* @__PURE__ */ defineStore("conversations", () =>
   }
   return {
     getAllConversations,
+    refreshConversations,
+    handleReconnect,
     conversations,
     unreadConversations,
     totalUnreadCount,
@@ -15333,21 +15376,22 @@ const useConversationsStore = /* @__PURE__ */ defineStore("conversations", () =>
   };
 });
 const _hoisted_1$e = { class: "conversations-module" };
-const _hoisted_2$a = ["onClick"];
+const _hoisted_2$b = ["onClick"];
 const _hoisted_3$6 = { class: "time" };
-const _hoisted_4$3 = {
-  key: 3,
+const _hoisted_4$3 = { class: "message-unread-container" };
+const _hoisted_5$3 = {
+  key: 0,
   class: "lastMessage"
 };
-const _hoisted_5$3 = {
-  key: 4,
+const _hoisted_6$2 = {
+  key: 1,
   class: "unread"
 };
-const _hoisted_6$2 = {
-  key: 5,
+const _hoisted_7$2 = {
+  key: 3,
   class: "draft"
 };
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "conversations.module",
   setup(__props) {
     const conversationsStore = useConversationsStore();
@@ -15355,14 +15399,13 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     const userStore = useUserStore();
     watch(() => userStore.user, (user) => {
       if (!user) return;
+      console.log("set user");
       conversationsStore.cleanConversations();
       conversationsStore.getAllConversations();
     }, { immediate: true });
     const conversations = computed(() => {
       const safeConversations = hardCopy(conversationsStore.conversations);
-      return safeConversations.sort((a, b) => {
-        return dayjs(a.lastMessage?.history.created).isBefore(dayjs(b.lastMessage?.history.created)) ? 1 : -1;
-      }).map((conversation) => ({
+      return safeConversations.sort((a, b) => dayjs(a.lastMessage?.history.created).isBefore(dayjs(b.lastMessage?.history.created)) ? 1 : -1).map((conversation) => ({
         ...conversation,
         isActive: activeConversation.value?._id === conversation._id && conversation._id || activeConversation.value?.id === conversation.id && conversation.id
       }));
@@ -15401,16 +15444,18 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
               "remove-user": ""
             }, null, 8, ["participants"])),
             createBaseVNode("span", _hoisted_3$6, toDisplayString$1(unref(dayjs)(conversation.lastMessage?.history.created).fromNow()), 1),
-            conversation.lastMessage ? (openBlock(), createElementBlock("p", _hoisted_4$3, toDisplayString$1(conversation.lastMessage.message), 1)) : createCommentVNode("", true),
-            conversation.unread ? (openBlock(), createElementBlock("span", _hoisted_5$3, toDisplayString$1(conversation.unreadCount), 1)) : createCommentVNode("", true),
-            conversation.isNew ? (openBlock(), createElementBlock("span", _hoisted_6$2, "draft")) : createCommentVNode("", true)
-          ], 10, _hoisted_2$a);
+            createBaseVNode("section", _hoisted_4$3, [
+              conversation.lastMessage ? (openBlock(), createElementBlock("p", _hoisted_5$3, toDisplayString$1(conversation.lastMessage.message), 1)) : createCommentVNode("", true),
+              conversation.unread ? (openBlock(), createElementBlock("span", _hoisted_6$2, toDisplayString$1(conversation.unreadCount), 1)) : createCommentVNode("", true)
+            ]),
+            conversation.isNew ? (openBlock(), createElementBlock("span", _hoisted_7$2, "draft")) : createCommentVNode("", true)
+          ], 10, _hoisted_2$b);
         }), 128))
       ]);
     };
   }
 });
-const _style_0$f = ".conversations-module[data-v-31a1e26e]{display:grid;grid-auto-rows:max-content}.conversations-module .single-conversation[data-v-31a1e26e]{padding:20px;gap:5px;cursor:pointer;display:grid;grid-template-columns:1fr 1fr}.conversations-module .single-conversation .time[data-v-31a1e26e]{justify-self:end}.conversations-module .single-conversation .lastMessage[data-v-31a1e26e]{grid-column:1 / 3;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.conversations-module .single-conversation[data-v-31a1e26e]:hover{background-color:var(--scm-color-surface)}.conversations-module .single-conversation.active[data-v-31a1e26e]{background-color:color-mix(in srgb,var(--scm-color-surface) 85%,var(--scm-color-muted))}.conversations-module .single-conversation.support[data-v-31a1e26e]{font-weight:600;border-left:3px solid var(--scm-color-primary)}";
+const _style_0$g = ".conversations-module[data-v-c7853fe0]{display:grid;grid-auto-rows:max-content}.conversations-module .single-conversation[data-v-c7853fe0]{padding:20px;gap:5px;cursor:pointer;display:grid;grid-template-columns:1fr 1fr}.conversations-module .single-conversation .time[data-v-c7853fe0]{justify-self:end}.conversations-module .single-conversation .message-unread-container[data-v-c7853fe0]{display:grid;grid-column:1 / 3;grid-template-columns:5fr 1fr}.conversations-module .single-conversation .message-unread-container .lastMessage[data-v-c7853fe0]{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.conversations-module .single-conversation .message-unread-container .unread[data-v-c7853fe0]{align-self:center;justify-self:end;padding:0 4px;border-radius:8px;background-color:var(--scm-color-own);color:#fff;font-size:.8rem}.conversations-module .single-conversation[data-v-c7853fe0]:hover{background-color:var(--scm-color-surface)}.conversations-module .single-conversation.active[data-v-c7853fe0]{background-color:color-mix(in srgb,var(--scm-color-surface) 85%,var(--scm-color-muted))}.conversations-module .single-conversation.support[data-v-c7853fe0]{font-weight:600;border-left:3px solid var(--scm-color-primary)}";
 const _export_sfc = (sfc, props) => {
   const target = sfc.__vccOpts || sfc;
   for (const [key, val] of props) {
@@ -15418,8 +15463,8 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const ConversationsModule = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["styles", [_style_0$f]], ["__scopeId", "data-v-31a1e26e"]]);
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const ConversationsModule = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["styles", [_style_0$g]], ["__scopeId", "data-v-c7853fe0"]]);
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "chats.module",
   setup(__props) {
     const conversationsStore = useConversationsStore();
@@ -15437,11 +15482,13 @@ class WebSocketManager {
   retryCount = 0;
   retryDelay = 1e3;
   retryTimeoutId = null;
+  connectTimeoutId = null;
   // Number of active consumers (components/composables) holding the socket
   refCount = 0;
   onConnectionChange;
   heartbeatIntervalId = null;
   lastActivity = 0;
+  recoveryListenersInstalled = false;
   constructor() {
   }
   static getInstance() {
@@ -15472,12 +15519,9 @@ class WebSocketManager {
       url,
       maxRetries = 50,
       maxRetryDelay = 3e4,
-      onMessage,
-      onOpen,
-      onClose,
-      onError,
       heartbeatIntervalMs = 3e4,
       inactivityTimeoutMs = 6e4,
+      connectTimeoutMs = 1e4,
       buildPingMessage
     } = options;
     this.currentOptions = {
@@ -15486,8 +15530,10 @@ class WebSocketManager {
       maxRetryDelay,
       heartbeatIntervalMs,
       inactivityTimeoutMs,
+      connectTimeoutMs,
       buildPingMessage
     };
+    this.installRecoveryListeners();
     if (this.socket && (this.socket.readyState === WebSocket.OPEN || this.socket.readyState === WebSocket.CONNECTING)) {
       logger.websocket("WS already connecting/open; reusing existing socket");
       return;
@@ -15496,33 +15542,76 @@ class WebSocketManager {
       clearTimeout(this.retryTimeoutId);
       this.retryTimeoutId = null;
     }
+    if (this.socket) this.detachHandlers(this.socket);
     const ws = new WebSocket(url);
     this.socket = ws;
+    this.clearConnectTimeout();
+    this.connectTimeoutId = setTimeout(() => {
+      if (ws.readyState === WebSocket.CONNECTING) {
+        logger.websocket("connect timeout: handshake not completed, aborting socket");
+        try {
+          ws.close();
+        } catch {
+        }
+      }
+    }, connectTimeoutMs);
     ws.onopen = () => {
+      this.clearConnectTimeout();
       this.retryCount = 0;
       this.lastActivity = Date.now();
       logger.websocket(`connected (readyState ${ws.readyState})`);
       this.onConnectionChange?.(true);
-      onOpen?.();
+      this.currentOptions?.onOpen?.();
       this.startHeartbeat();
     };
     ws.onmessage = (event) => {
       this.lastActivity = Date.now();
-      onMessage?.(event.data);
+      this.currentOptions?.onMessage?.(event.data);
     };
     ws.onerror = (error) => {
       console.error("WebSocket error:", error);
-      onError?.(error);
+      this.currentOptions?.onError?.(error);
     };
     ws.onclose = (ev) => {
+      this.clearConnectTimeout();
       this.stopHeartbeat();
       const everOpened = ev.code !== 1006 || ws.readyState === WebSocket.CLOSED;
       logger.websocket(`disconnected (code ${ev.code}, clean ${ev.wasClean}, everOpened ${everOpened})`);
       this.onConnectionChange?.(false);
-      onClose?.(ev);
+      this.currentOptions?.onClose?.(ev);
       if (this.refCount > 0) this.attemptReconnect();
     };
   }
+  detachHandlers(ws) {
+    ws.onopen = null;
+    ws.onmessage = null;
+    ws.onerror = null;
+    ws.onclose = null;
+  }
+  clearConnectTimeout() {
+    if (this.connectTimeoutId) {
+      clearTimeout(this.connectTimeoutId);
+      this.connectTimeoutId = null;
+    }
+  }
+  /**
+   * after wake/offline the retry chain may be exhausted or dead — coming back online or
+   * refocusing the tab is the moment to start over with a fresh socket
+   */
+  installRecoveryListeners() {
+    if (this.recoveryListenersInstalled || typeof window === "undefined") return;
+    this.recoveryListenersInstalled = true;
+    window.addEventListener("online", () => this.recover("online"));
+    document.addEventListener("visibilitychange", () => {
+      if (document.visibilityState === "visible") this.recover("visible");
+    });
+  }
+  recover(reason) {
+    if (this.refCount === 0 || !this.currentOptions) return;
+    if (this.socket && (this.socket.readyState === WebSocket.OPEN || this.socket.readyState === WebSocket.CONNECTING)) return;
+    logger.websocket(`recovery (${reason}): socket not open, reconnecting`);
+    this.reconnect();
+  }
   startHeartbeat() {
     this.stopHeartbeat();
     const heartbeatIntervalMs = this.currentOptions?.heartbeatIntervalMs ?? 3e4;
@@ -15602,15 +15691,18 @@ class WebSocketManager {
   }
   _teardownSocket(reason) {
     this.stopHeartbeat();
+    this.clearConnectTimeout();
     if (this.retryTimeoutId) {
       clearTimeout(this.retryTimeoutId);
       this.retryTimeoutId = null;
     }
     const ws = this.socket;
     this.socket = null;
-    if (ws && ws.readyState === WebSocket.OPEN) {
+    if (!ws) return;
+    this.detachHandlers(ws);
+    if (ws.readyState === WebSocket.OPEN) {
       ws.close(1e3, reason);
-    } else if (ws && ws.readyState === WebSocket.CONNECTING) {
+    } else if (ws.readyState === WebSocket.CONNECTING) {
       try {
         ws.close();
       } catch {
@@ -15621,7 +15713,6 @@ class WebSocketManager {
     if (this.socket && this.isConnected) {
       try {
         this.socket.send(JSON.stringify(message));
-        this.lastActivity = Date.now();
         return true;
       } catch {
         return false;
@@ -15630,32 +15721,323 @@ class WebSocketManager {
     return false;
   }
 }
+let getTokenImpl = null;
+function setGetToken(fn) {
+  getTokenImpl = fn;
+}
+async function resolveToken() {
+  if (!getTokenImpl) return void 0;
+  return await getTokenImpl();
+}
+const PROBE_TYPE = "session:probe";
+const PROBE_INTERVAL_MS = 45e3;
+const REAUTH_MIN_INTERVAL_MS = 2e3;
+const REAUTH_MAX_ATTEMPTS = 3;
+const REAUTH_BACKOFF_MS = 2e3;
+const QUEUE_MAX = 100;
+const PENDING_MAX = 50;
+const PENDING_MAX_AGE_MS = 5 * 60 * 1e3;
+function textMatches(sent, echoed) {
+  if (typeof sent !== "string" || typeof echoed !== "string") return false;
+  return sent === echoed || sent.slice(0, 1e4) === echoed;
+}
+class ChatSession {
+  transport;
+  options = null;
+  state = "disconnected";
+  everReady = false;
+  lostSinceReady = false;
+  reauthAttempts = 0;
+  lastAuthSentAt = 0;
+  reauthTimerId = null;
+  /** backlog waiting for the session to become ready */
+  queue = [];
+  /** sent but not yet confirmed by a server echo */
+  pending = [];
+  probeIntervalId = null;
+  constructor(transport) {
+    this.transport = transport;
+  }
+  get sessionState() {
+    return this.state;
+  }
+  start(options) {
+    this.options = options;
+    this.installProbe();
+    this.setState("connecting");
+    this.transport.connect({
+      url: options.url,
+      maxRetries: Infinity,
+      // chat is the product — never stop trying
+      maxRetryDelay: 3e4,
+      onOpen: () => this.handleOpen(),
+      onMessage: (raw) => this.handleFrame(raw),
+      onClose: () => this.handleClose()
+    });
+    if (this.transport.isConnected && this.state === "connecting") this.handleOpen();
+  }
+  /**
+   * Send a frame through the session. Returns false only for unqueued frames that could
+   * not be sent right now; queued frames always succeed eventually or expire.
+   */
+  send(payload, sendOptions = {}) {
+    const entry = { payload, ...sendOptions };
+    if (this.state === "ready" && this.transport.isConnected) return this.dispatch(entry);
+    if (!entry.queue) return false;
+    this.enqueue(entry);
+    return true;
+  }
+  /** teardown (tests / HMR) — the socket itself is refcounted by the transport */
+  destroy() {
+    this.clearReauthTimer();
+    if (this.probeIntervalId) {
+      clearInterval(this.probeIntervalId);
+      this.probeIntervalId = null;
+    }
+    if (typeof window !== "undefined") {
+      window.removeEventListener("online", this.probeNow);
+      document.removeEventListener("visibilitychange", this.onVisibilityChange);
+    }
+    this.queue = [];
+    this.pending = [];
+    this.setState("disconnected");
+  }
+  handleOpen() {
+    this.clearReauthTimer();
+    this.reauthAttempts = 0;
+    this.setState("authenticating");
+    this.authenticate();
+  }
+  handleClose() {
+    this.clearReauthTimer();
+    if (this.everReady) this.lostSinceReady = true;
+    this.setState("connecting");
+  }
+  async authenticate() {
+    this.lastAuthSentAt = Date.now();
+    let token;
+    try {
+      token = await resolveToken();
+    } catch (error) {
+      logger.session(`token resolution failed: ${error instanceof Error ? error.message : error}`);
+    }
+    token ??= this.options?.fallbackToken?.();
+    if (!token) {
+      logger.session("no auth token available; retrying");
+      this.scheduleReauth(REAUTH_BACKOFF_MS);
+      return;
+    }
+    if (!this.transport.send({ type: "authenticate", token })) return;
+    this.setReady();
+  }
+  setReady() {
+    const restored = this.everReady && this.lostSinceReady;
+    this.everReady = true;
+    this.lostSinceReady = false;
+    this.setState("ready");
+    if (restored) {
+      this.requeuePending();
+      this.options?.onSessionRestored?.();
+    }
+    this.flushQueue();
+  }
+  setState(next) {
+    if (this.state === next) return;
+    this.state = next;
+    logger.session(`state → ${next}`);
+    this.options?.onStateChange?.(next);
+  }
+  handleFrame(raw) {
+    let frame;
+    try {
+      frame = JSON.parse(raw);
+    } catch {
+      logger.session("unparseable frame received; ignored");
+      return;
+    }
+    if (!frame || typeof frame.type !== "string") return;
+    if (frame.type === "pong" || frame.type === "welcome") return;
+    if (frame.type === "authenticated") {
+      this.reauthAttempts = 0;
+      if (this.state !== "ready") this.setReady();
+      return;
+    }
+    if (frame.type === "session:alive") {
+      this.reauthAttempts = 0;
+      return;
+    }
+    if (frame.type === "error") {
+      this.handleError(frame);
+      return;
+    }
+    this.reauthAttempts = 0;
+    this.confirmEcho(frame);
+    try {
+      this.options?.onMessage?.(frame);
+    } catch (error) {
+      logger.session(`message handler failed: ${error instanceof Error ? error.message : error}`);
+    }
+  }
+  handleError(frame) {
+    const error = String(frame.error ?? "");
+    const messageType = typeof frame.messageType === "string" ? frame.messageType : void 0;
+    if (error === "UNKNOWN_CLIENT") {
+      this.handleSessionLost(messageType ?? "unknown");
+      return;
+    }
+    if (error === "AUTH_FAILED") {
+      this.handleAuthFailed();
+      return;
+    }
+    if (messageType === PROBE_TYPE) {
+      this.reauthAttempts = 0;
+      return;
+    }
+    if (messageType) this.settleRejected(messageType);
+    logger.session(`server error ${error}${messageType ? ` (${messageType})` : ""}`);
+    this.options?.onMessage?.(frame);
+  }
+  handleSessionLost(context) {
+    this.lostSinceReady = true;
+    if (this.state === "ready") this.setState("authenticating");
+    if (this.state !== "authenticating") return;
+    if (this.reauthAttempts >= REAUTH_MAX_ATTEMPTS) {
+      logger.session("re-authentication keeps failing; forcing reconnect");
+      this.hardReconnect();
+      return;
+    }
+    logger.session(`session lost (${context}); re-authenticating`);
+    this.reauthAttempts++;
+    const wait = REAUTH_MIN_INTERVAL_MS - (Date.now() - this.lastAuthSentAt);
+    if (wait > 0) this.scheduleReauth(wait);
+    else this.authenticate();
+  }
+  handleAuthFailed() {
+    this.lostSinceReady = true;
+    if (this.state === "ready") this.setState("authenticating");
+    this.reauthAttempts++;
+    if (this.reauthAttempts > REAUTH_MAX_ATTEMPTS) {
+      logger.session("authentication failing repeatedly; forcing reconnect");
+      this.hardReconnect();
+      return;
+    }
+    logger.session(`authentication failed (attempt ${this.reauthAttempts}); retrying with a fresh token`);
+    this.scheduleReauth(REAUTH_BACKOFF_MS * this.reauthAttempts);
+  }
+  hardReconnect() {
+    this.clearReauthTimer();
+    this.reauthAttempts = 0;
+    this.setState("connecting");
+    this.transport.reconnect();
+  }
+  scheduleReauth(delayMs) {
+    if (this.reauthTimerId) return;
+    this.reauthTimerId = setTimeout(() => {
+      this.reauthTimerId = null;
+      if (this.state === "authenticating" && this.transport.isConnected) this.authenticate();
+    }, delayMs);
+  }
+  clearReauthTimer() {
+    if (this.reauthTimerId) {
+      clearTimeout(this.reauthTimerId);
+      this.reauthTimerId = null;
+    }
+  }
+  /** server echoes settle tracked sends: own message echo / conversation:new with our client id */
+  confirmEcho(frame) {
+    if (frame.type === "message") {
+      const ownUser = this.options?.ownUserId?.();
+      if (!ownUser || frame.user !== ownUser) return;
+      const index = this.pending.findIndex((entry) => entry.payload.type === "message:add" && entry.payload.conversation === frame.conversation && textMatches(entry.payload.message, frame.message));
+      if (index !== -1) this.pending.splice(index, 1);
+      return;
+    }
+    if (frame.type === "conversation:new" && frame.id) {
+      const index = this.pending.findIndex((entry) => entry.payload.type === "conversation:start" && entry.payload.id === frame.id);
+      if (index !== -1) this.pending.splice(index, 1);
+    }
+  }
+  settleRejected(messageType) {
+    const index = this.pending.findIndex((entry) => entry.payload.type === messageType);
+    if (index !== -1) this.pending.splice(index, 1);
+  }
+  dispatch(entry) {
+    if (!this.transport.send(entry.payload)) {
+      if (entry.queue) this.queue.unshift(entry);
+      return false;
+    }
+    if (entry.track) {
+      this.pending.push({ ...entry, sentAt: Date.now() });
+      if (this.pending.length > PENDING_MAX) this.pending.splice(0, this.pending.length - PENDING_MAX);
+    }
+    return true;
+  }
+  enqueue(entry) {
+    if (entry.replaceKey) this.queue = this.queue.filter((queued) => queued.replaceKey !== entry.replaceKey);
+    this.queue.push(entry);
+    if (this.queue.length > QUEUE_MAX) {
+      this.queue.splice(0, this.queue.length - QUEUE_MAX);
+      logger.session("outbound queue overflow; oldest entries dropped");
+    }
+  }
+  /** unconfirmed sends from before the loss go to the front of the backlog for resend */
+  requeuePending() {
+    if (!this.pending.length) return;
+    const now = Date.now();
+    const fresh = this.pending.filter((entry) => now - (entry.sentAt ?? now) < PENDING_MAX_AGE_MS);
+    const dropped = this.pending.length - fresh.length;
+    if (dropped) logger.session(`${dropped} unconfirmed frame(s) too old to resend; dropped`);
+    this.pending = [];
+    this.queue = [...fresh, ...this.queue];
+  }
+  flushQueue() {
+    if (this.state !== "ready" || !this.queue.length) return;
+    const backlog = this.queue;
+    this.queue = [];
+    logger.session(`flushing ${backlog.length} queued frame(s)`);
+    for (let index = 0; index < backlog.length; index++) {
+      if (!this.dispatch(backlog[index])) {
+        this.queue.push(...backlog.slice(index + 1).filter((rest) => rest.queue));
+        return;
+      }
+    }
+  }
+  installProbe() {
+    if (this.probeIntervalId || typeof window === "undefined") return;
+    this.probeIntervalId = setInterval(() => this.probe(), PROBE_INTERVAL_MS);
+    window.addEventListener("online", this.probeNow);
+    document.addEventListener("visibilitychange", this.onVisibilityChange);
+  }
+  probeNow = () => this.probe();
+  onVisibilityChange = () => {
+    if (document.visibilityState === "visible") this.probe();
+  };
+  /**
+   * the registry entry can die without any local traffic (eviction, server cleanup) and
+   * an idle client would never notice — it just stops receiving messages. the periodic
+   * probe forces the server to reveal a dead session via UNKNOWN_CLIENT.
+   */
+  probe() {
+    if (this.state !== "ready" || !this.transport.isConnected) return;
+    if (typeof document !== "undefined" && document.visibilityState !== "visible") return;
+    this.transport.send({ type: PROBE_TYPE });
+  }
+}
+const chatSession = new ChatSession(WebSocketManager.getInstance());
 function useWebSocket() {
   const wsManager = WebSocketManager.getInstance();
-  const mainStore = useMainStore();
   wsManager.acquire();
-  wsManager.onConnectionChange = (connected) => {
-    mainStore.state = connected ? "connected" : "disconnected";
-  };
-  const connect = (options) => wsManager.connect(options);
-  const disconnect = () => wsManager.disconnect();
-  const reconnect = () => wsManager.reconnect();
-  const conversationStart = (message, participants, name, id, operationMode) => wsManager.send({ type: "conversation:start", message, participants, name, id, operationMode });
-  const conversationLastRead = (conversation, lastReadId) => wsManager.send({ type: "conversation:lastRead", conversation, lastReadId });
-  const messageAdd = (message, conversation) => wsManager.send({ type: "message:add", message, conversation });
-  const authenticate = (token) => wsManager.send({ type: "authenticate", token });
-  const conversationTyping = (conversation, typing) => wsManager.send({ type: "conversation:typing", conversation, typing });
+  const conversationStart = (message, participants, name, id, operationMode) => chatSession.send({ type: "conversation:start", message, participants, name, id, operationMode }, { queue: true, track: true });
+  const conversationLastRead = (conversation, lastReadId) => chatSession.send({ type: "conversation:lastRead", conversation, lastReadId }, { queue: true, replaceKey: `lastRead:${conversation}` });
+  const messageAdd = (message, conversation) => chatSession.send({ type: "message:add", message, conversation }, { queue: true, track: true });
+  const conversationTyping = (conversation, typing) => chatSession.send({ type: "conversation:typing", conversation, typing });
   onUnmounted(() => {
     wsManager.release();
   });
   return {
-    connect,
-    disconnect,
-    reconnect,
     conversationStart,
     conversationLastRead,
     messageAdd,
-    authenticate,
     conversationTyping
   };
 }
@@ -15729,14 +16111,6 @@ function handleMessages(message) {
 }
 function setGetUsers(fn) {
 }
-let getTokenImpl = null;
-function setGetToken(fn) {
-  getTokenImpl = fn;
-}
-async function resolveToken() {
-  if (!getTokenImpl) return void 0;
-  return await getTokenImpl();
-}
 function getName(name, type, namespace) {
   return `${name}-${type}`;
 }
@@ -16056,8 +16430,37 @@ function groupMessages(messages, user) {
   });
   return Object.values(dateGroups);
 }
+function useChatVisibility(element) {
+  const mainStore = useMainStore();
+  const elementVisible = /* @__PURE__ */ ref(false);
+  const documentVisible = /* @__PURE__ */ ref(typeof document === "undefined" || document.visibilityState === "visible");
+  const overlayed = computed(() => mainStore.viewMode === "compact" && !!mainStore.leftTarget);
+  const chatVisible = computed(() => elementVisible.value && documentVisible.value && !overlayed.value);
+  let observer;
+  function onVisibilityChange() {
+    documentVisible.value = document.visibilityState === "visible";
+  }
+  if (typeof document !== "undefined") document.addEventListener("visibilitychange", onVisibilityChange);
+  watch(element, (target) => {
+    observer?.disconnect();
+    observer = void 0;
+    if (!target || typeof IntersectionObserver === "undefined") {
+      elementVisible.value = !!target;
+      return;
+    }
+    observer = new IntersectionObserver(([entry]) => {
+      elementVisible.value = entry.isIntersecting;
+    });
+    observer.observe(target);
+  }, { immediate: true });
+  onBeforeUnmount(() => {
+    observer?.disconnect();
+    if (typeof document !== "undefined") document.removeEventListener("visibilitychange", onVisibilityChange);
+  });
+  return { chatVisible };
+}
 const _hoisted_1$d = { class: "chat-messages" };
-const _hoisted_2$9 = { class: "date-separator" };
+const _hoisted_2$a = { class: "date-separator" };
 const _hoisted_3$5 = { class: "message-content" };
 const _hoisted_4$2 = ["id"];
 const _hoisted_5$2 = {
@@ -16066,7 +16469,7 @@ const _hoisted_5$2 = {
 };
 const SCROLL_DEBOUNCE_MS = 100;
 const SCROLL_EDGE_PERCENT = 10;
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "chat.module",
   props: {
     _id: { type: String },
@@ -16093,6 +16496,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     const newChatExists = /* @__PURE__ */ ref(false);
     const existingChat = /* @__PURE__ */ ref(null);
     const mainStore = useMainStore();
+    const { chatVisible } = useChatVisibility(chatMessagesRef);
     let scrollDebounceTimer = null;
     let typingIdleTimer = null;
     let lastTypingSent = 0;
@@ -16163,12 +16567,16 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
       }
     }
     function updateLastRead() {
+      if (!chatVisible.value) return;
       if (conversation.value?.participant?.lastReadId < conversation.value?.lastMessage?.id) {
         conversationLastRead(props._id, conversation.value.lastMessage.id);
         conversationsStore.setLastReadId(props._id, conversation.value.lastMessage.id);
         conversationsStore.updateUnread(props._id);
       }
     }
+    watch(chatVisible, (visible) => {
+      if (visible) updateLastRead();
+    });
     function scrollToBottom() {
       if (chatMessagesRef.value) {
         chatMessagesRef.value.scrollTop = chatMessagesRef.value.scrollHeight;
@@ -16301,7 +16709,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                 key: dateGroup.date,
                 class: "messages-group"
               }, [
-                createBaseVNode("div", _hoisted_2$9, toDisplayString$1(dateGroup.date), 1),
+                createBaseVNode("div", _hoisted_2$a, toDisplayString$1(dateGroup.date), 1),
                 (openBlock(true), createElementBlock(Fragment, null, renderList(dateGroup.userTimeGroups, (group, index) => {
                   return openBlock(), createElementBlock("div", {
                     key: index,
@@ -16350,8 +16758,8 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _style_0$e = ".chat-module[data-v-5c5c2e96]{display:grid;height:100%;grid-template-rows:max-content 1fr max-content;overflow:hidden}.chat-module.isNew[data-v-5c5c2e96]{grid-template-rows:max-content 1fr max-content}.chat-module .notice-partial[data-v-5c5c2e96]{position:absolute;align-self:center;justify-self:center;z-index:100}.chat-module .chat-messages-scroll-container[data-v-5c5c2e96]{overflow-y:auto;position:relative;padding-bottom:50px;display:grid}.chat-module .chat-messages-scroll-container .chat-messages[data-v-5c5c2e96]{display:grid;grid-auto-rows:max-content;align-content:end}.chat-module .chat-messages-scroll-container .chat-messages .messages-group[data-v-5c5c2e96]{display:grid;gap:20px;margin:0 20px;grid-auto-rows:max-content;align-content:end}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message[data-v-5c5c2e96]{display:grid;grid-template-rows:auto auto;gap:10px;justify-self:start}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message.system[data-v-5c5c2e96]{width:100%;text-align:center;align-content:center;justify-content:center}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message.system header[data-v-5c5c2e96]{justify-content:center;grid-template-columns:1fr}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message.system header time[data-v-5c5c2e96]{text-align:center;color:var(--scm-color-muted);font-size:.75em}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message.system .message-content p[data-v-5c5c2e96]{background-color:transparent;padding:0;color:var(--scm-color-muted);font-size:.75em;white-space:pre-wrap}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message header[data-v-5c5c2e96]{display:grid;grid-template-columns:max-content max-content;gap:10px;width:100%;font-size:.875em}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message header time[data-v-5c5c2e96]{text-align:right}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message .message-content[data-v-5c5c2e96]{display:grid;gap:4px}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message .message-content p[data-v-5c5c2e96]{padding:10px;border-radius:5px;background-color:var(--scm-color-primary);color:#fff;justify-self:start;white-space:pre-wrap;font-size:1em}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message.isUser[data-v-5c5c2e96]{justify-self:end}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message.isUser p[data-v-5c5c2e96]{justify-self:end;background-color:var(--scm-color-own);color:#fff}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message.isUser header[data-v-5c5c2e96]{grid-template-columns:1fr}.chat-module .typing-indicator[data-v-5c5c2e96]{padding:4px 20px;font-size:.75em;color:var(--scm-color-muted);font-style:italic}.chat-module .date-separator[data-v-5c5c2e96]{text-align:center;padding:20px 0;font-size:.875em;font-weight:700}";
-const ChatModule = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["styles", [_style_0$e]], ["__scopeId", "data-v-5c5c2e96"]]);
+const _style_0$f = ".chat-module[data-v-6c9f82e3]{display:grid;height:100%;grid-template-rows:max-content 1fr max-content;overflow:hidden}.chat-module.isNew[data-v-6c9f82e3]{grid-template-rows:max-content 1fr max-content}.chat-module .notice-partial[data-v-6c9f82e3]{position:absolute;align-self:center;justify-self:center;z-index:100}.chat-module .chat-messages-scroll-container[data-v-6c9f82e3]{overflow-y:auto;position:relative;padding-bottom:50px;display:grid}.chat-module .chat-messages-scroll-container .chat-messages[data-v-6c9f82e3]{display:grid;grid-auto-rows:max-content;align-content:end}.chat-module .chat-messages-scroll-container .chat-messages .messages-group[data-v-6c9f82e3]{display:grid;gap:20px;margin:0 20px;grid-auto-rows:max-content;align-content:end}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message[data-v-6c9f82e3]{display:grid;grid-template-rows:auto auto;gap:10px;justify-self:start}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message.system[data-v-6c9f82e3]{width:100%;text-align:center;align-content:center;justify-content:center}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message.system header[data-v-6c9f82e3]{justify-content:center;grid-template-columns:1fr}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message.system header time[data-v-6c9f82e3]{text-align:center;color:var(--scm-color-muted);font-size:.75em}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message.system .message-content p[data-v-6c9f82e3]{background-color:transparent;padding:0;color:var(--scm-color-muted);font-size:.75em;white-space:pre-wrap}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message header[data-v-6c9f82e3]{display:grid;grid-template-columns:max-content max-content;gap:10px;width:100%;font-size:.875em}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message header time[data-v-6c9f82e3]{text-align:right}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message .message-content[data-v-6c9f82e3]{display:grid;gap:4px}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message .message-content p[data-v-6c9f82e3]{padding:10px;border-radius:5px;background-color:var(--scm-color-primary);color:#fff;justify-self:start;white-space:pre-wrap;font-size:1em}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message.isUser[data-v-6c9f82e3]{justify-self:end}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message.isUser p[data-v-6c9f82e3]{justify-self:end;background-color:var(--scm-color-own);color:#fff}.chat-module .chat-messages-scroll-container .chat-messages .messages-group .message.isUser header[data-v-6c9f82e3]{grid-template-columns:1fr}.chat-module .typing-indicator[data-v-6c9f82e3]{padding:4px 20px;font-size:.75em;color:var(--scm-color-muted);font-style:italic}.chat-module .date-separator[data-v-6c9f82e3]{text-align:center;padding:20px 0;font-size:.875em;font-weight:700}";
+const ChatModule = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["styles", [_style_0$f]], ["__scopeId", "data-v-6c9f82e3"]]);
 function sdkOptions() {
   const mainStore = useMainStore();
   return {
@@ -16380,7 +16788,7 @@ const useContactsStore = /* @__PURE__ */ defineStore("contacts", () => {
   };
 });
 const _hoisted_1$c = { class: "contacts-module" };
-const _hoisted_2$8 = {
+const _hoisted_2$9 = {
   key: 0,
   class: "controls"
 };
@@ -16396,7 +16804,7 @@ const _hoisted_8$1 = {
   key: 0,
   class: "selected-indicator"
 };
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "contacts.module",
   setup(__props) {
     const mainStore = useMainStore();
@@ -16499,7 +16907,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
       const _component_button_partial = resolveComponent("button-partial");
       const _component_user_avatar_partial = resolveComponent("user-avatar-partial");
       return openBlock(), createElementBlock("article", _hoisted_1$c, [
-        isEdit.value ? (openBlock(), createElementBlock("section", _hoisted_2$8, [
+        isEdit.value ? (openBlock(), createElementBlock("section", _hoisted_2$9, [
           createVNode(_component_button_partial, {
             variant: "primary",
             size: "sm",
@@ -16587,15 +16995,31 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _style_0$d = ".contacts-module[data-v-045be51e]{height:100%;overflow:scroll}.contacts-module .controls[data-v-045be51e]{display:grid;grid-template-columns:1fr 1fr}.contacts-module .rights-panel[data-v-045be51e]{padding:10px 20px;border-bottom:1px solid var(--scm-color-surface)}.contacts-module .rights-panel h4[data-v-045be51e]{margin-bottom:10px}.contacts-module .rights-panel .participant-rights[data-v-045be51e]{display:grid;gap:5px;padding:10px 0}.contacts-module .rights-panel .participant-rights .rights[data-v-045be51e]{display:flex;flex-wrap:wrap;gap:10px}.contacts-module .rights-panel .participant-rights .rights .right-toggle[data-v-045be51e]{cursor:pointer;font-size:.8125em}.contacts-module .rights-panel .participant-rights .who em[data-v-045be51e]{color:var(--scm-color-muted)}.contacts-module .single-contact[data-v-045be51e]{padding:20px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.contacts-module .single-contact[data-v-045be51e]:hover{background-color:var(--scm-color-surface)}.contacts-module .single-contact.selected[data-v-045be51e]{background-color:color-mix(in srgb,var(--scm-color-primary) 15%,transparent)}.contacts-module .single-contact .selected-indicator[data-v-045be51e]{color:var(--scm-color-primary);font-weight:700}";
-const ContactsModule = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["styles", [_style_0$d]], ["__scopeId", "data-v-045be51e"]]);
-const _hoisted_1$b = { class: "participants-partial" };
+const _style_0$e = ".contacts-module[data-v-045be51e]{height:100%;overflow:scroll}.contacts-module .controls[data-v-045be51e]{display:grid;grid-template-columns:1fr 1fr}.contacts-module .rights-panel[data-v-045be51e]{padding:10px 20px;border-bottom:1px solid var(--scm-color-surface)}.contacts-module .rights-panel h4[data-v-045be51e]{margin-bottom:10px}.contacts-module .rights-panel .participant-rights[data-v-045be51e]{display:grid;gap:5px;padding:10px 0}.contacts-module .rights-panel .participant-rights .rights[data-v-045be51e]{display:flex;flex-wrap:wrap;gap:10px}.contacts-module .rights-panel .participant-rights .rights .right-toggle[data-v-045be51e]{cursor:pointer;font-size:.8125em}.contacts-module .rights-panel .participant-rights .who em[data-v-045be51e]{color:var(--scm-color-muted)}.contacts-module .single-contact[data-v-045be51e]{padding:20px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.contacts-module .single-contact[data-v-045be51e]:hover{background-color:var(--scm-color-surface)}.contacts-module .single-contact.selected[data-v-045be51e]{background-color:color-mix(in srgb,var(--scm-color-primary) 15%,transparent)}.contacts-module .single-contact .selected-indicator[data-v-045be51e]{color:var(--scm-color-primary);font-weight:700}";
+const ContactsModule = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["styles", [_style_0$e]], ["__scopeId", "data-v-045be51e"]]);
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
+  __name: "user-name.partial",
+  props: {
+    userId: { type: String }
+  },
+  setup(__props) {
+    const props = __props;
+    const usersCache = useUsersCacheStore();
+    onMounted(() => {
+      usersCache.ensure([props.userId]);
+    });
+    return (_ctx, _cache) => {
+      return toDisplayString$1(unref(usersCache).name(props.userId));
+    };
+  }
+});
 const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "participants.partial",
   props: {
     participants: { type: Array },
     removeUser: { type: Boolean },
-    isNew: { type: Boolean }
+    isNew: { type: Boolean },
+    inline: { type: Boolean }
   },
   setup(__props) {
     const userStore = useUserStore();
@@ -16608,29 +17032,35 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       const _component_user_avatar_partial = resolveComponent("user-avatar-partial");
-      return openBlock(), createElementBlock("section", _hoisted_1$b, [
+      return openBlock(), createElementBlock("section", {
+        class: normalizeClass(["participants-partial", { "participants-partial--inline": __props.inline }])
+      }, [
         __props.isNew && !filteredParticipants.value.length ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           createTextVNode(toDisplayString$1(_ctx.$t("select contacts")), 1)
         ], 64)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(filteredParticipants.value, (participant, index) => {
           return openBlock(), createElementBlock(Fragment, {
             key: unref(participantId)(participant)
           }, [
-            createVNode(_component_user_avatar_partial, {
+            __props.inline ? (openBlock(), createBlock(_sfc_main$g, {
+              key: 0,
               "user-id": unref(participantId)(participant)
-            }, null, 8, ["user-id"]),
-            index < filteredParticipants.value.length - 1 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            }, null, 8, ["user-id"])) : (openBlock(), createBlock(_component_user_avatar_partial, {
+              key: 1,
+              "user-id": unref(participantId)(participant)
+            }, null, 8, ["user-id"])),
+            index < filteredParticipants.value.length - 1 ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
               createTextVNode(toDisplayString$1(", "))
             ], 64)) : createCommentVNode("", true)
           ], 64);
         }), 128))
-      ]);
+      ], 2);
     };
   }
 });
-const _style_0$c = "";
-const ParticipantsPartial = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["styles", [_style_0$c]], ["__scopeId", "data-v-f06a1cdf"]]);
-const _hoisted_1$a = { class: "actions" };
-const _hoisted_2$7 = { class: "left" };
+const _style_0$d = ".participants-partial--inline[data-v-ee2866aa]{font-size:inherit}";
+const ParticipantsPartial = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["styles", [_style_0$d]], ["__scopeId", "data-v-ee2866aa"]]);
+const _hoisted_1$b = { class: "actions" };
+const _hoisted_2$8 = { class: "left" };
 const _hoisted_3$3 = { class: "right" };
 const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "actions.partial",
@@ -16639,17 +17069,11 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     const conversationsStore = useConversationsStore();
     const userStore = useUserStore();
     const hasChat = computed(() => mainStore.hasChat);
-    const showConversationsButton = computed(
-      () => hasChat.value || conversationsStore.conversations.length > 1
-    );
     const createConversation = () => {
       const tempId = conversationsStore.createNew([userStore.user], userStore.user);
       conversationsStore.activateConversation(tempId);
-      mainStore.showNewChat();
+      mainStore.hideLeft();
     };
-    function showConversations() {
-      mainStore.showConversations();
-    }
     function close() {
       if (mainStore.leftTarget === "contacts-edit" || mainStore.leftTarget === "contacts-new") {
         mainStore.showConversations();
@@ -16658,18 +17082,13 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       mainStore.closeCallback?.();
     }
     return (_ctx, _cache) => {
+      const _component_conversations_button_partial = resolveComponent("conversations-button-partial");
       const _component_button_partial = resolveComponent("button-partial");
-      return openBlock(), createElementBlock("section", _hoisted_1$a, [
-        createBaseVNode("section", _hoisted_2$7, [
-          showConversationsButton.value ? (openBlock(), createBlock(_component_button_partial, {
-            key: 0,
-            icon: "chat",
-            variant: "secondary",
-            "aria-label": "Conversations",
-            onClick: showConversations
-          })) : createCommentVNode("", true),
+      return openBlock(), createElementBlock("section", _hoisted_1$b, [
+        createBaseVNode("section", _hoisted_2$8, [
+          createVNode(_component_conversations_button_partial),
           hasChat.value ? (openBlock(), createBlock(_component_button_partial, {
-            key: 1,
+            key: 0,
             icon: "add",
             "aria-label": "New chat",
             onClick: createConversation
@@ -16686,10 +17105,10 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _style_0$b = ".actions[data-v-b803cf6d]{display:grid;grid-template-columns:max-content 1fr max-content;width:100%;grid-column:1/3}.actions .left[data-v-b803cf6d]{grid-column:1/2;display:flex}.actions .right[data-v-b803cf6d]{grid-column:3/4}";
-const ActionsPartial = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["styles", [_style_0$b]], ["__scopeId", "data-v-b803cf6d"]]);
-const _hoisted_1$9 = { class: "background-container" };
-const _hoisted_2$6 = { key: 0 };
+const _style_0$c = ".actions[data-v-e7780b44]{display:grid;grid-template-columns:max-content 1fr max-content;width:100%;grid-column:1/3}.actions .left[data-v-e7780b44]{grid-column:1/2;display:flex}.actions .right[data-v-e7780b44]{grid-column:3/4}";
+const ActionsPartial = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["styles", [_style_0$c]], ["__scopeId", "data-v-e7780b44"]]);
+const _hoisted_1$a = { class: "background-container" };
+const _hoisted_2$7 = { key: 0 };
 const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "chat-header.partial",
   props: {
@@ -16760,7 +17179,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("header", {
         class: normalizeClass(["chat-header", { isSupport: isSupport.value }])
       }, [
-        createBaseVNode("section", _hoisted_1$9, [
+        createBaseVNode("section", _hoisted_1$a, [
           createBaseVNode("h3", null, [
             !isSupport.value ? (openBlock(), createBlock(_component_name_edit_partial, {
               key: 0,
@@ -16775,9 +17194,10 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
               createTextVNode(toDisplayString$1(_ctx.$t("support")), 1)
             ], 64)) : createCommentVNode("", true)
           ]),
-          !isSupport.value && conversationData.value ? (openBlock(), createElementBlock("h4", _hoisted_2$6, [
+          !isSupport.value && conversationData.value ? (openBlock(), createElementBlock("h4", _hoisted_2$7, [
             createVNode(_component_participants_partial, {
               participants: conversationData.value.participants,
+              inline: "",
               "remove-user": "",
               "is-new": isNew.value
             }, null, 8, ["participants", "is-new"]),
@@ -16785,13 +17205,9 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
               key: 0,
               size: "sm",
               variant: "ghost",
+              icon: "edit",
               "aria-label": "Toggle edit mode",
               onClick: _cache[0] || (_cache[0] = ($event) => toggleEdit())
-            }, {
-              default: withCtx(() => [..._cache[1] || (_cache[1] = [
-                createTextVNode(" edit ", -1)
-              ])]),
-              _: 1
             })) : createCommentVNode("", true)
           ])) : createCommentVNode("", true),
           !isSupport.value && !isNew.value ? (openBlock(), createBlock(_component_chat_actions_partial, {
@@ -16803,8 +17219,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _style_0$a = ".chat-header[data-v-beb2ed7a]{display:grid;padding:10px 20px}.chat-header .background-container[data-v-beb2ed7a]{display:grid;grid-template-columns:5fr 1fr;grid-template-rows:1fr 1fr;align-items:center;justify-items:start;padding:0 10px;background-color:var(--scm-color-surface);border-radius:5px}.chat-header .background-container h3[data-v-beb2ed7a],.chat-header .background-container h4[data-v-beb2ed7a]{grid-column:1 / 2}.chat-header .background-container h3[data-v-beb2ed7a]{grid-row:1}.chat-header .background-container h4[data-v-beb2ed7a]{display:grid;grid-row:2}.chat-header .background-container .chat-actions-partial[data-v-beb2ed7a]{justify-self:end;grid-row:1}";
-const ChatHeaderPartial = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["styles", [_style_0$a]], ["__scopeId", "data-v-beb2ed7a"]]);
+const _style_0$b = ".chat-header[data-v-dd11b73a]{display:grid;padding:10px 20px}.chat-header .background-container[data-v-dd11b73a]{display:grid;grid-template-columns:5fr 1fr;grid-template-rows:max-content;align-content:start;padding:0 10px;background-color:var(--scm-color-surface);border-radius:5px}.chat-header .background-container h3[data-v-dd11b73a],.chat-header .background-container h4[data-v-dd11b73a]{margin:0;grid-column:1 / 2}.chat-header .background-container h3[data-v-dd11b73a]{grid-row:1;font-family:Open Sans;letter-spacing:-.1px}.chat-header .background-container h4[data-v-dd11b73a]{display:grid;grid-row:2}.chat-header .background-container .chat-actions-partial[data-v-dd11b73a]{justify-self:end;grid-row:1}";
+const ChatHeaderPartial = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["styles", [_style_0$b]], ["__scopeId", "data-v-dd11b73a"]]);
 const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "name-edit.partial",
   props: {
@@ -16848,17 +17264,13 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock(Fragment, null, [
         !edit.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
           renderSlot(_ctx.$slots, "default"),
-          _cache[2] || (_cache[2] = createTextVNode()),
+          _cache[1] || (_cache[1] = createTextVNode()),
           createVNode(_component_button_partial, {
             size: "sm",
             variant: "ghost",
+            icon: "edit",
             "aria-label": "Edit conversation name",
             onClick: toggleEdit
-          }, {
-            default: withCtx(() => [..._cache[1] || (_cache[1] = [
-              createTextVNode(" Edit ", -1)
-            ])]),
-            _: 1
           })
         ], 64)) : createCommentVNode("", true),
         edit.value ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
@@ -16878,7 +17290,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             disabled: !name.value?.length,
             onClick: save
           }, {
-            default: withCtx(() => [..._cache[3] || (_cache[3] = [
+            default: withCtx(() => [..._cache[2] || (_cache[2] = [
               createTextVNode(" Save ", -1)
             ])]),
             _: 1
@@ -16889,7 +17301,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             "aria-label": "Cancel editing",
             onClick: toggleEdit
           }, {
-            default: withCtx(() => [..._cache[4] || (_cache[4] = [
+            default: withCtx(() => [..._cache[3] || (_cache[3] = [
               createTextVNode(" X ", -1)
             ])]),
             _: 1
@@ -16899,7 +17311,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$8 = { class: "notice-partial" };
+const _hoisted_1$9 = { class: "notice-partial" };
 const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "notice.partial",
   props: {
@@ -16907,14 +17319,14 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("section", _hoisted_1$8, [
+      return openBlock(), createElementBlock("section", _hoisted_1$9, [
         renderSlot(_ctx.$slots, "default", {}, void 0, true)
       ]);
     };
   }
 });
-const _style_0$9 = ".notice-partial[data-v-2ad9f6c8]{display:grid}";
-const NoticePartial = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["styles", [_style_0$9]], ["__scopeId", "data-v-2ad9f6c8"]]);
+const _style_0$a = ".notice-partial[data-v-2ad9f6c8]{display:grid}";
+const NoticePartial = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["styles", [_style_0$a]], ["__scopeId", "data-v-2ad9f6c8"]]);
 const _sfc_main$a = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "system-message.partial",
@@ -16958,8 +17370,8 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$7 = { class: "chat-actions-partial" };
-const _hoisted_2$5 = { class: "options-container" };
+const _hoisted_1$8 = { class: "chat-actions-partial" };
+const _hoisted_2$6 = { class: "options-container" };
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "chat-actions.partial",
   props: {
@@ -16990,7 +17402,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       const _component_button_partial = resolveComponent("button-partial");
       const _component_overlay_container_partial = resolveComponent("overlay-container-partial");
       const _component_dialog_partial = resolveComponent("dialog-partial");
-      return openBlock(), createElementBlock("section", _hoisted_1$7, [
+      return openBlock(), createElementBlock("section", _hoisted_1$8, [
         createVNode(_component_button_partial, {
           ref_key: "attachTo",
           ref: attachTo,
@@ -17010,7 +17422,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           onClose: toggle
         }, {
           default: withCtx(() => [
-            createBaseVNode("section", _hoisted_2$5, [
+            createBaseVNode("section", _hoisted_2$6, [
               createBaseVNode("ul", null, [
                 createBaseVNode("li", null, toDisplayString$1(_ctx.$t("mute")), 1),
                 createBaseVNode("li", null, toDisplayString$1(_ctx.$t("delete")), 1),
@@ -17051,8 +17463,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _style_0$8 = ".chat-actions-partial[data-v-871e6a65]{display:grid}.options-container[data-v-871e6a65]{width:max-content;min-width:200px;background-color:var(--scm-color-surface);box-shadow:0 0 5px var(--scm-color-muted)}";
-const ChatActionsPartial = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["styles", [_style_0$8]], ["__scopeId", "data-v-871e6a65"]]);
+const _style_0$9 = ".chat-actions-partial[data-v-871e6a65]{display:grid}.options-container[data-v-871e6a65]{width:max-content;min-width:200px;background-color:var(--scm-color-surface);box-shadow:0 0 5px var(--scm-color-muted)}";
+const ChatActionsPartial = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["styles", [_style_0$9]], ["__scopeId", "data-v-871e6a65"]]);
 const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "overlay-container.partial",
   props: {
@@ -17187,10 +17599,10 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _style_0$7 = ".overlay-background{position:fixed;top:0;left:0;display:grid;width:100%;height:100%;background-color:#00000080;z-index:1000}.overlay-background.none,.overlay-background.tablet{background-color:transparent}@media only screen and (min-width: 600px) and (max-width: 1023px){.overlay-background.tablet{background-color:#00000080}}.overlay-background.desktop{background-color:transparent}@media only screen and (min-width: 600px) and (max-width: 1023px),only screen and (min-width: 1024px){.overlay-background.desktop{background-color:#00000080}}.overlay-background .content-container{z-index:1100;position:absolute}";
-const OverlayContainerPartial = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["styles", [_style_0$7]]]);
-const _hoisted_1$6 = ["type", "disabled", "aria-busy", "aria-label"];
-const _hoisted_2$4 = {
+const _style_0$8 = ".overlay-background{position:fixed;top:0;left:0;display:grid;width:100%;height:100%;background-color:#00000080;z-index:1000}.overlay-background.none,.overlay-background.tablet{background-color:transparent}@media only screen and (min-width: 600px) and (max-width: 1023px){.overlay-background.tablet{background-color:#00000080}}.overlay-background.desktop{background-color:transparent}@media only screen and (min-width: 600px) and (max-width: 1023px),only screen and (min-width: 1024px){.overlay-background.desktop{background-color:#00000080}}.overlay-background .content-container{z-index:1100;position:absolute}";
+const OverlayContainerPartial = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["styles", [_style_0$8]]]);
+const _hoisted_1$7 = ["type", "disabled", "aria-busy", "aria-label"];
+const _hoisted_2$5 = {
   key: 0,
   class: "scm-btn__spinner",
   "aria-hidden": "true"
@@ -17243,19 +17655,19 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         class: normalizeClass(classes.value),
         onClick
       }, [
-        props.loading ? (openBlock(), createElementBlock("span", _hoisted_2$4)) : props.icon ? (openBlock(), createBlock(_component_icons_partial, {
+        props.loading ? (openBlock(), createElementBlock("span", _hoisted_2$5)) : props.icon ? (openBlock(), createBlock(_component_icons_partial, {
           key: 1,
           type: props.icon
         }, null, 8, ["type"])) : (openBlock(), createElementBlock("span", _hoisted_3$2, [
           renderSlot(_ctx.$slots, "default", {}, void 0, true)
         ]))
-      ], 10, _hoisted_1$6);
+      ], 10, _hoisted_1$7);
     };
   }
 });
-const _style_0$6 = ".scm-btn[data-v-a79bdb66]{--scm-btn-bg: var(--scm-color-primary);--scm-btn-color: white;--scm-btn-radius: 0;--scm-btn-padding-y: 4px;--scm-btn-padding-x: 10px;--scm-btn-font-size: .875em;--scm-btn-height: 40px;--scm-btn-line-height: 42px;--scm-btn-transition: .12s ease-in-out;appearance:none;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;background-color:var(--scm-btn-bg);color:var(--scm-btn-color);font:inherit;padding:var(--scm-btn-padding-y) var(--scm-btn-padding-x);font-size:var(--scm-btn-font-size);border-radius:var(--scm-btn-radius);height:var(--scm-btn-height);line-height:var(--scm-btn-line-height);transition:background-color var(--scm-btn-transition),opacity var(--scm-btn-transition),box-shadow var(--scm-btn-transition);text-decoration:none;white-space:nowrap}.scm-btn[data-v-a79bdb66]:hover:not(:disabled){background-color:color-mix(in srgb,var(--scm-btn-bg) 85%,#000)}.scm-btn[data-v-a79bdb66]:active:not(:disabled){background-color:color-mix(in srgb,var(--scm-btn-bg) 70%,#000)}.scm-btn[data-v-a79bdb66]:focus-visible{outline:2px solid var(--scm-color-primary);outline-offset:2px}.scm-btn[data-v-a79bdb66]:disabled{opacity:.55;cursor:not-allowed}.scm-btn--secondary[data-v-a79bdb66]{--scm-btn-bg: var(--scm-color-surface);--scm-btn-color: var(--scm-color-muted)}.scm-btn--ghost[data-v-a79bdb66]{--scm-btn-bg: transparent;--scm-btn-color: var(--scm-color-primary)}.scm-btn--danger[data-v-a79bdb66]{--scm-btn-bg: var(--scm-color-danger);--scm-btn-color: white}.scm-btn--sm[data-v-a79bdb66]{--scm-btn-padding-y: 2px;--scm-btn-padding-x: 8px;--scm-btn-font-size: .75em}.scm-btn--lg[data-v-a79bdb66]{--scm-btn-padding-y: 8px;--scm-btn-padding-x: 16px;--scm-btn-font-size: 1em}.scm-btn--block[data-v-a79bdb66]{width:100%;display:inline-flex}.scm-btn__spinner[data-v-a79bdb66]{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:scm-spin-a79bdb66 .6s linear infinite}.scm-btn--icon[data-v-a79bdb66]{--scm-btn-padding-x: 8px;width:var(--scm-btn-height)}.scm-btn--icon[data-v-a79bdb66] .icon-partial svg{stroke:currentColor}.scm-btn--icon[data-v-a79bdb66] .icon-partial svg.useFill{fill:currentColor}@keyframes scm-spin-a79bdb66{to{transform:rotate(360deg)}}";
-const ButtonPartial = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["styles", [_style_0$6]], ["__scopeId", "data-v-a79bdb66"]]);
-const _hoisted_1$5 = { class: "dialog-partial" };
+const _style_0$7 = ".scm-btn[data-v-a79bdb66]{--scm-btn-bg: var(--scm-color-primary);--scm-btn-color: white;--scm-btn-radius: 0;--scm-btn-padding-y: 4px;--scm-btn-padding-x: 10px;--scm-btn-font-size: .875em;--scm-btn-height: 40px;--scm-btn-line-height: 42px;--scm-btn-transition: .12s ease-in-out;appearance:none;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;background-color:var(--scm-btn-bg);color:var(--scm-btn-color);font:inherit;padding:var(--scm-btn-padding-y) var(--scm-btn-padding-x);font-size:var(--scm-btn-font-size);border-radius:var(--scm-btn-radius);height:var(--scm-btn-height);line-height:var(--scm-btn-line-height);transition:background-color var(--scm-btn-transition),opacity var(--scm-btn-transition),box-shadow var(--scm-btn-transition);text-decoration:none;white-space:nowrap}.scm-btn[data-v-a79bdb66]:hover:not(:disabled){background-color:color-mix(in srgb,var(--scm-btn-bg) 85%,#000)}.scm-btn[data-v-a79bdb66]:active:not(:disabled){background-color:color-mix(in srgb,var(--scm-btn-bg) 70%,#000)}.scm-btn[data-v-a79bdb66]:focus-visible{outline:2px solid var(--scm-color-primary);outline-offset:2px}.scm-btn[data-v-a79bdb66]:disabled{opacity:.55;cursor:not-allowed}.scm-btn--secondary[data-v-a79bdb66]{--scm-btn-bg: var(--scm-color-surface);--scm-btn-color: var(--scm-color-muted)}.scm-btn--ghost[data-v-a79bdb66]{--scm-btn-bg: transparent;--scm-btn-color: var(--scm-color-primary)}.scm-btn--danger[data-v-a79bdb66]{--scm-btn-bg: var(--scm-color-danger);--scm-btn-color: white}.scm-btn--sm[data-v-a79bdb66]{--scm-btn-padding-y: 2px;--scm-btn-padding-x: 8px;--scm-btn-font-size: .75em}.scm-btn--lg[data-v-a79bdb66]{--scm-btn-padding-y: 8px;--scm-btn-padding-x: 16px;--scm-btn-font-size: 1em}.scm-btn--block[data-v-a79bdb66]{width:100%;display:inline-flex}.scm-btn__spinner[data-v-a79bdb66]{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:scm-spin-a79bdb66 .6s linear infinite}.scm-btn--icon[data-v-a79bdb66]{--scm-btn-padding-x: 8px;width:var(--scm-btn-height)}.scm-btn--icon[data-v-a79bdb66] .icon-partial svg{stroke:currentColor}.scm-btn--icon[data-v-a79bdb66] .icon-partial svg.useFill{fill:currentColor}@keyframes scm-spin-a79bdb66{to{transform:rotate(360deg)}}";
+const ButtonPartial = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["styles", [_style_0$7]], ["__scopeId", "data-v-a79bdb66"]]);
+const _hoisted_1$6 = { class: "dialog-partial" };
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "dialog.partial",
   emits: ["accept", "decline"],
@@ -17269,7 +17681,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       const _component_button_partial = resolveComponent("button-partial");
-      return openBlock(), createElementBlock("section", _hoisted_1$5, [
+      return openBlock(), createElementBlock("section", _hoisted_1$6, [
         renderSlot(_ctx.$slots, "default", {}, void 0, true),
         createVNode(_component_button_partial, { onClick: onAccept }, {
           default: withCtx(() => [..._cache[0] || (_cache[0] = [
@@ -17287,10 +17699,10 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _style_0$5 = ".dialog-partial[data-v-ae4dfdf7]{padding:20px;background-color:var(--scm-color-surface);box-shadow:0 0 5px var(--scm-color-muted)}";
-const DialogPartial = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["styles", [_style_0$5]], ["__scopeId", "data-v-ae4dfdf7"]]);
-const _hoisted_1$4 = { class: "chat-input" };
-const _hoisted_2$3 = { class: "background-container" };
+const _style_0$6 = ".dialog-partial[data-v-ae4dfdf7]{padding:20px;background-color:var(--scm-color-surface);box-shadow:0 0 5px var(--scm-color-muted)}";
+const DialogPartial = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["styles", [_style_0$6]], ["__scopeId", "data-v-ae4dfdf7"]]);
+const _hoisted_1$5 = { class: "chat-input" };
+const _hoisted_2$4 = { class: "background-container" };
 const _hoisted_3$1 = ["value", "placeholder"];
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "chat-input.partial",
@@ -17325,8 +17737,8 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     watch(() => props.modelValue, () => nextTick(resize2));
     return (_ctx, _cache) => {
       const _component_button_partial = resolveComponent("button-partial");
-      return openBlock(), createElementBlock("div", _hoisted_1$4, [
-        createBaseVNode("section", _hoisted_2$3, [
+      return openBlock(), createElementBlock("div", _hoisted_1$5, [
+        createBaseVNode("section", _hoisted_2$4, [
           createBaseVNode("textarea", {
             ref_key: "textareaRef",
             ref: textareaRef,
@@ -17348,26 +17760,10 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _style_0$4 = ".chat-input[data-v-b6ae32fa]{padding:20px}.chat-input .background-container[data-v-b6ae32fa]{border-radius:5px;display:grid;grid-template-columns:1fr max-content;grid-template-rows:max-content;background-color:var(--scm-color-surface)}.chat-input .background-container textarea[data-v-b6ae32fa]{border:0;padding:10px;background-color:var(--scm-color-surface);outline:none;font-size:1em}.chat-input .background-container button[data-v-b6ae32fa]{align-self:end}";
-const ChatInputPartial = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["styles", [_style_0$4]], ["__scopeId", "data-v-b6ae32fa"]]);
+const _style_0$5 = ".chat-input[data-v-b6ae32fa]{padding:20px}.chat-input .background-container[data-v-b6ae32fa]{border-radius:5px;display:grid;grid-template-columns:1fr max-content;grid-template-rows:max-content;background-color:var(--scm-color-surface)}.chat-input .background-container textarea[data-v-b6ae32fa]{border:0;padding:10px;background-color:var(--scm-color-surface);outline:none;font-size:1em}.chat-input .background-container button[data-v-b6ae32fa]{align-self:end}";
+const ChatInputPartial = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["styles", [_style_0$5]], ["__scopeId", "data-v-b6ae32fa"]]);
+const _hoisted_1$4 = { class: "user-avatar" };
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
-  __name: "user-name.partial",
-  props: {
-    userId: { type: String }
-  },
-  setup(__props) {
-    const props = __props;
-    const usersCache = useUsersCacheStore();
-    onMounted(() => {
-      usersCache.ensure([props.userId]);
-    });
-    return (_ctx, _cache) => {
-      return toDisplayString$1(unref(usersCache).name(props.userId));
-    };
-  }
-});
-const _hoisted_1$3 = { class: "user-avatar" };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "user-avatar.partial",
   props: {
     userId: { type: String }
@@ -17392,19 +17788,19 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       usersCache.ensure([props.userId]);
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("span", _hoisted_1$3, [
+      return openBlock(), createElementBlock("span", _hoisted_1$4, [
         createBaseVNode("span", {
           class: "user-avatar__circle",
           style: normalizeStyle({ backgroundColor: `hsl(${hue.value}, 45%, 60%)` })
         }, toDisplayString$1(initials.value), 5),
-        createVNode(_sfc_main$4, { "user-id": __props.userId }, null, 8, ["user-id"])
+        createVNode(_sfc_main$g, { "user-id": __props.userId }, null, 8, ["user-id"])
       ]);
     };
   }
 });
-const _style_0$3 = ".user-avatar[data-v-1fc1d2df]{display:inline-flex;align-items:center;gap:6px}.user-avatar__circle[data-v-1fc1d2df]{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-size:.625em;font-weight:600;color:#fff;flex-shrink:0;line-height:1}";
-const UserAvatarPartial = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["styles", [_style_0$3]], ["__scopeId", "data-v-1fc1d2df"]]);
-const _hoisted_1$2 = {
+const _style_0$4 = ".user-avatar[data-v-1fc1d2df]{display:inline-flex;align-items:center;gap:6px}.user-avatar__circle[data-v-1fc1d2df]{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-size:.625em;font-weight:600;color:#fff;flex-shrink:0;line-height:1}";
+const UserAvatarPartial = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["styles", [_style_0$4]], ["__scopeId", "data-v-1fc1d2df"]]);
+const _hoisted_1$3 = {
   key: 0,
   xmlns: "http://www.w3.org/2000/svg",
   class: "h-6 w-6",
@@ -17413,7 +17809,7 @@ const _hoisted_1$2 = {
   stroke: "currentColor",
   "stroke-width": "2"
 };
-const _hoisted_2$2 = {
+const _hoisted_2$3 = {
   key: 1,
   xmlns: "http://www.w3.org/2000/svg",
   class: "h-6 w-6",
@@ -17875,7 +18271,7 @@ const _hoisted_53 = {
   stroke: "currentColor",
   class: "size-6"
 };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "icons.partial",
   props: {
     type: { type: String },
@@ -17894,14 +18290,14 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("span", {
         class: normalizeClass(["icon-partial", [__props.type, __props.colorScheme || "colorScheme1", __props.size || "medium", rotateClass.value, { animate: __props.animate }]])
       }, [
-        __props.type === "arrow-right" ? (openBlock(), createElementBlock("svg", _hoisted_1$2, [..._cache[0] || (_cache[0] = [
+        __props.type === "arrow-right" ? (openBlock(), createElementBlock("svg", _hoisted_1$3, [..._cache[0] || (_cache[0] = [
           createBaseVNode("path", {
             "stroke-linecap": "round",
             "stroke-linejoin": "round",
             d: "M9 5l7 7-7 7"
           }, null, -1)
         ])])) : createCommentVNode("", true),
-        __props.type === "arrow-left" ? (openBlock(), createElementBlock("svg", _hoisted_2$2, [..._cache[1] || (_cache[1] = [
+        __props.type === "arrow-left" ? (openBlock(), createElementBlock("svg", _hoisted_2$3, [..._cache[1] || (_cache[1] = [
           createBaseVNode("path", {
             "stroke-linecap": "round",
             "stroke-linejoin": "round",
@@ -18293,24 +18689,58 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _style_0$2 = ".icon-partial[data-v-4a547a78]{display:grid;align-self:center;justify-content:center}.icon-partial svg[data-v-4a547a78]{align-self:center;justify-self:center;stroke-width:1.5}.icon-partial.rotate90 svg[data-v-4a547a78]{transform:rotate(90deg)}.icon-partial.rotate180 svg[data-v-4a547a78]{transform:rotate(180deg)}.icon-partial.animate svg[data-v-4a547a78]{transition:transform .2s ease,fill .2s ease,stroke .2s ease}@keyframes upAndDown-4a547a78{0%{transform:translateY(0)}to{transform:translateY(-20px)}}.icon-partial.animate .upload .arrow-up[data-v-4a547a78]{animation:upAndDown-4a547a78 1s infinite ease-in-out}.icon-partial.big[data-v-4a547a78]{width:30px;height:30px}.icon-partial.big svg[data-v-4a547a78]{width:30px;height:30px}.icon-partial.larger[data-v-4a547a78]{width:26px;height:26px}.icon-partial.larger svg[data-v-4a547a78]{width:26px;height:26px}.icon-partial.large[data-v-4a547a78]{width:24px;height:24px}.icon-partial.large svg[data-v-4a547a78]{width:24px;height:24px}.icon-partial.xl[data-v-4a547a78]{width:60px;height:60px}.icon-partial.xl svg[data-v-4a547a78]{width:60px;height:60px}.icon-partial.medium[data-v-4a547a78]{width:20px;height:20px}.icon-partial.medium svg[data-v-4a547a78]{width:20px;height:20px}.icon-partial.small[data-v-4a547a78]{width:16px;height:16px}.icon-partial.small svg[data-v-4a547a78]{width:16px;height:16px}.icon-partial.smaller[data-v-4a547a78]{width:10px;height:10px}.icon-partial.smaller svg[data-v-4a547a78]{width:10px;height:10px}.icon-partial.colorScheme1 svg[data-v-4a547a78]{stroke:var(--scm-icon-color-1, #333)}.icon-partial.colorScheme1 svg.useFill[data-v-4a547a78]{fill:var(--scm-icon-color-1, #333);stroke-width:0}.icon-partial.colorScheme2 svg[data-v-4a547a78]{stroke:var(--scm-icon-color-2, #666)}.icon-partial.colorScheme2 svg.useFill[data-v-4a547a78]{fill:var(--scm-icon-color-2, #666);stroke-width:0}.icon-partial.colorScheme4 svg[data-v-4a547a78]{stroke:var(--scm-icon-color-1, #333)}.icon-partial.colorScheme4 svg.useFill[data-v-4a547a78]{fill:var(--scm-icon-color-1, #333);stroke-width:0}.icon-partial.white svg[data-v-4a547a78]{stroke:#fff}.icon-partial.white svg.useFill[data-v-4a547a78]{fill:#fff;stroke-width:0}.icon-partial.grey svg[data-v-4a547a78]{stroke:var(--scm-color-muted, #999)}.icon-partial.grey svg.useFill[data-v-4a547a78]{fill:var(--scm-color-muted, #999);stroke-width:0}.icon-partial.aiColor svg[data-v-4a547a78]{stroke:var(--scm-icon-ai-color, #8b5cf6)}.icon-partial.aiColor svg.useFill[data-v-4a547a78]{fill:var(--scm-icon-ai-color, #8b5cf6);stroke-width:0}.icon-partial.red svg[data-v-4a547a78]{stroke:var(--scm-color-danger, #e53935)}.icon-partial.red svg.useFill[data-v-4a547a78]{fill:var(--scm-color-danger, #e53935);stroke-width:0}.icon-partial.green svg[data-v-4a547a78]{stroke:#43a047}.icon-partial.green svg.useFill[data-v-4a547a78]{fill:#43a047;stroke-width:0}";
-const IconsPartial = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["styles", [_style_0$2]], ["__scopeId", "data-v-4a547a78"]]);
-const _hoisted_1$1 = { class: "connection-status" };
-const _hoisted_2$1 = { class: "status" };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _style_0$3 = ".icon-partial[data-v-f8bafd55]{display:grid;align-self:center;justify-content:center}.icon-partial svg[data-v-f8bafd55]{align-self:center;justify-self:center;stroke-width:1.5}.icon-partial.rotate90 svg[data-v-f8bafd55]{transform:rotate(90deg)}.icon-partial.rotate180 svg[data-v-f8bafd55]{transform:rotate(180deg)}.icon-partial.animate svg[data-v-f8bafd55]{transition:transform .2s ease,fill .2s ease,stroke .2s ease}@keyframes upAndDown-f8bafd55{0%{transform:translateY(0)}to{transform:translateY(-20px)}}.icon-partial.animate .upload .arrow-up[data-v-f8bafd55]{animation:upAndDown-f8bafd55 1s infinite ease-in-out}.icon-partial.big[data-v-f8bafd55]{width:30px;height:30px}.icon-partial.big svg[data-v-f8bafd55]{width:30px;height:30px}.icon-partial.larger[data-v-f8bafd55]{width:26px;height:26px}.icon-partial.larger svg[data-v-f8bafd55]{width:26px;height:26px}.icon-partial.large[data-v-f8bafd55]{width:24px;height:24px}.icon-partial.large svg[data-v-f8bafd55]{width:24px;height:24px}.icon-partial.xl[data-v-f8bafd55]{width:60px;height:60px}.icon-partial.xl svg[data-v-f8bafd55]{width:60px;height:60px}.icon-partial.medium[data-v-f8bafd55]{width:20px;height:20px}.icon-partial.medium svg[data-v-f8bafd55]{width:20px;height:20px}.icon-partial.small[data-v-f8bafd55]{width:16px;height:16px}.icon-partial.small svg[data-v-f8bafd55]{width:16px;height:16px}.icon-partial.smaller[data-v-f8bafd55]{width:10px;height:10px}.icon-partial.smaller svg[data-v-f8bafd55]{width:10px;height:10px}.icon-partial.colorScheme1 svg[data-v-f8bafd55]{stroke:var(--scm-icon-color-1, #333)}.icon-partial.colorScheme1 svg.useFill[data-v-f8bafd55]{fill:var(--scm-icon-color-1, #333);stroke-width:0}.icon-partial.colorScheme2 svg[data-v-f8bafd55]{stroke:var(--scm-icon-color-2, #666)}.icon-partial.colorScheme2 svg.useFill[data-v-f8bafd55]{fill:var(--scm-icon-color-2, #666);stroke-width:0}.icon-partial.colorScheme4 svg[data-v-f8bafd55]{stroke:var(--scm-icon-color-1, #333)}.icon-partial.colorScheme4 svg.useFill[data-v-f8bafd55]{fill:var(--scm-icon-color-1, #333);stroke-width:0}.icon-partial.white svg[data-v-f8bafd55]{stroke:#fff}.icon-partial.white svg.useFill[data-v-f8bafd55]{fill:#fff;stroke-width:0}.icon-partial.grey svg[data-v-f8bafd55]{stroke:var(--scm-color-muted, #999)}.icon-partial.grey svg.useFill[data-v-f8bafd55]{fill:var(--scm-color-muted, #999);stroke-width:0}.icon-partial.aiColor svg[data-v-f8bafd55]{stroke:var(--scm-icon-ai-color, #8b5cf6)}.icon-partial.aiColor svg.useFill[data-v-f8bafd55]{fill:var(--scm-icon-ai-color, #8b5cf6);stroke-width:0}.icon-partial.red svg[data-v-f8bafd55]{stroke:var(--scm-color-danger, #e53935)}.icon-partial.red svg.useFill[data-v-f8bafd55]{fill:var(--scm-color-danger, #e53935);stroke-width:0}.icon-partial.green svg[data-v-f8bafd55]{stroke:#43a047}.icon-partial.green svg.useFill[data-v-f8bafd55]{fill:#43a047;stroke-width:0}";
+const IconsPartial = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["styles", [_style_0$3]], ["__scopeId", "data-v-f8bafd55"]]);
+const _hoisted_1$2 = { class: "connection-status" };
+const _hoisted_2$2 = { class: "status" };
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "connection-status.partial",
   setup(__props) {
     const mainStore = useMainStore();
     const connection = computed(() => mainStore.state);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("section", _hoisted_1$1, [
-        createBaseVNode("div", _hoisted_2$1, toDisplayString$1(_ctx.$t(`status.${connection.value}`)), 1)
+      return openBlock(), createElementBlock("section", _hoisted_1$2, [
+        createBaseVNode("div", _hoisted_2$2, toDisplayString$1(_ctx.$t(`status.${connection.value}`)), 1)
       ]);
     };
   }
 });
-const _style_0$1 = ".connection-status[data-v-a483f86f]{position:absolute;top:10px;right:10px;pointer-events:none}";
-const ConnectionStatusPartial = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["styles", [_style_0$1]], ["__scopeId", "data-v-a483f86f"]]);
+const _style_0$2 = ".connection-status[data-v-81fdb902]{background-color:var(--scm-color-danger);color:#fff;padding:0 10px;font-size:.7rem;align-content:center}";
+const ConnectionStatusPartial = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["styles", [_style_0$2]], ["__scopeId", "data-v-81fdb902"]]);
+const _hoisted_1$1 = {
+  key: 0,
+  class: "conversations-button-partial"
+};
+const _hoisted_2$1 = {
+  key: 0,
+  class: "unread"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "conversations-button.partial",
+  setup(__props) {
+    const mainStore = useMainStore();
+    const conversationsStore = useConversationsStore();
+    const showButton = computed(() => mainStore.hasChat || conversationsStore.conversations.length > 1);
+    const unreadCount = computed(() => conversationsStore.totalUnreadCount);
+    function showConversations() {
+      mainStore.showConversations();
+    }
+    return (_ctx, _cache) => {
+      const _component_button_partial = resolveComponent("button-partial");
+      return showButton.value ? (openBlock(), createElementBlock("section", _hoisted_1$1, [
+        createVNode(_component_button_partial, {
+          icon: "chat",
+          variant: "secondary",
+          "aria-label": "Conversations",
+          onClick: showConversations
+        }),
+        unreadCount.value ? (openBlock(), createElementBlock("span", _hoisted_2$1, toDisplayString$1(unreadCount.value), 1)) : createCommentVNode("", true)
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
+const _style_0$1 = ".conversations-button-partial[data-v-864b2cbd]{position:relative;display:inline-flex}.conversations-button-partial .unread[data-v-864b2cbd]{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background-color:var(--scm-color-own);color:#fff;font-size:.625em;line-height:16px;text-align:center;pointer-events:none}";
+const ConversationsButtonPartial = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["styles", [_style_0$1]], ["__scopeId", "data-v-864b2cbd"]]);
 function resolveFeatures(config) {
   if (config.features?.length) return [...new Set(config.features)];
   switch (config.mode) {
@@ -18343,7 +18773,7 @@ function applyConfig(config, pinia) {
 const MODULES = [
   { name: "chat", component: ChatModule },
   { name: "conversations", component: ConversationsModule },
-  { name: "chats", component: _sfc_main$i },
+  { name: "chats", component: _sfc_main$j },
   { name: "contacts", component: ContactsModule }
 ];
 const PARTIALS = [
@@ -18359,9 +18789,10 @@ const PARTIALS = [
   { name: "dialog", component: DialogPartial },
   { name: "chat-input", component: ChatInputPartial },
   { name: "user-avatar", component: UserAvatarPartial },
-  { name: "user-name", component: _sfc_main$4 },
+  { name: "user-name", component: _sfc_main$g },
   { name: "icons", component: IconsPartial },
-  { name: "connection-status", component: ConnectionStatusPartial }
+  { name: "connection-status", component: ConnectionStatusPartial },
+  { name: "conversations-button", component: ConversationsButtonPartial }
 ];
 function registerComponents(app) {
   loadViaDeclarationSync(MODULES, void 0, "module", app);
@@ -18496,10 +18927,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const mainStore = useMainStore();
     const userStore = useUserStore();
     const conversationsStore = useConversationsStore();
-    const {
-      connect,
-      authenticate
-    } = useWebSocket();
+    useWebSocket();
     const realWidth = useResize().realWidth;
     const viewMode = computed(() => mainStore.viewMode);
     const leftTarget = computed(() => mainStore.leftTarget);
@@ -18542,8 +18970,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         if (props.config) applyConfig(props.config);
         const token = await resolveToken() ?? props.config?.token ?? mainStore.authToken;
         if (token) mainStore.authToken = token;
-        const urlUser = new URLSearchParams(window.location.search).get("user") || void 0;
-        const userId = decodeSub(token) ?? props.config?.userId ?? userStore.user ?? urlUser;
+        const userId = decodeSub(token) ?? props.config?.userId ?? userStore.user;
         if (!userId) {
           if (props.config) console.warn("[studio-chat] config has no usable identity (getToken/token sub or userId)");
           return;
@@ -18551,13 +18978,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         started = true;
         userStore.user = userId;
         if (props.config?.user) useUsersCacheStore().setOne({ ...props.config.user, id: userId });
-        connect({
+        chatSession.start({
           url: mainStore.wsUrl,
-          maxRetries: 50,
-          maxRetryDelay: 3e4,
-          // resolve a fresh token on every (re)connect so rotation is transparent
-          onOpen: async () => authenticate(await resolveToken() ?? mainStore.authToken ?? userId),
-          onMessage: (data) => handleMessages(JSON.parse(data))
+          fallbackToken: () => mainStore.authToken ?? userId,
+          ownUserId: () => userStore.user,
+          onMessage: handleMessages,
+          onStateChange: (state) => {
+            mainStore.state = state === "ready" ? "connected" : "disconnected";
+          },
+          // the session came back (re-auth or reconnect) — pull everything missed meanwhile
+          onSessionRestored: () => {
+            conversationsStore.handleReconnect().catch(() => {
+            });
+          }
         });
         if (mainStore.isSupportOnly) bootstrapSupport();
       } finally {
@@ -18567,25 +19000,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     watch(() => props.config, start, { immediate: true });
     return (_ctx, _cache) => {
       const _component_actions_partial = resolveComponent("actions-partial");
+      const _component_connection_status_partial = resolveComponent("connection-status-partial");
       const _component_contacts_module = resolveComponent("contacts-module");
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["studio-chat-root", [viewMode.value, leftTarget.value]])
+        class: normalizeClass(["studio-chat-root", [viewMode.value, leftTarget.value, unref(mainStore).state]])
       }, [
         createBaseVNode("section", _hoisted_1, [
-          createVNode(_component_actions_partial)
+          createVNode(_component_actions_partial),
+          unref(mainStore).state === "disconnected" ? (openBlock(), createBlock(_component_connection_status_partial, { key: 0 })) : createCommentVNode("", true)
         ]),
         unref(mainStore).leftTarget ? (openBlock(), createElementBlock("section", _hoisted_2, [
           unref(mainStore).leftTarget === "conversations" ? (openBlock(), createBlock(ConversationsModule, { key: 0 })) : createCommentVNode("", true),
           unref(mainStore).leftTarget === "contacts-new" || unref(mainStore).leftTarget === "contacts-edit" ? (openBlock(), createBlock(_component_contacts_module, { key: 1 })) : createCommentVNode("", true)
         ])) : createCommentVNode("", true),
-        unref(mainStore).mainTarget === "chat" ? (openBlock(), createBlock(_sfc_main$i, { key: 1 })) : createCommentVNode("", true),
+        unref(mainStore).mainTarget === "chat" ? (openBlock(), createBlock(_sfc_main$j, { key: 1 })) : createCommentVNode("", true),
         _cache[0] || (_cache[0] = createBaseVNode("div", { class: "util" }, null, -1))
       ], 2);
     };
   }
 });
-const _style_0 = "[data-v-f291279e]:host{display:block;height:100%}[data-v-f291279e]:host,.studio-chat-root[data-v-f291279e]{--scm-font-size: 16px;--scm-color-primary: #008cff;--scm-color-own: #ff009d;--scm-color-surface: #f6f6f6;--scm-color-muted: #757474;--scm-color-danger: #e53935;font-size:var(--scm-font-size)}#app[data-v-f291279e]{height:100vh}.studio-chat-root[data-v-f291279e]{display:grid;grid-template-rows:40px 1fr;grid-template-columns:minmax(200px,400px) 1fr;height:100%}.studio-chat-root .header[data-v-f291279e]{display:grid;background-color:var(--scm-color-surface);grid-template-columns:max-content 1fr;padding:0 20px;align-content:center}.studio-chat-root .conversations-module[data-v-f291279e]{grid-column:1}.studio-chat-root .chats-module[data-v-f291279e]{grid-column:2}.studio-chat-root.support-no-sidebar[data-v-f291279e]{grid-template-columns:1fr}.studio-chat-root.support-no-sidebar .chats-module[data-v-f291279e]{grid-column:1}.studio-chat-root.compact[data-v-f291279e]{grid-template-columns:1fr}.studio-chat-root.compact .chats-module[data-v-f291279e]{grid-column:1}.studio-chat-root.compact .main-left-target[data-v-f291279e]{width:100%;position:absolute;top:40px;left:0;transform:translate(-100%);transition:transform .3s ease-in-out;background-color:#fff;z-index:100;height:calc(100% - 40px)}.studio-chat-root.compact.conversations .main-left-target[data-v-f291279e],.studio-chat-root.compact.contacts-new .main-left-target[data-v-f291279e],.studio-chat-root.compact.contacts-edit .main-left-target[data-v-f291279e]{transform:translate(0)}[data-v-f291279e]{-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;background-repeat:no-repeat;list-style-type:none;text-decoration:none}";
-const App = /* @__PURE__ */ _export_sfc(_sfc_main, [["styles", [_style_0]], ["__scopeId", "data-v-f291279e"]]);
+const _style_0 = "[data-v-4f474ef7]:host{display:block;height:100%}[data-v-4f474ef7]:host,.studio-chat-root[data-v-4f474ef7]{--scm-font-size: 16px;--scm-color-primary: #008cff;--scm-color-own: #ff009d;--scm-color-surface: #f6f6f6;--scm-color-muted: #757474;--scm-color-danger: #e53935;font-family:Open Sans,sans-serif;font-size:var(--scm-font-size)}#app[data-v-4f474ef7]{height:100vh}.studio-chat-root[data-v-4f474ef7]{display:grid;grid-template-rows:40px 1fr;grid-template-columns:minmax(200px,400px) 1fr;height:100%}.studio-chat-root .header[data-v-4f474ef7]{display:grid;background-color:var(--scm-color-surface);grid-template-columns:max-content 1fr;align-content:center}.studio-chat-root.disconnected[data-v-4f474ef7]{grid-template-rows:60px 1fr}.studio-chat-root.disconnected .header[data-v-4f474ef7]{grid-template-rows:40px 20px}.studio-chat-root.disconnected .header .connection-status[data-v-4f474ef7]{grid-column:1/3}.studio-chat-root .conversations-module[data-v-4f474ef7]{grid-column:1}.studio-chat-root .chats-module[data-v-4f474ef7]{grid-column:2}.studio-chat-root.support-no-sidebar[data-v-4f474ef7]{grid-template-columns:1fr}.studio-chat-root.support-no-sidebar .chats-module[data-v-4f474ef7]{grid-column:1}.studio-chat-root.compact[data-v-4f474ef7]{grid-template-columns:1fr}.studio-chat-root.compact .chats-module[data-v-4f474ef7]{grid-column:1}.studio-chat-root.compact .main-left-target[data-v-4f474ef7]{width:100%;position:absolute;top:40px;left:0;transform:translate(-100%);transition:transform .3s ease-in-out;background-color:#fff;z-index:100;height:calc(100% - 40px)}.studio-chat-root.compact.conversations .main-left-target[data-v-4f474ef7],.studio-chat-root.compact.contacts-new .main-left-target[data-v-4f474ef7],.studio-chat-root.compact.contacts-edit .main-left-target[data-v-4f474ef7]{transform:translate(0)}.studio-chat-root.compact.disconnected .main-left-target[data-v-4f474ef7]{top:60px;height:calc(100% - 60px)}[data-v-4f474ef7],[data-v-4f474ef7]:before,[data-v-4f474ef7]:after{box-sizing:border-box;margin:0;padding:0;background-repeat:no-repeat}[data-v-4f474ef7]{min-width:0}img[data-v-4f474ef7],picture[data-v-4f474ef7],video[data-v-4f474ef7],canvas[data-v-4f474ef7],svg[data-v-4f474ef7]{display:block;max-width:100%}input[data-v-4f474ef7],button[data-v-4f474ef7],textarea[data-v-4f474ef7],select[data-v-4f474ef7]{font:inherit;color:inherit}a[data-v-4f474ef7]{text-decoration:none;color:inherit}ul[data-v-4f474ef7],ol[data-v-4f474ef7]{list-style:none}p[data-v-4f474ef7],h1[data-v-4f474ef7],h2[data-v-4f474ef7],h3[data-v-4f474ef7],h4[data-v-4f474ef7],h5[data-v-4f474ef7],h6[data-v-4f474ef7]{overflow-wrap:break-word}h1[data-v-4f474ef7],h2[data-v-4f474ef7],h3[data-v-4f474ef7],h4[data-v-4f474ef7],h5[data-v-4f474ef7],h6[data-v-4f474ef7]{font-size:inherit;font-weight:inherit}";
+const App = /* @__PURE__ */ _export_sfc(_sfc_main, [["styles", [_style_0]], ["__scopeId", "data-v-4f474ef7"]]);
 dayjs.extend(relativeTime);
 const LilaquadratStudioChat = /* @__PURE__ */ defineCustomElement(App, {
   shadowRoot: true,