app-tutor-ai-consumer 1.8.2 → 1.9.0

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+# [1.9.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.8.2...v1.9.0) (2025-07-17)
+
+### Features
+
+- add on close listener ([c41e700](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/c41e700241ac7a3f31d8091eb4e03141fd75c83e))
+- add thread event listner ([904b78d](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/904b78dd3271552d2167d467814aa4add1550201))
+- add useSubscribeThreadClosed event listener ([edfa1ee](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/edfa1ee8cd7296292ad485d283f3675d6a626ac1))
+- add useSubscribeThreadClosed to container.tsx ([53aa939](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/53aa939561a1ad3415ba7735344632390015764b))
+
 ## [1.8.2](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.8.1...v1.8.2) (2025-07-16)
 
 ## [1.8.1](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.8.0...v1.8.1) (2025-07-15)

package/config/vitest/__mocks__/sparkie.tsx

@@ -1,6 +1,9 @@
 import SparkieMock from '@/src/modules/sparkie/__tests__/sparkie.mock'
 import { SparkieService } from '@/src/modules/sparkie'
-import { SparkieMessageServiceMock } from '@/src/modules/sparkie/__tests__/sparkie.mock'
+import {
+  SparkieMessageServiceMock,
+  SparkieCursorServiceMock
+} from '@/src/modules/sparkie/__tests__/sparkie.mock'
 import MessageService from '@hotmart/sparkie/dist/MessageService'
 
 vi.mock('@hotmart/sparkie', () => ({ default: SparkieMock }))
@@ -9,4 +12,6 @@ beforeEach(() => {
   vi.spyOn(SparkieService, 'getMessageService').mockResolvedValue(
     SparkieMessageServiceMock as unknown as MessageService
   )
+
+  vi.spyOn(SparkieService, 'getCursorService').mockResolvedValue(SparkieCursorServiceMock as never)
 })

package/config/vitest/vitest.config.mts

