app-tutor-ai-consumer 1.8.1 → 1.9.0

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+# [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)
 
 # [1.8.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.7.0...v1.8.0) (2025-07-14)

package/config/rspack/rspack.config.js

@@ -11,6 +11,7 @@ require('dotenv').config({
 })
 
 module.exports = async function (env) {
+  const standaloneMode = env?.local
   const productionMode = env?.production || env?.staging
   const releaseFullName = `app-tutor-ai-consumer_v${packageJSON.version}`
   const fileVersion = `${productionMode ? 'prod' : 'dev'}-${packageJSON?.version}`
@@ -23,7 +24,7 @@ module.exports = async function (env) {
    */
   const config = {
     mode: productionMode ? 'production' : 'development',
-    entry: productionMode ? paths.INDEX : paths.DEV_BOOTSTRAP,
+    entry: standaloneMode ? paths.DEV_BOOTSTRAP : paths.INDEX,
     ...(productionMode ? {} : require('./utils/devserver.config')),
     optimization: {
       usedExports: true,
@@ -159,17 +160,14 @@ module.exports = async function (env) {
       new rspack.DefinePlugin({
         'process.env.PROJECT_VERSION': JSON.stringify(packageJSON.version),
         'process.env.TARGET_ENV': JSON.stringify(process.env.NODE_ENV),
-        'process.env.RELEASE_FULL_NAME': JSON.stringify(releaseFullName)
+        'process.env.RELEASE_FULL_NAME': JSON.stringify(releaseFullName),
+        'process.env.STANDALONE_MODE': JSON.stringify(standaloneMode)
       }),
       new rspack.ProgressPlugin(),
       new TsCheckerRspackPlugin(),
       new rspack.HtmlRspackPlugin({
         template: path.resolve(paths.PUBLIC, 'index.html'),
         favicon: path.resolve(paths.PUBLIC, 'favicon.ico')
-      }),
-      new rspack.CssExtractRspackPlugin({
-        filename: productionMode ? `app-tutor-ai-consumer.css` : '[name].[contenthash].css',
-        chunkFilename: productionMode ? '[id].[contenthash].css' : '[id].[contenthash].css'
       })
     ].concat(await getEnvironmentPlugins(!productionMode)),
     watchOptions: {

package/config/rspack/utils/plugins.js

@@ -27,8 +27,8 @@ async function getEnvironmentPlugins(isDevelopment) {
   return [
     new rspack.EnvironmentPlugin(allEnvs),
     new rspack.CssExtractRspackPlugin({
-      filename: '[name].[contenthash].css',
-      chunkFilename: '[id]-app-tutor-ai-consumer.css'
+      filename: 'app-tutor-ai-consumer.css',
+      chunkFilename: '[id].[contenthash].css'
     }),
     new CompressionPlugin({
       algorithm: 'gzip'

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.1",
+  "version": "1.9.0",
   "main": "index.js",
   "scripts": {
     "dev": "rspack serve --env=development --config config/rspack/rspack.config.js",

package/src/development-bootstrap.tsx

@@ -5,10 +5,25 @@ import { v4 } from 'uuid'
 import { LANGUAGES } from './config/i18n'
 import { devMode } from './lib/utils'
 
+const rootId = 'app-tutor-ai-widget'
+
 if (devMode) {
   window.TOKEN = process.env.TOKEN ?? ''
   void (async () => {
-    await window.startChatWidget('c3po-app-widget', {
+    //  TODO: Remove after sidebar implementation
+    // Add Local popup css config
+    const root = document.getElementById('c3po-app-widget')
+    const container = document.createElement('div')
+
+    container.setAttribute('id', rootId)
+    container.setAttribute(
+      'class',
+      'bg-ai-dark fixed bottom-5 right-5 w-[27rem] h-[min(43rem,calc(100vh-2.5rem))] max-h-[calc(100vh-2.5rem)] z-10 rounded-[0.625rem] border border-neutral-800 shadow-lg overflow-hidden flex flex-col'
+    )
+
+    root?.appendChild(container)
+
+    await window.startChatWidget(rootId, {
       hotmartToken: window.TOKEN,
       locale: LANGUAGES.PT_BR,
       conversationId: '21506473-a93c-4b38-9c32-68a5ca37ce73', // OWNER

package/src/index.tsx

@@ -7,10 +7,10 @@ import { createRoot } from 'react-dom/client'
 import { initDayjs } from './config/dayjs'
 import { initLanguage } from './config/i18n'
 import { initAxios } from './config/request/api'
-import { productionMode } from './lib/utils'
+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 = () => {
@@ -33,30 +33,49 @@ window.startChatWidget = async (
   elementId = 'tutor-chat-app-widget',
   settings: WidgetSettingProps
 ) => {
-  loadMainStyles()
+  if (!devMode) {
+    loadMainStyles()
+  }
 
   const rootElement = document.getElementById(elementId) as HTMLElement
   const root = createRoot(rootElement)
 
-  await SparkieService.initSparkie({
-    token: settings.hotmartToken,
-    skipPresenceSetup: true,
-    retryOptions: {
-      maxRetries: 5,
-      retryDelay: 2000,
-      backoffMultiplier: 1.5
-    }
-  })
   initAxios(settings.hotmartToken)
   await initLanguage(settings.locale)
   await initDayjs(settings.locale)
 
-  if (root)
+  let isLoadingSparkie: boolean = false
+  let initSparkieError: unknown = null
+
+  try {
+    isLoadingSparkie = true
+    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) {
+    initSparkieError = error
+    console.error(error)
+    TutorWidgetEvents['tutor-app-widget-loaded'].dispatch({ detail: { isSuccess: false } })
+  } finally {
+    isLoadingSparkie = false
+  }
+
+  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/lib/contexts/index.ts

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

package/src/lib/contexts/shared-ref/index.ts

@@ -0,0 +1 @@
+export { default as createSharedRefContext } from './shared-ref'

package/src/lib/contexts/shared-ref/shared-ref.tsx

@@ -0,0 +1,26 @@
+import { createContext, useContext, useRef } from 'react'
+import type { PropsWithChildren, RefObject } from 'react'
+
+function createSharedRefContext<T extends HTMLElement>() {
+  const SharedRefContext = createContext<RefObject<T | null> | null>(null)
+
+  const SharedRefContextProvider = ({ children }: PropsWithChildren) => {
+    const sharedRef = useRef<T>(null)
+    return <SharedRefContext.Provider value={sharedRef}>{children}</SharedRefContext.Provider>
+  }
+
+  const useSharedRefContext = () => {
+    const ctx = useContext(SharedRefContext)
+
+    if (!ctx) throw new Error('SharedRefContext must be used inside a SharedRefContextProvider')
+    return ctx
+  }
+
+  return {
+    SharedRefContext,
+    SharedRefContextProvider,
+    useSharedRefContext
+  }
+}
+
+export default createSharedRefContext

package/src/main/main.spec.tsx

@@ -1,9 +1,12 @@
 import { chance, render, screen, waitFor } from '@/config/tests'
+import { useWidgetSettingsAtom } from '@/src/modules/widget/store/widget-settings.atom'
 import WidgetSettingPropsBuilder from '../modules/widget/__tests__/widget-settings-props.builder'
-import { useWidgetSettingsAtom } from '../modules/widget/store/widget-settings.atom'
 import { Main } from '.'
 
-vi.mock('../modules/widget/store/widget-settings.atom', () => ({ useWidgetSettingsAtom: vi.fn() }))
+vi.mock('@/src/modules/widget/store/widget-settings.atom', async (importOriginal) => ({
+  ...(await importOriginal()),
+  useWidgetSettingsAtom: vi.fn()
+}))
 
 describe('Main', () => {
   const defaultProps = new WidgetSettingPropsBuilder()
@@ -20,7 +23,7 @@ describe('Main', () => {
     renderComponent({ settings: props })
 
     await waitFor(() => {
-      expect(screen.getByText(/onboarding.description/i)).toBeInTheDocument()
+      expect(screen.getByText(/send/i)).toBeInTheDocument()
     })
   })
 })

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/global-providers/global-providers.tsx

@@ -1,4 +1,5 @@
 import { type PropsWithChildren, useEffect } from 'react'
+import { v4 } from 'uuid'
 
 import { OptimizelyProvider } from '@/src/config/optimizely'
 import { QueryProvider } from '@/src/config/tanstack'
@@ -13,6 +14,10 @@ function GlobalProviders({ children, settings }: GlobalProvidersProps) {
   useEffect(() => {
     if (!settings || !Object.keys(settings)?.length) return
 
+    if (!settings?.sessionId) {
+      settings.sessionId = v4()
+    }
+
     setWidgetSettings(settings)
   }, [setWidgetSettings, settings])
 

package/src/modules/messages/components/messages-list/messages-list.tsx

@@ -1,7 +1,8 @@
 import { lazy, useCallback, useRef } from 'react'
 import clsx from 'clsx'
+import { createPortal } from 'react-dom'
 
-import { useWidgetLoadingAtomValue } from '@/src/modules/widget'
+import { usePageLayoutMainRefContext, useWidgetLoadingAtomValue } from '@/src/modules/widget'
 import { useAllMessages, useManageScroll } from '../../hooks'
 import { useSkeletonRef } from '../../hooks/use-skeleton-ref'
 import { MessageItem } from '../message-item'
@@ -26,6 +27,7 @@ function MessagesList() {
   const widgetIsLoading = useWidgetLoadingAtomValue()
   const skeletonRef = useSkeletonRef()
   const { showScrollButton } = useManageScroll(scrollerRef)
+  const mainLayoutRef = usePageLayoutMainRefContext()
 
   const scrollToBottom = useCallback(() => {
     const { current: scroller } = scrollerRef
@@ -39,23 +41,21 @@ function MessagesList() {
   }, [])
 
   return (
-    <div ref={scrollerRef} className='relative mx-2 my-4 flex flex-col gap-2 overflow-auto px-4'>
+    <div ref={scrollerRef} className='mx-2 my-4 flex flex-col gap-2 overflow-auto px-4'>
       <MessageItemLoading show={messagesQuery.isFetching} />
 
       <MessageItemEndOfScroll
         show={!messagesQuery.isFetching && !messagesQuery.hasNextPage && allMessages.length > 0}
       />
-
-      <ScrollToBottomButton
-        ref={scrollToButtonRef}
-        top={Math.abs(
-          Number(scrollerRef.current?.clientHeight) -
-            Number(scrollToButtonRef.current?.clientHeight) -
-            24
+      {mainLayoutRef.current &&
+        createPortal(
+          <ScrollToBottomButton
+            ref={scrollToButtonRef}
+            show={showScrollButton}
+            onClick={scrollToBottom}
+          />,
+          mainLayoutRef.current
         )}
-        show={showScrollButton}
-        onClick={scrollToBottom}
-      />
 
       {allMessages?.map(([publishingDate, messages], i) => (
         <div key={i} className='flex flex-1 flex-col justify-center gap-6'>

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

@@ -153,7 +153,7 @@ class SparkieService {
     return false
   }
 
-  private async ensureInitialized(): Promise<void> {
+  async ensureInitialized(): Promise<void> {
     if (this.isInitialized) return
 
     switch (this.initializationState) {
@@ -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/components/page-layout/constants.tsx

@@ -0,0 +1,8 @@
+import { createSharedRefContext } from '@/src/lib/contexts'
+
+const { useSharedRefContext, SharedRefContext, SharedRefContextProvider } =
+  createSharedRefContext<HTMLDivElement>()
+
+export const usePageLayoutMainRefContext = useSharedRefContext
+export const PageLayoutMainRefContext = SharedRefContext
+export const PageLayoutMainRefContextProvider = SharedRefContextProvider

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

@@ -1,2 +1,3 @@
+export * from './constants'
 export * from './page-layout'
 export { default as PageLayout } from './page-layout'

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

@@ -1,18 +1,25 @@
+import { type PropsWithChildren, type ReactNode } from 'react'
 import clsx from 'clsx'
-import type { PropsWithChildren, ReactNode } from 'react'
+
+import { PageLayoutMainRefContextProvider, usePageLayoutMainRefContext } from './constants'
 
 export type PageLayoutProps = PropsWithChildren<{
   asideChild?: ReactNode
   className?: string
 }>
+
 function PageLayout({ asideChild, children, className }: PageLayoutProps) {
+  const mainLayoutRef = usePageLayoutMainRefContext()
+
   return (
     <div
       className={clsx(
         'grid-areas-[main_aside] grid h-full min-h-0 w-full grid-cols-1 grid-rows-[1fr_auto]',
         className
       )}>
-      <div className='grid-area-[main] flex min-h-0 flex-col overflow-y-auto overflow-x-hidden'>
+      <div
+        ref={mainLayoutRef}
+        className='grid-area-[main] relative flex min-h-0 flex-col overflow-y-auto overflow-x-hidden'>
         {children}
       </div>
       {asideChild && (
@@ -24,4 +31,12 @@ function PageLayout({ asideChild, children, className }: PageLayoutProps) {
   )
 }
 
-export default PageLayout
+function PageLayoutWrapper(props: PageLayoutProps) {
+  return (
+    <PageLayoutMainRefContextProvider>
+      <PageLayout {...props} />
+    </PageLayoutMainRefContextProvider>
+  )
+}
+
+export default PageLayoutWrapper

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

@@ -10,14 +10,13 @@ export interface IScrollToBottomButtonProps
 }
 
 const ScrollToBottomButton = forwardRef<HTMLButtonElement, IScrollToBottomButtonProps>(
-  ({ show = false, top = 0, onClick, className, ...props }, ref) => (
+  ({ show = false, onClick, className, ...props }, ref) => (
     <button
       {...props}
-      style={isNaN(Number(top)) ? undefined : { top }}
       ref={ref}
       className={clsx(
-        'fixed inset-x-1/2 flex size-7 cursor-pointer flex-col items-center justify-center rounded-full bg-neutral-600 text-sm text-neutral-50 outline-none transition-colors duration-300 ease-in hover:scale-110 hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2',
-        { 'pointer-events-none opacity-0': !show },
+        'absolute bottom-4 left-1/2 flex size-7 cursor-pointer flex-col items-center justify-center rounded-full bg-neutral-600 text-sm text-neutral-50 outline-none transition-colors duration-300 ease-in hover:scale-110 hover:bg-neutral-700 focus:outline-none focus:ring-neutral-500 focus:ring-offset-2 focus-visible:ring-2 active:ring-2',
+        { 'opacity-85': show, 'pointer-events-none opacity-0': !show },
         className
       )}
       onClick={onClick}

package/src/modules/widget/events.ts

@@ -1,24 +1,65 @@
 import type { ITutorWidgetEvent } from './types'
 
 export const TutorWidgetEventTypes = {
-  OPEN: 'tutor-app-widget-open',
-  CLOSE: 'tutor-app-widget-close'
+  OPEN: 'c3po-app-widget-open',
+  CLOSE: 'c3po-app-widget-close',
+  LOADED: 'tutor-app-widget-loaded'
 } as const
 
-const TutorWidgetEventsList: Array<ITutorWidgetEvent> = [
-  {
+const TutorWidgetEventsObject = {
+  [TutorWidgetEventTypes.OPEN]: {
     name: TutorWidgetEventTypes.OPEN,
-    handler: () => () => undefined,
-    dispatch: () => window.dispatchEvent(new CustomEvent(TutorWidgetEventTypes.OPEN))
-  },
-  {
+    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,
+    handler: (callback) => {
+      const listener: EventListener = () => {
+        void callback()
+      }
+
+      window.addEventListener(TutorWidgetEventTypes.CLOSE, listener)
+
+      return () => {
+        window.removeEventListener(TutorWidgetEventTypes.CLOSE, listener)
+      }
+    },
     dispatch: () => window.dispatchEvent(new CustomEvent(TutorWidgetEventTypes.CLOSE))
-  }
-] as const
+  } 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)
+      }
+    },
+    dispatch: (payload = { detail: { isSuccess: true } }) => {
+      window.dispatchEvent(new CustomEvent(TutorWidgetEventTypes.LOADED, payload))
+    }
+  } as ITutorWidgetEvent<{ isSuccess: boolean }>
+} 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: 'onboarding',
-  history: new Set(['onboarding'])
+  currentTab: 'starter',
+  history: new Set(['starter'])
 }
 
 export const widgetTabsAtom = atom<WidgetTabsProps>(INITIAL_PROPS)

package/src/modules/widget/types.ts

@@ -1,7 +1,7 @@
 import type { TutorWidgetEventTypes } from './events'
 
-export type ITutorWidgetEvent = {
+export type ITutorWidgetEvent<T = unknown> = {
   name: (typeof TutorWidgetEventTypes)[keyof typeof TutorWidgetEventTypes]
-  handler: (listener: EventListenerOrEventListenerObject) => () => void
-  dispatch: <T = unknown>(payload?: CustomEventInit<T>) => 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())
-  })
-}