app-tutor-ai-consumer 1.3.0 → 1.5.0

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/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'

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

@@ -0,0 +1,113 @@
+import clsx from 'clsx'
+import Markdown, { type Components } from 'react-markdown'
+import rehypeRaw from 'rehype-raw'
+import rehypeSanitize from 'rehype-sanitize'
+import remarkBreaks from 'remark-breaks'
+import remarkGfm from 'remark-gfm'
+
+import { URLutils } from '../../utils'
+
+import MdCodeBlock from './components/md-code-block'
+
+const mdComponents: Partial<Components> = {
+  h1({ children, ...props }) {
+    return (
+      <h1 className='mb-4 border-b pb-2 text-2xl font-bold' {...props}>
+        {children}
+      </h1>
+    )
+  },
+  h2({ children, ...props }) {
+    return (
+      <h2 className='mb-3 mt-6 text-xl font-semibold' {...props}>
+        {children}
+      </h2>
+    )
+  },
+  code(props) {
+    return <MdCodeBlock {...props} />
+  },
+  pre({ children }) {
+    return <span className='my-2 inline-block w-full overflow-hidden rounded-lg'>{children}</span>
+  },
+  a({ href, children, ...props }) {
+    const url = URLutils.getURLwithProtocol(href)
+
+    return (
+      <a
+        href={url}
+        target={url?.startsWith('http') ? '_blank' : '_self'}
+        rel={url?.startsWith('http') ? 'noopener noreferrer' : undefined}
+        className='inline-block break-all text-blue-600 underline hover:text-blue-800'
+        {...props}>
+        {children}
+      </a>
+    )
+  },
+  table({ children, ...props }) {
+    return (
+      <div className='overflow-x-auto'>
+        <table className='min-w-full border-collapse border border-neutral-800' {...props}>
+          {children}
+        </table>
+      </div>
+    )
+  },
+  th({ children, ...props }) {
+    return (
+      <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-800 px-4 py-2' {...props}>
+        {children}
+      </td>
+    )
+  },
+  blockquote({ children, ...props }) {
+    return (
+      <blockquote
+        className='my-2 border-l-4 border-primary-500 pl-4 italic text-neutral-100'
+        {...props}>
+        {children}
+      </blockquote>
+    )
+  },
+  p({ children }) {
+    return <span className='my-3 inline-block'>{children}</span>
+  }
+}
+
+export type MarkdownRendererProps = {
+  content?: string
+  className?: string
+  allowDangerousHtml?: boolean
+  enableGfm?: boolean
+  imgComponent?: Components['img']
+}
+function MarkdownRenderer({
+  content,
+  allowDangerousHtml,
+  className,
+  enableGfm = true,
+  imgComponent
+}: MarkdownRendererProps) {
+  const remarkPlugins = [...(enableGfm ? [remarkGfm] : []), remarkBreaks]
+  const rehypePlugins = [rehypeSanitize, ...(allowDangerousHtml ? [rehypeRaw] : [])]
+
+  return (
+    <div className={clsx('max-w-none', className)}>
+      <Markdown
+        remarkPlugins={remarkPlugins}
+        rehypePlugins={rehypePlugins}
+        components={!imgComponent ? mdComponents : { ...mdComponents, img: imgComponent }}>
+        {content}
+      </Markdown>
+    </div>
+  )
+}
+
+export default MarkdownRenderer

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'

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

