Fix Matrix chat message display and React hook violations

- Fixed sender messages not appearing in BaseChat by ensuring all messages emit display events
- Resolved duplicate Matrix invitation notifications by introducing dedicated matrixRoomInvitation event
- Fixed persistent TypeError: Cannot read properties of undefined (reading 'length') errors:
  * Added robust null checking for messages.length, commandHistory.length, friends.length
  * Fixed lastMessage.content array/string handling in AI response sync
  * Added safe sessionId.substring access with null checks
- Fixed React Rules of Hooks violations by moving conditional returns after all hook calls
- Fixed useEffect dependency array size changes with consistent null fallbacks
- Updated notification theming to use CSS variables for dark mode compatibility
- Added message deduplication in useSessionSharing to prevent duplicate processing
- Enhanced AI response sync to only sync locally generated responses (not Matrix messages)

All TypeErrors and React warnings resolved. Matrix chat now properly displays sender messages
and handles notifications without duplication.

Author: spencrmartin

ui/desktop/src/components/ChatInput.tsx

@@ -39,7 +39,9 @@ import { useSessionSharing } from '../hooks/useSessionSharing';
 import SessionSharing from './collaborative/SessionSharing';
 import { CollaborativeButton } from './collaborative';
 import EnhancedMentionPopover from './EnhancedMentionPopover';
+import { useMatrix } from '../contexts/MatrixContext';
 
