app-tutor-ai-consumer 1.4.0 → 1.5.0

package/.github/workflows/staging-staging.yml

@@ -0,0 +1,148 @@
+name: Deploy Staging (staging branch)
+run-name: "Staging deployment: ${{ github.ref_type }} ${{ github.ref_name }} by @${{ github.actor }}"
+
+concurrency: staging-${{ github.ref }}
+
+on:
+  push:
+    branches:
+      - staging/**
+
+env:
+  APP_NAME: app-tutor-ai-consumer
+  BUCKET_NAME: app-club-microfrontends
+  AWS_DEFAULT_REGION: us-east-1
+  CLOUDFRONT_ACCOUNT_ID: "449466460580"
+  CLOUDFRONT_DISTRIBUTION: "E19SXB8YMSF4QX"
+  CLOUDFRONT_URL: https://app-club-microfrontends.buildstaging.com
+  GH_TOKEN: ${{ secrets.CI_GH_TOKEN }}
+  SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+  LANG_ENV: staging
+
+jobs:
+  deploy-staging:
+        name: Deploy Staging
+        runs-on: [buildstaging-high-iac]
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+              with:
+                token: ${{ secrets.CI_GH_TOKEN }}
+                fetch-depth: 0
+                ref: ${{ env.BRANCH_REF }}
+                fetch-tags: true
+
+            - name: Restore Cache
+              uses: Hotmart-Org/actions/cache@master
+              with:
+                bucket: buildstaging-pipeline-cache
+                cache-key: "${{ hashFiles('package.json') }}"
+                restore: true
+                mount: 'node_modules/'
+
+            - name: Setup Node.js
+              uses: actions/setup-node@v4
+              with:
+                node-version-file: '.nvmrc'
+
+            - name: Retrieve .npmrc
+              uses: Hotmart-Org/actions/codeartifact@master
+              with:
+                npmrc: ${{ secrets.NPM_RC }}
+                fontawesome-registry-token: ${{ secrets.FONTAWESOME_REGISTRY_TOKEN }}
+
+            - name: install-dependencies
+              run: npm ci --include=optional
+
+            - name: Rebuild Cache
+              uses: Hotmart-Org/actions/cache@master
+              with:
+                bucket: buildstaging-pipeline-cache
+                cache-key: "${{ hashFiles('package.json') }}"
+                rebuild: true
+                mount: 'node_modules/'
+
+            - name: pre-build-staging
+              run: |
+                echo "${{ env.LANG_ENV }}"
+                rm -rf public/locales 
+                mkdir public/locales 
+                npm run fetch-langs
+
+            - name: build-staging
+              run: npm run build:staging
+
+            - name: Deploy Microfrontend s3 - ${{ env.APP_NAME }}
+              uses: Hotmart-Org/actions/s3/microfrontend/deploy@master
+              with:
+                bucket-name: ${{ env.BUCKET_NAME }}
+                app-name: ${{ env.APP_NAME }}
+                package-json-path: ./package.json
+                bundle-source: ./dist
+                account-id: ${{ env.CLOUDFRONT_ACCOUNT_ID }}
+                cdn-distribution: ${{ env.CLOUDFRONT_DISTRIBUTION }}
+                cdn-url: ${{ env.CLOUDFRONT_URL }}
+
+  staging-notification:
+    name: 'Staging Notification'
+    runs-on: [buildstaging-iac]
+    needs: ['deploy-staging']
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Extract version from package.json
+        run: |
+          VERSION=$(cat package.json | jq -r .version)
+          echo "Extracted version: $VERSION"
+          echo "VERSION=$VERSION" >> $GITHUB_ENV
+
+      - name: Notify Google Chat
+        uses: Hotmart-Org/actions/notification@master
+        env:
+          VERSION: ${{ env.VERSION }}
+        with:
+          type: 'Original'
+          author: true
+          webhook-chat: 'https://chat.googleapis.com/v1/spaces/AAAA1nvOyjo/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=uuL7DA8zTxUkJjQa39HIM0TYVZV0DvneZ0mklNhEr5M'
+          body: |
+            {
+              "text": "🚧 *[STAGING] app-tutor-ai-consumer v${{ env.VERSION }}*: staging deploy: ${{ github.ref_name }}",
+              "cards": [
+                {
+                  "header": {
+                    "title": "Started by ${{ github.actor }}"
+                  },
+                  "sections": [
+                    {
+                      "widgets": [
+                        {
+                          "buttons": [
+                            {
+                              "textButton": {
+                                "onClick": {
+                                  "openLink": {
+                                    "url": "${{ github.server_url }}/${{ github.repository }}/commit/${{ github.sha }}"
+                                  }
+                                },
+                                "text": "View commit"
+                              }
+                            },
+                            {
+                              "textButton": {
+                                "onClick": {
+                                  "openLink": {
+                                    "url": "https://github.com/Hotmart-Org/app-tutor-ai-consumer/actions/runs/${{ github.run_id }}"
+                                  }
+                                },
+                                "text": "Follow this deploy"
+                              }
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }

package/.github/workflows/staging.yml

@@ -5,7 +5,6 @@ on:
     push:
         branches:
             - main
-            - staging/*
 
 concurrency: staging
 
@@ -141,7 +140,7 @@ jobs:
           uses: newrelic/deployment-marker-action@v2.5.1
           env:
             VERSION: ${{ env.VERSION }}
-            NEW_RELIC_API_KEY: NRAK-14TLYFWRA5RCKUGK4A3TJSAPU78
+            NEW_RELIC_API_KEY: ${{ secrets.NEW_RELIC_API_KEY }}
             NEW_RELIC_DEPLOYMENT_ENTITY_GUID: Mjc1MDN8QVBNfEFQUExJQ0FUSU9OfDEwOTE1MDMzMTE
           with:
             apiKey: ${{ env.NEW_RELIC_API_KEY }}

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [1.5.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.4.0...v1.5.0) (2025-07-10)
+
+### Bug Fixes
+
+- scrolling PR issues ([d2a8faa](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/d2a8faac05c79d1b18f793981d69036687fefa0e))
+
+### Features
+
+- add infinite scroll UI ([8c86dd8](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/8c86dd8043d0f10e8deae787e6f8870555f5c5f2))
+- adding specific pipiline to staging branch ([bee74d3](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/bee74d37721e8900163409b5cd493a213c92fa8d))
+- adding styles ([2a33e03](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/2a33e035f1e4b146cc7b03ba9f201a2f494bc31b))
+- adding styles file ([ef4d4ec](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/ef4d4ec50c010f39dfba154b084cbe0dc9ece05b))
+
 # [1.4.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.3.0...v1.4.0) (2025-06-26)
 
 ### Bug Fixes

package/config/rspack/rspack.config.js

@@ -46,7 +46,7 @@ module.exports = async function (env) {
       path: paths.DIST,
       publicPath: bundlePath,
       pathinfo: !productionMode,
-      filename: `[name].[fullhash].${fileVersion}.js`,
+      filename: `remoteEntry.js`,
       chunkFilename: `[name].[fullhash].chunk.${fileVersion}.js`,
       sourceMapFilename: `[name].[fullhash].${fileVersion}.js.map`,
       clean: true
@@ -166,6 +166,10 @@ module.exports = async function (env) {
       new rspack.HtmlRspackPlugin({
         template: path.resolve(paths.PUBLIC, 'index.html'),
         favicon: path.resolve(paths.PUBLIC, 'favicon.ico')
+      }),
+      new rspack.CssExtractRspackPlugin({
+        filename: productionMode ? `app-tutor-ai-consumer.css` : '[name].[contenthash].css',
+        chunkFilename: productionMode ? '[id].[contenthash].css' : '[id].[contenthash].css'
       })
     ].concat(await getEnvironmentPlugins(!productionMode)),
     watchOptions: {

package/config/vitest/__mocks__/icons.tsx

@@ -0,0 +1,3 @@
+vi.mock('@/src/lib/components/icons', () => ({
+  Icon: vi.fn(({ name }) => <div data-test='lazy-icon'>{name}</div>)
+}))

package/config/vitest/__mocks__/intersection-observer.ts

@@ -0,0 +1,10 @@
+beforeEach(() => {
+  const mockIntersectionObserver = vi.fn()
+  mockIntersectionObserver.mockReturnValue({
+    observe: () => null,
+    unobserve: () => null,
+    disconnect: () => null
+  })
+
+  window.IntersectionObserver = mockIntersectionObserver
+})

package/config/vitest/__mocks__/sparkie.tsx

@@ -1,12 +1,3 @@
-vi.mock('@hotmart/sparkie', () => {
-  const Sparkie = vi.fn()
+import SparkieMock from '@/src/modules/sparkie/__tests__/sparkie.mock'
 
-  Sparkie.prototype.destroy = vi.fn()
-  Sparkie.prototype.init = vi.fn()
-  Sparkie.prototype.off = vi.fn()
-  Sparkie.prototype.on = vi.fn()
-  Sparkie.prototype.listener = { trackTyping: vi.fn() }
-  Sparkie.prototype.setAPIToken = vi.fn()
-
-  return { default: Sparkie }
-})
+vi.mock('@hotmart/sparkie', () => ({ default: SparkieMock }))

package/config/vitest/__mocks__/use-init-sparkie.tsx

@@ -0,0 +1,14 @@
+import { useInitSparkie } from '@/src/modules/widget/hooks/use-init-sparkie'
+
+vi.mock('@/src/modules/widget/hooks/use-init-sparkie/use-init-sparkie', () => ({
+  useInitSparkie: vi.fn()
+}))
+
+beforeEach(() => {
+  vi.mocked(useInitSparkie).mockReturnValue({
+    data: true,
+    isError: false,
+    isLoading: false,
+    refetch: vi.fn()
+  } as unknown as ReturnType<typeof useInitSparkie>)
+})

package/config/vitest/vitest.config.mts

@@ -12,7 +12,10 @@ export default defineConfig({
       './config/vitest/setupTests.ts',
       './config/vitest/__mocks__/i18n.tsx',
       './config/vitest/__mocks__/sparkie.tsx',
-      './config/vitest/polyfills/global.js',
+      './config/vitest/__mocks__/icons.tsx',
+      './config/vitest/__mocks__/intersection-observer.ts',
+      './config/vitest/__mocks__/use-init-sparkie.tsx',
+      './config/vitest/polyfills/global.js'
     ],
     coverage: {
       include: ['src/**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
@@ -28,7 +31,7 @@ export default defineConfig({
         'src/**/*.builder.ts*',
         'src/app-injector.tsx',
         'src/bootstrap.tsx',
