RCE fix

app/components/SpeechBubble.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState, useCallback, useRef } from 'react';
-import { frogMessages } from '../config/messages';
+import { useMessages } from 'next-intl';
+import { getRandomEmoji } from '../config/emojis';
 
 // Increase visibility duration for speech bubbles
 const VISIBILITY_MS = 3000; // 3 seconds for message visibility
@@ -14,18 +15,51 @@ export function SpeechBubble({ triggerCount }: SpeechBubbleProps) {
   const [message, setMessage] = useState('');
   const [isVisible, setIsVisible] = useState(false);
   const [messageQueue, setMessageQueue] = useState<string[]>([]);
+  const allMessages = useMessages();
+  const messagesRef = useRef<string[]>([]);
   const lastTriggerTime = useRef(0);
   const showTimeRef = useRef<number>(0);
   const lastFadeTime = useRef(0);
   
+  // Load messages when component mounts or language changes
+  useEffect(() => {
+    // Only run if we haven't loaded messages yet
+    if (messagesRef.current.length > 0) return;
+    
+    // Get the character messages from the messages object
+    try {
+      const characterMessages = allMessages.character;
+      
+      if (characterMessages && typeof characterMessages === 'object') {
+        // Convert object values to array
+        const messageArray = Object.values(characterMessages) as string[];
+        
+        if (messageArray.length === 0) {
+          console.error(`No character messages found! Expected messages in 'character' namespace but got none.`);
+          return;
+        }
+        
+        console.log(`Loaded ${messageArray.length} character messages`);
+        messagesRef.current = messageArray;
+      } else {
+        console.error(`Character messages not found or invalid format:`, characterMessages);
+      }
+    } catch (error) {
+      console.error(`Error loading character messages:`, error);
+    }
+  }, [allMessages]); // Depend on allMessages to reload when they change
+
   const getRandomMessage = useCallback(() => {
-    const randomIndex = Math.floor(Math.random() * frogMessages.length);
-    return frogMessages[randomIndex];
-  }, []);
+    const currentMessages = messagesRef.current;
+    if (currentMessages.length === 0) return '';
+    const randomIndex = Math.floor(Math.random() * currentMessages.length);
+    const message = currentMessages[randomIndex];
+    return `${message} ${getRandomEmoji()}`;
+  }, []); // No dependencies needed since we use ref
 
   // Handle new trigger events
   useEffect(() => {
-    if (triggerCount === 0) return;
+    if (triggerCount === 0 || messagesRef.current.length === 0) return;
     
     const now = Date.now();
     const timeSinceLastFade = now - lastFadeTime.current;
@@ -33,7 +67,9 @@ export function SpeechBubble({ triggerCount }: SpeechBubbleProps) {
     // If we're in cooldown, or a message is visible, queue the new message
     if (timeSinceLastFade < COOLDOWN_MS || isVisible) {
       const newMessage = getRandomMessage();
-      setMessageQueue(prev => [...prev, newMessage]);
+      if (newMessage) {
+        setMessageQueue(prev => [...prev, newMessage]);
+      }
       return;
     }
 
@@ -41,9 +77,11 @@ export function SpeechBubble({ triggerCount }: SpeechBubbleProps) {
     lastTriggerTime.current = now;
     showTimeRef.current = now;
     const newMessage = getRandomMessage();
-    setMessage(newMessage);
-    setIsVisible(true);
-  }, [triggerCount, getRandomMessage, isVisible]);
+    if (newMessage) {
+      setMessage(newMessage);
+      setIsVisible(true);
+    }
+  }, [triggerCount, isVisible, getRandomMessage]);
 
   // Handle message queue
   useEffect(() => {
@@ -76,19 +114,16 @@ export function SpeechBubble({ triggerCount }: SpeechBubbleProps) {
   }, [isVisible]);
 
   return (
-    <div 
-      className={`absolute -top-24 left-1/2 -translate-x-1/2 bg-white dark:bg-slate-800 
+    <div
+      className={`absolute -top-24 bg-white dark:bg-slate-800
                   px-4 py-2 rounded-xl shadow-lg z-20 transition-opacity duration-300
                   ${isVisible ? 'opacity-100 animate-float' : 'opacity-0 pointer-events-none'}`}
+      style={{
+        left: '50%',
+        transform: 'translateX(-50%)'
+      }}
     >
-      <div className="relative">
-        {message}
-        <div className="absolute -bottom-6 left-1/2 -translate-x-1/2 w-0 h-0 
-                      border-l-[8px] border-l-transparent
-                      border-r-[8px] border-r-transparent
-                      border-t-[8px] border-t-white
-                      dark:border-t-slate-800" />
-      </div>
+      {message}
     </div>
   );
 }