Hugging Face's logo

Spaces:
Mohit0199
/
chatrouter
Running

App Files Community
chatrouter / index.html
Mohit0199's picture
Mohit0199
I want to implement a proper user authentication system for my chatbot web app Users should be able to sign up, log in, and log out securely with username, email, and password. Once logged in, users should automatically be taken to the chat interface. Each user should have their own chat history — so when they log in again later, they can see their previous conversations in the sidebar. I want to use Flask backend with a simple database MongoDB.
1697977 verified
raw
history blame
37.5 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ChatRouter - AI Chat Interface</title>
<link rel="icon" type="image/x-icon" href="https://static.photos/technology/200x200/42">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<style>
/* Mobile sidebar positioning */
@media (max-width: 767px) {
#sidebar {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 280px;
z-index: 30;
transform: translateX(-100%);
transition: transform 0.3s ease;
}
#sidebar:not(.hidden) {
transform: translateX(0);
}
}
.chat-height {
height: calc(100vh - 200px);
}
.message-bubble {
max-width: 85%;
word-wrap: break-word;
}
.typing-indicator {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #9ca3af;
margin-right: 4px;
}
.typing-indicator:nth-child(1) {
animation: typing 1s infinite;
}
.typing-indicator:nth-child(2) {
animation: typing 1s infinite 0.2s;
}
.typing-indicator:nth-child(3) {
animation: typing 1s infinite 0.4s;
margin-right: 0;
}
@keyframes typing {
0% { transform: translateY(0); }
50% { transform: translateY(-5px); }
100% { transform: translateY(0); }
}
</style>
</head>
<body class="bg-gradient-to-br from-indigo-900 to-purple-900 text-white">
<div class="container mx-auto px-4 py-8 max-w-7xl">
<!-- Sidebar Toggle for Mobile -->
<button id="sidebarToggle" class="fixed left-4 top-4 z-40 md:hidden bg-gray-800 p-2 rounded-lg">
<i data-feather="menu"></i>
</button>
<header class="flex justify-between items-center mb-8 ml-12 md:ml-0">
<div class="flex items-center space-x-3">
<i data-feather="cpu" class="w-8 h-8 text-indigo-300"></i>
<h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-300 to-purple-300">ChatRouter</h1>
</div>
<div class="flex items-center space-x-2">
<button id="newChatBtn" class="flex items-center space-x-2 bg-indigo-800 hover:bg-indigo-700 px-4 py-2 rounded-lg transition-all">
<i data-feather="plus" class="w-5 h-5"></i>
<span>New Chat</span>
</button>
<button id="settingsBtn" class="flex items-center space-x-2 bg-indigo-800 hover:bg-indigo-700 px-4 py-2 rounded-lg transition-all">
<i data-feather="settings" class="w-5 h-5"></i>
<span>Settings</span>
</button>
<button id="authBtn" class="flex items-center space-x-2 bg-indigo-800 hover:bg-indigo-700 px-4 py-2 rounded-lg transition-all">
<i data-feather="user" class="w-5 h-5"></i>
<span>Login</span>
</button>
</div>
</header>
<!-- Auth Modal -->
<div id="authModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-gray-800 rounded-xl p-6 w-full max-w-md">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-bold" id="authModalTitle">Login</h2>
<button id="closeAuth" class="text-gray-400 hover:text-white">
<i data-feather="x"></i>
</button>
</div>
<div id="authForm" class="space-y-4">
<div id="registerFields" class="hidden space-y-4">
<div>
<label class="block text-sm font-medium mb-1">Username</label>
<input type="text" id="regUsername" placeholder="Choose a username" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
</div>
<div>
<label class="block text-sm font-medium mb-1">Email</label>
<input type="email" id="regEmail" placeholder="Your email address" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
</div>
</div>
<div id="loginFields">
<div>
<label class="block text-sm font-medium mb-1">Username or Email</label>
<input type="text" id="authIdentifier" placeholder="Enter username or email" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
</div>
<div>
<label class="block text-sm font-medium mb-1">Password</label>
<input type="password" id="authPassword" placeholder="Enter your password" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
</div>
</div>
<button id="authActionBtn" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white py-2 rounded-lg transition-colors">Login</button>
<div class="text-center text-sm">
<span id="authToggleText">Don't have an account? </span>
<button id="authToggleBtn" class="text-indigo-400 hover:text-indigo-300">Register</button>
</div>
</div>
</div>
</div>
<!-- Settings Modal -->
<div id="settingsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="bg-gray-800 rounded-xl p-6 w-full max-w-md">
<div class="flex justify-between items-center mb-4">
<h2 class="text-xl font-bold">Chat Settings</h2>
<button id="closeSettings" class="text-gray-400 hover:text-white">
<i data-feather="x"></i>
</button>
</div>
<div class="space-y-4">
<div>
<label class="block text-sm font-medium mb-1">OpenRouter API Key</label>
<input type="password" id="apiKeyInput" placeholder="Enter your API key" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
<p class="text-xs text-gray-400 mt-1">Your key is stored locally and never sent to our servers</p>
</div>
<div>
<label class="block text-sm font-medium mb-1">Select Model</label>
<select id="modelSelect" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
<option value="" disabled selected>Select a free model</option>
<option value="tongyi/deepresearch-30b-a3b">Tongyi DeepResearch 30B A3B (FREE)</option>
<option value="nvidia/nemotron-nano-9b-v2">NVIDIA: Nemotron Nano 9B V2 (FREE)</option>
<option value="meta/llama-3.3-70b-instruct">Meta: Llama 3.3 70B Instruct (FREE)</option>
</select>
<p class="text-xs text-gray-400 mt-1">Free models available without token charges. <a href="https://openrouter.ai/" target="_blank" class="text-indigo-400 hover:text-indigo-300">Get your API key here</a></p>
</div>
<div>
<label class="block text-sm font-medium mb-1">Chat Theme</label>
<div class="flex space-x-2">
<button data-theme="indigo" class="theme-btn w-8 h-8 bg-indigo-600 rounded-full border-2 border-transparent focus:border-white"></button>
<button data-theme="emerald" class="theme-btn w-8 h-8 bg-emerald-600 rounded-full border-2 border-transparent focus:border-white"></button>
<button data-theme="rose" class="theme-btn w-8 h-8 bg-rose-600 rounded-full border-2 border-transparent focus:border-white"></button>
<button data-theme="amber" class="theme-btn w-8 h-8 bg-amber-600 rounded-full border-2 border-transparent focus:border-white"></button>
<button data-theme="cyan" class="theme-btn w-8 h-8 bg-cyan-600 rounded-full border-2 border-transparent focus:border-white"></button>
</div>
</div>
<button id="saveSettings" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white py-2 rounded-lg transition-colors">Save Settings</button>
</div>
</div>
</div>
<div class="flex flex-col md:flex-row gap-6">
<!-- Sidebar -->
<div id="sidebar" class="hidden md:block w-64 bg-gray-800 bg-opacity-60 backdrop-blur-lg rounded-2xl shadow-xl h-[80vh] p-4 overflow-y-auto">
<div class="flex flex-col h-full">
<button id="newSidebarChat" class="flex items-center space-x-2 bg-indigo-600 hover:bg-indigo-500 text-white px-4 py-2 rounded-lg mb-4">
<i data-feather="plus" class="w-4 h-4"></i>
<span>New Chat</span>
</button>
<div id="chatList" class="flex-1 overflow-y-auto space-y-1">
<!-- Chat items will be dynamically added here -->
</div>
</div>
</div>
<!-- Main Chat Container -->
<div class="flex-1 bg-gray-800 bg-opacity-60 backdrop-blur-lg rounded-2xl shadow-xl overflow-hidden">
<!-- Chat Messages -->
<div id="chatContainer" class="chat-height overflow-y-auto p-4 space-y-4">
<div class="flex justify-center">
<div class="bg-gray-700 bg-opacity-50 px-4 py-2 rounded-lg text-sm text-gray-300">
<i data-feather="info" class="inline mr-2 w-4 h-4"></i>
Select a free model from settings to start chatting
</div>
</div>
</div>
<!-- Input Area -->
<div class="border-t border-gray-700 p-4 bg-gray-800">
<div class="flex items-center space-x-2">
<textarea id="messageInput" placeholder="Type your message..." rows="1" class="flex-1 bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-indigo-500 resize-none max-h-32"></textarea>
<button id="sendBtn" class="bg-indigo-600 hover:bg-indigo-500 text-white p-3 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed" disabled>
<i data-feather="send" class="w-5 h-5"></i>
</button>
</div>
<div class="flex justify-between items-center mt-2 text-xs text-gray-400">
<div id="typingIndicator" class="flex items-center hidden">
<span class="mr-2">AI is typing</span>
<div class="typing-indicator"></div>
<div class="typing-indicator"></div>
<div class="typing-indicator"></div>
</div>
<div>
<span id="modelIndicator">No model selected</span>
</div>
</div>
</div>
</div>
</div>
<footer class="mt-8 text-center text-sm text-gray-400">
<p>ChatRouter connects you to the best AI models via OpenRouter</p>
<p class="mt-1">Your conversations stay private and secure</p>
</footer>
</div>
<script>
feather.replace();
// DOM Elements - New Sidebar Elements
const sidebarToggle = document.getElementById('sidebarToggle');
const sidebar = document.getElementById('sidebar');
const newSidebarChat = document.getElementById('newSidebarChat');
const chatList = document.getElementById('chatList');
// DOM Elements - Original
const authBtn = document.getElementById('authBtn');
const authModal = document.getElementById('authModal');
const authModalTitle = document.getElementById('authModalTitle');
const closeAuth = document.getElementById('closeAuth');
const regUsername = document.getElementById('regUsername');
const authPassword = document.getElementById('authPassword');
const authActionBtn = document.getElementById('authActionBtn');
const authToggleBtn = document.getElementById('authToggleBtn');
const authToggleText = document.getElementById('authToggleText');
const registerFields = document.getElementById('registerFields');
const newChatBtn = document.getElementById('newChatBtn');
const settingsBtn = document.getElementById('settingsBtn');
const settingsModal = document.getElementById('settingsModal');
const closeSettings = document.getElementById('closeSettings');
const apiKeyInput = document.getElementById('apiKeyInput');
const modelSelect = document.getElementById('modelSelect');
const saveSettings = document.getElementById('saveSettings');
const messageInput = document.getElementById('messageInput');
const sendBtn = document.getElementById('sendBtn');
const chatContainer = document.getElementById('chatContainer');
const typingIndicator = document.getElementById('typingIndicator');
const modelIndicator = document.getElementById('modelIndicator');
const themeBtns = document.querySelectorAll('.theme-btn');
// User management
let isRegistering = false;
async function updateAuthUI() {
try {
const response = await fetch('/api/auth/status');
const data = await response.json();
if (data.authenticated) {
authBtn.innerHTML = `<i data-feather="log-out" class="w-5 h-5"></i><span>Logout</span>`;
authBtn.dataset.state = 'logout';
document.querySelector('#newChatBtn').disabled = false;
document.querySelector('#settingsBtn').disabled = false;
sendBtn.disabled = false;
// Load user's chat list
loadChatList(data.username);
// Create new chat if none exists
if (!currentChatId) {
createNewChat();
}
} else {
authBtn.innerHTML = `<i data-feather="user" class="w-5 h-5"></i><span>Login</span>`;
authBtn.dataset.state = 'login';
document.querySelector('#newChatBtn').disabled = true;
document.querySelector('#settingsBtn').disabled = true;
sendBtn.disabled = true;
}
feather.replace();
} catch (error) {
console.error('Auth status check failed:', error);
}
}
function showAuthModal(register = false) {
isRegistering = register;
authModalTitle.textContent = register ? 'Register' : 'Login';
authActionBtn.textContent = register ? 'Register' : 'Login';
authToggleText.textContent = register ? 'Already have an account? ' : 'Don\'t have an account? ';
authToggleBtn.textContent = register ? 'Login' : 'Register';
registerFields.classList.toggle('hidden', !register);
authModal.classList.remove('hidden');
}
// Chat management
let currentChatId = null;
function generateChatId() {
return 'chat_' + Date.now().toString(36) + Math.random().toString(36).substr(2, 5);
}
async function loginUser(identifier, password) {
try {
const response = await fetch('/api/auth/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
identifier,
password
})
});
const data = await response.json();
if (data.success) {
updateAuthUI();
} else {
alert(data.message || 'Login failed');
}
} catch (error) {
console.error('Login error:', error);
alert('Login failed. Please try again.');
}
}
async function registerUser(username, email, password) {
try {
const response = await fetch('/api/auth/register', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username,
email,
password
})
});
const data = await response.json();
if (data.success) {
updateAuthUI();
} else {
alert(data.message || 'Registration failed');
}
} catch (error) {
console.error('Registration error:', error);
alert('Registration failed. Please try again.');
}
}
async function logoutUser() {
try {
const response = await fetch('/api/auth/logout', {
method: 'POST'
});
const data = await response.json();
if (data.success) {
// Clear current chat and sidebar
chatContainer.innerHTML = '';
chatList.innerHTML = '';
currentChatId = null;
addMessage('system', 'Please log in to start chatting.');
updateAuthUI();
}
} catch (error) {
console.error('Logout error:', error);
}
}
function createNewChat() {
const username = localStorage.getItem('chatRouterUser');
if (!username) return;
currentChatId = generateChatId();
chatContainer.innerHTML = '';
addMessage('system', '🆕 New chat started.');
saveChatHistory(username, currentChatId);
addChatToList(username, currentChatId, 'New Chat');
}
function loadChatHistory(username, chatId) {
const history = localStorage.getItem(`chatHistory_${username}_${chatId}`);
if (history) {
chatContainer.innerHTML = history;
chatContainer.scrollTop = chatContainer.scrollHeight;
currentChatId = chatId;
}
}
function saveChatHistory(username, chatId) {
if (!chatId) chatId = currentChatId;
if (!username || !chatId) return;
localStorage.setItem(`chatHistory_${username}_${chatId}`, chatContainer.innerHTML);
// Update the chat title if it's the first message
const messages = chatContainer.querySelectorAll('.message-bubble');
if (messages.length === 1) {
updateChatTitle(username, chatId, messages[0].textContent.substring(0, 30));
}
}
function loadChatList(username) {
chatList.innerHTML = '';
const chats = [];
// Find all chats for this user
for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
if (key.startsWith(`chatHistory_${username}_`)) {
const chatId = key.split('_')[2];
const title = localStorage.getItem(`chatTitle_${username}_${chatId}`) || 'New Chat';
chats.push({ id: chatId, title });
}
}
// Sort by most recent first
chats.sort((a, b) => b.id.localeCompare(a.id));
// Add to sidebar
chats.forEach(chat => {
addChatToList(username, chat.id, chat.title);
});
}
function addChatToList(username, chatId, title) {
const chatItem = document.createElement('div');
chatItem.className = 'flex justify-between items-center p-2 hover:bg-gray-700 rounded-lg cursor-pointer';
chatItem.dataset.chatId = chatId;
const titleSpan = document.createElement('span');
titleSpan.className = 'truncate flex-1';
titleSpan.textContent = title;
const actionsDiv = document.createElement('div');
actionsDiv.className = 'flex space-x-2';
const renameBtn = document.createElement('button');
renameBtn.className = 'text-gray-400 hover:text-white';
renameBtn.innerHTML = '<i data-feather="edit-2" class="w-4 h-4"></i>';
renameBtn.onclick = (e) => {
e.stopPropagation();
renameChat(username, chatId, titleSpan);
};
const deleteBtn = document.createElement('button');
deleteBtn.className = 'text-gray-400 hover:text-white';
deleteBtn.innerHTML = '<i data-feather="trash-2" class="w-4 h-4"></i>';
deleteBtn.onclick = (e) => {
e.stopPropagation();
deleteChat(username, chatId, chatItem);
};
actionsDiv.appendChild(renameBtn);
actionsDiv.appendChild(deleteBtn);
chatItem.appendChild(titleSpan);
chatItem.appendChild(actionsDiv);
chatItem.addEventListener('click', () => {
loadChatHistory(username, chatId);
});
chatList.prepend(chatItem);
feather.replace();
}
function updateChatTitle(username, chatId, title) {
localStorage.setItem(`chatTitle_${username}_${chatId}`, title);
const chatItem = chatList.querySelector(`[data-chat-id="${chatId}"]`);
if (chatItem) {
chatItem.querySelector('span').textContent = title;
}
}
function renameChat(username, chatId, titleElement) {
const newTitle = prompt('Enter new chat title:', titleElement.textContent);
if (newTitle && newTitle.trim()) {
localStorage.setItem(`chatTitle_${username}_${chatId}`, newTitle.trim());
titleElement.textContent = newTitle.trim();
}
}
function deleteChat(username, chatId, element) {
if (confirm('Are you sure you want to delete this chat?')) {
localStorage.removeItem(`chatHistory_${username}_${chatId}`);
localStorage.removeItem(`chatTitle_${username}_${chatId}`);
element.remove();
if (currentChatId === chatId) {
createNewChat();
}
}
}
// Load saved settings
async function loadSettings() {
const savedApiKey = localStorage.getItem('chatRouterApiKey');
const savedModel = localStorage.getItem('chatRouterModel');
const savedTheme = localStorage.getItem('chatRouterTheme') || 'indigo';
if (savedApiKey) {
apiKeyInput.value = savedApiKey;
sendBtn.disabled = false;
await fetchModels(savedApiKey); // Load models when API key exists
}
if (savedModel) {
modelSelect.value = savedModel;
modelIndicator.textContent = `Using: ${savedModel.split('/').pop()}`;
}
// Apply theme
document.body.className = `bg-gradient-to-br from-${savedTheme}-900 to-purple-900 text-white`;
}
// Free models from OpenRouter
const freeModels = [
'alibaba/tongyi-deepresearch-30b-a3b:free',
'nvidia/nemotron-nano-9b-v2:free',
'openai/gpt-oss-20b:free',
'z-ai/glm-4.5-air:free',
'tngtech/deepseek-r1t2-chimera:free',
'mistralai/mistral-small-3.2-24b-instruct:free',
'moonshotai/kimi-dev-72b:free',
'mistralai/devstral-small-2505:free',
'google/gemma-3n-e4b-it:free',
'meta-llama/llama-3.3-8b-instruct:free',
'qwen/qwen3-4b:free',
'qwen/qwen3-30b-a3b:free',
'qwen/qwen3-8b:free',
'qwen/qwen3-14b:free',
'qwen/qwen3-235b-a22b:free',
'tngtech/deepseek-r1t-chimera:free',
'microsoft/mai-ds-r1:free',
'shisa-ai/shisa-v2-llama3.3-70b:free',
'meta-llama/llama-4-maverick:free',
'meta-llama/llama-4-scout:free',
'qwen/qwen2.5-vl-32b-instruct:free',
'mistralai/mistral-small-3.1-24b-instruct:free',
'google/gemma-3-4b-it:free',
'google/gemma-3-12b-it:free',
'google/gemma-3-27b-it:free',
'nousresearch/deephermes-3-llama-3-8b-preview:free',
'cognitivecomputations/dolphin3.0-mistral-24b:free',
'qwen/qwen2.5-vl-72b-instruct:free',
'mistralai/mistral-small-24b-instruct-2501:free',
'deepseek/deepseek-r1-distill-llama-70b:free',
'meta-llama/llama-3.3-70b-instruct:free',
'meta-llama/llama-3.2-3b-instruct:free',
'qwen/qwen-2.5-72b-instruct:free',
'mistralai/mistral-nemo:free',
'google/gemma-2-9b-it:free'
];
// Fetch available free models
async function fetchModels(apiKey) {
try {
// Clear existing options
modelSelect.innerHTML = '';
// Add default option
const defaultOption = document.createElement('option');
defaultOption.value = '';
defaultOption.textContent = 'Select a model';
defaultOption.disabled = true;
defaultOption.selected = true;
modelSelect.appendChild(defaultOption);
// Add free models
freeModels.forEach(modelId => {
const option = document.createElement('option');
option.value = modelId;
option.textContent = modelId;
modelSelect.appendChild(option);
});
// Verify API key is still needed for these free models
if (!apiKey) {
addMessage('system', 'Free models selected. Some features may require an API key.');
}
} catch (error) {
addMessage('system', `Error loading models: ${error.message}`);
}
}
// Save settings
saveSettings.addEventListener('click', async () => {
const apiKey = apiKeyInput.value.trim();
const model = modelSelect.value;
if (!apiKey) {
alert('Please enter your OpenRouter API key');
return;
}
if (!model) {
alert('Please select a model');
return;
}
try {
// Verify API key by fetching models
await fetchModels(apiKey);
// If successful, save settings
localStorage.setItem('chatRouterApiKey', apiKey);
localStorage.setItem('chatRouterModel', model);
sendBtn.disabled = false;
modelIndicator.textContent = `Using: ${model.split('/').pop()}`;
settingsModal.classList.add('hidden');
// Add confirmation message to chat
addMessage('system', 'Settings saved successfully. You can now start chatting!');
} catch (error) {
addMessage('system', `Error verifying API key: ${error.message}`);
}
});
// Load models when API key changes
apiKeyInput.addEventListener('blur', async () => {
const apiKey = apiKeyInput.value.trim();
if (apiKey) {
await fetchModels(apiKey);
}
});
// Theme selection
themeBtns.forEach(btn => {
btn.addEventListener('click', () => {
const theme = btn.dataset.theme;
localStorage.setItem('chatRouterTheme', theme);
document.body.className = `bg-gradient-to-br from-${theme}-900 to-purple-900 text-white`;
// Update button colors to match theme
document.querySelectorAll('.bg-indigo-600').forEach(el => {
el.classList.remove('bg-indigo-600', 'hover:bg-indigo-500');
el.classList.add(`bg-${theme}-600`, `hover:bg-${theme}-500`);
});
});
});
// Modal controls
settingsBtn.addEventListener('click', () => {
settingsModal.classList.remove('hidden');
});
closeSettings.addEventListener('click', () => {
settingsModal.classList.add('hidden');
});
// Auto-resize textarea
messageInput.addEventListener('input', () => {
messageInput.style.height = 'auto';
messageInput.style.height = (messageInput.scrollHeight) + 'px';
});
// Add message to chat
function addMessage(role, content) {
const messageDiv = document.createElement('div');
messageDiv.className = `flex ${role === 'user' ? 'justify-end' : 'justify-start'}`;
const bubble = document.createElement('div');
bubble.className = `message-bubble rounded-2xl px-4 py-3 ${role === 'user' ? 'bg-indigo-600 rounded-tr-none' : 'bg-gray-700 rounded-tl-none'}`;
bubble.textContent = content;
messageDiv.appendChild(bubble);
chatContainer.appendChild(messageDiv);
chatContainer.scrollTop = chatContainer.scrollHeight;
// Save to user's chat history
const username = localStorage.getItem('chatRouterUser');
if (username) {
saveChatHistory(username);
}
}
// Handle API errors gracefully
function handleApiError(error) {
const errorMsg = error.message.toLowerCase();
if (errorMsg.includes('payment') || errorMsg.includes('unauthorized')) {
addMessage('system', '⚠️ This model requires a paid OpenRouter plan. Please select a free model to continue.');
} else {
addMessage('system', `Error: ${error.message}`);
}
}
// Send message to OpenRouter
async function sendMessage() {
const message = messageInput.value.trim();
if (!message) return;
const apiKey = localStorage.getItem('chatRouterApiKey');
const model = localStorage.getItem('chatRouterModel');
if (!apiKey || !model) {
addMessage('system', 'Please configure your API key and model in settings first.');
return;
}
// Add user message to chat
addMessage('user', message);
messageInput.value = '';
messageInput.style.height = 'auto';
// Show typing indicator
typingIndicator.classList.remove('hidden');
try {
const response = await fetch('https://openrouter.ai/api/v1/chat/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}`,
'HTTP-Referer': window.location.href,
'X-Title': 'ChatRouter'
},
body: JSON.stringify({
model: model,
messages: [{ role: 'user', content: message }]
})
});
const data = await response.json();
if (data.error) {
addMessage('system', `Error: ${data.error.message}`);
} else if (data.choices && data.choices[0].message.content) {
addMessage('assistant', data.choices[0].message.content);
}
} catch (error) {
addMessage('system', `Error: ${error.message}`);
} finally {
typingIndicator.classList.add('hidden');
}
}
// Event listeners
authBtn.addEventListener('click', () => {
if (authBtn.dataset.state === 'logout') {
logoutUser();
} else {
showAuthModal();
}
});
closeAuth.addEventListener('click', () => {
authModal.classList.add('hidden');
});
authToggleBtn.addEventListener('click', () => {
showAuthModal(!isRegistering);
});
authActionBtn.addEventListener('click', async () => {
if (isRegistering) {
const username = regUsername.value.trim();
const email = regEmail.value.trim();
const password = authPassword.value.trim();
if (!username || !email || !password) {
alert('Please fill all fields');
return;
}
if (password.length < 6) {
alert('Password must be at least 6 characters');
return;
}
await registerUser(username, email, password);
} else {
const identifier = authIdentifier.value.trim();
const password = authPassword.value.trim();
if (!identifier || !password) {
alert('Please fill all fields');
return;
}
await loginUser(identifier, password);
}
authModal.classList.add('hidden');
});
newChatBtn.addEventListener('click', createNewChat);
newSidebarChat.addEventListener('click', createNewChat);
// Sidebar toggle for mobile
sidebarToggle.addEventListener('click', () => {
sidebar.classList.toggle('hidden');
});
messageInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
sendMessage();
}
});
sendBtn.addEventListener('click', () => {
const username = localStorage.getItem('chatRouterUser');
if (username) {
sendMessage();
saveChatHistory(username, currentChatId);
}
});
// Initialize
loadSettings();
updateAuthUI();
// Welcome message
setTimeout(() => {
if (!localStorage.getItem('chatRouterUser')) {
addMessage('system', 'Welcome to ChatRouter! Please log in to start chatting.');
} else if (!localStorage.getItem('chatRouterModel')) {
addMessage('system', 'Please select a free model from settings to begin.');
} else if (!currentChatId) {
createNewChat();
}
}, 1000);
// Close sidebar when clicking outside on mobile
document.addEventListener('click', (e) => {
if (window.innerWidth < 768 && !sidebar.contains(e.target) && e.target !== sidebarToggle) {
sidebar.classList.add('hidden');
}
});
</script>
</body>
</html>