app-tutor-ai-consumer 1.22.1 → 1.22.3

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## [1.22.3](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.22.2...v1.22.3) (2025-08-08)
+
+## [1.22.2](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.22.1...v1.22.2) (2025-08-07)
+
+### Bug Fixes
+
+- header qa issues part 1 ([4910041](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/4910041905995e3b8161d015b261c82331131d20))
+- qa issues part 2 ([65d5eb6](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/65d5eb64768f7496a1f767a6d2bd9e614abef547))
+
 ## [1.22.1](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.22.0...v1.22.1) (2025-08-06)
 
 ### Bug Fixes

package/config/vitest/__mocks__/window.ts

@@ -0,0 +1,11 @@
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn()
+  }))
+})

package/config/vitest/vitest.config.mts

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

package/package.json

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

package/src/config/datahub/actions.ts

@@ -8,3 +8,9 @@ export const DataHubActions = {
 } as const
 
 export type DataHubActionTypes = (typeof DataHubActions)[keyof typeof DataHubActions]
+
+export const ActionNames = {
+  CLICK_HOTMART_TUTOR: `${DataHubActions.CLICK}_hotmart_tutor`,
+  CLICK_TUTOR_MINIMIZE: `${DataHubActions.CLICK}_tutor_minimize`,
+  TRY_PRODUCT_TUTOR: `${DataHubActions.TRY}_product_tutor`
+} as const

package/src/config/datahub/constants.ts

@@ -6,10 +6,6 @@ export const System = {
   HOTMART_CLUB: 'hotmart_club'
 } as const
 