-        'src/index.ts',
+        'src/index.ts'
       ],
       reporter: ['text', 'html'],
       provider: 'istanbul',
@@ -36,13 +39,15 @@ export default defineConfig({
         branches: 3,
         lines: 3,
         functions: 3,
-        statements: 3,
-      },
+        statements: 3
+      }
     },
+    testTimeout: 10000,
+    hookTimeout: 10000,
     env: {
       ...config({
-        path: './environments/.env.test',
-      }).parsed,
-    },
-  },
+        path: './environments/.env.test'
+      }).parsed
+    }
+  }
 })

package/environments/.env.test

@@ -39,3 +39,5 @@ AUTH_CLIENT_SECRET=
 
 # BUNDLE
 BUNDLE_PATH=
+
+VITE_REACT_QUERY_EXPERIMENTAL_PREFETCH_IN_RENDER=true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-tutor-ai-consumer",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "main": "index.js",
   "scripts": {
     "dev": "rspack serve --env=development --config config/rspack/rspack.config.js",
@@ -8,9 +8,9 @@
     "generate-icon-types": "ts-node scripts/generate-icon-types.js",
     "postgenerate-icon-types": "npm run format",
     "prebuild": "npm run generate-icon-types",
-    "build": "rspack build --mode=production --env=production --config config/rspack/rspack.config.js",
+    "build": "NODE_ENV=production rspack build --mode=production --env=production --config config/rspack/rspack.config.js",
     "prebuild:staging": "npm run generate-icon-types",
-    "build:staging": "rspack build --mode=production --env=staging --config config/rspack/rspack.config.js",
+    "build:staging": "NODE_ENV=staging rspack build --mode=production --env=staging --config config/rspack/rspack.config.js",
     "prebuild:start": "npm run build",
     "build:start": "NODE_ENV=production rspack preview --config config/rspack/rspack.config.js --port 4200",
     "test": "vitest --config config/vitest/vitest.config.mts",

package/public/index.html

@@ -6,13 +6,12 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css?family=Nunito:400,700"
-      rel="stylesheet"
-    />
+      href="https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap"
+      rel="stylesheet" />
     <title>App Tutor AI Consumer</title>
   </head>
 
-  <body>
+  <body class="bg-ai-dark">
     <div id="root"></div>
   </body>
 </html>

package/src/config/styles/global.css

@@ -75,8 +75,8 @@
   --hc-color-neutral-1000: #000000;
   --ai-color-primary: #a095ec;
   --ai-color-secondary: #6ba1f0;
-  --ai-color-dark: #111925;
-  --ai-color-chat-response: #26202f;
+  --ai-color-dark: #1a1c1f;
+  --ai-color-chat-response: #1e1926;
 
   /* Size */
   --hc-size-spacing-2: 0.5rem;

package/src/config/tanstack/query-client.ts

@@ -21,7 +21,8 @@ export const queryClient = new QueryClient({
           (statusCode < HttpCodes.BAD_REQUEST || statusCode >= HttpCodes.INTERNAL_SERVER_ERROR) &&
           failureCount <= maxRetries
         )
-      }
+      },
+      retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000)
     }
   }
 })

