MCP Resume Chat Server

"use client"; import { useState } from "react"; interface EmailFormData { recipient: string; subject: string; body: string; from?: string; } export default function EmailForm() { const [formData, setFormData] = useState<EmailFormData>({ recipient: "", subject: "", body: "", from: "", }); const [isLoading, setIsLoading] = useState(false); const [result, setResult] = useState<{ success: boolean; message: string; } | null>(null); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setIsLoading(true); setResult(null); try { // Simulate MCP server call const response = await simulateEmailSend(formData); setResult(response); } catch (error) { setResult({ success: false, message: "Failed to send email. Please check your configuration and try again.", }); } finally { setIsLoading(false); } }; const simulateEmailSend = async ( data: EmailFormData ): Promise<{ success: boolean; message: string }> => { // Simulate network delay await new Promise((resolve) => setTimeout(resolve, 1500 + Math.random() * 1000) ); // Mock successful response return { success: true, message: `✅ Email sent successfully!\nMessage ID: msg_${Date.now()}\nRecipient: ${ data.recipient }\nSubject: ${data.subject}`, }; }; const handleInputChange = ( e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> ) => { const { name, value } = e.target; setFormData((prev) => ({ ...prev, [name]: value, })); }; const emailTemplates = [ { name: "Interview Invitation", subject: "Interview Invitation - Software Engineer Position", body: `Dear Candidate, Thank you for your interest in our Software Engineer position. We would like to invite you for an interview. Interview Details: - Date: [To be scheduled] - Duration: 60 minutes - Format: Technical interview + System design discussion Please let us know your availability for the next week. Best regards, Hiring Team`, }, { name: "Follow-up", subject: "Follow-up on Your Application", body: `Hi there, I wanted to follow up on your recent application. We're impressed with your background and would like to discuss potential opportunities. Would you be available for a brief call this week? Best regards, Recruiter`, }, { name: "Thank You", subject: "Thank You for Your Time", body: `Dear [Name], Thank you for taking the time to speak with us today. We enjoyed learning about your experience and discussing the role. We'll be in touch soon with next steps. Best regards, Interview Team`, }, ]; const applyTemplate = (template: (typeof emailTemplates)[0]) => { setFormData((prev) => ({ ...prev, subject: template.subject, body: template.body, })); }; return ( <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg"> {/* Header */} <div className="p-6 border-b border-gray-200 dark:border-gray-700"> <h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-2"> 📧 Email Notifications </h2> <p className="text-gray-600 dark:text-gray-400"> Send email notifications using the MCP server's email service </p> </div> <div className="p-6"> {/* Email Templates */} <div className="mb-6"> <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-3"> Quick Templates </h3> <div className="grid grid-cols-1 md:grid-cols-3 gap-3"> {emailTemplates.map((template, index) => ( <button key={index} onClick={() => applyTemplate(template)} className="p-3 text-left border border-gray-200 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors" > <div className="font-medium text-gray-900 dark:text-white"> {template.name} </div> <div className="text-sm text-gray-600 dark:text-gray-400 mt-1"> {template.subject} </div> </button> ))} </div> </div> {/* Email Form */} <form onSubmit={handleSubmit} className="space-y-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div> <label htmlFor="recipient" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" > Recipient Email * </label> <input type="email" id="recipient" name="recipient" value={formData.recipient} onChange={handleInputChange} required className="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white" placeholder="recipient@example.com" /> </div> <div> <label htmlFor="from" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" > From Email (Optional) </label> <input type="email" id="from" name="from" value={formData.from} onChange={handleInputChange} className="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white" placeholder="sender@example.com" /> </div> </div> <div> <label htmlFor="subject" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" > Subject * </label> <input type="text" id="subject" name="subject" value={formData.subject} onChange={handleInputChange} required className="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white" placeholder="Email subject" /> </div> <div> <label htmlFor="body" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1" > Message Body * </label> <textarea id="body" name="body" value={formData.body} onChange={handleInputChange} required rows={6} className="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-white" placeholder="Type your message here..." /> </div> <button type="submit" disabled={isLoading} className="w-full py-3 px-4 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors font-medium" > {isLoading ? ( <div className="flex items-center justify-center"> <div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></div> Sending Email... </div> ) : ( "Send Email" )} </button> </form> {/* Result */} {result && ( <div className={`mt-6 p-4 rounded-lg ${ result.success ? "bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800" : "bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800" }`} > <div className={`font-medium ${ result.success ? "text-green-800 dark:text-green-200" : "text-red-800 dark:text-red-200" }`} > {result.success ? "✅ Success!" : "❌ Error"} </div> <div className={`mt-1 text-sm whitespace-pre-line ${ result.success ? "text-green-700 dark:text-green-300" : "text-red-700 dark:text-red-300" }`} > {result.message} </div> </div> )} {/* Configuration Note */} <div className="mt-6 p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg"> <div className="text-yellow-800 dark:text-yellow-200 font-medium"> ⚠️ Configuration Required </div> <div className="text-yellow-700 dark:text-yellow-300 text-sm mt-1"> To send real emails, configure your SMTP settings in the environment variables: <br />• SMTP_HOST, SMTP_PORT, SMTP_USER, SMTP_PASS </div> </div> </div> </div> ); }