@ethora/chat-component-rn 26.9.1 → 26.10.0

package/src/components/Modals/MessageSearchModal/snippet.ts

@@ -0,0 +1,58 @@
+export interface SnippetPart {
+  text: string;
+  match: boolean;
+}
+
+const CONTEXT_BEFORE = 36;
+const MAX_LENGTH = 150;
+
+/**
+ * The part of a message worth showing for a hit: a window around the first
+ * match, cut on word boundaries with ellipses, split into matching and
+ * non-matching runs so the caller can emphasise the match.
+ *
+ * Plain substring, case-insensitive, like the server's default mode. The
+ * query is never used as a regular expression, so `.` or `(` in it are just
+ * characters.
+ */
+export function buildSnippet(body: string, query: string): SnippetPart[] {
+  const text = String(body || '')
+    .replace(/\s+/g, ' ')
+    .trim();
+  const needle = String(query || '')
+    .trim()
+    .toLowerCase();
+  if (!text) return [];
+
+  const at = needle ? text.toLowerCase().indexOf(needle) : -1;
+
+  let start = 0;
+  if (at > CONTEXT_BEFORE) {
+    start = at - CONTEXT_BEFORE;
+    const space = text.indexOf(' ', start);
+    if (space !== -1 && space < at) start = space + 1;
+  }
+  let end = Math.min(text.length, start + MAX_LENGTH);
+  if (end < text.length) {
+    const space = text.lastIndexOf(' ', end);
+    if (space > start + MAX_LENGTH / 2 && space > at + needle.length)
+      end = space;
+  }
+
+  const prefix = start > 0 ? '…' : '';
+  const suffix = end < text.length ? '…' : '';
+  const slice = text.slice(start, end);
+
+  if (at === -1 || at < start || at + needle.length > end) {
+    return [{ text: `${prefix}${slice}${suffix}`, match: false }];
+  }
+
+  const from = at - start;
+  const parts: SnippetPart[] = [];
+  if (prefix || from > 0)
+    parts.push({ text: `${prefix}${slice.slice(0, from)}`, match: false });
+  parts.push({ text: slice.slice(from, from + needle.length), match: true });
+  const rest = slice.slice(from + needle.length);
+  if (rest || suffix) parts.push({ text: `${rest}${suffix}`, match: false });
+  return parts;
+}

package/src/components/Modals/MessageSearchModal/useMessageSearch.ts

