@planningcenter/chat-react-native 3.1.0-rc.13 → 3.1.0-rc.15

package/src/components/conversation/attachments/expanded_link.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import { Image, Linking, Pressable, StyleSheet, Text, View } from 'react-native'
+import { useTheme } from '../../../hooks'
+import { tokens } from '../../../vendor/tapestry/tokens'
+
+export function ExpandedLink({ attachment }: { attachment: any }) {
+  const styles = useStyles()
+  const { attributes } = attachment
+  const { url, title, description, imageUrl, imageHeight, imageWidth } = attributes
+
+  const aspectRatio = imageWidth && imageHeight ? imageWidth / imageHeight : 1
+
+  async function openUrl() {
+    if (url) Linking.openURL(url)
+  }
+
+  return (
+    <Pressable style={styles.container} onPress={openUrl}>
+      {imageUrl && (
+        <Image source={{ uri: imageUrl }} style={[styles.image, { aspectRatio }]} alt={title} />
+      )}
+      {(title || description) && (
+        <View style={styles.textWrapper}>
+          {title && <Text style={styles.title}>{title}</Text>}
+          {description && <Text style={styles.description}>{description}</Text>}
+        </View>
+      )}
+    </Pressable>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    container: {},
+    image: {
+      borderRadius: 8,
+    },
+    textWrapper: {
+      gap: 4,
+      padding: 8,
+    },
+    title: {
+      fontSize: tokens.fontSizeSm,
+      fontWeight: tokens.fontWeightMedium,
+      color: colors.textColorDefaultPrimary,
+    },
+    description: {
+      fontSize: tokens.fontSizeXs,
+      color: colors.textColorDefaultPrimary,
+    },
+  })
+}

package/src/components/conversation/attachments/generic_file_attachment.tsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import { Pressable, StyleSheet, View } from 'react-native'
+import { DenormalizedMessageAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'
+import { AttachmentCard, AttachmentCardTitle } from './attachment_card'
+import { Icon } from '../../display'
+import { DownloadAttachmentButton } from './download_attachment_button'
+import { useTheme } from '../../../hooks'
+
+export function GenericFileAttachment({
+  attachment,
+}: {
+  attachment: DenormalizedMessageAttachmentResource
+}) {
+  const styles = useStyles()
+  const { url, filename, contentType } = attachment.attributes
+  const iconName = getAttachmentIconName(contentType)
+  const fileTypeLabel = contentType === 'application/pdf' ? 'PDF' : 'file'
+
+  return (
+    <Pressable>
+      <AttachmentCard>
+        <View style={styles.container}>
+          <View style={styles.stack}>
+            <Icon name={iconName} />
+            <AttachmentCardTitle>{filename}</AttachmentCardTitle>
+          </View>
+          <DownloadAttachmentButton
+            to={url}
+            filename={filename}
+            title={`Download ${fileTypeLabel}`}
+          />
+        </View>
+      </AttachmentCard>
+    </Pressable>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    container: {
+      padding: 8,
+      gap: 4,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      minHeight: 48,
+    },
+    stack: {
+      gap: 4,
+      flexDirection: 'row',
+      alignItems: 'center',
+      maxWidth: '70%',
+    },
+    icon: {
+      color: colors.textColorDefaultPrimary,
+      width: 24,
+      height: 24,
+    },
+  })
+}
+
+export function getAttachmentIconName(type: string) {
+  const isImage = type.startsWith('image/')
+  const isVideo = type.startsWith('video/')
+  const isAudio = type.startsWith('audio/')
+  const isPdf = type === 'application/pdf'
+
+  if (isImage) return 'general.outlinedImageFile'
+  if (isVideo) return 'general.outlinedVideoFile'
+  if (isAudio) return 'general.outlinedMusicFile'
+  if (isPdf) return 'general.outlinedPdfFile'
+  return 'general.outlinedGenericFile'
+}

