textarea butonları fazla aşağıda. Yazı üstte butonlar aşağıda. Çok az fark gözüküyor gözle ama dikkatli bakınca çok açık, moral bozuyor :D çöz lütfen. Ayrıca modellere direkt "Deep Research" ekle. Herşey tamamen İngilizce olmalı sitede. Türkçe konuştuğuma bakma. Ayrıca Neural Assistant falan buraları Nixaut Copilot olarak düzenle, yazıları falan. Ayrıca tema siyah beyazdı unutma dropdown yeşil falan kullanmışın mesela.

components/sidebar.js

@@ -234,35 +234,35 @@ class CustomSidebar extends HTMLElement {
                     <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>
-                    Yeni Sohbet
+                    New Chat
                 </button>
                 
                 <div class="nav-section">
-                    <div class="nav-title">Son Sohbetler</div>
-                    <div class="chat-history" id="recentChats">
+                    <div class="nav-title">Recent Chats</div>
+<div class="chat-history" id="recentChats">
                         <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?
+                            How to create responsive design?
                         </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
+                            JavaScript async patterns
                         </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ı
+                            CSS Grid vs Flexbox comparison
                         </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ı
+                            React performance tips
                         </div>
                         <div class="history-item">
                             <svg class="history-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -270,7 +270,7 @@ class CustomSidebar extends HTMLElement {
                             </svg>
                             TypeScript best practices
                         </div>
-                    </div>
+</div>
                 </div>
                 
                 <div class="divider"></div>
@@ -282,29 +282,29 @@ class CustomSidebar extends HTMLElement {
                             <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/>
                             <path d="M9 22V12h6v10"/>
                         </svg>
-                        Ana Sayfa
+                        Home
                     </a>
                     <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>
-                        Sohbet
+                        Chat
                     </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>
-                        Dosyalarım
+                        My Files
                     </a>
                     <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>
-                        Ayarlar
+                        Settings
                     </a>
-                </div>
+</div>
                 
                 <div class="divider"></div>
                 

index.html

@@ -76,10 +76,10 @@
                         <i data-feather="cpu" class="w-5 h-5 text-zinc-900"></i>
                     </div>
                     <div>
-                        <h2 class="font-semibold text-white">Neural Assistant</h2>
+                        <h2 class="font-semibold text-white">Nixaut Copilot</h2>
                         <p class="text-xs text-zinc-400">Online • Powered by AI</p>
                     </div>
-                </div>
+</div>
                 <button onclick="toggleChatMode()" class="p-2 hover:bg-zinc-800 rounded-lg transition-all duration-200 hover:scale-105">
                     <i data-feather="maximize-2" class="w-5 h-5 text-zinc-400"></i>
                 </button>
@@ -122,7 +122,7 @@
                         <!-- 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>
+                                <div id="modelIndicator" class="w-2 h-2 bg-white 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"/>
@@ -130,30 +130,36 @@
                             </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 class="w-2 h-2 bg-white rounded-full"></div>
                                     <div>
                                         <div class="font-medium text-sm">Max</div>
-                                        <div class="text-xs text-zinc-400">En yetenekli</div>
+                                        <div class="text-xs text-zinc-400">Most capable</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 class="w-2 h-2 bg-zinc-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 class="text-xs text-zinc-400">Fast response</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 class="w-2 h-2 bg-zinc-500 rounded-full"></div>
                                     <div>
                                         <div class="font-medium text-sm">Lite</div>
-                                        <div class="text-xs text-zinc-400">Ekonomik</div>
+                                        <div class="text-xs text-zinc-400">Economical</div>
+                                    </div>
+                                </div>
+                                <div onclick="selectModel('Deep Research')" 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-zinc-300 rounded-full"></div>
+                                    <div>
+                                        <div class="font-medium text-sm">Deep Research</div>
+                                        <div class="text-xs text-zinc-400">In-depth analysis</div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                        
-                        <!-- Web Search Toggle -->
+<!-- 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>
@@ -175,22 +181,10 @@
                         </div>
                     </div>
                 </div>
-                
                 <!-- 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">
+                    <div class="absolute right-2 top-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>
@@ -208,31 +202,41 @@
                             <i data-feather="send" class="w-4 h-4"></i>
                         </button>
                     </div>
+                    
+                    <!-- Textarea -->
+                    <textarea 
+                        id="messageInput"
+                        rows="1"
+                        placeholder="Type your message here... (@ to attach, / for commands)"
+                        class="w-full bg-transparent text-white placeholder-zinc-500 resize-none focus:outline-none px-4 pt-3.5 pr-24 pb-6 text-sm leading-relaxed"
+                        style="min-height: 52px; max-height: 120px;"
+                        onkeypress="handleKeyPress(event)"
+                        oninput="handleInput(this)"
+                    ></textarea>
                 </div>
-                
                 <!-- 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>
+                            <span>Clear</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>
+                            <span>Export</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>
+                            <span>Settings</span>
                         </button>
                     </div>
                     <div class="flex items-center space-x-2 text-xs text-zinc-500">
-                        <span>Enter gönderir</span>
+                        <span>Enter to send</span>
                         <span>•</span>
-                        <span>Shift+Enter yeni satır</span>
+                        <span>Shift+Enter for new line</span>
                     </div>
                 </div>
-            </div>
+</div>
 </main>
 <script src="components/header.js"></script>
     <script src="components/sidebar.js"></script>

script.js

@@ -193,17 +193,16 @@ function selectModel(model) {
     currentModel = model;
     const selectedText = document.getElementById('selectedModelText');
     const indicator = document.getElementById('modelIndicator');
-    
-    const modelConfig = {
-        'Max': { color: 'green' },
-        'Turbo': { color: 'blue' },
-        'Lite': { color: 'yellow' }
+const modelConfig = {
+        'Max': { color: 'white' },
+        'Turbo': { color: 'zinc-400' },
+        'Lite': { color: 'zinc-500' },
+        'Deep Research': { color: 'zinc-300' }
     };
     
     selectedText.textContent = model;
-    indicator.className = `w-2 h-2 bg-${modelConfig[model].color}-400 rounded-full`;
-    
-    // Close dropdown
+    indicator.className = `w-2 h-2 bg-${modelConfig[model].color} rounded-full`;
+// Close dropdown
     document.getElementById('modelDropdownMenu').classList.add('hidden');
     document.getElementById('modelDropdownArrow').style.transform = 'rotate(0deg)';
     
@@ -215,14 +214,13 @@ 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.add('bg-white');
         toggleCircle.classList.remove('bg-zinc-500');
     } else {
         toggleCircle.style.transform = 'translateX(0)';
-        toggleCircle.classList.remove('bg-green-400');
+        toggleCircle.classList.remove('bg-white');
         toggleCircle.classList.add('bg-zinc-500');
     }
 }
@@ -283,29 +281,25 @@ function attachFile() {
     };
     input.click();
 }
-
 function showVoiceInput() {
-    alert('Sesli giriş yakında eklenecek!');
+    alert('Voice input coming soon!');
 }
-
 function stopGeneration() {
     isGenerating = false;
     hideTypingIndicator();
     handleInput(document.getElementById('messageInput'));
 }
-
 function showSettings() {
-    alert('Ayarlar sayfası yakında eklenecek!');
+    alert('Settings page coming soon!');
 }
 function updateModelStatus(model) {
-    const responseTimes = {
+const responseTimes = {
         'Max': '~1.2s',
         'Turbo': '~0.8s',
         'Lite': '~0.5s',
         'Deep Research': '~2.1s'
     };
-    
-    const responseElements = document.querySelectorAll('.text-green-400');
+const responseElements = document.querySelectorAll('.text-green-400');
     responseElements.forEach(el => {
         if (el.textContent.includes('~')) {
             el.textContent = responseTimes[model];
@@ -364,9 +358,9 @@ function clearChat() {
                 </div>
                 <div class="max-w-xl">
                     <div class="bg-zinc-900 rounded-2xl rounded-tl-sm p-4 glow hover:scale-[1.02] transition-all duration-200">
-                        <p class="text-white leading-relaxed">Welcome to Neural Nexus AI 🚀</p>
+                        <p class="text-white leading-relaxed">Welcome to Nixaut Copilot 🚀</p>
                         <p class="text-zinc-400 text-sm mt-2">I'm your advanced AI assistant. How can I help you today?</p>
-                    </div>
+</div>
                     <p class="text-xs text-zinc-500 mt-1">Just now</p>
                 </div>
             </div>

style.css

@@ -139,11 +139,10 @@ body {
     border-radius: 50%;
     display: inline-block;
 }
-
-.model-dot.green { background: #4ade80; }
-.model-dot.blue { background: #60a5fa; }
-.model-dot.yellow { background: #facc15; }
-.model-dot.purple { background: #c084fc; }
+.model-dot.white { background: #ffffff; }
+.model-dot.zinc-300 { background: #d4d4d8; }
+.model-dot.zinc-400 { background: #a1a1aa; }
+.model-dot.zinc-500 { background: #71717a; }
 /* Mobile Responsive */
 @media (max-width: 768px) {
     .sidebar-mobile {