Update static/js/script.js

static/js/script.js

@@ -4,45 +4,45 @@ let currentHistoryIndex = -1;
 // Store all refined problem suggestions
 let storedRefinedProblems = {};
 
-function generateQueries(event) {
-    event.preventDefault();
-    
-    const userInput = document.getElementById('userInput').value.trim();
-    if (!userInput) {
-        alert('Please enter a technical problem description');
-        return;
-    }
-    
-    // Show loading indicator
-    document.getElementById('loadingIndicator').style.display = 'block';
-    
-    // Send message to Flask backend
-    fetch('/generate-key-issues', {
-        method: 'POST',
-        body: JSON.stringify({ 'query': userInput }),
-        headers: { 'Content-Type': 'application/json' }
-    })
-    .then(response => response.json())
-    .then(data => {
-        // Hide loading indicator
-        document.getElementById('loadingIndicator').style.display = 'none';
-        
-        // Check if we have key issues in the response
-        if (data.key_issues && data.key_issues.length > 0) {
-            // Display the key issues
-            displayKeyIssues(data.key_issues);
-        } else if (data.error) {
-            alert('Error: ' + data.error);
-        } else {
-            alert('No key issues found. Please try a different query.');
-        }
-    })
-    .catch(error => {
-        document.getElementById('loadingIndicator').style.display = 'none';
-        console.error('Error:', error);
-        alert('There was an error communicating with the server. Please try again.');
-    });
-}
+// function generateQueries(event) {
+//     event.preventDefault();
+    
+//     const userInput = document.getElementById('userInput').value.trim();
+//     if (!userInput) {
+//         alert('Please enter a technical problem description');
+//         return;
+//     }
+    
+//     // Show loading indicator
+//     document.getElementById('loadingIndicator').style.display = 'block';
+    
+//     // Send message to Flask backend
+//     fetch('/generate-key-issues', {
+//         method: 'POST',
+//         body: JSON.stringify({ 'query': userInput }),
+//         headers: { 'Content-Type': 'application/json' }
+//     })
+//     .then(response => response.json())
+//     .then(data => {
+//         // Hide loading indicator
+//         document.getElementById('loadingIndicator').style.display = 'none';
+        
+//         // Check if we have key issues in the response
+//         if (data.key_issues && data.key_issues.length > 0) {
+//             // Display the key issues
+//             displayKeyIssues(data.key_issues);
+//         } else if (data.error) {
+//             alert('Error: ' + data.error);
+//         } else {
+//             alert('No key issues found. Please try a different query.');
+//         }
+//     })
+//     .catch(error => {
+//         document.getElementById('loadingIndicator').style.display = 'none';
+//         console.error('Error:', error);
+//         alert('There was an error communicating with the server. Please try again.');
+//     });
+// }
 
 function displayKeyIssues(keyIssues) {
     // Get or create the key issues container
@@ -2544,24 +2544,74 @@ document.addEventListener('DOMContentLoaded', () => {
             issueCard.className = 'key-issue-card';
             issueCard.dataset.issueId = issue.id;
             
-            // Format the content with title, description, challenges and impact
+            // Build the complete HTML structure
             let cardContent = `
                 <div class="key-issue-title">${issue.title}</div>
                 <div class="key-issue-description">${issue.description}</div>
-                <ul class="key-issue-challenges">
+                <div style="font-weight: bold; margin-top: 10px;">Challenges:</div>
+                <div class="key-issue-challenges"></div>
+                <div class="key-issue-impact">Impact: ${issue.potential_impact}</div>
             `;
             
-            // Add each challenge as a list item
+            issueCard.innerHTML = cardContent;
+            
+            // Get the challenges list container that was just created
+            const challengesList = issueCard.querySelector('.key-issue-challenges');
+            
             issue.challenges.forEach(challenge => {
-                cardContent += `<li>${challenge}</li>`;
+                const challengeTag = document.createElement('div');
+                challengeTag.className = 'challenge-tag';
+                challengeTag.textContent = challenge;
+                
+                // Add click handler to toggle selection
+                challengeTag.addEventListener('click', function(e) {
+                    e.stopPropagation(); // Prevent triggering parent card click
+                    this.classList.toggle('selected');
+                    
+                    // Update selected challenges data
+                    const selectedChallenges = JSON.parse(issueCard.dataset.selectedChallenges || '[]');
+                    const challengeText = this.textContent;
+                    
+                    if (this.classList.contains('selected')) {
+                        // Add challenge to selected list if not already there
+                        if (!selectedChallenges.includes(challengeText)) {
+                            selectedChallenges.push(challengeText);
+                        }
+                    } else {
+                        // Remove challenge from selected list
+                        const index = selectedChallenges.indexOf(challengeText);
+                        if (index !== -1) {
+                            selectedChallenges.splice(index, 1);
+                        }
+                    }
+                    
+                    // Update dataset
+                    issueCard.dataset.selectedChallenges = JSON.stringify(selectedChallenges);
+                    
+                    // Update card selected state based on whether any challenges are selected
+                    if (selectedChallenges.length > 0) {
+                        issueCard.classList.add('selected');
+                        
+                        // Add to selected key issues if not already there
+                        if (!selectedKeyIssues.some(item => item.id === issue.id)) {
+                            selectedKeyIssues.push(issue);
+                        }
+                    } else {
+                        issueCard.classList.remove('selected');
+                        
+                        // Remove from selected key issues
+                        selectedKeyIssues = selectedKeyIssues.filter(item => item.id !== issue.id);
+                    }
+                    
+                    // Update the comment area based on selections
+                    updateCommentArea();
+                });
+                
+                challengesList.appendChild(challengeTag);
             });
             
-            cardContent += `
-                </ul>
-                <div class="key-issue-impact">Impact: ${issue.potential_impact}</div>
-            `;
-            
-            issueCard.innerHTML = cardContent;
+            // The challenges list and impact are already in the HTML structure
+            // We just need to populate the challenges list with individual challenge tags
             
             // Add click handler to toggle selection
             issueCard.addEventListener('click', () => {