app-tutor-ai-consumer 1.4.0 → 1.6.0

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

@@ -1,51 +1,94 @@
-import { useRef } from 'react'
+import { lazy, useCallback, useRef } from 'react'
 import clsx from 'clsx'
 
-import { useGetProfile } from '@/src/modules/profile'
-import { useWidgetSettingsAtomValue } from '@/src/modules/widget'
-import { useFetchMessages } from '../../hooks'
+import { useRefClientHeight } from '@/src/lib/hooks'
+import { 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'
+
+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 loadFirstPage = useRef(true)
-  const currentMessages = useRef([])
-  const settings = useWidgetSettingsAtomValue()
-  const profileQuery = useGetProfile()
+  const scrollerRef = useRef<HTMLDivElement>(null)
+  const scrollerClientHeight = useRefClientHeight(scrollerRef)
+  const scrollToButtonRef = useRef<HTMLButtonElement>(null)
+  const { allMessages, messagesQuery } = useAllMessages()
+  const widgetIsLoading = useWidgetLoadingAtomValue()
+  const skeletonRef = useSkeletonRef()
+  const { showScrollButton } = useManageScroll(scrollerRef)
+
+  const scrollToBottom = useCallback(() => {
+    const { current: scroller } = scrollerRef
 
-  const messagesQuery = useFetchMessages({
-    conversationId: settings?.conversationId ?? '',
-    currentMessages: currentMessages.current,
-    loadFirstPage: loadFirstPage?.current ?? true,
-    profileId: profileQuery.data?.id ?? '',
-    enabled: Boolean(settings?.conversationId && profileQuery.data?.id)
-  })
+    if (!scroller) return
 
-  if (messagesQuery.isLoading) return <h3>Loading...</h3>
+    scroller.scrollTo({
+      top: scroller.scrollHeight,
+      behavior: 'smooth'
+    })
+  }, [])
 
   return (
-    <div className='flex flex-1 flex-col justify-center gap-6'>
-      {messagesQuery.data?.messages &&
-        Array.from(messagesQuery.data.messages).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-700 bg-neutral-800 px-4 py-2 text-xs capitalize text-neutral-50'>
-              {publishingDate}
-            </span>
-            {messages.map((msg, k) => (
-              <div
-                key={`${msg.id}-${k}`}
-                className={clsx(
-                  'max-w-[min(80%,52rem)] rounded-lg p-3 text-sm/normal text-neutral-0',
-                  {
-                    'self-end bg-neutral-800': msg.from === 'me' || msg.metadata.author === 'user',
-                    'bg-ai-chat-response':
-                      msg.from !== profileQuery?.data?.id || msg.metadata.author === 'ai'
-                  }
-                )}>
-                <MessageItem message={msg} />
-              </div>
-            ))}
-          </div>
-        ))}
+    <div
+      ref={scrollerRef}
+      className={clsx(
+        'relative mx-2 flex flex-col gap-2 overflow-auto p-4',
+        `h-[${scrollerClientHeight}]`
+      )}>
+      <MessageItemLoading show={messagesQuery.isFetching} />
+
+      <MessageItemEndOfScroll
+        show={!messagesQuery.isFetching && !messagesQuery.hasNextPage && allMessages.length > 0}
+      />
+
+      <ScrollToBottomButton
+        ref={scrollToButtonRef}
+        top={Math.abs(
+          Number(scrollerRef.current?.clientHeight) -
+            Number(scrollToButtonRef.current?.clientHeight) -
+            24
+        )}
+        show={showScrollButton}
+        onClick={scrollToBottom}
+      />
+
+      {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-700 bg-neutral-800 px-4 py-2 text-xs capitalize text-neutral-50'>
+            {publishingDate}
+          </span>
+          {messages.map((msg, k) => (
+            <MessageItem key={`${msg.id}-${k}`} message={msg} />
+          ))}
+        </div>
+      ))}
+
+      <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>
   )
 }

package/src/modules/messages/constants.ts

@@ -1 +1,2 @@
 export const MSG_MAX_COUNT = 20
+export const MSG_MAX_PAGES = 20

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

@@ -1 +1,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-send-text-message'
+export * from './use-subscribe-message-received-event'

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

@@ -0,0 +1,2 @@
+export * from './use-all-messages'
+export { default as useAllMessages } from './use-all-messages'

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

