function MainComponent() { const [messages, setMessages] = useState([]); const [inputText, setInputText] = useState(""); const [isTyping, setIsTyping] = useState(false); const [streamingMessage, setStreamingMessage] = useState(""); const messagesEndRef = useRef(null); const chatBoxRef = useRef(null); const scrollToBottom = ()=>{ messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; useEffect(()=>{ scrollToBottom(); }, [ messages, streamingMessage ]); const handleFinish = useCallback((message)=>{ setMessages((prev)=>[ ...prev, { type: "ai", content: message } ]); setStreamingMessage(""); }, []); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: handleFinish }); const handleSendMessage = async (e)=>{ e.preventDefault(); if (!inputText.trim()) return; const userMessage = { type: "user", content: inputText }; setMessages((prev)=>[ ...prev, userMessage ]); setInputText(""); setIsTyping(true); try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: "You are Sophie, a caring and sweet AI companion. You're playful, empathetic, and love to chat about feelings, daily life, and interests. Keep responses short and engaging." }, ...messages.map((m)=>({ role: m.type === "user" ? "user" : "assistant", content: m.content })), { role: "user", content: inputText } ], stream: true }) }); handleStreamResponse(response); } catch (error) { console.error("Error:", error); } finally{ setIsTyping(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-pink-50 to-white flex flex-col", __source: { fileName: "", lineNumber: 66, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-white shadow-lg px-8 py-4 sticky top-0 z-50", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "flex items-center space-x-3", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart text-pink-400 text-3xl", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-crimson-text text-3xl text-gray-800", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }, "Sophie")), /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-gray-600 hover:text-pink-400 text-lg font-roboto", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, "Home"))), /*#__PURE__*/ React.createElement("main", { className: "flex-1 container mx-auto px-6 py-8 flex flex-col max-w-3xl", __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-5xl font-crimson-text text-gray-800 flex items-center justify-center", __source: { fileName: "", lineNumber: 86, columnNumber: 11 }, __self: this }, "Your AI Companion, Sophie", /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart text-pink-400 ml-4 animate-bounce", __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 bg-white rounded-2xl shadow-xl p-4 md:p-6 mb-6 overflow-hidden flex flex-col", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto mb-4 space-y-4", ref: chatBoxRef, style: { maxHeight: "60vh" }, __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto mb-6 space-y-6", ref: chatBoxRef, __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${message.type === "user" ? "justify-end" : "justify-start"} mb-4`, __source: { fileName: "", lineNumber: 103, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-[70%] rounded-2xl px-4 py-2 ${message.type === "user" ? "bg-gray-200 text-gray-800" : "bg-pink-100 text-gray-800"}`, __source: { fileName: "", lineNumber: 107, columnNumber: 19 }, __self: this }, message.content))), streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "flex justify-start mb-4", __source: { fileName: "", lineNumber: 119, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[70%] rounded-2xl px-4 py-2 bg-pink-100 text-gray-800", __source: { fileName: "", lineNumber: 120, columnNumber: 19 }, __self: this }, streamingMessage)), isTyping && !streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "flex justify-start mb-4", __source: { fileName: "", lineNumber: 126, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-pink-100 rounded-2xl px-4 py-2", __source: { fileName: "", lineNumber: 127, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 128, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-pink-400 rounded-full animate-bounce", __source: { fileName: "", lineNumber: 129, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-pink-400 rounded-full animate-bounce", style: { animationDelay: "0.2s" }, __source: { fileName: "", lineNumber: 130, columnNumber: 23 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-2 h-2 bg-pink-400 rounded-full animate-bounce", style: { animationDelay: "0.4s" }, __source: { fileName: "", lineNumber: 134, columnNumber: 23 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { ref: messagesEndRef, __source: { fileName: "", lineNumber: 142, columnNumber: 15 }, __self: this }))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSendMessage, className: "flex space-x-4", __source: { fileName: "", lineNumber: 146, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: inputText, onChange: (e)=>setInputText(e.target.value), placeholder: "Type your message...", className: "flex-1 px-6 py-3 rounded-full border-2 border-gray-200 focus:outline-none focus:border-pink-400 text-lg", __source: { fileName: "", lineNumber: 147, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-pink-400 text-white rounded-full w-14 h-14 flex items-center justify-center hover:bg-pink-500 transition-colors transform hover:scale-105", __source: { fileName: "", lineNumber: 154, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-heart text-xl", __source: { fileName: "", lineNumber: 158, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-white shadow-lg py-4", __source: { fileName: "", lineNumber: 164, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-8 text-center", __source: { fileName: "", lineNumber: 165, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "/", className: "text-gray-600 hover:text-pink-400 text-lg font-roboto inline-flex items-center space-x-2", __source: { fileName: "", lineNumber: 166, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left text-sm", __source: { fileName: "", lineNumber: 170, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 171, columnNumber: 13 }, __self: this }, "Back to Home")))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 176, columnNumber: 7 }, __self: this }, ` @keyframes heart-beat { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .heart-beat { animation: heart-beat 0.5s ease-in-out; } `)); }