@planningcenter/chat-react-native 3.2.0-rc.25 → 3.2.0-rc.27

package/build/utils/upload_uri.js

@@ -0,0 +1,60 @@
+import DeviceInfo from 'react-native-device-info';
+const brand = DeviceInfo.getBrand();
+const model = DeviceInfo.getModel();
+const systemName = DeviceInfo.getSystemName();
+const systemVersion = DeviceInfo.getSystemVersion();
+const readableVersion = DeviceInfo.getReadableVersion();
+const appName = DeviceInfo.getApplicationName();
+/**
+ * This is for accessing https://github.com/planningcenter/upload
+ */
+export class UploadUri {
+    session;
+    app;
+    constructor({ session }) {
+        this.session = session;
+    }
+    get schema() {
+        if (this.env === 'development') {
+            return 'http';
+        }
+        else {
+            return 'https';
+        }
+    }
+    get host() {
+        return `${this.subdomain}.${this.domain}.${this.tld}`;
+    }
+    get subdomain() {
+        switch (this.env) {
+            case 'staging':
+                return 'upload-staging';
+            default:
+                return 'upload';
+        }
+    }
+    get domain() {
+        return this.env === 'development' ? 'pco' : 'planningcenteronline';
+    }
+    get tld() {
+        switch (this.env) {
+            case 'development':
+                return 'test';
+            default:
+                return 'com';
+        }
+    }
+    get env() {
+        return this.session?.env || 'production';
+    }
+    get baseUrl() {
+        return `${this.schema}://${this.host}`;
+    }
+    get headers() {
+        return {
+            'User-Agent': `${appName}/${readableVersion} (${brand}, ${model}, ${systemName}, ${systemVersion})`,
+            Authorization: `Bearer ${this.session.token?.access_token}`,
+        };
+    }
+}
+//# sourceMappingURL=upload_uri.js.map