@@ -0,0 +1,30 @@
+import { useMemo } from 'react'
+
+import { useGetProfile } from '@/src/modules/profile'
+import { useWidgetSettingsAtomValue } from '@/src/modules/widget'
+import { useInfiniteGetMessages } from '../use-infinite-get-messages'
+
+function useAllMessages() {
+  const settings = useWidgetSettingsAtomValue()
+  const profileQuery = useGetProfile()
+
+  const messagesQuery = useInfiniteGetMessages({
+    conversationId: settings?.conversationId ?? '',
+    profileId: profileQuery.data?.id ?? '',
+    enabled: Boolean(settings?.conversationId && profileQuery.data?.id)
+  })
+
+  const allMessages = useMemo(
+    () =>
+      messagesQuery.data && Number(messagesQuery.data?.size) > 0
+        ? Array.from(messagesQuery.data)
+        : [],
+    [messagesQuery.data]
+  )
+
+  const hasMessages = useMemo(() => Number(allMessages.length) > 0, [allMessages.length])
+
+  return { messagesQuery, allMessages, hasMessages }
+}
+
+export default useAllMessages

package/src/modules/messages/hooks/use-infinite-get-messages/index.ts

@@ -0,0 +1,2 @@
+export * from './use-infinite-get-messages'
+export { default as useInfiniteGetMessages } from './use-infinite-get-messages'

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

@@ -0,0 +1,65 @@
+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 IMessageWithSenderDataMock from '../../__tests__/imessage-with-sender-data.mock'
+import type { IMessageWithSenderData } from '../../types'
+
+import useInfiniteGetMessages from './use-infinite-get-messages'
+
+describe('useInfiniteGetMessages', () => {
+  const mockConversationId = 'conversation-123'
+  const mockProfileId = 'profile-456'
+  const mockEnabled = true
+
+  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
+    }
+  ) => renderHook(() => useInfiniteGetMessages(props))
+
+  it('should return a map with the right size when fetch messages request is successful', async () => {
+    const { result } = createHook()
+
+    await waitFor(() => expect(result.current.data).toBeDefined())
+
+    expect(result.current.data?.size).toBe(10)
+  })
+
+  it('should be able to fetch next pages', async () => {
+    SparkieMessageServiceMock.getAll.mockRestore()
+    SparkieMessageServiceMock.getAll.mockReturnValueOnce(
+      new IMessageWithSenderDataMock().getMany(2) as IMessageWithSenderData[]
+    )
+
+    const { result } = createHook()
+
+    await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true)
+    })
+
+    expect(result.current.data?.size).toBe(10)
+
+    act(() => {
+      void result.current.fetchNextPage()
+    })
+
+    await waitFor(() => {
+      expect(result.current.fetchStatus).toBe('idle')
+    })
+
+    expect(result.current.data?.size).toBe(2)
+    expect(result.current.hasNextPage).toBe(false)
+  })
+})

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

@@ -0,0 +1,81 @@
+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 { messagesParser } from '../../utils'
+import type { UseFetchMessagesProps } from '../use-fetch-messages'
+
+export type UseGetMessagesQueryProps = {
+  conversationId: string
+  profileId: string
+  enabled?: boolean
+}
+
+export const getMessagesInfiniteQuery = ({
+  conversationId,
+  profileId,
+  enabled
+}: UseGetMessagesQueryProps) =>
+  ({
+    queryKey: ['sparkie:messageService:getAll', conversationId, profileId],
+    queryFn: async ({ pageParam }: { pageParam?: number }) => {
+      const messages = await MessagesService.getMessages({ conversationId, before: pageParam })
+
+      return {
+        messages,
+        hasMore: messages.length === MSG_MAX_COUNT
+      } as FetchMessagesResponse
+    },
+    initialPageParam: undefined,
+    getNextPageParam: (lastPage: FetchMessagesResponse) => {
+      if (!lastPage.hasMore) return undefined
+
+      const minSentAt = Math.min(...lastPage.messages.map((msg) => msg.sentAt))
+
+      return minSentAt
+    },
+    enabled,
+    select(data) {
+      const messages = data.pages?.flatMap((page) => page.messages) ?? []
+      return messagesParser({ messages, profileId }).reduce((messagesMap, currentMessage) => {
+        const timestamp = formatTime(currentMessage.timestamp, true)
+
+        if (!messagesMap.has(timestamp)) {
+          messagesMap.set(timestamp, [currentMessage])
+          return messagesMap
+        }
+
+        const existingTimestampValues = Array.from(messagesMap.get(timestamp) ?? [])
+
+        messagesMap.set(
+          timestamp,
+          [...existingTimestampValues, currentMessage].sort((a, b) => a.timestamp - b.timestamp)
+        )
+
+        return messagesMap
+      }, new Map<string, ParsedMessage[]>())
+    }
+  }) as UndefinedInitialDataInfiniteOptions<
+    FetchMessagesResponse,
+    Error,
+    Map<string, ParsedMessage[]>
+  >
+
+function useInfiniteGetMessages({
+  conversationId,
+  profileId,
+  enabled = false
+}: Omit<UseFetchMessagesProps, 'currentMessages' | 'loadFirstPage'>) {
+  const query = getMessagesInfiniteQuery({
+    conversationId,
+    profileId,
+    enabled
+  })
+
+  return useInfiniteQuery(query)
+}
+
+export default useInfiniteGetMessages

