app-tutor-ai-consumer 1.32.2 → 1.33.0

package/src/modules/sparkie/store/sparkie-state.atom.ts

@@ -0,0 +1,13 @@
+import { atom, useAtom, useAtomValue } from 'jotai'
+
+import type { InitializationState } from '../types'
+
+export const sparkieStateAtom = atom<InitializationState>('idle')
+
+const setSparkieStateAtom = atom(
+  (get) => get(sparkieStateAtom),
+  (_, set, sparkieState: InitializationState) => set(sparkieStateAtom, sparkieState)
+)
+
+export const useSparkieStateAtom = () => useAtom(setSparkieStateAtom)
+export const useSparkieStateAtomValue = () => useAtomValue(sparkieStateAtom)

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

@@ -1,6 +1,7 @@
-import { useEffect, useMemo, useRef } from 'react'
+import { useCallback, useEffect, useMemo, useRef } from 'react'
 import { useDecision } from '@optimizely/react-sdk'
 import { useInfiniteQuery } from '@tanstack/react-query'
+import { useTranslation } from 'react-i18next'
 
 import { useMediaQuery } from '@/src/lib/hooks'
 import { isTextEmpty } from '@/src/lib/utils/is-text-empty'
@@ -12,15 +13,18 @@ import { useGetProfile } from '@/src/modules/profile'
 import { TutorWidgetEvents } from '../../events'
 import { useSendViewTutorEvent } from '../../hooks/use-send-view-tutor-event'
 import {
+  useIsAgentParentAtomValue,
   useWidgetLoadingAtom,
   useWidgetSettingsAtomValue,
   useWidgetTabsValueAtom
 } from '../../store'
 import { testQuestionRegex } from '../../utils'
+import { GreetingsCard } from '../greetings-card'
 import { WidgetHeader } from '../header'
 import { PageLayout } from '../page-layout'
 
 function ChatPage() {
+  const { t } = useTranslation()
   const chatInputRef = useRef<HTMLTextAreaElement>(null)
   const scrollerRef = useRef<HTMLDivElement>(null)
   const settings = useWidgetSettingsAtomValue()
@@ -33,6 +37,7 @@ function ChatPage() {
   const isMobile = useMediaQuery({ maxSize: 'md' })
   const hasSentInitialMessage = useRef(false)
   const [lexTutorInitialMessageFF] = useDecision('lex_tutor_new_widget_initial_message')
+  const isAgentMode = useIsAgentParentAtomValue()
 
   const conversationId = useMemo(() => settings?.conversationId, [settings?.conversationId])
   const profileId = useMemo(() => profileQuery.data?.id, [profileQuery.data?.id])
@@ -63,6 +68,62 @@ function ChatPage() {
     })
   }
 
