officialsaswat commited on
Commit
50ee96e
·
verified ·
1 Parent(s): 6e08948

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
Files changed (1) hide show
  1. chat.html +25 -101
chat.html CHANGED
@@ -306,65 +306,15 @@ aiResponsesContainer.appendChild(errorDiv);
306
  feather.replace();
307
  }
308
  }
309
- // API Key Modal
310
- const apiKeyModal = document.createElement('div');
311
- apiKeyModal.id = 'apiKeyModal';
312
- apiKeyModal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden';
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
- function saveApiKey() {
338
- const apiKey = document.getElementById('apiKeyInput').value.trim();
339
- if (apiKey) {
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
- const apiKey = localStorage.getItem('openrouter_api_key');
388
- if (!apiKey) {
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
- if (!apiKey) {
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
- // Add API key button to header
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();