app-tutor-ai-consumer 1.4.0 → 1.6.0

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/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/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,13 @@ 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'
+    this.membershipId = 'test-standard-club'
+    this.tutorName = 'Professor Test'
+    this.userId = chance.guid()
   }
 
   withHotmartToken(hotmartToken: typeof this.hotmartToken) {
@@ -116,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

package/src/modules/widget/components/ai-avatar/ai-avatar.tsx

@@ -1,57 +1,15 @@
-function AIAvatarIcon() {
+import clsx from 'clsx'
+
+import { Icon } from '@/src/lib/components'
+
+function AIAvatarIcon({
+  className = 'rounded-full border-4 border-neutral-900 bg-neutral-800'
+}: {
+  className?: string
+}) {
   return (
-    <div className='flex h-11 w-11 items-center justify-center rounded-full border-4 border-neutral-900 bg-neutral-800'>
-      <svg
-        width='25'
-        height='24'
-        viewBox='0 0 25 24'
-        fill='none'
-        xmlns='http://www.w3.org/2000/svg'>
-        <path
-          d='M8.21062 3.77518L11.05 9.08404L16.3739 11.9154L11.05 14.7469L8.21062 20.0557L5.37122 14.7469L0.0473633 11.9154L5.37122 9.08404L8.21062 3.77518Z'
-          fill='url(#paint0_linear_18316_181)'
-        />
-        <path
-          d='M17.8806 0.590271L19.2848 3.21586L21.9178 4.61617L19.2848 6.01648L17.8806 8.64206L16.4762 6.01648L13.8433 4.61617L16.4762 3.21586L17.8806 0.590271Z'
-          fill='url(#paint1_linear_18316_181)'
-        />
-        <path
-          d='M20.7199 16.7845L18.9453 13.4665L17.1707 16.7845L13.8433 18.5541L17.1707 20.3237L18.9453 23.6418L20.7199 20.3237L24.0473 18.5541L20.7199 16.7845Z'
-          fill='url(#paint2_linear_18316_181)'
-        />
-        <defs>
-          <linearGradient
-            id='paint0_linear_18316_181'
-            x1='0.0473633'
-            y1='11.9154'
-            x2='16.3739'
-            y2='11.9154'
-            gradientUnits='userSpaceOnUse'>
-            <stop stopColor='#44D0FF' />
-            <stop offset='1' stopColor='#B48EFF' />
-          </linearGradient>
-          <linearGradient
-            id='paint1_linear_18316_181'
-            x1='13.8433'
-            y1='4.61617'
-            x2='21.9178'
-            y2='4.61617'
-            gradientUnits='userSpaceOnUse'>
-            <stop stopColor='#44D0FF' />
-            <stop offset='1' stopColor='#B48EFF' />
-          </linearGradient>
-          <linearGradient
-            id='paint2_linear_18316_181'
-            x1='13.8433'
-            y1='18.5541'
-            x2='24.0473'
-            y2='18.5541'
-            gradientUnits='userSpaceOnUse'>
-            <stop stopColor='#44D0FF' />
-            <stop offset='1' stopColor='#B48EFF' />
-          </linearGradient>
-        </defs>
-      </svg>
+    <div className={clsx('flex h-11 w-11 items-center justify-center', className)}>
+      <Icon name='ai-color' className='h-6 w-6' aria-label='AI avatar Icon' />
     </div>
   )
 }

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