app-tutor-ai-consumer 1.3.0 → 1.4.0

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/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/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/index.ts

@@ -1,2 +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/messages-list.tsx

@@ -1,22 +1,51 @@
+import { useRef } from 'react'
+import clsx from 'clsx'
+
+import { useGetProfile } from '@/src/modules/profile'
+import { useWidgetSettingsAtomValue } from '@/src/modules/widget'
+import { useFetchMessages } from '../../hooks'
+import { MessageItem } from '../message-item'
+
 function MessagesList() {
+  const loadFirstPage = useRef(true)
+  const currentMessages = useRef([])
+  const settings = useWidgetSettingsAtomValue()
+  const profileQuery = useGetProfile()
+
+  const messagesQuery = useFetchMessages({
+    conversationId: settings?.conversationId ?? '',
+    currentMessages: currentMessages.current,
+    loadFirstPage: loadFirstPage?.current ?? true,
+    profileId: profileQuery.data?.id ?? '',
+    enabled: Boolean(settings?.conversationId && profileQuery.data?.id)
+  })
+
+  if (messagesQuery.isLoading) return <h3>Loading...</h3>
+
   return (
-    <div className='flex flex-1 flex-col items-start justify-center gap-6'>
-      <div className='max-w-[80%] self-end rounded-lg bg-neutral-800 p-3 text-sm/normal text-neutral-0'>
-        <span>Quero saber o que Tutor do BEM faz</span>
-      </div>
-      <div className='flex max-w-[80%] flex-col gap-1 rounded-lg bg-ai-chat-response p-3 text-sm/normal text-neutral-0'>
-        <span>
-          Sou seu assistente de IA, criado pelo Marcelo Horta, para te acompanhar durante todo o seu
-          aprendizado. Confira o que posso fazer por você:
-        </span>
-        <span>
-          🤓 Dúvidas sobre as aulas:Me faça perguntas sobre o conteúdo das aulas e eu ajudo você a
-          aprender melhor.
-        </span>
-        <span>
-          📝 ResumosPosso gerar um resumo do que foi visto na aula pra facilitar seus estudos.
-        </span>
-      </div>
+    <div className='flex flex-1 flex-col justify-center gap-6'>
+      {messagesQuery.data?.messages &&
+        Array.from(messagesQuery.data.messages).map(([publishingDate, messages], i) => (
+          <div key={i} className='flex flex-1 flex-col justify-center gap-6'>
+            <span className='self-center rounded-full border border-neutral-700 bg-neutral-800 px-4 py-2 text-xs capitalize text-neutral-50'>
+              {publishingDate}
+            </span>
+            {messages.map((msg, k) => (
+              <div
+                key={`${msg.id}-${k}`}
+                className={clsx(
+                  'max-w-[min(80%,52rem)] rounded-lg p-3 text-sm/normal text-neutral-0',
+                  {
+                    'self-end bg-neutral-800': msg.from === 'me' || msg.metadata.author === 'user',
+                    'bg-ai-chat-response':
+                      msg.from !== profileQuery?.data?.id || msg.metadata.author === 'ai'
+                  }
+                )}>
+                <MessageItem message={msg} />
+              </div>
+            ))}
+          </div>
+        ))}
     </div>
   )
 }

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

@@ -0,0 +1 @@
+export * from './use-fetch-messages'

package/src/modules/messages/hooks/use-fetch-messages/index.ts

@@ -0,0 +1,2 @@
+export * from './use-fetch-messages'
+export { default as useFetchMessages } from './use-fetch-messages'

package/src/modules/messages/hooks/use-fetch-messages/use-fetch-messages.spec.tsx

