@ethora/chat-component-rn 26.10.9 → 26.10.11

package/src/components/Modals/FilePreviewModal/useSaveFile.ts

@@ -0,0 +1,207 @@
+import { useCallback, useRef } from "react";
+import { Alert, Platform, Share } from "react-native";
+import * as FileSystem from "expo-file-system/legacy";
+import type { ModalFile } from "../../../types/types";
+import { withFileToken } from "../../../helpers/secureFileUrl";
+import { getMediaLibrary } from "../../../helpers/mediaLibraryRuntime";
+import { useToast } from "../../../context/ToastContext";
+import { useT } from "../../../i18n/useT";
+import {
+  getDisplayFileName,
+  getUniqueFileName,
+  sanitizeFileNameForPath,
+} from "../../../helpers/getDisplayFileName";
+
+export const isLocalFile = (url: string | undefined | null) =>
+  /^file:\/\//i.test(url || "");
+
+const fetchToCache = async (url: string, cachePath: string) =>
+  isLocalFile(url)
+    ? { status: 200, uri: url }
+    : FileSystem.downloadAsync(withFileToken(url), cachePath);
+
+/**
+ * Save button of the file viewers: pictures and videos to the gallery,
+ * anything else to Downloads (Android, through SAF) or the share sheet (iOS).
+ * Shared by the preview page and the media viewer opened from a chat profile.
+ */
+export const useSaveFile = () => {
+  const { showToast } = useToast();
+  const t = useT();
+  // 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).
+  const safDirUriRef = useRef<string | null>(null);
+
+  return useCallback(
+    async (activeFile: ModalFile) => {
+      // Bug #40: prefer the sender's original name over the server's stored
+      // hash name when saving/sharing the file. Sanitized so it's safe to use
+      // as an actual path segment (strips path separators/control chars).
+      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";
+        } catch (error) {
+          console.error("Error requesting permission:", error);
+          return false;
+        }
+      };
+
+      const saveToGallery = async () => {
+        const hasPermission = await requestStoragePermission();
+        if (!hasPermission) {
+          Alert.alert(
+            "Permission Denied",
+            "Storage permission is required to save files to the gallery."
+          );
+          return;
+        }
+
+        try {
+          const filePath = FileSystem.cacheDirectory + displayFileName;
+          const download = await fetchToCache(activeFile.fileURL, filePath);
+
+          if (download.status === 200) {
+            await getMediaLibrary()?.saveToLibraryAsync(download.uri);
+            showToast({
+              id: Date.now().toString(),
+              title: t("toast.successTitle"),
+              message: t("toast.saveSuccessful"),
+              type: "success",
+            });
+          } else {
+            Alert.alert("Error", "Failed to save the file.");
+          }
+        } catch (err) {
+          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 filePath = FileSystem.cacheDirectory + displayFileName;
+          const download = await fetchToCache(activeFile.fileURL, filePath);
+
+          if (download.status !== 200) {
+            Alert.alert("Error", "Failed to save the file.");
+            return;
+          }
+
+          if (Platform.OS === "android") {
+            const saf = (FileSystem as any).StorageAccessFramework;
+            let dirUri = safDirUriRef.current;
+            if (!dirUri) {
+              const perm = await saf.requestDirectoryPermissionsAsync();
+              if (!perm.granted) {
+                Alert.alert(
+                  "Permission Denied",
+                  "Storage permission is required to save the file."
+                );
+                return;
+              }
+              dirUri = perm.directoryUri;
+              safDirUriRef.current = dirUri;
+            }
+
+            // 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,
+            });
+            const destUri = await saf.createFileAsync(dirUri, baseName, mime);
+            await FileSystem.writeAsStringAsync(destUri, base64, {
+              encoding: FileSystem.EncodingType.Base64,
+            });
+
+            showToast({
+              id: Date.now().toString(),
+              title: t("toast.successTitle"),
+              message: t("toast.saveSuccessful"),
+              type: "success",
+            });
+            return;
+          }
+
+          // iOS (and any non-Android): there is no app-writable "Downloads"
+          // folder, and MediaLibrary only accepts images/videos — which is why
+          // documents previously hit the success toast without ever being
+          // saved. Present the system share sheet so the user can "Save to
+          // Files", AirDrop, etc. The sheet itself is the confirmation (the
+          // user may cancel), so we don't show a "Save successful" toast here.
+          await Share.share({
+            url: download.uri,
+            title: displayFileName,
+          });
+        } catch (err) {
+          console.error("Error saving file:", err);
+          Alert.alert("Error", "Failed to save the file.");
+        }
+      };
+
+      const saveClick = async () => {
+        if (
+          activeFile.mimetype.startsWith("image/") ||
+          activeFile.mimetype.startsWith("video/")
+        ) {
+          await saveToGallery();
+        } else {
+          await saveFileToDownloads();
+        }
+      };
+
+      await saveClick();
+    },
+    [showToast, t]
+  );
+};

