@planningcenter/chat-react-native 2.0.0 → 2.1.0-rc.0

package/build/utils/uri.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"uri.d.ts","sourceRoot":"","sources":["../../src/utils/uri.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAQnC,MAAM,CAAC,OAAO,OAAO,GAAG;IACtB,OAAO,EAAE,OAAO,CAAA;IAChB,GAAG,CAAC,EAAE,MAAM,CAAA;gBAEA,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE;IAKhE,IAAI,MAAM,qBAMT;IAED,IAAI,IAAI,6FAWP;IAED,IAAI,GAAG,4BAEN;IAED,IAAI,OAAO,WAEV;IAED,IAAI,SAAS,WAEZ;IAED,IAAI,OAAO;;;MAKV;IAED,MAAM,qBAIL;IAED,GAAG,qBAIF;CACF"}
+{"version":3,"file":"uri.d.ts","sourceRoot":"","sources":["../../src/utils/uri.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AAQnC,qBAAa,GAAG;IACd,OAAO,EAAE,OAAO,CAAA;IAChB,GAAG,CAAC,EAAE,MAAM,CAAA;gBAEA,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE;IAKhE,IAAI,MAAM,qBAMT;IAED,IAAI,IAAI,6FAWP;IAED,IAAI,GAAG,4BAEN;IAED,IAAI,OAAO,WAEV;IAED,IAAI,SAAS,WAEZ;IAED,IAAI,OAAO;;;MAKV;IAED,MAAM,qBAIL;IAED,GAAG,qBAIF;CACF"}

package/build/utils/uri.js

@@ -5,7 +5,7 @@ const systemName = DeviceInfo.getSystemName();
 const systemVersion = DeviceInfo.getSystemVersion();
 const readableVersion = DeviceInfo.getReadableVersion();
 const appName = DeviceInfo.getApplicationName();
-export default class Uri {
+export class Uri {
     session;
     app;
     constructor({ session, app }) {

package/build/utils/uri.js.map

@@ -1 +1 @@
-{"version":3,"file":"uri.js","sourceRoot":"","sources":["../../src/utils/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,MAAM,CAAC,OAAO,OAAO,GAAG;IACtB,OAAO,CAAS;IAChB,GAAG,CAAS;IAEZ,YAAY,EAAE,OAAO,EAAE,GAAG,EAAsC;QAC9D,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;QACtB,IAAI,CAAC,GAAG,GAAG,GAAG,CAAA;IAChB,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,QAAQ,IAAI,CAAC,GAAG,EAAE,CAAC;YACjB,KAAK,YAAY;gBACf,OAAO,8BAA8B,CAAA;YACvC,KAAK,SAAS;gBACZ,OAAO,sCAAsC,CAAA;YAC/C,KAAK,aAAa;gBAChB,OAAO,cAAc,CAAA;YACvB;gBACE,OAAO,8BAA8B,CAAA;QACzC,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,SAAS;QACX,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;IAC1C,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;IAED,MAAM,GAAG,IAAI,CAAC,EAAE;QACd,IAAI,IAAI,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,IAAI,CAAA;QAErD,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,IAAI,GAAG,EAAE,CAAA;IACzD,CAAC,CAAA;IAED,GAAG,GAAG,IAAI,CAAC,EAAE;QACX,IAAI,IAAI,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,IAAI,CAAA;QAErD,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,IAAI,GAAG,EAAE,CAAA;IACxC,CAAC,CAAA;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\nexport default class Uri {\n  session: Session\n  app?: string\n\n  constructor({ session, app }: { session: Session; app?: string }) {\n    this.session = session\n    this.app = app\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    switch (this.env) {\n      case 'production':\n        return 'api.planningcenteronline.com'\n      case 'staging':\n        return 'api-staging.planningcenteronline.com'\n      case 'development':\n        return 'api.pco.test'\n      default:\n        return 'api.planningcenteronline.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 directory() {\n    return this.app ? `/${this.app}/v2` : ''\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  appUrl = path => {\n    if (path.startsWith(`${this.schema}://`)) return path\n\n    return `${this.baseUrl}${this.directory}${path || '/'}`\n  }\n\n  api = path => {\n    if (path.startsWith(`${this.schema}://`)) return path\n\n    return `${this.baseUrl}${path || '/'}`\n  }\n}\n"]}
+{"version":3,"file":"uri.js","sourceRoot":"","sources":["../../src/utils/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,MAAM,OAAO,GAAG;IACd,OAAO,CAAS;IAChB,GAAG,CAAS;IAEZ,YAAY,EAAE,OAAO,EAAE,GAAG,EAAsC;QAC9D,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;QACtB,IAAI,CAAC,GAAG,GAAG,GAAG,CAAA;IAChB,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,QAAQ,IAAI,CAAC,GAAG,EAAE,CAAC;YACjB,KAAK,YAAY;gBACf,OAAO,8BAA8B,CAAA;YACvC,KAAK,SAAS;gBACZ,OAAO,sCAAsC,CAAA;YAC/C,KAAK,aAAa;gBAChB,OAAO,cAAc,CAAA;YACvB;gBACE,OAAO,8BAA8B,CAAA;QACzC,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,SAAS;QACX,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;IAC1C,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;IAED,MAAM,GAAG,IAAI,CAAC,EAAE;QACd,IAAI,IAAI,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,IAAI,CAAA;QAErD,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,IAAI,GAAG,EAAE,CAAA;IACzD,CAAC,CAAA;IAED,GAAG,GAAG,IAAI,CAAC,EAAE;QACX,IAAI,IAAI,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO,IAAI,CAAA;QAErD,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,IAAI,GAAG,EAAE,CAAA;IACxC,CAAC,CAAA;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\nexport class Uri {\n  session: Session\n  app?: string\n\n  constructor({ session, app }: { session: Session; app?: string }) {\n    this.session = session\n    this.app = app\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    switch (this.env) {\n      case 'production':\n        return 'api.planningcenteronline.com'\n      case 'staging':\n        return 'api-staging.planningcenteronline.com'\n      case 'development':\n        return 'api.pco.test'\n      default:\n        return 'api.planningcenteronline.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 directory() {\n    return this.app ? `/${this.app}/v2` : ''\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  appUrl = path => {\n    if (path.startsWith(`${this.schema}://`)) return path\n\n    return `${this.baseUrl}${this.directory}${path || '/'}`\n  }\n\n  api = path => {\n    if (path.startsWith(`${this.schema}://`)) return path\n\n    return `${this.baseUrl}${path || '/'}`\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "2.0.0",
+  "version": "2.1.0-rc.0",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -24,13 +24,17 @@
     "react-native-url-polyfill": "^2.0.0"
   },
   "peerDependencies": {
-    "@planningcenter/icons": "^15.17.0",
+    "@planningcenter/datetime-fmt": ">=1.0.0",
+    "@planningcenter/icons": ">=15.0.0",
+    "@planningcenter/jolt-client": ">=2.0.0",
     "@react-navigation/elements": "*",
     "@react-navigation/native": ">=7.0.0",
     "@react-navigation/native-stack": ">=7.0.0",
     "@tanstack/react-query": "^5.0.0",
     "color": "^3.1.2",
     "lodash": "*",
+    "moment": ">=2.0.0",
+    "moment-timezone": ">=2.0.0",
     "react": "*",
     "react-native": "*",
     "react-native-device-info": "*",
@@ -47,5 +51,5 @@
     "prettier": "^3.4.2",
     "typescript": "<5.6.0"
   },
-  "gitHead": "cdb7edc65761b084f41cee5fa84d10f8f341b5d6"
+  "gitHead": "9ada391b04ffc168aa7ffb4baaa746429ee7e093"
 }

package/src/__tests__/utils/cache/page_mutations.ts

@@ -1,4 +1,4 @@
-import { addRecordInPagesData, updateRecordInPagesData } from '../../../utils/'
+import { deleteRecordInPagesData, updateRecordInPagesData } from '../../../utils/'
 
 const data = {
   pageParams: {},
@@ -105,6 +105,7 @@ describe('updateRecordInPagesData', () => {
       pages: [
         {
           data: [
+            { id, type: 'Message', text: `updated example ${id}` },
             { id: '1', type: 'Message', text: 'message 1' },
             { id: '2', type: 'Message', text: 'message 2' },
           ],
@@ -116,7 +117,6 @@ describe('updateRecordInPagesData', () => {
           data: [
             { id: '3', type: 'Message', text: 'message 3' },
             { id: '4', type: 'Message', text: 'message 4' },
-            { id, type: 'Message', text: `updated example ${id}` },
           ],
           included: [],
           links: {},
@@ -127,49 +127,14 @@ describe('updateRecordInPagesData', () => {
   })
 })
 
-describe('addRecordInPagesData', () => {
-  it('should add records that do not yet exist', () => {
-    const id = '7'
+describe('deleteRecordInPagesData', () => {
+  it('should delete records from page', () => {
+    const id = '4'
     const record = createRecord({ id })
 
-    const result = addRecordInPagesData<typeof record>({
-      data,
-      record,
-    })
-
-    expect(result).toEqual({
-      pageParams: {},
-      pages: [
-        {
-          data: [
-            { id: '1', type: 'Message', text: 'message 1' },
-            { id: '2', type: 'Message', text: 'message 2' },
-          ],
-          included: [],
-          links: {},
-          meta: { count: 2, totalCount: 2 },
-        },
-        {
-          data: [
-            { id: '3', type: 'Message', text: 'message 3' },
-            { id: '4', type: 'Message', text: 'message 4' },
-            record,
-          ],
-          included: [],
-          links: {},
-          meta: { count: 2, totalCount: 2 },
-        },
-      ],
-    })
-  })
-
-  it('should add the record in the pages data and update with a custom processRecord function', () => {
-    const id = '8'
-    const record = createRecord({ id })
-    const result = addRecordInPagesData<typeof record>({
+    const result = deleteRecordInPagesData<typeof record>({
       data,
       record,
-      processRecord: r => ({ ...r, text: 'updated ' + r.text }),
     })
 
     expect(result).toEqual({
@@ -185,11 +150,7 @@ describe('addRecordInPagesData', () => {
           meta: { count: 2, totalCount: 2 },
         },
         {
-          data: [
-            { id: '3', type: 'Message', text: 'message 3' },
-            { id: '4', type: 'Message', text: 'message 4' },
-            { ...record, text: `updated example ${id}` },
-          ],
+          data: [{ id: '3', type: 'Message', text: 'message 3' }],
           included: [],
           links: {},
           meta: { count: 2, totalCount: 2 },

package/src/components/conversation/message.tsx

@@ -7,6 +7,7 @@ import { MessageReaction } from '../../components/conversation/message_reaction'
 import { Avatar, Text } from '../../components/display'
 import { useTheme } from '../../hooks'
 import { MessageResource } from '../../types'
+import { ReactionCountResource } from '../../types/resources/reaction'
 
 /** Message
  * Component for display of a message within a conversation list
@@ -21,9 +22,13 @@ export function Message(props: MessageResource & { conversation_id: string }) {
       conversation_id,
     })
   }
-  // TODO: open the reaction screen to show who reacted
-  const handleReactionPress = handleMessagePress
-
+  const handleReactionPress = (reaction: ReactionCountResource) => {
+    navigation.navigate('Reactions', {
+      message_id: props.id,
+      conversation_id,
+      reaction_value: reaction.value,
+    })
+  }
   if (!text) return null
 
   return (

package/src/components/conversation/message_reaction.tsx

@@ -19,12 +19,16 @@ export function MessageReaction({
   onPress,
 }: {
   reaction: ReactionCountResource
-  onPress: () => void
+  onPress: (_reaction: ReactionCountResource) => void
 }) {
   const styles = useReactionStyles(reaction)
 
   return (
-    <PlatformPressable key={reaction.value} style={styles.reaction} onPress={onPress}>
+    <PlatformPressable
+      key={reaction.value}
+      style={styles.reaction}
+      onPress={() => onPress(reaction)}
+    >
       <Text style={styles.reactionEmoji}>{REACTION_EMOJIS[reaction.value]}</Text>
       <Text style={styles.reactionText}>{reaction.count}</Text>
     </PlatformPressable>

package/src/components/conversations.tsx

@@ -1,45 +1,42 @@
 import { useNavigation } from '@react-navigation/native'
 import React from 'react'
-import { FlatList, Pressable, StyleSheet } from 'react-native'
+import { FlatList, Pressable, StyleSheet, View } from 'react-native'
 import { useTheme } from '../hooks'
-import { useSuspensePaginator } from '../hooks/use_suspense_api'
-import { ConversationResource } from '../types'
-import { GetRequest } from '../utils/client/types'
-import { Heading, Text } from './display'
+import { useConversationsJoltEvents } from '../hooks/use_conversation_jolt_events'
+import { useConversations } from '../hooks/use_conversations'
+import { formatDatePreview } from '../utils/date'
+import { AvatarGroup, Badge, Heading, Text, TextButton } from './display'
 
 export const Conversations = () => {
   const styles = useStyles()
-  const request: GetRequest = {
-    url: '/me/conversations',
-    data: {
-      perPage: 20,
-      order: '-last_message',
-      fields: {
-        Conversation: [
-          'title',
-          'last_message_created_at',
-          'last_message_author_name',
-          'last_message_text_preview',
-          'unread_count',
-        ],
-      },
-    },
-  }
-  const { data: conversations, fetchNextPage } = useSuspensePaginator<ConversationResource>(request)
+
+  const { conversations, fetchNextPage, refetch, isRefetching } = useConversations()
 
   // TODO: Filter using the API
   const nonEmptyConversations = conversations.filter(c => c.lastMessageTextPreview) || []
-
   const navigation = useNavigation()
 
+  useConversationsJoltEvents()
+
   return (
     <FlatList
       data={nonEmptyConversations}
       contentContainerStyle={styles.container}
       style={styles.scrollView}
+      onRefresh={refetch}
+      refreshing={isRefetching}
+      ListHeaderComponent={
+        <View style={styles.header}>
+          <Heading numberOfLines={1} variant="h2">
+            Conversations
+          </Heading>
+          <TextButton>Mark all read</TextButton>
+        </View>
+      }
       ListEmptyComponent={<Text>No conversations found</Text>}
       renderItem={({ item }) => (
         <Pressable
+          style={styles.conversation}
           onPress={() =>
             navigation.navigate('Conversation', {
               conversation_id: item.id,
@@ -47,12 +44,30 @@ export const Conversations = () => {
             })
           }
         >
-          <Heading numberOfLines={1} variant="h3">
-            {item.title}
-          </Heading>
-          <Text style={styles.listItem}>
-            {item.lastMessageAuthorName}: {item.lastMessageTextPreview}
-          </Text>
+          <AvatarGroup size="lg" sourceUris={item.previewAvatarUrls || []} />
+          <View style={styles.conversationBody}>
+            <Heading numberOfLines={1} variant="h3" style={styles.conversationTitle}>
+              {item.title}
+            </Heading>
+            <Text style={styles.listItem} numberOfLines={2}>
+              {item.lastMessageAuthorName}: {item.lastMessageTextPreview}
+            </Text>
+            <View style={styles.conversationBadges}>
+              {item.badges?.map(badge => (
+                <Badge
+                  key={badge.text}
+                  variant="meta"
+                  productLogoName={badge.appName}
+                  label={badge.pcoResourceType}
+                  metaLabel={badge.text || ''}
+                />
+              ))}
+            </View>
+          </View>
+          <View style={styles.conversationExtra}>
+            <Text variant="secondary">{formatDatePreview(item.lastMessageCreatedAt)}</Text>
+            <UnreadCountBadge count={item.unreadCount} />
+          </View>
         </Pressable>
       )}
       onEndReached={() => fetchNextPage()}
@@ -60,13 +75,61 @@ export const Conversations = () => {
   )
 }
 
+const UnreadCountBadge = ({ count }: { count: number }) => {
+  const styles = useStyles()
+  const displayCount = count > 99 ? '99+' : count
+
+  if (count === 0) return null
+
+  return (
+    <Text variant="tertiary" style={styles.unreadCountBadge}>
+      {displayCount}
+    </Text>
+  )
+}
+
 const useStyles = () => {
   const { colors } = useTheme()
 
   return StyleSheet.create({
-    scrollView: { flex: 1, backgroundColor: colors.fillColorNeutral090 },
-    container: { gap: 8, padding: 16 },
-    foo: { fontSize: 24, color: colors.testColor },
+    header: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      paddingTop: 8,
+      paddingBottom: 8,
+      paddingHorizontal: 16,
+    },
+    scrollView: { flex: 1 },
+    container: { gap: 8, paddingVertical: 16 },
     listItem: { color: colors.fillColorNeutral020 },
+    conversation: {
+      flexDirection: 'row',
+      gap: 8,
+      borderBottomWidth: 1,
+      borderBottomColor: colors.fillColorNeutral060,
+      paddingTop: 4,
+      paddingBottom: 12,
+      paddingHorizontal: 16,
+    },
+    conversationTitle: {},
+    conversationBody: {
+      flex: 1,
+      rowGap: 2,
+    },
+    conversationExtra: {
+      rowGap: 2,
+    },
+    conversationBadges: {
+      marginTop: 4,
+      alignItems: 'flex-start',
+    },
+    unreadCountBadge: {
+      alignSelf: 'flex-end',
+      backgroundColor: colors.interaction,
+      paddingVertical: 0,
+      paddingHorizontal: 10,
+      borderRadius: 24,
+      color: 'white',
+    },
   })
 }

package/src/components/display/badge.tsx

@@ -54,12 +54,7 @@ type VariantStyles = Record<
   }
 >
 
-const LOGO_NAMES = {
-  groups: 'groups',
-  services: 'services',
-} as const
-
-type PoductLogoNameUnion = (typeof LOGO_NAMES)[keyof typeof LOGO_NAMES]
+type ProductLogoName = 'Groups' | 'Services' | 'groups' | 'services'
 
 const PRODUCT_LOGO_COMPONENT_MAP = {
   groups: GroupsLogo,
@@ -90,7 +85,7 @@ interface BadgeProps {
   /**
    * Adds a product logo to the left of the text.
    */
-  productLogoName?: PoductLogoNameUnion
+  productLogoName?: ProductLogoName
   /**
    * Shows an icon of the user choice to the left of the text.
    */
@@ -123,7 +118,7 @@ export function Badge({
   const hasMetaLabel = Boolean(metaLabel)
 
   const showLogo = showBadgeLogo && productLogoName && isMeta
-  const ProductLogoSvg = showLogo && PRODUCT_LOGO_COMPONENT_MAP[productLogoName]
+  const ProductLogoSvg = showLogo && PRODUCT_LOGO_COMPONENT_MAP[productLogoName?.toLowerCase()]
   const badgeLabel = isMetaSubtle && hasMetaLabel ? `${label}:` : label
 
   return (

package/src/components/display/tabs.tsx

@@ -0,0 +1,142 @@
+import { PlatformPressable } from '@react-navigation/elements'
+import React, { useEffect, useRef, useState } from 'react'
+import { Animated, Easing, StyleSheet, View, ViewStyle } from 'react-native'
+import { useTheme } from '../../hooks'
+
+// =================================
+// ====== Component ================
+// =================================
+
+interface TabsProps<ItemT> {
+  data: ArrayLike<ItemT> | null | undefined
+  activeTab?: ItemT
+  keyExtractor?: (_item: ItemT, _index?: number) => string
+  onTabPress?: (_item: ItemT) => void
+  renderItem: (_: { item: ItemT; index: number }) => React.ReactNode
+  style?: ViewStyle
+  contentContainerStyle?: ViewStyle
+}
+
+const defaultKeyExtractor = (item: any, index?: number) => {
+  if (typeof item === 'string') return item
+
+  return item.id || index?.toString() || item.toString()
+}
+
+export function Tabs<ItemT>({
+  activeTab = { id: '' } as ItemT,
+  contentContainerStyle,
+  data,
+  keyExtractor = defaultKeyExtractor,
+  onTabPress,
+  renderItem,
+  style,
+}: TabsProps<ItemT>) {
+  const [tabDimSet, setTabDimensions] = useState<Set<{ index: number; width: number }>>(new Set())
+  const tabDimensions = Array.from(tabDimSet)
+  const [tabHeight, setTabHeight] = useState(0)
+  const styles = useStyles()
+  const opacity = useRef(new Animated.Value(0)).current
+  const tabCursorPosition = useRef(new Animated.Value(0)).current
+  const dataArray = Array.from(data || [])
+  const activeTabIndex = dataArray.findIndex(
+    (item, index) => keyExtractor(item, index) === keyExtractor(activeTab)
+  )
+  const gap = 8
+  const tabCursorSpacing = tabDimensions
+    .slice(0, activeTabIndex)
+    .reduce((acc, { width }) => acc + width + gap, 0)
+
+  Animated.timing(tabCursorPosition, {
+    toValue: tabCursorSpacing,
+    easing: Easing.inOut(Easing.ease),
+    duration: 100,
+    useNativeDriver: true,
+  }).start()
+
+  useEffect(() => {
+    if (activeTabIndex === -1) return
+
+    Animated.timing(opacity, {
+      toValue: 1,
+      easing: Easing.inOut(Easing.ease),
+      duration: 500,
+      useNativeDriver: true,
+    }).start()
+  }, [opacity, activeTabIndex])
+
+  return (
+    <View style={[styles.container, style]}>
+      <Animated.View style={[styles.contentContainer, contentContainerStyle]}>
+        <View
+          style={styles.tabsContainer}
+          onLayout={event => {
+            const { height } = event.nativeEvent.layout
+            setTabHeight(height)
+          }}
+        >
+          {dataArray.map((item, index) => {
+            return (
+              <PlatformPressable
+                key={index}
+                style={styles.tab}
+                onPress={() => {
+                  onTabPress?.(item)
+                }}
+              >
+                <View
+                  onLayout={event => {
+                    const { width } = event.nativeEvent.layout
+                    setTabDimensions(dimensions => dimensions.add({ index, width }))
+                  }}
+                >
+                  {renderItem({ item, index })}
+                </View>
+              </PlatformPressable>
+            )
+          })}
+        </View>
+        <Animated.View
+          style={[
+            styles.cursor,
+            {
+              opacity,
+              top: tabHeight - 5,
+              width: tabDimensions[activeTabIndex]?.width || 0,
+              transform: [{ translateX: tabCursorPosition }],
+            },
+          ]}
+        />
+      </Animated.View>
+    </View>
+  )
+}
+
+// =================================
+// ====== Styles ===================
+// =================================
+
+const useStyles = () => {
+  const theme = useTheme()
+  return StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+    },
+    contentContainer: {},
+    cursor: {
+      borderBottomWidth: 3,
+      borderBottomColor: theme.colors.interaction,
+      height: 5,
+      flex: 1,
+      position: 'absolute',
+      zIndex: 5,
+    },
+    tab: {},
+    tabsContainer: {
+      flex: 1,
+      flexDirection: 'row',
+      gap: 8,
+    },
+  })
+}

package/src/contexts/api_provider.tsx

@@ -2,8 +2,8 @@ import { QueryClient, QueryClientProvider, QueryKey } from '@tanstack/react-quer
 import React, { useContext, useEffect, useRef } from 'react'
 import { ViewProps } from 'react-native'
 import { Client } from '../utils'
-import { GetRequest } from '../utils/client/types'
 import { ChatContext, ChatContextValue } from './chat_context'
+import { RequestQueryKey } from '../hooks'
 
 let apiClient: Client | undefined
 
@@ -12,9 +12,9 @@ const defaultQueryFn = ({ queryKey }: { queryKey: QueryKey }) => {
     throw new Error('No token present')
   }
 
-  const data = queryKey[0] as GetRequest
+  const [url, data, headers] = queryKey as RequestQueryKey
 
-  return apiClient.get(data)
+  return apiClient.get({ url, data, headers })
 }
 
 export const queryClient = new QueryClient({

package/src/hooks/use_conversation_jolt_events.ts

@@ -0,0 +1,67 @@
+import { CustomMessage } from '@planningcenter/jolt-client/dist/types/JoltConnection'
+import { InfiniteData, useQueryClient } from '@tanstack/react-query'
+import { useContext } from 'react'
+import { ChatContext } from '../contexts'
+import { ApiCollection, ApiResource, ConversationResource } from '../types'
+import { deleteRecordInPagesData, updateRecordInPagesData } from '../utils'
+import { getConversationsRequestArgs } from './use_conversations'
+import { useCurrentPerson } from './use_current_person'
+import { useJoltChannel, useJoltEvent } from './use_jolt'
+import { getRequestQueryKey } from './use_suspense_api'
+
+type QueryData = InfiniteData<ApiCollection<ConversationResource>>
+interface JoltConversationsEvent extends CustomMessage {
+  data: {
+    data: ConversationResource
+  }
+}
+
+export function useConversationsJoltEvents() {
+  const { client } = useContext(ChatContext)
+  const queryClient = useQueryClient()
+  const currentPerson = useCurrentPerson()
+  const joltChannel = useJoltChannel(`chat.people.${currentPerson.id}`)
+
+  const conversationsRequestArgs = getConversationsRequestArgs()
+  const conversationQueryKey = getRequestQueryKey(conversationsRequestArgs)
+
+  const fetchConversation = async ({ id }: ConversationResource) => {
+    const { data: argsData } = conversationsRequestArgs
+    const { data } = await client.get<ApiResource<ConversationResource>>({
+      url: `/me/conversations/${id}`,
+      data: {
+        fields: argsData.fields,
+        include: argsData.include,
+      },
+    })
+
+    return data
+  }
+
+  const handleConversationUpdateOrCreate = async (e: JoltConversationsEvent) => {
+    const conversation = await fetchConversation(e.data.data).catch(c => c)
+
+    queryClient.setQueryData<QueryData>(conversationQueryKey, prev =>
+      updateRecordInPagesData({
+        data: prev,
+        record: conversation,
+        processRecord: (record, current) => {
+          return { ...current, ...record }
+        },
+      })
+    )
+  }
+
+  const handleConversationDestroy = (e: JoltConversationsEvent) => {
+    queryClient.setQueryData<QueryData>(conversationQueryKey, prev =>
+      deleteRecordInPagesData({
+        data: prev,
+        record: e.data.data,
+      })
+    )
+  }
+
+  useJoltEvent(joltChannel, 'conversation.updated', handleConversationUpdateOrCreate)
+  useJoltEvent(joltChannel, 'conversation.created', handleConversationUpdateOrCreate)
+  useJoltEvent(joltChannel, 'conversation.destroyed', handleConversationDestroy)
+}

package/src/hooks/use_conversation_messages.ts

@@ -1,5 +1,9 @@
 import { MessageResource } from '../types'
-import { SuspensePaginatorOptions, useSuspensePaginator } from './use_suspense_api'
+import {
+  getRequestQueryKey,
+  SuspensePaginatorOptions,
+  useSuspensePaginator,
+} from './use_suspense_api'
 
 export const useConversationMessages = (
   { conversation_id }: { conversation_id: string },
@@ -39,5 +43,5 @@ export const getMessagesRequestArgs = ({ conversation_id }: { conversation_id: s
 
 export const getMessagesQueryKey = ({ conversation_id }: { conversation_id: string }) => {
   const requestArgs = getMessagesRequestArgs({ conversation_id })
-  return [requestArgs.url, requestArgs.data]
+  return getRequestQueryKey(requestArgs)
 }