Promote version 509727d to main

Promoted commit 509727d283975ae21c3bb89e1590b61abb075025 to main branch

index.html

@@ -69,11 +69,48 @@
                 <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>
-            <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>
+            <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">
+                        <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">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>
+                    <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">
@@ -135,7 +172,7 @@
                 <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 and start chatting
+                        Select a free model from settings to start chatting
                     </div>
                 </div>
 </div>
@@ -201,6 +238,37 @@ const settingsBtn = document.getElementById('settingsBtn');
         const typingIndicator = document.getElementById('typingIndicator');
         const modelIndicator = document.getElementById('modelIndicator');
         const themeBtns = document.querySelectorAll('.theme-btn');
+        // User management
+        let isRegistering = false;
+
+        function updateAuthUI() {
+            const loggedInUser = localStorage.getItem('chatRouterUser');
+            if (loggedInUser) {
+                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;
+            } 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;
+                showAuthModal();
+            }
+            feather.replace();
+        }
+
+        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;
 
@@ -208,24 +276,172 @@ const settingsBtn = document.getElementById('settingsBtn');
             return 'chat_' + Date.now().toString(36) + Math.random().toString(36).substr(2, 5);
         }
 
+        function loginUser(username, password) {
+            // Simple auth - store user in localStorage
+            localStorage.setItem('chatRouterUser', username);
+            localStorage.setItem(`chatRouterPass_${username}`, password); // Not secure for production!
+            updateAuthUI();
+            
+            // Create a new chat session
+            createNewChat();
+            
+            // Load user's chat list
+            loadChatList(username);
+        }
+        function logoutUser() {
+            const username = localStorage.getItem('chatRouterUser');
+            localStorage.removeItem('chatRouterUser');
+            updateAuthUI();
+            
+            // Clear current chat and sidebar
+            chatContainer.innerHTML = '';
+            chatList.innerHTML = '';
+            currentChatId = null;
+            addMessage('system', 'Please log in to start chatting.');
+        }
         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`;
-            
-            // Clear any saved API key on reload
-            localStorage.removeItem('chatRouterApiKey');
-            localStorage.removeItem('chatRouterModel');
-            sendBtn.disabled = true;
         }
-
         // Free models from OpenRouter
         const freeModels = [
             'alibaba/tongyi-deepresearch-30b-a3b:free',
@@ -264,7 +480,7 @@ async function loadSettings() {
             'mistralai/mistral-nemo:free',
             'google/gemma-2-9b-it:free'
 ];
-        // Fetch available free models
+// Fetch available free models
         async function fetchModels(apiKey) {
             try {
                 // Clear existing options
@@ -285,7 +501,11 @@ async function loadSettings() {
                     option.textContent = modelId;
                     modelSelect.appendChild(option);
                 });
-            } catch (error) {
+// 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}`);
             }
         }
@@ -308,19 +528,27 @@ async function loadSettings() {
                 // Verify API key by fetching models
                 await fetchModels(apiKey);
                 
-                // If successful, enable chat
+                // 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', 'API key verified. You can now start chatting!');
-                createNewChat();
+                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', () => {
@@ -427,6 +655,54 @@ async function sendMessage() {
                 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', () => {
+            if (isRegistering) {
+                const username = regUsername.value.trim();
+                const password = authPassword.value.trim();
+                
+                if (!username || !password) {
+                    alert('Please enter both username and password');
+                    return;
+                }
+                
+                if (localStorage.getItem(`chatRouterPass_${username}`)) {
+                    alert('Username already exists');
+                    return;
+                }
+                
+                loginUser(username, password);
+            } else {
+                const username = regUsername.value.trim();
+                const password = authPassword.value.trim();
+                const storedPass = localStorage.getItem(`chatRouterPass_${username}`);
+                
+                if (!storedPass || storedPass !== password) {
+                    alert('Invalid username or password');
+                    return;
+                }
+                
+                loginUser(username, password);
+            }
+            authModal.classList.add('hidden');
+        });
+        newChatBtn.addEventListener('click', createNewChat);
         newSidebarChat.addEventListener('click', createNewChat);
         
         // Sidebar toggle for mobile
@@ -439,13 +715,26 @@ messageInput.addEventListener('keydown', (e) => {
                 sendMessage();
             }
         });
-        sendBtn.addEventListener('click', sendMessage);
+        sendBtn.addEventListener('click', () => {
+            const username = localStorage.getItem('chatRouterUser');
+            if (username) {
+                sendMessage();
+                saveChatHistory(username, currentChatId);
+            }
+        });
         // Initialize
         loadSettings();
+        updateAuthUI();
         
         // Welcome message
         setTimeout(() => {
-            addMessage('system', 'Welcome to ChatRouter! Please enter your OpenRouter API key & select a model in settings to start chatting.');
+            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
@@ -454,10 +743,6 @@ messageInput.addEventListener('keydown', (e) => {
                 sidebar.classList.add('hidden');
             }
         });
-
-        // Clear chat history on page load
-        localStorage.removeItem('chatRouterApiKey');
-        localStorage.removeItem('chatRouterModel');
 </script>
 </body>
 </html>