app-tutor-ai-consumer 1.20.0 → 1.21.1

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [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)
+
+### Features
+
+- add DataHub Config ([745264a](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/745264a166e868884958abb19d0d720e06294ffe))
+
 # [1.20.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.19.0...v1.20.0) (2025-07-29)
 
 ### Features

package/package.json

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

package/src/config/datahub/actions.ts

@@ -0,0 +1,10 @@
+export const DataHubActions = {
+  OPEN: 'open',
+  TRY: 'try',
+  CLICK: 'click',
+  CLOSE: 'close',
+  SELECT: 'select',
+  VIEW: 'view'
+} as const
+
+export type DataHubActionTypes = (typeof DataHubActions)[keyof typeof DataHubActions]

package/src/config/datahub/constants.ts

@@ -0,0 +1,43 @@
+export const DATA_VERSION = '1.0'
+
+export const EVENT_VERSION = '1.1'
+
+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'
+} as const
+
+export const Platform = {
+  WEB: 'WEB'
+} as const
+
+export const ResultType = {
+  SUCCESS: 'SUCCESSFUL',
+  FAILURE: 'FAILURE',
+  FAILURE_DESCRIPTION: 'NOT_FAILURE_RESULT_EVENT'
+} as const
+
+export const ComponentNames = {
+  BUTTON_LIKE_ANSWER: 'BUTTON_LIKE_ANSWER',
+  BUTTON_DISLIKE_ANSWER: 'BUTTON_DISLIKE_ANSWER'
+} as const
+
+export const ComponentSource = {
+  ACTION_BAR_STATUS: 'ACTION_BAR_STATUS'
+} as const
+
+export const ArrivedFrom = {
+  HOME: 'HOME'
+} as const
+
+export const PushKind = {
+  NOT_PUSH_EVENT: 'NOT_PUSH_EVENT'
+} as const

package/src/config/datahub/entities.ts

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

package/src/config/datahub/index.ts

@@ -0,0 +1,5 @@
+export * from './constants'
+export * from './entities'
+export { default as DataHubService } from './service'
+export { default as DataHubStore } from './store'
+export * from './types'

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

@@ -0,0 +1,72 @@
+import { APP_VERSION } from '@/src/lib/utils'
+import { DataHubStore } from '..'
+import { Platform } from '../constants'
+import type {
+  ActionNamesType,
+  DataHubEntityTypes,
+  InitDataParams,
+  PlatformType,
+  SchemaType
+} from '../types'
+
+import { ClubVersion, UserRole } from './constants'
+import type { ClubVersionType, UserRoleType } from './types'
+
+abstract class BaseSchema implements SchemaType, InitDataParams {
+  appVersion: string
+  osVersion: string
+  platform: PlatformType
+  platformDetail: string
+
+  membershipId: string
+  membershipSlug: string
+  sessionId: string
+  ucode: string
+  userId: number
+
+  clubVersion: ClubVersionType
+  userRole: UserRoleType
+  url: string
+
+  abstract action: ActionNamesType
+  abstract entity: DataHubEntityTypes
+  abstract isLogged: boolean
+  abstract getDataHubEventData(): Record<string, unknown>
+
+  constructor() {
+    this.appVersion = APP_VERSION
+    this.clubVersion = ClubVersion.MEMBERSHIP
+    this.membershipId = DataHubStore.membershipId
+    this.membershipSlug = DataHubStore.membershipSlug
+    this.osVersion = DataHubStore.browserInfo.version ?? ''
+    this.platform = Platform.WEB
+    this.platformDetail = DataHubStore.browserInfo.name ?? ''
+    this.sessionId = DataHubStore.sessionId
+    this.ucode = DataHubStore.ucode
+    this.url = window.location.href
+    this.userId = DataHubStore.userId
+    this.userRole = UserRole.CONSUMER
+  }
+
+  prepare(): Record<string, unknown> {
+    return {
+      action: this.action,
+      entity: this.entity,
+      isLogged: this.isLogged,
+      appVersion: this.appVersion,
+      osVersion: this.osVersion,
+      platform: this.platform,
+      platformDetail: this.platformDetail,
+      membershipId: this.membershipId,
+      membershipSlug: this.membershipSlug,
+      sessionId: this.sessionId,
+      ucode: this.ucode,
+      userId: this.userId,
+      clubVersion: this.clubVersion,
+      userRole: this.userRole,
+      url: this.url
+    }
+  }
+}
+
+export default BaseSchema

package/src/config/datahub/schemas/constants.ts

@@ -0,0 +1,10 @@
+export const ClubVersion = {
+  MEMBERSHIP: 'MEMBERSHIP'
+} as const
+
+export const UserRole = {
+  OWNER: 'OWNER',
+  MODERATOR: 'MODERATOR',
+  ADMIN: 'ADMIN',
+  CONSUMER: 'CONSUMER'
+} as const

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

