@planningcenter/chat-react-native 3.1.0-rc.9 → 3.2.0-rc.0

package/src/__tests__/utils/parse_simple_markdown.ts

@@ -0,0 +1,93 @@
+import { parseSimpleMarkdown } from '../../utils/parse_simple_markdown'
+
+describe('parseSimpleMarkdown', () => {
+  it('parses bold text correctly', () => {
+    const input = 'This is **bold** text'
+    const result = parseSimpleMarkdown(input)
+    expect(result).toEqual([
+      { type: 'text', content: 'This is ' },
+      { type: 'bold', content: 'bold' },
+      { type: 'text', content: ' text' },
+    ])
+  })
+
+  it('parses italic text correctly', () => {
+    const input = 'This is *italic* text'
+    const result = parseSimpleMarkdown(input)
+    expect(result).toEqual([
+      { type: 'text', content: 'This is ' },
+      { type: 'italic', content: 'italic' },
+      { type: 'text', content: ' text' },
+    ])
+  })
+
+  it('parses links correctly', () => {
+    const input = 'Visit https://example.com/page?query=info&number=1#hash. for more info'
+    const result = parseSimpleMarkdown(input)
+    expect(result).toEqual([
+      { type: 'text', content: 'Visit ' },
+      { type: 'link', content: 'https://example.com/page?query=info&number=1#hash' },
+      { type: 'text', content: '.' },
+      { type: 'text', content: ' for more info' },
+    ])
+  })
+
+  it('parses mixed formatting correctly', () => {
+    const input = 'This is **bold** and *italic* and a link: https://example.com'
+    const result = parseSimpleMarkdown(input)
+    expect(result).toEqual([
+      { type: 'text', content: 'This is ' },
+      { type: 'bold', content: 'bold' },
+      { type: 'text', content: ' and ' },
+      { type: 'italic', content: 'italic' },
+      { type: 'text', content: ' and a link: ' },
+      { type: 'link', content: 'https://example.com' },
+    ])
+  })
+
+  it('parses unordered lists correctly', () => {
+    const input = '* Item 1\n* Item 2\n* Item 3'
+    const result = parseSimpleMarkdown(input)
+    expect(result).toEqual([{ type: 'text', content: '* Item 1\n* Item 2\n* Item 3' }])
+  })
+
+  it('parses ordered lists correctly', () => {
+    const input = '1. Item 1\n2. Item 2\n3. Item 3'
+    const result = parseSimpleMarkdown(input)
+    expect(result).toEqual([{ type: 'text', content: '1. Item 1\n2. Item 2\n3. Item 3' }])
+  })
+
+  it('handles plain text without formatting', () => {
+    const input = 'Just plain text'
+    const result = parseSimpleMarkdown(input)
+    expect(result).toEqual([{ type: 'text', content: 'Just plain text' }])
+  })
+
+  it('handles empty input', () => {
+    const input = ''
+    const result = parseSimpleMarkdown(input)
+    expect(result).toEqual([])
+  })
+
+  it('handles multiple consecutive formatting', () => {
+    const input = '**bold** *italic* https://example.com'
+    const result = parseSimpleMarkdown(input)
+    expect(result).toEqual([
+      { type: 'bold', content: 'bold' },
+      { type: 'text', content: ' ' },
+      { type: 'italic', content: 'italic' },
+      { type: 'text', content: ' ' },
+      { type: 'link', content: 'https://example.com' },
+    ])
+  })
+
+  it('handles unmatched formatting gracefully', () => {
+    const input = 'This is **bold and *italic'
+    const result = parseSimpleMarkdown(input)
+    expect(result).toEqual([
+      { type: 'text', content: 'This is ' },
+      { type: 'italic', content: '*bold and ' },
+      { type: 'text', content: 'italic' },
+    ])
+  })
+})

package/src/__tests__/utils/pluralize.tsx

@@ -0,0 +1,17 @@
+import { pluralize } from '../../utils'
+
+describe('pluralize', () => {
+  it('includes count and adds an s', () => {
+    expect(pluralize(0, 'kid')).toEqual('0 kids')
+    expect(pluralize(1, 'kid')).toEqual('1 kid')
+    expect(pluralize(2, 'kid')).toEqual('2 kids')
+    expect(pluralize(10, 'kid')).toEqual('10 kids')
+  })
+  it('can optionally not include count', () => {
+    expect(pluralize(1, 'kid', false)).toEqual('kid')
+    expect(pluralize(2, 'kid', false)).toEqual('kids')
+  })
+  it('can convert "person" to "people"', () => {
+    expect(pluralize(2, 'person', false)).toEqual('people')
+  })
+})

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

