@ethora/chat-component-rn 26.9.1 → 26.10.1

package/src/components/Modals/SettingsModals/Visibility/VisibilityModal.tsx

@@ -13,6 +13,7 @@ import {
   SharedSettingsColumnContainer,
   SharedSettingsLabelData,
   SharedSettingsStyledLabel,
+  SharedSettingsScrollBody,
 } from '../SharedStyledComponents';
 import { RadioInput } from './RadioInput';
 import { useTheme } from '../../../../hooks/useTheme';
@@ -71,67 +72,69 @@ const VisibilityModal: React.FC<VisibilityModalProps> = ({
         handleCloseModal={handleCloseModal}
         headerTitle={t('settings.visibility.title')}
       />
-      <SharedSettingsCenterContainer>
-        <SharedSettingsColumnContainer>
-          <SharedSettingsStyledLabel>
-            {t('settings.visibility.profileLabel')}
-          </SharedSettingsStyledLabel>
-          <RadioGroup>
-            <RadioLabel>
-              <RadioInput
-                option={{ label: t('settings.visibility.open'), value: isProfileOpen }}
-                radioColor={theme.primary}
-                checked={isProfileOpen === true}
-                onChange={() => setIsProfileOpen(true)}
-              />
-            </RadioLabel>
+      <SharedSettingsScrollBody>
+        <SharedSettingsCenterContainer>
+          <SharedSettingsColumnContainer>
+            <SharedSettingsStyledLabel>
+              {t('settings.visibility.profileLabel')}
+            </SharedSettingsStyledLabel>
+            <RadioGroup>
+              <RadioLabel>
+                <RadioInput
+                  option={{ label: t('settings.visibility.open'), value: isProfileOpen }}
+                  radioColor={theme.primary}
+                  checked={isProfileOpen === true}
+                  onChange={() => setIsProfileOpen(true)}
+                />
+              </RadioLabel>
 
-            <SharedSettingsLabelData>
-              {t('settings.visibility.openDescription')}
-            </SharedSettingsLabelData>
-            <RadioLabel>
-              <RadioInput
-                option={{ label: t('settings.visibility.restricted'), value: isProfileOpen }}
-                radioColor={theme.primary}
-                checked={isProfileOpen === false}
-                onChange={() => setIsProfileOpen(false)}
-              />
-            </RadioLabel>
-            <SharedSettingsLabelData>
-              {t('settings.visibility.restrictedDescription')}
-            </SharedSettingsLabelData>
-          </RadioGroup>
-        </SharedSettingsColumnContainer>
-        <SharedSettingsColumnContainer>
-          <SharedSettingsStyledLabel>
-            {t('settings.visibility.documentsLabel')}
-          </SharedSettingsStyledLabel>
-          <RadioGroup>
-            <RadioLabel>
-              <RadioInput
-                option={{ label: t('settings.visibility.full'), value: isAssetsOpen }}
-                radioColor={theme.primary}
-                checked={isAssetsOpen === true}
-                onChange={() => setIsAssetsOpen(true)}
-              />
-            </RadioLabel>
-            <SharedSettingsLabelData>
-              {t('settings.visibility.fullDescription')}
-            </SharedSettingsLabelData>
-            <RadioLabel>
-              <RadioInput
-                option={{ label: t('settings.visibility.individual'), value: isAssetsOpen }}
-                radioColor={theme.primary}
-                checked={isAssetsOpen === false}
-                onChange={() => setIsAssetsOpen(false)}
-              />
-            </RadioLabel>
-            <SharedSettingsLabelData>
-              {t('settings.visibility.individualDescription')}
-            </SharedSettingsLabelData>
-          </RadioGroup>
-        </SharedSettingsColumnContainer>
-      </SharedSettingsCenterContainer>
+              <SharedSettingsLabelData>
+                {t('settings.visibility.openDescription')}
+              </SharedSettingsLabelData>
+              <RadioLabel>
+                <RadioInput
+                  option={{ label: t('settings.visibility.restricted'), value: isProfileOpen }}
+                  radioColor={theme.primary}
+                  checked={isProfileOpen === false}
+                  onChange={() => setIsProfileOpen(false)}
+                />
+              </RadioLabel>
+              <SharedSettingsLabelData>
+                {t('settings.visibility.restrictedDescription')}
+              </SharedSettingsLabelData>
+            </RadioGroup>
+          </SharedSettingsColumnContainer>
+          <SharedSettingsColumnContainer>
+            <SharedSettingsStyledLabel>
+              {t('settings.visibility.documentsLabel')}
+            </SharedSettingsStyledLabel>
+            <RadioGroup>
+              <RadioLabel>
+                <RadioInput
+                  option={{ label: t('settings.visibility.full'), value: isAssetsOpen }}
+                  radioColor={theme.primary}
+                  checked={isAssetsOpen === true}
+                  onChange={() => setIsAssetsOpen(true)}
+                />
+              </RadioLabel>
+              <SharedSettingsLabelData>
+                {t('settings.visibility.fullDescription')}
+              </SharedSettingsLabelData>
+              <RadioLabel>
+                <RadioInput
+                  option={{ label: t('settings.visibility.individual'), value: isAssetsOpen }}
+                  radioColor={theme.primary}
+                  checked={isAssetsOpen === false}
+                  onChange={() => setIsAssetsOpen(false)}
+                />
+              </RadioLabel>
+              <SharedSettingsLabelData>
+                {t('settings.visibility.individualDescription')}
+              </SharedSettingsLabelData>
+            </RadioGroup>
+          </SharedSettingsColumnContainer>
+        </SharedSettingsCenterContainer>
+      </SharedSettingsScrollBody>
 
       {notification && (
         <Notification type={notification.type}>

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

@@ -3,6 +3,7 @@
 import React, { useCallback, useMemo } from 'react';
 import LanguageCard from './LanguageCard';
 import {
+  ScrollView,
   StyleSheet,
   Switch,
   Text,
@@ -119,7 +120,11 @@ const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
       {/* One card per entry, rather than a single bordered block with
         * hairline dividers — the rows are separate destinations, and the
         * design gives each its own surface. */}
-      <View style={styles.body}>
+      <ScrollView
+        style={styles.scroll}
+        contentContainerStyle={styles.body}
+        showsVerticalScrollIndicator={false}
+      >
         {!config?.settings?.hideAppearance ? (
           <View style={[styles.card, styles.stackCard]} testID="settings-appearance">
             <Text style={styles.label}>{t('settings.appearance.title')}</Text>
@@ -188,7 +193,7 @@ const UserSettingsModal: React.FC<UserSettingsModalProps> = ({
             />
           </TouchableOpacity>
         ))}
-      </View>
+      </ScrollView>
     </ModalContainerFullScreen>
   );
 };
@@ -197,8 +202,11 @@ const createStyles = (theme: ChatTheme) => StyleSheet.create({
   screen: {
     backgroundColor: theme.listBackground,
   },
-  body: {
+  scroll: {
+    flex: 1,
     width: '100%',
+  },
+  body: {
     padding: 12,
     gap: 12,
   },

package/src/components/RoomComponents/ChatRoomItem.tsx

@@ -20,7 +20,7 @@ import LastMessageItem from './LastMessageItem';
 import { LastRoomMessageText } from './styled/StyledRoomComponents';
 import { useTheme } from '../../hooks/useTheme';
 import { resolveTheme } from '../../theme/theme';
-import { LockIcon } from '../../assets/icons';
+import { BellOffIcon, LockIcon } from '../../assets/icons';
 import { useT } from '../../i18n/useT';
 import { composeName } from '../../helpers/displayName';
 import { isUnresolvedSenderId } from '../../helpers/isUnresolvedSenderId';
@@ -188,6 +188,18 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
                   <LockIcon width={13} height={13} color={theme.textSecondary} />
                 </View>
               )}
+              {/* Notifications off (chat profile / swipe): the crossed bell
+                  after the name, as in the messengers. */}
+              {chat?.muted && (
+                <View
+                  accessible
+                  accessibilityRole="image"
+                  accessibilityLabel={t('action.muted')}
+                  testID="room-muted"
+                >
+                  <BellOffIcon width={14} height={14} color={theme.textSecondary} />
+                </View>
+              )}
             </View>
           </ChatInfo>
           {stamp ? (
@@ -265,7 +277,8 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
             <View
               style={{
                 borderRadius: 8,
-                backgroundColor: theme.primary,
+                // A muted chat still counts, but greyed: nothing to rush to.
+                backgroundColor: chat?.muted ? theme.textSecondary : theme.primary,
                 padding: 2,
                 minWidth: 24,
                 minHeight: 24,
@@ -278,7 +291,7 @@ const ChatRoomItem: React.FC<ChatRoomItemProps> = ({
               <Text
                 style={{
                   // color: isChatActive ? "#141414" : "#fff",
-                  color: theme.text,
+                  color: chat?.muted ? theme.textOnPrimary : theme.text,
                   fontSize: 14,
                   fontWeight: '600',
                 }}

package/src/components/RoomComponents/SwipeableRoomRow.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import ReanimatedSwipeable, {
   type SwipeableMethods,
 } from 'react-native-gesture-handler/ReanimatedSwipeable';
-import { LeaveIcon, ReportIcon } from '../../assets/icons';
+import { BellIcon, BellOffIcon, LeaveIcon, ReportIcon } from '../../assets/icons';
 import { useTheme } from '../../hooks/useTheme';
 import { useT } from '../../i18n/useT';
 import type { ChatTheme } from '../../theme/theme';
@@ -25,25 +25,35 @@ export const closeOpenRoomRow = (): void => {
 interface SwipeableRoomRowProps {
   /** Identifies the row to the host's callbacks. */
   roomJid: string;
+  /** The chat's notifications are off: the action offers to turn them on. */
+  muted?: boolean;
+  /** Mute / unmute, as in the chat profile. No handler → no button. */
+  onToggleMute?: (roomJid: string) => void;
   onReport: (roomJid: string) => void;
   onLeave: (roomJid: string) => void;
   children: React.ReactNode;
 }
 
 /**
- * A room-list row that slides left to show Report and Leave behind it,
+ * A room-list row that slides left to show Mute, Report and Leave behind it,
  * the way chats do in the big messengers. A tap on an action folds the
  * row back first, so the list is tidy under whatever the action opens.
  */
 const SwipeableRoomRow: React.FC<SwipeableRoomRowProps> = ({
   roomJid,
+  muted = false,
+  onToggleMute,
   onReport,
   onLeave,
   children,
 }) => {
   const theme = useTheme();
   const t = useT();
-  const styles = useMemo(() => createStyles(theme), [theme]);
+  const actionCount = onToggleMute ? 3 : 2;
+  const styles = useMemo(
+    () => createStyles(theme, actionCount),
+    [theme, actionCount]
+  );
   const ref = useRef<SwipeableMethods>(null);
 
   const onWillOpen = useCallback(() => {
@@ -65,6 +75,29 @@ const SwipeableRoomRow: React.FC<SwipeableRoomRowProps> = ({
   const renderRightActions = useCallback(
     () => (
       <View style={styles.actions}>
+        {onToggleMute ? (
+          // The ACTION a tap performs, as in the web client: a muted chat
+          // (the crossed bell on its row) offers "Unmute" with a plain bell,
+          // any other offers "Mute" with the crossed one.
+          <TouchableOpacity
+            testID={`room-action-mute-${roomJid.split('@')[0]}`}
+            accessibilityRole="button"
+            accessibilityLabel={t(muted ? 'action.unmute' : 'action.mute')}
+            accessibilityState={{ checked: muted }}
+            activeOpacity={0.8}
+            style={[styles.action, { backgroundColor: theme.icon }]}
+            onPress={() => act(onToggleMute)}
+          >
+            {muted ? (
+              <BellIcon color={theme.textOnPrimary} width={22} height={22} />
+            ) : (
+              <BellOffIcon color={theme.textOnPrimary} width={22} height={22} />
+            )}
+            <Text style={styles.label}>
+              {t(muted ? 'action.unmute' : 'action.mute')}
+            </Text>
+          </TouchableOpacity>
+        ) : null}
         <TouchableOpacity
           testID={`room-action-report-${roomJid.split('@')[0]}`}
           accessibilityRole="button"
@@ -89,7 +122,7 @@ const SwipeableRoomRow: React.FC<SwipeableRoomRowProps> = ({
         </TouchableOpacity>
       </View>
     ),
-    [act, onLeave, onReport, roomJid, styles, t, theme]
+    [act, muted, onLeave, onReport, onToggleMute, roomJid, styles, t, theme]
   );
 
   return (
@@ -113,11 +146,11 @@ const SwipeableRoomRow: React.FC<SwipeableRoomRowProps> = ({
 
 export default SwipeableRoomRow;
 
-const createStyles = (theme: ChatTheme) =>
+const createStyles = (theme: ChatTheme, actionCount: number) =>
   StyleSheet.create({
     actions: {
       flexDirection: 'row',
-      width: ROOM_ACTION_WIDTH * 2,
+      width: ROOM_ACTION_WIDTH * actionCount,
     },
     action: {
       width: ROOM_ACTION_WIDTH,

package/src/components/Thread/ThreadHeader.tsx

@@ -8,6 +8,7 @@ import { CloseIcon } from '../../assets/icons';
 import { useDispatch } from 'react-redux';
 import { setCloseActiveMessage } from '../../roomStore/roomsSlice';
 import { View } from 'react-native';
+import { useT } from '../../i18n/useT';
 
 interface ThreadHeaderProps {
   chatJID: string;
@@ -15,6 +16,7 @@ interface ThreadHeaderProps {
 
 const ThreadHeader: FC<ThreadHeaderProps> = ({ chatJID }) => {
   const dispatch = useDispatch();
+  const t = useT();
 
   const handleCloseThread = () => {
     dispatch(setCloseActiveMessage({ chatJID: chatJID }));
@@ -23,7 +25,7 @@ const ThreadHeader: FC<ThreadHeaderProps> = ({ chatJID }) => {
   return (
     <ChatContainerHeader>
       <View style={{ display: 'flex', gap: 8 }}>
-        <ChatContainerHeaderLabel>Thread</ChatContainerHeaderLabel>
+        <ChatContainerHeaderLabel>{t('thread.title')}</ChatContainerHeaderLabel>
       </View>
 
       <View style={{ display: 'flex', gap: 16 }}>

package/src/components/Thread/ThreadWrapper.tsx

@@ -17,6 +17,9 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import { IMessage, User } from '../../types/types';
 import type { RootState } from '../../roomStore';
+import Loader from '../styled/Loader';
+import { useT } from '../../i18n/useT';
+import { parseMessageReference } from '../../helpers/parseMessageReference';
 import SendInput from '../styled/SendInput';
 import { useXmppClient } from '../../context/xmppProvider';
 import MessageList from '../MainComponents/MessageList';
@@ -29,7 +32,6 @@ import { useSendMessage } from '../../hooks/useSendMessage';
 import { createMainMessageForThread } from '../../helpers/createMainMessageForThread';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
 import { useTheme } from '../../hooks/useTheme';
-import { useT } from '../../i18n/useT';
 import CustomTypingIndicator from '../styled/StyledInputComponents/CustomTypingIndicator';
 import { KeyboardInputDock } from '../MainComponents/KeyboardInputDock';
 import {
@@ -44,6 +46,8 @@ import {
   PUSH,
 } from '../MainComponents/RoomStack';
 
+export const THREAD_HISTORY_PAGE_SIZE = 15;
+
 interface ThreadWrapperProps {
   activeMessage: IMessage;
   user: User;
@@ -146,23 +150,85 @@ const ThreadWrapper: FC<ThreadWrapperProps> = ({
     [close, windowWidth, x]
   );
 
-  // Thread history IS the room's history (replies live in the room).
+  // Thread history IS the room's history (replies live in the room). Reads
+  // the LATEST room state at call time (no stale closure), pages by the
+  // server cursor like the main list does, and stops at the thread's parent:
+  // every reply is newer than the message it answers.
+  const parentTs = Number(activeMessage.id);
+  // One page request at a time, and never the same page twice: a page that
+  // returns only reactions or receipts leaves the cursor where it was, and
+  // repeating it would loop forever.
+  const inFlightRef = useRef(false);
+  const lastRequestKeyRef = useRef<string | null>(null);
+  useEffect(() => {
+    lastRequestKeyRef.current = null;
+  }, [roomJid, activeMessage.id]);
+
   const loadMoreMessages = useCallback(
     async (chatJID: string, max: number, idOfMessageBefore?: number) => {
-      if (isLoadingMore) {return;}
-      if (reduxStore.getState().rooms.rooms?.[chatJID]?.historyComplete) {return;}
+      if (!client || inFlightRef.current) {return;}
+      const current = reduxStore.getState().rooms.rooms?.[chatJID];
+      if (!current || current.historyComplete) {return;}
+
+      const cursor = current.messageStats?.firstMessageTimestamp;
+      const hint =
+        typeof idOfMessageBefore === 'number' &&
+        Number.isFinite(idOfMessageBefore)
+          ? idOfMessageBefore
+          : undefined;
+      const candidates = [cursor, hint].filter(
+        (n): n is number => typeof n === 'number' && Number.isFinite(n)
+      );
+      const before = candidates.length ? Math.min(...candidates) : undefined;
+      if (before === undefined) {return;}
+      if (Number.isFinite(parentTs) && before <= parentTs) {return;}
+
+      const requestKey = `${chatJID}|${before}`;
+      if (requestKey === lastRequestKeyRef.current) {return;}
+
+      inFlightRef.current = true;
+      lastRequestKeyRef.current = requestKey;
       setIsLoadingMore(true);
       try {
-        await client?.getHistoryStanza(chatJID, max, idOfMessageBefore);
-      } catch (err) {
-        console.warn('getHistoryStanza failed', err);
+        await client.getHistoryStanza(chatJID, max, before).catch((err: unknown) => {
+          // Let the same page be retried later.
+          lastRequestKeyRef.current = null;
+          console.warn('getHistoryStanza failed', err);
+        });
       } finally {
+        inFlightRef.current = false;
         setIsLoadingMore(false);
       }
     },
-    [client, isLoadingMore, reduxStore]
+    [client, reduxStore, parentTs]
   );
 
+  // Replies of this parent already in the store.
+  const replyCount = useMemo(() => {
+    let n = 0;
+    for (const m of room?.messages ?? []) {
+      if (
+        m.isReply === 'true' &&
+        parseMessageReference(m.mainMessage)?.id === activeMessage.id
+      ) {
+        n += 1;
+      }
+    }
+    return n;
+  }, [room?.messages, activeMessage.id]);
+
+  // Opening a thread whose parent is older than the loaded window: the list
+  // has no replies to scroll, so nothing would ask for history. Keep paging
+  // until the cursor reaches the parent (or the archive ends).
+  const cursor = room?.messageStats?.firstMessageTimestamp;
+  const historyComplete = Boolean(room?.historyComplete);
+  useEffect(() => {
+    if (historyComplete || isLoadingMore) {return;}
+    if (!Number.isFinite(parentTs)) {return;}
+    if (typeof cursor !== 'number' || cursor <= parentTs) {return;}
+    loadMoreMessages(roomJid, THREAD_HISTORY_PAGE_SIZE, cursor);
+  }, [cursor, historyComplete, isLoadingMore, parentTs, roomJid, loadMoreMessages]);
+
   const sendMessage = useCallback(
     (message: string) => {
       sendMs(message, roomJid, true, isChecked, createMainMessageForThread(activeMessage));
@@ -172,7 +238,7 @@ const ThreadWrapper: FC<ThreadWrapperProps> = ({
 
   const sendMedia = useCallback(
     (data: any, type: string) => {
-      sendMessageMedia(
+      return sendMessageMedia(
         data,
         type,
         roomJid,
@@ -219,7 +285,19 @@ const ThreadWrapper: FC<ThreadWrapperProps> = ({
           style={[styles.fill, { backgroundColor: theme.surface }]}
         >
           <View style={[styles.fill, { backgroundColor: theme.chatBackground }]}>
-            <ModalHeaderComponent headerTitle={t('thread.title')} handleCloseModal={close} />
+            <ModalHeaderComponent
+              headerTitle={t('thread.title')}
+              handleCloseModal={close}
+            />
+            {isLoadingMore && replyCount === 0 && (
+              <View
+                testID="thread-history-loader"
+                pointerEvents="none"
+                style={styles.historyLoader}
+              >
+                <Loader size={24} color={theme.primary} />
+              </View>
+            )}
             <MessageList
               loadMoreMessages={loadMoreMessages}
               CustomMessage={CustomMessageComponent}
@@ -333,6 +411,14 @@ const styles = StyleSheet.create({
   fill: {
     flex: 1,
   },
+  historyLoader: {
+    position: 'absolute',
+    top: 72,
+    left: 0,
+    right: 0,
+    zIndex: 2,
+    alignItems: 'center',
+  },
   dock: {
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,