agx-chat-web 1.2.2 → 1.2.3

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

@@ -1,170 +0,0 @@
-import useTheme from '../../hooks/useThemes'
-import React, { useCallback, useState } from 'react'
-import { Iimages, IInconmingMessage } from 'types'
-import MessengerAvatar from '../MessengerAvatar/MessengerAvatar'
-import ReactSimpleImageViewer from '../../../../../node_modules/react-simple-image-viewer'
-import DocMessage from '../DocMessage/DocMessage'
-import { useTranslation } from 'react-i18next'
-
-interface IMessagesWithFile {
-  file:
-    | Iimages
-    | {
-        contentType: string
-        location: string
-        mimetype: string
-        originalname: string
-        size?: number
-        pages?: number
-        key?: string
-      }
-    | undefined
-  message: string
-  date: string
-  openImageViewer: (index: number) => void
-  id: string
-  formatDate: (date: string | Date) => string | undefined
-  currentImage: number
-}
-
-export const MessageImage = ({ ...rest }) => {
-  const { t } = useTranslation('messengerMessages')
-  return (
-    <div className='messenger__message--file'>
-      <img
-        {...rest}
-        width={200}
-        height={200}
-        alt={t('incommingMessage.messageImage')}
-      />
-    </div>
-  )
-}
-
-const MessageWithFile = ({
-  file,
-  message,
-  date,
-  openImageViewer,
-  id,
-  formatDate,
-  currentImage,
-}: IMessagesWithFile) => {
-  const isImage = (
-    file:
-      | {
-          contentType: string
-          location: string
-          mimetype: string
-          originalname: string
-          size?: number
-          pages?: number
-          key?: string
-        }
-      | Iimages
-      | undefined
-  ): file is Iimages => {
-    if (!file) return false
-    if (['image/png', 'image/jpeg'].includes(file?.mimetype ?? '')) {
-      return true
-    }
-    return false
-  }
-
-  return (
-    <>
-      {isImage(file) ? (
-        <MessageImage
-          src={file?.location}
-          onClick={() => openImageViewer(currentImage)}
-        />
-      ) : (
-        file && (
-          <DocMessage
-            file={file}
-            message={message}
-            date={date}
-            read={false}
-            id={id}
-            formatDate={formatDate}
-          />
-        )
-      )}
-    </>
-  )
-}
-
-function IncomingMessage ({
-  date,
-  message,
-  user,
-  hasFile,
-  file,
-  isSystemMessage,
-  formatDate,
-  id,
-}: IInconmingMessage) {
-  const { theme } = useTheme()
-  const [currentImage, setCurrentImage] = useState(0)
-  const [isViewerOpen, setIsViewerOpen] = useState(false)
-
-  const openImageViewer = useCallback((index: number) => {
-    setCurrentImage(index)
-    setIsViewerOpen(true)
-  }, [])
-
-  const closeImageViewer = () => {
-    setCurrentImage(0)
-    setIsViewerOpen(false)
-  }
-
-  return (
-    <div className='messenger__messages-row--received' id={id}>
-      {(user.avatar || user.name) && !isSystemMessage && (
-        <div className='messenger__message-avatar mr-2'>
-          <MessengerAvatar image={user.avatar}>
-            {user.name.slice(0, 1)}
-          </MessengerAvatar>
-        </div>
-      )}
-
-      <div
-        className='messenger__messages-received'
-        style={{ background: theme?.messengerIncomerColor }}
-      >
-        {!isSystemMessage && (
-          <p className='messenger__message-title'>{user.name}</p>
-        )}
-
-        <span>
-          {hasFile && (
-            <MessageWithFile
-              file={file}
-              message={message}
-              date={date}
-              openImageViewer={openImageViewer}
-              id={id}
-              formatDate={formatDate}
-              currentImage={currentImage}
-            />
-          )}
-          {message && <p className='messenger__message'>{message}</p>}
-          <p className='messenger__message--date'>
-            {formatDate(date) ?? new Date(date).toLocaleString()}
-          </p>
-        </span>
-      </div>
-      {file && isViewerOpen && (
-        <ReactSimpleImageViewer
-          src={[file.location]}
-          currentIndex={0}
-          disableScroll={false}
-          closeOnClickOutside={true}
-          onClose={closeImageViewer}
-        />
-      )}
-    </div>
-  )
-}
-
-export default IncomingMessage

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

