Almost working

client/src/App.tsx

@@ -11,6 +11,7 @@ import { Box, Button, Tooltip } from "@mui/material";
 import { BrowserRouter as Router, Route, Routes, useParams } from "react-router-dom";
 import useWebSocket, { ReadyState } from "react-use-websocket";
 import ConnectionStatus from "./ConnectionStatus";
+import { sessionsApi, LobbyCreateRequest } from "./api-client";
 
 console.log(`AI Voice Chat Build: ${process.env.REACT_APP_AI_VOICECHAT_BUILD}`);
 
@@ -125,41 +126,22 @@ const LobbyView: React.FC<LobbyProps> = (props: LobbyProps) => {
 
     const getLobby = async (lobbyName: string, session: Session) => {
       try {
-        const res = await fetch(`${base}/api/lobby/${session.id}`, {
-          method: "POST",
-          cache: "no-cache",
-          credentials: "same-origin",
-          headers: {
-            "Content-Type": "application/json",
+        const lobbyRequest: LobbyCreateRequest = {
+          type: "lobby_create",
+          data: {
+            name: lobbyName,
+            private: false,
           },
-          body: JSON.stringify({
-            type: "lobby_create",
-            data: {
-              name: lobbyName,
-              private: false,
-            },
-          }),
-        });
+        };
 
-        if (res.status >= 400) {
-          const error = `Unable to connect to AI Voice Chat server! Try refreshing your browser in a few seconds.`;
-          console.error(error);
-          setError(error);
-          return;
-        }
+        const response = await sessionsApi.createLobby(session.id, lobbyRequest);
 
-        const data = await res.json();
-        if (data.error) {
-          console.error(`Lobby - Server error: ${data.error}`);
-          setError(data.error);
-          return;
-        }
-        if (data.type !== "lobby_created") {
-          console.error(`Lobby - Unexpected response type: ${data.type}`);
+        if (response.type !== "lobby_created") {
+          console.error(`Lobby - Unexpected response type: ${response.type}`);
           setError(`Unexpected response from server`);
           return;
         }
-        const lobby: Lobby = data.data;
+        const lobby: Lobby = response.data;
         console.log(`Lobby - Joined lobby`, lobby);
         setLobby(lobby);
       } catch (err) {
@@ -300,33 +282,16 @@ const App = () => {
 
   const getSession = useCallback(async () => {
     try {
-      const res = await fetch(`${base}/api/session`, {
-        method: "GET",
-        cache: "no-cache",
-        credentials: "same-origin",
-        headers: {
-          "Content-Type": "application/json",
-        },
-      });
-
-      if (res.status >= 400) {
-        throw new Error(`HTTP ${res.status}: Unable to connect to AI Voice Chat server`);
-      }
-      
-      const data = await res.json();
-      if (data.error) {
-        throw new Error(`Server error: ${data.error}`);
-      }
-      
-      setSession(data);
+      const session = await sessionsApi.getCurrent();
+      setSession(session);
       setSessionRetryAttempt(0);
     } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
-      console.error('Failed to get session:', errorMessage);
+      const errorMessage = err instanceof Error ? err.message : "Unknown error occurred";
+      console.error("Failed to get session:", errorMessage);
       setError(errorMessage);
-      
+
       // Schedule retry after 5 seconds
-      setSessionRetryAttempt(prev => prev + 1);
+      setSessionRetryAttempt((prev) => prev + 1);
       setTimeout(() => {
         getSession(); // Retry
       }, 5000);
@@ -343,7 +308,7 @@ const App = () => {
   return (
     <Box>
       {!session && (
-        <ConnectionStatus 
+        <ConnectionStatus
           readyState={sessionRetryAttempt > 0 ? ReadyState.CLOSED : ReadyState.CONNECTING}
           reconnectAttempt={sessionRetryAttempt}
         />

client/src/GlobalContext.tsx

@@ -1,13 +1,9 @@
-type Lobby = {
-  id: string;
-  name: string;
-  private: boolean;
-};
+import { LobbyModel, SessionResponse } from "./api-client";
 
-type Session = {
-  id: string;
+// Re-export types from api-client for backwards compatibility
+export type Lobby = LobbyModel;
+
+// Extended Session type that allows name to be null initially (before user sets it)
+export type Session = Omit<SessionResponse, "name"> & {
   name: string | null;
-  lobbies: Lobby[];
 };
-
-export type { Session, Lobby };

client/src/api-client.ts

@@ -69,7 +69,11 @@ export class ApiClient {
   private defaultHeaders: Record<string, string>;
 
   constructor(baseURL?: string) {
-    this.baseURL = baseURL || process.env.REACT_APP_API_URL || "http://localhost:8001";
+    // Use the current window location instead of localhost, just like WebSocket connections
+    const defaultBaseURL =
+      typeof window !== "undefined" ? `${window.location.protocol}//${window.location.host}` : "http://localhost:8001";
+
+    this.baseURL = baseURL || process.env.REACT_APP_API_URL || defaultBaseURL;
     this.defaultHeaders = {};
   }