@planningcenter/chat-react-native 3.2.0-rc.8 → 3.2.0

package/build/screens/conversation_screen.js

@@ -1,14 +1,19 @@
+// @ts-expect-error
+import { date as formatDate } from '@planningcenter/datetime-fmt';
 import { HeaderTitle, PlatformPressable } from '@react-navigation/elements';
-import { useNavigation, useTheme as useNavigationTheme, useRoute, } from '@react-navigation/native';
+import { CommonActions, useNavigation, useTheme as useNavigationTheme, useRoute, } from '@react-navigation/native';
+import moment from 'moment';
 import React, { useCallback, useEffect } from 'react';
 import { FlatList, Platform, StyleSheet, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Badge, Icon } from '../components';
+import { Badge, Icon, Text } from '../components';
 import { Message } from '../components/conversation/message';
 import { MessageForm } from '../components/conversation/message_form';
 import { KeyboardView } from '../components/display/keyboard_view';
+import { useTheme } from '../hooks';
 import { useConversation } from '../hooks/use_conversation';
 import { useConversationMessages } from '../hooks/use_conversation_messages';
+import { getRelativeDateStatus } from '../utils/date';
 export function ConversationScreen({ route }) {
     const styles = useStyles();
     const navigation = useNavigation();
@@ -17,6 +22,8 @@ export function ConversationScreen({ route }) {
     const { messages, refetch, isRefetching, fetchNextPage } = useConversationMessages({
         conversation_id,
     });
+    useEnsureConversationsRouteExists();
+    const messagesWithSeparators = groupMessages(messages);
     // Seems to be necessary to define this way so we get the route picked up
     const headerTitle = useCallback((props) => <PressableHeaderTitle {...props}/>, []);
     useEffect(() => {
@@ -24,9 +31,14 @@ export function ConversationScreen({ route }) {
     }, [conversation, conversation_id, navigation, headerTitle, conversation?.title]);
     return (<View style={styles.container}>
       <KeyboardView style={styles.keyboardView}>
-        <FlatList inverted contentContainerStyle={styles.listContainer} refreshing={isRefetching} onRefresh={refetch} data={messages} keyExtractor={item => item.id} renderItem={({ item }) => <Message {...item} conversation_id={conversation_id}/>} onEndReached={() => fetchNextPage()}/>
+        <FlatList inverted contentContainerStyle={styles.listContainer} refreshing={isRefetching} onRefresh={refetch} data={messagesWithSeparators} keyExtractor={item => item.id} renderItem={({ item }) => {
+            if (item.type === 'DateSeparator') {
+                return <InlineDateSeparator {...item}/>;
+            }
+            return <Message {...item} conversation_id={conversation_id}/>;
+        }} onEndReached={() => fetchNextPage()}/>
         <MessageForm.Root conversation={conversation}>
-          {/* <MessageForm.AttachmentPicker /> */}
+          <MessageForm.AttachmentPicker />
           <MessageForm.Commands />
           <MessageForm.TextInput />
           <MessageForm.SubmitButton />
@@ -34,6 +46,69 @@ export function ConversationScreen({ route }) {
       </KeyboardView>
     </View>);
 }
+function InlineDateSeparator({ date }) {
+    const styles = useDateSeparatorStyles();
+    const { isThisYear } = getRelativeDateStatus(date);
+    const showYear = !isThisYear;
+    const dateStamp = formatDate(date, { style: 'long', year: showYear });
+    return (<View style={styles.container}>
+      <View style={styles.separator}/>
+      <Text variant="footnote" style={styles.dateText}>
+        {dateStamp}
+      </Text>
+      <View style={styles.separator}/>
+    </View>);
+}
+const useDateSeparatorStyles = () => {
+    const theme = useTheme();
+    return StyleSheet.create({
+        container: {
+            alignItems: 'center',
+            flexDirection: 'row',
+            paddingHorizontal: 16,
+            paddingVertical: 16,
+        },
+        separator: {
+            flex: 1,
+            height: 1,
+            borderTopWidth: 1,
+            borderTopColor: theme.colors.borderColorDefaultBase,
+        },
+        dateText: {
+            paddingHorizontal: 8,
+        },
+    });
+};
+export const groupMessages = (ms) => {
+    let enrichedMessages = [];
+    let encounteredOneOfMyMessages = false;
+    ms.forEach((message, i) => {
+        const prevMessage = ms[i + 1];
+        const nextMessage = ms[i - 1];
+        const date = moment(message.createdAt).format('YYYY-MM-DD');
+        const prevMessageDifferentAuthor = message.author?.id !== prevMessage?.author?.id;
+        const nextMessageDifferentAuthor = message.author?.id !== nextMessage?.author?.id;
+        const prevMessageMoreThan5Minutes = prevMessage &&
+            new Date(message.createdAt).getTime() - new Date(prevMessage.createdAt).getTime() > 60000 * 5;
+        const nextMessageMoreThan5Minutes = nextMessage &&
+            new Date(nextMessage.createdAt).getTime() - new Date(message.createdAt).getTime() > 60000 * 5;
+        if (message.mine && !encounteredOneOfMyMessages) {
+            encounteredOneOfMyMessages = true;
+            message.myLatestInConversation = true;
+        }
+        else {
+            message.myLatestInConversation = false;
+        }
+        message.lastInGroup = !nextMessage || nextMessageDifferentAuthor || nextMessageMoreThan5Minutes;
+        message.renderAuthor =
+            !message.mine && (!prevMessage || prevMessageDifferentAuthor || prevMessageMoreThan5Minutes);
+        enrichedMessages.push(message);
+        if (!prevMessage || date !== moment(prevMessage.createdAt).format('YYYY-MM-DD')) {
+            enrichedMessages.push({ type: 'DateSeparator', id: `day-divider-${message.id}`, date });
+        }
+    });
+    return enrichedMessages;
+};
 const PressableHeaderTitle = ({ style, children }) => {
     const styles = usePressableHeaderStyle();
     const navigation = useNavigation();
@@ -91,4 +166,28 @@ const useStyles = () => {
         },
     });
 };
+/**
+ * useEnsureConversationsRouteExists
+ */
+const useEnsureConversationsRouteExists = () => {
+    const navigation = useNavigation();
+    const { params } = useRoute();
+    useEffect(() => {
+        const navigationState = navigation.getState();
+        const routes = navigationState?.routes || [];
+        const conversationsRoute = routes.find(r => r.name === 'Conversations');
+        if (conversationsRoute)
+            return;
+        navigation.dispatch(state => {
+            return CommonActions.reset({
+                ...state,
+                routes: [
+                    { name: 'Conversations', params: { chat_group_graph_id: params?.chat_group_graph_id } },
+                    ...routes,
+                ],
+                index: state.index + 1,
+            });
+        });
+    }, [navigation, params?.chat_group_graph_id]);
+};
 //# sourceMappingURL=conversation_screen.js.map

package/build/screens/conversation_screen.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation_screen.js","sourceRoot":"","sources":["../../src/screens/conversation_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { HeaderTitle, HeaderTitleProps, PlatformPressable } from '@react-navigation/elements'\nimport {\n  StaticScreenProps,\n  useNavigation,\n  useTheme as useNavigationTheme,\n  useRoute,\n} from '@react-navigation/native'\nimport React, { useCallback, useEffect } from 'react'\nimport { FlatList, Platform, StyleSheet, View } from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { Badge, Icon } from '../components'\nimport { Message } from '../components/conversation/message'\nimport { MessageForm } from '../components/conversation/message_form'\nimport { KeyboardView } from '../components/display/keyboard_view'\nimport { useConversation } from '../hooks/use_conversation'\nimport { useConversationMessages } from '../hooks/use_conversation_messages'\n\ntype ConversationRouteProps = {\n  conversation_id: number\n  chat_group_graph_id?: string\n  clear_input?: boolean\n}\n\nexport type ConversationScreenProps = StaticScreenProps<ConversationRouteProps>\n\nexport function ConversationScreen({ route }: ConversationScreenProps) {\n  const styles = useStyles()\n  const navigation = useNavigation()\n\n  const { conversation_id } = route.params\n  const { data: conversation } = useConversation(route.params)\n  const { messages, refetch, isRefetching, fetchNextPage } = useConversationMessages({\n    conversation_id,\n  })\n\n  // Seems to be necessary to define this way so we get the route picked up\n  const headerTitle = useCallback(\n    (props: HeaderTitleProps) => <PressableHeaderTitle {...props} />,\n    []\n  )\n\n  useEffect(() => {\n    navigation.setOptions({ headerTitle, title: conversation?.title })\n  }, [conversation, conversation_id, navigation, headerTitle, conversation?.title])\n\n  return (\n    <View style={styles.container}>\n      <KeyboardView style={styles.keyboardView}>\n        <FlatList\n          inverted\n          contentContainerStyle={styles.listContainer}\n          refreshing={isRefetching}\n          onRefresh={refetch}\n          data={messages}\n          keyExtractor={item => item.id}\n          renderItem={({ item }) => <Message {...item} conversation_id={conversation_id} />}\n          onEndReached={() => fetchNextPage()}\n        />\n        <MessageForm.Root conversation={conversation}>\n          {/* <MessageForm.AttachmentPicker /> */}\n          <MessageForm.Commands />\n          <MessageForm.TextInput />\n          <MessageForm.SubmitButton />\n        </MessageForm.Root>\n      </KeyboardView>\n    </View>\n  )\n}\n\nconst PressableHeaderTitle = ({ style, children }: HeaderTitleProps) => {\n  const styles = usePressableHeaderStyle()\n  const navigation = useNavigation()\n\n  const route = useRoute() as ConversationScreenProps['route']\n\n  const { data: conversation } = useConversation(route.params)\n  const badge = conversation.badges?.[0]\n  const resourceType = badge?.pcoResourceType || ''\n  const productName = badge?.appName\n  const name = badge?.text || undefined\n\n  return (\n    <PlatformPressable\n      style={styles.container}\n      onPress={() =>\n        navigation.navigate('ConversationDetails', { conversation_id: conversation?.id })\n      }\n    >\n      <View style={styles.titleWrapper}>\n        <HeaderTitle style={[styles.title, style]}>{children}</HeaderTitle>\n        <Icon name=\"general.downChevron\" size={12} />\n      </View>\n      <Badge\n        variant=\"metaSubtle\"\n        productLogoName={productName}\n        label={resourceType}\n        metaLabel={name}\n        style={styles.badge}\n      />\n    </PlatformPressable>\n  )\n}\n\nconst usePressableHeaderStyle = () => {\n  return StyleSheet.create({\n    container: {\n      alignItems: Platform.select({ android: 'flex-start', default: 'center' }),\n    },\n    titleWrapper: {\n      alignItems: 'center',\n      columnGap: 4,\n      flexDirection: 'row',\n    },\n    title: {\n      padding: 0,\n      margin: 0,\n    },\n    badge: {\n      alignSelf: Platform.select({ android: 'flex-start', default: 'center' }),\n      marginTop: 2,\n    },\n  })\n}\n\nconst useStyles = () => {\n  const navigationTheme = useNavigationTheme()\n  const { bottom } = useSafeAreaInsets()\n\n  return StyleSheet.create({\n    container: {\n      flex: 1,\n      justifyContent: 'center',\n      backgroundColor: navigationTheme.colors.card,\n      paddingBottom: bottom,\n    },\n    keyboardView: {\n      flex: 1,\n    },\n    listContainer: {\n      gap: 12,\n      paddingHorizontal: 16,\n      paddingVertical: 12,\n    },\n  })\n}\n"]}
+{"version":3,"file":"conversation_screen.js","sourceRoot":"","sources":["../../src/screens/conversation_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["// @ts-expect-error\nimport { date as formatDate } from '@planningcenter/datetime-fmt'\nimport { HeaderTitle, HeaderTitleProps, PlatformPressable } from '@react-navigation/elements'\nimport {\n  CommonActions,\n  RouteProp,\n  StaticScreenProps,\n  useNavigation,\n  useTheme as useNavigationTheme,\n  useRoute,\n} from '@react-navigation/native'\nimport moment from 'moment'\nimport React, { useCallback, useEffect } from 'react'\nimport { FlatList, Platform, StyleSheet, View } from 'react-native'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { Badge, Icon, Text } from '../components'\nimport { Message } from '../components/conversation/message'\nimport { MessageForm } from '../components/conversation/message_form'\nimport { KeyboardView } from '../components/display/keyboard_view'\nimport { useTheme } from '../hooks'\nimport { useConversation } from '../hooks/use_conversation'\nimport { useConversationMessages } from '../hooks/use_conversation_messages'\nimport { MessageResource } from '../types'\nimport { getRelativeDateStatus } from '../utils/date'\n\ntype ConversationRouteProps = {\n  conversation_id: number\n  chat_group_graph_id?: string\n  clear_input?: boolean\n}\n\nexport type ConversationScreenProps = StaticScreenProps<ConversationRouteProps>\n\nexport function ConversationScreen({ route }: ConversationScreenProps) {\n  const styles = useStyles()\n  const navigation = useNavigation()\n\n  const { conversation_id } = route.params\n  const { data: conversation } = useConversation(route.params)\n  const { messages, refetch, isRefetching, fetchNextPage } = useConversationMessages({\n    conversation_id,\n  })\n  useEnsureConversationsRouteExists()\n  const messagesWithSeparators = groupMessages(messages)\n\n  // Seems to be necessary to define this way so we get the route picked up\n  const headerTitle = useCallback(\n    (props: HeaderTitleProps) => <PressableHeaderTitle {...props} />,\n    []\n  )\n\n  useEffect(() => {\n    navigation.setOptions({ headerTitle, title: conversation?.title })\n  }, [conversation, conversation_id, navigation, headerTitle, conversation?.title])\n\n  return (\n    <View style={styles.container}>\n      <KeyboardView style={styles.keyboardView}>\n        <FlatList\n          inverted\n          contentContainerStyle={styles.listContainer}\n          refreshing={isRefetching}\n          onRefresh={refetch}\n          data={messagesWithSeparators}\n          keyExtractor={item => item.id}\n          renderItem={({ item }) => {\n            if (item.type === 'DateSeparator') {\n              return <InlineDateSeparator {...item} />\n            }\n\n            return <Message {...item} conversation_id={conversation_id} />\n          }}\n          onEndReached={() => fetchNextPage()}\n        />\n        <MessageForm.Root conversation={conversation}>\n          <MessageForm.AttachmentPicker />\n          <MessageForm.Commands />\n          <MessageForm.TextInput />\n          <MessageForm.SubmitButton />\n        </MessageForm.Root>\n      </KeyboardView>\n    </View>\n  )\n}\n\nexport type DateSeparator = { type: 'DateSeparator'; id: string; date: string }\n\nfunction InlineDateSeparator({ date }: DateSeparator) {\n  const styles = useDateSeparatorStyles()\n  const { isThisYear } = getRelativeDateStatus(date)\n  const showYear = !isThisYear\n  const dateStamp = formatDate(date, { style: 'long', year: showYear })\n\n  return (\n    <View style={styles.container}>\n      <View style={styles.separator} />\n      <Text variant=\"footnote\" style={styles.dateText}>\n        {dateStamp}\n      </Text>\n      <View style={styles.separator} />\n    </View>\n  )\n}\n\nconst useDateSeparatorStyles = () => {\n  const theme = useTheme()\n  return StyleSheet.create({\n    container: {\n      alignItems: 'center',\n      flexDirection: 'row',\n      paddingHorizontal: 16,\n      paddingVertical: 16,\n    },\n    separator: {\n      flex: 1,\n      height: 1,\n      borderTopWidth: 1,\n      borderTopColor: theme.colors.borderColorDefaultBase,\n    },\n    dateText: {\n      paddingHorizontal: 8,\n    },\n  })\n}\n\nexport const groupMessages = (ms: MessageResource[]) => {\n  let enrichedMessages: (MessageResource | DateSeparator)[] = []\n  let encounteredOneOfMyMessages = false\n\n  ms.forEach((message, i) => {\n    const prevMessage = ms[i + 1]\n    const nextMessage = ms[i - 1]\n    const date = moment(message.createdAt).format('YYYY-MM-DD')\n    const prevMessageDifferentAuthor = message.author?.id !== prevMessage?.author?.id\n    const nextMessageDifferentAuthor = message.author?.id !== nextMessage?.author?.id\n    const prevMessageMoreThan5Minutes =\n      prevMessage &&\n      new Date(message.createdAt).getTime() - new Date(prevMessage.createdAt).getTime() > 60000 * 5\n    const nextMessageMoreThan5Minutes =\n      nextMessage &&\n      new Date(nextMessage.createdAt).getTime() - new Date(message.createdAt).getTime() > 60000 * 5\n\n    if (message.mine && !encounteredOneOfMyMessages) {\n      encounteredOneOfMyMessages = true\n      message.myLatestInConversation = true\n    } else {\n      message.myLatestInConversation = false\n    }\n    message.lastInGroup = !nextMessage || nextMessageDifferentAuthor || nextMessageMoreThan5Minutes\n    message.renderAuthor =\n      !message.mine && (!prevMessage || prevMessageDifferentAuthor || prevMessageMoreThan5Minutes)\n\n    enrichedMessages.push(message)\n    if (!prevMessage || date !== moment(prevMessage.createdAt).format('YYYY-MM-DD')) {\n      enrichedMessages.push({ type: 'DateSeparator', id: `day-divider-${message.id}`, date })\n    }\n  })\n\n  return enrichedMessages\n}\n\nconst PressableHeaderTitle = ({ style, children }: HeaderTitleProps) => {\n  const styles = usePressableHeaderStyle()\n  const navigation = useNavigation()\n\n  const route = useRoute() as ConversationScreenProps['route']\n\n  const { data: conversation } = useConversation(route.params)\n  const badge = conversation.badges?.[0]\n  const resourceType = badge?.pcoResourceType || ''\n  const productName = badge?.appName\n  const name = badge?.text || undefined\n\n  return (\n    <PlatformPressable\n      style={styles.container}\n      onPress={() =>\n        navigation.navigate('ConversationDetails', { conversation_id: conversation?.id })\n      }\n    >\n      <View style={styles.titleWrapper}>\n        <HeaderTitle style={[styles.title, style]}>{children}</HeaderTitle>\n        <Icon name=\"general.downChevron\" size={12} />\n      </View>\n      <Badge\n        variant=\"metaSubtle\"\n        productLogoName={productName}\n        label={resourceType}\n        metaLabel={name}\n        style={styles.badge}\n      />\n    </PlatformPressable>\n  )\n}\n\nconst usePressableHeaderStyle = () => {\n  return StyleSheet.create({\n    container: {\n      alignItems: Platform.select({ android: 'flex-start', default: 'center' }),\n    },\n    titleWrapper: {\n      alignItems: 'center',\n      columnGap: 4,\n      flexDirection: 'row',\n    },\n    title: {\n      padding: 0,\n      margin: 0,\n    },\n    badge: {\n      alignSelf: Platform.select({ android: 'flex-start', default: 'center' }),\n      marginTop: 2,\n    },\n  })\n}\n\nconst useStyles = () => {\n  const navigationTheme = useNavigationTheme()\n  const { bottom } = useSafeAreaInsets()\n\n  return StyleSheet.create({\n    container: {\n      flex: 1,\n      justifyContent: 'center',\n      backgroundColor: navigationTheme.colors.card,\n      paddingBottom: bottom,\n    },\n    keyboardView: {\n      flex: 1,\n    },\n    listContainer: {\n      gap: 12,\n      paddingHorizontal: 16,\n      paddingVertical: 12,\n    },\n  })\n}\n\n/**\n * useEnsureConversationsRouteExists\n */\nconst useEnsureConversationsRouteExists = () => {\n  const navigation = useNavigation()\n  const { params } = useRoute<RouteProp<ConversationScreenProps['route']>>()\n\n  useEffect(() => {\n    const navigationState = navigation.getState()\n    const routes = navigationState?.routes || []\n    const conversationsRoute = routes.find(r => r.name === 'Conversations')\n\n    if (conversationsRoute) return\n\n    navigation.dispatch(state => {\n      return CommonActions.reset({\n        ...state,\n        routes: [\n          { name: 'Conversations', params: { chat_group_graph_id: params?.chat_group_graph_id } },\n          ...routes,\n        ],\n        index: state.index + 1,\n      })\n    })\n  }, [navigation, params?.chat_group_graph_id])\n}\n"]}

package/build/screens/conversation_select_recipients/components/groups_without_chat_disclaimer_row.d.ts

@@ -0,0 +1,2 @@
+export declare const GroupsWithoutChatDisclaimerRow: () => import("react").JSX.Element;
+//# sourceMappingURL=groups_without_chat_disclaimer_row.d.ts.map

package/build/screens/conversation_select_recipients/components/groups_without_chat_disclaimer_row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"groups_without_chat_disclaimer_row.d.ts","sourceRoot":"","sources":["../../../../src/screens/conversation_select_recipients/components/groups_without_chat_disclaimer_row.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,8BAA8B,mCAQ1C,CAAA"}

package/build/screens/conversation_select_recipients/components/groups_without_chat_disclaimer_row.js

@@ -0,0 +1,17 @@
+import { Text } from '../../../components';
+import { StyleSheet } from 'react-native';
+export const GroupsWithoutChatDisclaimerRow = () => {
+    const styles = useStyles();
+    return (<Text variant="footnote" style={styles.disclaimer}>
+      *You have additional groups without chat enabled or permissions to start a new conversation.
+    </Text>);
+};
+const useStyles = () => {
+    return StyleSheet.create({
+        disclaimer: {
+            paddingHorizontal: 16,
+            paddingVertical: 12,
+        },
+    });
+};
+//# sourceMappingURL=groups_without_chat_disclaimer_row.js.map

package/build/screens/conversation_select_recipients/components/groups_without_chat_disclaimer_row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"groups_without_chat_disclaimer_row.js","sourceRoot":"","sources":["../../../../src/screens/conversation_select_recipients/components/groups_without_chat_disclaimer_row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAA;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,MAAM,CAAC,MAAM,8BAA8B,GAAG,GAAG,EAAE;IACjD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAE1B,OAAO,CACL,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAChD;;IACF,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,UAAU,EAAE;YACV,iBAAiB,EAAE,EAAE;YACrB,eAAe,EAAE,EAAE;SACpB;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { Text } from '../../../components'\nimport { StyleSheet } from 'react-native'\n\nexport const GroupsWithoutChatDisclaimerRow = () => {\n  const styles = useStyles()\n\n  return (\n    <Text variant=\"footnote\" style={styles.disclaimer}>\n      *You have additional groups without chat enabled or permissions to start a new conversation.\n    </Text>\n  )\n}\n\nconst useStyles = () => {\n  return StyleSheet.create({\n    disclaimer: {\n      paddingHorizontal: 16,\n      paddingVertical: 12,\n    },\n  })\n}\n"]}

package/build/screens/conversation_select_recipients/components/recipient_link_row.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface RecipientLinkRowProps {
+    onPress: () => void;
+    accessibilityLabel: string;
+    accessibilityHint: string;
+    imageUri?: string;
+    title: string;
+    subtitle: string;
+}
+export declare const RecipientLinkRow: ({ onPress, accessibilityLabel, accessibilityHint, imageUri, title, subtitle, }: RecipientLinkRowProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=recipient_link_row.d.ts.map

package/build/screens/conversation_select_recipients/components/recipient_link_row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"recipient_link_row.d.ts","sourceRoot":"","sources":["../../../../src/screens/conversation_select_recipients/components/recipient_link_row.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,UAAU,qBAAqB;IAC7B,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,iBAAiB,EAAE,MAAM,CAAA;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,eAAO,MAAM,gBAAgB,mFAO1B,qBAAqB,sBA2BvB,CAAA"}

package/build/screens/conversation_select_recipients/components/recipient_link_row.js

@@ -0,0 +1,61 @@
+import { PlatformPressable } from '@react-navigation/elements';
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Icon, Image, Text } from '../../../components';
+import { useTheme } from '../../../hooks';
+import { platformFontWeightMedium } from '../../../utils';
+export const RecipientLinkRow = ({ onPress, accessibilityLabel, accessibilityHint, imageUri, title, subtitle, }) => {
+    const styles = useStyles();
+    return (<PlatformPressable style={styles.row} onPress={onPress} accessibilityRole="link" accessibilityLabel={accessibilityLabel} accessibilityHint={accessibilityHint}>
+      <View style={styles.innerContainer}>
+        {imageUri && (<Image source={{ uri: imageUri }} resizeMode="cover" style={styles.image} alt=""/>)}
+        <View style={styles.content}>
+          <Text style={styles.title} numberOfLines={2}>
+            {title}
+          </Text>
+          <Text variant="tertiary" numberOfLines={1}>
+            {subtitle}
+          </Text>
+        </View>
+        <Icon name="general.rightChevron" size={16} style={styles.icon}/>
+      </View>
+    </PlatformPressable>);
+};
+const ASPECT_RATIO = 16 / 9;
+const THUMBNAIL_WIDTH = 80;
+const THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO;
+const useStyles = () => {
+    const theme = useTheme();
+    return StyleSheet.create({
+        row: {
+            paddingLeft: 16,
+        },
+        innerContainer: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 12,
+            paddingVertical: 16,
+            paddingRight: 16,
+            borderBottomWidth: 1,
+            borderColor: theme.colors.fillColorNeutral050Base,
+        },
+        image: {
+            width: THUMBNAIL_WIDTH,
+            height: THUMBNAIL_HEIGHT,
+            borderRadius: 4,
+        },
+        title: {
+            fontWeight: platformFontWeightMedium,
+            flexShrink: 1,
+        },
+        content: {
+            flexShrink: 1,
+            gap: 2,
+        },
+        icon: {
+            marginLeft: 'auto',
+            color: theme.colors.fillColorNeutral030,
+        },
+    });
+};
+//# sourceMappingURL=recipient_link_row.js.map

package/build/screens/conversation_select_recipients/components/recipient_link_row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"recipient_link_row.js","sourceRoot":"","sources":["../../../../src/screens/conversation_select_recipients/components/recipient_link_row.tsx"],"names":[],"mappings":"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","sourcesContent":["import { PlatformPressable } from '@react-navigation/elements'\nimport React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { Icon, Image, Text } from '../../../components'\nimport { useTheme } from '../../../hooks'\nimport { platformFontWeightMedium } from '../../../utils'\n\ninterface RecipientLinkRowProps {\n  onPress: () => void\n  accessibilityLabel: string\n  accessibilityHint: string\n  imageUri?: string\n  title: string\n  subtitle: string\n}\n\nexport const RecipientLinkRow = ({\n  onPress,\n  accessibilityLabel,\n  accessibilityHint,\n  imageUri,\n  title,\n  subtitle,\n}: RecipientLinkRowProps) => {\n  const styles = useStyles()\n\n  return (\n    <PlatformPressable\n      style={styles.row}\n      onPress={onPress}\n      accessibilityRole=\"link\"\n      accessibilityLabel={accessibilityLabel}\n      accessibilityHint={accessibilityHint}\n    >\n      <View style={styles.innerContainer}>\n        {imageUri && (\n          <Image source={{ uri: imageUri }} resizeMode=\"cover\" style={styles.image} alt=\"\" />\n        )}\n        <View style={styles.content}>\n          <Text style={styles.title} numberOfLines={2}>\n            {title}\n          </Text>\n          <Text variant=\"tertiary\" numberOfLines={1}>\n            {subtitle}\n          </Text>\n        </View>\n        <Icon name=\"general.rightChevron\" size={16} style={styles.icon} />\n      </View>\n    </PlatformPressable>\n  )\n}\n\nconst ASPECT_RATIO = 16 / 9\nconst THUMBNAIL_WIDTH = 80\nconst THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO\n\nconst useStyles = () => {\n  const theme = useTheme()\n\n  return StyleSheet.create({\n    row: {\n      paddingLeft: 16,\n    },\n    innerContainer: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      gap: 12,\n      paddingVertical: 16,\n      paddingRight: 16,\n      borderBottomWidth: 1,\n      borderColor: theme.colors.fillColorNeutral050Base,\n    },\n    image: {\n      width: THUMBNAIL_WIDTH,\n      height: THUMBNAIL_HEIGHT,\n      borderRadius: 4,\n    },\n    title: {\n      fontWeight: platformFontWeightMedium,\n      flexShrink: 1,\n    },\n    content: {\n      flexShrink: 1,\n      gap: 2,\n    },\n    icon: {\n      marginLeft: 'auto',\n      color: theme.colors.fillColorNeutral030,\n    },\n  })\n}\n"]}

package/build/screens/conversation_select_recipients/components/view_more_link_row.d.ts

@@ -0,0 +1,7 @@
+interface ViewMoreLinkRowProps {
+    onPress: () => void;
+    accessibilityHint: string;
+}
+export declare const ViewMoreLinkRow: ({ accessibilityHint, onPress }: ViewMoreLinkRowProps) => import("react").JSX.Element;
+export {};
+//# sourceMappingURL=view_more_link_row.d.ts.map

package/build/screens/conversation_select_recipients/components/view_more_link_row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view_more_link_row.d.ts","sourceRoot":"","sources":["../../../../src/screens/conversation_select_recipients/components/view_more_link_row.tsx"],"names":[],"mappings":"AAGA,UAAU,oBAAoB;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,iBAAiB,EAAE,MAAM,CAAA;CAC1B;AAED,eAAO,MAAM,eAAe,mCAAoC,oBAAoB,gCAUnF,CAAA"}

package/build/screens/conversation_select_recipients/components/view_more_link_row.js

@@ -0,0 +1,21 @@
+import { StyleSheet, View } from 'react-native';
+import { TextButton } from '../../../components';
+export const ViewMoreLinkRow = ({ accessibilityHint, onPress }) => {
+    const styles = useRowStyles();
+    return (<View style={[styles.row]}>
+      <TextButton onPress={onPress} accessibilityHint={accessibilityHint} accessibilityRole="link">
+        View more
+      </TextButton>
+    </View>);
+};
+const useRowStyles = () => {
+    return StyleSheet.create({
+        row: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingVertical: 12,
+            paddingHorizontal: 16,
+        },
+    });
+};
+//# sourceMappingURL=view_more_link_row.js.map

