npm - @planningcenter/chat-react-native - Versions diffs - 3.17.3-rc.0 → 3.18.0-rc.0 - Mend

@planningcenter/chat-react-native 3.17.3-rc.0 → 3.18.0-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/build/components/conversation/message.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/message.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAA;AASxC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAoB7C;;GAEG;AACH,UAAU,YAAa,SAAQ,eAAe;IAC5C,4BAA4B,EAAE,OAAO,CAAA;IACrC,eAAe,EAAE,MAAM,CAAA;IACvB,wBAAwB,CAAC,EAAE,MAAM,CAAA;IACjC,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,wBAAgB,OAAO,CAAC,EACtB,4BAA4B,EAC5B,eAAe,EACf,wBAAwB,EACxB,aAAa,EACb,GAAG,OAAO,EACX,EAAE,YAAY,~~qBA8Od~~"}
1	+ {"version":3,"file":"message.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/message.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAA;AASxC,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAoB7C;;GAEG;AACH,UAAU,YAAa,SAAQ,eAAe;IAC5C,4BAA4B,EAAE,OAAO,CAAA;IACrC,eAAe,EAAE,MAAM,CAAA;IACvB,wBAAwB,CAAC,EAAE,MAAM,CAAA;IACjC,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,wBAAgB,OAAO,CAAC,EACtB,4BAA4B,EAC5B,eAAe,EACf,wBAAwB,EACxB,aAAa,EACb,GAAG,OAAO,EACX,EAAE,YAAY,qBAoPd"}

package/build/components/conversation/message.js CHANGED Viewed

@@ -35,9 +35,25 @@ export function Message({ canDeleteNonAuthoredMessages, conversation_id, latestR
         messageId: message.replyRootId || '',
         enabled: !!message.replyRootId,
     });
+    const metaProps = {
+        authorName: message.author.name,
+        createdAt: message.createdAt,
+    };
+    const renderAuthor = (!message.mine && message.renderAuthor) || false;
+    const showReplyCountButton = !inReplyScreen && message.replyRootId === message.id && REPLIES_FEATURE_ENABLED;
+    const isReplyRootMessage = message.replyRootId === message.id;
+    const isDeletedReplyRootMessage = isReplyRootMessage && !!message.deletedAt;
+    const messageText = isDeletedReplyRootMessage ? 'Message deleted' : text;
+    const replyCountText = pluralize(message.replyCount, 'reply');
+    const messagePendingLabel = isPersisted ? 'Saving' : 'Sending';
     const replyRootAuthorName = message.replyRootId
         ? replyRootMessage?.author.name
         : message.author.name;
