Update frontend/src/App.tsx

frontend/src/App.tsx

@@ -1,126 +1,45 @@
 import { useEffect } from "react";
-import { useState } from "react";
-import { ChainlitAPI, sessionState, useChatSession } from "@chainlit/react-client";
+
+import {
+  ChainlitAPI,
+  sessionState,
+  useChatSession,
+} from "@chainlit/react-client";
 import { Playground } from "./components/playground";
 import { useRecoilValue } from "recoil";
 
-
-import Header from "@/components/header";
-import Banner from "@/components/banner";
-import AlertComponent from "@/components/alertComponent";
-
 const CHAINLIT_SERVER = "http://localhost:8000";
 const userEnv = {};
 
-const apiClient = new ChainlitAPI(CHAINLIT_SERVER);
+const apiClient = new ChainlitAPI(CHAINLIT_SERVER, "app");
 
-interface Amounts {
-    [key: string]: number;
-}
 function App() {
-    const { connect } = useChatSession();
-    const session = useRecoilValue(sessionState);
-
-    useEffect(() => {
-        if (session?.socket.connected) {
-            return;
-        }
-        fetch(apiClient.buildEndpoint('/custom-auth'))
-            .then((res) => res.json())
-            .then((data) => {
-                connect({ client: apiClient, userEnv, accessToken: `Bearer: ${data.token}` });
-            });
-    }, [session, connect]);
-
-    // Initialize state to manage multiple amounts
-    const [amounts, setAmounts] = useState<Amounts>({});
-
-    // Function to update individual amount
-    const setAmount = (id: string, value: number) => {
-        setAmounts((prevAmounts) => ({
-            ...prevAmounts,
-            [id]: value,
-        }));
-
-
-
-
-    };
-
-
-
-    return (
-        <>
-
-
-            <Header />
-            <Banner />
-            <div className="relative" style={{ marginTop: '40px' }}>
-                <div className="absolute left-20">
-                    <div className="flex flex-col">
-                        <header className="text-2xl font-bold leading-8 text-black pl-16">
-                            <h1>Your Personalised Package:</h1>
-                        </header>
-                        <AlertComponent
-                            logoUrl="https://cdn.builder.io/api/v1/image/assets/TEMP/be051a227710fa99e9efda725e8d0dc36c64fad96e941813d07d6250884eadb2?apiKey=b1f64df9aada44c6ba1728b031344f7b&"
-                            alertText="PUBLIC & PRODUCT LIABILITY"
-                            status="?"
-                            amount={amounts['publicLiability'] || 0}
-                            setAmount={(value) => setAmount('publicLiability', value)}
-                        />
-                        <AlertComponent
-                            logoUrl="https://cdn.builder.io/api/v1/image/assets/TEMP/fb7d406f3707aefeb694b288abea645b643e28df498e96faa3a88f8ae3b4f096?apiKey=b1f64df9aada44c6ba1728b031344f7b&"
-                            alertText="FIRE AND ACCIDENTAL DAMAGE"
-                            status="?"
-                            amount={amounts['fireDamage'] || 0}
-                            setAmount={(value) => setAmount('fireDamage', value)}
-                        />
-                        <AlertComponent
-                            logoUrl="https://cdn.builder.io/api/v1/image/assets/TEMP/af6837406a2497c1255b86413c1138e2c55b3fc5c643e05f560bafd57e9bd20b?apiKey=b1f64df9aada44c6ba1728b031344f7b&"
-                            alertText="GLASS"
-                            status="?"
-                            amount={amounts['glass'] || 0}
-                            setAmount={(value) => setAmount('glass', value)}
-                        />
-                        <AlertComponent
-                            logoUrl="https://cdn.builder.io/api/v1/image/assets/TEMP/a7ffd8559e286d4d85db00334a22a1a956d9835240ad8d97e82af98af62a149e?apiKey=b1f64df9aada44c6ba1728b031344f7b&"
-                            alertText="PERSONAL EQUIPMENT"
-                            status="?"
-                            amount={amounts['personalEquipment'] || 0}
-                            setAmount={(value) => setAmount('personalEquipment', value)}
-                        />
-                        <AlertComponent
-                            logoUrl="https://cdn.builder.io/api/v1/image/assets/TEMP/89dc158bec91bc71c7b35c5b9752238d239eb70b38f3256e62653dee21b33b55?apiKey=b1f64df9aada44c6ba1728b031344f7b&"
-                            alertText="THEFT"
-                            status="?"
-                            amount={amounts['theft'] || 0}
-                            setAmount={(value) => setAmount('theft', value)}
-                        />
-                    </div>
-
-                    <button className="justify-center items-center px-16 py-4 mt-3 ml-16 max-w-full text-base font-bold text-center text-lime-900 whitespace-nowrap rounded border border-solid border-[color:var(--Color-Functional-Primary--Dark,#558000)] w-[522px] max-md:px-5">
-                        Go to quote
-                    </button>
-
-                    <button className="flex gap-2.5 justify-center px-5 py-2.5 mt-60 ml-16 text-base font-bold text-center text-lime-700 whitespace-nowrap bg-white rounded border border-solid border-[color:var(--Color-Functional-Primary--Dark,#558000)] max-md:mt-10 max-md:ml-2.5 items-center">
-                        <img loading="lazy" src="https://cdn.builder.io/api/v1/image/assets/TEMP/91c9b9f5d1f2a509afd2c46fab93912852f90f3b085e3f35ce1e33c252fedf1b?apiKey=b1f64df9aada44c6ba1728b031344f7b&" alt="" className="w-4 aspect-square" />
-                        Back to packages
-                    </button>
-
-
-            </div>
-            </div>
-
-
-            <div className="playground-container">
-                <Playground />
-            </div>
-
-
-
-
-        </>
-    );
+  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]);
+
+  return (
+    <>
+      <div>
+        <Playground />
+      </div>
+    </>
+  );
 }
 
 export default App;