@planningcenter/chat-react-native 4.0.1-qa-staging.2 → 4.0.1-rc.1

package/build/screens/conversation_screen.js

@@ -1,20 +1,24 @@
 import { c as _c } from "react/compiler-runtime";
+import { date as formatDate } from '@planningcenter/datetime-fmt';
 import { HeaderTitle, PlatformPressable } from '@react-navigation/elements';
 import { CommonActions, useNavigation, useTheme as useNavigationTheme, useRoute } from '@react-navigation/native';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Platform, StyleSheet, useWindowDimensions, View } from 'react-native';
+import { FlatList, Platform, StyleSheet, useWindowDimensions, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Badge, Icon } from '../components';
+import { Badge, Icon, Text } from '../components';
 import { ConversationStartBanner } from '../components/conversation/conversation_start_banner';
 import { JumpToBottomButton } from '../components/conversation/jump_to_bottom_button';
+import { Message } from '../components/conversation/message';
 import { MessageForm } from '../components/conversation/message_form';
-import { MessageList } from '../components/conversation/message_list';
 import { ConversationDisabledBanner, LeaderMessagesDisabledBanner, MemberMessagesDisabledBanner } from '../components/conversation/messages_disabled_banners';
+import { ReplyShadowMessage } from '../components/conversation/reply_shadow_message';
+import { SystemMessage } from '../components/conversation/system_message';
 import { TypingIndicator } from '../components/conversation/typing_indicator';
 import { KeyboardView } from '../components/display/keyboard_view';
 import { useHeaderSlotReserve } from '../components/display/platform_modal_header_buttons';
 import BlankState from '../components/primitive/blank_state_primitive';
 import { ConversationContextProvider } from '../contexts/conversation_context';
+import { useTheme } from '../hooks';
 import { useMessageAvailableMembersAction } from '../hooks/direct_messages/use_message_available_members_action';
 import { useConversation } from '../hooks/use_conversation';
 import { useConversationJoltEvents } from '../hooks/use_conversation_jolt_events';
@@ -24,6 +28,10 @@ import { useMarkLatestMessageRead } from '../hooks/use_mark_latest_message_read'
 import { analyticsEvents, normalizeAnalyticsMetadata, usePublishProductAnalyticsEvent } from '../hooks/use_product_analytics';
 import { useRestAwayFromDismissEdge } from '../hooks/use_rest_away_from_dismiss_edge';
 import { useVideoModerationJoltEvents } from '../hooks/use_video_moderation_jolt_events';
