app-tutor-ai-consumer 1.5.0 → 1.7.0

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

@@ -1,6 +1,7 @@
 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
@@ -9,6 +10,7 @@ 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
@@ -39,6 +41,7 @@ function useManageScroll<T extends HTMLElement>(scrollerRef: RefObject<T | null>
     if (!scroller || !hasMessages || !messagesQuery.isSuccess) return
 
     const handleShowBtn = () => {
+      setWidgetScrolling(true)
       const scrollPosition =
         Number(scroller.scrollHeight) - Number(scroller.scrollTop) - Number(scroller.clientHeight)
 
@@ -49,8 +52,9 @@ function useManageScroll<T extends HTMLElement>(scrollerRef: RefObject<T | null>
 
     return () => {
       scroller.removeEventListener('scroll', handleShowBtn)
+      setWidgetScrolling(false)
     }
-  }, [hasMessages, messagesQuery.isSuccess, scrollerRef])
+  }, [hasMessages, messagesQuery.isSuccess, scrollerRef, setWidgetScrolling])
 
   useEffect(() => {
     const scroller = scrollerRef.current

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'

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

@@ -0,0 +1,80 @@
+import { useEffect, useMemo } from 'react'
+import type { InfiniteData } from '@tanstack/react-query'
+import { useQueryClient } from '@tanstack/react-query'
+import { produce } from 'immer'
+
+import { useGetProfile } from '@/src/modules/profile'
+import { SparkieService } from '@/src/modules/sparkie'
+import { useWidgetLoadingAtom, useWidgetSettingsAtom } from '@/src/modules/widget'
+import type { FetchMessagesResponse, IMessageWithSenderData } from '../../types'
+import { getMessagesInfiniteQuery } from '../use-infinite-get-messages'
+
+const useSubscribeMessageReceivedEvent = () => {
+  const [settings] = useWidgetSettingsAtom()
+  const profileQuery = useGetProfile()
+  const queryClient = useQueryClient()
+  const [, setWidgetLoading] = useWidgetLoadingAtom()
+
+  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
+  })
+
+  useEffect(() => {
+    const messageReceived = (data: IMessageWithSenderData) => {
+      const queryKey = query.queryKey
+
+      if (!queryKey || !queryClient) return
+
+      const previousData = queryClient.getQueryData<InfiniteData<FetchMessagesResponse>>(
+        query.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)
+
+          return draft
+        })
+
+        return result
+      })
+
+      const isMine = data.contactId === profileId
+
+      if (!isMine) {
+        setTimeout(() => setWidgetLoading(false), 100)
+      }
+    }
+
+    SparkieService.subscribeEvents({
+      messageReceived
+    })
+
+    return () => {
+      SparkieService.removeEventSubscription({
+        messageReceived
+      })
+    }
+  }, [profileId, query.queryKey, queryClient, setWidgetLoading])
+}
+
+export default useSubscribeMessageReceivedEvent

package/src/modules/messages/service.ts

