app-tutor-ai-consumer 1.9.0 → 1.10.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+# [1.10.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.9.0...v1.10.0) (2025-07-17)
+
+### Features
+
+- add new loading logic ([ddfcfb6](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/ddfcfb6b5018440a6cd4b5fb2a03d53ee949add7))
+
 # [1.9.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.8.2...v1.9.0) (2025-07-17)
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-tutor-ai-consumer",
-  "version": "1.9.0",
+  "version": "1.10.0",
   "main": "index.js",
   "scripts": {
     "dev": "rspack serve --env=development --config config/rspack/rspack.config.js",

package/src/index.tsx

@@ -4,12 +4,9 @@ import './config/styles/index.css'
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 
-import { initDayjs } from './config/dayjs'
 import { initLanguage } from './config/i18n'
-import { initAxios } from './config/request/api'
 import { devMode, productionMode } from './lib/utils'
 import { Main } from './main'
-import { SparkieService } from './modules/sparkie'
 import { TutorWidgetEvents } from './modules/widget'
 import type { WidgetSettingProps } from './types'
 
@@ -40,39 +37,12 @@ window.startChatWidget = async (
   const rootElement = document.getElementById(elementId) as HTMLElement
   const root = createRoot(rootElement)
 
-  initAxios(settings.hotmartToken)
   await initLanguage(settings.locale)
-  await initDayjs(settings.locale)
-
-  let isLoadingSparkie: boolean = false
-  let initSparkieError: unknown = null
-
-  try {
-    isLoadingSparkie = true
-    await SparkieService.initSparkie({
-      token: settings?.hotmartToken,
-      skipPresenceSetup: true,
-      retryOptions: {
-        maxRetries: 5,
-        retryDelay: 2000,
-        backoffMultiplier: 1.5
-      }
-    })
-    await SparkieService.ensureInitialized()
-    TutorWidgetEvents['tutor-app-widget-loaded'].dispatch()
-  } catch (error) {
-    initSparkieError = error
-    console.error(error)
-    TutorWidgetEvents['tutor-app-widget-loaded'].dispatch({ detail: { isSuccess: false } })
-  } finally {
-    isLoadingSparkie = false
-  }
 
   if (root) {
-    TutorWidgetEvents['c3po-app-widget-open'].dispatch()
     root.render(
       <StrictMode>
-        <Main settings={settings} metadata={{ initSparkieError, isLoadingSparkie }} />
+        <Main settings={settings} />
       </StrictMode>
     )
   }

package/src/main/main.spec.tsx

@@ -23,7 +23,7 @@ describe('Main', () => {
     renderComponent({ settings: props })
 
     await waitFor(() => {
-      expect(screen.getByText(/send/i)).toBeInTheDocument()
+      expect(screen.getByLabelText(/Submit Button/i)).toBeInTheDocument()
     })
   })
 })

package/src/main/main.tsx

@@ -3,36 +3,24 @@ import '@/config/styles/index.css'
 import { ErrorBoundary, GenericError } from '@/src/lib/components/errors'
 import { useDefaultId } from '@/src/lib/hooks'
 import { useAppLang } from '../config/i18n'
-import { Spinner } from '../lib/components'
 import { GlobalProviders } from '../modules/global-providers'
 import { WidgetContainer } from '../modules/widget'
-import { useListenToVisibilityEvents } from '../modules/widget/hooks'
+import { useInitWidget } from '../modules/widget/hooks'
 import type { WidgetSettingProps } from '../types'
 
 export type MainProps = {
   settings: WidgetSettingProps
-  metadata?: { isLoadingSparkie: boolean; initSparkieError: unknown }
 }