@@ -0,0 +1,151 @@
+import { useCallback, useEffect, useReducer, useRef } from 'react';
+import { SearchFilters } from './searchFilters';
+import {
+  hitKey,
+  MESSAGE_SEARCH_PAGE_SIZE,
+  MessageSearchHit,
+  searchMessages,
+} from '../../../networking/api-requests/messageSearch.api';
+
+export const MIN_QUERY_LENGTH = 2;
+const DEBOUNCE_MS = 300;
+
+export type SearchScope = 'chat' | 'all';
+
+interface State {
+  status: 'idle' | 'loading' | 'loadingMore' | 'done' | 'error';
+  items: MessageSearchHit[];
+  total: number;
+  /** Server rows consumed so far: the offset of the next page. */
+  nextOffset: number;
+}
+
+type Action =
+  | { type: 'reset' }
+  | { type: 'start' }
+  | { type: 'startMore' }
+  | {
+      type: 'page';
+      items: MessageSearchHit[];
+      total: number;
+      nextOffset: number;
+      append: boolean;
+    }
+  | { type: 'fail' };
+
+const initial: State = { status: 'idle', items: [], total: 0, nextOffset: 0 };
+
+const keyOf = hitKey;
+
+const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case 'reset':
+      return initial;
+    case 'start':
+      return { ...state, status: 'loading' };
+    case 'startMore':
+      return { ...state, status: 'loadingMore' };
+    case 'page': {
+      const seen = new Set(action.append ? state.items.map(keyOf) : []);
+      const fresh = action.items.filter((hit) => !seen.has(keyOf(hit)));
+      return {
+        status: 'done',
+        total: action.total,
+        nextOffset: action.nextOffset,
+        items: action.append ? [...state.items, ...fresh] : fresh,
+      };
+    }
+    case 'fail':
+      return { ...state, status: 'error' };
+    default:
+      return state;
+  }
+};
+
+/**
+ * Debounced, cancellable message search with paging.
+ *
+ * A newer query (or scope) aborts the request in flight, and a response that
+ * arrives after it was superseded is dropped, so a slow answer to "he" can
+ * never overwrite the results for "hello".
+ */
+export function useMessageSearch(
+  query: string,
+  scope: SearchScope,
+  roomName?: string,
+  filters: SearchFilters = {}
+) {
+  const [state, dispatch] = useReducer(reducer, initial);
+  const abortRef = useRef<AbortController | null>(null);
+  const requestRef = useRef(0);
+  const trimmed = query.trim();
+  const { fromUserId, since, until } = filters;
+  const chatId = scope === 'chat' ? roomName : undefined;
+  const searchable =
+    trimmed.length >= MIN_QUERY_LENGTH &&
+    (scope === 'all' || Boolean(roomName));
+
+  const run = useCallback(
+    async (offset: number) => {
+      abortRef.current?.abort();
+      const controller = new AbortController();
+      abortRef.current = controller;
+      const id = ++requestRef.current;
+      dispatch({ type: offset ? 'startMore' : 'start' });
+      try {
+        const page = await searchMessages({
+          q: trimmed,
+          chatId,
+          fromUserId,
+          since,
+          until,
+          offset,
+          limit: MESSAGE_SEARCH_PAGE_SIZE,
+          signal: controller.signal,
+        });
+        if (id !== requestRef.current) return;
+        dispatch({
+          type: 'page',
+          items: page.items,
+          total: page.total,
+          nextOffset: page.nextOffset,
+          append: offset > 0,
+        });
+      } catch {
+        if (id !== requestRef.current || controller.signal.aborted) return;
+        dispatch({ type: 'fail' });
+      }
+    },
+    [trimmed, chatId, fromUserId, since, until]
+  );
+
+  useEffect(() => {
+    abortRef.current?.abort();
+    if (!searchable) {
+      requestRef.current += 1;
+      dispatch({ type: 'reset' });
+      return;
+    }
+    const timer = setTimeout(() => {
+      run(0);
+    }, DEBOUNCE_MS);
+    return () => clearTimeout(timer);
+  }, [searchable, run]);
+
+  useEffect(() => () => abortRef.current?.abort(), []);
+
+  const loadMore = useCallback(() => {
+    if (state.status !== 'done' || state.nextOffset >= state.total) return;
+    run(state.nextOffset);
+  }, [run, state.status, state.nextOffset, state.total]);
+
+  return {
+    ...state,
+    searchable,
+    hasMore: state.nextOffset < state.total,
+    loadMore,
+    retry: () => {
+      run(0);
+    },
+  };
+}

package/src/components/Modals/PublicChatsModal/PublicChatsModal.tsx

