Merge branch 'develop' into V7

# Conflicts:
#	examples/SampleApp/yarn.lock
#	package/src/components/Attachment/Gallery.tsx

Author: isekovanic

package/src/components/Attachment/Gallery.tsx

@@ -4,14 +4,14 @@ import { Pressable, StyleSheet, Text, View } from 'react-native';
 import type { Attachment, LocalMessage } from 'stream-chat';
 
 import { GalleryImage } from './GalleryImage';
-import { ImageReloadIndicator } from './ImageReloadIndicator';
 import { buildGallery } from './utils/buildGallery/buildGallery';
 
 import type { Thumbnail } from './utils/buildGallery/types';
 import { getGalleryImageBorderRadius } from './utils/getGalleryImageBorderRadius';
 
 import { openUrlSafely } from './utils/openUrlSafely';
 
+import { useTranslationContext } from '../../contexts';
 import { useChatConfigContext } from '../../contexts/chatConfigContext/ChatConfigContext';
 import {
   ImageGalleryContextValue,
@@ -58,6 +58,7 @@ export type GalleryPropsWithContext = Pick<
     | 'VideoThumbnail'
     | 'ImageLoadingIndicator'
     | 'ImageLoadingFailedIndicator'
+    | 'ImageReloadIndicator'
     | 'myMessageTheme'
   > &
   Pick<OverlayContextValue, 'setOverlay'> & {
@@ -86,6 +87,7 @@ const GalleryWithContext = (props: GalleryPropsWithContext) => {
     hasThreadReplies,
     ImageLoadingFailedIndicator,
     ImageLoadingIndicator,
+    ImageReloadIndicator,
     images,
     legacyImageViewerSwipeBehaviour,
     message,
@@ -203,6 +205,7 @@ const GalleryWithContext = (props: GalleryPropsWithContext) => {
                   colIndex={colIndex}
                   ImageLoadingFailedIndicator={ImageLoadingFailedIndicator}
                   ImageLoadingIndicator={ImageLoadingIndicator}
+                  ImageReloadIndicator={ImageReloadIndicator}
                   imagesAndVideos={imagesAndVideos}
                   invertedDirections={invertedDirections || false}
                   key={rowIndex}
@@ -252,6 +255,7 @@ type GalleryThumbnailProps = {
   | 'VideoThumbnail'
   | 'ImageLoadingIndicator'
   | 'ImageLoadingFailedIndicator'
+  | 'ImageReloadIndicator'
 > &
   Pick<ImageGalleryContextValue, 'setSelectedMessage' | 'setMessages'> &
   Pick<MessageContextValue, 'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'> &
@@ -263,6 +267,7 @@ const GalleryThumbnail = ({
   colIndex,
   ImageLoadingFailedIndicator,
   ImageLoadingIndicator,
+  ImageReloadIndicator,
   imagesAndVideos,
   invertedDirections,
   legacyImageViewerSwipeBehaviour,
@@ -295,6 +300,7 @@ const GalleryThumbnail = ({
       },
     },
   } = useTheme();
+  const { t } = useTranslationContext();
 
   const openImageViewer = () => {
     if (!legacyImageViewerSwipeBehaviour && message) {
@@ -386,6 +392,7 @@ const GalleryThumbnail = ({
             borderRadius={imageBorderRadius ?? borderRadius}
             ImageLoadingFailedIndicator={ImageLoadingFailedIndicator}
             ImageLoadingIndicator={ImageLoadingIndicator}
+            ImageReloadIndicator={ImageReloadIndicator}
             thumbnail={thumbnail}
           />
         </View>
@@ -400,7 +407,7 @@ const GalleryThumbnail = ({
           ]}
         >
           <Text style={[styles.moreImagesText, moreImagesText]}>
-            {`+${imagesAndVideos.length - 4}`}
+            {String(t('+{{count}}', { count: imagesAndVideos.length - 4 }))}
           </Text>
         </View>
       ) : null}
@@ -412,10 +419,15 @@ const GalleryImageThumbnail = ({
   borderRadius,
   ImageLoadingFailedIndicator,
   ImageLoadingIndicator,
+  ImageReloadIndicator,
   thumbnail,
 }: Pick<
   GalleryThumbnailProps,
-  'ImageLoadingFailedIndicator' | 'ImageLoadingIndicator' | 'thumbnail' | 'borderRadius'
+  | 'ImageLoadingFailedIndicator'
+  | 'ImageLoadingIndicator'
+  | 'ImageReloadIndicator'
+  | 'thumbnail'
+  | 'borderRadius'
 >) => {
   const {
     isLoadingImage,
@@ -563,6 +575,7 @@ export const Gallery = (props: GalleryProps) => {
     hasThreadReplies,
     ImageLoadingFailedIndicator: PropImageLoadingFailedIndicator,
     ImageLoadingIndicator: PropImageLoadingIndicator,
+    ImageReloadIndicator: PropImageReloadIndicator,
     images: propImages,
     message: propMessage,
     myMessageTheme: propMyMessageTheme,
@@ -594,6 +607,7 @@ export const Gallery = (props: GalleryProps) => {
     additionalPressableProps: contextAdditionalPressableProps,
     ImageLoadingFailedIndicator: ContextImageLoadingFailedIndicator,
     ImageLoadingIndicator: ContextImageLoadingIndicator,
+    ImageReloadIndicator: ContextImageReloadIndicator,
     legacyImageViewerSwipeBehaviour,
     myMessageTheme: contextMyMessageTheme,
     VideoThumbnail: ContextVideoThumnbnail,
@@ -623,6 +637,7 @@ export const Gallery = (props: GalleryProps) => {
   const ImageLoadingFailedIndicator =
     PropImageLoadingFailedIndicator || ContextImageLoadingFailedIndicator;
   const ImageLoadingIndicator = PropImageLoadingIndicator || ContextImageLoadingIndicator;
+  const ImageReloadIndicator = PropImageReloadIndicator || ContextImageReloadIndicator;
   const myMessageTheme = propMyMessageTheme || contextMyMessageTheme;
 
   return (
@@ -635,6 +650,7 @@ export const Gallery = (props: GalleryProps) => {
         hasThreadReplies: hasThreadReplies || !!message?.reply_count,
         ImageLoadingFailedIndicator,
         ImageLoadingIndicator,
+        ImageReloadIndicator,
         images,
         legacyImageViewerSwipeBehaviour,
         message,

package/src/components/Attachment/ImageReloadIndicator.tsx

@@ -6,13 +6,12 @@ import { Refresh } from '../../icons';
 
 const REFRESH_ICON_SIZE = 24;
 
-export const ImageReloadIndicator = ({
-  onReloadImage,
-  style,
-}: {
+export type ImageReloadIndicatorProps = {
   onReloadImage: () => void;
   style: React.ComponentProps<typeof Pressable>['style'];
-}) => {
+};
+
+export const ImageReloadIndicator = ({ onReloadImage, style }: ImageReloadIndicatorProps) => {
   const {
     theme: {
       colors: { grey_dark },

package/src/components/Channel/Channel.tsx

@@ -119,6 +119,7 @@ import { Gallery as GalleryDefault } from '../Attachment/Gallery';
 import { Giphy as GiphyDefault } from '../Attachment/Giphy';
 import { ImageLoadingFailedIndicator as ImageLoadingFailedIndicatorDefault } from '../Attachment/ImageLoadingFailedIndicator';
 import { ImageLoadingIndicator as ImageLoadingIndicatorDefault } from '../Attachment/ImageLoadingIndicator';
+import { ImageReloadIndicator as ImageReloadIndicatorDefault } from '../Attachment/ImageReloadIndicator';
 import { VideoThumbnail as VideoThumbnailDefault } from '../Attachment/VideoThumbnail';
 import { AutoCompleteSuggestionHeader as AutoCompleteSuggestionHeaderDefault } from '../AutoCompleteInput/AutoCompleteSuggestionHeader';
 import { AutoCompleteSuggestionItem as AutoCompleteSuggestionItemDefault } from '../AutoCompleteInput/AutoCompleteSuggestionItem';
@@ -320,6 +321,7 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
       | 'legacyImageViewerSwipeBehaviour'
       | 'ImageLoadingFailedIndicator'
       | 'ImageLoadingIndicator'
+      | 'ImageReloadIndicator'
       | 'markdownRules'
       | 'Message'
       | 'MessageActionList'
@@ -551,7 +553,6 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     handleRetry,
     handleThreadReply,
     hasCameraPicker = isImagePickerAvailable(),
-    hasCommands = true,
     hasCreatePoll,
     // If pickDocument isn't available, default to hiding the file picker
     hasFilePicker = isDocumentPickerAvailable(),
@@ -560,6 +561,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     hideStickyDateHeader = false,
     ImageLoadingFailedIndicator = ImageLoadingFailedIndicatorDefault,
     ImageLoadingIndicator = ImageLoadingIndicatorDefault,
+    ImageReloadIndicator = ImageReloadIndicatorDefault,
     ImageUploadPreview = ImageUploadPreviewDefault,
     initialScrollToFirstUnreadMessage = false,
     initialValue,
@@ -1807,7 +1809,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     FileUploadPreview,
     handleAttachButtonPress,
     hasCameraPicker,
-    hasCommands,
+    hasCommands: (getChannelConfigSafely()?.commands ?? []).length > 0,
     hasFilePicker,
     hasImagePicker,
     ImageUploadPreview,
@@ -1896,6 +1898,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
       hasCreatePoll === undefined ? pollCreationEnabled : hasCreatePoll && pollCreationEnabled,
     ImageLoadingFailedIndicator,
     ImageLoadingIndicator,
+    ImageReloadIndicator,
     initialScrollToFirstUnreadMessage: !messageId && initialScrollToFirstUnreadMessage, // when messageId is set, we scroll to the messageId instead of first unread
     InlineDateSeparator,
     InlineUnreadIndicator,

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

@@ -77,6 +77,8 @@ describe('Channel', () => {
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
     channel = chatClient.channel('messaging', mockedChannel.id);
     channel.cid = mockedChannel.channel.cid;
+    const getConfigSpy = jest.fn();
+    channel.getConfig = getConfigSpy;
   });
 
   afterEach(() => {

package/src/components/Channel/hooks/useCreateMessagesContext.ts

@@ -45,6 +45,7 @@ export const useCreateMessagesContext = ({
   hasCreatePoll,
   ImageLoadingFailedIndicator,
   ImageLoadingIndicator,
+  ImageReloadIndicator,
   initialScrollToFirstUnreadMessage,
   InlineDateSeparator,
   InlineUnreadIndicator,
@@ -162,6 +163,7 @@ export const useCreateMessagesContext = ({
       hasCreatePoll,
       ImageLoadingFailedIndicator,
       ImageLoadingIndicator,
+      ImageReloadIndicator,
       initialScrollToFirstUnreadMessage,
       InlineDateSeparator,
       InlineUnreadIndicator,

package/src/components/index.ts

@@ -8,6 +8,7 @@ export * from './Attachment/FileIcon';
 export * from './Attachment/Gallery';
 export * from './Attachment/Giphy';
 export * from './Attachment/VideoThumbnail';
+export * from './Attachment/ImageReloadIndicator';
 export * from './Attachment/utils/buildGallery/buildGallery';
 
 export * from './AttachmentPicker/AttachmentPicker';

package/src/contexts/messagesContext/MessagesContext.tsx

@@ -16,6 +16,7 @@ import type { GalleryProps } from '../../components/Attachment/Gallery';
 import type { GiphyProps } from '../../components/Attachment/Giphy';
 import type { ImageLoadingFailedIndicatorProps } from '../../components/Attachment/ImageLoadingFailedIndicator';
 import type { ImageLoadingIndicatorProps } from '../../components/Attachment/ImageLoadingIndicator';
+import { ImageReloadIndicatorProps } from '../../components/Attachment/ImageReloadIndicator';
 import type { VideoThumbnailProps } from '../../components/Attachment/VideoThumbnail';
 import type {
   MessagePressableHandlerPayload,
@@ -150,6 +151,11 @@ export type MessagesContextValue = Pick<MessageContextValue, 'isMessageAIGenerat
    */
   ImageLoadingFailedIndicator: React.ComponentType<ImageLoadingFailedIndicatorProps>;
 
+  /**
+   * The indicator rendered at the center of an image whenever its loading fails, used to trigger retries.
+   */
+  ImageReloadIndicator: React.ComponentType<ImageReloadIndicatorProps>;
+
   /**
    * The indicator rendered when image is loading. By default renders <ActivityIndicator/>
    */

package/src/hooks/index.ts

@@ -4,3 +4,4 @@ export * from './useViewport';
 export * from './useScreenDimensions';
 export * from './useStateStore';
 export * from './useStableCallback';
+export * from './useLoadingImage';

package/src/i18n/en.json

@@ -1,4 +1,7 @@
 {
+  "+{{count}}_many": "+{{count}}",
+  "+{{count}}_one": "+{{count}}",
+  "+{{count}}_other": "+{{count}}",
   "1 Reply": "1 Reply",
   "1 Thread Reply": "1 Thread Reply",
   "Add a comment": "Add a comment",

package/src/i18n/es.json

@@ -1,4 +1,7 @@
 {
+  "+{{count}}_many": "+{{count}}",
+  "+{{count}}_one": "+{{count}}",
+  "+{{count}}_other": "+{{count}}",
   "1 Reply": "1 respuesta",
   "1 Thread Reply": "1 respuesta de hilo",
   "Add a comment": "Agregar un comentario",