app-tutor-ai-consumer 1.33.1 → 1.35.0

package/src/modules/messages/components/chat-file-uploader/chat-file-uploader.builder.ts

@@ -0,0 +1,19 @@
+import type { ChatFileUploaderProps } from './types'
+
+export class ChatFileUploaderBuilder {
+  private props: ChatFileUploaderProps = {}
+
+  withDisabled(disabled: boolean): ChatFileUploaderBuilder {
+    this.props.disabled = disabled
+    return this
+  }
+
+  withLoading(loading: boolean): ChatFileUploaderBuilder {
+    this.props.loading = loading
+    return this
+  }
+
+  build(): ChatFileUploaderProps {
+    return this.props
+  }
+}

package/src/modules/messages/components/chat-file-uploader/chat-file-uploader.spec.tsx

@@ -0,0 +1,58 @@
+import { render, screen } from '@/src/config/tests'
+
+import ChatFileUploader from './chat-file-uploader'
+import { ChatFileUploaderBuilder } from './chat-file-uploader.builder'
+
+vi.mock('@/src/lib/hooks/use-chat-file-upload', () => ({
+  useChatFileUpload: vi.fn(() => ({
+    handleSelectFile: vi.fn(),
+    selectedFile: null
+  }))
+}))
+
+const defaultProps = new ChatFileUploaderBuilder().build()
+const renderComponent = (props = defaultProps) => render(<ChatFileUploader {...props} />)
+
+describe('ChatFileUploader', () => {
+  it('should be disabled when disabled prop is true', () => {
+    const props = new ChatFileUploaderBuilder().withDisabled(true).build()
+    renderComponent(props)
+
+    const button = screen.getByRole('button', {
+      name: /general.buttons.open_options/i
+    })
+    expect(button).toBeDisabled()
+  })
+
+  it('should be disabled when loading prop is true', () => {
+    const props = new ChatFileUploaderBuilder().withLoading(true).build()
+    renderComponent(props)
+
+    const button = screen.getByRole('button', {
+      name: /general.buttons.open_options/i
+    })
+    expect(button).toBeDisabled()
+  })
+
+  it('should be enabled when both disabled and loading are false', () => {
+    const props = new ChatFileUploaderBuilder().withDisabled(false).withLoading(false).build()
+    renderComponent(props)
+
+    const button = screen.getByRole('button', {
+      name: /general.buttons.open_options/i
+    })
+    expect(button).toBeEnabled()
+  })
+
+  it('should trigger file input when clicking file option', async () => {
+    const { user } = renderComponent()
+
+    const button = screen.getByRole('button', {
+      name: /general.buttons.open_options/i
+    })
+    await user.click(button)
+
+    expect(screen.getByText('general.buttons.file')).toBeInTheDocument()
+    expect(screen.getByText('general.buttons.image')).toBeInTheDocument()
+  })
+})

package/src/modules/messages/components/chat-file-uploader/chat-file-uploader.tsx

