` } ]; setMessages(newMessages); } catch (error) { console.error("Error:", error); } setLoading(false); setInput(""); }; const handleInputKeyPress = (e)=>{ if (e.key === 'Enter') { textGenerationMode ? handleSend() : handleGenerateImage(); } }; const handleClearHistory = ()=>{ setMessages([]); }; return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen font-roboto", __source: { fileName: "", lineNumber: 60, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[300px] p-4 bg-gray-200", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setArtifactsOpen(true), className: "w-full mb-4 py-2 bg-blue-500 text-white", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, "Artifacts"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setTextGenerationMode(!textGenerationMode), className: "w-full py-2 bg-green-500 text-white", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, textGenerationMode ? 'Switch to Image Mode' : 'Switch to Text Mode'), /*#__PURE__*/ React.createElement("button", { onClick: handleClearHistory, className: "w-full mt-4 py-2 bg-red-500 text-white", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, "Clear History")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col flex-1 relative", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-scroll p-4 bg-white border-b border-gray-300 fixed w-[calc(100%-300px)] h-[calc(100%-64px)]", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, messages.map((msg, index)=>{ const isUser = msg.role === "user"; const messageContent = /*#__PURE__*/ React.createElement("span", { className: `${isUser ? "bg-blue-200" : "bg-green-200"} inline-block p-2 rounded`, __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, msg.role === "assistant" && msg.content.includes('", lineNumber: 76, columnNumber: 21 }, __self: this }) : msg.content); return /*#__PURE__*/ React.createElement("div", { key: index, className: `${isUser ? "text-right" : "text-left"} p-2`, __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, messageContent); }), loading && /*#__PURE__*/ React.createElement("div", { className: "text-center text-gray-500 mt-2", __source: { fileName: "", lineNumber: 87, columnNumber: 23 }, __self: this }, "AI is generating a response...")), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-200 absolute bottom-0 w-full", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { name: "userInput", className: "w-full p-2 border border-gray-300 rounded", placeholder: "Enter your message here...", value: input, onChange: (e)=>setInput(e.target.value), onKeyPress: handleInputKeyPress, __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }))), artifactsOpen && /*#__PURE__*/ React.createElement("div", { className: "absolute right-0 top-0 w-[300px] h-full bg-white shadow-lg p-4 flex flex-col", __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setArtifactsOpen(false), className: "ml-auto text-gray-600 hover:text-black", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "overflow-y-scroll flex-1 p-2", __source: { fileName: "", lineNumber: 106, columnNumber: 11 }, __self: this }, messages.filter((msg)=>msg.role === "assistant" && (msg.content.includes('/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4", __source: { fileName: "", lineNumber: 109, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { dangerouslySetInnerHTML: { __html: msg.content }, __source: { fileName: "", lineNumber: 110, columnNumber: 19 }, __self: this })))))); } /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 120, columnNumber: 1 }, __self: this }, ` body { font-family: Roboto, sans-serif; } `);