app-tutor-ai-consumer 1.0.1

package/src/config/styles/global.css

@@ -0,0 +1,171 @@
+:root {
+  --hc-color-primary-100: #ebf0ff;
+  /* Hotmart Product */
+  --hc-color-primary-200: #bed1ff;
+  /* Hotmart Product */
+  --hc-color-primary-300: #89a8f8;
+  /* Hotmart Product */
+  --hc-color-primary-400: #5981e3;
+  /* Hotmart Product */
+  --hc-color-primary-500: #355cc0;
+  /* Hotmart Product */
+  --hc-color-primary-600: #253f82;
+  /* Hotmart Product */
+  --hc-color-primary-700: #162c64;
+  /* Hotmart Product */
+  --hc-color-secondary-100: #edffff;
+  --hc-color-secondary-200: #a2eaea;
+  --hc-color-secondary-300: #7cdbdb;
+  --hc-color-secondary-400: #51c1c3;
+  --hc-color-secondary-500: #0a9090;
+  --hc-color-secondary-600: #066262;
+  --hc-color-secondary-700: #024242;
+  --hc-color-success-100: #edfff5;
+  --hc-color-success-200: #99e9bb;
+  --hc-color-success-300: #4acc82;
+  --hc-color-success-400: #009d43;
+  --hc-color-success-500: #006e2f;
+  --hc-color-success-600: #005122;
+  --hc-color-success-700: #003416;
+  --hc-color-warning-100: #fffaeb;
+  --hc-color-warning-200: #f9e298;
+  --hc-color-warning-300: #fbd458;
+  --hc-color-warning-400: #efba0f;
+  --hc-color-warning-500: #a47c00;
+  --hc-color-warning-600: #6c5200;
+  --hc-color-warning-700: #453400;
+  --hc-color-danger-100: #fff0f0;
+  --hc-color-danger-200: #f9cac8;
+  --hc-color-danger-300: #e37570;
+  --hc-color-danger-400: #d6342c;
+  --hc-color-danger-500: #a81a0a;
+  --hc-color-danger-600: #830d00;
+  --hc-color-danger-700: #590900;
+  --hc-color-info-100: #f0f4ff;
+  --hc-color-info-200: #bed1ff;
+  --hc-color-info-300: #89a8f8;
+  --hc-color-info-400: #5981e3;
+  --hc-color-info-500: #355cc0;
+  --hc-color-info-600: #253f82;
+  --hc-color-info-700: #162c64;
+  --hc-color-andromeda-100: #f6f2ff;
+  --hc-color-andromeda-200: #d3c6fd;
+  --hc-color-andromeda-300: #ac93fc;
+  --hc-color-andromeda-400: #7c5ee2;
+  --hc-color-andromeda-500: #5a38c6;
+  --hc-color-andromeda-600: #4727b0;
+  --hc-color-andromeda-700: #260a81;
+  --hc-color-sirius-100: #fff6fe;
+  --hc-color-sirius-200: #ffb8f8;
+  --hc-color-sirius-300: #f899ee;
+  --hc-color-sirius-400: #e472d9;
+  --hc-color-sirius-500: #b832ab;
+  --hc-color-sirius-600: #7e2274;
+  --hc-color-sirius-700: #55154f;
+  --hc-color-neutral-0: #ffffff;
+  --hc-color-neutral-100: #f7f9fa;
+  --hc-color-neutral-200: #e6e9ed;
+  --hc-color-neutral-300: #c9ced4;
+  --hc-color-neutral-400: #9ea4ac;
+  --hc-color-neutral-500: #707780;
+  --hc-color-neutral-600: #464b52;
+  --hc-color-neutral-700: #32363b;
+  --hc-color-neutral-800: #282c2f;
+  --hc-color-neutral-900: #191c1f;
+  --hc-color-neutral-1000: #000000;
+  --ai-color-primary: #a095ec;
+  --ai-color-secondary: #6ba1f0;
+  --ai-color-dark: #111925;
+}
+
+#hotmart-app-tutor-ai-consumer-root {
+  composes: scrollbar from './shared-styles.module.css';
+  font-family:
+    'Nunito Sans',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Helvetica,
+    Arial,
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol';
+}
+
+#hotmart-app-tutor-ai-consumer-root.dark {
+  --hc-color-primary-100: #162c64;
+  /* Hotmart Product */
+  --hc-color-primary-200: #253f82;
+  /* Hotmart Product */
+  --hc-color-primary-300: #355cc0;
+  /* Hotmart Product */
+  --hc-color-primary-400: #5981e3;
+  /* Hotmart Product */
+  --hc-color-primary-500: #89a8f8;
+  /* Hotmart Product */
+  --hc-color-primary-600: #bed1ff;
+  /* Hotmart Product */
+  --hc-color-primary-700: #ebf0ff;
+  /* Hotmart Product */
+  --hc-color-secondary-100: #024242;
+  --hc-color-secondary-200: #066262;
+  --hc-color-secondary-300: #0a9090;
+  --hc-color-secondary-400: #51c1c3;
+  --hc-color-secondary-500: #7cdbdb;
+  --hc-color-secondary-600: #a2eaea;
+  --hc-color-secondary-700: #edffff;
+  --hc-color-success-100: #003416;
+  --hc-color-success-200: #005122;
+  --hc-color-success-300: #006e2f;
+  --hc-color-success-400: #009d43;
+  --hc-color-success-500: #4acc82;
+  --hc-color-success-600: #99e9bb;
+  --hc-color-success-700: #edfff5;
+  --hc-color-warning-100: #453400;
+  --hc-color-warning-200: #6c5200;
+  --hc-color-warning-300: #a47c00;
+  --hc-color-warning-400: #efba0f;
+  --hc-color-warning-500: #fbd458;
+  --hc-color-warning-600: #f9e298;
+  --hc-color-warning-700: #fffaeb;
+  --hc-color-danger-100: #590900;
+  --hc-color-danger-200: #830d00;
+  --hc-color-danger-300: #a81a0a;
+  --hc-color-danger-400: #d6342c;
+  --hc-color-danger-500: #e37570;
+  --hc-color-danger-600: #f9cac8;
+  --hc-color-danger-700: #fff0f0;
+  --hc-color-info-100: #162c64;
+  --hc-color-info-200: #253f82;
+  --hc-color-info-300: #355cc0;
+  --hc-color-info-400: #5981e3;
+  --hc-color-info-500: #89a8f8;
+  --hc-color-info-600: #bed1ff;
+  --hc-color-info-700: #f0f4ff;
+  --hc-color-andromeda-100: #260a81;
+  --hc-color-andromeda-200: #4727b0;
+  --hc-color-andromeda-300: #5a38c6;
+  --hc-color-andromeda-400: #7c5ee2;
+  --hc-color-andromeda-500: #ac93fc;
+  --hc-color-andromeda-600: #d3c6fd;
+  --hc-color-andromeda-700: #f6f2ff;
+  --hc-color-sirius-100: #55154f;
+  --hc-color-sirius-200: #7e2274;
+  --hc-color-sirius-300: #b832ab;
+  --hc-color-sirius-400: #e472d9;
+  --hc-color-sirius-500: #f899ee;
+  --hc-color-sirius-600: #ffb8f8;
+  --hc-color-sirius-700: #fff6fe;
+  --hc-color-neutral-0: #000000;
+  --hc-color-neutral-100: #191c1f;
+  --hc-color-neutral-200: #282c2f;
+  --hc-color-neutral-300: #32363b;
+  --hc-color-neutral-400: #464b52;
+  --hc-color-neutral-500: #707780;
+  --hc-color-neutral-600: #9ea4ac;
+  --hc-color-neutral-700: #c9ced4;
+  --hc-color-neutral-800: #e6e9ed;
+  --hc-color-neutral-900: #f7f9fa;
+  --hc-color-neutral-1000: #ffffff;
+}

