@ethora/chat-component-rn 26.5.5 → 26.5.10

package/src/components/MainComponents/SystemMessage.tsx

@@ -1,42 +1,54 @@
 import React from 'react';
-import { CustomSystemMessage } from '../styled/StyledComponents';
-import styled from 'styled-components/native';
+import { View, Text, StyleSheet } from 'react-native';
 
 interface SystemMessageProps {
   messageText?: string;
   colors?: { primary?: string; secondary?: string };
 }
 
-export const CustomSystemMessageText = styled.Text<{
-  primary?: string;
-  secondary?: string;
-}>`
-  margin: 0;
-  color: ${(props) => props.primary || '#0052cd'};
-  border-radius: 118px;
-  padding: 5px 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  line-height: 14px;
-  font-weight: 600;
-  background-color: ${(props) => props.secondary || '#e7edf9'};
-  height: 24px;
-  white-space: nowrap;
-`;
-
 const SystemMessage: React.FC<SystemMessageProps> = ({
   messageText,
   colors,
 }) => {
   return (
-    <CustomSystemMessage>
-      <CustomSystemMessageText {...colors}>
-        {messageText}
-      </CustomSystemMessageText>
-    </CustomSystemMessage>
+    <View style={styles.container}>
+      {/* maxWidth lives on this View (not the Text) so the Text reliably
+          wraps to multiple lines instead of staying on one line and
+          getting clipped — a styled.Text with a percentage max-width
+          doesn't bound its own line box the way a View does. */}
+      <View
+        style={[
+          styles.bubble,
+          { backgroundColor: colors?.secondary || '#e7edf9' },
+        ]}
+      >
+        <Text style={[styles.text, { color: colors?.primary || '#0052cd' }]}>
+          {messageText}
+        </Text>
+      </View>
+    </View>
   );
 };
 
 export default SystemMessage;
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    alignItems: 'center',
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+  },
+  bubble: {
+    maxWidth: '85%',
+    borderRadius: 12,
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+  },
+  text: {
+    fontSize: 12,
+    lineHeight: 16,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+});

package/src/components/MessageBubble/Message.tsx

@@ -5,7 +5,6 @@ import {
   StyleSheet,
   findNodeHandle,
   UIManager,
-  Dimensions,
   Text,
 } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
@@ -31,6 +30,7 @@ import { parseMessageBody } from '../../helpers/parseMessageBody';
 import { useMessageHeapState } from '../../hooks/useMessageHeapState';
 import { DoubleTick } from '../../assets/icons';
 import { useXmppClient } from '../../context/xmppProvider';
+import { useSendMessage } from '../../hooks/useSendMessage';
 import { MessageReaction } from './MessageReaction';
 import { MessageFooter } from '../styled/StyledComponents';
 
@@ -47,14 +47,19 @@ const CustomMessageBubble = styled.View<{
   deleted?: boolean;
   backgroundMessageUser?: string;
   backgroundMessage?: string;
+  isMedia?: boolean;
 }>`
   position: relative;
   max-width: 85%;
-  min-width: 30%;
-  padding: 10px;
+  min-width: ${({ isMedia }) => (isMedia ? '0' : '30%')};
+  align-items: ${({ isMedia, isUser }) =>
+    isMedia ? (isUser ? 'flex-end' : 'flex-start') : 'stretch'};
+  padding: ${({isMedia}) => isMedia ? '0' : '10'}px;
+  padding-bottom: ${({isMedia}) => isMedia ? '6' : '10'}px;
   margin-right: ${({isUser}) => isUser ? '0' : '10px'};
   margin-left: ${({isUser}) => isUser ? '10px' : '0'};
   border-radius: 10px;
+  overflow: hidden;
   border-bottom-left-radius: ${({ isUser }) => (isUser ? '10' : '0')}px;
   border-bottom-right-radius: ${({ isUser }) => (isUser ? '0' : '10')}px;
   background-color: ${({
@@ -90,9 +95,12 @@ const CustomMessagePhotoContainer = styled.TouchableOpacity`
   margin-right: 10px;
 `;
 
-const CustomUserName = styled.Text<{ color?: string }>`
+const CustomUserName = styled.Text<{ color?: string; media: boolean }>`
   font-size: 14px;
   font-weight: 500;
+  padding-bottom: 8px;
+  padding-left: ${({media}) => media ? '16px': 0};
+  padding-top: ${({media}) => media ? '8px': 0};
   color: ${({ color }) => color || '#333'};
 `;
 
