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/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";
 }