package/src/config/styles/index.css

@@ -0,0 +1,5 @@
+@import './global.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/config/styles/shared-styles.module.css

@@ -0,0 +1,16 @@
+.scrollbar {
+  &::-webkit-scrollbar {
+    width: var(--hc-size-spacing-2);
+    height: var(--hc-size-spacing-2);
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--hc-color-neutral-400);
+    border-radius: var(--hc-size-border-medium);
+    border: calc(var(--hc-size-border-medium) / 2) solid transparent;
+  }
+}

package/src/config/tests/abstract-mock-generator.ts

@@ -0,0 +1,9 @@
+abstract class MockGenerator<T = unknown> {
+  abstract getOne(properties?: T): T
+
+  getMany(amount = 1, props?: T) {
+    return Array(amount).fill(this.getOne(props)) as Array<T>
+  }
+}
+
+export default MockGenerator

package/src/config/tests/customRenderHook.tsx

@@ -0,0 +1,32 @@
+import { renderHook } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import type { CustomRenderHooksOptions } from '@/src/config/tests/types'
+import { setupComponents } from '@/src/config/tests/wrappers'
+
+const customRenderHook = <TProps, TResult>(
+  callback: (props: TProps) => TResult,
+  {
+    shallow,
+    withQueryProvider = true,
+    withProvider,
+    ...options
+  }: CustomRenderHooksOptions<TProps> = {}
+) => {
+  const result = renderHook(callback, {
+    wrapper: (props) =>
+      setupComponents(<div {...props} />, {
+        shallow,
+        withQueryProvider,
+        withProvider
+      }),
+    ...options
+  })
+
+  return {
+    ...result,
+    user: userEvent.setup()
+  }
+}
+
+export default customRenderHook

