stream-chat-react-native-core 9.3.1 → 9.4.0-beta.2

package/src/components/ChannelDetails/hooks/useUserActivityStatus.ts

@@ -0,0 +1,39 @@
+import { useMemo } from 'react';
+
+import type { UserResponse } from 'stream-chat';
+
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { getDateString } from '../../../utils/i18n/getDateString';
+
+/**
+ * Returns the localized presence status string for a user:
+ *   - `t('Online')` when `user.online === true`
+ *   - `t('timestamp/UserActivityStatus')` (e.g. "Last seen 10 minutes ago") when offline
+ *     with a valid `last_active`
+ *   - `t('Offline')` otherwise (including `user === undefined` or an unparseable date)
+ *
+ * The relative time is produced through the shared `getDateString` + translation-key
+ * pipeline used by message timestamps, so the format follows the configured locale.
+ * @experimental This hook is experimental and is subject to change.
+ */
+export const useUserActivityStatus = (user?: UserResponse): string => {
+  const { t, tDateTimeParser } = useTranslationContext();
+
+  return useMemo(() => {
+    if (user?.online) return t('Online');
+
+    if (user?.last_active) {
+      const lastSeen = getDateString({
+        date: user.last_active,
+        t,
+        tDateTimeParser,
+        timestampTranslationKey: 'timestamp/UserActivityStatus',
+      });
+      if (typeof lastSeen === 'string') {
+        return lastSeen;
+      }
+    }
+
+    return t('Offline');
+  }, [t, tDateTimeParser, user?.last_active, user?.online]);
+};

package/src/components/ChannelDetails/index.ts

@@ -0,0 +1,3 @@
+export * from './ChannelDetails';
+export * from './components';
+export * from './hooks';

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

@@ -1,11 +1,5 @@
 export * from './listeners/useChannelUpdated';
-export * from './useChannelActionItems';
-export * from './useChannelActionItemsById';
-export * from './useChannelActions';
-export * from './useChannelMembershipState';
 export * from './useChannelMembersState';
-export * from './useChannelMuteActive';
 export * from './useChannelOnlineMemberCount';
-export * from './useIsDirectChat';
 export * from './useMutedChannels';
 export * from './useMutedUsers';

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

@@ -1,13 +1,19 @@
 import { Channel, EventTypes, Mute, StreamChat } from 'stream-chat';
 
 import { useChatContext } from '../../../contexts';
-import { useSyncClientEventsToChannel } from '../../../hooks/useSyncClientEvents';
+import { useSyncClientEvents } from '../../../hooks/useSyncClientEvents';
 
-const selector = (_channel: Channel, client: StreamChat) => client.mutedUsers;
+const selector = (client: StreamChat) => client.mutedUsers;
 const keys: EventTypes[] = ['health.check', 'notification.mutes_updated'];
-export function useMutedUsers(channel: Channel): Array<Mute>;
-export function useMutedUsers(channel?: Channel): Array<Mute> | undefined;
-export function useMutedUsers(channel?: Channel) {
+
+export function useMutedUsers(): Array<Mute>;
+/**
+ *
+ * @param @deprecated _channel - This parameter is deprecated because it is no longer necessary. It is kept for backwards compatibility only.
+ * @returns
+ */
+export function useMutedUsers(_channel: Channel): Array<Mute> | undefined;
+export function useMutedUsers(_channel?: Channel): Array<Mute> {
   const { client } = useChatContext();
-  return useSyncClientEventsToChannel({ channel, client, selector, stateChangeEventKeys: keys });
+  return useSyncClientEvents({ client, selector, stateChangeEventKeys: keys });
 }

package/src/components/ChannelPreview/ChannelDetailsBottomSheet.tsx

@@ -8,20 +8,19 @@ import type { Channel } from 'stream-chat';
 
 import { ChannelPreviewMutedStatus } from './ChannelPreviewMutedStatus';
 import { ChannelPreviewTitle } from './ChannelPreviewTitle';
-import { useIsChannelMuted } from './hooks/useIsChannelMuted';
 
 import { useBottomSheetContext } from '../../contexts/bottomSheetContext/BottomSheetContext';
 import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useSwipeRegistryContext } from '../../contexts/swipeableContext/SwipeRegistryContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+import type { ChannelActionItem } from '../../hooks/actions/useChannelActionItems';
