function MainComponent() { const [messages, setMessages] = React.useState([]); const [userMessage, setUserMessage] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const sendMessageToGPT = async ()=>{ if (!userMessage.trim()) return; setIsLoading(true); const requestBody = { messages: messages.concat({ role: 'user', content: userMessage }), system_prompt: "Help this person with their job search queries", max_tokens: 2000 }; try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(requestBody) }); const data = await response.json(); if (data?.status) { setMessages((currentMessages)=>currentMessages.concat({ role: 'assistant', content: data.result })); } } catch (error) { setMessages((currentMessages)=>currentMessages.concat({ role: 'system', content: 'An error occurred while fetching information. Please try again later.' })); } finally{ setIsLoading(false); } setUserMessage(''); }; const handleMessageInputChange = (event)=>{ setUserMessage(event.target.value); }; const handleKeyPress = (event)=>{ if (event.key === 'Enter') { sendMessageToGPT(); } }; const renderMessages = messages.map((msg, index)=>{ let bgColorClass = ''; if (msg.role === "user") { bgColorClass = "bg-blue-100"; } else if (msg.role === "assistant") { bgColorClass = "bg-green-100"; } else { bgColorClass = "bg-red-100"; } return /*#__PURE__*/ React.createElement("div", { key: index, className: `p-2 ${bgColorClass} my-2 rounded fade-in`, __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this }, msg.content); }); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 60, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-3xl mx-auto bg-white shadow-lg rounded p-6", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold mb-5 text-gray-800", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, "Job Search Assistant"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-[400px] overflow-auto mb-5", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, isLoading && /*#__PURE__*/ React.createElement("div", { className: "animate-bounce", __source: { fileName: "", lineNumber: 64, columnNumber: 25 }, __self: this }, "⏳ Loading..."), !isLoading && renderMessages), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-3", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "userMessage", className: "flex-grow p-3 border rounded font-roboto", placeholder: "Ask me anything about job searching...", value: userMessage, onChange: handleMessageInputChange, onKeyPress: handleKeyPress, __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-600 text-white font-bold py-3 px-6 rounded transition-colors hover:bg-blue-800 font-roboto", onClick: sendMessageToGPT, __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, "Send"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fade-in { animation-name: fadeIn; animation-duration: 1s; } `)); }