app-tutor-ai-consumer 1.18.2 → 1.20.0

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

@@ -0,0 +1,91 @@
+import { forwardRef, useEffect } from 'react'
+import clsx from 'clsx'
+import type { MouseEventHandler, PropsWithChildren } from 'react'
+import { createPortal } from 'react-dom'
+import { useTranslation } from 'react-i18next'
+
+import { Button, Icon } from '@/src/lib/components'
+import { MessageSkeleton } from '@/src/modules/messages/components'
+import { useSkeletonRef } from '@/src/modules/messages/hooks/use-skeleton-ref'
+import {
+  ScrollToBottomButton,
+  usePageLayoutMainRefContext,
+  useWidgetLoadingAtom
+} from '@/src/modules/widget'
+import { useScroller } from '../../hooks'
+
+const MessagesContainer = forwardRef<
+  HTMLDivElement,
+  PropsWithChildren<{
+    showButton?: boolean
+    loading?: boolean
+    handleShowMore?: () => Promise<void>
+  }>
+>(({ children, handleShowMore, showButton = false, loading = false }, forwardedRef) => {
+  const { t } = useTranslation()
+  const skeletonRef = useSkeletonRef()
+  const [isLoadingNewMsg] = useWidgetLoadingAtom()
+  const mainLayoutRef = usePageLayoutMainRefContext()
+  const { scrollerRef, scrollToButtonRef, scrollToBottom, showScrollButton } =
+    useScroller(forwardedRef)
+
+  useEffect(() => {
+    scrollToBottom()
+  }, [scrollToBottom])
+
+  const handleClickShowMore: MouseEventHandler<HTMLButtonElement> = (e) => {
+    const scroller = scrollerRef?.current
+    const heightBeforeRender = Number(e?.currentTarget?.scrollHeight)
+
+    void handleShowMore?.().then(() => {
+      if (scroller && !isNaN(heightBeforeRender)) {
+        setTimeout(
+          () =>
+            scroller.scrollTo({
+              top: heightBeforeRender + 10,
+              behavior: 'smooth'
+            }),
+          180
+        )
+      }
+    })
+  }
+
+  return (
+    <div ref={scrollerRef} className='mx-2 my-4 flex h-full flex-col gap-2 overflow-auto px-4'>
+      <div className='mb-auto flex-1 self-center'>
+        <Button
+          className='max-w-max rounded-full border border-neutral-300 bg-neutral-200 px-2 py-1 text-xs/normal tracking-wide text-neutral-900'
+          onClick={handleClickShowMore}
+          loading={loading}
+          show={showButton}>
+          <Icon name='arrow-up' className='h-4 w-3' aria-hidden />
+          <span className='text-nowrap'>{t('general.buttons.show_more')}</span>
+        </Button>
+      </div>
+      {children}
+
+      {mainLayoutRef.current &&
+        createPortal(
+          <ScrollToBottomButton
+            ref={scrollToButtonRef}
+            show={showScrollButton}
+            onClick={scrollToBottom}
+          />,
+          mainLayoutRef.current
+        )}
+      <div
+        className={clsx({
+          'pointer-events-none h-0 overflow-hidden opacity-0': !isLoadingNewMsg,
+          'mt-2 pb-4': isLoadingNewMsg
+        })}
+        ref={skeletonRef}>
+        <MessageSkeleton />
+      </div>
+    </div>
+  )
+})
+
+MessagesContainer.displayName = 'MessagesContainer'
+
+export default MessagesContainer

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 })()
     }
   })
 }