stream-chat-react-native-core 5.22.0-beta.1 → 5.22.0-beta.10

package/src/components/Indicators/EmptyStateIndicator.tsx

@@ -2,10 +2,9 @@ import React from 'react';
 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: {
@@ -16,7 +15,6 @@ const styles = StyleSheet.create({
   channelDetails: {
     fontSize: 14,
     textAlign: 'center',
-    width: vw(66),
   },
   channelTitle: {
     fontSize: 16,
@@ -36,6 +34,9 @@ export const EmptyStateIndicator: React.FC<EmptyStateProps> = ({ listType }) =>
       emptyStateIndicator: { channelContainer, channelDetails, channelTitle },
     },
   } = useTheme();
+  const { vw } = useViewport();
+  const width = vw(33);
+  const { t } = useTranslationContext();
 
   switch (listType) {
     case 'channel':
@@ -46,13 +47,13 @@ export const EmptyStateIndicator: React.FC<EmptyStateProps> = ({ listType }) =>
             style={[styles.channelTitle, { color: black }, channelTitle]}
             testID='empty-channel-state-title'
           >
-            {"Let's start chatting!"}
+            {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'
           >
-            {'How about sending your first message to a friend?'}
+            {t('How about sending your first message to a friend?')}
           </Text>
         </View>
       );

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/Message/MessageSimple/ReactionList.tsx

@@ -121,6 +121,7 @@ const ReactionListWithContext = <
         avatarWrapper: { leftAlign, spacer },
         reactionList: {
           container,
+          iconFillColor,
           middleIcon,
           radius: themeRadius,
           reactionBubble,
@@ -263,7 +264,7 @@ const ReactionListWithContext = <
             {reactions.map((reaction) => (
               <Icon
                 key={reaction.type}
-                pathFill={reaction.own ? accent_blue : grey}
+                pathFill={reaction.own ? iconFillColor || accent_blue : grey}
                 size={reactionSize / 2}
                 style={middleIcon}
                 supportedReactions={supportedReactions}

package/src/components/Message/MessageSimple/utils/generateMarkdownText.test.ts

@@ -0,0 +1,23 @@
+import { generateMarkdownText } from './generateMarkdownText';
+
+describe('generateMarkdownText', () => {
+  it.each([
+    ['', null],
+    ['  test message  ', 'test message'],
+    ['https://www.getstream.io', '[https://www.getstream.io](https://www.getstream.io)'],
+    [
+      'https://getstream-production.s3-accelerate.amazonaws.com/N336903591601695/33e78ef89e64642862a75c5cca2541eaf6b1c924/trimmedVideos/alert/2_270_881/outputVideo.mp4?AWSAccessKeyId=AKIAVJAW2AD2SQVQCBXV&Expires=1699998768&Signature=zdEMCGzf4Pq++16YkPprvN5NAds=',
+      '[https://getstream-production.s3-accelerate.amazonaws.com/N336903591601695/33e78ef89e64642862a75c5cca2541eaf6b1c924/trimmedVideos/alert/2_270_881/outputVideo.mp4?AWSAccessKeyId=AKIAVJAW2AD2SQVQCBXV&...](https://getstream-production.s3-accelerate.amazonaws.com/N336903591601695/33e78ef89e64642862a75c5cca2541eaf6b1c924/trimmedVideos/alert/2_270_881/outputVideo.mp4?AWSAccessKeyId=AKIAVJAW2AD2SQVQCBXV&Expires=1699998768&Signature=zdEMCGzf4Pq++16YkPprvN5NAds=)',
+    ],
+    ['Hi @getstream.io', 'Hi @getstream.io'],
+    [
+      'Hi test@gmail.com @test@gmail.com',
+      'Hi [test@gmail.com](mailto:test@gmail.com) @test@gmail.com',
+    ],
+    ['Hi @getstream.io getstream.io', 'Hi @getstream.io [getstream.io](http://getstream.io)'],
+    ['Hi <Stream>', 'Hi \\<Stream\\>'],
+  ])('Returns the generated markdown text for %p and %p', (text, expected) => {
+    const result = generateMarkdownText(text);
+    expect(result).toBe(expected);
+  });
+});

package/src/components/Message/MessageSimple/utils/generateMarkdownText.ts

@@ -2,16 +2,12 @@ import truncate from 'lodash/truncate';
 
 import { parseLinksFromText } from './parseLinks';
 
-import type { DefaultStreamChatGenerics } from '../../../../types/types';
-import type { MessageType } from '../../../MessageList/hooks/useMessageList';
-
-export const generateMarkdownText = <
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
->(
-  message: MessageType<StreamChatGenerics>,
-) => {
-  const { text } = message;
+// If you need to use any of the special characters literally (actually searching for a "*", for instance), you must escape it by putting a backslash in front of it.
+function escapeRegExp(text: string) {
+  return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
+}
 
+export const generateMarkdownText = (text?: string) => {
   if (!text) return null;
 
   // Trim the extra spaces from the text.
@@ -26,18 +22,21 @@ export const generateMarkdownText = <
       omission: '...',
     });
     // Convert raw links/emails in the text to respective markdown syntax.
-    // Eg: Hi getstream.io -> Hi [getstream.io](getstream.io).
-    const normalRegEx = new RegExp(linkInfo.raw, 'g');
+    // Eg: Hi @getstream.io -> Hi @[getstream.io](getstream.io).
+    const normalRegEx = new RegExp(escapeRegExp(linkInfo.raw), 'g');
     const markdown = `[${displayLink}](${linkInfo.encodedUrl})`;
     resultText = text.replace(normalRegEx, markdown);
 
     // After previous step, in some cases, the mentioned user after `@` might have a link/email so we convert it back to normal raw text.
     // Eg: Hi, @[test.user@gmail.com](mailto:test.user@gmail.com) to @test.user@gmail.com.
-    const mentionsRegex = new RegExp(`@\\[${displayLink}\\]\\(${linkInfo.encodedUrl}\\)`, 'g');
+    const mentionsRegex = new RegExp(
+      `@\\[${escapeRegExp(displayLink)}\\]\\(${escapeRegExp(linkInfo.encodedUrl)}\\)`,
+      'g',
+    );
     resultText = resultText.replace(mentionsRegex, `@${displayLink}`);
   }
 
-  resultText = resultText.replace(/[<&"'>]/g, '\\$&');
+  resultText = resultText.replace(/[<"'>]/g, '\\$&');
 
   return resultText;
 };

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

@@ -100,8 +100,9 @@ export const renderText = <
     onPress: onPressParam,
     preventPress,
   } = params;
+  const { text } = message;
 
-  const markdownText = generateMarkdownText<StreamChatGenerics>(message);
+  const markdownText = generateMarkdownText(text);
 
   const styles: MarkdownStyle = {
     ...defaultMarkdownStyles,
@@ -141,8 +142,17 @@ export const renderText = <
       : Linking.canOpenURL(url).then((canOpenUrl) => canOpenUrl && Linking.openURL(url));
   };
 
+  let previousLink: string | undefined;
   const linkReact: ReactNodeOutput = (node, output, { ...state }) => {
-    const url = node.target;
+    let url: string;
+    // Some long URLs with `&` separated parameters are trimmed and the url only until first param is taken.
+    // This is done because of internal link been taken from the original URL in react-native-markdown-package. So, we check for `withinLink` and take the previous full URL.
+    if (state?.withinLink && previousLink) {
+      url = previousLink;
+    } else {
+      url = node.target;
+      previousLink = node.target;
+    }
     const onPress = (event: GestureResponderEvent) => {
       if (!preventPress && onPressParam) {
         onPressParam({

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { FlatList, I18nManager, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
+import dayjs from 'dayjs';
+
 import { UploadProgressIndicator } from './UploadProgressIndicator';
 
 import { ChatContextValue, useChatContext } from '../../contexts';
 import {
-  FileUpload,
   MessageInputContextValue,
   useMessageInputContext,
 } from '../../contexts/messageInputContext/MessageInputContext';
@@ -18,7 +19,7 @@ import { useTranslationContext } from '../../contexts/translationContext/Transla
 import { Close } from '../../icons/Close';
 import { Warning } from '../../icons/Warning';
 import { isAudioPackageAvailable } from '../../native';
-import type { DefaultStreamChatGenerics } from '../../types/types';
+import type { DefaultStreamChatGenerics, FileUpload } from '../../types/types';
 import { FileState, getIndicatorTypeForFileState, ProgressIndicatorTypes } from '../../utils/utils';
 import { getFileSizeDisplayText } from '../Attachment/FileAttachment';
 import { WritingDirectionAwareText } from '../RTLComponents/WritingDirectionAwareText';
@@ -101,6 +102,19 @@ const UnsupportedFileTypeOrFileSizeIndicator = ({
     },
   } = useTheme();
 
+  const ONE_HOUR_IN_SECONDS = 3600;
+  let durationLabel = '00:00';
+  const videoDuration = item.file.duration;
+
+  if (videoDuration) {
+    const isDurationLongerThanHour = videoDuration / ONE_HOUR_IN_SECONDS >= 1;
+    const formattedDurationParam = isDurationLongerThanHour ? 'HH:mm:ss' : 'mm:ss';
+    const formattedVideoDuration = dayjs
+      .duration(videoDuration, 'second')
+      .format(formattedDurationParam);
+    durationLabel = formattedVideoDuration;
+  }
+
   const { t } = useTranslationContext();
 
   return indicatorType === ProgressIndicatorTypes.NOT_SUPPORTED ? (
@@ -117,7 +131,7 @@ const UnsupportedFileTypeOrFileSizeIndicator = ({
     </View>
   ) : (
     <WritingDirectionAwareText style={[styles.fileSizeText, { color: grey }, fileSizeText]}>
-      {item.file.duration || getFileSizeDisplayText(item.file.size)}
+      {videoDuration ? durationLabel : getFileSizeDisplayText(item.file.size)}
     </WritingDirectionAwareText>
   );
 };

package/src/components/MessageInput/ImageUploadPreview.tsx

@@ -13,7 +13,6 @@ import { UploadProgressIndicator } from './UploadProgressIndicator';
 
 import { ChatContextValue, useChatContext } from '../../contexts';
 import {
-  ImageUpload,
   MessageInputContextValue,
   useMessageInputContext,
 } from '../../contexts/messageInputContext/MessageInputContext';
@@ -21,7 +20,7 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { Close } from '../../icons/Close';
 import { Warning } from '../../icons/Warning';
-import type { DefaultStreamChatGenerics } from '../../types/types';
+import type { DefaultStreamChatGenerics, ImageUpload } from '../../types/types';
 import { getIndicatorTypeForFileState, ProgressIndicatorTypes } from '../../utils/utils';
 
 const IMAGE_PREVIEW_SIZE = 100;

package/src/components/MessageInput/MessageInput.tsx

@@ -288,7 +288,7 @@ const MessageInputWithContext = <
     // Check if the file size of the image exceeds the threshold of 100MB
     if (
       imageToUpload &&
-      Number(imageToUpload.fileSize) / MEGA_BYTES_TO_BYTES > MAX_FILE_SIZE_TO_UPLOAD_IN_MB
+      Number(imageToUpload.size) / MEGA_BYTES_TO_BYTES > MAX_FILE_SIZE_TO_UPLOAD_IN_MB
     ) {
       Alert.alert(
         t(

package/src/components/MessageInput/UploadProgressIndicator.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 import {
   ActivityIndicator,
   GestureResponderEvent,
@@ -24,7 +24,7 @@ export type UploadProgressIndicatorProps = {
   type?: 'in_progress' | 'retry' | 'not_supported' | 'inactive' | null;
 };
 
-export const UploadProgressIndicator: React.FC<UploadProgressIndicatorProps> = (props) => {
+export const UploadProgressIndicator = (props: PropsWithChildren<UploadProgressIndicatorProps>) => {
   const { action, children, style, type } = props;
 
   const {

package/src/components/MessageInput/__tests__/AudioAttachmentUploadPreviewExpo.test.tsx

@@ -5,7 +5,6 @@ import { act } from 'react-test-renderer';
 import { fireEvent, render } from '@testing-library/react-native';
 
 import {
-  FileUpload,
   MessageInputContext,
   MessageInputContextValue,
 } from '../../../contexts/messageInputContext/MessageInputContext';
@@ -13,6 +12,7 @@ import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
 
 import { generateFileUploadPreview } from '../../../mock-builders/generator/attachment';
+import type { FileUpload } from '../../../types/types';
 import { AudioAttachment, AudioAttachmentProps } from '../../Attachment/AudioAttachment';
 
 jest.mock('../../../native.ts', () => ({

package/src/components/MessageInput/__tests__/AudioAttachmentUploadPreviewNative.test.tsx

@@ -5,7 +5,6 @@ import { act } from 'react-test-renderer';
 import { fireEvent, render } from '@testing-library/react-native';
 
 import {
-  FileUpload,
   MessageInputContext,
   MessageInputContextValue,
 } from '../../../contexts/messageInputContext/MessageInputContext';
@@ -13,6 +12,7 @@ import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
 
 import { generateFileUploadPreview } from '../../../mock-builders/generator/attachment';
+import type { FileUpload } from '../../../types/types';
 import { AudioAttachment, AudioAttachmentProps } from '../../Attachment/AudioAttachment';
 
 jest.mock('../../../native.ts', () => {

package/src/components/MessageInput/__tests__/MessageInput.test.js

@@ -39,12 +39,12 @@ describe('MessageInput', () => {
       selectedImages: [
         generateImageAttachment({
           file: { height: 100, uri: 'https://picsum.photos/200/300', width: 100 },
-          fileSize: 500000000,
+          size: 500000000,
           uri: 'https://picsum.photos/200/300',
         }),
         generateImageAttachment({
           file: { height: 100, uri: 'https://picsum.photos/200/300', width: 100 },
-          fileSize: 600000000,
+          size: 600000000,
           uri: 'https://picsum.photos/200/300',
         }),
       ],

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/channelContext/ChannelContext.tsx

@@ -137,6 +137,11 @@ export type ChannelContextValue<
   scrollToFirstUnreadThreshold: number;
   setLastRead: React.Dispatch<React.SetStateAction<Date | undefined>>;
   setTargetedMessage: (messageId: string) => void;
+  /**
+   * Abort controller for cancelling async requests made for uploading images/files
+   * Its a map of filename and AbortController
+   */
+  uploadAbortControllerRef: React.MutableRefObject<Map<string, AbortController>>;
   /**
    *
    * ```json