function MainComponent() { const [messages, setMessages] = React.useState([]); const [inputValue, setInputValue] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const handleSendMessage = async ()=>{ if (!inputValue.trim()) return; const userMessage = { role: 'user', content: inputValue }; setMessages((prev)=>[ ...prev, userMessage ]); setIsLoading(true); setInputValue(''); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ userMessage ], system_prompt: 'Compose a kids poem about ' + inputValue, max_tokens: 200 }) }); const data = await response.json(); if (data.status) { setMessages((prev)=>[ ...prev, { role: 'assistant', content: data.result } ]); } } catch (error) {} setIsLoading(false); }; let chatBubbles = messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`, __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `rounded-lg ${msg.role === 'user' ? 'bg-[#D1E7FD]' : 'bg-[#FEF9C3]'} m-2 p-4 font-roboto`, __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, msg.content))); const handleFormSubmit = (e)=>{ e.preventDefault(); handleSendMessage(); }; const chatWindowClasses = `max-h-[50vh] overflow-auto ${isLoading ? 'animate-pulse' : ''}`; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F3F4F6] p-4 md:p-8 flex justify-center items-center", __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md w-full bg-white rounded-xl shadow-lg", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6 space-y-4", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center text-4xl font-bold font-roboto text-[#333333]", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Kids Poem Composer 📝"), /*#__PURE__*/ React.createElement("div", { className: chatWindowClasses, __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, chatBubbles), /*#__PURE__*/ React.createElement("form", { onSubmit: handleFormSubmit, className: "pt-4 flex gap-3", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: inputValue, onChange: (e)=>setInputValue(e.target.value), placeholder: "Enter a topic...", className: "flex-1 rounded-full py-2 px-4 border-2 border-gray-300", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: isLoading, className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full disabled:opacity-50", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, isLoading ? 'Generating...' : 'Generate Poem')))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, ` @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } `)); }