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

package/src/components/Thread/__tests__/__snapshots__/Thread.test.tsx.snap

@@ -337,6 +337,7 @@ exports[`Thread should match thread snapshot 1`] = `
                     ],
                     {
                       "paddingHorizontal": 16,
+                      "paddingVertical": 8,
                     },
                   ]
                 }
@@ -370,7 +371,6 @@ exports[`Thread should match thread snapshot 1`] = `
                             "alignItems": "flex-end",
                             "flexDirection": "row",
                             "gap": 8,
-                            "paddingVertical": 8,
                             "width": "100%",
                           }
                         }
@@ -671,6 +671,7 @@ exports[`Thread should match thread snapshot 1`] = `
                     ],
                     {
                       "paddingHorizontal": 16,
+                      "paddingVertical": 8,
                     },
                   ]
                 }
@@ -704,7 +705,6 @@ exports[`Thread should match thread snapshot 1`] = `
                             "alignItems": "flex-end",
                             "flexDirection": "row",
                             "gap": 8,
-                            "paddingVertical": 8,
                             "width": "100%",
                           }
                         }
@@ -1039,6 +1039,7 @@ exports[`Thread should match thread snapshot 1`] = `
                     ],
                     {
                       "paddingHorizontal": 16,
+                      "paddingVertical": 8,
                     },
                   ]
                 }
@@ -1072,7 +1073,6 @@ exports[`Thread should match thread snapshot 1`] = `
                             "alignItems": "flex-end",
                             "flexDirection": "row",
                             "gap": 8,
-                            "paddingVertical": 8,
                             "width": "100%",
                           }
                         }
@@ -1365,7 +1365,9 @@ exports[`Thread should match thread snapshot 1`] = `
                   [
                     undefined,
                     {
+                      "marginBottom": 12,
                       "paddingHorizontal": 16,
+                      "paddingVertical": 8,
                     },
                   ]
                 }
@@ -1399,8 +1401,6 @@ exports[`Thread should match thread snapshot 1`] = `
                             "alignItems": "flex-end",
                             "flexDirection": "row",
                             "gap": 8,
-                            "marginBottom": 12,
-                            "paddingVertical": 8,
                             "width": "100%",
                           }
                         }

package/src/components/index.ts

@@ -56,6 +56,7 @@ export * from './ChannelPreview/ChannelPreview';
 export * from './ChannelPreview/ChannelPreviewMessage';
 export * from './ChannelPreview/ChannelPreviewView';
 export * from './ChannelPreview/ChannelPreviewMutedStatus';
+export * from './ChannelPreview/ChannelPreviewPinnedStatus';
 export * from './ChannelPreview/ChannelLastMessagePreview';
 export * from './ChannelPreview/ChannelPreviewStatus';
 export * from './ChannelPreview/ChannelPreviewTitle';

package/src/contexts/channelsContext/ChannelsContext.tsx

