app-tutor-ai-consumer 1.2.0 → 1.4.0

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,115 @@
+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 border'>{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='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-300' {...props}>
+          {children}
+        </table>
+      </div>
+    )
+  },
+  th({ children, ...props }) {
+    return (
+      <th className='border border-neutral-300 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}>
+        {children}
+      </td>
+    )
+  },
+  blockquote({ children, ...props }) {
+    return (
+      <blockquote
+        className='my-2 border-l-4 border-blue-500 pl-4 italic text-neutral-100'
+        {...props}>
+        {children}
+      </blockquote>
+    )
+  },
+  p({ children }) {
+    return <span className='my-2 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 +1,2 @@
 export * from './use-default-id'
+export * from './use-ref-event-listener'

package/src/lib/hooks/use-ref-event-listener/index.ts

@@ -0,0 +1,2 @@
+export * from './use-ref-event-listener'
+export { default as useRefEventListener } from './use-ref-event-listener'

package/src/lib/hooks/use-ref-event-listener/use-ref-event-listener.tsx

@@ -0,0 +1,32 @@
+import { useEffect } from 'react'
+
+export type UseRefEventListenerConfig<T extends HTMLElement> = {
+  config: {
+    ref: React.RefObject<T | null>
+    eventTypes: string[]
+    handler: (event: Event) => void
+    options?: AddEventListenerOptions
+  }
+}
+
+function useRefEventListener<T extends HTMLElement>({
+  config: { eventTypes, handler, ref, options }
+}: UseRefEventListenerConfig<T>) {
+  useEffect(() => {
+    const element = ref.current
+
+    if (!element) return
+
+    eventTypes.forEach((ev) => {
+      element.addEventListener(ev, handler, options)
+    })
+
+    return () => {
+      eventTypes.forEach((ev) => {
+        element.removeEventListener(ev, handler, options)
+      })
+    }
+  }, [ref, eventTypes, handler, options])
+}
+
+export default useRefEventListener

package/src/lib/utils/constants.ts

@@ -1,6 +1,6 @@
 export const devMode = process.env.NODE_ENV === 'development'
 export const productionMode = process.env.NODE_ENV === 'production'
 export const RELEASE_FULL_NAME = `${process.env.RELEASE_FULL_NAME}_${process.env.NODE_ENV}`
-export const DEFAULT_STALE_TIME = 1000 * 60 * 30 // 30 minutes
+export const DEFAULT_STALE_TIME = 1000 * 60 * 3 // 3 minutes
 export const APP_VERSION = process.env.PROJECT_VERSION ?? ''
 export const APP_SYSTEM = 'Web'

package/src/lib/utils/copy-text-to-clipboard.tsx

@@ -0,0 +1,13 @@
+export async function copyTextToClipboard(textToCopy: string) {
+  try {
+    if (navigator?.clipboard?.writeText) {
+      await navigator.clipboard.writeText(textToCopy)
+      return true
+    }
+    throw Error('Clipboard API not available or writeText method not supported.')
+  } catch (err) {
+    console.error('Failed to copy text:', err)
+  }
+
+  return false
+}

package/src/lib/utils/extract-text-from-react-nodes.ts

@@ -0,0 +1,23 @@
+import { isValidElement } from 'react'
+import type { ReactElement, ReactNode } from 'react'
+
+export type ElementWithProps = ReactElement & { props: { children: ReactNode } }
+
+export const hasChildren = (element: ReactElement): element is ElementWithProps => {
+  const children = element as ElementWithProps
+
+  return children.props && 'children' in children.props
+}
+
+export const extractTextFromReactNodes = (children: ReactNode): string => {
+  if (typeof children === 'string' || typeof children === 'number') {
+    return String(children)
+  }
+
+  if (Array.isArray(children)) return children.map(extractTextFromReactNodes).join('')
+
+  if (isValidElement(children) && hasChildren(children))
+    return extractTextFromReactNodes(children.props.children)
+
+  return ''
+}

package/src/lib/utils/index.ts

@@ -1,4 +1,7 @@
 export * from './constants'
+export * from './copy-text-to-clipboard'
+export * from './extract-text-from-react-nodes'
 export { default as HttpCodes } from './http-codes'
 export * from './languages'
 export * from './message-types'
+export { default as URLutils } from './urls'

package/src/lib/utils/urls.ts

@@ -0,0 +1,20 @@
+import type { Match } from 'linkify-it'
+import linkifyit from 'linkify-it'
+
+class URLutils {
+  private linkify: linkifyit
+
+  constructor() {
+    this.linkify = new linkifyit()
+  }
+
+  getURLwithProtocol = (url?: string) => {
+    if (!url) return url
+
+    const [result = {} as Match] = this.linkify?.match(url) ?? []
+
+    return result?.url ?? `http://${url}`
+  }
+}
+
+export default new URLutils()

package/src/main/main.spec.tsx

@@ -1,15 +1,25 @@
-import { render, screen, waitFor } from '@/config/tests'
-import type { WidgetSettingProps } from '../types'
+import { chance, render, screen, waitFor } from '@/config/tests'
+import WidgetSettingPropsBuilder from '../modules/widget/__tests__/widget-settings-props.builder'
 import { Main } from '.'
 
 describe('Main', () => {
-  const renderComponent = () => render(<Main settings={{} as WidgetSettingProps} />)
+  const defaultProps = new WidgetSettingPropsBuilder()
+  const renderComponent = (props = { settings: defaultProps }) => render(<Main {...props} />)
+
+  it('should render empty element when settings.tutorName is not defined', async () => {
+    const { container } = renderComponent()
+
+    await waitFor(() => {
+      expect(container).toBeEmptyDOMElement()
+    })
+  })
 
   it('should render without errors', async () => {
-    renderComponent()
+    const props = new WidgetSettingPropsBuilder().withTutorName(chance.name())
+    renderComponent({ settings: props })
 
-    await waitFor(() =>
-      expect(screen.getByText(/general.greetings.description/i)).toBeInTheDocument()
-    )
+    await waitFor(() => {
+      expect(screen.getByText(/onboarding.description/i)).toBeInTheDocument()
+    })
   })
 })

package/src/main/main.tsx

@@ -1,17 +1,12 @@
 import '@/config/styles/index.css'
 
-import clsx from 'clsx'
-
 import { ErrorBoundary, GenericError } from '@/src/lib/components/errors'
 import { useDefaultId } from '@/src/lib/hooks'
 import { useAppLang } from '../config/i18n'
-import { ChatInput } from '../modules/create-message/components'
 import { GlobalProviders } from '../modules/global-providers'
-import { GreetingsCard } from '../modules/widget/components'
+import { WidgetContainer } from '../modules/widget'
 import type { WidgetSettingProps } from '../types'
 
-import styles from './styles.module.css'
-
 function Main({ settings }: { settings: WidgetSettingProps }) {
   useDefaultId()
   useAppLang(settings.locale)
@@ -19,13 +14,7 @@ function Main({ settings }: { settings: WidgetSettingProps }) {
   return (
     <ErrorBoundary fallback={<GenericError />}>
       <GlobalProviders settings={settings}>
-        <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>
+        <WidgetContainer />
       </GlobalProviders>
     </ErrorBoundary>
   )

package/src/modules/messages/__tests__/imessage-with-sender-data.builder.ts

@@ -0,0 +1,113 @@
+import type { MessageContent } from '@hotmart/sparkie/dist/MessageService'
+
+import { chance } from '@/src/config/tests'
+import type { IMessageWithSenderData } from '../types'
+
+class IMessageWithSenderDataBuilder implements IMessageWithSenderData {
+  id: string
+  conversationId: string
+  threadId: string
+  contactId: string
+  type: string
+  channel: string
+  content: MessageContent
+  metadata: {
+    author: 'ai' | 'user'
+    sessionId: string
+    externalId: string
+    correlationId: string
+  }
+  sentAt: number
+  updatedAt: number
+  contact: { id: string; name?: string; picture?: string; userId?: number }
+  parentId?: string
+  deletedAt?: number
+  sending?: boolean
+
+  constructor() {
+    this.id = chance.guid()
+    this.conversationId = chance.guid()
+    this.threadId = chance.guid()
+    this.contactId = chance.guid()
+    this.type = chance.animal()
+    this.channel = chance.name()
+    this.contact = { id: chance.guid() }
+    this.content = { type: chance.cc_type(), text: chance.sentence() }
+    this.metadata = {
+      author: 'ai',
+      sessionId: chance.guid(),
+      externalId: chance.guid(),
+      correlationId: chance.guid()
+    }
+    this.sentAt = chance.date().getTime()
+    this.updatedAt = chance.date().getTime()
+  }
+
+  withId(id: typeof this.id) {
+    this.id = id
+
+    return this
+  }
+
+  withConversationId(conversationId: typeof this.conversationId) {
+    this.conversationId = conversationId
+
+    return this
+  }
+
+  withThreadId(threadId: typeof this.threadId) {
+    this.threadId = threadId
+
+    return this
+  }
+
+  withContactId(contactId: typeof this.contactId) {
+    this.contactId = contactId
+
+    return this
+  }
+
+  withType(type: typeof this.type) {
+    this.type = type
+
+    return this
+  }
+
+  withChannel(channel: typeof this.channel) {
+    this.channel = channel
+
+    return this
+  }
+
+  withContact(contact: typeof this.contact) {
+    this.contact = contact
+
+    return this
+  }
+
+  withContent(content: typeof this.content) {
+    this.content = content
+
+    return this
+  }
+
+  withMetadata(metadata: typeof this.metadata) {
+    this.metadata = metadata
+
+    return this
+  }
+
+  withSentAt(sentAt: typeof this.sentAt) {
+    this.sentAt = sentAt
+
+    return this
+  }
+
+  withUpdatedAt(updatedAt: typeof this.updatedAt) {
+    this.updatedAt = updatedAt
+
+    return this
+  }
+}
+
+export default IMessageWithSenderDataBuilder

package/src/modules/messages/__tests__/imessage-with-sender-data.mock.ts

@@ -0,0 +1,15 @@
+import { MockGenerator } from '@/src/config/tests'
+import type { IMessageWithSenderData } from '../types'
+
+import IMessageWithSenderDataBuilder from './imessage-with-sender-data.builder'
+
+class IMessageWithSenderDataMock extends MockGenerator<Partial<IMessageWithSenderData>> {
+  getOne(properties?: Partial<IMessageWithSenderData>): IMessageWithSenderData {
+    return {
+      ...new IMessageWithSenderDataBuilder(),
+      ...properties
+    }
+  }
+}
+
+export default IMessageWithSenderDataMock

package/src/modules/messages/components/chat-input/chat-input.atom.ts

@@ -0,0 +1,12 @@
+import { atom, useAtom } from 'jotai'
+
+const chatInputValueAtom = atom<string>('')
+
+export const chatInputAtom = atom(
+  (get) => get(chatInputValueAtom),
+  (_, set, config: string) => {
+    set(chatInputValueAtom, config)
+  }
+)
+
+export const useChatInputValueAtom = () => useAtom(chatInputAtom)

package/src/modules/{create-message → messages}/components/chat-input/chat-input.tsx

@@ -3,10 +3,13 @@ import { useTranslation } from 'react-i18next'
 
 import { Icon } from '@/src/lib/components'
 
+import { useChatInputValueAtom } from './chat-input.atom'
 import type { ChatInputProps } from './types'
 
-const ChatInput = forwardRef<HTMLInputElement, ChatInputProps>(function ({ name }, ref) {
+const ChatInput = forwardRef<HTMLInputElement, ChatInputProps>(function ({ name, onSend }, ref) {
   const { t } = useTranslation()
+  const [value] = useChatInputValueAtom()
+
   return (
     <div className='flex items-center rounded-full border-neutral-800 bg-neutral-800 px-4 py-2'>
       <input
@@ -16,8 +19,9 @@ const ChatInput = forwardRef<HTMLInputElement, ChatInputProps>(function ({ name
         type='text'
         className='h-6 w-full border-none bg-transparent text-neutral-400 outline-0 placeholder:text-neutral-400'
         placeholder={t('send_message.field.placeholder')}
+        defaultValue={value}
       />
-      <button>
+      <button onClick={onSend}>
         <Icon name='send' className='h-4 w-4 text-neutral-50' />
       </button>
     </div>

package/src/modules/{create-message → messages}/components/chat-input/index.ts

@@ -1,2 +1,3 @@
 export { default as ChatInput } from './chat-input'
+export * from './chat-input.atom'
 export * from './types'

package/src/modules/{create-message → messages}/components/chat-input/types.ts

@@ -1,3 +1,4 @@
 export type ChatInputProps = {
   name: string
+  onSend?: () => void
 }

package/src/modules/messages/components/index.ts

@@ -0,0 +1,4 @@
+export * from './chat-input'
+export * from './message-img'
+export * from './message-item'
+export * from './messages-list'

package/src/modules/messages/components/message-img/index.ts

@@ -0,0 +1 @@
+export { default as MessageImg } from './message-img'

package/src/modules/messages/components/message-img/message-img.tsx

@@ -0,0 +1,47 @@
+import { useState } from 'react'
+import clsx from 'clsx'
+
+import { Spinner } from '@/src/lib/components'
+import type { ParsedMessage } from '../../types'
+
+import DefaultImage from '@/public/assets/images/default-image.png'
+
+const BASE_WIDTH = 200
+
+export type MessageImgProps = {
+  message: ParsedMessage
+}
+
+function MessageImg({ message: { dimensions, thumbnails, url, name } }: MessageImgProps) {
+  const [isLoading, setIsLoading] = useState(true)
+
+  let height = BASE_WIDTH
+
+  if (!url) return null
+
+  const thumbURL = thumbnails?.md || thumbnails?.sm || thumbnails?.lg || url
+
+  if (dimensions?.width) {
+    height = (height / dimensions.width) * BASE_WIDTH
+  }
+
+  return (
+    <a href={url} target='_blank' rel='noopener noreferrer'>
+      {isLoading && <Spinner className={`h-12 w-12`} />}
+      <img
+        width={BASE_WIDTH}
+        height={height}
+        src={thumbURL}
+        alt={name}
+        className={clsx({ hidden: isLoading })}
+        onLoad={() => setIsLoading(false)}
+        onError={({ currentTarget }) => {
+          currentTarget.src = DefaultImage
+          setIsLoading(false)
+        }}
+      />
+    </a>
+  )
+}
+
+export default MessageImg

package/src/modules/messages/components/message-item/index.ts

@@ -0,0 +1,2 @@
+export * from './message-item'
+export { default as MessageItem } from './message-item'

package/src/modules/messages/components/message-item/message-item.spec.tsx

@@ -0,0 +1,26 @@
+import { render, screen } from '@/src/config/tests'
+import { TEST_MARKDOWN_STUB } from '@/src/lib/components/markdownrenderer/__tests__/markdown.stub'
+import type { ParsedMessage } from '../../types'
+
+import MessageItem from './message-item'
+
+describe('MessageItem', () => {
+  const message = { text: TEST_MARKDOWN_STUB } as ParsedMessage
+
+  const renderComponent = (props = { message }) => render(<MessageItem {...props} />)
+
+  it('should render markdown as html', () => {
+    renderComponent()
+
+    const reactDocLink = screen.getByRole('link', { name: /External Link to React Documentation/i })
+
+    expect(reactDocLink).toBeInTheDocument()
+    expect(reactDocLink).toHaveAttribute('href', 'https://reactjs.org/docs/getting-started.html')
+  })
+
+  it('should render the custom image component', () => {
+    renderComponent()
+
+    expect(screen.getAllByRole('img')).toHaveLength(3)
+  })
+})

package/src/modules/messages/components/message-item/message-item.tsx

@@ -0,0 +1,15 @@
+import type { Components } from 'react-markdown'
+
+import { MarkdownRenderer } from '@/src/lib/components'
+import type { ParsedMessage } from '../../types'
+import { MessageImg } from '../message-img'
+
+const imgComponent: Components['img'] = ({ src }) => {
+  return <MessageImg message={{ thumbnails: {}, url: src, dimensions: {} } as ParsedMessage} />
+}
+
+function MessageItem({ message }: { message: ParsedMessage }) {
+  return <MarkdownRenderer content={message?.text ?? message?.name} imgComponent={imgComponent} />
+}
+
+export default MessageItem

package/src/modules/messages/components/messages-list/index.ts

@@ -0,0 +1,2 @@
+export * from './messages-list'
+export { default as MessagesList } from './messages-list'