@@ -0,0 +1,46 @@
+import React, { ComponentProps, ReactNode } from 'react'
+import { StyleSheet, View } from 'react-native'
+import { MESSAGE_ATTACHMENT_WIDTH_SINGLE } from './constants'
+import { Text } from '../../display'
+import { tokens } from '../../../vendor/tapestry/tokens'
+import { useTheme } from '../../../hooks'
+
+type AttachmentCardProps = ComponentProps<typeof View>
+
+export function AttachmentCard({ children, ...props }: AttachmentCardProps) {
+  const styles = useStyles()
+
+  return (
+    <View style={styles.card} {...props}>
+      {children}
+    </View>
+  )
+}
+
+export function AttachmentCardTitle({ children }: { children: ReactNode }) {
+  const styles = useStyles()
+
+  return (
+    <Text style={styles.title} numberOfLines={1} ellipsizeMode="tail" selectable={false}>
+      {children}
+    </Text>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    card: {
+      padding: 4,
+      backgroundColor: 'white',
+      borderRadius: 8,
+      minWidth: MESSAGE_ATTACHMENT_WIDTH_SINGLE,
+      minHeight: 48,
+    },
+    title: {
+      color: colors.textColorDefaultPrimary,
+      fontSize: tokens.fontSizeSm,
+    },
+  })
+}

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

@@ -0,0 +1,102 @@
+import React from 'react'
+import { View, Text, StyleSheet } from 'react-native'
+import { DenormalizedMessageAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'
+import { IconButton } from '../../display'
+import { AttachmentCard, AttachmentCardTitle } from './attachment_card'
+import { tokens } from '../../../vendor/tapestry/tokens'
+import { useTheme } from '../../../hooks'
+import { Audio } from '../../../utils/native_adapters'
+
+export function AudioAttachment({
+  attachment,
+}: {
+  attachment: DenormalizedMessageAttachmentResource
+}) {
+  const styles = useStyles()
+  const { attributes } = attachment
+  const { url, filename } = attributes
+  const sound = Audio.useAudio(url)
+
+  function toggleAudio() {
+    if (!sound.isPlaying) {
+      sound.play()
+    } else {
+      sound.pause()
+    }
+  }
+
+  const progress = sound.duration > 0 ? sound.position / sound.duration : 0
+
+  function durationText() {
+    if (sound.duration > 0) {
+      return `${Math.floor(sound.position / 1000)}s / ${Math.floor(sound.duration / 1000)}s`
+    } else {
+      return 'Loading...'
+    }
+  }
+
+  return (
+    <AttachmentCard>
+      <View style={styles.container}>
+        <IconButton
+          name={sound.isPlaying ? 'services.pause' : 'services.play'}
+          size="md"
+          accessibilityLabel={sound.isPlaying ? 'Pause' : 'Play'}
+          onPress={toggleAudio}
+          disabled={!sound}
+          style={styles.button}
+        />
+        <View style={styles.details}>
+          <AttachmentCardTitle>{filename}</AttachmentCardTitle>
+          <View style={styles.progressContainer}>
+            <View style={[styles.progressBar, { width: `${progress * 100}%` }]} />
+          </View>
+          <Text style={styles.durationText}>{durationText()}</Text>
+        </View>
+      </View>
+    </AttachmentCard>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+    },
+    button: {
+      width: 42,
+      height: 42,
+      justifyContent: 'center',
+      alignItems: 'center',
+      borderRadius: 25,
+      backgroundColor: '#eee',
+      borderColor: '#aaa',
+      borderWidth: 1,
+    },
+    buttonText: {
+      fontSize: 32,
+      lineHeight: 32,
+    },
+    details: {
+      flex: 1,
+      marginLeft: 10,
+      gap: 5,
+    },
+    progressContainer: {
+      height: 5,
+      backgroundColor: '#ccc',
+      borderRadius: 2.5,
+      overflow: 'hidden',
+    },
+    progressBar: {
+      height: '100%',
+      backgroundColor: 'blue',
+    },
+    durationText: {
+      fontSize: tokens.fontSizeXs,
+      color: colors.textColorDefaultSecondary,
+    },
+  })
+}

package/src/components/conversation/attachments/constants.ts

@@ -0,0 +1,5 @@
+const MESSAGE_BUBBLE_ATTACHMENT_PADDING = 2
+
+export const MESSAGE_BUBBLE_WIDTH_SINGLE = 232
+export const MESSAGE_ATTACHMENT_WIDTH_SINGLE =
+  MESSAGE_BUBBLE_WIDTH_SINGLE - MESSAGE_BUBBLE_ATTACHMENT_PADDING * 2

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

@@ -0,0 +1,46 @@
+import React from 'react'
+import { IconButton } from '../../display'
+import { useTheme } from '../../../hooks'
+import { Linking, StyleSheet } from 'react-native'
+
+interface DownloadAttachmentButtonProps {
+  to: string
+  filename: string
+  title: string
+}
+
+export function DownloadAttachmentButton({ to, title }: DownloadAttachmentButtonProps) {
+  const styles = useStyles()
+  async function handleDownload() {
+    if (to) {
+      // Open link in the default web browser
+      Linking.openURL(to)
+    }
+  }
+
+  return (
+    <IconButton
+      name="general.fromCloudArrow"
+      size="md"
+      accessibilityLabel={title}
+      onPress={handleDownload}
+      style={styles.iconButton}
+    />
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    iconButton: {
+      color: colors.fillColorInteractionDefault,
+      backgroundColor: colors.fillColorNeutral070,
+      borderWidth: 1,
+      borderColor: colors.fillColorNeutral060,
+      borderRadius: 4,
+      width: 24,
+      height: 24,
+    },
+  })
+}

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',