app-tutor-ai-consumer 1.12.0 → 1.14.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [1.14.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.13.0...v1.14.0) (2025-07-21)
+
+### Features
+
+- add tutor initial state page UI ([f9bc12e](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/f9bc12eb0ac2d5e0fc408795ac2a1837514d14ee))
+
+# [1.13.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.12.0...v1.13.0) (2025-07-21)
+
+### Features
+
+- adding env values to production ([ec891e2](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/ec891e2692769a44e54e83ebeb6cb024c0f99cd1))
+
 # [1.12.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.11.0...v1.12.0) (2025-07-21)
 
 ### Features

package/environments/.env.production

@@ -27,8 +27,8 @@ FIREBASE_PROJECT_ID=omnichat-cad8c
 FIREBASE_STORAGE_BUCKET=omnichat-cad8c.appspot.com
 
 # C3PO
-API_CONVERSATION_URL=
-API_AUTH_URL=
+API_CONVERSATION_URL=https://c3po-api-conversations.vulcano.rocks
+API_AUTH_URL=https://c3po-api-auth.vulcano.rocks/v1
 
 # VLC
 USER_VLC=

package/package.json

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

package/src/config/styles/global.css

@@ -77,6 +77,8 @@
   --ai-color-secondary: #6ba1f0;
   --ai-color-dark: #1a1c1f;
   --ai-color-chat-response: #1e1926;
+  --ai-color-gradient-primary: #44d0ff;
+  --ai-color-gradient-accent: #b48eff;
 
   /* Size */
   --hc-size-spacing-1: 0.25rem;

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

