246 lines
10 KiB
HTML
246 lines
10 KiB
HTML
<div class="dropdown is-up is-right" id="settings-dropdown">
|
|
<div class="dropdown-trigger">
|
|
<button class="button is-small {% if not AnyExists %}is-danger{% endif %} to-reduce-opacity"
|
|
aria-haspopup="true"
|
|
aria-controls="dropdown-menu3"
|
|
onclick="this.parentElement.parentElement.classList.toggle('is-active')">
|
|
<span class="icon"><i class="fa-solid fa-bars"></i></i></span>
|
|
</button>
|
|
</div>
|
|
<div class="dropdown-menu" id="dropdown-menu3" role="menu">
|
|
<div class="dropdown-content">
|
|
<div class="dropdown-item">
|
|
<div class="field">
|
|
<form id="api-keys-form"
|
|
hx-post="/addKeys"
|
|
hx-trigger="submit"
|
|
hx-target="#api-keys-status">
|
|
<div class="field has-addons is-hidden" id="openai-field">
|
|
<p class="control has-icons-left is-expanded">
|
|
<input class="input is-small {% if OpenaiExists %}is-success{% endif %}"
|
|
type="text"
|
|
{% if not IsLogin %}disabled{% endif %}
|
|
placeholder="OpenAI API key"
|
|
name="openai_key"
|
|
autocomplete="off">
|
|
<span class="icon is-small is-left">
|
|
<i class="fas fa-lock"></i>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div class="field has-addons is-hidden" id="anthropic-field">
|
|
<p class="control has-icons-left is-expanded">
|
|
<input class="input is-small {% if AnthropicExists %}is-success{% endif %}"
|
|
type="text"
|
|
{% if not IsLogin %}disabled{% endif %}
|
|
placeholder="Anthropic API key"
|
|
name="anthropic_key"
|
|
autocomplete="off">
|
|
<span class="icon is-small is-left">
|
|
<i class="fas fa-lock"></i>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div class="field has-addons is-hidden" id="mistral-field">
|
|
<p class="control has-icons-left is-expanded">
|
|
<input class="input is-small {% if MistralExists %}is-success{% endif %}"
|
|
type="text"
|
|
{% if not IsLogin %}disabled{% endif %}
|
|
placeholder="Mistral API key"
|
|
name="mistral_key"
|
|
autocomplete="off">
|
|
<span class="icon is-small is-left">
|
|
<i class="fas fa-lock"></i>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div class="field has-addons is-hidden" id="groq-field">
|
|
<p class="control has-icons-left is-expanded">
|
|
<input class="input is-small {% if GroqExists %}is-success{% endif %}"
|
|
type="text"
|
|
placeholder="Groq API key"
|
|
{% if not IsLogin %}disabled{% endif %}
|
|
name="groq_key"
|
|
autocomplete="off">
|
|
<span class="icon is-small is-left">
|
|
<i class="fas fa-lock"></i>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div class="field has-addons is-hidden" id="gemini-field">
|
|
<p class="control has-icons-left is-expanded">
|
|
<input class="input is-small {% if GoogleExists %}is-success{% endif %}"
|
|
type="text"
|
|
placeholder="Google API key"
|
|
name="google_key"
|
|
autocomplete="off">
|
|
<span class="icon is-small is-left">
|
|
<i class="fas fa-lock"></i>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div class="field has-addons is-hidden" id="nim-field">
|
|
<p class="control has-icons-left is-expanded">
|
|
<input class="input is-small {% if NimExists %}is-success{% endif %}"
|
|
type="text"
|
|
placeholder="NIM API key"
|
|
name="nim_key"
|
|
autocomplete="off">
|
|
<span class="icon is-small is-left">
|
|
<i class="fas fa-lock"></i>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div class="field has-addons is-hidden" id="perplexity-field">
|
|
<p class="control has-icons-left is-expanded">
|
|
<input class="input is-small {% if PerplexityExists %}is-success{% endif %}"
|
|
type="text"
|
|
placeholder="Perplexity API key"
|
|
name="perplexity_key"
|
|
autocomplete="off">
|
|
<span class="icon is-small is-left">
|
|
<i class="fas fa-lock"></i>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div class="field has-addons is-hidden" id="fireworks-field">
|
|
<p class="control has-icons-left is-expanded">
|
|
<input class="input is-small {% if FireworksExists %}is-success{% endif %}"
|
|
type="text"
|
|
placeholder="Fireworks API key"
|
|
name="fireworks_key"
|
|
autocomplete="off">
|
|
<span class="icon is-small is-left">
|
|
<i class="fas fa-lock"></i>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div class="field has-addons is-hidden" id="together-field">
|
|
<p class="control has-icons-left is-expanded">
|
|
<input class="input is-small {% if TogetherExists %}is-success{% endif %}"
|
|
type="text"
|
|
placeholder="Together AI API key"
|
|
name="together_key"
|
|
autocomplete="off">
|
|
<span class="icon is-small is-left">
|
|
<i class="fas fa-lock"></i>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div class="field has-addons is-hidden" id="deepseek-field">
|
|
<p class="control has-icons-left is-expanded">
|
|
<input class="input is-small {% if DeepseekExists %}is-success{% endif %}"
|
|
type="text"
|
|
placeholder="DeepSeek API key"
|
|
name="deepseek_key"
|
|
autocomplete="off">
|
|
<span class="icon is-small is-left">
|
|
<i class="fas fa-lock"></i>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
<div class="field has-addons" id="save-field">
|
|
<p class="control">
|
|
<button disabled id="save-keys-button" type="submit" class="button is-small">
|
|
<span class="icon is-small">
|
|
<i class="fas fa-check"></i>
|
|
</span>
|
|
<span>Save keys</span>
|
|
</button>
|
|
</p>
|
|
<p class="control">
|
|
<button id="toggle-keys-button"
|
|
type="button"
|
|
class="button is-small {% if not AnyExists %}is-danger{% endif %}">
|
|
<span class="icon is-small">
|
|
<i id="toggle-keys-icon" class="fa-solid fa-chevron-down"></i>
|
|
</span>
|
|
</button>
|
|
</p>
|
|
</div>
|
|
</form>
|
|
<p id="api-keys-status"></p>
|
|
</div>
|
|
{% if isBasic or isPremium %}
|
|
<a class="button is-small mt-1"
|
|
href="{{ StripeSubLink }}"
|
|
target="_blank">
|
|
<span class="icon is-small"
|
|
{% if isPremium %}style="color: #b00202" {% else %}style="color: #126d0f" {% endif %}>
|
|
<i class="fa-solid fa-heart"></i>
|
|
</span>
|
|
<span>Manage subscription</span>
|
|
</a>
|
|
{% else %}
|
|
<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>
|
|
{% endif %}
|
|
<a class="button is-small mt-1"
|
|
hx-get="/generateTermAndService"
|
|
hx-target="#chat-container"
|
|
hx-swap="outerHTML"
|
|
hx-trigger="click">
|
|
<span class="icon is-small">
|
|
<i class="fa-regular fa-file-lines"></i>
|
|
</span>
|
|
<span>Terms and conditions</span>
|
|
</a>
|
|
<a class="button is-small mt-1"
|
|
hx-get="/help"
|
|
hx-target="#chat-container"
|
|
hx-swap="outerHTML"
|
|
hx-trigger="click">
|
|
<span class="icon is-small">
|
|
<i class="fa-solid fa-info"></i>
|
|
</span>
|
|
<span>Help</span>
|
|
</a>
|
|
<a class="button is-small mt-1" href="https://www.bouvai.com/contact">
|
|
<span class="icon is-small">
|
|
<i class="fa-solid fa-address-card"></i>
|
|
</span>
|
|
<span>Contact</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>
|
|
</span>
|
|
<span>Sign out</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('click', function (event) {
|
|
if (!document.getElementById('settings-dropdown').contains(event.target)) {
|
|
document.getElementById('settings-dropdown').classList.remove('is-active');
|
|
}
|
|
});
|
|
|
|
document.getElementById('toggle-keys-button').addEventListener('click', function () {
|
|
// Do not take the id="save-field"
|
|
var fields = document.querySelectorAll("#api-keys-form .field.has-addons");
|
|
var saveButton = document.getElementById('save-keys-button');
|
|
var toggleIcon = document.getElementById('toggle-keys-icon');
|
|
|
|
fields.forEach(function (field) {
|
|
if (field.id == "save-field") return;
|
|
field.classList.toggle('is-hidden');
|
|
});
|
|
|
|
saveButton.disabled = !saveButton.disabled;
|
|
toggleIcon.classList.toggle('fa-chevron-up');
|
|
toggleIcon.classList.toggle('fa-chevron-down');
|
|
});
|
|
</script>
|