+  const fetchNextPage = useMemo(() => messagesQuery.fetchNextPage, [messagesQuery.fetchNextPage])
+
+  const retry = useMemo(() => messagesQuery.refetch, [messagesQuery.refetch])
+
+  const handleShowMore = useCallback(async () => {
+    await fetchNextPage()
+  }, [fetchNextPage])
+
+  const errorConfig = useMemo(
+    () => ({
+      show: messagesQuery.isError,
+      message: messagesQuery.error?.message ?? '',
+      retry
+    }),
+    [messagesQuery.error?.message, messagesQuery.isError, retry]
+  )
+
+  const isDarkTheme = useMemo(() => settings?.config?.theme === 'dark', [settings?.config?.theme])
+
+  const authorName = useMemo(() => {
+    const username = typeof settings?.user?.name === 'string' ? settings?.user?.name : ''
+
+    return username?.split?.(' ')?.[0] || ''
+  }, [settings?.user?.name])
+
+  const name = useMemo(() => settings?.tutorName ?? t('general.name'), [settings?.tutorName, t])
+
+  const content = useMemo(() => {
+    if (!isAgentMode || (messagesQuery.data && Number(messagesQuery.data?.size) > 0))
+      return (
+        <MessagesContainer
+          ref={scrollerRef}
+          handleShowMore={handleShowMore}
+          showButton={messagesQuery.hasNextPage}
+          loading={messagesQuery.isFetchingNextPage}
+          error={errorConfig}>
+          {messagesQuery.data && <MessagesList messagesMap={messagesQuery.data} />}
+        </MessagesContainer>
+      )
+    return (
+      <div className='my-auto'>
+        <GreetingsCard author={authorName} tutorName={name} isDarkTheme={isDarkTheme} />
+      </div>
+    )
+  }, [
+    authorName,
+    errorConfig,
+    handleShowMore,
+    isAgentMode,
+    isDarkTheme,
+    messagesQuery.data,
+    messagesQuery.hasNextPage,
+    messagesQuery.isFetchingNextPage,
+    name
+  ])
+
   useEffect(() => {
     if (hasSentInitialMessage.current || !lexTutorInitialMessageFF.enabled) return
 
@@ -110,20 +171,7 @@ function ChatPage() {
           showContentWithoutMeta={!isMobile}
         />
       </div>
-      <MessagesContainer
-        ref={scrollerRef}
-        handleShowMore={async () => {
-          await messagesQuery.fetchNextPage()
-        }}
-        showButton={messagesQuery.hasNextPage}
-        loading={messagesQuery.isFetchingNextPage}
-        error={{
-          show: messagesQuery.isError,
-          message: messagesQuery.error?.message ?? '',
-          retry: () => void messagesQuery.refetch()
-        }}>
-        {messagesQuery.data && <MessagesList messagesMap={messagesQuery.data} />}
-      </MessagesContainer>
+      {content}
     </PageLayout>
   )
 }

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/container/container.tsx

@@ -1,21 +1,9 @@
-import { useEffect, useState } from 'react'
-
 import { useSubscribeMessageReceivedEvent } from '@/src/modules/messages/hooks'
 import { useSubscribeThreadClosedEvent } from '@/src/modules/thread/hooks'
 import { useListenToVisibilityEvents } from '../../hooks'
 import { useWidgetTabsAtom } from '../../store'
 import { WIDGET_TABS } from '../constants'
 
-// TODO: REMOVE
-const hotmartRumKey = 'app-tutor-ai-consumer::hotmart-rum::activate'
-const useSentryDebugger = () => {
-  const [logError] = useState(() => Boolean(window?.localStorage?.getItem?.(hotmartRumKey)))
-
-  useEffect(() => {
-    if (logError) throw new Error(hotmartRumKey)
-  }, [logError])
-}
-
 function WidgetContainer() {
   const [widgetTabs] = useWidgetTabsAtom()
 
@@ -23,8 +11,6 @@ function WidgetContainer() {
   useSubscribeThreadClosedEvent()
   useListenToVisibilityEvents()
 
-  useSentryDebugger()
-
   return (
     <div className='flex h-full flex-col items-center justify-stretch overflow-hidden'>
       {WIDGET_TABS[widgetTabs.currentTab]}

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,10 @@
+import { GenericError } from '@/src/lib/components'
+import { useWidgetSettingsAtomValue } from '../../store'
+
+function WidgetErrorPage() {
+  const settings = useWidgetSettingsAtomValue()
+
+  return <GenericError isDarkMode={settings?.config?.theme === 'dark'} />
+}
+
+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/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 { useInitSparkie } from '@/src/modules/sparkie/hooks'
+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/hooks', async (importActual) => ({
+  ...(await importActual()),
+  useInitSparkie: 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(useInitSparkie).mockReturnValue(true)
+  })
+
+  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,33 @@
+import { useMemo } from 'react'
+import { useDecision } from '@optimizely/react-sdk'
+
+import { useInitSparkie } from '@/src/modules/sparkie/hooks'
+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 isSparkieReady = useInitSparkie()
+
+  const isDarkTheme = useMemo(() => settings?.config?.theme === 'dark', [settings?.config?.theme])
+
+  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,62 @@
+import { render, screen } from '@/src/config/tests'
+import { useSparkieStateAtomValue } from '@/src/modules/sparkie/store'
+import {
+  useIsAgentParentAtomValue,
+  useWidgetLoadingAtomValue,
+  useWidgetTabsAtom
+} from '../../../store'
+
+import WidgetStarterPageContent from './starter-page-content'
+
+vi.mock('../../../store', async (importActual) => ({
+  ...(await importActual()),
+  useIsAgentParentAtomValue: vi.fn(),
+  useWidgetLoadingAtomValue: vi.fn(),
+  useWidgetTabsAtom: vi.fn()
+}))
+
+vi.mock('@/src/modules/sparkie/store', () => ({
+  useSparkieStateAtomValue: vi.fn()
+}))
+
+describe('<WidgetStarterPageContent />', () => {
+  const widgetTabsMock = ['starter', vi.fn()]
+
+  const renderComponent = () => render(<WidgetStarterPageContent />)
+
+  beforeEach(() => {
+    vi.mocked(useIsAgentParentAtomValue).mockReturnValue(false)
+    vi.mocked(useWidgetLoadingAtomValue).mockReturnValue(false)
+    vi.mocked(useSparkieStateAtomValue).mockReturnValue('idle')
+    vi.mocked(useWidgetTabsAtom).mockReturnValue(widgetTabsMock as never)
+  })
+
+  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()
+  })
+
+  it('should render the skeleton when in agent mode and is loading state', () => {
+    vi.mocked(useIsAgentParentAtomValue).mockReturnValueOnce(true)
+    vi.mocked(useWidgetLoadingAtomValue).mockReturnValueOnce(true)
+
+    renderComponent()
+
+    expect(screen.getByTestId('avatar-animation-icon')).toBeInTheDocument()
+  })
+
+  it('should redirect to chat page when in agent mode, widget is not loading and sparkie is initialized', () => {
+    vi.mocked(useSparkieStateAtomValue).mockReturnValue('initialized')
+    vi.mocked(useIsAgentParentAtomValue).mockReturnValueOnce(true)
+
+    const { container } = renderComponent()
+
+    expect(container).toBeEmptyDOMElement()
+    expect(widgetTabsMock[1]).toHaveBeenCalledOnce()
+    expect(widgetTabsMock[1]).toHaveBeenNthCalledWith(1, 'chat')
+  })
+})

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

