122 lines
4.5 KiB
HTML
122 lines
4.5 KiB
HTML
<div class="message-bot mt-3" id="msg-{{ ConversationAreaId }}">
|
|
<div class="columns is-mobile">
|
|
{% if not DontShowName %}
|
|
<div class="column is-narrow" id="icon-column">
|
|
<!-- Left column with the icon -->
|
|
{% if IsPlaceholder %}
|
|
|
|
<figure class="image is-48x48 message-icon" style="flex-shrink: 0">
|
|
<img src="icons/bouvai2.png"
|
|
alt="User Image"
|
|
id="selectedIcon-{{ ConversationAreaId }}">
|
|
</figure>
|
|
|
|
{% else %}
|
|
|
|
{% for message in Messages %}
|
|
{% if not message.Hidden %}
|
|
<figure class="image is-48x48 message-icon" style="flex-shrink: 0;">
|
|
<img src="{{ message.Icon }}"
|
|
alt="User Image"
|
|
id="selectedIcon-{{ ConversationAreaId }}">
|
|
</figure>
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="column" id="content-column" style="width: 100px;">
|
|
{% if not IsPlaceholder %}
|
|
<div class="{% if not notFlex %} is-flex {% endif %} is-align-items-start">
|
|
<div class="message-content"
|
|
style="width: 100%;
|
|
overflow-y: hidden"
|
|
id="content-{{ ConversationAreaId }}">
|
|
{% for message in Messages %}
|
|
{% if not message.Hidden %}
|
|
{% if not DontShowName %}
|
|
<div class="message-header">
|
|
<p>
|
|
<strong>{{ message.Name }}</strong> <small>{{ message.ModelID }}</small>
|
|
</p>
|
|
</div>
|
|
{% endif %}
|
|
<div class="message-body">
|
|
<div class="content" style="overflow: hidden; width: 100%;">{{ 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"
|
|
onclick="copyToClipboard(this)">
|
|
<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 }}')"
|
|
title="{{ message.Name }}">
|
|
<span class="icon is-small">
|
|
<img src="{{ message.Icon }}"
|
|
alt="{{ message.Name }}"
|
|
style="max-height: 100%;
|
|
max-width: 100%">
|
|
</span>
|
|
</button>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% elif IsPlaceholder %}
|
|
<div class="is-flex is-align-items-start">
|
|
<div class="message-content"
|
|
id="content-{{ ConversationAreaId }}"
|
|
style="width: 100%;
|
|
overflow-y: hidden">
|
|
<hx hx-trigger="load" hx-get="/generateMultipleMessages" id="generate-multiple-messages"></hx>
|
|
<div class='message-header'>
|
|
<p>Waiting...</p>
|
|
</div>
|
|
<div class="message-body">
|
|
<div class="content">
|
|
<br>
|
|
<img src="/puff.svg" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="is-flex is-justify-content mt-2">
|
|
<button class="button is-small is-primary message-button is-outlined mr-5"
|
|
onclick="copyToClipboard(this)">
|
|
<span class="icon">
|
|
<i class="fa-solid fa-copy"></i>
|
|
</span>
|
|
</button>
|
|
|
|
{% for selectedLLM in SelectedLLMs %}
|
|
<button disable
|
|
class="button is-small is-primary message-button is-outlined mr-1"
|
|
id="selection-btn-{{ selectedLLM.ID.String() }}-{{ ConversationAreaId }}">
|
|
<span class="icon is-small">
|
|
<!--img src="icons/{{ selectedLLM.Company }}.png" alt="{{ selectedLLM.Name }}"
|
|
style="max-height: 100%; max-width: 100%;"-->
|
|
<img src="/puff.svg" />
|
|
</span>
|
|
</button>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|