@@ -14,7 +14,6 @@ export default defineConfig({
       './config/vitest/__mocks__/sparkie.tsx',
       './config/vitest/__mocks__/icons.tsx',
       './config/vitest/__mocks__/intersection-observer.ts',
-      './config/vitest/__mocks__/use-init-sparkie.tsx',
       './config/vitest/polyfills/global.js'
     ],
     coverage: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-tutor-ai-consumer",
-  "version": "1.8.2",
+  "version": "1.9.0",
   "main": "index.js",
   "scripts": {
     "dev": "rspack serve --env=development --config config/rspack/rspack.config.js",

package/src/index.tsx

@@ -10,7 +10,7 @@ import { initAxios } from './config/request/api'
 import { devMode, productionMode } from './lib/utils'
 import { Main } from './main'
 import { SparkieService } from './modules/sparkie'
-import { TutorWidgetEvents, TutorWidgetEventTypes } from './modules/widget'
+import { TutorWidgetEvents } from './modules/widget'
 import type { WidgetSettingProps } from './types'
 
 const loadMainStyles = () => {
@@ -44,7 +44,11 @@ window.startChatWidget = async (
   await initLanguage(settings.locale)
   await initDayjs(settings.locale)
 
+  let isLoadingSparkie: boolean = false
+  let initSparkieError: unknown = null
+
   try {
+    isLoadingSparkie = true
     await SparkieService.initSparkie({
       token: settings?.hotmartToken,
       skipPresenceSetup: true,
@@ -55,18 +59,23 @@ window.startChatWidget = async (
       }
     })
     await SparkieService.ensureInitialized()
-    TutorWidgetEvents.get(TutorWidgetEventTypes.LOADED)?.dispatch()
+    TutorWidgetEvents['tutor-app-widget-loaded'].dispatch()
   } catch (error) {
+    initSparkieError = error
     console.error(error)
-    TutorWidgetEvents.get(TutorWidgetEventTypes.LOADED)?.dispatch({ detail: { isSuccess: false } })
+    TutorWidgetEvents['tutor-app-widget-loaded'].dispatch({ detail: { isSuccess: false } })
+  } finally {
+    isLoadingSparkie = false
   }
 
-  if (root)
+  if (root) {
+    TutorWidgetEvents['c3po-app-widget-open'].dispatch()
     root.render(
       <StrictMode>
-        <Main settings={settings} />
+        <Main settings={settings} metadata={{ initSparkieError, isLoadingSparkie }} />
       </StrictMode>
     )
+  }
 }
 
-window.closeChatWidget = () => TutorWidgetEvents.get(TutorWidgetEventTypes.CLOSE)?.dispatch()
+window.closeChatWidget = () => TutorWidgetEvents['c3po-app-widget-close'].dispatch()

package/src/main/main.tsx

@@ -3,13 +3,31 @@ import '@/config/styles/index.css'
 import { ErrorBoundary, GenericError } from '@/src/lib/components/errors'
 import { useDefaultId } from '@/src/lib/hooks'
 import { useAppLang } from '../config/i18n'
+import { Spinner } from '../lib/components'
 import { GlobalProviders } from '../modules/global-providers'
 import { WidgetContainer } from '../modules/widget'
+import { useListenToVisibilityEvents } from '../modules/widget/hooks'
 import type { WidgetSettingProps } from '../types'
 
-function Main({ settings }: { settings: WidgetSettingProps }) {
+export type MainProps = {
+  settings: WidgetSettingProps
+  metadata?: { isLoadingSparkie: boolean; initSparkieError: unknown }
+}
+function Main({
+  settings,
+  metadata = { initSparkieError: null, isLoadingSparkie: false }
+}: MainProps) {
   useDefaultId()
   useAppLang(settings.locale)
+  useListenToVisibilityEvents()
+
+  if (metadata.isLoadingSparkie) {
+    return (
+      <div className='flex h-full w-full flex-col items-center justify-center'>
+        <Spinner className='h-10 w-10 text-neutral-500' />
+      </div>
+    )
+  }
 
   return (
     <ErrorBoundary fallback={<GenericError />}>

package/src/modules/cursor/service.ts

@@ -1,12 +1,30 @@
+import { ApiError } from '@/src/config/request'
+import { HttpCodes } from '@/src/lib/utils'
 import { SparkieService } from '../sparkie'
 
 import type { ICursorUpdate } from './types'
 
 class CursorService {
-  constructor(private sparkie = SparkieService.sparkieInstance) {}
+  async getSparkieCursorService() {
+    try {
+      const messageService = await SparkieService.getCursorService()
+
+      if (!messageService) throw new Error()
+
+      return messageService
+    } catch (error) {
+      throw new ApiError({
+        statusCode: HttpCodes.UNPROCESSABLE_ENTITY,
+        message: 'sparkie.cursorService not defined',
+        extra: { error }
+      })
+    }
+  }
 
   async updateCursor(conversationId: string): Promise<ICursorUpdate | null> {
-    const data = await this.sparkie.cursorService?.update(conversationId)
+    const cursorService = await this.getSparkieCursorService()
+
+    const data = await cursorService?.update(conversationId)
 
     return data ?? null
   }

package/src/modules/messages/events.ts

@@ -0,0 +1,25 @@
+import type { ICustomEvent } from '@/src/types'
+
+import type { SubmitQuestionEventDetail } from './types'
+
+export const MessagesEventTypes = {
+  SUBMIT_QUESTION: 'c3po-chat:questionSubmitted'
+} as const
+
+const MessagesEventsList: Array<ICustomEvent<typeof MessagesEventTypes>> = [
+  {
+    name: MessagesEventTypes.SUBMIT_QUESTION,
+    handler: () => () => undefined,
+    dispatch: () => {
+      const event: CustomEventInit<SubmitQuestionEventDetail> = {
+        detail: {
+          timestamp: Date.now()
+        }
+      }
+
+      window.dispatchEvent(new CustomEvent(MessagesEventTypes.SUBMIT_QUESTION, event))
+    }
+  }
+] as const
+
+export const MessagesEvents = new Map(MessagesEventsList.map((e) => [e.name, e]))

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

@@ -3,6 +3,7 @@ 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 { MessagesEventTypes } from '../../events'
 
 import useSendTextMessage from './use-send-text-message'
 
@@ -83,4 +84,24 @@ describe('useSendTextMessage', () => {
       }
     })
   })
+
+  it('should dispatch window custom event when mutating', async () => {
+    const num = chance.integer()
+    vi.spyOn(globalThis.window, 'dispatchEvent')
+    vi.spyOn(Date, 'now').mockReturnValueOnce(num)
+
+    const { result } = render()
+
+    await waitFor(() => result.current.mutateAsync(message))
+
+    expect(globalThis.window.dispatchEvent).toHaveBeenCalledTimes(1)
+    expect(globalThis.window.dispatchEvent).toHaveBeenNthCalledWith(
+      1,
+      new CustomEvent(MessagesEventTypes.SUBMIT_QUESTION, {
+        detail: {
+          timestamp: num
+        }
+      })
+    )
+  })
 })

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

@@ -4,6 +4,7 @@ import { v4 } from 'uuid'
 import { MessagesService } from '@/src/modules/messages'
 import { useGetProfile } from '@/src/modules/profile'
 import { useWidgetLoadingAtom, useWidgetSettingsAtomValue } from '@/src/modules/widget'
+import { MessagesEvents } from '../../events'
 
 function useSendTextMessage() {
   const settings = useWidgetSettingsAtomValue()
@@ -53,6 +54,7 @@ function useSendTextMessage() {
     },
     onMutate: () => {
       setWidgetLoading(true)
+      MessagesEvents.get('c3po-chat:questionSubmitted')?.dispatch()
     }
   })
 }

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

