app-tutor-ai-consumer 1.27.5 → 1.28.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# [1.28.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.27.6...v1.28.0) (2025-08-19)
+
+### Features
+
+- add tutor initial message ([afc6bfd](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/afc6bfd9158656ce52afac9e79f4410728e1d7a5))
+
+## [1.27.6](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.27.5...v1.27.6) (2025-08-19)
+
 ## [1.27.5](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.27.4...v1.27.5) (2025-08-18)
 
 ## [1.27.4](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.27.3...v1.27.4) (2025-08-14)

package/package.json

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

package/src/development-bootstrap.tsx

@@ -44,7 +44,8 @@ if (devMode) {
       sessionId: v4(),
       user: {
         id: v4(),
-        name: chance.name()
+        name: chance.name(),
+        ucode: 'e6e47e76-af44-46d2-8992-99c7057b53b6'
       }
     })
   })()

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

@@ -1,5 +1,5 @@
-.li{
-  &>span {
+.li {
+  & > span {
     display: inline !important;
   }
-}
+}

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

@@ -9,6 +9,8 @@ function MessageItem({ message }: { message: ParsedMessage }) {
   const messageFromAi = message.metadata.author === 'ai'
   const isMediaVoice = message.type === 'media/voice'
 
+  if (messageFromAi && isMediaVoice) return null
+
   return (
     <div
       className={clsx(
@@ -25,15 +27,13 @@ function MessageItem({ message }: { message: ParsedMessage }) {
         })}>
         <MessageContentTypeRenderer message={message} />
       </div>
-      {messageFromAi && isMediaVoice ? null : (
-        <MessageActions
-          className={clsx('flex items-center justify-between gap-2', {
-            'w-full': messageFromAi
-          })}
-          message={message}
-          showActions={messageFromAi}
-        />
-      )}
+      <MessageActions
+        className={clsx('flex items-center justify-between gap-2', {
+          'w-full': messageFromAi
+        })}
+        message={message}
+        showActions={messageFromAi}
+      />
     </div>
   )
 }

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

@@ -3,13 +3,7 @@ const AVATAR_ANIMATION_URL = `${process.env.STATIC_URL}/tutor/web/tutor_sparkle.
 const AvatarAnimation = () => {
   return (
     <div className='flex h-11 w-11 items-center justify-center rounded-lg bg-neutral-300'>
-      <img
-        src={AVATAR_ANIMATION_URL}
-        alt=''
-        aria-hidden
-        className='max-w-[70%]'
-        loading="lazy"
-      />
+      <img src={AVATAR_ANIMATION_URL} alt='' aria-hidden className='max-w-[70%]' loading='lazy' />
     </div>
   )
 }

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

@@ -1,4 +1,5 @@
 import { createRef } from 'react'
+import { useDecision } from '@optimizely/react-sdk'
 
 import { chance, render, screen, waitFor } from '@/src/config/tests'
 import { useScroller } from '@/src/modules/messages/hooks/use-scroller'
@@ -8,6 +9,8 @@ import * as Store from '../../store'
 
 import ChatPage from './chat-page'
 
+vi.mock('@optimizely/react-sdk')
+
 vi.mock('@/src/modules/profile', () => ({ useGetProfile: vi.fn() }))
 
 vi.mock('@/src/modules/messages/hooks/use-scroller', () => ({
@@ -18,6 +21,7 @@ describe('ChatPage', () => {
   const defaultSettings = new WidgetSettingPropsBuilder()
   const scrollerRef = createRef<HTMLDivElement>()
   const scrollToButtonRef = createRef<HTMLButtonElement>()
+  const useDecisionMock = [{ enabled: true }]
 
   const useScrollerMock = {
     scrollerRef,
@@ -32,6 +36,7 @@ describe('ChatPage', () => {
     vi.spyOn(Store, 'useWidgetSettingsAtomValue').mockReturnValue(defaultSettings)
     vi.mocked(useGetProfile).mockReturnValue({ data: { id: chance.guid() } } as never)
     vi.mocked(useScroller).mockReturnValue(useScrollerMock)
+    vi.mocked(useDecision).mockReturnValue(useDecisionMock as never)
   })
 
   it('should render each fetched message item from API', async () => {

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

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useRef } from 'react'
+import { useDecision } from '@optimizely/react-sdk'
 import { useInfiniteQuery } from '@tanstack/react-query'
 
 import { useMediaQuery } from '@/src/lib/hooks'
@@ -8,11 +9,13 @@ import { MessagesContainer } from '@/src/modules/messages/components/messages-co
 import { getAllMessagesQuery, useSendTextMessage } from '@/src/modules/messages/hooks'
 import { useMessagesMaxCount } from '@/src/modules/messages/store'
 import { useGetProfile } from '@/src/modules/profile'
+import { TutorWidgetEvents } from '../../events'
 import {
   useWidgetLoadingAtom,
   useWidgetSettingsAtomValue,
   useWidgetTabsValueAtom
 } from '../../store'
+import { testQuestionRegex } from '../../utils'
 import { WidgetHeader } from '../header'
 import { PageLayout } from '../page-layout'
 
@@ -27,6 +30,8 @@ function ChatPage() {
   const [value, setValue] = useChatInputValueAtom()
   const [widgetLoading, setWidgetLoading] = useWidgetLoadingAtom()
   const isMobile = useMediaQuery({ maxSize: 'md' })
+  const hasSentInitialMessage = useRef(false)
+  const [lexTutorInitialMessageFF] = useDecision('lex_tutor_new_widget_initial_message')
 
   const conversationId = useMemo(() => settings?.conversationId, [settings?.conversationId])
   const profileId = useMemo(() => profileQuery.data?.id, [profileQuery.data?.id])
@@ -55,6 +60,28 @@ function ChatPage() {
     })
   }
 
+  useEffect(() => {
+    if (hasSentInitialMessage.current || !lexTutorInitialMessageFF.enabled) return
+
+    const clear = TutorWidgetEvents['tutor-initial-message'].handler(({ message }) => {
+      if (message && !hasSentInitialMessage.current) {
+        setValue(testQuestionRegex(message))
+
+        sendTextMessageMutation.mutate(message, {
+          onSuccess() {
+            setValue('')
+            hasSentInitialMessage.current = true
+          }
+        })
+      }
+    })
+
+    return () => {
+      clear?.()
+      hasSentInitialMessage.current = false
+    }
+  }, [lexTutorInitialMessageFF.enabled, sendTextMessageMutation, setValue])
+
   useEffect(() => {
     if (messagesQuery.isError) {
       setWidgetLoading(false)

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

@@ -1,3 +1,5 @@
+import { useDecision } from '@optimizely/react-sdk'
+
 import { render, screen } from '@/src/config/tests'
 import { useSendTextMessage } from '@/src/modules/messages/hooks'
 
@@ -12,13 +14,17 @@ vi.mock('@/src/modules/sparkie/hooks/use-init-sparkie', () => ({
   useInitSparkie: vi.fn(() => true)
 }))
 
+vi.mock('@optimizely/react-sdk')
+
 describe('WidgetStarterPage', () => {
   const useSendTextMessageMock = { mutate: vi.fn() }
+  const useDecisionMock = [{ enabled: true, variables: { show_quick_actions: true } }]
 
   const renderComponent = () => render(<WidgetStarterPage />)
 
   beforeEach(() => {
     vi.mocked(useSendTextMessage).mockReturnValue(useSendTextMessageMock as never)
+    vi.mocked(useDecision).mockReturnValue(useDecisionMock as never)
   })
 
   it('should render without errors', () => {

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

@@ -1,4 +1,5 @@
-import { useEffect, useMemo, useRef } from 'react'
+import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { useDecision } from '@optimizely/react-sdk'
 import { useQueryClient } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 
@@ -8,7 +9,9 @@ import { getAllMessagesQuery, useSendTextMessage } from '@/src/modules/messages/
 import { useMessagesMaxCount } from '@/src/modules/messages/store'
 import { useGetProfile } from '@/src/modules/profile'
 import { useInitSparkie } from '@/src/modules/sparkie/hooks/use-init-sparkie'
+import { TutorWidgetEvents } from '../../events'
 import { useWidgetLoadingAtomValue, useWidgetSettingsAtom, useWidgetTabsAtom } from '../../store'
+import { testQuestionRegex } from '../../utils'
 import { GreetingsCard } from '../greetings-card'
 import { WidgetHeader } from '../header'
 import { PageLayout } from '../page-layout'
@@ -16,7 +19,7 @@ import { QuickActionButtons } from '../quick-action-buttons'
 
 function WidgetStarterPage() {
   const { t } = useTranslation()
-  const [settings] = useWidgetSettingsAtom()
+  const [settings, setWidgetSettings] = useWidgetSettingsAtom()
   const chatInputRef = useRef<HTMLTextAreaElement>(null)
   const [chatInputValue, setChatInputValue] = useChatInputValueAtom()
   const [, setWidgetTabs] = useWidgetTabsAtom()
@@ -29,6 +32,9 @@ function WidgetStarterPage() {
   const isSparkieReady = useInitSparkie()
   const isMobile = useMediaQuery({ maxSize: 'md' })
   const widgetLoading = useWidgetLoadingAtomValue()
+  const hasSentInitialMessage = useRef(false)
+  const [newTutorWidgetFF] = useDecision('lex_new_tutor_widget')
+  const [lexTutorInitialMessageFF] = useDecision('lex_tutor_new_widget_initial_message')
 
   useRefEventListener<HTMLTextAreaElement>({
     config: {
@@ -41,17 +47,20 @@ function WidgetStarterPage() {
     }
   })
 
-  const sendText = (textContent?: string | null) => {
-    if (!textContent) return
+  const sendText = useCallback(
+    (textContent?: string | null) => {
+      if (!textContent) return
 
-    sendTextMessageMutation.mutate(textContent, {
-      onSuccess() {
-        setWidgetTabs('chat')
-        if (chatInputRef.current) chatInputRef.current.value = ''
-        setChatInputValue('')
-      }
-    })
-  }
+      sendTextMessageMutation.mutate(textContent, {
+        onSuccess() {
+          setWidgetTabs('chat')
+          if (chatInputRef.current) chatInputRef.current.value = ''
+          setChatInputValue('')
+        }
+      })
+    },
+    [sendTextMessageMutation, setChatInputValue, setWidgetTabs]
+  )
 
   const handleSend = () => {
     sendText(chatInputRef.current?.value)
@@ -77,6 +86,48 @@ function WidgetStarterPage() {
     void queryClient.prefetchInfiniteQuery(messagesQueryConfig)
   }, [conversationId, messagesQueryConfig, profileId, queryClient])
 
+  useEffect(() => {
+    if (!isSparkieReady || hasSentInitialMessage.current || !lexTutorInitialMessageFF.enabled)
+      return
+
+    const clear = TutorWidgetEvents['tutor-initial-message'].handler(({ message }) => {
+      if (!message) return
+
+      setChatInputValue(testQuestionRegex(message))
+      sendText(message)
+      hasSentInitialMessage.current = true
+    })
+
+    return () => {
+      clear?.()
+      hasSentInitialMessage.current = false
+    }
+  }, [isSparkieReady, lexTutorInitialMessageFF.enabled, sendText, setChatInputValue])
+
+  useEffect(() => {
+    if (!isSparkieReady || hasSentInitialMessage.current || !lexTutorInitialMessageFF.enabled)
+      return
+
+    const initialMessage = settings?.initialMessage
+
+    if (initialMessage) {
+      setChatInputValue(testQuestionRegex(initialMessage))
+      sendText(initialMessage)
+      setWidgetSettings({
+        ...settings,
+        initialMessage: ''
+      })
+      hasSentInitialMessage.current = true
+    }
+  }, [
+    settings,
+    isSparkieReady,
+    sendText,
+    setChatInputValue,
+    lexTutorInitialMessageFF.enabled,
+    setWidgetSettings
+  ])
+
   return (
     <PageLayout
       asideChild={
@@ -84,7 +135,8 @@ function WidgetStarterPage() {
           name='new-chat-msg-input'
           ref={chatInputRef}
           onSend={handleSend}
-          buttonDisabled={widgetLoading || !chatInputValue.trim() || !isSparkieReady}
+          buttonDisabled={widgetLoading || !chatInputValue.trim()}
+          loading={!isSparkieReady}
         />
       }>
       <div className='grid-areas-[a_b] grid h-full grid-cols-1 grid-rows-[1fr_auto]'>
@@ -103,12 +155,14 @@ function WidgetStarterPage() {
             />
           </div>
         </div>
-        <QuickActionButtons
-          className='grid-area-[b] my-4 flex flex-shrink-0 snap-x snap-mandatory gap-2 overflow-x-auto whitespace-nowrap [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'
-          isDarkTheme={isDarkTheme}
-          send={sendText}
-          loading={!isSparkieReady}
-        />
+        {newTutorWidgetFF?.enabled && newTutorWidgetFF?.variables?.['show_quick_actions'] ? (
+          <QuickActionButtons
+            className='grid-area-[b] my-4 flex flex-shrink-0 snap-x snap-mandatory gap-2 overflow-x-auto whitespace-nowrap [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'
+            isDarkTheme={isDarkTheme}
+            send={sendText}
+            loading={!isSparkieReady}
+          />
+        ) : null}
       </div>
     </PageLayout>
   )

package/src/modules/widget/events.ts

@@ -8,7 +8,8 @@ export const TutorWidgetEventTypes = {
   HIDE: 'c3po-app-widget-hide',
   LOADED: 'tutor-app-widget-loaded',
   THEME_CHANGE: 'c3po-app-widget-theme-change',
-  EXPAND: 'tutor-app-widget-expand'
+  EXPAND: 'tutor-app-widget-expand',
+  INITIAL_MESSAGE: 'tutor-initial-message'
 } as const
 
 export const TutorWidgetEvents = {
@@ -112,7 +113,26 @@ export const TutorWidgetEvents = {
     dispatch: (payload) => {
       window.dispatchEvent(new CustomEvent(TutorWidgetEventTypes.EXPAND, payload))
     }
-  } as ITutorWidgetEvent<void>
+  } as ITutorWidgetEvent<void>,
+
+  [TutorWidgetEventTypes.INITIAL_MESSAGE]: {
+    name: TutorWidgetEventTypes.INITIAL_MESSAGE,
+    handler: (callback: (payload: { message: string }) => void) => {
+      const listener: EventListener = (e) => {
+        const evt = e as CustomEvent<{ message: string }>
+        callback(evt.detail)
+      }
+
+      window.addEventListener(TutorWidgetEventTypes.INITIAL_MESSAGE, listener)
+
+      return () => {
+        window.removeEventListener(TutorWidgetEventTypes.INITIAL_MESSAGE, listener)
+      }
+    },
+    dispatch: (payload: { detail: { message: string } }) => {
+      window.dispatchEvent(new CustomEvent(TutorWidgetEventTypes.INITIAL_MESSAGE, payload))
+    }
+  } as ITutorWidgetEvent<{ message: string }>
 } as const
 
 export const ACTION_EVENTS = {

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

@@ -0,0 +1 @@
+export * from './test-question-regex'

package/src/modules/widget/utils/test-question-regex/index.ts

@@ -0,0 +1 @@
+export { default as testQuestionRegex } from './test-question-regex'

package/src/modules/widget/utils/test-question-regex/test-question-regex.tsx

@@ -0,0 +1,7 @@
+function testQuestionRegex(message: string) {
+  const questionRegex = /^question::\s*/i
+
+  return questionRegex.test(message) ? message.replace(questionRegex, '').trim() : message
+}
+
+export default testQuestionRegex

package/src/types.ts

@@ -49,6 +49,7 @@ export type WidgetSettingProps = {
   current_media_codes?: string
   productType?: string
   classType?: ClassTypes
+  initialMessage?: string
   config?: {
     theme?: Theme
     metadata?: {