package/build/screens/conversation_select_recipients/components/view_more_link_row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view_more_link_row.js","sourceRoot":"","sources":["../../../../src/screens/conversation_select_recipients/components/view_more_link_row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAOhD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,iBAAiB,EAAE,OAAO,EAAwB,EAAE,EAAE;IACtF,MAAM,MAAM,GAAG,YAAY,EAAE,CAAA;IAE7B,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CACxB;MAAA,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,MAAM,CAC1F;;MACF,EAAE,UAAU,CACd;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,GAAG,EAAE;YACH,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,QAAQ;YACpB,eAAe,EAAE,EAAE;YACnB,iBAAiB,EAAE,EAAE;SACtB;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { StyleSheet, View } from 'react-native'\nimport { TextButton } from '../../../components'\n\ninterface ViewMoreLinkRowProps {\n  onPress: () => void\n  accessibilityHint: string\n}\n\nexport const ViewMoreLinkRow = ({ accessibilityHint, onPress }: ViewMoreLinkRowProps) => {\n  const styles = useRowStyles()\n\n  return (\n    <View style={[styles.row]}>\n      <TextButton onPress={onPress} accessibilityHint={accessibilityHint} accessibilityRole=\"link\">\n        View more\n      </TextButton>\n    </View>\n  )\n}\n\nconst useRowStyles = () => {\n  return StyleSheet.create({\n    row: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      paddingVertical: 12,\n      paddingHorizontal: 16,\n    },\n  })\n}\n"]}

