Add rotating thinking messages to AI chat assistant

- Replace static "Thinking..." with 19 creative baby-themed messages
- Randomly select 3-5 messages per loading session
- Rotate through messages every 2 seconds with smooth transitions
- Messages include: "Gathering baby wisdom...", "Organizing the diaper bag...", etc.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

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<Message[]>([]);
   const [input, setInput] = useState('');
   const [isLoading, setIsLoading] = useState(false);
+  const [currentThinkingMessages, setCurrentThinkingMessages] = useState<string[]>([]);
+  const [currentThinkingIndex, setCurrentThinkingIndex] = useState(0);
   const messagesEndRef = useRef<HTMLDivElement>(null);
+  const thinkingIntervalRef = useRef<NodeJS.Timeout | null>(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 = () => {
               }}
             >
               <CircularProgress size={20} />
-              <Typography variant="body2" color="text.secondary">
-                Thinking...
+              <Typography
+                variant="body2"
+                color="text.secondary"
+                sx={{
+                  transition: 'opacity 0.3s ease-in-out',
+                }}
+              >
+                {currentThinkingMessages[currentThinkingIndex] || 'Thinking...'}
               </Typography>
             </Paper>
           </Box>