package/src/modules/messages/hooks/use-manage-scroll/index.ts

@@ -0,0 +1,2 @@
+export * from './use-manage-scroll'
+export { default as useManageScroll } from './use-manage-scroll'

package/src/modules/messages/hooks/use-manage-scroll/use-manage-scroll.tsx

@@ -0,0 +1,70 @@
+import { useCallback, useEffect, useState } from 'react'
+import type { RefObject } from 'react'
+
+import { useWidgetScrollingAtom } from '@/src/modules/widget'
+import { useAllMessages } from '../use-all-messages'
+
+const threshold = 250 // min scroll pos to show scroller button
+
+function useManageScroll<T extends HTMLElement>(scrollerRef: RefObject<T | null>) {
+  const { messagesQuery, hasMessages } = useAllMessages()
+  const [heightBeforeRender, setHeightBeforeRender] = useState(0)
+  const [showScrollButton, setShowScrollButton] = useState(false)
+  const [, setWidgetScrolling] = useWidgetScrollingAtom()
+
+  const handleScroll = useCallback(() => {
+    const scroller = scrollerRef.current
+
+    if (!scroller) return
+
+    if (messagesQuery.hasNextPage && scroller && scroller.scrollTop < 50) {
+      setHeightBeforeRender(scroller.scrollHeight)
+      void messagesQuery.fetchNextPage()
+    }
+  }, [messagesQuery, scrollerRef])
+
+  useEffect(() => {
+    const scroller = scrollerRef.current
+
+    if (!scroller || !hasMessages || !messagesQuery.isSuccess) return
+
+    scroller.addEventListener('scrollend', handleScroll)
+
+    return () => {
+      scroller.removeEventListener('scrollend', handleScroll)
+    }
+  }, [handleScroll, hasMessages, messagesQuery.isSuccess, scrollerRef])
+
+  useEffect(() => {
+    const scroller = scrollerRef.current
+
+    if (!scroller || !hasMessages || !messagesQuery.isSuccess) return
+
+    const handleShowBtn = () => {
+      setWidgetScrolling(true)
+      const scrollPosition =
+        Number(scroller.scrollHeight) - Number(scroller.scrollTop) - Number(scroller.clientHeight)
+
+      setShowScrollButton(scrollPosition > threshold)
+    }
+
+    scroller.addEventListener('scroll', handleShowBtn)
+
+    return () => {
+      scroller.removeEventListener('scroll', handleShowBtn)
+      setWidgetScrolling(false)
+    }
+  }, [hasMessages, messagesQuery.isSuccess, scrollerRef, setWidgetScrolling])
+
+  useEffect(() => {
+    const scroller = scrollerRef.current
+
+    if (scroller && !messagesQuery.isFetching) {
+      scroller.scrollTop = scroller.scrollHeight - heightBeforeRender
+    }
+  }, [heightBeforeRender, messagesQuery.isFetching, scrollerRef])
+
+  return { showScrollButton }
+}
+
+export default useManageScroll

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

@@ -0,0 +1,2 @@
+export * from './use-send-text-message'
+export { default as useSendTextMessage } from './use-send-text-message'

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

@@ -0,0 +1,86 @@
+import { act, chance, renderHook, waitFor } from '@/src/config/tests'
+import { MessagesService } from '@/src/modules/messages'
+import { useGetProfile } from '@/src/modules/profile'
+import * as Store from '@/src/modules/widget'
+import WidgetSettingPropsBuilder from '@/src/modules/widget/__tests__/widget-settings-props.builder'
+
+import useSendTextMessage from './use-send-text-message'
+
+vi.mock('@/src/modules/profile', () => ({
+  useGetProfile: vi.fn()
+}))
+
+describe('useSendTextMessage', () => {
+  const message = chance.animal()
+  const getProfileMock = { data: { userId: chance.integer() } }
+  const defaultSettings = new WidgetSettingPropsBuilder()
+    .withClassHashId(chance.guid())
+    .withOwner_id(chance.guid())
+    .withCurrent_media_codes(chance.profession())
+
+  const render = () => renderHook(useSendTextMessage)
+
+  beforeEach(() => {
+    vi.mocked(useGetProfile).mockReturnValue(getProfileMock as never)
+    vi.spyOn(Store, 'useWidgetSettingsAtomValue').mockReturnValue(defaultSettings)
+  })
+
+  it('should throw when conversationId is not defined', async () => {
+    vi.spyOn(Store, 'useWidgetSettingsAtomValue').mockReturnValueOnce({} as never)
+
+    const { result } = render()
+
+    await act(() =>
+      expect(result.current.mutateAsync(message)).rejects.toEqual(
+        new Error('Conversation Id must be defined')
+      )
+    )
+  })
+
+  it('should successfully send a text message', async () => {
+    const { result } = render()
+
+    await waitFor(() => result.current.mutateAsync(message))
+
+    expect(result.current.isSuccess).toBeTruthy()
+  })
+
+  it('should be properly able to handle question::<text> messages', async () => {
+    const txt = 'question::summary'
+    const text = txt.replace('question::', '')
+
+    vi.spyOn(MessagesService, 'sendTextMessage')
+
+    const { result } = render()
+
+    await waitFor(() => result.current.mutateAsync(txt))
+
+    expect(MessagesService.sendTextMessage).toHaveBeenCalledTimes(1)
+    expect(MessagesService.sendTextMessage).toHaveBeenNthCalledWith(1, {
+      content: {
+        type: 'text/plain',
+        text
+      },
+      conversationId: defaultSettings.conversationId,
+      metadata: {
+        author: 'user',
+        contactId: defaultSettings.contactId,
+        context: {
+          language: defaultSettings.locale,
+          clubName: defaultSettings.clubName,
+          productName: defaultSettings.productName,
+          productId: defaultSettings.productId,
+          classHashId: defaultSettings.classHashId,
+          owner_id: defaultSettings.owner_id,
+          current_media_codes: defaultSettings.current_media_codes,
+          question: text,
+          router: text
+        },
+        externalId: expect.any(String),
+        namespace: defaultSettings.namespace,
+        sessionId: defaultSettings.sessionId,
+        userId: String(getProfileMock.data.userId)
+      }
+    })
+  })
+})

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

