aşağıda mesaj yazma kutusu yok. onuda eklermisin detaylarıyla

index.html

@@ -349,8 +349,120 @@
                         </div>
                     </div>
                 </div>
-                
                 <div class="flex justify-start">
-                    <div class
+                    <div class="max-w-[85%] md:max-w-[75%] lg:max-w-[65%]">
+                        <div class="chat-bubble-assistant p-4">
+                            <div class="flex items-center space-x-2 mb-2">
+                                <div class="w-6 h-6 rounded-full bg-secondary-500 flex items-center justify-center text-white text-xs font-medium">AI</div>
+                                <span class="text-xs font-medium">SinapsisAI</span>
+                            </div>
+                            <p class="text-sm">Would you like me to explain any specific type of neural network or provide examples?</p>
+                            <div class="flex items-center justify-end space-x-2 mt-3 text-xs text-gray-500 dark:text-gray-400">
+                                <span>12:48 PM</span>
+                                <button class="hover:text-primary-500">
+                                    <i data-feather="copy" class="w-3 h-3"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Composer -->
+            <div class="sticky bottom-0 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800 px-4 py-3 safe-area-bottom">
+                <div class="flex items-end space-x-2">
+                    <button class="p-2 rounded-full text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800">
+                        <i data-feather="plus"></i>
+                    </button>
+                    
+                    <div class="flex-1 relative">
+                        <textarea 
+                            id="message-input" 
+                            rows="1" 
+                            placeholder="Ask anything..." 
+                            class="w-full max-h-32 min-h-[40px] px-4 py-2 bg-gray-100 dark:bg-gray-800 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 resize-none"
+                            style="scrollbar-width: none;"
+                        ></textarea>
+                        <div class="absolute right-2 bottom-2 flex space-x-1">
+                            <button class="p-1 text-gray-500 hover:text-primary-500">
+                                <i data-feather="mic" class="w-4 h-4"></i>
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <button id="send-button" class="p-2 rounded-full bg-primary-500 text-white hover:bg-primary-600 disabled:opacity-50 disabled:cursor-not-allowed">
+                        <i data-feather="send" class="w-4 h-4"></i>
+                    </button>
+                </div>
+                
+                <div class="flex items-center justify-between mt-2 px-1">
+                    <div class="flex space-x-1">
+                        <button class="text-xs px-2 py-1 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center">
+                            <i data-feather="search" class="w-3 h-3 mr-1"></i>
+                            <span>Research</span>
+                        </button>
+                        <button class="text-xs px-2 py-1 rounded-full bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 flex items-center">
+                            <i data-feather="image" class="w-3 h-3 mr-1"></i>
+                            <span>Image</span>
+                        </button>
+                    </div>
+                    <div class="text-xs text-gray-500 dark:text-gray-400">
+                        <span id="char-count">0</span>/2000
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <script>
+        feather.replace();
+        
+        // Auto-resize textarea
+        const textarea = document.getElementById('message-input');
+        textarea.addEventListener('input', function() {
+            this.style.height = 'auto';
+            this.style.height = (this.scrollHeight) + 'px';
+            
+            // Update character count
+            document.getElementById('char-count').textContent = this.value.length;
+        });
+
+        // Toggle send button state
+        textarea.addEventListener('input', function() {
+            const sendButton = document.getElementById('send-button');
+            sendButton.disabled = this.value.trim().length === 0;
+        });
+
+        // Handle send message
+        document.getElementById('send-button').addEventListener('click', function() {
+            const message = textarea.value.trim();
+            if (message) {
+                // TODO: Send message logic
+                console.log('Sending:', message);
+                textarea.value = '';
+                textarea.style.height = 'auto';
+                document.getElementById('char-count').textContent = '0';
+                this.disabled = true;
+            }
+        });
+
+        // Handle Enter to send, Shift+Enter for newline
+        textarea.addEventListener('keydown', function(e) {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                document.getElementById('send-button').click();
+            }
+        });
+
+        // Toggle sidebar on mobile
+        document.getElementById('sidebar-toggle').addEventListener('click', function() {
+            document.getElementById('sidebar').classList.toggle('hidden');
+        });
+
+        // Toggle user menu
+        document.getElementById('user-menu-button').addEventListener('click', function() {
+            document.getElementById('user-menu').classList.toggle('hidden');
+        });
+    </script>
 </body>
-</html>
+</html>