@ethora/chat-component-rn 26.9.1 → 26.10.0

package/src/components/MainComponents/MessageSearchButton.tsx

@@ -0,0 +1,48 @@
+import React, { FC } from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+import { useDispatch } from 'react-redux';
+import { SearchIcon } from '../../assets/icons';
+import { useChatSettingState } from '../../hooks/useChatSettingState';
+import { getIconColor } from '../../helpers/getIconColor';
+import { useT } from '../../i18n/useT';
+import { setActiveModal } from '../../roomStore/chatSettingsSlice';
+import { MODAL_TYPES } from '../../helpers/constants/MODAL_TYPES';
+import { isMessageSearchEnabled } from '../../helpers/isMessageSearchEnabled';
+
+export { isMessageSearchEnabled };
+
+/** Magnifier in the chat header that opens the message search screen. */
+export const MessageSearchButton: FC = () => {
+  const { config } = useChatSettingState();
+  const t = useT();
+  const dispatch = useDispatch();
+
+  if (!isMessageSearchEnabled(config)) {
+    return null;
+  }
+
+  return (
+    <TouchableOpacity
+      testID="chat-header-search-messages"
+      accessibilityRole="button"
+      accessibilityLabel={t('search.messages.title')}
+      onPress={() => dispatch(setActiveModal(MODAL_TYPES.MESSAGE_SEARCH))}
+      style={styles.button}
+      hitSlop={8}
+    >
+      <SearchIcon color={getIconColor(config)} />
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});
+
+export default MessageSearchButton;

package/src/components/MainComponents/ReduxWrapper.tsx

@@ -3,6 +3,7 @@ import {useColorScheme} from 'react-native';
 import {Provider, useDispatch, useSelector} from 'react-redux';
 import {KeyboardProvider} from 'react-native-keyboard-controller';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
+import {GestureHandlerRootView} from 'react-native-gesture-handler';
 import {ThemeProvider} from 'styled-components/native';
 import {applyThemePreference, resolveTheme} from '../../theme/theme';
 import {store} from '../../roomStore';
@@ -20,12 +21,15 @@ import {XmppProvider} from '../../context/xmppProvider';
 import {MessageNotificationProvider} from '../../context/MessageNotificationContext';
 import {ToastProvider} from '../../context/ToastContext';
 import LoginWrapper from './LoginWrapper';
+import {AudioDecoderHost} from '../styled/AudioDecoderHost';
 import '../../helpers/storeConsole';
 import {installPromiseRejectionTracker} from '../../utils/installPromiseRejectionTracker';
 import {useChatFonts} from '../../hooks/useChatFonts';
 import {installPushTokenHook} from '../../services/pushRegistration';
 import {setE2eeEnabled} from '../../e2ee';
 
+const gestureRootStyle = {flex: 1};
+
 // Mount-time, dev-only — wire a global unhandled-promise-rejection
 // tracker so any future leak surfaces with a real stack trace in Metro
 // logs (bug #4 follow-up). No-op in production.
