Update frontend/src/App.tsx

frontend/src/App.tsx

@@ -1,126 +1,126 @@
-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";
-
-
-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);
-
-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>
-
-
-
-
-        </>
-    );
-}
-
+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";
+
+
+import Header from "@/components/header";
+import Banner from "@/components/banner";
+import AlertComponent from "@/components/alertComponent";
+
+const CHAINLIT_SERVER = "/custom-auth";
+const userEnv = {};
+
+const apiClient = new ChainlitAPI(CHAINLIT_SERVER);
+
+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>
+
+
+
+
+        </>
+    );
+}
+
 export default App;