app-tutor-ai-consumer 1.2.0 → 1.4.0

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

@@ -7,15 +7,25 @@ declare module '*.css'
 
 declare module '*.css?inline'
 
-declare module '*.png'
-
-declare module '*.jpg'
+declare module '*.png' {
+  const content: string
+  export default content
+}
 
-declare module '*.gif'
+declare module '*.jpg' {
+  const content: string
+  export default content
+}
 
-declare module '*?url'
+declare module '*.gif' {
+  const content: string
+  export default content
+}
 
-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/dayjs/index.ts

@@ -0,0 +1,2 @@
+export * from './init'
+export * from './utils'

package/src/config/dayjs/init.ts

@@ -0,0 +1,28 @@
+import dayjs from 'dayjs'
+import calendar from 'dayjs/plugin/calendar'
+import isBetween from 'dayjs/plugin/isBetween'
+import isToday from 'dayjs/plugin/isToday'
+import localizedFormat from 'dayjs/plugin/localizedFormat'
+import timezone from 'dayjs/plugin/timezone'
+import utc from 'dayjs/plugin/utc'
+
+import { DEFAULT_LANGUAGE } from '../i18n'
+
+export const initDayjs = async (locale: string = DEFAULT_LANGUAGE) => {
+  dayjs.extend(localizedFormat)
+  dayjs.extend(utc)
+  dayjs.extend(timezone)
+  dayjs.extend(isBetween)
+  dayjs.extend(isToday)
+  dayjs.extend(calendar)
+
+  const lng = locale.match(/^pt/i) ? 'pt-br' : locale
+
+  try {
+    await import(`dayjs/locale/${lng}`)
+    dayjs.locale(lng)
+  } catch {
+    await import(`dayjs/locale/${DEFAULT_LANGUAGE}`)
+    dayjs.locale(DEFAULT_LANGUAGE)
+  }
+}

package/src/config/dayjs/utils/format-fulldate.ts

@@ -0,0 +1,7 @@
+import dayjs from 'dayjs'
+
+export const formatFullDate = (timestamp?: dayjs.ConfigType) => {
+  const time = dayjs(timestamp)
+
+  return time.format('L')
+}

package/src/config/dayjs/utils/format-time.ts

@@ -0,0 +1,20 @@
+import dayjs from 'dayjs'
+
+import { t } from '@/src/config/i18n'
+
+export const formatTime = (timestamp: dayjs.ConfigType, ignoreTime = false) => {
+  const time = dayjs(timestamp)
+
+  if (!time.isValid()) {
+    return 'Invalid date'
+  }
+
+  const daysDiff = dayjs().diff(time, 'day')
+
+  return time.calendar(null, {
+    sameDay: ignoreTime ? `[${t('general.today')}]` : 'LT',
+    lastDay: `[${t('general.yesterday')}]`,
+    lastWeek: daysDiff <= 7 ? 'dddd' : 'L',
+    sameElse: 'L'
+  })
+}

package/src/config/dayjs/utils/index.ts

@@ -0,0 +1,2 @@
+export * from './format-fulldate'
+export * from './format-time'

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,10 +76,29 @@
   --ai-color-primary: #a095ec;
   --ai-color-secondary: #6ba1f0;
   --ai-color-dark: #111925;
+  --ai-color-chat-response: #26202f;
+
+  /* Size */
+  --hc-size-spacing-2: 0.5rem;
+  --hc-size-border-medium: 0.5rem;
 }
 
 #hotmart-app-tutor-ai-consumer-root {
-  composes: scrollbar from './shared-styles.module.css';
+  & *::-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-800);
+    border-radius: var(--hc-size-border-medium);
+    border: calc(var(--hc-size-border-medium) / 2) solid transparent;
+  }
+
   font-family:
     'Nunito Sans',
     -apple-system,

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/tanstack/query-provider.tsx

@@ -10,7 +10,7 @@ function QueryProvider({ children, showDevTools = true }: QueryProviderProps) {
   return (
     <PersistQueryClientProvider client={queryClient} persistOptions={{ persister }}>
       {children}
-      {showDevTools && <ReactQueryDevtools />}
+      {showDevTools && <ReactQueryDevtools buttonPosition='top-right' />}
     </PersistQueryClientProvider>
   )
 }

package/src/config/tests/handlers.ts

@@ -1,7 +1,16 @@
 import { http, HttpResponse } from 'msw'
 
+import { ProfileEndpoints } from '@/src/modules/profile'
+import ProfileAPIPropsBuilder from '@/src/modules/profile/__tests__/profile-api-props.builder'
+
 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 })
