import React, { useState, useEffect, useRef } from "react" import { callAI } from "call-ai" import { useFireproof } from "use-fireproof" export default function App() { const { database, useLiveQuery, useDocument } = useFireproof("steadyguard-crisis-db") const [currentMode, setCurrentMode] = useState("calm") const [breathingPhase, setBreathingPhase] = useState("inhale") const [isBreathing, setIsBreathing] = useState(true) const [chatMessages, setChatMessages] = useState([]) const [chatInput, setChatInput] = useState("") const [isStreaming, setIsStreaming] = useState(false) const [showProfileEdit, setShowProfileEdit] = useState(false) const chatEndRef = useRef(null) const canvasRef = useRef(null) // User profile const { doc: userProfile, merge: mergeProfile, save: saveProfile } = useDocument({ _id: "user-profile", type: "profile", name: "", preferredContact: "", _files: {} }) // Evidence vault documents const { docs: evidenceDocs } = useLiveQuery("type", { key: "evidence" }) // Support contacts const { docs: supportDocs } = useLiveQuery("type", { key: "support" }) // New evidence document form const { doc: newEvidence, merge: mergeEvidence, submit: submitEvidence } = useDocument({ type: "evidence", description: "", timestamp: Date.now(), _files: {} }) // Animated sunset background useEffect(() => { if (!canvasRef.current) return const canvas = canvasRef.current const ctx = canvas.getContext('2d') let animationFrame const resize = () => { canvas.width = window.innerWidth canvas.height = window.innerHeight } resize() window.addEventListener('resize', resize) let time = 0 const animate = () => { time += 0.001 // Gradient sunset sky const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height) // Animated colors const hue1 = 15 + Math.sin(time) * 10 const hue2 = 35 + Math.cos(time * 0.8) * 10 const hue3 = 200 + Math.sin(time * 0.6) * 20 gradient.addColorStop(0, `hsl(${hue3}, 60%, 70%)`) gradient.addColorStop(0.4, `hsl(${hue2}, 80%, 65%)`) gradient.addColorStop(0.7, `hsl(${hue1}, 85%, 60%)`) gradient.addColorStop(1, `hsl(${hue1 - 10}, 70%, 45%)`) ctx.fillStyle = gradient ctx.fillRect(0, 0, canvas.width, canvas.height) // Soft clouds ctx.fillStyle = 'rgba(255, 255, 255, 0.15)' for (let i = 0; i < 5; i++) { const x = (time * 20 + i * 200) % (canvas.width + 200) - 100 const y = 100 + i * 60 + Math.sin(time + i) * 20 ctx.beginPath() ctx.arc(x, y, 60 + i * 10, 0, Math.PI * 2) ctx.arc(x + 40, y - 10, 50 + i * 8, 0, Math.PI * 2) ctx.arc(x + 80, y, 55 + i * 9, 0, Math.PI * 2) ctx.fill() } // Gentle sun glow const sunGradient = ctx.createRadialGradient( canvas.width / 2, canvas.height * 0.7, 0, canvas.width / 2, canvas.height * 0.7, 200 ) sunGradient.addColorStop(0, 'rgba(255, 220, 150, 0.3)') sunGradient.addColorStop(1, 'transparent') ctx.fillStyle = sunGradient ctx.fillRect(0, 0, canvas.width, canvas.height) animationFrame = requestAnimationFrame(animate) } animate() return () => { window.removeEventListener('resize', resize) cancelAnimationFrame(animationFrame) } }, []) // Breathing animation cycle useEffect(() => { if (!isBreathing || currentMode !== "calm") return const cycle = setInterval(() => { setBreathingPhase(prev => { if (prev === "inhale") return "hold" if (prev === "hold") return "exhale" return "inhale" }) }, 4000) return () => clearInterval(cycle) }, [isBreathing, currentMode]) // Auto-scroll chat useEffect(() => { chatEndRef.current?.scrollIntoView({ behavior: "smooth" }) }, [chatMessages]) // Initialize default support contacts useEffect(() => { const initSupport = async () => { if (supportDocs.length === 0) { await database.put({ type: "support", name: "National Crisis Hotline", contact: "988", category: "immediate" }) await database.put({ type: "support", name: "Campus Security", contact: "Contact your campus safety office", category: "local" }) await database.put({ type: "support", name: "Cybercrime Reporting", contact: "ic3.gov", category: "legal" }) } } initSupport() }, []) const handleFileUpload = (e) => { const file = e.target.files[0] if (file) { mergeEvidence({ _files: { evidence: file } }) } } const handleProfilePhotoUpload = (e) => { const file = e.target.files[0] if (file) { mergeProfile({ _files: { profilePhoto: file } }) } } const saveEvidence = () => { if (newEvidence.description.trim() || newEvidence._files.evidence) { submitEvidence() } } const handleChatSubmit = async (e) => { e.preventDefault() if (!chatInput.trim() || isStreaming) return const userMessage = { role: "user", content: chatInput } setChatMessages(prev => [...prev, userMessage]) setChatInput("") setIsStreaming(true) try { const messages = [ { role: "system", content: "You are a compassionate crisis support assistant for SteadyGuard. Your role is to provide calm, non-judgmental emotional support to someone experiencing digital blackmail. Offer gentle guidance on immediate safety steps, validate their feelings, and encourage connecting with professional help. Keep responses concise, warm, and empowering. Never minimize their experience." }, ...chatMessages.map(m => ({ role: m.role, content: m.content })), userMessage ] const generator = await callAI(messages, { stream: true }) let fullResponse = "" setChatMessages(prev => [...prev, { role: "assistant", content: "" }]) for await (const chunk of generator) { fullResponse = chunk setChatMessages(prev => { const updated = [...prev] updated[updated.length - 1] = { role: "assistant", content: chunk } return updated }) } } catch (error) { setChatMessages(prev => [...prev, { role: "assistant", content: "I'm here for you. If you need immediate help, please reach out to a crisis hotline or trusted support person." }]) } finally { setIsStreaming(false) } } const getBreathingText = () => { if (breathingPhase === "inhale") return "Breathe In..." if (breathingPhase === "hold") return "Hold..." return "Breathe Out..." } const getBreathingScale = () => { if (breathingPhase === "inhale") return "scale-100" if (breathingPhase === "hold") return "scale-100" return "scale-75" } return (

{/* Animated sunset background */}

{userProfile.name || "Welcome"}

Your Profile

SteadyGuard

Take a moment to breathe

Protect Your Evidence

Saved Evidence ({evidenceDocs.length})

You're Not Alone

{contact.name}

Quick Safety Tips

Support Chat