app-tutor-ai-consumer 1.16.0 → 1.18.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [1.18.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.17.0...v1.18.0) (2025-07-24)
+
+### Features
+
+- add info button onclick ([84dda83](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/84dda83f12399fc785fecae8927a1404cb1d2dae))
+- add information page ([20996ab](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/20996ab224d07e6a44cf27037f7b35b7373aa307))
+
+# [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.18.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/book.svg

@@ -0,0 +1,14 @@
+<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_18455_21368)">
+<path d="M15.75 14.2358H4.5C4.08579 14.2358 3.75 14.5716 3.75 14.9858C3.75 15.4001 4.08579 15.7358 4.5 15.7358H15.75V17.2358H4.5C3.25736 17.2358 2.25 16.2285 2.25 14.9858V3.73584C2.25 2.90741 2.92157 2.23584 3.75 2.23584H15.75V14.2358ZM3.75 12.7733C3.87117 12.7487 3.99658 12.7358 4.125 12.7358H14.25V3.73584H3.75V12.7733ZM12 7.48584H6V5.98584H12V7.48584Z" fill="url(#paint0_linear_18455_21368)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_18455_21368" x1="2.25" y1="9.73584" x2="15.75" y2="9.73584" gradientUnits="userSpaceOnUse">
+<stop stop-color="#44D0FF"/>
+<stop offset="1" stop-color="#B48EFF"/>
+</linearGradient>
+<clipPath id="clip0_18455_21368">
+<rect width="18" height="18" fill="white" transform="translate(0 0.73584)"/>
+</clipPath>
+</defs>
+</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,14 @@
 // 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'
+  | 'warning'
+  | 'interrogation'
+  | 'book'

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/lib/components/icons/interrogation.svg

