@antzsoft/chat-core 1.0.4 → 1.0.5

package/docs/integration-guide.html

@@ -130,6 +130,11 @@ li{margin-bottom:4px;color:#c8d0e0}
     <p id="nav-platform-label">Integration Guide</p>
   </div>
 
+  <div class="section-label">What's New</div>
+  <ul>
+    <li><a href="#whats-new">v1.0.5 Release Notes</a></li>
+  </ul>
+
   <div class="section-label">Getting Started</div>
   <ul>
     <li><a href="#overview">Overview</a></li>
@@ -159,7 +164,7 @@ li{margin-bottom:4px;color:#c8d0e0}
 
   <div class="section-label">Messaging</div>
   <ul>
-    <li><a href="#step-load">8. Load Messages</a></li>
+    <li><a href="#step-load">8. Load Messages &amp; Jump to Unread</a></li>
     <li><a href="#step-send">9. Send a Message</a></li>
     <li><a href="#step-realtime">10. Real-time Events</a></li>
     <li><a href="#step-typing">11. Typing Indicators</a></li>
@@ -208,6 +213,190 @@ li{margin-bottom:4px;color:#c8d0e0}
   </button>
 </div>
 
+<!-- ─── WHAT'S NEW ────────────────────────────────────────────────────── -->
+<section id="whats-new">
+  <h2>What's New</h2>
+  <p style="color:var(--muted);font-size:13px;margin-bottom:20px">Version history and release notes. Click a version to expand.</p>
+
+  <!-- ── v1.0.5 (current) ── -->
+  <div class="wn-version" id="wn-105">
+    <div class="wn-header" onclick="toggleVersion('wn-105')">
+      <div class="wn-title">
+        <span class="wn-ver">v1.0.5</span>
+        <span class="wn-badge current">Current</span>
+        <span class="wn-date">May 2026</span>
+      </div>
+      <span class="wn-chevron">▲</span>
+    </div>
+    <div class="wn-body">
+
+      <div class="wn-item" id="wn-105-1">
+        <div class="wn-item-header" onclick="toggleItem('wn-105-1')">
+          <span class="wn-tag new">New</span>
+          <span class="wn-item-title"><code>externalId</code> on all user responses</span>
+          <span class="wn-chevron-sm">▾</span>
+        </div>
+        <div class="wn-item-body">
+          <p>All API methods that return a user object now include an <code>externalId</code> field — this is the Antz User ID. Maps chat users directly back to your own system without a separate lookup.</p>
+          <p><strong>Usage:</strong> <code>user.externalId</code> is available on every <code>User</code> object — from <code>usersApi</code>, conversation participants, and message senders. No code change needed.</p>
+          <p class="wn-ref">→ <a href="#step-convs">Step 6 — Conversations</a> (participant objects) · Users API reference</p>
+        </div>
+      </div>
+
+      <div class="wn-item" id="wn-105-2">
+        <div class="wn-item-header" onclick="toggleItem('wn-105-2')">
+          <span class="wn-tag new">New</span>
+          <span class="wn-item-title">Single unified User List API</span>
+          <span class="wn-chevron-sm">▾</span>
+        </div>
+        <div class="wn-item-body">
+          <p>One <code>usersApi.list()</code> call now handles listing, searching, and pagination. Previous separate endpoints are consolidated.</p>
+          <pre><code><span class="fn">usersApi</span>.<span class="fn">list</span>()                                  <span class="cm">// all users</span>
+<span class="fn">usersApi</span>.<span class="fn">list</span>({ <span class="at">query</span>: <span class="str">'john'</span> })                  <span class="cm">// search by name / username / email</span>
+<span class="fn">usersApi</span>.<span class="fn">list</span>({ <span class="at">page</span>: <span class="num">1</span>, <span class="at">limit</span>: <span class="num">20</span> })              <span class="cm">// paginated</span></code></pre>
+          <p class="wn-ref">→ <a href="#step-convs">Step 6 — Conversations</a> (user list examples) · Users API reference</p>
+        </div>
+      </div>
+
+      <div class="wn-item" id="wn-105-3">
+        <div class="wn-item-header" onclick="toggleItem('wn-105-3')">
+          <span class="wn-tag new">New</span>
+          <span class="wn-item-title">Single unified Conversation List API</span>
+          <span class="wn-chevron-sm">▾</span>
+        </div>
+        <div class="wn-item-body">
+          <p><code>conversationsApi.list()</code> now handles listing, filtering, searching, and pagination in one call. All filters run server-side before pagination.</p>
+          <pre><code><span class="fn">conversationsApi</span>.<span class="fn">list</span>()                                          <span class="cm">// all</span>
+<span class="fn">conversationsApi</span>.<span class="fn">list</span>({ <span class="at">type</span>: <span class="str">'group'</span>, <span class="at">hasUnread</span>: <span class="kw">true</span> })         <span class="cm">// filter</span>
+<span class="fn">conversationsApi</span>.<span class="fn">list</span>({ <span class="at">search</span>: <span class="str">'design'</span>, <span class="at">page</span>: <span class="num">1</span>, <span class="at">limit</span>: <span class="num">20</span> })  <span class="cm">// search + page</span></code></pre>
+          <p class="wn-ref">→ <a href="#step-convs">Step 6 — Conversations</a> for the full filter reference</p>
+        </div>
+      </div>
+
+      <div class="wn-item" id="wn-105-4">
+        <div class="wn-item-header" onclick="toggleItem('wn-105-4')">
+          <span class="wn-tag fix">Fix</span>
+          <span class="wn-item-title">Attachment last-message content preview</span>
+          <span class="wn-chevron-sm">▾</span>
+        </div>
+        <div class="wn-item-body">
+          <p>When the last message in a conversation was an attachment, the conversation list showed no content preview. Fixed — the server now returns a formatted preview string (e.g. <em>"📎 photo.jpg"</em>).</p>
+          <p><strong>Action required:</strong> Display <code>conversation.lastMessage.content.text</code> directly. Remove any workarounds that were falling back to a placeholder for attachment messages.</p>
+          <p class="wn-ref">→ <a href="#step-convs">Step 6</a> (conversation object) · <a href="#step-realtime">Step 10 — Real-time Events</a> (<code>conversation_updated</code>)</p>
+        </div>
+      </div>
+
+      <div class="wn-item" id="wn-105-5">
+        <div class="wn-item-header" onclick="toggleItem('wn-105-5')">
+          <span class="wn-tag fix">Fix</span>
+          <span class="wn-item-title">Avatar upload via <code>AntzChatClient</code></span>
+          <span class="wn-chevron-sm">▾</span>
+        </div>
+        <div class="wn-item-body">
+          <p><code>client.auth.uploadAvatar()</code> and <code>client.auth.syncAvatar()</code> were not correctly storing the avatar in all storage configurations. Fixed.</p>
+          <p><strong>Action required:</strong> Remove any workarounds for failed avatar uploads. Both methods now work correctly.</p>
+          <p class="wn-ref">→ <a href="#step1">Step 1 — Avatar section</a> for usage of <code>uploadAvatar()</code> and <code>syncAvatar()</code></p>
+        </div>
+      </div>
+
+      <div class="wn-item" id="wn-105-6">
+        <div class="wn-item-header" onclick="toggleItem('wn-105-6')">
+          <span class="wn-tag fix">Fix</span>
+          <span class="wn-item-title"><code>client.connect()</code> on React Native</span>
+          <span class="wn-chevron-sm">▾</span>
+        </div>
+        <div class="wn-item-body">
+          <p><code>chatClient.connect()</code> now correctly initialises and establishes the Socket.IO connection on React Native (Expo and bare). Previously the socket could fail to connect silently in certain RN configurations.</p>
+          <p><strong>Action required:</strong> Verify <code>await chatClient.connect()</code> transitions <code>onSocketStatus</code> to <code>'connected'</code>. No API change — same call, now reliable.</p>
+          <p class="wn-ref">→ <a href="#step-socket">Step 3 — Connect Socket</a> for the full RN root provider setup</p>
+        </div>
+      </div>
+
+      <div class="wn-item" id="wn-105-7">
+        <div class="wn-item-header" onclick="toggleItem('wn-105-7')">
+          <span class="wn-tag new">New</span>
+          <span class="wn-item-title">Group icon — create &amp; update</span>
+          <span class="wn-chevron-sm">▾</span>
+        </div>
+        <div class="wn-item-body">
+          <p>Group conversations now support a custom icon. Admins can set or replace it at any time. The icon is stored server-side and a fresh signed URL is returned on every conversation response.</p>
+          <pre><code><span class="cm">// Upload icon — admin only</span>
+<span class="kw">const</span> updated = <span class="kw">await</span> client.<span class="fn">uploadIcon</span>(groupId, {
+  <span class="at">uri</span>: file.uri, <span class="at">name</span>: <span class="str">'icon.jpg'</span>, <span class="at">type</span>: <span class="str">'image/jpeg'</span>, <span class="at">size</span>: file.size,
+});
+<span class="cm">// updated.iconUrl → fresh signed URL</span></code></pre>
+          <p>Non-admins receive <code>403 Forbidden</code>. The URL is never stored in the DB — regenerated from <code>iconMeta.storageKey</code> on every response. Replacing an icon automatically deletes the previous one.</p>
+          <p class="wn-ref">→ <a href="#step-convs">Step 6 — Conversations</a> (group icon section) for the full upload pipeline</p>
+        </div>
+      </div>
+
+      <div class="wn-item" id="wn-105-8">
+        <div class="wn-item-header" onclick="toggleItem('wn-105-8')">
+          <span class="wn-tag new">New</span>
+          <span class="wn-item-title">Scroll to first unread message</span>
+          <span class="wn-chevron-sm">▾</span>
+        </div>
+        <div class="wn-item-body">
+          <p>Open a conversation directly at the first unread message with an "↑ Unread messages" divider. Uses <code>getLastRead()</code> combined with <code>list()</code> <code>direction: 'after'</code>.</p>
+          <pre><code><span class="cm">// 1. Get last-read pointer</span>
+<span class="kw">const</span> { lastReadMessageId, lastReadAt } = <span class="kw">await</span> messagesApi.<span class="fn">getLastRead</span>(conversationId);
+
+<span class="cm">// 2. Fetch unread messages (everything after the last-read)</span>
+<span class="kw">const</span> { data: unread, meta } = <span class="kw">await</span> messagesApi.<span class="fn">list</span>(conversationId, {
+  <span class="at">cursor</span>: lastReadMessageId, <span class="at">direction</span>: <span class="str">'after'</span>, <span class="at">limit</span>: <span class="num">50</span>,
+});
+
+<span class="cm">// 3. Scroll to first unread</span>
+<span class="kw">if</span> (unread.length) <span class="fn">scrollToMessage</span>(unread[<span class="num">0</span>].id);
+<span class="cm">// meta.hasMore = true → more than 50 unread</span>
+
+<span class="cm">// 4. Render divider above first unread message</span>
+<span class="kw">const</span> isFirstUnread = lastRead && prevMessage?.id === lastRead.messageId;</code></pre>
+          <p class="wn-ref">→ <a href="#step-load">Step 8 — Jump to first unread</a> for full code · <a href="#step-read">Step 12 — Read Receipts &amp; Last Seen</a> for the complete last-read reference</p>
+        </div>
+      </div>
+
+    </div><!-- /.wn-body -->
+  </div><!-- /.wn-version -->
+
+</section>
+
+<style>
+/* ── What's New ── */
+.wn-version{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;overflow:hidden}
+.wn-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;cursor:pointer;background:var(--surface);user-select:none}
+.wn-header:hover{background:var(--surface2)}
+.wn-title{display:flex;align-items:center;gap:10px}
+.wn-ver{font-weight:800;font-size:15px;color:#fff}
+.wn-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;letter-spacing:.4px}
+.wn-badge.current{background:rgba(52,211,153,.15);color:var(--green);border:1px solid rgba(52,211,153,.3)}
+.wn-date{font-size:12px;color:var(--muted)}
+.wn-chevron{font-size:11px;color:var(--muted);transition:transform .2s}
+.wn-version:not(.open) .wn-chevron{transform:rotate(180deg)}
+.wn-body{display:none;padding:4px 0 8px}
+.wn-version.open .wn-body{display:block}
+
+.wn-item{border-top:1px solid var(--border)}
+.wn-item-header{display:flex;align-items:center;gap:10px;padding:11px 18px;cursor:pointer;user-select:none}
+.wn-item-header:hover{background:var(--surface2)}
+.wn-item-title{flex:1;font-size:13.5px;color:var(--text)}
+.wn-item-title code{font-family:var(--font-mono);font-size:12px;color:var(--accent2);background:rgba(167,139,250,.12);padding:1px 5px;border-radius:3px}
+.wn-chevron-sm{font-size:10px;color:var(--muted);transition:transform .2s}
+.wn-item.open .wn-chevron-sm{transform:rotate(180deg)}
+.wn-item-body{display:none;padding:4px 18px 14px 18px}
+.wn-item.open .wn-item-body{display:block}
+.wn-item-body p{font-size:13px;color:#c8d0e0;margin-bottom:8px}
+.wn-item-body pre{margin:8px 0 10px}
+.wn-ref{font-size:12px !important;color:var(--muted) !important}
+.wn-ref a{color:var(--accent);text-decoration:none}
+.wn-ref a:hover{text-decoration:underline}
+
+.wn-tag{font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;letter-spacing:.4px;white-space:nowrap}
+.wn-tag.new{background:rgba(108,140,255,.15);color:var(--accent);border:1px solid rgba(108,140,255,.3)}
+.wn-tag.fix{background:rgba(251,191,36,.12);color:var(--yellow);border:1px solid rgba(251,191,36,.25)}
+.wn-tag.break{background:rgba(248,113,113,.12);color:var(--red);border:1px solid rgba(248,113,113,.25)}
+</style>
+
 <!-- ─── OVERVIEW ──────────────────────────────────────────────────────── -->
 <section id="overview">
   <h2>Overview</h2>
@@ -842,13 +1031,38 @@ chatClient.<span class="fn">disconnect</span>();
   <span class="at">name</span>: <span class="str">'Design Team'</span>, <span class="at">participantIds</span>: [<span class="str">'user-1'</span>, <span class="str">'user-2'</span>],
 });
 
-<span class="cm">// Upload group icon after creation (admin only)</span>
-<span class="cm">// Web — pass a File object from an &lt;input type="file"&gt;</span>
-<span class="kw">await</span> conversationsApi.<span class="fn">uploadIcon</span>(group.id, file);
-
-<span class="cm">// React Native — pass { uri, name, type } from image picker</span>
-<span class="kw">await</span> conversationsApi.<span class="fn">uploadIcon</span>(group.id, { <span class="at">uri</span>: asset.uri, <span class="at">name</span>: <span class="str">'icon.jpg'</span>, <span class="at">type</span>: <span class="str">'image/jpeg'</span> });
-<span class="cm">// Returns updated conversation with fresh iconUrl. Old icon deleted from storage automatically.</span>
+<span class="cm">// ── Group icon (admin only) ───────────────────────────────────────────────────</span>
+<span class="cm">// Always upload AFTER createGroup — the group must exist first.</span>
+<span class="cm">// Uses the SAME presigned URL pipeline as message attachments.</span>
+<span class="cm">// platformUploadFn is handled automatically — you never pass it explicitly.</span>
+
+<span class="cm">// Headless (AntzChatClient) — one call, mirrors client.uploadFiles()</span>
+<span class="kw">const</span> updated = <span class="kw">await</span> client.<span class="fn">uploadIcon</span>(group.id, {
+  <span class="at">uri</span>: <span class="str">'blob:http://...'</span>,  <span class="cm">// URL.createObjectURL(file) on web, file URI on RN</span>
+  <span class="at">name</span>: <span class="str">'icon.jpg'</span>,
+  <span class="at">type</span>: <span class="str">'image/jpeg'</span>,
+  <span class="at">size</span>: file.size,
+});
+<span class="cm">// updated.iconUrl → fresh signed URL, regenerated on every API response</span>
+
+<span class="cm">// What client.uploadIcon() does internally:</span>
+<span class="cm">// Step 1 — client.uploadFiles([file], conversationId)</span>
+<span class="cm">//   → POST /storage/presigned-url       creates temp chat_files record</span>
+<span class="cm">//   → platformUploadFn()                 client uploads binary direct to S3/Azure/local</span>
+<span class="cm">//   → POST /storage/confirm/:fileId      marks chat_files active, returns fileId</span>
+<span class="cm">// Step 2 — conversationsApi.uploadIcon(conversationId, fileId)</span>
+<span class="cm">//   → PUT /conversations/:id/icon { fileId }</span>
+<span class="cm">//      Server: validateAdmin() → verify file → copy storageKey into iconMeta</span>
+<span class="cm">//              → delete chat_files record → return conversation with fresh iconUrl</span>
+
+<span class="cm">// iconUrl behaviour:</span>
+<span class="cm">// - Never stored in DB — regenerated from iconMeta.storageKey on every response</span>
+<span class="cm">// - Previous icon deleted from storage automatically when replaced</span>
+<span class="cm">// - iconMeta = { storageKey, provider, bucket, mimeType, size } embedded in conversation doc</span>
+<span class="cm">// - Non-admins get 403 Forbidden at server level</span>
+
+<span class="cm">// Web/RN SDK components (GroupInfoPanel, NewChatModal, ChatHeader) handle this automatically.</span>
+<span class="cm">// Camera button shown only to admins. No code needed in your app.</span>
 
 <span class="cm">// Participants</span>
 <span class="kw">const</span> members = <span class="kw">await</span> conversationsApi.<span class="fn">getMembers</span>(conversationId);
@@ -956,10 +1170,10 @@ client.socket.<span class="fn">on</span>(<span class="str">'conversation_created
 <!-- ─── STEP 8: LOAD MESSAGES ─────────────────────────────────────────── -->
 <section id="step-load">
   <h2><span class="step">STEP 8</span> Load Messages</h2>
-  <p>Cursor-paginated. Load latest on open, fetch older as user scrolls up.</p>
+  <p>Cursor-paginated. Load latest on open, fetch older as user scrolls up. The <code>direction</code> param controls which side of the cursor to fetch — <code>'before'</code> for older messages (scroll up), <code>'after'</code> for newer messages (scroll down or jump-to-unread).</p>
   <pre><code><span class="kw">import</span> { messagesApi } <span class="kw">from</span> <span class="str">'@antzsoft/chat-core'</span>;
 
-<span class="cm">// Initial load</span>
+<span class="cm">// Initial load — latest messages (no cursor = most recent first)</span>
 <span class="kw">const</span> { data: messages, meta } = <span class="kw">await</span> messagesApi.<span class="fn">list</span>(conversationId, { <span class="at">limit</span>: <span class="num">30</span> });
 
 <span class="cm">// Load older (scroll up)</span>
@@ -967,6 +1181,79 @@ client.socket.<span class="fn">on</span>(<span class="str">'conversation_created
   <span class="at">cursor</span>: meta.nextCursor, <span class="at">direction</span>: <span class="str">'before'</span>, <span class="at">limit</span>: <span class="num">30</span>,
 });
 <span class="cm">// meta.hasMore — false when you've reached the beginning</span></code></pre>
+
+  <hr class="divider" style="margin:28px 0"/>
+
+  <h3>Jump to first unread message</h3>
+  <p>When a conversation has unread messages, you can open the chat directly at the first unread message instead of scrolling to the bottom. This gives users an immediate visual anchor — a <strong>"N unread messages"</strong> divider — right above the first message they haven't read.</p>
+
+  <div class="callout info">
+    <strong>How it works</strong>
+    <code>getLastRead()</code> returns <code>lastReadMessageId</code> — the last message the user read.
+    Fetching with <code>direction: 'after'</code> and that ID as the cursor returns all messages <em>after</em> it — those are the unread ones.
+    The first item in that response is the message to scroll to. <code>meta.hasMore</code> tells you if there are more than <code>limit</code> unread messages.
+  </div>
+
+  <pre><code><span class="kw">import</span> { messagesApi, useChatStore } <span class="kw">from</span> <span class="str">'@antzsoft/chat-core'</span>;
+
+<span class="cm">// Step 1 — get the user's last-read pointer for this conversation</span>
+<span class="kw">const</span> { lastReadMessageId, lastReadAt } = <span class="kw">await</span> messagesApi.<span class="fn">getLastRead</span>(conversationId);
+
+<span class="kw">if</span> (lastReadMessageId) {
+  <span class="cm">// Seed the store so the unread divider renders correctly</span>
+  useChatStore.<span class="fn">getState</span>().<span class="fn">setLastRead</span>(conversationId, lastReadMessageId, lastReadAt!);
+
+  <span class="cm">// Step 2 — fetch messages AFTER the last-read message (these are unread)</span>
+  <span class="kw">const</span> { data: unreadMessages, meta } = <span class="kw">await</span> messagesApi.<span class="fn">list</span>(conversationId, {
+    <span class="at">cursor</span>: lastReadMessageId,
+    <span class="at">direction</span>: <span class="str">'after'</span>,
+    <span class="at">limit</span>: <span class="num">50</span>,
+  });
+
+  <span class="cm">// unreadMessages[0] is the first unread — scroll to it</span>
+  <span class="cm">// meta.hasMore = true means there are more than 50 unread messages</span>
+
+  <span class="kw">if</span> (unreadMessages.length > <span class="num">0</span>) {
+    <span class="fn">scrollToMessage</span>(unreadMessages[<span class="num">0</span>].id);  <span class="cm">// scroll FlatList / ScrollView to this item</span>
+  }
+} <span class="kw">else</span> {
+  <span class="cm">// No prior read state — load latest messages as normal</span>
+  <span class="kw">const</span> { data: messages } = <span class="kw">await</span> messagesApi.<span class="fn">list</span>(conversationId, { <span class="at">limit</span>: <span class="num">30</span> });
+}</code></pre>
+
+  <div data-p="rn web">
+    <h4>Rendering the "unread" divider</h4>
+    <p>Use <code>useChatStore.lastRead[conversationId]</code> to insert a divider row above the first unread message in your list:</p>
+    <pre><code><span class="kw">const</span> lastRead = <span class="fn">useChatStore</span>(s => s.lastRead[conversationId]);
+
+<span class="kw">function</span> <span class="fn">MessageRow</span>({ message, prevMessage }) {
+  <span class="cm">// Insert divider between lastRead message and the next one</span>
+  <span class="kw">const</span> isFirstUnread = lastRead && prevMessage?.id === lastRead.messageId;
+
+  <span class="kw">return</span> (
+    &lt;&gt;
+      {isFirstUnread && (
+        &lt;<span class="fn">View</span> style={styles.unreadDivider}&gt;
+          &lt;<span class="fn">Text</span>&gt;↑ Unread messages&lt;/<span class="fn">Text</span>&gt;
+        &lt;/<span class="fn">View</span>&gt;
+      )}
+      &lt;<span class="fn">MessageBubble</span> message={message} /&gt;
+    &lt;/&gt;
+  );
+}</code></pre>
+  </div>
+
+  <h4>Full pattern summary</h4>
+  <table>
+    <thead><tr><th>Step</th><th>Call</th><th>Purpose</th></tr></thead>
+    <tbody>
+      <tr><td>1</td><td><code>messagesApi.getLastRead(conversationId)</code></td><td>Get the last-read message ID and seed the store</td></tr>
+      <tr><td>2</td><td><code>messagesApi.list(conversationId, { cursor: lastReadMessageId, direction: 'after' })</code></td><td>Fetch all unread messages after that pointer</td></tr>
+      <tr><td>3</td><td>Scroll to <code>unreadMessages[0].id</code></td><td>Jump the list to the first unread message</td></tr>
+      <tr><td>4</td><td>Render divider when <code>prevMessage.id === lastRead.messageId</code></td><td>Show "↑ Unread messages" label above the first unread</td></tr>
+      <tr><td>5</td><td><code>socketEmit.markRead(conversationId)</code> on screen focus</td><td>Tell server the user has read the conversation</td></tr>
+    </tbody>
+  </table>
 </section>
 
 <!-- ─── STEP 9: SEND ───────────────────────────────────────────────────── -->
@@ -1218,7 +1505,7 @@ socketEmit.<span class="fn">markRead</span>(conversationId);              <span
   <hr class="divider" style="margin:28px 0"/>
 
   <h3>Last-read pointer — where the user left off</h3>
-  <p>The store keeps a <strong>last-read pointer</strong> per conversation: the ID and timestamp of the last message the current user read. This is useful for scroll-to-unread and "unread from here" badges.</p>
+  <p>The store keeps a <strong>last-read pointer</strong> per conversation: the ID and timestamp of the last message the current user read. This is used for scroll-to-first-unread, "unread from here" dividers, and unread count badges. See <a href="#step-load">Step 8 — Jump to first unread</a> for the complete implementation pattern.</p>
 
   <div class="callout tip">
     <strong>Automatic after connect</strong>
@@ -2290,6 +2577,14 @@ document.getElementById('nav-platform-label').textContent =
   savedP === 'rn' ? 'React Native' : savedP === 'web' ? 'React / Next.js' : 'Node.js';
 applyGating();
 
+// ── What's New toggles ───────────────────────────────────────────────────
+function toggleVersion(id) {
+  document.getElementById(id).classList.toggle('open');
+}
+function toggleItem(id) {
+  document.getElementById(id).classList.toggle('open');
+}
+
 // ── Progress bar ──────────────────────────────────────────────────────────
 window.addEventListener('scroll', () => {
   const el = document.getElementById('prog');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antzsoft/chat-core",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Platform-agnostic core for Antz Chat — API, socket, stores, types. Works in browser, React Native (Expo or bare), and Node.js.",
   "author": "Antz",
   "license": "MIT",