feat: add interactive competitor analysis viewer for roadmap
Add comprehensive competitor analysis viewing capabilities: - Create CompetitorAnalysisViewer component with detailed insights display * Shows competitor names, descriptions, and market positions * Displays pain points with severity badges (high/medium/low) * Includes user quotes from reviews/forums * Shows opportunity scores for prioritization * Provides visit links to competitor products - Make Competitor Analysis badge interactive * Click to open detailed viewer modal * Tooltip shows summary (competitor count, pain points) * Visual feedback with hover state - Enhance persona visibility in roadmap header * Make "+N more personas" clickable with dotted underline * Show all secondary personas in tooltip on hover - Fix modal scrolling in CompetitorAnalysisViewer * Add flex layout constraints for proper scrolling * Set max-height with calculation for header space * Add bottom padding to prevent content cutoff This enables users to view detailed competitive insights generated during roadmap creation, including specific pain points identified in competitor products and opportunities to address market gaps. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
AndyMik90
@@ -0,0 +1,154 @@
|
||||
import { TrendingUp, ExternalLink, AlertCircle } from 'lucide-react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
} from './ui/dialog';
|
||||
import { Badge } from './ui/badge';
|
||||
import { ScrollArea } from './ui/scroll-area';
|
||||
import type { CompetitorAnalysis } from '../../shared/types';
|
||||
|
||||
interface CompetitorAnalysisViewerProps {
|
||||
analysis: CompetitorAnalysis | null;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
}
|
||||
|
||||
export function CompetitorAnalysisViewer({
|
||||
analysis,
|
||||
open,
|
||||
onOpenChange,
|
||||
}: CompetitorAnalysisViewerProps) {
|
||||
if (!analysis) return null;
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-4xl max-h-[85vh] flex flex-col">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<TrendingUp className="h-5 w-5 text-primary" />
|
||||
Competitor Analysis Results
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
Analyzed {analysis.competitors.length} competitors to identify market gaps and opportunities
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<ScrollArea className="flex-1 overflow-auto pr-4" style={{ maxHeight: 'calc(85vh - 120px)' }}>
|
||||
<div className="space-y-6 pb-4">
|
||||
{analysis.competitors.map((competitor) => (
|
||||
<div
|
||||
key={competitor.id}
|
||||
className="rounded-lg border border-border p-4 space-y-3"
|
||||
>
|
||||
{/* Competitor Header */}
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h3 className="text-lg font-semibold">{competitor.name}</h3>
|
||||
{competitor.marketPosition && (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{competitor.marketPosition}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{competitor.description && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{competitor.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{competitor.url && (
|
||||
<a
|
||||
href={competitor.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary hover:underline flex items-center gap-1 text-sm ml-4"
|
||||
>
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
Visit
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Pain Points */}
|
||||
<div>
|
||||
<h4 className="text-sm font-medium mb-2 flex items-center gap-2">
|
||||
<AlertCircle className="h-4 w-4 text-warning" />
|
||||
Identified Pain Points ({competitor.painPoints.length})
|
||||
</h4>
|
||||
<div className="space-y-2">
|
||||
{competitor.painPoints.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground italic">
|
||||
No pain points identified
|
||||
</p>
|
||||
) : (
|
||||
competitor.painPoints.map((painPoint) => (
|
||||
<div
|
||||
key={painPoint.id}
|
||||
className="rounded bg-muted/50 p-3 space-y-2"
|
||||
>
|
||||
<div className="flex items-start gap-2">
|
||||
<Badge
|
||||
variant={
|
||||
painPoint.severity === 'high'
|
||||
? 'destructive'
|
||||
: painPoint.severity === 'medium'
|
||||
? 'default'
|
||||
: 'secondary'
|
||||
}
|
||||
className="mt-0.5"
|
||||
>
|
||||
{painPoint.severity}
|
||||
</Badge>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm font-medium">
|
||||
{painPoint.description}
|
||||
</p>
|
||||
{painPoint.userQuotes && painPoint.userQuotes.length > 0 && (
|
||||
<div className="mt-2 space-y-1">
|
||||
{painPoint.userQuotes.map((quote, idx) => (
|
||||
<p
|
||||
key={idx}
|
||||
className="text-xs text-muted-foreground italic border-l-2 border-muted pl-2"
|
||||
>
|
||||
"{quote}"
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{painPoint.opportunityScore !== undefined && (
|
||||
<div className="mt-2">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Opportunity Score:{' '}
|
||||
<span className="font-medium text-foreground">
|
||||
{painPoint.opportunityScore}/10
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Summary */}
|
||||
{analysis.summary && (
|
||||
<div className="rounded-lg bg-primary/5 border border-primary/20 p-4">
|
||||
<h4 className="text-sm font-semibold mb-2">Market Summary</h4>
|
||||
<p className="text-sm text-muted-foreground">{analysis.summary}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import { useState } from 'react';
|
||||
import { RoadmapGenerationProgress } from './RoadmapGenerationProgress';
|
||||
import { CompetitorAnalysisDialog } from './CompetitorAnalysisDialog';
|
||||
import { CompetitorAnalysisViewer } from './CompetitorAnalysisViewer';
|
||||
import { AddFeatureDialog } from './AddFeatureDialog';
|
||||
import { RoadmapHeader } from './roadmap/RoadmapHeader';
|
||||
import { RoadmapEmptyState } from './roadmap/RoadmapEmptyState';
|
||||
@@ -16,6 +17,7 @@ export function Roadmap({ projectId, onGoToTask }: RoadmapProps) {
|
||||
const [selectedFeature, setSelectedFeature] = useState<RoadmapFeature | null>(null);
|
||||
const [activeTab, setActiveTab] = useState('phases');
|
||||
const [showAddFeatureDialog, setShowAddFeatureDialog] = useState(false);
|
||||
const [showCompetitorViewer, setShowCompetitorViewer] = useState(false);
|
||||
|
||||
// Custom hooks
|
||||
const { roadmap, competitorAnalysis, generationStatus } = useRoadmapData(projectId);
|
||||
@@ -78,6 +80,7 @@ export function Roadmap({ projectId, onGoToTask }: RoadmapProps) {
|
||||
competitorAnalysis={competitorAnalysis}
|
||||
onAddFeature={() => setShowAddFeatureDialog(true)}
|
||||
onRefresh={handleRefresh}
|
||||
onViewCompetitorAnalysis={() => setShowCompetitorViewer(true)}
|
||||
/>
|
||||
|
||||
{/* Content */}
|
||||
@@ -111,6 +114,13 @@ export function Roadmap({ projectId, onGoToTask }: RoadmapProps) {
|
||||
onDecline={handleCompetitorDialogDecline}
|
||||
/>
|
||||
|
||||
{/* Competitor Analysis Viewer */}
|
||||
<CompetitorAnalysisViewer
|
||||
analysis={competitorAnalysis}
|
||||
open={showCompetitorViewer}
|
||||
onOpenChange={setShowCompetitorViewer}
|
||||
/>
|
||||
|
||||
{/* Add Feature Dialog */}
|
||||
<AddFeatureDialog
|
||||
phases={roadmap.phases}
|
||||
|
||||
@@ -6,7 +6,7 @@ import { getFeatureStats } from '../../stores/roadmap-store';
|
||||
import { ROADMAP_PRIORITY_COLORS } from '../../../shared/constants';
|
||||
import type { RoadmapHeaderProps } from './types';
|
||||
|
||||
export function RoadmapHeader({ roadmap, competitorAnalysis, onAddFeature, onRefresh }: RoadmapHeaderProps) {
|
||||
export function RoadmapHeader({ roadmap, competitorAnalysis, onAddFeature, onRefresh, onViewCompetitorAnalysis }: RoadmapHeaderProps) {
|
||||
const stats = getFeatureStats(roadmap);
|
||||
|
||||
return (
|
||||
@@ -20,20 +20,22 @@ export function RoadmapHeader({ roadmap, competitorAnalysis, onAddFeature, onRef
|
||||
{competitorAnalysis && (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Badge variant="secondary" className="gap-1">
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="gap-1 cursor-pointer hover:bg-secondary/80 transition-colors"
|
||||
onClick={onViewCompetitorAnalysis}
|
||||
>
|
||||
<TrendingUp className="h-3 w-3" />
|
||||
Competitor Analysis
|
||||
</Badge>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent className="max-w-md">
|
||||
<div className="space-y-2">
|
||||
<div className="font-semibold">Analyzed {competitorAnalysis.competitors.length} competitors:</div>
|
||||
{competitorAnalysis.competitors.map((comp) => (
|
||||
<div key={comp.id} className="text-sm">
|
||||
<div className="font-medium">• {comp.name}</div>
|
||||
<div className="text-muted-foreground ml-3">{comp.painPoints.length} pain points identified</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="font-semibold">Click to view detailed analysis</div>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Analyzed {competitorAnalysis.competitors.length} competitors with {' '}
|
||||
{competitorAnalysis.competitors.reduce((sum, c) => sum + c.painPoints.length, 0)} pain points identified
|
||||
</div>
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
@@ -35,6 +35,7 @@ export interface RoadmapHeaderProps {
|
||||
competitorAnalysis: CompetitorAnalysis | null;
|
||||
onAddFeature: () => void;
|
||||
onRefresh: () => void;
|
||||
onViewCompetitorAnalysis?: () => void;
|
||||
}
|
||||
|
||||
export interface RoadmapEmptyStateProps {
|
||||
|
||||
Reference in New Issue
Block a user