@steerable/agent-ui 0.6.57 → 0.6.58

package/dist/state/useChatList.js

@@ -30,6 +30,8 @@ export function useChatList(options) {
     const [error, setError] = useState(null);
     const [selectedAgentId, setSelectedAgentId] = useState(null);
     const pageRef = useRef(1);
+    const hasMoreRef = useRef(false);
+    const loadingMoreRef = useRef(false);
     const mountedRef = useRef(true);
     useEffect(() => {
         mountedRef.current = true;
@@ -45,6 +47,7 @@ export function useChatList(options) {
                 return;
             setChats(res.chats);
             setHasMore(res.hasMore);
+            hasMoreRef.current = res.hasMore;
             pageRef.current = 1;
             setError(null);
         }
@@ -69,16 +72,27 @@ export function useChatList(options) {
         }
     }, []);
     const loadMoreChats = useCallback(async () => {
-        if (!hasMoreChats || isLoadingMoreChats)
+        if (!hasMoreRef.current || loadingMoreRef.current)
             return;
+        loadingMoreRef.current = true;
         setLoadingMore(true);
         try {
             const next = pageRef.current + 1;
             const res = await transportRef.current.listChats({ page: next, pageSize });
             if (!mountedRef.current)
                 return;
-            setChats((prev) => prev.concat(res.chats));
+            setChats((prev) => {
+                const ids = new Set(prev.map(transportRef.current.getChatId));
+                return prev.concat(res.chats.filter((chat) => {
+                    const id = transportRef.current.getChatId(chat);
+                    if (ids.has(id))
+                        return false;
+                    ids.add(id);
+                    return true;
+                }));
+            });
             setHasMore(res.hasMore);
+            hasMoreRef.current = res.hasMore;
             pageRef.current = next;
         }
         catch (err) {
@@ -86,10 +100,11 @@ export function useChatList(options) {
                 setError(err instanceof Error ? err : new Error(String(err)));
         }
         finally {
+            loadingMoreRef.current = false;
             if (mountedRef.current)
                 setLoadingMore(false);
         }
-    }, [hasMoreChats, isLoadingMoreChats, pageSize]);
+    }, [pageSize]);
     const createChat = useCallback(async (input) => {
         const t = transportRef.current;
         if (!t.createChat)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@steerable/agent-ui",
-  "version": "0.6.57",
+  "version": "0.6.58",
   "description": "Steerable framework Tier 4 — headless React hooks (useAgentSession, useChatStream, useToolCallStatus) and Tailwind-themed components (ChatPanel, MessageList, OrchestrationPlanCard, ToolCallRenderer, SSEStreamView) for embedding Steerable agents in any React app.",
   "license": "Apache-2.0",
   "homepage": "https://steerableframework.com/storybook/",
@@ -57,7 +57,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@steerable/agent-protocol": "0.6.57"
+    "@steerable/agent-protocol": "0.6.58"
   },
   "peerDependencies": {
     "react": ">=18.0.0",

package/src/state/useChatList.test.ts

@@ -83,6 +83,22 @@ describe('useChatList', () => {
     expect(result.current.hasMoreChats).toBe(false);
   });
 
+  it('coalesces concurrent loadMoreChats calls for the same page', async () => {
+    const { transport, listChats } = makeTransport();
+    const { result } = renderHook(() => useChatList({ transport, pageSize: 50 }));
+
+    await waitFor(() => expect(result.current.chats.length).toBe(2));
+
+    await act(async () => {
+      const first = result.current.loadMoreChats();
+      const second = result.current.loadMoreChats();
+      await Promise.all([first, second]);
+    });
+
+    expect(listChats).toHaveBeenCalledTimes(2);
+    expect(result.current.chats.map((c) => c.id)).toEqual(['c1', 'c2', 'c3']);
+  });
+
   it('patchChatTitle updates without re-fetching', async () => {
     const { transport, listChats } = makeTransport();
     const { result } = renderHook(() => useChatList({ transport, pageSize: 50 }));

package/src/state/useChatList.ts

@@ -88,6 +88,8 @@ export function useChatList<TChat, TAgent>(
   const [error, setError] = useState<Error | null>(null);
   const [selectedAgentId, setSelectedAgentId] = useState<string | null>(null);
   const pageRef = useRef(1);
+  const hasMoreRef = useRef(false);
+  const loadingMoreRef = useRef(false);
   const mountedRef = useRef(true);
 
   useEffect(() => {
@@ -104,6 +106,7 @@ export function useChatList<TChat, TAgent>(
       if (!mountedRef.current) return;
       setChats(res.chats);
       setHasMore(res.hasMore);
+      hasMoreRef.current = res.hasMore;
       pageRef.current = 1;
       setError(null);
     } catch (err) {
@@ -123,21 +126,34 @@ export function useChatList<TChat, TAgent>(
   }, []);
 
   const loadMoreChats = useCallback(async () => {
-    if (!hasMoreChats || isLoadingMoreChats) return;
+    if (!hasMoreRef.current || loadingMoreRef.current) return;
+    loadingMoreRef.current = true;
     setLoadingMore(true);
     try {
       const next = pageRef.current + 1;
       const res = await transportRef.current.listChats({ page: next, pageSize });
       if (!mountedRef.current) return;
-      setChats((prev) => prev.concat(res.chats));
+      setChats((prev) => {
+        const ids = new Set(prev.map(transportRef.current.getChatId));
+        return prev.concat(
+          res.chats.filter((chat) => {
+            const id = transportRef.current.getChatId(chat);
+            if (ids.has(id)) return false;
+            ids.add(id);
+            return true;
+          }),
+        );
+      });
       setHasMore(res.hasMore);
+      hasMoreRef.current = res.hasMore;
       pageRef.current = next;
     } catch (err) {
       if (mountedRef.current) setError(err instanceof Error ? err : new Error(String(err)));
     } finally {
+      loadingMoreRef.current = false;
       if (mountedRef.current) setLoadingMore(false);
     }
-  }, [hasMoreChats, isLoadingMoreChats, pageSize]);
+  }, [pageSize]);
 
   const createChat = useCallback(
     async (input?: { agentId?: string; projectId?: string }) => {