feat(seo-copilot): caching + freshness UI; glassomorphic styling; CopilotKit HITL modular actions; provider fixes; DB sessions & action types; seed 17 actions
This commit is contained in:
ajaysi
409
frontend/src/components/SEODashboard/SEOCopilotSuggestions.tsx
Normal file
409
frontend/src/components/SEODashboard/SEOCopilotSuggestions.tsx
Normal file
@@ -0,0 +1,409 @@
|
||||
// SEO CopilotKit Suggestions Component
|
||||
// Displays contextual suggestions based on current SEO data and user state
|
||||
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import { useSEOCopilotSuggestions } from '../../stores/seoCopilotStore';
|
||||
import { CopilotSuggestion } from '../../types/seoCopilotTypes';
|
||||
|
||||
interface SEOCopilotSuggestionsProps {
|
||||
maxSuggestions?: number;
|
||||
showCategories?: boolean;
|
||||
onSuggestionClick?: (suggestion: CopilotSuggestion) => void;
|
||||
}
|
||||
|
||||
const SEOCopilotSuggestionsComponent: React.FC<SEOCopilotSuggestionsProps> = ({
|
||||
maxSuggestions = 4,
|
||||
showCategories = true,
|
||||
onSuggestionClick
|
||||
}) => {
|
||||
const suggestions = useSEOCopilotSuggestions();
|
||||
const [expandedCategory, setExpandedCategory] = useState<string | null>(null);
|
||||
|
||||
// Group suggestions by category (memoized)
|
||||
const groupedSuggestions = useMemo(() => {
|
||||
return suggestions.reduce((acc, suggestion) => {
|
||||
if (!acc[suggestion.category]) {
|
||||
acc[suggestion.category] = [];
|
||||
}
|
||||
acc[suggestion.category].push(suggestion);
|
||||
return acc;
|
||||
}, {} as Record<string, CopilotSuggestion[]>);
|
||||
}, [suggestions]);
|
||||
|
||||
// Get category display info
|
||||
const getCategoryInfo = (category: string) => {
|
||||
const categoryInfo = {
|
||||
analysis: { icon: '🔍', name: 'Analysis', color: '#3B82F6' },
|
||||
optimization: { icon: '⚡', name: 'Optimization', color: '#10B981' },
|
||||
education: { icon: '🎓', name: 'Education', color: '#F59E0B' },
|
||||
monitoring: { icon: '📊', name: 'Monitoring', color: '#8B5CF6' }
|
||||
};
|
||||
return categoryInfo[category as keyof typeof categoryInfo] || { icon: '💡', name: category, color: '#6B7280' };
|
||||
};
|
||||
|
||||
// Get priority badge
|
||||
const getPriorityBadge = (priority: string) => {
|
||||
const priorityInfo = {
|
||||
high: { label: 'High', color: '#EF4444', bgColor: '#FEE2E2' },
|
||||
medium: { label: 'Medium', color: '#F59E0B', bgColor: '#FEF3C7' },
|
||||
low: { label: 'Low', color: '#10B981', bgColor: '#D1FAE5' }
|
||||
};
|
||||
return priorityInfo[priority as keyof typeof priorityInfo] || { label: priority, color: '#6B7280', bgColor: '#F3F4F6' };
|
||||
};
|
||||
|
||||
// Handle suggestion click
|
||||
const handleSuggestionClick = (suggestion: CopilotSuggestion) => {
|
||||
if (onSuggestionClick) {
|
||||
onSuggestionClick(suggestion);
|
||||
} else {
|
||||
// Default behavior - trigger the action
|
||||
console.log('Suggestion clicked:', suggestion);
|
||||
// Here you would typically trigger the CopilotKit action
|
||||
}
|
||||
};
|
||||
|
||||
// Render individual suggestion
|
||||
const renderSuggestion = (suggestion: CopilotSuggestion) => {
|
||||
const priorityBadge = getPriorityBadge(suggestion.priority);
|
||||
|
||||
return (
|
||||
<div
|
||||
key={suggestion.id}
|
||||
className="suggestion-item"
|
||||
onClick={() => handleSuggestionClick(suggestion)}
|
||||
>
|
||||
<div className="suggestion-header">
|
||||
<div className="suggestion-icon">{suggestion.icon}</div>
|
||||
<div className="suggestion-content">
|
||||
<h4 className="suggestion-title">{suggestion.title}</h4>
|
||||
<p className="suggestion-message">{suggestion.message}</p>
|
||||
</div>
|
||||
<div
|
||||
className="priority-badge"
|
||||
style={{
|
||||
color: priorityBadge.color,
|
||||
backgroundColor: priorityBadge.bgColor
|
||||
}}
|
||||
>
|
||||
{priorityBadge.label}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Render category section
|
||||
const renderCategory = (category: string, categorySuggestions: CopilotSuggestion[]) => {
|
||||
const categoryInfo = getCategoryInfo(category);
|
||||
const isExpanded = expandedCategory === category;
|
||||
const displaySuggestions = isExpanded ? categorySuggestions : categorySuggestions.slice(0, 2);
|
||||
|
||||
return (
|
||||
<div key={category} className="suggestion-category">
|
||||
<div
|
||||
className="category-header"
|
||||
onClick={() => setExpandedCategory(isExpanded ? null : category)}
|
||||
>
|
||||
<div className="category-info">
|
||||
<span className="category-icon">{categoryInfo.icon}</span>
|
||||
<span className="category-name">{categoryInfo.name}</span>
|
||||
<span className="suggestion-count">({categorySuggestions.length})</span>
|
||||
</div>
|
||||
<div className="expand-icon">
|
||||
{isExpanded ? '−' : '+'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={`category-suggestions ${isExpanded ? 'expanded' : ''}`}>
|
||||
{displaySuggestions.map(renderSuggestion)}
|
||||
{categorySuggestions.length > 2 && !isExpanded && (
|
||||
<div className="show-more">
|
||||
<button
|
||||
onClick={() => setExpandedCategory(category)}
|
||||
className="show-more-btn"
|
||||
>
|
||||
Show {categorySuggestions.length - 2} more suggestions
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
if (suggestions.length === 0) {
|
||||
return (
|
||||
<div className="seo-copilotkit-suggestions empty">
|
||||
<div className="empty-state">
|
||||
<div className="empty-icon">💡</div>
|
||||
<h3>No suggestions available</h3>
|
||||
<p>Start by analyzing your website to get personalized SEO suggestions.</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="seo-copilotkit-suggestions">
|
||||
<div className="suggestions-header">
|
||||
<h3 className="suggestions-title">
|
||||
<span className="title-icon">🎯</span>
|
||||
SEO Suggestions
|
||||
</h3>
|
||||
<p className="suggestions-subtitle">
|
||||
Personalized recommendations based on your current SEO data
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="suggestions-content">
|
||||
{showCategories ? (
|
||||
// Grouped by category
|
||||
Object.entries(groupedSuggestions).map(([category, categorySuggestions]) =>
|
||||
renderCategory(category, categorySuggestions)
|
||||
)
|
||||
) : (
|
||||
// Flat list
|
||||
<div className="suggestions-list">
|
||||
{suggestions.slice(0, maxSuggestions).map(renderSuggestion)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<style>{`
|
||||
.seo-copilotkit-suggestions {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.suggestions-header {
|
||||
padding: 20px 20px 16px;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.suggestions-title {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.suggestions-subtitle {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.suggestions-content {
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.suggestion-category {
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.suggestion-category:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.category-header {
|
||||
padding: 16px 20px;
|
||||
background: #f9fafb;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.category-header:hover {
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.category-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.category-icon {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.category-name {
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.suggestion-count {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
background: #e5e7eb;
|
||||
padding: 2px 6px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.expand-icon {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #6b7280;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.category-suggestions {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease-out;
|
||||
}
|
||||
|
||||
.category-suggestions.expanded {
|
||||
max-height: 1000px;
|
||||
}
|
||||
|
||||
.suggestion-item {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.suggestion-item:hover {
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
.suggestion-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.suggestion-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.suggestion-icon {
|
||||
font-size: 20px;
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.suggestion-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.suggestion-title {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #111827;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.suggestion-message {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
color: #6b7280;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.priority-badge {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
padding: 2px 6px;
|
||||
border-radius: 8px;
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.show-more {
|
||||
padding: 12px 20px;
|
||||
text-align: center;
|
||||
border-top: 1px solid #f3f4f6;
|
||||
}
|
||||
|
||||
.show-more-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #3b82f6;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.show-more-btn:hover {
|
||||
background: #eff6ff;
|
||||
}
|
||||
|
||||
.suggestions-list {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.empty-state h3 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Scrollbar styling */
|
||||
.suggestions-content::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.suggestions-content::-webkit-scrollbar-track {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
.suggestions-content::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.suggestions-content::-webkit-scrollbar-thumb:hover {
|
||||
background: #94a3b8;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const SEOCopilotSuggestions = React.memo(SEOCopilotSuggestionsComponent);
|
||||
export default SEOCopilotSuggestions;
|
||||
Reference in New Issue
Block a user