From e75e814567b7d9f5180badd0c84864ada9894662 Mon Sep 17 00:00:00 2001
From: Claude <claude@anthropic.com>
Date: Fri, 25 Jul 2025 15:30:30 +0530
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Improve=20social=20ads=20generator?=
 =?UTF-8?q?=20user=20experience?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

UX IMPROVEMENTS:
- Reduce excessive toast notifications - only show for critical actions
- Add smooth auto-scroll when processing starts (scrolls to processing section)
- Add smooth auto-scroll when results appear (scrolls to results section)
- Disable submit button during processing with loading state (⏳ Generating...)
- Remove unnecessary toasts for download (file download is confirmation enough)
- Remove toast for form reset (visual feedback is sufficient)
- Simplify copy notification text
- Add scroll to form when reset button is clicked

BEHAVIOR CHANGES:
- Toast notifications now only appear for:
  - Form validation errors (important)
  - Processing completion success/failure (important)
  - Copy to clipboard success/failure (user needs feedback)
- Auto-scroll provides visual feedback for processing flow
- Button states clearly indicate processing status
- Smoother overall user interaction flow

These changes create a more polished, less noisy user experience while maintaining
important feedback for critical actions.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../social_ads_generator/detail.html          | 52 +++++++++++++++----
 1 file changed, 43 insertions(+), 9 deletions(-)

diff --git a/social_ads_generator/templates/social_ads_generator/detail.html b/social_ads_generator/templates/social_ads_generator/detail.html
index 3d13ca4..70561de 100644
--- a/social_ads_generator/templates/social_ads_generator/detail.html
+++ b/social_ads_generator/templates/social_ads_generator/detail.html
@@ -88,16 +88,29 @@ const SocialAdsUtils = {
         const processingStatus = document.getElementById('processingStatus');
         const resultsContainer = document.getElementById('resultsContainer');
         
-        if (processingStatus) processingStatus.style.display = 'block';
+        if (processingStatus) {
+            processingStatus.style.display = 'block';
+            
+            // Smooth scroll to processing section
+            processingStatus.scrollIntoView({ 
+                behavior: 'smooth', 
+                block: 'center' 
+            });
+        }
         if (resultsContainer) resultsContainer.style.display = 'none';
-        
-        this.showToast('🚀 Creating your social ads...', 'success');
     },
     
     // Hide processing status
     hideProcessing() {
         const processingStatus = document.getElementById('processingStatus');
         if (processingStatus) processingStatus.style.display = 'none';
+        
+        // Re-enable submit button
+        const submitBtn = document.getElementById('generateBtn');
+        if (submitBtn) {
+            submitBtn.disabled = false;
+            submitBtn.textContent = '📢 Generate Social Ads (4.00 AED)';
+        }
     },
     
     // Display social ads results
@@ -120,9 +133,17 @@ const SocialAdsUtils = {
                 this.renderSecureContent(resultsContent, adContent);
             }
             
-            // Show results container
+            // Show results container and scroll to it
             if (resultsContainer) {
                 resultsContainer.style.display = 'block';
+                
+                // Smooth scroll to results after a brief delay for rendering
+                setTimeout(() => {
+                    resultsContainer.scrollIntoView({ 
+                        behavior: 'smooth', 
+                        block: 'start' 
+                    });
+                }, 300);
             }
             
             // Update wallet balance if provided
@@ -130,6 +151,7 @@ const SocialAdsUtils = {
                 this.updateWalletBalance(result.wallet_balance);
             }
             
+            // Show success notification only for final result
             this.showToast('✅ Social ads created successfully!', 'success');
         } else if (result.error) {
             this.hideProcessing();
@@ -329,9 +351,9 @@ function copyResults() {
     if (content) {
         const text = content.textContent || '';
         navigator.clipboard.writeText(text).then(() => {
-            SocialAdsUtils.showToast('📋 Social ads copied to clipboard!', 'success');
+            SocialAdsUtils.showToast('📋 Copied to clipboard!', 'success');
         }).catch(() => {
-            SocialAdsUtils.showToast('❌ Failed to copy to clipboard', 'error');
+            SocialAdsUtils.showToast('❌ Copy failed', 'error');
         });
     }
 }
@@ -348,7 +370,7 @@ function downloadResults() {
         a.download = 'social-ads-results.txt';
         a.click();
         URL.revokeObjectURL(url);
-        SocialAdsUtils.showToast('💾 Social ads downloaded!', 'success');
+        // No toast for download - file download is confirmation enough
     }
 }
 
@@ -369,7 +391,13 @@ function resetForm() {
     const fields = ['description', 'social_platform', 'include_emoji'];
     fields.forEach(fieldName => clearFieldError(fieldName));
     
-    SocialAdsUtils.showToast('🔄 Form reset - ready for new social ads', 'success');
+    // Scroll back to form
+    const form_section = document.getElementById('agentForm');
+    if (form_section) {
+        form_section.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+    
+    // No toast for reset - visual feedback is enough
 }
 
 // Quick Agent Access Functions
@@ -444,9 +472,15 @@ function handleFormSubmission(e) {
         return;
     }
     
-    // Show processing status
+    // Show processing status and disable submit button
     SocialAdsUtils.showProcessing();
     
+    const submitBtn = document.getElementById('generateBtn');
+    if (submitBtn) {
+        submitBtn.disabled = true;
+        submitBtn.textContent = '⏳ Generating...';
+    }
+    
     // Submit form with AJAX
     const formData = new FormData(e.target);