Added stripe payment (pricing table)
This commit is contained in:
@@ -23,7 +23,7 @@
|
||||
|
||||
<div class="column" id="content-column">
|
||||
{% if not IsPlaceholder %}
|
||||
<div class="is-flex is-align-items-start">
|
||||
<div class="{% if not notFlex%} is-flex {% endif %} is-align-items-start">
|
||||
<div class="message-content" id="content-{{ ConversationAreaId }}">
|
||||
{% for message in Messages %}
|
||||
{% if not message.Hidden %}
|
||||
|
||||
@@ -17,111 +17,122 @@
|
||||
<span>{{ LLM.Name }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="is-flex is-justify-content-flex-end">
|
||||
<button class="button is-small is-primary is-outlined mr-2">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-pen"></i>
|
||||
</span>
|
||||
</button>
|
||||
<button class="button is-small is-success is-outlined">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-plus"></i>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let lastSelectedIndex = null;
|
||||
<script>
|
||||
let lastSelectedIndex = null;
|
||||
|
||||
document.addEventListener('keydown', function (event) {
|
||||
if (event.key === 'Shift') {
|
||||
document.body.classList.add('shift-pressed');
|
||||
}
|
||||
});
|
||||
document.addEventListener('keydown', function (event) {
|
||||
if (event.key === 'Shift') {
|
||||
document.body.classList.add('shift-pressed');
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('keyup', function (event) {
|
||||
// If Shift is press and id="chat-input-textarea" not focused
|
||||
if (event.key === 'Shift' && document.activeElement.id !== 'chat-input-textarea') {
|
||||
document.body.classList.remove('shift-pressed');
|
||||
lastSelectedIndex = null;
|
||||
document.addEventListener('keyup', function (event) {
|
||||
// If Shift is press and id="chat-input-textarea" not focused
|
||||
if (event.key === 'Shift' && document.activeElement.id !== 'chat-input-textarea') {
|
||||
document.body.classList.remove('shift-pressed');
|
||||
lastSelectedIndex = null;
|
||||
|
||||
// Remove all "shiftselected" classes
|
||||
// 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'));
|
||||
for (let i = 0; i < elements.length; i++) {
|
||||
elements[i].classList.remove('shiftselected');
|
||||
}
|
||||
const index = elements.indexOf(element);
|
||||
|
||||
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;
|
||||
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');
|
||||
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');
|
||||
}
|
||||
lastSelectedIndex = null;
|
||||
toggleSendButton();
|
||||
}
|
||||
|
||||
const elements2 = Array.from(document.getElementsByClassName('icon-text'));
|
||||
for (let i = 0; i < elements2.length; i++) {
|
||||
elements2[i].classList.remove('shiftselected');
|
||||
document.addEventListener('click', function (event) {
|
||||
if (event.shiftKey) {
|
||||
event.preventDefault();
|
||||
}
|
||||
} 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');
|
||||
});
|
||||
|
||||
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) : '[]';
|
||||
}
|
||||
toggleSendButton();
|
||||
}
|
||||
</script>
|
||||
|
||||
document.addEventListener('click', function (event) {
|
||||
if (event.shiftKey) {
|
||||
event.preventDefault();
|
||||
<style>
|
||||
.selected {
|
||||
border: 2px solid #126d0f;
|
||||
border-radius: 4px;
|
||||
padding: 1px;
|
||||
margin: 2px;
|
||||
}
|
||||
});
|
||||
|
||||
function getSelectedModelsIDs() {
|
||||
var selectedModelsIDs = [];
|
||||
var selectedModels = document.getElementsByClassName('selected');
|
||||
for (var i = 0; i < selectedModels.length; i++) {
|
||||
selectedModelsIDs.push(selectedModels[i].getAttribute('value'));
|
||||
.unselected {
|
||||
border-radius: 4px;
|
||||
padding: 3px;
|
||||
}
|
||||
return selectedModelsIDs.length > 0 ? JSON.stringify(selectedModelsIDs) : '[]';
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.selected {
|
||||
border: 2px solid #126d0f;
|
||||
border-radius: 4px;
|
||||
padding: 1px;
|
||||
margin: 2px;
|
||||
}
|
||||
.shiftselected {
|
||||
background: #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>
|
||||
.shift-pressed *::selection {
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
@@ -82,6 +82,13 @@
|
||||
</form>
|
||||
<p id="api-keys-status"></p>
|
||||
</div>
|
||||
<a class="button is-small mt-1" hx-get="/pricingTable" hx-target="#chat-container" hx-swap="outerHTML"
|
||||
hx-trigger="click">
|
||||
<span class="icon is-small">
|
||||
<i class="fa-solid fa-heart"></i>
|
||||
</span>
|
||||
<span>Subscribe to JADE</span>
|
||||
</a>
|
||||
<a class="button is-small mt-1" href="/signout">
|
||||
<span class="icon is-small">
|
||||
<i class="fa-solid fa-right-from-bracket"></i>
|
||||
|
||||
Reference in New Issue
Block a user