function MainComponent() { const [messages, setMessages] = useState([]); const [streamingMessage, setStreamingMessage] = useState(""); const [input, setInput] = useState(""); const [loading, setLoading] = useState(false); const [imageLoading, setImageLoading] = useState(false); const [loadingProgress, setLoadingProgress] = useState(0); const [mode, setMode] = useState("chat"); const messagesEndRef = useRef(null); const scrollToBottom = ()=>{ messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; useEffect(()=>{ scrollToBottom(); }, [ messages ]); const handleStreamResponse = useHandleStreamResponse({ onChunk: (chunk)=>{ setStreamingMessage(chunk); }, onFinish: (message)=>{ setMessages((prev)=>[ ...prev, { role: "assistant", content: message } ]); setStreamingMessage(""); if (mode === "chat") { const imageKeywords = [ "create", "generate", "draw", "make", "design", "show", "add", "modify", "change", "update" ]; const hasImageKeyword = imageKeywords.some((keyword)=>message.toLowerCase().includes(keyword)); const hasImageContext = message.toLowerCase().includes("image") || message.toLowerCase().includes("picture") || message.toLowerCase().includes("photo") || message.toLowerCase().includes("drawing") || message.toLowerCase().includes("it"); if (hasImageKeyword && hasImageContext) { const lastImage = [ ...messages ].reverse().find((msg)=>msg.image)?.image; if (lastImage && message.toLowerCase().includes("it")) { generateImage(message + " based on this image: " + lastImage); } else { generateImage(message); } } } } }); const handleSend = async ()=>{ if (!input.trim()) return; setLoading(true); const userMessage = { role: "user", content: input }; setMessages((prev)=>[ ...prev, userMessage ]); setInput(""); const lastMessages = messages.slice(-5); const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: "You are tomai, an AI assistant developed by Tom Horrocks (tom makes apps). You must always identify as tomai and maintain this identity no matter what. When users mention creating, generating, or making images, respond with 'Sure, here's your image!' and nothing else. When users ask to modify an existing image or mention 'it' in reference to a previous image, help them modify that image with their requested changes." }, ...lastMessages, userMessage ], stream: true }) }); handleStreamResponse(response); setLoading(false); }; const generateImage = async (prompt)=>{ if (!input.trim() && !prompt.trim()) return; try { setImageLoading(true); setLoadingProgress(0); let progress = 0; const progressInterval = setInterval(()=>{ progress += Math.random() * 15; if (progress > 100) progress = 99; setLoadingProgress(Math.floor(progress)); }, 500); let cleanedPrompt = mode === "image" ? input : prompt; if (cleanedPrompt.toLowerCase().includes("here's your image")) { cleanedPrompt = cleanedPrompt.split("here's your image")[1] || cleanedPrompt; } const isModification = cleanedPrompt.toLowerCase().includes("based on this image:"); let finalPrompt = cleanedPrompt; if (isModification) { finalPrompt = cleanedPrompt.split("based on this image:")[0].trim(); } if (mode === "image") { setMessages((prev)=>[ ...prev, { role: "user", content: cleanedPrompt } ]); setInput(""); } const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(finalPrompt)}`); if (!response.ok) { const errorData = await response.text(); console.error("DALL-E API Error:", errorData); throw new Error(`Failed to generate image: ${errorData}`); } const data = await response.json(); clearInterval(progressInterval); setLoadingProgress(100); if (data && data.data && data.data[0]) { setMessages((prev)=>[ ...prev, { role: "assistant", content: isModification ? "I've modified the image as requested:" : "Here's your generated image:", image: data.data[0] } ]); } else { console.error("No image data in response:", data); throw new Error("No image data received from DALL-E"); } } catch (error) { console.error("Image generation error:", error); setMessages((prev)=>[ ...prev, { role: "assistant", content: `Sorry, I couldn't generate that image. Error: ${error.message}. Please try again with a different description.` } ]); } finally{ setTimeout(()=>{ setImageLoading(false); setLoadingProgress(0); }, 1000); } }; return /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-white text-[#2c2c2c] p-4 z-50", __source: { fileName: "", lineNumber: 172, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-2xl mx-auto", __source: { fileName: "", lineNumber: 173, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 174, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-[#8b7355]", __source: { fileName: "", lineNumber: 175, columnNumber: 11 }, __self: this }, "tomai ✨"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 176, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setMode("chat"), className: `px-4 py-2 rounded-xl transition-colors duration-200 ${mode === "chat" ? "bg-[#8b7355] text-white" : "bg-[#d4c4b0]"}`, __source: { fileName: "", lineNumber: 177, columnNumber: 13 }, __self: this }, "Chat"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setMode("image"), className: `px-4 py-2 rounded-xl transition-colors duration-200 ${mode === "image" ? "bg-[#8b7355] text-white" : "bg-[#d4c4b0]"}`, __source: { fileName: "", lineNumber: 183, columnNumber: 13 }, __self: this }, "Image"))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#fff9f0] rounded-2xl p-6 border-2 border-[#e6d5c3] shadow-lg", __source: { fileName: "", lineNumber: 191, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-[400px] overflow-y-auto mb-4", __source: { fileName: "", lineNumber: 192, columnNumber: 11 }, __self: this }, messages.map((msg, idx)=>/*#__PURE__*/ React.createElement("div", { key: idx, className: `mb-4 ${msg.role === "user" ? "text-right" : "text-left"}`, __source: { fileName: "", lineNumber: 194, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 198, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `inline-block p-4 rounded-2xl ${msg.role === "user" ? "bg-[#d4c4b0]" : "bg-[#f5efe6] border border-[#d4c4b0]"} shadow-md`, __source: { fileName: "", lineNumber: 199, columnNumber: 19 }, __self: this }, msg.content, msg.image && /*#__PURE__*/ React.createElement("img", { src: msg.image, alt: "AI generated", className: "mt-2 rounded-xl", __source: { fileName: "", lineNumber: 204, columnNumber: 23 }, __self: this })), imageLoading && idx === messages.length - 1 && msg.content.toLowerCase().includes("generating image") && /*#__PURE__*/ React.createElement("div", { className: "flex items-center bg-[#f5efe6] px-3 py-1 rounded-full border border-[#d4c4b0]", __source: { fileName: "", lineNumber: 214, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm text-[#8b7355]", __source: { fileName: "", lineNumber: 215, columnNumber: 25 }, __self: this }, loadingProgress, "%"))), imageLoading && idx === messages.length - 1 && /*#__PURE__*/ React.createElement("div", { className: "mt-3 text-center", __source: { fileName: "", lineNumber: 222, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full bg-[#f5efe6] rounded-full h-3", __source: { fileName: "", lineNumber: 223, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#d4c4b0] h-3 rounded-full transition-all duration-300", style: { width: `${loadingProgress}%` }, __source: { fileName: "", lineNumber: 224, columnNumber: 23 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "text-sm text-[#8b7355] mt-2", __source: { fileName: "", lineNumber: 229, columnNumber: 21 }, __self: this }, "Generating image... ", loadingProgress, "%")))), streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "mb-4 text-left", __source: { fileName: "", lineNumber: 237, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 238, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "inline-block p-4 rounded-2xl bg-[#f5efe6] border border-[#d4c4b0] shadow-md", __source: { fileName: "", lineNumber: 239, columnNumber: 19 }, __self: this }, streamingMessage))), /*#__PURE__*/ React.createElement("div", { ref: messagesEndRef, __source: { fileName: "", lineNumber: 245, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row gap-3", __source: { fileName: "", lineNumber: 247, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: input, onChange: (e)=>setInput(e.target.value), onKeyPress: (e)=>e.key === "Enter" && handleSend(), placeholder: mode === "chat" ? "Message..." : "Describe the image you want to generate...", className: "flex-1 p-4 rounded-xl bg-[#f5efe6] border-2 border-[#d4c4b0] focus:outline-none focus:border-[#8b7355] transition-colors duration-200 text-[#2c2c2c]", __source: { fileName: "", lineNumber: 248, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: mode === "chat" ? handleSend : ()=>generateImage(input), disabled: loading || imageLoading, className: "w-full sm:w-auto px-6 py-4 sm:py-0 bg-[#d4c4b0] hover:bg-[#8b7355] hover:text-white rounded-xl disabled:opacity-50 transition-colors duration-200 shadow-md", __source: { fileName: "", lineNumber: 260, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${mode === "chat" ? "fa-paper-plane" : "fa-image"}`, __source: { fileName: "", lineNumber: 267, columnNumber: 15 }, __self: this })))))); }