app-tutor-ai-consumer 1.33.0 → 1.34.0

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

@@ -1,53 +1,45 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect } from 'react'
+import type { useStore } from 'jotai'
 
-import { useIsAgentParentAtomValue, useWidgetSettingsAtomValue } from '@/src/modules/widget'
 import { SparkieService } from '../..'
-import { useSparkieStateAtom } from '../../store'
+import { sparkieStateAtom } from '../../store'
 
-function useInitSparkie() {
-  const [isSuccess, setIsSuccess] = useState(false)
-  const settings = useWidgetSettingsAtomValue()
-  const [sparkieState, setSparkieState] = useSparkieStateAtom()
-  const isAgentMode = useIsAgentParentAtomValue()
+export type UseInitSparkieProps = {
+  hotmartToken: string
+  store?: ReturnType<typeof useStore>
+}
 
-  const init = useCallback(async () => {
-    if (!settings?.hotmartToken) return
+function useInitSparkie({ hotmartToken, store }: UseInitSparkieProps) {
+  const sparkieState = store?.get(sparkieStateAtom)
 
-    try {
-      setSparkieState('initializing')
-      await SparkieService.initSparkie({
-        token: settings?.hotmartToken,
-        skipPresenceSetup: true,
-        retryOptions: {
-          maxRetries: 5,
-          retryDelay: 2000,
-          backoffMultiplier: 1.5
-        }
-      })
-      await SparkieService.ensureInitialized()
-      setIsSuccess(true)
-      setSparkieState('initialized')
-    } catch {
-      setIsSuccess(false)
-      setSparkieState('failed')
+  const init = useCallback(async () => {
+    if (hotmartToken) {
+      try {
+        store?.set(sparkieStateAtom, 'initializing')
+        await SparkieService.initSparkie({
+          token: hotmartToken,
+          skipPresenceSetup: true,
+          retryOptions: {
+            maxRetries: 5,
+            retryDelay: 1000,
+            backoffMultiplier: 1.5
+          }
+        })
+        await SparkieService.ensureInitialized()
+        store?.set(sparkieStateAtom, 'initialized')
+      } catch {
+        store?.set(sparkieStateAtom, 'failed')
+      }
     }
-  }, [setSparkieState, settings?.hotmartToken])
+  }, [hotmartToken, store])
 
   const checkState = useCallback(() => {
-    if (!isAgentMode && sparkieState === 'idle') {
-      return init()
-    }
-
-    if (sparkieState === 'initialized') {
-      setIsSuccess(true)
-    }
-  }, [init, isAgentMode, sparkieState])
+    if (sparkieState === 'idle') return init()
+  }, [init, sparkieState])
 
   useEffect(() => {
     void checkState()
   }, [checkState])
-
-  return isSuccess
 }
 
 export default useInitSparkie

package/src/modules/sparkie/service.ts

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

package/src/modules/widget/__tests__/widget-settings-props.builder.ts

@@ -1,6 +1,6 @@
 import type { ILanguages } from '@/src/config/i18n'
 import { chance } from '@/src/config/tests'
-import type { User, WidgetSettingProps } from '@/src/types'
+import type { Theme, User, WidgetSettingProps } from '@/src/types'
 
 class WidgetSettingPropsBuilder implements WidgetSettingProps {
   hotmartToken: string
@@ -21,6 +21,19 @@ class WidgetSettingPropsBuilder implements WidgetSettingProps {
   classHashId?: string
   owner_id?: string
   current_media_codes?: string
+  config?:
+    | {
+        theme?: Theme
+        metadata?: {
+          parent?: 'AGENT' | 'TUTOR'
+          agentProductId?: number
+          agentName?: string
+          courseName?: string
+          source?: string
+          promptId?: string
+        }
+      }
+    | undefined
 
   constructor() {
     this.hotmartToken = chance.guid()
@@ -144,6 +157,12 @@ class WidgetSettingPropsBuilder implements WidgetSettingProps {
 
     return this
   }
+
+  withTheme(theme: Theme) {
+    this.config = { ...(this.config ?? {}), theme }
+
+    return this
+  }
 }
 
 export default WidgetSettingPropsBuilder

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

@@ -0,0 +1,19 @@
+import { useTranslation } from 'react-i18next'
+
+import { Icon } from '@/src/lib/components/icons'
+
+const AIDisclaimer = () => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='mt-4 flex w-full items-center gap-1 text-xs text-neutral-500'>
+      <p className='mb-0'>{t('ai_disclaimer.technology')}</p>
+
+      <Icon name='tutor-logo' className='inline-flex h-3 w-3 align-middle' />
+
+      <p className='mb-0'>{t('ai_disclaimer.hotmart_ai')}</p>
+    </div>
+  )
+}
+
+export default AIDisclaimer

