agx-chat-web 1.1.0 → 1.2.1

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

@@ -1,234 +1,254 @@
-import useTheme from '../../hooks/useThemes'
-import React, {
-  Fragment,
-  MutableRefObject,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-import { IList } from 'types'
-import AttachFileIcon from '../../../Messenger/icons/AttachFileIcon'
-import rightArrow from '../../../../assets/right-arrow.svg'
-import { SpinLoading } from '../../views/MessengerMessages'
-import ToolTip from '../Tooltip/Tooltip'
-import { useTranslation } from 'react-i18next'
-
-interface IProps {
-  allowImages: boolean
-  current?: IList
-  onSubmit: (value: FormData, callback: () => void) => void
-  file?: File | null
-  updateFile: (file: File | null) => void
-  isLoading?: boolean
-  maxFileSize: string
-}
-
-function AllowDocuments ({
-  allowImages,
-  attachFile,
-  handleFile,
-  closedChat,
-  maxFileField,
-}: {
-  allowImages: boolean
-  attachFile: MutableRefObject<HTMLInputElement | null>
-  handleFile: (e: React.ChangeEvent<HTMLInputElement>) => void
-  closedChat: boolean
-  maxFileField: string
-}) {
-  const { t } = useTranslation('messengerMessages')
-
-  if (allowImages) {
-    return (
-      <Fragment>
-        <input
-          type='file'
-          size={1}
-          className='messenger__messages-send--file'
-          ref={attachFile}
-          onChange={handleFile}
-          accept='.jpg, .jpeg, .png, .pdf, .doc, .docx'
-        />
-
-        <ToolTip text={t('sendMessageForm.maxFileField', { maxFileField })}>
-          <AttachFileIcon
-            className={`messenger__messages-send__attach ${closedChat ? 'messenger__messages-send__attach--disabled' : ''}`}
-            onClick={() => (!closedChat ? attachFile.current?.click() : null)}
-          />
-        </ToolTip>
-      </Fragment>
-    )
-  }
-
-  return <></>
-}
-
-function SendMessageForm ({
-  allowImages,
-  current,
-  onSubmit,
-  file,
-  updateFile,
-  isLoading,
-  maxFileSize,
-}: IProps) {
-  const { t } = useTranslation('messengerMessages')
-  const [formHeight, setFormHeight] = useState<number>(100)
-  const [sending, setSending] = useState<boolean>(false)
-
-  const inputRef: MutableRefObject<HTMLTextAreaElement | null> = useRef(null)
-  const attachFile: MutableRefObject<HTMLInputElement | null> = useRef(null)
-
-  const closedChat = useMemo(
-    () => current?.status.current.state === 'final',
-    [current]
-  )
-
-  const { theme } = useTheme()
-
-  function correctTextAreaHeight (styleConfig: {
-    height: number
-    overflow: string
-  }) {
-    const textarea = inputRef.current
-    if (textarea) {
-      textarea.style.height = `${styleConfig.height}px`
-      textarea.style.overflowY = styleConfig.overflow
-    }
-  }
-
-  function resetHeights () {
-    const inicialFormHeight = 100
-    const inicialTextAreaHeight = 50
-    setFormHeight(inicialFormHeight)
-    correctTextAreaHeight({ height: inicialTextAreaHeight, overflow: 'hidden' })
-  }
-
-  function adjustFormHeight (textareaRef: typeof inputRef.current) {
-    if (textareaRef) {
-      const initialHeight = 50
-      const maxHeight = 80
-      const newHeight = textareaRef.scrollHeight
-
-      if (newHeight > maxHeight) {
-        correctTextAreaHeight({
-          height: maxHeight,
-          overflow: 'auto',
-        })
-        return maxHeight + initialHeight
-      }
-
-      correctTextAreaHeight({
-        height: initialHeight,
-        overflow: 'auto',
-      })
-      return initialHeight * 2
-    }
-
-    return formHeight
-  }
-
-  function handleTextareaChange () {
-    const textarea = inputRef.current
-    setFormHeight(adjustFormHeight(textarea))
-  }
-
-  function handleSubmit (e?: React.FormEvent<HTMLFormElement>) {
-    e?.preventDefault()
-    if (sending) return
-    setSending(true)
-
-    const data = new FormData()
-    if (file) data.append('file', file)
-    if (inputRef.current?.value) data.append('message', inputRef.current?.value)
-
-    onSubmit(data, () => {
-      if (inputRef.current) inputRef.current.value = ''
-      if (file) updateFile(null)
-      setSending(false)
-      resetHeights()
-    })
-  }
-
-  function handleFile (e: React.ChangeEvent<HTMLInputElement>) {
-    if (e.target.files) {
-      const file = e.target.files[0]
-      if (
-        file?.type?.includes('image/') ||
-        file?.type?.includes('application/') ||
-        file?.type === 'application/msword' ||
-        file?.type ===
-          'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
-      ) {
-        updateFile(e.target.files[0])
-      }
-    }
-  }
-
-  return (
-    <form
-      onSubmit={handleSubmit}
-      className='messenger__messages-send--form'
-      style={{
-        height: `${formHeight}px`,
-        maxHeight: '150px',
-      }}
-    >
-      <div className='messenger__messages-send__input-container'>
-        <textarea
-          onChange={handleTextareaChange}
-          placeholder={
-            closedChat
-              ? t('sendMessageForm.chatEnded')
-              : t('sendMessageForm.typeMessage')
-          }
-          ref={inputRef}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter' && !e.shiftKey) {
-              e.preventDefault()
-              handleSubmit()
-            }
-          }}
-          className={`messenger__messages-send__input ${closedChat || sending ? 'messenger__messages-send__input--disabled' : ''} `}
-          disabled={closedChat || sending}
-          style={{
-            backgroundColor: theme?.inputBg,
-          }}
-        />
-
-        <AllowDocuments
-          allowImages={allowImages}
-          handleFile={handleFile}
-          attachFile={attachFile}
-          closedChat={closedChat}
-          maxFileField={maxFileSize}
-        />
-      </div>
-
-      {isLoading ? (
-        <div className='messenger__messages-sending'>
-          <SpinLoading />
-        </div>
-      ) : (
-        <button
-          type='submit'
-          className={`messenger__messages-send__button ${closedChat || sending ? 'messenger__messages-send__button--disabled' : ''}`}
-          disabled={closedChat || sending}
-          style={{
-            backgroundColor: theme?.buttonPrimary,
-          }}
-        >
-          <img
-            alt={t('sendMessageForm.rightIcon')}
-            height={25}
-            width={25}
-            className='ml-1'
-            src={rightArrow}
-          />
-        </button>
-      )}
-    </form>
-  )
-}
-
-export default SendMessageForm
+import useTheme from '../../hooks/useThemes'
+import React, {
+  Fragment,
+  MutableRefObject,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { IList } from 'types'
+import AttachFileIcon from '../../../Messenger/icons/AttachFileIcon'
+import rightArrow from '../../../../assets/right-arrow.svg'
+import { SpinLoading } from '../../views/MessengerMessages'
+import ToolTip from '../Tooltip/Tooltip'
+import { useTranslation } from 'react-i18next'
+
+interface IProps {
+  allowImages: boolean
+  current?: IList
+  onSubmit: (value: FormData, callback: () => void) => void
+  file?: File | null
+  updateFile: (file: File | null) => void
+  isLoading?: boolean
+  maxFileSize: string
+}
+
+function AllowDocuments ({
+  allowImages,
+  attachFile,
+  handleFile,
+  closedChat,
+  maxFileField,
+}: {
+  allowImages: boolean
+  attachFile: MutableRefObject<HTMLInputElement | null>
+  handleFile: (e: React.ChangeEvent<HTMLInputElement>) => void
+  closedChat: boolean
+  maxFileField: string
+}) {
+  const { t } = useTranslation('messengerMessages')
+
+  if (allowImages) {
+    return (
+      <Fragment>
+        <input
+          type='file'
+          size={1}
+          className='messenger__messages-send--file'
+          ref={attachFile}
+          onChange={handleFile}
+          accept='.jpg, .jpeg, .png, .pdf, .doc, .docx, .mp4, .csv'
+        />
+
+        <ToolTip text={t('sendMessageForm.maxFileField', { maxFileField })}>
+          <AttachFileIcon
+            className={`messenger__messages-send__attach ${closedChat ? 'messenger__messages-send__attach--disabled' : ''}`}
+            onClick={() => (!closedChat ? attachFile.current?.click() : null)}
+          />
+        </ToolTip>
+      </Fragment>
+    )
+  }
+
+  return <></>
+}
+
+function SendMessageForm ({
+  allowImages,
+  current,
+  onSubmit,
+  file,
+  updateFile,
+  isLoading,
+  maxFileSize,
+}: IProps) {
+  const { t } = useTranslation('messengerMessages')
+  const [formHeight, setFormHeight] = useState<number>(100)
+  const [sending, setSending] = useState<boolean>(false)
+
+  const inputRef: MutableRefObject<HTMLTextAreaElement | null> = useRef(null)
+  const attachFile: MutableRefObject<HTMLInputElement | null> = useRef(null)
+
+  const closedChat = useMemo(
+    () => current?.status.current.state === 'final',
+    [current]
+  )
+
+  const { theme } = useTheme()
+
+  function correctTextAreaHeight (styleConfig: {
+    height: number
+    overflow: string
+  }) {
+    const textarea = inputRef.current
+    if (textarea) {
+      textarea.style.height = `${styleConfig.height}px`
+      textarea.style.overflowY = styleConfig.overflow
+    }
+  }
+
+  function resetHeights () {
+    const inicialFormHeight = 100
+    const inicialTextAreaHeight = 50
+    setFormHeight(inicialFormHeight)
+    correctTextAreaHeight({ height: inicialTextAreaHeight, overflow: 'hidden' })
+  }
+
+  function adjustFormHeight (textareaRef: typeof inputRef.current) {
+    if (textareaRef) {
+      const initialHeight = 50
+      const maxHeight = 80
+      const newHeight = textareaRef.scrollHeight
+
+      if (newHeight > maxHeight) {
+        correctTextAreaHeight({
+          height: maxHeight,
+          overflow: 'auto',
+        })
+        return maxHeight + initialHeight
+      }
+
+      correctTextAreaHeight({
+        height: initialHeight,
+        overflow: 'auto',
+      })
+      return initialHeight * 2
+    }
+
+    return formHeight
+  }
+
+  function handleTextareaChange () {
+    const textarea = inputRef.current
+    setFormHeight(adjustFormHeight(textarea))
+  }
+
+  function handleSubmit (e?: React.FormEvent<HTMLFormElement>) {
+    e?.preventDefault()
+    if (sending) return
+    setSending(true)
+
+    const data = new FormData()
+    if (file) data.append('file', file)
+    if (inputRef.current?.value) data.append('message', inputRef.current?.value)
+
+    onSubmit(data, () => {
+      if (inputRef.current) inputRef.current.value = ''
+      if (file) updateFile(null)
+      setSending(false)
+      resetHeights()
+    })
+  }
+
+  function handleFile (e: React.ChangeEvent<HTMLInputElement>) {
+    if (e.target.files) {
+      const file = e.target.files[0]
+      const allowedTypes = [
+        'image/png',
+        'image/jpeg',
+        'application/pdf',
+        'application/msword',
+        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+        'text/csv',
+        'video/mp4',
+      ]
+      const allowedExtensions = [
+        'png',
+        'jpeg',
+        'jpg',
+        'pdf',
+        'doc',
+        'docx',
+        'csv',
+        'mp4',
+      ]
+      const fileType = file?.type
+      const fileExtension = file?.name.split('.').pop()?.toLowerCase()
+      const isAllowed = fileType
+        ? allowedTypes.includes(fileType)
+        : fileExtension
+          ? allowedExtensions.includes(fileExtension)
+          : false
+      if (isAllowed) {
+        updateFile(file)
+      }
+    }
+  }
+
+  return (
+    <form
+      onSubmit={handleSubmit}
+      className='messenger__messages-send--form'
+      style={{
+        height: `${formHeight}px`,
+        maxHeight: '150px',
+      }}
+    >
+      <div className='messenger__messages-send__input-container'>
+        <textarea
+          onChange={handleTextareaChange}
+          placeholder={
+            closedChat
+              ? t('sendMessageForm.chatEnded')
+              : t('sendMessageForm.typeMessage')
+          }
+          ref={inputRef}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+              e.preventDefault()
+              handleSubmit()
+            }
+          }}
+          className={`messenger__messages-send__input ${closedChat || sending ? 'messenger__messages-send__input--disabled' : ''} `}
+          disabled={closedChat || sending}
+          style={{
+            backgroundColor: theme?.inputBg,
+          }}
+        />
+
+        <AllowDocuments
+          allowImages={allowImages}
+          handleFile={handleFile}
+          attachFile={attachFile}
+          closedChat={closedChat}
+          maxFileField={maxFileSize}
+        />
+      </div>
+
+      {isLoading ? (
+        <div className='messenger__messages-sending'>
+          <SpinLoading />
+        </div>
+      ) : (
+        <button
+          type='submit'
+          className={`messenger__messages-send__button ${closedChat || sending ? 'messenger__messages-send__button--disabled' : ''}`}
+          disabled={closedChat || sending}
+          style={{
+            backgroundColor: theme?.buttonPrimary,
+          }}
+        >
+          <img
+            alt={t('sendMessageForm.rightIcon')}
+            height={25}
+            width={25}
+            className='ml-1'
+            src={rightArrow}
+          />
+        </button>
+      )}
+    </form>
+  )
+}
+
+export default SendMessageForm

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

