integrate this api key to the chatbot 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 and the user may not get error of adding api key in the chatbot integrate and make the chatbot answerable
Browse files
chat.html
CHANGED
|
@@ -306,65 +306,15 @@ aiResponsesContainer.appendChild(errorDiv);
|
|
| 306 |
feather.replace();
|
| 307 |
}
|
| 308 |
}
|
| 309 |
-
// API
|
| 310 |
-
const
|
| 311 |
-
|
| 312 |
-
|
| 313 |
-
apiKeyModal.innerHTML = `
|
| 314 |
-
<div class="bg-white rounded-lg p-6 max-w-md w-full">
|
| 315 |
-
<div class="flex justify-between items-center mb-4">
|
| 316 |
-
<h3 class="text-xl font-bold">Enter OpenRouter API Key</h3>
|
| 317 |
-
<button onclick="document.getElementById('apiKeyModal').classList.add('hidden')" class="text-gray-500 hover:text-gray-700">
|
| 318 |
-
<i data-feather="x"></i>
|
| 319 |
-
</button>
|
| 320 |
-
</div>
|
| 321 |
-
<p class="text-gray-600 mb-4">Get your free API key from <a href="https://openrouter.ai/keys" target="_blank" class="text-blue-600 hover:underline">OpenRouter.ai</a></p>
|
| 322 |
-
<input type="password" id="apiKeyInput" class="w-full border border-gray-300 rounded-lg px-4 py-2 mb-4" placeholder="sk-or-..." value="${localStorage.getItem('openrouter_api_key') || ''}">
|
| 323 |
-
<div class="flex justify-end space-x-3">
|
| 324 |
-
<button onclick="document.getElementById('apiKeyModal').classList.add('hidden')" class="px-4 py-2 border border-gray-300 rounded-lg">Cancel</button>
|
| 325 |
-
<button onclick="saveApiKey()" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Save</button>
|
| 326 |
-
</div>
|
| 327 |
-
</div>
|
| 328 |
-
`;
|
| 329 |
-
document.body.appendChild(apiKeyModal);
|
| 330 |
-
function showApiKeyModal() {
|
| 331 |
-
const modal = document.getElementById('apiKeyModal');
|
| 332 |
-
modal.classList.remove('hidden');
|
| 333 |
-
document.getElementById('apiKeyInput').value = localStorage.getItem('openrouter_api_key') || '';
|
| 334 |
-
feather.replace();
|
| 335 |
}
|
| 336 |
|
| 337 |
-
|
| 338 |
-
|
| 339 |
-
|
| 340 |
-
// Validate the key format
|
| 341 |
-
if (!apiKey.startsWith('sk-or-')) {
|
| 342 |
-
alert('Please enter a valid OpenRouter API key starting with "sk-or-"');
|
| 343 |
-
return;
|
| 344 |
-
}
|
| 345 |
-
|
| 346 |
-
localStorage.setItem('openrouter_api_key', apiKey);
|
| 347 |
-
document.getElementById('apiKeyModal').classList.add('hidden');
|
| 348 |
-
|
| 349 |
-
// Show success message
|
| 350 |
-
const successDiv = document.createElement('div');
|
| 351 |
-
successDiv.className = 'bg-green-50 border-l-4 border-green-500 p-4 rounded-r-lg mb-4';
|
| 352 |
-
successDiv.innerHTML = `
|
| 353 |
-
<div class="flex items-center">
|
| 354 |
-
<i data-feather="check-circle" class="w-5 h-5 text-green-500 mr-2"></i>
|
| 355 |
-
<span>API Key saved successfully!</span>
|
| 356 |
-
</div>
|
| 357 |
-
`;
|
| 358 |
-
aiResponsesContainer.prepend(successDiv);
|
| 359 |
-
feather.replace();
|
| 360 |
-
|
| 361 |
-
// Refresh the chat to use the new key
|
| 362 |
-
startNewChat();
|
| 363 |
-
} else {
|
| 364 |
-
alert('Please enter your API key');
|
| 365 |
-
}
|
| 366 |
-
}
|
| 367 |
-
function createResponseElement(model, content) {
|
| 368 |
const div = document.createElement('div');
|
| 369 |
div.className = 'message animate-slide-up';
|
| 370 |
div.innerHTML = `
|
|
@@ -384,12 +334,8 @@ aiResponsesContainer.appendChild(errorDiv);
|
|
| 384 |
async
|
| 385 |
async function getAIResponse(modelId, message) {
|
| 386 |
// Check if API key exists
|
| 387 |
-
|
| 388 |
-
|
| 389 |
-
throw new Error('API key required. Please set your OpenRouter API key to continue.');
|
| 390 |
-
}
|
| 391 |
-
|
| 392 |
-
// Show loading indicator
|
| 393 |
const loadingId = 'loading-' + Date.now();
|
| 394 |
const loadingDiv = createResponseElement('chatgpt', 'Connecting to AI...', true);
|
| 395 |
loadingDiv.id = loadingId;
|
|
@@ -437,12 +383,8 @@ async
|
|
| 437 |
throw error;
|
| 438 |
}
|
| 439 |
}
|
| 440 |
-
const apiKey = localStorage.getItem('openrouter_api_key');
|
| 441 |
-
|
| 442 |
-
throw new Error('API key required. Please set your OpenRouter API key to continue.');
|
| 443 |
-
}
|
| 444 |
-
|
| 445 |
-
try {
|
| 446 |
const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
|
| 447 |
method: 'POST',
|
| 448 |
headers: {
|
|
@@ -494,32 +436,21 @@ chatHistory.push(chatItem);
|
|
| 494 |
}
|
| 495 |
// Initialize on load
|
| 496 |
document.addEventListener('DOMContentLoaded', function() {
|
| 497 |
-
const apiKey = localStorage.getItem('openrouter_api_key');
|
| 498 |
-
if (!apiKey) {
|
| 499 |
-
// Show welcome message with API key instructions
|
| 500 |
-
const welcomeDiv = document.createElement('div');
|
| 501 |
-
welcomeDiv.className = 'bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r-lg mb-6';
|
| 502 |
-
welcomeDiv.innerHTML = `
|
| 503 |
-
<div class="flex items-center mb-2">
|
| 504 |
-
<i data-feather="info" class="w-5 h-5 text-blue-500 mr-2"></i>
|
| 505 |
-
<h3 class="font-medium">Welcome to Saswat AI!</h3>
|
| 506 |
-
</div>
|
| 507 |
-
<p class="text-gray-700 mb-4">To get started, you'll need a free API key from OpenRouter:</p>
|
| 508 |
-
<ol class="list-decimal pl-5 space-y-1 text-sm mb-4">
|
| 509 |
-
<li>Visit <a href="https://openrouter.ai/keys" target="_blank" class="text-blue-600 hover:underline">OpenRouter Keys</a></li>
|
| 510 |
-
<li>Sign up or log in (it's free)</li>
|
| 511 |
-
<li>Copy your API key (starts with "sk-or-")</li>
|
| 512 |
-
<li>Click the <i data-feather="key" class="inline w-4 h-4"></i> button above to paste it</li>
|
| 513 |
-
</ol>
|
| 514 |
-
<button onclick="showApiKeyModal()" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg">
|
| 515 |
-
<i data-feather="key" class="w-4 h-4 mr-1"></i> Enter API Key
|
| 516 |
-
</button>
|
| 517 |
-
`;
|
| 518 |
-
aiResponsesContainer.appendChild(welcomeDiv);
|
| 519 |
-
feather.replace();
|
| 520 |
-
}
|
| 521 |
loadChatHistory();
|
| 522 |
feather.replace();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 523 |
});
|
| 524 |
function updateChatHistoryUI() {
|
| 525 |
chatHistoryList.innerHTML = '';
|
|
@@ -541,14 +472,7 @@ if (chatHistory.length === 0) {
|
|
| 541 |
|
| 542 |
feather.replace({width: 16, height: 16}, chatHistoryList);
|
| 543 |
}
|
| 544 |
-
|
| 545 |
-
const header = document.querySelector('header > div');
|
| 546 |
-
const apiKeyBtn = document.createElement('button');
|
| 547 |
-
apiKeyBtn.className = 'bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-lg text-sm ml-4';
|
| 548 |
-
apiKeyBtn.innerHTML = '<i data-feather="key" class="w-4 h-4 mr-1"></i> API Key';
|
| 549 |
-
apiKeyBtn.onclick = showApiKeyModal;
|
| 550 |
-
header.appendChild(apiKeyBtn);
|
| 551 |
-
function loadChatFromHistory(index) {
|
| 552 |
const chat = chatHistory[index];
|
| 553 |
// Clear current chat
|
| 554 |
startNewChat();
|
|
|
|
| 306 |
feather.replace();
|
| 307 |
}
|
| 308 |
}
|
| 309 |
+
// Set default API key
|
| 310 |
+
const DEFAULT_API_KEY = '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';
|
| 311 |
+
if (!localStorage.getItem('openrouter_api_key')) {
|
| 312 |
+
localStorage.setItem('openrouter_api_key', DEFAULT_API_KEY);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 313 |
}
|
| 314 |
|
| 315 |
+
// Remove API key button and modal since we have a default key
|
| 316 |
+
document.getElementById('apiKeyBtn').remove();
|
| 317 |
+
function createResponseElement(model, content) {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 318 |
const div = document.createElement('div');
|
| 319 |
div.className = 'message animate-slide-up';
|
| 320 |
div.innerHTML = `
|
|
|
|
| 334 |
async
|
| 335 |
async function getAIResponse(modelId, message) {
|
| 336 |
// Check if API key exists
|
| 337 |
+
const apiKey = localStorage.getItem('openrouter_api_key') || DEFAULT_API_KEY;
|
| 338 |
+
// Show loading indicator
|
|
|
|
|
|
|
|
|
|
|
|
|
| 339 |
const loadingId = 'loading-' + Date.now();
|
| 340 |
const loadingDiv = createResponseElement('chatgpt', 'Connecting to AI...', true);
|
| 341 |
loadingDiv.id = loadingId;
|
|
|
|
| 383 |
throw error;
|
| 384 |
}
|
| 385 |
}
|
| 386 |
+
const apiKey = localStorage.getItem('openrouter_api_key') || DEFAULT_API_KEY;
|
| 387 |
+
try {
|
|
|
|
|
|
|
|
|
|
|
|
|
| 388 |
const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
|
| 389 |
method: 'POST',
|
| 390 |
headers: {
|
|
|
|
| 436 |
}
|
| 437 |
// Initialize on load
|
| 438 |
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 439 |
loadChatHistory();
|
| 440 |
feather.replace();
|
| 441 |
+
|
| 442 |
+
// Show welcome message
|
| 443 |
+
const welcomeDiv = document.createElement('div');
|
| 444 |
+
welcomeDiv.className = 'bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r-lg mb-6';
|
| 445 |
+
welcomeDiv.innerHTML = `
|
| 446 |
+
<div class="flex items-center mb-2">
|
| 447 |
+
<i data-feather="info" class="w-5 h-5 text-blue-500 mr-2"></i>
|
| 448 |
+
<h3 class="font-medium">Welcome to Saswat AI!</h3>
|
| 449 |
+
</div>
|
| 450 |
+
<p class="text-gray-700">You can start chatting immediately with our premium AI models.</p>
|
| 451 |
+
`;
|
| 452 |
+
aiResponsesContainer.appendChild(welcomeDiv);
|
| 453 |
+
feather.replace();
|
| 454 |
});
|
| 455 |
function updateChatHistoryUI() {
|
| 456 |
chatHistoryList.innerHTML = '';
|
|
|
|
| 472 |
|
| 473 |
feather.replace({width: 16, height: 16}, chatHistoryList);
|
| 474 |
}
|
| 475 |
+
function loadChatFromHistory(index) {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 476 |
const chat = chatHistory[index];
|
| 477 |
// Clear current chat
|
| 478 |
startNewChat();
|