@@ -3,9 +3,11 @@ import type { InfiniteData } from '@tanstack/react-query'
 import { useQueryClient } from '@tanstack/react-query'
 import { produce } from 'immer'
 
+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 type { FetchMessagesResponse, IMessageWithSenderData } from '../../types'
 import { getMessagesInfiniteQuery } from '../use-infinite-get-messages'
 
@@ -14,6 +16,8 @@ const useSubscribeMessageReceivedEvent = () => {
   const profileQuery = useGetProfile()
   const queryClient = useQueryClient()
   const [, setWidgetLoading] = useWidgetLoadingAtom()
+  const [, addUnreadMessagesToSet] = useUnreadMessagesSetAtom()
+  const useUpdateCursorMutation = useUpdateCursor()
 
   const conversationId = useMemo(() => String(settings?.conversationId), [settings?.conversationId])
   const profileId = useMemo(() => String(profileQuery?.data?.id), [profileQuery?.data?.id])
@@ -61,7 +65,11 @@ const useSubscribeMessageReceivedEvent = () => {
       const isMine = data.contactId === profileId
 
       if (!isMine) {
+        addUnreadMessagesToSet({ itemId: data.id })
         setTimeout(() => setWidgetLoading(false), 100)
+      } else {
+        // The cursor should update only with my messages
+        useUpdateCursorMutation.mutate(data.conversationId)
       }
     }
 
@@ -74,7 +82,14 @@ const useSubscribeMessageReceivedEvent = () => {
         messageReceived
       })
     }
-  }, [profileId, query.queryKey, queryClient, setWidgetLoading])
+  }, [
+    addUnreadMessagesToSet,
+    profileId,
+    query.queryKey,
+    queryClient,
+    setWidgetLoading,
+    useUpdateCursorMutation
+  ])
 }
 
 export default useSubscribeMessageReceivedEvent

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

@@ -0,0 +1 @@
+export * from './unread-messages-set.atom'

package/src/modules/messages/store/unread-messages-set.atom.ts

@@ -0,0 +1,21 @@
+import { atom, useAtom, useAtomValue } from 'jotai'
+
+const unreadMessagesSetAtom = atom(new Set<string>())
+
+const setUnreadMessagesSetAtom = atom(
+  (get) => get(unreadMessagesSetAtom),
+  (_, set, { itemId = '', clear = false }: { itemId?: string; clear?: boolean }) =>
+    set(unreadMessagesSetAtom, (p) => {
+      if (clear) return new Set<string>()
+
+      const previousItems = Array.from(p)
+
+      return new Set([...previousItems, itemId])
+    })
+)
+
+const unreadMessagesAtom = atom((get) => get(unreadMessagesSetAtom).size)
+
+export const useUnreadMessagesSetAtom = () => useAtom(setUnreadMessagesSetAtom)
+export const useUnreadMessagesSetAtomValue = () => useAtomValue(setUnreadMessagesSetAtom)
+export const useUnreadMessagesCount = () => useAtomValue(unreadMessagesAtom)

package/src/modules/messages/types.ts

@@ -76,3 +76,7 @@ export type FetchMessagesResponse = {
   messages: IMessageWithSenderData[]
   hasMore: boolean
 }
+
+export type SubmitQuestionEventDetail = {
+  timestamp: number
+}

package/src/modules/sparkie/service.ts

@@ -178,6 +178,16 @@ class SparkieService {
     return messageService
   }
 
