app-tutor-ai-consumer 1.18.0 → 1.18.2

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## [1.18.2](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.18.1...v1.18.2) (2025-07-28)
+
+## [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.2",
   "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/icons/gallery.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.7166 0.880408C6.88983 0.963668 7 1.13886 7 1.33106V3.83106H9.23488C9.93358 3.83106 10.5944 4.14867 11.0309 4.69426L12.8904 7.01871C13.0105 7.1688 13.0339 7.37442 12.9507 7.54765C12.8674 7.72089 12.6922 7.83106 12.5 7.83106H10V10.0659C10 10.7646 9.6824 11.4255 9.1368 11.8619L6.81235 13.7215C6.66227 13.8416 6.45664 13.865 6.28341 13.7817C6.11018 13.6985 6 13.5233 6 13.3311V10.8311H3.76513C3.06643 10.8311 2.40561 10.5135 1.96913 9.96786L0.10957 7.64341C-0.0104977 7.49332 -0.0339069 7.2877 0.0493531 7.11447C0.132613 6.94123 0.307802 6.83106 0.500005 6.83106H3V4.59618C3 3.89748 3.31761 3.23666 3.86321 2.80019L6.18766 0.940625C6.33774 0.820557 6.54337 0.797148 6.7166 0.880408ZM1.54032 7.83106L2.75 9.34316C2.9967 9.65154 3.37021 9.83106 3.76513 9.83106H6V7.83106H1.54032ZM6 6.83106H4V4.59618C4 4.20127 4.17952 3.82776 4.4879 3.58105L6 2.37137V6.83106ZM7 7.83106V12.2907L8.51211 11.0811C8.82049 10.8344 9 10.4609 9 10.0659V7.83106H7ZM7 6.83106V4.83106H9.23488C9.6298 4.83106 10.0033 5.01058 10.25 5.31896L11.4597 6.83106H7Z" fill="currentColor"/>
+</svg>

package/src/lib/components/icons/icon-names.d.ts

@@ -11,4 +11,4 @@ export type ValidIconNames =
   | 'stop'
   | 'warning'
   | 'interrogation'
-  | 'book'
+  | 'gallery'

package/src/lib/components/icons/interrogation.svg

@@ -1,9 +1,3 @@
-<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 0.73584C3.5625 0.73584 0 4.32959 0 8.73584C0 13.1733 3.5625 16.7358 8 16.7358C12.4062 16.7358 16 13.1733 16 8.73584C16 4.32959 12.4062 0.73584 8 0.73584ZM8 15.7358C4.125 15.7358 1 12.6108 1 8.73584C1 4.89209 4.125 1.73584 8 1.73584C11.8438 1.73584 15 4.89209 15 8.73584C15 12.6108 11.8438 15.7358 8 15.7358ZM7.5 11.4858C7.0625 11.4858 6.75 11.8296 6.75 12.2358C6.75 12.6733 7.0625 12.9858 7.5 12.9858C7.90625 12.9858 8.25 12.6733 8.25 12.2358C8.25 11.8296 7.90625 11.4858 7.5 11.4858ZM8.90625 4.73584H7.0625C5.90625 4.73584 5 5.67334 5 6.82959V7.11084C5 7.39209 5.21875 7.61084 5.5 7.61084C5.75 7.61084 6 7.39209 6 7.11084V6.82959C6 6.23584 6.46875 5.73584 7.0625 5.73584H8.90625C9.5 5.73584 10 6.23584 10 6.82959C10 7.20459 9.78125 7.57959 9.4375 7.76709L7.5625 8.70459C7.21875 8.89209 7 9.26709 7 9.67334V10.2358C7 10.5171 7.21875 10.7358 7.5 10.7358C7.75 10.7358 8 10.5171 8 10.2358V9.67334C8 9.64209 8 9.61084 8.03125 9.57959L9.90625 8.64209C10.5625 8.26709 11 7.57959 11 6.82959C11 5.67334 10.0625 4.73584 8.90625 4.73584Z" fill="url(#paint0_linear_21475_7939)"/>
-<defs>
-<linearGradient id="paint0_linear_21475_7939" x1="0" y1="8.73584" x2="16" y2="8.73584" gradientUnits="userSpaceOnUse">
-<stop stop-color="#44D0FF"/>
-<stop offset="1" stop-color="#B48EFF"/>
-</linearGradient>
-</defs>
+<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 1.83105C3.23858 1.83105 1 4.06963 1 6.83105C1 9.59248 3.23858 11.8311 6 11.8311C8.76142 11.8311 11 9.59248 11 6.83105C11 4.06963 8.76142 1.83105 6 1.83105ZM6 12.8311C2.68629 12.8311 0 10.1448 0 6.83105C0 3.51735 2.68629 0.831055 6 0.831055C9.31371 0.831055 12 3.51735 12 6.83105C12 10.1448 9.31371 12.8311 6 12.8311ZM6 8.83105C6.41421 8.83105 6.75 9.16684 6.75 9.58105C6.75 9.99527 6.41421 10.3311 6 10.3311C5.58579 10.3311 5.25 9.99527 5.25 9.58105C5.25 9.16684 5.58579 8.83105 6 8.83105ZM5 5.33105C5 4.77877 5.44772 4.33105 6 4.33105H6.5C7.05228 4.33105 7.5 4.77877 7.5 5.33105V5.49772C7.5 5.95796 7.1269 6.33105 6.66667 6.33105C6.02233 6.33105 5.5 6.85339 5.5 7.49772V7.83105H6.5V7.49772C6.5 7.40567 6.57462 7.33105 6.66667 7.33105C7.67919 7.33105 8.5 6.51024 8.5 5.49772V5.33105C8.5 4.22649 7.60457 3.33105 6.5 3.33105H6C4.89543 3.33105 4 4.22649 4 5.33105H5Z" fill="currentColor"/>
 </svg>

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

@@ -1,31 +1,41 @@
 import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
 
-import { AIAvatar } from '../ai-avatar'
-
-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'>
       <div className='flex flex-col items-center justify-center gap-4 text-center'>
-        <AIAvatar />
         <div className='flex flex-col gap-2'>
-          <span className='text-base font-light'>
+          <span
+            className={clsx('text-base font-light', {
+              'text-white': isDarkTheme,
+              'text-gray-900': !isDarkTheme
+            })}>
             {t('general.greetings.hello', { name: author })}
           </span>
-          <h3 className={clsx('text-xl', styles.faceTxt)}>
+          <h3
+            className={clsx('text-xl font-bold', {
+              'text-white': isDarkTheme,
+              'text-gray-900': !isDarkTheme
+            })}>
             {t('general.greetings.firstMessage', { tutorName })}
           </h3>
         </div>
-        <p className='text-sm font-normal text-neutral-600'>{t('general.greetings.description')}</p>
+        <p
+          className={clsx('text-sm font-normal', {
+            'text-gray-400': isDarkTheme,
+            'text-neutral-600': !isDarkTheme
+          })}>
+          {t('general.greetings.description')}
+        </p>
       </div>
     </div>
   )

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/information-page/constants.ts

