app-tutor-ai-consumer 1.2.0 → 1.3.0

package/src/modules/sparkie/utils/validate-firebase-config.spec.ts

@@ -0,0 +1,17 @@
+import { firebaseConfig } from '../constants'
+
+import { validateFirebaseConfig } from './validate-firebase-config'
+
+describe('validateFirebaseConfig', () => {
+  it('should return true when all required configs are defined', () => {
+    expect(validateFirebaseConfig()).toBe(true)
+  })
+
+  it('should return false when firebase any process variable is undefined', () => {
+    Object.defineProperty(firebaseConfig, 'apiKey', {
+      value: undefined
+    })
+
+    expect(validateFirebaseConfig()).toBe(false)
+  })
+})

package/src/modules/sparkie/utils/validate-firebase-config.ts

@@ -0,0 +1,12 @@
+import { firebaseConfig, firebaseConfigRequiredFields } from '../constants'
+
+export const validateFirebaseConfig = () => {
+  for (const field of firebaseConfigRequiredFields) {
+    if (!firebaseConfig[field as keyof typeof firebaseConfig]) {
+      console.error(`Firebase configuration missing: ${field}`)
+      return false
+    }
+  }
+
+  return true
+}

package/src/modules/widget/__tests__/widget-settings-props.builder.ts

@@ -0,0 +1,121 @@
+import type { ILanguages } from '@/src/config/i18n'
+import { chance } from '@/src/config/tests'
+import type { User, WidgetSettingProps } from '@/src/types'
+
+class WidgetSettingPropsBuilder implements WidgetSettingProps {
+  hotmartToken: string
+  locale: ILanguages
+  conversationId: string
+  productId: number
+  productName: string
+  author?: string
+  clubName?: string
+  contactId?: string
+  namespace?: string
+  sessionId?: string
+  membershipId?: string
+  membershipSlug?: string
+  userId?: string
+  tutorName?: string
+  user?: User
+
+  constructor() {
+    this.hotmartToken = chance.guid()
+    this.locale = 'en'
+    this.conversationId = chance.guid()
+    this.productId = 4234
+    this.productName = 'Berim CDs'
+  }
+
+  withHotmartToken(hotmartToken: typeof this.hotmartToken) {
+    this.hotmartToken = hotmartToken
+
+    return this
+  }
+
+  withLocale(locale: typeof this.locale) {
+    this.locale = locale
+
+    return this
+  }
+
+  withConversationId(conversationId: typeof this.conversationId) {
+    this.conversationId = conversationId
+
+    return this
+  }
+
+  withProductId(productId: typeof this.productId) {
+    this.productId = productId
+
+    return this
+  }
+
+  withProductName(productName: typeof this.productName) {
+    this.productName = productName
+
+    return this
+  }
+
+  withAuthor(author: typeof this.author) {
+    this.author = author
+
+    return this
+  }
+
+  withClubName(clubName: typeof this.clubName) {
+    this.clubName = clubName
+
+    return this
+  }
+
+  withContactId(contactId: typeof this.contactId) {
+    this.contactId = contactId
+
+    return this
+  }
+
+  withNamespace(namespace: typeof this.namespace) {
+    this.namespace = namespace
+
+    return this
+  }
+
+  withSessionId(sessionId: typeof this.sessionId) {
+    this.sessionId = sessionId
+
+    return this
+  }
+
+  withMembershipId(membershipId: typeof this.membershipId) {
+    this.membershipId = membershipId
+
+    return this
+  }
+
+  withMembershipSlug(membershipSlug: typeof this.membershipSlug) {
+    this.membershipSlug = membershipSlug
+
+    return this
+  }
+
+  withUserId(userId: typeof this.userId) {
+    this.userId = userId
+
+    return this
+  }
+
+  withTutorName(tutorName: typeof this.tutorName) {
+    this.tutorName = tutorName
+
+    return this
+  }
+
+  withUser(user: typeof this.user) {
+    this.user = user
+
+    return this
+  }
+}
+
+export default WidgetSettingPropsBuilder

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

@@ -0,0 +1,20 @@
+import { useRef } from 'react'
+
+import { ChatInput, MessagesList } from '@/src/modules/messages/components'
+
+function ChatPage() {
+  const chatInputRef = useRef<HTMLInputElement>(null)
+
+  return (
+    <div className='flex flex-1 flex-col justify-center'>
+      <div className='flex flex-1 flex-col justify-center px-5 py-4'>
+        <MessagesList />
+      </div>
+      <div className='border-t border-t-neutral-700 px-5 py-4'>
+        <ChatInput name='new-chat-msg-input' ref={chatInputRef} />
+      </div>
+    </div>
+  )
+}
+
+export default ChatPage

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

