@ethora/chat-component-rn 26.5.10 → 26.5.12

package/src/components/MessageBubble/MessageInteractions.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useId, useMemo, useState } from 'react';
 import { Delimeter, MenuItem } from '../ContextMenu/ContextMenuComponents';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../roomStore';
@@ -8,16 +8,17 @@ import {
 } from '../../helpers/constants/MESSAGE_INTERACTIONS';
 import { IMessage } from '../../types/types';
 import {
-  Modal,
   Text,
   StyleSheet,
   View,
   Pressable,
   Dimensions,
+  Keyboard,
   type LayoutChangeEvent,
 } from 'react-native';
 import * as Clipboard from 'expo-clipboard';
 import { useToast } from '../../context/ToastContext';
+import { useInteractionsOverlay } from './InteractionsOverlay';
 
 interface MessageInteractionsProps {
   isReply?: boolean;
@@ -47,6 +48,8 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
   handleEditMessage,
 }) => {
   const { showToast } = useToast();
+  const { present, dismiss, originX, originY } = useInteractionsOverlay();
+  const overlayId = useId();
 
   const config = useSelector(
     (state: RootState) => state.chatSettingStore.config
@@ -54,6 +57,28 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
 
   const [menuSize, setMenuSize] = useState({ width: 0, height: 0 });
 
+  // Live keyboard height so the menu knows the REAL space below the message.
+  // Without this the position math used the full screen height and happily
+  // opened the menu downward into the area the keyboard now covers, hiding
+  // it under the keyboard / behind the input. Seeded from current metrics so
+  // an already-open keyboard (the common case: menu opened while typing) is
+  // accounted for on first render, not only after the next show event.
+  const [keyboardHeight, setKeyboardHeight] = useState(
+    () => Keyboard.metrics?.()?.height ?? 0
+  );
+
+  useEffect(() => {
+    const onShow = (e: any) =>
+      setKeyboardHeight(e?.endCoordinates?.height ?? 0);
+    const onHide = () => setKeyboardHeight(0);
+    const subs = [
+      Keyboard.addListener('keyboardDidShow', onShow),
+      Keyboard.addListener('keyboardDidChangeFrame', onShow),
+      Keyboard.addListener('keyboardDidHide', onHide),
+    ];
+    return () => subs.forEach((s) => s.remove());
+  }, []);
+
   const handleMenuLayout = (e: LayoutChangeEvent) => {
     const { width, height } = e.nativeEvent.layout;
     if (
@@ -105,7 +130,13 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
     const topReserve = 16;
     const sideMargin = 8;
 
-    const spaceBelow = screenHeight - position.bottom - bottomReserve;
+    // The keyboard occludes the bottom `keyboardHeight` px, so the real
+    // visible bottom edge is above it. Measuring space below against this
+    // (not the full screen) is what makes the menu flip ABOVE the message
+    // when the keyboard is open and the message sits near the input.
+    const visibleBottom = screenHeight - keyboardHeight;
+
+    const spaceBelow = visibleBottom - position.bottom - bottomReserve;
     const spaceAbove = position.top - topReserve;
 
     let top: number;
@@ -114,7 +145,10 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
     } else if (spaceAbove >= menuSize.height) {
       top = position.top - menuSize.height;
     } else {
-      top = Math.max(topReserve, screenHeight - menuSize.height - bottomReserve);
+      top = Math.max(
+        topReserve,
+        visibleBottom - menuSize.height - bottomReserve
+      );
     }
 
     const leftMargin = position.left;
@@ -128,56 +162,73 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
     );
 
     return { top, left };
-  }, [position, menuSize, config?.keyboardVerticalOffset]);
-
-  if (config?.disableInteractions) {return null;}
-
-  return (
-    <Modal
-      transparent
-      animationType="fade"
-      visible={true}
-      onRequestClose={closeMenu}
-    >
-      {!message.isDeleted && (
-        <View style={styles.overlayFill}>
-          <Pressable style={StyleSheet.absoluteFill} onPress={closeMenu} />
-          <View
-            style={[styles.contextMenu, memoPosition]}
-            onLayout={handleMenuLayout}
-          >
-            <MenuItem onPress={() => handleCopyMessage(message.body!)}>
-              <Text style={styles.menuText}>{MESSAGE_INTERACTIONS.COPY}</Text>
-              <MESSAGE_INTERACTIONS_ICONS.COPY />
-            </MenuItem>
-            {isUser && (
-              <>
-                {/* Edit only for non-media messages (upstream guard) +
-                    consistent label styling (menuText). */}
-                {message?.isMediafile !== 'true' && (
-                  <>
-                    <Delimeter />
-                    <MenuItem onPress={handleEditMessage}>
-                      <Text style={styles.menuText}>
-                        {MESSAGE_INTERACTIONS.EDIT}
-                      </Text>
-                      <MESSAGE_INTERACTIONS_ICONS.EDIT />
-                    </MenuItem>
-                  </>
-                )}
-                <Delimeter />
-                <MenuItem onPress={handleDeleteMessage}>
-                  <Text style={styles.menuText}>{MESSAGE_INTERACTIONS.DELETE}</Text>
-                  <MESSAGE_INTERACTIONS_ICONS.DELETE />
-                </MenuItem>
-              </>
-            )}
-          </View>
+  }, [position, menuSize, config?.keyboardVerticalOffset, keyboardHeight]);
+
+  // Window coords (memoPosition) → host-local coords. The overlay host
+  // sits below the status bar / header, so subtract its measured origin.
+  const localPosition = useMemo(() => {
+    if (!memoPosition) {return undefined;}
+    return {
+      ...memoPosition,
+      top: (memoPosition as { top: number }).top - originY,
+      left: (memoPosition as { left: number }).left - originX,
+    };
+  }, [memoPosition, originX, originY]);
+
+  const content =
+    config?.disableInteractions || message.isDeleted ? null : (
+      <View style={styles.overlayFill}>
+        <Pressable style={StyleSheet.absoluteFill} onPress={closeMenu} />
+        <View
+          style={[styles.contextMenu, localPosition]}
+          onLayout={handleMenuLayout}
+        >
+          <MenuItem onPress={() => handleCopyMessage(message.body!)}>
+            <Text style={styles.menuText}>{MESSAGE_INTERACTIONS.COPY}</Text>
+            <MESSAGE_INTERACTIONS_ICONS.COPY />
+          </MenuItem>
+          {isUser && (
+            <>
+              {/* Edit only for non-media messages (upstream guard) +
+                  consistent label styling (menuText). */}
+              {message?.isMediafile !== 'true' && (
+                <>
+                  <Delimeter />
+                  <MenuItem onPress={handleEditMessage}>
+                    <Text style={styles.menuText}>
+                      {MESSAGE_INTERACTIONS.EDIT}
+                    </Text>
+                    <MESSAGE_INTERACTIONS_ICONS.EDIT />
+                  </MenuItem>
+                </>
+              )}
+              <Delimeter />
+              <MenuItem onPress={handleDeleteMessage}>
+                <Text style={styles.menuText}>{MESSAGE_INTERACTIONS.DELETE}</Text>
+                <MESSAGE_INTERACTIONS_ICONS.DELETE />
+              </MenuItem>
+            </>
+          )}
         </View>
-      )}
+      </View>
+    );
 
