app-tutor-ai-consumer 1.43.0 → 1.44.0

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+# [1.44.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.43.1...v1.44.0) (2025-12-22)
+
+### Bug Fixes
+
+- animation icon ([b6c4f7c](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/b6c4f7c7815be5158cc30ed79cc1b4dd343c1a20))
+
+### Features
+
+- change ia icon disclaimer ([a45724c](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/a45724c262a6204bb5c556423a381fbb966d461f))
+- create circle ([6f7a660](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/6f7a660717426f1f6b918f155a44710c7c5cf4a1))
+- create ia icon cosmos ds ([1cc1f27](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/1cc1f2728dffc9c9591135d1862fe5341d95b2fc))
+- update ([54caf52](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/54caf527db88b299ffb003123ab454bf2f510330))
+- update ia-consumer ([1b97f6b](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/1b97f6b13ad38075919ea0a05d2afd1434918ee3))
+- update tutor ([809a465](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/809a465464fe5aba13a994bb7dcb9a7e73673fb7))
+- update unit test ([2ddb0e4](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/2ddb0e41e89f792355e34be4159889947e89a37d))
+- use new ai icon ([87dc20e](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/87dc20ec62374f729215b8f3bdfdcef85ea1ab2e))
+
+### Reverts
+
+- animation icon change ([b3f98a5](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/b3f98a55cc2557f061ee1e9b05d92ae0f958c562))
+
+## [1.43.1](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.43.0...v1.43.1) (2025-12-16)
+
 # [1.43.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.42.0...v1.43.0) (2025-12-02)
 
 ### Features

package/package.json

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

package/src/index.tsx

@@ -10,7 +10,7 @@ import { bootstrap } from './bootstrap'
 import { initTheme } from './config/theme'
 import { devMode, productionMode } from './lib/utils'
 import { SparkieService } from './modules/sparkie'
-import { createStore } from './modules/widget/store'
+import { createStore, widgetSettingsAtom } from './modules/widget/store'
 import type { Theme, WidgetSettingProps } from './types'
 import Wrapper from './wrapper'
 