@@ -0,0 +1,288 @@
+/** @format */
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  ActivityIndicator,
+  FlatList,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+import { RootState } from '../../../roomStore';
+import { setCurrentRoom } from '../../../roomStore/roomsSlice';
+import { setActiveModal } from '../../../roomStore/chatSettingsSlice';
+import {
+  getPublicChats,
+  PublicChat,
+} from '../../../networking/api-requests/publicChats.api';
+import { ModalContainerFullScreen } from '../styledModalComponents';
+import ModalHeaderComponent from '../ModalHeaderComponent';
+import { ProfileImagePlaceholder } from '../../MainComponents/ProfileImagePlaceholder';
+import { SearchIcon } from '../../../assets/icons';
+import { useT } from '../../../i18n/useT';
+import { useTheme } from '../../../hooks/useTheme';
+import { useFileToken } from '../../../hooks/useFileToken';
+import { appendFileToken } from '../../../helpers/secureFileUrl';
+import { getIconColor } from '../../../helpers/getIconColor';
+import { useChatSettingState } from '../../../hooks/useChatSettingState';
+import type { ChatTheme } from '../../../theme/theme';
+import { filterPublicChats, publicChatJid } from './publicChatsLogic';
+
+interface PublicChatsModalProps {
+  handleCloseModal: () => void;
+}
+
+/**
+ * A directory of the app's public chats (GET /v1/chats/public), so finding a
+ * chat to join no longer needs someone to hand over a link or a QR code.
+ *
+ * Joining reuses what a shared link or QR code already does: selecting a room
+ * you are not in makes the room initialiser join it and refresh the room
+ * list, and ChatRoom shows a loader meanwhile (see joiningRoomJID).
+ */
+const PublicChatsModal: React.FC<PublicChatsModalProps> = ({
+  handleCloseModal,
+}) => {
+  const t = useT();
+  const dispatch = useDispatch();
+  const theme = useTheme();
+  const fileToken = useFileToken();
+  const { config } = useChatSettingState();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+  const primary = getIconColor(config);
+
+  const rooms = useSelector((state: RootState) => state.rooms.rooms);
+  const conference = useSelector(
+    (state: RootState) =>
+      state.chatSettingStore.config?.xmppSettings?.conference
+  );
+
+  const [items, setItems] = useState<PublicChat[]>([]);
+  const [total, setTotal] = useState(0);
+  const [nextOffset, setNextOffset] = useState(0);
+  const [status, setStatus] = useState<
+    'loading' | 'loadingMore' | 'done' | 'error'
+  >('loading');
+  const [filter, setFilter] = useState('');
+  const requestRef = useRef(0);
+
+  const load = useCallback(async (offset: number) => {
+    const id = ++requestRef.current;
+    setStatus(offset ? 'loadingMore' : 'loading');
+    try {
+      const page = await getPublicChats({ offset });
+      if (id !== requestRef.current) {return;}
+      setItems((prev) => {
+        const seen = new Set(prev.map((chat) => chat.name));
+        return offset
+          ? [...prev, ...page.items.filter((c) => !seen.has(c.name))]
+          : page.items;
+      });
+      setTotal(page.total);
+      setNextOffset(page.nextOffset);
+      setStatus('done');
+    } catch {
+      if (id === requestRef.current) {setStatus('error');}
+    }
+  }, []);
+
+  useEffect(() => {
+    load(0);
+    return () => {
+      requestRef.current += 1;
+    };
+  }, [load]);
+
+  const joined = useMemo(
+    () => new Set(Object.keys(rooms).map((jid) => jid.split('@')[0])),
+    [rooms]
+  );
+  const visible = useMemo(() => filterPublicChats(items, filter), [items, filter]);
+
+  const open = (chat: PublicChat) => {
+    const roomJID = publicChatJid(chat, conference);
+    if (!roomJID) {return;}
+    dispatch(setCurrentRoom({ roomJID }));
+    dispatch(setActiveModal(undefined));
+  };
+
+  const hasMore = nextOffset < total;
+  const idle = status !== 'loading' && status !== 'error';
+
+  const renderItem = ({ item: chat }: { item: PublicChat }) => {
+    const isJoined = joined.has(chat.name);
+    return (
+      <View style={styles.row}>
+        <ProfileImagePlaceholder
+          name={chat.title || chat.name}
+          icon={chat.picture ? appendFileToken(chat.picture, fileToken) : null}
+          size={40}
+        />
+        <View style={styles.text}>
+          <Text style={styles.title} numberOfLines={1}>
+            {chat.title || t('search.messages.chat')}
+          </Text>
+          {!!chat.description && (
+            <Text style={styles.description} numberOfLines={2}>
+              {chat.description}
+            </Text>
+          )}
+        </View>
+        <TouchableOpacity
+          testID={`public-chat-${chat.name}`}
+          onPress={() => open(chat)}
+          style={[
+            styles.action,
+            isJoined
+              ? { borderColor: theme.border }
+              : { backgroundColor: primary, borderColor: primary },
+          ]}
+        >
+          <Text
+            style={[
+              styles.actionLabel,
+              { color: isJoined ? theme.textSecondary : theme.textOnPrimary },
+            ]}
+          >
+            {t(isJoined ? 'publicChats.open' : 'publicChats.join')}
+          </Text>
+        </TouchableOpacity>
+      </View>
+    );
+  };
+
+  const header = (
+    <View style={styles.controls}>
+      <View style={styles.searchBar}>
+        <SearchIcon color={theme.textMuted} />
+        <TextInput
+          testID="public-chats-filter"
+          value={filter}
+          onChangeText={setFilter}
+          placeholder={t('publicChats.filter')}
+          placeholderTextColor={theme.textMuted}
+          style={styles.searchInput}
+          autoCorrect={false}
+          accessibilityLabel={t('publicChats.filter')}
+        />
+      </View>
+      {status === 'loading' && (
+        <View testID="public-chats-loading" style={styles.statusRow}>
+          <ActivityIndicator color={primary} />
+          <Text style={styles.hint}>{t('publicChats.loading')}</Text>
+        </View>
+      )}
+      {status === 'error' && (
+        <View style={styles.statusRow}>
+          <Text testID="public-chats-error" style={styles.error}>
+            {t('publicChats.error')}
+          </Text>
+          <TouchableOpacity
+            testID="public-chats-retry"
+            onPress={() => load(nextOffset)}
+          >
+            <Text style={[styles.link, { color: primary }]}>
+              {t('search.messages.retry')}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      )}
+      {idle && visible.length === 0 && (
+        <Text testID="public-chats-empty" style={styles.hint}>
+          {filter.trim() && hasMore
+            ? t('publicChats.emptyFilterMore')
+            : t('publicChats.empty')}
+        </Text>
+      )}
+    </View>
+  );
+
+  return (
+    <ModalContainerFullScreen style={styles.screen}>
+      <ModalHeaderComponent
+        handleCloseModal={handleCloseModal}
+        headerTitle={t('publicChats.title')}
+      />
+      <FlatList
+        style={styles.list}
+        data={visible}
+        keyExtractor={(chat) => chat.name}
+        renderItem={renderItem}
+        ListHeaderComponent={header}
+        ListFooterComponent={
+          hasMore && idle ? (
+            <TouchableOpacity
+              testID="public-chats-more"
+              onPress={() => load(nextOffset)}
+              disabled={status === 'loadingMore'}
+              style={[styles.more, status === 'loadingMore' && styles.dim]}
+            >
+              <Text style={styles.moreLabel}>
+                {status === 'loadingMore'
+                  ? t('search.messages.searching')
+                  : t('search.messages.loadMore')}
+              </Text>
+            </TouchableOpacity>
+          ) : null
+        }
+        keyboardShouldPersistTaps="handled"
+      />
+    </ModalContainerFullScreen>
+  );
+};
+
+const createStyles = (theme: ChatTheme) =>
+  StyleSheet.create({
+    screen: { alignItems: 'stretch' },
+    list: { flex: 1, alignSelf: 'stretch' },
+    controls: { padding: 16, gap: 12 },
+    searchBar: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+      paddingHorizontal: 12,
+      height: 44,
+      borderRadius: 12,
+      backgroundColor: theme.surfaceSecondary,
+    },
+    searchInput: { flex: 1, color: theme.text, fontSize: 16, padding: 0 },
+    statusRow: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+    hint: { color: theme.textMuted, fontSize: 14 },
+    error: { color: theme.danger, fontSize: 14 },
+    link: { fontSize: 14, fontWeight: '500' },
+    row: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      paddingHorizontal: 16,
+      paddingVertical: 8,
+    },
+    text: { flex: 1, gap: 2 },
+    title: { color: theme.text, fontSize: 16, fontWeight: '600' },
+    description: { color: theme.textSecondary, fontSize: 13 },
+    action: {
+      minWidth: 64,
+      alignItems: 'center',
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+      borderRadius: 999,
+      borderWidth: 1,
+    },
+    actionLabel: { fontSize: 14, fontWeight: '500' },
+    more: {
+      alignSelf: 'center',
+      marginVertical: 12,
+      paddingHorizontal: 14,
+      paddingVertical: 6,
+      borderRadius: 999,
+      borderWidth: 1,
+      borderColor: theme.border,
+    },
+    moreLabel: { color: theme.textSecondary, fontSize: 14, fontWeight: '500' },
+    dim: { opacity: 0.6 },
+  });
+
+export default PublicChatsModal;

