Floke
03610dfd13
- market_db_manager.py: Created SQLite manager for saving/loading projects. - server.cjs: Added API routes for project management. - geminiService.ts: Added client-side DB functions. - StepInput.tsx: Added 'Past Runs' sidebar to load previous audits. - App.tsx: Added auto-save functionality and full state hydration logic. - StepOutreach.tsx: Improved UI layout by merging generated campaigns and suggestions into one list.
388 lines
18 KiB
TypeScript
388 lines
18 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { AnalysisResult, EmailDraft, Language, OutreachResponse } from '../types';
|
|
import { generateOutreachCampaign, translateEmailDrafts } from '../services/geminiService';
|
|
import { Upload, FileText, Sparkles, Copy, Check, Loader2, ArrowRight, CheckCircle2, Download, Languages, Plus, UserPlus } from 'lucide-react';
|
|
|
|
interface StepOutreachProps {
|
|
company: AnalysisResult;
|
|
language: Language;
|
|
referenceUrl: string;
|
|
onBack: () => void;
|
|
knowledgeBase?: string; // New prop for pre-loaded context
|
|
}
|
|
|
|
export const StepOutreach: React.FC<StepOutreachProps> = ({ company, language, referenceUrl, onBack, knowledgeBase }) => {
|
|
const [fileContent, setFileContent] = useState<string>(knowledgeBase || '');
|
|
const [fileName, setFileName] = useState<string>(knowledgeBase ? 'Knowledge Base from Strategy Step' : '');
|
|
|
|
const [isProcessing, setIsProcessing] = useState(false);
|
|
const [isTranslating, setIsTranslating] = useState(false);
|
|
const [isGeneratingSpecific, setIsGeneratingSpecific] = useState<string | null>(null); // Track which specific role is loading
|
|
|
|
const [emails, setEmails] = useState<EmailDraft[]>([]);
|
|
const [availableRoles, setAvailableRoles] = useState<string[]>([]); // Suggested roles not yet generated
|
|
|
|
const [activeTab, setActiveTab] = useState(0);
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
// If knowledgeBase prop changes, update state (useful if it loads late)
|
|
React.useEffect(() => {
|
|
if (knowledgeBase && !fileContent) {
|
|
setFileContent(knowledgeBase);
|
|
setFileName('Knowledge Base from Strategy Step');
|
|
}
|
|
}, [knowledgeBase]);
|
|
|
|
const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (file) {
|
|
const reader = new FileReader();
|
|
reader.onload = (event) => {
|
|
setFileContent(event.target?.result as string);
|
|
setFileName(file.name);
|
|
};
|
|
reader.readAsText(file);
|
|
}
|
|
};
|
|
|
|
const handleGenerate = async () => {
|
|
if (!fileContent) return;
|
|
setIsProcessing(true);
|
|
try {
|
|
// Initial generation (Top 5 + Suggestions)
|
|
const response: OutreachResponse = await generateOutreachCampaign(company, fileContent, language, referenceUrl);
|
|
setEmails(response.campaigns);
|
|
setAvailableRoles(response.available_roles || []);
|
|
} catch (e) {
|
|
console.error(e);
|
|
alert('Failed to generate campaign. Please try again.');
|
|
} finally {
|
|
setIsProcessing(false);
|
|
}
|
|
};
|
|
|
|
const handleGenerateSpecific = async (role: string) => {
|
|
if (!fileContent) return;
|
|
setIsGeneratingSpecific(role);
|
|
try {
|
|
// Generate single specific campaign
|
|
const response: OutreachResponse = await generateOutreachCampaign(company, fileContent, language, referenceUrl, role);
|
|
if (response.campaigns && response.campaigns.length > 0) {
|
|
// Add new campaign to list
|
|
setEmails(prev => [...prev, response.campaigns[0]]);
|
|
// Remove from available roles
|
|
setAvailableRoles(prev => prev.filter(r => r !== role));
|
|
// Switch view to new campaign
|
|
setActiveTab(emails.length);
|
|
}
|
|
} catch (e) {
|
|
console.error("Failed to generate specific role", e);
|
|
alert(`Failed to generate campaign for ${role}`);
|
|
} finally {
|
|
setIsGeneratingSpecific(null);
|
|
}
|
|
};
|
|
|
|
const handleTranslate = async (targetLang: Language) => {
|
|
if (emails.length === 0) return;
|
|
setIsTranslating(true);
|
|
try {
|
|
const translated = await translateEmailDrafts(emails, targetLang);
|
|
setEmails(translated);
|
|
} catch (e) {
|
|
console.error("Translation failed", e);
|
|
alert("Translation failed.");
|
|
} finally {
|
|
setIsTranslating(false);
|
|
}
|
|
}
|
|
|
|
const handleDownloadMD = () => {
|
|
if (emails.length === 0) return;
|
|
|
|
let content = `# Hyper-Personalized Campaign: ${company.companyName}\n\n`;
|
|
content += `Generated by parcelLab Intel\n\n`;
|
|
|
|
emails.forEach((email, index) => {
|
|
content += `## Variant ${index + 1}: ${email.persona}\n\n`;
|
|
content += `**Subject:** ${email.subject}\n\n`;
|
|
content += `**Body:**\n\n${email.body}\n\n`;
|
|
content += `**Analysis:**\n`;
|
|
email.keyPoints.forEach(kp => content += `- ${kp}\n`);
|
|
content += `\n---\n\n`;
|
|
});
|
|
|
|
const blob = new Blob([content], { type: 'text/markdown' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `campaign_${company.companyName.replace(/\s+/g, '_')}_variants.md`;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
URL.revokeObjectURL(url);
|
|
};
|
|
|
|
const copyToClipboard = (text: string) => {
|
|
navigator.clipboard.writeText(text);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000);
|
|
};
|
|
|
|
// Helper to render text with bold syntax **text**
|
|
const renderBoldText = (text: string) => {
|
|
const parts = text.split(/(\**.*?\**)/g);
|
|
return parts.map((part, index) => {
|
|
if (part.startsWith('**') && part.endsWith('**')) {
|
|
return <strong key={index} className="font-bold text-slate-900">{part.slice(2, -2)}</strong>;
|
|
}
|
|
return <span key={index}>{part}</span>;
|
|
});
|
|
};
|
|
|
|
if (emails.length > 0) {
|
|
const activeEmail = emails[activeTab];
|
|
return (
|
|
<div className="max-w-6xl mx-auto mt-8 px-4 pb-24">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h2 className="text-2xl font-bold text-slate-900">Hyper-Personalized Campaign</h2>
|
|
<p className="text-slate-600">Target: <span className="font-semibold text-indigo-600">{company.companyName}</span></p>
|
|
</div>
|
|
<button onClick={onBack} className="text-slate-500 hover:text-slate-800 font-medium text-sm">
|
|
Close & Return
|
|
</button>
|
|
</div>
|
|
|
|
{/* Toolbar */}
|
|
<div className="flex items-center gap-4 mb-4 justify-end">
|
|
<div className="flex items-center bg-white border border-slate-200 rounded-lg p-1 shadow-sm">
|
|
<span className="text-xs font-bold text-slate-400 uppercase px-2 flex items-center gap-1">
|
|
<Languages size={14} /> Translate
|
|
</span>
|
|
<div className="h-4 w-px bg-slate-200 mx-1"></div>
|
|
<button
|
|
onClick={() => handleTranslate('de')}
|
|
disabled={isTranslating}
|
|
className="px-3 py-1 text-sm font-medium hover:bg-slate-100 rounded text-slate-700 disabled:opacity-50"
|
|
>
|
|
DE
|
|
</button>
|
|
<button
|
|
onClick={() => handleTranslate('en')}
|
|
disabled={isTranslating}
|
|
className="px-3 py-1 text-sm font-medium hover:bg-slate-100 rounded text-slate-700 disabled:opacity-50"
|
|
>
|
|
EN
|
|
</button>
|
|
<button
|
|
onClick={() => handleTranslate('fr')}
|
|
disabled={isTranslating}
|
|
className="px-3 py-1 text-sm font-medium hover:bg-slate-100 rounded text-slate-700 disabled:opacity-50"
|
|
>
|
|
FR
|
|
</button>
|
|
{isTranslating && <Loader2 className="animate-spin ml-2 text-indigo-600" size={14} />}
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleDownloadMD}
|
|
className="bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 font-medium py-2 px-4 rounded-lg flex items-center gap-2 text-sm shadow-sm transition-colors"
|
|
>
|
|
<Download size={16} /> Download All Variants (.md)
|
|
</button>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl shadow-lg border border-slate-200 overflow-hidden flex flex-col md:flex-row min-h-[600px]">
|
|
{/* Sidebar Tabs */}
|
|
<div className="w-full md:w-80 bg-slate-50 border-r border-slate-200 flex flex-col h-full max-h-[600px]">
|
|
<div className="p-4 border-b border-slate-200 flex-none">
|
|
<h3 className="text-xs font-bold text-slate-400 uppercase tracking-wider">Campaign Roles</h3>
|
|
</div>
|
|
|
|
{/* Unified Scroll List */}
|
|
<div className="flex-1 overflow-y-auto p-2 flex flex-col gap-2">
|
|
{/* Generated Campaigns */}
|
|
{emails.map((email, idx) => (
|
|
<button
|
|
key={idx}
|
|
onClick={() => setActiveTab(idx)}
|
|
className={`text-left p-3 rounded-lg text-sm font-medium transition-all group ${
|
|
activeTab === idx
|
|
? 'bg-white shadow-sm text-indigo-700 border border-indigo-100 ring-1 ring-indigo-500/20'
|
|
: 'text-slate-600 hover:bg-slate-200/50'
|
|
}`}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<span className="truncate font-semibold">{email.persona}</span>
|
|
<span className="text-[10px] bg-slate-200 text-slate-500 px-1.5 py-0.5 rounded-full opacity-0 group-hover:opacity-100 transition-opacity">#{idx+1}</span>
|
|
</div>
|
|
<div className="text-xs text-slate-400 mt-1 truncate font-normal opacity-80">{email.subject}</div>
|
|
</button>
|
|
))}
|
|
|
|
{/* Separator for Suggestions */}
|
|
{availableRoles.length > 0 && (
|
|
<div className="mt-4 mb-2 px-2 flex items-center gap-2">
|
|
<div className="h-px bg-slate-200 flex-1"></div>
|
|
<span className="text-[10px] font-bold text-slate-400 uppercase tracking-wider flex items-center gap-1">
|
|
<Sparkles size={10} /> Suggestions
|
|
</span>
|
|
<div className="h-px bg-slate-200 flex-1"></div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Suggestions List */}
|
|
{availableRoles.map((role, i) => (
|
|
<div key={`sugg-${i}`} className="flex items-center justify-between p-2 pl-3 bg-slate-100/50 border border-slate-200/50 rounded-lg group hover:border-indigo-200 transition-colors">
|
|
<span className="text-xs font-medium text-slate-600 truncate max-w-[180px]" title={role}>{role}</span>
|
|
<button
|
|
onClick={() => handleGenerateSpecific(role)}
|
|
disabled={!!isGeneratingSpecific}
|
|
className="bg-white hover:bg-indigo-50 text-indigo-600 border border-slate-200 hover:border-indigo-200 p-1.5 rounded-md transition-all disabled:opacity-50 shadow-sm"
|
|
title="Generate Campaign"
|
|
>
|
|
{isGeneratingSpecific === role ? (
|
|
<Loader2 size={14} className="animate-spin" />
|
|
) : (
|
|
<Plus size={14} strokeWidth={3} />
|
|
)}
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content Area */}
|
|
<div className="flex-1 p-8 flex flex-col overflow-y-auto bg-slate-50/30">
|
|
{activeEmail ? (
|
|
<>
|
|
<div className="mb-6">
|
|
<label className="block text-xs font-bold text-slate-400 uppercase tracking-wider mb-1">Subject Line</label>
|
|
<div className="text-lg font-semibold text-slate-800 bg-white p-4 rounded-lg border border-slate-200 select-text shadow-sm">
|
|
{activeEmail.subject}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-col mb-8">
|
|
<div className="flex justify-between items-end mb-1">
|
|
<label className="block text-xs font-bold text-slate-400 uppercase tracking-wider">Email Body</label>
|
|
<button
|
|
onClick={() => copyToClipboard(`${activeEmail.subject}\n\n${activeEmail.body}`)}
|
|
className="flex items-center gap-1.5 text-xs font-bold text-indigo-600 hover:text-indigo-800 bg-indigo-50 hover:bg-indigo-100 px-3 py-1.5 rounded-full transition-colors"
|
|
>
|
|
{copied ? <Check size={14} /> : <Copy size={14} />}
|
|
{copied ? "Copied" : "Copy Content"}
|
|
</button>
|
|
</div>
|
|
<div className="bg-white border border-slate-200 rounded-xl p-8 text-slate-700 leading-relaxed whitespace-pre-wrap font-serif text-base select-text shadow-sm">
|
|
{renderBoldText(activeEmail.body)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Checklist Section */}
|
|
{activeEmail.keyPoints && activeEmail.keyPoints.length > 0 && (
|
|
<div className="border-t border-slate-200 pt-6">
|
|
<h3 className="text-sm font-bold text-slate-900 uppercase tracking-wide mb-4 flex items-center gap-2">
|
|
<CheckCircle2 size={16} className="text-emerald-500" />
|
|
Persona & KPI Analysis
|
|
</h3>
|
|
<ul className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
|
{activeEmail.keyPoints.map((point, i) => (
|
|
<li key={i} className="flex items-start gap-3 bg-emerald-50/50 p-3 rounded-lg border border-emerald-100/50">
|
|
<div className="mt-0.5 bg-emerald-100 text-emerald-600 rounded-full p-0.5">
|
|
<Check size={12} strokeWidth={3} />
|
|
</div>
|
|
<span className="text-sm text-slate-700">{point}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</>
|
|
) : (
|
|
<div className="flex items-center justify-center h-full text-slate-400">Select a variant</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-2xl mx-auto mt-16 px-4">
|
|
<div className="text-center mb-10">
|
|
<div className="inline-block p-4 bg-indigo-100 rounded-full mb-4">
|
|
<UserPlus className="text-indigo-600" size={32} />
|
|
</div>
|
|
<h2 className="text-3xl font-bold text-slate-900 mb-4">Create Outreach Campaign</h2>
|
|
<p className="text-lg text-slate-600">
|
|
Generating emails for <span className="font-bold text-slate-900">{company.companyName}</span>.
|
|
<br/>Please upload your marketing knowledge base (Markdown/Text) to begin.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-2xl shadow-xl border border-slate-200 p-8">
|
|
{!fileContent ? (
|
|
<div className="border-2 border-dashed border-slate-300 rounded-xl p-12 text-center hover:border-indigo-400 hover:bg-slate-50 transition-all">
|
|
<input
|
|
type="file"
|
|
accept=".md,.txt,.markdown"
|
|
onChange={handleFileUpload}
|
|
id="file-upload"
|
|
className="hidden"
|
|
/>
|
|
<label htmlFor="file-upload" className="cursor-pointer flex flex-col items-center gap-4">
|
|
<div className="bg-slate-100 p-4 rounded-full text-slate-400">
|
|
<Upload size={32} />
|
|
</div>
|
|
<div>
|
|
<p className="text-lg font-semibold text-slate-900">Click to upload Knowledge Base</p>
|
|
<p className="text-sm text-slate-500 mt-1">Supported files: .md, .txt</p>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center gap-4 p-4 bg-emerald-50 border border-emerald-100 rounded-xl">
|
|
<div className="bg-emerald-100 p-2 rounded-lg">
|
|
<FileText className="text-emerald-600" size={24} />
|
|
</div>
|
|
<div className="flex-1">
|
|
<p className="font-semibold text-emerald-900">Knowledge Base Loaded</p>
|
|
<p className="text-sm text-emerald-700">{fileName}</p>
|
|
</div>
|
|
<button
|
|
onClick={() => { setFileContent(''); setFileName(''); }}
|
|
className="text-emerald-600 hover:text-emerald-800 text-sm font-medium"
|
|
>
|
|
Change
|
|
</button>
|
|
</div>
|
|
|
|
<button
|
|
onClick={handleGenerate}
|
|
disabled={isProcessing}
|
|
className="w-full bg-indigo-600 hover:bg-indigo-700 disabled:bg-indigo-400 text-white font-bold py-4 rounded-xl shadow-lg shadow-indigo-600/20 transition-all transform active:scale-[0.99] flex items-center justify-center gap-2 text-lg"
|
|
>
|
|
{isProcessing ? (
|
|
<>
|
|
<Loader2 className="animate-spin" /> Identifying Roles & Drafting Campaigns...
|
|
</>
|
|
) : (
|
|
<>
|
|
Generate Campaign <ArrowRight size={20} />
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="mt-8 text-center">
|
|
<button onClick={onBack} className="text-slate-500 hover:text-slate-800 font-medium">
|
|
Cancel and go back
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}; |