dropdown açılmıyor ayrıca sağdaki bilgi kısmında system statusu capabilitiesi falan direkt sağ kısmı kaldır. Solda ise sohbetler, hesap falan gözüksün. Textarea kısmını çok daha geliştşir, modernleştir ve detaylandır. Token sayısı, model seçme yeri falan orada olacak. Aşırı kaliteli olmalı orası.

components/sidebar.js

@@ -6,8 +6,8 @@ class CustomSidebar extends HTMLElement {
                 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
                 * { font-family: 'Inter', sans-serif; }
                 .sidebar {
-                    width: 256px;
-                    background: rgba(17, 24, 39, 0.5);
+                    width: 320px;
+                    background: rgba(17, 24, 39, 0.95);
                     backdrop-filter: blur(20px);
                     -webkit-backdrop-filter: blur(20px);
                     border-right: 1px solid rgba(255, 255, 255, 0.1);
@@ -20,7 +20,8 @@ class CustomSidebar extends HTMLElement {
                     z-index: 40;
                     transition: transform 0.3s ease;
                 }
-.nav-section {
+                
+                .nav-section {
                     margin-bottom: 2rem;
                 }
                 
@@ -31,29 +32,30 @@ class CustomSidebar extends HTMLElement {
                     text-transform: uppercase;
                     letter-spacing: 0.05em;
                     padding: 0 1.5rem;
-                    margin-bottom: 0.5rem;
+                    margin-bottom: 0.75rem;
                 }
                 
                 .nav-item {
                     display: flex;
                     align-items: center;
                     gap: 0.75rem;
-                    padding: 0.75rem 1.5rem;
+                    padding: 0.875rem 1.5rem;
                     color: #d1d5db;
                     text-decoration: none;
                     transition: all 0.2s ease;
                     position: relative;
                     cursor: pointer;
+                    border-radius: 0 12px 12px 0;
+                    margin-right: 0.75rem;
                 }
                 
                 .nav-item:hover {
-                    background: rgba(255, 255, 255, 0.05);
+                    background: rgba(255, 255, 255, 0.08);
                     color: #ffffff;
-                    padding-left: 2rem;
                 }
                 
                 .nav-item.active {
-                    background: rgba(255, 255, 255, 0.1);
+                    background: rgba(255, 255, 255, 0.12);
                     color: #ffffff;
                 }
                 
@@ -61,10 +63,13 @@ class CustomSidebar extends HTMLElement {
                     content: '';
                     position: absolute;
                     left: 0;
-                    top: 0;
-                    bottom: 0;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    bottom: auto;
                     width: 3px;
+                    height: 24px;
                     background: linear-gradient(135deg, #ffffff 0%, #9ca3af 100%);
+                    border-radius: 0 3px 3px 0;
                 }
                 
                 .nav-icon {
@@ -79,52 +84,138 @@ class CustomSidebar extends HTMLElement {
                 
                 .new-chat-btn {
                     margin: 0 1.5rem 1.5rem;
-                    padding: 0.75rem 1.5rem;
+                    padding: 0.875rem 1.5rem;
                     background: linear-gradient(135deg, #ffffff 0%, #9ca3af 100%);
                     color: #111827;
                     border-radius: 12px;
                     font-weight: 600;
+                    font-size: 0.9375rem;
                     text-align: center;
                     cursor: pointer;
-                    transition: all 0.2s ease;
+                    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                     border: none;
                     display: flex;
                     align-items: center;
                     justify-content: center;
-                    gap: 0.5rem;
+                    gap: 0.625rem;
+                    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
                 }
                 
                 .new-chat-btn:hover {
-                    transform: translateY(-2px);
-                    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.2);
+                    transform: translateY(-2px) scale(1.02);
+                    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.25);
+                }
+                
+                .new-chat-btn:active {
+                    transform: translateY(0) scale(0.98);
                 }
                 
                 .chat-history {
-                    max-height: 300px;
+                    max-height: 280px;
                     overflow-y: auto;
                     margin-bottom: 1rem;
+                    padding-right: 0.5rem;
+                }
+                
+                .chat-history::-webkit-scrollbar {
+                    width: 4px;
+                }
+                
+                .chat-history::-webkit-scrollbar-track {
+                    background: transparent;
+                }
+                
+                .chat-history::-webkit-scrollbar-thumb {
+                    background: #4b5563;
+                    border-radius: 2px;
                 }
                 
                 .history-item {
-                    padding: 0.5rem 1.5rem;
-                    color: #71717a;
+                    padding: 0.625rem 1.5rem;
+                    color: #9ca3af;
                     font-size: 0.875rem;
                     cursor: pointer;
                     transition: all 0.2s ease;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
+                    border-radius: 0 8px 8px 0;
+                    margin-right: 0.75rem;
+                    line-height: 1.4;
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
                 }
                 
                 .history-item:hover {
-                    color: #d1d5db;
-                    background: rgba(255, 255, 255, 0.03);
+                    color: #ffffff;
+                    background: rgba(255, 255, 255, 0.06);
+                    padding-left: 2rem;
+                }
+                
+                .history-icon {
+                    width: 16px;
+                    height: 16px;
+                    opacity: 0.6;
                 }
                 
                 .divider {
                     height: 1px;
-                    background: rgba(255, 255, 255, 0.1);
-                    margin: 1rem 0;
+                    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
+                    margin: 1.5rem 1.5rem 1rem;
+                }
+                
+                .account-section {
+                    padding: 1rem 1.5rem;
+                    background: rgba(255, 255, 255, 0.04);
+                    border-radius: 12px;
+                    margin: 0 1.5rem;
+                    display: flex;
+                    align-items: center;
+                    gap: 0.75rem;
+                    cursor: pointer;
+                    transition: all 0.2s ease;
+                }
+                
+                .account-section:hover {
+                    background: rgba(255, 255, 255, 0.08);
+                }
+                
+                .avatar {
+                    width: 36px;
+                    height: 36px;
+                    border-radius: 50%;
+                    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: white;
+                    font-weight: 600;
+                    font-size: 0.875rem;
+                }
+                
+                .account-info {
+                    flex: 1;
+                }
+                
+                .account-name {
+                    color: #ffffff;
+                    font-weight: 500;
+                    font-size: 0.875rem;
+                    margin-bottom: 0.125rem;
+                }
+                
+                .account-plan {
+                    color: #9ca3af;
+                    font-size: 0.75rem;
+                }
+                
+                .badge {
+                    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
+                    color: #ffffff;
+                    padding: 0.25rem 0.625rem;
+                    border-radius: 6px;
+                    font-size: 0.625rem;
+                    font-weight: 600;
+                    text-transform: uppercase;
+                    letter-spacing: 0.05em;
                 }
                 
                 @media (max-width: 768px) {
@@ -140,82 +231,94 @@ class CustomSidebar extends HTMLElement {
             
             <nav class="sidebar">
                 <button onclick="startNewChat()" class="new-chat-btn">
-                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2">
+                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5">
                         <path d="M12 5v14m-7-7h14"/>
                     </svg>
-                    New Chat
+                    Yeni Sohbet
                 </button>
                 
                 <div class="nav-section">
-                    <div class="nav-title">Recent Chats</div>
+                    <div class="nav-title">Son Sohbetler</div>
                     <div class="chat-history" id="recentChats">
-                        <div class="history-item">How to create a responsive design?</div>
-                        <div class="history-item">JavaScript async patterns</div>
-                        <div class="history-item">CSS Grid vs Flexbox</div>
-                        <div class="history-item">React performance tips</div>
+                        <div class="history-item">
+                            <svg class="history-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
+                            </svg>
+                            Responsive tasarım nasıl oluşturulur?
+                        </div>
+                        <div class="history-item">
+                            <svg class="history-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
+                            </svg>
+                            JavaScript async paternleri
+                        </div>
+                        <div class="history-item">
+                            <svg class="history-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
+                            </svg>
+                            CSS Grid vs Flexbox karşılaştırması
+                        </div>
+                        <div class="history-item">
+                            <svg class="history-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
+                            </svg>
+                            React performans ipuçları
+                        </div>
+                        <div class="history-item">
+                            <svg class="history-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
+                            </svg>
+                            TypeScript best practices
+                        </div>
                     </div>
                 </div>
                 
                 <div class="divider"></div>
                 
                 <div class="nav-section">
-                    <div class="nav-title">Main</div>
-                    <a href="/" class="nav-item active">
+                    <div class="nav-title">Araçlar</div>
+                    <a href="/" class="nav-item">
                         <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                             <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/>
                             <path d="M9 22V12h6v10"/>
                         </svg>
-                        Home
+                        Ana Sayfa
                     </a>
-                    <a href="/chat" class="nav-item">
+                    <a href="/chat" class="nav-item active">
                         <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                             <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
                         </svg>
-                        Chat
+                        Sohbet
                     </a>
                     <a href="/files" class="nav-item">
                         <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                             <path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9z"/>
                             <path d="M13 2v7h7"/>
                         </svg>
-                        Files
+                        Dosyalarım
                     </a>
-                </div>
-                
-                <div class="divider"></div>
-                
-                <div class="nav-section">
-                    <div class="nav-title">Settings</div>
                     <a href="/settings" class="nav-item">
                         <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                             <circle cx="12" cy="12" r="3"/>
                             <path d="M12 1v6m0 6v6m4.22-13.22l4.24 4.24M1.54 9.96l4.24 4.24m12.44 0l4.24 4.24M1.54 14.04l4.24-4.24"/>
                         </svg>
-                        Settings
-                    </a>
-                    <a href="/about" class="nav-item">
-                        <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <circle cx="12" cy="12" r="10"/>
-                            <path d="M12 6v6l4 2"/>
-                        </svg>
-                            About
-                        </svg>
+                        Ayarlar
                     </a>
                 </div>
                 
                 <div class="divider"></div>
                 
-                <div class="nav-section">
-                    <a href="/upgrade" class="nav-item">
-                        <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
-                        </svg>
-                        Upgrade to Pro
-                    </a>
+                <div class="account-section" onclick="showAccountModal()">
+                    <div class="avatar">U</div>
+                    <div class="account-info">
+                        <div class="account-name">User</div>
+                        <div class="account-plan">Pro Plan</div>
+                    </div>
+                    <div class="badge">Pro</div>
                 </div>
             </nav>
         `;
-    }
+}
     
     // Add methods dynamically since shadow DOM doesn't allow direct access from parent
     connectedCallback() {

index.html

@@ -68,7 +68,7 @@
 <!-- Left Sidebar -->
         <custom-sidebar class="w-64 bg-zinc-900/50 backdrop-blur-xl border-r border-zinc-800"></custom-sidebar>
         <!-- Main Chat Area -->
-        <main class="flex-1 flex flex-col bg-zinc-950 relative overflow-hidden">
+        <main class="flex-1 flex flex-col bg-zinc-950 relative overflow-hidden max-h-full">
 <!-- Chat Header -->
             <div class="bg-zinc-900/30 backdrop-blur-lg border-b border-zinc-800 p-4 flex items-center justify-between">
                 <div class="flex items-center space-x-3">
@@ -114,168 +114,126 @@
                     </div>
                 </div>
             </div>
-            <!-- Input Area -->
-            <div class="bg-zinc-900/30 backdrop-blur-lg border-t border-zinc-800 p-4 mt-auto">
-<div class="flex items-end space-x-3">
-                    <button class="p-3 hover:bg-zinc-800 rounded-lg transition-all duration-200 hover:scale-105">
-                        <i data-feather="paperclip" class="w-5 h-5 text-zinc-400"></i>
-                    </button>
-                    <div class="flex-1 relative">
-                        <textarea 
-                            id="messageInput"
-                            rows="1"
-                            placeholder="Type your message..."
-                            class="w-full bg-zinc-900 border border-zinc-800 rounded-xl px-4 py-3 pr-12 text-white placeholder-zinc-500 resize-none focus:outline-none focus:border-white focus:glow transition-all duration-200"
-                            onkeypress="handleKeyPress(event)"
-                            oninput="autoResize(this)"
-                        ></textarea>
-                        <button class="absolute right-2 bottom-2 p-2 hover:bg-zinc-800 rounded-lg transition-all duration-200 hover:scale-105">
-                            <i data-feather="smile" class="w-4 h-4 text-zinc-400"></i>
-                        </button>
-                    </div>
-                    <button 
-                        onclick="sendMessage()"
-                        class="p-3 bg-gradient-to-r from-white to-zinc-200 text-zinc-900 rounded-xl hover:scale-105 transition-all duration-200 hover:shadow-lg hover:shadow-white/20"
-                    >
-                        <i data-feather="send" class="w-5 h-5"></i>
-                    </button>
-                </div>
-                <div class="flex items-center justify-between mt-2">
-                    <p class="text-xs text-zinc-500">Press Enter to send, Shift+Enter for new line</p>
-                    <div class="flex items-center space-x-2">
-                        <button onclick="clearChat()" class="text-xs text-zinc-500 hover:text-white transition-colors">Clear chat</button>
-                        <span class="text-zinc-700">•</span>
-                        <button onclick="exportChat()" class="text-xs text-zinc-500 hover:text-white transition-colors">Export</button>
-                    </div>
-                </div>
-            </div>
-        </main>
-        <!-- Right Sidebar -->
-        <aside class="w-80 bg-zinc-900/50 backdrop-blur-xl border-l border-zinc-800 p-6 space-y-6">
-            <!-- Model Selection -->
-            <div class="bg-zinc-800/50 rounded-xl p-4 glow">
-                <h3 class="font-semibold text-white mb-3 flex items-center">
-                    <i data-feather="cpu" class="w-4 h-4 mr-2"></i>
-                    Model Selection
-                </h3>
-                <div id="modelDropdown" class="relative">
-                    <button onclick="toggleModelDropdown()" class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-4 py-3 text-left text-white flex items-center justify-between hover:border-zinc-600 transition-all duration-200">
-                        <span id="selectedModel" class="flex items-center">
-                            <div class="w-2 h-2 bg-green-400 rounded-full mr-2"></div>
-                            Max
-                        </span>
-                        <svg class="w-5 h-5 text-zinc-400 transition-transform" id="modelDropdownArrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <path d="M6 9l6 6 6-6"/>
-                        </svg>
-                    </button>
-                    <div id="modelDropdownMenu" class="hidden absolute top-full left-0 right-0 mt-2 bg-zinc-900 border border-zinc-700 rounded-lg shadow-xl z-50">
-                        <div onclick="selectModel('Max')" class="px-4 py-3 text-white hover:bg-zinc-800 cursor-pointer transition-colors duration-150 flex items-center">
-                            <div class="w-2 h-2 bg-green-400 rounded-full mr-2"></div>
-                            <div class="flex-1">
-                                <div class="font-medium">Max</div>
-                                <div class="text-xs text-zinc-400">Most capable, best quality</div>
-                            </div>
-                        </div>
-                        <div onclick="selectModel('Turbo')" class="px-4 py-3 text-white hover:bg-zinc-800 cursor-pointer transition-colors duration-150 flex items-center">
-                            <div class="w-2 h-2 bg-blue-400 rounded-full mr-2"></div>
-                            <div class="flex-1">
-                                <div class="font-medium">Turbo</div>
-                                <div class="text-xs text-zinc-400">Fast responses, good quality</div>
+            <!-- Advanced Input Area -->
+            <div class="bg-zinc-900/40 backdrop-blur-xl border-t border-zinc-800/60 p-6 mt-auto">
+                <!-- Model Selection & Tokens Bar -->
+                <div class="mb-4 flex items-center justify-between">
+                    <div class="flex items-center space-x-4">
+                        <!-- Model Selector -->
+                        <div id="modelDropdown" class="relative">
+                            <button onclick="toggleModelDropdown()" class="flex items-center space-x-2 bg-zinc-800/60 hover:bg-zinc-800/80 border border-zinc-700/50 hover:border-zinc-600/50 rounded-lg px-3 py-2 text-sm text-white transition-all duration-200">
+                                <div id="modelIndicator" class="w-2 h-2 bg-green-400 rounded-full"></div>
+                                <span id="selectedModelText" class="font-medium">Max</span>
+                                <svg class="w-4 h-4 text-zinc-400 transition-transform" id="modelDropdownArrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                    <path d="M6 9l6 6 6-6"/>
+                                </svg>
+                            </button>
+                            <div id="modelDropdownMenu" class="hidden absolute bottom-full left-0 mb-2 bg-zinc-900 border border-zinc-700 rounded-lg shadow-2xl z-50 min-w-[200px]">
+                                <div onclick="selectModel('Max')" class="px-3 py-2 text-white hover:bg-zinc-800 cursor-pointer transition-colors duration-150 flex items-center space-x-2">
+                                    <div class="w-2 h-2 bg-green-400 rounded-full"></div>
+                                    <div>
+                                        <div class="font-medium text-sm">Max</div>
+                                        <div class="text-xs text-zinc-400">En yetenekli</div>
+                                    </div>
+                                </div>
+                                <div onclick="selectModel('Turbo')" class="px-3 py-2 text-white hover:bg-zinc-800 cursor-pointer transition-colors duration-150 flex items-center space-x-2">
+                                    <div class="w-2 h-2 bg-blue-400 rounded-full"></div>
+                                    <div>
+                                        <div class="font-medium text-sm">Turbo</div>
+                                        <div class="text-xs text-zinc-400">Hızlı yanıt</div>
+                                    </div>
+                                </div>
+                                <div onclick="selectModel('Lite')" class="px-3 py-2 text-white hover:bg-zinc-800 cursor-pointer transition-colors duration-150 flex items-center space-x-2">
+                                    <div class="w-2 h-2 bg-yellow-400 rounded-full"></div>
+                                    <div>
+                                        <div class="font-medium text-sm">Lite</div>
+                                        <div class="text-xs text-zinc-400">Ekonomik</div>
+                                    </div>
+                                </div>
                             </div>
                         </div>
-                        <div onclick="selectModel('Lite')" class="px-4 py-3 text-white hover:bg-zinc-800 cursor-pointer transition-colors duration-150 flex items-center">
-                            <div class="w-2 h-2 bg-yellow-400 rounded-full mr-2"></div>
-                            <div class="flex-1">
-                                <div class="font-medium">Lite</div>
-                                <div class="text-xs text-zinc-400">Quick tasks, minimal cost</div>
+                        
+                        <!-- Web Search Toggle -->
+                        <button id="webSearchToggle" onclick="toggleWebSearch()" class="flex items-center space-x-1.5 bg-zinc-800/60 hover:bg-zinc-800/80 border border-zinc-700/50 hover:border-zinc-600/50 rounded-lg px-3 py-2 text-sm text-white transition-all duration-200">
+                            <i data-feather="search" class="w-3.5 h-3.5"></i>
+                            <span>Web</span>
+                            <div class="w-8 h-4 bg-zinc-700 rounded-full relative">
+                                <div id="webSearchToggleCircle" class="absolute left-0.5 top-0.5 w-3 h-3 bg-zinc-500 rounded-full transition-transform duration-200"></div>
                             </div>
+                        </button>
+                    </div>
+                    
+                    <!-- Token Counter -->
+                    <div class="flex items-center space-x-3">
+                        <div class="flex items-center space-x-2">
+                            <i data-feather="cpu" class="w-3.5 h-3.5 text-zinc-400"></i>
+                            <span id="tokenCount" class="text-xs text-zinc-400 font-medium">0 / 4096 tokens</span>
                         </div>
-                        <div onclick="selectModel('Deep Research')" class="px-4 py-3 text-white hover:bg-zinc-800 cursor-pointer transition-colors duration-150 flex items-center border-t border-zinc-700">
-                            <div class="w-2 h-2 bg-purple-400 rounded-full mr-2"></div>
-                            <div class="flex-1">
-                                <div class="font-medium">Deep Research</div>
-                                <div class="text-xs text-zinc-400">Advanced analysis & insights</div>
-                            </div>
+                        <!-- Progress Bar -->
+                        <div class="w-20 bg-zinc-800 rounded-full h-1.5 relative overflow-hidden">
+                            <div id="tokenProgressBar" class="absolute top-0 left-0 h-full bg-gradient-to-r from-white to-zinc-400 rounded-full transition-all duration-300" style="width: 0%"></div>
                         </div>
                     </div>
                 </div>
-            </div>
-            
-            <!-- AI Status -->
-            <div class="bg-zinc-800/50 rounded-xl p-4 glow">
-                <h3 class="font-semibold text-white mb-3 flex items-center">
-                    <i data-feather="activity" class="w-4 h-4 mr-2"></i>
-                    System Status
-                </h3>
-                <div class="space-y-2">
-                    <div class="flex justify-between items-center">
-                        <span class="text-sm text-zinc-400">Response Time</span>
-                        <span class="text-sm text-green-400 font-medium">~0.8s</span>
-                    </div>
-                    <div class="flex justify-between items-center">
-                        <span class="text-sm text-zinc-400">Tokens Used</span>
-                        <span class="text-sm text-white font-medium">1,247</span>
-                    </div>
-                </div>
-            </div>
-<!-- AI Capabilities -->
-            <div>
-                <h3 class="font-semibold text-white mb-3 flex items-center">
-                    <i data-feather="zap" class="w-4 h-4 mr-2"></i>
-                    Capabilities
-                </h3>
-                <div class="space-y-2">
-                    <div class="flex items-center space-x-2 text-sm text-zinc-400">
-                        <div class="w-2 h-2 bg-green-400 rounded-full"></div>
-                        <span>Code Generation</span>
-                    </div>
-                    <div class="flex items-center space-x-2 text-sm text-zinc-400">
-                        <div class="w-2 h-2 bg-green-400 rounded-full"></div>
-                        <span>Data Analysis</span>
-                    </div>
-                    <div class="flex items-center space-x-2 text-sm text-zinc-400">
-                        <div class="w-2 h-2 bg-green-400 rounded-full"></div>
-                        <span>Creative Writing</span>
-                    </div>
-                    <div class="flex items-center space-x-2 text-sm text-zinc-400">
-                        <div class="w-2 h-2 bg-green-400 rounded-full"></div>
-                        <span>Problem Solving</span>
+                
+                <!-- Main Input Container -->
+                <div class="relative bg-zinc-800/40 rounded-2xl border border-zinc-700/50 hover:border-zinc-600/50 transition-all duration-200 focus-within:border-white/50 focus-within:shadow-lg focus-within:shadow-white/5">
+                    <!-- Textarea -->
+                    <textarea 
+                        id="messageInput"
+                        rows="1"
+                        placeholder="Mesajınızı buraya yazın... (@ ile belge ekle, / komutlar için)"
+                        class="w-full bg-transparent text-white placeholder-zinc-500 resize-none focus:outline-none px-4 py-3.5 pr-24 text-sm leading-relaxed"
+                        style="min-height: 52px; max-height: 120px;"
+                        onkeypress="handleKeyPress(event)"
+                        oninput="handleInput(this)"
+                    ></textarea>
+                    
+                    <!-- Action Buttons -->
+                    <div class="absolute right-2 bottom-2 flex items-center space-x-1.5">
+                        <button onclick="attachFile()" class="p-2 hover:bg-zinc-700/50 rounded-lg transition-all duration-200 group">
+                            <i data-feather="paperclip" class="w-4 h-4 text-zinc-400 group-hover:text-white"></i>
+                        </button>
+                        <button onclick="showVoiceInput()" class="p-2 hover:bg-zinc-700/50 rounded-lg transition-all duration-200 group">
+                            <i data-feather="mic" class="w-4 h-4 text-zinc-400 group-hover:text-white"></i>
+                        </button>
+                        <button onclick="stopGeneration()" id="stopButton" class="hidden p-2 hover:bg-red-500/20 rounded-lg transition-all duration-200 group">
+                            <i data-feather="square" class="w-4 h-4 text-red-400 group-hover:text-red-300"></i>
+                        </button>
+                        <button 
+                            onclick="sendMessage()"
+                            id="sendButton"
+                            class="p-2 bg-gradient-to-r from-white to-zinc-200 text-zinc-900 rounded-lg hover:scale-105 transition-all duration-200 hover:shadow-lg hover:shadow-white/20 disabled:opacity-50 disabled:cursor-not-allowed"
+                        >
+                            <i data-feather="send" class="w-4 h-4"></i>
+                        </button>
                     </div>
                 </div>
-            </div>
-            
-            <!-- Tips -->
-            <div>
-                <h3 class="font-semibold text-white mb-3 flex items-center">
-                    <i data-feather="info" class="w-4 h-4 mr-2"></i>
-                    Pro Tips
-                </h3>
-                <ul class="space-y-2 text-sm text-zinc-400">
-                    <li>• Use /help for quick commands</li>
-                    <li>• Try markdown formatting</li>
-                    <li>• Upload files for analysis</li>
-                    <li>• Use @ to mention contexts</li>
-                </ul>
-            </div>
-            
-            <!-- Memory Usage -->
-            <div>
-                <h3 class="font-semibold text-white mb-3 flex items-center">
-                    <i data-feather="hard-drive" class="w-4 h-4 mr-2"></i>
-                    Memory Context
-                </h3>
-                <div class="bg-zinc-800/50 rounded-xl p-3">
-                    <div class="flex justify-between text-xs mb-2">
-                        <span class="text-zinc-400">Used</span>
-                        <span class="text-white">68%</span>
+                
+                <!-- Bottom Actions Bar -->
+                <div class="mt-3 flex items-center justify-between">
+                    <div class="flex items-center space-x-3">
+                        <button onclick="clearChat()" class="text-xs text-zinc-500 hover:text-white transition-colors duration-200 flex items-center space-x-1">
+                            <i data-feather="trash-2" class="w-3 h-3"></i>
+                            <span>Temizle</span>
+                        </button>
+                        <button onclick="exportChat()" class="text-xs text-zinc-500 hover:text-white transition-colors duration-200 flex items-center space-x-1">
+                            <i data-feather="download" class="w-3 h-3"></i>
+                            <span>Dışa Aktar</span>
+                        </button>
+                        <button onclick="showSettings()" class="text-xs text-zinc-500 hover:text-white transition-colors duration-200 flex items-center space-x-1">
+                            <i data-feather="settings" class="w-3 h-3"></i>
+                            <span>Ayarlar</span>
+                        </button>
                     </div>
-                    <div class="w-full bg-zinc-800 rounded-full h-2">
-                        <div class="bg-gradient-to-r from-white to-zinc-400 h-2 rounded-full" style="width: 68%"></div>
+                    <div class="flex items-center space-x-2 text-xs text-zinc-500">
+                        <span>Enter gönderir</span>
+                        <span>•</span>
+                        <span>Shift+Enter yeni satır</span>
                     </div>
-                    <p class="text-xs text-zinc-500 mt-2">6,800 / 10,000 tokens</p>
                 </div>
             </div>
-        </aside>
+</main>
 <script src="components/header.js"></script>
     <script src="components/sidebar.js"></script>
 <script src="script.js"></script>

script.js

@@ -1,9 +1,13 @@
+
 // Global Variables
 let chatHistory = [];
 let currentModel = 'Max';
 let isCompactMode = false;
- let isConnected = true;
-
+let isConnected = true;
+let webSearchEnabled = false;
+let isGenerating = false;
+let currentTokenCount = 0;
+const maxTokens = 4096;
 // Initialize
 document.addEventListener('DOMContentLoaded', function() {
     initializeApp();
@@ -53,12 +57,11 @@ function setupEventListeners() {
         this.style.height = Math.min(this.scrollHeight, 120) + 'px';
     });
 }
-
-functionsendMessage() {
+function sendMessage() {
     const input = document.getElementById('messageInput');
     const message = input.value.trim();
     
-    if (!message || !isConnected) return;
+    if (!message || !isConnected || isGenerating) return;
     
     // Add user message
     addMessage(message, 'user');
@@ -66,18 +69,30 @@ functionsendMessage() {
     // Clear input
     input.value = '';
     input.style.height = 'auto';
+    updateTokenCount('');
+    
+    // Set generating state
+    isGenerating = true;
+    handleInput(input);
     
     // Show typing indicator
     showTypingIndicator();
     
     // Simulate AI response
+    const responseTime = currentModel === 'Max' ? 2000 : currentModel === 'Turbo' ? 1000 : 500;
+    
     setTimeout(() => {
+        isGenerating = false;
         hideTypingIndicator();
-        const response = generateAIResponse(message);
+        handleInput(input);
+        
+        let response = generateAIResponse(message);
+        if (webSearchEnabled) {
+            response += '\n\n🔍 *Web araması sonucu: `https://example.com`*';
+        }
         addMessage(response, 'ai');
-    }, 1000 + Math.random() * 1500);
+    }, responseTime + Math.random() * 1000);
 }
-
 function addMessage(content, sender) {
     const chatContainer = document.getElementById('chatContainer');
     const timestamp = new Date().toLocaleTimeString('en-US', { 
@@ -174,30 +189,114 @@ function toggleModelDropdown() {
         arrow.style.transform = 'rotate(0deg)';
     }
 }
-
 function selectModel(model) {
     currentModel = model;
-    const selected = document.getElementById('selectedModel');
-    const model = {
+    const selectedText = document.getElementById('selectedModelText');
+    const indicator = document.getElementById('modelIndicator');
+    
+    const modelConfig = {
         'Max': { color: 'green' },
         'Turbo': { color: 'blue' },
-        'Lite': { color: 'yellow' },
-        'Deep Research': { color: 'purple' }
+        'Lite': { color: 'yellow' }
     };
     
-    selected.innerHTML = `
-        <div class="w-2 h-2 bg-${modelConfig[model].color}-400 rounded-full mr-2"></div>
-        ${model}
-    `;
+    selectedText.textContent = model;
+    indicator.className = `w-2 h-2 bg-${modelConfig[model].color}-400 rounded-full`;
     
     // Close dropdown
     document.getElementById('modelDropdownMenu').classList.add('hidden');
     document.getElementById('modelDropdownArrow').style.transform = 'rotate(0deg)';
     
-    // Update response time based on model
+    // Update model status
     updateModelStatus(model);
 }
 
+function toggleWebSearch() {
+    webSearchEnabled = !webSearchEnabled;
+    const toggleCircle = document.getElementById('webSearchToggleCircle');
+    const toggleButton = document.getElementById('webSearchToggle');
+    
+    if (webSearchEnabled) {
+        toggleCircle.style.transform = 'translateX(16px)';
+        toggleCircle.classList.add('bg-green-400');
+        toggleCircle.classList.remove('bg-zinc-500');
+    } else {
+        toggleCircle.style.transform = 'translateX(0)';
+        toggleCircle.classList.remove('bg-green-400');
+        toggleCircle.classList.add('bg-zinc-500');
+    }
+}
+
+function handleInput(textarea) {
+    // Auto resize
+    textarea.style.height = 'auto';
+    textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
+    
+    // Update token count
+    updateTokenCount(textarea.value);
+    
+    // Show/hide appropriate buttons
+    const sendButton = document.getElementById('sendButton');
+    const stopButton = document.getElementById('stopButton');
+    
+    if (isGenerating) {
+        sendButton.classList.add('hidden');
+        stopButton.classList.remove('hidden');
+    } else {
+        sendButton.classList.remove('hidden');
+        stopButton.classList.add('hidden');
+    }
+}
+
+function updateTokenCount(text) {
+    if (!text) text = '';
+    // Rough estimation: average 1 token per 4 characters
+    currentTokenCount = Math.ceil(text.length / 4);
+    
+    const tokenCountElement = document.getElementById('tokenCount');
+    const progressBar = document.getElementById('tokenProgressBar');
+    
+    tokenCountElement.textContent = `${currentTokenCount} / ${maxTokens} tokens`;
+    
+    const percentage = Math.min((currentTokenCount / maxTokens) * 100, 100);
+    progressBar.style.width = percentage + '%';
+    
+    // Change color based on percentage
+    if (percentage > 80) {
+        progressBar.className = 'absolute top-0 left-0 h-full bg-gradient-to-r from-red-500 to-orange-500 rounded-full transition-all duration-300';
+    } else if (percentage > 60) {
+        progressBar.className = 'absolute top-0 left-0 h-full bg-gradient-to-r from-yellow-500 to-orange-500 rounded-full transition-all duration-300';
+    } else {
+        progressBar.className = 'absolute top-0 left-0 h-full bg-gradient-to-r from-white to-zinc-400 rounded-full transition-all duration-300';
+    }
+}
+
+function attachFile() {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.onchange = e => {
+        const file = e.target.files[0];
+        if (file) {
+            addMessage(`📎 ${file.name} eklendi`, 'user');
+            // Handle file upload logic here
+        }
+    };
+    input.click();
+}
+
+function showVoiceInput() {
+    alert('Sesli giriş yakında eklenecek!');
+}
+
+function stopGeneration() {
+    isGenerating = false;
+    hideTypingIndicator();
+    handleInput(document.getElementById('messageInput'));
+}
+
+function showSettings() {
+    alert('Ayarlar sayfası yakında eklenecek!');
+}
 function updateModelStatus(model) {
     const responseTimes = {
         'Max': '~1.2s',
@@ -213,15 +312,6 @@ function updateModelStatus(model) {
         }
     });
 }
-
-// Close dropdown when clicking outside
-document.addEventListener('click', function(event) {
-    const dropdown = document.getElementById('modelDropdown');
-    if (!dropdown.contains(event.target)) {
-        document.getElementById('modelDropdownMenu').classList.add('hidden');
-        document.getElementById('modelDropdownArrow').style.transform = 'rotate(0deg)';
-    }
-});
 function handleKeyPress(event) {
     if (event.key === 'Enter' && !event.shiftKey) {
         event.preventDefault();