+import { useChannelMuteActive } from '../../hooks/useChannelMuteActive';
+import { useIsDirectChat } from '../../hooks/useIsDirectChat';
 import { useStableCallback } from '../../hooks/useStableCallback';
 import { primitives } from '../../theme';
-import type { 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/Avatar/ChannelAvatar';
 import { StreamBottomSheetModalFlatList } from '../UIComponents/StreamBottomSheetModalFlatList';
 
@@ -40,9 +39,7 @@ 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 muted = useChannelMuteActive(channel);
   const displayedMemberCount = memberCount > 9 ? '9+' : `${memberCount}`;
   const displayedOnlineCount = onlineCount > 9 ? '9+' : `${onlineCount}`;
   const membersAndOnlineLabel = useMemo(

package/src/components/ChannelPreview/ChannelSwipableWrapper.tsx

@@ -1,19 +1,19 @@
 import React, { PropsWithChildren, useCallback, useMemo, useState } from 'react';
-import { StyleSheet } from 'react-native';
+import { type ColorValue, StyleSheet } from 'react-native';
 
 import type { SharedValue } from 'react-native-reanimated';
 
 import type { Channel } from 'stream-chat';
 
-import { useIsChannelMuted } from './hooks/useIsChannelMuted';
-
 import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useSwipeRegistryContext } from '../../contexts/swipeableContext/SwipeRegistryContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { MenuPointHorizontal, Mute, Sound } from '../../icons';
-import type { GetChannelActionItems } from '../ChannelList/hooks/useChannelActionItems';
-import { useChannelActionItems } from '../ChannelList/hooks/useChannelActionItems';
-import { useChannelActions } from '../ChannelList/hooks/useChannelActions';
+import type {
+  ChannelActionItem,
+  GetChannelActionItems,
+} from '../../hooks/actions/useChannelActionItems';
+import { useChannelActionItems } from '../../hooks/actions/useChannelActionItems';
+import { MenuPointHorizontal } from '../../icons';
 import { BottomSheetModal } from '../UIComponents/BottomSheetModal';
 import {
   RightActions,
@@ -41,12 +41,15 @@ export const ChannelSwipableWrapper = ({
 }>) => {
   const { ChannelDetailsBottomSheet: ChannelDetailsBottomSheetComponent } = useComponentsContext();
   const [channelDetailSheetOpen, setChannelDetailSheetOpen] = useState(false);
-  const { muteChannel, unmuteChannel } = useChannelActions(channel);
   const channelActionItems = useChannelActionItems({ channel, getChannelActionItems });
   const sheetItems = useMemo(
     () => channelActionItems.filter((item) => item.placement !== 'swipe'),
     [channelActionItems],
   );
+  const swipeItems = useMemo(
+    () => channelActionItems.filter((item) => item.placement !== 'sheet'),
+    [channelActionItems],
+  );
   const swipableRegistry = useSwipeRegistryContext();
 
   const {
@@ -54,19 +57,6 @@ export const ChannelSwipableWrapper = ({
   } = useTheme();
   const styles = useStyles();
 
-  const channelMuteState = useIsChannelMuted(channel);
-  const channelMuteActive = channelMuteState.muted;
-
-  const Icon = useCallback(
-    () =>
-      channelMuteActive ? (
-        <Sound width={20} height={20} stroke={semantics.textOnAccent} />
-      ) : (
-        <Mute width={20} height={20} fill={semantics.textOnAccent} />
-      ),
-    [channelMuteActive, semantics.textOnAccent],
-  );
-
   const swipableActions = useMemo<SwipableActionItem[]>(() => {
     const items: SwipableActionItem[] = [
       {
@@ -77,15 +67,16 @@ export const ChannelSwipableWrapper = ({
       },
     ];
 
-    items.push({
-      id: 'mute',
-      action: () => {
-        const action = channelMuteActive ? unmuteChannel : muteChannel;
-        action();
-        swipableRegistry?.closeAll();
-      },
-      Content: Icon,
-      contentContainerStyle: [styles.contentContainerStyle, styles.standard],
+    swipeItems.forEach((item) => {
+      items.push({
+        id: item.id,
+        action: () => {
+          item.action();
+          swipableRegistry?.closeAll();
+        },
+        Content: createSwipeContent(item, semantics.textOnAccent),
+        contentContainerStyle: [styles.contentContainerStyle, styles.standard],
+      });
     });
 
     return items;
@@ -93,11 +84,9 @@ export const ChannelSwipableWrapper = ({
     styles.contentContainerStyle,
     styles.elipsis,
     styles.standard,
-    channelMuteActive,
-    muteChannel,
-    unmuteChannel,
-    Icon,
+    swipeItems,
     swipableRegistry,
+    semantics.textOnAccent,
   ]);
 
   const renderRightActions = useCallback(
@@ -129,6 +118,11 @@ export const ChannelSwipableWrapper = ({
   );
 };
 
+const createSwipeContent = (item: ChannelActionItem, color: ColorValue) => {
+  const SwipeContent = () => <item.Icon fill={color} stroke={color} />;
+  return SwipeContent;
+};
+
 const useStyles = () => {
   const {
     theme: { semantics },

package/src/components/ChannelPreview/__tests__/ChannelDetailsBottomSheet.test.tsx

@@ -6,7 +6,7 @@ import type { Channel } from 'stream-chat';
 
 import { ThemeProvider, defaultTheme } from '../../../contexts';
 import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext';
-import type { ChannelActionItem } from '../../ChannelList/hooks/useChannelActionItems';
+import type { ChannelActionItem } from '../../../hooks/actions/useChannelActionItems';
 import { StreamBottomSheetModalFlatList } from '../../UIComponents/StreamBottomSheetModalFlatList';
 import type { ChannelDetailsHeaderProps } from '../ChannelDetailsBottomSheet';
 import { ChannelDetailsBottomSheet } from '../ChannelDetailsBottomSheet';

package/src/components/ChannelPreview/__tests__/ChannelSwipableWrapper.test.tsx

@@ -5,12 +5,10 @@ import { act, render } from '@testing-library/react-native';
 import type { Channel } from 'stream-chat';
 
 import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext';
-import type { ChannelActionItem } from '../../ChannelList/hooks/useChannelActionItems';
-import * as ChannelActionItemsModule from '../../ChannelList/hooks/useChannelActionItems';
-import * as ChannelActionsModule from '../../ChannelList/hooks/useChannelActions';
+import type { ChannelActionItem } from '../../../hooks/actions/useChannelActionItems';
+import * as ChannelActionItemsModule from '../../../hooks/actions/useChannelActionItems';
 import { SwipableWrapper } from '../../UIComponents/SwipableWrapper';
 import { ChannelSwipableWrapper } from '../ChannelSwipableWrapper';
-import * as UseIsChannelMutedModule from '../hooks/useIsChannelMuted';
 
 const rightActionsProbe = {
   items: [] as Array<{ action: () => void; id: string }>,
@@ -73,49 +71,30 @@ describe('ChannelSwipableWrapper', () => {
     rightActionsProbe.items = [];
   });
 
-  it('uses channel mute for direct-channel swipe actions and keeps mute user in the sheet', () => {
-    const muteChannel = jest.fn();
-    const unmuteChannel = jest.fn();
+  it('renders the swipe mute action from useChannelActionItems and keeps muteUser in the sheet', () => {
     const customBottomSheet = jest.fn(() => null);
-    const items: ChannelActionItem[] = [
-      {
-        Icon: () => null,
-        action: jest.fn(),
-        id: 'mute',
-        label: 'Mute User',
-        placement: 'sheet',
-        type: 'standard',
-      },
-      {
-        Icon: () => null,
-        action: jest.fn(),
-        id: 'archive',
-        label: 'Archive Chat',
-        placement: 'sheet',
-        type: 'standard',
-      },
-    ];
-
-    jest.spyOn(ChannelActionsModule, 'useChannelActions').mockReturnValue({
-      archive: jest.fn(),
-      blockUser: jest.fn(),
-      deleteChannel: jest.fn(),
-      leave: jest.fn(),
-      muteChannel,
-      muteUser: jest.fn(),
-      pin: jest.fn(),
-      unarchive: jest.fn(),
-      unblockUser: jest.fn(),
-      unmuteChannel,
-      unmuteUser: jest.fn(),
-      unpin: jest.fn(),
-    });
-    jest.spyOn(ChannelActionItemsModule, 'useChannelActionItems').mockReturnValue(items);
-    jest.spyOn(UseIsChannelMutedModule, 'useIsChannelMuted').mockReturnValue({
-      createdAt: null,
-      expiresAt: null,
-      muted: false,
-    });
+    const muteAction = jest.fn();
+    const muteUserAction = jest.fn();
+    const muteItem: ChannelActionItem = {
+      Icon: () => null,
+      action: muteAction,
+      id: 'mute',
+      label: 'Mute Chat',
+      placement: 'swipe',
+      type: 'standard',
+    };
+    const muteUserItem: ChannelActionItem = {
+      Icon: () => null,
+      action: muteUserAction,
+      id: 'muteUser',
+      label: 'Mute User',
+      placement: 'sheet',
+      type: 'standard',
+    };
+
+    jest
+      .spyOn(ChannelActionItemsModule, 'useChannelActionItems')
+      .mockReturnValue([muteItem, muteUserItem]);
 
     render(
       <WithComponents overrides={{ ChannelDetailsBottomSheet: customBottomSheet }}>
@@ -128,7 +107,7 @@ describe('ChannelSwipableWrapper', () => {
     expect(customBottomSheet).toHaveBeenCalledWith(
       expect.objectContaining({
         channel,
-        items,
+        items: [muteUserItem],
       }),
       undefined,
     );
@@ -138,52 +117,34 @@ describe('ChannelSwipableWrapper', () => {
       rightActionsProbe.items[1].action();
     });
 
-    expect(muteChannel).toHaveBeenCalledTimes(1);
-    expect(unmuteChannel).not.toHaveBeenCalled();
+    expect(muteAction).toHaveBeenCalledTimes(1);
+    expect(muteUserAction).not.toHaveBeenCalled();
   });
 
-  it('removes mute group from the sheet while keeping mute as the quick swipe action', () => {
-    const muteChannel = jest.fn();
+  it('removes swipe-only items from the sheet and keeps both-placed items in both surfaces', () => {
     const customBottomSheet = jest.fn(() => null);
-    const muteItem = {
+    const muteAction = jest.fn();
+    const archiveAction = jest.fn();
+    const muteItem: ChannelActionItem = {
       Icon: () => null,
-      action: jest.fn(),
+      action: muteAction,
       id: 'mute',
       label: 'Mute Group',
       placement: 'swipe',
       type: 'standard',
-    } as const satisfies ChannelActionItem;
-    const archiveItem = {
+    };
+    const archiveItem: ChannelActionItem = {
       Icon: () => null,
-      action: jest.fn(),
+      action: archiveAction,
       id: 'archive',
       label: 'Archive Group',
       placement: 'both',
       type: 'standard',
-    } as const satisfies ChannelActionItem;
-
-    jest.spyOn(ChannelActionsModule, 'useChannelActions').mockReturnValue({
-      archive: jest.fn(),
-      blockUser: jest.fn(),
-      deleteChannel: jest.fn(),
-      leave: jest.fn(),
-      muteChannel,
-      muteUser: jest.fn(),
-      pin: jest.fn(),
-      unarchive: jest.fn(),
-      unblockUser: jest.fn(),
-      unmuteChannel: jest.fn(),
-      unmuteUser: jest.fn(),
-      unpin: jest.fn(),
-    });
+    };
+
     jest
       .spyOn(ChannelActionItemsModule, 'useChannelActionItems')
       .mockReturnValue([muteItem, archiveItem]);
-    jest.spyOn(UseIsChannelMutedModule, 'useIsChannelMuted').mockReturnValue({
-      createdAt: null,
-      expiresAt: null,
-      muted: false,
-    });
 
     render(
       <WithComponents overrides={{ ChannelDetailsBottomSheet: customBottomSheet }}>
@@ -200,12 +161,16 @@ describe('ChannelSwipableWrapper', () => {
       }),
       undefined,
     );
-    expect(rightActionsProbe.items.map((item) => item.id)).toEqual(['openSheet', 'mute']);
+    expect(rightActionsProbe.items.map((item) => item.id)).toEqual([
+      'openSheet',
+      'mute',
+      'archive',
+    ]);
 
     act(() => {
       rightActionsProbe.items[1].action();
     });
 
-    expect(muteChannel).toHaveBeenCalledTimes(1);
+    expect(muteAction).toHaveBeenCalledTimes(1);
   });
 });

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

@@ -4,6 +4,8 @@ import type { Channel, ChannelMemberResponse } from 'stream-chat';
 
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { useChannelName } from '../../../hooks/useChannelName';
+import { useChannelMembersState } from '../../ChannelList/hooks/useChannelMembersState';
 
 const getMemberName = (member: ChannelMemberResponse) =>
   member.user?.name || member.user?.id || 'Unknown User';
@@ -12,8 +14,8 @@ export const useChannelPreviewDisplayName = (channel?: Channel) => {
   const { client } = useChatContext();
   const { t } = useTranslationContext();
   const currentUserId = client?.userID;
-  const members = channel?.state?.members;
-  const channelName = channel?.data?.name;
+  const members = useChannelMembersState(channel);
+  const channelName = useChannelName(channel);
 
   const displayName = useMemo(() => {
     if (channelName) {

package/src/components/Message/Message.tsx

@@ -67,6 +67,7 @@ import {
   setOverlayTopH,
   useIsOverlayActive,
 } from '../../state-store';
+import { primitives } from '../../theme';
 import { FileTypes } from '../../types/types';
 import {
   checkMessageEquality,
@@ -830,8 +831,20 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
     }
   }, [overlayActive, message]);
 
+  const groupKey: 'single' | 'top' | 'middle' | 'bottom' | undefined =
+    groupStyles?.[0] === 'single' ||
+    groupStyles?.[0] === 'top' ||
+    groupStyles?.[0] === 'middle' ||
+    groupStyles?.[0] === 'bottom'
+      ? groupStyles[0]
+      : undefined;
+  const isVeryLastBubble =
+    messagesContext.enableMessageGroupingByUser &&
+    channel?.state.messages[channel.state.messages.length - 1]?.id === message.id;
   const styles = useStyles({
+    groupKey,
     highlightedMessage: (isTargetedMessage || message.pinned) && !isMessageTypeDeleted,
+    isVeryLastBubble,
   });
   const rect = rectRef.current;
   const overlayItemsAnchorRect = bubbleRect.current ?? rect;
@@ -1147,34 +1160,67 @@ export const Message = (props: MessageProps) => {
   );
 };
 
-const useStyles = ({ highlightedMessage }: { highlightedMessage?: boolean }) => {
+const useStyles = ({
+  groupKey,
+  highlightedMessage,
+  isVeryLastBubble,
+}: {
+  groupKey: 'single' | 'top' | 'middle' | 'bottom' | undefined;
+  highlightedMessage?: boolean;
+  isVeryLastBubble: boolean;
+}) => {
   const {
-    theme: {
-      messageItemView: { wrapper, targetedMessageContainer, blockedMessageContainer },
-      screenPadding,
-      semantics,
-    },
+    theme: { messageItemView, screenPadding, semantics },
   } = useTheme();
+
   return useMemo(() => {
-    return StyleSheet.create({
-      wrapper: {
-        paddingHorizontal: screenPadding,
-        ...(highlightedMessage
-          ? { backgroundColor: semantics.backgroundCoreHighlight, ...targetedMessageContainer }
-          : {}),
-        ...wrapper,
+    const groupStylesMap: Record<'single' | 'top' | 'middle' | 'bottom', ViewStyle> = {
+      single: {
+        paddingVertical: primitives.spacingXs,
+        ...messageItemView.messageGroupedSingleStyles,
+      },
+      top: {
+        paddingTop: primitives.spacingXs,
+        paddingBottom: primitives.spacingXxs,
+        ...messageItemView.messageGroupedTopStyles,
+      },
+      middle: {
+        paddingBottom: primitives.spacingXxs,
+        ...messageItemView.messageGroupedMiddleStyles,
+      },
+      bottom: {
+        paddingBottom: primitives.spacingXs,
+        ...messageItemView.messageGroupedBottomStyles,
       },
+    };
+
+    let wrapper: ViewStyle = {
+      paddingHorizontal: screenPadding,
+      ...(highlightedMessage
+        ? {
+            backgroundColor: semantics.backgroundCoreHighlight,
+            ...messageItemView.targetedMessageContainer,
+          }
+        : {}),
+      ...messageItemView.wrapper,
+    };
+    if (groupKey) {
+      wrapper = { ...wrapper, ...groupStylesMap[groupKey] };
+    }
+    if (isVeryLastBubble) {
+      wrapper = {
+        ...wrapper,
+        marginBottom: primitives.spacingSm,
+        ...messageItemView.lastMessageContainer,
+      };
+    }
+
+    return StyleSheet.create({
+      wrapper,
       blockedMessageContainer: {
         alignItems: 'center',
-        ...blockedMessageContainer,
+        ...messageItemView.blockedMessageContainer,
       },
     });
-  }, [
-    wrapper,
-    screenPadding,
-    highlightedMessage,
-    semantics,
-    targetedMessageContainer,
-    blockedMessageContainer,
-  ]);
+  }, [messageItemView, screenPadding, semantics, highlightedMessage, groupKey, isVeryLastBubble]);
 };