function MainComponent() { const [conversation, setConversation] = React.useState([ { role: 'assistant', content: 'Welcome to Ask Lightbulb! 🌿 How can I assist you in your journey towards environmental sustainability?' } ]); const [userMessage, setUserMessage] = React.useState(''); const [loading, setLoading] = React.useState(false); const sendMessage = async ()=>{ if (!userMessage.trim()) return; const newMessage = { role: 'user', content: userMessage.trim() }; setConversation([ ...conversation, newMessage ]); setLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ ...conversation, newMessage ], system_prompt: 'The user seeks detailed, informative, and engaging content about environmental sustainability topics. Be friendly, conversational, and knowledgeable. Provide links to IDEAS For Us resources, suggest actions, and offer support in alignment with the organization’s values.', max_tokens: 2000 }), headers: { 'Content-Type': 'application/json' } }); const { result } = await response.json(); setConversation([ ...conversation, newMessage, { role: 'assistant', content: result } ]); } catch (error) { setConversation([ ...conversation, { role: 'system', content: 'Error occurred, please try again later.' } ]); } finally{ setLoading(false); setUserMessage(''); } }; const handleUserMessageChange = (event)=>{ setUserMessage(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col justify-center items-center bg-[#F0F4F8] min-h-screen", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow rounded-md p-6 w-full max-w-md", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-center mb-4", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://storage.ning.com/topology/rest/1.0/file/get/12373097057?profile=RESIZE_584x", alt: "IDEAS For Us Logo centered at the top of the chatbot", className: "h-12", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "overflow-y-auto h-[400px] mb-4 space-y-2", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, conversation.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `my-2 p-4 rounded-lg ${message.role === 'user' ? 'bg-[#D9ED92] self-end' : 'bg-[#90CDF4] self-start'}`, __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, message.role === 'assistant' && index === 0 && /*#__PURE__*/ React.createElement("img", { src: "https://storage.ning.com/topology/rest/1.0/file/get/12373097279?profile=RESIZE_400x", alt: "Chatbot avatar for Ask Lightbulb", className: "h-8 w-8 rounded-full mb-2", __source: { fileName: "", lineNumber: 57, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "font-sans text-sm", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, message.content))), loading && /*#__PURE__*/ React.createElement("div", { className: "self-center", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-spinner text-xl", style: { animation: 'spin 1s linear infinite' }, __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }))), /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: userMessage, onChange: handleUserMessageChange, placeholder: "Type your message here...", className: "border p-2 rounded w-full font-sans", onKeyDown: (e)=>e.key === 'Enter' && sendMessage(), __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this })))); }