@@ -118,6 +118,7 @@ export type ChannelsContextValue = {
   swipeActionsEnabled?: boolean;
 
   mutedStatusPosition?: 'trailingBottom' | 'inlineTitle';
+  pinnedStatusPosition?: 'trailingBottom' | 'inlineTitle';
 };
 
 export const ChannelsContext = React.createContext(

package/src/contexts/componentsContext/defaultComponents.ts

@@ -53,6 +53,7 @@ import { ChannelLastMessagePreview } from '../../components/ChannelPreview/Chann
 import { ChannelMessagePreviewDeliveryStatus } from '../../components/ChannelPreview/ChannelMessagePreviewDeliveryStatus';
 import { ChannelPreviewMessage } from '../../components/ChannelPreview/ChannelPreviewMessage';
 import { ChannelPreviewMutedStatus } from '../../components/ChannelPreview/ChannelPreviewMutedStatus';
+import { ChannelPreviewPinnedStatus } from '../../components/ChannelPreview/ChannelPreviewPinnedStatus';
 import { ChannelPreviewStatus } from '../../components/ChannelPreview/ChannelPreviewStatus';
 import { ChannelPreviewTitle } from '../../components/ChannelPreview/ChannelPreviewTitle';
 import { ChannelPreviewTypingIndicator } from '../../components/ChannelPreview/ChannelPreviewTypingIndicator';
@@ -271,6 +272,7 @@ const components = {
   ChannelPreviewMessage,
   ChannelPreviewMessageDeliveryStatus: ChannelMessagePreviewDeliveryStatus,
   ChannelPreviewMutedStatus,
+  ChannelPreviewPinnedStatus,
   ChannelPreviewStatus,
   ChannelPreviewTitle,
   ChannelPreviewTypingIndicator,

package/src/contexts/messageInputContext/hooks/useCreateMessageComposer.ts

@@ -1,12 +1,10 @@
 import { useEffect, useMemo } from 'react';
 
-import { FixedSizeQueueCache, MessageComposer } from 'stream-chat';
+import { MessageComposer } from 'stream-chat';
 
 import { useChatContext } from '../../chatContext/ChatContext';
 import { MessageComposerContextValue } from '../../messageComposerContext/MessageComposerContext';
 
-const queueCache = new FixedSizeQueueCache<string, MessageComposer>(64);
-
 export const useCreateMessageComposer = ({
   editing: editedMessage,
   thread: parentMessage,
@@ -14,6 +12,7 @@ export const useCreateMessageComposer = ({
   channel,
 }: Pick<MessageComposerContextValue, 'channel' | 'threadInstance' | 'thread' | 'editing'>) => {
   const { client } = useChatContext();
+  const { messageComposerCache: queueCache } = client;
 
   const cachedEditedMessage = useMemo(() => {
     if (!editedMessage) return undefined;
@@ -69,7 +68,14 @@ export const useCreateMessageComposer = ({
     } else {
       return channel.messageComposer;
     }
-  }, [cachedEditedMessage, cachedParentMessage, channel, client, threadInstance]);
+  }, [
+    cachedEditedMessage,
+    cachedParentMessage,
+    channel.messageComposer,
+    client,
+    queueCache,
+    threadInstance,
+  ]);
 
   if (
     (['legacy_thread', 'message'] as MessageComposer['contextType'][]).includes(

package/src/contexts/themeContext/utils/theme.ts

@@ -299,12 +299,14 @@ export type Theme = {
     contentContainer: ViewStyle;
     date: TextStyle;
     mutedStatus: IconProps;
+    pinnedStatus: IconProps;
     messageDeliveryStatus: {
       container: ViewStyle;
       text: TextStyle;
       checkAllIcon: IconProps;
       checkIcon: IconProps;
       timeIcon: IconProps;
+      username: TextStyle;
     };
     lowerRow: ViewStyle;
     title: TextStyle;
@@ -1355,8 +1357,10 @@ export const defaultTheme: Theme = {
       checkAllIcon: {},
       checkIcon: {},
       timeIcon: {},
+      username: {},
     },
     mutedStatus: {},
+    pinnedStatus: {},
     lowerRow: {},
     title: {},
     unreadContainer: {},

package/src/hooks/actions/__tests__/useChannelActionItems.test.tsx

@@ -99,30 +99,43 @@ describe('useChannelActionItems', () => {
   });
 
   it('returns default channel action items', () => {
-    const { result } = renderHook(() => useChannelActionItems({ channel }));
+    const { result } = renderHook(() => useChannelActionItems({ channel, surface: 'list' }));
 
-    expect(result.current).toHaveLength(3);
+    expect(result.current).toHaveLength(4);
     expect(result.current.map((item) => item.action)).toEqual([
       channelActions.muteChannel,
+      channelActions.pin,
       channelActions.leave,
       expect.any(Function),
     ]);
-    expect(result.current.map((item) => item.id)).toEqual(['mute', 'leave', 'deleteChannel']);
+    expect(result.current.map((item) => item.id)).toEqual([
+      'mute',
+      'pin',
+      'leave',
+      'deleteChannel',
+    ]);
     expect(result.current.map((item) => item.type)).toEqual([
+      'standard',
       'standard',
       'destructive',
       'destructive',
     ]);
-    expect(result.current.map((item) => item.placement)).toEqual(['swipe', 'sheet', 'sheet']);
+    expect(result.current.map((item) => item.placement)).toEqual([
+      'swipe',
+      'sheet',
+      'sheet',
+      'sheet',
+    ]);
   });
 
   it('returns muteUser only in direct chats', () => {
     jest.spyOn(useIsDirectChatModule, 'useIsDirectChat').mockReturnValue(true);
 
-    const { result } = renderHook(() => useChannelActionItems({ channel }));
+    const { result } = renderHook(() => useChannelActionItems({ channel, surface: 'list' }));
 
     expect(result.current.map((item) => item.id)).toEqual([
       'mute',
+      'pin',
       'muteUser',
       'block',
       'leave',
@@ -143,7 +156,7 @@ describe('useChannelActionItems', () => {
     });
     jest.spyOn(useMutedUsersModule, 'useMutedUsers').mockReturnValue([] as Mute[]);
 
-    const { result } = renderHook(() => useChannelActionItems({ channel }));
+    const { result } = renderHook(() => useChannelActionItems({ channel, surface: 'list' }));
 
     const muteItem = result.current.find((item) => item.id === 'mute');
     const muteUserItem = result.current.find((item) => item.id === 'muteUser');
@@ -152,7 +165,7 @@ describe('useChannelActionItems', () => {
   });
 
   it('forwards options from item.action to the underlying channel action', async () => {
-    const { result } = renderHook(() => useChannelActionItems({ channel }));
+    const { result } = renderHook(() => useChannelActionItems({ channel, surface: 'list' }));
 
     const muteItem = result.current.find((item) => item.id === 'mute');
     expect(muteItem).toBeDefined();
@@ -165,7 +178,7 @@ describe('useChannelActionItems', () => {
   it('marks block as destructive when user is not blocked', () => {
     jest.spyOn(useIsDirectChatModule, 'useIsDirectChat').mockReturnValue(true);
 
-    const { result } = renderHook(() => useChannelActionItems({ channel }));
+    const { result } = renderHook(() => useChannelActionItems({ channel, surface: 'list' }));
 
     const blockItem = result.current.find((item) => item.id === 'block');
     expect(blockItem?.type).toBe('destructive');
@@ -175,7 +188,9 @@ describe('useChannelActionItems', () => {
     jest.spyOn(useIsDirectChatModule, 'useIsDirectChat').mockReturnValue(true);
     const blockedChannel = createChannelMock({ blockedUserIds: ['other-user-id'] });
 
-    const { result } = renderHook(() => useChannelActionItems({ channel: blockedChannel }));
+    const { result } = renderHook(() =>
+      useChannelActionItems({ channel: blockedChannel, surface: 'list' }),
+    );
 
     const blockItem = result.current.find((item) => item.id === 'block');
     expect(blockItem?.type).toBe('standard');
@@ -190,6 +205,7 @@ describe('useChannelActionItems', () => {
       useChannelActionItems({
         channel,
         getChannelActionItems: customGetChannelActionItems,
+        surface: 'list',
       }),
     );
 
@@ -202,6 +218,7 @@ describe('useChannelActionItems', () => {
         isBlocked: undefined,
         isDirectChat: false,
         isPinned: false,
+        surface: 'list',
         t: expect.any(Function),
         userMuteActive: false,
       },
@@ -228,6 +245,7 @@ describe('getChannelActionItems', () => {
       isBlocked: undefined,
       isDirectChat: false,
       isPinned: false,
+      surface: 'list',
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
@@ -240,6 +258,7 @@ describe('getChannelActionItems', () => {
         isBlocked: undefined,
         isDirectChat: false,
         isPinned: false,
+        surface: 'list',
         t: ((value: string) => value) as TranslationContextValue['t'],
         userMuteActive: false,
       },
@@ -248,11 +267,13 @@ describe('getChannelActionItems', () => {
 
     expect(actionItems.map((item) => item.action)).toEqual([
       channelActions.muteChannel,
+      channelActions.pin,
       channelActions.leave,
       expect.any(Function),
     ]);
-    expect(actionItems.map((item) => item.id)).toEqual(['mute', 'leave', 'deleteChannel']);
+    expect(actionItems.map((item) => item.id)).toEqual(['mute', 'pin', 'leave', 'deleteChannel']);
     expect(actionItems.map((item) => item.type)).toEqual([
+      'standard',
       'standard',
       'destructive',
       'destructive',
@@ -269,12 +290,14 @@ describe('getChannelActionItems', () => {
       isBlocked: true,
       isDirectChat: true,
       isPinned: false,
+      surface: 'list',
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: true,
     });
 
     expect(actionItems.map((item) => item.id)).toEqual([
       'mute',
+      'pin',
       'muteUser',
       'block',
       'leave',
@@ -282,6 +305,7 @@ describe('getChannelActionItems', () => {
     ]);
     expect(actionItems.map((item) => item.action)).toEqual([
       channelActions.unmuteChannel,
+      channelActions.pin,
       channelActions.unmuteUser,
       channelActions.unblockUser,
       channelActions.leave,
@@ -289,6 +313,7 @@ describe('getChannelActionItems', () => {
     ]);
     expect(actionItems.map((item) => item.label)).toEqual([
       'Unmute Chat',
+      'Pin Chat',
       'Unmute User',
       'Unblock User',
       'Leave Chat',
@@ -300,6 +325,7 @@ describe('getChannelActionItems', () => {
       'sheet',
       'sheet',
       'sheet',
+      'sheet',
     ]);
   });
 
@@ -312,6 +338,7 @@ describe('getChannelActionItems', () => {
       isBlocked: undefined,
       isDirectChat: false,
       isPinned: false,
+      surface: 'list',
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
@@ -328,11 +355,12 @@ describe('getChannelActionItems', () => {
       isBlocked: undefined,
       isDirectChat: false,
       isPinned: false,
+      surface: 'list',
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
 
-    expect(actionItems.map((item) => item.id)).toEqual(['mute', 'leave']);
+    expect(actionItems.map((item) => item.id)).toEqual(['mute', 'pin', 'leave']);
   });
 
   it('uses group mute variants for labels and placements', () => {
@@ -345,6 +373,7 @@ describe('getChannelActionItems', () => {
       isBlocked: undefined,
       isDirectChat: false,
       isPinned: false,
+      surface: 'list',
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
@@ -353,9 +382,101 @@ describe('getChannelActionItems', () => {
     expect(actionItems[0].label).toBe('Unmute Group');
     expect(actionItems[0].placement).toBe('swipe');
 
-    expect(actionItems[1].action).toBe(channelActions.leave);
-    expect(actionItems[1].label).toBe('Leave Group');
-    expect(actionItems[1].placement).toBe('sheet');
+    const leaveItem = actionItems.find((item) => item.id === 'leave');
+    expect(leaveItem?.action).toBe(channelActions.leave);
+    expect(leaveItem?.label).toBe('Leave Group');
+    expect(leaveItem?.placement).toBe('sheet');
+  });
+
+  it('pin item toggles to unpin when channel is pinned', () => {
+    const channelActions = createChannelActions();
+    const actionItems = buildDefaultChannelActionItems({
+      actions: channelActions,
+      channel,
+      channelMuteActive: false,
+      isArchived: false,
+      isBlocked: undefined,
+      isDirectChat: false,
+      isPinned: true,
+      surface: 'list',
+      t: ((value: string) => value) as TranslationContextValue['t'],
+      userMuteActive: false,
+    });
+
+    const pinItem = actionItems.find((item) => item.id === 'pin');
+    expect(pinItem?.action).toBe(channelActions.unpin);
+    expect(pinItem?.label).toBe('Unpin Group');
+    expect(pinItem?.placement).toBe('sheet');
+  });
+
+  it('pin item uses direct-chat label variant', () => {
+    const channelActions = createChannelActions();
+    const actionItems = buildDefaultChannelActionItems({
+      actions: channelActions,
+      channel,
+      channelMuteActive: false,
+      isArchived: false,
+      isBlocked: undefined,
+      isDirectChat: true,
+      isPinned: false,
+      surface: 'list',
+      t: ((value: string) => value) as TranslationContextValue['t'],
+      userMuteActive: false,
+    });
+
+    const pinItem = actionItems.find((item) => item.id === 'pin');
+    expect(pinItem?.action).toBe(channelActions.pin);
+    expect(pinItem?.label).toBe('Pin Chat');
+  });
+
+  it('omits the pin item when building for the details surface', () => {
+    const actionItems = buildDefaultChannelActionItems({
+      actions: createChannelActions(),
+      channel,
+      channelMuteActive: false,
+      isArchived: false,
+      isBlocked: undefined,
+      isDirectChat: false,
+      isPinned: false,
+      surface: 'details',
+      t: ((value: string) => value) as TranslationContextValue['t'],
+      userMuteActive: false,
+    });
+
+    expect(actionItems.map((item) => item.id)).not.toContain('pin');
+  });
+
+  it('includes the pin item when building for the list surface', () => {
+    const actionItems = buildDefaultChannelActionItems({
+      actions: createChannelActions(),
+      channel,
+      channelMuteActive: false,
+      isArchived: false,
+      isBlocked: undefined,
+      isDirectChat: false,
+      isPinned: false,
+      surface: 'list',
+      t: ((value: string) => value) as TranslationContextValue['t'],
+      userMuteActive: false,
+    });
+
+    expect(actionItems.map((item) => item.id)).toContain('pin');
+  });
+
+  it('applies no surface-specific filtering when surface is omitted', () => {
+    const actionItems = buildDefaultChannelActionItems({
+      actions: createChannelActions(),
+      channel,
+      channelMuteActive: false,
+      isArchived: false,
+      isBlocked: undefined,
+      isDirectChat: false,
+      isPinned: false,
+      t: ((value: string) => value) as TranslationContextValue['t'],
+      userMuteActive: false,
+    });
+
+    expect(actionItems.map((item) => item.id)).toEqual(['mute', 'pin', 'leave', 'deleteChannel']);
   });
 
   it('mute and muteUser reflect their respective active states independently', () => {
@@ -368,6 +489,7 @@ describe('getChannelActionItems', () => {
       isBlocked: undefined,
       isDirectChat: true,
       isPinned: false,
+      surface: 'list',
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: true,
     });
@@ -393,6 +515,7 @@ describe('getChannelActionItems', () => {
       isBlocked: undefined,
       isDirectChat: false,
       isPinned: false,
+      surface: 'list',
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });

package/src/hooks/actions/__tests__/useChannelActionItemsById.test.tsx

@@ -41,7 +41,7 @@ describe('useChannelActionItemsById', () => {
       .spyOn(useChannelActionItemsModule, 'useChannelActionItems')
       .mockReturnValue(channelActionItems);
 
-    const { result } = renderHook(() => useChannelActionItemsById({ channel }));
+    const { result } = renderHook(() => useChannelActionItemsById({ channel, surface: 'list' }));
 
     expect(result.current.pin).toBe(channelActionItems[0]);
     expect(result.current.deleteChannel).toBe(channelActionItems[1]);
@@ -59,12 +59,14 @@ describe('useChannelActionItemsById', () => {
       useChannelActionItemsById({
         channel,
         getChannelActionItems,
+        surface: 'list',
       }),
     );
 
     expect(useChannelActionItemsSpy).toHaveBeenCalledWith({
       channel,
       getChannelActionItems,
+      surface: 'list',
     });
   });
 });

package/src/hooks/actions/useChannelActionItems.tsx

@@ -15,18 +15,50 @@ import { useIsChannelMuted } from '../../components/ChannelPreview/hooks/useIsCh
 import { useUserMuteActive } from '../../components/Message/hooks/useUserMuteActive';
 import { useTheme, useTranslationContext } from '../../contexts';
 import type { TranslationContextValue } from '../../contexts/translationContext/TranslationContext';
-import { IconProps, Mute, BlockUser, Delete, Sound } from '../../icons';
+import { IconProps, Mute, BlockUser, Delete, Pin, Sound, Unpin } from '../../icons';
 import { ArrowBoxLeft } from '../../icons/leave';
 import { useChannelMembershipState } from '../useChannelMembershipState';
 import { useIsDirectChat } from '../useIsDirectChat';
 import { useStateStore } from '../useStateStore';
 
 export type ChannelActionItem = ActionItem<
-  'mute' | 'muteUser' | 'block' | 'leave' | 'deleteChannel' | string
+  'mute' | 'muteUser' | 'block' | 'leave' | 'deleteChannel' | 'pin' | string
 > & {
+  /**
+   * Per item routing **within a channel preview interaction** (swipe row vs
+   * the sheet that opens from it). Only meaningful when the items are consumed
+   * from `<ChannelSwipableWrapper>`:
+   *
+   * - `'swipe'`: shown only in the swipe-row chips.
+   * - `'sheet'`: shown only in the swipe-triggered options sheet.
+   * - `'both'`: shown in both swipe row and sheet.
+   *
+   * The standalone Channel Details screen does **not** filter by `placement` -
+   * use {@link ChannelActionSurface} (`surface`) instead to vary items between
+   * the channel list and the Channel Details screen.
+   */
   placement: 'both' | 'sheet' | 'swipe';
 };
 
+/**
+ * Identifies which top level UI surface is requesting channel action items.
+ * Passed verbatim into {@link ChannelActionItemsParams} so the default builder
+ * and any integrator supplied `getChannelActionItems` can branch on it - i.e.
+ * to drop or relabel an item on a specific surface or to provide an entirely
+ * different builder per surface.
+ *
+ * - `'list'`: anything driven by a ChannelList interaction, the swipe row
+ *   chips on a channel preview and the bottom sheet that opens from them.
+ *   Subrouting between the swipe row and the sheet is handled by the per item
+ *   {@link ChannelActionItem.placement} field.
+ * - `'details'`: items for the standalone Channel Details screen.
+ *
+ * `surface` operates at the call site level (which UI is asking). It is
+ * optional and when omitted, the default builder applies no surface specific
+ * filtering and returns every item it would otherwise produce.
+ */
+export type ChannelActionSurface = 'list' | 'details';
+
 export type ChannelActionItemsParams = {
   actions: ChannelActions;
   channel: Channel;
@@ -35,6 +67,7 @@ export type ChannelActionItemsParams = {
   isBlocked: boolean | undefined;
   isDirectChat: boolean;
   isPinned: boolean;
+  surface?: ChannelActionSurface;
   t: TranslationContextValue['t'];
   userMuteActive: boolean;
 };
@@ -67,10 +100,14 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
       unmuteUser,
       blockUser,
       unblockUser,
+      pin,
+      unpin,
     },
     channelMuteActive,
     isBlocked,
     isDirectChat,
+    isPinned,
+    surface,
     userMuteActive,
     t,
     channel,
@@ -105,6 +142,23 @@ export const buildDefaultChannelActionItems: BuildDefaultChannelActionItems = (
     },
   ];
 
+  if (surface !== 'details') {
+    actionItems.push({
+      action: isPinned ? unpin : pin,
+      Icon: (props) => <ChannelActionsIcon Icon={isPinned ? Unpin : Pin} {...props} />,
+      id: 'pin',
+      label: isDirectChat
+        ? isPinned
+          ? t('Unpin Chat')
+          : t('Pin Chat')
+        : isPinned
+          ? t('Unpin Group')
+          : t('Pin Group'),
+      placement: 'sheet',
+      type: 'standard',
+    });
+  }
+
   if (isDirectChat) {
     actionItems.push({
       action: userMuteActive ? unmuteUser : muteUser,
@@ -186,6 +240,7 @@ export const getChannelActionItems: GetChannelActionItems = ({ defaultItems }) =
 
 type UseChannelActionItemsParams = {
   channel: Channel;
+  surface?: ChannelActionSurface;
   getChannelActionItems?: GetChannelActionItems;
 };
 
@@ -194,6 +249,7 @@ const blockedUsersStateSelector = (state: BlockedUsersState) =>
 
 export const useChannelActionItems = ({
   channel,
+  surface,
   getChannelActionItems: getChannelActionItemsProp = getChannelActionItems,
 }: UseChannelActionItemsParams) => {
   const { t } = useTranslationContext();
@@ -225,6 +281,7 @@ export const useChannelActionItems = ({
       isBlocked,
       isDirectChat,
       isPinned,
+      surface,
       t,
       userMuteActive,
     }),
@@ -236,6 +293,7 @@ export const useChannelActionItems = ({
       isBlocked,
       isDirectChat,
       isPinned,
+      surface,
       t,
       userMuteActive,
     ],

package/src/hooks/actions/useChannelActionItemsById.ts

@@ -2,23 +2,30 @@ import { useMemo } from 'react';
 
 import type { Channel } from 'stream-chat';
 
-import type { ChannelActionItem, GetChannelActionItems } from './useChannelActionItems';
+import type {
+  ChannelActionItem,
+  ChannelActionSurface,
+  GetChannelActionItems,
+} from './useChannelActionItems';
 import { useChannelActionItems } from './useChannelActionItems';
 
 export type ChannelActionItemsById = Partial<Record<ChannelActionItem['id'], ChannelActionItem>>;
 
 type UseChannelActionItemsByIdParams = {
   channel: Channel;
+  surface?: ChannelActionSurface;
   getChannelActionItems?: GetChannelActionItems;
 };
 
 export const useChannelActionItemsById = ({
   channel,
+  surface,
   getChannelActionItems,
 }: UseChannelActionItemsByIdParams) => {
   const channelActionItems = useChannelActionItems({
     channel,
     getChannelActionItems,
+    surface,
   });
 
   return useMemo(