app-tutor-ai-consumer 1.33.1 → 1.34.0

package/src/lib/components/icons/document.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 16C13.5312 16 14 15.5625 14 15V7H10.5C9.65625 7 9 6.34375 9 5.5V2H5C4.4375 2 4 2.46875 4 3V15C4 15.5625 4.4375 16 5 16H13ZM10.5 6H13.9688C13.9375 5.9375 13.9062 5.84375 13.8438 5.78125L10.2188 2.15625C10.1562 2.09375 10.0625 2.0625 10 2.03125V5.5C10 5.78125 10.2188 6 10.5 6ZM5 1H9.875C10.25 1 10.6562 1.1875 10.9375 1.46875L14.5312 5.0625C14.8125 5.34375 15 5.75 15 6.125V15C15 16.125 14.0938 17 13 17H5C3.875 17 3 16.125 3 15V3C3 1.90625 3.875 1 5 1ZM6.5 9H11.5C11.75 9 12 9.25 12 9.5C12 9.78125 11.75 10 11.5 10H6.5C6.21875 10 6 9.78125 6 9.5C6 9.25 6.21875 9 6.5 9ZM6.5 11H11.5C11.75 11 12 11.25 12 11.5C12 11.7812 11.75 12 11.5 12H6.5C6.21875 12 6 11.7812 6 11.5C6 11.25 6.21875 11 6.5 11ZM6.5 13H11.5C11.75 13 12 13.25 12 13.5C12 13.7812 11.75 14 11.5 14H6.5C6.21875 14 6 13.7812 6 13.5C6 13.25 6.21875 13 6.5 13Z" fill="#F5F3EF"/>
+</svg>

package/src/lib/components/icons/file.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 14.5V6.5H9.5C8.65625 6.5 8 5.84375 8 5V1.5H4C3.4375 1.5 3 1.96875 3 2.5V14.5C3 15.0625 3.4375 15.5 4 15.5H12C12.5312 15.5 13 15.0625 13 14.5ZM12.9688 5.5C12.9375 5.4375 12.9062 5.34375 12.8438 5.28125L9.21875 1.65625C9.15625 1.59375 9.0625 1.5625 9 1.53125V5C9 5.28125 9.21875 5.5 9.5 5.5H12.9688ZM2 2.5C2 1.40625 2.875 0.5 4 0.5H8.875C9.25 0.5 9.65625 0.6875 9.9375 0.96875L13.5312 4.5625C13.8125 4.84375 14 5.25 14 5.625V14.5C14 15.625 13.0938 16.5 12 16.5H4C2.875 16.5 2 15.625 2 14.5V2.5Z" fill="currentColor"/>
+</svg>

package/src/lib/components/icons/icon-names.d.ts

@@ -6,22 +6,29 @@ export type ValidIconNames =
   | 'arrow-left'
   | 'arrow-up'
   | 'book'
+  | 'retry'
   | 'chevron-down'
   | 'clone'
   | 'close'
   | 'copy-solid'
   | 'copy'
+  | 'document'
   | 'double-check'
   | 'expand'
+  | 'file'
   | 'gallery'
+  | 'image'
   | 'info'
   | 'interrogation'
   | 'like-solid'
   | 'like'
   | 'paste'
+  | 'pdf'
+  | 'plus'
   | 'send'
   | 'sparkle-tutor-light'
   | 'sparkle-tutor'
+  | 'spreadsheet'
   | 'stop'
   | 'tutor-logo'
   | 'warning'

