app-tutor-ai-consumer 1.4.0 → 1.5.0

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

@@ -0,0 +1,97 @@
+import { useCallback, useEffect } from 'react'
+import type { UndefinedInitialDataInfiniteOptions } from '@tanstack/react-query'
+import { useInfiniteQuery, useQueryClient } from '@tanstack/react-query'
+
+import { formatTime } from '@/src/config/dayjs'
+import { SparkieService } from '@/src/modules/sparkie'
+import { MessagesService } from '../..'
+import { MSG_MAX_COUNT } from '../../constants'
+import type { FetchMessagesResponse, IMessage, 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 queryClient = useQueryClient()
+  const query = getMessagesInfiniteQuery({ conversationId, profileId, enabled })
+
+  const messageReceived = useCallback(
+    (data: IMessage) => {
+      if (data.conversationId !== conversationId) return
+
+      void queryClient.invalidateQueries({ queryKey: query.queryKey })
+    },
+    [conversationId, queryClient, query.queryKey]
+  )
+
+  useEffect(() => {
+    SparkieService.subscribeEvents({ messageReceived })
+
+    return () => {
+      SparkieService.removeEventSubscription({ messageReceived })
+    }
+  }, [messageReceived])
+
+  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,66 @@
+import { useCallback, useEffect, useState } from 'react'
+import type { RefObject } from 'react'
+
+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 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 = () => {
+      const scrollPosition =
+        Number(scroller.scrollHeight) - Number(scroller.scrollTop) - Number(scroller.clientHeight)
+
+      setShowScrollButton(scrollPosition > threshold)
+    }
+
+    scroller.addEventListener('scroll', handleShowBtn)
+
+    return () => {
+      scroller.removeEventListener('scroll', handleShowBtn)
+    }
+  }, [hasMessages, messagesQuery.isSuccess, scrollerRef])
+
+  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/utils/has-to-update-cursor/has-to-update-cursor.spec.tsx

@@ -0,0 +1,58 @@
+import { chance } from '@/src/config/tests'
+import ParsedMessageBuilder from '../../__tests__/parsed-message.builder'
+import type { ParsedMessage } from '../../types'
+
+import hasToUpdateCursor from './has-to-update-cursor'
+
+describe('hasToUpdateCursor', () => {
+  const messages = [new ParsedMessageBuilder()]
+  const currentCursor = chance.timestamp()
+  const profileId = messages?.at?.(0)?.contact.id ?? ''
+
+  it('should return false when given a empty profileId', () => {
+    expect(hasToUpdateCursor({ messages, currentCursor, profileId: '' })).toBe(false)
+  })
+
+  it('should return false when given a empty messages list', () => {
+    expect(hasToUpdateCursor({ messages: [], currentCursor, profileId })).toBe(false)
+  })
+
+  it('should return false when the given messages list last item contact.id is equals to `hotmartContactId`', () => {
+    expect(
+      hasToUpdateCursor({
+        messages: [new ParsedMessageBuilder().withContact({ id: 'hotmartContactId' })],
+        currentCursor,
+        profileId
+      })
+    ).toBe(false)
+  })
+
+  it('should return false when the given messages list last item is mine', () => {
+    expect(
+      hasToUpdateCursor({
+        messages: [
+          new ParsedMessageBuilder().withContact({ id: profileId }).withMetadata({
+            ...((messages.at(0)?.metadata ?? {}) as ParsedMessage['metadata']),
+            author: 'user'
+          })
+        ],
+        currentCursor,
+        profileId
+      })
+    ).toBe(false)
+  })
+
+  it('should return false when current cursor timestamp is greater than the last message item timestamp', () => {
+    expect(
+      hasToUpdateCursor({
+        messages: [new ParsedMessageBuilder().withTimestamp(currentCursor - 1)],
+        currentCursor,
+        profileId
+      })
+    ).toBe(false)
+  })
+
+  it('should return true when it has to update the cursor', () => {
+    expect(hasToUpdateCursor({ messages, currentCursor, profileId })).toBe(true)
+  })
+})

package/src/modules/messages/utils/has-to-update-cursor/has-to-update-cursor.ts

@@ -0,0 +1,30 @@
+import type { ParsedMessage } from '../../types'
+
+export type HasToUpdateCursorProps = {
+  messages: Array<ParsedMessage>
+  currentCursor: number
+  profileId: string
+}
+
+function hasToUpdateCursor({
+  currentCursor,
+  messages,
+  profileId
+}: HasToUpdateCursorProps): boolean {
+  if (!profileId || !messages?.length) return false
+
+  const lastMessage = messages
+    .slice()
+    .sort((a, b) => b.timestamp - a.timestamp)
+    ?.at(0)
+
+  if (!lastMessage || lastMessage.contact.id === 'hotmartContactId') return false
+
+  const isMine = lastMessage.metadata.author === 'user' && lastMessage.contact.id === profileId
+
+  if (isMine || currentCursor > lastMessage.timestamp) return false
+
+  return true
+}
+
+export default hasToUpdateCursor

