function MainComponent() { const [selectedCrew, setSelectedCrew] = useState("female"); // 'female' or 'male' const [messages, setMessages] = useState([]); const [inputMessage, setInputMessage] = useState(""); const [streamingMessage, setStreamingMessage] = useState(""); const [isLoading, setIsLoading] = useState(false); const [generatedImage, setGeneratedImage] = useState(null); const [imageLoading, setImageLoading] = useState(false); const crewInfo = { female: { name: "Miss Marvell", title: "Flight Attendant", avatar: "👩‍✈️", personality: "friendly, professional, and caring flight attendant" }, male: { name: "Mr Marvell", title: "Pilot", avatar: "👨‍✈️", personality: "experienced, knowledgeable, and confident pilot" } }; const currentCrew = crewInfo[selectedCrew]; const handleFinish = useCallback((message)=>{ setMessages((prev)=>[ ...prev, { role: "assistant", content: message, crew: selectedCrew } ]); setStreamingMessage(""); setIsLoading(false); }, [ selectedCrew ]); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: handleFinish }); const sendMessage = async ()=>{ if (!inputMessage.trim()) return; const userMessage = { role: "user", content: inputMessage }; setMessages((prev)=>[ ...prev, userMessage ]); setInputMessage(""); setIsLoading(true); const systemPrompt = `You are ${currentCrew.name}, a ${currentCrew.personality}. You specialize in answering questions about airplanes, air flight, aviation safety, flight procedures, aircraft systems, and everything related to commercial aviation. Always respond in character as a professional ${currentCrew.title.toLowerCase()}. Be helpful, informative, and maintain a professional yet friendly tone. If asked about topics outside aviation, politely redirect the conversation back to flight-related topics.`; try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: systemPrompt }, ...messages.filter((msg)=>msg.role !== "system"), userMessage ], stream: true }) }); handleStreamResponse(response); } catch (error) { console.error("Error sending message:", error); setIsLoading(false); setMessages((prev)=>[ ...prev, { role: "assistant", content: "Sorry, I encountered an error. Please try again.", crew: selectedCrew } ]); } }; const generateImage = async ()=>{ if (!inputMessage.trim()) return; setImageLoading(true); const imagePrompt = `Professional aviation illustration: ${inputMessage}. High quality, realistic, aviation-themed image suitable for flight training or educational purposes.`; try { const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(imagePrompt)}`, { method: "GET" }); if (!response.ok) { throw new Error("Failed to generate image"); } const data = await response.json(); setGeneratedImage(data.data[0]); } catch (error) { console.error("Error generating image:", error); alert("Failed to generate image. Please try again."); } finally{ setImageLoading(false); } }; const downloadContent = (content, filename, type = "text")=>{ if (type === "text") { const blob = new Blob([ content ], { type: "text/plain" }); const url = URL.createObjectURL(blob); const a = document.createElement("a"); a.href = url; a.download = filename; a.click(); URL.revokeObjectURL(url); } else if (type === "image" && content) { const a = document.createElement("a"); a.href = content; a.download = filename; a.target = "_blank"; a.click(); } }; const downloadChatHistory = ()=>{ const chatText = messages.map((msg)=>{ const speaker = msg.role === "user" ? "You" : crewInfo[msg.crew]?.name || "Assistant"; return `${speaker}: ${msg.content}`; }).join("\n\n"); downloadContent(chatText, `flight-chat-${Date.now()}.txt`, "text"); }; return /*#__PURE__*/ React.createElement("div", { style: { minHeight: "100vh", backgroundColor: "#f0f8ff", fontFamily: "Arial, sans-serif" }, __source: { fileName: "", lineNumber: 142, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { background: "linear-gradient(135deg, #1e3c72 0%, #2a5298 100%)", color: "white", padding: "20px", textAlign: "center" }, __source: { fileName: "", lineNumber: 150, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { style: { margin: "0 0 10px 0", fontSize: "28px", fontWeight: "bold" }, __source: { fileName: "", lineNumber: 158, columnNumber: 9 }, __self: this }, "✈️ Aviation AI Assistant"), /*#__PURE__*/ React.createElement("p", { style: { margin: 0, opacity: 0.9 }, __source: { fileName: "", lineNumber: 163, columnNumber: 9 }, __self: this }, "Your professional flight crew AI companions for all aviation questions")), /*#__PURE__*/ React.createElement("div", { style: { maxWidth: "1200px", margin: "0 auto", padding: "20px" }, __source: { fileName: "", lineNumber: 168, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { backgroundColor: "white", borderRadius: "12px", padding: "20px", marginBottom: "20px", boxShadow: "0 2px 10px rgba(0,0,0,0.1)" }, __source: { fileName: "", lineNumber: 170, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { style: { margin: "0 0 15px 0", color: "#1e3c72" }, __source: { fileName: "", lineNumber: 179, columnNumber: 11 }, __self: this }, "Choose Your Flight Crew Assistant"), /*#__PURE__*/ React.createElement("div", { style: { display: "flex", gap: "15px", flexWrap: "wrap" }, __source: { fileName: "", lineNumber: 182, columnNumber: 11 }, __self: this }, Object.entries(crewInfo).map(([key, crew])=>/*#__PURE__*/ React.createElement("button", { key: key, onClick: ()=>setSelectedCrew(key), style: { padding: "15px 25px", border: selectedCrew === key ? "2px solid #2a5298" : "2px solid #ddd", borderRadius: "8px", backgroundColor: selectedCrew === key ? "#e8f2ff" : "white", cursor: "pointer", display: "flex", alignItems: "center", gap: "10px", fontSize: "16px", transition: "all 0.3s ease" }, __source: { fileName: "", lineNumber: 184, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { style: { fontSize: "24px" }, __source: { fileName: "", lineNumber: 203, columnNumber: 17 }, __self: this }, crew.avatar), /*#__PURE__*/ React.createElement("div", { style: { textAlign: "left" }, __source: { fileName: "", lineNumber: 204, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { fontWeight: "bold", color: "#1e3c72" }, __source: { fileName: "", lineNumber: 205, columnNumber: 19 }, __self: this }, crew.name), /*#__PURE__*/ React.createElement("div", { style: { fontSize: "14px", color: "#666" }, __source: { fileName: "", lineNumber: 208, columnNumber: 19 }, __self: this }, crew.title)))))), /*#__PURE__*/ React.createElement("div", { style: { display: "flex", gap: "20px", flexWrap: "wrap" }, __source: { fileName: "", lineNumber: 217, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { flex: "1", minWidth: "300px", backgroundColor: "white", borderRadius: "12px", boxShadow: "0 2px 10px rgba(0,0,0,0.1)", display: "flex", flexDirection: "column", height: "600px" }, __source: { fileName: "", lineNumber: 219, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { padding: "20px", borderBottom: "1px solid #eee", display: "flex", alignItems: "center", gap: "10px" }, __source: { fileName: "", lineNumber: 232, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { style: { fontSize: "24px" }, __source: { fileName: "", lineNumber: 241, columnNumber: 15 }, __self: this }, currentCrew.avatar), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 242, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { style: { margin: 0, color: "#1e3c72" }, __source: { fileName: "", lineNumber: 243, columnNumber: 17 }, __self: this }, currentCrew.name), /*#__PURE__*/ React.createElement("p", { style: { margin: 0, fontSize: "14px", color: "#666" }, __source: { fileName: "", lineNumber: 246, columnNumber: 17 }, __self: this }, currentCrew.title)), /*#__PURE__*/ React.createElement("button", { onClick: downloadChatHistory, style: { marginLeft: "auto", padding: "8px 12px", backgroundColor: "#2a5298", color: "white", border: "none", borderRadius: "6px", cursor: "pointer", fontSize: "12px" }, __source: { fileName: "", lineNumber: 250, columnNumber: 15 }, __self: this }, "📥 Download Chat")), /*#__PURE__*/ React.createElement("div", { style: { flex: 1, padding: "20px", overflowY: "auto", display: "flex", flexDirection: "column", gap: "15px" }, __source: { fileName: "", lineNumber: 268, columnNumber: 13 }, __self: this }, messages.length === 0 && /*#__PURE__*/ React.createElement("div", { style: { textAlign: "center", color: "#666", padding: "40px 20px", fontStyle: "italic" }, __source: { fileName: "", lineNumber: 279, columnNumber: 17 }, __self: this }, "👋 Hello! I'm ", currentCrew.name, ", your", " ", currentCrew.title.toLowerCase(), ". Ask me anything about aviation, flight procedures, aircraft, or air travel!"), messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, style: { display: "flex", justifyContent: message.role === "user" ? "flex-end" : "flex-start", marginBottom: "10px" }, __source: { fileName: "", lineNumber: 294, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { maxWidth: "80%", padding: "12px 16px", borderRadius: "18px", backgroundColor: message.role === "user" ? "#2a5298" : "#f1f3f5", color: message.role === "user" ? "white" : "#333", wordWrap: "break-word" }, __source: { fileName: "", lineNumber: 303, columnNumber: 19 }, __self: this }, message.content))), streamingMessage && /*#__PURE__*/ React.createElement("div", { style: { display: "flex", justifyContent: "flex-start" }, __source: { fileName: "", lineNumber: 320, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { maxWidth: "80%", padding: "12px 16px", borderRadius: "18px", backgroundColor: "#f1f3f5", color: "#333", wordWrap: "break-word" }, __source: { fileName: "", lineNumber: 321, columnNumber: 19 }, __self: this }, streamingMessage))), /*#__PURE__*/ React.createElement("div", { style: { padding: "20px", borderTop: "1px solid #eee", display: "flex", gap: "10px" }, __source: { fileName: "", lineNumber: 338, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: inputMessage, onChange: (e)=>setInputMessage(e.target.value), onKeyPress: (e)=>e.key === "Enter" && !isLoading && sendMessage(), placeholder: "Ask about aviation, flight procedures, aircraft...", style: { flex: 1, padding: "12px", border: "1px solid #ddd", borderRadius: "8px", fontSize: "14px" }, disabled: isLoading, __source: { fileName: "", lineNumber: 346, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: sendMessage, disabled: isLoading || !inputMessage.trim(), style: { padding: "12px 20px", backgroundColor: isLoading ? "#ccc" : "#2a5298", color: "white", border: "none", borderRadius: "8px", cursor: isLoading ? "not-allowed" : "pointer", fontSize: "14px" }, __source: { fileName: "", lineNumber: 363, columnNumber: 15 }, __self: this }, isLoading ? "✈️" : "Send"))), /*#__PURE__*/ React.createElement("div", { style: { width: "350px", backgroundColor: "white", borderRadius: "12px", boxShadow: "0 2px 10px rgba(0,0,0,0.1)", padding: "20px" }, __source: { fileName: "", lineNumber: 382, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { style: { margin: "0 0 15px 0", color: "#1e3c72" }, __source: { fileName: "", lineNumber: 391, columnNumber: 13 }, __self: this }, "🎨 Generate Aviation Images"), /*#__PURE__*/ React.createElement("p", { style: { fontSize: "14px", color: "#666", marginBottom: "15px" }, __source: { fileName: "", lineNumber: 394, columnNumber: 13 }, __self: this }, "Describe an aviation scene and I'll create an image for you!"), /*#__PURE__*/ React.createElement("div", { style: { display: "flex", gap: "10px", marginBottom: "20px" }, __source: { fileName: "", lineNumber: 400, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: generateImage, disabled: imageLoading || !inputMessage.trim(), style: { flex: 1, padding: "12px", backgroundColor: imageLoading ? "#ccc" : "#28a745", color: "white", border: "none", borderRadius: "8px", cursor: imageLoading ? "not-allowed" : "pointer", fontSize: "14px" }, __source: { fileName: "", lineNumber: 401, columnNumber: 15 }, __self: this }, imageLoading ? "🎨 Creating..." : "🎨 Generate Image")), generatedImage && /*#__PURE__*/ React.createElement("div", { style: { marginTop: "20px" }, __source: { fileName: "", lineNumber: 420, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: generatedImage, alt: "Generated aviation image", style: { width: "100%", borderRadius: "8px", marginBottom: "10px" }, __source: { fileName: "", lineNumber: 421, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>downloadContent(generatedImage, `aviation-image-${Date.now()}.png`, "image"), style: { width: "100%", padding: "10px", backgroundColor: "#17a2b8", color: "white", border: "none", borderRadius: "6px", cursor: "pointer", fontSize: "14px" }, __source: { fileName: "", lineNumber: 430, columnNumber: 17 }, __self: this }, "📥 Download Image")), /*#__PURE__*/ React.createElement("div", { style: { marginTop: "30px" }, __source: { fileName: "", lineNumber: 455, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { style: { margin: "0 0 10px 0", color: "#1e3c72" }, __source: { fileName: "", lineNumber: 456, columnNumber: 15 }, __self: this }, "Quick Questions"), /*#__PURE__*/ React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, __source: { fileName: "", lineNumber: 459, columnNumber: 15 }, __self: this }, [ "How does an airplane fly?", "What happens during turbulence?", "How do pilots navigate?", "What are the safety procedures?" ].map((question, index)=>/*#__PURE__*/ React.createElement("button", { key: index, onClick: ()=>setInputMessage(question), style: { padding: "8px 12px", backgroundColor: "#f8f9fa", border: "1px solid #dee2e6", borderRadius: "6px", cursor: "pointer", fontSize: "12px", textAlign: "left", transition: "background-color 0.2s" }, onMouseOver: (e)=>e.target.style.backgroundColor = "#e9ecef", onMouseOut: (e)=>e.target.style.backgroundColor = "#f8f9fa", __source: { fileName: "", lineNumber: 468, columnNumber: 19 }, __self: this }, question)))))))); }