Hugging Face's logo

Spaces:
hamza82
/
docker
Sleeping

App Files Community
docker
File size: 5,596 Bytes 
1201570
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
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>









        </>
    );
}

export default App;