app-tutor-ai-consumer 1.18.2 → 1.20.0

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'

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

@@ -0,0 +1,53 @@
+import type { Message } from '@hotmart/sparkie/dist/MessageService'
+import type { InfiniteData, QueryClient } from '@tanstack/react-query'
+import { produce } from 'immer'
+
+import type { FetchMessagesResponse, IMessageWithSenderData } from '../../types'
+
+const placeholderID = 'remove::placeholder::id'
+
+export type SetMessageCacheParams = {
+  queryKey: readonly unknown[]
+  queryClient: QueryClient
+  data: Partial<Message>
+  sending?: boolean
+}
+
+export const setMessagesCache =
+  ({ queryClient, queryKey, data, sending }: SetMessageCacheParams) =>
+  () => {
+    queryClient.setQueryData<InfiniteData<FetchMessagesResponse>>(queryKey, (oldData) => {
+      return produce(oldData, (draft) => {
+        const lastPageMessages = draft?.pages?.at(-1)?.messages
+        const lastMessage = lastPageMessages?.at?.(-1)
+
+        const placeholderMsgIndex = Number(
+          lastPageMessages?.findIndex((msg) => msg.id === placeholderID)
+        )
+
+        const msgIndex = Number(
+          !isNaN(placeholderMsgIndex) && placeholderMsgIndex !== -1
+            ? placeholderMsgIndex
+            : lastPageMessages?.length
+        )
+
+        if (isNaN(msgIndex)) return draft
+
+        const newMessage = {
+          ...lastMessage,
+          sentAt: Date.now(),
+          updatedAt: Date.now(),
+          metadata: {
+            ...lastMessage?.metadata,
+            author: 'user'
+          },
+          ...data,
+          ...(sending ? { id: placeholderID } : {})
+        } as IMessageWithSenderData
+
+        lastPageMessages?.splice(msgIndex, 1, newMessage)
+
+        return draft
+      })
+    })
+  }

package/src/modules/widget/components/chat-page/chat-page.spec.tsx

@@ -1,27 +1,43 @@
-import { render, screen, waitFor } from '@/src/config/tests'
-import type { IMessageWithSenderData } from '@/src/modules/messages'
-import IMessageWithSenderDataMock from '@/src/modules/messages/__tests__/imessage-with-sender-data.mock'
+import { createRef } from 'react'
+
+import { chance, render, screen, waitFor } from '@/src/config/tests'
+import { useScroller } from '@/src/modules/messages/hooks/use-scroller'
+import { useGetProfile } from '@/src/modules/profile'
 import WidgetSettingPropsBuilder from '../../__tests__/widget-settings-props.builder'
 import * as Store from '../../store'
 
 import ChatPage from './chat-page'
 
