function MainComponent() { const [messages, setMessages] = React.useState([]); const [inputMessage, setInputMessage] = React.useState(""); const [isLoading, setIsLoading] = React.useState(false); const [error, setError] = React.useState(null); const messagesEndRef = React.useRef(null); const [currentPlaceholder, setCurrentPlaceholder] = React.useState(""); // Image generation states const [showImageGenerator, setShowImageGenerator] = React.useState(false); const [imagePrompt, setImagePrompt] = React.useState(""); const [selectedStyle, setSelectedStyle] = React.useState(""); const [generatedImageUrl, setGeneratedImageUrl] = React.useState(""); const [isImageLoading, setIsImageLoading] = React.useState(false); // Dynamic placeholder messages const placeholders = [ "Ask anything or say 'generate image of...' 🎨", "Try: 'Can you make an image of a dragon?' 🐉", "Ask: 'Code a calculator in Python' 💻", "Say: 'Generate image of cyberpunk city' 🌆", "Try: 'Write JavaScript for a to-do app' ⚡", "Ask: 'Create image of anime character' 🎌", "Say: 'Make a React component for login' ⚛️", "Try: 'Generate image of space galaxy' 🌌", "Ask: 'Code a sorting algorithm' 🔢", "Say: 'Create image of cute robot' 🤖" ]; // Change placeholder every 3 seconds React.useEffect(()=>{ setCurrentPlaceholder(placeholders[0]); const interval = setInterval(()=>{ setCurrentPlaceholder((prev)=>{ const currentIndex = placeholders.indexOf(prev); const nextIndex = (currentIndex + 1) % placeholders.length; return placeholders[nextIndex]; }); }, 3000); return ()=>clearInterval(interval); }, []); const scrollToBottom = ()=>{ messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; React.useEffect(()=>{ scrollToBottom(); }, [ messages ]); // Real-time image generation React.useEffect(()=>{ if (imagePrompt.trim()) { const timeoutId = setTimeout(()=>{ generateImage(); }, 1000); // 1 second delay after user stops typing return ()=>clearTimeout(timeoutId); } else { setGeneratedImageUrl(""); } }, [ imagePrompt, selectedStyle ]); const generateImage = async ()=>{ if (!imagePrompt.trim()) return; setIsImageLoading(true); try { const styleText = selectedStyle ? `, ${selectedStyle}` : ""; const fullPrompt = encodeURIComponent(imagePrompt + styleText); const imageUrl = `https://image.pollinations.ai/prompt/${fullPrompt}`; // Preload image to show loading state const img = new Image(); img.onload = ()=>{ setGeneratedImageUrl(imageUrl); setIsImageLoading(false); }; img.onerror = ()=>{ setError("Failed to generate image. Please try again."); setIsImageLoading(false); }; img.src = imageUrl; } catch (error) { console.error("Image generation error:", error); setError("Failed to generate image"); setIsImageLoading(false); } }; const downloadImage = async ()=>{ if (!generatedImageUrl) return; try { const response = await fetch(generatedImageUrl); const blob = await response.blob(); const url = window.URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = `kaze-study-generated-${Date.now()}.png`; document.body.appendChild(a); a.click(); document.body.removeChild(a); window.URL.revokeObjectURL(url); } catch (error) { console.error("Download error:", error); setError("Failed to download image"); } }; // Enhanced image request detection const isImageRequest = (message)=>{ const imageKeywords = [ "generate image", "create image", "make image", "draw", "generate picture", "create picture", "make picture", "can you make an image", "can you create an image", "can you generate an image", "make me an image", "create me an image", "generate me an image", "draw me", "sketch", "paint", "design an image", "can you make", "can you create", "can you generate", "can you draw" ]; const lowerMessage = message.toLowerCase(); return imageKeywords.some((keyword)=>lowerMessage.includes(keyword)) && (lowerMessage.includes("image") || lowerMessage.includes("picture") || lowerMessage.includes("draw") || lowerMessage.includes("sketch") || lowerMessage.includes("paint") || lowerMessage.includes("design")); }; // Check if message is a code request const isCodeRequest = (message)=>{ const codeKeywords = [ "code", "write code", "create code", "make code", "program", "script", "function", "algorithm", "javascript", "python", "html", "css", "react", "component", "write a", "create a", "make a", "build a", "develop", "coding", "programming", "software" ]; const lowerMessage = message.toLowerCase(); return codeKeywords.some((keyword)=>lowerMessage.includes(keyword)); }; const generateImageFromChat = async (prompt)=>{ try { // Extract the actual image description from the prompt let imageDescription = prompt.toLowerCase().replace(/generate image|create image|make image|draw|generate picture|create picture|make picture|can you make an image|can you create an image|can you generate an image|make me an image|create me an image|generate me an image|can you make|can you create|can you generate|can you draw/gi, "").replace(/of|a|an|the/gi, "").trim(); if (!imageDescription) { imageDescription = prompt; } const encodedPrompt = encodeURIComponent(imageDescription); const imageUrl = `https://image.pollinations.ai/prompt/${encodedPrompt}`; return imageUrl; } catch (error) { console.error("Image generation error:", error); return null; } }; const sendMessage = async ()=>{ if (!inputMessage.trim() || isLoading) return; const userMessage = { role: "user", content: inputMessage.trim() }; setMessages((prev)=>[ ...prev, userMessage ]); const messageToSend = inputMessage.trim(); setInputMessage(""); setIsLoading(true); setError(null); try { // Check if it's an image generation request if (isImageRequest(messageToSend)) { const imageUrl = await generateImageFromChat(messageToSend); if (imageUrl) { const imageMessage = { role: "assistant", content: "🎨 Here's your generated image:", imageUrl: imageUrl }; setMessages((prev)=>[ ...prev, imageMessage ]); setIsLoading(false); return; } } // Regular chat message (will handle code requests in backend) const response = await fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ message: messageToSend, isCodeRequest: isCodeRequest(messageToSend) }) }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); if (data.error) { throw new Error(data.error); } const aiMessage = { role: "assistant", content: data.response }; setMessages((prev)=>[ ...prev, aiMessage ]); } catch (error) { console.error("Error sending message:", error); setError("Failed to get response. Please try again."); } finally{ setIsLoading(false); } }; const handleKeyPress = (e)=>{ if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); sendMessage(); } }; return /*#__PURE__*/ React.createElement("div", { style: { height: "100vh", display: "flex", flexDirection: "column", background: "linear-gradient(135deg, #0c0c0c 0%, #1a1a2e 50%, #16213e 100%)", fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', position: "relative", overflow: "hidden" }, __source: { fileName: "", lineNumber: 271, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "floating-shapes", __source: { fileName: "", lineNumber: 285, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "shape shape-1", __source: { fileName: "", lineNumber: 286, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "shape shape-2", __source: { fileName: "", lineNumber: 287, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "shape shape-3", __source: { fileName: "", lineNumber: 288, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "shape shape-4", __source: { fileName: "", lineNumber: 289, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "shape shape-5", __source: { fileName: "", lineNumber: 290, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { style: { padding: "4px 20px", textAlign: "center", background: "rgba(45, 45, 45, 0.8)", backdropFilter: "blur(20px)", borderBottom: "1px solid rgba(64, 64, 64, 0.5)", flexShrink: 0, position: "relative", zIndex: 10 }, __source: { fileName: "", lineNumber: 294, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "logo-container", __source: { fileName: "", lineNumber: 306, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { style: { fontSize: "16px", fontWeight: "700", margin: "0 0 1px 0", background: "linear-gradient(45deg, #00d4ff, #0084ff, #6c5ce7)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text", textShadow: "0 0 20px rgba(0, 132, 255, 0.5)" }, className: "main-title", __source: { fileName: "", lineNumber: 307, columnNumber: 11 }, __self: this }, "Kaze Study")), /*#__PURE__*/ React.createElement("p", { style: { fontSize: "8px", color: "#b0b0b0", margin: "0", fontWeight: "400" }, __source: { fileName: "", lineNumber: 323, columnNumber: 9 }, __self: this }, "Co-founded by Kunal & Hemant")), /*#__PURE__*/ React.createElement("div", { style: { flex: 1, overflowY: "auto", padding: "20px", display: "flex", flexDirection: "column", gap: "16px", position: "relative", zIndex: 5, minHeight: "0" }, __source: { fileName: "", lineNumber: 336, columnNumber: 7 }, __self: this }, messages.length === 0 && !showImageGenerator && /*#__PURE__*/ React.createElement("div", { style: { textAlign: "center", color: "#888", fontSize: "18px", marginTop: "40px", padding: "30px", background: "rgba(45, 45, 45, 0.3)", backdropFilter: "blur(10px)", borderRadius: "20px", border: "1px solid rgba(255, 255, 255, 0.1)" }, className: "welcome-message", __source: { fileName: "", lineNumber: 350, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { fontSize: "48px", marginBottom: "20px" }, __source: { fileName: "", lineNumber: 364, columnNumber: 13 }, __self: this }, "🤖"), /*#__PURE__*/ React.createElement("div", { style: { fontSize: "24px", marginBottom: "10px", color: "#fff" }, __source: { fileName: "", lineNumber: 365, columnNumber: 13 }, __self: this }, "Welcome to Kaze Study AI"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 370, columnNumber: 13 }, __self: this }, "Start a conversation and experience the future of learning"), /*#__PURE__*/ React.createElement("div", { style: { fontSize: "12px", color: "#666", marginTop: "15px", fontStyle: "italic" }, __source: { fileName: "", lineNumber: 373, columnNumber: 13 }, __self: this }, 'Try: "Can you make an image of a cyberpunk cat?" 🎨')), showImageGenerator && /*#__PURE__*/ React.createElement("div", { style: { background: "rgba(45, 45, 45, 0.8)", backdropFilter: "blur(20px)", borderRadius: "20px", padding: "25px", border: "1px solid rgba(255, 255, 255, 0.1)", marginBottom: "20px" }, className: "image-generator-panel", __source: { fileName: "", lineNumber: 388, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "20px" }, __source: { fileName: "", lineNumber: 399, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { style: { color: "#fff", margin: 0, fontSize: "20px" }, __source: { fileName: "", lineNumber: 407, columnNumber: 15 }, __self: this }, "🎨 AI Image Generator"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowImageGenerator(false), style: { background: "transparent", border: "1px solid rgba(255, 255, 255, 0.2)", color: "#fff", borderRadius: "50%", width: "30px", height: "30px", cursor: "pointer", fontSize: "16px" }, __source: { fileName: "", lineNumber: 410, columnNumber: 15 }, __self: this }, "×")), /*#__PURE__*/ React.createElement("div", { style: { display: "flex", gap: "15px", marginBottom: "20px" }, __source: { fileName: "", lineNumber: 427, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: imagePrompt, onChange: (e)=>setImagePrompt(e.target.value), placeholder: "Describe the image you want to generate...", style: { flex: 1, padding: "12px 16px", background: "rgba(26, 26, 26, 0.8)", border: "1px solid rgba(255, 255, 255, 0.2)", borderRadius: "12px", color: "#fff", fontSize: "14px", outline: "none" }, className: "image-prompt-input", __source: { fileName: "", lineNumber: 428, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("select", { value: selectedStyle, onChange: (e)=>setSelectedStyle(e.target.value), style: { padding: "12px 16px", background: "rgba(26, 26, 26, 0.8)", border: "1px solid rgba(255, 255, 255, 0.2)", borderRadius: "12px", color: "#fff", fontSize: "14px", outline: "none", minWidth: "120px" }, __source: { fileName: "", lineNumber: 446, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 460, columnNumber: 17 }, __self: this }, "Default"), /*#__PURE__*/ React.createElement("option", { value: "anime style", __source: { fileName: "", lineNumber: 461, columnNumber: 17 }, __self: this }, "Anime"), /*#__PURE__*/ React.createElement("option", { value: "realistic style", __source: { fileName: "", lineNumber: 462, columnNumber: 17 }, __self: this }, "Realistic"), /*#__PURE__*/ React.createElement("option", { value: "cyberpunk style", __source: { fileName: "", lineNumber: 463, columnNumber: 17 }, __self: this }, "Cyberpunk"), /*#__PURE__*/ React.createElement("option", { value: "cartoon style", __source: { fileName: "", lineNumber: 464, columnNumber: 17 }, __self: this }, "Cartoon"), /*#__PURE__*/ React.createElement("option", { value: "oil painting style", __source: { fileName: "", lineNumber: 465, columnNumber: 17 }, __self: this }, "Oil Painting"), /*#__PURE__*/ React.createElement("option", { value: "watercolor style", __source: { fileName: "", lineNumber: 466, columnNumber: 17 }, __self: this }, "Watercolor"), /*#__PURE__*/ React.createElement("option", { value: "sketch style", __source: { fileName: "", lineNumber: 467, columnNumber: 17 }, __self: this }, "Sketch"), /*#__PURE__*/ React.createElement("option", { value: "digital art style", __source: { fileName: "", lineNumber: 468, columnNumber: 17 }, __self: this }, "Digital Art"))), /*#__PURE__*/ React.createElement("div", { style: { minHeight: "300px", background: "rgba(26, 26, 26, 0.5)", borderRadius: "15px", border: "2px dashed rgba(255, 255, 255, 0.1)", display: "flex", alignItems: "center", justifyContent: "center", position: "relative", overflow: "hidden" }, __source: { fileName: "", lineNumber: 473, columnNumber: 13 }, __self: this }, isImageLoading && /*#__PURE__*/ React.createElement("div", { style: { textAlign: "center", color: "#888" }, __source: { fileName: "", lineNumber: 487, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "image-loading-spinner", __source: { fileName: "", lineNumber: 488, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("p", { style: { marginTop: "15px" }, __source: { fileName: "", lineNumber: 489, columnNumber: 19 }, __self: this }, "Generating your image...")), !isImageLoading && !generatedImageUrl && !imagePrompt && /*#__PURE__*/ React.createElement("div", { style: { textAlign: "center", color: "#666" }, __source: { fileName: "", lineNumber: 494, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { fontSize: "48px", marginBottom: "15px" }, __source: { fileName: "", lineNumber: 495, columnNumber: 19 }, __self: this }, "🖼️"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 498, columnNumber: 19 }, __self: this }, "Enter a prompt above to generate an AI image")), !isImageLoading && generatedImageUrl && /*#__PURE__*/ React.createElement("div", { style: { width: "100%", textAlign: "center" }, __source: { fileName: "", lineNumber: 503, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: generatedImageUrl, alt: "Generated AI Image", style: { maxWidth: "100%", maxHeight: "400px", borderRadius: "10px", boxShadow: "0 10px 30px rgba(0, 0, 0, 0.3)" }, className: "generated-image", __source: { fileName: "", lineNumber: 504, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("div", { style: { marginTop: "15px" }, __source: { fileName: "", lineNumber: 515, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: downloadImage, style: { background: "linear-gradient(135deg, #00d4ff, #0084ff)", border: "none", color: "white", padding: "10px 20px", borderRadius: "10px", cursor: "pointer", fontSize: "14px", fontWeight: "600" }, className: "download-btn", __source: { fileName: "", lineNumber: 516, columnNumber: 21 }, __self: this }, "📥 Download Image"))))), messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, style: { display: "flex", justifyContent: message.role === "user" ? "flex-end" : "flex-start", marginBottom: "8px" }, className: "message-container", __source: { fileName: "", lineNumber: 540, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { maxWidth: "75%", padding: "16px 20px", borderRadius: "20px", background: message.role === "user" ? "linear-gradient(135deg, #0084ff, #00d4ff)" : "rgba(45, 45, 45, 0.8)", backdropFilter: "blur(20px)", color: message.role === "user" ? "white" : "#ffffff", fontSize: "16px", lineHeight: "1.5", boxShadow: message.role === "assistant" ? "0 8px 32px rgba(0, 132, 255, 0.2)" : "0 8px 32px rgba(0, 212, 255, 0.3)", whiteSpace: "pre-wrap", wordBreak: "break-word", border: message.role === "assistant" ? "1px solid rgba(255, 255, 255, 0.1)" : "none", position: "relative" }, className: "message-bubble", __source: { fileName: "", lineNumber: 550, columnNumber: 13 }, __self: this }, message.content, message.imageUrl && /*#__PURE__*/ React.createElement("div", { style: { marginTop: "10px", textAlign: "center" }, __source: { fileName: "", lineNumber: 579, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: message.imageUrl, alt: "Generated AI Image", style: { maxWidth: "100%", maxHeight: "300px", borderRadius: "10px", boxShadow: "0 5px 15px rgba(0, 0, 0, 0.3)" }, __source: { fileName: "", lineNumber: 580, columnNumber: 19 }, __self: this }))))), isLoading && /*#__PURE__*/ React.createElement("div", { style: { display: "flex", justifyContent: "flex-start", marginBottom: "8px" }, __source: { fileName: "", lineNumber: 597, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { maxWidth: "70%", padding: "16px 20px", borderRadius: "20px", background: "rgba(45, 45, 45, 0.8)", backdropFilter: "blur(20px)", color: "#888", fontSize: "16px", boxShadow: "0 8px 32px rgba(0, 132, 255, 0.2)", border: "1px solid rgba(255, 255, 255, 0.1)" }, className: "typing-indicator", __source: { fileName: "", lineNumber: 604, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { display: "flex", gap: "6px", alignItems: "center" }, __source: { fileName: "", lineNumber: 618, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "typing-dot", __source: { fileName: "", lineNumber: 625, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "typing-dot", __source: { fileName: "", lineNumber: 626, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "typing-dot", __source: { fileName: "", lineNumber: 627, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { style: { marginLeft: "10px" }, __source: { fileName: "", lineNumber: 628, columnNumber: 17 }, __self: this }, "AI is thinking...")))), error && /*#__PURE__*/ React.createElement("div", { style: { backgroundColor: "rgba(255, 107, 107, 0.2)", color: "#ff6b6b", padding: "16px 20px", borderRadius: "15px", fontSize: "14px", textAlign: "center", border: "1px solid rgba(255, 107, 107, 0.3)", backdropFilter: "blur(10px)" }, __source: { fileName: "", lineNumber: 635, columnNumber: 11 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { ref: messagesEndRef, __source: { fileName: "", lineNumber: 651, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { style: { padding: "20px", background: "rgba(45, 45, 45, 0.8)", backdropFilter: "blur(20px)", borderTop: "1px solid rgba(64, 64, 64, 0.5)", flexShrink: 0, position: "relative", zIndex: 10 }, __source: { fileName: "", lineNumber: 655, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { display: "flex", gap: "15px", alignItems: "flex-end", maxWidth: "900px", margin: "0 auto" }, __source: { fileName: "", lineNumber: 666, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setShowImageGenerator(!showImageGenerator), style: { width: "50px", height: "50px", borderRadius: "50%", border: "none", background: showImageGenerator ? "linear-gradient(135deg, #ff6b6b, #feca57)" : "rgba(85, 85, 85, 0.7)", color: "white", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "20px", transition: "all 0.3s ease", boxShadow: showImageGenerator ? "0 0 20px rgba(255, 107, 107, 0.5)" : "none" }, className: "image-generator-btn", title: "AI Image Generator", __source: { fileName: "", lineNumber: 676, columnNumber: 11 }, __self: this }, "🎨"), /*#__PURE__*/ React.createElement("textarea", { value: inputMessage, onChange: (e)=>setInputMessage(e.target.value), onKeyPress: handleKeyPress, placeholder: currentPlaceholder, disabled: isLoading, style: { flex: 1, minHeight: "50px", maxHeight: "120px", padding: "15px 20px", border: "1px solid rgba(255, 255, 255, 0.2)", borderRadius: "25px", fontSize: "16px", fontFamily: "inherit", resize: "none", outline: "none", background: isLoading ? "rgba(51, 51, 51, 0.5)" : "rgba(26, 26, 26, 0.8)", backdropFilter: "blur(10px)", color: isLoading ? "#666" : "#ffffff", transition: "all 0.3s ease" }, className: "chat-input", rows: 1, __source: { fileName: "", lineNumber: 703, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: sendMessage, disabled: !inputMessage.trim() || isLoading, style: { width: "50px", height: "50px", borderRadius: "50%", border: "none", background: inputMessage.trim() && !isLoading ? "linear-gradient(135deg, #0084ff, #00d4ff)" : "rgba(85, 85, 85, 0.5)", color: "white", cursor: inputMessage.trim() && !isLoading ? "pointer" : "not-allowed", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "20px", transition: "all 0.3s ease", boxShadow: inputMessage.trim() && !isLoading ? "0 0 20px rgba(0, 132, 255, 0.5)" : "none" }, className: "send-button", __source: { fileName: "", lineNumber: 730, columnNumber: 11 }, __self: this }, "↑"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 762, columnNumber: 7 }, __self: this }, ` @keyframes float { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-20px) rotate(180deg); } } @keyframes glow { 0% { box-shadow: 0 0 20px rgba(255, 107, 107, 0.5); } 100% { box-shadow: 0 0 30px rgba(254, 202, 87, 0.8); } } @keyframes pulse3d { 0%, 100% { transform: scale(1) rotateY(0deg); } 50% { transform: scale(1.05) rotateY(10deg); } } @keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-10px); opacity: 1; } } @keyframes imageLoading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .floating-shapes { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; } .shape { position: absolute; background: linear-gradient(45deg, rgba(0, 132, 255, 0.1), rgba(108, 92, 231, 0.1)); border-radius: 50%; animation: float 6s ease-in-out infinite; } .shape-1 { width: 80px; height: 80px; top: 20%; left: 10%; animation-delay: 0s; } .shape-2 { width: 120px; height: 120px; top: 60%; right: 15%; animation-delay: 2s; } .shape-3 { width: 60px; height: 60px; top: 80%; left: 20%; animation-delay: 4s; } .shape-4 { width: 100px; height: 100px; top: 30%; right: 30%; animation-delay: 1s; } .shape-5 { width: 90px; height: 90px; top: 10%; right: 50%; animation-delay: 3s; } .main-title { animation: pulse3d 3s ease-in-out infinite; } .message-container { animation: slideIn 0.5s ease-out; } .image-generator-panel { animation: slideDown 0.5s ease-out; } .image-loading-spinner { width: 40px; height: 40px; border: 4px solid rgba(0, 132, 255, 0.3); border-top: 4px solid #0084ff; border-radius: 50%; animation: imageLoading 1s linear infinite; } .generated-image { animation: slideIn 0.8s ease-out; } @keyframes slideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .message-bubble:hover { transform: translateY(-2px); transition: transform 0.3s ease; } .typing-dot { width: 8px; height: 8px; border-radius: 50%; background: #0084ff; animation: typing 1.4s infinite; } .typing-dot:nth-child(2) { animation-delay: 0.2s; } .typing-dot:nth-child(3) { animation-delay: 0.4s; } .chat-input:focus { border-color: #0084ff !important; box-shadow: 0 0 20px rgba(0, 132, 255, 0.3) !important; } .image-prompt-input:focus { border-color: #0084ff !important; box-shadow: 0 0 15px rgba(0, 132, 255, 0.3) !important; } .send-button:hover:not(:disabled) { transform: scale(1.1); box-shadow: 0 0 25px rgba(0, 132, 255, 0.7) !important; } .image-generator-btn:hover { transform: scale(1.1); box-shadow: 0 0 25px rgba(255, 107, 107, 0.7) !important; } .download-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 132, 255, 0.4); } .welcome-message { animation: fadeInUp 1s ease-out; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } body { margin: 0; padding: 0; background: #0c0c0c; } textarea::placeholder { color: #888; transition: all 0.3s ease; } /* Scrollbar Styling */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: rgba(45, 45, 45, 0.3); } ::-webkit-scrollbar-thumb { background: rgba(0, 132, 255, 0.5); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(0, 132, 255, 0.7); } `)); }