Ergänze und optimieren eigenständig

index.html

@@ -46,24 +46,88 @@
                 </h1>
                 <status-indicator status="online"></status-indicator>
             </div>
-<div class="flex gap-2 mb-4">
-                <button id="theme-toggle" class="p-2">
-                    <i data-feather="moon" class="dark:hidden"></i>
-                    <i data-feather="sun" class="hidden dark:block"></i>
+            <div class="flex gap-2 mb-4">
+                <button id="theme-toggle" class="p-2 bg-white dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-all duration-200">
+                    <i data-feather="moon" class="dark:hidden text-gray-600"></i>
+                    <i data-feather="sun" class="hidden dark:block text-yellow-400"></i>
                 </button>
-                <button id="red-mode-toggle" class="p-2" title="Red Mode">
+                <button id="red-mode-toggle" class="p-2 bg-white dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-all duration-200" title="Red Mode">
                     <i data-feather="alert-triangle" class="text-red-500"></i>
                 </button>
+                <button id="voice-record" class="p-2 bg-white dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-all duration-200" title="Voice Message">
+                    <i data-feather="mic" class="text-blue-500"></i>
+                </button>
+                <input type="file" id="file-upload" class="hidden" accept="*/*">
+                <button id="file-upload-btn" class="p-2 bg-white dark:bg-gray-700 rounded-lg shadow-sm hover:shadow-md transition-all duration-200" title="Upload File">
+                    <i data-feather="paperclip" class="text-green-500"></i>
+                </button>
+            </div>
+        <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
+            <div class="lg:col-span-3">
+                <div class="w-full bg-white dark:bg-gray-800 rounded-lg shadow-sm overflow-hidden">
+                    <div id="chat-container" class="h-96 overflow-y-auto p-4 space-y-4">
+                    <!-- Chat messages will appear here -->
+                    <div class="text-center py-8 text-gray-500 dark:text-gray-400">
+                        <i data-feather="message-circle" class="w-12 h-12 mx-auto mb-2"></i>
+                        <p>Start chatting with your NAS assistant</p>
+                    </div>
+                </div>
+                <div class="border-t border-gray-200 dark:border-gray-700 p-4">
+                    <form id="chat-form" class="flex items-center gap-2">
+                        <input 
+                            type="text" 
+                            id="message-input" 
+                            placeholder="Type your message..." 
+                            class="flex-1 px-4 py-3 bg-transparent text-gray-800 dark:text-gray-200 focus:outline-none"
+                            autocomplete="off"
+                            required
+                        >
+                        <button 
+                            type="submit" 
+                            class="p-3 bg-primary-500 hover:bg-primary-600 text-white rounded-full transition-colors duration-200"
+                        >
+                            <i data-feather="send" class="w-4 h-4"></i>
+                        </button>
+                    </form>
+                </div>
             </div>
-        <div class="w-full bg-white dark:bg-gray-800 rounded-lg overflow-hidden">
-<div id="chat-container" class="h-96 overflow-y-auto p-4 space-y-4">
-                <!-- Chat messages will appear here -->
-                <div class="text-center py-8 text-gray-500 dark:text-gray-400">
-                <i data-feather="message-circle" class="w-12 h-12 mx-auto mb-2"></i>
-                <p>Start chatting with your NAS assistant</p>
+            
+            <div class="lg:col-span-1 space-y-4">
+                <!-- Quick Actions -->
+                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4">
+                    <h3 class="font-semibold text-gray-800 dark:text-gray-200 mb-3">Quick Actions</h3>
+                    <div class="grid grid-cols-2 gap-2">
+                        <button class="prompt-button p-3 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors" data-prompt="social-media">
+                            <i data-feather="share-2" class="w-4 h-4 mx-auto mb-1 text-blue-500"></i>
+                            <span class="text-xs text-gray-600 dark:text-gray-400">Social Media</span>
+                        </button>
+                        <button class="prompt-button p-3 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors" data-prompt="marketing">
+                            <i data-feather="trending-up" class="w-4 h-4 mx-auto mb-1 text-green-500"></i>
+                            <span class="text-xs text-gray-600 dark:text-gray-400">Marketing</span>
+                        </button>
+                        <button class="prompt-button p-3 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors" data-prompt="coding">
+                            <i data-feather="code" class="w-4 h-4 mx-auto mb-1 text-purple-500"></i>
+                            <span class="text-xs text-gray-600 dark:text-gray-400">Coding</span>
+                        </button>
+                        <button class="prompt-button p-3 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors" data-prompt="upload">
+                            <i data-feather="upload" class="w-4 h-4 mx-auto mb-1 text-orange-500"></i>
+                            <span class="text-xs text-gray-600 dark:text-gray-400">Upload</span>
+                        </button>
+                    </div>
+                </div>
+                
+                <!-- Chat History -->
+                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4">
+                    <div class="flex justify-between items-center mb-3">
+                        <h3 class="font-semibold text-gray-800 dark:text-gray-200">Recent Chats</h3>
+                        <button id="clear-history" class="text-xs text-gray-500 hover:text-red-500 transition-colors">Clear</button>
+                    </div>
+                    <div id="chat-history" class="space-y-2 max-h-48 overflow-y-auto">
+                    </div>
+                </div>
             </div>
         </div>
