agx-chat-web 0.5.8 → 0.5.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agx-chat-web",
-  "version": "0.5.8",
+  "version": "0.5.9",
   "description": "Chat application using React and less",
   "author": {
     "name": "Jeiel Alves",

package/src/app/Messenger/components/DocMessage/DocMessage.tsx

@@ -3,18 +3,19 @@ import DownloadMinimalistIcon from '../../icons/DownloadMinimalistIcon'
 import { IMessagesBalloon } from 'types'
 import RenderFileIcon from '../RenderFileIcon/RenderFileIcon'
 
+export function formatFileSize(size: number = 0) {
+  if (size % 1 === 0) {
+    return `${size.toFixed(0)} MB`
+  }
+  return `${size.toFixed(2)} MB`
+}
+
 function DocMessage({ file }: IMessagesBalloon) {
   const fileType = file?.location?.split('.').pop()?.toUpperCase()
   const fileName = file && file.originalname
   const filePages = file && file.pages
   const fileSize = file && formatFileSize(file?.size)
 
-  function formatFileSize(size: number = 0) {
-    if (size < 1024) return `${size} B`
-    if (size < 1024 * 1024) return `${(size / 1024).toFixed(0)} KB`
-    if (size < 1024 * 1024 * 1024) return `${(size / (1024 * 1024)).toFixed(0)} MB`
-    return 'Tamanho não suportado'
-  }
 
   return (
     <div className="messenger__messages-row--sender">

package/src/app/Messenger/components/InputFile/InputFile.tsx

@@ -7,9 +7,11 @@ interface IProps {
   onUpdateFile: (files: File) => void
   label: string
   onRemoveFile: (files: File) => void
+  maxSize: string
+  loading: boolean
 }
 
-function InputFile({ fileList, onUpdateFile, label, onRemoveFile }: IProps) {
+function InputFile({ fileList, onUpdateFile, label, onRemoveFile, maxSize, loading }: IProps) {
   const { theme } = useTheme()
 
   const validateFileType = useMemo(
@@ -85,7 +87,7 @@ function InputFile({ fileList, onUpdateFile, label, onRemoveFile }: IProps) {
             Escolher arquivo
           </button>
 
-          <p>Só são aceitos arquivos no formato .png, .jpg, .pdf, .doc ou .docx (Tamanho máximo: 3mb)</p>
+          {loading ? '' : <p>Só são aceitos arquivos no formato .png, .jpg, .pdf, .doc ou .docx (Tamanho máximo: {maxSize})</p>}
         </div>
       </div>
 

package/src/app/Messenger/components/SendMessageForm/SendMessageForm.tsx

@@ -13,9 +13,10 @@ interface IProps {
   file?: File | null
   updateFile: (file: File | null) => void
   isLoading?: boolean
+  maxFileSize: string
 }
 
-function AllowDocuments ({ allowImages, attachFile, handleFile, closedChat }: { allowImages: boolean, attachFile: MutableRefObject<HTMLInputElement | null>, handleFile: (e: React.ChangeEvent<HTMLInputElement>) => void, closedChat: boolean }) {
+function AllowDocuments ({ allowImages, attachFile, handleFile, closedChat, maxFileField }: { allowImages: boolean, attachFile: MutableRefObject<HTMLInputElement | null>, handleFile: (e: React.ChangeEvent<HTMLInputElement>) => void, closedChat: boolean, maxFileField: string }) {
   if (allowImages) {
     return (
       <Fragment>
@@ -28,7 +29,7 @@ function AllowDocuments ({ allowImages, attachFile, handleFile, closedChat }: {
           accept=".jpg, .jpeg, .png, .pdf, .doc, .docx"
         />
 
-        <ToolTip text="Tamanho máximo: 3mb">
+        <ToolTip text={`Tamanho máximo: ${maxFileField}`}>
           <AttachFileIcon
             className={`messenger__messages-send__attach ${closedChat ? 'messenger__messages-send__attach--disabled' : ''}`}
             onClick={() => !closedChat ? attachFile.current?.click() : null}
@@ -41,7 +42,7 @@ function AllowDocuments ({ allowImages, attachFile, handleFile, closedChat }: {
   return <></>
 }
 
-function SendMessageForm ({ allowImages, current, onSubmit, file, updateFile, isLoading }: IProps) {
+function SendMessageForm ({ allowImages, current, onSubmit, file, updateFile, isLoading, maxFileSize }: IProps) {
   const [formHeight, setFormHeight] = useState<number>(100)
   const [sending, setSending] = useState<boolean>(false)
 
@@ -160,6 +161,7 @@ function SendMessageForm ({ allowImages, current, onSubmit, file, updateFile, is
           handleFile={handleFile}
           attachFile={attachFile}
           closedChat={closedChat}
+          maxFileField={maxFileSize}
         />
       </div>
 

package/src/app/Messenger/views/MessengerMessages.tsx

@@ -11,6 +11,7 @@ import NewChatForm from './NewFormChat'
 import EmptyIcon from '../icons/EmptyIcon'
 import SendMessageForm from '../components/SendMessageForm/SendMessageForm'
 import InfiniteScroll from '../components/InfiniteScroll/InfiniteScroll'
+import { formatFileSize } from '../components/DocMessage/DocMessage'
 
 interface IScrollableContainer {
   loading: boolean
@@ -36,6 +37,7 @@ interface IMessengerMessages extends ICommonProps, IScrollableContainer {
   products: Array<IOption>
   submitNewChat: (values: FormData) => void,
   newChatLoading: boolean
+  maxFileSize: () => Promise<any>
 }
 
 interface IMessengerForm {
@@ -45,7 +47,9 @@ interface IMessengerForm {
   products: Array<IOption>
   submitNewChat: (values: FormData) => void,
   cancelNewChat: () => void,
-  newChatLoading: boolean
+  newChatLoading: boolean,
+  maxFileSize: string
+  loadingResources: boolean
 }
 
 function MessagesContainerView ({ 
@@ -55,7 +59,9 @@ function MessagesContainerView ({
   cancelNewChat,
   reasons,
   products,
-  newChatLoading
+  newChatLoading,
+  maxFileSize,
+  loadingResources
 }: IMessengerForm) {
   const { theme } = useTheme()
 
@@ -79,6 +85,8 @@ function MessagesContainerView ({
         submitNewChat={submitNewChat}
         cancelNewChat={cancelNewChat}
         loading={newChatLoading}
+        maxFileSize={maxFileSize}
+        loadingResources={loadingResources}
       />
     )
   }
@@ -259,12 +267,13 @@ function MessengerMessages ({
   formatDate,
   hasNext,
   onIntersect,
-  newChatLoading
+  newChatLoading,
+  maxFileSize
 }: IMessengerMessages) {
   const [file, setFile] = useState<File | null>()
   const scrollContainerRef = useRef<HTMLDivElement | null>(null)
   const [isSending, setIsSending] = useState(false)
-  
+  const [maxSize, setMaxSize] = useState<string>('')
 
   const { theme } = useTheme()
 
@@ -286,6 +295,22 @@ function MessengerMessages ({
     }
   }
 
+  useEffect(() => {
+    const fetchMaxFileSize = async () => {
+      try {
+        const response = await maxFileSize()
+        const size = formatFileSize(response.data.data.maxFileSize)
+        setMaxSize(size)
+      } catch (error) {
+        console.error("Erro ao buscar o tamanho máximo do arquivo:", error)
+      }
+    }
+  
+    fetchMaxFileSize()
+  }, [maxSize])
+  
+  
+
   return (
     <div className={`messenger__messages ${className} ${styleClassnames.mobile} `}>
       <MessagesContainerView
@@ -295,6 +320,8 @@ function MessengerMessages ({
         submitNewChat={submitNewChat}
         cancelNewChat={cancelNewChat}
         messegerView={messegerView}
+        maxFileSize={maxSize}
+        loadingResources={loading}
       >
         {file ? (
           <ImagesContainer 
@@ -349,6 +376,7 @@ function MessengerMessages ({
             updateFile={updateFile} 
             current={current}
             isLoading={isSending}
+            maxFileSize={maxSize}
           />
         </div>
       </MessagesContainerView>

package/src/app/Messenger/views/NewFormChat.tsx

@@ -14,9 +14,11 @@ interface IProps {
   reasons: Array<IOption>
   products: Array<IOption>
   loading: boolean
+  maxFileSize: string
+  loadingResources: boolean
 }
 
-function NewChatForm ({ submitNewChat, cancelNewChat, reasons, products, loading }: IProps) {
+function NewChatForm ({ submitNewChat, cancelNewChat, reasons, products, loading, maxFileSize, loadingResources }: IProps) {
   const [reason, setReason] = useState<string>(reasons?.[0]?.value)
   const [product, setProduct] = useState<string>(products?.[0]?.value)
   const [message, setMessage] = useState<string>()
@@ -57,7 +59,7 @@ function NewChatForm ({ submitNewChat, cancelNewChat, reasons, products, loading
     >
       <div className="messenger__new-chat-form-header">
         <h2 className="messenger__new-chat-form-title">
-          <b style={{ color: theme.newChatFormTexts }}>Novo Chamado</b>
+          <b style={{ color: theme.newChatFormTexts }} >Novo Chamado</b>
         </h2>
 
         <button onClick={cancelNewChat} className="messenger__new-chat-form-close">
@@ -103,6 +105,8 @@ function NewChatForm ({ submitNewChat, cancelNewChat, reasons, products, loading
           onUpdateFile={onUpdateFile}
           onRemoveFile={onRemoveFile}
           label='Documento (opcional)'
+          maxSize={maxFileSize}
+          loading={loadingResources}
         />
 
         <Textarea