function MainComponent() { const [messages, setMessages] = React.useState([]); const [userMessage, setUserMessage] = React.useState(""); const [loading, setLoading] = React.useState(false); const [selectedModel, setSelectedModel] = React.useState("CHAT_GPT"); const [imagePrompt, setImagePrompt] = React.useState(""); const [generatedImage, setGeneratedImage] = React.useState(null); const sendMessage = async ()=>{ if (!userMessage) return; setLoading(true); const newMessages = [ ...messages, { role: "user", content: userMessage } ]; setMessages(newMessages); const response = await fetch(`/integrations/${selectedModel.toLowerCase().replace("_", "-")}/${selectedModel === "CHAT_GPT" ? "conversationgpt4" : ""}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: newMessages, ...selectedModel === 'CHAT_GPT' && { system_prompt: 'You are a helpful assistant.' } }) }); const data = await response.json(); const assistantMessage = data.choices[0].message.content; setMessages([ ...newMessages, { role: "assistant", content: assistantMessage } ]); setLoading(false); setUserMessage(""); }; const generateImage = async ()=>{ if (!imagePrompt) return; setLoading(true); const response = await fetch(`/integrations/${selectedModel.toLowerCase().replace("_", "-")}/`, { method: 'GET', headers: { 'Content-Type': 'application/json' }, params: { prompt: imagePrompt } }); const data = await response.json(); setGeneratedImage(data.data[0]); setLoading(false); setImagePrompt(""); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen flex flex-col bg-[#2c2c2c] text-white font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-none flex items-center justify-between p-4 bg-[#1a1a1a] border-b border-[#3c3c3c]", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-2xl text-white", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-bars", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("h1", { className: "text-xl text-white", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "ChatGPT")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-white", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-user-circle", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex-grow flex", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[300px] bg-[#1a1a1a] border-r border-[#3c3c3c] p-4", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "w-full flex items-center p-2 space-x-2 rounded-lg bg-[#3c3c3c] hover:bg-[#525252]", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-plus-circle text-xl", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "New Chat")), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, [ "CHAT_GPT", "GOOGLE_GEMINI_1_5", "ANTHROPIC_CLAUDE_SONNET", "DALL_E_3", "STABLE_DIFFUSION" ].map((model)=>/*#__PURE__*/ React.createElement("button", { key: model, className: `w-full flex items-center p-2 rounded-lg hover:bg-[#3c3c3c] ${selectedModel === model && 'bg-[#3c3c3c]'}`, onClick: ()=>setSelectedModel(model), __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-comments text-xl", __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-2", __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this }, model.replace("_", " ")))))), /*#__PURE__*/ React.createElement("div", { className: "flex-grow flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fa fa-spinner fa-spin text-6xl text-[#6c757d]", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this }) : /*#__PURE__*/ React.createElement(React.Fragment, null, generatedImage ? /*#__PURE__*/ React.createElement("img", { src: generatedImage, alt: "Generated result", className: "max-w-full max-h-full", __source: { fileName: "", lineNumber: 87, columnNumber: 17 }, __self: this }) : /*#__PURE__*/ React.createElement("ul", { class: "space-y-2", __source: { fileName: "", lineNumber: 89, columnNumber: 17 }, __self: this }, messages.map((msg, idx)=>/*#__PURE__*/ React.createElement("li", { key: idx, className: `flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`, __source: { fileName: "", lineNumber: 91, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `p-2 rounded-lg ${msg.role === 'user' ? 'bg-[#3c3c3c]' : 'bg-[#525252]'}`, __source: { fileName: "", lineNumber: 92, columnNumber: 23 }, __self: this }, msg.content))))))), /*#__PURE__*/ React.createElement("div", { className: "flex-none flex items-center p-4 bg-[#1a1a1a] border-t border-[#3c3c3c]", __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, selectedModel === "DALL_E_3" || selectedModel === "STABLE_DIFFUSION" ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("input", { className: "flex-grow bg-[#525252] p-2 rounded-lg mr-4 border-none outline-none text-white", type: "text", placeholder: "Describe an image", name: "image-prompt", value: imagePrompt, onChange: (e)=>setImagePrompt(e.target.value), __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-[#525252] rounded-full", onClick: generateImage, __source: { fileName: "", lineNumber: 112, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-paper-plane text-xl", __source: { fileName: "", lineNumber: 113, columnNumber: 15 }, __self: this }))) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("input", { className: "flex-grow bg-[#525252] p-2 rounded-lg mr-4 border-none outline-none text-white", type: "text", placeholder: "Type a message", name: "message", value: userMessage, onChange: (e)=>setUserMessage(e.target.value), __source: { fileName: "", lineNumber: 118, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-[#525252] rounded-full", onClick: sendMessage, __source: { fileName: "", lineNumber: 126, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-paper-plane text-xl", __source: { fileName: "", lineNumber: 127, columnNumber: 15 }, __self: this }))))); }