@auxilium/datalynk-client 1.6.2 → 1.6.4

package/dist/chat.mjs

@@ -1390,6 +1390,9 @@ class Chat {
     __publicField(this, "socketUnsubscribe");
     __publicField(this, "typingTimers", /* @__PURE__ */ new Map());
     __publicField(this, "initialized", false);
+    __publicField(this, "resyncing");
+    __publicField(this, "readVisibility", () => false);
+    __publicField(this, "directorySeq", 0);
     this.api = api;
   }
   async initialize(force = false) {
@@ -1415,14 +1418,12 @@ class Chat {
   }
   async loadDirectory(search = "", cursor) {
     const query = search.trim();
-    if (query.length < 2) {
-      this.users$.next([]);
-      return [];
-    }
+    const seq = ++this.directorySeq;
     const response = await this.run({
-      "$/chat/directory": { query, cursor, limit: 25 }
+      "$/chat/directory": { query, cursor, limit: 10 }
     });
     const users = response.users || [];
+    if (seq !== this.directorySeq) return users;
     this.users$.next(users);
     const selected = this.selectedUser$.value;
     const replacement = selected && users.find((user) => user.id === selected.id);
@@ -1452,7 +1453,8 @@ class Chat {
         "$/chat/history": { userId, before, limit: 75 }
       });
       const messages = (response.messages || []).map((message) => ({ ...message, status: "sent" }));
-      this.messages$.next(before ? this.mergeMessages(messages, this.messages$.value) : messages);
+      if (this.selectedUser$.value && this.selectedUser$.value.id !== userId) return messages;
+      this.messages$.next(this.sortMessages(this.mergeMessages(messages, this.messages$.value)));
       this.hasMore$.next(Boolean(response.hasMore));
       return messages;
     } finally {
@@ -1495,7 +1497,15 @@ class Chat {
   async setTyping(userId, typing) {
     await this.run({ "$/chat/typing": { userId, typing } }, true);
   }
+  /** Only the visible chat window may acknowledge messages as seen. */
+  setReadVisibility(visible) {
+    this.readVisibility = visible;
+    return () => {
+      if (this.readVisibility === visible) this.readVisibility = () => false;
+    };
+  }
   async markLatestRead() {
+    if (!this.readVisibility()) return;
     const peer = this.selectedUser$.value;
     const messages = this.messages$.value;
     const latest = [...messages].reverse().find((message) => message.senderId === (peer == null ? void 0 : peer.id) && !message.id.startsWith("pending:"));
@@ -1520,17 +1530,43 @@ class Chat {
       () => this.api.socket.send({ chat: { subscribe: true } })
     );
   }
+  /**
+   * Catch up after every (re)subscribe. Events published while the socket was down
+   * (up to the reconnect delay plus ticket fetch) are never replayed, so reload the
+   * inbox and the newest page of the open thread from the API.
+   */
+  resync() {
+    if (this.resyncing) return this.resyncing;
+    this.resyncing = (async () => {
+      var _a;
+      try {
+        await this.loadConversations();
+        const peer = this.selectedUser$.value;
+        if (!peer) return;
+        const response = await this.run({ "$/chat/history": { userId: peer.id, limit: 75 } }, true);
+        if (((_a = this.selectedUser$.value) == null ? void 0 : _a.id) !== peer.id) return;
+        const latest = (response.messages || []).map((message) => ({ ...message, status: "sent" }));
+        this.messages$.next(this.sortMessages(this.mergeMessages(latest, this.messages$.value)));
+        await this.markLatestRead();
+      } catch {
+      } finally {
+        this.resyncing = void 0;
+      }
+    })();
+    return this.resyncing;
+  }
   onSocketEvent(event) {
     var _a, _b, _c, _d, _e;
     if (!(event == null ? void 0 : event.type) || event.type.indexOf("chat.") !== 0) return;
-    if (event.type === "chat.message") {
+    if (event.type === "chat.subscribed") {
+      void this.resync();
+    } else if (event.type === "chat.message") {
       const message = (_a = event.data) == null ? void 0 : _a.message;
       const selected = this.selectedUser$.value;
       if (message && selected && (message.senderId === selected.id || message.recipientId === selected.id)) {
         this.upsertMessage({ ...message, status: "sent" });
-        if (message.senderId === selected.id) void this.markLatestRead();
       }
-      void this.loadConversations();
+      void this.loadConversations().then(() => this.markLatestRead()).catch(() => void 0);
     } else if (event.type === "chat.read") {
       this.applyReadReceipt(event.data);
       void this.loadConversations();
@@ -1584,6 +1620,12 @@ class Chat {
       this.messages$.next(next);
     }
   }
+  /** Stream order for persisted messages; optimistic/failed sends stay at the end in send order. */
+  sortMessages(messages) {
+    const persisted = messages.filter((message) => !message.id.startsWith("pending:"));
+    const pending = messages.filter((message) => message.id.startsWith("pending:"));
+    return [...persisted.sort((a, b) => this.compareStreamIds(a.id, b.id)), ...pending];
+  }
   mergeMessages(first, second) {
     const out = [];
     const seen = /* @__PURE__ */ new Set();
@@ -1622,16 +1664,23 @@ class Chat {
   }
 }
 const icon = (path) => `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="${path}"/></svg>`;
+const SOUND_ON_ICON = "M3 9v6h4l5 5V4L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 7.97v8.05A4.47 4.47 0 0 0 16.5 12zM14 3.23v2.06a7 7 0 0 1 0 13.42v2.06A9 9 0 0 0 14 3.23z";
+const SOUND_OFF_ICON = "M16.5 12A4.5 4.5 0 0 0 14 7.97v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51A8.8 8.8 0 0 0 21 12a9 9 0 0 0-7-8.77v2.06A7 7 0 0 1 19 12zM4.27 3 3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06a9 9 0 0 0 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4 9.91 6.09 12 8.18V4z";
 const CHAT_HTML = `
 <section class="dl-chat" role="dialog" aria-label="Datalynk Chat">
   <header class="dl-chat__titlebar">
-    <div class="dl-chat__brand"><span class="dl-chat__mark">${icon("M4 5h16v11H9l-5 4V5zm3 4v2h2V9H7zm4 0v2h2V9h-2zm4 0v2h2V9h-2z")}</span><strong>Chat</strong></div>
+    <div class="dl-chat__brand"><span class="dl-chat__mark">${icon("M4 5h16v11H9l-5 4V5zm3 4v2h2V9H7zm4 0v2h2V9h-2zm4 0v2h2V9h-2z")}</span><strong>Chat</strong><span class="dl-chat__title-unread" aria-live="polite" hidden></span></div>
     <div class="dl-chat__window-actions">
+      <button class="dl-chat__icon-button dl-chat__sound" type="button" aria-pressed="false" aria-label="Mute message sound" title="Mute message sound">${icon(SOUND_ON_ICON)}</button>
       <button class="dl-chat__icon-button dl-chat__popout" type="button" aria-label="Open chat in a separate window" title="Open in new window">${icon("M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3zM5 5h6v2H5v12h12v-6h2v8H3V5h2z")}</button>
       <button class="dl-chat__icon-button dl-chat__minimize" type="button" aria-label="Minimize chat" title="Minimize">${icon("M5 11h14v2H5z")}</button>
       <button class="dl-chat__icon-button dl-chat__close" type="button" aria-label="Close chat" title="Close">${icon("M6.4 5 12 10.6 17.6 5 19 6.4 13.4 12 19 17.6 17.6 19 12 13.4 6.4 19 5 17.6 10.6 12 5 6.4z")}</button>
     </div>
   </header>
+  <button class="dl-chat__restore" type="button" aria-label="Restore chat" hidden>
+    <span class="dl-chat__mark">${icon("M4 5h16v11H9l-5 4V5zm3 4v2h2V9H7zm4 0v2h2V9h-2zm4 0v2h2V9h-2z")}</span>
+    <span><strong>Chat</strong><small>Open conversations</small></span>
+  </button>
   <div class="dl-chat__connection" role="status" hidden></div>
   <div class="dl-chat__error" role="alert" hidden></div>
   <div class="dl-chat__body">
@@ -1677,25 +1726,39 @@ const CHAT_CSS = `
 :host{all:initial;position:fixed;inset:0;z-index:2147483000;pointer-events:none;color:#17242b;font-family:"Segoe UI",Tahoma,Arial,sans-serif}
 *{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
 button,input,textarea{font:inherit}
-.dl-chat{--teal:#3f6f85;--teal-deep:#2f596d;--teal-soft:#e9f1f4;--red:#c42d27;--green:#599e21;--ink:#17242b;--muted:#60717a;--line:#d7e0e4;position:fixed;right:22px;bottom:22px;width:min(720px,calc(100vw - 32px));height:min(640px,calc(100dvh - 32px));min-width:360px;min-height:460px;display:flex;flex-direction:column;overflow:hidden;resize:both;pointer-events:auto;background:#fff;border:1px solid #c7d2d7;border-radius:10px;box-shadow:0 18px 54px rgba(23,36,43,.24),0 3px 10px rgba(23,36,43,.12);container-type:inline-size}
+.dl-chat{--teal:var(--primary,#3f6f85);--teal-fore:var(--primary-fore,#fff);--teal-deep:color-mix(in srgb,var(--teal) 78%,#000);--teal-soft:color-mix(in srgb,var(--teal) 12%,#fff);--teal-wash:color-mix(in srgb,var(--teal) 5%,#fff);--teal-hover:color-mix(in srgb,var(--teal) 10%,#fff);--teal-selected:color-mix(in srgb,var(--teal) 17%,#fff);--red:var(--accent,#c42d27);--red-fore:var(--accentText,#fff);--green:#599e21;--ink:#17242b;--muted:#60717a;--line:#d7e0e4;position:fixed;right:22px;bottom:22px;width:min(720px,calc(100vw - 32px));height:min(640px,calc(100dvh - 32px));min-width:360px;min-height:460px;display:flex;flex-direction:column;overflow:hidden;resize:both;pointer-events:auto;background:#fff;border:1px solid #c7d2d7;border-radius:10px;box-shadow:0 18px 54px rgba(23,36,43,.24),0 3px 10px rgba(23,36,43,.12);container-type:inline-size}
 .dl-chat.is-popout{inset:0;width:100%;height:100dvh;min-width:0;min-height:0;resize:none;border:0;border-radius:0;box-shadow:none}.dl-chat.is-popout .dl-chat__minimize{display:none}
-.dl-chat__titlebar{height:46px;flex:0 0 46px;display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 14px;color:#fff;background:var(--teal);cursor:move;touch-action:none;user-select:none}
+.dl-chat__titlebar{height:46px;flex:0 0 46px;display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 14px;color:var(--teal-fore);background:var(--teal);cursor:move;touch-action:none;user-select:none}
 .dl-chat__brand{display:flex;align-items:center;gap:9px;font-size:15px;letter-spacing:.01em}.dl-chat__mark{display:grid;place-items:center;width:24px;height:24px}.dl-chat__mark svg{width:22px;height:22px;fill:currentColor}
+.dl-chat__title-unread{min-width:20px;height:20px;padding:0 6px;border-radius:10px;font-size:12px;font-weight:700;line-height:20px;text-align:center;color:var(--red-fore);background:var(--red);box-shadow:0 0 0 2px rgba(255,255,255,.85)}.dl-chat__title-unread[hidden]{display:none}
 .dl-chat__window-actions{display:flex;gap:2px}.dl-chat__icon-button{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:5px;color:inherit;background:transparent;cursor:pointer;transition:background-color 120ms ease-out,color 120ms ease-out}.dl-chat__icon-button:hover{background:rgba(255,255,255,.14)}.dl-chat__icon-button:focus-visible,.dl-chat button:focus-visible,.dl-chat input:focus-visible,.dl-chat textarea:focus-visible{outline:2px solid #f2c94c;outline-offset:2px}.dl-chat__icon-button svg{width:18px;height:18px;fill:currentColor}
 .dl-chat__connection,.dl-chat__error{padding:7px 14px;font-size:12px;line-height:1.35}.dl-chat__connection{color:#654d00;background:#fff4c7;border-bottom:1px solid #e8d68c}.dl-chat__error{color:#7b201c;background:#fbe9e8;border-bottom:1px solid #efbfbc}
-.dl-chat__body{min-height:0;flex:1;display:grid;grid-template-columns:260px minmax(0,1fr)}.dl-chat__sidebar{min-width:0;display:flex;flex-direction:column;background:#f4f7f8;border-right:1px solid var(--line)}
-.dl-chat__search-wrap{position:relative;display:block;margin:14px 12px 9px}.dl-chat__search-wrap>svg{position:absolute;left:10px;top:50%;width:17px;height:17px;fill:#70818a;transform:translateY(-50%);pointer-events:none}.dl-chat__search{width:100%;height:36px;padding:0 10px 0 34px;color:var(--ink);background:#fff;border:1px solid #c7d2d7;border-radius:6px;outline:0}.dl-chat__search:focus,.dl-chat__composer:focus{border-color:var(--teal);box-shadow:0 0 0 2px rgba(63,111,133,.15)}
-.dl-chat__scroll{min-height:0;overflow:auto;padding:0 8px 16px}.dl-chat__scroll h2{margin:14px 8px 6px;color:#63757e;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
-.dl-chat__person{position:relative;width:100%;display:grid;grid-template-columns:38px minmax(0,1fr) 8px;align-items:center;gap:10px;padding:8px;border:0;border-radius:7px;text-align:left;color:var(--ink);background:transparent;cursor:pointer;transition:background-color 120ms ease-out}.dl-chat__person:hover{background:#e5edef}.dl-chat__person.is-selected{background:#dce8ed}.dl-chat__avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:#fff;background:var(--teal);font-size:12px;font-weight:700;letter-spacing:.03em}.dl-chat__person-copy{min-width:0}.dl-chat__person-top,.dl-chat__person-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}.dl-chat__person-top strong,.dl-chat__person-bottom>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dl-chat__person-top strong{font-size:13px;font-weight:600}.dl-chat__person-top time{flex:0 0 auto;color:#778891;font-size:10px}.dl-chat__person-bottom>span:first-child{color:var(--muted);font-size:11px}.dl-chat__presence{width:8px;height:8px;border:2px solid #87969d;border-radius:50%}.dl-chat__presence.is-online{border-color:var(--green);background:var(--green)}.dl-chat__unread{display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;color:#fff!important;background:var(--red);font-size:10px!important;font-weight:700}.dl-chat__list-empty{margin:6px 8px 12px;color:var(--muted);font-size:12px;line-height:1.45}
-.dl-chat__main{min-width:0;min-height:0}.dl-chat__empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px;text-align:center}.dl-chat__empty-icon{display:grid;place-items:center;width:58px;height:58px;color:var(--teal);background:var(--teal-soft);border-radius:50%}.dl-chat__empty-icon svg{width:27px;height:27px;fill:currentColor}.dl-chat__empty h2{margin:17px 0 5px;font-size:17px}.dl-chat__empty p{max-width:280px;margin:0;color:var(--muted);font-size:13px;line-height:1.5}
-.dl-chat__thread{height:100%;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto}.dl-chat__thread[hidden],.dl-chat__empty[hidden]{display:none}.dl-chat__thread-header{height:62px;display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid var(--line)}.dl-chat__thread-header .dl-chat__avatar{width:36px;height:36px;flex:0 0 36px}.dl-chat__thread-header>div{min-width:0;display:flex;flex-direction:column}.dl-chat__thread-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.dl-chat__thread-status{position:relative;padding-left:11px;color:var(--muted);font-size:11px}.dl-chat__thread-status:before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;border:1.5px solid #87969d;border-radius:50%;transform:translateY(-50%)}.dl-chat__thread-status.is-online:before{border-color:var(--green);background:var(--green)}.dl-chat__back{display:none;color:var(--teal)}
-.dl-chat__older{justify-self:center;margin:7px 0 0;padding:4px 8px;border:0;color:var(--teal-deep);background:transparent;font-size:11px;cursor:pointer}.dl-chat__older:hover{text-decoration:underline}.dl-chat__messages{min-height:0;overflow-y:auto;padding:12px 18px 18px;scroll-behavior:smooth}.dl-chat__date{display:flex;align-items:center;gap:10px;margin:12px 0;color:#71838c;font-size:10px}.dl-chat__date:before,.dl-chat__date:after{content:"";height:1px;flex:1;background:#e3e9ec}.dl-chat__message{display:flex;margin:4px 0}.dl-chat__message.is-mine{justify-content:flex-end}.dl-chat__bubble{max-width:min(76%,430px);padding:8px 10px 6px;color:var(--ink);background:#edf2f4;border-radius:5px 11px 11px 11px;font-size:13px;line-height:1.42;overflow-wrap:anywhere}.dl-chat__message.is-mine .dl-chat__bubble{color:#fff;background:var(--teal);border-radius:11px 5px 11px 11px}.dl-chat__bubble>span{white-space:pre-wrap}.dl-chat__bubble time{display:block;margin-top:3px;color:#6c7e87;font-size:9px;text-align:right}.dl-chat__message.is-mine time{color:rgba(255,255,255,.72)}.dl-chat__retry{display:block;margin:5px 0 0 auto;padding:2px 7px;border:1px solid rgba(255,255,255,.65);border-radius:4px;color:#fff;background:transparent;font-size:10px;cursor:pointer}.dl-chat__retry:hover{background:rgba(255,255,255,.12)}.dl-chat__thread-empty{max-width:300px;margin:auto;padding:24px;color:var(--muted);font-size:12px;line-height:1.5;text-align:center}.dl-chat__typing{height:20px;padding:0 18px;color:var(--muted);font-size:11px;font-style:italic}
-.dl-chat__compose{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 38px;gap:8px;padding:10px 14px 22px;border-top:1px solid var(--line)}.dl-chat__composer{width:100%;min-height:38px;max-height:92px;resize:none;padding:9px 11px;color:var(--ink);border:1px solid #bdcbd1;border-radius:7px;line-height:1.35;outline:0}.dl-chat__send{display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:7px;color:#fff;background:var(--teal);cursor:pointer;transition:background-color 120ms ease-out}.dl-chat__send:hover{background:var(--teal-deep)}.dl-chat__send:disabled{cursor:not-allowed;opacity:.45}.dl-chat__send svg{width:19px;height:19px;fill:currentColor}.dl-chat__hint{position:absolute;left:15px;bottom:5px;color:#829098;font-size:9px}
-.dl-chat.is-minimized{left:auto!important;top:auto!important;right:22px!important;bottom:0!important;width:280px!important;height:46px!important;min-height:46px;resize:none;border-radius:9px 9px 0 0}.dl-chat.is-minimized .dl-chat__titlebar{cursor:pointer}.dl-chat.is-minimized .dl-chat__body,.dl-chat.is-minimized .dl-chat__connection,.dl-chat.is-minimized .dl-chat__error{display:none}
-@container (max-width:520px){.dl-chat__body{grid-template-columns:1fr}.dl-chat__main{display:none}.dl-chat.has-selection .dl-chat__sidebar{display:none}.dl-chat.has-selection .dl-chat__main{display:block}.dl-chat__back{display:grid}.dl-chat__hint{display:none}.dl-chat__compose{padding-bottom:10px}}
-@media(max-width:600px){.dl-chat{inset:0;width:100%;height:100dvh;min-width:0;min-height:0;border:0;border-radius:0;resize:none}.dl-chat.is-minimized{inset:auto 12px 0 auto!important;width:min(280px,calc(100vw - 24px))!important;border:1px solid #c7d2d7;border-bottom:0}.dl-chat__titlebar{cursor:default}.dl-chat__popout{display:none}}
+.dl-chat__body{min-height:0;flex:1;display:grid;grid-template-columns:260px minmax(0,1fr);grid-template-rows:minmax(0,1fr)}.dl-chat__sidebar{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--teal-wash);border-right:1px solid var(--line)}
+.dl-chat__search-wrap{position:relative;display:block;margin:14px 12px 9px}.dl-chat__search-wrap>svg{position:absolute;left:10px;top:50%;width:17px;height:17px;fill:#70818a;transform:translateY(-50%);pointer-events:none}.dl-chat__search{width:100%;height:36px;padding:0 10px 0 34px;color:var(--ink);background:#fff;border:1px solid #c7d2d7;border-radius:6px;outline:0}.dl-chat__search:focus,.dl-chat__composer:focus{border-color:var(--teal);box-shadow:0 0 0 2px color-mix(in srgb,var(--teal) 15%,transparent)}
+.dl-chat__scroll{flex:1 1 auto;min-height:0;overflow:auto;padding:0 8px 16px}.dl-chat__scroll h2{margin:14px 8px 6px;color:#63757e;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
+.dl-chat__person{position:relative;width:100%;display:grid;grid-template-columns:38px minmax(0,1fr) 8px;align-items:center;gap:10px;padding:8px;border:0;border-radius:7px;text-align:left;color:var(--ink);background:transparent;cursor:pointer;transition:background-color 120ms ease-out}.dl-chat__person:hover{background:var(--teal-hover)}.dl-chat__person.is-selected{background:var(--teal-selected)}.dl-chat__avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:var(--teal-fore);background:var(--teal);font-size:12px;font-weight:700;letter-spacing:.03em}.dl-chat__person-copy{min-width:0}.dl-chat__person-top,.dl-chat__person-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}.dl-chat__person-top strong,.dl-chat__person-bottom>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dl-chat__person-top strong{font-size:13px;font-weight:600}.dl-chat__person-top time{flex:0 0 auto;color:#778891;font-size:10px}.dl-chat__person-bottom>span:first-child{color:var(--muted);font-size:11px}.dl-chat__presence{width:8px;height:8px;border:2px solid #87969d;border-radius:50%}.dl-chat__presence.is-online{border-color:var(--green);background:var(--green)}.dl-chat__unread{display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;color:var(--red-fore)!important;background:var(--red);font-size:10px!important;font-weight:700}.dl-chat__list-empty{margin:6px 8px 12px;color:var(--muted);font-size:12px;line-height:1.45}
+.dl-chat__main{min-width:0;min-height:0;overflow:hidden;height:100%;display:flex;flex-direction:column}.dl-chat__empty{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px;text-align:center}.dl-chat__empty-icon{display:grid;place-items:center;width:58px;height:58px;color:var(--teal);background:var(--teal-soft);border-radius:50%}.dl-chat__empty-icon svg{width:27px;height:27px;fill:currentColor}.dl-chat__empty h2{margin:17px 0 5px;font-size:17px}.dl-chat__empty p{max-width:280px;margin:0;color:var(--muted);font-size:13px;line-height:1.5}
+.dl-chat__thread{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}.dl-chat__thread[hidden],.dl-chat__empty[hidden]{display:none}.dl-chat__thread-header{flex:0 0 auto;height:62px;display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid var(--line)}.dl-chat__thread-header .dl-chat__avatar{width:36px;height:36px;flex:0 0 36px}.dl-chat__thread-header>div{min-width:0;display:flex;flex-direction:column}.dl-chat__thread-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.dl-chat__thread-status{position:relative;padding-left:11px;color:var(--muted);font-size:11px}.dl-chat__thread-status:before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;border:1.5px solid #87969d;border-radius:50%;transform:translateY(-50%)}.dl-chat__thread-status.is-online:before{border-color:var(--green);background:var(--green)}.dl-chat__back{display:none;color:var(--teal)}
+.dl-chat__older{flex:0 0 auto;align-self:center;margin:7px 0 0;padding:4px 8px;border:0;color:var(--teal-deep);background:transparent;font-size:11px;cursor:pointer}.dl-chat__older:hover{text-decoration:underline}.dl-chat__messages{flex:1 1 auto;min-height:0;overflow-y:auto;padding:12px 18px 18px;scroll-behavior:smooth}.dl-chat__date{display:flex;align-items:center;gap:10px;margin:12px 0;color:#71838c;font-size:10px}.dl-chat__date:before,.dl-chat__date:after{content:"";height:1px;flex:1;background:#e3e9ec}.dl-chat__message{display:flex;margin:4px 0}.dl-chat__message.is-mine{justify-content:flex-end}.dl-chat__bubble{max-width:min(76%,430px);padding:8px 10px 6px;color:var(--ink);background:#edf2f4;border-radius:5px 11px 11px 11px;font-size:13px;line-height:1.42;overflow-wrap:anywhere}.dl-chat__message.is-mine .dl-chat__bubble{color:var(--teal-fore);background:var(--teal);border-radius:11px 5px 11px 11px}.dl-chat__bubble>span{white-space:pre-wrap}.dl-chat__bubble time{display:block;margin-top:3px;color:#6c7e87;font-size:9px;text-align:right}.dl-chat__message.is-mine time{color:color-mix(in srgb,var(--teal-fore) 72%,transparent)}.dl-chat__retry{display:block;margin:5px 0 0 auto;padding:2px 7px;border:1px solid rgba(255,255,255,.65);border-radius:4px;color:var(--teal-fore);background:transparent;font-size:10px;cursor:pointer}.dl-chat__retry:hover{background:rgba(255,255,255,.12)}.dl-chat__thread-empty{max-width:300px;margin:auto;padding:24px;color:var(--muted);font-size:12px;line-height:1.5;text-align:center}.dl-chat__typing{flex:0 0 auto;height:20px;padding:0 18px;color:var(--muted);font-size:11px;font-style:italic}
+.dl-chat__compose{flex:0 0 auto;position:relative;display:grid;grid-template-columns:minmax(0,1fr) 38px;gap:8px;padding:10px 14px 22px;border-top:1px solid var(--line)}.dl-chat__composer{width:100%;min-height:38px;max-height:92px;overflow-y:auto;resize:none;box-sizing:border-box;padding:9px 11px;color:var(--ink);border:1px solid #bdcbd1;border-radius:7px;line-height:1.35;outline:0}.dl-chat__send{display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:7px;color:var(--teal-fore);background:var(--teal);cursor:pointer;transition:background-color 120ms ease-out}.dl-chat__send:hover{background:var(--teal-deep)}.dl-chat__send:disabled{cursor:not-allowed;opacity:.45}.dl-chat__send svg{width:19px;height:19px;fill:currentColor}.dl-chat__hint{position:absolute;left:15px;bottom:5px;color:#829098;font-size:9px}
+.dl-chat__restore{display:none}
+.dl-chat.is-minimized{left:auto!important;top:auto!important;right:max(22px,env(safe-area-inset-right))!important;bottom:max(22px,env(safe-area-inset-bottom))!important;width:min(310px,calc(100vw - 32px))!important;min-width:0;height:68px!important;min-height:68px;resize:none;border:1px solid var(--teal-deep);border-radius:12px;background:var(--teal);color:var(--teal-fore);box-shadow:0 6px 24px rgba(23,36,43,.24)}
+.dl-chat.is-minimized .dl-chat__titlebar{position:absolute;inset:0 0 0 auto;height:68px;padding:0 8px;cursor:default;background:transparent;touch-action:auto}
+.dl-chat.is-minimized .dl-chat__brand{display:contents}
+.dl-chat.is-minimized .dl-chat__brand>.dl-chat__mark,.dl-chat.is-minimized .dl-chat__brand>strong,.dl-chat.is-minimized .dl-chat__sound,.dl-chat.is-minimized .dl-chat__popout,.dl-chat.is-minimized .dl-chat__minimize{display:none}
+.dl-chat.is-minimized .dl-chat__title-unread{margin-right:10px}
+.dl-chat.is-minimized .dl-chat__close{width:44px;height:44px;border:1px solid rgba(255,255,255,.4);border-radius:7px}
+.dl-chat.is-minimized .dl-chat__restore{display:flex;align-items:center;gap:12px;flex:1;width:100%;padding:10px 110px 10px 16px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;touch-action:manipulation}
+.dl-chat.is-minimized .dl-chat__restore:hover{background:rgba(255,255,255,.1)}
+.dl-chat__restore .dl-chat__mark{flex:none;width:32px;height:32px}.dl-chat__restore .dl-chat__mark svg{width:28px;height:28px}
+.dl-chat__restore strong,.dl-chat__restore small{display:block;white-space:nowrap}.dl-chat__restore strong{font-size:15px}.dl-chat__restore small{margin-top:3px;font-size:11px}
+.dl-chat.is-minimized .dl-chat__body,.dl-chat.is-minimized .dl-chat__connection,.dl-chat.is-minimized .dl-chat__error{display:none}
+@container (max-width:520px){.dl-chat__body{grid-template-columns:1fr}.dl-chat__main{display:none}.dl-chat.has-selection .dl-chat__sidebar{display:none}.dl-chat.has-selection .dl-chat__main{display:flex}.dl-chat__back{display:grid}.dl-chat__hint{display:none}.dl-chat__compose{padding-bottom:10px}}
+@media(max-width:600px){.dl-chat{inset:0;width:100%;height:100dvh;min-width:0;min-height:0;border:0;border-radius:0;resize:none}.dl-chat.is-minimized{right:max(12px,env(safe-area-inset-right))!important;bottom:max(12px,env(safe-area-inset-bottom))!important;width:min(310px,calc(100vw - 24px))!important}.dl-chat__titlebar{cursor:default}.dl-chat__popout{display:none}}
+@supports not (color:color-mix(in srgb,red,blue)){.dl-chat{--teal-deep:#2f596d;--teal-soft:#e9f1f4;--teal-wash:#f4f7f8;--teal-hover:#e5edef;--teal-selected:#dce8ed}}
 @media(prefers-reduced-motion:reduce){.dl-chat *{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}
 `;
+const SOUND_KEY = "datalynk-chat-sound";
 const windows = /* @__PURE__ */ new WeakMap();
 function openChat(chat, options = {}) {
   const doc = options.document || document;
@@ -1726,6 +1789,8 @@ class ChatWindow {
     __publicField(this, "resizeObserver");
     __publicField(this, "renderedMessageIds", "");
     __publicField(this, "destroyed", false);
+    __publicField(this, "stopReadVisibility");
+    __publicField(this, "onVisibilityChange", () => void this.chat.markLatestRead().catch(() => void 0));
     __publicField(this, "onDestroyed");
     this.chat = chat;
     this.options = options;
@@ -1736,9 +1801,11 @@ class ChatWindow {
     this.root.innerHTML = `<style>${CHAT_CSS}</style>${CHAT_HTML}`;
     this.doc.body.appendChild(this.host);
     this.bind();
+    this.stopReadVisibility = this.chat.setReadVisibility(() => this.canReadSelectedThread());
     this.restoreGeometry();
     this.subscribe();
     this.restoreMinimized();
+    this.renderSound();
     void this.initializeGui();
     this.searchInput.focus();
   }
@@ -1749,20 +1816,24 @@ class ChatWindow {
     this.host.hidden = false;
     this.setMinimized(false);
     this.searchInput.focus();
+    this.onVisibilityChange();
   }
   destroy() {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     if (this.destroyed) return;
     this.destroyed = true;
+    (_a = this.stopReadVisibility) == null ? void 0 : _a.call(this);
+    this.doc.removeEventListener("visibilitychange", this.onVisibilityChange);
+    (_b = this.doc.defaultView) == null ? void 0 : _b.removeEventListener("focus", this.onVisibilityChange);
     this.subscriptions.forEach((subscription) => subscription.unsubscribe());
-    (_a = this.resizeObserver) == null ? void 0 : _a.disconnect();
+    (_c = this.resizeObserver) == null ? void 0 : _c.disconnect();
     clearTimeout(this.searchTimer);
     clearTimeout(this.typingTimer);
     if (this.typingSent && this.selected) void this.chat.setTyping(this.selected.id, false).catch(() => void 0);
     this.host.remove();
-    (_c = (_b = this.options).onClose) == null ? void 0 : _c.call(_b);
-    (_d = this.onDestroyed) == null ? void 0 : _d.call(this);
-    if (this.options.popout && !((_e = this.doc.defaultView) == null ? void 0 : _e.closed)) (_f = this.doc.defaultView) == null ? void 0 : _f.close();
+    (_e = (_d = this.options).onClose) == null ? void 0 : _e.call(_d);
+    (_f = this.onDestroyed) == null ? void 0 : _f.call(this);
+    if (this.options.popout && !((_g = this.doc.defaultView) == null ? void 0 : _g.closed)) (_h = this.doc.defaultView) == null ? void 0 : _h.close();
   }
   get shell() {
     return this.query(".dl-chat");
@@ -1782,23 +1853,49 @@ class ChatWindow {
   get sendButton() {
     return this.query(".dl-chat__send");
   }
+  canReadSelectedThread() {
+    return !this.destroyed && !this.host.hidden && !this.shell.classList.contains("is-minimized") && this.doc.visibilityState === "visible" && Boolean(this.doc.hasFocus()) && this.query(".dl-chat__thread").getClientRects().length > 0;
+  }
   query(selector) {
     const node = this.root.querySelector(selector);
     if (!node) throw new Error(`Missing chat element: ${selector}`);
     return node;
   }
   bind() {
-    var _a;
+    var _a, _b;
     this.query(".dl-chat__close").addEventListener("click", () => this.destroy());
+    this.query(".dl-chat__restore").addEventListener("click", () => this.setMinimized(false));
     this.query(".dl-chat__minimize").addEventListener("click", () => this.setMinimized(!this.shell.classList.contains("is-minimized")));
     this.query(".dl-chat__popout").addEventListener("click", () => this.popout());
+    this.query(".dl-chat__sound").addEventListener("click", () => this.setMuted(!this.isMuted()));
     this.query(".dl-chat__back").addEventListener("click", () => {
       this.shell.classList.remove("has-selection");
       this.searchInput.focus();
     });
     this.searchInput.addEventListener("input", () => {
+      this.renderPeople(this.chat.users$.value);
       clearTimeout(this.searchTimer);
-      this.searchTimer = setTimeout(() => void this.chat.loadDirectory(this.searchInput.value).catch(() => void 0), 220);
+      this.searchTimer = setTimeout(() => void this.chat.loadDirectory(this.searchInput.value).catch(() => void 0), 150);
+    });
+    this.searchInput.addEventListener("keydown", (event) => {
+      const first = this.query(".dl-chat__people").querySelector(".dl-chat__person");
+      if (event.key === "Enter" && first) {
+        event.preventDefault();
+        first.click();
+      } else if (event.key === "ArrowDown" && first) {
+        event.preventDefault();
+        first.focus();
+      }
+    });
+    this.query(".dl-chat__people").addEventListener("keydown", (event) => {
+      if (event.key !== "ArrowDown" && event.key !== "ArrowUp") return;
+      const buttons = Array.from(this.query(".dl-chat__people").querySelectorAll(".dl-chat__person"));
+      const index = buttons.indexOf(this.doc.activeElement);
+      if (index < 0) return;
+      event.preventDefault();
+      if (event.key === "ArrowDown") buttons[Math.min(index + 1, buttons.length - 1)].focus();
+      else if (index === 0) this.searchInput.focus();
+      else buttons[index - 1].focus();
     });
     this.composer.addEventListener("input", () => this.onComposerInput());
     this.composer.addEventListener("keydown", (event) => {
@@ -1818,6 +1915,8 @@ class ChatWindow {
       this.resizeObserver.observe(this.shell);
     }
     (_a = this.doc.defaultView) == null ? void 0 : _a.addEventListener("beforeunload", () => this.destroy(), { once: true });
+    this.doc.addEventListener("visibilitychange", this.onVisibilityChange);
+    (_b = this.doc.defaultView) == null ? void 0 : _b.addEventListener("focus", this.onVisibilityChange);
   }
   subscribe() {
     this.subscriptions.push(
@@ -1834,10 +1933,18 @@ class ChatWindow {
       this.api.status$.subscribe((status) => this.renderConnection(status)),
       this.chat.unread$.subscribe((count) => {
         var _a, _b;
-        return (_b = (_a = this.options).onUnreadChange) == null ? void 0 : _b.call(_a, count);
+        this.renderUnread(count);
+        (_b = (_a = this.options).onUnreadChange) == null ? void 0 : _b.call(_a, count);
       })
     );
   }
+  /** Titlebar count; stays visible while the window is minimized. */
+  renderUnread(count) {
+    const badge = this.query(".dl-chat__title-unread");
+    badge.toggleAttribute("hidden", count <= 0);
+    badge.textContent = count > 99 ? "99+" : String(count);
+    badge.setAttribute("aria-label", `${count} unread message${count === 1 ? "" : "s"}`);
+  }
   renderPeople(users) {
     const query = this.searchInput.value.trim().toLowerCase();
     const conversationIds = new Set(this.chat.conversations$.value.map((row) => row.peer.id));
@@ -1847,11 +1954,11 @@ class ChatWindow {
     if (!filtered.length) {
       const empty = this.doc.createElement("p");
       empty.className = "dl-chat__list-empty";
-      empty.textContent = query ? "No matching people" : "Search for someone to start a conversation.";
+      empty.textContent = query ? "No matching people" : "No other people to start a conversation with.";
       target.appendChild(empty);
       return;
     }
-    filtered.slice(0, query ? 30 : 8).forEach((user) => target.appendChild(this.personButton(user)));
+    filtered.slice(0, 10).forEach((user) => target.appendChild(this.personButton(user)));
   }
   renderConversations(rows) {
     this.conversationList.replaceChildren();
@@ -1993,7 +2100,13 @@ class ChatWindow {
     node.textContent = status === "unauthorized" ? "Your session expired. Sign in again to continue chatting." : "Chat is reconnecting. Messages cannot be sent yet.";
     this.sendButton.disabled = status !== "online" || !this.composer.value.trim();
   }
+  growComposer() {
+    const box = this.composer;
+    box.style.height = "auto";
+    box.style.height = `${box.scrollHeight + box.offsetHeight - box.clientHeight}px`;
+  }
   onComposerInput() {
+    this.growComposer();
     if (!this.selected) return;
     this.writeDraft(this.selected.id, this.composer.value);
     this.sendButton.disabled = !this.composer.value.trim() || this.api.status !== "online";
@@ -2017,6 +2130,7 @@ class ChatWindow {
     try {
       await this.chat.send(peer.id, body);
       this.composer.value = "";
+      this.growComposer();
       this.writeDraft(peer.id, "");
       if (this.typingSent) await this.chat.setTyping(peer.id, false).catch(() => void 0);
       this.typingSent = false;
@@ -2027,7 +2141,7 @@ class ChatWindow {
     }
   }
   popout() {
-    var _a;
+    var _a, _b;
     const popup = (_a = this.doc.defaultView) == null ? void 0 : _a.open("", "datalynk-chat", "popup,width=760,height=720,resizable=yes");
     if (!popup) {
       this.chat.error$.next("Allow pop-ups to open chat in a separate window.");
@@ -2035,6 +2149,11 @@ class ChatWindow {
     }
     popup.document.title = this.options.title || "Datalynk Chat";
     popup.document.body.style.margin = "0";
+    const theme = (_b = this.doc.defaultView) == null ? void 0 : _b.getComputedStyle(this.doc.documentElement);
+    ["--primary", "--primary-fore", "--accent", "--accentText"].forEach((name) => {
+      const value = theme == null ? void 0 : theme.getPropertyValue(name).trim();
+      if (value) popup.document.documentElement.style.setProperty(name, value);
+    });
     openChat(this.chat, { ...this.options, document: popup.document, popout: true });
     this.destroy();
   }
@@ -2080,6 +2199,7 @@ class ChatWindow {
   async initializeGui() {
     try {
       await this.chat.initialize();
+      void this.chat.loadDirectory(this.searchInput.value).catch(() => void 0);
       const selectedId = this.readSelectedUser();
       if (!selectedId || this.chat.selectedUser$.value) return;
       const conversation = this.chat.conversations$.value.find((row) => row.peer.id === selectedId);
@@ -2090,6 +2210,30 @@ class ChatWindow {
     } catch {
     }
   }
+  isMuted() {
+    try {
+      return localStorage.getItem(SOUND_KEY) === "off";
+    } catch {
+      return false;
+    }
+  }
+  setMuted(muted) {
+    try {
+      if (muted) localStorage.setItem(SOUND_KEY, "off");
+      else localStorage.removeItem(SOUND_KEY);
+    } catch {
+    }
+    this.renderSound();
+  }
+  renderSound() {
+    var _a;
+    const muted = this.isMuted();
+    const button = this.query(".dl-chat__sound");
+    button.setAttribute("aria-pressed", String(muted));
+    button.setAttribute("aria-label", muted ? "Unmute message sound" : "Mute message sound");
+    button.title = muted ? "Unmute message sound" : "Mute message sound";
+    (_a = button.querySelector("path")) == null ? void 0 : _a.setAttribute("d", muted ? SOUND_OFF_ICON : SOUND_ON_ICON);
+  }
   restoreMinimized() {
     try {
       if (localStorage.getItem(this.storageKey("minimized")) === "1") this.setMinimized(true, false);
@@ -2101,11 +2245,17 @@ class ChatWindow {
     if (this.options.popout) return;
     if (minimized && !this.shell.classList.contains("is-minimized")) this.saveGeometry();
     this.shell.classList.toggle("is-minimized", minimized);
+    this.query(".dl-chat__restore").hidden = !minimized;
     const button = this.query(".dl-chat__minimize");
     button.setAttribute("aria-label", minimized ? "Restore chat" : "Minimize chat");
     button.title = minimized ? "Restore" : "Minimize";
     (_a = button.querySelector("path")) == null ? void 0 : _a.setAttribute("d", minimized ? "M7.4 15.4 12 10.8l4.6 4.6L18 14l-6-6-6 6 1.4 1.4z" : "M5 11h14v2H5z");
     if (!minimized) this.restoreGeometry();
+    if (!minimized) this.onVisibilityChange();
+    if (persist) {
+      if (minimized) this.query(".dl-chat__restore").focus();
+      else this.searchInput.focus();
+    }
     if (persist) this.saveMinimized(minimized);
   }
   saveMinimized(value) {
@@ -2134,22 +2284,41 @@ class ChatWindow {
     var _a, _b;
     if (this.options.popout) return;
     try {
+      const viewWidth = ((_a = this.doc.defaultView) == null ? void 0 : _a.innerWidth) || 760;
+      const viewHeight = ((_b = this.doc.defaultView) == null ? void 0 : _b.innerHeight) || 720;
+      if (viewWidth <= 600) {
+        ["width", "height", "left", "top", "right", "bottom"].forEach((key) => this.shell.style.removeProperty(key));
+        return;
+      }
       const stored = JSON.parse(localStorage.getItem(this.storageKey("geometry")) || "null");
-      if (!stored) return;
-      const maxWidth = Math.max(360, (((_a = this.doc.defaultView) == null ? void 0 : _a.innerWidth) || 760) - 16);
-      const maxHeight = Math.max(460, (((_b = this.doc.defaultView) == null ? void 0 : _b.innerHeight) || 720) - 16);
-      this.shell.style.width = Math.min(maxWidth, Math.max(360, stored.width || 720)) + "px";
-      this.shell.style.height = Math.min(maxHeight, Math.max(460, stored.height || 640)) + "px";
-      this.shell.style.left = Math.max(0, Math.min(stored.left || 8, maxWidth - 120)) + "px";
-      this.shell.style.top = Math.max(0, Math.min(stored.top || 8, maxHeight - 60)) + "px";
-      this.shell.style.right = "auto";
-      this.shell.style.bottom = "auto";
+      const valid = stored && [stored.width, stored.height, stored.left, stored.top].every((value) => typeof value === "number" && Number.isFinite(value)) && stored.width > 0 && stored.height > 0;
+      const margin = this.options.placement === "bottom-right" ? 22 : 8;
+      if (valid) {
+        const width = Math.min(viewWidth - margin * 2, Math.max(560, stored.width));
+        const height = Math.min(viewHeight - margin * 2, Math.max(460, stored.height));
+        this.shell.style.width = width + "px";
+        this.shell.style.height = height + "px";
+        if (this.options.placement !== "bottom-right") {
+          const clamp = (value, max) => Math.max(margin, Math.min(value, max));
+          this.shell.style.left = clamp(stored.left, viewWidth - width - margin) + "px";
+          this.shell.style.top = clamp(stored.top, viewHeight - height - margin) + "px";
+          this.shell.style.right = "auto";
+          this.shell.style.bottom = "auto";
+        }
+      }
+      if (this.options.placement === "bottom-right") {
+        this.shell.style.left = "auto";
+        this.shell.style.top = "auto";
+        this.shell.style.right = margin + "px";
+        this.shell.style.bottom = margin + "px";
+      }
     } catch {
     }
   }
   saveGeometry() {
     if (this.options.popout || this.destroyed || this.shell.classList.contains("is-minimized")) return;
     const rect = this.shell.getBoundingClientRect();
+    if (!this.host.isConnected || this.host.hidden || rect.width <= 0 || rect.height <= 0) return;
     try {
       localStorage.setItem(this.storageKey("geometry"), JSON.stringify({
         left: rect.left,