@@ -0,0 +1,2 @@
+export * from './chat-page'
+export { default as ChatPage } from './chat-page'

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

@@ -0,0 +1,9 @@
+import { ChatPage } from './chat-page'
+import { WidgetOnboardingPage } from './onboarding-page'
+import { WidgetStarterPage } from './starter-page'
+
+export const WIDGET_TABS = {
+  onboarding: <WidgetOnboardingPage />,
+  starter: <WidgetStarterPage />,
+  chat: <ChatPage />
+}

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

@@ -0,0 +1,32 @@
+import { useEffect } from 'react'
+import { useQueryClient } from '@tanstack/react-query'
+
+import { getInitSparkieQuery } from '../../hooks'
+import { useWidgetSettingsAtom, useWidgetTabsAtom } from '../../store'
+import { WIDGET_TABS } from '../constants'
+
+function WidgetContainer() {
+  const [settings] = useWidgetSettingsAtom()
+  const initSparkieQuery = settings ? getInitSparkieQuery(settings) : null
+  const queryClient = useQueryClient()
+  const [widgetTabs] = useWidgetTabsAtom()
+
+  useEffect(() => {
+    if (!initSparkieQuery) return
+    void (async () => {
+      await queryClient.prefetchQuery(initSparkieQuery)
+    })()
+  }, [initSparkieQuery, queryClient])
+
+  if (!settings?.tutorName) return null
+
+  return (
+    <div className='flex min-h-svh flex-col items-center justify-center bg-neutral-900'>
+      <div className='flex flex-1 flex-col justify-center gap-6'>
+        {WIDGET_TABS[widgetTabs.currentTab]}
+      </div>
+    </div>
+  )
+}
+
+export default WidgetContainer

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

@@ -0,0 +1,2 @@
+export { default as WidgetContainer } from './container'
+export * from './types'

package/src/{main → modules/widget/components/container}/styles.module.css

@@ -7,9 +7,5 @@
       rgb(from var(--ai-color-dark) r g b / 0.2) 46.97%,
       rgb(from var(--hc-color-neutral-1000) r g b / 0.2) 57.9%
     ),
-    linear-gradient(
-      0deg,
-      var(--hc-color-neutral-1000),
-      var(--hc-color-neutral-1000)
-    );
+    linear-gradient(0deg, var(--hc-color-neutral-1000), var(--hc-color-neutral-1000));
 }

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

@@ -0,0 +1,3 @@
+import type { WIDGET_TABS } from '../constants'
+
+export type CurrentTabKey = keyof typeof WIDGET_TABS

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

