function RoundedButtonDesign({ children, onClick }) { return /*#__PURE__*/ React.createElement("button", { className: "font-inter font-medium text-[#0E0F10] bg-[#E4E4E4] rounded-[8px] px-4 py-2 hover:bg-white transition-colors duration-200", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, children); } function RoundedButtonDesignStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(RoundedButtonDesign, { onClick: ()=>console.log('Button clicked'), __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, "Click me"), /*#__PURE__*/ React.createElement(RoundedButtonDesign, { onClick: ()=>console.log('Another button clicked'), __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, "Another button")); } function MainComponent() { const [formData, setFormData] = React.useState({ channel: 'LinkedIn', useCase: 'Introduction', intent: 'Pitch', tone: 'Informal', idealCustomerPersona: '', problem: '', solution: '', competitiveAdvantage: '', results: '', companyName: '' }); const [generatedMessage, setGeneratedMessage] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const handleInputChange = (e)=>{ const { name, value } = e.target; setFormData((prevData)=>({ ...prevData, [name]: value })); }; const generateMessage = async ()=>{ setIsLoading(true); try { const response = await fetch('/integrations/anthropic-claude-sonnet-3-5/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: `Generate a ${formData.channel} message for ${formData.useCase} with the intent to ${formData.intent}. The tone should be ${formData.tone}. Ideal Customer Persona: ${formData.idealCustomerPersona} ${formData.problem ? `Problem: ${formData.problem}` : ''} ${formData.solution ? `Solution: ${formData.solution}` : ''} ${formData.competitiveAdvantage ? `Competitive Advantage: ${formData.competitiveAdvantage}` : ''} ${formData.results ? `Results: ${formData.results}` : ''} ${formData.companyName ? `Company Name: ${formData.companyName}` : ''} Guidelines for LinkedIn: - Keep the message under 300 characters. - Be direct, engaging, and action-oriented. Guidelines for Email: - Ensure the message is concise, ideally under 150 words. - Include a clear and compelling call-to-action.` } ] }) }); const data = await response.json(); setGeneratedMessage(data.choices[0].message.content); } catch (error) { console.error('Error generating message:', error); } finally{ setIsLoading(false); } }; const copyToClipboard = ()=>{ navigator.clipboard.writeText(generatedMessage); }; const downloadMessage = ()=>{ const element = document.createElement("a"); const file = new Blob([ generatedMessage ], { type: 'text/plain' }); element.href = URL.createObjectURL(file); element.download = "generated_message.txt"; document.body.appendChild(element); element.click(); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[#141415] to-[#1d2124] text-[#B6B7B7] font-inter p-8", __source: { fileName: "", lineNumber: 76, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-semibold text-white mb-8", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, "Brreach's AI message generator"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8", __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, "Channel"), /*#__PURE__*/ React.createElement("select", { name: "channel", value: formData.channel, onChange: handleInputChange, className: "w-full bg-[#2A2D30] text-white rounded-md p-2", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "LinkedIn", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, "LinkedIn"), /*#__PURE__*/ React.createElement("option", { value: "Email", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, "Email"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 90, columnNumber: 13 }, __self: this }, "Use Case"), /*#__PURE__*/ React.createElement("select", { name: "useCase", value: formData.useCase, onChange: handleInputChange, className: "w-full bg-[#2A2D30] text-white rounded-md p-2", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "Introduction", __source: { fileName: "", lineNumber: 92, columnNumber: 15 }, __self: this }, "Introduction"), /*#__PURE__*/ React.createElement("option", { value: "Reply", __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }, "Reply"), /*#__PURE__*/ React.createElement("option", { value: "Follow-Up", __source: { fileName: "", lineNumber: 94, columnNumber: 15 }, __self: this }, "Follow-Up"), /*#__PURE__*/ React.createElement("option", { value: "Proposal", __source: { fileName: "", lineNumber: 95, columnNumber: 15 }, __self: this }, "Proposal"), /*#__PURE__*/ React.createElement("option", { value: "Break Up", __source: { fileName: "", lineNumber: 96, columnNumber: 15 }, __self: this }, "Break Up"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 100, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 101, columnNumber: 13 }, __self: this }, "Intent"), /*#__PURE__*/ React.createElement("select", { name: "intent", value: formData.intent, onChange: handleInputChange, className: "w-full bg-[#2A2D30] text-white rounded-md p-2", __source: { fileName: "", lineNumber: 102, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "Pitch", __source: { fileName: "", lineNumber: 103, columnNumber: 15 }, __self: this }, "Pitch"), /*#__PURE__*/ React.createElement("option", { value: "Nurture", __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this }, "Nurture"), /*#__PURE__*/ React.createElement("option", { value: "Introduce Yourself", __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }, "Introduce Yourself"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 110, columnNumber: 13 }, __self: this }, "Tone"), /*#__PURE__*/ React.createElement("select", { name: "tone", value: formData.tone, onChange: handleInputChange, className: "w-full bg-[#2A2D30] text-white rounded-md p-2", __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "Informal", __source: { fileName: "", lineNumber: 112, columnNumber: 15 }, __self: this }, "Informal"), /*#__PURE__*/ React.createElement("option", { value: "Creative", __source: { fileName: "", lineNumber: 113, columnNumber: 15 }, __self: this }, "Creative"), /*#__PURE__*/ React.createElement("option", { value: "Direct", __source: { fileName: "", lineNumber: 114, columnNumber: 15 }, __self: this }, "Direct"), /*#__PURE__*/ React.createElement("option", { value: "Bold", __source: { fileName: "", lineNumber: 115, columnNumber: 15 }, __self: this }, "Bold"))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 119, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 120, columnNumber: 13 }, __self: this }, "Ideal Customer Persona"), /*#__PURE__*/ React.createElement("textarea", { name: "idealCustomerPersona", value: formData.idealCustomerPersona, onChange: handleInputChange, className: "w-full bg-[#2A2D30] text-white rounded-md p-2", rows: "3", __source: { fileName: "", lineNumber: 121, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 124, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this }, "Problem (Optional)"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "problem", value: formData.problem, onChange: handleInputChange, className: "w-full bg-[#2A2D30] text-white rounded-md p-2", __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 129, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 130, columnNumber: 13 }, __self: this }, "Solution (Optional)"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "solution", value: formData.solution, onChange: handleInputChange, className: "w-full bg-[#2A2D30] text-white rounded-md p-2", __source: { fileName: "", lineNumber: 131, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 134, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 135, columnNumber: 13 }, __self: this }, "Competitive Advantage (Optional)"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "competitiveAdvantage", value: formData.competitiveAdvantage, onChange: handleInputChange, className: "w-full bg-[#2A2D30] text-white rounded-md p-2", __source: { fileName: "", lineNumber: 136, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 139, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 140, columnNumber: 13 }, __self: this }, "Results (Optional)"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "results", value: formData.results, onChange: handleInputChange, className: "w-full bg-[#2A2D30] text-white rounded-md p-2", __source: { fileName: "", lineNumber: 141, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 144, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-sm font-medium mb-2", __source: { fileName: "", lineNumber: 145, columnNumber: 13 }, __self: this }, "Company Name (Optional)"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "companyName", value: formData.companyName, onChange: handleInputChange, className: "w-full bg-[#2A2D30] text-white rounded-md p-2", __source: { fileName: "", lineNumber: 146, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement(RoundedButtonDesign, { onClick: generateMessage, disabled: isLoading, __source: { fileName: "", lineNumber: 149, columnNumber: 11 }, __self: this }, isLoading ? 'Generating...' : 'Generate Message')), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 154, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold text-white", __source: { fileName: "", lineNumber: 155, columnNumber: 11 }, __self: this }, "Generated Message"), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2A2D30] p-4 rounded-md min-h-[200px] whitespace-pre-wrap", __source: { fileName: "", lineNumber: 156, columnNumber: 11 }, __self: this }, generatedMessage), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-4", __source: { fileName: "", lineNumber: 159, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(RoundedButtonDesign, { onClick: copyToClipboard, __source: { fileName: "", lineNumber: 160, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-copy mr-2 text-xs", __source: { fileName: "", lineNumber: 161, columnNumber: 15 }, __self: this }), " Copy to Clipboard"), /*#__PURE__*/ React.createElement(RoundedButtonDesign, { onClick: downloadMessage, __source: { fileName: "", lineNumber: 163, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-download mr-2 text-xs", __source: { fileName: "", lineNumber: 164, columnNumber: 15 }, __self: this }), " Download"), /*#__PURE__*/ React.createElement(RoundedButtonDesign, { onClick: generateMessage, __source: { fileName: "", lineNumber: 166, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sync-alt mr-2 text-xs", __source: { fileName: "", lineNumber: 167, columnNumber: 15 }, __self: this }), " Refresh"))))); }