@ethora/chat-component-rn 26.9.1 → 26.10.0

package/lib/typescript/version.d.ts

@@ -1,2 +1,2 @@
-export declare const ETHORA_CHAT_COMPONENT_VERSION = "26.9.1";
+export declare const ETHORA_CHAT_COMPONENT_VERSION = "26.10.0";
 //# sourceMappingURL=version.d.ts.map

package/lib/typescript/version.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,6BAA6B,WAAW,CAAC"}
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,6BAA6B,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethora/chat-component-rn",
-  "version": "26.9.1",
+  "version": "26.10.0",
   "description": "Drop-in XMPP chat component for React Native / Expo. <Chat config={...}/> and you're done.",
   "main": "index.js",
   "module": "lib/module/main.js",

package/src/assets/icons.tsx

@@ -194,6 +194,19 @@ export const MoreIcon = ({ color = '#8C8C8C', ...props }) => (
   </Svg>
 );
 
+export const DiscoverIcon = ({ color = '#8C8C8C', ...props }) => (
+  <Svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
+    <Circle cx="12" cy="12" r="9" stroke={color} strokeWidth="1.8" />
+    <Path
+      d="M15.8 8.2L13.6 13.6L8.2 15.8L10.4 10.4L15.8 8.2Z"
+      stroke={color}
+      strokeWidth="1.6"
+      strokeLinejoin="round"
+    />
+    <Circle cx="12" cy="12" r="1.1" fill={color} />
+  </Svg>
+);
+
 export const SearchIcon = ({ color = '#8C8C8C', ...props }) => (
   <Svg width="24" height="24" viewBox="0 0 24 24" fill="none">
     <Path

package/src/components/Header/HeaderRoomList.tsx

@@ -5,10 +5,14 @@ import React, { FC, useMemo } from 'react';
 import { ActivityIndicator, View, StyleSheet, Image, Text } from 'react-native';
 import { ProfileImagePlaceholder } from '../MainComponents/ProfileImagePlaceholder';
 import { useChatSettingState } from '../../hooks/useChatSettingState';
-import { BurgerMenuIcon } from '../../assets/icons';
+import { BurgerMenuIcon, DiscoverIcon } from '../../assets/icons';
 import Button from '../styled/Button';
 import { useTheme } from '../../hooks/useTheme';
 import { useT } from '../../i18n/useT';
+import { useDispatch } from 'react-redux';
+import { setActiveModal } from '../../roomStore/chatSettingsSlice';
+import { MODAL_TYPES } from '../../helpers/constants/MODAL_TYPES';
+import { showsStandaloneDiscoverButton } from '../../helpers/publicChatsEntry';
 import { useConnectionLabel } from '../../hooks/useConnectionLabel';
 import { resolveHeaderHeight } from '../../helpers/headerLayout';
 
@@ -23,6 +27,7 @@ export const HeaderRoomList: FC<HeaderRoomListProps> = ({ setDrawerOpen }) => {
   const { config, user, selectedUser } = useChatSettingState();
   const theme = useTheme();
   const t = useT();
+  const dispatch = useDispatch();
   const connectionLabel = useConnectionLabel();
   const insets = useSafeAreaInsets();
   const topInset = config?.headerLayout?.safeAreaTop ? insets.top : 0;
@@ -100,6 +105,16 @@ export const HeaderRoomList: FC<HeaderRoomListProps> = ({ setDrawerOpen }) => {
         )}
       </View>
       <View style={styles.rightContainer}>
+        {showsStandaloneDiscoverButton(config) && (
+          <Button
+            testID="room-list-discover"
+            style={styles.menuButton}
+            unstyled
+            EndIcon={<DiscoverIcon color={theme.icon} />}
+            onPress={() => dispatch(setActiveModal(MODAL_TYPES.PUBLIC_CHATS))}
+            accessibilityLabel={t('publicChats.title')}
+          />
+        )}
         <ProfileImagePlaceholder
           icon={modalUser?.profileImage ?? null}
           name={modalUser?.name ?? modalUser?.firstName}
@@ -152,8 +167,10 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   rightContainer: {
-    width: 44,
-    alignItems: 'flex-end',
-    justifyContent: 'center',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    gap: 4,
+    minWidth: 44,
   },
 });

package/src/components/InputComponents/Search.tsx

@@ -5,8 +5,11 @@ import {
   View,
   TouchableOpacity,
   TextInputProps,
+  Text,
+  StyleSheet,
 } from 'react-native';
 import { useTheme } from '../../hooks/useTheme';
