app-tutor-ai-consumer 1.17.0 → 1.18.1

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## [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
+
+- add info button onclick ([84dda83](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/84dda83f12399fc785fecae8927a1404cb1d2dae))
+- add information page ([20996ab](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/20996ab224d07e6a44cf27037f7b35b7373aa307))
+
 # [1.17.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.16.0...v1.17.0) (2025-07-22)
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-tutor-ai-consumer",
-  "version": "1.17.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/icons/book.svg

@@ -0,0 +1,14 @@
+<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_18455_21368)">
+<path d="M15.75 14.2358H4.5C4.08579 14.2358 3.75 14.5716 3.75 14.9858C3.75 15.4001 4.08579 15.7358 4.5 15.7358H15.75V17.2358H4.5C3.25736 17.2358 2.25 16.2285 2.25 14.9858V3.73584C2.25 2.90741 2.92157 2.23584 3.75 2.23584H15.75V14.2358ZM3.75 12.7733C3.87117 12.7487 3.99658 12.7358 4.125 12.7358H14.25V3.73584H3.75V12.7733ZM12 7.48584H6V5.98584H12V7.48584Z" fill="url(#paint0_linear_18455_21368)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_18455_21368" x1="2.25" y1="9.73584" x2="15.75" y2="9.73584" gradientUnits="userSpaceOnUse">
+<stop stop-color="#44D0FF"/>
+<stop offset="1" stop-color="#B48EFF"/>
+</linearGradient>
+<clipPath id="clip0_18455_21368">
+<rect width="18" height="18" fill="white" transform="translate(0 0.73584)"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -9,3 +9,6 @@ export type ValidIconNames =
   | 'info'
   | 'send'
   | 'stop'
+  | 'warning'
+  | 'interrogation'
+  | 'book'

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

@@ -0,0 +1,9 @@
+<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>

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

@@ -0,0 +1,9 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 11.3193C7.5625 11.3193 7.25 11.6631 7.25 12.0693C7.25 12.5068 7.59375 12.8193 8 12.8193C8.40625 12.8193 8.71875 12.5068 8.71875 12.0693C8.75 11.6631 8.40625 11.3193 8 11.3193ZM8 10.0693C8.25 10.0693 8.46875 9.85059 8.46875 9.56934V5.06934C8.46875 4.81934 8.21875 4.56934 8 4.56934C7.75 4.56934 7.5 4.81934 7.5 5.06934V9.56934C7.5 9.85059 7.71875 10.0693 8 10.0693ZM15.75 12.5068L9.5 1.94434C9.1875 1.41309 8.625 1.10059 8 1.06934C7.34375 1.06934 6.78125 1.41309 6.46875 1.94434L0.21875 12.5068C-0.09375 13.0381 -0.09375 13.6631 0.21875 14.1943C0.53125 14.7568 1.09375 15.0693 1.75 15.0693H14.25C14.875 15.0693 15.4375 14.7568 15.75 14.1943C16.0625 13.6631 16.0625 13.0381 15.75 12.5068ZM14.875 13.6943C14.75 13.9443 14.5 14.0693 14.2188 14.0693H1.75C1.46875 14.0693 1.21875 13.9443 1.09375 13.6943C0.9375 13.4756 0.96875 13.2256 1.09375 13.0068L7.34375 2.44434C7.46875 2.22559 7.71875 2.06934 8 2.06934C8.25 2.10059 8.5 2.22559 8.625 2.44434L14.875 13.0068C15 13.2256 15.0312 13.4756 14.875 13.6943Z" fill="url(#paint0_linear_21475_9749)"/>
+<defs>
+<linearGradient id="paint0_linear_21475_9749" x1="-0.015625" y1="8.06934" x2="15.9844" y2="8.06934" gradientUnits="userSpaceOnUse">
+<stop stop-color="#44D0FF"/>
+<stop offset="1" stop-color="#B48EFF"/>
+</linearGradient>
+</defs>
+</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,11 @@
 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 />
+  loading: <WidgetLoadingPage />,
+  information: <WidgetInformationPage />
 }

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

@@ -1,16 +1,16 @@
 import { Button, Icon } from '@/src/lib/components'
 import { TutorWidgetEvents } from '../../events'
+import { useWidgetTabsAtom } from '../../store'
 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>
   )
@@ -31,27 +31,40 @@ export function WidgetHeaderContentWithoutMeta({ name }: { name?: string }) {
 
 function WidgetHeader({
   enabledButtons,
-  clubName,
   tutorName,
   showContentWithoutMeta,
   showContent = true
 }: WidgetHeaderProps) {
+  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'>
+          <Button
+            show={enabledButtons.includes('info')}
+            aria-label='Info Icon'
+            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

@@ -0,0 +1,17 @@
+import type { ValidIconNames } from '@/src/lib/components/icons/icon-names'
+
+type InfoItem = {
+  icon: ValidIconNames
+  titleKey: string
+  descKey: string
+}
+
+export const infoItems: InfoItem[] = [
+  {
+    icon: 'interrogation',
+    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' }
+]

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

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

package/src/modules/widget/components/information-page/information-card/index.ts

@@ -0,0 +1 @@
+export { default as InformationCard } from './information-card'

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

@@ -0,0 +1,25 @@
+import { Icon } from '@/src/lib/components'
+import type { ValidIconNames } from '@/src/lib/components/icons/icon-names'
+
+export type InformationCardProps = {
+  icon: ValidIconNames
+  title: string
+  description: string
+}
+
+function InformationCard({ icon, title, description }: 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'>
+        <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>
+      </div>
+    </div>
+  )
+}
+
+export default InformationCard

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

@@ -0,0 +1,50 @@
+import { useTranslation } from 'react-i18next'
+
+import { Icon } from '@/src/lib/components'
+import { useWidgetSettingsAtom, useWidgetTabsAtom } from '../../store'
+import { AIAvatar } from '../ai-avatar'
+import { PageLayout } from '../page-layout'
+
+import { infoItems } from './constants'
+import { InformationCard } from './information-card'
+
+function WidgetInformationPage() {
+  const { t } = useTranslation()
+  const [, setWidgetTabs] = useWidgetTabsAtom()
+  const [settings] = useWidgetSettingsAtom()
+
+  return (
+    <PageLayout className='p-5 text-white'>
+      <div className='relative mb-8 flex h-12 items-center justify-center'>
+        <button
+          className='absolute left-0'
+          aria-label='Return Button'
+          onClick={() => setWidgetTabs('chat')}>
+          <Icon name='arrow-left' width={16} height={16} />
+        </button>
+        <h1 className='mx-auto font-bold'>{t('info.title')}</h1>
+      </div>
+
+      <div className='mb-8 flex justify-center'>
+        <div className='flex flex-col items-center gap-2'>
+          <AIAvatar />
+
+          <h3 className='font-bold'>{settings?.tutorName ?? ''}</h3>
+        </div>
+      </div>
+
+      <div className='flex flex-col gap-5'>
+        {infoItems.map((item) => (
+          <InformationCard
+            key={item.titleKey}
+            icon={item.icon}
+            title={t(item.titleKey)}
+            description={t(item.descKey)}
+          />
+        ))}
+      </div>
+    </PageLayout>
+  )
+}
+
+export default WidgetInformationPage

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