126 lines
4.2 KiB
HTML
126 lines
4.2 KiB
HTML
<div class="dropdown is-hoverable is-up is-right">
|
|
<div class="dropdown-trigger">
|
|
<button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu4">
|
|
<span class="icon"><i class="fa-solid fa-robot"></i></span>
|
|
</button>
|
|
</div>
|
|
<div class="dropdown-menu" id="dropdown-menu4" role="menu">
|
|
<div class="dropdown-content is-small">
|
|
<div class="dropdown-item">
|
|
{% for LLM in LLMs %}
|
|
<!-- Added "has-text" as a default class -->
|
|
<div class="icon-text has-text unselected" onclick="toggleSelection(this)" style="cursor: pointer;"
|
|
value="{{ LLM.ID.String() }}">
|
|
<span class="icon">
|
|
<img src="{{ LLM.Model.Company.Icon }}" />
|
|
</span>
|
|
<span>{{ LLM.Name }}</span>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let lastSelectedIndex = null;
|
|
|
|
document.addEventListener('keydown', function (event) {
|
|
if (event.key === 'Shift') {
|
|
document.body.classList.add('shift-pressed');
|
|
}
|
|
});
|
|
|
|
document.addEventListener('keyup', function (event) {
|
|
if (event.key === 'Shift') {
|
|
document.body.classList.remove('shift-pressed');
|
|
lastSelectedIndex = null;
|
|
}
|
|
|
|
// Remove all "shiftselected" classes
|
|
const elements = Array.from(document.getElementsByClassName('icon-text'));
|
|
for (let i = 0; i < elements.length; i++) {
|
|
elements[i].classList.remove('shiftselected');
|
|
}
|
|
|
|
window.getSelection().removeAllRanges();
|
|
});
|
|
|
|
function toggleSelection(element) {
|
|
const elements = Array.from(document.getElementsByClassName('icon-text'));
|
|
const index = elements.indexOf(element);
|
|
|
|
if (document.body.classList.contains('shift-pressed') && lastSelectedIndex !== null) {
|
|
const [start, end] = [lastSelectedIndex, index].sort((a, b) => a - b);
|
|
let allSelected = true;
|
|
for (let i = start; i <= end; i++) {
|
|
if (!elements[i].classList.contains('selected')) {
|
|
allSelected = false;
|
|
break;
|
|
}
|
|
}
|
|
for (let i = start; i <= end; i++) {
|
|
if (allSelected) {
|
|
elements[i].classList.remove('selected');
|
|
elements[i].classList.add('unselected');
|
|
} else {
|
|
elements[i].classList.add('selected');
|
|
elements[i].classList.remove('unselected');
|
|
}
|
|
}
|
|
lastSelectedIndex = null;
|
|
|
|
const elements2 = Array.from(document.getElementsByClassName('icon-text'));
|
|
for (let i = 0; i < elements2.length; i++) {
|
|
elements2[i].classList.remove('shiftselected');
|
|
}
|
|
} else if (document.body.classList.contains('shift-pressed') && lastSelectedIndex === null) {
|
|
lastSelectedIndex = index;
|
|
element.classList.toggle('shiftselected');
|
|
} else {
|
|
element.classList.toggle('selected');
|
|
element.classList.toggle('unselected');
|
|
}
|
|
toggleSendButton();
|
|
}
|
|
|
|
document.addEventListener('click', function (event) {
|
|
if (event.shiftKey) {
|
|
event.preventDefault();
|
|
}
|
|
});
|
|
|
|
function getSelectedModelsIDs() {
|
|
var selectedModelsIDs = [];
|
|
var selectedModels = document.getElementsByClassName('selected');
|
|
for (var i = 0; i < selectedModels.length; i++) {
|
|
selectedModelsIDs.push(selectedModels[i].getAttribute('value'));
|
|
}
|
|
return selectedModelsIDs.length > 0 ? JSON.stringify(selectedModelsIDs) : '[]';
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.selected {
|
|
border: 2px solid #126d0f;
|
|
border-radius: 4px;
|
|
padding: 1px;
|
|
margin: 2px;
|
|
}
|
|
|
|
.unselected {
|
|
border-radius: 4px;
|
|
padding: 3px;
|
|
}
|
|
|
|
.shiftselected {
|
|
background: #126d0f;
|
|
border-radius: 4px;
|
|
padding: 1px;
|
|
margin: 2px;
|
|
}
|
|
|
|
.shift-pressed *::selection {
|
|
background: transparent;
|
|
}
|
|
</style> |