app-tutor-ai-consumer 1.2.0 → 1.3.0

package/src/@types/declarations.d.ts

@@ -13,9 +13,10 @@ declare module '*.jpg'
 
 declare module '*.gif'
 
-declare module '*?url'
-
-declare module '*.svg?url'
+declare module '*.svg?url' {
+  const content: string
+  export default content
+}
 
 declare module '*.svg' {
   const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>

package/src/config/optimizely/optimizely-provider.tsx

@@ -8,7 +8,7 @@ import optimizelyClient from './optimizely'
 
 function OptimizelyProvider({
   settings,
-  children,
+  children
 }: PropsWithChildren<{ settings: WidgetSettingProps }>) {
   const userInfo = {
     id: settings.user?.ucode ?? '',
@@ -17,8 +17,8 @@ function OptimizelyProvider({
       appSystem: APP_SYSTEM,
       appDebug: !productionMode,
       locale: settings.locale ?? '',
-      slug: settings.membershipSlug ?? '',
-    },
+      slug: settings.membershipSlug ?? ''
+    }
   }
 
   return (

package/src/config/optimizely/optimizely.ts

@@ -3,7 +3,7 @@ import { createInstance } from '@optimizely/react-sdk'
 const optimizelyClient = createInstance({
   sdkKey: process.env.OPTIMIZELY_SDK_KEY,
   eventBatchSize: 10,
-  eventFlushInterval: 1000,
+  eventFlushInterval: 1000
 })
 
 export default optimizelyClient

package/src/config/styles/global.css

@@ -76,6 +76,7 @@
   --ai-color-primary: #a095ec;
   --ai-color-secondary: #6ba1f0;
   --ai-color-dark: #111925;
+  --ai-color-chat-response: #26202f;
 }
 
 #hotmart-app-tutor-ai-consumer-root {

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

@@ -0,0 +1,11 @@
+.gradientBg {
+  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%
+    ),
+    linear-gradient(0deg, var(--hc-color-neutral-900), var(--hc-color-neutral-900));
+}

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

@@ -0,0 +1,6 @@
+.gradientText {
+  background: linear-gradient(226.83deg, #7ab0ff 21.46%, #b48eff 95.76%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}

package/src/config/tests/handlers.ts

@@ -3,5 +3,8 @@ import { http, HttpResponse } from 'msw'
 export const handlers = [
   http.all('https://tracking-api.buildstaging.com/rest/track/event/json/sync', () => {
     return HttpResponse.json({ ok: true })
+  }),
+  http.all('https://c3po-api-auth.buildstaging.com/v1/auth/sparkie', () => {
+    return HttpResponse.json({ ok: true })
   })
 ]

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

@@ -0,0 +1,86 @@
+import clsx from 'clsx'
+import type { HTMLAttributes, PropsWithChildren } from 'react'
+
+export type ButtonProps = PropsWithChildren<
+  HTMLAttributes<HTMLButtonElement> & {
+    variant?: 'brand' | 'secondary' | 'primary' | 'tertiary' | 'gradient-outline'
+  }
+>
+
+function Button({ children, className, variant = 'brand', ...props }: ButtonProps) {
+  const defaultClasses =
+    'rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 text-base font-medium border border-transparent'
+  const defaultPadding = 'px-4 py-2'
+
+  switch (variant) {
+    case 'gradient-outline':
+      return (
+        <button
+          className={clsx(
+            defaultClasses,
+            'group relative inline-flex items-center justify-center overflow-hidden bg-gradient-to-br from-purple-600 to-blue-500 p-0.5 hover:text-neutral-0 group-hover:from-purple-600 group-hover:to-blue-500',
+            className
+          )}
+          {...props}>
+          <span className='relative flex-1 rounded-md bg-neutral-900 px-5 py-2.5 text-neutral-0 transition-all duration-75 ease-in group-hover:bg-transparent'>
+            {children}
+          </span>
+        </button>
+      )
+    case 'primary':
+      return (
+        <button
+          className={clsx(
+            defaultPadding,
+            defaultClasses,
+            'bg-primary-500 text-neutral-0 hover:bg-primary-600 focus:outline-none',
+            className
+          )}
+          {...props}>
+          {children}
+        </button>
+      )
+    case 'secondary':
+      return (
+        <button
+          className={clsx(
+            defaultPadding,
+            defaultClasses,
+            'border-neutral-100 bg-transparent text-neutral-100 hover:bg-neutral-100 hover:text-neutral-900',
+            className
+          )}
+          {...props}>
+          {children}
+        </button>
+      )
+    case 'tertiary':
+      return (
+        <button
+          className={clsx(
+            defaultPadding,
+            defaultClasses,
+            'bg-transparent text-neutral-0 hover:bg-neutral-900',
+            className
+          )}
+          {...props}>
+          {children}
+        </button>
+      )
+    case 'brand':
+    default:
+      return (
+        <button
+          className={clsx(
+            defaultPadding,
+            defaultClasses,
+            'rounded bg-neutral-100 text-neutral-900 outline-none hover:bg-neutral-200',
+            className
+          )}
+          {...props}>
+          {children}
+        </button>
+      )
+  }
+}
+
+export default Button

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

@@ -0,0 +1 @@
+export { default as Button } from './button'

package/src/lib/components/index.ts

@@ -1,3 +1,4 @@
+export * from './button'
 export * from './errors'
 export * from './icons'
 export * from './spinner'

package/src/lib/hooks/index.ts

@@ -1 +1,2 @@
 export * from './use-default-id'
+export * from './use-ref-event-listener'

package/src/lib/hooks/use-ref-event-listener/index.ts

@@ -0,0 +1,2 @@
+export * from './use-ref-event-listener'
+export { default as useRefEventListener } from './use-ref-event-listener'

package/src/lib/hooks/use-ref-event-listener/use-ref-event-listener.tsx

@@ -0,0 +1,32 @@
+import { useEffect } from 'react'
+
+export type UseRefEventListenerConfig<T extends HTMLElement> = {
+  config: {
+    ref: React.RefObject<T | null>
+    eventTypes: string[]
+    handler: (event: Event) => void
+    options?: AddEventListenerOptions
+  }
+}
+
+function useRefEventListener<T extends HTMLElement>({
+  config: { eventTypes, handler, ref, options }
+}: UseRefEventListenerConfig<T>) {
+  useEffect(() => {
+    const element = ref.current
+
+    if (!element) return
+
+    eventTypes.forEach((ev) => {
+      element.addEventListener(ev, handler, options)
+    })
+
+    return () => {
+      eventTypes.forEach((ev) => {
+        element.removeEventListener(ev, handler, options)
+      })
+    }
+  }, [ref, eventTypes, handler, options])
+}
+
+export default useRefEventListener

package/src/main/main.spec.tsx

@@ -1,15 +1,25 @@
-import { render, screen, waitFor } from '@/config/tests'
-import type { WidgetSettingProps } from '../types'
+import { chance, render, screen, waitFor } from '@/config/tests'
+import WidgetSettingPropsBuilder from '../modules/widget/__tests__/widget-settings-props.builder'
 import { Main } from '.'
 
 describe('Main', () => {
-  const renderComponent = () => render(<Main settings={{} as WidgetSettingProps} />)
+  const defaultProps = new WidgetSettingPropsBuilder()
+  const renderComponent = (props = { settings: defaultProps }) => render(<Main {...props} />)
+
+  it('should render empty element when settings.tutorName is not defined', async () => {
+    const { container } = renderComponent()
+
+    await waitFor(() => {
+      expect(container).toBeEmptyDOMElement()
+    })
+  })
 
   it('should render without errors', async () => {
-    renderComponent()
+    const props = new WidgetSettingPropsBuilder().withTutorName(chance.name())
+    renderComponent({ settings: props })
 
-    await waitFor(() =>
-      expect(screen.getByText(/general.greetings.description/i)).toBeInTheDocument()
-    )
+    await waitFor(() => {
+      expect(screen.getByText(/onboarding.description/i)).toBeInTheDocument()
+    })
   })
 })

package/src/main/main.tsx

@@ -1,17 +1,12 @@
 import '@/config/styles/index.css'
 
-import clsx from 'clsx'
-
 import { ErrorBoundary, GenericError } from '@/src/lib/components/errors'
 import { useDefaultId } from '@/src/lib/hooks'
 import { useAppLang } from '../config/i18n'
-import { ChatInput } from '../modules/create-message/components'
 import { GlobalProviders } from '../modules/global-providers'
-import { GreetingsCard } from '../modules/widget/components'
+import { WidgetContainer } from '../modules/widget'
 import type { WidgetSettingProps } from '../types'
 
-import styles from './styles.module.css'
-
 function Main({ settings }: { settings: WidgetSettingProps }) {
   useDefaultId()
   useAppLang(settings.locale)
@@ -19,13 +14,7 @@ function Main({ settings }: { settings: WidgetSettingProps }) {
   return (
     <ErrorBoundary fallback={<GenericError />}>
       <GlobalProviders settings={settings}>
-        <div
-          className={clsx('flex min-h-svh flex-col items-center justify-center p-5', styles.main)}>
-          <div className='flex flex-1 flex-col justify-center gap-6 lg:max-w-sm'>
-            <GreetingsCard author={settings.author ?? ''} tutorName={settings.tutorName ?? ''} />
-            <ChatInput name='new-chat-msg-input' />
-          </div>
-        </div>
+        <WidgetContainer />
       </GlobalProviders>
     </ErrorBoundary>
   )

package/src/modules/messages/components/chat-input/chat-input.atom.ts

@@ -0,0 +1,12 @@
+import { atom, useAtom } from 'jotai'
+
+const chatInputValueAtom = atom<string>('')
+
+export const chatInputAtom = atom(
+  (get) => get(chatInputValueAtom),
+  (_, set, config: string) => {
+    set(chatInputValueAtom, config)
+  }
+)
+
+export const useChatInputValueAtom = () => useAtom(chatInputAtom)

package/src/modules/{create-message → messages}/components/chat-input/chat-input.tsx

@@ -3,10 +3,13 @@ import { useTranslation } from 'react-i18next'
 
 import { Icon } from '@/src/lib/components'
 
+import { useChatInputValueAtom } from './chat-input.atom'
 import type { ChatInputProps } from './types'
 
-const ChatInput = forwardRef<HTMLInputElement, ChatInputProps>(function ({ name }, ref) {
+const ChatInput = forwardRef<HTMLInputElement, ChatInputProps>(function ({ name, onSend }, ref) {
   const { t } = useTranslation()
+  const [value] = useChatInputValueAtom()
+
   return (
     <div className='flex items-center rounded-full border-neutral-800 bg-neutral-800 px-4 py-2'>
       <input
@@ -16,8 +19,9 @@ const ChatInput = forwardRef<HTMLInputElement, ChatInputProps>(function ({ name
         type='text'
         className='h-6 w-full border-none bg-transparent text-neutral-400 outline-0 placeholder:text-neutral-400'
         placeholder={t('send_message.field.placeholder')}
+        defaultValue={value}
       />
-      <button>
+      <button onClick={onSend}>
         <Icon name='send' className='h-4 w-4 text-neutral-50' />
       </button>
     </div>

package/src/modules/{create-message → messages}/components/chat-input/index.ts

@@ -1,2 +1,3 @@
 export { default as ChatInput } from './chat-input'
+export * from './chat-input.atom'
 export * from './types'

package/src/modules/{create-message → messages}/components/chat-input/types.ts

@@ -1,3 +1,4 @@
 export type ChatInputProps = {
   name: string
+  onSend?: () => void
 }

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

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

package/src/modules/messages/components/messages-list/index.ts

@@ -0,0 +1,2 @@
+export * from './messages-list'
+export { default as MessagesList } from './messages-list'

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

@@ -0,0 +1,24 @@
+function MessagesList() {
+  return (
+    <div className='flex flex-1 flex-col items-start justify-center gap-6'>
+      <div className='max-w-[80%] self-end rounded-lg bg-neutral-800 p-3 text-sm/normal text-neutral-0'>
+        <span>Quero saber o que Tutor do BEM faz</span>
+      </div>
+      <div className='flex max-w-[80%] flex-col gap-1 rounded-lg bg-ai-chat-response p-3 text-sm/normal text-neutral-0'>
+        <span>
+          Sou seu assistente de IA, criado pelo Marcelo Horta, para te acompanhar durante todo o seu
+          aprendizado. Confira o que posso fazer por você:
+        </span>
+        <span>
+          🤓 Dúvidas sobre as aulas:Me faça perguntas sobre o conteúdo das aulas e eu ajudo você a
+          aprender melhor.
+        </span>
+        <span>
+          📝 ResumosPosso gerar um resumo do que foi visto na aula pra facilitar seus estudos.
+        </span>
+      </div>
+    </div>
+  )
+}
+
+export default MessagesList

package/src/modules/messages/constants.ts

@@ -0,0 +1 @@
+export const MSG_MAX_COUNT = 20

package/src/modules/messages/index.ts

@@ -0,0 +1,3 @@
+export * from './constants'
+export { default as MessagesService } from './service'
+export * from './types'

package/src/modules/messages/service.ts

@@ -0,0 +1,63 @@
+import type { Message, MessageWithSenderData } from '@hotmart/sparkie/dist/MessageService'
+
+import { ApiError } from '@/src/config/request'
+import { HttpCodes } from '@/src/lib/utils'
+import { SparkieService } from '../sparkie'
+
+import type {
+  IGetMessagesPayload,
+  ISendImageMessagePayload,
+  ISendTextMessagePayload
+} from './types'
+
+class MessagesService {
+  private get sparkieMessageService() {
+    try {
+      const messageService = SparkieService.sparkieInstance.messageService
+
+      if (!messageService) throw new Error()
+
+      return messageService
+    } catch (error) {
+      throw new ApiError({
+        statusCode: HttpCodes.UNPROCESSABLE_ENTITY,
+        message: 'sparkie.messageService not defined',
+        extra: { error }
+      })
+    }
+  }
+
+  async getMessages({
+    conversationId,
+    before
+  }: IGetMessagesPayload): Promise<Array<MessageWithSenderData>> {
+    const data = await this.sparkieMessageService.getAll(conversationId, {
+      before
+    })
+
+    return data ?? []
+  }
+
+  async sendTextMessage({
+    content,
+    conversationId,
+    metadata
+  }: ISendTextMessagePayload): Promise<Message> {
+    const data = await this.sparkieMessageService.post(conversationId, {
+      content,
+      metadata
+    })
+
+    return data
+  }
+
+  async sendImageMessage({ content, conversationId }: ISendImageMessagePayload): Promise<Message> {
+    const data = await this.sparkieMessageService.post(conversationId, {
+      content
+    })
+
+    return data
+  }
+}
+
+export default new MessagesService()

package/src/modules/messages/types.ts

@@ -0,0 +1,47 @@
+import type { Message } from '@hotmart/sparkie/dist/MessageService'
+
+export type IMessage = Message & {
+  sending?: boolean // indicates when the current message is being sent
+}
+
+export type IGetMessagesPayload = {
+  conversationId: string
+  before?: number
+}
+
+export type ISendTextMessagePayload = {
+  conversationId: string
+  content: {
+    type: string
+    text: string
+  }
+  metadata: {
+    [k: string]: string | undefined | number | { [k: string]: string | undefined | number }
+  }
+}
+
+export type ISendImageMessagePayload = {
+  conversationId: string
+  content: {
+    type: string
+    name: string
+    dimensions: IDimensions
+    thumbnails: {
+      lg: string
+      md: string
+      sm: string
+    }
+    url: string
+  }
+}
+
+export type IDimensions = {
+  width: number
+  height: number
+}
+
+export type IFetchMessagesOptions = {
+  currentMessages: Array<IMessage>
+  conversationId: string
+  loadFirstPage?: boolean
+}

package/src/modules/sparkie/constants.ts

@@ -0,0 +1,21 @@
+export const firebaseConfig = {
+  apiKey: process.env.FIREBASE_API_KEY,
+  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
+  databaseURL: process.env.FIREBASE_DATABASE_URL,
+  projectId: process.env.FIREBASE_PROJECT_ID,
+  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID
+}
+
+export const firebaseConfigRequiredFields = new Set(Object.keys(firebaseConfig))
+
+export const ACTION_EVENT_MAP = {
+  conversationAdded: 'conversations.create',
+  conversationUpdated: 'conversations.update',
+  cursorsUpdate: 'cursors.update',
+  messageReceived: 'messages.create',
+  messageDeleted: 'messages.delete',
+  threadClosed: 'threads.close',
+  threadJoined: 'threads.join',
+  contactTyping: 'contacts.typing'
+}

package/src/modules/sparkie/index.ts

@@ -0,0 +1,3 @@
+export * from './constants'
+export { default as SparkieService } from './service'
+export * from './types'

package/src/modules/sparkie/service.ts

@@ -0,0 +1,94 @@
+import Sparkie from '@hotmart/sparkie'
+
+import { MSG_MAX_COUNT } from '../messages'
+
+import { ACTION_EVENT_MAP, firebaseConfig } from './constants'
+import type { InitSparkiePayload, SparkieActions, TrackTypingPayload } from './types'
+import { validateFirebaseConfig } from './utils/validate-firebase-config'
+
+class SparkieService {
+  private sparkie: Sparkie | null = null
+
+  constructor() {
+    if (validateFirebaseConfig()) {
+      this.sparkie = new Sparkie({
+        firebaseConfig,
+        options: {
+          conversationAPI: process.env.API_CONVERSATION_URL,
+          authURL: process.env.API_AUTH_URL,
+          numMaxMessages: MSG_MAX_COUNT
+        }
+      })
+    }
+  }
+
+  get sparkieInstance(): Sparkie {
+    if (!this.sparkie)
+      throw new Error('Sparkie instance not available. Check Firebase configuration.')
+
+    return this.sparkie
+  }
+
+  async initSparkie({ token, skipPresenceSetup = false }: InitSparkiePayload): Promise<boolean> {
+    const sparkie = this.sparkieInstance
+
+    try {
+      if (!token || !token.trim())
+        throw new Error('Invalid or missing token for Sparkie initialization')
+
+      await sparkie.init(token, { skipPresenceSetup })
+      return true
+    } catch (error) {
+      console.error('Error initializing realtime engine', error)
+
+      if (error instanceof Error) {
+        console.error('Error details:', {
+          message: error.message,
+          stack: error.stack,
+          token: token ? 'provided' : 'missing',
+          skipPresenceSetup
+        })
+      }
+
+      return false
+    }
+  }
+
+  updateToken(token: string): void {
+    this.sparkieInstance.setAPIToken(token)
+  }
+
+  removeEventSubscription(actions: SparkieActions): void {
+    Object.entries(actions).forEach(([actionName, listener]) => {
+      this.sparkieInstance.off(
+        ACTION_EVENT_MAP[actionName as keyof typeof ACTION_EVENT_MAP],
+        listener as (data: Record<string, unknown>) => void
+      )
+    })
+  }
+
+  subscribeEvents({
+    messageReceived,
+    threadClosed,
+    threadJoined,
+    contactTyping
+  }: SparkieActions): void {
+    if (messageReceived) this.sparkieInstance.on(ACTION_EVENT_MAP.messageReceived, messageReceived)
+
+    if (threadClosed) this.sparkieInstance.on(ACTION_EVENT_MAP.threadClosed, threadClosed)
+
+    if (threadJoined) this.sparkieInstance.on(ACTION_EVENT_MAP.threadJoined, threadJoined)
+
+    if (contactTyping) this.sparkieInstance.on(ACTION_EVENT_MAP.contactTyping, contactTyping)
+  }
+
+  trackTyping({ contactIds, conversationId }: TrackTypingPayload): void {
+    this.sparkieInstance.listener?.trackTyping(conversationId, contactIds)
+  }
+
+  destroySparkie(): Promise<void> {
+    return this.sparkieInstance.destroy({ skipSignOut: true })
+  }
+}
+
+export default new SparkieService()

package/src/modules/sparkie/types.ts

@@ -0,0 +1,47 @@
+import type { IMessage } from '../messages'
+
+export type InitSparkiePayload = {
+  token: string
+  webinarConversationId?: string
+  skipPresenceSetup?: boolean
+  includeSupportEvents?: boolean
+}
+
+type ThreadMetadata = Record<string, unknown>
+
+export type IContact = {
+  id: string
+  name: string
+  picture: string
+  userId: string | number
+}
+
+export type IThread = {
+  id: string
+  conversationId: string
+  contact: IContact
+  startedAt: number
+  subject?: string
+  metadata?: ThreadMetadata
+  endedAt?: number
+  updatedAt?: number
+  deletedAt?: number
+}
+
+export type ITyping = {
+  contactId: string
+  conversationId: string
+  status: 'typing' | 'idle'
+}
+
+export type SparkieActions = {
+  messageReceived?: (data: IMessage) => void
+  threadClosed?: (data: IThread) => void
+  threadJoined?: (data: IThread) => void
+  contactTyping?: (data: ITyping) => void
+}
+
+export type TrackTypingPayload = {
+  conversationId: string
+  contactIds: Array<string>
+}