@ethora/chat-component-rn 26.5.11 → 26.5.13

package/src/components/MainComponents/ChatRoom.tsx

@@ -32,11 +32,13 @@ import { FlatList } from 'react-native';
 import {
   Platform,
   TouchableWithoutFeedback,
-  Keyboard,
   View,
   KeyboardEvent,
 } from 'react-native';
-import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
+import {
+  KeyboardAvoidingView,
+  KeyboardStickyView,
+} from 'react-native-keyboard-controller';
 import useComposing from '../../hooks/useComposing';
 import { store } from '../../roomStore';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -229,25 +231,61 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
       bottomInset: insets.bottom,
     });
 
+    // Keyboard avoidance is delegated to react-native-keyboard-controller's
+    // KeyboardAvoidingView. When the HOST app supplies its own keyboard
+    // handling (its own KeyboardProvider + KeyboardAvoidingView around
+    // <Chat>), this built-in one becomes a SECOND avoider wrapping the same
+    // tree; two of them both animating padding on keyboard open is the
+    // Android flicker reported in bug #6. `disableKeyboardAvoidingView`
+    // swaps this wrapper for a plain View so the host owns it outright
+    // (ReduxWrapper drops the built-in KeyboardProvider under the same flag).
+    //
+    // Bug #6 history (built-in path):
+    //  - Original: behavior="height" on Android — flicker, because
+    //    Android's adjustResize already shrinks the window; KAV resizing
+    //    on top double-resized every keyboard open.
+    //  - 26.5.6: behavior={undefined} on Android — input got completely
+    //    blocked when a host disables adjustResize via softInputMode.
+    //  - 26.5.8: behavior="padding" on BOTH platforms — input lifted above
+    //    the keyboard regardless of the host's softInputMode.
+    // Three keyboard strategies (default = avoidingView, behaviour unchanged):
+    //  • none  ('disableKeyboardAvoidingView'): plain View — the host owns
+    //    the keyboard entirely (ReduxWrapper also drops the KeyboardProvider).
+    //  • sticky('keyboardStickyInput'): plain View outer + ONLY the input
+    //    dock wrapped in <KeyboardStickyView>, so just the input tracks the
+    //    keyboard and the message list is never resized/reflowed — avoids the
+    //    Android "messages jump/flash" the padding KAV causes. Best for
+    //    edge-to-edge hosts (the OS doesn't also resize the window).
+    //  • avoidingView (default): keyboard-controller KAV, behavior="padding".
+    const noKeyboardHandling =
+      !!configWithEventHandlers?.disableKeyboardAvoidingView;
+    const stickyInput =
+      !noKeyboardHandling && !!configWithEventHandlers?.keyboardStickyInput;
+    const avoidKeyboard = !noKeyboardHandling && !stickyInput;
+    const KeyboardWrapper: React.ComponentType<any> = avoidKeyboard
+      ? KeyboardAvoidingView
+      : View;
+    const keyboardWrapperProps = avoidKeyboard
+      ? {
+          style: { flex: 1 },
+          behavior: 'padding' as const,
+          keyboardVerticalOffset,
+        }
+      : { style: { flex: 1 } };
+    // Input dock: a plain View normally; under the sticky strategy it becomes
+    // a KeyboardStickyView so it (and only it) lifts with the keyboard.
+    const InputDockTag: React.ComponentType<any> = stickyInput
+      ? KeyboardStickyView
+      : View;
+    const inputDockProps: any = {
+      style: { paddingBottom: inputDockPaddingBottom, backgroundColor: '#fff' },
+      ...(stickyInput
+        ? { offset: { closed: 0, opened: keyboardVerticalOffset } }
+        : {}),
+    };
+
     return (
-      <KeyboardAvoidingView
-        style={{ flex: 1 }}
-        // Bug #6 history:
-        //  - Original code: behavior="height" on Android — caused
-        //    flicker because Android's adjustResize already shrinks
-        //    the window; KAV resizing on top of that double-resized
-        //    every keyboard open.
-        //  - 26.5.6 attempt: behavior={undefined} on Android — input
-        //    got completely blocked because some host apps disable
-        //    adjustResize via the activity's softInputMode.
-        //  - 26.5.8 fix: behavior="padding" on BOTH platforms. Padding
-        //    adds bottom-padding equal to the keyboard height without
-        //    changing the layout's height prop — no double-resize on
-        //    Android, no flicker, and the input is always lifted above
-        //    the keyboard regardless of the host's softInputMode.
-        behavior="padding"
-        keyboardVerticalOffset={keyboardVerticalOffset}
-      >
+      <KeyboardWrapper {...keyboardWrapperProps}>
         <ChatContainer
           style={
             configWithEventHandlers?.chatRoomStyles
@@ -369,7 +407,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
           {editAction && editAction.isEdit && (
             <EditWrapper text={editAction.text || ''} onClose={onCloseEdit} />
           )}
-          <View style={{ paddingBottom: inputDockPaddingBottom, backgroundColor: '#fff' }}>
+          <InputDockTag {...inputDockProps}>
             {CustomInputComponent ? (
               <CustomInputComponent
                 sendMessage={
@@ -401,7 +439,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
                 )}
               />
             )}
-          </View>
+          </InputDockTag>
 
           {configWithEventHandlers?.customTypingIndicator?.enabled &&
             (configWithEventHandlers.customTypingIndicator.position ===
@@ -425,7 +463,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
               />
             )}
         </ChatContainer>
-      </KeyboardAvoidingView>
+      </KeyboardWrapper>
     );
   },
 );

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/MainComponents/ReduxWrapper.tsx

@@ -33,18 +33,32 @@ export const ReduxWrapper: React.FC<ChatWrapperProps> = React.memo(
       return props.config;
     }, [props.config]);
 
+    // Host apps that own their keyboard handling (their own
+    // KeyboardProvider + KeyboardAvoidingView around <Chat>) set
+    // `disableKeyboardAvoidingView` — drop the built-in KeyboardProvider
+    // here too so there aren't two nested providers (the second is part of
+    // the Android keyboard flicker in bug #6; ChatRoom drops the matching
+    // KeyboardAvoidingView under the same flag).
+    const ownKeyboardHandling = !memoizedConfig?.disableKeyboardAvoidingView;
+
+    const tree = (
+      <XmppProvider config={memoizedConfig} isVisible={props.isVisible}>
+        <ToastProvider>
+          <MessageNotificationProvider config={memoizedConfig}>
+            <LoginWrapper config={memoizedConfig} {...props} />
+          </MessageNotificationProvider>
+        </ToastProvider>
+      </XmppProvider>
+    );
+
     return (
       <Provider store={store}>
         <SafeAreaProvider>
-          <KeyboardProvider>
-            <XmppProvider config={memoizedConfig} isVisible={props.isVisible}>
-              <ToastProvider>
-                <MessageNotificationProvider config={memoizedConfig}>
-                  <LoginWrapper config={memoizedConfig} {...props} />
-                </MessageNotificationProvider>
-              </ToastProvider>
-            </XmppProvider>
-          </KeyboardProvider>
+          {ownKeyboardHandling ? (
+            <KeyboardProvider>{tree}</KeyboardProvider>
+          ) : (
+            tree
+          )}
         </SafeAreaProvider>
       </Provider>
     );

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',