Update templates/index.html

templates/index.html

@@ -29,40 +29,139 @@
         }
     </script>
     <style>
-        body { font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); }
-        .glass-effect { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(148, 163, 184, 0.1); }
-        .gradient-text { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
+        body { 
+            font-family: 'Inter', sans-serif; 
+            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); 
+            overflow: hidden;
+        }
+        .glass-effect { 
+            background: rgba(30, 41, 59, 0.7); 
+            backdrop-filter: blur(12px); 
+            border: 1px solid rgba(148, 163, 184, 0.1); 
+        }
+        .gradient-text { 
+            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%); 
+            -webkit-background-clip: text; 
+            -webkit-text-fill-color: transparent; 
+            background-clip: text; 
+        }
         .typing-indicator { display: inline-flex; align-items: center; }
-        .typing-dot { width: 6px; height: 6px; border-radius: 50%; background-color: #8b5cf6; animation: typing 1.4s infinite ease-in-out; margin-right: 4px; }
+        .typing-dot { 
+            width: 6px; 
+            height: 6px; 
+            border-radius: 50%; 
+            background-color: #8b5cf6; 
+            animation: typing 1.4s infinite ease-in-out; 
+            margin-right: 4px; 
+        }
         .typing-dot:nth-child(1) { animation-delay: -0.32s; }
         .typing-dot:nth-child(2) { animation-delay: -0.16s; }
-        @keyframes typing { 0%, 80%, 100% { transform: scale(0.8); opacity: 0.3; } 40% { transform: scale(1); opacity: 1; } }
-        .scroll-container::-webkit-scrollbar { width: 6px; }
-        .scroll-container::-webkit-scrollbar-track { background: transparent; }
-        .scroll-container::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }
-        .markdown-content { word-wrap: break-word; }
+        @keyframes typing { 
+            0%, 80%, 100% { transform: scale(0.8); opacity: 0.3; } 
+            40% { transform: scale(1); opacity: 1; } 
+        }
+        
+        /* Enhanced scrollbar styling */
+        .scroll-container {
+            scrollbar-width: thin;
+            scrollbar-color: #475569 transparent;
+        }
+        .scroll-container::-webkit-scrollbar { 
+            width: 8px; 
+        }
+        .scroll-container::-webkit-scrollbar-track { 
+            background: rgba(15, 23, 42, 0.3); 
+            border-radius: 4px;
+        }
+        .scroll-container::-webkit-scrollbar-thumb { 
+            background: linear-gradient(180deg, #475569 0%, #64748b 100%); 
+            border-radius: 4px; 
+            border: 1px solid rgba(148, 163, 184, 0.1);
+        }
+        .scroll-container::-webkit-scrollbar-thumb:hover {
+            background: linear-gradient(180deg, #64748b 0%, #94a3b8 100%);
+        }
+        
+        .markdown-content { 
+            word-wrap: break-word; 
+            line-height: 1.6;
+        }
         .markdown-content p { margin-bottom: 0.75rem; }
         .markdown-content p:last-child { margin-bottom: 0; }
-        .markdown-content pre { background-color: rgba(15, 23, 42, 0.5); padding: 0.75rem; border-radius: 0.375rem; overflow-x: auto; }
-        .markdown-content code { font-family: monospace; background-color: rgba(15, 23, 42, 0.5); padding: 0.1rem 0.3rem; border-radius: 0.25rem; }
-        .markdown-content pre code { padding: 0; background-color: transparent; }
-        .markdown-content ul, .markdown-content ol { margin-left: 1.5rem; margin-bottom: 0.75rem; }
+        .markdown-content pre { 
+            background-color: rgba(15, 23, 42, 0.7); 
+            padding: 0.75rem; 
+            border-radius: 0.375rem; 
+            overflow-x: auto; 
+            border: 1px solid rgba(148, 163, 184, 0.1);
+        }
+        .markdown-content code { 
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; 
+            background-color: rgba(15, 23, 42, 0.5); 
+            padding: 0.1rem 0.3rem; 
+            border-radius: 0.25rem; 
+            font-size: 0.875em;
+        }
+        .markdown-content pre code { 
+            padding: 0; 
+            background-color: transparent; 
+        }
+        .markdown-content ul, .markdown-content ol { 
+            margin-left: 1.5rem; 
+            margin-bottom: 0.75rem; 
+        }
         .markdown-content ul { list-style-type: disc; }
         .markdown-content ol { list-style-type: decimal; }
-        .markdown-content table { border-collapse: collapse; width: 100%; margin-bottom: 0.75rem; }
-        .markdown-content th, .markdown-content td { border: 1px solid rgba(148, 163, 184, 0.2); padding: 0.5rem; text-align: left; }
+        .markdown-content table { 
+            border-collapse: collapse; 
+            width: 100%; 
+            margin-bottom: 0.75rem; 
+        }
+        .markdown-content th, .markdown-content td { 
+            border: 1px solid rgba(148, 163, 184, 0.2); 
+            padding: 0.5rem; 
+            text-align: left; 
+        }
+        .markdown-content blockquote {
+            border-left: 4px solid #6366f1;
+            padding-left: 1rem;
+            margin: 1rem 0;
+            color: #cbd5e1;
+            font-style: italic;
+        }
+        .markdown-content h1, .markdown-content h2, .markdown-content h3, 
+        .markdown-content h4, .markdown-content h5, .markdown-content h6 {
+            margin-top: 1.5rem;
+            margin-bottom: 0.75rem;
+            font-weight: 600;
+        }
+        .markdown-content h1 { font-size: 1.5rem; }
+        .markdown-content h2 { font-size: 1.3rem; }
+        .markdown-content h3 { font-size: 1.1rem; }
+        
+        /* Transition animations */
+        .api-section-transition {
+            transition: all 0.3s ease-in-out;
+        }
+        
+        /* Better focus states */
+        .focus-ring:focus {
+            ring-width: 2px;
+            ring-color: rgb(99 102 241);
+            outline: none;
+        }
     </style>
 </head>
-<body class="font-inter text-white overflow-hidden">
+<body class="font-inter text-white h-screen overflow-hidden">
     <div class="fixed inset-0 -z-10">
         <div class="absolute -top-40 -right-40 w-80 h-80 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse-slow"></div>
         <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-blue-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-pulse-slow animation-delay-2000"></div>
     </div>
 
-    <div class="relative z-10 flex items-center justify-center min-h-screen p-4">
-        <div class="w-[98%] h-[95vh] glass-effect rounded-3xl shadow-2xl flex flex-col">
+    <div class="relative z-10 h-screen flex flex-col p-4">
+        <div class="flex-1 glass-effect rounded-3xl shadow-2xl flex flex-col overflow-hidden">
 
-            <header class="flex items-center justify-between p-6 border-b border-slate-600/50">
+            <header class="flex items-center justify-between p-6 border-b border-slate-600/50 flex-shrink-0">
                 <div class="flex items-center space-x-4">
                     <div class="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl flex items-center justify-center">
                         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
@@ -81,26 +180,26 @@
             </header>
 
             <!-- API Key Configuration Section -->
-            <div id="api-key-section" class="p-6 border-b border-slate-600/30 bg-slate-800/30">
-                <div class="flex items-center justify-between mb-4">
+            <div id="api-key-section" class="border-b border-slate-600/30 bg-slate-800/30 flex-shrink-0 api-section-transition">
+                <div class="flex items-center justify-between p-4 cursor-pointer" id="api-section-header">
                     <div>
                         <h3 class="text-lg font-semibold text-slate-200">🔑 API Configuration</h3>
                         <p class="text-sm text-slate-400">Enter your OpenRouter API key to use the assistant</p>
                     </div>
                     <button id="toggle-api-section" class="text-slate-400 hover:text-slate-200 transition-colors">
-                        <svg id="toggle-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <svg id="toggle-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="transition-transform duration-300">
                             <path d="M6 9l6 6 6-6"/>
                         </svg>
                     </button>
                 </div>
                 
-                <div id="api-key-content" class="space-y-4">
+                <div id="api-key-content" class="px-4 pb-4 space-y-4">
                     <div class="flex space-x-3">
                         <input 
                             type="password" 
                             id="api-key-input" 
                             placeholder="sk-or-your-openrouter-api-key-here"
-                            class="flex-1 bg-slate-900/50 border border-slate-600/50 rounded-lg p-3 text-slate-200 placeholder-slate-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none transition"
+                            class="flex-1 bg-slate-900/50 border border-slate-600/50 rounded-lg p-3 text-slate-200 placeholder-slate-500 focus-ring transition"
                         >
                         <button id="test-api-key" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
                             Test Key
@@ -120,15 +219,27 @@
                 </div>
             </div>
 
-            <div class="flex-1 flex overflow-hidden">
-                <div class="w-1/2 flex flex-col border-r border-slate-600/50">
-                    <div class="p-6 border-b border-slate-600/30">
+            <!-- Main Content Area -->
+            <div class="flex-1 flex overflow-hidden min-h-0">
+                <!-- Left Panel - Knowledge Base -->
+                <div class="w-1/2 flex flex-col border-r border-slate-600/50 min-h-0">
+                    <div class="p-4 border-b border-slate-600/30 flex-shrink-0">
                         <h2 class="text-lg font-semibold text-slate-200">Knowledge Base</h2>
                         <p class="text-sm text-slate-400 mt-1">Provide context for the AI to learn from.</p>
                     </div>
-                    <div class="flex-1 p-6 flex flex-col">
-                        <textarea id="context-input" class="w-full h-full bg-slate-900/50 border border-slate-600/50 rounded-xl p-4 text-slate-200 placeholder-slate-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none resize-none transition scroll-container" placeholder="Paste your documents, meeting notes, or any relevant context here..."></textarea>
-                        <div class="mt-4 flex items-center justify-between">
+                    
+                    <!-- Context Input Area -->
+                    <div class="flex-1 p-4 flex flex-col min-h-0">
+                        <div class="flex-1 mb-4 min-h-0">
+                            <textarea 
+                                id="context-input" 
+                                class="w-full h-full bg-slate-900/50 border border-slate-600/50 rounded-xl p-4 text-slate-200 placeholder-slate-500 focus-ring resize-none transition scroll-container" 
+                                placeholder="Paste your documents, meeting notes, or any relevant context here..."
+                            ></textarea>
+                        </div>
+                        
+                        <!-- Context Stats and Controls -->
+                        <div class="flex items-center justify-between mb-4 flex-shrink-0">
                             <div class="text-xs text-slate-400">
                                 Chars: <span id="char-count">0</span> | Words: <span id="word-count">0</span>
                             </div>
@@ -137,35 +248,60 @@
                                 <button id="index-context-btn" class="px-4 py-1.5 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">Index Context</button>
                             </div>
                         </div>
-                         <div class="mt-4">
-                                <label for="task-select" class="block text-sm font-medium text-slate-300 mb-2">Choose an Action:</label>
-                                <select id="task-select" class="w-full bg-slate-900/50 border border-slate-600/50 rounded-lg p-2 text-slate-200 focus:ring-2 focus:ring-indigo-500">
-                                    <option value="q_and_a">Question & Answer</option>
-                                    <option value="summarize">Summarize</option>
-                                    <option value="plan">Generate Action Plan</option>
-                                    <option value="creative">Creative Writing</option>
-                                </select>
-                            </div>
+                        
+                        <!-- Task Selection -->
+                        <div class="flex-shrink-0">
+                            <label for="task-select" class="block text-sm font-medium text-slate-300 mb-2">Choose an Action:</label>
+                            <select id="task-select" class="w-full bg-slate-900/50 border border-slate-600/50 rounded-lg p-2 text-slate-200 focus-ring">
+                                <option value="q_and_a">Question & Answer</option>
+                                <option value="summarize">Summarize</option>
+                                <option value="plan">Generate Action Plan</option>
+                                <option value="creative">Creative Writing</option>
+                            </select>
+                        </div>
                     </div>
                 </div>
 
-                <div class="w-1/2 flex flex-col">
-                    <div class="p-6 border-b border-slate-600/30">
+                <!-- Right Panel - AI Assistant -->
+                <div class="w-1/2 flex flex-col min-h-0">
+                    <div class="p-4 border-b border-slate-600/30 flex-shrink-0">
                         <h2 class="text-lg font-semibold text-slate-200">AI Assistant</h2>
                         <p class="text-sm text-slate-400 mt-1">Ask questions or select a task.</p>
                     </div>
-                    <div id="chat-container" class="flex-1 overflow-y-auto scroll-container p-6 space-y-6">
-                        </div>
-                    <div class="p-6 border-t border-slate-600/30">
+                    
+                    <!-- Chat Messages Container -->
+                    <div id="chat-container" class="flex-1 overflow-y-auto scroll-container p-4 space-y-4 min-h-0">
+                        <!-- Messages will be dynamically added here -->
+                    </div>
+                    
+                    <!-- Chat Input Area -->
+                    <div class="p-4 border-t border-slate-600/30 flex-shrink-0">
                         <div class="relative">
-                            <textarea id="chat-input" rows="1" class="w-full bg-slate-900/50 border border-slate-600/50 rounded-xl p-3 pr-12 text-slate-200 placeholder-slate-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none resize-none transition" placeholder="Ask a question or provide a prompt..." style="max-height: 120px;"></textarea>
+                            <textarea 
+                                id="chat-input" 
+                                rows="1" 
+                                class="w-full bg-slate-900/50 border border-slate-600/50 rounded-xl p-3 pr-12 text-slate-200 placeholder-slate-500 focus-ring resize-none transition" 
+                                placeholder="Ask a question or provide a prompt..." 
+                                style="max-height: 120px; min-height: 44px;"
+                            ></textarea>
                             <button id="send-button" class="absolute right-2.5 bottom-2.5 p-2 bg-gradient-to-r from-indigo-500 to-purple-600 text-white rounded-lg hover:opacity-90 transition disabled:opacity-50 disabled:cursor-not-allowed">
-                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m22 2-7 20-4-9-9-4z"/><path d="M22 2 11 13"/></svg>
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <path d="m22 2-7 20-4-9-9-4"/>
+                                    <path d="M22 2 11 13"/>
+                                </svg>
                             </button>
                         </div>
+                        
+                        <!-- Status Indicator -->
                         <div class="flex items-center justify-between mt-3 text-xs text-slate-400 h-5">
-                            <div id="status-indicator" class="hidden">
+                            <div id="status-indicator" class="hidden flex items-center space-x-2">
+                                <div class="typing-indicator hidden" id="typing-indicator">
+                                    <div class="typing-dot"></div>
+                                    <div class="typing-dot"></div>
+                                    <div class="typing-dot"></div>
                                 </div>
+                                <span id="status-text"></span>
+                            </div>
                         </div>
                     </div>
                 </div>