app-tutor-ai-consumer 1.36.0 → 1.38.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [1.38.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.37.0...v1.38.0) (2025-11-10)
+
+### Features
+
+- add chat interaction datahub events ([e3df5bb](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/e3df5bb4223579128edb0511b718f74fb4d1bf79))
+
+# [1.37.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.36.0...v1.37.0) (2025-11-10)
+
+### Features
+
+- add postcss prefix ([d008da3](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/d008da3e5d587d134d5faff4b96159f7ee685b7f))
+- adding app prefix ([b093214](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/b0932143ab524321fe477ba8b32bd3050476916f))
+
 # [1.36.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.35.1...v1.36.0) (2025-11-07)
 
 ### Features

package/config/rspack/rspack.config.js

@@ -115,8 +115,14 @@ module.exports = async function (env) {
             {
               loader: 'postcss-loader',
               options: {
-                postcssOptions: {
-                  config: path.resolve(paths.ROOT, 'postcss.config.js')
+                postcssOptions: (loaderContext) => {
+                  const config = require(path.resolve(paths.ROOT, 'postcss.config.js'))
+                  return typeof config === 'function'
+                    ? config({
+                        file: loaderContext.resourcePath,
+                        resourcePath: loaderContext.resourcePath
+                      })
+                    : config
                 }
               }
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-tutor-ai-consumer",
-  "version": "1.36.0",
+  "version": "1.38.0",
   "main": "index.js",
   "scripts": {
     "dev": "rspack serve --env=development --config config/rspack/rspack.config.js",
@@ -119,6 +119,7 @@
     "immer": "~10.1.1",
     "jotai": "~2.12.5",
     "linkify-it": "~5.0.0",
+    "postcss-prefix-selector": "^2.1.1",
     "prism-react-renderer": "~2.4.1",
     "react": "~19.1.0",
     "react-dom": "~19.1.0",

package/postcss.config.js

@@ -1,3 +1,40 @@
-module.exports = {
+const prefixer = require('postcss-prefix-selector')
+
+const postcssConfigWithPrefix = {
+  plugins: [
+    require('postcss-import'),
+    require('tailwindcss'),
+    require('autoprefixer'),
+    prefixer({
+      prefix: '#app-tutor-ai-consumer',
+      transform: (prefix, selector, prefixedSelector) => {
+        if (
+          selector.startsWith(':root') ||
+          selector.startsWith('html') ||
+          selector.startsWith('body')
+        ) {
+          return selector
+        }
+
+        if (selector.startsWith('#app-tutor-ai-consumer')) {
+          return selector
+        }
+
+        return prefixedSelector
+      }
+    })
+  ]
+}
+
+const postcssConfigWithoutPrefix = {
   plugins: [require('postcss-import'), require('tailwindcss'), require('autoprefixer')]
 }
+
+module.exports = (ctx) => {
+  const filePath = ctx?.file || ctx?.resourcePath || ''
+  if (filePath.includes('.module.css')) {
+    return postcssConfigWithoutPrefix
+  }
+
+  return postcssConfigWithPrefix
+}

package/src/config/datahub/actions.ts

@@ -13,7 +13,7 @@ export const ActionNames = {
   CLICK_HOTMART_TUTOR: `${DataHubActions.CLICK}_hotmart_tutor`,
   CLICK_TUTOR_MINIMIZE: `${DataHubActions.CLICK}_tutor_minimize`,
   TRY_PRODUCT_TUTOR: `${DataHubActions.TRY}_product_tutor`,
-  TRY_SEND_TUTOR_MESSAGE: `${DataHubActions.TRY}_send_tutor_message`,
+  TRY_SEND_MESSAGE: `${DataHubActions.TRY}_send_message`,
   CLICK_TUTOR_BACK: `${DataHubActions.CLICK}_tutor_back`,
   CLICK_TUTOR_HISTORY: `${DataHubActions.CLICK}_tutor_history`,
   CLICK_TUTOR_INFO: `${DataHubActions.CLICK}_tutor_info`,
@@ -22,5 +22,6 @@ export const ActionNames = {
   CLICK_TUTOR_TEST_KNOWLEDGE: `${DataHubActions.CLICK}_tutor_test_knowledge`,
   CLOSE_TUTOR_ONBOARDING: `${DataHubActions.CLOSE}_tutor_onboarding`,
   VIEW_PRODUCT_TUTOR: `${DataHubActions.VIEW}_product_tutor`,
-  VIEW_TUTOR_ANSWER_MESSAGE: `${DataHubActions.VIEW}_tutor_answer_message`
+  VIEW_ANSWER_MESSAGE: `${DataHubActions.VIEW}_answer_message`,
+  VIEW_CHAT: `${DataHubActions.VIEW}_chat`
 }

package/src/config/datahub/constants.ts

@@ -28,6 +28,7 @@ export const ComponentNames = {
   BUTTON_CLOSE_TUTOR_CHAT: 'BUTTON_CLOSE_TUTOR_CHAT',
   BUTTON_VIEW_AGENT: 'BUTTON_VIEW_AGENT',
   BUTTON_SEND_MESSAGE: 'BUTTON_SEND_MESSAGE',
+  CHAT: 'CHAT',
   VIEW_ANSWER: 'VIEW_ANSWER',
   PRODUCT_CONSUME_CLICK_TUTOR_BACK: 'product_consume_click_tutor_back',
   PRODUCT_CONSUME_CLICK_TUTOR_HISTORY: 'product_consume_click_tutor_history',

package/src/config/datahub/entities.ts

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

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

@@ -11,5 +11,6 @@ export const UserRole = {
 
 export const ProductCategories = {
   OnlineServices: 'category.online_services.name',
-  Ebook: 'category.ebook.name'
+  Ebook: 'category.ebook.name',
+  ConversationalAgent: 'category.conversational_agent.name'
 } as const

package/src/config/datahub/schemas/tutor/__tests__/{try-send-tutor-message.spec.ts → try-send-message.spec.ts}

@@ -2,21 +2,24 @@ import { chance } from '@/src/config/tests'
 import { HttpCodes } from '@/src/lib/utils'
 import { ComponentNames, ComponentSource } from '../../../constants'
 import { DataHubEntities } from '../../../entities'
-import TrySendTutorMessage from '../try-send-tutor-message'
+import { AgentType } from '../../../types'
+import TrySendMessage from '../try-send-message'
 
-describe('TrySendTutorMessage', () => {
+describe('TrySendMessage', () => {
   it('should send the event with the correct structure', () => {
     const event = {
       questionType: 'TEXT',
-      questionId: chance.guid()
+      messageId: chance.guid(),
+      conversationId: chance.guid(),
+      agent: AgentType.HOTMART_TUTOR
     }
 
-    expect(new TrySendTutorMessage(event).getDataHubEventData()).toMatchObject({
+    expect(new TrySendMessage(event).getDataHubEventData()).toMatchObject({
       appVersion: '',
       clubVersion: 'MEMBERSHIP',
       componentName: ComponentNames.BUTTON_SEND_MESSAGE,
       componentSource: ComponentSource.HOTMART_TUTOR,
-      entity: DataHubEntities.PRODUCT_CONSUME,
+      entity: DataHubEntities.CONVERSATIONAL_AGENT,
       failureDescription: 'NOT_FAILURE_RESULT_EVENT',
       isLogged: true,
       membershipId: 'UNDEFINED',
@@ -24,7 +27,9 @@ describe('TrySendTutorMessage', () => {
       osVersion: '537.36',
       platform: 'WEB',
       platformDetail: 'WebKit',
-      questionId: event.questionId,
+      messageId: event.messageId,
+      conversationId: event.conversationId,
+      agent: AgentType.HOTMART_TUTOR,
       questionType: event.questionType,
       result: 'SUCCESSFUL',
       sessionId: 'UNDEFINED',

package/src/config/datahub/schemas/tutor/__tests__/{view-tutor-answer-message.spec.ts → view-answer-message.spec.ts}

@@ -1,15 +1,18 @@
 import { chance } from '@/src/config/tests'
 import { ComponentNames, ComponentSource } from '../../../constants'
 import { DataHubEntities } from '../../../entities'
+import { AgentType } from '../../../types'
 import { UserRole } from '../../constants'
-import ViewTutorAnswerMessage from '../view-tutor-answer-message'
+import ViewTutorAnswerMessage from '../view-answer-message'
 
-describe('ViewTutorAnswerMessage', () => {
+describe('ViewAnswerMessage', () => {
   it('should send the event with the correct structure', () => {
     const event = {
       messageType: 'TEXT',
       messageId: chance.guid(),
-      correlationId: chance.guid()
+      correlationId: chance.guid(),
+      conversationId: chance.guid(),
+      agent: AgentType.HOTMART_TUTOR
     }
 
     expect(new ViewTutorAnswerMessage(event).getDataHubEventData()).toMatchObject({
@@ -19,7 +22,9 @@ describe('ViewTutorAnswerMessage', () => {
       componentName: ComponentNames.VIEW_ANSWER,
       componentSource: ComponentSource.HOTMART_TUTOR,
       correlationId: event.correlationId,
-      entity: DataHubEntities.PRODUCT_CONSUME,
+      conversationId: event.conversationId,
+      agent: AgentType.HOTMART_TUTOR,
+      entity: DataHubEntities.CONVERSATIONAL_AGENT,
       isLogged: true,
       membershipId: 'UNDEFINED',
       membershipSlug: 'UNDEFINED',

package/src/config/datahub/schemas/tutor/__tests__/view-chat.spec.ts

@@ -0,0 +1,38 @@
+import { chance } from '@/src/config/tests'
+import { ComponentNames, ComponentSource } from '../../../constants'
+import { DataHubEntities } from '../../../entities'
+import { AgentType } from '../../../types'
+import { UserRole } from '../../constants'
+import ViewChatSchema from '../view-chat'
+
+describe('ViewChatSchema', () => {
+  it('should send the event with the correct structure', () => {
+    const event = {
+      conversationId: chance.guid(),
+      agent: AgentType.HOTMART_TUTOR
+    }
+
+    expect(new ViewChatSchema(event).getDataHubEventData()).toMatchObject({
+      appVersion: '',
+      arrivedFrom: 'HOME_CLASS_CONSUMER',
+      clubVersion: 'MEMBERSHIP',
+      componentName: ComponentNames.CHAT,
+      componentSource: ComponentSource.HOTMART_TUTOR,
+      conversationId: event.conversationId,
+      agent: AgentType.HOTMART_TUTOR,
+      entity: DataHubEntities.CONVERSATIONAL_AGENT,
+      isLogged: true,
+      membershipId: 'UNDEFINED',
+      membershipSlug: 'UNDEFINED',
+      osVersion: '537.36',
+      platform: 'WEB',
+      platformDetail: 'WebKit',
+      productType: 'category.online_services.name',
+      sessionId: 'UNDEFINED',
+      ucode: 'UNDEFINED',
+      url: 'http://localhost:3000/',
+      userId: 0,
+      userRole: UserRole.CONSUMER
+    })
+  })
+})

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

@@ -8,6 +8,6 @@ export { default as ClickTutorOnboardingStartSchema } from './click-tutor-onboar
 export { default as ClickTutorTestKnowledgeSchema } from './click-tutor-test-knowledge'
 export { default as CloseTutorOnboardingSchema } from './close-tutor-onboarding'
 export * from './constants'
-export { default as TrySendTutorMessageSchema } from './try-send-tutor-message'
+export { default as TrySendMessageSchema } from './try-send-message'
 export * from './types'
-export { default as ViewTutorAnswerMessageSchema } from './view-tutor-answer-message'
+export { default as ViewAnswerMessageSchema } from './view-answer-message'

package/src/config/datahub/schemas/tutor/{try-send-tutor-message.ts → try-send-message.ts}

@@ -2,26 +2,32 @@ import { HttpCodes } from '@/src/lib/utils'
 import { ActionNames } from '../../actions'
 import { ComponentNames, ComponentSource } from '../../constants'
 import { DataHubEntities } from '../../entities'
-import type { DataHubEntityTypes } from '../../types'
+import type { AgentType, DataHubEntityTypes } from '../../types'
 import type { ActionNamesType } from '../../types'
 import type { BaseTrySchemaConstructorArgs } from '../base-try-schema'
 import BaseTrySchema from '../base-try-schema'
 
-export type TrySendTutorMessageConstructorArgs = Partial<BaseTrySchemaConstructorArgs> & {
+export type TrySendMessageConstructorArgs = Partial<BaseTrySchemaConstructorArgs> & {
   questionType?: string
-  questionId?: string
+  messageId?: string
+  conversationId?: string
+  agent: AgentType
 }
 
-class TrySendTutorMessageSchema extends BaseTrySchema {
+class TrySendMessageSchema extends BaseTrySchema {
   action: ActionNamesType
   entity: DataHubEntityTypes
   questionType: string
-  questionId: string
+  messageId?: string
+  conversationId?: string
+  agent?: AgentType
 
-  constructor(args?: TrySendTutorMessageConstructorArgs) {
+  constructor(args?: TrySendMessageConstructorArgs) {
     const {
       questionType = 'TEXT',
-      questionId = '',
+      messageId,
+      conversationId,
+      agent,
       componentSource = ComponentSource.HOTMART_TUTOR,
       componentName = ComponentNames.BUTTON_SEND_MESSAGE,
       failureDescription = 'NOT_FAILURE_RESULT_EVENT',
@@ -37,19 +43,23 @@ class TrySendTutorMessageSchema extends BaseTrySchema {
       statusCode
     })
 
-    this.action = ActionNames.TRY_SEND_TUTOR_MESSAGE
-    this.entity = DataHubEntities.PRODUCT_CONSUME
+    this.action = ActionNames.TRY_SEND_MESSAGE
+    this.entity = DataHubEntities.CONVERSATIONAL_AGENT
     this.questionType = questionType
-    this.questionId = questionId
+    this.messageId = messageId
+    this.conversationId = conversationId
+    this.agent = agent
   }
 
   getDataHubEventData(): Record<string, unknown> {
     return {
       ...this.prepare(),
       questionType: this.questionType,
-      questionId: this.questionId
+      messageId: this.messageId,
+      conversationId: this.conversationId,
+      agent: this.agent
     }
   }
 }
 
-export default TrySendTutorMessageSchema
+export default TrySendMessageSchema

package/src/config/datahub/schemas/tutor/{view-tutor-answer-message.ts → view-answer-message.ts}

@@ -1,27 +1,35 @@
 import { ActionNames } from '../../actions'
 import { ComponentNames, ComponentSource } from '../../constants'
-import type { ActionNamesType } from '../../types'
+import { DataHubEntities } from '../../entities'
+import type { ActionNamesType, AgentType, DataHubEntityTypes } from '../../types'
 import type { BaseViewSchemaConstructorArgs } from '../base-view-schema'
 import BaseViewSchema from '../base-view-schema'
 
-export type ViewTutorAnswerMessageConstructorArgs = Partial<BaseViewSchemaConstructorArgs> & {
+export type ViewAnswerMessageConstructorArgs = Partial<BaseViewSchemaConstructorArgs> & {
   messageType?: string
   messageId?: string
   correlationId?: string
+  conversationId?: string
+  agent?: AgentType
 }
 
-class ViewTutorAnswerMessageSchema extends BaseViewSchema {
+class ViewAnswerMessageSchema extends BaseViewSchema {
   private messageType?: string
   private messageId?: string
   private correlationId?: string
+  private conversationId?: string
+  private agent?: AgentType
 
   action: ActionNamesType
+  entity: DataHubEntityTypes
 
-  constructor(args?: ViewTutorAnswerMessageConstructorArgs) {
+  constructor(args?: ViewAnswerMessageConstructorArgs) {
     const {
       messageType = 'TEXT',
       messageId,
       correlationId,
+      conversationId,
+      agent,
       arrivedFrom,
       entity,
       isLogged,
@@ -39,10 +47,13 @@ class ViewTutorAnswerMessageSchema extends BaseViewSchema {
       componentSource
     })
 
-    this.action = ActionNames.VIEW_TUTOR_ANSWER_MESSAGE
+    this.action = ActionNames.VIEW_ANSWER_MESSAGE
+    this.entity = DataHubEntities.CONVERSATIONAL_AGENT
     this.messageType = messageType
     this.messageId = messageId
     this.correlationId = correlationId
+    this.conversationId = conversationId
+    this.agent = agent
   }
 
   getDataHubEventData(): Record<string, unknown> {
@@ -50,9 +61,11 @@ class ViewTutorAnswerMessageSchema extends BaseViewSchema {
       ...super.prepare(),
       messageType: this.messageType,
       messageId: this.messageId,
-      correlationId: this.correlationId
+      correlationId: this.correlationId,
+      conversationId: this.conversationId,
+      agent: this.agent
     }
   }
 }
 
-export default ViewTutorAnswerMessageSchema
+export default ViewAnswerMessageSchema

package/src/config/datahub/schemas/tutor/view-chat.ts

@@ -0,0 +1,56 @@
+import { ActionNames } from '../../actions'
+import { ComponentNames, ComponentSource } from '../../constants'
+import { DataHubEntities } from '../../entities'
+import type { ActionNamesType, AgentType, DataHubEntityTypes } from '../../types'
+import type { BaseViewSchemaConstructorArgs } from '../base-view-schema'
+import BaseViewSchema from '../base-view-schema'
+
+export type ViewChatConstructorArgs = Partial<BaseViewSchemaConstructorArgs> & {
+  conversationId?: string
+  agent?: AgentType
+}
+
+class ViewChatSchema extends BaseViewSchema {
+  private conversationId?: string
+  private agent?: AgentType
+
+  action: ActionNamesType
+  entity: DataHubEntityTypes
+
+  constructor(args?: ViewChatConstructorArgs) {
+    const {
+      conversationId,
+      agent,
+      arrivedFrom,
+      entity,
+      isLogged,
+      productType,
+      componentName = ComponentNames.CHAT,
+      componentSource = ComponentSource.HOTMART_TUTOR
+    } = args ?? {}
+
+    super({
+      arrivedFrom,
+      entity,
+      isLogged,
+      productType,
+      componentName,
+      componentSource
+    })
+
+    this.action = ActionNames.VIEW_CHAT
+    this.entity = DataHubEntities.CONVERSATIONAL_AGENT
+    this.conversationId = conversationId
+    this.agent = agent
+  }
+
+  getDataHubEventData(): Record<string, unknown> {
+    return {
+      ...super.prepare(),
+      conversationId: this.conversationId,
+      agent: this.agent
+    }
+  }
+}
+
+export default ViewChatSchema

package/src/config/datahub/types.ts

@@ -18,6 +18,11 @@ export type ComponentSourceType = (typeof ComponentSource)[keyof typeof Componen
 export type ScreenNamesType = (typeof ScreenNames)[keyof typeof ScreenNames]
 export type ResultType = (typeof Result)[keyof typeof Result]
 
+export enum AgentType {
+  HOTMART_TUTOR = 'HOTMART_TUTOR',
+  PRODUCT_AGENT = 'PRODUCT_AGENT'
+}
+
 export type SchemaType = {
   action: ActionNamesType
   entity: DataHubEntityTypes

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

@@ -76,7 +76,7 @@ describe('useSendTextMessage', () => {
 
     expect(DataHubService.sendEvent).toHaveBeenCalledWith({
       schema: expect.objectContaining({
-        questionId: mockResponse.id,
+        messageId: mockResponse.id,
         questionType: 'TEXT'
       })
     })

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

@@ -3,8 +3,8 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { UAParser } from 'ua-parser-js'
 import { v4 } from 'uuid'
 
-import { ComponentSource, DataHubService } from '@/src/config/datahub'
-import { TrySendTutorMessageSchema } from '@/src/config/datahub/schemas/tutor'
+import { AgentType, ComponentSource, DataHubService } from '@/src/config/datahub'
+import { TrySendMessageSchema } from '@/src/config/datahub/schemas/tutor'
 import { APP_VERSION, HttpCodes, PLATFORM } from '@/src/lib/utils'
 import { DirectMessagesService as MessagesService } from '@/src/modules/messages'
 import { useGetProfile } from '@/src/modules/profile'
@@ -115,25 +115,19 @@ function useSendTextMessage() {
     },
     onSuccess(data) {
       setMessagesCache({ queryKey: messagesQueryConfig.queryKey, queryClient, data })()
-
-      DataHubService.sendEvent({
-        schema: new TrySendTutorMessageSchema({
-          questionId: data.id,
-          componentSource: isAgentMode
-            ? ComponentSource.PRODUCT_AGENT
-            : ComponentSource.HOTMART_TUTOR
-        })
-      })
     },
-    onError(error) {
+    onSettled(data, error) {
       DataHubService.sendEvent({
-        schema: new TrySendTutorMessageSchema({
-          statusCode: HttpCodes.BAD_REQUEST,
-          result: 'FAILURE',
-          failureDescription: error.message,
+        schema: new TrySendMessageSchema({
+          messageId: data?.id,
+          statusCode: error ? HttpCodes.BAD_REQUEST : HttpCodes.OK,
+          result: error ? 'FAILURE' : 'SUCCESSFUL',
+          failureDescription: error?.message,
           componentSource: isAgentMode
             ? ComponentSource.PRODUCT_AGENT
-            : ComponentSource.HOTMART_TUTOR
+            : ComponentSource.HOTMART_TUTOR,
+          agent: isAgentMode ? AgentType.PRODUCT_AGENT : AgentType.HOTMART_TUTOR,
+          conversationId: settings?.conversationId
         })
       })
     }

package/src/modules/messages/hooks/use-subscribe-message-received-event/use-subscribe-message-received-event.tsx

@@ -4,7 +4,8 @@ import { useQueryClient } from '@tanstack/react-query'
 import { produce } from 'immer'
 
 import { ComponentSource, DataHubService } from '@/src/config/datahub'
-import { ViewTutorAnswerMessageSchema } from '@/src/config/datahub/schemas/tutor'
+import { ViewAnswerMessageSchema } from '@/src/config/datahub/schemas/tutor'
+import { AgentType } from '@/src/config/datahub/types'
 import { useUpdateCursor } from '@/src/modules/cursor/hooks'
 import { useGetProfile } from '@/src/modules/profile'
 import { SparkieService } from '@/src/modules/sparkie'
@@ -67,12 +68,14 @@ const useSubscribeMessageReceivedEvent = () => {
 
       if (!isMine) {
         DataHubService.sendEvent({
-          schema: new ViewTutorAnswerMessageSchema({
-            correlationId: data.metadata.correlationId,
-            messageId: data.id,
+          schema: new ViewAnswerMessageSchema({
+            correlationId: data?.metadata?.correlationId,
+            messageId: data?.id,
             componentSource: isAgentMode
               ? ComponentSource.PRODUCT_AGENT
-              : ComponentSource.HOTMART_TUTOR
+              : ComponentSource.HOTMART_TUTOR,
+            agent: isAgentMode ? AgentType.PRODUCT_AGENT : AgentType.HOTMART_TUTOR,
+            conversationId: settings?.conversationId
           })
         })
 
@@ -91,6 +94,7 @@ const useSubscribeMessageReceivedEvent = () => {
       profileId,
       queryClient,
       setWidgetLoading,
+      settings?.conversationId,
       useUpdateCursorMutation
     ]
   )

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

@@ -9,6 +9,7 @@ import { getAllMessagesQuery, useSendTextMessage } from '@/src/modules/messages/
 import { useMessagesMaxCount } from '@/src/modules/messages/store'
 import { useGetProfile } from '@/src/modules/profile'
 import { TutorWidgetEvents } from '../../events'
+import { useSendViewChatEvent } from '../../hooks'
 import { useSendViewTutorEvent } from '../../hooks/use-send-view-tutor-event'
 import {
   useWidgetLoadingAtom,
@@ -45,11 +46,11 @@ function ChatPage() {
       }),
     [conversationId, limit, profileId]
   )
+  useSendViewTutorEvent()
+  useSendViewChatEvent()
 
   const messagesQuery = useInfiniteQuery(messagesQueryConfig)
 
-  useSendViewTutorEvent()
-
   const handleSendMessage = () => {
     const text = chatInputRef.current?.value ?? ''
 

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

@@ -1,3 +1,4 @@
 export * from './use-listen-to-theme-change-event'
 export * from './use-listen-to-visibility-events'
+export * from './use-send-view-chat-event'
 export * from './use-send-view-tutor-event'

package/src/modules/widget/hooks/use-send-view-chat-event/index.ts

@@ -0,0 +1 @@
+export { default as useSendViewChatEvent } from './use-send-view-chat-event'

package/src/modules/widget/hooks/use-send-view-chat-event/use-send-view-chat-event.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useRef } from 'react'
+
+import { AgentType, ComponentSource, DataHubEntities, DataHubService } from '@/src/config/datahub'
+import ViewChatSchema from '@/src/config/datahub/schemas/tutor/view-chat'
+import { useIsAgentParentAtomValue, useWidgetSettingsAtomValue } from '../../store'
+
+function useSendViewChatEvent() {
+  const isAgentMode = useIsAgentParentAtomValue()
+  const settings = useWidgetSettingsAtomValue()
+
+  const sent = useRef(false)
+
+  useEffect(() => {
+    if (sent.current) return
+
+    const schema = new ViewChatSchema({
+      componentSource: isAgentMode ? ComponentSource.PRODUCT_AGENT : ComponentSource.HOTMART_TUTOR,
+      agent: isAgentMode ? AgentType.PRODUCT_AGENT : AgentType.HOTMART_TUTOR,
+      conversationId: settings?.conversationId,
+      entity: DataHubEntities.CONVERSATIONAL_AGENT
+    })
+
+    DataHubService.sendEvent({ schema })
+    sent.current = true
+  }, [isAgentMode, settings?.conversationId])
+}
+
+export default useSendViewChatEvent