app-tutor-ai-consumer 1.4.0 → 1.5.0

package/src/modules/cursor/hooks/use-update-cursor/use-update-cursor.spec.tsx

@@ -0,0 +1,23 @@
+import { chance, renderHook, waitFor } from '@/src/config/tests'
+
+import useUpdateCursor from './use-update-cursor'
+
+describe('useUpdateCursor', () => {
+  const conversationId = chance.guid()
+  const createHook = () => renderHook(useUpdateCursor)
+
+  it('should update the cursor given a conversationId', async () => {
+    const { result } = createHook()
+
+    result.current.mutate(conversationId)
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true))
+
+    expect(result.current.data).toMatchObject({
+      threadId: expect.any(String) as string,
+      contactId: expect.any(String) as string,
+      cursor: expect.any(Number) as number,
+      conversationId: expect.any(String) as string
+    })
+  })
+})

package/src/modules/cursor/hooks/use-update-cursor/use-update-cursor.ts

@@ -0,0 +1,11 @@
+import { useMutation } from '@tanstack/react-query'
+
+import { CursorService } from '../..'
+
+function useUpdateCursor() {
+  return useMutation({
+    mutationFn: (conversationId: string) => CursorService.updateCursor(conversationId)
+  })
+}
+
+export default useUpdateCursor

package/src/modules/cursor/index.ts

@@ -0,0 +1,2 @@
+export { default as CursorService } from './service'
+export * from './types'

package/src/modules/cursor/service.ts

@@ -0,0 +1,15 @@
+import { SparkieService } from '../sparkie'
+
+import type { ICursorUpdate } from './types'
+
+class CursorService {
+  constructor(private sparkie = SparkieService.sparkieInstance) {}
+
+  async updateCursor(conversationId: string): Promise<ICursorUpdate | null> {
+    const data = await this.sparkie.cursorService?.update(conversationId)
+
+    return data ?? null
+  }
+}
+
+export default new CursorService()

package/src/modules/cursor/types.ts

@@ -0,0 +1,9 @@
+export interface ICursor {
+  threadId: string
+  contactId: string
+  cursor: number
+}
+
+export interface ICursorUpdate extends ICursor {
+  conversationId?: string
+}

package/src/modules/global-providers/index.ts

@@ -1 +1,2 @@
+export * from './global-providers'
 export { default as GlobalProviders } from './global-providers'

package/src/modules/messages/__tests__/parsed-message.builder.ts

@@ -0,0 +1,164 @@
+import type { ParsedMessage } from '../types'
+import { msgParser } from '../utils'
+
+import IMessageWithSenderDataBuilder from './imessage-with-sender-data.builder'
+
+const msg = new IMessageWithSenderDataBuilder()
+const parsedMsg = msgParser(msg, msg.contactId)
+
+class ParsedMessageBuilder implements ParsedMessage {
+  from: string
+  id: string
+  isRead: boolean
+  time: string
+  contact: { id: string; name?: string; picture?: string; userId?: number }
+  metadata: Record<string, unknown> & {
+    author: 'ai' | 'user'
+    sessionId: string
+    externalId: string
+    correlationId: string
+  }
+  parentId: string
+  sending: boolean
+  threadId: string
+  timestamp: number
+  type: string
+  text?: string
+  name?: string
+  url?: string
+  dimensions?: { width: number; height: number }
+  thumbnails?: { lg: string; md: string; sm: string }
+  caption?: string
+  loading?: boolean
+
+  constructor() {
+    this.from = parsedMsg.from
+    this.id = parsedMsg.id
+    this.isRead = parsedMsg.isRead
+    this.time = parsedMsg.time
+    this.contact = parsedMsg.contact
+    this.metadata = parsedMsg.metadata
+    this.parentId = parsedMsg.parentId ?? 'no-parent'
+    this.sending = parsedMsg.sending ?? false
+    this.threadId = parsedMsg.threadId
+    this.timestamp = parsedMsg.timestamp
+    this.type = parsedMsg.type
+    this.text = parsedMsg.text
+    this.name = parsedMsg.name
+    this.url = parsedMsg.url
+    this.dimensions = parsedMsg.dimensions
+    this.thumbnails = parsedMsg.thumbnails
+    this.caption = parsedMsg.caption
+    this.loading = parsedMsg.loading
+  }
+
+  withFrom(from: typeof this.from) {
+    this.from = from
+
+    return this
+  }
+
+  withId(id: typeof this.id) {
+    this.id = id
+
+    return this
+  }
+
+  withIsRead(isRead: typeof this.isRead) {
+    this.isRead = isRead
+
+    return this
+  }
+
+  withTime(time: typeof this.time) {
+    this.time = time
+
+    return this
+  }
+
+  withContact(contact: typeof this.contact) {
+    this.contact = contact
+
+    return this
+  }
+
+  withMetadata(metadata: typeof this.metadata) {
+    this.metadata = metadata
+
+    return this
+  }
+
+  withParentId(parentId: typeof this.parentId) {
+    this.parentId = parentId
+
+    return this
+  }
+
+  withSending(sending: typeof this.sending) {
+    this.sending = sending
+
+    return this
+  }
+
+  withThreadId(threadId: typeof this.threadId) {
+    this.threadId = threadId
+
+    return this
+  }
+
+  withTimestamp(timestamp: typeof this.timestamp) {
+    this.timestamp = timestamp
+
+    return this
+  }
+
+  withType(type: typeof this.type) {
+    this.type = type
+
+    return this
+  }
+
+  withText(text: typeof this.text) {
+    this.text = text
+
+    return this
+  }
+
+  withName(name: typeof this.name) {
+    this.name = name
+
+    return this
+  }
+
+  withUrl(url: typeof this.url) {
+    this.url = url
+
+    return this
+  }
+
+  withDimensions(dimensions: typeof this.dimensions) {
+    this.dimensions = dimensions
+
+    return this
+  }
+
+  withThumbnails(thumbnails: typeof this.thumbnails) {
+    this.thumbnails = thumbnails
+
+    return this
+  }
+
+  withCaption(caption: typeof this.caption) {
+    this.caption = caption
+
+    return this
+  }
+
+  withLoading(loading: typeof this.loading) {
+    this.loading = loading
+
+    return this
+  }
+}
+
+export default ParsedMessageBuilder

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

