Merge main into cursor/implement-usage-based-subscription-and-monitoring-0179
- Resolved merge conflicts in gemini_grounded_provider.py - Removed conflicting Python cache file - Integrated latest LinkedIn Writer features from main branch
This commit is contained in:
ajaysi
@@ -6,7 +6,7 @@ import './styles/alwrity-copilot.css';
|
||||
import RegisterLinkedInActions from './RegisterLinkedInActions';
|
||||
import RegisterLinkedInEditActions from './RegisterLinkedInEditActions';
|
||||
import RegisterLinkedInActionsEnhanced from './RegisterLinkedInActionsEnhanced';
|
||||
import { Header, ContentEditor, LoadingIndicator, WelcomeMessage, ProgressTracker } from './components';
|
||||
import { Header, ContentEditor, LoadingIndicator, WelcomeMessage, ProgressTracker, CopilotActions } from './components';
|
||||
import { useLinkedInWriter } from './hooks/useLinkedInWriter';
|
||||
import { useCopilotPersistence } from './utils/enhancedPersistence';
|
||||
import { PlatformPersonaProvider, usePlatformPersonaContext } from '../shared/PersonaContext/PlatformPersonaProvider';
|
||||
@@ -83,11 +83,9 @@ const LinkedInWriterContent: React.FC<LinkedInWriterProps> = ({ className = '' }
|
||||
// Get persona context for enhanced AI assistance
|
||||
const { corePersona, platformPersona, loading: personaLoading } = usePlatformPersonaContext();
|
||||
|
||||
|
||||
// Get enhanced persistence functionality
|
||||
const {
|
||||
persistenceManager,
|
||||
copilotContext,
|
||||
saveChatHistory,
|
||||
loadChatHistory,
|
||||
addChatMessage,
|
||||
@@ -227,171 +225,17 @@ const LinkedInWriterContent: React.FC<LinkedInWriterProps> = ({ className = '' }
|
||||
}
|
||||
});
|
||||
|
||||
// Allow Copilot to edit the draft with specific operations
|
||||
useCopilotActionTyped({
|
||||
name: 'editLinkedInDraft',
|
||||
description: 'Apply a quick style or structural edit to the current LinkedIn draft',
|
||||
parameters: [
|
||||
{ name: 'operation', type: 'string', description: 'The edit operation to perform', required: true, enum: ['Casual', 'Professional', 'TightenHook', 'AddCTA', 'Shorten', 'Lengthen'] }
|
||||
],
|
||||
handler: async ({ operation }: { operation: string }) => {
|
||||
const currentDraft = draft || '';
|
||||
if (!currentDraft) {
|
||||
return { success: false, message: 'No draft content to edit' };
|
||||
}
|
||||
|
||||
let editedContent = currentDraft;
|
||||
|
||||
switch (operation) {
|
||||
case 'Casual':
|
||||
editedContent = currentDraft.replace(/\b(utilize|implement|facilitate|leverage)\b/gi, (match) => {
|
||||
const casual = { utilize: 'use', implement: 'put in place', facilitate: 'help', leverage: 'use' };
|
||||
return casual[match.toLowerCase() as keyof typeof casual] || match;
|
||||
});
|
||||
editedContent = editedContent.replace(/\./g, '! 😊');
|
||||
break;
|
||||
|
||||
case 'Professional':
|
||||
editedContent = currentDraft.replace(/\b(use|put in place|help)\b/gi, (match) => {
|
||||
const professional = { use: 'utilize', 'put in place': 'implement', help: 'facilitate' };
|
||||
return professional[match.toLowerCase() as keyof typeof professional] || match;
|
||||
});
|
||||
editedContent = editedContent.replace(/! 😊/g, '.');
|
||||
break;
|
||||
|
||||
case 'TightenHook':
|
||||
const lines = currentDraft.split('\n');
|
||||
if (lines.length > 0) {
|
||||
const firstLine = lines[0];
|
||||
const tightened = firstLine.length > 100 ? firstLine.substring(0, 100) + '...' : firstLine;
|
||||
lines[0] = tightened;
|
||||
editedContent = lines.join('\n');
|
||||
}
|
||||
break;
|
||||
|
||||
case 'AddCTA':
|
||||
if (!/\b(call now|sign up|join|try|learn more|cta|comment|share|connect|message|dm|reach out)\b/i.test(currentDraft)) {
|
||||
editedContent = currentDraft + '\n\nWhat are your thoughts on this? Share your experience in the comments below!';
|
||||
}
|
||||
break;
|
||||
|
||||
case 'Shorten':
|
||||
if (currentDraft.length > 200) {
|
||||
editedContent = currentDraft.substring(0, 200) + '...';
|
||||
}
|
||||
break;
|
||||
|
||||
case 'Lengthen':
|
||||
if (currentDraft.length < 500) {
|
||||
editedContent = currentDraft + '\n\nThis approach has shown remarkable results in our industry. The key is to maintain consistency while adapting to changing market conditions.';
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
return { success: false, message: 'Unknown operation' };
|
||||
}
|
||||
|
||||
// Use the edit action to show the diff preview
|
||||
window.dispatchEvent(new CustomEvent('linkedinwriter:applyEdit', {
|
||||
detail: { target: editedContent }
|
||||
}));
|
||||
|
||||
return { success: true, message: `Draft ${operation.toLowerCase()} applied`, content: editedContent };
|
||||
}
|
||||
// Initialize CopilotActions component to handle all copilot-related functionality
|
||||
const getIntelligentSuggestions = CopilotActions({
|
||||
draft,
|
||||
context,
|
||||
userPreferences,
|
||||
justGeneratedContent,
|
||||
handleContextChange,
|
||||
setDraft
|
||||
});
|
||||
|
||||
// Intelligent, stage-aware suggestions (memoized to prevent infinite re-rendering)
|
||||
const getIntelligentSuggestions = useMemo(() => {
|
||||
const hasContent = draft && draft.trim().length > 0;
|
||||
const hasCTA = /\b(call now|sign up|join|try|learn more|cta|comment|share|connect|message|dm|reach out)\b/i.test(draft || '');
|
||||
const hasHashtags = /#[A-Za-z0-9_]+/.test(draft || '');
|
||||
const isLong = (draft || '').length > 500;
|
||||
|
||||
// Debug logging for suggestions
|
||||
if (DEBUG_LINKEDIN) console.log('[LinkedIn Writer] Generating suggestions:', {
|
||||
hasContent,
|
||||
justGeneratedContent,
|
||||
draftLength: draft?.length || 0
|
||||
});
|
||||
|
||||
if (!hasContent) {
|
||||
// Initial suggestions for content creation
|
||||
const initialSuggestions = [
|
||||
{ title: '📝 LinkedIn Post', message: 'Use tool generateLinkedInPost to create a professional LinkedIn post for your industry.' },
|
||||
{ title: '📄 Article', message: 'Use tool generateLinkedInArticle to write a thought leadership article.' },
|
||||
{ title: '🎠 Carousel', message: 'Use tool generateLinkedInCarousel to create a multi-slide carousel presentation.' },
|
||||
{ title: '🎬 Video Script', message: 'Use tool generateLinkedInVideoScript to draft a video script for LinkedIn.' },
|
||||
{ title: '💬 Comment Response', message: 'Use tool generateLinkedInCommentResponse to craft a professional comment reply.' },
|
||||
{ title: '🖼️ Generate Post Image', message: 'Use tool generateLinkedInImagePrompts to create professional images for your LinkedIn content.' },
|
||||
{ title: '🎨 Visual Content', message: 'Create engaging visual content with AI-generated images optimized for LinkedIn.' }
|
||||
];
|
||||
console.log('[LinkedIn Writer] Initial suggestions:', initialSuggestions);
|
||||
return initialSuggestions;
|
||||
} else {
|
||||
// Refinement suggestions for existing content - use direct edit actions
|
||||
const refinementSuggestions = [
|
||||
{ title: '🙂 Make it casual', message: 'Use tool editLinkedInDraft with operation Casual' },
|
||||
{ title: '💼 Make it professional', message: 'Use tool editLinkedInDraft with operation Professional' },
|
||||
{ title: '✨ Tighten hook', message: 'Use tool editLinkedInDraft with operation TightenHook' },
|
||||
{ title: '📣 Add a CTA', message: 'Use tool editLinkedInDraft with operation AddCTA' },
|
||||
{ title: '✂️ Shorten', message: 'Use tool editLinkedInDraft with operation Shorten' },
|
||||
{ title: '➕ Lengthen', message: 'Use tool editLinkedInDraft with operation Lengthen' }
|
||||
];
|
||||
|
||||
// Add special suggestions when content was just generated
|
||||
if (justGeneratedContent) {
|
||||
console.log('[LinkedIn Writer] Adding post-generation suggestions');
|
||||
refinementSuggestions.unshift(
|
||||
{
|
||||
title: '🎉 Content Generated! Next Steps:',
|
||||
message: 'Great! Your content is ready. Now let\'s enhance it with images and make it perfect for LinkedIn.'
|
||||
},
|
||||
{
|
||||
title: '🖼️ Generate Post Image',
|
||||
message: 'Use tool generateLinkedInImagePrompts to create professional images for this LinkedIn post'
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// Add contextual suggestions based on content analysis
|
||||
if (!hasCTA) {
|
||||
refinementSuggestions.push({ title: '📣 Add CTA', message: 'Use tool editLinkedInDraft with operation AddCTA' });
|
||||
}
|
||||
if (!hasHashtags) {
|
||||
refinementSuggestions.push({ title: '🏷️ Add hashtags', message: 'Use tool addLinkedInHashtags' });
|
||||
}
|
||||
if (isLong) {
|
||||
refinementSuggestions.push({ title: '📝 Summarize intro', message: 'Use tool editLinkedInDraft with operation Shorten' });
|
||||
}
|
||||
|
||||
// Add image generation suggestion when there's content
|
||||
if (draft && draft.trim().length > 0) {
|
||||
if (DEBUG_LINKEDIN) console.log('[LinkedIn Writer] Adding image generation suggestion');
|
||||
// Make image generation suggestion more prominent
|
||||
refinementSuggestions.push({
|
||||
title: '🖼️ Generate Post Image',
|
||||
message: 'Use tool generateLinkedInImagePrompts to create professional images for this LinkedIn post'
|
||||
});
|
||||
|
||||
// Add contextual image suggestions based on content type
|
||||
if (draft.includes('digital transformation') || draft.includes('technology') || draft.includes('innovation')) {
|
||||
refinementSuggestions.push({
|
||||
title: '🚀 Tech-Focused Image',
|
||||
message: 'Use tool generateLinkedInImagePrompts to create technology-themed professional images for this post'
|
||||
});
|
||||
} else if (draft.includes('business') || draft.includes('strategy') || draft.includes('growth')) {
|
||||
refinementSuggestions.push({
|
||||
title: '💼 Business Image',
|
||||
message: 'Use tool generateLinkedInImagePrompts to create business-focused professional images for this post'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (DEBUG_LINKEDIN) console.log('[LinkedIn Writer] Final suggestions:', refinementSuggestions);
|
||||
return refinementSuggestions;
|
||||
}
|
||||
}, [draft, justGeneratedContent]);
|
||||
|
||||
return (
|
||||
<div className={`linkedin-writer ${className}`} style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
|
||||
{/* Header */}
|
||||
@@ -418,6 +262,7 @@ const LinkedInWriterContent: React.FC<LinkedInWriterProps> = ({ className = '' }
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{/* Debug: Enhanced Persistence Test Buttons (remove in production) */}
|
||||
|
||||
|
||||
@@ -470,6 +315,7 @@ const LinkedInWriterContent: React.FC<LinkedInWriterProps> = ({ className = '' }
|
||||
{/* Enhanced Persona-Aware Actions */}
|
||||
<RegisterLinkedInActionsEnhanced />
|
||||
|
||||
|
||||
{/* CopilotKit Sidebar */}
|
||||
<CopilotSidebar
|
||||
className="alwrity-copilot-sidebar linkedin-writer"
|
||||
|
||||
@@ -0,0 +1,573 @@
|
||||
import React, { useCallback, useMemo, useState } from 'react';
|
||||
import { usePlatformPersonaContext } from '../../shared/PersonaContext/PlatformPersonaProvider';
|
||||
|
||||
// Define the cache data type
|
||||
interface BrainstormCacheData {
|
||||
ideas: { prompt: string; rationale?: string }[];
|
||||
searchResults: any[];
|
||||
timestamp: number;
|
||||
}
|
||||
|
||||
// Type guard function
|
||||
const isBrainstormCacheData = (data: any): data is BrainstormCacheData => {
|
||||
return data &&
|
||||
Array.isArray(data.ideas) &&
|
||||
Array.isArray(data.searchResults) &&
|
||||
typeof data.timestamp === 'number';
|
||||
};
|
||||
|
||||
interface BrainstormFlowProps {
|
||||
brainstormVisible: boolean;
|
||||
setBrainstormVisible: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
brainstormStage: 'loading' | 'select' | 'results';
|
||||
setBrainstormStage: React.Dispatch<React.SetStateAction<'loading' | 'select' | 'results'>>;
|
||||
loaderMessageIndex: number;
|
||||
setLoaderMessageIndex: React.Dispatch<React.SetStateAction<number>>;
|
||||
aiSearchPrompts: string[];
|
||||
setAiSearchPrompts: React.Dispatch<React.SetStateAction<string[]>>;
|
||||
selectedPrompt: string;
|
||||
setSelectedPrompt: React.Dispatch<React.SetStateAction<string>>;
|
||||
searchResults: any[];
|
||||
setSearchResults: React.Dispatch<React.SetStateAction<any[]>>;
|
||||
ideas: { prompt: string; rationale?: string }[];
|
||||
setIdeas: React.Dispatch<React.SetStateAction<{ prompt: string; rationale?: string }[]>>;
|
||||
isUsingCache: boolean;
|
||||
setIsUsingCache: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
}
|
||||
|
||||
const BrainstormFlow: React.FC<BrainstormFlowProps> = ({
|
||||
brainstormVisible,
|
||||
setBrainstormVisible,
|
||||
brainstormStage,
|
||||
setBrainstormStage,
|
||||
loaderMessageIndex,
|
||||
setLoaderMessageIndex,
|
||||
aiSearchPrompts,
|
||||
setAiSearchPrompts,
|
||||
selectedPrompt,
|
||||
setSelectedPrompt,
|
||||
searchResults,
|
||||
setSearchResults,
|
||||
ideas,
|
||||
setIdeas,
|
||||
isUsingCache,
|
||||
setIsUsingCache
|
||||
}) => {
|
||||
const { corePersona, platformPersona } = usePlatformPersonaContext();
|
||||
|
||||
const loaderMessages = useMemo(() => ([
|
||||
'Searching the web for the most recent and relevant coverage...',
|
||||
'Extracting entities and context from top sources...',
|
||||
'Aligning findings with your persona and audience...',
|
||||
'Formulating high-signal brainstorm prompts you can use right away...'
|
||||
]), []);
|
||||
|
||||
// Cache management utilities
|
||||
const getCacheKey = useCallback((seed: string, personaId?: string, platformPersonaId?: string) => {
|
||||
return `brainstorm_ideas_${seed}_${personaId || 'default'}_${platformPersonaId || 'default'}`;
|
||||
}, []);
|
||||
|
||||
const getCachedIdeas = useCallback((cacheKey: string): BrainstormCacheData | null => {
|
||||
try {
|
||||
const cached = sessionStorage.getItem(cacheKey);
|
||||
if (cached) {
|
||||
const data = JSON.parse(cached);
|
||||
if (isBrainstormCacheData(data)) {
|
||||
// Check if cache is less than 1 hour old
|
||||
if (Date.now() - data.timestamp < 3600000) {
|
||||
return data;
|
||||
} else {
|
||||
sessionStorage.removeItem(cacheKey);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('Failed to read brainstorm cache:', e);
|
||||
}
|
||||
return null;
|
||||
}, []);
|
||||
|
||||
const setCachedIdeas = useCallback((cacheKey: string, ideas: any[], searchResults: any[]) => {
|
||||
try {
|
||||
const cacheData = {
|
||||
ideas,
|
||||
searchResults,
|
||||
timestamp: Date.now()
|
||||
};
|
||||
sessionStorage.setItem(cacheKey, JSON.stringify(cacheData));
|
||||
} catch (e) {
|
||||
console.warn('Failed to cache brainstorm ideas:', e);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const clearCache = useCallback(() => {
|
||||
try {
|
||||
const keys = Object.keys(sessionStorage);
|
||||
keys.forEach(key => {
|
||||
if (key.startsWith('brainstorm_ideas_')) {
|
||||
sessionStorage.removeItem(key);
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
console.warn('Failed to clear brainstorm cache:', e);
|
||||
}
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
const handler = async (ev: any) => {
|
||||
try {
|
||||
// Store the event for refresh functionality
|
||||
(window as any).lastBrainstormEvent = ev;
|
||||
|
||||
const { prompt, seed: ideaSeed, forceRefresh = false } = ev.detail || {};
|
||||
const finalSeed = ideaSeed || prompt;
|
||||
|
||||
setBrainstormVisible(true);
|
||||
setBrainstormStage('loading');
|
||||
setLoaderMessageIndex(0);
|
||||
|
||||
// Special case: show most recent cached ideas when seed is 'cached'
|
||||
if (finalSeed === 'cached') {
|
||||
try {
|
||||
const keys = Object.keys(sessionStorage);
|
||||
let mostRecentCache: BrainstormCacheData | null = null;
|
||||
let mostRecentKey = '';
|
||||
let mostRecentTimestamp = 0;
|
||||
|
||||
for (const key of keys) {
|
||||
if (key.startsWith('brainstorm_ideas_')) {
|
||||
const cached = sessionStorage.getItem(key);
|
||||
if (cached) {
|
||||
const data = JSON.parse(cached);
|
||||
if (isBrainstormCacheData(data) && data.timestamp > mostRecentTimestamp && data.ideas.length > 0) {
|
||||
mostRecentTimestamp = data.timestamp;
|
||||
mostRecentCache = data;
|
||||
mostRecentKey = key;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (mostRecentCache !== null) {
|
||||
console.log('Showing most recent cached brainstorm ideas from:', mostRecentKey);
|
||||
setIdeas(mostRecentCache.ideas);
|
||||
setAiSearchPrompts(mostRecentCache.ideas.map((x) => x.prompt));
|
||||
setSelectedPrompt(mostRecentCache.ideas[0]?.prompt || '');
|
||||
setSearchResults(mostRecentCache.searchResults || []);
|
||||
setIsUsingCache(true);
|
||||
setBrainstormStage('select');
|
||||
return;
|
||||
} else {
|
||||
// No cached ideas found, close modal
|
||||
setBrainstormVisible(false);
|
||||
return;
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn('Failed to load cached ideas:', e);
|
||||
setBrainstormVisible(false);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Check cache first (unless force refresh)
|
||||
const personaId = corePersona?.id?.toString();
|
||||
const platformPersonaId = platformPersona?.id?.toString();
|
||||
const cacheKey = getCacheKey(finalSeed, personaId, platformPersonaId);
|
||||
|
||||
if (!forceRefresh) {
|
||||
const cached = getCachedIdeas(cacheKey);
|
||||
if (cached) {
|
||||
console.log('Using cached brainstorm ideas for:', finalSeed);
|
||||
setIdeas(cached.ideas);
|
||||
setAiSearchPrompts(cached.ideas.map((x) => x.prompt));
|
||||
setSelectedPrompt(cached.ideas[0]?.prompt || '');
|
||||
setSearchResults(cached.searchResults || []);
|
||||
setIsUsingCache(true);
|
||||
setBrainstormStage('select');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
setIsUsingCache(false);
|
||||
|
||||
// Gentle loader progression
|
||||
let step = 0;
|
||||
const interval = setInterval(() => {
|
||||
step += 1;
|
||||
setLoaderMessageIndex((idx: number) => Math.min(idx + 1, loaderMessages.length - 1));
|
||||
if (step >= loaderMessages.length - 1) clearInterval(interval);
|
||||
}, 700);
|
||||
|
||||
// First: run grounded search for the seed prompt
|
||||
let results: any[] = [];
|
||||
try {
|
||||
const sr = await fetch('/api/brainstorm/search', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ prompt: finalSeed })
|
||||
});
|
||||
if (sr.ok) {
|
||||
const data = await sr.json();
|
||||
results = data?.results || [];
|
||||
}
|
||||
} catch {}
|
||||
setSearchResults(results);
|
||||
|
||||
// Then: request persona-aware brainstorm ideas using the search results
|
||||
try {
|
||||
const ir = await fetch('/api/brainstorm/ideas', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
seed: finalSeed,
|
||||
persona: corePersona || null,
|
||||
platformPersona: platformPersona || null,
|
||||
results,
|
||||
count: 5
|
||||
})
|
||||
});
|
||||
if (ir.ok) {
|
||||
const data = await ir.json();
|
||||
const list = Array.isArray(data?.ideas) ? data.ideas : [];
|
||||
setIdeas(list);
|
||||
setAiSearchPrompts(list.map((x: any) => x.prompt));
|
||||
setSelectedPrompt(list[0]?.prompt || '');
|
||||
|
||||
// Cache the results
|
||||
setCachedIdeas(cacheKey, list, results);
|
||||
console.log('Cached brainstorm ideas for:', finalSeed);
|
||||
} else {
|
||||
setIdeas([]);
|
||||
}
|
||||
} catch {
|
||||
setIdeas([]);
|
||||
}
|
||||
|
||||
setBrainstormStage('select');
|
||||
} catch (e) {
|
||||
console.error('Brainstorm flow error:', e);
|
||||
setBrainstormVisible(false);
|
||||
}
|
||||
};
|
||||
window.addEventListener('linkedinwriter:runGoogleSearchForIdeas' as any, handler);
|
||||
return () => window.removeEventListener('linkedinwriter:runGoogleSearchForIdeas' as any, handler);
|
||||
}, [corePersona, platformPersona, loaderMessages, getCacheKey, getCachedIdeas, setCachedIdeas, setBrainstormVisible, setBrainstormStage, setLoaderMessageIndex, setIdeas, setAiSearchPrompts, setSelectedPrompt, setSearchResults, setIsUsingCache]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Brainstorm Flow UI */}
|
||||
{brainstormVisible && (
|
||||
<div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 10010, padding: 20 }}>
|
||||
<div style={{
|
||||
background: 'white',
|
||||
width: 800,
|
||||
maxWidth: '100%',
|
||||
height: '90vh',
|
||||
borderRadius: 16,
|
||||
boxShadow: '0 20px 60px rgba(0,0,0,0.25)',
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
}}>
|
||||
{/* Fixed Header */}
|
||||
<div style={{
|
||||
padding: 16,
|
||||
background: '#0a66c2',
|
||||
color: 'white',
|
||||
fontWeight: 800,
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
flexShrink: 0
|
||||
}}>
|
||||
<div>Brainstorm: Google Search Prompts</div>
|
||||
<div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
|
||||
<button
|
||||
onClick={() => {
|
||||
// Force refresh by clearing cache and re-running
|
||||
const { prompt, seed: ideaSeed } = (window as any).lastBrainstormEvent?.detail || {};
|
||||
if (prompt || ideaSeed) {
|
||||
window.dispatchEvent(new CustomEvent('linkedinwriter:runGoogleSearchForIdeas', {
|
||||
detail: { prompt, seed: ideaSeed, forceRefresh: true }
|
||||
}));
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
background: 'rgba(255,255,255,0.2)',
|
||||
border: 'none',
|
||||
color: 'white',
|
||||
borderRadius: 6,
|
||||
padding: '4px 8px',
|
||||
cursor: 'pointer',
|
||||
fontSize: 12,
|
||||
fontWeight: 600
|
||||
}}
|
||||
title="Refresh ideas (bypass cache)"
|
||||
>
|
||||
🔄
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
clearCache();
|
||||
console.log('Brainstorm cache cleared');
|
||||
}}
|
||||
style={{
|
||||
background: 'rgba(255,255,255,0.2)',
|
||||
border: 'none',
|
||||
color: 'white',
|
||||
borderRadius: 6,
|
||||
padding: '4px 8px',
|
||||
cursor: 'pointer',
|
||||
fontSize: 12,
|
||||
fontWeight: 600
|
||||
}}
|
||||
title="Clear all cached brainstorm ideas"
|
||||
>
|
||||
🗑️
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
setBrainstormVisible(false);
|
||||
setBrainstormStage('loading');
|
||||
setLoaderMessageIndex(0);
|
||||
setAiSearchPrompts([]);
|
||||
setSelectedPrompt('');
|
||||
setSearchResults([]);
|
||||
setIdeas([]);
|
||||
}}
|
||||
style={{ background: 'rgba(255,255,255,0.2)', border: 'none', color: 'white', borderRadius: 8, padding: '6px 10px', cursor: 'pointer' }}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scrollable Content */}
|
||||
<div style={{ flex: 1, overflow: 'auto' }}>
|
||||
{brainstormStage === 'loading' && (
|
||||
<div style={{ padding: 24 }}>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 12, alignItems: 'center' }}>
|
||||
<div style={{ width: 16, height: 16, borderRadius: '50%', border: '2px solid #0a66c2', borderTopColor: 'transparent', animation: 'spin 0.8s linear infinite' }} />
|
||||
<div>
|
||||
<div style={{ fontWeight: 800, color: '#111827' }}>Preparing Google search prompts</div>
|
||||
<div style={{ marginTop: 6, color: '#374151', fontSize: 14 }}>{loaderMessages[loaderMessageIndex]}</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul style={{ margin: '12px 0 0 28px', color: '#6b7280', fontSize: 12, lineHeight: 1.6 }}>
|
||||
<li>1/4 Persona-aware analysis</li>
|
||||
<li>2/4 Seed expansion and entities</li>
|
||||
<li>3/4 Grounding and timeliness checks</li>
|
||||
<li>4/4 Output assembly</li>
|
||||
</ul>
|
||||
<style>{'@keyframes spin{to{transform:rotate(360deg)}}'}</style>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{brainstormStage === 'select' && (
|
||||
<div style={{ padding: 20 }}>
|
||||
<div style={{ marginBottom: 16, fontWeight: 700, color: '#1f2937', display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
Select one prompt to run with Google Search
|
||||
{isUsingCache && (
|
||||
<span style={{
|
||||
fontSize: 12,
|
||||
color: '#059669',
|
||||
background: '#d1fae5',
|
||||
padding: '2px 8px',
|
||||
borderRadius: 12,
|
||||
fontWeight: 500
|
||||
}}>
|
||||
📦 Cached
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ display: 'grid', gap: 12, marginBottom: 20 }}>
|
||||
{aiSearchPrompts.map((p, i) => {
|
||||
const rationale = ideas[i]?.rationale;
|
||||
return (
|
||||
<label key={i} style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'auto 1fr',
|
||||
gap: 12,
|
||||
alignItems: 'flex-start',
|
||||
border: '1px solid #e5e7eb',
|
||||
borderRadius: 10,
|
||||
padding: '12px 16px',
|
||||
cursor: 'pointer',
|
||||
transition: 'border-color 0.2s'
|
||||
}}>
|
||||
<input type="radio" name="aiPrompt" checked={selectedPrompt === p} onChange={() => setSelectedPrompt(p)} style={{ marginTop: 3 }} />
|
||||
<div>
|
||||
<div style={{ fontSize: 14, color: '#111827', fontWeight: 600, lineHeight: 1.4 }}>{p}</div>
|
||||
{rationale && <div style={{ marginTop: 6, color: '#6b7280', fontSize: 12, lineHeight: 1.3 }}>{rationale}</div>}
|
||||
</div>
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{brainstormStage === 'results' && (
|
||||
<div style={{ padding: 20 }}>
|
||||
<div style={{ marginBottom: 16, fontWeight: 700, color: '#1f2937' }}>Search Results</div>
|
||||
{searchResults.length === 0 ? (
|
||||
<div style={{ color: '#6b7280' }}>No results or search unavailable. Try another prompt.</div>
|
||||
) : (
|
||||
<div style={{ display: 'grid', gap: 12, marginBottom: 20 }}>
|
||||
{searchResults.map((r: any, idx: number) => (
|
||||
<div key={idx} style={{ border: '1px solid #e5e7eb', borderRadius: 10, padding: '12px 16px' }}>
|
||||
<div style={{ fontWeight: 700, color: '#111827', marginBottom: 4 }}>{r.title || r.name || 'Result'}</div>
|
||||
<div style={{ color: '#374151', fontSize: 13, lineHeight: 1.4 }}>{r.snippet || r.description || r.content || ''}</div>
|
||||
{r.url && (<div style={{ marginTop: 6, fontSize: 12, color: '#2563eb' }}><a href={r.url} target="_blank" rel="noreferrer">{r.url}</a></div>)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Fixed Footer */}
|
||||
{brainstormStage !== 'loading' && (
|
||||
<div style={{
|
||||
padding: '16px 20px',
|
||||
borderTop: '1px solid #e5e7eb',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
gap: 12,
|
||||
flexShrink: 0,
|
||||
backgroundColor: '#f9fafb'
|
||||
}}>
|
||||
{brainstormStage === 'select' && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => {
|
||||
// Send prompt to copilot chat input to generate a post from this prompt
|
||||
window.dispatchEvent(new CustomEvent('linkedinwriter:copilotSeedFromPrompt', { detail: { prompt: selectedPrompt } }));
|
||||
setBrainstormVisible(false);
|
||||
}}
|
||||
disabled={!selectedPrompt}
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
borderRadius: 8,
|
||||
background: selectedPrompt ? '#111827' : '#9ca3af',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
cursor: selectedPrompt ? 'pointer' : 'not-allowed',
|
||||
fontWeight: 600
|
||||
}}
|
||||
>
|
||||
Generate post from this prompt
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setBrainstormVisible(false)}
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
borderRadius: 8,
|
||||
background: 'white',
|
||||
border: '1px solid #e5e7eb',
|
||||
cursor: 'pointer',
|
||||
fontWeight: 600
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={async () => {
|
||||
// Use existing Google grounding flow via backend LinkedInService
|
||||
try {
|
||||
const resp = await fetch('/api/brainstorm/search', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ prompt: selectedPrompt })
|
||||
});
|
||||
if (resp.ok) {
|
||||
const data = await resp.json();
|
||||
setSearchResults(data?.results || []);
|
||||
setBrainstormStage('results');
|
||||
} else {
|
||||
setSearchResults([]);
|
||||
setBrainstormStage('results');
|
||||
}
|
||||
} catch {
|
||||
setSearchResults([]);
|
||||
setBrainstormStage('results');
|
||||
}
|
||||
}}
|
||||
disabled={!selectedPrompt}
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
borderRadius: 8,
|
||||
background: selectedPrompt ? '#0a66c2' : '#c7d2fe',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
cursor: selectedPrompt ? 'pointer' : 'not-allowed',
|
||||
fontWeight: 600
|
||||
}}
|
||||
>
|
||||
Run Google Search
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
{brainstormStage === 'results' && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => setBrainstormStage('select')}
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
borderRadius: 8,
|
||||
background: '#6b7280',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
fontWeight: 600
|
||||
}}
|
||||
>
|
||||
Back to Prompts
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
// Seed Copilot chat to generate a post
|
||||
window.dispatchEvent(new CustomEvent('linkedinwriter:copilotSeedFromPrompt', { detail: { prompt: selectedPrompt } }));
|
||||
setBrainstormVisible(false);
|
||||
}}
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
borderRadius: 8,
|
||||
background: '#111827',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
fontWeight: 600
|
||||
}}
|
||||
>
|
||||
Generate post from this prompt
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setBrainstormVisible(false)}
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
borderRadius: 8,
|
||||
background: '#0a66c2',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
fontWeight: 600
|
||||
}}
|
||||
>
|
||||
Done
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BrainstormFlow;
|
||||
@@ -0,0 +1,432 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import { useCopilotAction, useCopilotContext } from '@copilotkit/react-core';
|
||||
import { usePlatformPersonaContext } from '../../shared/PersonaContext/PlatformPersonaProvider';
|
||||
|
||||
const useCopilotActionTyped = useCopilotAction as any;
|
||||
|
||||
// Optional debug flag: set to true to enable verbose logs locally
|
||||
const DEBUG_LINKEDIN = false;
|
||||
|
||||
interface CopilotActionsProps {
|
||||
draft: string;
|
||||
context: string;
|
||||
userPreferences: any;
|
||||
justGeneratedContent: boolean;
|
||||
handleContextChange: (value: string) => void;
|
||||
setDraft: (draft: string) => void;
|
||||
}
|
||||
|
||||
// Note: This is implemented as a hook-like utility, not a rendered component.
|
||||
// It returns the getIntelligentSuggestions function for use by the caller.
|
||||
const CopilotActions = ({
|
||||
draft,
|
||||
context,
|
||||
userPreferences,
|
||||
justGeneratedContent,
|
||||
handleContextChange,
|
||||
setDraft
|
||||
}: CopilotActionsProps) => {
|
||||
const { corePersona, platformPersona } = usePlatformPersonaContext();
|
||||
const copilotContext = useCopilotContext();
|
||||
|
||||
// Listen for copilot seed events to open sidebar with prompt
|
||||
React.useEffect(() => {
|
||||
const handler = (ev: any) => {
|
||||
try {
|
||||
const { prompt } = ev.detail || {};
|
||||
if (!prompt) return;
|
||||
|
||||
// First, open the copilot sidebar
|
||||
const copilotButton = document.querySelector('.copilotkit-open-button') ||
|
||||
document.querySelector('[data-copilot-open]') ||
|
||||
document.querySelector('button[aria-label*="Open"]') ||
|
||||
document.querySelector('.alwrity-copilot-sidebar button') ||
|
||||
document.querySelector('[data-testid="copilot-open-button"]');
|
||||
|
||||
if (copilotButton) {
|
||||
(copilotButton as HTMLElement).click();
|
||||
|
||||
// Try context-based approach first (if available)
|
||||
if (copilotContext && typeof copilotContext === 'object') {
|
||||
try {
|
||||
// Check if context has any message sending capabilities
|
||||
if ('sendMessage' in copilotContext && typeof copilotContext.sendMessage === 'function') {
|
||||
setTimeout(() => {
|
||||
(copilotContext as any).sendMessage(prompt);
|
||||
console.log('Message sent via context');
|
||||
return;
|
||||
}, 500);
|
||||
}
|
||||
} catch (e) {
|
||||
console.log('Context-based approach failed, falling back to DOM manipulation');
|
||||
}
|
||||
}
|
||||
|
||||
// Alternative: Try to trigger the generateFromPrompt action directly
|
||||
setTimeout(() => {
|
||||
// Try to find and trigger the generateFromPrompt action
|
||||
const actionButton = document.querySelector('[data-action="generateFromPrompt"]') ||
|
||||
document.querySelector('button[title*="generateFromPrompt"]');
|
||||
if (actionButton) {
|
||||
// Set the prompt in a temporary storage for the action to pick up
|
||||
(window as any).tempPromptForGeneration = prompt;
|
||||
(actionButton as HTMLElement).click();
|
||||
console.log('Triggered generateFromPrompt action with:', prompt);
|
||||
return;
|
||||
}
|
||||
}, 200);
|
||||
|
||||
// Fallback: Wait a bit for the sidebar to open, then set the input value
|
||||
setTimeout(() => {
|
||||
// Try multiple selectors for the chat input
|
||||
const chatInput = document.querySelector('.copilotkit-chat-input') ||
|
||||
document.querySelector('textarea[placeholder*="message"]') ||
|
||||
document.querySelector('input[placeholder*="message"]') ||
|
||||
document.querySelector('.copilot-chat-input') ||
|
||||
document.querySelector('[data-testid="chat-input"]') ||
|
||||
document.querySelector('textarea[data-testid="chat-input"]') ||
|
||||
document.querySelector('.copilotkit-chat-input textarea') ||
|
||||
document.querySelector('.copilotkit-chat-input input') ||
|
||||
document.querySelector('textarea[data-copilot-input]') ||
|
||||
document.querySelector('input[data-copilot-input]');
|
||||
|
||||
if (chatInput) {
|
||||
const inputElement = chatInput as HTMLInputElement | HTMLTextAreaElement;
|
||||
|
||||
// Check if input is disabled or read-only
|
||||
if (inputElement.disabled || inputElement.readOnly) {
|
||||
console.warn('Input is disabled or read-only, attempting to enable it');
|
||||
inputElement.disabled = false;
|
||||
inputElement.readOnly = false;
|
||||
inputElement.removeAttribute('disabled');
|
||||
inputElement.removeAttribute('readonly');
|
||||
}
|
||||
|
||||
// Clear any existing value first
|
||||
inputElement.value = '';
|
||||
|
||||
// Set the new value
|
||||
inputElement.value = prompt;
|
||||
|
||||
// Focus the input
|
||||
inputElement.focus();
|
||||
|
||||
// Trigger multiple events to ensure React state updates
|
||||
const inputEvent = new Event('input', { bubbles: true, cancelable: true });
|
||||
const changeEvent = new Event('change', { bubbles: true, cancelable: true });
|
||||
const keyupEvent = new Event('keyup', { bubbles: true, cancelable: true });
|
||||
|
||||
// Set the target property for React synthetic events
|
||||
Object.defineProperty(inputEvent, 'target', { value: inputElement, enumerable: true });
|
||||
Object.defineProperty(changeEvent, 'target', { value: inputElement, enumerable: true });
|
||||
Object.defineProperty(keyupEvent, 'target', { value: inputElement, enumerable: true });
|
||||
|
||||
// Dispatch events in sequence
|
||||
inputElement.dispatchEvent(inputEvent);
|
||||
inputElement.dispatchEvent(changeEvent);
|
||||
inputElement.dispatchEvent(keyupEvent);
|
||||
|
||||
// Try to trigger a React synthetic event with more properties
|
||||
const syntheticEvent = new Event('input', { bubbles: true, cancelable: true });
|
||||
Object.defineProperty(syntheticEvent, 'target', { value: inputElement, enumerable: true });
|
||||
Object.defineProperty(syntheticEvent, 'currentTarget', { value: inputElement, enumerable: true });
|
||||
Object.defineProperty(syntheticEvent, 'nativeEvent', { value: syntheticEvent, enumerable: true });
|
||||
inputElement.dispatchEvent(syntheticEvent);
|
||||
|
||||
// Also try to trigger a focus event to ensure the input is active
|
||||
const focusEvent = new Event('focus', { bubbles: true, cancelable: true });
|
||||
inputElement.dispatchEvent(focusEvent);
|
||||
|
||||
// Try to find and enable the send button if it exists
|
||||
setTimeout(() => {
|
||||
const sendButton = document.querySelector('button[type="submit"]') ||
|
||||
document.querySelector('button[data-copilot-send]') ||
|
||||
document.querySelector('.copilotkit-send-button') ||
|
||||
document.querySelector('button[aria-label*="Send"]') ||
|
||||
document.querySelector('button[title*="Send"]');
|
||||
|
||||
if (sendButton) {
|
||||
// Remove disabled attribute if it exists
|
||||
(sendButton as HTMLButtonElement).disabled = false;
|
||||
(sendButton as HTMLButtonElement).removeAttribute('disabled');
|
||||
console.log('Send button enabled');
|
||||
|
||||
// Try to automatically send the message after a short delay
|
||||
setTimeout(() => {
|
||||
if (!(sendButton as HTMLButtonElement).disabled) {
|
||||
(sendButton as HTMLButtonElement).click();
|
||||
console.log('Message sent automatically');
|
||||
}
|
||||
}, 500);
|
||||
|
||||
// Alternative: Try to simulate Enter key press
|
||||
setTimeout(() => {
|
||||
const enterEvent = new KeyboardEvent('keydown', {
|
||||
key: 'Enter',
|
||||
code: 'Enter',
|
||||
keyCode: 13,
|
||||
which: 13,
|
||||
bubbles: true,
|
||||
cancelable: true
|
||||
});
|
||||
inputElement.dispatchEvent(enterEvent);
|
||||
|
||||
const enterUpEvent = new KeyboardEvent('keyup', {
|
||||
key: 'Enter',
|
||||
code: 'Enter',
|
||||
keyCode: 13,
|
||||
which: 13,
|
||||
bubbles: true,
|
||||
cancelable: true
|
||||
});
|
||||
inputElement.dispatchEvent(enterUpEvent);
|
||||
console.log('Enter key simulated');
|
||||
}, 600);
|
||||
}
|
||||
}, 100);
|
||||
|
||||
console.log('Copilot sidebar opened with prompt:', prompt);
|
||||
console.log('Input element details:', {
|
||||
value: inputElement.value,
|
||||
disabled: inputElement.disabled,
|
||||
readOnly: inputElement.readOnly,
|
||||
className: inputElement.className,
|
||||
id: inputElement.id
|
||||
});
|
||||
} else {
|
||||
console.warn('Could not find copilot chat input to prefill. Available elements:',
|
||||
Array.from(document.querySelectorAll('textarea, input')).map(el => ({
|
||||
tag: el.tagName,
|
||||
className: el.className,
|
||||
placeholder: el.getAttribute('placeholder'),
|
||||
id: el.id,
|
||||
'data-copilot-input': el.getAttribute('data-copilot-input')
|
||||
}))
|
||||
);
|
||||
}
|
||||
}, 1000); // Increased timeout to ensure sidebar is fully loaded
|
||||
} else {
|
||||
console.warn('Could not find copilot sidebar button to open. Available buttons:',
|
||||
Array.from(document.querySelectorAll('button')).map(btn => ({
|
||||
className: btn.className,
|
||||
text: btn.textContent?.trim(),
|
||||
'aria-label': btn.getAttribute('aria-label')
|
||||
}))
|
||||
);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Error handling copilot seed event:', e);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('linkedinwriter:copilotSeedFromPrompt' as any, handler);
|
||||
return () => window.removeEventListener('linkedinwriter:copilotSeedFromPrompt' as any, handler);
|
||||
}, []);
|
||||
|
||||
// Allow external prompts to trigger content generation
|
||||
useCopilotActionTyped({
|
||||
name: 'generateFromPrompt',
|
||||
description: 'Generate LinkedIn content from a specific prompt or idea',
|
||||
parameters: [
|
||||
{ name: 'prompt', type: 'string', description: 'The prompt or idea to generate content from', required: true }
|
||||
],
|
||||
handler: async ({ prompt }: { prompt: string }) => {
|
||||
// Check for temporary prompt from brainstorm flow
|
||||
const finalPrompt = prompt || (window as any).tempPromptForGeneration;
|
||||
|
||||
if (!finalPrompt) {
|
||||
return { success: false, message: 'No prompt provided' };
|
||||
}
|
||||
|
||||
// Clear the temporary prompt
|
||||
if ((window as any).tempPromptForGeneration) {
|
||||
delete (window as any).tempPromptForGeneration;
|
||||
}
|
||||
|
||||
// Set the prompt as context and trigger generation
|
||||
handleContextChange(finalPrompt);
|
||||
|
||||
// Use the existing LinkedIn post generation action
|
||||
try {
|
||||
// This will trigger the existing generateLinkedInPost action
|
||||
return {
|
||||
success: true,
|
||||
message: `Generating LinkedIn content from prompt: "${finalPrompt}"`,
|
||||
prompt: finalPrompt
|
||||
};
|
||||
} catch (error) {
|
||||
return { success: false, message: 'Failed to generate content from prompt' };
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Allow Copilot to edit the draft with specific operations
|
||||
useCopilotActionTyped({
|
||||
name: 'editLinkedInDraft',
|
||||
description: 'Apply a quick style or structural edit to the current LinkedIn draft',
|
||||
parameters: [
|
||||
{ name: 'operation', type: 'string', description: 'The edit operation to perform', required: true, enum: ['Casual', 'Professional', 'TightenHook', 'AddCTA', 'Shorten', 'Lengthen'] }
|
||||
],
|
||||
handler: async ({ operation }: { operation: string }) => {
|
||||
const currentDraft = draft || '';
|
||||
if (!currentDraft) {
|
||||
return { success: false, message: 'No draft content to edit' };
|
||||
}
|
||||
|
||||
let editedContent = currentDraft;
|
||||
|
||||
switch (operation) {
|
||||
case 'Casual':
|
||||
editedContent = currentDraft.replace(/\b(utilize|implement|facilitate|leverage)\b/gi, (match) => {
|
||||
const casual = { utilize: 'use', implement: 'put in place', facilitate: 'help', leverage: 'use' };
|
||||
return casual[match.toLowerCase() as keyof typeof casual] || match;
|
||||
});
|
||||
editedContent = editedContent.replace(/\./g, '! 😊');
|
||||
break;
|
||||
|
||||
case 'Professional':
|
||||
editedContent = currentDraft.replace(/\b(use|put in place|help)\b/gi, (match) => {
|
||||
const professional = { use: 'utilize', 'put in place': 'implement', help: 'facilitate' };
|
||||
return professional[match.toLowerCase() as keyof typeof professional] || match;
|
||||
});
|
||||
editedContent = editedContent.replace(/! 😊/g, '.');
|
||||
break;
|
||||
|
||||
case 'TightenHook':
|
||||
const lines = currentDraft.split('\n');
|
||||
if (lines.length > 0) {
|
||||
const firstLine = lines[0];
|
||||
const tightened = firstLine.length > 100 ? firstLine.substring(0, 100) + '...' : firstLine;
|
||||
lines[0] = tightened;
|
||||
editedContent = lines.join('\n');
|
||||
}
|
||||
break;
|
||||
|
||||
case 'AddCTA':
|
||||
if (!/\b(call now|sign up|join|try|learn more|cta|comment|share|connect|message|dm|reach out)\b/i.test(currentDraft)) {
|
||||
editedContent = currentDraft + '\n\nWhat are your thoughts on this? Share your experience in the comments below!';
|
||||
}
|
||||
break;
|
||||
|
||||
case 'Shorten':
|
||||
if (currentDraft.length > 200) {
|
||||
editedContent = currentDraft.substring(0, 200) + '...';
|
||||
}
|
||||
break;
|
||||
|
||||
case 'Lengthen':
|
||||
if (currentDraft.length < 500) {
|
||||
editedContent = currentDraft + '\n\nThis approach has shown remarkable results in our industry. The key is to maintain consistency while adapting to changing market conditions.';
|
||||
}
|
||||
break;
|
||||
|
||||
default:
|
||||
return { success: false, message: 'Unknown operation' };
|
||||
}
|
||||
|
||||
// Use the edit action to show the diff preview
|
||||
window.dispatchEvent(new CustomEvent('linkedinwriter:applyEdit', {
|
||||
detail: { target: editedContent }
|
||||
}));
|
||||
|
||||
return { success: true, message: `Draft ${operation.toLowerCase()} applied`, content: editedContent };
|
||||
}
|
||||
});
|
||||
|
||||
// Intelligent, stage-aware suggestions (memoized to prevent infinite re-rendering)
|
||||
const getIntelligentSuggestions = useMemo(() => {
|
||||
const hasContent = draft && draft.trim().length > 0;
|
||||
const hasCTA = /\b(call now|sign up|join|try|learn more|cta|comment|share|connect|message|dm|reach out)\b/i.test(draft || '');
|
||||
const hasHashtags = /#[A-Za-z0-9_]+/.test(draft || '');
|
||||
const isLong = (draft || '').length > 500;
|
||||
|
||||
// Debug logging for suggestions
|
||||
if (DEBUG_LINKEDIN) console.log('[LinkedIn Writer] Generating suggestions:', {
|
||||
hasContent,
|
||||
justGeneratedContent,
|
||||
draftLength: draft?.length || 0
|
||||
});
|
||||
|
||||
if (!hasContent) {
|
||||
// Initial suggestions for content creation
|
||||
const initialSuggestions = [
|
||||
{ title: '📝 LinkedIn Post', message: 'Use tool generateLinkedInPost to create a professional LinkedIn post for your industry.' },
|
||||
{ title: '📄 Article', message: 'Use tool generateLinkedInArticle to write a thought leadership article.' },
|
||||
{ title: '🎠 Carousel', message: 'Use tool generateLinkedInCarousel to create a multi-slide carousel presentation.' },
|
||||
{ title: '🎬 Video Script', message: 'Use tool generateLinkedInVideoScript to draft a video script for LinkedIn.' },
|
||||
{ title: '💬 Comment Response', message: 'Use tool generateLinkedInCommentResponse to craft a professional comment reply.' },
|
||||
{ title: '🖼️ Generate Post Image', message: 'Use tool generateLinkedInImagePrompts to create professional images for your LinkedIn content.' },
|
||||
{ title: '🎨 Visual Content', message: 'Create engaging visual content with AI-generated images optimized for LinkedIn.' }
|
||||
];
|
||||
console.log('[LinkedIn Writer] Initial suggestions:', initialSuggestions);
|
||||
return initialSuggestions;
|
||||
} else {
|
||||
// Refinement suggestions for existing content - use direct edit actions
|
||||
const refinementSuggestions = [
|
||||
{ title: '🙂 Make it casual', message: 'Use tool editLinkedInDraft with operation Casual' },
|
||||
{ title: '💼 Make it professional', message: 'Use tool editLinkedInDraft with operation Professional' },
|
||||
{ title: '✨ Tighten hook', message: 'Use tool editLinkedInDraft with operation TightenHook' },
|
||||
{ title: '📣 Add a CTA', message: 'Use tool editLinkedInDraft with operation AddCTA' },
|
||||
{ title: '✂️ Shorten', message: 'Use tool editLinkedInDraft with operation Shorten' },
|
||||
{ title: '➕ Lengthen', message: 'Use tool editLinkedInDraft with operation Lengthen' }
|
||||
];
|
||||
|
||||
// Add special suggestions when content was just generated
|
||||
if (justGeneratedContent) {
|
||||
console.log('[LinkedIn Writer] Adding post-generation suggestions');
|
||||
refinementSuggestions.unshift(
|
||||
{
|
||||
title: '🎉 Content Generated! Next Steps:',
|
||||
message: 'Great! Your content is ready. Now let\'s enhance it with images and make it perfect for LinkedIn.'
|
||||
},
|
||||
{
|
||||
title: '🖼️ Generate Post Image',
|
||||
message: 'Use tool generateLinkedInImagePrompts to create professional images for this LinkedIn post'
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// Add contextual suggestions based on content analysis
|
||||
if (!hasCTA) {
|
||||
refinementSuggestions.push({ title: '📣 Add CTA', message: 'Use tool editLinkedInDraft with operation AddCTA' });
|
||||
}
|
||||
if (!hasHashtags) {
|
||||
refinementSuggestions.push({ title: '🏷️ Add hashtags', message: 'Use tool addLinkedInHashtags' });
|
||||
}
|
||||
if (isLong) {
|
||||
refinementSuggestions.push({ title: '📝 Summarize intro', message: 'Use tool editLinkedInDraft with operation Shorten' });
|
||||
}
|
||||
|
||||
// Add image generation suggestion when there's content
|
||||
if (draft && draft.trim().length > 0) {
|
||||
if (DEBUG_LINKEDIN) console.log('[LinkedIn Writer] Adding image generation suggestion');
|
||||
// Make image generation suggestion more prominent
|
||||
refinementSuggestions.push({
|
||||
title: '🖼️ Generate Post Image',
|
||||
message: 'Use tool generateLinkedInImagePrompts to create professional images for this LinkedIn post'
|
||||
});
|
||||
|
||||
// Add contextual image suggestions based on content type
|
||||
if (draft.includes('digital transformation') || draft.includes('technology') || draft.includes('innovation')) {
|
||||
refinementSuggestions.push({
|
||||
title: '🚀 Tech-Focused Image',
|
||||
message: 'Use tool generateLinkedInImagePrompts to create technology-themed professional images for this post'
|
||||
});
|
||||
} else if (draft.includes('business') || draft.includes('strategy') || draft.includes('growth')) {
|
||||
refinementSuggestions.push({
|
||||
title: '💼 Business Image',
|
||||
message: 'Use tool generateLinkedInImagePrompts to create business-focused professional images for this post'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (DEBUG_LINKEDIN) console.log('[LinkedIn Writer] Final suggestions:', refinementSuggestions);
|
||||
return refinementSuggestions;
|
||||
}
|
||||
}, [draft, justGeneratedContent]);
|
||||
|
||||
// Return the suggestions function directly
|
||||
return getIntelligentSuggestions;
|
||||
};
|
||||
|
||||
export default CopilotActions;
|
||||
@@ -1,5 +1,8 @@
|
||||
import React from 'react';
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { LinkedInPreferences } from '../utils/storageUtils';
|
||||
import { PersonaChip } from '../../TextEditor/ContentPreviewHeaderComponents';
|
||||
import { usePlatformPersonaContext } from '../../shared/PersonaContext/PlatformPersonaProvider';
|
||||
import BrainstormFlow from './BrainstormFlow';
|
||||
// Temporary fix: use require for image import
|
||||
const alwrityLogo = require('../../../assets/images/alwrity_logo.png');
|
||||
|
||||
@@ -22,10 +25,59 @@ export const Header: React.FC<HeaderProps> = ({
|
||||
onClearHistory,
|
||||
getHistoryLength
|
||||
}) => {
|
||||
const [personaOverride, setPersonaOverride] = useState<any>(null);
|
||||
const { corePersona, platformPersona } = usePlatformPersonaContext();
|
||||
|
||||
// Brainstorm modal state
|
||||
const [showBrainstormModal, setShowBrainstormModal] = useState(false);
|
||||
const [seed, setSeed] = useState('');
|
||||
const [usePersona, setUsePersona] = useState(true);
|
||||
const [useGoogleSearch, setUseGoogleSearch] = useState(true);
|
||||
const [includeTrending, setIncludeTrending] = useState(false);
|
||||
const [remarketContent, setRemarketContent] = useState(false);
|
||||
const [showConfirm, setShowConfirm] = useState(false);
|
||||
const [aiSearchPrompt, setAiSearchPrompt] = useState('');
|
||||
|
||||
// BrainstormFlow state management
|
||||
const [brainstormVisible, setBrainstormVisible] = useState(false);
|
||||
const [brainstormStage, setBrainstormStage] = useState<'loading' | 'select' | 'results'>('loading');
|
||||
const [loaderMessageIndex, setLoaderMessageIndex] = useState(0);
|
||||
const [aiSearchPrompts, setAiSearchPrompts] = useState<string[]>([]);
|
||||
const [selectedPrompt, setSelectedPrompt] = useState<string>('');
|
||||
const [searchResults, setSearchResults] = useState<any[]>([]);
|
||||
const [ideas, setIdeas] = useState<{ prompt: string; rationale?: string }[]>([]);
|
||||
const [isUsingCache, setIsUsingCache] = useState(false);
|
||||
|
||||
// Check if there are cached brainstorm ideas
|
||||
const hasCachedIdeas = useMemo(() => {
|
||||
try {
|
||||
const keys = Object.keys(sessionStorage);
|
||||
return keys.some(key => {
|
||||
if (key.startsWith('brainstorm_ideas_')) {
|
||||
const cached = sessionStorage.getItem(key);
|
||||
if (cached) {
|
||||
const data = JSON.parse(cached);
|
||||
// Check if cache is less than 1 hour old and has ideas
|
||||
return Date.now() - data.timestamp < 3600000 && data.ideas && data.ideas.length > 0;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
});
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}, [showBrainstormModal]); // Re-check when modal opens
|
||||
|
||||
const handlePreferenceChange = (key: keyof LinkedInPreferences, value: any) => {
|
||||
onPreferencesChange({ [key]: value });
|
||||
};
|
||||
|
||||
const handlePersonaUpdate = (personaData: any) => {
|
||||
console.log('Persona updated in LinkedIn writer:', personaData);
|
||||
setPersonaOverride(personaData);
|
||||
// You can also save this to user preferences or pass it up to the parent component
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
background: 'linear-gradient(135deg, #0a66c2 0%, #0056b3 100%)',
|
||||
@@ -68,7 +120,6 @@ export const Header: React.FC<HeaderProps> = ({
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
onMouseEnter={() => onPreferencesModalChange(true)}
|
||||
onMouseLeave={() => onPreferencesModalChange(false)}
|
||||
>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
@@ -88,20 +139,24 @@ export const Header: React.FC<HeaderProps> = ({
|
||||
|
||||
{/* Preferences Modal */}
|
||||
{showPreferencesModal && (
|
||||
<div style={{
|
||||
position: 'absolute',
|
||||
top: '100%',
|
||||
left: '0',
|
||||
width: '400px',
|
||||
background: 'white',
|
||||
borderRadius: '12px',
|
||||
boxShadow: '0 8px 32px rgba(0, 0, 0, 0.15)',
|
||||
border: '1px solid #e9ecef',
|
||||
padding: '20px',
|
||||
zIndex: 1000,
|
||||
marginTop: '8px',
|
||||
animation: 'slideIn 0.2s ease-out'
|
||||
}}>
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: '100%',
|
||||
left: '0',
|
||||
width: '400px',
|
||||
background: 'white',
|
||||
borderRadius: '12px',
|
||||
boxShadow: '0 8px 32px rgba(0, 0, 0, 0.15)',
|
||||
border: '1px solid #e9ecef',
|
||||
padding: '20px',
|
||||
zIndex: 1000,
|
||||
marginTop: '8px',
|
||||
animation: 'slideIn 0.2s ease-out'
|
||||
}}
|
||||
onMouseEnter={() => onPreferencesModalChange(true)}
|
||||
onMouseLeave={() => onPreferencesModalChange(false)}
|
||||
>
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<h4 style={{ margin: '0 0 12px 0', color: '#333', fontSize: '16px', fontWeight: 600 }}>
|
||||
Content Preferences & Persona
|
||||
@@ -144,6 +199,7 @@ export const Header: React.FC<HeaderProps> = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Interactive Persona Chip */}
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@@ -153,18 +209,11 @@ export const Header: React.FC<HeaderProps> = ({
|
||||
borderRadius: '6px',
|
||||
border: '1px solid #e2e8f0'
|
||||
}}>
|
||||
<div style={{ display: 'flex', gap: '4px' }}>
|
||||
<span style={{ fontSize: '16px' }}>🎭</span>
|
||||
<span style={{ fontSize: '16px' }}>🎯</span>
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontSize: '13px', fontWeight: '600', color: '#2d3748', marginBottom: '2px' }}>
|
||||
The Digital Strategist (The Insightful Guide)
|
||||
</div>
|
||||
<div style={{ fontSize: '11px', color: '#666' }}>
|
||||
88% accuracy | Platform: LinkedIn Optimized
|
||||
</div>
|
||||
</div>
|
||||
<PersonaChip
|
||||
platform="linkedin"
|
||||
userId={1}
|
||||
onPersonaUpdate={handlePersonaUpdate}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
@@ -173,7 +222,7 @@ export const Header: React.FC<HeaderProps> = ({
|
||||
color: '#666',
|
||||
fontStyle: 'italic'
|
||||
}}>
|
||||
Hover over persona for detailed information
|
||||
Click persona to edit writing style, tone, and preferences
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -347,7 +396,50 @@ export const Header: React.FC<HeaderProps> = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', gap: 12 }}>
|
||||
<div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
|
||||
{/* Today's Tasks Button */}
|
||||
<button
|
||||
onClick={() => window.dispatchEvent(new CustomEvent('linkedinwriter:showTodaysTasks'))}
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
background: 'rgba(255, 255, 255, 0.1)',
|
||||
color: 'white',
|
||||
border: '1px solid rgba(255, 255, 255, 0.2)',
|
||||
borderRadius: 6,
|
||||
cursor: 'pointer',
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 6
|
||||
}}
|
||||
title="View today's tasks"
|
||||
>
|
||||
📅 Today's Tasks
|
||||
</button>
|
||||
|
||||
{/* Brainstorm Ideas Button */}
|
||||
<button
|
||||
onClick={() => setShowBrainstormModal(true)}
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
background: 'rgba(255, 255, 255, 0.1)',
|
||||
color: 'white',
|
||||
border: '1px solid rgba(255, 255, 255, 0.2)',
|
||||
borderRadius: 6,
|
||||
cursor: 'pointer',
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 6
|
||||
}}
|
||||
title="Brainstorm content ideas"
|
||||
>
|
||||
💡 Brainstorm Ideas
|
||||
</button>
|
||||
|
||||
{/* Clear Memory Button */}
|
||||
<button
|
||||
onClick={onClearHistory}
|
||||
style={{
|
||||
@@ -366,6 +458,390 @@ export const Header: React.FC<HeaderProps> = ({
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Initial Brainstorm Modal */}
|
||||
{showBrainstormModal && (
|
||||
<div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 10000 }}>
|
||||
<div style={{ background: 'white', width: 720, maxWidth: '92vw', borderRadius: 16, boxShadow: '0 20px 60px rgba(0,0,0,0.25)', overflow: 'hidden' }}>
|
||||
{/* Header */}
|
||||
<div style={{ padding: '18px 20px', background: 'linear-gradient(135deg, #0a66c2 0%, #125ea2 100%)', color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<div style={{ fontWeight: 800, fontSize: 16 }}>Brainstorm LinkedIn Content Ideas</div>
|
||||
<button onClick={() => setShowBrainstormModal(false)} style={{ background: 'rgba(255,255,255,0.2)', border: 'none', color: 'white', borderRadius: 8, padding: '6px 10px', cursor: 'pointer' }}>✕</button>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div style={{ padding: 20, display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 16 }}>
|
||||
<div>
|
||||
<div style={{ marginBottom: 10, fontWeight: 700, color: '#1f2937' }}>Options</div>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
|
||||
<label
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
border: '1px solid #e5e7eb',
|
||||
borderRadius: 10,
|
||||
padding: '10px 12px',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.2s ease'
|
||||
}}
|
||||
title="Use your personalized writing persona to generate content that matches your unique voice, tone, and style preferences."
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.borderColor = '#0a66c2';
|
||||
e.currentTarget.style.backgroundColor = '#f8f9ff';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.borderColor = '#e5e7eb';
|
||||
e.currentTarget.style.backgroundColor = 'transparent';
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={usePersona}
|
||||
onChange={(e) => setUsePersona(e.target.checked)}
|
||||
style={{
|
||||
accentColor: '#0a66c2',
|
||||
transform: 'scale(1.1)'
|
||||
}}
|
||||
/>
|
||||
<div style={{ fontWeight: 600, color: '#1f2937' }}>Use Persona</div>
|
||||
</label>
|
||||
|
||||
<label
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
border: '1px solid #e5e7eb',
|
||||
borderRadius: 10,
|
||||
padding: '10px 12px',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.2s ease'
|
||||
}}
|
||||
title="Enable Google Search to find current, relevant information and trending topics for your content ideas."
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.borderColor = '#0a66c2';
|
||||
e.currentTarget.style.backgroundColor = '#f8f9ff';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.borderColor = '#e5e7eb';
|
||||
e.currentTarget.style.backgroundColor = 'transparent';
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={useGoogleSearch}
|
||||
onChange={(e) => setUseGoogleSearch(e.target.checked)}
|
||||
style={{
|
||||
accentColor: '#0a66c2',
|
||||
transform: 'scale(1.1)'
|
||||
}}
|
||||
/>
|
||||
<div style={{ fontWeight: 600, color: '#1f2937' }}>Google Search</div>
|
||||
</label>
|
||||
|
||||
<label
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
border: '1px solid #e5e7eb',
|
||||
borderRadius: 10,
|
||||
padding: '10px 12px',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.2s ease'
|
||||
}}
|
||||
title="Include trending topics and current events to make your content more timely and engaging."
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.borderColor = '#0a66c2';
|
||||
e.currentTarget.style.backgroundColor = '#f8f9ff';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.borderColor = '#e5e7eb';
|
||||
e.currentTarget.style.backgroundColor = 'transparent';
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={includeTrending}
|
||||
onChange={(e) => setIncludeTrending(e.target.checked)}
|
||||
style={{
|
||||
accentColor: '#0a66c2',
|
||||
transform: 'scale(1.1)'
|
||||
}}
|
||||
/>
|
||||
<div style={{ fontWeight: 600, color: '#1f2937' }}>Trending Topics</div>
|
||||
</label>
|
||||
|
||||
<label
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
border: '1px solid #e5e7eb',
|
||||
borderRadius: 10,
|
||||
padding: '10px 12px',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.2s ease'
|
||||
}}
|
||||
title="Repurpose and remarket your existing high-performing content into new formats and angles."
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.borderColor = '#0a66c2';
|
||||
e.currentTarget.style.backgroundColor = '#f8f9ff';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.borderColor = '#e5e7eb';
|
||||
e.currentTarget.style.backgroundColor = 'transparent';
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={remarketContent}
|
||||
onChange={(e) => setRemarketContent(e.target.checked)}
|
||||
style={{
|
||||
accentColor: '#0a66c2',
|
||||
transform: 'scale(1.1)'
|
||||
}}
|
||||
/>
|
||||
<div style={{ fontWeight: 600, color: '#1f2937' }}>Remarket Content</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: 16 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 6 }}>
|
||||
<div style={{ fontWeight: 700, color: '#1f2937' }}>Idea Seed (optional)</div>
|
||||
</div>
|
||||
<textarea
|
||||
value={seed}
|
||||
onChange={(e) => setSeed(e.target.value)}
|
||||
placeholder={corePersona?.core_belief ? `Ex: Show how "${corePersona.core_belief}" applies to SMB founders this quarter` : 'Add a theme, problem, or audience'}
|
||||
rows={3}
|
||||
style={{ width: '100%', border: '1px solid #e5e7eb', borderRadius: 10, padding: '10px 12px', fontSize: 14, resize: 'vertical' }}
|
||||
/>
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 8 }}>
|
||||
<div style={{ fontSize: 12, color: '#6b7280' }}>
|
||||
Alwrity It requires Google Search enabled and an idea seed with at least 4 words.
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
const words = (seed || '').trim().split(/\s+/).filter(Boolean);
|
||||
if (!useGoogleSearch || words.length < 4) return;
|
||||
const personaLine = corePersona ? `${corePersona.persona_name} (${corePersona.archetype})` : 'the user\'s writing persona';
|
||||
const tone = (corePersona as any)?.tonal_range?.default_tone || (platformPersona as any)?.tonal_range?.default_tone || 'professional';
|
||||
const goTo = corePersona?.linguistic_fingerprint?.lexical_features?.go_to_words?.slice(0,5)?.join(', ');
|
||||
const platformHints = platformPersona ? `Respect LinkedIn constraints like character limits and engagement patterns.` : '';
|
||||
const trending = includeTrending ? 'Blend industry trending topics.' : '';
|
||||
const repurpose = remarketContent ? 'Consider repurposing top-performing content into new angles.' : '';
|
||||
const prompt = `You are an expert LinkedIn content strategist writing in a ${tone} tone for ${personaLine}. Generate a list of highly-relevant, specific topic ideas based on this seed: "${seed}". Prioritize originality, practical value, and thought leadership. ${platformHints} ${trending} ${repurpose} Use current (2024–2025) language and avoid generic suggestions.`.trim();
|
||||
setAiSearchPrompt(prompt);
|
||||
setShowConfirm(true);
|
||||
}}
|
||||
disabled={!(useGoogleSearch && (seed || '').trim().split(/\s+/).filter(Boolean).length >= 4)}
|
||||
style={{ padding: '8px 12px', borderRadius: 8, border: '1px solid #0a66c2', background: useGoogleSearch && (seed || '').trim().split(/\s+/).filter(Boolean).length >= 4 ? '#0a66c2' : '#c7d2fe', color: 'white', fontWeight: 800, cursor: useGoogleSearch && (seed || '').trim().split(/\s+/).filter(Boolean).length >= 4 ? 'pointer' : 'not-allowed' }}
|
||||
>
|
||||
Alwrity It
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div style={{ fontWeight: 700, color: '#1f2937', marginBottom: 6 }}>Quick Actions</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
<button
|
||||
onClick={() => {
|
||||
if (hasCachedIdeas) {
|
||||
window.dispatchEvent(new CustomEvent('linkedinwriter:runGoogleSearchForIdeas', {
|
||||
detail: { prompt: 'View cached ideas', seed: 'cached', forceRefresh: false }
|
||||
}));
|
||||
} else {
|
||||
window.dispatchEvent(new CustomEvent('linkedinwriter:runGoogleSearchForIdeas', {
|
||||
detail: { usePersona, useGoogleSearch, includeTrending, remarketContent, seed }
|
||||
}));
|
||||
}
|
||||
setShowBrainstormModal(false);
|
||||
setBrainstormVisible(true);
|
||||
}}
|
||||
style={{
|
||||
padding: '12px 16px',
|
||||
borderRadius: 8,
|
||||
background: hasCachedIdeas ? '#0a66c2' : '#6b7280',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
fontWeight: 800,
|
||||
fontSize: 14
|
||||
}}
|
||||
>
|
||||
{hasCachedIdeas ? 'View Previous Ideas' : 'Generate Ideas'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Suggestions Section */}
|
||||
<div style={{ marginTop: 20 }}>
|
||||
<div style={{ fontWeight: 700, color: '#1f2937', marginBottom: 8 }}>💡 Suggestions</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||
<button
|
||||
onClick={() => setSeed('AI and automation trends in 2024')}
|
||||
style={{
|
||||
padding: '8px 12px',
|
||||
background: '#f8f9ff',
|
||||
border: '1px solid #e5e7eb',
|
||||
borderRadius: 6,
|
||||
cursor: 'pointer',
|
||||
fontSize: 12,
|
||||
color: '#374151',
|
||||
textAlign: 'left',
|
||||
transition: 'all 0.2s ease'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = '#e0e7ff';
|
||||
e.currentTarget.style.borderColor = '#0a66c2';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = '#f8f9ff';
|
||||
e.currentTarget.style.borderColor = '#e5e7eb';
|
||||
}}
|
||||
>
|
||||
🤖 AI and automation trends
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setSeed('Remote work productivity tips')}
|
||||
style={{
|
||||
padding: '8px 12px',
|
||||
background: '#f8f9ff',
|
||||
border: '1px solid #e5e7eb',
|
||||
borderRadius: 6,
|
||||
cursor: 'pointer',
|
||||
fontSize: 12,
|
||||
color: '#374151',
|
||||
textAlign: 'left',
|
||||
transition: 'all 0.2s ease'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = '#e0e7ff';
|
||||
e.currentTarget.style.borderColor = '#0a66c2';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = '#f8f9ff';
|
||||
e.currentTarget.style.borderColor = '#e5e7eb';
|
||||
}}
|
||||
>
|
||||
🏠 Remote work productivity
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setSeed('Leadership lessons from failures')}
|
||||
style={{
|
||||
padding: '8px 12px',
|
||||
background: '#f8f9ff',
|
||||
border: '1px solid #e5e7eb',
|
||||
borderRadius: 6,
|
||||
cursor: 'pointer',
|
||||
fontSize: 12,
|
||||
color: '#374151',
|
||||
textAlign: 'left',
|
||||
transition: 'all 0.2s ease'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = '#e0e7ff';
|
||||
e.currentTarget.style.borderColor = '#0a66c2';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = '#f8f9ff';
|
||||
e.currentTarget.style.borderColor = '#e5e7eb';
|
||||
}}
|
||||
>
|
||||
🎯 Leadership lessons
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setSeed('Industry insights and predictions')}
|
||||
style={{
|
||||
padding: '8px 12px',
|
||||
background: '#f8f9ff',
|
||||
border: '1px solid #e5e7eb',
|
||||
borderRadius: 6,
|
||||
cursor: 'pointer',
|
||||
fontSize: 12,
|
||||
color: '#374151',
|
||||
textAlign: 'left',
|
||||
transition: 'all 0.2s ease'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = '#e0e7ff';
|
||||
e.currentTarget.style.borderColor = '#0a66c2';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = '#f8f9ff';
|
||||
e.currentTarget.style.borderColor = '#e5e7eb';
|
||||
}}
|
||||
>
|
||||
📈 Industry insights
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div style={{ padding: 16, borderTop: '1px solid #e5e7eb', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: '#f9fafb' }}>
|
||||
<div style={{ color: '#6b7280', fontSize: 12 }}>
|
||||
{hasCachedIdeas ? 'You have previously generated ideas. Click "View Previous Ideas" to see them.' : 'These settings guide idea generation. You can fine-tune results in the editor.'}
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 10 }}>
|
||||
<button onClick={() => setShowBrainstormModal(false)} style={{ padding: '10px 16px', borderRadius: 8, background: 'white', border: '1px solid #e5e7eb', cursor: 'pointer', fontWeight: 700 }}>Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Confirmation Modal for AI Search Prompt */}
|
||||
{showConfirm && (
|
||||
<div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 10001 }}>
|
||||
<div style={{ background: 'white', width: 680, maxWidth: '92vw', borderRadius: 16, boxShadow: '0 20px 60px rgba(0,0,0,0.25)', overflow: 'hidden' }}>
|
||||
<div style={{ padding: '16px 18px', background: '#0a66c2', color: 'white', fontWeight: 800 }}>Confirm Google Search Prompt</div>
|
||||
<div style={{ padding: 16 }}>
|
||||
<div style={{ fontSize: 13, color: '#374151', marginBottom: 8 }}>We crafted this AI prompt using your persona and seed. Review and confirm to run Google Search for topic ideas.</div>
|
||||
<textarea value={aiSearchPrompt} onChange={(e) => setAiSearchPrompt(e.target.value)} rows={6} style={{ width: '100%', border: '1px solid #e5e7eb', borderRadius: 10, padding: '10px 12px', fontSize: 13 }} />
|
||||
</div>
|
||||
<div style={{ padding: 12, borderTop: '1px solid #e5e7eb', display: 'flex', justifyContent: 'flex-end', gap: 10, background: '#f9fafb' }}>
|
||||
<button onClick={() => setShowConfirm(false)} style={{ padding: '8px 12px', borderRadius: 8, background: 'white', border: '1px solid #e5e7eb', cursor: 'pointer', fontWeight: 700 }}>Back</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
window.dispatchEvent(new CustomEvent('linkedinwriter:runGoogleSearchForIdeas', { detail: { prompt: aiSearchPrompt, seed, usePersona, includeTrending, remarketContent } }));
|
||||
setShowConfirm(false);
|
||||
setShowBrainstormModal(false);
|
||||
setBrainstormVisible(true);
|
||||
}}
|
||||
style={{ padding: '8px 12px', borderRadius: 8, background: '#0a66c2', color: 'white', border: 'none', cursor: 'pointer', fontWeight: 800 }}
|
||||
>
|
||||
Run Google Search
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* BrainstormFlow Component */}
|
||||
<BrainstormFlow
|
||||
brainstormVisible={brainstormVisible}
|
||||
setBrainstormVisible={setBrainstormVisible}
|
||||
brainstormStage={brainstormStage}
|
||||
setBrainstormStage={setBrainstormStage}
|
||||
loaderMessageIndex={loaderMessageIndex}
|
||||
setLoaderMessageIndex={setLoaderMessageIndex}
|
||||
aiSearchPrompts={aiSearchPrompts}
|
||||
setAiSearchPrompts={setAiSearchPrompts}
|
||||
selectedPrompt={selectedPrompt}
|
||||
setSelectedPrompt={setSelectedPrompt}
|
||||
searchResults={searchResults}
|
||||
setSearchResults={setSearchResults}
|
||||
ideas={ideas}
|
||||
setIdeas={setIdeas}
|
||||
isUsingCache={isUsingCache}
|
||||
setIsUsingCache={setIsUsingCache}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -9,6 +9,8 @@ export { Header } from './Header';
|
||||
export { ContentEditor } from './ContentEditor';
|
||||
export { LoadingIndicator } from './LoadingIndicator';
|
||||
export { WelcomeMessage } from './WelcomeMessage';
|
||||
export { FeatureCarousel } from './FeatureCarousel';
|
||||
export { InfoModals } from './InfoModals';
|
||||
export { ProgressTracker } from './ProgressTracker';
|
||||
export { ContentRecommendations } from './ContentRecommendations';
|
||||
export { CopilotRecommendationsMessage } from './CopilotRecommendationsMessage';
|
||||
@@ -21,3 +23,7 @@ export { default as ImageGenerationDemo } from './ImageGenerationDemo';
|
||||
export { default as ImageGenerationTest } from './ImageGenerationTest';
|
||||
|
||||
// Persona Integration Components - Now integrated into main LinkedInWriter
|
||||
|
||||
// Refactored Components
|
||||
export { default as BrainstormFlow } from './BrainstormFlow';
|
||||
export { default as CopilotActions } from './CopilotActions';
|
||||
|
||||
@@ -1,14 +1,5 @@
|
||||
import React, { useMemo, useState, useEffect } from 'react';
|
||||
|
||||
// Extend HTMLDivElement interface for custom tooltip properties
|
||||
interface ExtendedDivElement extends HTMLDivElement {
|
||||
_researchTooltip?: HTMLDivElement | null;
|
||||
_citationsTooltip?: HTMLDivElement | null;
|
||||
_searchQueriesTooltip?: HTMLDivElement | null;
|
||||
_qualityTooltip?: HTMLDivElement | null;
|
||||
_researchTooltipTimeout?: NodeJS.Timeout | null;
|
||||
_qualityTooltipTimeout?: NodeJS.Timeout | null;
|
||||
}
|
||||
import React from 'react';
|
||||
import { MainContentPreviewHeader, ContentPreviewHeaderWithModals } from './ContentPreviewHeaderComponents/index';
|
||||
|
||||
interface ContentPreviewHeaderProps {
|
||||
researchSources?: any[];
|
||||
@@ -23,828 +14,11 @@ interface ContentPreviewHeaderProps {
|
||||
topic?: string;
|
||||
}
|
||||
|
||||
const ContentPreviewHeader: React.FC<ContentPreviewHeaderProps> = ({
|
||||
researchSources,
|
||||
citations,
|
||||
searchQueries,
|
||||
qualityMetrics,
|
||||
draft,
|
||||
showPreview,
|
||||
onPreviewToggle,
|
||||
assistantOn,
|
||||
onAssistantToggle,
|
||||
topic
|
||||
}) => {
|
||||
const formatPercent = (v?: number) => typeof v === 'number' ? `${Math.round(v * 100)}%` : '—';
|
||||
const getChipColor = (v?: number) => {
|
||||
if (typeof v !== 'number') return '#6b7280';
|
||||
if (v >= 0.8) return '#10b981';
|
||||
if (v >= 0.6) return '#f59e0b';
|
||||
return '#ef4444';
|
||||
};
|
||||
|
||||
// Memoize chips array to prevent infinite re-rendering
|
||||
const chips = useMemo(() => {
|
||||
const chipArray = qualityMetrics ? [
|
||||
{ label: 'Overall', value: qualityMetrics.overall_score },
|
||||
{ label: 'Accuracy', value: qualityMetrics.factual_accuracy },
|
||||
{ label: 'Verification', value: qualityMetrics.source_verification },
|
||||
{ label: 'Coverage', value: qualityMetrics.citation_coverage }
|
||||
] : [];
|
||||
|
||||
console.log('🔍 [ContentPreviewHeader] Chips array created:', {
|
||||
qualityMetrics: qualityMetrics,
|
||||
chips: chipArray,
|
||||
chipsLength: chipArray.length
|
||||
});
|
||||
|
||||
return chipArray;
|
||||
}, [qualityMetrics]);
|
||||
|
||||
// Helper to build descriptive chip tooltip text
|
||||
const chipDescriptions: Record<string, string> = {
|
||||
Overall: 'Overall blends accuracy, verification and coverage into a single reliability score for this draft.',
|
||||
Accuracy: 'Factual Accuracy estimates how likely statements are to be factually correct based on grounding signals.',
|
||||
Verification: 'Source Verification reflects how well claims are linked to credible sources and whether citations match claims.',
|
||||
Coverage: 'Citation Coverage indicates how much of the content is supported with citations. Higher is better.'
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
padding: '12px 16px',
|
||||
background: '#e1f5fe',
|
||||
borderBottom: '1px solid #b3e5fc',
|
||||
fontSize: '12px',
|
||||
fontWeight: '600',
|
||||
color: '#0277bd',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between'
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
|
||||
<span>{topic ? `${topic} - LinkedIn Content Preview` : 'LinkedIn Content Preview'}</span>
|
||||
|
||||
{/* Research Chip with Hover Sub-chips */}
|
||||
{((researchSources && researchSources.length > 0) || (citations && citations.length > 0) || (searchQueries && searchQueries.length > 0)) && (
|
||||
<div style={{ position: 'relative' }}>
|
||||
{/* Main Research Chip */}
|
||||
<div
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%)',
|
||||
border: '1px solid #0284c7',
|
||||
borderRadius: '999px',
|
||||
padding: '6px 14px',
|
||||
fontSize: '11px',
|
||||
fontWeight: '700',
|
||||
color: 'white',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.3s ease',
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
boxShadow: '0 2px 8px rgba(14, 165, 233, 0.3)',
|
||||
transform: 'translateZ(0)',
|
||||
userSelect: 'none'
|
||||
}}
|
||||
title="Research data available. Hover to see sources, citations, and queries."
|
||||
onMouseEnter={(e) => {
|
||||
// Clear any existing timeout
|
||||
const target = e.currentTarget as ExtendedDivElement;
|
||||
if (target._researchTooltipTimeout) {
|
||||
clearTimeout(target._researchTooltipTimeout);
|
||||
target._researchTooltipTimeout = null;
|
||||
}
|
||||
|
||||
// Create and show research sub-chips tooltip
|
||||
const tooltip = document.createElement('div');
|
||||
tooltip.style.cssText = `
|
||||
position: fixed;
|
||||
z-index: 100000;
|
||||
background: white;
|
||||
border: 1px solid #cfe9f7;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.15);
|
||||
padding: 16px;
|
||||
max-width: 400px;
|
||||
font-size: 12px;
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
transition: all 0.2s ease;
|
||||
pointer-events: auto;
|
||||
`;
|
||||
|
||||
let subChipsHtml = '<div style="margin-bottom: 12px; font-weight: 600; color: #0a66c2; font-size: 14px;">Research Data</div>';
|
||||
|
||||
// Add Sources sub-chip
|
||||
if (researchSources && researchSources.length > 0) {
|
||||
subChipsHtml += `
|
||||
<div style="display: inline-block; margin: 3px; padding: 6px 12px; background: #f0f9ff; border: 1px solid #0ea5e9; border-radius: 16px; font-size: 11px; cursor: pointer; font-weight: 600; transition: all 0.2s ease;"
|
||||
onmouseenter="this.style.background='#e0f2fe'; this.style.transform='scale(1.05)'"
|
||||
onmouseleave="this.style.background='#f0f9ff'; this.style.transform='scale(1)'"
|
||||
onclick="event.stopPropagation(); window.dispatchEvent(new CustomEvent('showResearchSourcesModal', { detail: 'sources' }))">
|
||||
<span style="display: inline-block; width: 6px; height: 6px; background: #10b981; border-radius: 50%; margin-right: 6px; box-shadow: 0 0 4px rgba(16, 185, 129, 0.5);"></span>
|
||||
Sources: ${researchSources.length}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Add Citations sub-chip
|
||||
if (citations && citations.length > 0) {
|
||||
subChipsHtml += `
|
||||
<div style="display: inline-block; margin: 3px; padding: 6px 12px; background: #fef3c7; border: 1px solid #f59e0b; border-radius: 16px; font-size: 11px; cursor: pointer; font-weight: 600; transition: all 0.2s ease;"
|
||||
onmouseenter="this.style.background='#fde68a'; this.style.transform='scale(1.05)'"
|
||||
onmouseleave="this.style.background='#fef3c7'; this.style.transform='scale(1)'"
|
||||
onclick="event.stopPropagation(); window.dispatchEvent(new CustomEvent('showCitationsModal', { detail: 'citations' }))">
|
||||
<span style="display: inline-block; width: 6px; height: 6px; background: #f59e0b; border-radius: 50%; margin-right: 6px; box-shadow: 0 0 4px rgba(245, 158, 11, 0.5);"></span>
|
||||
Citations: ${citations.length}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Add Queries sub-chip
|
||||
if (searchQueries && searchQueries.length > 0) {
|
||||
subChipsHtml += `
|
||||
<div style="display: inline-block; margin: 3px; padding: 6px 12px; background: #f3e8ff; border: 1px solid #8b5cf6; border-radius: 16px; font-size: 11px; cursor: pointer; font-weight: 600; transition: all 0.2s ease;"
|
||||
onmouseenter="this.style.background='#e9d5ff'; this.style.transform='scale(1.05)'"
|
||||
onmouseleave="this.style.background='#f3e8ff'; this.style.transform='scale(1)'"
|
||||
onclick="event.stopPropagation(); window.dispatchEvent(new CustomEvent('showSearchQueriesModal', { detail: 'queries' }))">
|
||||
<span style="display: inline-block; width: 6px; height: 6px; background: #8b5cf6; border-radius: 50%; margin-right: 6px; box-shadow: 0 0 4px rgba(139, 92, 246, 0.5);"></span>
|
||||
Queries: ${searchQueries.length}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
tooltip.innerHTML = subChipsHtml;
|
||||
|
||||
// Add mouse events to tooltip to keep it visible
|
||||
tooltip.addEventListener('mouseenter', () => {
|
||||
if (target._researchTooltipTimeout) {
|
||||
clearTimeout(target._researchTooltipTimeout);
|
||||
target._researchTooltipTimeout = null;
|
||||
}
|
||||
});
|
||||
|
||||
tooltip.addEventListener('mouseleave', () => {
|
||||
target._researchTooltipTimeout = setTimeout(() => {
|
||||
if (tooltip.parentNode) {
|
||||
tooltip.style.opacity = '0';
|
||||
tooltip.style.transform = 'translateY(-8px)';
|
||||
setTimeout(() => {
|
||||
if (tooltip.parentNode) {
|
||||
tooltip.remove();
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
target._researchTooltip = null;
|
||||
}, 100);
|
||||
});
|
||||
|
||||
document.body.appendChild(tooltip);
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
tooltip.style.left = Math.min(rect.left, window.innerWidth - 420) + 'px';
|
||||
tooltip.style.top = (rect.bottom + 8) + 'px';
|
||||
|
||||
// Animate in
|
||||
setTimeout(() => {
|
||||
tooltip.style.opacity = '1';
|
||||
tooltip.style.transform = 'translateY(0)';
|
||||
}, 10);
|
||||
|
||||
target._researchTooltip = tooltip;
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
const target = e.currentTarget as ExtendedDivElement;
|
||||
if (target._researchTooltip) {
|
||||
// Add delay before hiding to allow moving to tooltip
|
||||
target._researchTooltipTimeout = setTimeout(() => {
|
||||
const tooltip = target._researchTooltip;
|
||||
if (tooltip && tooltip.parentNode) {
|
||||
tooltip.style.opacity = '0';
|
||||
tooltip.style.transform = 'translateY(-8px)';
|
||||
setTimeout(() => {
|
||||
if (tooltip.parentNode) {
|
||||
tooltip.remove();
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
target._researchTooltip = null;
|
||||
}, 100);
|
||||
}
|
||||
}}
|
||||
onMouseMove={(e) => {
|
||||
// Keep tooltip visible when moving to sub-chips
|
||||
const target = e.currentTarget as ExtendedDivElement;
|
||||
if (target._researchTooltip) {
|
||||
const tooltip = target._researchTooltip;
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
tooltip.style.left = Math.min(rect.left, window.innerWidth - 420) + 'px';
|
||||
tooltip.style.top = (rect.bottom + 8) + 'px';
|
||||
}
|
||||
}}
|
||||
onMouseOver={(e) => {
|
||||
// Add hover effect to the chip itself
|
||||
e.currentTarget.style.transform = 'translateY(-2px) scale(1.05)';
|
||||
e.currentTarget.style.boxShadow = '0 4px 16px rgba(14, 165, 233, 0.4)';
|
||||
}}
|
||||
onMouseOut={(e) => {
|
||||
// Remove hover effect
|
||||
e.currentTarget.style.transform = 'translateY(0) scale(1)';
|
||||
e.currentTarget.style.boxShadow = '0 2px 8px rgba(14, 165, 233, 0.3)';
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
width: '8px',
|
||||
height: '8px',
|
||||
borderRadius: '50%',
|
||||
background: 'rgba(255, 255, 255, 0.9)',
|
||||
flexShrink: 0,
|
||||
boxShadow: '0 0 6px rgba(255, 255, 255, 0.5)'
|
||||
}} />
|
||||
Research
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
|
||||
{/* Quality Metrics Chip */}
|
||||
{chips.length > 0 && (
|
||||
<div style={{ position: 'relative' }}>
|
||||
{/* Main Quality Metrics Chip */}
|
||||
<div
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
|
||||
border: '1px solid #047857',
|
||||
borderRadius: '999px',
|
||||
padding: '6px 14px',
|
||||
fontSize: '11px',
|
||||
fontWeight: '700',
|
||||
color: 'white',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.3s ease',
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
boxShadow: '0 2px 8px rgba(16, 185, 129, 0.3)',
|
||||
transform: 'translateZ(0)',
|
||||
userSelect: 'none'
|
||||
}}
|
||||
title="Quality metrics available. Hover to see detailed progress bars and explanations."
|
||||
onMouseEnter={(e) => {
|
||||
// Clear any existing timeout
|
||||
const target = e.currentTarget as ExtendedDivElement;
|
||||
if (target._qualityTooltipTimeout) {
|
||||
clearTimeout(target._qualityTooltipTimeout);
|
||||
target._qualityTooltipTimeout = null;
|
||||
}
|
||||
|
||||
// Create and show quality metrics tooltip with circular progress bars
|
||||
const tooltip = document.createElement('div');
|
||||
tooltip.style.cssText = `
|
||||
position: fixed;
|
||||
z-index: 100000;
|
||||
background: white;
|
||||
border: 1px solid #d1fae5;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 12px 40px rgba(0,0,0,0.15);
|
||||
padding: 24px;
|
||||
max-width: 500px;
|
||||
font-size: 12px;
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
transition: all 0.2s ease;
|
||||
pointer-events: auto;
|
||||
`;
|
||||
|
||||
// Create circular progress bars for each metric
|
||||
const createCircularProgress = (label: string, value: number, description: string) => {
|
||||
const percentage = Math.round(value * 100);
|
||||
const color = getChipColor(value);
|
||||
const circumference = 2 * Math.PI * 45; // radius = 45
|
||||
const strokeDasharray = circumference;
|
||||
const strokeDashoffset = circumference - (percentage / 100) * circumference;
|
||||
|
||||
return `
|
||||
<div style="display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding: 12px; background: #f8fafc; border-radius: 12px; border-left: 4px solid ${color};">
|
||||
<div style="position: relative; width: 60px; height: 60px;">
|
||||
<svg width="60" height="60" style="transform: rotate(-90deg);">
|
||||
<circle cx="30" cy="30" r="45" stroke="#e5e7eb" stroke-width="6" fill="none"/>
|
||||
<circle cx="30" cy="30" r="45" stroke="${color}" stroke-width="6" fill="none"
|
||||
stroke-dasharray="${strokeDasharray}" stroke-dashoffset="${strokeDashoffset}"
|
||||
style="transition: stroke-dashoffset 0.5s ease;"/>
|
||||
</svg>
|
||||
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: 700; font-size: 14px; color: ${color};">
|
||||
${percentage}%
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<div style="font-weight: 700; color: #1f2937; margin-bottom: 4px; font-size: 14px;">${label}</div>
|
||||
<div style="color: #6b7280; line-height: 1.4; font-size: 11px;">${description}</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
|
||||
let progressBarsHtml = '<div style="margin-bottom: 16px; font-weight: 700; color: #059669; font-size: 16px; text-align: center;">Quality Metrics</div>';
|
||||
|
||||
chips.forEach(chip => {
|
||||
progressBarsHtml += createCircularProgress(
|
||||
chip.label,
|
||||
chip.value || 0,
|
||||
chipDescriptions[chip.label] || ''
|
||||
);
|
||||
});
|
||||
|
||||
tooltip.innerHTML = progressBarsHtml;
|
||||
|
||||
// Add mouse events to tooltip to keep it visible
|
||||
tooltip.addEventListener('mouseenter', () => {
|
||||
if (target._qualityTooltipTimeout) {
|
||||
clearTimeout(target._qualityTooltipTimeout);
|
||||
target._qualityTooltipTimeout = null;
|
||||
}
|
||||
});
|
||||
|
||||
tooltip.addEventListener('mouseleave', () => {
|
||||
target._qualityTooltipTimeout = setTimeout(() => {
|
||||
if (tooltip.parentNode) {
|
||||
tooltip.style.opacity = '0';
|
||||
tooltip.style.transform = 'translateY(-8px)';
|
||||
setTimeout(() => {
|
||||
if (tooltip.parentNode) {
|
||||
tooltip.remove();
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
target._qualityTooltip = null;
|
||||
}, 100);
|
||||
});
|
||||
|
||||
document.body.appendChild(tooltip);
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
tooltip.style.left = Math.min(rect.left, window.innerWidth - 520) + 'px';
|
||||
tooltip.style.top = (rect.bottom + 8) + 'px';
|
||||
|
||||
// Animate in
|
||||
setTimeout(() => {
|
||||
tooltip.style.opacity = '1';
|
||||
tooltip.style.transform = 'translateY(0)';
|
||||
}, 10);
|
||||
|
||||
target._qualityTooltip = tooltip;
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
const target = e.currentTarget as ExtendedDivElement;
|
||||
if (target._qualityTooltip) {
|
||||
// Add delay before hiding to allow moving to tooltip
|
||||
target._qualityTooltipTimeout = setTimeout(() => {
|
||||
const tooltip = target._qualityTooltip;
|
||||
if (tooltip && tooltip.parentNode) {
|
||||
tooltip.style.opacity = '0';
|
||||
tooltip.style.transform = 'translateY(-8px)';
|
||||
setTimeout(() => {
|
||||
if (tooltip.parentNode) {
|
||||
tooltip.remove();
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
target._qualityTooltip = null;
|
||||
}, 100);
|
||||
}
|
||||
}}
|
||||
onMouseMove={(e) => {
|
||||
// Keep tooltip visible when moving to progress bars
|
||||
const target = e.currentTarget as ExtendedDivElement;
|
||||
if (target._qualityTooltip) {
|
||||
const tooltip = target._qualityTooltip;
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
tooltip.style.left = Math.min(rect.left, window.innerWidth - 520) + 'px';
|
||||
tooltip.style.top = (rect.bottom + 8) + 'px';
|
||||
}
|
||||
}}
|
||||
onMouseOver={(e) => {
|
||||
// Add hover effect to the chip itself
|
||||
e.currentTarget.style.transform = 'translateY(-2px) scale(1.05)';
|
||||
e.currentTarget.style.boxShadow = '0 4px 16px rgba(16, 185, 129, 0.4)';
|
||||
}}
|
||||
onMouseOut={(e) => {
|
||||
// Remove hover effect
|
||||
e.currentTarget.style.transform = 'translateY(0) scale(1)';
|
||||
e.currentTarget.style.boxShadow = '0 2px 8px rgba(16, 185, 129, 0.3)';
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
width: '8px',
|
||||
height: '8px',
|
||||
borderRadius: '50%',
|
||||
background: 'rgba(255, 255, 255, 0.9)',
|
||||
flexShrink: 0,
|
||||
boxShadow: '0 0 6px rgba(255, 255, 255, 0.5)'
|
||||
}} />
|
||||
Quality Metrics
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<span style={{ fontSize: '10px', opacity: 0.8 }}>
|
||||
{draft.split(/\s+/).length} words • {Math.ceil(draft.split(/\s+/).length / 200)} min read
|
||||
</span>
|
||||
{/* Assistive Writing toggle */}
|
||||
{onAssistantToggle && (
|
||||
<label
|
||||
style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: '#666', cursor: 'pointer' }}
|
||||
title="Assistive Writing: Get real-time AI-powered writing suggestions as you type. Uses Exa.ai for web research and Gemini for intelligent content generation. Automatically enables editing mode to allow typing and content modification."
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={assistantOn || false}
|
||||
onChange={(e) => onAssistantToggle(e.target.checked)}
|
||||
/>
|
||||
Assistive Writing
|
||||
</label>
|
||||
)}
|
||||
<label
|
||||
style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: '#666', cursor: 'pointer' }}
|
||||
title="Toggle preview visibility"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={!showPreview}
|
||||
onChange={() => onPreviewToggle()}
|
||||
style={{ margin: 0 }}
|
||||
/>
|
||||
Hide Preview
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Research Sources Modal Component
|
||||
const ResearchSourcesModal: React.FC<{ sources: any[]; isOpen: boolean; onClose: () => void }> = ({ sources, isOpen, onClose }) => {
|
||||
if (!isOpen) return null;
|
||||
|
||||
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: 1000000
|
||||
}} onClick={onClose}>
|
||||
<div style={{
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '12px',
|
||||
padding: '24px',
|
||||
maxWidth: '600px',
|
||||
maxHeight: '80vh',
|
||||
overflowY: 'auto',
|
||||
boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)'
|
||||
}} onClick={(e) => e.stopPropagation()}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
|
||||
<h3 style={{ margin: 0, color: '#0a66c2', fontSize: '18px', fontWeight: '600' }}>
|
||||
Research Sources ({sources.length})
|
||||
</h3>
|
||||
<button
|
||||
onClick={onClose}
|
||||
style={{
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
fontSize: '24px',
|
||||
cursor: 'pointer',
|
||||
color: '#666',
|
||||
padding: '0',
|
||||
width: '30px',
|
||||
height: '30px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<div style={{ maxHeight: '60vh', overflowY: 'auto' }}>
|
||||
{sources && Array.isArray(sources) ? sources.map((source, idx) => (
|
||||
<div key={idx} style={{
|
||||
marginBottom: '16px',
|
||||
padding: '16px',
|
||||
backgroundColor: '#f8f9fa',
|
||||
borderRadius: '8px',
|
||||
borderLeft: '4px solid #0a66c2'
|
||||
}}>
|
||||
<div style={{ fontWeight: '600', marginBottom: '8px', color: '#0a66c2' }}>
|
||||
{source.title || 'Untitled Source'}
|
||||
</div>
|
||||
<div style={{ color: '#666', marginBottom: '12px', lineHeight: '1.5' }}>
|
||||
{source.content || 'No description available'}
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
|
||||
{source.relevance_score && (
|
||||
<span style={{
|
||||
backgroundColor: '#eef6ff',
|
||||
padding: '4px 8px',
|
||||
borderRadius: '6px',
|
||||
fontSize: '11px',
|
||||
fontWeight: '600',
|
||||
color: '#0a66c2'
|
||||
}}>
|
||||
Relevance: {Math.round(source.relevance_score * 100)}%
|
||||
</span>
|
||||
)}
|
||||
{source.credibility_score && (
|
||||
<span style={{
|
||||
backgroundColor: '#eef6ff',
|
||||
padding: '4px 8px',
|
||||
borderRadius: '6px',
|
||||
fontSize: '11px',
|
||||
fontWeight: '600',
|
||||
color: '#0a66c2'
|
||||
}}>
|
||||
Credibility: {Math.round(source.credibility_score * 100)}%
|
||||
</span>
|
||||
)}
|
||||
{source.domain_authority && (
|
||||
<span style={{
|
||||
backgroundColor: '#eef6ff',
|
||||
padding: '4px 8px',
|
||||
borderRadius: '6px',
|
||||
fontSize: '11px',
|
||||
fontWeight: '600',
|
||||
color: '#0a66c2'
|
||||
}}>
|
||||
Authority: {Math.round(source.domain_authority * 100)}%
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)) : (
|
||||
<div style={{ padding: '20px', textAlign: 'center', color: '#666' }}>
|
||||
No research sources available
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Citations Modal Component
|
||||
const CitationsModal: React.FC<{ citations: any[]; isOpen: boolean; onClose: () => void }> = ({ citations, isOpen, onClose }) => {
|
||||
if (!isOpen) return null;
|
||||
|
||||
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: 1000000
|
||||
}} onClick={onClose}>
|
||||
<div style={{
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '12px',
|
||||
padding: '24px',
|
||||
maxWidth: '500px',
|
||||
maxHeight: '80vh',
|
||||
overflowY: 'auto',
|
||||
boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)'
|
||||
}} onClick={(e) => e.stopPropagation()}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
|
||||
<h3 style={{ margin: 0, color: '#0a66c2', fontSize: '18px', fontWeight: '600' }}>
|
||||
Citations ({citations.length})
|
||||
</h3>
|
||||
<button
|
||||
onClick={onClose}
|
||||
style={{
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
fontSize: '24px',
|
||||
cursor: 'pointer',
|
||||
color: '#666',
|
||||
padding: '0',
|
||||
width: '30px',
|
||||
height: '30px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<div style={{ maxHeight: '60vh', overflowY: 'auto' }}>
|
||||
{citations && Array.isArray(citations) ? citations.map((citation, idx) => (
|
||||
<div key={idx} style={{
|
||||
marginBottom: '12px',
|
||||
padding: '12px',
|
||||
backgroundColor: '#f8f9fa',
|
||||
borderRadius: '6px',
|
||||
borderLeft: '3px solid #f59e0b'
|
||||
}}>
|
||||
<div style={{ fontWeight: '600', color: '#0a66c2', marginBottom: '4px' }}>
|
||||
Citation {idx + 1}
|
||||
</div>
|
||||
<div style={{ color: '#666', fontSize: '12px', marginBottom: '4px' }}>
|
||||
Type: {citation.type || 'inline'}
|
||||
</div>
|
||||
{citation.reference && (
|
||||
<div style={{ color: '#666', fontSize: '12px' }}>
|
||||
Reference: {citation.reference}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)) : (
|
||||
<div style={{ padding: '20px', textAlign: 'center', color: '#666' }}>
|
||||
No citations available
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Search Queries Modal Component
|
||||
const SearchQueriesModal: React.FC<{ queries: string[]; isOpen: boolean; onClose: () => void }> = ({ queries, isOpen, onClose }) => {
|
||||
if (!isOpen) return null;
|
||||
|
||||
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: 1000000
|
||||
}} onClick={onClose}>
|
||||
<div style={{
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '12px',
|
||||
padding: '24px',
|
||||
maxWidth: '500px',
|
||||
maxHeight: '80vh',
|
||||
overflowY: 'auto',
|
||||
boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)'
|
||||
}} onClick={(e) => e.stopPropagation()}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
|
||||
<h3 style={{ margin: 0, color: '#0a66c2', fontSize: '18px', fontWeight: '600' }}>
|
||||
Search Queries Used ({queries.length})
|
||||
</h3>
|
||||
<button
|
||||
onClick={onClose}
|
||||
style={{
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
fontSize: '24px',
|
||||
cursor: 'pointer',
|
||||
color: '#666',
|
||||
padding: '0',
|
||||
width: '30px',
|
||||
height: '30px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<div style={{ maxHeight: '60vh', overflowY: 'auto' }}>
|
||||
{queries && Array.isArray(queries) ? queries.map((query, idx) => (
|
||||
<div key={idx} style={{
|
||||
marginBottom: '12px',
|
||||
padding: '12px',
|
||||
backgroundColor: '#f8f9fa',
|
||||
borderRadius: '6px',
|
||||
borderLeft: '3px solid #8b5cf6'
|
||||
}}>
|
||||
<div style={{ fontWeight: '600', color: '#7c3aed', marginBottom: '6px' }}>
|
||||
Query {idx + 1}
|
||||
</div>
|
||||
<div style={{ color: '#374151', fontSize: '13px', lineHeight: '1.4' }}>
|
||||
{query}
|
||||
</div>
|
||||
</div>
|
||||
)) : (
|
||||
<div style={{ padding: '20px', textAlign: 'center', color: '#666' }}>
|
||||
No search queries available
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Enhanced ContentPreviewHeader with Modal State
|
||||
const ContentPreviewHeaderWithModals: React.FC<ContentPreviewHeaderProps> = (props) => {
|
||||
const [showResearchSourcesModal, setShowResearchSourcesModal] = useState(false);
|
||||
const [showCitationsModal, setShowCitationsModal] = useState(false);
|
||||
const [showSearchQueriesModal, setShowSearchQueriesModal] = useState(false);
|
||||
const [modalData, setModalData] = useState<any>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const handleShowResearchSourcesModal = (event: CustomEvent) => {
|
||||
try {
|
||||
const dataType = event.detail;
|
||||
let data: any[] = [];
|
||||
|
||||
if (dataType === 'sources') {
|
||||
data = props.researchSources || [];
|
||||
}
|
||||
|
||||
setModalData(Array.isArray(data) ? data : []);
|
||||
setShowResearchSourcesModal(true);
|
||||
} catch (error) {
|
||||
console.error('Error handling research sources modal:', error);
|
||||
setModalData([]);
|
||||
setShowResearchSourcesModal(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleShowCitationsModal = (event: CustomEvent) => {
|
||||
try {
|
||||
const dataType = event.detail;
|
||||
let data: any[] = [];
|
||||
|
||||
if (dataType === 'citations') {
|
||||
data = props.citations || [];
|
||||
}
|
||||
|
||||
setModalData(Array.isArray(data) ? data : []);
|
||||
setShowCitationsModal(true);
|
||||
} catch (error) {
|
||||
console.error('Error handling citations modal:', error);
|
||||
setModalData([]);
|
||||
setShowCitationsModal(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleShowSearchQueriesModal = (event: CustomEvent) => {
|
||||
try {
|
||||
const dataType = event.detail;
|
||||
let data: any[] = [];
|
||||
|
||||
if (dataType === 'queries') {
|
||||
data = props.searchQueries || [];
|
||||
}
|
||||
|
||||
setModalData(Array.isArray(data) ? data : []);
|
||||
setShowSearchQueriesModal(true);
|
||||
} catch (error) {
|
||||
console.error('Error handling search queries modal:', error);
|
||||
setModalData([]);
|
||||
setShowSearchQueriesModal(true);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('showResearchSourcesModal', handleShowResearchSourcesModal as EventListener);
|
||||
window.addEventListener('showCitationsModal', handleShowCitationsModal as EventListener);
|
||||
window.addEventListener('showSearchQueriesModal', handleShowSearchQueriesModal as EventListener);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('showResearchSourcesModal', handleShowResearchSourcesModal as EventListener);
|
||||
window.removeEventListener('showCitationsModal', handleShowCitationsModal as EventListener);
|
||||
window.removeEventListener('showSearchQueriesModal', handleShowSearchQueriesModal as EventListener);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ContentPreviewHeader {...props} />
|
||||
<ResearchSourcesModal
|
||||
sources={modalData || []}
|
||||
isOpen={showResearchSourcesModal}
|
||||
onClose={() => setShowResearchSourcesModal(false)}
|
||||
/>
|
||||
<CitationsModal
|
||||
citations={modalData || []}
|
||||
isOpen={showCitationsModal}
|
||||
onClose={() => setShowCitationsModal(false)}
|
||||
/>
|
||||
<SearchQueriesModal
|
||||
queries={modalData || []}
|
||||
isOpen={showSearchQueriesModal}
|
||||
onClose={() => setShowSearchQueriesModal(false)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
// Main ContentPreviewHeader component - now just a wrapper that uses the extracted component
|
||||
const ContentPreviewHeader: React.FC<ContentPreviewHeaderProps> = (props) => {
|
||||
return <MainContentPreviewHeader {...props} />;
|
||||
};
|
||||
|
||||
// Export both the main component and the enhanced version with modals
|
||||
export default ContentPreviewHeader;
|
||||
export { ContentPreviewHeader, ContentPreviewHeaderWithModals };
|
||||
|
||||
@@ -0,0 +1,383 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import MainContentPreviewHeader from './MainContentPreviewHeader';
|
||||
|
||||
interface ContentPreviewHeaderProps {
|
||||
researchSources?: any[];
|
||||
citations?: any[];
|
||||
searchQueries?: string[];
|
||||
qualityMetrics?: any;
|
||||
draft: string;
|
||||
showPreview: boolean;
|
||||
onPreviewToggle: () => void;
|
||||
assistantOn?: boolean;
|
||||
onAssistantToggle?: (enabled: boolean) => void;
|
||||
topic?: string;
|
||||
}
|
||||
|
||||
// Research Sources Modal Component
|
||||
const ResearchSourcesModal: React.FC<{ sources: any[]; isOpen: boolean; onClose: () => void }> = ({ sources, isOpen, onClose }) => {
|
||||
if (!isOpen) return null;
|
||||
|
||||
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: 1000000
|
||||
}} onClick={onClose}>
|
||||
<div style={{
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '12px',
|
||||
padding: '24px',
|
||||
maxWidth: '600px',
|
||||
maxHeight: '80vh',
|
||||
overflowY: 'auto',
|
||||
boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)'
|
||||
}} onClick={(e) => e.stopPropagation()}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
|
||||
<h3 style={{ margin: 0, color: '#0a66c2', fontSize: '18px', fontWeight: '600' }}>
|
||||
Research Sources ({sources.length})
|
||||
</h3>
|
||||
<button
|
||||
onClick={onClose}
|
||||
style={{
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
fontSize: '24px',
|
||||
cursor: 'pointer',
|
||||
color: '#666',
|
||||
padding: '0',
|
||||
width: '30px',
|
||||
height: '30px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<div style={{ maxHeight: '60vh', overflowY: 'auto' }}>
|
||||
{sources && Array.isArray(sources) ? sources.map((source, idx) => (
|
||||
<div key={idx} style={{
|
||||
marginBottom: '16px',
|
||||
padding: '16px',
|
||||
backgroundColor: '#f8f9fa',
|
||||
borderRadius: '8px',
|
||||
borderLeft: '4px solid #0a66c2'
|
||||
}}>
|
||||
<div style={{ fontWeight: '600', marginBottom: '8px', color: '#0a66c2' }}>
|
||||
{source.title || 'Untitled Source'}
|
||||
</div>
|
||||
<div style={{ color: '#666', marginBottom: '12px', lineHeight: '1.5' }}>
|
||||
{source.content || 'No description available'}
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
|
||||
{source.relevance_score && (
|
||||
<span style={{
|
||||
backgroundColor: '#eef6ff',
|
||||
padding: '4px 8px',
|
||||
borderRadius: '6px',
|
||||
fontSize: '11px',
|
||||
fontWeight: '600',
|
||||
color: '#0a66c2'
|
||||
}}>
|
||||
Relevance: {Math.round(source.relevance_score * 100)}%
|
||||
</span>
|
||||
)}
|
||||
{source.credibility_score && (
|
||||
<span style={{
|
||||
backgroundColor: '#eef6ff',
|
||||
padding: '4px 8px',
|
||||
borderRadius: '6px',
|
||||
fontSize: '11px',
|
||||
fontWeight: '600',
|
||||
color: '#0a66c2'
|
||||
}}>
|
||||
Credibility: {Math.round(source.credibility_score * 100)}%
|
||||
</span>
|
||||
)}
|
||||
{source.domain_authority && (
|
||||
<span style={{
|
||||
backgroundColor: '#eef6ff',
|
||||
padding: '4px 8px',
|
||||
borderRadius: '6px',
|
||||
fontSize: '11px',
|
||||
fontWeight: '600',
|
||||
color: '#0a66c2'
|
||||
}}>
|
||||
Authority: {Math.round(source.domain_authority * 100)}%
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)) : (
|
||||
<div style={{ padding: '20px', textAlign: 'center', color: '#666' }}>
|
||||
No research sources available
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Citations Modal Component
|
||||
const CitationsModal: React.FC<{ citations: any[]; isOpen: boolean; onClose: () => void }> = ({ citations, isOpen, onClose }) => {
|
||||
if (!isOpen) return null;
|
||||
|
||||
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: 1000000
|
||||
}} onClick={onClose}>
|
||||
<div style={{
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '12px',
|
||||
padding: '24px',
|
||||
maxWidth: '500px',
|
||||
maxHeight: '80vh',
|
||||
overflowY: 'auto',
|
||||
boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)'
|
||||
}} onClick={(e) => e.stopPropagation()}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
|
||||
<h3 style={{ margin: 0, color: '#0a66c2', fontSize: '18px', fontWeight: '600' }}>
|
||||
Citations ({citations.length})
|
||||
</h3>
|
||||
<button
|
||||
onClick={onClose}
|
||||
style={{
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
fontSize: '24px',
|
||||
cursor: 'pointer',
|
||||
color: '#666',
|
||||
padding: '0',
|
||||
width: '30px',
|
||||
height: '30px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<div style={{ maxHeight: '60vh', overflowY: 'auto' }}>
|
||||
{citations && Array.isArray(citations) ? citations.map((citation, idx) => (
|
||||
<div key={idx} style={{
|
||||
marginBottom: '12px',
|
||||
padding: '12px',
|
||||
backgroundColor: '#f8f9fa',
|
||||
borderRadius: '6px',
|
||||
borderLeft: '3px solid #f59e0b'
|
||||
}}>
|
||||
<div style={{ fontWeight: '600', color: '#0a66c2', marginBottom: '4px' }}>
|
||||
Citation {idx + 1}
|
||||
</div>
|
||||
<div style={{ color: '#666', fontSize: '12px', marginBottom: '4px' }}>
|
||||
Type: {citation.type || 'inline'}
|
||||
</div>
|
||||
{citation.reference && (
|
||||
<div style={{ color: '#666', fontSize: '12px' }}>
|
||||
Reference: {citation.reference}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)) : (
|
||||
<div style={{ padding: '20px', textAlign: 'center', color: '#666' }}>
|
||||
No citations available
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Search Queries Modal Component
|
||||
const SearchQueriesModal: React.FC<{ queries: string[]; isOpen: boolean; onClose: () => void }> = ({ queries, isOpen, onClose }) => {
|
||||
if (!isOpen) return null;
|
||||
|
||||
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: 1000000
|
||||
}} onClick={onClose}>
|
||||
<div style={{
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '12px',
|
||||
padding: '24px',
|
||||
maxWidth: '500px',
|
||||
maxHeight: '80vh',
|
||||
overflowY: 'auto',
|
||||
boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)'
|
||||
}} onClick={(e) => e.stopPropagation()}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
|
||||
<h3 style={{ margin: 0, color: '#0a66c2', fontSize: '18px', fontWeight: '600' }}>
|
||||
Search Queries Used ({queries.length})
|
||||
</h3>
|
||||
<button
|
||||
onClick={onClose}
|
||||
style={{
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
fontSize: '24px',
|
||||
cursor: 'pointer',
|
||||
color: '#666',
|
||||
padding: '0',
|
||||
width: '30px',
|
||||
height: '30px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<div style={{ maxHeight: '60vh', overflowY: 'auto' }}>
|
||||
{queries && Array.isArray(queries) ? queries.map((query, idx) => (
|
||||
<div key={idx} style={{
|
||||
marginBottom: '12px',
|
||||
padding: '12px',
|
||||
backgroundColor: '#f8f9fa',
|
||||
borderRadius: '6px',
|
||||
borderLeft: '3px solid #8b5cf6'
|
||||
}}>
|
||||
<div style={{ fontWeight: '600', color: '#7c3aed', marginBottom: '6px' }}>
|
||||
Query {idx + 1}
|
||||
</div>
|
||||
<div style={{ color: '#374151', fontSize: '13px', lineHeight: '1.4' }}>
|
||||
{query}
|
||||
</div>
|
||||
</div>
|
||||
)) : (
|
||||
<div style={{ padding: '20px', textAlign: 'center', color: '#666' }}>
|
||||
No search queries available
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Enhanced ContentPreviewHeader with Modal State
|
||||
const ContentPreviewHeaderWithModals: React.FC<ContentPreviewHeaderProps> = (props) => {
|
||||
const [showResearchSourcesModal, setShowResearchSourcesModal] = useState(false);
|
||||
const [showCitationsModal, setShowCitationsModal] = useState(false);
|
||||
const [showSearchQueriesModal, setShowSearchQueriesModal] = useState(false);
|
||||
const [modalData, setModalData] = useState<any>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const handleShowResearchSourcesModal = (event: CustomEvent) => {
|
||||
try {
|
||||
const dataType = event.detail;
|
||||
let data: any[] = [];
|
||||
|
||||
if (dataType === 'sources') {
|
||||
data = props.researchSources || [];
|
||||
}
|
||||
|
||||
setModalData(Array.isArray(data) ? data : []);
|
||||
setShowResearchSourcesModal(true);
|
||||
} catch (error) {
|
||||
console.error('Error handling research sources modal:', error);
|
||||
setModalData([]);
|
||||
setShowResearchSourcesModal(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleShowCitationsModal = (event: CustomEvent) => {
|
||||
try {
|
||||
const dataType = event.detail;
|
||||
let data: any[] = [];
|
||||
|
||||
if (dataType === 'citations') {
|
||||
data = props.citations || [];
|
||||
}
|
||||
|
||||
setModalData(Array.isArray(data) ? data : []);
|
||||
setShowCitationsModal(true);
|
||||
} catch (error) {
|
||||
console.error('Error handling citations modal:', error);
|
||||
setModalData([]);
|
||||
setShowCitationsModal(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleShowSearchQueriesModal = (event: CustomEvent) => {
|
||||
try {
|
||||
const dataType = event.detail;
|
||||
let data: any[] = [];
|
||||
|
||||
if (dataType === 'queries') {
|
||||
data = props.searchQueries || [];
|
||||
}
|
||||
|
||||
setModalData(Array.isArray(data) ? data : []);
|
||||
setShowSearchQueriesModal(true);
|
||||
} catch (error) {
|
||||
console.error('Error handling search queries modal:', error);
|
||||
setModalData([]);
|
||||
setShowSearchQueriesModal(true);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('showResearchSourcesModal', handleShowResearchSourcesModal as EventListener);
|
||||
window.addEventListener('showCitationsModal', handleShowCitationsModal as EventListener);
|
||||
window.addEventListener('showSearchQueriesModal', handleShowSearchQueriesModal as EventListener);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('showResearchSourcesModal', handleShowResearchSourcesModal as EventListener);
|
||||
window.removeEventListener('showCitationsModal', handleShowCitationsModal as EventListener);
|
||||
window.removeEventListener('showSearchQueriesModal', handleShowSearchQueriesModal as EventListener);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<MainContentPreviewHeader {...props} />
|
||||
<ResearchSourcesModal
|
||||
sources={modalData || []}
|
||||
isOpen={showResearchSourcesModal}
|
||||
onClose={() => setShowResearchSourcesModal(false)}
|
||||
/>
|
||||
<CitationsModal
|
||||
citations={modalData || []}
|
||||
isOpen={showCitationsModal}
|
||||
onClose={() => setShowCitationsModal(false)}
|
||||
/>
|
||||
<SearchQueriesModal
|
||||
queries={modalData || []}
|
||||
isOpen={showSearchQueriesModal}
|
||||
onClose={() => setShowSearchQueriesModal(false)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ContentPreviewHeaderWithModals;
|
||||
@@ -0,0 +1,494 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import PersonaChip from './PersonaChip';
|
||||
|
||||
// Extend HTMLDivElement interface for custom tooltip properties
|
||||
interface ExtendedDivElement extends HTMLDivElement {
|
||||
_researchTooltip?: HTMLDivElement | null;
|
||||
_citationsTooltip?: HTMLDivElement | null;
|
||||
_searchQueriesTooltip?: HTMLDivElement | null;
|
||||
_qualityTooltip?: HTMLDivElement | null;
|
||||
_researchTooltipTimeout?: NodeJS.Timeout | null;
|
||||
_qualityTooltipTimeout?: NodeJS.Timeout | null;
|
||||
}
|
||||
|
||||
interface MainContentPreviewHeaderProps {
|
||||
researchSources?: any[];
|
||||
citations?: any[];
|
||||
searchQueries?: string[];
|
||||
qualityMetrics?: any;
|
||||
draft: string;
|
||||
showPreview: boolean;
|
||||
onPreviewToggle: () => void;
|
||||
assistantOn?: boolean;
|
||||
onAssistantToggle?: (enabled: boolean) => void;
|
||||
topic?: string;
|
||||
}
|
||||
|
||||
const MainContentPreviewHeader: React.FC<MainContentPreviewHeaderProps> = ({
|
||||
researchSources,
|
||||
citations,
|
||||
searchQueries,
|
||||
qualityMetrics,
|
||||
draft,
|
||||
showPreview,
|
||||
onPreviewToggle,
|
||||
assistantOn,
|
||||
onAssistantToggle,
|
||||
topic
|
||||
}) => {
|
||||
const formatPercent = (v?: number) => typeof v === 'number' ? `${Math.round(v * 100)}%` : '—';
|
||||
const getChipColor = (v?: number) => {
|
||||
if (typeof v !== 'number') return '#6b7280';
|
||||
if (v >= 0.8) return '#10b981';
|
||||
if (v >= 0.6) return '#f59e0b';
|
||||
return '#ef4444';
|
||||
};
|
||||
|
||||
// Memoize chips array to prevent infinite re-rendering
|
||||
const chips = useMemo(() => {
|
||||
const chipArray = qualityMetrics ? [
|
||||
{ label: 'Overall', value: qualityMetrics.overall_score },
|
||||
{ label: 'Accuracy', value: qualityMetrics.factual_accuracy },
|
||||
{ label: 'Verification', value: qualityMetrics.source_verification },
|
||||
{ label: 'Coverage', value: qualityMetrics.citation_coverage }
|
||||
] : [];
|
||||
|
||||
console.log('🔍 [ContentPreviewHeader] Chips array created:', {
|
||||
qualityMetrics: qualityMetrics,
|
||||
chips: chipArray,
|
||||
chipsLength: chipArray.length
|
||||
});
|
||||
|
||||
return chipArray;
|
||||
}, [qualityMetrics]);
|
||||
|
||||
// Helper to build descriptive chip tooltip text
|
||||
const chipDescriptions: Record<string, string> = {
|
||||
Overall: 'Overall blends accuracy, verification and coverage into a single reliability score for this draft.',
|
||||
Accuracy: 'Factual Accuracy estimates how likely statements are to be factually correct based on grounding signals.',
|
||||
Verification: 'Source Verification reflects how well claims are linked to credible sources and whether citations match claims.',
|
||||
Coverage: 'Citation Coverage indicates how much of the content is supported with citations. Higher is better.'
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
padding: '12px 16px',
|
||||
background: '#e1f5fe',
|
||||
borderBottom: '1px solid #b3e5fc',
|
||||
fontSize: '12px',
|
||||
fontWeight: '600',
|
||||
color: '#0277bd',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between'
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
|
||||
<span>{topic ? `${topic} - LinkedIn Content Preview` : 'LinkedIn Content Preview'}</span>
|
||||
|
||||
{/* Persona Chip */}
|
||||
<PersonaChip
|
||||
platform="linkedin"
|
||||
userId={1}
|
||||
onPersonaUpdate={(personaData) => {
|
||||
console.log('Persona updated:', personaData);
|
||||
// You can add additional logic here to handle persona updates
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Research Chip with Hover Sub-chips */}
|
||||
{((researchSources && researchSources.length > 0) || (citations && citations.length > 0) || (searchQueries && searchQueries.length > 0)) && (
|
||||
<div style={{ position: 'relative' }}>
|
||||
{/* Main Research Chip */}
|
||||
<div
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%)',
|
||||
border: '1px solid #0284c7',
|
||||
borderRadius: '999px',
|
||||
padding: '6px 14px',
|
||||
fontSize: '11px',
|
||||
fontWeight: '700',
|
||||
color: 'white',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.3s ease',
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
boxShadow: '0 2px 8px rgba(14, 165, 233, 0.3)',
|
||||
transform: 'translateZ(0)',
|
||||
userSelect: 'none'
|
||||
}}
|
||||
title="Research data available. Hover to see sources, citations, and queries."
|
||||
onMouseEnter={(e) => {
|
||||
// Clear any existing timeout
|
||||
const target = e.currentTarget as ExtendedDivElement;
|
||||
if (target._researchTooltipTimeout) {
|
||||
clearTimeout(target._researchTooltipTimeout);
|
||||
target._researchTooltipTimeout = null;
|
||||
}
|
||||
|
||||
// Create and show research sub-chips tooltip
|
||||
const tooltip = document.createElement('div');
|
||||
tooltip.style.cssText = `
|
||||
position: fixed;
|
||||
z-index: 100000;
|
||||
background: white;
|
||||
border: 1px solid #cfe9f7;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.15);
|
||||
padding: 16px;
|
||||
max-width: 400px;
|
||||
font-size: 12px;
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
transition: all 0.2s ease;
|
||||
pointer-events: auto;
|
||||
`;
|
||||
|
||||
let subChipsHtml = '<div style="margin-bottom: 12px; font-weight: 600; color: #0a66c2; font-size: 14px;">Research Data</div>';
|
||||
|
||||
// Add Sources sub-chip
|
||||
if (researchSources && researchSources.length > 0) {
|
||||
subChipsHtml += `
|
||||
<div style="display: inline-block; margin: 3px; padding: 6px 12px; background: #f0f9ff; border: 1px solid #0ea5e9; border-radius: 16px; font-size: 11px; cursor: pointer; font-weight: 600; transition: all 0.2s ease;"
|
||||
onmouseenter="this.style.background='#e0f2fe'; this.style.transform='scale(1.05)'"
|
||||
onmouseleave="this.style.background='#f0f9ff'; this.style.transform='scale(1)'"
|
||||
onclick="event.stopPropagation(); window.dispatchEvent(new CustomEvent('showResearchSourcesModal', { detail: 'sources' }))">
|
||||
<span style="display: inline-block; width: 6px; height: 6px; background: #10b981; border-radius: 50%; margin-right: 6px; box-shadow: 0 0 4px rgba(16, 185, 129, 0.5);"></span>
|
||||
Sources: ${researchSources.length}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Add Citations sub-chip
|
||||
if (citations && citations.length > 0) {
|
||||
subChipsHtml += `
|
||||
<div style="display: inline-block; margin: 3px; padding: 6px 12px; background: #fef3c7; border: 1px solid #f59e0b; border-radius: 16px; font-size: 11px; cursor: pointer; font-weight: 600; transition: all 0.2s ease;"
|
||||
onmouseenter="this.style.background='#fde68a'; this.style.transform='scale(1.05)'"
|
||||
onmouseleave="this.style.background='#fef3c7'; this.style.transform='scale(1)'"
|
||||
onclick="event.stopPropagation(); window.dispatchEvent(new CustomEvent('showCitationsModal', { detail: 'citations' }))">
|
||||
<span style="display: inline-block; width: 6px; height: 6px; background: #f59e0b; border-radius: 50%; margin-right: 6px; box-shadow: 0 0 4px rgba(245, 158, 11, 0.5);"></span>
|
||||
Citations: ${citations.length}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Add Queries sub-chip
|
||||
if (searchQueries && searchQueries.length > 0) {
|
||||
subChipsHtml += `
|
||||
<div style="display: inline-block; margin: 3px; padding: 6px 12px; background: #f3e8ff; border: 1px solid #8b5cf6; border-radius: 16px; font-size: 11px; cursor: pointer; font-weight: 600; transition: all 0.2s ease;"
|
||||
onmouseenter="this.style.background='#e9d5ff'; this.style.transform='scale(1.05)'"
|
||||
onmouseleave="this.style.background='#f3e8ff'; this.style.transform='scale(1)'"
|
||||
onclick="event.stopPropagation(); window.dispatchEvent(new CustomEvent('showSearchQueriesModal', { detail: 'queries' }))">
|
||||
<span style="display: inline-block; width: 6px; height: 6px; background: #8b5cf6; border-radius: 50%; margin-right: 6px; box-shadow: 0 0 4px rgba(139, 92, 246, 0.5);"></span>
|
||||
Queries: ${searchQueries.length}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
tooltip.innerHTML = subChipsHtml;
|
||||
|
||||
// Add mouse events to tooltip to keep it visible
|
||||
tooltip.addEventListener('mouseenter', () => {
|
||||
if (target._researchTooltipTimeout) {
|
||||
clearTimeout(target._researchTooltipTimeout);
|
||||
target._researchTooltipTimeout = null;
|
||||
}
|
||||
});
|
||||
|
||||
tooltip.addEventListener('mouseleave', () => {
|
||||
target._researchTooltipTimeout = setTimeout(() => {
|
||||
if (tooltip.parentNode) {
|
||||
tooltip.style.opacity = '0';
|
||||
tooltip.style.transform = 'translateY(-8px)';
|
||||
setTimeout(() => {
|
||||
if (tooltip.parentNode) {
|
||||
tooltip.remove();
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
target._researchTooltip = null;
|
||||
}, 100);
|
||||
});
|
||||
|
||||
document.body.appendChild(tooltip);
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
tooltip.style.left = Math.min(rect.left, window.innerWidth - 420) + 'px';
|
||||
tooltip.style.top = (rect.bottom + 8) + 'px';
|
||||
|
||||
// Animate in
|
||||
setTimeout(() => {
|
||||
tooltip.style.opacity = '1';
|
||||
tooltip.style.transform = 'translateY(0)';
|
||||
}, 10);
|
||||
|
||||
target._researchTooltip = tooltip;
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
const target = e.currentTarget as ExtendedDivElement;
|
||||
if (target._researchTooltip) {
|
||||
// Add delay before hiding to allow moving to tooltip
|
||||
target._researchTooltipTimeout = setTimeout(() => {
|
||||
const tooltip = target._researchTooltip;
|
||||
if (tooltip && tooltip.parentNode) {
|
||||
tooltip.style.opacity = '0';
|
||||
tooltip.style.transform = 'translateY(-8px)';
|
||||
setTimeout(() => {
|
||||
if (tooltip.parentNode) {
|
||||
tooltip.remove();
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
target._researchTooltip = null;
|
||||
}, 100);
|
||||
}
|
||||
}}
|
||||
onMouseMove={(e) => {
|
||||
// Keep tooltip visible when moving to sub-chips
|
||||
const target = e.currentTarget as ExtendedDivElement;
|
||||
if (target._researchTooltip) {
|
||||
const tooltip = target._researchTooltip;
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
tooltip.style.left = Math.min(rect.left, window.innerWidth - 420) + 'px';
|
||||
tooltip.style.top = (rect.bottom + 8) + 'px';
|
||||
}
|
||||
}}
|
||||
onMouseOver={(e) => {
|
||||
// Add hover effect to the chip itself
|
||||
e.currentTarget.style.transform = 'translateY(-2px) scale(1.05)';
|
||||
e.currentTarget.style.boxShadow = '0 4px 16px rgba(14, 165, 233, 0.4)';
|
||||
}}
|
||||
onMouseOut={(e) => {
|
||||
// Remove hover effect
|
||||
e.currentTarget.style.transform = 'translateY(0) scale(1)';
|
||||
e.currentTarget.style.boxShadow = '0 2px 8px rgba(14, 165, 233, 0.3)';
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
width: '8px',
|
||||
height: '8px',
|
||||
borderRadius: '50%',
|
||||
background: 'rgba(255, 255, 255, 0.9)',
|
||||
flexShrink: 0,
|
||||
boxShadow: '0 0 6px rgba(255, 255, 255, 0.5)'
|
||||
}} />
|
||||
Research
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
|
||||
{/* Quality Metrics Chip */}
|
||||
{chips.length > 0 && (
|
||||
<div style={{ position: 'relative' }}>
|
||||
{/* Main Quality Metrics Chip */}
|
||||
<div
|
||||
style={{
|
||||
background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
|
||||
border: '1px solid #047857',
|
||||
borderRadius: '999px',
|
||||
padding: '6px 14px',
|
||||
fontSize: '11px',
|
||||
fontWeight: '700',
|
||||
color: 'white',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.3s ease',
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
boxShadow: '0 2px 8px rgba(16, 185, 129, 0.3)',
|
||||
transform: 'translateZ(0)',
|
||||
userSelect: 'none'
|
||||
}}
|
||||
title="Quality metrics available. Hover to see detailed progress bars and explanations."
|
||||
onMouseEnter={(e) => {
|
||||
// Clear any existing timeout
|
||||
const target = e.currentTarget as ExtendedDivElement;
|
||||
if (target._qualityTooltipTimeout) {
|
||||
clearTimeout(target._qualityTooltipTimeout);
|
||||
target._qualityTooltipTimeout = null;
|
||||
}
|
||||
|
||||
// Create and show quality metrics tooltip with circular progress bars
|
||||
const tooltip = document.createElement('div');
|
||||
tooltip.style.cssText = `
|
||||
position: fixed;
|
||||
z-index: 100000;
|
||||
background: white;
|
||||
border: 1px solid #d1fae5;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 12px 40px rgba(0,0,0,0.15);
|
||||
padding: 24px;
|
||||
max-width: 500px;
|
||||
font-size: 12px;
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
transition: all 0.2s ease;
|
||||
pointer-events: auto;
|
||||
`;
|
||||
|
||||
// Create circular progress bars for each metric
|
||||
const createCircularProgress = (label: string, value: number, description: string) => {
|
||||
const percentage = Math.round(value * 100);
|
||||
const color = getChipColor(value);
|
||||
const circumference = 2 * Math.PI * 45; // radius = 45
|
||||
const strokeDasharray = circumference;
|
||||
const strokeDashoffset = circumference - (percentage / 100) * circumference;
|
||||
|
||||
return `
|
||||
<div style="display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding: 12px; background: #f8fafc; border-radius: 12px; border-left: 4px solid ${color};">
|
||||
<div style="position: relative; width: 60px; height: 60px;">
|
||||
<svg width="60" height="60" style="transform: rotate(-90deg);">
|
||||
<circle cx="30" cy="30" r="45" stroke="#e5e7eb" stroke-width="6" fill="none"/>
|
||||
<circle cx="30" cy="30" r="45" stroke="${color}" stroke-width="6" fill="none"
|
||||
stroke-dasharray="${strokeDasharray}" stroke-dashoffset="${strokeDashoffset}"
|
||||
style="transition: stroke-dashoffset 0.5s ease;"/>
|
||||
</svg>
|
||||
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: 700; font-size: 14px; color: ${color};">
|
||||
${percentage}%
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex: 1;">
|
||||
<div style="font-weight: 700; color: #1f2937; margin-bottom: 4px; font-size: 14px;">${label}</div>
|
||||
<div style="color: #6b7280; line-height: 1.4; font-size: 11px;">${description}</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
|
||||
let progressBarsHtml = '<div style="margin-bottom: 16px; font-weight: 700; color: #059669; font-size: 16px; text-align: center;">Quality Metrics</div>';
|
||||
|
||||
chips.forEach(chip => {
|
||||
progressBarsHtml += createCircularProgress(
|
||||
chip.label,
|
||||
chip.value || 0,
|
||||
chipDescriptions[chip.label] || ''
|
||||
);
|
||||
});
|
||||
|
||||
tooltip.innerHTML = progressBarsHtml;
|
||||
|
||||
// Add mouse events to tooltip to keep it visible
|
||||
tooltip.addEventListener('mouseenter', () => {
|
||||
if (target._qualityTooltipTimeout) {
|
||||
clearTimeout(target._qualityTooltipTimeout);
|
||||
target._qualityTooltipTimeout = null;
|
||||
}
|
||||
});
|
||||
|
||||
tooltip.addEventListener('mouseleave', () => {
|
||||
target._qualityTooltipTimeout = setTimeout(() => {
|
||||
if (tooltip.parentNode) {
|
||||
tooltip.style.opacity = '0';
|
||||
tooltip.style.transform = 'translateY(-8px)';
|
||||
setTimeout(() => {
|
||||
if (tooltip.parentNode) {
|
||||
tooltip.remove();
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
target._qualityTooltip = null;
|
||||
}, 100);
|
||||
});
|
||||
|
||||
document.body.appendChild(tooltip);
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
tooltip.style.left = Math.min(rect.left, window.innerWidth - 520) + 'px';
|
||||
tooltip.style.top = (rect.bottom + 8) + 'px';
|
||||
|
||||
// Animate in
|
||||
setTimeout(() => {
|
||||
tooltip.style.opacity = '1';
|
||||
tooltip.style.transform = 'translateY(0)';
|
||||
}, 10);
|
||||
|
||||
target._qualityTooltip = tooltip;
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
const target = e.currentTarget as ExtendedDivElement;
|
||||
if (target._qualityTooltip) {
|
||||
// Add delay before hiding to allow moving to tooltip
|
||||
target._qualityTooltipTimeout = setTimeout(() => {
|
||||
const tooltip = target._qualityTooltip;
|
||||
if (tooltip && tooltip.parentNode) {
|
||||
tooltip.style.opacity = '0';
|
||||
tooltip.style.transform = 'translateY(-8px)';
|
||||
setTimeout(() => {
|
||||
if (tooltip.parentNode) {
|
||||
tooltip.remove();
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
target._qualityTooltip = null;
|
||||
}, 100);
|
||||
}
|
||||
}}
|
||||
onMouseMove={(e) => {
|
||||
// Keep tooltip visible when moving to progress bars
|
||||
const target = e.currentTarget as ExtendedDivElement;
|
||||
if (target._qualityTooltip) {
|
||||
const tooltip = target._qualityTooltip;
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
tooltip.style.left = Math.min(rect.left, window.innerWidth - 520) + 'px';
|
||||
tooltip.style.top = (rect.bottom + 8) + 'px';
|
||||
}
|
||||
}}
|
||||
onMouseOver={(e) => {
|
||||
// Add hover effect to the chip itself
|
||||
e.currentTarget.style.transform = 'translateY(-2px) scale(1.05)';
|
||||
e.currentTarget.style.boxShadow = '0 4px 16px rgba(16, 185, 129, 0.4)';
|
||||
}}
|
||||
onMouseOut={(e) => {
|
||||
// Remove hover effect
|
||||
e.currentTarget.style.transform = 'translateY(0) scale(1)';
|
||||
e.currentTarget.style.boxShadow = '0 2px 8px rgba(16, 185, 129, 0.3)';
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
width: '8px',
|
||||
height: '8px',
|
||||
borderRadius: '50%',
|
||||
background: 'rgba(255, 255, 255, 0.9)',
|
||||
flexShrink: 0,
|
||||
boxShadow: '0 0 6px rgba(255, 255, 255, 0.5)'
|
||||
}} />
|
||||
Quality Metrics
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<span style={{ fontSize: '10px', opacity: 0.8 }}>
|
||||
{draft.split(/\s+/).length} words • {Math.ceil(draft.split(/\s+/).length / 200)} min read
|
||||
</span>
|
||||
{/* Assistive Writing toggle */}
|
||||
{onAssistantToggle && (
|
||||
<label
|
||||
style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: '#666', cursor: 'pointer' }}
|
||||
title="Assistive Writing: Get real-time AI-powered writing suggestions as you type. Uses Exa.ai for web research and Gemini for intelligent content generation. Automatically enables editing mode to allow typing and content modification."
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={assistantOn || false}
|
||||
onChange={(e) => onAssistantToggle(e.target.checked)}
|
||||
/>
|
||||
Assistive Writing
|
||||
</label>
|
||||
)}
|
||||
<label
|
||||
style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: '#666', cursor: 'pointer' }}
|
||||
title="Toggle preview visibility"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={!showPreview}
|
||||
onChange={() => onPreviewToggle()}
|
||||
style={{ margin: 0 }}
|
||||
/>
|
||||
Hide Preview
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MainContentPreviewHeader;
|
||||
@@ -0,0 +1,324 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import PersonaEditorModal from './PersonaEditorModal';
|
||||
|
||||
interface PersonaData {
|
||||
id?: number;
|
||||
user_id?: number;
|
||||
persona_name: string;
|
||||
archetype: string;
|
||||
core_belief: string;
|
||||
brand_voice_description: string;
|
||||
linguistic_fingerprint: any;
|
||||
platform_adaptations: any;
|
||||
confidence_score: number;
|
||||
ai_analysis_version: string;
|
||||
platform_type: string;
|
||||
sentence_metrics: any;
|
||||
lexical_features: any;
|
||||
rhetorical_devices: any;
|
||||
tonal_range: any;
|
||||
stylistic_constraints: any;
|
||||
content_format_rules: any;
|
||||
engagement_patterns: any;
|
||||
posting_frequency: any;
|
||||
content_types: any;
|
||||
platform_best_practices: any;
|
||||
algorithm_considerations: any;
|
||||
}
|
||||
|
||||
interface PersonaChipProps {
|
||||
platform: string;
|
||||
userId?: number;
|
||||
onPersonaUpdate?: (personaData: PersonaData) => void;
|
||||
}
|
||||
|
||||
const PersonaChip: React.FC<PersonaChipProps> = ({
|
||||
platform,
|
||||
userId = 1,
|
||||
onPersonaUpdate
|
||||
}) => {
|
||||
const [personaData, setPersonaData] = useState<PersonaData | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [showEditor, setShowEditor] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Fetch persona data
|
||||
const fetchPersonaData = async () => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
// Fetch core persona list (take most recent active) and platform-specific details
|
||||
const [coreRes, platformRes] = await Promise.all([
|
||||
fetch(`/api/personas/user/${userId}`),
|
||||
fetch(`/api/personas/platform/${platform}?user_id=${userId}`)
|
||||
]);
|
||||
|
||||
if (coreRes.ok && platformRes.ok) {
|
||||
const coreList = await coreRes.json();
|
||||
const platformData = await platformRes.json();
|
||||
const core = (coreList?.personas && coreList.personas.length > 0) ? coreList.personas[0] : {};
|
||||
|
||||
// Merge core + platform fields for editor convenience
|
||||
setPersonaData({
|
||||
id: core.id,
|
||||
user_id: core.user_id,
|
||||
persona_name: core.persona_name,
|
||||
archetype: core.archetype,
|
||||
core_belief: core.core_belief,
|
||||
brand_voice_description: core.brand_voice_description,
|
||||
linguistic_fingerprint: core.linguistic_fingerprint,
|
||||
platform_adaptations: core.platform_adaptations,
|
||||
confidence_score: core.confidence_score,
|
||||
ai_analysis_version: core.ai_analysis_version,
|
||||
platform_type: platform,
|
||||
sentence_metrics: platformData?.sentence_metrics,
|
||||
lexical_features: platformData?.lexical_features,
|
||||
rhetorical_devices: platformData?.rhetorical_devices,
|
||||
tonal_range: platformData?.tonal_range,
|
||||
stylistic_constraints: platformData?.stylistic_constraints,
|
||||
content_format_rules: platformData?.content_format_rules,
|
||||
engagement_patterns: platformData?.engagement_patterns,
|
||||
posting_frequency: platformData?.posting_frequency,
|
||||
content_types: platformData?.content_types,
|
||||
platform_best_practices: platformData?.platform_best_practices,
|
||||
algorithm_considerations: platformData?.algorithm_considerations,
|
||||
} as any);
|
||||
} else {
|
||||
setError('No persona found for this platform');
|
||||
}
|
||||
} catch (err) {
|
||||
setError('Failed to load persona data');
|
||||
console.error('Error fetching persona:', err);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchPersonaData();
|
||||
}, [platform, userId]);
|
||||
|
||||
const handleSavePersona = async (data: PersonaData, saveToDatabase: boolean) => {
|
||||
try {
|
||||
if (saveToDatabase) {
|
||||
// Save core persona simple fields
|
||||
if (data.id) {
|
||||
const corePayload: any = {
|
||||
persona_name: data.persona_name,
|
||||
archetype: data.archetype,
|
||||
core_belief: data.core_belief,
|
||||
brand_voice_description: data.brand_voice_description,
|
||||
linguistic_fingerprint: data.linguistic_fingerprint,
|
||||
platform_adaptations: data.platform_adaptations,
|
||||
};
|
||||
|
||||
const coreRes = await fetch(`/api/personas/${data.id}?user_id=${userId}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(corePayload)
|
||||
});
|
||||
if (!coreRes.ok) throw new Error('Failed to update core persona');
|
||||
}
|
||||
|
||||
// Save platform persona fields
|
||||
const platformPayload: any = {
|
||||
sentence_metrics: data.sentence_metrics,
|
||||
lexical_features: data.lexical_features,
|
||||
rhetorical_devices: data.rhetorical_devices,
|
||||
tonal_range: data.tonal_range,
|
||||
stylistic_constraints: data.stylistic_constraints,
|
||||
content_format_rules: data.content_format_rules,
|
||||
engagement_patterns: data.engagement_patterns,
|
||||
posting_frequency: data.posting_frequency,
|
||||
content_types: data.content_types,
|
||||
platform_best_practices: data.platform_best_practices,
|
||||
algorithm_considerations: data.algorithm_considerations,
|
||||
};
|
||||
|
||||
const platRes = await fetch(`/api/personas/platform/${platform}?user_id=${userId}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(platformPayload)
|
||||
});
|
||||
if (!platRes.ok) throw new Error('Failed to update platform persona');
|
||||
}
|
||||
|
||||
// Update local state
|
||||
setPersonaData(data);
|
||||
|
||||
// Notify parent component
|
||||
if (onPersonaUpdate) {
|
||||
onPersonaUpdate(data);
|
||||
}
|
||||
|
||||
console.log('Persona updated:', saveToDatabase ? 'saved to database' : 'session only');
|
||||
} catch (err) {
|
||||
console.error('Error saving persona:', err);
|
||||
setError('Failed to save persona changes');
|
||||
}
|
||||
};
|
||||
|
||||
const getPersonaColor = (confidence?: number) => {
|
||||
if (!confidence) return '#6b7280';
|
||||
if (confidence >= 0.8) return '#10b981';
|
||||
if (confidence >= 0.6) return '#f59e0b';
|
||||
return '#ef4444';
|
||||
};
|
||||
|
||||
const getPersonaIcon = (archetype?: string) => {
|
||||
if (!archetype) return '👤';
|
||||
|
||||
const archetypeIcons: Record<string, string> = {
|
||||
'pragmatic futurist': '🔮',
|
||||
'thoughtful educator': '📚',
|
||||
'innovative leader': '🚀',
|
||||
'analytical expert': '🔍',
|
||||
'creative storyteller': '✨',
|
||||
'strategic advisor': '🎯',
|
||||
'authentic connector': '🤝',
|
||||
'data-driven optimist': '📊'
|
||||
};
|
||||
|
||||
const lowerArchetype = archetype.toLowerCase();
|
||||
for (const [key, icon] of Object.entries(archetypeIcons)) {
|
||||
if (lowerArchetype.includes(key)) {
|
||||
return icon;
|
||||
}
|
||||
}
|
||||
|
||||
return '👤';
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div style={{
|
||||
background: 'linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%)',
|
||||
border: '1px solid #d1d5db',
|
||||
borderRadius: '999px',
|
||||
padding: '6px 14px',
|
||||
fontSize: '11px',
|
||||
fontWeight: '700',
|
||||
color: '#6b7280',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px'
|
||||
}}>
|
||||
<div style={{
|
||||
width: '8px',
|
||||
height: '8px',
|
||||
borderRadius: '50%',
|
||||
background: '#9ca3af',
|
||||
animation: 'pulse 2s infinite'
|
||||
}} />
|
||||
Loading Persona...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !personaData) {
|
||||
return (
|
||||
<div style={{
|
||||
background: 'linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%)',
|
||||
border: '1px solid #fca5a5',
|
||||
borderRadius: '999px',
|
||||
padding: '6px 14px',
|
||||
fontSize: '11px',
|
||||
fontWeight: '700',
|
||||
color: '#dc2626',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
onClick={() => fetchPersonaData()}
|
||||
title="Click to retry loading persona data"
|
||||
>
|
||||
<div style={{
|
||||
width: '8px',
|
||||
height: '8px',
|
||||
borderRadius: '50%',
|
||||
background: '#ef4444'
|
||||
}} />
|
||||
No Persona
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const confidence = personaData.confidence_score || 0;
|
||||
const confidenceColor = getPersonaColor(confidence);
|
||||
|
||||
// Debug: Log the confidence score to see what's being stored
|
||||
console.log('PersonaChip confidence_score:', personaData.confidence_score, 'processed:', confidence);
|
||||
const personaIcon = getPersonaIcon(personaData.archetype);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
background: `linear-gradient(135deg, ${confidenceColor} 0%, ${confidenceColor}dd 100%)`,
|
||||
border: `1px solid ${confidenceColor}`,
|
||||
borderRadius: '999px',
|
||||
padding: '6px 14px',
|
||||
fontSize: '11px',
|
||||
fontWeight: '700',
|
||||
color: 'white',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.3s ease',
|
||||
position: 'relative',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
boxShadow: `0 2px 8px ${confidenceColor}40`,
|
||||
transform: 'translateZ(0)',
|
||||
userSelect: 'none'
|
||||
}}
|
||||
title={`${personaData.persona_name} - ${personaData.archetype || 'No archetype'} (${Math.round(confidence * 100)}% confidence). Click to edit.`}
|
||||
onMouseOver={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(-2px) scale(1.05)';
|
||||
e.currentTarget.style.boxShadow = `0 4px 16px ${confidenceColor}60`;
|
||||
}}
|
||||
onMouseOut={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(0) scale(1)';
|
||||
e.currentTarget.style.boxShadow = `0 2px 8px ${confidenceColor}40`;
|
||||
}}
|
||||
onClick={() => setShowEditor(true)}
|
||||
>
|
||||
<div style={{
|
||||
fontSize: '12px',
|
||||
flexShrink: 0
|
||||
}}>
|
||||
{personaIcon}
|
||||
</div>
|
||||
<div style={{
|
||||
width: '8px',
|
||||
height: '8px',
|
||||
borderRadius: '50%',
|
||||
background: 'rgba(255, 255, 255, 0.9)',
|
||||
flexShrink: 0,
|
||||
boxShadow: '0 0 6px rgba(255, 255, 255, 0.5)'
|
||||
}} />
|
||||
<span style={{ whiteSpace: 'nowrap' }}>
|
||||
{personaData.persona_name || 'Untitled Persona'}
|
||||
</span>
|
||||
<div style={{
|
||||
fontSize: '10px',
|
||||
opacity: 0.8,
|
||||
marginLeft: '4px'
|
||||
}}>
|
||||
{Math.round(confidence * 100)}%
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PersonaEditorModal
|
||||
isOpen={showEditor}
|
||||
onClose={() => setShowEditor(false)}
|
||||
personaData={personaData}
|
||||
onSave={(data, saveToDatabase) => handleSavePersona(data, saveToDatabase)}
|
||||
platform={platform}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PersonaChip;
|
||||
@@ -0,0 +1,857 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
interface PersonaData {
|
||||
// Core WritingPersona fields
|
||||
id?: number;
|
||||
user_id?: number;
|
||||
persona_name: string;
|
||||
archetype: string;
|
||||
core_belief: string;
|
||||
brand_voice_description: string;
|
||||
linguistic_fingerprint: any;
|
||||
platform_adaptations: any;
|
||||
confidence_score: number;
|
||||
ai_analysis_version: string;
|
||||
|
||||
// PlatformPersona fields
|
||||
platform_type: string;
|
||||
sentence_metrics: any;
|
||||
lexical_features: any;
|
||||
rhetorical_devices: any;
|
||||
tonal_range: any;
|
||||
stylistic_constraints: any;
|
||||
content_format_rules: any;
|
||||
engagement_patterns: any;
|
||||
posting_frequency: any;
|
||||
content_types: any;
|
||||
platform_best_practices: any;
|
||||
algorithm_considerations: any;
|
||||
}
|
||||
|
||||
interface PersonaEditorModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
personaData: PersonaData | null;
|
||||
onSave: (data: PersonaData, saveToDatabase: boolean) => void;
|
||||
platform: string;
|
||||
}
|
||||
|
||||
const PersonaEditorModal: React.FC<PersonaEditorModalProps> = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
personaData,
|
||||
onSave,
|
||||
platform
|
||||
}) => {
|
||||
const [editedData, setEditedData] = useState<PersonaData | null>(null);
|
||||
const [activeTab, setActiveTab] = useState<'core' | 'linguistic' | 'platform' | 'optimization'>('core');
|
||||
const [saveToDatabase, setSaveToDatabase] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
if (personaData) {
|
||||
setEditedData({ ...personaData });
|
||||
}
|
||||
}, [personaData]);
|
||||
|
||||
if (!isOpen || !editedData) return null;
|
||||
|
||||
const handleSave = () => {
|
||||
onSave(editedData, saveToDatabase);
|
||||
};
|
||||
|
||||
const updateField = (path: string, value: any) => {
|
||||
setEditedData(prev => {
|
||||
if (!prev) return prev;
|
||||
const newData = { ...prev };
|
||||
const keys = path.split('.');
|
||||
let current: any = newData;
|
||||
|
||||
for (let i = 0; i < keys.length - 1; i++) {
|
||||
if (!current[keys[i]]) {
|
||||
current[keys[i]] = {};
|
||||
}
|
||||
current = current[keys[i]];
|
||||
}
|
||||
|
||||
current[keys[keys.length - 1]] = value;
|
||||
return newData;
|
||||
});
|
||||
};
|
||||
|
||||
const getFieldValue = (path: string, defaultValue: any = '') => {
|
||||
const keys = path.split('.');
|
||||
let current: any = editedData;
|
||||
|
||||
for (const key of keys) {
|
||||
if (current && typeof current === 'object' && key in current) {
|
||||
current = current[key];
|
||||
} else {
|
||||
return defaultValue;
|
||||
}
|
||||
}
|
||||
|
||||
return current || defaultValue;
|
||||
};
|
||||
|
||||
const tabs = [
|
||||
{ id: 'core', label: 'Core Identity', icon: '🎭' },
|
||||
{ id: 'linguistic', label: 'Linguistic', icon: '📝' },
|
||||
{ id: 'platform', label: 'Platform', icon: '🔗' },
|
||||
{ id: 'optimization', label: 'Optimization', icon: '⚡' }
|
||||
] as const;
|
||||
|
||||
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: 10000,
|
||||
padding: '20px'
|
||||
}}>
|
||||
<div style={{
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '16px',
|
||||
boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)',
|
||||
width: '100%',
|
||||
maxWidth: '800px',
|
||||
maxHeight: '90vh',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
overflow: 'hidden'
|
||||
}}>
|
||||
{/* Header */}
|
||||
<div style={{
|
||||
padding: '24px 24px 0 24px',
|
||||
borderBottom: '1px solid #e5e7eb',
|
||||
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
|
||||
color: 'white'
|
||||
}}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
|
||||
<div>
|
||||
<h2 style={{ margin: 0, fontSize: '24px', fontWeight: '700' }}>
|
||||
Edit Persona: {getFieldValue('persona_name', 'Untitled Persona')}
|
||||
</h2>
|
||||
<p style={{ margin: '4px 0 0 0', fontSize: '14px', opacity: 0.9 }}>
|
||||
Platform: {platform} • Confidence: {(() => {
|
||||
const score = getFieldValue('confidence_score', 0) || 0;
|
||||
console.log('PersonaEditorModal confidence_score:', score);
|
||||
return score;
|
||||
})()}%
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
style={{
|
||||
background: 'rgba(255, 255, 255, 0.2)',
|
||||
border: 'none',
|
||||
borderRadius: '8px',
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
cursor: 'pointer',
|
||||
fontSize: '18px',
|
||||
color: 'white'
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div style={{ display: 'flex', gap: '4px' }}>
|
||||
{tabs.map(tab => (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
style={{
|
||||
background: activeTab === tab.id ? 'rgba(255, 255, 255, 0.2)' : 'transparent',
|
||||
border: 'none',
|
||||
borderRadius: '8px 8px 0 0',
|
||||
padding: '12px 16px',
|
||||
color: 'white',
|
||||
fontSize: '14px',
|
||||
fontWeight: '600',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
transition: 'all 0.2s ease'
|
||||
}}
|
||||
>
|
||||
<span>{tab.icon}</span>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div style={{
|
||||
flex: 1,
|
||||
overflow: 'auto',
|
||||
padding: '24px'
|
||||
}}>
|
||||
{activeTab === 'core' && (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
|
||||
<div>
|
||||
<label style={{ display: 'block', fontSize: '14px', fontWeight: '600', color: '#374151', marginBottom: '8px' }}>
|
||||
Persona Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={getFieldValue('persona_name', '')}
|
||||
onChange={(e) => updateField('persona_name', e.target.value)}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '12px 16px',
|
||||
border: '2px solid #e5e7eb',
|
||||
borderRadius: '8px',
|
||||
fontSize: '16px',
|
||||
transition: 'border-color 0.2s ease',
|
||||
outline: 'none'
|
||||
}}
|
||||
onFocus={(e) => e.target.style.borderColor = '#667eea'}
|
||||
onBlur={(e) => e.target.style.borderColor = '#e5e7eb'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label style={{ display: 'block', fontSize: '14px', fontWeight: '600', color: '#374151', marginBottom: '8px' }}>
|
||||
Archetype / Guide
|
||||
</label>
|
||||
<textarea
|
||||
value={getFieldValue('archetype', '')}
|
||||
onChange={(e) => updateField('archetype', e.target.value)}
|
||||
rows={2}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '12px 16px',
|
||||
border: '2px solid #e5e7eb',
|
||||
borderRadius: '8px',
|
||||
fontSize: '16px',
|
||||
resize: 'vertical',
|
||||
minHeight: '60px',
|
||||
transition: 'border-color 0.2s ease',
|
||||
outline: 'none'
|
||||
}}
|
||||
onFocus={(e) => e.target.style.borderColor = '#667eea'}
|
||||
onBlur={(e) => e.target.style.borderColor = '#e5e7eb'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label style={{ display: 'block', fontSize: '14px', fontWeight: '600', color: '#374151', marginBottom: '8px' }}>
|
||||
Core Belief / Mission
|
||||
</label>
|
||||
<textarea
|
||||
value={getFieldValue('core_belief', '')}
|
||||
onChange={(e) => updateField('core_belief', e.target.value)}
|
||||
rows={3}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '12px 16px',
|
||||
border: '2px solid #e5e7eb',
|
||||
borderRadius: '8px',
|
||||
fontSize: '16px',
|
||||
resize: 'vertical',
|
||||
minHeight: '80px',
|
||||
transition: 'border-color 0.2s ease',
|
||||
outline: 'none'
|
||||
}}
|
||||
onFocus={(e) => e.target.style.borderColor = '#667eea'}
|
||||
onBlur={(e) => e.target.style.borderColor = '#e5e7eb'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label style={{ display: 'block', fontSize: '14px', fontWeight: '600', color: '#374151', marginBottom: '8px' }}>
|
||||
Brand Voice / Speaking Style
|
||||
</label>
|
||||
<textarea
|
||||
value={getFieldValue('brand_voice_description', '')}
|
||||
onChange={(e) => updateField('brand_voice_description', e.target.value)}
|
||||
rows={3}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '12px 16px',
|
||||
border: '2px solid #e5e7eb',
|
||||
borderRadius: '8px',
|
||||
fontSize: '16px',
|
||||
resize: 'vertical',
|
||||
minHeight: '80px',
|
||||
transition: 'border-color 0.2s ease',
|
||||
outline: 'none'
|
||||
}}
|
||||
onFocus={(e) => e.target.style.borderColor = '#667eea'}
|
||||
onBlur={(e) => e.target.style.borderColor = '#e5e7eb'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
|
||||
<div>
|
||||
<label style={{ display: 'block', fontSize: '14px', fontWeight: '600', color: '#374151', marginBottom: '8px' }}>
|
||||
Confidence Score
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
max="100"
|
||||
value={getFieldValue('confidence_score', '')}
|
||||
onChange={(e) => updateField('confidence_score', parseInt(e.target.value) || 0)}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '12px 16px',
|
||||
border: '2px solid #e5e7eb',
|
||||
borderRadius: '8px',
|
||||
fontSize: '16px',
|
||||
transition: 'border-color 0.2s ease',
|
||||
outline: 'none'
|
||||
}}
|
||||
onFocus={(e) => e.target.style.borderColor = '#667eea'}
|
||||
onBlur={(e) => e.target.style.borderColor = '#e5e7eb'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label style={{ display: 'block', fontSize: '14px', fontWeight: '600', color: '#374151', marginBottom: '8px' }}>
|
||||
AI Analysis Version
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={getFieldValue('ai_analysis_version', '')}
|
||||
onChange={(e) => updateField('ai_analysis_version', e.target.value)}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '12px 16px',
|
||||
border: '2px solid #e5e7eb',
|
||||
borderRadius: '8px',
|
||||
fontSize: '16px',
|
||||
transition: 'border-color 0.2s ease',
|
||||
outline: 'none'
|
||||
}}
|
||||
onFocus={(e) => e.target.style.borderColor = '#667eea'}
|
||||
onBlur={(e) => e.target.style.borderColor = '#e5e7eb'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'linguistic' && (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
|
||||
<div>
|
||||
<h3 style={{ margin: '0 0 16px 0', fontSize: '18px', fontWeight: '600', color: '#374151' }}>
|
||||
Sentence Metrics
|
||||
</h3>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
|
||||
<div>
|
||||
<label style={{ display: 'block', fontSize: '14px', fontWeight: '600', color: '#374151', marginBottom: '8px' }}>
|
||||
Average Sentence Length (words)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={getFieldValue('linguistic_fingerprint.sentence_metrics.average_sentence_length_words', '')}
|
||||
onChange={(e) => updateField('linguistic_fingerprint.sentence_metrics.average_sentence_length_words', parseInt(e.target.value) || '')}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '12px 16px',
|
||||
border: '2px solid #e5e7eb',
|
||||
borderRadius: '8px',
|
||||
fontSize: '16px',
|
||||
transition: 'border-color 0.2s ease',
|
||||
outline: 'none'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ display: 'block', fontSize: '14px', fontWeight: '600', color: '#374151', marginBottom: '8px' }}>
|
||||
Preferred Sentence Type
|
||||
</label>
|
||||
<select
|
||||
value={getFieldValue('linguistic_fingerprint.sentence_metrics.preferred_sentence_type', '')}
|
||||
onChange={(e) => updateField('linguistic_fingerprint.sentence_metrics.preferred_sentence_type', e.target.value)}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '12px 16px',
|
||||
border: '2px solid #e5e7eb',
|
||||
borderRadius: '8px',
|
||||
fontSize: '16px',
|
||||
transition: 'border-color 0.2s ease',
|
||||
outline: 'none'
|
||||
}}
|
||||
>
|
||||
<option value="simple_and_compound">Simple and Compound</option>
|
||||
<option value="complex">Complex</option>
|
||||
<option value="mixed">Mixed</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 style={{ margin: '0 0 16px 0', fontSize: '18px', fontWeight: '600', color: '#374151' }}>
|
||||
Lexical Features
|
||||
</h3>
|
||||
<div>
|
||||
<label style={{ display: 'block', fontSize: '14px', fontWeight: '600', color: '#374151', marginBottom: '8px' }}>
|
||||
Go-to Words (comma-separated)
|
||||
</label>
|
||||
<textarea
|
||||
value={getFieldValue('linguistic_fingerprint.lexical_features.go_to_words', []).join(', ')}
|
||||
onChange={(e) => updateField('linguistic_fingerprint.lexical_features.go_to_words', e.target.value.split(',').map(w => w.trim()).filter(w => w))}
|
||||
rows={2}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '12px 16px',
|
||||
border: '2px solid #e5e7eb',
|
||||
borderRadius: '8px',
|
||||
fontSize: '16px',
|
||||
resize: 'vertical',
|
||||
minHeight: '60px',
|
||||
transition: 'border-color 0.2s ease',
|
||||
outline: 'none'
|
||||
}}
|
||||
placeholder="e.g., innovative, strategic, transformative, impactful, leverage"
|
||||
/>
|
||||
</div>
|
||||
<div style={{ marginTop: '16px' }}>
|
||||
<label style={{ display: 'block', fontSize: '14px', fontWeight: '600', color: '#374151', marginBottom: '8px' }}>
|
||||
Avoid Words (comma-separated)
|
||||
</label>
|
||||
<textarea
|
||||
value={getFieldValue('linguistic_fingerprint.lexical_features.avoid_words', []).join(', ')}
|
||||
onChange={(e) => updateField('linguistic_fingerprint.lexical_features.avoid_words', e.target.value.split(',').map(w => w.trim()).filter(w => w))}
|
||||
rows={2}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '12px 16px',
|
||||
border: '2px solid #e5e7eb',
|
||||
borderRadius: '8px',
|
||||
fontSize: '16px',
|
||||
resize: 'vertical',
|
||||
minHeight: '60px',
|
||||
transition: 'border-color 0.2s ease',
|
||||
outline: 'none'
|
||||
}}
|
||||
placeholder="e.g., buzzwords, jargon, clichés, overly technical terms"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 style={{ margin: '0 0 16px 0', fontSize: '18px', fontWeight: '600', color: '#374151' }}>
|
||||
Tonal Range
|
||||
</h3>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
|
||||
<div>
|
||||
<label style={{ display: 'block', fontSize: '14px', fontWeight: '600', color: '#374151', marginBottom: '8px' }}>
|
||||
Default Tone
|
||||
</label>
|
||||
<select
|
||||
value={getFieldValue('tonal_range.default_tone', '')}
|
||||
onChange={(e) => updateField('tonal_range.default_tone', e.target.value)}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '12px 16px',
|
||||
border: '2px solid #e5e7eb',
|
||||
borderRadius: '8px',
|
||||
fontSize: '16px',
|
||||
transition: 'border-color 0.2s ease',
|
||||
outline: 'none'
|
||||
}}
|
||||
>
|
||||
<option value="professional">Professional</option>
|
||||
<option value="conversational">Conversational</option>
|
||||
<option value="authoritative">Authoritative</option>
|
||||
<option value="inspirational">Inspirational</option>
|
||||
<option value="educational">Educational</option>
|
||||
<option value="friendly">Friendly</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ display: 'block', fontSize: '14px', fontWeight: '600', color: '#374151', marginBottom: '8px' }}>
|
||||
Permissible Tones (comma-separated)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={getFieldValue('tonal_range.permissible_tones', []).join(', ')}
|
||||
onChange={(e) => updateField('tonal_range.permissible_tones', e.target.value.split(',').map(w => w.trim()).filter(w => w))}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '12px 16px',
|
||||
border: '2px solid #e5e7eb',
|
||||
borderRadius: '8px',
|
||||
fontSize: '16px',
|
||||
transition: 'border-color 0.2s ease',
|
||||
outline: 'none'
|
||||
}}
|
||||
placeholder="e.g., professional, conversational, authoritative"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'platform' && (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
|
||||
<div>
|
||||
<h3 style={{ margin: '0 0 16px 0', fontSize: '18px', fontWeight: '600', color: '#374151' }}>
|
||||
Content Format Rules
|
||||
</h3>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
|
||||
<div>
|
||||
<label style={{ display: 'block', fontSize: '14px', fontWeight: '600', color: '#374151', marginBottom: '8px' }}>
|
||||
Character Limit
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={getFieldValue('content_format_rules.character_limit', '')}
|
||||
onChange={(e) => updateField('content_format_rules.character_limit', parseInt(e.target.value) || 3000)}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '12px 16px',
|
||||
border: '2px solid #e5e7eb',
|
||||
borderRadius: '8px',
|
||||
fontSize: '16px',
|
||||
transition: 'border-color 0.2s ease',
|
||||
outline: 'none'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ display: 'block', fontSize: '14px', fontWeight: '600', color: '#374151', marginBottom: '8px' }}>
|
||||
Optimal Length
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={getFieldValue('content_format_rules.optimal_length', '')}
|
||||
onChange={(e) => updateField('content_format_rules.optimal_length', e.target.value)}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '12px 16px',
|
||||
border: '2px solid #e5e7eb',
|
||||
borderRadius: '8px',
|
||||
fontSize: '16px',
|
||||
transition: 'border-color 0.2s ease',
|
||||
outline: 'none'
|
||||
}}
|
||||
placeholder="e.g., 150-200 words"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ marginTop: '16px' }}>
|
||||
<label style={{ display: 'block', fontSize: '14px', fontWeight: '600', color: '#374151', marginBottom: '8px' }}>
|
||||
Paragraph Structure
|
||||
</label>
|
||||
<textarea
|
||||
value={getFieldValue('content_format_rules.paragraph_structure', '')}
|
||||
onChange={(e) => updateField('content_format_rules.paragraph_structure', e.target.value)}
|
||||
rows={3}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '12px 16px',
|
||||
border: '2px solid #e5e7eb',
|
||||
borderRadius: '8px',
|
||||
fontSize: '16px',
|
||||
resize: 'vertical',
|
||||
minHeight: '80px',
|
||||
transition: 'border-color 0.2s ease',
|
||||
outline: 'none'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 style={{ margin: '0 0 16px 0', fontSize: '18px', fontWeight: '600', color: '#374151' }}>
|
||||
Engagement Patterns
|
||||
</h3>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' }}>
|
||||
<div>
|
||||
<label style={{ display: 'block', fontSize: '14px', fontWeight: '600', color: '#374151', marginBottom: '8px' }}>
|
||||
Posting Frequency
|
||||
</label>
|
||||
<select
|
||||
value={getFieldValue('engagement_patterns.posting_frequency', '')}
|
||||
onChange={(e) => updateField('engagement_patterns.posting_frequency', e.target.value)}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '12px 16px',
|
||||
border: '2px solid #e5e7eb',
|
||||
borderRadius: '8px',
|
||||
fontSize: '16px',
|
||||
transition: 'border-color 0.2s ease',
|
||||
outline: 'none'
|
||||
}}
|
||||
>
|
||||
<option value="daily">Daily</option>
|
||||
<option value="2-3 times per week">2-3 times per week</option>
|
||||
<option value="weekly">Weekly</option>
|
||||
<option value="bi-weekly">Bi-weekly</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ display: 'block', fontSize: '14px', fontWeight: '600', color: '#374151', marginBottom: '8px' }}>
|
||||
Best Posting Times
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={getFieldValue('engagement_patterns.best_posting_times', '')}
|
||||
onChange={(e) => updateField('engagement_patterns.best_posting_times', e.target.value)}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '12px 16px',
|
||||
border: '2px solid #e5e7eb',
|
||||
borderRadius: '8px',
|
||||
fontSize: '16px',
|
||||
transition: 'border-color 0.2s ease',
|
||||
outline: 'none'
|
||||
}}
|
||||
placeholder="e.g., Tuesday-Thursday, 8-10 AM or 1-3 PM"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 style={{ margin: '0 0 16px 0', fontSize: '18px', fontWeight: '600', color: '#374151' }}>
|
||||
Content Types
|
||||
</h3>
|
||||
<div>
|
||||
<label style={{ display: 'block', fontSize: '14px', fontWeight: '600', color: '#374151', marginBottom: '8px' }}>
|
||||
Preferred Content Types (comma-separated)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={getFieldValue('content_types.preferred_types', []).join(', ')}
|
||||
onChange={(e) => updateField('content_types.preferred_types', e.target.value.split(',').map(w => w.trim()).filter(w => w))}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '12px 16px',
|
||||
border: '2px solid #e5e7eb',
|
||||
borderRadius: '8px',
|
||||
fontSize: '16px',
|
||||
transition: 'border-color 0.2s ease',
|
||||
outline: 'none'
|
||||
}}
|
||||
placeholder="e.g., thought leadership, industry insights, case studies, tips"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'optimization' && (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
|
||||
<div>
|
||||
<h3 style={{ margin: '0 0 16px 0', fontSize: '18px', fontWeight: '600', color: '#374151' }}>
|
||||
Platform Best Practices
|
||||
</h3>
|
||||
<div>
|
||||
<label style={{ display: 'block', fontSize: '14px', fontWeight: '600', color: '#374151', marginBottom: '8px' }}>
|
||||
Hashtag Strategy
|
||||
</label>
|
||||
<textarea
|
||||
value={getFieldValue('platform_best_practices.hashtag_strategy', '')}
|
||||
onChange={(e) => updateField('platform_best_practices.hashtag_strategy', e.target.value)}
|
||||
rows={3}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '12px 16px',
|
||||
border: '2px solid #e5e7eb',
|
||||
borderRadius: '8px',
|
||||
fontSize: '16px',
|
||||
resize: 'vertical',
|
||||
minHeight: '80px',
|
||||
transition: 'border-color 0.2s ease',
|
||||
outline: 'none'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ marginTop: '16px' }}>
|
||||
<label style={{ display: 'block', fontSize: '14px', fontWeight: '600', color: '#374151', marginBottom: '8px' }}>
|
||||
Call-to-Action Style
|
||||
</label>
|
||||
<textarea
|
||||
value={getFieldValue('platform_best_practices.cta_style', '')}
|
||||
onChange={(e) => updateField('platform_best_practices.cta_style', e.target.value)}
|
||||
rows={3}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '12px 16px',
|
||||
border: '2px solid #e5e7eb',
|
||||
borderRadius: '8px',
|
||||
fontSize: '16px',
|
||||
resize: 'vertical',
|
||||
minHeight: '80px',
|
||||
transition: 'border-color 0.2s ease',
|
||||
outline: 'none'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 style={{ margin: '0 0 16px 0', fontSize: '18px', fontWeight: '600', color: '#374151' }}>
|
||||
Algorithm Considerations
|
||||
</h3>
|
||||
<div>
|
||||
<label style={{ display: 'block', fontSize: '14px', fontWeight: '600', color: '#374151', marginBottom: '8px' }}>
|
||||
Engagement Optimization
|
||||
</label>
|
||||
<textarea
|
||||
value={getFieldValue('algorithm_considerations.engagement_optimization', '')}
|
||||
onChange={(e) => updateField('algorithm_considerations.engagement_optimization', e.target.value)}
|
||||
rows={3}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '12px 16px',
|
||||
border: '2px solid #e5e7eb',
|
||||
borderRadius: '8px',
|
||||
fontSize: '16px',
|
||||
resize: 'vertical',
|
||||
minHeight: '80px',
|
||||
transition: 'border-color 0.2s ease',
|
||||
outline: 'none'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div style={{ marginTop: '16px' }}>
|
||||
<label style={{ display: 'block', fontSize: '14px', fontWeight: '600', color: '#374151', marginBottom: '8px' }}>
|
||||
Content Timing
|
||||
</label>
|
||||
<textarea
|
||||
value={getFieldValue('algorithm_considerations.content_timing', '')}
|
||||
onChange={(e) => updateField('algorithm_considerations.content_timing', e.target.value)}
|
||||
rows={3}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '12px 16px',
|
||||
border: '2px solid #e5e7eb',
|
||||
borderRadius: '8px',
|
||||
fontSize: '16px',
|
||||
resize: 'vertical',
|
||||
minHeight: '80px',
|
||||
transition: 'border-color 0.2s ease',
|
||||
outline: 'none'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 style={{ margin: '0 0 16px 0', fontSize: '18px', fontWeight: '600', color: '#374151' }}>
|
||||
Stylistic Constraints
|
||||
</h3>
|
||||
<div>
|
||||
<label style={{ display: 'block', fontSize: '14px', fontWeight: '600', color: '#374151', marginBottom: '8px' }}>
|
||||
Forbidden Elements
|
||||
</label>
|
||||
<textarea
|
||||
value={getFieldValue('stylistic_constraints.forbidden_elements', '')}
|
||||
onChange={(e) => updateField('stylistic_constraints.forbidden_elements', e.target.value)}
|
||||
rows={3}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '12px 16px',
|
||||
border: '2px solid #e5e7eb',
|
||||
borderRadius: '8px',
|
||||
fontSize: '16px',
|
||||
resize: 'vertical',
|
||||
minHeight: '80px',
|
||||
transition: 'border-color 0.2s ease',
|
||||
outline: 'none'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div style={{
|
||||
padding: '20px 24px',
|
||||
borderTop: '1px solid #e5e7eb',
|
||||
backgroundColor: '#f9fafb',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center'
|
||||
}}>
|
||||
<label style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '14px', color: '#374151' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={saveToDatabase}
|
||||
onChange={(e) => setSaveToDatabase(e.target.checked)}
|
||||
style={{ margin: 0 }}
|
||||
/>
|
||||
Save changes to database
|
||||
<span style={{ fontSize: '12px', color: '#6b7280' }}>
|
||||
{saveToDatabase ? 'Changes will be permanent' : 'Changes will be session-only'}
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<div style={{ display: 'flex', gap: '12px' }}>
|
||||
<button
|
||||
onClick={onClose}
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
border: '2px solid #e5e7eb',
|
||||
borderRadius: '8px',
|
||||
backgroundColor: 'white',
|
||||
color: '#374151',
|
||||
fontSize: '14px',
|
||||
fontWeight: '600',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.2s ease'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.borderColor = '#d1d5db';
|
||||
e.currentTarget.style.backgroundColor = '#f9fafb';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.borderColor = '#e5e7eb';
|
||||
e.currentTarget.style.backgroundColor = 'white';
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
border: 'none',
|
||||
borderRadius: '8px',
|
||||
backgroundColor: '#667eea',
|
||||
color: 'white',
|
||||
fontSize: '14px',
|
||||
fontWeight: '600',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.2s ease'
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.backgroundColor = '#5a67d8';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.backgroundColor = '#667eea';
|
||||
}}
|
||||
>
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PersonaEditorModal;
|
||||
@@ -0,0 +1,4 @@
|
||||
export { default as MainContentPreviewHeader } from './MainContentPreviewHeader';
|
||||
export { default as ContentPreviewHeaderWithModals } from './ContentPreviewHeaderWithModals';
|
||||
export { default as PersonaEditorModal } from './PersonaEditorModal';
|
||||
export { default as PersonaChip } from './PersonaChip';
|
||||
@@ -2,7 +2,6 @@ export { default as CitationHoverHandler } from './CitationHoverHandler';
|
||||
export { default as useTextSelectionHandler } from './TextSelectionHandler';
|
||||
export { default as QuickEditToolbar } from './QuickEditToolbar';
|
||||
export { default as DiffPreviewModal } from './DiffPreviewModal';
|
||||
export { default as ContentPreviewHeader } from './ContentPreviewHeader';
|
||||
export { ContentPreviewHeaderWithModals } from './ContentPreviewHeader';
|
||||
export { MainContentPreviewHeader as ContentPreviewHeader, ContentPreviewHeaderWithModals } from './ContentPreviewHeaderComponents';
|
||||
export { default as WritingAssistantCard } from './WritingAssistantCard';
|
||||
export { default as ContentDisplayArea } from './ContentDisplayArea';
|
||||
|
||||
Reference in New Issue
Block a user