app-tutor-ai-consumer 1.22.2 → 1.23.0

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+# [1.23.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.22.3...v1.23.0) (2025-08-11)
+
+### Features
+
+- add metadata properties to widget settings and component IDs to customize on agent page ([04c244d](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/04c244dcb4170665f6a216ce69c119e358118ef5))
+- adding component id ([82b25ce](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/82b25ce4a4974d3739dae09dc21928d5b3b78544))
+
+## [1.22.3](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.22.2...v1.22.3) (2025-08-08)
+
 ## [1.22.2](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.22.1...v1.22.2) (2025-08-07)
 
 ### Bug Fixes

package/package.json

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

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

@@ -42,6 +42,7 @@ function HorizontalDraggableScroll({ children, className }: HorizontalDraggableS
 
   return (
     <div
+      id='tutor-ai-consumer-horizontal-draggable-scroll'
       ref={containerRef}
       onMouseDown={handleMouseDown}
       onMouseMove={handleMouseMove}

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

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

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

@@ -12,6 +12,7 @@ export type ValidIconNames =
   | 'copy-solid'
   | 'copy'
   | 'double-check'
+  | 'expand'
   | 'gallery'
   | 'info'
   | 'interrogation'

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

@@ -22,7 +22,7 @@
 
 .right:before {
   top: 50%;
-  right: 97%;
+  right: 96%;
   transform: translateY(-50%) rotateZ(-90deg);
 }
 
@@ -34,6 +34,6 @@
 
 .left:before {
   top: 50%;
-  left: 97%;
+  left: 96%;
   transform: translateY(-50%) rotateZ(90deg);
-}
+}

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

@@ -71,7 +71,12 @@ function useSendTextMessage() {
               router: questionParam ? 'summary' : undefined,
               osVersion: browserInfo.version,
               platformDetail: browserInfo.name,
-              ucode: settings.user?.ucode
+              ucode: settings.user?.ucode,
+              agentProductId: settings.config?.metadata?.agentProductId,
+              agentName: settings.config?.metadata?.agentName,
+              courseName: settings.config?.metadata?.courseName,
+              source: settings.config?.metadata?.source,
+              prompt: settings.config?.metadata?.promptId
             },
             externalId: v4(),
             namespace: settings.namespace,

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

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

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

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

package/src/modules/widget/components/header/{header.spec.tsx → widget-header.spec.tsx}

@@ -2,7 +2,7 @@ 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'
+import WidgetHeader from './widget-header'
 
 describe('<WidgetHeader />', () => {
   const defaultProps = new WidgetHeaderPropsBuilder()
@@ -29,10 +29,10 @@ describe('<WidgetHeader />', () => {
     expect(screen.queryByRole('button', { name: /Arrow Left Icon/i })).not.toBeInTheDocument()
   })
 
-  it('should render WidgetHeaderContentWithoutMeta when prop showContentWithoutMeta is true and showContent is false', () => {
+  it('should render WidgetHeaderContentWithoutMeta when prop showContentWithoutMeta is true', () => {
     const props = new WidgetHeaderPropsBuilder()
+      .withEnabledButtons(['close', 'arrow-left'])
       .withShowContentWithoutMeta(true)
-      .withShowContent(false)
 
     renderComponent(props)
 

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

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

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

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

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

@@ -23,7 +23,9 @@ function PageLayout({ asideChild, children, className }: PageLayoutProps) {
         {children}
       </div>
       {asideChild && (
-        <div className='grid-area-[aside] flex-shrink-0 border-t border-t-neutral-300 px-5 py-4'>
+        <div
+          id='tutor-ai-consumer-page-layout-aside'
+          className='grid-area-[aside] flex-shrink-0 border-t border-t-neutral-300 px-5 py-4'>
           {asideChild}
         </div>
       )}

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

@@ -4,7 +4,7 @@ import type { CSSProperties, MouseEventHandler } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { Button, HorizontalDraggableScroll } from '@/src/lib/components'
-import { useRefEventListener } from '@/src/lib/hooks'
+import { useMediaQuery, useRefEventListener } from '@/src/lib/hooks'
 import { ChatInput, useChatInputValueAtom } from '@/src/modules/messages/components'
 import { getAllMessagesQuery, useSendTextMessage } from '@/src/modules/messages/hooks'
 import { useMessagesMaxCount } from '@/src/modules/messages/store'
@@ -28,6 +28,7 @@ function WidgetStarterPage() {
   const name = settings?.tutorName ?? t('general.name')
   const isDarkTheme = settings?.config?.theme === 'dark'
   const isSparkieReady = useInitSparkie()
+  const isMobile = useMediaQuery({ maxSize: 'md' })
 
   useRefEventListener<HTMLTextAreaElement>({
     config: {
@@ -104,7 +105,7 @@ function WidgetStarterPage() {
         <div className='grid-area-[a] flex min-h-0 flex-col max-md:px-[1.125rem] max-md:pt-[1.125rem] md:px-5 md:pt-5'>
           <WidgetHeader
             enabledButtons={isSparkieReady ? ['close', 'archive', 'info'] : ['close', 'info']}
-            showContent={false}
+            showContent={isMobile}
             tutorName={name}
           />
 

package/src/modules/widget/events.ts

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

package/src/types.ts

@@ -51,6 +51,14 @@ export type WidgetSettingProps = {
   classType?: ClassTypes
   config?: {
     theme?: Theme
+    metadata?: {
+      parent?: 'AGENT' | 'TUTOR'
+      agentProductId?: number
+      agentName?: string
+      courseName?: string
+      source?: string
+      promptId?: string
+    }
   }
 }
 

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

@@ -1,118 +0,0 @@
-import clsx from 'clsx'
-import { useTranslation } from 'react-i18next'
-
-import { DataHubService } from '@/src/config/datahub'
-import { ClickTutorMinimizeSchema } from '@/src/config/datahub/schemas/tutor'
-import { Button, Icon, Tooltip } from '@/src/lib/components'
-import { useMediaQuery } from '@/src/lib/hooks'
-import { TutorWidgetEvents } from '../../events'
-import { useWidgetGoBackTabAtom, useWidgetTabsAtom } from '../../store'
-import { AIAvatar } from '../ai-avatar'
-
-import type { WidgetHeaderContentProps, WidgetHeaderProps } from './types'
-
-import styles from './styles.module.css'
-
-export function WidgetHeaderContent({ tutorName }: WidgetHeaderContentProps) {
-  return (
-    <div className='flex w-full gap-2'>
-      <AIAvatar />
-      <div className='flex flex-col justify-center'>
-        {tutorName && <h4 className='text-sm/loose font-bold'>{tutorName}</h4>}
-      </div>
-    </div>
-  )
-}
-
-export function WidgetHeaderContentWithoutMeta({ name }: { name?: string }) {
-  const { t } = useTranslation()
-  const [, goBack] = useWidgetGoBackTabAtom()
-  const tutorName = name ?? t('general.name')
-
-  return (
-    <div
-      className={clsx(
-        'grid-areas-[a_b] grid grid-cols-[auto_1fr] items-center gap-1',
-        styles.withoutMetaContainer
-      )}>
-      <Button className='grid-area-[a]' aria-label='Arrow Left Icon' onClick={goBack}>
-        <Icon name='arrow-left' className='h-3.5 w-3.5' aria-hidden />
-      </Button>
-      <div className='grid-area-[b] flex min-h-6 justify-center text-center'>
-        <span className='absolute bottom-0 left-1/2 -translate-x-1/2 text-base font-bold'>
-          {tutorName}
-        </span>
-      </div>
-    </div>
-  )
-}
-
-function WidgetHeader({
-  enabledButtons = [],
-  tutorName,
-  showContentWithoutMeta,
-  showContent = true
-}: WidgetHeaderProps) {
-  const { t } = useTranslation()
-  const [, setTab] = useWidgetTabsAtom()
-  const name = tutorName ?? t('general.name')
-  const isMobile = useMediaQuery({ maxSize: 'md' })
-
-  const handleClickArchive = () => {
-    setTab('chat')
-  }
-
-  const handleClickInfo = () => {
-    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'>
-        <div className={styles.closeContainer}>
-          <Button
-            className='text-neutral-500'
-            show={enabledButtons.includes('close')}
-            onClick={handleHideWidget}
-            aria-label='Close Icon'>
-            <Icon name='close' className='h-3 w-3' aria-hidden />
-          </Button>
-        </div>
-      </div>
-      <div className='grid-areas-[a_b] grid grid-cols-[1fr_auto] items-center pb-4'>
-        <div className='grid-area-[a] relative'>
-          {showContent && !showContentWithoutMeta && <WidgetHeaderContent tutorName={name} />}
-          {showContentWithoutMeta && !showContent && <WidgetHeaderContentWithoutMeta name={name} />}
-        </div>
-
-        <div className='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>
-    </div>
-  )
-}
-
-export default WidgetHeader