package/src/modules/widget/components/ai-disclaimer/index.ts

@@ -0,0 +1 @@
+export { default as AIDisclaimer } from './ai-disclaimer'

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

@@ -1,7 +1,6 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
 import { useDecision } from '@optimizely/react-sdk'
 import { useInfiniteQuery } from '@tanstack/react-query'
-import { useTranslation } from 'react-i18next'
 
 import { useMediaQuery } from '@/src/lib/hooks'
 import { isTextEmpty } from '@/src/lib/utils/is-text-empty'
@@ -13,18 +12,16 @@ import { useGetProfile } from '@/src/modules/profile'
 import { TutorWidgetEvents } from '../../events'
 import { useSendViewTutorEvent } from '../../hooks/use-send-view-tutor-event'
 import {
-  useIsAgentParentAtomValue,
   useWidgetLoadingAtom,
   useWidgetSettingsAtomValue,
   useWidgetTabsValueAtom
 } from '../../store'
 import { testQuestionRegex } from '../../utils'
-import { GreetingsCard } from '../greetings-card'
+import { AIDisclaimer } from '../ai-disclaimer'
 import { WidgetHeader } from '../header'
 import { PageLayout } from '../page-layout'
 
 function ChatPage() {
-  const { t } = useTranslation()
   const chatInputRef = useRef<HTMLTextAreaElement>(null)
   const scrollerRef = useRef<HTMLDivElement>(null)
   const settings = useWidgetSettingsAtomValue()
@@ -37,7 +34,6 @@ function ChatPage() {
   const isMobile = useMediaQuery({ maxSize: 'md' })
   const hasSentInitialMessage = useRef(false)
   const [lexTutorInitialMessageFF] = useDecision('lex_tutor_new_widget_initial_message')
-  const isAgentMode = useIsAgentParentAtomValue()
 
   const conversationId = useMemo(() => settings?.conversationId, [settings?.conversationId])
   const profileId = useMemo(() => profileQuery.data?.id, [profileQuery.data?.id])
@@ -68,62 +64,6 @@ function ChatPage() {
     })
   }
 
