@planningcenter/chat-react-native 3.11.0-rc.8 → 3.11.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"generate_placeholder_ulid.d.ts","sourceRoot":"","sources":["../../src/utils/generate_placeholder_ulid.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAaH,wBAAgB,uBAAuB,CAAC,EAAE,QAAY,EAAE,GAAE;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAO,GAAG,MAAM,CAa5F"}

package/build/utils/generate_placeholder_ulid.js

@@ -0,0 +1,28 @@
+/**
+ * The actual `ulid` library depends on a secure random number generator, which looks like it
+ * may require a native dependency to polyfill in React Native.
+ * Since this is only used as a local temporary ID, I think we can get away with a simpler
+ * implementation that doesn't require any native dependencies.
+ */
+const ULID_CHARS = '0123456789ABCDEFGHJKMNPQRSTVWXYZ'; // Crockford's Base32
+function encodeBase32(value, length) {
+    let result = '';
+    for (let i = 0; i < length; i++) {
+        result = ULID_CHARS[value % 32] + result;
+        value = Math.floor(value / 32);
+    }
+    return result;
+}
+export function generatePlaceholderUlid({ offsetMs = 0 } = {}) {
+    const timestamp = Date.now() + offsetMs; // Milliseconds since epoch
+    // 48 bits for timestamp (6 Base32 characters)
+    const timeComponent = encodeBase32(timestamp, 10); // 48 bits = 6 bytes = 10 Base32 characters (approx, needs more precise bit shifting)
+    // 80 bits for randomness (16 Base32 characters)
+    let randomComponent = '';
+    for (let i = 0; i < 16; i++) {
+        // Generate 16 random Base32 chars
+        randomComponent += ULID_CHARS[Math.floor(Math.random() * 32)];
+    }
+    return timeComponent + randomComponent;
+}
+//# sourceMappingURL=generate_placeholder_ulid.js.map

package/build/utils/generate_placeholder_ulid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"generate_placeholder_ulid.js","sourceRoot":"","sources":["../../src/utils/generate_placeholder_ulid.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,MAAM,UAAU,GAAG,kCAAkC,CAAA,CAAC,qBAAqB;AAE3E,SAAS,YAAY,CAAC,KAAa,EAAE,MAAc;IACjD,IAAI,MAAM,GAAG,EAAE,CAAA;IACf,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QAChC,MAAM,GAAG,UAAU,CAAC,KAAK,GAAG,EAAE,CAAC,GAAG,MAAM,CAAA;QACxC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC,CAAA;IAChC,CAAC;IACD,OAAO,MAAM,CAAA;AACf,CAAC;AAED,MAAM,UAAU,uBAAuB,CAAC,EAAE,QAAQ,GAAG,CAAC,KAA4B,EAAE;IAClF,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,QAAQ,CAAA,CAAC,2BAA2B;IACnE,8CAA8C;IAC9C,MAAM,aAAa,GAAG,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC,CAAA,CAAC,qFAAqF;IAEvI,gDAAgD;IAChD,IAAI,eAAe,GAAG,EAAE,CAAA;IACxB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC;QAC5B,kCAAkC;QAClC,eAAe,IAAI,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,CAAA;IAC/D,CAAC;IAED,OAAO,aAAa,GAAG,eAAe,CAAA;AACxC,CAAC","sourcesContent":["/**\n * The actual `ulid` library depends on a secure random number generator, which looks like it\n * may require a native dependency to polyfill in React Native.\n * Since this is only used as a local temporary ID, I think we can get away with a simpler\n * implementation that doesn't require any native dependencies.\n */\n\nconst ULID_CHARS = '0123456789ABCDEFGHJKMNPQRSTVWXYZ' // Crockford's Base32\n\nfunction encodeBase32(value: number, length: number) {\n  let result = ''\n  for (let i = 0; i < length; i++) {\n    result = ULID_CHARS[value % 32] + result\n    value = Math.floor(value / 32)\n  }\n  return result\n}\n\nexport function generatePlaceholderUlid({ offsetMs = 0 }: { offsetMs?: number } = {}): string {\n  const timestamp = Date.now() + offsetMs // Milliseconds since epoch\n  // 48 bits for timestamp (6 Base32 characters)\n  const timeComponent = encodeBase32(timestamp, 10) // 48 bits = 6 bytes = 10 Base32 characters (approx, needs more precise bit shifting)\n\n  // 80 bits for randomness (16 Base32 characters)\n  let randomComponent = ''\n  for (let i = 0; i < 16; i++) {\n    // Generate 16 random Base32 chars\n    randomComponent += ULID_CHARS[Math.floor(Math.random() * 32)]\n  }\n\n  return timeComponent + randomComponent\n}\n"]}