@@ -0,0 +1,2 @@
+export * from './constants'
+export * from './types'

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

@@ -0,0 +1,81 @@
+import { chance } from '@/src/config/tests'
+import { DataHubStore } from '../../..'
+import { ActionNames, ComponentNames, ScreenNames } from '../../../constants'
+import { DataHubEntities } from '../../../entities'
+import { UserRole } from '../../constants'
+import ClickHotmartTutor from '../click-hotmart-tutor'
+import { ButtonReactions } from '../constants'
+
+describe('ClickHotmartTutor', () => {
+  it('should send the event with the correct structure', () => {
+    const event = {
+      reactionType: ButtonReactions.DISLIKE,
+      messageId: chance.guid(),
+      hasAccess: true,
+      isLogged: true
+    }
+
+    expect(new ClickHotmartTutor(event).getDataHubEventData()).toMatchObject({
+      action: ActionNames.CLICK_HOTMART_TUTOR,
+      appVersion: '',
+      clubVersion: 'MEMBERSHIP',
+      componentName: ComponentNames.BUTTON_DISLIKE_ANSWER,
+      entity: DataHubEntities.HOME,
+      hasAccess: event.hasAccess,
+      isLogged: event.isLogged,
+      membershipId: 'UNDEFINED',
+      membershipSlug: 'UNDEFINED',
+      messageId: event.messageId,
+      osVersion: '537.36',
+      platform: 'WEB',
+      platformDetail: 'WebKit',
+      screenName: ScreenNames.HOME_CONSUMER,
+      sessionId: 'UNDEFINED',
+      ucode: 'UNDEFINED',
+      url: 'http://localhost:3000/',
+      userId: 0,
+      userRole: UserRole.CONSUMER
+    })
+  })
+
+  it('should send reflect DataHubStore current state when sending the event', () => {
+    const event = {
+      reactionType: ButtonReactions.LIKE,
+      messageId: chance.guid(),
+      hasAccess: true,
+      isLogged: true
+    }
+
+    const store = {
+      ucode: chance.guid(),
+      membershipId: chance.guid(),
+      membershipSlug: chance.animal(),
+      sessionId: chance.guid(),
+      userId: chance.integer()
+    }
+
+    DataHubStore.initData(store)
+
+    expect(new ClickHotmartTutor(event).getDataHubEventData()).toMatchObject({
+      action: ActionNames.CLICK_HOTMART_TUTOR,
+      appVersion: '',
+      clubVersion: 'MEMBERSHIP',
+      componentName: ComponentNames.BUTTON_LIKE_ANSWER,
+      entity: DataHubEntities.HOME,
+      hasAccess: event.hasAccess,
+      isLogged: event.isLogged,
+      membershipId: store.membershipId,
+      membershipSlug: store.membershipSlug,
+      messageId: event.messageId,
+      osVersion: '537.36',
+      platform: 'WEB',
+      platformDetail: 'WebKit',
+      screenName: ScreenNames.HOME_CONSUMER,
+      sessionId: store.sessionId,
+      ucode: store.ucode,
+      url: 'http://localhost:3000/',
+      userId: store.userId,
+      userRole: UserRole.CONSUMER
+    })
+  })
+})

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

@@ -0,0 +1,61 @@
+import { ActionNames, ComponentNames, ScreenNames } from '../../constants'
+import { DataHubEntities } from '../../entities'
+import type {
+  ActionNamesType,
+  ComponentNamesType,
+  DataHubEntityTypes,
+  ScreenNamesType
+} from '../../types'
+import BaseSchema from '../base-schema'
+
+import { ButtonReactions } from './constants'
+import type { ButtonReactionsType } from './types'
+
+class ClickHotmartTutor extends BaseSchema {
+  private componentName: ComponentNamesType
+  private screenName: ScreenNamesType
+  private messageId: string
+  private hasAccess: boolean
+
+  action: ActionNamesType
+  entity: DataHubEntityTypes
+  isLogged: boolean
+
+  constructor({
+    reactionType,
+    messageId,
+    hasAccess = true,
+    isLogged = true
+  }: {
+    reactionType: ButtonReactionsType
+    messageId: string
+    hasAccess?: boolean
+    isLogged?: boolean
+  }) {
+    super()
+
+    this.action = ActionNames.CLICK_HOTMART_TUTOR
+    this.entity = DataHubEntities.HOME
+
+    this.componentName =
+      reactionType === ButtonReactions.LIKE
+        ? ComponentNames.BUTTON_LIKE_ANSWER
+        : ComponentNames.BUTTON_DISLIKE_ANSWER
+    this.screenName = ScreenNames.HOME_CONSUMER
+    this.messageId = messageId
+    this.hasAccess = hasAccess
+    this.isLogged = isLogged
+  }
+
+  getDataHubEventData(): Record<string, unknown> {
+    return {
+      ...super.prepare(),
+      componentName: this.componentName,
+      screenName: this.screenName,
+      messageId: this.messageId,
+      hasAccess: this.hasAccess
+    }
+  }
+}
+
+export default ClickHotmartTutor

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