@@ -9,7 +9,8 @@ export type ButtonProps = PropsWithChildren<
 
 function Button({ children, className, variant = 'brand', ...props }: ButtonProps) {
   const defaultClasses =
-    'rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 text-base font-medium border border-transparent'
+    'rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 text-base font-medium'
+  const defaultBorder = 'border border-transparent'
   const defaultPadding = 'px-4 py-2'
 
   switch (variant) {
@@ -18,11 +19,13 @@ function Button({ children, className, variant = 'brand', ...props }: ButtonProp
         <button
           className={clsx(
             defaultClasses,
-            'group relative inline-flex items-center justify-center overflow-hidden bg-gradient-to-br from-purple-600 to-blue-500 p-0.5 hover:text-neutral-0 group-hover:from-purple-600 group-hover:to-blue-500',
+            'group relative inline-flex items-center justify-center overflow-hidden rounded-lg bg-gradient-to-br from-[var(--ai-color-gradient-primary)] to-[var(--ai-color-gradient-accent)] p-[1px] hover:text-neutral-0 group-hover:from-[var(--ai-color-gradient-primary)] group-hover:to-[var(--ai-color-gradient-accent)]',
             className
           )}
           {...props}>
-          <span className='relative flex-1 rounded-md bg-neutral-900 px-5 py-2.5 text-neutral-0 transition-all duration-75 ease-in group-hover:bg-transparent'>
+          <span
+            data-label='text-content'
+            className='relative flex-1 rounded-lg bg-neutral-900 px-5 py-2.5 text-neutral-0 transition-all duration-75 ease-in group-hover:bg-transparent'>
             {children}
           </span>
         </button>
@@ -33,6 +36,7 @@ function Button({ children, className, variant = 'brand', ...props }: ButtonProp
           className={clsx(
             defaultPadding,
             defaultClasses,
+            defaultBorder,
             'bg-primary-500 text-neutral-0 hover:bg-primary-600 focus:outline-none',
             className
           )}
@@ -46,6 +50,7 @@ function Button({ children, className, variant = 'brand', ...props }: ButtonProp
           className={clsx(
             defaultPadding,
             defaultClasses,
+            defaultBorder,
             'border-neutral-100 bg-transparent text-neutral-100 hover:bg-neutral-100 hover:text-neutral-900',
             className
           )}
@@ -59,6 +64,7 @@ function Button({ children, className, variant = 'brand', ...props }: ButtonProp
           className={clsx(
             defaultPadding,
             defaultClasses,
+            defaultBorder,
             'bg-transparent text-neutral-0 hover:bg-neutral-900',
             className
           )}
@@ -73,6 +79,7 @@ function Button({ children, className, variant = 'brand', ...props }: ButtonProp
           className={clsx(
             defaultPadding,
             defaultClasses,
+            defaultBorder,
             'rounded bg-neutral-100 text-neutral-900 outline-none hover:bg-neutral-200',
             className
           )}

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

@@ -1,3 +1,5 @@
+import { UAParser } from 'ua-parser-js'
+
 import { act, chance, renderHook, waitFor } from '@/src/config/tests'
 import { MessagesService } from '@/src/modules/messages'
 import { useGetProfile } from '@/src/modules/profile'
@@ -11,6 +13,8 @@ vi.mock('@/src/modules/profile', () => ({
   useGetProfile: vi.fn()
 }))
 
+vi.mock('ua-parser-js', () => ({ UAParser: vi.fn() }))
+
 describe('useSendTextMessage', () => {
   const message = chance.animal()
   const getProfileMock = { data: { userId: chance.integer() } }
@@ -18,12 +22,15 @@ describe('useSendTextMessage', () => {
     .withClassHashId(chance.guid())
     .withOwner_id(chance.guid())
     .withCurrent_media_codes(chance.profession())
+    .withUser({ id: chance.guid(), ucode: chance.guid() })
+  const UAParserMock = { browser: { version: chance.android_id(), name: chance.name_prefix() } }
 
   const render = () => renderHook(useSendTextMessage)
 
   beforeEach(() => {
     vi.mocked(useGetProfile).mockReturnValue(getProfileMock as never)
     vi.spyOn(Store, 'useWidgetSettingsAtomValue').mockReturnValue(defaultSettings)
+    vi.mocked(UAParser).mockReturnValue(UAParserMock as never)
   })
 
   it('should throw when conversationId is not defined', async () => {
@@ -75,7 +82,10 @@ describe('useSendTextMessage', () => {
           owner_id: defaultSettings.owner_id,
           current_media_codes: defaultSettings.current_media_codes,
           question: text,
-          router: text
+          router: text,
+          osVersion: UAParserMock.browser.version,
+          platformDetail: UAParserMock.browser.name,
+          ucode: defaultSettings.user?.ucode
         },
         externalId: expect.any(String),
         namespace: defaultSettings.namespace,

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

@@ -1,5 +1,6 @@
 import { useMemo } from 'react'
 import { useMutation } from '@tanstack/react-query'
+import { UAParser } from 'ua-parser-js'
 import { v4 } from 'uuid'
 
 import { MessagesService } from '@/src/modules/messages'
@@ -16,6 +17,9 @@ function useSendTextMessage() {
 
   return useMutation({
     mutationFn(message: string) {
+      const userAgentParser = UAParser(navigator.userAgent)
+      const browserInfo = userAgentParser.browser
+
       let processedMessage = message
 
       if (!settings?.conversationId) throw new Error('Conversation Id must be defined')
@@ -42,11 +46,16 @@ function useSendTextMessage() {
             clubName: settings.clubName,
             productName: settings.productName,
             productId: settings.productId,
+            productType: settings.productType,
+            classType: settings.classType,
             classHashId: settings.classHashId,
             owner_id: settings?.owner_id,
             current_media_codes: settings?.current_media_codes,
             question: questionParam,
-            router: questionParam ? 'summary' : undefined
+            router: questionParam ? 'summary' : undefined,
+            osVersion: browserInfo.version,
+            platformDetail: browserInfo.name,
+            ucode: settings.user?.ucode
           },
           externalId: v4(),
           namespace: settings.namespace,

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

@@ -15,7 +15,7 @@ function WidgetContainer({ completeSetup = false }: { completeSetup?: boolean })
 
   useEffect(() => {
     if (completeSetup) {
-      setTab('chat')
+      setTab('starter')
     }
   }, [completeSetup, setTab])
 

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

@@ -0,0 +1,41 @@
+import { render, screen } from '@/src/config/tests'
+import { useSendTextMessage } from '@/src/modules/messages/hooks'
+
+import WidgetStarterPage from './starter-page'
+
+vi.mock('@/src/modules/messages/hooks', () => ({ useSendTextMessage: vi.fn() }))
+
+describe('WidgetStarterPage', () => {
+  const useSendTextMessageMock = { mutate: vi.fn() }
+
+  const renderComponent = () => render(<WidgetStarterPage />)
+
+  beforeEach(() => {
+    vi.mocked(useSendTextMessage).mockReturnValue(useSendTextMessageMock as never)
+  })
+
+  it('should render without errors', () => {
+    renderComponent()
+
+    expect(
+      screen.getByRole('button', { name: /starter_page.what_does_tutor_do/i })
+    ).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /starter_page.wanna_summary/i })).toBeInTheDocument()
+  })
+
+  it('should post the slider button text content to the backend', async () => {
+    const { user } = renderComponent()
+
+    const button = screen.getByRole('button', { name: /starter_page.what_does_tutor_do/i })
+
+    await user.click(button)
+
+    expect(useSendTextMessageMock.mutate).toHaveBeenNthCalledWith(
+      1,
+      '🤖 starter_page.what_does_tutor_do',
+      {
+        onSuccess: expect.any(Function)
+      }
+    )
+  })
+})

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

@@ -1,16 +1,25 @@
 import { useRef } from 'react'
+import clsx from 'clsx'
+import type { MouseEventHandler } from 'react'
+import { useTranslation } from 'react-i18next'
 
+import { Button } from '@/src/lib/components'
 import { useRefEventListener } from '@/src/lib/hooks'
 import { ChatInput, useChatInputValueAtom } from '@/src/modules/messages/components'
+import { useSendTextMessage } from '@/src/modules/messages/hooks'
 import { useWidgetSettingsAtom, useWidgetTabsAtom } from '../../store'
 import { GreetingsCard } from '../greetings-card'
 import { PageLayout } from '../page-layout'
 
+import styles from './styles.module.css'
+
 function WidgetStarterPage() {
+  const { t } = useTranslation()
   const [settings] = useWidgetSettingsAtom()
   const chatInputRef = useRef<HTMLTextAreaElement>(null)
   const [, setChatInputValue] = useChatInputValueAtom()
   const [, setWidgetTabs] = useWidgetTabsAtom()
+  const sendTextMessageMutation = useSendTextMessage()
 
   useRefEventListener<HTMLTextAreaElement>({
     config: {
@@ -23,6 +32,20 @@ function WidgetStarterPage() {
     }
   })
 
+  const handleAskQuestion: MouseEventHandler<HTMLButtonElement> = (e) => {
+    const textContent = e?.currentTarget?.querySelector(
+      'span[data-label=text-content]'
+    )?.textContent
+
+    if (!textContent) return
+
+    sendTextMessageMutation.mutate(textContent, {
+      onSuccess() {
+        setWidgetTabs('chat')
+      }
+    })
+  }
+
   return (
     <PageLayout
       asideChild={
@@ -32,8 +55,30 @@ function WidgetStarterPage() {
           onSend={() => setWidgetTabs('chat')}
         />
       }>
-      <div className='flex flex-col justify-center px-5 py-4'>
-        <GreetingsCard author={settings?.author ?? ''} tutorName={settings?.tutorName ?? ''} />
+      <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 justify-center px-5 py-4',
+            styles.bg
+          )}>
+          <GreetingsCard author={settings?.author ?? ''} tutorName={settings?.tutorName ?? ''} />
+        </div>
+        <div className='grid-area-[b] mx-5 my-6 flex flex-shrink-0 snap-x snap-mandatory gap-2 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'>
+          <Button
+            variant='gradient-outline'
+            className='shrink-0 snap-end text-sm'
+            onClick={handleAskQuestion}>
+            <span>🤖 </span>
+            {t('starter_page.what_does_tutor_do')}
+          </Button>
+          <Button
+            variant='gradient-outline'
+            className='shrink-0 snap-end text-sm'
+            onClick={handleAskQuestion}>
+            <span>📝 </span>
+            {t('starter_page.wanna_summary')}
+          </Button>
+        </div>
       </div>
     </PageLayout>
   )

package/src/modules/widget/components/starter-page/styles.module.css

@@ -0,0 +1,3 @@
+.bg {
+  composes: gradientBg from '../../../../config/styles/utilities/bg-utilities.module.css';
+}

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

@@ -32,13 +32,21 @@ function useInitWidget(settings: WidgetSettingProps) {
   const [error, setError] = useState<unknown>(null)
 
   useEffect(() => {
+    let isMounted = true
+
     if (completeSetup) return
 
     init(settings)
       .then(() => {
-        setCompleteSetup(true)
+        if (isMounted) setCompleteSetup(true)
+      })
+      .catch((e) => {
+        if (isMounted) setError(e)
       })
-      .catch(setError)
+
+    return () => {
+      isMounted = false
+    }
   }, [completeSetup, settings])
 
   return { completeSetup, error }

package/src/types.ts

@@ -16,6 +16,16 @@ export type User = {
   sessionId?: string
 }
 
+export enum ClassTypes {
+  Html = 'HTML',
+  Media = 'MEDIA',
+  Advertisement = 'ADVERTISEMENT',
+  QuizExercise = 'QUIZ_EXERCISE',
+  QuizProfile = 'QUIZ_PROFILE',
+  Webinar = 'WEBINAR',
+  Other = 'OTHER'
+}
+
 export type WidgetSettingProps = {
   hotmartToken: string
   locale: ILanguages
@@ -35,6 +45,8 @@ export type WidgetSettingProps = {
   classHashId?: string
   owner_id?: string
   current_media_codes?: string
+  productType?: string
+  classType?: ClassTypes
 }
 
 export interface ICustomEvent<T = object> {

package/tailwind.config.js

@@ -93,7 +93,9 @@ module.exports = {
           primary: 'var(--ai-color-primary)',
           secondary: 'var(--ai-color-secondary)',
           dark: 'var(--ai-color-dark)',
-          'chat-response': 'var(--ai-color-chat-response)'
+          'chat-response': 'var(--ai-color-chat-response)',
+          'gradient-primary': 'var(--ai-color-gradient-primary)',
+          'gradient-accent': 'var(--ai-color-gradient-accent)'
         }
       }
     }