app-tutor-ai-consumer 1.33.0 → 1.33.1

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

@@ -1,7 +1,6 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { 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'
@@ -13,18 +12,16 @@ 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 { AIDisclaimer } from '../ai-disclaimer'
 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()
@@ -37,7 +34,6 @@ 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])
@@ -68,62 +64,6 @@ 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
 
@@ -155,14 +95,20 @@ function ChatPage() {
   return (
     <PageLayout
       asideChild={
-        <ChatInput
-          name='new-chat-msg-input'
-          ref={chatInputRef}
-          onSend={widgetTabs.currentTab === 'chat' ? handleSendMessage : undefined}
-          loading={sendTextMessageMutation.isPending}
-          inputDisabled={messagesQuery?.isLoading}
-          buttonDisabled={widgetLoading || messagesQuery?.isLoading || !value.trim()}
-        />
+        <>
+          <ChatInput
+            name='new-chat-msg-input'
+            ref={chatInputRef}
+            onSend={widgetTabs.currentTab === 'chat' ? handleSendMessage : undefined}
+            loading={sendTextMessageMutation.isPending}
+            inputDisabled={messagesQuery?.isLoading}
+            buttonDisabled={widgetLoading || messagesQuery?.isLoading || !value.trim()}
+          />
+
+          <div className='mx-auto w-fit'>
+            <AIDisclaimer />
+          </div>
+        </>
       }>
       <div className='max-md:px-[1.125rem] max-md:pt-[1.125rem] md:px-5 md:pt-5'>
         <WidgetHeader
@@ -171,7 +117,20 @@ function ChatPage() {
           showContentWithoutMeta={!isMobile}
         />
       </div>
-      {content}
+      <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>
     </PageLayout>
   )
 }

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

@@ -1,5 +1,4 @@
 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'
@@ -8,6 +7,5 @@ export const WIDGET_TABS = {
   starter: <WidgetStarterPage />,
   chat: <ChatPage />,
   loading: <WidgetLoadingPage />,
-  information: <WidgetInformationPage />,
-  error: <WidgetErrorPage />
+  information: <WidgetInformationPage />
 }

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

@@ -1,9 +1,21 @@
+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()
 
@@ -11,6 +23,8 @@ 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/greetings-card/greetings-card.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
 
+import { useIsAgentParentAtomValue } from '../../store'
 import { AIAvatar } from '../ai-avatar'
 
 export type GreetingsCardProps = {
@@ -11,6 +12,7 @@ export type GreetingsCardProps = {
 
 function GreetingsCard({ author, tutorName, isDarkTheme = false }: GreetingsCardProps) {
   const { t } = useTranslation()
+  const isAgentMode = useIsAgentParentAtomValue()
 
   return (
     <div className='flex flex-col items-center justify-center'>
@@ -31,7 +33,12 @@ function GreetingsCard({ author, tutorName, isDarkTheme = false }: GreetingsCard
               'text-white': isDarkTheme,
               'text-gray-900': !isDarkTheme
             })}>
-            {t('general.greetings.firstMessage', { tutorName })}
+            {t(
+              isAgentMode
+                ? 'general.greetings.agentFirstMessage'
+                : 'general.greetings.firstMessage',
+              { tutorName }
+            )}
           </h3>
         </div>
         <p
@@ -39,7 +46,7 @@ function GreetingsCard({ author, tutorName, isDarkTheme = false }: GreetingsCard
             'text-gray-400': isDarkTheme,
             'text-neutral-600': !isDarkTheme
           })}>
-          {t('general.greetings.description')}
+          {t(isAgentMode ? 'general.greetings.agentDescription' : 'general.greetings.description')}
         </p>
       </div>
     </div>

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

@@ -1,8 +1,9 @@
 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 { useRefEventListener } from '@/src/lib/hooks'
+import { useMediaQuery, 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'
@@ -11,42 +12,33 @@ 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 { AIDisclaimer } from '../ai-disclaimer'
+import { GreetingsCard } from '../greetings-card'
+import { WidgetHeader } from '../header'
 import { PageLayout } from '../page-layout'
-
-import { WidgetStarterPageActions } from './starter-page-actions'
-import { WidgetStarterPageContent } from './starter-page-content'
-import { WidgetStarterPageHeader } from './starter-page-header'
+import { QuickActionButtons } from '../quick-action-buttons'
 
 function WidgetStarterPage() {
-  const chatInputRef = useRef<HTMLTextAreaElement>(null)
-  const hasSentInitialMessage = useRef(false)
-
+  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')
 
-  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,
@@ -77,6 +69,20 @@ 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
 
@@ -110,7 +116,10 @@ function WidgetStarterPage() {
     if (initialMessage) {
       setChatInputValue(testQuestionRegex(initialMessage))
       sendText(initialMessage)
-      setWidgetSettings({ ...settings, initialMessage: '' })
+      setWidgetSettings({
+        ...settings,
+        initialMessage: ''
+      })
       hasSentInitialMessage.current = true
     }
   }, [
@@ -125,20 +134,40 @@ function WidgetStarterPage() {
   return (
     <PageLayout
       asideChild={
-        <ChatInput
-          name='new-chat-msg-input'
-          ref={chatInputRef}
-          onSend={handleSend}
-          buttonDisabled={widgetLoading || !chatInputValue.trim()}
-          loading={!isSparkieReady}
-        />
+        <>
+          <ChatInput
+            name='new-chat-msg-input'
+            ref={chatInputRef}
+            onSend={handleSend}
+            buttonDisabled={widgetLoading || !chatInputValue.trim()}
+            loading={!isSparkieReady}
+          />
+
+          <div className='mx-auto w-fit'>
+            <AIDisclaimer />
+          </div>
+        </>
       }>
       <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 />
+          <WidgetHeader
+            enabledButtons={isSparkieReady ? ['close', 'archive', 'info'] : ['close', 'info']}
+            showContent={isMobile}
+            tutorName={name}
+          />
+
+          <div className='my-auto'>
+            <GreetingsCard author={authorName} tutorName={name} isDarkTheme={isDarkTheme} />
+          </div>
         </div>
-        <WidgetStarterPageActions send={sendText} />
+        {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/store/widget-tabs.atom.ts

@@ -1,11 +1,7 @@
 import { atom, useAtom, useAtomValue } from 'jotai'
-import { atomWithDefault } from 'jotai/utils'
 
-import { sparkieStateAtom } from '../../sparkie/store'
 import type { CurrentTabKey } from '../components'
 
-import { widgetSettingsConfigAgentParentAtom } from './widget-settings-config.atom'
-
 export type WidgetTabsProps = {
   currentTab: CurrentTabKey
   history: Set<CurrentTabKey>
@@ -16,33 +12,7 @@ const INITIAL_PROPS: WidgetTabsProps = {
   history: new Set(['starter'])
 }
 
-export const widgetTabsAtom = atomWithDefault<WidgetTabsProps>((get) => {
-  const sparkieState = get(sparkieStateAtom)
-  const isAgentMode = get(widgetSettingsConfigAgentParentAtom)
-
-  if (!isAgentMode) return INITIAL_PROPS
-
-  switch (sparkieState) {
-    case 'idle':
-    case 'initializing':
-      return {
-        currentTab: 'loading',
-        history: new Set(['loading'])
-      }
-    case 'initialized':
-      return {
-        currentTab: 'chat',
-        history: new Set(['chat'])
-      }
-    case 'failed':
-      return {
-        currentTab: 'error',
-        history: new Set(['error'])
-      }
-    default:
-      return INITIAL_PROPS
-  }
-})
+export const widgetTabsAtom = atom<WidgetTabsProps>(INITIAL_PROPS)
 
 export const setWidgetTabsAtom = atom(
   (get) => get(widgetTabsAtom),

package/src/types.ts

@@ -1,6 +1,3 @@
-import type { QueryClient } from '@tanstack/react-query'
-import type { Root } from 'react-dom/client'
-
 import type { ILanguages } from './config/i18n'
 
 export type StartTutorWidgetProps = {
@@ -71,9 +68,3 @@ export interface ICustomEvent<T = object> {
   handler: (listener: EventListenerOrEventListenerObject) => () => void | Promise<void>
   dispatch: <D = unknown>(detail?: D) => void
 }
-
-export type WidgetInstance = {
-  root: Root
-  container: HTMLElement
-  queryClient: QueryClient
-}

package/src/index.backup.tsx

@@ -1,61 +0,0 @@
-import './config/styles/global.css'
-import './config/styles/index.css'
-
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-
-import { initTheme } from '@/src/config/theme'
-import { version } from '../package.json'
-
-import { initLanguage } from './config/i18n'
-import { devMode, productionMode } from './lib/utils'
-import { Main } from './main'
-import { TutorWidgetEvents } from './modules/widget'
-import type { Theme, WidgetSettingProps } from './types'
-
-const loadMainStyles = () => {
-  const isProduction = productionMode
-  const bundlePath = !isProduction
-    ? `${process.env.BUNDLE_PATH}/`
-    : `${process.env.BUNDLE_PATH}/${process.env.APP_NAME}/_current/`
-
-  const cssPath = `${bundlePath}app-tutor-ai-consumer.css?v=${version}`
-
-  if (!document.querySelector(`link[href="${cssPath}"]`)) {
-    const linkElement = document.createElement('link')
-    linkElement.rel = 'stylesheet'
-    linkElement.href = cssPath
-    document.head.appendChild(linkElement)
-  }
-}
-
-window.startChatWidget = async (
-  elementId = 'tutor-chat-app-widget',
-  settings: WidgetSettingProps
-) => {
-  if (!devMode) {
-    loadMainStyles()
-  }
-
-  const rootElement = document.getElementById(elementId) as HTMLElement
-
-  if (!rootElement) return
-
-  rootElement.setAttribute('id', 'hotmart-app-tutor-ai-consumer-root')
-  const theme = (rootElement.getAttribute('data-theme') ?? 'dark') as Theme
-  const root = createRoot(rootElement)
-
-  await initLanguage(settings.locale)
-  initTheme(theme)
-
-  if (root) {
-    root.render(
-      <StrictMode>
-        <Main settings={{ ...settings, config: { ...settings.config, theme } }} />
-      </StrictMode>
-    )
-  }
-}
-
-window.closeChatWidget = () =>
-  Promise.resolve(TutorWidgetEvents['c3po-app-widget-close'].dispatch())

package/src/lib/hooks/use-response-timeout/index.ts

@@ -1 +0,0 @@
-export { default as useResponseTimeout } from './use-response-timeout'

package/src/lib/hooks/use-response-timeout/use-response-timeout.tsx

@@ -1,42 +0,0 @@
-import { useCallback, useRef } from 'react'
-
-const FIVE_MINUTES = 5 * 60 * 1000
-
-function useResponseTimeout() {
-  const timeoutRef = useRef<NodeJS.Timeout>(null)
-  const isWaitingRef = useRef(false)
-
-  const startTimeout = useCallback((callback: () => void) => {
-    if (timeoutRef.current) clearTimeout(timeoutRef.current)
-
-    isWaitingRef.current = true
-
-    timeoutRef.current = setTimeout(() => {
-      callback()
-      isWaitingRef.current = false
-    }, FIVE_MINUTES)
-  }, [])
-
-  const reset = useCallback(() => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current)
-      timeoutRef.current = null
-    }
-    isWaitingRef.current = false
-  }, [])
-
-  const cleanup = useCallback(() => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current)
-    }
-  }, [])
-
-  return {
-    startTimeout,
-    cleanup,
-    reset,
-    isWaiting: isWaitingRef.current
-  }
-}
-
-export default useResponseTimeout

package/src/modules/sparkie/store/index.ts

@@ -1 +0,0 @@
-export * from './sparkie-state.atom'

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

@@ -1,13 +0,0 @@
-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/error-page/error-page.spec.tsx

@@ -1,17 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

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

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

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

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

@@ -1,68 +0,0 @@
-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()
-    }
-  )
-})