stream-chat-react-native-core 9.4.0 → 9.5.0-beta.1

package/src/components/ChannelDetails/components/members/ChannelMemberList.tsx

@@ -1,16 +1,37 @@
-import React, { useCallback, useMemo, useState } from 'react';
-import { ActivityIndicator, FlatList, type FlatListProps } from 'react-native';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { ActivityIndicator, FlatList, type FlatListProps, StyleSheet, View } from 'react-native';
 
-import type { ChannelMemberResponse } from 'stream-chat';
+import type { ChannelMemberResponse, SearchSourceState } from 'stream-chat';
 
 import { MemberListLoadingSkeleton } from './MemberListLoadingSkeleton';
 
 import { useChannelDetailsContext } from '../../../../contexts/channelDetailsContext/channelDetailsContext';
+import {
+  ChannelMemberListProvider,
+  useChannelMemberListContext,
+} from '../../../../contexts/channelMemberListContext/ChannelMemberListContext';
 import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
-import { useChannelAllMembers } from '../../hooks/members/useChannelAllMembers';
+import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
+import { getNotificationErrorOptions } from '../../../../hooks/actions/useChannelActions';
+import { useStateStore } from '../../../../hooks/useStateStore';
+import { primitives } from '../../../../theme';
+import { useNotificationApi } from '../../../Notifications/hooks/useNotificationApi';
+import { NotificationList } from '../../../Notifications/NotificationList';
+import { NotificationTargetProvider } from '../../../Notifications/NotificationTargetContext';
+import { EmptySearchResult } from '../../../UIComponents/EmptySearchResult';
+import { SearchInput, SearchInputProps } from '../../../UIComponents/SearchInput';
 
 const keyExtractor = (member: ChannelMemberResponse) => member.user?.id ?? member.user_id ?? '';
 
+const listStateSelector = (state: SearchSourceState<ChannelMemberResponse>) => ({
+  error: state.lastQueryError,
+  hasNext: state.hasNext,
+  loading: state.isLoading,
+  members: state.items,
+  searchQuery: state.searchQuery,
+});
+
 export type ChannelMemberListProps = {
   /**
    * Besides the existing default behavior of the members list, you can attach
@@ -19,18 +40,54 @@ export type ChannelMemberListProps = {
    * See https://reactnative.dev/docs/flatlist#props for the full list.
    */
   additionalFlatListProps?: Partial<FlatListProps<ChannelMemberResponse>>;
+  searchInputProps?: SearchInputProps;
 };
 