-  const fetchNextPage = useMemo(() => messagesQuery.fetchNextPage, [messagesQuery.fetchNextPage])
-
-  const retry = useMemo(() => messagesQuery.refetch, [messagesQuery.refetch])
-
-  const handleShowMore = useCallback(async () => {
-    await fetchNextPage()
-  }, [fetchNextPage])
-
-  const errorConfig = useMemo(
-    () => ({
-      show: messagesQuery.isError,
-      message: messagesQuery.error?.message ?? '',
-      retry
-    }),
-    [messagesQuery.error?.message, messagesQuery.isError, retry]
-  )
-
-  const isDarkTheme = useMemo(() => settings?.config?.theme === 'dark', [settings?.config?.theme])
-
-  const authorName = useMemo(() => {
-    const username = typeof settings?.user?.name === 'string' ? settings?.user?.name : ''
-
-    return username?.split?.(' ')?.[0] || ''
-  }, [settings?.user?.name])
-
-  const name = useMemo(() => settings?.tutorName ?? t('general.name'), [settings?.tutorName, t])
-
-  const content = useMemo(() => {
-    if (!isAgentMode || (messagesQuery.data && Number(messagesQuery.data?.size) > 0))
-      return (
-        <MessagesContainer
-          ref={scrollerRef}
-          handleShowMore={handleShowMore}
-          showButton={messagesQuery.hasNextPage}
-          loading={messagesQuery.isFetchingNextPage}
-          error={errorConfig}>
-          {messagesQuery.data && <MessagesList messagesMap={messagesQuery.data} />}
-        </MessagesContainer>
-      )
-    return (
-      <div className='my-auto'>
-        <GreetingsCard author={authorName} tutorName={name} isDarkTheme={isDarkTheme} />
-      </div>
-    )
-  }, [
-    authorName,
-    errorConfig,
-    handleShowMore,
-    isAgentMode,
-    isDarkTheme,
-    messagesQuery.data,
-    messagesQuery.hasNextPage,
-    messagesQuery.isFetchingNextPage,
-    name
-  ])
-
   useEffect(() => {
     if (hasSentInitialMessage.current || !lexTutorInitialMessageFF.enabled) return
 
@@ -155,14 +95,20 @@ function ChatPage() {
   return (
     <PageLayout
       asideChild={
-        <ChatInput
-          name='new-chat-msg-input'
-          ref={chatInputRef}
-          onSend={widgetTabs.currentTab === 'chat' ? handleSendMessage : undefined}
-          loading={sendTextMessageMutation.isPending}
-          inputDisabled={messagesQuery?.isLoading}
-          buttonDisabled={widgetLoading || messagesQuery?.isLoading || !value.trim()}
-        />
+        <>
+          <ChatInput
+            name='new-chat-msg-input'
+            ref={chatInputRef}
+            onSend={widgetTabs.currentTab === 'chat' ? handleSendMessage : undefined}
+            loading={sendTextMessageMutation.isPending}
+            inputDisabled={messagesQuery?.isLoading}
+            buttonDisabled={widgetLoading || messagesQuery?.isLoading || !value.trim()}
+          />
+
+          <div className='mx-auto w-fit'>
+            <AIDisclaimer />
+          </div>
+        </>
       }>
       <div className='max-md:px-[1.125rem] max-md:pt-[1.125rem] md:px-5 md:pt-5'>
         <WidgetHeader
@@ -171,7 +117,20 @@ function ChatPage() {
           showContentWithoutMeta={!isMobile}
         />
       </div>
-      {content}
+      <MessagesContainer
+        ref={scrollerRef}
+        handleShowMore={async () => {
+          await messagesQuery.fetchNextPage()
+        }}
+        showButton={messagesQuery.hasNextPage}
+        loading={messagesQuery.isFetchingNextPage}
+        error={{
+          show: messagesQuery.isError,
+          message: messagesQuery.error?.message ?? '',
+          retry: () => void messagesQuery.refetch()
+        }}>
+        {messagesQuery.data && <MessagesList messagesMap={messagesQuery.data} />}
+      </MessagesContainer>
     </PageLayout>
   )
 }

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

@@ -1,9 +1,21 @@
+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()
 
@@ -11,6 +23,8 @@ 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/modules/widget/components/greetings-card/greetings-card.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
 
+import { useIsAgentParentAtomValue } from '../../store'
 import { AIAvatar } from '../ai-avatar'
 
 export type GreetingsCardProps = {
@@ -11,6 +12,7 @@ export type GreetingsCardProps = {
 
 function GreetingsCard({ author, tutorName, isDarkTheme = false }: GreetingsCardProps) {
   const { t } = useTranslation()
+  const isAgentMode = useIsAgentParentAtomValue()
 
   return (
     <div className='flex flex-col items-center justify-center'>
@@ -31,7 +33,12 @@ function GreetingsCard({ author, tutorName, isDarkTheme = false }: GreetingsCard
               'text-white': isDarkTheme,
               'text-gray-900': !isDarkTheme
             })}>
-            {t('general.greetings.firstMessage', { tutorName })}
+            {t(
+              isAgentMode
+                ? 'general.greetings.agentFirstMessage'
+                : 'general.greetings.firstMessage',
+              { tutorName }
+            )}
           </h3>
         </div>
         <p
@@ -39,7 +46,7 @@ function GreetingsCard({ author, tutorName, isDarkTheme = false }: GreetingsCard
             'text-gray-400': isDarkTheme,
             'text-neutral-600': !isDarkTheme
           })}>
-          {t('general.greetings.description')}
+          {t(isAgentMode ? 'general.greetings.agentDescription' : 'general.greetings.description')}
         </p>
       </div>
     </div>

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

@@ -1,25 +1,19 @@
 import { useCallback, useRef } from 'react'
 
 import { useRefEventListener } from '@/src/lib/hooks'
-import {
-  ChatInput,
-  MessageSkeleton,
-  useChatInputValueAtom
-} from '@/src/modules/messages/components'
+import { ChatInput, MessageSkeleton } from '@/src/modules/messages/components'
 import { WidgetHeader } from '../header'
 import { PageLayout } from '../page-layout'
 
-function WidgetLoadingPage() {
+function WidgetLoadingPage({ showHeader = true }: { showHeader?: boolean }) {
   const chatInputRef = useRef<HTMLTextAreaElement>(null)
-  const [, setChatInputValue] = useChatInputValueAtom()
 
-  const handler = useCallback(
-    (e: Event) => {
-      const target = e.target as HTMLTextAreaElement
-      setChatInputValue(target.value)
-    },
-    [setChatInputValue]
-  )
+  const handler = useCallback((e: Event) => {
+    const target = e.target as HTMLTextAreaElement
+    if (chatInputRef.current) {
+      chatInputRef.current.value = target.value
+    }
+  }, [])
 
   useRefEventListener<HTMLTextAreaElement>({
     config: {
@@ -33,7 +27,7 @@ function WidgetLoadingPage() {
     <PageLayout
       asideChild={<ChatInput name='new-chat-msg-input' ref={chatInputRef} loading={true} />}>
       <div className='flex h-full flex-col justify-start max-md:p-[1.125rem] md:p-5'>
-        <WidgetHeader enabledButtons={['close']} showContent={false} />
+        {showHeader && <WidgetHeader enabledButtons={['close']} showContent={false} />}
         <div className='mt-auto'>
           <MessageSkeleton />
         </div>

package/src/modules/widget/components/starter-page/starter-page-actions/starter-page-actions.spec.tsx

@@ -1,7 +1,7 @@
 import { useDecision } from '@optimizely/react-sdk'
 
 import { render, screen } from '@/src/config/tests'
-import { useInitSparkie } from '@/src/modules/sparkie/hooks'
+import { useSparkieStateAtomValue } from '@/src/modules/sparkie/store'
 import { useIsAgentParentAtomValue } from '../../../store'
 
 import WidgetStarterPageActions from './starter-page-actions'
@@ -11,9 +11,9 @@ vi.mock('../../../store', async (importActual) => ({
   useIsAgentParentAtomValue: vi.fn()
 }))
 
-vi.mock('@/src/modules/sparkie/hooks', async (importActual) => ({
+vi.mock('@/src/modules/sparkie/store', async (importActual) => ({
   ...(await importActual()),
-  useInitSparkie: vi.fn()
+  useSparkieStateAtomValue: vi.fn()
 }))
 
 vi.mock('@optimizely/react-sdk', async (importActual) => ({
@@ -28,7 +28,7 @@ describe('<WidgetStarterPageActions />', () => {
   beforeEach(() => {
     vi.mocked(useIsAgentParentAtomValue).mockReturnValue(false)
     vi.mocked(useDecision).mockReturnValue([{ enabled: false }] as never)
-    vi.mocked(useInitSparkie).mockReturnValue(true)
+    vi.mocked(useSparkieStateAtomValue).mockReturnValue('initialized')
   })
 
   test.each`

package/src/modules/widget/components/starter-page/starter-page-actions/starter-page-actions.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react'
 import { useDecision } from '@optimizely/react-sdk'
 
-import { useInitSparkie } from '@/src/modules/sparkie/hooks'
+import { useSparkieStateAtomValue } from '@/src/modules/sparkie/store'
 import { useIsAgentParentAtomValue, useWidgetSettingsAtomValue } from '../../../store'
 import { QuickActionButtons } from '../../quick-action-buttons'
 
@@ -9,9 +9,10 @@ function WidgetStarterPageActions({ send }: { send: (textContent?: string | null
   const [tutorQuickActionsFF] = useDecision('lex_tutor_quick_actions')
   const settings = useWidgetSettingsAtomValue()
   const isAgentMode = useIsAgentParentAtomValue()
-  const isSparkieReady = useInitSparkie()
+  const sparkieState = useSparkieStateAtomValue()
 
   const isDarkTheme = useMemo(() => settings?.config?.theme === 'dark', [settings?.config?.theme])
+  const isSparkieReady = useMemo(() => sparkieState === 'initialized', [sparkieState])
 
   const shouldNotRender = useMemo(
     () => [isAgentMode, !tutorQuickActionsFF?.enabled].some(Boolean),

package/src/modules/widget/components/starter-page/starter-page-content/starter-page-content.spec.tsx

@@ -1,36 +1,10 @@
 import { render, screen } from '@/src/config/tests'
-import { useSparkieStateAtomValue } from '@/src/modules/sparkie/store'
-import {
-  useIsAgentParentAtomValue,
-  useWidgetLoadingAtomValue,
-  useWidgetTabsAtom
-} from '../../../store'
 
 import WidgetStarterPageContent from './starter-page-content'
 
-vi.mock('../../../store', async (importActual) => ({
-  ...(await importActual()),
-  useIsAgentParentAtomValue: vi.fn(),
-  useWidgetLoadingAtomValue: vi.fn(),
-  useWidgetTabsAtom: vi.fn()
-}))
-
-vi.mock('@/src/modules/sparkie/store', () => ({
-  useSparkieStateAtomValue: vi.fn()
-}))
-
 describe('<WidgetStarterPageContent />', () => {
-  const widgetTabsMock = ['starter', vi.fn()]
-
   const renderComponent = () => render(<WidgetStarterPageContent />)
 
-  beforeEach(() => {
-    vi.mocked(useIsAgentParentAtomValue).mockReturnValue(false)
-    vi.mocked(useWidgetLoadingAtomValue).mockReturnValue(false)
-    vi.mocked(useSparkieStateAtomValue).mockReturnValue('idle')
-    vi.mocked(useWidgetTabsAtom).mockReturnValue(widgetTabsMock as never)
-  })
-
   it('should render greetings card when not in agent mode', () => {
     renderComponent()
 
@@ -39,24 +13,4 @@ describe('<WidgetStarterPageContent />', () => {
     expect(screen.getByText(/general.greetings.firstMessage/i)).toBeInTheDocument()
     expect(screen.getByText(/general.greetings.description/i)).toBeInTheDocument()
   })
-
-  it('should render the skeleton when in agent mode and is loading state', () => {
-    vi.mocked(useIsAgentParentAtomValue).mockReturnValueOnce(true)
-    vi.mocked(useWidgetLoadingAtomValue).mockReturnValueOnce(true)
-
-    renderComponent()
-
-    expect(screen.getByTestId('avatar-animation-icon')).toBeInTheDocument()
-  })
-
-  it('should redirect to chat page when in agent mode, widget is not loading and sparkie is initialized', () => {
-    vi.mocked(useSparkieStateAtomValue).mockReturnValue('initialized')
-    vi.mocked(useIsAgentParentAtomValue).mockReturnValueOnce(true)
-
-    const { container } = renderComponent()
-
-    expect(container).toBeEmptyDOMElement()
-    expect(widgetTabsMock[1]).toHaveBeenCalledOnce()
-    expect(widgetTabsMock[1]).toHaveBeenNthCalledWith(1, 'chat')
-  })
 })

package/src/modules/widget/components/starter-page/starter-page-content/starter-page-content.tsx

@@ -1,23 +1,12 @@
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { MessageSkeleton } from '@/src/modules/messages/components'
-import { useSparkieStateAtomValue } from '@/src/modules/sparkie/store'
-import {
-  useIsAgentParentAtomValue,
-  useWidgetLoadingAtomValue,
-  useWidgetSettingsAtomValue,
-  useWidgetTabsAtom
-} from '../../../store'
+import { useWidgetSettingsAtomValue } from '../../../store'
 import { GreetingsCard } from '../../greetings-card'
 
 function WidgetStarterPageContent() {
   const { t } = useTranslation()
   const settings = useWidgetSettingsAtomValue()
-  const isAgentMode = useIsAgentParentAtomValue()
-  const widgetLoading = useWidgetLoadingAtomValue()
-  const [, setWidgetTabs] = useWidgetTabsAtom()
-  const sparkieState = useSparkieStateAtomValue()
 
   const authorName = useMemo(() => {
     const username = typeof settings?.user?.name === 'string' ? settings?.user?.name : ''
@@ -29,24 +18,6 @@ function WidgetStarterPageContent() {
 
   const name = useMemo(() => settings?.tutorName ?? t('general.name'), [settings?.tutorName, t])
 
-  const shouldGoToChat = useMemo(
-    () => [isAgentMode, !widgetLoading, sparkieState === 'initialized'].every(Boolean),
-    [isAgentMode, sparkieState, widgetLoading]
-  )
-
-  if (shouldGoToChat) {
-    setWidgetTabs('chat')
-    return null
-  }
-
-  if (isAgentMode && (widgetLoading || sparkieState !== 'initialized')) {
-    return (
-      <div className='mt-auto'>
-        <MessageSkeleton />
-      </div>
-    )
-  }
-
   return (
     <div className='my-auto'>
       <GreetingsCard author={authorName} tutorName={name} isDarkTheme={isDarkTheme} />

package/src/modules/widget/components/starter-page/starter-page-header/starter-page-header.spec.tsx

@@ -1,18 +1,22 @@
 import { render, screen } from '@/src/config/tests'
-import { useInitSparkie } from '@/src/modules/sparkie/hooks/use-init-sparkie'
+import { useSparkieStateAtomValue } from '@/src/modules/sparkie/store'
 import { useIsAgentParentAtomValue } from '../../../store/widget-settings-config.atom'
 
 import WidgetStarterPageHeader from './starter-page-header'
 
 vi.mock('../../../store/widget-settings-config.atom')
-vi.mock('@/src/modules/sparkie/hooks/use-init-sparkie', () => ({ useInitSparkie: vi.fn() }))
+
+vi.mock('@/src/modules/sparkie/store', async (importActual) => ({
+  ...(await importActual()),
+  useSparkieStateAtomValue: vi.fn()
+}))
 
 describe('<WidgetStarterPageHeader />', () => {
   const renderComponent = () => render(<WidgetStarterPageHeader />)
 
   beforeEach(() => {
     vi.mocked(useIsAgentParentAtomValue).mockReturnValue(true)
-    vi.mocked(useInitSparkie).mockReturnValue(false)
+    vi.mocked(useSparkieStateAtomValue).mockReturnValue('initializing')
   })
 
   it('should return null when rendered as agent mode', () => {
@@ -31,7 +35,7 @@ describe('<WidgetStarterPageHeader />', () => {
 
   it('should render the archive button when isSparkieReady is true', () => {
     vi.mocked(useIsAgentParentAtomValue).mockReturnValue(false)
-    vi.mocked(useInitSparkie).mockReturnValue(true)
+    vi.mocked(useSparkieStateAtomValue).mockReturnValue('initialized')
     renderComponent()
 
     expect(

package/src/modules/widget/components/starter-page/starter-page-header/starter-page-header.tsx

@@ -3,32 +3,34 @@ import { useTranslation } from 'react-i18next'
 
 import type { ValidIconNames } from '@/src/lib/components/icons/icon-names'
 import { useMediaQuery } from '@/src/lib/hooks'
-import { useInitSparkie } from '@/src/modules/sparkie/hooks'
+import { useSparkieStateAtomValue } from '@/src/modules/sparkie/store'
 import { useIsAgentParentAtomValue, useWidgetSettingsAtomValue } from '../../../store'
 import { WidgetHeader } from '../../header'
 
+const getEnabledButtons = (isSparkieReady: boolean): ValidIconNames[] => {
+  const btns = ['close', 'info'] as ValidIconNames[]
+
+  return isSparkieReady ? [...btns, 'archive'] : btns
+}
+
 function WidgetStarterPageHeader() {
   const { t } = useTranslation()
   const settings = useWidgetSettingsAtomValue()
   const isAgentMode = useIsAgentParentAtomValue()
-  const isSparkieReady = useInitSparkie()
+  const sparkieState = useSparkieStateAtomValue()
   const isMobile = useMediaQuery({ maxSize: 'md' })
 
-  const enabledButtons = useMemo(() => {
-    const btns = ['close', 'info'] as ValidIconNames[]
-
-    if (isSparkieReady) {
-      btns.push('archive')
-    }
-
-    return btns
-  }, [isSparkieReady])
-
   const name = useMemo(() => settings?.tutorName ?? t('general.name'), [settings?.tutorName, t])
 
   if (isAgentMode) return null
 
-  return <WidgetHeader enabledButtons={enabledButtons} tutorName={name} showContent={isMobile} />
+  return (
+    <WidgetHeader
+      enabledButtons={getEnabledButtons(sparkieState === 'initialized')}
+      tutorName={name}
+      showContent={isMobile}
+    />
+  )
 }
 
 export default WidgetStarterPageHeader