app-tutor-ai-consumer 1.33.1 → 1.35.0

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

@@ -12,8 +12,10 @@ import { useGetProfile } from '@/src/modules/profile'
 import { TutorWidgetEvents } from '../../events'
 import { useSendViewTutorEvent } from '../../hooks/use-send-view-tutor-event'
 import {
+  useWidgetLastUserMessageAtom,
   useWidgetLoadingAtom,
   useWidgetSettingsAtomValue,
+  useWidgetTabsAtom,
   useWidgetTabsValueAtom
 } from '../../store'
 import { testQuestionRegex } from '../../utils'
@@ -24,13 +26,16 @@ import { PageLayout } from '../page-layout'
 function ChatPage() {
   const chatInputRef = useRef<HTMLTextAreaElement>(null)
   const scrollerRef = useRef<HTMLDivElement>(null)
+  const loadingTimeoutRef = useRef<NodeJS.Timeout | null>(null)
   const settings = useWidgetSettingsAtomValue()
   const profileQuery = useGetProfile()
   const widgetTabs = useWidgetTabsValueAtom()
+  const [, setTab] = useWidgetTabsAtom()
   const sendTextMessageMutation = useSendTextMessage()
   const limit = useMessagesMaxCount()
   const [value, setValue] = useChatInputValueAtom()
   const [widgetLoading, setWidgetLoading] = useWidgetLoadingAtom()
+  const [, setLastUserMessage] = useWidgetLastUserMessageAtom()
   const isMobile = useMediaQuery({ maxSize: 'md' })
   const hasSentInitialMessage = useRef(false)
   const [lexTutorInitialMessageFF] = useDecision('lex_tutor_new_widget_initial_message')
@@ -49,6 +54,36 @@ function ChatPage() {
 
   const messagesQuery = useInfiniteQuery(messagesQueryConfig)
 
+  const isAgentMode = useMemo(
+    () => settings?.config?.metadata?.parent === 'AGENT',
+    [settings?.config?.metadata?.parent]
+  )
+
+  const msgCount = useMemo(() => {
+    if (!messagesQuery.data) return 0
+    return Array.from(messagesQuery.data.values()).reduce(
+      (total: number, messages) => total + messages.length,
+      0
+    )
+  }, [messagesQuery.data])
+
+  const hasUserMessageWithoutResponse = useMemo(() => {
+    if (!isAgentMode || !messagesQuery.data || msgCount === 0) return false
+
+    const allMessages = Array.from(messagesQuery.data.values()).flat()
+    const userMessages = allMessages.filter((msg) => msg?.metadata?.author === 'user')
+    const aiMessages = allMessages.filter((msg) => msg?.metadata?.author !== 'user')
+
+    if (userMessages.length > aiMessages.length && aiMessages.length === 0) {
+      const lastUserMsg = userMessages[userMessages.length - 1]
+      if (lastUserMsg?.text) {
+        setLastUserMessage(lastUserMsg.text)
+      }
+      return true
+    }
+    return false
+  }, [isAgentMode, messagesQuery.data, msgCount, setLastUserMessage])
+
   useSendViewTutorEvent()
 
   const handleSendMessage = () => {
@@ -92,6 +127,29 @@ function ChatPage() {
     }
   }, [messagesQuery.isError, setWidgetLoading])
 
+  useEffect(() => {
+    if (hasUserMessageWithoutResponse) {
+      setWidgetLoading(true)
+
+      loadingTimeoutRef.current = setTimeout(() => {
+        setWidgetLoading(false)
+        setTab('error')
+      }, 60000)
+    } else {
+      if (loadingTimeoutRef.current) {
+        clearTimeout(loadingTimeoutRef.current)
+        loadingTimeoutRef.current = null
+      }
+    }
+
+    return () => {
+      if (loadingTimeoutRef.current) {
+        clearTimeout(loadingTimeoutRef.current)
+        loadingTimeoutRef.current = null
+      }
+    }
+  }, [hasUserMessageWithoutResponse, setWidgetLoading, setTab])
+
   return (
     <PageLayout
       asideChild={

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

@@ -1,4 +1,5 @@
 import { ChatPage } from './chat-page'
+import { WidgetErrorPage } from './error-page'
 import { WidgetInformationPage } from './information-page'
 import { WidgetLoadingPage } from './loading-page'
 import { WidgetStarterPage } from './starter-page'
@@ -7,5 +8,6 @@ export const WIDGET_TABS = {
   starter: <WidgetStarterPage />,
   chat: <ChatPage />,
   loading: <WidgetLoadingPage />,
-  information: <WidgetInformationPage />
+  information: <WidgetInformationPage />,
+  error: <WidgetErrorPage />
 }

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

@@ -0,0 +1,17 @@
+import { render, screen } from '@/src/config/tests'
+
+import WidgetErrorPage from './error-page'
+
+describe('<WidgetErrorPage/>', () => {
+  const renderComponent = () => render(<WidgetErrorPage />)
+
+  it('should render without errors', () => {
+    renderComponent()
+
+    expect(screen.getByRole('img', { name: /generic_error.image_alt/i })).toBeInTheDocument()
+    expect(screen.getByText(/generic_error.title/i)).toBeInTheDocument()
+    expect(screen.getByText(/generic_error.description/i)).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /Retry Button/i })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /Close Icon/i })).toBeInTheDocument()
+  })
+})

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