-function Main({
-  settings,
-  metadata = { initSparkieError: null, isLoadingSparkie: false }
-}: MainProps) {
+
+function Main({ settings }: MainProps) {
+  const { completeSetup } = useInitWidget(settings)
   useDefaultId()
   useAppLang(settings.locale)
-  useListenToVisibilityEvents()
-
-  if (metadata.isLoadingSparkie) {
-    return (
-      <div className='flex h-full w-full flex-col items-center justify-center'>
-        <Spinner className='h-10 w-10 text-neutral-500' />
-      </div>
-    )
-  }
 
   return (
     <ErrorBoundary fallback={<GenericError />}>
       <GlobalProviders settings={settings}>
-        <WidgetContainer />
+        <WidgetContainer completeSetup={completeSetup} />
       </GlobalProviders>
     </ErrorBoundary>
   )

package/src/modules/messages/components/chat-input/chat-input.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react'
 import clsx from 'clsx'
 import type { ChangeEvent, KeyboardEvent } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -40,11 +40,13 @@ const ChatInput = forwardRef<HTMLTextAreaElement, ChatInputProps>(
       }
     }
 
-    useEffect(() => {
+    const setInputFocus = useCallback(() => {
       if (inputDisabled) return
 
       const input = ref?.current
 
+      if (input === document.activeElement) return
+
       if (input) {
         input.focus()
 
@@ -53,6 +55,10 @@ const ChatInput = forwardRef<HTMLTextAreaElement, ChatInputProps>(
       }
     }, [inputDisabled])
 
+    useEffect(() => {
+      setInputFocus()
+    }, [setInputFocus])
+
     return (
       <div
         className={clsx(
@@ -68,7 +74,7 @@ const ChatInput = forwardRef<HTMLTextAreaElement, ChatInputProps>(
               'max-h-12 w-full resize-none border-none bg-transparent text-neutral-100 outline-none outline-0 placeholder:text-neutral-400',
               styles.textArea
             ),
-            { 'cursor-not-allowed': inputDisabled, 'opacity-40': inputDisabled || loading }
+            { 'cursor-not-allowed opacity-40': inputDisabled }
           )}
           placeholder={t('send_message.field.placeholder')}
           value={value}

package/src/modules/messages/hooks/use-send-text-message/use-send-text-message.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from 'react'
 import { useMutation } from '@tanstack/react-query'
 import { v4 } from 'uuid'
 
@@ -11,6 +12,8 @@ function useSendTextMessage() {
   const profileQuery = useGetProfile()
   const [, setWidgetLoading] = useWidgetLoadingAtom()
 
+  const userId = useMemo(() => profileQuery.data?.userId?.toString(), [profileQuery.data?.userId])
+
   return useMutation({
     mutationFn(message: string) {
       let processedMessage = message
@@ -48,7 +51,7 @@ function useSendTextMessage() {
           externalId: v4(),
           namespace: settings.namespace,
           sessionId: settings.sessionId,
-          userId: profileQuery.data?.userId?.toString()
+          userId
         }
       })
     },

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

@@ -1,9 +1,11 @@
 import { ChatPage } from './chat-page'
+import { WidgetLoadingPage } from './loading-page'
 import { WidgetOnboardingPage } from './onboarding-page'
 import { WidgetStarterPage } from './starter-page'
 
 export const WIDGET_TABS = {
   onboarding: <WidgetOnboardingPage />,
   starter: <WidgetStarterPage />,
-  chat: <ChatPage />
+  chat: <ChatPage />,
+  loading: <WidgetLoadingPage />
 }

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

@@ -1,12 +1,23 @@
+import { useEffect } from 'react'
+
 import { useSubscribeMessageReceivedEvent } from '@/src/modules/messages/hooks'
 import { useSubscribeThreadClosedEvent } from '@/src/modules/thread/hooks'
-import { useWidgetTabsValueAtom } from '../../store'
+import { useListenToVisibilityEvents } from '../../hooks'
+import { useWidgetTabsAtom } from '../../store'
 import { WIDGET_TABS } from '../constants'
 
-function WidgetContainer() {
-  const widgetTabs = useWidgetTabsValueAtom()
+function WidgetContainer({ completeSetup = false }: { completeSetup?: boolean }) {
+  const [widgetTabs, setTab] = useWidgetTabsAtom()
+
   useSubscribeMessageReceivedEvent()
   useSubscribeThreadClosedEvent()
+  useListenToVisibilityEvents()
+
+  useEffect(() => {
+    if (completeSetup) {
+      setTab('chat')
+    }
+  }, [completeSetup, setTab])
 
   return (
     <div className='flex h-full flex-col items-center justify-stretch overflow-hidden'>

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

@@ -2,5 +2,6 @@ export * from './ai-avatar'
 export * from './chat-page'
 export * from './container'
 export * from './greetings-card'
+export * from './loading-page'
 export * from './page-layout'
 export * from './scroll-to-bottom-button'

package/src/modules/widget/components/loading-page/index.ts

@@ -0,0 +1 @@
+export { default as WidgetLoadingPage } from './loading-page'

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

@@ -0,0 +1,41 @@
+import { useCallback, useRef } from 'react'
+
+import { useRefEventListener } from '@/src/lib/hooks'
+import {
+  ChatInput,
+  MessageSkeleton,
+  useChatInputValueAtom
+} from '@/src/modules/messages/components'
+import { PageLayout } from '../page-layout'
+
+function WidgetLoadingPage() {
+  const chatInputRef = useRef<HTMLTextAreaElement>(null)
+  const [, setChatInputValue] = useChatInputValueAtom()
+
+  const handler = useCallback(
+    (e: Event) => {
+      const target = e.target as HTMLTextAreaElement
+      setChatInputValue(target.value)
+    },
+    [setChatInputValue]
+  )
+
+  useRefEventListener<HTMLTextAreaElement>({
+    config: {
+      ref: chatInputRef,
+      eventTypes: ['input', 'change'],
+      handler
+    }
+  })
+
+  return (
+    <PageLayout
+      asideChild={<ChatInput name='new-chat-msg-input' ref={chatInputRef} loading={true} />}>
+      <div className='flex h-full flex-col justify-end px-5 py-4'>
+        <MessageSkeleton />
+      </div>
+    </PageLayout>
+  )
+}
+
+export default WidgetLoadingPage

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

@@ -1 +1,2 @@
+export * from './use-init-widget'
 export * from './use-listen-to-visibility-events'

package/src/modules/widget/hooks/use-init-widget/index.ts

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

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

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react'
+
+import { initDayjs } from '@/src/config/dayjs'
+import { initAxios } from '@/src/config/request/api'
+import { SparkieService } from '@/src/modules/sparkie'
+import type { WidgetSettingProps } from '@/src/types'
+import { TutorWidgetEvents } from '../../events'
+
+const init = async (settings: WidgetSettingProps) => {
+  try {
+    initAxios(settings.hotmartToken)
+    await initDayjs(settings.locale)
+    await SparkieService.initSparkie({
+      token: settings?.hotmartToken,
+      skipPresenceSetup: true,
+      retryOptions: {
+        maxRetries: 5,
+        retryDelay: 2000,
+        backoffMultiplier: 1.5
+      }
+    })
+    await SparkieService.ensureInitialized()
+    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(() => {
+    if (completeSetup) return
+
+    init(settings)
+      .then(() => {
+        setCompleteSetup(true)
+      })
+      .catch(setError)
+  }, [completeSetup, settings])
+
+  return { completeSetup, error }
+}
+
+export default useInitWidget

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

@@ -8,8 +8,8 @@ export type WidgetTabsProps = {
 }
 
 const INITIAL_PROPS: WidgetTabsProps = {
-  currentTab: 'starter',
-  history: new Set(['starter'])
+  currentTab: 'loading',
+  history: new Set(['loading'])
 }
 
 export const widgetTabsAtom = atom<WidgetTabsProps>(INITIAL_PROPS)