-/**
- * Lists all channel members.
- * @experimental This component is experimental and is subject to change.
- */
-export const ChannelMemberList = ({ additionalFlatListProps }: ChannelMemberListProps = {}) => {
-  const { channel, onMemberPress } = useChannelDetailsContext();
+const ChannelMemberListContent = ({
+  additionalFlatListProps,
+  searchInputProps,
+}: ChannelMemberListProps) => {
+  const { t } = useTranslationContext();
+  const {
+    theme: {
+      channelDetails: { memberList },
+    },
+  } = useTheme();
+  const { onMemberPress } = useChannelDetailsContext();
   const { ChannelMemberActionsSheet, ChannelMemberItem } = useComponentsContext();
-  const { hasMore, loading, loadMore, results } = useChannelAllMembers({ channel });
+  const { addNotification } = useNotificationApi();
+
+  const { channel, searchSource } = useChannelMemberListContext();
+  const { error, hasNext, loading, members, searchQuery } = useStateStore(
+    searchSource.state,
+    listStateSelector,
+  );
+
   const [selectedMember, setSelectedMember] = useState<ChannelMemberResponse | null>(null);
 
+  const initialized = useRef(false);
+  useEffect(() => {
+    if (!initialized.current) {
+      initialized.current = true;
+      searchSource.search();
+    }
+  }, [searchSource]);
+
+  useEffect(() => {
+    if (!error) {
+      return;
+    }
+    addNotification({
+      message: t('Failed to load members'),
+      options: {
+        ...getNotificationErrorOptions(error),
+        severity: 'error',
+        type: 'api:channel:query-members:failed',
+      },
+      origin: { context: { channel }, emitter: 'ChannelMemberList' },
+    });
+  }, [error, addNotification, channel, t]);
+
   const handleMemberActionsClose = useCallback(() => setSelectedMember(null), []);
 
   const handleMemberPress = useCallback(
@@ -51,24 +108,46 @@ export const ChannelMemberList = ({ additionalFlatListProps }: ChannelMemberList
     [ChannelMemberItem, handleMemberPress],
   );
 
-  const ListFooterComponent = useMemo(
-    () => (loading && results.length > 0 ? <ActivityIndicator /> : null),
-    [loading, results.length],
-  );
+  const loadMore = useCallback(() => {
+    // hasNext is true by default, !!members prevents calling search on initial load
+    if (hasNext && !!members) {
+      searchSource.search();
+    }
+  }, [hasNext, members, searchSource]);
 
-  if (loading && results.length === 0) {
-    return <MemberListLoadingSkeleton />;
-  }
+  const emptyState =
+    loading && !members ? (
+      <MemberListLoadingSkeleton />
+    ) : (
+      <EmptySearchResult label={t('No members found')} />
+    );
 
   return (
-    <>
+    <View style={[styles.container, memberList.container]}>
+      <SearchInput
+        accessibilityLabel={t('a11y/Search members')}
+        onChangeText={(text) => {
+          searchSource.state.partialNext({ searchQuery: text });
+          searchSource.search(text);
+        }}
+        value={searchQuery}
+        {...searchInputProps}
+      />
       <FlatList
-        data={results}
+        contentContainerStyle={[styles.listContent, memberList.listContent]}
+        data={members}
+        keyboardDismissMode='interactive'
+        keyboardShouldPersistTaps='handled'
         keyExtractor={keyExtractor}
-        ListFooterComponent={ListFooterComponent}
-        onEndReached={hasMore ? loadMore : undefined}
+        ListEmptyComponent={emptyState}
+        ListFooterComponent={
+          loading && members && members.length > 0 ? <ActivityIndicator /> : null
+        }
+        onEndReached={loadMore}
         onEndReachedThreshold={0.2}
         renderItem={renderItem}
+        style={[styles.list, memberList.list]}
+        testID='channel-member-list'
         {...additionalFlatListProps}
       />
       {selectedMember ? (
@@ -78,6 +157,41 @@ export const ChannelMemberList = ({ additionalFlatListProps }: ChannelMemberList
           visible
         />
       ) : null}
-    </>
+      <NotificationList />
+    </View>
+  );
+};
+
+/**
+ * Lists all channel members with the ability to search them.
+ * @experimental This component is experimental and is subject to change.
+ */
+export const ChannelMemberList = (props: ChannelMemberListProps = {}) => {
+  const { channel } = useChannelDetailsContext();
+  const notificationHostId = channel?.cid ? `channel-member-list:${channel.cid}` : undefined;
+
+  if (!notificationHostId) {
+    return null;
+  }
+
+  return (
+    <ChannelMemberListProvider channel={channel}>
+      <NotificationTargetProvider hostId={notificationHostId} panel='channel-details'>
+        <ChannelMemberListContent {...props} />
+      </NotificationTargetProvider>
+    </ChannelMemberListProvider>
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  list: {
+    flex: 1,
+  },
+  listContent: {
+    flexGrow: 1,
+    paddingBottom: primitives.spacing3xl,
+  },
+});

package/src/components/ChannelDetails/components/navigation-section/PinnedMessageItem.tsx

@@ -69,7 +69,7 @@ const useStyles = () => {
           alignItems: 'center',
           flexDirection: 'row',
           gap: primitives.spacingSm,
-          paddingHorizontal: primitives.spacingSm,
+          paddingHorizontal: primitives.spacingMd,
           paddingVertical: primitives.spacingMd,
         },
         content: {

package/src/components/ChannelDetails/components/navigation-section/PinnedMessageList.tsx

@@ -190,7 +190,7 @@ const useStyles = () => {
         },
         listContent: {
           flexGrow: 1,
-          paddingBottom: primitives.spacingXl,
+          paddingBottom: primitives.spacing3xl,
         },
       }),
     [],

package/src/components/ChannelDetails/hooks/members/index.ts

@@ -1,2 +1 @@
-export * from './useChannelAllMembers';
 export * from './useMemberRoleLabel';

package/src/components/Message/hooks/useMessageActions.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from 'react';
+import { Alert } from 'react-native';
 
 import { LocalMessage } from 'stream-chat';
 
@@ -244,18 +245,41 @@ export const useMessageActions = ({
     onOpenThread();
   });
 
+  const isMuted = useUserMuteActive(message.user);
+  const isBlocked = new Set(client.blockedUsers.getLatestValue().userIds).has(
+    message.user?.id ?? '',
+  );
+
   const onBlockUser = useStableCallback(() => {
     if (handleBlockUser) {
       handleBlockUser(message.user);
     }
 
-    handleToggleBlockUser(message.user);
-  });
+    if (isBlocked) {
+      handleToggleBlockUser(message.user);
+      return;
+    }
 
-  const isMuted = useUserMuteActive(message.user);
-  const isBlocked = new Set(client.blockedUsers.getLatestValue().userIds).has(
-    message.user?.id ?? '',
-  );
+    const name = message.user?.name || message.user?.id || '';
+
+    Alert.alert(
+      t('Block {{ name }}', { name }),
+      t("They won't be able to message or call you. You can unblock them later."),
+      [
+        {
+          style: 'cancel',
+          text: t('Cancel'),
+        },
+        {
+          onPress: () => {
+            handleToggleBlockUser(message.user);
+          },
+          style: 'destructive',
+          text: t('Block'),
+        },
+      ],
+    );
+  });
 
   return useMemo(() => {
     const handleReaction =

package/src/components/UIComponents/SearchInput.tsx

@@ -83,9 +83,7 @@ SearchInput.displayName = 'SearchInput{searchInput}';
 
 const styles = StyleSheet.create({
   container: {
-    paddingBottom: primitives.spacingSm,
-    paddingHorizontal: primitives.spacingMd,
-    paddingTop: primitives.spacingXs,
+    padding: primitives.spacingMd,
   },
   input: {
     borderRadius: primitives.radiusMax,

package/src/contexts/channelMemberListContext/ChannelMemberListContext.tsx

@@ -0,0 +1,72 @@
+import React, { PropsWithChildren, useContext, useState } from 'react';
+
+import { Channel, ChannelMemberSearchSource } from 'stream-chat';
+
+import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
+import { isTestEnvironment } from '../utils/isTestEnvironment';
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export type ChannelMemberListContextValue = {
+  channel: Channel;
+  searchSource: ChannelMemberSearchSource;
+};
+
+export const ChannelMemberListContext = React.createContext(
+  DEFAULT_BASE_CONTEXT_VALUE as ChannelMemberListContextValue,
+);
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export const ChannelMemberListProvider = ({
+  channel,
+  children,
+}: PropsWithChildren<{ channel: Channel }>) => {
+  const [searchSource] = useState(() => {
+    const source = new ChannelMemberSearchSource(
+      channel,
+      {
+        allowEmptySearchString: true,
+        pageSize: 25,
+        resetOnNewSearchQuery: false,
+      },
+      {
+        initialFilterConfig: {
+          $or: {
+            enabled: true,
+            generate: ({ searchQuery }) =>
+              searchQuery ? { name: { $autocomplete: searchQuery } } : {},
+          },
+        },
+      },
+    );
+    source.sort = { name: 1 };
+    source.activate();
+    return source;
+  });
+
+  return (
+    <ChannelMemberListContext.Provider value={{ channel, searchSource }}>
+      {children}
+    </ChannelMemberListContext.Provider>
+  );
+};
+
+/**
+ * @experimental This API is experimental and is subject to change.
+ */
+export const useChannelMemberListContext = () => {
+  const contextValue = useContext(
+    ChannelMemberListContext,
+  ) as unknown as ChannelMemberListContextValue;
+
+  if (contextValue === DEFAULT_BASE_CONTEXT_VALUE && !isTestEnvironment()) {
+    throw new Error(
+      'The useChannelMemberListContext hook was called outside of the ChannelMemberListContext provider. Render the member list UI inside a ChannelMemberListProvider.',
+    );
+  }
+
+  return contextValue;
+};

package/src/contexts/index.ts

@@ -34,6 +34,7 @@ export * from './channelAddMembersContext/ChannelAddMembersContext';
 export * from './channelEditDetailsContext';
 export * from './channelFileAttachmentListContext/ChannelFileAttachmentListContext';
 export * from './channelPinnedMessageListContext/ChannelPinnedMessageListContext';
+export * from './channelMemberListContext/ChannelMemberListContext';
 export * from './channelMediaListContext/ChannelMediaListContext';
 export * from './pollContext';
 export * from './liveLocationManagerContext';

package/src/contexts/themeContext/utils/theme.ts

@@ -219,6 +219,11 @@ export type Theme = {
       role: TextStyle;
       status: TextStyle;
     };
+    memberList: {
+      container: ViewStyle;
+      list: ViewStyle;
+      listContent: ViewStyle;
+    };
     memberActionsSheet: {
       actionsList: ViewStyle;
       container: ViewStyle;
@@ -236,6 +241,9 @@ export type Theme = {
       headerTitle: TextStyle;
     };
     addMembers: {
+      container: ViewStyle;
+      list: ViewStyle;
+      listContent: ViewStyle;
       searchResultItem: {
         alreadyMemberInfo: ViewStyle;
         memberLabel: TextStyle;
@@ -1326,6 +1334,11 @@ export const defaultTheme: Theme = {
       role: {},
       status: {},
     },
+    memberList: {
+      container: {},
+      list: {},
+      listContent: {},
+    },
     memberActionsSheet: {
       actionsList: {},
       container: {},
@@ -1343,6 +1356,9 @@ export const defaultTheme: Theme = {
       headerTitle: {},
     },
     addMembers: {
+      container: {},
+      list: {},
+      listContent: {},
       searchResultItem: {
         alreadyMemberInfo: {},
         memberLabel: {},

package/src/hooks/actions/__tests__/useChannelActionItems.test.tsx

@@ -105,7 +105,7 @@ describe('useChannelActionItems', () => {
     expect(result.current.map((item) => item.action)).toEqual([
       channelActions.muteChannel,
       channelActions.pin,
-      channelActions.leave,
+      expect.any(Function),
       expect.any(Function),
     ]);
     expect(result.current.map((item) => item.id)).toEqual([
@@ -268,7 +268,7 @@ describe('getChannelActionItems', () => {
     expect(actionItems.map((item) => item.action)).toEqual([
       channelActions.muteChannel,
       channelActions.pin,
-      channelActions.leave,
+      expect.any(Function),
       expect.any(Function),
     ]);
     expect(actionItems.map((item) => item.id)).toEqual(['mute', 'pin', 'leave', 'deleteChannel']);
@@ -308,7 +308,7 @@ describe('getChannelActionItems', () => {
       channelActions.pin,
       channelActions.unmuteUser,
       channelActions.unblockUser,
-      channelActions.leave,
+      expect.any(Function),
       expect.any(Function),
     ]);
     expect(actionItems.map((item) => item.label)).toEqual([
@@ -383,7 +383,7 @@ describe('getChannelActionItems', () => {
     expect(actionItems[0].placement).toBe('swipe');
 
     const leaveItem = actionItems.find((item) => item.id === 'leave');
-    expect(leaveItem?.action).toBe(channelActions.leave);
+    expect(leaveItem?.action).toEqual(expect.any(Function));
     expect(leaveItem?.label).toBe('Leave Group');
     expect(leaveItem?.placement).toBe('sheet');
   });

package/src/hooks/actions/__tests__/useChannelMemberActionItems.test.tsx

@@ -76,7 +76,7 @@ describe('useChannelMemberActionItems', () => {
     expect(result.current.map((item) => item.id)).toEqual(['muteUser', 'block']);
     expect(result.current.map((item) => item.action)).toEqual([
       userActions.muteUser,
-      userActions.blockUser,
+      expect.any(Function),
     ]);
     expect(result.current.map((item) => item.type)).toEqual(['standard', 'destructive']);
     expect(result.current.map((item) => item.label)).toEqual(['Mute User', 'Block User']);
@@ -259,7 +259,7 @@ describe('buildDefaultChannelMemberActionItems', () => {
     });
 
     expect(items.map((item) => item.id)).toEqual(['muteUser', 'block']);
-    expect(items.map((item) => item.action)).toEqual([actions.muteUser, actions.blockUser]);
+    expect(items.map((item) => item.action)).toEqual([actions.muteUser, expect.any(Function)]);
     expect(items.map((item) => item.label)).toEqual(['Mute User', 'Block User']);
     expect(items.map((item) => item.type)).toEqual(['standard', 'destructive']);
   });
@@ -335,7 +335,7 @@ describe('buildDefaultChannelMemberActionItems', () => {
     });
 
     expect(items.find((item) => item.id === 'muteUser')?.action).toBe(actions.unmuteUser);
-    expect(items.find((item) => item.id === 'block')?.action).toBe(actions.blockUser);
+    expect(items.find((item) => item.id === 'block')?.action).toEqual(expect.any(Function));
   });
 
   it('default getChannelMemberActionItems returns defaultItems unchanged', () => {

package/src/hooks/actions/useChannelActionItems.tsx

@@ -179,8 +179,31 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
       type: 'standard',
     });
 
+    const blockUserWithConfirmation = (...args: Parameters<ChannelActionHandler>) => {
+      const otherUser = getOtherUserInDirectChannel(channel)?.user;
+      const name = otherUser?.name || otherUser?.id || '';
+
+      Alert.alert(
+        t('Block {{ name }}', { name }),
+        t("They won't be able to message or call you. You can unblock them later."),
+        [
+          {
+            style: 'cancel',
+            text: t('Cancel'),
+          },
+          {
+            onPress: async () => {
+              await blockUser(...args);
+            },
+            style: 'destructive',
+            text: t('Block'),
+          },
+        ],
+      );
+    };
+
     actionItems.push({
-      action: isBlocked ? unblockUser : blockUser,
+      action: isBlocked ? unblockUser : blockUserWithConfirmation,
       Icon: (props) => <ChannelActionsIcon Icon={BlockUser} {...props} />,
       id: 'block',
       label: isBlocked ? t('Unblock User') : t('Block User'),
@@ -189,8 +212,39 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
     });
   }
 
+  const leaveWithConfirmation = (...args: Parameters<ChannelActionHandler>) => {
+    const channelName = channel.data?.name;
+    let name: string;
+    if (channelName) {
+      name = channelName;
+    } else if (isDirectChat) {
+      const otherUser = getOtherUserInDirectChannel(channel)?.user;
+      name = otherUser?.name || otherUser?.id || '';
+    } else {
+      name = t('group');
+    }
+
+    Alert.alert(
+      isDirectChat ? t('Leave Chat') : t('Leave Group'),
+      t("You'll stop receiving messages from {{ name }}. You can rejoin anytime.", { name }),
+      [
+        {
+          style: 'cancel',
+          text: t('Cancel'),
+        },
+        {
+          onPress: async () => {
+            await leave(...args);
+          },
+          style: 'destructive',
+          text: t('Leave'),
+        },
+      ],
+    );
+  };
+
   actionItems.push({
-    action: leave,
+    action: leaveWithConfirmation,
     Icon: (props) => <ChannelActionsIcon Icon={ArrowBoxLeft} {...props} />,
     id: 'leave',
     label: isDirectChat ? t('Leave Chat') : t('Leave Group'),

package/src/hooks/actions/useChannelMemberActionItems.tsx

@@ -83,7 +83,29 @@ export const buildDefaultChannelMemberActionItems: BuildDefaultChannelMemberActi
         type: 'standard',
       },
       {
-        action: isBlocked ? unblockUser : blockUser,
+        action: isBlocked
+          ? unblockUser
+          : (...args: Parameters<UserActions['blockUser']>) => {
+              const name = member.user?.name || member.user?.id || '';
+
+              Alert.alert(
+                t('Block {{ name }}', { name }),
+                t("They won't be able to message or call you. You can unblock them later."),
+                [
+                  {
+                    style: 'cancel',
+                    text: t('Cancel'),
+                  },
+                  {
+                    onPress: async () => {
+                      await blockUser(...args);
+                    },
+                    style: 'destructive',
+                    text: t('Block'),
+                  },
+                ],
+              );
+            },
         Icon: (props) => <ChannelMemberActionsIcon Icon={BlockUser} {...props} />,
         id: 'block',
         label: isBlocked ? t('Unblock User') : t('Block User'),

package/src/i18n/ar.json

@@ -457,5 +457,13 @@
   "Pin Chat": "تثبيت الدردشة",
   "Pin Group": "تثبيت المجموعة",
   "Unpin Chat": "إلغاء تثبيت الدردشة",
-  "Unpin Group": "إلغاء تثبيت المجموعة"
+  "Unpin Group": "إلغاء تثبيت المجموعة",
+  "Block": "حظر",
+  "Block {{ name }}": "حظر {{ name }}",
+  "They won't be able to message or call you. You can unblock them later.": "لن يتمكن/تتمكن من مراسلتك أو الاتصال بك. يمكنك إلغاء الحظر لاحقًا.",
+  "Leave": "مغادرة",
+  "You'll stop receiving messages from {{ name }}. You can rejoin anytime.": "ستتوقف عن تلقي الرسائل من {{ name }}. يمكنك الانضمام مجددًا في أي وقت.",
+  "group": "المجموعة",
+  "No members found": "لم يتم العثور على أعضاء",
+  "a11y/Search members": "البحث عن الأعضاء"
 }

package/src/i18n/en.json

@@ -99,6 +99,7 @@
   "No chats here yet…": "No chats here yet…",
   "No files": "No files",
   "No items exist": "No items exist",
+  "No members found": "No members found",
   "No photos or videos": "No photos or videos",
   "No pinned messages": "No pinned messages",
   "No threads here yet": "No threads here yet",
@@ -242,6 +243,12 @@
   "No conversations yet": "No conversations yet",
   "Are you sure you want to delete this group? This can't be undone.": "Are you sure you want to delete this group? This can't be undone.",
   "Are you sure you want to delete this chat? This can't be undone.": "Are you sure you want to delete this chat? This can't be undone.",
+  "Block": "Block",
+  "Block {{ name }}": "Block {{ name }}",
+  "They won't be able to message or call you. You can unblock them later.": "They won't be able to message or call you. You can unblock them later.",
+  "Leave": "Leave",
+  "You'll stop receiving messages from {{ name }}. You can rejoin anytime.": "You'll stop receiving messages from {{ name }}. You can rejoin anytime.",
+  "group": "this group",
   "Delete chat": "Delete chat",
   "Delete group": "Delete group",
   "Archive Chat": "Archive Chat",
@@ -350,6 +357,7 @@
   "a11y/Select image": "Select image",
   "a11y/Select video": "Select video",
   "a11y/Send voice recording": "Send voice recording",
+  "a11y/Search members": "Search members",
   "a11y/Search pinned messages": "Search pinned messages",
   "a11y/Search users to add": "Search users to add",
   "a11y/Select {{name}}": "Select {{name}}",

package/src/i18n/es.json

@@ -457,5 +457,13 @@
   "Pin Chat": "Fijar chat",
   "Pin Group": "Fijar grupo",
   "Unpin Chat": "Desfijar chat",
-  "Unpin Group": "Desfijar grupo"
+  "Unpin Group": "Desfijar grupo",
+  "Block": "Bloquear",
+  "Block {{ name }}": "Bloquear a {{ name }}",
+  "They won't be able to message or call you. You can unblock them later.": "No podrá enviarte mensajes ni llamarte. Puedes desbloquearlo más tarde.",
+  "Leave": "Salir",
+  "You'll stop receiving messages from {{ name }}. You can rejoin anytime.": "Dejarás de recibir mensajes de {{ name }}. Puedes volver a unirte cuando quieras.",
+  "group": "el grupo",
+  "No members found": "No se encontraron miembros",
+  "a11y/Search members": "Buscar miembros"
 }

package/src/i18n/fr.json

@@ -457,5 +457,13 @@
   "Pin Chat": "Épingler la discussion",
   "Pin Group": "Épingler le groupe",
   "Unpin Chat": "Détacher la discussion",
-  "Unpin Group": "Détacher le groupe"
+  "Unpin Group": "Détacher le groupe",
+  "Block": "Bloquer",
+  "Block {{ name }}": "Bloquer {{ name }}",
+  "They won't be able to message or call you. You can unblock them later.": "Cette personne ne pourra plus vous envoyer de messages ni vous appeler. Vous pourrez la débloquer plus tard.",
+  "Leave": "Quitter",
+  "You'll stop receiving messages from {{ name }}. You can rejoin anytime.": "Vous ne recevrez plus de messages de {{ name }}. Vous pouvez rejoindre à tout moment.",
+  "group": "ce groupe",
+  "No members found": "Aucun membre trouvé",
+  "a11y/Search members": "Rechercher des membres"
 }