app-tutor-ai-consumer 1.32.2 → 1.32.3

package/CHANGELOG.md

@@ -1,3 +1,5 @@
+## [1.32.3](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.32.2...v1.32.3) (2025-10-13)
+
 ## [1.32.2](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.32.1...v1.32.2) (2025-10-08)
 
 ### Bug Fixes

package/config/vitest/__mocks__/sparkie.tsx

@@ -4,7 +4,7 @@ import {
   SparkieMessageServiceMock,
   SparkieCursorServiceMock
 } from '@/src/modules/sparkie/__tests__/sparkie.mock'
-import MessageService from '@hotmart/sparkie/dist/MessageService'
+import MessageService from '@hotmart-org-ca/sparkie/dist/MessageService'
 
 vi.mock('@hotmart/sparkie', () => ({ default: SparkieMock }))
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-tutor-ai-consumer",
-  "version": "1.32.2",
+  "version": "1.32.3",
   "main": "index.js",
   "scripts": {
     "dev": "rspack serve --env=development --config config/rspack/rspack.config.js",
@@ -108,8 +108,8 @@
   "dependencies": {
     "@hot-observability-js/react": "~1.1.0",
     "@hotmart-org-ca/hot-observability-js": "~1.1.0",
+    "@hotmart-org-ca/sparkie": "~5.1.4",
     "@hotmart/event-agent-js": "~1.1.2",
-    "@hotmart/sparkie": "~5.1.0",
     "@optimizely/react-sdk": "~3.2.4",
     "@tanstack/query-sync-storage-persister": "~5.80.7",
     "@tanstack/react-query": "~5.80.6",

package/src/@types/index.d.ts

@@ -1,4 +1,4 @@
-import type { StartTutorWidgetProps } from '@/src/types'
+import type { StartTutorWidgetProps, WidgetInstance } from '@/src/types'
 
 export {}
 
@@ -13,7 +13,8 @@ declare global {
       elementId: StartTutorWidgetProps['elementId'],
       settings: StartTutorWidgetProps['settings']
     ) => Promise<void>
-    closeChatWidget: () => void
+    closeChatWidget: () => Promise<void>
+    __CHAT_WIDGET_INSTANCE__?: WidgetInstance
     TOKEN: string
   }
 }

package/src/config/tanstack/query-provider.tsx

@@ -1,12 +1,16 @@
+import type { QueryClient } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
 import type { PropsWithChildren } from 'react'
 
-import { persister, queryClient } from './query-client'
+import { persister } from './query-client'
 
-export type QueryProviderProps = PropsWithChildren<{ showDevTools?: boolean }>
+export type QueryProviderProps = PropsWithChildren<{
+  showDevTools?: boolean
+  queryClient: QueryClient
+}>
 