@@ -1,89 +1,91 @@
-import useTheme from '../../hooks/useThemes'
-import React, { useCallback, useState } from 'react'
-import { IMessagesBalloon } from 'types'
-import ReadIcon from '../../icons/ReadIcon'
-import ReactSimpleImageViewer from 'react-simple-image-viewer'
-import { MessageImage } from '../IncomingMessage/IncomingMessage'
-import DocMessage from '../DocMessage/DocMessage'
-
-function SenderMessages ({
-  date,
-  message,
-  read,
-  hasFile,
-  file,
-  formatDate,
-  id,
-}: IMessagesBalloon) {
-  const [currentImage, setCurrentImage] = useState(0)
-  const [isViewerOpen, setIsViewerOpen] = useState(false)
-  const { theme } = useTheme()
-
-  const openImageViewer = useCallback((index: number) => {
-    setCurrentImage(index)
-    setIsViewerOpen(true)
-  }, [])
-
-  const closeImageViewer = () => {
-    setCurrentImage(0)
-    setIsViewerOpen(false)
-  }
-
-  const isDoc =
-    file?.mimetype === 'application/msword' ||
-    file?.mimetype ===
-      'application/vnd.openxmlformats-officedocument.wordprocessingml.document' ||
-    file?.mimetype === 'application/pdf'
-
-  return (
-    <div className='messenger__messages-row--sender'>
-      <div
-        className='messenger__messages-sender'
-        id={id}
-        style={{
-          background: theme?.messengerSenderColor,
-          color: theme?.documentMessagesTextColor,
-        }}
-      >
-        <span>
-          {hasFile &&
-            (isDoc ? (
-              <DocMessage
-                date={date}
-                message={message}
-                read={read}
-                file={file}
-                formatDate={formatDate}
-                id={id}
-              />
-            ) : (
-              <MessageImage
-                src={file?.location}
-                onClick={() => openImageViewer(currentImage)}
-              />
-            ))}
-
-          <p className='messenger__message'>{message}</p>
-          <div className='messenger__message--bottom'>
-            <p className='messenger__message--date'>
-              {formatDate(date) ?? new Date(date).toString()}
-            </p>
-            <ReadIcon fill={read ? '#00efff' : 'white'} />
-          </div>
-        </span>
-      </div>
-
-      {file && !isDoc && isViewerOpen && (
-        <ReactSimpleImageViewer
-          src={[file.location]}
-          currentIndex={0}
-          disableScroll={false}
-          closeOnClickOutside={true}
-          onClose={closeImageViewer}
-        />
-      )}
-    </div>
-  )
-}
-
-export default SenderMessages
+import useTheme from '../../hooks/useThemes'
+import React, { useCallback, useState } from 'react'
+import { IMessagesBalloon } from 'types'
+import ReadIcon from '../../icons/ReadIcon'
+import ReactSimpleImageViewer from 'react-simple-image-viewer'
+import { MessageImage } from '../IncomingMessage/IncomingMessage'
+import DocMessage from '../DocMessage/DocMessage'
+
+function SenderMessages ({
+  date,
+  message,
+  read,
+  hasFile,
+  file,
+  formatDate,
+  id,
+}: IMessagesBalloon) {
+  const [currentImage, setCurrentImage] = useState(0)
+  const [isViewerOpen, setIsViewerOpen] = useState(false)
+  const { theme } = useTheme()
+
+  const openImageViewer = useCallback((index: number) => {
+    setCurrentImage(index)
+    setIsViewerOpen(true)
+  }, [])
+
+  const closeImageViewer = () => {
+    setCurrentImage(0)
+    setIsViewerOpen(false)
+  }
+
+  const isDoc = [
+    'application/msword',
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    'application/pdf',
+    'text/csv',
+    'video/mp4',
+  ].includes(file?.mimetype ?? '')
+
+  return (
+    <div className='messenger__messages-row--sender'>
+      <div
+        className='messenger__messages-sender'
+        id={id}
+        style={{
+          background: theme?.messengerSenderColor,
+          color: theme?.documentMessagesTextColor,
+        }}
+      >
+        <span>
+          {hasFile &&
+            (isDoc ? (
+              <DocMessage
+                date={date}
+                message={message}
+                read={read}
+                file={file}
+                formatDate={formatDate}
+                id={id}
+              />
+            ) : (
+              <MessageImage
+                src={file?.location}
+                onClick={() => openImageViewer(currentImage)}
+              />
+            ))}
+
+          <p className='messenger__message'>{message}</p>
+          <div className='messenger__message--bottom'>
+            <p className='messenger__message--date'>
+              {formatDate(date) ?? new Date(date).toString()}
+            </p>
+            <ReadIcon fill={read ? '#00efff' : 'white'} />
+          </div>
+        </span>
+      </div>
+
+      {file && !isDoc && isViewerOpen && (
+        <ReactSimpleImageViewer
+          src={[file.location]}
+          currentIndex={0}
+          disableScroll={false}
+          closeOnClickOutside={true}
+          onClose={closeImageViewer}
+        />
+      )}
+    </div>
+  )
+}
+
+export default SenderMessages