package/build/utils/upload_uri.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"upload_uri.js","sourceRoot":"","sources":["../../src/utils/upload_uri.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,0BAA0B,CAAA;AAEjD,MAAM,KAAK,GAAG,UAAU,CAAC,QAAQ,EAAE,CAAA;AACnC,MAAM,KAAK,GAAG,UAAU,CAAC,QAAQ,EAAE,CAAA;AACnC,MAAM,UAAU,GAAG,UAAU,CAAC,aAAa,EAAE,CAAA;AAC7C,MAAM,aAAa,GAAG,UAAU,CAAC,gBAAgB,EAAE,CAAA;AACnD,MAAM,eAAe,GAAG,UAAU,CAAC,kBAAkB,EAAE,CAAA;AACvD,MAAM,OAAO,GAAG,UAAU,CAAC,kBAAkB,EAAE,CAAA;AAE/C;;GAEG;AACH,MAAM,OAAO,SAAS;IACpB,OAAO,CAAS;IAChB,GAAG,CAAS;IAEZ,YAAY,EAAE,OAAO,EAAwB;QAC3C,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;IACxB,CAAC;IAED,IAAI,MAAM;QACR,IAAI,IAAI,CAAC,GAAG,KAAK,aAAa,EAAE,CAAC;YAC/B,OAAO,MAAM,CAAA;QACf,CAAC;aAAM,CAAC;YACN,OAAO,OAAO,CAAA;QAChB,CAAC;IACH,CAAC;IAED,IAAI,IAAI;QACN,OAAO,GAAG,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,GAAG,EAAE,CAAA;IACvD,CAAC;IAED,IAAI,SAAS;QACX,QAAQ,IAAI,CAAC,GAAG,EAAE,CAAC;YACjB,KAAK,SAAS;gBACZ,OAAO,gBAAgB,CAAA;YACzB;gBACE,OAAO,QAAQ,CAAA;QACnB,CAAC;IACH,CAAC;IAED,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,GAAG,KAAK,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,sBAAsB,CAAA;IACpE,CAAC;IAED,IAAI,GAAG;QACL,QAAQ,IAAI,CAAC,GAAG,EAAE,CAAC;YACjB,KAAK,aAAa;gBAChB,OAAO,MAAM,CAAA;YACf;gBACE,OAAO,KAAK,CAAA;QAChB,CAAC;IACH,CAAC;IAED,IAAI,GAAG;QACL,OAAO,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,YAAY,CAAA;IAC1C,CAAC;IAED,IAAI,OAAO;QACT,OAAO,GAAG,IAAI,CAAC,MAAM,MAAM,IAAI,CAAC,IAAI,EAAE,CAAA;IACxC,CAAC;IAED,IAAI,OAAO;QACT,OAAO;YACL,YAAY,EAAE,GAAG,OAAO,IAAI,eAAe,KAAK,KAAK,KAAK,KAAK,KAAK,UAAU,KAAK,aAAa,GAAG;YACnG,aAAa,EAAE,UAAU,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,YAAY,EAAE;SAC5D,CAAA;IACH,CAAC;CACF","sourcesContent":["import DeviceInfo from 'react-native-device-info'\nimport { Session } from './session'\nconst brand = DeviceInfo.getBrand()\nconst model = DeviceInfo.getModel()\nconst systemName = DeviceInfo.getSystemName()\nconst systemVersion = DeviceInfo.getSystemVersion()\nconst readableVersion = DeviceInfo.getReadableVersion()\nconst appName = DeviceInfo.getApplicationName()\n\n/**\n * This is for accessing https://github.com/planningcenter/upload\n */\nexport class UploadUri {\n  session: Session\n  app?: string\n\n  constructor({ session }: { session: Session }) {\n    this.session = session\n  }\n\n  get schema() {\n    if (this.env === 'development') {\n      return 'http'\n    } else {\n      return 'https'\n    }\n  }\n\n  get host() {\n    return `${this.subdomain}.${this.domain}.${this.tld}`\n  }\n\n  get subdomain() {\n    switch (this.env) {\n      case 'staging':\n        return 'upload-staging'\n      default:\n        return 'upload'\n    }\n  }\n\n  get domain(): 'pco' | 'planningcenteronline' {\n    return this.env === 'development' ? 'pco' : 'planningcenteronline'\n  }\n\n  get tld() {\n    switch (this.env) {\n      case 'development':\n        return 'test'\n      default:\n        return 'com'\n    }\n  }\n\n  get env() {\n    return this.session?.env || 'production'\n  }\n\n  get baseUrl() {\n    return `${this.schema}://${this.host}`\n  }\n\n  get headers() {\n    return {\n      'User-Agent': `${appName}/${readableVersion} (${brand}, ${model}, ${systemName}, ${systemVersion})`,\n      Authorization: `Bearer ${this.session.token?.access_token}`,\n    }\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.2.0-rc.25",
+  "version": "3.2.0-rc.27",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -55,5 +55,5 @@
     "prettier": "^3.4.2",
     "typescript": "<5.6.0"
   },
-  "gitHead": "5341fc7d2489707a08f20ce39b3fef50cbe9d5c5"
+  "gitHead": "38c6eb6290424c017191c143c533a192de92d02d"
 }

package/src/components/conversation/message_form/message_form_attachment_image.tsx

@@ -0,0 +1,121 @@
+import React from 'react'
+import {
+  AnimatableNumericValue,
+  DimensionValue,
+  Image as ReactNativeImage,
+  StyleSheet,
+  View,
+} from 'react-native'
+import { FileAttachment } from '../../../hooks/use_attachment_uploader'
+import { useTheme } from '../../../hooks'
+import { Icon, IconButton, Spinner } from '../../display'
+
+interface Props {
+  uri: string
+  alt: string
+  status: FileAttachment['status']
+  width?: number
+  height?: number
+  removeAttachment: () => void
+}
+
+export function MessageFormAttachmentImage({ uri, alt, status, removeAttachment }: Props) {
+  function opacity() {
+    if (status === 'uploading') {
+      return 0.5
+    }
+    return 1
+  }
+  const styles = useStyles({
+    width: 50,
+    height: 50,
+    borderRadius: 8,
+  })
+  const loading = status === 'uploading'
+  const error = status === 'error'
+  const ready = status === 'success'
+
+  return (
+    <View
+      accessible={Boolean(alt)}
+      accessibilityRole="image"
+      accessibilityState={{ busy: loading }}
+    >
+      <ReactNativeImage source={{ uri }} style={[styles.image, { opacity: opacity() }]} alt={alt} />
+      {ready && (
+        <IconButton
+          name="general.x"
+          accessibilityLabel="Remove Attachment"
+          size="md"
+          style={styles.removeAttachmentIcon}
+          onPress={removeAttachment}
+        />
+      )}
+      {loading && (
+        <View style={[styles.loadingBackground]}>
+          <Spinner size={24} />
+        </View>
+      )}
+      {error && (
+        <View style={styles.errorBackground}>
+          <View style={styles.errorIconBackground}>
+            <Icon name="churchCenter.exclamationCircle" size={18} color="red" />
+          </View>
+        </View>
+      )}
+    </View>
+  )
+}
+
+interface Styles {
+  width: DimensionValue
+  height: DimensionValue
+  borderRadius: AnimatableNumericValue | string
+}
+
+const useStyles = ({ width, height, borderRadius }: Styles) => {
+  const { colors } = useTheme()
+
+  return StyleSheet.create({
+    image: {
+      backgroundColor: colors.fillColorNeutral070,
+      width,
+      height,
+      borderRadius,
+    },
+    removeAttachmentIcon: {
+      position: 'absolute',
+      top: 4,
+      right: 4,
+      backgroundColor: 'rgba(255, 255, 255, 0.5)',
+      borderRadius: 24,
+      width: 24,
+      height: 24,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    loadingBackground: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      borderRadius,
+      width,
+      height,
+    },
+    errorBackground: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      borderRadius,
+      width,
+      height,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    errorIconBackground: {
+      backgroundColor: 'white',
+      padding: 2,
+      borderRadius: 50,
+    },
+  })
+}

