@ethora/chat-component-rn 26.5.10 → 26.5.12

package/src/components/MainComponents/ChatRoom.tsx

@@ -70,6 +70,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
     const insets = useSafeAreaInsets();
 
     const [isLoadingMore, setIsLoadingMore] = useState<boolean>(false);
+    const [keyboardVisible, setKeyboardVisible] = useState(false);
 
     const { user, config: storeConfig } = useChatSettingState();
 
@@ -154,6 +155,19 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
       dispatch(setEditAction({ isEdit: false }));
     };
 
+    // Read the latest client through a ref so this effect's setup phase
+    // does NOT re-run on every `client` identity change. With `client` in
+    // the deps array, a reconnect or any provider re-render would re-fire
+    // setup → `dispatch(setVisibleRoom(...))` ~one tick after the host
+    // cleared visibility via the `isVisible` prop (XmppProvider) — racing
+    // and clobbering it, so `useUnread()` reported 0 in tab-mounted hosts.
+    // Customer-reported #19. The cleanup still needs the live client for
+    // flushLastViewedToPrivateStoreStanza, which is what the ref provides.
+    const clientRef = useRef(client);
+    useEffect(() => {
+      clientRef.current = client;
+    }, [client]);
+
     useEffect(() => {
       if (!activeRoomJID) {
         return;
@@ -170,8 +184,9 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
           }),
         );
         dispatch(clearVisibleRoom());
-        if (client) {
-          client
+        const liveClient = clientRef.current;
+        if (liveClient) {
+          liveClient
             .flushLastViewedToPrivateStoreStanza(store.getState().rooms?.rooms, {
               visibleRoomJID: activeRoomJID,
             })
@@ -180,7 +195,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
         dispatch(deleteRoomMessage({ roomJID: activeRoomJID, messageId: 'delimiter-new' }));
         setIsLoadingMore(false);
       };
-    }, [activeRoomJID, client, dispatch]);
+    }, [activeRoomJID, dispatch]);
 
     // hooks useEffects
     // useRoomUrl(activeRoomJID || "", roomsList, config);
@@ -213,8 +228,28 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
     const inputDockPaddingBottom = getInputDockPaddingBottom({
       platform: Platform.OS,
       bottomInset: insets.bottom,
+      keyboardVisible,
     });
 