@@ -1,11 +1,11 @@
 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 ParsedMessageBuilder from '../../__tests__/parsed-message.builder'
 
 import MessageItem from './message-item'
 
 describe('MessageItem', () => {
-  const message = { text: TEST_MARKDOWN_STUB } as ParsedMessage
+  const message = new ParsedMessageBuilder().withText(TEST_MARKDOWN_STUB)
 
   const renderComponent = (props = { message }) => render(<MessageItem {...props} />)
 

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

@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import type { Components } from 'react-markdown'
 
 import { MarkdownRenderer } from '@/src/lib/components'
@@ -9,7 +10,19 @@ const imgComponent: Components['img'] = ({ src }) => {
 }
 
 function MessageItem({ message }: { message: ParsedMessage }) {
-  return <MarkdownRenderer content={message?.text ?? message?.name} imgComponent={imgComponent} />
+  return (
+    <div
+      data-test='messages-item'
+      className={clsx(
+        'max-w-[min(80%,52rem)] overflow-x-hidden rounded-lg px-3 text-sm/normal text-neutral-50',
+        {
+          'self-end bg-neutral-800': message.metadata.author === 'user',
+          'bg-ai-chat-response': message.metadata.author === 'ai'
+        }
+      )}>
+      <MarkdownRenderer content={message?.text ?? message?.name} imgComponent={imgComponent} />
+    </div>
+  )
 }
 
 export default MessageItem

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

@@ -0,0 +1,2 @@
+export * from './message-item-end-of-scroll'
+export { default as MessageItemEndOfScroll } from './message-item-end-of-scroll'

package/src/modules/messages/components/message-item-end-of-scroll/message-item-end-of-scroll.tsx

@@ -0,0 +1,14 @@
+export type MessageItemEndOfScrollProps = { show?: boolean }
+
+// TODO: [PLACEHOLDER] Refactor using the PD choice for End of Scroll
+function MessageItemEndOfScroll({ show = true }: MessageItemEndOfScrollProps) {
+  if (!show) return null
+
+  return (
+    <div className='rounded bg-gray-800/50 p-4 text-center text-gray-400'>
+      🎉 You&apos;ve reached the beginning of the conversation!
+    </div>
+  )
+}
+
+export default MessageItemEndOfScroll

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

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

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

@@ -0,0 +1,25 @@
+import type { MouseEventHandler, ReactNode } from 'react'
+
+export type MessageItemErrorProps = {
+  message?: ReactNode
+  retry?: MouseEventHandler<HTMLButtonElement>
+  show?: boolean
+}
+
+// TODO: [PLACEHOLDER] Refactor using the PD choice for Error Handling
+function MessageItemError({ message, retry, show = true }: MessageItemErrorProps) {
+  if (!show) return null
+
+  return (
+    <div className='rounded bg-red-900/20 p-4 text-center text-red-400'>
+      {message}
+      <button
+        onClick={retry}
+        className='ml-2 cursor-pointer rounded bg-danger-600 px-3 py-1 text-sm text-danger-100 transition-colors hover:bg-danger-700'>
+        Retry
+      </button>
+    </div>
+  )
+}
+
+export default MessageItemError

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

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

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

@@ -0,0 +1,16 @@
+import { Spinner } from '@/src/lib/components'
+
+export type MessageItemLoadingProps = { show?: boolean }
+
+// TODO: [PLACEHOLDER] Refactor using the PD choice for loading new messages
+function MessageItemLoading({ show = true }: MessageItemLoadingProps) {
+  if (!show) return null
+
+  return (
+    <div className='flex flex-col items-center justify-center p-8'>
+      <Spinner className='inline-flex h-6 w-6 animate-spin text-neutral-200' />
+    </div>
+  )
+}
+
+export default MessageItemLoading

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

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

package/src/modules/messages/components/messages-list/messages-list.tsx

@@ -1,51 +1,81 @@
-import { useRef } from 'react'
+import { lazy, useCallback, useRef } from 'react'
 import clsx from 'clsx'
 
-import { useGetProfile } from '@/src/modules/profile'
-import { useWidgetSettingsAtomValue } from '@/src/modules/widget'
-import { useFetchMessages } from '../../hooks'
+import { useRefClientHeight } from '@/src/lib/hooks'
+import { useAllMessages, useManageScroll } from '../../hooks'
 import { MessageItem } from '../message-item'
 
+const MessageItemError = lazy(() => import('../message-item-error/message-item-error'))
+
+const MessageItemLoading = lazy(() => import('../message-item-loading/message-item-loading'))
+
+const MessageItemEndOfScroll = lazy(
+  () => import('../message-item-end-of-scroll/message-item-end-of-scroll')
+)
+
+const ScrollToBottomButton = lazy(
+  () => import('@/src/modules/widget/components/scroll-to-bottom-button/scroll-to-bottom-button')
+)
+
 function MessagesList() {
-  const loadFirstPage = useRef(true)
-  const currentMessages = useRef([])
-  const settings = useWidgetSettingsAtomValue()
-  const profileQuery = useGetProfile()
+  const scrollerRef = useRef<HTMLDivElement>(null)
+  const scrollerClientHeight = useRefClientHeight(scrollerRef)
+  const scrollToButtonRef = useRef<HTMLButtonElement>(null)
+  const { allMessages, messagesQuery } = useAllMessages()
+
+  const { showScrollButton } = useManageScroll(scrollerRef)
 
-  const messagesQuery = useFetchMessages({
-    conversationId: settings?.conversationId ?? '',
-    currentMessages: currentMessages.current,
-    loadFirstPage: loadFirstPage?.current ?? true,
-    profileId: profileQuery.data?.id ?? '',
-    enabled: Boolean(settings?.conversationId && profileQuery.data?.id)
-  })
+  const scrollToBottom = useCallback(() => {
+    const { current: scroller } = scrollerRef
 
-  if (messagesQuery.isLoading) return <h3>Loading...</h3>
+    if (!scroller) return
+
+    scroller.scrollTo({
+      top: scroller.scrollHeight,
+      behavior: 'smooth'
+    })
+  }, [])
 
   return (
-    <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
+      ref={scrollerRef}
+      className={clsx(
+        'relative mx-2 flex flex-col gap-2 overflow-auto p-4',
+        `h-[${scrollerClientHeight}]`
+      )}>
+      <MessageItemLoading show={messagesQuery.isFetching} />
+
+      <MessageItemEndOfScroll
+        show={!messagesQuery.isFetching && !messagesQuery.hasNextPage && allMessages.length > 0}
+      />
+
+      <ScrollToBottomButton
+        ref={scrollToButtonRef}
+        top={Math.abs(
+          Number(scrollerRef.current?.clientHeight) -
+            Number(scrollToButtonRef.current?.clientHeight) -
+            24
+        )}
+        show={showScrollButton}
+        onClick={scrollToBottom}
+      />
+
+      {allMessages?.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) => (
+            <MessageItem key={`${msg.id}-${k}`} message={msg} />
+          ))}
+        </div>
+      ))}
+
+      <MessageItemError
+        show={Boolean(messagesQuery.error)}
+        message={`❌ Error loading messages: ${messagesQuery.error?.message ?? ''}`}
+        retry={() => void messagesQuery.refetch()}
+      />
     </div>
   )
 }