+vi.mock('@/src/modules/profile', () => ({ useGetProfile: vi.fn() }))
+
+vi.mock('@/src/modules/messages/hooks/use-scroller', () => ({
+  useScroller: vi.fn()
+}))
+
 describe('ChatPage', () => {
   const defaultSettings = new WidgetSettingPropsBuilder()
-  const getMessagesMock = new IMessageWithSenderDataMock().getMany(10) as IMessageWithSenderData[]
+  const scrollerRef = createRef<HTMLDivElement>()
+  const scrollToButtonRef = createRef<HTMLButtonElement>()
+
+  const useScrollerMock = {
+    scrollerRef,
+    scrollToButtonRef,
+    scrollToBottom: vi.fn(),
+    showScrollButton: false
+  }
 
   const renderComponent = () => render(<ChatPage />)
 
   beforeEach(() => {
     vi.spyOn(Store, 'useWidgetSettingsAtomValue').mockReturnValue(defaultSettings)
+    vi.mocked(useGetProfile).mockReturnValue({ data: { id: chance.guid() } } as never)
+    vi.mocked(useScroller).mockReturnValue(useScrollerMock)
   })
 
   it('should render each fetched message item from API', async () => {
     renderComponent()
 
-    await waitFor(() =>
-      expect(screen.getAllByTestId('messages-item')).toHaveLength(getMessagesMock.length)
-    )
+    await waitFor(() => expect(screen.getAllByTestId('messages-item')).toHaveLength(2))
 
     expect(screen.getByPlaceholderText(/send_message.field.placeholder/)).toBeInTheDocument()
   })

package/src/modules/widget/components/chat-page/chat-page.tsx

@@ -1,24 +1,55 @@
-import { useRef } from 'react'
+import { lazy, useEffect, useMemo, useRef } from 'react'
+import { useInfiniteQuery } from '@tanstack/react-query'
 
 import { isTextEmpty } from '@/src/lib/utils/is-text-empty'
 import { ChatInput, MessagesList, useChatInputValueAtom } from '@/src/modules/messages/components'
-import { useAllMessages, useSendTextMessage } from '@/src/modules/messages/hooks'
+import { MessagesContainer } from '@/src/modules/messages/components/messages-container'
+import { getAllMessagesQuery, useSendTextMessage } from '@/src/modules/messages/hooks'
+import { useMessagesMaxCount } from '@/src/modules/messages/store'
+import { useGetProfile } from '@/src/modules/profile'
 import {
-  useWidgetLoadingAtomValue,
+  useWidgetLoadingAtom,
   useWidgetSettingsAtomValue,
   useWidgetTabsValueAtom
 } from '../../store'
 import { WidgetHeader } from '../header'
 import { PageLayout } from '../page-layout'
 
+const MessageItemError = lazy(
+  () => import('@/src/modules/messages/components/message-item-error/message-item-error')
+)
+
+const MessageItemEndOfScroll = lazy(
+  () =>
+    import(
+      '@/src/modules/messages/components/message-item-end-of-scroll/message-item-end-of-scroll'
+    )
+)
+
 function ChatPage() {
-  const widgetTabs = useWidgetTabsValueAtom()
   const chatInputRef = useRef<HTMLTextAreaElement>(null)
+  const scrollerRef = useRef<HTMLDivElement>(null)
+  const settings = useWidgetSettingsAtomValue()
+  const profileQuery = useGetProfile()
+  const widgetTabs = useWidgetTabsValueAtom()
   const sendTextMessageMutation = useSendTextMessage()
-  const { messagesQuery } = useAllMessages()
-  const widgetLoading = useWidgetLoadingAtomValue()
+  const limit = useMessagesMaxCount()
   const [value, setValue] = useChatInputValueAtom()
-  const settings = useWidgetSettingsAtomValue()
+  const [, setWidgetLoading] = useWidgetLoadingAtom()
+
+  const conversationId = useMemo(() => settings?.conversationId, [settings?.conversationId])
+  const profileId = useMemo(() => profileQuery.data?.id, [profileQuery.data?.id])
+  const messagesQueryConfig = useMemo(
+    () =>
+      getAllMessagesQuery({
+        conversationId,
+        profileId,
+        limit
+      }),
+    [conversationId, limit, profileId]
+  )
+
+  const messagesQuery = useInfiniteQuery(messagesQueryConfig)
 
   const handleSendMessage = () => {
     const text = chatInputRef.current?.value ?? ''
@@ -33,6 +64,12 @@ function ChatPage() {
     })
   }
 
+  useEffect(() => {
+    if (messagesQuery.isError) {
+      setWidgetLoading(false)
+    }
+  }, [messagesQuery.isError, setWidgetLoading])
+
   return (
     <PageLayout
       asideChild={
@@ -40,18 +77,37 @@ function ChatPage() {
           name='new-chat-msg-input'
           ref={chatInputRef}
           onSend={widgetTabs.currentTab === 'chat' ? handleSendMessage : undefined}
-          loading={widgetLoading || sendTextMessageMutation.isPending}
+          loading={sendTextMessageMutation.isPending}
           inputDisabled={messagesQuery?.isLoading}
           buttonDisabled={messagesQuery?.isLoading || !value.trim()}
         />
       }>
-      <>
-        <div className='mt-4 px-6 py-4'>
-          <WidgetHeader enabledButtons={['info', 'close']} tutorName={settings?.tutorName} />
-        </div>
-        <MessagesList />
-      </>
+      <div className='mt-4 px-6 py-4'>
+        <WidgetHeader enabledButtons={['info', 'close']} tutorName={settings?.tutorName} />
+      </div>
+      <MessagesContainer
+        ref={scrollerRef}
+        handleShowMore={async () => {
+          await messagesQuery.fetchNextPage()
+        }}
+        showButton={messagesQuery.hasNextPage}
+        loading={messagesQuery.isFetchingNextPage}>
+        <MessageItemEndOfScroll
+          show={
+            !messagesQuery.isFetching &&
+            !messagesQuery.hasNextPage &&
+            Number(messagesQuery.data?.size) > 0
+          }
+        />
+        {messagesQuery.data && <MessagesList messagesMap={messagesQuery.data} />}
+        <MessageItemError
+          show={messagesQuery.isError}
+          message={`❌ Error loading messages: ${messagesQuery.error?.message ?? ''}`}
+          retry={() => void messagesQuery.refetch()}
+        />
+      </MessagesContainer>
     </PageLayout>
   )
 }
+
 export default ChatPage

package/src/modules/widget/components/greetings-card/greetings-card.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 
 export type GreetingsCardProps = {
   tutorName: string
-  author: string
+  author?: string
   isDarkTheme?: boolean
 }
 

package/src/modules/widget/components/header/header.tsx

@@ -1,3 +1,5 @@
+import { useTranslation } from 'react-i18next'
+
 import { Button, Icon } from '@/src/lib/components'
 import { TutorWidgetEvents } from '../../events'
 import { useWidgetTabsAtom } from '../../store'
@@ -35,7 +37,9 @@ function WidgetHeader({
   showContentWithoutMeta,
   showContent = true
 }: WidgetHeaderProps) {
+  const { t } = useTranslation()
   const [, setTab] = useWidgetTabsAtom()
+  const name = tutorName ?? t('general.name')
 
   const handleClickArchive = () => {
     setTab('chat')
@@ -48,10 +52,8 @@ function WidgetHeader({
   return (
     <div className='grid-areas-[a_b] mt-0.5 grid grid-cols-[1fr_auto] items-center text-neutral-1000'>
       <div className='grid-area-[a]'>
-        {showContent && !showContentWithoutMeta && <WidgetHeaderContent tutorName={tutorName} />}
-        {showContentWithoutMeta && !showContent && (
-          <WidgetHeaderContentWithoutMeta name={tutorName} />
-        )}
+        {showContent && !showContentWithoutMeta && <WidgetHeaderContent tutorName={name} />}
+        {showContentWithoutMeta && !showContent && <WidgetHeaderContentWithoutMeta name={name} />}
       </div>
       <div className='shrink-0'>
         <div className='grid-area-[b] ml-auto flex max-w-max gap-3 text-neutral-700'>

package/src/modules/widget/components/starter-page/starter-page.spec.tsx

@@ -3,7 +3,10 @@ import { useSendTextMessage } from '@/src/modules/messages/hooks'
 
 import WidgetStarterPage from './starter-page'
 
-vi.mock('@/src/modules/messages/hooks', () => ({ useSendTextMessage: vi.fn() }))
+vi.mock('@/src/modules/messages/hooks', () => ({
+  getAllMessagesQuery: vi.fn(() => ({ pages: [], queryKey: ['any'] })),
+  useSendTextMessage: vi.fn()
+}))
 
 describe('WidgetStarterPage', () => {
   const useSendTextMessageMock = { mutate: vi.fn() }

package/src/modules/widget/components/starter-page/starter-page.tsx

@@ -1,4 +1,5 @@
-import { useRef } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
+import { useQueryClient } from '@tanstack/react-query'
 import clsx from 'clsx'
 import type { MouseEventHandler } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -6,7 +7,9 @@ import { useTranslation } from 'react-i18next'
 import { Button } from '@/src/lib/components'
 import { useRefEventListener } from '@/src/lib/hooks'
 import { ChatInput, useChatInputValueAtom } from '@/src/modules/messages/components'
-import { useSendTextMessage } from '@/src/modules/messages/hooks'
+import { getAllMessagesQuery, useSendTextMessage } from '@/src/modules/messages/hooks'
+import { useMessagesMaxCount } from '@/src/modules/messages/store'
+import { useGetProfile } from '@/src/modules/profile'
 import { useWidgetSettingsAtom, useWidgetTabsAtom } from '../../store'
 import { GreetingsCard } from '../greetings-card'
 import { WidgetHeader } from '../header'
@@ -21,6 +24,10 @@ function WidgetStarterPage() {
   const [chatInputValue, setChatInputValue] = useChatInputValueAtom()
   const [, setWidgetTabs] = useWidgetTabsAtom()
   const sendTextMessageMutation = useSendTextMessage()
+  const profileQuery = useGetProfile()
+  const limit = useMessagesMaxCount()
+  const queryClient = useQueryClient()
+  const name = settings?.tutorName ?? t('general.name')
 
   useRefEventListener<HTMLTextAreaElement>({
     config: {
@@ -53,6 +60,24 @@ function WidgetStarterPage() {
     sendText(chatInputRef.current?.value)
   }
 
+  const conversationId = useMemo(() => settings?.conversationId, [settings?.conversationId])
+
+  const profileId = useMemo(() => profileQuery.data?.id, [profileQuery.data?.id])
+
+  const messagesQueryConfig = useMemo(
+    () =>
+      getAllMessagesQuery({
+        conversationId,
+        profileId,
+        limit
+      }),
+    [conversationId, limit, profileId]
+  )
+
+  useEffect(() => {
+    void queryClient.prefetchInfiniteQuery(messagesQueryConfig)
+  }, [messagesQueryConfig, queryClient])
+
   return (
     <PageLayout
       asideChild={
@@ -70,13 +95,14 @@ function WidgetStarterPage() {
           })}>
           <WidgetHeader
             enabledButtons={['archive', 'info', 'close']}
-            tutorName={settings?.tutorName}
+            tutorName={name}
+            showContent={false}
           />
 
           <div className='my-auto'>
             <GreetingsCard
-              author={settings?.author ?? ''}
-              tutorName={settings?.tutorName ?? ''}
+              author={settings?.user?.name}
+              tutorName={name}
               isDarkTheme={settings?.config?.theme === 'dark'}
             />
           </div>