-function QueryProvider({ children, showDevTools = true }: QueryProviderProps) {
+function QueryProvider({ children, queryClient, showDevTools = true }: QueryProviderProps) {
   return (
     <PersistQueryClientProvider client={queryClient} persistOptions={{ persister }}>
       {children}

package/src/index.backup.tsx

@@ -0,0 +1,61 @@
+import './config/styles/global.css'
+import './config/styles/index.css'
+
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+
+import { initTheme } from '@/src/config/theme'
+import { version } from '../package.json'
+
+import { initLanguage } from './config/i18n'
+import { devMode, productionMode } from './lib/utils'
+import { Main } from './main'
+import { TutorWidgetEvents } from './modules/widget'
+import type { Theme, WidgetSettingProps } from './types'
+
+const loadMainStyles = () => {
+  const isProduction = productionMode
+  const bundlePath = !isProduction
+    ? `${process.env.BUNDLE_PATH}/`
+    : `${process.env.BUNDLE_PATH}/${process.env.APP_NAME}/_current/`
+
+  const cssPath = `${bundlePath}app-tutor-ai-consumer.css?v=${version}`
+
+  if (!document.querySelector(`link[href="${cssPath}"]`)) {
+    const linkElement = document.createElement('link')
+    linkElement.rel = 'stylesheet'
+    linkElement.href = cssPath
+    document.head.appendChild(linkElement)
+  }
+}
+
+window.startChatWidget = async (
+  elementId = 'tutor-chat-app-widget',
+  settings: WidgetSettingProps
+) => {
+  if (!devMode) {
+    loadMainStyles()
+  }
+
+  const rootElement = document.getElementById(elementId) as HTMLElement
+
+  if (!rootElement) return
+
+  rootElement.setAttribute('id', 'hotmart-app-tutor-ai-consumer-root')
+  const theme = (rootElement.getAttribute('data-theme') ?? 'dark') as Theme
+  const root = createRoot(rootElement)
+
+  await initLanguage(settings.locale)
+  initTheme(theme)
+
+  if (root) {
+    root.render(
+      <StrictMode>
+        <Main settings={{ ...settings, config: { ...settings.config, theme } }} />
+      </StrictMode>
+    )
+  }
+}
+
+window.closeChatWidget = () =>
+  Promise.resolve(TutorWidgetEvents['c3po-app-widget-close'].dispatch())

package/src/index.tsx

@@ -4,13 +4,14 @@ import './config/styles/index.css'
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 
+import { queryClient, QueryProvider } from '@/src/config/tanstack'
 import { initTheme } from '@/src/config/theme'
 import { version } from '../package.json'
 
 import { initLanguage } from './config/i18n'
 import { devMode, productionMode } from './lib/utils'
 import { Main } from './main'
-import { TutorWidgetEvents } from './modules/widget'
+import { SparkieService } from './modules/sparkie'
 import type { Theme, WidgetSettingProps } from './types'
 
 const loadMainStyles = () => {
@@ -33,28 +34,80 @@ window.startChatWidget = async (
   elementId = 'tutor-chat-app-widget',
   settings: WidgetSettingProps
 ) => {
+  if (window.__CHAT_WIDGET_INSTANCE__) {
+    await window.closeChatWidget()
+  }
+
   if (!devMode) {
     loadMainStyles()
   }
 
-  const rootElement = document.getElementById(elementId) as HTMLElement
+  const container = document.getElementById(elementId) as HTMLElement
 
-  if (!rootElement) return
+  if (!container) return
 
-  rootElement.setAttribute('id', 'hotmart-app-tutor-ai-consumer-root')
-  const theme = (rootElement.getAttribute('data-theme') ?? 'dark') as Theme
-  const root = createRoot(rootElement)
+  container.setAttribute('id', 'hotmart-app-tutor-ai-consumer-root')
+  const theme = (container.getAttribute('data-theme') ?? 'dark') as Theme
 
-  await initLanguage(settings.locale)
-  initTheme(theme)
+  const root = createRoot(container)
 
   if (root) {
+    initTheme(theme)
+    await initLanguage(settings.locale)
+
     root.render(
       <StrictMode>
-        <Main settings={{ ...settings, config: { ...settings.config, theme } }} />
+        <QueryProvider queryClient={queryClient} showDevTools={false}>
+          <Main settings={{ ...settings, config: { ...settings.config, theme } }} />
+        </QueryProvider>
       </StrictMode>
     )
+
+    window.__CHAT_WIDGET_INSTANCE__ = { root, container, queryClient }
   }
 }
 
-window.closeChatWidget = () => TutorWidgetEvents['c3po-app-widget-close'].dispatch()
+window.closeChatWidget = async () => {
+  const chatWidgetInstance = window.__CHAT_WIDGET_INSTANCE__
+
+  if (!chatWidgetInstance) return
+
+  const { root, container, queryClient } = chatWidgetInstance
+
+  try {
+    await queryClient.cancelQueries()
+  } catch (err) {
+    console.error('Error cancelling queries on widget close', err)
+  }
+
+  try {
+    root.unmount()
+  } catch (err) {
+    console.warn('Error unmounting widget root', err)
+  }
+
+  if (typeof queryClient.clear === 'function') {
+    try {
+      queryClient.clear()
+    } catch {
+      queryClient.getQueryCache().clear()
+      queryClient.getMutationCache().clear()
+    }
+  } else {
+    queryClient.getQueryCache().clear()
+    queryClient.getMutationCache().clear()
+  }
+
+  try {
+    container.remove()
+  } catch {
+    // ignore
+  }
+
+  try {
+    await SparkieService.destroySparkie()
+    window.__CHAT_WIDGET_INSTANCE__ = undefined
+  } catch (err) {
+    console.error('Error destroying Sparkie instance', err)
+  }
+}

package/src/lib/hooks/use-response-timeout/index.ts

@@ -0,0 +1 @@
+export { default as useResponseTimeout } from './use-response-timeout'

package/src/lib/hooks/use-response-timeout/use-response-timeout.tsx

@@ -0,0 +1,42 @@
+import { useCallback, useRef } from 'react'
+
+const FIVE_MINUTES = 5 * 60 * 1000
+
+function useResponseTimeout() {
+  const timeoutRef = useRef<NodeJS.Timeout>(null)
+  const isWaitingRef = useRef(false)
+
+  const startTimeout = useCallback((callback: () => void) => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current)
+
+    isWaitingRef.current = true
+
+    timeoutRef.current = setTimeout(() => {
+      callback()
+      isWaitingRef.current = false
+    }, FIVE_MINUTES)
+  }, [])
+
+  const reset = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+      timeoutRef.current = null
+    }
+    isWaitingRef.current = false
+  }, [])
+
+  const cleanup = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current)
+    }
+  }, [])
+
+  return {
+    startTimeout,
+    cleanup,
+    reset,
+    isWaiting: isWaitingRef.current
+  }
+}
+
+export default useResponseTimeout

