app-tutor-ai-consumer 1.21.2 → 1.22.1

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## [1.22.1](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.22.0...v1.22.1) (2025-08-06)
+
+### Bug Fixes
+
+- qa issues part 1 ([6b99c06](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/6b99c06114fee13fb4d4dd68e4888392007988a4))
+
+# [1.22.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.21.2...v1.22.0) (2025-08-04)
+
+### Features
+
+- add button default ([e10c478](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/e10c47844c68815df58a942250fef1fcd1d0f676))
+- add useInitSparkie ([f3dd5f9](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/f3dd5f9d9542f755126e4fcc2af8e8a500703753))
+
 ## [1.21.2](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.21.1...v1.21.2) (2025-08-01)
 
 ## [1.21.1](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.21.0...v1.21.1) (2025-07-31)

package/config/vitest/__mocks__/animation-avatar.tsx

@@ -0,0 +1,3 @@
+vi.mock('@/src/modules/widget/components/avatar-animation', () => ({
+  AvatarAnimation: vi.fn(() => <div data-test='avatar-animation-icon'>AvatarAnimation</div>)
+}))

package/config/vitest/vitest.config.mts

@@ -13,6 +13,7 @@ export default defineConfig({
       './config/vitest/__mocks__/i18n.tsx',
       './config/vitest/__mocks__/sparkie.tsx',
       './config/vitest/__mocks__/icons.tsx',
+      './config/vitest/__mocks__/animation-avatar.tsx',
       './config/vitest/__mocks__/intersection-observer.ts',
       './config/vitest/polyfills/global.js'
     ],

package/package.json

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

package/src/config/styles/index.css

@@ -3,3 +3,29 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer components {
+  .shine-box {
+    background-color: var(--shb-bg-color, var(--hc-color-neutral-200));
+    background-size: 200% 100%;
+    background-image: linear-gradient(
+      90deg,
+      transparent 0%,
+      rgb(from var(--shb-shine-color, var(--hc-color-neutral-900)) r g b / 0.3) 50%,
+      transparent 100%
+    );
+    animation-name: slideShine;
+    animation-duration: 1s;
+    animation-timing-function: cubic-bezier(0.5, -0.5, 1, 1.5);
+    animation-iteration-count: infinite;
+  }
+
+  @keyframes slideShine {
+    0% {
+      background-position: 100% 0;
+    }
+    100% {
+      background-position: -100% 0;
+    }
+  }
+}

package/src/development-bootstrap.tsx

@@ -23,6 +23,9 @@ if (devMode) {
       '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-200 shadow-lg overflow-hidden flex flex-col'
     )
 
+    // Theme setter
+    container.setAttribute('data-theme', 'dark')
+
     root?.appendChild(container)
 
     await window.startChatWidget(rootId, {

package/src/lib/components/button/button-default.tsx

@@ -0,0 +1,35 @@
+import clsx from 'clsx'
+import type { ButtonHTMLAttributes, PropsWithChildren } from 'react'
+
+export type ButtonDefaultProps = PropsWithChildren<
+  ButtonHTMLAttributes<HTMLButtonElement> & {
+    show?: boolean
+    loading?: boolean
+  }
+>
+
+function ButtonDefault({
+  loading,
+  className,
+  children,
+  show = true,
+  ...props
+}: ButtonDefaultProps) {
+  if (!show) return null
+
+  return (
+    <button
+      {...props}
+      className={clsx(
+        'rounded text-base font-medium outline-none focus-visible:ring-2 focus-visible:ring-neutral-500',
+        className
+      )}
+      type={props.type ?? 'button'}
+      disabled={props.disabled || loading}
+      aria-busy={loading}>
+      {children}
+    </button>
+  )
+}
+
+export default ButtonDefault

package/src/lib/components/button/button.tsx

@@ -1,8 +1,11 @@
 import clsx from 'clsx'
-import type { ButtonHTMLAttributes, PropsWithChildren } from 'react'
+import type { PropsWithChildren } from 'react'
 
 import { Spinner } from '../spinner'
 
+import type { ButtonDefaultProps } from './button-default'
+import ButtonDefault from './button-default'
+
 import styles from './styles.module.css'
 
 function ButtonContent({
@@ -25,13 +28,9 @@ function ButtonContent({
   )
 }
 
-export type ButtonProps = PropsWithChildren<
-  ButtonHTMLAttributes<HTMLButtonElement> & {
-    variant?: 'brand' | 'secondary' | 'primary' | 'tertiary' | 'gradient-outline'
-    show?: boolean
-    loading?: boolean
-  }
->
+export type ButtonProps = ButtonDefaultProps & {
+  variant?: 'brand' | 'secondary' | 'primary' | 'tertiary' | 'gradient-outline'
+}
 
 function Button({
   children,
@@ -53,35 +52,32 @@ function Button({
   switch (variant) {
     case 'gradient-outline':
       return (
-        <button
-          className={clsx(
-            gridClasses,
-            defaultClasses,
-            'group relative inline-flex items-center justify-center overflow-hidden rounded-lg bg-gradient-to-br from-[var(--ai-color-gradient-primary)] to-[var(--ai-color-gradient-accent)] p-[1px] hover:text-neutral-1000 group-hover:from-[var(--ai-color-gradient-primary)] group-hover:to-[var(--ai-color-gradient-accent)]',
-            className
-          )}
+        <ButtonDefault
           {...props}
-          disabled={props.disabled || loading}
-          aria-busy={loading}>
+          loading={loading}
+          show={show}
+          className={clsx(
+            className,
+            styles.gradientButton,
+            'group relative inline-flex items-center justify-center overflow-hidden rounded-lg p-[1px]',
+            {
+              'bg-gradient-to-br from-[var(--ai-color-gradient-primary)] to-[var(--ai-color-gradient-accent)] hover:text-neutral-1000':
+                !loading,
+              'shine-box cursor-not-allowed': loading
+            }
+          )}>
           <span
             data-label='text-content'
             className={clsx(
-              'relative flex-1 rounded-lg bg-neutral-100 px-5 py-2.5 text-neutral-1000 transition-all duration-75 ease-in group-hover:bg-transparent',
-              'flex flex-nowrap gap-2 [grid-area:stack]',
-              {
-                visible: !loading,
-                invisible: loading
-              }
+              'rounded-lg transition-all duration-75 ease-in',
+              'px-5 py-2.5',
+              'text-neutral-1000',
+              'bg-[var(--gradient-btn-hover-background)] hover:bg-[linear-gradient(to_right,_rgb(from_var(--gradient-btn-hover-foreground)_r_g_b_/_var(--gradient-btn-hover-foreground-opacity)),_rgb(from_var(--gradient-btn-hover-foreground)_r_g_b_/_var(--gradient-btn-hover-foreground-opacity))),_linear-gradient(to_right,_var(--gradient-btn-hover-background),_var(--gradient-btn-hover-background))] group-hover:bg-[linear-gradient(to_right,_rgb(from_var(--gradient-btn-hover-foreground)_r_g_b_/_var(--gradient-btn-hover-foreground-opacity)),_rgb(from_var(--gradient-btn-hover-foreground)_r_g_b_/_var(--gradient-btn-hover-foreground-opacity))),_linear-gradient(to_right,_var(--gradient-btn-hover-background),_var(--gradient-btn-hover-background))]',
+              'flex flex-1 flex-nowrap'
             )}>
-            {children}
+            <span className={clsx({ 'opacity-20': loading })}>{children}</span>
           </span>
-          <Spinner
-            className={clsx('mx-auto my-auto h-[1em] w-[1em] text-current', '[grid-area:stack]', {
-              visible: loading,
-              invisible: !loading
-            })}
-          />
-        </button>
+        </ButtonDefault>
       )
     case 'primary':
       return (
@@ -150,13 +146,11 @@ function Button({
       )
     default:
       return (
-        <button
+        <ButtonDefault
           className={clsx(
-            gridClasses,
-            'rounded-full outline-none transition-colors duration-300 ease-in',
+            'rounded-full outline-none transition-colors duration-100',
             {
-              'cursor-pointer ring-primary-500 hover:bg-neutral-300 focus:bg-neutral-300 focus-visible:ring-2':
-                !props.disabled,
+              'cursor-pointer hover:bg-neutral-400 focus:bg-neutral-400': !props.disabled,
               [disabledClasses]: props.disabled
             },
             styles.defaultButton,
@@ -166,7 +160,7 @@ function Button({
           disabled={props.disabled || loading}
           aria-busy={loading}>
           <ButtonContent loading={loading}>{children}</ButtonContent>
-        </button>
+        </ButtonDefault>
       )
   }
 }

package/src/lib/components/button/styles.module.css

@@ -1,3 +1,9 @@
+.gradientButton {
+  --gradient-btn-hover-background: var(--hc-color-neutral-100);
+  --gradient-btn-hover-foreground: var(--hc-color-neutral-1000);
+  --gradient-btn-hover-foreground-opacity: 0.07;
+}
+
 .tertiary {
   &:hover {
     background-color: hsl(from currentColor h s calc(l - 30));

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

@@ -17,5 +17,7 @@ export type ValidIconNames =
   | 'like'
   | 'paste'
   | 'send'
+  | 'sparkle-tutor-light'
+  | 'sparkle-tutor'
   | 'stop'
   | 'warning'

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

@@ -1,3 +1,5 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.459613 5.98654C0.0677077 5.85591 0.0646103 5.64514 0.467675 5.51078L14.7823 0.739229C15.1787 0.607109 15.406 0.828966 15.2949 1.21768L11.205 15.5324C11.0918 15.9287 10.8633 15.9425 10.6959 15.5657L7.99999 9.49997L12.5 3.50001L6.5 7.99997L0.459613 5.98654Z" fill="currentColor"/>
-</svg>
+<svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M13.1236 6.53816L1.66737 0.903633C1.43153 0.787637 1.2011 0.845082 1.02441 1.04583C0.842459 1.25255 0.772227 1.56418 0.928775 1.87216L3.08081 6.10592C3.41727 6.76784 3.41727 7.56083 3.08081 8.22275L0.928776 12.4565C0.772227 12.7645 0.842459 13.0761 1.02441 13.2828C1.2011 13.4836 1.43153 13.541 1.66737 13.425L13.1236 7.7905C13.3469 7.68066 13.4839 7.44778 13.4839 7.16433C13.4839 6.88089 13.3469 6.648 13.1236 6.53816ZM13.4723 5.82916L2.01609 0.194624C0.81102 -0.398066 -0.407713 0.986573 0.224422 2.23019L2.37646 6.46395C2.59855 6.90088 2.59855 7.42779 2.37646 7.86472L0.224423 12.0985C-0.407713 13.3421 0.811018 14.7267 2.01609 14.134L13.4723 8.49951C14.5412 7.9738 14.5412 6.35487 13.4723 5.82916Z"
+    fill="currentColor" />
+</svg>

package/src/lib/components/icons/sparkle-tutor-light.svg

@@ -0,0 +1,15 @@
+<svg viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="28" cy="28.05" r="27" stroke="url(#paint0_linear_23639_22377)" stroke-width="2"/>
+<circle cx="28" cy="28.05" r="23" fill="#E6E9ED"/>
+<path d="M12.3207 28.0869C12.2793 28.082 12.2793 28.0181 12.3207 28.0132C26.995 26.2646 27.3639 17.5043 27.9665 12.331C27.9713 12.2901 28.0287 12.2901 28.0335 12.331C28.6361 17.5043 29.005 26.2646 43.6793 28.0132C43.7207 28.0181 43.7207 28.082 43.6793 28.0869C29.005 29.8354 28.6361 38.5958 28.0335 43.7691C28.0287 43.81 27.9713 43.81 27.9665 43.7691C27.3639 38.5958 26.995 29.8354 12.3207 28.0869Z" fill="url(#paint1_linear_23639_22377)"/>
+<defs>
+<linearGradient id="paint0_linear_23639_22377" x1="0" y1="28.05" x2="56" y2="28.05" gradientUnits="userSpaceOnUse">
+<stop stop-color="#44D0FF"/>
+<stop offset="1" stop-color="#B48EFF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_23639_22377" x1="15" y1="11.8769" x2="40.3572" y2="44.2792" gradientUnits="userSpaceOnUse">
+<stop stop-color="#44D0FF"/>
+<stop offset="1" stop-color="#B48EFF"/>
+</linearGradient>
+</defs>
+</svg>

package/src/lib/components/icons/sparkle-tutor.svg

@@ -0,0 +1,19 @@
+<svg viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="28" cy="28" r="27" stroke="url(#paint0_linear_23573_147690)" stroke-width="2" />
+  <circle cx="28" cy="28" r="23" fill="#282C2F" />
+  <path
+    d="M12.3207 28.0368C12.2793 28.0319 12.2793 27.9681 12.3207 27.9632C26.995 26.2146 27.3639 17.4543 27.9665 12.2809C27.9713 12.24 28.0287 12.24 28.0335 12.2809C28.6361 17.4543 29.005 26.2146 43.6793 27.9632C43.7207 27.9681 43.7207 28.0319 43.6793 28.0368C29.005 29.7854 28.6361 38.5457 28.0335 43.7191C28.0287 43.76 27.9713 43.76 27.9665 43.7191C27.3639 38.5457 26.995 29.7854 12.3207 28.0368Z"
+    fill="url(#paint1_linear_23573_147690)" />
+  <defs>
+    <linearGradient id="paint0_linear_23573_147690" x1="0" y1="28" x2="56" y2="28"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#44D0FF" />
+      <stop offset="1" stop-color="#B48EFF" />
+    </linearGradient>
+    <linearGradient id="paint1_linear_23573_147690" x1="15" y1="11.8268" x2="40.3572" y2="44.2291"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#44D0FF" />
+      <stop offset="1" stop-color="#B48EFF" />
+    </linearGradient>
+  </defs>
+</svg>

package/src/main/main.tsx

@@ -12,14 +12,14 @@ export type MainProps = {
 }
 
 function Main({ settings }: MainProps) {
-  const { completeSetup } = useInitWidget(settings)
+  useInitWidget(settings)
   useAppLang(settings.locale)
   useListenToThemeChangeEvent()
 
   return (
     <ErrorBoundary fallback={<GenericError />}>
       <GlobalProviders settings={settings}>
-        <WidgetContainer completeSetup={completeSetup} />
+        <WidgetContainer />
       </GlobalProviders>
     </ErrorBoundary>
   )

package/src/modules/messages/components/chat-input/chat-input.tsx

@@ -85,15 +85,15 @@ const ChatInput = forwardRef<HTMLTextAreaElement, ChatInputProps>(
         <Button
           onClick={onSend}
           disabled={buttonDisabled || loading}
-          className={clsx('flex size-8 flex-col items-center justify-center', {
-            'text-neutral-700': !buttonDisabled,
-            'text-neutral-400': buttonDisabled
+          className={clsx('flex flex-col items-center justify-center', styles.send, {
+            'bg-neutral-900 text-neutral-100': !buttonDisabled,
+            'text-neutral-900': buttonDisabled
           })}
           loading={loading}
           aria-label='Submit Button'>
           <Icon
             name='send'
-            className='h-4 w-4 pr-0.5 pt-0.5 text-current transition-colors duration-150'
+            className={clsx('ml-0.5 h-4 w-4 p-0.5 text-current transition-colors duration-150')}
           />
         </Button>
       </div>

package/src/modules/messages/components/chat-input/styles.module.css

@@ -1,3 +1,7 @@
 .textArea {
   --custom-scrollbar-width: var(--hc-size-spacing-1);
 }
+
+.send {
+  --custom-btn-padding: 0.125rem;
+}

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

@@ -50,33 +50,40 @@ function MessageActions({ message, className, showActions = false }: MessageActi
         {dayjs(message.timestamp).format('DD/MM [•] LT')}
       </span>
       <div
-        style={{ '--custom-btn-padding': '0.5rem' } as CSSProperties}
-        className={clsx('flex flex-nowrap gap-2 text-neutral-600', {
+        style={{ '--custom-btn-padding': '0.125rem' } as CSSProperties}
+        className={clsx('flex flex-nowrap gap-3 text-neutral-600', {
           hidden: !showActions
         })}>
-        <Button onClick={() => handleReaction()} aria-label={t('general.buttons.like')}>
+        <Button
+          className='hover:!bg-transparent hover:text-info-500 focus:!bg-transparent'
+          onClick={() => handleReaction()}
+          aria-label={t('general.buttons.like')}>
           <Icon
             name='like'
-            className={clsx('h-3 w-3.5', {
+            className={clsx('size-3', {
               'text-info-500': reaction === ButtonReactions.LIKE
             })}
           />
         </Button>
         <Button
-          className='rotate-180 scale-x-[-1]'
+          className='rotate-180 scale-x-[-1] hover:!bg-transparent hover:text-danger-500 focus:!bg-transparent'
           onClick={() => handleReaction(ButtonReactions.DISLIKE)}
           aria-label={t('general.buttons.dislike')}>
           <Icon
             name='like'
-            className={clsx('h-3 w-3.5', {
+            className={clsx('size-3', {
               'text-danger-500': reaction === ButtonReactions.DISLIKE
             })}
           />
         </Button>
-        <Button onClick={copyToClipboard} aria-label={t('general.buttons.copy')} disabled={copying}>
+        <Button
+          className='hover:!bg-transparent hover:text-info-500 focus:!bg-transparent'
+          onClick={copyToClipboard}
+          aria-label={t('general.buttons.copy')}
+          disabled={copying}>
           <Icon
             name={copied ? 'paste' : 'copy'}
-            className={clsx('h-3 w-3.5', {
+            className={clsx('size-3', {
               'text-info-500': copied
             })}
           />

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

@@ -17,7 +17,7 @@ function MessageItem({ message }: { message: ParsedMessage }) {
   return (
     <div
       className={clsx(
-        'flex max-w-[min(90%,52rem)] flex-col items-end gap-2 text-sm/normal text-neutral-900',
+        'flex max-w-[min(90%,52rem)] flex-col items-end gap-1 text-sm/normal text-neutral-900',
         {
           'self-end': messageFromUser
         }

package/src/modules/messages/constants.ts

@@ -3,5 +3,7 @@ export const MSG_MAX_PAGES = 20
 
 export const MessagesEndpoints = {
   getAll: (conversationId: string) =>
+    `${process.env.API_CONVERSATION_URL}/v1/conversations/${conversationId}/messages`,
+  create: (conversationId: string) =>
     `${process.env.API_CONVERSATION_URL}/v1/conversations/${conversationId}/messages`
 }

package/src/modules/messages/hooks/use-send-text-message/use-send-text-message.spec.tsx

@@ -1,7 +1,7 @@
 import { UAParser } from 'ua-parser-js'
 
 import { act, chance, renderHook, waitFor } from '@/src/config/tests'
-import { MessagesService } from '@/src/modules/messages'
+import { DirectMessagesService as MessagesService } from '@/src/modules/messages'
 import { useGetProfile } from '@/src/modules/profile'
 import * as Store from '@/src/modules/widget'
 import WidgetSettingPropsBuilder from '@/src/modules/widget/__tests__/widget-settings-props.builder'
@@ -57,40 +57,42 @@ describe('useSendTextMessage', () => {
     const txt = 'question::summary'
     const text = txt.replace('question::', '')
 
-    vi.spyOn(MessagesService, 'sendTextMessage')
+    vi.spyOn(MessagesService, 'create')
 
     const { result } = render()
 
     await waitFor(() => result.current.mutateAsync(txt))
 
-    expect(MessagesService.sendTextMessage).toHaveBeenCalledTimes(1)
-    expect(MessagesService.sendTextMessage).toHaveBeenNthCalledWith(1, {
-      content: {
-        type: 'text/plain',
-        text
-      },
+    expect(MessagesService.create).toHaveBeenCalledTimes(1)
+    expect(MessagesService.create).toHaveBeenNthCalledWith(1, {
       conversationId: defaultSettings.conversationId,
-      metadata: {
-        author: 'user',
-        contactId: defaultSettings.contactId,
-        context: {
-          language: defaultSettings.locale,
-          clubName: defaultSettings.clubName,
-          productName: defaultSettings.productName,
-          productId: defaultSettings.productId,
-          classHashId: defaultSettings.classHashId,
-          owner_id: defaultSettings.owner_id,
-          current_media_codes: defaultSettings.current_media_codes,
-          question: text,
-          router: text,
-          osVersion: UAParserMock.browser.version,
-          platformDetail: UAParserMock.browser.name,
-          ucode: defaultSettings.user?.ucode
+      message: {
+        content: {
+          type: 'text/plain',
+          text
         },
-        externalId: expect.any(String),
-        namespace: defaultSettings.namespace,
-        sessionId: defaultSettings.sessionId,
-        userId: String(getProfileMock.data.userId)
+        metadata: {
+          author: 'user',
+          contactId: defaultSettings.contactId,
+          context: {
+            language: defaultSettings.locale,
+            clubName: defaultSettings.clubName,
+            productName: defaultSettings.productName,
+            productId: defaultSettings.productId,
+            classHashId: defaultSettings.classHashId,
+            owner_id: defaultSettings.owner_id,
+            current_media_codes: defaultSettings.current_media_codes,
+            question: text,
+            router: text,
+            osVersion: UAParserMock.browser.version,
+            platformDetail: UAParserMock.browser.name,
+            ucode: defaultSettings.user?.ucode
+          },
+          externalId: expect.any(String),
+          namespace: defaultSettings.namespace,
+          sessionId: defaultSettings.sessionId,
+          userId: String(getProfileMock.data.userId)
+        }
       }
     })
   })

package/src/modules/messages/hooks/use-send-text-message/use-send-text-message.tsx

@@ -3,7 +3,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { UAParser } from 'ua-parser-js'
 import { v4 } from 'uuid'
 
-import { MessagesService } from '@/src/modules/messages'
+import { DirectMessagesService as MessagesService } from '@/src/modules/messages'
 import { useGetProfile } from '@/src/modules/profile'
 import { useWidgetLoadingAtom, useWidgetSettingsAtomValue } from '@/src/modules/widget'
 import { MessagesEvents } from '../../events'
@@ -47,35 +47,37 @@ function useSendTextMessage() {
         questionParam = processedMessage
       }
 
-      return MessagesService.sendTextMessage({
-        content: {
-          type: 'text/plain',
-          text: processedMessage
-        },
+      return MessagesService.create({
         conversationId: settings?.conversationId,
-        metadata: {
-          author: 'user',
-          contactId: settings.contactId,
-          context: {
-            language: settings.locale,
-            clubName: settings.clubName,
-            productName: settings.productName,
-            productId: settings.productId,
-            productType: settings.productType,
-            classType: settings.classType,
-            classHashId: settings.classHashId,
-            owner_id: settings?.owner_id,
-            current_media_codes: settings?.current_media_codes,
-            question: questionParam,
-            router: questionParam ? 'summary' : undefined,
-            osVersion: browserInfo.version,
-            platformDetail: browserInfo.name,
-            ucode: settings.user?.ucode
+        message: {
+          content: {
+            type: 'text/plain',
+            text: processedMessage
           },
-          externalId: v4(),
-          namespace: settings.namespace,
-          sessionId: settings.sessionId,
-          userId
+          metadata: {
+            author: 'user',
+            contactId: settings.contactId,
+            context: {
+              language: settings.locale,
+              clubName: settings.clubName,
+              productName: settings.productName,
+              productId: settings.productId,
+              productType: settings.productType,
+              classType: settings.classType,
+              classHashId: settings.classHashId,
+              owner_id: settings?.owner_id,
+              current_media_codes: settings?.current_media_codes,
+              question: questionParam,
+              router: questionParam ? 'summary' : undefined,
+              osVersion: browserInfo.version,
+              platformDetail: browserInfo.name,
+              ucode: settings.user?.ucode
+            },
+            externalId: v4(),
+            namespace: settings.namespace,
+            sessionId: settings.sessionId,
+            userId
+          }
         }
       })
     },

package/src/modules/messages/index.ts

@@ -1,3 +1,4 @@
 export * from './constants'
 export { default as MessagesService } from './service'
+export { default as DirectMessagesService } from './service.direct'
 export * from './types'

package/src/modules/messages/service.direct.ts

@@ -0,0 +1,41 @@
+import type { Message } from '@hotmart/sparkie/dist/MessageService'
+
+import { api } from '@/src/config/request'
+
+import { MessagesEndpoints } from './constants'
+import type {
+  DirectMessagesServiceProps,
+  FetchMessagesResponse,
+  IMessageWithSenderData
+} from './types'
+
+class DirectMessagesService {
+  async getAll({ conversationId, before, limit }: DirectMessagesServiceProps['GetAll']) {
+    const { data: messages } = await api.get<IMessageWithSenderData[]>(
+      MessagesEndpoints.getAll(conversationId),
+      {
+        params: {
+          before,
+          limit
+        }
+      }
+    )
+
+    return {
+      messages,
+      hasMore: messages.length === limit
+    } as FetchMessagesResponse
+  }
+
+  async create({ conversationId, message }: DirectMessagesServiceProps['Create']) {
+    const { data } = await api.post<Message>(MessagesEndpoints.create(conversationId), {
+      ...message,
+      type: 'message',
+      channel: 'chat'
+    })
+
+    return data
+  }
+}
+
+export default new DirectMessagesService()

package/src/modules/messages/types.ts

@@ -1,4 +1,8 @@
-import type { Message as SparkieMsg, SenderData } from '@hotmart/sparkie/dist/MessageService'
+import type {
+  Message as SparkieMsg,
+  MessageContent,
+  SenderData
+} from '@hotmart/sparkie/dist/MessageService'
 
 export type IMessage = SparkieMsg & {
   metadata: {
@@ -80,3 +84,20 @@ export type FetchMessagesResponse = {
 export type SubmitQuestionEventDetail = {
   timestamp: number
 }
+
+export type DirectMessagesServiceProps = {
+  GetAll: {
+    conversationId: string
+    before: number
+    limit: number
+  }
+  Create: {
+    conversationId: string
+    message: {
+      content: MessageContent
+      threadId?: string
+      parentId?: string
+      metadata?: Record<string, unknown>
+    }
+  }
+}

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

@@ -0,0 +1 @@
+export * from './use-init-sparkie'

package/src/modules/sparkie/hooks/use-init-sparkie/index.ts

@@ -0,0 +1,2 @@
+export * from './use-init-sparkie'
+export { default as useInitSparkie } from './use-init-sparkie'

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

@@ -0,0 +1,39 @@
+import { useCallback, useEffect, useState } from 'react'
+
+import { useWidgetSettingsAtomValue } from '@/src/modules/widget'
+import { SparkieService } from '../..'
+
+function useInitSparkie() {
+  const [isSuccess, setIsSuccess] = useState(false)
+  const settings = useWidgetSettingsAtomValue()
+
+  const init = useCallback(async () => {
+    if (!settings?.hotmartToken) return
+
+    try {
+      await SparkieService.initSparkie({
+        token: settings?.hotmartToken,
+        skipPresenceSetup: true,
+        retryOptions: {
+          maxRetries: 5,
+          retryDelay: 2000,
+          backoffMultiplier: 1.5
+        }
+      })
+      await SparkieService.ensureInitialized()
+      setIsSuccess(true)
+    } catch {
+      setIsSuccess(false)
+      // TODO: Create Error PAGE and setTab
+      // setTab('information')
+    }
+  }, [settings?.hotmartToken])
+
+  useEffect(() => {
+    void init()
+  }, [init])
+
+  return isSuccess
+}
+
+export default useInitSparkie

package/src/modules/widget/components/ai-avatar/ai-avatar.tsx

@@ -1,20 +1,31 @@
 import clsx from 'clsx'
 
 import { Icon } from '@/src/lib/components'
+import { useWidgetSettingsAtomValue } from '../../store'
 
-import styles from './styles.module.css'
-
-export type AIAvatarProps = { className?: string }
+export type AIAvatarProps = { className?: string; size?: 'sm' | 'lg' }
 
 function AIAvatar({
-  className = 'rounded-full border-4 border-neutral-100 bg-neutral-200'
+  className = 'rounded-full border-4 border-neutral-100 bg-neutral-200',
+  size = 'sm'
 }: AIAvatarProps) {
+  const settings = useWidgetSettingsAtomValue()
+  const isDarkTheme = settings?.config?.theme === 'dark'
   return (
     <figure
-      className={clsx('flex h-9 w-9 items-center justify-center rounded-full', styles.avatar)}>
-      <div className={clsx('flex h-8 w-8 items-center justify-center', className)}>
-        <Icon name='ai-color' className='h-6 w-6' aria-label='AI avatar Icon' />
-      </div>
+      className={clsx(
+        'flex items-center justify-center rounded-full',
+        {
+          'bg-neutral-100': isDarkTheme,
+          'bg-white': !isDarkTheme
+        },
+        className
+      )}>
+      <Icon
+        name={!isDarkTheme ? 'sparkle-tutor-light' : 'sparkle-tutor'}
+        className={clsx({ 'h-9 w-9': size === 'sm', 'h-14 w-14': size === 'lg' })}
+        aria-label='AI avatar Icon'
+      />
     </figure>
   )
 }

package/src/modules/widget/components/avatar-animation/avatar-animation.tsx

@@ -4,7 +4,7 @@ const AVATAR_ANIMATION_URL = `${process.env.STATIC_URL}/tutor/tutor_sparkle.lott
 
 const AvatarAnimation = () => {
   return (
-    <div className='flex h-11 w-11 items-center justify-center rounded-lg bg-ai-chat-response'>
+    <div className='flex h-11 w-11 items-center justify-center rounded-lg bg-neutral-300'>
       <DotLottieReact src={AVATAR_ANIMATION_URL} loop autoplay className='h-auto w-full' />
     </div>
   )

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

@@ -1,24 +1,16 @@
-import { useEffect } from 'react'
-
 import { useSubscribeMessageReceivedEvent } from '@/src/modules/messages/hooks'
 import { useSubscribeThreadClosedEvent } from '@/src/modules/thread/hooks'
 import { useListenToVisibilityEvents } from '../../hooks'
 import { useWidgetTabsAtom } from '../../store'
 import { WIDGET_TABS } from '../constants'
 
-function WidgetContainer({ completeSetup = false }: { completeSetup?: boolean }) {
-  const [widgetTabs, setTab] = useWidgetTabsAtom()
+function WidgetContainer() {
+  const [widgetTabs] = useWidgetTabsAtom()
 
   useSubscribeMessageReceivedEvent()
   useSubscribeThreadClosedEvent()
   useListenToVisibilityEvents()
 
-  useEffect(() => {
-    if (completeSetup) {
-      setTab('starter')
-    }
-  }, [completeSetup, setTab])
-
   return (
     <div className='flex h-full flex-col items-center justify-stretch overflow-hidden'>
       {WIDGET_TABS[widgetTabs.currentTab]}

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

@@ -1,6 +1,8 @@
 import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
 
+import { AIAvatar } from '../ai-avatar'
+
 export type GreetingsCardProps = {
   tutorName: string
   author?: string
@@ -12,6 +14,9 @@ function GreetingsCard({ author, tutorName, isDarkTheme = false }: GreetingsCard
 
   return (
     <div className='flex flex-col items-center justify-center'>
+      <div className='max-md:hidden md:mb-4 md:block'>
+        <AIAvatar size='lg' />
+      </div>
       <div className='flex flex-col items-center justify-center gap-4 text-center'>
         <div className='flex flex-col gap-2'>
           <span

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

@@ -19,7 +19,7 @@ describe('<WidgetHeader />', () => {
   it('should render WidgetHeaderContent when prop showContent is true', () => {
     renderComponent()
 
-    expect(screen.getByText(/ai-color/i)).toBeInTheDocument()
+    expect(screen.getByText(/sparkle-tutor-light/i)).toBeInTheDocument()
 
     expect(screen.queryByRole('button', { name: /Arrow Left Icon/i })).not.toBeInTheDocument()
   })
@@ -33,7 +33,7 @@ describe('<WidgetHeader />', () => {
 
     expect(screen.getByRole('button', { name: /Arrow Left Icon/i })).toBeInTheDocument()
 
-    expect(screen.queryByText(/ai-color/i)).not.toBeInTheDocument()
+    expect(screen.queryByText(/sparkle-tutor-light/i)).not.toBeInTheDocument()
   })
 
   it('should be able to render the remaining icons', () => {

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

@@ -43,7 +43,7 @@ export function WidgetHeaderContentWithoutMeta({ name }: { name?: string }) {
 }
 
 function WidgetHeader({
-  enabledButtons,
+  enabledButtons = [],
   tutorName,
   showContentWithoutMeta,
   showContent = true
@@ -73,7 +73,7 @@ function WidgetHeader({
           </Button>
         </div>
       </div>
-      <div className='grid-areas-[a_b] grid grid-cols-[1fr_auto] items-center'>
+      <div className='grid-areas-[a_b] grid grid-cols-[1fr_auto] items-center pb-4'>
         <div className='grid-area-[a] relative'>
           {showContent && !showContentWithoutMeta && <WidgetHeaderContent tutorName={name} />}
           {showContentWithoutMeta && !showContent && <WidgetHeaderContentWithoutMeta name={name} />}

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

@@ -3,7 +3,7 @@ import type { ValidIconNames } from '@/src/lib/components/icons/icon-names'
 export type WidgetHeaderContentProps = { tutorName?: string }
 
 export type WidgetHeaderProps = {
-  enabledButtons: ValidIconNames[]
+  enabledButtons?: ValidIconNames[]
   showContent?: boolean
   showContentWithoutMeta?: boolean
 } & WidgetHeaderContentProps

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

@@ -1,3 +1,4 @@
+import { t } from '@/src/config/i18n'
 import type { ValidIconNames } from '@/src/lib/components/icons/icon-names'
 
 type InfoItem = {
@@ -6,10 +7,10 @@ type InfoItem = {
   descKey: string
 }
 
-export const infoItems: InfoItem[] = [
+export const infoItems: (config: { tutorName: string }) => InfoItem[] = ({ tutorName }) => [
   {
     icon: 'interrogation',
-    titleKey: 'info.what_it_does_question',
+    titleKey: t('info.what_it_does_question', { tutor_name: tutorName }),
     descKey: 'info.what_it_does_answer'
   },
   {

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

@@ -13,6 +13,7 @@ function WidgetInformationPage() {
   const { t } = useTranslation()
   const [settings] = useWidgetSettingsAtom()
   const isDarkMode = settings?.config?.theme === 'dark'
+  const tutorName = settings?.tutorName ?? t('general.name')
 
   return (
     <PageLayout className='flex min-h-0 flex-col text-neutral-900 max-md:p-[1.125rem] md:p-5'>
@@ -27,20 +28,20 @@ function WidgetInformationPage() {
 
       <div className='my-8 flex justify-center'>
         <div className='flex flex-col items-center gap-2'>
-          <AIAvatar />
+          <AIAvatar size='lg' />
 
           <h3
             className={clsx('font-bold', {
               'text-white': isDarkMode,
               'text-neutral-700': !isDarkMode
             })}>
-            {settings?.tutorName ?? t('general.name')}
+            {tutorName}
           </h3>
         </div>
       </div>
 
       <div className='flex flex-col gap-5'>
-        {infoItems.map((item) => (
+        {infoItems({ tutorName }).map((item) => (
           <InformationCard
             key={item.titleKey}
             icon={item.icon}

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

@@ -15,8 +15,8 @@ const ScrollToBottomButton = forwardRef<HTMLButtonElement, IScrollToBottomButton
       {...props}
       ref={ref}
       className={clsx(
-        'absolute bottom-4 left-1/2 flex size-7 cursor-pointer flex-col items-center justify-center rounded-full bg-neutral-400 text-sm text-neutral-900 outline-none transition-colors duration-300 ease-in hover:scale-110 hover:bg-neutral-500 focus:outline-none focus:ring-neutral-500 focus:ring-offset-2 focus-visible:ring-2 active:ring-2',
-        { 'opacity-80': show, 'pointer-events-none opacity-0': !show },
+        'absolute bottom-4 left-1/2 flex size-7 -translate-x-1/2 cursor-pointer flex-col items-center justify-center rounded-full border border-neutral-500 bg-neutral-300 text-sm text-neutral-900 outline-none transition-colors duration-300 ease-in hover:scale-110 hover:bg-neutral-400 focus:outline-none focus:ring-neutral-500 focus:ring-offset-2 focus-visible:ring-2 active:ring-2',
+        { 'opacity-90': show, 'pointer-events-none opacity-0': !show },
         className
       )}
       onClick={onClick}

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

@@ -8,6 +8,10 @@ vi.mock('@/src/modules/messages/hooks', () => ({
   useSendTextMessage: vi.fn()
 }))
 
+vi.mock('@/src/modules/sparkie/hooks/use-init-sparkie', () => ({
+  useInitSparkie: vi.fn(() => true)
+}))
+
 describe('WidgetStarterPage', () => {
   const useSendTextMessageMock = { mutate: vi.fn() }
 
@@ -23,7 +27,7 @@ describe('WidgetStarterPage', () => {
     expect(
       screen.getByRole('button', { name: /starter_page.what_does_tutor_do/i })
     ).toBeInTheDocument()
-    expect(screen.getByRole('button', { name: /starter_page.wanna_summary/i })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /starter_page.test_me/i })).toBeInTheDocument()
   })
 
   it('should post the slider button text content to the backend', async () => {

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

@@ -1,7 +1,6 @@
 import { useEffect, useMemo, useRef } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
-import clsx from 'clsx'
-import type { MouseEventHandler } from 'react'
+import type { CSSProperties, MouseEventHandler } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { Button, HorizontalDraggableScroll } from '@/src/lib/components'
@@ -10,13 +9,12 @@ import { ChatInput, useChatInputValueAtom } from '@/src/modules/messages/compone
 import { getAllMessagesQuery, useSendTextMessage } from '@/src/modules/messages/hooks'
 import { useMessagesMaxCount } from '@/src/modules/messages/store'
 import { useGetProfile } from '@/src/modules/profile'
+import { useInitSparkie } from '@/src/modules/sparkie/hooks/use-init-sparkie'
 import { useWidgetSettingsAtom, useWidgetTabsAtom } from '../../store'
 import { GreetingsCard } from '../greetings-card'
 import { WidgetHeader } from '../header'
 import { PageLayout } from '../page-layout'
 
-import styles from './styles.module.css'
-
 function WidgetStarterPage() {
   const { t } = useTranslation()
   const [settings] = useWidgetSettingsAtom()
@@ -28,6 +26,8 @@ function WidgetStarterPage() {
   const limit = useMessagesMaxCount()
   const queryClient = useQueryClient()
   const name = settings?.tutorName ?? t('general.name')
+  const isDarkTheme = settings?.config?.theme === 'dark'
+  const isSparkieReady = useInitSparkie()
 
   useRefEventListener<HTMLTextAreaElement>({
     config: {
@@ -74,9 +74,21 @@ function WidgetStarterPage() {
     [conversationId, limit, profileId]
   )
 
+  const actionButtonStyle = useMemo(
+    () =>
+      isDarkTheme
+        ? undefined
+        : ({
+            '--gradient-btn-hover-foreground': '#0d0d0d'
+          } as CSSProperties),
+    [isDarkTheme]
+  )
+
   useEffect(() => {
+    if (!conversationId || !profileId) return
+
     void queryClient.prefetchInfiniteQuery(messagesQueryConfig)
-  }, [messagesQueryConfig, queryClient])
+  }, [conversationId, messagesQueryConfig, profileId, queryClient])
 
   return (
     <PageLayout
@@ -85,38 +97,43 @@ function WidgetStarterPage() {
           name='new-chat-msg-input'
           ref={chatInputRef}
           onSend={handleSend}
-          buttonDisabled={!chatInputValue.trim()}
+          buttonDisabled={!chatInputValue.trim() || !isSparkieReady}
         />
       }>
       <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 max-md:p-[1.125rem] md:p-5', {
-            [styles.bg]: settings?.config?.theme === 'dark'
-          })}>
-          <WidgetHeader enabledButtons={['archive', 'info', 'close']} tutorName={name} />
+        <div className='grid-area-[a] flex min-h-0 flex-col max-md:px-[1.125rem] max-md:pt-[1.125rem] md:px-5 md:pt-5'>
+          <WidgetHeader
+            enabledButtons={isSparkieReady ? ['close', 'archive', 'info'] : ['close', 'info']}
+            showContent={false}
+            tutorName={name}
+          />
 
           <div className='my-auto'>
             <GreetingsCard
-              author={settings?.user?.name}
+              author={settings?.user?.name?.split(' ')?.[0]}
               tutorName={name}
               isDarkTheme={settings?.config?.theme === 'dark'}
             />
           </div>
         </div>
-        <HorizontalDraggableScroll className='grid-area-[b] mx-5 my-6 flex flex-shrink-0 snap-x snap-mandatory gap-2 overflow-x-auto whitespace-nowrap [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'>
+        <HorizontalDraggableScroll className='grid-area-[b] my-4 flex flex-shrink-0 snap-x snap-mandatory gap-2 overflow-x-auto whitespace-nowrap [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'>
           <Button
             variant='gradient-outline'
-            className='shrink-0 snap-end text-sm'
-            onClick={handleAskQuestion}>
+            style={actionButtonStyle}
+            className='ml-5 shrink-0 text-sm'
+            onClick={handleAskQuestion}
+            loading={!isSparkieReady}>
             <span>🤖 </span>
             {t('starter_page.what_does_tutor_do')}
           </Button>
           <Button
             variant='gradient-outline'
-            className='shrink-0 snap-end text-sm'
-            onClick={handleAskQuestion}>
+            style={actionButtonStyle}
+            className='mr-5 shrink-0 text-sm'
+            onClick={handleAskQuestion}
+            loading={!isSparkieReady}>
             <span>📝 </span>
-            {t('starter_page.wanna_summary')}
+            {t('starter_page.test_me')}
           </Button>
         </HorizontalDraggableScroll>
       </div>

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

@@ -3,7 +3,6 @@ import { useEffect, useState } from 'react'
 import { DataHubStore } from '@/src/config/datahub'
 import { initDayjs } from '@/src/config/dayjs'
 import { initAxios } from '@/src/config/request/api'
-import { SparkieService } from '@/src/modules/sparkie'
 import type { WidgetSettingProps } from '@/src/types'
 import { TutorWidgetEvents } from '../../events'
 
@@ -18,16 +17,6 @@ const init = async (settings: WidgetSettingProps) => {
       sessionId: settings.sessionId,
       userId: Number(settings.userId)
     })
-    await SparkieService.initSparkie({
-      token: settings?.hotmartToken,
-      skipPresenceSetup: true,
-      retryOptions: {
-        maxRetries: 5,
-        retryDelay: 2000,
-        backoffMultiplier: 1.5
-      }
-    })
-    await SparkieService.ensureInitialized()
     TutorWidgetEvents['tutor-app-widget-loaded'].dispatch()
   } catch (error) {
     console.error(error)

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

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