app-tutor-ai-consumer 1.9.0 → 1.11.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [1.11.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.10.0...v1.11.0) (2025-07-17)
+
+### Features
+
+- adding new tutor icon ([a5f883f](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/a5f883fcb97ef4a3774cc9c9c900aa190f743e79))
+
+# [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.11.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/lib/components/icons/ai-color.svg

@@ -1,17 +1,9 @@
-<svg viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M21.5813 16.7843L24.9086 18.5499L21.5813 20.3154L19.8068 23.6263L18.0313 20.3154L14.7041 18.5499L18.0313 16.7843L19.8068 13.4734L21.5813 16.7843ZM11.9119 9.10141L17.2354 11.9261L11.9119 14.7508L9.07199 20.0485L6.23301 14.7508L0.908569 11.9261L6.23301 9.10141L9.07199 3.80376L11.9119 9.10141ZM20.1457 3.24642L22.7786 4.64367L20.1457 6.03994L18.7413 8.66002L17.337 6.03994L14.7041 4.64367L17.337 3.24642L18.7413 0.626343L20.1457 3.24642Z"
-    fill="url(#paint0_linear_18592_52336)" />
-  <defs>
-    <linearGradient
-      id="paint0_linear_18592_52336"
-      x1="0.908569"
-      y1="12.1263"
-      x2="24.9086"
-      y2="12.1263"
-      gradientUnits="userSpaceOnUse">
-      <stop stop-color="#44D0FF" />
-      <stop offset="1" stop-color="#B48EFF" />
-    </linearGradient>
-  </defs>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.897063 10.1169C0.779007 10.0991 0.779007 9.90091 0.897063 9.88308C8.8355 8.68408 9.54825 3.99021 9.90743 0.811152C9.92068 0.693875 10.0793 0.693875 10.0926 0.811152C10.4517 3.99021 11.1645 8.68408 19.1029 9.88308C19.221 9.90091 19.221 10.0991 19.1029 10.1169C11.1645 11.3159 10.4517 16.0098 10.0926 19.1888C10.0793 19.3061 9.92068 19.3061 9.90743 19.1888C9.54825 16.0098 8.8355 11.3159 0.897063 10.1169Z" fill="url(#paint0_linear_7856_83233)"/>
+<defs>
+<linearGradient id="paint0_linear_7856_83233" x1="1.875" y1="-0.108232" x2="17.7233" y2="20.1432" gradientUnits="userSpaceOnUse">
+<stop stop-color="#44D0FF"/>
+<stop offset="1" stop-color="#B48EFF"/>
+</linearGradient>
+</defs>
 </svg>

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)