@planningcenter/chat-react-native 3.39.0-rc.1 → 3.39.0-rc.11

package/src/components/primitive/form_sheet.tsx

@@ -242,6 +242,7 @@ interface FormSheetActionProps {
   accessibilityRole?: AccessibilityRole
   appearance?: FormSheetActionAppearanceUnion
   disabled?: boolean
+  disabledReason?: string
 }
 
 function FormSheetAction({
@@ -253,14 +254,17 @@ function FormSheetAction({
   accessibilityRole = 'button',
   appearance = 'neutral',
   disabled = false,
+  disabledReason,
 }: FormSheetActionProps) {
-  const styles = useStyles({ appearance })
+  const styles = useStyles({ appearance, disabled })
 
   return (
     <PlatformPressable
       onPress={onPress}
       accessibilityLabel={accessibilityLabel}
-      accessibilityHint={accessibilityHint}
+      accessibilityHint={
+        accessibilityHint ?? (disabled && disabledReason ? disabledReason : undefined)
+      }
       accessibilityRole={accessibilityRole}
       style={styles.actionPressable}
       disabled={disabled}
@@ -268,7 +272,12 @@ function FormSheetAction({
       {iconName && (
         <Icon name={iconName} size={16} accessibilityElementsHidden style={styles.actionIcon} />
       )}
-      <Text style={styles.actionTitle}>{title}</Text>
+      <View style={styles.actionTextBlock}>
+        <Text style={styles.actionTitle}>{title}</Text>
+        {disabled && disabledReason && (
+          <Text style={styles.actionDisabledReason}>{disabledReason}</Text>
+        )}
+      </View>
     </PlatformPressable>
   )
 }
@@ -281,9 +290,10 @@ FormSheetAction.displayName = 'FormSheet.Action'
 
 interface Styles {
   appearance?: FormSheetActionAppearanceUnion
+  disabled?: boolean
 }
 
-const useStyles = ({ appearance = 'neutral' }: Styles = {}) => {
+const useStyles = ({ appearance = 'neutral', disabled = false }: Styles = {}) => {
   const { colors } = useTheme()
   const { height } = useWindowDimensions()
   const { bottom, top } = useSafeAreaInsets()
@@ -368,10 +378,17 @@ const useStyles = ({ appearance = 'neutral' }: Styles = {}) => {
       gap: 8,
     },
     actionIcon: {
-      color: appearanceColorsMap[appearance].iconColor,
+      color: disabled ? colors.textColorDefaultDisabled : appearanceColorsMap[appearance].iconColor,
+    },
+    actionTextBlock: {
+      flex: 1,
     },
     actionTitle: {
-      color: appearanceColorsMap[appearance].textColor,
+      color: disabled ? colors.textColorDefaultDisabled : appearanceColorsMap[appearance].textColor,
+    },
+    actionDisabledReason: {
+      color: colors.textColorDefaultDisabled,
+      fontSize: 12,
     },
   })
 }

package/src/contexts/api_provider.tsx

@@ -95,7 +95,10 @@ function useSessionChanged(value: Pick<ChatContextValue, 'token' | 'env'>): bool
   const isInitialLogin = !prevToken && !!newToken
   if (isInitialLogin) return false
 
-  return Boolean(prevToken && newToken !== prevToken) || Boolean(prevEnv && newEnv !== prevEnv)
+  const tokenChanged = Boolean(
+    prevToken?.access_token && newToken?.access_token !== prevToken?.access_token
+  )
+  return tokenChanged || Boolean(prevEnv && newEnv !== prevEnv)
 }
 
 function usePrevious<T>(value: T): T {

package/src/contexts/conversations_context.tsx

@@ -39,9 +39,13 @@ export const ConversationsContextProvider = ({
   args = {},
 }: PropsWithChildren<{ args: ConversationFiltersParams }>) => {
   const [activeConversationId, setActiveConversationId] = useState<number | undefined>()
-  const { chat_group_graph_id, group_source_app_name } = args
+  const { chat_group_graph_id, group_source_app_name, show_direct_messages } = args
 
-  const query = useConversations({ chat_group_graph_id, group_source_app_name })
+  const query = useConversations({
+    chat_group_graph_id,
+    group_source_app_name,
+    show_direct_messages,
+  })
 
   const value = useMemo(
     () => ({

package/src/hooks/direct_messages/use_direct_message_candidates.ts

@@ -26,5 +26,6 @@ export function useDirectMessageCandidates(term: string) {
       }) as Promise<ApiCollection<DirectMessageCandidateResource>>,
     enabled: term.length >= 1,
     staleTime: 1000 * 60,
+    throwOnError: true,
   })
 }

package/src/hooks/groups/use_group_chat_conversation_payload.ts

@@ -1,8 +1,9 @@
 import { useQuery } from '@tanstack/react-query'
 import { ApiResource, ResourceObject } from '../../types'
+import { toMs } from '../../utils/time'
 import { useApiClient } from '../use_api_client'
 
-const STALE_TIME_MS = 25 * 60 * 1000 // under Groups' 30-min server-side expiry
+const STALE_TIME_MS = toMs(25, 'minutes') // under Groups' 30-min server-side expiry
 
 interface Props {
   groupId: number

package/src/hooks/index.ts

@@ -10,6 +10,7 @@ export * from './use_current_person'
 export * from './use_deleting_ids'
 export * from './use_direct_messages_enabled'
 export * from './use_font_scale'
+export * from './use_has_direct_messages'
 export * from './use_groups_groups'
 export * from './use_groups'
 export * from './use_interaction_ghost_color'

package/src/hooks/services/use_services_chat_conversation_payload.ts

@@ -1,8 +1,9 @@
 import { useQuery } from '@tanstack/react-query'
+import { toMs } from '../../utils/time'
 import { useApiClient } from '../use_api_client'
 import { getServicesChatConversationPayload } from './use_find_or_create_services_conversation'
 
-const STALE_TIME_MS = 55 * 60 * 1000 // under Services' 1-hour server-side expiry
+const STALE_TIME_MS = toMs(55, 'minutes') // under Services' 1-hour server-side expiry
 
 interface Props {
   teamIds: number[]

package/src/hooks/use_api.ts

@@ -17,7 +17,15 @@ interface ApiGetOptions extends GetRequest {
   enabled?: boolean
 }
 
-export const useApiGet = <T extends ResourceObject | ResourceObject[]>(args: ApiGetOptions) => {
+type UseApiGetOptions = {
+  staleTime?: number
+  gcTime?: number
+}
+
+export const useApiGet = <T extends ResourceObject | ResourceObject[]>(
+  args: ApiGetOptions,
+  opts?: UseApiGetOptions
+) => {
   type Resource = ApiResource<T>
   const { session } = useContext(ChatContext)
   const apiClient = useApiClient()
@@ -32,6 +40,7 @@ export const useApiGet = <T extends ResourceObject | ResourceObject[]>(args: Api
       return apiClient[app].get({ url, data: d, headers }) as Promise<Resource>
     },
     enabled,
+    ...opts,
   })
 
   return { ...data, ...query }

package/src/hooks/use_chat_configuration.ts

@@ -5,6 +5,7 @@ import {
   getChatConfigurationRequestArgs,
   getChatConfigurationQueryKey,
 } from '../utils/request/get_chat_configuration'
+import { ONE_HOUR } from '../utils/time'
 import {
   FALLBACK_ALLOWED_FILE_EXTENSIONS,
   FALLBACK_ALLOWED_MIME_TYPES,
@@ -28,7 +29,7 @@ export function useChatConfiguration() {
         .get<ApiResource<ChatConfigurationResource>>(requestArgs)
         .catch(() => stableFallbackConfiguration)
     },
-    staleTime: 1000 * 60 * 60, // 1 hour — this rarely changes
+    staleTime: ONE_HOUR,
   })
 
   const attrs = data.data

package/src/hooks/use_chat_permissions.ts

@@ -1,4 +1,5 @@
 import { AppGrantsResource } from '../types'
+import { FIVE_MINUTES } from '../utils/time'
 import { useApiGet } from './use_api'
 import { App } from './use_api_client'
 
@@ -13,7 +14,9 @@ export const appGrantsRequestArgs = {
 }
 
 export function useAppGrants() {
-  return useApiGet<AppGrantsResource[]>(appGrantsRequestArgs)
+  return useApiGet<AppGrantsResource[]>(appGrantsRequestArgs, {
+    staleTime: FIVE_MINUTES,
+  })
 }
 
 export function useCanCreateConversations(): boolean {

package/src/hooks/use_conversation.ts

@@ -29,6 +29,7 @@ export const getConversationRequestArgs = ({ conversation_id }: { conversation_i
         'custom_avatar_color',
         'custom_avatar_image_url',
         'disabled',
+        'disabled_reason',
         'member_ability',
         'muted',
         'replies_disabled',

package/src/hooks/use_conversation_jolt_events.ts

@@ -26,7 +26,8 @@ export function useConversationJoltEvents({ conversationId }: Props) {
 
   const handleUpdatedConversation = useCallback(
     (e: JoltConversationEvent) => {
-      const { last_message_idempotent_key, last_message_author_id, disabled } = e.data.data
+      const { last_message_idempotent_key, last_message_author_id, disabled, disabled_reason } =
+        e.data.data
 
       if (last_message_idempotent_key && last_message_author_id === currentPersonId) {
         completeMessageCreationConversationTracking({
@@ -37,7 +38,7 @@ export function useConversationJoltEvents({ conversationId }: Props) {
 
       queryClient.setQueryData<ApiResource<ConversationResource>>(queryKey, prev => {
         if (!prev?.data) return prev
-        return { ...prev, data: { ...prev.data, disabled } }
+        return { ...prev, data: { ...prev.data, disabled, disabledReason: disabled_reason } }
       })
 
       queryClient.invalidateQueries({ queryKey })

package/src/hooks/use_current_person.ts

@@ -1,6 +1,7 @@
 import { useQueryClient } from '@tanstack/react-query'
 import { CurrentPersonResource } from '../types'
 import { ApiResource } from '../types/api_primitives'
+import { FIVE_MINUTES, THIRTY_MINUTES } from '../utils/time'
 import { getRequestQueryKey, useSuspenseGet } from './use_suspense_api'
 
 export const currentPersonRequestArgs = {
@@ -15,6 +16,7 @@ export const currentPersonRequestArgs = {
         'unread_count',
         'pco_chat_enabled',
         'age_qualification_status',
+        'direct_messages_disabled',
       ],
     },
   },
@@ -24,8 +26,8 @@ export const currentPersonQueryKey = getRequestQueryKey(currentPersonRequestArgs
 
 export const useCurrentPerson = () => {
   const { data: person } = useSuspenseGet<CurrentPersonResource>(currentPersonRequestArgs, {
-    staleTime: 5 * 60 * 1000, // 5 minutes - data stays fresh for 5 minutes
-    gcTime: 30 * 60 * 1000, // 30 minutes - data stays in cache for 30 minutes when not in use
+    staleTime: FIVE_MINUTES,
+    gcTime: THIRTY_MINUTES,
   })
 
   return person

package/src/hooks/use_features.ts

@@ -3,6 +3,7 @@ import { useCallback } from 'react'
 import { ApiCollection } from '../types'
 import type { FeatureResource } from '../types/resources/feature_resource'
 import { getFeaturesRequestArgs, getFeaturesQueryKey } from '../utils/request/get_features'
+import { FIVE_MINUTES } from '../utils/time'
 import { useApiClient } from './use_api_client'
 
 type FeatureName = (typeof availableFeatures)[keyof typeof availableFeatures]
@@ -18,7 +19,7 @@ export function useFeatures() {
         .get<ApiCollection<FeatureResource>>(requestArgs)
         .catch(() => stableEmptyFeatures)
     },
-    staleTime: 1000 * 60 * 5, // 5 minutes
+    staleTime: FIVE_MINUTES,
   })
 
   const features = data.data

package/src/hooks/use_groups.ts

@@ -1,5 +1,6 @@
 import { AppName } from '../types/resources/app_name'
 import { GroupResource, SourceType } from '../types/resources/group_resource'
+import { FIVE_MINUTES } from '../utils/time'
 import { useApiPaginator } from './use_api'
 
 type UseGroupsProps = {
@@ -8,20 +9,23 @@ type UseGroupsProps = {
 }
 
 export const useGroups = ({ source_app_name, source_type }: UseGroupsProps) => {
-  return useApiPaginator<GroupResource>({
-    url: '/me/groups',
-    data: {
-      fields: {
-        Group: [],
+  return useApiPaginator<GroupResource>(
+    {
+      url: '/me/groups',
+      data: {
+        fields: {
+          Group: [],
+        },
+        where: {
+          source_app_name,
+          source_type,
+        },
+        perPage: 100,
       },
-      where: {
-        source_app_name,
-        source_type,
-      },
-      perPage: 100,
+      app: 'chat',
     },
-    app: 'chat',
-  })
+    { staleTime: FIVE_MINUTES }
+  )
 }
 
 export const useCanDisplayGroups = (props: UseGroupsProps) => {

package/src/hooks/use_groups_groups.ts

@@ -1,24 +1,28 @@
 import { GroupsGroupResource } from '../types'
+import { FIVE_MINUTES } from '../utils/time'
 import { useApiPaginator } from './use_api'
 
 export const useGroupsGroups = () => {
-  return useApiPaginator<GroupsGroupResource>({
-    url: '/me/groups',
-    data: {
-      perPage: 100,
-      fields: {
-        Group: [
-          'can_create_conversation',
-          'can_create_conversation_reason_code',
-          'name',
-          'header_image',
-          'memberships_count',
-        ],
+  return useApiPaginator<GroupsGroupResource>(
+    {
+      url: '/me/groups',
+      data: {
+        perPage: 100,
+        fields: {
+          Group: [
+            'can_create_conversation',
+            'can_create_conversation_reason_code',
+            'name',
+            'header_image',
+            'memberships_count',
+          ],
+        },
+        order: 'name',
       },
-      order: 'name',
+      app: 'groups',
     },
-    app: 'groups',
-  })
+    { staleTime: FIVE_MINUTES }
+  )
 }
 
 export const useCanDisplayGroupsGroups = () => {

package/src/hooks/use_has_direct_messages.ts

@@ -0,0 +1,21 @@
+import { useQuery } from '@tanstack/react-query'
+import { ApiCollection, ConversationResource } from '../types'
+import { useApiClient } from './use_api_client'
+
+export function useHasDirectMessages(): boolean {
+  const apiClient = useApiClient()
+
+  const { data, isFetched } = useQuery<ApiCollection<ConversationResource>>({
+    queryKey: ['chat', '/me/conversations', 'direct_message', 'has_any'],
+    queryFn: () =>
+      apiClient.chat.get({
+        url: '/me/conversations',
+        data: { filter: 'direct_message', perPage: 1, fields: { Conversation: ['id'] } },
+      }),
+    staleTime: 1000 * 60 * 5,
+  })
+
+  if (!isFetched) return false
+
+  return (data?.data.length ?? 0) > 0
+}

package/src/hooks/use_jolt.ts

@@ -13,6 +13,7 @@ import { useChatContext } from '../contexts/chat_context'
 import { ApiResource } from '../types'
 import type { JoltSubscriptionPattern } from '../types/jolt_events'
 import { Client, Uri } from '../utils'
+import { FIVE_SECONDS } from '../utils/time'
 
 interface JoltResponse {
   type: 'JoltToken'
@@ -49,7 +50,7 @@ export const useJoltClient = (): JoltClient | undefined => {
           },
         })
       },
-      staleTime: 5000, // 5 seconds
+      staleTime: FIVE_SECONDS,
     })
   }
 

package/src/hooks/use_organization.ts

@@ -1,4 +1,5 @@
 import { OrganizationResource } from '../types'
+import { ONE_HOUR } from '../utils/time'
 import { App } from './use_api_client'
 import { useSuspenseGet } from './use_suspense_api'
 
@@ -13,5 +14,7 @@ export const organizationRequestArgs = {
 }
 
 export function useOrganization() {
-  return useSuspenseGet<OrganizationResource>(organizationRequestArgs)
+  return useSuspenseGet<OrganizationResource>(organizationRequestArgs, {
+    staleTime: ONE_HOUR,
+  })
 }

package/src/hooks/use_person_settings.ts

@@ -0,0 +1,29 @@
+import { useMutation } from '@tanstack/react-query'
+import { throwResponseError } from '../utils/response_error'
+import { useApiClient } from './use_api_client'
+import { useCurrentPerson, useCurrentPersonCache } from './use_current_person'
+
+export function usePersonSettings() {
+  const apiClient = useApiClient()
+  const person = useCurrentPerson()
+  const { update, invalidate } = useCurrentPersonCache()
+
+  const directMessagesDisabled = person?.directMessagesDisabled ?? false
+
+  const { mutate: setDirectMessagesDisabled, isPending: isMutating } = useMutation({
+    mutationFn: (disabled: boolean) => {
+      const action = disabled ? 'disable_direct_messages' : 'enable_direct_messages'
+      return apiClient.chat
+        .post({ url: `/me/${action}`, data: { data: { type: 'Person', attributes: {} } } })
+        .catch(throwResponseError)
+    },
+    onMutate: disabled => {
+      update({ directMessagesDisabled: disabled })
+    },
+    onError: () => {
+      invalidate()
+    },
+  })
+
+  return { directMessagesDisabled, setDirectMessagesDisabled, isMutating }
+}

package/src/navigation/index.tsx

@@ -77,6 +77,7 @@ import { NotificationSettingsScreen } from '../screens/notification_settings_scr
 import { PreferredAppSelectionScreen } from '../screens/preferred_app_selection_screen'
 import { ReactionsScreen, ReactionsScreenOptions } from '../screens/reactions_screen'
 import { SendGiphyScreen, SendGiphyScreenOptions } from '../screens/send_giphy_screen'
+import { SettingsScreen } from '../screens/settings_screen'
 import {
   SystemMessagePeopleScreen,
   SystemMessagePeopleScreenOptions,
@@ -280,6 +281,16 @@ export const ChatStack = createNativeStackNavigator({
       screen: AvatarPickerScreen,
       options: AvatarPickerScreenOptions,
     },
+    ChatSettings: {
+      screen: SettingsScreen,
+      options: ({ navigation }) => ({
+        title: 'Chat settings',
+        headerBackVisible: false,
+        headerRight: (props: NativeStackHeaderRightProps) => (
+          <HeaderTextButton {...props} onPress={navigation.goBack} title="Done" />
+        ),
+      }),
+    },
     NotificationSettings: {
       screen: NotificationSettingsScreen,
       options: ({ navigation }) => ({

package/src/screens/conversation_details_screen.tsx

@@ -122,6 +122,7 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
   const canDelete = conversation.memberAbility?.canDelete || false
   const isLeader = conversation.memberAbility?.leader || false
   const isDisabled = conversation.disabled ?? false
+  const showAdultRequirementNotice = isDisabled && conversation.disabledReason === 'safety_check'
 
   const {
     data: members,
@@ -350,7 +351,7 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
       sectionInnerStyle: styles.sectionInnerGenderNotice,
     },
     {
-      type: isDisabled ? SectionTypes.view : SectionTypes.hidden,
+      type: showAdultRequirementNotice ? SectionTypes.view : SectionTypes.hidden,
       data: {
         children: <AdultRequirementNotice />,
       },

package/src/screens/conversation_filters/components/conversation_filters.tsx

@@ -2,7 +2,12 @@ import React, { useContext, useMemo } from 'react'
 import { StyleSheet, View, ViewStyle } from 'react-native'
 import { FlatList } from 'react-native-gesture-handler'
 import { Heading } from '../../../components'
-import { useAtFontScaleBreakpoint, useTheme } from '../../../hooks'
+import {
+  useAtFontScaleBreakpoint,
+  useDirectMessagesEnabled,
+  useHasDirectMessages,
+  useTheme,
+} from '../../../hooks'
 import { FilterContext, useFilterContext } from '../context/conversation_filter_context'
 import { FilterTypes } from '../filter_types'
 import { useGroupsToFilter, useTeamsToFilter } from '../hooks/filters'
@@ -52,7 +57,11 @@ interface DataItem<T, TName extends SectionTypes> {
 export const ConversationFilters = () => {
   const styles = useStyles()
   const { setScrollOffset, params } = useContext(FilterContext)
-  const { chat_group_graph_id, group_source_app_name = '' } = params
+  const { chat_group_graph_id, group_source_app_name = '', show_direct_messages } = params
+
+  const directMessagesEnabled = useDirectMessagesEnabled()
+  const hasDirectMessages = useHasDirectMessages()
+  const canFilterByDMs = directMessagesEnabled && hasDirectMessages
 
   const activeFilter: FilterTypes = useMemo(() => {
     if (chat_group_graph_id) {
@@ -61,10 +70,12 @@ export const ConversationFilters = () => {
       return FilterTypes.Groups
     } else if (/services/i.test(group_source_app_name)) {
       return FilterTypes.Teams
+    } else if (show_direct_messages) {
+      return FilterTypes.DirectMessages
     }
 
     return FilterTypes.All
-  }, [chat_group_graph_id, group_source_app_name])
+  }, [chat_group_graph_id, group_source_app_name, show_direct_messages])
 
   const { groups = [] } = useGroupsToFilter()
   const { teams = [] } = useTeamsToFilter()
@@ -91,14 +102,15 @@ export const ConversationFilters = () => {
   const teamItemData = selectActiveWithFirst(5)(teamItems)
 
   const hideAppFilters = groupItems.length < 1 || teamItems.length < 1
+  const showGeneralFilters = !hideAppFilters || canFilterByDMs
 
   const listData: SectionListData = [
     {
-      type: hideAppFilters ? SectionTypes.hidden : SectionTypes.header,
+      type: showGeneralFilters ? SectionTypes.header : SectionTypes.hidden,
       data: { title: 'General Filters' },
     },
     {
-      type: hideAppFilters ? SectionTypes.hidden : SectionTypes.filter,
+      type: showGeneralFilters ? SectionTypes.filter : SectionTypes.hidden,
       data: { filter: FilterTypes.All, isActive: activeFilter === FilterTypes.All },
     },
     {
@@ -117,6 +129,14 @@ export const ConversationFilters = () => {
         isActive: activeFilter === FilterTypes.Teams,
       },
     },
+    {
+      type: canFilterByDMs ? SectionTypes.filter : SectionTypes.hidden,
+      data: {
+        filter: FilterTypes.DirectMessages,
+        show_direct_messages: true,
+        isActive: activeFilter === FilterTypes.DirectMessages,
+      },
+    },
     {
       type: groupItems.length ? SectionTypes.header : SectionTypes.hidden,
       data: { title: 'Groups', style: styles.extraHeaderScalableSpace },

package/src/screens/conversation_filters/components/rows.tsx

@@ -17,13 +17,26 @@ import { FilterTypes } from '../filter_types'
 import { FilteredGroup } from '../hooks/filters'
 import { ConversationFilterStackParamList } from '../screen_props'
 
-export type FilterProps = { group_source_app_name?: string; isActive: boolean; filter: FilterTypes }
+export type FilterProps = {
+  group_source_app_name?: string
+  show_direct_messages?: boolean
+  isActive: boolean
+  filter: FilterTypes
+}
 
-export const FilterRow = ({ group_source_app_name, isActive, filter }: FilterProps) => {
+export const FilterRow = ({
+  group_source_app_name,
+  show_direct_messages,
+  isActive,
+  filter,
+}: FilterProps) => {
   const { setAppFilter } = useContext(FilterContext)
 
   return (
-    <PressableRow onPress={() => setAppFilter({ group_source_app_name })} isActive={isActive}>
+    <PressableRow
+      onPress={() => setAppFilter({ group_source_app_name, show_direct_messages })}
+      isActive={isActive}
+    >
       <Text>{filter}</Text>
     </PressableRow>
   )

package/src/screens/conversation_filters/context/conversation_filter_context.tsx

@@ -21,6 +21,7 @@ export const FilterContext = createContext<{
   params: {
     chat_group_graph_id: undefined,
     group_source_app_name: undefined,
+    show_direct_messages: undefined,
   },
   scrollOffset: 0,
   setScrollOffset: () => {},
@@ -55,6 +56,7 @@ export const FilterProvider = ({ children }: PropsWithChildren) => {
         StackActions.popTo('Conversations', {
           chat_group_graph_id: undefined,
           group_source_app_name: undefined,
+          show_direct_messages: undefined,
         })
       )
     },
@@ -62,12 +64,14 @@ export const FilterProvider = ({ children }: PropsWithChildren) => {
       navigation.setParams({
         chat_group_graph_id: params.chat_group_graph_id,
         group_source_app_name: undefined,
+        show_direct_messages: undefined,
       })
     },
     setAppFilter: (params: Omit<ConversationFiltersParams, 'chat_group_graph_id'>) => {
       navigation.setParams({
         chat_group_graph_id: undefined,
         group_source_app_name: params.group_source_app_name,
+        show_direct_messages: params.show_direct_messages,
       })
     },
     applyFilters: (params: ConversationFiltersParams) => {

package/src/screens/conversation_filters/filter_types.ts

@@ -1,5 +1,6 @@
 export enum FilterTypes {
   All = 'All conversations',
+  DirectMessages = 'Direct messages',
   Groups = 'All my groups',
   Teams = 'All my teams and plans',
   More = 'More',

package/src/screens/conversation_filters/screen_props.ts

@@ -4,6 +4,7 @@ import { GraphId } from '../../types/resources/group_resource'
 export type ConversationFiltersParams = {
   chat_group_graph_id?: GraphId
   group_source_app_name?: string
+  show_direct_messages?: boolean
 }
 
 export type ConversationFiltersScreenProps = StaticScreenProps<ConversationFiltersParams>

package/src/screens/conversation_screen.tsx

@@ -239,7 +239,8 @@ function ConversationBottomBar({
   replyRootId,
   currentlyEditingMessage,
 }: ConversationBottomBarProps) {
-  if (conversation.disabled) return <ConversationDisabledBanner />
+  if (conversation.disabled)
+    return <ConversationDisabledBanner disabledReason={conversation.disabledReason} />
   if (!canReply) return <MemberMessagesDisabledBanner />
   return (
     <MessageForm.Root