feat: enhance chat history loading with new hooks and UI components (#2338)

* Refactor API fetch calls to use a unified fetch function; enhance chat history loading with new hooks and UI components

- Replaced `fetchWithAuth` with a generic `fetch` function across various API modules for consistency.
- Updated `useThreadStream` and `useThreadHistory` hooks to manage chat history loading, including loading states and pagination.
- Introduced `LoadMoreHistoryIndicator` component for better user experience when loading more chat history.
- Enhanced message handling in `MessageList` to accommodate new loading states and history management.
- Added support for run messages in the thread context, improving the overall message handling logic.
- Updated translations for loading indicators in English and Chinese.

* Fix test assertions for run ordering in RunManager tests

- Updated assertions in `test_list_by_thread` to reflect correct ordering of runs.
- Modified `test_list_by_thread_is_stable_when_timestamps_tie` to ensure stable ordering when timestamps are tied.

frontend/src/components/workspace/input-box.tsx

@@ -55,7 +55,7 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
 } from "@/components/ui/dropdown-menu";
-import { fetchWithAuth } from "@/core/api/fetcher";
+import { fetch } from "@/core/api/fetcher";
 import { getBackendBaseURL } from "@/core/config";
 import { useI18n } from "@/core/i18n/hooks";
 import { useModels } from "@/core/models/hooks";
