function MainComponent() { const [messages, setMessages] = React.useState([]); const [currentMessage, setCurrentMessage] = React.useState(''); const [activeLanguage, setActiveLanguage] = React.useState("EN"); const [openPromptsBase, setOpenPromptsBase] = React.useState(false); const sendMessage = async (message)=>{ setMessages((prevMessages)=>[ ...prevMessages, { role: 'user', content: message } ]); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: message } ], system_prompt: 'Explain this content' }) }); const data = await response.json(); setMessages((prevMessages)=>[ ...prevMessages, { role: 'assistant', content: data.result } ]); } catch (error) { setMessages((prevMessages)=>[ ...prevMessages, { role: 'system', content: 'Error: Unable to get response.' } ]); } }; const handleSendMessage = ()=>{ sendMessage(currentMessage); setCurrentMessage(''); }; const handleTemplateSelection = (template)=>{ setCurrentMessage(template); setOpenPromptsBase(false); }; const togglePromptsBase = ()=>{ setOpenPromptsBase(!openPromptsBase); }; const messagesDisplay = messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `p-4 mb-2 rounded-lg shadow-lg ${message.role === 'user' ? 'bg-blue-700' : message.role === 'assistant' ? 'bg-gray-700' : 'bg-red-700'}`, style: { animation: "fadeIn 0.5s" }, __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-white", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, message.content))); const sidebarDisplay = /*#__PURE__*/ React.createElement("aside", { className: "w-1/4 p-4 border-r border-[#343434] space-y-5", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl text-white", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, "Tools"), /*#__PURE__*/ React.createElement("button", { onClick: togglePromptsBase, className: `text-xl ${openPromptsBase ? 'text-blue-500' : 'text-white'}`, __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, "📚")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-lg text-white", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "Settings"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-white", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "Active Language: ", activeLanguage)), /*#__PURE__*/ React.createElement("div", { className: "h-48 bg-[#1D1D1D] rounded-lg shadow-inner", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "h-48 bg-[#1D1D1D] rounded-lg shadow-inner", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this })); const promptBaseDisplay = openPromptsBase && /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-[#00000088] flex justify-center items-center", __source: { fileName: "", lineNumber: 69, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1C1C1C] p-6 rounded-lg space-y-4", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-xl text-white", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, "Prompts Base"), /*#__PURE__*/ React.createElement("button", { onClick: togglePromptsBase, className: "text-xl text-white", __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, "❌")), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-white", __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, "Choose the prompt that suits you best. Once you click, it'll appear in the text input field. You can then send it as is or add your own words."), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleTemplateSelection("What are the effects of..."), className: "text-white font-roboto p-2 bg-[#343434] rounded-lg", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, "What are the effects of..."), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleTemplateSelection("How do I solve..."), className: "text-white font-roboto p-2 bg-[#343434] rounded-lg", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, "How do I solve..."), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleTemplateSelection("Explain the concept of..."), className: "text-white font-roboto p-2 bg-[#343434] rounded-lg", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, "Explain the concept of..."))); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212] text-white flex", __source: { fileName: "", lineNumber: 92, columnNumber: 5 }, __self: this }, sidebarDisplay, /*#__PURE__*/ React.createElement("main", { className: "flex-1", __source: { fileName: "", lineNumber: 94, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-full", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 border-b border-[#343434] text-center", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }, "Chat with GPT-3")), /*#__PURE__*/ React.createElement("div", { className: "flex-grow p-4 overflow-auto", __source: { fileName: "", lineNumber: 99, columnNumber: 11 }, __self: this }, messagesDisplay), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#1D1D1D]", __source: { fileName: "", lineNumber: 102, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-2 mb-2 rounded shadow bg-[#2D2D2D] text-white font-roboto", placeholder: "Type your message here...", value: currentMessage, onChange: (event)=>setCurrentMessage(event.target.value), __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full p-2 rounded shadow bg-blue-600 hover:bg-blue-800 transition font-roboto", onClick: handleSendMessage, __source: { fileName: "", lineNumber: 109, columnNumber: 13 }, __self: this }, "Send Message")))), promptBaseDisplay, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 119, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } body { overflow: ${openPromptsBase ? 'hidden' : 'auto'}; } `)); }