app-tutor-ai-consumer 1.38.0 → 1.39.0

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+# [1.39.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.38.0...v1.39.0) (2025-11-11)
+
+### Features
+
+- changing file extension ([60d395b](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/60d395b9a34a49c1e7935dec0593ee75d23be8fe))
+- code improvement ([e539ba3](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/e539ba3882c06dba661a7056476497fb929cd5be))
+- code improvement ([b17de7b](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/b17de7b39bc5bfc13f7dbffbb322934e4c8d1973))
+- code improvements ([ecf54e6](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/ecf54e6be8676890b67f8b4cfecb21dbc6f2b981))
+- error i18n messages ([823ea93](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/823ea93bb38d3777fda686a47e60ab8c94738dfd))
+- fixing productId parameter ([45a1d8c](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/45a1d8c277d6e43f698f90b32f53a87ade1b234d))
+- fixing test ([6309da8](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/6309da8a97cce96543488f8689f1851677bf6a0d))
+- fixing toast type ([71a23e8](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/71a23e8c1d1bfd48d2581d0425a525fb57fe7e38))
+- integrate ChatFileUploaderWrapper with ChatFilePreview ([1b8cf1a](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/1b8cf1a5492b7b57f7303ec4172cc555c6f7fbbc))
+- linking the ChatFileUploaderWrapper display to the showFileUpload parameter ([7826d85](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/7826d8590d304dc30c016ef4e0849ba74e8a6160))
+- preview file on chat history ([aa09c31](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/aa09c317b2299cd9ced9cbe65822838778aabdae))
+- refactoring ([890838b](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/890838b2f79b31797fa593eb5f2218b0d8c5115c))
+- refactoring ([665ff74](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/665ff741df81e2b4dcecedbddc0e0912dac40f89))
+- removing temporary component ([e4bfbf0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/e4bfbf08b44a20d744b7f0e7c0ab18e2ff5b2519))
+- removing tests ([fa4b836](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/fa4b83631f0aa7542e12f39cbe06c17007a6cc18))
+- removing tooltip ([8e4450e](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/8e4450e87d89cca21855e3270e046817187defda))
+- sending file data to conversation api ([40fe90e](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/40fe90edc4c5f67cd3f527cc33738e1dea0839bc))
+- tooltip refactoring ([df0a66a](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/df0a66ac6d469aea33dbede90fbccce24f6e631a))
+- typing fix ([4ab00a0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/4ab00a082dbb29d5d848350231f38f79d44d1684))
+- undoing tooltip refactoring ([26c1072](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/26c10722dab2d5669ff972cfbe1aefaeb05b8850))
+- update file size ([bf92561](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/bf92561945896a01dc5032e1b9c2dbcc78110d7d))
+- wip ([3160ab4](https://github.com/Hotmart-Org/app-tutor-ai-consumer/commit/3160ab4c6d2ea5417213fbbe8ce031b97de853c4))
+
 # [1.38.0](https://github.com/Hotmart-Org/app-tutor-ai-consumer/compare/v1.37.0...v1.38.0) (2025-11-10)
 
 ### Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "app-tutor-ai-consumer",
-  "version": "1.38.0",
+  "version": "1.39.0",
   "main": "index.js",
   "scripts": {
     "dev": "rspack serve --env=development --config config/rspack/rspack.config.js",

package/src/config/styles/global.css

@@ -88,6 +88,9 @@
   --hc-size-spacing-1: 0.25rem;
   --hc-size-spacing-2: 0.5rem;
   --hc-size-border-medium: 0.5rem;
+
+  /* Tooltip */
+  --tooltip-bg-color: #191c1f;
 }
 
 #hotmart-app-tutor-ai-consumer-root {

package/src/config/tests/handlers.ts

@@ -1,8 +1,8 @@
 import { http, HttpResponse } from 'msw'
 
 import { MessagesEndpoints, MSG_MAX_COUNT } from '@/src/modules/messages'
+import SignedFilesUrlsResponseBuilder from '@/src/modules/messages/__tests__/files-signed-urls.builder'
 import IMessageWithSenderDataMock from '@/src/modules/messages/__tests__/imessage-with-sender-data.mock'
-import SignedUrlsResponseBuilder from '@/src/modules/messages/__tests__/signed-urls.builder'
 import { ProfileEndpoints } from '@/src/modules/profile'
 import ProfileAPIPropsBuilder from '@/src/modules/profile/__tests__/profile-api-props.builder'
 
@@ -19,8 +19,8 @@ export const handlers = [
   http.all(ProfileEndpoints.getProfile(), () => {
     return HttpResponse.json(new ProfileAPIPropsBuilder())
   }),
-  http.all(MessagesEndpoints.getSignedUrls(), () => {
-    return HttpResponse.json(new SignedUrlsResponseBuilder())
+  http.all(MessagesEndpoints.getFilesSignedUrls(), () => {
+    return HttpResponse.json(new SignedFilesUrlsResponseBuilder())
   }),
   http.all(MessagesEndpoints.getAll(':conversationId'), ({ request }) => {
     const limit = Number(new URL(request.url)?.searchParams?.get?.('limit'))

package/src/modules/messages/__tests__/{signed-urls.builder.ts → files-signed-urls.builder.ts}

@@ -1,7 +1,7 @@
 import { chance } from '@/src/config/tests'
-import type { IGetSignedUrlsResponse } from '../types'
+import type { IGetFilesSignedUrlsResponse } from '../types'
 
-class SignedUrlsResponseBuilder implements IGetSignedUrlsResponse {
+class FilesSignedUrlsResponseBuilder implements IGetFilesSignedUrlsResponse {
   uploadUrl: string
   futureDownloadUrl: string
   imagePreviewUrl: string
@@ -39,4 +39,4 @@ class SignedUrlsResponseBuilder implements IGetSignedUrlsResponse {
   }
 }
 
-export default SignedUrlsResponseBuilder
+export default FilesSignedUrlsResponseBuilder

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

@@ -34,7 +34,6 @@ function ChatFilePreview({
     <DocumentPreview
       name={name}
       size={size}
-      type={type}
       isLoading={isLoading}
       showCloseButton={showCloseButton}
       onClose={onClose}

package/src/modules/messages/components/chat-file-preview/components/document-preview/document-preview.tsx

@@ -5,7 +5,7 @@ import { Icon, Spinner } from '@/src/lib/components'
 import { useMediaQuery } from '@/src/lib/hooks'
 import { useWidgetSettingsAtom } from '@/src/modules/widget/store'
 import { CHAT_FILE_PREVIEW_CONFIG } from '../../constants'
-import { formatFileSize } from '../../utils'
+import { formatFileSize, getFileTypeFromFileName } from '../../utils'
 import { CloseButton } from '../close-button'
 
 import type { DocumentPreviewProps } from './types'
@@ -13,7 +13,6 @@ import type { DocumentPreviewProps } from './types'
 export default function DocumentPreview({
   name,
   size,
-  type,
   isLoading,
   showCloseButton,
   onClose
@@ -23,7 +22,9 @@ export default function DocumentPreview({
   const isMobile = useMediaQuery({ maxSize: 'md' })
   const formattedSize = formatFileSize(size)
   const isDarkMode = settings?.config?.theme === 'dark'
-  const config = CHAT_FILE_PREVIEW_CONFIG[type]
+
+  const fileType = getFileTypeFromFileName(name)
+  const config = CHAT_FILE_PREVIEW_CONFIG[fileType]
 
   return (
     <div

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

@@ -1,9 +1,6 @@
-import type { FilePreviewProps } from '../../types'
-
 export type DocumentPreviewProps = {
   name: string
   size: number
-  type: Exclude<FilePreviewProps['type'], 'image'>
   isLoading: boolean
   showCloseButton: boolean
   onClose?: () => void

package/src/modules/messages/components/chat-file-preview/utils.ts

@@ -1,4 +1,7 @@
+import { FILE_TYPES } from '../../hooks/use-chat-file-upload/constants'
+
 import { FILE_SIZE_UNITS } from './constants'
+import type { FilePreviewProps } from './types'
 
 export function formatFileSize(size: number): string {
   if (size < FILE_SIZE_UNITS.KB) {
@@ -11,3 +14,17 @@ export function formatFileSize(size: number): string {
 
   return `${Math.round((size / FILE_SIZE_UNITS.MB) * 10) / 10}MB`
 }
+
+export function getFileTypeFromFileName(
+  fileName: string
+): Exclude<FilePreviewProps['type'], 'image'> {
+  const extension = `.${fileName.split('.').pop()?.toLowerCase() || ''}`
+
+  for (const [category, extensions] of Object.entries(FILE_TYPES)) {
+    if (category !== 'image' && (extensions as readonly string[]).includes(extension)) {
+      return category as Exclude<FilePreviewProps['type'], 'image'>
+    }
+  }
+
+  return 'document'
+}

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

@@ -1,18 +1,15 @@
-import type { ChatFileUploaderProps } from './types'
+import type { ChatFileUploaderProps } from './chat-file-uploader'
 
 export class ChatFileUploaderBuilder {
-  private props: ChatFileUploaderProps = {}
+  private props: ChatFileUploaderProps = {
+    onUploadFile: () => {}
+  }
 
   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

@@ -24,26 +24,6 @@ describe('ChatFileUploader', () => {
     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()
 

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.tsx

@@ -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,6 +132,7 @@ function useSendTextMessage() {
     },
     onSuccess(data) {
       setMessagesCache({ queryKey: messagesQueryConfig.queryKey, queryClient, data })()
+      setAttachedFileAtom(null)
     },
     onSettled(data, error) {
       DataHubService.sendEvent({

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

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

@@ -1,12 +1,14 @@
-import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { Fragment, useCallback, useEffect, useMemo, useRef } from 'react'
 import { useInfiniteQuery } from '@tanstack/react-query'
 
 import { useMediaQuery } from '@/src/lib/hooks'
 import { isTextEmpty } from '@/src/lib/utils/is-text-empty'
 import { ChatInput, MessagesList, useChatInputValueAtom } from '@/src/modules/messages/components'
+import { ChatFileUploaderWrapper } from '@/src/modules/messages/components/chat-file-uploader-wrapper'
 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 { useAttachedFileAtom } from '@/src/modules/messages/store/attached-file.atom'
 import { useGetProfile } from '@/src/modules/profile'
 import { TutorWidgetEvents } from '../../events'
 import { useSendViewChatEvent } from '../../hooks'
@@ -25,6 +27,7 @@ function ChatPage() {
   const chatInputRef = useRef<HTMLTextAreaElement>(null)
   const scrollerRef = useRef<HTMLDivElement>(null)
   const settings = useWidgetSettingsAtomValue()
+  const [attachedFileAtom] = useAttachedFileAtom()
   const profileQuery = useGetProfile()
   const widgetTabs = useWidgetTabsValueAtom()
   const sendTextMessageMutation = useSendTextMessage()
@@ -101,18 +104,29 @@ function ChatPage() {
     }
   }, [messagesQuery.isError, setWidgetLoading])
 
+  const ChatInputWrapper = settings?.config?.metadata?.showFileUpload
+    ? ChatFileUploaderWrapper
+    : Fragment
+
   return (
     <PageLayout
       asideChild={
         <>
-          <ChatInput
-            name='new-chat-msg-input'
-            ref={chatInputRef}
-            onSend={widgetTabs.currentTab === 'chat' ? handleSendMessage : undefined}
-            loading={sendTextMessageMutation.isPending}
-            inputDisabled={messagesQuery?.isLoading}
-            buttonDisabled={widgetLoading || messagesQuery?.isLoading || !value.trim()}
-          />
+          <ChatInputWrapper>
+            <ChatInput
+              name='new-chat-msg-input'
+              ref={chatInputRef}
+              onSend={widgetTabs.currentTab === 'chat' ? handleSendMessage : undefined}
+              loading={sendTextMessageMutation.isPending}
+              inputDisabled={messagesQuery?.isLoading}
+              buttonDisabled={
+                widgetLoading ||
+                messagesQuery?.isLoading ||
+                !value.trim() ||
+                (Boolean(attachedFileAtom) && !attachedFileAtom?.downloadUrl)
+              }
+            />
+          </ChatInputWrapper>
 
           <div className='mx-auto w-fit'>
             <AIDisclaimer />

package/src/lib/hooks/use-chat-file-upload/types.ts

@@ -1,14 +0,0 @@
-export type FileType = 'document' | 'image'
-
-export type SelectedFile = {
-  file: File
-  type: FileType
-  name: string
-  size: number
-  previewUrl?: string
-}
-
-export type UseFileUploadReturn = {
-  selectedFile: SelectedFile | null
-  handleSelectFile: (file: File, type: FileType) => void
-}

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

@@ -1,59 +0,0 @@
-import { act, renderHook } from '@/src/config/tests'
-
-import { useChatFileUpload } from './use-chat-file-upload'
-
-describe('useChatFileUpload', () => {
-  beforeEach(() => {
-    global.URL.createObjectURL = vi.fn(() => 'blob:mock-url')
-  })
-
-  afterEach(() => {
-    vi.clearAllMocks()
-  })
-
-  it('should initialize with default values', () => {
-    const { result } = renderHook(() => useChatFileUpload())
-
-    expect(result.current.selectedFile).toBeNull()
-  })
-
-  describe('when selecting a document file', () => {
-    it('should store the file with correct properties', () => {
-      const { result } = renderHook(() => useChatFileUpload())
-
-      const mockFile = new File(['content'], 'document.pdf', { type: 'application/pdf' })
-
-      act(() => {
-        result.current.handleSelectFile(mockFile, 'document')
-      })
-
-      expect(result.current.selectedFile).toEqual({
-        file: mockFile,
-        type: 'document',
-        name: 'document.pdf',
-        size: mockFile.size
-      })
-    })
-  })
-
-  describe('when selecting an image file', () => {
-    it('should create a preview URL', () => {
-      const { result } = renderHook(() => useChatFileUpload())
-
-      const mockImage = new File(['image'], 'photo.jpg', { type: 'image/jpeg' })
-
-      act(() => {
-        result.current.handleSelectFile(mockImage, 'image')
-      })
-
-      expect(result.current.selectedFile).toEqual({
-        file: mockImage,
-        type: 'image',
-        name: 'photo.jpg',
-        size: mockImage.size,
-        previewUrl: 'blob:mock-url'
-      })
-      expect(global.URL.createObjectURL).toHaveBeenCalledWith(mockImage)
-    })
-  })
-})

package/src/lib/hooks/use-chat-file-upload/use-chat-file-upload.ts

@@ -1,28 +0,0 @@
-import { useState } from 'react'
-
-import { FILE_TYPES_KEYS } from './constants'
-import type { FileType, SelectedFile, UseFileUploadReturn } from './types'
-
-export function useChatFileUpload(): UseFileUploadReturn {
-  const [selectedFile, setSelectedFile] = useState<SelectedFile | null>(null)
-
-  const handleSelectFile = (file: File, type: FileType) => {
-    const newFile: SelectedFile = {
-      file,
-      type,
-      name: file.name,
-      size: file.size
-    }
-
-    if (type === FILE_TYPES_KEYS.IMAGE) {
-      newFile.previewUrl = URL.createObjectURL(file)
-    }
-
-    setSelectedFile(newFile)
-  }
-
-  return {
-    selectedFile,
-    handleSelectFile
-  }
-}

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

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

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

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

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

@@ -1,38 +0,0 @@
-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
-  })
-}