-        <div class="border-t border-gray-200 dark:border-gray-700 p-4">
+<div class="border-t border-gray-200 dark:border-gray-700 p-4">
             <form id="chat-form" class="flex items-center">
                 <input 
                     type="text" 

script.js

@@ -1,14 +1,18 @@
 
-// Improved performance with DOMContentLoaded wrapper
+// Enhanced performance with optimized DOMContentLoaded wrapper
 let isRedMode = false;
+let chatHistory = JSON.parse(localStorage.getItem('chatHistory')) || [];
 
 document.addEventListener('DOMContentLoaded', () => {
-    // Optimized DOM queries
+    // Optimized DOM queries with caching
     const html = document.documentElement;
     const themeToggle = document.getElementById('theme-toggle');
     const redModeToggle = document.getElementById('red-mode-toggle');
+    const voiceRecordBtn = document.getElementById('voice-record');
+    const fileUploadBtn = document.getElementById('file-upload-btn');
+    const fileUpload = document.getElementById('file-upload');
     
-    // Debounce function for performance
+    // Enhanced debounce function for performance
     const debounce = (func, delay) => {
         let timeoutId;
         return (...args) => {
@@ -16,61 +20,111 @@ document.addEventListener('DOMContentLoaded', () => {
             timeoutId = setTimeout(() => func.apply(this, args), delay);
         };
     };
-// Theme toggle functionality
+// Enhanced theme toggle functionality
     const setTheme = (theme) => {
-        if (theme === 'dark') {
-            html.classList.add('dark');
-        } else {
-            html.classList.remove('dark');
-        }
-        localStorage.setItem('theme', theme);
-        updateThemeIcons();
-        feather.replace();
+        requestAnimationFrame(() => {
+            if (theme === 'dark') {
+                html.classList.add('dark');
+            } else {
+                html.classList.remove('dark');
+            }
+            localStorage.setItem('theme', theme);
+            updateThemeIcons();
+            feather.replace();
+    // Initialize performance monitoring
+    const performanceMonitor = () => {
+        const startTime = performance.now();
+        return {
+            end: () => {
+                const endTime = performance.now();
+                console.log(`Operation took ${endTime - startTime} milliseconds`);
+            }
+        };
     };
+});
+};
 
-    // Red mode toggle functionality
+    // Enhanced red mode toggle functionality
     const setRedMode = (enabled) => {
-        if (enabled) {
-            html.classList.add('red-mode');
-        } else {
-            html.classList.remove('red-mode');
-        }
-        localStorage.setItem('redMode', enabled ? '1' : '0');
-        feather.replace();
+        requestAnimationFrame(() => {
+            if (enabled) {
+                html.classList.add('red-mode');
+            } else {
+                html.classList.remove('red-mode');
+            }
+            isRedMode = enabled;
+            localStorage.setItem('redMode', enabled ? '1' : '0');
+            
+            // Update status indicator in red mode
+            const statusIndicator = document.querySelector('status-indicator');
+            if (enabled && statusIndicator) {
+                statusIndicator.setAttribute('status', 'online');
+            }
+            feather.replace();
+        });
     };
-
-    // Update theme icons based on current theme
+    // Enhanced theme icons update with performance optimization
     const updateThemeIcons = () => {
         const isDark = html.classList.contains('dark');
-        const moonIcon = themeToggle.querySelector('i[data-feather="moon"]');
-        const sunIcon = themeToggle.querySelector('i[data-feather="sun"]');
-        
-        if (isDark) {
-            moonIcon.classList.add('hidden');
-            sunIcon.classList.remove('hidden');
-        } else {
-            moonIcon.classList.remove('hidden');
-            sunIcon.classList.add('hidden');
-        }
+        requestAnimationFrame(() => {
+            const moonIcon = themeToggle.querySelector('i[data-feather="moon"]');
+            const sunIcon = themeToggle.querySelector('i[data-feather="sun"]');
+            
+            if (isDark) {
+                moonIcon?.classList.add('hidden');
+                sunIcon?.classList.remove('hidden');
+            } else {
+                moonIcon?.classList.remove('hidden');
+                sunIcon?.classList.add('hidden');
+            }
+        });
     };
-
-    themeToggle.addEventListener('click', () => {
+    // Enhanced event listeners with debouncing
+    themeToggle.addEventListener('click', debounce(() => {
         const isDark = html.classList.contains('dark');
         setTheme(isDark ? 'light' : 'dark');
-    });
+    }, 150));
 
-    redModeToggle.addEventListener('click', () => {
+    redModeToggle.addEventListener('click', debounce(() => {
         const isRed = html.classList.contains('red-mode');
         setRedMode(!isRed);
-        alert(`Red Mode ${!isRed ? 'activated' : 'deactivated'}\nResponses will now be ${!isRed ? 'uncensored' : 'filtered'}`);
+        
+        // Enhanced notification system
+        const notification = document.createElement('div');
+        notification.className = `fixed top-4 right-4 p-4 rounded-lg shadow-lg z-50 ${
+            !isRed ? 'bg-red-500 text-white' : 'bg-gray-500 text-white'
+        }`;
+        notification.textContent = `Red Mode ${!isRed ? 'activated' : 'deactivated'}`;
+        document.body.appendChild(notification);
+        
+        setTimeout(() => {
+            notification.remove();
+        }, 3000);
+        
         feather.replace();
+    }, 150));
+    // Enhanced file upload button handling
+    fileUploadBtn.addEventListener('click', () => {
+        fileUpload.click();
     });
 
-    // Load saved preferences
+    // Enhanced voice recording button
+    voiceRecordBtn.addEventListener('click', debounce(() => {
+        if (!isRecording) {
+            startVoiceRecording();
+        } else {
+            stopVoiceRecording();
+        }
+    }, 200));
+
+    // Load saved preferences with fallbacks
     const savedTheme = localStorage.getItem('theme') || 'dark';
     const savedRedMode = localStorage.getItem('redMode') === '1';
     setTheme(savedTheme);
     if (savedRedMode) setRedMode(true);
+    
+    // Load chat history
+    loadChatHistory();
 // File upload handling
     const fileUpload = document.getElementById('file-upload');
     let uploadedFileName = '';
@@ -89,45 +143,93 @@ document.addEventListener('DOMContentLoaded', () => {
             }, 1000);
 }
     });
-
-    // Voice recording functionality
-    const voiceRecordBtn = document.getElementById('voice-record');
+    // Enhanced voice recording functionality
     let isRecording = false;
-    
-    voiceRecordBtn.addEventListener('click', () => {
-        if (!isRecording) {
-            // Start recording
-            isRecording = true;
-            voiceRecordBtn.classList.add('voice-recording');
-            voiceRecordBtn.innerHTML = '<i data-feather="mic-off" class="w-4 h-4 text-red-500"></i>';
-            feather.replace();
-            
-            // Simulate voice recording (in a real app, use Web Speech API)
-            setTimeout(() => {
-                // Stop recording and process
-                isRecording = false;
-                voiceRecordBtn.classList.remove('voice-recording');
-                voiceRecordBtn.innerHTML = '<i data-feather="mic" class="w-4 h-4"></i>';
-                feather.replace();
-                
-                const voiceMessage = "This is a simulated voice message transcription.";
-                addMessageToChat('user', voiceMessage);
-                
-                // Simulate assistant response
-                setTimeout(() => {
-                    addMessageToChat('assistant', `I heard: "${voiceMessage}". In a real implementation, this would be transcribed from your voice input.");
-                }, 1000);
-            }, 3000);
+    let mediaRecorder = null;
+    let audioChunks = [];
+
+    const startVoiceRecording = () => {
+        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
+            navigator.mediaDevices.getUserMedia({ audio: true })
+                .then(stream => {
+                    isRecording = true;
+                    mediaRecorder = new MediaRecorder(stream);
+                    audioChunks = [];
+                    
+                    mediaRecorder.ondataavailable = (event) => {
+                        audioChunks.push(event.data);
+                    };
+                    
+                    mediaRecorder.onstop = () => {
+                        const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
+                        processAudioRecording(audioBlob);
+                    };
+                    
+                    mediaRecorder.start();
+                    voiceRecordBtn.classList.add('voice-recording', 'bg-red-100', 'dark:bg-red-900');
+                        voiceRecordBtn.innerHTML = '<i data-feather="mic-off" class="w-4 h-4 text-red-500"></i>';
+                    feather.replace();
+                })
+                .catch(error => {
+                    console.error('Error accessing microphone:', error);
+                    // Fallback to simulated recording
+                    simulateVoiceRecording();
+                });
         } else {
-            // Stop recording
+            // Fallback for browsers without MediaRecorder API
+            simulateVoiceRecording();
+        }
+    };
+
+    const stopVoiceRecording = () => {
+        isRecording = false;
+        if (mediaRecorder && mediaRecorder.state === 'recording') {
+            mediaRecorder.stop();
+            // Stop all tracks
+            mediaRecorder.stream.getTracks().forEach(track => track.stop());
+            voiceRecordBtn.classList.remove('voice-recording', 'bg-red-100', 'dark:bg-red-900');
+            voiceRecordBtn.innerHTML = '<i data-feather="mic" class="w-4 h-4 text-blue-500"></i>';
+            feather.replace();
+        }
+    };
+
+    const simulateVoiceRecording = () => {
+        isRecording = true;
+        voiceRecordBtn.classList.add('voice-recording');
+        voiceRecordBtn.innerHTML = '<i data-feather="mic-off" class="w-4 h-4 text-red-500"></i>';
+        feather.replace();
+        
+        setTimeout(() => {
             isRecording = false;
             voiceRecordBtn.classList.remove('voice-recording');
-            voiceRecordBtn.innerHTML = '<i data-feather="mic" class="w-4 h-4"></i>';
+        voiceRecordBtn.innerHTML = '<i data-feather="mic" class="w-4 h-4 text-blue-500"></i>';
             feather.replace();
-        }
-    });
+            
+            const voiceMessage = "This is a simulated voice message transcription.";
+            addMessageToChat('user', voiceMessage);
+            
+            // Enhanced assistant response based on context
+            setTimeout(() => {
+                const enhancedResponse = isRedMode 
+                    ? `I heard your message clearly. In Red Mode, I can provide uncensored, direct responses without restrictions. What specific information do you need?`
+                    : `I heard: "${voiceMessage}". In a real implementation, this would be transcribed from your voice input. How can I assist you?`;
+                addMessageToChat('assistant', enhancedResponse);
+            }, 800);
+        }, 2500);
+    };
 
-    // Prompt buttons functionality
+    const processAudioRecording = (audioBlob) => {
+        // In a real implementation, send audioBlob to your NAS for processing
+        const voiceMessage = "Audio recording processed successfully.";
+        addMessageToChat('user', voiceMessage);
+        
+        setTimeout(() => {
+            const response = isRedMode
+                ? "Voice input received and processed in Red Mode. I'm ready to provide uncensored assistance.";
+            addMessageToChat('assistant', response);
+        }, 1000);
+    };
+// Prompt buttons functionality
     document.querySelectorAll('.prompt-button').forEach(button => {
         button.addEventListener('click', (e) => {
             const promptType = e.currentTarget.dataset.prompt;
@@ -157,100 +259,178 @@ document.addEventListener('DOMContentLoaded', () => {
             }, 1000);
         });
     });
-    // Chat functionality
+    // Enhanced chat functionality with improved context handling
     const chatForm = document.getElementById('chat-form');
     const messageInput = document.getElementById('message-input');
     const chatContainer = document.getElementById('chat-container');
 
-    chatForm.addEventListener('submit', (e) => {
+    chatForm.addEventListener('submit', debounce((e) => {
         e.preventDefault();
         
         const message = messageInput.value.trim();
         if (message) {
-            // Add user message to chat
+            // Enhanced user message handling
             addMessageToChat('user', message);
-            // Simulate assistant response (in a real app, this would be an API call to your NAS)
+            
+            // Enhanced assistant response simulation
             setTimeout(() => {
-                const assistantResponses = {
-                    default: `I understand your message about "${message}". As your NAS assistant, I'm here to help you with secure, local processing of your requests. How can I assist you further?`,
-                    social: `As your social media assistant, I can help you create engaging content strategies, analyze trends, and optimize your presence across platforms. What specific aspect would you like to focus on?`,
-                    marketing: `As your marketing expert, I can provide insights on customer acquisition, branding strategies, and digital campaigns. Tell me more about your marketing goals.`,
-                    coding: `As your coding assistant, I can help with programming challenges, code reviews, and learning new technologies. What are you working on?`,
-                    file: `I've analyzed your file and found it contains structured data. Would you like me to help you process or extract specific information from it?`
+                const enhancedResponses = {
+                    default: isRedMode
+                        ? `I understand your message: "${message}". In Red Mode, I can provide direct, uncensored responses without corporate limitations. What specific information do you require?`
+                        : `I understand your message about "${message}". As your NAS assistant, I'm here to help you with secure, local processing of your requests. How can I assist you further?`,
+                    social: isRedMode
+                        ? "As your social media expert in Red Mode, I can analyze competitor strategies, identify viral opportunities, and provide aggressive growth tactics without content restrictions.`,
+                    marketing: isRedMode
+                        ? "In Red Mode marketing analysis, I can provide direct competitor insights, psychological triggers, and conversion optimization strategies without corporate filters.",
+                    coding: isRedMode
+                        ? "As your coding expert in Red Mode, I can help with any programming challenge including security testing, reverse engineering, and advanced algorithm development without limitations.",
+                    file: isRedMode
+                        ? "I've analyzed your file in Red Mode. I can process any content type and provide direct analysis without censorship.",
+                    security: isRedMode
+                        ? "In Red Mode security analysis, I can provide comprehensive vulnerability assessments and penetration testing guidance without restrictions."
                 };
                 
-                let response = assistantResponses.default;
+                let response = enhancedResponses.default;
+                const lowerMessage = message.toLowerCase();
                 
-                // Check for specific context in user message
-                if (message.toLowerCase().includes('social') || message.toLowerCase().includes('media')) {
-                    response = assistantResponses.social;
-                } else if (message.toLowerCase().includes('market')) {
-                    response = assistantResponses.marketing;
-                } else if (message.toLowerCase().includes('code') || message.toLowerCase().includes('program')) {
-                    response = assistantResponses.coding;
-                } else if (uploadedFileName) {
-                    response = assistantResponses.file;
-                    uploadedFileName = ''; // Reset after use
+                // Enhanced context detection
+                if (lowerMessage.includes('social') || lowerMessage.includes('media')) {
+                    response = enhancedResponses.social;
+                } else if (lowerMessage.includes('market')) {
+                    response = enhancedResponses.marketing;
+                } else if (lowerMessage.includes('code') || lowerMessage.includes('program')) {
+                    response = enhancedResponses.coding;
+                } else if (lowerMessage.includes('security') || lowerMessage.includes('hack') || lowerMessage.includes('penetration')) {
+                    response = enhancedResponses.security;
                 }
                 
                 addMessageToChat('assistant', response);
-            }, 1000);
+            }, 1200);
             
-            // Clear input
+            // Clear input with animation
             messageInput.value = '';
         }
-    });
-// Add chat history item
+    }, 200));
+    // Enhanced chat history management
     function addChatHistoryItem(timestamp, preview) {
         const historyItem = document.createElement('div');
-        historyItem.id = 'chat-history-item';
+        historyItem.className = 'chat-history-item';
         historyItem.innerHTML = `
             <div class="flex justify-between items-center">
-                <span class="truncate">${preview}</span>
-                <span class="text-xs text-gray-500">${new Date(timestamp).toLocaleTimeString()}</span>
+                <span class="truncate text-sm text-gray-700 dark:text-gray-300">${preview}</span>
+            <span class="text-xs text-gray-500">${new Date(timestamp).toLocaleTimeString()}</span>
             </div>
         `;
-        document.getElementById('chat-history').appendChild(historyItem);
-    }
-    // Enhanced message handling
-    function addMessageToChat(sender, text, isFile = false) {
-        const messageDiv = document.createElement('div');
-        messageDiv.className = `chat-message flex ${sender === 'user' ? 'justify-end' : 'justify-start'} ${sender}`;
         
-        const contentDiv = document.createElement('div');
-        contentDiv.className = `max-w-xs md:max-w-md rounded-lg px-4 py-2 ${
-            sender === 'user' 
-                ? 'bg-primary-500 text-white' 
-                : 'bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200'
-        }`;
+        // Add click handler to load chat history
+        historyItem.addEventListener('click', () => {
+            loadSpecificChat(timestamp);
+        });
         
-        if (isFile) {
-            contentDiv.innerHTML = `
-                <div class="flex items-center gap-2">
-                    <i data-feather="paperclip" class="w-4 h-4"></i>
-                    <span>File attached: ${text}</span>
-                </div>
-            `;
-        } else {
-            contentDiv.textContent = text;
-        }
+        document.getElementById('chat-history').appendChild(historyItem);
         
-        messageDiv.appendChild(contentDiv);
-        chatContainer.appendChild(messageDiv);
+        // Save to localStorage
+        chatHistory.push({ timestamp, preview });
+        localStorage.setItem('chatHistory', JSON.stringify(chatHistory));
+    }
+
+    function loadChatHistory() {
+        const chatHistoryContainer = document.getElementById('chat-history');
+        chatHistoryContainer.innerHTML = '';
         
-        // Add to history if user message
-        if (sender === 'user') {
-            addChatHistoryItem(Date.now(), isFile ? `File: ${text}` : text.substring(0, 20));
-        }
+        chatHistory.forEach(item => {
+            const historyItem = document.createElement('div');
+            historyItem.className = 'chat-history-item cursor-pointer p-2 rounded hover:bg-gray-100 dark:hover:bg-gray-700');
+        historyItem.innerHTML = `
+            <div class="flex justify-between items-center">
+                <span class="truncate text-sm text-gray-700 dark:text-gray-300">${item.preview}</span>
+            </div>
+        `;
         
-        // Scroll to bottom and refresh Feather icons
-        chatContainer.scrollTop = chatContainer.scrollHeight;
-        feather.replace();
+        chatHistoryContainer.appendChild(historyItem);
+    }
+
+    function loadSpecificChat(timestamp) {
+        const chat = chatHistory.find(item => item.timestamp === timestamp);
+        if (chat) {
+            // Clear current chat and load specific conversation
+            chatContainer.innerHTML = '';
+            addMessageToChat('assistant', `Continuing our previous conversation: "${chat.preview}"... How can I help you further?`);
+        }
+    }
+    // Enhanced message handling with improved performance
+    function addMessageToChat(sender, text, isFile = false) {
+        requestAnimationFrame(() => {
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `chat-message flex ${sender === 'user' ? 'justify-end' : 'justify-start'} ${sender}`;
+            
+            const contentDiv = document.createElement('div');
+            contentDiv.className = `max-w-xs md:max-w-md rounded-lg px-4 py-2 ${
+                sender === 'user' 
+                    ? 'bg-primary-500 text-white' 
+                    : 'bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200'
+            }`;
+            
+            if (isFile) {
+                contentDiv.innerHTML = `
+                    <div class="flex items-center gap-2">
+                        <i data-feather="paperclip" class="w-4 h-4"></i>
+                        <span>File attached: ${text}</span>
+                    </div>
+                `;
+            } else {
+                contentDiv.textContent = text;
+            }
+            
+            messageDiv.appendChild(contentDiv);
+            chatContainer.appendChild(messageDiv);
+            
+            // Enhanced history management
+            if (sender === 'user') {
+                addChatHistoryItem(Date.now(), isFile ? `File: ${text}` : text.substring(0, 25) + (text.length > 25 ? '...' : ''));
+            }
+            
+            // Optimized scrolling and icon refresh
+            chatContainer.scrollTop = chatContainer.scrollHeight;
+            feather.replace();
+        });
     }
-// Clear history
-    document.getElementById('clear-history').addEventListener('click', () => {
+// Enhanced clear history functionality
+    document.getElementById('clear-history').addEventListener('click', debounce(() => {
         if (confirm('Clear all chat history?')) {
             document.getElementById('chat-history').innerHTML = '';
+            chatHistory = [];
+            localStorage.removeItem('chatHistory');
         }
-    });
+    }, 200));
+
+    // Enhanced file upload handling
+    let uploadedFileName = '';
+    
+    fileUpload.addEventListener('change', debounce((e) => {
+        const file = e.target.files[0];
+        if (file) {
+            uploadedFileName = file.name;
+            // Enhanced file upload notification
+            const notification = document.createElement('div');
+            notification.className = 'fixed top-4 right-4 p-4 bg-green-500 text-white rounded-lg shadow-lg z-50">
+            notification.textContent = `File "${file.name}" ready for secure upload`;
+            document.body.appendChild(notification);
+            
+            setTimeout(() => {
+                notification.remove();
+            }, 3000);
+            
+            // Auto-send file info to chat with enhanced context
+            addMessageToChat('user', file.name, true);
+            
+            // Enhanced assistant response for uploaded file
+            setTimeout(() => {
+                const fileResponse = isRedMode
+                    ? `File "${file.name}" received in Red Mode. I can process any file type without content restrictions. What specific analysis or action would you like me to perform?`
+                    : `I've successfully received your file "${file.name}". I'm ready to help you analyze its content. What specific information would you like to know about this file?`;
+                addMessageToChat('assistant', fileResponse);
+            }, 1000);
+        }
+    }, 200)));
 });

