From 1cfc5774ad1183e3f6be78f3b98a3809cc974598 Mon Sep 17 00:00:00 2001
From: zxq5 <zxq5@zxq5.dev>
Date: Tue, 30 Sep 2025 21:02:12 +0100
Subject: [PATCH] frontend now uses abckend

---
 index.html | 47 ++++++++++++++++++++++++++++++-----------------
 1 file changed, 30 insertions(+), 17 deletions(-)

diff --git a/index.html b/index.html
index e2ea1f0..c44b3c3 100644
--- a/index.html
+++ b/index.html
@@ -23,7 +23,7 @@
                 display: flex;
                 flex-direction: column;
                 height: 100vh;
-                max-width: 400px;
+                max-width: 40vh;
                 margin: 0 auto;
                 background: #121212;
                 position: relative;
@@ -325,7 +325,7 @@
                 width: 32px;
                 height: 32px;
                 border-radius: 35%;
-                background: rgba(255, 255, 255, 0.2);
+                background: rgba(0, 0, 0, 0.5);
                 backdrop-filter: blur(10px);
                 margin-left: -15px;
                 display: flex;
@@ -662,6 +662,25 @@
             const messagesContainer = document.querySelector(
                 ".messages-container",
             );
+            const messageSource = new EventSource("http://localhost:8001/events");
+
+            messageSource.onmessage = (event) => {
+                const messageEl = document.createElement("div");
+                messageEl.className = "message";
+                messageEl.innerHTML = `
+                <div class="user-avatar" style="background: linear-gradient(135deg, #32cd32, #90ee90);"></div>
+                <div class="message-content">
+                    <div class="message-header">
+                        <span class="username">You</span>
+                        <span class="timestamp">${getCurrentTime()}</span>
+                    </div>
+                    <div class="message-text">${event.data}</div>
+                </div>
+            `;
+                messagesContainer.appendChild(messageEl);
+                messagesContainer.scrollTop =
+                    messagesContainer.scrollHeight;
+            }
 
             function getCurrentTime() {
                 const now = new Date();
@@ -675,21 +694,15 @@
             function sendMessage() {
                 const message = input.value.trim();
                 if (message) {
-                    const messageEl = document.createElement("div");
-                    messageEl.className = "message";
-                    messageEl.innerHTML = `
-                    <div class="user-avatar" style="background: linear-gradient(135deg, #32cd32, #90ee90);"></div>
-                    <div class="message-content">
-                        <div class="message-header">
-                            <span class="username">You</span>
-                            <span class="timestamp">${getCurrentTime()}</span>
-                        </div>
-                        <div class="message-text">${message}</div>
-                    </div>
-                `;
-                    messagesContainer.appendChild(messageEl);
-                    messagesContainer.scrollTop =
-                        messagesContainer.scrollHeight;
+                    fetch("http://localhost:8001/chat", {
+                      method: "POST",
+                      body: JSON.stringify({
+                        text: message
+                      }),
+                      headers: {
+                        "Content-type": "application/json; charset=UTF-8"
+                      }
+                    });
                     input.value = "";
                 }
             }