app-tutor-ai-consumer 1.27.6 → 1.28.1

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [1.28.1](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.28.0...v1.28.1) (2025-08-21)
+
+# [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)

package/package.json

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

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

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

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/header/widget-header.tsx

@@ -49,7 +49,7 @@ function WidgetHeaderActions({
       <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')}>
+          <Tooltip show={!isMobile} content={t('general.buttons.archive')} position='bottom'>
             <Button
               show={actionButtons.includes('archive')}
               onClick={handleClickArchive}

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

@@ -1,4 +1,4 @@
-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'
@@ -9,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'
@@ -17,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()
@@ -30,7 +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: {
@@ -43,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)
@@ -79,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={

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?: {