@@ -14,7 +14,7 @@ function GreetingsCard({ author, tutorName }: GreetingsCardProps) {
   const { t } = useTranslation()
 
   return (
-    <div className='flex flex-1 flex-col items-center justify-center text-neutral-50'>
+    <div className='flex flex-col items-center justify-center text-neutral-50'>
       <div className='flex flex-col items-center justify-center gap-4 text-center'>
         <figure
           className={clsx(

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

@@ -3,7 +3,5 @@
 }
 
 .faceTxt {
-  background: linear-gradient(226.83deg, #7ab0ff 21.46%, #b48eff 95.76%);
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
+  composes: gradientText from '../../../../config/styles/utilities/text-utilities.module.css';
 }

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

@@ -1 +1,4 @@
+export * from './ai-avatar'
+export * from './chat-page'
+export * from './container'
 export * from './greetings-card'

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

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

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

@@ -0,0 +1,38 @@
+import clsx from 'clsx'
+import { useTranslation } from 'react-i18next'
+
+import TutorOnboardingSVG from '@/public/assets/svg/tutor-onboarding.svg?url'
+import { Button } from '@/src/lib/components'
+import { useWidgetTabsAtom } from '../../store'
+
+import styles from './styles.module.css'
+
+function WidgetOnboardingPage() {
+  const [, setWidgetTabs] = useWidgetTabsAtom()
+  const { t } = useTranslation()
+
+  return (
+    <div className={clsx('flex flex-1 flex-col justify-center gap-6 px-4 py-6', styles.bg)}>
+      <div className='flex flex-1 flex-col justify-center gap-6 px-0.5'>
+        <div className='mx-auto max-w-[67%]'>
+          <img src={TutorOnboardingSVG} aria-hidden />
+        </div>
+        <div className='flex flex-col gap-2'>
+          <h3 className={clsx(styles.gradientTxt, 'text-center text-xl/tight font-semibold')}>
+            {t('onboarding.title')}
+          </h3>
+          <p className='text-center text-sm/snug font-normal text-gray-400'>
+            {t('onboarding.description')}
+          </p>
+        </div>
+      </div>
+      <div className='flex gap-4'>
+        <Button variant='brand' className='flex-1' onClick={() => setWidgetTabs('starter')}>
+          {t('general.buttons.start')}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default WidgetOnboardingPage

package/src/modules/widget/components/onboarding-page/styles.module.css

@@ -0,0 +1,7 @@
+.gradientTxt {
+  composes: gradientText from '../../../../config/styles/utilities/text-utilities.module.css';
+}
+
+.bg {
+  composes: gradientBg from '../../../../config/styles/utilities/bg-utilities.module.css';
+}

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

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

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

@@ -0,0 +1,41 @@
+import { useRef } from 'react'
+
+import { useRefEventListener } from '@/src/lib/hooks'
+import { ChatInput, useChatInputValueAtom } from '@/src/modules/messages/components'
+import { useWidgetSettingsAtom, useWidgetTabsAtom } from '../../store'
+import { GreetingsCard } from '../greetings-card'
+
+function WidgetStarterPage() {
+  const [settings] = useWidgetSettingsAtom()
+  const chatInputRef = useRef<HTMLInputElement>(null)
+  const [, setChatInputValue] = useChatInputValueAtom()
+  const [, setWidgetTabs] = useWidgetTabsAtom()
+
+  useRefEventListener<HTMLInputElement>({
+    config: {
+      ref: chatInputRef,
+      eventTypes: ['input', 'change'],
+      handler: (e) => {
+        const target = e.target as HTMLInputElement
+        setChatInputValue(target.value)
+      }
+    }
+  })
+
+  return (
+    <div className='flex flex-1 flex-col justify-center'>
+      <div className='flex flex-1 flex-col justify-center px-5 py-4'>
+        <GreetingsCard author={settings?.author ?? ''} tutorName={settings?.tutorName ?? ''} />
+      </div>
+      <div className='border-t border-t-neutral-700 px-5 py-4'>
+        <ChatInput
+          name='new-chat-msg-input'
+          ref={chatInputRef}
+          onSend={() => setWidgetTabs('chat')}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default WidgetStarterPage

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

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

package/src/modules/widget/hooks/use-init-sparkie/index.ts

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

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

@@ -0,0 +1,18 @@
+import { useQuery } from '@tanstack/react-query'
+
+import { SparkieService } from '@/src/modules/sparkie'
+import type { WidgetSettingProps } from '@/src/types'
+
+export const getInitSparkieQuery = (settings: WidgetSettingProps) => ({
+  queryKey: ['SparkieService:initializeSparkie', settings.hotmartToken],
+  queryFn: () =>
+    SparkieService.initSparkie({
+      token: settings.hotmartToken,
+      skipPresenceSetup: true
+    }),
+  enabled: Boolean(settings?.hotmartToken?.trim())
+})
+
+export function useInitSparkie(settings: WidgetSettingProps) {
+  return useQuery(getInitSparkieQuery(settings))
+}

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

@@ -1 +1,2 @@
 export * from './widget-settings.atom'
+export * from './widget-tabs.atom'

package/src/modules/widget/store/widget-tabs.atom.ts

@@ -0,0 +1,53 @@
+import { atom, useAtom } from 'jotai'
+
+import type { CurrentTabKey } from '../components'
+
+export type WidgetTabsProps = {
+  currentTab: CurrentTabKey
+  history: Set<CurrentTabKey>
+}
+
+const INITIAL_PROPS: WidgetTabsProps = {
+  currentTab: 'onboarding',
+  history: new Set(['onboarding'])
+}
+
+export const widgetTabsAtom = atom<WidgetTabsProps>(INITIAL_PROPS)
+
+export const setWidgetTabsAtom = atom(
+  (get) => get(widgetTabsAtom),
+  (get, set, currentTab: CurrentTabKey) => {
+    const currentValue = get(widgetTabsAtom)
+
+    if (currentValue.currentTab === currentTab) return
+
+    const history = new Set([...currentValue.history, currentTab])
+
+    const config: WidgetTabsProps = {
+      currentTab,
+      history
+    }
+
+    set(widgetTabsAtom, config)
+  }
+)
+
+export const goBackTabAtom = atom(null, (get, set) => {
+  const currentValue = get(widgetTabsAtom)
+  const historyArray = Array.from(currentValue.history)
+
+  if (historyArray.length <= 1) return
+
+  historyArray.pop()
+
+  const config: WidgetTabsProps = {
+    currentTab: historyArray[historyArray.length - 1],
+    history: new Set(historyArray)
+  }
+
+  set(widgetTabsAtom, config)
+})
+
+export const useGetWidgetTabsAtom = () => useAtom(widgetTabsAtom)
+export const useWidgetTabsAtom = () => useAtom(setWidgetTabsAtom)
+export const useWidgetGoBackTabAton = () => useAtom(goBackTabAtom)

package/tailwind.config.js

@@ -2,7 +2,101 @@
 module.exports = {
   content: ['./src/**/*.{js,ts,jsx,tsx}', './public/**/*.html'],
   theme: {
-    extend: {}
+    extend: {
+      colors: {
+        primary: {
+          100: 'var(--hc-color-primary-100)',
+          200: 'var(--hc-color-primary-200)',
+          300: 'var(--hc-color-primary-300)',
+          400: 'var(--hc-color-primary-400)',
+          500: 'var(--hc-color-primary-500)',
+          600: 'var(--hc-color-primary-600)',
+          700: 'var(--hc-color-primary-700)'
+        },
+        secondary: {
+          100: 'var(--hc-color-secondary-100)',
+          200: 'var(--hc-color-secondary-200)',
+          300: 'var(--hc-color-secondary-300)',
+          400: 'var(--hc-color-secondary-400)',
+          500: 'var(--hc-color-secondary-500)',
+          600: 'var(--hc-color-secondary-600)',
+          700: 'var(--hc-color-secondary-700)'
+        },
+        success: {
+          100: 'var(--hc-color-success-100)',
+          200: 'var(--hc-color-success-200)',
+          300: 'var(--hc-color-success-300)',
+          400: 'var(--hc-color-success-400)',
+          500: 'var(--hc-color-success-500)',
+          600: 'var(--hc-color-success-600)',
+          700: 'var(--hc-color-success-700)'
+        },
+        warning: {
+          100: 'var(--hc-color-warning-100)',
+          200: 'var(--hc-color-warning-200)',
+          300: 'var(--hc-color-warning-300)',
+          400: 'var(--hc-color-warning-400)',
+          500: 'var(--hc-color-warning-500)',
+          600: 'var(--hc-color-warning-600)',
+          700: 'var(--hc-color-warning-700)'
+        },
+        danger: {
+          100: 'var(--hc-color-danger-100)',
+          200: 'var(--hc-color-danger-200)',
+          300: 'var(--hc-color-danger-300)',
+          400: 'var(--hc-color-danger-400)',
+          500: 'var(--hc-color-danger-500)',
+          600: 'var(--hc-color-danger-600)',
+          700: 'var(--hc-color-danger-700)'
+        },
+        info: {
+          100: 'var(--hc-color-info-100)',
+          200: 'var(--hc-color-info-200)',
+          300: 'var(--hc-color-info-300)',
+          400: 'var(--hc-color-info-400)',
+          500: 'var(--hc-color-info-500)',
+          600: 'var(--hc-color-info-600)',
+          700: 'var(--hc-color-info-700)'
+        },
+        andromeda: {
+          100: 'var(--hc-color-andromeda-100)',
+          200: 'var(--hc-color-andromeda-200)',
+          300: 'var(--hc-color-andromeda-300)',
+          400: 'var(--hc-color-andromeda-400)',
+          500: 'var(--hc-color-andromeda-500)',
+          600: 'var(--hc-color-andromeda-600)',
+          700: 'var(--hc-color-andromeda-700)'
+        },
+        sirius: {
+          100: 'var(--hc-color-sirius-100)',
+          200: 'var(--hc-color-sirius-200)',
+          300: 'var(--hc-color-sirius-300)',
+          400: 'var(--hc-color-sirius-400)',
+          500: 'var(--hc-color-sirius-500)',
+          600: 'var(--hc-color-sirius-600)',
+          700: 'var(--hc-color-sirius-700)'
+        },
+        neutral: {
+          0: 'var(--hc-color-neutral-0)',
+          100: 'var(--hc-color-neutral-100)',
+          200: 'var(--hc-color-neutral-200)',
+          300: 'var(--hc-color-neutral-300)',
+          400: 'var(--hc-color-neutral-400)',
+          500: 'var(--hc-color-neutral-500)',
+          600: 'var(--hc-color-neutral-600)',
+          700: 'var(--hc-color-neutral-700)',
+          800: 'var(--hc-color-neutral-800)',
+          900: 'var(--hc-color-neutral-900)',
+          1000: 'var(--hc-color-neutral-1000)'
+        },
+        ai: {
+          primary: 'var(--ai-color-primary)',
+          secondary: 'var(--ai-color-secondary)',
+          dark: 'var(--ai-color-dark)',
+          'chat-response': 'var(--ai-color-chat-response)'
+        }
+      }
+    }
   },
   plugins: []
 }

package/config/vitest/index.ts

@@ -1 +0,0 @@
-export * from '../../src/config/tests'

package/src/modules/create-message/components/index.ts

@@ -1 +0,0 @@
-export * from './chat-input'