function MainComponent() { const [state, setState] = useState({ messages: [], sessionId: null, loading: false, error: null, typing: false, isListening: false, audioPlaying: false, selectedVoice: "female", mood: null, showMoodSelector: true, theme: "light", showEmojis: false, showImagePrompt: false, generatedImage: null, imageGenerating: false, imagePrompt: "", sessionStartTime: null, isRecording: false, audioBlob: null, transcribing: false, hasPaid: false, sessionData: null, moodHistory: [], interactionCount: 0, sessionGoals: [], lastTypingTime: null, hasSubscription: false, showSubscriptionPrompt: false }); const messagesEndRef = useRef(null); const inputRef = useRef(null); const audioRef = useRef(null); const mediaRecorderRef = useRef(null); const chunksRef = useRef([]); const userId = "demo-user"; const [newMessage, setNewMessage] = useState(""); const updateState = useCallback((updates)=>{ setState((prev)=>({ ...prev, ...updates })); }, []); const handleImageGeneration = async (prompt)=>{ updateState({ imageGenerating: true }); try { const updatedMessages = [ ...state.messages, { content: `Generate an image: ${prompt}`, is_ai: false } ]; updateState({ messages: updatedMessages }); const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(prompt)}`); if (!response.ok) throw new Error("Image generation failed"); const data = await response.json(); if (data.data?.[0]) { updateState({ generatedImage: data.data[0], messages: [ ...updatedMessages, { content: data.data[0], is_ai: true, type: "image", timestamp: new Date().toISOString(), status: "received" } ], interactionCount: state.interactionCount + 1 }); if (state.sessionId) { try { await fetch("/api/messages/send", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ sessionId: state.sessionId, message: data.data[0], userId, currentMood: state.mood, messageType: "image", metadata: { prompt, interactionCount: state.interactionCount + 1 } }) }); } catch (err) { console.error("Failed to save image to session:", err); } } } } catch (err) { console.error("Image generation failed:", err); updateState({ error: "Failed to generate image", messages: [ ...state.messages, { content: "I'm sorry, I couldn't generate that image. Please try a different description.", is_ai: true, timestamp: new Date().toISOString(), status: "error" } ] }); } finally{ updateState({ imageGenerating: false, showImagePrompt: false, imagePrompt: "" }); } }; const handleSubmit = async (e)=>{ e.preventDefault(); if (!newMessage.trim()) return; updateState({ loading: true }); const updatedMessages = [ ...state.messages, { content: newMessage, is_ai: false } ]; updateState({ messages: updatedMessages, newMessage: "" }); try { const response = await fetch("/api/send-message", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ sessionId: state.sessionId, message: newMessage, userId, currentMood: state.mood, messageType: "text" }) }); if (!response.ok) throw new Error("Message sending failed"); const data = await response.json(); updateState({ messages: [ ...updatedMessages, { content: data.aiMessage.content, is_ai: true, timestamp: new Date().toISOString(), status: "received" } ], interactionCount: state.interactionCount + 1 }); } catch (err) { console.error("Message sending failed:", err); updateState({ error: "Failed to send message", messages: [ ...updatedMessages, { content: "I'm sorry, I couldn't send your message. Please try again.", is_ai: true, timestamp: new Date().toISOString(), status: "error" } ] }); } finally{ updateState({ loading: false }); } }; const startRecording = ()=>{ if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { navigator.mediaDevices.getUserMedia({ audio: true }).then((stream)=>{ mediaRecorderRef.current = new MediaRecorder(stream); mediaRecorderRef.current.ondataavailable = (e)=>{ chunksRef.current.push(e.data); }; mediaRecorderRef.current.onstop = async ()=>{ const blob = new Blob(chunksRef.current, { type: "audio/wav" }); updateState({ audioBlob: blob, isRecording: false }); chunksRef.current = []; handleTranscription(blob); }; mediaRecorderRef.current.start(); updateState({ isRecording: true }); }).catch((err)=>{ console.error("Error accessing microphone:", err); updateState({ error: "Microphone access denied" }); }); } }; const stopRecording = ()=>{ if (mediaRecorderRef.current) { mediaRecorderRef.current.stop(); } }; const handleTranscription = async (audioBlob)=>{ updateState({ transcribing: true }); try { const response = await fetch("/integrations/transcribe-audio-2/listen", { method: "POST", headers: { "Content-Type": "audio/wav" }, body: audioBlob }); if (!response.ok) throw new Error("Transcription failed"); const data = await response.json(); const transcript = data.results.channels[0].alternatives[0].transcript; setNewMessage(transcript); } catch (err) { console.error("Transcription failed:", err); updateState({ error: "Failed to transcribe audio" }); } finally{ updateState({ transcribing: false }); } }; useEffect(()=>{ const checkPayment = async ()=>{ try { const response = await fetch("/api/validate-session", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ sessionId: state.sessionId }) }); if (!response.ok) { throw new Error("Payment verification failed"); } const data = await response.json(); updateState({ hasPaid: data.valid }); } catch (err) { console.error("Payment check failed:", err); updateState({ error: "Failed to verify payment status" }); } }; checkPayment(); }, [ state.sessionId, updateState ]); useEffect(()=>{ const initSession = async ()=>{ try { const response = await fetch("/api/create-session", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ userId, isTrial: !state.hasSubscription }) }); if (!response.ok) { throw new Error(`Failed to create session: ${response.status}`); } const data = await response.json(); if (!data?.sessionId) { throw new Error("No session ID returned"); } updateState({ sessionId: data.sessionId, sessionStartTime: new Date(), showMoodSelector: true, messages: [ { content: "Hi, I'm Bella, your AI counselor. I'm here to listen and support you in a safe, judgment-free space. While I can provide support and guidance, please remember I'm not a replacement for professional mental health care. How are you feeling today?", is_ai: true, timestamp: new Date().toISOString(), status: "received", type: "text" } ], moodHistory: [], interactionCount: 0, sessionGoals: [] }); } catch (err) { console.error("Session initialization error:", err); updateState({ error: "Failed to start session. Please refresh the page to try again." }); } }; if (state.hasPaid) { initSession(); } }, [ updateState, state.hasPaid ]); useEffect(()=>{ messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }, [ state.messages ]); useEffect(()=>{ return ()=>{ if (mediaRecorderRef.current && state.isRecording) { mediaRecorderRef.current.stop(); mediaRecorderRef.current.stream.getTracks().forEach((track)=>track.stop()); } }; }, [ state.isRecording ]); return /*#__PURE__*/ React.createElement("div", { className: `flex flex-col h-screen ${state.theme === "dark" ? "bg-gray-900 text-white" : "bg-[#f8f9fa]"}`, __source: { fileName: "", lineNumber: 324, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "sticky top-0 z-30 bg-white/80 backdrop-blur-sm border-b border-gray-200 px-4 py-3", __source: { fileName: "", lineNumber: 329, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto flex items-center justify-between", __source: { fileName: "", lineNumber: 330, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3", __source: { fileName: "", lineNumber: 331, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-10 h-10 rounded-full bg-gradient-to-r from-[#4a90e2] to-[#357abd] flex items-center justify-center", __source: { fileName: "", lineNumber: 332, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-brain text-white", __source: { fileName: "", lineNumber: 333, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 335, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-semibold text-lg", __source: { fileName: "", lineNumber: 336, columnNumber: 15 }, __self: this }, "Bella AI"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 text-sm text-gray-500", __source: { fileName: "", lineNumber: 337, columnNumber: 15 }, __self: this }, state.sessionStartTime && /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 339, columnNumber: 19 }, __self: this }, "Session:", " ", Math.round((new Date() - state.sessionStartTime) / 1000 / 60), "m"), state.mood && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 349, columnNumber: 21 }, __self: this }, "•"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 350, columnNumber: 21 }, __self: this }, "Mood: ", state.mood)), state.interactionCount > 0 && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 355, columnNumber: 21 }, __self: this }, "•"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 356, columnNumber: 21 }, __self: this }, "Messages: ", state.interactionCount))))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 362, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>updateState({ showMoodSelector: true }), className: "p-2 rounded-full hover:bg-gray-100 transition-colors", title: "Update mood", __source: { fileName: "", lineNumber: 363, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-smile", __source: { fileName: "", lineNumber: 368, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>updateState({ theme: state.theme === "light" ? "dark" : "light" }), className: "p-2 rounded-full hover:bg-gray-100 transition-colors", __source: { fileName: "", lineNumber: 370, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas fa-${state.theme === "light" ? "moon" : "sun"}`, __source: { fileName: "", lineNumber: 378, columnNumber: 15 }, __self: this }))))), !state.hasPaid ? /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col items-center justify-center p-4 md:p-6 max-w-4xl mx-auto w-full", __source: { fileName: "", lineNumber: 387, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 388, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 389, columnNumber: 13 }, __self: this }, "Welcome to Bella AI Counselor"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-6", __source: { fileName: "", lineNumber: 392, columnNumber: 13 }, __self: this }, "Get unlimited AI counseling support for just $4.99/month")), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white rounded-xl shadow-lg p-6", __source: { fileName: "", lineNumber: 397, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 398, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 399, columnNumber: 15 }, __self: this }, "Monthly Subscription"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-4", __source: { fileName: "", lineNumber: 402, columnNumber: 15 }, __self: this }, "Start your journey to better mental well-being today"), /*#__PURE__*/ React.createElement("ul", { className: "text-left mb-6 space-y-2", __source: { fileName: "", lineNumber: 405, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("li", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 406, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-green-500", __source: { fileName: "", lineNumber: 407, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 408, columnNumber: 19 }, __self: this }, "Unlimited AI counseling sessions")), /*#__PURE__*/ React.createElement("li", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 410, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-green-500", __source: { fileName: "", lineNumber: 411, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 412, columnNumber: 19 }, __self: this }, "24/7 emotional support")), /*#__PURE__*/ React.createElement("li", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 414, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-green-500", __source: { fileName: "", lineNumber: 415, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 416, columnNumber: 19 }, __self: this }, "Mood tracking and insights")), /*#__PURE__*/ React.createElement("li", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 418, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-green-500", __source: { fileName: "", lineNumber: 419, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 420, columnNumber: 19 }, __self: this }, "Voice and text chat"))), /*#__PURE__*/ React.createElement("div", { className: "bg-blue-50 rounded-lg p-4 mb-6", __source: { fileName: "", lineNumber: 423, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-2xl font-bold text-[#4a90e2]", __source: { fileName: "", lineNumber: 424, columnNumber: 17 }, __self: this }, "$4.99/month"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-600", __source: { fileName: "", lineNumber: 425, columnNumber: 17 }, __self: this }, "Cancel anytime")), /*#__PURE__*/ React.createElement("script", { async: true, src: "https://js.stripe.com/v3/buy-button.js", __source: { fileName: "", lineNumber: 427, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("stripe-buy-button", { "buy-button-id": "buy_btn_1QyMEJPGmAIFH3UzqQu0Jp17", "publishable-key": "pk_live_51QlK18PGmAIFH3UzuBvYIKPzOci2PTb8VXAALSipqfLaPiUKcUcvilfEnaPG8tc0VqZAKtU7pq0lN7K75aGjZV3u00l9fGB9xF", __source: { fileName: "", lineNumber: 431, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-6 text-center text-sm text-gray-500", __source: { fileName: "", lineNumber: 437, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 438, columnNumber: 15 }, __self: this }, "Secure payment powered by Stripe"), /*#__PURE__*/ React.createElement("p", { className: "mt-2", __source: { fileName: "", lineNumber: 439, columnNumber: 15 }, __self: this }, "Questions? Contact support@bella-ai.com")))) : /*#__PURE__*/ React.createElement(React.Fragment, null, state.showMoodSelector && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50", __source: { fileName: "", lineNumber: 446, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl p-6 max-w-lg w-full", __source: { fileName: "", lineNumber: 447, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 448, columnNumber: 17 }, __self: this }, "How are you feeling?"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", __source: { fileName: "", lineNumber: 451, columnNumber: 17 }, __self: this }, [ "Happy", "Okay", "Sad", "Anxious", "Angry", "Tired", "Excited", "Calm" ].map((mood)=>/*#__PURE__*/ React.createElement("button", { key: mood, onClick: ()=>{ updateState({ mood, showMoodSelector: false }); }, className: "p-4 rounded-lg border border-gray-200 hover:border-[#4a90e2] hover:bg-blue-50 transition-colors", __source: { fileName: "", lineNumber: 462, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl mb-2", __source: { fileName: "", lineNumber: 469, columnNumber: 23 }, __self: this }, mood === "Happy" && "😊", mood === "Okay" && "😐", mood === "Sad" && "😢", mood === "Anxious" && "😰", mood === "Angry" && "😠", mood === "Tired" && "😴", mood === "Excited" && "🤗", mood === "Calm" && "😌"), /*#__PURE__*/ React.createElement("div", { className: "text-sm font-medium", __source: { fileName: "", lineNumber: 479, columnNumber: 23 }, __self: this }, mood)))))), /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-4 md:p-6 max-w-4xl mx-auto w-full", __source: { fileName: "", lineNumber: 487, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 488, columnNumber: 15 }, __self: this }, state.messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${message.is_ai ? "justify-start" : "justify-end"} animate-fade-in`, __source: { fileName: "", lineNumber: 490, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `group flex items-start gap-3 max-w-[80%] md:max-w-[70%] ${message.is_ai ? "flex-row" : "flex-row-reverse"}`, __source: { fileName: "", lineNumber: 496, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${message.is_ai ? "bg-gradient-to-r from-[#4a90e2] to-[#357abd] text-white" : "bg-gradient-to-r from-[#6c757d] to-[#495057] text-white"}`, __source: { fileName: "", lineNumber: 501, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${message.is_ai ? "fa-brain" : "fa-user"} text-sm`, __source: { fileName: "", lineNumber: 508, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `relative group ${message.is_ai ? "mr-12" : "ml-12"}`, __source: { fileName: "", lineNumber: 514, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `p-4 rounded-2xl transition-all duration-200 ${message.is_ai ? "bg-white text-[#2c3e50] shadow-md hover:shadow-lg" : "bg-gradient-to-r from-[#4a90e2] to-[#357abd] text-white"}`, __source: { fileName: "", lineNumber: 519, columnNumber: 25 }, __self: this }, message.type === "image" ? /*#__PURE__*/ React.createElement("img", { src: message.content, alt: "AI Generated visualization", className: "rounded-lg max-w-full h-auto", loading: "lazy", __source: { fileName: "", lineNumber: 527, columnNumber: 29 }, __self: this }) : /*#__PURE__*/ React.createElement("p", { className: "font-roboto leading-relaxed whitespace-pre-wrap text-[15px]", __source: { fileName: "", lineNumber: 534, columnNumber: 29 }, __self: this }, message.content)), /*#__PURE__*/ React.createElement("div", { className: `absolute bottom-0 ${message.is_ai ? "-right-10" : "-left-10"} opacity-0 group-hover:opacity-100 transition-opacity duration-200`, __source: { fileName: "", lineNumber: 539, columnNumber: 25 }, __self: this }, message.is_ai && message.type !== "image" && /*#__PURE__*/ React.createElement("button", { onClick: ()=>audioRef.current?.play(), className: "text-gray-500 hover:text-[#4a90e2] p-1", title: "Play message audio", __source: { fileName: "", lineNumber: 545, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-volume-up", __source: { fileName: "", lineNumber: 550, columnNumber: 31 }, __self: this }))))))), /*#__PURE__*/ React.createElement("div", { ref: messagesEndRef, __source: { fileName: "", lineNumber: 558, columnNumber: 17 }, __self: this }))))), state.showImagePrompt && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50", __source: { fileName: "", lineNumber: 566, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl p-6 max-w-lg w-full", __source: { fileName: "", lineNumber: 567, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 568, columnNumber: 13 }, __self: this }, "Generate an Image"), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 569, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { className: "w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:border-[#4a90e2] focus:ring-2 focus:ring-[#4a90e2]/20", placeholder: "Describe the image you'd like to generate...", rows: "4", value: state.imagePrompt, onChange: (e)=>updateState({ imagePrompt: e.target.value }), __source: { fileName: "", lineNumber: 570, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-end gap-3", __source: { fileName: "", lineNumber: 577, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>updateState({ showImagePrompt: false }), className: "px-4 py-2 rounded-lg border border-gray-300 hover:bg-gray-50", __source: { fileName: "", lineNumber: 578, columnNumber: 17 }, __self: this }, "Cancel"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleImageGeneration(state.imagePrompt), disabled: state.imageGenerating || !state.imagePrompt.trim(), className: "px-4 py-2 rounded-lg bg-[#4a90e2] text-white hover:bg-[#357abd] disabled:opacity-50", __source: { fileName: "", lineNumber: 584, columnNumber: 17 }, __self: this }, state.imageGenerating ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 591, columnNumber: 23 }, __self: this }), "Generating...") : "Generate"))))), state.error && /*#__PURE__*/ React.createElement("div", { className: "fixed top-4 left-1/2 transform -translate-x-1/2 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded z-50", __source: { fileName: "", lineNumber: 605, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "block sm:inline", __source: { fileName: "", lineNumber: 606, columnNumber: 11 }, __self: this }, state.error), /*#__PURE__*/ React.createElement("button", { onClick: ()=>updateState({ error: null }), className: "absolute top-0 bottom-0 right-0 px-4", __source: { fileName: "", lineNumber: 607, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 611, columnNumber: 13 }, __self: this }))), state.showSubscriptionPrompt && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50", __source: { fileName: "", lineNumber: 617, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-xl p-6 max-w-lg w-full", __source: { fileName: "", lineNumber: 618, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-4", __source: { fileName: "", lineNumber: 619, columnNumber: 13 }, __self: this }, state.sessionExpired ? "Your trial session has ended" : "Continue with a subscription"), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 mb-6", __source: { fileName: "", lineNumber: 624, columnNumber: 13 }, __self: this }, "Subscribe now to continue getting AI counseling support"), /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 628, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("script", { async: true, src: "https://js.stripe.com/v3/buy-button.js", __source: { fileName: "", lineNumber: 629, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("stripe-buy-button", { "buy-button-id": "buy_btn_1QyMEJPGmAIFH3UzqQu0Jp17", "publishable-key": "pk_live_51QlK18PGmAIFH3UzuBvYIKPzOci2PTb8VXAALSipqfLaPiUKcUcvilfEnaPG8tc0VqZAKtU7pq0lN7K75aGjZV3u00l9fGB9xF", __source: { fileName: "", lineNumber: 633, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "border-t border-gray-200 bg-white shadow-lg", __source: { fileName: "", lineNumber: 642, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "max-w-4xl mx-auto p-4 md:p-6", __source: { fileName: "", lineNumber: 643, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-3", __source: { fileName: "", lineNumber: 644, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 relative", __source: { fileName: "", lineNumber: 645, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { ref: inputRef, rows: "1", name: "message", value: newMessage, onChange: (e)=>{ setNewMessage(e.target.value); e.target.style.height = "inherit"; e.target.style.height = `${e.target.scrollHeight}px`; }, onKeyPress: (e)=>{ if (e.key === "Enter" && !e.shiftKey) { handleSubmit(e); } }, placeholder: "Type your message here... (Shift + Enter for new line)", className: "w-full p-4 border border-gray-300 rounded-xl focus:outline-none focus:border-[#4a90e2] focus:ring-2 focus:ring-[#4a90e2]/20 font-roboto transition-all duration-200 resize-none", disabled: state.loading || state.transcribing, style: { minHeight: "50px", maxHeight: "150px" }, __source: { fileName: "", lineNumber: 646, columnNumber: 15 }, __self: this }), newMessage.length > 0 && /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>setNewMessage(""), className: "absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 p-1", __source: { fileName: "", lineNumber: 667, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 672, columnNumber: 19 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 676, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>updateState({ showImagePrompt: true }), className: "px-4 py-3 rounded-xl transition-all duration-200 flex items-center gap-2 font-roboto bg-gray-100 hover:bg-gray-200 text-gray-700", title: "Generate an image", __source: { fileName: "", lineNumber: 677, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-image", __source: { fileName: "", lineNumber: 683, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: state.isRecording ? stopRecording : startRecording, className: `px-4 py-3 rounded-xl transition-all duration-200 flex items-center gap-2 font-roboto ${state.isRecording ? "bg-red-500 hover:bg-red-600 text-white" : "bg-gray-100 hover:bg-gray-200 text-gray-700"}`, title: state.isRecording ? "Stop recording" : "Start voice recording", disabled: state.transcribing, __source: { fileName: "", lineNumber: 685, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${state.isRecording ? "fa-stop" : state.transcribing ? "fa-spinner fa-spin" : "fa-microphone"}`, __source: { fileName: "", lineNumber: 698, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: state.loading || !newMessage.trim() && !state.isListening || !state.sessionId || state.transcribing, className: "bg-gradient-to-r from-[#4a90e2] to-[#357abd] text-white px-6 py-3 rounded-xl hover:opacity-90 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 font-roboto", __source: { fileName: "", lineNumber: 708, columnNumber: 15 }, __self: this }, state.loading || state.transcribing ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 720, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 721, columnNumber: 21 }, __self: this }, state.transcribing ? "Transcribing..." : "Sending...")) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 727, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 728, columnNumber: 21 }, __self: this }, "Send")))))), state.transcribing && /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-24 left-1/2 transform -translate-x-1/2 bg-white shadow-lg rounded-full px-4 py-2 flex items-center gap-2", __source: { fileName: "", lineNumber: 736, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-[#4a90e2]", __source: { fileName: "", lineNumber: 737, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 738, columnNumber: 13 }, __self: this }, "Transcribing audio...")))); }