@@ -0,0 +1,12 @@
+import { GenericError } from '@/src/lib/components'
+import { useRetryLastMessage } from '../../hooks'
+import { useWidgetSettingsAtomValue } from '../../store'
+
+function WidgetErrorPage() {
+  const settings = useWidgetSettingsAtomValue()
+  const handleRetry = useRetryLastMessage()
+
+  return <GenericError isDarkMode={settings?.config?.theme === 'dark'} onRetry={handleRetry} />
+}
+
+export default WidgetErrorPage

package/src/modules/widget/components/error-page/index.ts

@@ -0,0 +1 @@
+export { default as WidgetErrorPage } from './error-page'

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

@@ -1,25 +1,19 @@
 import { useCallback, useRef } from 'react'
 
 import { useRefEventListener } from '@/src/lib/hooks'
-import {
-  ChatInput,
-  MessageSkeleton,
-  useChatInputValueAtom
-} from '@/src/modules/messages/components'
+import { ChatInput, MessageSkeleton } from '@/src/modules/messages/components'
 import { WidgetHeader } from '../header'
 import { PageLayout } from '../page-layout'
 
-function WidgetLoadingPage() {
+function WidgetLoadingPage({ showHeader = true }: { showHeader?: boolean }) {
   const chatInputRef = useRef<HTMLTextAreaElement>(null)
-  const [, setChatInputValue] = useChatInputValueAtom()
 
-  const handler = useCallback(
-    (e: Event) => {
-      const target = e.target as HTMLTextAreaElement
-      setChatInputValue(target.value)
-    },
-    [setChatInputValue]
-  )
+  const handler = useCallback((e: Event) => {
+    const target = e.target as HTMLTextAreaElement
+    if (chatInputRef.current) {
+      chatInputRef.current.value = target.value
+    }
+  }, [])
 
   useRefEventListener<HTMLTextAreaElement>({
     config: {
@@ -33,7 +27,7 @@ function WidgetLoadingPage() {
     <PageLayout
       asideChild={<ChatInput name='new-chat-msg-input' ref={chatInputRef} loading={true} />}>
       <div className='flex h-full flex-col justify-start max-md:p-[1.125rem] md:p-5'>
-        <WidgetHeader enabledButtons={['close']} showContent={false} />
+        {showHeader && <WidgetHeader enabledButtons={['close']} showContent={false} />}
         <div className='mt-auto'>
           <MessageSkeleton />
         </div>

package/src/modules/widget/components/starter-page/starter-page-actions/index.ts

@@ -0,0 +1 @@
+export { default as WidgetStarterPageActions } from './starter-page-actions'

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

@@ -0,0 +1,68 @@
+import { useDecision } from '@optimizely/react-sdk'
+
+import { render, screen } from '@/src/config/tests'
+import { useSparkieStateAtomValue } from '@/src/modules/sparkie/store'
+import { useIsAgentParentAtomValue } from '../../../store'
+
+import WidgetStarterPageActions from './starter-page-actions'
+
+vi.mock('../../../store', async (importActual) => ({
+  ...(await importActual()),
+  useIsAgentParentAtomValue: vi.fn()
+}))
+
+vi.mock('@/src/modules/sparkie/store', async (importActual) => ({
+  ...(await importActual()),
+  useSparkieStateAtomValue: vi.fn()
+}))
+
+vi.mock('@optimizely/react-sdk', async (importActual) => ({
+  ...(await importActual()),
+  useDecision: vi.fn()
+}))
+
+describe('<WidgetStarterPageActions />', () => {
+  const defaultProps = { send: vi.fn() }
+  const renderComponent = (props = defaultProps) => render(<WidgetStarterPageActions {...props} />)
+
+  beforeEach(() => {
+    vi.mocked(useIsAgentParentAtomValue).mockReturnValue(false)
+    vi.mocked(useDecision).mockReturnValue([{ enabled: false }] as never)
+    vi.mocked(useSparkieStateAtomValue).mockReturnValue('initialized')
+  })
+
+  test.each`
+    isAgentMode | enabled
+    ${true}     | ${false}
+    ${true}     | ${true}
+    ${false}    | ${false}
+  `(
+    'should render null when isAgentMode is: $isAgentMode and enabled is: $enabled',
+    ({ isAgentMode, enabled }: { isAgentMode: boolean; enabled: boolean }) => {
+      vi.mocked(useIsAgentParentAtomValue).mockReturnValue(isAgentMode)
+      vi.mocked(useDecision).mockReturnValue([{ enabled }] as never)
+
+      const { container } = renderComponent()
+
+      expect(container).toBeEmptyDOMElement()
+    }
+  )
+
+  test.each`
+    isAgentMode | enabled
+    ${false}    | ${true}
+  `(
+    'should render quick actions when isAgentMode is: $isAgentMode and enabled is: $enabled',
+    ({ isAgentMode, enabled }: { isAgentMode: boolean; enabled: boolean }) => {
+      vi.mocked(useIsAgentParentAtomValue).mockReturnValue(isAgentMode)
+      vi.mocked(useDecision).mockReturnValue([{ enabled }] as never)
+
+      renderComponent()
+
+      expect(
+        screen.getByRole('button', { name: /starter_page.what_does_tutor_do/i })
+      ).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: /starter_page.test_me/i })).toBeInTheDocument()
+    }
+  )
+})

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

@@ -0,0 +1,34 @@
+import { useMemo } from 'react'
+import { useDecision } from '@optimizely/react-sdk'
+
+import { useSparkieStateAtomValue } from '@/src/modules/sparkie/store'
+import { useIsAgentParentAtomValue, useWidgetSettingsAtomValue } from '../../../store'
+import { QuickActionButtons } from '../../quick-action-buttons'
+
+function WidgetStarterPageActions({ send }: { send: (textContent?: string | null) => void }) {
+  const [tutorQuickActionsFF] = useDecision('lex_tutor_quick_actions')
+  const settings = useWidgetSettingsAtomValue()
+  const isAgentMode = useIsAgentParentAtomValue()
+  const sparkieState = useSparkieStateAtomValue()
+
+  const isDarkTheme = useMemo(() => settings?.config?.theme === 'dark', [settings?.config?.theme])
+  const isSparkieReady = useMemo(() => sparkieState === 'initialized', [sparkieState])
+
+  const shouldNotRender = useMemo(
+    () => [isAgentMode, !tutorQuickActionsFF?.enabled].some(Boolean),
+    [isAgentMode, tutorQuickActionsFF?.enabled]
+  )
+
+  if (shouldNotRender) return null
+
+  return (
+    <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={send}
+      loading={!isSparkieReady}
+    />
+  )
+}
+
+export default WidgetStarterPageActions

package/src/modules/widget/components/starter-page/starter-page-content/index.ts

@@ -0,0 +1 @@
+export { default as WidgetStarterPageContent } from './starter-page-content'

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

@@ -0,0 +1,16 @@
+import { render, screen } from '@/src/config/tests'
+
+import WidgetStarterPageContent from './starter-page-content'
+
+describe('<WidgetStarterPageContent />', () => {
+  const renderComponent = () => render(<WidgetStarterPageContent />)
+
+  it('should render greetings card when not in agent mode', () => {
+    renderComponent()
+
+    expect(screen.getByText(/sparkle-tutor-light/i)).toBeInTheDocument()
+    expect(screen.getByText(/general.greetings.hello/i)).toBeInTheDocument()
+    expect(screen.getByText(/general.greetings.firstMessage/i)).toBeInTheDocument()
+    expect(screen.getByText(/general.greetings.description/i)).toBeInTheDocument()
+  })
+})

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

@@ -0,0 +1,28 @@
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { useWidgetSettingsAtomValue } from '../../../store'
+import { GreetingsCard } from '../../greetings-card'
+
+function WidgetStarterPageContent() {
+  const { t } = useTranslation()
+  const settings = useWidgetSettingsAtomValue()
+
+  const authorName = useMemo(() => {
+    const username = typeof settings?.user?.name === 'string' ? settings?.user?.name : ''
+
+    return username?.split?.(' ')?.[0] || ''
+  }, [settings?.user?.name])
+
+  const isDarkTheme = useMemo(() => settings?.config?.theme === 'dark', [settings?.config?.theme])
+
+  const name = useMemo(() => settings?.tutorName ?? t('general.name'), [settings?.tutorName, t])
+
+  return (
+    <div className='my-auto'>
+      <GreetingsCard author={authorName} tutorName={name} isDarkTheme={isDarkTheme} />
+    </div>
+  )
+}
+
+export default WidgetStarterPageContent

package/src/modules/widget/components/starter-page/starter-page-header/index.ts

@@ -0,0 +1 @@
+export { default as WidgetStarterPageHeader } from './starter-page-header'

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

@@ -0,0 +1,45 @@
+import { render, screen } from '@/src/config/tests'
+import { useSparkieStateAtomValue } from '@/src/modules/sparkie/store'
+import { useIsAgentParentAtomValue } from '../../../store/widget-settings-config.atom'
+
+import WidgetStarterPageHeader from './starter-page-header'
+
+vi.mock('../../../store/widget-settings-config.atom')
+
+vi.mock('@/src/modules/sparkie/store', async (importActual) => ({
+  ...(await importActual()),
+  useSparkieStateAtomValue: vi.fn()
+}))
+
+describe('<WidgetStarterPageHeader />', () => {
+  const renderComponent = () => render(<WidgetStarterPageHeader />)
+
+  beforeEach(() => {
+    vi.mocked(useIsAgentParentAtomValue).mockReturnValue(true)
+    vi.mocked(useSparkieStateAtomValue).mockReturnValue('initializing')
+  })
+
+  it('should return null when rendered as agent mode', () => {
+    const { container } = renderComponent()
+
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('should render without errors when is not rendered as agent', () => {
+    vi.mocked(useIsAgentParentAtomValue).mockReturnValue(false)
+    renderComponent()
+
+    expect(screen.getByRole('button', { name: /general.buttons.info Icon/i })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /Close Icon/i })).toBeInTheDocument()
+  })
+
+  it('should render the archive button when isSparkieReady is true', () => {
+    vi.mocked(useIsAgentParentAtomValue).mockReturnValue(false)
+    vi.mocked(useSparkieStateAtomValue).mockReturnValue('initialized')
+    renderComponent()
+
+    expect(
+      screen.getByRole('button', { name: /general.buttons.archive Icon/i })
+    ).toBeInTheDocument()
+  })
+})

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

@@ -0,0 +1,36 @@
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import type { ValidIconNames } from '@/src/lib/components/icons/icon-names'
+import { useMediaQuery } from '@/src/lib/hooks'
+import { useSparkieStateAtomValue } from '@/src/modules/sparkie/store'
+import { useIsAgentParentAtomValue, useWidgetSettingsAtomValue } from '../../../store'
+import { WidgetHeader } from '../../header'
+
+const getEnabledButtons = (isSparkieReady: boolean): ValidIconNames[] => {
+  const btns = ['close', 'info'] as ValidIconNames[]
+
+  return isSparkieReady ? [...btns, 'archive'] : btns
+}
+
+function WidgetStarterPageHeader() {
+  const { t } = useTranslation()
+  const settings = useWidgetSettingsAtomValue()
+  const isAgentMode = useIsAgentParentAtomValue()
+  const sparkieState = useSparkieStateAtomValue()
+  const isMobile = useMediaQuery({ maxSize: 'md' })
+
+  const name = useMemo(() => settings?.tutorName ?? t('general.name'), [settings?.tutorName, t])
+
+  if (isAgentMode) return null
+
+  return (
+    <WidgetHeader
+      enabledButtons={getEnabledButtons(sparkieState === 'initialized')}
+      tutorName={name}
+      showContent={isMobile}
+    />
+  )
+}
+
+export default WidgetStarterPageHeader

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

@@ -2,6 +2,8 @@ import { useDecision } from '@optimizely/react-sdk'
 
 import { render, screen } from '@/src/config/tests'
 import { useSendTextMessage } from '@/src/modules/messages/hooks'
+import { useSparkieStateAtomValue } from '@/src/modules/sparkie/store'
+import { useIsAgentParentAtomValue } from '../../store'
 
 import WidgetStarterPage from './starter-page'
 
@@ -10,11 +12,17 @@ vi.mock('@/src/modules/messages/hooks', () => ({
   useSendTextMessage: vi.fn()
 }))
 
-vi.mock('@/src/modules/sparkie/hooks/use-init-sparkie', () => ({
-  useInitSparkie: vi.fn(() => true)
+vi.mock('@optimizely/react-sdk')
+
+vi.mock('@/src/modules/sparkie/store', async (actual) => ({
+  ...(await actual()),
+  useSparkieStateAtomValue: vi.fn()
 }))
 
-vi.mock('@optimizely/react-sdk')
+vi.mock('../../store', async (actual) => ({
+  ...(await actual()),
+  useIsAgentParentAtomValue: vi.fn()
+}))
 
 describe('WidgetStarterPage', () => {
   const useSendTextMessageMock = { mutate: vi.fn() }
@@ -25,6 +33,8 @@ describe('WidgetStarterPage', () => {
   beforeEach(() => {
     vi.mocked(useSendTextMessage).mockReturnValue(useSendTextMessageMock as never)
     vi.mocked(useDecision).mockReturnValue(useDecisionMock as never)
+    vi.mocked(useIsAgentParentAtomValue).mockReturnValue(false)
+    vi.mocked(useSparkieStateAtomValue).mockReturnValue('initialized')
   })
 
   it('should render without errors', () => {

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

@@ -1,43 +1,24 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react'
-import { useDecision } from '@optimizely/react-sdk'
-import { useQueryClient } from '@tanstack/react-query'
-import { useTranslation } from 'react-i18next'
+import { useCallback, useRef } from 'react'
 
-import { useMediaQuery, useRefEventListener } from '@/src/lib/hooks'
+import { 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'
-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 { useSendTextMessage } from '@/src/modules/messages/hooks'
+import { useWidgetLoadingAtomValue, useWidgetTabsAtom } from '../../store'
 import { AIDisclaimer } from '../ai-disclaimer'
-import { GreetingsCard } from '../greetings-card'
-import { WidgetHeader } from '../header'
 import { PageLayout } from '../page-layout'
-import { QuickActionButtons } from '../quick-action-buttons'
+
+import { WidgetStarterPageActions } from './starter-page-actions'
+import { WidgetStarterPageContent } from './starter-page-content'
+import { WidgetStarterPageHeader } from './starter-page-header'
 
 function WidgetStarterPage() {
-  const { t } = useTranslation()
-  const [settings, setWidgetSettings] = useWidgetSettingsAtom()
   const chatInputRef = useRef<HTMLTextAreaElement>(null)
+
   const [chatInputValue, setChatInputValue] = useChatInputValueAtom()
   const [, setWidgetTabs] = useWidgetTabsAtom()
   const sendTextMessageMutation = useSendTextMessage()
-  const profileQuery = useGetProfile()
-  const limit = useMessagesMaxCount()
-  const queryClient = useQueryClient()
-  const name = settings?.tutorName ?? t('general.name')
-  const authorName =
-    typeof settings?.user?.name === 'string' ? settings?.user?.name?.split(' ')?.[0] || '' : ''
-  const isDarkTheme = settings?.config?.theme === 'dark'
-  const isSparkieReady = useInitSparkie()
-  const isMobile = useMediaQuery({ maxSize: 'md' })
+
   const widgetLoading = useWidgetLoadingAtomValue()
-  const hasSentInitialMessage = useRef(false)
-  const [tutorQuickActionsFF] = useDecision('lex_tutor_quick_actions')
-  const [lexTutorInitialMessageFF] = useDecision('lex_tutor_new_widget_initial_message')
 
   useRefEventListener<HTMLTextAreaElement>({
     config: {
@@ -69,68 +50,6 @@ function WidgetStarterPage() {
     sendText(chatInputRef.current?.value)
   }
 
-  const conversationId = useMemo(() => settings?.conversationId, [settings?.conversationId])
-
-  const profileId = useMemo(() => profileQuery.data?.id, [profileQuery.data?.id])
-
-  const messagesQueryConfig = useMemo(
-    () =>
-      getAllMessagesQuery({
-        conversationId,
-        profileId,
-        limit
-      }),
-    [conversationId, limit, profileId]
-  )
-
-  useEffect(() => {
-    if (!conversationId || !profileId) return
-
-    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={
@@ -140,7 +59,6 @@ function WidgetStarterPage() {
             ref={chatInputRef}
             onSend={handleSend}
             buttonDisabled={widgetLoading || !chatInputValue.trim()}
-            loading={!isSparkieReady}
           />
 
           <div className='mx-auto w-fit'>
@@ -149,25 +67,13 @@ function WidgetStarterPage() {
         </>
       }>
       <div className='grid-areas-[a_b] grid h-full grid-cols-1 grid-rows-[1fr_auto]'>
-        <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={isMobile}
-            tutorName={name}
-          />
-
-          <div className='my-auto'>
-            <GreetingsCard author={authorName} tutorName={name} isDarkTheme={isDarkTheme} />
+        <div className='grid-areas-[a_b] grid h-full grid-cols-1 grid-rows-[1fr_auto]'>
+          <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'>
+            <WidgetStarterPageHeader />
+            <WidgetStarterPageContent />
           </div>
+          <WidgetStarterPageActions send={sendText} />
         </div>
-        {tutorQuickActionsFF?.enabled ? (
-          <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/hooks/index.ts

@@ -1,4 +1,4 @@
-export * from './use-init-widget'
 export * from './use-listen-to-theme-change-event'
 export * from './use-listen-to-visibility-events'
+export * from './use-retry-last-message'
 export * from './use-send-view-tutor-event'