package/src/components/Modals/MessageSearchModal/MessageSearchModal.tsx

@@ -46,13 +46,18 @@ import {
   useMessageSearch,
 } from './useMessageSearch';
 import { openSearchHit } from './openHit';
+import { setActiveModal } from '../../../roomStore/chatSettingsSlice';
+import { MODAL_TYPES } from '../../../helpers/constants/MODAL_TYPES';
 
 interface MessageSearchModalProps {
   handleCloseModal: () => void;
+  /** Search the open chat only: no "All chats" scope to switch to. */
+  chatOnly?: boolean;
 }
 
 const MessageSearchModalContent: React.FC<MessageSearchModalProps> = ({
   handleCloseModal,
+  chatOnly = false,
 }) => {
   const t = useT();
   const dispatch = useDispatch();
@@ -71,7 +76,7 @@ const MessageSearchModalContent: React.FC<MessageSearchModalProps> = ({
   const [query, setQuery] = useState('');
   const roomName = activeRoomJID ? activeRoomJID.split('@')[0] : undefined;
   const [scope, setScope] = useState<SearchScope>(
-    activeRoomJID ? 'chat' : 'all'
+    chatOnly || activeRoomJID ? 'chat' : 'all'
   );
 
   const [filtersOpen, setFiltersOpen] = useState(false);
@@ -182,34 +187,36 @@ const MessageSearchModalContent: React.FC<MessageSearchModalProps> = ({
         />
       </View>
 
-      <View style={styles.scopeRow} accessibilityLabel={t('search.messages.scope')}>
-        {(['chat', 'all'] as SearchScope[]).map((value) => {
-          const active = scope === value;
-          const disabled = value === 'chat' && !roomName;
-          return (
-            <TouchableOpacity
-              key={value}
-              testID={`message-search-scope-${value}`}
-              disabled={disabled}
-              onPress={() => setScope(value)}
-              accessibilityState={{ selected: active, disabled }}
-              style={[
-                styles.scopeButton,
-                active && { borderColor: primary, backgroundColor: primary + '1F' },
-                disabled && styles.hitDisabled,
-              ]}
-            >
-              <Text style={[styles.scopeLabel, active && { color: primary }]}>
-                {t(
-                  value === 'chat'
-                    ? 'search.messages.scopeChat'
-                    : 'search.messages.scopeAll'
-                )}
-              </Text>
-            </TouchableOpacity>
-          );
-        })}
-      </View>
+      {!chatOnly && (
+        <View style={styles.scopeRow} accessibilityLabel={t('search.messages.scope')}>
+          {(['chat', 'all'] as SearchScope[]).map((value) => {
+            const active = scope === value;
+            const disabled = value === 'chat' && !roomName;
+            return (
+              <TouchableOpacity
+                key={value}
+                testID={`message-search-scope-${value}`}
+                disabled={disabled}
+                onPress={() => setScope(value)}
+                accessibilityState={{ selected: active, disabled }}
+                style={[
+                  styles.scopeButton,
+                  active && { borderColor: primary, backgroundColor: primary + '1F' },
+                  disabled && styles.hitDisabled,
+                ]}
+              >
+                <Text style={[styles.scopeLabel, active && { color: primary }]}>
+                  {t(
+                    value === 'chat'
+                      ? 'search.messages.scopeChat'
+                      : 'search.messages.scopeAll'
+                  )}
+                </Text>
+              </TouchableOpacity>
+            );
+          })}
+        </View>
+      )}
 
       <TouchableOpacity
         testID="message-search-filters-toggle"
@@ -368,7 +375,11 @@ const MessageSearchModalContent: React.FC<MessageSearchModalProps> = ({
     <ModalContainerFullScreen style={styles.screen}>
       <ModalHeaderComponent
         handleCloseModal={handleCloseModal}
-        headerTitle={t('search.messages.title')}
+        headerTitle={
+          chatOnly && searchedRoom?.title
+            ? searchedRoom.title
+            : t('search.messages.title')
+        }
       />
       <FlatList
         style={styles.list}
@@ -484,4 +495,19 @@ const MessageSearchModal: React.FC<MessageSearchModalProps> = (props) => {
   return <MessageSearchModalContent {...props} />;
 };
 
+/**
+ * The chat profile's Search: the same search as the room list's, inside this
+ * chat only. Back returns to the profile it was opened from; opening a hit
+ * closes both and lands on the message in the chat.
+ */
+export const ChatMessageSearchModal: React.FC<MessageSearchModalProps> = () => {
+  const dispatch = useDispatch();
+  return (
+    <MessageSearchModal
+      chatOnly
+      handleCloseModal={() => dispatch(setActiveModal(MODAL_TYPES.CHAT_PROFILE))}
+    />
+  );
+};
+
 export default MessageSearchModal;

package/src/components/Modals/UserProfileModal/UserProfileModal.tsx

@@ -33,7 +33,6 @@ import { useTheme } from '../../../hooks/useTheme';
 import type { ChatTheme } from '../../../theme/theme';
 import { chatTextStyle } from '../../../helpers/typography';
 import { getElementFont } from '../../../helpers/getElementFont';
-import { LANGUAGE_OPTIONS } from '../../../helpers/constants/LANGUAGE_OPTIONS';
 import { MODAL_TYPES } from '../../../helpers/constants/MODAL_TYPES';
 import {
   setActiveFile,
@@ -44,7 +43,6 @@ import { runLogoutFlow } from '../../Menu/HeaderRoomListMenu';
 import { useLogout } from '../../../hooks/useLogout';
 import {
   ApiRoom,
-  createChatCall,
   ownAppId,
   postPrivateRoom,
 } from '../../../networking/api-requests/rooms.api';
@@ -53,9 +51,14 @@ import { useSelector } from 'react-redux';
 import { store, type RootState } from '../../../roomStore';
 import { setCallError, startOutgoingCall } from '../../../roomStore/callSlice';
 import { sendCallInviteSignal } from '../../../networking/callTokenStanza';
+import { requestOutgoingCall } from '../../../calls/startCall';
+import { isCallRoomTypeAllowed } from '../../../calls/callMode';
 import { AudioCallIcon, VideoCallIcon } from '../../VideoCalls/CallIcons';
 import { accountNameOf } from '../../../helpers/accountName';
-import { setChatLanguage } from '../../../services/languageSettings';
+import {
+  chatLanguageChoices,
+  setChatLanguage,
+} from '../../../services/languageSettings';
 import { composeName } from '../../../helpers/displayName';
 import { isUnresolvedSenderId } from '../../../helpers/isUnresolvedSenderId';
 
@@ -158,15 +161,26 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
     [files]
   );
 
+  // The install's translateLanguages (get-config) when the host passed
+  // them; none means no translation server, so no Language tab.
+  const languageChoices = useMemo(() => chatLanguageChoices(config), [config]);
+
   const tabs = useMemo(
     () =>
       profileTabs({
         isOwnProfile,
-        translatesEnabled: !!config?.translates?.enabled,
+        translatesEnabled:
+          !!config?.translates?.enabled && languageChoices.length > 0,
         hasMedia: media.length > 0,
         hasDocuments: documents.length > 0,
       }),
-    [isOwnProfile, config?.translates?.enabled, media.length, documents.length]
+    [
+      isOwnProfile,
+      config?.translates?.enabled,
+      languageChoices.length,
+      media.length,
+      documents.length,
+    ]
   );
 
   // Keep the selected tab valid as the lists load in.
@@ -366,7 +380,7 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
   const canCall =
     videoCallsConfig?.enabled === true &&
     Boolean(videoCallsConfig?.livekitUrl?.trim()) &&
-    (videoCallsConfig?.allowedRoomTypes || ['private']).includes('private');
+    isCallRoomTypeAllowed('private', videoCallsConfig?.allowedRoomTypes);
   const isAudioCallsEnabled = canCall && videoCallsConfig?.enableAudioCalls === true;
   const isCallBusy = useSelector((state: RootState) => state.call.phase !== 'idle');
 
@@ -403,7 +417,11 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
     dispatch(setActiveModal(undefined));
 
     try {
-      await createChatCall(room.bareName, { kind });
+      await requestOutgoingCall({
+        chatName: room.bareName,
+        kind,
+        peerXmppUsername: room.peerXmppUsername || null,
+      });
     } catch (error) {
       dispatch(
         setCallError(
@@ -556,8 +574,9 @@ const UserProfileModal: React.FC<UserProfileModalProps> = ({
     if (activeTab === 'language') {
       return (
         <View>
-          {LANGUAGE_OPTIONS.map((option) => {
-            const selected = langSource === option.id;
+          {languageChoices.map((option) => {
+            const selected =
+              String(langSource || '').toLowerCase() === option.id.toLowerCase();
             return (
               <TouchableOpacity
                 key={option.id}

package/src/components/Modals/UserSettingsModal/LanguageCard.tsx

@@ -94,13 +94,15 @@ const LanguageCard: React.FC<LanguageCardProps> = ({ style, testID }) => {
         appChoices,
         appCurrent
       )}
-      {group(
-        'chat',
-        t('settings.language.chat'),
-        t('settings.language.chatHint'),
-        chatChoices,
-        chatCurrent
-      )}
+      {/* No translate languages from get-config: no translation server. */}
+      {chatChoices.length > 0 &&
+        group(
+          'chat',
+          t('settings.language.chat'),
+          t('settings.language.chatHint'),
+          chatChoices,
+          chatCurrent
+        )}
     </View>
   );
 };

package/src/components/VideoCalls/ActiveCallBar.tsx

@@ -9,6 +9,7 @@ import { useT } from '../../i18n/useT';
 import { ExpandIcon, HangUpIcon, MicOffIcon, MicOnIcon } from './CallIcons';
 import { toggleCallMic, useCallSession } from './callSessionController';
 import { terminateActiveCall } from './callActions';
+import { callCanRenderSession } from './callLive';
 import {
   registerCallBarHost,
   setCallBarAnchor,
@@ -33,10 +34,8 @@ const CONTROL = 'rgba(255, 255, 255, 0.2)';
 /** True while a call is up and minimized, i.e. the strip should show. */
 const useShowCallBar = (): boolean => {
   const { minimized } = useCallUi();
-  const active = useSelector(
-    (state: RootState) =>
-      !!state.call.token &&
-      (state.call.phase === 'connecting' || state.call.phase === 'in-call')
+  const active = useSelector((state: RootState) =>
+    callCanRenderSession(state.call)
   );
   const { config } = useChatSettingState();
   return minimized && active && config?.videoCalls?.enabled === true;
@@ -62,7 +61,9 @@ export const ActiveCallBar: FC = () => {
       : !session.connected
         ? t('call.status.connecting')
         : !session.remoteJoined
-          ? t('call.status.waitingForPeer')
+          ? session.isGroup
+            ? t('call.status.waitingForOthers')
+            : t('call.status.waitingForPeer')
           : t('call.status.inCall');
   const statusLine = session.remoteMicMuted
     ? `${status} · ${t('call.peerMuted', { name })}`

package/src/components/VideoCalls/CallButtons.tsx

@@ -4,7 +4,8 @@ import { useDispatch, useSelector } from 'react-redux';
 import { RootState } from '../../roomStore';
 import { setCallError, startOutgoingCall } from '../../roomStore/callSlice';
 import { sendCallInviteSignal } from '../../networking/callTokenStanza';
-import { createChatCall } from '../../networking/api-requests/rooms.api';
+import { requestOutgoingCall } from '../../calls/startCall';
+import { isCallRoomTypeAllowed } from '../../calls/callMode';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
 import { AudioCallIcon, VideoCallIcon } from './CallIcons';
 import { useT } from '../../i18n/useT';
@@ -19,7 +20,8 @@ import { getIconColor } from '../../helpers/getIconColor';
  * calls are off, which is the common case.
  *
  * Gating mirrors the web rules: calls need `config.videoCalls.enabled`, a
- * `livekitUrl`, a 1:1 (private) room, and no other call already running.
+ * `livekitUrl`, a 1:1 (private) or members-only group room (subject to
+ * `allowedRoomTypes`, default both), and no other call already running.
  * Audio is a second opt-in on top of that (`enableAudioCalls`).
  */
 export const CallButtons: FC = () => {
@@ -33,10 +35,14 @@ export const CallButtons: FC = () => {
   });
 
   const videoCallsConfig = config?.videoCalls;
-  const allowedRoomTypes = videoCallsConfig?.allowedRoomTypes || ['private'];
   const isVideoCallsEnabled = videoCallsConfig?.enabled === true;
-  const isPrivateRoom = currentRoom?.type === 'private';
-  const isRoomAllowed = isPrivateRoom && allowedRoomTypes.includes('private');
+  const isGroupRoom = currentRoom?.type === 'group';
+  // 1:1 chats and members-only group chats can call, subject to the host's
+  // videoCalls.allowedRoomTypes (default: both). Public rooms never do.
+  const isRoomAllowed = isCallRoomTypeAllowed(
+    currentRoom?.type,
+    videoCallsConfig?.allowedRoomTypes
+  );
   const hasLivekitUrl = Boolean(videoCallsConfig?.livekitUrl?.trim());
   const isCallBusy = call.phase !== 'idle';
   const canCall = isVideoCallsEnabled && isRoomAllowed && hasLivekitUrl;
@@ -60,12 +66,16 @@ export const CallButtons: FC = () => {
       if (!chatName) {return;}
 
       // Resolve the peer xmpp localpart so we can XMPP-signal them when we
-      // hang up or cancel, without this they'd keep ringing forever.
+      // hang up or cancel, without this they'd keep ringing forever. A group
+      // call has no single peer to signal; the server rings every member and
+      // LiveKit carries the call.
       const selfLocal = String(user?.xmppUsername || '').split('@')[0];
-      const peer = (currentRoom.members || []).find((member: any) => {
-        const mLocal = String(member?.xmppUsername || '').split('@')[0];
-        return mLocal && mLocal !== selfLocal;
-      });
+      const peer = isGroupRoom
+        ? undefined
+        : (currentRoom.members || []).find((member: any) => {
+            const mLocal = String(member?.xmppUsername || '').split('@')[0];
+            return mLocal && mLocal !== selfLocal;
+          });
       const peerXmppUsername = peer?.xmppUsername || null;
 
       // Don't show "deleted" / "Deleted User" / "Unknown" as the dial
@@ -96,6 +106,7 @@ export const CallButtons: FC = () => {
           roomBareName: chatName,
           kind,
           peerXmppUsername,
+          isGroup: isGroupRoom,
         })
       );
 
@@ -111,7 +122,7 @@ export const CallButtons: FC = () => {
       }
 
       try {
-        await createChatCall(chatName, { kind });
+        await requestOutgoingCall({ chatName, kind, peerXmppUsername });
       } catch (error) {
         const message =
           error instanceof Error
@@ -120,7 +131,7 @@ export const CallButtons: FC = () => {
         dispatch(setCallError(message));
       }
     },
-    [canCall, isCallBusy, currentRoom, user?.xmppUsername, dispatch, t]
+    [canCall, isCallBusy, currentRoom, isGroupRoom, user?.xmppUsername, dispatch, t]
   );
 
   if (!canCall || isCallBusy) {