app-tutor-ai-consumer 1.8.2 → 1.10.0

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [1.10.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.9.0...v1.10.0) (2025-07-17)
+
+### Features
+
+- add new loading logic ([ddfcfb6](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/ddfcfb6b5018440a6cd4b5fb2a03d53ee949add7))
+
+# [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.10.0",
   "main": "index.js",
   "scripts": {
     "dev": "rspack serve --env=development --config config/rspack/rspack.config.js",

package/src/index.tsx

@@ -4,13 +4,10 @@ import './config/styles/index.css'
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 
-import { initDayjs } from './config/dayjs'
 import { initLanguage } from './config/i18n'
-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 = () => {
@@ -40,33 +37,15 @@ window.startChatWidget = async (
   const rootElement = document.getElementById(elementId) as HTMLElement
   const root = createRoot(rootElement)
 
-  initAxios(settings.hotmartToken)
   await initLanguage(settings.locale)
-  await initDayjs(settings.locale)
 
-  try {
-    await SparkieService.initSparkie({
-      token: settings?.hotmartToken,
-      skipPresenceSetup: true,
-      retryOptions: {
-        maxRetries: 5,
-        retryDelay: 2000,
-        backoffMultiplier: 1.5
-      }
-    })
-    await SparkieService.ensureInitialized()
-    TutorWidgetEvents.get(TutorWidgetEventTypes.LOADED)?.dispatch()
-  } catch (error) {
-    console.error(error)
-    TutorWidgetEvents.get(TutorWidgetEventTypes.LOADED)?.dispatch({ detail: { isSuccess: false } })
-  }
-
-  if (root)
+  if (root) {
     root.render(
       <StrictMode>
         <Main settings={settings} />
       </StrictMode>
     )
+  }
 }
 
-window.closeChatWidget = () => TutorWidgetEvents.get(TutorWidgetEventTypes.CLOSE)?.dispatch()
+window.closeChatWidget = () => TutorWidgetEvents['c3po-app-widget-close'].dispatch()

package/src/main/main.spec.tsx

@@ -23,7 +23,7 @@ describe('Main', () => {
     renderComponent({ settings: props })
 
     await waitFor(() => {
-      expect(screen.getByText(/send/i)).toBeInTheDocument()
+      expect(screen.getByLabelText(/Submit Button/i)).toBeInTheDocument()
     })
   })
 })

package/src/main/main.tsx

@@ -5,16 +5,22 @@ import { useDefaultId } from '@/src/lib/hooks'
 import { useAppLang } from '../config/i18n'
 import { GlobalProviders } from '../modules/global-providers'
 import { WidgetContainer } from '../modules/widget'
+import { useInitWidget } from '../modules/widget/hooks'
 import type { WidgetSettingProps } from '../types'
 
