Spaces:

Mohit0199
/

chatrouter

Running

App Files Files Community

Mohit0199 commited on Oct 13

Commit

5387391

verified ·

1 Parent(s): 17d21e3

Upgrade my existing ChatRouter project to include a full ChatGPT-style chat sidebar on the left side of the screen.

Browse files

The sidebar should include:
- A **“New Chat”** button at the top to start a fresh conversation.
- A scrollable list of past chat titles (for the logged-in user).
- Each chat title should show the first few words of the first user message.
- When a chat title is clicked, it loads that conversation into the main chat area.
- Ability to **rename** or **delete** a chat (optional with small icons beside titles).
- The sidebar should collapse/expand on smaller screens with a hamburger icon.

---

### 💬 Functional Details
- Each chat should be saved in `localStorage` as part of the logged-in user’s data, using keys like:
`chatHistory_<username>_<chatId>`
- When the user clicks “New Chat”, a new conversation with a unique ID should be created and displayed.
- The sidebar should update dynamically to show the new chat entry.
- Maintain support for multiple chats per user.
- When the user logs out, sidebar and chats should reset.

---

### 🎨 Design Guidelines
- Use TailwindCSS styling consistent with the existing ChatRouter theme.
- Sidebar background: slightly darker tone of the current theme.
- Active chat highlighted with a lighter border or gradient.
- Smooth transitions between chats (fade in/out).
- Keep the chat header (Settings, Logout) visible at the top of the main area.

---

### ⚙️ Integration Notes
- Keep all existing authentication, chat logic, and OpenRouter API integration untouched.
- Just add the sidebar functionality and link it to the existing chat system.
- Make sure when a user switches between chats, their messages load from `localStorage` immediately.

Files changed (1) hide show

index.html +207 -18

index.html CHANGED Viewed

@@ -42,8 +42,27 @@
     </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>
@@ -136,9 +155,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">
                 <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>
@@ -172,11 +191,17 @@
             <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');
@@ -201,6 +226,9 @@ const settingsBtn = document.getElementById('settingsBtn');
         const themeBtns = document.querySelectorAll('.theme-btn');
         // User management
         let isRegistering = false;
         function updateAuthUI() {
             const loggedInUser = localStorage.getItem('chatRouterUser');
@@ -210,18 +238,135 @@ const settingsBtn = document.getElementById('settingsBtn');
                 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';
@@ -243,7 +388,6 @@ const settingsBtn = document.getElementById('settingsBtn');
             // Show welcome message
             addMessage('system', `Welcome back, ${username}!`);
         }
         function logoutUser() {
             const username = localStorage.getItem('chatRouterUser');
             localStorage.removeItem('chatRouterUser');
@@ -251,10 +395,10 @@ const settingsBtn = document.getElementById('settingsBtn');
             // 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;
@@ -427,13 +571,13 @@ async function loadSettings() {
             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')) {
@@ -491,8 +635,45 @@ async function sendMessage() {
                 typingIndicator.classList.add('hidden');
             }
         }
         // Event listeners
-        authBtn.addEventListener('click', () => {
             if (authBtn.dataset.state === 'logout') {
                 logoutUser();
             } else {
@@ -538,8 +719,7 @@ async function sendMessage() {
             }
             authModal.classList.add('hidden');
         });
-        newChatBtn.addEventListener('click', clearCurrentChat);
 messageInput.addEventListener('keydown', (e) => {
             if (e.key === 'Enter' && !e.shiftKey) {
                 e.preventDefault();
@@ -551,14 +731,23 @@ 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);
 </script>
 </body>
 </html>

     </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>
         <!-- 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>
             <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');
         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');
                 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';
             // Show welcome message
             addMessage('system', `Welcome back, ${username}!`);
         }
         function logoutUser() {
             const username = localStorage.getItem('chatRouterUser');
             localStorage.removeItem('chatRouterUser');
             // 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;
             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')) {
                 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 {
             }
             authModal.classList.add('hidden');
         });
+        newChatBtn.addEventListener('click', createNewChat);
 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);
+        // 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>