function MainComponent() { const [brandDescription, setBrandDescription] = React.useState(''); const [selectedStyle, setSelectedStyle] = React.useState(''); const [problemDescription, setProblemDescription] = React.useState(''); const [nameList, setNameList] = React.useState([]); const [selectedNames, setSelectedNames] = React.useState([]); const [isSubmitting, setIsSubmitting] = React.useState(false); const handleSelectName = (name)=>{ setSelectedNames(selectedNames.includes(name) ? selectedNames.filter((selectedName)=>selectedName !== name) : [ ...selectedNames, name ]); }; const handleSubmit = async (event)=>{ event.preventDefault(); setIsSubmitting(true); const userMessage = `${brandDescription} ${selectedStyle} ${problemDescription}`; const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": userMessage } ], system_prompt: "Generate a CSV of brand names that appeal to the user's requests. Make sure you don't explain anything and only include the CSV. Do not include the names of real startups or brands in the output. Generate at most 10. Example: todoly,heartly,Funny Town,pottytop", max_tokens: 2000 }) }); const data = await response.json(); if (data.status) { setNameList(data.result.replace(/"/g, '').split(',').map((name)=>name.trim())); } setIsSubmitting(false); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-[#333] mb-8", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, "AI Brand Name Generator"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "w-full space-y-4", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "brandDescription", placeholder: "Your Business, Product or Personal Brand Description", className: "w-full p-2 border border-gray-300 rounded-md", onChange: (e)=>setBrandDescription(e.target.value), value: brandDescription, __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 text-sm font-medium text-[#333]", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "STYLE"), /*#__PURE__*/ React.createElement("select", { name: "selectedStyle", className: "w-full p-2 border border-gray-300 rounded-md", onChange: (e)=>setSelectedStyle(e.target.value), value: selectedStyle, __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "Select Style"), /*#__PURE__*/ React.createElement("option", { value: "Descriptive", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, "Descriptive"), /*#__PURE__*/ React.createElement("option", { value: "Acronym", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "Acronym"), /*#__PURE__*/ React.createElement("option", { value: "Mashup", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, "Mashup"), /*#__PURE__*/ React.createElement("option", { value: "Geographic", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "Geographic"), /*#__PURE__*/ React.createElement("option", { value: "Spelling Variation", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "Spelling Variation"), /*#__PURE__*/ React.createElement("option", { value: "Founder Name", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, "Founder Name"), /*#__PURE__*/ React.createElement("option", { value: "Abstract", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, "Abstract"), /*#__PURE__*/ React.createElement("option", { value: "Foreign Language", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, "Foreign Language"))), /*#__PURE__*/ React.createElement("textarea", { name: "problemDescription", placeholder: "What problem does your brand solve for your target audience?", className: "w-full p-2 border border-gray-300 rounded-md", onChange: (e)=>setProblemDescription(e.target.value), value: problemDescription, __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-6 w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-[#1e40af] hover:bg-[#1c39bb]", disabled: isSubmitting, __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, "Generate Names")), /*#__PURE__*/ React.createElement("div", { className: "w-full mt-8", __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, nameList.map((name, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-4 border border-gray-200 rounded-lg shadow-sm cursor-pointer my-2 transition duration-300 ease-in-out ${selectedNames.includes(name) ? 'bg-[#e0f2fe] ring-2 ring-[#1e40af]' : 'hover:ring-2 hover:ring-[#1e40af] hover:bg-blue-50'}`, onClick: ()=>handleSelectName(name), style: { transform: selectedNames.includes(name) ? 'scale(1.05)' : 'scale(1)' }, __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-lg font-medium text-[#333]", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, name))))); }