app-tutor-ai-consumer 1.22.0 → 1.22.2

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## [1.22.2](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.22.1...v1.22.2) (2025-08-07)
+
+### Bug Fixes
+
+- header qa issues part 1 ([4910041](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/4910041905995e3b8161d015b261c82331131d20))
+- qa issues part 2 ([65d5eb6](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/65d5eb64768f7496a1f767a6d2bd9e614abef547))
+
+## [1.22.1](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.22.0...v1.22.1) (2025-08-06)
+
+### Bug Fixes
+
+- qa issues part 1 ([6b99c06](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/6b99c06114fee13fb4d4dd68e4888392007988a4))
+
 # [1.22.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.21.2...v1.22.0) (2025-08-04)
 
 ### Features

package/config/vitest/__mocks__/window.ts

@@ -0,0 +1,11 @@
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn()
+  }))
+})

package/config/vitest/vitest.config.mts

@@ -15,6 +15,7 @@ export default defineConfig({
       './config/vitest/__mocks__/icons.tsx',
       './config/vitest/__mocks__/animation-avatar.tsx',
       './config/vitest/__mocks__/intersection-observer.ts',
+      './config/vitest/__mocks__/window.ts',
       './config/vitest/polyfills/global.js'
     ],
     coverage: {

package/package.json

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

package/src/config/datahub/actions.ts

@@ -8,3 +8,9 @@ export const DataHubActions = {
 } as const
 
 export type DataHubActionTypes = (typeof DataHubActions)[keyof typeof DataHubActions]
+
+export const ActionNames = {
+  CLICK_HOTMART_TUTOR: `${DataHubActions.CLICK}_hotmart_tutor`,
+  CLICK_TUTOR_MINIMIZE: `${DataHubActions.CLICK}_tutor_minimize`,
+  TRY_PRODUCT_TUTOR: `${DataHubActions.TRY}_product_tutor`
+} as const

package/src/config/datahub/constants.ts

@@ -6,10 +6,6 @@ export const System = {
   HOTMART_CLUB: 'hotmart_club'
 } as const
 
-export const ActionNames = {
-  CLICK_HOTMART_TUTOR: 'click_hotmart_tutor'
-} as const
-
 export const ScreenNames = {
   NOT_APP_EVENT: 'NOT_APP_EVENT',
   HOME_CONSUMER: 'HOME_CONSUMER'
@@ -19,7 +15,7 @@ export const Platform = {
   WEB: 'WEB'
 } as const
 
-export const ResultType = {
+export const Result = {
   SUCCESS: 'SUCCESSFUL',
   FAILURE: 'FAILURE',
   FAILURE_DESCRIPTION: 'NOT_FAILURE_RESULT_EVENT'
@@ -27,7 +23,8 @@ export const ResultType = {
 
 export const ComponentNames = {
   BUTTON_LIKE_ANSWER: 'BUTTON_LIKE_ANSWER',
-  BUTTON_DISLIKE_ANSWER: 'BUTTON_DISLIKE_ANSWER'
+  BUTTON_DISLIKE_ANSWER: 'BUTTON_DISLIKE_ANSWER',
+  BUTTON_CLOSE_TUTOR_CHAT: 'BUTTON_CLOSE_TUTOR_CHAT'
 } as const
 
 export const ComponentSource = {

package/src/config/datahub/entities.ts

@@ -1,4 +1,5 @@
 export const DataHubEntities = {
   ADMIN: 'admin',
-  HOME: 'home'
+  HOME: 'home',
+  PRODUCT_CONSUME: 'product_consume'
 } as const

package/src/config/datahub/schemas/base-click-schema.ts

@@ -0,0 +1,48 @@
+import { ScreenNames } from '../constants'
+import { DataHubEntities } from '../entities'
+import type { ComponentNamesType, DataHubEntityTypes, ScreenNamesType } from '../types'
+
+import BaseSchema from './base-schema'
+
+export type BaseClickSchemaConstructorProps = {
+  componentName: ComponentNamesType
+  entity?: DataHubEntityTypes
+  isLogged?: boolean
+  screenName?: ScreenNamesType
+}
+
+abstract class BaseClickSchema extends BaseSchema {
+  protected componentName: ComponentNamesType
+  protected screenName: ScreenNamesType
+
+  entity: DataHubEntityTypes
+  isLogged: boolean
+
+  constructor(args: BaseClickSchemaConstructorProps) {
+    const {
+      componentName,
+      entity = DataHubEntities.HOME,
+      isLogged = true,
+      screenName = ScreenNames.HOME_CONSUMER
+    } = args
+
+    super()
+
+    this.componentName = componentName
+    this.entity = entity
+    this.isLogged = isLogged
+    this.screenName = screenName
+  }
+
+  prepare() {
+    return {
+      ...super.prepare(),
+      componentName: this.componentName,
+      entity: this.entity,
+      isLogged: this.isLogged,
+      screenName: this.screenName
+    }
+  }
+}
+
+export default BaseClickSchema

package/src/config/datahub/schemas/base-try-schema.ts

@@ -0,0 +1,64 @@
+import { HttpCodes } from '@/src/lib/utils'
+import { Result } from '../constants'
+import { DataHubEntities } from '../entities'
+import type { DataHubEntityTypes, ResultType } from '../types'
+
+import BaseSchema from './base-schema'
+
+export type BaseTrySchemaConstructorArgs = {
+  componentName: string
+  componentSource: string
+  entity?: DataHubEntityTypes
+  isLogged?: boolean
+  result?: ResultType
+  statusCode?: number
+  failureDescription?: string
+}
+
+abstract class BaseTrySchema extends BaseSchema {
+  private componentName: string
+  private componentSource: string
+  private failureDescription: string
+  private result: ResultType
+  private statusCode: number
+
+  entity: DataHubEntityTypes
+  isLogged: boolean
+
+  constructor(args: BaseTrySchemaConstructorArgs) {
+    const {
+      componentName,
+      componentSource,
+      entity = DataHubEntities.HOME,
+      failureDescription = Result.FAILURE_DESCRIPTION,
+      isLogged = true,
+      result = Result.SUCCESS,
+      statusCode = HttpCodes.OK
+    } = args
+
+    super()
+
+    this.componentName = componentName
+    this.componentSource = componentSource
+    this.entity = entity
+    this.failureDescription = failureDescription
+    this.isLogged = isLogged
+    this.result = result
+    this.statusCode = statusCode
+  }
+
+  prepare(): Record<string, unknown> {
+    return {
+      ...super.prepare(),
+      componentName: this.componentName,
+      componentSource: this.componentSource,
+      entity: this.entity,
+      failureDescription: this.failureDescription,
+      isLogged: this.isLogged,
+      result: this.result,
+      statusCode: this.statusCode
+    }
+  }
+}
+
+export default BaseTrySchema

package/src/config/datahub/schemas/tutor/__tests__/click-hotmart-tutor.spec.ts

@@ -1,6 +1,7 @@
 import { chance } from '@/src/config/tests'
 import { DataHubStore } from '../../..'
-import { ActionNames, ComponentNames, ScreenNames } from '../../../constants'
+import { ActionNames } from '../../../actions'
+import { ComponentNames, ScreenNames } from '../../../constants'
 import { DataHubEntities } from '../../../entities'
 import { UserRole } from '../../constants'
 import ClickHotmartTutor from '../click-hotmart-tutor'

package/src/config/datahub/schemas/tutor/click-hotmart-tutor.ts

@@ -1,4 +1,5 @@
-import { ActionNames, ComponentNames, ScreenNames } from '../../constants'
+import { ActionNames } from '../../actions'
+import { ComponentNames, ScreenNames } from '../../constants'
 import { DataHubEntities } from '../../entities'
 import type {
   ActionNamesType,

package/src/config/datahub/schemas/tutor/click-tutor-minimize.ts

@@ -0,0 +1,24 @@
+import { ActionNames } from '../../actions'
+import { ComponentNames } from '../../constants'
+import { DataHubEntities } from '../../entities'
+import type { ActionNamesType } from '../../types'
+import BaseClickSchema from '../base-click-schema'
+
+class ClickTutorMinimizeSchema extends BaseClickSchema {
+  action: ActionNamesType
+
+  constructor() {
+    super({ componentName: ComponentNames.BUTTON_CLOSE_TUTOR_CHAT })
+
+    this.action = ActionNames.CLICK_TUTOR_MINIMIZE
+    this.entity = DataHubEntities.PRODUCT_CONSUME
+  }
+
+  getDataHubEventData(): Record<string, unknown> {
+    return {
+      ...super.prepare()
+    }
+  }
+}
+
+export default ClickTutorMinimizeSchema

package/src/config/datahub/schemas/tutor/index.ts

@@ -1,3 +1,4 @@
 export { default as ClickHotmartTutor } from './click-hotmart-tutor'
+export { default as ClickTutorMinimizeSchema } from './click-tutor-minimize'
 export * from './constants'
 export * from './types'

package/src/config/datahub/schemas/tutor/try-product-tutor.ts

@@ -0,0 +1,24 @@
+import { ActionNames } from '../../actions'
+import type { ActionNamesType } from '../../types'
+import type { BaseTrySchemaConstructorArgs } from '../base-try-schema'
+import BaseTrySchema from '../base-try-schema'
+
+export type TryProductTutorConstructorArgs = BaseTrySchemaConstructorArgs
+
+class TryProductTutor extends BaseTrySchema {
+  action: ActionNamesType
+
+  constructor(args: TryProductTutorConstructorArgs) {
+    super(args)
+
+    this.action = ActionNames.TRY_PRODUCT_TUTOR
+  }
+
+  getDataHubEventData(): Record<string, unknown> {
+    return {
+      ...this.prepare()
+    }
+  }
+}
+
+export default TryProductTutor

package/src/config/datahub/types.ts

@@ -1,4 +1,5 @@
-import type { ActionNames, ComponentNames, Platform, ScreenNames, System } from './constants'
+import type { ActionNames } from './actions'
+import type { ComponentNames, Platform, Result, ScreenNames, System } from './constants'
 import type { DataHubEntities } from './entities'
 
 export type ActionNamesType = (typeof ActionNames)[keyof typeof ActionNames]
@@ -7,6 +8,7 @@ export type PlatformType = (typeof Platform)[keyof typeof Platform]
 export type SystemType = (typeof System)[keyof typeof System]
 export type ComponentNamesType = (typeof ComponentNames)[keyof typeof ComponentNames]
 export type ScreenNamesType = (typeof ScreenNames)[keyof typeof ScreenNames]
+export type ResultType = (typeof Result)[keyof typeof Result]
 
 export type SchemaType = {
   action: ActionNamesType

package/src/config/theme/constants.ts

@@ -0,0 +1,7 @@
+export const SCREEN_SIZES = {
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+  xxl: 1700
+} as const

package/src/development-bootstrap.tsx

@@ -23,6 +23,9 @@ if (devMode) {
       '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'
     )
 
+    // Theme setter
+    container.setAttribute('data-theme', 'dark')
+
     root?.appendChild(container)
 
     await window.startChatWidget(rootId, {

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

@@ -21,7 +21,7 @@ function ButtonDefault({
     <button
       {...props}
       className={clsx(
-        'rounded text-base font-medium outline-none focus-visible:ring-2 focus-visible:ring-blue-500',
+        'rounded text-base font-medium outline-none focus-visible:ring-2 focus-visible:ring-neutral-500',
         className
       )}
       type={props.type ?? 'button'}

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

@@ -58,9 +58,10 @@ function Button({
           show={show}
           className={clsx(
             className,
+            styles.gradientButton,
             'group relative inline-flex items-center justify-center overflow-hidden rounded-lg p-[1px]',
             {
-              'bg-gradient-to-br from-[var(--ai-color-gradient-primary)] to-[var(--ai-color-gradient-accent)] hover:text-neutral-1000 group-hover:from-[var(--ai-color-gradient-primary)] group-hover:to-[var(--ai-color-gradient-accent)]':
+              'bg-gradient-to-br from-[var(--ai-color-gradient-primary)] to-[var(--ai-color-gradient-accent)] hover:text-neutral-1000':
                 !loading,
               'shine-box cursor-not-allowed': loading
             }
@@ -68,8 +69,11 @@ function Button({
           <span
             data-label='text-content'
             className={clsx(
-              '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',
-              'flex flex-nowrap'
+              'rounded-lg transition-all duration-75 ease-in',
+              'px-5 py-2.5',
+              'text-neutral-1000',
+              'bg-[var(--gradient-btn-hover-background)] hover:bg-[linear-gradient(to_right,_rgb(from_var(--gradient-btn-hover-foreground)_r_g_b_/_var(--gradient-btn-hover-foreground-opacity)),_rgb(from_var(--gradient-btn-hover-foreground)_r_g_b_/_var(--gradient-btn-hover-foreground-opacity))),_linear-gradient(to_right,_var(--gradient-btn-hover-background),_var(--gradient-btn-hover-background))] group-hover:bg-[linear-gradient(to_right,_rgb(from_var(--gradient-btn-hover-foreground)_r_g_b_/_var(--gradient-btn-hover-foreground-opacity)),_rgb(from_var(--gradient-btn-hover-foreground)_r_g_b_/_var(--gradient-btn-hover-foreground-opacity))),_linear-gradient(to_right,_var(--gradient-btn-hover-background),_var(--gradient-btn-hover-background))]',
+              'flex flex-1 flex-nowrap'
             )}>
             <span className={clsx({ 'opacity-20': loading })}>{children}</span>
           </span>
@@ -94,20 +98,19 @@ function Button({
       )
     case 'secondary':
       return (
-        <button
+        <ButtonDefault
           className={clsx(
-            gridClasses,
             defaultPadding,
             defaultClasses,
             defaultBorder,
-            'border-neutral-900 bg-transparent text-neutral-900 hover:bg-neutral-900 hover:text-neutral-100',
+            'border-neutral-900 bg-transparent text-neutral-900 hover:bg-[rgb(from_var(--hc-color-neutral-900)_r_g_b_/_0.05)]',
             className
           )}
           {...props}
           disabled={props.disabled || loading}
           aria-busy={loading}>
           <ButtonContent loading={loading}>{children}</ButtonContent>
-        </button>
+        </ButtonDefault>
       )
     case 'tertiary':
       return (
@@ -125,9 +128,8 @@ function Button({
       )
     case 'brand':
       return (
-        <button
+        <ButtonDefault
           className={clsx(
-            gridClasses,
             defaultPadding,
             defaultClasses,
             defaultBorder,
@@ -138,15 +140,15 @@ function Button({
           disabled={props.disabled || loading}
           aria-busy={loading}>
           <ButtonContent loading={loading}>{children}</ButtonContent>
-        </button>
+        </ButtonDefault>
       )
     default:
       return (
-        <button
+        <ButtonDefault
           className={clsx(
-            'rounded-full outline-none transition-colors duration-300 ease-in',
+            'rounded-full outline-none transition-colors duration-100',
             {
-              'cursor-pointer ring-primary-500 hover:bg-neutral-300 focus:bg-neutral-300 focus-visible:ring-2':
+              'cursor-pointer hover:bg-neutral-300 hover:text-current focus:bg-neutral-300 focus:text-current':
                 !props.disabled,
               [disabledClasses]: props.disabled
             },
@@ -157,7 +159,7 @@ function Button({
           disabled={props.disabled || loading}
           aria-busy={loading}>
           <ButtonContent loading={loading}>{children}</ButtonContent>
-        </button>
+        </ButtonDefault>
       )
   }
 }

package/src/lib/components/button/styles.module.css

@@ -1,3 +1,9 @@
+.gradientButton {
+  --gradient-btn-hover-background: var(--hc-color-neutral-100);
+  --gradient-btn-hover-foreground: var(--hc-color-neutral-1000);
+  --gradient-btn-hover-foreground-opacity: 0.07;
+}
+
 .tertiary {
   &:hover {
     background-color: hsl(from currentColor h s calc(l - 30));

package/src/lib/components/errors/generic/generic-error.tsx

@@ -1,20 +1,17 @@
-import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
 
 import ErrorDarkSVG from '@/public/assets/svg/error-dark.svg?url'
 import ErrorLightSVG from '@/public/assets/svg/error-light.svg?url'
 import { Button } from '@/src/lib/components'
-import { PageLayout, TutorWidgetEvents, useWidgetSettingsAtom } from '@/src/modules/widget'
+import { PageLayout, TutorWidgetEvents } from '@/src/modules/widget'
 import { WidgetHeader } from '@/src/modules/widget/components/header'
 
-function GenericError() {
+function GenericError({ isDarkMode = false }: { isDarkMode?: boolean }) {
   const { t } = useTranslation()
-  const [settings] = useWidgetSettingsAtom()
-  const isDarkMode = settings?.config?.theme === 'dark'
 
   return (
     <PageLayout className='p-5'>
-      <WidgetHeader enabledButtons={['close']} showContent={false} />
+      <WidgetHeader enabledButtons={['close']} />
 
       <div className='flex h-full flex-col items-center justify-center p-10'>
         <div className='mb-8 flex flex-col items-center gap-1 text-center'>
@@ -26,38 +23,25 @@ function GenericError() {
             height={200}
           />
 
-          <h2
-            className={clsx('text-xl font-bold', {
-              'text-white': isDarkMode,
-              'text-gray-800': !isDarkMode
-            })}>
-            {t('generic_error.title')}
-          </h2>
-
-          <p
-            className={clsx('text-sm', {
-              'text-gray-400': isDarkMode,
-              'text-gray-500': !isDarkMode
-            })}>
-            {t('generic_error.description')}
-          </p>
+          <h2 className='text-xl font-bold text-neutral-900'>{t('generic_error.title')}</h2>
+          <p className='text-sm text-neutral-600'>{t('generic_error.description')}</p>
         </div>
 
         <div className='flex w-full flex-col gap-4'>
           <Button
             variant='brand'
-            className='w-full rounded-lg py-2'
+            className='mx-auto w-full max-w-max rounded-lg !px-9 py-2 !font-light'
             onClick={() => window.location.reload()}
             aria-label='Retry Button'>
-            <span className='font-light'>{t('general.buttons.try_again')}</span>
+            {t('general.buttons.try_again')}
           </Button>
 
           <Button
             variant='secondary'
-            className='w-full rounded-lg py-2'
+            className='mx-auto w-full max-w-max rounded-lg !px-9 py-2 !font-light'
             onClick={() => TutorWidgetEvents['c3po-app-widget-hide'].dispatch()}
             aria-label='Close Button'>
-            <span className='font-light'>{t('general.buttons.close')}</span>
+            {t('general.buttons.close')}
           </Button>
         </div>
       </div>

package/src/lib/components/icons/copy-solid.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 13 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M6.32585 0.734428H9.55762C9.88835 0.734428 10.2061 0.867241 10.4404 1.10162L12.2087 2.86984C12.443 3.10422 12.5758 3.42193 12.5758 3.75266V9.48443C12.5758 10.1745 12.0159 10.7344 11.3258 10.7344H6.32585C5.63574 10.7344 5.07585 10.1745 5.07585 9.48443V1.98443C5.07585 1.29432 5.63574 0.734428 6.32585 0.734428ZM2.15918 4.06776H4.24251V5.73443H2.57585V12.4011H7.57585V11.5678H9.24251V12.8178C9.24251 13.5079 8.68262 14.0678 7.99251 14.0678H2.15918C1.46908 14.0678 0.90918 13.5079 0.90918 12.8178V5.31776C0.90918 4.62766 1.46908 4.06776 2.15918 4.06776Z"
+    fill="currentColor" />
+</svg>

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

@@ -9,13 +9,17 @@ export type ValidIconNames =
   | 'chevron-down'
   | 'clone'
   | 'close'
+  | 'copy-solid'
   | 'copy'
   | 'double-check'
   | 'gallery'
   | 'info'
   | 'interrogation'
+  | 'like-solid'
   | 'like'
   | 'paste'
   | 'send'
+  | 'sparkle-tutor-light'
+  | 'sparkle-tutor'
   | 'stop'
   | 'warning'

package/src/lib/components/icons/like-solid.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M8.40316 0.426269C9.08024 0.565542 9.52034 1.24316 9.38493 1.93953L9.32503 2.24486C9.18701 2.95997 8.9318 3.64027 8.57503 4.25896H12.325C13.0151 4.25896 13.575 4.8348 13.575 5.54456C13.575 6.04005 13.3016 6.47126 12.9006 6.68553C13.1844 6.92122 13.3667 7.2828 13.3667 7.68723C13.3667 8.31396 12.9292 8.83623 12.3537 8.94872C12.4683 9.14424 12.5334 9.3719 12.5334 9.61563C12.5334 10.1861 12.1714 10.6709 11.6714 10.8369C11.6896 10.9253 11.7 11.0191 11.7 11.1155C11.7 11.8253 11.1401 12.4011 10.45 12.4011H7.91097C7.41618 12.4011 6.93441 12.2511 6.52295 11.9699L5.52034 11.2815C4.82503 10.8048 4.40837 10.0013 4.40837 9.14156V8.11576V6.83016V6.16326C4.40837 5.38118 4.75472 4.64464 5.34587 4.15451L5.53857 3.99649C6.22868 3.42868 6.70003 2.63054 6.87191 1.74133L6.9318 1.436C7.06722 0.739634 7.72607 0.286996 8.40316 0.426269ZM1.07503 4.6875H2.7417C3.20264 4.6875 3.57503 5.0705 3.57503 5.54456V11.544C3.57503 12.0181 3.20264 12.4011 2.7417 12.4011H1.07503C0.614095 12.4011 0.241699 12.0181 0.241699 11.544V5.54456C0.241699 5.0705 0.614095 4.6875 1.07503 4.6875Z"
+    fill="currentColor" />
+</svg>

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

@@ -1,3 +1,5 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0.459613 5.98654C0.0677077 5.85591 0.0646103 5.64514 0.467675 5.51078L14.7823 0.739229C15.1787 0.607109 15.406 0.828966 15.2949 1.21768L11.205 15.5324C11.0918 15.9287 10.8633 15.9425 10.6959 15.5657L7.99999 9.49997L12.5 3.50001L6.5 7.99997L0.459613 5.98654Z" fill="currentColor"/>
-</svg>
+<svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M13.1236 6.53816L1.66737 0.903633C1.43153 0.787637 1.2011 0.845082 1.02441 1.04583C0.842459 1.25255 0.772227 1.56418 0.928775 1.87216L3.08081 6.10592C3.41727 6.76784 3.41727 7.56083 3.08081 8.22275L0.928776 12.4565C0.772227 12.7645 0.842459 13.0761 1.02441 13.2828C1.2011 13.4836 1.43153 13.541 1.66737 13.425L13.1236 7.7905C13.3469 7.68066 13.4839 7.44778 13.4839 7.16433C13.4839 6.88089 13.3469 6.648 13.1236 6.53816ZM13.4723 5.82916L2.01609 0.194624C0.81102 -0.398066 -0.407713 0.986573 0.224422 2.23019L2.37646 6.46395C2.59855 6.90088 2.59855 7.42779 2.37646 7.86472L0.224423 12.0985C-0.407713 13.3421 0.811018 14.7267 2.01609 14.134L13.4723 8.49951C14.5412 7.9738 14.5412 6.35487 13.4723 5.82916Z"
+    fill="currentColor" />
+</svg>

package/src/lib/components/icons/sparkle-tutor-light.svg

@@ -0,0 +1,15 @@
+<svg viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="28" cy="28.05" r="27" stroke="url(#paint0_linear_23639_22377)" stroke-width="2"/>
+<circle cx="28" cy="28.05" r="23" fill="#E6E9ED"/>
+<path d="M12.3207 28.0869C12.2793 28.082 12.2793 28.0181 12.3207 28.0132C26.995 26.2646 27.3639 17.5043 27.9665 12.331C27.9713 12.2901 28.0287 12.2901 28.0335 12.331C28.6361 17.5043 29.005 26.2646 43.6793 28.0132C43.7207 28.0181 43.7207 28.082 43.6793 28.0869C29.005 29.8354 28.6361 38.5958 28.0335 43.7691C28.0287 43.81 27.9713 43.81 27.9665 43.7691C27.3639 38.5958 26.995 29.8354 12.3207 28.0869Z" fill="url(#paint1_linear_23639_22377)"/>
+<defs>
+<linearGradient id="paint0_linear_23639_22377" x1="0" y1="28.05" x2="56" y2="28.05" gradientUnits="userSpaceOnUse">
+<stop stop-color="#44D0FF"/>
+<stop offset="1" stop-color="#B48EFF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_23639_22377" x1="15" y1="11.8769" x2="40.3572" y2="44.2792" gradientUnits="userSpaceOnUse">
+<stop stop-color="#44D0FF"/>
+<stop offset="1" stop-color="#B48EFF"/>
+</linearGradient>
+</defs>
+</svg>

package/src/lib/components/icons/sparkle-tutor.svg

@@ -0,0 +1,19 @@
+<svg viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="28" cy="28" r="27" stroke="url(#paint0_linear_23573_147690)" stroke-width="2" />
+  <circle cx="28" cy="28" r="23" fill="#282C2F" />
+  <path
+    d="M12.3207 28.0368C12.2793 28.0319 12.2793 27.9681 12.3207 27.9632C26.995 26.2146 27.3639 17.4543 27.9665 12.2809C27.9713 12.24 28.0287 12.24 28.0335 12.2809C28.6361 17.4543 29.005 26.2146 43.6793 27.9632C43.7207 27.9681 43.7207 28.0319 43.6793 28.0368C29.005 29.7854 28.6361 38.5457 28.0335 43.7191C28.0287 43.76 27.9713 43.76 27.9665 43.7191C27.3639 38.5457 26.995 29.7854 12.3207 28.0368Z"
+    fill="url(#paint1_linear_23573_147690)" />
+  <defs>
+    <linearGradient id="paint0_linear_23573_147690" x1="0" y1="28" x2="56" y2="28"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#44D0FF" />
+      <stop offset="1" stop-color="#B48EFF" />
+    </linearGradient>
+    <linearGradient id="paint1_linear_23573_147690" x1="15" y1="11.8268" x2="40.3572" y2="44.2291"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#44D0FF" />
+      <stop offset="1" stop-color="#B48EFF" />
+    </linearGradient>
+  </defs>
+</svg>

package/src/lib/components/index.ts

@@ -4,3 +4,4 @@ export * from './horizontal-draggable-scroll'
 export * from './icons'
 export * from './markdownrenderer'
 export * from './spinner'
+export * from './tooltip'

package/src/lib/components/tooltip/index.ts

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

package/src/lib/components/tooltip/styles.module.css

@@ -0,0 +1,39 @@
+.triangle {
+  z-index: 5;
+
+  &:before {
+    content: '';
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-width: 0px 0.5rem 0.625rem 0.5rem;
+    border-color: transparent transparent var(--hc-color-neutral-300) transparent;
+    position: absolute;
+    z-index: 4;
+  }
+}
+
+.top:before {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%) rotateZ(180deg);
+}
+
+.right:before {
+  top: 50%;
+  right: 97%;
+  transform: translateY(-50%) rotateZ(-90deg);
+}
+
+.bottom:before {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.left:before {
+  top: 50%;
+  left: 97%;
+  transform: translateY(-50%) rotateZ(90deg);
+}