package/src/modules/global-providers/global-providers.tsx

@@ -2,7 +2,6 @@ import { type PropsWithChildren, useEffect } from 'react'
 import { v4 } from 'uuid'
 
 import { OptimizelyProvider } from '@/src/config/optimizely'
-import { QueryProvider } from '@/src/config/tanstack'
 import { useWidgetSettingsAtom } from '@/src/modules/widget'
 import type { WidgetSettingProps } from '@/src/types'
 
@@ -21,11 +20,7 @@ function GlobalProviders({ children, settings }: GlobalProvidersProps) {
     setWidgetSettings(settings)
   }, [setWidgetSettings, settings])
 
-  return (
-    <OptimizelyProvider settings={settings}>
-      <QueryProvider>{children}</QueryProvider>
-    </OptimizelyProvider>
-  )
+  return <OptimizelyProvider settings={settings}>{children}</OptimizelyProvider>
 }
 
 export default GlobalProviders

package/src/modules/messages/__tests__/imessage-with-sender-data.builder.ts

@@ -1,4 +1,4 @@
-import type { MessageContent } from '@hotmart/sparkie/dist/MessageService'
+import type { MessageContent } from '@hotmart-org-ca/sparkie/dist/MessageService'
 
 import { chance } from '@/src/config/tests'
 import type { IMessageWithSenderData } from '../types'

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

@@ -1,10 +1,11 @@
 import { useCallback, useEffect, useMemo } from 'react'
-import type { InfiniteData } from '@tanstack/react-query'
+import type { InfiniteData, QueryClient } from '@tanstack/react-query'
 import { useQueryClient } from '@tanstack/react-query'
 import { produce } from 'immer'
 
 import { ComponentSource, DataHubService } from '@/src/config/datahub'
 import { ViewTutorAnswerMessageSchema } from '@/src/config/datahub/schemas/tutor'
+import { useResponseTimeout } from '@/src/lib/hooks/use-response-timeout'
 import { useUpdateCursor } from '@/src/modules/cursor/hooks'
 import { useGetProfile } from '@/src/modules/profile'
 import { SparkieService } from '@/src/modules/sparkie'
@@ -17,6 +18,59 @@ import { useMessagesMaxCount, useUnreadMessagesSetAtom } from '../../store'
 import type { FetchMessagesResponse, IMessageWithSenderData } from '../../types'
 import { getAllMessagesQuery } from '../use-infinite-get-messages'
 
