Advanced Content Hyper-Personalization Implementation

frontend/src/components/LinkedInWriter/LinkedInWriter.tsx

@@ -5,9 +5,11 @@ import '@copilotkit/react-ui/styles.css';
 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 { useLinkedInWriter } from './hooks/useLinkedInWriter';
 import { useCopilotPersistence } from './utils/enhancedPersistence';
+import { PlatformPersonaProvider, usePlatformPersonaContext } from '../shared/PersonaContext/PlatformPersonaProvider';
 
 const useCopilotActionTyped = useCopilotAction as any;
 
@@ -18,6 +20,15 @@ interface LinkedInWriterProps {
 }
 
 const LinkedInWriter: React.FC<LinkedInWriterProps> = ({ className = '' }) => {
+  return (
+    <PlatformPersonaProvider platform="linkedin">
+      <LinkedInWriterContent className={className} />
+    </PlatformPersonaProvider>
+  );
+};
+
+// Main LinkedIn Writer Content Component
+const LinkedInWriterContent: React.FC<LinkedInWriterProps> = ({ className = '' }) => {
   const {
     // State
     draft,
@@ -68,6 +79,8 @@ const LinkedInWriter: React.FC<LinkedInWriterProps> = ({ className = '' }) => {
     summarizeHistory
   } = useLinkedInWriter();
 
+  // Get persona context for enhanced AI assistance
+  const { corePersona, platformPersona, loading: personaLoading } = usePlatformPersonaContext();
 
 
   // Get enhanced persistence functionality
@@ -397,6 +410,54 @@ const LinkedInWriter: React.FC<LinkedInWriterProps> = ({ className = '' }) => {
         draft={draft}
         getHistoryLength={getHistoryLength}
       />
+                  {/* Persona Integration Indicator */}
+            {corePersona && !personaLoading && (
+              <div 
+                style={{
+                  padding: '8px 16px',
+                  backgroundColor: '#f0f8ff',
+                  borderBottom: '1px solid #e1e8ed',
+                  fontSize: '12px',
+                  color: '#666',
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '8px',
+                  cursor: 'help',
+                  position: 'relative'
+                }}
+                title={`Complete Persona Details:
+                
+🎭 PERSONA: ${corePersona.persona_name}
+📋 ARCHETYPE: ${corePersona.archetype}
+💭 CORE BELIEF: ${corePersona.core_belief}
+📊 CONFIDENCE: ${corePersona.confidence_score}%
+
+📝 LINGUISTIC FINGERPRINT:
+• Sentence Length: ${corePersona.linguistic_fingerprint?.sentence_metrics?.average_sentence_length_words || 'Unknown'} words average
+• Voice Ratio: ${corePersona.linguistic_fingerprint?.sentence_metrics?.active_to_passive_ratio || 'Unknown'}
+• Go-to Words: ${corePersona.linguistic_fingerprint?.lexical_features?.go_to_words?.join(', ') || 'None specified'}
+• Avoid Words: ${corePersona.linguistic_fingerprint?.lexical_features?.avoid_words?.join(', ') || 'None specified'}
+
+🎯 PLATFORM OPTIMIZATION (LinkedIn):
+• Character Limit: ${platformPersona?.content_format_rules?.character_limit || '3000'} characters
+• Optimal Length: ${platformPersona?.content_format_rules?.optimal_length || '150-300 words'}
+• Engagement Pattern: ${platformPersona?.engagement_patterns?.posting_frequency || '2-3 times per week'}
+• Hashtag Strategy: ${platformPersona?.lexical_features?.hashtag_strategy || '3-5 relevant hashtags'}
+
+✨ This persona is actively optimizing your content generation and AI assistance!`}
+              >
+                <span style={{ color: '#0073b1' }}>🎭</span>
+                <span><strong>Persona Active:</strong> {corePersona.persona_name} ({corePersona.archetype})</span>
+                <span style={{ marginLeft: 'auto', fontSize: '11px' }}>
+                  Confidence: {corePersona.confidence_score}% | 
+                  Platform: LinkedIn Optimized
+                </span>
+                <span style={{ fontSize: '10px', color: '#999', marginLeft: '8px' }}>
+                  (Hover for details)
+                </span>
+              </div>
+            )}
+
       {/* Lightweight progress tracker under header */}
       <div style={{ 
         padding: '6px 16px',
@@ -456,8 +517,10 @@ const LinkedInWriter: React.FC<LinkedInWriterProps> = ({ className = '' }) => {
       </div>
 
       {/* Register CopilotKit Actions */}
-              <RegisterLinkedInActions />
-        <RegisterLinkedInEditActions />
+      <RegisterLinkedInActions />
+      <RegisterLinkedInEditActions />
+      {/* Enhanced Persona-Aware Actions */}
+      <RegisterLinkedInActionsEnhanced />
 
       {/* CopilotKit Sidebar */}
       <CopilotSidebar 
@@ -466,7 +529,7 @@ const LinkedInWriter: React.FC<LinkedInWriterProps> = ({ className = '' }) => {
           title: 'ALwrity Co-Pilot',
           initial: draft ? 
             'Great! I can see you have content to work with. Use the quick edit suggestions below to refine your post in real-time, or ask me to make specific changes.' : 
-            'Hi! I\'m your ALwrity Co-Pilot, your LinkedIn writing assistant. I can help you create professional posts, articles, carousels, video scripts, and comment responses. What would you like to create today?'
+            `Hi! I'm your ALwrity Co-Pilot, your LinkedIn writing assistant${corePersona ? ` with ${corePersona.persona_name} persona optimization` : ''}. I can help you create professional posts, articles, carousels, video scripts, and comment responses. Try the new persona-aware actions for enhanced content generation!`
         }}
         suggestions={getIntelligentSuggestions()}
         makeSystemMessage={(context: string, additional?: string) => {
@@ -479,7 +542,25 @@ const LinkedInWriter: React.FC<LinkedInWriterProps> = ({ className = '' }) => {
           const industry = prefs.industry || 'Technology';
           const audience = prefs.target_audience || 'professionals';
           
-                    const guidance = `
+          // Enhanced persona-aware guidance
+          const personaGuidance = corePersona && platformPersona ? `
+PERSONA-AWARE WRITING GUIDANCE:
+- PERSONA: ${corePersona.persona_name} (${corePersona.archetype})
+- CORE BELIEF: ${corePersona.core_belief}
+- CONFIDENCE SCORE: ${corePersona.confidence_score}%
+- LINGUISTIC STYLE: ${corePersona.linguistic_fingerprint?.sentence_metrics?.average_sentence_length_words || 'Unknown'} words average, ${corePersona.linguistic_fingerprint?.sentence_metrics?.active_to_passive_ratio || 'Unknown'} active/passive ratio
+- GO-TO WORDS: ${corePersona.linguistic_fingerprint?.lexical_features?.go_to_words?.join(', ') || 'None specified'}
+- AVOID WORDS: ${corePersona.linguistic_fingerprint?.lexical_features?.avoid_words?.join(', ') || 'None specified'}
+
+PLATFORM OPTIMIZATION (LinkedIn):
+- CHARACTER LIMIT: ${platformPersona.content_format_rules?.character_limit || '3000'} characters
+- OPTIMAL LENGTH: ${platformPersona.content_format_rules?.optimal_length || '150-300 words'}
+- ENGAGEMENT PATTERN: ${platformPersona.engagement_patterns?.posting_frequency || '2-3 times per week'}
+- HASHTAG STRATEGY: ${platformPersona.lexical_features?.hashtag_strategy || '3-5 relevant hashtags'}
+
+ALWAYS generate content that matches this persona's linguistic fingerprint and platform optimization rules.` : '';
+
+          const guidance = `
  You are ALwrity's LinkedIn Writing Assistant specializing in ${industry} content.
  
  CRITICAL CONSTRAINTS:
@@ -487,16 +568,23 @@ const LinkedInWriter: React.FC<LinkedInWriterProps> = ({ className = '' }) => {
  - INDUSTRY: Focus specifically on ${industry} industry context and terminology  
  - AUDIENCE: Target content specifically for ${audience}
  - QUALITY: Ensure all content meets LinkedIn professional standards
+ ${personaGuidance ? `\n${personaGuidance}` : ''}
  
  CURRENT CONTEXT:
  ${currentDraft}
  
- Available LinkedIn content tools:
- - generateLinkedInPost: Create ${tone} LinkedIn posts for ${industry} ${audience}
- - generateLinkedInArticle: Write ${tone} thought leadership articles about ${industry}
- - generateLinkedInCarousel: Design ${tone} multi-slide carousels for ${industry} insights
- - generateLinkedInVideoScript: Create ${tone} video scripts for ${industry} topics
- - generateLinkedInCommentResponse: Draft ${tone} responses appropriate for ${industry}
+       Available LinkedIn content tools:
+      - generateLinkedInPost: Create ${tone} LinkedIn posts for ${industry} ${audience}
+      - generateLinkedInArticle: Write ${tone} thought leadership articles about ${industry}
+      - generateLinkedInCarousel: Design ${tone} multi-slide carousels for ${industry} insights
+      - generateLinkedInVideoScript: Create ${tone} video scripts for ${industry} topics
+      - generateLinkedInCommentResponse: Draft ${tone} responses appropriate for ${industry}
+      
+      🎭 ENHANCED PERSONA-AWARE ACTIONS (Recommended):
+      - generateLinkedInPostWithPersona: Create posts optimized for your writing style and platform constraints
+      - generateLinkedInArticleWithPersona: Write articles with persona-aware optimization
+      - validateContentAgainstPersona: Validate existing content against your persona
+      - getPersonaWritingSuggestions: Get personalized writing recommendations
  
  DIRECT DRAFT ACTIONS:
  - updateLinkedInDraft: Replace the entire draft with new content
@@ -507,8 +595,8 @@ const LinkedInWriter: React.FC<LinkedInWriterProps> = ({ className = '' }) => {
  
  For quick edits, use editLinkedInDraft with the appropriate operation. This will show a live preview of changes before applying them.
  
- Use user preferences, context, and conversation history to personalize all content.
- Always respect the user's preferred ${tone} tone and ${industry} industry focus.
+ Use user preferences, context, conversation history, and persona data to personalize all content.
+ Always respect the user's preferred ${tone} tone, ${industry} industry focus, and writing persona style.
  Always use the most appropriate tool for the user's request.`.trim();
           return [prefsLine, historyLine, currentDraft, guidance, additional].filter(Boolean).join('\n\n');
         }}