+import { useT } from '../../i18n/useT';
 
 const shouldForwardProp = (prop: string) =>
   prop !== 'animated' && prop !== 'expanded' && prop !== 'direction';
@@ -71,6 +74,17 @@ interface SearchInputProps extends TextInputProps {
   value: string;
 }
 
+const clearStyles = StyleSheet.create({
+  button: {
+    width: 28,
+    height: 28,
+    marginLeft: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  glyph: { fontSize: 22, lineHeight: 24 },
+});
+
 const SearchInput: React.FC<SearchInputProps> = ({
   icon,
   animated = false,
@@ -79,6 +93,7 @@ const SearchInput: React.FC<SearchInputProps> = ({
   ...props
 }) => {
   const theme = useTheme();
+  const t = useT();
   const [isExpanded, setIsExpanded] = useState(false);
   const [isTyping, setIsTyping] = useState(false);
   const inputRef = useRef<TextInput | null>(null);
@@ -134,6 +149,24 @@ const SearchInput: React.FC<SearchInputProps> = ({
         keyboardAppearance={theme.dark ? 'dark' : 'light'}
         {...props}
       />
+      {props.value ? (
+        <TouchableOpacity
+          testID="search-clear"
+          accessibilityRole="button"
+          accessibilityLabel={t('search.clear')}
+          hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+          onPress={() => {
+            props.onChangeText?.('');
+            setIsTyping(false);
+            inputRef.current?.focus();
+          }}
+          style={clearStyles.button}
+        >
+          <Text style={[clearStyles.glyph, { color: theme.textMuted }]}>
+            {'\u00D7'}
+          </Text>
+        </TouchableOpacity>
+      ) : null}
     </SearchInputWrapper>
   );
 };

package/src/components/MainComponents/ArchivedMessageCard.tsx

@@ -0,0 +1,139 @@
+import React, { useEffect } from 'react';
+import {
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from '../../roomStore';
+import { clearArchivedMessage } from '../../roomStore/roomsSlice';
+import { useT } from '../../i18n/useT';
+import { useTheme } from '../../hooks/useTheme';
+
+const formatWhen = (iso: string): string => {
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) {return '';}
+  try {
+    return date.toLocaleString();
+  } catch {
+    return date.toISOString();
+  }
+};
+
+/**
+ * The message a search hit points at, shown when the transcript cannot reach
+ * it (the search archive is deeper than the chat's own history). It sits over
+ * the conversation of the room it came from, so it needs no navigation and
+ * says what the message is instead of reporting that it was not found.
+ */
+const ArchivedMessageCard: React.FC<{ roomJID: string }> = ({ roomJID }) => {
+  const t = useT();
+  const theme = useTheme();
+  const dispatch = useDispatch();
+  const message = useSelector(
+    (state: RootState) => state.rooms.archivedMessage
+  );
+  const visible = Boolean(message && message.roomJID === roomJID);
+
+  // Gone with the conversation it belongs to.
+  useEffect(
+    () => () => {
+      dispatch(clearArchivedMessage());
+    },
+    [dispatch]
+  );
+
+  if (!visible || !message) {return null;}
+
+  const close = () => dispatch(clearArchivedMessage());
+
+  return (
+    <Pressable
+      testID="archived-message-card"
+      style={[styles.scrim, { backgroundColor: theme.overlay }]}
+      onPress={close}
+      accessibilityRole="button"
+      accessibilityLabel={t('action.close')}
+    >
+      {/* A tap on the card itself must not close it (text stays selectable). */}
+      <Pressable
+        style={[
+          styles.card,
+          { backgroundColor: theme.surface, shadowColor: theme.shadow },
+        ]}
+        onPress={() => undefined}
+        accessibilityRole="alert"
+        accessibilityLabel={t('search.messages.archivedTitle')}
+      >
+        <View>
+          <Text style={[styles.sender, { color: theme.text }]}>
+            {message.sender}
+          </Text>
+          <Text style={[styles.meta, { color: theme.textSecondary }]}>
+            {formatWhen(message.createdAt)}
+          </Text>
+        </View>
+        <ScrollView
+          style={[styles.bodyBox, { backgroundColor: theme.surfaceSecondary }]}
+        >
+          <Text selectable style={[styles.body, { color: theme.text }]}>
+            {message.body}
+          </Text>
+        </ScrollView>
+        <Text style={[styles.note, { color: theme.textSecondary }]}>
+          {t('search.messages.archivedNote')}
+        </Text>
+        <Pressable
+          testID="archived-message-close"
+          onPress={close}
+          style={[styles.close, { borderColor: theme.border }]}
+          accessibilityRole="button"
+        >
+          <Text style={{ color: theme.text }}>{t('action.close')}</Text>
+        </Pressable>
+      </Pressable>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  scrim: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 5,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 16,
+  },
+  card: {
+    width: '100%',
+    maxWidth: 460,
+    maxHeight: '100%',
+    padding: 16,
+    borderRadius: 16,
+    gap: 12,
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.18,
+    shadowRadius: 24,
+    elevation: 8,
+  },
+  sender: { fontSize: 16, fontWeight: '600' },
+  meta: { fontSize: 12 },
+  bodyBox: { padding: 12, borderRadius: 12, maxHeight: 280 },
+  body: { fontSize: 14, lineHeight: 21 },
+  note: { fontSize: 12 },
+  close: {
+    alignSelf: 'flex-end',
+    paddingVertical: 6,
+    paddingHorizontal: 16,
+    borderWidth: 1,
+    borderRadius: 999,
+  },
+});
+
+export default ArchivedMessageCard;

package/src/components/MainComponents/ChatHeader.tsx

@@ -16,6 +16,7 @@ import Button from '../styled/Button';
 import { BackIcon, BurgerMenuIcon, LockIcon } from '../../assets/icons';
 import { CallButtons } from '../VideoCalls/CallButtons';
 import { LanguageSelectorButton } from './LanguageSelectorButton';
+import { MessageSearchButton } from './MessageSearchButton';
 import { useDispatch, useSelector, useStore } from 'react-redux';
 import type { RootState } from '../../roomStore';
 import Composing from '../styled/StyledInputComponents/Composing';
@@ -37,6 +38,7 @@ import { useTheme } from '../../hooks/useTheme';
 import { resolveHeaderHeight } from '../../helpers/headerLayout';
 import { getElementFont } from '../../helpers/getElementFont';
 import { useT } from '../../i18n/useT';
+import { getRoomUserCount } from '../../helpers/roomUserCount';
 import { useConnectionLabel } from '../../hooks/useConnectionLabel';
 
 interface ChatHeaderProps {
@@ -68,6 +70,10 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
   const t = useT();
   const connectionLabel = useConnectionLabel();
 
+  // usersCnt is the room's true total, members[] can be a truncated page of
+  // a big room: show the larger of the two.
+  const userCount = getRoomUserCount(roomState || currentRoom);
+
   const handleChangeChat = (chat: IRoom) => {
     dispatch(setCurrentRoom({ roomJID: chat.jid }));
     dispatch(setIsLoading({ chatJID: chat.jid, loading: true }));
@@ -201,7 +207,7 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
                   </View>
                 )}
               </View>
-              <View>
+              <View style={styles.subtitleBox}>
                 {connectionLabel ? (
                   // The session's state takes the subtitle's place: no
                   // typing or member count is current while it is off.
@@ -219,6 +225,10 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
                   <Composing usersTyping={currentRoom?.composingList} />
                 ) : config?.disableUserCount ? undefined : (
                   <ChatContainerHeaderLabel
+                    // One line, ellipsized: a long count in a narrow header
+                    // must not wrap and push the header buttons around.
+                    numberOfLines={1}
+                    ellipsizeMode="tail"
                     style={[
                       styles.subLabel,
                       { color: theme.textSecondary },
@@ -227,10 +237,10 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
                   >
                     <Text>
                       {t(
-                        Number(currentRoom?.usersCnt) === 1
+                        userCount === 1
                           ? 'header.userCountSingular'
                           : 'header.userCountPlural',
-                        { count: Number(currentRoom?.usersCnt) || 0 }
+                        { count: userCount }
                       )}
                     </Text>
                   </ChatContainerHeaderLabel>
@@ -243,6 +253,7 @@ const ChatHeader: React.FC<ChatHeaderProps> = ({
         <View style={styles.rightContainer}>
           {/* Renders nothing unless config.videoCalls is on and this is a
               1:1 room, so it costs non-call hosts nothing. */}
+          <MessageSearchButton />
           <LanguageSelectorButton />
           <CallButtons />
           {!config?.disableChatInfo?.disableRoomMenu && (
@@ -260,6 +271,11 @@ const styles = StyleSheet.create({
   subLabel: {
     color: '#8C8C8C',
     fontSize: 14,
+    flexShrink: 1,
+  },
+  subtitleBox: {
+    flexShrink: 1,
+    minWidth: 0,
   },
   titleRow: {
     flexDirection: 'row',

package/src/components/MainComponents/ChatRoom.tsx

@@ -1,12 +1,16 @@
 /** @format */
 
+import { isJoiningRoom } from '../../helpers/joiningRoom';
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { ChatContainer, NonRoomChat } from '../styled/StyledComponents';
 import { useDispatch, useSelector, useStore } from 'react-redux';
 import type { RootState } from '../../roomStore';
 import MessageList from './MessageList';
+import ArchivedMessageCard from './ArchivedMessageCard';
+import { loadRoomHistory } from '../../helpers/loadRoomHistory';
 import SendInput from '../styled/SendInput';
 import {
+  clearJumpWindow,
   clearReadBoundary,
   clearVisibleRoom,
   deleteRoomMessage,
@@ -124,6 +128,9 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
     const globalLoading = useSelector(
       (state: RootState) => state.rooms.isLoading,
     );
+    const joiningRoomJID = useSelector(
+      (state: RootState) => state.rooms.joiningRoomJID,
+    );
     const loading = !!activeRoom?.isLoading;
     const e2eeRoom = !!activeRoom?.e2ee;
     const e2eeOn = storeConfig?.e2ee?.enabled === true;
@@ -183,9 +190,14 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
         if (!activeRoomJID) {
           return;
         }
+        // Writing into a room means being at its latest messages: leave a
+        // jump window (old history) first, so the sent message is in view.
+        if (store.getState().rooms.jumpWindow) {
+          dispatch(clearJumpWindow());
+        }
         sendMs(message, activeRoomJID);
       },
-      [activeRoomJID, sendMs]
+      [activeRoomJID, sendMs, dispatch]
     );
 
     const sendMedia = useCallback(
@@ -193,33 +205,35 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
         // Return the promise so callers can sequence the follow-up
         // text send AFTER the upload finishes (consumer expectation:
         // media first, text second — never interleaved).
+        if (store.getState().rooms.jumpWindow) {
+          dispatch(clearJumpWindow());
+        }
         return sendMessageMedia(data, type, activeRoomJID || '');
       },
-      [activeRoomJID],
+      [activeRoomJID, dispatch],
     );
 
+    // One history request per room at a time. Everything the request needs
+    // (the room, its cursor, the messages used for the fallback cursor) is read
+    // from the store at call time, so a stale render closure can never act on
+    // old values.
+    const inFlightRoomsRef = useRef<Set<string>>(new Set());
     const loadMoreMessages = useCallback(
-      async (chatJID: string, max: number, idOfMessageBefore?: number) => {
-        const room = reduxStore.getState().rooms.rooms?.[chatJID];
-        if (isLoadingMore || room?.historyComplete) {return;}
-        const lastMsgId =
-          typeof idOfMessageBefore !== 'string'
-            ? idOfMessageBefore
-            : Number(room?.messages?.[(room?.messages?.length || 0) - 2]?.id);
-        setIsLoadingMore(true);
-        try {
-          // Return the promise so MessageList's `await loadMoreMessages`
-          // actually waits for MAM to respond before its own onEndReached
-          // re-arms — otherwise the awaited call resolves with `undefined`
-          // immediately and rapid scrolls fire repeat requests that step
-          // on each other.
-          await client?.getHistoryStanza(chatJID, max, lastMsgId);
-        } finally {
-          setIsLoadingMore(false);
-        }
-      },
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      [client?.client?.jid, isLoadingMore, reduxStore],
+      (
+        chatJID: string,
+        max: number,
+        idOfMessageBefore?: number
+      ): Promise<void> =>
+        loadRoomHistory({
+          client,
+          room: store.getState().rooms.rooms?.[chatJID],
+          inFlight: inFlightRoomsRef.current,
+          chatJID,
+          max,
+          before: idOfMessageBefore,
+          onBusyChange: setIsLoadingMore,
+        }),
+      [client]
     );
 
     const onCloseEdit = () => {
@@ -349,6 +363,26 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
       (configWithEventHandlers || storeConfig || {}) as IConfig,
     );
 
+    // A join for the requested room is still in flight: the server registers
+    // the membership a moment after our presence, so say "joining" with a
+    // loader instead of the "choose a chat" placeholder (or the empty-list
+    // new-chat screen). Bounded: useRoomInitialization clears the flag when
+    // the join and the room-list refresh settle, even if the room never shows.
+    if (isJoiningRoom(
+        activeRoomJID,
+        activeRoom && activeRoomJID ? { [activeRoomJID]: true } : undefined,
+        joiningRoomJID
+      )) {
+      return (
+        <View
+          testID="chat-room-joining-loader"
+          style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
+        >
+          <Loader color={configWithEventHandlers?.colors?.primary} />
+        </View>
+      );
+    }
+
     if (!hasRooms && !loading && !globalLoading) {
       return (
         <NonRoomChat>
@@ -582,6 +616,7 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
               />
             ) : (
               <MessageList
+                client={client}
                 loadMoreMessages={loadMoreMessages}
                 CustomMessage={CustomMessageComponent}
                 CustomDaySeparator={CustomDaySeparator}
@@ -594,6 +629,8 @@ const ChatRoom: React.FC<ChatRoomProps> = React.memo(
                 onReadBoundaryChange={handleReadBoundaryChange}
               />
             )}
+            {/* A search hit that is older than the chat's own history. */}
+            <ArchivedMessageCard roomJID={activeRoomJID} />
           </View>
           {editAction && editAction.isEdit && (
             <EditWrapper text={editAction.text || ''} onClose={onCloseEdit} />

package/src/components/MainComponents/ChatWrapper.tsx

@@ -45,6 +45,7 @@ import {normalizeRoomJid} from '../../helpers/normalizeRoomJid';
 import {buildSeedRoom} from '../../helpers/buildSeedRoom';
 import {shallowEqual} from '../../helpers/shallowEqual';
 import {InteractionsOverlayProvider} from '../MessageBubble/InteractionsOverlay';
+import {useJumpThread} from '../../helpers/jumpThread';
 
 interface ChatWrapperProps {
   token?: string;
@@ -123,10 +124,28 @@ const ChatWrapper: FC<ChatWrapperProps> = ({
     activeRoomJID ? state.rooms.rooms[activeRoomJID]?.messages : undefined,
   );
 
-  const activeMessage = useMemo(
-    () => activeRoomMessages?.find(message => message?.activeMessage),
-    [activeRoomMessages],
-  );
+  // The thread's parent: the live message flagged active or, when the thread
+  // was opened on a message that exists only in a jump window (or that a jump
+  // to a thread reply fetched), the window's copy or the one kept by
+  // helpers/jumpThread, which outlives the window. Reads the active room's
+  // message list (granular), not the whole rooms map.
+  const jumpWindow = useSelector((state: RootState) => state.rooms.jumpWindow);
+  const jumpThread = useJumpThread();
+  const activeMessage = useMemo(() => {
+    if (!activeRoomJID) {return undefined;}
+    const live = activeRoomMessages?.find(message => message?.activeMessage);
+    if (live) {return live;}
+    if (jumpWindow && jumpWindow.roomJID === activeRoomJID) {
+      const inWindow = jumpWindow.messages.find(
+        message => message?.activeMessage,
+      );
+      if (inWindow) {return inWindow;}
+    }
+    if (jumpThread?.parent && jumpThread.roomJID === activeRoomJID) {
+      return {...jumpThread.parent, activeMessage: true};
+    }
+    return undefined;
+  }, [activeRoomMessages, activeRoomJID, jumpWindow, jumpThread]);
 
   const handleChangeChat = (chat: IRoom) => {
     dispatch(setCurrentRoom({roomJID: chat.jid}));

package/src/components/MainComponents/MediaMessage.tsx

@@ -189,6 +189,20 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
         originalName: (message as any)?.originalName,
       }
     );
+    // The sender's own voice note plays from its local file while it
+    // uploads, waveform and all — no placeholder card in between.
+    if (message?.pending && isAudioPayload && (messageText || location)) {
+      return (
+        <AudioMessage
+          src={messageText || location || ''}
+          mimeType={mimeType}
+          fileName={displayName}
+          duration={(message as any)?.duration}
+          waveForm={(message as any)?.waveForm}
+          isUser={isUser}
+        />
+      );
+    }
     if (message?.pending) {
       return (
         <PendingMediaMessage
@@ -237,6 +251,7 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
             originalName={(message as any)?.originalName}
             duration={(message as any)?.duration}
             waveForm={(message as any)?.waveForm}
+            isUser={isUser}
           />
         );
       }
@@ -249,6 +264,7 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
             originalName={(message as any)?.originalName}
             duration={(message as any)?.duration}
             waveForm={(message as any)?.waveForm}
+            isUser={isUser}
           />
         );
       }
@@ -270,6 +286,7 @@ const MediaMessage: React.FC<MediaMessageProps> = ({
               originalName={(message as any)?.originalName}
               duration={(message as any)?.duration}
               waveForm={(message as any)?.waveForm}
+              isUser={isUser}
             />
           );
         }