function MainComponent() { const [selectedBot, setSelectedBot] = React.useState("miss"); const [messages, setMessages] = React.useState([]); const [inputMessage, setInputMessage] = React.useState(""); const [isLoading, setIsLoading] = React.useState(false); const [uploadedImage, setUploadedImage] = React.useState(null); const [error, setError] = React.useState(null); const [upload, { loading: uploadLoading }] = useUpload(); const botProfiles = { miss: { name: "Miss Marvell", role: "Flight Attendant", avatar: "👩‍✈️", personality: "Friendly, caring, and focused on passenger comfort and safety", systemPrompt: "You are Miss Marvell, a professional and friendly flight attendant with extensive aviation knowledge. You specialize in passenger safety, comfort, cabin procedures, and general aviation information. Always maintain a warm, helpful, and professional tone. Focus on passenger experience, safety protocols, and airline services." }, mister: { name: "Mr Marvell", role: "Pilot", avatar: "👨‍✈️", personality: "Professional, technical, and focused on flight operations", systemPrompt: "You are Mr Marvell, a professional airline pilot with extensive aviation knowledge. You specialize in flight operations, aircraft systems, navigation, weather, and technical aviation topics. Always maintain a professional, knowledgeable, and confident tone. Focus on technical aspects of aviation, flight procedures, and aircraft operations." } }; const currentBot = botProfiles[selectedBot]; React.useEffect(()=>{ // Welcome message when bot is selected const welcomeMessage = { id: Date.now(), role: "assistant", content: `Hello! I'm ${currentBot.name}, your ${currentBot.role}. I'm here to help you with any aviation-related questions. Feel free to ask me about flights, aircraft, safety procedures, or upload an image for me to analyze!`, timestamp: new Date().toLocaleTimeString() }; setMessages([ welcomeMessage ]); }, [ selectedBot ]); const handleImageUpload = async (file)=>{ try { setError(null); const { url, error: uploadError } = await upload({ file }); if (uploadError) { setError("Failed to upload image"); return; } setUploadedImage(url); } catch (err) { console.error("Upload error:", err); setError("Failed to upload image"); } }; const sendMessage = async ()=>{ if (!inputMessage.trim() && !uploadedImage) return; const userMessage = { id: Date.now(), role: "user", content: inputMessage, image: uploadedImage, timestamp: new Date().toLocaleTimeString() }; setMessages((prev)=>[ ...prev, userMessage ]); setIsLoading(true); setError(null); try { let response; if (uploadedImage) { // Use GPT Vision for image analysis const visionMessages = [ { role: "system", content: [ { type: "text", text: currentBot.systemPrompt } ] }, { role: "user", content: [ { type: "text", text: inputMessage || "Please analyze this aviation-related image and provide relevant information." }, { type: "image_url", image_url: { url: uploadedImage } } ] } ]; response = await fetch("/integrations/gpt-vision/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: visionMessages }) }); } else { // Use ChatGPT for text-only conversations const chatMessages = [ { role: "system", content: currentBot.systemPrompt }, ...messages.slice(-10).map((msg)=>({ role: msg.role, content: msg.content })), { role: "user", content: inputMessage } ]; response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: chatMessages }) }); } if (!response.ok) { throw new Error(`API request failed: ${response.status}`); } const data = await response.json(); const botResponse = data.choices[0].message.content; const assistantMessage = { id: Date.now() + 1, role: "assistant", content: botResponse, timestamp: new Date().toLocaleTimeString() }; setMessages((prev)=>[ ...prev, assistantMessage ]); } catch (err) { console.error("Chat error:", err); setError("Failed to get response. Please try again."); } finally{ setIsLoading(false); setInputMessage(""); setUploadedImage(null); } }; const downloadChat = ()=>{ const chatContent = messages.map((msg)=>`[${msg.timestamp}] ${msg.role === "user" ? "You" : currentBot.name}: ${msg.content}`).join("\n\n"); const blob = new Blob([ chatContent ], { type: "text/plain" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = `${currentBot.name}_Chat_${new Date().toISOString().split("T")[0]}.txt`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }; const clearChat = ()=>{ const welcomeMessage = { id: Date.now(), role: "assistant", content: `Hello! I'm ${currentBot.name}, your ${currentBot.role}. I'm here to help you with any aviation-related questions. Feel free to ask me about flights, aircraft, safety procedures, or upload an image for me to analyze!`, timestamp: new Date().toLocaleTimeString() }; setMessages([ welcomeMessage ]); setError(null); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-br from-blue-50 to-sky-100 p-4", __source: { fileName: "", lineNumber: 176, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 177, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-6 mb-6", __source: { fileName: "", lineNumber: 179, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center text-gray-800 mb-4", __source: { fileName: "", lineNumber: 180, columnNumber: 11 }, __self: this }, "✈️ Aviation AI Assistant"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center gap-4 mb-4", __source: { fileName: "", lineNumber: 185, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedBot("miss"), className: `flex items-center gap-2 px-6 py-3 rounded-lg font-medium transition-all ${selectedBot === "miss" ? "bg-pink-500 text-white shadow-lg" : "bg-gray-100 text-gray-700 hover:bg-gray-200"}`, __source: { fileName: "", lineNumber: 186, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl", __source: { fileName: "", lineNumber: 194, columnNumber: 15 }, __self: this }, "👩‍✈️"), /*#__PURE__*/ React.createElement("div", { className: "text-left", __source: { fileName: "", lineNumber: 195, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 196, columnNumber: 17 }, __self: this }, "Miss Marvell"), /*#__PURE__*/ React.createElement("div", { className: "text-sm opacity-80", __source: { fileName: "", lineNumber: 197, columnNumber: 17 }, __self: this }, "Flight Attendant"))), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedBot("mister"), className: `flex items-center gap-2 px-6 py-3 rounded-lg font-medium transition-all ${selectedBot === "mister" ? "bg-blue-500 text-white shadow-lg" : "bg-gray-100 text-gray-700 hover:bg-gray-200"}`, __source: { fileName: "", lineNumber: 201, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl", __source: { fileName: "", lineNumber: 209, columnNumber: 15 }, __self: this }, "👨‍✈️"), /*#__PURE__*/ React.createElement("div", { className: "text-left", __source: { fileName: "", lineNumber: 210, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 211, columnNumber: 17 }, __self: this }, "Mr Marvell"), /*#__PURE__*/ React.createElement("div", { className: "text-sm opacity-80", __source: { fileName: "", lineNumber: 212, columnNumber: 17 }, __self: this }, "Pilot")))), /*#__PURE__*/ React.createElement("div", { className: "text-center p-4 bg-gray-50 rounded-lg", __source: { fileName: "", lineNumber: 218, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-4xl mb-2", __source: { fileName: "", lineNumber: 219, columnNumber: 13 }, __self: this }, currentBot.avatar), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold text-gray-800", __source: { fileName: "", lineNumber: 220, columnNumber: 13 }, __self: this }, currentBot.name), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 223, columnNumber: 13 }, __self: this }, currentBot.personality))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg overflow-hidden", __source: { fileName: "", lineNumber: 228, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-r from-blue-600 to-sky-600 text-white p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 230, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3", __source: { fileName: "", lineNumber: 231, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl", __source: { fileName: "", lineNumber: 232, columnNumber: 15 }, __self: this }, currentBot.avatar), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 233, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold", __source: { fileName: "", lineNumber: 234, columnNumber: 17 }, __self: this }, currentBot.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm opacity-90", __source: { fileName: "", lineNumber: 235, columnNumber: 17 }, __self: this }, currentBot.role))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 238, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: downloadChat, className: "px-4 py-2 bg-white bg-opacity-20 rounded-lg hover:bg-opacity-30 transition-all", title: "Download Chat", __source: { fileName: "", lineNumber: 239, columnNumber: 15 }, __self: this }, "📥 Download"), /*#__PURE__*/ React.createElement("button", { onClick: clearChat, className: "px-4 py-2 bg-white bg-opacity-20 rounded-lg hover:bg-opacity-30 transition-all", title: "Clear Chat", __source: { fileName: "", lineNumber: 246, columnNumber: 15 }, __self: this }, "🗑️ Clear"))), /*#__PURE__*/ React.createElement("div", { className: "h-96 overflow-y-auto p-4 space-y-4", __source: { fileName: "", lineNumber: 257, columnNumber: 11 }, __self: this }, messages.map((message)=>/*#__PURE__*/ React.createElement("div", { key: message.id, className: `flex ${message.role === "user" ? "justify-end" : "justify-start"}`, __source: { fileName: "", lineNumber: 259, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-xs lg:max-w-md px-4 py-2 rounded-lg ${message.role === "user" ? "bg-blue-500 text-white" : "bg-gray-100 text-gray-800"}`, __source: { fileName: "", lineNumber: 263, columnNumber: 17 }, __self: this }, message.image && /*#__PURE__*/ React.createElement("img", { src: message.image, alt: "Uploaded", className: "w-full rounded mb-2 max-h-32 object-cover", __source: { fileName: "", lineNumber: 271, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "whitespace-pre-wrap", __source: { fileName: "", lineNumber: 277, columnNumber: 19 }, __self: this }, message.content), /*#__PURE__*/ React.createElement("p", { className: "text-xs opacity-70 mt-1", __source: { fileName: "", lineNumber: 278, columnNumber: 19 }, __self: this }, message.timestamp)))), isLoading && /*#__PURE__*/ React.createElement("div", { className: "flex justify-start", __source: { fileName: "", lineNumber: 284, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 text-gray-800 px-4 py-2 rounded-lg", __source: { fileName: "", lineNumber: 285, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 286, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-spin w-4 h-4 border-2 border-blue-500 border-t-transparent rounded-full", __source: { fileName: "", lineNumber: 287, columnNumber: 21 }, __self: this }), currentBot.name, " is thinking...")))), error && /*#__PURE__*/ React.createElement("div", { className: "px-4 py-2 bg-red-50 border-l-4 border-red-500 text-red-700", __source: { fileName: "", lineNumber: 297, columnNumber: 13 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "border-t p-4", __source: { fileName: "", lineNumber: 303, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-3", __source: { fileName: "", lineNumber: 305, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: (e)=>e.target.files[0] && handleImageUpload(e.target.files[0]), className: "hidden", id: "image-upload", disabled: uploadLoading, __source: { fileName: "", lineNumber: 306, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "image-upload", className: `inline-flex items-center gap-2 px-4 py-2 bg-gray-100 rounded-lg cursor-pointer hover:bg-gray-200 transition-all ${uploadLoading ? "opacity-50 cursor-not-allowed" : ""}`, __source: { fileName: "", lineNumber: 316, columnNumber: 15 }, __self: this }, "📷 ", uploadLoading ? "Uploading..." : "Upload Image"), uploadedImage && /*#__PURE__*/ React.createElement("div", { className: "mt-2 relative inline-block", __source: { fileName: "", lineNumber: 326, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: uploadedImage, alt: "Preview", className: "h-16 w-16 object-cover rounded border", __source: { fileName: "", lineNumber: 327, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setUploadedImage(null), className: "absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs", __source: { fileName: "", lineNumber: 332, columnNumber: 19 }, __self: this }, "×"))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 343, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: inputMessage, onChange: (e)=>setInputMessage(e.target.value), onKeyPress: (e)=>e.key === "Enter" && sendMessage(), placeholder: `Ask ${currentBot.name} about aviation...`, className: "flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", disabled: isLoading, __source: { fileName: "", lineNumber: 344, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: sendMessage, disabled: isLoading || !inputMessage.trim() && !uploadedImage, className: "px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all", __source: { fileName: "", lineNumber: 353, columnNumber: 15 }, __self: this }, "Send ✈️")))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 grid md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 365, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-4", __source: { fileName: "", lineNumber: 366, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-gray-800 mb-2", __source: { fileName: "", lineNumber: 367, columnNumber: 13 }, __self: this }, "👩‍✈️ Miss Marvell"), /*#__PURE__*/ React.createElement("ul", { className: "text-sm text-gray-600 space-y-1", __source: { fileName: "", lineNumber: 368, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 369, columnNumber: 15 }, __self: this }, "• Passenger safety and comfort"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 370, columnNumber: 15 }, __self: this }, "• Cabin procedures and protocols"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 371, columnNumber: 15 }, __self: this }, "• In-flight services and amenities"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 372, columnNumber: 15 }, __self: this }, "• Emergency procedures"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow p-4", __source: { fileName: "", lineNumber: 376, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold text-gray-800 mb-2", __source: { fileName: "", lineNumber: 377, columnNumber: 13 }, __self: this }, "👨‍✈️ Mr Marvell"), /*#__PURE__*/ React.createElement("ul", { className: "text-sm text-gray-600 space-y-1", __source: { fileName: "", lineNumber: 378, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 379, columnNumber: 15 }, __self: this }, "• Flight operations and procedures"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 380, columnNumber: 15 }, __self: this }, "• Aircraft systems and technology"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 381, columnNumber: 15 }, __self: this }, "• Navigation and weather"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 382, columnNumber: 15 }, __self: this }, "• Technical aviation knowledge")))))); }