package/src/components/Modals/PublicChatsModal/publicChatsLogic.ts

@@ -0,0 +1,36 @@
+import type { PublicChat } from '../../../networking/api-requests/publicChats.api';
+import { normalizeRoomJid } from '../../../helpers/normalizeRoomJid';
+
+/**
+ * The directory API has no search parameter (q, search and title are all
+ * rejected), so the filter box narrows what has loaded so far.
+ */
+export const filterPublicChats = (
+  items: PublicChat[],
+  filter: string
+): PublicChat[] => {
+  const needle = filter.trim().toLowerCase();
+  if (!needle) {return items;}
+  return items.filter(
+    (chat) =>
+      chat.title.toLowerCase().includes(needle) ||
+      chat.description.toLowerCase().includes(needle)
+  );
+};
+
+/**
+ * The JID to select to join a directory chat. Without a conference domain
+ * there is no correct JID to build (the same rule chatAutoEnterer follows for
+ * a shared link), so there is nothing to open.
+ */
+export const publicChatJid = (
+  chat: Pick<PublicChat, 'name'>,
+  conference?: string
+): string | undefined => {
+  const domain = (conference || '').trim();
+  if (!domain || !chat.name) {return undefined;}
+  return normalizeRoomJid(chat.name, domain);
+};
+
+export const initialOf = (chat: Pick<PublicChat, 'title' | 'name'>): string =>
+  (chat.title || chat.name).trim().charAt(0).toUpperCase() || '#';

package/src/components/Modals/SelectUsersModal/SelectUsersModal.tsx

@@ -16,6 +16,7 @@ import Loader from '../../styled/Loader';
 import { postAddRoomMember } from '../../../networking/api-requests/rooms.api';
 import { useToast } from '../../../context/ToastContext';
 import { updateRoom } from '../../../roomStore/roomsSlice';
+import { getRoomUserCount } from '../../../helpers/roomUserCount';
 
 interface SelectUsersModalProps {
   /** Render the opener yourself (the chat profile uses an "Add Members"
@@ -58,7 +59,13 @@ const SelectUsersModal: React.FC<SelectUsersModalProps> = ({ trigger }) => {
           jid: activeRoom?.jid || '',
           updates: {
             members: [...newMembers, ...activeRoom?.members || []],
-            usersCnt: (activeRoom?.members?.length || 0) + newMembers.length,
+            // the profile screen lists roomMembers, keep it in step
+            ...(activeRoom?.roomMembers
+              ? { roomMembers: [...newMembers, ...activeRoom.roomMembers] }
+              : {}),
+            // add to the room's real total: members[] can be a truncated
+            // page of a big room
+            usersCnt: getRoomUserCount(activeRoom) + newMembers.length,
           },
         })
       );

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',
                 }}