@planningcenter/chat-react-native 3.2.0-rc.2 → 3.2.0-rc.21

package/src/hooks/use_api.ts

@@ -4,10 +4,10 @@ import {
   useInfiniteQuery,
   useQuery,
 } from '@tanstack/react-query'
-import { ApiCollection, ApiResource, ResourceObject } from '../types'
+import { ApiCollection, ApiError, ApiResource, ResourceObject } from '../types'
 import { GetRequest, RequestData } from '../utils/client/types'
 import { App, useApiClient } from './use_api_client'
-import { getRequestQueryKey } from './use_suspense_api'
+import { getRequestQueryKey, RequestQueryKey } from './use_suspense_api'
 
 interface ApiGetOptions extends GetRequest {
   app?: App
@@ -16,9 +16,15 @@ interface ApiGetOptions extends GetRequest {
 
 export const useApiGet = <T extends ResourceObject | ResourceObject[]>(args: ApiGetOptions) => {
   type Resource = ApiResource<T>
+  const apiClient = useApiClient()
 
-  const { data, ...query } = useQuery<Resource, Response>({
+  const { data, ...query } = useQuery<Resource, ApiError>({
     queryKey: getRequestQueryKey(args),
+    queryFn: ({ queryKey }) => {
+      const [url, d, headers, app = 'chat'] = queryKey as RequestQueryKey
+
+      return apiClient[app].get({ url, data: d, headers }) as Promise<Resource>
+    },
     enabled: args.enabled,
   })
 
@@ -42,7 +48,7 @@ export const useApiPaginator = <T extends ResourceObject>(
   const apiClient = useApiClient()
   const query = useInfiniteQuery<
     ApiCollection<T>,
-    Response,
+    ApiError,
     InfiniteData<ApiCollection<T>>,
     any,
     Partial<RequestData> | undefined
@@ -56,7 +62,7 @@ export const useApiPaginator = <T extends ResourceObject>(
       const offset = pageParam?.offset || args.data.offset
       const data = { ...args.data, where, offset }
 
-      return apiClient[app].get({
+      return apiClient[app].get<ApiCollection<T>>({
         url: args.url,
         data,
       })

package/src/hooks/use_api_client.ts

@@ -1,6 +1,7 @@
 import { useContext, useMemo } from 'react'
 import { ChatContext } from '../contexts/chat_context'
 import { Client } from '../utils/client'
+import { Uri } from '../utils'
 
 export type App = 'chat' | 'groups' | 'services'
 const apps: App[] = ['chat', 'groups', 'services']
@@ -9,18 +10,21 @@ export type ApiClient = { [_K in App]: Client }
 
 export const useApiClient = () => {
   const { session, onUnauthorizedResponse } = useContext(ChatContext)
+
+  const uri = useMemo(() => new Uri({ session }), [session])
+
   const api = useMemo(
     () =>
       apps.reduce((acc, app) => {
         acc[app] = new Client({
-          app,
-          session,
+          root: uri.api(`/${app}/v2`),
+          defaultHeaders: uri.headers,
           version: '2018-11-01',
           onUnauthorizedResponse,
         })
         return acc
       }, {} as ApiClient),
-    [session, onUnauthorizedResponse]
+    [uri, onUnauthorizedResponse]
   )
 
   return api

package/src/hooks/use_conversations.ts

@@ -1,25 +1,43 @@
+import { InfiniteData, UseSuspenseInfiniteQueryResult } from '@tanstack/react-query'
 import { useMemo } from 'react'
-import { ConversationResource } from '../types'
-import { useSuspensePaginator } from './use_suspense_api'
+import { ApiCollection, ConversationResource } from '../types'
 import { ConversationRequestArgs, getConversationsRequestArgs } from '../utils/request/conversation'
+import { useSuspensePaginator } from './use_suspense_api'
 
-export function useConversations(args?: Partial<ConversationRequestArgs>) {
+export type ConversationPaginationResult = UseSuspenseInfiniteQueryResult<
+  InfiniteData<ApiCollection<ConversationResource>, unknown>,
+  Response
+>
+
+export type UseConversationsValue = Pick<
+  ConversationPaginationResult,
+  | 'isFetching'
+  | 'isError'
+  | 'error'
+  | 'fetchNextPage'
+  | 'hasNextPage'
+  | 'isFetched'
+  | 'isRefetching'
+> & {
+  conversations: ConversationResource[]
+  refetch: () => Promise<any>
+}
+
+export function useConversations(args?: Partial<ConversationRequestArgs>): UseConversationsValue {
   const requestArgs = getConversationsRequestArgs(args)
   const { data, ...rest } = useSuspensePaginator<ConversationResource>(requestArgs)
 
-  const conversations = useMemo(
-    () =>
-      data.sort((a, b) => {
-        const dateA = a.lastMessageCreatedAt || a.createdAt
-        const dateB = b.lastMessageCreatedAt || b.createdAt
-        if (a.lastMessageCreatedAt && !b.lastMessageCreatedAt) return 1
-        if (!a.lastMessageCreatedAt && b.lastMessageCreatedAt) return -1
-        if (dateB > dateA) return 1
-        if (dateB < dateA) return -1
-        return 0
-      }),
-    [data]
-  )
+  const conversations = useMemo(() => data.sort(sortByLastMessage), [data])
 
   return { conversations, ...rest }
 }
+
+function sortByLastMessage(a: ConversationResource, b: ConversationResource): number {
+  const dateA = a.lastMessageCreatedAt || a.createdAt
+  const dateB = b.lastMessageCreatedAt || b.createdAt
+  if (a.lastMessageCreatedAt && !b.lastMessageCreatedAt) return 1
+  if (!a.lastMessageCreatedAt && b.lastMessageCreatedAt) return -1
+  if (dateB > dateA) return 1
+  if (dateB < dateA) return -1
+  return 0
+}

package/src/hooks/use_conversations_actions.ts

@@ -0,0 +1,119 @@
+import { useMutation } from '@tanstack/react-query'
+import { Alert } from 'react-native'
+import { useConversationsContext } from '../contexts/conversations_context'
+import { ApiResource, ConversationResource } from '../types'
+import { useApiClient } from './use_api_client'
+import { useConversationsCache } from './use_conversations_cache'
+import { useCurrentPersonCache } from './use_current_person'
+
+export const useConversationsMarkRead = ({
+  conversation,
+}: {
+  conversation: ConversationResource
+}) => {
+  const apiClient = useApiClient()
+  const { args } = useConversationsContext()
+  const currentPersonCache = useCurrentPersonCache()
+  const { update, invalidate } = useConversationsCache(args)
+
+  function handlePersonUnreadCount(read: boolean) {
+    currentPersonCache.update({}, person => {
+      const currentUnread = person.unreadCount
+      const updatedUnread = read ? Math.max(currentUnread - 1, 0) : currentUnread + 1
+      return { ...person, unreadCount: updatedUnread }
+    })
+  }
+
+  const { mutate: handleMarkRead, ...mutation } = useMutation({
+    onMutate: async (read: boolean) => {
+      update({
+        ...conversation,
+        unreadCount: read ? 0 : 1,
+      })
+      handlePersonUnreadCount(read)
+    },
+    mutationKey: ['markRead', conversation.id],
+    mutationFn: async (read: boolean) => {
+      const action = read ? 'mark_read' : 'mark_unread'
+
+      return apiClient.chat.post<ApiResource<ConversationResource>>({
+        url: `/me/conversations/${conversation.id}/${action}`,
+        data: { data: { type: '', attributes: {} }, fields: { Conversation: 'unread_count' } },
+      })
+    },
+    onSuccess: (response: ApiResource<ConversationResource>) => {
+      update(response.data)
+    },
+    onError: () => {
+      Alert.alert('Oops', 'Something went wrong updating this conversation, please try again')
+      invalidate()
+    },
+  })
+
+  return {
+    read: conversation.unreadCount < 1, // prefer cache
+    markRead: handleMarkRead,
+    ...mutation,
+  }
+}
+
+export const useConversationsMute = ({ conversation }: { conversation: ConversationResource }) => {
+  const apiClient = useApiClient()
+  const { args } = useConversationsContext()
+  const { update, invalidate } = useConversationsCache(args)
+
+  const { mutate: setMuted, ...mutation } = useMutation({
+    onMutate: async (muted: boolean) => {
+      update({
+        ...conversation,
+        muted,
+      })
+    },
+    mutationKey: ['muteConversation'],
+    mutationFn: async (muted: boolean) => {
+      const action = muted ? 'mute' : 'unmute'
+
+      return apiClient.chat.post<ApiResource<ConversationResource>>({
+        url: `/me/conversations/${conversation.id}/${action}`,
+        data: { data: { type: '', attributes: {} }, fields: { Conversation: 'muted' } },
+      })
+    },
+    onSuccess: (response: ApiResource<ConversationResource>) => {
+      update(response.data)
+    },
+    onError: () => {
+      Alert.alert('Oops', 'Something went wrong muting this conversation, please try again')
+      invalidate()
+    },
+  })
+
+  return {
+    muted: conversation.muted, // prefer cache
+    setMuted,
+    ...mutation,
+  }
+}
+
+export const useMarkAllRead = () => {
+  const apiClient = useApiClient()
+  const { args } = useConversationsContext()
+  const { invalidate, updateAll } = useConversationsCache(args)
+  const { mutate: markAllRead, ...query } = useMutation({
+    onMutate: () => {
+      updateAll({
+        unreadCount: 0,
+      })
+    },
+    mutationKey: ['markAllRead', args],
+    mutationFn: () =>
+      apiClient.chat.post({
+        url: '/me/mark_all_read',
+      }),
+    onSettled: invalidate,
+  })
+
+  return {
+    markAllRead,
+    ...query,
+  }
+}

package/src/hooks/{use_conversation_jolt_events.ts → use_conversations_cache.ts}

@@ -1,23 +1,20 @@
 import { InfiniteData, useQueryClient } from '@tanstack/react-query'
 import { ApiCollection, ApiResource, ConversationResource } from '../types'
-import { deleteRecordInPagesData, updateOrCreateRecordInPagesData } from '../utils'
+import {
+  deleteRecordInPagesData,
+  updateAllRecordsInPagesData,
+  updateOrCreateRecordInPagesData,
+} from '../utils'
+import { ConversationRequestArgs, getConversationsRequestArgs } from '../utils/request/conversation'
 import { useApiClient } from './use_api_client'
-import { useCurrentPerson } from './use_current_person'
-import { useJoltChannel, useJoltEvent } from './use_jolt'
 import { getRequestQueryKey } from './use_suspense_api'
-import { JoltConversationEvent } from '../types/jolt_events'
-import { ConversationDeletedEvent } from '../types/jolt_events/conversation_events'
-import { getConversationsRequestArgs } from '../utils/request/conversation'
 
 type QueryData = InfiniteData<ApiCollection<ConversationResource>>
 
-export function useConversationsJoltEvents() {
+export function useConversationsCache(args?: Partial<ConversationRequestArgs>) {
   const apiClient = useApiClient()
   const queryClient = useQueryClient()
-  const currentPerson = useCurrentPerson()
-  const joltChannel = useJoltChannel(`chat.people.${currentPerson.id}`)
-
-  const conversationsRequestArgs = getConversationsRequestArgs()
+  const conversationsRequestArgs = getConversationsRequestArgs(args)
   const conversationQueryKey = getRequestQueryKey(conversationsRequestArgs)
 
   const fetchConversation = async (id: number) => {
@@ -33,10 +30,7 @@ export function useConversationsJoltEvents() {
     return data
   }
 
-  const handleConversationUpdateOrCreate = async (e: JoltConversationEvent) => {
-    const { data } = e.data
-    const conversation: ConversationResource = await fetchConversation(data.id).catch(c => c)
-
+  const updateOrCreate = async (conversation: ConversationResource) => {
     queryClient.setQueryData<QueryData>(conversationQueryKey, prev =>
       updateOrCreateRecordInPagesData({
         data: prev,
@@ -48,16 +42,37 @@ export function useConversationsJoltEvents() {
     )
   }
 
-  const handleConversationDestroy = (e: ConversationDeletedEvent) => {
+  const updateAll = async (update: Partial<ConversationResource>) => {
+    queryClient.setQueryData<QueryData>(conversationQueryKey, prev =>
+      updateAllRecordsInPagesData({
+        data: prev,
+        processRecord: record => ({ ...record, ...update }),
+      })
+    )
+  }
+
+  const fetchAndUpdateOrCreate = async ({ id }: { id: number }) => {
+    const conversation: ConversationResource = await fetchConversation(id).catch(c => c)
+
+    updateOrCreate(conversation)
+  }
+
+  const handleConversationDestroy = ({ id }: { id: number }) => {
     queryClient.setQueryData<QueryData>(conversationQueryKey, prev =>
       deleteRecordInPagesData({
         data: prev,
-        record: { id: e.data.data.id },
+        record: { id },
       })
     )
   }
 
-  useJoltEvent(joltChannel, 'conversation.updated', handleConversationUpdateOrCreate)
-  useJoltEvent(joltChannel, 'conversation.created', handleConversationUpdateOrCreate)
-  useJoltEvent(joltChannel, 'conversation.destroyed', handleConversationDestroy)
+  return {
+    create: updateOrCreate,
+    destroy: handleConversationDestroy,
+    fetchCreate: fetchAndUpdateOrCreate,
+    fetchUpdate: fetchAndUpdateOrCreate,
+    invalidate: () => queryClient.invalidateQueries({ queryKey: conversationQueryKey }),
+    update: updateOrCreate,
+    updateAll,
+  }
 }

package/src/hooks/use_conversations_jolt_events.ts

@@ -0,0 +1,25 @@
+import { JoltConversationEvent } from '../types/jolt_events'
+import { ConversationRequestArgs } from '../utils/request/conversation'
+import { useConversationsCache } from './use_conversations_cache'
+import { useCurrentPerson, useCurrentPersonCache } from './use_current_person'
+import { useJoltChannel, useJoltEvent } from './use_jolt'
+
+export function useConversationsJoltEvents(args?: Partial<ConversationRequestArgs>) {
+  const currentPerson = useCurrentPerson()
+  const joltChannel = useJoltChannel(`chat.people.${currentPerson.id}`)
+  const cache = useConversationsCache(args)
+  const currentPersonCache = useCurrentPersonCache()
+
+  useJoltEvent(joltChannel, 'conversation.updated', (e: JoltConversationEvent) =>
+    cache.fetchUpdate({ id: e.data.data.id })
+  )
+  useJoltEvent(joltChannel, 'conversation.created', (e: JoltConversationEvent) =>
+    cache.fetchCreate({ id: e.data.data.id })
+  )
+  useJoltEvent(joltChannel, 'conversation.destroyed', (e: JoltConversationEvent) =>
+    cache.destroy({ id: e.data.data.id })
+  )
+
+  useJoltEvent(joltChannel, 'STREAM_USER_UPDATED', currentPersonCache.invalidate) // Would be nice to have a non-stream chat event
+  useJoltEvent(joltChannel, 'conversation.read', currentPersonCache.invalidate)
+}

package/src/hooks/use_current_person.ts

@@ -1,15 +1,43 @@
+import { useQueryClient } from '@tanstack/react-query'
 import { CurrentPersonResource } from '../types'
-import { useSuspenseGet } from './use_suspense_api'
+import { getRequestQueryKey, useSuspenseGet } from './use_suspense_api'
+import { ApiResource } from '../types/api_primitives'
 
-export const useCurrentPerson = () => {
-  const { data: person } = useSuspenseGet<CurrentPersonResource>({
-    url: '/me',
-    data: {
-      fields: {
-        Person: ['id', 'name', 'avatar', 'can_chat', 'unread_count', 'pco_chat_enabled'],
-      },
+export const currentPersonRequestArgs = {
+  url: '/me',
+  data: {
+    fields: {
+      Person: ['id', 'name', 'avatar', 'can_chat', 'unread_count', 'pco_chat_enabled'],
     },
-  })
+  },
+}
+
+export const currentPersonQueryKey = getRequestQueryKey(currentPersonRequestArgs)
+
+export const useCurrentPerson = () => {
+  const { data: person } = useSuspenseGet<CurrentPersonResource>(currentPersonRequestArgs)
 
   return person
 }
+
+type ProcessRecord<T> = (record: T, update: Partial<T>) => T
+
+export const useCurrentPersonCache = () => {
+  const queryClient = useQueryClient()
+  const handleUpdate = (
+    update: Partial<CurrentPersonResource>,
+    processRecord: ProcessRecord<CurrentPersonResource> = (r, u) => ({ ...r, ...u })
+  ) => {
+    queryClient.setQueryData<ApiResource<CurrentPersonResource>>(currentPersonQueryKey, data => {
+      if (!data) return data
+
+      return { ...data, data: processRecord(data.data, update) }
+    })
+  }
+
+  const handleInvalidate = () => {
+    queryClient.invalidateQueries({ queryKey: currentPersonQueryKey })
+  }
+
+  return { update: handleUpdate, invalidate: handleInvalidate }
+}

package/src/hooks/use_giphy.ts

@@ -0,0 +1,97 @@
+import { useCallback, useContext, useEffect, useState } from 'react'
+import { DenormalizedGiphyAttachmentResourceForCreate } from '../types/resources/denormalized_attachment_resource'
+import { ChatContext } from '../contexts/chat_context'
+
+interface GiphyGif {
+  id: string
+  url: string
+  title: string
+  images: {
+    original: GiphyVariant
+    fixed_height: GiphyVariant
+    fixed_height_still: GiphyVariant
+    fixed_height_downsampled: GiphyVariant
+    fixed_width: GiphyVariant
+    fixed_width_still: GiphyVariant
+    fixed_width_downsampled: GiphyVariant
+  }
+}
+
+interface GiphyVariant {
+  url: string
+  width: number
+  height: number
+  size: string
+  frames: string
+}
+
+export function useGiphy(term: string = '') {
+  const { giphyApiKey } = useContext(ChatContext)
+  const [isSearching, setIsSearching] = useState(false)
+  const [results, setResults] = useState<DenormalizedGiphyAttachmentResourceForCreate[]>([])
+  const [resultIndex, setResultIndex] = useState(0)
+  const result = results[resultIndex]
+
+  useEffect(() => {
+    if (!giphyApiKey || !term) {
+      setResults([])
+      return
+    }
+
+    setIsSearching(true)
+    fetch(`https://api.giphy.com/v1/gifs/search?api_key=${giphyApiKey}&q=${term}&limit=20&rating=g`)
+      .then(response => response.json())
+      .then(data => {
+        const originalGiphys: GiphyGif[] = data.data
+        const denormalizedGiphys = denormalizeGiphys(term, originalGiphys)
+
+        setResults(denormalizedGiphys)
+        setResultIndex(0)
+      })
+      .catch(error => {
+        console.error('Error fetching gifs:', error)
+      })
+      .finally(() => {
+        setIsSearching(false)
+      })
+  }, [giphyApiKey, term])
+
+  const nextResult = useCallback(() => {
+    setResultIndex(oldResultIndex => (oldResultIndex < results.length - 1 ? oldResultIndex + 1 : 0))
+  }, [results.length])
+
+  const prevResult = useCallback(() => {
+    setResultIndex(oldResultIndex => (oldResultIndex > 0 ? oldResultIndex - 1 : results.length - 1))
+  }, [results.length])
+
+  return {
+    isSearching,
+    result,
+    resultIndex,
+    nextResult,
+    prevResult,
+  }
+}
+
+function denormalizeGiphys(
+  term: string,
+  giphys: GiphyGif[]
+): DenormalizedGiphyAttachmentResourceForCreate[] {
+  return giphys.map(giphy => ({
+    type: 'giphy',
+    id: giphy.id,
+    title: term,
+    original_giphy_title: giphy.title,
+    title_link: giphy.url,
+    thumb_url: giphy.images.fixed_width.url,
+    giphy: {
+      original: giphy.images.original,
+      fixed_height: giphy.images.fixed_height,
+      fixed_height_still: giphy.images.fixed_height_still,
+      fixed_height_downsampled: giphy.images.fixed_height_downsampled,
+      fixed_width: giphy.images.fixed_width,
+      fixed_width_still: giphy.images.fixed_width_still,
+      fixed_width_downsampled: giphy.images.fixed_width_downsampled,
+    },
+  }))
+}

package/src/hooks/use_jolt.ts

@@ -1,13 +1,17 @@
 import JoltClient from '@planningcenter/jolt-client'
-import { CustomMessage } from '@planningcenter/jolt-client/dist/types/JoltConnection'
+import {
+  CustomMessage,
+  FetchAuthToken,
+} from '@planningcenter/jolt-client/dist/types/JoltConnection'
 import {
   FetchSubscribeToken,
   JoltSubscription,
 } from '@planningcenter/jolt-client/dist/types/JoltSubscription'
-import { useQuery, useSuspenseQuery } from '@tanstack/react-query'
-import { useEffect, useState } from 'react'
+import { useQuery, useQueryClient, useSuspenseQuery } from '@tanstack/react-query'
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useChatContext } from '../contexts/chat_context'
 import { ApiResource } from '../types'
-import { useApiClient } from './use_api_client'
+import { Client, Uri } from '../utils'
 
 interface JoltResponse {
   type: 'JoltToken'
@@ -16,28 +20,45 @@ interface JoltResponse {
 }
 
 export const useJoltClient = (): JoltClient | undefined => {
-  const apiClient = useApiClient()
-  const { data: joltToken } = useSuspenseQuery<ApiResource<JoltResponse>>({
-    queryKey: ['jolt-token'],
-    queryFn: () => {
-      return apiClient.chat.post({
-        url: '/me/jolt_authorize',
+  const { session } = useChatContext()
+  const queryClient = useQueryClient()
+  const uri = useMemo(() => new Uri({ session }), [session])
+  const apiClient = useMemo(
+    () =>
+      new Client({
+        root: uri.api(`/chat/v2`),
+        defaultHeaders: uri.headers,
+        version: '2018-11-01',
+      }),
+    [uri]
+  )
+
+  const fetchJoltToken = useCallback(async () => {
+    return apiClient.post<ApiResource<JoltResponse>>({
+      url: '/me/jolt_authorize',
+      data: {
         data: {
-          data: {
-            type: 'JoltToken',
-            attributes: {},
-          },
+          type: 'JoltToken',
+          attributes: {},
         },
-      })
-    },
+      },
+    })
+  }, [apiClient])
+
+  const { data: joltToken } = useSuspenseQuery<ApiResource<JoltResponse>>({
+    queryKey: ['jolt-token'],
+    queryFn: fetchJoltToken,
   })
 
-  const fetchAuthTokenFn = async () => {
-    return joltToken.data.id || ''
+  const fetchAuthTokenFn: FetchAuthToken = () => {
+    return queryClient.fetchQuery({
+      queryKey: ['jolt-auth-token'],
+      queryFn: () => fetchJoltToken().then(res => res.data.id),
+    })
   }
 
-  const fetchSubscribeTokenFn: FetchSubscribeToken = (channel: string, connectionId: string) => {
-    return apiClient.chat
+  const fetchSubscribeToken: FetchSubscribeToken = (channel: string, connectionId: string) => {
+    return apiClient
       .post<ApiResource<JoltResponse>>({
         url: '/me/jolt_subscribe',
         data: {
@@ -48,6 +69,21 @@ export const useJoltClient = (): JoltClient | undefined => {
         },
       })
       .then(res => res.data.id)
+      .catch((res: unknown) => {
+        console.error('failed to subscribe to Jolt channel', res)
+        return ''
+      })
+  }
+
+  const fetchSubscribeTokenFn: FetchSubscribeToken = (
+    channel: string,
+    connectionId: string,
+    options
+  ) => {
+    return queryClient.fetchQuery({
+      queryKey: ['jolt-subscribe-token', channel, connectionId],
+      queryFn: () => fetchSubscribeToken(channel, connectionId, options),
+    })
   }
 
   const { data: joltClient } = useQuery({

package/src/hooks/use_message_create.ts

@@ -0,0 +1,55 @@
+import { InfiniteData, useMutation } from '@tanstack/react-query'
+import { getMessagesQueryKey, getMessagesRequestArgs } from './use_conversation_messages'
+import { useApiClient } from './use_api_client'
+import { ApiCollection, ApiResource, MessageResource } from '../types'
+import { chatQueryClient } from '../contexts/api_provider'
+import { updateOrCreateRecordInPagesData } from '../utils'
+import { DenormalizedAttachmentResourceForCreate } from '../types/resources/denormalized_attachment_resource'
+
+interface Props {
+  conversationId: number
+}
+
+export function useMessageCreate({ conversationId }: Props) {
+  const apiClient = useApiClient()
+  const mutation = useMutation({
+    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(',')])
+      )
+
+      return apiClient.chat.post<ApiResource<MessageResource>>({
+        url: `/me/conversations/${conversationId}/messages`,
+        data: {
+          ...requestParams.data,
+          data: {
+            type: 'Message',
+            attributes: { text, ...(attachments ? { attachments } : {}) },
+          },
+          fields: fieldsWithValueJoined,
+        },
+      })
+    },
+    onSuccess: (result: ApiResource<MessageResource>) => {
+      const updatedMessage = result.data
+      type QueryData = InfiniteData<ApiCollection<MessageResource>>
+      const queryKey = getMessagesQueryKey({ conversation_id: conversationId })
+
+      chatQueryClient.setQueryData<QueryData>(queryKey, data =>
+        updateOrCreateRecordInPagesData({
+          data,
+          record: updatedMessage,
+        })
+      )
+    },
+  })
+
+  return mutation
+}