app-tutor-ai-consumer 1.18.0 → 1.18.1

package/CHANGELOG.md

@@ -1,3 +1,5 @@
+## [1.18.1](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.18.0...v1.18.1) (2025-07-24)
+
 # [1.18.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.17.0...v1.18.0) (2025-07-24)
 
 ### Features

package/package.json

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

package/src/config/theme/init-theme.ts

@@ -1,7 +1,15 @@
 import type { Theme } from '@/src/types'
 
-export function initTheme(theme?: Theme) {
-  if (theme === 'dark') return document.body.classList.add(theme, 'bg-ai-dark')
+export function initTheme(theme: Theme) {
+  const rootElement = document.querySelector('#hotmart-app-tutor-ai-consumer-root')
 
-  return document.body.classList.add('bg-neutral-100')
+  if (!rootElement) return
+
+  if (theme === 'dark') {
+    rootElement.classList.remove('bg-neutral-100')
+    return rootElement.classList.add(theme, 'bg-ai-dark')
+  }
+
+  rootElement.classList.remove('dark', 'bg-ai-dark')
+  return rootElement.classList.add('bg-neutral-0')
 }

package/src/index.tsx

@@ -4,11 +4,13 @@ import './config/styles/index.css'
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 
+import { initTheme } from '@/src/config/theme'
+
 import { initLanguage } from './config/i18n'
 import { devMode, productionMode } from './lib/utils'
 import { Main } from './main'
 import { TutorWidgetEvents } from './modules/widget'
-import type { WidgetSettingProps } from './types'
+import type { Theme, WidgetSettingProps } from './types'
 
 const loadMainStyles = () => {
   const isProduction = productionMode
@@ -35,14 +37,17 @@ window.startChatWidget = async (
   }
 
   const rootElement = document.getElementById(elementId) as HTMLElement
+  rootElement.setAttribute('id', 'hotmart-app-tutor-ai-consumer-root')
+  const theme = (rootElement.getAttribute('data-theme') ?? 'dark') as Theme
   const root = createRoot(rootElement)
 
   await initLanguage(settings.locale)
+  initTheme(theme)
 
   if (root) {
     root.render(
       <StrictMode>
-        <Main settings={settings} />
+        <Main settings={{ ...settings, config: { ...settings.config, theme } }} />
       </StrictMode>
     )
   }

package/src/lib/components/markdownrenderer/markdownrenderer.tsx

@@ -78,6 +78,15 @@ const mdComponents: Partial<Components> = {
   },
   p({ children }) {
     return <span className='my-3 inline-block'>{children}</span>
+  },
+  ul({ children }) {
+    return <ul className='my-3 list-inside list-disc'>{children}</ul>
+  },
+  ol({ children }) {
+    return <ol className='my-3 list-inside list-decimal'>{children}</ol>
+  },
+  li({ children }) {
+    return <li className='[&:not(:last-child)]:mb-1'>{children}</li>
   }
 }
 

package/src/lib/hooks/index.ts

@@ -1,4 +1,3 @@
-export * from './use-default-id'
 export * from './use-intersection-observer-reverse-scroll'
 export * from './use-ref-client-height'
 export * from './use-ref-event-listener'

package/src/main/main.tsx

@@ -1,11 +1,10 @@
 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 { GlobalProviders } from '../modules/global-providers'
 import { WidgetContainer } from '../modules/widget'
-import { useInitWidget } from '../modules/widget/hooks'
+import { useInitWidget, useListenToThemeChangeEvent } from '../modules/widget/hooks'
 import type { WidgetSettingProps } from '../types'
 
 export type MainProps = {
@@ -14,8 +13,8 @@ export type MainProps = {
 
 function Main({ settings }: MainProps) {
   const { completeSetup } = useInitWidget(settings)
-  useDefaultId()
   useAppLang(settings.locale)
+  useListenToThemeChangeEvent()
 
   return (
     <ErrorBoundary fallback={<GenericError />}>

package/src/modules/messages/components/message-item/message-item.tsx

@@ -17,7 +17,7 @@ function MessageItem({ message }: { message: ParsedMessage }) {
         'max-w-[min(80%,52rem)] overflow-x-hidden rounded-lg px-3 text-sm/normal text-neutral-900',
         {
           'self-end bg-neutral-200': message.metadata.author === 'user',
-          'bg-ai-chat-response': message.metadata.author === 'ai'
+          'border border-neutral-300 bg-neutral-100': message.metadata.author === 'ai'
         }
       )}>
       <MarkdownRenderer content={message?.text ?? message?.name} imgComponent={imgComponent} />

package/src/modules/messages/hooks/use-subscribe-message-received-event/use-subscribe-message-received-event.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react'
+import { useCallback, useEffect, useMemo, useRef } from 'react'
 import type { InfiniteData } from '@tanstack/react-query'
 import { useQueryClient } from '@tanstack/react-query'
 import { produce } from 'immer'
@@ -18,6 +18,7 @@ const useSubscribeMessageReceivedEvent = () => {
   const [, setWidgetLoading] = useWidgetLoadingAtom()
   const [, addUnreadMessagesToSet] = useUnreadMessagesSetAtom()
   const useUpdateCursorMutation = useUpdateCursor()
+  const idsList = useRef<Set<string>>(new Set())
 
   const conversationId = useMemo(() => String(settings?.conversationId), [settings?.conversationId])
   const profileId = useMemo(() => String(profileQuery?.data?.id), [profileQuery?.data?.id])
@@ -28,8 +29,10 @@ const useSubscribeMessageReceivedEvent = () => {
     enabled: true
   })
 
-  useEffect(() => {
+  const execute = useCallback(() => {
     const messageReceived = (data: IMessageWithSenderData) => {
+      if (idsList.current.has(data.id)) return
+
       const queryKey = query.queryKey
 
       if (!queryKey || !queryClient) return
@@ -71,6 +74,7 @@ const useSubscribeMessageReceivedEvent = () => {
         // The cursor should update only with my messages
         useUpdateCursorMutation.mutate(data.conversationId)
       }
+      idsList.current.add(data.id)
     }
 
     SparkieService.subscribeEvents({
@@ -90,6 +94,10 @@ const useSubscribeMessageReceivedEvent = () => {
     setWidgetLoading,
     useUpdateCursorMutation
   ])
+
+  useEffect(() => {
+    execute()
+  }, [execute])
 }
 
 export default useSubscribeMessageReceivedEvent

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

@@ -47,11 +47,7 @@ function ChatPage() {
       }>
       <>
         <div className='mt-4 px-6 py-4'>
-          <WidgetHeader
-            enabledButtons={['info', 'close']}
-            clubName={settings?.clubName}
-            tutorName={settings?.tutorName}
-          />
+          <WidgetHeader enabledButtons={['info', 'close']} tutorName={settings?.tutorName} />
         </div>
         <MessagesList />
       </>

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

@@ -1,11 +1,9 @@
 import { ChatPage } from './chat-page'
 import { WidgetInformationPage } from './information-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 />,
   loading: <WidgetLoadingPage />,

package/src/modules/widget/components/greetings-card/greetings-card.tsx

@@ -8,15 +8,21 @@ import styles from './styles.module.css'
 export type GreetingsCardProps = {
   tutorName: string
   author: string
+  isDarkTheme?: boolean
 }
 
-function GreetingsCard({ author, tutorName }: GreetingsCardProps) {
+function GreetingsCard({ author, tutorName, isDarkTheme = false }: GreetingsCardProps) {
   const { t } = useTranslation()
 
   return (
     <div className='flex flex-col items-center justify-center text-neutral-900'>
       <div className='flex flex-col items-center justify-center gap-4 text-center'>
-        <AIAvatar />
+        <AIAvatar
+          className={clsx('rounded-full border-4 border-neutral-100', {
+            'bg-[#E7EDF2]/80': !isDarkTheme,
+            'bg-neutral-200': isDarkTheme
+          })}
+        />
         <div className='flex flex-col gap-2'>
           <span className='text-base font-light'>
             {t('general.greetings.hello', { name: author })}

package/src/modules/widget/components/header/__tests__/widget-header-props.builder.ts

@@ -5,7 +5,6 @@ class WidgetHeaderPropsBuilder implements WidgetHeaderProps {
   enabledButtons: ValidIconNames[]
   showContent?: boolean
   showContentWithoutMeta?: boolean
-  clubName?: string
   tutorName?: string
 
   constructor() {
@@ -30,12 +29,6 @@ class WidgetHeaderPropsBuilder implements WidgetHeaderProps {
     return this
   }
 
-  withClubName(clubName: typeof this.clubName) {
-    this.clubName = clubName
-
-    return this
-  }
-
   withTutorName(tutorName: typeof this.tutorName) {
     this.tutorName = tutorName
 

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

@@ -5,13 +5,12 @@ import { AIAvatar } from '../ai-avatar'
 
 import type { WidgetHeaderContentProps, WidgetHeaderProps } from './types'
 
-export function WidgetHeaderContent({ clubName, tutorName }: WidgetHeaderContentProps) {
+export function WidgetHeaderContent({ tutorName }: WidgetHeaderContentProps) {
   return (
     <div className='flex w-full gap-2'>
       <AIAvatar />
-      <div className='flex flex-col'>
-        {tutorName && <h4 className='text-base'>{tutorName}</h4>}
-        {clubName && <p className='text-sm/normal text-neutral-600'>{clubName}</p>}
+      <div className='flex flex-col justify-center'>
+        {tutorName && <h4 className='text-base font-bold'>{tutorName}</h4>}
       </div>
     </div>
   )
@@ -32,32 +31,40 @@ export function WidgetHeaderContentWithoutMeta({ name }: { name?: string }) {
 
 function WidgetHeader({
   enabledButtons,
-  clubName,
   tutorName,
   showContentWithoutMeta,
   showContent = true
 }: WidgetHeaderProps) {
-  const [, setWidgetTabs] = useWidgetTabsAtom()
+  const [, setTab] = useWidgetTabsAtom()
+
+  const handleClickArchive = () => {
+    setTab('chat')
+  }
+
+  const handleClickInfo = () => {
+    setTab('information')
+  }
 
   return (
     <div className='grid-areas-[a_b] mt-0.5 grid grid-cols-[1fr_auto] items-center text-neutral-1000'>
       <div className='grid-area-[a]'>
-        {showContent && !showContentWithoutMeta && (
-          <WidgetHeaderContent clubName={clubName} tutorName={tutorName} />
-        )}
+        {showContent && !showContentWithoutMeta && <WidgetHeaderContent tutorName={tutorName} />}
         {showContentWithoutMeta && !showContent && (
           <WidgetHeaderContentWithoutMeta name={tutorName} />
         )}
       </div>
       <div className='shrink-0'>
         <div className='grid-area-[b] ml-auto flex max-w-max gap-3 text-neutral-700'>
-          <Button show={enabledButtons.includes('archive')} aria-label='Archive Icon'>
+          <Button
+            show={enabledButtons.includes('archive')}
+            onClick={handleClickArchive}
+            aria-label='Archive Icon'>
             <Icon name='archive' className='h-4 w-4' aria-hidden />
           </Button>
           <Button
             show={enabledButtons.includes('info')}
             aria-label='Info Icon'
-            onClick={() => setWidgetTabs('information')}>
+            onClick={handleClickInfo}>
             <Icon name='info' className='h-4 w-4' aria-hidden />
           </Button>
           <Button

package/src/modules/widget/components/header/types.ts

@@ -1,6 +1,6 @@
 import type { ValidIconNames } from '@/src/lib/components/icons/icon-names'
 
-export type WidgetHeaderContentProps = { clubName?: string; tutorName?: string }
+export type WidgetHeaderContentProps = { tutorName?: string }
 
 export type WidgetHeaderProps = {
   enabledButtons: ValidIconNames[]

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

@@ -6,13 +6,12 @@ import {
   MessageSkeleton,
   useChatInputValueAtom
 } from '@/src/modules/messages/components'
-import { useWidgetSettingsAtomValue } from '../../store'
+import { WidgetHeader } from '../header'
 import { PageLayout } from '../page-layout'
 
 function WidgetLoadingPage() {
   const chatInputRef = useRef<HTMLTextAreaElement>(null)
   const [, setChatInputValue] = useChatInputValueAtom()
-  const settings = useWidgetSettingsAtomValue()
 
   const handler = useCallback(
     (e: Event) => {
@@ -33,11 +32,12 @@ function WidgetLoadingPage() {
   return (
     <PageLayout
       asideChild={<ChatInput name='new-chat-msg-input' ref={chatInputRef} loading={true} />}>
-      {settings?.config?.theme && (
-        <div className='flex h-full flex-col justify-end px-5 py-4'>
+      <div className='mt-4 flex h-full flex-col justify-start px-6 py-4'>
+        <WidgetHeader enabledButtons={['close']} showContent={false} />
+        <div className='mt-auto'>
           <MessageSkeleton />
         </div>
-      )}
+      </div>
     </PageLayout>
   )
 }

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

@@ -33,41 +33,53 @@ function WidgetStarterPage() {
     }
   })
 
-  const handleAskQuestion: MouseEventHandler<HTMLButtonElement> = (e) => {
-    const textContent = e?.currentTarget?.querySelector(
-      'span[data-label=text-content]'
-    )?.textContent
-
+  const sendText = (textContent?: string | null) => {
     if (!textContent) return
 
     sendTextMessageMutation.mutate(textContent, {
       onSuccess() {
         setWidgetTabs('chat')
+        if (chatInputRef.current) chatInputRef.current.value = ''
+        setChatInputValue('')
       }
     })
   }
 
+  const handleAskQuestion: MouseEventHandler<HTMLButtonElement> = (e) => {
+    sendText(e?.currentTarget?.querySelector('span[data-label=text-content]')?.textContent)
+  }
+
+  const handleSend = () => {
+    sendText(chatInputRef.current?.value)
+  }
+
   return (
     <PageLayout
       asideChild={
         <ChatInput
           name='new-chat-msg-input'
           ref={chatInputRef}
-          onSend={() => setWidgetTabs('chat')}
+          onSend={handleSend}
           buttonDisabled={!chatInputValue.trim()}
         />
       }>
       <div className='grid-areas-[a_b] grid h-full grid-cols-1 grid-rows-[1fr_auto]'>
-        <div className={clsx('grid-area-[a] flex min-h-0 flex-col px-5 py-4', styles.bg)}>
+        <div
+          className={clsx('grid-area-[a] flex min-h-0 flex-col px-5 py-4', {
+            [styles.bg]: settings?.config?.theme === 'dark'
+          })}>
           <WidgetHeader
             enabledButtons={['archive', 'info', 'close']}
-            clubName={settings?.clubName}
             tutorName={settings?.tutorName}
             showContent={false}
           />
 
           <div className='my-auto'>
-            <GreetingsCard author={settings?.author ?? ''} tutorName={settings?.tutorName ?? ''} />
+            <GreetingsCard
+              author={settings?.author ?? ''}
+              tutorName={settings?.tutorName ?? ''}
+              isDarkTheme={settings?.config?.theme === 'dark'}
+            />
           </div>
         </div>
         <div className='grid-area-[b] mx-5 my-6 flex flex-shrink-0 snap-x snap-mandatory gap-2 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'>

package/src/modules/widget/events.ts

@@ -1,13 +1,16 @@
+import type { Theme } from '@/src/types'
+
 import type { ITutorWidgetEvent } from './types'
 
 export const TutorWidgetEventTypes = {
   OPEN: 'c3po-app-widget-open',
   CLOSE: 'c3po-app-widget-close',
   HIDE: 'c3po-app-widget-hide',
-  LOADED: 'tutor-app-widget-loaded'
+  LOADED: 'tutor-app-widget-loaded',
+  THEME_CHANGE: 'c3po-app-widget-theme-change'
 } as const
 
-const TutorWidgetEventsObject = {
+export const TutorWidgetEvents = {
   [TutorWidgetEventTypes.OPEN]: {
     name: TutorWidgetEventTypes.OPEN,
     handler: (callback) => {
@@ -73,10 +76,26 @@ const TutorWidgetEventsObject = {
     dispatch: (payload = { detail: { isSuccess: true } }) => {
       window.dispatchEvent(new CustomEvent(TutorWidgetEventTypes.LOADED, payload))
     }
-  } as ITutorWidgetEvent<{ isSuccess: boolean }>
-} as const
+  } as ITutorWidgetEvent<{ isSuccess: boolean }>,
+
+  [TutorWidgetEventTypes.THEME_CHANGE]: {
+    name: TutorWidgetEventTypes.THEME_CHANGE,
+    handler: (callback: (payload: { theme: Theme }) => void) => {
+      const listener: EventListener = (e) => {
+        const evt = e as CustomEvent<{ theme: Theme }>
+        callback(evt.detail)
+      }
+      window.addEventListener(TutorWidgetEventTypes.THEME_CHANGE, listener)
 
-export const TutorWidgetEvents = TutorWidgetEventsObject
+      return () => {
+        window.removeEventListener(TutorWidgetEventTypes.THEME_CHANGE, listener)
+      }
+    },
+    dispatch: (payload) => {
+      window.dispatchEvent(new CustomEvent(TutorWidgetEventTypes.THEME_CHANGE, payload))
+    }
+  } as ITutorWidgetEvent<{ theme: Theme }>
+} as const
 
 export const ACTION_EVENTS = {
   SCROLL: 'c3po-app-widget-scroll-to-bottom'

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

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

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

@@ -2,14 +2,12 @@ import { useEffect, useState } from 'react'
 
 import { initDayjs } from '@/src/config/dayjs'
 import { initAxios } from '@/src/config/request/api'
-import { initTheme } from '@/src/config/theme'
 import { SparkieService } from '@/src/modules/sparkie'
 import type { WidgetSettingProps } from '@/src/types'
 import { TutorWidgetEvents } from '../../events'
 
 const init = async (settings: WidgetSettingProps) => {
   try {
-    initTheme(settings.config?.theme)
     initAxios(settings.hotmartToken)
     await initDayjs(settings.locale)
     await SparkieService.initSparkie({

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

@@ -0,0 +1,2 @@
+export * from './use-listen-to-theme-change-event'
+export { default as useListenToThemeChangeEvent } from './use-listen-to-theme-change-event'

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

@@ -0,0 +1,30 @@
+import { useLayoutEffect } from 'react'
+import { produce } from 'immer'
+
+import { initTheme } from '@/src/config/theme'
+import { TutorWidgetEvents } from '../../events'
+import { useWidgetSettingsAtom } from '../../store'
+
+function useListenToThemeChangeEvent() {
+  const [widgetSettings, setWidgetSettings] = useWidgetSettingsAtom()
+
+  useLayoutEffect(() => {
+    const clear = TutorWidgetEvents['c3po-app-widget-theme-change'].handler(({ theme }) => {
+      initTheme(theme)
+
+      if (!widgetSettings || theme === widgetSettings?.config?.theme) return
+
+      setWidgetSettings(
+        produce(widgetSettings, (draft) => {
+          draft.config = { ...draft.config, theme }
+
+          return draft
+        })
+      )
+    })
+
+    return () => clear?.()
+  }, [setWidgetSettings, widgetSettings])
+}
+
+export default useListenToThemeChangeEvent

package/src/lib/hooks/use-default-id/index.ts

@@ -1 +0,0 @@
-export { default as useDefaultId } from './use-default-id'

package/src/lib/hooks/use-default-id/use-default-id.tsx

@@ -1,13 +0,0 @@
-import { useLayoutEffect } from 'react'
-
-const useDefaultId = () => {
-  useLayoutEffect(() => {
-    document.body.setAttribute('id', 'hotmart-app-tutor-ai-consumer-root')
-
-    return () => {
-      document.body.removeAttribute('id')
-    }
-  })
-}
-
-export default useDefaultId

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

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

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

@@ -1,41 +0,0 @@
-import clsx from 'clsx'
-import { useTranslation } from 'react-i18next'
-
-import TutorOnboardingSVG from '@/public/assets/svg/tutor-onboarding.svg?url'
-import { Button } from '@/src/lib/components'
-import { useWidgetTabsAtom } from '../../store'
-import { PageLayout } from '../page-layout'
-
-import styles from './styles.module.css'
-
-function WidgetOnboardingPage() {
-  const [, setWidgetTabs] = useWidgetTabsAtom()
-  const { t } = useTranslation()
-
-  return (
-    <PageLayout>
-      <div className={clsx('flex-1', styles.bg)}>
-        <div className='mx-4 flex h-full flex-col justify-center gap-6 px-0.5'>
-          <div className='mx-auto max-w-[67%]'>
-            <img src={TutorOnboardingSVG} aria-hidden />
-          </div>
-          <div className='flex flex-col gap-2'>
-            <h3 className={clsx(styles.gradientTxt, 'text-center text-xl/tight font-semibold')}>
-              {t('onboarding.title')}
-            </h3>
-            <p className='text-center text-sm/snug font-normal text-gray-400'>
-              {t('onboarding.description')}
-            </p>
-          </div>
-        </div>
-      </div>
-      <div className='mx-4 mb-4 mt-auto flex flex-col gap-4'>
-        <Button variant='brand' className='flex-1' onClick={() => setWidgetTabs('starter')}>
-          {t('general.buttons.start')}
-        </Button>
-      </div>
-    </PageLayout>
-  )
-}
-
-export default WidgetOnboardingPage

package/src/modules/widget/components/onboarding-page/styles.module.css

@@ -1,7 +0,0 @@
-.gradientTxt {
-  composes: gradientText from '../../../../config/styles/utilities/text-utilities.module.css';
-}
-
-.bg {
-  composes: gradientBg from '../../../../config/styles/utilities/bg-utilities.module.css';
-}