app-tutor-ai-consumer 1.3.0 → 1.4.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [1.4.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.3.0...v1.4.0) (2025-06-26)
+
+### Bug Fixes
+
+- pr issues ([74efaec](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/74efaecaec56aa84808325cb05bc50bd0b50a6ef))
+- pr issues ([ab7a3a8](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/ab7a3a80a5d45b857effb2d281d9523d9789af98))
+
+### Features
+
+- add tutor message markdown support ([4328fc4](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/4328fc402c47f501ddd9761f612325515fc8c6e2))
+- add tutor messages and profile service ([213611b](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/213611b570a163c27d980a83a8a8a4dd2cf6e077))
+
 # [1.3.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.2.0...v1.3.0) (2025-06-24)
 
 ### Bug Fixes

package/config/vitest/setupTests.ts

@@ -1,18 +1,23 @@
+import 'dayjs/locale/pt-br'
 import '@testing-library/jest-dom/vitest'
 
 import { cleanup, configure } from '@testing-library/react'
 
 import { serviceWorker } from '@/src/config/tests/worker'
+import { initDayjs } from '@/src/config/dayjs'
+import * as I18n from '@/src/config/i18n'
 
 configure({ testIdAttribute: 'data-test' })
 
 beforeEach(() => {
   cleanup()
+  vi.spyOn(I18n, 't').mockImplementation((...args) => args[0])
 })
 
 // Start worker before all tests
-beforeAll(() => {
+beforeAll(async () => {
   serviceWorker.listen()
+  await initDayjs('pt-br')
 })
 
 //  Close serviceWorker after all tests

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-tutor-ai-consumer",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "main": "index.js",
   "scripts": {
     "dev": "rspack serve --env=development --config config/rspack/rspack.config.js",
@@ -54,6 +54,7 @@
     "@testing-library/user-event": "~14.6.1",
     "@types/axios": "~0.9.36",
     "@types/chance": "~1.1.6",
+    "@types/linkify-it": "~5.0.0",
     "@types/node": "~24.0.0",
     "@types/react": "~19.1.7",
     "@types/react-dom": "~19.1.6",
@@ -107,12 +108,20 @@
     "@tanstack/react-query": "~5.80.6",
     "@tanstack/react-query-persist-client": "~5.80.7",
     "clsx": "~2.1.1",
+    "dayjs": "~1.11.13",
     "i18next": "~25.2.1",
     "i18next-resources-to-backend": "~1.2.1",
     "jotai": "~2.12.5",
+    "linkify-it": "~5.0.0",
+    "prism-react-renderer": "~2.4.1",
     "react": "~19.1.0",
     "react-dom": "~19.1.0",
-    "react-i18next": "~15.5.2"
+    "react-i18next": "~15.5.2",
+    "react-markdown": "~10.1.0",
+    "rehype-raw": "~7.0.0",
+    "rehype-sanitize": "~6.0.0",
+    "remark-breaks": "~4.0.0",
+    "remark-gfm": "~4.0.1"
   },
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "4.6.1",

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

@@ -7,11 +7,20 @@ declare module '*.css'
 
 declare module '*.css?inline'
 
-declare module '*.png'
+declare module '*.png' {
+  const content: string
+  export default content
+}
 
-declare module '*.jpg'
+declare module '*.jpg' {
+  const content: string
+  export default content
+}
 
-declare module '*.gif'
+declare module '*.gif' {
+  const content: string
+  export default content
+}
 
 declare module '*.svg?url' {
   const content: string

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/styles/global.css

@@ -77,10 +77,28 @@
   --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/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,10 +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/index.ts

@@ -1,4 +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'

package/src/lib/components/markdownrenderer/components/md-code-block/md-code-block.tsx

@@ -0,0 +1,71 @@
+import { memo, useState } from 'react'
+import { Highlight, themes } from 'prism-react-renderer'
+import type { PropsWithChildren } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { copyTextToClipboard, extractTextFromReactNodes } from '@/src/lib/utils'
+
+export type MdCodeBlockProps = PropsWithChildren<{
+  inline?: boolean
+  className?: string
+}>
+
+const MdCodeBlock = memo(({ inline, className, children, ...props }: MdCodeBlockProps) => {
+  const { t } = useTranslation()
+  const [copied, setCopied] = useState(false)
+  const codeContent = extractTextFromReactNodes(children)
+  const match = /language-(\w+)/.exec(className || '')
+  const language = match ? match[1] : 'text'
+
+  const handleCopy = () => {
+    setCopied(true)
+    void copyTextToClipboard(codeContent)
+      .then(
+        (result) =>
+          new Promise((resolve, reject) => {
+            if (!result) return reject(new Error('copy failed'))
+            setTimeout(resolve, 2000)
+          })
+      )
+      .finally(() => setCopied(false))
+  }
+
+  if (inline) {
+    return (
+      <code className='rounded bg-neutral-800 px-2 py-1 font-mono text-sm text-pink-600' {...props}>
+        {children}
+      </code>
+    )
+  }
+
+  return (
+    <div className='group relative'>
+      <div className='flex items-center justify-between rounded-t-lg bg-neutral-800 px-4 py-2 text-sm text-neutral-300'>
+        <span className='font-mono text-xs uppercase tracking-wide'>{language}</span>
+        <button
+          onClick={handleCopy}
+          className='rounded bg-neutral-700 px-2 py-1 text-xs opacity-0 transition-opacity duration-200 hover:bg-neutral-600 hover:text-neutral-0 group-hover:opacity-100'>
+          {t(copied ? `general.buttons.copied` : 'general.buttons.copy')}
+        </button>
+      </div>
+
+      <Highlight theme={themes.vsDark} code={codeContent} language={language}>
+        {({ className: highlightClassName, style, tokens, getLineProps, getTokenProps }) => (
+          <pre className={`${highlightClassName} overflow-x-auto rounded-b-lg p-4`} style={style}>
+            {tokens.map((line, i) => (
+              <div key={i} {...getLineProps({ line })}>
+                {line.map((token, key) => (
+                  <span key={key} {...getTokenProps({ token })} />
+                ))}
+              </div>
+            ))}
+          </pre>
+        )}
+      </Highlight>
+    </div>
+  )
+})
+
+MdCodeBlock.displayName = 'MdCodeBlock'
+
+export default MdCodeBlock

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

@@ -0,0 +1,2 @@
+export * from './markdownrenderer'
+export { default as MarkdownRenderer } from './markdownrenderer'