package/src/lib/components/icons/image.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 2.5C1.4375 2.5 1 2.96875 1 3.5V10.8125L3.09375 8.6875C3.59375 8.21875 4.375 8.21875 4.875 8.6875L7 10.8125L11.0938 6.6875C11.5938 6.21875 12.375 6.21875 12.875 6.6875L15 8.8125V3.5C15 2.96875 14.5312 2.5 14 2.5H2ZM1 12.2188V13.5C1 14.0625 1.4375 14.5 2 14.5H3.28125L6.28125 11.5L4.15625 9.40625C4.0625 9.3125 3.90625 9.3125 3.8125 9.40625L1 12.2188ZM12.1562 7.40625C12.0625 7.3125 11.9062 7.3125 11.8125 7.40625L4.6875 14.5H14C14.5312 14.5 15 14.0625 15 13.5V10.2188L12.1562 7.40625ZM0 3.5C0 2.40625 0.875 1.5 2 1.5H14C15.0938 1.5 16 2.40625 16 3.5V13.5C16 14.625 15.0938 15.5 14 15.5H2C0.875 15.5 0 14.625 0 13.5V3.5ZM5 5C5 4.75 4.75 4.5 4.5 4.5C4.21875 4.5 4 4.75 4 5C4 5.28125 4.21875 5.5 4.5 5.5C4.75 5.5 5 5.28125 5 5ZM3 5C3 4.46875 3.28125 4 3.75 3.71875C4.1875 3.4375 4.78125 3.4375 5.25 3.71875C5.6875 4 6 4.46875 6 5C6 5.5625 5.6875 6.03125 5.25 6.3125C4.78125 6.59375 4.1875 6.59375 3.75 6.3125C3.28125 6.03125 3 5.5625 3 5Z" fill="currentColor"/>
+</svg>

package/src/lib/components/icons/pdf.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 15V7H10.5C9.65625 7 9 6.34375 9 5.5V2H5C4.4375 2 4 2.46875 4 3V15C4 15.5625 4.4375 16 5 16H13C13.5312 16 14 15.5625 14 15ZM13.9688 6C13.9375 5.9375 13.9062 5.84375 13.8438 5.78125L10.2188 2.15625C10.1562 2.09375 10.0625 2.0625 10 2.03125V5.5C10 5.78125 10.2188 6 10.5 6H13.9688ZM3 3C3 1.90625 3.875 1 5 1H9.875C10.25 1 10.6562 1.1875 10.9375 1.46875L14.5312 5.0625C14.8125 5.34375 15 5.75 15 6.125V15C15 16.125 14.0938 17 13 17H5C3.875 17 3 16.125 3 15V3Z" fill="#F5F3EF"/>
+</svg>

package/src/lib/components/icons/plus.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.5 1.17993V6.67993H13C13.25 6.67993 13.5 6.92993 13.5 7.17993C13.5 7.46118 13.25 7.67993 13 7.67993H7.5V13.1799C7.5 13.4612 7.25 13.6799 7 13.6799C6.71875 13.6799 6.5 13.4612 6.5 13.1799V7.67993H1C0.71875 7.67993 0.5 7.46118 0.5 7.17993C0.5 6.92993 0.71875 6.67993 1 6.67993H6.5V1.17993C6.5 0.929932 6.71875 0.679932 7 0.679932C7.25 0.679932 7.5 0.929932 7.5 1.17993Z" fill="currentColor"/>
+</svg>

package/src/lib/components/icons/retry.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="19" viewBox="0 0 14 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5312 4.1875C12.6719 4.1875 12.8125 4.32812 12.8125 4.46875V8.21875C12.8125 8.38281 12.6719 8.5 12.5312 8.5H8.78125C8.61719 8.5 8.5 8.38281 8.5 8.21875V7.98438C8.5 7.84375 8.61719 7.70312 8.78125 7.70312H11.4531C10.6094 6.10938 8.92188 4.98438 7 4.98438C4.21094 4.98438 1.98438 7.25781 1.98438 10C1.98438 12.7891 4.23438 15.0156 7 15.0156C8.28906 15.0156 9.46094 14.5469 10.3516 13.75C10.4453 13.6328 10.6328 13.6562 10.7266 13.75L10.8906 13.9141C11.0078 14.0312 11.0078 14.2188 10.8906 14.3359C9.85938 15.25 8.47656 15.8125 7 15.8125C3.78906 15.8125 1.1875 13.2344 1.1875 10.0234C1.16406 6.83594 3.76562 4.21094 6.97656 4.21094C9.10938 4.1875 10.9844 5.35938 12.0156 7.07031V4.46875C12.0156 4.32812 12.1328 4.1875 12.2969 4.1875H12.5312Z" fill="currentColor"/>
+</svg>

