stream-chat-react-native-core 9.0.0-beta.2 → 9.0.0-beta.21

package/src/components/AttachmentPicker/components/AttachmentPickerGenericContent.tsx

@@ -0,0 +1,90 @@
+import React, { useCallback, useMemo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { useTheme } from '../../../contexts/themeContext/ThemeContext';
+import { IconProps } from '../../../icons';
+import { primitives } from '../../../theme';
+import { Button } from '../../ui';
+
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: semantics.backgroundCoreElevation1,
+          paddingHorizontal: primitives.spacing2xl,
+          paddingBottom: primitives.spacing3xl,
+        },
+        infoContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+        text: {
+          fontSize: primitives.typographyFontSizeMd,
+          color: semantics.textSecondary,
+          marginTop: 8,
+          marginHorizontal: 24,
+          textAlign: 'center',
+          maxWidth: 200,
+        },
+      }),
+    [semantics.backgroundCoreElevation1, semantics.textSecondary],
+  );
+};
+
+export type AttachmentPickerContentProps = {
+  height?: number;
+};
+
+export type AttachmentPickerGenericContentProps = AttachmentPickerContentProps & {
+  Icon: React.ComponentType<IconProps>;
+  onPress: () => void;
+  buttonText?: string;
+  description?: string;
+};
+
+export const AttachmentPickerGenericContent = (props: AttachmentPickerGenericContentProps) => {
+  const { height, buttonText, Icon, description, onPress } = props;
+  const styles = useStyles();
+
+  const {
+    theme: {
+      semantics,
+      attachmentPicker: {
+        content: { container, text, infoContainer },
+      },
+    },
+  } = useTheme();
+
+  const ThemedIcon = useCallback(
+    () => <Icon width={22} height={22} stroke={semantics.textTertiary} />,
+    [Icon, semantics.textTertiary],
+  );
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          height,
+        },
+        container,
+      ]}
+    >
+      <View style={[styles.infoContainer, infoContainer]}>
+        <ThemedIcon />
+        <Text style={[styles.text, text]}>{description}</Text>
+      </View>
+      <Button
+        variant={'secondary'}
+        type={'outline'}
+        size={'lg'}
+        label={buttonText}
+        onPress={onPress}
+      />
+    </View>
+  );
+};

package/src/components/AttachmentPicker/components/AttachmentTypePickerButton.tsx

