@antzsoft/chat-core 1.4.6 → 1.4.7

package/docs/integration-guide.html

@@ -4270,26 +4270,39 @@ socket.<span class="fn">on</span>(<span class="str">'message_deleted'</span>, (e
 <!-- ─── STEP 11: TYPING ───────────────────────────────────────────────── -->
 <section id="step-typing">
   <h2><span class="step">STEP 11</span> Typing Indicators</h2>
+  <p><strong>Call <code>socketEmit.typing(id, true)</code> on every keystroke &mdash; do not throttle it yourself.</strong> Since core v1.4.7 the SDK leading-throttles it internally to one emit per 3&nbsp;s per conversation, while <code>isTyping: false</code> always goes out and resets the window. Adding a second throttle on top makes the two windows interact unpredictably. You still want the trailing timer below, because that is what sends the <em>stop</em> edge.</p>
+  <p>Incoming events arrive as <code>'typing_indicator'</code> (not <code>'typing'</code>). The server broadcasts to everyone in the room including the sender, so filter your own echo by <code>userId</code>. Each store entry self-expires after 6&nbsp;s without a refreshing event, so a lost stop edge can no longer leave an indicator stuck.</p>
   <div data-p="rn web">
     <pre><code><span class="kw">const</span> timer = <span class="fn">useRef</span>&lt;<span class="tp">ReturnType</span>&lt;<span class="kw">typeof</span> setTimeout&gt;&gt;();
 
 <span class="kw">function</span> <span class="fn">onChangeText</span>(val: <span class="tp">string</span>) {
   <span class="fn">setValue</span>(val);
+  <span class="cm">// Fine to call per keystroke — core throttles this internally.</span>
   socketEmit.<span class="fn">typing</span>(conversationId, <span class="kw">true</span>);
   <span class="fn">clearTimeout</span>(timer.current);
-  timer.current = <span class="fn">setTimeout</span>(() => socketEmit.<span class="fn">typing</span>(conversationId, <span class="kw">false</span>), <span class="num">3000</span>);
+  timer.current = <span class="fn">setTimeout</span>(() => socketEmit.<span class="fn">typing</span>(conversationId, <span class="kw">false</span>), <span class="num">2000</span>);
 }
 
-<span class="cm">// Listen for others typing</span>
-socket.<span class="fn">on</span>(<span class="str">'typing'</span>, ({ conversationId, userId, displayName, isTyping }) => {
+<span class="cm">// Also send the stop edge when the composer unmounts or the</span>
+<span class="cm">// conversation changes — otherwise a pending debounce is discarded</span>
+<span class="cm">// and the peer's indicator lingers until it expires.</span>
+<span class="fn">useEffect</span>(() => () => {
+  <span class="fn">clearTimeout</span>(timer.current);
+  socketEmit.<span class="fn">typing</span>(conversationId, <span class="kw">false</span>);
+}, [conversationId]);
+
+<span class="cm">// Listen for others typing — event name is 'typing_indicator'</span>
+socket.<span class="fn">on</span>(<span class="str">'typing_indicator'</span>, ({ conversationId, userId, displayName, isTyping }) => {
+  <span class="kw">if</span> (userId === currentUserId) <span class="kw">return</span>; <span class="cm">// ignore our own echo</span>
   isTyping ? <span class="fn">addTypingUser</span>(conversationId, { userId, displayName })
            : <span class="fn">removeTypingUser</span>(conversationId, userId);
 });</code></pre>
   </div>
   <div data-p="node">
     <pre><code>socketEmit.<span class="fn">typing</span>(conversationId, <span class="kw">true</span>);
-<span class="kw">setTimeout</span>(() => socketEmit.<span class="fn">typing</span>(conversationId, <span class="kw">false</span>), <span class="num">3000</span>);</code></pre>
+<span class="kw">setTimeout</span>(() => socketEmit.<span class="fn">typing</span>(conversationId, <span class="kw">false</span>), <span class="num">2000</span>);</code></pre>
   </div>
+  <div class="callout info"><strong>Server-side suppression.</strong> chat-server skips typing broadcasts entirely in rooms with more than <code>TYPING_MAX_ROOM_SOCKETS</code> connected sockets (default&nbsp;30, <code>0</code> disables). In a large, busy group nobody sees an indicator &mdash; by design, since the UI can only render &ldquo;Several people are typing&hellip;&rdquo; there anyway. The count is sockets, not members, so one user on phone&nbsp;+&nbsp;laptop counts twice.</div>
 </section>
 
 <!-- ─── STEP 12: READ RECEIPTS & LAST SEEN ────────────────────────────── -->
@@ -5476,9 +5489,10 @@ Notifications.<span class="fn">addNotificationResponseReceivedListener</span>((r
   };
 
   <span class="kw">const</span> <span class="fn">onChangeText</span> = (val: <span class="tp">string</span>) => {
+    <span class="cm">// Per-keystroke is fine: core throttles typing:true internally.</span>
     <span class="fn">setText</span>(val); socketEmit.<span class="fn">typing</span>(conversationId, <span class="kw">true</span>);
     <span class="fn">clearTimeout</span>(timer.current);
-    timer.current = <span class="fn">setTimeout</span>(() => socketEmit.<span class="fn">typing</span>(conversationId, <span class="kw">false</span>), <span class="num">3000</span>);
+    timer.current = <span class="fn">setTimeout</span>(() => socketEmit.<span class="fn">typing</span>(conversationId, <span class="kw">false</span>), <span class="num">2000</span>);
   };
 
   <span class="kw">const</span> <span class="fn">loadMore</span> = <span class="kw">async</span> () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antzsoft/chat-core",
-  "version": "1.4.6",
+  "version": "1.4.7",
   "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",

package/dist/chat.store-UVTDBPEC.js

@@ -1,7 +0,0 @@
-import {
-  useChatStore
-} from "./chunk-UIYJAOGL.js";
-export {
-  useChatStore
-};
-//# sourceMappingURL=chat.store-UVTDBPEC.js.map

package/dist/chunk-UIYJAOGL.js

@@ -1,62 +0,0 @@
-// src/stores/chat.store.ts
-import { create } from "zustand";
-var useChatStore = create((set) => ({
-  activeConversationId: null,
-  pendingTarget: null,
-  typingUsers: {},
-  onlineUsers: [],
-  lastRead: {},
-  lastSeen: {},
-  replyingTo: null,
-  editingMessage: null,
-  forwardingMessage: null,
-  isSidebarOpen: true,
-  isGroupInfoOpen: false,
-  isStarredPanelOpen: false,
-  messageInfoId: null,
-  setActiveConversation: (id) => set({ activeConversationId: id, replyingTo: null, editingMessage: null, forwardingMessage: null }),
-  setPendingTarget: (target) => set({ pendingTarget: target }),
-  addTypingUser: (conversationId, user) => set((state) => {
-    const existing = state.typingUsers[conversationId] ?? [];
-    const deduped = existing.filter((u) => u.userId !== user.userId);
-    return { typingUsers: { ...state.typingUsers, [conversationId]: [...deduped, user] } };
-  }),
-  removeTypingUser: (conversationId, userId) => set((state) => ({
-    typingUsers: {
-      ...state.typingUsers,
-      [conversationId]: (state.typingUsers[conversationId] ?? []).filter(
-        (u) => u.userId !== userId
-      )
-    }
-  })),
-  setUserOnline: (userId) => set((state) => ({
-    onlineUsers: state.onlineUsers.includes(userId) ? state.onlineUsers : [...state.onlineUsers, userId]
-  })),
-  setUserOffline: (userId) => set((state) => ({ onlineUsers: state.onlineUsers.filter((id) => id !== userId) })),
-  setOnlineUsers: (userIds) => set({ onlineUsers: userIds }),
-  setLastRead: (conversationId, messageId, readAt) => set((state) => ({
-    lastRead: { ...state.lastRead, [conversationId]: { messageId, readAt } }
-  })),
-  setLastSeen: (userId, lastSeenAt) => set((state) => {
-    if (lastSeenAt === null) {
-      const { [userId]: _, ...rest } = state.lastSeen;
-      return { lastSeen: rest };
-    }
-    return { lastSeen: { ...state.lastSeen, [userId]: lastSeenAt } };
-  }),
-  setReplyingTo: (message) => set({ replyingTo: message, editingMessage: null }),
-  setEditingMessage: (message) => set({ editingMessage: message, replyingTo: null }),
-  setForwardingMessage: (message) => set({ forwardingMessage: message }),
-  toggleSidebar: () => set((state) => ({ isSidebarOpen: !state.isSidebarOpen })),
-  setSidebarOpen: (open) => set({ isSidebarOpen: open }),
-  toggleGroupInfo: () => set((state) => ({ isGroupInfoOpen: !state.isGroupInfoOpen })),
-  setGroupInfoOpen: (open) => set({ isGroupInfoOpen: open }),
-  toggleStarredPanel: () => set((state) => ({ isStarredPanelOpen: !state.isStarredPanelOpen })),
-  setStarredPanelOpen: (open) => set({ isStarredPanelOpen: open }),
-  setMessageInfoId: (id) => set({ messageInfoId: id })
-}));
-
-export {
-  useChatStore
-};
-//# sourceMappingURL=chunk-UIYJAOGL.js.map

package/dist/chunk-UIYJAOGL.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/stores/chat.store.ts"],"sourcesContent":["import { create } from 'zustand';\nimport type { Message } from '../types/index.js';\n\ninterface TypingUser {\n  userId: string;\n  displayName: string;\n  avatarUrl?: string;\n}\n\nexport interface LastReadEntry {\n  messageId: string;\n  readAt: string;\n}\n\ninterface ChatState {\n  activeConversationId: string | null;\n  pendingTarget: { conversationId: string; messageId: string } | null;\n  typingUsers: Record<string, TypingUser[]>;\n  onlineUsers: string[];\n  /** keyed by conversationId — current user's last read pointer per conversation */\n  lastRead: Record<string, LastReadEntry>;\n  /** keyed by userId — last seen timestamp for each user */\n  lastSeen: Record<string, string>;\n  replyingTo: Message | null;\n  editingMessage: Message | null;\n  /** Message staged in the forward picker, null = picker closed. Unlike replyingTo,\n   * this does not fold into the next composer send — forwarding targets a different\n   * conversation and needs its own conversation-picker UI. */\n  forwardingMessage: Message | null;\n  isSidebarOpen: boolean;\n  isGroupInfoOpen: boolean;\n  isStarredPanelOpen: boolean;\n  /** messageId currently shown in the Message Info panel, null = closed */\n  messageInfoId: string | null;\n\n  setActiveConversation: (id: string | null) => void;\n  setPendingTarget: (target: { conversationId: string; messageId: string } | null) => void;\n  addTypingUser: (conversationId: string, user: TypingUser) => void;\n  removeTypingUser: (conversationId: string, userId: string) => void;\n  setUserOnline: (userId: string) => void;\n  setUserOffline: (userId: string) => void;\n  setOnlineUsers: (userIds: string[]) => void;\n  setLastRead: (conversationId: string, messageId: string, readAt: string) => void;\n  setLastSeen: (userId: string, lastSeenAt: string | null) => void;\n  setReplyingTo: (message: Message | null) => void;\n  setEditingMessage: (message: Message | null) => void;\n  setForwardingMessage: (message: Message | null) => void;\n  toggleSidebar: () => void;\n  setSidebarOpen: (open: boolean) => void;\n  toggleGroupInfo: () => void;\n  setGroupInfoOpen: (open: boolean) => void;\n  toggleStarredPanel: () => void;\n  setStarredPanelOpen: (open: boolean) => void;\n  setMessageInfoId: (id: string | null) => void;\n}\n\nexport const useChatStore = create<ChatState>((set) => ({\n  activeConversationId: null,\n  pendingTarget: null,\n  typingUsers: {},\n  onlineUsers: [],\n  lastRead: {},\n  lastSeen: {},\n  replyingTo: null,\n  editingMessage: null,\n  forwardingMessage: null,\n  isSidebarOpen: true,\n  isGroupInfoOpen: false,\n  isStarredPanelOpen: false,\n  messageInfoId: null,\n\n  setActiveConversation: (id) =>\n    set({ activeConversationId: id, replyingTo: null, editingMessage: null, forwardingMessage: null }),\n\n  setPendingTarget: (target) => set({ pendingTarget: target }),\n\n  addTypingUser: (conversationId, user) =>\n    set((state) => {\n      const existing = state.typingUsers[conversationId] ?? [];\n      const deduped = existing.filter((u) => u.userId !== user.userId);\n      return { typingUsers: { ...state.typingUsers, [conversationId]: [...deduped, user] } };\n    }),\n\n  removeTypingUser: (conversationId, userId) =>\n    set((state) => ({\n      typingUsers: {\n        ...state.typingUsers,\n        [conversationId]: (state.typingUsers[conversationId] ?? []).filter(\n          (u) => u.userId !== userId,\n        ),\n      },\n    })),\n\n  setUserOnline: (userId) =>\n    set((state) => ({\n      onlineUsers: state.onlineUsers.includes(userId)\n        ? state.onlineUsers\n        : [...state.onlineUsers, userId],\n    })),\n\n  setUserOffline: (userId) =>\n    set((state) => ({ onlineUsers: state.onlineUsers.filter((id) => id !== userId) })),\n\n  setOnlineUsers: (userIds) => set({ onlineUsers: userIds }),\n\n  setLastRead: (conversationId, messageId, readAt) =>\n    set((state) => ({\n      lastRead: { ...state.lastRead, [conversationId]: { messageId, readAt } },\n    })),\n\n  setLastSeen: (userId, lastSeenAt) =>\n    set((state) => {\n      if (lastSeenAt === null) {\n        const { [userId]: _, ...rest } = state.lastSeen;\n        return { lastSeen: rest };\n      }\n      return { lastSeen: { ...state.lastSeen, [userId]: lastSeenAt } };\n    }),\n\n  setReplyingTo: (message) => set({ replyingTo: message, editingMessage: null }),\n\n  setEditingMessage: (message) => set({ editingMessage: message, replyingTo: null }),\n\n  setForwardingMessage: (message) => set({ forwardingMessage: message }),\n\n  toggleSidebar: () => set((state) => ({ isSidebarOpen: !state.isSidebarOpen })),\n  setSidebarOpen: (open) => set({ isSidebarOpen: open }),\n\n  toggleGroupInfo: () => set((state) => ({ isGroupInfoOpen: !state.isGroupInfoOpen })),\n  setGroupInfoOpen: (open) => set({ isGroupInfoOpen: open }),\n\n  toggleStarredPanel: () => set((state) => ({ isStarredPanelOpen: !state.isStarredPanelOpen })),\n  setStarredPanelOpen: (open) => set({ isStarredPanelOpen: open }),\n\n  setMessageInfoId: (id: string | null) => set({ messageInfoId: id }),\n}));\n"],"mappings":"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","names":[]}