@@ -15,9 +15,9 @@ import type {
 } from './types'
 
 class MessagesService {
-  private get sparkieMessageService() {
+  async getSparkieMessageService() {
     try {
-      const messageService = SparkieService.sparkieInstance.messageService
+      const messageService = await SparkieService.getMessageService()
 
       if (!messageService) throw new Error()
 
@@ -35,7 +35,8 @@ class MessagesService {
     conversationId,
     before
   }: IGetMessagesPayload): Promise<Array<IMessageWithSenderData>> {
-    const data = await this.sparkieMessageService.getAll(conversationId, {
+    const sparkieMessageService = await this.getSparkieMessageService()
+    const data = await sparkieMessageService.getAll(conversationId, {
       before
     })
 
@@ -66,7 +67,8 @@ class MessagesService {
     conversationId,
     metadata
   }: ISendTextMessagePayload): Promise<Message> {
-    const data = await this.sparkieMessageService.post(conversationId, {
+    const sparkieMessageService = await this.getSparkieMessageService()
+    const data = await sparkieMessageService.post(conversationId, {
       content,
       metadata
     })
@@ -75,9 +77,8 @@ class MessagesService {
   }
 
   async sendImageMessage({ content, conversationId }: ISendImageMessagePayload): Promise<Message> {
-    const data = await this.sparkieMessageService.post(conversationId, {
-      content
-    })
+    const sparkieMessageService = await this.getSparkieMessageService()
+    const data = await sparkieMessageService.post(conversationId, { content })
 
     return data
   }

package/src/modules/sparkie/service.ts

@@ -3,11 +3,20 @@ import Sparkie from '@hotmart/sparkie'
 import { MSG_MAX_COUNT } from '../messages'
 
 import { ACTION_EVENT_MAP, firebaseConfig } from './constants'
-import type { InitSparkiePayload, SparkieActions, TrackTypingPayload } from './types'
+import type {
+  InitializationState,
+  InitSparkiePayload,
+  RetryOptions,
+  SparkieActions,
+  TrackTypingPayload
+} from './types'
 import { validateFirebaseConfig } from './utils/validate-firebase-config'
 
 class SparkieService {
   private sparkie: Sparkie | null = null
+  private initializationState: InitializationState = 'idle'
+  private initializationPromise: Promise<boolean> | null = null
+  private lastInitToken: string | null = null
 
   constructor() {
     if (validateFirebaseConfig()) {
@@ -29,33 +38,166 @@ class SparkieService {
     return this.sparkie
   }
 
-  async initSparkie({ token, skipPresenceSetup = false }: InitSparkiePayload): Promise<boolean> {
-    const sparkie = this.sparkieInstance
+  get isInitialized(): boolean {
+    return (
+      this.initializationState === 'initialized' &&
+      this.sparkie?.messageService?.getAll !== undefined
+    )
+  }
 
-    try {
-      if (!token || !token.trim())
-        throw new Error('Invalid or missing token for Sparkie initialization')
+  get initState(): InitializationState {
+    return this.initializationState
+  }
+
+  get status() {
+    return {
+      state: this.initializationState,
+      isInitialized: this.isInitialized,
+      hasToken: !!this.lastInitToken,
+      hasMessageService: !!this.sparkie?.messageService?.getAll
+    }
+  }
 
-      await sparkie.init(token, { skipPresenceSetup })
+  async initSparkie({
+    token,
+    skipPresenceSetup = false,
+    retryOptions = {}
+  }: InitSparkiePayload & { retryOptions?: RetryOptions }): Promise<boolean> {
+    const { maxRetries = 3, backoffMultiplier = 2, retryDelay = 1000 } = retryOptions
+
+    if (this.initializationPromise && this.lastInitToken === token) {
+      return this.initializationPromise
+    }
+
+    // if already initialized with a different token, reinitialize
+    if (this.isInitialized && this.lastInitToken !== token) {
+      await this.destroySparkie()
+      this.initializationState = 'idle'
+    }
+
+    // already initialized with the current token
+    if (this.isInitialized && this.lastInitToken === token) {
       return true
-    } catch (error) {
-      console.error('Error initializing realtime engine', error)
-
-      if (error instanceof Error) {
-        console.error('Error details:', {
-          message: error.message,
-          stack: error.stack,
-          token: token ? 'provided' : 'missing',
-          skipPresenceSetup
-        })
+    }
+
+    this.lastInitToken = token
+    this.initializationState = 'initializing'
+
+    this.initializationPromise = this.performInitializationWithRetry({
+      token,
+      skipPresenceSetup,
+      maxRetries,
+      retryDelay,
+      backoffMultiplier
+    })
+
+    const result = await this.initializationPromise
+
+    this.initializationPromise = null
+
+    return result
+  }
+
+  private async performInitializationWithRetry({
+    token,
+    skipPresenceSetup,
+    maxRetries,
+    retryDelay,
+    backoffMultiplier
+  }: InitSparkiePayload & Required<RetryOptions>): Promise<boolean> {
+    let currentDelay = retryDelay
+    let attempt = 1
+
+    while (attempt <= maxRetries) {
+      try {
+        if (!token || !token.trim())
+          throw new Error('Invalid or missing token for Sparkie initialization')
+
+        const sparkie = this.sparkieInstance
+        const service = await sparkie.init(token, { skipPresenceSetup })
+        const isServiceReady = typeof service.messageService?.getAll === 'function'
+
+        if (!isServiceReady) throw new Error('MessageService not properly initialized after init')
+
+        this.initializationState = 'initialized'
+
+        return true
+      } catch (error) {
+        console.error('Error initializing realtime engine', error)
+
+        if (error instanceof Error) {
+          console.error('Error details:', {
+            message: error.message,
+            stack: error.stack,
+            token: token ? 'provided' : 'missing',
+            skipPresenceSetup
+          })
+        }
+
+        if (attempt === maxRetries) {
+          this.initializationState = 'failed'
+          console.error(
+            `❌ Sparkie initialization attempts reached the maxRetries: $${maxRetries} amount`,
+            error
+          )
+          return false
+        }
+
+        await new Promise((resolve) => setTimeout(resolve, currentDelay))
+        currentDelay *= backoffMultiplier
+      } finally {
+        attempt += 1
       }
+    }
 
-      return false
+    return false
+  }
+
+  private async ensureInitialized(): Promise<void> {
+    if (this.isInitialized) return
+
+    switch (this.initializationState) {
+      case 'failed':
+      case 'idle':
+        throw new Error('Sparkie initialization failed. Please call initSparkie() first.')
+      case 'initializing':
+        if (this.initializationPromise) {
+          const success = await this.initializationPromise
+          if (!success) throw new Error('Sparkie initialization failed')
+        }
     }
   }
 
-  updateToken(token: string): void {
+  async getMessageService() {
+    await this.ensureInitialized()
+
+    const messageService = this.sparkieInstance.messageService
+
+    if (!messageService) throw new Error('MessageService not available after initialization')
+
+    return messageService
+  }
+
+  async updateToken(token: string, reinitialize = true): Promise<boolean> {
     this.sparkieInstance.setAPIToken(token)
+
+    if (reinitialize && token !== this.lastInitToken) {
+      return this.initSparkie({ token })
+    }
+
+    return true
+  }
+
+  subscribeEvents(actions: SparkieActions): void {
+    const { messageReceived, threadClosed, threadJoined, contactTyping } = actions
+
+    if (messageReceived) this.sparkieInstance.on(ACTION_EVENT_MAP.messageReceived, messageReceived)
+
+    if (threadClosed) this.sparkieInstance.on(ACTION_EVENT_MAP.threadClosed, threadClosed)
+
+    if (threadJoined) this.sparkieInstance.on(ACTION_EVENT_MAP.threadJoined, threadJoined)
+
+    if (contactTyping) this.sparkieInstance.on(ACTION_EVENT_MAP.contactTyping, contactTyping)
   }
 
   removeEventSubscription(actions: SparkieActions): void {
@@ -67,27 +209,32 @@ class SparkieService {
     })
   }
 
-  subscribeEvents({
-    messageReceived,
-    threadClosed,
-    threadJoined,
-    contactTyping
-  }: SparkieActions): void {
-    if (messageReceived) this.sparkieInstance.on(ACTION_EVENT_MAP.messageReceived, messageReceived)
+  async trackTyping({ contactIds, conversationId }: TrackTypingPayload): Promise<void> {
+    await this.ensureInitialized()
+    this.sparkieInstance.listener?.trackTyping(conversationId, contactIds)
+  }
 
-    if (threadClosed) this.sparkieInstance.on(ACTION_EVENT_MAP.threadClosed, threadClosed)
+  async reinitialize(): Promise<boolean> {
+    if (!this.lastInitToken) throw new Error('No token available for reinitialization')
 
-    if (threadJoined) this.sparkieInstance.on(ACTION_EVENT_MAP.threadJoined, threadJoined)
+    await this.destroySparkie()
+    this.initializationState = 'idle'
 
-    if (contactTyping) this.sparkieInstance.on(ACTION_EVENT_MAP.contactTyping, contactTyping)
+    return this.initSparkie({ token: this.lastInitToken })
   }
 
-  trackTyping({ contactIds, conversationId }: TrackTypingPayload): void {
-    this.sparkieInstance.listener?.trackTyping(conversationId, contactIds)
-  }
-
-  destroySparkie(): Promise<void> {
-    return this.sparkieInstance.destroy({ skipSignOut: true })
+  async destroySparkie(): Promise<void> {
+    try {
+      if (this.sparkie && this.initializationState !== 'idle') {
+        await this.sparkieInstance.destroy({ skipSignOut: true })
+      }
+    } catch (error) {
+      console.error('Error destroying Sparkie:', error)
+    } finally {
+      this.initializationState = 'idle'
+      this.initializationPromise = null
+      this.lastInitToken = null
+    }
   }
 }
 

package/src/modules/sparkie/types.ts

@@ -1,4 +1,4 @@
-import type { IMessage } from '../messages'
+import type { IMessageWithSenderData } from '../messages'
 
 export type InitSparkiePayload = {
   token: string
@@ -7,6 +7,14 @@ export type InitSparkiePayload = {
   includeSupportEvents?: boolean
 }
 
+export type InitializationState = 'idle' | 'initializing' | 'initialized' | 'failed'
+
+export interface RetryOptions {
+  maxRetries?: number
+  retryDelay?: number
+  backoffMultiplier?: number
+}
+
 type ThreadMetadata = Record<string, unknown>
 
 export type IContact = {
@@ -35,7 +43,7 @@ export type ITyping = {
 }
 
 export type SparkieActions = {
-  messageReceived?: (data: IMessage) => void
+  messageReceived?: (data: IMessageWithSenderData) => void
   threadClosed?: (data: IThread) => void
   threadJoined?: (data: IThread) => void
   contactTyping?: (data: ITyping) => void

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

@@ -12,12 +12,15 @@ class WidgetSettingPropsBuilder implements WidgetSettingProps {
   clubName?: string
   contactId?: string
   namespace?: string
-  sessionId?: string
+  sessionId: string
   membershipId?: string
   membershipSlug?: string
   userId?: string
   tutorName?: string
   user?: User
+  classHashId?: string
+  owner_id?: string
+  current_media_codes?: string
 
   constructor() {
     this.hotmartToken = chance.guid()
@@ -25,6 +28,7 @@ class WidgetSettingPropsBuilder implements WidgetSettingProps {
     this.conversationId = chance.guid()
     this.productId = 4234
     this.productName = 'Berim CDs'
+    this.sessionId = chance.guid()
     this.conversationId = chance.guid()
     this.contactId = chance.guid()
     this.clubName = 'Test Standard Club'
@@ -122,6 +126,24 @@ class WidgetSettingPropsBuilder implements WidgetSettingProps {
 
     return this
   }
+
+  withClassHashId(classHashId: typeof this.classHashId) {
+    this.classHashId = classHashId
+
+    return this
+  }
+
+  withOwner_id(owner_id: typeof this.owner_id) {
+    this.owner_id = owner_id
+
+    return this
+  }
+
+  withCurrent_media_codes(current_media_codes: typeof this.current_media_codes) {
+    this.current_media_codes = current_media_codes
+
+    return this
+  }
 }
 
 export default WidgetSettingPropsBuilder