function InsultIntensityDropdown({ name, value, onChange, options, className }) { return /*#__PURE__*/ React.createElement("select", { name: name, value: value, onChange: onChange, className: `border border-gray-300 rounded py-2 px-4 ${className}`, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, options.map((option)=>/*#__PURE__*/ React.createElement("option", { key: option.value, value: option.value, __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, option.label))); } function InsultIntensityDropdownStory() { const [insultType, setInsultType] = React.useState("mild"); const options = [ { value: "mild", label: "Mild Insult" }, { value: "actual", label: "Actual Insult" } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(InsultIntensityDropdown, { name: "insultType", value: insultType, onChange: (e)=>setInsultType(e.target.value), options: options, __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this })); } function MainComponent() { const [insult, setInsult] = React.useState(""); const [loading, setLoading] = React.useState(false); const [insultType, setInsultType] = React.useState("mild"); const options = [ { value: "mild", label: "Mild Insult" }, { value: "actual", label: "Actual Insult" } ]; const generateInsult = async ()=>{ setLoading(true); const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { "role": "user", "content": insultType === "mild" ? "Generate a mild insult." : "Generate an actual insult." } ], system_prompt: "You're an insult generator. You must generate random insult, based on its prompt." }) }); const responseData = await response.json(); setInsult(responseData.choices[0].message.content); setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen", style: { background: 'linear-gradient(to right, #667eea, #764ba2)' }, __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center p-10 bg-white rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-xl mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "Insult Generator 🤭"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(InsultIntensityDropdown, { name: "insultType", value: insultType, onChange: (e)=>setInsultType(e.target.value), options: options, __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this })), loading ? /*#__PURE__*/ React.createElement("p", { className: "font-semibold text-gray-600", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "Generating insult...") : /*#__PURE__*/ React.createElement("p", { className: "font-semibold text-gray-600", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, insult || "Select type and press generate!"), /*#__PURE__*/ React.createElement("button", { onClick: generateInsult, className: "mt-6 py-2 px-4 bg-blue-500 text-white rounded hover:bg-blue-700 transition duration-300 ease-in-out", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "Generate"))); }