diff --git a/maternal-web/components/features/ai-chat/AIChatInterface.tsx b/maternal-web/components/features/ai-chat/AIChatInterface.tsx index f825366..4c226a4 100644 --- a/maternal-web/components/features/ai-chat/AIChatInterface.tsx +++ b/maternal-web/components/features/ai-chat/AIChatInterface.tsx @@ -30,11 +30,43 @@ const suggestedQuestions = [ 'Tips for better sleep routine', ]; +const thinkingMessages = [ + 'Gathering baby wisdom...', + 'Consulting the baby books...', + 'Mixing up the perfect answer...', + 'Warming up some advice...', + 'Preparing your bottle of knowledge...', + 'Counting tiny fingers and toes...', + 'Connecting the building blocks...', + 'Peeking into the toy box...', + 'Arranging the puzzle pieces...', + 'Stirring the baby food jar...', + 'Polishing the pacifier of wisdom...', + 'Tiptoeing through naptime...', + 'Organizing the diaper bag...', + 'Wrapping up your answer with love...', + 'Brewing a warm cup of guidance...', + 'Knitting together some thoughts...', + 'Tucking in the details...', + 'Sprinkling some magic dust...', + 'Humming a lullaby while I think...', +]; + +// Get a random selection of 3-5 thinking messages +const getRandomThinkingMessages = () => { + const count = Math.floor(Math.random() * 3) + 3; // 3 to 5 + const shuffled = [...thinkingMessages].sort(() => Math.random() - 0.5); + return shuffled.slice(0, count); +}; + export const AIChatInterface: React.FC = () => { const [messages, setMessages] = useState([]); const [input, setInput] = useState(''); const [isLoading, setIsLoading] = useState(false); + const [currentThinkingMessages, setCurrentThinkingMessages] = useState([]); + const [currentThinkingIndex, setCurrentThinkingIndex] = useState(0); const messagesEndRef = useRef(null); + const thinkingIntervalRef = useRef(null); const { user } = useAuth(); const scrollToBottom = () => { @@ -45,6 +77,32 @@ export const AIChatInterface: React.FC = () => { scrollToBottom(); }, [messages]); + // Cycle through thinking messages while loading + useEffect(() => { + if (isLoading) { + const randomMessages = getRandomThinkingMessages(); + setCurrentThinkingMessages(randomMessages); + setCurrentThinkingIndex(0); + + thinkingIntervalRef.current = setInterval(() => { + setCurrentThinkingIndex((prev) => (prev + 1) % randomMessages.length); + }, 2000); // Change message every 2 seconds + } else { + if (thinkingIntervalRef.current) { + clearInterval(thinkingIntervalRef.current); + thinkingIntervalRef.current = null; + } + setCurrentThinkingMessages([]); + setCurrentThinkingIndex(0); + } + + return () => { + if (thinkingIntervalRef.current) { + clearInterval(thinkingIntervalRef.current); + } + }; + }, [isLoading]); + const handleSend = async (message?: string) => { const messageText = message || input.trim(); if (!messageText || isLoading) return; @@ -259,8 +317,14 @@ export const AIChatInterface: React.FC = () => { }} > - - Thinking... + + {currentThinkingMessages[currentThinkingIndex] || 'Thinking...'}