LinkedIn and Facebook Persona Services Implementation

frontend/src/components/LinkedInWriter/LinkedInWriter.tsx

@@ -6,7 +6,8 @@ import './styles/alwrity-copilot.css';
 import RegisterLinkedInActions from './RegisterLinkedInActions';
 import RegisterLinkedInEditActions from './RegisterLinkedInEditActions';
 import RegisterLinkedInActionsEnhanced from './RegisterLinkedInActionsEnhanced';
-import { Header, ContentEditor, LoadingIndicator, WelcomeMessage, ProgressTracker, CopilotActions } from './components';
+import { Header, ContentEditor, LoadingIndicator, WelcomeMessage, ProgressTracker } from './components';
+import { useCopilotActions } from './components/CopilotActions';
 import { useLinkedInWriter } from './hooks/useLinkedInWriter';
 import { useCopilotPersistence } from './utils/enhancedPersistence';
 import { PlatformPersonaProvider, usePlatformPersonaContext } from '../shared/PersonaContext/PlatformPersonaProvider';
@@ -226,8 +227,8 @@ const LinkedInWriterContent: React.FC<LinkedInWriterProps> = ({ className = '' }
   });
 
 
-  // Initialize CopilotActions component to handle all copilot-related functionality
-  const getIntelligentSuggestions = CopilotActions({
+  // Use the CopilotActions hook to handle all copilot-related functionality
+  const getIntelligentSuggestions = useCopilotActions({
     draft,
     context,
     userPreferences,
@@ -237,7 +238,15 @@ const LinkedInWriterContent: React.FC<LinkedInWriterProps> = ({ className = '' }
   });
 
   return (
-    <div className={`linkedin-writer ${className}`} style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
+    <div 
+      className={`linkedin-writer ${className}`} 
+      style={{ 
+        height: '100vh', 
+        display: 'flex', 
+        flexDirection: 'column',
+        backgroundColor: '#ffffff' // White professional background
+      }}
+    >
       {/* Header */}
       <Header
         userPreferences={userPreferences}
@@ -267,7 +276,7 @@ const LinkedInWriterContent: React.FC<LinkedInWriterProps> = ({ className = '' }
 
 
       {/* Main Content */}
-      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', backgroundColor: '#ffffff' }}>
         {/* Loading Indicator */}
         <LoadingIndicator
           isGenerating={isGenerating}

frontend/src/components/LinkedInWriter/components/CopilotActions.tsx

@@ -16,9 +16,9 @@ interface CopilotActionsProps {
   setDraft: (draft: string) => void;
 }
 
-// Note: This is implemented as a hook-like utility, not a rendered component.
+// Note: This is implemented as a custom hook.
 // It returns the getIntelligentSuggestions function for use by the caller.
-const CopilotActions = ({
+export const useCopilotActions = ({
   draft,
   context,
   userPreferences,
@@ -428,5 +428,3 @@ const CopilotActions = ({
   // Return the suggestions function directly
   return getIntelligentSuggestions;
 };
-
-export default CopilotActions;

frontend/src/components/LinkedInWriter/components/Header.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { LinkedInPreferences } from '../utils/storageUtils';
 import { PersonaChip } from '../../TextEditor/ContentPreviewHeaderComponents';
 import { usePlatformPersonaContext } from '../../shared/PersonaContext/PlatformPersonaProvider';
@@ -25,6 +26,7 @@ export const Header: React.FC<HeaderProps> = ({
   onClearHistory,
   getHistoryLength
 }) => {
+  const navigate = useNavigate();
   const [personaOverride, setPersonaOverride] = useState<any>(null);
   const { corePersona, platformPersona } = usePlatformPersonaContext();
   
@@ -89,6 +91,34 @@ export const Header: React.FC<HeaderProps> = ({
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
         {/* Left Section - Logo and Title */}
         <div style={{ display: 'flex', alignItems: 'center', gap: '20px' }}>
+          {/* Back Button */}
+          <button
+            onClick={() => navigate('/dashboard')}
+            style={{
+              padding: '8px 12px',
+              background: 'rgba(255, 255, 255, 0.1)',
+              color: 'white',
+              border: '1px solid rgba(255, 255, 255, 0.2)',
+              borderRadius: 8,
+              cursor: 'pointer',
+              fontSize: 14,
+              fontWeight: 600,
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6,
+              transition: 'all 0.2s ease'
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.background = 'rgba(255, 255, 255, 0.2)';
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.background = 'rgba(255, 255, 255, 0.1)';
+            }}
+            title="Back to Dashboard"
+          >
+            ← Back to Dashboard
+          </button>
+          
           <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
             <img 
               src={alwrityLogo} 
@@ -211,7 +241,6 @@ export const Header: React.FC<HeaderProps> = ({
                     }}>
                       <PersonaChip 
                         platform="linkedin" 
-                        userId={1}
                         onPersonaUpdate={handlePersonaUpdate}
                       />
                     </div>

frontend/src/components/LinkedInWriter/components/index.ts

@@ -26,4 +26,4 @@ export { default as ImageGenerationTest } from './ImageGenerationTest';
 
 // Refactored Components
 export { default as BrainstormFlow } from './BrainstormFlow';
-export { default as CopilotActions } from './CopilotActions';
+export { useCopilotActions } from './CopilotActions';