@ethora/chat-component-rn 26.9.0 → 26.10.0

package/src/components/Modals/MessageSearchModal/MessageSearchModal.tsx

@@ -0,0 +1,487 @@
+/** @format */
+
+import React, { 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 { ModalContainerFullScreen } from '../styledModalComponents';
+import ModalHeaderComponent from '../ModalHeaderComponent';
+import { SearchIcon } from '../../../assets/icons';
+import { useT } from '../../../i18n/useT';
+import { useTheme } from '../../../hooks/useTheme';
+import { getIconColor } from '../../../helpers/getIconColor';
+import { useChatSettingState } from '../../../hooks/useChatSettingState';
+import { dedupeMembers } from '../../../helpers/dedupeMembers';
+import { isRoomMembersTruncated } from '../../../helpers/roomUserCount';
+import { useRoomDirectory } from '../../../hooks/useRoomDirectory';
+import { isMessageSearchEnabled } from '../../../helpers/isMessageSearchEnabled';
+import type { ChatTheme } from '../../../theme/theme';
+import {
+  hitKey,
+  MessageSearchHit,
+} from '../../../networking/api-requests/messageSearch.api';
+import {
+  HitSeparator,
+  MessageHitRow,
+  SecondaryPillButton,
+} from './MessageHitResults';
+import {
+  dayEndISO,
+  dayStartISO,
+  isBackwardsRange,
+  isValidDay,
+  matchPeople,
+} from './searchFilters';
+import {
+  MIN_QUERY_LENGTH,
+  SearchScope,
+  useMessageSearch,
+} from './useMessageSearch';
+import { openSearchHit } from './openHit';
+
+interface MessageSearchModalProps {
+  handleCloseModal: () => void;
+}
+
+const MessageSearchModalContent: React.FC<MessageSearchModalProps> = ({
+  handleCloseModal,
+}) => {
+  const t = useT();
+  const dispatch = useDispatch();
+  const theme = useTheme();
+  const { config } = useChatSettingState();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+  const primary = getIconColor(config);
+  const inputRef = useRef<TextInput>(null);
+
+  const rooms = useSelector((state: RootState) => state.rooms.rooms);
+  const activeRoomJID = useSelector(
+    (state: RootState) => state.rooms.activeRoomJID
+  );
+  const usersSet = useSelector((state: RootState) => state.rooms.usersSet);
+
+  const [query, setQuery] = useState('');
+  const roomName = activeRoomJID ? activeRoomJID.split('@')[0] : undefined;
+  const [scope, setScope] = useState<SearchScope>(
+    activeRoomJID ? 'chat' : 'all'
+  );
+
+  const [filtersOpen, setFiltersOpen] = useState(false);
+  const [sinceDay, setSinceDay] = useState('');
+  const [untilDay, setUntilDay] = useState('');
+  const [sender, setSender] = useState<{ id: string; name: string } | null>(
+    null
+  );
+  const [senderQuery, setSenderQuery] = useState('');
+
+  const backwards = isBackwardsRange(sinceDay, untilDay);
+  // Memoised: the hook keys its request on these, and a fresh object per
+  // render must not look like a changed filter.
+  const filters = useMemo(
+    () => ({
+      fromUserId: sender?.id,
+      since: backwards ? undefined : dayStartISO(sinceDay),
+      until: backwards ? undefined : dayEndISO(untilDay),
+    }),
+    [sender?.id, sinceDay, untilDay, backwards]
+  );
+  const activeFilterCount =
+    (sender ? 1 : 0) +
+    (isValidDay(sinceDay) ? 1 : 0) +
+    (isValidDay(untilDay) ? 1 : 0);
+  const clearFilters = () => {
+    setSender(null);
+    setSenderQuery('');
+    setSinceDay('');
+    setUntilDay('');
+  };
+
+  // Who can be picked as the sender: this room's members, or everyone the
+  // app knows when searching across chats. Members carry `_id`, the user id
+  // the search endpoint filters on.
+  // A big room only carries its first members (usersCnt is the true total),
+  // so in 'This chat' scope the sender filter loads the whole room directory
+  // (once per room) as soon as the filters open or a sender is typed.
+  const searchedRoom: any = activeRoomJID ? rooms[activeRoomJID] : undefined;
+  const { members: directoryMembers } = useRoomDirectory(
+    activeRoomJID || undefined,
+    scope === 'chat' &&
+      isRoomMembersTruncated(searchedRoom) &&
+      (filtersOpen || senderQuery.trim() !== '')
+  );
+  const senderCandidates = useMemo(() => {
+    if (!senderQuery.trim()) {return [];}
+    let people: any[];
+    if (scope === 'chat') {
+      const known = (searchedRoom?.members as any[]) || [];
+      people =
+        directoryMembers.length > 0
+          ? dedupeMembers([...known, ...directoryMembers])
+          : known;
+    } else {
+      people = Object.values(usersSet || {});
+    }
+    return matchPeople(people, senderQuery);
+  }, [senderQuery, scope, searchedRoom, usersSet, directoryMembers]);
+
+  // A backwards range has no honest result, so it searches nothing (and says
+  // so) instead of quietly dropping the dates.
+  const search = useMessageSearch(
+    backwards ? '' : query,
+    scope,
+    roomName,
+    filters
+  );
+
+  // The field takes focus as the screen opens (autoFocus alone is skipped on
+  // some Android versions when the screen mounts inside an overlay).
+  useEffect(() => {
+    const timer = setTimeout(() => inputRef.current?.focus(), 50);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const trimmed = query.trim();
+
+  const renderHit = ({ item: hit }: { item: MessageSearchHit }) => (
+    <MessageHitRow
+      hit={hit}
+      query={trimmed}
+      showRoom={scope === 'all'}
+      onOpen={(h) => openSearchHit(dispatch as any, rooms, activeRoomJID, h)}
+    />
+  );
+
+  const header = (
+    <View style={styles.controls}>
+      <View style={styles.searchBar}>
+        <SearchIcon color={theme.textMuted} />
+        <TextInput
+          ref={inputRef}
+          testID="message-search-input"
+          autoFocus
+          value={query}
+          onChangeText={setQuery}
+          placeholder={t(
+            scope === 'chat'
+              ? 'search.messages.placeholderChat'
+              : 'search.messages.placeholderAll'
+          )}
+          placeholderTextColor={theme.textMuted}
+          style={styles.searchInput}
+          returnKeyType="search"
+          autoCorrect={false}
+          accessibilityLabel={t('search.messages.title')}
+        />
+      </View>
+
+      <View style={styles.scopeRow} accessibilityLabel={t('search.messages.scope')}>
+        {(['chat', 'all'] as SearchScope[]).map((value) => {
+          const active = scope === value;
+          const disabled = value === 'chat' && !roomName;
+          return (
+            <TouchableOpacity
+              key={value}
+              testID={`message-search-scope-${value}`}
+              disabled={disabled}
+              onPress={() => setScope(value)}
+              accessibilityState={{ selected: active, disabled }}
+              style={[
+                styles.scopeButton,
+                active && { borderColor: primary, backgroundColor: primary + '1F' },
+                disabled && styles.hitDisabled,
+              ]}
+            >
+              <Text style={[styles.scopeLabel, active && { color: primary }]}>
+                {t(
+                  value === 'chat'
+                    ? 'search.messages.scopeChat'
+                    : 'search.messages.scopeAll'
+                )}
+              </Text>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+
+      <TouchableOpacity
+        testID="message-search-filters-toggle"
+        onPress={() => setFiltersOpen((open) => !open)}
+        style={styles.filterToggle}
+        accessibilityState={{ expanded: filtersOpen }}
+      >
+        <Text
+          style={[
+            styles.filterToggleLabel,
+            (filtersOpen || activeFilterCount > 0) && { color: primary },
+          ]}
+        >
+          {t('search.messages.filters')}
+        </Text>
+        {activeFilterCount > 0 && (
+          <View style={[styles.badge, { backgroundColor: primary }]}>
+            <Text style={styles.badgeText}>{activeFilterCount}</Text>
+          </View>
+        )}
+      </TouchableOpacity>
+
+      {filtersOpen && (
+        <View style={styles.filterBox}>
+          <Text style={styles.fieldLabel}>
+            {t('search.messages.filterSender')}
+          </Text>
+          {sender ? (
+            <View style={styles.chip}>
+              <Text style={styles.chipText}>{sender.name}</Text>
+              <TouchableOpacity
+                testID="message-search-sender-clear"
+                accessibilityLabel={t('search.messages.filterClear')}
+                onPress={() => setSender(null)}
+                hitSlop={8}
+              >
+                <Text style={styles.chipRemove}>{'×'}</Text>
+              </TouchableOpacity>
+            </View>
+          ) : (
+            <TextInput
+              testID="message-search-sender-input"
+              value={senderQuery}
+              onChangeText={setSenderQuery}
+              placeholder={t('search.messages.filterSenderPlaceholder')}
+              placeholderTextColor={theme.textMuted}
+              style={styles.field}
+              autoCorrect={false}
+            />
+          )}
+          {!sender &&
+            senderCandidates.map((person) => (
+              <TouchableOpacity
+                key={person.id}
+                testID={`message-search-sender-${person.id}`}
+                style={styles.suggestion}
+                onPress={() => {
+                  setSender(person);
+                  setSenderQuery('');
+                }}
+              >
+                <Text style={styles.suggestionText}>{person.name}</Text>
+              </TouchableOpacity>
+            ))}
+          <View style={styles.dateRow}>
+            <View style={styles.dateCol}>
+              <Text style={styles.fieldLabel}>
+                {t('search.messages.filterSince')}
+              </Text>
+              <TextInput
+                testID="message-search-since"
+                value={sinceDay}
+                onChangeText={setSinceDay}
+                placeholder="YYYY-MM-DD"
+                placeholderTextColor={theme.textMuted}
+                style={styles.field}
+                keyboardType="numbers-and-punctuation"
+                maxLength={10}
+              />
+            </View>
+            <View style={styles.dateCol}>
+              <Text style={styles.fieldLabel}>
+                {t('search.messages.filterUntil')}
+              </Text>
+              <TextInput
+                testID="message-search-until"
+                value={untilDay}
+                onChangeText={setUntilDay}
+                placeholder="YYYY-MM-DD"
+                placeholderTextColor={theme.textMuted}
+                style={styles.field}
+                keyboardType="numbers-and-punctuation"
+                maxLength={10}
+              />
+            </View>
+          </View>
+          {backwards && (
+            <Text testID="message-search-date-order" style={styles.error}>
+              {t('search.messages.dateOrder')}
+            </Text>
+          )}
+          {activeFilterCount > 0 && (
+            <TouchableOpacity
+              testID="message-search-clear-filters"
+              onPress={clearFilters}
+            >
+              <Text style={[styles.link, { color: primary }]}>
+                {t('search.messages.filterClearAll')}
+              </Text>
+            </TouchableOpacity>
+          )}
+        </View>
+      )}
+
+      {!search.searchable && (
+        <Text testID="message-search-hint" style={styles.hint}>
+          {trimmed
+            ? t('search.messages.tooShort', { count: MIN_QUERY_LENGTH })
+            : t('search.messages.hint')}
+        </Text>
+      )}
+      {search.searchable && search.status === 'loading' && (
+        <View style={styles.statusRow}>
+          <ActivityIndicator color={primary} />
+          <Text style={styles.hint}>{t('search.messages.searching')}</Text>
+        </View>
+      )}
+      {search.status === 'error' && (
+        <View style={styles.statusRow}>
+          <Text testID="message-search-error" style={styles.error}>
+            {t('search.messages.error')}
+          </Text>
+          <TouchableOpacity testID="message-search-retry" onPress={search.retry}>
+            <Text style={[styles.link, { color: primary }]}>
+              {t('search.messages.retry')}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      )}
+      {search.searchable &&
+        search.status === 'done' &&
+        search.items.length === 0 && (
+          <Text testID="message-search-empty" style={styles.hint}>
+            {t('search.messages.empty')}
+          </Text>
+        )}
+      {search.items.length > 0 && (
+        <Text testID="message-search-count" style={styles.count}>
+          {t('search.messages.count', { count: search.total })}
+        </Text>
+      )}
+    </View>
+  );
+
+  return (
+    <ModalContainerFullScreen style={styles.screen}>
+      <ModalHeaderComponent
+        handleCloseModal={handleCloseModal}
+        headerTitle={t('search.messages.title')}
+      />
+      <FlatList
+        style={styles.list}
+        data={search.items}
+        keyExtractor={hitKey}
+        renderItem={renderHit}
+        ListHeaderComponent={header}
+        ListFooterComponent={
+          search.items.length > 0 && search.hasMore ? (
+            <SecondaryPillButton
+              testID="message-search-more"
+              onPress={search.loadMore}
+              disabled={search.status === 'loadingMore'}
+              label={
+                search.status === 'loadingMore'
+                  ? t('search.messages.searching')
+                  : t('search.messages.loadMore')
+              }
+            />
+          ) : null
+        }
+        keyboardShouldPersistTaps="handled"
+        ItemSeparatorComponent={HitSeparator}
+      />
+    </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 },
+    scopeRow: { flexDirection: 'row', gap: 8 },
+    scopeButton: {
+      flex: 1,
+      height: 34,
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderRadius: 999,
+      borderWidth: 1,
+      borderColor: theme.border,
+    },
+    scopeLabel: { color: theme.textSecondary, fontSize: 14, fontWeight: '500' },
+    filterToggle: { flexDirection: 'row', alignItems: 'center', gap: 6 },
+    filterToggleLabel: { color: theme.textSecondary, fontSize: 14 },
+    badge: {
+      minWidth: 18,
+      paddingHorizontal: 5,
+      borderRadius: 9,
+      alignItems: 'center',
+    },
+    badgeText: { color: theme.textOnPrimary, fontSize: 12 },
+    filterBox: {
+      gap: 8,
+      padding: 12,
+      borderRadius: 12,
+      borderWidth: 1,
+      borderColor: theme.border,
+    },
+    fieldLabel: { color: theme.textMuted, fontSize: 12 },
+    field: {
+      height: 38,
+      paddingHorizontal: 10,
+      borderRadius: 8,
+      backgroundColor: theme.surfaceSecondary,
+      color: theme.text,
+      fontSize: 14,
+    },
+    chip: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      alignSelf: 'flex-start',
+      gap: 8,
+      paddingHorizontal: 10,
+      paddingVertical: 6,
+      borderRadius: 999,
+      backgroundColor: theme.surfaceSecondary,
+    },
+    chipText: { color: theme.text, fontSize: 14 },
+    chipRemove: { color: theme.textSecondary, fontSize: 18 },
+    suggestion: { paddingVertical: 8, paddingHorizontal: 4 },
+    suggestionText: { color: theme.text, fontSize: 14 },
+    dateRow: { flexDirection: 'row', gap: 8 },
+    dateCol: { flex: 1, gap: 4 },
+    hint: { color: theme.textMuted, fontSize: 14 },
+    statusRow: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+    error: { color: theme.danger, fontSize: 14 },
+    link: { fontSize: 14, fontWeight: '500' },
+    count: { color: theme.textMuted, fontSize: 12 },
+    hitDisabled: { opacity: 0.5 },
+  });
+
+/**
+ * Gate for the modal registry: with search off (the default) nothing renders
+ * and the search hook never mounts, so no request can be made.
+ */
+const MessageSearchModal: React.FC<MessageSearchModalProps> = (props) => {
+  const { config } = useChatSettingState();
+  if (!isMessageSearchEnabled(config)) {
+    return null;
+  }
+  return <MessageSearchModalContent {...props} />;
+};
+
+export default MessageSearchModal;

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

@@ -0,0 +1,50 @@
+import type { AppDispatch } from '../../../roomStore';
+import {
+  requestJumpToMessage,
+  setCurrentRoom,
+  setIsLoading,
+} from '../../../roomStore/roomsSlice';
+import { setActiveModal } from '../../../roomStore/chatSettingsSlice';
+import type { MessageSearchHit } from '../../../networking/api-requests/messageSearch.api';
+
+/**
+ * The room a hit belongs to, among the rooms this device knows. A hit names
+ * its room by full JID and by name (the JID's local part); the archive can
+ * hold chats the user has since left, and those have no room to open.
+ */
+export const resolveHitRoomJid = (
+  rooms: Record<string, unknown>,
+  hit: Pick<MessageSearchHit, 'room' | 'chatId'>
+): string | undefined => {
+  if (hit.room && rooms[hit.room]) {return hit.room;}
+  return Object.keys(rooms).find((jid) => jid.split('@')[0] === hit.chatId);
+};
+
+/**
+ * Open a hit: select its room, ask the room's list to land on the message
+ * (by id when the archive row has one, else by text and time; see
+ * useJumpToMessage), and close the search screen so the message is visible.
+ */
+export const openSearchHit = (
+  dispatch: AppDispatch,
+  rooms: Record<string, unknown>,
+  activeRoomJID: string | null | undefined,
+  hit: MessageSearchHit
+): boolean => {
+  const roomJID = resolveHitRoomJid(rooms, hit);
+  if (!roomJID) {return false;}
+  if (roomJID !== activeRoomJID) {
+    dispatch(setCurrentRoom({ roomJID }));
+    dispatch(setIsLoading({ chatJID: roomJID, loading: true }));
+  }
+  dispatch(
+    requestJumpToMessage({
+      roomJID,
+      ids: [hit.stanzaId, hit.messageId],
+      createdAt: hit.createdAt,
+      body: hit.body,
+    })
+  );
+  dispatch(setActiveModal(undefined));
+  return true;
+};

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

@@ -0,0 +1,57 @@
+import { requestUsers } from '../../../helpers/userResolver';
+
+interface PersonLike {
+  _id?: string;
+  id?: string;
+  firstName?: string;
+  lastName?: string;
+  name?: string;
+  xmppUsername?: string;
+}
+
+const fullName = (person?: PersonLike): string => {
+  if (!person) return '';
+  const name = `${person.firstName || ''} ${person.lastName || ''}`.trim();
+  return name || person.name || '';
+};
+
+/** `appId_userId@xmpp.host` (or without the host) -> `appId_userId`. */
+export const localPart = (jid?: string): string =>
+  String(jid || '').split('@')[0];
+
+interface Sources {
+  /** rooms.usersSet: keyed by `appId_userId`. */
+  usersSet?: Record<string, PersonLike>;
+  /** The hit's room members, which carry the user id search reports. */
+  members?: PersonLike[];
+  myXmppUsername?: string;
+}
+
+/**
+ * Who sent a search hit.
+ *
+ * `from` arrives as a full JID with the XMPP host on it, while usersSet is
+ * keyed by the local part, so looking it up as-is found nobody and every hit
+ * was attributed to "Someone". The user id (`fromUserId`) is the other way
+ * in: room members carry it as `_id`.
+ */
+export function resolveSender(
+  hit: { from: string; fromUserId: string },
+  { usersSet, members, myXmppUsername }: Sources
+): { name: string; isSelf: boolean } {
+  const from = localPart(hit.from);
+  const isSelf = Boolean(myXmppUsername) && from === localPart(myXmppUsername);
+  if (isSelf) return { name: '', isSelf: true };
+
+  const name =
+    fullName(usersSet?.[from]) ||
+    fullName(
+      members?.find((member) => hit.fromUserId && member._id === hit.fromUserId)
+    ) ||
+    '';
+  // Search hits can come from senders nobody has loaded (big rooms ship only
+  // 30 members): ask the resolver, the name appears on the next render once
+  // usersSet has it. Debounced and de-duplicated there.
+  if (!name && from) requestUsers([from]);
+  return { name, isSelf: false };
+}

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

@@ -0,0 +1,109 @@
+export interface SearchFilters {
+  /** Sender's user id (a room member's `_id`). */
+  fromUserId?: string;
+  /** ISO 8601 instant: start of the chosen day, in the reader's time zone. */
+  since?: string;
+  /** ISO 8601 instant: end of the chosen day, in the reader's time zone. */
+  until?: string;
+}
+
+/**
+ * A real calendar day typed as `YYYY-MM-DD`. RN has no native date input, so
+ * the field is free text and `2026-02-31` (which Date would roll over to
+ * March) or half-typed input must read as "no date", not as a wrong one.
+ */
+export function isValidDay(day: string): boolean {
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(day || '');
+  if (!match) {return false;}
+  const date = new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3]));
+  return (
+    date.getFullYear() === Number(match[1]) &&
+    date.getMonth() === Number(match[2]) - 1 &&
+    date.getDate() === Number(match[3])
+  );
+}
+
+/** `2026-07-14` -> that day's first instant in the reader's time zone. */
+export function dayStartISO(day: string): string | undefined {
+  if (!isValidDay(day)) {return undefined;}
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(day || '');
+  if (!match) return undefined;
+  const date = new Date(
+    Number(match[1]),
+    Number(match[2]) - 1,
+    Number(match[3]),
+    0,
+    0,
+    0,
+    0
+  );
+  return Number.isNaN(date.getTime()) ? undefined : date.toISOString();
+}
+
+/**
+ * The day's LAST instant, not just the date. The server reads a bare date in
+ * `until` as midnight at the START of that day, so passing "2026-07-14"
+ * silently excluded the whole day the reader picked (measured on QA: 329
+ * hits with the bare date against 340 with the end of the day).
+ */
+export function dayEndISO(day: string): string | undefined {
+  if (!isValidDay(day)) {return undefined;}
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(day || '');
+  if (!match) return undefined;
+  const date = new Date(
+    Number(match[1]),
+    Number(match[2]) - 1,
+    Number(match[3]),
+    23,
+    59,
+    59,
+    999
+  );
+  return Number.isNaN(date.getTime()) ? undefined : date.toISOString();
+}
+
+/** True when both days are set and the range runs backwards. */
+export const isBackwardsRange = (from: string, to: string): boolean =>
+  isValidDay(from) && isValidDay(to) && from > to;
+
+export interface Person {
+  _id?: string;
+  firstName?: string;
+  lastName?: string;
+  name?: string;
+}
+
+const displayName = (person: Person): string =>
+  `${person.firstName || ''} ${person.lastName || ''}`.trim() ||
+  person.name ||
+  '';
+
+/**
+ * Up to `limit` people whose name contains `needle`, best matches first
+ * (a name that STARTS with it ranks above one that merely contains it).
+ * Rooms here have thousands of members, so this never renders them all.
+ */
+export function matchPeople(
+  people: Iterable<Person>,
+  needle: string,
+  limit = 8
+): { id: string; name: string }[] {
+  const wanted = needle.trim().toLowerCase();
+  if (!wanted) return [];
+
+  const starts: { id: string; name: string }[] = [];
+  const contains: { id: string; name: string }[] = [];
+  const seen = new Set<string>();
+
+  for (const person of people) {
+    const id = person._id;
+    const name = displayName(person);
+    if (!id || !name || seen.has(id)) continue;
+    const at = name.toLowerCase().indexOf(wanted);
+    if (at === -1) continue;
+    seen.add(id);
+    (at === 0 ? starts : contains).push({ id, name });
+    if (starts.length >= limit) break;
+  }
+  return [...starts, ...contains].slice(0, limit);
+}