stream-chat-react-native-core 9.4.0-beta.10 → 9.4.0-beta.11

package/src/components/Message/MessageItemView/utils/renderText.tsx

@@ -27,7 +27,7 @@ import {
   State,
 } from 'simple-markdown';
 
-import type { LocalMessage, UserResponse } from 'stream-chat';
+import type { LocalMessage, MentionEntity, UserResponse } from 'stream-chat';
 
 import { generateMarkdownText } from './generateMarkdownText';
 
@@ -152,7 +152,7 @@ const defaultMarkdownStyles: MarkdownStyle = {
     flexDirection: 'row',
   },
   mentions: {
-    fontWeight: '700',
+    fontWeight: primitives.typographyFontWeightRegular,
     fontSize: primitives.typographyFontSizeMd,
     lineHeight: primitives.typographyLineHeightNormal,
   },
@@ -286,7 +286,7 @@ export const renderText = (params: RenderTextParams) => {
     },
     mentions: {
       ...defaultMarkdownStyles.mentions,
-      color: semantics.accentPrimary,
+      color: semantics.chatTextMention,
       ...markdownStyles?.mentions,
     },
     table: {
@@ -404,26 +404,96 @@ export const renderText = (params: RenderTextParams) => {
     );
   };
 
-  // take the @ mentions and turn them into markdown?
-  // translate links
-  const { mentioned_users } = message;
-  const mentionedUsernames = (mentioned_users || [])
-    .map((user) => user.name || user.id)
-    .filter(Boolean)
+  // Collect every mention type the server sent us into a single typed list so
+  // the markdown rule, the lookup, and the press payload all see the same shape.
+  const {
+    mentioned_channel,
+    mentioned_group_ids,
+    mentioned_groups,
+    mentioned_here,
+    mentioned_roles,
+    mentioned_users,
+  } = message;
+
+  const mentionEntities: MentionEntity[] = [
+    ...((mentioned_users ?? []) as UserResponse[]).map(
+      (user) => ({ ...user, mentionType: 'user' }) as MentionEntity,
+    ),
+    ...(mentioned_channel
+      ? ([{ id: 'channel', mentionType: 'channel', name: 'channel' }] as MentionEntity[])
+      : []),
+    ...(mentioned_here
+      ? ([{ id: 'here', mentionType: 'here', name: 'here' }] as MentionEntity[])
+      : []),
+    ...((mentioned_roles ?? []) as string[]).map(
+      (role) => ({ id: role, mentionType: 'role', name: role }) as MentionEntity,
+    ),
+    ...(
+      (mentioned_groups ?? (mentioned_group_ids ?? []).map((id) => ({ id, name: id }))) as Array<{
+        id: string;
+        name?: string;
+      }>
+    ).map(
+      (group) =>
+        ({
+          id: group.id,
+          mentionType: 'user_group',
+          name: group.name ?? group.id,
+        }) as MentionEntity,
+    ),
+  ];
+
+  // Lookup keyed by the rendered mention text (sans `@`), lowercased so we
+  // resolve case-insensitively. First-write-wins: if a user shares a name with
+  // a role/group, the user entity is preferred — same precedence the React SDK
+  // applies via insertion order in its plugin.
+  const mentionLookup = new Map<string, MentionEntity>();
+  for (const entity of mentionEntities) {
+    const key = (entity.name ?? entity.id).toLowerCase();
+    if (!mentionLookup.has(key)) mentionLookup.set(key, entity);
+  }
+
+  const mentionTokens = mentionEntities
+    .map((entity) => entity.name ?? entity.id)
+    .filter((value): value is string => Boolean(value))
     .sort((a, b) => b.length - a.length)
-    .map(escapeRegExp);
-  const mentionedUsers = mentionedUsernames.map((username) => `@${username}`).join('|');
-  const regEx = new RegExp(`^\\B(${mentionedUsers})`, 'g');
+    .map((value) => `@${escapeRegExp(value)}`)
+    .join('|');
+  const regEx = new RegExp(`^\\B(${mentionTokens})`, 'g');
   const mentionsMatchFunction: MatchFunction = (source) => regEx.exec(source);
 
