Better input

views/partials/message-bot.html

@@ -5,7 +5,7 @@
                 {% for message in Messages %}
                 <div class='row is-full mt-1 is-vcentered'>
                     <a href="#" hx-get="/messageContent?id={{ message.Id }}" class="is-clickable"
-                        hx-target="#content-text-{{ ConversationAreaId }}" onclick="toggleGrayscale(this)">
+                        hx-target="#content-{{ ConversationAreaId }}" onclick="toggleGrayscale(this)">
                         <figure class=" image is-48x48 mr-2" style="flex-shrink: 0;">
                             <img src="icons/{{ message.Icon }}.png" alt="User Image" if {% if message.Hidden %}
                                 style="filter: grayscale(100%);" {% endif %}>
@@ -29,12 +29,14 @@
                 {% for message in Messages %}
                 {% if not message.Hidden %}
                 <!-- Name of the model as title -->
-                <div class="message-content">
+                <div class="message-content" id="content-{{ ConversationAreaId }}">
                     <div class="message-header">
-                        <p>Hello World</p>
+                        <p>
+                            {{ message.Name }}
+                        </p>
                     </div>
                     <div class="message-body">
-                        <ct class="content" id="content-text-{{ ConversationAreaId }}">
+                        <ct class="content" style="overflow-x: auto;">
                             {{ message.Content | safe }}
                         </ct>
                     </div>
@@ -74,11 +76,6 @@
                 }
             });
             rowElement.parentNode.insertBefore(rowElement, rowElement.parentNode.firstChild);
-        } else {
-            imgElement.style.filter = 'grayscale(100%)';
-            allImages.forEach(function (img) {
-                img.style.filter = 'grayscale(100%)';
-            });
         }
     }
 </script>