@planningcenter/chat-react-native 4.0.1-qa-staging.1 → 4.0.1-rc.0

package/src/components/conversation/reply_shadow_message.tsx

@@ -1,6 +1,6 @@
 import { useNavigation } from '@react-navigation/native'
 import { some } from 'lodash'
-import React, { memo } from 'react'
+import React from 'react'
 import { Pressable, StyleSheet, useWindowDimensions, View } from 'react-native'
 import Animated from 'react-native-reanimated'
 import {
@@ -37,20 +37,18 @@ interface ReplyShadowMessageProps extends MessageResource {
   nextRendersAuthor: boolean
 }
 
-export const ReplyShadowMessage = memo(function ReplyShadowMessageRow({
+export function ReplyShadowMessage({
   conversation_id,
   inReplyScreen,
   messageId,
-  replyRoot,
   isReplyShadowMessage,
   nextRendersAuthor,
 }: ReplyShadowMessageProps) {
-  const fetched = useConversationMessage({ conversation_id, messageId, enabled: !replyRoot })
-  const message = replyRoot ?? fetched.message
+  const { message, isError, isLoading } = useConversationMessage({ conversation_id, messageId })
 
   if (inReplyScreen) return null
-  if (!message && fetched.isLoading) return <ShadowMessageFallback text="Loading..." />
-  if (!message) return <ShadowMessageFallback text="Message deleted" />
+  if (isLoading) return <ShadowMessageFallback text="Loading..." />
+  if (isError || !message) return <ShadowMessageFallback text="Message deleted" />
 
   const enrichedMessage = {
     ...message,
@@ -59,7 +57,7 @@ export const ReplyShadowMessage = memo(function ReplyShadowMessageRow({
   }
 
   return <ShadowMessageContent conversation_id={conversation_id} {...enrichedMessage} />
-})
+}
 
 interface ShadowMessageContentProps extends MessageResource {
   conversation_id: number
@@ -84,7 +82,7 @@ function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageCont
   const handleNavigateToReplies = () => {
     navigation.navigate('ConversationReply', {
       conversation_id,
-      reply_root_id: message.replyRootId ?? message.id,
+      reply_root_id: message.replyRootId,
       reply_root_author_name: message.author.name,
     })
   }

package/src/components/primitive/form_sheet.tsx

@@ -85,7 +85,6 @@ interface FormSheetRootProps {
   style?: StyleProp<ViewStyle>
   contentStyle?: StyleProp<ViewStyle>
   showAndroidSheetGrabber?: boolean
-  fitToContents?: boolean
 }
 
 export function FormSheetRoot({
@@ -93,9 +92,8 @@ export function FormSheetRoot({
   style,
   contentStyle,
   showAndroidSheetGrabber = true,
-  fitToContents = false,
 }: FormSheetRootProps) {
-  const styles = useStyles({ fitToContents })
+  const styles = useStyles()
 
   return (
     <View style={[styles.container, style]} collapsable={false}>
@@ -300,21 +298,16 @@ FormSheetAction.displayName = 'FormSheet.Action'
 interface Styles {
   appearance?: FormSheetActionAppearanceUnion
   disabled?: boolean
-  fitToContents?: boolean
 }
 
-const useStyles = ({
-  appearance = 'neutral',
-  disabled = false,
-  fitToContents = false,
-}: Styles = {}) => {
+const useStyles = ({ appearance = 'neutral', disabled = false }: Styles = {}) => {
   const { colors } = useTheme()
   const { height } = useWindowDimensions()
   const { bottom, top } = useSafeAreaInsets()
   const headerHeight = useHeaderHeight()
 
   const containerHeight = Platform.select({
-    ios: fitToContents ? undefined : height - top - headerHeight,
+    ios: height - top - headerHeight,
     default: null,
   })
 

package/src/hooks/use_conversation_messages.ts

@@ -1,6 +1,5 @@
 import { useMemo } from 'react'
 import { MessageResource } from '../types'
-import { replaceEqualById } from '../utils/replace_equal_by_id'
 import { getMessagesQueryKey, getMessagesRequestArgs } from '../utils/request/get_messages'
 import { SuspensePaginatorOptions, useSuspensePaginator } from './use_suspense_api'
 
@@ -11,10 +10,7 @@ export const useConversationMessages = (
   const { data, refetch, isRefetching, fetchNextPage, hasNextPage } =
     useSuspensePaginator<MessageResource>(
       getMessagesRequestArgs({ conversation_id, reply_root_id }),
-      {
-        structuralSharing: replaceEqualById,
-        ...opts,
-      }
+      opts
     )
   const queryKey = getMessagesQueryKey({ conversation_id, reply_root_id })
   const messages = useMemo(

package/src/hooks/use_conversation_messages_jolt_events.ts

@@ -11,7 +11,6 @@ import {
   updateCacheWithMessage,
   updateCacheWithIndividualMessage,
   updateCacheWithReaction,
-  updateCacheReplyRoots,
   getThreadedMessagesQueryKey,
 } from '../utils/cache/messages_cache'
 import { transformMessageEventDataToMessageResource } from '../utils/jolt/transform_message_event_data_to_message_resource'
@@ -45,7 +44,6 @@ export function useConversationMessagesJoltEvents({ conversationId }: Props) {
       data,
       currentPersonId: currentPerson.id,
     })
-    const isReplyRootUpdate = e.event === 'message.updated' && data.reply_root_id === data.sort_key
 
     if (e.event === 'message.created' && data.author_id) {
       removeAllTypingEventsByAuthorId(data.author_id)
@@ -64,11 +62,6 @@ export function useConversationMessagesJoltEvents({ conversationId }: Props) {
         data.reply_root_id
       )
       updateCacheWithMessage(queryClient, threadedMessagesQueryKey, message, e.event)
-
-      if (isReplyRootUpdate) {
-        updateCacheReplyRoots(queryClient, messagesQueryKey, message)
-        updateCacheReplyRoots(queryClient, threadedMessagesQueryKey, message)
-      }
     }
 
     // Update individual message query cache so reply shadow messages update immediately

package/src/hooks/use_message_create_or_update.ts

@@ -22,14 +22,6 @@ interface Props {
   replyRootId?: string | null
 }
 
-interface MessageMutationVariables {
-  text: string
-  attachments?: DenormalizedAttachmentResourceForCreate[]
-  idempotentKey?: string
-}
-
-type ResolvedMessageMutationVariables = MessageMutationVariables & { idempotentKey: string }
-
 export function useMessageCreateOrUpdate({ conversationId, message, replyRootId }: Props) {
   const messageId = message?.id || null
   const isEditing = !isNewMessage(message)
@@ -37,7 +29,13 @@ export function useMessageCreateOrUpdate({ conversationId, message, replyRootId
   const currentPerson = useCurrentPerson()
 
   const mutation = useMutation({
-    mutationFn: ({ text, attachments, idempotentKey }: ResolvedMessageMutationVariables) => {
+    mutationFn: ({
+      text,
+      attachments,
+    }: {
+      text: string
+      attachments?: DenormalizedAttachmentResourceForCreate[]
+    }) => {
       const requestParams = getMessagesRequestArgs({ conversation_id: conversationId })
       const fieldsWithValueJoined = Object.fromEntries(
         Object.entries(requestParams.data.fields).map(([k, v]) => [k, v.join(',')])
@@ -48,6 +46,7 @@ export function useMessageCreateOrUpdate({ conversationId, message, replyRootId
         ...(!isEditing && replyRootId ? { reply_root: { id: replyRootId } } : {}),
       }
       if (!isEditing) {
+        const idempotentKey = insecureUUID()
         attributes.idempotent_key = idempotentKey
         startMessageCreationTracking(idempotentKey)
       }
@@ -72,7 +71,13 @@ export function useMessageCreateOrUpdate({ conversationId, message, replyRootId
         })
       }
     },
-    onMutate: async ({ text, attachments, idempotentKey }: ResolvedMessageMutationVariables) => {
+    onMutate: async ({
+      text,
+      attachments,
+    }: {
+      text: string
+      attachments?: DenormalizedAttachmentResourceForCreate[]
+    }) => {
       if (message && isEditing) {
         const optimisticMessage = optimisticallyUpdateMessage({
           conversationId,
@@ -91,7 +96,6 @@ export function useMessageCreateOrUpdate({ conversationId, message, replyRootId
         attachments,
         currentPerson,
         replyRootId,
-        idempotentKey,
       })
 
       return { message: optimisticMessage }
@@ -151,24 +155,7 @@ export function useMessageCreateOrUpdate({ conversationId, message, replyRootId
     },
   })
 
-  const resolveVariables = (
-    variables: MessageMutationVariables
-  ): ResolvedMessageMutationVariables => ({
-    ...variables,
-    idempotentKey: variables.idempotentKey ?? message?.idempotentKey ?? insecureUUID(),
-  })
-
-  const mutate = (
-    variables: MessageMutationVariables,
-    options?: Parameters<typeof mutation.mutate>[1]
-  ) => mutation.mutate(resolveVariables(variables), options)
-
-  const mutateAsync = (
-    variables: MessageMutationVariables,
-    options?: Parameters<typeof mutation.mutateAsync>[1]
-  ) => mutation.mutateAsync(resolveVariables(variables), options)
-
-  return { ...mutation, mutate, mutateAsync }
+  return mutation
 }
 
 /**

package/src/screens/conversation_new/components/groups_form.tsx

@@ -212,9 +212,11 @@ function FormContent({
       </View>
       <Divider />
       <Pressable style={styles.titleSection} onPress={handleTitleSectionPress}>
-        <Heading variant="h3">Title</Heading>
+        <Heading variant="h3">
+          Title <Text style={styles.required}>*</Text>
+        </Heading>
         <AutoFocusAwareTextInput
-          placeholder="Topic of conversation (required)"
+          placeholder="Topic of conversation"
           value={title}
           onChangeText={setTitle}
           style={styles.titleInput}
@@ -291,6 +293,9 @@ const useStyles = () => {
       fontSize: 18,
       color: colors.textColorDefaultPrimary,
     },
+    required: {
+      color: colors.statusErrorText,
+    },
     memberSection: {
       padding: sectionPadding,
       paddingBottom: 0,

package/src/screens/conversation_screen.tsx

@@ -1,3 +1,4 @@
+import { date as formatDate } from '@planningcenter/datetime-fmt'
 import { HeaderTitle, HeaderTitleProps, PlatformPressable } from '@react-navigation/elements'
 import {
   CommonActions,
@@ -10,21 +11,24 @@ import {
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { FlatList, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { Badge, Icon } from '../components'
+import { Badge, Icon, Text } from '../components'
 import { ConversationStartBanner } from '../components/conversation/conversation_start_banner'
 import { JumpToBottomButton } from '../components/conversation/jump_to_bottom_button'
+import { Message } from '../components/conversation/message'
 import { MessageForm } from '../components/conversation/message_form'
-import { MessageList } from '../components/conversation/message_list'
 import {
   ConversationDisabledBanner,
   LeaderMessagesDisabledBanner,
   MemberMessagesDisabledBanner,
 } from '../components/conversation/messages_disabled_banners'
+import { ReplyShadowMessage } from '../components/conversation/reply_shadow_message'
+import { SystemMessage } from '../components/conversation/system_message'
 import { TypingIndicator } from '../components/conversation/typing_indicator'
 import { KeyboardView } from '../components/display/keyboard_view'
 import { useHeaderSlotReserve } from '../components/display/platform_modal_header_buttons'
 import BlankState from '../components/primitive/blank_state_primitive'
 import { ConversationContextProvider } from '../contexts/conversation_context'
+import { useTheme } from '../hooks'
 import { useMessageAvailableMembersAction } from '../hooks/direct_messages/use_message_available_members_action'
 import { useConversation } from '../hooks/use_conversation'
 import { useConversationJoltEvents } from '../hooks/use_conversation_jolt_events'
@@ -41,6 +45,10 @@ import { useVideoModerationJoltEvents } from '../hooks/use_video_moderation_jolt
 import { ConversationResource } from '../types/resources/conversation'
 import { ConversationBadgeResource } from '../types/resources/conversation_badge'
 import { MessageResource } from '../types/resources/message'
+import { getRelativeDateStatus } from '../utils/date'
+import { groupMessages, type DateSeparator } from '../utils/group_messages'
+import { CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL } from '../utils/styles'
+import { isSystemMessage } from '../utils/system_messages'
 
 export type ConversationRouteProps = {
   conversation_id: number
@@ -93,11 +101,16 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
   const { markHandledByMessageForm } = useVideoModerationJoltEvents()
   useEnsureConversationsRouteExists()
   useMarkLatestMessageRead({ conversation, messages })
-  const noMessages = messages.length === 0
+  const messagesWithSeparators = groupMessages({
+    ms: messages,
+    inReplyScreen: !!reply_root_id,
+  })
+  const noMessages = messagesWithSeparators.length === 0
 
   const { repliesDisabled, memberAbility, badges, title } = conversation
   const canReply = memberAbility?.canReply
   const showLeaderDisabledReplyBanner = canReply && repliesDisabled
+  const canDeleteNonAuthoredMessages = memberAbility?.canDeleteNonAuthoredMessages ?? false
   const currentlyEditingMessage = messages.find(m => String(m.id) === String(editing_message_id))
   const replyRootAuthorFirstName = reply_root_author_name?.split(' ')[0]
   const replyHeaderTitle = replyRootAuthorFirstName
@@ -168,19 +181,54 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
             <ConversationStartBanner conversation={conversation} hasMessages={false} />
           </View>
         ) : (
-          <MessageList
-            listRef={listRef}
-            conversation={conversation}
-            conversationId={conversation_id}
-            messages={messages}
-            replyRootId={reply_root_id}
-            hasNextPage={hasNextPage}
-            onEndReached={() => fetchNextPage()}
+          <FlatList
+            inverted
+            ref={listRef}
+            contentContainerStyle={styles.listContainer}
+            data={messagesWithSeparators}
+            keyExtractor={item => item.id}
             onScroll={trackScroll}
             onLayout={onLayout}
             onContentSizeChange={onContentSizeChange}
             onScrollEndDrag={onScrollEndDrag}
             onMomentumScrollEnd={onMomentumScrollEnd}
+            scrollEventThrottle={10}
+            ListFooterComponent={
+              hasNextPage ? null : (
+                <ConversationStartBanner conversation={conversation} hasMessages={true} />
+              )
+            }
+            renderItem={({ item }) => {
+              if (item.type === 'DateSeparator') {
+                return <InlineDateSeparator {...item} />
+              }
+
+              if (item.type === 'ReplyShadowMessage') {
+                return (
+                  <ReplyShadowMessage
+                    {...(item as any)}
+                    conversation_id={conversation_id}
+                    inReplyScreen={!!reply_root_id}
+                  />
+                )
+              }
+
+              if (isSystemMessage(item)) {
+                return <SystemMessage message={item} conversationId={conversation_id} />
+              }
+
+              return (
+                <Message
+                  {...item}
+                  canDeleteNonAuthoredMessages={canDeleteNonAuthoredMessages}
+                  conversation_id={conversation_id}
+                  latestReadMessageSortKey={conversation?.latestReadMessageSortKey}
+                  inReplyScreen={!!reply_root_id}
+                />
+              )
+            }}
+            onEndReached={() => fetchNextPage()}
+            ListHeaderComponent={<View style={styles.listHeader} />}
           />
         )}
         <JumpToBottomButton onPress={handleReturnToBottom} visible={showJumpToBottomButton} />
@@ -247,6 +295,44 @@ function ConversationBottomBar({
   )
 }
 
+function InlineDateSeparator({ date }: DateSeparator) {
+  const styles = useDateSeparatorStyles()
+  const { isThisYear } = getRelativeDateStatus(date)
+  const showYear = !isThisYear
+  const dateStamp = formatDate(date, { style: 'long', year: showYear })
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.separator} />
+      <Text variant="footnote" style={styles.dateText}>
+        {dateStamp}
+      </Text>
+      <View style={styles.separator} />
+    </View>
+  )
+}
+
+const useDateSeparatorStyles = () => {
+  const theme = useTheme()
+  return StyleSheet.create({
+    container: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      paddingHorizontal: CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
+      paddingVertical: 16,
+    },
+    separator: {
+      flex: 1,
+      height: 1,
+      borderTopWidth: 1,
+      borderTopColor: theme.colors.borderColorDefaultBase,
+    },
+    dateText: {
+      paddingHorizontal: 8,
+    },
+  })
+}
+
 interface ConversationScreenTitleProps extends HeaderTitleProps {
   conversation_id: number
   badge?: ConversationBadgeResource
@@ -343,6 +429,13 @@ const useStyles = () => {
       flex: 1,
       justifyContent: 'center',
     },
+    listContainer: {
+      paddingVertical: 12,
+    },
+    listHeader: {
+      // Just whitespace to provide space where the typing indicator can be
+      height: 16,
+    },
   })
 }
 

package/src/screens/conversation_select_type_screen.tsx

@@ -1,5 +1,5 @@
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
-import React from 'react'
+import React, { useLayoutEffect } from 'react'
 import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
 import { useCurrentPerson } from '../hooks/use_current_person'
 import { useConversationTypeAccess } from '../hooks/use_new_conversation_entry'
@@ -10,7 +10,6 @@ import { Haptic } from '../utils/native_adapters'
 
 export const ConversationSelectTypeScreenOptions = getFormSheetScreenOptions({
   headerTitle: 'New conversation',
-  sheetAllowedDetents: 'fitToContents',
 })
 
 export type ConversationSelectTypeScreenProps = StaticScreenProps<{
@@ -35,6 +34,13 @@ export function ConversationSelectTypeScreen({ route }: ConversationSelectTypeSc
   const filterParams = { chat_group_graph_id, group_source_app_name }
   const showDirectMessageOption = directMessagesEligible
 
+  // sheetAllowedDetents depends on DM eligibility, which isn't known until render, so it's set
+  // here instead of in the static ConversationSelectTypeScreenOptions. useLayoutEffect applies
+  // it before paint so the sheet never visibly resizes after opening.
+  useLayoutEffect(() => {
+    navigation.setOptions({ sheetAllowedDetents: showDirectMessageOption ? [0.3] : [0.25] })
+  }, [navigation, showDirectMessageOption])
+
   const handleFilterPress = () => {
     if (!newConversationFromFilter) return
 
@@ -76,7 +82,7 @@ export function ConversationSelectTypeScreen({ route }: ConversationSelectTypeSc
     navigateToNewConversationType('ConversationSelectDirectMessageRecipients')
 
   return (
-    <FormSheet.Root fitToContents>
+    <FormSheet.Root>
       <FormSheet.Header>
         <FormSheet.HeaderTitle>Start a conversation by</FormSheet.HeaderTitle>
       </FormSheet.Header>

package/src/types/resources/message.ts

@@ -17,8 +17,6 @@ export interface MessageResource {
   reactionCounts: ReactionCountResource[]
   replyCount: number
   replyRootId?: string | null
-  replyRoot?: MessageResource | null
-  idempotentKey?: string | null
   messageType: string
   personIdsForSystemEvent?: number[] | null
   systemTextParts?: { names: string[]; overflowCount: number; action: string } | null

package/src/utils/__tests__/group_messages.test.ts

@@ -124,54 +124,6 @@ describe('groupMessages — nextRendersAuthor mirrors the newer enriched neighbo
   })
 })
 
-describe('groupMessages — reply roots', () => {
-  const findShadow = (items: ReturnType<typeof groupMessages>, id: string) =>
-    items.find(item => 'type' in item && item.type === 'ReplyShadowMessage' && item.id === id)
-
-  it('carries the root from the page onto the reply and its shadow', () => {
-    const messages = [
-      message('03', { replyRootId: 'rootA' }),
-      message('02'),
-      message('rootA', { replyRootId: 'rootA', text: 'fresh' }),
-    ]
-
-    const enriched = groupMessages({ ms: messages })
-
-    expect((findEnriched(enriched, '03') as MessageResource).replyRoot?.text).toBe('fresh')
-    expect(findShadow(enriched, '03-rootA')).toMatchObject({ replyRoot: { id: 'rootA' } })
-  })
-
-  it('prefers the page copy of the root over the reply’s included snapshot', () => {
-    const snapshot = message('rootA', { replyRootId: 'rootA', text: 'stale' })
-    const messages = [
-      message('03', { replyRootId: 'rootA', replyRoot: snapshot }),
-      message('02'),
-      message('rootA', { replyRootId: 'rootA', text: 'fresh' }),
-    ]
-
-    const enriched = groupMessages({ ms: messages })
-
-    expect(findShadow(enriched, '03-rootA')).toMatchObject({ replyRoot: { text: 'fresh' } })
-  })
-
-  it('falls back to the included snapshot when the root is not on the page', () => {
-    const snapshot = message('rootA', { replyRootId: 'rootA', text: 'included' })
-    const messages = [message('02', { replyRootId: 'rootA', replyRoot: snapshot })]
-
-    const enriched = groupMessages({ ms: messages })
-
-    expect(findShadow(enriched, '02-rootA')).toMatchObject({ replyRoot: { text: 'included' } })
-  })
-
-  it('leaves replyRoot null when the root is neither on the page nor included', () => {
-    const messages = [message('02', { replyRootId: 'rootA' })]
-
-    const enriched = groupMessages({ ms: messages })
-
-    expect(findShadow(enriched, '02-rootA')).toMatchObject({ replyRoot: null })
-  })
-})
-
 describe('groupMessages — system messages', () => {
   it('flags lastInGroup true and renderAuthor false on system messages', () => {
     const messages = [

package/src/utils/cache/messages_cache.ts

@@ -4,11 +4,7 @@ import { ApiCollection, ApiResource, MessageResource } from '../../types'
 import { JoltReactionEvent } from '../../types/jolt_events'
 import { transformReactionEventDataToReactionCountResource } from '../jolt/transform_reaction_event_data_to_reaction_count_resource'
 import { getMessagesRequestArgs } from '../request/get_messages'
-import {
-  updateAllRecordsInPagesData,
-  updateOrCreateRecordInPagesData,
-  updateRecordInPagesData,
-} from './page_mutations'
+import { updateOrCreateRecordInPagesData, updateRecordInPagesData } from './page_mutations'
 import { deleteRecordInPagesData } from './page_mutations'
 
 export function updateCacheWithMessage(
@@ -19,16 +15,20 @@ export function updateCacheWithMessage(
 ) {
   queryClient.setQueryData<MessagesQueryData>(queryKey, prev => {
     if (event === 'message.created') {
-      // Before adding the new message, remove its pending temporary counterpart.
-      // The Jolt echo can arrive before the HTTP response has swapped it out.
+      // Before adding the new message, remove any pending temporary messages
+      // with matching text to prevent duplicates from race conditions
       let dataAfterTempRemoval = prev
-      if (prev && message.mine && message.idempotentKey) {
+      if (prev && message.text && message.mine) {
         dataAfterTempRemoval = deleteRecordInPagesData({
           data: prev,
           record: message,
-          matchFn: existingMessage =>
-            isTemporaryMessageId(existingMessage.id) &&
-            existingMessage.idempotentKey === message.idempotentKey,
+          matchFn: (existingMessage, _record) => {
+            return (
+              isTemporaryMessageId(existingMessage.id) &&
+              existingMessage.text === message.text &&
+              existingMessage.mine
+            )
+          },
         })
       }
 
@@ -70,22 +70,6 @@ export function updateCacheWithIndividualMessage(
   })
 }
 
-export function updateCacheReplyRoots(
-  queryClient: QueryClient,
-  queryKey: unknown[],
-  root: MessageResource
-) {
-  queryClient.setQueryData<MessagesQueryData>(queryKey, prev =>
-    updateAllRecordsInPagesData({
-      data: prev,
-      processRecord: message =>
-        message.replyRoot?.id === root.id
-          ? { ...message, replyRoot: mergeMessageUpdate(root, message.replyRoot) }
-          : message,
-    })
-  )
-}
-
 export function updateCacheWithReaction(
   queryClient: QueryClient,
   queryKey: unknown[],

package/src/utils/cache/optimistically_create_message.ts

@@ -15,7 +15,6 @@ export function optimisticallyCreateMessage({
   currentPerson,
   message,
   replyRootId,
-  idempotentKey,
 }: {
   conversationId: number
   text: string
@@ -23,7 +22,6 @@ export function optimisticallyCreateMessage({
   currentPerson: CurrentPersonResource
   message?: MessageResource
   replyRootId?: string | null
-  idempotentKey?: string
 }) {
   const id = message?.id || generateTempMessageId()
 
@@ -55,7 +53,6 @@ export function optimisticallyCreateMessage({
     pending: true,
     replyCount: 0,
     replyRootId: replyRootId || null,
-    idempotentKey,
   }
 
   // Add the optimistic message to the cache

package/src/utils/client/transform_response.ts

@@ -32,8 +32,7 @@ const transformRelationships = relationships => {
   }, {})
 }
 
-const addIncludedRecords = (record, included, seen, parent) => {
-  const { relationships } = record
+const addIncludedRecords = (relationships, included, seen, parent) => {
   return Object.keys(relationships || {}).reduce((acc, key) => {
     const relationship = relationships[key]
     if (_.isArray(relationship.data)) {
@@ -44,14 +43,13 @@ const addIncludedRecords = (record, included, seen, parent) => {
       return _.set(
         acc,
         _.pluralize(key),
-        _.map(records, related => transformRecord(related, included, seen))
+        _.map(records, record => transformRecord(record, included, seen))
       )
     } else {
       const [id, type] = _.at(relationship, ['data.id', 'data.type'])
       if (id && type) {
-        const isSelfReference = id === record.id && type === record.type
-        const related = isSelfReference ? undefined : _.find(included, { id, type })
-        return _.set(acc, key, related ? transformRecord(related, included, seen) : null)
+        const record = _.find(included, { id, type })
+        return _.set(acc, key, record ? transformRecord(record, included, seen) : null)
       } else {
         return acc
       }
@@ -80,7 +78,7 @@ const transformRecord = (record, included, seen) => {
 
     seen.set(record, transformed)
 
-    return addIncludedRecords(record, included, seen, transformed)
+    return addIncludedRecords(relationships, included, seen, transformed)
   }
 }