Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 47 additions & 56 deletions support/dashboard.html
Original file line number Diff line number Diff line change
Expand Up @@ -381,8 +381,8 @@ <h1 class="text-2xl text-wikiBlue flex items-center gap-3">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>
</div>
<div>
<h3 class="text-textPrimary font-semibold text-sm">Github Auto-sync</h3>
<p class="text-xs text-textSecondary">Manage github auto-sync for live sync</p>
<h3 class="text-textPrimary font-semibold text-sm">Github Auto-sync Status Key</h3>
<p class="text-xs text-textSecondary">Manage github auto-sync status keys for live sync</p>
</div>
</div>
<button onclick="openDrawer('webhook-drawer')" class="btn-action w-full text-center py-2 bg-gray-50">Configure Github Auto-sync</button>
Expand Down Expand Up @@ -571,32 +571,28 @@ <h2 class="text-lg font-semibold text-textPrimary tracking-tight">LLM Keys</h2>
</button>
</div>
<div class="p-6 flex-1 overflow-y-auto space-y-5">
<div>
<label class="block text-xs font-semibold text-gray-600 mb-1.5 uppercase tracking-wide">OpenAI API Key</label>
<input type="password" id="llm-key-openai" oninput="handleLlmKeyInput(this)" value="" placeholder="sk-..." class="w-full border border-gray-300 rounded-md px-3 py-2.5 text-sm text-gray-800 focus:outline-none focus:border-purple-400 focus:ring-2 focus:ring-purple-100 transition-all font-mono disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed" />
</div>
<div>
<label class="block text-xs font-semibold text-gray-600 mb-1.5 uppercase tracking-wide">Anthropic API Key</label>
<input type="password" id="llm-key-anthropic" oninput="handleLlmKeyInput(this)" value="" placeholder="sk-ant-..." class="w-full border border-gray-300 rounded-md px-3 py-2.5 text-sm text-gray-800 focus:outline-none focus:border-purple-400 focus:ring-2 focus:ring-purple-100 transition-all font-mono disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed" />
</div>
<div>
<label class="block text-xs font-semibold text-gray-600 mb-1.5 uppercase tracking-wide">Google Gemini Key</label>
<input type="password" id="llm-key-gemini" oninput="handleLlmKeyInput(this)" value="" placeholder="AIzaSy..." class="w-full border border-gray-300 rounded-md px-3 py-2.5 text-sm text-gray-800 focus:outline-none focus:border-purple-400 focus:ring-2 focus:ring-purple-100 transition-all font-mono disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed" />
<label class="block text-xs font-semibold text-gray-600 mb-1.5 uppercase tracking-wide">Groq Key</label>
<input type="password" id="llm-key-groq" oninput="handleLlmKeyInput(this)" value="" placeholder="gsk_..." class="w-full border border-gray-300 rounded-md px-3 py-2.5 text-sm text-gray-800 focus:outline-none focus:border-purple-400 focus:ring-2 focus:ring-purple-100 transition-all font-mono disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed" />
</div>
<div class="pt-2 border-t border-gray-100">
<!-- <div class="pt-2 border-t border-gray-100">
<label class="block text-xs font-semibold text-gray-600 mb-1.5 mt-3 uppercase tracking-wide">Default Routing Model</label>
<div class="relative">
<select id="llm-routing-model" class="w-full border border-gray-300 rounded-md px-3 py-2.5 text-sm text-gray-800 focus:outline-none focus:border-purple-400 focus:ring-2 focus:ring-purple-100 transition-all appearance-none bg-white font-medium cursor-pointer">
<select id="llm-routing-model" disabled class="w-full border border-gray-300 rounded-md px-3 py-2.5 text-sm text-gray-800 focus:outline-none focus:border-purple-400 focus:ring-2 focus:ring-purple-100 transition-all appearance-none bg-gray-100 font-medium cursor-not-allowed">
<option value="gpt-4o">GPT-4o (OpenAI)</option>
<option value="claude-3-5-sonnet">Claude 3.5 Sonnet (Anthropic)</option>
<option value="gemini-1-5-pro">Gemini 1.5 Pro (Google)</option>
<option value="groq">Groq</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-gray-500">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
</div>
</div>
<p class="mt-1.5 text-xs text-gray-500">Select the default model for incoming tasks.</p>
</div>
</div> -->
</div>
<div class="p-5 border-t border-gray-100 bg-gray-50 flex justify-end gap-3 rounded-bl-lg rounded-br-lg">
<button onclick="closeDrawers()" class="btn-action text-sm px-5 py-2 font-medium border-0 shadow-sm bg-white border border-gray-200">Cancel</button>
Expand Down Expand Up @@ -697,25 +693,18 @@ <h2 class="text-lg font-semibold text-textPrimary tracking-tight">LLM Keys</h2>
}

