84 lines
3.3 KiB
HTML
84 lines
3.3 KiB
HTML
<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="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>
|
|
</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> |