package/src/modules/messages/constants.ts

@@ -1 +1,2 @@
 export const MSG_MAX_COUNT = 20
+export const MSG_MAX_PAGES = 20

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

@@ -1 +1,4 @@
+export * from './use-all-messages'
 export * from './use-fetch-messages'
+export * from './use-infinite-get-messages'
+export * from './use-manage-scroll'

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

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

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

@@ -0,0 +1,30 @@
+import { useMemo } from 'react'
+
+import { useGetProfile } from '@/src/modules/profile'
+import { useWidgetSettingsAtomValue } from '@/src/modules/widget'
+import { useInfiniteGetMessages } from '../use-infinite-get-messages'
+
+function useAllMessages() {
+  const settings = useWidgetSettingsAtomValue()
+  const profileQuery = useGetProfile()
+
+  const messagesQuery = useInfiniteGetMessages({
+    conversationId: settings?.conversationId ?? '',
+    profileId: profileQuery.data?.id ?? '',
+    enabled: Boolean(settings?.conversationId && profileQuery.data?.id)
+  })
+
+  const allMessages = useMemo(
+    () =>
+      messagesQuery.data && Number(messagesQuery.data?.size) > 0
+        ? Array.from(messagesQuery.data)
+        : [],
+    [messagesQuery.data]
+  )
+
+  const hasMessages = useMemo(() => Number(allMessages.length) > 0, [allMessages.length])
+
+  return { messagesQuery, allMessages, hasMessages }
+}
+
+export default useAllMessages

