Update public/index.html

public/index.html

@@ -16,13 +16,11 @@
         }
     </script>
     <style>
-        /* Custom Scrollbar for better look */
         ::-webkit-scrollbar { width: 6px; height: 6px; }
         ::-webkit-scrollbar-track { background: transparent; }
         ::-webkit-scrollbar-thumb { background: #374151; border-radius: 4px; }
         ::-webkit-scrollbar-thumb:hover { background: #4b5563; }
 
-        /* Markdown Styles & Overrides */
         .markdown-body { font-size: 0.95rem; line-height: 1.6; }
         .markdown-body p { margin-bottom: 1rem; }
         .markdown-body p:last-child { margin-bottom: 0; }
@@ -30,11 +28,9 @@
         .markdown-body pre { background: #1e1e1e; padding: 2.5rem 1rem 1rem 1rem; border-radius: 0.5rem; position: relative; overflow-x: auto; margin-bottom: 1rem; }
         .markdown-body pre code { font-size: 0.85rem; }
         
-        /* Copy Button inside Code Blocks */
         .copy-btn { position: absolute; top: 0.5rem; right: 0.5rem; background: #4b5563; color: #e5e7eb; border: none; padding: 0.25rem 0.75rem; border-radius: 0.375rem; cursor: pointer; font-size: 0.75rem; transition: background 0.2s; }
         .copy-btn:hover { background: #6b7280; }
         
-        /* Reasoning Block */
         .reasoning-block { border-left: 3px solid #6366f1; padding-left: 1rem; margin-bottom: 1rem; color: #9ca3af; font-size: 0.9em; background: rgba(99, 102, 241, 0.05); padding: 0.75rem; border-radius: 0 0.5rem 0.5rem 0; }
     </style>
 </head>
@@ -56,22 +52,40 @@
                 </button>
             </div>
         </div>
-        <div id="chat-list" class="flex-1 overflow-y-auto p-3 space-y-2">
-            <!-- Chats loaded here -->
-        </div>
+        <div id="chat-list" class="flex-1 overflow-y-auto p-3 space-y-2"></div>
     </aside>
 
     <!-- Main Chat Area -->
     <main class="flex-1 flex flex-col h-full w-full bg-gray-950 min-w-0">
         <!-- Header -->
         <header class="h-14 min-h-[3.5rem] border-b border-gray-800 flex items-center px-4 lg:px-6 justify-between bg-gray-900/80 backdrop-blur-sm z-10">
-            <div class="flex items-center gap-3 overflow-hidden">
-                <button onclick="toggleSidebar()" class="lg:hidden p-1 -ml-1 text-gray-400 hover:text-white">
+            
+            <div class="flex items-center gap-3 overflow-hidden group w-full max-w-[50%]">
+                <button onclick="toggleSidebar()" class="lg:hidden p-1 -ml-1 text-gray-400 hover:text-white shrink-0">
                     <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
                 </button>
-                <h2 id="current-chat-title" class="font-semibold text-gray-100 truncate text-sm lg:text-base">Select or create a chat</h2>
+                
+                <!-- Title Display Mode -->
+                <div id="title-display" class="flex items-center gap-2 overflow-hidden w-full">
+                    <h2 id="current-chat-title" class="font-semibold text-gray-100 truncate text-sm lg:text-base">Select or create a chat</h2>
+                    <button onclick="enableTitleEdit()" id="edit-title-btn" class="hidden text-gray-500 hover:text-blue-400 p-1 opacity-0 group-hover:opacity-100 transition-opacity shrink-0" title="Rename Chat">
+                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
+                    </button>
+                </div>
+
+                <!-- Title Edit Mode -->
+                <div id="title-edit" class="hidden items-center gap-2 w-full">
+                    <input type="text" id="title-input" class="bg-gray-800 text-sm lg:text-base text-gray-100 border border-blue-500 rounded px-2 py-1 outline-none w-full" />
+                    <button onclick="saveTitle()" class="text-blue-400 hover:text-blue-300 p-1 shrink-0 bg-gray-800 rounded">
+                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
+                    </button>
+                    <button onclick="cancelTitleEdit()" class="text-gray-400 hover:text-red-400 p-1 shrink-0 bg-gray-800 rounded">
+                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
+                    </button>
+                </div>
             </div>
-            <div class="flex items-center gap-2 lg:gap-4 shrink-0">
+
+            <div class="flex items-center gap-2 lg:gap-4 shrink-0 pl-2">
                 <span class="hidden sm:inline-block text-xs text-blue-300 bg-blue-900/30 border border-blue-800/50 px-2 py-1 rounded-md font-mono">
                     Tokens: <span id="token-counter">0</span>
                 </span>
@@ -87,9 +101,7 @@
         </header>
 
         <!-- Messages -->
-        <div id="chat-window" class="flex-1 overflow-y-auto p-4 lg:p-6 space-y-6 scroll-smooth">
-            <!-- Messages populated here -->
-        </div>
+        <div id="chat-window" class="flex-1 overflow-y-auto p-4 lg:p-6 space-y-6 scroll-smooth"></div>
 
         <!-- Input Area -->
         <div class="p-3 lg:p-4 bg-gray-900 border-t border-gray-800 shrink-0">
@@ -111,7 +123,6 @@
     </main>
 
     <script>
-        // Configure Marked with highlight.js for styling block code
         marked.setOptions({
             highlight: function(code, lang) {
                 const language = hljs.getLanguage(lang) ? lang : 'plaintext';
@@ -123,7 +134,50 @@
         let attachedImages =[];
         let pollingInterval = null;
 
-        // Mobile Sidebar Toggle
+        // --- TITLE EDITING LOGIC ---
+        function enableTitleEdit() {
+            if (!currentChatId) return;
+            const currentTitle = document.getElementById('current-chat-title').innerText;
+            document.getElementById('title-display').classList.add('hidden');
+            document.getElementById('title-edit').classList.remove('hidden');
+            document.getElementById('title-edit').classList.add('flex');
+            
+            const input = document.getElementById('title-input');
+            input.value = currentTitle;
+            input.focus();
+            input.select();
+        }
+
+        function cancelTitleEdit() {
+            document.getElementById('title-edit').classList.add('hidden');
+            document.getElementById('title-edit').classList.remove('flex');
+            document.getElementById('title-display').classList.remove('hidden');
+        }
+
+        async function saveTitle() {
+            if (!currentChatId) return cancelTitleEdit();
+            const newTitle = document.getElementById('title-input').value.trim();
+            if (!newTitle) return cancelTitleEdit();
+
+            document.getElementById('current-chat-title').innerText = newTitle;
+            cancelTitleEdit();
+
+            await fetch(`/api/chats/${currentChatId}/title`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ title: newTitle })
+            });
+            loadSidebar(); // Refresh sidebar to show new name
+        }
+
+        // Handle Enter and Escape keys for title input
+        document.getElementById('title-input').addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') saveTitle();
+            if (e.key === 'Escape') cancelTitleEdit();
+        });
+
+
+        // --- UI CORE LOGIC ---
         function toggleSidebar() {
             const sidebar = document.getElementById('sidebar');
             const overlay = document.getElementById('mobile-overlay');
@@ -131,7 +185,6 @@
             overlay.classList.toggle('hidden');
         }
 
-        // Auto-resize Textarea
         const textarea = document.getElementById('message-input');
         textarea.addEventListener('input', function() {
             this.style.height = 'auto';
@@ -155,7 +208,7 @@
             const chat = await res.json();
             selectChat(chat.id);
             loadSidebar();
-            if(window.innerWidth < 1024) toggleSidebar(); // Close sidebar on mobile
+            if(window.innerWidth < 1024) toggleSidebar();
         }
 
         async function deleteCurrentChat() {
@@ -165,6 +218,7 @@
                 currentChatId = null;
                 document.getElementById('chat-window').innerHTML = '';
                 document.getElementById('current-chat-title').innerText = 'Select or create a chat';
+                document.getElementById('edit-title-btn').classList.add('hidden');
                 document.getElementById('token-counter').innerText = '0';
                 loadSidebar();
             }
@@ -177,15 +231,16 @@
             const chat = await res.json();
             
             document.getElementById('current-chat-title').innerText = chat.title;
+            document.getElementById('edit-title-btn').classList.remove('hidden'); // Show edit icon for active chat
             document.getElementById('token-counter').innerText = chat.totalTokens.toLocaleString();
             
+            cancelTitleEdit(); // Ensure we reset title UI state if switching
             renderMessages(chat.messages);
             loadSidebar(); 
 
             if(window.innerWidth < 1024 && !document.getElementById('sidebar').classList.contains('-translate-x-full')) {
-                toggleSidebar(); // Close sidebar on mobile selection
+                toggleSidebar();
             }
-
             if (chat.isGenerating) pollGeneratingChat(id);
         }
 
@@ -209,14 +264,12 @@
                 `;
             }).join('');
             
-            // Add copy buttons to code blocks dynamically
             document.querySelectorAll('.markdown-body pre').forEach(pre => {
                 if (!pre.querySelector('.copy-btn')) {
                     const btn = document.createElement('button');
                     btn.className = 'copy-btn';
                     btn.innerText = 'Copy';
                     btn.onclick = () => {
-                        // Extract text excluding the button itself
                         const codeText = pre.querySelector('code')?.innerText || pre.innerText.replace('Copy', '');
                         navigator.clipboard.writeText(codeText.trim());
                         btn.innerText = 'Copied!';
@@ -234,6 +287,10 @@
                 const chat = await res.json();
                 renderMessages(chat.messages);
                 document.getElementById('token-counter').innerText = chat.totalTokens.toLocaleString();
+                if (chat.title !== document.getElementById('current-chat-title').innerText && document.getElementById('title-display').classList.contains('hidden') === false) {
+                     document.getElementById('current-chat-title').innerText = chat.title;
+                     loadSidebar();
+                }
                 if (!chat.isGenerating) clearInterval(pollingInterval);
             }, 1500);
         }
@@ -283,9 +340,8 @@
             `;
             container.scrollTop = container.scrollHeight;
             
-            // Reset Input Area
             input.value = '';
-            input.style.height = 'auto'; // Reset height
+            input.style.height = 'auto'; 
             attachedImages =[];
             document.getElementById('image-preview-container').innerHTML = '';
             document.getElementById('image-preview-container').classList.add('hidden');
@@ -346,8 +402,6 @@
 
         document.getElementById('message-input').addEventListener('keydown', (e) => {
             if (e.key === 'Enter' && !e.shiftKey) { 
-                // Don't send if on mobile to allow enter for newlines natively, unless specifically required.
-                // For a dev tool, shift+enter is usually fine.
                 e.preventDefault(); 
                 sendMessage(); 
             }