@@ -0,0 +1,57 @@
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { MessageSkeleton } from '@/src/modules/messages/components'
+import { useSparkieStateAtomValue } from '@/src/modules/sparkie/store'
+import {
+  useIsAgentParentAtomValue,
+  useWidgetLoadingAtomValue,
+  useWidgetSettingsAtomValue,
+  useWidgetTabsAtom
+} from '../../../store'
+import { GreetingsCard } from '../../greetings-card'
+
+function WidgetStarterPageContent() {
+  const { t } = useTranslation()
+  const settings = useWidgetSettingsAtomValue()
+  const isAgentMode = useIsAgentParentAtomValue()
+  const widgetLoading = useWidgetLoadingAtomValue()
+  const [, setWidgetTabs] = useWidgetTabsAtom()
+  const sparkieState = useSparkieStateAtomValue()
+
+  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])
+
+  const shouldGoToChat = useMemo(
+    () => [isAgentMode, !widgetLoading, sparkieState === 'initialized'].every(Boolean),
+    [isAgentMode, sparkieState, widgetLoading]
+  )
+
+  if (shouldGoToChat) {
+    setWidgetTabs('chat')
+    return null
+  }
+
+  if (isAgentMode && (widgetLoading || sparkieState !== 'initialized')) {
+    return (
+      <div className='mt-auto'>
+        <MessageSkeleton />
+      </div>
+    )
+  }
+
+  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,41 @@
+import { render, screen } from '@/src/config/tests'
+import { useInitSparkie } from '@/src/modules/sparkie/hooks/use-init-sparkie'
+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/hooks/use-init-sparkie', () => ({ useInitSparkie: vi.fn() }))
+
+describe('<WidgetStarterPageHeader />', () => {
+  const renderComponent = () => render(<WidgetStarterPageHeader />)
+
+  beforeEach(() => {
+    vi.mocked(useIsAgentParentAtomValue).mockReturnValue(true)
+    vi.mocked(useInitSparkie).mockReturnValue(false)
+  })
+
+  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(useInitSparkie).mockReturnValue(true)
+    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,34 @@
+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 { useInitSparkie } from '@/src/modules/sparkie/hooks'
+import { useIsAgentParentAtomValue, useWidgetSettingsAtomValue } from '../../../store'
+import { WidgetHeader } from '../../header'
+
+function WidgetStarterPageHeader() {
+  const { t } = useTranslation()
+  const settings = useWidgetSettingsAtomValue()
+  const isAgentMode = useIsAgentParentAtomValue()
+  const isSparkieReady = useInitSparkie()
+  const isMobile = useMediaQuery({ maxSize: 'md' })
+
+  const enabledButtons = useMemo(() => {
+    const btns = ['close', 'info'] as ValidIconNames[]
+
+    if (isSparkieReady) {
+      btns.push('archive')
+    }
+
+    return btns
+  }, [isSparkieReady])
+
+  const name = useMemo(() => settings?.tutorName ?? t('general.name'), [settings?.tutorName, t])
+
+  if (isAgentMode) return null
+
+  return <WidgetHeader enabledButtons={enabledButtons} tutorName={name} showContent={isMobile} />
+}
+
+export default WidgetStarterPageHeader

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

@@ -1,9 +1,8 @@
 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 { 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'
@@ -12,32 +11,42 @@ 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'
-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 hasSentInitialMessage = useRef(false)
+
+  const [settings, setWidgetSettings] = useWidgetSettingsAtom()
   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')
 
+  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]
+  )
+
   useRefEventListener<HTMLTextAreaElement>({
     config: {
       ref: chatInputRef,
@@ -68,20 +77,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
 
@@ -115,10 +110,7 @@ function WidgetStarterPage() {
     if (initialMessage) {
       setChatInputValue(testQuestionRegex(initialMessage))
       sendText(initialMessage)
-      setWidgetSettings({
-        ...settings,
-        initialMessage: ''
-      })
+      setWidgetSettings({ ...settings, initialMessage: '' })
       hasSentInitialMessage.current = true
     }
   }, [
@@ -143,24 +135,10 @@ 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>
+          <WidgetStarterPageHeader />
+          <WidgetStarterPageContent />
         </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}
+        <WidgetStarterPageActions send={sendText} />
       </div>
     </PageLayout>
   )