@@ -0,0 +1,80 @@
+import { type ChangeEvent, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { DropdownActions } from '@/src/lib/components'
+import { useChatFileUpload } from '@/src/lib/hooks/use-chat-file-upload'
+import { FILE_TYPES, FILE_TYPES_KEYS } from '@/src/lib/hooks/use-chat-file-upload/constants'
+import type { FileType } from '@/src/lib/hooks/use-chat-file-upload/types'
+
+import type { ChatFileUploaderProps } from './types'
+
+function ChatFileUploader({ disabled = false, loading = false }: ChatFileUploaderProps) {
+  const { t } = useTranslation()
+  const fileInputRef = useRef<HTMLInputElement>(null)
+  const imageInputRef = useRef<HTMLInputElement>(null)
+
+  const acceptFileTypes = [FILE_TYPES.document, FILE_TYPES.spreadsheet, FILE_TYPES.pdf]
+    .flat()
+    .join()
+  const acceptImageTypes = FILE_TYPES.image.join()
+
+  const { handleSelectFile, selectedFile } = useChatFileUpload()
+
+  const triggerFileInput = (type: FileType) => {
+    const inputRef = type === FILE_TYPES_KEYS.DOCUMENT ? fileInputRef : imageInputRef
+    inputRef.current?.click()
+  }
+
+  const handleFileInputChange = (e: ChangeEvent<HTMLInputElement>, type: FileType) => {
+    const file = e.target.files?.[0]
+    if (file) {
+      handleSelectFile(file, type)
+    }
+    e.target.value = ''
+  }
+
+  return (
+    <>
+      <input
+        type='file'
+        ref={fileInputRef}
+        onChange={(e) => handleFileInputChange(e, FILE_TYPES_KEYS.DOCUMENT)}
+        accept={acceptFileTypes}
+        className='hidden'
+        aria-hidden='true'
+        aria-label={t('general.buttons.file')}
+      />
+      <input
+        type='file'
+        ref={imageInputRef}
+        onChange={(e) => handleFileInputChange(e, FILE_TYPES_KEYS.IMAGE)}
+        accept={acceptImageTypes}
+        className='hidden'
+        aria-hidden='true'
+        aria-label={t('general.buttons.image')}
+      />
+      <DropdownActions
+        triggerIcon='plus'
+        disabled={disabled || loading || selectedFile !== null}
+        items={[
+          {
+            label: 'general.buttons.file',
+            icon: 'file',
+            visible: true,
+            callback: () => triggerFileInput(FILE_TYPES_KEYS.DOCUMENT)
+          },
+          {
+            label: 'general.buttons.image',
+            icon: 'image',
+            visible: true,
+            callback: () => triggerFileInput(FILE_TYPES_KEYS.IMAGE)
+          }
+        ]}
+        triggerClassName='rounded-full border border-neutral-300 h-10 w-10 flex items-center justify-center'
+        triggerIconClassName='w-3.5 h-3.5'
+      />
+    </>
+  )
+}
+
+export default ChatFileUploader

package/src/modules/messages/components/chat-file-uploader/index.ts

@@ -0,0 +1 @@
+export { default as ChatFileUploader } from './chat-file-uploader'

package/src/modules/messages/components/chat-file-uploader/types.ts

@@ -0,0 +1,4 @@
+export type ChatFileUploaderProps = {
+  disabled?: boolean
+  loading?: boolean
+}

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

@@ -1,3 +1,4 @@
+export * from './chat-file-uploader'
 export * from './chat-input'
 export * from './message-img'
 export * from './message-item'

package/src/modules/messages/constants.ts

@@ -5,5 +5,6 @@ export const MessagesEndpoints = {
   getAll: (conversationId: string) =>
     `${process.env.API_CONVERSATION_URL}/v1/conversations/${conversationId}/messages`,
   create: (conversationId: string) =>
-    `${process.env.API_CONVERSATION_URL}/v1/conversations/${conversationId}/messages`
+    `${process.env.API_CONVERSATION_URL}/v1/conversations/${conversationId}/messages`,
+  getSignedUrls: () => `${process.env.API_HOTMART_TUTOR}/api/v1/files/signed-urls`
 }

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

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

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

@@ -0,0 +1,27 @@
+import { renderHook, waitFor } from '@/src/config/tests'
+
+import type { UseGetSignedUrlsProps } from './use-get-signed-urls'
+import { useGetSignedUrls } from './use-get-signed-urls'
+
+describe('useGetSignedUrls', () => {
+  const props: UseGetSignedUrlsProps = {
+    chatId: 'chat-id',
+    fileExtension: 'pdf',
+    fileNameWithExtension: 'file.pdf',
+    productId: 123
+  }
+  const render = () => renderHook(() => useGetSignedUrls(props))
+
+  it('should get signed upload url', async () => {
+    const { result } = render()
+
+    await waitFor(() => expect(result.current.isSuccess).toBeTruthy())
+
+    expect(result.current.data).toMatchObject({
+      uploadUrl: expect.any(String) as string,
+      futureDownloadUrl: expect.any(String) as string,
+      imagePreviewUrl: expect.any(String) as string,
+      fileNameWithExtension: expect.any(String) as string
+    })
+  })
+})

package/src/modules/messages/hooks/use-get-signed-urls/use-get-signed-urls.tsx

@@ -0,0 +1,38 @@
+import { useQuery } from '@tanstack/react-query'
+
+import { MessagesEndpoints } from '../../constants'
+import DirectMessagesService from '../../service.direct'
+
+export type UseGetSignedUrlsProps = {
+  chatId: string
+  fileExtension: string
+  fileNameWithExtension: string
+  productId: number
+  enabled?: boolean
+}
+
+export function useGetSignedUrls({
+  chatId,
+  fileExtension,
+  fileNameWithExtension,
+  productId,
+  enabled
+}: UseGetSignedUrlsProps) {
+  return useQuery({
+    queryKey: [
+      MessagesEndpoints.getSignedUrls(),
+      chatId,
+      fileExtension,
+      fileNameWithExtension,
+      productId
+    ],
+    queryFn: () =>
+      DirectMessagesService.getSignedUrls({
+        chatId,
+        fileExtension,
+        fileNameWithExtension,
+        productId
+      }),
+    enabled
+  })
+}

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

@@ -1,7 +1,6 @@
 import { act, MockRequest, renderHook, waitFor } from '@/src/config/tests'
 import IMessageWithSenderDataMock from '../../__tests__/imessage-with-sender-data.mock'
 import { MessagesEndpoints, MSG_MAX_COUNT } from '../../constants'
-import type { IMessageWithSenderData } from '../../types'
 
 import useInfiniteGetMessages from './use-infinite-get-messages'
 
@@ -34,7 +33,7 @@ describe('useInfiniteGetMessages', () => {
 
     MockRequest.mock(
       MessagesEndpoints.getAll(mockConversationId),
-      new IMessageWithSenderDataMock().getMany(allMessages) as IMessageWithSenderData[]
+      new IMessageWithSenderDataMock().getMany(allMessages)
     )
 
     const { result } = createHook({

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

@@ -1,5 +1,4 @@
-import type { UndefinedInitialDataInfiniteOptions } from '@tanstack/react-query'
-import { useInfiniteQuery } from '@tanstack/react-query'
+import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/react-query'
 
 import { formatTime } from '@/src/config/dayjs'
 import { api } from '@/src/config/request'
@@ -18,7 +17,7 @@ export const getAllMessagesQuery = ({
   profileId,
   limit = MSG_MAX_COUNT
 }: GetAllMessagesQueryProps) =>
-  ({
+  infiniteQueryOptions({
     queryKey: ['getAllMessagesWithoutSparkie', limit, conversationId],
     queryFn: async ({ pageParam }: { pageParam?: number }) => {
       const { data: messages } = await api.get<IMessageWithSenderData[]>(
@@ -45,6 +44,9 @@ export const getAllMessagesQuery = ({
       return minSentAt
     },
     enabled: Boolean(conversationId && profileId) && limit > 0,
+    meta: {
+      persist: false
+    },
     select(data) {
       const messages = data.pages?.flatMap((page) => page.messages) ?? []
       return messagesParser({ messages, profileId: profileId as string }).reduce(
@@ -68,11 +70,7 @@ export const getAllMessagesQuery = ({
         new Map<string, ParsedMessage[]>()
       )
     }
-  }) as UndefinedInitialDataInfiniteOptions<
-    FetchMessagesResponse,
-    Error,
-    Map<string, ParsedMessage[]>
-  >
+  })
 
 function useInfiniteGetMessages({ conversationId, profileId, limit }: GetAllMessagesQueryProps) {
   const query = getAllMessagesQuery({

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

@@ -0,0 +1 @@
+export { default as usePrefetchMessages } from './use-prefetch-messages'

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

@@ -0,0 +1,28 @@
+import { useCallback, useEffect } from 'react'
+import { useQueryClient, useSuspenseQuery } from '@tanstack/react-query'
+
+import { getProfileQuery } from '@/src/modules/profile'
+import type { WidgetSettingProps } from '@/src/types'
+import { MSG_MAX_COUNT } from '../../constants'
+import { getAllMessagesQuery } from '../use-infinite-get-messages'
+
+function usePrefetchMessages(settings: WidgetSettingProps) {
+  const queryClient = useQueryClient()
+  const profileQuery = useSuspenseQuery(getProfileQuery())
+
+  const prefetch = useCallback(async () => {
+    await queryClient.prefetchInfiniteQuery(
+      getAllMessagesQuery({
+        conversationId: settings.conversationId,
+        profileId: typeof profileQuery?.data?.id === 'string' ? profileQuery?.data?.id : undefined,
+        limit: MSG_MAX_COUNT
+      })
+    )
+  }, [profileQuery?.data?.id, queryClient, settings.conversationId])
+
+  useEffect(() => {
+    void prefetch()
+  }, [prefetch])
+}
+
+export default usePrefetchMessages

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

@@ -0,0 +1,2 @@
+export * from './types'
+export { default as useSuspenseMessages } from './use-suspense-messages'

package/src/modules/messages/hooks/use-suspense-messages/types.ts

@@ -0,0 +1,4 @@
+export type UseSuspenseMessagesProps = {
+  conversationId?: string
+  limit?: number
+}

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

@@ -0,0 +1,21 @@
+import { useSuspenseInfiniteQuery, useSuspenseQuery } from '@tanstack/react-query'
+
+import { getProfileQuery } from '@/src/modules/profile'
+import { MSG_MAX_COUNT } from '../../constants'
+import { getAllMessagesQuery } from '../use-infinite-get-messages'
+
+import type { UseSuspenseMessagesProps } from './types'
+
+function useSuspenseMessages({ conversationId, limit = MSG_MAX_COUNT }: UseSuspenseMessagesProps) {
+  const profileQuery = useSuspenseQuery(getProfileQuery())
+
+  return useSuspenseInfiniteQuery(
+    getAllMessagesQuery({
+      conversationId: conversationId,
+      profileId: typeof profileQuery?.data?.id === 'string' ? profileQuery?.data?.id : undefined,
+      limit
+    })
+  )
+}
+
+export default useSuspenseMessages

package/src/modules/messages/service.direct.ts

@@ -1,4 +1,4 @@
-import type { Message } from '@hotmart/sparkie/dist/MessageService'
+import type { Message } from '@hotmart-org-ca/sparkie/dist/MessageService'
 
 import { api } from '@/src/config/request'
 
@@ -6,6 +6,8 @@ import { MessagesEndpoints } from './constants'
 import type {
   DirectMessagesServiceProps,
   FetchMessagesResponse,
+  IGetSignedUrlsPayload,
+  IGetSignedUrlsResponse,
   IMessageWithSenderData
 } from './types'
 
@@ -36,6 +38,22 @@ class DirectMessagesService {
 
     return data
   }
+
+  async getSignedUrls({
+    productId,
+    chatId,
+    fileExtension,
+    fileNameWithExtension
+  }: IGetSignedUrlsPayload): Promise<IGetSignedUrlsResponse> {
+    const { data } = await api.post<IGetSignedUrlsResponse>(MessagesEndpoints.getSignedUrls(), {
+      productId,
+      chatId,
+      fileExtension,
+      fileNameWithExtension
+    })
+
+    return data
+  }
 }
 
 export default new DirectMessagesService()

package/src/modules/messages/service.ts

@@ -1,4 +1,4 @@
-import type { Message } from '@hotmart/sparkie/dist/MessageService'
+import type { Message } from '@hotmart-org-ca/sparkie/dist/MessageService'
 
 import { ApiError } from '@/src/config/request'
 import { HttpCodes } from '@/src/lib/utils'

package/src/modules/messages/store/messages-max-count.atom.ts

@@ -2,7 +2,7 @@ import { atom, useAtom, useAtomValue } from 'jotai'
 
 const INITIAL_MAX_COUNT = 2
 
-const messagesMaxCountAtom = atom(INITIAL_MAX_COUNT)
+export const messagesMaxCountAtom = atom(INITIAL_MAX_COUNT)
 
 const setMessagesMaxCountAtom = atom(
   (get) => get(messagesMaxCountAtom),
@@ -10,4 +10,4 @@ const setMessagesMaxCountAtom = atom(
 )
 
 export const useSetMessagesMaxCountAtom = () => useAtom(setMessagesMaxCountAtom)
-export const useMessagesMaxCount = () => useAtomValue(setMessagesMaxCountAtom)
+export const useMessagesMaxCount = () => useAtomValue(messagesMaxCountAtom)

package/src/modules/messages/types.ts

@@ -2,7 +2,7 @@ import type {
   Message as SparkieMsg,
   MessageContent,
   SenderData
-} from '@hotmart/sparkie/dist/MessageService'
+} from '@hotmart-org-ca/sparkie/dist/MessageService'
 
 export type IMessage = SparkieMsg & {
   metadata: {
@@ -19,6 +19,13 @@ export type IGetMessagesPayload = {
   before?: number
 }
 
+export type IGetSignedUrlsPayload = {
+  chatId: string
+  fileExtension: string
+  fileNameWithExtension: string
+  productId: number
+}
+
 export type ISendTextMessagePayload = {
   conversationId: string
   content: {
@@ -63,6 +70,13 @@ export type MessageParserArgs = {
   profileId: string
 }
 
+export type IGetSignedUrlsResponse = {
+  uploadUrl: string
+  futureDownloadUrl: string
+  imagePreviewUrl: string
+  fileNameWithExtension: string
+}
+
 export type ParsedMessage = {
   from: string
   id: string

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

@@ -1,4 +1,4 @@
-import type { Message } from '@hotmart/sparkie/dist/MessageService'
+import type { Message } from '@hotmart-org-ca/sparkie/dist/MessageService'
 import type { InfiniteData, QueryClient } from '@tanstack/react-query'
 import { produce } from 'immer'
 

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

@@ -1,13 +1,14 @@
-import { useQuery } from '@tanstack/react-query'
+import { queryOptions, 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 const getProfileQuery = (enabled: boolean = true) =>
+  queryOptions({
+    queryKey: [ProfileEndpoints.getProfile()],
+    queryFn: () => ProfileService.getProfile(),
+    enabled
+  })
 
 export function useGetProfile(enabled: boolean = true) {
   return useQuery(getProfileQuery(enabled))

package/src/modules/sparkie/__tests__/sparkie.mock.ts

@@ -1,11 +1,8 @@
 import ICursorUpdateBuilder from '../../cursor/__tests__/icursor-update.builder'
-import type { IMessageWithSenderData } from '../../messages'
 import IMessageWithSenderDataMock from '../../messages/__tests__/imessage-with-sender-data.mock'
 
 export const SparkieMessageServiceMock = {
-  getAll: vi
-    .fn()
-    .mockReturnValue(new IMessageWithSenderDataMock().getMany(10) as IMessageWithSenderData[]),
+  getAll: vi.fn().mockReturnValue(new IMessageWithSenderDataMock().getMany(10)),
   post: vi.fn(),
   postDirect: vi.fn(),
   remove: vi.fn()

package/src/modules/sparkie/hooks/use-init-sparkie/use-init-sparkie.tsx

@@ -1,39 +1,45 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect } from 'react'
+import type { useStore } from 'jotai'
 
-import { useWidgetSettingsAtomValue } from '@/src/modules/widget'
 import { SparkieService } from '../..'
+import { sparkieStateAtom } from '../../store'
 
-function useInitSparkie() {
-  const [isSuccess, setIsSuccess] = useState(false)
-  const settings = useWidgetSettingsAtomValue()
+export type UseInitSparkieProps = {
+  hotmartToken: string
+  store?: ReturnType<typeof useStore>
+}
 
-  const init = useCallback(async () => {
-    if (!settings?.hotmartToken) return
+function useInitSparkie({ hotmartToken, store }: UseInitSparkieProps) {
+  const sparkieState = store?.get(sparkieStateAtom)
 
-    try {
-      await SparkieService.initSparkie({
-        token: settings?.hotmartToken,
-        skipPresenceSetup: true,
-        retryOptions: {
-          maxRetries: 5,
-          retryDelay: 2000,
-          backoffMultiplier: 1.5
-        }
-      })
-      await SparkieService.ensureInitialized()
-      setIsSuccess(true)
-    } catch {
-      setIsSuccess(false)
-      // TODO: Create Error PAGE and setTab
-      // setTab('information')
+  const init = useCallback(async () => {
+    if (hotmartToken) {
+      try {
+        store?.set(sparkieStateAtom, 'initializing')
+        await SparkieService.initSparkie({
+          token: hotmartToken,
+          skipPresenceSetup: true,
+          retryOptions: {
+            maxRetries: 5,
+            retryDelay: 1000,
+            backoffMultiplier: 1.5
+          }
+        })
+        await SparkieService.ensureInitialized()
+        store?.set(sparkieStateAtom, 'initialized')
+      } catch {
+        store?.set(sparkieStateAtom, 'failed')
+      }
     }
-  }, [settings?.hotmartToken])
+  }, [hotmartToken, store])
 
-  useEffect(() => {
-    void init()
-  }, [init])
+  const checkState = useCallback(() => {
+    if (sparkieState === 'idle') return init()
+  }, [init, sparkieState])
 
-  return isSuccess
+  useEffect(() => {
+    void checkState()
+  }, [checkState])
 }
 
 export default useInitSparkie

package/src/modules/sparkie/service.ts

@@ -1,4 +1,4 @@
-import Sparkie from '@hotmart/sparkie'
+import Sparkie from '@hotmart-org-ca/sparkie'
 
 import { MSG_MAX_COUNT } from '../messages'
 

package/src/modules/sparkie/store/index.ts

@@ -0,0 +1 @@
+export * from './sparkie-state.atom'

package/src/modules/sparkie/store/sparkie-state.atom.ts

@@ -0,0 +1,13 @@
+import { atom, useAtom, useAtomValue } from 'jotai'
+
+import type { InitializationState } from '../types'
+
+export const sparkieStateAtom = atom<InitializationState>('idle')
+
+const setSparkieStateAtom = atom(
+  (get) => get(sparkieStateAtom),
+  (_, set, sparkieState: InitializationState) => set(sparkieStateAtom, sparkieState)
+)
+
+export const useSparkieStateAtom = () => useAtom(setSparkieStateAtom)
+export const useSparkieStateAtomValue = () => useAtomValue(sparkieStateAtom)

package/src/modules/widget/__tests__/widget-settings-props.builder.ts

@@ -1,6 +1,6 @@
 import type { ILanguages } from '@/src/config/i18n'
 import { chance } from '@/src/config/tests'
-import type { User, WidgetSettingProps } from '@/src/types'
+import type { Theme, User, WidgetSettingProps } from '@/src/types'
 
 class WidgetSettingPropsBuilder implements WidgetSettingProps {
   hotmartToken: string
@@ -21,6 +21,19 @@ class WidgetSettingPropsBuilder implements WidgetSettingProps {
   classHashId?: string
   owner_id?: string
   current_media_codes?: string
+  config?:
+    | {
+        theme?: Theme
+        metadata?: {
+          parent?: 'AGENT' | 'TUTOR'
+          agentProductId?: number
+          agentName?: string
+          courseName?: string
+          source?: string
+          promptId?: string
+        }
+      }
+    | undefined
 
   constructor() {
     this.hotmartToken = chance.guid()
@@ -144,6 +157,12 @@ class WidgetSettingPropsBuilder implements WidgetSettingProps {
 
     return this
   }
+
+  withTheme(theme: Theme) {
+    this.config = { ...(this.config ?? {}), theme }
+
+    return this
+  }
 }
 
 export default WidgetSettingPropsBuilder