package/src/modules/messages/utils/has-to-update-cursor/index.ts

@@ -0,0 +1,2 @@
+export * from './has-to-update-cursor'
+export { default as hasToUpdateCursor } from './has-to-update-cursor'

package/src/modules/sparkie/__tests__/sparkie.mock.ts

@@ -0,0 +1,33 @@
+import ICursorUpdateBuilder from '../../cursor/__tests__/icursor-update.builder'
+import type { IMessageWithSenderData } from '../../messages'
+import IMessageWithSenderDataMock from '../../messages/__tests__/imessage-with-sender-data.mock'
+
+export const SparkieMessageServiceMock = {
+  getAll: vi
+    .fn()
+    .mockReturnValue(new IMessageWithSenderDataMock().getMany(10) as IMessageWithSenderData[]),
+  post: vi.fn(),
+  postDirect: vi.fn(),
+  remove: vi.fn()
+}
+
+export const SparkieCursorServiceMock = {
+  update: vi.fn(() => new ICursorUpdateBuilder())
+}
+
+export const SparkieDefaultMethodsMock = {
+  destroy: vi.fn(),
+  init: vi.fn(),
+  off: vi.fn(),
+  on: vi.fn(),
+  listener: { trackTyping: vi.fn() },
+  setAPIToken: vi.fn()
+}
+
+const SparkieMock = vi.fn(() => ({
+  ...SparkieDefaultMethodsMock,
+  messageService: SparkieMessageServiceMock,
+  cursorService: SparkieCursorServiceMock
+}))
+
+export default SparkieMock

package/src/modules/widget/__tests__/widget-settings-props.builder.ts

