@ethora/chat-component-rn 26.4.1 → 26.4.2

package/src/components/MainComponents/RoomList.tsx

@@ -182,6 +182,11 @@ const RoomList: React.FC<RoomListProps> = ({
                 keyExtractor={(item) => item.jid}
                 renderItem={({ item }) => (
                   <Pressable
+                    // Stable testID so e2e drivers can target a room
+                    // row by its jid local-part (e.g. Main chat under
+                    // app id `..._...759` → testID `room-...759`).
+                    testID={`room-${(item.jid || '').split('@')[0]}`}
+                    accessibilityLabel={`room-${item.title || item.name}`}
                     onPress={() => performClick(item)}
                     onPressIn={handlePressIn}
                     onPressOut={handlePressOut}
@@ -237,8 +242,8 @@ const styles = StyleSheet.create({
   },
   chatList: {
     flex: 1,
-    paddingTop: 10,
-    paddingHorizontal: 8,
+    paddingTop: 8,
+    paddingHorizontal: 16,
     backgroundColor: '#FAFAFA',
   },
 });

package/src/components/MessageBubble/Message.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useState } from 'react';
 import {
   View,
-  TouchableWithoutFeedback,
+  Pressable,
   StyleSheet,
   findNodeHandle,
   UIManager,
@@ -117,6 +117,10 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
 
   const [isPressed, setIsPressed] = useState(false);
 
+  if (__DEV__ && message.id && !(globalThis as any).__loggedMsg?.[message.id]) {
+    ((globalThis as any).__loggedMsg ||= {})[message.id] = true;
+  }
+
   const [contextMenuPosition, setContextMenuPosition] = useState<{
     x: number;
     y: number;
@@ -264,7 +268,7 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
             )}
           </CustomMessagePhotoContainer>
         )}
-        <TouchableWithoutFeedback
+        <Pressable
           // disableInteractions hides the long-press → context menu
           // (delete / edit / reply / react). Mirrors web's config gate.
           onLongPress={
@@ -354,7 +358,7 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
             )}
           </MessageFooter>
           </CustomMessageBubble>