@@ -1,80 +0,0 @@
-import React, { ReactNode, CSSProperties } from 'react'
-
-interface IInfiniteScroll {
-  loading: boolean
-  more: boolean
-  fetch: () => void
-  children: ReactNode
-  loadingCover: React.ReactElement
-  root: Element | null
-  reverse?: boolean
-  rootMargin?: number
-}
-
-const intersectDivStyle: CSSProperties = {
-  width: 25,
-  height: 25,
-  visibility: 'hidden',
-}
-
-function InfiniteScroll ({
-  loading,
-  loadingCover,
-  more,
-  fetch,
-  children,
-  root,
-  reverse = false,
-  rootMargin = 400,
-}: IInfiniteScroll) {
-  const [infiniteElement, setInfiniteElement] =
-    React.useState<HTMLDivElement | null>(null)
-
-  React.useEffect(() => {
-    if (!root) return
-    const currentElement = infiniteElement
-    const observer = new IntersectionObserver(
-      (entries) => {
-        const first = entries[0]
-        if (first.isIntersecting === true) fetch()
-      },
-      {
-        root,
-        rootMargin: rootMargin.toString() + 'px',
-        threshold: 0.5,
-      }
-    )
-
-    if (currentElement) {
-      observer.observe(currentElement)
-    }
-
-    return () => {
-      if (currentElement) observer.unobserve(currentElement)
-    }
-  }, [infiniteElement])
-
-  if (reverse) {
-    return (
-      <>
-        {more && !loading && (
-          <div ref={setInfiniteElement} style={intersectDivStyle}></div>
-        )}
-        {loading && loadingCover}
-        {children}
-      </>
-    )
-  }
-
-  return (
-    <>
-      {children}
-      {loading && loadingCover}
-      {more && !loading && (
-        <div ref={setInfiniteElement} style={intersectDivStyle}></div>
-      )}
-    </>
-  )
-}
-
-export default InfiniteScroll

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

@@ -1,147 +0,0 @@
-import TrashIcon from '../../icons/TrashIcon'
-import React, { useMemo } from 'react'
-import useTheme from '../../hooks/useThemes'
-import { useTranslation } from 'react-i18next'
-
-interface IProps {
-  fileList: File[]
-  onUpdateFile: (files: File) => void
-  label: string
-  onRemoveFile: (files: File) => void
-  maxSize: string
-  loading: boolean
-}
-
-function InputFile ({
-  fileList,
-  onUpdateFile,
-  label,
-  onRemoveFile,
-  maxSize,
-  loading,
-}: IProps) {
-  const { theme } = useTheme()
-  const { t } = useTranslation('newFormChat')
-
-  const validateFileType = useMemo(
-    () => (allowedTypes: string[], file?: File) => {
-      if (file?.type) {
-        return allowedTypes.includes(file.type)
-      }
-      const extension = file?.name.split('.').pop()?.toLowerCase()
-      return extension ? allowedTypes.includes(`.${extension}`) : false
-    },
-    []
-  )
-
-  const onUpload = () => {
-    const input = document.querySelector('.file-input__input') as HTMLElement
-    input?.click()
-  }
-
-  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e?.target?.files?.[0]
-
-    const isAllowedType = validateFileType(
-      [
-        'image/png',
-        'image/jpeg',
-        'application/pdf',
-        'application/msword',
-        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-        'text/csv',
-        'video/mp4',
-      ],
-      file
-    )
-    if (!isAllowedType) {
-      console.error(t('inputFile.documentSendError'))
-      return false
-    }
-
-    if (file) onUpdateFile(file)
-    return true
-  }
-
-  const removeItem = (file: File) => {
-    if (fileList.some((item) => item === file)) {
-      onRemoveFile(file)
-    }
-  }
-
-  return (
-    <>
-      <div className='file-input'>
-        <label
-          style={{ color: theme.newChatFormTexts }}
-          htmlFor=''
-          className='file-input__label'
-        >
-          {label}
-        </label>
-        <div
-          className='file-input__container'
-          style={{
-            backgroundColor: theme.inputBg,
-            color: theme.newChatFormTexts,
-          }}
-        >
-          <input
-            className='file-input__input'
-            type='file'
-            id='docpicker'
-            hidden
-            accept='.jpg, .jpeg, .png, .pdf, .doc, .docx, .csv, .mp4'
-            onChange={(event) => onChange(event)}
-          />
-
-          <h4>{t('inputFile.chooseFile')}</h4>
-          <button
-            className='file-input__button'
-            type='button'
-            onClick={onUpload}
-            style={{
-              background: theme?.buttonPrimary,
-              color: theme?.buttonPrimaryText,
-            }}
-          >
-            {t('inputFile.chooseFile')}
-          </button>
-
-          {loading ? (
-            ''
-          ) : (
-            <p>
-              {t('inputFile.allowDocuments')}(
-              {t('inputFile.allowSizeDocument', { maxSize })})
-            </p>
-          )}
-        </div>
-      </div>
-
-      <div>
-        {fileList &&
-          fileList.map((item) => (
-            <div
-              className='file-input__list'
-              key={item.name}
-              style={{
-                backgroundColor: theme.inputBg,
-                color: theme.newChatFormTexts,
-              }}
-            >
-              <span className='file-input__list--file-name'>{item.name}</span>
-              <button
-                className='file-input__delete'
-                onClick={() => removeItem(item)}
-              >
-                <TrashIcon color={theme.newChatFormDeleteFileButton || 'red'} />
-              </button>
-            </div>
-          ))}
-      </div>
-    </>
-  )
-}
-
-export default InputFile