@@ -0,0 +1,4 @@
+export const ButtonReactions = {
+  LIKE: 'LIKE',
+  DISLIKE: 'DISLIKE'
+} as const

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

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

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

@@ -0,0 +1,3 @@
+import type { ButtonReactions } from './constants'
+
+export type ButtonReactionsType = (typeof ButtonReactions)[keyof typeof ButtonReactions]

package/src/config/datahub/schemas/types.ts

@@ -0,0 +1,19 @@
+import type { ClubVersion, UserRole } from './constants'
+
+export type UserRoleType = (typeof UserRole)[keyof typeof UserRole]
+
+export type ClubVersionType = (typeof ClubVersion)[keyof typeof ClubVersion]
+
+export type SchemaBasedProps = {
+  membershipSlug?: string
+  membershipId?: string
+  ucode?: string
+  userId?: number
+  hasAccess?: boolean
+}
+
+export type BaseSchemaProps = {
+  membershipId: string
+  membershipSlug: string
+  userId: string
+}

package/src/config/datahub/service.ts

@@ -0,0 +1,32 @@
+import EventAgent from '@hotmart/event-agent-js'
+
+import { productionMode } from '@/src/lib/utils'
+
+import { DATA_VERSION, EVENT_VERSION, System } from './constants'
+import type { SendEventParams } from './types'
+
+EventAgent.mode = productionMode ? 'production' : 'staging'
+
+class DataHubService {
+  sendEvent({
+    schema,
+    dataVersion = DATA_VERSION,
+    eventVersion = EVENT_VERSION,
+    system = System.HOTMART_CLUB
+  }: SendEventParams): void {
+    const dataHubEvent = {
+      system,
+      action: schema.action,
+      entity: schema.entity,
+      data_version: dataVersion,
+      event_version: eventVersion,
+      event: schema.getDataHubEventData()
+    }
+
+    if (!productionMode) console.warn('DataHub event dispatched: ', dataHubEvent)
+
+    void EventAgent.send(dataHubEvent)
+  }
+}
+
+export default new DataHubService()

package/src/config/datahub/store.ts

@@ -0,0 +1,87 @@
+import { UAParser } from 'ua-parser-js'
+
+import type { InitDataParams } from './types'
+
+class DataHubStore {
+  private instanceObj?: {
+    userAgentParser: UAParser.IResult
+    browserInfo: UAParser.IBrowser
+    deviceType: string
+    deviceVendor: UAParser.IDevice['vendor']
+    deviceModel: UAParser.IDevice['model']
+    ucode: string
+    sessionId: string
+    userId: number
+    membershipSlug: string
+    membershipId: string
+  }
+
+  private get instance() {
+    return this.instanceObj ?? this.resetData()
+  }
+
+  initData({ ucode, membershipId, membershipSlug, sessionId, userId }: InitDataParams) {
+    this.instance.userAgentParser = UAParser(navigator.userAgent)
+    this.instance.browserInfo = this.instance.userAgentParser.browser
+    this.instance.deviceType =
+      this.instance.userAgentParser.device?.type?.toUpperCase() || 'DESKTOP'
+    this.instance.deviceVendor = this.instance.userAgentParser.device?.vendor?.toUpperCase() ?? ''
+    this.instance.deviceModel = this.instance.userAgentParser.device?.model?.toUpperCase() ?? ''
+    this.instance.ucode = ucode
+    this.instance.sessionId = sessionId
+    this.instance.userId = userId || 0
+    this.instance.membershipSlug = membershipSlug
+    this.instance.membershipId = membershipId
+  }
+
+  resetData() {
+    const userAgent = UAParser(navigator.userAgent)
+
+    const clearData = {
+      userAgentParser: userAgent,
+      browserInfo: userAgent.browser,
+      deviceType: userAgent.device.type?.toUpperCase() || 'DESKTOP',
+      deviceVendor: userAgent.device.vendor,
+      deviceModel: userAgent.device.model,
+      ucode: 'UNDEFINED',
+      sessionId: 'UNDEFINED',
+      userId: 0,
+      membershipSlug: 'UNDEFINED',
+      membershipId: 'UNDEFINED'
+    }
+
+    this.instanceObj = clearData
+
+    return clearData
+  }
+
+  get userAgentParser() {
+    return this.instance.userAgentParser
+  }
+
+  get browserInfo() {
+    return this.instance.browserInfo
+  }
+
+  get ucode() {
+    return this.instance.ucode
+  }
+
+  get sessionId() {
+    return this.instance.sessionId
+  }
+
+  get userId() {
+    return this.instance.userId
+  }
+
+  get membershipSlug() {
+    return this.instance.membershipSlug
+  }
+
+  get membershipId() {
+    return this.instance.membershipId
+  }
+}
+
+export default new DataHubStore()