package/src/components/conversation/attachments/giphy_attachment.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import { Text, Image, StyleSheet, Linking, Pressable } from 'react-native'
+import { tokens } from '../../../vendor/tapestry/tokens'
+import { useTheme } from '../../../hooks'
+import { DenormalizedGiphyAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'
+
+export function GiphyAttachment({
+  attachment,
+}: {
+  attachment: DenormalizedGiphyAttachmentResource
+}) {
+  const styles = useStyles()
+  const { title, titleLink, giphy } = attachment
+  const { url, width, height } = giphy.fixedWidth
+
+  function handlePress() {
+    if (titleLink) {
+      // Open Giphy link in the default web browser
+      Linking.openURL(titleLink)
+    }
+  }
+
+  return (
+    <Pressable onPress={handlePress} style={styles.container}>
+      <Image
+        source={{ uri: url }}
+        style={[styles.image, { width, height }]}
+        accessibilityLabel={title}
+      />
+      <Text style={styles.link}>
+        <Text style={styles.tag}>/giphy</Text> {title}
+      </Text>
+    </Pressable>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+  return StyleSheet.create({
+    container: {
+      gap: 4,
+    },
+    image: {
+      borderRadius: 8,
+    },
+    link: {
+      fontSize: tokens.fontSizeSm,
+      color: colors.fillColorInteractionDefault,
+      paddingHorizontal: 8,
+      paddingVertical: 6,
+    },
+    tag: {
+      fontWeight: 'bold',
+    },
+  })
+}

package/src/components/conversation/attachments/image_attachment.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { View, Image, StyleSheet } from 'react-native'
+
+export function ImageAttachment({ attachment }: { attachment: any }) {
+  const styles = useStyles()
+  const { attributes } = attachment
+  const { url, urlMedium, filename, metadata = {} } = attributes
+  const width = metadata.width || 100
+  const height = metadata.height || 100
+  return (
+    <View style={styles.container}>
+      <Image
+        source={{ uri: urlMedium || url }}
+        style={[styles.image, { aspectRatio: width / height }]}
+        accessibilityLabel={filename}
+      />
+    </View>
+  )
+}
+
+const useStyles = () => {
+  return StyleSheet.create({
+    container: {
+      maxWidth: '100%',
+    },
+    image: {
+      borderRadius: 8,
+      minWidth: 200,
+    },
+  })
+}

package/src/components/conversation/attachments/video_attachment.tsx

@@ -0,0 +1,92 @@
+import React, { useRef, useState } from 'react'
+import { View, StyleSheet, Pressable } from 'react-native'
+import { DenormalizedMessageAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'
+import { MESSAGE_ATTACHMENT_WIDTH_SINGLE } from './constants'
+import { IconButton } from '../../display'
+import { Video, VideoPlayerHandle } from '../../../utils/native_adapters'
+
+export function VideoAttachment({
+  attachment,
+}: {
+  attachment: DenormalizedMessageAttachmentResource
+}) {
+  const { attributes } = attachment
+  const { width = MESSAGE_ATTACHMENT_WIDTH_SINGLE, height = MESSAGE_ATTACHMENT_WIDTH_SINGLE } =
+    attributes.metadata || {}
+  const { url } = attributes
+
+  const videoRef = useRef<VideoPlayerHandle>(null)
+  const [isOpen, setIsOpen] = useState(false)
+
+  function openVideo() {
+    if (!isOpen && videoRef.current) {
+      videoRef.current.presentFullscreenPlayer()
+      videoRef.current.play()
+      setIsOpen(true)
+    }
+  }
+
+  function onFullscreenPlayerWillDismiss() {
+    videoRef.current?.pause()
+    setIsOpen(false)
+  }
+
+  const viewRef = useRef<View>(null)
+
+  return (
+    <View style={styles.container} ref={viewRef}>
+      <Pressable onPress={openVideo}>
+        <Video.Player
+          ref={videoRef}
+          source={{ uri: url }}
+          aspectRatio={width / height}
+          style={styles.video}
+          onFullscreenPlayerWillDismiss={onFullscreenPlayerWillDismiss}
+        />
+        {!isOpen && (
+          <View style={styles.playButtonWrapper}>
+            <IconButton
+              name="services.play"
+              size="md"
+              accessibilityLabel="Play Video"
+              onPress={openVideo}
+              style={styles.button}
+            />
+          </View>
+        )}
+      </Pressable>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    maxWidth: 320,
+    maxHeight: 320,
+  },
+  video: {
+    width: '100%',
+    height: 'auto',
+    backgroundColor: 'black',
+    borderRadius: 8,
+  },
+  playButtonWrapper: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  button: {
+    width: 42,
+    height: 42,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 25,
+    backgroundColor: '#eee',
+    borderColor: '#aaa',
+    borderWidth: 1,
+  },
+})

package/src/components/conversation/message.tsx

@@ -8,6 +8,9 @@ import { Avatar, Text } from '../../components/display'
 import { useTheme } from '../../hooks'
 import { MessageResource } from '../../types'
 import { ReactionCountResource } from '../../types/resources/reaction'
+import { MessageAttachments } from './message_attachments'
+import ErrorBoundary from '../page/error_boundary'
+import { MessageMarkdown } from './message_markdown'
 
 /** Message
  * Component for display of a message within a conversation list
@@ -29,7 +32,6 @@ export function Message(props: MessageResource & { conversation_id: number }) {
       reaction_value: reaction.value,
     })
   }
-  if (!text) return null
 
   return (
     <View style={styles.message}>
@@ -41,7 +43,14 @@ export function Message(props: MessageResource & { conversation_id: number }) {
       <View style={styles.messageContent}>
         {!props.mine && <Text variant="tertiary">{props.author.name}</Text>}
         <PlatformPressable style={styles.messageBubble} onLongPress={handleMessagePress}>
-          <Text style={styles.messageText}>{text}</Text>
+          <ErrorBoundary>
+            <MessageAttachments attachments={props.attachments} />
+          </ErrorBoundary>
+          {text && (
+            <View style={styles.messageText}>
+              <MessageMarkdown text={text} />
+            </View>
+          )}
         </PlatformPressable>
         <View style={styles.messageReactions}>
           {reactionCounts.map(reaction => (
@@ -76,12 +85,12 @@ const useMessageStyles = ({ mine }: MessageResource) => {
     },
     messageBubble: {
       backgroundColor: mine ? activeColor : colors.fillColorNeutral070,
-      borderRadius: 12,
-      paddingVertical: 6,
-      paddingHorizontal: 8,
+      borderRadius: 8,
+      maxWidth: 232,
     },
     messageText: {
-      color: colors.textColorDefaultPrimary,
+      paddingVertical: 6,
+      paddingHorizontal: 8,
     },
     messageReactions: {
       flexDirection: 'row',

package/src/components/conversation/message_attachments.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import { DenormalizedAttachmentResource } from '../../types/resources/denormalized_attachment_resource'
+import { AudioAttachment } from './attachments/audio_attachment'
+import { VideoAttachment } from './attachments/video_attachment'
+import { GiphyAttachment } from './attachments/giphy_attachment'
+import { GenericFileAttachment } from './attachments/generic_file_attachment'
+import { ExpandedLink } from './attachments/expanded_link'
+import { ImageAttachment } from './attachments/image_attachment'
+
+export function MessageAttachments(props: { attachments: DenormalizedAttachmentResource[] }) {
+  const styles = useStyles()
+  const { attachments } = props
+  if (!attachments || attachments.length === 0) return null
+  return (
+    <View style={styles.attachmentsContainer}>
+      {attachments.map(attachment => {
+        switch (attachment.type) {
+          case 'MessageAttachment':
+            return <MessageAttachment key={attachment.id} attachment={attachment} />
+          case 'giphy':
+            return (
+              <GiphyAttachment
+                key={attachment.id || attachment.titleLink}
+                attachment={attachment}
+              />
+            )
+          case 'ExpandedLink':
+            return <ExpandedLink key={attachment.id} attachment={attachment} />
+          default:
+            return null
+        }
+      })}
+    </View>
+  )
+}
+
+function MessageAttachment({ attachment }: { attachment: any }) {
+  const { attributes } = attachment
+  const contentType = attributes?.contentType
+  const basicType = contentType ? contentType.split('/')[0] : ''
+  switch (basicType) {
+    case 'image':
+      return <ImageAttachment attachment={attachment} />
+    case 'video':
+      return <VideoAttachment attachment={attachment} />
+    case 'audio':
+      return <AudioAttachment attachment={attachment} />
+    default:
+      return <GenericFileAttachment attachment={attachment} />
+  }
+}
+
+const useStyles = () => {
+  return StyleSheet.create({
+    attachmentsContainer: {
+      gap: 4,
+      padding: 2,
+    },
+  })
+}

package/src/components/conversation/message_markdown.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { Linking, StyleSheet } from 'react-native'
+import { Text } from '../display'
+import { parseSimpleMarkdown } from '../../utils/parse_simple_markdown'
+
+interface Props {
+  text: string
+}
+
+export function MessageMarkdown({ text }: Props) {
+  if (!text) return null
+
+  // Skip markdown for excessively long messages for performance reasons
+  if (text.length > 5000) return <Text>{text}</Text>
+
+  const parsed = parseSimpleMarkdown(text)
+
+  return (
+    <Text>
+      {parsed.map((part, i) => {
+        switch (part.type) {
+          case 'bold':
+            return (
+              <Text key={i} style={styles.bold}>
+                {part.content}
+              </Text>
+            )
+          case 'italic':
+            return (
+              <Text key={i} style={styles.italic}>
+                {part.content}
+              </Text>
+            )
+          case 'link':
+            return (
+              <Text key={i} style={styles.link} onPress={() => Linking.openURL(part.content)}>
+                {part.content}
+              </Text>
+            )
+          default:
+            return <Text key={i}>{part.content}</Text>
+        }
+      })}
+    </Text>
+  )
+}
+
+const styles = StyleSheet.create({
+  bold: { fontWeight: 'bold' },
+  italic: { fontStyle: 'italic' },
+  link: { color: 'blue', textDecorationLine: 'underline' },
+})

package/src/components/conversations/conversation_preview.tsx

@@ -0,0 +1,84 @@
+import React from 'react'
+import { Pressable, StyleSheet, View } from 'react-native'
+import { ConversationResource } from '../../types'
+import { AvatarGroup, Heading, Text, Badge } from '../display'
+import { formatDatePreview } from '../../utils/date'
+import { useTheme } from '../../hooks'
+import { UnreadCountBadge } from './unread_count_badge'
+
+interface ConversationPreviewProps {
+  conversation: ConversationResource
+  onPress: () => void
+}
+
+export const ConversationPreview = ({ conversation, onPress }: ConversationPreviewProps) => {
+  const styles = useStyles()
+  const {
+    lastMessageAuthorName,
+    lastMessageCreatedAt,
+    lastMessageTextPreview,
+    previewAvatarUrls,
+    title,
+    unreadCount,
+    badges,
+  } = conversation
+  return (
+    <Pressable style={styles.previewRow} onPress={onPress}>
+      <AvatarGroup size="lg" sourceUris={previewAvatarUrls || []} />
+      <View style={styles.conversationBody}>
+        <Heading numberOfLines={1} variant="h3" style={styles.title}>
+          {title}
+        </Heading>
+        <Text variant="tertiary" numberOfLines={2}>
+          {lastMessageAuthorName}: {lastMessageTextPreview}
+        </Text>
+        <View style={styles.badges}>
+          {badges?.map(badge => (
+            <Badge
+              key={badge.text}
+              variant="meta"
+              productLogoName={badge.appName}
+              label={badge.pcoResourceType}
+              metaLabel={badge.text || ''}
+            />
+          ))}
+        </View>
+      </View>
+      <View style={styles.metaContainer}>
+        <Text variant="tertiary">{formatDatePreview(lastMessageCreatedAt)}</Text>
+        <UnreadCountBadge count={unreadCount} />
+      </View>
+    </Pressable>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    previewRow: {
+      flexDirection: 'row',
+      gap: 8,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.borderColorDefaultDim,
+      paddingTop: 12,
+      paddingBottom: 12,
+      paddingHorizontal: 16,
+    },
+    title: {
+      fontSize: 16,
+      color: colors.textColorDefaultPrimary,
+    },
+    conversationBody: {
+      flex: 1,
+      rowGap: 2,
+    },
+    metaContainer: {
+      rowGap: 4,
+    },
+    badges: {
+      marginTop: 4,
+      alignItems: 'flex-start',
+    },
+  })
+}

package/src/components/conversations/conversations.tsx

@@ -0,0 +1,79 @@
+import { useNavigation } from '@react-navigation/native'
+import { FlashList } from '@shopify/flash-list'
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { useTheme } from '../../hooks'
+import { useConversationsJoltEvents } from '../../hooks/use_conversation_jolt_events'
+import { useConversations } from '../../hooks/use_conversations'
+import { Text } from '../display'
+import { ConversationRequestArgs } from '../../utils/request/conversation'
+import { ConversationPreview } from './conversation_preview'
+
+interface ConversationsProps extends Partial<ConversationRequestArgs> {
+  ListHeaderComponent?:
+    | React.ComponentType<any>
+    | React.ReactElement<any, string | React.JSXElementConstructor<any>>
+    | null
+    | undefined
+}
+
+export const Conversations = ({
+  ListHeaderComponent,
+  filter,
+  group,
+  gids,
+  group_source_app_name,
+}: ConversationsProps) => {
+  const styles = useStyles()
+
+  const { conversations, fetchNextPage, refetch, isRefetching, isFetched } = useConversations({
+    filter,
+    group,
+    gids,
+    group_source_app_name,
+  })
+  const navigation = useNavigation()
+
+  useConversationsJoltEvents()
+
+  return (
+    <View style={styles.container}>
+      <FlashList
+        data={conversations}
+        estimatedItemSize={97}
+        contentContainerStyle={styles.contentContainer}
+        onRefresh={refetch}
+        refreshing={!isFetched && isRefetching}
+        ListHeaderComponent={ListHeaderComponent}
+        ListEmptyComponent={
+          <View style={styles.listEmpty}>
+            <Text variant="secondary">No conversations found</Text>
+          </View>
+        }
+        renderItem={({ item }) => (
+          <ConversationPreview
+            conversation={item}
+            onPress={() => navigation.navigate('Conversation', { conversation_id: item.id })}
+          />
+        )}
+        onEndReached={() => fetchNextPage()}
+      />
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    container: { flex: 1 },
+    contentContainer: { paddingVertical: 16 },
+    listItem: { color: colors.fillColorNeutral020 },
+    listEmpty: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingVertical: 16,
+    },
+  })
+}

package/src/components/conversations/unread_count_badge.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Text } from '../display'
+import { useTheme } from '../../hooks'
+import { platformFontWeightBold } from '../../utils'
+
+export const UnreadCountBadge = ({ count }: { count: number }) => {
+  const styles = useStyles()
+  const displayCount = count > 99 ? '99+' : count
+
+  if (count === 0) return null
+
+  return (
+    <View style={styles.badge}>
+      <Text variant="footnote" style={styles.count}>
+        {displayCount}
+      </Text>
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    badge: {
+      alignSelf: 'flex-end',
+      backgroundColor: colors.fillColorInteractionDefault,
+      paddingVertical: 2,
+      paddingHorizontal: 8,
+      borderRadius: 24,
+    },
+    count: {
+      fontWeight: platformFontWeightBold,
+      color: 'white',
+    },
+  })
+}