Add brand analysis columns to onboarding database and migration scripts

2025-10-11 17:05:42 +05:30
parent b1ebe1034e
commit 1df12a64a2
25 changed files with 2415 additions and 90 deletions
--- a/frontend/src/components/OnboardingWizard/FinalStep/FinalStep.tsx
+++ b/frontend/src/components/OnboardingWizard/FinalStep/FinalStep.tsx
@@ -45,14 +45,18 @@ const FinalStep: React.FC<FinalStepProps> = ({ onContinue, updateHeaderContent }
      // Load individual data sources for detailed information
      const websiteAnalysis = await getWebsiteAnalysisData();
      const researchPreferences = await getResearchPreferencesData();
-      
+      // Frontend fallbacks to Step 2 cached data (ensures non-breaking UI)
+      const cachedUrl = typeof window !== 'undefined' ? localStorage.getItem('website_url') : null;
+      const cachedAnalysisRaw = typeof window !== 'undefined' ? localStorage.getItem('website_analysis_data') : null;
+      const cachedAnalysis = cachedAnalysisRaw ? safeParseJSON(cachedAnalysisRaw) : undefined;
+
      setOnboardingData({
        apiKeys: summary.api_keys || {},
-        websiteUrl: websiteAnalysis?.website_url || summary.website_url,
+        websiteUrl: websiteAnalysis?.website_url || summary.website_url || cachedUrl || undefined,
        researchPreferences: researchPreferences || summary.research_preferences,
        personalizationSettings: summary.personalization_settings,
        integrations: summary.integrations || {},
-        styleAnalysis: websiteAnalysis?.style_analysis || summary.style_analysis
+        styleAnalysis: websiteAnalysis?.style_analysis || summary.style_analysis || cachedAnalysis || undefined
      });
    } catch (error) {
      console.error('Error loading onboarding data:', error);
@@ -75,6 +79,12 @@ const FinalStep: React.FC<FinalStepProps> = ({ onContinue, updateHeaderContent }
    }
  };