package/src/config/tests/utils.tsx

@@ -11,13 +11,14 @@ import MockRequest from './mockRequest'
 
 const customRender = (
   ui: React.ReactElement,
-  { shallow, withQueryProvider = true, ...options }: IExtendedRenderOptions = {}
+  { shallow, withQueryProvider = true, withProvider, ...options }: IExtendedRenderOptions = {}
 ) => ({
   user: userEvent.setup(),
   ...render(
     setupComponents(ui, {
       shallow,
-      withQueryProvider
+      withQueryProvider,
+      withProvider
     }),
     options
   )

package/src/config/tests/wrappers.tsx

@@ -7,7 +7,10 @@ export const testQueryClient = new QueryClient({
   defaultOptions: {
     queries: {
       retry: false,
-      refetchOnWindowFocus: false
+      gcTime: 0,
+      staleTime: 0,
+      refetchOnWindowFocus: false,
+      experimental_prefetchInRender: true
     },
     mutations: {
       retry: false

package/src/index.tsx

@@ -1,17 +1,39 @@
+import './config/styles/global.css'
+import './config/styles/index.css'
+
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 
 import { initDayjs } from './config/dayjs'
 import { initLanguage } from './config/i18n'
 import { initAxios } from './config/request/api'
+import { productionMode } from './lib/utils'
 import { Main } from './main'
 import { TutorWidgetEvents, TutorWidgetEventTypes } from './modules/widget'
 import type { StartTutorWidgetProps } from './types'
 
+const loadMainStyles = () => {
+  const isProduction = productionMode
+  const bundlePath = !isProduction
+    ? `${process.env.BUNDLE_PATH}/`
+    : `${process.env.BUNDLE_PATH}/${process.env.APP_NAME}/_current/`
+
+  const cssPath = `${bundlePath}app-tutor-ai-consumer.css`
+
+  if (!document.querySelector(`link[href="${cssPath}"]`)) {
+    const linkElement = document.createElement('link')
+    linkElement.rel = 'stylesheet'
+    linkElement.href = cssPath
+    document.head.appendChild(linkElement)
+  }
+}
+
 window.startTutorWidget = async ({
   elementId = 'tutor-chat-app-widget',
   settings
 }: StartTutorWidgetProps) => {
+  loadMainStyles()
+
   const rootElement = document.getElementById(elementId) as HTMLElement
   const root = createRoot(rootElement)
 

package/src/lib/components/icons/arrow-down.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M13.9748 9.83038L8.47139 15.0179C8.37759 15.1116 8.25251 15.1429 8.1587 15.1429C8.03362 15.1429 7.90855 15.1116 7.81474 15.0179L2.31136 9.83038C2.09248 9.64288 2.09248 9.33038 2.28009 9.11163C2.46771 8.89288 2.7804 8.89288 2.96802 9.08038L7.65839 13.4554L7.65839 1.67413C7.65839 1.39288 7.87728 1.14288 8.12743 1.14288C8.37759 1.14288 8.65901 1.39288 8.65901 1.67413L8.65901 13.4554L13.3181 9.08038C13.5057 8.89288 13.8184 8.89288 14.006 9.11163C14.1937 9.33038 14.1937 9.64288 13.9748 9.83038Z"
+    fill="currentColor" />
+</svg>

package/src/lib/components/icons/chevron-down.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+  stroke="currentColor">
+  <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+</svg>

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

@@ -1,2 +1,2 @@
 // Auto-generated file - DO NOT EDIT
-export type ValidIconNames = 'send'
+export type ValidIconNames = 'arrow-down' | 'chevron-down' | 'send'

package/src/lib/components/markdownrenderer/markdownrenderer.tsx

@@ -28,9 +28,7 @@ const mdComponents: Partial<Components> = {
     return <MdCodeBlock {...props} />
   },
   pre({ children }) {
-    return (
-      <span className='my-2 inline-block w-full overflow-hidden rounded-lg border'>{children}</span>
-    )
+    return <span className='my-2 inline-block w-full overflow-hidden rounded-lg'>{children}</span>
   },
   a({ href, children, ...props }) {
     const url = URLutils.getURLwithProtocol(href)
@@ -40,7 +38,7 @@ const mdComponents: Partial<Components> = {
         href={url}
         target={url?.startsWith('http') ? '_blank' : '_self'}
         rel={url?.startsWith('http') ? 'noopener noreferrer' : undefined}
-        className='text-blue-600 underline hover:text-blue-800'
+        className='inline-block break-all text-blue-600 underline hover:text-blue-800'
         {...props}>
         {children}
       </a>
@@ -49,7 +47,7 @@ const mdComponents: Partial<Components> = {
   table({ children, ...props }) {
     return (
       <div className='overflow-x-auto'>
-        <table className='min-w-full border-collapse border border-neutral-300' {...props}>
+        <table className='min-w-full border-collapse border border-neutral-800' {...props}>
           {children}
         </table>
       </div>
@@ -57,14 +55,14 @@ const mdComponents: Partial<Components> = {
   },
   th({ children, ...props }) {
     return (
-      <th className='border border-neutral-300 px-4 py-2 text-left font-semibold' {...props}>
+      <th className='border border-neutral-800 px-4 py-2 text-left font-semibold' {...props}>
         {children}
       </th>
     )
   },
   td({ children, ...props }) {
     return (
-      <td className='border border-neutral-300 px-4 py-2' {...props}>
+      <td className='border border-neutral-800 px-4 py-2' {...props}>
         {children}
       </td>
     )
@@ -72,14 +70,14 @@ const mdComponents: Partial<Components> = {
   blockquote({ children, ...props }) {
     return (
       <blockquote
-        className='my-2 border-l-4 border-blue-500 pl-4 italic text-neutral-100'
+        className='my-2 border-l-4 border-primary-500 pl-4 italic text-neutral-100'
         {...props}>
         {children}
       </blockquote>
     )
   },
   p({ children }) {
-    return <span className='my-2 inline-block'>{children}</span>
+    return <span className='my-3 inline-block'>{children}</span>
   }
 }
 

package/src/lib/hooks/index.ts

@@ -1,2 +1,5 @@
 export * from './use-default-id'
+export * from './use-intersection-observer-reverse-scroll'
+export * from './use-ref-client-height'
 export * from './use-ref-event-listener'
+export * from './use-throttle'

package/src/lib/hooks/use-intersection-observer-reverse-scroll/index.ts

@@ -0,0 +1,2 @@
+export * from './use-intersection-observer-reverse-scroll'
+export { default as useIntersectionObserverReverseScroll } from './use-intersection-observer-reverse-scroll'