@planningcenter/chat-react-native 3.42.2-qa-821.0 → 3.42.2-qa-staging.3

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

@@ -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 { useNavigation } from '@react-navigation/native'\nimport { some } from 'lodash'\nimport React from 'react'\nimport { Pressable, StyleSheet, useWindowDimensions, View } from 'react-native'\nimport Animated from 'react-native-reanimated'\nimport {\n  useAnimatedMessageBackgroundColor,\n  useFontScale,\n  useScalableNumberOfLines,\n  useTheme,\n} from '../../hooks'\nimport { useConversationMessage } from '../../hooks/use_conversation_message'\nimport { useLiveRelativeTime } from '../../hooks/use_live_relative_time'\nimport { MessageResource } from '../../types'\nimport {\n  DenormalizedAttachmentResource,\n  DenormalizedGiphyAttachmentResource,\n  DenormalizedExpandedLinkAttachmentResource,\n  DenormalizedMessageAttachmentResource,\n} from '../../types/resources/denormalized_attachment_resource'\nimport { assertKeysAreNumbers, pluralize } from '../../utils'\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 { Avatar, Icon, IconProps, Image, Text } from '../display'\nimport { TheirReplyConnector, MyReplyConnector } from './reply_connectors'\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, author, attachments } = message\n  const styles = useStyles(message)\n  const { colors } = useTheme()\n  const navigation = useNavigation()\n  const timestamp = useLiveRelativeTime(message.createdAt)\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  const attachmentLabel = some(attachments) ? pluralize(attachments.length, 'attachment') : ''\n  const accessibilityLabel = `${author?.name || ''} Reply Preview ${attachmentLabel} ${\n    messageText || ''\n  } ${timestamp} ${replyCountText}`\n\n  return (\n    <Pressable\n      android_ripple={{ color: colors.androidRippleNeutral }}\n      onPress={handleNavigateToReplies}\n      onPressIn={handleMessagePressIn}\n      onPressOut={handleMessagePressOut}\n      accessibilityLabel={accessibilityLabel}\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={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"]}
+{"version":3,"file":"reply_shadow_message.js","sourceRoot":"","sources":["../../../src/components/conversation/reply_shadow_message.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAC7B,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,mBAAmB,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC/E,OAAO,QAAQ,MAAM,yBAAyB,CAAA;AAC9C,OAAO,EACL,iCAAiC,EACjC,YAAY,EACZ,wBAAwB,EACxB,QAAQ,GACT,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAA;AAC7E,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAA;AAQxE,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAC7D,OAAO,EACL,4CAA4C,EAC5C,wBAAwB,EACxB,kCAAkC,EAClC,wBAAwB,GACzB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,MAAM,EAAE,IAAI,EAAa,KAAK,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjE,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAU1E,MAAM,UAAU,kBAAkB,CAAC,EACjC,eAAe,EACf,aAAa,EACb,SAAS,EACT,oBAAoB,EACpB,iBAAiB,GACO;IACxB,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,sBAAsB,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,CAAA;IAE9F,IAAI,aAAa;QAAE,OAAO,IAAI,CAAA;IAC9B,IAAI,SAAS;QAAE,OAAO,CAAC,qBAAqB,CAAC,IAAI,CAAC,YAAY,EAAG,CAAA;IACjE,IAAI,OAAO,IAAI,CAAC,OAAO;QAAE,OAAO,CAAC,qBAAqB,CAAC,IAAI,CAAC,iBAAiB,EAAG,CAAA;IAEhF,MAAM,eAAe,GAAG;QACtB,GAAG,OAAO;QACV,oBAAoB;QACpB,iBAAiB;KAClB,CAAA;IAED,OAAO,CAAC,oBAAoB,CAAC,eAAe,CAAC,CAAC,eAAe,CAAC,CAAC,IAAI,eAAe,CAAC,EAAG,CAAA;AACxF,CAAC;AAMD,SAAS,oBAAoB,CAAC,EAAE,eAAe,EAAE,GAAG,OAAO,EAA6B;IACtF,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,OAAO,CAAA;IACxD,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC,CAAA;IACjC,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,MAAM,SAAS,GAAG,mBAAmB,CAAC,OAAO,CAAC,SAAS,CAAC,CAAA;IAExD,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;IACvE,MAAM,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,qBAAqB,EAAE,GAC5E,iCAAiC,EAAE,CAAA;IACrC,MAAM,qBAAqB,GAAG,wBAAwB,CAAC,CAAC,CAAC,CAAA;IACzD,MAAM,cAAc,GAAG,SAAS,CAAC,OAAO,CAAC,UAAU,EAAE,OAAO,CAAC,CAAA;IAC7D,MAAM,SAAS,GAAG,CAAC,CAAC,SAAS,CAAA;IAC7B,MAAM,WAAW,GAAG,SAAS,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAA;IAExD,MAAM,uBAAuB,GAAG,GAAG,EAAE;QACnC,UAAU,CAAC,QAAQ,CAAC,mBAAmB,EAAE;YACvC,eAAe;YACf,aAAa,EAAE,OAAO,CAAC,WAAW;YAClC,sBAAsB,EAAE,OAAO,CAAC,MAAM,CAAC,IAAI;SAC5C,CAAC,CAAA;IACJ,CAAC,CAAA;IAED,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;IAC5F,MAAM,kBAAkB,GAAG,GAAG,MAAM,EAAE,IAAI,IAAI,EAAE,kBAAkB,eAAe,IAC/E,WAAW,IAAI,EACjB,IAAI,SAAS,IAAI,cAAc,EAAE,CAAA;IAEjC,OAAO,CACL,CAAC,SAAS,CACR,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,oBAAoB,EAAE,CAAC,CACvD,OAAO,CAAC,CAAC,uBAAuB,CAAC,CACjC,SAAS,CAAC,CAAC,oBAAoB,CAAC,CAChC,UAAU,CAAC,CAAC,qBAAqB,CAAC,CAClC,kBAAkB,CAAC,CAAC,kBAAkB,CAAC,CACvC,iBAAiB,CAAC,2CAA2C,CAC7D,iBAAiB,CAAC,MAAM,CAExB;MAAA,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,uBAAuB,CAAC,CAAC,CAC9D;QAAA,CAAC,CAAC,OAAO,CAAC,IAAI,IAAI,CAChB,CAAC,IAAI,CACH;YAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC,SAAS,IAAI,MAAM,CAAC,aAAa,CAAC,CAAC,CACtE;cAAA,CAAC,MAAM,CACL,IAAI,CAAC,IAAI,CACT,SAAS,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,CACjC,KAAK,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CACrB,qBAAqB,CAAC,CAAC,CAAC,CAAC,CACzB,gBAAgB,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CACpE,YAAY,CAAC,CAAC,SAAS,CAAC,EAE5B;YAAA,EAAE,IAAI,CACN;YAAA,CAAC,mBAAmB,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,mBAAmB,CAAC,CAAC,mBAAmB,CAAC,EAClF;UAAA,EAAE,IAAI,CAAC,CACR,CACD;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CACjC;UAAA,CAAC,IAAI,CACH,KAAK,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAC5B,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,sBAAsB,CAAC,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAEnE;YAAA,CAAC,wBAAwB,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,EACnD;YAAA,CAAC,IAAI,IAAI,CACP,CAAC,IAAI,CACH,OAAO,CAAC,UAAU,CAClB,KAAK,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAC1B,aAAa,CAAC,CAAC,qBAAqB,CAAC,CAErC;gBAAA,CAAC,WAAW,CACd;cAAA,EAAE,IAAI,CAAC,CACR,CACH;UAAA,EAAE,IAAI,CACN;UAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAC9B;YAAA,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CACpD;cAAA,CAAC,cAAc,CACjB;YAAA,EAAE,IAAI,CACR;UAAA,EAAE,IAAI,CACR;QAAA,EAAE,IAAI,CACN;QAAA,CAAC,OAAO,CAAC,IAAI,IAAI,CACf,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,mBAAmB,CAAC,CAAC,mBAAmB,CAAC,EAAG,CACjF,CACH;MAAA,EAAE,QAAQ,CAAC,IAAI,CACjB;IAAA,EAAE,SAAS,CAAC,CACb,CAAA;AACH,CAAC;AAED,SAAS,wBAAwB,CAAC,EAChC,WAAW,GAGZ;IACC,IAAI,CAAC,WAAW,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA;IAEzD,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,CAAC,CAAA;IAEjC,IAAI,UAAU,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;QAChC,OAAO,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,EAAG,CAAA;IAC/C,CAAC;IACD,IAAI,UAAU,CAAC,IAAI,KAAK,cAAc,EAAE,CAAC;QACvC,OAAO,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,EAAG,CAAA;IACtD,CAAC;IACD,IAAI,UAAU,CAAC,IAAI,KAAK,mBAAmB,EAAE,CAAC;QAC5C,MAAM,WAAW,GAAG,UAAU,CAAC,UAAU,EAAE,WAAW,CAAA;QACtD,MAAM,SAAS,GAAG,WAAW,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAA;QAE5C,QAAQ,SAAS,EAAE,CAAC;YAClB,KAAK,OAAO;gBACV,OAAO,CAAC,sBAAsB,CAAC,UAAU,CAAC,CAAC,UAAU,CAAC,EAAG,CAAA;YAC3D,KAAK,OAAO;gBACV,OAAO,CAAC,qBAAqB,CAAC,QAAQ,CAAC,2BAA2B,EAAG,CAAA;YACvE,KAAK,OAAO;gBACV,OAAO,CAAC,qBAAqB,CAAC,QAAQ,CAAC,2BAA2B,EAAG,CAAA;YACvE,KAAK,aAAa;gBAChB,OAAO,CAAC,qBAAqB,CAAC,QAAQ,CAAC,6BAA6B,EAAG,CAAA;YACzE;gBACE,OAAO,IAAI,CAAA;QACf,CAAC;IACH,CAAC;IAED,OAAO,IAAI,CAAA;AACb,CAAC;AAED,SAAS,UAAU,CAAC,EAAE,UAAU,EAAuD;IACrF,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,UAAU,CAAA;IACnC,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC,UAAU,CAAA;IAChC,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,oBAAoB,CAAC,KAAK,CAAC,UAAU,CAAC,CAAA;IAChE,MAAM,MAAM,GAAG,SAAS,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,CAAA;IAEpE,OAAO,CACL,CAAC,KAAK,CACJ,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC,CACrB,YAAY,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAClC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CACpB,GAAG,CAAC,CAAC,KAAK,CAAC,CACX,UAAU,CAAC,CAAC,EAAE,CAAC,EACf,CACH,CAAA;AACH,CAAC;AAED,SAAS,iBAAiB,CAAC,EACzB,UAAU,GAGX;IACC,MAAM,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,UAAU,CAAA;IAC/E,MAAM,MAAM,GAAG,SAAS,CAAC,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC,CAAA;IAErD,OAAO,CACL,CAAC,KAAK,CACJ,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,CAC1B,YAAY,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAClC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CACpB,GAAG,CAAC,CAAC,KAAK,CAAC,CACX,UAAU,CAAC,CAAC,EAAE,CAAC,EACf,CACH,CAAA;AACH,CAAC;AAED,SAAS,sBAAsB,CAAC,EAC9B,UAAU,GAGX;IACC,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,GAAG,EAAE,EAAE,GAAG,UAAU,CAAC,UAAU,CAAA;IACzE,MAAM,MAAM,GAAG,SAAS,CAAC,EAAE,UAAU,EAAE,QAAQ,CAAC,KAAK,EAAE,WAAW,EAAE,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAA;IAEtF,OAAO,CACL,CAAC,KAAK,CACJ,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,SAAS,IAAI,GAAG,EAAE,CAAC,CAClC,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CACpB,YAAY,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAClC,GAAG,CAAC,CAAC,QAAQ,CAAC,CACd,UAAU,CAAC,CAAC,EAAE,CAAC,EACf,CACH,CAAA;AACH,CAAC;AAED,SAAS,qBAAqB,CAAC,EAAE,QAAQ,EAAmC;IAC1E,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,OAAO,CACL,CAAC,IAAI,CACH,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,KAAK,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAC7B,qBAAqB,CAAC,CAAC,wBAAwB,CAAC,EAChD,CACH,CAAA;AACH,CAAC;AAED,6HAA6H;AAC7H,SAAS,qBAAqB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAoC;IAC7E,MAAM,MAAM,GAAG,SAAS,CAAC,EAAE,IAAI,EAAE,CAAC,CAAA;IAElC,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAC1B;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CACjC;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,CAChC;UAAA,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CACjD;YAAA,CAAC,IAAI,CACP;UAAA,EAAE,IAAI,CACR;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAQD,MAAM,SAAS,GAAG,CAAC,EAAE,IAAI,EAAE,UAAU,GAAG,EAAE,EAAE,WAAW,GAAG,EAAE,KAAkB,EAAE,EAAE,EAAE;IAClF,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,MAAM,SAAS,GAAG,YAAY,CAAC,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,CAAC,CAAA;IACnF,MAAM,EAAE,KAAK,EAAE,GAAG,mBAAmB,EAAE,CAAA;IACvC,MAAM,WAAW,GAAG,KAAK,IAAI,GAAG,CAAA,CAAC,6BAA6B;IAE9D,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,OAAO,EAAE;YACP,GAAG,EAAE,CAAC;YACN,aAAa,EAAE,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK;YAC3C,iBAAiB,EAAE,4CAA4C;SAChE;QACD,cAAc,EAAE;YACd,IAAI,EAAE,CAAC;YACP,GAAG,EAAE,CAAC;YACN,YAAY,EAAE,EAAE;SACjB;QACD,aAAa,EAAE;YACb,KAAK,EAAE,kCAAkC;YACzC,UAAU,EAAE,QAAQ;SACrB;QACD,MAAM,EAAE;YACN,YAAY,EAAE,CAAC;SAChB;QACD,aAAa,EAAE;YACb,OAAO,EAAE,GAAG;SACb;QACD,aAAa,EAAE;YACb,aAAa,EAAE,KAAK;YACpB,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY;YAC3C,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,CAAC;YACN,WAAW,EAAE,MAAM,CAAC,sBAAsB;YAC1C,WAAW,EAAE,CAAC;YACd,YAAY,EAAE,CAAC;YACf,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK;YACnC,eAAe,EAAE,CAAC;YAClB,iBAAiB,EAAE,CAAC;SACrB;QACD,WAAW,EAAE;YACX,KAAK,EAAE,MAAM,CAAC,2BAA2B;YACzC,UAAU,EAAE,CAAC;SACd;QACD,WAAW,EAAE;YACX,aAAa,EAAE,KAAK;YACpB,cAAc,EAAE,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY;SACjD;QACD,cAAc,EAAE;YACd,KAAK,EAAE,MAAM,CAAC,WAAW;YACzB,UAAU,EAAE,wBAAwB;SACrC;QACD,YAAY,EAAE;YACZ,KAAK,EAAE,EAAE,GAAG,SAAS;YACrB,WAAW,EAAE,UAAU,GAAG,WAAW;YACrC,OAAO,EAAE,GAAG;SACb;QACD,KAAK,EAAE;YACL,YAAY,EAAE,CAAC;SAChB;QACD,cAAc,EAAE;YACd,KAAK,EAAE,MAAM,CAAC,mBAAmB;YACjC,QAAQ,EAAE,EAAE;SACb;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import { useNavigation } from '@react-navigation/native'\nimport { some } from 'lodash'\nimport React from 'react'\nimport { Pressable, StyleSheet, useWindowDimensions, View } from 'react-native'\nimport Animated from 'react-native-reanimated'\nimport {\n  useAnimatedMessageBackgroundColor,\n  useFontScale,\n  useScalableNumberOfLines,\n  useTheme,\n} from '../../hooks'\nimport { useConversationMessage } from '../../hooks/use_conversation_message'\nimport { useLiveRelativeTime } from '../../hooks/use_live_relative_time'\nimport { MessageResource } from '../../types'\nimport {\n  DenormalizedAttachmentResource,\n  DenormalizedGiphyAttachmentResource,\n  DenormalizedExpandedLinkAttachmentResource,\n  DenormalizedMessageAttachmentResource,\n} from '../../types/resources/denormalized_attachment_resource'\nimport { assertKeysAreNumbers, pluralize } from '../../utils'\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 { Avatar, Icon, IconProps, Image, Text } from '../display'\nimport { TheirReplyConnector, MyReplyConnector } from './reply_connectors'\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, author, attachments } = message\n  const styles = useStyles(message)\n  const { colors } = useTheme()\n  const navigation = useNavigation()\n  const timestamp = useLiveRelativeTime(message.createdAt)\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  const attachmentLabel = some(attachments) ? pluralize(attachments.length, 'attachment') : ''\n  const accessibilityLabel = `${author?.name || ''} Reply Preview ${attachmentLabel} ${\n    messageText || ''\n  } ${timestamp} ${replyCountText}`\n\n  return (\n    <Pressable\n      android_ripple={{ color: colors.androidRippleNeutral }}\n      onPress={handleNavigateToReplies}\n      onPressIn={handleMessagePressIn}\n      onPressOut={handleMessagePressOut}\n      accessibilityLabel={accessibilityLabel}\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={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/build/components/conversation/system_message.d.ts

@@ -1,8 +1,9 @@
+import React from 'react';
 import { SystemMessageResource } from '../../utils/system_messages';
 interface SystemMessageProps {
     message: SystemMessageResource;
     conversationId: number;
 }
-export declare function SystemMessage({ message, conversationId }: SystemMessageProps): import("react/jsx-runtime").JSX.Element;
+export declare function SystemMessage({ message, conversationId }: SystemMessageProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=system_message.d.ts.map

package/build/components/conversation/system_message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"system_message.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/system_message.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAA;AAInE,UAAU,kBAAkB;IAC1B,OAAO,EAAE,qBAAqB,CAAA;IAC9B,cAAc,EAAE,MAAM,CAAA;CACvB;AAED,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,kBAAkB,2CAuE5E"}
+{"version":3,"file":"system_message.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/system_message.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAA;AAInE,UAAU,kBAAkB;IAC1B,OAAO,EAAE,qBAAqB,CAAA;IAC9B,cAAc,EAAE,MAAM,CAAA;CACvB;AAED,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,EAAE,kBAAkB,qBAuE5E"}

package/build/components/conversation/system_message.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useNavigation } from '@react-navigation/native';
+import React from 'react';
 import { Pressable, StyleSheet, View } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { useAnimatedMessageBackgroundColor, useTheme } from '../../hooks';
@@ -38,9 +38,18 @@ export function SystemMessage({ message, conversationId }) {
             reaction_value: reaction.value,
         });
     };
-    return (_jsx(Pressable, { onPress: hasPeople ? handlePress : undefined, onLongPress: handleLongPress, onPressIn: handleMessagePressIn, onPressOut: handleMessagePressOut, android_ripple: { color: colors.androidRippleNeutral, borderless: false, foreground: true }, accessibilityRole: "button", accessibilityHint: hasPeople
+    return (<Pressable onPress={hasPeople ? handlePress : undefined} onLongPress={handleLongPress} onPressIn={handleMessagePressIn} onPressOut={handleMessagePressOut} android_ripple={{ color: colors.androidRippleNeutral, borderless: false, foreground: true }} accessibilityRole="button" accessibilityHint={hasPeople
             ? 'Tap to see people. Long press for message actions.'
-            : 'Long press for message actions.', children: _jsxs(Animated.View, { style: [styles.container, animatedBackgroundColor], children: [_jsx(Text, { variant: "tertiary", style: styles.text, children: text }), hasReactions && (_jsx(View, { style: styles.reactions, children: message.reactionCounts.map(reaction => (_jsx(MessageReaction, { reaction: reaction, onLongPress: handleReactionLongPress, message: message, conversationId: conversationId }, reaction.value))) }))] }) }));
+            : 'Long press for message actions.'}>
+      <Animated.View style={[styles.container, animatedBackgroundColor]}>
+        <Text variant="tertiary" style={styles.text}>
+          {text}
+        </Text>
+        {hasReactions && (<View style={styles.reactions}>
+            {message.reactionCounts.map(reaction => (<MessageReaction key={reaction.value} reaction={reaction} onLongPress={handleReactionLongPress} message={message} conversationId={conversationId}/>))}
+          </View>)}
+      </Animated.View>
+    </Pressable>);
 }
 function systemMessageText(names, overflowCount, action) {
     if (overflowCount > 0) {

package/build/components/conversation/system_message.js.map

@@ -1 +1 @@
-{"version":3,"file":"system_message.js","sourceRoot":"","sources":["../../../src/components/conversation/system_message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useNavigation } from '@react-navigation/native'\nimport React from 'react'\nimport { Pressable, StyleSheet, View } from 'react-native'\nimport Animated from 'react-native-reanimated'\nimport { useAnimatedMessageBackgroundColor, useTheme } from '../../hooks'\nimport { ReactionCountResource } from '../../types/resources/reaction'\nimport { Haptic } from '../../utils/native_adapters'\nimport { SystemMessageResource } from '../../utils/system_messages'\nimport { Text } from '../display'\nimport { MessageReaction } from './message_reaction'\n\ninterface SystemMessageProps {\n  message: SystemMessageResource\n  conversationId: number\n}\n\nexport function SystemMessage({ message, conversationId }: SystemMessageProps) {\n  const { reactionCounts, systemTextParts, personIdsForSystemEvent } = message\n  const { names, overflowCount, action } = systemTextParts\n  const styles = useStyles()\n  const navigation = useNavigation()\n  const { colors } = useTheme()\n  const text = systemMessageText(names, overflowCount, action)\n  const hasPeople = personIdsForSystemEvent.length > 0\n  const hasReactions = reactionCounts.length > 0\n  const { animatedBackgroundColor, handleMessagePressIn, handleMessagePressOut } =\n    useAnimatedMessageBackgroundColor()\n\n  const handlePress = () => {\n    navigation.navigate('SystemMessagePeople', {\n      conversation_id: conversationId,\n      person_ids: personIdsForSystemEvent,\n    })\n  }\n\n  const handleLongPress = () => {\n    Haptic.impactLight()\n    navigation.navigate('MessageActions', {\n      message_id: message.id,\n      conversation_id: conversationId,\n      isSystemMessage: true,\n    })\n  }\n\n  const handleReactionLongPress = (reaction: ReactionCountResource) => {\n    Haptic.impactLight()\n    navigation.navigate('Reactions', {\n      message_id: message.id,\n      conversation_id: conversationId,\n      reaction_value: reaction.value,\n    })\n  }\n\n  return (\n    <Pressable\n      onPress={hasPeople ? handlePress : undefined}\n      onLongPress={handleLongPress}\n      onPressIn={handleMessagePressIn}\n      onPressOut={handleMessagePressOut}\n      android_ripple={{ color: colors.androidRippleNeutral, borderless: false, foreground: true }}\n      accessibilityRole=\"button\"\n      accessibilityHint={\n        hasPeople\n          ? 'Tap to see people. Long press for message actions.'\n          : 'Long press for message actions.'\n      }\n    >\n      <Animated.View style={[styles.container, animatedBackgroundColor]}>\n        <Text variant=\"tertiary\" style={styles.text}>\n          {text}\n        </Text>\n        {hasReactions && (\n          <View style={styles.reactions}>\n            {message.reactionCounts.map(reaction => (\n              <MessageReaction\n                key={reaction.value}\n                reaction={reaction}\n                onLongPress={handleReactionLongPress}\n                message={message}\n                conversationId={conversationId}\n              />\n            ))}\n          </View>\n        )}\n      </Animated.View>\n    </Pressable>\n  )\n}\n\nfunction systemMessageText(names: string[], overflowCount: number, action: string): string {\n  if (overflowCount > 0) {\n    const overflowLabel = `${overflowCount} ${overflowCount === 1 ? 'other' : 'others'}`\n    return `${names.join(', ')}, and ${overflowLabel} ${action}`\n  }\n\n  switch (names.length) {\n    case 0:\n      return `Someone ${action}`\n    case 1:\n      return `${names[0]} ${action}`\n    case 2:\n      return `${names[0]} and ${names[1]} ${action}`\n    // Backend guarantees names.length <= 3 when overflowCount is 0;\n    // overflow branch handles 4+ people.\n    default:\n      return `${names[0]}, ${names[1]}, and ${names[2]} ${action}`\n  }\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n  return StyleSheet.create({\n    container: {\n      paddingVertical: 12,\n      paddingHorizontal: 16,\n      alignItems: 'center',\n    },\n    text: {\n      color: colors.textColorDefaultSecondary,\n      textAlign: 'center',\n    },\n    reactions: {\n      flexDirection: 'row',\n      flexWrap: 'wrap',\n      justifyContent: 'center',\n      gap: 4,\n      marginTop: 8,\n    },\n  })\n}\n"]}
+{"version":3,"file":"system_message.js","sourceRoot":"","sources":["../../../src/components/conversation/system_message.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useNavigation } from '@react-navigation/native'\nimport React from 'react'\nimport { Pressable, StyleSheet, View } from 'react-native'\nimport Animated from 'react-native-reanimated'\nimport { useAnimatedMessageBackgroundColor, useTheme } from '../../hooks'\nimport { ReactionCountResource } from '../../types/resources/reaction'\nimport { Haptic } from '../../utils/native_adapters'\nimport { SystemMessageResource } from '../../utils/system_messages'\nimport { Text } from '../display'\nimport { MessageReaction } from './message_reaction'\n\ninterface SystemMessageProps {\n  message: SystemMessageResource\n  conversationId: number\n}\n\nexport function SystemMessage({ message, conversationId }: SystemMessageProps) {\n  const { reactionCounts, systemTextParts, personIdsForSystemEvent } = message\n  const { names, overflowCount, action } = systemTextParts\n  const styles = useStyles()\n  const navigation = useNavigation()\n  const { colors } = useTheme()\n  const text = systemMessageText(names, overflowCount, action)\n  const hasPeople = personIdsForSystemEvent.length > 0\n  const hasReactions = reactionCounts.length > 0\n  const { animatedBackgroundColor, handleMessagePressIn, handleMessagePressOut } =\n    useAnimatedMessageBackgroundColor()\n\n  const handlePress = () => {\n    navigation.navigate('SystemMessagePeople', {\n      conversation_id: conversationId,\n      person_ids: personIdsForSystemEvent,\n    })\n  }\n\n  const handleLongPress = () => {\n    Haptic.impactLight()\n    navigation.navigate('MessageActions', {\n      message_id: message.id,\n      conversation_id: conversationId,\n      isSystemMessage: true,\n    })\n  }\n\n  const handleReactionLongPress = (reaction: ReactionCountResource) => {\n    Haptic.impactLight()\n    navigation.navigate('Reactions', {\n      message_id: message.id,\n      conversation_id: conversationId,\n      reaction_value: reaction.value,\n    })\n  }\n\n  return (\n    <Pressable\n      onPress={hasPeople ? handlePress : undefined}\n      onLongPress={handleLongPress}\n      onPressIn={handleMessagePressIn}\n      onPressOut={handleMessagePressOut}\n      android_ripple={{ color: colors.androidRippleNeutral, borderless: false, foreground: true }}\n      accessibilityRole=\"button\"\n      accessibilityHint={\n        hasPeople\n          ? 'Tap to see people. Long press for message actions.'\n          : 'Long press for message actions.'\n      }\n    >\n      <Animated.View style={[styles.container, animatedBackgroundColor]}>\n        <Text variant=\"tertiary\" style={styles.text}>\n          {text}\n        </Text>\n        {hasReactions && (\n          <View style={styles.reactions}>\n            {message.reactionCounts.map(reaction => (\n              <MessageReaction\n                key={reaction.value}\n                reaction={reaction}\n                onLongPress={handleReactionLongPress}\n                message={message}\n                conversationId={conversationId}\n              />\n            ))}\n          </View>\n        )}\n      </Animated.View>\n    </Pressable>\n  )\n}\n\nfunction systemMessageText(names: string[], overflowCount: number, action: string): string {\n  if (overflowCount > 0) {\n    const overflowLabel = `${overflowCount} ${overflowCount === 1 ? 'other' : 'others'}`\n    return `${names.join(', ')}, and ${overflowLabel} ${action}`\n  }\n\n  switch (names.length) {\n    case 0:\n      return `Someone ${action}`\n    case 1:\n      return `${names[0]} ${action}`\n    case 2:\n      return `${names[0]} and ${names[1]} ${action}`\n    // Backend guarantees names.length <= 3 when overflowCount is 0;\n    // overflow branch handles 4+ people.\n    default:\n      return `${names[0]}, ${names[1]}, and ${names[2]} ${action}`\n  }\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n  return StyleSheet.create({\n    container: {\n      paddingVertical: 12,\n      paddingHorizontal: 16,\n      alignItems: 'center',\n    },\n    text: {\n      color: colors.textColorDefaultSecondary,\n      textAlign: 'center',\n    },\n    reactions: {\n      flexDirection: 'row',\n      flexWrap: 'wrap',\n      justifyContent: 'center',\n      gap: 4,\n      marginTop: 8,\n    },\n  })\n}\n"]}

package/build/components/conversation/typing_indicator.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 /**
  * Component to display typing indicators in a conversation
  * Shows "X is typing..." with animated dots
  */
-export declare const TypingIndicator: () => import("react/jsx-runtime").JSX.Element | null;
+export declare const TypingIndicator: () => React.JSX.Element | null;
 //# sourceMappingURL=typing_indicator.d.ts.map

package/build/components/conversation/typing_indicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typing_indicator.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/typing_indicator.tsx"],"names":[],"mappings":"AA2CA;;;GAGG;AACH,eAAO,MAAM,eAAe,sDAiB3B,CAAA"}
+{"version":3,"file":"typing_indicator.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/typing_indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AA2CxC;;;GAGG;AACH,eAAO,MAAM,eAAe,gCAiB3B,CAAA"}

package/build/components/conversation/typing_indicator.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect } from 'react';
 import { StyleSheet, View, Animated } from 'react-native';
 import { useTheme } from '../../hooks';
@@ -26,7 +25,11 @@ const TypingDots = () => {
             dot3Opacity.stopAnimation();
         };
     }, [dot1Opacity, dot2Opacity, dot3Opacity]);
