stream-chat-react-native-core 4.3.1 → 4.4.0-beta.3

package/src/components/Chat/Chat.tsx

@@ -5,6 +5,7 @@ import Dayjs from 'dayjs';
 
 import type { Channel } from 'stream-chat';
 
+import { useAppSettings } from './hooks/useAppSettings';
 import { useCreateChatContext } from './hooks/useCreateChatContext';
 import { useIsOnline } from './hooks/useIsOnline';
 import { useMutedUsers } from './hooks/useMutedUsers';
@@ -161,7 +162,10 @@ const ChatWithContext = <
 
   const setActiveChannel = (newChannel?: Channel<StreamChatGenerics>) => setChannel(newChannel);
 
+  const appSettings = useAppSettings(client, isOnline);
+
   const chatContext = useCreateChatContext({
+    appSettings,
     channel,
     client,
     connectionRecovering,

package/src/components/Chat/hooks/__tests__/useAppSettings.test.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Text } from 'react-native';
+
+import { render, waitFor } from '@testing-library/react-native';
+
+import type { StreamChat } from 'stream-chat';
+
+import { useAppSettings } from '../useAppSettings';
+
+describe('useAppSettings', () => {
+  it('will return a settings object if the backend call is successful', async () => {
+    const TestComponent = () => {
+      const isOnline = true;
+      const appSettings = useAppSettings(
+        {
+          getAppSettings: jest.fn().mockReturnValue(
+            Promise.resolve({
+              auto_translation_enabled: true,
+            }),
+          ),
+        } as unknown as StreamChat,
+        isOnline,
+      );
+
+      return <Text>{JSON.stringify(appSettings)}</Text>;
+    };
+
+    const { getByText } = render(<TestComponent />);
+
+    await waitFor(() => {
+      expect(getByText(JSON.stringify({ auto_translation_enabled: true }))).toBeTruthy();
+    });
+  });
+});

package/src/components/Chat/hooks/useAppSettings.ts

@@ -0,0 +1,39 @@
+import { useEffect, useRef, useState } from 'react';
+
+import type { AppSettingsAPIResponse, StreamChat } from 'stream-chat';
+import type { DefaultStreamChatGenerics } from 'stream-chat-react-native';
+
+export const useAppSettings = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  client: StreamChat<StreamChatGenerics>,
+  isOnline: boolean,
+): AppSettingsAPIResponse | null => {
+  const [appSettings, setAppSettings] = useState<AppSettingsAPIResponse | null>(null);
+  const isMounted = useRef(true);
+
+  useEffect(() => {
+    async function getAppSettings() {
+      try {
+        const appSettings = await client.getAppSettings();
+        if (isMounted.current) {
+          setAppSettings(appSettings);
+        }
+      } catch (error: unknown) {
+        if (error instanceof Error) {
+          console.error(`An error occurred while getting app settings: ${error}`);
+        }
+      }
+    }
+
+    if (isOnline) {
+      getAppSettings();
+    }
+
+    return () => {
+      isMounted.current = false;
+    };
+  }, [client, isOnline]);
+
+  return appSettings;
+};

package/src/components/Chat/hooks/useCreateChatContext.ts

@@ -6,6 +6,7 @@ import type { DefaultStreamChatGenerics } from '../../../types/types';
 export const useCreateChatContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
+  appSettings,
   channel,
   client,
   connectionRecovering,
