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-chainlit-single-container.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;