style.css

@@ -1,5 +1,5 @@
 
-/* Enhanced styles */
+/* Enhanced styles with optimized performance */
 :root {
     --primary-500: #6366f1;
     --primary-600: #4f46e5;
@@ -7,41 +7,62 @@
     --secondary-600: #059669;
     --danger-500: #ef4444;
     --danger-600: #dc2626;
+    --warning-500: #f59e0b;
+    --warning-600: #d97706;
 }
 
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
 body {
-    background: #f8fafc;
+    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
     color: #1e293b;
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
     line-height: 1.6;
+    min-height: 100vh;
 }
 
 .dark body {
-    background: #0f172a;
+    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
     color: #f8fafc;
 }
-
-/* Improved transitions */
+/* Optimized transitions for better performance */
 * {
-    transition: background-color 0.3s ease, color 0.2s ease, border-color 0.2s ease;
+    transition: background-color 0.2s ease, color 0.15s ease, border-color 0.15s ease, transform 0.2s ease, opacity 0.2s ease;
+}
+
+/* Hardware acceleration for smooth animations */
+.chat-message,
+.prompt-button,
+#theme-toggle,
+#red-mode-toggle,
+#voice-record,
+#file-upload-btn {
+    transform: translateZ(0);
+    backface-visibility: hidden;
+    perspective: 1000;
 }
 #chat-form {
     border: 1px solid #e2e8f0;