-    </Modal>
-  );
+  // Render the menu in the in-tree overlay host instead of a React Native
+  // <Modal>. A Modal opens its own window on Android, which steals focus
+  // from the chat input and dismisses the keyboard when the menu opens;
+  // hosting it in the same view tree keeps the keyboard up. Re-run every
+  // render so menuSize/position updates refresh the hosted node.
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    if (content) {
+      present(overlayId, content);
+    } else {
+      dismiss(overlayId);
+    }
+  });
+  useEffect(() => () => dismiss(overlayId), [dismiss, overlayId]);
+
+  return null;
 };
 
 export default MessageInteractions;

package/src/components/Modals/AttachSheet/AttachSheet.tsx

@@ -1,7 +1,9 @@
 /** @format */
 
-import React, { useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
+  Animated,
+  Easing,
   Modal,
   Platform,
   StyleSheet,
@@ -20,6 +22,11 @@ interface AttachSheetProps {
   primaryColor?: string;
 }
 
+// Starting translateY for the sheet. Larger than any realistic sheet
+// height so it sits fully below the viewport before opening; the exact
+// number doesn't matter visually because it animates to 0.
+const SHEET_OFFSCREEN = 600;
+
 const AttachSheet: React.FC<AttachSheetProps> = ({
   visible,
   onClose,
@@ -28,22 +35,94 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
   onDocument,
   primaryColor = '#0052CD',
 }) => {
+  // Pending handler captured on row tap — runs once the EXIT animation
+  // finishes so iOS doesn't try to present an image picker over a
+  // still-dismissing modal (was the original reason for the
+  // platform-split + Modal.onDismiss dance). The animation completion
+  // callback now drives this on both platforms.
   const pendingRef = useRef<(() => void) | null>(null);
 
-  const runPending = () => {
-    const fn = pendingRef.current;
-    pendingRef.current = null;
-    fn?.();
-  };
+  // Local "modal stays mounted while animating out" state. The parent
+  // controls `visible`; we mirror it but delay unmount until the exit
+  // animation has played so the slide-down is actually seen.
+  const [mounted, setMounted] = useState(visible);
 
-  const trigger = (handler: () => void) => () => {
-    if (Platform.OS === 'ios') {
-      pendingRef.current = handler;
-      onClose();
-    } else {
-      onClose();
-      setTimeout(handler, 150);
+  // Two separate Animated values — the whole point of the rewrite:
+  //   • backdropOpacity: fades the dim layer in/out (no slide).
+  //   • sheetTranslateY: slides ONLY the sheet up from below.
+  // RN Modal's built-in `animationType="slide"` slides the entire
+  // contents (backdrop included) so the dim shade entered from the
+  // bottom — what looked "awful". Splitting these gives the standard
+  // bottom-sheet feel.
+  const backdropOpacity = useRef(new Animated.Value(0)).current;
+  const sheetTranslateY = useRef(
+    new Animated.Value(SHEET_OFFSCREEN)
+  ).current;
+
+  useEffect(() => {
+    if (visible) {
+      setMounted(true);
+      // Reset to starting positions BEFORE the Modal becomes visible so
+      // the first animated frame is below-the-fold (not a flash of the
+      // settled sheet).
+      backdropOpacity.setValue(0);
+      sheetTranslateY.setValue(SHEET_OFFSCREEN);
+      // requestAnimationFrame lets the Modal commit its mount before the
+      // animation starts; without this the first frame can be skipped.
+      const raf = requestAnimationFrame(() => {
+        Animated.parallel([
+          Animated.timing(backdropOpacity, {
+            toValue: 1,
+            duration: 220,
+            easing: Easing.out(Easing.cubic),
+            useNativeDriver: true,
+          }),
+          Animated.spring(sheetTranslateY, {
+            toValue: 0,
+            // Tuned for a quick-but-not-bouncy entry. tension is the
+            // "stiffness" knob, friction the "damping" knob in RN's
+            // spring config.
+            tension: 90,
+            friction: 14,
+            useNativeDriver: true,
+          }),
+        ]).start();
+      });
+      return () => cancelAnimationFrame(raf);
     }
+    if (!mounted) {return;}
+    // Exit: fade the backdrop, slide the sheet down, then unmount and
+    // fire any pending picker handler.
+    Animated.parallel([
+      Animated.timing(backdropOpacity, {
+        toValue: 0,
+        duration: 180,
+        easing: Easing.in(Easing.cubic),
+        useNativeDriver: true,
+      }),
+      Animated.timing(sheetTranslateY, {
+        toValue: SHEET_OFFSCREEN,
+        duration: 220,
+        easing: Easing.in(Easing.cubic),
+        useNativeDriver: true,
+      }),
+    ]).start(({ finished }) => {
+      if (!finished) {return;} // interrupted (rapid re-open) → leave state alone
+      setMounted(false);
+      const fn = pendingRef.current;
+      pendingRef.current = null;
+      fn?.();
+    });
+    return undefined;
+  }, [visible]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const trigger = (handler: () => void) => () => {
+    // Capture the handler and ask parent to close. The exit-animation
+    // completion above fires `handler` AFTER the sheet has slid away,
+    // so iOS no longer tries to present a picker over a dismissing
+    // modal — and Android no longer needs the ad-hoc 150ms setTimeout.
+    pendingRef.current = handler;
+    onClose();
   };
 
   const rows: {
@@ -75,52 +154,66 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
   return (
     <Modal
       transparent
-      visible={visible}
-      animationType="slide"
+      visible={mounted}
+      // We drive the animation ourselves — disable RN's built-in slide
+      // (which slid the backdrop too) so the fade + spring above are the
+      // only motion.
+      animationType="none"
       onRequestClose={onClose}
-      onDismiss={runPending}
+      // Hardware-back / iOS gesture also routes through onClose, which
+      // flips `visible` and triggers our exit animation above.
     >
-      <TouchableOpacity
-        style={styles.backdrop}
-        activeOpacity={1}
-        onPress={onClose}
+      <Animated.View
+        style={[styles.backdrop, { opacity: backdropOpacity }]}
       >
-        <TouchableOpacity activeOpacity={1} style={styles.sheet}>
-          <View style={styles.grabber} />
-          <Text style={styles.title}>Attach</Text>
-          {rows.map(({ label, hint, Icon, handler }, idx) => (
-            <TouchableOpacity
-              key={label}
-              activeOpacity={0.6}
-              style={[
-                styles.row,
-                idx < rows.length - 1 && styles.rowDivider,
-              ]}
-              onPress={trigger(handler)}
-            >
-              <View
+        <TouchableOpacity
+          style={StyleSheet.absoluteFill}
+          activeOpacity={1}
+          onPress={onClose}
+        />
+        <Animated.View
+          style={[
+            styles.sheet,
+            { transform: [{ translateY: sheetTranslateY }] },
+          ]}
+        >
+          <TouchableOpacity activeOpacity={1}>
+            <View style={styles.grabber} />
+            <Text style={styles.title}>Attach</Text>
+            {rows.map(({ label, hint, Icon, handler }, idx) => (
+              <TouchableOpacity
+                key={label}
+                activeOpacity={0.6}
                 style={[
-                  styles.iconBubble,
-                  { backgroundColor: primaryColor + '14' },
+                  styles.row,
+                  idx < rows.length - 1 && styles.rowDivider,
                 ]}
+                onPress={trigger(handler)}
               >
-                <Icon color={primaryColor} width={20} height={20} />
-              </View>
-              <View style={styles.rowText}>
-                <Text style={styles.rowLabel}>{label}</Text>
-                <Text style={styles.rowHint}>{hint}</Text>
-              </View>
+                <View
+                  style={[
+                    styles.iconBubble,
+                    { backgroundColor: primaryColor + '14' },
+                  ]}
+                >
+                  <Icon color={primaryColor} width={20} height={20} />
+                </View>
+                <View style={styles.rowText}>
+                  <Text style={styles.rowLabel}>{label}</Text>
+                  <Text style={styles.rowHint}>{hint}</Text>
+                </View>
+              </TouchableOpacity>
+            ))}
+            <TouchableOpacity
+              activeOpacity={0.6}
+              style={styles.cancelRow}
+              onPress={onClose}
+            >
+              <Text style={styles.cancelLabel}>Cancel</Text>
             </TouchableOpacity>
-          ))}
-          <TouchableOpacity
-            activeOpacity={0.6}
-            style={styles.cancelRow}
-            onPress={onClose}
-          >
-            <Text style={styles.cancelLabel}>Cancel</Text>
           </TouchableOpacity>
-        </TouchableOpacity>
-      </TouchableOpacity>
+        </Animated.View>
+      </Animated.View>
     </Modal>
   );
 };

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

@@ -293,11 +293,22 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
         <ProfileImagePlaceholder
           name={activeRoom.title || activeRoom.name}
           icon={activeRoom.icon}
+          // Two gates control whether the icon is editable:
+          //   1. role — only non-participants could edit before.
+          //   2. NEW: `disableChatInfo.disableIconEdit` — hard kill from
+          //      config so a consumer can make the icon read-only for
+          //      everyone (e.g. branded rooms, patient-facing apps).
+          // Both must allow it for the picker/remove affordances to show.
           upload={{
             onUpload,
-            active: activeRoom?.role !== 'participant' ? true : false,
+            active:
+              !config?.disableChatInfo?.disableIconEdit &&
+              activeRoom?.role !== 'participant',
+          }}
+          remove={{
+            enabled: !config?.disableChatInfo?.disableIconEdit,
+            onRemoveClick,
           }}
-          remove={{ enabled: true, onRemoveClick }}
           role={activeRoom?.role}
           size={128}
         />
@@ -377,7 +388,18 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
                   >
                     <Pressable
                       style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', gap: 16 }}
-                      onPress={() => handleUserAvatarClick(user)}
+                      // `disableChatInfo.disableMemberTap` blocks the
+                      // tap entirely so the user-profile popup never
+                      // opens. `disableMemberProfileActions` only hid
+                      // the action buttons INSIDE that popup, leaving
+                      // the popup itself to open on tap — this gate
+                      // closes the door. Customer-reported #16.
+                      onPress={
+                        config?.disableChatInfo?.disableMemberTap
+                          ? undefined
+                          : () => handleUserAvatarClick(user)
+                      }
+                      disabled={!!config?.disableChatInfo?.disableMemberTap}
                     >
                       <ProfileImagePlaceholder
                         name={`${user.firstName} ${user.lastName}`}

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

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
-import { WebView } from 'react-native-webview';
+import { StyleSheet, Text, View } from 'react-native';
+import GViewWebView from './GViewWebView';
 
 interface DocumentViewerProps {
   /** Public CDN URL of the doc. Must be reachable from Google's servers. */
@@ -14,28 +14,16 @@ interface DocumentViewerProps {
  * PPTX / TXT / RTF / CSV) and other non-PDF formats supported by
  * Google's free gview rendering service.
  *
- * Strategy: embed `https://docs.google.com/gview?url=<encoded>&embedded=true`
- * inside a WebView. Google fetches the doc from its public URL and
- * renders it to a viewable iframe — no client-side dependency on
- * native office libraries, no extra peer dep. Works for any backend
- * whose file URLs are publicly reachable (which Ethora's `/files/`
- * already are — they're CDN URLs returned in `item.location`).
  *
  * Limitations (documented for the integrator):
  *   - Requires public URL — won't work for auth-gated downloads.
  *   - First load can take 2-5s on slow networks.
  *   - Read-only — no editing, no print/share buttons.
  *
- * For PDFs use the existing PdfViewer (downloads then renders locally).
  */
 const DocumentViewer: React.FC<DocumentViewerProps> = ({ url, fileName }) => {
-  const [loaded, setLoaded] = useState(false);
   const [errored, setErrored] = useState(false);
 
-  const viewerUrl = `https://docs.google.com/gview?url=${encodeURIComponent(
-    url
-  )}&embedded=true`;
-
   if (errored) {
     return (
       <View style={styles.center}>
@@ -50,37 +38,12 @@ const DocumentViewer: React.FC<DocumentViewerProps> = ({ url, fileName }) => {
     );
   }
 
-  return (
-    <View style={styles.container}>
-      <WebView
-        source={{ uri: viewerUrl }}
-        style={styles.webview}
-        originWhitelist={['*']}
-        startInLoadingState
-        onLoadEnd={() => setLoaded(true)}
-        onError={() => setErrored(true)}
-        onHttpError={() => setErrored(true)}
-      />
-      {!loaded && (
-        <View style={styles.loadingOverlay} pointerEvents="none">
-          <ActivityIndicator size="large" />
-        </View>
-      )}
-    </View>
-  );
+  return <GViewWebView url={url} onError={() => setErrored(true)} />;
 };
 
 export default DocumentViewer;
 
 const styles = StyleSheet.create({
-  container: { flex: 1, width: '100%', backgroundColor: '#fff' },
-  webview: { flex: 1, backgroundColor: '#fff' },
-  loadingOverlay: {
-    ...StyleSheet.absoluteFillObject,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#ffffff',
-  },
   center: {
     flex: 1,
     alignItems: 'center',

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

@@ -27,7 +27,7 @@ import { useToast } from '../../../context/ToastContext';
 import PdfViewer from './PdfView';
 import DocumentViewer from './DocumentViewer';
 import AudioMessage from '../../styled/AudioMessage';
-import { ensureFilenameHasExtension } from '../../../helpers/mimeToExtension';
+import { ensureFilenameHasExtension, isLikelyAudio } from '../../../helpers/mimeToExtension';
 
 // MIME types Google's gview embed renders reliably. Everything else
 // falls through to the info-card so the user can still download.
@@ -240,7 +240,44 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
         );
       case activeFile.mimetype.startsWith('video/'):
         return <ModalVideo uri={activeFile.fileURL} />;
-      case activeFile.mimetype.startsWith('audio/'):
+      case activeFile.mimetype.includes('application/octet-stream'):
+        return (
+          <View
+            style={{
+              width: '100%',
+              padding: 20,
+              gap: 12,
+              backgroundColor: '#FFF8ED',
+              borderRadius: 16,
+            }}
+          >
+            <Text style={{ fontSize: 16, fontWeight: '600' }}>
+              Voice message
+            </Text>
+            <AudioMessage
+              src={activeFile.fileURL}
+              mimeType={activeFile.mimetype}
+              fileName={activeFile.fileName}
+              originalName={activeFile.originalName}
+              duration={activeFile.duration}
+              waveForm={activeFile.waveForm}
+            />
+          </View>
+        );
+      // Mirrors the MediaMessage heuristic: treat octet-stream voicemails
+      // with audio-shaped filenames / URLs as audio so the preview shows
+      // the player instead of an "Unsupported" card. Customer-reported
+      // #9 voicemail fix — see isLikelyAudio in mimeToExtension.ts.
+      case isLikelyAudio(
+        activeFile.mimetype,
+        activeFile.fileName,
+        activeFile.fileURL,
+        {
+          duration: activeFile.duration,
+          waveForm: activeFile.waveForm,
+          originalName: activeFile.originalName,
+        }
+      ):
         return (
           <View
             style={{
@@ -253,11 +290,18 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
           >
             <Text style={{ fontSize: 16, fontWeight: '600' }}>
               {ensureFilenameHasExtension(
-                activeFile.fileName,
+                activeFile.originalName || activeFile.fileName,
                 activeFile.mimetype
               )}
             </Text>
-            <AudioMessage src={activeFile.fileURL} />
+            <AudioMessage
+              src={activeFile.fileURL}
+              mimeType={activeFile.mimetype}
+              fileName={activeFile.fileName}
+              originalName={activeFile.originalName}
+              duration={activeFile.duration}
+              waveForm={activeFile.waveForm}
+            />
           </View>
         );
       case activeFile.mimetype === 'application/pdf':