Spaces:

Mohit0199
/

chatrouter

Running

File size: 37,546 Bytes

<!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>