/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect, useRef } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; const PERSONAS = [ { id: 'bestfriend', name: 'Best Friend', emoji: '🤝', description: 'Your trusted companion' }, { id: 'gymtrainer', name: 'Gym Trainer', emoji: '💪', description: 'Fitness motivation' }, { id: 'careerguru', name: 'Career Guru', emoji: '🚀', description: 'Professional growth expert' }, { id: 'lifepartner', name: 'Life Partner', emoji: '❤️', description: 'Emotional support' }, { id: 'familyguide', name: 'Family Guide', emoji: '👨‍👩‍👧‍👦', description: 'Family wisdom' }, { id: 'financeconsultant', name: 'Finance Consultant', emoji: '💰', description: 'Money management expert' } ]; function PersonaSelector({ onSelectPersona }) { return (

Choose Your AI Companion

{PERSONAS.map(persona => (

onSelectPersona(persona)} >

{persona.emoji}

{persona.name}

{persona.description}

))}

); } function ChatApp({ persona, goBack }) { const [messages, setMessages] = useState([ { text: `Hi there! I'm your ${persona.name}. How can I help you today? 👋`, sender: 'ai', timestamp: new Date() } ]); const [inputMessage, setInputMessage] = useState(''); const messagesEndRef = useRef(null); const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: "smooth" }); }; useEffect(scrollToBottom, [messages]); function handleSendMessage() { if (!inputMessage.trim()) return; const userMessage = { text: inputMessage, sender: 'user', timestamp: new Date() }; setMessages(prev => [...prev, userMessage]); // Generate a simple predefined response based on persona const predefinedResponses = { 'bestfriend': [ "That's interesting! Tell me more 🤔", "I totally get what you mean! 👍", "Sounds like you need some advice from a best friend 💕" ], 'gymtrainer': [ "Let's crush those fitness goals! 💪", "Motivation is key to success 🏋️", "Every rep counts! Keep pushing 🔥" ], 'careerguru': [ "Career growth is all about strategic planning 🚀", "Your potential is limitless! 📈", "Let's discuss your professional aspirations 💼" ], 'lifepartner': [ "I'm here for you, always ❤️", "Emotional support is my specialty 🤗", "Let's talk and find a way forward 🌈" ], 'familyguide': [ "Family is the most important thing 👨‍👩‍👧‍👦", "Wisdom comes from experience 🧘", "Let me share some family insights 📖" ], 'financeconsultant': [ "Financial planning is crucial 💰", "Let's strategize your financial future 📊", "Smart money moves start here 💡" ] }; const responses = predefinedResponses[persona.id]; const randomResponse = responses[Math.floor(Math.random() * responses.length)]; const aiMessage = { text: randomResponse, sender: 'ai', timestamp: new Date() }; // Simulate a slight delay for more natural conversation setTimeout(() => { setMessages(prev => [...prev, aiMessage]); }, 500); setInputMessage(''); } return (

{persona.emoji} {persona.name}

📞 Coming Soon

{messages.map((msg, index) => (

{msg.text}

))}

setInputMessage(e.target.value)} onKeyPress={(e) => e.key === 'Enter' && handleSendMessage()} placeholder="Message" />

); } function App() { const [selectedPersona, setSelectedPersona] = useState(null); const handleSelectPersona = (persona) => { setSelectedPersona(persona); }; const handleGoBack = () => { setSelectedPersona(null); }; return (

{selectedPersona ? ( ) : ( )}

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response(` AI Companion

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; } .app-container { max-width: 480px; margin: 0 auto; height: 100vh; background-color: white; box-shadow: 0 0 10px rgba(0,0,0,0.1); } .persona-selector { padding: 20px; text-align: center; } .persona-selector h1 { color: #333; margin-bottom: 20px; } .persona-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; } .persona-card { background-color: #f9f9f9; border-radius: 10px; padding: 15px; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .persona-card:hover { transform: scale(1.05); box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .persona-emoji { font-size: 3rem; margin-bottom: 10px; } .persona-name { font-weight: bold; color: #333; } .persona-description { color: #666; font-size: 0.8rem; } .ios-chat-container { display: flex; flex-direction: column; height: 100vh; } .ios-chat-header { display: flex; justify-content: space-between; align-items: center; padding: 10px; background-color: #f8f8f8; border-bottom: 1px solid #e0e0e0; } .ios-chat-header-left { display: flex; align-items: center; } .ios-back-button { background: none; border: none; font-size: 1.5rem; cursor: pointer; margin-right: 10px; } .ios-chat-title { font-weight: bold; } .ios-chat-messages { flex-grow: 1; overflow-y: auto; padding: 15px; display: flex; flex-direction: column; } .ios-message { max-width: 80%; margin-bottom: 10px; padding: 10px; border-radius: 15px; clear: both; } .ios-message.user { align-self: flex-end; background-color: #007AFF; color: white; margin-left: auto; } .ios-message.ai { align-self: flex-start; background-color: #E5E5EA; color: black; margin-right: auto; } .ios-chat-input-container { display: flex; padding: 10px; background-color: #f8f8f8; border-top: 1px solid #e0e0e0; } .ios-chat-input { flex-grow: 1; padding: 10px; border: 1px solid #e0e0e0; border-radius: 20px; margin-right: 10px; } .ios-send-button { background-color: #007AFF; color: white; border: none; padding: 10px 15px; border-radius: 20px; cursor: pointer; } `;

sacredScarletSkink