@@ -109,11 +117,21 @@ const CustomMessageTimestamp = styled.Text<{
   align-self: flex-end;
 `;
 
+const CustomTimestampRow = styled.View<{media: boolean}>`
+  flex-direction: row;
+  align-items: center;
+  align-self: flex-end;
+  margin-top: 4;
+  gap: 4;
+  padding-right: ${({media}) => media ? '10px': 0};
+`;
+
 const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
   const dispatch = useDispatch();
   const { client } = useXmppClient();
   const { config, langSource, user} = useChatSettingState();
-  const { idSet } = useMessageHeapState();
+  const { idSet, failedIdSet } = useMessageHeapState();
+  const { retryMessage } = useSendMessage();
 
   const [isPressed, setIsPressed] = useState(false);
 
@@ -122,12 +140,15 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
   }
 
   const [contextMenuPosition, setContextMenuPosition] = useState<{
-    x: number;
-    y: number;
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
   } | null>(null);
 
   const timerRef = useRef<NodeJS.Timeout | null>(null);
   const messageRef = useRef<View>(null);
+  const bubbleRef = useRef<View>(null);
 
   const handleUserAvatarClick = (user: IUser): void => {
     dispatch(setActiveModal(MODAL_TYPES.PROFILE));
@@ -214,17 +235,22 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
     );
   };
 
+  // Long-press → capture the bubble's on-screen bounding box. The actual
+  // menu placement (above / below, clamped to the viewport) is done in
+  // MessageInteractions, which measures the rendered menu height via
+  // 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 = () => {
-    if (messageRef.current) {
-      const nodeHandle = findNodeHandle(messageRef.current);
+    const target = bubbleRef.current ?? messageRef.current;
+    if (target) {
+      const nodeHandle = findNodeHandle(target);
       if (nodeHandle) {
-        UIManager.measure(nodeHandle, (x, y, width, height, pageX, pageY) => {
-          const screenHeight = Dimensions.get('window').height;
-
-          const enoughSpaceBelow = screenHeight - pageY - height > 150;
+        UIManager.measure(nodeHandle, (_x, _y, width, height, pageX, pageY) => {
           setContextMenuPosition({
-            x: pageX,
-            y: enoughSpaceBelow ? pageY + height : pageY - 150,
+            left: pageX,
+            right: pageX + width,
+            top: pageY,
+            bottom: pageY + height,
           });
         });
       }
@@ -236,7 +262,13 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
     ? parseMessageBody(config?.messageTextFilter.filterFunction(message.body))
     : parseMessageBody(message.body);
 
-  const isPending = idSet.has(message.id) || message?.pending || false;
+  const isFailed = failedIdSet.has(message.id);
+  const isPending =
+    !isFailed && (idSet.has(message.id) || message?.pending || false);
+
+  const onRetryPress = () => {
+    if (isFailed) {retryMessage(message.id);}
+  };
 
   return (
     <View>
@@ -269,6 +301,15 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
           </CustomMessagePhotoContainer>
         )}
         <Pressable
+          // The Pressable fills the row's content area, so the bubble
+          // inside must be aligned to the sender's side — otherwise it
+          // hugs the left and own media bubbles sit with a right-side
+          // gap (text bubbles only looked right because they're narrow).
+          // flex-end for own, flex-start for others.
+          style={{
+            flex: 1,
+            alignItems: isUser ? 'flex-end' : 'flex-start',
+          }}
           // disableInteractions hides the long-press → context menu
           // (delete / edit / reply / react). Mirrors web's config gate.
           onLongPress={
@@ -277,13 +318,15 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
           delayLongPress={500}
         >
           <CustomMessageBubble
+            {...({ ref: bubbleRef, collapsable: false } as any)}
             isUser={isUser}
             deleted={message.isDeleted}
+            isMedia={message?.isMediafile === 'true' && !message?.isDeleted}
             backgroundMessageUser={config?.messageColor?.backgroundMessageUser}
             backgroundMessage={config?.messageColor?.backgroundMessage}
           >
             {!isUser && (
-              <CustomUserName color={config?.colors?.primary}>
+              <CustomUserName color={config?.colors?.primary} media={message?.isMediafile === 'true'}>
                 {message.user.name}
               </CustomUserName>
             )}
@@ -302,6 +345,7 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
                 messageText={message.locationPreview}
                 location={message?.location}
                 message={message}
+                isUser={isUser}
               />
             ) : (
               <>
@@ -325,16 +369,31 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
                 langSource={langSource}
               />
             )}
-            <CustomMessageTimestamp>
-            {!config?.disableSentLogic && isUser && isPending && <Text>sending...</Text>}
-            {new Date(message.date).toLocaleTimeString([], {
-              hour: '2-digit',
-              minute: '2-digit',
-            })}
-            {!config?.disableSentLogic && isUser && !isPending && (
-              <DoubleTick />
-            )}
-          </CustomMessageTimestamp>
+            {/* <View style={styles.timestampRow}> */}
+            <CustomTimestampRow media={message?.isMediafile === 'true'}>
+              {!config?.disableSentLogic && isUser && isPending && (
+                <Text style={styles.timestampText}>sending...</Text>
+              )}
+              {!config?.disableSentLogic && isUser && isFailed && (
+                <Text
+                  onPress={onRetryPress}
+                  style={styles.failedText}
+                  accessibilityRole="button"
+                  accessibilityLabel="Retry sending message"
+                >
+                  ! Failed — tap to retry
+                </Text>
+              )}
+              <Text style={styles.timestampText}>
+                {new Date(message.date).toLocaleTimeString([], {
+                  hour: '2-digit',
+                  minute: '2-digit',
+                })}
+              </Text>
+              {!config?.disableSentLogic && isUser && !isPending && !isFailed && (
+                <DoubleTick />
+              )}
+            </CustomTimestampRow>
 
           {message?.reply?.length && message?.reply?.length > 0 ? (
               <BottomReplyContainer
@@ -401,4 +460,28 @@ const styles = StyleSheet.create({
     marginTop: 5,
     alignSelf: 'flex-end',
   },
+  failedText: {
+    color: '#E53935',
+    fontWeight: '600',
+    marginRight: 6,
+  },
+  // Row keeps the time text and the DoubleTick SVG on the same line.
+  // The time Text gets an explicit lineHeight equal to the 16px tick so
+  // both occupy the same-height box; with alignItems center they line up
+  // exactly. Without the lineHeight the Text's natural line box was
+  // shorter than the icon, so the centred tick floated above the digits.
+  timestampRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'flex-end',
+    marginTop: 4,
+    gap: 4,
+  },
+  timestampText: {
+    fontSize: 12,
+    lineHeight: 16,
+    color: '#999',
+    includeFontPadding: false,
+    textAlignVertical: 'center',
+  },
 });

package/src/components/MessageBubble/MessageInteractions.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import { Delimeter, MenuItem } from '../ContextMenu/ContextMenuComponents';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../roomStore';
@@ -13,6 +13,8 @@ import {
   StyleSheet,
   View,
   Pressable,
+  Dimensions,
+  type LayoutChangeEvent,
 } from 'react-native';
 import * as Clipboard from 'expo-clipboard';
 import { useToast } from '../../context/ToastContext';
@@ -21,7 +23,12 @@ interface MessageInteractionsProps {
   isReply?: boolean;
   isUser?: boolean;
   message: IMessage;
-  position: { x: number; y: number } | null;
+  position: {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+  } | null;
   closeMenu: () => void;
   handleReplyMessage: () => void;
   handleDeleteMessage: () => void;
@@ -45,6 +52,19 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
     (state: RootState) => state.chatSettingStore.config
   );
 
+  const [menuSize, setMenuSize] = useState({ width: 0, height: 0 });
+
+  const handleMenuLayout = (e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    if (
+      width &&
+      height &&
+      (width !== menuSize.width || height !== menuSize.height)
+    ) {
+      setMenuSize({ width, height });
+    }
+  };
+
   const handleCopyMessage = async (text: string) => {
     try {
       await Clipboard.setStringAsync(text);
@@ -71,20 +91,44 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
   };
 
   const memoPosition = useMemo(() => {
-    if (position) {
-      if (isUser) {
-        return {
-          top: position.y,
-          right: 10,
-        };
-      }
-
-      return {
-        top: position.y,
-        left: 10,
-      };
+    if (!position) {
+      return undefined;
+    }
+
+    if (!menuSize.width || !menuSize.height) {
+      return { top: position.bottom, left: position.left, opacity: 0 };
+    }
+
+    const { width: screenWidth, height: screenHeight } =
+      Dimensions.get('window');
+    const bottomReserve = (config?.keyboardVerticalOffset ?? 0) + 24;
+    const topReserve = 16;
+    const sideMargin = 8;
+
+    const spaceBelow = screenHeight - position.bottom - bottomReserve;
+    const spaceAbove = position.top - topReserve;
+
+    let top: number;
+    if (spaceBelow >= menuSize.height) {
+      top = position.bottom;
+    } else if (spaceAbove >= menuSize.height) {
+      top = position.top - menuSize.height;
+    } else {
+      top = Math.max(topReserve, screenHeight - menuSize.height - bottomReserve);
     }
-  }, [position, isUser]);
+
+    const leftMargin = position.left;
+    const rightMargin = screenWidth - position.right;
+    const rightAligned = rightMargin < leftMargin;
+
+    let left = rightAligned ? position.right - menuSize.width : position.left;
+    left = Math.max(
+      sideMargin,
+      Math.min(left, screenWidth - menuSize.width - sideMargin)
+    );
+
+    return { top, left };
+  }, [position, menuSize, config?.keyboardVerticalOffset]);
 
   if (config?.disableInteractions) {return null;}
 
@@ -98,21 +142,32 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
       {!message.isDeleted && (
         <View style={styles.overlayFill}>
           <Pressable style={StyleSheet.absoluteFill} onPress={closeMenu} />
-          <View style={[styles.contextMenu, memoPosition]}>
+          <View
+            style={[styles.contextMenu, memoPosition]}
+            onLayout={handleMenuLayout}
+          >
             <MenuItem onPress={() => handleCopyMessage(message.body!)}>
-              <Text>{MESSAGE_INTERACTIONS.COPY}</Text>
+              <Text style={styles.menuText}>{MESSAGE_INTERACTIONS.COPY}</Text>
               <MESSAGE_INTERACTIONS_ICONS.COPY />
             </MenuItem>
             {isUser && (
               <>
-                <Delimeter />
-                <MenuItem onPress={handleEditMessage}>
-                  <Text>{MESSAGE_INTERACTIONS.EDIT}</Text>
-                  <MESSAGE_INTERACTIONS_ICONS.EDIT />
-                </MenuItem>
+                {/* 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>{MESSAGE_INTERACTIONS.DELETE}</Text>
+                  <Text style={styles.menuText}>{MESSAGE_INTERACTIONS.DELETE}</Text>
                   <MESSAGE_INTERACTIONS_ICONS.DELETE />
                 </MenuItem>
               </>
@@ -135,14 +190,28 @@ const styles = StyleSheet.create({
   contextMenu: {
     position: 'absolute',
     backgroundColor: 'white',
-    paddingVertical: 8,
-    paddingHorizontal: 16,
-    borderRadius: 8,
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+    borderRadius: 12,
     shadowColor: '#000',
     shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.25,
-    shadowRadius: 4,
-    elevation: 5,
+    shadowOpacity: 0.18,
+    shadowRadius: 8,
+    elevation: 6,
     minWidth: 180,
+    // Clip the children to the rounded corners (the hairline dividers
+    // run full width; without this they'd poke past the rounding on
+    // Android).
+    overflow: 'hidden',
+  },
+  // Explicit label styling so rows are the same height on both platforms
+  // — Android's default includeFontPadding made the menu rows taller and
+  // misaligned vs iOS. marginRight keeps the label off the trailing icon.
+  menuText: {
+    fontSize: 16,
+    color: '#141414',
+    includeFontPadding: false,
+    textAlignVertical: 'center',
+    marginRight: 16,
   },
 });

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

@@ -1,6 +1,6 @@
 /** @format */
 
-import React from 'react';
+import React, { useRef } from 'react';
 import {
   Modal,
   Platform,
@@ -28,9 +28,22 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
   onDocument,
   primaryColor = '#0052CD',
 }) => {
+  const pendingRef = useRef<(() => void) | null>(null);
+
+  const runPending = () => {
+    const fn = pendingRef.current;
+    pendingRef.current = null;
+    fn?.();
+  };
+
   const trigger = (handler: () => void) => () => {
-    onClose();
-    setTimeout(handler, 150);
+    if (Platform.OS === 'ios') {
+      pendingRef.current = handler;
+      onClose();
+    } else {
+      onClose();
+      setTimeout(handler, 150);
+    }
   };
 
   const rows: {
@@ -65,6 +78,7 @@ const AttachSheet: React.FC<AttachSheetProps> = ({
       visible={visible}
       animationType="slide"
       onRequestClose={onClose}
+      onDismiss={runPending}
     >
       <TouchableOpacity
         style={styles.backdrop}

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

@@ -0,0 +1,93 @@
+import React, { useState } from 'react';
+import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
+import { WebView } from 'react-native-webview';
+
+interface DocumentViewerProps {
+  /** Public CDN URL of the doc. Must be reachable from Google's servers. */
+  url: string;
+  /** Optional display filename; used for the error fallback only. */
+  fileName?: string;
+}
+
+/**
+ * Inline preview for office documents (DOC / DOCX / XLS / XLSX / PPT /
+ * 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}>
+        <Text style={styles.errorTitle}>
+          {fileName || 'Document'}
+        </Text>
+        <Text style={styles.errorBody}>
+          Couldn't render an inline preview. Tap the save icon above to
+          download the file.
+        </Text>
+      </View>
+    );
+  }
+
+  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>
+  );
+};
+
+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',
+    justifyContent: 'center',
+    padding: 24,
+    gap: 8,
+  },
+  errorTitle: { fontSize: 16, fontWeight: '600' },
+  errorBody: { color: '#666', textAlign: 'center' },
+});