package/src/components/conversation/message_form.tsx

@@ -1,5 +1,5 @@
 import { useNavigation, useTheme as useNavigationTheme, useRoute } from '@react-navigation/native'
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useCallback, useContext, useEffect, useState } from 'react'
 import { StyleSheet, TextInput, View, ViewProps } from 'react-native'
 import { IconButton, Text } from '../../components'
 import { useTheme } from '../../hooks'
@@ -7,6 +7,13 @@ import { ConversationResource } from '../../types'
 import { useMessageCreate } from '../../hooks/use_message_create'
 import { ConversationScreenProps } from '../../screens/conversation_screen'
 import { ChatContext } from '../../contexts/chat_context'
+import { ImagePicker, ImagePickerResult } from '../../utils/native_adapters'
+import { useAttachmentUploader } from '../../hooks/use_attachment_uploader'
+import {
+  DenormalizedAttachmentResourceForCreate,
+  DenormalizedMessageAttachmentResourceForCreate,
+} from '../../types/resources/denormalized_attachment_resource'
+import { MessageFormAttachmentImage } from './message_form/message_form_attachment_image'
 
 export const MessageForm = {
   Root: MessageFormRoot,
@@ -20,7 +27,16 @@ interface MessagesFormRootProps extends ViewProps {
   conversation: ConversationResource
 }
 
-const MessageFormContext = React.createContext({
+const MessageFormContext = React.createContext<{
+  text: string
+  setText: (text: string) => void
+  onSubmit: () => void
+  disabled: boolean
+  canGiphy: boolean
+  usingGiphy: boolean
+  setUsingGiphy: (usingGiphy: boolean) => void
+  attachmentUploader?: ReturnType<typeof useAttachmentUploader>
+}>({
   text: '',
   setText: (_text: string) => {},
   onSubmit: () => {},
@@ -38,7 +54,25 @@ function MessageFormRoot({ conversation, children }: MessagesFormRootProps) {
   const [usingGiphy, setUsingGiphy] = useState(false)
   const navigation = useNavigation()
   const route = useRoute() as ConversationScreenProps['route']
-  const { status, isPending, reset, mutate } = useMessageCreate({ conversationId: conversation.id })
+  const {
+    status,
+    isPending,
+    reset: resetMutation,
+    mutate,
+  } = useMessageCreate({
+    conversationId: conversation.id,
+  })
+  const attachmentUploader = useAttachmentUploader({
+    conversationId: conversation.id,
+  })
+  const resetAttachmentUploader = attachmentUploader.reset
+
+  const reset = useCallback(() => {
+    resetAttachmentUploader()
+    resetMutation()
+    setText('')
+    setUsingGiphy(false)
+  }, [resetAttachmentUploader, resetMutation])
 
   useEffect(() => {
     if (canGiphy && !usingGiphy && text.startsWith('/giphy ')) {
@@ -50,7 +84,6 @@ function MessageFormRoot({ conversation, children }: MessagesFormRootProps) {
   useEffect(() => {
     switch (status) {
       case 'success':
-        setText('')
         reset()
         break
     }
@@ -58,15 +91,16 @@ function MessageFormRoot({ conversation, children }: MessagesFormRootProps) {
 
   useEffect(() => {
     if (route.params.clear_input) {
-      setText('')
-      setUsingGiphy(false)
+      reset()
       navigation.setParams({ ...route.params, clear_input: false })
     }
-  }, [navigation, route.params])
+  }, [reset, navigation, route.params])
 
   const canSubmit = (() => {
     if (isPending) return false
+    if (attachmentUploader?.pendingUploads) return false
     if (text.length > 0) return true
+    if (attachmentUploader?.attachments?.length) return true
     return false
   })()
   const disabled = !canSubmit
@@ -81,7 +115,16 @@ function MessageFormRoot({ conversation, children }: MessagesFormRootProps) {
         search_term: text,
       })
     } else {
-      mutate({ text })
+      let attachmentsForSubmit: DenormalizedAttachmentResourceForCreate[] = []
+      if (attachmentUploader?.attachmentIds) {
+        attachmentsForSubmit = attachmentUploader.attachmentIds.map(
+          (id: string): DenormalizedMessageAttachmentResourceForCreate => ({
+            type: 'MessageAttachment',
+            id,
+          })
+        )
+      }
+      mutate({ text, attachments: attachmentsForSubmit })
     }
   }
 
@@ -95,6 +138,7 @@ function MessageFormRoot({ conversation, children }: MessagesFormRootProps) {
         canGiphy,
         usingGiphy,
         setUsingGiphy,
+        attachmentUploader,
       }}
     >
       <View style={styles.textInputContainer}>{children}</View>
@@ -102,25 +146,63 @@ function MessageFormRoot({ conversation, children }: MessagesFormRootProps) {
   )
 }
 
+function MessageFormAttachments() {
+  const styles = useMessageFormStyles()
+  const { attachmentUploader } = React.useContext(MessageFormContext)
+  const numberOfAttachments = attachmentUploader?.attachments?.length || 0
+  const attachments = attachmentUploader?.attachments || []
+
+  if (numberOfAttachments === 0) {
+    return null
+  }
+
+  return (
+    <View style={styles.messageFormAttachments}>
+      {attachments.map(attachment => {
+        return (
+          <MessageFormAttachmentImage
+            key={attachment.file.uri}
+            uri={attachment.file.uri}
+            alt={attachment.file.name}
+            status={attachment.status}
+            width={attachment.file.width}
+            height={attachment.file.height}
+            removeAttachment={() => {
+              attachmentUploader?.removeAttachment(attachment)
+            }}
+          />
+        )
+      })}
+    </View>
+  )
+}
+
 function MessageFormInput() {
   const styles = useMessageFormStyles()
-  const { text, setText, onSubmit, usingGiphy } = React.useContext(MessageFormContext)
+  const { text, setText, onSubmit, usingGiphy, attachmentUploader } =
+    React.useContext(MessageFormContext)
+  const attachmentError = attachmentUploader?.errorMessage
 
   return (
-    <View style={styles.textInput}>
-      {usingGiphy ? (
-        <View style={styles.giphyBadge}>
-          <Text>/Giphy</Text>
-        </View>
-      ) : null}
-
-      <TextInput
-        aria-disabled={true}
-        placeholder="Send a message"
-        onChangeText={setText}
-        value={text}
-        onSubmitEditing={onSubmit}
-      />
+    <View style={styles.textInputBoundary}>
+      <MessageFormAttachments />
+      <View style={styles.textInput}>
+        {usingGiphy ? (
+          <View style={styles.giphyBadge}>
+            <Text>/Giphy</Text>
+          </View>
+        ) : null}
+
+        <TextInput
+          aria-disabled={true}
+          placeholder="Send a message"
+          onChangeText={setText}
+          value={text}
+          onSubmitEditing={onSubmit}
+        />
+      </View>
+
+      {attachmentError ? <Text style={styles.inputErrorMessage}>{attachmentError}</Text> : null}
     </View>
   )
 }
@@ -143,19 +225,82 @@ function MessageFormSubmitBtn() {
 }
 
 function MessageFormAttachmentPicker() {
-  const { usingGiphy } = React.useContext(MessageFormContext)
+  const styles = useMessageFormStyles()
+  const { usingGiphy, attachmentUploader } = React.useContext(MessageFormContext)
+  const [isOpen, setIsOpen] = useState(false)
+
+  function uploadImagePickerResult(result: ImagePickerResult) {
+    if (result.canceled) {
+      return
+    }
+
+    const filteredAssets = result.assets
+      .filter(asset => {
+        return asset.fileSize && asset.fileName && asset.mimeType
+      })
+      .map(asset => {
+        return {
+          uri: asset.uri,
+          name: asset.fileName as string,
+          type: asset.mimeType as string,
+          size: asset.fileSize as number,
+          height: asset.height,
+          width: asset.width,
+        }
+      })
+
+    attachmentUploader?.handleFilesAttached(filteredAssets)
+  }
+
+  const openCamera = async () => {
+    setIsOpen(false)
+    let result = await ImagePicker.openCameraAsync()
+    if (!result.canceled) {
+      uploadImagePickerResult(result)
+    }
+  }
+
+  const pickImage = async () => {
+    setIsOpen(false)
+    let result = await ImagePicker.openImageLibraryAsync()
+    if (!result.canceled) {
+      uploadImagePickerResult(result)
+    }
+  }
 
   if (usingGiphy) {
     return null
   }
 
   return (
-    <IconButton
-      accessibilityLabel="Shazam"
-      size="md"
-      appearance="neutral"
-      name={'general.paperclip'}
-    />
+    // TODO: Design Pass
+    <View style={styles.attachmentPicker}>
+      {isOpen && (
+        <View style={styles.attachmentPickerButtons}>
+          <IconButton
+            accessibilityLabel="Take a photo"
+            size="md"
+            appearance="neutral"
+            name={'general.videoCamera'}
+            onPress={openCamera}
+          />
+          <IconButton
+            accessibilityLabel="Choose a photo"
+            size="md"
+            appearance="neutral"
+            name={'churchCenter.photosIos'}
+            onPress={pickImage}
+          />
+        </View>
+      )}
+      <IconButton
+        accessibilityLabel="File Menu"
+        size="md"
+        appearance="neutral"
+        name={'general.outlinedPlusCircle'}
+        onPress={() => setIsOpen(!isOpen)}
+      />
+    </View>
   )
 }
 
@@ -203,13 +348,16 @@ const useMessageFormStyles = () => {
       alignItems: 'center',
       gap: 12,
     },
-    textInput: {
+    textInputBoundary: {
       borderRadius: 24,
       borderWidth: 1,
       padding: 12,
       paddingHorizontal: 20,
       borderColor: theme.colors.fillColorNeutral050Base,
       flex: 1,
+      gap: 12,
+    },
+    textInput: {
       flexDirection: 'row',
       gap: 12,
     },
@@ -224,5 +372,23 @@ const useMessageFormStyles = () => {
       height: 36,
       width: 36,
     },
+    attachmentPicker: {
+      position: 'relative',
+    },
+    attachmentPickerButtons: {
+      position: 'absolute',
+      left: 0,
+      bottom: 40,
+      zIndex: 10,
+      gap: 16,
+    },
+    messageFormAttachments: {
+      flexDirection: 'row',
+      gap: 8,
+    },
+    inputErrorMessage: {
+      color: theme.colors.statusErrorText,
+      fontSize: 14,
+    },
   })
 }

package/src/components/conversations/conversation_actions.tsx

@@ -1,5 +1,5 @@
 import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
-import { Platform, Pressable, StyleSheet, View, ViewStyle } from 'react-native'
+import { Platform, Pressable, StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
 import ReanimatedSwipeable, {
   SwipeableMethods,
 } from 'react-native-gesture-handler/ReanimatedSwipeable'
@@ -22,7 +22,7 @@ export function ConversationActions({
   children: ReactNode
   conversation: ConversationResource
   onPress: () => void
-  style?: ViewStyle
+  style?: StyleProp<ViewStyle>
 }) {
   const swipeableRef = useRef<SwipeableMethods>(null)
   const styles = useStyles()

package/src/components/conversations/conversation_preview.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
+import { StyleSheet, View, ViewStyle } from 'react-native'
 import { ConversationResource } from '../../types'
 import { AvatarGroup, Heading, Text, Badge } from '../display'
 import { formatDatePreview } from '../../utils/date'
@@ -12,12 +12,14 @@ interface ConversationPreviewProps {
   conversation: ConversationResource
   onPress: () => void
   showBadges?: boolean
+  style?: ViewStyle
 }
 
 export const ConversationPreview = ({
   conversation,
   onPress,
   showBadges = true,
+  style,
 }: ConversationPreviewProps) => {
   const styles = useStyles()
   const {
@@ -32,7 +34,11 @@ export const ConversationPreview = ({
   } = conversation
 
   return (
-    <ConversationActions conversation={conversation} style={styles.previewRow} onPress={onPress}>
+    <ConversationActions
+      conversation={conversation}
+      style={[styles.previewRow, style]}
+      onPress={onPress}
+    >
       <AvatarGroup size="lg" sourceUris={previewAvatarUrls || []} />
       <View style={styles.conversationBody}>
         <Heading numberOfLines={1} variant="h3" style={styles.title}>

package/src/components/group_conversation_list.tsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import { StyleSheet, View, ViewStyle } from 'react-native'
+import { useConversations } from '../hooks/use_conversations'
+import { ConversationPreview } from './conversations/conversation_preview'
+import { ConversationRequestArgs } from '../utils/request/conversation'
+import { useTheme } from '../hooks'
+import { Icon, Text } from './display'
+
+interface GroupConversationsProps extends Partial<ConversationRequestArgs> {
+  limit?: number
+  onConversationPress: (conversation: any) => void
+  style?: ViewStyle
+  ListHeaderComponent?:
+    | React.ComponentType<any>
+    | React.ReactElement<any, string | React.JSXElementConstructor<any>>
+  ListOverflowFooterComponent?:
+    | React.ComponentType<any>
+    | React.ReactElement<any, string | React.JSXElementConstructor<any>>
+}
+
+/**
+ * GroupConversations is a component that displays a list of conversations
+ * for a specific group.
+ *
+ * Originally designed for use in CCA.
+ */
+export const GroupConversations = ({
+  limit,
+  onConversationPress,
+  style,
+  ListHeaderComponent,
+  ListOverflowFooterComponent,
+  chat_group_graph_id,
+}: GroupConversationsProps) => {
+  const styles = useStyles()
+  const { conversations = [] } = useConversations({
+    chat_group_graph_id,
+    group_source_app_name: undefined,
+  })
+
+  return (
+    <View style={style}>
+      <>{ListHeaderComponent}</>
+      {conversations.length === 0 && (
+        <View style={styles.listEmpty}>
+          <Icon size={24} name="general.textMessage" style={styles.listEmptyIcon} />
+          <Text variant="secondary">No conversations found</Text>
+        </View>
+      )}
+      {conversations.slice(0, limit).map(conversation => (
+        <ConversationPreview
+          style={styles.conversation}
+          key={conversation.id}
+          showBadges={false}
+          conversation={conversation}
+          onPress={() => onConversationPress(conversation)}
+        />
+      ))}
+      {conversations.length > (limit || 0) && <>{ListOverflowFooterComponent}</>}
+    </View>
+  )
+}
+
+const useStyles = () => {
+  const { colors } = useTheme()
+  return StyleSheet.create({
+    constainer: {},
+    conversation: {
+      borderBottomWidth: 0,
+    },
+    listItem: { color: colors.fillColorNeutral020 },
+    listEmpty: {
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingVertical: 16,
+      gap: 8,
+    },
+    listEmptyIcon: {
+      color: colors.fillColorNeutral020,
+    },
+  })
+}

package/src/components/index.tsx

@@ -1,3 +1,4 @@
 export * from './conversations/conversations'
 export * from './page/error_boundary'
 export * from './display'
+export * from './group_conversation_list'

package/src/contexts/conversations_context.tsx

@@ -36,7 +36,7 @@ const ConversationsContext = createContext<ConversationsContextValue>({
 
 export const ConversationsContextProvider = ({
   children,
-  args,
+  args = {},
 }: PropsWithChildren<{ args: ConversationFiltersParams }>) => {
   const [activeConversationId, setActiveConversationId] = useState<number | undefined>()
   const { chat_group_graph_id, group_source_app_name } = args