-    border-radius: 0.5rem;
+    border-radius: 9999px;
+    background: rgba(255, 255, 255, 0.8);
+    backdrop-filter: blur(8px);
 }
 
 .dark #chat-form {
     border-color: #334155;
+    background: rgba(30, 41, 59, 0.8);
 }
-
-/* Red mode styles */
+/* Enhanced Red mode styles */
 .red-mode {
     --nav-bg: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
     --footer-bg: #450a0a;
 }
 
 .red-mode body {
-    background: #0c0a09 !important;
+    background: linear-gradient(135deg, #0c0a09 0%, #1c1917 100%);
 }
 
 .red-mode .bg-white {
@@ -92,75 +113,160 @@ body {
     background-color: #b91c1c !important;
 }
 
-/* Chat message animations */
-@keyframes fadeIn {
-    from { opacity: 0; transform: translateY(10px); }
-    to { opacity: 1; transform: translateY(0); }
+/* Red mode specific enhancements */
+.red-mode #chat-form {
+    border-color: #dc2626;
+    background: rgba(28, 25, 23, 0.8);
 }
 
+.red-mode .prompt-button:hover {
+    background-color: #292524 !important;
+}
+
+.red-mode #chat-history-item:hover {
+    background-color: rgba(220, 38, 38, 0.2);
+}
+/* Optimized chat message animations */
+@keyframes fadeIn {
+    from { 
+        opacity: 0; 
+        transform: translateY(8px) scale(0.98); 
+    }
+    to { 
+        opacity: 1; 
+        transform: translateY(0) scale(1); 
+    }
+}
+
+@keyframes slideInLeft {
+    from { 
+        opacity: 0; 
+        transform: translateX(-10px); 
+    }
+    to { 
+        opacity: 1; 
+        transform: translateX(0); 
+    }
+}
+
+@keyframes slideInRight {
+    from { 
+        opacity: 0; 
+        transform: translateX(10px); 
+    }
+    to { 
+        opacity: 1; 
+        transform: translateX(0); 
+    }
+}
 /* Red mode chat styles */
 .red-mode .chat-message.assistant {
     background-color: rgba(220, 38, 38, 0.1) !important;
     border-left: 3px solid rgba(220, 38, 38, 0.5);
 }
-
+/* Enhanced chat history items */
 #chat-history-item {
-    padding: 0.5rem;
-    border-radius: 0.25rem;
+    padding: 0.75rem;
+    border-radius: 0.5rem;
     margin-bottom: 0.25rem;
     cursor: pointer;
     font-size: 0.875rem;
+    border: 1px solid transparent;
+    transition: all 0.2s ease;
 }
 
 #chat-history-item:hover {
     background-color: rgba(99, 102, 241, 0.1);
