adrien/Jade
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cleaned and added some commend and continued the conv popover

Browse Source
This commit is contained in:
adrien
2024-05-25 10:14:54 +02:00
parent 01d04b3611
commit b8a2f02657
17 changed files with 517 additions and 291 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/partials/popover-models.html
+127 -73
View File
@@ -10,8 +10,8 @@
<div class="dropdown-item" id="models-list">
<div id="llm-list">
{% for LLM in LLMs %}
<div class="icon-text has-text unselected" data-id="{{ LLM.ID.String() }}" style="cursor: pointer;"
onclick="toggleSelection(this)">
<div class="icon-text has-text unselected icon-llm" data-id="{{ LLM.ID.String() }}"
style="cursor: pointer;" onclick="toggleSelection(this)">
<span class="icon">
<img src="{{ LLM.Model.Company.Icon }}" />
</span>
@@ -24,7 +24,7 @@
hx-target="#models-dropdown" hx-confirm="Are you sure?" hx-trigger="click"
hx-vals="js:{selectedLLMIds: getSelectedModelsIDs()}">
<span class="icon">
<i class="fa-solid fa-xmark"></i>
<i class="fa-solid fa-trash"></i>
</span>
</button>
<div>
@@ -84,83 +84,137 @@
</div>
</div>
</div>
</div>
<script>
var sortable = new Sortable(document.getElementById('llm-list'), {
animation: 150,
onEnd: function (evt) {
var items = evt.to.children;
var updates = [];
for (var i = 0; i < items.length; i++) {
var id = items[i].getAttribute('data-id');
var position = i + 1;
updates.push({ id: id, position: position });
}
<script>
var sortable = new Sortable(document.getElementById('llm-list'), {
animation: 150,
onEnd: function (evt) {
var items = evt.to.children;
var updates = [];
for (var i = 0; i < items.length; i++) {
var id = items[i].getAttribute('data-id');
var position = i + 1;
updates.push({ id: id, position: position });
var xhr = new XMLHttpRequest();
xhr.open('POST', '/updateLLMPositionBatch', true);
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr.send(JSON.stringify(updates));
}
var xhr = new XMLHttpRequest();
xhr.open('POST', '/updateLLMPositionBatch', true);
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr.send(JSON.stringify(updates));
}
});
});
document.getElementById('model-name-input').addEventListener('input', function () {
document.getElementById('confirm-create-model-button').disabled = this.value === '';
})
document.getElementById('model-name-input').addEventListener('input', function () {
document.getElementById('confirm-create-model-button').disabled = this.value === '';
})
document.addEventListener('click', function (event) {
if (!document.getElementById('models-dropdown').contains(event.target)) {
document.getElementById('models-dropdown').classList.remove('is-active');
}
});
document.getElementById('model-id-input').querySelector('select').addEventListener('change', function () {
const customEndpoint = this.value === 'custom';
document.getElementById('model-url-input').classList.toggle('is-hidden', !customEndpoint);
document.getElementById('model-key-input').classList.toggle('is-hidden', !customEndpoint);
document.getElementById('model-cid-input').classList.toggle('is-hidden', !customEndpoint);
});
document.getElementById('temperature-slider').addEventListener('input', function () {
document.getElementById('temperature-slider-output').innerHTML = this.value;
})
document.getElementById('create-model-button').addEventListener('click', function () {
document.getElementById('models-list').classList.add('is-hidden');
document.getElementById('models-creation').classList.remove('is-hidden');
});
document.getElementById('cancel-create-model-button').addEventListener('click', function () {
document.getElementById('models-list').classList.remove('is-hidden');
document.getElementById('models-creation').classList.add('is-hidden');
});
document.addEventListener('keydown', function (event) {
if (event.key === 'Shift' && document.activeElement.id !== 'chat-input-textarea' && document.getElementById('models-creation').classList.contains('is-hidden') && document.getElementById('models-dropdown').classList.contains('is-active')) {
document.body.classList.add('shift-pressed');
}
});
document.addEventListener('keyup', function (event) {
if (event.key === 'Shift' && document.activeElement.id !== 'chat-input-textarea' && document.getElementById('models-creation').classList.contains('is-hidden') && document.getElementById('models-dropdown').classList.contains('is-active')) {
document.body.classList.remove('shift-pressed');
lastSelectedIndex = null;
const elements = Array.from(document.getElementsByClassName('icon-text'));
for (let i = 0; i < elements.length; i++) {
elements[i].classList.remove('shiftselected');
document.addEventListener('click', function (event) {
if (!document.getElementById('models-dropdown').contains(event.target)) {
document.getElementById('models-dropdown').classList.remove('is-active');
}
});
window.getSelection().removeAllRanges();
}
});
document.getElementById('model-id-input').querySelector('select').addEventListener('change', function () {
const customEndpoint = this.value === 'custom';
document.getElementById('model-url-input').classList.toggle('is-hidden', !customEndpoint);
document.getElementById('model-key-input').classList.toggle('is-hidden', !customEndpoint);
document.getElementById('model-cid-input').classList.toggle('is-hidden', !customEndpoint);
});
document.addEventListener('click', function (event) {
if (event.shiftKey) {
event.preventDefault();
document.getElementById('temperature-slider').addEventListener('input', function () {
document.getElementById('temperature-slider-output').innerHTML = this.value;
})
document.getElementById('create-model-button').addEventListener('click', function () {
document.getElementById('models-list').classList.add('is-hidden');
document.getElementById('models-creation').classList.remove('is-hidden');
});
document.getElementById('cancel-create-model-button').addEventListener('click', function () {
document.getElementById('models-list').classList.remove('is-hidden');
document.getElementById('models-creation').classList.add('is-hidden');
});
document.addEventListener('keydown', function (event) {
if (event.key === 'Shift' && document.activeElement.id !== 'chat-input-textarea' && document.getElementById('models-creation').classList.contains('is-hidden') && document.getElementById('models-dropdown').classList.contains('is-active')) {
document.body.classList.add('shift-pressed');
}
});
document.addEventListener('keyup', function (event) {
if (event.key === 'Shift' && document.activeElement.id !== 'chat-input-textarea' && document.getElementById('models-creation').classList.contains('is-hidden') && document.getElementById('models-dropdown').classList.contains('is-active')) {
document.body.classList.remove('shift-pressed');
lastSelectedIndex = null;
const elements = Array.from(document.getElementsByClassName('icon-text'));
for (let i = 0; i < elements.length; i++) {
elements[i].classList.remove('shiftselected');
}
window.getSelection().removeAllRanges();
}
});
document.addEventListener('click', function (event) {
if (event.shiftKey) {
event.preventDefault();
}
});
let lastSelectedIndex = null;
function toggleSelection(element) {
const elements = Array.from(document.getElementsByClassName('icon-llm'));
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();
}
});
</script>
function getSelectedModelsIDs() {
var selectedModelsIDs = [];
var selectedModels = document.getElementsByClassName('selected');
for (var i = 0; i < selectedModels.length; i++) {
selectedModelsIDs.push(selectedModels[i].getAttribute('data-id'));
}
return selectedModelsIDs.length > 0 ? JSON.stringify(selectedModelsIDs) : '[]';
}
function toggleSendButton() {
var selectedModels = document.getElementsByClassName('selected');
var sendButton = document.getElementById('chat-input-send-btn');
sendButton.disabled = selectedModels.length === 0;
}
</script>
</div>