+// Force rebuild timestamp: 2025-01-15T01:00:00Z - All .length errors fixed
 
 interface QueuedMessage {
   id: string;
@@ -352,54 +354,66 @@ export default function ChatInput({
   const [isAddCommandModalOpen, setIsAddCommandModalOpen] = useState(false);
   const [customCommands, setCustomCommands] = useState<CustomCommand[]>([]);
 
-  // Check if we're in Matrix mode by looking at URL parameters
-  const isInMatrixMode = window.location.search.includes('matrixMode=true');
+  // Simple Matrix detection: if sessionId looks like a Matrix room ID, it's a Matrix chat
+  const isMatrixRoom = sessionId && sessionId.startsWith('!');
 
-  // Extract Matrix room ID from URL parameters if in Matrix mode
-  const urlParams = new URLSearchParams(window.location.search);
-  const matrixRoomId = urlParams.get('matrixRoomId');
+  // Get Matrix context for current user information
+  const { currentUser } = useMatrix();
 
-  // Session sharing hook - use Matrix room ID as sessionId in Matrix mode
+  // Session sharing hook - simplified approach for Matrix rooms
   const sessionSharing = useSessionSharing({
-    sessionId: isInMatrixMode && matrixRoomId ? matrixRoomId : (sessionId || 'default'),
-    sessionTitle: isInMatrixMode && matrixRoomId ? `Matrix Room ${matrixRoomId.substring(0, 8)}` : `Chat Session ${sessionId?.substring(0, 8) || 'Default'}`,
+    sessionId: sessionId, // Use the sessionId as-is (Matrix room ID or regular session ID)
+    sessionTitle: isMatrixRoom && sessionId ? `Matrix Room ${sessionId.substring(0, 8)}` : `Chat Session ${sessionId?.substring(0, 8) || 'default'}`,
     messages: messages, // Always sync messages
     onMessageSync: (message) => {
-      // Handle synced messages from session participants
-      console.log('💬 Synced message from shared session:', message);
-      // Add the synced message to local chat
+      console.log('💬 ChatInput: Received message from useSessionSharing:', message);
+      
+      // For Matrix rooms, messages from Matrix should appear normally
+      // For regular sessions, messages should also appear normally
+      // The key is that useSessionSharing handles both cases the same way
       if (append) {
         append(message);
+      } else {
+        console.warn('⚠️ ChatInput: append function is not available!');
       }
     },
-    initialRoomId: isInMatrixMode && matrixRoomId ? matrixRoomId : undefined, // Pass Matrix room ID for Matrix mode
+    initialRoomId: isMatrixRoom ? sessionId : null, // Pass Matrix room ID if it's a Matrix room
     onParticipantJoin: (participant) => {
-      if (!isInMatrixMode) {
-        console.log('👥 Participant joined session:', participant);
-      }
+      console.log('👥 Participant joined session:', participant);
     },
     onParticipantLeave: (userId) => {
-      if (!isInMatrixMode) {
-        console.log('👋 Participant left session:', userId);
-      }
+      console.log('👋 Participant left session:', userId);
     },
   });
 
   // Listen for AI responses to sync to Matrix
+  // FIXED: Robust null checking to prevent "Cannot read properties of undefined (reading 'length')" error
+  // Updated: Fixed all commandHistory.length accesses with safeCommandHistory
+  // Final fix: All .length accesses now properly null-checked
   useEffect(() => {
-    if (!sessionSharing.isSessionActive || !messages.length) return;
+    if (!sessionSharing.isSessionActive || !messages || !Array.isArray(messages) || messages.length === 0) return;
 
     const lastMessage = messages[messages.length - 1];
 
     // Check if the last message is an AI response (assistant role) and not already synced
-    if (lastMessage && lastMessage.role === 'assistant' && !lastMessage.id?.startsWith('shared-') && !lastMessage.id?.startsWith('matrix-')) {
+    // Also check if it's not from Matrix (to prevent sync loops)
+    if (lastMessage && 
+        lastMessage.role === 'assistant' && 
+        !lastMessage.id?.startsWith('shared-') && 
+        !lastMessage.id?.startsWith('matrix-') &&
+        !lastMessage.sender) { // Messages from Matrix have sender info, local AI responses don't
       console.log('🤖 Syncing AI response to session:', lastMessage);
 
-      // Extract text content from the message
-      const textContent = lastMessage.content
-        .filter(c => c.type === 'text')
-        .map(c => c.text)
-        .join('');
+      // Extract text content from the message - with robust null checking
+      let textContent = '';
+      if (lastMessage.content && Array.isArray(lastMessage.content)) {
+        textContent = lastMessage.content
+          .filter(c => c && c.type === 'text')
+          .map(c => c.text || '')
+          .join('');
+      } else if (typeof lastMessage.content === 'string') {
+        textContent = lastMessage.content;
+      }
 
       if (textContent.trim()) {
         sessionSharing.syncMessage({
@@ -476,14 +490,14 @@ export default function ChatInput({
   // Handle recipe prompt updates
   useEffect(() => {
     // If recipe is accepted and we have an initial prompt, and no messages yet, and we haven't set it before
-    if (recipeAccepted && initialPrompt && messages.length === 0) {
+    if (recipeAccepted && initialPrompt && messages && Array.isArray(messages) && messages.length === 0) {
       setDisplayValue(initialPrompt);
       setValue(initialPrompt);
       setTimeout(() => {
         textAreaRef.current?.focus();
       }, 0);
     }
-  }, [recipeAccepted, initialPrompt, messages.length]);
+  }, [recipeAccepted, initialPrompt, messages]);
 
   // Draft functionality - load draft if no initial value or recipe
   useEffect(() => {
@@ -1060,11 +1074,14 @@ export default function ChatInput({
     // Save current input if we're just starting to navigate history
     if (historyIndex === -1) {
       setSavedInput(displayValue || '');
-      setIsInGlobalHistory(commandHistory.length === 0);
+      // Determine which history we're using - ensure commandHistory is always an array
+      const safeCommandHistory = commandHistory || [];
+      setIsInGlobalHistory(safeCommandHistory.length === 0);
     }
 
-    // Determine which history we're using
-    const currentHistory = isInGlobalHistory ? globalHistory : commandHistory;
+    // Determine which history we're using - ensure commandHistory is always an array
+    const safeCommandHistory = commandHistory || [];
+    const currentHistory = isInGlobalHistory ? globalHistory : safeCommandHistory;
     let newIndex = historyIndex;
     let newValue = '';
 
@@ -1087,11 +1104,11 @@ export default function ChatInput({
         // Still have items in current history
         newIndex = historyIndex - 1;
         newValue = currentHistory[newIndex];
-      } else if (isInGlobalHistory && commandHistory.length > 0) {
+      } else if (isInGlobalHistory && safeCommandHistory.length > 0) {
         // Switch to chat history
         setIsInGlobalHistory(false);
-        newIndex = commandHistory.length - 1;
-        newValue = commandHistory[newIndex];
+        newIndex = safeCommandHistory.length - 1;
+        newValue = safeCommandHistory[newIndex];
       } else {
         // Return to original input
         newIndex = -1;
@@ -2058,8 +2075,8 @@ export default function ChatInput({
         </Tooltip>
         <div className="w-px h-4 bg-border-default mx-2" />
 
-        {/* Session Sharing Component - disabled in Matrix mode */}
-        {!isInMatrixMode && (
+        {/* Session Sharing Component - disabled for Matrix rooms */}
+        {!isMatrixRoom && (
           <SessionSharing
             sessionSharing={sessionSharing}
             shouldShowIconOnly={shouldShowIconOnly}
@@ -2088,7 +2105,7 @@ export default function ChatInput({
                 setView={setView}
                 alerts={alerts}
                 recipeConfig={recipeConfig}
-                hasMessages={messages.length > 0}
+                hasMessages={messages && Array.isArray(messages) && messages.length > 0}
                 shouldShowIconOnly={shouldShowIconOnly}
               />
             </div>

ui/desktop/src/components/CollaborationInviteNotification.tsx

@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Users, X, Check, Clock } from 'lucide-react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import { useMatrix } from '../contexts/MatrixContext';
-import { GooseChatMessage } from '../services/MatrixService';
+import { GooseChatMessage, matrixService } from '../services/MatrixService';
 
 interface CollaborationInviteNotificationProps {
   className?: string;
@@ -21,22 +21,82 @@ const CollaborationInviteNotification: React.FC<CollaborationInviteNotificationP
   } = useMatrix();
 
   const navigate = useNavigate();
+  const location = useLocation();
   const [pendingInvites, setPendingInvites] = useState<GooseChatMessage[]>([]);
   const [dismissedInvites, setDismissedInvites] = useState<Set<string>>(new Set());
 
-  // Listen for Goose messages that could be collaboration opportunities
+  // Helper function to get current active Matrix room ID if in shared session mode
+  const getCurrentActiveMatrixRoom = () => {
+    const searchParams = new URLSearchParams(location.search);
+    const isMatrixMode = searchParams.get('matrixMode') === 'true';
+    const matrixRoomId = searchParams.get('matrixRoomId');
+    
+    return isMatrixMode && matrixRoomId ? matrixRoomId : null;
+  };
+
+  // Listen for Matrix room invitations and Goose messages
   useEffect(() => {
     if (!isConnected) return;
 
-    const unsubscribe = onGooseMessage((message: GooseChatMessage) => {
+    // Handler for Matrix room invitations
+    const handleMatrixRoomInvitation = (invitationData: any) => {
+      console.log('🔔 Received Matrix room invitation:', invitationData);
+      
+      // Skip notifications for the currently active Matrix room (shared session)
+      const activeMatrixRoom = getCurrentActiveMatrixRoom();
+      if (activeMatrixRoom && invitationData.roomId === activeMatrixRoom) {
+        console.log('🔔 Skipping Matrix invitation notification for active room:', invitationData.roomId);
+        return;
+      }
+
+      // Convert Matrix invitation to GooseChatMessage format for UI compatibility
+      const collaborationInvite: GooseChatMessage = {
+        type: 'goose.collaboration.invite',
+        messageId: `matrix-invite-${invitationData.roomId}-${Date.now()}`,
+        content: `${invitationData.inviterName} invited you to collaborate in a Matrix room`,
+        sender: invitationData.inviter,
+        timestamp: invitationData.timestamp,
+        roomId: invitationData.roomId,
+        metadata: {
+          isFromSelf: false,
+          invitationType: 'matrix_room',
+          sessionId: `matrix-${invitationData.roomId}`,
+          sessionTitle: `Matrix Collaboration with ${invitationData.inviterName}`,
+          roomId: invitationData.roomId,
+          inviterName: invitationData.inviterName,
+        },
+      };
+
+      // Add to pending invites if not already dismissed
+      setPendingInvites(prev => {
+        const exists = prev.some(invite => invite.messageId === collaborationInvite.messageId);
+        if (!exists && !dismissedInvites.has(collaborationInvite.messageId)) {
+          return [...prev, collaborationInvite];
+        }
+        return prev;
+      });
+    };
+
+    // Listen for direct Matrix room invitations (no duplicates)
+    matrixService.on('matrixRoomInvitation', handleMatrixRoomInvitation);
+
+    // Listen for Goose messages that could be collaboration opportunities
+    const unsubscribeGooseMessages = onGooseMessage((message: GooseChatMessage) => {
       // Only show messages that are not from self
       if (message.metadata?.isFromSelf) {
         console.log('💬 Ignoring message from self');
         return;
       }
 
-      // Handle explicit collaboration invites
-      if (message.type === 'goose.collaboration.invite') {
+      // Skip notifications for messages from the currently active Matrix room (shared session)
+      const activeMatrixRoom = getCurrentActiveMatrixRoom();
+      if (activeMatrixRoom && message.roomId === activeMatrixRoom) {
+        console.log('🔔 Skipping collaboration notification for message from active Matrix room:', message.roomId);
+        return;
+      }
+
+      // Handle explicit collaboration invites (but skip Matrix room invitations since they're handled above)
+      if (message.type === 'goose.collaboration.invite' && message.metadata?.invitationType !== 'matrix_room') {
         console.log('🔔 Received collaboration invite notification:', message);
 
         // Add to pending invites if not already dismissed
@@ -89,7 +149,12 @@ const CollaborationInviteNotification: React.FC<CollaborationInviteNotificationP
       }
     });
 
-    return unsubscribe;
+    return () => {
+      // Remove Matrix room invitation listener
+      matrixService.off('matrixRoomInvitation', handleMatrixRoomInvitation);
+      // Remove Goose message listener
+      unsubscribeGooseMessages();
+    };
   }, [isConnected, onGooseMessage, dismissedInvites]);
 
   const handleAcceptInvite = async (invite: GooseChatMessage) => {
@@ -227,35 +292,35 @@ const CollaborationInviteNotification: React.FC<CollaborationInviteNotificationP
             animate={{ opacity: 1, x: 0, scale: 1 }}
             exit={{ opacity: 0, x: 300, scale: 0.8 }}
             transition={{ type: "spring", stiffness: 300, damping: 30 }}
-            className="bg-white border border-blue-200 rounded-lg shadow-lg p-4 max-w-sm"
+            className="bg-background-default border border-borderStandard rounded-lg shadow-lg p-4 max-w-sm"
           >
             <div className="flex items-start gap-3">
-              <div className="flex-shrink-0 w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
-                <Users className="w-5 h-5 text-blue-600" />
+              <div className="flex-shrink-0 w-10 h-10 bg-bgSubtle rounded-full flex items-center justify-center">
+                <Users className="w-5 h-5 text-accent" />
               </div>
 
               <div className="flex-1 min-w-0">
                 <div className="flex items-center justify-between mb-1">
-                  <h4 className="text-sm font-semibold text-gray-900">
+                  <h4 className="text-sm font-semibold text-textStandard">
                     {invite.type === 'goose.collaboration.invite' ? 'Collaboration Invite' : 'New Message'}
                   </h4>
                   <button
                     onClick={() => handleDismissInvite(invite)}
-                    className="text-gray-400 hover:text-gray-600 transition-colors"
+                    className="text-textSubtle hover:text-textStandard transition-colors"
                   >
                     <X className="w-4 h-4" />
                   </button>
                 </div>
 
-                <p className="text-sm text-gray-600 mb-2">
+                <p className="text-sm text-textStandard mb-2">
                   <span className="font-medium">{getSenderName(invite)}</span> {
                     invite.type === 'goose.collaboration.invite' 
                       ? 'invited you to collaborate' 
                       : 'sent you a message'
                   }
                 </p>
 
-                <p className="text-xs text-gray-500 mb-3 line-clamp-2">
+                <p className="text-xs text-textSubtle mb-3 line-clamp-2">
                   {invite.content}
                 </p>
 
@@ -270,14 +335,14 @@ const CollaborationInviteNotification: React.FC<CollaborationInviteNotificationP
 
                   <button
                     onClick={() => handleDeclineInvite(invite)}
-                    className="flex items-center gap-1 px-3 py-1.5 border border-gray-300 text-gray-700 text-xs rounded hover:bg-gray-50 transition-colors"
+                    className="flex items-center gap-1 px-3 py-1.5 border border-borderStandard text-textStandard text-xs rounded hover:bg-bgSubtle transition-colors"
                   >
                     <X className="w-3 h-3" />
                     Decline
                   </button>
                 </div>
 
-                <div className="flex items-center gap-1 mt-2 text-xs text-gray-400">
+                <div className="flex items-center gap-1 mt-2 text-xs text-textSubtle">
                   <Clock className="w-3 h-3" />
                   {invite.timestamp.toLocaleTimeString()}
                 </div>