-    return (_jsxs(View, { style: styles.dotsContainer, children: [_jsx(Animated.View, { style: [styles.dots, { opacity: dot1Opacity }] }), _jsx(Animated.View, { style: [styles.dots, { opacity: dot2Opacity }] }), _jsx(Animated.View, { style: [styles.dots, { opacity: dot3Opacity }] })] }));
+    return (<View style={styles.dotsContainer}>
+      <Animated.View style={[styles.dots, { opacity: dot1Opacity }]}/>
+      <Animated.View style={[styles.dots, { opacity: dot2Opacity }]}/>
+      <Animated.View style={[styles.dots, { opacity: dot3Opacity }]}/>
+    </View>);
 };
 /**
  * Component to display typing indicators in a conversation
@@ -38,7 +41,14 @@ export const TypingIndicator = () => {
     const enabled = typingPeople.length > 0;
     if (!typingPeople.length)
         return null;
-    return (_jsx(View, { style: styles.relativeWrapper, children: _jsxs(View, { style: styles.container, children: [enabled && _jsx(TypingDots, {}), _jsx(Text, { variant: "footnote", style: styles.text, children: getTypingIndicatorText(typingPeople) })] }) }));
+    return (<View style={styles.relativeWrapper}>
+      <View style={styles.container}>
+        {enabled && <TypingDots />}
+        <Text variant="footnote" style={styles.text}>
+          {getTypingIndicatorText(typingPeople)}
+        </Text>
+      </View>
+    </View>);
 };
 const useStyles = () => {
     const { colors } = useTheme();

package/build/components/conversation/typing_indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"typing_indicator.js","sourceRoot":"","sources":["../../../src/components/conversation/typing_indicator.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect } from 'react'\nimport { StyleSheet, View, Animated } from 'react-native'\nimport { useTheme } from '../../hooks'\nimport { useTypingIndicators, getTypingIndicatorText } from '../../hooks/use_typing_indicators'\nimport { Text } from '../display'\n\n/**\n * Animated dots to indicate typing\n */\nconst TypingDots = () => {\n  const styles = useStyles()\n\n  // Create animated values for each dot\n  const dot1Opacity = React.useRef(new Animated.Value(0.3)).current\n  const dot2Opacity = React.useRef(new Animated.Value(0.3)).current\n  const dot3Opacity = React.useRef(new Animated.Value(0.3)).current\n\n  // Animation sequence for dots\n  useEffect(() => {\n    Animated.loop(\n      Animated.parallel([\n        animateDot(dot1Opacity, 0),\n        animateDot(dot2Opacity, 200),\n        animateDot(dot3Opacity, 400),\n      ])\n    ).start()\n\n    return () => {\n      dot1Opacity.stopAnimation()\n      dot2Opacity.stopAnimation()\n      dot3Opacity.stopAnimation()\n    }\n  }, [dot1Opacity, dot2Opacity, dot3Opacity])\n\n  return (\n    <View style={styles.dotsContainer}>\n      <Animated.View style={[styles.dots, { opacity: dot1Opacity }]} />\n      <Animated.View style={[styles.dots, { opacity: dot2Opacity }]} />\n      <Animated.View style={[styles.dots, { opacity: dot3Opacity }]} />\n    </View>\n  )\n}\n\n/**\n * Component to display typing indicators in a conversation\n * Shows \"X is typing...\" with animated dots\n */\nexport const TypingIndicator = () => {\n  const typingPeople = useTypingIndicators()\n  const styles = useStyles()\n  const enabled = typingPeople.length > 0\n\n  if (!typingPeople.length) return null\n\n  return (\n    <View style={styles.relativeWrapper}>\n      <View style={styles.container}>\n        {enabled && <TypingDots />}\n        <Text variant=\"footnote\" style={styles.text}>\n          {getTypingIndicatorText(typingPeople)}\n        </Text>\n      </View>\n    </View>\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    relativeWrapper: {\n      position: 'relative',\n    },\n    container: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      padding: 8,\n      backgroundColor: colors.fillColorNeutral090,\n      position: 'absolute',\n      bottom: 0,\n      left: 0,\n      right: 0,\n      zIndex: 10,\n    },\n    dotsContainer: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      marginRight: 8,\n    },\n    dots: {\n      width: 4,\n      height: 4,\n      borderRadius: 2,\n      backgroundColor: colors.textColorDefaultSecondary,\n      marginHorizontal: 2,\n    },\n    text: {\n      color: colors.textColorDefaultSecondary,\n    },\n  })\n}\n\nfunction animateDot(dot: Animated.Value, delay: number) {\n  return Animated.sequence([\n    Animated.timing(dot, {\n      toValue: 1,\n      duration: 400,\n      delay,\n      useNativeDriver: true,\n    }),\n    Animated.timing(dot, {\n      toValue: 0.3,\n      duration: 400,\n      useNativeDriver: true,\n    }),\n  ])\n}\n"]}
+{"version":3,"file":"typing_indicator.js","sourceRoot":"","sources":["../../../src/components/conversation/typing_indicator.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useEffect } from 'react'\nimport { StyleSheet, View, Animated } from 'react-native'\nimport { useTheme } from '../../hooks'\nimport { useTypingIndicators, getTypingIndicatorText } from '../../hooks/use_typing_indicators'\nimport { Text } from '../display'\n\n/**\n * Animated dots to indicate typing\n */\nconst TypingDots = () => {\n  const styles = useStyles()\n\n  // Create animated values for each dot\n  const dot1Opacity = React.useRef(new Animated.Value(0.3)).current\n  const dot2Opacity = React.useRef(new Animated.Value(0.3)).current\n  const dot3Opacity = React.useRef(new Animated.Value(0.3)).current\n\n  // Animation sequence for dots\n  useEffect(() => {\n    Animated.loop(\n      Animated.parallel([\n        animateDot(dot1Opacity, 0),\n        animateDot(dot2Opacity, 200),\n        animateDot(dot3Opacity, 400),\n      ])\n    ).start()\n\n    return () => {\n      dot1Opacity.stopAnimation()\n      dot2Opacity.stopAnimation()\n      dot3Opacity.stopAnimation()\n    }\n  }, [dot1Opacity, dot2Opacity, dot3Opacity])\n\n  return (\n    <View style={styles.dotsContainer}>\n      <Animated.View style={[styles.dots, { opacity: dot1Opacity }]} />\n      <Animated.View style={[styles.dots, { opacity: dot2Opacity }]} />\n      <Animated.View style={[styles.dots, { opacity: dot3Opacity }]} />\n    </View>\n  )\n}\n\n/**\n * Component to display typing indicators in a conversation\n * Shows \"X is typing...\" with animated dots\n */\nexport const TypingIndicator = () => {\n  const typingPeople = useTypingIndicators()\n  const styles = useStyles()\n  const enabled = typingPeople.length > 0\n\n  if (!typingPeople.length) return null\n\n  return (\n    <View style={styles.relativeWrapper}>\n      <View style={styles.container}>\n        {enabled && <TypingDots />}\n        <Text variant=\"footnote\" style={styles.text}>\n          {getTypingIndicatorText(typingPeople)}\n        </Text>\n      </View>\n    </View>\n  )\n}\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n\n  return StyleSheet.create({\n    relativeWrapper: {\n      position: 'relative',\n    },\n    container: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      padding: 8,\n      backgroundColor: colors.fillColorNeutral090,\n      position: 'absolute',\n      bottom: 0,\n      left: 0,\n      right: 0,\n      zIndex: 10,\n    },\n    dotsContainer: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      marginRight: 8,\n    },\n    dots: {\n      width: 4,\n      height: 4,\n      borderRadius: 2,\n      backgroundColor: colors.textColorDefaultSecondary,\n      marginHorizontal: 2,\n    },\n    text: {\n      color: colors.textColorDefaultSecondary,\n    },\n  })\n}\n\nfunction animateDot(dot: Animated.Value, delay: number) {\n  return Animated.sequence([\n    Animated.timing(dot, {\n      toValue: 1,\n      duration: 400,\n      delay,\n      useNativeDriver: true,\n    }),\n    Animated.timing(dot, {\n      toValue: 0.3,\n      duration: 400,\n      useNativeDriver: true,\n    }),\n  ])\n}\n"]}

package/build/components/conversations/conversation_actions.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import { ConversationResource } from '../../types';
 export declare function ConversationActions({ children, conversation, style, onPress, accessibilityLabel, }: {
@@ -7,5 +7,5 @@ export declare function ConversationActions({ children, conversation, style, onP
     onPress: () => void;
     style?: StyleProp<ViewStyle>;
     accessibilityLabel?: string;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 //# sourceMappingURL=conversation_actions.d.ts.map

package/build/components/conversations/conversation_actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"conversation_actions.d.ts","sourceRoot":"","sources":["../../../src/components/conversations/conversation_actions.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAA;AAClF,OAAO,EAIL,SAAS,EAGT,SAAS,EACV,MAAM,cAAc,CAAA;AAUrB,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAKlD,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,OAAO,EACP,kBAAkB,GACnB,EAAE;IACD,QAAQ,EAAE,SAAS,CAAA;IACnB,YAAY,EAAE,oBAAoB,CAAA;IAClC,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B,2CA4HA"}
+{"version":3,"file":"conversation_actions.d.ts","sourceRoot":"","sources":["../../../src/components/conversations/conversation_actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAA;AAClF,OAAO,EAIL,SAAS,EAGT,SAAS,EACV,MAAM,cAAc,CAAA;AAUrB,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAKlD,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,OAAO,EACP,kBAAkB,GACnB,EAAE;IACD,QAAQ,EAAE,SAAS,CAAA;IACnB,YAAY,EAAE,oBAAoB,CAAA;IAClC,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAA;CAC5B,qBA4HA"}

package/build/components/conversations/conversation_actions.js

@@ -1,5 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Platform, Pressable, StyleSheet, View, } from 'react-native';
 import ReanimatedSwipeable from 'react-native-gesture-handler/ReanimatedSwipeable';
 import { useConversationsContext } from '../../contexts/conversations_context';
@@ -79,7 +78,11 @@ export function ConversationActions({ children, conversation, style, onPress, ac
             return;
         handleSwipeableClose();
     }, [activeConversationId, conversation.id, handleSwipeableClose]);
-    return (_jsx(ReanimatedSwipeable, { ref: swipeableRef, childrenContainerStyle: styles.swipeableChildContainer, containerStyle: styles.swipeableContainer, overshootFriction: 8, overshootLeft: overshootLeft, overshootRight: false, onSwipeableOpenStartDrag: handleSwipeableOpen, onSwipeableClose: () => setDisabled(false), renderRightActions: () => _jsx(_Fragment, {}), renderLeftActions: () => (_jsx(LeftActions, { isConversationEmpty: isConversationEmpty, handleMute: handleMute, handleLatestMessageUnread: handleLatestMessageUnread, muted: muted, read: read, isMutedPending: isMutedPending, isMarkReadPending: isMarkReadPending })), children: _jsx(Pressable, { onPress: handlePress, style: ({ pressed }) => [style, pressed && platformPressedOpacityStyle], android_ripple: { color: androidRippleColor, borderless: false, foreground: true }, accessibilityLabel: accessibilityLabel, accessibilityRole: "button", accessibilityActions: accessibilityActions, onAccessibilityAction: handleAccessibilityAction, children: children }) }));
+    return (<ReanimatedSwipeable ref={swipeableRef} childrenContainerStyle={styles.swipeableChildContainer} containerStyle={styles.swipeableContainer} overshootFriction={8} overshootLeft={overshootLeft} overshootRight={false} onSwipeableOpenStartDrag={handleSwipeableOpen} onSwipeableClose={() => setDisabled(false)} renderRightActions={() => <></>} renderLeftActions={() => (<LeftActions isConversationEmpty={isConversationEmpty} handleMute={handleMute} handleLatestMessageUnread={handleLatestMessageUnread} muted={muted} read={read} isMutedPending={isMutedPending} isMarkReadPending={isMarkReadPending}/>)}>
+      <Pressable onPress={handlePress} style={({ pressed }) => [style, pressed && platformPressedOpacityStyle]} android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }} accessibilityLabel={accessibilityLabel} accessibilityRole="button" accessibilityActions={accessibilityActions} onAccessibilityAction={handleAccessibilityAction}>
+        {children}
+      </Pressable>
+    </ReanimatedSwipeable>);
 }
 function LeftActions({ isConversationEmpty, handleMute, handleLatestMessageUnread, muted, read, isMutedPending, isMarkReadPending, }) {
     const styles = useStyles();
@@ -91,7 +94,10 @@ function LeftActions({ isConversationEmpty, handleMute, handleLatestMessageUnrea
         true: { iconName: 'general.outlinedTextMessage', label: 'Mark read' },
         false: { iconName: 'general.textMessageNotifications', label: 'Mark unread' },
     };
-    return (_jsxs(View, { style: styles.actionButtonContainer, children: [_jsx(SwipeableToggleButton, { loading: isMarkReadPending, disabled: isConversationEmpty, toggled: !read, onPress: handleLatestMessageUnread, toggleContent: latestMessageUnreadToggleContent, backgroundColor: tokens.fillColorInteractionSwipeDefault }), _jsx(SwipeableToggleButton, { loading: isMutedPending, toggled: muted, onPress: handleMute, toggleContent: muteToggleContent, backgroundColor: tokens.fillColorInteractionSwipeSecondary })] }));
+    return (<View style={styles.actionButtonContainer}>
+      <SwipeableToggleButton loading={isMarkReadPending} disabled={isConversationEmpty} toggled={!read} onPress={handleLatestMessageUnread} toggleContent={latestMessageUnreadToggleContent} backgroundColor={tokens.fillColorInteractionSwipeDefault}/>
+      <SwipeableToggleButton loading={isMutedPending} toggled={muted} onPress={handleMute} toggleContent={muteToggleContent} backgroundColor={tokens.fillColorInteractionSwipeSecondary}/>
+    </View>);
 }
 const ACTION_BUTTON_WIDTH = 120;
 const ACTION_BUTTON_COUNT = 2;

package/build/components/conversations/conversation_actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation_actions.js","sourceRoot":"","sources":["../../../src/components/conversations/conversation_actions.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react'\nimport {\n  AccessibilityActionEvent,\n  Platform,\n  Pressable,\n  StyleProp,\n  StyleSheet,\n  View,\n  ViewStyle,\n} from 'react-native'\nimport ReanimatedSwipeable, {\n  SwipeableMethods,\n} from 'react-native-gesture-handler/ReanimatedSwipeable'\nimport { useConversationsContext } from '../../contexts/conversations_context'\nimport { useTheme, useCreateAndroidRippleColor } from '../../hooks'\nimport {\n  useConversationsMarkRead,\n  useConversationsMute,\n} from '../../hooks/use_conversations_actions'\nimport { ConversationResource } from '../../types'\nimport { platformPressedOpacityStyle } from '../../utils'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { SwipeableToggleButton } from './swipeable_toggle_button'\n\nexport function ConversationActions({\n  children,\n  conversation,\n  style,\n  onPress,\n  accessibilityLabel,\n}: {\n  children: ReactNode\n  conversation: ConversationResource\n  onPress: () => void\n  style?: StyleProp<ViewStyle>\n  accessibilityLabel?: string\n}) {\n  const swipeableRef = useRef<SwipeableMethods>(null)\n  const styles = useStyles()\n  const { activeConversationId, setActiveConversationId } = useConversationsContext()\n  const [disabled, setDisabled] = useState(false)\n  const overshootLeft = Platform.OS === 'ios'\n  const androidRippleColor = useCreateAndroidRippleColor({\n    color: styles.swipeableChildContainer.backgroundColor,\n  })\n  const { muted, setMuted, isPending: isMutedPending } = useConversationsMute({ conversation })\n  const {\n    read,\n    markRead,\n    isPending: isMarkReadPending,\n  } = useConversationsMarkRead({\n    conversation,\n  })\n\n  const isConversationEmpty = conversation.lastMessageCreatedAt === null\n\n  const handleSwipeableClose = useCallback(() => {\n    setDisabled(false)\n    swipeableRef.current?.close()\n  }, [setDisabled])\n\n  const handleSwipeableOpen = () => {\n    setDisabled(true)\n    setActiveConversationId(conversation.id)\n  }\n\n  const handlePress = useCallback(() => {\n    if (disabled || !onPress) return\n    onPress()\n  }, [disabled, onPress])\n\n  const handleMute = useCallback(() => {\n    setMuted(!muted)\n    handleSwipeableClose()\n  }, [muted, handleSwipeableClose, setMuted])\n\n  const handleLatestMessageUnread = useCallback(() => {\n    markRead(!read)\n    handleSwipeableClose()\n  }, [read, handleSwipeableClose, markRead])\n\n  const readAccessibilityAction = !isConversationEmpty\n    ? [\n        {\n          name: read ? 'markUnread' : 'markRead',\n          label: read ? 'Mark unread' : 'Mark read',\n        },\n      ]\n    : []\n\n  const accessibilityActions = [\n    {\n      name: muted ? 'unmute' : 'mute',\n      label: muted ? 'Enable' : 'Silence',\n    },\n    ...readAccessibilityAction,\n  ]\n\n  const handleAccessibilityAction = useCallback(\n    (event: AccessibilityActionEvent) => {\n      switch (event.nativeEvent.actionName) {\n        case 'markRead':\n          handleLatestMessageUnread()\n          break\n        case 'markUnread':\n          handleLatestMessageUnread()\n          break\n        case 'mute':\n          handleMute()\n          break\n        case 'unmute':\n          handleMute()\n          break\n      }\n    },\n    [handleLatestMessageUnread, handleMute]\n  )\n\n  useEffect(() => {\n    if (activeConversationId === conversation.id) return\n\n    handleSwipeableClose()\n  }, [activeConversationId, conversation.id, handleSwipeableClose])\n\n  return (\n    <ReanimatedSwipeable\n      ref={swipeableRef}\n      childrenContainerStyle={styles.swipeableChildContainer}\n      containerStyle={styles.swipeableContainer}\n      overshootFriction={8}\n      overshootLeft={overshootLeft}\n      overshootRight={false}\n      onSwipeableOpenStartDrag={handleSwipeableOpen}\n      onSwipeableClose={() => setDisabled(false)}\n      renderRightActions={() => <></>}\n      renderLeftActions={() => (\n        <LeftActions\n          isConversationEmpty={isConversationEmpty}\n          handleMute={handleMute}\n          handleLatestMessageUnread={handleLatestMessageUnread}\n          muted={muted}\n          read={read}\n          isMutedPending={isMutedPending}\n          isMarkReadPending={isMarkReadPending}\n        />\n      )}\n    >\n      <Pressable\n        onPress={handlePress}\n        style={({ pressed }) => [style, pressed && platformPressedOpacityStyle]}\n        android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}\n        accessibilityLabel={accessibilityLabel}\n        accessibilityRole=\"button\"\n        accessibilityActions={accessibilityActions}\n        onAccessibilityAction={handleAccessibilityAction}\n      >\n        {children}\n      </Pressable>\n    </ReanimatedSwipeable>\n  )\n}\n\ninterface LeftActionsProps {\n  isConversationEmpty: boolean\n  handleMute: () => void\n  handleLatestMessageUnread: () => void\n  muted: boolean\n  read: boolean\n  isMutedPending: boolean\n  isMarkReadPending: boolean\n}\n\nfunction LeftActions({\n  isConversationEmpty,\n  handleMute,\n  handleLatestMessageUnread,\n  muted,\n  read,\n  isMutedPending,\n  isMarkReadPending,\n}: LeftActionsProps) {\n  const styles = useStyles()\n\n  const muteToggleContent = {\n    true: { iconName: 'general.bell', label: 'Enable' },\n    false: { iconName: 'general.bellMuted', label: 'Silence' },\n  } as const\n\n  const latestMessageUnreadToggleContent = {\n    true: { iconName: 'general.outlinedTextMessage', label: 'Mark read' },\n    false: { iconName: 'general.textMessageNotifications', label: 'Mark unread' },\n  } as const\n\n  return (\n    <View style={styles.actionButtonContainer}>\n      <SwipeableToggleButton\n        loading={isMarkReadPending}\n        disabled={isConversationEmpty}\n        toggled={!read}\n        onPress={handleLatestMessageUnread}\n        toggleContent={latestMessageUnreadToggleContent}\n        backgroundColor={tokens.fillColorInteractionSwipeDefault}\n      />\n      <SwipeableToggleButton\n        loading={isMutedPending}\n        toggled={muted}\n        onPress={handleMute}\n        toggleContent={muteToggleContent}\n        backgroundColor={tokens.fillColorInteractionSwipeSecondary}\n      />\n    </View>\n  )\n}\n\nconst ACTION_BUTTON_WIDTH = 120\nconst ACTION_BUTTON_COUNT = 2\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n  return StyleSheet.create({\n    swipeableChildContainer: {\n      backgroundColor: colors.conversationActionsBackground,\n    },\n    actionButtonContainer: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      width: ACTION_BUTTON_WIDTH * ACTION_BUTTON_COUNT,\n      alignContent: 'stretch',\n    },\n    swipeableContainer: {\n      backgroundColor: colors.surfaceColor090,\n    },\n  })\n}\n"]}
+{"version":3,"file":"conversation_actions.js","sourceRoot":"","sources":["../../../src/components/conversations/conversation_actions.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react'\nimport {\n  AccessibilityActionEvent,\n  Platform,\n  Pressable,\n  StyleProp,\n  StyleSheet,\n  View,\n  ViewStyle,\n} from 'react-native'\nimport ReanimatedSwipeable, {\n  SwipeableMethods,\n} from 'react-native-gesture-handler/ReanimatedSwipeable'\nimport { useConversationsContext } from '../../contexts/conversations_context'\nimport { useTheme, useCreateAndroidRippleColor } from '../../hooks'\nimport {\n  useConversationsMarkRead,\n  useConversationsMute,\n} from '../../hooks/use_conversations_actions'\nimport { ConversationResource } from '../../types'\nimport { platformPressedOpacityStyle } from '../../utils'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { SwipeableToggleButton } from './swipeable_toggle_button'\n\nexport function ConversationActions({\n  children,\n  conversation,\n  style,\n  onPress,\n  accessibilityLabel,\n}: {\n  children: ReactNode\n  conversation: ConversationResource\n  onPress: () => void\n  style?: StyleProp<ViewStyle>\n  accessibilityLabel?: string\n}) {\n  const swipeableRef = useRef<SwipeableMethods>(null)\n  const styles = useStyles()\n  const { activeConversationId, setActiveConversationId } = useConversationsContext()\n  const [disabled, setDisabled] = useState(false)\n  const overshootLeft = Platform.OS === 'ios'\n  const androidRippleColor = useCreateAndroidRippleColor({\n    color: styles.swipeableChildContainer.backgroundColor,\n  })\n  const { muted, setMuted, isPending: isMutedPending } = useConversationsMute({ conversation })\n  const {\n    read,\n    markRead,\n    isPending: isMarkReadPending,\n  } = useConversationsMarkRead({\n    conversation,\n  })\n\n  const isConversationEmpty = conversation.lastMessageCreatedAt === null\n\n  const handleSwipeableClose = useCallback(() => {\n    setDisabled(false)\n    swipeableRef.current?.close()\n  }, [setDisabled])\n\n  const handleSwipeableOpen = () => {\n    setDisabled(true)\n    setActiveConversationId(conversation.id)\n  }\n\n  const handlePress = useCallback(() => {\n    if (disabled || !onPress) return\n    onPress()\n  }, [disabled, onPress])\n\n  const handleMute = useCallback(() => {\n    setMuted(!muted)\n    handleSwipeableClose()\n  }, [muted, handleSwipeableClose, setMuted])\n\n  const handleLatestMessageUnread = useCallback(() => {\n    markRead(!read)\n    handleSwipeableClose()\n  }, [read, handleSwipeableClose, markRead])\n\n  const readAccessibilityAction = !isConversationEmpty\n    ? [\n        {\n          name: read ? 'markUnread' : 'markRead',\n          label: read ? 'Mark unread' : 'Mark read',\n        },\n      ]\n    : []\n\n  const accessibilityActions = [\n    {\n      name: muted ? 'unmute' : 'mute',\n      label: muted ? 'Enable' : 'Silence',\n    },\n    ...readAccessibilityAction,\n  ]\n\n  const handleAccessibilityAction = useCallback(\n    (event: AccessibilityActionEvent) => {\n      switch (event.nativeEvent.actionName) {\n        case 'markRead':\n          handleLatestMessageUnread()\n          break\n        case 'markUnread':\n          handleLatestMessageUnread()\n          break\n        case 'mute':\n          handleMute()\n          break\n        case 'unmute':\n          handleMute()\n          break\n      }\n    },\n    [handleLatestMessageUnread, handleMute]\n  )\n\n  useEffect(() => {\n    if (activeConversationId === conversation.id) return\n\n    handleSwipeableClose()\n  }, [activeConversationId, conversation.id, handleSwipeableClose])\n\n  return (\n    <ReanimatedSwipeable\n      ref={swipeableRef}\n      childrenContainerStyle={styles.swipeableChildContainer}\n      containerStyle={styles.swipeableContainer}\n      overshootFriction={8}\n      overshootLeft={overshootLeft}\n      overshootRight={false}\n      onSwipeableOpenStartDrag={handleSwipeableOpen}\n      onSwipeableClose={() => setDisabled(false)}\n      renderRightActions={() => <></>}\n      renderLeftActions={() => (\n        <LeftActions\n          isConversationEmpty={isConversationEmpty}\n          handleMute={handleMute}\n          handleLatestMessageUnread={handleLatestMessageUnread}\n          muted={muted}\n          read={read}\n          isMutedPending={isMutedPending}\n          isMarkReadPending={isMarkReadPending}\n        />\n      )}\n    >\n      <Pressable\n        onPress={handlePress}\n        style={({ pressed }) => [style, pressed && platformPressedOpacityStyle]}\n        android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}\n        accessibilityLabel={accessibilityLabel}\n        accessibilityRole=\"button\"\n        accessibilityActions={accessibilityActions}\n        onAccessibilityAction={handleAccessibilityAction}\n      >\n        {children}\n      </Pressable>\n    </ReanimatedSwipeable>\n  )\n}\n\ninterface LeftActionsProps {\n  isConversationEmpty: boolean\n  handleMute: () => void\n  handleLatestMessageUnread: () => void\n  muted: boolean\n  read: boolean\n  isMutedPending: boolean\n  isMarkReadPending: boolean\n}\n\nfunction LeftActions({\n  isConversationEmpty,\n  handleMute,\n  handleLatestMessageUnread,\n  muted,\n  read,\n  isMutedPending,\n  isMarkReadPending,\n}: LeftActionsProps) {\n  const styles = useStyles()\n\n  const muteToggleContent = {\n    true: { iconName: 'general.bell', label: 'Enable' },\n    false: { iconName: 'general.bellMuted', label: 'Silence' },\n  } as const\n\n  const latestMessageUnreadToggleContent = {\n    true: { iconName: 'general.outlinedTextMessage', label: 'Mark read' },\n    false: { iconName: 'general.textMessageNotifications', label: 'Mark unread' },\n  } as const\n\n  return (\n    <View style={styles.actionButtonContainer}>\n      <SwipeableToggleButton\n        loading={isMarkReadPending}\n        disabled={isConversationEmpty}\n        toggled={!read}\n        onPress={handleLatestMessageUnread}\n        toggleContent={latestMessageUnreadToggleContent}\n        backgroundColor={tokens.fillColorInteractionSwipeDefault}\n      />\n      <SwipeableToggleButton\n        loading={isMutedPending}\n        toggled={muted}\n        onPress={handleMute}\n        toggleContent={muteToggleContent}\n        backgroundColor={tokens.fillColorInteractionSwipeSecondary}\n      />\n    </View>\n  )\n}\n\nconst ACTION_BUTTON_WIDTH = 120\nconst ACTION_BUTTON_COUNT = 2\n\nconst useStyles = () => {\n  const { colors } = useTheme()\n  return StyleSheet.create({\n    swipeableChildContainer: {\n      backgroundColor: colors.conversationActionsBackground,\n    },\n    actionButtonContainer: {\n      flexDirection: 'row',\n      alignItems: 'center',\n      width: ACTION_BUTTON_WIDTH * ACTION_BUTTON_COUNT,\n      alignContent: 'stretch',\n    },\n    swipeableContainer: {\n      backgroundColor: colors.surfaceColor090,\n    },\n  })\n}\n"]}

package/build/components/conversations/conversation_preview.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ViewStyle } from 'react-native';
 import { ConversationResource } from '../../types';
 interface ConversationPreviewProps {
@@ -6,7 +7,7 @@ interface ConversationPreviewProps {
     showBadges?: boolean;
     style?: ViewStyle;
 }
-export declare const ConversationPreview: ({ conversation, onPress, showBadges, style, }: ConversationPreviewProps) => import("react/jsx-runtime").JSX.Element;
-export declare const ConversationPreviewSkeleton: () => import("react/jsx-runtime").JSX.Element;
+export declare const ConversationPreview: ({ conversation, onPress, showBadges, style, }: ConversationPreviewProps) => React.JSX.Element;
+export declare const ConversationPreviewSkeleton: () => React.JSX.Element;
 export {};
 //# sourceMappingURL=conversation_preview.d.ts.map

package/build/components/conversations/conversation_preview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"conversation_preview.d.ts","sourceRoot":"","sources":["../../../src/components/conversations/conversation_preview.tsx"],"names":[],"mappings":"AACA,OAAO,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAO1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AASlD,UAAU,wBAAwB;IAChC,YAAY,EAAE,oBAAoB,CAAA;IAClC,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,eAAO,MAAM,mBAAmB,GAAI,+CAKjC,wBAAwB,4CAiE1B,CAAA;AAqCD,eAAO,MAAM,2BAA2B,+CAqBvC,CAAA"}
+{"version":3,"file":"conversation_preview.d.ts","sourceRoot":"","sources":["../../../src/components/conversations/conversation_preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAO1D,OAAO,EAA2B,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAW3E,UAAU,wBAAwB;IAChC,YAAY,EAAE,oBAAoB,CAAA;IAClC,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAED,eAAO,MAAM,mBAAmB,GAAI,+CAKjC,wBAAwB,sBAyE1B,CAAA;AAqCD,eAAO,MAAM,2BAA2B,yBAqBvC,CAAA"}

package/build/components/conversations/conversation_preview.js

@@ -1,7 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useTheme, useAtFontScaleBreakpoint, useFontScale, useScalableNumberOfLines, } from '../../hooks';
+import { REACTION_EMOJIS, platformFontWeightBold } from '../../utils';
 import { formatDatePreview } from '../../utils/date';
+import { tokens } from '../../vendor/tapestry/tokens';
 import { AvatarGroup, ConversationAvatar, Heading, Text, Badge } from '../display';
 import { ConversationActions } from './conversation_actions';
 import { MuteIndicator } from './mute_indicator';
@@ -9,20 +11,42 @@ import { UnreadCountBadge } from './unread_count_badge';
 const EMPTY_CONVERSATION_PREVIEW_TEXT = 'Send your first message';
 export const ConversationPreview = ({ conversation, onPress, showBadges = true, style, }) => {
     const styles = useStyles();
-    const { lastMessageAuthorName, lastMessageCreatedAt, lastMessageTextPreview, title, unreadCount, badges, muted, disabled, } = conversation;
+    const { conversationPreview, lastMessageCreatedAt, title, unreadCount, badges, muted, disabled, unreadReaction, } = conversation;
     const emptyConversation = !lastMessageCreatedAt;
     const fallbackIconName = emptyConversation ? 'people.noTextMessage' : 'general.person';
     const hasMetaContent = lastMessageCreatedAt || unreadCount > 0 || muted;
+    const isUnread = unreadCount > 0 || unreadReaction;
     const numberOfLinesScaledTitle = useScalableNumberOfLines(1);
     const numberOfLinesScaledPreviewText = useScalableNumberOfLines(2);
-    const conversationPreviewText = lastMessageTextPreview
-        ? `${lastMessageAuthorName}: ${lastMessageTextPreview}`
+    const conversationPreviewText = conversationPreview
+        ? formatConversationPreviewText(conversationPreview)
         : EMPTY_CONVERSATION_PREVIEW_TEXT;
     const conversationAccessibilityLabel = getConversationAccessibilityLabel({
         conversation,
         showBadges,
     });
-    return (_jsxs(ConversationActions, { conversation: conversation, style: [styles.previewRow, disabled && styles.disabled, style], onPress: onPress, accessibilityLabel: conversationAccessibilityLabel, children: [_jsx(ConversationAvatar, { conversation: conversation, size: "lg", fallbackIconName: fallbackIconName }), _jsxs(View, { style: styles.conversationBody, children: [_jsx(Heading, { numberOfLines: numberOfLinesScaledTitle, variant: "h3", style: styles.title, children: title }), _jsx(Text, { variant: "tertiary", numberOfLines: numberOfLinesScaledPreviewText, style: emptyConversation && styles.emptyConversationPreviewText, children: conversationPreviewText }), _jsx(ConversationBadges, { visible: showBadges, badges: badges })] }), hasMetaContent && (_jsxs(View, { style: styles.metaContainer, children: [_jsx(Text, { variant: "tertiary", children: formatDatePreview(lastMessageCreatedAt) }), _jsxs(View, { style: styles.statusContainer, children: [_jsx(UnreadCountBadge, { count: unreadCount, showDot: muted }), _jsx(MuteIndicator, { muted: muted })] })] }))] }));
+    return (<ConversationActions conversation={conversation} style={[styles.previewRow, disabled && styles.disabled, style]} onPress={onPress} accessibilityLabel={conversationAccessibilityLabel}>
+      <ConversationAvatar conversation={conversation} size="lg" fallbackIconName={fallbackIconName}/>
+      <View style={styles.conversationBody}>
+        <Heading numberOfLines={numberOfLinesScaledTitle} variant="h3" style={[styles.title, isUnread && styles.unreadTitle]}>
+          {title}
+        </Heading>
+        <Text variant="tertiary" numberOfLines={numberOfLinesScaledPreviewText} style={[
+            emptyConversation && styles.emptyConversationPreviewText,
+            isUnread && styles.unreadText,
+        ]}>
+          {conversationPreviewText}
+        </Text>
+        <ConversationBadges visible={showBadges} badges={badges}/>
+      </View>
+      {hasMetaContent && (<View style={styles.metaContainer}>
+          <Text variant="tertiary">{formatDatePreview(conversationPreview?.createdAt)}</Text>
+          <View style={styles.statusContainer}>
+            <UnreadCountBadge count={unreadCount} unreadReaction={unreadReaction} showDot={muted}/>
+            <MuteIndicator muted={muted}/>
+          </View>
+        </View>)}
+    </ConversationActions>);
 };
 const ConversationBadges = ({ visible, badges }) => {
     const styles = useStyles();
@@ -30,7 +54,9 @@ const ConversationBadges = ({ visible, badges }) => {
     if (!visible || !badges || badges.length === 0) {
         return null;
     }
-    return (_jsx(View, { style: styles.badges, children: badges.map(badge => (_jsx(Badge, { variant: "meta", productLogoName: badge.appName, label: badge.pcoResourceType, metaLabel: badge.text || '', numberOfLinesMetaLabel: numberOfLinesScaled }, badge.text))) }));
+    return (<View style={styles.badges}>
+      {badges.map(badge => (<Badge key={badge.text} variant="meta" productLogoName={badge.appName} label={badge.pcoResourceType} metaLabel={badge.text || ''} numberOfLinesMetaLabel={numberOfLinesScaled}/>))}
+    </View>);
 };
 const skeletonBadges = [
     {
@@ -40,21 +66,53 @@ const skeletonBadges = [
 ];
 export const ConversationPreviewSkeleton = () => {
     const styles = useStyles();
-    return (_jsxs(View, { style: styles.previewRow, children: [_jsx(AvatarGroup, { size: "lg", sourceUris: [], showFallback: true, fallbackIconName: 'general.person' }), _jsxs(View, { style: styles.conversationBody, children: [_jsx(View, { style: styles.titleLoading }), _jsx(View, { style: styles.subtitleLoading }), _jsx(ConversationBadges, { visible: true, badges: skeletonBadges })] }), _jsx(View, { style: styles.metaContainer, children: _jsx(View, { style: styles.dateLoading }) })] }));
+    return (<View style={styles.previewRow}>
+      <AvatarGroup size="lg" sourceUris={[]} showFallback={true} fallbackIconName={'general.person'}/>
+      <View style={styles.conversationBody}>
+        <View style={styles.titleLoading}/>
+        <View style={styles.subtitleLoading}/>
+        <ConversationBadges visible={true} badges={skeletonBadges}/>
+      </View>
+      <View style={styles.metaContainer}>
+        <View style={styles.dateLoading}/>
+      </View>
+    </View>);
 };
+function reactionEmoji(value) {
+    if (!value)
+        return null;
+    return REACTION_EMOJIS[value] ?? null;
+}
+function formatConversationPreviewText(preview) {
+    if (preview.kind === 'reaction') {
+        const emoji = reactionEmoji(preview.value);
+        return `${preview.authorName}${emoji ? ` ${emoji}` : ' reacted'} to: "${preview.text}"`;
+    }
+    return `${preview.authorName}: ${preview.text}`;
+}
+function formatConversationPreviewAccessibilityLabel(preview) {
+    const date = formatDatePreview(preview.createdAt);
+    if (preview.kind === 'reaction') {
+        return `${preview.authorName} reacted to your message sent ${date} and says ${preview.text}`;
+    }
+    return `Last message sent ${date} from ${preview.authorName} and says ${preview.text}`;
+}
 const getConversationAccessibilityLabel = ({ conversation, showBadges, }) => {
-    const { badges, title, lastMessageAuthorName, lastMessageTextPreview, muted, disabled, unreadCount, lastMessageCreatedAt, } = conversation;
+    const { badges, title, conversationPreview, muted, disabled, unreadCount, unreadReaction } = conversation;
     const hasBadges = badges && showBadges;
     const hasUnreadMessages = unreadCount > 0;
-    const hasLastMessage = lastMessageCreatedAt;
     const label = {
         title,
         badge: hasBadges ? `for ${badges[0]?.pcoResourceType} ${badges[0]?.text || ''}` : '',
         disabled: disabled ? 'Disabled' : '',
         muted: muted ? 'Muted' : '',
-        readStatus: hasUnreadMessages ? `${unreadCount} unread messages` : '',
-        lastMessage: hasLastMessage
-            ? `Last message sent ${formatDatePreview(lastMessageCreatedAt)} from ${lastMessageAuthorName} and says ${lastMessageTextPreview}`
+        readStatus: hasUnreadMessages
+            ? `${unreadCount} unread messages`
+            : unreadReaction
+                ? 'unread reaction'
+                : '',
+        lastMessage: conversationPreview
+            ? formatConversationPreviewAccessibilityLabel(conversationPreview)
             : EMPTY_CONVERSATION_PREVIEW_TEXT,
     };
     return [
@@ -91,6 +149,12 @@ const useStyles = () => {
             fontSize: 16,
             color: colors.textColorDefaultPrimary,
         },
+        unreadTitle: {
+            fontWeight: tokens.fontWeightBold,
+        },
+        unreadText: {
+            fontWeight: platformFontWeightBold,
+        },
         titleLoading: {
             width: 120,
             height: 20,