agx-chat-web 1.2.1 → 1.2.3

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

@@ -1,40 +0,0 @@
-import React from 'react'
-import FileDoc from '../../icons/DOCFileIcon'
-import FilePdf from '../../icons/PDFFileIcon'
-import CSVFileIcon from '../../icons/CSVFileIcon'
-import MP4FileIcon from '../../icons/MP4FileIcon'
-import { useTranslation } from 'react-i18next'
-
-const RenderFileIcon = ({
-  fileType,
-  b64,
-}: {
-  fileType?: string
-  b64?: string
-}) => {
-  const { t } = useTranslation('messengerMessages')
-
-  if (fileType === 'application/pdf') {
-    return <FilePdf width='40' height='40' />
-  } else if (
-    fileType === 'application/msword' ||
-    fileType ===
-      'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
-  ) {
-    return <FileDoc width='40' height='40' />
-  } else if (fileType === 'text/csv') {
-    return <CSVFileIcon width='40' height='40' />
-  } else if (fileType === 'video/mp4') {
-    return <MP4FileIcon width='40' height='40' />
-  } else {
-    return (
-      <img
-        alt={t('renderFileIcon.altImage')}
-        src={b64}
-        className='images-container__image'
-      />
-    )
-  }
-}
-
-export default RenderFileIcon

package/src/app/Messenger/components/SearchInput/SearchInput.less

@@ -1,45 +0,0 @@
-.input-search {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  margin: 1rem 0;
-  position: relative;
-
-  &__select {
-    border-radius: 30px 0 0 30px;
-    padding: 10px;
-    background: transparent;
-    margin-left: 1rem;
-    width: 30%;
-  }
-
-  &__option {
-    color: black;
-  }
-
-  &__search {
-    width: 70%;
-    margin-right: 1rem;
-    border-radius: 0 30px 30px 0;
-    padding: 9px;
-    color: var(--secondary-color);
-    border: var(--secondary-color) 1px solid;
-    background: transparent;
-    position: relative;
-
-    &::placeholder {
-      color: var(--secondary-color);
-      opacity: 60%;
-    }
-  }
-
-  &__icon {
-    border: none;
-    background: transparent;
-    position: absolute;
-    right: 2rem;
-    display: flex;
-    cursor: pointer;
-  }
-}

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

@@ -1,77 +0,0 @@
-import SearchIcon from '../../icons/SearchIcon'
-import React, { useState } from 'react'
-import useTheme from '../../hooks/useThemes'
-import { useTranslation } from 'react-i18next'
-
-interface IProps {
-  searchChat: (value: string, key: string) => void
-  searchKeys: { label: string; value: string }[]
-  loadingSearch: boolean
-}
-
-function SearchInput ({ searchChat, searchKeys, loadingSearch }: IProps) {
-  const { t } = useTranslation('messengerList')
-  const [searchKey, setSearchKey] = useState<string>(searchKeys[0].value)
-  const [searchValue, setSearchValue] = useState<string>('')
-  const { theme } = useTheme()
-
-  const onSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchValue(event.target.value)
-  }
-
-  const handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter') {
-      searchChat(searchValue, searchKey)
-    }
-  }
-
-  return (
-    <div className='input-search'>
-      <select
-        className='input-search__select'
-        onChange={(e) => setSearchKey(e.target.value)}
-        style={{
-          color: theme.asideFontColor,
-          border: `${theme.asideFontColor} 1px solid`,
-        }}
-      >
-        {searchKeys.map((item, index) => (
-          <option
-            className='input-search__option'
-            key={index}
-            value={item.value}
-          >
-            {item.label}
-          </option>
-        ))}
-      </select>
-
-      <input
-        className='input-search__search'
-        placeholder={t('searchInput.placeholder')}
-        onChange={onSearch}
-        onKeyDown={handleKeyPress}
-        style={{
-          color: theme.asideFontColor,
-          border: `${theme.asideFontColor} 1px solid`,
-          borderLeft: 0,
-        }}
-      />
-
-      <button
-        className='input-search__icon'
-        onClick={() => searchChat(searchValue, searchKey)}
-      >
-        {loadingSearch ? (
-          <div className='messenger__messages-loading'>
-            <div className='messenger__messages-loading--loader' />
-          </div>
-        ) : (
-          <SearchIcon />
-        )}
-      </button>
-    </div>
-  )
-}
-
-export default SearchInput

package/src/app/Messenger/components/Select/Select.less

