frontend/src/App.tsx

import { useEffect} from "react";
import { ChainlitAPI, sessionState, useChatSession } from "@chainlit/react-client";
import { Playground } from "./components/playground";
import { useRecoilValue } from "recoil";


const CHAINLIT_SERVER ="https://bentebbutt-langroid-custom-front-end.hf.space";


const userEnv = {};

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}` });
            }
        )
    }, []);


  return (
    <>
      <div>
        <Playground />
      </div>
    </>
  );
}

export default App;