Base

templates/base.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>JADE 2.0</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
+</head>
+
+<body>
+    <script src="https://unpkg.com/htmx.org@1.9.11"></script>
+    {% include 'navbar.html' %}
+    <section class="section">
+        <div class="container">
+            <div class="columns is-centered">
+                <div class="column is-half">
+                    {% block content %}{% endblock %}
+                </div>
+            </div>
+        </div>
+    </section>
+</body>
+
+</html>

templates/chat/messages.html

@@ -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>

templates/chat/page.html

@@ -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 %}

templates/navbar.html

@@ -0,0 +1,19 @@
+<nav class="navbar is-primary">
+    <div class="navbar-brand">
+        <a class="navbar-item" href="https://www.bouvai.com">
+            <img src="/bouvai.png">
+        </a>
+    </div>
+    <div class="navbar-menu">
+        <div class="navbar-start">
+            <a class="navbar-item" href="/">
+                Home
+            </a>
+            <a class="navbar-item" href="/chat">
+                Chat
+            </a>
+        </div>
+        <div class="navbar-end">
+        </div>
+    </div>
+</nav>

templates/welcome_page.html

@@ -0,0 +1,11 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<div class="columns">
+    <div class="column">
+        <h1>Welcome to JADE 2.0!</h1>
+        <h1 id="isMongoDBConnected" hx-get="/isMongoDBConnected" hx-trigger="load" hx-swap="outerHTML"></h1>
+    </div>
+</div>
+
+{% endblock %}