@@ -21,6 +22,7 @@ export const useCreateChatContext = <
 
   const chatContext: ChatContextValue<StreamChatGenerics> = useMemo(
     () => ({
+      appSettings,
       channel,
       client,
       connectionRecovering,

package/src/components/Message/Message.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { GestureResponderEvent, Keyboard, StyleProp, View, ViewStyle } from 'react-native';
 
-import type { Attachment } from 'stream-chat';
+import type { Attachment, UserResponse } from 'stream-chat';
 
 import { useCreateMessageContext } from './hooks/useCreateMessageContext';
 import { useMessageActionHandlers } from './hooks/useMessageActionHandlers';
@@ -52,21 +52,34 @@ import {
 } from '../MessageList/hooks/useMessageList';
 import type { MessageActionListItemProps } from '../MessageOverlay/MessageActionListItem';
 
+export type TouchableEmitter =
+  | 'card'
+  | 'fileAttachment'
+  | 'gallery'
+  | 'giphy'
+  | 'message'
+  | 'messageContent'
+  | 'messageReplies'
+  | 'reactionList'
+  | 'textLink';
+
+export type TextMentionTouchableHandlerPayload<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = {
+  emitter: 'textMention';
+  additionalInfo?: { user?: UserResponse<StreamChatGenerics> };
+};
+
 export type TouchableHandlerPayload = {
   defaultHandler?: () => void;
-  emitter?:
-    | 'card'
-    | 'fileAttachment'
-    | 'gallery'
-    | 'giphy'
-    | 'message'
-    | 'messageContent'
-    | 'messageReplies'
-    | 'reactionList'
-    | 'textLink'
-    | 'textMention';
   event?: GestureResponderEvent;
-};
+} & (
+  | {
+      additionalInfo?: Record<string, unknown>;
+      emitter?: TouchableEmitter;
+    }
+  | TextMentionTouchableHandlerPayload
+);
 
 export type MessageTouchableHandlerPayload<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -595,45 +608,40 @@ const MessageWithContext = <
     onlyEmojis,
     onOpenThread,
     onPress: (payload) => {
-      onPressProp
-        ? onPressProp({
-            actionHandlers,
-            defaultHandler: payload.defaultHandler || onPress,
-            emitter: payload.emitter || 'message',
-            event: payload.event,
-            message,
-          })
-        : onPressMessageProp
-        ? onPressMessageProp({
-            actionHandlers,
-            defaultHandler: payload.defaultHandler || onPress,
-            emitter: payload.emitter || 'message',
-            event: payload.event,
-            message,
-          })
-        : payload.defaultHandler
-        ? payload.defaultHandler()
-        : onPress();
+      const onPressArgs = {
+        actionHandlers,
+        additionalInfo: payload.additionalInfo,
+        defaultHandler: payload.defaultHandler || onPress,
+        emitter: payload.emitter || 'message',
+        event: payload.event,
+        message,
+      };
+
+      const handleOnPress = () => {
+        if (onPressProp) return onPressProp(onPressArgs);
+        if (onPressMessageProp) return onPressMessageProp(onPressArgs);
+        if (payload.defaultHandler) return payload.defaultHandler();
+
+        return onPress();
+      };
+
+      handleOnPress();
     },
     onPressIn:
       onPressInProp || onPressInMessageProp
         ? (payload) => {
-            onPressInProp
-              ? onPressInProp({
-                  actionHandlers,
-                  defaultHandler: payload.defaultHandler,
-                  emitter: payload.emitter || 'message',
-                  event: payload.event,
-                  message,
-                })
-              : onPressInMessageProp &&
-                onPressInMessageProp({
-                  actionHandlers,
-                  defaultHandler: payload.defaultHandler,
-                  emitter: payload.emitter || 'message',
-                  event: payload.event,
-                  message,
-                });
+            const onPressInArgs = {
+              actionHandlers,
+              defaultHandler: payload.defaultHandler,
+              emitter: payload.emitter || 'message',
+              event: payload.event,
+              message,
+            };
+            const handleOnpressIn = () => {
+              if (onPressInProp) return onPressInProp(onPressInArgs);
+              if (onPressInMessageProp) return onPressInMessageProp(onPressInArgs);
+            };
+            handleOnpressIn();
           }
         : null,
     otherAttachments: attachments.other,

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

@@ -17,6 +17,8 @@ import {
   State,
 } from 'simple-markdown';
 
+import type { UserResponse } from 'stream-chat';
+
 import { parseLinksFromText } from './parseLinks';
 
 import type { MessageContextValue } from '../../../../contexts/messageContext/MessageContext';
@@ -147,10 +149,16 @@ export const renderText = <
     },
   };
 
