@ethora/chat-component-rn 26.9.0 → 26.10.0

package/src/components/MainComponents/ChatWrapper.tsx

@@ -18,7 +18,7 @@ import {Overlay, StyledModal} from '../styled/MediaModal';
 import ConnectionBanner from './ConnectionBanner';
 import {Message} from '../MessageBubble/Message';
 import {IConfig, IRoom, MessageProps, ModalType, User} from '../../types/types';
-import {useXmppClient} from '../../context/xmppProvider';
+import {useXmppClient, SESSION_LOST_EVENT} from '../../context/xmppProvider';
 import LoginForm from '../AuthForms/Login';
 import {RootState} from '../../roomStore';
 import Loader from '../styled/Loader';
@@ -45,6 +45,7 @@ import {normalizeRoomJid} from '../../helpers/normalizeRoomJid';
 import {buildSeedRoom} from '../../helpers/buildSeedRoom';
 import {shallowEqual} from '../../helpers/shallowEqual';
 import {InteractionsOverlayProvider} from '../MessageBubble/InteractionsOverlay';
+import {useJumpThread} from '../../helpers/jumpThread';
 
 interface ChatWrapperProps {
   token?: string;
@@ -81,6 +82,22 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
   const [isInited, setInited] = useState(false);
   const [showModal, setShowModal] = useState(false);
   const [errorMsg, setErrorMsg] = useState<string | null>(null);
+  // Set when the session ended on its own (the password is gone for
+  // good): the overlay then says so instead of "Connection error".
+  const [sessionLost, setSessionLost] = useState(false);
+
+  // The host may keep <Chat> mounted after the session ended: say what
+  // happened on the chat's own screen, with a way to try again (the
+  // host's refresh may work later, or the host may have signed in anew).
+  useEffect(() => {
+    const sub = DeviceEventEmitter.addListener(SESSION_LOST_EVENT, () => {
+      setSessionLost(true);
+      setErrorMsg(null);
+      setShowModal(true);
+      setInited(false);
+    });
+    return () => sub.remove();
+  }, []);
   // const [isModalDeleteOpen, setIsModalDeleteOpen] = useState(false);
 
   const [isChatVisible, setIsChatVisible] = useState(false);
@@ -107,10 +124,28 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
     activeRoomJID ? state.rooms.rooms[activeRoomJID]?.messages : undefined,
   );
 
-  const activeMessage = useMemo(
-    () => activeRoomMessages?.find(message => message?.activeMessage),
-    [activeRoomMessages],
-  );
+  // The thread's parent: the live message flagged active or, when the thread
+  // was opened on a message that exists only in a jump window (or that a jump
+  // to a thread reply fetched), the window's copy or the one kept by
+  // helpers/jumpThread, which outlives the window. Reads the active room's
+  // message list (granular), not the whole rooms map.
+  const jumpWindow = useSelector((state: RootState) => state.rooms.jumpWindow);
+  const jumpThread = useJumpThread();
+  const activeMessage = useMemo(() => {
+    if (!activeRoomJID) {return undefined;}
+    const live = activeRoomMessages?.find(message => message?.activeMessage);
+    if (live) {return live;}
+    if (jumpWindow && jumpWindow.roomJID === activeRoomJID) {
+      const inWindow = jumpWindow.messages.find(
+        message => message?.activeMessage,
+      );
+      if (inWindow) {return inWindow;}
+    }
+    if (jumpThread?.parent && jumpThread.roomJID === activeRoomJID) {
+      return {...jumpThread.parent, activeMessage: true};
+    }
+    return undefined;
+  }, [activeRoomMessages, activeRoomJID, jumpWindow, jumpThread]);
 
   const handleChangeChat = (chat: IRoom) => {
     dispatch(setCurrentRoom({roomJID: chat.jid}));
@@ -485,15 +520,21 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
                 marginBottom: 8,
                 color: theme.text,
               }}>
-              Connection error
+              {sessionLost ? t('session.expiredTitle') : t('connection.errorTitle')}
             </Text>
-            <Text style={{fontSize: 13, color: theme.textSecondary, marginBottom: 16}}>
-              {errorMsg ?? 'Something went wrong while connecting to chat.'}
+            <Text
+              testID="chat-error-body"
+              style={{fontSize: 13, color: theme.textSecondary, marginBottom: 16}}
+            >
+              {errorMsg ??
+                (sessionLost ? t('session.expiredBody') : t('connection.errorBody'))}
             </Text>
             <Pressable
+              testID="chat-error-retry"
               onPress={() => {
                 setShowModal(false);
                 setErrorMsg(null);
+                setSessionLost(false);
                 setInited(false);
                 // Signal a clean re-bootstrap. XmppProvider listens and
                 // resets its state machine so the next effect run resolves
@@ -507,7 +548,7 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
                 backgroundColor: pressed ? '#0040A0' : theme.primary,
                 alignItems: 'center',
               })}>
-              <Text style={{color: theme.textOnPrimary, fontWeight: '600'}}>Retry</Text>
+              <Text style={{color: theme.textOnPrimary, fontWeight: '600'}}>{t('action.retry')}</Text>
             </Pressable>
           </View>
         </Overlay>

package/src/components/MainComponents/MediaMessage.tsx

@@ -189,6 +189,20 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
         originalName: (message as any)?.originalName,
       }
     );
+    // The sender's own voice note plays from its local file while it
+    // uploads, waveform and all — no placeholder card in between.
+    if (message?.pending && isAudioPayload && (messageText || location)) {
+      return (
+        <AudioMessage
+          src={messageText || location || ''}
+          mimeType={mimeType}
+          fileName={displayName}
+          duration={(message as any)?.duration}
+          waveForm={(message as any)?.waveForm}
+          isUser={isUser}
+        />
+      );
+    }
     if (message?.pending) {
       return (
         <PendingMediaMessage
@@ -237,6 +251,7 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
             originalName={(message as any)?.originalName}
             duration={(message as any)?.duration}
             waveForm={(message as any)?.waveForm}
+            isUser={isUser}
           />
         );
       }
@@ -249,6 +264,7 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
             originalName={(message as any)?.originalName}
             duration={(message as any)?.duration}
             waveForm={(message as any)?.waveForm}
+            isUser={isUser}
           />
         );
       }
@@ -270,6 +286,7 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
               originalName={(message as any)?.originalName}
               duration={(message as any)?.duration}
               waveForm={(message as any)?.waveForm}
+              isUser={isUser}
             />
           );
         }