Make live API requests

Author: tomups

index.html

@@ -116,10 +116,15 @@ <h2 class="section-title">Your repo, your rules</h2>
                 </div>
 
                 <div id="errorAlert" class="error-alert hidden">
-                    <svg class="error-icon" viewBox="0 0 24 24">
-                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" fill="#F44336"/>
-                    </svg>
-                    <span id="errorMessage">Something went wrong. Please try again.</span>
+                    <div class="error-header">
+                        <svg class="error-icon" viewBox="0 0 24 24">
+                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" fill="#F44336"/>
+                        </svg>
+                        <span class="error-title">Rule not supported</span>
+                    </div>
+                    <div class="error-content">
+                        <p id="errorMessage">Something went wrong. Please try again.</p>
+                    </div>
                 </div>
             </div>
         </div>

script.js

@@ -16,7 +16,7 @@ let isLoading = false;
 let currentRule = '';
 
 // API Configuration
-const API_ENDPOINT = 'https://api.example.com/generate-rule';
+const API_ENDPOINT = 'https://api.watchflow.dev/api/v1/rules/evaluate';
 
 // Initialize the application
 document.addEventListener('DOMContentLoaded', function() {
@@ -89,102 +89,53 @@ async function handleAnalyzeClick() {
 
 // Generate rule via API
 async function generateRule(description) {
-    try {
-        const response = await fetch(API_ENDPOINT, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({ description }),
-        });
-        
-        if (!response.ok) {
-            throw new Error(`HTTP error! status: ${response.status}`);
-        }
-        
-        const data = await response.json();
-        
-        if (!data.rule) {
-            throw new Error('Invalid response format');
-        }
-        
-        return data.rule;
-        
-    } catch (error) {
-        // For demo purposes, return a mock rule if API fails
-        if (error.message.includes('fetch')) {
-            return generateMockRule(description);
+    const response = await fetch(API_ENDPOINT, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'Accept': 'application/json',
+        },
+        body: JSON.stringify({ 
+            rule_text: description,
+            event_data: null
+        }),
+    });
+    
+    if (!response.ok) {
+        // Handle validation errors or other API errors
+        if (response.status === 422) {
+            const errorData = await response.json();
+            throw new Error(`Validation error: ${errorData.detail || 'Invalid rule description format'}`);
         }
-        throw error;
+        throw new Error(`API error: ${response.status} ${response.statusText}`);
     }
-}
-
-// Generate mock rule for demonstration
-function generateMockRule(description) {
-    const mockRules = {
-        'pr title': `name: PR Title Format
-description: ${description}
-on:
-  pull_request:
-    types: [opened, edited, synchronize]
-rules:
-  - name: Check PR title format
-    condition: |
-      pull_request.title matches /^[A-Z]+-\\d+: .+$/
-    message: "PR title must follow the pattern PROJ-123: Description"
-    severity: error`,
-        
-        'commit': `name: Commit Message Format
-description: ${description}
-on:
-  push:
-    branches: [main, develop]
-rules:
-  - name: Check commit message format
-    condition: |
-      commit.message matches /^(feat|fix|docs|style|refactor|test|chore): .+$/
-    message: "Commit messages must follow conventional commits format"
-    severity: error`,
-        
-        'approval': `name: Approval Requirements
-description: ${description}
-on:
-  pull_request:
-    types: [opened, review_requested]
-rules:
-  - name: Check approval requirements
-    condition: |
-      pull_request.author not in pull_request.reviewers
-    message: "Pull requests cannot be approved by the author"
-    severity: error`,
-        
-        'default': `name: Custom Rule
-description: ${description}
-on:
-  pull_request:
-    types: [opened, edited, synchronize]
-rules:
-  - name: Custom validation
-    condition: |
-      # Add your custom validation logic here
-      true
-    message: "Custom validation message"
-    severity: warning`
-    };
 
-    const lowerDescription = description.toLowerCase();
+    const data = await response.json();
+    
+    if (!data) {
+        throw new Error('Empty response from API');
+    }
+    
+    // Check if the rule is supported
+    if (!data.supported) {
+        const reason = data.feedback || 'This type of rule is not supported by Watchflow';
+        throw new Error(reason);
+    }
 
-    if (lowerDescription.includes('title') || lowerDescription.includes('pr')) {
-        return mockRules['pr title'];
-    } else if (lowerDescription.includes('commit')) {
-        return mockRules['commit'];
-    } else if (lowerDescription.includes('approval') || lowerDescription.includes('review')) {
-        return mockRules['approval'];
-    } else {
-        return mockRules['default'];
+    // Extract the YAML snippet from the response
+    if (data.snippet) {
+        // Remove the markdown code block wrapper if present
+        let yaml = data.snippet;
+        if (yaml.startsWith('```yaml\n')) {
+            yaml = yaml.replace(/^```yaml\n/, '').replace(/\n```$/, '');
+        }
+        return yaml;
     }
+    
+    throw new Error('No rule snippet found in API response');
 }
 
+
 // Handle download button click
 function handleDownloadClick() {
     if (!currentRule) return;

style.css

@@ -450,13 +450,10 @@ body::after {
 }
 
 .error-alert {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
     background: #FFEBEE;
     border: 3px solid var(--error-color);
     border-radius: 12px;
-    padding: 1rem;
+    padding: 1.5rem;
     margin-top: 1rem;
     box-shadow: 4px 4px 0 var(--shadow-color);
     opacity: 0;
@@ -468,6 +465,27 @@ body::after {
     display: none;
 }
 
+.error-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+}
+
+.error-title {
+    font-weight: 700;
+    font-size: 1.1rem;
+    color: var(--error-color);
+}
+
+.error-content {
+    color: var(--text-secondary);
+    line-height: 1.5;
+}
+
+.error-content p {
+    margin: 0;
+}
 
 .error-icon {
     width: 24px;