Spaces:

Mohit0199
/

chatrouter

Running

App Files Files Community

Mohit0199 commited on Oct 13

Commit

0d2c178

verified ·

1 Parent(s): bdae63f

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.

Files changed (1) hide show

index.html +204 -33

index.html CHANGED Viewed

@@ -8,8 +8,24 @@
     <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>
-        .chat-height {
             height: calc(100vh - 200px);
         }
         .message-bubble {
@@ -42,9 +58,14 @@
     </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>
             </div>
@@ -132,10 +153,24 @@
                 </div>
             </div>
         </div>
-        <!-- 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">
@@ -166,17 +201,24 @@
                 </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
-        const authBtn = document.getElementById('authBtn');
         const authModal = document.getElementById('authModal');
         const authModalTitle = document.getElementById('authModalTitle');
         const closeAuth = document.getElementById('closeAuth');
@@ -230,6 +272,12 @@ const settingsBtn = document.getElementById('settingsBtn');
             registerFields.classList.toggle('hidden', !register);
             authModal.classList.remove('hidden');
         }
         function loginUser(username, password) {
             // Simple auth - store user in localStorage
@@ -237,45 +285,148 @@ const settingsBtn = document.getElementById('settingsBtn');
             localStorage.setItem(`chatRouterPass_${username}`, password); // Not secure for production!
             updateAuthUI();
-            // Load user's chat history
-            loadChatHistory(username);
-            // Show welcome message
-            addMessage('system', `Welcome back, ${username}!`);
         }
         function logoutUser() {
             const username = localStorage.getItem('chatRouterUser');
             localStorage.removeItem('chatRouterUser');
             updateAuthUI();
-            // 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.scrollTop = chatContainer.scrollHeight;
             }
         }
-        function saveChatHistory(username) {
-            localStorage.setItem(`chatHistory_${username}`, chatContainer.innerHTML);
         }
-        function clearCurrentChat() {
-            const username = localStorage.getItem('chatRouterUser');
-            if (username) {
-                chatContainer.innerHTML = '';
-                addMessage('system', '🆕 New chat started.');
-                saveChatHistory(username);
             }
         }
-        // Load saved settings
 async function loadSettings() {
             const savedApiKey = localStorage.getItem('chatRouterApiKey');
             const savedModel = localStorage.getItem('chatRouterModel');
@@ -538,27 +689,47 @@ async function sendMessage() {
             }
             authModal.classList.add('hidden');
         });
-        newChatBtn.addEventListener('click', clearCurrentChat);
 messageInput.addEventListener('keydown', (e) => {
             if (e.key === 'Enter' && !e.shiftKey) {
                 e.preventDefault();
                 sendMessage();
             }
         });
-        sendBtn.addEventListener('click', sendMessage);
         // 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>

     <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 {
     </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>
             </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">
                 </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');
             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);
+        }
         function loginUser(username, password) {
             // Simple auth - store user in localStorage
             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');
             }
             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>