package/build/utils/index.d.ts

@@ -8,4 +8,5 @@ export * from './cache';
 export * from './native_adapters';
 export * from './pluralize';
 export * from './destructure_chat_group_graph_id';
+export * from './convert_attachments_for_create';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,mCAAmC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,mCAAmC,CAAA;AACjD,cAAc,kCAAkC,CAAA"}

package/build/utils/index.js

@@ -8,4 +8,5 @@ export * from './cache';
 export * from './native_adapters';
 export * from './pluralize';
 export * from './destructure_chat_group_graph_id';
+export * from './convert_attachments_for_create';
 //# sourceMappingURL=index.js.map

package/build/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,mCAAmC,CAAA","sourcesContent":["export * from './session'\nexport * from './theme'\nexport * from './styles'\nexport * from './space'\nexport * from './client'\nexport * from './uri'\nexport * from './cache'\nexport * from './native_adapters'\nexport * from './pluralize'\nexport * from './destructure_chat_group_graph_id'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,SAAS,CAAA;AACvB,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,mCAAmC,CAAA;AACjD,cAAc,kCAAkC,CAAA","sourcesContent":["export * from './session'\nexport * from './theme'\nexport * from './styles'\nexport * from './space'\nexport * from './client'\nexport * from './uri'\nexport * from './cache'\nexport * from './native_adapters'\nexport * from './pluralize'\nexport * from './destructure_chat_group_graph_id'\nexport * from './convert_attachments_for_create'\n"]}

package/build/utils/response_error.d.ts

@@ -6,4 +6,5 @@ export declare class ResponseError extends Error {
     response: ApiError;
     constructor(response: ApiError);
 }
+export declare const throwResponseError: (error: unknown) => Promise<never>;
 //# sourceMappingURL=response_error.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"response_error.d.ts","sourceRoot":"","sources":["../../src/utils/response_error.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAElD,qBAAa,aAAc,SAAQ,KAAK;IACtC,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,EAAE,MAAM,CAAA;IAClB,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAA;IAC1B,QAAQ,EAAE,QAAQ,CAAA;gBAEN,QAAQ,EAAE,QAAQ;CAQ/B"}
+{"version":3,"file":"response_error.d.ts","sourceRoot":"","sources":["../../src/utils/response_error.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAA;AAElD,qBAAa,aAAc,SAAQ,KAAK;IACtC,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,EAAE,MAAM,CAAA;IAClB,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAA;IAC1B,QAAQ,EAAE,QAAQ,CAAA;gBAEN,QAAQ,EAAE,QAAQ;CAQ/B;AAED,eAAO,MAAM,kBAAkB,UAAW,OAAO,mBAMhD,CAAA"}

package/build/utils/response_error.js

@@ -12,4 +12,10 @@ export class ResponseError extends Error {
         this.response = response;
     }
 }
+export const throwResponseError = (error) => {
+    if (error instanceof Response) {
+        throw new ResponseError(error);
+    }
+    return Promise.reject(error);
+};
 //# sourceMappingURL=response_error.js.map

package/build/utils/response_error.js.map

