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-conversation.html
+109 -28
View File
@@ -1,7 +1,8 @@
<div class="dropdown is-up is-right {% if IsActive %} is-active {% endif %}" id="conversation-dropdown">
<div class="dropdown-trigger">
<button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu3"
hx-get="/refreshConversationSelection" hx-target="#conversation-dropdown" hx-swap="outerHTML">
hx-get="/refreshConversationSelection" hx-target="#conversation-dropdown" hx-swap="outerHTML"
hx-vals="js:{IsActive: document.getElementById('conversation-dropdown').classList.contains('is-active')}">
<span class="icon">
<i class="fa-solid fa-comments"></i>
</span>
@@ -9,44 +10,124 @@
</div>
<div class="dropdown-menu" id="dropdown-menu3" role="menu">
<div class="dropdown-content">
<div class="dropdown-item" id="models-list">
<div class="dropdown-item">
<div id="conversation-list">
{% for Conversation in Conversations %}
<div class="icon-text has-text unselected" data-id="{{ Converrsation.ID.String() }}"
style="cursor: pointer;" onclick="toggleSelection(this)">
<div class="icon-text has-text unselected icon-conv" data-id="{{ Conversation.ID.String() }}"
style="cursor: pointer;" onclick="toggleConversationSelection(this)" hx-get="/loadChat"
hx-swap="outerHTML" hx-target="#chat-container">
<span>{{ Conversation.Name }}</span>
</div>
{% endfor %}
</div>
<input class="input is-small mt-2 is-hidden" type="text" id="conversation-name-input"
name="conversation-name-input" placeholder="Conversation name" autocomplete="off">
<div class="is-flex is-justify-content-space-between mt-4">
<button disabled class="button is-small is-danger" id="delete-conversation-button">
<span class="icon">
<i class="fa-solid fa-trash"></i>
</span>
</button>
<button class="button is-small is-danger is-outlined is-hidden" id="cancel-conversation-button">
<span class="icon">
<i class="fa-solid fa-xmark"></i>
</span>
</button>
<div class="is-flex is-justify-content-flex-end">
<button class="button is-small is-success is-outlined" id="create-conversation-button">
<span class="icon">
<i class="fa-solid fa-plus"></i>
</span>
</button>
<button class="button is-small is-success is-outlined is-hidden"
id="confirm-conversation-button" hx-get="/createConversation"
hx-include="[name='conversation-name-input']" hx-swap="outerHTML"
hx-target="#conversation-dropdown">
<span class="icon">
<i class="fa-solid fa-check"></i>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function toggleConversationSelection(element) {
const elements = Array.from(document.getElementsByClassName('icon-conv'));
{% if not IsActive %}
<script>
var sortable = new Sortable(document.getElementById('conversation-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 });
// If the conversation is already selected, unselect it
if (element.classList.contains('selected')) {
for (let i = 0; i < elements.length; i++) {
elements[i].classList.remove('selected');
elements[i].classList.add('unselected');
}
element.classList.remove('selected');
element.classList.add('unselected');
return;
} else if (element.classList.contains('unselected')) {
for (let i = 0; i < elements.length; i++) {
elements[i].classList.remove('selected');
elements[i].classList.add('unselected');
}
element.classList.remove('unselected');
element.classList.add('selected');
return;
} else {
// Otherwise, select it
for (let i = 0; i < elements.length; i++) {
elements[i].classList.remove('selected');
elements[i].classList.add('unselected');
}
element.classList.remove('unselected');
element.classList.add('selected');
}
var xhr = new XMLHttpRequest();
xhr.open('POST', '/updateConversationPositionBatch', true);
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr.send(JSON.stringify(updates));
}
});
// Make an HTMX request to update the chat
document.addEventListener('click', function (event) {
if (!document.getElementById('conversation-dropdown').contains(event.target)) {
document.getElementById('conversation-dropdown').classList.remove('is-active');
}
});
</script>
{% endif %}
var sortable = new Sortable(document.getElementById('conversation-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', '/updateConversationPositionBatch', true);
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr.send(JSON.stringify(updates));
}
});
document.addEventListener('click', function (event) {
if (!document.getElementById('conversation-dropdown').contains(event.target)) {
document.getElementById('conversation-dropdown').classList.remove('is-active');
}
});
document.getElementById('create-conversation-button').addEventListener('click', function () {
document.getElementById('conversation-name-input').classList.remove('is-hidden');
document.getElementById('confirm-conversation-button').classList.remove('is-hidden');
document.getElementById('create-conversation-button').classList.add('is-hidden');
document.getElementById('cancel-conversation-button').classList.remove('is-hidden');
document.getElementById('delete-conversation-button').classList.add('is-hidden');
document.getElementById('conversation-list').classList.add('is-hidden');
})
document.getElementById('cancel-conversation-button').addEventListener('click', function () {
document.getElementById('conversation-name-input').classList.add('is-hidden');
document.getElementById('confirm-conversation-button').classList.add('is-hidden');
document.getElementById('create-conversation-button').classList.remove('is-hidden');
document.getElementById('cancel-conversation-button').classList.add('is-hidden');
document.getElementById('delete-conversation-button').classList.remove('is-hidden');
document.getElementById('conversation-list').classList.remove('is-hidden');
})
</script>
</div>
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>