app-tutor-ai-consumer 1.16.0 → 1.17.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+# [1.17.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.16.0...v1.17.0) (2025-07-22)
+
+### Features
+
+- add header navigation ([1b1f8fb](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/1b1f8fb8ed1cb832bf7bbe4c0ddc1418b9946ce3))
+
 # [1.16.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.15.0...v1.16.0) (2025-07-22)
 
 ### Features

package/README.md

@@ -78,7 +78,7 @@ nvm install
 2. To generate SSL certificates locally, run:
 
 ```sh
-./config/certs/ssl-generate.sh
+cd ./config/certs/ && ./ssl-generate.sh && cd ../../
 ```
 
 3. To install package dependencies, run:

package/package.json

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

package/src/development-bootstrap.tsx

@@ -18,7 +18,7 @@ if (devMode) {
     container.setAttribute('id', rootId)
     container.setAttribute(
       'class',
-      'bg-ai-dark fixed bottom-5 right-5 w-[27rem] h-[min(43rem,calc(100vh-2.5rem))] max-h-[calc(100vh-2.5rem)] z-10 rounded-[0.625rem] border border-neutral-800 shadow-lg overflow-hidden flex flex-col'
+      'bg-ai-dark fixed bottom-5 right-5 w-[27rem] h-[min(43rem,calc(100vh-2.5rem))] max-h-[calc(100vh-2.5rem)] z-10 rounded-[0.625rem] border border-neutral-200 shadow-lg overflow-hidden flex flex-col'
     )
 
     root?.appendChild(container)

package/src/lib/components/button/button.tsx

@@ -1,17 +1,33 @@
 import clsx from 'clsx'
-import type { HTMLAttributes, PropsWithChildren } from 'react'
+import type { ButtonHTMLAttributes, PropsWithChildren } from 'react'
+
+import { Spinner } from '../spinner'
 
 export type ButtonProps = PropsWithChildren<
-  HTMLAttributes<HTMLButtonElement> & {
+  ButtonHTMLAttributes<HTMLButtonElement> & {
     variant?: 'brand' | 'secondary' | 'primary' | 'tertiary' | 'gradient-outline'
+    show?: boolean
+    loading?: boolean
   }
 >
 
-function Button({ children, className, variant = 'brand', ...props }: ButtonProps) {
+function Button({
+  children,
+  className,
+  variant,
+  show = true,
+  loading = false,
+  ...props
+}: ButtonProps) {
   const defaultClasses =
     'rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 text-base font-medium'
   const defaultBorder = 'border border-transparent'
   const defaultPadding = 'px-4 py-2'
+  const disabledClasses = 'cursor-not-allowed'
+
+  const content = loading ? <Spinner className='h-full w-full text-current' /> : children
+
+  if (!show) return null
 
   switch (variant) {
     case 'gradient-outline':
@@ -22,11 +38,13 @@ function Button({ children, className, variant = 'brand', ...props }: ButtonProp
             'group relative inline-flex items-center justify-center overflow-hidden rounded-lg bg-gradient-to-br from-[var(--ai-color-gradient-primary)] to-[var(--ai-color-gradient-accent)] p-[1px] hover:text-neutral-1000 group-hover:from-[var(--ai-color-gradient-primary)] group-hover:to-[var(--ai-color-gradient-accent)]',
             className
           )}
-          {...props}>
+          {...props}
+          disabled={props.disabled || loading}
+          aria-busy={loading}>
           <span
             data-label='text-content'
             className='relative flex-1 rounded-lg bg-neutral-100 px-5 py-2.5 text-neutral-1000 transition-all duration-75 ease-in group-hover:bg-transparent'>
-            {children}
+            {content}
           </span>
         </button>
       )
@@ -40,8 +58,10 @@ function Button({ children, className, variant = 'brand', ...props }: ButtonProp
             'bg-primary-500 text-neutral-1000 hover:bg-primary-400 focus:outline-none',
             className
           )}
-          {...props}>
-          {children}
+          {...props}
+          disabled={props.disabled || loading}
+          aria-busy={loading}>
+          {content}
         </button>
       )
     case 'secondary':
@@ -54,8 +74,10 @@ function Button({ children, className, variant = 'brand', ...props }: ButtonProp
             'border-neutral-900 bg-transparent text-neutral-900 hover:bg-neutral-900 hover:text-neutral-100',
             className
           )}