package/src/lib/components/icons/spreadsheet.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 3C2.4375 3 2 3.46875 2 4V6H16V4C16 3.46875 15.5312 3 15 3H3ZM2 7V10.5H8.5V7H2ZM9.5 7V10.5H16V7H9.5ZM8.5 11.5H2V14C2 14.5625 2.4375 15 3 15H8.5V11.5ZM9.5 15H15C15.5312 15 16 14.5625 16 14V11.5H9.5V15ZM1 4C1 2.90625 1.875 2 3 2H15C16.0938 2 17 2.90625 17 4V14C17 15.125 16.0938 16 15 16H3C1.875 16 1 15.125 1 14V4Z" fill="#F5F3EF"/>
+</svg>

package/src/lib/components/index.ts

@@ -1,4 +1,5 @@
 export * from './button'
+export * from './dropdown-actions'
 export * from './errors'
 export * from './horizontal-draggable-scroll'
 export * from './icons'

package/src/lib/components/markdownrenderer/markdownrenderer.tsx

@@ -71,9 +71,7 @@ const mdComponents: Partial<Components> = {
   },
   blockquote({ children, ...props }) {
     return (
-      <blockquote
-        className='my-2 border-l-4 border-primary-500 pl-4 italic text-neutral-100'
-        {...props}>
+      <blockquote className='my-2 border-l-4 border-primary-500 pl-4 italic' {...props}>
         {children}
       </blockquote>
     )

package/src/lib/hooks/index.ts

@@ -1,3 +1,4 @@
+export * from './use-click-outside'
 export * from './use-intersection-observer-reverse-scroll'
 export * from './use-media-query'
 export * from './use-ref-client-height'

package/src/lib/hooks/use-chat-file-upload/constants.ts

@@ -0,0 +1,11 @@
+export const FILE_TYPES = {
+  document: ['.doc', '.docx', '.txt'],
+  spreadsheet: ['.xls', '.xlsx', '.csv'],
+  pdf: ['.pdf'],
+  image: ['.jpg', '.jpeg', '.png']
+} as const
+
+export const FILE_TYPES_KEYS = {
+  DOCUMENT: 'document',
+  IMAGE: 'image'
+} as const

package/src/lib/hooks/use-chat-file-upload/index.ts

@@ -0,0 +1 @@
+export { useChatFileUpload } from './use-chat-file-upload'

package/src/lib/hooks/use-chat-file-upload/types.ts

@@ -0,0 +1,14 @@
+export type FileType = 'document' | 'image'
+
+export type SelectedFile = {
+  file: File
+  type: FileType
+  name: string
+  size: number
+  previewUrl?: string
+}
+
+export type UseFileUploadReturn = {
+  selectedFile: SelectedFile | null
+  handleSelectFile: (file: File, type: FileType) => void
+}

package/src/lib/hooks/use-chat-file-upload/use-chat-file-upload.spec.ts

@@ -0,0 +1,59 @@
+import { act, renderHook } from '@/src/config/tests'
+
+import { useChatFileUpload } from './use-chat-file-upload'
+
+describe('useChatFileUpload', () => {
+  beforeEach(() => {
+    global.URL.createObjectURL = vi.fn(() => 'blob:mock-url')
+  })
+
+  afterEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('should initialize with default values', () => {
+    const { result } = renderHook(() => useChatFileUpload())
+
+    expect(result.current.selectedFile).toBeNull()
+  })
+
+  describe('when selecting a document file', () => {
+    it('should store the file with correct properties', () => {
+      const { result } = renderHook(() => useChatFileUpload())
+
+      const mockFile = new File(['content'], 'document.pdf', { type: 'application/pdf' })
+
+      act(() => {
+        result.current.handleSelectFile(mockFile, 'document')
+      })
+
+      expect(result.current.selectedFile).toEqual({
+        file: mockFile,
+        type: 'document',
+        name: 'document.pdf',
+        size: mockFile.size
+      })
+    })
+  })
+
+  describe('when selecting an image file', () => {
+    it('should create a preview URL', () => {
+      const { result } = renderHook(() => useChatFileUpload())
+
+      const mockImage = new File(['image'], 'photo.jpg', { type: 'image/jpeg' })
+
+      act(() => {
+        result.current.handleSelectFile(mockImage, 'image')
+      })
+
+      expect(result.current.selectedFile).toEqual({
+        file: mockImage,
+        type: 'image',
+        name: 'photo.jpg',
+        size: mockImage.size,
+        previewUrl: 'blob:mock-url'
+      })
+      expect(global.URL.createObjectURL).toHaveBeenCalledWith(mockImage)
+    })
+  })
+})

package/src/lib/hooks/use-chat-file-upload/use-chat-file-upload.ts

@@ -0,0 +1,28 @@
+import { useState } from 'react'
+
+import { FILE_TYPES_KEYS } from './constants'
+import type { FileType, SelectedFile, UseFileUploadReturn } from './types'
+
+export function useChatFileUpload(): UseFileUploadReturn {
+  const [selectedFile, setSelectedFile] = useState<SelectedFile | null>(null)
+
+  const handleSelectFile = (file: File, type: FileType) => {
+    const newFile: SelectedFile = {
+      file,
+      type,
+      name: file.name,
+      size: file.size
+    }
+
+    if (type === FILE_TYPES_KEYS.IMAGE) {
+      newFile.previewUrl = URL.createObjectURL(file)
+    }
+
+    setSelectedFile(newFile)
+  }
+
+  return {
+    selectedFile,
+    handleSelectFile
+  }
+}

package/src/lib/hooks/use-click-outside/index.ts

@@ -0,0 +1 @@
+export { default as useClickOutside } from './use-click-outside'

package/src/lib/hooks/use-click-outside/use-click-outside.tsx

@@ -0,0 +1,23 @@
+import { type RefObject, useEffect } from 'react'
+
+function useClickOutside(
+  ref: RefObject<HTMLElement | null>,
+  onClickOutside: (event: MouseEvent | TouchEvent) => void
+) {
+  useEffect(() => {
+    const listener = (event: MouseEvent | TouchEvent) => {
+      if (!ref.current || ref.current.contains(event.target as Node)) {
+        return
+      }
+      onClickOutside(event)
+    }
+    document.addEventListener('mousedown', listener)
+    document.addEventListener('touchstart', listener)
+    return () => {
+      document.removeEventListener('mousedown', listener)
+      document.removeEventListener('touchstart', listener)
+    }
+  }, [ref, onClickOutside])
+}
+
+export default useClickOutside

package/src/lib/hooks/use-click-outside/useClickOutside.spec.ts

@@ -0,0 +1,102 @@
+import { fireEvent } from '@testing-library/react'
+
+import { renderHook } from '@/src/config/tests'
+
+import useClickOutside from './use-click-outside'
+
+describe('useClickOutside', () => {
+  const mockOnClickOutside = vi.fn()
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  describe('when clicking outside the referenced element', () => {
+    it('should call onClickOutside', () => {
+      const ref = { current: document.createElement('div') }
+      document.body.appendChild(ref.current)
+
+      renderHook(() => useClickOutside(ref, mockOnClickOutside))
+
+      fireEvent.mouseDown(document.body)
+
+      expect(mockOnClickOutside).toHaveBeenCalledTimes(1)
+    })
+  })
+
+  describe('when clicking inside the referenced element', () => {
+    it('should not call onClickOutside', () => {
+      const ref = { current: document.createElement('div') }
+      document.body.appendChild(ref.current)
+
+      renderHook(() => useClickOutside(ref, mockOnClickOutside))
+
+      fireEvent.mouseDown(ref.current)
+
+      expect(mockOnClickOutside).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('when ref is null', () => {
+    it('should not call onClickOutside', () => {
+      const ref = { current: null }
+
+      renderHook(() => useClickOutside(ref, mockOnClickOutside))
+
+      fireEvent.mouseDown(document.body)
+
+      expect(mockOnClickOutside).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('when ref is undefined', () => {
+    it('should not call onClickOutside', () => {
+      const ref = { current: null }
+
+      renderHook(() => useClickOutside(ref, mockOnClickOutside))
+
+      fireEvent.mouseDown(document.body)
+
+      expect(mockOnClickOutside).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('touch events', () => {
+    it('should call onClickOutside on touchstart outside element', () => {
+      const ref = { current: document.createElement('div') }
+      document.body.appendChild(ref.current)
+
+      renderHook(() => useClickOutside(ref, mockOnClickOutside))
+
+      fireEvent.touchStart(document.body)
+
+      expect(mockOnClickOutside).toHaveBeenCalledTimes(1)
+    })
+
+    it('should not call onClickOutside on touchstart inside element', () => {
+      const ref = { current: document.createElement('div') }
+      document.body.appendChild(ref.current)
+
+      renderHook(() => useClickOutside(ref, mockOnClickOutside))
+
+      fireEvent.touchStart(ref.current)
+
+      expect(mockOnClickOutside).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('cleanup', () => {
+    it('should remove event listeners on unmount', () => {
+      const removeEventListenerSpy = vi.spyOn(document, 'removeEventListener')
+      const ref = { current: document.createElement('div') }
+      document.body.appendChild(ref.current)
+
+      const { unmount } = renderHook(() => useClickOutside(ref, mockOnClickOutside))
+
+      unmount()
+
+      expect(removeEventListenerSpy).toHaveBeenCalledWith('mousedown', expect.any(Function))
+      expect(removeEventListenerSpy).toHaveBeenCalledWith('touchstart', expect.any(Function))
+    })
+  })
+})

package/src/lib/utils/index.ts

@@ -2,6 +2,7 @@ export * from './constants'
 export * from './copy-text-to-clipboard'
 export * from './extract-text-from-react-nodes'
 export { default as HttpCodes } from './http-codes'
+export * from './is-theme-dark'
 export * from './languages'
 export * from './message-types'
 export * from './toast'

package/src/lib/utils/is-theme-dark.ts

@@ -0,0 +1,21 @@
+import type { Theme } from '@/src/types'
+
+export function isThemeDark() {
+  if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    return true
+  }
+
+  return false
+}
+
+export const getTheme = (theme?: Theme): Theme => {
+  if (theme) return theme
+
+  const container = document.getElementById('hotmart-app-tutor-ai-consumer-root')
+
+  const newTheme = container?.getAttribute('data-theme')
+
+  if (newTheme) return newTheme as Theme
+
+  return isThemeDark() ? 'dark' : 'light'
+}

package/src/main/hooks/use-initial-store/index.ts

@@ -0,0 +1 @@
+export { default as useInitialStore } from './use-initial-store'

package/src/main/hooks/use-initial-store/use-initial-store.tsx

@@ -0,0 +1,64 @@
+import { useMemo } from 'react'
+import { produce } from 'immer'
+import { useStore } from 'jotai'
+import { useHydrateAtoms } from 'jotai/utils'
+import { v4 } from 'uuid'
+
+import { getTheme } from '@/src/lib/utils'
+import { MSG_MAX_COUNT } from '@/src/modules/messages'
+import { messagesMaxCountAtom } from '@/src/modules/messages/store'
+import type { WidgetTabsProps } from '@/src/modules/widget'
+import {
+  widgetSettingsAtom,
+  widgetSettingsConfigAgentParentAtom,
+  widgetTabsAtom
+} from '@/src/modules/widget'
+import type { WidgetSettingProps } from '@/src/types'
+
+const getDefaultSettings = (settings: WidgetSettingProps) => {
+  return produce(settings, (draft) => {
+    draft.config = { ...draft.config, theme: getTheme(draft.config?.theme) }
+
+    draft.sessionId = settings?.sessionId ?? v4()
+
+    return draft
+  })
+}
+
+export type UseInitialStoreProps = { settings: WidgetSettingProps }
+
+const useInitialStore = ({ settings }: UseInitialStoreProps) => {
+  const store = useStore()
+
+  const initialTab: WidgetTabsProps = useMemo(() => {
+    const isAgentMode = settings.config?.metadata?.parent === 'AGENT'
+
+    if (isAgentMode)
+      return {
+        currentTab: 'loading',
+        history: new Set(['loading'])
+      }
+
+    return {
+      currentTab: 'starter',
+      history: new Set(['starter'])
+    }
+  }, [settings.config?.metadata?.parent])
+
+  const isAgentMode = useMemo(
+    () => settings?.config?.metadata?.parent === 'AGENT',
+    [settings?.config?.metadata?.parent]
+  )
+
+  useHydrateAtoms(
+    [
+      [widgetSettingsAtom, getDefaultSettings(settings)],
+      [messagesMaxCountAtom, MSG_MAX_COUNT],
+      [widgetTabsAtom, initialTab],
+      [widgetSettingsConfigAgentParentAtom, isAgentMode]
+    ],
+    { store }
+  )
+}
+
+export default useInitialStore

package/src/main/hooks/use-initial-tab/index.ts

@@ -0,0 +1 @@
+export { default as useInitialTab } from './use-initial-tab'

package/src/main/hooks/use-initial-tab/use-initial-tab.tsx

@@ -0,0 +1,84 @@
+import { useEffect, useMemo, useRef } from 'react'
+
+import { useSuspenseMessages } from '@/src/modules/messages/hooks/use-suspense-messages'
+import { useSparkieStateAtomValue } from '@/src/modules/sparkie/store'
+import { useWidgetLoadingAtom, useWidgetTabsAtom } from '@/src/modules/widget'
+import type { MainProps } from '../../types'
+
+function useInitialTab({ settings }: MainProps) {
+  const [, setTab] = useWidgetTabsAtom()
+  const [, setWidgetLoading] = useWidgetLoadingAtom()
+  const sparkieState = useSparkieStateAtomValue()
+
+  const suspenseMessagesQuery = useSuspenseMessages({ conversationId: settings.conversationId })
+
+  const isAgentMode = useMemo(
+    () => settings.config?.metadata?.parent === 'AGENT',
+    [settings.config?.metadata?.parent]
+  )
+
+  const msgCount = useMemo(
+    () => Number(suspenseMessagesQuery.data.size),
+    [suspenseMessagesQuery.data.size]
+  )
+
+  const hasUserMessageWithoutResponse = useMemo(() => {
+    if (!isAgentMode || !suspenseMessagesQuery.data || msgCount === 0) return false
+
+    const allMessages = Array.from(suspenseMessagesQuery.data.values()).flat()
+    const userMessages = allMessages.filter((msg) => msg.metadata.author === 'user')
+    const aiMessages = allMessages.filter((msg) => msg.metadata.author !== 'user')
+
+    return userMessages.length > aiMessages.length && aiMessages.length === 0
+  }, [isAgentMode, suspenseMessagesQuery.data, msgCount])
+
+  const showStarterPage = useMemo(
+    () => !isAgentMode && sparkieState === 'initialized' && msgCount === 0,
+    [isAgentMode, sparkieState, msgCount]
+  )
+
+  const showChatPage = useMemo(
+    () => isAgentMode && sparkieState === 'initialized',
+    [isAgentMode, sparkieState]
+  )
+
+  const showErrorPage = useMemo(
+    () => suspenseMessagesQuery.isError,
+    [suspenseMessagesQuery.isError]
+  )
+
+  useEffect(() => {
+    if (showErrorPage) return setTab('error')
+
+    if (showStarterPage) return setTab('starter')
+
+    if (showChatPage) return setTab('chat')
+  }, [setTab, showChatPage, showErrorPage, showStarterPage])
+
+  const loadingTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+
+  useEffect(() => {
+    if (hasUserMessageWithoutResponse && showChatPage) {
+      setWidgetLoading(true)
+
+      loadingTimeoutRef.current = setTimeout(() => {
+        setWidgetLoading(false)
+        setTab('error')
+      }, 60000)
+    } else {
+      if (loadingTimeoutRef.current) {
+        clearTimeout(loadingTimeoutRef.current)
+        loadingTimeoutRef.current = null
+      }
+    }
+
+    return () => {
+      if (loadingTimeoutRef.current) {
+        clearTimeout(loadingTimeoutRef.current)
+        loadingTimeoutRef.current = null
+      }
+    }
+  }, [hasUserMessageWithoutResponse, showChatPage, setWidgetLoading, setTab])
+}
+
+export default useInitialTab

package/src/main/index.ts

@@ -1 +1,2 @@
 export { default as Main } from './main'
+export * from './types'

package/src/main/main-content.tsx

@@ -0,0 +1,14 @@
+import { useAppLang } from '../config/i18n'
+import { WidgetContainer } from '../modules/widget'
+
+import { useInitialTab } from './hooks/use-initial-tab'
+import type { MainProps } from './types'
+
+function MainContent({ settings }: MainProps) {
+  useAppLang(settings.locale)
+  useInitialTab({ settings })
+
+  return <WidgetContainer />
+}
+
+export default MainContent

package/src/main/main-wrapper.tsx

@@ -0,0 +1,16 @@
+import { useStore } from 'jotai'
+
+import { useInitSparkie } from '../modules/sparkie/hooks'
+
+import MainContent from './main-content'
+import type { MainProps } from './types'
+
+function MainWrapper({ settings }: MainProps) {
+  const store = useStore()
+
+  useInitSparkie({ hotmartToken: settings.hotmartToken, store })
+
+  return <MainContent settings={settings} />
+}
+
+export default MainWrapper

package/src/main/main.spec.tsx

@@ -9,7 +9,7 @@ vi.mock('@/src/modules/widget/store/widget-settings.atom', async (importOriginal
 }))
 
 describe('Main', () => {
-  const defaultProps = new WidgetSettingPropsBuilder()
+  const defaultProps = JSON.parse(JSON.stringify(new WidgetSettingPropsBuilder().withTheme('dark')))
   const renderComponent = (props = { settings: defaultProps }) => render(<Main {...props} />)
 
   beforeEach(() => {
@@ -17,8 +17,10 @@ describe('Main', () => {
   })
 
   it('should render without errors', async () => {
-    const props = new WidgetSettingPropsBuilder().withTutorName(chance.name())
-    vi.mocked(useWidgetSettingsAtom).mockReturnValue([props, vi.fn()])
+    const props = JSON.parse(
+      JSON.stringify(new WidgetSettingPropsBuilder().withTheme('dark').withTutorName(chance.name()))
+    )
+    vi.mocked(useWidgetSettingsAtom).mockReturnValue([props, vi.fn()] as never)
 
     renderComponent({ settings: props })
 

package/src/main/main.tsx

@@ -1,27 +1,18 @@
 import '@/config/styles/index.css'
 
-import { ErrorBoundary, GenericError } from '@/src/lib/components/errors'
-import { useAppLang } from '../config/i18n'
 import { GlobalProviders } from '../modules/global-providers'
-import { WidgetContainer } from '../modules/widget'
-import { useInitWidget, useListenToThemeChangeEvent } from '../modules/widget/hooks'
-import type { WidgetSettingProps } from '../types'
 
-export type MainProps = {
-  settings: WidgetSettingProps
-}
+import { useInitialStore } from './hooks/use-initial-store'
+import MainWrapper from './main-wrapper'
+import type { MainProps } from './types'
 
 function Main({ settings }: MainProps) {
-  useInitWidget(settings)
-  useAppLang(settings.locale)
-  useListenToThemeChangeEvent()
+  useInitialStore({ settings })
 
   return (
-    <ErrorBoundary fallback={<GenericError isDarkMode={settings.config?.theme === 'dark'} />}>
-      <GlobalProviders settings={settings}>
-        <WidgetContainer />
-      </GlobalProviders>
-    </ErrorBoundary>
+    <GlobalProviders settings={settings}>
+      <MainWrapper settings={settings} />
+    </GlobalProviders>
   )
 }
 

package/src/main/types.ts

@@ -0,0 +1,5 @@
+import type { WidgetSettingProps } from '../types'
+
+export type MainProps = {
+  settings: WidgetSettingProps
+}