[V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="pages/api/generate-email.ts" isMerged="true" import type { NextApiRequest, NextApiResponse } from "next" export default async function handler(req: NextApiRequest, res: NextApiResponse) { if (req.method !== "POST") { return res.status(405).json({ error: "Method Not Allowed" }) } const { systemPrompt, userPrompt, text, imageUrls, temperature } = req.body if (!userPrompt) { return res.status(400).json({ error: "userPrompt is required." }) } const azureEndpoint = `${process.env.AZURE_OPENAI_ENDPOINT}/openai/deployments/${process.env.AZURE_OPENAI_DEPLOYMENT_NAME}/chat/completions?api-version=${process.env.AZURE_OPENAI_API_VERSION}` const apiKey = process.env.AZURE_OPENAI_API_KEY if ( !apiKey || !process.env.AZURE_OPENAI_ENDPOINT || !process.env.AZURE_OPENAI_DEPLOYMENT_NAME || !process.env.AZURE_OPENAI_API_VERSION ) { console.error("Azure environment variables are not configured.") return res.status(500).json({ error: "Azure API is not configured on the server." }) } let userContent: any if (imageUrls && Array.isArray(imageUrls) && imageUrls.length > 0) { // Fonction utilitaire pour extraire le timestamp d'une URL d'image Azure Blob function extractTimestamp(url: string): number | null { const match = url.match(/(\d{10,})/) return match ? Number.parseInt(match[1], 10) : null } // Extraire tous les timestamps const timestamps = imageUrls.map(extractTimestamp) const allHaveTimestamps = timestamps.every((ts) => typeof ts === "number" && !isNaN(ts)) let sortedImageUrls: string[] if (allHaveTimestamps) { // Si tous les timestamps sont valides, trier sortedImageUrls = [...imageUrls].sort((a, b) => (extractTimestamp(a) ?? 0) - (extractTimestamp(b) ?? 0)) } else { // Sinon, garder l'ordre d'origine sortedImageUrls = imageUrls } userContent = [{ type: "text", text: userPrompt }] sortedImageUrls.forEach((url: string) => { userContent.push({ type: "image_url", image_url: { url } }) }) } else if (text) { // Text analysis userContent = `${userPrompt}\n\nVoici le texte du CV à analyser:\n${text}` } else { // Other text-based calls like AdaptDocument userContent = userPrompt } const messages = [ { role: "system", content: systemPrompt || "Tu es un assistant IA." }, { role: "user", content: userContent }, ] const body = { messages, max_tokens: 4096, temperature: temperature || 0.2, } try { const response = await fetch(azureEndpoint, { method: "POST", headers: { "Content-Type": "application/json", "api-key": apiKey, }, body: JSON.stringify(body), }) if (!response.ok) { const errorBody = await response.text() console.error("Azure API Error:", response.status, errorBody) // Gestion spécifique de l'erreur 429 (Rate Limit) if (response.status === 429) { return res.status(429).json({ error: "Les serveurs sont actuellement surchargés. Veuillez réessayer dans 2 minutes.", userMessage: "Nos serveurs traitent beaucoup de demandes en ce moment. Merci de patienter 2 minutes avant de réessayer.", retryAfter: 120, // 2 minutes en secondes }) } return res.status(response.status).json({ error: `Error from Azure API: ${errorBody}` }) } const data = await response.json() res.status(200).json(data) } catch (error: any) { console.error("Error calling Azure API:", error) res.status(500).json({ error: `Internal Server Error: ${error.message}` }) } } [V0_FILE]typescript:file="pages/api/generate-email-stream.ts" isMerged="true" import type { NextApiRequest, NextApiResponse } from "next" export default async function handler(req: NextApiRequest, res: NextApiResponse) { if (req.method !== "POST") { return res.status(405).json({ error: "Method Not Allowed" }) } const { instructions, candidateData, contactData } = req.body const azureEndpoint = "https://bapti-m70vyuu5-eastus2.openai.azure.com" const apiKey = "4Ntwi5bmQJ1mAR5Qn3jGdAtYyJq8KQXrfOGn0SI7TK7dumMPrP0ZJQQJ99BBACHYHv6XJ3w3AAAAACOGgbb3" const deploymentName = "gpt-4.1-baptiste" const apiVersion = "2025-01-01-preview" const fullEndpoint = `${azureEndpoint}/openai/deployments/${deploymentName}/chat/completions?api-version=${apiVersion}` const systemPrompt = `You are an expert email writer specializing in professional outreach emails for job candidates. Write compelling, personalized emails that showcase the candidate's skills and express genuine interest in the company. Guidelines: - Keep it professional but personable - Highlight relevant skills and experience - Show genuine interest in the company - Include a clear call to action - Keep it concise (200-300 words) - Use proper email formatting` const userPrompt = `Write a professional outreach email for a job candidate with the following details: Candidate: ${candidateData.name} - ${candidateData.title} Experience: ${candidateData.experience} Skills: ${candidateData.skills.join(", ")} Portfolio: ${candidateData.portfolio} Recipient: ${contactData.firstName} ${contactData.lastName} at ${contactData.company || "the company"} Email: ${contactData.email} ${instructions ? `Additional instructions: ${instructions}` : ""} Format the response as: SUBJECT: [email subject] BODY: [email body]` const messages = [ { role: "system", content: systemPrompt }, { role: "user", content: userPrompt }, ] const body = { messages, max_tokens: 1000, temperature: 0.7, stream: true, } try { const response = await fetch(fullEndpoint, { method: "POST", headers: { "Content-Type": "application/json", "api-key": apiKey, }, body: JSON.stringify(body), }) if (!response.ok) { const errorBody = await response.text() console.error("Azure API Error:", response.status, errorBody) return res.status(response.status).json({ error: `Error from Azure API: ${errorBody}` }) } res.setHeader("Content-Type", "text/plain") res.setHeader("Cache-Control", "no-cache") res.setHeader("Connection", "keep-alive") const reader = response.body?.getReader() if (!reader) { return res.status(500).json({ error: "Failed to get response stream" }) } const decoder = new TextDecoder() try { while (true) { const { done, value } = await reader.read() if (done) break const chunk = decoder.decode(value) const lines = chunk.split("\n") for (const line of lines) { if (line.startsWith("data: ")) { const data = line.slice(6) if (data === "[DONE]") { res.end() return } try { const parsed = JSON.parse(data) const content = parsed.choices?.[0]?.delta?.content if (content) { res.write(content) } } catch (e) { // Skip invalid JSON } } } } } finally { reader.releaseLock() } res.end() } catch (error: any) { console.error("Error calling Azure API:", error) res.status(500).json({ error: `Internal Server Error: ${error.message}` }) } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { EmailGenerator } from "@/components/email-generator" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog" import { Mail, X } from "lucide-react" export default function Home() { const [isOpen, setIsOpen] = useState(false) return (

) } [V0_FILE]typescriptreact:file="components/contact-selector.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useRef, useEffect } from "react" import { Input } from "@/components/ui/input" import { ChevronDown, User, X } from "lucide-react" interface Contact { id: string email: string firstName: string lastName: string company?: string } // Mock contacts data const mockContacts: Contact[] = [ { id: "1", email: "sarah.johnson@techcorp.com", firstName: "Sarah", lastName: "Johnson", company: "TechCorp" }, { id: "2", email: "mike.chen@innovate.io", firstName: "Mike", lastName: "Chen", company: "Innovate.io" }, { id: "3", email: "emily.davis@startup.co", firstName: "Emily", lastName: "Davis", company: "Startup Co" }, { id: "4", email: "alex.rodriguez@bigtech.com", firstName: "Alex", lastName: "Rodriguez", company: "BigTech" }, { id: "5", email: "lisa.wang@design.studio", firstName: "Lisa", lastName: "Wang", company: "Design Studio" }, { id: "6", email: "david.brown@enterprise.com", firstName: "David", lastName: "Brown", company: "Enterprise Corp" }, { id: "7", email: "jennifer.lee@agency.com", firstName: "Jennifer", lastName: "Lee", company: "Creative Agency" }, { id: "8", email: "robert.taylor@consulting.com", firstName: "Robert", lastName: "Taylor", company: "Taylor Consulting", }, ] interface ContactSelectorProps { selectedContact: Contact | null onContactSelect: (contact: Contact | null) => void } export function ContactSelector({ selectedContact, onContactSelect }: ContactSelectorProps) { const [isOpen, setIsOpen] = useState(false) const [searchTerm, setSearchTerm] = useState("") const [highlightedIndex, setHighlightedIndex] = useState(-1) const inputRef = useRef(null) const dropdownRef = useRef(null) const filteredContacts = mockContacts.filter((contact) => { const searchLower = searchTerm.toLowerCase() return ( contact.firstName.toLowerCase().includes(searchLower) || contact.lastName.toLowerCase().includes(searchLower) || contact.email.toLowerCase().includes(searchLower) || (contact.company && contact.company.toLowerCase().includes(searchLower)) ) }) const isValidEmail = (email: string) => { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ return emailRegex.test(email) } const handleInputChange = (e: React.ChangeEvent) => { const value = e.target.value setSearchTerm(value) setIsOpen(true) setHighlightedIndex(-1) // Clear selection if input is cleared if (!value && selectedContact) { onContactSelect(null) } } const handleContactSelect = (contact: Contact) => { onContactSelect(contact) setSearchTerm("") setIsOpen(false) setHighlightedIndex(-1) } const handleKeyDown = (e: React.KeyboardEvent) => { // Handle backspace to delete selected contact when cursor is at the end if (e.key === "Backspace" && selectedContact && searchTerm === "") { e.preventDefault() onContactSelect(null) return } // Handle Enter to validate email and generate if (e.key === "Enter" && searchTerm.trim()) { e.preventDefault() if (isValidEmail(searchTerm.trim())) { const newContact: Contact = { id: `manual-${Date.now()}`, email: searchTerm.trim(), firstName: searchTerm.split("@")[0], lastName: "", company: searchTerm.split("@")[1]?.split(".")[0] || "", } handleContactSelect(newContact) } return } if (!isOpen) { if (e.key === "ArrowDown" || e.key === "Enter") { setIsOpen(true) return } } switch (e.key) { case "ArrowDown": e.preventDefault() setHighlightedIndex((prev) => (prev < filteredContacts.length - 1 ? prev + 1 : 0)) break case "ArrowUp": e.preventDefault() setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : filteredContacts.length - 1)) break case "Enter": e.preventDefault() if (highlightedIndex >= 0 && filteredContacts[highlightedIndex]) { handleContactSelect(filteredContacts[highlightedIndex]) } break case "Escape": setIsOpen(false) setHighlightedIndex(-1) inputRef.current?.blur() break } } const handleInputFocus = () => { setIsOpen(true) } const handleInputBlur = (e: React.FocusEvent) => { // Delay closing to allow for click events on dropdown items setTimeout(() => { if (!dropdownRef.current?.contains(document.activeElement)) { setIsOpen(false) setHighlightedIndex(-1) } }, 150) } // Update search term when selected contact changes externally useEffect(() => { if (!selectedContact) { setSearchTerm("") } }, [selectedContact]) return (

{selectedContact && (

{selectedContact.firstName} {selectedContact.lastName} - {selectedContact.email}

)}

{isOpen && !selectedContact && (

{filteredContacts.length > 0 ? ( filteredContacts.map((contact, index) => (

handleContactSelect(contact)} onMouseEnter={() => setHighlightedIndex(index)} >

{contact.firstName} {contact.lastName}

{contact.email}

)) ) : (

No contacts found

)}

) } [V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(0.98 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.145 0 0); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.556 0 0); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.922 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.556 0 0); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(1 0 0); --border: oklch(0.922 0 0); --input: oklch(1 0 0); --ring: oklch(0.145 0 0 / 0.2); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.25rem; --sidebar: oklch(0.98 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.556 0 0); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.556 0 0); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.145 0 0 / 0.2); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.145 0 0); --secondary: oklch(0.556 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.556 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.269 0 0); --input: oklch(0.205 0 0); --ring: oklch(0.985 0 0 / 0.2); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.556 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.556 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.985 0 0 / 0.2); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } /* Adding minimalistic custom scrollbar styles */ .custom-scrollbar { scrollbar-width: thin; scrollbar-color: oklch(0.556 0 0) transparent; } .custom-scrollbar::-webkit-scrollbar { width: 6px; } .custom-scrollbar::-webkit-scrollbar-track { background: transparent; } .custom-scrollbar::-webkit-scrollbar-thumb { background-color: oklch(0.556 0 0); border-radius: 3px; border: none; } .custom-scrollbar::-webkit-scrollbar-thumb:hover { background-color: oklch(0.456 0 0); } /* Hide scrollbar arrows and buttons */ .custom-scrollbar::-webkit-scrollbar-button { display: none; } .custom-scrollbar::-webkit-scrollbar-corner { background: transparent; } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescript:file="app/api/generate-email-stream/route.ts" isEdit="true" isQuickEdit="true" isMerged="true" import type { NextRequest } from "next/server" export async function POST(req: NextRequest) { const { instructions, candidateData, contactData } = await req.json() const azureEndpoint = "https://bapti-m70vyuu5-eastus2.openai.azure.com" const apiKey = "4Ntwi5bmQJ1mAR5Qn3jGdAtYyJq8KQXrfOGn0SI7TK7dumMPrP0ZJQQJ99BBACHYHv6XJ3w3AAAAACOGgbb3" const deploymentName = "gpt-4.1-baptiste" const apiVersion = "2025-01-01-preview" const fullEndpoint = `${azureEndpoint}/openai/deployments/${deploymentName}/chat/completions?api-version=${apiVersion}` const systemPrompt = `You are an expert email writer specializing in professional outreach emails for job candidates. Write compelling, personalized emails that showcase the candidate's skills and express genuine interest in the company. Guidelines: - Keep it professional but personable - Highlight relevant skills and experience - Show genuine interest in the company - Include a clear call to action - Keep it concise (200-300 words) - Generate both HTML and plain text versions` const userPrompt = `Write a professional outreach email for a job candidate with the following details: Candidate: ${candidateData.name} - ${candidateData.title} Experience: ${candidateData.experience} Skills: ${candidateData.skills.join(", ")} Portfolio: ${candidateData.portfolio} Recipient: ${contactData.firstName} ${contactData.lastName} at ${contactData.company || "the company"} Email: ${contactData.email} ${instructions ? `Additional instructions: ${instructions}` : ""} Format the response as: SUBJECT: [email subject] HTML_BODY: [email body in HTML format with proper tags like

, ,

,
, , etc.] PLAIN_BODY: [email body in plain text format]` const messages = [ { role: "system", content: systemPrompt }, { role: "user", content: userPrompt }, ] const body = { messages, max_tokens: 1000, temperature: 0.7, stream: true, } try { const response = await fetch(fullEndpoint, { method: "POST", headers: { "Content-Type": "application/json", "api-key": apiKey, }, body: JSON.stringify(body), }) if (!response.ok) { const errorBody = await response.text() console.error("Azure API Error:", response.status, errorBody) return new Response(JSON.stringify({ error: `Error from Azure API: ${errorBody}` }), { status: response.status, headers: { "Content-Type": "application/json" }, }) } const stream = new ReadableStream({ async start(controller) { const reader = response.body?.getReader() if (!reader) { controller.error(new Error("Failed to get response stream")) return } const decoder = new TextDecoder() try { while (true) { const { done, value } = await reader.read() if (done) break const chunk = decoder.decode(value) const lines = chunk.split("\n") for (const line of lines) { if (line.startsWith("data: ")) { const data = line.slice(6) if (data === "[DONE]") { controller.close() return } try { const parsed = JSON.parse(data) const content = parsed.choices?.[0]?.delta?.content if (content) { controller.enqueue(new TextEncoder().encode(content)) } } catch (e) { // Skip invalid JSON } } } } } catch (error) { controller.error(error) } finally { reader.releaseLock() } }, }) return new Response(stream, { headers: { "Content-Type": "text/plain", "Cache-Control": "no-cache", Connection: "keep-alive", }, }) } catch (error: any) { console.error("Error calling Azure API:", error) return new Response(JSON.stringify({ error: `Internal Server Error: ${error.message}` }), { status: 500, headers: { "Content-Type": "application/json" }, }) } } [V0_FILE]typescriptreact:file="components/email-generator.tsx" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState, useEffect, useRef } from "react" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { Input } from "@/components/ui/input" import { Switch } from "@/components/ui/switch" import { ContactSelector } from "@/components/contact-selector" import { ExternalLink, Send, Loader2, Sparkles, Paperclip, Settings, Copy } from "lucide-react" import { Dialog, DialogContent, DialogTrigger, DialogTitle } from "@/components/ui/dialog" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" import { useToast } from "@/hooks/use-toast" interface Contact { id: string email: string firstName: string lastName: string company?: string } // Mock candidate profile data const candidateProfile = { name: "John Doe", title: "Senior Frontend Developer", experience: "5+ years", skills: ["React", "TypeScript", "Next.js", "Node.js", "AWS"], portfolio: "https://johndoe.dev", } export function EmailGenerator() { const [selectedContact, setSelectedContact] = useState(null) const [includeFile, setIncludeFile] = useState(true) const [instructions, setInstructions] = useState("") const [systemPrompt, setSystemPrompt] = useState( "You are a professional email writer. Write concise, engaging emails that highlight the candidate's strengths and express genuine interest in the company.", ) const [isSettingsOpen, setIsSettingsOpen] = useState(false) const [generatedHtmlEmail, setGeneratedHtmlEmail] = useState("") const [generatedPlainTextEmail, setGeneratedPlainTextEmail] = useState("") const [isGenerating, setIsGenerating] = useState(false) const [isSending, setIsSending] = useState(false) const [subject, setSubject] = useState("") const [emailCopied, setEmailCopied] = useState(false) const [subjectCopied, setSubjectCopied] = useState(false) const emailContentRef = useRef(null) const { toast } = useToast() useEffect(() => { if (selectedContact && !generatedHtmlEmail && !isGenerating) { generateEmail() } }, [selectedContact]) const generateEmail = async () => { if (!selectedContact) return setIsGenerating(true) setGeneratedHtmlEmail("") setGeneratedPlainTextEmail("") setSubject("") try { const response = await fetch("/api/generate-email-stream", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ instructions: `${systemPrompt}\n\n${instructions}`, candidateData: candidateProfile, contactData: selectedContact, }), }) if (!response.ok) { throw new Error("Failed to generate email") } const reader = response.body?.getReader() if (!reader) { throw new Error("Failed to get response stream") } const decoder = new TextDecoder() let fullResponse = "" try { while (true) { const { done, value } = await reader.read() if (done) break const chunk = decoder.decode(value) fullResponse += chunk if ( fullResponse.includes("SUBJECT:") && fullResponse.includes("HTML_BODY:") && fullResponse.includes("PLAIN_BODY:") ) { const subjectMatch = fullResponse.match(/SUBJECT:\s*(.+?)(?=HTML_BODY:)/s) const htmlBodyMatch = fullResponse.match(/HTML_BODY:\s*(.+?)(?=PLAIN_BODY:)/s) const plainBodyMatch = fullResponse.match(/PLAIN_BODY:\s*(.+)/s) if (subjectMatch) { setSubject(subjectMatch[1].trim()) } if (htmlBodyMatch) { setGeneratedHtmlEmail(htmlBodyMatch[1].trim()) } if (plainBodyMatch) { setGeneratedPlainTextEmail(plainBodyMatch[1].trim()) } } } } finally { reader.releaseLock() } } catch (error) { console.error("Error generating email:", error) await new Promise((resolve) => setTimeout(resolve, 2000)) const customInstructions = instructions ? `\n\nAdditional instructions: ${instructions}` : "" const plainTextContent = `Dear ${selectedContact.firstName} ${selectedContact.lastName}, I hope this email finds you well. My name is ${candidateProfile.name}, and I am a ${candidateProfile.title} with ${candidateProfile.experience} of experience in modern web development. I am reaching out because I am genuinely interested in exploring opportunities at ${selectedContact.company || "your organization"}. My expertise includes: • ${candidateProfile.skills.slice(0, 3).join(", ")} • Full-stack development with modern frameworks • Building scalable, user-focused applications I have been following your company's innovative work and would love to contribute to your team's success. ${includeFile ? "I have attached my portfolio and resume for your review." : `You can view my work at ${candidateProfile.portfolio}.`}${customInstructions} I would welcome the opportunity to discuss how my skills and passion for technology could benefit your team. Thank you for your time and consideration. Best regards, ${candidateProfile.name} ${candidateProfile.portfolio}` const htmlContent = `
Dear ${selectedContact.firstName} ${selectedContact.lastName},

I hope this email finds you well. My name is ${candidateProfile.name}, and I am a ${candidateProfile.title} with ${candidateProfile.experience} of experience in modern web development.

I am reaching out because I am genuinely interested in exploring opportunities at ${selectedContact.company || "your organization"}. My expertise includes:

${candidateProfile.skills.slice(0, 3).join("
")}

Full-stack development with modern frameworks

Building scalable, user-focused applications

I have been following your company's innovative work and would love to contribute to your team's success. ${includeFile ? "I have attached my portfolio and resume for your review." : `You can view my work at ${candidateProfile.portfolio}.`}${customInstructions}

I would welcome the opportunity to discuss how my skills and passion for technology could benefit your team. Thank you for your time and consideration.

Best regards,
${candidateProfile.name}
${candidateProfile.portfolio}
` setGeneratedHtmlEmail(htmlContent) setGeneratedPlainTextEmail(plainTextContent) setSubject( `${candidateProfile.title} - Interest in Opportunities at ${selectedContact.company || "Your Company"}`, ) } setIsGenerating(false) } const handleSend = async () => { setIsSending(true) await new Promise((resolve) => setTimeout(resolve, 1500)) setIsSending(false) alert("Email sent successfully!") } const createMailtoLink = () => { if (!selectedContact || !generatedPlainTextEmail) return "#" const encodedSubject = encodeURIComponent(subject) const encodedBody = encodeURIComponent(generatedPlainTextEmail) return `mailto:${selectedContact.email}?subject=${encodedSubject}&body=${encodedBody}` } const handleInstructionsKeyDown = (e: React.KeyboardEvent) => { if (e.key === "Enter" && selectedContact && instructions.trim()) { e.preventDefault() generateEmail() } } const saveSystemPrompt = () => { setIsSettingsOpen(false) // In a real app, this would save to localStorage or a database } const copyEmailToClipboard = async () => { if (!selectedContact || !generatedHtmlEmail || !generatedPlainTextEmail) return try { const clipboardItem = new ClipboardItem({ "text/html": new Blob([generatedHtmlEmail], { type: "text/html" }), "text/plain": new Blob([generatedPlainTextEmail], { type: "text/plain" }), }) await navigator.clipboard.write([clipboardItem]) setEmailCopied(true) toast({ title: "Copié", description: "L'e-mail a été copié dans le presse-papiers." }) setTimeout(() => setEmailCopied(false), 2000) } catch (err) { console.error("Erreur lors de la copie de l'e-mail:", err) toast({ title: "Erreur de copie", description: "Impossible de copier l'e-mail. Veuillez essayer manuellement.", variant: "destructive", }) // Fallback: select text if Clipboard API fails if (emailContentRef.current) { const range = document.createRange() range.selectNodeContents(emailContentRef.current) const selection = window.getSelection() if (selection) { selection.removeAllRanges() selection.addRange(range) toast({ title: "Sélectionné", description: "Le contenu de l'e-mail a été sélectionné. Utilisez Ctrl+C." }) } } } } const copySubjectToClipboard = async () => { try { await navigator.clipboard.writeText(subject) setSubjectCopied(true) toast({ title: "Copié", description: "Le sujet a été copié dans le presse-papiers." }) setTimeout(() => setSubjectCopied(false), 2000) } catch (err) { console.error("Failed to copy subject: ", err) toast({ title: "Erreur de copie", description: "Impossible de copier le sujet.", variant: "destructive", }) } } return (

setInstructions(e.target.value)} onKeyDown={handleInstructionsKeyDown} placeholder="instructions..." className="text-base rounded-xl border-2 border-border h-11 px-4 bg-background pr-12" /> System Settings

System Prompt setSystemPrompt(e.target.value)} className="min-h-[120px] text-sm" placeholder="Enter system instructions that will be added to every generation..." /> </div> <div className="flex gap-2"> <Button onClick={saveSystemPrompt} className="flex-1"> Save </Button> <Button variant="outline" onClick={() => setIsSettingsOpen(false)}> Cancel </Button> </div> </div> </DialogContent> </Dialog> </div> <Button onClick={generateEmail} disabled={!selectedContact || isGenerating} className="bg-foreground text-background hover:bg-foreground/90 rounded-xl px-4 h-11" size="sm" > {isGenerating ? <Loader2 className="w-4 h-4 animate-spin" /> : <Sparkles className="w-4 h-4" />} </Button> </div> <div className="space-y-3"> <div className="relative group"> <Textarea value={subject} onChange={(e) => setSubject(e.target.value)} className="min-h-[45px] resize-none text-base rounded-xl border-2 border-border bg-background px-4 py-2 pr-12" placeholder={isGenerating ? "Generating subject..." : "Subject"} rows={1} /> <button onClick={copySubjectToClipboard} className="absolute top-2 right-2 p-1.5 rounded-md bg-background/80 hover:bg-muted opacity-0 group-hover:opacity-100 transition-opacity duration-200 border border-border/50" disabled={!subject} > <Copy className={`w-3.5 h-3.5 ${subjectCopied ? "text-green-600" : "text-muted-foreground"}`} /> </button> </div> <div className="relative group"> <Textarea value={generatedHtmlEmail} onChange={(e) => setGeneratedHtmlEmail(e.target.value)} className="min-h-[180px] text-base rounded-xl border-2 border-border bg-background px-4 py-3 pr-12 leading-relaxed font-sans resize-none" placeholder={isGenerating ? "Generating email..." : "Generated email will appear here..."} disabled={isGenerating} /> <button onClick={copyEmailToClipboard} className="absolute top-3 right-3 p-1.5 rounded-md bg-background/80 hover:bg-muted opacity-0 group-hover:opacity-100 transition-opacity duration-200 border border-border/50" disabled={!generatedHtmlEmail} > <Copy className={`w-3.5 h-3.5 ${emailCopied ? "text-green-600" : "text-muted-foreground"}`} /> </button> </div> </div> <div className="flex items-center gap-3"> <div className="flex gap-2 flex-1"> <Button onClick={handleSend} disabled={isSending || !selectedContact || !generatedHtmlEmail} className="flex-1 bg-foreground text-background hover:bg-foreground/90 rounded-full py-2 h-11 text-base" size="sm" > {isSending ? <Loader2 className="w-4 h-4 animate-spin" /> : <Send className="w-4 h-4" />} </Button> <Tooltip> <TooltipTrigger asChild> <Button asChild variant="outline" className="w-11 h-11 p-0 border-2 border-border hover:bg-muted bg-transparent rounded-xl" size="sm" disabled={!selectedContact || !generatedPlainTextEmail} > <a href={createMailtoLink()} target="_blank" rel="noopener noreferrer"> <ExternalLink className="w-4 h-4" /> </a> </Button> </TooltipTrigger> <TooltipContent> <p className="text-sm">The attached file and the formatting cannot be included</p> </TooltipContent> </Tooltip> </div> <div className="flex items-center space-x-2"> <Paperclip className={`w-4 h-4 ${includeFile ? "text-muted-foreground" : "text-muted-foreground/50"}`} /> <Switch id="include-file" checked={includeFile} onCheckedChange={setIncludeFile} className={`${!includeFile ? "data-[state=unchecked]:bg-muted-foreground/20 data-[state=unchecked]:border-muted-foreground/30" : ""}`} /> </div> </div> </div> </TooltipProvider> ) }</article></body></html>