-          {...props}>
-          {children}
+          {...props}
+          disabled={props.disabled || loading}
+          aria-busy={loading}>
+          {content}
         </button>
       )
     case 'tertiary':
@@ -68,12 +90,13 @@ function Button({ children, className, variant = 'brand', ...props }: ButtonProp
             'text-1000 bg-transparent hover:bg-neutral-900',
             className
           )}
-          {...props}>
-          {children}
+          {...props}
+          disabled={props.disabled || loading}
+          aria-busy={loading}>
+          {content}
         </button>
       )
     case 'brand':
-    default:
       return (
         <button
           className={clsx(
@@ -83,8 +106,28 @@ function Button({ children, className, variant = 'brand', ...props }: ButtonProp
             'rounded bg-neutral-900 text-neutral-100 outline-none hover:bg-neutral-800',
             className
           )}
-          {...props}>
-          {children}
+          {...props}
+          disabled={props.disabled || loading}
+          aria-busy={loading}>
+          {content}
+        </button>
+      )
+    default:
+      return (
+        <button
+          className={clsx(
+            'rounded-full p-2 outline-none transition-colors duration-300 ease-in',
+            {
+              'cursor-pointer ring-primary-500 hover:bg-neutral-300 focus:bg-neutral-300 focus-visible:ring-2':
+                !props.disabled,
+              [disabledClasses]: props.disabled
+            },
+            className
+          )}
+          {...props}
+          disabled={props.disabled || loading}
+          aria-busy={loading}>
+          {content}
         </button>
       )
   }

package/src/lib/components/icons/archive.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M14.5 1H1.5C0.65625 1 0 1.6875 0 2.5V4.5C0 4.78125 0.21875 5 0.5 5H1V13C1 14.125 1.875 15 3 15H13C14.0938 15 15 14.125 15 13V5H15.5C15.75 5 16 4.78125 16 4.5V2.5C16 1.6875 15.3125 1 14.5 1ZM14 13C14 13.5625 13.5312 14 13 14H3C2.4375 14 2 13.5625 2 13V5H14V13ZM15 4H1V2.5C1 2.25 1.21875 2 1.5 2H14.5C14.75 2 15 2.25 15 2.5V4ZM5.5 8H10.5C10.75 8 11 7.78125 11 7.5C11 7.25 10.75 7 10.5 7H5.5C5.21875 7 5 7.25 5 7.5C5 7.78125 5.21875 8 5.5 8Z"
+    fill="currentColor" />
+</svg>

package/src/lib/components/icons/arrow-left.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M3.99297 6.96303H15.0076V8.77293H3.99297L8.84708 13.627L7.5673 14.9068L0.528442 7.86798L7.5673 0.829102L8.84708 2.10889L3.99297 6.96303Z"
+    fill="currentColor" />
+</svg>

package/src/lib/components/icons/close.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M15.2656 15.3125C14.9844 15.5938 14.4688 15.5938 14.1875 15.3125L8 9.07812L1.76562 15.3125C1.48438 15.5938 0.96875 15.5938 0.6875 15.3125C0.40625 15.0312 0.40625 14.5156 0.6875 14.2344L6.92188 8L0.6875 1.8125C0.40625 1.53125 0.40625 1.01562 0.6875 0.734375C0.96875 0.453125 1.48438 0.453125 1.76562 0.734375L8 6.96875L14.1875 0.734375C14.4688 0.453125 14.9844 0.453125 15.2656 0.734375C15.5469 1.01562 15.5469 1.53125 15.2656 1.8125L9.03125 8L15.2656 14.2344C15.5469 14.5156 15.5469 15.0312 15.2656 15.3125Z"
+    fill="currentColor" />
+</svg>

package/src/lib/components/icons/icon-names.d.ts

@@ -1,2 +1,11 @@
 // Auto-generated file - DO NOT EDIT
-export type ValidIconNames = 'ai-color' | 'arrow-down' | 'chevron-down' | 'send' | 'stop'
+export type ValidIconNames =
+  | 'ai-color'
+  | 'archive'
+  | 'arrow-down'
+  | 'arrow-left'
+  | 'chevron-down'
+  | 'close'
+  | 'info'
+  | 'send'
+  | 'stop'

