@ethora/chat-component-rn 26.5.5 → 26.5.7

package/src/components/MessageBubble/Message.tsx

@@ -31,6 +31,7 @@ import { parseMessageBody } from '../../helpers/parseMessageBody';
 import { useMessageHeapState } from '../../hooks/useMessageHeapState';
 import { DoubleTick } from '../../assets/icons';
 import { useXmppClient } from '../../context/xmppProvider';
+import { useSendMessage } from '../../hooks/useSendMessage';
 import { MessageReaction } from './MessageReaction';
 import { MessageFooter } from '../styled/StyledComponents';
 
@@ -47,14 +48,17 @@ const CustomMessageBubble = styled.View<{
   deleted?: boolean;
   backgroundMessageUser?: string;
   backgroundMessage?: string;
+  isMedia?: boolean;
 }>`
   position: relative;
   max-width: 85%;
   min-width: 30%;
-  padding: 10px;
+  padding: ${({isMedia}) => isMedia ? '0' : '10'}px;
+  padding-bottom: ${({isMedia}) => isMedia ? '6' : '10'}px;
   margin-right: ${({isUser}) => isUser ? '0' : '10px'};
   margin-left: ${({isUser}) => isUser ? '10px' : '0'};
   border-radius: 10px;
+  overflow: hidden;
   border-bottom-left-radius: ${({ isUser }) => (isUser ? '10' : '0')}px;
   border-bottom-right-radius: ${({ isUser }) => (isUser ? '0' : '10')}px;
   background-color: ${({
@@ -113,7 +117,8 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
   const dispatch = useDispatch();
   const { client } = useXmppClient();
   const { config, langSource, user} = useChatSettingState();
-  const { idSet } = useMessageHeapState();
+  const { idSet, failedIdSet } = useMessageHeapState();
+  const { retryMessage } = useSendMessage();
 
   const [isPressed, setIsPressed] = useState(false);
 
@@ -218,14 +223,41 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
     if (messageRef.current) {
       const nodeHandle = findNodeHandle(messageRef.current);
       if (nodeHandle) {
-        UIManager.measure(nodeHandle, (x, y, width, height, pageX, pageY) => {
+        UIManager.measure(nodeHandle, (_x, _y, _width, height, pageX, pageY) => {
           const screenHeight = Dimensions.get('window').height;
+          // MessageInteractions is ~5 rows (delete/edit/reply/react/copy)
+          // at ~48px each + padding, plus emoji bar on top. 280 covers
+          // both even with a couple of long labels. The legacy 150
+          // figure assumed a much shorter menu and stranded the popup
+          // off-screen on the last message of the room.
+          const MENU_HEIGHT = 280;
+          // Treat the consumer-supplied keyboardVerticalOffset as a
+          // proxy for tab bar + bottom safe-area when present; falls
+          // back to a reasonable default so the menu doesn't bump into
+          // the nav bar on phones without one in config.
+          const bottomReserve =
+            (config?.keyboardVerticalOffset ?? 0) + 24;
+          const topReserve = 16;
+
+          const spaceBelow = screenHeight - (pageY + height) - bottomReserve;
+          const spaceAbove = pageY - topReserve;
+
+          let menuY: number;
+          if (spaceBelow >= MENU_HEIGHT) {
+            menuY = pageY + height;
+          } else if (spaceAbove >= MENU_HEIGHT) {
+            menuY = pageY - MENU_HEIGHT;
+          } else {
+            // Neither side has room (e.g. very small phone, large
+            // menu) — clamp to the visible region so at least the
+            // top of the menu is reachable.
+            menuY = Math.max(
+              topReserve,
+              screenHeight - MENU_HEIGHT - bottomReserve
+            );
+          }
 
-          const enoughSpaceBelow = screenHeight - pageY - height > 150;
-          setContextMenuPosition({
-            x: pageX,
-            y: enoughSpaceBelow ? pageY + height : pageY - 150,
-          });
+          setContextMenuPosition({ x: pageX, y: menuY });
         });
       }
     }
@@ -236,7 +268,13 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
     ? parseMessageBody(config?.messageTextFilter.filterFunction(message.body))
     : parseMessageBody(message.body);
 
-  const isPending = idSet.has(message.id) || message?.pending || false;
+  const isFailed = failedIdSet.has(message.id);
+  const isPending =
+    !isFailed && (idSet.has(message.id) || message?.pending || false);
+
+  const onRetryPress = () => {
+    if (isFailed) {retryMessage(message.id);}
+  };
 
   return (
     <View>
@@ -279,6 +317,7 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
           <CustomMessageBubble
             isUser={isUser}
             deleted={message.isDeleted}
+            isMedia={message?.isMediafile === 'true' && !message?.isDeleted}
             backgroundMessageUser={config?.messageColor?.backgroundMessageUser}
             backgroundMessage={config?.messageColor?.backgroundMessage}
           >
@@ -327,11 +366,21 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
             )}
             <CustomMessageTimestamp>
             {!config?.disableSentLogic && isUser && isPending && <Text>sending...</Text>}
+            {!config?.disableSentLogic && isUser && isFailed && (
+              <Text
+                onPress={onRetryPress}
+                style={styles.failedText}
+                accessibilityRole="button"
+                accessibilityLabel="Retry sending message"
+              >
+                ! Failed — tap to retry
+              </Text>
+            )}
             {new Date(message.date).toLocaleTimeString([], {
               hour: '2-digit',
               minute: '2-digit',
             })}
-            {!config?.disableSentLogic && isUser && !isPending && (
+            {!config?.disableSentLogic && isUser && !isPending && !isFailed && (
               <DoubleTick />
             )}
           </CustomMessageTimestamp>
@@ -401,4 +450,9 @@ const styles = StyleSheet.create({
     marginTop: 5,
     alignSelf: 'flex-end',
   },
+  failedText: {
+    color: '#E53935',
+    fontWeight: '600',
+    marginRight: 6,
+  },
 });

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

@@ -17,6 +17,7 @@ import * as FileSystem from 'expo-file-system/legacy';
 import * as MediaLibrary from 'expo-media-library';
 import { useToast } from '../../../context/ToastContext';
 import PdfViewer from './PdfView';
+import { ensureFilenameHasExtension } from '../../../helpers/mimeToExtension';
 
 export const FullScreenVideo = styled.View`
   width: 100%;