package/src/app/Messenger/components/InputFile/inputFile.less

@@ -1,59 +0,0 @@
-.file-input {
-  margin-bottom: 1rem;
-  width: 100%;
-
-  &__label {
-    color: @title-form-color;
-    font-weight: bold;
-    margin: 0.5rem;
-  }
-
-  &__container {
-    align-items: center;
-    background-color: var(--secondary-color);
-    border-radius: 10px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    margin-top: 0.5rem;
-    padding: 1rem;
-    width: 100%;
-  }
-
-  &__button {
-    border: none;
-    border-radius: 30px;
-    color: var(--secondary-color);
-    cursor: pointer;
-    font-size: 1rem;
-    font-weight: bold;
-    margin: 0.5rem 1rem;
-    padding: 0.5rem;
-  }
-
-  &__list {
-    align-items: center;
-    background-color: var(--secondary-color);
-    border-radius: 10px;
-    display: flex;
-    justify-content: space-between;
-    margin: 0.5rem 0;
-    padding: 0.5rem;
-
-    &--file-name {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      max-width: 100%;
-    }
-  }
-
-  &__delete {
-    align-items: center;
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-  }
-}

package/src/app/Messenger/components/MessageBallon/MessageBalloon.tsx

@@ -1,100 +0,0 @@
-import React from 'react'
-import { Iimages, IMessages } from 'types'
-import IncomingMessage from '../IncomingMessage/IncomingMessage'
-import SenderMessages from '../SenderMessages/SenderMessages'
-import SystemMessage from '../SystemMessage/SystemMessage'
-
-function MessageBalloon ({
-  item,
-  creatorId,
-  formatDate,
-  id,
-}: {
-  item: IMessages
-  creatorId?: string
-  formatDate: (date: string | Date) => string | undefined
-  id: string
-}) {
-  if (item.isSystemMessage) {
-    return (
-      <SystemMessage
-        formatDate={formatDate}
-        date={item.createdAt}
-        message={item.content}
-        id={item.senderId}
-        user={{ name: 'System' }}
-      />
-    )
-  }
-
-  if (
-    item.sender.uniqueCode &&
-    !item.isSystemMessage &&
-    item.sender.uniqueCode === creatorId
-  ) {
-    return (
-      <>
-        <SenderMessages
-          id={id}
-          formatDate={formatDate}
-          message={item.content}
-          date={item.createdAt}
-          read={item.everybodyHasRead}
-          hasFile={item.hasFile}
-          file={item.file}
-        />
-
-        {item.images &&
-          item.images.map((image: Iimages, index: number) => (
-            <SenderMessages
-              key={image.key}
-              id={`${id}image-${index}`}
-              formatDate={formatDate}
-              date={item.createdAt}
-              file={image}
-              message=''
-              hasFile={true}
-              read={item.everybodyHasRead}
-            />
-          ))}
-      </>
-    )
-  }
-
-  return (
-    <>
-      <IncomingMessage
-        id={id}
-        formatDate={formatDate}
-        date={item.createdAt}
-        message={item.content}
-        hasFile={item.hasFile}
-        isSystemMessage={item.isSystemMessage}
-        file={item.file}
-        user={{
-          avatar: item.sender?.image,
-          name: item.sender.username,
-        }}
-      />
-
-      {item.images &&
-        item.images.map((image: Iimages, index: number) => (
-          <IncomingMessage
-            key={image.key}
-            id={`${id}image-${index}`}
-            formatDate={formatDate}
-            date={item.createdAt}
-            file={image}
-            message=''
-            hasFile={true}
-            user={{
-              avatar: item.sender?.image,
-              name: item.sender.username,
-            }}
-          />
-        ))}
-    </>
-  )
-}
-
-export default MessageBalloon

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