@@ -1 +1 @@
-{"version":3,"file":"response_error.js","sourceRoot":"","sources":["../../src/utils/response_error.ts"],"names":[],"mappings":"AAEA,MAAM,OAAO,aAAc,SAAQ,KAAK;IACtC,MAAM,CAAQ;IACd,UAAU,CAAQ;IAClB,MAAM,CAAoB;IAC1B,QAAQ,CAAU;IAElB,YAAY,QAAkB;QAC5B,KAAK,CAAC,kBAAkB,QAAQ,EAAE,MAAM,IAAI,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAA;QACnE,IAAI,CAAC,IAAI,GAAG,eAAe,CAAA;QAC3B,IAAI,CAAC,MAAM,GAAG,QAAQ,EAAE,MAAM,CAAA;QAC9B,IAAI,CAAC,UAAU,GAAG,QAAQ,EAAE,UAAU,CAAA;QACtC,IAAI,CAAC,MAAM,GAAG,QAAQ,EAAE,MAAM,IAAI,EAAE,CAAA;QACpC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAA;IAC1B,CAAC;CACF","sourcesContent":["import { ApiError } from '../types/api_primitives'\n\nexport class ResponseError extends Error {\n  status: number\n  statusText: string\n  errors: ApiError['errors']\n  response: ApiError\n\n  constructor(response: ApiError) {\n    super(`ResponseError: ${response?.status} ${response?.statusText}`)\n    this.name = 'ResponseError'\n    this.status = response?.status\n    this.statusText = response?.statusText\n    this.errors = response?.errors || []\n    this.response = response\n  }\n}\n"]}
+{"version":3,"file":"response_error.js","sourceRoot":"","sources":["../../src/utils/response_error.ts"],"names":[],"mappings":"AAEA,MAAM,OAAO,aAAc,SAAQ,KAAK;IACtC,MAAM,CAAQ;IACd,UAAU,CAAQ;IAClB,MAAM,CAAoB;IAC1B,QAAQ,CAAU;IAElB,YAAY,QAAkB;QAC5B,KAAK,CAAC,kBAAkB,QAAQ,EAAE,MAAM,IAAI,QAAQ,EAAE,UAAU,EAAE,CAAC,CAAA;QACnE,IAAI,CAAC,IAAI,GAAG,eAAe,CAAA;QAC3B,IAAI,CAAC,MAAM,GAAG,QAAQ,EAAE,MAAM,CAAA;QAC9B,IAAI,CAAC,UAAU,GAAG,QAAQ,EAAE,UAAU,CAAA;QACtC,IAAI,CAAC,MAAM,GAAG,QAAQ,EAAE,MAAM,IAAI,EAAE,CAAA;QACpC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAA;IAC1B,CAAC;CACF;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAAc,EAAE,EAAE;IACnD,IAAI,KAAK,YAAY,QAAQ,EAAE,CAAC;QAC9B,MAAM,IAAI,aAAa,CAAC,KAAiB,CAAC,CAAA;IAC5C,CAAC;IAED,OAAO,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;AAC9B,CAAC,CAAA","sourcesContent":["import { ApiError } from '../types/api_primitives'\n\nexport class ResponseError extends Error {\n  status: number\n  statusText: string\n  errors: ApiError['errors']\n  response: ApiError\n\n  constructor(response: ApiError) {\n    super(`ResponseError: ${response?.status} ${response?.statusText}`)\n    this.name = 'ResponseError'\n    this.status = response?.status\n    this.statusText = response?.statusText\n    this.errors = response?.errors || []\n    this.response = response\n  }\n}\n\nexport const throwResponseError = (error: unknown) => {\n  if (error instanceof Response) {\n    throw new ResponseError(error as ApiError)\n  }\n\n  return Promise.reject(error)\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.11.0-rc.8",
+  "version": "3.11.0",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -55,5 +55,5 @@
     "prettier": "^3.4.2",
     "typescript": "<5.6.0"
   },
-  "gitHead": "93e08dbdc5b76a8fbbc6cf5d7ad95c750ab70ac6"
+  "gitHead": "d68607004fe3e05b3e6519564f39953f67c457cb"
 }

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

@@ -1,7 +1,12 @@
 import React, { useMemo, useState, Dispatch, SetStateAction } from 'react'
 import { StyleSheet, Modal, SafeAreaView, View, Linking, Dimensions } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler'