@@ -61,10 +62,10 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
     }
 
     try {
-      let fileName = activeFile.fileName || `media_${Date.now()}`;
-      if (!fileName.includes('.')) {
-        fileName += activeFile.mimetype.startsWith('image/') ? '.jpg' : '.mp4';
-      }
+      const fileName = ensureFilenameHasExtension(
+        activeFile.fileName,
+        activeFile.mimetype
+      );
 
       const filePath = FileSystem.cacheDirectory + fileName;
       const download = await FileSystem.downloadAsync(activeFile.fileURL, filePath);
@@ -87,7 +88,14 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
 
   const saveFileToDownloads = async () => {
     try {
-      const fileName = activeFile.fileName || `file_${Date.now()}`;
+      // Always include a valid extension on the cache filename. expo-media-
+      // library's createAssetAsync inspects the URI's extension and throws
+      // "Could not get the file's extension" when missing — see bug #9 in
+      // sdk-bug-tracker.md.
+      const fileName = ensureFilenameHasExtension(
+        activeFile.fileName,
+        activeFile.mimetype
+      );
       const filePath = FileSystem.cacheDirectory + fileName;
       const download = await FileSystem.downloadAsync(activeFile.fileURL, filePath);
 
@@ -162,23 +170,33 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
         );
       case activeFile.mimetype === 'application/pdf':
         return <PdfViewer pdfUrl={activeFile.fileURL} />;
-      default:
+      default: {
+        const displayName = ensureFilenameHasExtension(
+          activeFile.fileName,
+          activeFile.mimetype
+        );
         return (
           <View
             style={{
               backgroundColor: '#FFF8ED',
               borderRadius: 16,
-              display: 'flex',
-              padding: 16,
+              padding: 20,
+              gap: 8,
             }}
           >
-            <Text>
-              Unable to open the uploaded document. The file format is not
-              supported by the system. Please upload a file in a compatible
-              format. You still can download this file.
+            <Text style={{ fontSize: 16, fontWeight: '600' }}>
+              {displayName}
+            </Text>
+            <Text style={{ color: '#666' }}>
+              {activeFile.mimetype || 'unknown type'}
+            </Text>
+            <Text style={{ marginTop: 8 }}>
+              This file format can't be previewed inline. Tap the save icon
+              above to download it.
             </Text>
           </View>
         );
+      }
     }
   }, [activeFile]);
 

package/src/components/Modals/ModalWrapper/ModalWrapper.tsx

