Working one message chat

views/chat.html

@@ -1,5 +1,5 @@
 <div class="chat-container">
-    <h1>Chat Page</h1>
-    {% include "partials/chat-messages.html" %}
+    <h1 class="title is-1">Chat Page</h1>
+    <div hx-get="/loadChat" hx-trigger="load" hx-swap="outerHTML"></div>
     {% include "partials/chat-input.html" %}
 </div>

views/layouts/main.html

@@ -8,12 +8,14 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
 </head>
 
-<body>
+<body hx-ext="sse" sse-connect="/sse">
+    <script src="https://unpkg.com/htmx.org@1.9.11"></script>
+    <script src="https://unpkg.com/htmx.org@1.9.12/dist/ext/sse.js"></script>
+
     {% include "partials/navbar.html" %}
 
     {{embed}}
 
-    <script src="https://unpkg.com/htmx.org@1.9.11"></script>
     <style>
         .column {
             display: flex;

views/partials/bot-message-placeholder.html

@@ -0,0 +1,13 @@
+<article class="message bot-message" id="bot-message-placeholder" hx-trigger="load" hx-swap="outerHTML"
+    hx-get="/generateOpenai" hx-target="#bot-message-placeholder">
+    <div class="message-header">
+        <p>Bot</p>
+        <form>
+            <input type="hidden">
+            <button class="delete" aria-label="delete"></button>
+        </form>
+    </div>
+    <div class="message-body">
+        Waiting...
+    </div>
+</article>

views/partials/bot-message.gohtml

@@ -0,0 +1,12 @@
+<article class="message bot-message">
+    <div class="message-header">
+        <p>Bot</p>
+        <form>
+            <input type="hidden">
+            <button class="delete" aria-label="delete"></button>
+        </form>
+    </div>
+    <div class="message-body">
+        {{ .Content }}
+    </div>
+</article>

views/partials/chat-input.html

@@ -1,3 +1,3 @@
-<form>
+<form hx-put="/chat" hx-swap="beforeend" hx-target="#chat-messages">
     <input class="input" type="text" placeholder="Type your message here..." name="message" />
 </form>

views/partials/chat-messages.html

@@ -1,7 +1,7 @@
-<div class="columns is-centered">
-    <div class="column is-half">
+<div class="columns is-centered" hx-trigger="sse:bot-message" hx-swap="beforeend" hx-target="#chat-messages">
+    <div class="column is-half" id="chat-messages">
         {% for Message in Messages %}
-        {% if Message.User == "User" %}
+        {% if Message.Role == "user" %}
         {% include "partials/user-message.html" %}
         {% else %}
         {% include "partials/bot-message.html" %}

views/partials/test-button.html

@@ -0,0 +1 @@
+<button class="button is-primary" hx-get="/test-button" hx-swap="outerHTML">Test</button>

views/partials/test-display.html

@@ -0,0 +1 @@
+<p sse-swap="test">Test</p>

views/partials/user-message.html

@@ -9,4 +9,7 @@
     <div class="message-body">
         {{ Message.Content }}
     </div>
-</article>
+</article>
+{% if IncludePlaceholder %}
+{% include "partials/bot-message-placeholder.html" %}
+{% endif %}

views/welcome.html

@@ -1,6 +1,8 @@
 <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>
+        <h1 class="title is-1">Welcome to JADE 2.0!</h1>
+        <h1 hx-get="/isMongoDBConnected" hx-trigger="load" hx-swap="outerHTML"></h1>
+        {% include "partials/test-display.html" %}
+        {% include "partials/test-button.html" %}
     </div>
 </div>