Update index.html

index.html

@@ -65,10 +65,36 @@
         const videoOverlay = document.getElementById('videoOverlay');
         const videoPlayer = document.getElementById('videoPlayer');
         const closeVideo = document.getElementById('closeVideo');
+        const queryButton = document.getElementById('queryButton');
 
         let slides = [];
         let currentIndex = 0;
 
+        // Define agentic workers
+        const agents = [
+            {
+                name: "Zoe Kim",
+                systemMessage: `
+                    You are Zoe Kim, a Software Engineer specializing in full-stack development. 
+                    Discuss application development requirements in 1-2 sentences.
+                `,
+            },
+            {
+                name: "Alex Patel",
+                systemMessage: `
+                    You are Alex Patel, a DevOps Engineer focusing on CI/CD pipelines. 
+                    Respond to Zoe’s suggestions in 1-2 sentences and discuss infrastructure adjustments.
+                `,
+            },
+            {
+                name: "Jack Dawson",
+                systemMessage: `
+                    You are Jack Dawson, a QA and SRE specializing in system reliability. 
+                    Provide concise feedback on Alex’s design in 1-2 sentences, addressing risks or gaps.
+                `,
+            },
+        ];
+
         async function fetchSlides() {
             try {
                 const response = await fetch('slide_config.json');
@@ -86,7 +112,7 @@
             slideTitle.textContent = slide.id.replace('_', ' ');
             slideImage.src = slide.image;
 
-            // Clear prompt and Grok information
+            // Clear prompt and Grok info
             promptBox.style.display = 'none';
             responseBox.style.display = 'none';
             responseContent.innerHTML = '';
@@ -106,7 +132,9 @@
         });
 
         promptIcon.addEventListener('click', () => {
+            const slideText = slides[currentIndex]?.text || "No prompt text available.";
             promptBox.style.display = promptBox.style.display === 'block' ? 'none' : 'block';
+            promptText.value = slideText; // Set prompt text from the slide config
         });
 
         videoIcon.addEventListener('click', () => {
@@ -122,6 +150,60 @@
             videoPlayer.src = '';
         });
 
+        queryButton.addEventListener('click', async () => {
+            const userPrompt = promptText.value.trim();
+            if (!userPrompt) return;
+
+            responseBox.style.display = "block";
+            responseContent.innerHTML = "Loading...";
+
+            try {
+                let conversationLog = [];
+                const numIterations = 2; // Number of back-and-forth interactions
+
+                for (let iteration = 0; iteration < numIterations; iteration++) {
+                    for (const agent of agents) {
+                        const response = await fetch(`${BASE_URL}/chat/completions`, {
+                            method: "POST",
+                            headers: {
+                                "Authorization": `Bearer ${API_KEY}`,
+                                "Content-Type": "application/json"
+                            },
+                            body: JSON.stringify({
+                                model: "grok-beta",
+                                messages: [
+                                    { role: "system", content: agent.systemMessage },
+                                    { role: "user", content: userPrompt },
+                                    ...conversationLog.map((log) => ({
+                                        role: "assistant",
+                                        content: log.response,
+                                    })),
+                                ],
+                            }),
+                        });
+
+                        if (!response.ok) {
+                            throw new Error(`Error: ${response.statusText}`);
+                        }
+
+                        const data = await response.json();
+                        const agentResponse = data.choices?.[0]?.message?.content || "Unexpected API response.";
+                        conversationLog.push({
+                            agent: agent.name,
+                            response: agentResponse,
+                        });
+
+                        // Append response with styled agent name
+                        responseContent.innerHTML += `
+                            <p><span class="agent-name">${agent.name}:</span> ${agentResponse}</p>
+                        `;
+                    }
+                }
+            } catch (error) {
+                responseContent.textContent = `Error: ${error.message}`;
+            }
+        });
+
         fetchSlides();
     </script>
 </body>