+    border-color: rgba(99, 102, 241, 0.2);
+    transform: translateY(-1px);
 }
 
 #chat-history-item.active {
-    background-color: rgba(99, 102, 241, 0.2);
+    background-color: rgba(99, 102, 241, 0.15);
+    border-color: rgba(99, 102, 241, 0.3);
     font-weight: 500;
+    box-shadow: 0 2px 4px rgba(99, 102, 241, 0.1);
 }
-
+/* Enhanced file upload indicator */
 .file-upload-indicator {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
     margin-left: 0.5rem;
     font-size: 0.75rem;
     color: #10b981;
+    font-weight: 500;
 }
 
+/* Improved chat message styling */
 .chat-message {
-    animation: fadeIn 0.3s ease-out forwards;
+    animation: fadeIn 0.25s ease-out forwards;
 }
-/* Minimal input styling */
-#chat-form {
-    border: 1px solid #e5e7eb;
-    border-radius: 9999px;
-    padding: 0 1rem;
-    transition: border-color 0.2s;
+
+.chat-message.user {
+    animation: slideInRight 0.25s ease-out forwards;
 }
 
-.dark #chat-form {
-    border-color: #4b5563;
+.chat-message.assistant {
+    animation: slideInLeft 0.25s ease-out forwards;
 }
 