@@ -155,6 +155,7 @@ export function InputBox({
   const [followupsLoading, setFollowupsLoading] = useState(false);
   const lastGeneratedForAiIdRef = useRef<string | null>(null);
   const wasStreamingRef = useRef(false);
+  const messagesRef = useRef(thread.messages);
 
   const [confirmOpen, setConfirmOpen] = useState(false);
   const [pendingSuggestion, setPendingSuggestion] = useState<string | null>(
@@ -354,6 +355,10 @@ export function InputBox({
     followupsVisibilityChangeRef.current?.(showFollowups);
   }, [showFollowups]);
 
+  useEffect(() => {
+    messagesRef.current = thread.messages;
+  }, [thread.messages]);
+
   useEffect(() => {
     return () => followupsVisibilityChangeRef.current?.(false);
   }, []);
@@ -370,14 +375,16 @@ export function InputBox({
       return;
     }
 
-    const lastAi = [...thread.messages].reverse().find((m) => m.type === "ai");
+    const lastAi = [...messagesRef.current]
+      .reverse()
+      .find((m) => m.type === "ai");
     const lastAiId = lastAi?.id ?? null;
     if (!lastAiId || lastAiId === lastGeneratedForAiIdRef.current) {
       return;
     }
     lastGeneratedForAiIdRef.current = lastAiId;
 
-    const recent = thread.messages
+    const recent = messagesRef.current
       .filter((m) => m.type === "human" || m.type === "ai")
       .map((m) => {
         const role = m.type === "human" ? "user" : "assistant";
@@ -396,19 +403,16 @@ export function InputBox({
     setFollowupsLoading(true);
     setFollowups([]);
 
-    fetchWithAuth(
-      `${getBackendBaseURL()}/api/threads/${threadId}/suggestions`,
-      {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          messages: recent,
-          n: 3,
-          model_name: context.model_name ?? undefined,
-        }),
-        signal: controller.signal,
-      },
-    )
+    fetch(`${getBackendBaseURL()}/api/threads/${threadId}/suggestions`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        messages: recent,
+        n: 3,
+        model_name: context.model_name ?? undefined,
+      }),
+      signal: controller.signal,
+    })
       .then(async (res) => {
         if (!res.ok) {
           return { suggestions: [] as string[] };
@@ -430,7 +434,7 @@ export function InputBox({
       });
 
     return () => controller.abort();
-  }, [context.model_name, disabled, isMock, status, thread.messages, threadId]);
+  }, [context.model_name, disabled, isMock, status, threadId]);
 
   return (
     <div ref={promptRootRef} className="relative flex flex-col gap-4">

frontend/src/components/workspace/messages/message-list.tsx

@@ -1,9 +1,12 @@
 import type { BaseStream } from "@langchain/langgraph-sdk/react";
+import { ChevronUpIcon, Loader2Icon } from "lucide-react";
+import { useCallback, useEffect, useRef } from "react";
 
 import {
   Conversation,
   ConversationContent,
 } from "@/components/ai-elements/conversation";
+import { Button } from "@/components/ui/button";
 import { useI18n } from "@/core/i18n/hooks";
 import {
   extractContentFromMessage,
@@ -19,7 +22,6 @@ import { useRehypeSplitWordsIntoSpans } from "@/core/rehype";
 import type { Subtask } from "@/core/tasks";
 import { useUpdateSubtask } from "@/core/tasks/context";
 import type { AgentThreadState } from "@/core/threads";
-import { useThreadMessageEnrichment } from "@/core/threads/hooks";
 import { cn } from "@/lib/utils";
 
 import { ArtifactFileList } from "../artifacts/artifact-file-list";
@@ -35,24 +37,136 @@ import { SubtaskCard } from "./subtask-card";
 export const MESSAGE_LIST_DEFAULT_PADDING_BOTTOM = 160;
 export const MESSAGE_LIST_FOLLOWUPS_EXTRA_PADDING_BOTTOM = 80;
 
+const LOAD_MORE_HISTORY_THROTTLE_MS = 1200;
+
+function LoadMoreHistoryIndicator({
+  isLoading,
+  hasMore,
+  loadMore,
+}: {
+  isLoading?: boolean;
+  hasMore?: boolean;
+  loadMore?: () => void;
+}) {
+  const { t } = useI18n();
+  const sentinelRef = useRef<HTMLDivElement | null>(null);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const lastLoadRef = useRef(0);
+
+  const throttledLoadMore = useCallback(() => {
+    if (!hasMore || isLoading) {
+      return;
+    }
+
+    const now = Date.now();
+    const remaining =
+      LOAD_MORE_HISTORY_THROTTLE_MS - (now - lastLoadRef.current);
+
+    if (remaining <= 0) {
+      lastLoadRef.current = now;
+      loadMore?.();
+      return;
+    }
+
+    if (timeoutRef.current) {
+      return;
+    }
+
+    timeoutRef.current = setTimeout(() => {
+      timeoutRef.current = null;
+      if (!hasMore || isLoading) {
+        return;
+      }
+      lastLoadRef.current = Date.now();
+      loadMore?.();
+    }, remaining);
+  }, [hasMore, isLoading, loadMore]);
+
+  useEffect(() => {
+    const element = sentinelRef.current;
+    if (!element || !hasMore) {
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry?.isIntersecting) {
+          throttledLoadMore();
+        }
+      },
+      {
+        rootMargin: "120px 0px 0px 0px",
+      },
+    );
+
+    observer.observe(element);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [hasMore, throttledLoadMore]);
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  if (!hasMore && !isLoading) {
+    return null;
+  }
+
+  return (
+    <div ref={sentinelRef} className="flex w-full justify-center">
+      <Button
+        type="button"
+        variant="ghost"
+        size="sm"
+        className="text-muted-foreground hover:text-foreground rounded-full px-3"
+        disabled={(isLoading ?? false) || !hasMore}
+        onClick={throttledLoadMore}
+      >
+        {isLoading ? (
+          <>
+            <Loader2Icon className="mr-2 size-4 animate-spin" />
+            {t.common.loading}
+          </>
+        ) : (
+          <>
+            <ChevronUpIcon className="mr-2 size-4" />
+            {t.common.loadMore}
+          </>
+        )}
+      </Button>
+    </div>
+  );
+}
+
 export function MessageList({
   className,
   threadId,
   thread,
   paddingBottom = MESSAGE_LIST_DEFAULT_PADDING_BOTTOM,
   tokenUsageEnabled = false,
+  hasMoreHistory,
+  loadMoreHistory,
+  isHistoryLoading,
 }: {
   className?: string;
   threadId: string;
   thread: BaseStream<AgentThreadState>;
   paddingBottom?: number;
   tokenUsageEnabled?: boolean;
+  hasMoreHistory?: boolean;
+  loadMoreHistory?: () => void;
+  isHistoryLoading?: boolean;
 }) {
   const { t } = useI18n();
   const rehypePlugins = useRehypeSplitWordsIntoSpans(thread.isLoading);
   const updateSubtask = useUpdateSubtask();
   const messages = thread.messages;
-  const { data: enrichment } = useThreadMessageEnrichment(threadId);
 
   if (thread.isThreadLoading && messages.length === 0) {
     return <MessageListSkeleton />;
@@ -61,11 +175,15 @@ export function MessageList({
     <Conversation
       className={cn("flex size-full flex-col justify-center", className)}
     >
-      <ConversationContent className="mx-auto w-full max-w-(--container-width-md) gap-8 pt-12">
+      <ConversationContent className="mx-auto w-full max-w-(--container-width-md) gap-8 pt-8">
+        <LoadMoreHistoryIndicator
+          isLoading={isHistoryLoading}
+          hasMore={hasMoreHistory}
+          loadMore={loadMoreHistory}
+        />
         {groupMessages(messages, (group) => {
           if (group.type === "human" || group.type === "assistant") {
             return group.messages.map((msg) => {
-              const entry = msg.id ? enrichment?.get(msg.id) : undefined;
               return (
                 <MessageListItem
                   key={`${group.id}/${msg.id}`}
@@ -73,8 +191,6 @@ export function MessageList({
                   message={msg}
                   isLoading={thread.isLoading}
                   tokenUsageEnabled={tokenUsageEnabled}
-                  runId={entry?.run_id}
-                  feedback={entry?.feedback}
                 />
               );
             });

frontend/src/components/workspace/settings/account-settings-page.tsx

@@ -5,7 +5,7 @@ import { useState } from "react";
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { fetchWithAuth, getCsrfHeaders } from "@/core/api/fetcher";
+import { fetch, getCsrfHeaders } from "@/core/api/fetcher";
 import { useAuth } from "@/core/auth/AuthProvider";
 import { parseAuthError } from "@/core/auth/types";
 
@@ -36,7 +36,7 @@ export function AccountSettingsPage() {
 
     setLoading(true);
     try {
-      const res = await fetchWithAuth("/api/v1/auth/change-password", {
+      const res = await fetch("/api/v1/auth/change-password", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",