@@ -0,0 +1,9 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 0.73584C3.5625 0.73584 0 4.32959 0 8.73584C0 13.1733 3.5625 16.7358 8 16.7358C12.4062 16.7358 16 13.1733 16 8.73584C16 4.32959 12.4062 0.73584 8 0.73584ZM8 15.7358C4.125 15.7358 1 12.6108 1 8.73584C1 4.89209 4.125 1.73584 8 1.73584C11.8438 1.73584 15 4.89209 15 8.73584C15 12.6108 11.8438 15.7358 8 15.7358ZM7.5 11.4858C7.0625 11.4858 6.75 11.8296 6.75 12.2358C6.75 12.6733 7.0625 12.9858 7.5 12.9858C7.90625 12.9858 8.25 12.6733 8.25 12.2358C8.25 11.8296 7.90625 11.4858 7.5 11.4858ZM8.90625 4.73584H7.0625C5.90625 4.73584 5 5.67334 5 6.82959V7.11084C5 7.39209 5.21875 7.61084 5.5 7.61084C5.75 7.61084 6 7.39209 6 7.11084V6.82959C6 6.23584 6.46875 5.73584 7.0625 5.73584H8.90625C9.5 5.73584 10 6.23584 10 6.82959C10 7.20459 9.78125 7.57959 9.4375 7.76709L7.5625 8.70459C7.21875 8.89209 7 9.26709 7 9.67334V10.2358C7 10.5171 7.21875 10.7358 7.5 10.7358C7.75 10.7358 8 10.5171 8 10.2358V9.67334C8 9.64209 8 9.61084 8.03125 9.57959L9.90625 8.64209C10.5625 8.26709 11 7.57959 11 6.82959C11 5.67334 10.0625 4.73584 8.90625 4.73584Z" fill="url(#paint0_linear_21475_7939)"/>
+<defs>
+<linearGradient id="paint0_linear_21475_7939" x1="0" y1="8.73584" x2="16" y2="8.73584" gradientUnits="userSpaceOnUse">
+<stop stop-color="#44D0FF"/>
+<stop offset="1" stop-color="#B48EFF"/>
+</linearGradient>
+</defs>
+</svg>

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

@@ -0,0 +1,9 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 11.3193C7.5625 11.3193 7.25 11.6631 7.25 12.0693C7.25 12.5068 7.59375 12.8193 8 12.8193C8.40625 12.8193 8.71875 12.5068 8.71875 12.0693C8.75 11.6631 8.40625 11.3193 8 11.3193ZM8 10.0693C8.25 10.0693 8.46875 9.85059 8.46875 9.56934V5.06934C8.46875 4.81934 8.21875 4.56934 8 4.56934C7.75 4.56934 7.5 4.81934 7.5 5.06934V9.56934C7.5 9.85059 7.71875 10.0693 8 10.0693ZM15.75 12.5068L9.5 1.94434C9.1875 1.41309 8.625 1.10059 8 1.06934C7.34375 1.06934 6.78125 1.41309 6.46875 1.94434L0.21875 12.5068C-0.09375 13.0381 -0.09375 13.6631 0.21875 14.1943C0.53125 14.7568 1.09375 15.0693 1.75 15.0693H14.25C14.875 15.0693 15.4375 14.7568 15.75 14.1943C16.0625 13.6631 16.0625 13.0381 15.75 12.5068ZM14.875 13.6943C14.75 13.9443 14.5 14.0693 14.2188 14.0693H1.75C1.46875 14.0693 1.21875 13.9443 1.09375 13.6943C0.9375 13.4756 0.96875 13.2256 1.09375 13.0068L7.34375 2.44434C7.46875 2.22559 7.71875 2.06934 8 2.06934C8.25 2.10059 8.5 2.22559 8.625 2.44434L14.875 13.0068C15 13.2256 15.0312 13.4756 14.875 13.6943Z" fill="url(#paint0_linear_21475_9749)"/>
+<defs>
+<linearGradient id="paint0_linear_21475_9749" x1="-0.015625" y1="8.06934" x2="15.9844" y2="8.06934" gradientUnits="userSpaceOnUse">
+<stop stop-color="#44D0FF"/>
+<stop offset="1" stop-color="#B48EFF"/>
+</linearGradient>
+</defs>
+</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/constants.tsx

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

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,75 @@
+import { Button, Icon } from '@/src/lib/components'
+import { TutorWidgetEvents } from '../../events'
+import { useWidgetTabsAtom } from '../../store'
+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) {
+  const [, setWidgetTabs] = useWidgetTabsAtom()
+
+  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'
+            onClick={() => setWidgetTabs('information')}>
+            <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/information-page/constants.ts

@@ -0,0 +1,17 @@
+import type { ValidIconNames } from '@/src/lib/components/icons/icon-names'
+
+type InfoItem = {
+  icon: ValidIconNames
+  titleKey: string
+  descKey: string
+}
+
+export const infoItems: InfoItem[] = [
+  {
+    icon: 'interrogation',
+    titleKey: 'info.what_it_does_question',
+    descKey: 'info.what_it_does_answer'
+  },
+  { icon: 'book', titleKey: 'info.how_it_learns_question', descKey: 'info.how_it_learns_answer' },
+  { icon: 'warning', titleKey: 'info.limitations_question', descKey: 'info.limitations_answer' }
+]

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

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

package/src/modules/widget/components/information-page/information-card/index.ts

@@ -0,0 +1 @@
+export { default as InformationCard } from './information-card'

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

@@ -0,0 +1,25 @@
+import { Icon } from '@/src/lib/components'
+import type { ValidIconNames } from '@/src/lib/components/icons/icon-names'
+
+export type InformationCardProps = {
+  icon: ValidIconNames
+  title: string
+  description: string
+}
+
+function InformationCard({ icon, title, description }: InformationCardProps) {
+  return (
+    <div className='flex gap-3 border-b border-white/10 pb-5 last:border-none'>
+      <div className='flex h-5 w-5 items-start justify-center'>
+        <Icon name={icon} width={16} height={16} />
+      </div>
+
+      <div className='flex flex-col gap-1'>
+        <p className='text-sm font-bold'>{title}</p>
+        <p className='text-xs text-gray-300'>{description}</p>
+      </div>
+    </div>
+  )
+}
+
+export default InformationCard

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

@@ -0,0 +1,50 @@
+import { useTranslation } from 'react-i18next'
+
+import { Icon } from '@/src/lib/components'
+import { useWidgetSettingsAtom, useWidgetTabsAtom } from '../../store'
+import { AIAvatar } from '../ai-avatar'
+import { PageLayout } from '../page-layout'
+
+import { infoItems } from './constants'
+import { InformationCard } from './information-card'
+
+function WidgetInformationPage() {
+  const { t } = useTranslation()
+  const [, setWidgetTabs] = useWidgetTabsAtom()
+  const [settings] = useWidgetSettingsAtom()
+
+  return (
+    <PageLayout className='p-5 text-white'>
+      <div className='relative mb-8 flex h-12 items-center justify-center'>
+        <button
+          className='absolute left-0'
+          aria-label='Return Button'
+          onClick={() => setWidgetTabs('chat')}>
+          <Icon name='arrow-left' width={16} height={16} />
+        </button>
+        <h1 className='mx-auto font-bold'>{t('info.title')}</h1>
+      </div>
+
+      <div className='mb-8 flex justify-center'>
+        <div className='flex flex-col items-center gap-2'>
+          <AIAvatar />
+
+          <h3 className='font-bold'>{settings?.tutorName ?? ''}</h3>
+        </div>
+      </div>
+
+      <div className='flex flex-col gap-5'>
+        {infoItems.map((item) => (
+          <InformationCard
+            key={item.titleKey}
+            icon={item.icon}
+            title={t(item.titleKey)}
+            description={t(item.descKey)}
+          />
+        ))}
+      </div>
+    </PageLayout>
+  )
+}
+
+export default WidgetInformationPage

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) => {