-export const ActionNames = {
-  CLICK_HOTMART_TUTOR: 'click_hotmart_tutor'
-} as const
-
 export const ScreenNames = {
   NOT_APP_EVENT: 'NOT_APP_EVENT',
   HOME_CONSUMER: 'HOME_CONSUMER'
@@ -19,7 +15,7 @@ export const Platform = {
   WEB: 'WEB'
 } as const
 
-export const ResultType = {
+export const Result = {
   SUCCESS: 'SUCCESSFUL',
   FAILURE: 'FAILURE',
   FAILURE_DESCRIPTION: 'NOT_FAILURE_RESULT_EVENT'
@@ -27,7 +23,8 @@ export const ResultType = {
 
 export const ComponentNames = {
   BUTTON_LIKE_ANSWER: 'BUTTON_LIKE_ANSWER',
-  BUTTON_DISLIKE_ANSWER: 'BUTTON_DISLIKE_ANSWER'
+  BUTTON_DISLIKE_ANSWER: 'BUTTON_DISLIKE_ANSWER',
+  BUTTON_CLOSE_TUTOR_CHAT: 'BUTTON_CLOSE_TUTOR_CHAT'
 } as const
 
 export const ComponentSource = {

package/src/config/datahub/entities.ts

@@ -1,4 +1,5 @@
 export const DataHubEntities = {
   ADMIN: 'admin',
-  HOME: 'home'
+  HOME: 'home',
+  PRODUCT_CONSUME: 'product_consume'
 } as const

package/src/config/datahub/schemas/base-click-schema.ts

@@ -0,0 +1,48 @@
+import { ScreenNames } from '../constants'
+import { DataHubEntities } from '../entities'
+import type { ComponentNamesType, DataHubEntityTypes, ScreenNamesType } from '../types'
+
+import BaseSchema from './base-schema'
+
+export type BaseClickSchemaConstructorProps = {
+  componentName: ComponentNamesType
+  entity?: DataHubEntityTypes
+  isLogged?: boolean
+  screenName?: ScreenNamesType
+}
+
+abstract class BaseClickSchema extends BaseSchema {
+  protected componentName: ComponentNamesType
+  protected screenName: ScreenNamesType
+
+  entity: DataHubEntityTypes
+  isLogged: boolean
+
+  constructor(args: BaseClickSchemaConstructorProps) {
+    const {
+      componentName,
+      entity = DataHubEntities.HOME,
+      isLogged = true,
+      screenName = ScreenNames.HOME_CONSUMER
+    } = args
+
+    super()
+
+    this.componentName = componentName
+    this.entity = entity
+    this.isLogged = isLogged
+    this.screenName = screenName
+  }
+
+  prepare() {
+    return {
+      ...super.prepare(),
+      componentName: this.componentName,
+      entity: this.entity,
+      isLogged: this.isLogged,
+      screenName: this.screenName
+    }
+  }
+}
+
+export default BaseClickSchema

package/src/config/datahub/schemas/base-try-schema.ts

@@ -0,0 +1,64 @@
+import { HttpCodes } from '@/src/lib/utils'
+import { Result } from '../constants'
+import { DataHubEntities } from '../entities'
+import type { DataHubEntityTypes, ResultType } from '../types'
+
+import BaseSchema from './base-schema'
+
+export type BaseTrySchemaConstructorArgs = {
+  componentName: string
+  componentSource: string
+  entity?: DataHubEntityTypes
+  isLogged?: boolean
+  result?: ResultType
+  statusCode?: number
+  failureDescription?: string
+}
+
+abstract class BaseTrySchema extends BaseSchema {
+  private componentName: string
+  private componentSource: string
+  private failureDescription: string
+  private result: ResultType
+  private statusCode: number
+
+  entity: DataHubEntityTypes
+  isLogged: boolean
+
+  constructor(args: BaseTrySchemaConstructorArgs) {
+    const {
+      componentName,
+      componentSource,
+      entity = DataHubEntities.HOME,
+      failureDescription = Result.FAILURE_DESCRIPTION,
+      isLogged = true,
+      result = Result.SUCCESS,
+      statusCode = HttpCodes.OK
+    } = args
+
+    super()
+
+    this.componentName = componentName
+    this.componentSource = componentSource
+    this.entity = entity
+    this.failureDescription = failureDescription
+    this.isLogged = isLogged
+    this.result = result
+    this.statusCode = statusCode
+  }
+
+  prepare(): Record<string, unknown> {
+    return {
+      ...super.prepare(),
+      componentName: this.componentName,
+      componentSource: this.componentSource,
+      entity: this.entity,
+      failureDescription: this.failureDescription,
+      isLogged: this.isLogged,
+      result: this.result,
+      statusCode: this.statusCode
+    }
+  }
+}
+
+export default BaseTrySchema

package/src/config/datahub/schemas/tutor/__tests__/click-hotmart-tutor.spec.ts

@@ -1,6 +1,7 @@
 import { chance } from '@/src/config/tests'
 import { DataHubStore } from '../../..'
-import { ActionNames, ComponentNames, ScreenNames } from '../../../constants'
+import { ActionNames } from '../../../actions'
+import { ComponentNames, ScreenNames } from '../../../constants'
 import { DataHubEntities } from '../../../entities'
 import { UserRole } from '../../constants'
 import ClickHotmartTutor from '../click-hotmart-tutor'

package/src/config/datahub/schemas/tutor/click-hotmart-tutor.ts

@@ -1,4 +1,5 @@
-import { ActionNames, ComponentNames, ScreenNames } from '../../constants'
+import { ActionNames } from '../../actions'
+import { ComponentNames, ScreenNames } from '../../constants'
 import { DataHubEntities } from '../../entities'
 import type {
   ActionNamesType,

package/src/config/datahub/schemas/tutor/click-tutor-minimize.ts

@@ -0,0 +1,24 @@
+import { ActionNames } from '../../actions'
+import { ComponentNames } from '../../constants'
+import { DataHubEntities } from '../../entities'
+import type { ActionNamesType } from '../../types'
+import BaseClickSchema from '../base-click-schema'
+
+class ClickTutorMinimizeSchema extends BaseClickSchema {
+  action: ActionNamesType
+
+  constructor() {
+    super({ componentName: ComponentNames.BUTTON_CLOSE_TUTOR_CHAT })
+
+    this.action = ActionNames.CLICK_TUTOR_MINIMIZE
+    this.entity = DataHubEntities.PRODUCT_CONSUME
+  }
+
+  getDataHubEventData(): Record<string, unknown> {
+    return {
+      ...super.prepare()
+    }
+  }
+}
+
+export default ClickTutorMinimizeSchema

package/src/config/datahub/schemas/tutor/index.ts

@@ -1,3 +1,4 @@
 export { default as ClickHotmartTutor } from './click-hotmart-tutor'
+export { default as ClickTutorMinimizeSchema } from './click-tutor-minimize'
 export * from './constants'
 export * from './types'

package/src/config/datahub/schemas/tutor/try-product-tutor.ts

@@ -0,0 +1,24 @@
+import { ActionNames } from '../../actions'
+import type { ActionNamesType } from '../../types'
+import type { BaseTrySchemaConstructorArgs } from '../base-try-schema'
+import BaseTrySchema from '../base-try-schema'
+
+export type TryProductTutorConstructorArgs = BaseTrySchemaConstructorArgs
+
+class TryProductTutor extends BaseTrySchema {
+  action: ActionNamesType
+
+  constructor(args: TryProductTutorConstructorArgs) {
+    super(args)
+
+    this.action = ActionNames.TRY_PRODUCT_TUTOR
+  }
+
+  getDataHubEventData(): Record<string, unknown> {
+    return {
+      ...this.prepare()
+    }
+  }
+}
+
+export default TryProductTutor

package/src/config/datahub/types.ts

@@ -1,4 +1,5 @@
-import type { ActionNames, ComponentNames, Platform, ScreenNames, System } from './constants'
+import type { ActionNames } from './actions'
+import type { ComponentNames, Platform, Result, ScreenNames, System } from './constants'
 import type { DataHubEntities } from './entities'
 
 export type ActionNamesType = (typeof ActionNames)[keyof typeof ActionNames]
@@ -7,6 +8,7 @@ export type PlatformType = (typeof Platform)[keyof typeof Platform]
 export type SystemType = (typeof System)[keyof typeof System]
 export type ComponentNamesType = (typeof ComponentNames)[keyof typeof ComponentNames]
 export type ScreenNamesType = (typeof ScreenNames)[keyof typeof ScreenNames]
+export type ResultType = (typeof Result)[keyof typeof Result]
 
 export type SchemaType = {
   action: ActionNamesType

package/src/config/theme/constants.ts

@@ -0,0 +1,7 @@
+export const SCREEN_SIZES = {
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  xxl: 1700
+} as const

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

@@ -98,20 +98,19 @@ function Button({
       )
     case 'secondary':
       return (
-        <button
+        <ButtonDefault
           className={clsx(
-            gridClasses,
             defaultPadding,
             defaultClasses,
             defaultBorder,
-            'border-neutral-900 bg-transparent text-neutral-900 hover:bg-neutral-900 hover:text-neutral-100',
+            'border-neutral-900 bg-transparent text-neutral-900 hover:bg-[rgb(from_var(--hc-color-neutral-900)_r_g_b_/_0.05)]',
             className
           )}
           {...props}
           disabled={props.disabled || loading}
           aria-busy={loading}>
           <ButtonContent loading={loading}>{children}</ButtonContent>
-        </button>
+        </ButtonDefault>
       )
     case 'tertiary':
       return (
@@ -129,9 +128,8 @@ function Button({
       )
     case 'brand':
       return (
-        <button
+        <ButtonDefault
           className={clsx(
-            gridClasses,
             defaultPadding,
             defaultClasses,
             defaultBorder,
@@ -142,7 +140,7 @@ function Button({
           disabled={props.disabled || loading}
           aria-busy={loading}>
           <ButtonContent loading={loading}>{children}</ButtonContent>
-        </button>
+        </ButtonDefault>
       )
     default:
       return (
@@ -150,7 +148,8 @@ function Button({
           className={clsx(
             'rounded-full outline-none transition-colors duration-100',
             {
-              'cursor-pointer hover:bg-neutral-400 focus:bg-neutral-400': !props.disabled,
+              'cursor-pointer hover:bg-neutral-300 hover:text-current focus:bg-neutral-300 focus:text-current':
+                !props.disabled,
               [disabledClasses]: props.disabled
             },
             styles.defaultButton,

package/src/lib/components/errors/generic/generic-error.tsx

@@ -1,20 +1,17 @@
-import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
 
 import ErrorDarkSVG from '@/public/assets/svg/error-dark.svg?url'
 import ErrorLightSVG from '@/public/assets/svg/error-light.svg?url'
 import { Button } from '@/src/lib/components'
-import { PageLayout, TutorWidgetEvents, useWidgetSettingsAtom } from '@/src/modules/widget'
+import { PageLayout, TutorWidgetEvents } from '@/src/modules/widget'
 import { WidgetHeader } from '@/src/modules/widget/components/header'
 
-function GenericError() {
+function GenericError({ isDarkMode = false }: { isDarkMode?: boolean }) {
   const { t } = useTranslation()
-  const [settings] = useWidgetSettingsAtom()
-  const isDarkMode = settings?.config?.theme === 'dark'
 
   return (
     <PageLayout className='p-5'>
-      <WidgetHeader enabledButtons={['close']} showContent={false} />
+      <WidgetHeader enabledButtons={['close']} />
 
       <div className='flex h-full flex-col items-center justify-center p-10'>
         <div className='mb-8 flex flex-col items-center gap-1 text-center'>
@@ -26,38 +23,25 @@ function GenericError() {
             height={200}
           />
 
-          <h2
-            className={clsx('text-xl font-bold', {
-              'text-white': isDarkMode,
-              'text-gray-800': !isDarkMode
-            })}>
-            {t('generic_error.title')}
-          </h2>
-
-          <p
-            className={clsx('text-sm', {
-              'text-gray-400': isDarkMode,
-              'text-gray-500': !isDarkMode
-            })}>
-            {t('generic_error.description')}
-          </p>
+          <h2 className='text-xl font-bold text-neutral-900'>{t('generic_error.title')}</h2>
+          <p className='text-sm text-neutral-600'>{t('generic_error.description')}</p>
         </div>
 
         <div className='flex w-full flex-col gap-4'>
           <Button
             variant='brand'
-            className='w-full rounded-lg py-2'
+            className='mx-auto w-full max-w-max rounded-lg !px-9 py-2 !font-light'
             onClick={() => window.location.reload()}
             aria-label='Retry Button'>
-            <span className='font-light'>{t('general.buttons.try_again')}</span>
+            {t('general.buttons.try_again')}
           </Button>
 
           <Button
             variant='secondary'
-            className='w-full rounded-lg py-2'
+            className='mx-auto w-full max-w-max rounded-lg !px-9 py-2 !font-light'
             onClick={() => TutorWidgetEvents['c3po-app-widget-hide'].dispatch()}
             aria-label='Close Button'>
-            <span className='font-light'>{t('general.buttons.close')}</span>
+            {t('general.buttons.close')}
           </Button>
         </div>
       </div>

package/src/lib/components/icons/copy-solid.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 13 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M6.32585 0.734428H9.55762C9.88835 0.734428 10.2061 0.867241 10.4404 1.10162L12.2087 2.86984C12.443 3.10422 12.5758 3.42193 12.5758 3.75266V9.48443C12.5758 10.1745 12.0159 10.7344 11.3258 10.7344H6.32585C5.63574 10.7344 5.07585 10.1745 5.07585 9.48443V1.98443C5.07585 1.29432 5.63574 0.734428 6.32585 0.734428ZM2.15918 4.06776H4.24251V5.73443H2.57585V12.4011H7.57585V11.5678H9.24251V12.8178C9.24251 13.5079 8.68262 14.0678 7.99251 14.0678H2.15918C1.46908 14.0678 0.90918 13.5079 0.90918 12.8178V5.31776C0.90918 4.62766 1.46908 4.06776 2.15918 4.06776Z"
+    fill="currentColor" />
+</svg>

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

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M11.3016 1.60522H8.62451V0.112061H13.8506V5.33813H12.3574V2.66105L9.15242 5.86604L8.0966 4.81022L11.3016 1.60522ZM0.412109 8.32446H1.90527V11.0016L5.11027 7.79655L6.16609 8.85237L2.9611 12.0574H5.63818V13.5505H0.412109V8.32446Z"
+    fill="currentColor" />
+</svg>

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

@@ -9,11 +9,14 @@ export type ValidIconNames =
   | 'chevron-down'
   | 'clone'
   | 'close'
+  | 'copy-solid'
   | 'copy'
   | 'double-check'
+  | 'expand'
   | 'gallery'
   | 'info'
   | 'interrogation'
+  | 'like-solid'
   | 'like'
   | 'paste'
   | 'send'

package/src/lib/components/icons/like-solid.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M8.40316 0.426269C9.08024 0.565542 9.52034 1.24316 9.38493 1.93953L9.32503 2.24486C9.18701 2.95997 8.9318 3.64027 8.57503 4.25896H12.325C13.0151 4.25896 13.575 4.8348 13.575 5.54456C13.575 6.04005 13.3016 6.47126 12.9006 6.68553C13.1844 6.92122 13.3667 7.2828 13.3667 7.68723C13.3667 8.31396 12.9292 8.83623 12.3537 8.94872C12.4683 9.14424 12.5334 9.3719 12.5334 9.61563C12.5334 10.1861 12.1714 10.6709 11.6714 10.8369C11.6896 10.9253 11.7 11.0191 11.7 11.1155C11.7 11.8253 11.1401 12.4011 10.45 12.4011H7.91097C7.41618 12.4011 6.93441 12.2511 6.52295 11.9699L5.52034 11.2815C4.82503 10.8048 4.40837 10.0013 4.40837 9.14156V8.11576V6.83016V6.16326C4.40837 5.38118 4.75472 4.64464 5.34587 4.15451L5.53857 3.99649C6.22868 3.42868 6.70003 2.63054 6.87191 1.74133L6.9318 1.436C7.06722 0.739634 7.72607 0.286996 8.40316 0.426269ZM1.07503 4.6875H2.7417C3.20264 4.6875 3.57503 5.0705 3.57503 5.54456V11.544C3.57503 12.0181 3.20264 12.4011 2.7417 12.4011H1.07503C0.614095 12.4011 0.241699 12.0181 0.241699 11.544V5.54456C0.241699 5.0705 0.614095 4.6875 1.07503 4.6875Z"
+    fill="currentColor" />
+</svg>

package/src/lib/components/index.ts

@@ -4,3 +4,4 @@ export * from './horizontal-draggable-scroll'
 export * from './icons'
 export * from './markdownrenderer'
 export * from './spinner'
+export * from './tooltip'

package/src/lib/components/tooltip/index.ts

@@ -0,0 +1,2 @@
+export * from './tooltip'
+export { default as Tooltip } from './tooltip'

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

@@ -0,0 +1,39 @@
+.triangle {
+  z-index: 5;
+
+  &:before {
+    content: '';
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0px 0.5rem 0.625rem 0.5rem;
+    border-color: transparent transparent var(--hc-color-neutral-300) transparent;
+    position: absolute;
+    z-index: 4;
+  }
+}
+
+.top:before {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%) rotateZ(180deg);
+}
+
+.right:before {
+  top: 50%;
+  right: 96%;
+  transform: translateY(-50%) rotateZ(-90deg);
+}
+
+.bottom:before {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.left:before {
+  top: 50%;
+  left: 96%;
+  transform: translateY(-50%) rotateZ(90deg);
+}

package/src/lib/components/tooltip/tooltip.tsx

@@ -0,0 +1,41 @@
+import clsx from 'clsx'
+import type { PropsWithChildren, ReactNode } from 'react'
+
+import styles from './styles.module.css'
+
+const POSITION = {
+  top: 'left-1/2 transform -translate-x-1/2 bottom-full mb-3',
+  right: 'left-full top-1/2 transform -translate-y-1/2 ml-3',
+  bottom: 'left-1/2 transform -translate-x-1/2 top-full mt-3',
+  left: 'right-full top-1/2 transform -translate-y-1/2 mr-3'
+} as const
+
+export type TooltipProps = PropsWithChildren<{
+  content?: ReactNode
+  position?: keyof typeof POSITION
+  show?: boolean
+}>
+
+function Tooltip({ children, content, position = 'top', show = true }: TooltipProps) {
+  if (!show) return children
+
+  return (
+    <div className='group relative flex items-center justify-center'>
+      {children}
+      {content && (
+        <div
+          className={clsx(
+            'absolute hidden rounded-lg group-hover:block',
+            'bg-neutral-300 px-4 py-2 text-xs text-neutral-900',
+            POSITION[position],
+            styles.triangle,
+            styles[position]
+          )}>
+          {content}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Tooltip

package/src/lib/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from './use-intersection-observer-reverse-scroll'
+export * from './use-media-query'
 export * from './use-ref-client-height'
 export * from './use-ref-event-listener'
 export * from './use-throttle'

package/src/lib/hooks/use-media-query/index.ts

@@ -0,0 +1,2 @@
+export * from './use-media-query'
+export { default as useMediaQuery } from './use-media-query'

package/src/lib/hooks/use-media-query/use-media-query.tsx

@@ -0,0 +1,20 @@
+import { useLayoutEffect, useState } from 'react'
+
+import { SCREEN_SIZES } from '@/src/config/theme/constants'
+
+function useMediaQuery({ maxSize }: { maxSize: keyof typeof SCREEN_SIZES }) {
+  const [matches, setMatches] = useState(false)
+
+  useLayoutEffect(() => {
+    const mediaquery = window.matchMedia(`(max-width: ${SCREEN_SIZES[maxSize]}px)`)
+    const listener = () => setMatches(mediaquery.matches)
+
+    mediaquery.addEventListener('change', listener)
+
+    return () => mediaquery.removeEventListener('change', listener)
+  }, [maxSize])
+
+  return matches
+}
+
+export default useMediaQuery

package/src/main/main.tsx

@@ -17,7 +17,7 @@ function Main({ settings }: MainProps) {
   useListenToThemeChangeEvent()
 
   return (
-    <ErrorBoundary fallback={<GenericError />}>
+    <ErrorBoundary fallback={<GenericError isDarkMode={settings.config?.theme === 'dark'} />}>
       <GlobalProviders settings={settings}>
         <WidgetContainer />
       </GlobalProviders>

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

@@ -86,7 +86,8 @@ const ChatInput = forwardRef<HTMLTextAreaElement, ChatInputProps>(
           onClick={onSend}
           disabled={buttonDisabled || loading}
           className={clsx('flex flex-col items-center justify-center', styles.send, {
-            'bg-neutral-900 text-neutral-100': !buttonDisabled,
+            'bg-neutral-900 text-neutral-100 hover:text-neutral-900 focus:text-neutral-900':
+              !buttonDisabled,
             'text-neutral-900': buttonDisabled
           })}
           loading={loading}

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

@@ -55,36 +55,36 @@ function MessageActions({ message, className, showActions = false }: MessageActi
           hidden: !showActions
         })}>
         <Button
-          className='hover:!bg-transparent hover:text-info-500 focus:!bg-transparent'
+          className='hover:!bg-transparent hover:text-neutral-500 focus:!bg-transparent'
           onClick={() => handleReaction()}
           aria-label={t('general.buttons.like')}>
           <Icon
-            name='like'
-            className={clsx('size-3', {
-              'text-info-500': reaction === ButtonReactions.LIKE
+            name={reaction === ButtonReactions.LIKE ? 'like-solid' : 'like'}
+            className={clsx('size-3 transition-colors duration-100', {
+              'text-neutral-900': reaction === ButtonReactions.LIKE
             })}
           />
         </Button>
         <Button
-          className='rotate-180 scale-x-[-1] hover:!bg-transparent hover:text-danger-500 focus:!bg-transparent'
+          className='rotate-180 scale-x-[-1] hover:!bg-transparent hover:text-neutral-500 focus:!bg-transparent'
           onClick={() => handleReaction(ButtonReactions.DISLIKE)}
           aria-label={t('general.buttons.dislike')}>
           <Icon
-            name='like'
-            className={clsx('size-3', {
-              'text-danger-500': reaction === ButtonReactions.DISLIKE
+            name={reaction === ButtonReactions.DISLIKE ? 'like-solid' : 'like'}
+            className={clsx('size-3 transition-colors duration-100', {
+              'text-neutral-900': reaction === ButtonReactions.DISLIKE
             })}
           />
         </Button>
         <Button
-          className='hover:!bg-transparent hover:text-info-500 focus:!bg-transparent'
+          className='hover:!bg-transparent hover:text-neutral-500 focus:!bg-transparent'
           onClick={copyToClipboard}
           aria-label={t('general.buttons.copy')}
           disabled={copying}>
           <Icon
-            name={copied ? 'paste' : 'copy'}
-            className={clsx('size-3', {
-              'text-info-500': copied
+            name={copied ? 'copy-solid' : 'copy'}
+            className={clsx('size-3 transition-colors duration-100', {
+              'text-neutral-900': copied
             })}
           />
         </Button>

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

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useRef } from 'react'
 import { useInfiniteQuery } from '@tanstack/react-query'
 
+import { useMediaQuery } from '@/src/lib/hooks'
 import { isTextEmpty } from '@/src/lib/utils/is-text-empty'
 import { ChatInput, MessagesList, useChatInputValueAtom } from '@/src/modules/messages/components'
 import { MessagesContainer } from '@/src/modules/messages/components/messages-container'
@@ -25,6 +26,7 @@ function ChatPage() {
   const limit = useMessagesMaxCount()
   const [value, setValue] = useChatInputValueAtom()
   const [, setWidgetLoading] = useWidgetLoadingAtom()
+  const isMobile = useMediaQuery({ maxSize: 'md' })
 
   const conversationId = useMemo(() => settings?.conversationId, [settings?.conversationId])
   const profileId = useMemo(() => profileQuery.data?.id, [profileQuery.data?.id])
@@ -72,7 +74,11 @@ function ChatPage() {
         />
       }>
       <div className='max-md:px-[1.125rem] max-md:pt-[1.125rem] md:px-5 md:pt-5'>
-        <WidgetHeader enabledButtons={['info', 'close']} tutorName={settings?.tutorName} />
+        <WidgetHeader
+          enabledButtons={['info', 'close', 'arrow-left']}
+          tutorName={settings?.tutorName}
+          showContentWithoutMeta={!isMobile}
+        />
       </div>
       <MessagesContainer
         ref={scrollerRef}

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

@@ -1,2 +1 @@
-export * from './header'
-export { default as WidgetHeader } from './header'
+export { default as WidgetHeader } from './widget-header'

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

@@ -0,0 +1,75 @@
+import { render, screen } from '@/src/config/tests'
+import * as Hooks from '@/src/lib/hooks'
+
+import WidgetHeaderPropsBuilder from './__tests__/widget-header-props.builder'
+import WidgetHeader from './widget-header'
+
+describe('<WidgetHeader />', () => {
+  const defaultProps = new WidgetHeaderPropsBuilder()
+  const renderComponent = (props = defaultProps) => render(<WidgetHeader {...props} />)
+
+  it('should render the only the enabled button', () => {
+    renderComponent()
+
+    expect(screen.getByRole('button', { name: /Close Icon/i })).toBeInTheDocument()
+
+    expect(
+      screen.queryByRole('button', { name: /general.buttons.archive Icon/i })
+    ).not.toBeInTheDocument()
+    expect(
+      screen.queryByRole('button', { name: /general.buttons.info Icon/i })
+    ).not.toBeInTheDocument()
+  })
+
+  it('should render WidgetHeaderContent when prop showContent is true', () => {
+    renderComponent()
+
+    expect(screen.getByText(/sparkle-tutor-light/i)).toBeInTheDocument()
+
+    expect(screen.queryByRole('button', { name: /Arrow Left Icon/i })).not.toBeInTheDocument()
+  })
+
+  it('should render WidgetHeaderContentWithoutMeta when prop showContentWithoutMeta is true', () => {
+    const props = new WidgetHeaderPropsBuilder()
+      .withEnabledButtons(['close', 'arrow-left'])
+      .withShowContentWithoutMeta(true)
+
+    renderComponent(props)
+
+    expect(screen.getByRole('button', { name: /Arrow Left Icon/i })).toBeInTheDocument()
+
+    expect(screen.queryByText(/sparkle-tutor-light/i)).not.toBeInTheDocument()
+  })
+
+  it('should be able to render the remaining icons', () => {
+    const props = new WidgetHeaderPropsBuilder().withEnabledButtons(['archive', 'info'])
+
+    renderComponent(props)
+
+    expect(
+      screen.getByRole('button', { name: /general.buttons.archive Icon/i })
+    ).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /general.buttons.info Icon/i })).toBeInTheDocument()
+  })
+
+  it('should show header buttons tooltip when window is not in mobile view', () => {
+    const props = new WidgetHeaderPropsBuilder().withEnabledButtons(['archive', 'info'])
+
+    renderComponent(props)
+
+    expect(screen.getByText(/general.buttons.archive/i)).toBeInTheDocument()
+  })
+
+  it('should not show header buttons tooltip when window is in mobile view', () => {
+    vi.spyOn(Hooks, 'useMediaQuery').mockReturnValue(true)
+
+    const props = new WidgetHeaderPropsBuilder().withEnabledButtons(['archive', 'info'])
+
+    renderComponent(props)
+
+    expect(
+      screen.getByRole('button', { name: /general.buttons.archive Icon/i })
+    ).toBeInTheDocument()
+    expect(screen.queryByText(/general.buttons.archive/i)).not.toBeInTheDocument()
+  })
+})

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

@@ -0,0 +1,148 @@
+import { useMemo } from 'react'
+import clsx from 'clsx'
+import { useTranslation } from 'react-i18next'
+
+import { DataHubService } from '@/src/config/datahub'
+import { ClickTutorMinimizeSchema } from '@/src/config/datahub/schemas/tutor'
+import { Button, Icon, Tooltip } from '@/src/lib/components'
+import { useMediaQuery } from '@/src/lib/hooks'
+import { TutorWidgetEvents } from '../../events'
+import { useWidgetGoBackTabAtom, useWidgetTabsAtom } from '../../store'
+import { AIAvatar } from '../ai-avatar'
+
+import type { WidgetHeaderProps } from './types'
+
+import styles from './styles.module.css'
+
+function WidgetHeaderActions({
+  actionButtons
+}: {
+  actionButtons: ('archive' | 'expand' | 'info')[]
+}) {
+  const { t } = useTranslation()
+  const [, setTab] = useWidgetTabsAtom()
+  const isMobile = useMediaQuery({ maxSize: 'md' })
+
+  const handleClickArchive = () => {
+    setTab('chat')
+  }
+
+  const handleClickInfo = () => {
+    setTab('information')
+  }
+
+  const handleClickExpand = () => {
+    TutorWidgetEvents['tutor-app-widget-expand'].dispatch()
+  }
+
+  if (!(Number(actionButtons?.length) > 0)) return null
+
+  return (
+    <>
+      <div
+        className={clsx('flex max-w-max items-center gap-3 text-neutral-700', styles.btnContainer)}>
+        {actionButtons.includes('archive') && (
+          <Tooltip show={!isMobile} content={t('general.buttons.archive')}>
+            <Button
+              show={actionButtons.includes('archive')}
+              onClick={handleClickArchive}
+              aria-label={t('general.buttons.archive') + ' Icon'}>
+              <Icon name='archive' className='h-4 w-4' aria-hidden />
+            </Button>
+          </Tooltip>
+        )}
+        {actionButtons.includes('info') && (
+          <Tooltip show={!isMobile} content={t('general.buttons.info')} position='left'>
+            <Button
+              show={actionButtons.includes('info')}
+              onClick={handleClickInfo}
+              aria-label={t('general.buttons.info') + ' Icon'}>
+              <Icon name='info' className='h-4 w-4' aria-hidden />
+            </Button>
+          </Tooltip>
+        )}
+        {actionButtons.includes('expand') && (
+          <Tooltip show={!isMobile} content={t('general.buttons.expand')} position='left'>
+            <Button
+              show={actionButtons.includes('expand')}
+              onClick={handleClickExpand}
+              aria-label={t('general.buttons.expand') + ' Icon'}>
+              <Icon name='expand' className='h-3.5 w-3.5' aria-hidden />
+            </Button>
+          </Tooltip>
+        )}
+      </div>
+    </>
+  )
+}
+
+function WidgetHeader({
+  enabledButtons = [],
+  tutorName,
+  showContentWithoutMeta,
+  showContent = true
+}: WidgetHeaderProps) {
+  const { t } = useTranslation()
+  const [, goBack] = useWidgetGoBackTabAtom()
+  const name = tutorName ?? t('general.name')
+
+  const handleHideWidget = () => {
+    TutorWidgetEvents['c3po-app-widget-hide'].dispatch()
+    DataHubService.sendEvent({ schema: new ClickTutorMinimizeSchema() })
+  }
+
+  const actionButtons = useMemo(
+    () => enabledButtons.filter((btn) => btn === 'archive' || btn === 'info' || btn === 'expand'),
+    [enabledButtons]
+  )
+
+  const hasToShowActions = useMemo(() => Number(actionButtons?.length) > 0, [actionButtons?.length])
+
+  return (
+    <div className='mb-4 mt-0.5 flex flex-col gap-2 text-neutral-900'>
+      <div className='flex justify-end'>
+        <div className={styles.closeContainer}>
+          <Button
+            className='text-neutral-500'
+            show={enabledButtons.includes('close')}
+            onClick={handleHideWidget}
+            aria-label='Close Icon'>
+            <Icon name='close' className='h-3 w-3' aria-hidden />
+          </Button>
+        </div>
+      </div>
+      <div
+        className={clsx('grid items-center max-md:gap-2 md:gap-4', styles.btnContainer, {
+          'grid-cols-[auto_1fr_auto]': enabledButtons.includes('arrow-left'),
+          'grid-cols-[1fr_auto]': !enabledButtons.includes('arrow-left') && hasToShowActions,
+          'grid-cols-[1fr]': !enabledButtons.includes('arrow-left') && !hasToShowActions
+        })}>
+        {enabledButtons.includes('arrow-left') && (
+          <div>
+            <Button aria-label='Arrow Left Icon' onClick={goBack}>
+              <Icon name='arrow-left' className='h-3.5 w-3.5' aria-hidden />
+            </Button>
+          </div>
+        )}
+        <div
+          className={clsx('flex w-full items-center gap-2', {
+            'justify-center': showContentWithoutMeta
+          })}>
+          {showContent && (
+            <>
+              {!showContentWithoutMeta && <AIAvatar />}
+              {name && <h4 className='text-sm/loose font-bold'>{name}</h4>}
+            </>
+          )}
+        </div>
+        {hasToShowActions ? (
+          <WidgetHeaderActions actionButtons={actionButtons} />
+        ) : (
+          <div className='h-6 w-6' />
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default WidgetHeader

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

@@ -16,40 +16,39 @@ function WidgetInformationPage() {
   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'>
-      <div className='mb-4'>
+    <PageLayout className='flex min-h-0 flex-col text-neutral-900'>
+      <div className='max-md:px-[1.125rem] max-md:py-[1.125rem] md:px-5 md:py-5'>
         <WidgetHeader
-          enabledButtons={['close']}
-          showContent={false}
+          enabledButtons={['close', 'arrow-left']}
           showContentWithoutMeta
           tutorName={t('info.title')}
         />
-      </div>
 
-      <div className='my-8 flex justify-center'>
-        <div className='flex flex-col items-center gap-2'>
-          <AIAvatar size='lg' />
-
-          <h3
-            className={clsx('font-bold', {
-              'text-white': isDarkMode,
-              'text-neutral-700': !isDarkMode
-            })}>
-            {tutorName}
-          </h3>
+        <div className='my-8 flex justify-center'>
+          <div className='flex flex-col items-center gap-2'>
+            <AIAvatar size='lg' />
+
+            <h3
+              className={clsx('font-bold', {
+                'text-white': isDarkMode,
+                'text-neutral-700': !isDarkMode
+              })}>
+              {tutorName}
+            </h3>
+          </div>
         </div>
-      </div>
 
-      <div className='flex flex-col gap-5'>
-        {infoItems({ tutorName }).map((item) => (
-          <InformationCard
-            key={item.titleKey}
-            icon={item.icon}
-            title={t(item.titleKey)}
-            description={t(item.descKey)}
-            isDarkMode={isDarkMode}
-          />
-        ))}
+        <div className='flex flex-col gap-5'>
+          {infoItems({ tutorName: t('general.name') }).map((item) => (
+            <InformationCard
+              key={item.titleKey}
+              icon={item.icon}
+              title={t(item.titleKey)}
+              description={t(item.descKey)}
+              isDarkMode={isDarkMode}
+            />
+          ))}
+        </div>
       </div>
     </PageLayout>
   )

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

@@ -4,7 +4,7 @@ import type { CSSProperties, MouseEventHandler } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { Button, HorizontalDraggableScroll } from '@/src/lib/components'
-import { useRefEventListener } from '@/src/lib/hooks'
+import { useMediaQuery, 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'
@@ -28,6 +28,7 @@ function WidgetStarterPage() {
   const name = settings?.tutorName ?? t('general.name')
   const isDarkTheme = settings?.config?.theme === 'dark'
   const isSparkieReady = useInitSparkie()
+  const isMobile = useMediaQuery({ maxSize: 'md' })
 
   useRefEventListener<HTMLTextAreaElement>({
     config: {
@@ -104,7 +105,7 @@ function WidgetStarterPage() {
         <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}
+            showContent={isMobile}
             tutorName={name}
           />
 

package/src/modules/widget/events.ts

@@ -7,7 +7,8 @@ export const TutorWidgetEventTypes = {
   CLOSE: 'c3po-app-widget-close',
   HIDE: 'c3po-app-widget-hide',
   LOADED: 'tutor-app-widget-loaded',
-  THEME_CHANGE: 'c3po-app-widget-theme-change'
+  THEME_CHANGE: 'c3po-app-widget-theme-change',
+  EXPAND: 'tutor-app-widget-expand'
 } as const
 
 export const TutorWidgetEvents = {
@@ -94,7 +95,24 @@ export const TutorWidgetEvents = {
     dispatch: (payload) => {
       window.dispatchEvent(new CustomEvent(TutorWidgetEventTypes.THEME_CHANGE, payload))
     }
-  } as ITutorWidgetEvent<{ theme: Theme }>
+  } as ITutorWidgetEvent<{ theme: Theme }>,
+
+  [TutorWidgetEventTypes.EXPAND]: {
+    name: TutorWidgetEventTypes.EXPAND,
+    handler: (callback: () => void) => {
+      const listener: EventListener = () => {
+        callback()
+      }
+      window.addEventListener(TutorWidgetEventTypes.EXPAND, listener)
+
+      return () => {
+        window.removeEventListener(TutorWidgetEventTypes.EXPAND, listener)
+      }
+    },
+    dispatch: (payload) => {
+      window.dispatchEvent(new CustomEvent(TutorWidgetEventTypes.EXPAND, payload))
+    }
+  } as ITutorWidgetEvent<void>
 } as const
 
 export const ACTION_EVENTS = {

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

@@ -1,47 +0,0 @@
-import { render, screen } from '@/src/config/tests'
-
-import WidgetHeaderPropsBuilder from './__tests__/widget-header-props.builder'
-import WidgetHeader from './header'
-
-describe('<WidgetHeader />', () => {
-  const defaultProps = new WidgetHeaderPropsBuilder()
-  const renderComponent = (props = defaultProps) => render(<WidgetHeader {...props} />)
-
-  it('should render the only the enabled button', () => {
-    renderComponent()
-
-    expect(screen.getByRole('button', { name: /Close Icon/i })).toBeInTheDocument()
-
-    expect(screen.queryByRole('button', { name: /Archive Icon/i })).not.toBeInTheDocument()
-    expect(screen.queryByRole('button', { name: /Info Icon/i })).not.toBeInTheDocument()
-  })
-
-  it('should render WidgetHeaderContent when prop showContent is true', () => {
-    renderComponent()
-
-    expect(screen.getByText(/sparkle-tutor-light/i)).toBeInTheDocument()
-
-    expect(screen.queryByRole('button', { name: /Arrow Left Icon/i })).not.toBeInTheDocument()
-  })
-
-  it('should render WidgetHeaderContentWithoutMeta when prop showContentWithoutMeta is true and showContent is false', () => {
-    const props = new WidgetHeaderPropsBuilder()
-      .withShowContentWithoutMeta(true)
-      .withShowContent(false)
-
-    renderComponent(props)
-
-    expect(screen.getByRole('button', { name: /Arrow Left Icon/i })).toBeInTheDocument()
-
-    expect(screen.queryByText(/sparkle-tutor-light/i)).not.toBeInTheDocument()
-  })
-
-  it('should be able to render the remaining icons', () => {
-    const props = new WidgetHeaderPropsBuilder().withEnabledButtons(['archive', 'info'])
-
-    renderComponent(props)
-
-    expect(screen.getByRole('button', { name: /Archive Icon/i })).toBeInTheDocument()
-    expect(screen.getByRole('button', { name: /Info Icon/i })).toBeInTheDocument()
-  })
-})

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

@@ -1,106 +0,0 @@
-import clsx from 'clsx'
-import { useTranslation } from 'react-i18next'
-
-import { Button, Icon } from '@/src/lib/components'
-import { TutorWidgetEvents } from '../../events'
-import { useWidgetGoBackTabAtom, useWidgetTabsAtom } from '../../store'
-import { AIAvatar } from '../ai-avatar'
-
-import type { WidgetHeaderContentProps, WidgetHeaderProps } from './types'
-
-import styles from './styles.module.css'
-
-export function WidgetHeaderContent({ tutorName }: WidgetHeaderContentProps) {
-  return (
-    <div className='flex w-full gap-2'>
-      <AIAvatar />
-      <div className='flex flex-col justify-center'>
-        {tutorName && <h4 className='text-sm/loose font-bold'>{tutorName}</h4>}
-      </div>
-    </div>
-  )
-}
-
-export function WidgetHeaderContentWithoutMeta({ name }: { name?: string }) {
-  const [, goBack] = useWidgetGoBackTabAtom()
-
-  return (
-    <div
-      className={clsx(
-        'grid-areas-[a_b] grid grid-cols-[auto_1fr] items-center gap-1',
-        styles.withoutMetaContainer
-      )}>
-      <Button className='grid-area-[a]' aria-label='Arrow Left Icon' onClick={goBack}>
-        <Icon name='arrow-left' className='h-3.5 w-3.5' aria-hidden />
-      </Button>
-      <div className='grid-area-[b] flex min-h-6 justify-center text-center'>
-        <span className='absolute bottom-0 left-1/2 -translate-x-1/2 text-base font-bold'>
-          {name}
-        </span>
-      </div>
-    </div>
-  )
-}
-
-function WidgetHeader({
-  enabledButtons = [],
-  tutorName,
-  showContentWithoutMeta,
-  showContent = true
-}: WidgetHeaderProps) {
-  const { t } = useTranslation()
-  const [, setTab] = useWidgetTabsAtom()
-  const name = tutorName ?? t('general.name')
-
-  const handleClickArchive = () => {
-    setTab('chat')
-  }
-
-  const handleClickInfo = () => {
-    setTab('information')
-  }
-
-  return (
-    <div className='mt-0.5 flex flex-col gap-2 text-neutral-900'>
-      <div className='flex justify-end'>
-        <div className={styles.closeContainer}>
-          <Button
-            className='text-neutral-500'
-            show={enabledButtons.includes('close')}
-            onClick={() => TutorWidgetEvents['c3po-app-widget-hide'].dispatch()}
-            aria-label='Close Icon'>
-            <Icon name='close' className='h-3 w-3' aria-hidden />
-          </Button>
-        </div>
-      </div>
-      <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} />}
-        </div>
-        <div className='shrink-0'>
-          <div
-            className={clsx(
-              'grid-area-[b] ml-auto flex max-w-max gap-3 text-neutral-700',
-              styles.btnContainer
-            )}>
-            <Button
-              show={enabledButtons.includes('archive')}
-              onClick={handleClickArchive}
-              aria-label='Archive Icon'>
-              <Icon name='archive' className='h-4 w-4' aria-hidden />
-            </Button>
-            <Button
-              show={enabledButtons.includes('info')}
-              aria-label='Info Icon'
-              onClick={handleClickInfo}>
-              <Icon name='info' className='h-4 w-4' aria-hidden />
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default WidgetHeader