-        </TouchableWithoutFeedback>
+        </Pressable>
       </View>
       {!config?.disableInteractions && isPressed && (
         <MessageInteractions

package/src/components/MessageBubble/MessageInteractions.tsx

@@ -1,10 +1,5 @@
 import React, { useMemo, useState } from 'react';
-import {
-  ContextMenu,
-  Delimeter,
-  MenuItem,
-  Overlay,
-} from '../ContextMenu/ContextMenuComponents';
+import { Delimeter, MenuItem } from '../ContextMenu/ContextMenuComponents';
 import { useDispatch, useSelector } from 'react-redux';
 import { RootState } from '../../roomStore';
 import {
@@ -23,7 +18,7 @@ import {
   View,
   Pressable,
 } from 'react-native';
-import Clipboard from '@react-native-clipboard/clipboard';
+import * as Clipboard from 'expo-clipboard';
 import { useToast } from '../../context/ToastContext';
 import EmojiPicker from 'react-native-emoji-selector';
 
@@ -94,14 +89,24 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
     // }
   };
 
-  const handleCopyMessage = (text: string) => {
-    Clipboard.setString(text);
-    showToast({
-      id: Date.now().toString(),
-      title: 'Success',
-      message: 'Copied to clipboard!',
-      type: 'success',
-    });
+  const handleCopyMessage = async (text: string) => {
+    try {
+      await Clipboard.setStringAsync(text);
+      showToast({
+        id: Date.now().toString(),
+        title: 'Success',
+        message: 'Copied to clipboard!',
+        type: 'success',
+      });
+    } catch (err) {
+      console.log(err);
+      showToast({
+        id: Date.now().toString(),
+        title: 'Copy failed',
+        message: (err as Error)?.message || 'Unknown error',
+        type: 'error',
+      });
+    }
     closeMenu();
   };
 
@@ -135,11 +140,9 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
       onRequestClose={closeMenu}
     >
       {!message.isDeleted && (
-        <Overlay onPress={closeMenu}>
-          <ContextMenu
-            style={[styles.contextMenu, memoPosition]}
-            // style={{ top: contextMenu.y, left: contextMenu.x }}
-          >
+        <View style={styles.overlayFill}>
+          <Pressable style={StyleSheet.absoluteFill} onPress={closeMenu} />
+          <View style={[styles.contextMenu, memoPosition]}>
             {/* <MenuItem onClick={() => console.log(MESSAGE_INTERACTIONS.SEND_COINS)}>
             {MESSAGE_INTERACTIONS.SEND_COINS}
             <MESSAGE_INTERACTIONS_ICONS.SEND_COINS />{' '}
@@ -149,43 +152,41 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
             {MESSAGE_INTERACTIONS.SEND_ITEM}
             <MESSAGE_INTERACTIONS_ICONS.SEND_ITEM />{' '}
           </MenuItem> */}
-            {/* Reaction row — hidden when consumer sets
-               `config.disableReactions: true`. Mirrors the gate web
-               applies inside its MessageInteractions panel. */}
+            {/*
             {!config?.disableReactions && (
-            <View style={{ flexDirection: 'row', paddingBottom: 10 }}>
-            {fixedEmojiIds.map((id) => (
-              <Pressable
-                key={id}
-                onPress={() => handleReactionClick(id)}
-                style={{ marginRight: 6 }}
-              >
-                <Text style={{ fontSize: 26 }}>{convertIdToEmoji(id)}</Text>
-              </Pressable>
-            ))}
-
-            {/* ArrowButton */}
-            <Pressable
-              onPress={() => setPickerVisible(!pickerVisible)}
-              style={{ marginLeft: 10 }}
-            >
-              <Text style={{ fontSize: 24 }}>⌄</Text>
-            </Pressable>
-          </View>
+              <View style={{ flexDirection: 'row', paddingBottom: 10 }}>
+                {fixedEmojiIds.map((id) => (
+                  <Pressable
+                    key={id}
+                    onPress={() => handleReactionClick(id)}
+                    style={{ marginRight: 6 }}
+                  >
+                    <Text style={{ fontSize: 26 }}>{convertIdToEmoji(id)}</Text>
+                  </Pressable>
+                ))}
+                <Pressable
+                  onPress={() => setPickerVisible(!pickerVisible)}
+                  style={{ marginLeft: 10 }}
+                >
+                  <Text style={{ fontSize: 24 }}>⌄</Text>
+                </Pressable>
+              </View>
             )}
 
-          {!config?.disableReactions && pickerVisible && (
-            <View style={{ height: 250 }}>
-              <EmojiPicker
-                onEmojiSelected={(emoji) => {
-                  handleReactionClick(emoji);
-                }}
-                showSearchBar={false}
-                showTabs={false}
-              />
-            </View>
-          )}
+            {!config?.disableReactions && pickerVisible && (
+              <View style={{ height: 250 }}>
+                <EmojiPicker
+                  onEmojiSelected={(emoji) => {
+                    handleReactionClick(emoji);
+                  }}
+                  showSearchBar={false}
+                  showTabs={false}
+                />
+              </View>
+            )}
+            */}
 
+            {/*
             {!isReply && (
               <>
                 <MenuItem onPress={handleReplyMessage}>
@@ -195,31 +196,32 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
                 <Delimeter />
               </>
             )}
+            */}
             <MenuItem onPress={() => handleCopyMessage(message.body!)}>
               <Text>{MESSAGE_INTERACTIONS.COPY}</Text>
               <MESSAGE_INTERACTIONS_ICONS.COPY />
             </MenuItem>
-            <Delimeter />
             {isUser && (
               <>
+                <Delimeter />
                 <MenuItem onPress={handleEditMessage}>
                   <Text>{MESSAGE_INTERACTIONS.EDIT}</Text>
                   <MESSAGE_INTERACTIONS_ICONS.EDIT />
                 </MenuItem>
                 <Delimeter />
+                <MenuItem onPress={handleDeleteMessage}>
+                  <Text>{MESSAGE_INTERACTIONS.DELETE}</Text>
+                  <MESSAGE_INTERACTIONS_ICONS.DELETE />
+                </MenuItem>
               </>
             )}
-            <MenuItem onPress={handleDeleteMessage}>
-              <Text>{MESSAGE_INTERACTIONS.DELETE}</Text>
-              <MESSAGE_INTERACTIONS_ICONS.DELETE />
-            </MenuItem>
             {/* <Delimeter />
           <MenuItem onClick={() => console.log(MESSAGE_INTERACTIONS.REPORT)}>
             {MESSAGE_INTERACTIONS.REPORT}
             <MESSAGE_INTERACTIONS_ICONS.REPORT />{' '}
           </MenuItem> */}
-          </ContextMenu>
-        </Overlay>
+          </View>
+        </View>
       )}
 
     </Modal>
