quantum-ai-v2/templates/components/how_it_works_widget.html
Claude b072e2e1ee Fix Weather Reporter connection errors and restore API-based pattern
Major fixes:
- Weather Reporter: Restore correct API-based processing pattern
  * Fix form submission URL to use /agents/weather-reporter/process/
  * Remove incorrect polling logic (API agents return immediate results)
  * Fix response field mapping to use formatted_report instead of analysis_text
  * Implement immediate response display without polling

- Agent CSS System: Enhance unified styling system
  * Add missing CSS classes for status display (.status-title, .status-subtitle)
  * Add enhanced typography for results content formatting
  * Include modern info boxes (.key-points, .insights, .summary)
  * Fix animation keyframes for proper loading states

- Template Consistency: Update agents to use shared components
  * Job Posting Generator: Add cache-busted CSS and shared header/panel
  * Social Ads Generator: Add unified CSS link and shared components
  * Create component templates for consistent agent layouts

Key architectural insight: Weather Reporter is API-based (immediate response)
while Data Analyzer is webhook-based (async polling). Fixed Weather Reporter
to use correct pattern based on git history commit 82fc051.

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-07-20 09:13:48 +05:30

59 lines
2.4 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<div class="agent-widget widget-small" style="min-width: min(280px, 100%); max-width: min(280px, 100%); margin-left: auto;">
<div class="widget-header">
<h3 class="widget-title">
<span class="widget-icon"></span>
How It Works
</h3>
</div>
<div class="widget-content">
{% if steps == "data" %}
<ol class="info-list">
<li>Upload your data file</li>
<li>Choose analysis type</li>
<li>Get AI-powered insights</li>
<li>Copy or download results</li>
</ol>
{% elif steps == "weather" %}
<ol class="info-list">
<li>Enter any city name worldwide</li>
<li>Choose your preferred report type</li>
<li>Get real-time weather data</li>
<li>Copy or download detailed reports</li>
</ol>
{% elif steps == "social_ads" %}
<ol class="info-list">
<li>Choose your platform and language</li>
<li>Describe your content and audience</li>
<li>Get AI-generated social ads</li>
<li>Copy or download your campaigns</li>
</ol>
{% elif steps == "job_posting" %}
<ol class="info-list">
<li>Enter job title and company details</li>
<li>Describe role and requirements</li>
<li>Get professional job posting</li>
<li>Copy or download the posting</li>
</ol>
{% elif steps == "five_whys" %}
<ol class="info-list">
<li>Describe your problem clearly</li>
<li>Choose analysis language</li>
<li>Get Five Whys analysis</li>
<li>Copy or download the results</li>
</ol>
{% else %}
<ol class="info-list">
<li>Fill in the required information</li>
<li>Choose your preferences</li>
<li>Get AI-powered results</li>
<li>Copy or download output</li>
</ol>
{% endif %}
<button class="quick-agent-toggle btn btn-secondary btn-full" onclick="toggleQuickAgents()"
title="Quick access to other agents">
<span class="toggle-icon">🚀</span>
<span class="toggle-text">Explore Other Agents</span>
</button>
</div>
</div>