/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const countries = ["Kenya", "India"]; function App() { const [country, setCountry] = useState(""); const [userId, setUserId] = useState(""); const [messages, setMessages] = useState([]); const [input, setInput] = useState(""); const [stage, setStage] = useState("initial"); // initial, urgent, questionnaire, therapy, followup useEffect(() => { const storedUserId = localStorage.getItem("userId"); if (storedUserId) { setUserId(storedUserId); fetchUserData(storedUserId); } }, []); const fetchUserData = async (id) => { const response = await fetch(`/user/${id}`); const data = await response.json(); setCountry(data.country); setStage(data.stage || "initial"); setMessages(data.messages || []); }; const handleCountrySelect = async (selectedCountry) => { setCountry(selectedCountry); const response = await fetch("/user", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ country: selectedCountry }), }); const { userId } = await response.json(); setUserId(userId); localStorage.setItem("userId", userId); setStage("questionnaire"); }; const handleUrgentHelp = async () => { setCountry("Kenya"); const response = await fetch("/user", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ country: "Kenya", urgent: true }), }); const { userId } = await response.json(); setUserId(userId); localStorage.setItem("userId", userId); setStage("urgent"); }; const handleSubmit = async () => { if (!input.trim()) return; const newMessage = { role: "user", content: input }; setMessages([...messages, newMessage]); setInput(""); const response = await fetch("/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ userId, message: input, stage }), }); const data = await response.json(); setMessages([...messages, newMessage, { role: "assistant", content: data.reply }]); if (data.newStage) { setStage(data.newStage); } }; const renderContent = () => { switch (stage) { case "initial": return (

Welcome to AI Mental Health Support

Please select your country:

{countries.map((c) => ( ))}

If you're a Kenyan youth experiencing depression and need immediate support:

); case "urgent": return (

Urgent Support for Kenyan Youth

We're here to help you. Please start chatting with our AI therapist below.

If you're in immediate danger, please contact these helplines:

Befrienders Kenya: +254 722 178 177
Kenyan Red Cross: 1199 (toll-free)

); case "questionnaire": return (

Neuroscience-based Questionnaire

Please answer the following questions:

On a scale of 1-10, how would you rate your overall mood today?
Have you experienced any significant stress in the past week?
How many hours of sleep do you typically get each night?
Do you engage in regular physical exercise? If so, how often?
Have you noticed any changes in your appetite or eating habits recently?

Please type your answers in the chat below, one at a time.

); case "therapy": case "followup": return (

{stage === "therapy" ? "AI Therapy Session" : "Follow-up Support"}

Chat with your AI therapist below:

); } }; return (

AI Mental Health Therapist - {country}

{renderContent()}

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

{msg.content}

))}

setInput(e.target.value)} onKeyPress={(e) => e.key === "Enter" && handleSubmit()} />

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { const { OpenAI } = await import("https://esm.town/v/std/openai"); const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite"); const openai = new OpenAI(); const SCHEMA_VERSION = 2; const KEY = new URL(import.meta.url).pathname.split("/").at(-1); await sqlite.execute(` CREATE TABLE IF NOT EXISTS ${KEY}_users_${SCHEMA_VERSION} ( id TEXT PRIMARY KEY, country TEXT NOT NULL, stage TEXT NOT NULL, messages TEXT, urgent BOOLEAN DEFAULT FALSE ) `); const url = new URL(request.url); if (request.method === "POST" && url.pathname === "/user") { const { country, urgent = false } = await request.json(); const userId = crypto.randomUUID(); const initialStage = urgent ? "urgent" : "questionnaire"; await sqlite.execute( `INSERT INTO ${KEY}_users_${SCHEMA_VERSION} (id, country, stage, messages, urgent) VALUES (?, ?, ?, ?, ?)`, [userId, country, initialStage, "[]", urgent] ); return new Response(JSON.stringify({ userId }), { headers: { "Content-Type": "application/json" } }); } if (request.method === "GET" && url.pathname.startsWith("/user/")) { const userId = url.pathname.split("/").pop(); const result = await sqlite.execute( `SELECT * FROM ${KEY}_users_${SCHEMA_VERSION} WHERE id = ?`, [userId] ); if (result.rows.length === 0) { return new Response("User not found", { status: 404 }); } const user = result.rows[0]; return new Response(JSON.stringify({ country: user.country, stage: user.stage, messages: JSON.parse(user.messages), urgent: user.urgent }), { headers: { "Content-Type": "application/json" } }); } if (request.method === "POST" && url.pathname === "/chat") { const { userId, message, stage } = await request.json(); const result = await sqlite.execute( `SELECT * FROM ${KEY}_users_${SCHEMA_VERSION} WHERE id = ?`, [userId] ); if (result.rows.length === 0) { return new Response("User not found", { status: 404 }); } const user = result.rows[0]; const messages = JSON.parse(user.messages); let systemMessage = ""; if (stage === "urgent" || user.urgent) { systemMessage = "You are an AI mental health therapist specializing in helping depressed Kenyan youth. Provide empathetic, culturally sensitive support, and focus on immediate coping strategies. If the user expresses suicidal thoughts, strongly encourage them to contact the provided helplines."; } else if (stage === "questionnaire") { systemMessage = "You are an AI assistant conducting a neuroscience-based questionnaire for a Kenyan youth. Guide the user through the questions and provide a summary at the end, with a focus on identifying signs of depression."; } else if (stage === "therapy") { systemMessage = "You are an AI mental health therapist specializing in treating depression in Kenyan youth. Provide empathetic and culturally sensitive support, focusing on cognitive-behavioral techniques and mindfulness practices."; } else if (stage === "followup") { systemMessage = "You are an AI mental health therapist providing follow-up support for a Kenyan youth who may be experiencing depression. Check on their progress, offer additional guidance, and encourage the development of healthy coping mechanisms."; } const completion = await openai.chat.completions.create({ messages: [ { role: "system", content: systemMessage }, ...messages, { role: "user", content: message } ], model: "gpt-4o-mini", max_tokens: 150, }); const reply = completion.choices[0].message.content; messages.push({ role: "user", content: message }); messages.push({ role: "assistant", content: reply }); let newStage = stage; if (stage === "questionnaire" && messages.length >= 10) { newStage = "therapy"; } else if (stage === "therapy" && messages.length >= 20) { newStage = "followup"; } await sqlite.execute( `UPDATE ${KEY}_users_${SCHEMA_VERSION} SET messages = ?, stage = ? WHERE id = ?`, [JSON.stringify(messages), newStage, userId] ); return new Response(JSON.stringify({ reply, newStage }), { headers: { "Content-Type": "application/json" } }); } return new Response(` AI Mental Health Therapist

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0f0f0; } .app { max-width: 800px; margin: 0 auto; padding: 20px; background-color: white; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h1, h2 { color: #333; } .chat { height: 300px; overflow-y: auto; border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; } .message { margin-bottom: 10px; padding: 5px 10px; border-radius: 5px; } .user { background-color: #e6f2ff; text-align: right; } .assistant { background-color: #f0f0f0; } .input-area { display: flex; } input { flex-grow: 1; padding: 5px; font-size: 16px; } button { padding: 5px 10px; font-size: 16px; background-color: #4CAF50; color: white; border: none; cursor: pointer; } button:hover { background-color: #45a049; } `;

thomaskangah