feat: support dynamic loading models

frontend/src/core/models/api.ts

@@ -0,0 +1,9 @@
+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[] };
+  return models;
+}

frontend/src/core/models/hooks.ts

@@ -0,0 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { loadModels } from "./api";
+
+export function useModels() {
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["models"],
+    queryFn: () => loadModels(),
+  });
+  return { models: data ?? [], isLoading, error };
+}

frontend/src/core/models/index.ts

@@ -0,0 +1,2 @@
+export * from "./api";
+export * from "./types";

frontend/src/core/models/types.ts

@@ -0,0 +1,7 @@
+export interface Model {
+  id: string;
+  name: string;
+  display_name: string;
+  description?: string | null;
+  supports_thinking?: boolean;
+}