package/src/lib/components/icons/info.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M0 8.5C0 4.08172 3.58172 0.5 8 0.5C12.4183 0.5 16 4.08172 16 8.5C16 12.9183 12.4183 16.5 8 16.5C3.58172 16.5 0 12.9183 0 8.5ZM8 1.5C4.13401 1.5 1 4.63401 1 8.5C1 12.366 4.13401 15.5 8 15.5C11.866 15.5 15 12.366 15 8.5C15 4.63401 11.866 1.5 8 1.5ZM7 5.5C7 4.94772 7.44772 4.5 8 4.5C8.55229 4.5 9 4.94772 9 5.5C9 6.05228 8.55229 6.5 8 6.5C7.44772 6.5 7 6.05228 7 5.5ZM7 7.5H7.5C8.32843 7.5 9 8.17157 9 9V12.5H8V9C8 8.72386 7.77614 8.5 7.5 8.5H7V7.5Z"
+    fill="currentColor" />
+</svg>

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

@@ -4,7 +4,7 @@ import type { ChangeEvent, KeyboardEvent } from 'react'
 import { useTranslation } from 'react-i18next'
 import TextareaAutosize from 'react-textarea-autosize'
 
-import { Icon, Spinner } from '@/src/lib/components'
+import { Button, Icon } from '@/src/lib/components'
 
 import { useChatInputValueAtom } from './chat-input.atom'
 import type { ChatInputProps } from './types'
@@ -82,30 +82,20 @@ const ChatInput = forwardRef<HTMLTextAreaElement, ChatInputProps>(
           onKeyDown={handleKeyDown}
           disabled={inputDisabled}
         />
-        <button
+        <Button
           onClick={onSend}
           disabled={buttonDisabled || loading}
-          className={clsx(
-            'flex size-8 flex-col items-center justify-center rounded-full outline-none transition-colors duration-300 ease-in',
-            {
-              'cursor-pointer hover:scale-110 hover:bg-neutral-400 focus:bg-neutral-500 focus:outline-none focus:ring-1 focus:ring-neutral-0 focus:ring-offset-2':
-                !buttonDisabled,
-              'cursor-not-allowed': buttonDisabled
-            }
-          )}
+          className={clsx('flex size-8 flex-col items-center justify-center', {
+            'text-neutral-700': !buttonDisabled,
+            'text-neutral-400': buttonDisabled
+          })}
+          loading={loading}
           aria-label='Submit Button'>
-          {loading ? (
-            <Spinner className='h-5 w-5 text-neutral-600' />
-          ) : (
-            <Icon
-              name='send'
-              className={clsx('h-4 w-4 pr-0.5 pt-0.5 transition-colors duration-150', {
-                'text-neutral-700': !buttonDisabled,
-                'text-neutral-400': buttonDisabled
-              })}
-            />
-          )}
-        </button>
+          <Icon
+            name='send'
+            className='h-4 w-4 pr-0.5 pt-0.5 text-current transition-colors duration-150'
+          />
+        </Button>
       </div>
     )
   }

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

@@ -0,0 +1,17 @@
+import clsx from 'clsx'
+
+import { Icon } from '@/src/lib/components'
+
+function AIAvatarIcon({
+  className = 'rounded-full border-4 border-neutral-100 bg-neutral-200'
+}: {
+  className?: string
+}) {
+  return (
+    <div className={clsx('flex h-11 w-11 items-center justify-center', className)}>
+      <Icon name='ai-color' className='h-6 w-6' aria-label='AI avatar Icon' />
+    </div>
+  )
+}
+
+export default AIAvatarIcon

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

@@ -2,16 +2,21 @@ import clsx from 'clsx'
 
 import { Icon } from '@/src/lib/components'
 