+  // Safe JSON parser for cached data
+  const safeParseJSON = (raw: string | null): any | undefined => {
+    if (!raw) return undefined;
+    try { return JSON.parse(raw); } catch { return undefined; }
+  };
+
  const handleLaunch = async () => {
    setLoading(true);
    setError(null);
--- a/frontend/src/components/OnboardingWizard/WebsiteStep.tsx
+++ b/frontend/src/components/OnboardingWizard/WebsiteStep.tsx
@@ -15,6 +15,7 @@ import {
  DialogActions,
  DialogContentText
 } from '@mui/material';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
 import {
  Analytics as AnalyticsIcon,
  History as HistoryIcon,
@@ -150,6 +151,49 @@ interface ExistingAnalysis {
 // =============================================================================

 const WebsiteStep: React.FC<WebsiteStepProps> = ({ onContinue, updateHeaderContent, onValidationChange }) => {
+  // Scoped high-contrast theme for Step 2 only
+  const scopedTheme = React.useMemo(() => createTheme({
+    palette: {
+      mode: 'light',
+      background: { default: '#ffffff', paper: '#ffffff' },
+      text: { primary: '#111827', secondary: '#374151' }
+    },
+    components: {
+      MuiPaper: {
+        styleOverrides: {
+          root: {
+            backgroundColor: '#ffffff !important',
+            backgroundImage: 'none !important'
+          }
+        }
+      },
+      MuiCard: {
+        styleOverrides: {
+          root: {
+            backgroundColor: '#ffffff !important',
+            backgroundImage: 'none !important'
+          }
+        }
+      },
+      MuiTypography: {
+        styleOverrides: {
+          root: {
+            color: '#111827 !important',
+            WebkitTextFillColor: '#111827'
+          }
+        }
+      },
+      MuiTooltip: {
+        styleOverrides: {
+          tooltip: {
+            color: '#111827',
+            backgroundColor: '#F9FAFB',
+            border: '1px solid #E5E7EB'
+          }
+        }
+      }
+    }
+  }), []);
  const [website, setWebsite] = useState('');
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
@@ -431,9 +475,11 @@ const WebsiteStep: React.FC<WebsiteStepProps> = ({ onContinue, updateHeaderConte
  }

  return (
+    <ThemeProvider theme={scopedTheme}>
    <Box sx={{ 
-      maxWidth: 900, 
-      mx: 'auto', 
+      maxWidth: '100%',
+      width: '100%',
+      mx: 0,
      p: 3,
      '@keyframes fadeIn': {
        '0%': { opacity: 0, transform: 'translateY(20px)' },
@@ -455,13 +501,7 @@ const WebsiteStep: React.FC<WebsiteStepProps> = ({ onContinue, updateHeaderConte
        </Typography>
      </Box>

-      {/* API Key Configuration Notice */}
-      <Alert severity="info" sx={{ mb: 3 }}>
-        <Typography variant="body2">
-          <strong>Note:</strong> To perform accurate style analysis, you need to configure AI provider API keys in step 1. 
-          If you haven't completed step 1 yet, please go back and configure your API keys for the best experience.
-        </Typography>
-      </Alert>
+      {/* API Key Configuration Notice removed per request */}

      <Card sx={{ mb: 3, p: 3 }}>
        <Grid container spacing={2} alignItems="center">
@@ -591,6 +631,7 @@ const WebsiteStep: React.FC<WebsiteStepProps> = ({ onContinue, updateHeaderConte
        </DialogActions>
      </Dialog>
    </Box>
+    </ThemeProvider>
  );
 };

--- a/frontend/src/components/OnboardingWizard/WebsiteStep/components/AnalysisResultsDisplay.tsx
+++ b/frontend/src/components/OnboardingWizard/WebsiteStep/components/AnalysisResultsDisplay.tsx
@@ -157,9 +157,23 @@ const AnalysisResultsDisplay: React.FC<AnalysisResultsDisplayProps> = ({
  const styles = useOnboardingStyles();

  return (
-    <Box sx={styles.analysisContainer}>
-      {/* Pro Upgrade Alert */}
-      {renderProUpgradeAlert()}
+    <Box sx={{
+      ...styles.analysisContainer,
+      // Global readability hard overrides for Step 2 display area
+      '& .MuiTypography-root': {
+        color: '#111827 !important',
+        WebkitTextFillColor: '#111827',
+      },
+      '& .MuiPaper-root': {
+        backgroundColor: '#ffffff !important',
+        backgroundImage: 'none !important',
+      },
+      '& .MuiCard-root': {
+        backgroundColor: '#ffffff !important',
+        backgroundImage: 'none !important',
+      }
+    }}>
+      {/* Pro Upgrade Alert removed per request */}
      
      {/* Main Analysis Results */}
      <Card sx={styles.analysisHeaderCard}>
--- a/frontend/src/components/OnboardingWizard/WebsiteStep/components/ContentCharacteristicsSection.tsx
+++ b/frontend/src/components/OnboardingWizard/WebsiteStep/components/ContentCharacteristicsSection.tsx
@@ -45,7 +45,12 @@ const ContentCharacteristicsSection: React.FC<ContentCharacteristicsSectionProps
  }

  return (
-    <Box sx={{ ...styles.analysisSection, mt: 4 }}>
+    <Box sx={{ 
+      ...styles.analysisSection, 
+      mt: 4,
+      '& .MuiTypography-root': { color: '#111827 !important', WebkitTextFillColor: '#111827' },
+      '& .MuiPaper-root': { backgroundColor: '#ffffff !important', backgroundImage: 'none !important' }
+    }}>
      <Typography 
        variant="h5" 
        sx={{
--- a/frontend/src/components/OnboardingWizard/WebsiteStep/components/TargetAudienceAnalysisSection.tsx
+++ b/frontend/src/components/OnboardingWizard/WebsiteStep/components/TargetAudienceAnalysisSection.tsx
@@ -46,7 +46,12 @@ const TargetAudienceAnalysisSection: React.FC<TargetAudienceAnalysisSectionProps
  }

  return (
-    <Box sx={{ ...styles.analysisSection, mt: 4 }}>
+  <Box sx={{ 
+    ...styles.analysisSection, 
+    mt: 4,
+    '& .MuiTypography-root': { color: '#111827 !important', WebkitTextFillColor: '#111827' },
+    '& .MuiPaper-root': { backgroundColor: '#ffffff !important', backgroundImage: 'none !important' }
+  }}>
      <Typography 
        variant="h5" 
        sx={{
--- a/frontend/src/components/OnboardingWizard/WebsiteStep/utils/renderUtils.tsx
+++ b/frontend/src/components/OnboardingWizard/WebsiteStep/utils/renderUtils.tsx
@@ -67,24 +67,35 @@ const KeyInsightCard: React.FC<KeyInsightProps> = ({
        borderRadius: 2.5,
        // Force high-contrast base color so nested text never inherits a light color
        color: isDark ? '#ffffff !important' : '#1a202c !important',
+        // High-contrast background for readability (avoid pastel-on-white look)
+        // Hard override to white in light mode; prevents faint text from theme gradients
        background: isDark
-          ? `linear-gradient(135deg, ${alpha(paletteColor.main, 0.08)} 0%, ${alpha(paletteColor.main, 0.04)} 100%)`
-          : `linear-gradient(135deg, ${alpha(paletteColor.main, 0.06)} 0%, ${alpha(paletteColor.light, 0.08)} 100%)`,
+          ? `linear-gradient(135deg, ${alpha(paletteColor.main, 0.14)} 0%, ${alpha(paletteColor.main, 0.10)} 100%)`
+          : '#ffffff !important',
+        backgroundImage: 'none !important',
+        backgroundColor: isDark ? undefined : '#ffffff !important',
+        opacity: '1 !important',
        border: `2px solid`,
-        borderColor: isDark 
-          ? alpha(paletteColor.main, 0.2)
-          : alpha(paletteColor.main, 0.15),
+        borderColor: isDark
+          ? alpha(paletteColor.main, 0.35)
+          : alpha(paletteColor.main, 0.35),
        borderLeftWidth: '5px',
        transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+        // Prevent any blend that could wash out text colors on light surfaces
+        mixBlendMode: 'normal',
        // Ensure all child elements inherit proper text color
        '& *': {
          color: 'inherit !important'
        },
+        '& .MuiTypography-root': {
+          color: isDark ? '#ffffff !important' : '#111827 !important',
+          WebkitTextFillColor: isDark ? '#ffffff' : '#111827',
+        },
        '&:hover': {
          background: isDark
-            ? `linear-gradient(135deg, ${alpha(paletteColor.main, 0.12)} 0%, ${alpha(paletteColor.main, 0.08)} 100%)`
-            : `linear-gradient(135deg, ${alpha(paletteColor.main, 0.10)} 0%, ${alpha(paletteColor.light, 0.12)} 100%)`,
-          borderColor: alpha(paletteColor.main, 0.4),
+            ? `linear-gradient(135deg, ${alpha(paletteColor.main, 0.18)} 0%, ${alpha(paletteColor.main, 0.12)} 100%)`
+            : '#ffffff !important',
+          borderColor: alpha(paletteColor.main, 0.55),
          transform: 'translateY(-4px)',
          boxShadow: isDark
            ? `0 12px 40px ${alpha(paletteColor.main, 0.2)}`
@@ -103,9 +114,10 @@ const KeyInsightCard: React.FC<KeyInsightProps> = ({
            width: 48,
            height: 48,
            borderRadius: 2,
+            // Stronger icon container contrast
            background: isDark
-              ? alpha(paletteColor.main, 0.15)
-              : alpha(paletteColor.main, 0.1),
+              ? alpha(paletteColor.main, 0.22)
+              : alpha(paletteColor.main, 0.14),
          }}
        >
          {icon}
@@ -118,12 +130,12 @@ const KeyInsightCard: React.FC<KeyInsightProps> = ({
              fontSize: '0.78rem',
              letterSpacing: '0.6px',
              textTransform: 'uppercase',
-              color: isDark ? '#ffffff !important' : '#1a202c !important',
+              color: isDark ? '#ffffff !important' : '#1f2937 !important',
              textShadow: isDark ? 'none' : '0 1px 0 rgba(255,255,255,0.6)',
              mb: 0.5,
              display: 'block',
              // Force high contrast for readability
-              WebkitTextFillColor: isDark ? '#ffffff' : '#1a202c',
+              WebkitTextFillColor: isDark ? '#ffffff' : '#1f2937',
              WebkitTextStroke: '0px transparent'
            }}
          >
@@ -134,10 +146,10 @@ const KeyInsightCard: React.FC<KeyInsightProps> = ({
            sx={{ 
              fontWeight: 700,
              fontSize: '1.1rem',
-              color: isDark ? '#ffffff !important' : '#1a202c !important',
+              color: isDark ? '#ffffff !important' : '#111827 !important',
              lineHeight: 1.35,
              // Force high contrast for readability
-              WebkitTextFillColor: isDark ? '#ffffff' : '#1a202c',
+              WebkitTextFillColor: isDark ? '#ffffff' : '#111827',
              WebkitTextStroke: '0px transparent'
            }}
          >