package/src/config/tests/handlers.ts

@@ -0,0 +1,7 @@
+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 })
+  })
+]

package/src/config/tests/index.ts

@@ -0,0 +1,4 @@
+export * from './types'
+export * from './utils'
+export * from './worker'
+export * from './wrappers'

package/src/config/tests/mockRequest.tsx

@@ -0,0 +1,36 @@
+import { delay, http, HttpResponse } from 'msw'
+
+import { serviceWorker } from '@/src/config/tests/worker'
+import { HttpCodes } from '@/src/lib/utils'
+
+type Method = 'get' | 'post' | 'put' | 'delete'
+
+type Options = {
+  status?: number
+  delay?: number
+  httpMethod?: Method
+}
+
+class MockRequest {
+  rest<ResponseType extends BodyInit | null = never>(
+    url: string,
+    response: ResponseType,
+    options?: Options
+  ) {
+    const restAPI = http[options?.httpMethod ?? 'get']
+
+    return restAPI(url, async () => {
+      await delay(options?.delay)
+
+      return new HttpResponse(response, {
+        status: options?.status ?? HttpCodes.OK
+      })
+    })
+  }
+
+  mock<ResponseType = object>(url: string, response: ResponseType, options?: Options) {
+    serviceWorker.use(this.rest(url, JSON.stringify(response), options))
+  }
+}
+
+export default new MockRequest()

package/src/config/tests/types.ts

@@ -0,0 +1,10 @@
+import type { RenderHookOptions, RenderOptions } from '@testing-library/react'
+import type { ComponentType, ReactNode } from 'react'
+
+export type IExtendedRenderOptions = RenderOptions & {
+  shallow?: boolean
+  withQueryProvider?: boolean
+  withProvider?: ComponentType<{ children: ReactNode }>
+}
+
+export type CustomRenderHooksOptions<TProps> = RenderHookOptions<TProps> & IExtendedRenderOptions

package/src/config/tests/utils.tsx

@@ -0,0 +1,38 @@
+import { render } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import Chance from 'chance'
+
+import customRenderHook from '@/src/config/tests/customRenderHook'
+import type { IExtendedRenderOptions } from '@/src/config/tests/types'
+import { setupComponents } from '@/src/config/tests/wrappers'
+
+import MockGenerator from './abstract-mock-generator'
+import MockRequest from './mockRequest'
+
+const customRender = (
+  ui: React.ReactElement,
+  { shallow, withQueryProvider = true, ...options }: IExtendedRenderOptions = {}
+) => ({
+  user: userEvent.setup(),
+  ...render(
+    setupComponents(ui, {
+      shallow,
+      withQueryProvider
+    }),
+    options
+  )
+})
+
+const chance = new Chance()
+
+export * from '@testing-library/react'
+export { default as userEvent } from '@testing-library/user-event'
+
+export {
+  chance,
+  MockGenerator,
+  MockRequest,
+  // override render export
+  customRender as render,
+  customRenderHook as renderHook
+}

package/src/config/tests/worker.ts

@@ -0,0 +1,5 @@
+import { setupServer } from 'msw/node'
+
+import { handlers } from '@/src/config/tests/handlers'
+
+export const serviceWorker = setupServer(...handlers)

package/src/config/tests/wrappers.tsx