+    useEffect(() => {
+      const showEvent =
+        Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+      const hideEvent =
+        Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+
+      const showSub = Keyboard.addListener(showEvent, () => {
+        setKeyboardVisible(true);
+      });
+      const hideSub = Keyboard.addListener(hideEvent, () => {
+        setKeyboardVisible(false);
+      });
+
+      return () => {
+        showSub.remove();
+        hideSub.remove();
+      };
+    }, []);
+
     return (
       <KeyboardAvoidingView
         style={{ flex: 1 }}

package/src/components/MainComponents/ChatWrapper.tsx

@@ -32,6 +32,7 @@ import {useChatSettingState} from '../../hooks/useChatSettingState';
 import {DeviceEventEmitter, Pressable, Text, View} from 'react-native';
 import {pushLog as devPushLog} from '../../utils/devLogger';
 import {normalizeRoomJid} from '../../helpers/normalizeRoomJid';
+import {InteractionsOverlayProvider} from '../MessageBubble/InteractionsOverlay';
 
 interface ChatWrapperProps {
   token?: string;
@@ -398,28 +399,34 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
             style={{
               ...MainComponentStyles,
             }}>
-            {showRoomList ? (
-              <RoomList
-                chats={Object.values(rooms)}
-                onRoomClick={handleChangeChat}
-              />
-            ) : (
-              <ChatWrapperBox
-                style={{
-                  ...MainComponentStyles,
-                }}>
-                <ChatRoom
-                  CustomMessageComponent={CustomMessageComponent || Message}
-                  handleBackClick={
-                    roomJID || config?.disableRooms
-                      ? undefined
-                      : () => {
-                          dispatch(setCurrentRoom({ roomJID: '' }));
-                        }
-                  }
+            {/* Host the message context menu in-tree (not a RN Modal) so
+                opening it doesn't steal focus / dismiss the keyboard on
+                Android. Wraps only the chat area — the global Modal /
+                ModalWrapper below stay above it. */}
+            <InteractionsOverlayProvider>
+              {showRoomList ? (
+                <RoomList
+                  chats={Object.values(rooms)}
+                  onRoomClick={handleChangeChat}
                 />
-              </ChatWrapperBox>
-            )}
+              ) : (
+                <ChatWrapperBox
+                  style={{
+                    ...MainComponentStyles,
+                  }}>
+                  <ChatRoom
+                    CustomMessageComponent={CustomMessageComponent || Message}
+                    handleBackClick={
+                      roomJID || config?.disableRooms
+                        ? undefined
+                        : () => {
+                            dispatch(setCurrentRoom({ roomJID: '' }));
+                          }
+                    }
+                  />
+                </ChatWrapperBox>
+              )}
+            </InteractionsOverlayProvider>
             <Modal
               modal={activeModal}
               setOpenModal={(value?: ModalType) =>

package/src/components/MainComponents/MediaMessage.tsx

@@ -4,8 +4,17 @@ import FileDownload from '../styled/UnsupportedType';
 import CustomMessageImage from '../styled/MessageImage';
 import CustomMessageVideo from '../styled/VideoMessage';
 import AudioMessage from '../styled/AudioMessage';
-import { Text } from 'react-native';
-import { deriveDisplayFilename } from '../../helpers/mimeToExtension';
+import {
+  ActivityIndicator,
+  Image,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { deriveDisplayFilename, isLikelyAudio } from '../../helpers/mimeToExtension';
+import { FileIcon, PlayIcon } from '../../assets/icons';
+import { defaultMediaDims } from '../../helpers/mediaDimensions';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
 
 interface MediaMessageProps {
   mimeType?: string;
@@ -15,6 +24,116 @@ interface MediaMessageProps {
   isUser: boolean;
 }
 
+const pendingImageDims = defaultMediaDims();
+
+const getPendingStatusLabel = (mimeType?: string) => {
+  if (mimeType?.startsWith('image/')) {
+    return 'Uploading image';
+  }
+  if (mimeType?.startsWith('video/')) {
+    return 'Uploading video';
+  }
+  if (
+    mimeType?.startsWith('audio/') ||
+    mimeType?.includes('application/octet-stream')
+  ) {
+    return 'Uploading audio';
+  }
+  return 'Uploading file';
+};
+
+const PendingMediaMessage: React.FC<{
+  fileName: string;
+  mimeType?: string;
+  previewUri?: string;
+  isUser: boolean;
+  size?: string;
+}> = ({ fileName, mimeType, previewUri, isUser, size }) => {
+  const { config } = useChatSettingState();
+  const statusLabel = getPendingStatusLabel(mimeType);
+  const isImage = mimeType?.startsWith('image/');
+  const isVideo = mimeType?.startsWith('video/');
+  const isAudio =
+    mimeType?.startsWith('audio/') ||
+    mimeType?.includes('application/octet-stream');
+  const primaryColor = config?.colors?.primary || '#0A84FF';
+
+  if (isImage && previewUri) {
+    return (
+      <View style={styles.pendingImageWrapper}>
+        <Image
+          source={{ uri: previewUri }}
+          style={styles.pendingImage}
+          resizeMode="cover"
+        />
+        <View style={styles.pendingImageOverlay}>
+          <ActivityIndicator size="small" color="#FFFFFF" />
+          <Text style={styles.pendingOverlayText}>{statusLabel}</Text>
+        </View>
+      </View>
+    );
+  }
+
+  if (isVideo) {
+    return (
+      <View style={styles.pendingVideoCard}>
+        <View style={styles.pendingVideoPreview}>
+          <View style={styles.pendingVideoIcon}>
+            <PlayIcon width={24} height={24} />
+          </View>
+          <ActivityIndicator size="small" color="#5B6B8C" />
+        </View>
+        <Text style={styles.pendingVideoLabel}>{fileName}</Text>
+        <Text style={styles.pendingVideoStatus}>{statusLabel}</Text>
+      </View>
+    );
+  }
+
+  if (isAudio) {
+    return (
+      <View style={styles.pendingAudioCard}>
+        <View
+          style={[
+            styles.pendingAudioButton,
+            { backgroundColor: primaryColor },
+          ]}
+        >
+          <PlayIcon width={18} height={18} color="#fff" />
+        </View>
+        <View style={styles.pendingAudioContent}>
+          <View style={styles.pendingAudioTrack}>
+            <View
+              style={[
+                styles.pendingAudioTrackFill,
+                { backgroundColor: primaryColor },
+              ]}
+            />
+          </View>
+          <View style={styles.pendingAudioMeta}>
+            <Text style={styles.pendingAudioTime}>0:00</Text>
+            <View style={styles.pendingAudioStatusPill}>
+              <ActivityIndicator size="small" color="#5B6B8C" />
+              <Text style={styles.pendingAudioStatusText}>{statusLabel}</Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <FileDownload
+      fileURL={previewUri || ''}
+      fileName={fileName}
+      mimetype={mimeType || 'application/octet-stream'}
+      size={size}
+      isUser={isUser}
+      pending
+      placeholderIcon={<FileIcon width={36} height={36} />}
+    />
+  );
+};
+
 const MediaMessage: React.FC<MediaMessageProps> = ({
   mimeType,
   location,
@@ -29,12 +148,33 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
       url: location || messageText,
       mime: mimeType,
     });
+    const isAudioPayload = isLikelyAudio(
+      mimeType,
+      displayName,
+      location,
+      {
+        duration: (message as any)?.duration,
+        waveForm: (message as any)?.waveForm,
+        originalName: (message as any)?.originalName,
+      }
+    );
+    if (message?.pending) {
+      return (
+        <PendingMediaMessage
+          fileName={displayName}
+          mimeType={mimeType}
+          previewUri={messageText || location || ''}
+          isUser={isUser}
+          size={message?.size}
+        />
+      );
+    }
     switch (true) {
       case mimeType.startsWith('image/'):
         return (
           <CustomMessageImage
             fileName={displayName}
-            fileURL={messageText || ''}
+            fileURL={location || messageText || ''}
             mimetype={mimeType}
           />
         );
@@ -47,16 +187,49 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
           />
         );
       case mimeType.startsWith('audio/'): {
-        return <AudioMessage src={location || ''} />;
+        return (
+          <AudioMessage
+            src={location || ''}
+            mimeType={mimeType}
+            fileName={displayName}
+            originalName={(message as any)?.originalName}
+            duration={(message as any)?.duration}
+            waveForm={(message as any)?.waveForm}
+          />
+        );
+      }
+      case mimeType.includes('application/octet-stream'): {
+        return (
+          <AudioMessage
+            src={location || ''}
+            mimeType={mimeType}
+            fileName={displayName}
+            originalName={(message as any)?.originalName}
+            duration={(message as any)?.duration}
+            waveForm={(message as any)?.waveForm}
+          />
+        );
       }
       default: {
-        // Many backends tag binary payloads (PDFs, DOCX, archives) as
-        // application/octet-stream; sniff the filename extension for the
-        // legitimate audio case before falling through to FileDownload.
-        if (mimeType.includes('application/octet-stream')) {
-          if (/\.(mp3|m4a|wav|aac|ogg|flac)$/i.test(displayName)) {
-            return <AudioMessage src={location || ''} />;
-          }
+        // Some senders (notably the web app's voice-message uploader)
+        // ship audio as `application/octet-stream` with no audio file
+        // extension. `isLikelyAudio` recognises those via the URL path,
+        // filename, or voice-message naming hints (voicemail-,
+        // voice-note-, recording-, …) so we still render the AudioMessage
+        // player instead of falling through to the generic FileDownload
+        // card (where the voicemail rendered as a broken `.bin`
+        // attachment). Customer-reported #9 voicemail fix.
+        if (isAudioPayload) {
+          return (
+            <AudioMessage
+              src={location || ''}
+              mimeType={mimeType}
+              fileName={displayName}
+              originalName={(message as any)?.originalName}
+              duration={(message as any)?.duration}
+              waveForm={(message as any)?.waveForm}
+            />
+          );
         }
         return (
           <FileDownload
@@ -64,6 +237,9 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
             fileName={displayName}
             mimetype={mimeType}
             isUser={isUser}
+            originalName={(message as any)?.originalName}
+            duration={(message as any)?.duration}
+            waveForm={(message as any)?.waveForm}
           />
         );
       }
@@ -73,3 +249,120 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
 };
 
 export default MediaMessage;
+
+const styles = StyleSheet.create({
+  pendingImageWrapper: {
+    width: pendingImageDims.width,
+    height: pendingImageDims.height,
+    borderRadius: 12,
+    overflow: 'hidden',
+    backgroundColor: '#EAF0FB',
+  },
+  pendingImage: {
+    width: '100%',
+    height: '100%',
+  },
+  pendingImageOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+    backgroundColor: 'rgba(17, 24, 39, 0.28)',
+  },
+  pendingOverlayText: {
+    color: '#FFFFFF',
+    fontSize: 13,
+    fontWeight: '600',
+  },
+  pendingVideoCard: {
+    width: 220,
+    padding: 12,
+    borderRadius: 12,
+    backgroundColor: '#F3F6FC',
+    gap: 10,
+  },
+  pendingVideoPreview: {
+    height: 144,
+    borderRadius: 10,
+    backgroundColor: '#DCE6F7',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 10,
+  },
+  pendingVideoIcon: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    backgroundColor: 'rgba(17, 24, 39, 0.45)',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  pendingVideoLabel: {
+    color: '#141414',
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  pendingVideoStatus: {
+    color: '#5B6B8C',
+    fontSize: 12,
+    fontWeight: '500',
+  },
+  pendingAudioCard: {
+    minWidth: 252,
+    maxWidth: 288,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderRadius: 12,
+    backgroundColor: '#F3F6FC',
+  },
+  pendingAudioButton: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  pendingAudioContent: {
+    flex: 1,
+    gap: 8,
+  },
+  pendingAudioTrack: {
+    height: 6,
+    borderRadius: 999,
+    overflow: 'hidden',
+    backgroundColor: '#D0D7E6',
+  },
+  pendingAudioTrackFill: {
+    width: '32%',
+    height: '100%',
+    borderRadius: 999,
+  },
+  pendingAudioMeta: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 12,
+  },
+  pendingAudioTime: {
+    color: '#667085',
+    fontSize: 12,
+    fontWeight: '500',
+  },
+  pendingAudioStatusPill: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 999,
+    backgroundColor: '#FFFFFF',
+  },
+  pendingAudioStatusText: {
+    color: '#5B6B8C',
+    fontSize: 12,
+    fontWeight: '600',
+  },
+});

package/src/components/MessageBubble/InteractionsOverlay.tsx

@@ -0,0 +1,121 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { StyleSheet, View } from 'react-native';
+
+/**
+ * In-tree overlay host for the message context menu (MessageInteractions).
+ *
+ * Why this exists: MessageInteractions used to render inside a React Native
+ * `<Modal>`. On Android a Modal opens its own window, which steals focus
+ * from the chat input — so opening the menu dismissed the keyboard. Hosting
+ * the menu in the SAME view tree (no extra window) keeps the keyboard up.
+ *
+ * Coordinate note: the menu is positioned from `UIManager.measure` WINDOW
+ * coordinates (pageX/pageY), but this host sits below the status bar / any
+ * safe-area + header insets, so its own origin is offset from the window.
+ * The host measures that offset (`measureInWindow`) and exposes it so the
+ * menu can convert window coords → host-local coords. The host is mounted
+ * ABOVE ChatRoom's KeyboardAvoidingView, so its origin doesn't move when the
+ * keyboard opens (only the measured bubble's pageY does).
+ */
+interface OverlayEntry {
+  id: string;
+  node: React.ReactNode;
+}
+
+interface InteractionsOverlayCtx {
+  present: (id: string, node: React.ReactNode) => void;
+  dismiss: (id: string) => void;
+  originX: number;
+  originY: number;
+}
+
+const Ctx = createContext<InteractionsOverlayCtx>({
+  present: () => {},
+  dismiss: () => {},
+  originX: 0,
+  originY: 0,
+});
+
+export const useInteractionsOverlay = () => useContext(Ctx);
+
+export const InteractionsOverlayProvider: React.FC<{
+  children: React.ReactNode;
+}> = ({ children }) => {
+  const [entries, setEntries] = useState<OverlayEntry[]>([]);
+  const [origin, setOrigin] = useState({ x: 0, y: 0 });
+  const hostRef = useRef<View>(null);
+
+  const measure = useCallback(() => {
+    hostRef.current?.measureInWindow?.((x, y) => {
+      if (typeof x !== 'number' || typeof y !== 'number') {return;}
+      setOrigin((prev) => (prev.x === x && prev.y === y ? prev : { x, y }));
+    });
+  }, []);
+
+  const present = useCallback(
+    (id: string, node: React.ReactNode) => {
+      // Re-measure on present: the keyboard / layout may have shifted us
+      // since the last onLayout.
+      measure();
+      setEntries((prev) => {
+        const next = prev.filter((e) => e.id !== id);
+        next.push({ id, node });
+        return next;
+      });
+    },
+    [measure]
+  );
+
+  const dismiss = useCallback((id: string) => {
+    setEntries((prev) =>
+      prev.some((e) => e.id === id) ? prev.filter((e) => e.id !== id) : prev
+    );
+  }, []);
+
+  // MUST be memoized. Otherwise every host re-render (e.g. from present()'s
+  // setEntries) creates a new context value → all consumers re-render →
+  // MessageInteractions' present-effect fires again → setEntries → … →
+  // "Maximum update depth exceeded". present/dismiss are stable (useCallback)
+  // and origin rarely changes, so this value is stable across entry changes.
+  const ctxValue = useMemo(
+    () => ({ present, dismiss, originX: origin.x, originY: origin.y }),
+    [present, dismiss, origin.x, origin.y]
+  );
+
+  return (
+    // `children` is a stable element from the caller, so re-rendering this
+    // host (present/dismiss/origin state) does NOT re-render the chat
+    // subtree — React reconciliation skips the unchanged children element.
+    <View
+      ref={hostRef}
+      style={styles.host}
+      onLayout={measure}
+      collapsable={false}
+    >
+      <Ctx.Provider value={ctxValue}>
+        {children}
+        {entries.length > 0 && (
+          <View style={styles.overlay} pointerEvents="box-none">
+            {entries.map((e) => (
+              <React.Fragment key={e.id}>{e.node}</React.Fragment>
+            ))}
+          </View>
+        )}
+      </Ctx.Provider>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  host: { flex: 1 },
+  overlay: { ...StyleSheet.absoluteFillObject, zIndex: 9999, elevation: 9999 },
+});
+
+export default InteractionsOverlayProvider;

package/src/components/MessageBubble/Message.tsx

@@ -6,6 +6,7 @@ import {
   findNodeHandle,
   UIManager,
   Text,
+  Keyboard,
 } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 import { RootState } from '../../roomStore';
@@ -241,8 +242,25 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
   // onLayout — more accurate than estimating it here, and it's what keeps
   // the menu adjacent to the message instead of floating far above (#13).
   const handleLongPress = () => {
-    const target = bubbleRef.current ?? messageRef.current;
-    if (target) {
+    const target = (bubbleRef.current ?? messageRef.current) as any;
+    if (target?.measureInWindow) {
+      // Use measureInWindow — the SAME API the overlay host uses to find
+      // its own window origin. Both are then in identical window
+      // coordinates, so MessageInteractions' host-local conversion
+      // (subtract origin) is exact. Mixing this with UIManager.measure
+      // (pageX/pageY) drifted on Android (status-bar offset) and pushed the
+      // "below" menu too far from the message.
+      target.measureInWindow(
+        (x: number, y: number, width: number, height: number) => {
+          setContextMenuPosition({
+            left: x,
+            right: x + width,
+            top: y,
+            bottom: y + height,
+          });
+        }
+      );
+    } else if (target) {
       const nodeHandle = findNodeHandle(target);
       if (nodeHandle) {
         UIManager.measure(nodeHandle, (_x, _y, width, height, pageX, pageY) => {
@@ -291,7 +309,19 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
       >
         {!isUser && (
           <CustomMessagePhotoContainer
-            onPress={() => handleUserAvatarClick(message.user)}
+            // `disableProfilesInteractions` gates every entry point to the
+            // user-profile popup: this in-bubble avatar AND the chat-title
+            // press in ChatHeader. When disabled we still render the avatar
+            // visually but make it non-interactive (no press, no a11y
+            // affordance) — consumers who want it gone entirely can return
+            // null from a custom message component.
+            onPress={
+              config?.disableProfilesInteractions
+                ? undefined
+                : () => handleUserAvatarClick(message.user)
+            }
+            disabled={!!config?.disableProfilesInteractions}
+            accessible={!config?.disableProfilesInteractions}
           >
             {message.user?.profileImage ? (
               <CustomMessagePhoto source={{ uri: message.user.profileImage }} />
@@ -310,6 +340,17 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
             flex: 1,
             alignItems: isUser ? 'flex-end' : 'flex-start',
           }}
+          // A plain tap anywhere on a message bubble dismisses the
+          // keyboard. The FlatList's keyboardShouldPersistTaps="handled"
+          // already dismisses taps on the empty GAPS between bubbles, but
+          // the bubble Pressable itself is a touch responder, so taps that
+          // landed on a message were "handled" and the keyboard stayed —
+          // which is exactly the "closes only every other time" symptom
+          // (hit a gap → close, hit a bubble → stay). Explicitly dismissing
+          // here makes it reliable across the whole list. onPress does NOT
+          // fire when onLongPress fires, so opening MessageInteractions via
+          // long-press never triggers this dismiss.
+          onPress={() => Keyboard.dismiss()}
           // disableInteractions hides the long-press → context menu
           // (delete / edit / reply / react). Mirrors web's config gate.
           onLongPress={