app-tutor-ai-consumer 1.8.1 → 1.8.2

package/CHANGELOG.md

@@ -1,3 +1,5 @@
+## [1.8.2](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.8.1...v1.8.2) (2025-07-16)
+
 ## [1.8.1](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.8.0...v1.8.1) (2025-07-15)
 
 # [1.8.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.7.0...v1.8.0) (2025-07-14)

package/config/rspack/rspack.config.js

@@ -11,6 +11,7 @@ require('dotenv').config({
 })
 
 module.exports = async function (env) {
+  const standaloneMode = env?.local
   const productionMode = env?.production || env?.staging
   const releaseFullName = `app-tutor-ai-consumer_v${packageJSON.version}`
   const fileVersion = `${productionMode ? 'prod' : 'dev'}-${packageJSON?.version}`
@@ -23,7 +24,7 @@ module.exports = async function (env) {
    */
   const config = {
     mode: productionMode ? 'production' : 'development',
-    entry: productionMode ? paths.INDEX : paths.DEV_BOOTSTRAP,
+    entry: standaloneMode ? paths.DEV_BOOTSTRAP : paths.INDEX,
     ...(productionMode ? {} : require('./utils/devserver.config')),
     optimization: {
       usedExports: true,
@@ -159,17 +160,14 @@ module.exports = async function (env) {
       new rspack.DefinePlugin({
         'process.env.PROJECT_VERSION': JSON.stringify(packageJSON.version),
         'process.env.TARGET_ENV': JSON.stringify(process.env.NODE_ENV),
-        'process.env.RELEASE_FULL_NAME': JSON.stringify(releaseFullName)
+        'process.env.RELEASE_FULL_NAME': JSON.stringify(releaseFullName),
+        'process.env.STANDALONE_MODE': JSON.stringify(standaloneMode)
       }),
       new rspack.ProgressPlugin(),
       new TsCheckerRspackPlugin(),
       new rspack.HtmlRspackPlugin({
         template: path.resolve(paths.PUBLIC, 'index.html'),
         favicon: path.resolve(paths.PUBLIC, 'favicon.ico')
-      }),
-      new rspack.CssExtractRspackPlugin({
-        filename: productionMode ? `app-tutor-ai-consumer.css` : '[name].[contenthash].css',
-        chunkFilename: productionMode ? '[id].[contenthash].css' : '[id].[contenthash].css'
       })
     ].concat(await getEnvironmentPlugins(!productionMode)),
     watchOptions: {

package/config/rspack/utils/plugins.js

@@ -27,8 +27,8 @@ async function getEnvironmentPlugins(isDevelopment) {
   return [
     new rspack.EnvironmentPlugin(allEnvs),
     new rspack.CssExtractRspackPlugin({
-      filename: '[name].[contenthash].css',
-      chunkFilename: '[id]-app-tutor-ai-consumer.css'
+      filename: 'app-tutor-ai-consumer.css',
+      chunkFilename: '[id].[contenthash].css'
     }),
     new CompressionPlugin({
       algorithm: 'gzip'

package/package.json

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

package/src/development-bootstrap.tsx

@@ -5,10 +5,25 @@ import { v4 } from 'uuid'
 import { LANGUAGES } from './config/i18n'
 import { devMode } from './lib/utils'
 
+const rootId = 'app-tutor-ai-widget'
+
 if (devMode) {
   window.TOKEN = process.env.TOKEN ?? ''
   void (async () => {
-    await window.startChatWidget('c3po-app-widget', {
+    //  TODO: Remove after sidebar implementation
+    // Add Local popup css config
+    const root = document.getElementById('c3po-app-widget')
+    const container = document.createElement('div')
+
+    container.setAttribute('id', rootId)
+    container.setAttribute(
+      'class',
+      'bg-ai-dark fixed bottom-5 right-5 w-[27rem] h-[min(43rem,calc(100vh-2.5rem))] max-h-[calc(100vh-2.5rem)] z-10 rounded-[0.625rem] border border-neutral-800 shadow-lg overflow-hidden flex flex-col'
+    )
+
+    root?.appendChild(container)
+
+    await window.startChatWidget(rootId, {
       hotmartToken: window.TOKEN,
       locale: LANGUAGES.PT_BR,
       conversationId: '21506473-a93c-4b38-9c32-68a5ca37ce73', // OWNER

package/src/index.tsx

@@ -7,7 +7,7 @@ import { createRoot } from 'react-dom/client'
 import { initDayjs } from './config/dayjs'
 import { initLanguage } from './config/i18n'
 import { initAxios } from './config/request/api'
-import { productionMode } from './lib/utils'
+import { devMode, productionMode } from './lib/utils'
 import { Main } from './main'
 import { SparkieService } from './modules/sparkie'
 import { TutorWidgetEvents, TutorWidgetEventTypes } from './modules/widget'
@@ -33,24 +33,34 @@ window.startChatWidget = async (
   elementId = 'tutor-chat-app-widget',
   settings: WidgetSettingProps
 ) => {
-  loadMainStyles()
+  if (!devMode) {
+    loadMainStyles()
+  }
 
   const rootElement = document.getElementById(elementId) as HTMLElement
   const root = createRoot(rootElement)
 
-  await SparkieService.initSparkie({
-    token: settings.hotmartToken,
-    skipPresenceSetup: true,
-    retryOptions: {
-      maxRetries: 5,
-      retryDelay: 2000,
-      backoffMultiplier: 1.5
-    }
-  })
   initAxios(settings.hotmartToken)
   await initLanguage(settings.locale)
   await initDayjs(settings.locale)
 
+  try {
+    await SparkieService.initSparkie({
+      token: settings?.hotmartToken,
+      skipPresenceSetup: true,
+      retryOptions: {
+        maxRetries: 5,
+        retryDelay: 2000,
+        backoffMultiplier: 1.5
+      }
+    })
+    await SparkieService.ensureInitialized()
+    TutorWidgetEvents.get(TutorWidgetEventTypes.LOADED)?.dispatch()
+  } catch (error) {
+    console.error(error)
+    TutorWidgetEvents.get(TutorWidgetEventTypes.LOADED)?.dispatch({ detail: { isSuccess: false } })
+  }
+
   if (root)
     root.render(
       <StrictMode>

package/src/lib/contexts/index.ts

@@ -0,0 +1 @@
+export * from './shared-ref'

package/src/lib/contexts/shared-ref/index.ts

@@ -0,0 +1 @@
+export { default as createSharedRefContext } from './shared-ref'

package/src/lib/contexts/shared-ref/shared-ref.tsx

@@ -0,0 +1,26 @@
+import { createContext, useContext, useRef } from 'react'
+import type { PropsWithChildren, RefObject } from 'react'
+
+function createSharedRefContext<T extends HTMLElement>() {
+  const SharedRefContext = createContext<RefObject<T | null> | null>(null)
+
+  const SharedRefContextProvider = ({ children }: PropsWithChildren) => {
+    const sharedRef = useRef<T>(null)
+    return <SharedRefContext.Provider value={sharedRef}>{children}</SharedRefContext.Provider>
+  }
+
+  const useSharedRefContext = () => {
+    const ctx = useContext(SharedRefContext)
+
+    if (!ctx) throw new Error('SharedRefContext must be used inside a SharedRefContextProvider')
+    return ctx
+  }
+
+  return {
+    SharedRefContext,
+    SharedRefContextProvider,
+    useSharedRefContext
+  }
+}
+
+export default createSharedRefContext

package/src/main/main.spec.tsx

@@ -1,9 +1,12 @@
 import { chance, render, screen, waitFor } from '@/config/tests'
+import { useWidgetSettingsAtom } from '@/src/modules/widget/store/widget-settings.atom'
 import WidgetSettingPropsBuilder from '../modules/widget/__tests__/widget-settings-props.builder'
-import { useWidgetSettingsAtom } from '../modules/widget/store/widget-settings.atom'
 import { Main } from '.'
 
-vi.mock('../modules/widget/store/widget-settings.atom', () => ({ useWidgetSettingsAtom: vi.fn() }))
+vi.mock('@/src/modules/widget/store/widget-settings.atom', async (importOriginal) => ({
+  ...(await importOriginal()),
+  useWidgetSettingsAtom: vi.fn()
+}))
 
 describe('Main', () => {
   const defaultProps = new WidgetSettingPropsBuilder()
@@ -20,7 +23,7 @@ describe('Main', () => {
     renderComponent({ settings: props })
 
     await waitFor(() => {
-      expect(screen.getByText(/onboarding.description/i)).toBeInTheDocument()
+      expect(screen.getByText(/send/i)).toBeInTheDocument()
     })
   })
 })

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

@@ -1,4 +1,5 @@
 import { type PropsWithChildren, useEffect } from 'react'
+import { v4 } from 'uuid'
 
 import { OptimizelyProvider } from '@/src/config/optimizely'
 import { QueryProvider } from '@/src/config/tanstack'
@@ -13,6 +14,10 @@ function GlobalProviders({ children, settings }: GlobalProvidersProps) {
   useEffect(() => {
     if (!settings || !Object.keys(settings)?.length) return
 
+    if (!settings?.sessionId) {
+      settings.sessionId = v4()
+    }
+
     setWidgetSettings(settings)
   }, [setWidgetSettings, settings])
 

package/src/modules/messages/components/messages-list/messages-list.tsx

@@ -1,7 +1,8 @@
 import { lazy, useCallback, useRef } from 'react'
 import clsx from 'clsx'
+import { createPortal } from 'react-dom'
 
-import { useWidgetLoadingAtomValue } from '@/src/modules/widget'
+import { usePageLayoutMainRefContext, useWidgetLoadingAtomValue } from '@/src/modules/widget'
 import { useAllMessages, useManageScroll } from '../../hooks'
 import { useSkeletonRef } from '../../hooks/use-skeleton-ref'
 import { MessageItem } from '../message-item'
@@ -26,6 +27,7 @@ function MessagesList() {
   const widgetIsLoading = useWidgetLoadingAtomValue()
   const skeletonRef = useSkeletonRef()
   const { showScrollButton } = useManageScroll(scrollerRef)
+  const mainLayoutRef = usePageLayoutMainRefContext()
 
   const scrollToBottom = useCallback(() => {
     const { current: scroller } = scrollerRef
@@ -39,23 +41,21 @@ function MessagesList() {
   }, [])
 
   return (
-    <div ref={scrollerRef} className='relative mx-2 my-4 flex flex-col gap-2 overflow-auto px-4'>
+    <div ref={scrollerRef} className='mx-2 my-4 flex flex-col gap-2 overflow-auto px-4'>
       <MessageItemLoading show={messagesQuery.isFetching} />
 
       <MessageItemEndOfScroll
         show={!messagesQuery.isFetching && !messagesQuery.hasNextPage && allMessages.length > 0}
       />
-
-      <ScrollToBottomButton
-        ref={scrollToButtonRef}
-        top={Math.abs(
-          Number(scrollerRef.current?.clientHeight) -
-            Number(scrollToButtonRef.current?.clientHeight) -
-            24
+      {mainLayoutRef.current &&
+        createPortal(
+          <ScrollToBottomButton
+            ref={scrollToButtonRef}
+            show={showScrollButton}
+            onClick={scrollToBottom}
+          />,
+          mainLayoutRef.current
         )}
-        show={showScrollButton}
-        onClick={scrollToBottom}
-      />
 
       {allMessages?.map(([publishingDate, messages], i) => (
         <div key={i} className='flex flex-1 flex-col justify-center gap-6'>

package/src/modules/sparkie/service.ts

@@ -153,7 +153,7 @@ class SparkieService {
     return false
   }
 
-  private async ensureInitialized(): Promise<void> {
+  async ensureInitialized(): Promise<void> {
     if (this.isInitialized) return
 
     switch (this.initializationState) {

package/src/modules/widget/components/page-layout/constants.tsx

@@ -0,0 +1,8 @@
+import { createSharedRefContext } from '@/src/lib/contexts'
+
+const { useSharedRefContext, SharedRefContext, SharedRefContextProvider } =
+  createSharedRefContext<HTMLDivElement>()
+
+export const usePageLayoutMainRefContext = useSharedRefContext
+export const PageLayoutMainRefContext = SharedRefContext
+export const PageLayoutMainRefContextProvider = SharedRefContextProvider

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

@@ -1,2 +1,3 @@
+export * from './constants'
 export * from './page-layout'
 export { default as PageLayout } from './page-layout'

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

@@ -1,18 +1,25 @@
+import { type PropsWithChildren, type ReactNode } from 'react'
 import clsx from 'clsx'
-import type { PropsWithChildren, ReactNode } from 'react'
+
+import { PageLayoutMainRefContextProvider, usePageLayoutMainRefContext } from './constants'
 
 export type PageLayoutProps = PropsWithChildren<{
   asideChild?: ReactNode
   className?: string
 }>
+
 function PageLayout({ asideChild, children, className }: PageLayoutProps) {
+  const mainLayoutRef = usePageLayoutMainRefContext()
+
   return (
     <div
       className={clsx(
         'grid-areas-[main_aside] grid h-full min-h-0 w-full grid-cols-1 grid-rows-[1fr_auto]',
         className
       )}>
-      <div className='grid-area-[main] flex min-h-0 flex-col overflow-y-auto overflow-x-hidden'>
+      <div
+        ref={mainLayoutRef}
+        className='grid-area-[main] relative flex min-h-0 flex-col overflow-y-auto overflow-x-hidden'>
         {children}
       </div>
       {asideChild && (
@@ -24,4 +31,12 @@ function PageLayout({ asideChild, children, className }: PageLayoutProps) {
   )
 }
 
-export default PageLayout
+function PageLayoutWrapper(props: PageLayoutProps) {
+  return (
+    <PageLayoutMainRefContextProvider>
+      <PageLayout {...props} />
+    </PageLayoutMainRefContextProvider>
+  )
+}
+
+export default PageLayoutWrapper

package/src/modules/widget/components/scroll-to-bottom-button/scroll-to-bottom-button.tsx

@@ -10,14 +10,13 @@ export interface IScrollToBottomButtonProps
 }
 
 const ScrollToBottomButton = forwardRef<HTMLButtonElement, IScrollToBottomButtonProps>(
-  ({ show = false, top = 0, onClick, className, ...props }, ref) => (
+  ({ show = false, onClick, className, ...props }, ref) => (
     <button
       {...props}
-      style={isNaN(Number(top)) ? undefined : { top }}
       ref={ref}
       className={clsx(
-        'fixed inset-x-1/2 flex size-7 cursor-pointer flex-col items-center justify-center rounded-full bg-neutral-600 text-sm text-neutral-50 outline-none transition-colors duration-300 ease-in hover:scale-110 hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2',
-        { 'pointer-events-none opacity-0': !show },
+        'absolute bottom-4 left-1/2 flex size-7 cursor-pointer flex-col items-center justify-center rounded-full bg-neutral-600 text-sm text-neutral-50 outline-none transition-colors duration-300 ease-in hover:scale-110 hover:bg-neutral-700 focus:outline-none focus:ring-neutral-500 focus:ring-offset-2 focus-visible:ring-2 active:ring-2',
+        { 'opacity-85': show, 'pointer-events-none opacity-0': !show },
         className
       )}
       onClick={onClick}

package/src/modules/widget/events.ts

@@ -1,21 +1,46 @@
 import type { ITutorWidgetEvent } from './types'
 
 export const TutorWidgetEventTypes = {
-  OPEN: 'tutor-app-widget-open',
-  CLOSE: 'tutor-app-widget-close'
+  OPEN: 'c3po-app-widget-open',
+  CLOSE: 'c3po-app-widget-close',
+  LOADED: 'tutor-app-widget-loaded'
 } as const
 
-const TutorWidgetEventsList: Array<ITutorWidgetEvent> = [
+const TutorWidgetEventsList = [
   {
     name: TutorWidgetEventTypes.OPEN,
     handler: () => () => undefined,
-    dispatch: () => window.dispatchEvent(new CustomEvent(TutorWidgetEventTypes.OPEN))
+    dispatch: () => {
+      window.dispatchEvent(new CustomEvent(TutorWidgetEventTypes.OPEN))
+    }
   },
   {
     name: TutorWidgetEventTypes.CLOSE,
     handler: () => () => undefined,
-    dispatch: () => window.dispatchEvent(new CustomEvent(TutorWidgetEventTypes.CLOSE))
-  }
+    dispatch: () => {
+      window.dispatchEvent(new CustomEvent(TutorWidgetEventTypes.CLOSE))
+    }
+  },
+  {
+    name: TutorWidgetEventTypes.LOADED,
+    handler: (callback) => {
+      const listener: EventListener = (e) => {
+        const evt = e as CustomEvent<{ isSuccess: boolean }>
+
+        console.log(evt.detail)
+
+        callback(evt.detail)
+      }
+      window.addEventListener(TutorWidgetEventTypes.LOADED, listener)
+
+      return () => {
+        window.removeEventListener(TutorWidgetEventTypes.LOADED, listener)
+      }
+    },
+    dispatch: (payload = { detail: { isSuccess: true } }) => {
+      window.dispatchEvent(new CustomEvent(TutorWidgetEventTypes.LOADED, payload))
+    }
+  } as ITutorWidgetEvent<{ isSuccess: boolean }>
 ] as const
 
 export const TutorWidgetEvents = new Map(TutorWidgetEventsList.map((e) => [e.name, e]))

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

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

package/src/modules/widget/types.ts

@@ -1,7 +1,7 @@
 import type { TutorWidgetEventTypes } from './events'
 
-export type ITutorWidgetEvent = {
+export type ITutorWidgetEvent<T = unknown> = {
   name: (typeof TutorWidgetEventTypes)[keyof typeof TutorWidgetEventTypes]
-  handler: (listener: EventListenerOrEventListenerObject) => () => void
-  dispatch: <T = unknown>(payload?: CustomEventInit<T>) => void
+  handler: (callback: (payload: T) => void) => () => void
+  dispatch: (payload?: CustomEventInit<T>) => void
 }