function MainComponent() { const [messages, setMessages] = React.useState([]); const [inputMessage, setInputMessage] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const [error, setError] = React.useState(''); async function handleSubmit(event) { event.preventDefault(); if (!inputMessage.trim()) { return; } const newMessage = { role: 'user', content: inputMessage.trim() }; setIsLoading(true); setError(''); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ ...messages, newMessage ], system_prompt: 'Explain this content', max_tokens: 2000 }) }); const data = await response.json(); if (!response.ok) { throw new Error('Failed to fetch data from the API'); } setMessages((prevMessages)=>[ ...prevMessages, newMessage, { role: 'assistant', content: data.result } ]); setInputMessage(''); } catch (error) { setError('There was an issue sending your message. Please try again later.'); } setIsLoading(false); } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gradient-to-b from-[#f7f7f7] to-[#ffffff] p-4", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/yasin-profile.jpg", alt: "Yasin profile image", className: "w-[120px] h-[120px] my-4 rounded-full mx-auto", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-5xl mt-8 mb-4 font-bold text-[#1e90ff] font-roboto", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "Yasin's Personal Website"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, "Hello, I'm Yasin, a 12-year-old with a website that showcases my talents and interests."), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg mt-6 mx-auto", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "border border-gray-300 rounded p-2 w-full mb-4", placeholder: "Type your question here...", value: inputMessage, onChange: (e)=>setInputMessage(e.target.value), name: "user_message", disabled: isLoading, __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }), error && /*#__PURE__*/ React.createElement("p", { className: "text-sm text-red-500 mb-2", __source: { fileName: "", lineNumber: 67, columnNumber: 21 }, __self: this }, error), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "btn btn-primary w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50", disabled: isLoading, __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, isLoading ? 'Sending...' : 'Send'))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg overflow-y-auto max-h-[400px] mt-8 mx-auto", __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `mb-2 flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`, __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-xs rounded px-4 py-2 ${message.role === 'user' ? 'bg-blue-500 text-white' : 'bg-gray-300 text-gray-900'}`, __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, message.content))))); }