@@ -54,6 +54,8 @@ window.startChatWidget = async (
   const widgetSettings = { ...settings, config: { ...settings.config, theme } }
   const store = createStore()
 
+  store.set(widgetSettingsAtom, widgetSettings)
+
   root.render(
     <Wrapper settings={widgetSettings} store={store} queryClient={queryClient} state={'LOADING'} />
   )

package/src/lib/components/ai-icon/ai-icon.builder.ts

@@ -0,0 +1,59 @@
+import { chance } from '@/src/config/tests'
+
+import type { AiIconProps } from './types'
+
+export class AiIconPropsBuilder implements AiIconProps {
+  animate?: boolean
+  color?: string
+  className?: string
+  size?: number
+  renderCustomAvatar?: boolean
+  customAvatarSize?: 'sm' | 'lg'
+
+  constructor() {
+    this.animate = false
+    this.size = 30
+    this.color = '#ffffff'
+    this.renderCustomAvatar = false
+    this.customAvatarSize = 'sm'
+  }
+
+  withAnimate(animate: boolean) {
+    this.animate = animate
+    return this
+  }
+
+  withSize(size: number) {
+    this.size = size
+    return this
+  }
+
+  withColor(color: string) {
+    this.color = color
+    return this
+  }
+
+  withClassName(className: string) {
+    this.className = className
+    return this
+  }
+
+  withRenderCustomAvatar(renderCustomAvatar: boolean) {
+    this.renderCustomAvatar = renderCustomAvatar
+    return this
+  }
+
+  withCustomAvatarSize(customAvatarSize: 'sm' | 'lg') {
+    this.customAvatarSize = customAvatarSize
+    return this
+  }
+
+  withRandomColor() {
+    this.color = chance.color({ format: 'hex' })
+    return this
+  }
+
+  build() {
+    return this
+  }
+}

package/src/lib/components/ai-icon/ai-icon.spec.tsx

@@ -0,0 +1,12 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { AiIcon } from './ai-icon'
+
+describe('AiIcon', () => {
+  it('should render the icon', () => {
+    render(<AiIcon />)
+
+    expect(screen.getByTestId('ai-icon')).toBeInTheDocument()
+  })
+})

package/src/lib/components/ai-icon/ai-icon.tsx

@@ -0,0 +1,43 @@
+import clsx from 'clsx'
+
+import type { AiIconProps } from './types'
+
+import styles from './styles.module.css'
+
+export function AiIcon({ animate = false, size, color, className, style, ...props }: AiIconProps) {
+  return (
+    <svg
+      data-test='ai-icon'
+      width={size}
+      height={size}
+      viewBox='0 0 96 96'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      className={className}
+      style={{ color, ...style }}
+      {...props}>
+      <defs>
+        <filter id='ai-icon-glow-light' x='-50%' y='-50%' width='200%' height='200%'>
+          <feGaussianBlur stdDeviation='8' result='coloredBlur' />
+          <feMerge>
+            <feMergeNode in='coloredBlur' />
+            <feMergeNode in='SourceGraphic' />
+          </feMerge>
+        </filter>
+      </defs>
+
+      <path
+        d='M.919 47.865c-.119-.014-.119-.197 0-.21C45.02 42.415 46.093 16.083 47.904.563c.014-.118.178-.118.192 0 1.81 15.52 2.883 41.852 46.986 47.09.118.014.118.197 0 .21-44.103 5.239-45.175 31.571-46.986 47.092-.014.117-.178.117-.192 0-1.81-15.52-2.883-41.853-46.985-47.091Z'
+        fill='currentColor'
+        fillOpacity='0.5'
+        className={clsx(styles.backLayer, animate && styles.backRotate)}
+        style={{ filter: animate ? `url(#ai-icon-glow-light)` : undefined }}
+      />
+
+      <path
+        d='M.919 47.865c-.119-.014-.119-.197 0-.21C45.02 42.415 46.093 16.083 47.904.563c.014-.118.178-.118.192 0 1.81 15.52 2.883 41.852 46.986 47.09.118.014.118.197 0 .21-44.103 5.239-45.175 31.571-46.986 47.092-.014.117-.178.117-.192 0-1.81-15.52-2.883-41.853-46.985-47.091Z'
+        fill='currentColor'
+      />
+    </svg>
+  )
+}

package/src/lib/components/ai-icon/index.ts

@@ -0,0 +1,2 @@
+export { AiIcon } from './ai-icon'
+export type { AiIconProps } from './types'

package/src/lib/components/ai-icon/styles.module.css

@@ -0,0 +1,47 @@
+@keyframes ai-icon-back-rotate {
+  0% {
+    opacity: 0.4;
+    transform: rotate(45deg) scale(0.9);
+  }
+  10% {
+    opacity: 0.7;
+    transform: rotate(135deg) scale(1.1);
+  }
+  25% {
+    opacity: 0.7;
+    transform: rotate(135deg) scale(1.1);
+  }
+  35% {
+    opacity: 0.7;
+    transform: rotate(225deg) scale(1.1);
+  }
+  50% {
+    opacity: 0.7;
+    transform: rotate(225deg) scale(1.1);
+  }
+  60% {
+    opacity: 0.7;
+    transform: rotate(315deg) scale(1.1);
+  }
+  75% {
+    opacity: 0.7;
+    transform: rotate(315deg) scale(1.1);
+  }
+  85% {
+    opacity: 0.4;
+    transform: rotate(405deg) scale(0.9);
+  }
+  100% {
+    opacity: 0.4;
+    transform: rotate(405deg) scale(0.9);
+  }
+}
+
+.backLayer {
+  transform-origin: center;
+  transform: rotate(45deg);
+}
+
+.backRotate {
+  animation: ai-icon-back-rotate 3s cubic-bezier(0.5, -0.5, 0, 1.5) infinite;
+}

package/src/lib/components/ai-icon/types.ts

@@ -0,0 +1,7 @@
+import type { SVGProps } from 'react'
+
+export interface AiIconProps extends SVGProps<SVGSVGElement> {
+  animate?: boolean
+  size?: number
+  color?: string
+}

package/src/lib/components/ai-icon-circle/ai-icon-circle.builder.ts

@@ -0,0 +1,50 @@
+import { chance } from '@/src/config/tests'
+
+import type { AiIconCircleProps } from './types'
+
+export class AiIconCirclePropsBuilder implements AiIconCircleProps {
+  size: number
+  animate?: boolean
+  className?: string
+  color?: string
+
+  constructor() {
+    this.size = 36
+    this.animate = false
+    this.color = '#ffffff'
+  }
+
+  withSize(size: number) {
+    this.size = size
+    return this
+  }
+
+  withAnimate(animate: boolean) {
+    this.animate = animate
+    return this
+  }
+
+  withClassName(className: string) {
+    this.className = className
+    return this
+  }
+
+  withColor(color: string) {
+    this.color = color
+    return this
+  }
+
+  withRandomSize() {
+    this.size = chance.integer({ min: 40, max: 200 })
+    return this
+  }
+
+  withRandomColor() {
+    this.color = chance.color({ format: 'hex' })
+    return this
+  }
+
+  build() {
+    return this
+  }
+}

package/src/lib/components/ai-icon-circle/ai-icon-circle.spec.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+
+import { AiIconCircle } from './ai-icon-circle'
+import { AiIconCirclePropsBuilder } from './ai-icon-circle.builder'
+
+describe('AiIconCircle', () => {
+  it('should render the component', () => {
+    const props = new AiIconCirclePropsBuilder().build()
+
+    render(<AiIconCircle {...props} />)
+
+    expect(screen.getByTestId('ai-icon-circle')).toBeInTheDocument()
+  })
+})

package/src/lib/components/ai-icon-circle/ai-icon-circle.tsx

@@ -0,0 +1,101 @@
+import clsx from 'clsx'
+
+import { useWidgetSettingsAtomValue } from '@/src/modules/widget/store'
+import { AiIcon } from '../ai-icon'
+
+import type { AiIconCircleProps } from './types'
+
+export function AiIconCircle({ size = 56, animate = false, className, color }: AiIconCircleProps) {
+  const settings = useWidgetSettingsAtomValue()
+  const theme = settings?.config?.theme || 'dark'
+  const customAvatarImg = settings?.avatar
+  const iconSize = size * 0.5
+  const isLightMode = theme === 'light'
+
+  if (customAvatarImg) {
+    return (
+      <div
+        data-test='ai-icon-circle'
+        className={clsx('overflow-hidden rounded-full', className)}
+        style={{
+          width: `${size}px`,
+          height: `${size}px`,
+          border: `1.5px solid ${color}`
+        }}>
+        <picture>
+          <source srcSet={customAvatarImg.webp} type='image/webp' />
+          <img src={customAvatarImg.original} alt='Avatar' className='h-full w-full object-cover' />
+        </picture>
+      </div>
+    )
+  }
+
+  return (
+    <div
+      data-test='ai-icon-circle'
+      className={clsx('relative', className)}
+      style={{ width: size, height: size }}>
+      <svg
+        width={size}
+        height={size}
+        viewBox='0 0 59 59'
+        fill='none'
+        xmlns='http://www.w3.org/2000/svg'
+        style={{ position: 'absolute', top: 0, left: 0 }}>
+        <rect x='0.75' y='0.75' width='57.5' height='57.5' rx='28.75' fill={color} />
+        <rect x='0.75' y='0.75' width='57.5' height='57.5' rx='28.75' fill='url(#paint0_linear)' />
+        <rect
+          x='0.75'
+          y='0.75'
+          width='57.5'
+          height='57.5'
+          rx='28.75'
+          stroke={color}
+          strokeWidth='1.5'
+        />
+        <rect
+          x='0.75'
+          y='0.75'
+          width='57.5'
+          height='57.5'
+          rx='28.75'
+          stroke='url(#paint1_linear)'
+          strokeOpacity='0.5'
+          strokeWidth='1.5'
+        />
+        <circle cx='29.5' cy='29.5' r='24' fill={isLightMode ? 'white' : 'black'} />
+        <defs>
+          <linearGradient
+            id='paint0_linear'
+            x1='29.5'
+            y1={isLightMode ? '57.5' : '1.5'}
+            x2='29.5'
+            y2={isLightMode ? '1.5' : '57.5'}
+            gradientUnits='userSpaceOnUse'>
+            <stop stopColor={isLightMode ? 'white' : '#090909'} stopOpacity='0.9' />
+            <stop offset='1' stopColor={isLightMode ? 'white' : '#090909'} stopOpacity='0.95' />
+          </linearGradient>
+          <linearGradient
+            id='paint1_linear'
+            x1='29.5'
+            y1={isLightMode ? '57.5' : '1.5'}
+            x2='29.5'
+            y2={isLightMode ? '1.5' : '57.5'}
+            gradientUnits='userSpaceOnUse'>
+            <stop stopColor={isLightMode ? 'white' : undefined} stopOpacity='0' />
+            <stop offset='1' stopColor={isLightMode ? 'white' : undefined} />
+          </linearGradient>
+        </defs>
+      </svg>
+
+      <div
+        className='absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center'
+        style={{
+          width: iconSize,
+          height: iconSize
+        }}>
+        <AiIcon animate={animate} size={iconSize} color={color} />
+      </div>
+    </div>
+  )
+}

package/src/lib/components/ai-icon-circle/index.ts

@@ -0,0 +1,2 @@
+export { AiIconCircle } from './ai-icon-circle'
+export type { AiIconCircleProps } from './types'

package/src/lib/components/ai-icon-circle/types.ts

@@ -0,0 +1,6 @@
+export interface AiIconCircleProps {
+  size?: number
+  animate?: boolean
+  className?: string
+  color?: string
+}

package/src/lib/components/index.ts

@@ -1,3 +1,5 @@
+export * from './ai-icon'
+export * from './ai-icon-circle'
 export * from './button'
 export * from './dropdown-actions'
 export * from './errors'

package/src/lib/utils/get-membership-color.ts

@@ -0,0 +1,12 @@
+import type { Theme } from '@/src/types'
+
+const DEFAULT_COLOR = '#a5a09f'
+
+export const getMembershipColor = (
+  darkTransformed?: string,
+  lightTransformed?: string,
+  theme?: Theme
+): string => {
+  const color = theme === 'dark' ? darkTransformed : lightTransformed
+  return color || DEFAULT_COLOR
+}

package/src/lib/utils/index.ts

@@ -1,6 +1,7 @@
 export * from './constants'
 export * from './copy-text-to-clipboard'
 export * from './extract-text-from-react-nodes'
+export * from './get-membership-color'
 export { default as HttpCodes } from './http-codes'
 export * from './is-theme-dark'
 export * from './languages'

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

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
 
-import { Icon } from '@/src/lib/components/icons'
+import { AiIcon } from '@/src/lib/components'
 
 const AIDisclaimer = () => {
   const { t } = useTranslation()
@@ -9,7 +9,7 @@ const AIDisclaimer = () => {
     <div className='mt-4 flex w-full items-center gap-1 text-xs text-neutral-500'>
       <p className='mb-0'>{t('ai_disclaimer.technology')}</p>
 
-      <Icon name='tutor-logo' className='inline-flex h-3 w-3 align-middle' />
+      <AiIcon className='inline-flex h-3 w-3 align-middle' />
 
       <p className='mb-0'>{t('ai_disclaimer.hotmart_ai')}</p>
     </div>

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

@@ -1,9 +1,12 @@
-const AVATAR_ANIMATION_URL = `${process.env.STATIC_URL}/tutor/web/tutor_sparkle.gif`
+import { AiIcon } from '@/src/lib/components'
+import { useMembershipColor } from '../../hooks'
 
 const AvatarAnimation = () => {
+  const membershipColor = useMembershipColor()
+
   return (
     <div className='flex h-11 w-11 items-center justify-center rounded-lg bg-neutral-300'>
-      <img src={AVATAR_ANIMATION_URL} alt='' aria-hidden className='max-w-[70%]' loading='lazy' />
+      <AiIcon size={30} animate aria-hidden color={membershipColor} />
     </div>
   )
 }

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

@@ -1,8 +1,9 @@
 import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
 
+import { AiIconCircle } from '@/src/lib/components'
+import { useMembershipColor } from '../../hooks'
 import { useIsAgentParentAtomValue } from '../../store'
-import { AIAvatar } from '../ai-avatar'
 
 export type GreetingsCardProps = {
   tutorName: string
@@ -13,11 +14,12 @@ export type GreetingsCardProps = {
 function GreetingsCard({ author, tutorName, isDarkTheme = false }: GreetingsCardProps) {
   const { t } = useTranslation()
   const isAgentMode = useIsAgentParentAtomValue()
+  const membershipColor = useMembershipColor()
 
   return (
     <div className='flex flex-col items-center justify-center'>
       <div className='max-md:hidden md:mb-4 md:block'>
-        <AIAvatar size='lg' />
+        <AiIconCircle size={56} color={membershipColor} />
       </div>
       <div className='flex flex-col items-center justify-center gap-4 text-center'>
         <div className='flex flex-col gap-2'>

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

@@ -24,7 +24,7 @@ describe('<WidgetHeader />', () => {
   it('should render WidgetHeaderContent when prop showContent is true', () => {
     renderComponent()
 
-    expect(screen.getByText(/sparkle-tutor-light/i)).toBeInTheDocument()
+    expect(screen.getByTestId(/ai-icon-circle/i)).toBeInTheDocument()
 
     expect(screen.queryByRole('button', { name: /Arrow Left Icon/i })).not.toBeInTheDocument()
   })

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

@@ -9,11 +9,11 @@ import {
   ClickTutorInfoSchema,
   ClickTutorMinimizeSchema
 } from '@/src/config/datahub/schemas/tutor'
-import { Button, Icon, Tooltip } from '@/src/lib/components'
+import { AiIconCircle, Button, Icon, Tooltip } from '@/src/lib/components'
 import { useMediaQuery } from '@/src/lib/hooks'
 import { TutorWidgetEvents } from '../../events'
+import { useMembershipColor } from '../../hooks'
 import { useWidgetGoBackTabAtom, useWidgetTabsAtom } from '../../store'
-import { AIAvatar } from '../ai-avatar'
 
 import type { WidgetHeaderProps } from './types'
 
@@ -91,6 +91,7 @@ function WidgetHeader({
 }: WidgetHeaderProps) {
   const { t } = useTranslation()
   const [, goBack] = useWidgetGoBackTabAtom()
+  const membershipColor = useMembershipColor()
   const name = tutorName ?? t('general.name')
 
   const handleHideWidget = () => {
@@ -144,7 +145,7 @@ function WidgetHeader({
           })}>
           {showContent && (
             <>
-              {!showContentWithoutMeta && <AIAvatar />}
+              {!showContentWithoutMeta && <AiIconCircle size={40} color={membershipColor} />}
               {name && <h4 className='text-sm/loose font-bold'>{name}</h4>}
             </>
           )}

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

@@ -1,8 +1,9 @@
 import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
 
+import { AiIconCircle } from '@/src/lib/components'
+import { useMembershipColor } from '../../hooks'
 import { useWidgetSettingsAtom } from '../../store'
-import { AIAvatar } from '../ai-avatar'
 import { WidgetHeader } from '../header'
 import { PageLayout } from '../page-layout'
 
@@ -12,6 +13,7 @@ import { InformationCard } from './information-card'
 function WidgetInformationPage() {
   const { t } = useTranslation()
   const [settings] = useWidgetSettingsAtom()
+  const membershipColor = useMembershipColor()
   const isDarkMode = settings?.config?.theme === 'dark'
   const tutorName = settings?.tutorName ?? t('general.name')
 
@@ -26,7 +28,7 @@ function WidgetInformationPage() {
 
         <div className='my-8 flex justify-center'>
           <div className='flex flex-col items-center gap-2'>
-            <AIAvatar size='lg' />
+            <AiIconCircle size={56} color={membershipColor} />
 
             <h3
               className={clsx('font-bold', {

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

@@ -5,7 +5,11 @@ import { ChatInput, MessageSkeleton } from '@/src/modules/messages/components'
 import { WidgetHeader } from '../header'
 import { PageLayout } from '../page-layout'
 
-function WidgetLoadingPage({ showHeader = true }: { showHeader?: boolean }) {
+type WidgetLoadingPageProps = {
+  showHeader?: boolean
+}
+
+function WidgetLoadingPage({ showHeader = true }: WidgetLoadingPageProps) {
   const chatInputRef = useRef<HTMLTextAreaElement>(null)
 
   const handler = useCallback((e: Event) => {

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

@@ -8,7 +8,7 @@ describe('<WidgetStarterPageContent />', () => {
   it('should render greetings card when not in agent mode', () => {
     renderComponent()
 
-    expect(screen.getByText(/sparkle-tutor-light/i)).toBeInTheDocument()
+    expect(screen.getByTestId('ai-icon-circle')).toBeInTheDocument()
     expect(screen.getByText(/general.greetings.hello/i)).toBeInTheDocument()
     expect(screen.getByText(/general.greetings.firstMessage/i)).toBeInTheDocument()
     expect(screen.getByText(/general.greetings.description/i)).toBeInTheDocument()

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

@@ -1,4 +1,5 @@
 export * from './use-listen-to-theme-change-event'
 export * from './use-listen-to-visibility-events'
+export * from './use-membership-color'
 export * from './use-send-view-chat-event'
 export * from './use-send-view-tutor-event'

package/src/modules/widget/hooks/use-membership-color/index.ts

@@ -0,0 +1 @@
+export * from './use-membership-color'

package/src/modules/widget/hooks/use-membership-color/use-membership-color.tsx

@@ -0,0 +1,12 @@
+import { getMembershipColor } from '@/src/lib/utils'
+import { useWidgetSettingsAtomValue } from '@/src/modules/widget/store'
+
+export const useMembershipColor = () => {
+  const settings = useWidgetSettingsAtomValue()
+
+  return getMembershipColor(
+    settings?.membershipPrimaryColor?.darkTransformed,
+    settings?.membershipPrimaryColor?.lightTransformed,
+    settings?.config?.theme
+  )
+}

package/src/types.ts

@@ -43,6 +43,11 @@ export type WidgetSettingProps = {
   productName: string
   sessionId: string
   membershipId?: string
+  membershipPrimaryColor?: {
+    darkTransformed: string
+    lightTransformed: string
+    original: string
+  }
   membershipSlug?: string
   userId?: string
   tutorName?: string