@ethora/chat-component-rn 26.8.7 → 26.8.8

package/src/components/Menu/HeaderRoomListMenu.tsx

@@ -30,14 +30,27 @@ import {
   shouldDismissOnDrag,
 } from '../../helpers/sheetGestures';
 import type { IConfig } from '../../types/types';
+import { useT } from '../../i18n/useT';
 
 type LogoutConfig = NonNullable<IConfig['logout']>;
 
-const DEFAULT_LOGOUT_LABEL = 'Sign out';
+/** The sign-out copy in the UI language; a host's `logout.label` etc. win. */
+export interface LogoutStrings {
+  label: string;
+  message: string;
+  cancel: string;
+}
+
+const DEFAULT_LOGOUT_STRINGS: LogoutStrings = {
+  label: 'Sign out',
+  message: 'Are you sure you want to sign out?',
+  cancel: 'Cancel',
+};
 
 const confirmLogout = (
   confirm: LogoutConfig['confirm'],
-  label: string
+  label: string,
+  strings: LogoutStrings
 ): Promise<boolean> => {
   if (confirm === false) {
     return Promise.resolve(true);
@@ -46,10 +59,10 @@ const confirmLogout = (
   return new Promise<boolean>((resolve) => {
     Alert.alert(
       copy.title ?? label,
-      copy.message ?? 'Are you sure you want to sign out?',
+      copy.message ?? strings.message,
       [
         {
-          text: copy.cancelText ?? 'Cancel',
+          text: copy.cancelText ?? strings.cancel,
           style: 'cancel',
           onPress: () => resolve(false),
         },
@@ -66,10 +79,15 @@ const confirmLogout = (
 
 export const runLogoutFlow = async (
   logoutConfig: LogoutConfig,
-  performLogout: () => Promise<void>
+  performLogout: () => Promise<void>,
+  strings: LogoutStrings = DEFAULT_LOGOUT_STRINGS
 ): Promise<void> => {
-  const label = logoutConfig.label ?? DEFAULT_LOGOUT_LABEL;
-  const confirmed = await confirmLogout(logoutConfig.confirm ?? true, label);
+  const label = logoutConfig.label ?? strings.label;
+  const confirmed = await confirmLogout(
+    logoutConfig.confirm ?? true,
+    label,
+    strings
+  );
   if (!confirmed) {
     return;
   }
@@ -112,7 +130,16 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
   const dispatch = useDispatch();
   const { config } = useChatSettingState();
   const performLogout = useLogout();
+  const t = useT();
   const logoutConfig = config?.logout?.enabled ? config.logout : undefined;
+  const logoutStrings = useMemo<LogoutStrings>(
+    () => ({
+      label: t('menu.logout'),
+      message: t('menu.logoutConfirm'),
+      cancel: t('action.cancel'),
+    }),
+    [t]
+  );
   const theme = useTheme();
   const primaryColor = theme.primary;
   const iconColor = theme.icon;
@@ -246,7 +273,7 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
       styles?: { color: string };
     }[] = [
       {
-        label: 'New Chat',
+        label: t('menu.newChat'),
         icon: <AddNewIcon color={iconColor} />,
         onClick: () => {
           dispatch(setActiveModal(MODAL_TYPES.NEW_CHAT));
@@ -254,14 +281,14 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
         styles: { color: labelColor },
       },
       {
-        label: 'Profile',
+        label: t('menu.profile'),
         icon: <ProfileIcon color={iconColor} />,
         onClick: () => {
           dispatch(setActiveModal(MODAL_TYPES.PROFILE));
         },
       },
       {
-        label: 'Settings',
+        label: t('menu.settings'),
         icon: <SettingIcon color={iconColor} />,
         onClick: () => {
           dispatch(setActiveModal(MODAL_TYPES.SETTINGS));
@@ -270,16 +297,16 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
     ];
     if (logoutConfig) {
       options.push({
-        label: logoutConfig.label ?? DEFAULT_LOGOUT_LABEL,
+        label: logoutConfig.label ?? logoutStrings.label,
         icon: <LogoutIcon color={iconColor} />,
         styles: { color: primaryColor },
         onClick: () => {
-          runLogoutFlow(logoutConfig, performLogout).catch(() => {});
+          runLogoutFlow(logoutConfig, performLogout, logoutStrings).catch(() => {});
         },
       });
     }
     return options;
-  }, [dispatch, logoutConfig, performLogout, primaryColor, iconColor, labelColor]);
+  }, [dispatch, logoutConfig, logoutStrings, performLogout, primaryColor, iconColor, labelColor, t]);
 
   return (
     // Presented through a real <Modal>: as an in-tree overlay the sheet was

package/src/components/MenuRoom/MenuRoom.tsx

@@ -2,16 +2,18 @@ import { FC, useMemo } from 'react';
 import DropdownMenu from '../DropdownMenu/DropdownMenu';
 import Button from '../styled/Button';
 import { LeaveIcon, MoreIcon, ReportIcon } from '../../assets/icons';
+import { useT } from '../../i18n/useT';
 
 interface RoomMenuProps {
   handleLeaveClick: () => void;
 }
 
 export const RoomMenu: FC<RoomMenuProps> = ({ handleLeaveClick }) => {
+  const t = useT();
   const menuOptions = useMemo(
     () => [
       {
-        label: 'Report',
+        label: t('action.report'),
         icon: <ReportIcon />,
         onClick: () => {
           console.log('Report clicked');
@@ -19,7 +21,7 @@ export const RoomMenu: FC<RoomMenuProps> = ({ handleLeaveClick }) => {
         styles: { color: 'red' },
       },
       {
-        label: 'Leave',
+        label: t('action.leave'),
         icon: <LeaveIcon />,
         onClick: () => {
           handleLeaveClick();
@@ -27,7 +29,7 @@ export const RoomMenu: FC<RoomMenuProps> = ({ handleLeaveClick }) => {
         styles: { color: 'red' },
       },
     ],
-    [handleLeaveClick]
+    [handleLeaveClick, t]
   );
 
   return (

package/src/components/MessageBubble/Message.tsx

@@ -644,7 +644,7 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
             <CustomTimestampRow media={message?.isMediafile === 'true'}>
               {!config?.disableSentLogic && isUser && isPending && (
                 <Text style={[styles.timestampText, themedStyles.muted]}>
-                  sending...
+                  {t('message.sending')}
                 </Text>
               )}
               {!config?.disableSentLogic && isUser && isFailed && (
@@ -654,11 +654,11 @@ const Message: React.FC<MessageProps> = ({ message, isUser, isReply }) => {
                   accessibilityRole="button"
                   accessibilityLabel="Retry sending message"
                 >
-                  ! Failed — tap to retry
+                  {t('message.failedRetry')}
                 </Text>
               )}
               {message?.isEdited && !message?.isDeleted && (
-                <Text style={[styles.editedText, themedStyles.muted]}>edited</Text>
+                <Text style={[styles.editedText, themedStyles.muted]}>{t('message.edited')}</Text>
               )}
               {message?.unencrypted && !message?.isDeleted && (
                 <Pressable

package/src/components/MessageBubble/MessageInteractions.tsx

@@ -22,6 +22,7 @@ import * as Clipboard from 'expo-clipboard';
 import { useToast } from '../../context/ToastContext';
 import { useInteractionsOverlay } from './InteractionsOverlay';
 import { useTheme } from '../../hooks/useTheme';
+import { useT } from '../../i18n/useT';
 import { getEmojiNativeById } from '../../helpers/emoji';
 import {
   quickReactionIds,
@@ -61,6 +62,7 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
   onOpenEmojiPicker,
 }) => {
   const { showToast } = useToast();
+  const t = useT();
   const { present, dismiss, originX, originY } = useInteractionsOverlay();
   const overlayId = useId();
   const theme = useTheme();
@@ -144,15 +146,15 @@ const MessageInteractions: React.FC<MessageInteractionsProps> = ({
       await Clipboard.setStringAsync(text);
       showToast({
         id: Date.now().toString(),
-        title: 'Success',
-        message: 'Copied to clipboard!',
+        title: t('toast.successTitle'),
+        message: t('toast.copied'),
         type: 'success',
       });
     } catch (err) {
       console.log(err);
       showToast({
         id: Date.now().toString(),
-        title: 'Copy failed',
+        title: t('toast.copyFailed'),
         message: (err as Error)?.message || 'Unknown error',
         type: 'error',
       });

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

@@ -379,7 +379,7 @@ const ChatProfileModal: React.FC<ChatProfileModalProps> = ({
       console.warn('[ethora-rn] mute toggle failed', error);
       showToast({
         id: Date.now().toString(),
-        title: 'Error',
+        title: t('toast.error'),
         message: t('toast.muteFailed'),
         type: 'error',
       });

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

@@ -72,7 +72,7 @@ const ReportChatModal: React.FC<ReportChatModalProps> = ({
       });
       showToast({
         id: Date.now().toString(),
-        title: 'Success',
+        title: t('toast.successTitle'),
         message: t('modal.report.chatTitle'),
         type: 'success',
       });
@@ -81,7 +81,7 @@ const ReportChatModal: React.FC<ReportChatModalProps> = ({
       console.error('Failed to report chat:', error);
       showToast({
         id: Date.now().toString(),
-        title: 'Error',
+        title: t('toast.error'),
         message: t('modal.report.chatTitle'),
         type: 'error',
       });

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

@@ -30,6 +30,7 @@ import { PlayIcon } from '../../../assets/icons';
 import * as FileSystem from 'expo-file-system/legacy';
 import { getMediaLibrary } from '../../../helpers/mediaLibraryRuntime';
 import { useToast } from '../../../context/ToastContext';
+import { useT } from '../../../i18n/useT';
 import PdfViewer from './PdfView';
 import DocumentViewer from './DocumentViewer';
 import AudioMessage from '../../styled/AudioMessage';
@@ -250,6 +251,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
 }) => {
   const dispatch = useDispatch();
   const { showToast } = useToast();
+  const t = useT();
   const { config } = useChatSettingState();
   const theme = useTheme();
   // Info / audio cards: light keeps its warm tint (not in the palette),
@@ -309,8 +311,8 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
         await getMediaLibrary()?.saveToLibraryAsync(download.uri);
         showToast({
           id: Date.now().toString(),
-          title: 'Success',
-          message: 'Save successful',
+          title: t('toast.successTitle'),
+          message: t('toast.saveSuccessful'),
           type: 'success',
         });
       } else {
@@ -394,8 +396,8 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
 
         showToast({
           id: Date.now().toString(),
-          title: 'Success',
-          message: 'Save successful',
+          title: t('toast.successTitle'),
+          message: t('toast.saveSuccessful'),
           type: 'success',
         });
         return;
@@ -576,7 +578,7 @@ const FilePreviewModal: React.FC<FilePreviewModalProps> = ({
     <ModalContainerFullScreen>
       <ModalHeaderComponent
         handleCloseModal={closeModal}
-        headerTitle={'File preview'}
+        headerTitle={t('modal.filePreview.title')}
         titleStyle={chatTextStyle(config?.typography?.profile?.screenTitle)}
         rightMenu={
           <>

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

@@ -16,6 +16,17 @@ interface ModalProps {
   setOpenModal: (value?: ModalType) => any;
 }
 
+/** Screens reached from Settings: closing them goes back there. */
+const SETTINGS_SCREENS = new Set<string>([
+  MODAL_TYPES.MANAGE_DATA,
+  MODAL_TYPES.VISIBILITY,
+  MODAL_TYPES.REFERRALS,
+  MODAL_TYPES.DOCUMENT_SHARES,
+  MODAL_TYPES.PROFILE_SHARES,
+  MODAL_TYPES.BLOCKED_USERS,
+  MODAL_TYPES.CHANGE_PASSWORD,
+]);
+
 const Modal: React.FC<ModalProps> = ({ children, modal, setOpenModal }) => {
   const dispatch = useDispatch();
   const handleCloseModal = () => setOpenModal();
@@ -29,15 +40,9 @@ const Modal: React.FC<ModalProps> = ({ children, modal, setOpenModal }) => {
 
     if (!ModalComponent) {return null;}
 
-    const handleClose =
-      modal === MODAL_TYPES.MANAGE_DATA ||
-      modal === MODAL_TYPES.VISIBILITY ||
-      modal === MODAL_TYPES.REFERRALS ||
-      modal === MODAL_TYPES.DOCUMENT_SHARES ||
-      modal === MODAL_TYPES.PROFILE_SHARES ||
-      modal === MODAL_TYPES.BLOCKED_USERS
-        ? handleBackButtonClick
-        : handleCloseModal;
+    const handleClose = SETTINGS_SCREENS.has(modal)
+      ? handleBackButtonClick
+      : handleCloseModal;
 
     return <ModalComponent handleCloseModal={handleClose} />;
   };
@@ -75,15 +80,38 @@ const Modal: React.FC<ModalProps> = ({ children, modal, setOpenModal }) => {
     }
   }
 
+  // Screens under Settings are pages too: they slide in over Settings and
+  // a swipe from the left edge takes them back to it, same as the header's
+  // back button. Settings stays mounted underneath the whole time, so the
+  // slide reveals it - not the chat list - and nothing is rebuilt once the
+  // page has gone. The elements below keep the same shape as the plain
+  // branch, so Settings is the same instance before, during and after.
+  const subScreen = modal && SETTINGS_SCREENS.has(modal) ? modal : undefined;
+  const SubScreenComponent = subScreen ? MODAL_COMPONENTS[subScreen] : undefined;
+  const SettingsComponent = MODAL_COMPONENTS[MODAL_TYPES.SETTINGS];
+  const underneath =
+    SubScreenComponent && SettingsComponent ? (
+      <SettingsComponent handleCloseModal={handleCloseModal} />
+    ) : (
+      renderModalContent()
+    );
+
   return (
     modal && (
-      <ModalBackground
-        id="modal-background"
-        style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
-      >
-        {renderModalContent()}
-        {children}
-      </ModalBackground>
+      <>
+        <ModalBackground
+          id="modal-background"
+          style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
+        >
+          {underneath}
+          {children}
+        </ModalBackground>
+        {SubScreenComponent && (
+          <SwipeBackLayer onClose={handleBackButtonClick}>
+            {(close) => <SubScreenComponent handleCloseModal={close} />}
+          </SwipeBackLayer>
+        )}
+      </>
     )
   );
 };

package/src/components/Modals/NewChatModal/NewChatModal.tsx

@@ -187,16 +187,16 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
 
       showToast({
         id: Date.now().toString(),
-        title: 'Success',
-        message: 'Room created successfully',
+        title: t('toast.successTitle'),
+        message: t('toast.roomCreatedSuccess'),
         type: 'success',
       });
     } catch (error) {
       console.error('Error handling room creation:', error);
       showToast({
         id: Date.now().toString(),
-        title: 'Error',
-        message: 'Failed to create room',
+        title: t('toast.error'),
+        message: t('toast.failedToCreateRoom'),
         type: 'error',
       });
     }
@@ -258,8 +258,8 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
 
           showToast({
             id: Date.now().toString(),
-            title: 'Success',
-            message: 'Room created successfully',
+            title: t('toast.successTitle'),
+            message: t('toast.roomCreatedSuccess'),
             type: 'success',
           });
           handleCloseModal();
@@ -267,8 +267,8 @@ const NewChatModal: React.FC<NewChatModalProps> = ({
           console.error('Failed to create room:', error);
           showToast({
             id: Date.now().toString(),
-            title: 'Error',
-            message: 'Failed to create room',
+            title: t('toast.error'),
+            message: t('toast.failedToCreateRoom'),
             type: 'error',
           });
         }