app-tutor-ai-consumer 1.37.0 → 1.39.0

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

@@ -2,24 +2,25 @@ 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 {
+  FILE_TYPES,
+  FILE_TYPES_KEYS
+} from '@/src/modules/messages/hooks/use-chat-file-upload/constants'
+import type { FileType } from '../../types'
 
-import type { ChatFileUploaderProps } from './types'
+const acceptImageTypes = FILE_TYPES.image.join()
+const acceptFileTypes = [FILE_TYPES.document, FILE_TYPES.spreadsheet, FILE_TYPES.pdf].flat().join()
 
-function ChatFileUploader({ disabled = false, loading = false }: ChatFileUploaderProps) {
+export type ChatFileUploaderProps = {
+  onUploadFile: (file: File, type: FileType) => void
+  disabled?: boolean
+}
+
+function ChatFileUploader({ onUploadFile, disabled = 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()
@@ -28,7 +29,7 @@ function ChatFileUploader({ disabled = false, loading = false }: ChatFileUploade
   const handleFileInputChange = (e: ChangeEvent<HTMLInputElement>, type: FileType) => {
     const file = e.target.files?.[0]
     if (file) {
-      handleSelectFile(file, type)
+      onUploadFile(file, type)
     }
     e.target.value = ''
   }
@@ -53,9 +54,10 @@ function ChatFileUploader({ disabled = false, loading = false }: ChatFileUploade
         aria-hidden='true'
         aria-label={t('general.buttons.image')}
       />
+
       <DropdownActions
         triggerIcon='plus'
-        disabled={disabled || loading || selectedFile !== null}
+        disabled={disabled}
         items={[
           {
             label: 'general.buttons.file',

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

@@ -0,0 +1,34 @@
+import type { PropsWithChildren } from 'react'
+
+import { useChatFileUpload } from '@/src/modules/messages/hooks/use-chat-file-upload'
+import { useAttachedFileAtom } from '../../store/attached-file.atom'
+import { ChatFilePreview } from '../chat-file-preview'
+import { ChatFileUploader } from '../chat-file-uploader'
+
+function ChatFileUploaderWrapper({ children }: PropsWithChildren) {
+  const { handleUploadFile, handleRemoveFile, isUploading } = useChatFileUpload()
+  const [attachedFileAtom] = useAttachedFileAtom()
+
+  return (
+    <div className='flex flex-col gap-2'>
+      {attachedFileAtom && (
+        <ChatFilePreview
+          name={attachedFileAtom.name}
+          size={attachedFileAtom.size}
+          type={attachedFileAtom.type}
+          imageUrl={attachedFileAtom.previewUrl}
+          isLoading={isUploading}
+          onClose={handleRemoveFile}
+          showCloseButton
+        />
+      )}
+
+      <div className='flex flex-row gap-2'>
+        <ChatFileUploader onUploadFile={handleUploadFile} disabled={Boolean(attachedFileAtom)} />
+        <div className='flex-1'>{children}</div>
+      </div>
+    </div>
+  )
+}
+
+export default ChatFileUploaderWrapper

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

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

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

@@ -1,6 +1,8 @@
 import clsx from 'clsx'
 
 import type { ParsedMessage } from '../../types'
+import { ChatFilePreview } from '../chat-file-preview'
+import type { FilePreviewTypes } from '../chat-file-preview/types'
 import { MessageActions } from '../message-actions'
 import { MessageContentTypeRenderer } from '../message-content-type-renderer'
 
@@ -19,6 +21,14 @@ function MessageItem({ message }: { message: ParsedMessage }) {
           'self-end': messageFromUser
         }
       )}>
+      {message?.file && message?.metadata && (
+        <ChatFilePreview
+          name={message.file.name}
+          size={message.file.size}
+          imageUrl={message.file.imagePreviewUrl || ''}
+          type={message.metadata.context?.document_type?.toLocaleLowerCase() as FilePreviewTypes}
+        />
+      )}
       <div
         data-test='messages-item'
         className={clsx('w-full overflow-x-hidden rounded-lg p-3', {

package/src/modules/messages/constants.ts

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

package/src/{lib → modules/messages}/hooks/use-chat-file-upload/constants.ts

@@ -9,3 +9,5 @@ export const FILE_TYPES_KEYS = {
   DOCUMENT: 'document',
   IMAGE: 'image'
 } as const
+
+export const MAX_FILE_SIZE = 15 * 1024 * 1024

package/src/modules/messages/hooks/use-chat-file-upload/use-chat-file-upload.spec.ts

@@ -0,0 +1,19 @@
+import { renderHook, waitFor } from '@/src/config/tests'
+
+import { useChatFileUpload } from './use-chat-file-upload'
+
+describe('useChatFileUpload', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  const createHook = () => renderHook(() => useChatFileUpload())
+
+  it('should return correct values', async () => {
+    const { result } = createHook()
+
+    await waitFor(() => expect(result.current).toBeDefined())
+
+    expect(result.current.isUploading).toBe(false)
+  })
+})

package/src/modules/messages/hooks/use-chat-file-upload/use-chat-file-upload.ts

@@ -0,0 +1,102 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { Toast, ToastUtils } from '@/src/lib/utils'
+import { useUploadFile } from '@/src/modules/messages/hooks/use-upload-file'
+import { useWidgetSettingsAtomValue } from '@/src/modules/widget'
+import { formatFileSize } from '../../components/chat-file-preview/utils'
+import { useAttachedFileAtom } from '../../store/attached-file.atom'
+import type { FileType, IAttachedFile } from '../../types'
+import { useGetFilesSignedUrls } from '../use-get-files-signed-urls'
+
+import { FILE_TYPES_KEYS, MAX_FILE_SIZE } from './constants'
+
+export type UseChatFileUploadReturn = {
+  handleUploadFile: (file: File, type: FileType) => void
+  handleRemoveFile: () => void
+  isUploading: boolean
+}
+
+export function useChatFileUpload(): UseChatFileUploadReturn {
+  const { t } = useTranslation()
+  const [isUploading, setIsUploading] = useState<boolean>(false)
+  const settings = useWidgetSettingsAtomValue()
+  const [attachedFileAtom, setAttachedFileAtom] = useAttachedFileAtom()
+  const uploadFile = useUploadFile()
+  const getSignedUrls = useGetFilesSignedUrls({
+    chatId: settings?.conversationId || '',
+    productId: settings?.config?.metadata?.agentProductId || 0
+  })
+
+  const handleUploadFile = (file: File, type: FileType) => {
+    if (file.size > MAX_FILE_SIZE) {
+      ToastUtils.dispatch({
+        type: Toast.DANGER,
+        message: t('send_message.file_upload.error.file_size_exceeded', {
+          max_file_size: formatFileSize(MAX_FILE_SIZE)
+        })
+      })
+      return
+    }
+
+    const errorMessageLabel = `send_message.file_upload.error.upload_${type === FILE_TYPES_KEYS.IMAGE ? 'image' : 'file'}`
+
+    setIsUploading(true)
+
+    const newFile: IAttachedFile = {
+      file,
+      type,
+      name: file.name,
+      size: file.size
+    }
+
+    if (type === FILE_TYPES_KEYS.IMAGE) {
+      newFile.previewUrl = URL.createObjectURL(file)
+    }
+
+    setAttachedFileAtom(newFile)
+
+    getSignedUrls.mutate(
+      { fileExtension: file.name.split('.').pop() || '', fileNameWithExtension: file.name },
+      {
+        onSuccess: (data) => {
+          setAttachedFileAtom((prevAttachedFile) => ({
+            ...(prevAttachedFile as IAttachedFile),
+            downloadUrl: data.futureDownloadUrl,
+            imagePreviewUrl: data.imagePreviewUrl
+          }))
+          uploadFile.mutate(
+            { signedUrl: data.uploadUrl, file },
+            {
+              onSuccess: () => {
+                setIsUploading(false)
+              },
+              onError: () => {
+                handleRemoveFile()
+                ToastUtils.dispatch({ message: t(errorMessageLabel), type: 'danger' })
+              }
+            }
+          )
+        },
+        onError: () => {
+          handleRemoveFile()
+          ToastUtils.dispatch({ message: t(errorMessageLabel), type: 'danger' })
+        }
+      }
+    )
+  }
+
+  const handleRemoveFile = () => {
+    if (attachedFileAtom?.previewUrl) {
+      URL.revokeObjectURL(attachedFileAtom.previewUrl)
+    }
+    setAttachedFileAtom(null)
+    setIsUploading(false)
+  }
+
+  return {
+    handleUploadFile,
+    handleRemoveFile,
+    isUploading
+  }
+}

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

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

package/src/modules/messages/hooks/{use-get-signed-urls/use-get-signed-urls.spec.tsx → use-get-files-signed-urls/use-get-files-signed-urls.spec.ts}

@@ -1,20 +1,20 @@
 import { renderHook, waitFor } from '@/src/config/tests'
 
-import type { UseGetSignedUrlsProps } from './use-get-signed-urls'
-import { useGetSignedUrls } from './use-get-signed-urls'
+import type { UseGetFilesSignedUrlsProps } from './use-get-files-signed-urls'
+import { useGetFilesSignedUrls } from './use-get-files-signed-urls'
 
-describe('useGetSignedUrls', () => {
-  const props: UseGetSignedUrlsProps = {
+describe('useGetFilesSignedUrls', () => {
+  const props: UseGetFilesSignedUrlsProps = {
     chatId: 'chat-id',
-    fileExtension: 'pdf',
-    fileNameWithExtension: 'file.pdf',
     productId: 123
   }
-  const render = () => renderHook(() => useGetSignedUrls(props))
+  const render = () => renderHook(() => useGetFilesSignedUrls(props))
 
   it('should get signed upload url', async () => {
     const { result } = render()
 
+    result.current.mutate({ fileExtension: 'png', fileNameWithExtension: 'image.png' })
+
     await waitFor(() => expect(result.current.isSuccess).toBeTruthy())
 
     expect(result.current.data).toMatchObject({

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

@@ -0,0 +1,25 @@
+import { useMutation } from '@tanstack/react-query'
+
+import DirectMessagesService from '../../service.direct'
+
+export type UseGetFilesSignedUrlsProps = {
+  chatId: string
+  productId: number
+}
+
+export type UseGetFilesSignedUrlsMutationProps = {
+  fileExtension: string
+  fileNameWithExtension: string
+}
+
+export function useGetFilesSignedUrls({ chatId, productId }: UseGetFilesSignedUrlsProps) {
+  return useMutation({
+    mutationFn: ({ fileExtension, fileNameWithExtension }: UseGetFilesSignedUrlsMutationProps) =>
+      DirectMessagesService.getFilesSignedUrls({
+        chatId,
+        fileExtension,
+        fileNameWithExtension,
+        productId
+      })
+  })
+}

package/src/modules/messages/hooks/use-send-text-message/use-send-text-message.spec.tsx

@@ -76,7 +76,7 @@ describe('useSendTextMessage', () => {
 
     expect(DataHubService.sendEvent).toHaveBeenCalledWith({
       schema: expect.objectContaining({
-        questionId: mockResponse.id,
+        messageId: mockResponse.id,
         questionType: 'TEXT'
       })
     })

package/src/modules/messages/hooks/use-send-text-message/use-send-text-message.tsx

@@ -3,8 +3,8 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { UAParser } from 'ua-parser-js'
 import { v4 } from 'uuid'
 
-import { ComponentSource, DataHubService } from '@/src/config/datahub'
-import { TrySendTutorMessageSchema } from '@/src/config/datahub/schemas/tutor'
+import { AgentType, ComponentSource, DataHubService } from '@/src/config/datahub'
+import { TrySendMessageSchema } from '@/src/config/datahub/schemas/tutor'
 import { APP_VERSION, HttpCodes, PLATFORM } from '@/src/lib/utils'
 import { DirectMessagesService as MessagesService } from '@/src/modules/messages'
 import { useGetProfile } from '@/src/modules/profile'
@@ -15,6 +15,7 @@ import {
 } from '@/src/modules/widget'
 import { MessagesEvents } from '../../events'
 import { useMessagesMaxCount } from '../../store'
+import { useAttachedFileAtom } from '../../store/attached-file.atom'
 import { setMessagesCache } from '../../utils'
 import { getAllMessagesQuery } from '../use-infinite-get-messages'
 
@@ -25,6 +26,7 @@ function useSendTextMessage() {
   const queryClient = useQueryClient()
   const limit = useMessagesMaxCount()
   const isAgentMode = useIsAgentParentAtomValue()
+  const [attachedFileAtom, setAttachedFileAtom] = useAttachedFileAtom()
 
   const userId = useMemo(() => profileQuery.data?.userId?.toString(), [profileQuery.data?.userId])
   const profileId = useMemo(() => profileQuery.data?.id?.toString(), [profileQuery.data?.id])
@@ -60,7 +62,16 @@ function useSendTextMessage() {
         message: {
           content: {
             type: 'text/plain',
-            text: processedMessage
+            text: processedMessage,
+            ...(attachedFileAtom
+              ? {
+                  file: {
+                    name: attachedFileAtom.name,
+                    size: attachedFileAtom.size,
+                    imagePreviewUrl: attachedFileAtom.imagePreviewUrl
+                  }
+                }
+              : {})
           },
           metadata: {
             author: 'user',
@@ -88,7 +99,13 @@ function useSendTextMessage() {
               source: settings.config?.metadata?.source,
               prompt: settings.config?.metadata?.promptId,
               membershipSlug: settings.membershipSlug,
-              membershipId: settings.membershipId
+              membershipId: settings.membershipId,
+              ...(attachedFileAtom
+                ? {
+                    document_type: attachedFileAtom.type.toUpperCase(),
+                    document_url: attachedFileAtom.downloadUrl
+                  }
+                : {})
             },
             externalId: v4(),
             namespace: settings.namespace,
@@ -115,25 +132,20 @@ function useSendTextMessage() {
     },
     onSuccess(data) {
       setMessagesCache({ queryKey: messagesQueryConfig.queryKey, queryClient, data })()
-
-      DataHubService.sendEvent({
-        schema: new TrySendTutorMessageSchema({
-          questionId: data.id,
-          componentSource: isAgentMode
-            ? ComponentSource.PRODUCT_AGENT
-            : ComponentSource.HOTMART_TUTOR
-        })
-      })
+      setAttachedFileAtom(null)
     },
-    onError(error) {
+    onSettled(data, error) {
       DataHubService.sendEvent({
-        schema: new TrySendTutorMessageSchema({
-          statusCode: HttpCodes.BAD_REQUEST,
-          result: 'FAILURE',
-          failureDescription: error.message,
+        schema: new TrySendMessageSchema({
+          messageId: data?.id,
+          statusCode: error ? HttpCodes.BAD_REQUEST : HttpCodes.OK,
+          result: error ? 'FAILURE' : 'SUCCESSFUL',
+          failureDescription: error?.message,
           componentSource: isAgentMode
             ? ComponentSource.PRODUCT_AGENT
-            : ComponentSource.HOTMART_TUTOR
+            : ComponentSource.HOTMART_TUTOR,
+          agent: isAgentMode ? AgentType.PRODUCT_AGENT : AgentType.HOTMART_TUTOR,
+          conversationId: settings?.conversationId
         })
       })
     }

package/src/modules/messages/hooks/use-subscribe-message-received-event/use-subscribe-message-received-event.tsx

@@ -4,7 +4,8 @@ import { useQueryClient } from '@tanstack/react-query'
 import { produce } from 'immer'
 
 import { ComponentSource, DataHubService } from '@/src/config/datahub'
-import { ViewTutorAnswerMessageSchema } from '@/src/config/datahub/schemas/tutor'
+import { ViewAnswerMessageSchema } from '@/src/config/datahub/schemas/tutor'
+import { AgentType } from '@/src/config/datahub/types'
 import { useUpdateCursor } from '@/src/modules/cursor/hooks'
 import { useGetProfile } from '@/src/modules/profile'
 import { SparkieService } from '@/src/modules/sparkie'
@@ -67,12 +68,14 @@ const useSubscribeMessageReceivedEvent = () => {
 
       if (!isMine) {
         DataHubService.sendEvent({
-          schema: new ViewTutorAnswerMessageSchema({
-            correlationId: data.metadata.correlationId,
-            messageId: data.id,
+          schema: new ViewAnswerMessageSchema({
+            correlationId: data?.metadata?.correlationId,
+            messageId: data?.id,
             componentSource: isAgentMode
               ? ComponentSource.PRODUCT_AGENT
-              : ComponentSource.HOTMART_TUTOR
+              : ComponentSource.HOTMART_TUTOR,
+            agent: isAgentMode ? AgentType.PRODUCT_AGENT : AgentType.HOTMART_TUTOR,
+            conversationId: settings?.conversationId
           })
         })
 
@@ -91,6 +94,7 @@ const useSubscribeMessageReceivedEvent = () => {
       profileId,
       queryClient,
       setWidgetLoading,
+      settings?.conversationId,
       useUpdateCursorMutation
     ]
   )

package/src/modules/messages/hooks/use-upload-file/index.ts

@@ -0,0 +1 @@
+export * from './use-upload-file'

package/src/modules/messages/hooks/use-upload-file/use-upload-file.ts

@@ -0,0 +1,15 @@
+import { useMutation } from '@tanstack/react-query'
+
+import DirectMessagesService from '../../service.direct'
+
+export type UseUploadFileMutationProps = {
+  signedUrl: string
+  file: File
+}
+
+export function useUploadFile() {
+  return useMutation({
+    mutationFn: ({ signedUrl, file }: UseUploadFileMutationProps) =>
+      DirectMessagesService.uploadFile({ signedUrl, file })
+  })
+}

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

@@ -1,4 +1,5 @@
 import type { Message } from '@hotmart-org-ca/sparkie/dist/MessageService'
+import axios from 'axios'
 
 import { api } from '@/src/config/request'
 
@@ -6,9 +7,10 @@ import { MessagesEndpoints } from './constants'
 import type {
   DirectMessagesServiceProps,
   FetchMessagesResponse,
-  IGetSignedUrlsPayload,
-  IGetSignedUrlsResponse,
-  IMessageWithSenderData
+  IGetFilesSignedUrlsPayload,
+  IGetFilesSignedUrlsResponse,
+  IMessageWithSenderData,
+  IUploadFilePayload
 } from './types'
 
 class DirectMessagesService {
@@ -39,17 +41,32 @@ class DirectMessagesService {
     return data
   }
 
-  async getSignedUrls({
+  async getFilesSignedUrls({
     productId,
     chatId,
     fileExtension,
     fileNameWithExtension
-  }: IGetSignedUrlsPayload): Promise<IGetSignedUrlsResponse> {
-    const { data } = await api.post<IGetSignedUrlsResponse>(MessagesEndpoints.getSignedUrls(), {
-      productId,
-      chatId,
-      fileExtension,
-      fileNameWithExtension
+  }: IGetFilesSignedUrlsPayload): Promise<IGetFilesSignedUrlsResponse> {
+    const { data } = await api.post<IGetFilesSignedUrlsResponse>(
+      MessagesEndpoints.getFilesSignedUrls(),
+      {
+        productId,
+        chatId,
+        fileExtension,
+        fileNameWithExtension
+      }
+    )
+
+    return data
+  }
+
+  async uploadFile({ signedUrl, file }: IUploadFilePayload) {
+    // New Axios instance without Bearer Token
+    const api = axios.create()
+    const { data } = await api.put<IGetFilesSignedUrlsResponse>(signedUrl, file, {
+      headers: {
+        'Content-Type': file.type
+      }
     })
 
     return data

package/src/modules/messages/store/attached-file.atom.ts

@@ -0,0 +1,7 @@
+import { atom, useAtom } from 'jotai'
+
+import type { IAttachedFile } from '../types'
+
+const attachedFileAtom = atom<IAttachedFile | null>(null)
+
+export const useAttachedFileAtom = () => useAtom(attachedFileAtom)

package/src/modules/messages/types.ts

@@ -10,6 +10,17 @@ export type IMessage = SparkieMsg & {
     sessionId: string
     externalId: string
     correlationId: string
+    context?: {
+      ['document_type']: string
+      ['document_url']: string
+    }
+  }
+  content: MessageContent & {
+    file?: {
+      name: string
+      size: number
+      imagePreviewUrl?: string
+    }
   }
   sending?: boolean // indicates when the current message is being sent
 }
@@ -19,13 +30,18 @@ export type IGetMessagesPayload = {
   before?: number
 }
 
-export type IGetSignedUrlsPayload = {
+export type IGetFilesSignedUrlsPayload = {
   chatId: string
   fileExtension: string
   fileNameWithExtension: string
   productId: number
 }
 
+export type IUploadFilePayload = {
+  signedUrl: string
+  file: File
+}
+
 export type ISendTextMessagePayload = {
   conversationId: string
   content: {
@@ -70,13 +86,25 @@ export type MessageParserArgs = {
   profileId: string
 }
 
-export type IGetSignedUrlsResponse = {
+export type IGetFilesSignedUrlsResponse = {
   uploadUrl: string
   futureDownloadUrl: string
   imagePreviewUrl: string
   fileNameWithExtension: string
 }
 
+export type FileType = 'document' | 'image'
+
+export type IAttachedFile = {
+  file: File
+  type: FileType
+  name: string
+  size: number
+  previewUrl?: string
+  downloadUrl?: string
+  imagePreviewUrl?: string
+}
+
 export type ParsedMessage = {
   from: string
   id: string