Base

2024-04-20 16:28:57 +02:00
commit ffb1739611
12 changed files with 755 additions and 0 deletions
@@ -0,0 +1,31 @@
+<div class="column" id="messages">
+    {% for message in messages %}
+    {% if message.Role == 'user' %}
+    <article class="message user-message" id='{{ message.id }}'>
+        <div class="message-header">
+            <p>User</p>
+            <form hx-delete="/chat" hx-swap="outerHTML" hx-target="#messages">
+                <input type="hidden" name="messageId" value='{{ message.id }}'>
+                <button class="delete" aria-label="delete"></button>
+            </form>
+        </div>
+        <div class="message-body">
+            {{ message.Content }}
+        </div>
+    </article>
+    {% else %}
+    <article class="message bot-message" id='{{ message.id }}'>
+        <div class="message-header">
+            <p>Bot</p>
+            <form hx-delete="/chat" hx-swap="outerHTML" hx-target="#messages">
+                <input type="hidden" name="messageId" value='{{ message.id }}'>
+                <button class="delete" aria-label="delete"></button>
+            </form>
+        </div>
+        <div class="message-body">
+            {{ message.Content }}
+        </div>
+    </article>
+    {% endif %}
+    {% endfor %}
+</div>
@@ -0,0 +1,33 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<div class="columns" style="width: 100%;">
+    <div class="column" id="messages">
+    </div>
+</div>
+
+<form hx-post="/chat" hx-target="#messages" hx-swap="outerHTML">
+    <input class="input" type="text" placeholder="Type your message here..." name="message" />
+</form>
+
+<style>
+    .column {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .message {
+        max-width: 90%;
+        margin-bottom: 10px;
+    }
+
+    .user-message {
+        align-self: flex-start;
+    }
+
+    .bot-message {
+        align-self: flex-end;
+    }
+</style>
+
+{% endblock %}