+import {
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+  Pressable,
+} from 'react-native-gesture-handler'
 import {
   runOnJS,
   useAnimatedStyle,
@@ -509,15 +514,17 @@ const LightboxModal = ({
       <SafeAreaView style={styles.modal}>
         <GestureHandlerRootView>
           <GestureDetector gesture={composedGesture}>
-            <Image
-              source={{ uri }}
-              loadingBackgroundStyles={styles.lightboxImageLoading}
-              style={styles.lightboxImage}
-              animatedImageStyle={animatedImageStyles}
-              resizeMode="contain"
-              animated={true}
-              alt=""
-            />
+            <PreventPressEventsBubbling>
+              <Image
+                source={{ uri }}
+                loadingBackgroundStyles={styles.lightboxImageLoading}
+                style={styles.lightboxImage}
+                animatedImageStyle={animatedImageStyles}
+                resizeMode="contain"
+                animated={true}
+                alt=""
+              />
+            </PreventPressEventsBubbling>
           </GestureDetector>
           <View style={styles.actionToolbar} accessibilityRole="toolbar">
             <View style={styles.actionToolbarTextMeta}>
@@ -552,6 +559,14 @@ const LightboxModal = ({
   )
 }
 
+const PreventPressEventsBubbling = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Pressable onLongPress={() => {}} onPress={() => {}}>
+      {children}
+    </Pressable>
+  )
+}
+
 interface UseStylesProps {
   imageWidth?: number
   imageHeight?: number

package/src/components/conversation/message.tsx

@@ -1,8 +1,8 @@
 import { useNavigation } from '@react-navigation/native'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { Platform, Pressable, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { MessageReaction } from '../../components/conversation/message_reaction'
-import { Avatar, Text } from '../../components/display'
+import { Avatar, Icon, Spinner, Text, TextInlineButton } from '../../components/display'
 import { useInteractionGhostBackgroundColor, useTheme } from '../../hooks'
 import { MessageResource } from '../../types'
 import { ReactionCountResource } from '../../types/resources/reaction'
@@ -23,6 +23,7 @@ import Animated, {
 } from 'react-native-reanimated'
 import { useLiveRelativeTime } from '../../hooks/use_live_relative_time'
 import { MessageReadReceipts } from './message_read_receipts'
+import { isNewMessage, useMessageCreateOrUpdate } from '../../hooks/use_message_create_or_update'
 
 /** Message
  * Component for display of a message within a conversation list
@@ -33,16 +34,48 @@ interface MessageProps extends MessageResource {
   latestReadMessageSortKey?: string
 }
 
-export function Message(props: MessageProps) {
-  const { conversation_id, canDeleteNonAuthoredMessages, text, reactionCounts } = props
-  const styles = useMessageStyles(props)
+export function Message({
+  canDeleteNonAuthoredMessages,
+  conversation_id,
+  latestReadMessageSortKey,
+  ...message
+}: MessageProps) {
+  const { text, reactionCounts, pending, error } = message
+  const styles = useMessageStyles(message)
   const navigation = useNavigation()
   const { colors } = useTheme()
   const hasReactions = reactionCounts.length > 0
   const [showMessageMetaToggle, setShowMessageMetaToggle] = React.useState(false)
-  const showMessageMeta = showMessageMetaToggle || props.myLatestInConversation || false
-  const timestamp = useLiveRelativeTime(props.createdAt)
-  const wasEdited = Boolean(props.textEditedAt)
+  const showMessageMeta =
+    showMessageMetaToggle || message.myLatestInConversation || !!pending || !!error || false
+  const timestamp = useLiveRelativeTime(message.createdAt)
+  const wasEdited = Boolean(message.textEditedAt)
+  const isPersisted = !isNewMessage(message)
+  const [temporarilyHidePendingState, setTemporarilyHidePendingState] = React.useState(true)
+
+  useEffect(() => {
+    if (pending) {
+      const timer = setTimeout(() => {
+        setTemporarilyHidePendingState(false)
+      }, 2000)
+      return () => clearTimeout(timer)
+    }
+    return () => {}
+  }, [pending])
+
+  const retryFailedSaveMutation = useMessageCreateOrUpdate({
+    conversationId: conversation_id,
+    message,
+  })
+
+  const handleRetry = () => {
+    if (text && error) {
+      retryFailedSaveMutation.mutateAsync({
+        text,
+        attachments: message.attachmentsForCreate,
+      })
+    }
+  }
 
   const bgFadeProgress = useSharedValue(0)
   const pressedColor = Platform.select({
@@ -69,15 +102,17 @@ export function Message(props: MessageProps) {
   }
 
   const handleMessageLongPress = () => {
+    if (!isPersisted) return
+
     navigation.navigate('MessageActions', {
-      message_id: props.id,
+      message_id: message.id,
       conversation_id,
       canDeleteNonAuthoredMessages,
     })
   }
   const handleReactionLongPress = (reaction: ReactionCountResource) => {
     navigation.navigate('Reactions', {
-      message_id: props.id,
+      message_id: message.id,
       conversation_id,
       reaction_value: reaction.value,
     })
@@ -90,17 +125,18 @@ export function Message(props: MessageProps) {
       attachmentUrl: attachment?.attributes.url,
       conversation_id,
       canDeleteNonAuthoredMessages,
-      myMessage: props.mine,
+      myMessage: message.mine,
     })
   }
 
   const metaProps = {
-    authorName: props.author.name,
-    createdAt: props.createdAt,
+    authorName: message.author.name,
+    createdAt: message.createdAt,
   }
 
-  const renderAuthor = (!props.mine && props.renderAuthor) || false
-  const messageBottomMargin = props.lastInGroup ? 12 : hasReactions || showMessageMeta ? 8 : 4
+  const renderAuthor = (!message.mine && message.renderAuthor) || false
+  const messageBottomMargin = message.lastInGroup ? 12 : hasReactions || showMessageMeta ? 8 : 4
+  const messagePendingLabel = isPersisted ? 'Saving' : 'Sending'
 
   return (
     <Pressable
@@ -112,21 +148,21 @@ export function Message(props: MessageProps) {
       accessibilityHint="Long press to view message actions like reacting and copying."
     >
       <Animated.View style={[styles.message, animatedBackgroundColor]}>
-        {!props.mine && (
+        {!message.mine && (
           <View style={styles.messageAuthor}>
             {renderAuthor ? (
-              <Avatar size={'md'} sourceUri={props.author.avatar} />
+              <Avatar size={'md'} sourceUri={message.author.avatar} />
             ) : (
               <View style={styles.avatarPlaceholder} />
             )}
           </View>
         )}
         <View style={[styles.messageContent, { marginBottom: messageBottomMargin }]}>
-          {renderAuthor && <Text variant="tertiary">{props.author.name}</Text>}
+          {renderAuthor && <Text variant="tertiary">{message.author.name}</Text>}
           <View style={styles.messageBubble}>
             <ErrorBoundary>
               <MessageAttachments
-                attachments={props.attachments}
+                attachments={message.attachments}
                 metaProps={metaProps}
                 onMessageAttachmentLongPress={handleMessageAttachmentLongPress}
                 onMessageLongPress={handleMessageLongPress}
@@ -145,7 +181,7 @@ export function Message(props: MessageProps) {
                   key={reaction.value}
                   reaction={reaction}
                   onLongPress={handleReactionLongPress}
-                  message={props}
+                  message={message}
                   conversationId={conversation_id}
                 />
               ))}
@@ -153,14 +189,44 @@ export function Message(props: MessageProps) {
           )}
           {showMessageMeta && (
             <View style={styles.messageMeta}>
-              {props.mine && (
+              {message.mine && !pending && !error && (
                 <MessageReadReceipts
-                  message={props}
-                  latestReadMessageSortKey={props.latestReadMessageSortKey}
+                  message={message}
+                  latestReadMessageSortKey={latestReadMessageSortKey}
                 />
               )}
-              <Text variant="footnote">{timestamp}</Text>
-              {wasEdited && (
+              {error ? (
+                <View style={styles.errorContainer}>
+                  {retryFailedSaveMutation.isPending ? (
+                    <Spinner size={12} style={styles.errorSpinner} />
+                  ) : (
+                    <Icon name="general.exclamationTriangle" size={12} style={styles.errorIcon} />
+                  )}
+                  <Text variant="footnote" style={styles.errorText}>
+                    Failed to {isPersisted ? 'edit' : 'send'} |{' '}
+                    <TextInlineButton
+                      onPress={handleRetry}
+                      variant="footnote"
+                      appearance="danger"
+                      disabled={retryFailedSaveMutation.isPending}
+                    >
+                      Try again
+                    </TextInlineButton>
+                  </Text>
+                </View>
+              ) : pending && (!temporarilyHidePendingState || isPersisted) ? (
+                <View style={styles.pendingIndicatorContainer}>
+                  <Icon
+                    name="general.outlinedClock"
+                    size={12}
+                    color={colors.iconColorDefaultSecondary}
+                  />
+                  <Text variant="footnote">{messagePendingLabel}</Text>
+                </View>
+              ) : isPersisted ? (
+                <Text variant="footnote">{timestamp}</Text>
+              ) : null}
+              {!pending && !error && wasEdited && (
                 <Text variant="footnote">
                   |{' '}
                   <Text variant="footnote" style={styles.editedText}>
@@ -176,13 +242,14 @@ export function Message(props: MessageProps) {
   )
 }
 
-const useMessageStyles = (props: MessageResource) => {
-  const { mine } = props
+const useMessageStyles = ({ mine }: MessageResource) => {
   const { colors } = useTheme()
   const myMessageBackgroundColor = useInteractionGhostBackgroundColor()
   const { width } = useWindowDimensions()
   const tabletWidth = width >= 744 // Smallest iPad Mini's width
 
+  const messageBubbleBackgroundColor = mine ? myMessageBackgroundColor : colors.fillColorNeutral070
+
   return StyleSheet.create({
     message: {
       gap: 8,
@@ -202,7 +269,7 @@ const useMessageStyles = (props: MessageResource) => {
       height: 32, // Same height as avatar
     },
     messageBubble: {
-      backgroundColor: mine ? myMessageBackgroundColor : colors.fillColorNeutral070,
+      backgroundColor: messageBubbleBackgroundColor,
       borderRadius: 8,
       maxWidth: tabletWidth ? 360 : '80%',
       alignSelf: mine ? 'flex-end' : 'flex-start',
@@ -225,5 +292,26 @@ const useMessageStyles = (props: MessageResource) => {
     editedText: {
       fontWeight: platformFontWeightMedium,
     },
+    pendingIndicatorContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4,
+    },
+    errorContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4,
+    },
+    errorIcon: {
+      color: colors.statusErrorIcon,
+    },
+    errorText: {
+      color: colors.statusErrorText,
+    },
+    errorSpinner: {
+      position: 'relative',
+      width: 'auto',
+      height: 'auto',
+    },
   })
 }

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

@@ -1,6 +1,6 @@
 import React from 'react'
-import { FileAttachment } from '../../../hooks/use_attachment_uploader'
 import { ImageAttachmentPreview } from '../../display'
+import { FileAttachment } from '../../../types/resources/denormalized_attachment_resource_for_create'
 
 interface Props {
   uri: string

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

@@ -1,6 +1,6 @@
 import React from 'react'
-import { FileAttachment } from '../../../hooks/use_attachment_uploader'
 import { VideoAttachmentPreview } from '../../display'
+import { FileAttachment } from '../../../types/resources/denormalized_attachment_resource_for_create'
 
 interface Props {
   status: FileAttachment['status']

package/src/components/conversation/message_form.tsx

@@ -32,7 +32,7 @@ import { useAttachmentUploader } from '../../hooks/use_attachment_uploader'
 import {
   DenormalizedAttachmentResourceForCreate,
   DenormalizedMessageAttachmentResourceForCreate,
-} from '../../types/resources/denormalized_attachment_resource'
+} from '../../types/resources/denormalized_attachment_resource_for_create'
 import { MessageFormAttachmentImage } from './message_form/message_form_attachment_image'
 import { useMessageCreateOrUpdate } from '../../hooks/use_message_create_or_update'
 import { useBroadcastTypingStatus } from '../../hooks/use_broadcast_typing_status'
@@ -99,7 +99,7 @@ function MessageFormRoot({
     mutateAsync,
   } = useMessageCreateOrUpdate({
     conversationId: conversation.id,
-    messageId: currentlyEditingMessage?.id || null,
+    message: currentlyEditingMessage || undefined,
   })
   const attachmentUploader = useAttachmentUploader({
     conversationId: conversation.id,
@@ -175,19 +175,22 @@ function MessageFormRoot({
       TextInput.State.blurTextInput(TextInput.State.currentlyFocusedInput())
       navigateToSendGiphyAfterKeyboardHides()
     } else {
-      let attachmentsForSubmit: DenormalizedAttachmentResourceForCreate[] = []
-      if (attachmentUploader?.attachmentIds) {
-        attachmentsForSubmit = attachmentUploader.attachmentIds.map(
-          (id: string): DenormalizedMessageAttachmentResourceForCreate => ({
-            type: 'MessageAttachment',
-            id,
-          })
-        )
-      }
+      let attachmentsForSubmit: DenormalizedAttachmentResourceForCreate[] =
+        attachmentUploader.attachments
+          .filter(a => a.status === 'success' && a.id)
+          .map(
+            (attachment): DenormalizedMessageAttachmentResourceForCreate => ({
+              type: 'MessageAttachment',
+              id: attachment.id as string,
+              file: attachment.file,
+            })
+          )
       if (currentlyEditingMessage) {
-        mutateAsync({ text }).then(reset)
+        mutateAsync({ text })
+        reset()
       } else {
-        mutateAsync({ text, attachments: attachmentsForSubmit }).then(reset)
+        mutateAsync({ text, attachments: attachmentsForSubmit })
+        reset()
       }
     }
   }

package/src/components/conversations/conversations.tsx

@@ -4,9 +4,10 @@ import React, { useMemo } from 'react'
 import { StyleSheet, View } from 'react-native'
 import { useConversationsContext } from '../../contexts/conversations_context'
 import { useTheme } from '../../hooks'
+import { ConversationResource } from '../../types'
+import { throwResponseError } from '../../utils/response_error'
 import { BlankState } from '../display'
 import { ConversationPreview, ConversationPreviewSkeleton } from './conversation_preview'
-import { ConversationResource } from '../../types'
 
 interface ConversationsProps {
   ListHeaderComponent?:
@@ -26,6 +27,8 @@ export const Conversations = ({ ListHeaderComponent }: ConversationsProps) => {
     refetch,
     isRefetching,
     isFetched,
+    isError,
+    error,
     args: { chat_group_graph_id },
   } = useConversationsContext()
   const navigation = useNavigation()
@@ -43,6 +46,10 @@ export const Conversations = ({ ListHeaderComponent }: ConversationsProps) => {
     }))
   }, [conversations, isLoading])
 
+  if (isError) {
+    throwResponseError(error)
+  }
+
   return (
     <View style={styles.container}>
       <FlashList

package/src/components/display/spinner.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react'
-import { Animated, Easing, StyleSheet, View } from 'react-native'
+import { Animated, Easing, StyleProp, StyleSheet, View, ViewStyle } from 'react-native'
 import { useFontScale, useTheme } from '../../hooks'
 
 // =================================
@@ -21,11 +21,16 @@ interface SpinnerProps {
    * Specifies the maximum size spinner can scale to if the device's font-size is increased.
    */
   maxFontSizeMultiplier?: number
+  /**
+   * Style to apply to the spinner
+   */
+  style?: StyleProp<ViewStyle>
 }
 
 export function Spinner({
   size = 20,
   maxFontSizeMultiplier = PREVENT_SCALING_DEFAULT,
+  style,
 }: SpinnerProps) {
   const rotation = useRef(new Animated.Value(0)).current
 
@@ -53,7 +58,7 @@ export function Spinner({
   useEffect(() => () => rotation.setValue(0), [rotation])
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, style]}>
       <Animated.View style={styles.animatedContainer}>
         <View style={styles.clipping}>
           <View style={[styles.circle, styles.spinner]} />

package/src/components/display/text.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '../../hooks'
 import React from 'react'
-import { StyleSheet, Text as ReactNativeText } from 'react-native'
+import { StyleSheet, Text as ReactNativeText, Platform } from 'react-native'
 import type { TextStyle, TextProps as ReactNativeTextProps } from 'react-native'
 import { tokens } from '../../vendor/tapestry/tokens'
 
@@ -39,7 +39,7 @@ export function Text({ style, variant = 'plain', children, ...props }: TextProps
   }
 
   return (
-    <ReactNativeText style={[variantStyleMap[variant], style]} {...props}>
+    <ReactNativeText style={[styles.base, variantStyleMap[variant], style]} {...props}>
       {children}
     </ReactNativeText>
   )
@@ -52,6 +52,14 @@ export function Text({ style, variant = 'plain', children, ...props }: TextProps
 const useStyles = () => {
   const { colors } = useTheme()
   return StyleSheet.create({
+    base: {
+      ...Platform.select({
+        android: {
+          fontFamily: 'normal', // This forces the text to be normal weight when the "Bold font" accessibility setting is enabled. While this is not ideal, it fixes a bug where the text without a hard coded fontWeight gets cut off on Android. https://github.com/facebook/react-native/issues/15114
+        },
+        default: null, // iOS needs to specify its own font family otherwise the italic style won't work. (Used in message_markdown.tsx) It's "Bold font" accessibility setting works as expected.
+      }),
+    },
     plain: {
       color: colors.textColorDefaultPrimary,
       fontSize: tokens.fontSizeMd,

package/src/components/primitive/form_sheet.tsx

@@ -113,13 +113,14 @@ function AndroidSheetGrabber() {
 
 interface FormSheetHeaderProps {
   children: ReactNode
+  style?: StyleProp<ViewStyle>
 }
 
-function FormSheetHeader({ children }: FormSheetHeaderProps) {
+function FormSheetHeader({ children, style }: FormSheetHeaderProps) {
   const styles = useStyles()
 
   return (
-    <View style={styles.header}>
+    <View style={[styles.header, style]}>
       <View style={styles.headerContent}>{children}</View>
     </View>
   )