@@ -1,22 +0,0 @@
-.form-select {
-  margin-bottom: 1rem;
-  width: 100%;
-
-  &__label {
-    color: @title-form-color;
-    font-weight: bold;
-    margin: 0.5rem;
-  }
-
-  &__input {
-    border: 1.5px solid hsl(0, 0%, 80%);
-    border-radius: 4px;
-    margin-top: 0.5rem;
-    padding: 8px 8px;
-    width: 100%;
-
-    &:focus {
-      outline: #2684ff 2px solid !important;
-    }
-  }
-}

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

@@ -1,56 +0,0 @@
-import React from 'react'
-import useTheme from '../../hooks/useThemes'
-interface IProps {
-  options: {
-    label: string
-    value: string
-  }[]
-  label: string
-  onChange: (value: string) => void
-  name: string
-  placeholder: string
-  value: string
-}
-
-function SelectNew ({
-  options,
-  name,
-  placeholder,
-  label,
-  onChange,
-  value,
-}: IProps) {
-  const { theme } = useTheme()
-  return (
-    <div className='form-select'>
-      <label
-        htmlFor={name}
-        className='form-select__label'
-        style={{ color: theme.newChatFormTexts }}
-      >
-        {label}
-      </label>
-      <select
-        name={name}
-        className='form-select__input'
-        onChange={(e) => onChange(e.target.value)}
-        value={value}
-        style={{
-          backgroundColor: theme.inputBg,
-          color: theme.newChatFormTexts,
-        }}
-      >
-        <option value='' disabled hidden>
-          {placeholder}
-        </option>
-        {options.map((motivo) => (
-          <option key={motivo.value} value={motivo.value}>
-            {motivo.label}
-          </option>
-        ))}
-      </select>
-    </div>
-  )
-}
-
-export default SelectNew

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

@@ -1,254 +0,0 @@
-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,91 +0,0 @@
-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

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

@@ -1,25 +0,0 @@
-import React from 'react'
-import useTheme from '../../hooks/useThemes'
-import { IInconmingMessage } from 'types'
-
-function SystemMessage ({ date, message, formatDate, id }: IInconmingMessage) {
-  const { theme } = useTheme()
-
-  return (
-    <div className='messenger__messages-row--system' id={id}>
-      <div
-        className='messenger__messages-received messenger__messages-received--system'
-        style={{ background: theme?.messengerSystemColor }}
-      >
-        <span>
-          <p className='messenger__message'>{message}</p>
-          <p className='messenger__message--date'>
-            {formatDate(date) ?? new Date(date).toString()}
-          </p>
-        </span>
-      </div>
-    </div>
-  )
-}
-
-export default SystemMessage

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

@@ -1,35 +0,0 @@
-import React from 'react'
-import useTheme from '../../hooks/useThemes'
-interface IProps {
-  label: string
-  onChange: (value: string) => void
-  name: string
-  placeholder: string
-}
-
-function Textarea ({ name, placeholder, label, onChange }: IProps) {
-  const { theme } = useTheme()
-  return (
-    <div className='text-area'>
-      <label
-        htmlFor={name}
-        className='text-area__label'
-        style={{ color: theme.newChatFormTexts }}
-      >
-        {label}
-      </label>
-      <textarea
-        style={{
-          backgroundColor: theme.inputBg,
-          color: theme.newChatFormTexts,
-        }}
-        name={name}
-        placeholder={placeholder}
-        className='text-area__input'
-        onChange={(e) => onChange(e.target.value)}
-      />
-    </div>
-  )
-}
-
-export default Textarea

package/src/app/Messenger/components/TextArea/Textarea.less

@@ -1,22 +0,0 @@
-.text-area {
-  margin-bottom: 1rem;
-  width: 100%;
-
-  &__label {
-    color: @title-form-color;
-    font-weight: bold;
-    margin: 0.5rem;
-  }
-
-  &__input {
-    border: 1.5px solid hsl(0, 0%, 80%);
-    border-radius: 4px;
-    margin-top: 0.5rem;
-    padding: 4px 8px;
-    width: 100%;
-
-    &:focus {
-      outline: #2684ff 2px solid !important;
-    }
-  }
-}

package/src/app/Messenger/components/Tooltip/Tooltip.less

@@ -1,27 +0,0 @@
-.tooltip {
-  position: relative;
-  display: inline-block;
-}
-
-.tooltip__text {
-  visibility: hidden;
-  background-color: black;
-  color: #fff;
-  text-align: center;
-  border-radius: 5px;
-  padding: 5px;
-  position: absolute;
-  z-index: 1;
-  bottom: 125%;
-  left: -40%;
-  margin-left: -60px;
-  opacity: 0;
-  transition:
-    opacity 0.3s,
-    visibility 0.3s;
-}
-
-.tooltip:hover .tooltip__text {
-  visibility: visible;
-  opacity: 1;
-}