app-tutor-ai-consumer 1.21.1 → 1.22.0

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+# [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)
 
 # [1.21.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.20.0...v1.21.0) (2025-07-29)

package/config/rspack/utils/envs.js

@@ -20,7 +20,8 @@ const envs = [
   'VLC_PASSWORD',
   'SECURITY_BASE_URL',
   'AUTH_CLIENT_SECRET',
-  'BUNDLE_PATH'
+  'BUNDLE_PATH',
+  'STATIC_URL'
 ]
 
 const localEnvs = ['MEMBERSHIP_SLUG']

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/environments/.env.development

@@ -40,3 +40,5 @@ AUTH_CLIENT_SECRET=Basic OWRiYThiNTYtMWE5OC0xMWU5LWFiMTQtZDY2M2JkODczZDkzOmFiZmR
 # BUNDLE
 BUNDLE_PATH=https://local.buildstaging.com:4223
 
+# STATIC
+STATIC_URL=https://static.hotmart.com

package/environments/.env.production

@@ -39,3 +39,5 @@ AUTH_CLIENT_SECRET=
 # BUNDLE
 BUNDLE_PATH=https://app-club-microfrontends-prod.cp.hotmart.com
 
+# STATIC
+STATIC_URL=https://static.hotmart.com

package/environments/.env.staging

@@ -38,3 +38,6 @@ AUTH_CLIENT_SECRET=
 
 # BUNDLE
 BUNDLE_PATH=https://app-club-microfrontends.buildstaging.com
+
+# STATIC
+STATIC_URL=https://static.hotmart.com

package/environments/.env.test

@@ -40,4 +40,7 @@ AUTH_CLIENT_SECRET=
 # BUNDLE
 BUNDLE_PATH=
 
-VITE_REACT_QUERY_EXPERIMENTAL_PREFETCH_IN_RENDER=true
+VITE_REACT_QUERY_EXPERIMENTAL_PREFETCH_IN_RENDER=true
+
+# STATIC
+STATIC_URL=

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-tutor-ai-consumer",
-  "version": "1.21.1",
+  "version": "1.22.0",
   "main": "index.js",
   "scripts": {
     "dev": "rspack serve --env=development --config config/rspack/rspack.config.js",
@@ -106,6 +106,7 @@
     "@hot-observability-js/react": "~1.1.0",
     "@hotmart/event-agent-js": "~1.1.2",
     "@hotmart/sparkie": "~5.1.0",
+    "@lottiefiles/dotlottie-react": "~0.14.4",
     "@optimizely/react-sdk": "~3.2.4",
     "@tanstack/query-sync-storage-persister": "~5.80.7",
     "@tanstack/react-query": "~5.80.6",

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/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-blue-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,
@@ -42,7 +41,7 @@ function Button({
   ...props
 }: ButtonProps) {
   const defaultClasses =
-    'rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 text-base font-medium'
+    'rounded outline-none focus-visible:ring-2 focus-visible:ring-blue-500 text-base font-medium'
   const defaultBorder = 'border border-transparent'
   const defaultPadding = 'px-4 py-2'
   const disabledClasses = 'cursor-not-allowed'
@@ -53,35 +52,28 @@ 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,
+            '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 group-hover:from-[var(--ai-color-gradient-primary)] group-hover:to-[var(--ai-color-gradient-accent)]':
+                !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
-              }
+              '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'
             )}>
