Moved message model selection to botton

views/partials/message-bot.html

@@ -1,35 +1,20 @@
 <div class="message-bot mt-3">
     <div class="columns is-mobile">
         <div class="column is-narrow" id="icon-column">
-            <div class='rows'>
+            {% for message in Messages %}
-                {% for message in Messages %}
+            {% if not message.Hidden %}
-                <div class='row is-full mt-1'>
+            <figure class="image is-48x48" style="flex-shrink: 0;">
-                    <a {% if not NotClickable %} href="#" hx-get="/messageContent?id={{ message.Id }}"
+                <img id="selectedIcon-{{ ConversationAreaId }}" src="icons/{{ message.Icon }}.png" alt="User Image">
-                        class="is-clickable" onclick="toggleGrayscale(this)"
+            </figure>
-                        hx-target="#content-{{ ConversationAreaId }}" {% endif %}>
+            {% endif %}
-                        <figure class="image is-48x48" style="flex-shrink: 0;">
+            {% endfor %}
-                            <img src="icons/{{ message.Icon }}.png" alt="User Image" {% if message.Hidden %}
-                                style="filter: grayscale(100%);" {% endif %} title="{{ message.Name }}">
-                        </figure>
-                    </a>
-                </div>
-                {% endfor %}
-                {% if IsPlaceholder %}
-                <div class='row is-full mt-1'>
-                    <figure class="image is-48x48" style="flex-shrink: 0;">
-                        <img src="icons/bouvai2.png" alt="User Image">
-                    </figure>
-                </div>
-                {% endif %}
-            </div>
         </div>
 
         <div class="column" id="content-column">
-            <div class="is-flex">
+            <div class="is-flex is-align-items-start">
-                {% for message in Messages %}
-                {% if not message.Hidden %}
-                <!-- Name of the model as title -->
                 <div class="message-content" id="content-{{ ConversationAreaId }}">
+                    {% for message in Messages %}
+                    {% if not message.Hidden %}
                     <div class="message-header">
                         <p>
                             {{ message.Name }}
@@ -40,42 +25,52 @@
                             {{ message.Content | safe }}
                         </div>
                     </div>
+                    {% endif %}
+                    {% endfor %}
                 </div>
-                {% endif %}
+            </div>
+            <div class="is-flex is-justify-content mt-2">
+                <button class="button is-small is-primary message-button is-outlined mr-1">
+                    <span class="icon">
+                        <i class="fa-solid fa-copy"></i>
+                    </span>
+                </button>
+                <button class="button is-small is-primary message-button is-outlined mr-5">
+                    <span class="icon">
+                        <i class="fa-solid fa-copy"></i>
+                    </span>
+                </button>
+                {% if not NotClickable %}
+                {% for message in Messages %}
+                <button class="button is-small is-primary message-button is-outlined mr-1"
+                    hx-get="/messageContent?id={{ message.Id }}" hx-target="#content-{{ ConversationAreaId }}"
+                    onclick="updateIcon('{{ message.Icon }}', '{{ ConversationAreaId }}')">
+                    <span class="icon is-small">
+                        <img src="icons/{{ message.Icon }}.png" alt="{{ message.Name }}"
+                            style="max-height: 100%; max-width: 100%;">
+                    </span>
+                </button>
                 {% endfor %}
-
-                {% if IsPlaceholder %}
-                <hx hx-get="/generateMultipleMessages" hx-trigger="load" hx-swap="outerHTML" hx-indicator="#spinner"
-                    hx-target="#chat-container">
-                </hx>
-
-                <div class="message-content" {% if message.Hidden %}style="display: none;" {% endif %}>
-                    <div class="message-body">
-                        <div class="content">
-                            <img id="spinner" class="htmx-indicator" src="/puff.svg" />
-                        </div>
-                    </div>
-                </div>
                 {% endif %}
             </div>
         </div>
     </div>
 </div>
 
-<script>
+<style>
-    function toggleGrayscale(link) {
+    .message-button {
-        var imgElement = link.querySelector('img');
+        opacity: 0;
-        var allImages = link.closest('.rows').querySelectorAll('img');
+        transition: opacity 0.3s ease;
-        var rowElement = link.closest('.row');
+    }
 
-        if (imgElement.style.filter === 'grayscale(100%)') {
+    .message-bot:hover .message-button {
-            imgElement.style.filter = 'none';
+        opacity: 1;
-            allImages.forEach(function (img) {
+    }
-                if (img !== imgElement) {
+</style>
-                    img.style.filter = 'grayscale(100%)';
+
-                }
+<script>
-            });
+    function updateIcon(icon, ConversationAreaId) {
-            rowElement.parentNode.insertBefore(rowElement, rowElement.parentNode.firstChild);
+        var selectedIcon = document.getElementById('selectedIcon-' + ConversationAreaId);
-        }
+        selectedIcon.src = 'icons/' + icon + '.png';
     }
 </script>

views/partials/message-user.html

@@ -7,7 +7,7 @@
         </div>
 
         <div class="column" id="content-column">
-            <div class="is-flex is-align-items-start" style="position: relative; padding-right: 30px;">
+            <div class="is-flex is-align-items-start">
                 <div class="message-content">
                     <div class="message-header">
                         <p>
@@ -22,18 +22,18 @@
                 </div>
             </div>
             <div class="is-flex is-justify-content mt-2">
-                <button id="redo-button-{{ ID }}" class="button is-small is-primary delete-button is-outlined mr-2">
+                <button id="redo-button-{{ ID }}" class="button is-small is-primary message-button is-outlined mr-2">
                     <span class="icon">
                         <i class="fa-solid fa-arrows-rotate"></i>
                     </span>
                 </button>
-                <button id="edit-button-{{ ID }}" class="button is-small is-primary delete-button is-outlined mr-2">
+                <button id="edit-button-{{ ID }}" class="button is-small is-primary message-button is-outlined mr-2">
                     <span class="icon">
                         <i class="fa-solid fa-pen"></i>
                     </span>
                 </button>
                 <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">
+                    hx-target="#chat-container" class="button is-small is-danger message-button is-outlined mr-2">
                     <span class="icon">
                         <i class="fa-solid fa-trash"></i>
                     </span>
@@ -44,12 +44,12 @@
 </div>
 
 <style>
-    .delete-button {
+    .message-button {
         opacity: 0;
         transition: opacity 0.3s ease;
     }
 
-    .message-user:hover .delete-button {
+    .message-user:hover .message-button {
         opacity: 1;
     }
 </style>