app-tutor-ai-consumer 1.33.0 → 1.34.0

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

@@ -2,6 +2,8 @@ import { useDecision } from '@optimizely/react-sdk'
 
 import { render, screen } from '@/src/config/tests'
 import { useSendTextMessage } from '@/src/modules/messages/hooks'
+import { useSparkieStateAtomValue } from '@/src/modules/sparkie/store'
+import { useIsAgentParentAtomValue } from '../../store'
 
 import WidgetStarterPage from './starter-page'
 
@@ -10,11 +12,17 @@ vi.mock('@/src/modules/messages/hooks', () => ({
   useSendTextMessage: vi.fn()
 }))
 
-vi.mock('@/src/modules/sparkie/hooks/use-init-sparkie', () => ({
-  useInitSparkie: vi.fn(() => true)
+vi.mock('@optimizely/react-sdk')
+
+vi.mock('@/src/modules/sparkie/store', async (actual) => ({
+  ...(await actual()),
+  useSparkieStateAtomValue: vi.fn()
 }))
 
-vi.mock('@optimizely/react-sdk')
+vi.mock('../../store', async (actual) => ({
+  ...(await actual()),
+  useIsAgentParentAtomValue: vi.fn()
+}))
 
 describe('WidgetStarterPage', () => {
   const useSendTextMessageMock = { mutate: vi.fn() }
@@ -25,6 +33,8 @@ describe('WidgetStarterPage', () => {
   beforeEach(() => {
     vi.mocked(useSendTextMessage).mockReturnValue(useSendTextMessageMock as never)
     vi.mocked(useDecision).mockReturnValue(useDecisionMock as never)
+    vi.mocked(useIsAgentParentAtomValue).mockReturnValue(false)
+    vi.mocked(useSparkieStateAtomValue).mockReturnValue('initialized')
   })
 
   it('should render without errors', () => {

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

@@ -1,16 +1,10 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react'
-import { useDecision } from '@optimizely/react-sdk'
-import { useQueryClient } from '@tanstack/react-query'
+import { useCallback, useRef } from 'react'
 
 import { useRefEventListener } from '@/src/lib/hooks'
 import { ChatInput, useChatInputValueAtom } from '@/src/modules/messages/components'
-import { getAllMessagesQuery, useSendTextMessage } from '@/src/modules/messages/hooks'
-import { useMessagesMaxCount } from '@/src/modules/messages/store'
-import { useGetProfile } from '@/src/modules/profile'
-import { useInitSparkie } from '@/src/modules/sparkie/hooks/use-init-sparkie'
-import { TutorWidgetEvents } from '../../events'
-import { useWidgetLoadingAtomValue, useWidgetSettingsAtom, useWidgetTabsAtom } from '../../store'
-import { testQuestionRegex } from '../../utils'
+import { useSendTextMessage } from '@/src/modules/messages/hooks'
+import { useWidgetLoadingAtomValue, useWidgetTabsAtom } from '../../store'
+import { AIDisclaimer } from '../ai-disclaimer'
 import { PageLayout } from '../page-layout'
 
 import { WidgetStarterPageActions } from './starter-page-actions'
@@ -19,33 +13,12 @@ import { WidgetStarterPageHeader } from './starter-page-header'
 
 function WidgetStarterPage() {
   const chatInputRef = useRef<HTMLTextAreaElement>(null)
-  const hasSentInitialMessage = useRef(false)
 
-  const [settings, setWidgetSettings] = useWidgetSettingsAtom()
   const [chatInputValue, setChatInputValue] = useChatInputValueAtom()
   const [, setWidgetTabs] = useWidgetTabsAtom()
   const sendTextMessageMutation = useSendTextMessage()
-  const profileQuery = useGetProfile()
-  const limit = useMessagesMaxCount()
-  const queryClient = useQueryClient()
-  const isSparkieReady = useInitSparkie()
 
   const widgetLoading = useWidgetLoadingAtomValue()
-  const [lexTutorInitialMessageFF] = useDecision('lex_tutor_new_widget_initial_message')
-
-  const conversationId = useMemo(() => settings?.conversationId, [settings?.conversationId])
-
-  const profileId = useMemo(() => profileQuery.data?.id, [profileQuery.data?.id])
-
-  const messagesQueryConfig = useMemo(
-    () =>
-      getAllMessagesQuery({
-        conversationId,
-        profileId,
-        limit
-      }),
-    [conversationId, limit, profileId]
-  )
 
   useRefEventListener<HTMLTextAreaElement>({
     config: {
@@ -77,68 +50,30 @@ function WidgetStarterPage() {
     sendText(chatInputRef.current?.value)
   }
 
-  useEffect(() => {
-    if (!conversationId || !profileId) return
-
-    void queryClient.prefetchInfiniteQuery(messagesQueryConfig)
-  }, [conversationId, messagesQueryConfig, profileId, queryClient])
-
-  useEffect(() => {
-    if (!isSparkieReady || hasSentInitialMessage.current || !lexTutorInitialMessageFF.enabled)
-      return
-
-    const clear = TutorWidgetEvents['tutor-initial-message'].handler(({ message }) => {
-      if (!message) return
-
-      setChatInputValue(testQuestionRegex(message))
-      sendText(message)
-      hasSentInitialMessage.current = true
-    })
-
-    return () => {
-      clear?.()
-      hasSentInitialMessage.current = false
-    }
-  }, [isSparkieReady, lexTutorInitialMessageFF.enabled, sendText, setChatInputValue])
-
-  useEffect(() => {
-    if (!isSparkieReady || hasSentInitialMessage.current || !lexTutorInitialMessageFF.enabled)
-      return
-
-    const initialMessage = settings?.initialMessage
-
-    if (initialMessage) {
-      setChatInputValue(testQuestionRegex(initialMessage))
-      sendText(initialMessage)
-      setWidgetSettings({ ...settings, initialMessage: '' })
-      hasSentInitialMessage.current = true
-    }
-  }, [
-    settings,
-    isSparkieReady,
-    sendText,
-    setChatInputValue,
-    lexTutorInitialMessageFF.enabled,
-    setWidgetSettings
-  ])
-
   return (
     <PageLayout
       asideChild={
-        <ChatInput
-          name='new-chat-msg-input'
-          ref={chatInputRef}
-          onSend={handleSend}
-          buttonDisabled={widgetLoading || !chatInputValue.trim()}
-          loading={!isSparkieReady}
-        />
+        <>
+          <ChatInput
+            name='new-chat-msg-input'
+            ref={chatInputRef}
+            onSend={handleSend}
+            buttonDisabled={widgetLoading || !chatInputValue.trim()}
+          />
+
+          <div className='mx-auto w-fit'>
+            <AIDisclaimer />
+          </div>
+        </>
       }>
       <div className='grid-areas-[a_b] grid h-full grid-cols-1 grid-rows-[1fr_auto]'>
-        <div className='grid-area-[a] flex min-h-0 flex-col max-md:px-[1.125rem] max-md:pt-[1.125rem] md:px-5 md:pt-5'>
-          <WidgetStarterPageHeader />
-          <WidgetStarterPageContent />
+        <div className='grid-areas-[a_b] grid h-full grid-cols-1 grid-rows-[1fr_auto]'>
+          <div className='grid-area-[a] flex min-h-0 flex-col max-md:px-[1.125rem] max-md:pt-[1.125rem] md:px-5 md:pt-5'>
+            <WidgetStarterPageHeader />
+            <WidgetStarterPageContent />
+          </div>
+          <WidgetStarterPageActions send={sendText} />
         </div>
-        <WidgetStarterPageActions send={sendText} />
       </div>
     </PageLayout>
   )

package/src/modules/widget/hooks/index.ts

@@ -1,4 +1,3 @@
-export * from './use-init-widget'
 export * from './use-listen-to-theme-change-event'
 export * from './use-listen-to-visibility-events'
 export * from './use-send-view-tutor-event'

package/src/modules/widget/hooks/use-listen-to-theme-change-event/use-listen-to-theme-change-event.tsx

@@ -1,20 +1,22 @@
 import { useLayoutEffect } from 'react'
 import { produce } from 'immer'
+import type { useStore } from 'jotai'
 
 import { initTheme } from '@/src/config/theme'
 import { TutorWidgetEvents } from '../../events'
-import { useWidgetSettingsAtom } from '../../store'
-
-function useListenToThemeChangeEvent() {
-  const [widgetSettings, setWidgetSettings] = useWidgetSettingsAtom()
+import { widgetSettingsAtom } from '../../store'
 
+function useListenToThemeChangeEvent(store?: ReturnType<typeof useStore>) {
   useLayoutEffect(() => {
     const clear = TutorWidgetEvents['c3po-app-widget-theme-change'].handler(({ theme }) => {
+      const widgetSettings = store?.get(widgetSettingsAtom)
+
       initTheme(theme)
 
       if (!widgetSettings || theme === widgetSettings?.config?.theme) return
 
-      setWidgetSettings(
+      store?.set(
+        widgetSettingsAtom,
         produce(widgetSettings, (draft) => {
           draft.config = { ...draft.config, theme }
 
@@ -24,7 +26,7 @@ function useListenToThemeChangeEvent() {
     })
 
     return () => clear?.()
-  }, [setWidgetSettings, widgetSettings])
+  }, [store])
 }
 
 export default useListenToThemeChangeEvent

package/src/modules/widget/store/create-store.ts

@@ -0,0 +1,7 @@
+import { createStore as jotaiCreateStore } from 'jotai'
+
+export const createStore = () => {
+  const store = jotaiCreateStore()
+
+  return store
+}

package/src/modules/widget/store/index.ts

@@ -1,3 +1,4 @@
+export * from './create-store'
 export * from './widget-container-intrinsic-height.atom'
 export * from './widget-loading.atom'
 export * from './widget-scrolling.atom'

package/src/modules/widget/store/widget-settings-config.atom.ts

@@ -1,10 +1,5 @@
 import { atom, useAtomValue } from 'jotai'
 
-import { widgetSettingsAtom } from './widget-settings.atom'
-
-export const widgetSettingsConfigAgentParentAtom = atom((get) => {
-  const settings = get(widgetSettingsAtom)
-  return settings?.config?.metadata?.parent === 'AGENT'
-})
+export const widgetSettingsConfigAgentParentAtom = atom(false)
 
 export const useIsAgentParentAtomValue = () => useAtomValue(widgetSettingsConfigAgentParentAtom)

package/src/modules/widget/store/widget-tabs.atom.ts

@@ -1,48 +1,21 @@
 import { atom, useAtom, useAtomValue } from 'jotai'
-import { atomWithDefault } from 'jotai/utils'
 
-import { sparkieStateAtom } from '../../sparkie/store'
 import type { CurrentTabKey } from '../components'
 
-import { widgetSettingsConfigAgentParentAtom } from './widget-settings-config.atom'
-
 export type WidgetTabsProps = {
   currentTab: CurrentTabKey
   history: Set<CurrentTabKey>
 }
 
+// Prevent memory issues
+const MAX_HISTORY_SIZE = 10
+
 const INITIAL_PROPS: WidgetTabsProps = {
-  currentTab: 'starter',
-  history: new Set(['starter'])
+  currentTab: 'loading',
+  history: new Set(['loading'])
 }
 
-export const widgetTabsAtom = atomWithDefault<WidgetTabsProps>((get) => {
-  const sparkieState = get(sparkieStateAtom)
-  const isAgentMode = get(widgetSettingsConfigAgentParentAtom)
-
-  if (!isAgentMode) return INITIAL_PROPS
-
-  switch (sparkieState) {
-    case 'idle':
-    case 'initializing':
-      return {
-        currentTab: 'loading',
-        history: new Set(['loading'])
-      }
-    case 'initialized':
-      return {
-        currentTab: 'chat',
-        history: new Set(['chat'])
-      }
-    case 'failed':
-      return {
-        currentTab: 'error',
-        history: new Set(['error'])
-      }
-    default:
-      return INITIAL_PROPS
-  }
-})
+export const widgetTabsAtom = atom<WidgetTabsProps>(INITIAL_PROPS)
 
 export const setWidgetTabsAtom = atom(
   (get) => get(widgetTabsAtom),
@@ -51,11 +24,15 @@ export const setWidgetTabsAtom = atom(
 
     if (currentValue.currentTab === currentTab) return
 
-    const history = new Set([...currentValue.history, currentTab])
+    const historyArray = [...currentValue.history, currentTab]
+
+    if (historyArray.length > MAX_HISTORY_SIZE) {
+      historyArray.shift()
+    }
 
     const config: WidgetTabsProps = {
       currentTab,
-      history
+      history: new Set(historyArray)
     }
 
     set(widgetTabsAtom, config)
@@ -70,8 +47,12 @@ export const goBackTabAtom = atom(null, (get, set) => {
 
   historyArray.pop()
 
+  const previousTab = historyArray[historyArray.length - 1]
+
+  if (!previousTab) return
+
   const config: WidgetTabsProps = {
-    currentTab: historyArray[historyArray.length - 1],
+    currentTab: previousTab,
     history: new Set(historyArray)
   }
 
@@ -80,5 +61,5 @@ export const goBackTabAtom = atom(null, (get, set) => {
 
 export const useGetWidgetTabsAtom = () => useAtom(widgetTabsAtom)
 export const useWidgetTabsAtom = () => useAtom(setWidgetTabsAtom)
-export const useWidgetTabsValueAtom = () => useAtomValue(setWidgetTabsAtom)
+export const useWidgetTabsValueAtom = () => useAtomValue(widgetTabsAtom)
 export const useWidgetGoBackTabAtom = () => useAtom(goBackTabAtom)

package/src/types.ts

@@ -62,6 +62,7 @@ export type WidgetSettingProps = {
       courseName?: string
       source?: string
       promptId?: string
+      showFileUpload?: boolean
     }
   }
 }

package/src/wrapper.tsx

@@ -1,32 +1,52 @@
-import { useEffect } from 'react'
+import { StrictMode } from 'react'
+import type { QueryClient } from '@tanstack/react-query'
+import { Provider as JotaiProvider } from 'jotai'
 
+import { QueryProvider } from './config/tanstack'
 import { Main } from './main'
-import { SparkieService } from './modules/sparkie'
-import { useSparkieStateAtom } from './modules/sparkie/store'
+import { usePrefetchMessages } from './modules/messages/hooks/use-prefetch-messages'
+import { WidgetLoadingPage } from './modules/widget'
+import { WidgetErrorPage } from './modules/widget/components/error-page'
+import { useListenToThemeChangeEvent } from './modules/widget/hooks'
+import type { createStore } from './modules/widget/store'
 import type { WidgetSettingProps } from './types'
 
 export type WrapperProps = {
   settings: WidgetSettingProps
+  queryClient: QueryClient
+  state: 'ERROR' | 'LOADING' | 'READY'
+  store?: ReturnType<typeof createStore>
 }
 
-function Wrapper({ settings }: WrapperProps) {
-  const [, setSparkieState] = useSparkieStateAtom()
-
-  useEffect(() => {
-    SparkieService.initSparkie({
-      token: settings?.hotmartToken,
-      skipPresenceSetup: true,
-      retryOptions: {
-        maxRetries: 5,
-        retryDelay: 2000,
-        backoffMultiplier: 1.5
-      }
-    })
-      .then((result) => setSparkieState(result ? 'initialized' : 'failed'))
-      .catch(() => setSparkieState('failed'))
-  }, [setSparkieState, settings?.hotmartToken])
+function ContentWrapper({ settings }: Pick<WrapperProps, 'settings'>) {
+  usePrefetchMessages(settings)
 
   return <Main settings={settings} />
 }
 
+function WrapperItem({ state, settings }: Omit<WrapperProps, 'queryClient' | 'store'>) {
+  switch (state) {
+    case 'READY':
+      return <ContentWrapper settings={settings} />
+    case 'LOADING':
+      return <WidgetLoadingPage />
+    default:
+      return <WidgetErrorPage />
+  }
+}
+
+function Wrapper({ queryClient, settings, state, store }: WrapperProps) {
+  useListenToThemeChangeEvent(store)
+
+  return (
+    <StrictMode>
+      <JotaiProvider store={store}>
+        <QueryProvider queryClient={queryClient} showDevTools={false}>
+          <WrapperItem settings={settings} state={state} />
+        </QueryProvider>
+      </JotaiProvider>
+    </StrictMode>
+  )
+}
+
 export default Wrapper

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

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

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

@@ -1,42 +0,0 @@
-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/widget/hooks/use-init-widget/index.ts

@@ -1 +0,0 @@
-export { default as useInitWidget } from './use-init-widget'

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

@@ -1,56 +0,0 @@
-import { useEffect, useState } from 'react'
-
-import { DataHubStore } from '@/src/config/datahub'
-import { initDayjs } from '@/src/config/dayjs'
-import { initAxios } from '@/src/config/request/api'
-import type { WidgetSettingProps } from '@/src/types'
-import { TutorWidgetEvents } from '../../events'
-
-const init = async (settings: WidgetSettingProps) => {
-  try {
-    initAxios(settings.hotmartToken)
-    await initDayjs(settings.locale)
-    DataHubStore.initData({
-      ucode: settings.user?.ucode ?? '',
-      membershipId: settings.membershipId ?? '',
-      membershipSlug: settings.membershipSlug ?? '',
-      sessionId: settings.sessionId,
-      userId: Number(settings.userId),
-      product: {
-        id: Number(settings.productId) || 0,
-        category: settings.productType ?? ''
-      }
-    })
-    TutorWidgetEvents['tutor-app-widget-loaded'].dispatch()
-  } catch (error) {
-    console.error(error)
-    TutorWidgetEvents['tutor-app-widget-loaded'].dispatch({ detail: { isSuccess: false } })
-  }
-}
-
-function useInitWidget(settings: WidgetSettingProps) {
-  const [completeSetup, setCompleteSetup] = useState(false)
-  const [error, setError] = useState<unknown>(null)
-
-  useEffect(() => {
-    let isMounted = true
-
-    if (completeSetup) return
-
-    init(settings)
-      .then(() => {
-        if (isMounted) setCompleteSetup(true)
-      })
-      .catch((e) => {
-        if (isMounted) setError(e)
-      })
-
-    return () => {
-      isMounted = false
-    }
-  }, [completeSetup, settings])
-
-  return { completeSetup, error }
-}
-
-export default useInitWidget