package/src/modules/messages/hooks/use-infinite-get-messages/index.ts

@@ -0,0 +1,2 @@
+export * from './use-infinite-get-messages'
+export { default as useInfiniteGetMessages } from './use-infinite-get-messages'

package/src/modules/messages/hooks/use-infinite-get-messages/use-infinite-get-messages.spec.tsx

@@ -0,0 +1,58 @@
+import { act, renderHook, waitFor } from '@/src/config/tests'
+import { SparkieMessageServiceMock } from '@/src/modules/sparkie/__tests__/sparkie.mock'
+import IMessageWithSenderDataMock from '../../__tests__/imessage-with-sender-data.mock'
+import type { IMessageWithSenderData } from '../../types'
+
+import useInfiniteGetMessages from './use-infinite-get-messages'
+
+describe('useInfiniteGetMessages', () => {
+  const mockConversationId = 'conversation-123'
+  const mockProfileId = 'profile-456'
+  const mockEnabled = true
+
+  beforeEach(() => {
+    SparkieMessageServiceMock.getAll.mockClear()
+  })
+
+  const createHook = (
+    props = {
+      conversationId: mockConversationId,
+      profileId: mockProfileId,
+      enabled: mockEnabled
+    }
+  ) => renderHook(() => useInfiniteGetMessages(props))
+
+  it('should return a map with the right size when fetch messages request is successful', async () => {
+    const { result } = createHook()
+
+    await waitFor(() => expect(result.current.data).toBeDefined())
+
+    expect(result.current.data?.size).toBe(10)
+  })
+
+  it('should be able to fetch next pages', async () => {
+    SparkieMessageServiceMock.getAll.mockRestore()
+    SparkieMessageServiceMock.getAll.mockReturnValueOnce(
+      new IMessageWithSenderDataMock().getMany(2) as IMessageWithSenderData[]
+    )
+
+    const { result } = createHook()
+
+    await waitFor(() => {
+      expect(result.current.isSuccess).toBe(true)
+    })
+
+    expect(result.current.data?.size).toBe(10)
+
+    act(() => {
+      void result.current.fetchNextPage()
+    })
+
+    await waitFor(() => {
+      expect(result.current.fetchStatus).toBe('idle')
+    })
+
+    expect(result.current.data?.size).toBe(2)
+    expect(result.current.hasNextPage).toBe(false)
+  })
+})