@@ -229,19 +231,21 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
 export default MessageInteractions;
 
 const styles = StyleSheet.create({
-  overlay: {
+  overlayFill: {
     ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    backgroundColor: 'transparent',
   },
   contextMenu: {
     position: 'absolute',
     backgroundColor: 'white',
-    padding: 10,
+    paddingVertical: 8,
+    paddingHorizontal: 16,
     borderRadius: 8,
     shadowColor: '#000',
     shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.25,
     shadowRadius: 4,
     elevation: 5,
+    minWidth: 180,
   },
 });

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

@@ -0,0 +1,195 @@
+/** @format */
+
+import React from 'react';
+import {
+  Modal,
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { CameraIcon, DocumentIcon, MediaIcon } from '../../../assets/icons';
+
+interface AttachSheetProps {
+  visible: boolean;
+  onClose: () => void;
+  onCamera: () => void;
+  onGallery: () => void;
+  onDocument: () => void;
+  primaryColor?: string;
+}
+
+const AttachSheet: React.FC<AttachSheetProps> = ({
+  visible,
+  onClose,
+  onCamera,
+  onGallery,
+  onDocument,
+  primaryColor = '#0052CD',
+}) => {
+  const trigger = (handler: () => void) => () => {
+    onClose();
+    setTimeout(handler, 150);
+  };
+
+  const rows: {
+    label: string;
+    hint: string;
+    Icon: React.ComponentType<any>;
+    handler: () => void;
+  }[] = [
+    {
+      label: 'Take photo',
+      hint: 'Capture with the camera',
+      Icon: CameraIcon,
+      handler: onCamera,
+    },
+    {
+      label: 'Photo or video',
+      hint: 'Pick from your library',
+      Icon: MediaIcon,
+      handler: onGallery,
+    },
+    {
+      label: 'Document',
+      hint: 'Choose a file',
+      Icon: DocumentIcon,
+      handler: onDocument,
+    },
+  ];
+
+  return (
+    <Modal
+      transparent
+      visible={visible}
+      animationType="slide"
+      onRequestClose={onClose}
+    >
+      <TouchableOpacity
+        style={styles.backdrop}
+        activeOpacity={1}
+        onPress={onClose}
+      >
+        <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
+                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>
+      </TouchableOpacity>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: 'rgba(15,15,20,0.45)',
+    justifyContent: 'flex-end',
+  },
+  sheet: {
+    backgroundColor: '#fff',
+    borderTopLeftRadius: 24,
+    borderTopRightRadius: 24,
+    paddingTop: 8,
+    paddingBottom: Platform.OS === 'ios' ? 32 : 20,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: -2 },
+    shadowOpacity: 0.08,
+    shadowRadius: 12,
+    elevation: 16,
+  },
+  grabber: {
+    alignSelf: 'center',
+    width: 40,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: '#D9D9DE',
+    marginBottom: 12,
+  },
+  title: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: '#8A8A8E',
+    letterSpacing: 0.4,
+    textTransform: 'uppercase',
+    paddingHorizontal: 20,
+    paddingBottom: 8,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingVertical: 14,
+  },
+  rowDivider: {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: '#EFEFF2',
+  },
+  iconBubble: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 14,
+  },
+  rowText: {
+    flex: 1,
+  },
+  rowLabel: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#1C1C1E',
+  },
+  rowHint: {
+    fontSize: 12,
+    color: '#8A8A8E',
+    marginTop: 2,
+  },
+  cancelRow: {
+    marginTop: 8,
+    marginHorizontal: 16,
+    paddingVertical: 14,
+    borderRadius: 14,
+    alignItems: 'center',
+    backgroundColor: '#F2F2F7',
+  },
+  cancelLabel: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#1C1C1E',
+  },
+});
+
+export default AttachSheet;

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

@@ -17,6 +17,7 @@ import Video from 'react-native-video';
 import RNFS from 'react-native-fs';
 import { CameraRoll } from '@react-native-camera-roll/camera-roll';
 import { useToast } from '../../../context/ToastContext';