-function Main({ settings }: { settings: WidgetSettingProps }) {
+export type MainProps = {
+  settings: WidgetSettingProps
+}
+
+function Main({ settings }: MainProps) {
+  const { completeSetup } = useInitWidget(settings)
   useDefaultId()
   useAppLang(settings.locale)
 
   return (
     <ErrorBoundary fallback={<GenericError />}>
       <GlobalProviders settings={settings}>
-        <WidgetContainer />
+        <WidgetContainer completeSetup={completeSetup} />
       </GlobalProviders>
     </ErrorBoundary>
   )

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/components/chat-input/chat-input.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react'
 import clsx from 'clsx'
 import type { ChangeEvent, KeyboardEvent } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -40,11 +40,13 @@ const ChatInput = forwardRef<HTMLTextAreaElement, ChatInputProps>(
       }
     }
 
-    useEffect(() => {
+    const setInputFocus = useCallback(() => {
       if (inputDisabled) return
 
       const input = ref?.current
 
+      if (input === document.activeElement) return
+
       if (input) {
         input.focus()
 
@@ -53,6 +55,10 @@ const ChatInput = forwardRef<HTMLTextAreaElement, ChatInputProps>(
       }
     }, [inputDisabled])
 
+    useEffect(() => {
+      setInputFocus()
+    }, [setInputFocus])
+
     return (
       <div
         className={clsx(
@@ -68,7 +74,7 @@ const ChatInput = forwardRef<HTMLTextAreaElement, ChatInputProps>(
               'max-h-12 w-full resize-none border-none bg-transparent text-neutral-100 outline-none outline-0 placeholder:text-neutral-400',
               styles.textArea
             ),
-            { 'cursor-not-allowed': inputDisabled, 'opacity-40': inputDisabled || loading }
+            { 'cursor-not-allowed opacity-40': inputDisabled }
           )}
           placeholder={t('send_message.field.placeholder')}
           value={value}

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

@@ -1,15 +1,19 @@
+import { useMemo } from 'react'
 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'
+import { MessagesEvents } from '../../events'
 
 function useSendTextMessage() {
   const settings = useWidgetSettingsAtomValue()
   const profileQuery = useGetProfile()
   const [, setWidgetLoading] = useWidgetLoadingAtom()
 
+  const userId = useMemo(() => profileQuery.data?.userId?.toString(), [profileQuery.data?.userId])
+
   return useMutation({
     mutationFn(message: string) {
       let processedMessage = message
@@ -47,12 +51,13 @@ function useSendTextMessage() {
           externalId: v4(),
           namespace: settings.namespace,
           sessionId: settings.sessionId,
-          userId: profileQuery.data?.userId?.toString()
+          userId
         }
       })
     },
     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/constants.tsx

@@ -1,9 +1,11 @@
 import { ChatPage } from './chat-page'
+import { WidgetLoadingPage } from './loading-page'
 import { WidgetOnboardingPage } from './onboarding-page'
 import { WidgetStarterPage } from './starter-page'
 
 export const WIDGET_TABS = {
   onboarding: <WidgetOnboardingPage />,
   starter: <WidgetStarterPage />,
-  chat: <ChatPage />
+  chat: <ChatPage />,
+  loading: <WidgetLoadingPage />
 }

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

@@ -1,10 +1,23 @@
+import { useEffect } from 'react'
+
 import { useSubscribeMessageReceivedEvent } from '@/src/modules/messages/hooks'
-import { useWidgetTabsValueAtom } from '../../store'
+import { useSubscribeThreadClosedEvent } from '@/src/modules/thread/hooks'
+import { useListenToVisibilityEvents } from '../../hooks'
+import { useWidgetTabsAtom } from '../../store'
 import { WIDGET_TABS } from '../constants'
 
-function WidgetContainer() {
-  const widgetTabs = useWidgetTabsValueAtom()
+function WidgetContainer({ completeSetup = false }: { completeSetup?: boolean }) {
+  const [widgetTabs, setTab] = useWidgetTabsAtom()
+
   useSubscribeMessageReceivedEvent()
+  useSubscribeThreadClosedEvent()
+  useListenToVisibilityEvents()
+
+  useEffect(() => {
+    if (completeSetup) {
+      setTab('chat')
+    }
+  }, [completeSetup, setTab])
 
   return (
     <div className='flex h-full flex-col items-center justify-stretch overflow-hidden'>

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

@@ -2,5 +2,6 @@ export * from './ai-avatar'
 export * from './chat-page'
 export * from './container'
 export * from './greetings-card'
+export * from './loading-page'
 export * from './page-layout'
 export * from './scroll-to-bottom-button'

package/src/modules/widget/components/loading-page/index.ts

@@ -0,0 +1 @@
+export { default as WidgetLoadingPage } from './loading-page'

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

@@ -0,0 +1,41 @@
+import { useCallback, useRef } from 'react'
+
+import { useRefEventListener } from '@/src/lib/hooks'
+import {
+  ChatInput,
+  MessageSkeleton,
+  useChatInputValueAtom
+} from '@/src/modules/messages/components'
+import { PageLayout } from '../page-layout'
+
+function WidgetLoadingPage() {
+  const chatInputRef = useRef<HTMLTextAreaElement>(null)
+  const [, setChatInputValue] = useChatInputValueAtom()
+
+  const handler = useCallback(
+    (e: Event) => {
+      const target = e.target as HTMLTextAreaElement
+      setChatInputValue(target.value)
+    },
+    [setChatInputValue]
+  )
+
+  useRefEventListener<HTMLTextAreaElement>({
+    config: {
+      ref: chatInputRef,
+      eventTypes: ['input', 'change'],
+      handler
+    }
+  })
+
+  return (
+    <PageLayout
+      asideChild={<ChatInput name='new-chat-msg-input' ref={chatInputRef} loading={true} />}>
+      <div className='flex h-full flex-col justify-end px-5 py-4'>
+        <MessageSkeleton />
+      </div>
+    </PageLayout>
+  )
+}
+
+export default WidgetLoadingPage

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,2 @@
-export * from './use-init-sparkie'
+export * from './use-init-widget'
+export * from './use-listen-to-visibility-events'

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

@@ -0,0 +1 @@
+export { default as useInitWidget } from './use-init-widget'

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

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react'
+
+import { initDayjs } from '@/src/config/dayjs'
+import { initAxios } from '@/src/config/request/api'
+import { SparkieService } from '@/src/modules/sparkie'
+import type { WidgetSettingProps } from '@/src/types'
+import { TutorWidgetEvents } from '../../events'
+
+const init = async (settings: WidgetSettingProps) => {
+  try {
+    initAxios(settings.hotmartToken)
+    await initDayjs(settings.locale)
+    await SparkieService.initSparkie({
+      token: settings?.hotmartToken,
+      skipPresenceSetup: true,
+      retryOptions: {
+        maxRetries: 5,
+        retryDelay: 2000,
+        backoffMultiplier: 1.5
+      }
+    })
+    await SparkieService.ensureInitialized()
+    TutorWidgetEvents['tutor-app-widget-loaded'].dispatch()
+  } catch (error) {
+    console.error(error)
+    TutorWidgetEvents['tutor-app-widget-loaded'].dispatch({ detail: { isSuccess: false } })
+  }
+}
+
+function useInitWidget(settings: WidgetSettingProps) {
+  const [completeSetup, setCompleteSetup] = useState(false)
+  const [error, setError] = useState<unknown>(null)
+
+  useEffect(() => {
+    if (completeSetup) return
+
+    init(settings)
+      .then(() => {
+        setCompleteSetup(true)
+      })
+      .catch(setError)
+  }, [completeSetup, settings])
+
+  return { completeSetup, error }
+}
+
+export default useInitWidget

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: 'loading',
+  history: new Set(['loading'])
 }
 
 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())
-  })
-}