Add personalized userName support across main components

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)

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?"}
       </motion.h2>
 
       <motion.p
@@ -229,7 +231,9 @@ const MoodTracker = ({ setMood }) => {
           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."}
       </motion.p>
 
       {isOffline && null}

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'}
       </h3>
       <motion.div
         initial={{ opacity: 0, y: 20 }}
@@ -262,6 +264,8 @@ const ActivityCard = ({ onClose }) => {
 }
 
 const ClosingMessage = ({ onReset }) => {
+  const { user } = useAuth()
+
   return (
     <motion.div
       className="card"
@@ -284,7 +288,9 @@ const ClosingMessage = ({ onReset }) => {
           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."}
       </motion.p>
       <motion.button
         className="button"
@@ -306,6 +312,7 @@ const ClosingMessage = ({ onReset }) => {
 }
 
 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?"}
         </h3>
         <div style={{
           display: 'grid',

app/frontend/src/components/WelcomePrompts.jsx

@@ -32,7 +32,7 @@ const WelcomePrompts = ({ onComplete }) => {
   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) {