72 lines
2.7 KiB
HTML
72 lines
2.7 KiB
HTML
<div class="message-bot mt-3">
|
|
<div class="columns is-mobile">
|
|
<div class="column is-narrow" id="icon-column">
|
|
{% for message in Messages %}
|
|
{% if not message.Hidden %}
|
|
<figure class="image is-48x48" style="flex-shrink: 0;">
|
|
<img id="selectedIcon-{{ ConversationAreaId }}" src="icons/{{ message.Icon }}.png" alt="User Image">
|
|
</figure>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="column" id="content-column">
|
|
<div class="is-flex is-align-items-start">
|
|
<div class="message-content" id="content-{{ ConversationAreaId }}">
|
|
{% for message in Messages %}
|
|
{% if not message.Hidden %}
|
|
<div class="message-header">
|
|
<p>
|
|
{{ message.Name }}
|
|
</p>
|
|
</div>
|
|
<div class="message-body">
|
|
<div class="content" style="overflow-x: auto;">
|
|
{{ message.Content | safe }}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<div class="is-flex is-justify-content mt-2">
|
|
{% if not NotClickable %}
|
|
<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>
|
|
|
|
{% 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 %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.message-button {
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.message-bot:hover .message-button {
|
|
opacity: 1;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
function updateIcon(icon, ConversationAreaId) {
|
|
var selectedIcon = document.getElementById('selectedIcon-' + ConversationAreaId);
|
|
selectedIcon.src = 'icons/' + icon + '.png';
|
|
}
|
|
</script> |