-function AIAvatarIcon({
+import styles from './styles.module.css'
+
+export type AIAvatarProps = { className?: string }
+
+function AIAvatar({
   className = 'rounded-full border-4 border-neutral-100 bg-neutral-200'
-}: {
-  className?: string
-}) {
+}: AIAvatarProps) {
   return (
-    <div className={clsx('flex h-11 w-11 items-center justify-center', className)}>
-      <Icon name='ai-color' className='h-6 w-6' aria-label='AI avatar Icon' />
-    </div>
+    <figure
+      className={clsx('flex h-12 w-12 items-center justify-center rounded-full', styles.avatar)}>
+      <div className={clsx('flex h-11 w-11 items-center justify-center', className)}>
+        <Icon name='ai-color' className='h-6 w-6' aria-label='AI avatar Icon' />
+      </div>
+    </figure>
   )
 }
 
-export default AIAvatarIcon
+export default AIAvatar

package/src/modules/widget/components/ai-avatar/index.ts

@@ -1 +1,3 @@
-export { default as AIAvatarIcon } from './ai-avatar'
+export * from './ai-avatar'
+export { default as AIAvatar } from './ai-avatar'
+export { default as AIAvatarIcon } from './ai-avatar-icon'

package/src/modules/widget/components/ai-avatar/styles.module.css

@@ -0,0 +1,3 @@
+.avatar {
+  background: linear-gradient(90deg, #44d0ff 0%, #b48eff 100%);
+}

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

@@ -3,7 +3,12 @@ import { useRef } from 'react'
 import { isTextEmpty } from '@/src/lib/utils/is-text-empty'
 import { ChatInput, MessagesList, useChatInputValueAtom } from '@/src/modules/messages/components'
 import { useAllMessages, useSendTextMessage } from '@/src/modules/messages/hooks'
-import { useWidgetLoadingAtomValue, useWidgetTabsValueAtom } from '../../store'
+import {
+  useWidgetLoadingAtomValue,
+  useWidgetSettingsAtomValue,
+  useWidgetTabsValueAtom
+} from '../../store'
+import { WidgetHeader } from '../header'
 import { PageLayout } from '../page-layout'
 
 function ChatPage() {
@@ -13,6 +18,7 @@ function ChatPage() {
   const { messagesQuery } = useAllMessages()
   const widgetLoading = useWidgetLoadingAtomValue()
   const [value, setValue] = useChatInputValueAtom()
+  const settings = useWidgetSettingsAtomValue()
 
   const handleSendMessage = () => {
     const text = chatInputRef.current?.value ?? ''
@@ -39,7 +45,16 @@ function ChatPage() {
           buttonDisabled={messagesQuery?.isLoading || !value.trim()}
         />
       }>
-      <MessagesList />
+      <>
+        <div className='mt-4 px-6 py-4'>
+          <WidgetHeader
+            enabledButtons={['info', 'close']}
+            clubName={settings?.clubName}
+            tutorName={settings?.tutorName}
+          />
+        </div>
+        <MessagesList />
+      </>
     </PageLayout>
   )
 }

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

@@ -1,7 +1,7 @@
 import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
 
-import { AIAvatarIcon } from '../ai-avatar'
+import { AIAvatar } from '../ai-avatar'
 
 import styles from './styles.module.css'
 
@@ -16,13 +16,7 @@ function GreetingsCard({ author, tutorName }: GreetingsCardProps) {
   return (
     <div className='flex flex-col items-center justify-center text-neutral-900'>
       <div className='flex flex-col items-center justify-center gap-4 text-center'>
-        <figure
-          className={clsx(
-            'flex h-12 w-12 items-center justify-center rounded-full',
-            styles.avatar
-          )}>
-          <AIAvatarIcon />
-        </figure>
+        <AIAvatar />
         <div className='flex flex-col gap-2'>
           <span className='text-base font-light'>
             {t('general.greetings.hello', { name: author })}

package/src/modules/widget/components/greetings-card/styles.module.css

@@ -1,7 +1,3 @@
-.avatar {
-  background: linear-gradient(90deg, #44d0ff 0%, #b48eff 100%);
-}
-
 .faceTxt {
   composes: gradientText from '../../../../config/styles/utilities/text-utilities.module.css';
 }

package/src/modules/widget/components/header/__tests__/widget-header-props.builder.ts

@@ -0,0 +1,46 @@
+import type { ValidIconNames } from '@/src/lib/components/icons/icon-names'
+import type { WidgetHeaderProps } from '../types'
+
+class WidgetHeaderPropsBuilder implements WidgetHeaderProps {
+  enabledButtons: ValidIconNames[]
+  showContent?: boolean
+  showContentWithoutMeta?: boolean
+  clubName?: string
+  tutorName?: string
+
+  constructor() {
+    this.enabledButtons = ['close']
+  }
+
+  withEnabledButtons(enabledButtons: typeof this.enabledButtons) {
+    this.enabledButtons = enabledButtons
+
+    return this
+  }
+
+  withShowContent(showContent: typeof this.showContent) {
+    this.showContent = showContent
+
+    return this
+  }
+
+  withShowContentWithoutMeta(showContentWithoutMeta: typeof this.showContentWithoutMeta) {
+    this.showContentWithoutMeta = showContentWithoutMeta
+
+    return this
+  }
+
+  withClubName(clubName: typeof this.clubName) {
+    this.clubName = clubName
+
+    return this
+  }
+
+  withTutorName(tutorName: typeof this.tutorName) {
+    this.tutorName = tutorName
+
+    return this
+  }
+}
+
+export default WidgetHeaderPropsBuilder

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

@@ -0,0 +1,47 @@
+import { render, screen } from '@/src/config/tests'
+
+import WidgetHeaderPropsBuilder from './__tests__/widget-header-props.builder'
+import WidgetHeader from './header'
+
+describe('<WidgetHeader />', () => {
+  const defaultProps = new WidgetHeaderPropsBuilder()
+  const renderComponent = (props = defaultProps) => render(<WidgetHeader {...props} />)
+
+  it('should render the only the enabled button', () => {
+    renderComponent()
+
+    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()
+  })
+
+  it('should render WidgetHeaderContent when prop showContent is true', () => {
+    renderComponent()
+
+    expect(screen.getByText(/ai-color/i)).toBeInTheDocument()
+
+    expect(screen.queryByRole('button', { name: /Arrow Left Icon/i })).not.toBeInTheDocument()
+  })
+
+  it('should render WidgetHeaderContentWithoutMeta when prop showContentWithoutMeta is true and showContent is false', () => {
+    const props = new WidgetHeaderPropsBuilder()
+      .withShowContentWithoutMeta(true)
+      .withShowContent(false)
+
+    renderComponent(props)
+
+    expect(screen.getByRole('button', { name: /Arrow Left Icon/i })).toBeInTheDocument()
+
+    expect(screen.queryByText(/ai-color/i)).not.toBeInTheDocument()
+  })
+
+  it('should be able to render the remaining icons', () => {
+    const props = new WidgetHeaderPropsBuilder().withEnabledButtons(['archive', 'info'])
+
+    renderComponent(props)
+
+    expect(screen.getByRole('button', { name: /Archive Icon/i })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /Info Icon/i })).toBeInTheDocument()
+  })
+})

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

@@ -0,0 +1,69 @@
+import { Button, Icon } from '@/src/lib/components'
+import { TutorWidgetEvents } from '../../events'
+import { AIAvatar } from '../ai-avatar'
+
+import type { WidgetHeaderContentProps, WidgetHeaderProps } from './types'
+
+export function WidgetHeaderContent({ clubName, tutorName }: WidgetHeaderContentProps) {
+  return (
+    <div className='flex w-full gap-2'>
+      <AIAvatar />
+      <div className='flex flex-col'>
+        {tutorName && <h4 className='text-base'>{tutorName}</h4>}
+        {clubName && <p className='text-sm/normal text-neutral-600'>{clubName}</p>}
+      </div>
+    </div>
+  )
+}
+
+export function WidgetHeaderContentWithoutMeta({ name }: { name?: string }) {
+  return (
+    <div className='grid-areas-[a_b] grid grid-cols-[auto_1fr] items-center gap-1'>
+      <Button className='grid-area-[a]' aria-label='Arrow Left Icon'>
+        <Icon name='arrow-left' width={15} height={15} aria-hidden />
+      </Button>
+      <div className='grid-area-[b] flex justify-center'>
+        <span>{name}</span>
+      </div>
+    </div>
+  )
+}
+
+function WidgetHeader({
+  enabledButtons,
+  clubName,
+  tutorName,
+  showContentWithoutMeta,
+  showContent = true
+}: WidgetHeaderProps) {
+  return (
+    <div className='grid-areas-[a_b] mt-0.5 grid grid-cols-[1fr_auto] items-center text-neutral-1000'>
+      <div className='grid-area-[a]'>
+        {showContent && !showContentWithoutMeta && (
+          <WidgetHeaderContent clubName={clubName} tutorName={tutorName} />
+        )}
+        {showContentWithoutMeta && !showContent && (
+          <WidgetHeaderContentWithoutMeta name={tutorName} />
+        )}
+      </div>
+      <div className='shrink-0'>
+        <div className='grid-area-[b] ml-auto flex max-w-max gap-3 text-neutral-700'>
+          <Button show={enabledButtons.includes('archive')} aria-label='Archive Icon'>
+            <Icon name='archive' className='h-4 w-4' aria-hidden />
+          </Button>
+          <Button show={enabledButtons.includes('info')} aria-label='Info Icon'>
+            <Icon name='info' className='h-4 w-4' aria-hidden />
+          </Button>
+          <Button
+            show={enabledButtons.includes('close')}
+            onClick={() => TutorWidgetEvents['c3po-app-widget-hide'].dispatch()}
+            aria-label='Close Icon'>
+            <Icon name='close' className='h-4 w-4' aria-hidden />
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default WidgetHeader

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

@@ -0,0 +1,2 @@
+export * from './header'
+export { default as WidgetHeader } from './header'

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

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

package/src/modules/widget/components/index.ts

@@ -2,6 +2,7 @@ export * from './ai-avatar'
 export * from './chat-page'
 export * from './container'
 export * from './greetings-card'
+export * from './header'
 export * from './loading-page'
 export * from './page-layout'
 export * from './scroll-to-bottom-button'

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

@@ -9,6 +9,7 @@ import { ChatInput, useChatInputValueAtom } from '@/src/modules/messages/compone
 import { useSendTextMessage } from '@/src/modules/messages/hooks'
 import { useWidgetSettingsAtom, useWidgetTabsAtom } from '../../store'
 import { GreetingsCard } from '../greetings-card'
+import { WidgetHeader } from '../header'
 import { PageLayout } from '../page-layout'
 
 import styles from './styles.module.css'
@@ -57,12 +58,17 @@ 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 justify-center px-5 py-4',
-            styles.bg
-          )}>
-          <GreetingsCard author={settings?.author ?? ''} tutorName={settings?.tutorName ?? ''} />
+        <div className={clsx('grid-area-[a] flex min-h-0 flex-col px-5 py-4', styles.bg)}>
+          <WidgetHeader
+            enabledButtons={['archive', 'info', 'close']}
+            clubName={settings?.clubName}
+            tutorName={settings?.tutorName}
+            showContent={false}
+          />
+
+          <div className='my-auto'>
+            <GreetingsCard author={settings?.author ?? ''} tutorName={settings?.tutorName ?? ''} />
+          </div>
         </div>
         <div className='grid-area-[b] mx-5 my-6 flex flex-shrink-0 snap-x snap-mandatory gap-2 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'>
           <Button

package/src/modules/widget/events.ts

@@ -3,6 +3,7 @@ import type { ITutorWidgetEvent } from './types'
 export const TutorWidgetEventTypes = {
   OPEN: 'c3po-app-widget-open',
   CLOSE: 'c3po-app-widget-close',
+  HIDE: 'c3po-app-widget-hide',
   LOADED: 'tutor-app-widget-loaded'
 } as const
 
@@ -41,6 +42,22 @@ const TutorWidgetEventsObject = {
     dispatch: () => window.dispatchEvent(new CustomEvent(TutorWidgetEventTypes.CLOSE))
   } as ITutorWidgetEvent<void>,
 
+  [TutorWidgetEventTypes.HIDE]: {
+    name: TutorWidgetEventTypes.HIDE,
+    handler: (callback) => {
+      const listener: EventListener = () => {
+        void callback()
+      }
+
+      window.addEventListener(TutorWidgetEventTypes.HIDE, listener)
+
+      return () => {
+        window.removeEventListener(TutorWidgetEventTypes.HIDE, listener)
+      }
+    },
+    dispatch: () => window.dispatchEvent(new CustomEvent(TutorWidgetEventTypes.HIDE))
+  } as ITutorWidgetEvent<void>,
+
   [TutorWidgetEventTypes.LOADED]: {
     name: TutorWidgetEventTypes.LOADED,
     handler: (callback: (payload: { isSuccess: boolean }) => void) => {