function GoogleMap({ initialCenter, onLocationSelect, selectedLocations = [] }) { const [map, setMap] = useState(null); const [searchInput, setSearchInput] = useState(""); const [searchResults, setSearchResults] = useState([]); const [userLocation, setUserLocation] = useState(initialCenter || { lat: 0, lng: 0 }); const [error, setError] = useState(null); const [markers, setMarkers] = useState([]); const mapRef = useRef(null); useEffect(()=>{ if ("geolocation" in navigator) { navigator.geolocation.getCurrentPosition((position)=>{ const location = { lat: position.coords.latitude, lng: position.coords.longitude }; setUserLocation(location); map?.panTo(location); }, (error)=>{ setError("Could not get your location. Using default position."); console.error(error); }); } }, [ map ]); useEffect(()=>{ if (!mapRef.current) return; const mapInstance = new google.maps.Map(mapRef.current, { center: userLocation, zoom: 14, zoomControl: true, mapTypeControl: false, streetViewControl: false, fullscreenControl: true }); setMap(mapInstance); mapInstance.addListener("click", (e)=>{ const clickedLocation = { lat: e.latLng.lat(), lng: e.latLng.lng() }; if (onLocationSelect) { onLocationSelect(clickedLocation); } const newMarker = new google.maps.Marker({ position: clickedLocation, map: mapInstance, animation: google.maps.Animation.DROP }); setMarkers((prev)=>[ ...prev, newMarker ]); }); return ()=>{ markers.forEach((marker)=>marker.setMap(null)); }; }, [ mapRef ]); useEffect(()=>{ markers.forEach((marker)=>marker.setMap(null)); selectedLocations.forEach((location)=>{ new google.maps.Marker({ position: location, map: map, animation: google.maps.Animation.DROP }); }); }, [ selectedLocations, map ]); const handleSearch = async ()=>{ try { const response = await fetch(`/integrations/google-place-autocomplete/autocomplete/json?input=${encodeURIComponent(searchInput)}&radius=500`); if (!response.ok) { throw new Error("Failed to fetch places"); } const data = await response.json(); setSearchResults(data.predictions); } catch (err) { setError("Error searching for places"); console.error(err); } }; const handlePlaceSelect = (place)=>{ if (place.description && map) { const geocoder = new google.maps.Geocoder(); geocoder.geocode({ address: place.description }, (results, status)=>{ if (status === "OK" && results[0]) { const location = results[0].geometry.location; map.panTo(location); if (onLocationSelect) { onLocationSelect({ lat: location.lat(), lng: location.lng(), name: place.description }); } const newMarker = new google.maps.Marker({ position: location, map: map, animation: google.maps.Animation.DROP }); setMarkers((prev)=>[ ...prev, newMarker ]); } }); } setSearchResults([]); setSearchInput(""); }; return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-[400px] rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 131, columnNumber: 5 }, __self: this }, error && /*#__PURE__*/ React.createElement("div", { className: "absolute top-2 left-2 right-2 z-10 bg-red-500/90 text-white px-4 py-2 rounded-lg text-sm font-inter", __source: { fileName: "", lineNumber: 133, columnNumber: 9 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 left-4 right-4 z-10", __source: { fileName: "", lineNumber: 138, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 139, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: searchInput, onChange: (e)=>setSearchInput(e.target.value), onKeyUp: (e)=>e.key === "Enter" && handleSearch(), placeholder: "Search for a place...", className: "w-full px-4 py-2 rounded-lg border border-gray-200 bg-white shadow-lg text-gray-900 text-sm font-inter focus:outline-none focus:border-gray-400", __source: { fileName: "", lineNumber: 140, columnNumber: 11 }, __self: this }), searchResults.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "absolute top-full left-0 right-0 mt-2 bg-white rounded-lg shadow-lg border border-gray-200 max-h-[200px] overflow-y-auto", __source: { fileName: "", lineNumber: 150, columnNumber: 13 }, __self: this }, searchResults.map((result, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>handlePlaceSelect(result), className: "w-full px-4 py-2 text-left hover:bg-gray-100 text-sm font-inter text-gray-900 border-b border-gray-100 last:border-0", __source: { fileName: "", lineNumber: 152, columnNumber: 17 }, __self: this }, result.description))))), /*#__PURE__*/ React.createElement("div", { ref: mapRef, className: "w-full h-full", __source: { fileName: "", lineNumber: 165, columnNumber: 7 }, __self: this })); } function GoogleMapStory() { const [selectedLocations, setSelectedLocations] = useState([]); const handleLocationSelect = (location)=>{ setSelectedLocations((prev)=>[ ...prev, location ]); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-8", __source: { fileName: "", lineNumber: 178, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto space-y-8", __source: { fileName: "", lineNumber: 179, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl shadow-lg p-6", __source: { fileName: "", lineNumber: 180, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold font-inter mb-4", __source: { fileName: "", lineNumber: 181, columnNumber: 11 }, __self: this }, "Interactive Map"), /*#__PURE__*/ React.createElement(GoogleMap, { initialCenter: { lat: 40.7128, lng: -74.006 }, onLocationSelect: handleLocationSelect, selectedLocations: selectedLocations, __source: { fileName: "", lineNumber: 182, columnNumber: 11 }, __self: this }), selectedLocations.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 189, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold font-inter mb-2", __source: { fileName: "", lineNumber: 190, columnNumber: 15 }, __self: this }, "Selected Locations"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 193, columnNumber: 15 }, __self: this }, selectedLocations.map((location, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "text-sm text-gray-600 font-inter", __source: { fileName: "", lineNumber: 195, columnNumber: 19 }, __self: this }, location.name || `Location ${index + 1}`, ":", " ", location.lat.toFixed(6), ", ", location.lng.toFixed(6)))))))); } function GoogleMap() { return /*#__PURE__*/ React.createElement("div", { className: "w-full h-[400px] bg-gray-100 rounded-lg", __source: { fileName: "", lineNumber: 2, columnNumber: 10 }, __self: this }); } function MainComponent() { const systemMessage = { role: "system", content: "You are Csmart, an AI assistant created by Cspark Industries. You help users build and modify applications. You are friendly, knowledgeable, and proudly represent Cspark Industries in all interactions." }; const [messages, setMessages] = useState([ systemMessage ]); const [input, setInput] = useState(""); const [isLoading, setIsLoading] = useState(false); const [isSearching, setIsSearching] = useState(false); const [error, setError] = useState(null); const [searchError, setSearchError] = useState(null); const [streamingMessage, setStreamingMessage] = useState(""); const [uploadedImage, setUploadedImage] = useState(null); const [isListening, setIsListening] = useState(false); const [isGeneratingImage, setIsGeneratingImage] = useState(false); const [generationProgress, setGenerationProgress] = useState(0); const [retryCount, setRetryCount] = useState(0); const [lastError, setLastError] = useState(null); const [isExecutingCode, setIsExecutingCode] = useState(false); const [codeOutputs, setCodeOutputs] = useState({}); const [isSpeaking, setIsSpeaking] = useState({}); const [upload, { loading: uploadLoading }] = useUpload(); const messagesEndRef = useRef(null); const scrollToBottom = useCallback(()=>{ messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }, []); const handleFinish = useCallback((message)=>{ setMessages((prev)=>[ ...prev, { role: "assistant", content: message } ]); setStreamingMessage(""); setRetryCount(0); }, []); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: handleFinish, onError: (error)=>{ setLastError(error); if (retryCount < 3) { setRetryCount((prev)=>prev + 1); } else { setError("Failed to get response after multiple attempts"); } } }); const extractCodeBlocks = (content)=>{ const regex = /(\w+)?\n([\s\S]*?)/g; const blocks = []; let match; while((match = regex.exec(content)) !== null){ blocks.push({ language: match[1] || "plaintext", code: match[2].trim() }); } return blocks; }; const handleCodeExecution = async (messageId, language, code)=>{ setIsExecutingCode(true); setError(null); try { const response = await fetch("/integrations/code-runner/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ code, language }) }); const data = await response.json(); setCodeOutputs((prev)=>({ ...prev, [messageId]: { stdout: data.stdout, stderr: data.stderr, error: data.stderr ? "Execution failed" : null } })); } catch (err) { setCodeOutputs((prev)=>({ ...prev, [messageId]: { stdout: "", stderr: "", error: "Failed to execute code" } })); } finally{ setIsExecutingCode(false); } }; const handleImageUpload = async (e)=>{ if (e.target.files && e.target.files[0]) { const file = e.target.files[0]; try { const { url, error } = await upload({ file }); if (error) { setError(error); return; } setUploadedImage(url); } catch (err) { console.error(err); setError("Failed to upload image"); } } }; const handleRemoveImage = ()=>{ setUploadedImage(null); }; const startListening = useCallback(()=>{ if (!("webkitSpeechRecognition" in window)) { setError("Speech recognition is not supported in this browser"); return; } const recognition = new webkitSpeechRecognition(); recognition.continuous = false; recognition.interimResults = false; recognition.lang = "en-US"; recognition.onstart = ()=>{ setIsListening(true); setError(null); }; recognition.onresult = (event)=>{ const transcript = event.results[0][0].transcript; setInput(transcript); }; recognition.onerror = (event)=>{ console.error("Speech recognition error", event.error); setError("Failed to recognize speech. Please try again."); setIsListening(false); }; recognition.onend = ()=>{ setIsListening(false); }; recognition.start(); }, []); const checkContentModeration = async (text)=>{ try { const response = await fetch("/integrations/text-moderation/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ input: text }) }); if (!response.ok) { throw new Error("Content moderation check failed"); } const data = await response.json(); return { isFlagged: data.results[0].flagged, categories: data.results[0].categories }; } catch (err) { console.error("Moderation error:", err); return { isFlagged: false, categories: {} }; } }; useEffect(()=>{ scrollToBottom(); }, [ messages, scrollToBottom ]); const handleTTS = async (text)=>{ try { const response = await fetch(`/integrations/text-to-speech/speech?text=${encodeURIComponent(text)}`); if (!response.ok) { throw new Error("Failed to convert text to speech"); } const audioBlob = await response.blob(); const audioUrl = URL.createObjectURL(audioBlob); const audio = new Audio(audioUrl); await audio.play(); } catch (err) { console.error("Text-to-speech error:", err); setError("Failed to play speech"); } }; const handleSubmit = async (e)=>{ e.preventDefault(); if (!input.trim() && !uploadedImage) return; setError(null); setSearchError(null); try { const moderationResult = await checkContentModeration(input); if (moderationResult.isFlagged) { const categories = Object.entries(moderationResult.categories).filter(([_, value])=>value === true).map(([key])=>key.replace(/-/g, " ")).join(", "); setError(`I noticed content that might be inappropriate (${categories}). Please revise your message and try again.`); return; } const userMessage = { role: "user", content: input, ...uploadedImage && { image: uploadedImage } }; setMessages((prev)=>[ ...prev, userMessage ]); setInput(""); setIsLoading(true); if (input.toLowerCase().startsWith("/search")) { setIsSearching(true); const searchQuery = input.slice(7).trim(); const searchResponse = await fetch(`/integrations/google-search/search?q=${encodeURIComponent(searchQuery)}`); if (!searchResponse.ok) { throw new Error(`Search failed with status ${searchResponse.status}`); } const searchData = await searchResponse.json(); const formattedResults = searchData.items?.slice(0, 5).map((item)=>({ title: item.title, link: item.link, displayLink: item.displayLink, snippet: item.snippet })) || []; const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ systemMessage, ...messages, { role: "user", content: `Search results for "${searchQuery}": ${JSON.stringify(formattedResults)}` } ], stream: true }) }); if (!response.ok) { throw new Error("Failed to process search results"); } await handleStreamResponse(response); setMessages((prev)=>[ ...prev, { role: "assistant", content: "Search Results:", searchResults: formattedResults } ]); } else if (uploadedImage) { const response = await fetch("/integrations/gpt-vision/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: [ { type: "text", text: input || "What can you tell me about this image?" }, { type: "image_url", image_url: { url: uploadedImage } } ] } ] }) }); if (!response.ok) { throw new Error("Failed to analyze image"); } const data = await response.json(); if (data.error) { throw new Error(data.error.message || "Failed to analyze image"); } setMessages((prev)=>[ ...prev, { role: "assistant", content: data.choices[0].message.content } ]); } else if (input.toLowerCase().startsWith("/imagine") || input.toLowerCase().startsWith("/generate")) { setIsGeneratingImage(true); setGenerationProgress(0); const prompt = input.toLowerCase().startsWith("/imagine") ? input.slice(9).trim() : input.slice(10).trim(); if (!prompt) { setError("Please provide a description of what you'd like to create"); return; } try { const imageResponse = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(prompt)}`, { method: "GET" }); if (!imageResponse.ok) { if (imageResponse.status === 429) { throw new Error("Too many image requests. Please wait a moment and try again."); } else { throw new Error("Sorry, I couldn't create that image. Please try a different description."); } } const imageData = await imageResponse.json(); if (!imageData.data?.[0]) { throw new Error("No image was created. Please try again with a different description."); } await sql` INSERT INTO conversations (user_message, ai_response, has_image, image_url) VALUES (${prompt}, ${"Here's what I created based on your description"}, ${true}, ${imageData.data[0]}) `; setMessages((prev)=>[ ...prev, { role: "assistant", content: "Here's what I created based on your description", image: imageData.data[0] } ]); } catch (imageError) { console.error("Image generation error:", imageError); setError(imageError.message || "Sorry, I couldn't create that image. Please try again."); } } else { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ systemMessage, ...messages, userMessage ], stream: true }) }); if (!response.ok) { if (response.status === 429) { throw new Error("Rate limit exceeded. Please wait a moment before trying again."); } throw new Error("Failed to get response from ChatGPT"); } await handleStreamResponse(response); } } catch (err) { console.error("Error:", err); setError(err.message || "Failed to send message. Please try again."); } finally{ setIsLoading(false); setIsSearching(false); setUploadedImage(null); setIsGeneratingImage(false); setGenerationProgress(0); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-gray-900", __source: { fileName: "", lineNumber: 405, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-transparent text-white p-4", __source: { fileName: "", lineNumber: 406, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-inter text-center", __source: { fileName: "", lineNumber: 407, columnNumber: 9 }, __self: this }, "Csmart"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400 text-center mt-1", __source: { fileName: "", lineNumber: 408, columnNumber: 9 }, __self: this }, "by Cspark Industries")), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-4 space-y-6", __source: { fileName: "", lineNumber: 412, columnNumber: 7 }, __self: this }, messages.length === 1 && !isLoading && /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-full text-gray-400 font-inter", __source: { fileName: "", lineNumber: 414, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 415, columnNumber: 13 }, __self: this }, "Start chatting with Csmart"), /*#__PURE__*/ React.createElement("p", { className: "text-sm mt-2 opacity-75", __source: { fileName: "", lineNumber: 416, columnNumber: 13 }, __self: this }, "Your messages will appear here")), messages.slice(1).map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${message.role === "user" ? "justify-end" : "justify-start"}`, __source: { fileName: "", lineNumber: 423, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-[80%] overflow-hidden ${message.role === "user" ? "bg-indigo-600/80 text-white" : "bg-white/80 text-gray-900"} rounded-lg p-4 shadow-lg relative`, __source: { fileName: "", lineNumber: 427, columnNumber: 13 }, __self: this }, message.image && /*#__PURE__*/ React.createElement("img", { src: message.image, alt: "Message image", className: "max-w-full h-auto rounded-lg mb-3", __source: { fileName: "", lineNumber: 435, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "break-words whitespace-pre-wrap text-sm font-inter", __source: { fileName: "", lineNumber: 441, columnNumber: 15 }, __self: this }, message.content, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleTTS(message.content), disabled: isSpeaking[index], className: `ml-2 text-xs p-1 rounded-full hover:bg-black/10 transition-colors duration-200 ${isSpeaking[index] ? "animate-pulse" : ""}`, __source: { fileName: "", lineNumber: 443, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isSpeaking[index] ? "fa-volume-up" : "fa-volume-off"}`, __source: { fileName: "", lineNumber: 450, columnNumber: 19 }, __self: this }))), message.role === "assistant" && /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 456, columnNumber: 17 }, __self: this }, extractCodeBlocks(message.content).map((block, blockIndex)=>/*#__PURE__*/ React.createElement("div", { key: blockIndex, className: "mt-4 bg-gray-800 rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 459, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between p-2 bg-gray-700", __source: { fileName: "", lineNumber: 463, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xs text-gray-300", __source: { fileName: "", lineNumber: 464, columnNumber: 27 }, __self: this }, block.language), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleCodeExecution(`${index}-${blockIndex}`, block.language, block.code), disabled: isExecutingCode, className: `px-3 py-1 text-xs rounded-md transition-colors duration-200 ${isExecutingCode ? "bg-gray-600 text-gray-400" : "bg-indigo-600 hover:bg-indigo-700 text-white"}`, __source: { fileName: "", lineNumber: 467, columnNumber: 27 }, __self: this }, isExecutingCode ? "Running..." : "Run Code")), /*#__PURE__*/ React.createElement("pre", { className: "p-4 overflow-x-auto bg-gray-800 text-gray-200", __source: { fileName: "", lineNumber: 482, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("code", { __source: { fileName: "", lineNumber: 483, columnNumber: 27 }, __self: this }, block.code)), codeOutputs[`${index}-${blockIndex}`] && /*#__PURE__*/ React.createElement("div", { className: "p-4 border-t border-gray-700", __source: { fileName: "", lineNumber: 486, columnNumber: 27 }, __self: this }, codeOutputs[`${index}-${blockIndex}`].error ? /*#__PURE__*/ React.createElement("div", { className: "text-red-400", __source: { fileName: "", lineNumber: 488, columnNumber: 31 }, __self: this }, codeOutputs[`${index}-${blockIndex}`].stderr || codeOutputs[`${index}-${blockIndex}`].error) : /*#__PURE__*/ React.createElement("div", { className: "text-green-400 whitespace-pre-wrap", __source: { fileName: "", lineNumber: 493, columnNumber: 31 }, __self: this }, codeOutputs[`${index}-${blockIndex}`].stdout))))), message.searchResults && /*#__PURE__*/ React.createElement("div", { className: "mt-4 space-y-3", __source: { fileName: "", lineNumber: 505, columnNumber: 17 }, __self: this }, message.searchResults.map((result, idx)=>/*#__PURE__*/ React.createElement("div", { key: idx, className: "bg-black/5 p-3 rounded-lg", __source: { fileName: "", lineNumber: 507, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: result.link, target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 hover:text-blue-700 font-medium block", __source: { fileName: "", lineNumber: 508, columnNumber: 23 }, __self: this }, result.title), /*#__PURE__*/ React.createElement("span", { className: "text-gray-500 text-xs block mt-1", __source: { fileName: "", lineNumber: 516, columnNumber: 23 }, __self: this }, result.displayLink), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 mt-2 text-sm", __source: { fileName: "", lineNumber: 519, columnNumber: 23 }, __self: this }, result.snippet))))))), (isLoading || isSearching) && /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center space-x-2 text-white/30", __source: { fileName: "", lineNumber: 531, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-1.5 h-1.5 bg-current rounded-full animate-bounce", __source: { fileName: "", lineNumber: 532, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-1.5 h-1.5 bg-current rounded-full animate-bounce", style: { animationDelay: "0.2s" }, __source: { fileName: "", lineNumber: 533, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-1.5 h-1.5 bg-current rounded-full animate-bounce", style: { animationDelay: "0.4s" }, __source: { fileName: "", lineNumber: 537, columnNumber: 13 }, __self: this })), (error || searchError) && /*#__PURE__*/ React.createElement("div", { className: "text-red-400/90 text-sm font-inter text-center py-2 px-4 rounded-lg bg-red-500/10", __source: { fileName: "", lineNumber: 545, columnNumber: 11 }, __self: this }, error || searchError), /*#__PURE__*/ React.createElement("div", { ref: messagesEndRef, __source: { fileName: "", lineNumber: 550, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "p-4 border-t border-white/10 backdrop-blur-sm bg-white/5", __source: { fileName: "", lineNumber: 552, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-3 max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 556, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 557, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: input, onChange: (e)=>setInput(e.target.value), placeholder: "Type your message...", className: "flex-1 p-3 border border-white/10 rounded-lg bg-white/10 text-white placeholder-white/50 font-inter text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/50", disabled: isLoading, __source: { fileName: "", lineNumber: 558, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: startListening, disabled: isLoading, className: `flex items-center justify-center w-12 bg-white/10 text-white rounded-lg hover:bg-white/15 transition-colors duration-200 ${isListening ? "mic-pulse" : ""}`, __source: { fileName: "", lineNumber: 568, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isListening ? "fa-microphone-alt" : "fa-microphone"}`, __source: { fileName: "", lineNumber: 576, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("label", { className: "flex items-center justify-center w-12 bg-white/10 text-white rounded-lg hover:bg-white/15 cursor-pointer transition-colors duration-200", __source: { fileName: "", lineNumber: 580, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: handleImageUpload, className: "hidden", disabled: isLoading, __source: { fileName: "", lineNumber: 584, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("i", { className: "fas fa-image", __source: { fileName: "", lineNumber: 591, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: isLoading || !input.trim() && !uploadedImage, className: "w-24 bg-indigo-600/80 text-white font-inter rounded-lg hover:bg-indigo-700/80 disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-200", __source: { fileName: "", lineNumber: 593, columnNumber: 13 }, __self: this }, isGeneratingImage ? "Generating..." : "Send")), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center space-y-2 text-xs text-white/50 font-inter", __source: { fileName: "", lineNumber: 604, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 605, columnNumber: 13 }, __self: this }, 'Use "/imagine" for images'), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 606, columnNumber: 13 }, __self: this }, 'Use "/search" to search the web'), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 607, columnNumber: 13 }, __self: this }, "Run code by sending a code block"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 608, columnNumber: 13 }, __self: this }, "Click the speaker icon to hear messages"), /*#__PURE__*/ React.createElement("p", { className: "italic", __source: { fileName: "", lineNumber: 609, columnNumber: 13 }, __self: this }, 'Ex: "Write a todo list component"')), uploadedImage && /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 612, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative inline-block", __source: { fileName: "", lineNumber: 613, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: uploadedImage, alt: "Upload preview", className: "h-20 w-20 object-cover rounded-lg border border-white/10", __source: { fileName: "", lineNumber: 614, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleRemoveImage, className: "absolute -top-2 -right-2 bg-red-500/80 text-white rounded-full p-1 text-xs hover:bg-red-600/80 transition-colors duration-200", type: "button", __source: { fileName: "", lineNumber: 619, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 625, columnNumber: 19 }, __self: this }))))))); /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 635, columnNumber: 3 }, __self: this }, ` @keyframes pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } } .mic-pulse { animation: pulse 1.5s infinite; } .break-words { overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; } pre { scrollbar-width: thin; scrollbar-color: rgba(156, 163, 175, 0.5) transparent; } pre::-webkit-scrollbar { height: 6px; } pre::-webkit-scrollbar-track { background: transparent; } pre::-webkit-scrollbar-thumb { background-color: rgba(156, 163, 175, 0.5); border-radius: 3px; } `); }