@@ -0,0 +1,60 @@
+import { useMutation } from '@tanstack/react-query'
+import { v4 } from 'uuid'
+
+import { MessagesService } from '@/src/modules/messages'
+import { useGetProfile } from '@/src/modules/profile'
+import { useWidgetLoadingAtom, useWidgetSettingsAtomValue } from '@/src/modules/widget'
+
+function useSendTextMessage() {
+  const settings = useWidgetSettingsAtomValue()
+  const profileQuery = useGetProfile()
+  const [, setWidgetLoading] = useWidgetLoadingAtom()
+
+  return useMutation({
+    mutationFn(message: string) {
+      let processedMessage = message
+
+      if (!settings?.conversationId) throw new Error('Conversation Id must be defined')
+
+      const questionRegex = /^question::\s*/i
+      let questionParam: string | undefined
+
+      if (questionRegex.test(message)) {
+        processedMessage = message.replace(questionRegex, '').trim()
+        questionParam = processedMessage
+      }
+
+      return MessagesService.sendTextMessage({
+        content: {
+          type: 'text/plain',
+          text: processedMessage
+        },
+        conversationId: settings?.conversationId,
+        metadata: {
+          author: 'user',
+          contactId: settings.contactId,
+          context: {
+            language: settings.locale,
+            clubName: settings.clubName,
+            productName: settings.productName,
+            productId: settings.productId,
+            classHashId: settings.classHashId,
+            owner_id: settings?.owner_id,
+            current_media_codes: settings?.current_media_codes,
+            question: questionParam,
+            router: questionParam ? 'summary' : undefined
+          },
+          externalId: v4(),
+          namespace: settings.namespace,
+          sessionId: settings.sessionId,
+          userId: profileQuery.data?.userId?.toString()
+        }
+      })
+    },
+    onMutate: () => {
+      setWidgetLoading(true)
+    }
+  })
+}
+
+export default useSendTextMessage

package/src/modules/messages/hooks/use-skeleton-ref/index.ts

@@ -0,0 +1,2 @@
+export * from './use-skeleton-ref'
+export { default as useSkeletonRef } from './use-skeleton-ref'

package/src/modules/messages/hooks/use-skeleton-ref/use-skeleton-ref.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useRef } from 'react'
+
+import { useWidgetLoadingAtomValue } from '@/src/modules/widget'
+
+export function useSkeletonRef() {
+  const skeletonRef = useRef<HTMLDivElement>(null)
+  const isLoading = useWidgetLoadingAtomValue()
+
+  useEffect(() => {
+    const skeleton = skeletonRef.current
+
+    if (!skeleton) return
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!isLoading || !entry || entry.isIntersecting) return
+
+        entry.target.scrollIntoView({ behavior: 'smooth', block: 'end' })
+      },
+      { threshold: 1 }
+    )
+
+    const timeout = setTimeout(() => observer.observe(skeleton), 50)
+
+    return () => {
+      clearTimeout(timeout)
+      observer.disconnect()
+    }
+  }, [isLoading])
+
+  return skeletonRef
+}
+
+export default useSkeletonRef

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

@@ -0,0 +1,2 @@
+export * from './use-subscribe-message-received-event'
+export { default as useSubscribeMessageReceivedEvent } from './use-subscribe-message-received-event'