app-tutor-ai-consumer 1.18.1 → 1.19.0

package/src/modules/messages/utils/set-messages-cache/utils.ts

@@ -0,0 +1,53 @@
+import type { Message } from '@hotmart/sparkie/dist/MessageService'
+import type { InfiniteData, QueryClient } from '@tanstack/react-query'
+import { produce } from 'immer'
+
+import type { FetchMessagesResponse, IMessageWithSenderData } from '../../types'
+
+const placeholderID = 'remove::placeholder::id'
+
+export type SetMessageCacheParams = {
+  queryKey: readonly unknown[]
+  queryClient: QueryClient
+  data: Partial<Message>
+  sending?: boolean
+}
+
+export const setMessagesCache =
+  ({ queryClient, queryKey, data, sending }: SetMessageCacheParams) =>
+  () => {
+    queryClient.setQueryData<InfiniteData<FetchMessagesResponse>>(queryKey, (oldData) => {
+      return produce(oldData, (draft) => {
+        const lastPageMessages = draft?.pages?.at(-1)?.messages
+        const lastMessage = lastPageMessages?.at?.(-1)
+
+        const placeholderMsgIndex = Number(
+          lastPageMessages?.findIndex((msg) => msg.id === placeholderID)
+        )
+
+        const msgIndex = Number(
+          !isNaN(placeholderMsgIndex) && placeholderMsgIndex !== -1
+            ? placeholderMsgIndex
+            : lastPageMessages?.length
+        )
+
+        if (isNaN(msgIndex)) return draft
+
+        const newMessage = {
+          ...lastMessage,
+          sentAt: Date.now(),
+          updatedAt: Date.now(),
+          metadata: {
+            ...lastMessage?.metadata,
+            author: 'user'
+          },
+          ...data,
+          ...(sending ? { id: placeholderID } : {})
+        } as IMessageWithSenderData
+
+        lastPageMessages?.splice(msgIndex, 1, newMessage)
+
+        return draft
+      })
+    })
+  }

package/src/modules/widget/components/chat-page/chat-page.spec.tsx

@@ -1,27 +1,43 @@
-import { render, screen, waitFor } from '@/src/config/tests'
-import type { IMessageWithSenderData } from '@/src/modules/messages'
-import IMessageWithSenderDataMock from '@/src/modules/messages/__tests__/imessage-with-sender-data.mock'
+import { createRef } from 'react'
+
+import { chance, render, screen, waitFor } from '@/src/config/tests'
+import { useScroller } from '@/src/modules/messages/hooks/use-scroller'
+import { useGetProfile } from '@/src/modules/profile'
 import WidgetSettingPropsBuilder from '../../__tests__/widget-settings-props.builder'
 import * as Store from '../../store'
 
 import ChatPage from './chat-page'
 
