app-tutor-ai-consumer 1.15.0 → 1.17.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [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
+
+- add Theming capability ([b6801c7](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/b6801c7547c554718858f0d0cd0170917dc1228c))
+
 # [1.15.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.14.0...v1.15.0) (2025-07-21)
 
 ### Features

package/README.md

@@ -0,0 +1,180 @@
+# App Tutor AI Consumer ![Hotmart Brand](/docs/images/hotmart-brand.svg)
+
+Consumer components library for Hotmart Tutor Widget
+
+![Typescript](https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&logo=typescript&logoColor=white)
+![React](https://img.shields.io/badge/React-20232A?style=flat-square&logo=react&logoColor=61DAFB)
+![React Query](https://img.shields.io/badge/-React%20Query-FF4154?style=flat-square&logo=react%20query&logoColor=white)
+![Eslint](https://img.shields.io/badge/eslint-3A33D1?style=flat-square&logo=eslint&logoColor=white)
+![Prettier](https://img.shields.io/badge/prettier-1A2C34?style=flat-square&logo=prettier&logoColor=F7BA3E)
+![Vitest](https://img.shields.io/badge/vitest-6E9F18?style=flat-square&logo=vitest&logoColor=white)
+![Rspack](https://img.shields.io/badge/Rspack-ff8b00?style=flat-square&logo=esbuild&logoColor=white)
+![NPM](https://img.shields.io/badge/npm-CB3837?style=flat-square&logo=NPM&logoColor=white)
+![GitHub](https://img.shields.io/badge/GitHub%20Actions-212121?style=flat-square&logo=GitHub&logoColor=white)
+
+> Micro-frontend responsible for the Hotmart Tutor AI components and pages
+
+## Table of Contents
+
+- [App Tutor AI Consumer ](#app-tutor-ai-consumer-)
+  - [Table of Contents](#table-of-contents)
+  - [Installation](#installation)
+    - [Configuring](#configuring)
+    - [Node \& NPM](#node--npm)
+  - [Running locally](#running-locally)
+  - [Building](#building)
+  - [Technologies](#technologies)
+    - [Public Packages](#public-packages)
+    - [Private Packages](#private-packages)
+  - [Commits and PR's](#commits-and-prs)
+  - [Copyright](#copyright)
+
+---
+
+## Installation
+
+### Configuring
+
+- Download and install [Git](http://git-scm.com);
+- Download and install [NVM](https://github.com/nvm-sh/nvm);
+- Download and install [NodeJS and NPM](http://nodejs.org);
+- Create an `.npmrc` file at root of your user folder;
+
+```sh
+//registry.npmjs.org/:_authToken=<TOKEN>
+//npm.fontawesome.com/:_authToken=<TOKEN>
+@fortawesome:registry=https://npm.fontawesome.com/
+```
+
+- Configure `hotctl` in your computer. See how [here](https://github.com/Hotmart-Org/hotctl#instala%C3%A7%C3%A3o)
+- After configuration is done, execute the commands below and you good to go
+
+```sh
+hotctl sso login
+hotctl sso accounts apply -a
+hotctl codeartifact token --type npm --profile buildstaging
+```
+
+> Consult the code owners of to fill the .npmrc
+
+### Node & NPM
+
+Ensure that your node version is greater than what's specified in the repository root directory's `.nvmrc` file by running `node -v`
+
+You might need to install [NVM (Node Version Manager)](https://github.com/nvm-sh/nvm) and run:
+
+```sh
+nvm install
+```
+
+## Running locally
+
+1. Add the following line your `/etc/hosts` file:
+
+```sh
+127.0.0.1 local.buildstaging.com
+```
+
+2. To generate SSL certificates locally, run:
+
+```sh
+cd ./config/certs/ && ./ssl-generate.sh && cd ../../
+```
+
+3. To install package dependencies, run:
+
+```sh
+npm i
+```
+
+4. To fetch locale files from [api-languages](https://github.com/Hotmart-Org/api-languages):
+
+```sh
+npm run fetch-langs | npm run fetch-langs:local
+```
+
+5. To run the project:
+
+- inside a shell app:
+
+```sh
+npm run dev
+```
+
+- standalone mode:
+
+```sh
+npm run dev:local
+```
+
+## Building
+
+Building for `staging`:
+
+```sh
+npm run build:staging
+```
+
+Building for `production`
+
+```sh
+npm run build
+```
+
+[Back to top](#table-of-contents)
+
+## Technologies
+
+### Public Packages
+
+- [![React](https://img.shields.io/badge/React-20232A?style=flat-square&logo=react&logoColor=61DAFB)](https://github.com/facebook/react)
+- [![Typescript](https://img.shields.io/badge/TypeScript-007ACC?style=flat-square&logo=typescript&logoColor=white)](https://github.com/microsoft/TypeScript)
+- [![Vitest](https://img.shields.io/badge/vitest-6E9F18?style=flat-square&logo=vitest&logoColor=white)](https://vitest.dev)
+- [![Testing Library](https://img.shields.io/badge/Testing%20Library-E33332?style=flat-square&logo=Testing%20Library&logoColor=white)](https://testing-library.com)
+- [![MSW](https://img.shields.io/badge/MSW-ff6a33?style=flat-square&logo=gnu-bash&logoColor=white)](https://mswjs.io/)
+- [![Tanstack Query](https://img.shields.io/badge/Tanstack_Query-FF4154?style=flat-square&logo=ReactQuery&logoColor=white)](https://react-query.tanstack.com/)
+- [![Chance](https://img.shields.io/badge/chance-FF4154?style=flat-square&logo=nuget&logoColor=white)](https://github.com/chancejs/chancejs)
+
+### Private Packages
+
+- [DataHub](https://datahub-docs.buildstaging.com)
+
+[Back to top](#table-of-contents)
+
+## Commits and PR's
+
+To keep some pattern between commits we use [commitlint](https://github.com/conventional-changelog/commitlint). Please pay attention to the rules of the commit messages.
+
+Below there is the types accepted in commits:
+
+- build
+- chore
+- ci
+- docs
+- feat
+- fix
+- perf
+- refactor
+- revert
+- style
+- test
+
+All commits should be written in english and start with one of the types listed before:
+
+```sh
+feat: adding infinity load
+```
+
+or if want to specify the scope of the commit:
+
+```sh
+feat(widget): adding infinity load
+```
+
+[Back to top](#table-of-contents)
+
+## Copyright
+
+![Hotmart Brand](/docs/images/hotmart-brand.svg) &copy; 2025
+
+Made with ❤

package/docs/images/hotmart-brand.svg

@@ -0,0 +1,16 @@
+
+<svg width="71" height="22" viewBox="0 0 71 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Hotmart brand" clip-path="url(#clip0_878_7768)">
+<g id="Brand/Horizontal/Preto">
+<g id="Group">
+<path id="hotmart" fill-rule="evenodd" clip-rule="evenodd" d="M38.4769 9.13141C38.5234 9.13141 38.5688 9.16637 38.5688 9.22196V11.1627H40.1513C40.1922 11.1627 40.2435 11.1943 40.2435 11.2529V12.8286C40.2435 12.8854 40.1949 12.9183 40.1513 12.9183H38.5688V16.1394C38.5688 16.4731 38.7615 16.6762 39.2356 16.6762H40.1513C40.2131 16.6762 40.2435 16.7284 40.2435 16.7668V18.1517C40.2435 18.2019 40.2019 18.2295 40.1817 18.2369C39.6283 18.4409 39.3159 18.5625 38.6725 18.5625C37.0757 18.5625 36.4279 17.6482 36.4279 16.3571V12.9183H35.5271C35.4723 12.9183 35.435 12.874 35.435 12.8283V11.5932C35.435 11.5504 35.4677 11.5159 35.4991 11.507C35.5302 11.498 36.6924 11.1627 36.6924 11.1627C36.6924 11.1627 37.3242 9.22178 37.3336 9.19291C37.3429 9.16386 37.3762 9.13141 37.4213 9.13141H38.4769ZM69.2329 9.13141C69.2796 9.13141 69.3249 9.16637 69.3249 9.22196V11.1627H70.9076C70.9484 11.1627 70.9997 11.1943 70.9997 11.2529V12.8286C70.9997 12.8854 70.9512 12.9183 70.9076 12.9183H69.3249V16.1394C69.3249 16.4731 69.5177 16.6762 69.9919 16.6762H70.9076C70.9693 16.6762 70.9997 16.7284 70.9997 16.7668V18.1517C70.9997 18.2019 70.9581 18.2295 70.938 18.2369C70.3845 18.4409 70.0721 18.5625 69.4285 18.5625C67.8319 18.5625 67.1842 17.6482 67.1842 16.3571V12.9183H66.2833C66.2284 12.9183 66.1912 12.874 66.1912 12.8283V11.5932C66.1912 11.5504 66.224 11.5159 66.2553 11.507C66.2864 11.498 67.4486 11.1627 67.4486 11.1627C67.4486 11.1627 68.0804 9.22178 68.0896 9.19291C68.0991 9.16386 68.1325 9.13141 68.1775 9.13141H69.2329ZM56.4521 10.9824C58.3596 10.9824 59.4774 11.4291 59.4774 13.4173V18.2408C59.4774 18.2935 59.4318 18.3305 59.3848 18.3305H57.5024C57.4553 18.3287 57.4236 18.3006 57.4131 18.2639C57.4052 18.236 57.2899 17.8346 57.236 17.6473L57.2317 17.6332L57.1678 17.7094C56.6478 18.3025 55.9799 18.4744 55.182 18.4744C53.781 18.4744 53.0359 17.4226 53.0359 16.1836C53.0359 14.3106 54.4516 13.936 55.5098 13.936H57.3245V13.4622C57.3245 12.8787 56.8899 12.7491 55.2521 12.7438L55.1411 12.7436C54.411 12.7436 53.632 12.7995 53.5911 12.7995C53.5456 12.7995 53.4979 12.7609 53.4979 12.7096V11.402C53.4979 11.3554 53.5377 11.3207 53.5727 11.3141C54.602 11.1198 55.5499 10.9824 56.4521 10.9824ZM31.5262 10.9824C34.1509 10.9824 35.0721 12.4377 35.0721 14.7285C35.0721 17.0336 34.1509 18.4744 31.5262 18.4744C28.9164 18.4744 27.9954 17.0336 27.9954 14.7285C27.9954 12.4377 28.9164 10.9824 31.5262 10.9824ZM22.7817 8.25C22.8387 8.25 22.8736 8.29653 22.8736 8.34001V11.9278H22.9032C23.4208 11.291 24.2011 11.0011 25.0587 11.0011C26.5967 11.0011 27.0881 11.9858 27.0881 13.2892V18.2962C27.0881 18.3374 27.0534 18.3862 26.9962 18.3862H25.0439C24.9911 18.3862 24.9518 18.3427 24.9518 18.2962V13.4724C24.9518 12.9079 24.3489 12.7341 23.9644 12.7341C23.5799 12.7341 22.8736 12.9802 22.8736 13.6899V18.2962C22.8736 18.3334 22.8437 18.3862 22.7813 18.3862H20.8292C20.7865 18.3862 20.7373 18.3522 20.7373 18.2962V8.34001C20.7373 8.2933 20.7751 8.25 20.8292 8.25H22.7817ZM50.0899 10.9824C51.6349 10.9824 52.1286 11.9696 52.1286 13.2763V18.2958C52.1286 18.3489 52.0829 18.3862 52.0363 18.3862H50.063C50.0045 18.3862 49.9709 18.336 49.9709 18.2958V13.4937C49.9709 12.9277 49.4228 12.7085 49.0367 12.7085C48.588 12.7085 47.924 12.9859 47.8943 13.6245V18.2958C47.8943 18.3405 47.8605 18.3862 47.8016 18.3862H45.8273C45.7768 18.3862 45.7364 18.3426 45.7364 18.296V13.4937C45.7364 12.9277 45.1553 12.7085 44.7328 12.7085C44.3467 12.7085 43.6598 13.0004 43.6598 13.7117V18.2958C43.6598 18.3363 43.6267 18.3862 43.5687 18.3862H41.6054C41.5476 18.3862 41.5136 18.3372 41.5136 18.296V11.2179C41.5136 11.1668 41.5568 11.1277 41.606 11.1277H43.3785C43.4226 11.1277 43.4582 11.16 43.4665 11.1908C43.4749 11.2217 43.6715 11.9115 43.6715 11.9115H43.7011C44.2213 11.273 44.9937 10.9824 45.8554 10.9824C46.9104 10.9824 47.4188 11.447 47.7011 12.1583H47.7604C48.2955 11.2875 49.2282 10.9824 50.0899 10.9824ZM65.099 10.9824C65.1448 10.981 65.1932 11.0169 65.1932 11.0727V13.0469C65.1932 13.1018 65.1456 13.1381 65.1014 13.1381H64.6026C63.2589 13.1381 62.7897 13.6672 62.7897 14.3207V18.2958C62.7897 18.3537 62.7394 18.3862 62.6985 18.3862H60.7487C60.6987 18.3862 60.6569 18.3446 60.6569 18.2958V11.2167C60.6569 11.167 60.6999 11.1263 60.7483 11.1263H62.492C62.5405 11.1263 62.5748 11.1611 62.5823 11.201C62.5898 11.241 62.7897 12.3025 62.7897 12.3025H62.8193C63.2888 11.351 64.2624 11.0063 65.099 10.9824ZM57.3245 15.2184H56.142C55.5138 15.2184 55.1072 15.4508 55.1072 16.0937C55.1072 16.7904 55.6247 16.951 56.1236 16.951C56.5855 16.951 57.3245 16.6832 57.3245 15.79V15.2184ZM31.5262 12.7404C30.5021 12.7404 30.3137 13.4894 30.3137 14.7285C30.3137 15.9675 30.5021 16.7277 31.5262 16.7277C32.5647 16.7277 32.7536 15.9675 32.7536 14.7285C32.7536 13.4894 32.5647 12.7404 31.5262 12.7404Z" fill="#191C1F"/>
+<path id="fire" fill-rule="evenodd" clip-rule="evenodd" d="M8.22426 17.7318C6.10943 17.715 4.40935 16.0485 4.42672 14.0093C4.44409 11.9701 6.17261 10.3307 8.28726 10.3476C10.4021 10.3643 12.1022 12.031 12.0848 14.0701C12.0674 16.1093 10.3389 17.7487 8.22426 17.7318ZM16.5098 14.0339C16.6136 12.0731 15.9165 8.86349 14.2098 6.23999C14.1645 6.17194 14.0875 6.19884 14.1039 6.27081C14.2177 6.67074 14.2451 7.39328 13.5857 7.35053C12.4175 7.275 13.6265 4.86419 11.0609 3.19179C11.0096 3.1583 10.9482 3.20302 10.9763 3.25646C11.1522 3.5789 11.2568 4.58433 10.8503 4.92708C10.5242 5.20195 9.92563 5.12802 9.35013 4.22253C8.39091 2.71366 8.75505 1.10022 9.40685 0.0924685C9.45581 0.0171142 9.38874 -0.0128138 9.33295 0.00500047C5.80348 1.12819 5.09884 5.13889 4.34783 6.6018C4.22183 6.84692 4.11264 6.97518 3.89722 6.96129C3.25448 6.91978 3.71746 5.59743 3.94009 5.13711C3.97131 5.07227 3.89408 5.03646 3.85252 5.07832C2.0355 6.90945 0.390663 10.0269 0.0780651 12.9239C0.0880417 12.8553 0.0488746 13.1633 0.0298453 13.3888C0.0298453 13.389 0.0298453 13.3894 0.0298453 13.3894C0.0224553 13.4777 0.0163585 13.5663 0.0113702 13.655C0.00619724 13.761 0.00120898 13.8672 0.000285227 13.9742C-0.0372191 18.3704 3.6286 21.9636 8.18787 21.9997C12.7471 22.0359 16.4736 18.5015 16.5112 14.1053C16.5114 14.0813 16.5098 14.0578 16.5098 14.0339Z" fill="#191C1F"/>
+</g>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_878_7768">
+<rect width="71" height="22" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/package.json

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

package/public/index.html

@@ -11,7 +11,7 @@
     <title>App Tutor AI Consumer</title>
   </head>
 
-  <body class="bg-ai-dark">
+  <body>
     <div id="c3po-app-widget"></div>
   </body>
 </html>

package/src/config/styles/global.css

@@ -73,13 +73,17 @@
   --hc-color-neutral-800: #282c2f;
   --hc-color-neutral-900: #191c1f;
   --hc-color-neutral-1000: #000000;
+
+  /* Ai Colors */
   --ai-color-primary: #a095ec;
   --ai-color-secondary: #6ba1f0;
-  --ai-color-dark: #1a1c1f;
-  --ai-color-chat-response: #1e1926;
+  --ai-color-dark: var(--hc-color-neutral-100);
+  --ai-color-chat-response: rgb(from var(--ai-color-primary) r g b / 0.3);
   --ai-color-gradient-primary: #44d0ff;
   --ai-color-gradient-accent: #b48eff;
 
+  --ai-gradient-alpha: 0.6;
+
   /* Size */
   --hc-size-spacing-1: 0.25rem;
   --hc-size-spacing-2: 0.5rem;
@@ -97,7 +101,7 @@
   }
 
   & *::-webkit-scrollbar-thumb {
-    background: var(--hc-color-neutral-800);
+    background: var(--hc-color-neutral-200);
     border-radius: var(--hc-size-border-medium);
     border: calc(var(--hc-size-border-medium) / 2) solid transparent;
   }
@@ -190,4 +194,10 @@
   --hc-color-neutral-800: #e6e9ed;
   --hc-color-neutral-900: #f7f9fa;
   --hc-color-neutral-1000: #ffffff;
+
+  /* Ai Colors */
+  --ai-color-dark: #1a1c1f;
+  --ai-color-chat-response: #1e1926;
+
+  --ai-gradient-alpha: 0.1;
 }

package/src/config/styles/utilities/bg-utilities.module.css

@@ -2,10 +2,10 @@
   background:
     linear-gradient(
       186.9deg,
-      rgb(from var(--ai-color-primary) r g b / 0.1) 6.65%,
-      rgb(from var(--ai-color-secondary) r g b / 0.1) 28.99%,
-      rgb(from var(--ai-color-dark) r g b / 0.1) 46.97%,
-      rgb(from var(--hc-color-neutral-900) r g b / 0.8) 57.9%
+      rgb(from var(--ai-color-primary) r g b / var(--ai-gradient-alpha, 0.1)) 6.65%,
+      rgb(from var(--ai-color-secondary) r g b / var(--ai-gradient-alpha, 0.1)) 28.99%,
+      rgb(from var(--ai-color-dark) r g b / var(--ai-gradient-alpha, 0.1)) 46.97%,
+      rgb(from var(--hc-color-neutral-100) r g b / 0.8) 57.9%
     ),
-    linear-gradient(0deg, var(--hc-color-neutral-900), var(--hc-color-neutral-900));
+    linear-gradient(0deg, var(--hc-color-neutral-100), var(--hc-color-neutral-100));
 }

package/src/config/theme/index.ts

@@ -0,0 +1 @@
+export * from './init-theme'

package/src/config/theme/init-theme.ts

@@ -0,0 +1,7 @@
+import type { Theme } from '@/src/types'
+
+export function initTheme(theme?: Theme) {
+  if (theme === 'dark') return document.body.classList.add(theme, 'bg-ai-dark')
+
+  return document.body.classList.add('bg-neutral-100')
+}

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)
@@ -35,7 +35,10 @@ if (devMode) {
       clubName: 'comofazerumvideodeteste',
       productName: 'Curso de Assinatura',
       productId: 4266504,
-      sessionId: v4()
+      sessionId: v4(),
+      config: {
+        theme: 'dark'
+      }
     })
   })()
 }

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':
@@ -19,14 +35,16 @@ function Button({ children, className, variant = 'brand', ...props }: ButtonProp
         <button
           className={clsx(
             defaultClasses,
-            '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-0 group-hover:from-[var(--ai-color-gradient-primary)] group-hover:to-[var(--ai-color-gradient-accent)]',
+            '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-900 px-5 py-2.5 text-neutral-0 transition-all duration-75 ease-in group-hover:bg-transparent'>
-            {children}
+            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'>
+            {content}
           </span>
         </button>
       )
@@ -37,11 +55,13 @@ function Button({ children, className, variant = 'brand', ...props }: ButtonProp
             defaultPadding,
             defaultClasses,
             defaultBorder,
-            'bg-primary-500 text-neutral-0 hover:bg-primary-600 focus:outline-none',
+            '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':
@@ -51,11 +71,13 @@ function Button({ children, className, variant = 'brand', ...props }: ButtonProp
             defaultPadding,
             defaultClasses,
             defaultBorder,
-            'border-neutral-100 bg-transparent text-neutral-100 hover:bg-neutral-100 hover:text-neutral-900',
+            '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':
@@ -65,26 +87,47 @@ function Button({ children, className, variant = 'brand', ...props }: ButtonProp
             defaultPadding,
             defaultClasses,
             defaultBorder,
-            'bg-transparent text-neutral-0 hover:bg-neutral-900',
+            '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(
             defaultPadding,
             defaultClasses,
             defaultBorder,
-            'rounded bg-neutral-100 text-neutral-900 outline-none hover:bg-neutral-200',
+            'rounded bg-neutral-900 text-neutral-100 outline-none hover:bg-neutral-800',
+            className
+          )}
+          {...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}>
-          {children}
+          {...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'
@@ -62,7 +62,7 @@ const ChatInput = forwardRef<HTMLTextAreaElement, ChatInputProps>(
     return (
       <div
         className={clsx(
-          'flex items-center rounded-full border border-neutral-800 bg-neutral-900 px-4 py-2',
+          'flex items-center rounded-full border border-neutral-300 bg-neutral-100 px-4 py-2',
           { 'cursor-not-allowed opacity-40': inputDisabled }
         )}>
         <TextareaAutosize
@@ -71,7 +71,7 @@ const ChatInput = forwardRef<HTMLTextAreaElement, ChatInputProps>(
           ref={ref}
           className={clsx(
             clsx(
-              'max-h-12 w-full resize-none border-none bg-transparent text-neutral-100 outline-none outline-0 placeholder:text-neutral-400',
+              'max-h-12 w-full resize-none border-none bg-transparent text-neutral-900 outline-none outline-0 placeholder:text-neutral-600',
               styles.textArea
             ),
             { 'cursor-not-allowed opacity-40': inputDisabled }
@@ -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-600 focus:bg-neutral-700 focus:outline-none focus:ring-1 focus:ring-neutral-500 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-500' />
-          ) : (
-            <Icon
-              name='send'
-              className={clsx('h-4 w-4 pr-0.5 pt-0.5 transition-colors duration-150', {
-                'text-neutral-50': !buttonDisabled,
-                'text-neutral-500': 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/messages/components/message-item/message-item.tsx

@@ -14,9 +14,9 @@ function MessageItem({ message }: { message: ParsedMessage }) {
     <div
       data-test='messages-item'
       className={clsx(
-        'max-w-[min(80%,52rem)] overflow-x-hidden rounded-lg px-3 text-sm/normal text-neutral-50',
+        'max-w-[min(80%,52rem)] overflow-x-hidden rounded-lg px-3 text-sm/normal text-neutral-900',
         {
-          'self-end bg-neutral-800': message.metadata.author === 'user',
+          'self-end bg-neutral-200': message.metadata.author === 'user',
           'bg-ai-chat-response': message.metadata.author === 'ai'
         }
       )}>

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

@@ -10,9 +10,9 @@ const MessageSkeleton = forwardRef<HTMLDivElement>((_, ref) => {
       aria-label='Loading Component'>
       <AIAvatarIcon className='rounded-lg bg-ai-chat-response' />
       <div className='flex w-full flex-col items-start gap-2'>
-        <div className='h-3 w-full animate-pulse rounded-full bg-neutral-800 transition-colors' />
-        <div className='h-3 w-[83%] animate-pulse rounded-full bg-neutral-800 transition-colors delay-75' />
-        <div className='h-3 w-[56%] animate-pulse rounded-full bg-neutral-800 transition-colors delay-100' />
+        <div className='h-3 w-full animate-pulse rounded-full bg-neutral-200 transition-colors delay-0' />
+        <div className='h-3 w-[83%] animate-pulse rounded-full bg-neutral-200 transition-colors delay-75' />
+        <div className='h-3 w-[56%] animate-pulse rounded-full bg-neutral-200 transition-colors delay-100' />
       </div>
     </div>
   )

package/src/modules/messages/components/messages-list/messages-list.tsx

@@ -59,7 +59,7 @@ function MessagesList() {
 
       {allMessages?.map(([publishingDate, messages], i) => (
         <div key={i} className='flex flex-1 flex-col justify-center gap-6'>
-          <span className='self-center rounded-full border border-neutral-700 bg-neutral-800 px-4 py-2 text-xs capitalize text-neutral-50'>
+          <span className='self-center rounded-full border border-neutral-300 bg-neutral-200 px-4 py-2 text-xs capitalize text-neutral-900'>
             {publishingDate}
           </span>
           {messages.map((msg, k) => (

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({
-  className = 'rounded-full border-4 border-neutral-900 bg-neutral-800'
-}: {
-  className?: string
-}) {
+import styles from './styles.module.css'
+
+export type AIAvatarProps = { className?: string }
+
+function AIAvatar({
+  className = 'rounded-full border-4 border-neutral-100 bg-neutral-200'
+}: 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'
 
@@ -14,15 +14,9 @@ function GreetingsCard({ author, tutorName }: GreetingsCardProps) {
   const { t } = useTranslation()
 
   return (
-    <div className='flex flex-col items-center justify-center text-neutral-50'>
+    <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 })}
@@ -31,7 +25,7 @@ function GreetingsCard({ author, tutorName }: GreetingsCardProps) {
             {t('general.greetings.firstMessage', { tutorName })}
           </h3>
         </div>
-        <p className='text-sm font-normal text-neutral-400'>{t('general.greetings.description')}</p>
+        <p className='text-sm font-normal text-neutral-600'>{t('general.greetings.description')}</p>
       </div>
     </div>
   )

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/loading-page/loading-page.tsx

@@ -6,11 +6,13 @@ import {
   MessageSkeleton,
   useChatInputValueAtom
 } from '@/src/modules/messages/components'
+import { useWidgetSettingsAtomValue } from '../../store'
 import { PageLayout } from '../page-layout'
 
 function WidgetLoadingPage() {
   const chatInputRef = useRef<HTMLTextAreaElement>(null)
   const [, setChatInputValue] = useChatInputValueAtom()
+  const settings = useWidgetSettingsAtomValue()
 
   const handler = useCallback(
     (e: Event) => {
@@ -31,9 +33,11 @@ function WidgetLoadingPage() {
   return (
     <PageLayout
       asideChild={<ChatInput name='new-chat-msg-input' ref={chatInputRef} loading={true} />}>
-      <div className='flex h-full flex-col justify-end px-5 py-4'>
-        <MessageSkeleton />
-      </div>
+      {settings?.config?.theme && (
+        <div className='flex h-full flex-col justify-end px-5 py-4'>
+          <MessageSkeleton />
+        </div>
+      )}
     </PageLayout>
   )
 }

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

@@ -23,7 +23,7 @@ function PageLayout({ asideChild, children, className }: PageLayoutProps) {
         {children}
       </div>
       {asideChild && (
-        <div className='grid-area-[aside] flex-shrink-0 border-t border-t-neutral-700 px-5 py-4'>
+        <div className='grid-area-[aside] flex-shrink-0 border-t border-t-neutral-300 px-5 py-4'>
           {asideChild}
         </div>
       )}

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-600 text-sm text-neutral-50 outline-none transition-colors duration-300 ease-in hover:scale-110 hover:bg-neutral-700 focus:outline-none focus:ring-neutral-500 focus:ring-offset-2 focus-visible:ring-2 active:ring-2',
-        { 'opacity-85': show, 'pointer-events-none opacity-0': !show },
+        '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 },
         className
       )}
       onClick={onClick}

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'
@@ -17,7 +18,7 @@ function WidgetStarterPage() {
   const { t } = useTranslation()
   const [settings] = useWidgetSettingsAtom()
   const chatInputRef = useRef<HTMLTextAreaElement>(null)
-  const [, setChatInputValue] = useChatInputValueAtom()
+  const [chatInputValue, setChatInputValue] = useChatInputValueAtom()
   const [, setWidgetTabs] = useWidgetTabsAtom()
   const sendTextMessageMutation = useSendTextMessage()
 
@@ -53,15 +54,21 @@ function WidgetStarterPage() {
           name='new-chat-msg-input'
           ref={chatInputRef}
           onSend={() => setWidgetTabs('chat')}
+          buttonDisabled={!chatInputValue.trim()}
         />
       }>
       <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) => {

package/src/modules/widget/hooks/use-init-widget/use-init-widget.tsx

@@ -2,12 +2,14 @@ import { useEffect, useState } from 'react'
 
 import { initDayjs } from '@/src/config/dayjs'
 import { initAxios } from '@/src/config/request/api'
+import { initTheme } from '@/src/config/theme'
 import { SparkieService } from '@/src/modules/sparkie'
 import type { WidgetSettingProps } from '@/src/types'
 import { TutorWidgetEvents } from '../../events'
 
 const init = async (settings: WidgetSettingProps) => {
   try {
+    initTheme(settings.config?.theme)
     initAxios(settings.hotmartToken)
     await initDayjs(settings.locale)
     await SparkieService.initSparkie({

package/src/types.ts

@@ -26,6 +26,8 @@ export enum ClassTypes {
   Other = 'OTHER'
 }
 
+export type Theme = 'light' | 'dark'
+
 export type WidgetSettingProps = {
   hotmartToken: string
   locale: ILanguages
@@ -47,6 +49,9 @@ export type WidgetSettingProps = {
   current_media_codes?: string
   productType?: string
   classType?: ClassTypes
+  config?: {
+    theme?: Theme
+  }
 }
 
 export interface ICustomEvent<T = object> {

package/tailwind.config.js

@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{js,ts,jsx,tsx}', './public/**/*.html'],
+  darkMode: 'class',
   theme: {
     extend: {
       colors: {

package/docs/README.md

@@ -1,15 +0,0 @@
-# app-tutor-ai-consumer
-
-Consumer components library for Hotmart Tutor Widget
-
----
-## Components
-
-### component 1
-
-Description of component 1
-
-Example of usage:
-```
-...put a code example here
-```