add dist into static

Dockerfile

@@ -1,10 +1,3 @@
-FROM node:18 AS frontend-build
-WORKDIR /app/frontend
-COPY ./frontend/package*.json ./
-RUN npm install
-COPY ./frontend .
-RUN npm run build
-
 # Use an official Python runtime as a base image
 FROM python:3.9-slim
 
@@ -15,8 +8,6 @@ WORKDIR /app
 COPY . /app
 
 
-# Copy the built frontend files to a directory named 'static' for FastAPI to serve
-COPY --from=frontend-build /app/frontend/dist /app/static
 # Install any needed packages specified in requirements.txt
 # COPY requirements.txt /app/
 # RUN pip install --no-cache-dir -r requirements.txt

static/assets/index-0b901915.css

@@ -0,0 +1 @@
+*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}:root{--background: 0 0% 100%;--foreground: 222.2 84% 4.9%;--card: 0 0% 100%;--card-foreground: 222.2 84% 4.9%;--popover: 0 0% 100%;--popover-foreground: 222.2 84% 4.9%;--primary: 222.2 47.4% 11.2%;--primary-foreground: 210 40% 98%;--secondary: 210 40% 96.1%;--secondary-foreground: 222.2 47.4% 11.2%;--muted: 210 40% 96.1%;--muted-foreground: 215.4 16.3% 46.9%;--accent: 210 40% 96.1%;--accent-foreground: 222.2 47.4% 11.2%;--destructive: 0 84.2% 60.2%;--destructive-foreground: 210 40% 98%;--border: 214.3 31.8% 91.4%;--input: 214.3 31.8% 91.4%;--ring: 222.2 84% 4.9%;--radius: .5rem}*{border-color:hsl(var(--border))}body{background-color:hsl(var(--background));color:hsl(var(--foreground))}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%;margin-right:auto;margin-left:auto;padding-right:2rem;padding-left:2rem}@media (min-width: 1280px){.container{max-width:1280px}}.absolute{position:absolute}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.left-20{left:5rem}.my-auto{margin-top:auto;margin-bottom:auto}.mb-2{margin-bottom:.5rem}.ml-16{margin-left:4rem}.ml-48{margin-left:12rem}.mt-10{margin-top:2.5rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-60{margin-top:15rem}.flex{display:flex}.inline-flex{display:inline-flex}.aspect-\[2\.78\]{aspect-ratio:2.78}.aspect-square{aspect-ratio:1 / 1}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-full{height:100%}.min-h-\[200px\]{min-height:200px}.w-10{width:2.5rem}.w-20{width:5rem}.w-4{width:1rem}.w-8{width:2rem}.w-\[150px\]{width:150px}.w-\[522px\]{width:522px}.w-full{width:100%}.max-w-full{max-width:100%}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:calc(.5rem * var(--tw-space-x-reverse));margin-left:calc(.5rem * calc(1 - var(--tw-space-x-reverse)))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.self-center{align-self:center}.self-stretch{align-self:stretch}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-\[127\.778px\]{border-radius:127.778px}.rounded-lg{border-radius:var(--radius)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.border{border-width:1px}.border-\[0\.5px\]{border-width:.5px}.border-\[0\.639px\]{border-width:.639px}.border-b{border-bottom-width:1px}.border-b-\[0\.5px\]{border-bottom-width:.5px}.border-t{border-top-width:1px}.border-solid{border-style:solid}.border-\[color\:var\(--Color-Functional-Primary--Dark\,\#558000\)\]{border-color:var(--Color-Functional-Primary--Dark,#558000)}.border-black{--tw-border-opacity: 1;border-color:rgb(0 0 0 / var(--tw-border-opacity))}.border-gray-500{--tw-border-opacity: 1;border-color:rgb(107 114 128 / var(--tw-border-opacity))}.border-input{border-color:hsl(var(--input))}.border-red-700{--tw-border-opacity: 1;border-color:rgb(185 28 28 / var(--tw-border-opacity))}.border-b-black{--tw-border-opacity: 1;border-bottom-color:rgb(0 0 0 / var(--tw-border-opacity))}.bg-background{background-color:hsl(var(--background))}.bg-destructive{background-color:hsl(var(--destructive))}.bg-gray-100{--tw-bg-opacity: 1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.bg-primary{background-color:hsl(var(--primary))}.bg-secondary{background-color:hsl(var(--secondary))}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.object-cover{-o-object-fit:cover;object-fit:cover}.p-2{padding:.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-16{padding-left:4rem;padding-right:4rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-12{padding-top:3rem;padding-bottom:3rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pl-16{padding-left:4rem}.pl-3{padding-left:.75rem}.pr-20{padding-right:5rem}.pr-3{padding-right:.75rem}.text-center{text-align:center}.text-right{text-align:right}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.uppercase{text-transform:uppercase}.leading-10{line-height:2.5rem}.leading-6{line-height:1.5rem}.leading-8{line-height:2rem}.leading-\[150\%\]{line-height:150%}.leading-\[92\%\]{line-height:92%}.text-black{--tw-text-opacity: 1;color:rgb(0 0 0 / var(--tw-text-opacity))}.text-destructive-foreground{color:hsl(var(--destructive-foreground))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity))}.text-green-500{--tw-text-opacity: 1;color:rgb(34 197 94 / var(--tw-text-opacity))}.text-lime-700{--tw-text-opacity: 1;color:rgb(77 124 15 / var(--tw-text-opacity))}.text-lime-900{--tw-text-opacity: 1;color:rgb(54 83 20 / var(--tw-text-opacity))}.text-primary{color:hsl(var(--primary))}.text-primary-foreground{color:hsl(var(--primary-foreground))}.text-red-700{--tw-text-opacity: 1;color:rgb(185 28 28 / var(--tw-text-opacity))}.text-secondary-foreground{color:hsl(var(--secondary-foreground))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.underline-offset-4{text-underline-offset:4px}.outline{outline-style:solid}.ring-offset-background{--tw-ring-offset-color: hsl(var(--background))}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}@keyframes enter{0%{opacity:var(--tw-enter-opacity, 1);transform:translate3d(var(--tw-enter-translate-x, 0),var(--tw-enter-translate-y, 0),0) scale3d(var(--tw-enter-scale, 1),var(--tw-enter-scale, 1),var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity, 1);transform:translate3d(var(--tw-exit-translate-x, 0),var(--tw-exit-translate-y, 0),0) scale3d(var(--tw-exit-scale, 1),var(--tw-exit-scale, 1),var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))}}.playground-container{max-height:750px;min-height:750px;min-width:1000px;max-width:1000px;overflow-y:auto;position:fixed;bottom:125px;right:500px}.file\:border-0::file-selector-button{border-width:0px}.file\:bg-transparent::file-selector-button{background-color:transparent}.file\:text-sm::file-selector-button{font-size:.875rem;line-height:1.25rem}.file\:font-medium::file-selector-button{font-weight:500}.placeholder\:text-muted-foreground::-moz-placeholder{color:hsl(var(--muted-foreground))}.placeholder\:text-muted-foreground::placeholder{color:hsl(var(--muted-foreground))}.hover\:bg-accent:hover{background-color:hsl(var(--accent))}.hover\:bg-destructive\/90:hover{background-color:hsl(var(--destructive) / .9)}.hover\:bg-primary\/90:hover{background-color:hsl(var(--primary) / .9)}.hover\:bg-secondary\/80:hover{background-color:hsl(var(--secondary) / .8)}.hover\:text-accent-foreground:hover{color:hsl(var(--accent-foreground))}.hover\:underline:hover{text-decoration-line:underline}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus-visible\:ring-ring:focus-visible{--tw-ring-color: hsl(var(--ring))}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width: 2px}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}:is(.dark .dark\:bg-gray-800){--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}:is(.dark .dark\:bg-gray-900){--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity))}:is(.dark .dark\:text-white){--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}@media not all and (min-width: 768px){.max-md\:ml-2{margin-left:.5rem}.max-md\:ml-2\.5{margin-left:.625rem}.max-md\:mt-10{margin-top:2.5rem}.max-md\:px-5{padding-left:1.25rem;padding-right:1.25rem}}@media (min-width: 640px){.sm\:ml-2{margin-left:.5rem}.sm\:ml-2\.5{margin-left:.625rem}.sm\:max-w-full{max-width:100%}.sm\:px-5{padding-left:1.25rem;padding-right:1.25rem}}@media (min-width: 768px){.md\:flex-wrap{flex-wrap:wrap}.md\:px-5{padding-left:1.25rem;padding-right:1.25rem}}

static/index-ex.h

@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Chat Interface</title>
+    <script>
+        // Function to handle sending messages and receiving responses
+        async function sendMessage() {
+            const inputElement = document.getElementById('messageInput');
+            const messagesContainer = document.getElementById('messages');
+            const message = inputElement.value.trim();
+
+            // Prevent sending empty messages
+            if (!message) return;
+
+            // Display the user's message
+            displayMessage(`You: ${message}`, 'user');
+
+            // Assuming the same '/custom-auth' endpoint is used for messages
+            try {
+                const response = await fetch('/custom-auth', {
+                    method: 'POST', // Assuming you adjust your backend to accept POST for chat messages
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({ message }),
+                });
+                const data = await response.json();
+
+                // Display the received response
+                displayMessage(`Server: ${data.response}`, 'server'); // Adjust 'data.response' based on your actual response structure
+            } catch (error) {
+                console.error('Error:', error);
+                displayMessage('Error sending message.', 'error');
+            }
+
+            // Clear the input field
+            inputElement.value = '';
+        }
+
+        // Function to display messages
+        function displayMessage(text, className) {
+            const messageElement = document.createElement('p');
+            messageElement.textContent = text;
+            messageElement.className = className;
+            document.getElementById('messages').appendChild(messageElement);
+        }
+
+        // Attach event listener to input field for the Enter key
+        document.addEventListener('DOMContentLoaded', () => {
+            const inputElement = document.getElementById('messageInput');
+            inputElement.addEventListener('keydown', (event) => {
+                if (event.key === 'Enter') {
+                    sendMessage();
+                    event.preventDefault(); // Prevent the default action to stop form submission
+                }
+            });
+        });
+    </script>
+    <style>
+        .user { color: blue; }
+        .server { color: green; }
+        .error { color: red; }
+    </style>
+</head>
+<body>
+    <h1>Chat with Server</h1>
+    <div id="messages" style="height: 300px; overflow-y: auto; border: 1px solid #ccc; padding: 10px; margin-bottom: 10px;"></div>
+    <input type="text" id="messageInput" placeholder="Type your message here and press Enter">
+</body>
+</html>
+
+
+
+
+<!-- ################################################################################################## -->
+<!-- <!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fetch API Example</title>
+</head>
+<body>
+    <h1>FastAPI Data Fetch Example</h1>
+    <button id="fetchApi">Fetch API Message</button>
+    <button id="fetchCustomAuth">Fetch Custom Auth Token</button>
+    <p id="apiResponse"></p>
+    <p id="authResponse"></p>
+
+    <script>
+        document.getElementById('fetchApi').onclick = function() {
+            fetch('/api')
+                .then(response => response.json())
+                .then(data => {
+                    document.getElementById('apiResponse').textContent = 'API Response: ' + data.message;
+                })
+                .catch(error => console.error('Error fetching API data:', error));
+        };
+
+        document.getElementById('fetchCustomAuth').onclick = function() {
+            fetch('/custom-auth')
+                .then(response => response.json())
+                .then(data => {
+                    document.getElementById('authResponse').textContent = 'Custom Auth Token: ' + data.token;
+                })
+                .catch(error => console.error('Error fetching custom auth token:', error));
+        };
+    </script>
+</body>
+</html> -->
+
+<!-- ############################################################################################################################# -->
+
+<!-- <!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FastAPI & Chainlit Integration</title>
+    <script>
+        // Function to call the custom-auth API and display the token
+        async function callCustomAuthApi() {
+            try {
+                const response = await fetch('/api');
+                const data = await response.json();
+                document.getElementById('apiResponse').innerText = 'Token: ' + data.token;
+            } catch (error) {
+                console.error('Error:', error);
+                document.getElementById('apiResponse').innerText = 'Failed to fetch token.';
+            }
+        }
+    </script>
+</head>
+<body>
+    <h1>FastAPI & Chainlit Integration</h1>
+    <button onclick="callCustomAuthApi()">Get Auth Token</button>
+    <p id="apiResponse"></p>
+</body>
+</html>
+ -->

static/index.html

@@ -1,141 +1,17 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Chat Interface</title>
-    <script>
-        // Function to handle sending messages and receiving responses
-        async function sendMessage() {
-            const inputElement = document.getElementById('messageInput');
-            const messagesContainer = document.getElementById('messages');
-            const message = inputElement.value.trim();
-
-            // Prevent sending empty messages
-            if (!message) return;
-
-            // Display the user's message
-            displayMessage(`You: ${message}`, 'user');
-
-            // Assuming the same '/custom-auth' endpoint is used for messages
-            try {
-                const response = await fetch('/custom-auth', {
-                    method: 'POST', // Assuming you adjust your backend to accept POST for chat messages
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({ message }),
-                });
-                const data = await response.json();
-
-                // Display the received response
-                displayMessage(`Server: ${data.response}`, 'server'); // Adjust 'data.response' based on your actual response structure
-            } catch (error) {
-                console.error('Error:', error);
-                displayMessage('Error sending message.', 'error');
-            }
-
-            // Clear the input field
-            inputElement.value = '';
-        }
-
-        // Function to display messages
-        function displayMessage(text, className) {
-            const messageElement = document.createElement('p');
-            messageElement.textContent = text;
-            messageElement.className = className;
-            document.getElementById('messages').appendChild(messageElement);
-        }
-
-        // Attach event listener to input field for the Enter key
-        document.addEventListener('DOMContentLoaded', () => {
-            const inputElement = document.getElementById('messageInput');
-            inputElement.addEventListener('keydown', (event) => {
-                if (event.key === 'Enter') {
-                    sendMessage();
-                    event.preventDefault(); // Prevent the default action to stop form submission
-                }
-            });
-        });
-    </script>
-    <style>
-        .user { color: blue; }
-        .server { color: green; }
-        .error { color: red; }
-    </style>
-</head>
-<body>
-    <h1>Chat with Server</h1>
-    <div id="messages" style="height: 300px; overflow-y: auto; border: 1px solid #ccc; padding: 10px; margin-bottom: 10px;"></div>
-    <input type="text" id="messageInput" placeholder="Type your message here and press Enter">
-</body>
-</html>
-
-
-
-
-<!-- ################################################################################################## -->
-<!-- <!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Fetch API Example</title>
-</head>
-<body>
-    <h1>FastAPI Data Fetch Example</h1>
-    <button id="fetchApi">Fetch API Message</button>
-    <button id="fetchCustomAuth">Fetch Custom Auth Token</button>
-    <p id="apiResponse"></p>
-    <p id="authResponse"></p>
-
-    <script>
-        document.getElementById('fetchApi').onclick = function() {
-            fetch('/api')
-                .then(response => response.json())
-                .then(data => {
-                    document.getElementById('apiResponse').textContent = 'API Response: ' + data.message;
-                })
-                .catch(error => console.error('Error fetching API data:', error));
-        };
-
-        document.getElementById('fetchCustomAuth').onclick = function() {
-            fetch('/custom-auth')
-                .then(response => response.json())
-                .then(data => {
-                    document.getElementById('authResponse').textContent = 'Custom Auth Token: ' + data.token;
-                })
-                .catch(error => console.error('Error fetching custom auth token:', error));
-        };
-    </script>
-</body>
-</html> -->
-
-<!-- ############################################################################################################################# -->
-
-<!-- <!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>FastAPI & Chainlit Integration</title>
-    <script>
-        // Function to call the custom-auth API and display the token
-        async function callCustomAuthApi() {
-            try {
-                const response = await fetch('/api');
-                const data = await response.json();
-                document.getElementById('apiResponse').innerText = 'Token: ' + data.token;
-            } catch (error) {
-                console.error('Error:', error);
-                document.getElementById('apiResponse').innerText = 'Failed to fetch token.';
-            }
-        }
-    </script>
-</head>
-<body>
-    <h1>FastAPI & Chainlit Integration</h1>
-    <button onclick="callCustomAuthApi()">Get Auth Token</button>
-    <p id="apiResponse"></p>
-</body>
-</html>
- -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Custom frontend</title>
+    <script type="module" crossorigin src="/assets/index-69a75e36.js"></script>
+    <link rel="stylesheet" href="/assets/index-0b901915.css">
+  </head>
+  <body>
+    <div id="root"></div>
+    
+
+
+  </body>
+</html>