make this site oerational for previewing

components/navbar.js

@@ -70,7 +70,13 @@ class CustomNavbar extends HTMLElement {
                 </div>
                 
                 <div class="actions">
-                    <button class="action-btn" id="screen-share-btn" title="Share Screen">
-                        <i data-feather="monitor"></i>
-                    </button>
-                    <button
+                <button class="action-btn" id="voice-btn" title="Voice Input">
+                    <i data-feather="mic"></i>
+                </button>
+                <span id="voice-status" class="text-xs"></span>
+                <button class="action-btn" id="screen-share-btn" title="Share Screen">
+                    <i data-feather="monitor"></i>
+                </button>
+                <button class="dark-mode-toggle action-btn" id="dark-mode-toggle" title="Toggle Dark Mode">
+                    <i data-feather="moon"></i>
+                </button>

index.html

@@ -34,13 +34,20 @@
         </div>
     </div>
 <script src="script.js"></script>
-    <script>
-        feather.replace();
-        // Initialize Supabase
-        const supabaseUrl = 'https://your-project.supabase.co';
-        const supabaseKey = 'your-anon-key';
-        const supabase = window.supabase.createClient(supabaseUrl, supabaseKey);
-    </script>
+        <script>
+            feather.replace();
+            // Mock Supabase client for preview
+            window.supabase = {
+                from: () => ({
+                    select: () => Promise.resolve({ data: [], error: null }),
+                    insert: () => Promise.resolve({ error: null }),
+                    on: () => ({ subscribe: () => {} })
+                }),
+                channel: () => ({
+                    on: () => ({ subscribe: () => {} })
+                })
+            };
+        </script>
 <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
 </body>
 </html>

script.js

@@ -44,25 +44,18 @@ function initVoiceControls() {
         }
     });
 }
-
 async function processVoiceInput(audioBlob) {
-    // Send to RunPod TTS endpoint
-    const formData = new FormData();
-    formData.append('audio', audioBlob);
-    
-    try {
-        const response = await fetch('YOUR_RUNPOD_ENDPOINT', {
-            method: 'POST',
-            body: formData
-        });
-        
-        const { text } = await response.json();
-        await sendMessage(text);
-    } catch (err) {
-        console.error('Error processing voice input:', err);
-    }
+    // Mock voice processing for preview
+    const mockResponses = [
+        "Hello! How can I help you today?",
+        "I'm an AI assistant here to answer your questions.",
+        "The weather looks nice today, isn't it?",
+        "Would you like me to search for something?",
+        "I can help with various topics including technology, science, and more."
+    ];
+    const randomResponse = mockResponses[Math.floor(Math.random() * mockResponses.length)];
+    await sendMessage(randomResponse);
 }
-
 function initScreenShare() {
     const screenShareBtn = document.getElementById('screen-share-btn');
     
@@ -89,36 +82,26 @@ function initScreenShare() {
         }
     });
 }
-
 async function initChat() {
-    // Load chat history from Supabase
-    const { data: messages, error } = await supabase
-        .from('messages')
-        .select('*')
-        .order('created_at', { ascending: true });
-    
-    if (!error && messages) {
-        const chatContainer = document.getElementById('chat-container');
-        messages.forEach(msg => {
-            const messageElement = createMessageElement(msg);
-            chatContainer.appendChild(messageElement);
-        });
-    }
+    // Load mock chat history for preview
+    const mockMessages = [
+        {
+            content: "Welcome to ChatVerse!",
+            is_user: false,
+            created_at: new Date().toISOString()
+        },
+        {
+            content: "Try sending a message or using voice input",
+            is_user: false,
+            created_at: new Date().toISOString()
+        }
+    ];
     
-    // Subscribe to new messages
-    supabase
-        .channel('messages')
-        .on('postgres_changes', {
-            event: 'INSERT',
-            schema: 'public',
-            table: 'messages'
-        }, (payload) => {
-            const messageElement = createMessageElement(payload.new);
-            document.getElementById('chat-container').appendChild(messageElement);
-        })
-        .subscribe();
+    const chatContainer = document.getElementById('chat-container');
+    mockMessages.forEach(msg => {
+        chatContainer.appendChild(createMessageElement(msg));
+    });
 }
-
 function createMessageElement(message) {
     const messageDiv = document.createElement('div');
     messageDiv.className = `message mb-4 p-3 rounded-lg max-w-3/4 ${
@@ -143,20 +126,33 @@ function createMessageElement(message) {
     feather.replace({ scope: messageDiv });
     return messageDiv;
 }
-
 async function sendMessage(content) {
-    const { error } = await supabase
-        .from('messages')
-        .insert([{ content, is_user: true }]);
+    // Mock message sending for preview
+    const chatContainer = document.getElementById('chat-container');
     
-    if (!error) {
-        // Trigger n8n workflow for AI response
-        await fetch('YOUR_N8N_WORKFLOW_URL', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({ message: content })
-        });
-    }
-}
+    // Add user message
+    const userMsg = {
+        content,
+        is_user: true,
+        created_at: new Date().toISOString()
+    };
+    chatContainer.appendChild(createMessageElement(userMsg));
+    
+    // Add mock AI response after delay
+    setTimeout(async () => {
+        const mockResponses = [
+            "I understand you're asking about " + content,
+            "That's an interesting question about " + content,
+            "Let me think about " + content,
+            "I can help with " + content,
+            content + " is something I know about."
+        ];
+        const aiMsg = {
+            content: mockResponses[Math.floor(Math.random() * mockResponses.length)],
+            is_user: false,
+            created_at: new Date().toISOString()
+        };
+        chatContainer.appendChild(createMessageElement(aiMsg));
+        chatContainer.scrollTop = chatContainer.scrollHeight;
+    }, 1000);
+}