@@ -0,0 +1,50 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import type { ComponentType, JSX, ReactNode } from 'react'
+
+import type { IExtendedRenderOptions } from '@/src/config/tests/types'
+
+export const testQueryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+      refetchOnWindowFocus: false
+    },
+    mutations: {
+      retry: false
+    }
+  }
+})
+
+const wrapInQueryProvider = (componentTree: JSX.Element) => (
+  <QueryClientProvider client={testQueryClient}>{componentTree}</QueryClientProvider>
+)
+
+const wrapInProvider = ({
+  componentTree,
+  provider: Provider
+}: {
+  provider: ComponentType<{ children: ReactNode }>
+  componentTree: JSX.Element
+}) => <Provider>{componentTree}</Provider>
+
+export const setupComponents = (
+  ui: JSX.Element,
+  renderOptions?: IExtendedRenderOptions
+): JSX.Element => {
+  let componentTree: JSX.Element = <>{ui}</>
+
+  if (!renderOptions || renderOptions?.shallow) return componentTree
+
+  if (renderOptions?.withQueryProvider) {
+    componentTree = wrapInQueryProvider(componentTree)
+  }
+
+  if (renderOptions.withProvider) {
+    componentTree = wrapInProvider({
+      provider: renderOptions.withProvider,
+      componentTree
+    })
+  }
+
+  return componentTree
+}

package/src/development-bootstrap.tsx

@@ -0,0 +1,26 @@
+import './index'
+
+import { LANGUAGES } from './config/i18n'
+import { devMode } from './lib/utils'
+
+if (devMode) {
+  window.TOKEN = process.env.TOKEN ?? ''
+  void (async () => {
+    await window.startTutorWidget({
+      elementId: 'root',
+      settings: {
+        hotmartToken: window.TOKEN,
+        locale: LANGUAGES.PT_BR,
+        conversationId: '21506473-a93c-4b38-9c32-68a5ca37ce73', // OWNER
+        tutorName: 'Prof Jou Robots',
+        contactId: '38138170-6009-40cd-be50-001249e80a0d',
+        membershipId: '6297a4efa488cc775ac5e1dd',
+        namespace: 'tutor_v1-2',
+        author: 'Jonathan',
+        clubName: 'comofazerumvideodeteste',
+        productName: 'Curso de Assinatura',
+        productId: 4266504
+      }
+    })
+  })()
+}

package/src/index.tsx

@@ -0,0 +1,26 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+
+import { initLanguage } from './config/i18n'
+import { Main } from './main'
+import { TutorWidgetEvents, TutorWidgetEventTypes } from './modules/widget'
+import type { StartTutorWidgetProps } from './types'
+
+window.startTutorWidget = async ({
+  elementId = 'tutor-chat-app-widget',
+  settings
+}: StartTutorWidgetProps) => {
+  const rootElement = document.getElementById(elementId) as HTMLElement
+  const root = createRoot(rootElement)
+
+  await initLanguage(settings.locale)
+
+  if (root)
+    root.render(
+      <StrictMode>
+        <Main settings={settings} />
+      </StrictMode>
+    )
+}
+
+window.closeTutorWidget = () => TutorWidgetEvents.get(TutorWidgetEventTypes.CLOSE)?.dispatch()

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

@@ -0,0 +1,2 @@
+// Auto-generated file - DO NOT EDIT
+export type ValidIconNames = 'send'

package/src/lib/components/icons/icon.tsx

@@ -0,0 +1,41 @@
+import { useEffect, useState } from 'react'
+import type { FunctionComponent, SVGProps } from 'react'
+
+import type { ValidIconNames } from '@/src/lib/components/icons/icon-names'
+import { Spinner } from '../spinner'
+
+export type IconProps = SVGProps<SVGSVGElement> & {
+  name: ValidIconNames
+}
+
+function Icon({ name, ...rest }: IconProps) {
+  const [IconComponent, setIconComponent] = useState<FunctionComponent<
+    SVGProps<SVGSVGElement>
+  > | null>(null)
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    const loadIcon = async () => {
+      setLoading(true)
+      try {
+        // Dynamic import with explicit path
+        const imported = (await import(`@/src/lib/components/icons/${name}.svg`)) as {
+          default: FunctionComponent<SVGProps<SVGSVGElement>>
+        }
+        setIconComponent(() => imported.default)
+      } catch (error) {
+        console.error(`Error loading icon ${name}:`, error)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    void loadIcon()
+  }, [name])
+
+  if (loading) return <Spinner className={rest.className} />
+
+  return IconComponent ? <IconComponent {...rest} /> : null
+}
+
+export default Icon

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

@@ -0,0 +1 @@
+export { default as Icon } from './icon'

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

@@ -0,0 +1,3 @@
+<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>

package/src/lib/components/index.ts

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

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

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

package/src/lib/components/spinner/spinner.tsx