+  const colorForMentionType = (mentionType: MentionEntity['mentionType']) => {
+    switch (mentionType) {
+      case 'user':
+        return semantics.chatTextMentionUser;
+      case 'channel':
+      case 'here':
+        return semantics.chatTextMentionBroadcast;
+      case 'role':
+        return semantics.chatTextMentionRole;
+      case 'user_group':
+        return semantics.chatTextMentionGroup;
+      default:
+        return semantics.chatTextMention;
+    }
+  };
+
   const mentionsReact: ReactNodeOutput = (node, output, { ...state }) => {
-    /**removes the @ prefix of username */
-    const userName = node.content[0]?.content?.substring(1);
+    const matchedText: string | undefined = node.content[0]?.content;
+    const matchedName = matchedText?.substring(1) ?? '';
+    const matchedEntity = mentionLookup.get(matchedName.toLowerCase());
+    const mentionedUser =
+      matchedEntity?.mentionType === 'user' ? (matchedEntity as UserResponse) : undefined;
+    const mentionColor = matchedEntity
+      ? colorForMentionType(matchedEntity.mentionType)
+      : semantics.chatTextMention;
+
     const onPress = (event: GestureResponderEvent) => {
       if (!preventPress && onPressParam) {
         onPressParam({
           additionalInfo: {
-            user: mentioned_users?.find((user: UserResponse) => userName === user.name),
+            mentionedEntity: matchedEntity,
+            user: mentionedUser,
           },
           emitter: 'textMention',
           event,
@@ -434,6 +504,10 @@ export const renderText = (params: RenderTextParams) => {
     const onLongPress = (event: GestureResponderEvent) => {
       if (!preventPress && onLongPressParam) {
         onLongPressParam({
+          additionalInfo: {
+            mentionedEntity: matchedEntity,
+            user: mentionedUser,
+          },
           emitter: 'textMention',
           event,
         });
@@ -441,7 +515,12 @@ export const renderText = (params: RenderTextParams) => {
     };
 
     return (
-      <Text key={state.key} onLongPress={onLongPress} onPress={onPress} style={styles.mentions}>
+      <Text
+        key={state.key}
+        onLongPress={onLongPress}
+        onPress={onPress}
+        style={[styles.mentions, { color: mentionColor }]}
+      >
         {Array.isArray(node.content)
           ? node.content.reduce((acc, current) => acc + current.content, '') || ''
           : output(node.content, state)}
@@ -492,7 +571,7 @@ export const renderText = (params: RenderTextParams) => {
     // we have no react rendering support for reflinks
     reflink: { match: () => null },
     sublist: { react: listReact },
-    ...(mentionedUsers
+    ...(mentionTokens
       ? {
           mentions: {
             match: mentionsMatchFunction,
@@ -507,7 +586,7 @@ export const renderText = (params: RenderTextParams) => {
 
   return (
     <Markdown
-      key={`${JSON.stringify(mentioned_users)}-${onlyEmojis}-${
+      key={`${JSON.stringify(mentionEntities)}-${onlyEmojis}-${
         messageOverlay ? JSON.stringify(markdownStyles) : undefined
       }-${JSON.stringify(semantics)}`}
       onLink={onLink}

package/src/components/MessageInput/MessageComposer.tsx

@@ -118,7 +118,7 @@ const useStyles = () => {
         shadowRadius: 12,
       },
       suggestionsListContainer: {
-        backgroundColor: semantics.backgroundCoreElevation1,
+        backgroundColor: 'transparent',
         position: 'absolute',
         width: '100%',
       },
@@ -200,7 +200,6 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
     AudioRecordingInProgress,
     AudioRecordingLockIndicator,
     AudioRecordingPreview,
-    AutoCompleteSuggestionList,
     Input,
     InputView,
     MessageComposerLeadingView,
@@ -227,7 +226,6 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
         inputBoxWrapper,
         inputContainer,
         inputFloatingContainer,
-        suggestionsListContainer: { container: suggestionListContainer },
         wrapper,
       },
     },
@@ -355,7 +353,12 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
                 layout: { height: newHeight },
               },
             }) => {
-              messageInputHeightStore.setHeight(newHeight);
+              messageInputHeightStore.setHeight(
+                newHeight -
+                  (selectedPicker && !isKeyboardVisible
+                    ? attachmentPickerBottomSheetHeight - bottomInset
+                    : 0),
+              );
             }}
             style={
               messageInputFloating
@@ -437,11 +440,6 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
               <MessageComposerTrailingView />
             )}
           </View>
-          <View
-            style={[styles.suggestionsListContainer, { bottom: height }, suggestionListContainer]}
-          >
-            <AutoCompleteSuggestionList />
-          </View>
         </PortalWhileClosingView>
       </Animated.View>
 

package/src/components/MessageList/MessageFlashList.tsx

@@ -60,6 +60,7 @@ import { MessageInputHeightState } from '../../state-store/message-input-height-
 import { primitives } from '../../theme';
 import { transitions } from '../../utils/animations/transitions';
 import { MessageWrapper } from '../Message/MessageItemView/MessageWrapper';
+import { PortalWhileClosingView } from '../UIComponents/PortalWhileClosingView';
 
 type FlashListContextApi = { getRef?: () => FlashListRef<LocalMessage> | null } | undefined;
 
@@ -297,6 +298,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     threadList = false,
   } = props;
   const {
+    AutoCompleteSuggestionList,
     EmptyStateIndicator,
     MessageListLoadingIndicator: LoadingIndicator,
     NetworkDownIndicator,
@@ -1135,6 +1137,22 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
           />
         </View>
       ) : null}
+      <Animated.View
+        layout={transitions.layout200}
+        style={[
+          {
+            bottom: messageInputFloating ? messageInputHeight + 16 : 0,
+          },
+          styles.suggestionsListContainer,
+        ]}
+      >
+        <PortalWhileClosingView
+          portalHostName='overlay-suggestion-list'
+          portalName='autocomplete-suggestion-list'
+        >
+          <AutoCompleteSuggestionList />
+        </PortalWhileClosingView>
+      </Animated.View>
       <NotificationList bottomOffset={messageInputFloating ? messageInputHeight + 16 : undefined} />
     </View>
   );
@@ -1279,6 +1297,9 @@ const useStyles = () => {
         scrollToBottomButtonContainer,
         unreadMessagesNotificationContainer,
       },
+      messageComposer: {
+        suggestionsListContainer: { container: suggestionListContainer },
+      },
     },
   } = useTheme();
 
@@ -1287,6 +1308,12 @@ const useStyles = () => {
   return useMemo(
     () =>
       StyleSheet.create({
+        suggestionsListContainer: {
+          backgroundColor: 'transparent',
+          position: 'absolute',
+          width: '100%',
+          ...suggestionListContainer,
+        },
         container: {
           flex: 1,
           width: '100%',
@@ -1338,6 +1365,7 @@ const useStyles = () => {
       scrollToBottomButtonContainer,
       stickyHeaderContainer,
       unreadMessagesNotificationContainer,
+      suggestionListContainer,
     ],
   );
 };

package/src/components/MessageList/MessageList.tsx

@@ -74,6 +74,7 @@ import { primitives } from '../../theme';
 import { transitions } from '../../utils/animations/transitions';
 import { useIncomingMessageAnnouncements } from '../Accessibility/hooks/useIncomingMessageAnnouncements';
 import { MessageWrapper } from '../Message/MessageItemView/MessageWrapper';
+import { PortalWhileClosingView } from '../UIComponents';
 
 // This is just to make sure that the scrolling happens in a different task queue.
 // TODO: Think if we really need this and strive to remove it if we can.
@@ -92,6 +93,9 @@ const useStyles = () => {
         scrollToBottomButtonContainer,
         unreadMessagesNotificationContainer,
       },
+      messageComposer: {
+        suggestionsListContainer: { container: suggestionListContainer },
+      },
     },
   } = useTheme();
 
@@ -100,6 +104,12 @@ const useStyles = () => {
   return useMemo(
     () =>
       StyleSheet.create({
+        suggestionsListContainer: {
+          backgroundColor: 'transparent',
+          position: 'absolute',
+          width: '100%',
+          ...suggestionListContainer,
+        },
         container: {
           flex: 1,
           width: '100%',
@@ -151,6 +161,7 @@ const useStyles = () => {
       scrollToBottomButtonContainer,
       stickyHeaderContainer,
       unreadMessagesNotificationContainer,
+      suggestionListContainer,
     ],
   );
 };
@@ -360,6 +371,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     TypingIndicator,
     TypingIndicatorContainer,
     UnreadMessagesNotification,
+    AutoCompleteSuggestionList,
   } = useComponentsContext();
   const [isUnreadNotificationOpen, setIsUnreadNotificationOpen] = useState<boolean>(false);
   const { theme } = useTheme();
@@ -1363,6 +1375,22 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
           />
         </View>
       ) : null}
+      <Animated.View
+        layout={transitions.layout200}
+        style={[
+          {
+            bottom: messageInputFloating ? messageInputHeight + 16 : 0,
+          },
+          styles.suggestionsListContainer,
+        ]}
+      >
+        <PortalWhileClosingView
+          portalHostName='overlay-suggestion-list'
+          portalName='autocomplete-suggestion-list'
+        >
+          <AutoCompleteSuggestionList />
+        </PortalWhileClosingView>
+      </Animated.View>
       <NotificationList bottomOffset={messageInputFloating ? messageInputHeight + 16 : undefined} />
     </View>
   );

package/src/components/Thread/__tests__/__snapshots__/Thread.test.tsx.snap

@@ -1715,6 +1715,30 @@ exports[`Thread should match thread snapshot 1`] = `
           }
         }
       />
+      <View
+        layout={BaseAnimationMock {}}
+        style={
+          [
+            {
+              "bottom": 0,
+            },
+            {
+              "backgroundColor": "transparent",
+              "position": "absolute",
+              "width": "100%",
+            },
+          ]
+        }
+      >
+        <View
+          name="autocomplete-suggestion-list"
+        >
+          <View
+            collapsable={false}
+            onLayout={[Function]}
+          />
+        </View>
+      </View>
     </View>
     <View
       layout={BaseAnimationMock {}}
@@ -2327,21 +2351,6 @@ exports[`Thread should match thread snapshot 1`] = `
               </View>
             </View>
           </View>
-          <View
-            style={
-              [
-                {
-                  "backgroundColor": "#ffffff",
-                  "position": "absolute",
-                  "width": "100%",
-                },
-                {
-                  "bottom": 0,
-                },
-                {},
-              ]
-            }
-          />
         </View>
       </View>
     </View>

package/src/components/UIComponents/BottomSheetModal.tsx

@@ -39,12 +39,12 @@ import {
 } from './BottomSheetModal.utils';
 
 import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
+import { useAnnounceOnShow } from '../../a11y/hooks/useAnnounceOnShow';
 import { useResolvedModalAccessibilityProps } from '../../a11y/hooks/useResolvedModalAccessibilityProps';
 import { BottomSheetProvider } from '../../contexts/bottomSheetContext/BottomSheetContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../hooks';
 import { primitives } from '../../theme';
-import { useAccessibilityAnnouncer } from '../Accessibility/useAccessibilityAnnouncer';
 
 export type BottomSheetModalProps = {
   /**
@@ -544,25 +544,10 @@ const BottomSheetModalInner = (props: PropsWithChildren<BottomSheetModalProps>)
 
   const modalA11yProps = useResolvedModalAccessibilityProps();
 
-  const announce = useAccessibilityAnnouncer();
   const openAnnouncement = useA11yLabel(
     'a11y/Bottom sheet opened. Activate the close action or use the escape gesture to dismiss.',
   );
-  const announcedOpenRef = useRef(false);
-  useEffect(() => {
-    if (!visible) {
-      announcedOpenRef.current = false;
-      return;
-    }
-    if (!openAnnouncement || announcedOpenRef.current) {
-      return;
-    }
-    const id = setTimeout(() => {
-      announce(openAnnouncement, 'polite');
-      announcedOpenRef.current = true;
-    }, 800);
-    return () => clearTimeout(id);
-  }, [visible, openAnnouncement, announce]);
+  useAnnounceOnShow(visible, openAnnouncement, { delayMs: 800 });
 
   const closeLabel = useA11yLabel('a11y/Close');
   const closeAccessibilityActions = useMemo(

package/src/components/UIComponents/ClippingFadeBottom.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
+
+const CLIPPING_FADE_HEIGHT = 16;
+const CLIPPING_FADE_GRADIENT_ID = 'sdk-clipping-fade-bottom';
+
+export type ClippingFadeBottomProps = {
+  /**
+   * Color the fade ramps toward at the bottom edge. Typically the
+   * background color of the surface beneath the fade so the bottom edge of
+   * scrolling content visually melts into it.
+   */
+  backgroundColor: string;
+};
+
+/**
+ * Bottom edge fade overlay. Draws a 16px tall SVG linear gradient that
+ * ramps from the supplied background's transparent variant at the top to
+ * fully opaque at the bottom - visually clipping any content that scrolls
+ * past the lower edge of its parent. `pointerEvents='none'` so it doesn't
+ * intercept taps/scrolls on the rows underneath.
+ */
+export const ClippingFadeBottom = ({ backgroundColor }: ClippingFadeBottomProps) => (
+  <View pointerEvents='none' style={styles.fade}>
+    <Svg height='100%' width='100%'>
+      <Defs>
+        <LinearGradient id={CLIPPING_FADE_GRADIENT_ID} x1='0' x2='0' y1='0' y2='1'>
+          <Stop offset='0' stopColor={backgroundColor} stopOpacity='0' />
+          <Stop offset='1' stopColor={backgroundColor} stopOpacity='1' />
+        </LinearGradient>
+      </Defs>
+      <Rect fill={`url(#${CLIPPING_FADE_GRADIENT_ID})`} height='100%' width='100%' />
+    </Svg>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  fade: {
+    bottom: 0,
+    height: CLIPPING_FADE_HEIGHT,
+    left: 0,
+    position: 'absolute',
+    right: 0,
+  },
+});

package/src/components/UIComponents/PortalWhileClosingView.tsx

@@ -130,10 +130,6 @@ const useSyncingApi = (portalHostName: string, registrationId: string) => {
         y: y + (Platform.OS === 'android' ? insets.top : 0),
       };
 
-      if (!width || !height) {
-        return;
-      }
-
       placeholderLayout.value = { h: height, w: width };
 
       setClosingPortalLayout(portalHostName, registrationId, {

package/src/components/UIComponents/index.ts

@@ -1,4 +1,5 @@
 export * from './BottomSheetModal';
+export * from './ClippingFadeBottom';
 export * from './StreamBottomSheetModalFlatList';
 export * from './EmptySearchResult';
 export * from './ImageBackground';

package/src/components/index.ts

@@ -28,6 +28,7 @@ export * from './AutoCompleteInput/AutoCompleteSuggestionHeader';
 export * from './AutoCompleteInput/AutoCompleteSuggestionItem';
 export * from './AutoCompleteInput/AutoCompleteSuggestionList';
 export * from './AutoCompleteInput/InputView';
+export * from './AutoCompleteInput/mentionItems';
 
 export * from './Channel/Channel';
 export * from './Channel/hooks/useCreateChannelContext';

package/src/contexts/componentsContext/defaultComponents.ts

@@ -24,7 +24,10 @@ import { AttachmentPickerContent } from '../../components/AttachmentPicker/compo
 import { AttachmentPickerSelectionBar } from '../../components/AttachmentPicker/components/AttachmentPickerSelectionBar';
 import { ImageOverlaySelectedComponent } from '../../components/AttachmentPicker/components/ImageOverlaySelectedComponent';
 import { AutoCompleteSuggestionHeader } from '../../components/AutoCompleteInput/AutoCompleteSuggestionHeader';
-import { AutoCompleteSuggestionItem } from '../../components/AutoCompleteInput/AutoCompleteSuggestionItem';
+import {
+  AutoCompleteSuggestionItem,
+  MentionSuggestionItem,
+} from '../../components/AutoCompleteInput/AutoCompleteSuggestionItem';
 import { AutoCompleteSuggestionList } from '../../components/AutoCompleteInput/AutoCompleteSuggestionList';
 import { InputView } from '../../components/AutoCompleteInput/InputView';
 import { ChannelDetailsContent } from '../../components/ChannelDetails/ChannelDetails';
@@ -196,6 +199,7 @@ const components = {
   AutoCompleteSuggestionHeader,
   AutoCompleteSuggestionItem,
   AutoCompleteSuggestionList,
+  MentionSuggestionItem,
   ChannelDetailsBottomSheet,
   CooldownTimer,
   CircularProgressIndicator,

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

@@ -563,6 +563,10 @@ export type Theme = {
         avatarSize: number;
         column: ViewStyle;
         container: ViewStyle;
+        enhancedMentionContainer: ViewStyle;
+        enhancedMentionIcon: ViewStyle;
+        enhancedMentionSubtitle: TextStyle;
+        enhancedMentionTitle: TextStyle;
         name: TextStyle;
         tag: TextStyle;
       };
@@ -570,6 +574,7 @@ export type Theme = {
     suggestionsListContainer: {
       container: ViewStyle;
       flatlist: ViewStyle;
+      flatlistContentContainer: ViewStyle;
     };
     videoAttachmentUploadPreview: {
       durationContainer: ViewStyle;
@@ -1602,6 +1607,10 @@ export const defaultTheme: Theme = {
         avatarSize: 40,
         column: {},
         container: {},
+        enhancedMentionContainer: {},
+        enhancedMentionIcon: {},
+        enhancedMentionSubtitle: {},
+        enhancedMentionTitle: {},
         name: {},
         tag: {},
       },
@@ -1609,6 +1618,7 @@ export const defaultTheme: Theme = {
     suggestionsListContainer: {
       container: {},
       flatlist: {},
+      flatlistContentContainer: {},
     },
     wrapper: {},
     linkPreviewList: {

package/src/i18n/ar.json

@@ -437,6 +437,12 @@
   "a11y/Gallery Image": "صورة من المعرض",
   "a11y/Gallery Video": "فيديو من المعرض",
   "a11y/{{position}} of {{count}}": "{{position}} من {{count}}",
+  "Notify all {{ role }} members": "Notify all {{ role }} members",
+  "a11y/Command suggestions available": "Command suggestions available",
+  "a11y/Emoji suggestions available": "Emoji suggestions available",
+  "a11y/Mention suggestions available": "Mention suggestions available",
+  "mention/Channel Description": "Notify everyone in this channel",
+  "mention/Here Description": "Notify every online member in this channel",
   "Pin Chat": "تثبيت الدردشة",
   "Pin Group": "تثبيت المجموعة",
   "Unpin Chat": "إلغاء تثبيت الدردشة",

package/src/i18n/en.json

@@ -440,5 +440,11 @@
   "a11y/{{count}} unread messages": "{{count}} unread messages",
   "a11y/Gallery Image": "Gallery image",
   "a11y/Gallery Video": "Gallery video",
-  "a11y/{{position}} of {{count}}": "{{position}} of {{count}}"
+  "a11y/{{position}} of {{count}}": "{{position}} of {{count}}",
+  "Notify all {{ role }} members": "Notify all {{ role }} members",
+  "a11y/Command suggestions available": "Command suggestions available",
+  "a11y/Emoji suggestions available": "Emoji suggestions available",
+  "a11y/Mention suggestions available": "Mention suggestions available",
+  "mention/Channel Description": "Notify everyone in this channel",
+  "mention/Here Description": "Notify every online member in this channel"
 }

package/src/i18n/es.json

@@ -437,6 +437,12 @@
   "a11y/Gallery Image": "Imagen de la galería",
   "a11y/Gallery Video": "Vídeo de la galería",
   "a11y/{{position}} of {{count}}": "{{position}} de {{count}}",
+  "Notify all {{ role }} members": "Notify all {{ role }} members",
+  "a11y/Command suggestions available": "Command suggestions available",
+  "a11y/Emoji suggestions available": "Emoji suggestions available",
+  "a11y/Mention suggestions available": "Mention suggestions available",
+  "mention/Channel Description": "Notify everyone in this channel",
+  "mention/Here Description": "Notify every online member in this channel",
   "Pin Chat": "Fijar chat",
   "Pin Group": "Fijar grupo",
   "Unpin Chat": "Desfijar chat",

package/src/i18n/fr.json

@@ -437,6 +437,12 @@
   "a11y/Gallery Image": "Image de la galerie",
   "a11y/Gallery Video": "Vidéo de la galerie",
   "a11y/{{position}} of {{count}}": "{{position}} sur {{count}}",
+  "Notify all {{ role }} members": "Notify all {{ role }} members",
+  "a11y/Command suggestions available": "Command suggestions available",
+  "a11y/Emoji suggestions available": "Emoji suggestions available",
+  "a11y/Mention suggestions available": "Mention suggestions available",
+  "mention/Channel Description": "Notify everyone in this channel",
+  "mention/Here Description": "Notify every online member in this channel",
   "Pin Chat": "Épingler la discussion",
   "Pin Group": "Épingler le groupe",
   "Unpin Chat": "Détacher la discussion",

package/src/i18n/he.json

@@ -437,6 +437,12 @@
   "a11y/Gallery Image": "תמונה מהגלריה",
   "a11y/Gallery Video": "סרטון מהגלריה",
   "a11y/{{position}} of {{count}}": "{{position}} מתוך {{count}}",
+  "Notify all {{ role }} members": "Notify all {{ role }} members",
+  "a11y/Command suggestions available": "Command suggestions available",
+  "a11y/Emoji suggestions available": "Emoji suggestions available",
+  "a11y/Mention suggestions available": "Mention suggestions available",
+  "mention/Channel Description": "Notify everyone in this channel",
+  "mention/Here Description": "Notify every online member in this channel",
   "Pin Chat": "הצמד/י צ'אט",
   "Pin Group": "הצמד/י קבוצה",
   "Unpin Chat": "בטל/י הצמדת צ'אט",