Merge remote-tracking branch 'origin/main' into codex/im-channel-connections

# Conflicts: # backend/app/gateway/services.py # frontend/src/app/workspace/chats/page.tsx
2026-06-11 18:05:58 +00:00 · 2026-06-11 17:51:16 +08:00
parent ddd1c5e42f 2d5f0787de
commit d1768606c0
27 changed files with 1332 additions and 55 deletions
@@ -1,8 +1,9 @@
 "use client";

 import Link from "next/link";
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";

+import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import {
@@ -15,7 +16,7 @@ import {
  WorkspaceHeader,
 } from "@/components/workspace/workspace-container";
 import { useI18n } from "@/core/i18n/hooks";
-import { useThreads } from "@/core/threads/hooks";
+import { useInfiniteThreads } from "@/core/threads/hooks";
 import {
  channelSourceOfThread,
  pathOfThread,
@@ -25,18 +26,52 @@ import { formatTimeAgo } from "@/core/utils/datetime";

 export default function ChatsPage() {
  const { t } = useI18n();
-  const { data: threads } = useThreads();
+  const {
+    data: infiniteThreads,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useInfiniteThreads();
+  const threads = useMemo(
+    () => infiniteThreads?.pages.flat() ?? [],
+    [infiniteThreads],
+  );
  const [search, setSearch] = useState("");
+  const isSearching = search.trim().length > 0;

  useEffect(() => {
    document.title = `${t.pages.chats} - ${t.pages.appName}`;
  }, [t.pages.chats, t.pages.appName]);

  const filteredThreads = useMemo(() => {
-    return threads?.filter((thread) => {
+    return threads.filter((thread) => {
      return titleOfThread(thread).toLowerCase().includes(search.toLowerCase());
    });
  }, [threads, search]);
+
+  // Sentinel-based auto load-more for the unfiltered list (issue #3482).
+  // In search mode we deliberately do NOT auto-paginate, otherwise an empty
+  // filtered view would keep the sentinel in the viewport and drain the
+  // entire backend list one page at a time.  Searching falls back to an
+  // explicit button so users can still reach older conversations on demand.
+  const sentinelRef = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    const element = sentinelRef.current;
+    if (!element || !hasNextPage || isSearching) {
+      return;
+    }
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry?.isIntersecting && hasNextPage && !isFetchingNextPage) {
+          void fetchNextPage();
+        }
+      },
+      { rootMargin: "200px 0px 200px 0px" },
+    );
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [fetchNextPage, hasNextPage, isFetchingNextPage, isSearching]);
+
  return (
    <WorkspaceContainer>
      <WorkspaceHeader></WorkspaceHeader>
@@ -55,7 +90,7 @@ export default function ChatsPage() {
          <main className="min-h-0 flex-1">
            <ScrollArea className="size-full py-4">
              <div className="mx-auto flex size-full max-w-(--container-width-md) flex-col">
-                {filteredThreads?.map((thread) => {
+                {filteredThreads.map((thread) => {
                  const channelSource = channelSourceOfThread(thread);
                  return (
                    <Link key={thread.thread_id} href={pathOfThread(thread)}>
@@ -79,6 +114,28 @@ export default function ChatsPage() {
                    </Link>
                  );
                })}
+                {hasNextPage && !isSearching && (
+                  <div
+                    ref={sentinelRef}
+                    aria-hidden="true"
+                    className="h-px w-full"
+                    data-testid="chats-page-sentinel"
+                  />
+                )}
+                {hasNextPage && isSearching && (
+                  <div className="flex justify-center p-4">
+                    <Button
+                      variant="outline"
+                      onClick={() => void fetchNextPage()}
+                      disabled={isFetchingNextPage}
+                      data-testid="chats-page-load-more"
+                    >
+                      {isFetchingNextPage
+                        ? t.chats.loadingMore
+                        : t.chats.loadMoreToSearch}
+                    </Button>
+                  </div>
+                )}
              </div>
            </ScrollArea>
          </main>
@@ -11,7 +11,7 @@ import {
 } from "lucide-react";
 import Link from "next/link";
 import { useParams, usePathname, useRouter } from "next/navigation";
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";

 import { Button } from "@/components/ui/button";
@@ -51,8 +51,8 @@ import {
 } from "@/core/threads/export";
 import {
  useDeleteThread,
+  useInfiniteThreads,
  useRenameThread,
-  useThreads,
 } from "@/core/threads/hooks";
 import type { AgentThread, AgentThreadState } from "@/core/threads/types";
 import {
@@ -74,7 +74,35 @@ export function RecentChatList() {
      thread_id: string;
      agent_name?: string;
    }>();
-  const { data: threads = [] } = useThreads();
+  const {
+    data: infiniteThreads,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useInfiniteThreads();
+  const threads = useMemo(
+    () => infiniteThreads?.pages.flat() ?? [],
+    [infiniteThreads],
+  );
+
+  const sentinelRef = useRef<HTMLDivElement | null>(null);
+  useEffect(() => {
+    const element = sentinelRef.current;
+    if (!element || !hasNextPage) {
+      return;
+    }
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry?.isIntersecting && hasNextPage && !isFetchingNextPage) {
+          void fetchNextPage();
+        }
+      },
+      { rootMargin: "120px 0px 120px 0px" },
+    );
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [fetchNextPage, hasNextPage, isFetchingNextPage]);
+
  const { mutate: deleteThread } = useDeleteThread();
  const { mutate: renameThread } = useRenameThread();

@@ -287,6 +315,28 @@ export function RecentChatList() {
                  </SidebarMenuItem>
                );
              })}
+              {hasNextPage && (
+                <>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="mx-2 my-1 w-[calc(100%-1rem)] justify-center text-xs"
+                    onClick={() => void fetchNextPage()}
+                    disabled={isFetchingNextPage}
+                    data-testid="recent-chat-list-load-more"
+                  >
+                    {isFetchingNextPage
+                      ? t.chats.loadingMore
+                      : t.chats.loadOlderChats}
+                  </Button>
+                  <div
+                    ref={sentinelRef}
+                    aria-hidden="true"
+                    className="h-px w-full"
+                    data-testid="recent-chat-list-sentinel"
+                  />
+                </>
+              )}
            </div>
          </SidebarMenu>
        </SidebarGroupContent>
@@ -253,6 +253,9 @@ export const enUS: Translations = {
  // Chats
  chats: {
    searchChats: "Search chats",
+    loadMoreToSearch: "Load more to search older conversations",
+    loadingMore: "Loading more...",
+    loadOlderChats: "Load older chats",
  },

  // Channels
@@ -184,6 +184,9 @@ export interface Translations {
  // Chats
  chats: {
    searchChats: string;
+    loadMoreToSearch: string;
+    loadingMore: string;
+    loadOlderChats: string;
  };

  // Channels
@@ -241,6 +241,9 @@ export const zhCN: Translations = {
  // Chats
  chats: {
    searchChats: "搜索对话",
+    loadMoreToSearch: "加载更多以搜索更早的对话",
+    loadingMore: "正在加载...",
+    loadOlderChats: "加载更早的对话",
  },

  // Channels
@@ -1,7 +1,10 @@
 import type { AIMessage, Message, Run } from "@langchain/langgraph-sdk";
+import type { ThreadsClient } from "@langchain/langgraph-sdk/client";
 import { useStream } from "@langchain/langgraph-sdk/react";
 import {
  type QueryClient,
+  type InfiniteData,
+  useInfiniteQuery,
  useMutation,
  useQuery,
  useQueryClient,
@@ -315,6 +318,56 @@ export function upsertThreadInSearchCache(
  );
 }

+export function upsertThreadInInfiniteCache(
+  queryClient: QueryClient,
+  thread: AgentThread,
+) {
+  queryClient.setQueriesData(
+    {
+      queryKey: INFINITE_THREADS_QUERY_KEY_PREFIX,
+      exact: false,
+    },
+    (oldData: InfiniteData<AgentThread[]> | undefined) => {
+      if (!oldData) {
+        return oldData;
+      }
+
+      const merged = oldData.pages.map((page) =>
+        page.map((t) =>
+          t.thread_id === thread.thread_id
+            ? {
+                ...thread,
+                ...t,
+                metadata: {
+                  ...(thread.metadata ?? {}),
+                  ...(t.metadata ?? {}),
+                },
+                values: {
+                  ...thread.values,
+                  ...t.values,
+                },
+              }
+            : t,
+        ),
+      );
+
+      const exists = merged.some((page) =>
+        page.some((t) => t.thread_id === thread.thread_id),
+      );
+      if (exists) {
+        return { ...oldData, pages: merged };
+      }
+
+      const firstPage = merged[0] ?? [];
+      const restPages = merged.slice(1);
+      return {
+        ...oldData,
+        pages: [[thread, ...firstPage], ...restPages],
+      };
+    },
+  );
+}
+
 function getStreamErrorMessage(error: unknown): string {
  if (typeof error === "string" && error.trim()) {
    return error;
@@ -421,6 +474,19 @@ export function useThreadStream({
        },
        interrupts: {},
      });
+      upsertThreadInInfiniteCache(queryClient, {
+        thread_id: meta.thread_id,
+        created_at: now,
+        updated_at: now,
+        metadata: context.agent_name ? { agent_name: context.agent_name } : {},
+        status: "busy",
+        values: {
+          title: t.pages.newChat,
+          messages: [],
+          artifacts: [],
+        },
+        interrupts: {},
+      });
      if (context.agent_name && !isMock) {
        void getAPIClient()
          .threads.update(meta.thread_id, {
@@ -492,6 +558,27 @@ export function useThreadStream({
              });
            },
          );
+          const nextTitle: string = update.title;
+          void queryClient.setQueriesData(
+            {
+              queryKey: INFINITE_THREADS_QUERY_KEY_PREFIX,
+              exact: false,
+            },
+            (oldData: InfiniteData<AgentThread[]> | undefined) =>
+              mapInfiniteThreadsCache(
+                oldData,
+                (t): AgentThread =>
+                  t.thread_id === threadIdRef.current
+                    ? {
+                        ...t,
+                        values: {
+                          ...t.values,
+                          title: nextTitle,
+                        },
+                      }
+                    : t,
+              ),
+          );
        }
      }
    },
@@ -546,6 +633,9 @@ export function useThreadStream({
          .filter((id): id is string => Boolean(id)),
      );
      void queryClient.invalidateQueries({ queryKey: ["threads", "search"] });
+      void queryClient.invalidateQueries({
+        queryKey: INFINITE_THREADS_QUERY_KEY_PREFIX,
+      });
      if (threadIdRef.current && !isMock) {
        void queryClient.invalidateQueries({
          queryKey: threadTokenUsageQueryKey(threadIdRef.current),
@@ -805,6 +895,9 @@ export function useThreadStream({
          },
        );
        void queryClient.invalidateQueries({ queryKey: ["threads", "search"] });
+        void queryClient.invalidateQueries({
+          queryKey: INFINITE_THREADS_QUERY_KEY_PREFIX,
+        });
      } catch (error) {
        setOptimisticMessages([]);
        setIsUploading(false);
@@ -1046,6 +1139,86 @@ export function useThreads(
  });
 }

+export const INFINITE_THREADS_PAGE_SIZE = 50;
+
+export const INFINITE_THREADS_QUERY_KEY_PREFIX = [
+  "threads",
+  "searchInfinite",
+] as const;
+
+type InfiniteThreadsParams = Omit<
+  Parameters<ThreadsClient["search"]>[0],
+  "limit" | "offset"
+>;
+
+export function getInfiniteThreadsNextPageParam(
+  lastPage: AgentThread[],
+  allPages: AgentThread[][],
+  pageSize: number = INFINITE_THREADS_PAGE_SIZE,
+): number | undefined {
+  if (lastPage.length < pageSize) {
+    return undefined;
+  }
+  return allPages.reduce((sum, page) => sum + page.length, 0);
+}
+
+export function mapInfiniteThreadsCache(
+  oldData: InfiniteData<AgentThread[]> | undefined,
+  mapper: (thread: AgentThread) => AgentThread,
+): InfiniteData<AgentThread[]> | undefined {
+  if (!oldData) {
+    return oldData;
+  }
+  return {
+    ...oldData,
+    pages: oldData.pages.map((page) => page.map(mapper)),
+  };
+}
+
+export function filterInfiniteThreadsCache(
+  oldData: InfiniteData<AgentThread[]> | undefined,
+  predicate: (thread: AgentThread) => boolean,
+): InfiniteData<AgentThread[]> | undefined {
+  if (!oldData) {
+    return oldData;
+  }
+  return {
+    ...oldData,
+    pages: oldData.pages.map((page) => page.filter(predicate)),
+  };
+}
+
+export function useInfiniteThreads(
+  params: InfiniteThreadsParams = {
+    sortBy: "updated_at",
+    sortOrder: "desc",
+    select: ["thread_id", "updated_at", "values", "metadata"],
+  },
+) {
+  const apiClient = getAPIClient();
+  return useInfiniteQuery<
+    AgentThread[],
+    Error,
+    InfiniteData<AgentThread[]>,
+    readonly unknown[],
+    number
+  >({
+    queryKey: [...INFINITE_THREADS_QUERY_KEY_PREFIX, params],
+    initialPageParam: 0,
+    queryFn: async ({ pageParam }) => {
+      const response = (await apiClient.threads.search<AgentThreadState>({
+        ...params,
+        limit: INFINITE_THREADS_PAGE_SIZE,
+        offset: pageParam,
+      })) as AgentThread[];
+      return response;
+    },
+    getNextPageParam: (lastPage, allPages) =>
+      getInfiniteThreadsNextPageParam(lastPage, allPages),
+    refetchOnWindowFocus: false,
+  });
+}
+
 export function useThreadRuns(
  threadId?: string,
  { enabled = true }: { enabled?: boolean } = {},
@@ -1129,9 +1302,21 @@ export function useDeleteThread() {
          return oldData.filter((t) => t.thread_id !== threadId);
        },
      );
+      queryClient.setQueriesData(
+        {
+          queryKey: INFINITE_THREADS_QUERY_KEY_PREFIX,
+          exact: false,
+        },
+        (oldData: InfiniteData<AgentThread[]> | undefined) =>
+          filterInfiniteThreadsCache(oldData, (t) => t.thread_id !== threadId),
+      );
    },
+
    onSettled() {
      void queryClient.invalidateQueries({ queryKey: ["threads", "search"] });
+      void queryClient.invalidateQueries({
+        queryKey: INFINITE_THREADS_QUERY_KEY_PREFIX,
+      });
    },
  });
 }
@@ -1172,6 +1357,24 @@ export function useRenameThread() {
          });
        },
      );
+      queryClient.setQueriesData(
+        {
+          queryKey: INFINITE_THREADS_QUERY_KEY_PREFIX,
+          exact: false,
+        },
+        (oldData: InfiniteData<AgentThread[]> | undefined) =>
+          mapInfiniteThreadsCache(oldData, (t) =>
+            t.thread_id === threadId
+              ? {
+                  ...t,
+                  values: {
+                    ...t.values,
+                    title,
+                  },
+                }
+              : t,
+          ),
+      );
    },
  });
 }