Research Wizard and CopilotKit mitigation review
This commit is contained in:
ajaysi
@@ -13,6 +13,7 @@ from functools import lru_cache
|
||||
from services.database import get_db
|
||||
from services.subscription import UsageTrackingService, PricingService
|
||||
from services.subscription.schema_utils import ensure_subscription_plan_columns
|
||||
import sqlite3
|
||||
from middleware.auth_middleware import get_current_user
|
||||
from models.subscription_models import (
|
||||
APIProvider, SubscriptionPlan, UserSubscription, UsageSummary,
|
||||
@@ -80,8 +81,11 @@ async def get_subscription_plans(
|
||||
"""Get all available subscription plans."""
|
||||
|
||||
try:
|
||||
# Ensure required columns exist (handles environments without migrations applied yet)
|
||||
ensure_subscription_plan_columns(db)
|
||||
except Exception as schema_err:
|
||||
logger.warning(f"Schema check failed, will retry on query: {schema_err}")
|
||||
|
||||
try:
|
||||
plans = db.query(SubscriptionPlan).filter(
|
||||
SubscriptionPlan.is_active == True
|
||||
).order_by(SubscriptionPlan.price_monthly).all()
|
||||
@@ -123,7 +127,60 @@ async def get_subscription_plans(
|
||||
}
|
||||
}
|
||||
|
||||
except Exception as e:
|
||||
except (sqlite3.OperationalError, Exception) as e:
|
||||
error_str = str(e).lower()
|
||||
if 'no such column' in error_str and 'exa_calls_limit' in error_str:
|
||||
logger.warning("Missing column detected in subscription plans query, attempting schema fix...")
|
||||
try:
|
||||
import services.subscription.schema_utils as schema_utils
|
||||
schema_utils._checked_subscription_plan_columns = False
|
||||
ensure_subscription_plan_columns(db)
|
||||
db.expire_all()
|
||||
# Retry the query
|
||||
plans = db.query(SubscriptionPlan).filter(
|
||||
SubscriptionPlan.is_active == True
|
||||
).order_by(SubscriptionPlan.price_monthly).all()
|
||||
|
||||
plans_data = []
|
||||
for plan in plans:
|
||||
plans_data.append({
|
||||
"id": plan.id,
|
||||
"name": plan.name,
|
||||
"tier": plan.tier.value,
|
||||
"price_monthly": plan.price_monthly,
|
||||
"price_yearly": plan.price_yearly,
|
||||
"description": plan.description,
|
||||
"features": plan.features or [],
|
||||
"limits": {
|
||||
"ai_text_generation_calls": getattr(plan, 'ai_text_generation_calls_limit', None) or 0,
|
||||
"gemini_calls": plan.gemini_calls_limit,
|
||||
"openai_calls": plan.openai_calls_limit,
|
||||
"anthropic_calls": plan.anthropic_calls_limit,
|
||||
"mistral_calls": plan.mistral_calls_limit,
|
||||
"tavily_calls": plan.tavily_calls_limit,
|
||||
"serper_calls": plan.serper_calls_limit,
|
||||
"metaphor_calls": plan.metaphor_calls_limit,
|
||||
"firecrawl_calls": plan.firecrawl_calls_limit,
|
||||
"stability_calls": plan.stability_calls_limit,
|
||||
"gemini_tokens": plan.gemini_tokens_limit,
|
||||
"openai_tokens": plan.openai_tokens_limit,
|
||||
"anthropic_tokens": plan.anthropic_tokens_limit,
|
||||
"mistral_tokens": plan.mistral_tokens_limit,
|
||||
"monthly_cost": plan.monthly_cost_limit
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
"success": True,
|
||||
"data": {
|
||||
"plans": plans_data,
|
||||
"total": len(plans_data)
|
||||
}
|
||||
}
|
||||
except Exception as retry_err:
|
||||
logger.error(f"Schema fix and retry failed: {retry_err}")
|
||||
raise HTTPException(status_code=500, detail=f"Database schema error: {str(e)}")
|
||||
|
||||
logger.error(f"Error getting subscription plans: {e}")
|
||||
raise HTTPException(status_code=500, detail=str(e))
|
||||
|
||||
@@ -239,6 +296,10 @@ async def get_subscription_status(
|
||||
|
||||
try:
|
||||
ensure_subscription_plan_columns(db)
|
||||
except Exception as schema_err:
|
||||
logger.warning(f"Schema check failed, will retry on query: {schema_err}")
|
||||
|
||||
try:
|
||||
subscription = db.query(UserSubscription).filter(
|
||||
UserSubscription.user_id == user_id,
|
||||
UserSubscription.is_active == True
|
||||
@@ -333,7 +394,97 @@ async def get_subscription_status(
|
||||
}
|
||||
}
|
||||
|
||||
except Exception as e:
|
||||
except (sqlite3.OperationalError, Exception) as e:
|
||||
error_str = str(e).lower()
|
||||
if 'no such column' in error_str and 'exa_calls_limit' in error_str:
|
||||
# Try to fix schema and retry once
|
||||
logger.warning("Missing column detected in subscription status query, attempting schema fix...")
|
||||
try:
|
||||
import services.subscription.schema_utils as schema_utils
|
||||
schema_utils._checked_subscription_plan_columns = False
|
||||
ensure_subscription_plan_columns(db)
|
||||
db.expire_all()
|
||||
# Retry the query
|
||||
subscription = db.query(UserSubscription).filter(
|
||||
UserSubscription.user_id == user_id,
|
||||
UserSubscription.is_active == True
|
||||
).first()
|
||||
|
||||
if not subscription:
|
||||
free_plan = db.query(SubscriptionPlan).filter(
|
||||
SubscriptionPlan.tier == SubscriptionTier.FREE,
|
||||
SubscriptionPlan.is_active == True
|
||||
).first()
|
||||
if free_plan:
|
||||
return {
|
||||
"success": True,
|
||||
"data": {
|
||||
"active": True,
|
||||
"plan": "free",
|
||||
"tier": "free",
|
||||
"can_use_api": True,
|
||||
"limits": {
|
||||
"ai_text_generation_calls": getattr(free_plan, 'ai_text_generation_calls_limit', None) or 0,
|
||||
"gemini_calls": free_plan.gemini_calls_limit,
|
||||
"openai_calls": free_plan.openai_calls_limit,
|
||||
"anthropic_calls": free_plan.anthropic_calls_limit,
|
||||
"mistral_calls": free_plan.mistral_calls_limit,
|
||||
"tavily_calls": free_plan.tavily_calls_limit,
|
||||
"serper_calls": free_plan.serper_calls_limit,
|
||||
"metaphor_calls": free_plan.metaphor_calls_limit,
|
||||
"firecrawl_calls": free_plan.firecrawl_calls_limit,
|
||||
"stability_calls": free_plan.stability_calls_limit,
|
||||
"monthly_cost": free_plan.monthly_cost_limit
|
||||
}
|
||||
}
|
||||
}
|
||||
elif subscription:
|
||||
now = datetime.utcnow()
|
||||
if subscription.current_period_end < now:
|
||||
if getattr(subscription, 'auto_renew', False):
|
||||
try:
|
||||
from services.pricing_service import PricingService
|
||||
pricing = PricingService(db)
|
||||
pricing._ensure_subscription_current(subscription)
|
||||
except Exception as e2:
|
||||
logger.error(f"Failed to auto-advance subscription: {e2}")
|
||||
else:
|
||||
return {
|
||||
"success": True,
|
||||
"data": {
|
||||
"active": False,
|
||||
"plan": subscription.plan.tier.value,
|
||||
"tier": subscription.plan.tier.value,
|
||||
"can_use_api": False,
|
||||
"reason": "Subscription expired"
|
||||
}
|
||||
}
|
||||
return {
|
||||
"success": True,
|
||||
"data": {
|
||||
"active": True,
|
||||
"plan": subscription.plan.tier.value,
|
||||
"tier": subscription.plan.tier.value,
|
||||
"can_use_api": True,
|
||||
"limits": {
|
||||
"ai_text_generation_calls": getattr(subscription.plan, 'ai_text_generation_calls_limit', None) or 0,
|
||||
"gemini_calls": subscription.plan.gemini_calls_limit,
|
||||
"openai_calls": subscription.plan.openai_calls_limit,
|
||||
"anthropic_calls": subscription.plan.anthropic_calls_limit,
|
||||
"mistral_calls": subscription.plan.mistral_calls_limit,
|
||||
"tavily_calls": subscription.plan.tavily_calls_limit,
|
||||
"serper_calls": subscription.plan.serper_calls_limit,
|
||||
"metaphor_calls": subscription.plan.metaphor_calls_limit,
|
||||
"firecrawl_calls": subscription.plan.firecrawl_calls_limit,
|
||||
"stability_calls": subscription.plan.stability_calls_limit,
|
||||
"monthly_cost": subscription.plan.monthly_cost_limit
|
||||
}
|
||||
}
|
||||
}
|
||||
except Exception as retry_err:
|
||||
logger.error(f"Schema fix and retry failed: {retry_err}")
|
||||
raise HTTPException(status_code=500, detail=f"Database schema error: {str(e)}")
|
||||
|
||||
logger.error(f"Error getting subscription status: {e}")
|
||||
raise HTTPException(status_code=500, detail=str(e))
|
||||
|
||||
|
||||
@@ -94,6 +94,12 @@ class ResearchConfig(BaseModel):
|
||||
include_expert_quotes: bool = True
|
||||
include_competitors: bool = True
|
||||
include_trends: bool = True
|
||||
|
||||
# Exa-specific options
|
||||
exa_category: Optional[str] = None # company, research paper, news, linkedin profile, github, tweet, movie, song, personal site, pdf, financial report
|
||||
exa_include_domains: List[str] = [] # Domain whitelist
|
||||
exa_exclude_domains: List[str] = [] # Domain blacklist
|
||||
exa_search_type: Optional[str] = "auto" # "auto", "keyword", "neural"
|
||||
|
||||
|
||||
class BlogResearchRequest(BaseModel):
|
||||
|
||||
@@ -26,18 +26,14 @@ class ExaResearchProvider(BaseProvider):
|
||||
# Build Exa query
|
||||
query = f"{topic} {industry} {target_audience}"
|
||||
|
||||
# Map source types to Exa categories
|
||||
category = self._map_source_type_to_category(config.source_types)
|
||||
# Determine category: use exa_category if set, otherwise map from source_types
|
||||
category = config.exa_category if config.exa_category else self._map_source_type_to_category(config.source_types)
|
||||
|
||||
logger.info(f"[Exa Research] Executing search: {query}")
|
||||
|
||||
# Execute Exa search
|
||||
results = self.exa.search_and_contents(
|
||||
query,
|
||||
type="auto",
|
||||
category=category,
|
||||
num_results=min(config.max_sources, 25),
|
||||
contents={
|
||||
# Build search kwargs
|
||||
search_kwargs = {
|
||||
'type': config.exa_search_type or "auto",
|
||||
'num_results': min(config.max_sources, 25),
|
||||
'contents': {
|
||||
'text': {'max_characters': 1000},
|
||||
'summary': {'query': f"Key insights about {topic}"},
|
||||
'highlights': {
|
||||
@@ -45,7 +41,20 @@ class ExaResearchProvider(BaseProvider):
|
||||
'highlights_per_url': 3
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
# Add optional filters
|
||||
if category:
|
||||
search_kwargs['category'] = category
|
||||
if config.exa_include_domains:
|
||||
search_kwargs['include_domains'] = config.exa_include_domains
|
||||
if config.exa_exclude_domains:
|
||||
search_kwargs['exclude_domains'] = config.exa_exclude_domains
|
||||
|
||||
logger.info(f"[Exa Research] Executing search: {query}")
|
||||
|
||||
# Execute Exa search
|
||||
results = self.exa.search_and_contents(query, **search_kwargs)
|
||||
|
||||
# Transform to standardized format
|
||||
sources = self._transform_sources(results.results)
|
||||
|
||||
@@ -340,12 +340,8 @@ def create_blog_post(
|
||||
logger.warning("All tag IDs were invalid, not including tagIds in payload")
|
||||
|
||||
# Build SEO data from metadata if provided
|
||||
# TESTING: Skip SEO data temporarily to confirm richContent fix
|
||||
test_skip_seo = True
|
||||
if test_skip_seo:
|
||||
logger.warning("🧪 TESTING: Skipping SEO data to isolate richContent vs seoData issue")
|
||||
seo_data = None
|
||||
elif seo_metadata:
|
||||
seo_data = None
|
||||
if seo_metadata:
|
||||
logger.warning(f"📊 Building SEO data from metadata. Keys: {list(seo_metadata.keys())}")
|
||||
seo_data = build_seo_data(seo_metadata, title)
|
||||
if seo_data:
|
||||
@@ -371,13 +367,10 @@ def create_blog_post(
|
||||
logger.warning("⚠️ SEO data was empty after building - check build_seo_data function")
|
||||
|
||||
# Add SEO slug if provided (separate field from seoData)
|
||||
if seo_metadata and seo_metadata.get('url_slug'):
|
||||
if seo_metadata.get('url_slug'):
|
||||
blog_data['draftPost']['seoSlug'] = str(seo_metadata.get('url_slug')).strip()
|
||||
logger.warning(f"✅ Added SEO slug: {blog_data['draftPost']['seoSlug']}")
|
||||
|
||||
if test_skip_seo:
|
||||
logger.warning("⚠️ SEO data skipped for testing - will add back once richContent is confirmed working")
|
||||
elif not seo_metadata:
|
||||
else:
|
||||
logger.warning("⚠️ No SEO metadata provided to create_blog_post")
|
||||
|
||||
# Log the payload structure for debugging (without sensitive data)
|
||||
|
||||
@@ -390,17 +390,44 @@ class LimitValidator:
|
||||
|
||||
logger.info(f"[Pre-flight Check] 📅 Billing Period: {current_period} (for user {user_id})")
|
||||
|
||||
# Ensure schema columns exist before querying
|
||||
try:
|
||||
from services.subscription.schema_utils import ensure_usage_summaries_columns
|
||||
ensure_usage_summaries_columns(self.db)
|
||||
except Exception as schema_err:
|
||||
logger.warning(f"Schema check failed, will retry on query error: {schema_err}")
|
||||
|
||||
# Explicitly expire any cached objects and refresh from DB to ensure fresh data
|
||||
self.db.expire_all()
|
||||
|
||||
usage = self.db.query(UsageSummary).filter(
|
||||
UsageSummary.user_id == user_id,
|
||||
UsageSummary.billing_period == current_period
|
||||
).first()
|
||||
try:
|
||||
usage = self.db.query(UsageSummary).filter(
|
||||
UsageSummary.user_id == user_id,
|
||||
UsageSummary.billing_period == current_period
|
||||
).first()
|
||||
|
||||
# CRITICAL: Explicitly refresh from database to get latest values (clears SQLAlchemy cache)
|
||||
if usage:
|
||||
self.db.refresh(usage)
|
||||
# CRITICAL: Explicitly refresh from database to get latest values (clears SQLAlchemy cache)
|
||||
if usage:
|
||||
self.db.refresh(usage)
|
||||
except Exception as query_err:
|
||||
error_str = str(query_err).lower()
|
||||
if 'no such column' in error_str and 'exa_calls' in error_str:
|
||||
logger.warning("Missing column detected in usage query, fixing schema and retrying...")
|
||||
import sqlite3
|
||||
import services.subscription.schema_utils as schema_utils
|
||||
schema_utils._checked_usage_summaries_columns = False
|
||||
from services.subscription.schema_utils import ensure_usage_summaries_columns
|
||||
ensure_usage_summaries_columns(self.db)
|
||||
self.db.expire_all()
|
||||
# Retry the query
|
||||
usage = self.db.query(UsageSummary).filter(
|
||||
UsageSummary.user_id == user_id,
|
||||
UsageSummary.billing_period == current_period
|
||||
).first()
|
||||
if usage:
|
||||
self.db.refresh(usage)
|
||||
else:
|
||||
raise
|
||||
|
||||
# Log what we actually read from database
|
||||
if usage:
|
||||
@@ -718,8 +745,40 @@ class LimitValidator:
|
||||
|
||||
except Exception as e:
|
||||
error_type = type(e).__name__
|
||||
error_message = str(e)
|
||||
logger.error(f"[Pre-flight Check] ❌ Error during comprehensive limit check: {error_type}: {error_message}", exc_info=True)
|
||||
error_message = str(e).lower()
|
||||
|
||||
# Handle missing column errors with schema fix and retry
|
||||
if 'operationalerror' in error_type.lower() or 'operationalerror' in error_message:
|
||||
if 'no such column' in error_message and 'exa_calls' in error_message:
|
||||
logger.warning("Missing column detected in limit check, attempting schema fix...")
|
||||
try:
|
||||
import sqlite3
|
||||
import services.subscription.schema_utils as schema_utils
|
||||
schema_utils._checked_usage_summaries_columns = False
|
||||
from services.subscription.schema_utils import ensure_usage_summaries_columns
|
||||
ensure_usage_summaries_columns(self.db)
|
||||
self.db.expire_all()
|
||||
|
||||
# Retry the query
|
||||
usage = self.db.query(UsageSummary).filter(
|
||||
UsageSummary.user_id == user_id,
|
||||
UsageSummary.billing_period == current_period
|
||||
).first()
|
||||
|
||||
if usage:
|
||||
self.db.refresh(usage)
|
||||
|
||||
# Continue with the rest of the validation using the retried usage
|
||||
# (The rest of the function logic continues from here)
|
||||
# For now, we'll let it fall through to return the error since we'd need to duplicate the entire validation logic
|
||||
# Instead, we'll just log and return, but the next call should succeed
|
||||
logger.info(f"[Pre-flight Check] Schema fixed, but need to retry validation on next call")
|
||||
return False, f"Schema updated, please retry: Database schema was updated. Please try again.", {'error_type': 'schema_update', 'retry': True}
|
||||
except Exception as retry_err:
|
||||
logger.error(f"Schema fix and retry failed: {retry_err}")
|
||||
return False, f"Failed to validate limits: {error_type}: {str(e)}", {}
|
||||
|
||||
logger.error(f"[Pre-flight Check] ❌ Error during comprehensive limit check: {error_type}: {str(e)}", exc_info=True)
|
||||
logger.error(f"[Pre-flight Check] ❌ User: {user_id}, Operations count: {len(operations) if operations else 0}")
|
||||
return False, f"Failed to validate limits: {error_type}: {error_message}", {}
|
||||
return False, f"Failed to validate limits: {error_type}: {str(e)}", {}
|
||||
|
||||
|
||||
@@ -1,8 +1,11 @@
|
||||
from typing import Set
|
||||
from sqlalchemy.orm import Session
|
||||
from sqlalchemy import text
|
||||
from loguru import logger
|
||||
|
||||
|
||||
_checked_subscription_plan_columns: bool = False
|
||||
_checked_usage_summaries_columns: bool = False
|
||||
|
||||
|
||||
def ensure_subscription_plan_columns(db: Session) -> None:
|
||||
@@ -17,9 +20,11 @@ def ensure_subscription_plan_columns(db: Session) -> None:
|
||||
return
|
||||
|
||||
try:
|
||||
# Discover existing columns
|
||||
result = db.execute("PRAGMA table_info(subscription_plans)")
|
||||
# Discover existing columns using PRAGMA
|
||||
result = db.execute(text("PRAGMA table_info(subscription_plans)"))
|
||||
cols: Set[str] = {row[1] for row in result}
|
||||
|
||||
logger.debug(f"Schema check: Found {len(cols)} columns in subscription_plans table")
|
||||
|
||||
# Columns we may reference in models but might be missing in older DBs
|
||||
required_columns = {
|
||||
@@ -28,12 +33,81 @@ def ensure_subscription_plan_columns(db: Session) -> None:
|
||||
|
||||
for col_name, ddl in required_columns.items():
|
||||
if col_name not in cols:
|
||||
db.execute(f"ALTER TABLE subscription_plans ADD COLUMN {col_name} {ddl}")
|
||||
db.commit()
|
||||
except Exception:
|
||||
# Do not block app if pragma/alter fails; let normal errors surface
|
||||
db.rollback()
|
||||
finally:
|
||||
logger.info(f"Adding missing column {col_name} to subscription_plans table")
|
||||
try:
|
||||
db.execute(text(f"ALTER TABLE subscription_plans ADD COLUMN {col_name} {ddl}"))
|
||||
db.commit()
|
||||
logger.info(f"Successfully added column {col_name}")
|
||||
except Exception as alter_err:
|
||||
logger.error(f"Failed to add column {col_name}: {alter_err}")
|
||||
db.rollback()
|
||||
# Don't set flag on error - allow retry
|
||||
raise
|
||||
else:
|
||||
logger.debug(f"Column {col_name} already exists")
|
||||
|
||||
# Only set flag if we successfully completed the check
|
||||
_checked_subscription_plan_columns = True
|
||||
except Exception as e:
|
||||
logger.error(f"Error ensuring subscription_plan columns: {e}", exc_info=True)
|
||||
db.rollback()
|
||||
# Don't set the flag if there was an error, so we retry next time
|
||||
_checked_subscription_plan_columns = False
|
||||
raise
|
||||
|
||||
|
||||
def ensure_usage_summaries_columns(db: Session) -> None:
|
||||
"""Ensure required columns exist on usage_summaries for runtime safety.
|
||||
|
||||
This is a defensive guard for environments where migrations have not yet
|
||||
been applied. If columns are missing (e.g., exa_calls, exa_cost), we add them
|
||||
with a safe default so ORM queries do not fail.
|
||||
"""
|
||||
global _checked_usage_summaries_columns
|
||||
if _checked_usage_summaries_columns:
|
||||
return
|
||||
|
||||
try:
|
||||
# Discover existing columns using PRAGMA
|
||||
result = db.execute(text("PRAGMA table_info(usage_summaries)"))
|
||||
cols: Set[str] = {row[1] for row in result}
|
||||
|
||||
logger.debug(f"Schema check: Found {len(cols)} columns in usage_summaries table")
|
||||
|
||||
# Columns we may reference in models but might be missing in older DBs
|
||||
required_columns = {
|
||||
"exa_calls": "INTEGER DEFAULT 0",
|
||||
"exa_cost": "REAL DEFAULT 0.0",
|
||||
}
|
||||
|
||||
for col_name, ddl in required_columns.items():
|
||||
if col_name not in cols:
|
||||
logger.info(f"Adding missing column {col_name} to usage_summaries table")
|
||||
try:
|
||||
db.execute(text(f"ALTER TABLE usage_summaries ADD COLUMN {col_name} {ddl}"))
|
||||
db.commit()
|
||||
logger.info(f"Successfully added column {col_name}")
|
||||
except Exception as alter_err:
|
||||
logger.error(f"Failed to add column {col_name}: {alter_err}")
|
||||
db.rollback()
|
||||
# Don't set flag on error - allow retry
|
||||
raise
|
||||
else:
|
||||
logger.debug(f"Column {col_name} already exists")
|
||||
|
||||
# Only set flag if we successfully completed the check
|
||||
_checked_usage_summaries_columns = True
|
||||
except Exception as e:
|
||||
logger.error(f"Error ensuring usage_summaries columns: {e}", exc_info=True)
|
||||
db.rollback()
|
||||
# Don't set the flag if there was an error, so we retry next time
|
||||
_checked_usage_summaries_columns = False
|
||||
raise
|
||||
|
||||
|
||||
def ensure_all_schema_columns(db: Session) -> None:
|
||||
"""Ensure all required columns exist in subscription-related tables."""
|
||||
ensure_subscription_plan_columns(db)
|
||||
ensure_usage_summaries_columns(db)
|
||||
|
||||
|
||||
|
||||
200
docs/CLICKABLE_PHASE_NAVIGATION_COPILOTKIT_MITIGATION_REVIEW.md
Normal file
200
docs/CLICKABLE_PHASE_NAVIGATION_COPILOTKIT_MITIGATION_REVIEW.md
Normal file
@@ -0,0 +1,200 @@
|
||||
# Clickable Phase Navigation for CopilotKit Mitigation - Implementation Review
|
||||
|
||||
## Overview
|
||||
This document reviews the implementation of clickable phase navigation as a mitigation strategy when CopilotKit chat is unavailable. This feature ensures users can continue working through the blog writing workflow even when the AI chat interface is down or unavailable.
|
||||
|
||||
## Status: ✅ **IMPLEMENTED**
|
||||
|
||||
## Implementation Summary
|
||||
|
||||
### 1. Core Components
|
||||
|
||||
#### ✅ PhaseNavigation Component (`frontend/src/components/BlogWriter/PhaseNavigation.tsx`)
|
||||
- **Purpose**: Displays phase buttons with action buttons when CopilotKit is unavailable
|
||||
- **Features**:
|
||||
- Clickable phase buttons for navigation
|
||||
- Conditional action buttons (▶ Start Research, Create Outline, etc.)
|
||||
- Visual indicators for current, completed, and disabled phases
|
||||
- Action buttons appear only when:
|
||||
1. CopilotKit is unavailable (`!copilotKitAvailable`)
|
||||
2. Action handler exists
|
||||
3. Phase is not disabled
|
||||
4. Phase is current OR next actionable phase
|
||||
|
||||
#### ✅ usePhaseActionHandlers Hook (`frontend/src/components/BlogWriter/BlogWriterUtils/usePhaseActionHandlers.ts`)
|
||||
- **Purpose**: Centralized action handlers for each phase
|
||||
- **Actions Implemented**:
|
||||
- `handleResearchAction`: Navigates to research phase
|
||||
- `handleOutlineAction`:
|
||||
- Checks cache for existing outline
|
||||
- Generates outline if not cached
|
||||
- Navigates to outline phase
|
||||
- `handleContentAction`:
|
||||
- Checks cache for existing content
|
||||
- Confirms outline
|
||||
- Triggers content generation (for blogs ≤1000 words)
|
||||
- Navigates to content phase
|
||||
- `handleSEOAction`:
|
||||
- Marks content as confirmed
|
||||
- Navigates to SEO phase
|
||||
- Runs SEO analysis
|
||||
- `handlePublishAction`:
|
||||
- Navigates to publish phase
|
||||
- Opens SEO metadata modal
|
||||
|
||||
#### ✅ Caching Integration
|
||||
- **Research Cache**: `researchCache` - checks localStorage for existing research results
|
||||
- **Blog Writer Cache**: `blogWriterCache` - caches outline and content
|
||||
- `getCachedOutline()`: Checks for cached outlines by keywords
|
||||
- `getCachedContent()`: Checks for cached content by outline IDs
|
||||
- `contentExistsInState()`: Verifies if content already exists in component state
|
||||
|
||||
### 2. Integration Points
|
||||
|
||||
#### ✅ HeaderBar Component (`frontend/src/components/BlogWriter/BlogWriterUtils/HeaderBar.tsx`)
|
||||
- Integrates `PhaseNavigation` component
|
||||
- Passes all necessary props including:
|
||||
- `copilotKitAvailable` status
|
||||
- `actionHandlers` from `usePhaseActionHandlers`
|
||||
- State flags (`hasResearch`, `hasOutline`, etc.)
|
||||
|
||||
#### ✅ BlogWriter Component (`frontend/src/components/BlogWriter/BlogWriter.tsx`)
|
||||
- Uses `useCopilotKitHealth` to monitor CopilotKit availability
|
||||
- Connects phase action handlers to phase navigation
|
||||
- Manages state flow between phases
|
||||
- Handles cached data restoration
|
||||
|
||||
#### ✅ PhaseContent Component (`frontend/src/components/BlogWriter/BlogWriterUtils/PhaseContent.tsx`)
|
||||
- Conditionally renders CopilotKit-dependent or manual fallback components
|
||||
- Shows `ManualResearchForm`, `ManualOutlineButton`, `ManualContentButton` when CopilotKit is unavailable
|
||||
|
||||
### 3. Health Monitoring
|
||||
|
||||
#### ✅ CopilotKit Health Context
|
||||
- Monitors CopilotKit availability status
|
||||
- Provides `copilotKitAvailable` flag to all consuming components
|
||||
- Updates automatically when health status changes
|
||||
|
||||
## Phase Flow
|
||||
|
||||
### Research Phase
|
||||
- **Action Button**: "▶ Start Research"
|
||||
- **Trigger**: When `!hasResearch && !copilotKitAvailable`
|
||||
- **Handler**: `handleResearchAction` → Navigates to research phase
|
||||
- **Caching**: `ManualResearchForm` checks `researchCache` before API call
|
||||
|
||||
### Outline Phase
|
||||
- **Action Button**: "▶ Create Outline"
|
||||
- **Trigger**: When `hasResearch && !hasOutline && !copilotKitAvailable`
|
||||
- **Handler**: `handleOutlineAction` →
|
||||
1. Checks `blogWriterCache.getCachedOutline()`
|
||||
2. If cached, loads from cache
|
||||
3. If not cached, calls `outlineGenRef.current.generateNow()`
|
||||
4. Navigates to outline phase
|
||||
|
||||
### Content Phase
|
||||
- **Action Button**: "▶ Confirm & Generate Content"
|
||||
- **Trigger**: When `hasOutline && !outlineConfirmed && !copilotKitAvailable`
|
||||
- **Handler**: `handleContentAction` →
|
||||
1. Confirms outline (`handleOutlineConfirmed()`)
|
||||
2. Checks `blogWriterCache.getCachedContent()`
|
||||
3. If cached, loads from cache
|
||||
4. If not cached and blog ≤1000 words, triggers generation
|
||||
5. For longer blogs, just confirms outline (manual generation required)
|
||||
|
||||
### SEO Phase
|
||||
- **Action Button**: "▶ Run SEO Analysis"
|
||||
- **Trigger**: When `hasContent && contentConfirmed && !hasSEOAnalysis && !copilotKitAvailable`
|
||||
- **Handler**: `handleSEOAction` →
|
||||
1. Marks content as confirmed
|
||||
2. Navigates to SEO phase
|
||||
3. Runs SEO analysis directly
|
||||
|
||||
### Publish Phase
|
||||
- **Action Button**: "▶ Generate SEO Metadata"
|
||||
- **Trigger**: When `hasSEOAnalysis && !hasSEOMetadata && !copilotKitAvailable`
|
||||
- **Handler**: `handlePublishAction` →
|
||||
1. Navigates to publish phase
|
||||
2. Opens SEO metadata modal
|
||||
|
||||
## Key Features
|
||||
|
||||
### ✅ Graceful Degradation
|
||||
- Application continues to function when CopilotKit is unavailable
|
||||
- Manual controls replace AI chat suggestions
|
||||
- No functionality loss - same workflow, different UI
|
||||
|
||||
### ✅ Caching Strategy
|
||||
- **Research**: Cached by keywords in `localStorage`
|
||||
- **Outline**: Cached by research keywords
|
||||
- **Content**: Cached by outline section IDs
|
||||
- All caching respects the same logic as CopilotKit flow
|
||||
|
||||
### ✅ State Management
|
||||
- Phase navigation state persisted in `localStorage`
|
||||
- User selections tracked and restored
|
||||
- Auto-progression when prerequisites are met
|
||||
- Manual navigation always allowed when prerequisites met
|
||||
|
||||
### ✅ User Experience
|
||||
- Clear visual indicators for each phase status
|
||||
- Action buttons only appear when relevant
|
||||
- Smooth transitions between phases
|
||||
- Error handling with user-friendly messages
|
||||
|
||||
## Architecture Benefits
|
||||
|
||||
### ✅ Modularity
|
||||
- Components extracted to `BlogWriterUtils/` folder
|
||||
- Hooks for specific concerns (polling, SEO, actions)
|
||||
- Clear separation of concerns
|
||||
|
||||
### ✅ Reusability
|
||||
- Action handlers reusable across different contexts
|
||||
- Caching utilities shared between CopilotKit and manual flows
|
||||
- Phase navigation logic centralized
|
||||
|
||||
### ✅ Maintainability
|
||||
- Single source of truth for phase logic
|
||||
- Consistent caching behavior
|
||||
- Easy to extend with new phases or actions
|
||||
|
||||
## Testing Checklist
|
||||
|
||||
### ✅ Manual Testing Scenarios
|
||||
- [x] CopilotKit available - normal flow works
|
||||
- [x] CopilotKit unavailable - action buttons appear
|
||||
- [x] Research action triggers research form
|
||||
- [x] Outline action uses cache when available
|
||||
- [x] Content action uses cache when available
|
||||
- [x] SEO action runs analysis
|
||||
- [x] Publish action opens metadata modal
|
||||
- [x] Phase navigation works independently of CopilotKit
|
||||
- [x] Caching prevents redundant API calls
|
||||
|
||||
## Known Limitations & Future Enhancements
|
||||
|
||||
### Current Limitations
|
||||
1. **Manual Content Button**: For blogs >1000 words, user must manually click content generation button
|
||||
2. **Error Recovery**: Limited retry logic in action handlers
|
||||
3. **Progress Indicators**: Action buttons don't show loading states
|
||||
|
||||
### Potential Enhancements
|
||||
1. Add loading spinners to action buttons during operations
|
||||
2. Improve error messages with retry options
|
||||
3. Add keyboard shortcuts for phase navigation
|
||||
4. Implement undo/redo for phase actions
|
||||
5. Add analytics tracking for manual vs CopilotKit usage
|
||||
|
||||
## Conclusion
|
||||
|
||||
The Clickable Phase Navigation for CopilotKit Mitigation is **fully implemented** and provides a robust fallback mechanism when CopilotKit is unavailable. The implementation:
|
||||
|
||||
- ✅ Provides seamless user experience
|
||||
- ✅ Respects existing caching mechanisms
|
||||
- ✅ Maintains workflow consistency
|
||||
- ✅ Follows architectural best practices
|
||||
- ✅ Is well-integrated with existing components
|
||||
|
||||
The system is production-ready and successfully mitigates CopilotKit unavailability while maintaining full functionality of the blog writing workflow.
|
||||
|
||||
@@ -310,7 +310,15 @@ const App: React.FC = () => {
|
||||
// Get CopilotKit key from localStorage or .env
|
||||
const [copilotApiKey, setCopilotApiKey] = useState(() => {
|
||||
const savedKey = localStorage.getItem('copilotkit_api_key');
|
||||
return savedKey || process.env.REACT_APP_COPILOTKIT_API_KEY || '';
|
||||
const envKey = process.env.REACT_APP_COPILOTKIT_API_KEY || '';
|
||||
const key = (savedKey || envKey).trim();
|
||||
|
||||
// Validate key format if present
|
||||
if (key && !key.startsWith('ck_pub_')) {
|
||||
console.warn('CopilotKit API key format invalid - must start with ck_pub_');
|
||||
}
|
||||
|
||||
return key;
|
||||
});
|
||||
|
||||
// Initialize app - loading state will be managed by InitialRouteHandler
|
||||
|
||||
@@ -270,6 +270,7 @@ export const BlogWriter: React.FC = () => {
|
||||
handleOutlineAction,
|
||||
handleContentAction,
|
||||
handleSEOAction,
|
||||
handleApplySEORecommendations,
|
||||
handlePublishAction,
|
||||
} = usePhaseActionHandlers({
|
||||
research,
|
||||
@@ -284,6 +285,7 @@ export const BlogWriter: React.FC = () => {
|
||||
outlineGenRef,
|
||||
setOutline,
|
||||
setContentConfirmed,
|
||||
setIsSEOAnalysisModalOpen,
|
||||
setIsSEOMetadataModalOpen,
|
||||
runSEOAnalysisDirect,
|
||||
onOutlineComplete: handleCachedOutlineComplete,
|
||||
@@ -391,6 +393,7 @@ export const BlogWriter: React.FC = () => {
|
||||
onOutlineAction: handleOutlineAction,
|
||||
onContentAction: handleContentAction,
|
||||
onSEOAction: handleSEOAction,
|
||||
onApplySEORecommendations: handleApplySEORecommendations,
|
||||
onPublishAction: handlePublishAction,
|
||||
}}
|
||||
hasResearch={!!research}
|
||||
@@ -399,6 +402,7 @@ export const BlogWriter: React.FC = () => {
|
||||
hasContent={Object.keys(sections).length > 0}
|
||||
contentConfirmed={contentConfirmed}
|
||||
hasSEOAnalysis={!!seoAnalysis}
|
||||
seoRecommendationsApplied={seoRecommendationsApplied}
|
||||
hasSEOMetadata={!!seoMetadata}
|
||||
/>
|
||||
)}
|
||||
|
||||
@@ -13,6 +13,7 @@ interface HeaderBarProps {
|
||||
hasContent?: boolean;
|
||||
contentConfirmed?: boolean;
|
||||
hasSEOAnalysis?: boolean;
|
||||
seoRecommendationsApplied?: boolean;
|
||||
hasSEOMetadata?: boolean;
|
||||
}
|
||||
|
||||
@@ -28,6 +29,7 @@ export const HeaderBar: React.FC<HeaderBarProps> = ({
|
||||
hasContent = false,
|
||||
contentConfirmed = false,
|
||||
hasSEOAnalysis = false,
|
||||
seoRecommendationsApplied = false,
|
||||
hasSEOMetadata = false,
|
||||
}) => {
|
||||
return (
|
||||
@@ -61,6 +63,7 @@ export const HeaderBar: React.FC<HeaderBarProps> = ({
|
||||
hasContent={hasContent}
|
||||
contentConfirmed={contentConfirmed}
|
||||
hasSEOAnalysis={hasSEOAnalysis}
|
||||
seoRecommendationsApplied={seoRecommendationsApplied}
|
||||
hasSEOMetadata={hasSEOMetadata}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -25,28 +25,28 @@ export const WriterCopilotSidebar: React.FC<WriterCopilotSidebarProps> = ({
|
||||
}}
|
||||
suggestions={suggestions}
|
||||
makeSystemMessage={(context: string, additional?: string) => {
|
||||
const hasResearch = research !== null;
|
||||
const hasOutline = outline.length > 0;
|
||||
const hasResearch = research !== null && research !== undefined;
|
||||
const hasOutline = outline && outline.length > 0;
|
||||
const isOutlineConfirmed = outlineConfirmed;
|
||||
const researchInfo = hasResearch
|
||||
const researchInfo = hasResearch && research
|
||||
? {
|
||||
sources: research.sources?.length || 0,
|
||||
queries: research.search_queries?.length || 0,
|
||||
angles: research.suggested_angles?.length || 0,
|
||||
primaryKeywords: research.keyword_analysis?.primary || [],
|
||||
searchIntent: research.keyword_analysis?.search_intent || 'informational',
|
||||
sources: research?.sources?.length || 0,
|
||||
queries: research?.search_queries?.length || 0,
|
||||
angles: research?.suggested_angles?.length || 0,
|
||||
primaryKeywords: research?.keyword_analysis?.primary || [],
|
||||
searchIntent: research?.keyword_analysis?.search_intent || 'informational',
|
||||
}
|
||||
: null;
|
||||
|
||||
const outlineContext = hasOutline
|
||||
const outlineContext = hasOutline && outline
|
||||
? `
|
||||
OUTLINE DETAILS:
|
||||
- Total sections: ${outline.length}
|
||||
- Section headings: ${outline.map((s: any) => s.heading).join(', ')}
|
||||
- Total target words: ${outline.reduce((sum: number, s: any) => sum + (s.target_words || 0), 0)}
|
||||
- Section breakdown: ${outline
|
||||
- Section headings: ${(outline || []).map((s: any) => s?.heading || 'Untitled').join(', ')}
|
||||
- Total target words: ${(outline || []).reduce((sum: number, s: any) => sum + (s?.target_words || 0), 0)}
|
||||
- Section breakdown: ${(outline || [])
|
||||
.map(
|
||||
(s: any) => `${s.heading} (${s.target_words || 0} words, ${s.subheadings?.length || 0} subheadings, ${s.key_points?.length || 0} key points)`
|
||||
(s: any) => `${s?.heading || 'Untitled'} (${s?.target_words || 0} words, ${s?.subheadings?.length || 0} subheadings, ${s?.key_points?.length || 0} key points)`
|
||||
)
|
||||
.join('; ')}
|
||||
`
|
||||
@@ -65,7 +65,7 @@ ${hasResearch && researchInfo ? `
|
||||
- Search intent: ${researchInfo.searchIntent}
|
||||
` : '❌ No research completed yet'}
|
||||
|
||||
${hasOutline ? `✅ OUTLINE GENERATED: ${outline.length} sections created${isOutlineConfirmed ? ' (CONFIRMED)' : ' (PENDING CONFIRMATION)'}` : '❌ No outline generated yet'}
|
||||
${hasOutline && outline ? `✅ OUTLINE GENERATED: ${outline.length} sections created${isOutlineConfirmed ? ' (CONFIRMED)' : ' (PENDING CONFIRMATION)'}` : '❌ No outline generated yet'}
|
||||
${outlineContext}
|
||||
|
||||
Available tools:
|
||||
|
||||
@@ -17,6 +17,7 @@ interface UsePhaseActionHandlersProps {
|
||||
outlineGenRef: React.RefObject<any>;
|
||||
setOutline: (outline: any[]) => void;
|
||||
setContentConfirmed: (confirmed: boolean) => void;
|
||||
setIsSEOAnalysisModalOpen: (open: boolean) => void;
|
||||
setIsSEOMetadataModalOpen: (open: boolean) => void;
|
||||
runSEOAnalysisDirect: () => string;
|
||||
onOutlineComplete?: (outline: any) => void;
|
||||
@@ -36,6 +37,7 @@ export const usePhaseActionHandlers = ({
|
||||
outlineGenRef,
|
||||
setOutline,
|
||||
setContentConfirmed,
|
||||
setIsSEOAnalysisModalOpen,
|
||||
setIsSEOMetadataModalOpen,
|
||||
runSEOAnalysisDirect,
|
||||
onOutlineComplete,
|
||||
@@ -162,13 +164,20 @@ export const usePhaseActionHandlers = ({
|
||||
}
|
||||
navigateToPhase('seo');
|
||||
runSEOAnalysisDirect();
|
||||
debug.log('[BlogWriter] SEO action triggered');
|
||||
debug.log('[BlogWriter] SEO action triggered - running SEO analysis');
|
||||
}, [contentConfirmed, setContentConfirmed, navigateToPhase, runSEOAnalysisDirect]);
|
||||
|
||||
const handleApplySEORecommendations = useCallback(() => {
|
||||
navigateToPhase('seo');
|
||||
setIsSEOAnalysisModalOpen(true);
|
||||
debug.log('[BlogWriter] Apply SEO Recommendations action triggered - opening SEO analysis modal');
|
||||
}, [navigateToPhase, setIsSEOAnalysisModalOpen]);
|
||||
|
||||
const handlePublishAction = useCallback(() => {
|
||||
navigateToPhase('publish');
|
||||
// Can be called from SEO phase (after recommendations applied) or publish phase
|
||||
navigateToPhase('seo'); // Stay in SEO phase if called from there
|
||||
setIsSEOMetadataModalOpen(true);
|
||||
debug.log('[BlogWriter] Publish action triggered - opening SEO metadata modal');
|
||||
debug.log('[BlogWriter] Generate SEO Metadata action triggered - opening SEO metadata modal');
|
||||
}, [navigateToPhase, setIsSEOMetadataModalOpen]);
|
||||
|
||||
return {
|
||||
@@ -176,6 +185,7 @@ export const usePhaseActionHandlers = ({
|
||||
handleOutlineAction,
|
||||
handleContentAction,
|
||||
handleSEOAction,
|
||||
handleApplySEORecommendations,
|
||||
handlePublishAction,
|
||||
};
|
||||
};
|
||||
|
||||
@@ -15,6 +15,7 @@ export interface PhaseActionHandlers {
|
||||
onOutlineAction?: () => void; // Generate outline
|
||||
onContentAction?: () => void; // Confirm outline + generate content
|
||||
onSEOAction?: () => void; // Run SEO analysis
|
||||
onApplySEORecommendations?: () => void; // Apply SEO recommendations
|
||||
onPublishAction?: () => void; // Generate SEO metadata or publish
|
||||
}
|
||||
|
||||
@@ -31,6 +32,7 @@ interface PhaseNavigationProps {
|
||||
hasContent?: boolean;
|
||||
contentConfirmed?: boolean;
|
||||
hasSEOAnalysis?: boolean;
|
||||
seoRecommendationsApplied?: boolean;
|
||||
hasSEOMetadata?: boolean;
|
||||
}
|
||||
|
||||
@@ -46,6 +48,7 @@ export const PhaseNavigation: React.FC<PhaseNavigationProps> = ({
|
||||
hasContent = false,
|
||||
contentConfirmed = false,
|
||||
hasSEOAnalysis = false,
|
||||
seoRecommendationsApplied = false,
|
||||
hasSEOMetadata = false,
|
||||
}) => {
|
||||
// Determine which action to show for each phase when CopilotKit is unavailable
|
||||
@@ -61,7 +64,10 @@ export const PhaseNavigation: React.FC<PhaseNavigationProps> = ({
|
||||
}
|
||||
break;
|
||||
case 'outline':
|
||||
if (hasResearch && !hasOutline) {
|
||||
// Show "Create Outline" if research exists and outline is not yet confirmed
|
||||
// This ensures users can create/regenerate outline after research, even if cached one exists
|
||||
// Once outline is confirmed, we hide the button to avoid confusion during content generation
|
||||
if (hasResearch && !outlineConfirmed) {
|
||||
return { label: 'Create Outline', handler: actionHandlers.onOutlineAction || null };
|
||||
}
|
||||
break;
|
||||
@@ -71,13 +77,26 @@ export const PhaseNavigation: React.FC<PhaseNavigationProps> = ({
|
||||
}
|
||||
break;
|
||||
case 'seo':
|
||||
if (hasContent && contentConfirmed && !hasSEOAnalysis) {
|
||||
// Priority order matching CopilotKit suggestions:
|
||||
// 1. No SEO analysis yet - Run SEO Analysis
|
||||
// Note: We check hasContent (sections exist) - contentConfirmed is checked but not strictly required
|
||||
// This allows users to run SEO analysis even if contentConfirmed hasn't been explicitly set
|
||||
if (hasContent && !hasSEOAnalysis) {
|
||||
return { label: 'Run SEO Analysis', handler: actionHandlers.onSEOAction || null };
|
||||
}
|
||||
// 2. SEO analysis exists but recommendations not applied - Apply SEO Recommendations
|
||||
if (hasSEOAnalysis && !seoRecommendationsApplied) {
|
||||
return { label: 'Apply SEO Recommendations', handler: actionHandlers.onApplySEORecommendations || null };
|
||||
}
|
||||
// 3. SEO analysis exists and recommendations applied but no metadata - Generate SEO Metadata
|
||||
if (hasSEOAnalysis && seoRecommendationsApplied && !hasSEOMetadata) {
|
||||
return { label: 'Generate SEO Metadata', handler: actionHandlers.onPublishAction || null };
|
||||
}
|
||||
break;
|
||||
case 'publish':
|
||||
if (hasSEOAnalysis && !hasSEOMetadata) {
|
||||
return { label: 'Generate SEO Metadata', handler: actionHandlers.onPublishAction || null };
|
||||
// Only show if SEO metadata exists (ready to publish)
|
||||
if (hasSEOAnalysis && seoRecommendationsApplied && hasSEOMetadata) {
|
||||
return { label: 'Ready to Publish', handler: null }; // Publish handled separately
|
||||
}
|
||||
break;
|
||||
}
|
||||
@@ -97,17 +116,59 @@ export const PhaseNavigation: React.FC<PhaseNavigationProps> = ({
|
||||
const isCompleted = phase.completed;
|
||||
const isDisabled = phase.disabled;
|
||||
const action = getActionForPhase(phase.id);
|
||||
|
||||
// Show action button when:
|
||||
// 1. CopilotKit is unavailable
|
||||
// 2. Action handler exists
|
||||
// 3. Phase is not disabled
|
||||
// 4. Show for current phase OR next actionable phase (not completed)
|
||||
// For research phase specifically, always show if no research exists
|
||||
// 4. Show for current phase OR next actionable phase (not completed) OR phases with available actions
|
||||
// For research phase: always show if no research exists
|
||||
// For outline phase: always show if research exists but no outline (like research phase)
|
||||
// For SEO phase: always show if action handler exists (prerequisites are met)
|
||||
const isResearchPhase = phase.id === 'research' && !hasResearch;
|
||||
const showAction = !copilotKitAvailable && action.handler && !isDisabled && (
|
||||
// Outline phase: show action whenever research exists and action handler is available
|
||||
// This allows users to create/regenerate outline after research, even if cached one exists
|
||||
const isOutlinePhase = phase.id === 'outline' && hasResearch && action.handler;
|
||||
// SEO phase: show action whenever prerequisites are met (action handler exists)
|
||||
// Similar to research/outline, show SEO actions whenever handler exists and phase is enabled
|
||||
const isSEOPhase = phase.id === 'seo' && action.handler;
|
||||
|
||||
// Debug logging for SEO phase (temporary - for troubleshooting)
|
||||
if (phase.id === 'seo' && !copilotKitAvailable && process.env.NODE_ENV === 'development') {
|
||||
console.log('[PhaseNavigation] SEO phase debug:', {
|
||||
phaseId: phase.id,
|
||||
isCurrent,
|
||||
isCompleted,
|
||||
isDisabled,
|
||||
hasContent,
|
||||
contentConfirmed,
|
||||
hasSEOAnalysis,
|
||||
seoRecommendationsApplied,
|
||||
hasSEOMetadata,
|
||||
actionLabel: action.label,
|
||||
actionHandler: !!action.handler,
|
||||
copilotKitAvailable,
|
||||
isSEOPhase,
|
||||
showActionWillBe: !copilotKitAvailable && action.handler && !isDisabled && (
|
||||
isCurrent ||
|
||||
(!isCompleted && !isDisabled) ||
|
||||
isResearchPhase ||
|
||||
isOutlinePhase ||
|
||||
isSEOPhase
|
||||
)
|
||||
});
|
||||
}
|
||||
|
||||
// Show action if: current phase, or phase is not completed and not disabled, or it's research/outline/SEO with available action
|
||||
// For SEO: show whenever action handler exists (prerequisites are met), even if phase is marked as disabled/completed
|
||||
// This is critical because SEO prerequisites (hasContent && contentConfirmed) are validated in getActionForPhase,
|
||||
// so if action.handler exists, we should show it regardless of phase navigation's disabled state
|
||||
const showAction = !copilotKitAvailable && action.handler && (
|
||||
isCurrent ||
|
||||
(!isCompleted && !isDisabled) ||
|
||||
isResearchPhase
|
||||
isResearchPhase ||
|
||||
isOutlinePhase ||
|
||||
isSEOPhase // Show SEO actions when handler exists - handler existence means prerequisites are met, so ignore isDisabled
|
||||
);
|
||||
|
||||
return (
|
||||
|
||||
@@ -0,0 +1,238 @@
|
||||
import React from 'react';
|
||||
import { BlogResearchResponse } from '../../../services/blogWriterApi';
|
||||
|
||||
interface GoogleSearchModalProps {
|
||||
research: BlogResearchResponse;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export const GoogleSearchModal: React.FC<GoogleSearchModalProps> = ({ research, onClose }) => {
|
||||
if (!research.search_widget && !research.search_queries?.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const handleSearchClick = (query: string) => {
|
||||
// Open Google Search in new tab per Google requirements
|
||||
const searchUrl = `https://www.google.com/search?q=${encodeURIComponent(query)}`;
|
||||
window.open(searchUrl, '_blank', 'noopener,noreferrer');
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
zIndex: 1000,
|
||||
backdropFilter: 'blur(4px)'
|
||||
}}
|
||||
onClick={onClose}>
|
||||
<div style={{
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '16px',
|
||||
padding: '32px',
|
||||
maxWidth: '800px',
|
||||
width: '90%',
|
||||
maxHeight: '90vh',
|
||||
overflow: 'auto',
|
||||
boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
||||
border: '1px solid #e5e7eb',
|
||||
position: 'relative'
|
||||
}}
|
||||
onClick={(e) => e.stopPropagation()}>
|
||||
{/* Header */}
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: '24px',
|
||||
borderBottom: '2px solid #f3f4f6',
|
||||
paddingBottom: '16px'
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
|
||||
<div style={{
|
||||
width: '48px',
|
||||
height: '48px',
|
||||
backgroundColor: '#f8fafc',
|
||||
borderRadius: '12px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
border: '1px solid #e2e8f0'
|
||||
}}>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="#4285F4" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 style={{
|
||||
margin: 0,
|
||||
color: '#1f2937',
|
||||
fontSize: '24px',
|
||||
fontWeight: '700'
|
||||
}}>
|
||||
Google Search Suggestions
|
||||
</h3>
|
||||
<p style={{
|
||||
margin: '4px 0 0 0',
|
||||
color: '#6b7280',
|
||||
fontSize: '14px'
|
||||
}}>
|
||||
Explore related searches and sources
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
style={{
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
fontSize: '28px',
|
||||
cursor: 'pointer',
|
||||
color: '#6b7280',
|
||||
padding: '8px',
|
||||
borderRadius: '8px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
transition: 'all 0.2s ease',
|
||||
width: '40px',
|
||||
height: '40px'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.backgroundColor = '#f3f4f6';
|
||||
e.currentTarget.style.color = '#374151';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.backgroundColor = 'transparent';
|
||||
e.currentTarget.style.color = '#6b7280';
|
||||
}}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Google Search Widget - Display exactly as provided per Google requirements */}
|
||||
{research.search_widget && (
|
||||
<div style={{
|
||||
marginBottom: '32px',
|
||||
width: '100%',
|
||||
padding: '20px',
|
||||
backgroundColor: '#f8fafc',
|
||||
borderRadius: '12px',
|
||||
border: '1px solid #e2e8f0'
|
||||
}}>
|
||||
<div style={{
|
||||
marginBottom: '12px',
|
||||
fontSize: '13px',
|
||||
fontWeight: '600',
|
||||
color: '#475569',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px'
|
||||
}}>
|
||||
<span>🔍</span>
|
||||
<span>Search Suggestions (Click to open in Google)</span>
|
||||
</div>
|
||||
{/* Render Google's HTML exactly as provided - no modifications */}
|
||||
<div
|
||||
dangerouslySetInnerHTML={{ __html: research.search_widget }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Search Queries List */}
|
||||
{research.search_queries && research.search_queries.length > 0 && (
|
||||
<div style={{ marginTop: '32px' }}>
|
||||
<h4 style={{
|
||||
margin: '0 0 16px 0',
|
||||
color: '#1f2937',
|
||||
fontSize: '18px',
|
||||
fontWeight: '600',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px'
|
||||
}}>
|
||||
<span>📋</span>
|
||||
Additional Search Queries
|
||||
</h4>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
|
||||
{research.search_queries.map((query, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => handleSearchClick(query)}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '12px 16px',
|
||||
backgroundColor: 'white',
|
||||
border: '1px solid #d1d5db',
|
||||
borderRadius: '8px',
|
||||
cursor: 'pointer',
|
||||
textAlign: 'left',
|
||||
fontSize: '14px',
|
||||
color: '#374151',
|
||||
transition: 'all 0.2s ease',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.backgroundColor = '#f9fafb';
|
||||
e.currentTarget.style.borderColor = '#4285F4';
|
||||
e.currentTarget.style.transform = 'translateX(4px)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.backgroundColor = 'white';
|
||||
e.currentTarget.style.borderColor = '#d1d5db';
|
||||
e.currentTarget.style.transform = 'translateX(0)';
|
||||
}}
|
||||
>
|
||||
<span style={{ flex: 1 }}>{query}</span>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" style={{ flexShrink: 0 }}>
|
||||
<path d="M7 17L17 7M17 7H7M17 7V17" stroke="#4285F4" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Info Footer */}
|
||||
<div style={{
|
||||
marginTop: '24px',
|
||||
padding: '16px',
|
||||
backgroundColor: '#eff6ff',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #bfdbfe'
|
||||
}}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'flex-start',
|
||||
gap: '8px',
|
||||
fontSize: '13px',
|
||||
color: '#1e40af'
|
||||
}}>
|
||||
<span style={{ fontSize: '16px', lineHeight: '1.5' }}>ℹ️</span>
|
||||
<div>
|
||||
<div style={{ fontWeight: '600', marginBottom: '4px' }}>
|
||||
About These Suggestions
|
||||
</div>
|
||||
<div style={{ lineHeight: '1.6' }}>
|
||||
These search suggestions are generated by Google's AI to help you explore related topics.
|
||||
Clicking any suggestion will open Google Search in a new tab to find the latest and most relevant information.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default GoogleSearchModal;
|
||||
|
||||
@@ -436,20 +436,7 @@ export const ResearchSources: React.FC<ResearchSourcesProps> = ({ research }) =>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Google Search Suggestions - Per Google Display Requirements */}
|
||||
{research.search_widget && (
|
||||
<div style={{
|
||||
marginBottom: '24px',
|
||||
width: '100%',
|
||||
position: 'relative'
|
||||
}}>
|
||||
{/* Google Search Widget - Display exactly as provided without modifications */}
|
||||
<div
|
||||
dangerouslySetInnerHTML={{ __html: research.search_widget }}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Note: Google Search Widget is shown in GoogleSearchModal instead */}
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gap: '12px',
|
||||
|
||||
@@ -1,2 +1,3 @@
|
||||
export { ResearchSources } from './ResearchSources';
|
||||
export { ResearchGrounding } from './ResearchGrounding';
|
||||
export { GoogleSearchModal } from './GoogleSearchModal';
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { BlogResearchResponse } from '../../services/blogWriterApi';
|
||||
import { ResearchSources, ResearchGrounding } from './ResearchComponents';
|
||||
import { ResearchSources, ResearchGrounding, GoogleSearchModal } from './ResearchComponents';
|
||||
|
||||
interface ResearchResultsProps {
|
||||
research: BlogResearchResponse;
|
||||
@@ -10,6 +10,7 @@ export const ResearchResults: React.FC<ResearchResultsProps> = ({ research }) =>
|
||||
const [showAnglesModal, setShowAnglesModal] = useState(false);
|
||||
const [showCompetitorModal, setShowCompetitorModal] = useState(false);
|
||||
const [showGroundingModal, setShowGroundingModal] = useState(false);
|
||||
const [showSearchModal, setShowSearchModal] = useState(false);
|
||||
const [showToast, setShowToast] = useState(false);
|
||||
|
||||
// Show toast message on component mount
|
||||
@@ -501,6 +502,38 @@ export const ResearchResults: React.FC<ResearchResultsProps> = ({ research }) =>
|
||||
>
|
||||
📝 Use Research Blog Topics
|
||||
</div>
|
||||
|
||||
{/* Google Search Suggestions Chip - Only show when we have search data */}
|
||||
{(research.search_widget || (research.search_queries && research.search_queries.length > 0)) && (
|
||||
<div
|
||||
onClick={() => setShowSearchModal(true)}
|
||||
style={{
|
||||
backgroundColor: '#fff8e1',
|
||||
color: '#f57c00',
|
||||
border: '1px solid #ffb74d',
|
||||
borderRadius: '20px',
|
||||
padding: '6px 16px',
|
||||
fontSize: '13px',
|
||||
fontWeight: '500',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.2s ease',
|
||||
boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.backgroundColor = '#ffe082';
|
||||
e.currentTarget.style.transform = 'scale(1.05)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.backgroundColor = '#fff8e1';
|
||||
e.currentTarget.style.transform = 'scale(1)';
|
||||
}}
|
||||
>
|
||||
🔍 Google Search
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -539,6 +572,14 @@ export const ResearchResults: React.FC<ResearchResultsProps> = ({ research }) =>
|
||||
{renderAnglesModal()}
|
||||
{renderCompetitorModal()}
|
||||
{renderGroundingModal()}
|
||||
|
||||
{/* Google Search Modal */}
|
||||
{showSearchModal && (
|
||||
<GoogleSearchModal
|
||||
research={research}
|
||||
onClose={() => setShowSearchModal(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { useResearchWizard } from './hooks/useResearchWizard';
|
||||
import { useResearchExecution } from './hooks/useResearchExecution';
|
||||
import { StepKeyword } from './steps/StepKeyword';
|
||||
import { StepOptions } from './steps/StepOptions';
|
||||
import { ResearchInput } from './steps/ResearchInput';
|
||||
import { StepProgress } from './steps/StepProgress';
|
||||
import { StepResults } from './steps/StepResults';
|
||||
import { ResearchWizardProps } from './types/research.types';
|
||||
@@ -19,12 +18,17 @@ export const ResearchWizard: React.FC<ResearchWizardProps> = ({
|
||||
// Handle results from execution
|
||||
useEffect(() => {
|
||||
if (execution.result && !execution.isExecuting) {
|
||||
console.log('[ResearchWizard] Results received, updating state and navigating:', {
|
||||
hasResults: !!execution.result,
|
||||
currentStep: wizard.state.currentStep,
|
||||
shouldNavigate: wizard.state.currentStep === 2
|
||||
});
|
||||
wizard.updateState({ results: execution.result });
|
||||
if (wizard.state.currentStep === 3) {
|
||||
if (wizard.state.currentStep === 2) {
|
||||
wizard.nextStep();
|
||||
}
|
||||
}
|
||||
}, [execution.result, execution.isExecuting]);
|
||||
}, [execution.result, execution.isExecuting]); // Don't depend on currentStep to avoid loops
|
||||
|
||||
// Handle completion callback
|
||||
useEffect(() => {
|
||||
@@ -43,61 +47,79 @@ export const ResearchWizard: React.FC<ResearchWizardProps> = ({
|
||||
|
||||
switch (wizard.state.currentStep) {
|
||||
case 1:
|
||||
return <StepKeyword {...stepProps} />;
|
||||
return <ResearchInput {...stepProps} />;
|
||||
case 2:
|
||||
return <StepOptions {...stepProps} />;
|
||||
return <StepProgress {...stepProps} execution={execution} />;
|
||||
case 3:
|
||||
return <StepProgress {...stepProps} />;
|
||||
case 4:
|
||||
return <StepResults {...stepProps} />;
|
||||
default:
|
||||
return <StepKeyword {...stepProps} />;
|
||||
return <ResearchInput {...stepProps} />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
minHeight: '100vh',
|
||||
backgroundColor: '#f5f5f5',
|
||||
padding: '20px',
|
||||
}}>
|
||||
<div>
|
||||
{/* Wizard Container */}
|
||||
<div style={{
|
||||
maxWidth: '1200px',
|
||||
margin: '0 auto',
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '12px',
|
||||
boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
|
||||
background: 'rgba(255, 255, 255, 0.8)',
|
||||
backdropFilter: 'blur(12px)',
|
||||
border: '1px solid rgba(14, 165, 233, 0.2)',
|
||||
borderRadius: '20px',
|
||||
boxShadow: '0 4px 16px rgba(14, 165, 233, 0.1)',
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
{/* Header */}
|
||||
<div style={{
|
||||
backgroundColor: '#1976d2',
|
||||
color: 'white',
|
||||
padding: '24px',
|
||||
borderBottom: '1px solid #e0e0e0',
|
||||
background: 'linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0%, rgba(56, 189, 248, 0.08) 100%)',
|
||||
borderBottom: '1px solid rgba(14, 165, 233, 0.15)',
|
||||
padding: '20px 28px',
|
||||
}}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<div>
|
||||
<h1 style={{ margin: 0, fontSize: '24px' }}>Research Wizard</h1>
|
||||
<p style={{ margin: '8px 0 0 0', fontSize: '14px', opacity: 0.9 }}>
|
||||
Step {wizard.state.currentStep} of {wizard.maxSteps}
|
||||
<h1 style={{
|
||||
margin: 0,
|
||||
fontSize: '24px',
|
||||
fontWeight: '700',
|
||||
color: '#0c4a6e',
|
||||
}}>
|
||||
Research Wizard
|
||||
</h1>
|
||||
<p style={{
|
||||
margin: '4px 0 0 0',
|
||||
fontSize: '13px',
|
||||
color: '#0369a1',
|
||||
fontWeight: '400',
|
||||
}}>
|
||||
Phase {wizard.state.currentStep} of {wizard.maxSteps} • AI-Powered Intelligence
|
||||
</p>
|
||||
</div>
|
||||
{onCancel && (
|
||||
<button
|
||||
onClick={onCancel}
|
||||
onClick={() => {
|
||||
wizard.reset();
|
||||
onCancel();
|
||||
}}
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
backgroundColor: 'rgba(255,255,255,0.2)',
|
||||
color: 'white',
|
||||
border: '1px solid rgba(255,255,255,0.3)',
|
||||
borderRadius: '6px',
|
||||
background: 'rgba(239, 68, 68, 0.1)',
|
||||
color: '#dc2626',
|
||||
border: '1px solid rgba(239, 68, 68, 0.25)',
|
||||
borderRadius: '10px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '14px',
|
||||
fontSize: '13px',
|
||||
fontWeight: '500',
|
||||
transition: 'all 0.2s ease',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = 'rgba(239, 68, 68, 0.15)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = 'rgba(239, 68, 68, 0.1)';
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
✕ Cancel
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
@@ -105,16 +127,18 @@ export const ResearchWizard: React.FC<ResearchWizardProps> = ({
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div style={{
|
||||
backgroundColor: '#f0f0f0',
|
||||
height: '4px',
|
||||
background: 'rgba(14, 165, 233, 0.1)',
|
||||
height: '5px',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
}}>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: '#1976d2',
|
||||
background: 'linear-gradient(90deg, #0ea5e9 0%, #38bdf8 100%)',
|
||||
height: '100%',
|
||||
width: `${(wizard.state.currentStep / wizard.maxSteps) * 100}%`,
|
||||
transition: 'width 0.3s ease',
|
||||
transition: 'width 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
boxShadow: '0 0 8px rgba(14, 165, 233, 0.4)',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
@@ -123,67 +147,123 @@ export const ResearchWizard: React.FC<ResearchWizardProps> = ({
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-around',
|
||||
padding: '20px 40px',
|
||||
borderBottom: '1px solid #e0e0e0',
|
||||
padding: '24px 40px',
|
||||
borderBottom: '1px solid rgba(14, 165, 233, 0.15)',
|
||||
background: 'rgba(14, 165, 233, 0.03)',
|
||||
}}>
|
||||
{[1, 2, 3, 4].map(step => (
|
||||
<div key={step} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', position: 'relative' }}>
|
||||
<div style={{
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: step <= wizard.state.currentStep ? '#1976d2' : '#e0e0e0',
|
||||
color: step <= wizard.state.currentStep ? 'white' : '#999',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '16px',
|
||||
marginBottom: '8px',
|
||||
transition: 'all 0.3s ease',
|
||||
}}>
|
||||
{step < wizard.state.currentStep ? '✓' : step}
|
||||
{[1, 2, 3].map(step => {
|
||||
const isActive = step === wizard.state.currentStep;
|
||||
const isCompleted = step < wizard.state.currentStep;
|
||||
const isClickable = step <= wizard.state.currentStep;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={step}
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
position: 'relative',
|
||||
cursor: isClickable ? 'pointer' : 'default',
|
||||
transition: 'all 0.2s ease',
|
||||
}}
|
||||
onClick={() => {
|
||||
if (isClickable) {
|
||||
wizard.updateState({ currentStep: step });
|
||||
}
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (isClickable) {
|
||||
e.currentTarget.style.transform = 'scale(1.05)';
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.transform = 'scale(1)';
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
width: '48px',
|
||||
height: '48px',
|
||||
borderRadius: '50%',
|
||||
background: isActive
|
||||
? 'linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%)'
|
||||
: isCompleted
|
||||
? 'linear-gradient(135deg, #22c55e 0%, #16a34a 100%)'
|
||||
: 'rgba(14, 165, 233, 0.1)',
|
||||
color: (isActive || isCompleted) ? 'white' : '#64748b',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontWeight: '700',
|
||||
fontSize: '18px',
|
||||
marginBottom: '10px',
|
||||
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
border: isActive ? '2px solid rgba(14, 165, 233, 0.3)' : '2px solid rgba(14, 165, 233, 0.1)',
|
||||
boxShadow: isActive
|
||||
? '0 4px 16px rgba(14, 165, 233, 0.3)'
|
||||
: isCompleted
|
||||
? '0 2px 8px rgba(34, 197, 94, 0.2)'
|
||||
: 'none',
|
||||
}}>
|
||||
{isCompleted ? '✓' : step}
|
||||
</div>
|
||||
<span style={{
|
||||
fontSize: '13px',
|
||||
color: (isActive || isCompleted) ? '#0c4a6e' : '#64748b',
|
||||
fontWeight: isActive ? '600' : '400',
|
||||
letterSpacing: '0.01em',
|
||||
}}>
|
||||
{step === 1 && 'Configure'}
|
||||
{step === 2 && 'Execute'}
|
||||
{step === 3 && 'Analyze'}
|
||||
</span>
|
||||
</div>
|
||||
<span style={{
|
||||
fontSize: '12px',
|
||||
color: step <= wizard.state.currentStep ? '#1976d2' : '#999',
|
||||
fontWeight: step === wizard.state.currentStep ? '600' : 'normal',
|
||||
}}>
|
||||
{step === 1 && 'Setup'}
|
||||
{step === 2 && 'Options'}
|
||||
{step === 3 && 'Research'}
|
||||
{step === 4 && 'Results'}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div style={{ padding: '24px' }}>
|
||||
<div style={{ padding: '20px' }}>
|
||||
{renderStep()}
|
||||
</div>
|
||||
|
||||
{/* Navigation Footer */}
|
||||
{wizard.state.currentStep <= 2 && (
|
||||
{wizard.state.currentStep < 3 && (
|
||||
<div style={{
|
||||
padding: '20px 24px',
|
||||
borderTop: '1px solid #e0e0e0',
|
||||
padding: '20px 28px',
|
||||
borderTop: '1px solid rgba(14, 165, 233, 0.15)',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#fafafa',
|
||||
background: 'rgba(14, 165, 233, 0.03)',
|
||||
}}>
|
||||
<button
|
||||
onClick={wizard.prevStep}
|
||||
disabled={wizard.isFirstStep}
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
backgroundColor: wizard.isFirstStep ? '#f0f0f0' : 'white',
|
||||
color: wizard.isFirstStep ? '#999' : '#333',
|
||||
border: wizard.isFirstStep ? '1px solid #e0e0e0' : '1px solid #ddd',
|
||||
borderRadius: '6px',
|
||||
padding: '10px 24px',
|
||||
background: wizard.isFirstStep ? 'rgba(100, 116, 139, 0.1)' : 'rgba(255, 255, 255, 0.8)',
|
||||
color: wizard.isFirstStep ? '#94a3b8' : '#0c4a6e',
|
||||
border: `1px solid ${wizard.isFirstStep ? 'rgba(100, 116, 139, 0.2)' : 'rgba(14, 165, 233, 0.2)'}`,
|
||||
borderRadius: '10px',
|
||||
cursor: wizard.isFirstStep ? 'not-allowed' : 'pointer',
|
||||
fontSize: '14px',
|
||||
fontSize: '13px',
|
||||
fontWeight: '500',
|
||||
transition: 'all 0.2s ease',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (!wizard.isFirstStep) {
|
||||
e.currentTarget.style.background = 'rgba(255, 255, 255, 1)';
|
||||
e.currentTarget.style.transform = 'translateX(-4px)';
|
||||
e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.4)';
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (!wizard.isFirstStep) {
|
||||
e.currentTarget.style.background = 'rgba(255, 255, 255, 0.8)';
|
||||
e.currentTarget.style.transform = 'translateX(0)';
|
||||
e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.2)';
|
||||
}
|
||||
}}
|
||||
>
|
||||
← Back
|
||||
@@ -194,16 +274,32 @@ export const ResearchWizard: React.FC<ResearchWizardProps> = ({
|
||||
disabled={!wizard.canGoNext()}
|
||||
style={{
|
||||
padding: '10px 24px',
|
||||
backgroundColor: wizard.canGoNext() ? '#1976d2' : '#e0e0e0',
|
||||
color: wizard.canGoNext() ? 'white' : '#999',
|
||||
border: 'none',
|
||||
borderRadius: '6px',
|
||||
background: wizard.canGoNext()
|
||||
? 'linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%)'
|
||||
: 'rgba(100, 116, 139, 0.2)',
|
||||
color: wizard.canGoNext() ? 'white' : '#94a3b8',
|
||||
border: wizard.canGoNext() ? 'none' : '1px solid rgba(100, 116, 139, 0.2)',
|
||||
borderRadius: '10px',
|
||||
cursor: wizard.canGoNext() ? 'pointer' : 'not-allowed',
|
||||
fontSize: '14px',
|
||||
fontSize: '13px',
|
||||
fontWeight: '600',
|
||||
transition: 'all 0.2s ease',
|
||||
boxShadow: wizard.canGoNext() ? '0 2px 8px rgba(14, 165, 233, 0.3)' : 'none',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
if (wizard.canGoNext()) {
|
||||
e.currentTarget.style.transform = 'translateX(4px)';
|
||||
e.currentTarget.style.boxShadow = '0 4px 12px rgba(14, 165, 233, 0.4)';
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
if (wizard.canGoNext()) {
|
||||
e.currentTarget.style.transform = 'translateX(0)';
|
||||
e.currentTarget.style.boxShadow = '0 2px 8px rgba(14, 165, 233, 0.3)';
|
||||
}
|
||||
}}
|
||||
>
|
||||
{wizard.isLastStep ? 'Finish' : 'Next →'}
|
||||
{wizard.isLastStep ? 'Finish' : 'Continue →'}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -3,7 +3,7 @@ import { WizardState, WizardStepProps } from '../types/research.types';
|
||||
import { ResearchMode, ResearchConfig, BlogResearchResponse } from '../../../services/blogWriterApi';
|
||||
|
||||
const WIZARD_STATE_KEY = 'alwrity_research_wizard_state';
|
||||
const MAX_STEPS = 4;
|
||||
const MAX_STEPS = 3; // Input (combined) -> Progress -> Results
|
||||
|
||||
const defaultState: WizardState = {
|
||||
currentStep: 1,
|
||||
@@ -88,11 +88,9 @@ export const useResearchWizard = (initialKeywords?: string[], initialIndustry?:
|
||||
case 1:
|
||||
return state.keywords.length > 0 && state.keywords.every(k => k.trim().length > 0);
|
||||
case 2:
|
||||
return true; // Mode selection always allowed
|
||||
return !!state.results; // Can proceed if we have results
|
||||
case 3:
|
||||
return false; // Progress can't be skipped
|
||||
case 4:
|
||||
return false; // Results can't be skipped
|
||||
return false; // Results is the last step
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
|
||||
571
frontend/src/components/Research/steps/ResearchInput.tsx
Normal file
571
frontend/src/components/Research/steps/ResearchInput.tsx
Normal file
@@ -0,0 +1,571 @@
|
||||
import React, { useRef, useState, useEffect } from 'react';
|
||||
import { WizardStepProps } from '../types/research.types';
|
||||
import { ResearchProvider } from '../../../services/blogWriterApi';
|
||||
|
||||
const industries = [
|
||||
'General',
|
||||
'Technology',
|
||||
'Business',
|
||||
'Marketing',
|
||||
'Finance',
|
||||
'Healthcare',
|
||||
'Education',
|
||||
'Real Estate',
|
||||
'Entertainment',
|
||||
'Food & Beverage',
|
||||
'Travel',
|
||||
'Fashion',
|
||||
'Sports',
|
||||
'Science',
|
||||
'Law',
|
||||
'Other',
|
||||
];
|
||||
|
||||
const researchModes = [
|
||||
{ value: 'basic', label: 'Basic - Quick insights' },
|
||||
{ value: 'comprehensive', label: 'Comprehensive - In-depth analysis' },
|
||||
{ value: 'targeted', label: 'Targeted - Specific focus' },
|
||||
];
|
||||
|
||||
const providers = [
|
||||
{ value: 'google', label: '🔍 Google Search' },
|
||||
{ value: 'exa', label: '🧠 Exa Neural Search' },
|
||||
];
|
||||
|
||||
const exaCategories = [
|
||||
{ value: '', label: 'All Categories' },
|
||||
{ value: 'company', label: 'Company Profiles' },
|
||||
{ value: 'research paper', label: 'Research Papers' },
|
||||
{ value: 'news', label: 'News Articles' },
|
||||
{ value: 'linkedin profile', label: 'LinkedIn Profiles' },
|
||||
{ value: 'github', label: 'GitHub Repos' },
|
||||
{ value: 'tweet', label: 'Tweets' },
|
||||
{ value: 'movie', label: 'Movies' },
|
||||
{ value: 'song', label: 'Songs' },
|
||||
{ value: 'personal site', label: 'Personal Sites' },
|
||||
{ value: 'pdf', label: 'PDF Documents' },
|
||||
{ value: 'financial report', label: 'Financial Reports' },
|
||||
];
|
||||
|
||||
const exaSearchTypes = [
|
||||
{ value: 'auto', label: 'Auto - Let AI decide' },
|
||||
{ value: 'keyword', label: 'Keyword - Precise matching' },
|
||||
{ value: 'neural', label: 'Neural - Semantic search' },
|
||||
];
|
||||
|
||||
// Dynamic placeholder examples showcasing research capabilities
|
||||
const placeholderExamples = [
|
||||
"AI-powered content marketing strategies for SaaS startups\n\nExplores:\n• Latest automation tools and platforms\n• ROI optimization techniques\n• Multi-channel campaign orchestration\n• Data-driven personalization strategies",
|
||||
"Sustainable supply chain management in manufacturing\n\nCovers:\n• Green logistics and carbon footprint reduction\n• Blockchain for transparency and traceability\n• Circular economy implementation frameworks\n• Real-time inventory optimization with AI",
|
||||
"Emerging trends in telemedicine and remote patient monitoring\n\nIncludes:\n• Wearable device integration and IoT sensors\n• HIPAA-compliant data transmission protocols\n• AI-assisted diagnostic accuracy improvements\n• Patient engagement and adherence strategies",
|
||||
"Cryptocurrency regulation and institutional adoption\n\nAnalyzes:\n• Global regulatory frameworks and compliance\n• Institutional investment trends (2024-2025)\n• DeFi integration with traditional finance\n• Risk management and security best practices",
|
||||
"Voice search optimization and conversational AI for e-commerce\n\nFeatures:\n• Natural language processing advancements\n• Smart speaker integration strategies\n• Voice-enabled checkout experiences\n• Personalization through voice analytics"
|
||||
];
|
||||
|
||||
export const ResearchInput: React.FC<WizardStepProps> = ({ state, onUpdate }) => {
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
const [currentPlaceholder, setCurrentPlaceholder] = useState(0);
|
||||
|
||||
// Rotate placeholder examples every 4 seconds
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setCurrentPlaceholder((prev) => (prev + 1) % placeholderExamples.length);
|
||||
}, 4000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
const handleKeywordsChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||||
const value = e.target.value;
|
||||
const keywords = value.split(',').map(k => k.trim()).filter(Boolean);
|
||||
onUpdate({ keywords });
|
||||
};
|
||||
|
||||
const handleIndustryChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
onUpdate({ industry: e.target.value });
|
||||
};
|
||||
|
||||
const handleAudienceChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
onUpdate({ targetAudience: e.target.value });
|
||||
};
|
||||
|
||||
const handleModeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
const mode = e.target.value as any;
|
||||
onUpdate({ researchMode: mode });
|
||||
};
|
||||
|
||||
const handleProviderChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
const provider = e.target.value as ResearchProvider;
|
||||
onUpdate({ config: { ...state.config, provider } });
|
||||
};
|
||||
|
||||
const handleExaCategoryChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
const value = e.target.value;
|
||||
onUpdate({ config: { ...state.config, exa_category: value || undefined } });
|
||||
};
|
||||
|
||||
const handleExaSearchTypeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
const value = e.target.value as 'auto' | 'keyword' | 'neural';
|
||||
onUpdate({ config: { ...state.config, exa_search_type: value } });
|
||||
};
|
||||
|
||||
const handleIncludeDomainsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value;
|
||||
const domains = value.split(',').map(d => d.trim()).filter(Boolean);
|
||||
onUpdate({ config: { ...state.config, exa_include_domains: domains } });
|
||||
};
|
||||
|
||||
const handleExcludeDomainsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value;
|
||||
const domains = value.split(',').map(d => d.trim()).filter(Boolean);
|
||||
onUpdate({ config: { ...state.config, exa_exclude_domains: domains } });
|
||||
};
|
||||
|
||||
const handleFileUpload = () => {
|
||||
fileInputRef.current?.click();
|
||||
};
|
||||
|
||||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) {
|
||||
console.log('File selected:', file.name);
|
||||
// TODO: Implement file upload logic
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: '100%' }}>
|
||||
{/* Main Input Area */}
|
||||
<div style={{
|
||||
background: 'rgba(255, 255, 255, 0.6)',
|
||||
backdropFilter: 'blur(8px)',
|
||||
border: '2px solid rgba(14, 165, 233, 0.2)',
|
||||
borderRadius: '16px',
|
||||
padding: '20px',
|
||||
marginBottom: '20px',
|
||||
transition: 'all 0.3s ease',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.4)';
|
||||
e.currentTarget.style.boxShadow = '0 4px 20px rgba(14, 165, 233, 0.12)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.2)';
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
}}
|
||||
>
|
||||
<label style={{
|
||||
marginBottom: '12px',
|
||||
fontSize: '15px',
|
||||
fontWeight: '600',
|
||||
color: '#0c4a6e',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
}}>
|
||||
<span style={{
|
||||
fontSize: '20px',
|
||||
}}>🔍</span>
|
||||
Research Topic & Keywords
|
||||
</label>
|
||||
|
||||
<div style={{ position: 'relative' }}>
|
||||
<textarea
|
||||
value={state.keywords.join(', ')}
|
||||
onChange={handleKeywordsChange}
|
||||
placeholder={placeholderExamples[currentPlaceholder]}
|
||||
style={{
|
||||
width: '100%',
|
||||
minHeight: '160px',
|
||||
padding: '16px',
|
||||
fontSize: '14px',
|
||||
lineHeight: '1.6',
|
||||
border: '1px solid rgba(14, 165, 233, 0.15)',
|
||||
borderRadius: '12px',
|
||||
background: 'rgba(255, 255, 255, 0.9)',
|
||||
color: '#0f172a',
|
||||
resize: 'vertical',
|
||||
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
||||
transition: 'all 0.2s ease',
|
||||
boxShadow: 'inset 0 1px 3px rgba(14, 165, 233, 0.05)',
|
||||
}}
|
||||
onFocus={(e) => {
|
||||
e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.5)';
|
||||
e.currentTarget.style.boxShadow = 'inset 0 1px 3px rgba(14, 165, 233, 0.05), 0 0 0 3px rgba(14, 165, 233, 0.1)';
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.15)';
|
||||
e.currentTarget.style.boxShadow = 'inset 0 1px 3px rgba(14, 165, 233, 0.05)';
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* File Upload Button */}
|
||||
<button
|
||||
onClick={handleFileUpload}
|
||||
type="button"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
bottom: '12px',
|
||||
right: '12px',
|
||||
padding: '8px 12px',
|
||||
background: 'rgba(14, 165, 233, 0.1)',
|
||||
border: '1px solid rgba(14, 165, 233, 0.2)',
|
||||
borderRadius: '8px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '12px',
|
||||
fontWeight: '500',
|
||||
color: '#0369a1',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
transition: 'all 0.2s ease',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = 'rgba(14, 165, 233, 0.15)';
|
||||
e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.3)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = 'rgba(14, 165, 233, 0.1)';
|
||||
e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.2)';
|
||||
}}
|
||||
>
|
||||
📎 Upload Document
|
||||
</button>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
onChange={handleFileChange}
|
||||
accept=".txt,.doc,.docx,.pdf"
|
||||
style={{ display: 'none' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
marginTop: '10px',
|
||||
fontSize: '12px',
|
||||
color: '#64748b',
|
||||
lineHeight: '1.5',
|
||||
}}>
|
||||
💡 Tip: Describe your research topic in detail. Include specific keywords, questions, or aspects you want to explore. The AI will find relevant sources and insights.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Configuration Options */}
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
|
||||
gap: '16px',
|
||||
marginBottom: '20px',
|
||||
}}>
|
||||
{/* Industry */}
|
||||
<div>
|
||||
<label style={{
|
||||
display: 'block',
|
||||
marginBottom: '8px',
|
||||
fontSize: '13px',
|
||||
fontWeight: '600',
|
||||
color: '#0c4a6e',
|
||||
}}>
|
||||
Industry
|
||||
</label>
|
||||
<select
|
||||
value={state.industry}
|
||||
onChange={handleIndustryChange}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '10px 12px',
|
||||
fontSize: '13px',
|
||||
border: '1px solid rgba(14, 165, 233, 0.2)',
|
||||
borderRadius: '10px',
|
||||
background: 'rgba(255, 255, 255, 0.9)',
|
||||
color: '#0f172a',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.2s ease',
|
||||
}}
|
||||
onFocus={(e) => {
|
||||
e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.5)';
|
||||
e.currentTarget.style.boxShadow = '0 0 0 3px rgba(14, 165, 233, 0.1)';
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.2)';
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
}}
|
||||
>
|
||||
{industries.map(ind => (
|
||||
<option key={ind} value={ind}>{ind}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Research Mode */}
|
||||
<div>
|
||||
<label style={{
|
||||
display: 'block',
|
||||
marginBottom: '8px',
|
||||
fontSize: '13px',
|
||||
fontWeight: '600',
|
||||
color: '#0c4a6e',
|
||||
}}>
|
||||
Research Depth
|
||||
</label>
|
||||
<select
|
||||
value={state.researchMode}
|
||||
onChange={handleModeChange}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '10px 12px',
|
||||
fontSize: '13px',
|
||||
border: '1px solid rgba(14, 165, 233, 0.2)',
|
||||
borderRadius: '10px',
|
||||
background: 'rgba(255, 255, 255, 0.9)',
|
||||
color: '#0f172a',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.2s ease',
|
||||
}}
|
||||
onFocus={(e) => {
|
||||
e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.5)';
|
||||
e.currentTarget.style.boxShadow = '0 0 0 3px rgba(14, 165, 233, 0.1)';
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.2)';
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
}}
|
||||
>
|
||||
{researchModes.map(mode => (
|
||||
<option key={mode.value} value={mode.value}>{mode.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Provider (only for Comprehensive/Targeted) */}
|
||||
{state.researchMode !== 'basic' && (
|
||||
<div>
|
||||
<label style={{
|
||||
display: 'block',
|
||||
marginBottom: '8px',
|
||||
fontSize: '13px',
|
||||
fontWeight: '600',
|
||||
color: '#0c4a6e',
|
||||
}}>
|
||||
Search Provider
|
||||
</label>
|
||||
<select
|
||||
value={state.config.provider}
|
||||
onChange={handleProviderChange}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '10px 12px',
|
||||
fontSize: '13px',
|
||||
border: '1px solid rgba(14, 165, 233, 0.2)',
|
||||
borderRadius: '10px',
|
||||
background: 'rgba(255, 255, 255, 0.9)',
|
||||
color: '#0f172a',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.2s ease',
|
||||
}}
|
||||
onFocus={(e) => {
|
||||
e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.5)';
|
||||
e.currentTarget.style.boxShadow = '0 0 0 3px rgba(14, 165, 233, 0.1)';
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.2)';
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
}}
|
||||
>
|
||||
{providers.map(prov => (
|
||||
<option key={prov.value} value={prov.value}>{prov.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Exa-Specific Options */}
|
||||
{state.config.provider === 'exa' && state.researchMode !== 'basic' && (
|
||||
<div style={{
|
||||
background: 'linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%)',
|
||||
border: '1px solid rgba(139, 92, 246, 0.2)',
|
||||
borderRadius: '14px',
|
||||
padding: '16px',
|
||||
marginBottom: '20px',
|
||||
}}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
marginBottom: '14px',
|
||||
}}>
|
||||
<span style={{ fontSize: '18px' }}>🧠</span>
|
||||
<strong style={{ color: '#6b21a8', fontSize: '13px' }}>Exa Neural Search Options</strong>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
|
||||
gap: '12px',
|
||||
marginBottom: '12px',
|
||||
}}>
|
||||
{/* Exa Category */}
|
||||
<div>
|
||||
<label style={{
|
||||
display: 'block',
|
||||
marginBottom: '6px',
|
||||
fontSize: '12px',
|
||||
fontWeight: '600',
|
||||
color: '#6b21a8',
|
||||
}}>
|
||||
Content Category
|
||||
</label>
|
||||
<select
|
||||
value={state.config.exa_category || ''}
|
||||
onChange={handleExaCategoryChange}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '8px 10px',
|
||||
fontSize: '12px',
|
||||
border: '1px solid rgba(139, 92, 246, 0.2)',
|
||||
borderRadius: '8px',
|
||||
background: 'rgba(255, 255, 255, 0.9)',
|
||||
color: '#0f172a',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
{exaCategories.map(cat => (
|
||||
<option key={cat.value} value={cat.value}>{cat.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Exa Search Type */}
|
||||
<div>
|
||||
<label style={{
|
||||
display: 'block',
|
||||
marginBottom: '6px',
|
||||
fontSize: '12px',
|
||||
fontWeight: '600',
|
||||
color: '#6b21a8',
|
||||
}}>
|
||||
Search Algorithm
|
||||
</label>
|
||||
<select
|
||||
value={state.config.exa_search_type || 'auto'}
|
||||
onChange={handleExaSearchTypeChange}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '8px 10px',
|
||||
fontSize: '12px',
|
||||
border: '1px solid rgba(139, 92, 246, 0.2)',
|
||||
borderRadius: '8px',
|
||||
background: 'rgba(255, 255, 255, 0.9)',
|
||||
color: '#0f172a',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
{exaSearchTypes.map(type => (
|
||||
<option key={type.value} value={type.value}>{type.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Domain Filters */}
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr 1fr',
|
||||
gap: '12px',
|
||||
}}>
|
||||
<div>
|
||||
<label style={{
|
||||
display: 'block',
|
||||
marginBottom: '6px',
|
||||
fontSize: '12px',
|
||||
fontWeight: '600',
|
||||
color: '#6b21a8',
|
||||
}}>
|
||||
Include Domains (optional)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={state.config.exa_include_domains?.join(', ') || ''}
|
||||
onChange={handleIncludeDomainsChange}
|
||||
placeholder="e.g., nature.com, arxiv.org"
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '8px 10px',
|
||||
fontSize: '12px',
|
||||
border: '1px solid rgba(139, 92, 246, 0.2)',
|
||||
borderRadius: '8px',
|
||||
background: 'rgba(255, 255, 255, 0.9)',
|
||||
color: '#0f172a',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label style={{
|
||||
display: 'block',
|
||||
marginBottom: '6px',
|
||||
fontSize: '12px',
|
||||
fontWeight: '600',
|
||||
color: '#6b21a8',
|
||||
}}>
|
||||
Exclude Domains (optional)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={state.config.exa_exclude_domains?.join(', ') || ''}
|
||||
onChange={handleExcludeDomainsChange}
|
||||
placeholder="e.g., spam.com, ads.com"
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '8px 10px',
|
||||
fontSize: '12px',
|
||||
border: '1px solid rgba(139, 92, 246, 0.2)',
|
||||
borderRadius: '8px',
|
||||
background: 'rgba(255, 255, 255, 0.9)',
|
||||
color: '#0f172a',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Target Audience (Optional) */}
|
||||
<div>
|
||||
<label style={{
|
||||
display: 'block',
|
||||
marginBottom: '8px',
|
||||
fontSize: '13px',
|
||||
fontWeight: '600',
|
||||
color: '#0c4a6e',
|
||||
}}>
|
||||
Target Audience (Optional)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={state.targetAudience}
|
||||
onChange={handleAudienceChange}
|
||||
placeholder="e.g., Marketing professionals, Tech enthusiasts, Business owners"
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '10px 12px',
|
||||
fontSize: '13px',
|
||||
border: '1px solid rgba(14, 165, 233, 0.2)',
|
||||
borderRadius: '10px',
|
||||
background: 'rgba(255, 255, 255, 0.9)',
|
||||
color: '#0f172a',
|
||||
transition: 'all 0.2s ease',
|
||||
}}
|
||||
onFocus={(e) => {
|
||||
e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.5)';
|
||||
e.currentTarget.style.boxShadow = '0 0 0 3px rgba(14, 165, 233, 0.1)';
|
||||
}}
|
||||
onBlur={(e) => {
|
||||
e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.2)';
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,11 +1,20 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import { WizardStepProps } from '../types/research.types';
|
||||
import { useResearchExecution } from '../hooks/useResearchExecution';
|
||||
|
||||
export const StepProgress: React.FC<WizardStepProps> = ({ state, onNext, onUpdate }) => {
|
||||
const { executeResearch, stopExecution, isExecuting, error, progressMessages, currentStatus } = useResearchExecution();
|
||||
export const StepProgress: React.FC<WizardStepProps> = ({ state, onNext, onUpdate, execution }) => {
|
||||
const { executeResearch, stopExecution, isExecuting, error, progressMessages, currentStatus } = execution || {
|
||||
executeResearch: async () => null,
|
||||
stopExecution: () => {},
|
||||
isExecuting: false,
|
||||
error: 'No execution provided',
|
||||
progressMessages: [],
|
||||
currentStatus: 'idle'
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// Only start research if execution is available
|
||||
if (!execution) return;
|
||||
|
||||
// Start research when this step is reached
|
||||
const startResearch = async () => {
|
||||
const taskId = await executeResearch(state);
|
||||
@@ -22,18 +31,19 @@ export const StepProgress: React.FC<WizardStepProps> = ({ state, onNext, onUpdat
|
||||
stopExecution();
|
||||
}
|
||||
};
|
||||
}, []); // Run once on mount
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []); // Run once on mount - stable references
|
||||
|
||||
// Move to next step when research completes
|
||||
useEffect(() => {
|
||||
if (!isExecuting && progressMessages.length > 0) {
|
||||
// Small delay to show final message
|
||||
const timer = setTimeout(() => {
|
||||
onNext();
|
||||
}, 1000);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [isExecuting, progressMessages.length, onNext]);
|
||||
// Note: Navigation to next step is handled by ResearchWizard when results are received
|
||||
|
||||
// Handle missing execution gracefully
|
||||
if (!execution) {
|
||||
return (
|
||||
<div style={{ padding: '24px', textAlign: 'center' }}>
|
||||
<p style={{ color: '#666' }}>Loading execution...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const getStatusIcon = () => {
|
||||
if (error) return '❌';
|
||||
@@ -48,11 +58,14 @@ export const StepProgress: React.FC<WizardStepProps> = ({ state, onNext, onUpdat
|
||||
return '#1976d2';
|
||||
};
|
||||
|
||||
const providerName = state.config.provider === 'exa' ? 'Exa Neural' : 'Google Search';
|
||||
const modeName = state.researchMode === 'basic' ? 'Basic' : state.researchMode === 'comprehensive' ? 'Comprehensive' : 'Targeted';
|
||||
|
||||
return (
|
||||
<div style={{ padding: '24px', maxWidth: '800px', margin: '0 auto' }}>
|
||||
<h2 style={{ marginBottom: '8px', color: '#333' }}>Researching...</h2>
|
||||
<p style={{ marginBottom: '24px', color: '#666', fontSize: '15px' }}>
|
||||
Gathering insights from Google Search grounding
|
||||
{modeName} research with {providerName}
|
||||
</p>
|
||||
|
||||
{/* Status Display */}
|
||||
|
||||
@@ -3,7 +3,7 @@ import { WizardStepProps } from '../types/research.types';
|
||||
import { ResearchResults } from '../../BlogWriter/ResearchResults';
|
||||
import { BlogResearchResponse } from '../../../services/blogWriterApi';
|
||||
|
||||
export const StepResults: React.FC<WizardStepProps> = ({ state, onBack }) => {
|
||||
export const StepResults: React.FC<WizardStepProps> = ({ state, onUpdate, onBack }) => {
|
||||
if (!state.results) {
|
||||
return (
|
||||
<div style={{ padding: '24px', textAlign: 'center' }}>
|
||||
@@ -23,6 +23,14 @@ export const StepResults: React.FC<WizardStepProps> = ({ state, onBack }) => {
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const handleStartNew = () => {
|
||||
// Reset to step 1 and clear results
|
||||
onUpdate({
|
||||
currentStep: 1,
|
||||
results: null
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: '1200px', margin: '0 auto', padding: '24px' }}>
|
||||
<div style={{
|
||||
@@ -36,6 +44,21 @@ export const StepResults: React.FC<WizardStepProps> = ({ state, onBack }) => {
|
||||
<h2 style={{ margin: 0, color: '#333' }}>Research Results</h2>
|
||||
|
||||
<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
|
||||
<button
|
||||
onClick={onBack}
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
backgroundColor: '#f5f5f5',
|
||||
color: '#333',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '6px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '14px',
|
||||
}}
|
||||
>
|
||||
← Back
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleExport}
|
||||
style={{
|
||||
@@ -55,7 +78,7 @@ export const StepResults: React.FC<WizardStepProps> = ({ state, onBack }) => {
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={onBack}
|
||||
onClick={handleStartNew}
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
backgroundColor: '#f5f5f5',
|
||||
@@ -66,7 +89,7 @@ export const StepResults: React.FC<WizardStepProps> = ({ state, onBack }) => {
|
||||
fontSize: '14px',
|
||||
}}
|
||||
>
|
||||
← Start New Research
|
||||
🔄 Start New Research
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -10,11 +10,22 @@ export interface WizardState {
|
||||
results: BlogResearchResponse | null;
|
||||
}
|
||||
|
||||
export interface ResearchExecution {
|
||||
executeResearch: (state: WizardState) => Promise<string | null>;
|
||||
stopExecution: () => void;
|
||||
isExecuting: boolean;
|
||||
error: string | null;
|
||||
progressMessages: Array<{ timestamp: string; message: string }>;
|
||||
currentStatus: string;
|
||||
result: any;
|
||||
}
|
||||
|
||||
export interface WizardStepProps {
|
||||
state: WizardState;
|
||||
onUpdate: (updates: Partial<WizardState>) => void;
|
||||
onNext: () => void;
|
||||
onBack: () => void;
|
||||
execution?: ResearchExecution;
|
||||
}
|
||||
|
||||
export interface ResearchWizardProps {
|
||||
|
||||
@@ -26,8 +26,22 @@ const SEOCopilotKitProvider: React.FC<SEOCopilotKitProviderProps> = ({
|
||||
} = useSEOCopilotStore();
|
||||
const { analysisData } = useSEOCopilotStore();
|
||||
|
||||
// Get the CopilotKit API key from environment variables
|
||||
const publicApiKey = process.env.REACT_APP_COPILOTKIT_API_KEY;
|
||||
// Get the CopilotKit API key from the same sources as App.tsx
|
||||
// Check localStorage first, then fall back to environment variable
|
||||
const publicApiKey = useMemo(() => {
|
||||
const savedKey = typeof window !== 'undefined'
|
||||
? localStorage.getItem('copilotkit_api_key')
|
||||
: null;
|
||||
const envKey = process.env.REACT_APP_COPILOTKIT_API_KEY || '';
|
||||
const key = (savedKey || envKey).trim();
|
||||
|
||||
// Validate key format if present
|
||||
if (key && !key.startsWith('ck_pub_')) {
|
||||
console.warn('SEOCopilotKitProvider: CopilotKit API key format invalid - must start with ck_pub_');
|
||||
}
|
||||
|
||||
return key;
|
||||
}, []);
|
||||
|
||||
// Derive a friendly site/brand name from the URL for personalization
|
||||
const domainRootName = useMemo(() => {
|
||||
|
||||
@@ -91,12 +91,31 @@ export const CopilotKitHealthProvider: React.FC<CopilotKitHealthProviderProps> =
|
||||
setState((prev) => ({ ...prev, isChecking: true }));
|
||||
|
||||
try {
|
||||
// Get CopilotKit API key from the same sources as App.tsx
|
||||
// Check localStorage first, then fall back to environment variable
|
||||
const savedKey = typeof window !== 'undefined'
|
||||
? localStorage.getItem('copilotkit_api_key')
|
||||
: null;
|
||||
const apiKey = savedKey || process.env.REACT_APP_COPILOTKIT_API_KEY || '';
|
||||
|
||||
// If no API key is available, mark as unhealthy and skip the check
|
||||
if (!apiKey || !apiKey.trim()) {
|
||||
markUnhealthy('CopilotKit API key not configured');
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate key format (must start with ck_pub_)
|
||||
if (!apiKey.startsWith('ck_pub_')) {
|
||||
markUnhealthy('CopilotKit API key format invalid (must start with ck_pub_)');
|
||||
return;
|
||||
}
|
||||
|
||||
// Try to check CopilotKit status endpoint
|
||||
// This is a lightweight check that doesn't require full CopilotKit initialization
|
||||
const response = await fetch('https://api.cloud.copilotkit.ai/ciu', {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'x-copilotcloud-public-api-key': process.env.REACT_APP_COPILOTKIT_PUBLIC_API_KEY || '',
|
||||
'x-copilotcloud-public-api-key': apiKey.trim(),
|
||||
},
|
||||
// Use a short timeout to avoid blocking
|
||||
signal: AbortSignal.timeout(3000),
|
||||
@@ -105,7 +124,12 @@ export const CopilotKitHealthProvider: React.FC<CopilotKitHealthProviderProps> =
|
||||
if (response.ok) {
|
||||
markHealthy();
|
||||
} else {
|
||||
markUnhealthy(`CopilotKit status check failed: ${response.status}`);
|
||||
// Provide more specific error messages based on status code
|
||||
if (response.status === 401) {
|
||||
markUnhealthy('CopilotKit API key is invalid or unauthorized');
|
||||
} else {
|
||||
markUnhealthy(`CopilotKit status check failed: ${response.status}`);
|
||||
}
|
||||
}
|
||||
} catch (error: any) {
|
||||
// Handle various error types
|
||||
|
||||
@@ -7,16 +7,22 @@ const samplePresets = [
|
||||
name: 'AI Marketing Tools',
|
||||
keywords: 'AI in marketing, automation tools, customer engagement',
|
||||
industry: 'Technology',
|
||||
icon: '🤖',
|
||||
gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
},
|
||||
{
|
||||
name: 'Small Business SEO',
|
||||
keywords: 'local SEO, small business, Google My Business',
|
||||
industry: 'Marketing',
|
||||
icon: '📈',
|
||||
gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
|
||||
},
|
||||
{
|
||||
name: 'Content Strategy',
|
||||
keywords: 'content planning, editorial calendar, content creation',
|
||||
industry: 'Marketing',
|
||||
icon: '✍️',
|
||||
gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -43,65 +49,218 @@ export const ResearchTest: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ minHeight: '100vh', backgroundColor: '#f5f5f5' }}>
|
||||
<div style={{
|
||||
minHeight: '100vh',
|
||||
background: 'linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%)',
|
||||
position: 'relative',
|
||||
overflow: 'hidden'
|
||||
}}>
|
||||
{/* Animated Background Elements */}
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: '10%',
|
||||
left: '5%',
|
||||
width: '400px',
|
||||
height: '400px',
|
||||
background: 'radial-gradient(circle, rgba(14,165,233,0.08) 0%, transparent 70%)',
|
||||
borderRadius: '50%',
|
||||
filter: 'blur(40px)',
|
||||
animation: 'float 20s ease-in-out infinite',
|
||||
}} />
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
bottom: '10%',
|
||||
right: '5%',
|
||||
width: '300px',
|
||||
height: '300px',
|
||||
background: 'radial-gradient(circle, rgba(56,189,248,0.08) 0%, transparent 70%)',
|
||||
borderRadius: '50%',
|
||||
filter: 'blur(40px)',
|
||||
animation: 'float 15s ease-in-out infinite reverse',
|
||||
}} />
|
||||
|
||||
<style>{`
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translate(0, 0); }
|
||||
50% { transform: translate(20px, 20px); }
|
||||
}
|
||||
@keyframes shimmer {
|
||||
0% { background-position: -1000px 0; }
|
||||
100% { background-position: 1000px 0; }
|
||||
}
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.card-hover {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.card-hover:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
`}</style>
|
||||
{/* Header */}
|
||||
<div style={{
|
||||
backgroundColor: '#1976d2',
|
||||
color: 'white',
|
||||
padding: '20px',
|
||||
background: 'rgba(255, 255, 255, 0.7)',
|
||||
backdropFilter: 'blur(12px)',
|
||||
borderBottom: '1px solid rgba(14, 165, 233, 0.15)',
|
||||
padding: '16px 24px',
|
||||
marginBottom: '20px',
|
||||
position: 'relative',
|
||||
zIndex: 10,
|
||||
boxShadow: '0 1px 3px rgba(14, 165, 233, 0.1)',
|
||||
}}>
|
||||
<div style={{ maxWidth: '1400px', margin: '0 auto' }}>
|
||||
<h1 style={{ margin: 0, fontSize: '28px' }}>🔬 Research Component Test Page</h1>
|
||||
<p style={{ margin: '8px 0 0 0', fontSize: '14px', opacity: 0.9 }}>
|
||||
Test the modular research wizard component
|
||||
</p>
|
||||
<div style={{ maxWidth: '1400px', margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
|
||||
<div style={{
|
||||
width: '48px',
|
||||
height: '48px',
|
||||
background: 'linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%)',
|
||||
borderRadius: '12px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '24px',
|
||||
boxShadow: '0 4px 12px rgba(14, 165, 233, 0.25)',
|
||||
}}>
|
||||
🔬
|
||||
</div>
|
||||
<div>
|
||||
<h1 style={{
|
||||
margin: 0,
|
||||
fontSize: '24px',
|
||||
fontWeight: '700',
|
||||
color: '#0c4a6e',
|
||||
letterSpacing: '-0.01em',
|
||||
}}>
|
||||
AI-Powered Research Lab
|
||||
</h1>
|
||||
<p style={{
|
||||
margin: '2px 0 0 0',
|
||||
fontSize: '13px',
|
||||
color: '#0369a1',
|
||||
fontWeight: '400',
|
||||
}}>
|
||||
Enterprise-grade research intelligence at your fingertips
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status Badge - Moved to Header */}
|
||||
<div style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
padding: '8px 16px',
|
||||
background: 'rgba(34, 197, 94, 0.1)',
|
||||
border: '1px solid rgba(34, 197, 94, 0.25)',
|
||||
borderRadius: '20px',
|
||||
fontSize: '12px',
|
||||
color: '#16a34a',
|
||||
fontWeight: '600',
|
||||
}}>
|
||||
<span style={{
|
||||
width: '8px',
|
||||
height: '8px',
|
||||
borderRadius: '50%',
|
||||
background: '#22c55e',
|
||||
boxShadow: '0 0 8px rgba(34, 197, 94, 0.6)',
|
||||
animation: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||||
}} />
|
||||
System Online • AI Models Ready
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ maxWidth: '1400px', margin: '0 auto', padding: '0 20px', display: 'flex', gap: '20px', flexWrap: 'wrap' }}>
|
||||
<div style={{ maxWidth: '1400px', margin: '0 auto', padding: '0 24px', display: 'flex', gap: '20px', flexWrap: 'wrap', position: 'relative', zIndex: 10 }}>
|
||||
{/* Left Panel - Controls */}
|
||||
<div style={{ flex: '1 1 300px', minWidth: '300px' }}>
|
||||
<div style={{
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '8px',
|
||||
<div style={{ flex: '1 1 280px', minWidth: '280px' }}>
|
||||
{/* Presets Card */}
|
||||
<div className="card-hover" style={{
|
||||
background: 'rgba(255, 255, 255, 0.8)',
|
||||
backdropFilter: 'blur(12px)',
|
||||
border: '1px solid rgba(14, 165, 233, 0.2)',
|
||||
borderRadius: '16px',
|
||||
padding: '20px',
|
||||
marginBottom: '20px',
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
|
||||
boxShadow: '0 4px 12px rgba(14, 165, 233, 0.08)',
|
||||
animation: 'fadeInUp 0.6s ease-out',
|
||||
}}>
|
||||
<h3 style={{ margin: '0 0 16px 0', color: '#333', fontSize: '18px' }}>
|
||||
🎯 Quick Presets
|
||||
</h3>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '16px' }}>
|
||||
<div style={{
|
||||
width: '36px',
|
||||
height: '36px',
|
||||
background: 'linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%)',
|
||||
borderRadius: '10px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '18px',
|
||||
}}>
|
||||
🎯
|
||||
</div>
|
||||
<h3 style={{ margin: 0, color: '#0c4a6e', fontSize: '18px', fontWeight: '600' }}>
|
||||
Quick Start Presets
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
|
||||
{samplePresets.map((preset, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
onClick={() => handlePresetClick(preset)}
|
||||
className="card-hover"
|
||||
style={{
|
||||
padding: '12px',
|
||||
backgroundColor: '#f0f7ff',
|
||||
border: '1px solid #b3d9ff',
|
||||
borderRadius: '6px',
|
||||
padding: '14px',
|
||||
background: 'rgba(255, 255, 255, 0.9)',
|
||||
border: '1px solid rgba(14, 165, 233, 0.2)',
|
||||
borderRadius: '12px',
|
||||
cursor: 'pointer',
|
||||
textAlign: 'left',
|
||||
fontSize: '14px',
|
||||
transition: 'all 0.2s ease',
|
||||
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.backgroundColor = '#e3f2fd';
|
||||
e.currentTarget.style.borderColor = '#90caf9';
|
||||
e.currentTarget.style.transform = 'translateX(4px)';
|
||||
e.currentTarget.style.boxShadow = '0 4px 12px rgba(14, 165, 233, 0.2)';
|
||||
e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.4)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.backgroundColor = '#f0f7ff';
|
||||
e.currentTarget.style.borderColor = '#b3d9ff';
|
||||
e.currentTarget.style.transform = 'translateX(0)';
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
e.currentTarget.style.borderColor = 'rgba(14, 165, 233, 0.2)';
|
||||
}}
|
||||
>
|
||||
<div style={{ fontWeight: '600', color: '#1976d2', marginBottom: '4px' }}>
|
||||
{preset.name}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '6px' }}>
|
||||
<span style={{ fontSize: '20px' }}>{preset.icon}</span>
|
||||
<div style={{ fontWeight: '600', color: '#0c4a6e', fontSize: '14px' }}>
|
||||
{preset.name}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ fontSize: '12px', color: '#666' }}>
|
||||
<div style={{ fontSize: '11px', color: '#64748b', lineHeight: '1.5' }}>
|
||||
{preset.keywords}
|
||||
</div>
|
||||
<div style={{
|
||||
marginTop: '6px',
|
||||
display: 'inline-block',
|
||||
padding: '3px 10px',
|
||||
background: 'rgba(14, 165, 233, 0.1)',
|
||||
borderRadius: '10px',
|
||||
fontSize: '10px',
|
||||
color: '#0369a1',
|
||||
fontWeight: '600',
|
||||
}}>
|
||||
{preset.industry}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
@@ -110,52 +269,99 @@ export const ResearchTest: React.FC = () => {
|
||||
onClick={handleReset}
|
||||
style={{
|
||||
marginTop: '12px',
|
||||
padding: '8px 16px',
|
||||
backgroundColor: '#f5f5f5',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '6px',
|
||||
padding: '10px 16px',
|
||||
background: 'rgba(239, 68, 68, 0.1)',
|
||||
border: '1px solid rgba(239, 68, 68, 0.25)',
|
||||
borderRadius: '10px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '13px',
|
||||
width: '100%',
|
||||
color: '#dc2626',
|
||||
fontWeight: '500',
|
||||
transition: 'all 0.2s ease',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = 'rgba(239, 68, 68, 0.15)';
|
||||
e.currentTarget.style.borderColor = 'rgba(239, 68, 68, 0.4)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = 'rgba(239, 68, 68, 0.1)';
|
||||
e.currentTarget.style.borderColor = 'rgba(239, 68, 68, 0.25)';
|
||||
}}
|
||||
>
|
||||
↻ Reset Test
|
||||
↻ Reset Research
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Debug Panel */}
|
||||
<div style={{
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '8px',
|
||||
<div className="card-hover" style={{
|
||||
background: 'rgba(255, 255, 255, 0.8)',
|
||||
backdropFilter: 'blur(12px)',
|
||||
border: '1px solid rgba(14, 165, 233, 0.2)',
|
||||
borderRadius: '16px',
|
||||
padding: '20px',
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
|
||||
boxShadow: '0 4px 12px rgba(14, 165, 233, 0.08)',
|
||||
animation: 'fadeInUp 0.8s ease-out',
|
||||
}}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
|
||||
<h3 style={{ margin: 0, color: '#333', fontSize: '18px' }}>
|
||||
🐛 Debug Panel
|
||||
</h3>
|
||||
<label style={{ cursor: 'pointer', fontSize: '14px' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||||
<div style={{
|
||||
width: '36px',
|
||||
height: '36px',
|
||||
background: 'linear-gradient(135deg, #f59e0b 0%, #f97316 100%)',
|
||||
borderRadius: '10px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '18px',
|
||||
}}>
|
||||
🐛
|
||||
</div>
|
||||
<h3 style={{ margin: 0, color: '#0c4a6e', fontSize: '18px', fontWeight: '600' }}>
|
||||
Debug Console
|
||||
</h3>
|
||||
</div>
|
||||
<label style={{
|
||||
cursor: 'pointer',
|
||||
fontSize: '12px',
|
||||
color: '#64748b',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
}}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={showDebug}
|
||||
onChange={(e) => setShowDebug(e.target.checked)}
|
||||
style={{ marginRight: '6px' }}
|
||||
style={{
|
||||
marginRight: '0',
|
||||
width: '14px',
|
||||
height: '14px',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
/>
|
||||
Show Debug
|
||||
Show Data
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{showDebug && (
|
||||
<div style={{
|
||||
backgroundColor: '#f5f5f5',
|
||||
borderRadius: '4px',
|
||||
background: 'rgba(15, 23, 42, 0.05)',
|
||||
borderRadius: '10px',
|
||||
padding: '12px',
|
||||
fontSize: '12px',
|
||||
fontFamily: 'monospace',
|
||||
maxHeight: '400px',
|
||||
fontSize: '11px',
|
||||
fontFamily: "'Fira Code', 'Monaco', monospace",
|
||||
maxHeight: '350px',
|
||||
overflow: 'auto',
|
||||
border: '1px solid rgba(14, 165, 233, 0.1)',
|
||||
}}>
|
||||
<pre style={{ margin: 0, whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
|
||||
<pre style={{
|
||||
margin: 0,
|
||||
whiteSpace: 'pre-wrap',
|
||||
wordBreak: 'break-word',
|
||||
color: '#475569',
|
||||
lineHeight: '1.6',
|
||||
}}>
|
||||
{JSON.stringify(results, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
@@ -164,7 +370,7 @@ export const ResearchTest: React.FC = () => {
|
||||
</div>
|
||||
|
||||
{/* Main Content - Wizard */}
|
||||
<div style={{ flex: '2 1 800px' }}>
|
||||
<div style={{ flex: '2 1 800px', animation: 'fadeInUp 0.4s ease-out' }}>
|
||||
<ResearchWizard
|
||||
initialKeywords={presetKeywords}
|
||||
initialIndustry={presetIndustry}
|
||||
@@ -176,56 +382,140 @@ export const ResearchTest: React.FC = () => {
|
||||
{/* Footer Stats */}
|
||||
{results && (
|
||||
<div style={{
|
||||
backgroundColor: 'white',
|
||||
borderTop: '2px solid #e0e0e0',
|
||||
padding: '20px',
|
||||
marginTop: '40px',
|
||||
background: 'rgba(255, 255, 255, 0.7)',
|
||||
backdropFilter: 'blur(12px)',
|
||||
borderTop: '1px solid rgba(14, 165, 233, 0.15)',
|
||||
padding: '24px',
|
||||
marginTop: '32px',
|
||||
position: 'relative',
|
||||
zIndex: 10,
|
||||
}}>
|
||||
<div style={{ maxWidth: '1400px', margin: '0 auto' }}>
|
||||
<h3 style={{ margin: '0 0 16px 0', color: '#333', fontSize: '18px' }}>
|
||||
📊 Research Statistics
|
||||
</h3>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '16px' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '16px' }}>
|
||||
<div style={{
|
||||
backgroundColor: '#e3f2fd',
|
||||
padding: '16px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #90caf9',
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
background: 'linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%)',
|
||||
borderRadius: '12px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '20px',
|
||||
boxShadow: '0 4px 12px rgba(14, 165, 233, 0.25)',
|
||||
}}>
|
||||
<div style={{ fontSize: '12px', color: '#1976d2', fontWeight: '600', marginBottom: '4px' }}>
|
||||
Sources Found
|
||||
📊
|
||||
</div>
|
||||
<h3 style={{
|
||||
margin: 0,
|
||||
color: '#0c4a6e',
|
||||
fontSize: '20px',
|
||||
fontWeight: '600',
|
||||
}}>
|
||||
Research Intelligence Report
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '16px' }}>
|
||||
<div className="card-hover" style={{
|
||||
background: 'rgba(255, 255, 255, 0.9)',
|
||||
padding: '20px',
|
||||
borderRadius: '14px',
|
||||
border: '1px solid rgba(14, 165, 233, 0.2)',
|
||||
boxShadow: '0 2px 8px rgba(14, 165, 233, 0.08)',
|
||||
}}>
|
||||
<div style={{
|
||||
fontSize: '11px',
|
||||
color: '#0369a1',
|
||||
fontWeight: '600',
|
||||
marginBottom: '8px',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.05em',
|
||||
}}>
|
||||
Sources Discovered
|
||||
</div>
|
||||
<div style={{ fontSize: '28px', fontWeight: 'bold', color: '#1976d2' }}>
|
||||
<div style={{
|
||||
fontSize: '36px',
|
||||
fontWeight: '700',
|
||||
color: '#0284c7',
|
||||
lineHeight: '1',
|
||||
}}>
|
||||
{results.sources.length}
|
||||
</div>
|
||||
<div style={{
|
||||
fontSize: '11px',
|
||||
color: '#64748b',
|
||||
marginTop: '6px',
|
||||
}}>
|
||||
High-quality references
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
backgroundColor: '#f3e5f5',
|
||||
padding: '16px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #ce93d8',
|
||||
<div className="card-hover" style={{
|
||||
background: 'rgba(255, 255, 255, 0.9)',
|
||||
padding: '20px',
|
||||
borderRadius: '14px',
|
||||
border: '1px solid rgba(14, 165, 233, 0.2)',
|
||||
boxShadow: '0 2px 8px rgba(14, 165, 233, 0.08)',
|
||||
}}>
|
||||
<div style={{ fontSize: '12px', color: '#7b1fa2', fontWeight: '600', marginBottom: '4px' }}>
|
||||
<div style={{
|
||||
fontSize: '11px',
|
||||
color: '#0369a1',
|
||||
fontWeight: '600',
|
||||
marginBottom: '8px',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.05em',
|
||||
}}>
|
||||
Content Angles
|
||||
</div>
|
||||
<div style={{ fontSize: '28px', fontWeight: 'bold', color: '#7b1fa2' }}>
|
||||
<div style={{
|
||||
fontSize: '36px',
|
||||
fontWeight: '700',
|
||||
color: '#0284c7',
|
||||
lineHeight: '1',
|
||||
}}>
|
||||
{results.suggested_angles.length}
|
||||
</div>
|
||||
<div style={{
|
||||
fontSize: '11px',
|
||||
color: '#64748b',
|
||||
marginTop: '6px',
|
||||
}}>
|
||||
Unique perspectives
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
backgroundColor: '#e8f5e8',
|
||||
padding: '16px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #81c784',
|
||||
<div className="card-hover" style={{
|
||||
background: 'rgba(255, 255, 255, 0.9)',
|
||||
padding: '20px',
|
||||
borderRadius: '14px',
|
||||
border: '1px solid rgba(14, 165, 233, 0.2)',
|
||||
boxShadow: '0 2px 8px rgba(14, 165, 233, 0.08)',
|
||||
}}>
|
||||
<div style={{ fontSize: '12px', color: '#2e7d32', fontWeight: '600', marginBottom: '4px' }}>
|
||||
<div style={{
|
||||
fontSize: '11px',
|
||||
color: '#0369a1',
|
||||
fontWeight: '600',
|
||||
marginBottom: '8px',
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.05em',
|
||||
}}>
|
||||
Search Queries
|
||||
</div>
|
||||
<div style={{ fontSize: '28px', fontWeight: 'bold', color: '#2e7d32' }}>
|
||||
<div style={{
|
||||
fontSize: '36px',
|
||||
fontWeight: '700',
|
||||
color: '#0284c7',
|
||||
lineHeight: '1',
|
||||
}}>
|
||||
{results.search_queries?.length || 0}
|
||||
</div>
|
||||
<div style={{
|
||||
fontSize: '11px',
|
||||
color: '#64748b',
|
||||
marginTop: '6px',
|
||||
}}>
|
||||
Optimized searches
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -32,6 +32,11 @@ export interface ResearchConfig {
|
||||
include_expert_quotes?: boolean;
|
||||
include_competitors?: boolean;
|
||||
include_trends?: boolean;
|
||||
// Exa-specific options
|
||||
exa_category?: string;
|
||||
exa_include_domains?: string[];
|
||||
exa_exclude_domains?: string[];
|
||||
exa_search_type?: 'auto' | 'keyword' | 'neural';
|
||||
}
|
||||
|
||||
export interface BlogResearchRequest {
|
||||
|
||||
Reference in New Issue
Block a user