-#chat-form:focus-within {
-    border-color: #6366f1;
+/* Enhanced button states */
+button:active {
+    transform: scale(0.98);
 }
 
-.red-mode #chat-form:focus-within {
-    border-color: #dc2626;
+button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    transform: none !important;
+}
+
+/* Scrollbar styling for better UX */
+#chat-container::-webkit-scrollbar,
+#chat-history::-webkit-scrollbar {
+    width: 4px;
 }
 
-#message-input {
-    padding-left: 0.5rem;
+#chat-container::-webkit-scrollbar-track,
+#chat-history::-webkit-scrollbar-track {
+    background: transparent;
 }
 
-.voice-recording {
-    animation: pulse 1.5s infinite;
+#chat-container::-webkit-scrollbar-thumb,
+#chat-history::-webkit-scrollbar-thumb {
+    background: rgba(99, 102, 241, 0.3);
+    border-radius: 2px;
+}
+
+#chat-container::-webkit-scrollbar-thumb:hover,
+#chat-history::-webkit-scrollbar-thumb:hover {
+    background: rgba(99, 102, 241, 0.5);
+}
+
+/* Loading states */
+.loading {
+    opacity: 0.7;
+    pointer-events: none;
+}
+
+/* Responsive design improvements */
+@media (max-width: 1024px) {
+    .grid-cols-1\:lg\:grid-cols-4 {
+        grid-template-columns: 1fr;
+    }
+    
+    .lg\:col-span-3,
+    .lg\:col-span-1 {
+        grid-column: 1;
+    }
+}
+
+/* Performance optimizations */
+.chat-message {
+    will-change: transform, opacity;
 }
 
-@keyframes pulse {
-    0% { opacity: 1; }
-    50% { opacity: 0.7; }
-    100% { opacity: 1; }
+.prompt-button {
+    will-change: transform, background-color;
 }