app-tutor-ai-consumer 1.18.2 → 1.19.0

package/src/modules/messages/components/messages-list/messages-list.tsx

@@ -1,89 +1,16 @@
-import { lazy, useCallback, useRef } from 'react'
-import clsx from 'clsx'
-import { createPortal } from 'react-dom'
+import type { ParsedMessage } from '@/src/modules/messages'
+import { MessageItem } from '@/src/modules/messages/components'
 
-import { usePageLayoutMainRefContext, useWidgetLoadingAtomValue } from '@/src/modules/widget'
-import { useAllMessages, useManageScroll } from '../../hooks'
-import { useSkeletonRef } from '../../hooks/use-skeleton-ref'
-import { MessageItem } from '../message-item'
-import { MessageSkeleton } from '../message-skeleton'
+function MessagesList({ messagesMap }: { messagesMap: Map<string, ParsedMessage[]> }) {
+  if (!(messagesMap.size > 0)) return null
 
-const MessageItemError = lazy(() => import('../message-item-error/message-item-error'))
-
-const MessageItemLoading = lazy(() => import('../message-item-loading/message-item-loading'))
-
-const MessageItemEndOfScroll = lazy(
-  () => import('../message-item-end-of-scroll/message-item-end-of-scroll')
-)
-
-const ScrollToBottomButton = lazy(
-  () => import('@/src/modules/widget/components/scroll-to-bottom-button/scroll-to-bottom-button')
-)
-
-function MessagesList() {
-  const scrollerRef = useRef<HTMLDivElement>(null)
-  const scrollToButtonRef = useRef<HTMLButtonElement>(null)
-  const { allMessages, messagesQuery } = useAllMessages()
-  const widgetIsLoading = useWidgetLoadingAtomValue()
-  const skeletonRef = useSkeletonRef()
-  const { showScrollButton } = useManageScroll(scrollerRef)
-  const mainLayoutRef = usePageLayoutMainRefContext()
-
-  const scrollToBottom = useCallback(() => {
-    const { current: scroller } = scrollerRef
-
-    if (!scroller) return
-
-    scroller.scrollTo({
-      top: scroller.scrollHeight,
-      behavior: 'smooth'
-    })
-  }, [])
-
-  return (
-    <div ref={scrollerRef} className='mx-2 my-4 flex flex-col gap-2 overflow-auto px-4'>
-      <MessageItemLoading show={messagesQuery.isFetching} />
-
-      <MessageItemEndOfScroll
-        show={!messagesQuery.isFetching && !messagesQuery.hasNextPage && allMessages.length > 0}
-      />
-      {mainLayoutRef.current &&
-        createPortal(
-          <ScrollToBottomButton
-            ref={scrollToButtonRef}
-            show={showScrollButton}
-            onClick={scrollToBottom}
-          />,
-          mainLayoutRef.current
-        )}
-
-      {allMessages?.map(([publishingDate, messages], i) => (
-        <div key={i} className='flex flex-1 flex-col justify-center gap-6'>
-          <span className='self-center rounded-full border border-neutral-300 bg-neutral-200 px-4 py-2 text-xs capitalize text-neutral-900'>
-            {publishingDate}
-          </span>
-          {messages.map((msg, k) => (
-            <MessageItem key={`${msg.id}-${k}`} message={msg} />
-          ))}
-        </div>
+  return Array.from(messagesMap).map(([, messages], i) => (
+    <div key={i} className='flex flex-1 flex-col justify-center gap-6'>
+      {messages.map((msg, k) => (
+        <MessageItem key={`${msg.id}-${k}`} message={msg} />
       ))}
-
-      <MessageItemError
-        show={Boolean(messagesQuery.error)}
-        message={`❌ Error loading messages: ${messagesQuery.error?.message ?? ''}`}
-        retry={() => void messagesQuery.refetch()}
-      />
-
-      <div
-        className={clsx({
-          'pointer-events-none h-0 overflow-hidden opacity-0': !widgetIsLoading,
-          'pb-4': widgetIsLoading
-        })}
-        ref={skeletonRef}>
-        <MessageSkeleton />
-      </div>
     </div>
-  )
+  ))
 }
 
 export default MessagesList

package/src/modules/messages/constants.ts

@@ -1,2 +1,7 @@
 export const MSG_MAX_COUNT = 20
 export const MSG_MAX_PAGES = 20
+
+export const MessagesEndpoints = {
+  getAll: (conversationId: string) =>
+    `${process.env.API_CONVERSATION_URL}/v1/conversations/${conversationId}/messages`
+}

package/src/modules/messages/events.ts

@@ -1,15 +1,23 @@
-import type { ICustomEvent } from '@/src/types'
-
 import type { SubmitQuestionEventDetail } from './types'
 
 export const MessagesEventTypes = {
   SUBMIT_QUESTION: 'c3po-chat:questionSubmitted'
 } as const
 
-const MessagesEventsList: Array<ICustomEvent<typeof MessagesEventTypes>> = [
+const MessagesEventsList = [
   {
     name: MessagesEventTypes.SUBMIT_QUESTION,
-    handler: () => () => undefined,
+    handler: (callback: () => void) => {
+      const listener = () => {
+        callback()
+      }
+
+      window.addEventListener(MessagesEventTypes.SUBMIT_QUESTION, listener)
+
+      return () => {
+        window.removeEventListener(MessagesEventTypes.SUBMIT_QUESTION, listener)
+      }
+    },
     dispatch: () => {
       const event: CustomEventInit<SubmitQuestionEventDetail> = {
         detail: {

package/src/modules/messages/hooks/index.ts

@@ -2,5 +2,6 @@ export * from './use-all-messages'
 export * from './use-fetch-messages'
 export * from './use-infinite-get-messages'
 export * from './use-manage-scroll'
+export * from './use-scroller'
 export * from './use-send-text-message'
 export * from './use-subscribe-message-received-event'

package/src/modules/messages/hooks/use-all-messages/use-all-messages.tsx

@@ -10,8 +10,7 @@ function useAllMessages() {
 
   const messagesQuery = useInfiniteGetMessages({
     conversationId: settings?.conversationId ?? '',
-    profileId: profileQuery.data?.id ?? '',
-    enabled: Boolean(settings?.conversationId && profileQuery.data?.id)
+    profileId: profileQuery.data?.id ?? ''
   })
 
   const allMessages = useMemo(

package/src/modules/messages/hooks/use-infinite-get-messages/use-infinite-get-messages.spec.tsx

@@ -1,9 +1,6 @@
-import type MessageService from '@hotmart/sparkie/dist/MessageService'
-
-import { act, renderHook, waitFor } from '@/src/config/tests'
-import { SparkieService } from '@/src/modules/sparkie'
-import { SparkieMessageServiceMock } from '@/src/modules/sparkie/__tests__/sparkie.mock'
+import { act, MockRequest, renderHook, waitFor } from '@/src/config/tests'
 import IMessageWithSenderDataMock from '../../__tests__/imessage-with-sender-data.mock'
+import { MessagesEndpoints, MSG_MAX_COUNT } from '../../constants'
 import type { IMessageWithSenderData } from '../../types'
 
 import useInfiniteGetMessages from './use-infinite-get-messages'
@@ -11,21 +8,16 @@ import useInfiniteGetMessages from './use-infinite-get-messages'
 describe('useInfiniteGetMessages', () => {
   const mockConversationId = 'conversation-123'
   const mockProfileId = 'profile-456'
-  const mockEnabled = true
+  const limitMock = 2
 
   beforeEach(() => {
     vi.clearAllMocks()
-    vi.spyOn(SparkieService, 'getMessageService').mockResolvedValue(
-      SparkieMessageServiceMock as unknown as MessageService
-    )
-    SparkieMessageServiceMock.getAll.mockClear()
   })
 
   const createHook = (
     props = {
       conversationId: mockConversationId,
-      profileId: mockProfileId,
-      enabled: mockEnabled
+      profileId: mockProfileId
     }
   ) => renderHook(() => useInfiniteGetMessages(props))
 
@@ -34,22 +26,28 @@ describe('useInfiniteGetMessages', () => {
 
     await waitFor(() => expect(result.current.data).toBeDefined())
 
-    expect(result.current.data?.size).toBe(10)
+    expect(result.current.data?.size).toBe(MSG_MAX_COUNT)
   })
 
   it('should be able to fetch next pages', async () => {
-    SparkieMessageServiceMock.getAll.mockRestore()
-    SparkieMessageServiceMock.getAll.mockReturnValueOnce(
-      new IMessageWithSenderDataMock().getMany(2) as IMessageWithSenderData[]
+    const allMessages = limitMock + 1
+
+    MockRequest.mock(
+      MessagesEndpoints.getAll(mockConversationId),
+      new IMessageWithSenderDataMock().getMany(allMessages) as IMessageWithSenderData[]
     )
 
-    const { result } = createHook()
+    const { result } = createHook({
+      conversationId: mockConversationId,
+      profileId: mockProfileId,
+      limit: limitMock
+    } as never)
 
     await waitFor(() => {
       expect(result.current.isSuccess).toBe(true)
     })
 
-    expect(result.current.data?.size).toBe(10)
+    expect(result.current.data?.size).toBe(allMessages)
 
     act(() => {
       void result.current.fetchNextPage()
@@ -59,7 +57,8 @@ describe('useInfiniteGetMessages', () => {
       expect(result.current.fetchStatus).toBe('idle')
     })
 
-    expect(result.current.data?.size).toBe(2)
+    expect(result.current.data?.size).toBe(allMessages)
+
     expect(result.current.hasNextPage).toBe(false)
   })
 })

package/src/modules/messages/hooks/use-infinite-get-messages/use-infinite-get-messages.tsx

@@ -2,31 +2,38 @@ import type { UndefinedInitialDataInfiniteOptions } from '@tanstack/react-query'
 import { useInfiniteQuery } from '@tanstack/react-query'
 
 import { formatTime } from '@/src/config/dayjs'
-import { MessagesService } from '../..'
-import { MSG_MAX_COUNT } from '../../constants'
-import type { FetchMessagesResponse, ParsedMessage } from '../../types'
+import { api } from '@/src/config/request'
+import { MessagesEndpoints, MSG_MAX_COUNT } from '../../constants'
+import type { FetchMessagesResponse, IMessageWithSenderData, ParsedMessage } from '../../types'
 import { messagesParser } from '../../utils'
-import type { UseFetchMessagesProps } from '../use-fetch-messages'
 
-export type UseGetMessagesQueryProps = {
-  conversationId: string
-  profileId: string
-  enabled?: boolean
+export type GetAllMessagesQueryProps = {
+  conversationId?: string
+  profileId?: string
+  limit?: number
 }
 
-export const getMessagesInfiniteQuery = ({
+export const getAllMessagesQuery = ({
   conversationId,
   profileId,
-  enabled
-}: UseGetMessagesQueryProps) =>
+  limit = MSG_MAX_COUNT
+}: GetAllMessagesQueryProps) =>
   ({
-    queryKey: ['sparkie:messageService:getAll', conversationId, profileId],
+    queryKey: ['getAllMessagesWithoutSparkie', limit, conversationId],
     queryFn: async ({ pageParam }: { pageParam?: number }) => {
-      const messages = await MessagesService.getMessages({ conversationId, before: pageParam })
+      const { data: messages } = await api.get<IMessageWithSenderData[]>(
+        MessagesEndpoints.getAll(conversationId as string),
+        {
+          params: {
+            before: pageParam,
+            limit
+          }
+        }
+      )
 
       return {
         messages,
-        hasMore: messages.length === MSG_MAX_COUNT
+        hasMore: messages.length === limit
       } as FetchMessagesResponse
     },
     initialPageParam: undefined,
@@ -37,26 +44,29 @@ export const getMessagesInfiniteQuery = ({
 
       return minSentAt
     },
-    enabled,
+    enabled: Boolean(conversationId && profileId) && limit > 0,
     select(data) {
       const messages = data.pages?.flatMap((page) => page.messages) ?? []
-      return messagesParser({ messages, profileId }).reduce((messagesMap, currentMessage) => {
-        const timestamp = formatTime(currentMessage.timestamp, true)
+      return messagesParser({ messages, profileId: profileId as string }).reduce(
+        (messagesMap, currentMessage) => {
+          const timestamp = formatTime(currentMessage.timestamp, true)
 
-        if (!messagesMap.has(timestamp)) {
-          messagesMap.set(timestamp, [currentMessage])
-          return messagesMap
-        }
+          if (!messagesMap.has(timestamp)) {
+            messagesMap.set(timestamp, [currentMessage])
+            return messagesMap
+          }
 
-        const existingTimestampValues = Array.from(messagesMap.get(timestamp) ?? [])
+          const existingTimestampValues = Array.from(messagesMap.get(timestamp) ?? [])
 
-        messagesMap.set(
-          timestamp,
-          [...existingTimestampValues, currentMessage].sort((a, b) => a.timestamp - b.timestamp)
-        )
+          messagesMap.set(
+            timestamp,
+            [...existingTimestampValues, currentMessage].sort((a, b) => a.timestamp - b.timestamp)
+          )
 
-        return messagesMap
-      }, new Map<string, ParsedMessage[]>())
+          return messagesMap
+        },
+        new Map<string, ParsedMessage[]>()
+      )
     }
   }) as UndefinedInitialDataInfiniteOptions<
     FetchMessagesResponse,
@@ -64,15 +74,11 @@ export const getMessagesInfiniteQuery = ({
     Map<string, ParsedMessage[]>
   >
 
-function useInfiniteGetMessages({
-  conversationId,
-  profileId,
-  enabled = false
-}: Omit<UseFetchMessagesProps, 'currentMessages' | 'loadFirstPage'>) {
-  const query = getMessagesInfiniteQuery({
+function useInfiniteGetMessages({ conversationId, profileId, limit }: GetAllMessagesQueryProps) {
+  const query = getAllMessagesQuery({
     conversationId,
     profileId,
-    enabled
+    limit
   })
 
   return useInfiniteQuery(query)

package/src/modules/messages/hooks/use-scroller/index.ts

@@ -0,0 +1,2 @@
+export * from './use-scroller'
+export { default as useScroller } from './use-scroller'

package/src/modules/messages/hooks/use-scroller/use-scroller.tsx

@@ -0,0 +1,50 @@
+import { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react'
+import type { ForwardedRef } from 'react'
+
+const threshold = 50
+
+function useScroller(forwardedRef: ForwardedRef<HTMLDivElement>) {
+  const scrollerRef = useRef<HTMLDivElement>(null)
+  const scrollToButtonRef = useRef<HTMLButtonElement>(null)
+  const [showScrollButton, setShowScrollButton] = useState(false)
+
+  useImperativeHandle(forwardedRef, () => scrollerRef?.current as HTMLDivElement)
+
+  useEffect(() => {
+    const { current: scroller } = scrollerRef
+
+    if (!scroller) return
+
+    const handleShowBtn = () => {
+      const scrollPosition =
+        Number(scroller.scrollHeight) - Number(scroller.scrollTop) - Number(scroller.clientHeight)
+
+      setShowScrollButton(scrollPosition > threshold)
+    }
+
+    scroller.addEventListener('scroll', handleShowBtn)
+
+    return () => {
+      scroller.removeEventListener('scroll', handleShowBtn)
+    }
+  }, [])
+
+  const scrollToBottom = useCallback(() => {
+    const { current: scroller } = scrollerRef
+    if (!scroller) return
+
+    scroller.scrollTo({
+      top: scroller.scrollHeight,
+      behavior: 'smooth'
+    })
+  }, [])
+
+  return {
+    scrollerRef,
+    scrollToButtonRef,
+    scrollToBottom,
+    showScrollButton
+  }
+}
+
+export default useScroller

package/src/modules/messages/hooks/use-send-text-message/use-send-text-message.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { useMutation } from '@tanstack/react-query'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { UAParser } from 'ua-parser-js'
 import { v4 } from 'uuid'
 
@@ -7,13 +7,28 @@ import { MessagesService } from '@/src/modules/messages'
 import { useGetProfile } from '@/src/modules/profile'
 import { useWidgetLoadingAtom, useWidgetSettingsAtomValue } from '@/src/modules/widget'
 import { MessagesEvents } from '../../events'
+import { useMessagesMaxCount } from '../../store'
+import { setMessagesCache } from '../../utils'
+import { getAllMessagesQuery } from '../use-infinite-get-messages'
 
 function useSendTextMessage() {
   const settings = useWidgetSettingsAtomValue()
   const profileQuery = useGetProfile()
   const [, setWidgetLoading] = useWidgetLoadingAtom()
+  const queryClient = useQueryClient()
+  const limit = useMessagesMaxCount()
 
   const userId = useMemo(() => profileQuery.data?.userId?.toString(), [profileQuery.data?.userId])
+  const profileId = useMemo(() => profileQuery.data?.id?.toString(), [profileQuery.data?.id])
+  const messagesQueryConfig = useMemo(
+    () =>
+      getAllMessagesQuery({
+        conversationId: settings?.conversationId,
+        profileId,
+        limit
+      }),
+    [limit, profileId, settings?.conversationId]
+  )
 
   return useMutation({
     mutationFn(message: string) {
@@ -64,9 +79,23 @@ function useSendTextMessage() {
         }
       })
     },
-    onMutate: () => {
+    onMutate: (variables) => {
+      setMessagesCache({
+        queryKey: messagesQueryConfig.queryKey,
+        queryClient,
+        sending: true,
+        data: {
+          content: {
+            type: 'text/plain',
+            text: variables
+          }
+        }
+      })()
       setWidgetLoading(true)
       MessagesEvents.get('c3po-chat:questionSubmitted')?.dispatch()
+    },
+    onSuccess(data) {
+      setMessagesCache({ queryKey: messagesQueryConfig.queryKey, queryClient, data })()
     }
   })
 }

package/src/modules/messages/hooks/use-subscribe-message-received-event/use-subscribe-message-received-event.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { useCallback, useEffect, useMemo } from 'react'
 import type { InfiniteData } from '@tanstack/react-query'
 import { useQueryClient } from '@tanstack/react-query'
 import { produce } from 'immer'
@@ -7,63 +7,52 @@ import { useUpdateCursor } from '@/src/modules/cursor/hooks'
 import { useGetProfile } from '@/src/modules/profile'
 import { SparkieService } from '@/src/modules/sparkie'
 import { useWidgetLoadingAtom, useWidgetSettingsAtom } from '@/src/modules/widget'
-import { useUnreadMessagesSetAtom } from '../../store'
+import { useMessagesMaxCount, useUnreadMessagesSetAtom } from '../../store'
 import type { FetchMessagesResponse, IMessageWithSenderData } from '../../types'
-import { getMessagesInfiniteQuery } from '../use-infinite-get-messages'
+import { getAllMessagesQuery } from '../use-infinite-get-messages'
 
 const useSubscribeMessageReceivedEvent = () => {
   const [settings] = useWidgetSettingsAtom()
-  const profileQuery = useGetProfile()
-  const queryClient = useQueryClient()
   const [, setWidgetLoading] = useWidgetLoadingAtom()
   const [, addUnreadMessagesToSet] = useUnreadMessagesSetAtom()
+  const profileQuery = useGetProfile()
+  const queryClient = useQueryClient()
   const useUpdateCursorMutation = useUpdateCursor()
-  const idsList = useRef<Set<string>>(new Set())
+  const limit = useMessagesMaxCount()
 
   const conversationId = useMemo(() => String(settings?.conversationId), [settings?.conversationId])
   const profileId = useMemo(() => String(profileQuery?.data?.id), [profileQuery?.data?.id])
-
-  const query = getMessagesInfiniteQuery({
-    conversationId,
-    profileId,
-    enabled: true
-  })
-
-  const execute = useCallback(() => {
-    const messageReceived = (data: IMessageWithSenderData) => {
-      if (idsList.current.has(data.id)) return
-
-      const queryKey = query.queryKey
-
-      if (!queryKey || !queryClient) return
-
-      const previousData = queryClient.getQueryData<InfiniteData<FetchMessagesResponse>>(
-        query.queryKey
+  const messagesQueryConfig = useMemo(
+    () =>
+      getAllMessagesQuery({
+        conversationId,
+        profileId,
+        limit
+      }),
+    [conversationId, limit, profileId]
+  )
+
+  const messageReceived = useCallback(
+    (data: IMessageWithSenderData) => {
+      const queryData = queryClient.getQueryData<InfiniteData<FetchMessagesResponse>>(
+        messagesQueryConfig.queryKey
       )
 
-      if (!previousData) return
-
-      const pages = previousData?.pages
-
-      if (!(Number(pages?.length) > 0)) return
-
-      const currentMsgIds = new Set(pages.flatMap((page) => page.messages.map((msg) => msg.id)))
-
-      if (currentMsgIds.has(data.id)) return
-
-      queryClient.setQueryData<InfiniteData<FetchMessagesResponse>>(queryKey, (prev) => {
-        if (!prev) return prev
-
-        const result = produce(prev, (draft) => {
-          if (!(Number(draft?.pages?.at?.(-1)?.messages?.length) > 0)) return draft
-
-          draft.pages.at(-1)?.messages.push(data)
+      const idsList = new Set(
+        queryData?.pages.flatMap((items) => items.messages.map((msg) => msg.id))
+      )
 
-          return draft
-        })
+      if (idsList.has(data.id)) return
 
-        return result
-      })
+      queryClient.setQueryData<InfiniteData<FetchMessagesResponse>>(
+        messagesQueryConfig.queryKey,
+        (oldData) => {
+          return produce(oldData, (draft) => {
+            draft?.pages.at(-1)?.messages?.push(data)
+            return draft
+          })
+        }
+      )
 
       const isMine = data.contactId === profileId
 
@@ -74,30 +63,24 @@ const useSubscribeMessageReceivedEvent = () => {
         // The cursor should update only with my messages
         useUpdateCursorMutation.mutate(data.conversationId)
       }
-      idsList.current.add(data.id)
-    }
+    },
+    [
+      addUnreadMessagesToSet,
+      messagesQueryConfig.queryKey,
+      profileId,
+      queryClient,
+      setWidgetLoading,
+      useUpdateCursorMutation
+    ]
+  )
 
-    SparkieService.subscribeEvents({
-      messageReceived
-    })
+  useEffect(() => {
+    SparkieService.subscribeEvents({ messageReceived })
 
     return () => {
-      SparkieService.removeEventSubscription({
-        messageReceived
-      })
+      SparkieService.removeEventSubscription({ messageReceived })
     }
-  }, [
-    addUnreadMessagesToSet,
-    profileId,
-    query.queryKey,
-    queryClient,
-    setWidgetLoading,
-    useUpdateCursorMutation
-  ])
-
-  useEffect(() => {
-    execute()
-  }, [execute])
+  }, [messageReceived])
 }
 
 export default useSubscribeMessageReceivedEvent

package/src/modules/messages/store/index.ts

@@ -1 +1,2 @@
+export * from './messages-max-count.atom'
 export * from './unread-messages-set.atom'

package/src/modules/messages/store/messages-max-count.atom.ts

@@ -0,0 +1,13 @@
+import { atom, useAtom, useAtomValue } from 'jotai'
+
+const INITIAL_MAX_COUNT = 2
+
+const messagesMaxCountAtom = atom(INITIAL_MAX_COUNT)
+
+const setMessagesMaxCountAtom = atom(
+  (get) => get(messagesMaxCountAtom),
+  (_, set, count: number) => set(messagesMaxCountAtom, count)
+)
+
+export const useSetMessagesMaxCountAtom = () => useAtom(setMessagesMaxCountAtom)
+export const useMessagesMaxCount = () => useAtomValue(setMessagesMaxCountAtom)

package/src/modules/messages/utils/index.ts

@@ -1 +1,3 @@
+export * from './has-to-update-cursor'
 export * from './messages-parser'
+export * from './set-messages-cache'

package/src/modules/messages/utils/set-messages-cache/index.ts

@@ -0,0 +1 @@
+export * from './utils'