Multiple model selection working

2024-05-01 17:18:57 +02:00
parent 765ebd3c29
commit 642fd8bb52
24 changed files with 1011 additions and 648 deletions
@@ -1,22 +1,84 @@
-<div class="message-user mt-3" style="display: flex; align-items: flex-start;" {% if IsPlaceholder %}
-    hx-get="/generateOpenai" hx-trigger="load" hx-swap="outerHTML" hx-indicator="#spinner" {% endif %}>
-    <figure class="image is-48x48 mr-2" style="flex-shrink: 0;">
-        <img src="icons/openai.png" alt="User Image">
-    </figure>
-    <article class="message">
-        <div class="message-header">
-            <p>User</p>
-            <form>
-                <input type="hidden">
-                <button class="delete" aria-label="delete"></button>
-            </form>
+<div class="message-bot mt-3">
+    <div class="columns">
+        <div class="column is-vcentered is-1" id="icon-column">
+            <div class='rows'>
+                {% 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)">
+                        <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 %}>
+                        </figure>
+                    </a>
+                </div>
+                {% endfor %}
+                {% if IsPlaceholder %}
+                <div class='row is-full mt-1'>
+                    <figure class="image is-48x48 mr-2" style="flex-shrink: 0;">
+                        <img src="icons/bouvai2.png" alt="User Image">
+                    </figure>
+                </div>
+                {% endif %}
+            </div>
        </div>
-        <div class="message-body">
-            {% if IsPlaceholder %}
-            <img id="spinner" class="htmx-indicator" src="/puff.svg" />
-            {% else %}
-            {{ Content }}
-            {% endif %}
+
+
+        <div class="column" id="content-column">
+            <div class="is-flex">
+                {% for message in Messages %}
+                {% if not message.Hidden %}
+                <!-- Name of the model as title -->
+                <div class="message-content">
+                    <div class="message-header">
+                        <p>Hello World</p>
+                    </div>
+                    <div class="message-body">
+                        <ct class="content" id="content-text-{{ ConversationAreaId }}">
+                            {{ message.Content | safe }}
+                        </ct>
+                    </div>
+                </div>
+                {% endif %}
+                {% 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>
-    </article>
-</div>
+    </div>
+</div>
+
+<script>
+    function toggleGrayscale(link) {
+        var imgElement = link.querySelector('img');
+        var allImages = link.closest('.rows').querySelectorAll('img');
+        var rowElement = link.closest('.row');
+
+        if (imgElement.style.filter === 'grayscale(100%)') {
+            imgElement.style.filter = 'none';
+            allImages.forEach(function (img) {
+                if (img !== imgElement) {
+                    img.style.filter = 'grayscale(100%)';
+                }
+            });
+            rowElement.parentNode.insertBefore(rowElement, rowElement.parentNode.firstChild);
+        } else {
+            imgElement.style.filter = 'grayscale(100%)';
+            allImages.forEach(function (img) {
+                img.style.filter = 'grayscale(100%)';
+            });
+        }
+    }
+</script>