-            {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 (
@@ -152,7 +144,6 @@ function Button({
       return (
         <button
           className={clsx(
-            gridClasses,
             'rounded-full outline-none transition-colors duration-300 ease-in',
             {
               'cursor-pointer ring-primary-500 hover:bg-neutral-300 focus:bg-neutral-300 focus-visible:ring-2':

package/src/lib/components/horizontal-draggable-scroll/horizontal-draggable-scroll.tsx

@@ -0,0 +1,62 @@
+import { useRef, useState } from 'react'
+import clsx from 'clsx'
+import type { MouseEventHandler, PropsWithChildren, WheelEvent } from 'react'
+
+export type HorizontalDraggableScrollProps = PropsWithChildren<{ className?: string }>
+
+function HorizontalDraggableScroll({ children, className }: HorizontalDraggableScrollProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [isDragging, setIsDragging] = useState(false)
+  const [startX, setStartX] = useState(0)
+  const [scrollLeft, setScrollLeft] = useState(0)
+
+  const handleMouseDown: MouseEventHandler<HTMLDivElement> = (e) => {
+    const container = containerRef.current
+
+    if (!container) return
+
+    setIsDragging(true)
+    setStartX(e.clientX)
+    setScrollLeft(container.scrollLeft)
+  }
+
+  const handleMouseMove: MouseEventHandler<HTMLDivElement> = (e) => {
+    const container = containerRef.current
+
+    if (!container || !isDragging) return
+
+    e.preventDefault()
+
+    const walk = e.clientX - startX
+
+    container.scrollLeft = scrollLeft - walk
+  }
+
+  const handleMouseUp = () => {
+    setIsDragging(false)
+  }
+
+  const handleWheel = (e: WheelEvent<HTMLDivElement>) => {
+    e.currentTarget.scrollLeft += e.deltaY
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      onMouseDown={handleMouseDown}
+      onMouseMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+      onMouseLeave={handleMouseUp}
+      onWheel={handleWheel}
+      className={clsx(
+        {
+          'cursor-grabbing select-none': isDragging
+        },
+        className
+      )}>
+      {children}
+    </div>
+  )
+}
+
+export default HorizontalDraggableScroll

package/src/lib/components/horizontal-draggable-scroll/index.ts

@@ -0,0 +1,2 @@
+export * from './horizontal-draggable-scroll'
+export { default as HorizontalDraggableScroll } from './horizontal-draggable-scroll'

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

@@ -0,0 +1,5 @@
+<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 512 512">
+  <path fill="currentColor"
+    d="M64 480H288c17.7 0 32-14.3 32-32V384h32v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V224c0-35.3 28.7-64 64-64h64v32H64c-17.7 0-32 14.3-32 32V448c0 17.7 14.3 32 32 32zM224 320H448c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32H224c-17.7 0-32 14.3-32 32V288c0 17.7 14.3 32 32 32zm-64-32V64c0-35.3 28.7-64 64-64H448c35.3 0 64 28.7 64 64V288c0 35.3-28.7 64-64 64H224c-35.3 0-64-28.7-64-64z"></path>
+</svg>

package/src/lib/components/icons/double-check.svg

@@ -0,0 +1,5 @@
+<svg aria-hidden="true" focusable="false" role="img"
+  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+  <path fill="currentColor"
+    d="M331.3 75.3c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L160 201.4 91.3 132.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l80 80c6.2 6.2 16.4 6.2 22.6 0l160-160zm112 112c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L160 425.4 27.3 292.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l144 144c6.2 6.2 16.4 6.2 22.6 0l272-272z"></path>
+</svg>

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

@@ -5,13 +5,17 @@ export type ValidIconNames =
   | 'arrow-down'
   | 'arrow-left'
   | 'arrow-up'
+  | 'book'
   | 'chevron-down'
-  | 'copy'
+  | 'clone'
   | 'close'
+  | 'copy'
+  | 'double-check'
+  | 'gallery'
   | 'info'
+  | 'interrogation'
   | 'like'
+  | 'paste'
   | 'send'
   | 'stop'
   | 'warning'
-  | 'interrogation'
-  | 'gallery'

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

@@ -0,0 +1,5 @@
+<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 512 512">
+  <path fill="currentColor"
+    d="M160 32c11.6 0 21.3 8.2 23.5 19.2C185 58.6 191.6 64 199.2 64H208c8.8 0 16 7.2 16 16V96H96V80c0-8.8 7.2-16 16-16h8.8c7.6 0 14.2-5.4 15.7-12.8C138.7 40.2 148.4 32 160 32zM64 64h2.7C65 69 64 74.4 64 80V96c0 17.7 14.3 32 32 32H224c17.7 0 32-14.3 32-32V80c0-5.6-1-11-2.7-16H256c17.7 0 32 14.3 32 32h32c0-35.3-28.7-64-64-64H210.6c-9-18.9-28.3-32-50.6-32s-41.6 13.1-50.6 32H64C28.7 32 0 60.7 0 96V384c0 35.3 28.7 64 64 64H192V416H64c-17.7 0-32-14.3-32-32V96c0-17.7 14.3-32 32-32zM288 480c-17.7 0-32-14.3-32-32V192c0-17.7 14.3-32 32-32h96v56c0 22.1 17.9 40 40 40h56V448c0 17.7-14.3 32-32 32H288zM416 165.3L474.7 224H424c-4.4 0-8-3.6-8-8V165.3zM448 512c35.3 0 64-28.7 64-64V235.9c0-12.7-5.1-24.9-14.1-33.9l-59.9-59.9c-9-9-21.2-14.1-33.9-14.1H288c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H448z"></path>
+</svg>

package/src/lib/components/index.ts

@@ -1,5 +1,6 @@
 export * from './button'
 export * from './errors'
+export * from './horizontal-draggable-scroll'
 export * from './icons'
 export * from './markdownrenderer'
 export * from './spinner'

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/message-actions/message-actions.tsx

@@ -18,6 +18,7 @@ export type MessageActionsProps = {
 function MessageActions({ message, className, showActions = false }: MessageActionsProps) {
   const { t } = useTranslation()
   const [copying, setCopying] = useState(false)
+  const [copied, setCopied] = useState(false)
   const [reaction, setReaction] = useState<ButtonReactionsType | null>(null)
 
   const copyToClipboard = (): void => {
@@ -27,11 +28,13 @@ function MessageActions({ message, className, showActions = false }: MessageActi
 
     navigator.clipboard
       .writeText(message.text)
+      .then(() => setCopied(true))
       .catch((err) => {
         console.error('Failed to copy text: ', err)
       })
       .finally(() => {
         setTimeout(() => setCopying(false), 1000)
+        setTimeout(() => setCopied(false), 3000)
       })
   }
 
@@ -72,9 +75,9 @@ function MessageActions({ message, className, showActions = false }: MessageActi
         </Button>
         <Button onClick={copyToClipboard} aria-label={t('general.buttons.copy')} disabled={copying}>
           <Icon
-            name='copy'
+            name={copied ? 'paste' : 'copy'}
             className={clsx('h-3 w-3.5', {
-              'text-info-500': copying
+              'text-info-500': copied
             })}
           />
         </Button>

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

@@ -25,10 +25,14 @@ function MessageItem({ message }: { message: ParsedMessage }) {
       <div
         data-test='messages-item'
         className={clsx('w-full overflow-x-hidden rounded-lg px-3', {
-          'bg-neutral-200': messageFromUser,
-          'border border-neutral-300 bg-neutral-100': messageFromAi
+          'max-w-max bg-[rgb(from_var(--hc-color-neutral-300)_r_g_b_/_0.8)]': messageFromUser,
+          'bg-neutral-200': messageFromAi
         })}>
-        <MarkdownRenderer content={message?.text ?? message?.name} imgComponent={imgComponent} />
+        <MarkdownRenderer
+          content={message?.text ?? message?.name}
+          imgComponent={imgComponent}
+          className='w-full'
+        />
       </div>
       <MessageActions
         className={clsx('flex items-center justify-between gap-2', {

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

@@ -20,7 +20,7 @@ function MessageItemError({ message, retry, show = true }: MessageItemErrorProps
   if (!show) return null
 
   return (
-    <div className='mt-2 flex justify-start gap-2 rounded border border-danger-500 bg-neutral-200 p-4 text-neutral-800'>
+    <div className='absolute bottom-4 flex justify-start gap-2 rounded border border-danger-500 bg-neutral-200 p-4 text-neutral-800 max-md:inset-x-[1.125rem] md:inset-x-5'>
       <span>{t('chat_page.error.loading.content')}</span>
       <Button variant='tertiary' className='px-4 text-sm/relaxed text-danger-400' onClick={retry}>
         {t('chat_page.error.loading.action')}

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

@@ -1,15 +1,18 @@
 import { forwardRef } from 'react'
+import clsx from 'clsx'
 
-import { AIAvatarIcon } from '@/src/modules/widget'
+import { AvatarAnimation } from '@/src/modules/widget'
+
+import styles from './styles.module.css'
 
 const MessageSkeleton = forwardRef<HTMLDivElement>((_, ref) => {
   return (
     <div ref={ref} className='flex flex-col items-start gap-2' aria-label='Loading Component'>
-      <AIAvatarIcon className='rounded-lg bg-ai-chat-response' />
+      <AvatarAnimation />
       <div className='flex w-full flex-col items-start gap-2'>
-        <div className='h-3 w-full animate-pulse rounded-full bg-neutral-200 transition-colors delay-0' />
-        <div className='h-3 w-[83%] animate-pulse rounded-full bg-neutral-200 transition-colors delay-75' />
-        <div className='h-3 w-[56%] animate-pulse rounded-full bg-neutral-200 transition-colors delay-100' />
+        <div className={clsx('h-3 w-full rounded-full', styles.shine)} />
+        <div className={clsx('h-3 w-[83%] rounded-full', styles.shine)} />
+        <div className={clsx('h-3 w-[56%] rounded-full', styles.shine)} />
       </div>
     </div>
   )

package/src/modules/messages/components/message-skeleton/styles.module.css

@@ -0,0 +1,19 @@
+.shine {
+  background: linear-gradient(
+    90deg,
+    var(--hc-color-neutral-200) 33%,
+    rgb(from var(--hc-color-neutral-900) r g b / 0.3) 53%,
+    var(--hc-color-neutral-200) 76%
+  );
+  background-size: 295% 100%;
+  animation: shine 1500ms infinite alternate;
+}
+
+@keyframes shine {
+  0% {
+    background-position: right;
+  }
+  100% {
+    background-position: left;
+  }
+}

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

@@ -1,4 +1,4 @@
-import { forwardRef, useEffect } from 'react'
+import { forwardRef, lazy, Suspense, useEffect } from 'react'
 import clsx from 'clsx'
 import type { MouseEventHandler, PropsWithChildren } from 'react'
 import { createPortal } from 'react-dom'
@@ -14,79 +14,102 @@ import {
 } from '@/src/modules/widget'
 import { useScroller } from '../../hooks'
 
-const MessagesContainer = forwardRef<
-  HTMLDivElement,
-  PropsWithChildren<{
-    showButton?: boolean
-    loading?: boolean
-    handleShowMore?: () => Promise<void>
-  }>
->(({ children, handleShowMore, showButton = false, loading = false }, forwardedRef) => {
-  const { t } = useTranslation()
-  const skeletonRef = useSkeletonRef()
-  const [isLoadingNewMsg] = useWidgetLoadingAtom()
-  const mainLayoutRef = usePageLayoutMainRefContext()
-  const { scrollerRef, scrollToButtonRef, scrollToBottom, showScrollButton } =
-    useScroller(forwardedRef)
+const MessageItemError = lazy(
+  () => import('@/src/modules/messages/components/message-item-error/message-item-error')
+)
 
-  useEffect(() => {
-    scrollToBottom()
-  }, [scrollToBottom])
+export type MessagesContainerProps = PropsWithChildren<{
+  showButton?: boolean
+  loading?: boolean
+  handleShowMore?: () => Promise<void>
+  error?: {
+    show: boolean
+    message: string
+    retry: () => void
+  }
+}>
 
-  const handleClickShowMore: MouseEventHandler<HTMLButtonElement> = (e) => {
-    const scroller = scrollerRef?.current
-    const heightBeforeRender = Number(e?.currentTarget?.scrollHeight)
+const MessagesContainer = forwardRef<HTMLDivElement, MessagesContainerProps>(
+  ({ children, handleShowMore, error, showButton = false, loading = false }, forwardedRef) => {
+    const { t } = useTranslation()
+    const skeletonRef = useSkeletonRef()
+    const [isLoadingNewMsg] = useWidgetLoadingAtom()
+    const mainLayoutRef = usePageLayoutMainRefContext()
+    const { scrollerRef, scrollToButtonRef, scrollToBottom, showScrollButton } =
+      useScroller(forwardedRef)
 
-    void handleShowMore?.().then(() => {
-      if (scroller && !isNaN(heightBeforeRender)) {
-        setTimeout(
-          () =>
-            scroller.scrollTo({
-              top: heightBeforeRender + 10,
-              behavior: 'smooth'
-            }),
-          180
-        )
-      }
-    })
-  }
+    useEffect(() => {
+      scrollToBottom()
+    }, [scrollToBottom])
 
-  return (
-    <div
-      ref={scrollerRef}
-      className='flex h-full flex-col gap-2 overflow-auto max-md:p-[1.125rem] md:p-5'>
-      <div className='mb-auto flex-1 self-center'>
-        <Button
-          className='max-w-max rounded-full border border-neutral-300 bg-neutral-200 px-2 py-1 text-xs/normal tracking-wide text-neutral-900'
-          onClick={handleClickShowMore}
-          loading={loading}
-          show={showButton}>
-          <Icon name='arrow-up' className='h-4 w-3' aria-hidden />
-          <span className='text-nowrap'>{t('general.buttons.show_more')}</span>
-        </Button>
-      </div>
-      {children}
+    const handleClickShowMore: MouseEventHandler<HTMLButtonElement> = (e) => {
+      const scroller = scrollerRef?.current
+      const heightBeforeRender = Number(e?.currentTarget?.scrollHeight)
+
+      void handleShowMore?.().then(() => {
+        if (scroller && !isNaN(heightBeforeRender)) {
+          setTimeout(
+            () =>
+              scroller.scrollTo({
+                top: heightBeforeRender + 10,
+                behavior: 'smooth'
+              }),
+            180
+          )
+        }
+      })
+    }
 
-      {mainLayoutRef.current &&
-        createPortal(
-          <ScrollToBottomButton
-            ref={scrollToButtonRef}
-            show={showScrollButton}
-            onClick={scrollToBottom}
-          />,
-          mainLayoutRef.current
-        )}
+    return (
       <div
-        className={clsx({
-          'pointer-events-none h-0 overflow-hidden opacity-0': !isLoadingNewMsg,
-          'mt-2 pb-4': isLoadingNewMsg
-        })}
-        ref={skeletonRef}>
-        <MessageSkeleton />
+        ref={scrollerRef}
+        className='flex h-full flex-col gap-2 overflow-auto max-md:p-[1.125rem] md:p-5'>
+        <div className='mb-auto flex-1 self-center'>
+          <Button
+            className='max-w-max rounded-full border border-neutral-300 bg-neutral-200 px-2 py-1 text-xs/normal tracking-wide text-neutral-900'
+            onClick={handleClickShowMore}
+            loading={loading}
+            show={showButton}>
+            <Icon name='arrow-up' className='h-4 w-3' aria-hidden />
+            <span className='text-nowrap'>{t('general.buttons.show_more')}</span>
+          </Button>
+        </div>
+        {children}
+
+        {error?.show &&
+          mainLayoutRef.current &&
+          createPortal(
+            <Suspense fallback={<div aria-live='polite' />}>
+              <MessageItemError
+                message={`❌ Error loading messages: ${error?.message}`}
+                show={error?.show}
+                retry={error?.retry}
+              />
+            </Suspense>,
+            mainLayoutRef.current
+          )}
+
+        {mainLayoutRef.current &&
+          createPortal(
+            <ScrollToBottomButton
+              ref={scrollToButtonRef}
+              show={showScrollButton}
+              onClick={scrollToBottom}
+            />,
+            mainLayoutRef.current
+          )}
+        <div
+          className={clsx({
+            'pointer-events-none h-0 overflow-hidden opacity-0': !isLoadingNewMsg,
+            'mt-2 pb-4': isLoadingNewMsg
+          })}
+          ref={skeletonRef}>
+          <MessageSkeleton />
+        </div>
       </div>
-    </div>
-  )
-})
+    )
+  }
+)
 
 MessagesContainer.displayName = 'MessagesContainer'
 

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/avatar-animation/avatar-animation.tsx

@@ -0,0 +1,13 @@
+import { DotLottieReact } from '@lottiefiles/dotlottie-react'
+
+const AVATAR_ANIMATION_URL = `${process.env.STATIC_URL}/tutor/tutor_sparkle.lottie`
+
+const AvatarAnimation = () => {
+  return (
+    <div className='flex h-11 w-11 items-center justify-center rounded-lg bg-ai-chat-response'>
+      <DotLottieReact src={AVATAR_ANIMATION_URL} loop autoplay className='h-auto w-full' />
+    </div>
+  )
+}
+
+export default AvatarAnimation

package/src/modules/widget/components/avatar-animation/index.ts

@@ -0,0 +1,2 @@
+export * from './avatar-animation'
+export { default as AvatarAnimation } from './avatar-animation'

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

@@ -1,4 +1,4 @@
-import { lazy, useEffect, useMemo, useRef } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
 import { useInfiniteQuery } from '@tanstack/react-query'
 
 import { isTextEmpty } from '@/src/lib/utils/is-text-empty'
@@ -15,10 +15,6 @@ import {
 import { WidgetHeader } from '../header'
 import { PageLayout } from '../page-layout'
 
-const MessageItemError = lazy(
-  () => import('@/src/modules/messages/components/message-item-error/message-item-error')
-)
-
 function ChatPage() {
   const chatInputRef = useRef<HTMLTextAreaElement>(null)
   const scrollerRef = useRef<HTMLDivElement>(null)
@@ -84,13 +80,13 @@ function ChatPage() {
           await messagesQuery.fetchNextPage()
         }}
         showButton={messagesQuery.hasNextPage}
-        loading={messagesQuery.isFetchingNextPage}>
+        loading={messagesQuery.isFetchingNextPage}
+        error={{
+          show: messagesQuery.isError,
+          message: messagesQuery.error?.message ?? '',
+          retry: () => void messagesQuery.refetch()
+        }}>
         {messagesQuery.data && <MessagesList messagesMap={messagesQuery.data} />}
-        <MessageItemError
-          show={messagesQuery.isError}
-          message={`❌ Error loading messages: ${messagesQuery.error?.message ?? ''}`}
-          retry={() => void messagesQuery.refetch()}
-        />
       </MessagesContainer>
     </PageLayout>
   )

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/index.ts

@@ -1,4 +1,5 @@
 export * from './ai-avatar'
+export * from './avatar-animation'
 export * from './chat-page'
 export * from './container'
 export * from './greetings-card'

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() }
 

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

@@ -4,12 +4,14 @@ import clsx from 'clsx'
 import type { MouseEventHandler } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import { Button } from '@/src/lib/components'
+import { Button, HorizontalDraggableScroll } from '@/src/lib/components'
+import type { ValidIconNames } from '@/src/lib/components/icons/icon-names'
 import { useRefEventListener } from '@/src/lib/hooks'
 import { ChatInput, useChatInputValueAtom } from '@/src/modules/messages/components'
 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'
@@ -28,6 +30,7 @@ function WidgetStarterPage() {
   const limit = useMessagesMaxCount()
   const queryClient = useQueryClient()
   const name = settings?.tutorName ?? t('general.name')
+  const isSparkieReady = useInitSparkie()
 
   useRefEventListener<HTMLTextAreaElement>({
     config: {
@@ -74,9 +77,19 @@ function WidgetStarterPage() {
     [conversationId, limit, profileId]
   )
 
+  const headerBtns = useMemo(() => {
+    const btnList = ['info', 'close']
+
+    if (!isSparkieReady) return btnList
+
+    return btnList.concat(['archive'])
+  }, [isSparkieReady]) as ValidIconNames[]
+
   useEffect(() => {
+    if (!conversationId || !profileId) return
+
     void queryClient.prefetchInfiniteQuery(messagesQueryConfig)
-  }, [messagesQueryConfig, queryClient])
+  }, [conversationId, messagesQueryConfig, profileId, queryClient])
 
   return (
     <PageLayout
@@ -85,7 +98,7 @@ 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]'>
@@ -93,7 +106,7 @@ function WidgetStarterPage() {
           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} />
+          <WidgetHeader enabledButtons={headerBtns} tutorName={name} />
 
           <div className='my-auto'>
             <GreetingsCard
@@ -103,22 +116,24 @@ function WidgetStarterPage() {
             />
           </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'>
+        <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'>
           <Button
             variant='gradient-outline'
             className='shrink-0 snap-end text-sm'
-            onClick={handleAskQuestion}>
+            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}>
+            onClick={handleAskQuestion}
+            loading={!isSparkieReady}>
             <span>📝 </span>
             {t('starter_page.wanna_summary')}
           </Button>
-        </div>
+        </HorizontalDraggableScroll>
       </div>
     </PageLayout>
   )

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)