diff --git a/app/frontend/src/components/ChatBox.jsx b/app/frontend/src/components/ChatBox.jsx index 741a0ab..5ddea3f 100644 --- a/app/frontend/src/components/ChatBox.jsx +++ b/app/frontend/src/components/ChatBox.jsx @@ -2,6 +2,7 @@ import { useState, useRef, useEffect } from 'react' import { motion, AnimatePresence } from 'framer-motion' import { fetchChatResponse } from "../api/api" import PostChatSuggestions from './PostChatSuggestions' +import { useAuth } from '../context/AuthContext' const SAMPLE_MESSAGES = [ { text: "Hi, I'm MindMate! How can I support you today?", sender: 'ai' } @@ -10,7 +11,10 @@ const SAMPLE_MESSAGES = [ const INACTIVITY_TIMEOUT = 30000 // 30 seconds of inactivity before showing suggestions const ChatBox = () => { - const [messages, setMessages] = useState(SAMPLE_MESSAGES) + const { user } = useAuth() + const [messages, setMessages] = useState([ + { text: user?.name ? `Hi ${user.name}, how can I support you today?` : "Hi, I'm MindMate! How can I support you today?", sender: 'ai' } + ]) const [input, setInput] = useState('') const [isTyping, setIsTyping] = useState(false) const [showSuggestions, setShowSuggestions] = useState(false) @@ -66,7 +70,9 @@ const ChatBox = () => { }, [showSuggestions, messages.length]) const handleReset = () => { - setMessages(SAMPLE_MESSAGES) + setMessages([ + { text: user?.name ? `Hi ${user.name}, how can I support you today?` : "Hi, I'm MindMate! How can I support you today?", sender: 'ai' } + ]) setInput('') setIsTyping(false) setShowSuggestions(false) diff --git a/app/frontend/src/components/MoodTracker.jsx b/app/frontend/src/components/MoodTracker.jsx index 0ffdf1f..c6428fe 100644 --- a/app/frontend/src/components/MoodTracker.jsx +++ b/app/frontend/src/components/MoodTracker.jsx @@ -1,6 +1,7 @@ import { useState, useEffect } from 'react' import { motion, AnimatePresence } from 'framer-motion' import { Line } from 'react-chartjs-2' +import { useAuth } from '../context/AuthContext' import { Chart as ChartJS, CategoryScale, @@ -46,6 +47,7 @@ const SAMPLE_HISTORY = [ ] const MoodTracker = ({ setMood }) => { + const { user } = useAuth() const [selectedMood, setSelectedMood] = useState(null) const [moodHistory, setMoodHistory] = useState(SAMPLE_HISTORY) const [isOffline, setIsOffline] = useState(false) @@ -215,7 +217,7 @@ const MoodTracker = ({ setMood }) => { textAlign: 'center' }} > - How are you feeling today? + {user?.name ? `How are you feeling today, ${user.name}?` : "How are you feeling today?"} { fontSize: '1.1rem' }} > - It's okay to feel different every day. Let's keep tracking together. + {user?.name + ? `${user.name}, it's okay to feel different every day. Let's keep tracking together.` + : "It's okay to feel different every day. Let's keep tracking together."} {isOffline && null} diff --git a/app/frontend/src/components/PostChatSuggestions.jsx b/app/frontend/src/components/PostChatSuggestions.jsx index d57d767..072fd83 100644 --- a/app/frontend/src/components/PostChatSuggestions.jsx +++ b/app/frontend/src/components/PostChatSuggestions.jsx @@ -1,5 +1,6 @@ import { useState } from 'react' import { motion, AnimatePresence } from 'framer-motion' +import { useAuth } from '../context/AuthContext' const MOTIVATIONAL_QUOTES = [ "You've survived 100% of your worst days.", @@ -207,6 +208,7 @@ const QuoteCard = ({ onClose }) => { } const ActivityCard = ({ onClose }) => { + const { user } = useAuth() const randomActivity = ACTIVITY_SUGGESTIONS[Math.floor(Math.random() * ACTIVITY_SUGGESTIONS.length)] return ( @@ -229,7 +231,7 @@ const ActivityCard = ({ onClose }) => { marginBottom: 'var(--spacing-md)', color: 'var(--color-text-accent)' }}> - Suggested Activity + {user?.name ? `${user.name}, here's a suggested activity` : 'Suggested Activity'} { } const ClosingMessage = ({ onReset }) => { + const { user } = useAuth() + return ( { marginBottom: 'var(--spacing-lg)' }} > - Thank you for checking in. I'm always here when you need to talk. + {user?.name + ? `Thank you for checking in, ${user.name}. I'm always here when you need to talk.` + : "Thank you for checking in. I'm always here when you need to talk."} { } const PostChatSuggestions = ({ onClose, onReset }) => { + const { user } = useAuth() const [activeModal, setActiveModal] = useState(null) const [showClosingMessage, setShowClosingMessage] = useState(false) @@ -342,7 +349,9 @@ const PostChatSuggestions = ({ onClose, onReset }) => { color: 'var(--color-text-accent)', textAlign: 'center' }}> - Thank you for sharing. Would you like to try one of these self-care activities? + {user?.name + ? `${user.name}, would you like to try one of these self-care activities?` + : "Thank you for sharing. Would you like to try one of these self-care activities?"}
{ const [typedText, setTypedText] = useState('') const [responses, setResponses] = useState({}) const [savingResponses, setSavingResponses] = useState(false) - const { user, isAuthenticated } = useAuth() + const { user, isAuthenticated, updateUser } = useAuth() // Add a separate effect to log authentication status for debugging useEffect(() => { @@ -174,15 +174,21 @@ const WelcomePrompts = ({ onComplete }) => { } } - const handleSubmit = (e) => { + const handleSubmit = async (e) => { e.preventDefault() // Save the current answer to responses object if (prompts[currentPrompt]) { - setResponses(prev => ({ - ...prev, + const currentResponse = { + ...responses, [prompts[currentPrompt]]: answer - })) + } + setResponses(currentResponse) + + // If this is the name prompt, update the user's name + if (prompts[currentPrompt] === "What's your name?" && answer.trim()) { + updateUser({ ...user, name: answer.trim() }) + } } if (currentPrompt < prompts.length - 1) {