-  const onLink = (url: string) =>
-    onLinkParams
+  const onLink = (url: string) => {
+    const pattern = new RegExp(/^\S+:\/\//);
+    if (!pattern.test(url)) {
+      url = 'http://' + url;
+    }
+
+    return onLinkParams
       ? onLinkParams(url)
       : Linking.canOpenURL(url).then((canOpenUrl) => canOpenUrl && Linking.openURL(url));
+  };
 
   const link: ReactNodeOutput = (node, output, { ...state }) => {
     const onPress = (event: GestureResponderEvent) => {
@@ -205,9 +213,16 @@ export const renderText = <
   const match: MatchFunction = (source) => regEx.exec(source);
 
   const mentionsReact: ReactNodeOutput = (node, output, { ...state }) => {
+    /**removes the @ prefix of username */
+    const userName = node.content[0]?.content?.substring(1);
     const onPress = (event: GestureResponderEvent) => {
       if (!preventPress && onPressParam) {
         onPressParam({
+          additionalInfo: {
+            user: mentioned_users?.find(
+              (user: UserResponse<StreamChatGenerics>) => userName === user.name,
+            ),
+          },
           emitter: 'textMention',
           event,
         });

package/src/components/MessageInput/FileUploadPreview.tsx

@@ -13,13 +13,15 @@ import {
   useMessagesContext,
 } from '../../contexts/messagesContext/MessagesContext';
 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 { FileState, ProgressIndicatorTypes } from '../../utils/utils';
-
+import { getIndicatorTypeForFileState, ProgressIndicatorTypes } from '../../utils/utils';
 import { getFileSizeDisplayText } from '../Attachment/FileAttachment';
 
 const FILE_PREVIEW_HEIGHT = 60;
+const WARNING_ICON_SIZE = 16;
 
 const styles = StyleSheet.create({
   dismiss: {
@@ -59,8 +61,55 @@ const styles = StyleSheet.create({
     marginLeft: 8,
     marginRight: 8,
   },
+  unsupportedFile: {
+    flexDirection: 'row',
+    paddingLeft: 10,
+  },
+  unsupportedFileText: {
+    fontSize: 16,
+  },
+  warningIconStyle: {
+    borderRadius: 24,
+    marginTop: 4,
+  },
 });
 
+const UnsupportedFileTypeOrFileSizeIndicator = ({
+  indicatorType,
+  item,
+}: {
+  indicatorType: typeof ProgressIndicatorTypes[keyof typeof ProgressIndicatorTypes];
+  item: FileUpload;
+}) => {
+  const {
+    theme: {
+      colors: { accent_red, grey },
+      messageInput: {
+        fileUploadPreview: { fileSizeText },
+      },
+    },
+  } = useTheme();
+
+  const { t } = useTranslationContext();
+  return indicatorType === ProgressIndicatorTypes.NOT_SUPPORTED ? (
+    <View style={styles.unsupportedFile}>
+      <Warning
+        height={WARNING_ICON_SIZE}
+        pathFill={accent_red}
+        style={styles.warningIconStyle}
+        width={WARNING_ICON_SIZE}
+      />
+      <Text style={[styles.unsupportedFileText, { color: grey }]}>
+        {t('File type not supported')}
+      </Text>
+    </View>
+  ) : (
+    <Text style={[styles.fileSizeText, { color: grey }, fileSizeText]}>
+      {getFileSizeDisplayText(item.file.size)}
+    </Text>
+  );
+};
+
 type FileUploadPreviewPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Pick<
@@ -81,14 +130,13 @@ const FileUploadPreviewWithContext = <
 
   const {
     theme: {
-      colors: { black, grey, grey_whisper, overlay },
+      colors: { black, grey_whisper, overlay },
       messageInput: {
         fileUploadPreview: {
           dismiss,
           fileContainer,
           fileContentContainer,
           filenameText,
-          fileSizeText,
           fileTextContainer,
           flatList,
         },
@@ -97,12 +145,7 @@ const FileUploadPreviewWithContext = <
   } = useTheme();
 
   const renderItem = ({ index, item }: { index: number; item: FileUpload }) => {
-    const indicatorType =
-      item.state === FileState.UPLOADING
-        ? ProgressIndicatorTypes.IN_PROGRESS
-        : item.state === FileState.UPLOAD_FAILED
-        ? ProgressIndicatorTypes.RETRY
-        : undefined;
+    const indicatorType = getIndicatorTypeForFileState(item.state);
 
     return (
       <>
@@ -110,7 +153,6 @@ const FileUploadPreviewWithContext = <
           action={() => {
             uploadFile({ newFile: item });
           }}
-          active={item.state !== FileState.UPLOADED && item.state !== FileState.FINISHED}
           style={styles.overlay}
           type={indicatorType}
         >
@@ -150,9 +192,12 @@ const FileUploadPreviewWithContext = <
                 >
                   {item.file.name || ''}
                 </Text>
-                <Text style={[styles.fileSizeText, { color: grey }, fileSizeText]}>
-                  {getFileSizeDisplayText(item.file.size)}
-                </Text>
+                {indicatorType !== null && (
+                  <UnsupportedFileTypeOrFileSizeIndicator
+                    indicatorType={indicatorType}
+                    item={item}
+                  />
+                )}
               </View>
             </View>
           </View>
@@ -235,6 +280,7 @@ export const FileUploadPreview = <
   props: FileUploadPreviewProps<StreamChatGenerics>,
 ) => {
   const { fileUploads, removeFile, uploadFile } = useMessageInputContext<StreamChatGenerics>();
+
   const { FileAttachmentIcon } = useMessagesContext<StreamChatGenerics>();
 
   return (

package/src/components/MessageInput/ImageUploadPreview.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FlatList, Image, StyleSheet, TouchableOpacity, View } from 'react-native';
+import { FlatList, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
 import { UploadProgressIndicator } from './UploadProgressIndicator';
 
@@ -9,11 +9,14 @@ import {
   useMessageInputContext,
 } from '../../contexts/messageInputContext/MessageInputContext';
 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 { FileState, ProgressIndicatorTypes } from '../../utils/utils';
+import { getIndicatorTypeForFileState, ProgressIndicatorTypes } from '../../utils/utils';
 
 const IMAGE_PREVIEW_SIZE = 100;
+const WARNING_ICON_SIZE = 16;
 
 const styles = StyleSheet.create({
   dismiss: {
@@ -22,17 +25,45 @@ const styles = StyleSheet.create({
     right: 8,
     top: 8,
   },
+  fileSizeText: {
+    fontSize: 12,
+    paddingLeft: 10,
+  },
   flatList: { paddingBottom: 12 },
+  iconContainer: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
   itemContainer: {
     flexDirection: 'row',
     height: IMAGE_PREVIEW_SIZE,
     marginLeft: 8,
   },
+  unsupportedImage: {
+    borderRadius: 20,
+    bottom: 8,
+    flexDirection: 'row',
+    marginLeft: 3,
+    position: 'absolute',
+  },
   upload: {
     borderRadius: 10,
     height: IMAGE_PREVIEW_SIZE,
     width: IMAGE_PREVIEW_SIZE,
   },
+  warningIconStyle: {
+    borderRadius: 24,
+    marginLeft: 4,
+    marginTop: 4,
+  },
+  warningText: {
+    alignItems: 'center',
+    color: 'black',
+    fontSize: 10,
+    justifyContent: 'center',
+    paddingRight: 8,
+  },
 });
 
 type ImageUploadPreviewPropsWithContext<
@@ -46,6 +77,8 @@ export type ImageUploadPreviewProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Partial<ImageUploadPreviewPropsWithContext<StreamChatGenerics>>;
 
+type ImageUploadPreviewItem = { index: number; item: ImageUpload };
+
 const ImageUploadPreviewWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
@@ -55,52 +88,72 @@ const ImageUploadPreviewWithContext = <
 
   const {
     theme: {
-      colors: { overlay, white },
+      colors: { overlay },
       messageInput: {
         imageUploadPreview: { dismiss, flatList, itemContainer, upload },
       },
     },
   } = useTheme();
 
-  const renderItem = ({ index, item }: { index: number; item: ImageUpload }) => (
-    <View
-      style={[
-        styles.itemContainer,
-        index === imageUploads.length - 1 ? { marginRight: 8 } : {},
-        itemContainer,
-      ]}
-    >
-      <UploadProgressIndicator
-        action={() => {
-          uploadImage({ newImage: item });
-        }}
-        active={item.state !== FileState.UPLOADED && item.state !== FileState.FINISHED}
-        style={styles.upload}
-        type={
-          item.state === FileState.UPLOADING
-            ? ProgressIndicatorTypes.IN_PROGRESS
-            : item.state === FileState.UPLOAD_FAILED
-            ? ProgressIndicatorTypes.RETRY
-            : undefined
-        }
-      >
-        <Image
-          resizeMode='cover'
-          source={{ uri: item.file.uri || item.url }}
-          style={[styles.upload, upload]}
-        />
-      </UploadProgressIndicator>
-      <TouchableOpacity
-        onPress={() => {
-          removeImage(item.id);
-        }}
-        style={[styles.dismiss, { backgroundColor: overlay }, dismiss]}
-        testID='remove-image-upload-preview'
-      >
-        <Close pathFill={white} />
-      </TouchableOpacity>
-    </View>
-  );
+  const UnsupportedImageTypeIndicator = ({
+    indicatorType,
+  }: {
+    indicatorType: typeof ProgressIndicatorTypes[keyof typeof ProgressIndicatorTypes] | null;
+  }) => {
+    const {
+      theme: {
+        colors: { accent_red, overlay, white },
+      },
+    } = useTheme();
+
+    const { t } = useTranslationContext();
+    return indicatorType === ProgressIndicatorTypes.NOT_SUPPORTED ? (
+      <View style={[styles.unsupportedImage, { backgroundColor: overlay }]}>
+        <View style={[styles.iconContainer]}>
+          <Warning
+            height={WARNING_ICON_SIZE}
+            pathFill={accent_red}
+            style={styles.warningIconStyle}
+            width={WARNING_ICON_SIZE}
+          />
+          <Text style={[styles.warningText, { color: white }]}>{t('Not supported')}</Text>
+        </View>
+      </View>
+    ) : null;
+  };
+
+  const renderItem = ({ index, item }: ImageUploadPreviewItem) => {
+    const indicatorType = getIndicatorTypeForFileState(item.state);
+    const itemMarginForIndex = index === imageUploads.length - 1 ? { marginRight: 8 } : {};
+
+    return (
+      <View style={[styles.itemContainer, itemMarginForIndex, itemContainer]}>
+        <UploadProgressIndicator
+          action={() => {
+            uploadImage({ newImage: item });
+          }}
+          style={styles.upload}
+          type={indicatorType}
+        >
+          <Image
+            resizeMode='cover'
+            source={{ uri: item.file.uri || item.url }}
+            style={[styles.upload, upload]}
+          />
+        </UploadProgressIndicator>
+        <TouchableOpacity
+          onPress={() => {
+            removeImage(item.id);
+          }}
+          style={[styles.dismiss, { backgroundColor: overlay }, dismiss]}
+          testID='remove-image-upload-preview'
+        >
+          <Close />
+        </TouchableOpacity>
+        <UnsupportedImageTypeIndicator indicatorType={indicatorType} />
+      </View>
+    );
+  };
 
   return imageUploads.length > 0 ? (
     <FlatList