+  }),
+  http.all(ProfileEndpoints.getProfile(), () => {
+    return HttpResponse.json(new ProfileAPIPropsBuilder())
   })
 ]

package/src/index.tsx

@@ -1,7 +1,9 @@
 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 { Main } from './main'
 import { TutorWidgetEvents, TutorWidgetEventTypes } from './modules/widget'
 import type { StartTutorWidgetProps } from './types'
@@ -13,7 +15,9 @@ window.startTutorWidget = async ({
   const rootElement = document.getElementById(elementId) as HTMLElement
   const root = createRoot(rootElement)
 
+  initAxios(settings.hotmartToken)
   await initLanguage(settings.locale)
+  await initDayjs(settings.locale)
 
   if (root)
     root.render(

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,5 @@
+export * from './button'
 export * from './errors'
 export * from './icons'
+export * from './markdownrenderer'
 export * from './spinner'

package/src/lib/components/markdownrenderer/__tests__/markdown.stub.ts

@@ -0,0 +1,334 @@
+export const TEST_MARKDOWN_STUB = `# Main Heading - Testing Markdown Renderer
+
+This is a comprehensive test for our markdown renderer component. Let's see how it handles various elements.
+
+## Subheading Level 2
+
+### Subheading Level 3
+
+#### Subheading Level 4
+
+---
+
+## Text Formatting
+
+Here's some **bold text** and *italic text*. You can also combine them for ***bold and italic***.
+
+We also support ~~strikethrough text~~ and \`inline code snippets\`.
+
+> This is a blockquote. It should stand out from regular text.
+> 
+> Blockquotes can span multiple lines and even contain other markdown elements like **bold text**.
+
+---
+
+## Links
+
+- [External Link to React Documentation](https://reactjs.org/docs/getting-started.html)
+- [Internal Link](#code-examples)
+- [Email Link](mailto:test@example.com)
+- Auto-link: https://github.com
+
+---
+
+## Images
+
+### Regular Image
+![React Logo](https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png)
+
+### Image with Alt Text
+![TypeScript Logo - A blue square with white TS text](https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Typescript_logo_2020.svg/512px-Typescript_logo_2020.svg.png)
+
+### Broken Image (for error handling)
+![This image doesn't exist](https://invalid-url.com/image.png)
+
+---
+
+## Lists
+
+### Unordered List
+- First item
+- Second item with **bold text**
+- Third item with [a link](https://example.com)
+  - Nested item 1
+  - Nested item 2
+    - Double nested item
+- Fourth item with \`inline code\`
+
+### Ordered List
+1. First numbered item
+2. Second numbered item
+3. Third item with multiple lines
+   
+   This paragraph is part of item 3.
+   
+4. Fourth item
+   1. Nested numbered item
+   2. Another nested item
+
+### Task List (GitHub Flavored Markdown)
+- [x] Completed task
+- [ ] Incomplete task
+- [x] Another completed task
+- [ ] Task with **bold text**
+
+---
+
+## Code Examples
+
+### Inline Code
+Use the \`useState\` hook for state management in React.
+
+### JavaScript Code Block
+\`\`\`javascript
+function greetUser(name) {
+  if (!name) {
+    return "Hello, World!";
+  }
+  return \`Hello, \${name}!\`;
+}
+
+const user = "John Doe";
+console.log(greetUser(user));
+\`\`\`
+
+### TypeScript React Component
+\`\`\`tsx
+import React, { useState, useEffect } from 'react';
+
+interface UserProps {
+  id: number;
+  name: string;
+  email?: string;
+}
+
+const UserComponent: React.FC<UserProps> = ({ id, name, email }) => {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  
+  useEffect(() => {
+    console.log(\`User \${name} loaded\`);
+  }, [name]);
+
+  return (
+    <div className="user-card">
+      <h2>{name}</h2>
+      {email && <p>Email: {email}</p>}
+      <button onClick={() => setIsLoading(!isLoading)}>
+        {isLoading ? 'Loading...' : 'Load Data'}
+      </button>
+    </div>
+  );
+};
+
+export default UserComponent;
+\`\`\`
+
+### CSS Code Block
+\`\`\`css
+.markdown-container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 2rem;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+.code-block {
+  background-color: #f6f8fa;
+  border-radius: 6px;
+  padding: 16px;
+  overflow-x: auto;
+}
+
+@media (max-width: 768px) {
+  .markdown-container {
+    padding: 1rem;
+  }
+}
+\`\`\`
+
+### JSON Data
+\`\`\`json
+{
+  "name": "my-react-app",
+  "version": "1.0.0",
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-markdown": "^8.0.7"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "test": "vitest"
+  }
+}
+\`\`\`
+
+### Bash Commands
+\`\`\`bash
+# Install dependencies
+npm install react-markdown
+
+# Start development server
+npm run dev
+
+# Build for production
+npm run build
+
+# Run tests
+npm test
+\`\`\`
+
+### Python Code
+\`\`\`python
+def fibonacci(n):
+    """Generate Fibonacci sequence up to n terms."""
+    if n <= 0:
+        return []
+    elif n == 1:
+        return [0]
+    elif n == 2:
+        return [0, 1]
+    
+    sequence = [0, 1]
+    for i in range(2, n):
+        sequence.append(sequence[i-1] + sequence[i-2])
+    
+    return sequence
+
+# Example usage
+print(fibonacci(10))
+\`\`\`
+
+---
+
+## Tables
+
+### Simple Table
+| Name | Age | City |
+|------|-----|------|
+| John | 25 | New York |
+| Jane | 30 | Los Angeles |
+| Bob | 35 | Chicago |
+
+### Complex Table with Alignment
+| Feature | React | Vue | Angular |
+|:--------|:-----:|:---:|--------:|
+| Learning Curve | Easy | Easy | Steep |
+| Performance | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
+| Community | Large | Medium | Large |
+| Bundle Size | Small | Small | Large |
+
+### Table with Code and Links
+| Language | Extension | Documentation |
+|----------|-----------|---------------|
+| JavaScript | \`.js\` | [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript) |
+| TypeScript | \`.ts\` | [TS Docs](https://www.typescriptlang.org/docs/) |
+| Python | \`.py\` | [Python Docs](https://docs.python.org/3/) |
+
+---
+
+## Special Characters and Escaping
+
+Here are some special characters: & < > " ' 
+
+HTML entities: &amp; &lt; &gt; &quot; &#39;
+
+Markdown escaping: \\* \\_ \\# \\[ \\] \\( \\)
+
+---
+
+## Horizontal Rules
+
+Above this line is a horizontal rule.
+
+---
+
+Below this line is another horizontal rule.
+
+***
+
+And here's one more made with asterisks.
+
+---
+
+## Mathematical Expressions (if supported)
+
+Inline math: $E = mc^2$
+
+Block math:
+$$
+\\int_{-\\infty}^{\\infty} e^{-x^2} dx = \\sqrt{\\pi}
+$$
+
+---
+
+## HTML Elements (if raw HTML is enabled)
+
+<div style="background-color: #f0f0f0; padding: 10px; border-radius: 5px;">
+  This is raw HTML content within markdown.
+  <br>
+  <strong>Bold text via HTML</strong>
+  <br>
+  <em>Italic text via HTML</em>
+</div>
+
+<details>
+<summary>Click to expand</summary>
+
+This content is hidden by default and can be toggled.
+
+- Item 1
+- Item 2
+- Item 3
+
+</details>
+
+---
+
+## Edge Cases
+
+### Empty Code Block
+\`\`\`
+
+\`\`\`
+
+### Code Block Without Language
+\`\`\`
+function noLanguageSpecified() {
+  return "This should still render";
+}
+\`\`\`
+
+### Very Long Line
+This is a very long line that should test how the renderer handles text wrapping and overflow in different containers and screen sizes to ensure proper responsive behavior.
+
+### Unicode and Emojis
+Unicode characters: café, naïve, résumé
+Emojis: 🚀 ⚡ 💻 🎉 ✅ ❌ 🔥 💡
+
+---
+
+## Conclusion
+
+This markdown document tests:
+
+✅ **Headings** (H1-H6)  
+✅ **Text formatting** (bold, italic, strikethrough)  
+✅ **Links** (external, internal, email, auto-links)  
+✅ **Images** (valid and invalid URLs)  
+✅ **Lists** (ordered, unordered, nested, task lists)  
+✅ **Code blocks** (multiple languages, inline code)  
+✅ **Tables** (simple and complex)  
+✅ **Blockquotes**  
+✅ **Horizontal rules**  
+✅ **Special characters and escaping**  
+✅ **HTML elements** (if enabled)  
+✅ **Edge cases**  
+
+If all these elements render correctly, your markdown component is working properly! 🎉
+
+---
+
+*Last updated: ${new Date().toLocaleDateString()}*
+`

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

@@ -0,0 +1 @@
+export * from './md-code-block'

package/src/lib/components/markdownrenderer/components/md-code-block/index.ts

@@ -0,0 +1 @@
+export { default } from './md-code-block'