package/src/config/datahub/types.ts

@@ -0,0 +1,35 @@
+import type { ActionNames, ComponentNames, Platform, ScreenNames, System } from './constants'
+import type { DataHubEntities } from './entities'
+
+export type ActionNamesType = (typeof ActionNames)[keyof typeof ActionNames]
+export type DataHubEntityTypes = (typeof DataHubEntities)[keyof typeof DataHubEntities]
+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 SchemaType = {
+  action: ActionNamesType
+  entity: DataHubEntityTypes
+  osVersion: string
+  appVersion: string
+  platformDetail: string
+  platform: PlatformType
+  prepare: () => Record<string, unknown>
+  getDataHubEventData: () => Record<string, unknown>
+}
+
+export type SendEventParams = {
+  schema: SchemaType
+  system?: SystemType
+  dataVersion?: string
+  eventVersion?: string
+}
+
+export type InitDataParams = {
+  ucode: string
+  sessionId: string
+  userId: number
+  membershipSlug: string
+  membershipId: string
+}

package/src/development-bootstrap.tsx

@@ -35,6 +35,7 @@ if (devMode) {
       namespace: 'tutor_v1-2',
       author: 'user',
       clubName: 'comofazerumvideodeteste',
+      membershipSlug: 'comofazerumvideodeteste',
       productName: 'Curso de Assinatura',
       productId: 4266504,
       sessionId: v4(),

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

@@ -5,6 +5,26 @@ import { Spinner } from '../spinner'
 
 import styles from './styles.module.css'
 
+function ButtonContent({
+  children,
+  loading
+}: PropsWithChildren<{
+  loading?: boolean
+}>) {
+  if (loading)
+    return (
+      <div className='col-start-1 row-start-1'>
+        <Spinner className='col-start-1 row-start-1 mx-auto my-auto h-[1em] w-[1em] text-current' />
+      </div>
+    )
+
+  return (
+    <span data-label='text-content' className='col-start-1 row-start-1 flex flex-nowrap gap-2'>
+      {children}
+    </span>
+  )
+}
+
 export type ButtonProps = PropsWithChildren<
   ButtonHTMLAttributes<HTMLButtonElement> & {
     variant?: 'brand' | 'secondary' | 'primary' | 'tertiary' | 'gradient-outline'
@@ -77,20 +97,7 @@ function Button({
           {...props}
           disabled={props.disabled || loading}
           aria-busy={loading}>
-          <span
-            data-label='text-content'
-            className={clsx('flex flex-nowrap gap-2 [grid-area:stack]', {
-              visible: !loading,
-              invisible: loading
-            })}>
-            {children}
-          </span>
-          <Spinner
-            className={clsx('mx-auto my-auto h-[1em] w-[1em] text-current', '[grid-area:stack]', {
-              visible: loading,
-              invisible: !loading
-            })}
-          />
+          <ButtonContent loading={loading}>{children}</ButtonContent>
         </button>
       )
     case 'secondary':
@@ -107,20 +114,7 @@ function Button({
           {...props}
           disabled={props.disabled || loading}
           aria-busy={loading}>
-          <span
-            data-label='text-content'
-            className={clsx('flex flex-nowrap gap-2 [grid-area:stack]', {
-              visible: !loading,
-              invisible: loading
-            })}>
-            {children}
-          </span>
-          <Spinner
-            className={clsx('mx-auto my-auto h-[1em] w-[1em] text-current', '[grid-area:stack]', {
-              visible: loading,
-              invisible: !loading
-            })}
-          />
+          <ButtonContent loading={loading}>{children}</ButtonContent>
         </button>
       )
     case 'tertiary':
@@ -134,28 +128,7 @@ function Button({
           {...props}
           disabled={props.disabled || loading}
           aria-busy={loading}>
-          <span
-            data-label='text-content'
-            className={clsx(`col-start-1 row-start-1 flex flex-nowrap gap-2`, {
-              invisible: loading,
-              visible: !loading
-            })}>
-            {children}
-          </span>
-
-          {loading && (
-            <div className='col-start-1 row-start-1'>
-              <Spinner
-                className={clsx(
-                  'col-start-1 row-start-1 mx-auto my-auto h-[1em] w-[1em] text-current',
-                  {
-                    visible: loading,
-                    invisible: !loading
-                  }
-                )}
-              />
-            </div>
-          )}
+          <ButtonContent loading={loading}>{children}</ButtonContent>
         </button>
       )
     case 'brand':
@@ -172,20 +145,7 @@ function Button({
           {...props}
           disabled={props.disabled || loading}
           aria-busy={loading}>
-          <span
-            data-label='text-content'
-            className={clsx('flex flex-nowrap gap-2 [grid-area:stack]', {
-              visible: !loading,
-              invisible: loading
-            })}>
-            {children}
-          </span>
-          <Spinner
-            className={clsx('mx-auto my-auto h-[1em] w-[1em] text-current', '[grid-area:stack]', {
-              visible: loading,
-              invisible: !loading
-            })}
-          />
+          <ButtonContent loading={loading}>{children}</ButtonContent>
         </button>
       )
     default:
@@ -205,20 +165,7 @@ function Button({
           {...props}
           disabled={props.disabled || loading}
           aria-busy={loading}>
-          <span
-            data-label='text-content'
-            className={clsx('flex flex-nowrap gap-2 [grid-area:stack]', {
-              visible: !loading,
-              invisible: loading
-            })}>
-            {children}
-          </span>
-          <Spinner
-            className={clsx('mx-auto my-auto h-[1em] w-[1em] text-current', '[grid-area:stack]', {
-              visible: loading,
-              invisible: !loading
-            })}
-          />
+          <ButtonContent loading={loading}>{children}</ButtonContent>
         </button>
       )
   }

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

@@ -1,5 +1,5 @@
-<svg viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path fill-rule="evenodd" clip-rule="evenodd"
-    d="M0 8.5C0 4.08172 3.58172 0.5 8 0.5C12.4183 0.5 16 4.08172 16 8.5C16 12.9183 12.4183 16.5 8 16.5C3.58172 16.5 0 12.9183 0 8.5ZM8 1.5C4.13401 1.5 1 4.63401 1 8.5C1 12.366 4.13401 15.5 8 15.5C11.866 15.5 15 12.366 15 8.5C15 4.63401 11.866 1.5 8 1.5ZM7 5.5C7 4.94772 7.44772 4.5 8 4.5C8.55229 4.5 9 4.94772 9 5.5C9 6.05228 8.55229 6.5 8 6.5C7.44772 6.5 7 6.05228 7 5.5ZM7 7.5H7.5C8.32843 7.5 9 8.17157 9 9V12.5H8V9C8 8.72386 7.77614 8.5 7.5 8.5H7V7.5Z"
-    fill="currentColor" />
+    d="M0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8ZM8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1ZM7 5C7 4.44772 7.44772 4 8 4C8.55229 4 9 4.44772 9 5C9 5.55228 8.55229 6 8 6C7.44772 6 7 5.55228 7 5ZM7 7H7.5C8.32843 7 9 7.67157 9 8.5V12H8V8.5C8 8.22386 7.77614 8 7.5 8H7V7Z"
+    fill="currentColor" shape-rendering="geometricPrecision" />
 </svg>

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

@@ -71,7 +71,7 @@ const ChatInput = forwardRef<HTMLTextAreaElement, ChatInputProps>(
           ref={ref}
           className={clsx(
             clsx(
-              'max-h-12 w-full resize-none border-none bg-transparent text-neutral-900 outline-none outline-0 placeholder:text-neutral-600',
+              'max-h-12 w-full resize-none border-none bg-transparent text-sm/normal text-neutral-900 outline-none outline-0 placeholder:text-neutral-600',
               styles.textArea
             ),
             { 'cursor-not-allowed opacity-40': inputDisabled }

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

@@ -0,0 +1,53 @@
+import { DataHubService } from '@/src/config/datahub'
+import { ButtonReactions, ClickHotmartTutor } from '@/src/config/datahub/schemas/tutor'
+import { render, screen } from '@/src/config/tests'
+import ParsedMessageBuilder from '../../__tests__/parsed-message.builder'
+
+import MessageActions from './message-actions'
+
+describe('<MessageActions/>', () => {
+  const defaultProps = {
+    message: new ParsedMessageBuilder()
+  }
+
+  const renderComponent = (props = defaultProps) => render(<MessageActions {...props} />)
+
+  it('should render without errors', () => {
+    renderComponent()
+
+    expect(screen.getByRole('button', { name: /general.buttons.like/i })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /general.buttons.dislike/i })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /general.buttons.copy/i })).toBeInTheDocument()
+  })
+
+  it('should copy the current message text when clicking the copy button', async () => {
+    vi.spyOn(navigator.clipboard, 'writeText').mockImplementation(() => Promise.resolve(undefined))
+
+    const { user } = renderComponent()
+
+    const copyBtn = screen.getByRole('button', { name: /general.buttons.copy/i })
+
+    await user.click(copyBtn)
+
+    expect(navigator.clipboard.writeText).toBeCalledTimes(1)
+    expect(navigator.clipboard.writeText).toHaveBeenNthCalledWith(1, defaultProps.message.text)
+  })
+
+  it('should send like event when clicking the like button', async () => {
+    vi.spyOn(DataHubService, 'sendEvent').mockImplementation(() => undefined)
+
+    const { user } = renderComponent()
+
+    const likeBtn = screen.getByRole('button', { name: /general.buttons.like/i })
+
+    await user.click(likeBtn)
+
+    expect(DataHubService.sendEvent).toBeCalledTimes(1)
+    expect(DataHubService.sendEvent).toHaveBeenNthCalledWith(1, {
+      schema: new ClickHotmartTutor({
+        messageId: defaultProps.message.id,
+        reactionType: ButtonReactions.LIKE
+      })
+    })
+  })
+})

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

@@ -1,8 +1,11 @@
+import { type CSSProperties, useState } from 'react'
 import clsx from 'clsx'
 import dayjs from 'dayjs'
-import type { CSSProperties } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import { DataHubService } from '@/src/config/datahub'
+import type { ButtonReactionsType } from '@/src/config/datahub/schemas/tutor'
+import { ButtonReactions, ClickHotmartTutor } from '@/src/config/datahub/schemas/tutor'
 import { Button, Icon } from '@/src/lib/components'
 import type { ParsedMessage } from '../../types'
 
@@ -14,12 +17,28 @@ export type MessageActionsProps = {
 
 function MessageActions({ message, className, showActions = false }: MessageActionsProps) {
   const { t } = useTranslation()
-  const copyToClipboard = () => {
+  const [copying, setCopying] = useState(false)
+  const [reaction, setReaction] = useState<ButtonReactionsType | null>(null)
+
+  const copyToClipboard = (): void => {
     if (!message.text) return
 
-    navigator.clipboard.writeText(message.text).catch((err) => {
-      console.error('Failed to copy text: ', err)
-    })
+    setCopying(true)
+
+    navigator.clipboard
+      .writeText(message.text)
+      .catch((err) => {
+        console.error('Failed to copy text: ', err)
+      })
+      .finally(() => {
+        setTimeout(() => setCopying(false), 1000)
+      })
+  }
+
+  const handleReaction = (reactionType: ButtonReactionsType = ButtonReactions.LIKE): void => {
+    const schema = new ClickHotmartTutor({ messageId: message.id, reactionType })
+    DataHubService.sendEvent({ schema })
+    setReaction(reactionType)
   }
 
   return (
@@ -32,14 +51,32 @@ function MessageActions({ message, className, showActions = false }: MessageActi
         className={clsx('flex flex-nowrap gap-2 text-neutral-600', {
           hidden: !showActions
         })}>
-        <Button aria-label={t('general.buttons.like')}>
-          <Icon name='like' className='h-3 w-3.5' />
+        <Button onClick={() => handleReaction()} aria-label={t('general.buttons.like')}>
+          <Icon
+            name='like'
+            className={clsx('h-3 w-3.5', {
+              'text-info-500': reaction === ButtonReactions.LIKE
+            })}
+          />
         </Button>
-        <Button className='rotate-180 scale-x-[-1]' aria-label={t('general.buttons.dislike')}>
-          <Icon name='like' className='h-3 w-3.5' />
+        <Button
+          className='rotate-180 scale-x-[-1]'
+          onClick={() => handleReaction(ButtonReactions.DISLIKE)}
+          aria-label={t('general.buttons.dislike')}>
+          <Icon
+            name='like'
+            className={clsx('h-3 w-3.5', {
+              'text-danger-500': reaction === ButtonReactions.DISLIKE
+            })}
+          />
         </Button>
-        <Button onClick={copyToClipboard} aria-label={t('general.buttons.copy')}>
-          <Icon name='copy' className='h-3 w-3.5' />
+        <Button onClick={copyToClipboard} aria-label={t('general.buttons.copy')} disabled={copying}>
+          <Icon
+            name='copy'
+            className={clsx('h-3 w-3.5', {
+              'text-info-500': copying
+            })}
+          />
         </Button>
       </div>
     </div>

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

@@ -52,7 +52,9 @@ const MessagesContainer = forwardRef<
   }
 
   return (
-    <div ref={scrollerRef} className='mx-2 my-4 flex h-full flex-col gap-2 overflow-auto px-4'>
+    <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'

package/src/modules/messages/hooks/use-scroller/use-scroller.tsx

@@ -34,7 +34,7 @@ function useScroller(forwardedRef: ForwardedRef<HTMLDivElement>) {
     if (!scroller) return
 
     scroller.scrollTo({
-      top: scroller.scrollHeight,
+      top: scroller.scrollHeight + 10,
       behavior: 'smooth'
     })
   }, [])

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

@@ -11,8 +11,8 @@ function AIAvatar({
 }: AIAvatarProps) {
   return (
     <figure
-      className={clsx('flex h-12 w-12 items-center justify-center rounded-full', styles.avatar)}>
-      <div className={clsx('flex h-11 w-11 items-center justify-center', className)}>
+      className={clsx('flex h-9 w-9 items-center justify-center rounded-full', styles.avatar)}>
+      <div className={clsx('flex h-8 w-8 items-center justify-center', className)}>
         <Icon name='ai-color' className='h-6 w-6' aria-label='AI avatar Icon' />
       </div>
     </figure>

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

@@ -19,13 +19,6 @@ const MessageItemError = lazy(
   () => import('@/src/modules/messages/components/message-item-error/message-item-error')
 )
 
-const MessageItemEndOfScroll = lazy(
-  () =>
-    import(
-      '@/src/modules/messages/components/message-item-end-of-scroll/message-item-end-of-scroll'
-    )
-)
-
 function ChatPage() {
   const chatInputRef = useRef<HTMLTextAreaElement>(null)
   const scrollerRef = useRef<HTMLDivElement>(null)
@@ -82,7 +75,7 @@ function ChatPage() {
           buttonDisabled={messagesQuery?.isLoading || !value.trim()}
         />
       }>
-      <div className='mt-4 px-6 py-4'>
+      <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} />
       </div>
       <MessagesContainer
@@ -92,13 +85,6 @@ function ChatPage() {
         }}
         showButton={messagesQuery.hasNextPage}
         loading={messagesQuery.isFetchingNextPage}>
-        <MessageItemEndOfScroll
-          show={
-            !messagesQuery.isFetching &&
-            !messagesQuery.hasNextPage &&
-            Number(messagesQuery.data?.size) > 0
-          }
-        />
         {messagesQuery.data && <MessagesList messagesMap={messagesQuery.data} />}
         <MessageItemError
           show={messagesQuery.isError}

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

@@ -1,31 +1,42 @@
+import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
 
 import { Button, Icon } from '@/src/lib/components'
 import { TutorWidgetEvents } from '../../events'
-import { useWidgetTabsAtom } from '../../store'
+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-base font-bold'>{tutorName}</h4>}
+        {tutorName && <h4 className='text-sm/loose font-bold'>{tutorName}</h4>}
       </div>
     </div>
   )
 }
 
 export function WidgetHeaderContentWithoutMeta({ name }: { name?: string }) {
+  const [, goBack] = useWidgetGoBackTabAtom()
+
   return (
-    <div className='grid-areas-[a_b] grid grid-cols-[auto_1fr] items-center gap-1'>
-      <Button className='grid-area-[a]' aria-label='Arrow Left Icon'>
-        <Icon name='arrow-left' width={15} height={15} aria-hidden />
+    <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 justify-center'>
-        <span>{name}</span>
+      <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>
   )
@@ -50,33 +61,44 @@ function WidgetHeader({
   }
 
   return (
-    <div className='grid-areas-[a_b] mt-0.5 grid grid-cols-[1fr_auto] items-center text-neutral-1000'>
-      <div className='grid-area-[a]'>
-        {showContent && !showContentWithoutMeta && <WidgetHeaderContent tutorName={name} />}
-        {showContentWithoutMeta && !showContent && <WidgetHeaderContentWithoutMeta name={name} />}
-      </div>
-      <div className='shrink-0'>
-        <div className='grid-area-[b] ml-auto flex max-w-max gap-3 text-neutral-700'>
-          <Button
-            show={enabledButtons.includes('archive')}
-            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='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-4 w-4' aria-hidden />
+            <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'>
+        <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>
   )
 }

package/src/modules/widget/components/header/styles.module.css

@@ -0,0 +1,11 @@
+.closeContainer {
+  --custom-btn-padding: 0.375rem;
+}
+
+.btnContainer {
+  --custom-btn-padding: 0.25rem;
+}
+
+.withoutMetaContainer {
+  --custom-btn-padding: 0.25rem;
+}

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

@@ -1,9 +1,9 @@
 import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
 
-import { Icon } from '@/src/lib/components'
-import { useWidgetSettingsAtom, useWidgetTabsAtom } from '../../store'
+import { useWidgetSettingsAtom } from '../../store'
 import { AIAvatar } from '../ai-avatar'
+import { WidgetHeader } from '../header'
 import { PageLayout } from '../page-layout'
 
 import { infoItems } from './constants'
@@ -11,27 +11,21 @@ import { InformationCard } from './information-card'
 
 function WidgetInformationPage() {
   const { t } = useTranslation()
-  const [, setWidgetTabs] = useWidgetTabsAtom()
   const [settings] = useWidgetSettingsAtom()
   const isDarkMode = settings?.config?.theme === 'dark'
 
   return (
-    <PageLayout className='p-5 text-white'>
-      <div
-        className={clsx('relative mb-8 flex h-12 items-center justify-center', {
-          'text-white': isDarkMode,
-          'text-neutral-700': !isDarkMode
-        })}>
-        <button
-          className='absolute left-0'
-          aria-label='Return Button'
-          onClick={() => setWidgetTabs('chat')}>
-          <Icon name='arrow-left' width={16} height={16} />
-        </button>
-        <h1 className='mx-auto font-bold'>{t('info.title')}</h1>
+    <PageLayout className='flex min-h-0 flex-col text-neutral-900 max-md:p-[1.125rem] md:p-5'>
+      <div className='mb-4'>
+        <WidgetHeader
+          enabledButtons={['close']}
+          showContent={false}
+          showContentWithoutMeta
+          tutorName={t('info.title')}
+        />
       </div>
 
-      <div className='mb-10 flex justify-center'>
+      <div className='my-8 flex justify-center'>
         <div className='flex flex-col items-center gap-2'>
           <AIAvatar />
 

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

@@ -32,7 +32,7 @@ function WidgetLoadingPage() {
   return (
     <PageLayout
       asideChild={<ChatInput name='new-chat-msg-input' ref={chatInputRef} loading={true} />}>
-      <div className='mt-4 flex h-full flex-col justify-start px-6 py-4'>
+      <div className='flex h-full flex-col justify-start max-md:p-[1.125rem] md:p-5'>
         <WidgetHeader enabledButtons={['close']} showContent={false} />
         <div className='mt-auto'>
           <MessageSkeleton />

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

@@ -90,14 +90,10 @@ function WidgetStarterPage() {
       }>
       <div className='grid-areas-[a_b] grid h-full grid-cols-1 grid-rows-[1fr_auto]'>
         <div
-          className={clsx('grid-area-[a] flex min-h-0 flex-col px-5 py-4', {
+          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}
-            showContent={false}
-          />
+          <WidgetHeader enabledButtons={['archive', 'info', 'close']} tutorName={name} />
 
           <div className='my-auto'>
             <GreetingsCard

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

@@ -1,5 +1,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'
@@ -10,6 +11,13 @@ const init = async (settings: WidgetSettingProps) => {
   try {
     initAxios(settings.hotmartToken)
     await initDayjs(settings.locale)
+    DataHubStore.initData({
+      ucode: settings.user?.ucode ?? '',
+      membershipId: settings.membershipId ?? '',
+      membershipSlug: settings.membershipSlug ?? '',
+      sessionId: settings.sessionId,
+      userId: Number(settings.userId)
+    })
     await SparkieService.initSparkie({
       token: settings?.hotmartToken,
       skipPresenceSetup: true,

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

@@ -51,4 +51,4 @@ export const goBackTabAtom = atom(null, (get, set) => {
 export const useGetWidgetTabsAtom = () => useAtom(widgetTabsAtom)
 export const useWidgetTabsAtom = () => useAtom(setWidgetTabsAtom)
 export const useWidgetTabsValueAtom = () => useAtomValue(setWidgetTabsAtom)
-export const useWidgetGoBackTabAton = () => useAtom(goBackTabAtom)
+export const useWidgetGoBackTabAtom = () => useAtom(goBackTabAtom)

package/tailwind.config.js

@@ -90,14 +90,12 @@ module.exports = {
           900: 'var(--hc-color-neutral-900)',
           1000: 'var(--hc-color-neutral-1000)'
         },
-        ai: {
-          primary: 'var(--ai-color-primary)',
-          secondary: 'var(--ai-color-secondary)',
-          dark: 'var(--ai-color-dark)',
-          'chat-response': 'var(--ai-color-chat-response)',
-          'gradient-primary': 'var(--ai-color-gradient-primary)',
-          'gradient-accent': 'var(--ai-color-gradient-accent)'
-        }
+        'ai-primary': 'var(--ai-color-primary)',
+        'ai-secondary': 'var(--ai-color-secondary)',
+        'ai-dark': 'var(--ai-color-dark)',
+        'ai-chat-response': 'var(--ai-color-chat-response)',
+        'ai-gradient-primary': 'var(--ai-color-gradient-primary)',
+        'ai-gradient-accent': 'var(--ai-color-gradient-accent)'
       }
     }
   },