@@ -0,0 +1,46 @@
+import { formatTime } from '@/src/config/dayjs'
+import { chance, renderHook, waitFor } from '@/src/config/tests'
+import type { IMessageWithSenderData } from '../..'
+import { MessagesService } from '../..'
+import IMessageWithSenderDataMock from '../../__tests__/imessage-with-sender-data.mock'
+import { messagesParser } from '../../utils'
+
+import useFetchMessages from './use-fetch-messages'
+
+describe('useFetchMessages', () => {
+  const conversationId = chance.guid()
+
+  const defaultProps = {
+    conversationId,
+    currentMessages: [],
+    loadFirstPage: true,
+    profileId: conversationId,
+    enabled: true
+  }
+  const fetchMsgMock = {
+    hasMore: false,
+    messages: new IMessageWithSenderDataMock().getMany() as IMessageWithSenderData[]
+  }
+
+  const render = (props = defaultProps) => renderHook(() => useFetchMessages(props))
+
+  beforeEach(() => {
+    vi.spyOn(MessagesService, 'fetchMessages').mockResolvedValue(fetchMsgMock)
+  })
+
+  it('should render without errors when given the right props', async () => {
+    const { result } = render()
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true))
+
+    const resMsg = messagesParser({
+      messages: fetchMsgMock.messages,
+      profileId: defaultProps.profileId
+    })
+
+    expect(result.current.data).toMatchObject({
+      hasMore: fetchMsgMock.hasMore,
+      messages: new Map().set(formatTime(resMsg[0].timestamp, true), resMsg)
+    })
+  })
+})

package/src/modules/messages/hooks/use-fetch-messages/use-fetch-messages.tsx

@@ -0,0 +1,103 @@
+import { useCallback, useEffect } from 'react'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
+
+import { formatTime } from '@/src/config/dayjs'
+import { SparkieService } from '@/src/modules/sparkie'
+import MessagesService from '../../service'
+import type {
+  FetchMessagesResponse,
+  IFetchMessagesOptions,
+  IMessage,
+  ParsedMessage
+} from '../../types'
+import { messagesParser } from '../../utils'
+
+export type UseFetchMessagesProps = IFetchMessagesOptions & {
+  profileId: string
+  enabled?: boolean
+}
+
+export const getFetchMessagesQuery = ({
+  conversationId,
+  currentMessages,
+  loadFirstPage,
+  profileId,
+  enabled
+}: UseFetchMessagesProps) => ({
+  queryKey: [
+    'sparkie:messageService:getAll',
+    conversationId,
+    loadFirstPage,
+    currentMessages,
+    profileId
+  ],
+  queryFn: () =>
+    MessagesService.fetchMessages({
+      conversationId,
+      currentMessages,
+      loadFirstPage
+    }),
+  enabled,
+  select({ hasMore, messages }: FetchMessagesResponse) {
+    const parsedMessages = messagesParser({ messages: messages, profileId }).reduce(
+      (msgsMap, currMsg) => {
+        const timestamp = formatTime(currMsg.timestamp, true)
+
+        if (!msgsMap.has(timestamp)) {
+          msgsMap.set(timestamp, [currMsg])
+          return msgsMap
+        }
+
+        const existingTimestampValues = Array.from(msgsMap.get(timestamp) ?? [])
+
+        msgsMap.set(
+          timestamp,
+          [...existingTimestampValues, currMsg].sort((a, b) => a.timestamp - b.timestamp)
+        )
+
+        return msgsMap
+      },
+      new Map<string, ParsedMessage[]>()
+    )
+
+    return { hasMore, messages: parsedMessages }
+  }
+})
+
+function useFetchMessages({
+  conversationId,
+  currentMessages,
+  loadFirstPage,
+  profileId,
+  enabled = false
+}: UseFetchMessagesProps) {
+  const query = getFetchMessagesQuery({
+    conversationId,
+    currentMessages,
+    loadFirstPage,
+    profileId,
+    enabled
+  })
+  const queryClient = useQueryClient()
+
+  const messageReceived = useCallback(
+    (data: IMessage) => {
+      if (data.conversationId !== conversationId) return
+
+      void queryClient.invalidateQueries({ queryKey: query.queryKey })
+    },
+    [conversationId, queryClient, query.queryKey]
+  )
+
+  useEffect(() => {
+    SparkieService.subscribeEvents({ messageReceived })
+
+    return () => {
+      SparkieService.removeEventSubscription({ messageReceived })
+    }
+  }, [messageReceived])
+
+  return useQuery(query)
+}
+
+export default useFetchMessages