Spaces:

Mohit0199
/

chatrouter

Running

App Files Files Community

Mohit0199 commited on Oct 13

Commit

12ec3a5

verified ·

1 Parent(s): 5387391

Promote version 17d21e3 to main

Browse files

Promoted commit 17d21e38cdb24ed9c6774122ce39cba0596e45ca to main branch

Files changed (1) hide show

index.html +18 -207

index.html CHANGED Viewed

@@ -42,27 +42,8 @@
     </style>
 </head>
 <body class="bg-gradient-to-br from-indigo-900 to-purple-900 text-white">
-    <div class="flex h-screen">
-        <!-- Sidebar -->
-        <div id="sidebar" class="w-64 bg-gray-900 bg-opacity-80 border-r border-gray-700 flex flex-col transition-all duration-300 md:w-72">
-            <div class="p-4 border-b border-gray-700">
-                <button id="newSidebarChat" class="w-full flex items-center justify-center space-x-2 bg-indigo-600 hover:bg-indigo-500 text-white py-2 px-3 rounded-lg transition-colors">
-                    <i data-feather="plus" class="w-4 h-4"></i>
-                    <span>New Chat</span>
-                </button>
-                <button id="toggleSidebar" class="md:hidden mt-2 w-full flex items-center justify-center text-gray-400 hover:text-white py-1">
-                    <i data-feather="chevron-left" class="w-4 h-4"></i>
-                </button>
-            </div>
-            <div id="chatList" class="flex-1 overflow-y-auto p-2 space-y-1">
-                <!-- Chat list items will be dynamically inserted here -->
-            </div>
-        </div>
-        <!-- Main Content -->
-        <div class="flex-1 overflow-y-auto">
-            <div class="container mx-auto px-4 py-8 max-w-5xl">
-<header class="flex justify-between items-center mb-8">
             <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>
@@ -155,9 +136,9 @@
         <!-- Chat Container -->
         <div class="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 transition-opacity duration-300">
                 <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>
@@ -191,17 +172,11 @@
             <p class="mt-1">Your conversations stay private and secure</p>
         </footer>
     </div>
-        </div>
-    </div>
     <script>
         feather.replace();
         // DOM Elements
-        const sidebar = document.getElementById('sidebar');
-        const toggleSidebar = document.getElementById('toggleSidebar');
-        const chatList = document.getElementById('chatList');
-        const newSidebarChat = document.getElementById('newSidebarChat');
-const authBtn = document.getElementById('authBtn');
         const authModal = document.getElementById('authModal');
         const authModalTitle = document.getElementById('authModalTitle');
         const closeAuth = document.getElementById('closeAuth');
@@ -226,9 +201,6 @@ const settingsBtn = document.getElementById('settingsBtn');
         const themeBtns = document.querySelectorAll('.theme-btn');
         // User management
         let isRegistering = false;
-        // Chat state management
-        let currentChatId = null;
-        let sidebarCollapsed = false;
         function updateAuthUI() {
             const loggedInUser = localStorage.getItem('chatRouterUser');
@@ -238,135 +210,18 @@ const settingsBtn = document.getElementById('settingsBtn');
                 document.querySelector('#newChatBtn').disabled = false;
                 document.querySelector('#settingsBtn').disabled = false;
                 sendBtn.disabled = false;
-                loadChatList(loggedInUser);
-                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;
-                chatList.innerHTML = '';
-                currentChatId = null;
                 showAuthModal();
             }
             feather.replace();
         }
