Working event handler

views/partials/message-bot.html

@@ -13,9 +13,8 @@
 
             {% for message in Messages %}
             {% if not message.Hidden %}
-            <figure class="image is-48x48" style="flex-shrink: 0;" id="selectedIcon-{{ ConversationAreaId }}"
-                sse-swap="swapIcon-{{ ConversationAreaId }}">
-                <img src="icons/{{ message.Icon }}.png" alt="User Image">
+            <figure class="image is-48x48" style="flex-shrink: 0;" id="selectedIcon-{{ ConversationAreaId }}">
+                <img src="{{ message.Icon }}" alt="User Image">
             </figure>
             {% endif %}
             {% endfor %}
@@ -26,8 +25,7 @@
         <div class="column" id="content-column">
             {% if not IsPlaceholder %}
             <div class="is-flex is-align-items-start">
-                <div class="message-content" id="content-{{ ConversationAreaId }}"
-                    sse-swap="swapContent-{{ ConversationAreaId }}">
+                <div class="message-content" id="content-{{ ConversationAreaId }}">
                     {% for message in Messages %}
                     {% if not message.Hidden %}
                     <div class="message-header">
@@ -58,7 +56,7 @@
                     hx-get="/messageContent?id={{ message.Id }}" hx-target="#content-{{ ConversationAreaId }}"
                     onclick="updateIcon('{{ message.Icon }}', '{{ ConversationAreaId }}')" title="{{ message.Name }}">
                     <span class="icon is-small">
-                        <img src="icons/{{ message.Icon }}.png" alt="{{ message.Name }}"
+                        <img src="{{ message.Icon }}" alt="{{ message.Name }}"
                             style="max-height: 100%; max-width: 100%;">
                     </span>
                 </button>
@@ -70,6 +68,12 @@
             <div class="is-flex is-align-items-start">
                 <div class="message-content" id="content-{{ ConversationAreaId }}"
                     sse-swap="swapContent-{{ ConversationAreaId }}">
+                    <hx hx-trigger="load" hx-get="/generateMultipleMessages"></hx>
+                    <div class='message-header'>
+                        <p>
+                            Waiting...
+                        </p>
+                    </div>
                     <div class="message-body">
                         <div class="content">
                             <img src="/puff.svg" />
@@ -81,7 +85,7 @@
             <div class="is-flex is-justify-content mt-2">
                 {% for selectedLLM in SelectedLLMs %}
                 <button disable class="button is-small is-primary message-button is-outlined mr-1"
-                    sse-swap="swapSelectionBtn-{{ selectedLLM.ID }}" hx-swap="outerHTML">
+                    sse-swap="swapSelectionBtn-{{ selectedLLM.ID.String() }}" hx-swap="outerHTML" hx-target="this">
                     <span class="icon is-small">
                         <!--img src="icons/{{ selectedLLM.Company }}.png" alt="{{ selectedLLM.Name }}"
                             style="max-height: 100%; max-width: 100%;"-->