+export type MessageReceivedProps = {
+  data: IMessageWithSenderData
+  queryClient: QueryClient
+  conversationId: string
+  profileId: string
+  limit: number
+  messageIsMineCallback?: (data: IMessageWithSenderData) => void
+  messageIsNotMineCallback?: (data: IMessageWithSenderData) => void
+  errorCallback?: (error: unknown) => void
+}
+
+const messageReceivedUtil = ({
+  queryClient,
+  data,
+  conversationId,
+  profileId,
+  limit,
+  messageIsMineCallback,
+  messageIsNotMineCallback,
+  errorCallback
+}: MessageReceivedProps) => {
+  try {
+    const messagesQueryConfig = getAllMessagesQuery({ conversationId, profileId, limit })
+    const queryData = queryClient.getQueryData<InfiniteData<FetchMessagesResponse>>(
+      messagesQueryConfig.queryKey
+    )
+
+    const idsList = new Set(
+      queryData?.pages.flatMap((items) => items.messages.map((msg) => msg.id))
+    )
+
+    if (idsList.has(data.id)) return
+
+    queryClient.setQueryData<InfiniteData<FetchMessagesResponse>>(
+      messagesQueryConfig.queryKey,
+      (oldData) =>
+        produce(oldData, (draft) => {
+          draft?.pages.at(-1)?.messages?.push(data)
+          return draft
+        })
+    )
+
+    const isMine = data.contactId === profileId
+
+    if (isMine) {
+      return messageIsMineCallback?.(data)
+    }
+    messageIsNotMineCallback?.(data)
+  } catch (error) {
+    errorCallback?.(error)
+  }
+}
+
 const useSubscribeMessageReceivedEvent = () => {
   const [settings] = useWidgetSettingsAtom()
   const [, setWidgetLoading] = useWidgetLoadingAtom()
@@ -26,75 +80,78 @@ const useSubscribeMessageReceivedEvent = () => {
   const useUpdateCursorMutation = useUpdateCursor()
   const limit = useMessagesMaxCount()
   const isAgentMode = useIsAgentParentAtomValue()
+  const { reset: resetLoadingTimeout, startTimeout } = useResponseTimeout()
 
   const conversationId = useMemo(() => String(settings?.conversationId), [settings?.conversationId])
   const profileId = useMemo(() => String(profileQuery?.data?.id), [profileQuery?.data?.id])
-  const messagesQueryConfig = useMemo(
-    () =>
-      getAllMessagesQuery({
-        conversationId,
-        profileId,
-        limit
-      }),
-    [conversationId, limit, profileId]
+
+  const messageIsMineCallback = useCallback(
+    (data: IMessageWithSenderData) => {
+      // The cursor should update only with my messages
+      useUpdateCursorMutation.mutate(data.conversationId)
+    },
+    [useUpdateCursorMutation]
   )
 
-  const messageReceived = useCallback(
+  const messageIsNotMineCallback = useCallback(
     (data: IMessageWithSenderData) => {
-      if (data.conversationId !== conversationId) return
-
-      const queryData = queryClient.getQueryData<InfiniteData<FetchMessagesResponse>>(
-        messagesQueryConfig.queryKey
-      )
-
-      const idsList = new Set(
-        queryData?.pages.flatMap((items) => items.messages.map((msg) => msg.id))
-      )
-
-      if (idsList.has(data.id)) return
-
-      queryClient.setQueryData<InfiniteData<FetchMessagesResponse>>(
-        messagesQueryConfig.queryKey,
-        (oldData) => {
-          return produce(oldData, (draft) => {
-            draft?.pages.at(-1)?.messages?.push(data)
-            return draft
-          })
-        }
-      )
-
-      const isMine = data.contactId === profileId
-
-      if (!isMine) {
-        DataHubService.sendEvent({
-          schema: new ViewTutorAnswerMessageSchema({
-            correlationId: data.metadata.correlationId,
-            messageId: data.id,
-            componentSource: isAgentMode
-              ? ComponentSource.PRODUCT_AGENT
-              : ComponentSource.HOTMART_TUTOR
-          })
+      setWidgetLoading(false)
+
+      DataHubService.sendEvent({
+        schema: new ViewTutorAnswerMessageSchema({
+          correlationId: data.metadata.correlationId,
+          messageId: data.id,
+          componentSource: isAgentMode
+            ? ComponentSource.PRODUCT_AGENT
+            : ComponentSource.HOTMART_TUTOR
         })
+      })
 
-        addUnreadMessagesToSet({ itemId: data.id })
-        setTimeout(() => setWidgetLoading(false), 100)
-      } else {
-        // The cursor should update only with my messages
-        useUpdateCursorMutation.mutate(data.conversationId)
+      addUnreadMessagesToSet({ itemId: data.id })
+    },
+    [addUnreadMessagesToSet, isAgentMode, setWidgetLoading]
+  )
+
+  const errorCallback = useCallback(
+    (error: unknown) => {
+      if (error) {
+        setWidgetLoading(false)
+        console.error(error)
+        throw new Error('Error getting realtime messages')
       }
     },
+    [setWidgetLoading]
+  )
+
+  const messageReceived = useCallback(
+    (data: IMessageWithSenderData) => {
+      if (data.conversationId === conversationId)
+        messageReceivedUtil({
+          queryClient,
+          data,
+          conversationId,
+          profileId,
+          limit,
+          messageIsMineCallback,
+          messageIsNotMineCallback,
+          errorCallback
+        })
+    },
     [
-      addUnreadMessagesToSet,
       conversationId,
-      isAgentMode,
-      messagesQueryConfig.queryKey,
+      errorCallback,
+      limit,
+      messageIsMineCallback,
+      messageIsNotMineCallback,
       profileId,
-      queryClient,
-      setWidgetLoading,
-      useUpdateCursorMutation
+      queryClient
     ]
   )
 
+  const startLoadingTimeout = useCallback(() => {
+    startTimeout(() => setWidgetLoading(false))
+  }, [setWidgetLoading, startTimeout])
+
   useEffect(() => {
     SparkieService.subscribeEvents({ messageReceived })
 
@@ -102,6 +159,14 @@ const useSubscribeMessageReceivedEvent = () => {
       SparkieService.removeEventSubscription({ messageReceived })
     }
   }, [messageReceived])
+
+  useEffect(() => {
+    startLoadingTimeout()
+
+    return () => {
+      resetLoadingTimeout()
+    }
+  }, [resetLoadingTimeout, startLoadingTimeout])
 }
 
 export default useSubscribeMessageReceivedEvent

package/src/modules/messages/service.direct.ts

@@ -1,4 +1,4 @@
-import type { Message } from '@hotmart/sparkie/dist/MessageService'
+import type { Message } from '@hotmart-org-ca/sparkie/dist/MessageService'
 
 import { api } from '@/src/config/request'
 

package/src/modules/messages/service.ts

@@ -1,4 +1,5 @@
-import type { Message } from '@hotmart/sparkie/dist/MessageService'
+import type { Message } from '@hotmart-org-ca/sparkie/dist/MessageService'
+import type MessageService from '@hotmart-org-ca/sparkie/dist/MessageService'
 
 import { ApiError } from '@/src/config/request'
 import { HttpCodes } from '@/src/lib/utils'
@@ -15,7 +16,7 @@ import type {
 } from './types'
 
 class MessagesService {
-  async getSparkieMessageService() {
+  async getSparkieMessageService(): Promise<MessageService> {
     try {
       const messageService = await SparkieService.getMessageService()
 

package/src/modules/messages/types.ts

@@ -2,7 +2,7 @@ import type {
   Message as SparkieMsg,
   MessageContent,
   SenderData
-} from '@hotmart/sparkie/dist/MessageService'
+} from '@hotmart-org-ca/sparkie/dist/MessageService'
 
 export type IMessage = SparkieMsg & {
   metadata: {

package/src/modules/messages/utils/set-messages-cache/utils.ts

@@ -1,4 +1,4 @@
-import type { Message } from '@hotmart/sparkie/dist/MessageService'
+import type { Message } from '@hotmart-org-ca/sparkie/dist/MessageService'
 import type { InfiniteData, QueryClient } from '@tanstack/react-query'
 import { produce } from 'immer'
 

package/src/modules/sparkie/service.ts

@@ -1,4 +1,4 @@
-import Sparkie from '@hotmart/sparkie'
+import Sparkie from '@hotmart-org-ca/sparkie'
 
 import { MSG_MAX_COUNT } from '../messages'
 
@@ -110,8 +110,7 @@ class SparkieService {
 
     while (attempt <= maxRetries) {
       try {
-        if (!token || !token.trim())
-          throw new Error('Invalid or missing token for Sparkie initialization')
+        if (!token?.trim()) throw new Error('Invalid or missing token for Sparkie initialization')
 
         const sparkie = this.sparkieInstance
         const service = await sparkie.init(token, { skipPresenceSetup })

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

@@ -1,21 +1,9 @@
-import { useEffect, useState } from 'react'
-
 import { useSubscribeMessageReceivedEvent } from '@/src/modules/messages/hooks'
 import { useSubscribeThreadClosedEvent } from '@/src/modules/thread/hooks'
 import { useListenToVisibilityEvents } from '../../hooks'
 import { useWidgetTabsAtom } from '../../store'
 import { WIDGET_TABS } from '../constants'
 
-// TODO: REMOVE
-const hotmartRumKey = 'app-tutor-ai-consumer::hotmart-rum::activate'
-const useSentryDebugger = () => {
-  const [logError] = useState(() => Boolean(window?.localStorage?.getItem?.(hotmartRumKey)))
-
-  useEffect(() => {
-    if (logError) throw new Error(hotmartRumKey)
-  }, [logError])
-}
-
 function WidgetContainer() {
   const [widgetTabs] = useWidgetTabsAtom()
 
@@ -23,8 +11,6 @@ function WidgetContainer() {
   useSubscribeThreadClosedEvent()
   useListenToVisibilityEvents()
 
-  useSentryDebugger()
-
   return (
     <div className='flex h-full flex-col items-center justify-stretch overflow-hidden'>
       {WIDGET_TABS[widgetTabs.currentTab]}

package/src/types.ts

@@ -1,3 +1,6 @@
+import type { QueryClient } from '@tanstack/react-query'
+import type { Root } from 'react-dom/client'
+
 import type { ILanguages } from './config/i18n'
 
 export type StartTutorWidgetProps = {
@@ -68,3 +71,9 @@ export interface ICustomEvent<T = object> {
   handler: (listener: EventListenerOrEventListenerObject) => () => void | Promise<void>
   dispatch: <D = unknown>(detail?: D) => void
 }
+
+export type WidgetInstance = {
+  root: Root
+  container: HTMLElement
+  queryClient: QueryClient
+}