@@ -0,0 +1,25 @@
+import type { SpinnerProps } from './types'
+
+import styles from './styles.module.css'
+
+function Spinner({ className }: SpinnerProps) {
+  return (
+    <svg
+      className={className}
+      stroke='currentColor'
+      viewBox='0 0 24 24'
+      xmlns='http://www.w3.org/2000/svg'>
+      <g className={styles.spinner}>
+        <circle
+          className={styles.circle}
+          cx='12'
+          cy='12'
+          r='9.5'
+          fill='none'
+          strokeWidth='3'></circle>
+      </g>
+    </svg>
+  )
+}
+
+export default Spinner

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

@@ -0,0 +1,31 @@
+.spinner {
+  transform-origin: center;
+  animation: spinner_zKoa 2s linear infinite;
+}
+
+.circle {
+  stroke-linecap: round;
+  animation: spinner_YpZS 1.5s ease-in-out infinite;
+}
+
+@keyframes spinner_zKoa {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spinner_YpZS {
+  0% {
+    stroke-dasharray: 0 150;
+    stroke-dashoffset: 0;
+  }
+  47.5% {
+    stroke-dasharray: 42 150;
+    stroke-dashoffset: -16;
+  }
+  95%,
+  100% {
+    stroke-dasharray: 42 150;
+    stroke-dashoffset: -59;
+  }
+}

package/src/lib/components/spinner/types.ts

@@ -0,0 +1 @@
+export type SpinnerProps = { className?: string }

package/src/lib/hooks/index.ts

@@ -0,0 +1 @@
+export * from './use-default-id'

package/src/lib/hooks/use-default-id/index.ts

@@ -0,0 +1 @@
+export { default as useDefaultId } from './use-default-id'

package/src/lib/hooks/use-default-id/use-default-id.tsx

@@ -0,0 +1,13 @@
+import { useLayoutEffect } from 'react'
+
+const useDefaultId = () => {
+  useLayoutEffect(() => {
+    document.body.setAttribute('id', 'hotmart-app-tutor-ai-consumer-root')
+
+    return () => {
+      document.body.removeAttribute('id')
+    }
+  })
+}
+
+export default useDefaultId

package/src/lib/utils/constants.ts

@@ -0,0 +1,2 @@
+export const devMode = process.env.NODE_ENV === 'development'
+export const productionMode = process.env.NODE_ENV === 'production'

package/src/lib/utils/http-codes.ts

@@ -0,0 +1,13 @@
+const HttpCodes = {
+  OK: 200,
+  NO_CONTENT: 204,
+  BAD_REQUEST: 400,
+  UNAUTHORIZED: 401,
+  FORBIDDEN: 403,
+  NOT_FOUND: 404,
+  NOT_ALLOWED: 405,
+  UNPROCESSABLE_ENTITY: 422,
+  INTERNAL_SERVER_ERROR: 500
+}
+
+export default HttpCodes

package/src/lib/utils/index.ts

@@ -0,0 +1,3 @@
+export * from './constants'
+export { default as HttpCodes } from './http-codes'
+export * from './languages'

package/src/lib/utils/languages.ts

@@ -0,0 +1,7 @@
+export const Languages = {
+  EN: 'en',
+  PT_BR: 'pt-BR',
+  FR: 'fr',
+  ES: 'es',
+  AR: 'ar'
+}

package/src/main/index.ts

@@ -0,0 +1 @@
+export { default as Main } from './main'

package/src/main/main.spec.tsx

@@ -0,0 +1,15 @@
+import { render, screen, waitFor } from '@/config/tests'
+import type { WidgetSettingProps } from '../types'
+import { Main } from '.'
+
+describe('Main', () => {
+  const renderComponent = () => render(<Main settings={{} as WidgetSettingProps} />)
+
+  it('should render without errors', async () => {
+    renderComponent()
+
+    await waitFor(() =>
+      expect(screen.getByText(/general.greetings.description/i)).toBeInTheDocument()
+    )
+  })
+})

package/src/main/main.tsx

@@ -0,0 +1,27 @@
+import '@/config/styles/index.css'
+
+import clsx from 'clsx'
+
+import { useDefaultId } from '@/src/lib/hooks'
+import { useAppLang } from '../config/i18n'
+import { ChatInput } from '../modules/create-message/components'
+import { GreetingsCard } from '../modules/widget/components'
+import type { WidgetSettingProps } from '../types'
+
+import styles from './styles.module.css'
+
+function Main({ settings }: { settings: WidgetSettingProps }) {
+  useDefaultId()
+  useAppLang(settings.locale)
+
+  return (
+    <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>
+  )
+}
+
+export default Main