@@ -0,0 +1,147 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import { useThrottle } from '../use-throttle'
+
+export type UseIntersectionObserverReverseScrollProps = {
+  hasMore: boolean
+  asyncCallback: () => Promise<void>
+  onScroll?: () => void
+  isLoading?: boolean
+  threshold?: number
+  rootMargin?: string
+  enabled?: boolean
+}
+
+function useIntersectionObserverReverseScroll({
+  hasMore,
+  asyncCallback,
+  onScroll,
+  enabled = true,
+  isLoading = false,
+  rootMargin = '100px 0px',
+  threshold = 0.5
+}: UseIntersectionObserverReverseScrollProps) {
+  const [heightBeforeRender, setHeightBeforeRender] = useState(0)
+  const [shouldRestorePosition, setShouldRestorePosition] = useState(false)
+  const [hasUserScrolled, setHasUserScrolled] = useState(false)
+  const [isInitialLoad, setIsInitialLoad] = useState(true)
+
+  const scrollerRef = useRef<HTMLDivElement>(null)
+  const intersectionTargetRef = useRef<HTMLDivElement>(null)
+  const observerRef = useRef<IntersectionObserver | null>(null)
+
+  const { throttledCallback: throttledHandleScroll } = useThrottle({
+    callback: () => {
+      onScroll?.()
+    },
+    delay: 50
+  })
+
+  const handleScroll = useCallback(() => {
+    const { current: scroller } = scrollerRef
+
+    if (!scroller) return
+
+    if (!hasUserScrolled) setHasUserScrolled(true)
+
+    if (!isInitialLoad) setIsInitialLoad(true)
+
+    throttledHandleScroll()
+  }, [hasUserScrolled, isInitialLoad, throttledHandleScroll])
+
+  const handleIntersection = useCallback(
+    async (entries: IntersectionObserverEntry[]) => {
+      const [entry] = entries
+      const { current: scroller } = scrollerRef
+
+      if (!enabled || !scroller || !isInitialLoad || !hasUserScrolled || isLoading || !hasMore)
+        return
+
+      if (entry?.isIntersecting) {
+        setHeightBeforeRender(scroller.scrollHeight)
+        setShouldRestorePosition(true)
+        await asyncCallback()
+      }
+    },
+    [enabled, hasMore, hasUserScrolled, isInitialLoad, isLoading, asyncCallback]
+  )
+
+  const scrollToBottom = useCallback((smooth = false) => {
+    const { current: scroller } = scrollerRef
+
+    if (!scroller) return
+
+    scroller.scrollTo({
+      top: scroller.scrollHeight,
+      behavior: smooth ? 'smooth' : 'auto'
+    })
+  }, [])
+
+  const resetScrollState = useCallback(() => {
+    setHasUserScrolled(false)
+    setIsInitialLoad(true)
+    setShouldRestorePosition(false)
+    setHeightBeforeRender(0)
+  }, [])
+
+  useEffect(() => {
+    const { current: scroller } = scrollerRef
+    const { current: intersectionTarget } = intersectionTargetRef
+
+    if (!intersectionTarget || !scroller) return
+
+    observerRef.current = new IntersectionObserver((entries) => void handleIntersection(entries), {
+      root: scroller,
+      rootMargin,
+      threshold
+    })
+
+    observerRef.current.observe(intersectionTarget)
+
+    return () => {
+      observerRef.current?.disconnect()
+    }
+  }, [handleIntersection, rootMargin, threshold])
+
+  useEffect(() => {
+    const { current: scroller } = scrollerRef
+    const controller = new AbortController()
+
+    if (!scroller) return
+
+    scroller.addEventListener('scroll', handleScroll, { passive: true, signal: controller.signal })
+
+    return () => {
+      controller.abort()
+    }
+  }, [handleScroll])
+
+  useEffect(() => {
+    const { current: scroller } = scrollerRef
+
+    if (!shouldRestorePosition || isLoading || !scroller) return
+
+    const frameId = requestAnimationFrame(() => {
+      const newScrollTop = scroller.scrollHeight - heightBeforeRender
+
+      scroller.scrollTop = newScrollTop
+      setShouldRestorePosition(false)
+      setHeightBeforeRender(0)
+    })
+
+    return () => {
+      cancelAnimationFrame(frameId)
+    }
+  }, [heightBeforeRender, isLoading, shouldRestorePosition])
+
+  return {
+    scrollerRef,
+    intersectionTargetRef,
+    scrollToBottom,
+    resetScrollState,
+    hasUserScrolled,
+    isInitialLoad
+  }
+}
+
+export default useIntersectionObserverReverseScroll

package/src/lib/hooks/use-ref-client-height/index.ts

@@ -0,0 +1,2 @@
+export * from './use-ref-client-height'
+export { default as useRefClientHeight } from './use-ref-client-height'