Update frontend/src/App.tsx

frontend/src/App.tsx

@@ -1,37 +1,36 @@
-import { useEffect } from "react";
-
-import {
-  ChainlitAPI,
-  sessionState,
-  useChatSession,
-} from "@chainlit/react-client";
+import { useEffect} from "react";
+import { useState } from "react";
+import { ChainlitAPI, sessionState, useChatSession } from "@chainlit/react-client";
 import { Playground } from "./components/playground";
 import { useRecoilValue } from "recoil";
 
-const CHAINLIT_SERVER = "http://localhost:8000";
+
+const CHAINLIT_SERVER ="https://langroid-custom-front-end.hf.space";
+
+
 const userEnv = {};
 
-const apiClient = new ChainlitAPI(CHAINLIT_SERVER, "app");
+const apiClient = new ChainlitAPI(CHAINLIT_SERVER);
+
 
 function App() {
-  const { connect } = useChatSession();
-  const session = useRecoilValue(sessionState);
-  useEffect(() => {
-    if (session?.socket.connected) {
-      return;
-    }
-    fetch(apiClient.buildEndpoint("/custom-auth"))
-      .then((res) => {
-        return res.json();
-      })
-      .then((data) => {
-        connect({
-          client: apiClient,
-          userEnv,
-          accessToken: `Bearer: ${data.token}`,
-        });
-      });
-  }, [connect]);
+    const { connect } = useChatSession();
+    const session = useRecoilValue(sessionState);
+
+    useEffect(() => {
+        if (session?.socket.connected) {
+            return
+        }
+        fetch(apiClient
+            .buildEndpoint("/custom-auth")).then((res) => {
+                return res.json();
+            }
+        ).then((data) => {
+                connect({ client: apiClient, userEnv, accessToken: `Bearer: ${data.token}` });
+            }
+        )
+    }, []);
+
 
   return (
     <>