@@ -1,29 +0,0 @@
-import useTheme from '../../hooks/useThemes'
-import React from 'react'
-import { useTranslation } from 'react-i18next'
-import { IMesssengerAvatar } from 'types'
-
-function MessengerAvatar ({
-  image,
-  children,
-  className = '',
-}: IMesssengerAvatar) {
-  const { t } = useTranslation('messengerList')
-  const { theme } = useTheme()
-  return (
-    <figure
-      className={`${className} messenger__aside-list-item--avatar`}
-      style={{
-        background: theme.messengerIncomerColor,
-      }}
-    >
-      {image ? (
-        <img loading='lazy' alt={t('messengerAvatar.alt')} src={image} />
-      ) : (
-        children
-      )}
-    </figure>
-  )
-}
-
-export default MessengerAvatar

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

@@ -1,62 +0,0 @@
-import React, { createContext, ReactNode } from 'react'
-
-const defaultThemeVariables = {
-  asideBg: '#eee',
-  asideFontColor: 'var(--secondary-color)',
-  messengerMessagesBg: '#eeeeee',
-  headerAndSenderBg: '#232831',
-  buttonPrimary: '#25D366',
-  buttonPrimaryText: '#707070',
-  buttonsDisabled: '#94989D',
-  uploadFileIconColor: '#8696a0',
-  messengerNotSelectedBg: '#DDDDDD',
-  newChatFormBg: '',
-  newChatFormRadius: '0  20px 20px 0',
-  newChatFormTexts: '#000',
-  newChatFormDeleteFileButton: '#DD4E4E',
-  disclaimerPrimaryColor: '#4791FF',
-  disclaimerSecondaryColor: '#4791FF',
-  disclaimerTextColor: '#000',
-  messengerSenderColor: '#00A73E',
-  messengerIncomerColor: '#707070',
-  messengerSystemColor: '#2A313A',
-  borderColor: '#AAAAAA',
-  inputBg: 'var(--secondary-color)',
-  chatInputBorder: '',
-  listItemHover: '',
-  active: '',
-  activeTabBorter: '#25D366',
-  emptyMessagesFontColor: '#000',
-  documentMessagesTextColor: '#fff',
-}
-
-type ThemeVariables = typeof defaultThemeVariables
-
-type ThemeContextContent = {
-  theme: Partial<ThemeVariables>
-}
-
-export const MessageThemeContext = createContext<ThemeContextContent>(
-  {} as unknown as ThemeContextContent
-)
-
-type Props = {
-  children: ReactNode
-  theme?: Partial<ThemeVariables>
-}
-const MessageThemeWrapper = ({
-  children,
-  theme = defaultThemeVariables,
-}: Props) => {
-  const config = {
-    theme,
-  }
-
-  return (
-    <MessageThemeContext.Provider value={config}>
-      {children}
-    </MessageThemeContext.Provider>
-  )
-}
-
-export default MessageThemeWrapper

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