function MainComponent() { const [selectedCharacter, setSelectedCharacter] = useState(null); const [messages, setMessages] = useState([]); const [inputMessage, setInputMessage] = useState(""); const [streamingMessage, setStreamingMessage] = useState(""); const [theme, setTheme] = useState("yellow"); const [activeCategory, setActiveCategory] = useState("random"); const [characters, setCharacters] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [sessionId] = useState(()=>Math.random().toString(36).substring(7)); const themes = { beige: { light: "#F5F5DC", dark: "#E8E4C9" }, orange: { light: "#FFE4B5", dark: "#FFA07A" }, yellow: { light: "#FFFACD", dark: "#FFD700" }, purple: { light: "#E6E6FA", dark: "#9370DB" }, pink: { light: "#FFC0CB", dark: "#FF69B4" }, skyBlue: { light: "#87CEEB", dark: "#4682B4" }, green: { light: "#98FB98", dark: "#3CB371" } }; const categories = [ { id: "random", icon: "🔀", name: "Random" }, { id: "celebrities", icon: "🌟", name: "Celebrities" }, { id: "entrepreneurs", icon: "💼", name: "Entrepreneurs" }, { id: "personalities", icon: "💖", name: "Personalities" }, { id: "hotGfs", icon: "👩‍❤️‍💋‍👨", name: "Hot GFs" }, { id: "hotBfs", icon: "👨‍❤️‍💋‍👨", name: "Hot BFs" }, { id: "bestFriends", icon: "🤝", name: "Best Friends" }, { id: "teachers", icon: "🎓", name: "Teach Me" }, { id: "language", icon: "🗣️", name: "Language Coaches" }, { id: "sports", icon: "⚽", name: "Sports Stars" }, { id: "data", icon: "📊", name: "Data Experts" }, { id: "marketing", icon: "📈", name: "Marketing" }, { id: "business", icon: "🏪", name: "Small Business" }, { id: "students", icon: "🎓", name: "A+ Students" }, { id: "unique", icon: "🔮", name: "Unique Jobs" }, { id: "career", icon: "🧭", name: "Career Coaches" }, { id: "jokers", icon: "🎭", name: "Jokers" }, { id: "interviewers", icon: "🎤", name: "Interviewers" }, { id: "news", icon: "📰", name: "Newscasters" } ]; // Fetch characters based on category const fetchCharacters = useCallback(async (category)=>{ try { setLoading(true); setError(null); const response = await fetch("/api/get-characters", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ category: category === "random" ? null : category }) }); if (!response.ok) { throw new Error("Failed to fetch characters"); } const data = await response.json(); if (data.error) { throw new Error(data.error); } setCharacters(data.characters); } catch (err) { console.error("Error fetching characters:", err); setError("Failed to load characters. Please try again."); } finally{ setLoading(false); } }, []); // Fetch characters when category changes useEffect(()=>{ fetchCharacters(activeCategory); }, [ activeCategory, fetchCharacters ]); // Load chat history when character is selected useEffect(()=>{ const loadChatHistory = async ()=>{ if (!selectedCharacter) return; try { // Clear any existing chat history for this character await fetch("/api/save-chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ character_id: selectedCharacter.id, clear: true }) }); // Start with empty messages setMessages([]); } catch (error) { console.error("Error clearing chat history:", error); } }; loadChatHistory(); }, [ selectedCharacter ]); // Track engagement when character is selected useEffect(()=>{ const trackEngagement = async ()=>{ if (!selectedCharacter) return; try { const response = await fetch("/api/save-chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ character_id: selectedCharacter.id, session_id: sessionId, track_engagement: true }) }); if (!response.ok) { console.error("Failed to track engagement"); } } catch (error) { console.error("Error tracking engagement:", error); } }; trackEngagement(); }, [ selectedCharacter, sessionId ]); // Update message count in engagement tracking useEffect(()=>{ const updateMessageCount = async ()=>{ if (!selectedCharacter) return; try { await fetch("/api/save-chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ character_id: selectedCharacter.id, session_id: sessionId, update_message_count: true, messages_count: messages.length }) }); } catch (error) { console.error("Error updating message count:", error); } }; updateMessageCount(); }, [ messages.length, selectedCharacter, sessionId ]); const handleFinish = useCallback(async (message)=>{ setMessages((prev)=>[ ...prev, { role: "assistant", content: message } ]); setStreamingMessage(""); // Save assistant message try { await fetch("/api/save-chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ character_id: selectedCharacter.id, message: message, role: "assistant" }) }); } catch (error) { console.error("Error saving assistant message:", error); } }, [ selectedCharacter?.id ]); const handleStreamResponse = useHandleStreamResponse({ onChunk: setStreamingMessage, onFinish: handleFinish }); const sendMessage = async ()=>{ if (!inputMessage.trim()) return; const newMessage = { role: "user", content: inputMessage }; setMessages((prev)=>[ ...prev, newMessage ]); setInputMessage(""); // Save user message try { await fetch("/api/save-chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ character_id: selectedCharacter.id, message: inputMessage, role: "user" }) }); } catch (error) { console.error("Error saving user message:", error); } const systemMessage = { role: "system", content: `You are ${selectedCharacter.name}. ${selectedCharacter.description}. Background: ${selectedCharacter.background}. Personality: ${selectedCharacter.personality}. Important guidelines for your responses: 1. Keep responses short and casual, like texting with a friend (1-2 sentences usually) 2. Use some humor and emojis naturally 😊 3. Ask follow-up questions to keep the conversation flowing 4. Stay true to your personality but be natural 5. Feel free to use casual language, abbreviations, and react to what was said 6. Don't be overly formal or robotic Example style: User: "How was your day?" You: "Just finished a crazy yoga session! 🧘‍♀️ Still can't feel my legs lol. How about you?" Remember to keep it fun and engaging!` }; try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ systemMessage, ...messages, newMessage ], stream: true }) }); handleStreamResponse(response); } catch (error) { console.error("Error sending message:", error); } }; const startNewChat = async ()=>{ if (selectedCharacter) { try { // Clear chat history from database const response = await fetch("/api/save-chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ character_id: selectedCharacter.id, clear: true }) }); if (!response.ok) { console.error("Failed to clear chat history"); } } catch (error) { console.error("Error clearing chat history:", error); } } // Clear local state setMessages([]); setSelectedCharacter(null); }; // Get a random featured character const featuredCharacter = useMemo(()=>{ if (characters.length === 0) return null; const randomIndex = Math.floor(Math.random() * characters.length); return characters[randomIndex]; }, [ characters ]); return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("script", { async: true, src: "https://www.googletagmanager.com/gtag/js?id=G-PFBH4QFJDT", __source: { fileName: "", lineNumber: 278, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("script", { __source: { fileName: "", lineNumber: 282, columnNumber: 7 }, __self: this }, ` window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-PFBH4QFJDT'); `), /*#__PURE__*/ React.createElement("div", { style: { minHeight: "100vh", backgroundColor: themes[theme].light, transition: "background-color 0.3s" }, __source: { fileName: "", lineNumber: 289, columnNumber: 7 }, __self: this }, !selectedCharacter ? /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 297, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-8", __source: { fileName: "", lineNumber: 299, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-2", style: { fontFamily: "Comic Sans MS, cursive" }, __source: { fileName: "", lineNumber: 300, columnNumber: 15 }, __self: this }, "ChattyBetty 🎭"), /*#__PURE__*/ React.createElement("p", { className: "text-xl", __source: { fileName: "", lineNumber: 306, columnNumber: 15 }, __self: this }, "Your AI Character Chat Companion")), featuredCharacter && /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto mb-8 p-6 rounded-2xl shadow-lg", style: { backgroundColor: themes[theme].dark }, __source: { fileName: "", lineNumber: 311, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 315, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-6xl mb-4 animate-bounce", __source: { fileName: "", lineNumber: 316, columnNumber: 19 }, __self: this }, featuredCharacter.avatar), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-2", __source: { fileName: "", lineNumber: 319, columnNumber: 19 }, __self: this }, featuredCharacter.name), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 322, columnNumber: 19 }, __self: this }, featuredCharacter.description), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSelectedCharacter(featuredCharacter), className: "bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-full transform hover:scale-105 transition-all", __source: { fileName: "", lineNumber: 323, columnNumber: 19 }, __self: this }, "Chat Now! 💬"))), /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 335, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 336, columnNumber: 15 }, __self: this }, "Categories"), /*#__PURE__*/ React.createElement("div", { className: "flex overflow-x-auto gap-4 pb-4", __source: { fileName: "", lineNumber: 337, columnNumber: 15 }, __self: this }, categories.map((category)=>/*#__PURE__*/ React.createElement("button", { key: category.id, onClick: ()=>setActiveCategory(category.id), className: `flex-shrink-0 px-4 py-2 rounded-full ${activeCategory === category.id ? "bg-blue-500 text-white" : "bg-white hover:bg-gray-100"}`, __source: { fileName: "", lineNumber: 339, columnNumber: 19 }, __self: this }, category.icon, " ", category.name)))), loading ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-8", __source: { fileName: "", lineNumber: 356, columnNumber: 15 }, __self: this }, "Loading characters...") : error ? /*#__PURE__*/ React.createElement("div", { className: "text-center py-8 text-red-500", __source: { fileName: "", lineNumber: 358, columnNumber: 15 }, __self: this }, error) : /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3", __source: { fileName: "", lineNumber: 360, columnNumber: 15 }, __self: this }, characters.map((character)=>/*#__PURE__*/ React.createElement("div", { key: character.id, className: "p-3 rounded-lg shadow-md hover:shadow-xl transition-shadow cursor-pointer", style: { backgroundColor: themes[theme].dark }, onClick: ()=>setSelectedCharacter(character), __source: { fileName: "", lineNumber: 362, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-3xl mb-1", __source: { fileName: "", lineNumber: 368, columnNumber: 21 }, __self: this }, character.avatar), /*#__PURE__*/ React.createElement("h3", { className: "text-base font-bold mb-1 truncate", __source: { fileName: "", lineNumber: 369, columnNumber: 21 }, __self: this }, character.name), /*#__PURE__*/ React.createElement("p", { className: "text-xs mb-1 line-clamp-2", __source: { fileName: "", lineNumber: 372, columnNumber: 21 }, __self: this }, character.description), /*#__PURE__*/ React.createElement("div", { className: "text-xs opacity-75", __source: { fileName: "", lineNumber: 375, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mr-1", __source: { fileName: "", lineNumber: 376, columnNumber: 23 }, __self: this }, "📚"), /*#__PURE__*/ React.createElement("span", { className: "truncate", __source: { fileName: "", lineNumber: 377, columnNumber: 23 }, __self: this }, character.background))))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-center", __source: { fileName: "", lineNumber: 385, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 386, columnNumber: 15 }, __self: this }, "Choose Your Theme"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center gap-3", __source: { fileName: "", lineNumber: 387, columnNumber: 15 }, __self: this }, Object.entries(themes).map(([name, colors])=>/*#__PURE__*/ React.createElement("button", { key: name, onClick: ()=>setTheme(name), style: { width: "2.5rem", height: "2.5rem", borderRadius: "50%", background: `linear-gradient(135deg, ${colors.light}, ${colors.dark})`, border: theme === name ? "3px solid black" : "1px solid #ccc", cursor: "pointer", transition: "transform 0.2s", transform: theme === name ? "scale(1.1)" : "scale(1)" }, className: "hover:scale-110", __source: { fileName: "", lineNumber: 389, columnNumber: 19 }, __self: this }))))) : /* Chat Interface */ /*#__PURE__*/ React.createElement("div", { className: "h-screen flex flex-col p-4", __source: { fileName: "", lineNumber: 411, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-4", __source: { fileName: "", lineNumber: 413, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 414, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-3xl", __source: { fileName: "", lineNumber: 415, columnNumber: 17 }, __self: this }, selectedCharacter.avatar), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 416, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold", __source: { fileName: "", lineNumber: 417, columnNumber: 19 }, __self: this }, selectedCharacter.name), /*#__PURE__*/ React.createElement("p", { className: "text-sm opacity-75", __source: { fileName: "", lineNumber: 420, columnNumber: 19 }, __self: this }, selectedCharacter.personality))), /*#__PURE__*/ React.createElement("button", { onClick: startNewChat, className: "bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded-full", __source: { fileName: "", lineNumber: 425, columnNumber: 15 }, __self: this }, "New Chat")), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto mb-4 p-4 rounded-lg", style: { backgroundColor: themes[theme].dark }, __source: { fileName: "", lineNumber: 434, columnNumber: 13 }, __self: this }, messages.map((msg, idx)=>/*#__PURE__*/ React.createElement("div", { key: idx, className: `mb-4 ${msg.role === "user" ? "text-right" : "text-left"}`, __source: { fileName: "", lineNumber: 439, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `inline-block p-3 rounded-lg ${msg.role === "user" ? "bg-blue-500 text-white" : "bg-slate-100"}`, style: { maxWidth: "80%", wordWrap: "break-word" }, __source: { fileName: "", lineNumber: 445, columnNumber: 19 }, __self: this }, msg.content))), streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "text-left", __source: { fileName: "", lineNumber: 461, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "inline-block p-3 rounded-lg bg-slate-100", style: { maxWidth: "80%", wordWrap: "break-word" }, __source: { fileName: "", lineNumber: 462, columnNumber: 19 }, __self: this }, streamingMessage))), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 476, 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: "Type your message...", className: "flex-1 p-2 rounded-full border", __source: { fileName: "", lineNumber: 477, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: sendMessage, className: "bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-full", __source: { fileName: "", lineNumber: 485, columnNumber: 15 }, __self: this }, "Send"))))); }