working version

2026-01-20 09:46:21 +01:00
commit 6546853464
11 changed files with 767 additions and 0 deletions
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -0,0 +1,37 @@
+textarea {
+    width: 100%;
+    height: 80px;
+}
+
+#messages {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 20px;
+}
+
+.message {
+    max-width: 70%;
+    padding: 10px 15px;
+    border-radius: 15px;
+    font-family: sans-serif;
+    line-height: 1.4;
+}
+
+.sent {
+    max-width: 70%;
+    background-color: lightgreen;
+    padding: 10px 15px;
+    border-radius: 15px;
+    font-family: sans-serif;
+    line-height: 1.4;
+    align-self: flex-end;
+    border-bottom-right-radius: 2px;
+}
+
+.received {
+    align-self: flex-start;
+    background-color: #e5e5ea;
+    color: black;
+    border-bottom-left-radius: 2px;
+}
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -0,0 +1,34 @@
+(($) => {
+    var ws = new WebSocket("ws://localhost:8000/ws");
+    const input = $("#message");
+    const messages = $('#messages');
+    var lastMessage;
+
+    $('#button').on('click', () => {
+        const message = input.val();
+
+        if (message) {
+            ws.send(message);
+            lastMessage = $('<div class="message received"><p>Loading...</p></div>')
+            messages.append(`<div class="message sent"><p>${message}</p></div>`)
+            messages.append(lastMessage);
+
+            input.val("");
+        }
+    });
+
+    ws.onmessage = (event) => {
+        if (lastMessage.text() === "Loading...") {
+            lastMessage.empty();
+        }
+
+        var content = document.createTextNode(event.data);
+
+        if (content.textContent === "<<END>>") {
+            lastMessage.html(marked.parse(lastMessage.text()));
+        }
+        else {
+            lastMessage.append(content);
+        }
+    };
+})(jQuery);
--- a/static/templates/index.html
+++ b/static/templates/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/static/css/main.css">
+    <title>Document</title>
+</head>
+<body>
+    <h1>Chat</h1>
+    <p>Come si calcola la massa magra? dammi una spiegazione dettagliata</p>
+
+    <div>
+        <textarea name="" id="message"></textarea>
+        <input id="button" type="button" value="Send">
+    </div>
+
+    <div id="messages"></div>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="/static/js/main.js"></script>
+</body>
+</html>