function handleLlmKeyInput(element) {
const openai = document.getElementById('llm-key-openai');
const anthropic = document.getElementById('llm-key-anthropic');
const gemini = document.getElementById('llm-key-gemini');
const groq = document.getElementById('llm-key-groq');
const select = document.getElementById('llm-routing-model');

const hasValue = element.value.trim() !== '';

if (element.id === 'llm-key-openai') {
anthropic.disabled = hasValue;
gemini.disabled = hasValue;
if (hasValue) select.value = 'gpt-4o';
} else if (element.id === 'llm-key-anthropic') {
openai.disabled = hasValue;
gemini.disabled = hasValue;
if (hasValue) select.value = 'claude-3-5-sonnet';
} else if (element.id === 'llm-key-gemini') {
openai.disabled = hasValue;
anthropic.disabled = hasValue;
if (hasValue) select.value = 'gemini-1-5-pro';
if (element.id === 'llm-key-anthropic') {
if (groq) groq.disabled = hasValue;
if (select && hasValue) select.value = 'claude-3-5-sonnet';
} else if (element.id === 'llm-key-groq') {
if (anthropic) anthropic.disabled = hasValue;
if (select && hasValue) select.value = 'groq';
}
}

Expand All @@ -726,45 +715,47 @@ <h2 class="text-lg font-semibold text-textPrimary tracking-tight">LLM Keys</h2>
btn.disabled = true;
btn.classList.add('opacity-70', 'cursor-not-allowed');

const select = document.getElementById('llm-routing-model');
const keyName = select.value;

let keyValue = '';
if (keyName === 'gpt-4o') {
keyValue = document.getElementById('llm-key-openai').value;
} else if (keyName === 'claude-3-5-sonnet') {
keyValue = document.getElementById('llm-key-anthropic').value;
} else if (keyName === 'gemini-1-5-pro') {
keyValue = document.getElementById('llm-key-gemini').value;
}
const anthropicKey = document.getElementById('llm-key-anthropic')?.value;
const groqKey = document.getElementById('llm-key-groq')?.value;

try {
let metricsHostname = 'docs-embeddings-qdrant.zapconnecthub.com';
if (window.location.hostname && window.location.hostname !== 'localhost' && window.location.hostname !== '127.0.0.1') {
metricsHostname = window.location.hostname.replace('wikijs', 'docs-embeddings-qdrant');
}
const response = await fetch(`https://${metricsHostname}/keys`, {
method: 'POST',
headers: {
'accept': 'application/json',
'Authorization': `Bearer ${sessionStorage.getItem('wiki_dashboard_jwt') || ''}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
key_name: keyName,
key_value: keyValue
})
});

if (!response.ok) {
console.error('Failed to save LLM Key', response.statusText);
showToast('Failed to save LLM key', true);
const saveKey = async (name, value) => {
if (!value) return true; // Nothing to save
const response = await fetch(`https://${metricsHostname}/keys`, {
method: 'POST',
headers: {
'accept': 'application/json',
'Authorization': `Bearer ${sessionStorage.getItem('wiki_dashboard_jwt') || ''}`,
'Content-Type': 'application/json'
},
body: JSON.stringify({
key_name: name,
key_value: value
})
});
if (!response.ok) {
console.error(`Failed to save ${name}`, response.statusText);
return false;
}
return true;
};

const savedAnthropic = await saveKey('ANTHROPIC_API_KEY', anthropicKey);
const savedGroq = await saveKey('GROQ_API_KEY', groqKey);

if (!savedAnthropic || !savedGroq) {
showToast('Failed to save one or more LLM keys', true);
} else {
showToast('LLM key saved successfully');
showToast('LLM keys saved successfully');
}
} catch (err) {
console.error('Request failed', err);
showToast('Network error, failed to save LLM key', true);
showToast('Network error, failed to save LLM keys', true);
} finally {
closeDrawers();
setTimeout(() => {
Expand Down Expand Up @@ -820,7 +811,7 @@ <h2 class="text-lg font-semibold text-textPrimary tracking-tight">LLM Keys</h2>
}, 500);
}

document.addEventListener('DOMContentLoaded', () => {
// document.addEventListener('DOMContentLoaded', () => {
const loginModal = document.getElementById('login-modal');
const loginForm = document.getElementById('login-form');
const loginError = document.getElementById('login-error');
Expand Down Expand Up @@ -1113,7 +1104,7 @@ <h4 class="text-textPrimary font-semibold text-sm w-48">${s.name}</h4>
loginSubmit.innerHTML = originalText;
}
});
});

</script>
</body>
</html>