import React, { useState, useEffect, useRef } from "react" import { callAI } from "call-ai" import { useFireproof } from "use-fireproof" export default function App() { const { database, useLiveQuery } = useFireproof("hope-crisis-db") const [sessionId] = useState(() => `session-${Date.now()}`) const [isTyping, setIsTyping] = useState(false) const [userInput, setUserInput] = useState("") const [currentStep, setCurrentStep] = useState(0) const [initialized, setInitialized] = useState(false) const [breathingActive, setBreathingActive] = useState(false) const [breathPhase, setBreathPhase] = useState(null) const chatEndRef = useRef(null) const inputRef = useRef(null) const { docs: messages } = useLiveQuery( (doc) => [doc.sessionId, doc.timestamp], { prefix: [sessionId] } ) const steps = [ { name: "welcome", description: "Initial greeting and acknowledgment" }, { name: "breathe", description: "Grounding through breathing" }, { name: "shield", description: "Don't respond or pay" }, { name: "evidence", description: "Save screenshots" }, { name: "block", description: "Block the person" }, { name: "support", description: "Get professional help" } ] useEffect(() => { if (!initialized && messages.length === 0) { setInitialized(true) setTimeout(() => { initializeSession() }, 100) } }, [initialized, messages.length]) useEffect(() => { if (chatEndRef.current) { chatEndRef.current.scrollIntoView({ behavior: "smooth" }) } }, [messages.length, isTyping]) async function addMessage(sender, text, metadata = {}) { await database.put({ sessionId, sender, text, timestamp: Date.now(), step: currentStep, ...metadata, type: "message" }) } async function initializeSession() { await addMessage("bot", "Hi, I'm Hope. I'm here to help you through this.") setTimeout(async () => { await addMessage("bot", "You're safe here. We'll take this one small step at a time.") setTimeout(async () => { await addMessage("bot", "What's happening right now?") }, 1200) }, 1000) } async function handleSendMessage(e) { e?.preventDefault() if (!userInput.trim()) return const message = userInput.trim() setUserInput("") await addMessage("user", message) setIsTyping(true) const conversationHistory = messages.slice(-6).map(m => ({ role: m.sender === "bot" ? "assistant" : "user", content: m.text })) conversationHistory.push({ role: "user", content: message }) const stepInstructions = { 0: "Acknowledge their situation with warmth. Keep it to 1-2 short sentences. Then suggest taking a breath together.", 1: "Guide them through ONE deep breath. Be very simple: 'Breathe in... now breathe out.' Then say 'Good. You just took your first step.'", 2: "Tell them clearly: 'Do not respond. Do not pay.' Explain briefly (1 sentence) why silence is power. Ask if they can do this.", 3: "Tell them to take screenshots of everything. Give simple instructions: 'Take a screenshot of each message. Save any photos they sent.' Ask when done.", 4: "Tell them to block this person everywhere. Be specific: 'Go to their profile. Tap block.' Ask when they've done it.", 5: "Tell them they did great. Explain that talking to someone trained helps. Offer to show them where to get help." } const systemPrompt = `You are Hope, an AI crisis counselor. You're currently on STEP ${currentStep} of 6. STEP ${currentStep}: ${steps[currentStep]?.name} ${stepInstructions[currentStep]} RULES: - Use VERY simple words (5th grade level) - Keep responses to 1-2 short sentences - Be warm but direct - Guide them to the next step - Don't overwhelm with information Respond to what they just said, following the step instructions above.` try { const response = await callAI([ { role: "system", content: systemPrompt }, ...conversationHistory ], { model: "openai/gpt-4o-mini", temperature: 0.6, max_tokens: 100 }) setIsTyping(false) await addMessage("bot", response) } catch (error) { setIsTyping(false) await addMessage("bot", "I'm here. Let's take this slow. Can you take a deep breath with me?") } } async function handleQuickAction(action) { switch(action) { case "walk-me-through": await addMessage("user", "Can you walk me through the steps?") setIsTyping(true) setTimeout(async () => { setIsTyping(false) await addMessage("bot", "Yes. I'll guide you through 5 steps. We'll do them together, one at a time.") setTimeout(async () => { await addMessage("bot", "Step 1: We'll breathe together to calm down.") setTimeout(async () => { await addMessage("bot", "Step 2: You'll stay silent - don't respond to them.") setTimeout(async () => { await addMessage("bot", "Step 3: You'll save screenshots as proof.") setTimeout(async () => { await addMessage("bot", "Step 4: You'll block them everywhere.") setTimeout(async () => { await addMessage("bot", "Step 5: We'll connect you to professional help.") setTimeout(async () => { await addMessage("bot", "Ready to start with Step 1?") setCurrentStep(1) }, 1500) }, 1500) }, 1500) }, 1500) }, 1500) }, 1500) }, 1000) break case "start-breathing": await addMessage("user", "Yes, let's breathe") await startBreathingExercise() break case "wont-respond": await addMessage("user", "I won't respond to them") setIsTyping(true) setTimeout(async () => { setIsTyping(false) await addMessage("bot", "Good. You just took back control.") setTimeout(async () => { await addMessage("bot", "Now let's save the proof. Take a screenshot of every message they sent.") setCurrentStep(3) }, 1000) }, 1000) break case "saved-screenshots": await addMessage("user", "I saved the screenshots") setIsTyping(true) setTimeout(async () => { setIsTyping(false) await addMessage("bot", "Perfect. You're building your case.") setTimeout(async () => { await addMessage("bot", "Next step: Block them. Go to their profile and tap 'Block'. Do this on every app.") setCurrentStep(4) }, 1000) }, 1000) break case "blocked-them": await addMessage("user", "I blocked them") setIsTyping(true) setTimeout(async () => { setIsTyping(false) await addMessage("bot", "You did it. They can't reach you anymore.") setTimeout(async () => { await addMessage("bot", "This is too big to handle alone. Let me connect you with someone trained to help.") setCurrentStep(5) }, 1000) }, 1000) break case "show-help": await addMessage("user", "Show me where to get help") setIsTyping(true) setTimeout(async () => { setIsTyping(false) await addMessage("bot", "Here are safe places to talk. You can call, text, or chat online.", { showResources: true }) }, 800) break case "need-instructions": if (currentStep === 3) { await addMessage("user", "How do I take a screenshot?") setIsTyping(true) setTimeout(async () => { setIsTyping(false) await addMessage("bot", "Press the power button and volume down button at the same time. The screenshot saves to your photos.") }, 1000) } else if (currentStep === 4) { await addMessage("user", "How do I block them?") setIsTyping(true) setTimeout(async () => { setIsTyping(false) await addMessage("bot", "Go to their profile. Look for three dots or settings. Tap 'Block' or 'Block User'. Confirm it.") }, 1000) } break } } async function startBreathingExercise() { setBreathingActive(true) setIsTyping(true) setTimeout(async () => { setIsTyping(false) setBreathPhase("in") await addMessage("bot", "Breathe in slowly... 2... 3...") setTimeout(async () => { setBreathPhase("out") await addMessage("bot", "Breathe out... 2... 3... 4...") setTimeout(async () => { setBreathPhase(null) setBreathingActive(false) await addMessage("bot", "Good. You just took your first step toward control.") setTimeout(async () => { await addMessage("bot", "Here's the most important thing: Do not respond. Do not pay.") setTimeout(async () => { setCurrentStep(2) }, 500) }, 1500) }, 4500) }, 3500) }, 1000) } function renderQuickActions() { const actionsByStep = { 0: [ { text: "Walk me through the steps", action: () => handleQuickAction("walk-me-through") }, { text: "Someone is blackmailing me", action: () => { setUserInput("Someone is threatening to share my private photos") setTimeout(() => handleSendMessage(), 100) }}, { text: "I need help now", action: () => { setUserInput("I need help right now") setTimeout(() => handleSendMessage(), 100) }} ], 1: [ { text: "Yes, let's start", action: () => handleQuickAction("start-breathing") }, { text: "What are the steps?", action: () => handleQuickAction("walk-me-through") } ], 2: [ { text: "I won't respond", action: () => handleQuickAction("wont-respond") }, { text: "Why not?", action: () => { setUserInput("Why shouldn't I respond?") setTimeout(() => handleSendMessage(), 100) }} ], 3: [ { text: "I saved screenshots", action: () => handleQuickAction("saved-screenshots") }, { text: "How do I screenshot?", action: () => handleQuickAction("need-instructions") } ], 4: [ { text: "I blocked them", action: () => handleQuickAction("blocked-them") }, { text: "How do I block?", action: () => handleQuickAction("need-instructions") } ], 5: [ { text: "Show me help", action: () => handleQuickAction("show-help") } ] } const actions = actionsByStep[currentStep] || [] if (actions.length === 0 || breathingActive) return null return (

{actions.map((item, i) => ( ))}

) } function renderResources(show) { if (!show) return null return (