refactor(frontend): optimize network queries and improve code readability (#919)

* refactor(frontend): optimize network queries and improve code readability
- useThreadStream: Add useStream with fetchStateHistory: {limit: 1}
- useThreads: Add select fields and disable refetchOnWindowFocus
- useModels: Disable refetchOnWindowFocus
- ChatPage and titleOfThread: Improve thread title logic
- loadModels: Refactor code for better readability

* fix: address the review comments of Copilot

* Apply suggestions from code review

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

---------

Co-authored-by: Willem Jiang <willem.jiang@gmail.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

frontend/src/app/workspace/chats/[thread_id]/page.tsx

@@ -30,12 +30,11 @@ import { Welcome } from "@/components/workspace/welcome";
 import { useI18n } from "@/core/i18n/hooks";
 import { useNotification } from "@/core/notification/hooks";
 import { useLocalSettings } from "@/core/settings";
-import { type AgentThread, type AgentThreadState } from "@/core/threads";
+import { type AgentThreadState } from "@/core/threads";
 import { useSubmitThread, useThreadStream } from "@/core/threads/hooks";
 import {
   pathOfThread,
   textOfMessage,
-  titleOfThread,
 } from "@/core/threads/utils";
 import { uuid } from "@/core/utils/uuid";
 import { env } from "@/env";
@@ -102,7 +101,7 @@ export default function ChatPage() {
       setFinalState(state);
       if (document.hidden || !document.hasFocus()) {
         let body = "Conversation finished";
-        const lastMessage = state.messages[state.messages.length - 1];
+        const lastMessage = state.messages.at(-1);
         if (lastMessage) {
           const textContent = textOfMessage(lastMessage);
           if (textContent) {
@@ -123,33 +122,20 @@ export default function ChatPage() {
     if (thread.isLoading) setFinalState(null);
   }, [thread.isLoading]);
 
-  const title = useMemo(() => {
-    let result = isNewThread
-      ? ""
-      : titleOfThread(thread as unknown as AgentThread);
-    if (result === "Untitled") {
-      result = "";
-    }
-    return result;
-  }, [thread, isNewThread]);
-
+  const title = thread.values?.title ?? "Untitled";
   useEffect(() => {
     const pageTitle = isNewThread
       ? t.pages.newChat
-      : thread.values?.title && thread.values.title !== "Untitled"
-        ? thread.values.title
-        : t.pages.untitled;
-    if (thread.isThreadLoading) {
-      document.title = `Loading... - ${t.pages.appName}`;
-    } else {
-      document.title = `${pageTitle} - ${t.pages.appName}`;
-    }
+      : thread.isThreadLoading
+        ? "Loading..."
+        : title === "Untitled" ? t.pages.untitled : title;
+    document.title = `${pageTitle} - ${t.pages.appName}`;
   }, [
     isNewThread,
     t.pages.newChat,
     t.pages.untitled,
     t.pages.appName,
-    thread.values.title,
+    title,
     thread.isThreadLoading,
   ]);
 

frontend/src/core/models/api.ts

@@ -3,7 +3,7 @@ import { getBackendBaseURL } from "../config";
 import type { Model } from "./types";
 
 export async function loadModels() {
-  const res = fetch(`${getBackendBaseURL()}/api/models`);
-  const { models } = (await (await res).json()) as { models: Model[] };
+  const res = await fetch(`${getBackendBaseURL()}/api/models`);
+  const { models } = (await res.json()) as { models: Model[] };
   return models;
 }

frontend/src/core/models/hooks.ts

@@ -7,6 +7,7 @@ export function useModels({ enabled = true }: { enabled?: boolean } = {}) {
     queryKey: ["models"],
     queryFn: () => loadModels(),
     enabled,
+    refetchOnWindowFocus: false,
   });
   return { models: data ?? [], isLoading, error };
 }

frontend/src/core/threads/hooks.ts

@@ -34,7 +34,7 @@ export function useThreadStream({
     assistantId: "lead_agent",
     threadId: isNewThread ? undefined : threadId,
     reconnectOnMount: true,
-    fetchStateHistory: true,
+    fetchStateHistory: { limit: 1 },
     onCustomEvent(event: unknown) {
       console.info(event);
       if (
@@ -192,6 +192,7 @@ export function useThreads(
     limit: 50,
     sortBy: "updated_at",
     sortOrder: "desc",
+    select: ["thread_id", "updated_at", "values"],
   },
 ) {
   const apiClient = getAPIClient();
@@ -201,6 +202,7 @@ export function useThreads(
       const response = await apiClient.threads.search<AgentThreadState>(params);
       return response as AgentThread[];
     },
+    refetchOnWindowFocus: false,
   });
 }
 

frontend/src/core/threads/utils.ts

@@ -17,8 +17,5 @@ export function textOfMessage(message: BaseMessage) {
 }
 
 export function titleOfThread(thread: AgentThread) {
-  if (thread.values && "title" in thread.values) {
-    return thread.values.title;
-  }
-  return "Untitled";
+  return thread.values?.title ?? "Untitled";
 }