+    const messageBottomMargin = message.lastInGroup || message.nextIsReplyShadowMessage
+        ? 16
+        : hasReactions || showMessageMeta || showReplyCountButton
+            ? 8
+            : 4;
     useEffect(() => {
         if (pending) {
             const timer = setTimeout(() => {
@@ -97,23 +113,10 @@ export function Message({ canDeleteNonAuthoredMessages, conversation_id, latestR
             reply_root_author_name: message.author.name,
         });
     };
-    const metaProps = {
-        authorName: message.author.name,
-        createdAt: message.createdAt,
-    };
-    const renderAuthor = (!message.mine && message.renderAuthor) || false;
-    const messagePendingLabel = isPersisted ? 'Saving' : 'Sending';
-    const showReplyCountButton = !inReplyScreen && message.replyRootId === message.id && REPLIES_FEATURE_ENABLED;
-    const replyCountText = pluralize(message.replyCount, 'reply');
-    const messageBottomMargin = message.lastInGroup || message.nextIsReplyShadowMessage
-        ? 16
-        : hasReactions || showMessageMeta || showReplyCountButton
-            ? 8
-            : 4;
     return (<Pressable onLongPress={handleMessageLongPress} onPress={() => setShowMessageMetaToggle(!showMessageMetaToggle)} onPressIn={handleMessagePressIn} onPressOut={handleMessagePressOut} android_ripple={{ color: colors.androidRippleNeutral, borderless: false, foreground: true }} accessibilityHint="Long press to view message actions like reacting and copying.">
       <Animated.View style={[styles.message, animatedBackgroundColor]}>
         {!message.mine && (<View>
-            {renderAuthor ? (<Avatar size={'md'} sourceUri={message.author.avatar} style={styles.avatar} maxFontSizeMultiplier={1} minFontSizeMultiplier={1}/>) : (<View style={styles.avatarPlaceholder}/>)}
+            {renderAuthor ? (<Avatar size={'md'} sourceUri={message.author.avatar} style={styles.avatar} maxFontSizeMultiplier={1} minFontSizeMultiplier={1} fallbackIconName={isDeletedReplyRootMessage ? 'publishing.trash' : 'general.person'} showFallback={isDeletedReplyRootMessage}/>) : (<View style={styles.avatarPlaceholder}/>)}
             <TheirReplyConnector message={message} messageBubbleHeight={messageBubbleHeight}/>
           </View>)}
         <View style={[styles.messageContent, { marginBottom: messageBottomMargin }]}>
@@ -124,8 +127,8 @@ export function Message({ canDeleteNonAuthoredMessages, conversation_id, latestR
             <ErrorBoundary>
               <MessageAttachments attachments={message.attachments} metaProps={metaProps} onMessageAttachmentLongPress={handleMessageAttachmentLongPress} onMessageLongPress={handleMessageLongPress}/>
             </ErrorBoundary>
-            {text && (<View style={styles.messageText}>
-                <MessageMarkdown text={text}/>
+            {messageText && (<View style={styles.messageText}>
+                <MessageMarkdown text={messageText}/>
               </View>)}
           </View>
           {showReplyCountButton && (<TextButton variant="footnote" onPress={handleNavigateToReplyPress} style={styles.messageReplyCount} accessibilityHint="Navigates to reply screen for this message" accessibilityRole="link">

package/build/components/conversation/message.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"message.js","sourceRoot":"","sources":["../../../src/components/conversation/message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useNavigation } from '@react-navigation/native'\nimport React, { useEffect } from 'react'\nimport { Pressable, StyleSheet, useWindowDimensions, View } from 'react-native'\nimport { MessageReaction } from '../../components/conversation/message_reaction'\nimport { Avatar, Icon, Spinner, Text, TextButton, TextInlineButton } from '../../components/display'\nimport {\n useAnimatedMessageBackgroundColor,\n useInteractionGhostBackgroundColor,\n useTheme,\n} from '../../hooks'\nimport { MessageResource } from '../../types'\nimport { ReactionCountResource } from '../../types/resources/reaction'\nimport { MessageAttachments } from './message_attachments'\nimport ErrorBoundary from '../page/error_boundary'\nimport { MessageMarkdown } from './message_markdown'\nimport { DenormalizedMessageAttachmentResource } from '../../types/resources/denormalized_attachment_resource'\nimport {\n CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,\n MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,\n platformFontWeightMedium,\n} from '../../utils/styles'\nimport Animated from 'react-native-reanimated'\nimport { useLiveRelativeTime } from '../../hooks/use_live_relative_time'\nimport { MessageReadReceipts } from './message_read_receipts'\nimport { isNewMessage, useMessageCreateOrUpdate } from '../../hooks/use_message_create_or_update'\nimport { Haptic } from '../../utils/native_adapters'\nimport { TheirReplyConnector, MyReplyConnector, AVATAR_CONNECTOR_SPACING } from './reply_connectors'\nimport { pluralize, REPLIES_FEATURE_ENABLED } from '../../utils'\nimport { useConversationMessage } from '../../hooks/use_conversation_message'\n\n/** Message\n * Component for display of a message within a conversation list\n */\ninterface MessageProps extends MessageResource {\n canDeleteNonAuthoredMessages: boolean\n conversation_id: number\n latestReadMessageSortKey?: string\n inReplyScreen?: boolean\n}\n\nexport function Message({\n canDeleteNonAuthoredMessages,\n conversation_id,\n latestReadMessageSortKey,\n inReplyScreen,\n ...message\n}: MessageProps) {\n const { text, reactionCounts, pending, error } = message\n const styles = useMessageStyles(message)\n const navigation = useNavigation()\n const { colors } = useTheme()\n const hasReactions = reactionCounts.length > 0\n const [showMessageMetaToggle, setShowMessageMetaToggle] = React.useState(false)\n const showMessageMeta =\n showMessageMetaToggle \|\| message.myLatestInConversation \|\| !!pending \|\| !!error \|\| false\n const timestamp = useLiveRelativeTime(message.createdAt)\n const wasEdited = Boolean(message.textEditedAt)\n const isPersisted = !isNewMessage(message)\n const [temporarilyHidePendingState, setTemporarilyHidePendingState] = React.useState(true)\n const [messageBubbleHeight, setMessageBubbleHeight] = React.useState(0)\n const { animatedBackgroundColor, handleMessagePressIn, handleMessagePressOut } =\n useAnimatedMessageBackgroundColor()\n const { message: replyRootMessage } = useConversationMessage({\n conversation_id,\n messageId: message.replyRootId \|\| '',\n enabled: !!message.replyRootId,\n })\n\n const replyRootAuthorName = message.replyRootId\n ? replyRootMessage?.author.name\n : message.author.name\n\n useEffect(() => {\n if (pending) {\n const timer = setTimeout(() => {\n setTemporarilyHidePendingState(false)\n }, 2000)\n return () => clearTimeout(timer)\n }\n return () => {}\n }, [pending])\n\n const retryFailedSaveMutation = useMessageCreateOrUpdate({\n conversationId: conversation_id,\n message,\n })\n\n const handleRetry = () => {\n if (text && error) {\n retryFailedSaveMutation.mutateAsync({\n text,\n attachments: message.attachmentsForCreate,\n })\n }\n }\n\n const handleMessageLongPress = () => {\n if (!isPersisted) return\n\n Haptic.impactLight()\n navigation.navigate('MessageActions', {\n message_id: message.id,\n conversation_id,\n canDeleteNonAuthoredMessages,\n inReplyScreen,\n reply_root_author_name: replyRootAuthorName,\n })\n }\n const handleReactionLongPress = (reaction: ReactionCountResource) => {\n Haptic.impactLight()\n navigation.navigate('Reactions', {\n message_id: message.id,\n conversation_id,\n reaction_value: reaction.value,\n })\n }\n\n const handleMessageAttachmentLongPress = (attachment: DenormalizedMessageAttachmentResource) => {\n Haptic.impactLight()\n navigation.navigate('AttachmentActions', {\n attachmentId: attachment?.id,\n attachmentContentType: attachment?.attributes.contentType,\n attachmentUrl: attachment?.attributes.url,\n conversation_id,\n canDeleteNonAuthoredMessages,\n myMessage: message.mine,\n })\n }\n\n const handleNavigateToReplyPress = () => {\n navigation.navigate('ConversationReply', {\n conversation_id,\n reply_root_id: message.id,\n reply_root_author_name: message.author.name,\n })\n }\n\n const metaProps = {\n authorName: message.author.name,\n createdAt: message.createdAt,\n }\n\n const renderAuthor = (!message.mine && message.renderAuthor) \|\| false\n const messagePendingLabel = isPersisted ? 'Saving' : 'Sending'\n const showReplyCountButton =\n !inReplyScreen && message.replyRootId === message.id && REPLIES_FEATURE_ENABLED\n const replyCountText = pluralize(message.replyCount, 'reply')\n const messageBottomMargin =\n message.lastInGroup \|\| message.nextIsReplyShadowMessage\n ? 16\n : hasReactions \|\| showMessageMeta \|\| showReplyCountButton\n ? 8\n : 4\n\n return (\n <Pressable\n onLongPress={handleMessageLongPress}\n onPress={() => setShowMessageMetaToggle(!showMessageMetaToggle)}\n onPressIn={handleMessagePressIn}\n onPressOut={handleMessagePressOut}\n android_ripple={{ color: colors.androidRippleNeutral, borderless: false, foreground: true }}\n accessibilityHint=\"Long press to view message actions like reacting and copying.\"\n >\n <Animated.View style={[styles.message, animatedBackgroundColor]}>\n {!message.mine && (\n <View>\n {renderAuthor ? (\n <Avatar\n size={'md'}\n sourceUri={message.author.avatar}\n style={styles.avatar}\n maxFontSizeMultiplier={1}\n minFontSizeMultiplier={1}\n />\n ) : (\n <View style={styles.avatarPlaceholder} />\n )}\n <TheirReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />\n </View>\n )}\n <View style={[styles.messageContent, { marginBottom: messageBottomMargin }]}>\n {renderAuthor && (\n <Text variant=\"footnote\" style={styles.authorName}>\n {message.author.name}\n </Text>\n )}\n <View\n style={styles.messageBubble}\n onLayout={e => setMessageBubbleHeight(e.nativeEvent.layout.height)}\n >\n <ErrorBoundary>\n <MessageAttachments\n attachments={message.attachments}\n metaProps={metaProps}\n onMessageAttachmentLongPress={handleMessageAttachmentLongPress}\n onMessageLongPress={handleMessageLongPress}\n />\n </ErrorBoundary>\n {text && (\n <View style={styles.messageText}>\n <MessageMarkdown text={text} />\n </View>\n )}\n </View>\n {showReplyCountButton && (\n <TextButton\n variant=\"footnote\"\n onPress={handleNavigateToReplyPress}\n style={styles.messageReplyCount}\n accessibilityHint=\"Navigates to reply screen for this message\"\n accessibilityRole=\"link\"\n >\n {replyCountText}\n </TextButton>\n )}\n {hasReactions && (\n <View style={styles.messageReactions}>\n {reactionCounts.map(reaction => (\n <MessageReaction\n key={reaction.value}\n reaction={reaction}\n onLongPress={handleReactionLongPress}\n message={message}\n conversationId={conversation_id}\n />\n ))}\n </View>\n )}\n {showMessageMeta && (\n <View style={styles.messageMeta}>\n {message.mine && !pending && !error && (\n <MessageReadReceipts\n message={message}\n latestReadMessageSortKey={latestReadMessageSortKey}\n />\n )}\n {error ? (\n <View style={styles.errorContainer}>\n {retryFailedSaveMutation.isPending ? (\n <Spinner size={12} />\n ) : (\n <Icon name=\"general.exclamationTriangle\" size={12} style={styles.errorIcon} />\n )}\n <Text variant=\"footnote\" style={styles.errorText}>\n Failed to {isPersisted ? 'edit' : 'send'} \|{' '}\n <TextInlineButton\n onPress={handleRetry}\n variant=\"footnote\"\n appearance=\"danger\"\n disabled={retryFailedSaveMutation.isPending}\n >\n Try again\n </TextInlineButton>\n </Text>\n </View>\n ) : pending && (!temporarilyHidePendingState \|\| isPersisted) ? (\n <View style={styles.pendingIndicatorContainer}>\n <Icon\n name=\"general.outlinedClock\"\n size={12}\n color={colors.iconColorDefaultSecondary}\n />\n <Text variant=\"footnote\">{messagePendingLabel}</Text>\n </View>\n ) : isPersisted ? (\n <Text variant=\"footnote\">{timestamp}</Text>\n ) : null}\n {!pending && !error && wasEdited && (\n <Text variant=\"footnote\">\n \|{' '}\n <Text variant=\"footnote\" style={styles.editedText}>\n Edited\n </Text>\n </Text>\n )}\n </View>\n )}\n </View>\n {message.mine && (\n <MyReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />\n )}\n </Animated.View>\n </Pressable>\n )\n}\n\nconst useMessageStyles = ({ mine }: MessageResource) => {\n const { colors } = useTheme()\n const myMessageBackgroundColor = useInteractionGhostBackgroundColor()\n const { width } = useWindowDimensions()\n const tabletWidth = width >= 744 // Smallest iPad Mini's width\n\n const messageBubbleBackgroundColor = mine ? myMessageBackgroundColor : colors.fillColorNeutral070\n\n return StyleSheet.create({\n message: {\n gap: 8,\n flexDirection: mine ? 'row-reverse' : 'row',\n paddingHorizontal: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,\n },\n messageContent: {\n flex: 1,\n gap: 4,\n },\n avatar: {\n marginBottom: AVATAR_CONNECTOR_SPACING,\n },\n avatarPlaceholder: {\n width: MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH, // Same width as avatar\n },\n authorName: {\n fontWeight: platformFontWeightMedium,\n },\n messageBubble: {\n backgroundColor: messageBubbleBackgroundColor,\n borderRadius: 8,\n maxWidth: tabletWidth ? 360 : '80%',\n alignSelf: mine ? 'flex-end' : 'flex-start',\n },\n messageText: {\n paddingVertical: 6,\n paddingHorizontal: 8,\n },\n messageReactions: {\n flexDirection: 'row',\n gap: 4,\n justifyContent: mine ? 'flex-end' : 'flex-start',\n },\n messageReplyCount: {\n alignSelf: mine ? 'flex-end' : 'flex-start',\n },\n messageMeta: {\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: mine ? 'flex-end' : 'flex-start',\n gap: 4,\n },\n editedText: {\n fontWeight: platformFontWeightMedium,\n },\n pendingIndicatorContainer: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 4,\n },\n errorContainer: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 4,\n },\n errorIcon: {\n color: colors.statusErrorIcon,\n },\n errorText: {\n color: colors.statusErrorText,\n },\n })\n}\n"]}
1	+ {"version":3,"file":"message.js","sourceRoot":"","sources":["../../../src/components/conversation/message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useNavigation } from '@react-navigation/native'\nimport React, { useEffect } from 'react'\nimport { Pressable, StyleSheet, useWindowDimensions, View } from 'react-native'\nimport { MessageReaction } from '../../components/conversation/message_reaction'\nimport { Avatar, Icon, Spinner, Text, TextButton, TextInlineButton } from '../../components/display'\nimport {\n useAnimatedMessageBackgroundColor,\n useInteractionGhostBackgroundColor,\n useTheme,\n} from '../../hooks'\nimport { MessageResource } from '../../types'\nimport { ReactionCountResource } from '../../types/resources/reaction'\nimport { MessageAttachments } from './message_attachments'\nimport ErrorBoundary from '../page/error_boundary'\nimport { MessageMarkdown } from './message_markdown'\nimport { DenormalizedMessageAttachmentResource } from '../../types/resources/denormalized_attachment_resource'\nimport {\n CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,\n MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,\n platformFontWeightMedium,\n} from '../../utils/styles'\nimport Animated from 'react-native-reanimated'\nimport { useLiveRelativeTime } from '../../hooks/use_live_relative_time'\nimport { MessageReadReceipts } from './message_read_receipts'\nimport { isNewMessage, useMessageCreateOrUpdate } from '../../hooks/use_message_create_or_update'\nimport { Haptic } from '../../utils/native_adapters'\nimport { TheirReplyConnector, MyReplyConnector, AVATAR_CONNECTOR_SPACING } from './reply_connectors'\nimport { pluralize, REPLIES_FEATURE_ENABLED } from '../../utils'\nimport { useConversationMessage } from '../../hooks/use_conversation_message'\n\n/** Message\n * Component for display of a message within a conversation list\n */\ninterface MessageProps extends MessageResource {\n canDeleteNonAuthoredMessages: boolean\n conversation_id: number\n latestReadMessageSortKey?: string\n inReplyScreen?: boolean\n}\n\nexport function Message({\n canDeleteNonAuthoredMessages,\n conversation_id,\n latestReadMessageSortKey,\n inReplyScreen,\n ...message\n}: MessageProps) {\n const { text, reactionCounts, pending, error } = message\n const styles = useMessageStyles(message)\n const navigation = useNavigation()\n const { colors } = useTheme()\n const hasReactions = reactionCounts.length > 0\n const [showMessageMetaToggle, setShowMessageMetaToggle] = React.useState(false)\n const showMessageMeta =\n showMessageMetaToggle \|\| message.myLatestInConversation \|\| !!pending \|\| !!error \|\| false\n const timestamp = useLiveRelativeTime(message.createdAt)\n const wasEdited = Boolean(message.textEditedAt)\n const isPersisted = !isNewMessage(message)\n const [temporarilyHidePendingState, setTemporarilyHidePendingState] = React.useState(true)\n const [messageBubbleHeight, setMessageBubbleHeight] = React.useState(0)\n const { animatedBackgroundColor, handleMessagePressIn, handleMessagePressOut } =\n useAnimatedMessageBackgroundColor()\n const { message: replyRootMessage } = useConversationMessage({\n conversation_id,\n messageId: message.replyRootId \|\| '',\n enabled: !!message.replyRootId,\n })\n\n const metaProps = {\n authorName: message.author.name,\n createdAt: message.createdAt,\n }\n\n const renderAuthor = (!message.mine && message.renderAuthor) \|\| false\n const showReplyCountButton =\n !inReplyScreen && message.replyRootId === message.id && REPLIES_FEATURE_ENABLED\n const isReplyRootMessage = message.replyRootId === message.id\n const isDeletedReplyRootMessage = isReplyRootMessage && !!message.deletedAt\n\n const messageText = isDeletedReplyRootMessage ? 'Message deleted' : text\n const replyCountText = pluralize(message.replyCount, 'reply')\n const messagePendingLabel = isPersisted ? 'Saving' : 'Sending'\n const replyRootAuthorName = message.replyRootId\n ? replyRootMessage?.author.name\n : message.author.name\n\n const messageBottomMargin =\n message.lastInGroup \|\| message.nextIsReplyShadowMessage\n ? 16\n : hasReactions \|\| showMessageMeta \|\| showReplyCountButton\n ? 8\n : 4\n\n useEffect(() => {\n if (pending) {\n const timer = setTimeout(() => {\n setTemporarilyHidePendingState(false)\n }, 2000)\n return () => clearTimeout(timer)\n }\n return () => {}\n }, [pending])\n\n const retryFailedSaveMutation = useMessageCreateOrUpdate({\n conversationId: conversation_id,\n message,\n })\n\n const handleRetry = () => {\n if (text && error) {\n retryFailedSaveMutation.mutateAsync({\n text,\n attachments: message.attachmentsForCreate,\n })\n }\n }\n\n const handleMessageLongPress = () => {\n if (!isPersisted) return\n\n Haptic.impactLight()\n navigation.navigate('MessageActions', {\n message_id: message.id,\n conversation_id,\n canDeleteNonAuthoredMessages,\n inReplyScreen,\n reply_root_author_name: replyRootAuthorName,\n })\n }\n const handleReactionLongPress = (reaction: ReactionCountResource) => {\n Haptic.impactLight()\n navigation.navigate('Reactions', {\n message_id: message.id,\n conversation_id,\n reaction_value: reaction.value,\n })\n }\n\n const handleMessageAttachmentLongPress = (attachment: DenormalizedMessageAttachmentResource) => {\n Haptic.impactLight()\n navigation.navigate('AttachmentActions', {\n attachmentId: attachment?.id,\n attachmentContentType: attachment?.attributes.contentType,\n attachmentUrl: attachment?.attributes.url,\n conversation_id,\n canDeleteNonAuthoredMessages,\n myMessage: message.mine,\n })\n }\n\n const handleNavigateToReplyPress = () => {\n navigation.navigate('ConversationReply', {\n conversation_id,\n reply_root_id: message.id,\n reply_root_author_name: message.author.name,\n })\n }\n\n return (\n <Pressable\n onLongPress={handleMessageLongPress}\n onPress={() => setShowMessageMetaToggle(!showMessageMetaToggle)}\n onPressIn={handleMessagePressIn}\n onPressOut={handleMessagePressOut}\n android_ripple={{ color: colors.androidRippleNeutral, borderless: false, foreground: true }}\n accessibilityHint=\"Long press to view message actions like reacting and copying.\"\n >\n <Animated.View style={[styles.message, animatedBackgroundColor]}>\n {!message.mine && (\n <View>\n {renderAuthor ? (\n <Avatar\n size={'md'}\n sourceUri={message.author.avatar}\n style={styles.avatar}\n maxFontSizeMultiplier={1}\n minFontSizeMultiplier={1}\n fallbackIconName={isDeletedReplyRootMessage ? 'publishing.trash' : 'general.person'}\n showFallback={isDeletedReplyRootMessage}\n />\n ) : (\n <View style={styles.avatarPlaceholder} />\n )}\n <TheirReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />\n </View>\n )}\n <View style={[styles.messageContent, { marginBottom: messageBottomMargin }]}>\n {renderAuthor && (\n <Text variant=\"footnote\" style={styles.authorName}>\n {message.author.name}\n </Text>\n )}\n <View\n style={styles.messageBubble}\n onLayout={e => setMessageBubbleHeight(e.nativeEvent.layout.height)}\n >\n <ErrorBoundary>\n <MessageAttachments\n attachments={message.attachments}\n metaProps={metaProps}\n onMessageAttachmentLongPress={handleMessageAttachmentLongPress}\n onMessageLongPress={handleMessageLongPress}\n />\n </ErrorBoundary>\n {messageText && (\n <View style={styles.messageText}>\n <MessageMarkdown text={messageText} />\n </View>\n )}\n </View>\n {showReplyCountButton && (\n <TextButton\n variant=\"footnote\"\n onPress={handleNavigateToReplyPress}\n style={styles.messageReplyCount}\n accessibilityHint=\"Navigates to reply screen for this message\"\n accessibilityRole=\"link\"\n >\n {replyCountText}\n </TextButton>\n )}\n {hasReactions && (\n <View style={styles.messageReactions}>\n {reactionCounts.map(reaction => (\n <MessageReaction\n key={reaction.value}\n reaction={reaction}\n onLongPress={handleReactionLongPress}\n message={message}\n conversationId={conversation_id}\n />\n ))}\n </View>\n )}\n {showMessageMeta && (\n <View style={styles.messageMeta}>\n {message.mine && !pending && !error && (\n <MessageReadReceipts\n message={message}\n latestReadMessageSortKey={latestReadMessageSortKey}\n />\n )}\n {error ? (\n <View style={styles.errorContainer}>\n {retryFailedSaveMutation.isPending ? (\n <Spinner size={12} />\n ) : (\n <Icon name=\"general.exclamationTriangle\" size={12} style={styles.errorIcon} />\n )}\n <Text variant=\"footnote\" style={styles.errorText}>\n Failed to {isPersisted ? 'edit' : 'send'} \|{' '}\n <TextInlineButton\n onPress={handleRetry}\n variant=\"footnote\"\n appearance=\"danger\"\n disabled={retryFailedSaveMutation.isPending}\n >\n Try again\n </TextInlineButton>\n </Text>\n </View>\n ) : pending && (!temporarilyHidePendingState \|\| isPersisted) ? (\n <View style={styles.pendingIndicatorContainer}>\n <Icon\n name=\"general.outlinedClock\"\n size={12}\n color={colors.iconColorDefaultSecondary}\n />\n <Text variant=\"footnote\">{messagePendingLabel}</Text>\n </View>\n ) : isPersisted ? (\n <Text variant=\"footnote\">{timestamp}</Text>\n ) : null}\n {!pending && !error && wasEdited && (\n <Text variant=\"footnote\">\n \|{' '}\n <Text variant=\"footnote\" style={styles.editedText}>\n Edited\n </Text>\n </Text>\n )}\n </View>\n )}\n </View>\n {message.mine && (\n <MyReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />\n )}\n </Animated.View>\n </Pressable>\n )\n}\n\nconst useMessageStyles = ({ mine }: MessageResource) => {\n const { colors } = useTheme()\n const myMessageBackgroundColor = useInteractionGhostBackgroundColor()\n const { width } = useWindowDimensions()\n const tabletWidth = width >= 744 // Smallest iPad Mini's width\n\n const messageBubbleBackgroundColor = mine ? myMessageBackgroundColor : colors.fillColorNeutral070\n\n return StyleSheet.create({\n message: {\n gap: 8,\n flexDirection: mine ? 'row-reverse' : 'row',\n paddingHorizontal: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,\n },\n messageContent: {\n flex: 1,\n gap: 4,\n },\n avatar: {\n marginBottom: AVATAR_CONNECTOR_SPACING,\n },\n avatarPlaceholder: {\n width: MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH, // Same width as avatar\n },\n authorName: {\n fontWeight: platformFontWeightMedium,\n },\n messageBubble: {\n backgroundColor: messageBubbleBackgroundColor,\n borderRadius: 8,\n maxWidth: tabletWidth ? 360 : '80%',\n alignSelf: mine ? 'flex-end' : 'flex-start',\n },\n messageText: {\n paddingVertical: 6,\n paddingHorizontal: 8,\n },\n messageReactions: {\n flexDirection: 'row',\n gap: 4,\n justifyContent: mine ? 'flex-end' : 'flex-start',\n },\n messageReplyCount: {\n alignSelf: mine ? 'flex-end' : 'flex-start',\n },\n messageMeta: {\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: mine ? 'flex-end' : 'flex-start',\n gap: 4,\n },\n editedText: {\n fontWeight: platformFontWeightMedium,\n },\n pendingIndicatorContainer: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 4,\n },\n errorContainer: {\n flexDirection: 'row',\n alignItems: 'center',\n gap: 4,\n },\n errorIcon: {\n color: colors.statusErrorIcon,\n },\n errorText: {\n color: colors.statusErrorText,\n },\n })\n}\n"]}

package/build/components/conversation/reply_connectors.js CHANGED Viewed

@@ -76,32 +76,56 @@ function VerticalLineConnector({ style }) {
 }
 function LongHeadCurveConnector({ height, style }) {
     const styles = useStyles();
-    return <View style={[styles.longHeadCurveConnector, { height, marginTop: height }, style]}/>;
+    const { colors } = useTheme();
+    return (<View style={[styles.longHeadCurveConnector, { marginTop: height }, style]}>
+      <Svg width={MY_REPLY_CONNECTOR_WIDTH} height={18} fill="none">
+        <Path d="M 2 18 L 2 16 A 14 14 0 0 1 16 2 L 38 2" stroke={colors.borderColorDefaultBase} strokeWidth={CONNECTOR_BORDER_WIDTH}/>
+      </Svg>
+      <View style={styles.svgConnnectorVerticalLineTail}/>
+    </View>);
 }
 function LongTailCurveConnector({ height, style }) {
     const styles = useStyles();
-    return <View style={[styles.longTailCurveConnector, { height }, style]}/>;
+    const { colors } = useTheme();
+    return (<View style={[{ height }, style]}>
+      <View style={styles.svgConnnectorVerticalLineHead}/>
+      <Svg width={MY_REPLY_CONNECTOR_WIDTH} height={18} fill="none">
+        <Path d="M 2 0 L 2 2 A 14 14 0 0 0 16 16 L 38 16" stroke={colors.borderColorDefaultBase} strokeWidth={CONNECTOR_BORDER_WIDTH}/>
+      </Svg>
+    </View>);
 }
 function ShortHeadCurveConnector({ height }) {
     const styles = useStyles();
-    return <View style={[styles.shortHeadCurveConnector, { marginTop: height }]}/>;
+    const { colors } = useTheme();
+    return (<View style={[styles.shortHeadCurveConnector, { marginTop: height }]}>
+      <Svg width={20} height={18} fill="none">
+        <Path d="M 2 18 L 2 16 A 14 14 0 0 1 16 2 L 20 2" stroke={colors.borderColorDefaultBase} strokeWidth={CONNECTOR_BORDER_WIDTH}/>
+      </Svg>
+      <View style={styles.svgConnnectorVerticalLineTail}/>
+    </View>);
 }
 function ShortTailCurveConnector({ height }) {
     const styles = useStyles();
-    return <View style={[styles.shortTailCurveConnector, { height }]}/>;
+    const { colors } = useTheme();
+    return (<View style={{ height }}>
+      <View style={styles.svgConnnectorVerticalLineHead}/>
+      <Svg width={20} height={18} fill="none">
+        <Path d="M 2 0 L 2 2 A 14 14 0 0 0 16 16 L 20 16" stroke={colors.borderColorDefaultBase} strokeWidth={CONNECTOR_BORDER_WIDTH}/>
+      </Svg>
+    </View>);
 }
 function SwirlConnector({ style, height }) {
     const styles = useStyles();
     const { colors } = useTheme();
     return (<View style={[styles.swirlConnectorContainer, style]}>
       <View style={{ height }}>
-        <View style={styles.swirlConnectorVerticalLineHead}/>
+        <View style={styles.svgConnnectorVerticalLineHead}/>
         <Svg width={27} height={34} fill="none">
           <Path stroke={colors.borderColorDefaultBase} strokeWidth={CONNECTOR_BORDER_WIDTH} d="M2.07 34c0-6.142 1.201-12.283 3.343-17m0 0c2.305-5.075 5.699-8.5 9.857-8.5 4.86 0 8.8 3.806 8.8 8.5s-3.94 8.5-8.8 8.5c-4.158 0-7.552-3.425-9.857-8.5zm0 0C3.271 12.283 2.07 6.142 2.07 0"/>
         </Svg>
-        <View style={styles.swirlConnectorVerticalLineTail}/>
+        <View style={styles.svgConnnectorVerticalLineTail}/>
       </View>
-      <View style={styles.swirlConnectorVerticalLineTail}/>
+      <View style={styles.svgConnnectorVerticalLineTail}/>
     </View>);
 }
 // TODO: Remove when Services React Native bumps to React Native 0.74 or higher.
@@ -147,43 +171,21 @@ const useStyles = () => {
             borderLeftColor: borderColor,
         },
         longHeadCurveConnector: {
-            width: MY_REPLY_CONNECTOR_WIDTH,
-            borderColor: borderColor,
-            borderLeftWidth: CONNECTOR_BORDER_WIDTH,
-            borderTopWidth: CONNECTOR_BORDER_WIDTH,
-            borderTopLeftRadius: 16,
             flex: 1,
         },
-        longTailCurveConnector: {
-            width: MY_REPLY_CONNECTOR_WIDTH,
-            borderColor: borderColor,
-            borderLeftWidth: CONNECTOR_BORDER_WIDTH,
-            borderBottomWidth: CONNECTOR_BORDER_WIDTH,
-            borderBottomLeftRadius: 16,
-        },
         shortHeadCurveConnector: {
-            borderColor: borderColor,
-            borderLeftWidth: CONNECTOR_BORDER_WIDTH,
-            borderTopWidth: CONNECTOR_BORDER_WIDTH,
-            borderTopLeftRadius: 16,
             flex: 1,
         },
-        shortTailCurveConnector: {
-            borderColor: borderColor,
-            borderLeftWidth: CONNECTOR_BORDER_WIDTH,
-            borderBottomWidth: CONNECTOR_BORDER_WIDTH,
-            borderBottomLeftRadius: 16,
-        },
         swirlConnectorContainer: {
             flex: 1,
         },
-        swirlConnectorVerticalLineHead: {
+        svgConnnectorVerticalLineHead: {
             backgroundColor: borderColor,
             width: CONNECTOR_BORDER_WIDTH,
             flex: 1,
             marginBottom: -1, // Ensures there is no gap between the vertical line and the swirl connector
         },
-        swirlConnectorVerticalLineTail: {
+        svgConnnectorVerticalLineTail: {
             backgroundColor: borderColor,
             width: CONNECTOR_BORDER_WIDTH,
             flex: 1,

package/build/components/conversation/reply_connectors.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"reply_connectors.js","sourceRoot":"","sources":["../../../src/components/conversation/reply_connectors.tsx"],"names":[],"mappings":"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","sourcesContent":["import { StyleSheet, View, ViewStyle } from 'react-native'\nimport Svg, { Path } from 'react-native-svg'\nimport { useTheme } from '../../hooks'\nimport { MessageResource } from '../../types'\nimport {\n CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,\n MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,\n} from '../../utils/styles'\nimport { REPLIES_FEATURE_ENABLED } from '../../utils'\n\nconst MY_REPLY_CONNECTOR_WIDTH = 38\nconst CONNECTOR_BORDER_WIDTH = 4\nconst OFFSET_CONNECTOR_CONTAINER = CONNECTOR_BORDER_WIDTH / 2 // Accounts for the border width ensuring the connectors are centered under the avatar\nexport const AVATAR_CONNECTOR_SPACING = 8\n\ninterface ReplyConnectorProps {\n message: MessageResource\n messageBubbleHeight: number\n}\n\nexport function TheirReplyConnector({ message, messageBubbleHeight }: ReplyConnectorProps) {\n const styles = useStyles()\n const { nextRendersAuthor, threadPosition, renderAuthor, isReplyShadowMessage } = message\n\n if (!REPLIES_FEATURE_ENABLED) return null\n if (messageBubbleHeight === 0) return null // Prevents UI shifting\n\n const connectorMap: Record<string, React.ReactNode \| null> = {\n shortTailCurve: <ShortTailCurveConnector height={messageBubbleHeight / 2} />,\n shortHeadCurve: <ShortHeadCurveConnector height={messageBubbleHeight / 2} />,\n verticalLine: <VerticalLineConnector />,\n default: null,\n }\n\n const getConnectorKey = () => {\n if (threadPosition === 'first' && !renderAuthor) return 'shortHeadCurve'\n if (threadPosition === 'last' && !renderAuthor) return 'shortTailCurve'\n if (\n (threadPosition === 'first' && renderAuthor) \|\|\n threadPosition === 'center' \|\|\n isReplyShadowMessage\n )\n return 'verticalLine'\n return 'default'\n }\n\n const ConnectorComponent = connectorMap[getConnectorKey()]\n if (!ConnectorComponent) return null\n\n const spacerStyle = nextRendersAuthor ? styles.theirReplyConnectorSpacer : null\n\n return (\n <View style={[styles.theirReplyConnectorContainer, spacerStyle]}>{ConnectorComponent}</View>\n )\n}\n\nexport function MyReplyConnector({ message, messageBubbleHeight }: ReplyConnectorProps) {\n const styles = useStyles()\n const { nextRendersAuthor, threadPosition, prevIsMyReply, nextIsMyReply, isReplyShadowMessage } =\n message\n\n if (!REPLIES_FEATURE_ENABLED) return null\n if (messageBubbleHeight === 0) return null // Prevents UI shifting\n\n const connectorMap: Record<string, React.ReactNode \| null> = {\n longTailCurve: (\n <LongTailCurveConnector\n height={messageBubbleHeight / 2}\n style={styles.myReplyConnectorPosition}\n />\n ),\n longHeadCurve: (\n <LongHeadCurveConnector\n height={messageBubbleHeight / 2}\n style={styles.myReplyConnectorPosition}\n />\n ),\n verticalLine: <VerticalLineConnector style={styles.myReplyConnectorPosition} />,\n swirl: <SwirlConnector style={styles.myReplyConnectorPosition} height={messageBubbleHeight} />,\n default: null,\n }\n\n const getConnectorKey = () => {\n if (threadPosition === 'first' \|\| isReplyShadowMessage) return 'longHeadCurve'\n if (threadPosition === 'center' && prevIsMyReply && nextIsMyReply) return 'verticalLine'\n if (threadPosition === 'center' && (!prevIsMyReply \|\| !nextIsMyReply)) return 'swirl'\n if (threadPosition === 'last') return 'longTailCurve'\n\n return 'default'\n }\n\n const ConnectorComponent = connectorMap[getConnectorKey()]\n if (!ConnectorComponent) return null\n\n const spacerStyle = nextRendersAuthor ? styles.myReplyConnectorSpacer : null\n\n return (\n <EnforceLeftPositionForMyReplyConnector>\n <View style={[styles.myReplyConnectorContainer, spacerStyle]}>{ConnectorComponent}</View>\n </EnforceLeftPositionForMyReplyConnector>\n )\n}\n\nfunction VerticalLineConnector({ style }: { style?: ViewStyle }) {\n const styles = useStyles()\n return <View style={[styles.verticalLineConnector, style]} />\n}\n\nfunction LongHeadCurveConnector({ height, style }: { height: number; style?: ViewStyle }) {\n const styles = useStyles()\n return <View style={[styles.longHeadCurveConnector, { height, marginTop: height }, style]} />\n}\n\nfunction LongTailCurveConnector({ height, style }: { height: number; style?: ViewStyle }) {\n const styles = useStyles()\n return <View style={[styles.longTailCurveConnector, { height }, style]} />\n}\n\nfunction ShortHeadCurveConnector({ height }: { height: number }) {\n const styles = useStyles()\n return <View style={[styles.shortHeadCurveConnector, { marginTop: height }]} />\n}\n\nfunction ShortTailCurveConnector({ height }: { height: number }) {\n const styles = useStyles()\n return <View style={[styles.shortTailCurveConnector, { height }]} />\n}\n\nfunction SwirlConnector({ style, height }: { style?: ViewStyle; height: number }) {\n const styles = useStyles()\n const { colors } = useTheme()\n\n return (\n <View style={[styles.swirlConnectorContainer, style]}>\n <View style={{ height }}>\n <View style={styles.swirlConnectorVerticalLineHead} />\n <Svg width={27} height={34} fill=\"none\">\n <Path\n stroke={colors.borderColorDefaultBase}\n strokeWidth={CONNECTOR_BORDER_WIDTH}\n d=\"M2.07 34c0-6.142 1.201-12.283 3.343-17m0 0c2.305-5.075 5.699-8.5 9.857-8.5 4.86 0 8.8 3.806 8.8 8.5s-3.94 8.5-8.8 8.5c-4.158 0-7.552-3.425-9.857-8.5zm0 0C3.271 12.283 2.07 6.142 2.07 0\"\n />\n </Svg>\n <View style={styles.swirlConnectorVerticalLineTail} />\n </View>\n <View style={styles.swirlConnectorVerticalLineTail} />\n </View>\n )\n}\n\n// TODO: Remove when Services React Native bumps to React Native 0.74 or higher.\n// This fixes a React Native bug where using `flexDirection: 'row-reverse'` also switches the `left`/`right` absolute positioning values.\n// The wrapper ensures the MyReplyConnector is always positioned to the left of the message bubble on older versions of React Native.\n// Long term fix is described here: https://reactnative.dev/blog/2024/04/22/release-0.74#new-layout-behaviors\nfunction EnforceLeftPositionForMyReplyConnector({ children }: { children: React.ReactNode }) {\n const styles = useStyles()\n return (\n <View\n style={styles.resetPosition}\n pointerEvents=\"none\" // ensures wrapper does not block press events\n >\n {children}\n </View>\n )\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n const borderColor = colors.borderColorDefaultBase\n\n return StyleSheet.create({\n theirReplyConnectorContainer: {\n width: '50%',\n marginRight: OFFSET_CONNECTOR_CONTAINER,\n alignSelf: 'flex-end',\n flex: 1,\n },\n theirReplyConnectorSpacer: {\n paddingBottom: AVATAR_CONNECTOR_SPACING,\n },\n myReplyConnectorContainer: {\n width: MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,\n position: 'absolute',\n left: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL - OFFSET_CONNECTOR_CONTAINER,\n top: 0,\n bottom: 0,\n },\n myReplyConnectorPosition: {\n left: '50%',\n },\n myReplyConnectorSpacer: {\n bottom: AVATAR_CONNECTOR_SPACING,\n },\n verticalLineConnector: {\n flex: 1,\n borderLeftWidth: CONNECTOR_BORDER_WIDTH,\n borderLeftColor: borderColor,\n },\n longHeadCurveConnector: {\n width: MY_REPLY_CONNECTOR_WIDTH,\n borderColor: borderColor,\n borderLeftWidth: CONNECTOR_BORDER_WIDTH,\n borderTopWidth: CONNECTOR_BORDER_WIDTH,\n borderTopLeftRadius: 16,\n flex: 1,\n },\n longTailCurveConnector: {\n width: MY_REPLY_CONNECTOR_WIDTH,\n borderColor: borderColor,\n borderLeftWidth: CONNECTOR_BORDER_WIDTH,\n borderBottomWidth: CONNECTOR_BORDER_WIDTH,\n borderBottomLeftRadius: 16,\n },\n shortHeadCurveConnector: {\n borderColor: borderColor,\n borderLeftWidth: CONNECTOR_BORDER_WIDTH,\n borderTopWidth: CONNECTOR_BORDER_WIDTH,\n borderTopLeftRadius: 16,\n flex: 1,\n },\n shortTailCurveConnector: {\n borderColor: borderColor,\n borderLeftWidth: CONNECTOR_BORDER_WIDTH,\n borderBottomWidth: CONNECTOR_BORDER_WIDTH,\n borderBottomLeftRadius: 16,\n },\n swirlConnectorContainer: {\n flex: 1,\n },\n swirlConnectorVerticalLineHead: {\n backgroundColor: borderColor,\n width: CONNECTOR_BORDER_WIDTH,\n flex: 1,\n marginBottom: -1, // Ensures there is no gap between the vertical line and the swirl connector\n },\n swirlConnectorVerticalLineTail: {\n backgroundColor: borderColor,\n width: CONNECTOR_BORDER_WIDTH,\n flex: 1,\n marginTop: -1, // Ensures there is no gap between the vertical line and the swirl connector\n },\n // TODO: Remove when Services React Native bumps to React Native 0.74 or higher.\n resetPosition: {\n position: 'absolute',\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n },\n })\n}\n"]}
1	+ {"version":3,"file":"reply_connectors.js","sourceRoot":"","sources":["../../../src/components/conversation/reply_connectors.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAa,MAAM,cAAc,CAAA;AAC1D,OAAO,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAA;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;AAEtC,OAAO,EACL,4CAA4C,EAC5C,kCAAkC,GACnC,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,uBAAuB,EAAE,MAAM,aAAa,CAAA;AAErD,MAAM,wBAAwB,GAAG,EAAE,CAAA;AACnC,MAAM,sBAAsB,GAAG,CAAC,CAAA;AAChC,MAAM,0BAA0B,GAAG,sBAAsB,GAAG,CAAC,CAAA,CAAC,sFAAsF;AACpJ,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,CAAA;AAOzC,MAAM,UAAU,mBAAmB,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAuB;IACvF,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,EAAE,iBAAiB,EAAE,cAAc,EAAE,YAAY,EAAE,oBAAoB,EAAE,GAAG,OAAO,CAAA;IAEzF,IAAI,CAAC,uBAAuB;QAAE,OAAO,IAAI,CAAA;IACzC,IAAI,mBAAmB,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA,CAAC,uBAAuB;IAElE,MAAM,YAAY,GAA2C;QAC3D,cAAc,EAAE,CAAC,uBAAuB,CAAC,MAAM,CAAC,CAAC,mBAAmB,GAAG,CAAC,CAAC,EAAG;QAC5E,cAAc,EAAE,CAAC,uBAAuB,CAAC,MAAM,CAAC,CAAC,mBAAmB,GAAG,CAAC,CAAC,EAAG;QAC5E,YAAY,EAAE,CAAC,qBAAqB,CAAC,AAAD,EAAG;QACvC,OAAO,EAAE,IAAI;KACd,CAAA;IAED,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,IAAI,cAAc,KAAK,OAAO,IAAI,CAAC,YAAY;YAAE,OAAO,gBAAgB,CAAA;QACxE,IAAI,cAAc,KAAK,MAAM,IAAI,CAAC,YAAY;YAAE,OAAO,gBAAgB,CAAA;QACvE,IACE,CAAC,cAAc,KAAK,OAAO,IAAI,YAAY,CAAC;YAC5C,cAAc,KAAK,QAAQ;YAC3B,oBAAoB;YAEpB,OAAO,cAAc,CAAA;QACvB,OAAO,SAAS,CAAA;IAClB,CAAC,CAAA;IAED,MAAM,kBAAkB,GAAG,YAAY,CAAC,eAAe,EAAE,CAAC,CAAA;IAC1D,IAAI,CAAC,kBAAkB;QAAE,OAAO,IAAI,CAAA;IAEpC,MAAM,WAAW,GAAG,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,yBAAyB,CAAC,CAAC,CAAC,IAAI,CAAA;IAE/E,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,4BAA4B,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,EAAE,IAAI,CAAC,CAC7F,CAAA;AACH,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAuB;IACpF,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,EAAE,iBAAiB,EAAE,cAAc,EAAE,aAAa,EAAE,aAAa,EAAE,oBAAoB,EAAE,GAC7F,OAAO,CAAA;IAET,IAAI,CAAC,uBAAuB;QAAE,OAAO,IAAI,CAAA;IACzC,IAAI,mBAAmB,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA,CAAC,uBAAuB;IAElE,MAAM,YAAY,GAA2C;QAC3D,aAAa,EAAE,CACb,CAAC,sBAAsB,CACrB,MAAM,CAAC,CAAC,mBAAmB,GAAG,CAAC,CAAC,CAChC,KAAK,CAAC,CAAC,MAAM,CAAC,wBAAwB,CAAC,EACvC,CACH;QACD,aAAa,EAAE,CACb,CAAC,sBAAsB,CACrB,MAAM,CAAC,CAAC,mBAAmB,GAAG,CAAC,CAAC,CAChC,KAAK,CAAC,CAAC,MAAM,CAAC,wBAAwB,CAAC,EACvC,CACH;QACD,YAAY,EAAE,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,wBAAwB,CAAC,EAAG;QAC/E,KAAK,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC,MAAM,CAAC,CAAC,mBAAmB,CAAC,EAAG;QAC9F,OAAO,EAAE,IAAI;KACd,CAAA;IAED,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,IAAI,cAAc,KAAK,OAAO,IAAI,oBAAoB;YAAE,OAAO,eAAe,CAAA;QAC9E,IAAI,cAAc,KAAK,QAAQ,IAAI,aAAa,IAAI,aAAa;YAAE,OAAO,cAAc,CAAA;QACxF,IAAI,cAAc,KAAK,QAAQ,IAAI,CAAC,CAAC,aAAa,IAAI,CAAC,aAAa,CAAC;YAAE,OAAO,OAAO,CAAA;QACrF,IAAI,cAAc,KAAK,MAAM;YAAE,OAAO,eAAe,CAAA;QAErD,OAAO,SAAS,CAAA;IAClB,CAAC,CAAA;IAED,MAAM,kBAAkB,GAAG,YAAY,CAAC,eAAe,EAAE,CAAC,CAAA;IAC1D,IAAI,CAAC,kBAAkB;QAAE,OAAO,IAAI,CAAA;IAEpC,MAAM,WAAW,GAAG,iBAAiB,CAAC,CAAC,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,CAAC,IAAI,CAAA;IAE5E,OAAO,CACL,CAAC,sCAAsC,CACrC;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,yBAAyB,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,kBAAkB,CAAC,EAAE,IAAI,CAC1F;IAAA,EAAE,sCAAsC,CAAC,CAC1C,CAAA;AACH,CAAC;AAED,SAAS,qBAAqB,CAAC,EAAE,KAAK,EAAyB;IAC7D,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,qBAAqB,EAAE,KAAK,CAAC,CAAC,EAAG,CAAA;AAC/D,CAAC;AAED,SAAS,sBAAsB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAyC;IACtF,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,sBAAsB,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,KAAK,CAAC,CAAC,CACzE;MAAA,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,wBAAwB,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAC3D;QAAA,CAAC,IAAI,CACH,CAAC,CAAC,yCAAyC,CAC3C,MAAM,CAAC,CAAC,MAAM,CAAC,sBAAsB,CAAC,CACtC,WAAW,CAAC,CAAC,sBAAsB,CAAC,EAExC;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,6BAA6B,CAAC,EACpD;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,SAAS,sBAAsB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAyC;IACtF,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,CAAC,CAAC,CAC/B;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,6BAA6B,CAAC,EAClD;MAAA,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,wBAAwB,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAC3D;QAAA,CAAC,IAAI,CACH,CAAC,CAAC,yCAAyC,CAC3C,MAAM,CAAC,CAAC,MAAM,CAAC,sBAAsB,CAAC,CACtC,WAAW,CAAC,CAAC,sBAAsB,CAAC,EAExC;MAAA,EAAE,GAAG,CACP;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,SAAS,uBAAuB,CAAC,EAAE,MAAM,EAAsB;IAC7D,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,uBAAuB,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,CAAC,CACnE;MAAA,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CACrC;QAAA,CAAC,IAAI,CACH,CAAC,CAAC,yCAAyC,CAC3C,MAAM,CAAC,CAAC,MAAM,CAAC,sBAAsB,CAAC,CACtC,WAAW,CAAC,CAAC,sBAAsB,CAAC,EAExC;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,6BAA6B,CAAC,EACpD;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,SAAS,uBAAuB,CAAC,EAAE,MAAM,EAAsB;IAC7D,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CACtB;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,6BAA6B,CAAC,EAClD;MAAA,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CACrC;QAAA,CAAC,IAAI,CACH,CAAC,CAAC,yCAAyC,CAC3C,MAAM,CAAC,CAAC,MAAM,CAAC,sBAAsB,CAAC,CACtC,WAAW,CAAC,CAAC,sBAAsB,CAAC,EAExC;MAAA,EAAE,GAAG,CACP;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,SAAS,cAAc,CAAC,EAAE,KAAK,EAAE,MAAM,EAAyC;IAC9E,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,uBAAuB,EAAE,KAAK,CAAC,CAAC,CACnD;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CACtB;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,6BAA6B,CAAC,EAClD;QAAA,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CACrC;UAAA,CAAC,IAAI,CACH,MAAM,CAAC,CAAC,MAAM,CAAC,sBAAsB,CAAC,CACtC,WAAW,CAAC,CAAC,sBAAsB,CAAC,CACpC,CAAC,CAAC,0LAA0L,EAEhM;QAAA,EAAE,GAAG,CACL;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,6BAA6B,CAAC,EACpD;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,6BAA6B,CAAC,EACpD;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,gFAAgF;AAChF,yIAAyI;AACzI,qIAAqI;AACrI,6GAA6G;AAC7G,SAAS,sCAAsC,CAAC,EAAE,QAAQ,EAAiC;IACzF,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,OAAO,CACL,CAAC,IAAI,CACH,KAAK,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAC5B,aAAa,CAAC,MAAM,CAAC,8CAA8C;KAEnE;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,MAAM,WAAW,GAAG,MAAM,CAAC,sBAAsB,CAAA;IAEjD,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,4BAA4B,EAAE;YAC5B,KAAK,EAAE,KAAK;YACZ,WAAW,EAAE,0BAA0B;YACvC,SAAS,EAAE,UAAU;YACrB,IAAI,EAAE,CAAC;SACR;QACD,yBAAyB,EAAE;YACzB,aAAa,EAAE,wBAAwB;SACxC;QACD,yBAAyB,EAAE;YACzB,KAAK,EAAE,kCAAkC;YACzC,QAAQ,EAAE,UAAU;YACpB,IAAI,EAAE,4CAA4C,GAAG,0BAA0B;YAC/E,GAAG,EAAE,CAAC;YACN,MAAM,EAAE,CAAC;SACV;QACD,wBAAwB,EAAE;YACxB,IAAI,EAAE,KAAK;SACZ;QACD,sBAAsB,EAAE;YACtB,MAAM,EAAE,wBAAwB;SACjC;QACD,qBAAqB,EAAE;YACrB,IAAI,EAAE,CAAC;YACP,eAAe,EAAE,sBAAsB;YACvC,eAAe,EAAE,WAAW;SAC7B;QACD,sBAAsB,EAAE;YACtB,IAAI,EAAE,CAAC;SACR;QACD,uBAAuB,EAAE;YACvB,IAAI,EAAE,CAAC;SACR;QACD,uBAAuB,EAAE;YACvB,IAAI,EAAE,CAAC;SACR;QACD,6BAA6B,EAAE;YAC7B,eAAe,EAAE,WAAW;YAC5B,KAAK,EAAE,sBAAsB;YAC7B,IAAI,EAAE,CAAC;YACP,YAAY,EAAE,CAAC,CAAC,EAAE,4EAA4E;SAC/F;QACD,6BAA6B,EAAE;YAC7B,eAAe,EAAE,WAAW;YAC5B,KAAK,EAAE,sBAAsB;YAC7B,IAAI,EAAE,CAAC;YACP,SAAS,EAAE,CAAC,CAAC,EAAE,4EAA4E;SAC5F;QACD,gFAAgF;QAChF,aAAa,EAAE;YACb,QAAQ,EAAE,UAAU;YACpB,IAAI,EAAE,CAAC;YACP,KAAK,EAAE,CAAC;YACR,GAAG,EAAE,CAAC;YACN,MAAM,EAAE,CAAC;SACV;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { StyleSheet, View, ViewStyle } from 'react-native'\nimport Svg, { Path } from 'react-native-svg'\nimport { useTheme } from '../../hooks'\nimport { MessageResource } from '../../types'\nimport {\n CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,\n MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,\n} from '../../utils/styles'\nimport { REPLIES_FEATURE_ENABLED } from '../../utils'\n\nconst MY_REPLY_CONNECTOR_WIDTH = 38\nconst CONNECTOR_BORDER_WIDTH = 4\nconst OFFSET_CONNECTOR_CONTAINER = CONNECTOR_BORDER_WIDTH / 2 // Accounts for the border width ensuring the connectors are centered under the avatar\nexport const AVATAR_CONNECTOR_SPACING = 8\n\ninterface ReplyConnectorProps {\n message: MessageResource\n messageBubbleHeight: number\n}\n\nexport function TheirReplyConnector({ message, messageBubbleHeight }: ReplyConnectorProps) {\n const styles = useStyles()\n const { nextRendersAuthor, threadPosition, renderAuthor, isReplyShadowMessage } = message\n\n if (!REPLIES_FEATURE_ENABLED) return null\n if (messageBubbleHeight === 0) return null // Prevents UI shifting\n\n const connectorMap: Record<string, React.ReactNode \| null> = {\n shortTailCurve: <ShortTailCurveConnector height={messageBubbleHeight / 2} />,\n shortHeadCurve: <ShortHeadCurveConnector height={messageBubbleHeight / 2} />,\n verticalLine: <VerticalLineConnector />,\n default: null,\n }\n\n const getConnectorKey = () => {\n if (threadPosition === 'first' && !renderAuthor) return 'shortHeadCurve'\n if (threadPosition === 'last' && !renderAuthor) return 'shortTailCurve'\n if (\n (threadPosition === 'first' && renderAuthor) \|\|\n threadPosition === 'center' \|\|\n isReplyShadowMessage\n )\n return 'verticalLine'\n return 'default'\n }\n\n const ConnectorComponent = connectorMap[getConnectorKey()]\n if (!ConnectorComponent) return null\n\n const spacerStyle = nextRendersAuthor ? styles.theirReplyConnectorSpacer : null\n\n return (\n <View style={[styles.theirReplyConnectorContainer, spacerStyle]}>{ConnectorComponent}</View>\n )\n}\n\nexport function MyReplyConnector({ message, messageBubbleHeight }: ReplyConnectorProps) {\n const styles = useStyles()\n const { nextRendersAuthor, threadPosition, prevIsMyReply, nextIsMyReply, isReplyShadowMessage } =\n message\n\n if (!REPLIES_FEATURE_ENABLED) return null\n if (messageBubbleHeight === 0) return null // Prevents UI shifting\n\n const connectorMap: Record<string, React.ReactNode \| null> = {\n longTailCurve: (\n <LongTailCurveConnector\n height={messageBubbleHeight / 2}\n style={styles.myReplyConnectorPosition}\n />\n ),\n longHeadCurve: (\n <LongHeadCurveConnector\n height={messageBubbleHeight / 2}\n style={styles.myReplyConnectorPosition}\n />\n ),\n verticalLine: <VerticalLineConnector style={styles.myReplyConnectorPosition} />,\n swirl: <SwirlConnector style={styles.myReplyConnectorPosition} height={messageBubbleHeight} />,\n default: null,\n }\n\n const getConnectorKey = () => {\n if (threadPosition === 'first' \|\| isReplyShadowMessage) return 'longHeadCurve'\n if (threadPosition === 'center' && prevIsMyReply && nextIsMyReply) return 'verticalLine'\n if (threadPosition === 'center' && (!prevIsMyReply \|\| !nextIsMyReply)) return 'swirl'\n if (threadPosition === 'last') return 'longTailCurve'\n\n return 'default'\n }\n\n const ConnectorComponent = connectorMap[getConnectorKey()]\n if (!ConnectorComponent) return null\n\n const spacerStyle = nextRendersAuthor ? styles.myReplyConnectorSpacer : null\n\n return (\n <EnforceLeftPositionForMyReplyConnector>\n <View style={[styles.myReplyConnectorContainer, spacerStyle]}>{ConnectorComponent}</View>\n </EnforceLeftPositionForMyReplyConnector>\n )\n}\n\nfunction VerticalLineConnector({ style }: { style?: ViewStyle }) {\n const styles = useStyles()\n return <View style={[styles.verticalLineConnector, style]} />\n}\n\nfunction LongHeadCurveConnector({ height, style }: { height: number; style?: ViewStyle }) {\n const styles = useStyles()\n const { colors } = useTheme()\n\n return (\n <View style={[styles.longHeadCurveConnector, { marginTop: height }, style]}>\n <Svg width={MY_REPLY_CONNECTOR_WIDTH} height={18} fill=\"none\">\n <Path\n d=\"M 2 18 L 2 16 A 14 14 0 0 1 16 2 L 38 2\"\n stroke={colors.borderColorDefaultBase}\n strokeWidth={CONNECTOR_BORDER_WIDTH}\n />\n </Svg>\n <View style={styles.svgConnnectorVerticalLineTail} />\n </View>\n )\n}\n\nfunction LongTailCurveConnector({ height, style }: { height: number; style?: ViewStyle }) {\n const styles = useStyles()\n const { colors } = useTheme()\n\n return (\n <View style={[{ height }, style]}>\n <View style={styles.svgConnnectorVerticalLineHead} />\n <Svg width={MY_REPLY_CONNECTOR_WIDTH} height={18} fill=\"none\">\n <Path\n d=\"M 2 0 L 2 2 A 14 14 0 0 0 16 16 L 38 16\"\n stroke={colors.borderColorDefaultBase}\n strokeWidth={CONNECTOR_BORDER_WIDTH}\n />\n </Svg>\n </View>\n )\n}\n\nfunction ShortHeadCurveConnector({ height }: { height: number }) {\n const styles = useStyles()\n const { colors } = useTheme()\n\n return (\n <View style={[styles.shortHeadCurveConnector, { marginTop: height }]}>\n <Svg width={20} height={18} fill=\"none\">\n <Path\n d=\"M 2 18 L 2 16 A 14 14 0 0 1 16 2 L 20 2\"\n stroke={colors.borderColorDefaultBase}\n strokeWidth={CONNECTOR_BORDER_WIDTH}\n />\n </Svg>\n <View style={styles.svgConnnectorVerticalLineTail} />\n </View>\n )\n}\n\nfunction ShortTailCurveConnector({ height }: { height: number }) {\n const styles = useStyles()\n const { colors } = useTheme()\n\n return (\n <View style={{ height }}>\n <View style={styles.svgConnnectorVerticalLineHead} />\n <Svg width={20} height={18} fill=\"none\">\n <Path\n d=\"M 2 0 L 2 2 A 14 14 0 0 0 16 16 L 20 16\"\n stroke={colors.borderColorDefaultBase}\n strokeWidth={CONNECTOR_BORDER_WIDTH}\n />\n </Svg>\n </View>\n )\n}\n\nfunction SwirlConnector({ style, height }: { style?: ViewStyle; height: number }) {\n const styles = useStyles()\n const { colors } = useTheme()\n\n return (\n <View style={[styles.swirlConnectorContainer, style]}>\n <View style={{ height }}>\n <View style={styles.svgConnnectorVerticalLineHead} />\n <Svg width={27} height={34} fill=\"none\">\n <Path\n stroke={colors.borderColorDefaultBase}\n strokeWidth={CONNECTOR_BORDER_WIDTH}\n d=\"M2.07 34c0-6.142 1.201-12.283 3.343-17m0 0c2.305-5.075 5.699-8.5 9.857-8.5 4.86 0 8.8 3.806 8.8 8.5s-3.94 8.5-8.8 8.5c-4.158 0-7.552-3.425-9.857-8.5zm0 0C3.271 12.283 2.07 6.142 2.07 0\"\n />\n </Svg>\n <View style={styles.svgConnnectorVerticalLineTail} />\n </View>\n <View style={styles.svgConnnectorVerticalLineTail} />\n </View>\n )\n}\n\n// TODO: Remove when Services React Native bumps to React Native 0.74 or higher.\n// This fixes a React Native bug where using `flexDirection: 'row-reverse'` also switches the `left`/`right` absolute positioning values.\n// The wrapper ensures the MyReplyConnector is always positioned to the left of the message bubble on older versions of React Native.\n// Long term fix is described here: https://reactnative.dev/blog/2024/04/22/release-0.74#new-layout-behaviors\nfunction EnforceLeftPositionForMyReplyConnector({ children }: { children: React.ReactNode }) {\n const styles = useStyles()\n return (\n <View\n style={styles.resetPosition}\n pointerEvents=\"none\" // ensures wrapper does not block press events\n >\n {children}\n </View>\n )\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n const borderColor = colors.borderColorDefaultBase\n\n return StyleSheet.create({\n theirReplyConnectorContainer: {\n width: '50%',\n marginRight: OFFSET_CONNECTOR_CONTAINER,\n alignSelf: 'flex-end',\n flex: 1,\n },\n theirReplyConnectorSpacer: {\n paddingBottom: AVATAR_CONNECTOR_SPACING,\n },\n myReplyConnectorContainer: {\n width: MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,\n position: 'absolute',\n left: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL - OFFSET_CONNECTOR_CONTAINER,\n top: 0,\n bottom: 0,\n },\n myReplyConnectorPosition: {\n left: '50%',\n },\n myReplyConnectorSpacer: {\n bottom: AVATAR_CONNECTOR_SPACING,\n },\n verticalLineConnector: {\n flex: 1,\n borderLeftWidth: CONNECTOR_BORDER_WIDTH,\n borderLeftColor: borderColor,\n },\n longHeadCurveConnector: {\n flex: 1,\n },\n shortHeadCurveConnector: {\n flex: 1,\n },\n swirlConnectorContainer: {\n flex: 1,\n },\n svgConnnectorVerticalLineHead: {\n backgroundColor: borderColor,\n width: CONNECTOR_BORDER_WIDTH,\n flex: 1,\n marginBottom: -1, // Ensures there is no gap between the vertical line and the swirl connector\n },\n svgConnnectorVerticalLineTail: {\n backgroundColor: borderColor,\n width: CONNECTOR_BORDER_WIDTH,\n flex: 1,\n marginTop: -1, // Ensures there is no gap between the vertical line and the swirl connector\n },\n // TODO: Remove when Services React Native bumps to React Native 0.74 or higher.\n resetPosition: {\n position: 'absolute',\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n },\n })\n}\n"]}

package/build/components/conversation/reply_shadow_message.js CHANGED Viewed

@@ -15,7 +15,7 @@ export function ReplyShadowMessage({ conversation_id, inReplyScreen, messageId,
     if (isLoading)
         return <ShadowMessageFallback text="Loading..."/>;
     if (isError || !message)
-        return <ShadowMessageFallback text="Message not found"/>;
+        return <ShadowMessageFallback text="Message deleted"/>;
     const enrichedMessage = {
         ...message,
         isReplyShadowMessage,
@@ -24,7 +24,7 @@ export function ReplyShadowMessage({ conversation_id, inReplyScreen, messageId,
     return <ShadowMessageContent conversation_id={conversation_id} {...enrichedMessage}/>;
 }
 function ShadowMessageContent({ conversation_id, ...message }) {
-    const { text } = message;
+    const { text, deletedAt } = message;
     const styles = useStyles(message);
     const { colors } = useTheme();
     const navigation = useNavigation();
@@ -32,6 +32,8 @@ function ShadowMessageContent({ conversation_id, ...message }) {
     const { animatedBackgroundColor, handleMessagePressIn, handleMessagePressOut } = useAnimatedMessageBackgroundColor();
     const scalableNumberOfLines = useScalableNumberOfLines(2);
     const replyCountText = pluralize(message.replyCount, 'reply');
+    const isDeleted = !!deletedAt;
+    const messageText = isDeleted ? 'Message deleted' : text;
     const handleNavigateToReplies = () => {
         navigation.navigate('ConversationReply', {
             conversation_id,
@@ -42,8 +44,8 @@ function ShadowMessageContent({ conversation_id, ...message }) {
     return (<Pressable android_ripple={{ color: colors.androidRippleNeutral }} onPress={handleNavigateToReplies} onPressIn={handleMessagePressIn} onPressOut={handleMessagePressOut} accessibilityHint="Navigate to reply screen for this message" accessibilityRole="link">
       <Animated.View style={[styles.message, animatedBackgroundColor]}>
         {!message.mine && (<View>
-            <View style={styles.avatarWrapper}>
-              <Avatar size="xs" sourceUri={message.author.avatar} style={styles.avatar} maxFontSizeMultiplier={1}/>
+            <View style={[styles.avatarWrapper, !isDeleted && styles.avatarOpacity]}>
+              <Avatar size="xs" sourceUri={message.author.avatar} style={styles.avatar} maxFontSizeMultiplier={1} fallbackIconName={isDeleted ? 'publishing.trash' : 'general.person'} showFallback={isDeleted}/>
             </View>
             <TheirReplyConnector message={message} messageBubbleHeight={messageBubbleHeight}/>
           </View>)}
@@ -51,7 +53,7 @@ function ShadowMessageContent({ conversation_id, ...message }) {
           <View style={styles.messageBubble} onLayout={e => setMessageBubbleHeight(e.nativeEvent.layout.height)}>
             <MessageAttachmentImagery attachments={message.attachments}/>
             {text && (<Text variant="footnote" style={styles.messageText} numberOfLines={scalableNumberOfLines}>
-                {text}
+                {messageText}
               </Text>)}
           </View>
           <View style={styles.messageMeta}>
@@ -148,6 +150,8 @@ const useStyles = ({ mine, imageWidth = 32, imageHeight = 32 } = {}) => {
         },
         avatar: {
             marginBottom: 8,
+        },
+        avatarOpacity: {
             opacity: 0.5,
         },
         messageBubble: {

package/build/components/conversation/reply_shadow_message.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"reply_shadow_message.js","sourceRoot":"","sources":["../../../src/components/conversation/reply_shadow_message.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { Pressable, StyleSheet, useWindowDimensions, View } from 'react-native'\nimport { Avatar, Icon, IconProps, Image, Text } from '../display'\nimport {\n useAnimatedMessageBackgroundColor,\n useFontScale,\n useScalableNumberOfLines,\n useTheme,\n} from '../../hooks'\nimport { MessageResource } from '../../types'\nimport {\n DenormalizedAttachmentResource,\n DenormalizedGiphyAttachmentResource,\n DenormalizedExpandedLinkAttachmentResource,\n DenormalizedMessageAttachmentResource,\n} from '../../types/resources/denormalized_attachment_resource'\nimport {\n CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,\n MAX_FONT_SIZE_MULTIPLIER,\n MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,\n platformFontWeightMedium,\n} from '../../utils/styles'\nimport Animated from 'react-native-reanimated'\nimport { TheirReplyConnector, MyReplyConnector } from './reply_connectors'\nimport { assertKeysAreNumbers, pluralize } from '../../utils'\nimport { useNavigation } from '@react-navigation/native'\nimport { useConversationMessage } from '../../hooks/use_conversation_message'\n\ninterface ReplyShadowMessageProps extends MessageResource {\n messageId: string\n conversation_id: number\n inReplyScreen?: boolean\n isReplyShadowMessage: boolean\n nextRendersAuthor: boolean\n}\n\nexport function ReplyShadowMessage({\n conversation_id,\n inReplyScreen,\n messageId,\n isReplyShadowMessage,\n nextRendersAuthor,\n}: ReplyShadowMessageProps) {\n const { message, isError, isLoading } = useConversationMessage({ conversation_id, messageId })\n\n if (inReplyScreen) return null\n if (isLoading) return <ShadowMessageFallback text=\"Loading...\" />\n if (isError \|\| !message) return <ShadowMessageFallback text=\"Message not found\" />\n\n const enrichedMessage = {\n ...message,\n isReplyShadowMessage,\n nextRendersAuthor,\n }\n\n return <ShadowMessageContent conversation_id={conversation_id} {...enrichedMessage} />\n}\n\ninterface ShadowMessageContentProps extends MessageResource {\n conversation_id: number\n}\n\nfunction ShadowMessageContent({ conversation_id, ...message }: ShadowMessageContentProps) {\n const { text } = message\n const styles = useStyles(message)\n const { colors } = useTheme()\n const navigation = useNavigation()\n\n const [messageBubbleHeight, setMessageBubbleHeight] = React.useState(0)\n const { animatedBackgroundColor, handleMessagePressIn, handleMessagePressOut } =\n useAnimatedMessageBackgroundColor()\n const scalableNumberOfLines = useScalableNumberOfLines(2)\n const replyCountText = pluralize(message.replyCount, 'reply')\n\n const handleNavigateToReplies = () => {\n navigation.navigate('ConversationReply', {\n conversation_id,\n reply_root_id: message.replyRootId,\n reply_root_author_name: message.author.name,\n })\n }\n\n return (\n <Pressable\n android_ripple={{ color: colors.androidRippleNeutral }}\n onPress={handleNavigateToReplies}\n onPressIn={handleMessagePressIn}\n onPressOut={handleMessagePressOut}\n accessibilityHint=\"Navigate to reply screen for this message\"\n accessibilityRole=\"link\"\n >\n <Animated.View style={[styles.message, animatedBackgroundColor]}>\n {!message.mine && (\n <View>\n <View style={styles.avatarWrapper}>\n <Avatar\n size=\"xs\"\n sourceUri={message.author.avatar}\n style={styles.avatar}\n maxFontSizeMultiplier={1}\n />\n </View>\n <TheirReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />\n </View>\n )}\n <View style={styles.messageContent}>\n <View\n style={styles.messageBubble}\n onLayout={e => setMessageBubbleHeight(e.nativeEvent.layout.height)}\n >\n <MessageAttachmentImagery attachments={message.attachments} />\n {text && (\n <Text\n variant=\"footnote\"\n style={styles.messageText}\n numberOfLines={scalableNumberOfLines}\n >\n {text}\n </Text>\n )}\n </View>\n <View style={styles.messageMeta}>\n <Text variant=\"footnote\" style={styles.replyCountText}>\n {replyCountText}\n </Text>\n </View>\n </View>\n {message.mine && (\n <MyReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />\n )}\n </Animated.View>\n </Pressable>\n )\n}\n\nfunction MessageAttachmentImagery({\n attachments,\n}: {\n attachments: DenormalizedAttachmentResource[]\n}) {\n if (!attachments \|\| attachments.length === 0) return null\n\n const attachment = attachments[0]\n\n if (attachment.type === 'giphy') {\n return <GiphyImage attachment={attachment} />\n }\n if (attachment.type === 'ExpandedLink') {\n return <ExpandedLinkImage attachment={attachment} />\n }\n if (attachment.type === 'MessageAttachment') {\n const contentType = attachment.attributes?.contentType\n const basicType = contentType?.split('/')[0]\n\n switch (basicType) {\n case 'image':\n return <MessageAttachmentImage attachment={attachment} />\n case 'video':\n return <MessageAttachmentIcon iconName=\"general.outlinedVideoFile\" />\n case 'audio':\n return <MessageAttachmentIcon iconName=\"general.outlinedMusicFile\" />\n case 'application':\n return <MessageAttachmentIcon iconName=\"general.outlinedGenericFile\" />\n default:\n return null\n }\n }\n\n return null\n}\n\nfunction GiphyImage({ attachment }: { attachment: DenormalizedGiphyAttachmentResource }) {\n const { title, giphy } = attachment\n const { url } = giphy.fixedWidth\n const { width, height } = assertKeysAreNumbers(giphy.fixedWidth)\n const styles = useStyles({ imageWidth: width, imageHeight: height })\n\n return (\n <Image\n source={{ uri: url }}\n wrapperStyle={styles.imageWrapper}\n style={styles.image}\n alt={title}\n loaderSize={16}\n />\n )\n}\n\nfunction ExpandedLinkImage({\n attachment,\n}: {\n attachment: DenormalizedExpandedLinkAttachmentResource\n}) {\n const { title = '', imageUrl, imageHeight, imageWidth } = attachment.attributes\n const styles = useStyles({ imageWidth, imageHeight })\n\n return (\n <Image\n source={{ uri: imageUrl }}\n wrapperStyle={styles.imageWrapper}\n style={styles.image}\n alt={title}\n loaderSize={16}\n />\n )\n}\n\nfunction MessageAttachmentImage({\n attachment,\n}: {\n attachment: DenormalizedMessageAttachmentResource\n}) {\n const { url, urlMedium, filename, metadata = {} } = attachment.attributes\n const styles = useStyles({ imageWidth: metadata.width, imageHeight: metadata.height })\n\n return (\n <Image\n source={{ uri: urlMedium \|\| url }}\n style={styles.image}\n wrapperStyle={styles.imageWrapper}\n alt={filename}\n loaderSize={16}\n />\n )\n}\n\nfunction MessageAttachmentIcon({ iconName }: { iconName: IconProps['name'] }) {\n const styles = useStyles()\n return (\n <Icon\n name={iconName}\n style={styles.attachmentIcon}\n maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n />\n )\n}\n\n// TODO: The mine prop is not used yet, but in the future we will be adding a way to find the `mine` value for this fallback.\nfunction ShadowMessageFallback({ text, mine }: { text: string; mine?: boolean }) {\n const styles = useStyles({ mine })\n\n return (\n <View style={styles.message}>\n <View style={styles.messageContent}>\n <View style={styles.messageBubble}>\n <Text variant=\"footnote\" style={styles.messageText}>\n {text}\n </Text>\n </View>\n </View>\n </View>\n )\n}\n\ninterface StylesProps {\n imageWidth?: number\n imageHeight?: number\n mine?: boolean\n}\n\nconst useStyles = ({ mine, imageWidth = 32, imageHeight = 32 }: StylesProps = {}) => {\n const { colors } = useTheme()\n const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER })\n const { width } = useWindowDimensions()\n const tabletWidth = width >= 744 // Smallest iPad Mini's width\n\n return StyleSheet.create({\n message: {\n gap: 8,\n flexDirection: mine ? 'row-reverse' : 'row',\n paddingHorizontal: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,\n },\n messageContent: {\n flex: 1,\n gap: 4,\n marginBottom: 12,\n },\n avatarWrapper: {\n width: MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,\n alignItems: 'center',\n },\n avatar: {\n marginBottom: 8,\n opacity: 0.5,\n },\n messageBubble: {\n flexDirection: 'row',\n alignSelf: mine ? 'flex-end' : 'flex-start',\n alignItems: 'center',\n gap: 8,\n borderColor: colors.borderColorDefaultBase,\n borderWidth: 1,\n borderRadius: 8,\n maxWidth: tabletWidth ? 360 : '80%',\n paddingVertical: 6,\n paddingHorizontal: 8,\n },\n messageText: {\n color: colors.textColorDefaultPlaceholder,\n flexShrink: 1,\n },\n messageMeta: {\n flexDirection: 'row',\n justifyContent: mine ? 'flex-end' : 'flex-start',\n },\n replyCountText: {\n color: colors.interaction,\n fontWeight: platformFontWeightMedium,\n },\n imageWrapper: {\n width: 32 * fontScale,\n aspectRatio: imageWidth / imageHeight,\n opacity: 0.5,\n },\n image: {\n borderRadius: 4,\n },\n attachmentIcon: {\n color: colors.iconColorDefaultDim,\n fontSize: 16,\n },\n })\n}\n"]}
1	+ {"version":3,"file":"reply_shadow_message.js","sourceRoot":"","sources":["../../../src/components/conversation/reply_shadow_message.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { Pressable, StyleSheet, useWindowDimensions, View } from 'react-native'\nimport { Avatar, Icon, IconProps, Image, Text } from '../display'\nimport {\n useAnimatedMessageBackgroundColor,\n useFontScale,\n useScalableNumberOfLines,\n useTheme,\n} from '../../hooks'\nimport { MessageResource } from '../../types'\nimport {\n DenormalizedAttachmentResource,\n DenormalizedGiphyAttachmentResource,\n DenormalizedExpandedLinkAttachmentResource,\n DenormalizedMessageAttachmentResource,\n} from '../../types/resources/denormalized_attachment_resource'\nimport {\n CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,\n MAX_FONT_SIZE_MULTIPLIER,\n MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,\n platformFontWeightMedium,\n} from '../../utils/styles'\nimport Animated from 'react-native-reanimated'\nimport { TheirReplyConnector, MyReplyConnector } from './reply_connectors'\nimport { assertKeysAreNumbers, pluralize } from '../../utils'\nimport { useNavigation } from '@react-navigation/native'\nimport { useConversationMessage } from '../../hooks/use_conversation_message'\n\ninterface ReplyShadowMessageProps extends MessageResource {\n messageId: string\n conversation_id: number\n inReplyScreen?: boolean\n isReplyShadowMessage: boolean\n nextRendersAuthor: boolean\n}\n\nexport function ReplyShadowMessage({\n conversation_id,\n inReplyScreen,\n messageId,\n isReplyShadowMessage,\n nextRendersAuthor,\n}: ReplyShadowMessageProps) {\n const { message, isError, isLoading } = useConversationMessage({ conversation_id, messageId })\n\n if (inReplyScreen) return null\n if (isLoading) return <ShadowMessageFallback text=\"Loading...\" />\n if (isError \|\| !message) return <ShadowMessageFallback text=\"Message deleted\" />\n\n const enrichedMessage = {\n ...message,\n isReplyShadowMessage,\n nextRendersAuthor,\n }\n\n return <ShadowMessageContent conversation_id={conversation_id} {...enrichedMessage} />\n}\n\ninterface ShadowMessageContentProps extends MessageResource {\n conversation_id: number\n}\n\nfunction ShadowMessageContent({ conversation_id, ...message }: ShadowMessageContentProps) {\n const { text, deletedAt } = message\n const styles = useStyles(message)\n const { colors } = useTheme()\n const navigation = useNavigation()\n\n const [messageBubbleHeight, setMessageBubbleHeight] = React.useState(0)\n const { animatedBackgroundColor, handleMessagePressIn, handleMessagePressOut } =\n useAnimatedMessageBackgroundColor()\n const scalableNumberOfLines = useScalableNumberOfLines(2)\n const replyCountText = pluralize(message.replyCount, 'reply')\n const isDeleted = !!deletedAt\n const messageText = isDeleted ? 'Message deleted' : text\n\n const handleNavigateToReplies = () => {\n navigation.navigate('ConversationReply', {\n conversation_id,\n reply_root_id: message.replyRootId,\n reply_root_author_name: message.author.name,\n })\n }\n\n return (\n <Pressable\n android_ripple={{ color: colors.androidRippleNeutral }}\n onPress={handleNavigateToReplies}\n onPressIn={handleMessagePressIn}\n onPressOut={handleMessagePressOut}\n accessibilityHint=\"Navigate to reply screen for this message\"\n accessibilityRole=\"link\"\n >\n <Animated.View style={[styles.message, animatedBackgroundColor]}>\n {!message.mine && (\n <View>\n <View style={[styles.avatarWrapper, !isDeleted && styles.avatarOpacity]}>\n <Avatar\n size=\"xs\"\n sourceUri={message.author.avatar}\n style={styles.avatar}\n maxFontSizeMultiplier={1}\n fallbackIconName={isDeleted ? 'publishing.trash' : 'general.person'}\n showFallback={isDeleted}\n />\n </View>\n <TheirReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />\n </View>\n )}\n <View style={styles.messageContent}>\n <View\n style={styles.messageBubble}\n onLayout={e => setMessageBubbleHeight(e.nativeEvent.layout.height)}\n >\n <MessageAttachmentImagery attachments={message.attachments} />\n {text && (\n <Text\n variant=\"footnote\"\n style={styles.messageText}\n numberOfLines={scalableNumberOfLines}\n >\n {messageText}\n </Text>\n )}\n </View>\n <View style={styles.messageMeta}>\n <Text variant=\"footnote\" style={styles.replyCountText}>\n {replyCountText}\n </Text>\n </View>\n </View>\n {message.mine && (\n <MyReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />\n )}\n </Animated.View>\n </Pressable>\n )\n}\n\nfunction MessageAttachmentImagery({\n attachments,\n}: {\n attachments: DenormalizedAttachmentResource[]\n}) {\n if (!attachments \|\| attachments.length === 0) return null\n\n const attachment = attachments[0]\n\n if (attachment.type === 'giphy') {\n return <GiphyImage attachment={attachment} />\n }\n if (attachment.type === 'ExpandedLink') {\n return <ExpandedLinkImage attachment={attachment} />\n }\n if (attachment.type === 'MessageAttachment') {\n const contentType = attachment.attributes?.contentType\n const basicType = contentType?.split('/')[0]\n\n switch (basicType) {\n case 'image':\n return <MessageAttachmentImage attachment={attachment} />\n case 'video':\n return <MessageAttachmentIcon iconName=\"general.outlinedVideoFile\" />\n case 'audio':\n return <MessageAttachmentIcon iconName=\"general.outlinedMusicFile\" />\n case 'application':\n return <MessageAttachmentIcon iconName=\"general.outlinedGenericFile\" />\n default:\n return null\n }\n }\n\n return null\n}\n\nfunction GiphyImage({ attachment }: { attachment: DenormalizedGiphyAttachmentResource }) {\n const { title, giphy } = attachment\n const { url } = giphy.fixedWidth\n const { width, height } = assertKeysAreNumbers(giphy.fixedWidth)\n const styles = useStyles({ imageWidth: width, imageHeight: height })\n\n return (\n <Image\n source={{ uri: url }}\n wrapperStyle={styles.imageWrapper}\n style={styles.image}\n alt={title}\n loaderSize={16}\n />\n )\n}\n\nfunction ExpandedLinkImage({\n attachment,\n}: {\n attachment: DenormalizedExpandedLinkAttachmentResource\n}) {\n const { title = '', imageUrl, imageHeight, imageWidth } = attachment.attributes\n const styles = useStyles({ imageWidth, imageHeight })\n\n return (\n <Image\n source={{ uri: imageUrl }}\n wrapperStyle={styles.imageWrapper}\n style={styles.image}\n alt={title}\n loaderSize={16}\n />\n )\n}\n\nfunction MessageAttachmentImage({\n attachment,\n}: {\n attachment: DenormalizedMessageAttachmentResource\n}) {\n const { url, urlMedium, filename, metadata = {} } = attachment.attributes\n const styles = useStyles({ imageWidth: metadata.width, imageHeight: metadata.height })\n\n return (\n <Image\n source={{ uri: urlMedium \|\| url }}\n style={styles.image}\n wrapperStyle={styles.imageWrapper}\n alt={filename}\n loaderSize={16}\n />\n )\n}\n\nfunction MessageAttachmentIcon({ iconName }: { iconName: IconProps['name'] }) {\n const styles = useStyles()\n return (\n <Icon\n name={iconName}\n style={styles.attachmentIcon}\n maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER}\n />\n )\n}\n\n// TODO: The mine prop is not used yet, but in the future we will be adding a way to find the `mine` value for this fallback.\nfunction ShadowMessageFallback({ text, mine }: { text: string; mine?: boolean }) {\n const styles = useStyles({ mine })\n\n return (\n <View style={styles.message}>\n <View style={styles.messageContent}>\n <View style={styles.messageBubble}>\n <Text variant=\"footnote\" style={styles.messageText}>\n {text}\n </Text>\n </View>\n </View>\n </View>\n )\n}\n\ninterface StylesProps {\n imageWidth?: number\n imageHeight?: number\n mine?: boolean\n}\n\nconst useStyles = ({ mine, imageWidth = 32, imageHeight = 32 }: StylesProps = {}) => {\n const { colors } = useTheme()\n const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER })\n const { width } = useWindowDimensions()\n const tabletWidth = width >= 744 // Smallest iPad Mini's width\n\n return StyleSheet.create({\n message: {\n gap: 8,\n flexDirection: mine ? 'row-reverse' : 'row',\n paddingHorizontal: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,\n },\n messageContent: {\n flex: 1,\n gap: 4,\n marginBottom: 12,\n },\n avatarWrapper: {\n width: MESSAGE_AUTHOR_AVATAR_COLUMN_WIDTH,\n alignItems: 'center',\n },\n avatar: {\n marginBottom: 8,\n },\n avatarOpacity: {\n opacity: 0.5,\n },\n messageBubble: {\n flexDirection: 'row',\n alignSelf: mine ? 'flex-end' : 'flex-start',\n alignItems: 'center',\n gap: 8,\n borderColor: colors.borderColorDefaultBase,\n borderWidth: 1,\n borderRadius: 8,\n maxWidth: tabletWidth ? 360 : '80%',\n paddingVertical: 6,\n paddingHorizontal: 8,\n },\n messageText: {\n color: colors.textColorDefaultPlaceholder,\n flexShrink: 1,\n },\n messageMeta: {\n flexDirection: 'row',\n justifyContent: mine ? 'flex-end' : 'flex-start',\n },\n replyCountText: {\n color: colors.interaction,\n fontWeight: platformFontWeightMedium,\n },\n imageWrapper: {\n width: 32 * fontScale,\n aspectRatio: imageWidth / imageHeight,\n opacity: 0.5,\n },\n image: {\n borderRadius: 4,\n },\n attachmentIcon: {\n color: colors.iconColorDefaultDim,\n fontSize: 16,\n },\n })\n}\n"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.17.3-rc.0",
+  "version": "3.18.0-rc.0",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -59,5 +59,5 @@
     "react-native-url-polyfill": "^2.0.0",
     "typescript": "<5.6.0"
   },
-  "gitHead": "aad447b4fb480ce51e039290bf9e546a60411c29"
+  "gitHead": "287575911f3f115e39925babf52624759860167a"
 }

package/src/components/conversation/message.tsx CHANGED Viewed

@@ -66,10 +66,31 @@ export function Message({
     enabled: !!message.replyRootId,
   })
+  const metaProps = {
+    authorName: message.author.name,
+    createdAt: message.createdAt,
+  }
+  const renderAuthor = (!message.mine && message.renderAuthor) || false
+  const showReplyCountButton =
+    !inReplyScreen && message.replyRootId === message.id && REPLIES_FEATURE_ENABLED
+  const isReplyRootMessage = message.replyRootId === message.id
+  const isDeletedReplyRootMessage = isReplyRootMessage && !!message.deletedAt
+  const messageText = isDeletedReplyRootMessage ? 'Message deleted' : text
+  const replyCountText = pluralize(message.replyCount, 'reply')
+  const messagePendingLabel = isPersisted ? 'Saving' : 'Sending'
   const replyRootAuthorName = message.replyRootId
     ? replyRootMessage?.author.name
     : message.author.name
+  const messageBottomMargin =
+    message.lastInGroup || message.nextIsReplyShadowMessage
+      ? 16
+      : hasReactions || showMessageMeta || showReplyCountButton
+        ? 8
+        : 4
   useEffect(() => {
     if (pending) {
       const timer = setTimeout(() => {
@@ -135,23 +156,6 @@ export function Message({
     })
   }
-  const metaProps = {
-    authorName: message.author.name,
-    createdAt: message.createdAt,
-  }
-  const renderAuthor = (!message.mine && message.renderAuthor) || false
-  const messagePendingLabel = isPersisted ? 'Saving' : 'Sending'
-  const showReplyCountButton =
-    !inReplyScreen && message.replyRootId === message.id && REPLIES_FEATURE_ENABLED
-  const replyCountText = pluralize(message.replyCount, 'reply')
-  const messageBottomMargin =
-    message.lastInGroup || message.nextIsReplyShadowMessage
-      ? 16
-      : hasReactions || showMessageMeta || showReplyCountButton
-        ? 8
-        : 4
   return (
     <Pressable
       onLongPress={handleMessageLongPress}
@@ -171,6 +175,8 @@ export function Message({
                 style={styles.avatar}
                 maxFontSizeMultiplier={1}
                 minFontSizeMultiplier={1}
+                fallbackIconName={isDeletedReplyRootMessage ? 'publishing.trash' : 'general.person'}
+                showFallback={isDeletedReplyRootMessage}
               />
             ) : (
               <View style={styles.avatarPlaceholder} />
@@ -196,9 +202,9 @@ export function Message({
                 onMessageLongPress={handleMessageLongPress}
               />
             </ErrorBoundary>
-            {text && (
+            {messageText && (
               <View style={styles.messageText}>
-                <MessageMarkdown text={text} />
+                <MessageMarkdown text={messageText} />
               </View>
             )}
           </View>

package/src/components/conversation/reply_connectors.tsx CHANGED Viewed

@@ -108,22 +108,74 @@ function VerticalLineConnector({ style }: { style?: ViewStyle }) {
 function LongHeadCurveConnector({ height, style }: { height: number; style?: ViewStyle }) {
   const styles = useStyles()
-  return <View style={[styles.longHeadCurveConnector, { height, marginTop: height }, style]} />
+  const { colors } = useTheme()
+  return (
+    <View style={[styles.longHeadCurveConnector, { marginTop: height }, style]}>
+      <Svg width={MY_REPLY_CONNECTOR_WIDTH} height={18} fill="none">
+        <Path
+          d="M 2 18 L 2 16 A 14 14 0 0 1 16 2 L 38 2"
+          stroke={colors.borderColorDefaultBase}
+          strokeWidth={CONNECTOR_BORDER_WIDTH}
+        />
+      </Svg>
+      <View style={styles.svgConnnectorVerticalLineTail} />
+    </View>
+  )
 }
 function LongTailCurveConnector({ height, style }: { height: number; style?: ViewStyle }) {
   const styles = useStyles()
-  return <View style={[styles.longTailCurveConnector, { height }, style]} />
+  const { colors } = useTheme()
+  return (
+    <View style={[{ height }, style]}>
+      <View style={styles.svgConnnectorVerticalLineHead} />
+      <Svg width={MY_REPLY_CONNECTOR_WIDTH} height={18} fill="none">
+        <Path
+          d="M 2 0 L 2 2 A 14 14 0 0 0 16 16 L 38 16"
+          stroke={colors.borderColorDefaultBase}
+          strokeWidth={CONNECTOR_BORDER_WIDTH}
+        />
+      </Svg>
+    </View>
+  )
 }
 function ShortHeadCurveConnector({ height }: { height: number }) {
   const styles = useStyles()
-  return <View style={[styles.shortHeadCurveConnector, { marginTop: height }]} />
+  const { colors } = useTheme()
+  return (
+    <View style={[styles.shortHeadCurveConnector, { marginTop: height }]}>
+      <Svg width={20} height={18} fill="none">
+        <Path
+          d="M 2 18 L 2 16 A 14 14 0 0 1 16 2 L 20 2"
+          stroke={colors.borderColorDefaultBase}
+          strokeWidth={CONNECTOR_BORDER_WIDTH}
+        />
+      </Svg>
+      <View style={styles.svgConnnectorVerticalLineTail} />
+    </View>
+  )
 }
 function ShortTailCurveConnector({ height }: { height: number }) {
   const styles = useStyles()
-  return <View style={[styles.shortTailCurveConnector, { height }]} />
+  const { colors } = useTheme()
+  return (
+    <View style={{ height }}>
+      <View style={styles.svgConnnectorVerticalLineHead} />
+      <Svg width={20} height={18} fill="none">
+        <Path
+          d="M 2 0 L 2 2 A 14 14 0 0 0 16 16 L 20 16"
+          stroke={colors.borderColorDefaultBase}
+          strokeWidth={CONNECTOR_BORDER_WIDTH}
+        />
+      </Svg>
+    </View>
+  )
 }
 function SwirlConnector({ style, height }: { style?: ViewStyle; height: number }) {
@@ -133,7 +185,7 @@ function SwirlConnector({ style, height }: { style?: ViewStyle; height: number }
   return (
     <View style={[styles.swirlConnectorContainer, style]}>
       <View style={{ height }}>
-        <View style={styles.swirlConnectorVerticalLineHead} />
+        <View style={styles.svgConnnectorVerticalLineHead} />
         <Svg width={27} height={34} fill="none">
           <Path
             stroke={colors.borderColorDefaultBase}
@@ -141,9 +193,9 @@ function SwirlConnector({ style, height }: { style?: ViewStyle; height: number }
             d="M2.07 34c0-6.142 1.201-12.283 3.343-17m0 0c2.305-5.075 5.699-8.5 9.857-8.5 4.86 0 8.8 3.806 8.8 8.5s-3.94 8.5-8.8 8.5c-4.158 0-7.552-3.425-9.857-8.5zm0 0C3.271 12.283 2.07 6.142 2.07 0"
           />
         </Svg>
-        <View style={styles.swirlConnectorVerticalLineTail} />
+        <View style={styles.svgConnnectorVerticalLineTail} />
       </View>
-      <View style={styles.swirlConnectorVerticalLineTail} />
+      <View style={styles.svgConnnectorVerticalLineTail} />
     </View>
   )
 }
@@ -197,43 +249,21 @@ const useStyles = () => {
       borderLeftColor: borderColor,
     },
     longHeadCurveConnector: {
-      width: MY_REPLY_CONNECTOR_WIDTH,
-      borderColor: borderColor,
-      borderLeftWidth: CONNECTOR_BORDER_WIDTH,
-      borderTopWidth: CONNECTOR_BORDER_WIDTH,
-      borderTopLeftRadius: 16,
       flex: 1,
     },
-    longTailCurveConnector: {
-      width: MY_REPLY_CONNECTOR_WIDTH,
-      borderColor: borderColor,
-      borderLeftWidth: CONNECTOR_BORDER_WIDTH,
-      borderBottomWidth: CONNECTOR_BORDER_WIDTH,
-      borderBottomLeftRadius: 16,
-    },
     shortHeadCurveConnector: {
-      borderColor: borderColor,
-      borderLeftWidth: CONNECTOR_BORDER_WIDTH,
-      borderTopWidth: CONNECTOR_BORDER_WIDTH,
-      borderTopLeftRadius: 16,
       flex: 1,
     },
-    shortTailCurveConnector: {
-      borderColor: borderColor,
-      borderLeftWidth: CONNECTOR_BORDER_WIDTH,
-      borderBottomWidth: CONNECTOR_BORDER_WIDTH,
-      borderBottomLeftRadius: 16,
-    },
     swirlConnectorContainer: {
       flex: 1,
     },
-    swirlConnectorVerticalLineHead: {
+    svgConnnectorVerticalLineHead: {
       backgroundColor: borderColor,
       width: CONNECTOR_BORDER_WIDTH,
       flex: 1,
       marginBottom: -1, // Ensures there is no gap between the vertical line and the swirl connector
     },
-    swirlConnectorVerticalLineTail: {
+    svgConnnectorVerticalLineTail: {
       backgroundColor: borderColor,
       width: CONNECTOR_BORDER_WIDTH,
       flex: 1,

package/src/components/conversation/reply_shadow_message.tsx CHANGED Viewed

@@ -45,7 +45,7 @@ export function ReplyShadowMessage({
   if (inReplyScreen) return null
   if (isLoading) return <ShadowMessageFallback text="Loading..." />
-  if (isError || !message) return <ShadowMessageFallback text="Message not found" />
+  if (isError || !message) return <ShadowMessageFallback text="Message deleted" />
   const enrichedMessage = {
     ...message,
@@ -61,7 +61,7 @@ interface ShadowMessageContentProps extends MessageResource {
 }
 function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageContentProps) {
-  const { text } = message
+  const { text, deletedAt } = message
   const styles = useStyles(message)
   const { colors } = useTheme()
   const navigation = useNavigation()
@@ -71,6 +71,8 @@ function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageCont
     useAnimatedMessageBackgroundColor()
   const scalableNumberOfLines = useScalableNumberOfLines(2)
   const replyCountText = pluralize(message.replyCount, 'reply')
+  const isDeleted = !!deletedAt
+  const messageText = isDeleted ? 'Message deleted' : text
   const handleNavigateToReplies = () => {
     navigation.navigate('ConversationReply', {
@@ -92,12 +94,14 @@ function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageCont
       <Animated.View style={[styles.message, animatedBackgroundColor]}>
         {!message.mine && (
           <View>
-            <View style={styles.avatarWrapper}>
+            <View style={[styles.avatarWrapper, !isDeleted && styles.avatarOpacity]}>
               <Avatar
                 size="xs"
                 sourceUri={message.author.avatar}
                 style={styles.avatar}
                 maxFontSizeMultiplier={1}
+                fallbackIconName={isDeleted ? 'publishing.trash' : 'general.person'}
+                showFallback={isDeleted}
               />
             </View>
             <TheirReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />
@@ -115,7 +119,7 @@ function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageCont
                 style={styles.messageText}
                 numberOfLines={scalableNumberOfLines}
               >
-                {text}
+                {messageText}
               </Text>
             )}
           </View>
@@ -281,6 +285,8 @@ const useStyles = ({ mine, imageWidth = 32, imageHeight = 32 }: StylesProps = {}
     },
     avatar: {
       marginBottom: 8,
+    },
+    avatarOpacity: {
       opacity: 0.5,
     },
     messageBubble: {