app-tutor-ai-consumer 1.33.1 → 1.35.0

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/hooks/use-retry-last-message/index.ts

@@ -0,0 +1 @@
+export { default as useRetryLastMessage } from './use-retry-last-message'

package/src/modules/widget/hooks/use-retry-last-message/use-retry-last-message.tsx

@@ -0,0 +1,37 @@
+import { useMemo } from 'react'
+
+import { useSendTextMessage } from '@/src/modules/messages/hooks'
+import {
+  useWidgetLastUserMessageAtom,
+  useWidgetLastUserMessageAtomValue,
+  useWidgetSettingsAtomValue,
+  useWidgetTabsAtom
+} from '../../store'
+
+function useRetryLastMessage() {
+  const settings = useWidgetSettingsAtomValue()
+  const lastUserMessage = useWidgetLastUserMessageAtomValue()
+  const [, setLastUserMessage] = useWidgetLastUserMessageAtom()
+  const [, setTab] = useWidgetTabsAtom()
+  const sendTextMessageMutation = useSendTextMessage()
+
+  const isAgentMode = useMemo(
+    () => settings?.config?.metadata?.parent === 'AGENT',
+    [settings?.config?.metadata?.parent]
+  )
+
+  const retryLastMessage = () => {
+    if (isAgentMode && lastUserMessage) {
+      sendTextMessageMutation.mutate(lastUserMessage, {
+        onSuccess() {
+          setLastUserMessage('')
+          setTab('chat')
+        }
+      })
+    }
+  }
+
+  return retryLastMessage
+}
+
+export default useRetryLastMessage

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,4 +1,6 @@
+export * from './create-store'
 export * from './widget-container-intrinsic-height.atom'
+export * from './widget-last-user-message.atom'
 export * from './widget-loading.atom'
 export * from './widget-scrolling.atom'
 export * from './widget-settings.atom'

package/src/modules/widget/store/widget-last-user-message.atom.ts

@@ -0,0 +1,12 @@
+import { atom, useAtom, useAtomValue } from 'jotai'
+
+export const widgetLastUserMessageAtom = atom<string | null>(null)
+
+export const setWidgetLastUserMessageAtom = atom(
+  (get) => get(widgetLastUserMessageAtom),
+  (_, set, lastMessage: string) => set(widgetLastUserMessageAtom, lastMessage)
+)
+
+export const useWidgetLastUserMessageAtom = () => useAtom(setWidgetLastUserMessageAtom)
+
+export const useWidgetLastUserMessageAtomValue = () => useAtomValue(setWidgetLastUserMessageAtom)

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

@@ -7,9 +7,12 @@ export type WidgetTabsProps = {
   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 = atom<WidgetTabsProps>(INITIAL_PROPS)
@@ -21,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)
@@ -40,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)
   }
 
@@ -50,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

@@ -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 = {
@@ -59,6 +62,7 @@ export type WidgetSettingProps = {
       courseName?: string
       source?: string
       promptId?: string
+      showFileUpload?: boolean
     }
   }
 }
@@ -68,3 +72,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
+}

package/src/wrapper.tsx

@@ -0,0 +1,52 @@
+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 { 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 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/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