@ethora/chat-component-rn 26.5.11 → 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();
 
@@ -227,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/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 {
+  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,7 +187,28 @@ 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: {
         // Some senders (notably the web app's voice-message uploader)
@@ -58,8 +219,17 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
         // 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 (isLikelyAudio(mimeType, displayName, location)) {
-          return <AudioMessage src={location || ''} />;
+        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
@@ -67,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}
           />
         );
       }
@@ -76,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/MessageInteractions.tsx

@@ -13,6 +13,7 @@ import {
   View,
   Pressable,
   Dimensions,
+  Keyboard,
   type LayoutChangeEvent,
 } from 'react-native';
 import * as Clipboard from 'expo-clipboard';
@@ -56,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 (
@@ -107,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;
@@ -116,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;
@@ -130,7 +162,7 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
     );
 
     return { top, left };
-  }, [position, menuSize, config?.keyboardVerticalOffset]);
+  }, [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.

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

@@ -240,6 +240,30 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
         );
       case activeFile.mimetype.startsWith('video/'):
         return <ModalVideo uri={activeFile.fileURL} />;
+      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
@@ -247,7 +271,12 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
       case isLikelyAudio(
         activeFile.mimetype,
         activeFile.fileName,
-        activeFile.fileURL
+        activeFile.fileURL,
+        {
+          duration: activeFile.duration,
+          waveForm: activeFile.waveForm,
+          originalName: activeFile.originalName,
+        }
       ):
         return (
           <View
@@ -261,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':