@ethora/chat-component-rn 26.7.8 → 26.7.10

package/src/components/MainComponents/ChatRoom.tsx

@@ -6,10 +6,12 @@ import { useDispatch } from 'react-redux';
 import MessageList from './MessageList';
 import SendInput from '../styled/SendInput';
 import {
+  clearReadBoundary,
   clearVisibleRoom,
   deleteRoomMessage,
   setEditAction,
   setLastViewedTimestamp,
+  setReadBoundary,
   setVisibleRoom,
 } from '../../roomStore/roomsSlice';
 import Loader from '../styled/Loader';
@@ -28,6 +30,7 @@ import { IConfig } from '../../types/models/config.model';
 import { useRoomInitialization } from '../../hooks/useRoomInitialization';
 import { useRoomState } from '../../hooks/useRoomState';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { isOwnMessage } from '../../helpers/isOwnMessage';
 import CustomTypingIndicator from '../styled/StyledInputComponents/CustomTypingIndicator';
 // import {PanGestureHandler} from 'react-native-gesture-handler';
 import { FlatList } from 'react-native';
@@ -46,6 +49,10 @@ import {
 } from 'react-native-keyboard-controller';
 import useComposing from '../../hooks/useComposing';
 import { store } from '../../roomStore';
+import {
+  getFlushBoundaryTs,
+  getReadMarkerTimestamp,
+} from '../../helpers/getServerReadTimestamp';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import {
   getInputDockPaddingBottom,
@@ -216,47 +223,100 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
     // Tracks what the user actually saw: `null` while they're at the
     // bottom (safe to mark everything read), or the timestamp of the
     // newest message visible when they scrolled away from it. Reported
-    // by MessageList via onReadBoundaryChange. Without this, leaving a
-    // room (or backgrounding) while scrolled up stamped `now()` as read
-    // and silently discarded genuinely-unread messages. Customer-
-    // reported #33.
-    const readBoundaryRef = useRef<number | null>(null);
+    // by MessageList via onReadBoundaryChange, and mirrored into redux
+    // (`rooms.readBoundaries`) rather than kept only in a local ref - it
+    // is the single source of truth every "leaving this room" path
+    // consults (xmppProvider's AppState background handler, its
+    // `isVisible=false` handler, the live `advance()` effect, and
+    // `useChatRoomFocus`'s `leaveRoom`), not just this component's own
+    // unmount cleanup below. Without a boundary, leaving a room (or
+    // backgrounding) while scrolled up stamped `now()` (bug #33) or,
+    // after the #38 fix, the newest acked message regardless of scroll
+    // position (bug #42) - both silently discard genuinely-unread
+    // messages.
+    //
+    // MessageList reports the boundary from onScroll, which fires on
+    // every frame of a drag (the "back at the bottom" branch re-reports
+    // `null` each time). Mirror only actual CHANGES into redux: an
+    // unconditional dispatch per scroll frame would run the whole
+    // middleware chain and, worse, reset persistenceMiddleware's 200 ms
+    // debounce on every frame, starving the persisted write for as long
+    // as the user keeps scrolling.
+    const lastBoundarySentRef = useRef<number | null>(null);
     const handleReadBoundaryChange = useCallback((boundaryTs: number | null) => {
-      readBoundaryRef.current = boundaryTs;
-    }, []);
+      if (!activeRoomJID) {
+        return;
+      }
+      const next = boundaryTs && boundaryTs > 0 ? boundaryTs : null;
+      if (lastBoundarySentRef.current === next) {
+        return;
+      }
+      lastBoundarySentRef.current = next;
+      dispatch(setReadBoundary({ jid: activeRoomJID, ts: next }));
+    }, [activeRoomJID, dispatch]);
 
     useEffect(() => {
       if (!activeRoomJID) {
         return;
       }
 
-      readBoundaryRef.current = null;
+      lastBoundarySentRef.current = null;
+      dispatch(setReadBoundary({ jid: activeRoomJID, ts: null }));
       dispatch(setVisibleRoom({ roomJID: activeRoomJID }));
       setIsLoadingMore(false);
       return () => {
-        const timestamp = readBoundaryRef.current ?? new Date().getTime();
-        dispatch(
-          setLastViewedTimestamp({
-            chatJID: activeRoomJID,
-            timestamp,
-          }),
+        const state = store.getState();
+        const rooms = state.rooms?.rooms;
+        const heapState = state.roomHeapSlice;
+        const boundaryTs = state.rooms?.readBoundaries?.[activeRoomJID] ?? null;
+        // getReadMarkerTimestamp honours the boundary (the newest message
+        // the user actually reached) when one is set, and otherwise falls
+        // back to the newest server-acked message - never the device
+        // clock: a fast device clock would write a future marker that the
+        // forward-only private-store merge could never correct (bug #38).
+        const timestamp = getReadMarkerTimestamp(
+          rooms?.[activeRoomJID],
+          heapState,
+          boundaryTs,
         );
+        if (timestamp > 0) {
+          dispatch(
+            setLastViewedTimestamp({
+              chatJID: activeRoomJID,
+              timestamp,
+            }),
+          );
+        }
         dispatch(clearVisibleRoom());
         const liveClient = clientRef.current;
         if (liveClient) {
           liveClient
-            .flushLastViewedToPrivateStoreStanza(store.getState().rooms?.rooms, {
+            .flushLastViewedToPrivateStoreStanza(rooms, {
               visibleRoomJID: activeRoomJID,
               // Carry the same boundary to the SERVER marker. Without
-              // this the flush defaults to Date.now() for the visible
+              // this the flush defaults to "everything" for the visible
               // room, so messages the user never scrolled down to come
-              // back as read on the next login — the local count was
+              // back as read on the next login - the local count was
               // right but the server overrode it.
-              visibleRoomTs: readBoundaryRef.current,
+              // Clamped through the same helper as the local stamp -
+              // an unclamped boundary would bypass the newest-acked
+              // ceiling on the one path where a bad value is permanent
+              // (the private-store merge is forward-only, bug #38).
+              visibleRoomTs: getFlushBoundaryTs(
+                rooms?.[activeRoomJID],
+                heapState,
+                boundaryTs,
+              ),
             })
             .catch(() => {});
         }
         dispatch(deleteRoomMessage({ roomJID: activeRoomJID, messageId: 'delimiter-new' }));
+        // The room is genuinely being left (unmount, or activeRoomJID
+        // changed to a different room) - release the boundary now that
+        // it's been consumed, so a stale value can't leak into the next
+        // time this room becomes visible.
+        dispatch(clearReadBoundary({ jid: activeRoomJID }));
+        lastBoundarySentRef.current = null;
         setIsLoadingMore(false);
       };
     }, [activeRoomJID, dispatch]);
@@ -292,6 +352,8 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
     const inputDockPaddingBottom = getInputDockPaddingBottom({
       platform: Platform.OS,
       bottomInset: insets.bottom,
+      configuredPadding: configWithEventHandlers?.inputDockPaddingBottom,
+      hostOwnsLayout: !!configWithEventHandlers?.disableKeyboardAvoidingView,
     });
 
     // Keyboard avoidance is delegated to react-native-keyboard-controller's
@@ -440,7 +502,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
                   CustomMessageComponent ? (
                     <CustomMessageComponent
                       message={decorated.message}
-                      isUser={decorated.message.user.id === user.xmppUsername}
+                      isUser={isOwnMessage(decorated.message, user)}
                       isReply={false}
                     />
                   ) : null

package/src/components/MainComponents/MediaMessage.tsx

@@ -11,7 +11,8 @@ import {
   Text,
   View,
 } from 'react-native';
-import { deriveDisplayFilename, isLikelyAudio } from '../../helpers/mimeToExtension';
+import { isLikelyAudio } from '../../helpers/mimeToExtension';
+import { getDisplayFileName } from '../../helpers/getDisplayFileName';
 import { FileIcon, PlayIcon } from '../../assets/icons';
 import { defaultMediaDims } from '../../helpers/mediaDimensions';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
@@ -148,11 +149,11 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
   const messageText = appendFileToken(rawMessageText, fileToken);
 
   if (mimeType) {
-    const displayName = deriveDisplayFilename({
-      fileName: message?.fileName,
+    const displayName = getDisplayFileName({
       originalName: (message as any)?.originalName,
-      url: rawLocation || rawMessageText,
-      mime: mimeType,
+      fileName: message?.fileName,
+      location: rawLocation || rawMessageText,
+      mimetype: mimeType,
     });
     const isAudioPayload = isLikelyAudio(
       mimeType,
@@ -180,6 +181,7 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
         return (
           <CustomMessageImage
             fileName={displayName}
+            originalName={(message as any)?.originalName}
             // Full-size original: opened by the preview modal.
             fileURL={location || messageText || ''}
             // ...and the thumbnail the bubble actually renders, which is
@@ -192,6 +194,7 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
         return (
           <CustomMessageVideo
             fileName={displayName}
+            originalName={(message as any)?.originalName}
             fileURL={location || ''}
             // `messageText` is the message's locationPreview — the poster
             // frame the backend generated for this video. Handing it over

package/src/components/MainComponents/MessageContainer.tsx

@@ -1,5 +1,6 @@
 import React, { FC, Fragment, useMemo } from 'react';
 import { IConfig, IMessage } from '../../types/types';
+import { isOwnMessage } from '../../helpers/isOwnMessage';
 import DateLabel from '../styled/DateLabel';
 import SystemMessage from './SystemMessage';
 import NewMessageLabel from '../styled/NewMessageLabel';
@@ -46,7 +47,10 @@ export const MessageContainer: FC<MessageContainerProps> = ({
   isReply,
   className,
 }) => {
-  const isUser = message.user.id === walletAddress;
+  // Bug #41: `message.user.id === walletAddress` used to treat two
+  // empty/undefined ids as a match, briefly rendering catch-up messages
+  // from other users as our own. isOwnMessage() never does that.
+  const isUser = isOwnMessage(message, walletAddress);
 
   const messageDate = new Date(message.date);
 

package/src/components/MainComponents/MessageList.tsx

@@ -29,6 +29,7 @@ import { ArowDownIcon } from '../../assets/icons';
 import CustomTypingIndicator from '../styled/StyledInputComponents/CustomTypingIndicator';
 import { getIconColor } from '../../helpers/getIconColor';
 import { getChatBackgroundColor } from '../../helpers/getChatBackground';
+import { isOwnMessage } from '../../helpers/isOwnMessage';
 
 interface MessageListProps<TMessage extends IMessage> {
   CustomMessage?: React.ComponentType<{
@@ -438,7 +439,7 @@ const MessageList = <TMessage extends IMessage>({
           {CustomMessage && (
             <CustomMessage
               message={activeMessage}
-              isUser={activeMessage.user.id === user.walletAddress}
+              isUser={isOwnMessage(activeMessage, user)}
               isReply={isReply}
             />
           )}

package/src/components/Modals/ChatProfileModal/ChatProfileModal.tsx

@@ -26,8 +26,6 @@ import { deleteRoom, updateRoom } from '../../../roomStore/roomsSlice';
 import Loader from '../../styled/Loader';
 import {
   AddNewIcon,
-  BellIcon,
-  BellOffIcon,
   DeleteIcon,
   EditIcon,
   LeaveIcon,
@@ -38,7 +36,7 @@ import { useChatSettingState } from '../../../hooks/useChatSettingState';
 import { chatTextStyle } from '../../../helpers/typography';
 import { getElementFont } from '../../../helpers/getElementFont';
 import { getIconColor } from '../../../helpers/getIconColor';
-import { deleteRoomMember, setRoomMuted } from '../../../networking/api-requests/rooms.api';
+import { deleteRoomMember } from '../../../networking/api-requests/rooms.api';
 import { RoomMember } from '../../../types/models/room.model';
 import { setActiveModal, setSelectedUser } from '../../../roomStore/chatSettingsSlice';
 import { MODAL_TYPES } from '../../../helpers/constants/MODAL_TYPES';
@@ -357,40 +355,8 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
     return () => sub.remove();
   }, [isSearchOpen]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const muteInFlightRef = useRef(false);
-  const toggleMuted = async () => {
-    if (!activeRoom?.jid || !activeRoom?.name || muteInFlightRef.current) {return;}
-    const next = !activeRoom.muted;
-    muteInFlightRef.current = true;
-    dispatch(updateRoom({ jid: activeRoom.jid, updates: { muted: next } }));
-    try {
-      const confirmed = await setRoomMuted(activeRoom.name, next);
-      if (confirmed !== next) {
-        dispatch(updateRoom({ jid: activeRoom.jid, updates: { muted: confirmed } }));
-      }
-    } catch (error) {
-      dispatch(updateRoom({ jid: activeRoom.jid, updates: { muted: !next } }));
-      console.warn('[ethora-rn] mute toggle failed', error);
-      showToast({
-        id: Date.now().toString(),
-        title: 'Error',
-        message: t('toast.muteFailed'),
-        type: 'error',
-      });
-    } finally {
-      muteInFlightRef.current = false;
-    }
-  };
-
   const heroActions: HeroAction[] = useMemo(
     () => [
-      {
-        key: 'mute',
-        label: activeRoom?.muted ? t('action.muted') : t('action.unmuted'),
-        icon: (color: string) =>
-          activeRoom?.muted ? <BellOffIcon color={color} /> : <BellIcon color={color} />,
-        onPress: toggleMuted,
-      },
       {
         key: 'search',
         label: t('action.search'),
@@ -410,7 +376,7 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
         onPress: () => setIsReportOpen(true),
       },
     ],
-    [t, activeRoom?.jid, activeRoom?.muted] // eslint-disable-line react-hooks/exhaustive-deps
+    [t, activeRoom?.jid] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
   // "…" menu. Edit is the chat picture — the only chat detail this SDK can

package/src/components/Modals/FilePreviewModal/FilePreviewModal.tsx

@@ -31,7 +31,12 @@ import { useToast } from '../../../context/ToastContext';
 import PdfViewer from './PdfView';
 import DocumentViewer from './DocumentViewer';
 import AudioMessage from '../../styled/AudioMessage';
-import { ensureFilenameHasExtension, isLikelyAudio } from '../../../helpers/mimeToExtension';
+import { isLikelyAudio } from '../../../helpers/mimeToExtension';
+import {
+  getDisplayFileName,
+  getUniqueFileName,
+  sanitizeFileNameForPath,
+} from '../../../helpers/getDisplayFileName';
 
 // MIME types Google's gview embed renders reliably. Everything else
 // falls through to the info-card so the user can still download.
@@ -128,6 +133,19 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
 
   if (!activeFile) {return null;}
 
+  // Bug #40: prefer the sender's original name over the server's stored
+  // hash name everywhere this modal shows or saves/shares the file.
+  // Sanitized so it's safe to use as an actual path segment (strips path
+  // separators/control chars) when writing to disk below.
+  const displayFileName = sanitizeFileNameForPath(
+    getDisplayFileName({
+      originalName: activeFile.originalName,
+      fileName: activeFile.fileName,
+      location: activeFile.fileURL,
+      mimetype: activeFile.mimetype,
+    })
+  );
+
   const requestStoragePermission = async () => {
     const MediaLibrary = getMediaLibrary();
     if (!MediaLibrary?.requestPermissionsAsync) {return false;}
@@ -151,12 +169,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
     }
 
     try {
-      const fileName = ensureFilenameHasExtension(
-        activeFile.fileName,
-        activeFile.mimetype
-      );
-
-      const filePath = FileSystem.cacheDirectory + fileName;
+      const filePath = FileSystem.cacheDirectory + displayFileName;
       const download = await FileSystem.downloadAsync(withFileToken(activeFile.fileURL), filePath);
 
       if (download.status === 200) {
@@ -171,17 +184,39 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
         Alert.alert('Error', 'Failed to save the file.');
       }
     } catch (err) {
-      Alert.alert('Error', `Failed to save the file: ${activeFile.fileName}`);
+      Alert.alert('Error', `Failed to save the file: ${displayFileName}`);
+    }
+  };
+
+  // Best-effort existing-name lookup for the Android SAF branch below: SAF
+  // hands back content URIs, not plain names, so this decodes each one and
+  // takes its last path segment. If the provider's URI shape doesn't match
+  // what we expect, we fail open (empty set) rather than block the save -
+  // worst case we skip de-duplication, we never crash the save flow.
+  const listSafDirectoryNames = async (
+    saf: any,
+    dirUri: string
+  ): Promise<Set<string>> => {
+    try {
+      const uris: string[] = await saf.readDirectoryAsync(dirUri);
+      const names = uris.map((uri) => {
+        try {
+          const decoded = decodeURIComponent(uri);
+          const last = decoded.split('/').pop() || '';
+          return last.includes(':') ? last.split(':').pop() || '' : last;
+        } catch {
+          return '';
+        }
+      });
+      return new Set(names.filter(Boolean));
+    } catch {
+      return new Set<string>();
     }
   };
 
   const saveFileToDownloads = async () => {
     try {
-      const fileName = ensureFilenameHasExtension(
-        activeFile.fileName,
-        activeFile.mimetype
-      );
-      const filePath = FileSystem.cacheDirectory + fileName;
+      const filePath = FileSystem.cacheDirectory + displayFileName;
       const download = await FileSystem.downloadAsync(withFileToken(activeFile.fileURL), filePath);
 
       if (download.status !== 200) {
@@ -205,7 +240,16 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
           safDirUriRef.current = dirUri;
         }
 
-        const baseName = fileName.replace(/\.[^/.]+$/, '');
+        // Avoid silently overwriting a different attachment that happens
+        // to share the same display name (common now that we prefer the
+        // human-picked name over the unique server hash - bug #40) by
+        // suffixing " (1)", " (2)", ... on a collision.
+        const existingNames = await listSafDirectoryNames(saf, dirUri as string);
+        const uniqueName = await getUniqueFileName(
+          displayFileName,
+          async (candidate) => existingNames.has(candidate)
+        );
+        const baseName = uniqueName.replace(/\.[^/.]+$/, '');
         const mime = activeFile.mimetype || 'application/octet-stream';
         const base64 = await FileSystem.readAsStringAsync(download.uri, {
           encoding: FileSystem.EncodingType.Base64,
@@ -232,7 +276,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
       // user may cancel), so we don't show a "Save successful" toast here.
       await Share.share({
         url: download.uri,
-        title: fileName,
+        title: displayFileName,
       });
     } catch (err) {
       console.error('Error saving file:', err);
@@ -279,7 +323,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
                 'https://as2.ftcdn.net/v2/jpg/02/51/95/53/1000_F_251955356_FAQH0U1y1TZw3ZcdPGybwUkH90a3VAhb.jpg',
             }}
             resizeMode="contain"
-            accessibilityLabel={activeFile.fileName}
+            accessibilityLabel={displayFileName}
           />
         );
       case activeFile.mimetype.startsWith('video/'):
@@ -333,10 +377,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
             }}
           >
             <Text style={{ fontSize: 16, fontWeight: '600' }}>
-              {ensureFilenameHasExtension(
-                activeFile.originalName || activeFile.fileName,
-                activeFile.mimetype
-              )}
+              {displayFileName}
             </Text>
             <AudioMessage
               src={withFileToken(activeFile.fileURL)}
@@ -351,10 +392,6 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
       case activeFile.mimetype === 'application/pdf':
         return <PdfViewer pdfUrl={withFileToken(activeFile.fileURL)} />;
       default: {
-        const displayName = ensureFilenameHasExtension(
-          activeFile.fileName,
-          activeFile.mimetype
-        );
         // Office docs (.docx / .xlsx / .pptx / .doc / .xls / .ppt /
         // .txt / .csv / .rtf) → render inline via Google's gview embed
         // — fixes the "blank preview" complaint for docs (bug #9).
@@ -362,7 +399,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
           return (
             <DocumentViewer
               url={activeFile.fileURL}
-              fileName={displayName}
+              fileName={displayFileName}
             />
           );
         }
@@ -379,7 +416,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
             }}
           >
             <Text style={{ fontSize: 16, fontWeight: '600' }}>
-              {displayName}
+              {displayFileName}
             </Text>
             <Text style={{ color: '#666' }}>
               {activeFile.mimetype || 'unknown type'}

package/src/components/RoomComponents/styled/LastMessageFile.tsx

@@ -14,9 +14,13 @@ import {
   isSecureFileUrl,
   requestFileTokenRecovery,
 } from '../../../helpers/secureFileUrl';
+import { getDisplayFileName } from '../../../helpers/getDisplayFileName';
 
 interface LastMessageFileProps
-  extends Pick<LastMessage, 'user' | 'originalName' | 'locationPreview'> {}
+  extends Pick<
+    LastMessage,
+    'user' | 'originalName' | 'fileName' | 'mimetype' | 'locationPreview'
+  > {}
 
 const fallbackImage =
   'https://as2.ftcdn.net/v2/jpg/02/51/95/53/1000_F_251955356_FAQH0U1y1TZw3ZcdPGybwUkH90a3VAhb.jpg';
@@ -24,10 +28,18 @@ const fallbackImage =
 const LastMessageFile: FC<LastMessageFileProps> = ({
   user,
   originalName,
+  fileName,
+  mimetype,
   locationPreview,
 }) => {
   const [imgSrc, setImgSrc] = useState(locationPreview);
   const fileToken = useFileToken();
+  // Bug #40: prefer the sender's original name over the stored hash
+  // name; only fall back to the generic "file" label when neither is
+  // present at all (avoids a synthetic "media_<timestamp>.bin" here).
+  const displayName = originalName || fileName
+    ? getDisplayFileName({ originalName, fileName, mimetype })
+    : 'file';
 
   return (
     <LastRoomMessageContainer>
@@ -57,7 +69,7 @@ const LastMessageFile: FC<LastMessageFileProps> = ({
         ) : (
           <FileIcon style={{ width: '20px', height: '20px' }} />
         )}
-        <LastRoomMessageText>{originalName || 'file'}</LastRoomMessageText>
+        <LastRoomMessageText>{displayName}</LastRoomMessageText>
       </View>
     </LastRoomMessageContainer>
   );

package/src/components/RoomComponents/styled/LastMessagePhoto.tsx

@@ -11,6 +11,7 @@ import {
   ShadeWrapper,
 } from './StyledRoomComponents';
 import { View } from 'react-native';
+import { getDisplayFileName } from '../../../helpers/getDisplayFileName';
 
 const PhotoContainer = styled.View`
   position: relative;
@@ -25,14 +26,25 @@ const PhotoContainer = styled.View`
 `;
 
 interface LastMessagePhotoProps
-  extends Pick<LastMessage, 'user' | 'originalName' | 'locationPreview'> {}
+  extends Pick<
+    LastMessage,
+    'user' | 'originalName' | 'fileName' | 'mimetype' | 'locationPreview'
+  > {}
 
 const LastMessagePhoto: FC<LastMessagePhotoProps> = ({
   user,
   locationPreview,
   originalName,
+  fileName,
+  mimetype,
 }) => {
   const fileToken = useFileToken();
+  // Bug #40: prefer the sender's original name over the stored hash
+  // name; only fall back to the generic "file" label when neither is
+  // present at all (avoids a synthetic "media_<timestamp>.bin" here).
+  const displayName = originalName || fileName
+    ? getDisplayFileName({ originalName, fileName, mimetype })
+    : 'file';
   return (
     <LastRoomMessageContainer>
       <LastRoomMessageName>{user?.name || ''}:</LastRoomMessageName>
@@ -48,7 +60,7 @@ const LastMessagePhoto: FC<LastMessagePhotoProps> = ({
             <LastMessageImg src={appendFileToken(locationPreview, fileToken)} />
           </ShadeWrapper>
         </PhotoContainer>
-        <LastRoomMessageText>{originalName || 'file'}</LastRoomMessageText>
+        <LastRoomMessageText>{displayName}</LastRoomMessageText>
       </View>
     </LastRoomMessageContainer>
   );

package/src/components/RoomComponents/styled/LastMessageVideo.tsx

@@ -10,6 +10,7 @@ import {
   ShadeWrapper,
 } from './StyledRoomComponents';
 import { Text, View } from 'react-native';
+import { getDisplayFileName } from '../../../helpers/getDisplayFileName';
 
 const VideoContainer = styled.View`
   position: relative;
@@ -40,14 +41,25 @@ const PlayButton = styled.View`
 `;
 
 interface LastMessageVideoProps
-  extends Pick<LastMessage, 'user' | 'location' | 'originalName'> {}
+  extends Pick<
+    LastMessage,
+    'user' | 'location' | 'originalName' | 'fileName' | 'mimetype'
+  > {}
 
 const LastMessageVideo: FC<LastMessageVideoProps> = ({
   user,
   location,
   originalName,
+  fileName,
+  mimetype,
 }) => {
   const fileToken = useFileToken();
+  // Bug #40: prefer the sender's original name over the stored hash
+  // name; only fall back to the generic "file" label when neither is
+  // present at all (avoids a synthetic "media_<timestamp>.bin" here).
+  const displayName = originalName || fileName
+    ? getDisplayFileName({ originalName, fileName, mimetype })
+    : 'file';
   return (
     <LastRoomMessageContainer>
       <LastRoomMessageName>{user?.name || ''}:</LastRoomMessageName>
@@ -64,7 +76,7 @@ const LastMessageVideo: FC<LastMessageVideoProps> = ({
           </ShadeWrapper>
           <PlayButton><Text>▶</Text></PlayButton>
         </VideoContainer>
-        <LastRoomMessageText>{originalName || 'file'}</LastRoomMessageText>
+        <LastRoomMessageText>{displayName}</LastRoomMessageText>
       </View>
     </LastRoomMessageContainer>
   );

package/src/components/styled/MessageImage.tsx

@@ -22,6 +22,12 @@ interface CustomMessageImageProps {
   /** Full-size file. Opened in the preview modal, NOT rendered inline. */
   fileURL: string;
   fileName: string;
+  /**
+   * The sender's original file name (bug #40) - kept alongside `fileName`
+   * so the preview modal's save/share/download logic can prefer it over
+   * the server's stored/hashed name.
+   */
+  originalName?: string;
   mimetype: string;
   /**
    * Server-generated thumbnail — what the bubble actually renders, same
@@ -42,6 +48,7 @@ const FALLBACK_IMAGE =
 const CustomMessageImage: React.FC<CustomMessageImageProps> = ({
   fileURL,
   fileName,
+  originalName,
   mimetype,
   locationPreview,
 }) => {
@@ -84,7 +91,7 @@ const CustomMessageImage: React.FC<CustomMessageImageProps> = ({
   }, [displayURL]);
 
   const handleOpen = () => {
-    dispatch(setActiveFile({ fileName, fileURL, mimetype }));
+    dispatch(setActiveFile({ fileName, fileURL, mimetype, originalName }));
     dispatch(setActiveModal(MODAL_TYPES.FILE_PREVIEW));
   };