@@ -133,6 +137,8 @@ export const ReduxWrapper: React.FC<ChatWrapperProps> = React.memo(
           <ToastProvider>
             <MessageNotificationProvider config={memoizedConfig}>
               <LoginWrapper config={memoizedConfig} {...props} />
+              {/* Shared voice-message decoder (waveforms, iOS Opus). */}
+              <AudioDecoderHost />
             </MessageNotificationProvider>
           </ToastProvider>
         </XmppProvider>
@@ -143,11 +149,16 @@ export const ReduxWrapper: React.FC<ChatWrapperProps> = React.memo(
       <Provider store={store}>
         <ConfigEnabler config={memoizedConfig} />
         <SafeAreaProvider>
-          {ownKeyboardHandling ? (
-            <KeyboardProvider>{tree}</KeyboardProvider>
-          ) : (
-            tree
-          )}
+          {/* The SDK's own gestures (room-row swipe, message long-press,
+              profile swipe-back) need a root view above them; a host that
+              already has one just nests it, which is harmless. */}
+          <GestureHandlerRootView style={gestureRootStyle}>
+            {ownKeyboardHandling ? (
+              <KeyboardProvider>{tree}</KeyboardProvider>
+            ) : (
+              tree
+            )}
+          </GestureHandlerRootView>
         </SafeAreaProvider>
       </Provider>
     );

package/src/components/MainComponents/RoomList.tsx

@@ -10,6 +10,7 @@ import React, {
 import {
   Alert,
   View,
+  Text,
   StyleSheet,
   FlatList,
   Pressable,
@@ -33,6 +34,15 @@ import { HeaderRoomListMenu } from '../Menu/HeaderRoomListMenu';
 import { getIconColor } from '../../helpers/getIconColor';
 import { useT } from '../../i18n/useT';
 import { useTheme } from '../../hooks/useTheme';
+import { useRoomMute } from '../../hooks/useRoomMute';
+import { isMessageSearchEnabled } from '../../helpers/isMessageSearchEnabled';
+import { useMessageSearch } from '../Modals/MessageSearchModal/useMessageSearch';
+import type { MessageSearchHit } from '../../networking/api-requests/messageSearch.api';
+import {
+  MessageHitList,
+  SecondaryPillButton,
+  useMessageHitActions,
+} from '../Modals/MessageSearchModal/MessageHitResults';
 
 const LONG_PRESS_THRESHOLD = 200;
 
@@ -155,6 +165,15 @@ const RoomList: React.FC<RoomListProps> = ({
     [client, dispatch, t]
   );
   const handleReportRoom = useCallback((jid: string) => setReportJid(jid), []);
+  const toggleRoomMuted = useRoomMute();
+  const handleToggleMute = useCallback(
+    async (jid: string) => {
+      if (!(await toggleRoomMuted(jid))) {
+        Alert.alert(t('toast.error'), t('toast.muteFailed'));
+      }
+    },
+    [toggleRoomMuted, t]
+  );
 
   const activityOf = useCallback((chat: IRoom): number => {
     const last = chat?.messages?.[chat?.messages.length - 1];
@@ -167,6 +186,28 @@ const RoomList: React.FC<RoomListProps> = ({
     return 0;
   }, []);
 
+  // The same box that filters chats by title also looks inside the messages.
+  // Off wherever message search is off (no request, no block).
+  const messageSearchEnabled = isMessageSearchEnabled(config);
+  const messageSearch = useMessageSearch(
+    messageSearchEnabled ? searchTerm : '',
+    'all'
+  );
+  const { open: openHit, activeRoomJID } = useMessageHitActions();
+  const openMessageHit = useCallback(
+    (hit: MessageSearchHit) => {
+      const target = (chats || []).find(
+        (chat) =>
+          chat?.jid === hit.room || chat?.jid?.split('@')[0] === hit.chatId
+      );
+      // The path a tap on a chat row takes, so a host that routes on room
+      // clicks sees this one too; then land on the message.
+      if (target && target.jid !== activeRoomJID) performClick(target);
+      openHit(hit);
+    },
+    [chats, activeRoomJID, performClick, openHit]
+  );
+
   const filteredChats = useMemo(() => {
     const lowerCaseSearchTerm = searchTerm.toLowerCase();
     const chatsMap = new Map<string, IRoom[]>();
@@ -329,6 +370,8 @@ const RoomList: React.FC<RoomListProps> = ({
       return (
         <SwipeableRoomRow
           roomJid={item.jid}
+          muted={!!item.muted}
+          onToggleMute={handleToggleMute}
           onReport={handleReportRoom}
           onLeave={handleLeaveRoom}
         >
@@ -344,6 +387,7 @@ const RoomList: React.FC<RoomListProps> = ({
       swipeActions,
       handleReportRoom,
       handleLeaveRoom,
+      handleToggleMute,
     ]
   );
 
@@ -384,6 +428,75 @@ const RoomList: React.FC<RoomListProps> = ({
     });
   };
 
+  const messageMatches =
+    messageSearchEnabled && messageSearch.searchable ? (
+      <View testID="room-list-message-matches" style={styles.matches}>
+        {messageSearch.items.length > 0 && (
+          <>
+            <View style={styles.matchesTitle}>
+              <Text style={[styles.matchesTitleText, { color: theme.text }]}>
+                {t('search.messages.title')}
+              </Text>
+              <Text style={[styles.matchesCount, { color: theme.textMuted }]}>
+                {t('search.messages.count', { count: messageSearch.total })}
+              </Text>
+            </View>
+            <MessageHitList
+              hits={messageSearch.items}
+              query={searchTerm.trim()}
+              showRoom
+              onOpen={openMessageHit}
+            />
+            {messageSearch.hasMore && (
+              <SecondaryPillButton
+                testID="room-list-message-more"
+                onPress={messageSearch.loadMore}
+                disabled={messageSearch.status === 'loadingMore'}
+                label={
+                  messageSearch.status === 'loadingMore'
+                    ? t('search.messages.searching')
+                    : t('search.messages.loadMore')
+                }
+              />
+            )}
+          </>
+        )}
+        {messageSearch.status === 'loading' && (
+          <Text
+            testID="room-list-message-searching"
+            style={[styles.matchesNote, { color: theme.textMuted }]}
+          >
+            {t('search.messages.searching')}
+          </Text>
+        )}
+        {messageSearch.status === 'done' &&
+          messageSearch.items.length === 0 &&
+          filteredChats.length === 0 && (
+            <Text
+              testID="room-list-message-empty"
+              style={[styles.matchesNote, { color: theme.textMuted }]}
+            >
+              {t('search.messages.empty')}
+            </Text>
+          )}
+        {messageSearch.status === 'error' && (
+          <View style={styles.matchesNote}>
+            <Text
+              testID="room-list-message-error"
+              style={[styles.matchesError, { color: theme.danger }]}
+            >
+              {t('search.messages.error')}
+            </Text>
+            <SecondaryPillButton
+              testID="room-list-message-retry"
+              onPress={messageSearch.retry}
+              label={t('search.messages.retry')}
+            />
+          </View>
+        )}
+      </View>
+    ) : null;
+
   const searchHeader = (
     <View
       testID="room-list-search"
@@ -446,6 +559,7 @@ const RoomList: React.FC<RoomListProps> = ({
                   data={filteredChats}
                   keyExtractor={(item) => item.jid}
                   ListHeaderComponent={searchHeader}
+                  ListFooterComponent={messageMatches}
                   onLayout={(e) => {
                     listHeight.current = e.nativeEvent.layout.height;
                     hideSearchInitially();
@@ -529,6 +643,17 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     flex: 1,
   },
+  matches: { paddingBottom: 12 },
+  matchesTitle: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'baseline',
+    paddingVertical: 8,
+  },
+  matchesTitleText: { fontSize: 14, fontWeight: '600' },
+  matchesCount: { fontSize: 12 },
+  matchesError: { textAlign: 'center' },
+  matchesNote: { paddingVertical: 8, alignItems: 'center' },
   chatList: {
     flex: 1,
     paddingHorizontal: 16,

package/src/components/Menu/HeaderRoomListMenu.tsx

@@ -14,6 +14,7 @@ import {
 } from 'react-native';
 import {
   AddNewIcon,
+  DiscoverIcon,
   LogoutIcon,
   ProfileIcon,
   SettingIcon,
@@ -25,12 +26,12 @@ import { MODAL_TYPES } from '../../helpers/constants/MODAL_TYPES';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
 import { useLogout } from '../../hooks/useLogout';
 import { useTheme } from '../../hooks/useTheme';
+import { useT } from '../../i18n/useT';
 import {
   shouldClaimVerticalDrag,
   shouldDismissOnDrag,
 } from '../../helpers/sheetGestures';
 import type { IConfig } from '../../types/types';
-import { useT } from '../../i18n/useT';
 
 type LogoutConfig = NonNullable<IConfig['logout']>;
 
@@ -294,6 +295,19 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
           dispatch(setActiveModal(MODAL_TYPES.SETTINGS));
         },
       },
+      // The directory of the app's public chats. Reachable here whenever the
+      // sheet is, which is also why a host that overrides the burger keeps it.
+      ...(!config?.disablePublicChatsDirectory
+        ? [
+            {
+              label: t('publicChats.title'),
+              icon: <DiscoverIcon color={iconColor} />,
+              onClick: () => {
+                dispatch(setActiveModal(MODAL_TYPES.PUBLIC_CHATS));
+              },
+            },
+          ]
+        : []),
     ];
     if (logoutConfig) {
       options.push({
@@ -306,7 +320,17 @@ export const HeaderRoomListMenu: FC<HeaderRoomListMenuProps> = ({
       });
     }
     return options;
-  }, [dispatch, logoutConfig, logoutStrings, performLogout, primaryColor, iconColor, labelColor, t]);
+  }, [
+    dispatch,
+    logoutConfig,
+    logoutStrings,
+    performLogout,
+    primaryColor,
+    iconColor,
+    labelColor,
+    config?.disablePublicChatsDirectory,
+    t,
+  ]);
 
   return (
     // Presented through a real <Modal>: as an in-tree overlay the sheet was

package/src/components/MessageBubble/BubbleHighlight.tsx

@@ -0,0 +1,106 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { AccessibilityInfo, Animated, StyleSheet } from 'react-native';
+import { useBubbleHighlightUntil } from '../../helpers/bubbleHighlight';
+import { useTheme } from '../../hooks/useTheme';
+
+const FADE_IN_MS = 150;
+
+const Ring: React.FC<{ remainingMs: number }> = ({ remainingMs }) => {
+  const theme = useTheme();
+  const opacity = useRef(new Animated.Value(0)).current;
+  // Fixed at mount: a re-render must not restart the pulse.
+  const startRemainingRef = useRef(remainingMs);
+  const [reduceMotion, setReduceMotion] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    let alive = true;
+    Promise.resolve(AccessibilityInfo?.isReduceMotionEnabled?.())
+      .then((value) => {
+        if (alive) {setReduceMotion(Boolean(value));}
+      })
+      .catch(() => {
+        if (alive) {setReduceMotion(false);}
+      });
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (reduceMotion === null) {return;}
+    if (reduceMotion) {
+      // A static ring for the rest of the second: no movement, still visible.
+      opacity.setValue(1);
+      return;
+    }
+    const total = startRemainingRef.current;
+    const fadeIn = Math.min(FADE_IN_MS, total);
+    const animation = Animated.sequence([
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: fadeIn,
+        useNativeDriver: true,
+      }),
+      Animated.timing(opacity, {
+        toValue: 0,
+        duration: Math.max(0, total - fadeIn),
+        useNativeDriver: true,
+      }),
+    ]);
+    animation.start();
+    return () => animation.stop();
+  }, [reduceMotion, opacity]);
+
+  return (
+    <Animated.View
+      testID="bubble-highlight"
+      pointerEvents="none"
+      style={[
+        styles.ring,
+        {
+          opacity,
+          borderColor: theme.primary,
+          backgroundColor: theme.primary + '22',
+        },
+      ]}
+    />
+  );
+};
+
+/**
+ * The brief ring and tint a jump puts on the bubble of the message it landed
+ * on (not on the whole row: the row also holds the date label and the
+ * avatar). Renders inside the bubble, which clips it to the bubble's corners.
+ * Nothing is mounted for a message without a running highlight.
+ */
+export const BubbleHighlight: React.FC<{ messageId: string }> = ({
+  messageId,
+}) => {
+  const until = useBubbleHighlightUntil(String(messageId));
+  const [, setTick] = useState(0);
+  const remaining = until - Date.now();
+
+  // Drop the ring when its time is up even if nothing else re-renders.
+  useEffect(() => {
+    if (remaining <= 0) {return;}
+    const timer = setTimeout(() => setTick((value) => value + 1), remaining);
+    return () => clearTimeout(timer);
+  }, [until, remaining]);
+
+  if (remaining <= 0) {return null;}
+  return <Ring remainingMs={remaining} />;
+};
+
+const styles = StyleSheet.create({
+  ring: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderWidth: 2,
+    borderRadius: 10,
+  },
+});
+
+export default BubbleHighlight;