app-tutor-ai-consumer 1.3.0 → 1.4.0

package/src/modules/messages/service.ts

@@ -1,11 +1,15 @@
-import type { Message, MessageWithSenderData } from '@hotmart/sparkie/dist/MessageService'
+import type { Message } from '@hotmart/sparkie/dist/MessageService'
 
 import { ApiError } from '@/src/config/request'
 import { HttpCodes } from '@/src/lib/utils'
 import { SparkieService } from '../sparkie'
 
+import { MSG_MAX_COUNT } from './constants'
 import type {
+  FetchMessagesResponse,
+  IFetchMessagesOptions,
   IGetMessagesPayload,
+  IMessageWithSenderData,
   ISendImageMessagePayload,
   ISendTextMessagePayload
 } from './types'
@@ -30,12 +34,31 @@ class MessagesService {
   async getMessages({
     conversationId,
     before
-  }: IGetMessagesPayload): Promise<Array<MessageWithSenderData>> {
+  }: IGetMessagesPayload): Promise<Array<IMessageWithSenderData>> {
     const data = await this.sparkieMessageService.getAll(conversationId, {
       before
     })
 
-    return data ?? []
+    return (data ?? []) as Array<IMessageWithSenderData>
+  }
+
+  async fetchMessages({
+    currentMessages,
+    conversationId,
+    loadFirstPage
+  }: IFetchMessagesOptions): Promise<FetchMessagesResponse> {
+    let before: number | undefined
+
+    if (currentMessages && currentMessages.length && !loadFirstPage) {
+      before = currentMessages.slice().sort((a, b) => a.sentAt - b.sentAt)[0].sentAt
+    }
+
+    const messages = (await this.getMessages({ conversationId, before })) ?? []
+
+    return {
+      messages,
+      hasMore: messages.length === MSG_MAX_COUNT
+    }
   }
 
   async sendTextMessage({

package/src/modules/messages/types.ts

@@ -1,6 +1,12 @@
-import type { Message } from '@hotmart/sparkie/dist/MessageService'
+import type { Message as SparkieMsg, SenderData } from '@hotmart/sparkie/dist/MessageService'
 
-export type IMessage = Message & {
+export type IMessage = SparkieMsg & {
+  metadata: {
+    author: 'ai' | 'user'
+    sessionId: string
+    externalId: string
+    correlationId: string
+  }
   sending?: boolean // indicates when the current message is being sent
 }
 
@@ -45,3 +51,28 @@ export type IFetchMessagesOptions = {
   conversationId: string
   loadFirstPage?: boolean
 }
+
+export type IMessageWithSenderData = IMessage & SenderData
+
+export type MessageParserArgs = {
+  messages: Array<IMessageWithSenderData>
+  profileId: string
+}
+
+export type ParsedMessage = {
+  from: string
+  id: string
+  isRead: boolean
+  time: string
+  contact: IMessageWithSenderData['contact']
+  metadata: IMessageWithSenderData['metadata']
+  parentId: IMessageWithSenderData['parentId']
+  sending: IMessageWithSenderData['sending']
+  threadId: IMessageWithSenderData['threadId']
+  timestamp: IMessageWithSenderData['sentAt']
+} & IMessageWithSenderData['content']
+
+export type FetchMessagesResponse = {
+  messages: IMessageWithSenderData[]
+  hasMore: boolean
+}

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

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

package/src/modules/messages/utils/messages-parser/index.ts

@@ -0,0 +1 @@
+export * from './utils'

package/src/modules/messages/utils/messages-parser/utils.ts

@@ -0,0 +1,28 @@
+import dayjs from 'dayjs'
+
+import type { IMessageWithSenderData, MessageParserArgs, ParsedMessage } from '../../types'
+
+export const msgParser = (msg: IMessageWithSenderData, profileId: string) => ({
+  id: msg.id,
+  time: dayjs(msg.sentAt).format('LT'),
+  timestamp: msg.sentAt,
+  from: msg.contactId === profileId ? 'me' : msg.contactId,
+  contact: msg.contact,
+  sending: msg.sending,
+  parentId: msg.parentId,
+  threadId: msg.threadId,
+  isRead: false,
+  metadata: msg.metadata || {},
+  ...msg.content
+})
+
+export const messagesParser = ({
+  messages,
+  profileId
+}: MessageParserArgs): Array<ParsedMessage> => {
+  if (!(Number(messages.length) > 0) || !profileId) return []
+
+  return messages
+    .map((msg) => msgParser(msg, profileId))
+    .sort((a, b) => a.timestamp - b.timestamp) as Array<ParsedMessage>
+}

package/src/modules/profile/__tests__/profile-api-props.builder.ts

@@ -0,0 +1,74 @@
+import { chance } from '@/src/config/tests'
+import type { ProfileAPIProps } from '../types'
+
+class ProfileAPIPropsBuilder implements ProfileAPIProps {
+  id: string
+  name: string
+  user_id: number
+  picture: string
+  is_anonymous: boolean
+  created_at: string
+  updated_at: string
+  deleted_at: string
+
+  constructor() {
+    this.id = chance.guid()
+    this.name = chance.name()
+    this.user_id = chance.integer({ min: 1000 })
+    this.picture = chance.avatar()
+    this.is_anonymous = false
+    this.created_at = Date.now().toString()
+    this.updated_at = Date.now().toString()
+    this.deleted_at = ''
+  }
+
+  withId(id: typeof this.id) {
+    this.id = id
+
+    return this
+  }
+
+  withName(name: typeof this.name) {
+    this.name = name
+
+    return this
+  }
+
+  withUser_id(user_id: typeof this.user_id) {
+    this.user_id = user_id
+
+    return this
+  }
+
+  withPicture(picture: typeof this.picture) {
+    this.picture = picture
+
+    return this
+  }
+
+  withIs_anonymous(is_anonymous: typeof this.is_anonymous) {
+    this.is_anonymous = is_anonymous
+
+    return this
+  }
+
+  withCreated_at(created_at: typeof this.created_at) {
+    this.created_at = created_at
+
+    return this
+  }
+
+  withUpdated_at(updated_at: typeof this.updated_at) {
+    this.updated_at = updated_at
+
+    return this
+  }
+
+  withDeleted_at(deleted_at: typeof this.deleted_at) {
+    this.deleted_at = deleted_at
+
+    return this
+  }
+}
+
+export default ProfileAPIPropsBuilder

package/src/modules/profile/__tests__/profile-props.builder.ts

@@ -0,0 +1,42 @@
+import { chance } from '@/src/config/tests'
+import type { ProfileProps } from '../types'
+
+class ProfilePropsBuilder implements ProfileProps {
+  id: string
+  name: string
+  avatar: string
+  userId: string | number
+
+  constructor() {
+    this.id = chance.guid()
+    this.name = chance.name()
+    this.avatar = chance.avatar()
+    this.userId = chance.guid()
+  }
+
+  withId(id: typeof this.id) {
+    this.id = id
+
+    return this
+  }
+
+  withName(name: typeof this.name) {
+    this.name = name
+
+    return this
+  }
+
+  withAvatar(avatar: typeof this.avatar) {
+    this.avatar = avatar
+
+    return this
+  }
+
+  withUserId(userId: typeof this.userId) {
+    this.userId = userId
+
+    return this
+  }
+}
+
+export default ProfilePropsBuilder

package/src/modules/profile/constants.ts

@@ -0,0 +1,3 @@
+export const ProfileEndpoints = {
+  getProfile: () => `${process.env.API_CONVERSATION_URL}/v1/contacts/me`
+}

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

@@ -0,0 +1 @@
+export * from './use-get-profile'

package/src/modules/profile/hooks/use-get-profile/index.ts

@@ -0,0 +1 @@
+export * from './use-get-profile'

package/src/modules/profile/hooks/use-get-profile/use-get-profile.spec.tsx

@@ -0,0 +1,20 @@
+import { renderHook, waitFor } from '@/src/config/tests'
+
+import { useGetProfile } from './use-get-profile'
+
+describe('useGetProfile', () => {
+  const render = (enabled = true) => renderHook(() => useGetProfile(enabled))
+
+  it('should render without errors', async () => {
+    const { result } = render()
+
+    await waitFor(() => expect(result.current.isSuccess).toBeTruthy())
+
+    expect(result.current.data).toMatchObject({
+      id: expect.any(String) as string,
+      name: expect.any(String) as string,
+      avatar: expect.any(String) as string,
+      userId: expect.any(Number) as number
+    })
+  })
+})

package/src/modules/profile/hooks/use-get-profile/use-get-profile.tsx

@@ -0,0 +1,14 @@
+import { useQuery } from '@tanstack/react-query'
+
+import { ProfileEndpoints } from '../../constants'
+import ProfileService from '../../service'
+
+export const getProfileQuery = (enabled: boolean) => ({
+  queryKey: [ProfileEndpoints.getProfile()],
+  queryFn: () => ProfileService.getProfile(),
+  enabled
+})
+
+export function useGetProfile(enabled: boolean = true) {
+  return useQuery(getProfileQuery(enabled))
+}

package/src/modules/profile/index.ts

@@ -0,0 +1,4 @@
+export * from './constants'
+export * from './hooks'
+export { default as ProfileService } from './service'
+export * from './types'

package/src/modules/profile/service.tsx

@@ -0,0 +1,19 @@
+import { api } from '@/src/config/request'
+
+import { ProfileEndpoints } from './constants'
+import type { ProfileAPIProps, ProfileProps } from './types'
+
+class ProfileService {
+  async getProfile(): Promise<ProfileProps> {
+    const { data } = await api.get<ProfileAPIProps>(ProfileEndpoints.getProfile())
+
+    return {
+      id: data.id,
+      name: data.name,
+      avatar: data.picture,
+      userId: data.user_id
+    } as ProfileProps
+  }
+}
+
+export default new ProfileService()

package/src/modules/profile/types.ts

@@ -0,0 +1,17 @@
+export type ProfileAPIProps = {
+  id: string
+  user_id: number
+  name: string
+  picture: string
+  is_anonymous: boolean
+  created_at: string
+  updated_at: string
+  deleted_at: string
+}
+
+export type ProfileProps = {
+  id: string
+  name: string
+  avatar: string
+  userId: string | number
+}

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

@@ -6,14 +6,14 @@ function ChatPage() {
   const chatInputRef = useRef<HTMLInputElement>(null)
 
   return (
-    <div className='flex flex-1 flex-col justify-center'>
-      <div className='flex flex-1 flex-col justify-center px-5 py-4'>
+    <>
+      <div className='overflow-auto px-5 py-4'>
         <MessagesList />
       </div>
       <div className='border-t border-t-neutral-700 px-5 py-4'>
         <ChatInput name='new-chat-msg-input' ref={chatInputRef} />
       </div>
-    </div>
+    </>
   )
 }
 

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

@@ -22,7 +22,7 @@ function WidgetContainer() {
 
   return (
     <div className='flex min-h-svh flex-col items-center justify-center bg-neutral-900'>
-      <div className='flex flex-1 flex-col justify-center gap-6'>
+      <div className='grid h-svh w-full grid-rows-[1fr_max-content]'>
         {WIDGET_TABS[widgetTabs.currentTab]}
       </div>
     </div>

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

@@ -12,26 +12,28 @@ function WidgetOnboardingPage() {
   const { t } = useTranslation()
 
   return (
-    <div className={clsx('flex flex-1 flex-col justify-center gap-6 px-4 py-6', styles.bg)}>
-      <div className='flex flex-1 flex-col justify-center gap-6 px-0.5'>
-        <div className='mx-auto max-w-[67%]'>
-          <img src={TutorOnboardingSVG} aria-hidden />
-        </div>
-        <div className='flex flex-col gap-2'>
-          <h3 className={clsx(styles.gradientTxt, 'text-center text-xl/tight font-semibold')}>
-            {t('onboarding.title')}
-          </h3>
-          <p className='text-center text-sm/snug font-normal text-gray-400'>
-            {t('onboarding.description')}
-          </p>
+    <>
+      <div className={styles.bg}>
+        <div className='mx-4 flex h-full flex-col justify-center gap-6 px-0.5'>
+          <div className='mx-auto max-w-[67%]'>
+            <img src={TutorOnboardingSVG} aria-hidden />
+          </div>
+          <div className='flex flex-col gap-2'>
+            <h3 className={clsx(styles.gradientTxt, 'text-center text-xl/tight font-semibold')}>
+              {t('onboarding.title')}
+            </h3>
+            <p className='text-center text-sm/snug font-normal text-gray-400'>
+              {t('onboarding.description')}
+            </p>
+          </div>
         </div>
       </div>
-      <div className='flex gap-4'>
+      <div className='mx-4 mb-4 mt-auto flex flex-col gap-4'>
         <Button variant='brand' className='flex-1' onClick={() => setWidgetTabs('starter')}>
           {t('general.buttons.start')}
         </Button>
       </div>
-    </div>
+    </>
   )
 }
 

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

@@ -23,8 +23,8 @@ function WidgetStarterPage() {
   })
 
   return (
-    <div className='flex flex-1 flex-col justify-center'>
-      <div className='flex flex-1 flex-col justify-center px-5 py-4'>
+    <>
+      <div className='flex flex-col justify-center px-5 py-4'>
         <GreetingsCard author={settings?.author ?? ''} tutorName={settings?.tutorName ?? ''} />
       </div>
       <div className='border-t border-t-neutral-700 px-5 py-4'>
@@ -34,7 +34,7 @@ function WidgetStarterPage() {
           onSend={() => setWidgetTabs('chat')}
         />
       </div>
-    </div>
+    </>
   )
 }
 

package/src/modules/widget/store/widget-settings.atom.ts

@@ -1,4 +1,4 @@
-import { atom, useAtom } from 'jotai'
+import { atom, useAtom, useAtomValue } from 'jotai'
 
 import type { WidgetSettingProps } from '@/src/types'
 
@@ -10,3 +10,5 @@ export const setWidgetSettingsAtom = atom(
 )
 
 export const useWidgetSettingsAtom = () => useAtom(setWidgetSettingsAtom)
+
+export const useWidgetSettingsAtomValue = () => useAtomValue(setWidgetSettingsAtom)

package/src/config/styles/shared-styles.module.css

@@ -1,16 +0,0 @@
-.scrollbar {
-  &::-webkit-scrollbar {
-    width: var(--hc-size-spacing-2);
-    height: var(--hc-size-spacing-2);
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background: var(--hc-color-neutral-400);
-    border-radius: var(--hc-size-border-medium);
-    border: calc(var(--hc-size-border-medium) / 2) solid transparent;
-  }
-}

package/src/modules/widget/components/container/styles.module.css

@@ -1,11 +0,0 @@
-.main {
-  background:
-    linear-gradient(
-      186.9deg,
-      rgb(from var(--ai-color-primary) r g b / 0.2) 6.65%,
-      rgb(from var(--ai-color-secondary) r g b / 0.2) 28.99%,
-      rgb(from var(--ai-color-dark) r g b / 0.2) 46.97%,
-      rgb(from var(--hc-color-neutral-1000) r g b / 0.2) 57.9%
-    ),
-    linear-gradient(0deg, var(--hc-color-neutral-1000), var(--hc-color-neutral-1000));
-}