package/build/screens/conversation_select_recipients/conversation_select_group_recipients_screen.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ConversationSelectRecipientsScreenProps } from './types/screen_props';
+export declare const ConversationSelectGroupRecipientsScreen: ({ route, }: ConversationSelectRecipientsScreenProps) => React.JSX.Element;
+//# sourceMappingURL=conversation_select_group_recipients_screen.d.ts.map

package/build/screens/conversation_select_recipients/conversation_select_group_recipients_screen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation_select_group_recipients_screen.d.ts","sourceRoot":"","sources":["../../../src/screens/conversation_select_recipients/conversation_select_group_recipients_screen.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,OAAO,EAAE,uCAAuC,EAAE,MAAM,sBAAsB,CAAA;AAG9E,eAAO,MAAM,uCAAuC,eAEjD,uCAAuC,sBA+CzC,CAAA"}

package/build/screens/conversation_select_recipients/conversation_select_group_recipients_screen.js

@@ -0,0 +1,48 @@
+import { useNavigation } from '@react-navigation/native';
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { FlashList } from '@shopify/flash-list';
+import { Heading } from '../../components';
+import { useGroupsGroups } from '../../hooks/use_groups_groups';
+import { pluralize } from '../../utils';
+import { RecipientLinkRow } from './components/recipient_link_row';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { GroupsWithoutChatDisclaimerRow } from './components/groups_without_chat_disclaimer_row';
+export const ConversationSelectGroupRecipientsScreen = ({ route, }) => {
+    const styles = useStyles();
+    const navigation = useNavigation();
+    const { data: groups = [] } = useGroupsGroups();
+    const groupsWithCreatePermission = groups.filter(g => g.canCreateConversation);
+    const showGroupsDisclaimer = groups.length > groupsWithCreatePermission.length;
+    const handleNavigateToConversationNew = (group) => {
+        navigation.navigate('New', {
+            screen: 'ConversationNew',
+            params: {
+                group_id: group.id,
+                source_app_name: 'Groups',
+                ...route.params,
+            },
+        });
+    };
+    return (<FlashList data={groupsWithCreatePermission} keyExtractor={item => item.id.toString()} estimatedItemSize={65} contentContainerStyle={styles.contentContainer} ListHeaderComponent={<View style={styles.sectionHeader}>
+          <Heading variant="h3">All my groups</Heading>
+        </View>} renderItem={({ item: group }) => {
+            const groupAccessibilityLabel = `Select ${group.name} with ${pluralize(group.membershipsCount, 'member')}`;
+            return (<RecipientLinkRow key={group.id} imageUri={group.headerImage?.thumbnail} title={group.name} subtitle={`${group.membershipsCount} members`} onPress={() => handleNavigateToConversationNew(group)} accessibilityLabel={groupAccessibilityLabel} accessibilityHint={`Selects group as recipient and navigates to the final screen to finish creating the conversation`}/>);
+        }} ListFooterComponent={showGroupsDisclaimer ? <GroupsWithoutChatDisclaimerRow /> : null}/>);
+};
+const useStyles = () => {
+    const { bottom } = useSafeAreaInsets();
+    return StyleSheet.create({
+        contentContainer: {
+            paddingBottom: bottom,
+        },
+        sectionHeader: {
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            padding: 16,
+            paddingBottom: 4,
+        },
+    });
+};
+//# sourceMappingURL=conversation_select_group_recipients_screen.js.map

