Spaces:
Sleeping
Sleeping
| import { useState, useRef } from "react"; | |
| import { Search, Users, Loader2, FileSpreadsheet, Zap, Eye, Sparkles, Globe, Link2 } from "lucide-react"; | |
| import { batchAPI } from "../api/client"; | |
| import toast from "react-hot-toast"; | |
| export default function RecipientInput({ onResearch, onBatchStart, loading, disabled }) { | |
| const [mode, setMode] = useState("single"); | |
| const [singleInput, setSingleInput] = useState(""); | |
| const [batchInput, setBatchInput] = useState(""); | |
| const [extractedEmails, setExtractedEmails] = useState([]); | |
| const [batchMode, setBatchMode] = useState("manual"); | |
| const [delayMin, setDelayMin] = useState(15); | |
| const [delayMax, setDelayMax] = useState(45); | |
| const [extracting, setExtracting] = useState(false); | |
| const [directoryUrl, setDirectoryUrl] = useState(""); | |
| const [scraping, setScraping] = useState(false); | |
| const fileRef = useRef(null); | |
| const handleSingleSubmit = (e) => { e.preventDefault(); if (singleInput.trim() && onResearch) onResearch(singleInput.trim()); }; | |
| const handleCSVUpload = async (e) => { | |
| const file = e.target.files?.[0]; if (!file) return; | |
| setExtracting(true); | |
| try { const res = await batchAPI.uploadCSV(file); setExtractedEmails(res.data.emails); setBatchInput(res.data.emails.join("\n")); toast.success(`Found ${res.data.count} emails from ${file.name}`); } | |
| catch (err) { toast.error(err.response?.data?.detail || "Failed to parse file"); } | |
| setExtracting(false); if (fileRef.current) fileRef.current.value = ""; | |
| }; | |
| const handleExtractFromText = async () => { | |
| if (!batchInput.trim()) return; setExtracting(true); | |
| try { const res = await batchAPI.extractEmails(batchInput); setExtractedEmails(res.data.emails); setBatchInput(res.data.emails.join("\n")); toast.success(`Extracted ${res.data.count} emails`); } | |
| catch { toast.error("No emails found in the text"); } | |
| setExtracting(false); | |
| }; | |
| const handleUrlScrape = async () => { | |
| if (!directoryUrl.trim()) return; setScraping(true); | |
| try { const res = await batchAPI.scrapeFaculty(directoryUrl.trim()); const emails = res.data.emails || []; setBatchInput(emails.join("\n")); setExtractedEmails(emails); setMode("batch"); toast.success(`Found ${res.data.count} email addresses!`); } | |
| catch (err) { toast.error(err.response?.data?.detail || "Could not scrape page"); } | |
| setScraping(false); | |
| }; | |
| const handleBatchSubmit = () => { | |
| const list = batchInput.split("\n").map((l) => l.trim()).filter(Boolean); | |
| if (list.length > 0 && onBatchStart) onBatchStart(list, batchMode, delayMin, delayMax); | |
| }; | |
| const emailCount = batchInput.split("\n").filter((l) => l.trim()).length; | |
| const tabClass = (active) => | |
| `flex-1 text-[10px] py-1.5 px-1 rounded-lg font-semibold transition-all ${active | |
| ? "bg-indigo-500/10 text-indigo-600 dark:text-indigo-400 border border-indigo-500/20" | |
| : "text-[var(--c-text-muted)] hover:text-[var(--c-text-secondary)] border border-transparent" | |
| }`; | |
| return ( | |
| <div className="card-dark p-3.5"> | |
| <div className="flex items-center gap-2 mb-3"> | |
| <Sparkles size={14} className="text-indigo-500 dark:text-indigo-400" /> | |
| <h3 className="text-xs font-semibold text-[var(--c-text-secondary)] uppercase tracking-wider">Compose & Send</h3> | |
| </div> | |
| <div className="flex gap-1 mb-3 bg-[var(--c-bg-subtle)] p-1 rounded-xl border border-[var(--c-border)]"> | |
| <button onClick={() => setMode("single")} className={tabClass(mode === "single")}>Single</button> | |
| <button onClick={() => setMode("batch")} className={tabClass(mode === "batch")}>Batch</button> | |
| <button onClick={() => setMode("scrape")} className={tabClass(mode === "scrape")}>Scrape URL</button> | |
| </div> | |
| {mode === "single" && ( | |
| <form onSubmit={handleSingleSubmit}> | |
| <input type="text" value={singleInput} onChange={(e) => setSingleInput(e.target.value)} placeholder="recipient@example.com" disabled={disabled || loading} className="w-full input-dark text-sm mb-2.5" /> | |
| <button type="submit" disabled={!singleInput.trim() || loading || disabled} className="w-full btn-primary text-xs py-2.5"> | |
| {loading ? <><Loader2 size={13} className="animate-spin" /> Generating...</> : <><Search size={13} /> Generate Email</>} | |
| </button> | |
| </form> | |
| )} | |
| {mode === "scrape" && ( | |
| <div className="space-y-2.5"> | |
| <div className="rounded-xl border border-[var(--c-border)] bg-[var(--c-bg-subtle)] overflow-hidden focus-within:border-indigo-500/30 transition-all"> | |
| <div className="flex items-center gap-2 px-3 pt-2.5 pb-1"> | |
| <Link2 size={13} className="text-[var(--c-text-muted)] shrink-0" /> | |
| <input type="text" value={directoryUrl} onChange={(e) => setDirectoryUrl(e.target.value)} placeholder="https://example.com/team" disabled={disabled || scraping} | |
| className="w-full text-[12px] outline-none bg-transparent text-[var(--c-text-primary)] placeholder:text-[var(--c-text-muted)]" /> | |
| </div> | |
| <div className="px-3 py-1.5 bg-[var(--c-bg-subtle)] border-t border-[var(--c-border)]"> | |
| <span className="text-[9px] text-[var(--c-text-muted)]">Paste any page URL to extract email addresses</span> | |
| </div> | |
| </div> | |
| <button onClick={handleUrlScrape} disabled={!directoryUrl.trim() || scraping || disabled} | |
| className="w-full flex items-center justify-center gap-2 bg-gradient-to-r from-violet-500 to-purple-600 hover:from-violet-400 hover:to-purple-500 disabled:opacity-40 text-white text-xs font-semibold py-2.5 rounded-xl transition-all shadow-lg shadow-violet-500/15"> | |
| {scraping ? <><Loader2 size={13} className="animate-spin" /> Scraping page...</> : <><Globe size={13} /> Extract All Emails</>} | |
| </button> | |
| {extractedEmails.length > 0 && ( | |
| <div className="bg-emerald-500/5 border border-emerald-500/20 rounded-xl p-3"> | |
| <p className="text-[11px] font-semibold text-emerald-600 dark:text-emerald-400 mb-0.5">Found {extractedEmails.length} emails</p> | |
| <p className="text-[10px] text-emerald-600/60 dark:text-emerald-500/60">Switched to Batch tab with all emails loaded</p> | |
| </div> | |
| )} | |
| </div> | |
| )} | |
| {mode === "batch" && ( | |
| <div className="space-y-2.5"> | |
| <input ref={fileRef} type="file" accept=".csv,.txt,.xlsx" onChange={handleCSVUpload} className="hidden" /> | |
| <button onClick={() => fileRef.current?.click()} disabled={disabled || loading} | |
| className="w-full flex items-center justify-center gap-2 border border-dashed border-gray-300 dark:border-white/10 hover:border-indigo-500/30 text-[var(--c-text-muted)] hover:text-indigo-500 dark:hover:text-indigo-400 text-[11px] font-medium py-2 rounded-xl transition-all hover:bg-indigo-500/5"> | |
| {extracting ? <><Loader2 size={12} className="animate-spin" /> Extracting...</> : <><FileSpreadsheet size={12} /> Upload CSV / Text File</>} | |
| </button> | |
| <div className="rounded-xl border border-[var(--c-border)] bg-[var(--c-bg-subtle)] overflow-hidden focus-within:border-indigo-500/30 transition-all"> | |
| <textarea value={batchInput} onChange={(e) => setBatchInput(e.target.value)} placeholder={"contact1@example.com\ncontact2@company.org\ncontact3@domain.net"} disabled={disabled || loading} rows={4} | |
| className="w-full text-[12px] leading-relaxed px-3 py-2.5 outline-none resize-none bg-transparent text-[var(--c-text-primary)] placeholder:text-[var(--c-text-muted)] disabled:opacity-50" /> | |
| <div className="flex items-center justify-between px-3 py-1.5 bg-[var(--c-bg-subtle)] border-t border-[var(--c-border)]"> | |
| <span className="text-[10px] font-medium text-[var(--c-text-muted)]">{emailCount} {emailCount === 1 ? "recipient" : "recipients"}</span> | |
| <span className="text-[9px] text-[var(--c-text-muted)]">One per line or paste any text</span> | |
| </div> | |
| </div> | |
| {batchInput.trim() && !batchInput.includes("@") && ( | |
| <button onClick={handleExtractFromText} disabled={extracting} className="w-full text-[10px] text-indigo-500 dark:text-indigo-400 hover:text-indigo-600 dark:hover:text-indigo-300 font-semibold"> | |
| Extract emails from text | |
| </button> | |
| )} | |
| <div className="bg-[var(--c-bg-subtle)] rounded-xl p-3 space-y-2 border border-[var(--c-border)]"> | |
| <div className="text-[10px] font-semibold text-[var(--c-text-muted)] uppercase tracking-wider">Send Mode</div> | |
| <div className="flex gap-1 bg-[var(--c-bg-subtle)] p-0.5 rounded-lg border border-[var(--c-border)]"> | |
| <button onClick={() => setBatchMode("manual")} | |
| className={`flex-1 flex items-center justify-center gap-1.5 text-[11px] py-2 rounded-lg font-semibold transition-all ${batchMode === "manual" ? "bg-amber-500/10 text-amber-600 dark:text-amber-400 border border-amber-500/20" : "text-[var(--c-text-muted)] hover:text-[var(--c-text-secondary)] border border-transparent"}`}> | |
| <Eye size={11} /> Review | |
| </button> | |
| <button onClick={() => setBatchMode("auto")} | |
| className={`flex-1 flex items-center justify-center gap-1.5 text-[11px] py-2 rounded-lg font-semibold transition-all ${batchMode === "auto" ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20" : "text-[var(--c-text-muted)] hover:text-[var(--c-text-secondary)] border border-transparent"}`}> | |
| <Zap size={11} /> Auto | |
| </button> | |
| </div> | |
| <p className="text-[9px] text-[var(--c-text-muted)] leading-relaxed"> | |
| {batchMode === "manual" ? "Review & approve each email before sending" : "Generate & send all automatically"} | |
| </p> | |
| {batchMode === "auto" && ( | |
| <div className="pt-2.5 border-t border-[var(--c-border)]"> | |
| <div className="text-[10px] font-semibold text-[var(--c-text-muted)] uppercase tracking-wider mb-2">Delay between emails</div> | |
| <div className="flex items-center gap-2"> | |
| <div className="flex-1 min-w-[65px] relative group"> | |
| <input type="number" value={delayMin} onChange={(e) => setDelayMin(Number(e.target.value))} min={5} max={120} | |
| className="w-full text-sm font-bold input-dark px-3 py-2.5 text-center tabular-nums [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:ring-2 focus:ring-indigo-500/10 transition-all" /> | |
| <div className="absolute inset-0 rounded-xl border border-transparent group-focus-within:border-indigo-500/30 pointer-events-none transition-all" /> | |
| </div> | |
| <span className="text-[10px] font-bold text-[var(--c-text-muted)] uppercase shrink-0">to</span> | |
| <div className="flex-1 min-w-[65px] relative group"> | |
| <input type="number" value={delayMax} onChange={(e) => setDelayMax(Number(e.target.value))} min={10} max={300} | |
| className="w-full text-sm font-bold input-dark px-3 py-2.5 text-center tabular-nums [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none focus:ring-2 focus:ring-indigo-500/10 transition-all" /> | |
| <div className="absolute inset-0 rounded-xl border border-transparent group-focus-within:border-indigo-500/30 pointer-events-none transition-all" /> | |
| </div> | |
| <div className="shrink-0 flex items-center justify-center bg-[var(--c-bg-subtle)] border border-[var(--c-border)] rounded-xl px-2.5 py-2.5"> | |
| <span className="text-[10px] font-bold text-[var(--c-text-muted)] uppercase">sec</span> | |
| </div> | |
| </div> | |
| </div> | |
| )} | |
| </div> | |
| <button onClick={handleBatchSubmit} disabled={emailCount === 0 || loading || disabled} | |
| className="w-full flex items-center justify-center gap-2 bg-gradient-to-r from-indigo-500 to-violet-600 hover:from-indigo-400 hover:to-violet-500 disabled:opacity-40 text-white text-xs font-semibold py-2.5 rounded-xl transition-all shadow-lg shadow-indigo-500/15"> | |
| {loading ? <><Loader2 size={13} className="animate-spin" /> Processing...</> : <><Users size={13} /> Start Batch ({emailCount})</>} | |
| </button> | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| } | |