-        // Chat list management
-        function loadChatList(username) {
-            chatList.innerHTML = '';
-            const chatKeys = Object.keys(localStorage)
-                .filter(key => key.startsWith(`chatHistory_${username}_`));
-            if (chatKeys.length === 0) {
-                createNewChat();
-                return;
-            }
-            chatKeys.forEach(key => {
-                const chatId = key.split('_')[2];
-                const chatData = JSON.parse(localStorage.getItem(key));
-                const firstMessage = chatData.messages.find(m => m.role === 'user')?.content || 'New Chat';
-                const chatTitle = firstMessage.length > 30 ? firstMessage.substring(0, 30) + '...' : firstMessage;
-                const chatItem = document.createElement('div');
-                chatItem.className = `flex items-center justify-between p-3 rounded-lg cursor-pointer hover:bg-gray-800 transition-colors ${currentChatId === chatId ? 'bg-gray-700 border-l-4 border-indigo-500' : ''}`;
-                chatItem.dataset.chatId = chatId;
-                chatItem.innerHTML = `
-                    <span class="truncate">${chatTitle}</span>
-                    <div class="flex space-x-2 opacity-0 group-hover:opacity-100">
-                        <button class="text-gray-400 hover:text-white edit-chat" data-chat-id="${chatId}">
-                            <i data-feather="edit-2" class="w-4 h-4"></i>
-                        </button>
-                        <button class="text-gray-400 hover:text-red-400 delete-chat" data-chat-id="${chatId}">
-                            <i data-feather="trash" class="w-4 h-4"></i>
-                        </button>
-                    </div>
-                `;
-                chatItem.addEventListener('click', () => loadChat(chatId));
-                chatList.appendChild(chatItem);
-            });
-            feather.replace();
-        }
-        function createNewChat() {
-            const username = localStorage.getItem('chatRouterUser');
-            if (!username) return;
-            currentChatId = Date.now().toString();
-            const newChat = {
-                id: currentChatId,
-                createdAt: new Date().toISOString(),
-                messages: []
-            };
-            localStorage.setItem(`chatHistory_${username}_${currentChatId}`, JSON.stringify(newChat));
-            loadChatList(username);
-            loadChat(currentChatId);
-            addMessage('system', '🆕 New chat started. Say hello!');
-        }
-        function loadChat(chatId) {
-            const username = localStorage.getItem('chatRouterUser');
-            if (!username) return;
-            currentChatId = chatId;
-            const chatData = JSON.parse(localStorage.getItem(`chatHistory_${username}_${chatId}`));
-            // Fade out current chat
-            chatContainer.style.opacity = '0';
-            setTimeout(() => {
-                chatContainer.innerHTML = '';
-                if (chatData.messages.length === 0) {
-                    addMessage('system', 'Chat loaded. Start the conversation!');
-                } else {
-                    chatData.messages.forEach(msg => {
-                        addMessage(msg.role, msg.content);
-                    });
-                }
-                loadChatList(username);
-                chatContainer.style.opacity = '1';
-            }, 200);
-        }
-        function saveCurrentChat() {
-            const username = localStorage.getItem('chatRouterUser');
-            if (!username || !currentChatId) return;
-            const messages = [];
-            document.querySelectorAll('#chatContainer > div').forEach(msgDiv => {
-                const isUser = msgDiv.classList.contains('justify-end');
-                const content = msgDiv.querySelector('.message-bubble').textContent;
-                messages.push({
-                    role: isUser ? 'user' : 'assistant',
-                    content: content
-                });
-            });
-            const chatData = {
-                id: currentChatId,
-                createdAt: new Date().toISOString(),
-                messages: messages
-            };
-            localStorage.setItem(`chatHistory_${username}_${currentChatId}`, JSON.stringify(chatData));
-        }
-        function deleteChat(chatId) {
-            const username = localStorage.getItem('chatRouterUser');
-            if (!username || !confirm('Delete this chat permanently?')) return;
-            localStorage.removeItem(`chatHistory_${username}_${chatId}`);
-            if (currentChatId === chatId) {
-                createNewChat();
-            } else {
-                loadChatList(username);
-            }
-        }
-function showAuthModal(register = false) {
             isRegistering = register;
             authModalTitle.textContent = register ? 'Register' : 'Login';
             authActionBtn.textContent = register ? 'Register' : 'Login';
@@ -388,6 +243,7 @@ function showAuthModal(register = false) {
             // Show welcome message
             addMessage('system', `Welcome back, ${username}!`);
         }
         function logoutUser() {
             const username = localStorage.getItem('chatRouterUser');
             localStorage.removeItem('chatRouterUser');
@@ -395,10 +251,10 @@ function showAuthModal(register = false) {
             // Clear current chat
             chatContainer.innerHTML = '';
-            currentChatId = null;
             addMessage('system', 'Please log in to start chatting.');
         }
-function loadChatHistory(username) {
             const history = localStorage.getItem(`chatHistory_${username}`);
             if (history) {
                 chatContainer.innerHTML = history;
@@ -571,13 +427,13 @@ async function loadSettings() {
             chatContainer.appendChild(messageDiv);
             chatContainer.scrollTop = chatContainer.scrollHeight;
-            // Save to current chat
-            saveCurrentChat();
-            // Update chat list to reflect new message
             const username = localStorage.getItem('chatRouterUser');
-            if (username) loadChatList(username);
         }
-// Handle API errors gracefully
         function handleApiError(error) {
             const errorMsg = error.message.toLowerCase();
             if (errorMsg.includes('payment') || errorMsg.includes('unauthorized')) {
@@ -635,45 +491,8 @@ async function sendMessage() {
                 typingIndicator.classList.add('hidden');
             }
         }
-        // Sidebar toggle
-        toggleSidebar.addEventListener('click', () => {
-            sidebarCollapsed = !sidebarCollapsed;
-            if (sidebarCollapsed) {
-                sidebar.classList.add('hidden', 'md:flex');
-                toggleSidebar.innerHTML = '<i data-feather="chevron-right" class="w-4 h-4"></i>';
-            } else {
-                sidebar.classList.remove('hidden');
-                toggleSidebar.innerHTML = '<i data-feather="chevron-left" class="w-4 h-4"></i>';
-            }
-            feather.replace();
-        });
-        // Chat list events
-        newSidebarChat.addEventListener('click', createNewChat);
-        // Delegate events for edit/delete buttons
-        document.addEventListener('click', (e) => {
-            if (e.target.classList.contains('delete-chat') || e.target.closest('.delete-chat')) {
-                const chatId = e.target.closest('.delete-chat').dataset.chatId;
-                deleteChat(chatId);
-            }
-            if (e.target.classList.contains('edit-chat') || e.target.closest('.edit-chat')) {
-                const chatId = e.target.closest('.edit-chat').dataset.chatId;
-                const chatItem = document.querySelector(`[data-chat-id="${chatId}"]`);
-                const currentTitle = chatItem.querySelector('span').textContent;
-                const newTitle = prompt('Edit chat title:', currentTitle);
-                if (newTitle && newTitle !== currentTitle) {
-                    chatItem.querySelector('span').textContent = newTitle;
-                    const username = localStorage.getItem('chatRouterUser');
-                    const chatData = JSON.parse(localStorage.getItem(`chatHistory_${username}_${chatId}`));
-                    chatData.title = newTitle;
-                    localStorage.setItem(`chatHistory_${username}_${chatId}`, JSON.stringify(chatData));
-                }
-            }
-        });
         // Event listeners
-authBtn.addEventListener('click', () => {
             if (authBtn.dataset.state === 'logout') {
                 logoutUser();
             } else {
@@ -719,7 +538,8 @@ authBtn.addEventListener('click', () => {
             }
             authModal.classList.add('hidden');
         });
-        newChatBtn.addEventListener('click', createNewChat);
 messageInput.addEventListener('keydown', (e) => {
             if (e.key === 'Enter' && !e.shiftKey) {
                 e.preventDefault();
@@ -731,23 +551,14 @@ messageInput.addEventListener('keydown', (e) => {
         // 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.');
-            }
         }, 1000);
-        // Auto-collapse sidebar on mobile
-        if (window.innerWidth < 768) {
-            sidebarCollapsed = true;
-            sidebar.classList.add('hidden', 'md:flex');
-            toggleSidebar.innerHTML = '<i data-feather="chevron-right" class="w-4 h-4"></i>';
-            feather.replace();
-        }
 </script>
 </body>
 </html>

     </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-5xl">
+        <header class="flex justify-between items-center mb-8">
             <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>
         <!-- Chat Container -->
         <div class="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>
             <p class="mt-1">Your conversations stay private and secure</p>
         </footer>
     </div>
     <script>
         feather.replace();
         // DOM Elements
+        const authBtn = document.getElementById('authBtn');
         const authModal = document.getElementById('authModal');
         const authModalTitle = document.getElementById('authModalTitle');
         const closeAuth = document.getElementById('closeAuth');
         const themeBtns = document.querySelectorAll('.theme-btn');
         // User management
         let isRegistering = false;
         function updateAuthUI() {
             const loggedInUser = localStorage.getItem('chatRouterUser');
                 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';
             // Show welcome message
             addMessage('system', `Welcome back, ${username}!`);
         }
         function logoutUser() {
             const username = localStorage.getItem('chatRouterUser');
             localStorage.removeItem('chatRouterUser');
             // Clear current chat
             chatContainer.innerHTML = '';
             addMessage('system', 'Please log in to start chatting.');
         }
+        function loadChatHistory(username) {
             const history = localStorage.getItem(`chatHistory_${username}`);
             if (history) {
                 chatContainer.innerHTML = history;
             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')) {
                 typingIndicator.classList.add('hidden');
             }
         }
         // Event listeners
+        authBtn.addEventListener('click', () => {
             if (authBtn.dataset.state === 'logout') {
                 logoutUser();
             } else {
             }
             authModal.classList.add('hidden');
         });
+        newChatBtn.addEventListener('click', clearCurrentChat);
 messageInput.addEventListener('keydown', (e) => {
             if (e.key === 'Enter' && !e.shiftKey) {
                 e.preventDefault();
         // 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.');
+}
         }, 1000);
 </script>
 </body>
 </html>