app-tutor-ai-consumer 1.22.1 → 1.22.2

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [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.2",
   "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/icon-names.d.ts

@@ -9,11 +9,13 @@ export type ValidIconNames =
   | 'chevron-down'
   | 'clone'
   | 'close'
+  | 'copy-solid'
   | 'copy'
   | 'double-check'
   | '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: 97%;
+  transform: translateY(-50%) rotateZ(-90deg);
+}
+
+.bottom:before {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.left:before {
+  top: 50%;
+  left: 97%;
+  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/header/header.spec.tsx

@@ -1,4 +1,5 @@
 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 './header'
@@ -12,8 +13,12 @@ describe('<WidgetHeader />', () => {
 
     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()
+    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', () => {
@@ -41,7 +46,30 @@ describe('<WidgetHeader />', () => {
 
     renderComponent(props)
 
-    expect(screen.getByRole('button', { name: /Archive Icon/i })).toBeInTheDocument()
-    expect(screen.getByRole('button', { name: /Info Icon/i })).toBeInTheDocument()
+    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/header.tsx

@@ -1,7 +1,10 @@
 import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
 
-import { Button, Icon } from '@/src/lib/components'
+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'
@@ -22,7 +25,9 @@ export function WidgetHeaderContent({ tutorName }: WidgetHeaderContentProps) {
 }
 
 export function WidgetHeaderContentWithoutMeta({ name }: { name?: string }) {
+  const { t } = useTranslation()
   const [, goBack] = useWidgetGoBackTabAtom()
+  const tutorName = name ?? t('general.name')
 
   return (
     <div
@@ -35,7 +40,7 @@ export function WidgetHeaderContentWithoutMeta({ name }: { name?: string }) {
       </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}
+          {tutorName}
         </span>
       </div>
     </div>
@@ -51,6 +56,7 @@ function WidgetHeader({
   const { t } = useTranslation()
   const [, setTab] = useWidgetTabsAtom()
   const name = tutorName ?? t('general.name')
+  const isMobile = useMediaQuery({ maxSize: 'md' })
 
   const handleClickArchive = () => {
     setTab('chat')
@@ -60,6 +66,11 @@ function WidgetHeader({
     setTab('information')
   }
 
+  const handleHideWidget = () => {
+    TutorWidgetEvents['c3po-app-widget-hide'].dispatch()
+    DataHubService.sendEvent({ schema: new ClickTutorMinimizeSchema() })
+  }
+
   return (
     <div className='mt-0.5 flex flex-col gap-2 text-neutral-900'>
       <div className='flex justify-end'>
@@ -67,7 +78,7 @@ function WidgetHeader({
           <Button
             className='text-neutral-500'
             show={enabledButtons.includes('close')}
-            onClick={() => TutorWidgetEvents['c3po-app-widget-hide'].dispatch()}
+            onClick={handleHideWidget}
             aria-label='Close Icon'>
             <Icon name='close' className='h-3 w-3' aria-hidden />
           </Button>
@@ -78,24 +89,25 @@ function WidgetHeader({
           {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 className='grid-area-[b] ml-auto shrink-0'>
+          <div className={clsx('flex max-w-max gap-3 text-neutral-700', styles.btnContainer)}>
+            <Tooltip show={!isMobile} content={t('general.buttons.archive')}>
+              <Button
+                show={enabledButtons.includes('archive')}
+                onClick={handleClickArchive}
+                aria-label={t('general.buttons.archive') + ' Icon'}>
+                <Icon name='archive' className='h-4 w-4' aria-hidden />
+              </Button>
+            </Tooltip>
+            <Tooltip show={!isMobile} content={t('general.buttons.info')} position='left'>
+              <Button
+                show={enabledButtons.includes('info')}
+                onClick={handleClickInfo}
+                aria-label={t('general.buttons.info') + ' Icon'}>
+                <Icon name='info' className='h-4 w-4' aria-hidden />
+              </Button>
+            </Tooltip>
           </div>
         </div>
       </div>

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

@@ -41,7 +41,7 @@ function WidgetInformationPage() {
       </div>
 
       <div className='flex flex-col gap-5'>
-        {infoItems({ tutorName }).map((item) => (
+        {infoItems({ tutorName: t('general.name') }).map((item) => (
           <InformationCard
             key={item.titleKey}
             icon={item.icon}