+import { getRelativeDateStatus } from '../utils/date';
+import { groupMessages } from '../utils/group_messages';
+import { CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL } from '../utils/styles';
+import { isSystemMessage } from '../utils/system_messages';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function ConversationScreen(t0) {
   const $ = _c(13);
@@ -96,7 +104,7 @@ export function ConversationScreen(t0) {
   return t6;
 }
 function ConversationScreenContent(t0) {
-  const $ = _c(80);
+  const $ = _c(86);
   const {
     route
   } = t0;
@@ -167,7 +175,21 @@ function ConversationScreenContent(t0) {
     t4 = $[9];
   }
   useMarkLatestMessageRead(t4);
-  const noMessages = messages.length === 0;
+  const t5 = !!reply_root_id;
+  let t6;
+  if ($[10] !== messages || $[11] !== t5) {
+    t6 = groupMessages({
+      ms: messages,
+      inReplyScreen: t5
+    });
+    $[10] = messages;
+    $[11] = t5;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  const messagesWithSeparators = t6;
+  const noMessages = messagesWithSeparators.length === 0;
   const {
     repliesDisabled,
     memberAbility,
@@ -176,57 +198,58 @@ function ConversationScreenContent(t0) {
   } = conversation;
   const canReply = memberAbility?.canReply;
   const showLeaderDisabledReplyBanner = canReply && repliesDisabled;
-  let t5;
-  if ($[10] !== editing_message_id || $[11] !== messages) {
-    let t6;
-    if ($[13] !== editing_message_id) {
-      t6 = m => String(m.id) === String(editing_message_id);
-      $[13] = editing_message_id;
-      $[14] = t6;
+  const canDeleteNonAuthoredMessages = memberAbility?.canDeleteNonAuthoredMessages ?? false;
+  let t7;
+  if ($[13] !== editing_message_id || $[14] !== messages) {
+    let t8;
+    if ($[16] !== editing_message_id) {
+      t8 = m => String(m.id) === String(editing_message_id);
+      $[16] = editing_message_id;
+      $[17] = t8;
     } else {
-      t6 = $[14];
+      t8 = $[17];
     }
-    t5 = messages.find(t6);
-    $[10] = editing_message_id;
-    $[11] = messages;
-    $[12] = t5;
+    t7 = messages.find(t8);
+    $[13] = editing_message_id;
+    $[14] = messages;
+    $[15] = t7;
   } else {
-    t5 = $[12];
+    t7 = $[15];
   }
-  const currentlyEditingMessage = t5;
-  let t6;
-  if ($[15] !== reply_root_author_name) {
-    t6 = reply_root_author_name?.split(" ")[0];
-    $[15] = reply_root_author_name;
-    $[16] = t6;
+  const currentlyEditingMessage = t7;
+  let t8;
+  if ($[18] !== reply_root_author_name) {
+    t8 = reply_root_author_name?.split(" ")[0];
+    $[18] = reply_root_author_name;
+    $[19] = t8;
   } else {
-    t6 = $[16];
+    t8 = $[19];
   }
-  const replyRootAuthorFirstName = t6;
+  const replyRootAuthorFirstName = t8;
   const replyHeaderTitle = replyRootAuthorFirstName ? `Reply to ${replyRootAuthorFirstName}` : "Reply";
   const muted = conversation.conversationMembership?.muted ?? conversation.muted;
   const listRef = useRef(null);
   const [showJumpToBottomButton, setShowJumpToBottomButton] = useState(false);
-  let t7;
-  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-    t7 = event => {
+  let t9;
+  if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = event => {
       const offsetY = event.nativeEvent.contentOffset.y;
       setShowJumpToBottomButton(offsetY > 200);
     };
-    $[17] = t7;
+    $[20] = t9;
   } else {
-    t7 = $[17];
+    t9 = $[20];
   }
-  const trackScroll = t7;
-  let t8;
-  if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
-    t8 = {
+  const trackScroll = t9;
+  let t10;
+  if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = {
       listRef,
       enabled: Platform.OS === "ios"
     };
-    $[18] = t8;
+    $[21] = t10;
   } else {
-    t8 = $[18];
+    t10 = $[21];
   }
   const {
     restOffset,
@@ -234,23 +257,23 @@ function ConversationScreenContent(t0) {
     onContentSizeChange,
     onMomentumScrollEnd,
     onScrollEndDrag
-  } = useRestAwayFromDismissEdge(t8);
-  let t9;
-  if ($[19] !== restOffset) {
-    t9 = () => {
+  } = useRestAwayFromDismissEdge(t10);
+  let t11;
+  if ($[22] !== restOffset) {
+    t11 = () => {
       listRef.current?.scrollToOffset({
         offset: restOffset
       });
     };
-    $[19] = restOffset;
-    $[20] = t9;
+    $[22] = restOffset;
+    $[23] = t11;
   } else {
-    t9 = $[20];
+    t11 = $[23];
   }
-  const handleReturnToBottom = t9;
-  let t10;
-  if ($[21] !== badges?.[0] || $[22] !== conversation.deleted || $[23] !== muted || $[24] !== navigation || $[25] !== replyHeaderTitle || $[26] !== reply_root_id || $[27] !== title) {
-    t10 = () => {
+  const handleReturnToBottom = t11;
+  let t12;
+  if ($[24] !== badges?.[0] || $[25] !== conversation.deleted || $[26] !== muted || $[27] !== navigation || $[28] !== replyHeaderTitle || $[29] !== reply_root_id || $[30] !== title) {
+    t12 = () => {
       if (reply_root_id) {
         navigation.setParams({
           title: replyHeaderTitle
@@ -264,152 +287,192 @@ function ConversationScreenContent(t0) {
         });
       }
     };
-    $[21] = badges?.[0];
-    $[22] = conversation.deleted;
-    $[23] = muted;
-    $[24] = navigation;
-    $[25] = replyHeaderTitle;
-    $[26] = reply_root_id;
-    $[27] = title;
-    $[28] = t10;
-  } else {
-    t10 = $[28];
-  }
-  const t11 = conversation?.deleted;
-  let t12;
-  if ($[29] !== badges || $[30] !== muted || $[31] !== navigation || $[32] !== replyHeaderTitle || $[33] !== reply_root_id || $[34] !== t11 || $[35] !== title) {
-    t12 = [navigation, title, badges, t11, reply_root_id, replyHeaderTitle, muted];
-    $[29] = badges;
-    $[30] = muted;
-    $[31] = navigation;
-    $[32] = replyHeaderTitle;
-    $[33] = reply_root_id;
-    $[34] = t11;
-    $[35] = title;
-    $[36] = t12;
-  } else {
-    t12 = $[36];
-  }
-  useEffect(t10, t12);
+    $[24] = badges?.[0];
+    $[25] = conversation.deleted;
+    $[26] = muted;
+    $[27] = navigation;
+    $[28] = replyHeaderTitle;
+    $[29] = reply_root_id;
+    $[30] = title;
+    $[31] = t12;
+  } else {
+    t12 = $[31];
+  }
+  const t13 = conversation?.deleted;
+  let t14;
+  if ($[32] !== badges || $[33] !== muted || $[34] !== navigation || $[35] !== replyHeaderTitle || $[36] !== reply_root_id || $[37] !== t13 || $[38] !== title) {
+    t14 = [navigation, title, badges, t13, reply_root_id, replyHeaderTitle, muted];
+    $[32] = badges;
+    $[33] = muted;
+    $[34] = navigation;
+    $[35] = replyHeaderTitle;
+    $[36] = reply_root_id;
+    $[37] = t13;
+    $[38] = title;
+    $[39] = t14;
+  } else {
+    t14 = $[39];
+  }
+  useEffect(t12, t14);
   if (!conversation || conversation.deleted) {
-    let t13;
-    if ($[37] === Symbol.for("react.memo_cache_sentinel")) {
-      t13 = /*#__PURE__*/_jsx(BlankState.Imagery, {
+    let t15;
+    if ($[40] === Symbol.for("react.memo_cache_sentinel")) {
+      t15 = /*#__PURE__*/_jsx(BlankState.Imagery, {
         name: "general.outlinedTextMessage"
       });
-      $[37] = t13;
+      $[40] = t15;
     } else {
-      t13 = $[37];
+      t15 = $[40];
     }
-    let t14;
-    if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
-      t14 = /*#__PURE__*/_jsx(BlankState.Content, {
+    let t16;
+    if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
+      t16 = /*#__PURE__*/_jsx(BlankState.Content, {
         children: /*#__PURE__*/_jsx(BlankState.Heading, {
           children: "This conversation has been deleted"
         })
       });
-      $[38] = t14;
+      $[41] = t16;
     } else {
-      t14 = $[38];
+      t16 = $[41];
     }
-    let t15;
-    if ($[39] !== navigation.goBack) {
-      t15 = /*#__PURE__*/_jsxs(BlankState.Root, {
-        children: [t13, t14, /*#__PURE__*/_jsx(BlankState.Button, {
+    let t17;
+    if ($[42] !== navigation.goBack) {
+      t17 = /*#__PURE__*/_jsxs(BlankState.Root, {
+        children: [t15, t16, /*#__PURE__*/_jsx(BlankState.Button, {
           onPress: navigation.goBack,
           title: "Back to conversations",
           accessibilityHint: "Navigates back to the conversations list",
           accessibilityRole: "link"
         })]
       });
-      $[39] = navigation.goBack;
-      $[40] = t15;
+      $[42] = navigation.goBack;
+      $[43] = t17;
     } else {
-      t15 = $[40];
+      t17 = $[43];
     }
-    let t16;
-    if ($[41] !== styles.container || $[42] !== t15) {
-      t16 = /*#__PURE__*/_jsx(View, {
+    let t18;
+    if ($[44] !== styles.container || $[45] !== t17) {
+      t18 = /*#__PURE__*/_jsx(View, {
         style: styles.container,
-        children: t15
+        children: t17
       });
-      $[41] = styles.container;
-      $[42] = t15;
-      $[43] = t16;
+      $[44] = styles.container;
+      $[45] = t17;
+      $[46] = t18;
     } else {
-      t16 = $[43];
+      t18 = $[46];
     }
-    return t16;
+    return t18;
   }
-  let t13;
-  if ($[44] !== conversation || $[45] !== conversation_id || $[46] !== fetchNextPage || $[47] !== hasNextPage || $[48] !== messages || $[49] !== noMessages || $[50] !== onContentSizeChange || $[51] !== onLayout || $[52] !== onMomentumScrollEnd || $[53] !== onScrollEndDrag || $[54] !== reply_root_id || $[55] !== styles.emptyState) {
-    t13 = noMessages ? /*#__PURE__*/_jsx(View, {
+  let t15;
+  if ($[47] !== canDeleteNonAuthoredMessages || $[48] !== conversation || $[49] !== conversation_id || $[50] !== fetchNextPage || $[51] !== hasNextPage || $[52] !== messagesWithSeparators || $[53] !== noMessages || $[54] !== onContentSizeChange || $[55] !== onLayout || $[56] !== onMomentumScrollEnd || $[57] !== onScrollEndDrag || $[58] !== reply_root_id || $[59] !== styles.emptyState || $[60] !== styles.listContainer || $[61] !== styles.listHeader) {
+    t15 = noMessages ? /*#__PURE__*/_jsx(View, {
       style: styles.emptyState,
       children: /*#__PURE__*/_jsx(ConversationStartBanner, {
         conversation: conversation,
         hasMessages: false
       })
-    }) : /*#__PURE__*/_jsx(MessageList, {
-      listRef: listRef,
-      conversation: conversation,
-      conversationId: conversation_id,
-      messages: messages,
-      replyRootId: reply_root_id,
-      hasNextPage: hasNextPage,
-      onEndReached: () => fetchNextPage(),
+    }) : /*#__PURE__*/_jsx(FlatList, {
+      inverted: true,
+      ref: listRef,
+      contentContainerStyle: styles.listContainer,
+      data: messagesWithSeparators,
+      keyExtractor: _temp,
       onScroll: trackScroll,
       onLayout: onLayout,
       onContentSizeChange: onContentSizeChange,
       onScrollEndDrag: onScrollEndDrag,
-      onMomentumScrollEnd: onMomentumScrollEnd
+      onMomentumScrollEnd: onMomentumScrollEnd,
+      scrollEventThrottle: 10,
+      ListFooterComponent: hasNextPage ? null : /*#__PURE__*/_jsx(ConversationStartBanner, {
+        conversation: conversation,
+        hasMessages: true
+      }),
+      renderItem: t16 => {
+        const {
+          item: item_0
+        } = t16;
+        if (item_0.type === "DateSeparator") {
+          return /*#__PURE__*/_jsx(InlineDateSeparator, {
+            ...item_0
+          });
+        }
+        if (item_0.type === "ReplyShadowMessage") {
+          return /*#__PURE__*/_jsx(ReplyShadowMessage, {
+            ...item_0,
+            conversation_id: conversation_id,
+            inReplyScreen: !!reply_root_id
+          });
+        }
+        if (isSystemMessage(item_0)) {
+          return /*#__PURE__*/_jsx(SystemMessage, {
+            message: item_0,
+            conversationId: conversation_id
+          });
+        }
+        return /*#__PURE__*/_jsx(Message, {
+          ...item_0,
+          canDeleteNonAuthoredMessages: canDeleteNonAuthoredMessages,
+          conversation_id: conversation_id,
+          latestReadMessageSortKey: conversation?.latestReadMessageSortKey,
+          inReplyScreen: !!reply_root_id
+        });
+      },
+      onEndReached: () => fetchNextPage(),
+      ListHeaderComponent: /*#__PURE__*/_jsx(View, {
+        style: styles.listHeader
+      })
     });
-    $[44] = conversation;
-    $[45] = conversation_id;
-    $[46] = fetchNextPage;
-    $[47] = hasNextPage;
-    $[48] = messages;
-    $[49] = noMessages;
-    $[50] = onContentSizeChange;
-    $[51] = onLayout;
-    $[52] = onMomentumScrollEnd;
-    $[53] = onScrollEndDrag;
-    $[54] = reply_root_id;
-    $[55] = styles.emptyState;
-    $[56] = t13;
-  } else {
-    t13 = $[56];
+    $[47] = canDeleteNonAuthoredMessages;
+    $[48] = conversation;
+    $[49] = conversation_id;
+    $[50] = fetchNextPage;
+    $[51] = hasNextPage;
+    $[52] = messagesWithSeparators;
+    $[53] = noMessages;
+    $[54] = onContentSizeChange;
+    $[55] = onLayout;
+    $[56] = onMomentumScrollEnd;
+    $[57] = onScrollEndDrag;
+    $[58] = reply_root_id;
+    $[59] = styles.emptyState;
+    $[60] = styles.listContainer;
+    $[61] = styles.listHeader;
+    $[62] = t15;
+  } else {
+    t15 = $[62];
   }
-  let t14;
-  if ($[57] !== handleReturnToBottom || $[58] !== showJumpToBottomButton) {
-    t14 = /*#__PURE__*/_jsx(JumpToBottomButton, {
+  let t16;
+  if ($[63] !== handleReturnToBottom || $[64] !== showJumpToBottomButton) {
+    t16 = /*#__PURE__*/_jsx(JumpToBottomButton, {
       onPress: handleReturnToBottom,
       visible: showJumpToBottomButton
     });
-    $[57] = handleReturnToBottom;
-    $[58] = showJumpToBottomButton;
-    $[59] = t14;
+    $[63] = handleReturnToBottom;
+    $[64] = showJumpToBottomButton;
+    $[65] = t16;
   } else {
-    t14 = $[59];
+    t16 = $[65];
   }
-  let t15;
-  if ($[60] !== noMessages) {
-    t15 = !noMessages && /*#__PURE__*/_jsx(TypingIndicator, {});
-    $[60] = noMessages;
-    $[61] = t15;
+  let t17;
+  if ($[66] !== noMessages) {
+    t17 = !noMessages && /*#__PURE__*/_jsx(TypingIndicator, {});
+    $[66] = noMessages;
+    $[67] = t17;
   } else {
-    t15 = $[61];
+    t17 = $[67];
   }
-  let t16;
-  if ($[62] !== showLeaderDisabledReplyBanner) {
-    t16 = showLeaderDisabledReplyBanner && /*#__PURE__*/_jsx(LeaderMessagesDisabledBanner, {});
-    $[62] = showLeaderDisabledReplyBanner;
-    $[63] = t16;
+  let t18;
+  if ($[68] !== showLeaderDisabledReplyBanner) {
+    t18 = showLeaderDisabledReplyBanner && /*#__PURE__*/_jsx(LeaderMessagesDisabledBanner, {});
+    $[68] = showLeaderDisabledReplyBanner;
+    $[69] = t18;
   } else {
-    t16 = $[63];
+    t18 = $[69];
   }
-  let t17;
-  if ($[64] !== canReply || $[65] !== conversation || $[66] !== currentlyEditingMessage || $[67] !== markHandledByMessageForm || $[68] !== replyRootAuthorFirstName || $[69] !== reply_root_id) {
-    t17 = /*#__PURE__*/_jsx(ConversationBottomBar, {
+  let t19;
+  if ($[70] !== canReply || $[71] !== conversation || $[72] !== currentlyEditingMessage || $[73] !== markHandledByMessageForm || $[74] !== replyRootAuthorFirstName || $[75] !== reply_root_id) {
+    t19 = /*#__PURE__*/_jsx(ConversationBottomBar, {
       conversation: conversation,
       canReply: canReply,
       replyRootAuthorFirstName: replyRootAuthorFirstName,
@@ -417,43 +480,46 @@ function ConversationScreenContent(t0) {
       currentlyEditingMessage: currentlyEditingMessage,
       onFlaggedInMessageForm: markHandledByMessageForm
     });
-    $[64] = canReply;
-    $[65] = conversation;
-    $[66] = currentlyEditingMessage;
-    $[67] = markHandledByMessageForm;
-    $[68] = replyRootAuthorFirstName;
-    $[69] = reply_root_id;
-    $[70] = t17;
-  } else {
-    t17 = $[70];
-  }
-  let t18;
-  if ($[71] !== t13 || $[72] !== t14 || $[73] !== t15 || $[74] !== t16 || $[75] !== t17) {
-    t18 = /*#__PURE__*/_jsxs(KeyboardView, {
-      children: [t13, t14, t15, t16, t17]
+    $[70] = canReply;
+    $[71] = conversation;
+    $[72] = currentlyEditingMessage;
+    $[73] = markHandledByMessageForm;
+    $[74] = replyRootAuthorFirstName;
+    $[75] = reply_root_id;
+    $[76] = t19;
+  } else {
+    t19 = $[76];
+  }
+  let t20;
+  if ($[77] !== t15 || $[78] !== t16 || $[79] !== t17 || $[80] !== t18 || $[81] !== t19) {
+    t20 = /*#__PURE__*/_jsxs(KeyboardView, {
+      children: [t15, t16, t17, t18, t19]
     });
-    $[71] = t13;
-    $[72] = t14;
-    $[73] = t15;
-    $[74] = t16;
-    $[75] = t17;
-    $[76] = t18;
-  } else {
-    t18 = $[76];
-  }
-  let t19;
-  if ($[77] !== styles.container || $[78] !== t18) {
-    t19 = /*#__PURE__*/_jsx(View, {
+    $[77] = t15;
+    $[78] = t16;
+    $[79] = t17;
+    $[80] = t18;
+    $[81] = t19;
+    $[82] = t20;
+  } else {
+    t20 = $[82];
+  }
+  let t21;
+  if ($[83] !== styles.container || $[84] !== t20) {
+    t21 = /*#__PURE__*/_jsx(View, {
       style: styles.container,
-      children: t18
+      children: t20
     });
-    $[77] = styles.container;
-    $[78] = t18;
-    $[79] = t19;
+    $[83] = styles.container;
+    $[84] = t20;
+    $[85] = t21;
   } else {
-    t19 = $[79];
+    t21 = $[85];
   }
-  return t19;
+  return t21;
+}
+function _temp(item) {
+  return item.id;
 }
 function ConversationBottomBar(t0) {
   const $ = _c(15);
@@ -534,6 +600,115 @@ function ConversationBottomBar(t0) {
   }
   return t6;
 }
+function InlineDateSeparator(t0) {
+  const $ = _c(17);
+  const {
+    date
+  } = t0;
+  const styles = useDateSeparatorStyles();
+  let t1;
+  if ($[0] !== date) {
+    t1 = getRelativeDateStatus(date);
+    $[0] = date;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const {
+    isThisYear
+  } = t1;
+  const showYear = !isThisYear;
+  let t2;
+  if ($[2] !== date || $[3] !== showYear) {
+    t2 = formatDate(date, {
+      style: "long",
+      year: showYear
+    });
+    $[2] = date;
+    $[3] = showYear;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const dateStamp = t2;
+  let t3;
+  if ($[5] !== styles.separator) {
+    t3 = /*#__PURE__*/_jsx(View, {
+      style: styles.separator
+    });
+    $[5] = styles.separator;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== dateStamp || $[8] !== styles.dateText) {
+    t4 = /*#__PURE__*/_jsx(Text, {
+      variant: "footnote",
+      style: styles.dateText,
+      children: dateStamp
+    });
+    $[7] = dateStamp;
+    $[8] = styles.dateText;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  let t5;
+  if ($[10] !== styles.separator) {
+    t5 = /*#__PURE__*/_jsx(View, {
+      style: styles.separator
+    });
+    $[10] = styles.separator;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  let t6;
+  if ($[12] !== styles.container || $[13] !== t3 || $[14] !== t4 || $[15] !== t5) {
+    t6 = /*#__PURE__*/_jsxs(View, {
+      style: styles.container,
+      children: [t3, t4, t5]
+    });
+    $[12] = styles.container;
+    $[13] = t3;
+    $[14] = t4;
+    $[15] = t5;
+    $[16] = t6;
+  } else {
+    t6 = $[16];
+  }
+  return t6;
+}
+const useDateSeparatorStyles = () => {
+  const $ = _c(2);
+  const theme = useTheme();
+  let t0;
+  if ($[0] !== theme.colors.borderColorDefaultBase) {
+    t0 = StyleSheet.create({
+      container: {
+        alignItems: "center",
+        flexDirection: "row",
+        paddingHorizontal: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
+        paddingVertical: 16
+      },
+      separator: {
+        flex: 1,
+        height: 1,
+        borderTopWidth: 1,
+        borderTopColor: theme.colors.borderColorDefaultBase
+      },
+      dateText: {
+        paddingHorizontal: 8
+      }
+    });
+    $[0] = theme.colors.borderColorDefaultBase;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+};
 export const ConversationScreenTitle = t0 => {
   const $ = _c(29);
   const {
@@ -728,6 +903,12 @@ const useStyles = () => {
       emptyState: {
         flex: 1,
         justifyContent: "center"
+      },
+      listContainer: {
+        paddingVertical: 12
+      },
+      listHeader: {
+        height: 16
       }
     });
     $[0] = bottom;
@@ -753,7 +934,7 @@ const useEnsureConversationsRouteExists = () => {
     t0 = () => {
       const navigationState = navigation.getState();
       const routes = navigationState?.routes || [];
-      const conversationsRoute = routes.find(_temp);
+      const conversationsRoute = routes.find(_temp2);
       if (conversationsRoute) {
         return;
       }
@@ -786,7 +967,7 @@ const useEnsureConversationsRouteExists = () => {
   }
   useEffect(t0, t2);
 };
-function _temp(r) {
+function _temp2(r) {
   return r.name === "Conversations";
 }
 //# sourceMappingURL=conversation_screen.js.map