@ethora/chat-component-rn 26.8.1 → 26.8.3

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

@@ -4,6 +4,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { getActiveRoom, RootState } from '../../../roomStore';
 import {
   CloseButton,
+  CloseButtonText,
   GroupContainer,
   ModalBackground,
   ModalContainer,
@@ -11,8 +12,8 @@ import {
 } from '../styledModalComponents';
 import { deleteRoom as deleteRoomApi } from '../../../networking/api-requests/rooms.api';
 import { deleteRoom as deleteRoomAction } from '../../../roomStore/roomsSlice';
-import { Text } from 'react-native';
 import { useToast } from '../../../context/ToastContext';
+import { useTheme } from '../../../hooks/useTheme';
 import { useT } from '../../../i18n/useT';
 
 interface DeleteChatModalProps {
@@ -26,6 +27,7 @@ const DeleteChatModal: React.FC<DeleteChatModalProps> = ({
 }) => {
   const dispatch = useDispatch();
   const { showToast } = useToast();
+  const theme = useTheme();
   const t = useT();
   const activeRoom = useSelector((state: RootState) => getActiveRoom(state));
 
@@ -59,7 +61,7 @@ const DeleteChatModal: React.FC<DeleteChatModalProps> = ({
       <ModalBackground>
         <ModalContainer>
           <CloseButton onPress={handleCloseModal}>
-            <Text style={{ fontSize: 24 }}>&times;</Text>
+            <CloseButtonText>&times;</CloseButtonText>
           </CloseButton>
           <ModalTitle>{t('modal.deleteChat.title')}</ModalTitle>
 
@@ -77,9 +79,9 @@ const DeleteChatModal: React.FC<DeleteChatModalProps> = ({
               style={{
                 width: '100%',
                 borderWidth: 1,
-                borderColor: 'red',
+                borderColor: theme.danger,
             }}
-              color="red"
+              color={theme.danger}
               unstyled
               variant="outlined"
             />

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

@@ -0,0 +1,248 @@
+/** @format */
+
+import React, { useMemo, useState } from 'react';
+import {
+  ActivityIndicator,
+  Modal,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useSelector } from 'react-redux';
+import { getActiveRoom, RootState } from '../../../roomStore';
+import { postReportRoom } from '../../../networking/api-requests/rooms.api';
+import { useToast } from '../../../context/ToastContext';
+import { useT } from '../../../i18n/useT';
+import { getIconColor } from '../../../helpers/getIconColor';
+import { useChatSettingState } from '../../../hooks/useChatSettingState';
+import { useTheme } from '../../../hooks/useTheme';
+import type { ChatTheme } from '../../../theme/theme';
+
+/**
+ * Category ids go to `POST /v1/chats/reports/{chatName}` as-is; the labels
+ * come from the i18n table, which already carried `report.category.*`
+ * strings in all six locales with nothing rendering them until now.
+ */
+const CATEGORIES = [
+  'spam',
+  'violence',
+  'childAbuse',
+  'pornography',
+  'personalDetails',
+  'illegalDrugs',
+  'other',
+] as const;
+
+interface ReportChatModalProps {
+  visible: boolean;
+  onClose: () => void;
+}
+
+const ReportChatModal: React.FC<ReportChatModalProps> = ({
+  visible,
+  onClose,
+}) => {
+  const t = useT();
+  const { showToast } = useToast();
+  const { config } = useChatSettingState();
+  const activeRoom = useSelector((state: RootState) => getActiveRoom(state));
+  const [category, setCategory] = useState<string | null>(null);
+  const [details, setDetails] = useState('');
+  const [sending, setSending] = useState(false);
+  const primary = getIconColor(config);
+  const theme = useTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+
+  const close = () => {
+    setCategory(null);
+    setDetails('');
+    onClose();
+  };
+
+  const submit = async () => {
+    if (!category || sending) {return;}
+    setSending(true);
+    try {
+      await postReportRoom({
+        chatName: activeRoom?.jid?.split('@')[0] || '',
+        category,
+        text: details.trim() || undefined,
+      });
+      showToast({
+        id: Date.now().toString(),
+        title: 'Success',
+        message: t('modal.report.chatTitle'),
+        type: 'success',
+      });
+      close();
+    } catch (error) {
+      console.error('Failed to report chat:', error);
+      showToast({
+        id: Date.now().toString(),
+        title: 'Error',
+        message: t('modal.report.chatTitle'),
+        type: 'error',
+      });
+    } finally {
+      setSending(false);
+    }
+  };
+
+  return (
+    <Modal
+      transparent
+      visible={visible}
+      animationType="fade"
+      onRequestClose={close}
+    >
+      <View style={styles.backdrop}>
+        <TouchableOpacity
+          testID="report-backdrop"
+          style={StyleSheet.absoluteFill}
+          activeOpacity={1}
+          onPress={close}
+        />
+        <View style={styles.card}>
+          <Text style={styles.title}>{t('modal.report.chatTitle')}</Text>
+          <View style={styles.categories}>
+            {CATEGORIES.map((id) => {
+              const selected = category === id;
+              return (
+                <TouchableOpacity
+                  key={id}
+                  testID={`report-category-${id}`}
+                  activeOpacity={0.7}
+                  onPress={() => setCategory(id)}
+                  style={[
+                    styles.category,
+                    selected && { borderColor: primary, backgroundColor: primary + '14' },
+                  ]}
+                >
+                  <Text
+                    style={[styles.categoryLabel, selected && { color: primary }]}
+                  >
+                    {t(`report.category.${id}`)}
+                  </Text>
+                </TouchableOpacity>
+              );
+            })}
+          </View>
+          {category === 'other' && (
+            <TextInput
+              testID="report-details"
+              style={styles.input}
+              placeholder={t('modal.report.otherDetails')}
+              placeholderTextColor={theme.textMuted}
+              value={details}
+              onChangeText={setDetails}
+              multiline
+            />
+          )}
+          <View style={styles.buttons}>
+            <TouchableOpacity
+              activeOpacity={0.7}
+              style={[styles.button, styles.cancel]}
+              onPress={close}
+            >
+              <Text style={styles.cancelLabel}>{t('action.cancel')}</Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              testID="report-submit"
+              activeOpacity={0.7}
+              disabled={!category || sending}
+              style={[
+                styles.button,
+                { backgroundColor: primary, opacity: !category || sending ? 0.5 : 1 },
+              ]}
+              onPress={submit}
+            >
+              {sending ? (
+                <ActivityIndicator color={theme.textOnPrimary} />
+              ) : (
+                <Text style={styles.submitLabel}>{t('action.send')}</Text>
+              )}
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const createStyles = (theme: ChatTheme) => StyleSheet.create({
+  backdrop: {
+    flex: 1,
+    backgroundColor: theme.overlay,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 24,
+  },
+  card: {
+    width: '100%',
+    borderRadius: 16,
+    backgroundColor: theme.surface,
+    padding: 20,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: theme.text,
+    marginBottom: 16,
+  },
+  categories: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+  },
+  category: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: theme.border,
+  },
+  categoryLabel: {
+    fontSize: 14,
+    color: theme.text,
+  },
+  input: {
+    marginTop: 16,
+    minHeight: 80,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: theme.border,
+    padding: 12,
+    fontSize: 14,
+    color: theme.text,
+    textAlignVertical: 'top',
+  },
+  buttons: {
+    flexDirection: 'row',
+    gap: 12,
+    marginTop: 20,
+  },
+  button: {
+    flex: 1,
+    height: 44,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  cancel: {
+    backgroundColor: theme.surfaceSecondary,
+  },
+  cancelLabel: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: theme.text,
+  },
+  submitLabel: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: theme.textOnPrimary,
+  },
+});
+
+export default ReportChatModal;

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

@@ -1,4 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
+import { withFileToken } from '../../../helpers/secureFileUrl';
 import styled from 'styled-components/native';
 import {
   CenterContainer,
@@ -7,6 +8,7 @@ import {
 import { SaveIcon } from '../../../assets/icons';
 import ModalHeaderComponent from '../ModalHeaderComponent';
 import { useChatSettingState } from '../../../hooks/useChatSettingState';
+import { useTheme } from '../../../hooks/useTheme';
 import { chatTextStyle } from '../../../helpers/typography';
 import { useDispatch, useSelector } from 'react-redux';
 import Button from '../../styled/Button';
@@ -25,12 +27,17 @@ import {
 import { useVideoPlayer, VideoView } from 'expo-video';
 import { PlayIcon } from '../../../assets/icons';
 import * as FileSystem from 'expo-file-system/legacy';
-import * as MediaLibrary from 'expo-media-library';
+import { getMediaLibrary } from '../../../helpers/mediaLibraryRuntime';
 import { useToast } from '../../../context/ToastContext';
 import PdfViewer from './PdfView';
 import DocumentViewer from './DocumentViewer';
 import AudioMessage from '../../styled/AudioMessage';
-import { ensureFilenameHasExtension, isLikelyAudio } from '../../../helpers/mimeToExtension';
+import { isLikelyAudio } from '../../../helpers/mimeToExtension';
+import {
+  getDisplayFileName,
+  getUniqueFileName,
+  sanitizeFileNameForPath,
+} from '../../../helpers/getDisplayFileName';
 
 // MIME types Google's gview embed renders reliably. Everything else
 // falls through to the info-card so the user can still download.
@@ -82,9 +89,10 @@ const ModalVideo: React.FC<{ uri: string }> = ({ uri }) => {
         contentFit="contain"
         nativeControls
         surfaceType="textureView"
-        // expo-video 3 replaced the boolean `allowsFullscreen` prop with
-        // `fullscreenOptions`; `enable` is that boolean's direct successor.
-        fullscreenOptions={{ enable: true }}
+        // Fullscreen stays available by default on both expo-video lines:
+        // `allowsFullscreen` (SDK 54, default true) was replaced by
+        // `fullscreenOptions.enable` (SDK 57, default true). Passing neither
+        // keeps this file compiling against both.
       />
       {/* Play affordance shown immediately on open; tapping starts
           playback and the native controls take over. */}
@@ -115,6 +123,10 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
   const dispatch = useDispatch();
   const { showToast } = useToast();
   const { config } = useChatSettingState();
+  const theme = useTheme();
+  // Info / audio cards: light keeps its warm tint (not in the palette),
+  // dark sits them on the secondary surface.
+  const cardBackground = theme.dark ? theme.surfaceSecondary : '#FFF8ED';
 
   // Cache the SAF directory the user granted so saving several documents
   // in a row doesn't re-prompt for a folder every time (Android only).
@@ -126,7 +138,22 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
 
   if (!activeFile) {return null;}
 
+  // Bug #40: prefer the sender's original name over the server's stored
+  // hash name everywhere this modal shows or saves/shares the file.
+  // Sanitized so it's safe to use as an actual path segment (strips path
+  // separators/control chars) when writing to disk below.
+  const displayFileName = sanitizeFileNameForPath(
+    getDisplayFileName({
+      originalName: activeFile.originalName,
+      fileName: activeFile.fileName,
+      location: activeFile.fileURL,
+      mimetype: activeFile.mimetype,
+    })
+  );
+
   const requestStoragePermission = async () => {
+    const MediaLibrary = getMediaLibrary();
+    if (!MediaLibrary?.requestPermissionsAsync) {return false;}
     try {
       const { status } = await MediaLibrary.requestPermissionsAsync();
       return status === 'granted';
@@ -147,16 +174,11 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
     }
 
     try {
-      const fileName = ensureFilenameHasExtension(
-        activeFile.fileName,
-        activeFile.mimetype
-      );
-
-      const filePath = FileSystem.cacheDirectory + fileName;
-      const download = await FileSystem.downloadAsync(activeFile.fileURL, filePath);
+      const filePath = FileSystem.cacheDirectory + displayFileName;
+      const download = await FileSystem.downloadAsync(withFileToken(activeFile.fileURL), filePath);
 
       if (download.status === 200) {
-        await MediaLibrary.saveToLibraryAsync(download.uri);
+        await getMediaLibrary()?.saveToLibraryAsync(download.uri);
         showToast({
           id: Date.now().toString(),
           title: 'Success',
@@ -167,18 +189,40 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
         Alert.alert('Error', 'Failed to save the file.');
       }
     } catch (err) {
-      Alert.alert('Error', `Failed to save the file: ${activeFile.fileName}`);
+      Alert.alert('Error', `Failed to save the file: ${displayFileName}`);
+    }
+  };
+
+  // Best-effort existing-name lookup for the Android SAF branch below: SAF
+  // hands back content URIs, not plain names, so this decodes each one and
+  // takes its last path segment. If the provider's URI shape doesn't match
+  // what we expect, we fail open (empty set) rather than block the save -
+  // worst case we skip de-duplication, we never crash the save flow.
+  const listSafDirectoryNames = async (
+    saf: any,
+    dirUri: string
+  ): Promise<Set<string>> => {
+    try {
+      const uris: string[] = await saf.readDirectoryAsync(dirUri);
+      const names = uris.map((uri) => {
+        try {
+          const decoded = decodeURIComponent(uri);
+          const last = decoded.split('/').pop() || '';
+          return last.includes(':') ? last.split(':').pop() || '' : last;
+        } catch {
+          return '';
+        }
+      });
+      return new Set(names.filter(Boolean));
+    } catch {
+      return new Set<string>();
     }
   };
 
   const saveFileToDownloads = async () => {
     try {
-      const fileName = ensureFilenameHasExtension(
-        activeFile.fileName,
-        activeFile.mimetype
-      );
-      const filePath = FileSystem.cacheDirectory + fileName;
-      const download = await FileSystem.downloadAsync(activeFile.fileURL, filePath);
+      const filePath = FileSystem.cacheDirectory + displayFileName;
+      const download = await FileSystem.downloadAsync(withFileToken(activeFile.fileURL), filePath);
 
       if (download.status !== 200) {
         Alert.alert('Error', 'Failed to save the file.');
@@ -201,7 +245,16 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
           safDirUriRef.current = dirUri;
         }
 
-        const baseName = fileName.replace(/\.[^/.]+$/, '');
+        // Avoid silently overwriting a different attachment that happens
+        // to share the same display name (common now that we prefer the
+        // human-picked name over the unique server hash - bug #40) by
+        // suffixing " (1)", " (2)", ... on a collision.
+        const existingNames = await listSafDirectoryNames(saf, dirUri as string);
+        const uniqueName = await getUniqueFileName(
+          displayFileName,
+          async (candidate) => existingNames.has(candidate)
+        );
+        const baseName = uniqueName.replace(/\.[^/.]+$/, '');
         const mime = activeFile.mimetype || 'application/octet-stream';
         const base64 = await FileSystem.readAsStringAsync(download.uri, {
           encoding: FileSystem.EncodingType.Base64,
@@ -228,7 +281,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
       // user may cancel), so we don't show a "Save successful" toast here.
       await Share.share({
         url: download.uri,
-        title: fileName,
+        title: displayFileName,
       });
     } catch (err) {
       console.error('Error saving file:', err);
@@ -271,15 +324,15 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
           <FullScreenImage
             source={{
               uri:
-                activeFile.fileURL ||
+                withFileToken(activeFile.fileURL) ||
                 'https://as2.ftcdn.net/v2/jpg/02/51/95/53/1000_F_251955356_FAQH0U1y1TZw3ZcdPGybwUkH90a3VAhb.jpg',
             }}
             resizeMode="contain"
-            accessibilityLabel={activeFile.fileName}
+            accessibilityLabel={displayFileName}
           />
         );
       case activeFile.mimetype.startsWith('video/'):
-        return <ModalVideo uri={activeFile.fileURL} />;
+        return <ModalVideo uri={withFileToken(activeFile.fileURL)} />;
       case activeFile.mimetype.includes('application/octet-stream'):
         return (
           <View
@@ -287,15 +340,15 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
               width: '100%',
               padding: 20,
               gap: 12,
-              backgroundColor: '#FFF8ED',
+              backgroundColor: cardBackground,
               borderRadius: 16,
             }}
           >
-            <Text style={{ fontSize: 16, fontWeight: '600' }}>
+            <Text style={{ fontSize: 16, fontWeight: '600', color: theme.text }}>
               Voice message
             </Text>
             <AudioMessage
-              src={activeFile.fileURL}
+              src={withFileToken(activeFile.fileURL)}
               mimeType={activeFile.mimetype}
               fileName={activeFile.fileName}
               originalName={activeFile.originalName}
@@ -324,18 +377,15 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
               width: '100%',
               padding: 20,
               gap: 12,
-              backgroundColor: '#FFF8ED',
+              backgroundColor: cardBackground,
               borderRadius: 16,
             }}
           >
-            <Text style={{ fontSize: 16, fontWeight: '600' }}>
-              {ensureFilenameHasExtension(
-                activeFile.originalName || activeFile.fileName,
-                activeFile.mimetype
-              )}
+            <Text style={{ fontSize: 16, fontWeight: '600', color: theme.text }}>
+              {displayFileName}
             </Text>
             <AudioMessage
-              src={activeFile.fileURL}
+              src={withFileToken(activeFile.fileURL)}
               mimeType={activeFile.mimetype}
               fileName={activeFile.fileName}
               originalName={activeFile.originalName}
@@ -345,12 +395,8 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
           </View>
         );
       case activeFile.mimetype === 'application/pdf':
-        return <PdfViewer pdfUrl={activeFile.fileURL} />;
+        return <PdfViewer pdfUrl={withFileToken(activeFile.fileURL)} />;
       default: {
-        const displayName = ensureFilenameHasExtension(
-          activeFile.fileName,
-          activeFile.mimetype
-        );
         // Office docs (.docx / .xlsx / .pptx / .doc / .xls / .ppt /
         // .txt / .csv / .rtf) → render inline via Google's gview embed
         // — fixes the "blank preview" complaint for docs (bug #9).
@@ -358,7 +404,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
           return (
             <DocumentViewer
               url={activeFile.fileURL}
-              fileName={displayName}
+              fileName={displayFileName}
             />
           );
         }
@@ -368,19 +414,19 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
         return (
           <View
             style={{
-              backgroundColor: '#FFF8ED',
+              backgroundColor: cardBackground,
               borderRadius: 16,
               padding: 20,
               gap: 8,
             }}
           >
-            <Text style={{ fontSize: 16, fontWeight: '600' }}>
-              {displayName}
+            <Text style={{ fontSize: 16, fontWeight: '600', color: theme.text }}>
+              {displayFileName}
             </Text>
-            <Text style={{ color: '#666' }}>
+            <Text style={{ color: theme.textSecondary }}>
               {activeFile.mimetype || 'unknown type'}
             </Text>
-            <Text style={{ marginTop: 8 }}>
+            <Text style={{ marginTop: 8, color: theme.text }}>
               This file format can't be previewed inline. Tap the save icon
               above to download it.
             </Text>
@@ -399,7 +445,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
         rightMenu={
           <>
             <Button onPress={saveClick}>
-              <SaveIcon />
+              <SaveIcon color={theme.textSecondary} />
             </Button>
           </>
         }

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

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { withFileToken } from '../../../helpers/secureFileUrl';
 import { ActivityIndicator, Platform, StyleSheet, Text, View } from 'react-native';
 import { WebView } from 'react-native-webview';
 import * as FileSystem from 'expo-file-system/legacy';
@@ -25,7 +26,7 @@ const PdfViewer: React.FC<PdfViewerProps> = ({ pdfUrl }) => {
     const run = async () => {
       try {
         const target = FileSystem.cacheDirectory + `pdf-${Date.now()}.pdf`;
-        const result = await FileSystem.downloadAsync(pdfUrl, target);
+        const result = await FileSystem.downloadAsync(withFileToken(pdfUrl), target);
         if (cancelled) {return;}
         setLocalUri(result.uri);
       } catch (e: any) {

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

@@ -37,6 +37,13 @@ const Modal: React.FC<ModalProps> = ({ children, modal, setOpenModal }) => {
 
     return <ModalComponent handleCloseModal={handleClose} />;
   };
+  // Modals that present themselves (a real RN <Modal>, so the dim covers
+  // the whole window rather than stopping at this component's frame) must
+  // not also sit inside the shared in-tree backdrop — that would dim twice.
+  if (modal === MODAL_TYPES.NEW_CHAT) {
+    return <>{renderModalContent()}{children}</>;
+  }
+
   return (
     modal && (
       <ModalBackground

package/src/components/Modals/ModalHeaderComponent.tsx

@@ -10,6 +10,7 @@ import { Text, StyleProp, TextStyle } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { resolveHeaderHeight } from '../../helpers/headerLayout';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { useTheme } from '../../hooks/useTheme';
 
 interface ModalHeaderComponentProps {
   handleCloseModal?: any;
@@ -34,6 +35,7 @@ const ModalHeaderComponent: React.FC<ModalHeaderComponentProps> = ({
   // (notch / Dynamic Island / nothing).
   const insets = useSafeAreaInsets();
   const { config } = useChatSettingState();
+  const theme = useTheme();
   // Same band height as the in-chat header, sitting BELOW the status-bar
   // inset. Total = inset + band; paddingTop carries the inset and the band
   // is the content area (centered via HeaderContainer's align-items:center),
@@ -52,8 +54,13 @@ const ModalHeaderComponent: React.FC<ModalHeaderComponentProps> = ({
           leftMenu
         ) : (
           <>
-            <Button EndIcon={<BackIcon />} onPress={handleCloseModal} />
-            <Text style={titleStyle}>{headerTitle ?? 'Go back'}</Text>
+            <Button
+              EndIcon={<BackIcon color={theme.textSecondary} />}
+              onPress={handleCloseModal}
+            />
+            <Text style={[{ color: theme.text }, titleStyle]}>
+              {headerTitle ?? 'Go back'}
+            </Text>
           </>
         )}
       </HeaderLeft>