package/build/screens/conversation_select_recipients/conversation_select_group_recipients_screen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation_select_group_recipients_screen.js","sourceRoot":"","sources":["../../../src/screens/conversation_select_recipients/conversation_select_group_recipients_screen.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useNavigation } from '@react-navigation/native'\nimport React from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { FlashList } from '@shopify/flash-list'\nimport { Heading } from '../../components'\nimport { GroupsGroupResource } from '../../types'\nimport { useGroupsGroups } from '../../hooks/use_groups_groups'\nimport { pluralize } from '../../utils'\nimport { RecipientLinkRow } from './components/recipient_link_row'\nimport { useSafeAreaInsets } from 'react-native-safe-area-context'\nimport { ConversationSelectRecipientsScreenProps } from './types/screen_props'\nimport { GroupsWithoutChatDisclaimerRow } from './components/groups_without_chat_disclaimer_row'\n\nexport const ConversationSelectGroupRecipientsScreen = ({\n  route,\n}: ConversationSelectRecipientsScreenProps) => {\n  const styles = useStyles()\n  const navigation = useNavigation()\n  const { data: groups = [] } = useGroupsGroups()\n  const groupsWithCreatePermission = groups.filter(g => g.canCreateConversation)\n  const showGroupsDisclaimer = groups.length > groupsWithCreatePermission.length\n\n  const handleNavigateToConversationNew = (group: GroupsGroupResource) => {\n    navigation.navigate('New', {\n      screen: 'ConversationNew',\n      params: {\n        group_id: group.id,\n        source_app_name: 'Groups',\n        ...route.params,\n      },\n    })\n  }\n\n  return (\n    <FlashList\n      data={groupsWithCreatePermission}\n      keyExtractor={item => item.id.toString()}\n      estimatedItemSize={65}\n      contentContainerStyle={styles.contentContainer}\n      ListHeaderComponent={\n        <View style={styles.sectionHeader}>\n          <Heading variant=\"h3\">All my groups</Heading>\n        </View>\n      }\n      renderItem={({ item: group }: { item: GroupsGroupResource }) => {\n        const groupAccessibilityLabel = `Select ${group.name} with ${pluralize(group.membershipsCount, 'member')}`\n\n        return (\n          <RecipientLinkRow\n            key={group.id}\n            imageUri={group.headerImage?.thumbnail}\n            title={group.name}\n            subtitle={`${group.membershipsCount} members`}\n            onPress={() => handleNavigateToConversationNew(group)}\n            accessibilityLabel={groupAccessibilityLabel}\n            accessibilityHint={`Selects group as recipient and navigates to the final screen to finish creating the conversation`}\n          />\n        )\n      }}\n      ListFooterComponent={showGroupsDisclaimer ? <GroupsWithoutChatDisclaimerRow /> : null}\n    />\n  )\n}\n\nconst useStyles = () => {\n  const { bottom } = useSafeAreaInsets()\n\n  return StyleSheet.create({\n    contentContainer: {\n      paddingBottom: bottom,\n    },\n    sectionHeader: {\n      flexDirection: 'row',\n      justifyContent: 'space-between',\n      padding: 16,\n      paddingBottom: 4,\n    },\n  })\n}\n"]}

package/build/screens/conversation_select_recipients/conversation_select_recipients_screen.d.ts

@@ -1,8 +1,4 @@
-import { StaticScreenProps } from '@react-navigation/native';
 import React from 'react';
-type ConversationSelectRecipientsScreenProps = StaticScreenProps<{
-    chat_group_graph_id?: string;
-}>;
-export declare const ConversationSelectRecipientsScreen: ({}: ConversationSelectRecipientsScreenProps) => React.JSX.Element;
-export {};
+import { ConversationSelectRecipientsScreenProps } from './types/screen_props';
+export declare const ConversationSelectRecipientsScreen: ({ route, }: ConversationSelectRecipientsScreenProps) => React.JSX.Element;
 //# sourceMappingURL=conversation_select_recipients_screen.d.ts.map

package/build/screens/conversation_select_recipients/conversation_select_recipients_screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"conversation_select_recipients_screen.d.ts","sourceRoot":"","sources":["../../../src/screens/conversation_select_recipients/conversation_select_recipients_screen.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAiB,MAAM,0BAA0B,CAAA;AAC3E,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,KAAK,uCAAuC,GAAG,iBAAiB,CAAC;IAC/D,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAC7B,CAAC,CAAA;AAMF,eAAO,MAAM,kCAAkC,OAAQ,uCAAuC,sBAiE7F,CAAA"}
+{"version":3,"file":"conversation_select_recipients_screen.d.ts","sourceRoot":"","sources":["../../../src/screens/conversation_select_recipients/conversation_select_recipients_screen.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAQzB,OAAO,EAAE,uCAAuC,EAAE,MAAM,sBAAsB,CAAA;AAK9E,eAAO,MAAM,kCAAkC,eAE5C,uCAAuC,sBAkFzC,CAAA"}

package/build/screens/conversation_select_recipients/conversation_select_recipients_screen.js

@@ -1,51 +1,62 @@
-import { PlatformPressable } from '@react-navigation/elements';
 import { useNavigation } from '@react-navigation/native';
 import React from 'react';
 import { ScrollView, StyleSheet, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Button, Heading, Icon, Image, Text } from '../../components';
-import { useTheme } from '../../hooks';
+import { Button, Heading } from '../../components';
 import { useGroupsGroups } from '../../hooks/use_groups_groups';
-const ASPECT_RATIO = 16 / 9;
-const THUMBNAIL_WIDTH = 80;
-const THUMBNAIL_HEIGHT = THUMBNAIL_WIDTH / ASPECT_RATIO;
-export const ConversationSelectRecipientsScreen = ({}) => {
+import { pluralize } from '../../utils';
+import { RecipientLinkRow } from './components/recipient_link_row';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ViewMoreLinkRow } from './components/view_more_link_row';
+import { GroupsWithoutChatDisclaimerRow } from './components/groups_without_chat_disclaimer_row';
+const MAX_VISIBLE_GROUPS = 5;
+export const ConversationSelectRecipientsScreen = ({ route, }) => {
     const styles = useStyles();
     const navigation = useNavigation();
     const { data: groups = [] } = useGroupsGroups();
     const groupsWithCreatePermission = groups.filter(g => g.canCreateConversation);
+    const visibleGroups = groupsWithCreatePermission.slice(0, MAX_VISIBLE_GROUPS);
+    const hasMoreGroups = groupsWithCreatePermission.length > MAX_VISIBLE_GROUPS;
+    const hasGroupsWithoutChatPermission = groups.length > groupsWithCreatePermission.length;
+    const showGroupsDisclaimer = hasGroupsWithoutChatPermission && !hasMoreGroups;
     const handleNavigateToConversationNew = (group) => {
         navigation.navigate('New', {
             screen: 'ConversationNew',
             params: {
                 group_id: group.id,
                 source_app_name: 'Groups',
+                ...route.params,
+            },
+        });
+    };
+    const handleGroupsViewMore = () => {
+        navigation.navigate('New', {
+            screen: 'ConversationSelectGroupRecipients',
+            params: {
+                ...route.params,
             },
         });
     };
-    return (<ScrollView style={styles.container}>
+    return (<ScrollView contentContainerStyle={styles.contentContainer}>
       <View style={styles.section}>
         <View style={styles.sectionHeader}>
-          <Heading>My groups</Heading>
+          <Heading variant="h3">My groups</Heading>
         </View>
         <View>
-          {groupsWithCreatePermission.map(group => (<PlatformPressable key={group.id} style={styles.row} onPress={() => handleNavigateToConversationNew(group)}>
-              <Image source={{ uri: group.headerImage?.thumbnail }} resizeMode="cover" style={styles.rowImage} alt={`Image for ${group.name}`}/>
-              <View>
-                <Heading variant="h3">{group.name}</Heading>
-                <Text>{group.membershipsCount} members</Text>
-              </View>
-              <Icon name="general.rightChevron" size={16} style={styles.rowIconRight}/>
-            </PlatformPressable>))}
+          {visibleGroups.map(group => {
+            const groupAccessibilityLabel = `Select ${group.name} with ${pluralize(group.membershipsCount, 'member')}`;
+            return (<RecipientLinkRow key={group.id} imageUri={group.headerImage?.thumbnail} title={group.name} subtitle={`${group.membershipsCount} members`} onPress={() => handleNavigateToConversationNew(group)} accessibilityLabel={groupAccessibilityLabel} accessibilityHint={`Selects group as recipient and navigates to the final screen to finish creating the conversation`}/>);
+        })}
+          {hasMoreGroups && (<ViewMoreLinkRow onPress={handleGroupsViewMore} accessibilityHint="Navigate to a full list of your groups."/>)}
+          {showGroupsDisclaimer && <GroupsWithoutChatDisclaimerRow />}
         </View>
       </View>
       <View style={styles.section}>
         <View style={styles.sectionHeader}>
-          <Heading>Teams I lead</Heading>
+          <Heading variant="h3">Teams I lead</Heading>
           <Button style={styles.selectTeamsButton} onPress={() => navigation.navigate('New', {
             screen: 'ConversationFilterRecipients',
             params: {
-                conversation_id: '2196252',
+                source_app_name: 'Services',
             },
         })} title="Select teams" variant="outline" iconNameLeft="general.search"/>
         </View>
@@ -54,45 +65,22 @@ export const ConversationSelectRecipientsScreen = ({}) => {
 };
 const useStyles = () => {
     const { bottom } = useSafeAreaInsets();
-    const theme = useTheme();
     return StyleSheet.create({
-        container: {
-            flex: 1,
-            gap: 8,
+        contentContainer: {
+            gap: 24,
+            paddingTop: 16,
+            paddingBottom: 16 + bottom,
         },
         section: {
-            padding: 16,
             flex: 1,
         },
         sectionHeader: {
             flexDirection: 'row',
             justifyContent: 'space-between',
+            paddingHorizontal: 16,
+            paddingBottom: 4,
         },
         selectTeamsButton: {},
-        row: {
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 12,
-            paddingVertical: 16,
-            borderBottomWidth: 1,
-            borderColor: theme.colors.fillColorNeutral050Base,
-        },
-        rowImage: {
-            width: THUMBNAIL_WIDTH,
-            height: THUMBNAIL_HEIGHT,
-            borderRadius: 4,
-        },
-        rowIconRight: {
-            marginLeft: 'auto',
-            color: theme.colors.fillColorNeutral030,
-        },
-        routeDebug: {
-            alignContent: 'center',
-            padding: 16,
-            paddingBottom: bottom,
-            borderTopWidth: 1,
-            borderTopColor: theme.colors.fillColorNeutral050Base,
-        },
     });
 };
 //# sourceMappingURL=conversation_select_recipients_screen.js.map