+vi.mock('@/src/modules/profile', () => ({ useGetProfile: vi.fn() }))
+
+vi.mock('@/src/modules/messages/hooks/use-scroller', () => ({
+  useScroller: vi.fn()
+}))
+
 describe('ChatPage', () => {
   const defaultSettings = new WidgetSettingPropsBuilder()
-  const getMessagesMock = new IMessageWithSenderDataMock().getMany(10) as IMessageWithSenderData[]
+  const scrollerRef = createRef<HTMLDivElement>()
+  const scrollToButtonRef = createRef<HTMLButtonElement>()
+
+  const useScrollerMock = {
+    scrollerRef,
+    scrollToButtonRef,
+    scrollToBottom: vi.fn(),
+    showScrollButton: false
+  }
 
   const renderComponent = () => render(<ChatPage />)
 
   beforeEach(() => {
     vi.spyOn(Store, 'useWidgetSettingsAtomValue').mockReturnValue(defaultSettings)
+    vi.mocked(useGetProfile).mockReturnValue({ data: { id: chance.guid() } } as never)
+    vi.mocked(useScroller).mockReturnValue(useScrollerMock)
   })
 
   it('should render each fetched message item from API', async () => {
     renderComponent()
 
-    await waitFor(() =>
-      expect(screen.getAllByTestId('messages-item')).toHaveLength(getMessagesMock.length)
-    )
+    await waitFor(() => expect(screen.getAllByTestId('messages-item')).toHaveLength(2))
 
     expect(screen.getByPlaceholderText(/send_message.field.placeholder/)).toBeInTheDocument()
   })

package/src/modules/widget/components/chat-page/chat-page.tsx

@@ -1,24 +1,55 @@
-import { useRef } from 'react'
+import { lazy, useEffect, useMemo, useRef } from 'react'
+import { useInfiniteQuery } from '@tanstack/react-query'
 
 import { isTextEmpty } from '@/src/lib/utils/is-text-empty'
 import { ChatInput, MessagesList, useChatInputValueAtom } from '@/src/modules/messages/components'
-import { useAllMessages, useSendTextMessage } from '@/src/modules/messages/hooks'
+import { MessagesContainer } from '@/src/modules/messages/components/messages-container'
+import { getAllMessagesQuery, useSendTextMessage } from '@/src/modules/messages/hooks'
+import { useMessagesMaxCount } from '@/src/modules/messages/store'
+import { useGetProfile } from '@/src/modules/profile'
 import {
-  useWidgetLoadingAtomValue,
+  useWidgetLoadingAtom,
   useWidgetSettingsAtomValue,
   useWidgetTabsValueAtom
 } from '../../store'
 import { WidgetHeader } from '../header'
 import { PageLayout } from '../page-layout'
 
+const MessageItemError = lazy(
+  () => import('@/src/modules/messages/components/message-item-error/message-item-error')
+)
+
+const MessageItemEndOfScroll = lazy(
+  () =>
+    import(
+      '@/src/modules/messages/components/message-item-end-of-scroll/message-item-end-of-scroll'
+    )
+)
+
 function ChatPage() {
-  const widgetTabs = useWidgetTabsValueAtom()
   const chatInputRef = useRef<HTMLTextAreaElement>(null)
+  const scrollerRef = useRef<HTMLDivElement>(null)
+  const settings = useWidgetSettingsAtomValue()
+  const profileQuery = useGetProfile()
+  const widgetTabs = useWidgetTabsValueAtom()
   const sendTextMessageMutation = useSendTextMessage()
-  const { messagesQuery } = useAllMessages()
-  const widgetLoading = useWidgetLoadingAtomValue()
+  const limit = useMessagesMaxCount()
   const [value, setValue] = useChatInputValueAtom()
-  const settings = useWidgetSettingsAtomValue()
+  const [, setWidgetLoading] = useWidgetLoadingAtom()
+
+  const conversationId = useMemo(() => settings?.conversationId, [settings?.conversationId])
+  const profileId = useMemo(() => profileQuery.data?.id, [profileQuery.data?.id])
+  const messagesQueryConfig = useMemo(
+    () =>
+      getAllMessagesQuery({
+        conversationId,
+        profileId,
+        limit
+      }),
+    [conversationId, limit, profileId]
+  )
+
+  const messagesQuery = useInfiniteQuery(messagesQueryConfig)
 
   const handleSendMessage = () => {
     const text = chatInputRef.current?.value ?? ''
@@ -33,6 +64,12 @@ function ChatPage() {
     })
   }
 
+  useEffect(() => {
+    if (messagesQuery.isError) {
+      setWidgetLoading(false)
+    }
+  }, [messagesQuery.isError, setWidgetLoading])
+
   return (
     <PageLayout
       asideChild={
@@ -40,18 +77,37 @@ function ChatPage() {
           name='new-chat-msg-input'
           ref={chatInputRef}
           onSend={widgetTabs.currentTab === 'chat' ? handleSendMessage : undefined}
-          loading={widgetLoading || sendTextMessageMutation.isPending}
+          loading={sendTextMessageMutation.isPending}
           inputDisabled={messagesQuery?.isLoading}
           buttonDisabled={messagesQuery?.isLoading || !value.trim()}
         />
       }>
-      <>
-        <div className='mt-4 px-6 py-4'>
-          <WidgetHeader enabledButtons={['info', 'close']} tutorName={settings?.tutorName} />
-        </div>
-        <MessagesList />
-      </>
+      <div className='mt-4 px-6 py-4'>
+        <WidgetHeader enabledButtons={['info', 'close']} tutorName={settings?.tutorName} />
+      </div>
+      <MessagesContainer
+        ref={scrollerRef}
+        handleShowMore={async () => {
+          await messagesQuery.fetchNextPage()
+        }}
+        showButton={messagesQuery.hasNextPage}
+        loading={messagesQuery.isFetchingNextPage}>
+        <MessageItemEndOfScroll
+          show={
+            !messagesQuery.isFetching &&
+            !messagesQuery.hasNextPage &&
+            Number(messagesQuery.data?.size) > 0
+          }
+        />
+        {messagesQuery.data && <MessagesList messagesMap={messagesQuery.data} />}
+        <MessageItemError
+          show={messagesQuery.isError}
+          message={`❌ Error loading messages: ${messagesQuery.error?.message ?? ''}`}
+          retry={() => void messagesQuery.refetch()}
+        />
+      </MessagesContainer>
     </PageLayout>
   )
 }
+
 export default ChatPage

package/src/modules/widget/components/greetings-card/greetings-card.tsx

@@ -1,13 +1,9 @@
 import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
 
-import { AIAvatar } from '../ai-avatar'
-
-import styles from './styles.module.css'
-
 export type GreetingsCardProps = {
   tutorName: string
-  author: string
+  author?: string
   isDarkTheme?: boolean
 }
 
@@ -15,23 +11,31 @@ function GreetingsCard({ author, tutorName, isDarkTheme = false }: GreetingsCard
   const { t } = useTranslation()
 
   return (
-    <div className='flex flex-col items-center justify-center text-neutral-900'>
+    <div className='flex flex-col items-center justify-center'>
       <div className='flex flex-col items-center justify-center gap-4 text-center'>
-        <AIAvatar
-          className={clsx('rounded-full border-4 border-neutral-100', {
-            'bg-[#E7EDF2]/80': !isDarkTheme,
-            'bg-neutral-200': isDarkTheme
-          })}
-        />
         <div className='flex flex-col gap-2'>
-          <span className='text-base font-light'>
+          <span
+            className={clsx('text-base font-light', {
+              'text-white': isDarkTheme,
+              'text-gray-900': !isDarkTheme
+            })}>
             {t('general.greetings.hello', { name: author })}
           </span>
-          <h3 className={clsx('text-xl', styles.faceTxt)}>
+          <h3
+            className={clsx('text-xl font-bold', {
+              'text-white': isDarkTheme,
+              'text-gray-900': !isDarkTheme
+            })}>
             {t('general.greetings.firstMessage', { tutorName })}
           </h3>
         </div>
-        <p className='text-sm font-normal text-neutral-600'>{t('general.greetings.description')}</p>
+        <p
+          className={clsx('text-sm font-normal', {
+            'text-gray-400': isDarkTheme,
+            'text-neutral-600': !isDarkTheme
+          })}>
+          {t('general.greetings.description')}
+        </p>
       </div>
     </div>
   )

package/src/modules/widget/components/header/header.tsx

@@ -1,3 +1,5 @@
+import { useTranslation } from 'react-i18next'
+
 import { Button, Icon } from '@/src/lib/components'
 import { TutorWidgetEvents } from '../../events'
 import { useWidgetTabsAtom } from '../../store'
@@ -35,7 +37,9 @@ function WidgetHeader({
   showContentWithoutMeta,
   showContent = true
 }: WidgetHeaderProps) {
+  const { t } = useTranslation()
   const [, setTab] = useWidgetTabsAtom()
+  const name = tutorName ?? t('general.name')
 
   const handleClickArchive = () => {
     setTab('chat')
@@ -48,10 +52,8 @@ function WidgetHeader({
   return (
     <div className='grid-areas-[a_b] mt-0.5 grid grid-cols-[1fr_auto] items-center text-neutral-1000'>
       <div className='grid-area-[a]'>
-        {showContent && !showContentWithoutMeta && <WidgetHeaderContent tutorName={tutorName} />}
-        {showContentWithoutMeta && !showContent && (
-          <WidgetHeaderContentWithoutMeta name={tutorName} />
-        )}
+        {showContent && !showContentWithoutMeta && <WidgetHeaderContent tutorName={name} />}
+        {showContentWithoutMeta && !showContent && <WidgetHeaderContentWithoutMeta name={name} />}
       </div>
       <div className='shrink-0'>
         <div className='grid-area-[b] ml-auto flex max-w-max gap-3 text-neutral-700'>

package/src/modules/widget/components/information-page/constants.ts

@@ -12,6 +12,10 @@ export const infoItems: InfoItem[] = [
     titleKey: 'info.what_it_does_question',
     descKey: 'info.what_it_does_answer'
   },
-  { icon: 'book', titleKey: 'info.how_it_learns_question', descKey: 'info.how_it_learns_answer' },
-  { icon: 'warning', titleKey: 'info.limitations_question', descKey: 'info.limitations_answer' }
+  {
+    icon: 'gallery',
+    titleKey: 'info.how_it_learns_question',
+    descKey: 'info.how_it_learns_answer'
+  },
+  { icon: 'info', titleKey: 'info.limitations_question', descKey: 'info.limitations_answer' }
 ]

package/src/modules/widget/components/information-page/information-card/information-card.tsx

@@ -1,3 +1,5 @@
+import clsx from 'clsx'
+
 import { Icon } from '@/src/lib/components'
 import type { ValidIconNames } from '@/src/lib/components/icons/icon-names'
 
@@ -5,18 +7,33 @@ export type InformationCardProps = {
   icon: ValidIconNames
   title: string
   description: string
+  isDarkMode: boolean
 }
 
-function InformationCard({ icon, title, description }: InformationCardProps) {
+function InformationCard({ icon, title, description, isDarkMode }: InformationCardProps) {
   return (
-    <div className='flex gap-3 border-b border-white/10 pb-5 last:border-none'>
-      <div className='flex h-5 w-5 items-start justify-center'>
+    <div
+      className={clsx('flex justify-center gap-3 border-b pb-5 last:border-none', {
+        'border-white/10': isDarkMode,
+        'border-black/10': !isDarkMode
+      })}>
+      <div
+        className={clsx('flex h-5 w-5 items-start justify-center', {
+          'text-white': isDarkMode,
+          'text-neutral-900': !isDarkMode
+        })}>
         <Icon name={icon} width={16} height={16} />
       </div>
 
       <div className='flex flex-col gap-1'>
-        <p className='text-sm font-bold'>{title}</p>
-        <p className='text-xs text-gray-300'>{description}</p>
+        <p className='text-sm font-bold text-neutral-900'>{title}</p>
+        <p
+          className={clsx('text-xs', {
+            'text-gray-300': isDarkMode,
+            'text-gray-500': !isDarkMode
+          })}>
+          {description}
+        </p>
       </div>
     </div>
   )

package/src/modules/widget/components/information-page/information-page.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
 
 import { Icon } from '@/src/lib/components'
@@ -12,10 +13,15 @@ function WidgetInformationPage() {
   const { t } = useTranslation()
   const [, setWidgetTabs] = useWidgetTabsAtom()
   const [settings] = useWidgetSettingsAtom()
+  const isDarkMode = settings?.config?.theme === 'dark'
 
   return (
     <PageLayout className='p-5 text-white'>
-      <div className='relative mb-8 flex h-12 items-center justify-center'>
+      <div
+        className={clsx('relative mb-8 flex h-12 items-center justify-center', {
+          'text-white': isDarkMode,
+          'text-neutral-700': !isDarkMode
+        })}>
         <button
           className='absolute left-0'
           aria-label='Return Button'
@@ -25,11 +31,17 @@ function WidgetInformationPage() {
         <h1 className='mx-auto font-bold'>{t('info.title')}</h1>
       </div>
 
-      <div className='mb-8 flex justify-center'>
+      <div className='mb-10 flex justify-center'>
         <div className='flex flex-col items-center gap-2'>
           <AIAvatar />
 
-          <h3 className='font-bold'>{settings?.tutorName ?? ''}</h3>
+          <h3
+            className={clsx('font-bold', {
+              'text-white': isDarkMode,
+              'text-neutral-700': !isDarkMode
+            })}>
+            {settings?.tutorName ?? t('general.name')}
+          </h3>
         </div>
       </div>
 
@@ -40,6 +52,7 @@ function WidgetInformationPage() {
             icon={item.icon}
             title={t(item.titleKey)}
             description={t(item.descKey)}
+            isDarkMode={isDarkMode}
           />
         ))}
       </div>

package/src/modules/widget/components/starter-page/starter-page.spec.tsx

@@ -3,7 +3,10 @@ import { useSendTextMessage } from '@/src/modules/messages/hooks'
 
 import WidgetStarterPage from './starter-page'
 
-vi.mock('@/src/modules/messages/hooks', () => ({ useSendTextMessage: vi.fn() }))
+vi.mock('@/src/modules/messages/hooks', () => ({
+  getAllMessagesQuery: vi.fn(() => ({ pages: [], queryKey: ['any'] })),
+  useSendTextMessage: vi.fn()
+}))
 
 describe('WidgetStarterPage', () => {
   const useSendTextMessageMock = { mutate: vi.fn() }

package/src/modules/widget/components/starter-page/starter-page.tsx

@@ -1,4 +1,5 @@
-import { useRef } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
+import { useQueryClient } from '@tanstack/react-query'
 import clsx from 'clsx'
 import type { MouseEventHandler } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -6,7 +7,9 @@ import { useTranslation } from 'react-i18next'
 import { Button } from '@/src/lib/components'
 import { useRefEventListener } from '@/src/lib/hooks'
 import { ChatInput, useChatInputValueAtom } from '@/src/modules/messages/components'
-import { useSendTextMessage } from '@/src/modules/messages/hooks'
+import { getAllMessagesQuery, useSendTextMessage } from '@/src/modules/messages/hooks'
+import { useMessagesMaxCount } from '@/src/modules/messages/store'
+import { useGetProfile } from '@/src/modules/profile'
 import { useWidgetSettingsAtom, useWidgetTabsAtom } from '../../store'
 import { GreetingsCard } from '../greetings-card'
 import { WidgetHeader } from '../header'
@@ -21,6 +24,10 @@ function WidgetStarterPage() {
   const [chatInputValue, setChatInputValue] = useChatInputValueAtom()
   const [, setWidgetTabs] = useWidgetTabsAtom()
   const sendTextMessageMutation = useSendTextMessage()
+  const profileQuery = useGetProfile()
+  const limit = useMessagesMaxCount()
+  const queryClient = useQueryClient()
+  const name = settings?.tutorName ?? t('general.name')
 
   useRefEventListener<HTMLTextAreaElement>({
     config: {
@@ -53,6 +60,24 @@ function WidgetStarterPage() {
     sendText(chatInputRef.current?.value)
   }
 
+  const conversationId = useMemo(() => settings?.conversationId, [settings?.conversationId])
+
+  const profileId = useMemo(() => profileQuery.data?.id, [profileQuery.data?.id])
+
+  const messagesQueryConfig = useMemo(
+    () =>
+      getAllMessagesQuery({
+        conversationId,
+        profileId,
+        limit
+      }),
+    [conversationId, limit, profileId]
+  )
+
+  useEffect(() => {
+    void queryClient.prefetchInfiniteQuery(messagesQueryConfig)
+  }, [messagesQueryConfig, queryClient])
+
   return (
     <PageLayout
       asideChild={
@@ -70,14 +95,14 @@ function WidgetStarterPage() {
           })}>
           <WidgetHeader
             enabledButtons={['archive', 'info', 'close']}
-            tutorName={settings?.tutorName}
+            tutorName={name}
             showContent={false}
           />
 
           <div className='my-auto'>
             <GreetingsCard
-              author={settings?.author ?? ''}
-              tutorName={settings?.tutorName ?? ''}
+              author={settings?.user?.name}
+              tutorName={name}
               isDarkTheme={settings?.config?.theme === 'dark'}
             />
           </div>

package/src/modules/widget/components/greetings-card/styles.module.css

@@ -1,3 +0,0 @@
-.faceTxt {
-  composes: gradientText from '../../../../config/styles/utilities/text-utilities.module.css';
-}