app-tutor-ai-consumer 1.4.0 → 1.6.0

package/src/main/main.spec.tsx

@@ -1,21 +1,22 @@
 import { chance, render, screen, waitFor } from '@/config/tests'
 import WidgetSettingPropsBuilder from '../modules/widget/__tests__/widget-settings-props.builder'
+import { useWidgetSettingsAtom } from '../modules/widget/store/widget-settings.atom'
 import { Main } from '.'
 
+vi.mock('../modules/widget/store/widget-settings.atom', () => ({ useWidgetSettingsAtom: vi.fn() }))
+
 describe('Main', () => {
   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()
-    })
+  beforeEach(() => {
+    vi.mocked(useWidgetSettingsAtom).mockReturnValue([null, vi.fn()])
   })
 
   it('should render without errors', async () => {
     const props = new WidgetSettingPropsBuilder().withTutorName(chance.name())
+    vi.mocked(useWidgetSettingsAtom).mockReturnValue([props, vi.fn()])
+
     renderComponent({ settings: props })
 
     await waitFor(() => {

package/src/modules/cursor/__tests__/icursor-update.builder.ts

@@ -0,0 +1,42 @@
+import { chance } from '@/src/config/tests'
+import type { ICursorUpdate } from '../types'
+
+class ICursorUpdateBuilder implements ICursorUpdate {
+  threadId: string
+  contactId: string
+  cursor: number
+  conversationId?: string
+
+  constructor() {
+    this.threadId = chance.guid()
+    this.contactId = chance.guid()
+    this.cursor = chance.integer()
+    this.conversationId = chance.guid()
+  }
+
+  withThreadId(threadId: typeof this.threadId) {
+    this.threadId = threadId
+
+    return this
+  }
+
+  withContactId(contactId: typeof this.contactId) {
+    this.contactId = contactId
+
+    return this
+  }
+
+  withCursor(cursor: typeof this.cursor) {
+    this.cursor = cursor
+
+    return this
+  }
+
+  withConversationId(conversationId: typeof this.conversationId) {
+    this.conversationId = conversationId
+
+    return this
+  }
+}
+
+export default ICursorUpdateBuilder

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

@@ -0,0 +1 @@
+export * from './use-update-cursor'

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

@@ -0,0 +1,2 @@
+export * from './use-update-cursor'
+export { default as useUpdateCursor } from './use-update-cursor'

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/chat-input/chat-input.spec.tsx

@@ -0,0 +1,72 @@
+import { createRef } from 'react'
+
+import { chance, fireEvent, render, screen } from '@/src/config/tests'
+
+import ChatInput from './chat-input'
+import { useChatInputValueAtom } from './chat-input.atom'
+
+vi.mock('./chat-input.atom', () => ({ useChatInputValueAtom: vi.fn() }))
+
+describe('ChatInput', () => {
+  const ref = createRef<HTMLInputElement>()
+  const chatInputValueAtomMock = { val: '', setVal: vi.fn() }
+  const defaultProps = { name: chance.name() }
+
+  const renderComponent = (props = defaultProps) => render(<ChatInput {...props} ref={ref} />)
+
+  beforeEach(() => {
+    vi.mocked(useChatInputValueAtom).mockReturnValue([
+      chatInputValueAtomMock.val,
+      chatInputValueAtomMock.setVal
+    ])
+  })
+
+  it('should call focus when rendering the input', () => {
+    renderComponent()
+
+    expect(ref.current).toHaveFocus()
+  })
+
+  it('should call setValue when ref change event is called', () => {
+    renderComponent()
+
+    expect(ref.current).not.toBeNull()
+
+    const event = { target: { value: 'Test message' } }
+
+    fireEvent.change(ref.current!, event)
+
+    expect(chatInputValueAtomMock.setVal).toHaveBeenCalledTimes(1)
+    expect(chatInputValueAtomMock.setVal).toHaveBeenNthCalledWith(1, event.target.value)
+  })
+
+  it('should call onSend prop when it is defined and user presses the EnterKey', () => {
+    const onSend = vi.fn()
+    renderComponent({ ...defaultProps, onSend } as never)
+
+    expect(ref.current).not.toBeNull()
+
+    const event = { code: 'Enter' }
+
+    fireEvent.keyDown(ref.current!, event)
+
+    expect(onSend).toHaveBeenCalledTimes(1)
+  })
+
+  it('should disable the button when there is no value', () => {
+    renderComponent()
+
+    expect(screen.getByRole('button', { name: /Submit Button/i })).toBeDisabled()
+  })
+
+  it('should the button be enabled and input have defaultValue when there is value', () => {
+    const name = chance.name()
+    vi.mocked(useChatInputValueAtom).mockReturnValue([name, vi.fn()])
+
+    renderComponent()
+
+    expect(ref.current?.defaultValue).toBe(name)
+
+    expect(screen.getByRole('button', { name: /Submit Button/i })).toBeEnabled()
+  })
+})

package/src/modules/messages/components/chat-input/chat-input.tsx

@@ -1,4 +1,6 @@
-import { forwardRef } from 'react'
+import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'
+import clsx from 'clsx'
+import type { ChangeEvent, KeyboardEvent } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { Icon } from '@/src/lib/components'
@@ -6,9 +8,34 @@ import { Icon } from '@/src/lib/components'
 import { useChatInputValueAtom } from './chat-input.atom'
 import type { ChatInputProps } from './types'
 
-const ChatInput = forwardRef<HTMLInputElement, ChatInputProps>(function ({ name, onSend }, ref) {
+const ChatInput = forwardRef<HTMLInputElement, ChatInputProps>(({ name, onSend }, forwardedRef) => {
   const { t } = useTranslation()
-  const [value] = useChatInputValueAtom()
+  const [value, setValue] = useChatInputValueAtom()
+  const ref = useRef<HTMLInputElement>(null)
+
+  useImperativeHandle(forwardedRef, () => ref?.current as HTMLInputElement)
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value?.trim())
+  }
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    const isEnterKey = e.code === 'Enter'
+    const isShiftKey = e.shiftKey
+
+    if (isEnterKey && !isShiftKey) {
+      e.preventDefault()
+      onSend?.()
+    }
+  }
+
+  useEffect(() => {
+    const input = ref?.current
+
+    if (input) {
+      input.focus()
+    }
+  }, [])
 
   return (
     <div className='flex items-center rounded-full border-neutral-800 bg-neutral-800 px-4 py-2'>
@@ -17,12 +44,31 @@ const ChatInput = forwardRef<HTMLInputElement, ChatInputProps>(function ({ name,
         name={name}
         ref={ref}
         type='text'
-        className='h-6 w-full border-none bg-transparent text-neutral-400 outline-0 placeholder:text-neutral-400'
+        className='h-6 w-full border-none bg-transparent text-neutral-400 outline-none outline-0 placeholder:text-neutral-400'
         placeholder={t('send_message.field.placeholder')}
         defaultValue={value}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
       />
-      <button onClick={onSend}>
-        <Icon name='send' className='h-4 w-4 text-neutral-50' />
+      <button
+        onClick={onSend}
+        disabled={!value}
+        className={clsx(
+          'flex size-8 flex-col items-center justify-center rounded-full outline-none transition-colors duration-300 ease-in',
+          {
+            'cursor-pointer hover:scale-110 hover:bg-neutral-600 focus:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2':
+              Boolean(value),
+            'cursor-not-allowed': !value
+          }
+        )}
+        aria-label='Submit Button'>
+        <Icon
+          name='send'
+          className={clsx('h-4 w-4 pr-0.5 pt-0.5 transition-colors duration-150', {
+            'text-neutral-50': Boolean(value),
+            'text-neutral-500': !value
+          })}
+        />
       </button>
     </div>
   )

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

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

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

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

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

@@ -0,0 +1,23 @@
+import { forwardRef } from 'react'
+
+import { AIAvatarIcon } from '@/src/modules/widget'
+
+const MessageSkeleton = forwardRef<HTMLDivElement>((_, ref) => {
+  return (
+    <div
+      ref={ref}
+      className='flex max-w-[86%] flex-col items-start gap-2'
+      aria-label='Loading Component'>
+      <AIAvatarIcon className='rounded-lg bg-ai-chat-response' />
+      <div className='flex w-full flex-col items-start gap-2'>
+        <div className='h-3 w-full animate-pulse rounded-full bg-neutral-800 transition-colors' />
+        <div className='h-3 w-[83%] animate-pulse rounded-full bg-neutral-800 transition-colors delay-75' />
+        <div className='h-3 w-[56%] animate-pulse rounded-full bg-neutral-800 transition-colors delay-100' />
+      </div>
+    </div>
+  )
+})
+
+MessageSkeleton.displayName = 'MessageSkeleton'
+
+export default MessageSkeleton

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'