app-tutor-ai-consumer 1.33.0 → 1.34.0

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
+}

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

@@ -1,25 +1,11 @@
-import { type PropsWithChildren, useEffect } from 'react'
-import { v4 } from 'uuid'
+import { type PropsWithChildren } from 'react'
 
 import { OptimizelyProvider } from '@/src/config/optimizely'
-import { useWidgetSettingsAtom } from '@/src/modules/widget'
 import type { WidgetSettingProps } from '@/src/types'
 
 export type GlobalProvidersProps = PropsWithChildren<{ settings: WidgetSettingProps }>
 
 function GlobalProviders({ children, settings }: GlobalProvidersProps) {
-  const [, setWidgetSettings] = useWidgetSettingsAtom()
-
-  useEffect(() => {
-    if (!settings || !Object.keys(settings)?.length) return
-
-    if (!settings?.sessionId) {
-      settings.sessionId = v4()
-    }
-
-    setWidgetSettings(settings)
-  }, [setWidgetSettings, settings])
-
   return <OptimizelyProvider settings={settings}>{children}</OptimizelyProvider>
 }
 

package/src/modules/messages/__tests__/signed-urls.builder.ts

@@ -0,0 +1,42 @@
+import { chance } from '@/src/config/tests'
+import type { IGetSignedUrlsResponse } from '../types'
+
+class SignedUrlsResponseBuilder implements IGetSignedUrlsResponse {
+  uploadUrl: string
+  futureDownloadUrl: string
+  imagePreviewUrl: string
+  fileNameWithExtension: string
+
+  constructor() {
+    this.uploadUrl = chance.url()
+    this.futureDownloadUrl = chance.url()
+    this.imagePreviewUrl = chance.url()
+    this.fileNameWithExtension = chance.string()
+  }
+
+  withUploadUrl(uploadUrl: typeof this.uploadUrl) {
+    this.uploadUrl = uploadUrl
+
+    return this
+  }
+
+  withFutureDownloadUrl(futureDownloadUrl: typeof this.futureDownloadUrl) {
+    this.futureDownloadUrl = futureDownloadUrl
+
+    return this
+  }
+
+  withImagePreviewUrl(imagePreviewUrl: typeof this.imagePreviewUrl) {
+    this.imagePreviewUrl = imagePreviewUrl
+
+    return this
+  }
+
+  withFileNameWithExtension(fileNameWithExtension: typeof this.fileNameWithExtension) {
+    this.fileNameWithExtension = fileNameWithExtension
+
+    return this
+  }
+}
+
+export default SignedUrlsResponseBuilder