+  async getCursorService() {
+    await this.ensureInitialized()
+
+    const cursorService = this.sparkieInstance.cursorService
+
+    if (!cursorService) throw new Error('CursorService not available after initialization')
+
+    return cursorService
+  }
+
   async updateToken(token: string, reinitialize = true): Promise<boolean> {
     this.sparkieInstance.setAPIToken(token)
 
@@ -225,11 +235,11 @@ class SparkieService {
 
   async destroySparkie(): Promise<void> {
     try {
-      if (this.sparkie && this.initializationState !== 'idle') {
+      if (this.sparkie) {
         await this.sparkieInstance.destroy({ skipSignOut: true })
       }
-    } catch (error) {
-      console.error('Error destroying Sparkie:', error)
+    } catch {
+      console.warn('Sparkie instance not available for destruction')
     } finally {
       this.initializationState = 'idle'
       this.initializationPromise = null

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

@@ -0,0 +1 @@
+export * from './use-subscribe-thread-closed-event'

package/src/modules/thread/hooks/use-subscribe-thread-closed-event/index.ts

@@ -0,0 +1,2 @@
+export * from './use-subscribe-thread-closed-event'
+export { default as useSubscribeThreadClosedEvent } from './use-subscribe-thread-closed-event'

package/src/modules/thread/hooks/use-subscribe-thread-closed-event/use-subscribe-thread-closed-event.tsx

@@ -0,0 +1,22 @@
+import { useCallback, useEffect } from 'react'
+
+import { useUnreadMessagesSetAtom } from '@/src/modules/messages/store'
+import { SparkieService } from '@/src/modules/sparkie'
+
+function useSubscribeThreadClosedEvent() {
+  const [, setUnreadMessagesSet] = useUnreadMessagesSetAtom()
+
+  const threadClosed = useCallback(() => {
+    setUnreadMessagesSet({ clear: true })
+  }, [setUnreadMessagesSet])
+
+  useEffect(() => {
+    SparkieService.subscribeEvents({ threadClosed })
+
+    return () => {
+      SparkieService.removeEventSubscription({ threadClosed })
+    }
+  }, [threadClosed])
+}
+
+export default useSubscribeThreadClosedEvent

package/src/modules/thread/index.ts

@@ -0,0 +1 @@
+export * from './hooks'

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

@@ -1,10 +1,12 @@
 import { useSubscribeMessageReceivedEvent } from '@/src/modules/messages/hooks'
+import { useSubscribeThreadClosedEvent } from '@/src/modules/thread/hooks'
 import { useWidgetTabsValueAtom } from '../../store'
 import { WIDGET_TABS } from '../constants'
 
 function WidgetContainer() {
   const widgetTabs = useWidgetTabsValueAtom()
   useSubscribeMessageReceivedEvent()
+  useSubscribeThreadClosedEvent()
 
   return (
     <div className='flex h-full flex-col items-center justify-stretch overflow-hidden'>

package/src/modules/widget/events.ts

@@ -6,33 +6,49 @@ export const TutorWidgetEventTypes = {
   LOADED: 'tutor-app-widget-loaded'
 } as const
 
-const TutorWidgetEventsList = [
-  {
+const TutorWidgetEventsObject = {
+  [TutorWidgetEventTypes.OPEN]: {
     name: TutorWidgetEventTypes.OPEN,
-    handler: () => () => undefined,
+    handler: (callback) => {
+      const listener: EventListener = () => {
+        void callback()
+      }
+
+      window.addEventListener(TutorWidgetEventTypes.OPEN, listener)
+
+      return () => {
+        window.removeEventListener(TutorWidgetEventTypes.OPEN, listener)
+      }
+    },
     dispatch: () => {
       window.dispatchEvent(new CustomEvent(TutorWidgetEventTypes.OPEN))
     }
-  },
-  {
+  } as ITutorWidgetEvent<void>,
+
+  [TutorWidgetEventTypes.CLOSE]: {
     name: TutorWidgetEventTypes.CLOSE,
-    handler: () => () => undefined,
-    dispatch: () => {
-      window.dispatchEvent(new CustomEvent(TutorWidgetEventTypes.CLOSE))
-    }
-  },
-  {
-    name: TutorWidgetEventTypes.LOADED,
     handler: (callback) => {
-      const listener: EventListener = (e) => {
-        const evt = e as CustomEvent<{ isSuccess: boolean }>
+      const listener: EventListener = () => {
+        void callback()
+      }
+
+      window.addEventListener(TutorWidgetEventTypes.CLOSE, listener)
 
-        console.log(evt.detail)
+      return () => {
+        window.removeEventListener(TutorWidgetEventTypes.CLOSE, listener)
+      }
+    },
+    dispatch: () => window.dispatchEvent(new CustomEvent(TutorWidgetEventTypes.CLOSE))
+  } as ITutorWidgetEvent<void>,
 
+  [TutorWidgetEventTypes.LOADED]: {
+    name: TutorWidgetEventTypes.LOADED,
+    handler: (callback: (payload: { isSuccess: boolean }) => void) => {
+      const listener: EventListener = (e) => {
+        const evt = e as CustomEvent<{ isSuccess: boolean }>
         callback(evt.detail)
       }
       window.addEventListener(TutorWidgetEventTypes.LOADED, listener)
-
       return () => {
         window.removeEventListener(TutorWidgetEventTypes.LOADED, listener)
       }
@@ -41,9 +57,9 @@ const TutorWidgetEventsList = [
       window.dispatchEvent(new CustomEvent(TutorWidgetEventTypes.LOADED, payload))
     }
   } as ITutorWidgetEvent<{ isSuccess: boolean }>
-] as const
+} as const
 
-export const TutorWidgetEvents = new Map(TutorWidgetEventsList.map((e) => [e.name, e]))
+export const TutorWidgetEvents = TutorWidgetEventsObject
 
 export const ACTION_EVENTS = {
   SCROLL: 'c3po-app-widget-scroll-to-bottom'

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

@@ -1 +1 @@
-export * from './use-init-sparkie'
+export * from './use-listen-to-visibility-events'

package/src/modules/widget/hooks/use-listen-to-visibility-events/index.ts

@@ -0,0 +1 @@
+export { default as useListenToVisibilityEvents } from './use-listen-to-visibility-events'

package/src/modules/widget/hooks/use-listen-to-visibility-events/use-listen-to-visibility-events.tsx

@@ -0,0 +1,20 @@
+import { useEffect } from 'react'
+
+import { SparkieService } from '@/src/modules/sparkie'
+import { TutorWidgetEvents } from '../../events'
+
+function useListenToVisibilityEvents() {
+  useEffect(() => {
+    const listener = async () => {
+      await SparkieService.destroySparkie()
+    }
+
+    const clear = TutorWidgetEvents['c3po-app-widget-close'].handler(listener)
+
+    return () => {
+      clear?.()
+    }
+  }, [])
+}
+
+export default useListenToVisibilityEvents

package/src/modules/widget/store/widget-tabs.atom.ts

@@ -8,8 +8,8 @@ export type WidgetTabsProps = {
 }
 
 const INITIAL_PROPS: WidgetTabsProps = {
-  currentTab: 'chat',
-  history: new Set(['chat'])
+  currentTab: 'starter',
+  history: new Set(['starter'])
 }
 
 export const widgetTabsAtom = atom<WidgetTabsProps>(INITIAL_PROPS)

package/src/modules/widget/types.ts

@@ -2,6 +2,6 @@ import type { TutorWidgetEventTypes } from './events'
 
 export type ITutorWidgetEvent<T = unknown> = {
   name: (typeof TutorWidgetEventTypes)[keyof typeof TutorWidgetEventTypes]
-  handler: (callback: (payload: T) => void) => () => void
+  handler: (callback: (payload: T) => void | Promise<void>) => () => void
   dispatch: (payload?: CustomEventInit<T>) => void
 }

package/src/types.ts

@@ -36,3 +36,9 @@ export type WidgetSettingProps = {
   owner_id?: string
   current_media_codes?: string
 }
+
+export interface ICustomEvent<T = object> {
+  name: T[keyof T]
+  handler: (listener: EventListenerOrEventListenerObject) => () => void | Promise<void>
+  dispatch: <D = unknown>(detail?: D) => void
+}

package/config/vitest/__mocks__/use-init-sparkie.tsx

@@ -1,14 +0,0 @@
-import { useInitSparkie } from '@/src/modules/widget/hooks/use-init-sparkie'
-
-vi.mock('@/src/modules/widget/hooks/use-init-sparkie/use-init-sparkie', () => ({
-  useInitSparkie: vi.fn()
-}))
-
-beforeEach(() => {
-  vi.mocked(useInitSparkie).mockReturnValue({
-    data: true,
-    isError: false,
-    isLoading: false,
-    refetch: vi.fn()
-  } as unknown as ReturnType<typeof useInitSparkie>)
-})

package/src/modules/widget/hooks/use-init-sparkie/index.ts

@@ -1 +0,0 @@
-export * from './use-init-sparkie'

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

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