Updated UI to use icons

static/style.css

@@ -5,11 +5,6 @@ html {
 }
 
 /* Stuff for message boxes */
-.message-content {
-    background-color: #303030;
-    border-radius: 5px;
-    padding: 10px;
-}
 
 #chat-messages .message-content pre {
     overflow-x: auto;

views/chat.html

@@ -14,7 +14,11 @@
                 <button {% if not IsLogin or not HaveKey %}disabled{% endif %} type="submit"
                     class="send-button button is-primary is-small" hx-post="/requestMultipleMessages"
                     hx-swap="beforeend settle:200ms" hx-target="#chat-messages" id="chat-input-send-btn"
-                    class="chat-input" hx-include="[name='message'], [name^='model-check-']">Send</button>
+                    class="chat-input" hx-include="[name='message'], [name^='model-check-']">
+                    <span class="icon">
+                        <i class="fa-solid fa-chevron-right"></i>
+                    </span>
+                </button>
             </div>
         </div>
     </div>

views/partials/message-user.html

@@ -1,5 +1,5 @@
 <div class="message-user mt-3" id="{{ ID }}">
-    <div class="columns is-vcentered is-mobile">
+    <div class="columns is-mobile">
         <div class="column is-narrow" id="icon-column">
             <figure class="image is-48x48" style="flex-shrink: 0;">
                 <img src="icons/bouvai2.png" alt="User Image">
@@ -7,18 +7,45 @@
         </div>
 
         <div class="column" id="content-column">
-            <div class="is-flex">
+            <div class="is-flex is-align-items-start" style="position: relative; padding-right: 30px;">
-                <div class="message-content" style="position: relative; padding-right: 30px;">
+                <div class="message-content">
+                    <div class="message-header">
+                        <p>
+                            You
+                        </p>
+                    </div>
                     <div class="message-body">
                         <div class="content" style="overflow-x: auto;">
                             {{ Content|safe }}
                         </div>
                     </div>
-                    <button id="delete-button-{{ ID }}" hx-post="/deleteMessage?id={{ ID }}"
+                </div>
-                        style="position: absolute; top: 3; right: 3;" hx-swap="outerHTML" hx-target="#chat-container"
+            </div>
-                        class="delete" aria-label="delete"></button>
+            <div class="is-flex is-justify-content mt-2">
-                </div>
+                <button id="delete-button-{{ ID }}" hx-post="/deleteMessage?id={{ ID }}" hx-swap="outerHTML"
+                    hx-target="#chat-container" class="button is-small is-danger delete-button is-outlined mr-2">
+                    <span class="icon">
+                        <i class="fa-solid fa-trash"></i>
+                    </span>
+                </button>
+                <button id="redo-button-{{ ID }}" hx-post="/redoMessage?id={{ ID }}" hx-swap="outerHTML"
+                    hx-target="#chat-container" class="button is-small is-primary delete-button is-outlined">
+                    <span class="icon">
+                        <i class="fa-solid fa-arrows-rotate"></i>
+                    </span>
+                </button>
             </div>
         </div>
     </div>
 </div>
+
+<style>
+    .delete-button {
+        opacity: 0;
+        transition: opacity 0.3s ease;
+    }
+
+    .message-user:hover .delete-button {
+        opacity: 1;
+    }
+</style>

views/partials/popover-models.html

@@ -1,7 +1,7 @@
 <div class="dropdown is-hoverable is-up">
     <div class="dropdown-trigger">
         <button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu4">
-            <span>Models</span>
+            <span class="icon"><i class="fa-solid fa-robot"></i></span>
         </button>
     </div>
     <div class="dropdown-menu" id="dropdown-menu4" role="menu">

views/partials/popover-settings.html

@@ -1,7 +1,7 @@
 <div class="dropdown is-hoverable is-up">
     <div class="dropdown-trigger">
         <button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu4">
-            <span>Settings</span>
+            <span class="icon"><i class="fa-solid fa-key"></i></span>
         </button>
     </div>
     <div class="dropdown-menu" id="dropdown-menu4" role="menu">

views/partials/popover-usage.html

@@ -1,7 +1,7 @@
 <div class="dropdown is-hoverable is-up">
     <div class="dropdown-trigger">
         <button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu4">
-            <span>Usage</span>
+            <span class="icon"><i class="fa-regular fa-money-bill-1"></i></span>
         </button>
     </div>
     <div class="dropdown-menu" id="dropdown-menu4" role="menu">