@@ -19,7 +19,7 @@ import { useAttachmentPickerState } from '../../../hooks/useAttachmentPickerStat
 import {
   Camera,
   Picture,
-  Recorder,
+  VideoIcon,
   FilePickerIcon,
   PollThumbnail,
   CommandsIcon,
@@ -42,7 +42,7 @@ export const AttachmentTypePickerButton = ({
 }: AttachmentTypePickerButtonProps) => {
   const { disableAttachmentPicker } = useAttachmentPickerContext();
   const ButtonIcon = useCallback(
-    (props: IconProps) => Icon && <Icon {...props} width={14} height={14} />,
+    (props: IconProps) => Icon && <Icon {...props} width={20} height={20} />,
     [Icon],
   );
 
@@ -121,7 +121,7 @@ export const CameraPickerButton = () => {
       />
       {Platform.OS === 'android' ? (
         <AttachmentTypePickerButton
-          Icon={Recorder}
+          Icon={VideoIcon}
           selected={selectedPicker === 'camera-video'}
           onPress={onVideoRecorderPickerPress}
         />

package/src/components/AutoCompleteInput/AutoCompleteSuggestionCommandIcon.tsx

@@ -5,8 +5,8 @@ import { CommandVariants } from 'stream-chat';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Flag, GiphyIcon, Mute, Sound, UserAdd, UserDelete } from '../../icons';
-import { Imgur } from '../../icons/Imgur';
-import { Lightning } from '../../icons/Lightning';
+import { Lightning } from '../../icons/bolt';
+import { Imgur } from '../../icons/imgur';
 
 export const SuggestionCommandIcon = ({ name }: { name: CommandVariants }) => {
   const {

package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
-import { Smile } from '../../icons/Smile';
+import { Smile } from '../../icons/emoji';
 import { primitives } from '../../theme';
 
 export type AutoCompleteSuggestionHeaderProps = {

package/src/components/Channel/Channel.tsx

@@ -215,13 +215,11 @@ import { emojis } from '../MessageMenu/emojis';
 import { MessageActionList as MessageActionListDefault } from '../MessageMenu/MessageActionList';
 import { MessageActionListItem as MessageActionListItemDefault } from '../MessageMenu/MessageActionListItem';
 import { MessageMenu as MessageMenuDefault } from '../MessageMenu/MessageMenu';
-import {
-  MessageReactionPicker as MessageReactionPickerDefault,
-  toUnicodeScalarString,
-} from '../MessageMenu/MessageReactionPicker';
+import { MessageReactionPicker as MessageReactionPickerDefault } from '../MessageMenu/MessageReactionPicker';
 import { MessageUserReactions as MessageUserReactionsDefault } from '../MessageMenu/MessageUserReactions';
 import { MessageUserReactionsAvatar as MessageUserReactionsAvatarDefault } from '../MessageMenu/MessageUserReactionsAvatar';
 import { MessageUserReactionsItem as MessageUserReactionsItemDefault } from '../MessageMenu/MessageUserReactionsItem';
+import { toUnicodeScalarString } from '../MessageMenu/utils/toUnicodeScalarString';
 import { Reply as ReplyDefault } from '../Reply/Reply';
 
 export type MarkReadFunctionOptions = {
@@ -576,8 +574,8 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     allowThreadMessagesInChannel = true,
     asyncMessagesLockDistance = 50,
     asyncMessagesMinimumPressDuration = 500,
-    asyncMessagesMultiSendEnabled = true,
     asyncMessagesSlideToCancelDistance = 75,
+    audioRecordingSendOnComplete = true,
     AttachButton = AttachButtonDefault,
     Attachment = AttachmentDefault,
     attachmentPickerBottomSheetHeight = disableAttachmentPicker ? 72 : 333,
@@ -1562,10 +1560,56 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
   );
 
   const editMessage: InputMessageInputContextValue['editMessage'] = useStableCallback(
-    ({ localMessage, options }) =>
-      doUpdateMessageRequest
-        ? doUpdateMessageRequest(channel?.cid || '', localMessage, options)
-        : client.updateMessage(localMessage, undefined, options),
+    async ({ localMessage, options }) => {
+      if (!channel) {
+        throw new Error('Channel has not been initialized');
+      }
+
+      const cid = channel.cid;
+      const currentMessage = channel.state.findMessage(localMessage.id, localMessage.parent_id);
+      const isFailedMessage =
+        currentMessage?.status === MessageStatusTypes.FAILED ||
+        localMessage.status === MessageStatusTypes.FAILED;
+      const optimisticEditedAt = new Date();
+      const optimisticEditedAtString = optimisticEditedAt.toISOString();
+      const optimisticMessage = {
+        ...currentMessage,
+        ...localMessage,
+        cid,
+        message_text_updated_at: isFailedMessage ? undefined : optimisticEditedAtString,
+        updated_at: optimisticEditedAt,
+      } as unknown as LocalMessage;
+
+      updateMessage(optimisticMessage);
+      threadInstance?.updateParentMessageOrReplyLocally(
+        optimisticMessage as unknown as MessageResponse,
+      );
+      client.offlineDb?.executeQuerySafely(
+        (db) =>
+          db.updateMessage({
+            message: { ...optimisticMessage, cid },
+          }),
+        { method: 'updateMessage' },
+      );
+
+      const response = doUpdateMessageRequest
+        ? await doUpdateMessageRequest(cid, localMessage, options)
+        : await client.updateMessage(localMessage, undefined, options);
+
+      if (response?.message) {
+        updateMessage(response.message);
+        threadInstance?.updateParentMessageOrReplyLocally(response.message);
+        client.offlineDb?.executeQuerySafely(
+          (db) =>
+            db.updateMessage({
+              message: { ...response.message, cid },
+            }),
+          { method: 'updateMessage' },
+        );
+      }
+
+      return response;
+    },
   );
 
   /**
@@ -1852,7 +1896,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     allowSendBeforeAttachmentsUpload,
     asyncMessagesLockDistance,
     asyncMessagesMinimumPressDuration,
-    asyncMessagesMultiSendEnabled,
+    audioRecordingSendOnComplete,
     asyncMessagesSlideToCancelDistance,
     AttachButton,
     attachmentPickerBottomSheetHeight,

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

@@ -7,8 +7,8 @@ export const useCreateInputMessageInputContext = ({
   allowSendBeforeAttachmentsUpload,
   asyncMessagesLockDistance,
   asyncMessagesMinimumPressDuration,
-  asyncMessagesMultiSendEnabled,
   asyncMessagesSlideToCancelDistance,
+  audioRecordingSendOnComplete,
   AttachButton,
   attachmentPickerBottomSheetHeight,
   AttachmentPickerSelectionBar,
@@ -77,8 +77,8 @@ export const useCreateInputMessageInputContext = ({
       allowSendBeforeAttachmentsUpload,
       asyncMessagesLockDistance,
       asyncMessagesMinimumPressDuration,
-      asyncMessagesMultiSendEnabled,
       asyncMessagesSlideToCancelDistance,
+      audioRecordingSendOnComplete,
       AttachButton,
       attachmentPickerBottomSheetHeight,
       AttachmentPickerSelectionBar,

package/src/components/ChannelList/ChannelListHeaderErrorIndicator.tsx

@@ -38,7 +38,7 @@ const useStyles = () => {
         alignItems: 'center',
         justifyContent: 'center',
         width: '100%',
-        backgroundColor: semantics.backgroundCoreSurface,
+        backgroundColor: semantics.backgroundCoreSurfaceDefault,
         paddingVertical: primitives.spacingXs,
         paddingHorizontal: primitives.spacingSm,
         ...container,

package/src/components/ChannelList/ChannelListHeaderNetworkDownIndicator.tsx

@@ -32,7 +32,7 @@ const useStyles = () => {
         alignItems: 'center',
         justifyContent: 'center',
         width: '100%',
-        backgroundColor: semantics.backgroundCoreSurface,
+        backgroundColor: semantics.backgroundCoreSurfaceDefault,
         paddingVertical: primitives.spacingXs,
         paddingHorizontal: primitives.spacingSm,
         ...container,

package/src/components/ChannelList/Skeleton.tsx

@@ -16,7 +16,7 @@ const SkeletonBlock = ({ style }: { style: React.ComponentProps<typeof View>['st
   return (
     <View style={style}>
       <NativeShimmerView
-        baseColor={semantics.backgroundCoreSurface}
+        baseColor={semantics.backgroundCoreSurfaceDefault}
         duration={animationTime}
         gradientColor={semantics.skeletonLoadingHighlight}
         style={StyleSheet.absoluteFillObject}

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

@@ -20,6 +20,7 @@ import dispatchChannelDeletedEvent from '../../../mock-builders/event/channelDel
 import dispatchChannelHiddenEvent from '../../../mock-builders/event/channelHidden';
 import dispatchChannelTruncatedEvent from '../../../mock-builders/event/channelTruncated';
 import dispatchChannelUpdatedEvent from '../../../mock-builders/event/channelUpdated';
+import dispatchConnectionChangedEvent from '../../../mock-builders/event/connectionChanged';
 import dispatchConnectionRecoveredEvent from '../../../mock-builders/event/connectionRecovered';
 import dispatchMessageNewEvent from '../../../mock-builders/event/messageNew';
 import dispatchNotificationAddedToChannelEvent from '../../../mock-builders/event/notificationAddedToChannel';
@@ -75,6 +76,11 @@ const ChannelListSwipeActionsProbe = () => {
   return <Text testID='swipe-actions-enabled'>{`${swipeActionsEnabled}`}</Text>;
 };
 
+const ChannelListRefreshingProbe = () => {
+  const { refreshing } = useChannelsContext();
+  return <Text testID='refreshing'>{`${refreshing}`}</Text>;
+};
+
 const ChannelPreviewContent = ({ unread }) => <Text testID='preview-unread'>{`${unread}`}</Text>;
 
 const ChannelListWithChannelPreview = () => {
@@ -805,6 +811,43 @@ describe('ChannelList', () => {
       });
     });
 
+    describe('connection.changed', () => {
+      it('should keep background reconnection refreshes debounced and out of pull-to-refresh UI', async () => {
+        useMockedApis(chatClient, [queryChannelsApi([testChannel1])]);
+        const deferredPromise = new DeferredPromise();
+        const dateNowSpy = jest.spyOn(Date, 'now');
+        dateNowSpy.mockReturnValueOnce(0);
+        dateNowSpy.mockReturnValue(6000);
+
+        render(
+          <Chat client={chatClient}>
+            <ChannelList {...props} List={ChannelListRefreshingProbe} />
+          </Chat>,
+        );
+
+        await waitFor(() => {
+          expect(screen.getByTestId('refreshing').children[0]).toBe('false');
+        });
+
+        chatClient.queryChannels = jest.fn(() => deferredPromise.promise);
+
+        act(() => dispatchConnectionChangedEvent(chatClient, false));
+        act(() => dispatchConnectionChangedEvent(chatClient, true));
+
+        await waitFor(() => {
+          expect(chatClient.queryChannels).toHaveBeenCalled();
+        });
+
+        act(() => dispatchConnectionChangedEvent(chatClient, true));
+
+        expect(chatClient.queryChannels).toHaveBeenCalledTimes(1);
+        expect(screen.getByTestId('refreshing').children[0]).toBe('false');
+
+        deferredPromise.resolve([testChannel1]);
+        dateNowSpy.mockRestore();
+      });
+    });
+
     describe('channel.truncated', () => {
       it('should call the `onChannelTruncated` function prop, if provided', async () => {
         useMockedApis(chatClient, [queryChannelsApi([testChannel1])]);

package/src/components/ChannelList/hooks/__tests__/useChannelActionItems.test.tsx

@@ -110,7 +110,7 @@ describe('useChannelActionItems', () => {
       'destructive',
     ]);
     expect(result.current.map((item) => item.placement)).toEqual([
-      'both',
+      'swipe',
       'both',
       'sheet',
       'sheet',
@@ -266,7 +266,7 @@ describe('getChannelActionItems', () => {
 
     expect(actionItems[0].action).toBe(channelActions.unmuteChannel);
     expect(actionItems[0].label).toBe('Unmute Group');
-    expect(actionItems[0].placement).toBe('both');
+    expect(actionItems[0].placement).toBe('swipe');
 
     expect(actionItems[1].action).toBe(channelActions.unarchive);
     expect(actionItems[1].label).toBe('Unarchive Group');

package/src/components/ChannelList/hooks/useChannelActionItems.tsx

@@ -12,8 +12,8 @@ import { useIsDirectChat } from './useIsDirectChat';
 
 import { useTheme, useTranslationContext } from '../../../contexts';
 import type { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext';
-import { Archive, IconProps, Mute, BlockUser, Delete } from '../../../icons';
-import { ArrowBoxLeft } from '../../../icons/ArrowBoxLeft';
+import { Archive, IconProps, Mute, BlockUser, Delete, Sound } from '../../../icons';
+import { ArrowBoxLeft } from '../../../icons/leave';
 
 export type ChannelActionHandler = () => Promise<void> | void;
 
@@ -92,15 +92,18 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
         : muteActive
           ? unmuteChannel
           : muteChannel,
-      Icon: (props) => (
-        <Mute
-          width={20}
-          height={20}
-          {...props}
-          stroke={undefined}
-          fill={props.fill ?? props.stroke}
-        />
-      ),
+      Icon: (props) =>
+        muteActive ? (
+          <Sound width={20} height={20} {...props} />
+        ) : (
+          <Mute
+            width={20}
+            height={20}
+            {...props}
+            stroke={undefined}
+            fill={props.fill ?? props.stroke}
+          />
+        ),
       id: 'mute',
       label: isDirectChat
         ? muteActive
@@ -109,7 +112,7 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
         : muteActive
           ? t('Unmute Group')
           : t('Mute Group'),
-      placement: isDirectChat ? 'sheet' : 'both',
+      placement: isDirectChat ? 'sheet' : 'swipe',
       type: 'standard',
     },
   ];

package/src/components/ChannelList/hooks/usePaginatedChannels.ts

@@ -24,7 +24,7 @@ type Parameters = {
 
 const RETRY_INTERVAL_IN_MS = 5000;
 
-type QueryType = 'queryLocalDB' | 'reload' | 'refresh' | 'loadChannels';
+type QueryType = 'queryLocalDB' | 'reload' | 'refresh' | 'loadChannels' | 'backgroundRefresh';
 
 export type QueryChannels = (queryType?: QueryType, retryCount?: number) => Promise<void>;
 
@@ -68,6 +68,7 @@ export const usePaginatedChannels = ({
     const hasUpdatedData =
       queryType === 'loadChannels' ||
       queryType === 'refresh' ||
+      queryType === 'backgroundRefresh' ||
       [
         JSON.stringify(filtersRef.current) !== JSON.stringify(filters),
         JSON.stringify(sortRef.current) !== JSON.stringify(sort),
@@ -129,7 +130,7 @@ export const usePaginatedChannels = ({
     setActiveQueryType(null);
   };
 
-  const refreshList = async () => {
+  const refreshList = async ({ isBackground = false }: { isBackground?: boolean } = {}) => {
     const now = Date.now();
     // Only allow pull-to-refresh 5 seconds after last successful refresh.
     if (now - lastRefresh.current < RETRY_INTERVAL_IN_MS && error === undefined) {
@@ -137,7 +138,7 @@ export const usePaginatedChannels = ({
     }
 
     lastRefresh.current = Date.now();
-    await queryChannels('refresh');
+    await queryChannels(isBackground ? 'backgroundRefresh' : 'refresh');
   };
 
   const reloadList = async () => {
@@ -167,7 +168,9 @@ export const usePaginatedChannels = ({
       'connection.changed',
       async (event) => {
         if (event.online) {
-          await refreshList();
+          // Reconnection refreshes should stay silent, but still share the same debounce
+          // path as pull-to-refresh.
+          await refreshList({ isBackground: true });
         }
       },
     );
@@ -195,7 +198,7 @@ export const usePaginatedChannels = ({
     loadingNextPage: pagination?.isLoadingNext,
     loadNextPage: channelManager.loadNext,
     refreshing: activeQueryType === 'refresh',
-    refreshList,
+    refreshList: () => refreshList(),
     reloadList,
     staticChannelsActive,
   };

package/src/components/ChannelPreview/ChannelDetailsBottomSheet.tsx

@@ -6,7 +6,9 @@ import { Pressable } from 'react-native-gesture-handler';
 
 import { Channel } from 'stream-chat';
 
+import { ChannelPreviewMutedStatus } from './ChannelPreviewMutedStatus';
 import { ChannelPreviewTitle } from './ChannelPreviewTitle';
+import { useIsChannelMuted } from './hooks/useIsChannelMuted';
 
 import { useBottomSheetContext, useTheme, useTranslationContext } from '../../contexts';
 import { useSwipeRegistryContext } from '../../contexts/swipeableContext/SwipeRegistryContext';
@@ -14,6 +16,7 @@ import { useStableCallback } from '../../hooks';
 import { primitives } from '../../theme';
 import { ChannelActionItem } from '../ChannelList/hooks/useChannelActionItems';
 import { useChannelMembersState } from '../ChannelList/hooks/useChannelMembersState';
+import { useChannelMuteActive } from '../ChannelList/hooks/useChannelMuteActive';
 import { useChannelOnlineMemberCount } from '../ChannelList/hooks/useChannelOnlineMemberCount';
 import { useIsDirectChat } from '../ChannelList/hooks/useIsDirectChat';
 import { ChannelAvatar } from '../ui';
@@ -35,6 +38,9 @@ export const ChannelDetailsHeader = ({ channel }: ChannelDetailsHeaderProps) =>
   const memberCount = useMemo(() => Object.keys(members).length, [members]);
   const onlineCount = useChannelOnlineMemberCount(channel);
   const isDirectChat = useIsDirectChat(channel);
+  const { muted: channelMuted } = useIsChannelMuted(channel);
+  const directChatUserMuted = useChannelMuteActive(channel);
+  const muted = isDirectChat ? directChatUserMuted : channelMuted;
   const displayedMemberCount = memberCount > 9 ? '9+' : `${memberCount}`;
   const displayedOnlineCount = onlineCount > 9 ? '9+' : `${onlineCount}`;
   const membersAndOnlineLabel = useMemo(
@@ -51,7 +57,10 @@ export const ChannelDetailsHeader = ({ channel }: ChannelDetailsHeaderProps) =>
     <View style={styles.headerContainer}>
       <ChannelAvatar channel={channel} size={'lg'} />
       <View style={styles.metaContainer}>
-        <ChannelPreviewTitle channel={channel} />
+        <View style={styles.titleContainer}>
+          <ChannelPreviewTitle channel={channel} />
+          {muted ? <ChannelPreviewMutedStatus /> : null}
+        </View>
         <Text style={styles.headerMeta}>
           {isDirectChat ? (onlineCount === 1 ? t('Online') : t('Offline')) : membersAndOnlineLabel}
         </Text>
@@ -145,6 +154,11 @@ const useStyles = () => {
           gap: primitives.spacingXxs,
           ...header.metaContainer,
         },
+        titleContainer: {
+          alignItems: 'center',
+          flexDirection: 'row',
+          gap: primitives.spacingXxs,
+        },
         itemContainer: {
           flexDirection: 'row',
           alignItems: 'center',

package/src/components/ChannelPreview/ChannelPreviewMessage.tsx

@@ -21,7 +21,7 @@ import { useChatContext } from '../../contexts/chatContext/ChatContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 
-import { PollIcon } from '../../icons/PollIcon';
+import { PollIcon } from '../../icons/poll';
 import { primitives } from '../../theme';
 import { MessageStatusTypes } from '../../utils/utils';
 import { ErrorBadge } from '../ui';
@@ -76,6 +76,7 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
 
   const isFailedMessage =
     lastMessage?.status === MessageStatusTypes.FAILED || lastMessage?.type === 'error';
+  const showMessageDeliveryStatus = !isMessageDeleted;
 
   if (usersTyping.length > 0) {
     return <PreviewTypingIndicator channel={channel} usersTyping={usersTyping} />;
@@ -120,14 +121,18 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
   if (channel.data?.name || membersWithoutSelf.length > 1) {
     return (
       <View style={styles.container}>
-        <PreviewMessageDeliveryStatus channel={channel} message={lastMessage} />
+        {showMessageDeliveryStatus ? (
+          <PreviewMessageDeliveryStatus channel={channel} message={lastMessage} />
+        ) : null}
         <PreviewLastMessage message={lastMessage} />
       </View>
     );
   } else {
     return (
       <View style={styles.container}>
-        <PreviewMessageDeliveryStatus channel={channel} message={lastMessage} />
+        {showMessageDeliveryStatus ? (
+          <PreviewMessageDeliveryStatus channel={channel} message={lastMessage} />
+        ) : null}
         <PreviewLastMessage message={lastMessage} />
       </View>
     );