@@ -12,6 +12,10 @@ export const infoItems: InfoItem[] = [
     titleKey: 'info.what_it_does_question',
     descKey: 'info.what_it_does_answer'
   },
-  { icon: 'book', titleKey: 'info.how_it_learns_question', descKey: 'info.how_it_learns_answer' },
-  { icon: 'warning', titleKey: 'info.limitations_question', descKey: 'info.limitations_answer' }
+  {
+    icon: 'gallery',
+    titleKey: 'info.how_it_learns_question',
+    descKey: 'info.how_it_learns_answer'
+  },
+  { icon: 'info', titleKey: 'info.limitations_question', descKey: 'info.limitations_answer' }
 ]

package/src/modules/widget/components/information-page/information-card/information-card.tsx

@@ -1,3 +1,5 @@
+import clsx from 'clsx'
+
 import { Icon } from '@/src/lib/components'
 import type { ValidIconNames } from '@/src/lib/components/icons/icon-names'
 
@@ -5,18 +7,33 @@ export type InformationCardProps = {
   icon: ValidIconNames
   title: string
   description: string
+  isDarkMode: boolean
 }
 
-function InformationCard({ icon, title, description }: InformationCardProps) {
+function InformationCard({ icon, title, description, isDarkMode }: InformationCardProps) {
   return (
-    <div className='flex gap-3 border-b border-white/10 pb-5 last:border-none'>
-      <div className='flex h-5 w-5 items-start justify-center'>
+    <div
+      className={clsx('flex justify-center gap-3 border-b pb-5 last:border-none', {
+        'border-white/10': isDarkMode,
+        'border-black/10': !isDarkMode
+      })}>
+      <div
+        className={clsx('flex h-5 w-5 items-start justify-center', {
+          'text-white': isDarkMode,
+          'text-neutral-900': !isDarkMode
+        })}>
         <Icon name={icon} width={16} height={16} />
       </div>
 
       <div className='flex flex-col gap-1'>
-        <p className='text-sm font-bold'>{title}</p>
-        <p className='text-xs text-gray-300'>{description}</p>
+        <p className='text-sm font-bold text-neutral-900'>{title}</p>
+        <p
+          className={clsx('text-xs', {
+            'text-gray-300': isDarkMode,
+            'text-gray-500': !isDarkMode
+          })}>
+          {description}
+        </p>
       </div>
     </div>
   )

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

@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
 
 import { Icon } from '@/src/lib/components'
@@ -12,10 +13,15 @@ function WidgetInformationPage() {
   const { t } = useTranslation()
   const [, setWidgetTabs] = useWidgetTabsAtom()
   const [settings] = useWidgetSettingsAtom()
+  const isDarkMode = settings?.config?.theme === 'dark'
 
   return (
     <PageLayout className='p-5 text-white'>
-      <div className='relative mb-8 flex h-12 items-center justify-center'>
+      <div
+        className={clsx('relative mb-8 flex h-12 items-center justify-center', {
+          'text-white': isDarkMode,
+          'text-neutral-700': !isDarkMode
+        })}>
         <button
           className='absolute left-0'
           aria-label='Return Button'
@@ -25,11 +31,17 @@ function WidgetInformationPage() {
         <h1 className='mx-auto font-bold'>{t('info.title')}</h1>
       </div>
 
-      <div className='mb-8 flex justify-center'>
+      <div className='mb-10 flex justify-center'>
         <div className='flex flex-col items-center gap-2'>
           <AIAvatar />
 
-          <h3 className='font-bold'>{settings?.tutorName ?? ''}</h3>
+          <h3
+            className={clsx('font-bold', {
+              'text-white': isDarkMode,
+              'text-neutral-700': !isDarkMode
+            })}>
+            {settings?.tutorName ?? t('general.name')}
+          </h3>
         </div>
       </div>
 
@@ -40,6 +52,7 @@ function WidgetInformationPage() {
             icon={item.icon}
             title={t(item.titleKey)}
             description={t(item.descKey)}
+            isDarkMode={isDarkMode}
           />
         ))}
       </div>

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,52 @@ 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/greetings-card/styles.module.css

@@ -1,3 +0,0 @@
-.faceTxt {
-  composes: gradientText from '../../../../config/styles/utilities/text-utilities.module.css';
-}

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';
-}