feat: initialize frontend API layer and endpoint definitions established base client for communication with the Quadtrix backend.

Defined standard request/response handlers for model interaction.

Author: Eamon2009

frontend/src/api/chat.ts

@@ -0,0 +1,24 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { apiFetch } from "./client";
+import type { ChatRequest, ChatResponse } from "../types";
+
+export function useSendMessage() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (payload: ChatRequest): Promise<ChatResponse> => {
+      try {
+        return await apiFetch<ChatResponse>("/api/chat", {
+          method: "POST",
+          body: JSON.stringify(payload),
+        });
+      } catch (error) {
+        throw error;
+      }
+    },
+    onSuccess: async (response) => {
+      await queryClient.invalidateQueries({ queryKey: ["sessions"] });
+      await queryClient.invalidateQueries({ queryKey: ["messages", response.session_id] });
+    },
+  });
+}

frontend/src/api/client.ts

@@ -0,0 +1,37 @@
+import { useSettingsStore } from "../store/settingsStore";
+import type { ApiError } from "../types";
+
+export class ApiClientError extends Error {
+  apiError: ApiError;
+
+  constructor(apiError: ApiError) {
+    super(apiError.message);
+    this.apiError = apiError;
+  }
+}
+
+export async function apiFetch<T>(path: string, init?: RequestInit): Promise<T> {
+  const baseUrl = useSettingsStore.getState().apiBaseUrl.replace(/\/$/, "");
+  const headers = new Headers(init?.headers);
+  headers.set("Content-Type", "application/json");
+  try {
+    const response = await fetch(`${baseUrl}${path}`, {
+      ...init,
+      headers,
+    });
+    if (!response.ok) {
+      const fallback: ApiError = { error: "request_failed", message: response.statusText, code: response.status };
+      const error = (await response.json().catch(() => fallback)) as ApiError;
+      throw new ApiClientError(error);
+    }
+    if (response.status === 204) {
+      return undefined as T;
+    }
+    return (await response.json()) as T;
+  } catch (error) {
+    if (error instanceof ApiClientError) {
+      throw error;
+    }
+    throw new ApiClientError({ error: "network_error", message: "Could not reach the API server", code: 0 });
+  }
+}

frontend/src/api/health.ts

@@ -0,0 +1,34 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { apiFetch } from "./client";
+import type { HealthResponse, ModelStats } from "../types";
+
+export function useHealth() {
+  return useQuery({
+    queryKey: ["health"],
+    queryFn: async (): Promise<HealthResponse> => {
+      try {
+        return await apiFetch<HealthResponse>("/api/health");
+      } catch (error) {
+        throw error;
+      }
+    },
+    refetchInterval: 30000,
+    retry: 1,
+  });
+}
+
+export function useStats() {
+  return useQuery({
+    queryKey: ["stats"],
+    queryFn: async (): Promise<ModelStats> => {
+      try {
+        return await apiFetch<ModelStats>("/api/stats");
+      } catch (error) {
+        throw error;
+      }
+    },
+    refetchInterval: 30000,
+    retry: 1,
+  });
+}

frontend/src/api/sessions.ts

@@ -0,0 +1,66 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+import { apiFetch } from "./client";
+import type { Message, Session } from "../types";
+
+export function useSessions() {
+  return useQuery({
+    queryKey: ["sessions"],
+    queryFn: async (): Promise<Session[]> => {
+      try {
+        return await apiFetch<Session[]>("/api/sessions");
+      } catch (error) {
+        throw error;
+      }
+    },
+  });
+}
+
+export function useCreateSession() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (title?: string): Promise<Session> => {
+      try {
+        return await apiFetch<Session>("/api/sessions", {
+          method: "POST",
+          body: JSON.stringify({ title }),
+        });
+      } catch (error) {
+        throw error;
+      }
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["sessions"] });
+    },
+  });
+}
+
+export function useDeleteSession() {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (sessionId: string): Promise<void> => {
+      try {
+        await apiFetch<void>(`/api/sessions/${sessionId}`, { method: "DELETE" });
+      } catch (error) {
+        throw error;
+      }
+    },
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey: ["sessions"] });
+    },
+  });
+}
+
+export function useSessionMessages(sessionId: string | null) {
+  return useQuery({
+    queryKey: ["messages", sessionId],
+    enabled: Boolean(sessionId),
+    queryFn: async (): Promise<Message[]> => {
+      try {
+        return await apiFetch<Message[]>(`/api/sessions/${sessionId}/messages`);
+      } catch (error) {
+        throw error;
+      }
+    },
+  });
+}