@@ -22,6 +22,12 @@ interface ModalWrapperProps {
   setTextarea?: (value: string) => void;
   handleCloseModal: () => void;
   handleClick: () => void;
+  /**
+   * When true, render a small centered dialog instead of the default
+   * full-screen container. Used for confirm-style modals (Delete, Leave
+   * room) where edge-to-edge feels too heavy.
+   */
+  compact?: boolean;
 }
 
 export const ModalWrapper: FC<ModalWrapperProps> = ({
@@ -35,6 +41,7 @@ export const ModalWrapper: FC<ModalWrapperProps> = ({
   setTextarea,
   handleCloseModal,
   handleClick,
+  compact = false,
 }) => {
   const textareaRef = useRef<TextInput>(null);
 
@@ -54,7 +61,21 @@ export const ModalWrapper: FC<ModalWrapperProps> = ({
       onRequestClose={handleCloseModal}
     >
       <ModalBackground>
-        <ModalContainer style={{ maxWidth: 640 }}>
+        <ModalContainer
+          style={
+            compact
+              ? {
+                  flex: 0,
+                  width: '85%',
+                  maxWidth: 360,
+                  height: 'auto',
+                  padding: 24,
+                  borderRadius: 16,
+                  gap: 16,
+                }
+              : { maxWidth: 640 }
+          }
+        >
           <CloseButton onPress={handleCloseModal}>
             <Text style={{ fontSize: 24 }}>&times;</Text>
           </CloseButton>

package/src/components/Modals/UserProfileModal/UserProfileModal.tsx

@@ -285,7 +285,7 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
             </LabelData>
           </BorderedContainer>
 
-          {selectedUser && (
+          {selectedUser && !config?.disableProfilesInteractions && (
             <>
               <ActionButton
                 StartIcon={<ChatIcon />}

package/src/components/styled/MediaFilePreview.tsx

@@ -1,12 +1,13 @@
-import { View } from 'react-native';
+import { View, Text, StyleSheet, Modal, TouchableOpacity, SafeAreaView } from 'react-native';
 import {
   MediaContainer,
   MediaImage,
 } from './StyledInputComponents/StyledInputComponents';
 import { FileIcon } from '../../assets/icons';
 import { RemoveButton, RemoveButtonText } from './StyledComponents';
-import { FC } from 'react';
+import { FC, useState } from 'react';
 import { MediaFile } from '../../types/types';
+import { Video, ResizeMode } from 'expo-av';
 
 interface MediaFilePreviewProps {
   filePreviews: MediaFile[];
@@ -17,15 +18,34 @@ export const MediaFilePreview: FC<MediaFilePreviewProps> = ({
   filePreviews,
   handleRemoveImage,
 }) => {
+  const [previewUri, setPreviewUri] = useState<string | null>(null);
+
   return (
     <MediaContainer>
       {filePreviews.map((file, index) => {
-        const isImageOrVideo =
-          file.type?.startsWith('image') || file.type?.startsWith('video');
+        const isImage = file.type?.startsWith('image');
+        const isVideo = file.type?.startsWith('video');
         return (
           <View key={`${file.name}_${index}`}>
-            {isImageOrVideo ? (
+            {isImage ? (
               <MediaImage source={{ uri: file.uri }} />
+            ) : isVideo ? (
+              <TouchableOpacity
+                activeOpacity={0.8}
+                onPress={() => setPreviewUri(file.uri)}
+                style={styles.videoThumb}
+              >
+                <Video
+                  source={{ uri: file.uri }}
+                  style={StyleSheet.absoluteFill}
+                  resizeMode={ResizeMode.COVER}
+                  shouldPlay={false}
+                  isMuted
+                />
+                <View style={styles.playOverlay}>
+                  <Text style={styles.playIcon}>▶</Text>
+                </View>
+              </TouchableOpacity>
             ) : (
               <View style={{ width: 70, height: 70, borderRadius: 8 }}>
                 <FileIcon width={70} height={70} />
@@ -37,6 +57,72 @@ export const MediaFilePreview: FC<MediaFilePreviewProps> = ({
           </View>
         );
       })}
+
+      <Modal visible={!!previewUri} animationType="fade" transparent>
+        <SafeAreaView style={styles.modalContainer}>
+          <TouchableOpacity
+            style={styles.closeButton}
+            onPress={() => setPreviewUri(null)}
+          >
+            <Text style={styles.closeText}>✕</Text>
+          </TouchableOpacity>
+          {previewUri && (
+            <Video
+              source={{ uri: previewUri }}
+              style={styles.fullVideo}
+              resizeMode={ResizeMode.CONTAIN}
+              useNativeControls
+              shouldPlay
+            />
+          )}
+        </SafeAreaView>
+      </Modal>
     </MediaContainer>
   );
 };
+
+const styles = StyleSheet.create({
+  videoThumb: {
+    width: 70,
+    height: 70,
+    borderRadius: 8,
+    overflow: 'hidden',
+    backgroundColor: '#1a1a1a',
+  },
+  playOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0,0,0,0.3)',
+  },
+  playIcon: {
+    fontSize: 24,
+    color: '#fff',
+  },
+  modalContainer: {
+    flex: 1,
+    backgroundColor: '#000',
+    justifyContent: 'center',
+  },
+  closeButton: {
+    position: 'absolute',
+    top: 60,
+    right: 20,
+    zIndex: 10,
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    backgroundColor: 'rgba(255,255,255,0.2)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  closeText: {
+    fontSize: 18,
+    color: '#fff',
+    fontWeight: '600',
+  },
+  fullVideo: {
+    width: '100%',
+    height: '70%',
+  },
+});

package/src/components/styled/MessageImage.tsx

@@ -38,8 +38,7 @@ const CustomMessageImage: React.FC<CustomMessageImageProps> = ({
             'https://as2.ftcdn.net/v2/jpg/02/51/95/53/1000_F_251955356_FAQH0U1y1TZw3ZcdPGybwUkH90a3VAhb.jpg'
           }
           style={{
-            borderRadius: 16,
-            width: 150,
+            width: 250,
             height: 200,
           }}
           onError={() => setError(true)}

package/src/components/styled/SendInput.tsx

@@ -117,6 +117,7 @@ const SendInput: React.FC<SendInputProps> = ({
       const result = await ImagePicker.launchCameraAsync({
         mediaTypes: ['images', 'videos'],
         quality: 0.9,
+        videoQuality: ImagePicker.UIImagePickerControllerQualityType.Medium,
       });
       if (result.canceled || !result.assets?.[0]) {return;}
       const asset = result.assets[0];
@@ -151,6 +152,8 @@ const SendInput: React.FC<SendInputProps> = ({
         mediaTypes: ['images', 'videos'],
         allowsEditing: false,
         quality: 0.9,
+        preferredAssetRepresentationMode:
+          ImagePicker.UIImagePickerPreferredAssetRepresentationMode.Compatible,
       });
       if (result.canceled || !result.assets?.[0]) {return;}
       const asset = result.assets[0];

package/src/components/styled/VideoMessage.tsx

@@ -27,7 +27,7 @@ const CustomMessageVideo: React.FC<CustomMessageVideoProps> = ({
   };
 
   return (
-    <TouchableOpacity style={styles.container} onPress={handleOpen}>
+    <TouchableOpacity onPress={handleOpen}>
       <Video
         source={{ uri: fileURL }}
         style={styles.video}
@@ -42,16 +42,9 @@ const CustomMessageVideo: React.FC<CustomMessageVideoProps> = ({
 export default CustomMessageVideo;
 
 const styles = StyleSheet.create({
-  container: {
-    margin: 0,
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-  },
   video: {
-    width: 300,
-    height: 200,
-    borderRadius: 10,
+    width: '100%',
+    aspectRatio: 16 / 9,
     backgroundColor: '#000',
   },
 });

package/src/context/xmppProvider.tsx

@@ -4,11 +4,15 @@ import React, {
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from 'react';
 import { AppState, DeviceEventEmitter } from 'react-native';
-import XmppClient from '../networking/xmppClient';
+import XmppClient, {
+  XmppCredentialsProvider,
+} from '../networking/xmppClient';
+import { refreshTokens } from '../roomStore/chatSettingsSlice';
 import {
   IConfig,
   ProviderBootstrapStatus,
@@ -24,6 +28,7 @@ import {
 } from '../utils/clientRegistry';
 import {
   applyResolvedUserToStore,
+  refreshUserCredentialsForXmpp,
   resolveInitBeforeLoadUser,
 } from '../helpers/resolveInitBeforeLoadUser';
 import { ensureScopedChatCache } from '../helpers/ensureScopedChatCache';
@@ -77,6 +82,79 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config })
   const completedBootstrapKeyRef = useRef<string>('');
   const inflightBootstrapKeyRef = useRef<string>('');
 
+  // Callback XmppClient uses to fetch fresh credentials after a SASL
+  // `not-authorized` (typically JWT expiry during idle, bug #17).
+  // Always installed — the underlying `refreshUserCredentialsForXmpp`
+  // picks the right path based on config:
+  //   - `jwtLogin` → re-exchange JWT via `/users/client`
+  //   - `userLogin` / `customLogin` / store / persisted → `/users/my`
+  //     with REST refresh chain (handles 401 → refresh → retry)
+  // Returns last-known cached creds if nothing usable is available so
+  // the XmppClient at least doesn't crash on `undefined.password`.
+  const credentialsProvider = useMemo<XmppCredentialsProvider>(() => {
+    return async () => {
+      // 1. Consumer-supplied REST refresh (when wired). This runs
+      //    before the SDK's own refresh chain so non-Ethora backends
+      //    can keep auth state in sync with their own token endpoint.
+      const customRefresh = config?.refreshTokens?.refreshFunction;
+      if (customRefresh) {
+        try {
+          const result = await customRefresh();
+          if (result?.accessToken) {
+            store.dispatch(
+              refreshTokens({
+                token: result.accessToken,
+                refreshToken: result.refreshToken || '',
+              })
+            );
+          }
+        } catch (err) {
+          devPushLog('warn', 'XMPP creds refresh: customRefresh failed', err);
+        }
+      }
+
+      // 2. Re-mint XMPP creds via the right priority chain for the
+      //    current auth mode. This call ALWAYS hydrates (unlike
+      //    `resolveInitBeforeLoadUser` which short-circuits when a
+      //    cached user already has xmppCredentials).
+      const fresh = await refreshUserCredentialsForXmpp(config).catch(
+        (err) => {
+          devPushLog('warn', 'XMPP creds refresh: full chain failed', err);
+          return null;
+        }
+      );
+      if (fresh) {
+        applyResolvedUserToStore(fresh);
+        return {
+          username:
+            fresh.xmppUsername ||
+            fresh.defaultWallet?.walletAddress ||
+            '',
+          password: fresh.xmppPassword || '',
+        };
+      }
+
+      // 3. Last-resort: return the cached creds so reconnect() can
+      //    still attempt a connection. If the original failure was
+      //    a stale JWT this will fail again and the user has to
+      //    re-mount the chat — but at least we don't break the
+      //    transient-network-blip case where the cached creds are
+      //    still valid.
+      const u = store.getState().chatSettingStore.user;
+      return {
+        username: u?.xmppUsername || u?.defaultWallet?.walletAddress || '',
+        password: u?.xmppPassword || '',
+      };
+    };
+  }, [
+    config?.jwtLogin?.enabled,
+    config?.jwtLogin?.token,
+    config?.refreshTokens?.refreshFunction,
+    config?.userLogin?.enabled,
+    config?.customLogin?.enabled,
+    config?.initBeforeLoadAuth?.myEndpoint,
+  ]);
+
   const initializeClient = useCallback(
     async (
       username: string,
@@ -104,6 +182,12 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config })
       //    concurrent calls for the same key.
       const created = await withXmppClientInitLock(key, async () => {
         const newClient = new XmppClient(username, password, settings);
+        // Wire up the credentialsProvider so SASL `not-authorized`
+        // after idle triggers a refresh chain (jwtLogin →
+        // /users/client; userLogin/customLogin/store → /users/my +
+        // REST refresh) instead of looping forever with stale creds.
+        // Bug #17 — full coverage in 26.5.6.
+        newClient.setCredentialsProvider(credentialsProvider);
         setGlobalXmppClient(newClient, key);
         await newClient.waitForOnline().catch((err) => {
           console.error('Error waiting for xmpp online:', err);
@@ -112,12 +196,16 @@ export const XmppProvider: React.FC<XmppProviderProps> = ({ children, config })
         return newClient;
       });
 
+      // Reused clients (steps 1+2 above) also need the provider — config
+      // may have changed since the singleton was created.
+      created.setCredentialsProvider(credentialsProvider);
+
       setClient(created);
       lastCredsRef.current = { username, password, settings };
       setReconnectAttempts(0);
       return created;
     },
-    [client, config?.xmppSettings]
+    [client, config?.xmppSettings, credentialsProvider]
   );
 
   // -----------------------------------------------------------