@@ -25,6 +25,12 @@ class WidgetSettingPropsBuilder implements WidgetSettingProps {
     this.conversationId = chance.guid()
     this.productId = 4234
     this.productName = 'Berim CDs'
+    this.conversationId = chance.guid()
+    this.contactId = chance.guid()
+    this.clubName = 'Test Standard Club'
+    this.membershipId = 'test-standard-club'
+    this.tutorName = 'Professor Test'
+    this.userId = chance.guid()
   }
 
   withHotmartToken(hotmartToken: typeof this.hotmartToken) {

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

@@ -0,0 +1,28 @@
+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 WidgetSettingPropsBuilder from '../../__tests__/widget-settings-props.builder'
+import * as Store from '../../store'
+
+import ChatPage from './chat-page'
+
+describe('ChatPage', () => {
+  const defaultSettings = new WidgetSettingPropsBuilder()
+  const getMessagesMock = new IMessageWithSenderDataMock().getMany(10) as IMessageWithSenderData[]
+
+  const renderComponent = () => render(<ChatPage />)
+
+  beforeEach(() => {
+    vi.spyOn(Store, 'useWidgetSettingsAtomValue').mockReturnValue(defaultSettings)
+  })
+
+  it('should render each fetched message item from API', async () => {
+    renderComponent()
+
+    await waitFor(() =>
+      expect(screen.getAllByTestId('messages-item')).toHaveLength(getMessagesMock.length)
+    )
+
+    expect(screen.getByPlaceholderText(/send_message.field.placeholder/)).toBeInTheDocument()
+  })
+})

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

@@ -7,9 +7,7 @@ function ChatPage() {
 
   return (
     <>
-      <div className='overflow-auto px-5 py-4'>
-        <MessagesList />
-      </div>
+      <MessagesList />
       <div className='border-t border-t-neutral-700 px-5 py-4'>
         <ChatInput name='new-chat-msg-input' ref={chatInputRef} />
       </div>

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

@@ -1,27 +1,33 @@
-import { useEffect } from 'react'
-import { useQueryClient } from '@tanstack/react-query'
-
-import { getInitSparkieQuery } from '../../hooks'
+import { Spinner } from '@/src/lib/components'
+import { useInitSparkie } from '../../hooks'
 import { useWidgetSettingsAtom, useWidgetTabsAtom } from '../../store'
 import { WIDGET_TABS } from '../constants'
 
 function WidgetContainer() {
   const [settings] = useWidgetSettingsAtom()
-  const initSparkieQuery = settings ? getInitSparkieQuery(settings) : null
-  const queryClient = useQueryClient()
+  const sparkieQuery = useInitSparkie(settings)
   const [widgetTabs] = useWidgetTabsAtom()
 
-  useEffect(() => {
-    if (!initSparkieQuery) return
-    void (async () => {
-      await queryClient.prefetchQuery(initSparkieQuery)
-    })()
-  }, [initSparkieQuery, queryClient])
-
   if (!settings?.tutorName) return null
 
+  // TODO: change it for the general API error design from FIGMA as soon as it is available
+  if (sparkieQuery.isError)
+    return (
+      <div className='text-neutral-50'>
+        <span>Error initializing sparkie</span>
+        <button onClick={() => void sparkieQuery.refetch()}>Try again</button>
+      </div>
+    )
+
+  if (sparkieQuery.isLoading)
+    return (
+      <div className='flex flex-col items-center justify-center p-8'>
+        <Spinner className='inline-flex h-6 w-6 animate-spin text-neutral-200' />
+      </div>
+    )
+
   return (
-    <div className='flex min-h-svh flex-col items-center justify-center bg-neutral-900'>
+    <div className='flex min-h-svh flex-col items-center justify-center'>
       <div className='grid h-svh w-full grid-rows-[1fr_max-content]'>
         {WIDGET_TABS[widgetTabs.currentTab]}
       </div>

package/src/modules/widget/components/index.ts

@@ -2,3 +2,4 @@ export * from './ai-avatar'
 export * from './chat-page'
 export * from './container'
 export * from './greetings-card'
+export * from './scroll-to-bottom-button'

package/src/modules/widget/components/scroll-to-bottom-button/index.ts

@@ -0,0 +1,2 @@
+export * from './scroll-to-bottom-button'
+export { default as ScrollToBottomButton } from './scroll-to-bottom-button'

package/src/modules/widget/components/scroll-to-bottom-button/scroll-to-bottom-button.tsx

@@ -0,0 +1,32 @@
+import { type ButtonHTMLAttributes, type DetailedHTMLProps, forwardRef } from 'react'
+import clsx from 'clsx'
+
+import { Icon } from '@/src/lib/components'
+
+export interface IScrollToBottomButtonProps
+  extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+  show?: boolean
+  top?: number
+}
+
+const ScrollToBottomButton = forwardRef<HTMLButtonElement, IScrollToBottomButtonProps>(
+  ({ show = false, top = 0, onClick, className, ...props }, ref) => (
+    <button
+      {...props}
+      style={{ top }}
+      ref={ref}
+      className={clsx(
+        'fixed inset-x-1/2 flex size-7 cursor-pointer flex-col items-center justify-center rounded-full bg-neutral-600 text-sm text-neutral-50 outline-none transition-colors duration-300 ease-in hover:scale-110 hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2',
+        { 'pointer-events-none opacity-0': !show },
+        className
+      )}
+      onClick={onClick}
+      aria-label='Scroller Button'>
+      <Icon name='arrow-down' className='size-4' aria-label='Scroller Button Icon' />
+    </button>
+  )
+)
+
+ScrollToBottomButton.displayName = 'ScrollToBottomButton'
+
+export default ScrollToBottomButton

package/src/modules/widget/events.ts

@@ -19,3 +19,7 @@ const TutorWidgetEventsList: Array<ITutorWidgetEvent> = [
 ] as const
 
 export const TutorWidgetEvents = new Map(TutorWidgetEventsList.map((e) => [e.name, e]))
+
+export const ACTION_EVENTS = {
+  SCROLL: 'c3po-app-widget-scroll-to-bottom'
+}

package/src/modules/widget/hooks/use-init-sparkie/use-init-sparkie.tsx

@@ -4,15 +4,17 @@ import { SparkieService } from '@/src/modules/sparkie'
 import type { WidgetSettingProps } from '@/src/types'
 
 export const getInitSparkieQuery = (settings: WidgetSettingProps) => ({
-  queryKey: ['SparkieService:initializeSparkie', settings.hotmartToken],
+  queryKey: ['SparkieService:initializeSparkie', settings?.hotmartToken ?? ''],
   queryFn: () =>
     SparkieService.initSparkie({
-      token: settings.hotmartToken,
+      token: settings?.hotmartToken,
       skipPresenceSetup: true
-    }),
-  enabled: Boolean(settings?.hotmartToken?.trim())
+    })
 })
 
-export function useInitSparkie(settings: WidgetSettingProps) {
-  return useQuery(getInitSparkieQuery(settings))
+export function useInitSparkie(settings: WidgetSettingProps | null) {
+  return useQuery({
+    ...getInitSparkieQuery(settings as WidgetSettingProps),
+    enabled: Boolean(settings?.hotmartToken?.trim())
+  })
 }

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

@@ -1,2 +1,3 @@
+export * from './widget-container-intrinsic-height.atom'
 export * from './widget-settings.atom'
 export * from './widget-tabs.atom'

package/src/modules/widget/store/widget-container-intrinsic-height.atom.ts

@@ -0,0 +1,13 @@
+import { atom, useAtom, useAtomValue } from 'jotai'
+
+const intrinsicHeightAtom = atom('100svh')
+const setIntrinsicHeightAtom = atom(
+  (get) => get(intrinsicHeightAtom),
+  (_, set, value: string) => {
+    set(intrinsicHeightAtom, value)
+  }
+)
+
+export const useIntrinsicHeightAtom = () => useAtom(setIntrinsicHeightAtom)
+
+export const useIntrinsicHeightAtomValue = () => useAtomValue(intrinsicHeightAtom)