stream-chat-react-native-core 5.22.0-beta.2 → 5.22.0-beta.4

package/lib/typescript/store/mappers/mapStorableToChannel.d.ts

@@ -1,4 +1,4 @@
 import type { ChannelAPIResponse } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { TableRow } from '../types';
-export declare const mapStorableToChannel: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(channelRow: TableRow<'channels'>) => Omit<ChannelAPIResponse<StreamChatGenerics>, "members" | "duration" | "messages" | "pinned_messages">;
+export declare const mapStorableToChannel: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(channelRow: TableRow<'channels'>) => Omit<ChannelAPIResponse<StreamChatGenerics>, "duration" | "members" | "messages" | "pinned_messages">;

package/lib/typescript/utils/Streami18n.d.ts

@@ -161,10 +161,6 @@ export declare class Streami18n {
                 Photo: string;
                 "Photos and Videos": string;
                 "Pin to Conversation": string;
-                /**
-                 * Hindi notation for meridiems are quite fuzzy in practice. While there exists
-                 * a rigid notion of a 'Pahar' it is not used as rigidly in modern Hindi.
-                 */
                 "Pinned by": string;
                 "Please enable access to your photos and videos so you can share them.": string;
                 "Please select a channel first": string;

package/lib/typescript/utils/utils.d.ts

@@ -105,8 +105,6 @@ export declare const ACITriggerSettings: <StreamChatGenerics extends DefaultStre
 export declare const makeImageCompatibleUrl: (url: string) => string;
 export declare const getUrlWithoutParams: (url?: string | undefined) => string | undefined;
 export declare const isLocalUrl: (url: string) => boolean;
-export declare const vw: (percentageWidth: number, rounded?: boolean) => number;
-export declare const vh: (percentageHeight: number, rounded?: boolean) => number;
 export declare const generateRandomId: (a?: string) => string;
 export declare const emojiRegex: RegExp;
 export declare const urlRegex: RegExp;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "5.22.0-beta.2",
+  "version": "5.22.0-beta.4",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/components/Attachment/FileAttachment.tsx

@@ -24,8 +24,8 @@ import {
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useViewport } from '../../hooks/useViewport';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import { vw } from '../../utils/utils';
 
 const styles = StyleSheet.create({
   container: {
@@ -35,7 +35,6 @@ const styles = StyleSheet.create({
     padding: 8,
   },
   details: {
-    maxWidth: vw(60),
     paddingLeft: 16,
   },
   size: {
@@ -94,6 +93,7 @@ const FileAttachmentWithContext = <
       },
     },
   } = useTheme();
+  const { vw } = useViewport();
 
   const defaultOnPress = () => openUrlSafely(attachment.asset_url);
 
@@ -134,7 +134,16 @@ const FileAttachmentWithContext = <
     >
       <View style={[styles.container, { backgroundColor: white }, container, stylesProp.container]}>
         <FileAttachmentIcon mimeType={attachment.mime_type} size={attachmentSize} />
-        <View style={[styles.details, details, stylesProp.details]}>
+        <View
+          style={[
+            styles.details,
+            {
+              maxWidth: vw(60),
+            },
+            details,
+            stylesProp.details,
+          ]}
+        >
           <Text numberOfLines={2} style={[styles.title, { color: black }, title, stylesProp.title]}>
             {attachment.title}
           </Text>

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -20,13 +20,13 @@ import { renderAttachmentPickerItem } from './components/AttachmentPickerItem';
 import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+import { useViewport } from '../../hooks/useViewport';
 import {
   getPhotos,
   iOS14RefreshGallerySelection,
   oniOS14GalleryLibrarySelectionChange,
 } from '../../native';
 import type { Asset } from '../../types/types';
-import { vh } from '../../utils/utils';
 
 dayjs.extend(duration);
 
@@ -36,7 +36,6 @@ const styles = StyleSheet.create({
   },
 });
 
-const screenHeight = vh(100);
 const fullScreenHeight = Dimensions.get('window').height;
 
 export type AttachmentPickerProps = {
@@ -106,6 +105,9 @@ export const AttachmentPicker = React.forwardRef(
       setSelectedPicker,
       topInset,
     } = useAttachmentPickerContext();
+    const { vh } = useViewport();
+
+    const screenHeight = vh(100);
 
     const [currentIndex, setCurrentIndex] = useState(-1);
     const endCursorRef = useRef<string>();

package/src/components/AttachmentPicker/components/AttachmentPickerItem.tsx

@@ -8,10 +8,10 @@ import { lookup } from 'mime-types';
 
 import type { AttachmentPickerContextValue } from '../../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { useViewport } from '../../../hooks/useViewport';
 import { Recorder } from '../../../icons';
 import { getLocalAssetUri } from '../../../native';
 import type { Asset, File } from '../../../types/types';
-import { vw } from '../../../utils/utils';
 
 type AttachmentPickerItemType = Pick<
   AttachmentPickerContextValue,
@@ -39,6 +39,7 @@ const AttachmentVideo: React.FC<AttachmentVideoProps> = (props) => {
     selectedFiles,
     setSelectedFiles,
   } = props;
+  const { vw } = useViewport();
 
   const {
     theme: {
@@ -152,6 +153,7 @@ const AttachmentImage: React.FC<AttachmentImageProps> = (props) => {
       colors: { overlay },
     },
   } = useTheme();
+  const { vw } = useViewport();
 
   const size = vw(100) / (numberOfAttachmentPickerImageColumns || 3) - 2;
 

package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx

@@ -19,8 +19,8 @@ import {
 } from '../../contexts/channelsContext/ChannelsContext';
 import { useChatContext } from '../../contexts/chatContext/ChatContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useViewport } from '../../hooks/useViewport';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import { vw } from '../../utils/utils';
 
 const styles = StyleSheet.create({
   container: {
@@ -45,8 +45,6 @@ const styles = StyleSheet.create({
   title: { fontSize: 14, fontWeight: '700' },
 });
 
-const maxWidth = vw(80) - 16 - 40;
-
 export type ChannelPreviewMessengerPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<ChannelPreviewProps<StreamChatGenerics>, 'channel'> &
@@ -120,6 +118,9 @@ const ChannelPreviewMessengerWithContext = <
     PreviewMutedStatus = ChannelPreviewMutedStatus,
     unread,
   } = props;
+  const { vw } = useViewport();
+
+  const maxWidth = vw(80) - 16 - 40;
 
   const {
     theme: {

package/src/components/ChannelPreview/hooks/useChannelPreviewDisplayName.ts

@@ -3,11 +3,9 @@ import { useEffect, useState } from 'react';
 import type { Channel, ChannelMemberResponse } from 'stream-chat';
 
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useViewport } from '../../../hooks/useViewport';
 
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-import { vw } from '../../../utils/utils';
-
-const DEFAULT_MAX_CHARACTER_LENGTH = (vw(100) - 16) / 6;
 
 const ELLIPSIS = `...`;
 
@@ -81,6 +79,9 @@ export const useChannelPreviewDisplayName = <
   characterLength?: number,
 ) => {
   const { client } = useChatContext<StreamChatGenerics>();
+  const { vw } = useViewport();
+
+  const DEFAULT_MAX_CHARACTER_LENGTH = (vw(100) - 16) / 6;
 
   const currentUserId = client?.userID;
   const members = channel?.state?.members;

package/src/components/ImageGallery/ImageGallery.tsx

@@ -55,18 +55,16 @@ import {
   useOverlayContext,
 } from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useViewport } from '../../hooks/useViewport';
 import { isVideoPackageAvailable, VideoType } from '../../native';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
 import { getUrlOfImageAttachment } from '../../utils/getUrlOfImageAttachment';
-import { vh, vw } from '../../utils/utils';
 import { getGiphyMimeType } from '../Attachment/utils/getGiphyMimeType';
 
 const isAndroid = Platform.OS === 'android';
 const fullScreenHeight = Dimensions.get('screen').height;
-const measuredScreenHeight = vh(100);
-const screenWidth = vw(100);
-const halfScreenWidth = vw(50);
+
 const MARGIN = 32;
 
 export enum HasPinched {
@@ -162,6 +160,12 @@ export const ImageGallery = <
   const { messages, selectedMessage, setSelectedMessage } =
     useImageGalleryContext<StreamChatGenerics>();
 
+  const { vh, vw } = useViewport();
+
+  const measuredScreenHeight = vh(100);
+  const screenWidth = vw(100);
+  const halfScreenWidth = vw(50);
+
   /**
    * Height constants
    */
@@ -571,21 +575,7 @@ export const ImageGallery = <
                     simultaneousHandlers={[pinchRef]}
                   >
                     <Animated.View style={StyleSheet.absoluteFill}>
-                      <Animated.View
-                        style={[
-                          styles.animatedContainer,
-                          pagerStyle,
-                          pager,
-                          {
-                            transform: [
-                              { scaleX: -1 }, // Also only here for opening, wrong direction when not included
-                              {
-                                translateX: translationX.value, // Only here for opening, wrong index when this is not included
-                              },
-                            ],
-                          },
-                        ]}
-                      >
+                      <Animated.View style={[styles.animatedContainer, pagerStyle, pager]}>
                         {imageGalleryAttachments.map((photo, i) =>
                           photo.type === 'video' ? (
                             <AnimatedGalleryVideo

package/src/components/ImageGallery/components/AnimatedGalleryImage.tsx

@@ -3,10 +3,8 @@ import { View } from 'react-native';
 import type { ImageStyle, StyleProp } from 'react-native';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 
-import { vw } from '../../../utils/utils';
+import { useViewport } from '../../../hooks/useViewport';
 
-const screenWidth = vw(100);
-const halfScreenWidth = vw(50);
 const oneEighth = 1 / 8;
 
 type Props = {
@@ -40,6 +38,10 @@ export const AnimatedGalleryImage: React.FC<Props> = React.memo(
       translateX,
       translateY,
     } = props;
+    const { vw } = useViewport();
+
+    const screenWidth = vw(100);
+    const halfScreenWidth = vw(50);
 
     /**
      * The current image, designated by selected is scaled and translated

package/src/components/ImageGallery/components/AnimatedGalleryVideo.tsx

@@ -3,6 +3,7 @@ import { StyleSheet, View, ViewStyle } from 'react-native';
 import type { StyleProp } from 'react-native';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 
+import { useViewport } from '../../../hooks/useViewport';
 import {
   isVideoPackageAvailable,
   PlaybackStatus,
@@ -12,11 +13,8 @@ import {
   VideoType,
 } from '../../../native';
 
-import { vw } from '../../../utils/utils';
 import { Spinner } from '../../Spinner/Spinner';
 
-const screenWidth = vw(100);
-const halfScreenWidth = vw(50);
 const oneEighth = 1 / 8;
 
 export type AnimatedGalleryVideoType = {
@@ -74,6 +72,10 @@ export const AnimatedGalleryVideo: React.FC<AnimatedGalleryVideoType> = React.me
       translateY,
       videoRef,
     } = props;
+    const { vw } = useViewport();
+
+    const screenWidth = vw(100);
+    const halfScreenWidth = vw(50);
 
     const onLoadStart = () => {
       setOpacity(1);

package/src/components/ImageGallery/components/ImageGrid.tsx

@@ -5,8 +5,8 @@ import { BottomSheetFlatList, TouchableOpacity } from '@gorhom/bottom-sheet';
 
 import { VideoThumbnail } from '../../../components/Attachment/VideoThumbnail';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { useViewport } from '../../../hooks/useViewport';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-import { vw } from '../../../utils/utils';
 
 import type { Photo } from '../ImageGallery';
 
@@ -71,6 +71,7 @@ const GridImage = <
       },
     },
   } = useTheme();
+  const { vw } = useViewport();
   const { imageComponent, ...restItem } = item;
 
   const { numberOfImageGalleryGridColumns, selectAndClose, type, uri } = restItem;

package/src/components/Indicators/EmptyStateIndicator.tsx

@@ -3,10 +3,8 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+import { useViewport } from '../../hooks/useViewport';
 import { MessageIcon } from '../../icons/MessageIcon';
-import { vw } from '../../utils/utils';
-
-const width = vw(33);
 
 const styles = StyleSheet.create({
   channelContainer: {
@@ -17,7 +15,6 @@ const styles = StyleSheet.create({
   channelDetails: {
     fontSize: 14,
     textAlign: 'center',
-    width: vw(66),
   },
   channelTitle: {
     fontSize: 16,
@@ -37,6 +34,8 @@ export const EmptyStateIndicator: React.FC<EmptyStateProps> = ({ listType }) =>
       emptyStateIndicator: { channelContainer, channelDetails, channelTitle },
     },
   } = useTheme();
+  const { vw } = useViewport();
+  const width = vw(33);
   const { t } = useTranslationContext();
 
   switch (listType) {
@@ -51,7 +50,7 @@ export const EmptyStateIndicator: React.FC<EmptyStateProps> = ({ listType }) =>
             {t("Let's start chatting!")}
           </Text>
           <Text
-            style={[styles.channelDetails, { color: grey }, channelDetails]}
+            style={[styles.channelDetails, { color: grey, width: vw(66) }, channelDetails]}
             testID='empty-channel-state-details'
           >
             {t('How about sending your first message to a friend?')}

package/src/components/Message/MessageSimple/MessageContent.tsx

@@ -19,8 +19,9 @@ import {
   useTranslationContext,
 } from '../../../contexts/translationContext/TranslationContext';
 
+import { useViewport } from '../../../hooks/useViewport';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-import { MessageStatusTypes, vw } from '../../../utils/utils';
+import { MessageStatusTypes } from '../../../utils/utils';
 
 const styles = StyleSheet.create({
   containerInner: {
@@ -164,6 +165,7 @@ const MessageContentWithContext = <
       },
     },
   } = useTheme();
+  const { vw } = useViewport();
 
   const getDateText = (formatter?: (date: TDateTimeParserInput) => string) => {
     if (!message.created_at) return '';

package/src/components/MessageList/InlineUnreadIndicator.tsx

@@ -4,7 +4,7 @@ import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
-import { vw } from '../../utils/utils';
+import { useViewport } from '../../hooks/useViewport';
 
 const styles = StyleSheet.create({
   container: {
@@ -28,6 +28,7 @@ export const InlineUnreadIndicator: React.FC = () => {
     },
   } = useTheme();
   const { t } = useTranslationContext();
+  const { vw } = useViewport();
 
   return (
     <View style={[styles.container, container]}>

package/src/components/MessageOverlay/MessageActionList.tsx

@@ -10,8 +10,8 @@ import {
 } from '../../contexts/messageOverlayContext/MessageOverlayContext';
 import type { OverlayProviderProps } from '../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useViewport } from '../../hooks/useViewport';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import { vw } from '../../utils/utils';
 
 export type MessageActionListPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -52,6 +52,7 @@ const MessageActionListWithContext = <
     message,
     messageReactions,
   };
+  const { vw } = useViewport();
 
   const {
     theme: {
@@ -89,7 +90,7 @@ const MessageActionListWithContext = <
         width.value = layout.width;
         height.value = layout.height;
       }}
-      style={[styles.container, { backgroundColor: white_snow }, showScreenStyle]}
+      style={[styles.container, { backgroundColor: white_snow, minWidth: vw(65) }, showScreenStyle]}
       testID='message-action-list'
     >
       {messageActions?.map((messageAction, index) => (
@@ -154,17 +155,8 @@ const styles = StyleSheet.create({
   container: {
     borderRadius: 16,
     marginTop: 8,
-    minWidth: vw(65),
     overflow: 'hidden',
   },
-  row: {
-    alignItems: 'center',
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
-    minWidth: vw(65),
-    paddingHorizontal: 20,
-    paddingVertical: 10,
-  },
   titleStyle: {
     paddingLeft: 20,
   },

package/src/components/MessageOverlay/MessageActionListItem.tsx

@@ -6,8 +6,8 @@ import Animated from 'react-native-reanimated';
 import { useMessageActionAnimation } from './hooks/useMessageActionAnimation';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useViewport } from '../../hooks/useViewport';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import { vw } from '../../utils/utils';
 import type { MessageOverlayPropsWithContext } from '../MessageOverlay/MessageOverlay';
 
 export type ActionType =
@@ -50,6 +50,7 @@ const MessageActionListItemWithContext = <
   props: MessageActionListItemProps<StreamChatGenerics>,
 ) => {
   const { action, actionType, icon, index, length, title, titleStyle } = props;
+  const { vw } = useViewport();
 
   const {
     theme: {
@@ -65,6 +66,9 @@ const MessageActionListItemWithContext = <
       <Animated.View
         style={[
           styles.row,
+          {
+            minWidth: vw(65),
+          },
           index !== length - 1 ? { ...styles.bottomBorder, borderBottomColor: border } : {},
           animatedStyle,
           messageActions.actionContainer,
@@ -114,7 +118,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     flexDirection: 'row',
     justifyContent: 'flex-start',
-    minWidth: vw(65),
     paddingHorizontal: 20,
     paddingVertical: 10,
   },

package/src/components/MessageOverlay/MessageOverlay.tsx

@@ -41,8 +41,8 @@ import {
 } from '../../contexts/overlayContext/OverlayContext';
 import { mergeThemes, ThemeProvider, useTheme } from '../../contexts/themeContext/ThemeContext';
 
+import { useViewport } from '../../hooks/useViewport';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import { vh, vw } from '../../utils/utils';
 import { MessageTextContainer } from '../Message/MessageSimple/MessageTextContainer';
 import {
   OverlayReactions as DefaultOverlayReactions,
@@ -78,8 +78,6 @@ const styles = StyleSheet.create({
   scrollView: { overflow: Platform.OS === 'ios' ? 'visible' : 'scroll' },
 });
 
-const screenHeight = vh(100);
-const halfScreenHeight = vh(50);
 const DefaultMessageTextNumberOfLines = 5;
 
 export type MessageOverlayPropsWithContext<
@@ -154,6 +152,10 @@ const MessageOverlayWithContext = <
   };
 
   const { theme } = useTheme();
+  const { vh, vw } = useViewport();
+
+  const screenHeight = vh(100);
+  const halfScreenHeight = vh(50);
 
   const myMessageTheme = messagesContext?.myMessageTheme;
   const wrapMessageInTheme = clientId === message?.user?.id && !!myMessageTheme;

package/src/components/Thread/components/ThreadFooterComponent.tsx

@@ -12,8 +12,8 @@ import {
   useThreadContext,
 } from '../../../contexts/threadContext/ThreadContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { useViewport } from '../../../hooks/useViewport';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-import { vw } from '../../../utils/utils';
 
 const styles = StyleSheet.create({
   absolute: { position: 'absolute' },
@@ -47,6 +47,7 @@ const ThreadFooterComponentWithContext = <
 ) => {
   const { Message, thread } = props;
   const { t } = useTranslationContext();
+  const { vw } = useViewport();
 
   const {
     theme: {

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

@@ -2,7 +2,6 @@ import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
 import type { CircleProps, Color, StopProps } from 'react-native-svg';
 
 import type { IconProps } from '../../../icons/utils/base';
-import { vh } from '../../../utils/utils';
 
 export const DEFAULT_STATUS_ICON_SIZE = 16;
 
@@ -302,9 +301,6 @@ export type Theme = {
         iconContainer: ViewStyle;
         title: TextStyle;
       };
-      container: ViewStyle & {
-        maxHeight: number;
-      };
       emoji: {
         container: ViewStyle;
         text: TextStyle;
@@ -810,9 +806,6 @@ export const defaultTheme: Theme = {
         iconContainer: {},
         title: {},
       },
-      container: {
-        maxHeight: vh(25),
-      },
       emoji: {
         container: {},
         text: {},

package/src/hooks/useViewport.ts

@@ -0,0 +1,41 @@
+import { useEffect, useMemo, useState } from 'react';
+import { Dimensions } from 'react-native';
+
+/**
+ * A custom hook that provides functions to calculate dimensions based on
+ * a percentage of the viewport height (vh) and viewport width (vw). It
+ * dynamically updates dimensions on changes in device orientation.
+ *
+ * @returns {Object} An object containing functions vh and vw.
+ */
+export const useViewport = (rounded?: boolean) => {
+  const [viewportDimensions, setViewportDimensions] = useState(Dimensions.get('window'));
+
+  useEffect(() => {
+    const subscriptions = Dimensions.addEventListener('change', ({ window }) => {
+      setViewportDimensions((prev) => {
+        const { height, width } = window;
+        if (prev.height !== height || prev.width !== width) {
+          return window;
+        }
+        return prev;
+      });
+    });
+
+    return () => subscriptions?.remove();
+  }, []);
+
+  const vw = (percentageWidth: number) => {
+    const value = viewportDimensions.width * (percentageWidth / 100);
+    return rounded ? Math.round(value) : value;
+  };
+
+  const vh = (percentageHeight: number) => {
+    const value = viewportDimensions.height * (percentageHeight / 100);
+    return rounded ? Math.round(value) : value;
+  };
+
+  const viewportFunctions = useMemo(() => ({ vh, vw }), [vh, vw]);
+
+  return viewportFunctions;
+};

package/src/i18n/en.json

@@ -22,7 +22,7 @@
   "File type not supported": "File type not supported",
   "Flag": "Flag",
   "Flag Message": "Flag Message",
-  "Flag action failed either due to a network issue or the message is already flagged": "Flag action failed either due to a network issue or the message is already flagged.",
+  "Flag action failed either due to a network issue or the message is already flagged": "Flag action failed either due to a network issue or the message is already flagged",
   "How about sending your first message to a friend?": "How about sending your first message to a friend?",
   "Instant Commands": "Instant Commands",
   "Let's start chatting!": "Let's start chatting!",