Login failed: puppeteer is not defined - Follow Up Deployment

index.html

@@ -223,7 +223,14 @@
         </div>
     </div>
 
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/esm/puppeteer-core-browser.js"></script>
     <script>
+        // Global variables
+        let browser;
+        let page;
+        let currentConversationId;
+        let lastMessages = {};
+        
         // LLM Model Configuration
         const llmConfig = {
             model: "DeepHermes-3-Llama-3-8B-Preview",
@@ -305,28 +312,31 @@
         const settingsModal = document.getElementById('settingsModal');
         const closeSettings = document.getElementById('closeSettings');
 
-        // Load conversations
-        function loadConversations() {
+        // Update conversation list with real data
+        function updateConversationList(conversations) {
             conversationList.innerHTML = '';
-            conversations.forEach(convo => {
+            conversations.forEach((convo, index) => {
                 const convoElement = document.createElement('div');
                 convoElement.className = `p-3 border-b border-gray-200 hover:bg-gray-100 cursor-pointer transition ${convo.unread > 0 ? 'bg-blue-50' : 'bg-white'}`;
                 convoElement.innerHTML = `
                     <div class="flex items-center space-x-3">
                         <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 font-semibold">
-                            ${convo.avatar}
+                            ${convo.name.charAt(0)}
                         </div>
                         <div class="flex-grow">
                             <div class="flex justify-between items-center">
                                 <h3 class="font-semibold">${convo.name}</h3>
-                                <span class="text-xs text-gray-500">${convo.time}</span>
+                                <span class="text-xs text-gray-500">Just now</span>
                             </div>
-                            <p class="text-sm text-gray-600 truncate">${convo.lastMessage}</p>
+                            <p class="text-sm text-gray-600 truncate">${convo.lastMsg}</p>
                         </div>
                         ${convo.unread > 0 ? `<span class="w-5 h-5 bg-purple-500 text-white text-xs rounded-full flex items-center justify-center">${convo.unread}</span>` : ''}
                     </div>
                 `;
-                convoElement.addEventListener('click', () => loadMessages(convo.id));
+                convoElement.addEventListener('click', () => {
+                    currentConversationId = index;
+                    loadMessages(index);
+                });
                 conversationList.appendChild(convoElement);
             });
         }
@@ -451,6 +461,66 @@
             }
         }
 
+        // Monitor Instagram DMs in real-time
+        async function monitorDMs() {
+            setInterval(async () => {
+                try {
+                    // Get all conversations
+                    const conversations = await page.evaluate(() => {
+                        const items = Array.from(document.querySelectorAll('div[role="button"]'));
+                        return items.map(item => {
+                            const name = item.querySelector('span')?.innerText || 'Unknown';
+                            const lastMsg = item.querySelector('div > div > div > div > div > span')?.innerText || '';
+                            const unread = item.querySelector('div[aria-label="Unread"]') ? 1 : 0;
+                            return { name, lastMsg, unread };
+                        });
+                    });
+                    
+                    // Update UI with real conversations
+                    updateConversationList(conversations);
+                    
+                    // Check for new messages in current conversation
+                    if (currentConversationId) {
+                        const messages = await getMessages(currentConversationId);
+                        checkForNewMessages(currentConversationId, messages);
+                    }
+                    
+                    updateRefreshTime();
+                } catch (error) {
+                    console.error('Error monitoring DMs:', error);
+                }
+            }, 5000); // Check every 5 seconds
+        }
+        
+        // Get messages from a conversation
+        async function getMessages(convoId) {
+            // Implementation to get messages from Instagram
+            // This would use page.evaluate() to scrape the chat window
+            return []; // Return array of message objects
+        }
+        
+        // Check for and respond to new messages
+        async function checkForNewMessages(convoId, messages) {
+            const lastMessage = messages[messages.length - 1];
+            if (!lastMessages[convoId] || lastMessages[convoId] !== lastMessage.id) {
+                lastMessages[convoId] = lastMessage.id;
+                
+                if (lastMessage.sender !== 'me') {
+                    // Get LLM response
+                    const response = await getBotResponse(lastMessage.text);
+                    
+                    // Send response back to Instagram
+                    await sendInstagramMessage(convoId, response);
+                }
+            }
+        }
+        
+        // Send message to Instagram
+        async function sendInstagramMessage(convoId, text) {
+            // Implementation to send message via Puppeteer
+            // This would find the message input and send the text
+        }
+        
         // Update last refresh time
         function updateRefreshTime() {
             const now = new Date();
@@ -478,7 +548,7 @@
         const igUsername = document.getElementById('igUsername');
         const igPassword = document.getElementById('igPassword');
 
-        // Login function
+        // Real Instagram login function
         async function loginToInstagram() {
             const username = igUsername.value.trim();
             const password = igPassword.value.trim();
@@ -488,31 +558,51 @@
                 return;
             }
 
-            // Show loading state
             loginBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Logging in...';
             loginBtn.disabled = true;
 
             try {
-                // In a real app, this would use Puppeteer or similar to scrape Instagram
-                // For demo, we'll simulate a successful login
-                await new Promise(resolve => setTimeout(resolve, 2000));
+                // Connect to browser instance (you'll need Chrome installed)
+                browser = await puppeteer.connect({
+                    browserURL: 'http://127.0.0.1:9222',
+                    defaultViewport: null
+                });
+                
+                page = (await browser.pages())[0] || await browser.newPage();
+                await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36');
+                
+                // Navigate to Instagram login
+                await page.goto('https://www.instagram.com/accounts/login/', { waitUntil: 'networkidle2' });
+                
+                // Fill login form
+                await page.type('input[name="username"]', username);
+                await page.type('input[name="password"]', password);
+                await page.click('button[type="submit"]');
+                
+                // Wait for login to complete
+                await page.waitForNavigation({ waitUntil: 'networkidle2' });
+                
+                // Check for login errors
+                const loginError = await page.$('p[id="slfErrorAlert"]');
+                if (loginError) {
+                    throw new Error('Invalid username or password');
+                }
+                
+                // Go to DMs
+                await page.goto('https://www.instagram.com/direct/inbox/', { waitUntil: 'networkidle2' });
                 
                 // Hide login, show main app
                 loginModal.classList.add('hidden');
                 mainApp.classList.remove('hidden');
                 
-                // Initialize app
-                loadConversations();
-                updateRefreshTime();
+                // Start monitoring DMs
+                monitorDMs();
                 
-                // For demo purposes, load the first conversation
-                if (conversations.length > 0) {
-                    loadMessages(conversations[0].id);
-                }
             } catch (error) {
                 alert('Login failed: ' + error.message);
                 loginBtn.innerHTML = 'Login to Instagram';
                 loginBtn.disabled = false;
+                if (browser) await browser.close();
             }
         }