+import PdfViewer from './PdfView';
 
 export const FullScreenVideo = styled.View`
   width: 100%;
@@ -245,6 +246,8 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
             paused={true}
           />
         );
+      case activeFile.mimetype === 'application/pdf':
+        return <PdfViewer pdfUrl={activeFile.fileURL} />;
       default:
         return (
           <View

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

@@ -0,0 +1,71 @@
+import React, { useEffect, useState } from 'react';
+import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
+import { WebView } from 'react-native-webview';
+import * as FileSystem from 'expo-file-system/legacy';
+
+interface PdfViewerProps {
+  pdfUrl: string;
+}
+
+const PdfViewer: React.FC<PdfViewerProps> = ({ pdfUrl }) => {
+  const [localUri, setLocalUri] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    const run = async () => {
+      try {
+        const target =
+          FileSystem.cacheDirectory + `pdf-${Date.now()}.pdf`;
+        const result = await FileSystem.downloadAsync(pdfUrl, target);
+        if (cancelled) {return;}
+        setLocalUri(result.uri);
+      } catch (e: any) {
+        if (cancelled) {return;}
+        console.log(e?.message);
+        setError(e?.message || 'Download failed');
+      }
+    };
+    run();
+    return () => {
+      cancelled = true;
+    };
+  }, [pdfUrl]);
+
+  if (error) {
+    return (
+      <View style={styles.center}>
+        <Text>Couldn't load PDF: {error}</Text>
+      </View>
+    );
+  }
+
+  if (!localUri) {
+    return (
+      <View style={styles.center}>
+        <ActivityIndicator size="large" />
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <WebView
+        source={{ uri: localUri }}
+        style={styles.webview}
+        originWhitelist={['*']}
+        allowFileAccess
+        allowFileAccessFromFileURLs
+        allowUniversalAccessFromFileURLs
+      />
+    </View>
+  );
+};
+
+export default PdfViewer;
+
+const styles = StyleSheet.create({
+  container: { flex: 1, width: '100%', backgroundColor: '#fff' },
+  webview: { flex: 1, backgroundColor: '#fff' },
+  center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+});

package/src/components/Modals/Modal/Modal.tsx

@@ -3,10 +3,8 @@ import { ModalBackground } from '../styledModalComponents';
 import { ModalType } from '../../../types/types';
 import { useDispatch } from 'react-redux';
 import { setActiveModal } from '../../../roomStore/chatSettingsSlice';
-import {
-  MODAL_COMPONENTS,
-  MODAL_TYPES,
-} from '../../../helpers/constants/MODAL_TYPES';
+import { MODAL_TYPES } from '../../../helpers/constants/MODAL_TYPES';
+import { MODAL_COMPONENTS } from '../../../helpers/constants/MODAL_COMPONENTS';
 
 interface ModalProps {
   children?: React.ReactNode;

package/src/components/Modals/ModalSelectMedia/ModalSelectMedia.tsx

@@ -260,7 +260,6 @@ export const ModalSelectMedia: FC<ModalSelectMediaProps> = ({
       position="leftBottom"
       options={menuOptions}
       openButton={(onPress) => {
-        console.log('🔵 [ModalSelectMedia] Rendering attach button');
         return (
           <Button
             style={{
@@ -274,7 +273,6 @@ export const ModalSelectMedia: FC<ModalSelectMediaProps> = ({
             }}
             EndIcon={<AttachIcon color={config?.colors?.primary || '#0052CD'} />}
             onPress={() => {
-              console.log('🔵 [ModalSelectMedia] Attach button pressed');
               onPress();
             }}
           />

package/src/components/styled/Button.tsx

@@ -56,6 +56,11 @@ interface ButtonProps {
   style?: ViewStyle;
   onPress?: () => void;
   children?: React.ReactNode;
+  // Forwarded for e2e test drivers (Maestro / Detox / Appium). Without
+  // these the styled TouchableOpacity has no stable identifier for
+  // flow scripts to target.
+  testID?: string;
+  accessibilityLabel?: string;
 }
 
 const Button: React.FC<ButtonProps> = ({
@@ -71,9 +76,13 @@ const Button: React.FC<ButtonProps> = ({
   style: containerStyle,
   color,
   children,
+  testID,
+  accessibilityLabel,
 }) => {
   return (
     <CustomButton
+      testID={testID}
+      accessibilityLabel={accessibilityLabel}
       style={[containerStyle]}
       disabled={disabled || loading}
       onPress={onPress}