💖 Emotional Companion

Your safe space for connection and support

\n\n

How are you feeling today?

\n {[\n { emoji: \"😢\", label: \"Sad\", color: \"#FF6B6B\" },\n { emoji: \"😐\", label: \"Neutral\", color: \"#4ECDC4\" },\n { emoji: \"😊\", label: \"Happy\", color: \"#45B7D1\" },\n ].map(({ emoji, label, color }, index) => (\n trackMood(index)}\n className={mood === index ? \"selected\" : \"\"}\n style={{\n backgroundColor: mood === index ? color : \"transparent\",\n color: mood === index ? \"white\" : color,\n }}\n >\n {emoji} {label}\n \n ))}\n

\n\n {mood !== null && (\n

🤝 Your Companion Chat

\n {chatHistory.map((chat, index) => (\n \n {chat.type === \"voice\" ?

\n ))}\n

\n setUserMessage(e.target.value)}\n placeholder=\"Share your thoughts...\"\n onKeyPress={(e) => e.key === \"Enter\" && chatWithCompanion()}\n />\n \n

\n {!isRecording\n ? (\n \n 🎤 Record\n \n )\n : (\n \n ⏹️ Stop\n \n )}\n {audioBlob && (\n \n 📤 Send Voice\n \n )}\n

\n \n )}\n

\n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n\n // Auto-scroll to bottom of chat history\n function scrollToBottom() {\n const chatHistory = document.getElementById(\"chat-history\");\n if (chatHistory) {\n chatHistory.scrollTop = chatHistory.scrollHeight;\n }\n }\n\n // Scroll to bottom when new messages are added\n const observer = new MutationObserver(scrollToBottom);\n const chatHistory = document.getElementById(\"chat-history\");\n if (chatHistory) {\n observer.observe(chatHistory, { childList: true });\n }\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\n// CSS definition\nconst css = `\n@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');\n\n:root {\n --soft-blue: #6A9EC5;\n --soft-purple: #9C6AB0;\n --soft-pink: #E67E9C;\n --light-background: #F5F5FA;\n --text-color: #2C3E50;\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nbody, html {\n font-family: 'Poppins', system-ui, sans-serif;\n line-height: 1.6;\n background: linear-gradient(\n 135deg, \n #f6d365 0%, \n #fda085 50%, \n #f5576c 100%\n );\n background-size: 400% 400%;\n animation: gradientBG 15s ease infinite;\n color: var(--text-color);\n min-height: 100vh;\n position: relative;\n}\n\n@keyframes gradientBG {\n 0% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n}\n\nbody::before {\n content: \"\";\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: \n radial-gradient(rgba(255,255,255,0.1) 8%, transparent 8%),\n radial-gradient(rgba(255,255,255,0.1) 8%, transparent 8%);\n background-position: 0 0, 50px 50px;\n background-size: 100px 100px;\n opacity: 0.3;\n z-index: -1;\n}\n\n.companion-chat {\n position: relative;\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 20px;\n overflow: hidden;\n}\n\n.background-gradient {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(255,255,255,0.1);\n z-index: -1;\n}\n\n.chat-container {\n background: rgba(255,255,255,0.9);\n border-radius: 30px;\n box-shadow: \n 0 25px 50px rgba(0,0,0,0.1),\n 0 10px 20px rgba(0,0,0,0.05);\n padding: 30px;\n width: 100%;\n max-width: 600px;\n max-height: 90vh;\n overflow-y: auto;\n position: relative;\n}\n\nheader {\n text-align: center;\n margin-bottom: 20px;\n}\n\n.mood-tracker {\n margin-bottom: 20px;\n}\n\n.mood-buttons {\n display: flex;\n justify-content: space-between;\n gap: 10px;\n}\n\n.mood-buttons button {\n flex-grow: 1;\n padding: 12px;\n border: 2px solid currentColor;\n border-radius: 15px;\n font-weight: 600;\n transition: all 0.3s ease;\n}\n\n.chat-interface {\n background: rgba(245,245,250,0.5);\n border-radius: 20px;\n padding: 20px;\n}\n\n.chat-history {\n height: 350px;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n gap: 12px;\n padding: 15px;\n background: white;\n border-radius: 15px;\n margin-bottom: 15px;\n}\n\n.chat-message {\n max-width: 80%;\n padding: 10px 15px;\n border-radius: 15px;\n line-height: 1.4;\n}\n\n.chat-message.user {\n align-self: flex-end;\n background: linear-gradient(135deg, #6A9EC5, #9C6AB0);\n color: white;\n}\n\n.chat-message.companion {\n align-self: flex-start;\n background: #F0F0F5;\n color: var(--text-color);\n}\n\n.chat-input-container {\n display: flex;\n gap: 10px;\n}\n\n.chat-input-container input {\n flex-grow: 1;\n padding: 12px;\n border: 2px solid var(--soft-blue);\n border-radius: 15px;\n}\n\n.chat-input-container button {\n display: flex;\n align-items: center;\n gap: 10px;\n background: linear-gradient(135deg, var(--soft-blue), var(--soft-purple));\n color: white;\n border: none;\n border-radius: 15px;\n padding: 12px 20px;\n cursor: pointer;\n}\n\n.voice-recording-controls {\n display: flex;\n gap: 10px;\n margin-top: 10px;\n}\n\n.voice-record-btn, \n.voice-stop-btn, \n.voice-send-btn {\n padding: 10px 15px;\n border-radius: 10px;\n border: none;\n cursor: pointer;\n font-size: 0.9rem;\n}\n\n.voice-record-btn {\n background-color: #4CAF50;\n color: white;\n}\n\n.voice-stop-btn {\n background-color: #f44336;\n color: white;\n}\n\n.voice-send-btn {\n background-color: #2196F3;\n color: white;\n}\n\n@media screen and (max-width: 480px) {\n .companion-chat {\n padding: 10px;\n }\n\n .chat-container {\n padding: 20px;\n border-radius: 20px;\n max-height: 95vh;\n }\n\n .mood-buttons {\n flex-direction: column;\n }\n\n .chat-input-container {\n flex-direction: column;\n }\n\n .voice-recording-controls {\n flex-direction: column;\n }\n}\n`;\n\nexport default async function server(request: Request): Promise {\n try {\n const { sqlite } = await import(\"https://esm.town/v/stevekrouse/sqlite\");\n const { blob } = await import(\"https://esm.town/v/std/blob\");\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n const KEY = \"Emotional_Companion\";\n\n // Explicitly handle root path\n const url = new URL(request.url);\n if (url.pathname === \"/\" || url.pathname === \"\") {\n return new Response(\n `\n \n \n Emotional Companion\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"Content-Type\": \"text/html\",\n \"Access-Control-Allow-Origin\": \"*\",\n },\n status: 200,\n },\n );\n }\n\n // Routes for daily prompt\n if (request.method === \"GET\" && url.pathname === \"/get-daily-prompt\") {\n const prompts = [\n \"What's something that made you smile recently?\",\n \"If you could have a conversation with your future self, what would you ask?\",\n \"Describe a moment when you felt truly peaceful.\",\n \"What's a small act of kindness you experienced or witnessed?\",\n ];\n const randomPrompt = prompts[Math.floor(Math.random() * prompts.length)];\n return new Response(JSON.stringify({ prompt: randomPrompt }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // Routes for mood tracking\n if (request.method === \"POST\" && url.pathname === \"/track-mood\") {\n const { mood } = await request.json();\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${KEY}_moods (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n mood INTEGER NOT NULL,\n timestamp DATETIME DEFAULT CURRENT_TIMESTAMP\n )\n `);\n await sqlite.execute(\n `\n INSERT INTO ${KEY}_moods (mood) VALUES (?)\n `,\n [mood],\n );\n return new Response(JSON.stringify({ success: true }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // Routes for initial mood response\n if (request.method === \"POST\" && url.pathname === \"/initial-mood-response\") {\n const { mood } = await request.json();\n const moodResponses = {\n 0: [\n \"I'm here to listen and support you through your sadness.\",\n \"It's okay to feel sad. Your emotions are valid and important.\",\n \"Would you like to talk about what's making you feel this way?\",\n \"Sadness is a natural part of the human experience. You're not alone.\",\n ],\n 1: [\n \"Sometimes neutral days are okay. Let's explore how you're doing.\",\n \"Not every day needs to be intense. It's fine to feel balanced.\",\n \"Would you like to share what's on your mind today?\",\n \"Neutral moments can be a peaceful space for reflection.\",\n ],\n 2: [\n \"It's wonderful to hear you're feeling happy! Let's celebrate your joy.\",\n \"Happiness is beautiful. What's bringing you joy today?\",\n \"Your positive energy is contagious. Tell me more!\",\n \"Embracing happiness is a wonderful way to nurture your well-being.\",\n ],\n };\n const responses = moodResponses[mood];\n const randomResponse = responses[Math.floor(Math.random() * responses.length)];\n\n return new Response(JSON.stringify({ response: randomResponse }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n // Companion chat route\n if (request.method === \"POST\" && url.pathname === \"/companion-chat\") {\n const { prompt } = await request.json();\n\n try {\n const completion = await openai.chat.completions.create({\n messages: [\n {\n role: \"system\",\n content:\n \"You are a compassionate, supportive AI companion helping someone combat loneliness. Respond empathetically and encouragingly.\",\n },\n { role: \"user\", content: prompt },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 150,\n });\n\n const response = completion.choices[0].message.content\n || \"I'm here to listen. Would you like to tell me more about what you're experiencing?\";\n\n return new Response(JSON.stringify({ response }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n console.error(\"OpenAI Error:\", error);\n const fallbackResponses = [\n \"I'm here for you. Let's take a moment to breathe and reflect.\",\n \"Sometimes words are hard to find. I'm listening and I care.\",\n \"Your feelings are valid. Would you like to share more?\",\n \"I'm processing what you've shared. Every emotion is important.\",\n \"Let's explore this together. What would you like to talk about?\",\n ];\n\n const randomFallback = fallbackResponses[Math.floor(Math.random() * fallbackResponses.length)];\n\n return new Response(JSON.stringify({ response: randomFallback }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n // Fallback route\n return new Response(\"Not Found\", {\n status: 404,\n headers: {\n \"Content-Type\": \"text/plain\",\n \"Access-Control-Allow-Origin\": \"*\",\n },\n });\n } catch (error) {\n console.error(\"Server-side error:\", error);\n return new Response(\"Internal Server Error\", {\n status: 500,\n headers: {\n \"Content-Type\": \"text/plain\",\n \"Access-Control-Allow-Origin\": \"*\",\n },\n });\n }\n}","deleted","label",[99],"permalink","https://www.val.town/x/Scolly/Emotional_Companion/code/main.tsx","extension","actionData","errors"]