app-tutor-ai-consumer 1.22.0 → 1.22.2

package/src/lib/components/tooltip/tooltip.tsx

@@ -0,0 +1,41 @@
+import clsx from 'clsx'
+import type { PropsWithChildren, ReactNode } from 'react'
+
+import styles from './styles.module.css'
+
+const POSITION = {
+  top: 'left-1/2 transform -translate-x-1/2 bottom-full mb-3',
+  right: 'left-full top-1/2 transform -translate-y-1/2 ml-3',
+  bottom: 'left-1/2 transform -translate-x-1/2 top-full mt-3',
+  left: 'right-full top-1/2 transform -translate-y-1/2 mr-3'
+} as const
+
+export type TooltipProps = PropsWithChildren<{
+  content?: ReactNode
+  position?: keyof typeof POSITION
+  show?: boolean
+}>
+
+function Tooltip({ children, content, position = 'top', show = true }: TooltipProps) {
+  if (!show) return children
+
+  return (
+    <div className='group relative flex items-center justify-center'>
+      {children}
+      {content && (
+        <div
+          className={clsx(
+            'absolute hidden rounded-lg group-hover:block',
+            'bg-neutral-300 px-4 py-2 text-xs text-neutral-900',
+            POSITION[position],
+            styles.triangle,
+            styles[position]
+          )}>
+          {content}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Tooltip

package/src/lib/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from './use-intersection-observer-reverse-scroll'
+export * from './use-media-query'
 export * from './use-ref-client-height'
 export * from './use-ref-event-listener'
 export * from './use-throttle'

package/src/lib/hooks/use-media-query/index.ts

@@ -0,0 +1,2 @@
+export * from './use-media-query'
+export { default as useMediaQuery } from './use-media-query'

package/src/lib/hooks/use-media-query/use-media-query.tsx

@@ -0,0 +1,20 @@
+import { useLayoutEffect, useState } from 'react'
+
+import { SCREEN_SIZES } from '@/src/config/theme/constants'
+
+function useMediaQuery({ maxSize }: { maxSize: keyof typeof SCREEN_SIZES }) {
+  const [matches, setMatches] = useState(false)
+
+  useLayoutEffect(() => {
+    const mediaquery = window.matchMedia(`(max-width: ${SCREEN_SIZES[maxSize]}px)`)
+    const listener = () => setMatches(mediaquery.matches)
+
+    mediaquery.addEventListener('change', listener)
+
+    return () => mediaquery.removeEventListener('change', listener)
+  }, [maxSize])
+
+  return matches
+}
+
+export default useMediaQuery

package/src/main/main.tsx

@@ -17,7 +17,7 @@ function Main({ settings }: MainProps) {
   useListenToThemeChangeEvent()
 
   return (
-    <ErrorBoundary fallback={<GenericError />}>
+    <ErrorBoundary fallback={<GenericError isDarkMode={settings.config?.theme === 'dark'} />}>
       <GlobalProviders settings={settings}>
         <WidgetContainer />
       </GlobalProviders>

package/src/modules/messages/components/chat-input/chat-input.tsx

@@ -85,15 +85,16 @@ const ChatInput = forwardRef<HTMLTextAreaElement, ChatInputProps>(
         <Button
           onClick={onSend}
           disabled={buttonDisabled || loading}
-          className={clsx('flex size-8 flex-col items-center justify-center', {
-            'text-neutral-700': !buttonDisabled,
-            'text-neutral-400': buttonDisabled
+          className={clsx('flex flex-col items-center justify-center', styles.send, {
+            'bg-neutral-900 text-neutral-100 hover:text-neutral-900 focus:text-neutral-900':
+              !buttonDisabled,
+            'text-neutral-900': buttonDisabled
           })}
           loading={loading}
           aria-label='Submit Button'>
           <Icon
             name='send'
-            className='h-4 w-4 pr-0.5 pt-0.5 text-current transition-colors duration-150'
+            className={clsx('ml-0.5 h-4 w-4 p-0.5 text-current transition-colors duration-150')}
           />
         </Button>
       </div>

package/src/modules/messages/components/chat-input/styles.module.css

@@ -1,3 +1,7 @@
 .textArea {
   --custom-scrollbar-width: var(--hc-size-spacing-1);
 }
+
+.send {
+  --custom-btn-padding: 0.125rem;
+}

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

@@ -50,34 +50,41 @@ function MessageActions({ message, className, showActions = false }: MessageActi
         {dayjs(message.timestamp).format('DD/MM [•] LT')}
       </span>
       <div
-        style={{ '--custom-btn-padding': '0.5rem' } as CSSProperties}
-        className={clsx('flex flex-nowrap gap-2 text-neutral-600', {
+        style={{ '--custom-btn-padding': '0.125rem' } as CSSProperties}
+        className={clsx('flex flex-nowrap gap-3 text-neutral-600', {
           hidden: !showActions
         })}>
-        <Button onClick={() => handleReaction()} aria-label={t('general.buttons.like')}>
+        <Button
+          className='hover:!bg-transparent hover:text-neutral-500 focus:!bg-transparent'
+          onClick={() => handleReaction()}
+          aria-label={t('general.buttons.like')}>
           <Icon
-            name='like'
-            className={clsx('h-3 w-3.5', {
-              'text-info-500': reaction === ButtonReactions.LIKE
+            name={reaction === ButtonReactions.LIKE ? 'like-solid' : 'like'}
+            className={clsx('size-3 transition-colors duration-100', {
+              'text-neutral-900': reaction === ButtonReactions.LIKE
             })}
           />
         </Button>
         <Button
-          className='rotate-180 scale-x-[-1]'
+          className='rotate-180 scale-x-[-1] hover:!bg-transparent hover:text-neutral-500 focus:!bg-transparent'
           onClick={() => handleReaction(ButtonReactions.DISLIKE)}
           aria-label={t('general.buttons.dislike')}>
           <Icon
-            name='like'
-            className={clsx('h-3 w-3.5', {
-              'text-danger-500': reaction === ButtonReactions.DISLIKE
+            name={reaction === ButtonReactions.DISLIKE ? 'like-solid' : 'like'}
+            className={clsx('size-3 transition-colors duration-100', {
+              'text-neutral-900': reaction === ButtonReactions.DISLIKE
             })}
           />
         </Button>
-        <Button onClick={copyToClipboard} aria-label={t('general.buttons.copy')} disabled={copying}>
+        <Button
+          className='hover:!bg-transparent hover:text-neutral-500 focus:!bg-transparent'
+          onClick={copyToClipboard}
+          aria-label={t('general.buttons.copy')}
+          disabled={copying}>
           <Icon
-            name={copied ? 'paste' : 'copy'}
-            className={clsx('h-3 w-3.5', {
-              'text-info-500': copied
+            name={copied ? 'copy-solid' : 'copy'}
+            className={clsx('size-3 transition-colors duration-100', {
+              'text-neutral-900': copied
             })}
           />
         </Button>

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

@@ -17,7 +17,7 @@ function MessageItem({ message }: { message: ParsedMessage }) {
   return (
     <div
       className={clsx(
-        'flex max-w-[min(90%,52rem)] flex-col items-end gap-2 text-sm/normal text-neutral-900',
+        'flex max-w-[min(90%,52rem)] flex-col items-end gap-1 text-sm/normal text-neutral-900',
         {
           'self-end': messageFromUser
         }

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

@@ -1,20 +1,31 @@
 import clsx from 'clsx'
 
 import { Icon } from '@/src/lib/components'
+import { useWidgetSettingsAtomValue } from '../../store'
 
-import styles from './styles.module.css'
-
-export type AIAvatarProps = { className?: string }
+export type AIAvatarProps = { className?: string; size?: 'sm' | 'lg' }
 
 function AIAvatar({
-  className = 'rounded-full border-4 border-neutral-100 bg-neutral-200'
+  className = 'rounded-full border-4 border-neutral-100 bg-neutral-200',
+  size = 'sm'
 }: AIAvatarProps) {
+  const settings = useWidgetSettingsAtomValue()
+  const isDarkTheme = settings?.config?.theme === 'dark'
   return (
     <figure
-      className={clsx('flex h-9 w-9 items-center justify-center rounded-full', styles.avatar)}>
-      <div className={clsx('flex h-8 w-8 items-center justify-center', className)}>
-        <Icon name='ai-color' className='h-6 w-6' aria-label='AI avatar Icon' />
-      </div>
+      className={clsx(
+        'flex items-center justify-center rounded-full',
+        {
+          'bg-neutral-100': isDarkTheme,
+          'bg-white': !isDarkTheme
+        },
+        className
+      )}>
+      <Icon
+        name={!isDarkTheme ? 'sparkle-tutor-light' : 'sparkle-tutor'}
+        className={clsx({ 'h-9 w-9': size === 'sm', 'h-14 w-14': size === 'lg' })}
+        aria-label='AI avatar Icon'
+      />
     </figure>
   )
 }

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

@@ -4,7 +4,7 @@ const AVATAR_ANIMATION_URL = `${process.env.STATIC_URL}/tutor/tutor_sparkle.lott
 
 const AvatarAnimation = () => {
   return (
-    <div className='flex h-11 w-11 items-center justify-center rounded-lg bg-ai-chat-response'>
+    <div className='flex h-11 w-11 items-center justify-center rounded-lg bg-neutral-300'>
       <DotLottieReact src={AVATAR_ANIMATION_URL} loop autoplay className='h-auto w-full' />
     </div>
   )

package/src/modules/widget/components/greetings-card/greetings-card.tsx

@@ -1,6 +1,8 @@
 import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
 
+import { AIAvatar } from '../ai-avatar'
+
 export type GreetingsCardProps = {
   tutorName: string
   author?: string
@@ -12,6 +14,9 @@ function GreetingsCard({ author, tutorName, isDarkTheme = false }: GreetingsCard
 
   return (
     <div className='flex flex-col items-center justify-center'>
+      <div className='max-md:hidden md:mb-4 md:block'>
+        <AIAvatar size='lg' />
+      </div>
       <div className='flex flex-col items-center justify-center gap-4 text-center'>
         <div className='flex flex-col gap-2'>
           <span

package/src/modules/widget/components/header/header.spec.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@/src/config/tests'
+import * as Hooks from '@/src/lib/hooks'
 
 import WidgetHeaderPropsBuilder from './__tests__/widget-header-props.builder'
 import WidgetHeader from './header'
@@ -12,14 +13,18 @@ describe('<WidgetHeader />', () => {
 
     expect(screen.getByRole('button', { name: /Close Icon/i })).toBeInTheDocument()
 
-    expect(screen.queryByRole('button', { name: /Archive Icon/i })).not.toBeInTheDocument()
-    expect(screen.queryByRole('button', { name: /Info Icon/i })).not.toBeInTheDocument()
+    expect(
+      screen.queryByRole('button', { name: /general.buttons.archive Icon/i })
+    ).not.toBeInTheDocument()
+    expect(
+      screen.queryByRole('button', { name: /general.buttons.info Icon/i })
+    ).not.toBeInTheDocument()
   })
 
   it('should render WidgetHeaderContent when prop showContent is true', () => {
     renderComponent()
 
-    expect(screen.getByText(/ai-color/i)).toBeInTheDocument()
+    expect(screen.getByText(/sparkle-tutor-light/i)).toBeInTheDocument()
 
     expect(screen.queryByRole('button', { name: /Arrow Left Icon/i })).not.toBeInTheDocument()
   })
@@ -33,7 +38,7 @@ describe('<WidgetHeader />', () => {
 
     expect(screen.getByRole('button', { name: /Arrow Left Icon/i })).toBeInTheDocument()
 
-    expect(screen.queryByText(/ai-color/i)).not.toBeInTheDocument()
+    expect(screen.queryByText(/sparkle-tutor-light/i)).not.toBeInTheDocument()
   })
 
   it('should be able to render the remaining icons', () => {
@@ -41,7 +46,30 @@ describe('<WidgetHeader />', () => {
 
     renderComponent(props)
 
-    expect(screen.getByRole('button', { name: /Archive Icon/i })).toBeInTheDocument()
-    expect(screen.getByRole('button', { name: /Info Icon/i })).toBeInTheDocument()
+    expect(
+      screen.getByRole('button', { name: /general.buttons.archive Icon/i })
+    ).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /general.buttons.info Icon/i })).toBeInTheDocument()
+  })
+
+  it('should show header buttons tooltip when window is not in mobile view', () => {
+    const props = new WidgetHeaderPropsBuilder().withEnabledButtons(['archive', 'info'])
+
+    renderComponent(props)
+
+    expect(screen.getByText(/general.buttons.archive/i)).toBeInTheDocument()
+  })
+
+  it('should not show header buttons tooltip when window is in mobile view', () => {
+    vi.spyOn(Hooks, 'useMediaQuery').mockReturnValue(true)
+
+    const props = new WidgetHeaderPropsBuilder().withEnabledButtons(['archive', 'info'])
+
+    renderComponent(props)
+
+    expect(
+      screen.getByRole('button', { name: /general.buttons.archive Icon/i })
+    ).toBeInTheDocument()
+    expect(screen.queryByText(/general.buttons.archive/i)).not.toBeInTheDocument()
   })
 })

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

@@ -1,7 +1,10 @@
 import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
 
-import { Button, Icon } from '@/src/lib/components'
+import { DataHubService } from '@/src/config/datahub'
+import { ClickTutorMinimizeSchema } from '@/src/config/datahub/schemas/tutor'
+import { Button, Icon, Tooltip } from '@/src/lib/components'
+import { useMediaQuery } from '@/src/lib/hooks'
 import { TutorWidgetEvents } from '../../events'
 import { useWidgetGoBackTabAtom, useWidgetTabsAtom } from '../../store'
 import { AIAvatar } from '../ai-avatar'
@@ -22,7 +25,9 @@ export function WidgetHeaderContent({ tutorName }: WidgetHeaderContentProps) {
 }
 
 export function WidgetHeaderContentWithoutMeta({ name }: { name?: string }) {
+  const { t } = useTranslation()
   const [, goBack] = useWidgetGoBackTabAtom()
+  const tutorName = name ?? t('general.name')
 
   return (
     <div
@@ -35,7 +40,7 @@ export function WidgetHeaderContentWithoutMeta({ name }: { name?: string }) {
       </Button>
       <div className='grid-area-[b] flex min-h-6 justify-center text-center'>
         <span className='absolute bottom-0 left-1/2 -translate-x-1/2 text-base font-bold'>
-          {name}
+          {tutorName}
         </span>
       </div>
     </div>
@@ -43,7 +48,7 @@ export function WidgetHeaderContentWithoutMeta({ name }: { name?: string }) {
 }
 
 function WidgetHeader({
-  enabledButtons,
+  enabledButtons = [],
   tutorName,
   showContentWithoutMeta,
   showContent = true
@@ -51,6 +56,7 @@ function WidgetHeader({
   const { t } = useTranslation()
   const [, setTab] = useWidgetTabsAtom()
   const name = tutorName ?? t('general.name')
+  const isMobile = useMediaQuery({ maxSize: 'md' })
 
   const handleClickArchive = () => {
     setTab('chat')
@@ -60,6 +66,11 @@ function WidgetHeader({
     setTab('information')
   }
 
+  const handleHideWidget = () => {
+    TutorWidgetEvents['c3po-app-widget-hide'].dispatch()
+    DataHubService.sendEvent({ schema: new ClickTutorMinimizeSchema() })
+  }
+
   return (
     <div className='mt-0.5 flex flex-col gap-2 text-neutral-900'>
       <div className='flex justify-end'>
@@ -67,35 +78,36 @@ function WidgetHeader({
           <Button
             className='text-neutral-500'
             show={enabledButtons.includes('close')}
-            onClick={() => TutorWidgetEvents['c3po-app-widget-hide'].dispatch()}
+            onClick={handleHideWidget}
             aria-label='Close Icon'>
             <Icon name='close' className='h-3 w-3' aria-hidden />
           </Button>
         </div>
       </div>
-      <div className='grid-areas-[a_b] grid grid-cols-[1fr_auto] items-center'>
+      <div className='grid-areas-[a_b] grid grid-cols-[1fr_auto] items-center pb-4'>
         <div className='grid-area-[a] relative'>
           {showContent && !showContentWithoutMeta && <WidgetHeaderContent tutorName={name} />}
           {showContentWithoutMeta && !showContent && <WidgetHeaderContentWithoutMeta name={name} />}
         </div>
-        <div className='shrink-0'>
-          <div
-            className={clsx(
-              'grid-area-[b] ml-auto flex max-w-max gap-3 text-neutral-700',
-              styles.btnContainer
-            )}>
-            <Button
-              show={enabledButtons.includes('archive')}
-              onClick={handleClickArchive}
-              aria-label='Archive Icon'>
-              <Icon name='archive' className='h-4 w-4' aria-hidden />
-            </Button>
-            <Button
-              show={enabledButtons.includes('info')}
-              aria-label='Info Icon'
-              onClick={handleClickInfo}>
-              <Icon name='info' className='h-4 w-4' aria-hidden />
-            </Button>
+
+        <div className='grid-area-[b] ml-auto shrink-0'>
+          <div className={clsx('flex max-w-max gap-3 text-neutral-700', styles.btnContainer)}>
+            <Tooltip show={!isMobile} content={t('general.buttons.archive')}>
+              <Button
+                show={enabledButtons.includes('archive')}
+                onClick={handleClickArchive}
+                aria-label={t('general.buttons.archive') + ' Icon'}>
+                <Icon name='archive' className='h-4 w-4' aria-hidden />
+              </Button>
+            </Tooltip>
+            <Tooltip show={!isMobile} content={t('general.buttons.info')} position='left'>
+              <Button
+                show={enabledButtons.includes('info')}
+                onClick={handleClickInfo}
+                aria-label={t('general.buttons.info') + ' Icon'}>
+                <Icon name='info' className='h-4 w-4' aria-hidden />
+              </Button>
+            </Tooltip>
           </div>
         </div>
       </div>

package/src/modules/widget/components/header/types.ts

@@ -3,7 +3,7 @@ import type { ValidIconNames } from '@/src/lib/components/icons/icon-names'
 export type WidgetHeaderContentProps = { tutorName?: string }
 
 export type WidgetHeaderProps = {
-  enabledButtons: ValidIconNames[]
+  enabledButtons?: ValidIconNames[]
   showContent?: boolean
   showContentWithoutMeta?: boolean
 } & WidgetHeaderContentProps

package/src/modules/widget/components/information-page/constants.ts

@@ -1,3 +1,4 @@
+import { t } from '@/src/config/i18n'
 import type { ValidIconNames } from '@/src/lib/components/icons/icon-names'
 
 type InfoItem = {
@@ -6,10 +7,10 @@ type InfoItem = {
   descKey: string
 }
 
-export const infoItems: InfoItem[] = [
+export const infoItems: (config: { tutorName: string }) => InfoItem[] = ({ tutorName }) => [
   {
     icon: 'interrogation',
-    titleKey: 'info.what_it_does_question',
+    titleKey: t('info.what_it_does_question', { tutor_name: tutorName }),
     descKey: 'info.what_it_does_answer'
   },
   {

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

@@ -13,6 +13,7 @@ function WidgetInformationPage() {
   const { t } = useTranslation()
   const [settings] = useWidgetSettingsAtom()
   const isDarkMode = settings?.config?.theme === 'dark'
+  const tutorName = settings?.tutorName ?? t('general.name')
 
   return (
     <PageLayout className='flex min-h-0 flex-col text-neutral-900 max-md:p-[1.125rem] md:p-5'>
@@ -27,20 +28,20 @@ function WidgetInformationPage() {
 
       <div className='my-8 flex justify-center'>
         <div className='flex flex-col items-center gap-2'>
-          <AIAvatar />
+          <AIAvatar size='lg' />
 
           <h3
             className={clsx('font-bold', {
               'text-white': isDarkMode,
               'text-neutral-700': !isDarkMode
             })}>
-            {settings?.tutorName ?? t('general.name')}
+            {tutorName}
           </h3>
         </div>
       </div>
 
       <div className='flex flex-col gap-5'>
-        {infoItems.map((item) => (
+        {infoItems({ tutorName: t('general.name') }).map((item) => (
           <InformationCard
             key={item.titleKey}
             icon={item.icon}

package/src/modules/widget/components/scroll-to-bottom-button/scroll-to-bottom-button.tsx

@@ -15,8 +15,8 @@ const ScrollToBottomButton = forwardRef<HTMLButtonElement, IScrollToBottomButton
       {...props}
       ref={ref}
       className={clsx(
-        'absolute bottom-4 left-1/2 flex size-7 cursor-pointer flex-col items-center justify-center rounded-full bg-neutral-400 text-sm text-neutral-900 outline-none transition-colors duration-300 ease-in hover:scale-110 hover:bg-neutral-500 focus:outline-none focus:ring-neutral-500 focus:ring-offset-2 focus-visible:ring-2 active:ring-2',
-        { 'opacity-80': show, 'pointer-events-none opacity-0': !show },
+        'absolute bottom-4 left-1/2 flex size-7 -translate-x-1/2 cursor-pointer flex-col items-center justify-center rounded-full border border-neutral-500 bg-neutral-300 text-sm text-neutral-900 outline-none transition-colors duration-300 ease-in hover:scale-110 hover:bg-neutral-400 focus:outline-none focus:ring-neutral-500 focus:ring-offset-2 focus-visible:ring-2 active:ring-2',
+        { 'opacity-90': show, 'pointer-events-none opacity-0': !show },
         className
       )}
       onClick={onClick}

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

@@ -27,7 +27,7 @@ describe('WidgetStarterPage', () => {
     expect(
       screen.getByRole('button', { name: /starter_page.what_does_tutor_do/i })
     ).toBeInTheDocument()
-    expect(screen.getByRole('button', { name: /starter_page.wanna_summary/i })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /starter_page.test_me/i })).toBeInTheDocument()
   })
 
   it('should post the slider button text content to the backend', async () => {

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

@@ -1,11 +1,9 @@
 import { useEffect, useMemo, useRef } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
-import clsx from 'clsx'
-import type { MouseEventHandler } from 'react'
+import type { CSSProperties, MouseEventHandler } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { Button, HorizontalDraggableScroll } from '@/src/lib/components'
-import type { ValidIconNames } from '@/src/lib/components/icons/icon-names'
 import { useRefEventListener } from '@/src/lib/hooks'
 import { ChatInput, useChatInputValueAtom } from '@/src/modules/messages/components'
 import { getAllMessagesQuery, useSendTextMessage } from '@/src/modules/messages/hooks'
@@ -17,8 +15,6 @@ import { GreetingsCard } from '../greetings-card'
 import { WidgetHeader } from '../header'
 import { PageLayout } from '../page-layout'
 
-import styles from './styles.module.css'
-
 function WidgetStarterPage() {
   const { t } = useTranslation()
   const [settings] = useWidgetSettingsAtom()
@@ -30,6 +26,7 @@ function WidgetStarterPage() {
   const limit = useMessagesMaxCount()
   const queryClient = useQueryClient()
   const name = settings?.tutorName ?? t('general.name')
+  const isDarkTheme = settings?.config?.theme === 'dark'
   const isSparkieReady = useInitSparkie()
 
   useRefEventListener<HTMLTextAreaElement>({
@@ -77,13 +74,15 @@ function WidgetStarterPage() {
     [conversationId, limit, profileId]
   )
 
-  const headerBtns = useMemo(() => {
-    const btnList = ['info', 'close']
-
-    if (!isSparkieReady) return btnList
-
-    return btnList.concat(['archive'])
-  }, [isSparkieReady]) as ValidIconNames[]
+  const actionButtonStyle = useMemo(
+    () =>
+      isDarkTheme
+        ? undefined
+        : ({
+            '--gradient-btn-hover-foreground': '#0d0d0d'
+          } as CSSProperties),
+    [isDarkTheme]
+  )
 
   useEffect(() => {
     if (!conversationId || !profileId) return
@@ -102,24 +101,26 @@ function WidgetStarterPage() {
         />
       }>
       <div className='grid-areas-[a_b] grid h-full grid-cols-1 grid-rows-[1fr_auto]'>
-        <div
-          className={clsx('grid-area-[a] flex min-h-0 flex-col max-md:p-[1.125rem] md:p-5', {
-            [styles.bg]: settings?.config?.theme === 'dark'
-          })}>
-          <WidgetHeader enabledButtons={headerBtns} tutorName={name} />
+        <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={false}
+            tutorName={name}
+          />
 
           <div className='my-auto'>
             <GreetingsCard
-              author={settings?.user?.name}
+              author={settings?.user?.name?.split(' ')?.[0]}
               tutorName={name}
               isDarkTheme={settings?.config?.theme === 'dark'}
             />
           </div>
         </div>
-        <HorizontalDraggableScroll className='grid-area-[b] mx-5 my-6 flex flex-shrink-0 snap-x snap-mandatory gap-2 overflow-x-auto whitespace-nowrap [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'>
+        <HorizontalDraggableScroll 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'>
           <Button
             variant='gradient-outline'
-            className='shrink-0 snap-end text-sm'
+            style={actionButtonStyle}
+            className='ml-5 shrink-0 text-sm'
             onClick={handleAskQuestion}
             loading={!isSparkieReady}>
             <span>🤖 </span>
@@ -127,11 +128,12 @@ function WidgetStarterPage() {
           </Button>
           <Button
             variant='gradient-outline'
-            className='shrink-0 snap-end text-sm'
+            style={actionButtonStyle}
+            className='mr-5 shrink-0 text-sm'
             onClick={handleAskQuestion}
             loading={!isSparkieReady}>
             <span>📝 </span>
-            {t('starter_page.wanna_summary')}
+            {t('starter_page.test_me')}
           </Button>
         </HorizontalDraggableScroll>
       </div>