agx-chat-web 1.2.1 → 1.2.2

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

@@ -1,71 +1,71 @@
-.messenger {
-  &__messages-row--sender {
-    display: flex;
-    justify-content: flex-end;
-    margin: 10px 0;
-  }
-
-  &__messages-sender {
-    max-width: 80%;
-    padding: 10px;
-    border-radius: 8px;
-    font-family: 'Arial', sans-serif;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  }
-
-  &__file-card {
-    display: flex;
-    align-items: center;
-    background: rgba(0, 0, 0, 0.1);
-    border-radius: 8px;
-    padding: 10px;
-  }
-
-  &__file-icon {
-    flex-shrink: 0;
-    width: 40px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 4px;
-    margin-right: 10px;
-  }
-
-  &__file-details {
-    flex-grow: 1;
-    margin-right: 10px;
-  }
-
-  &__file-name {
-    font-weight: bold;
-    font-size: 14px;
-    margin: 0;
-  }
-
-  &__file-info {
-    font-size: 12px;
-    color: rgba(255, 255, 255, 0.8);
-  }
-
-  &__file-download {
-    font-size: 12px;
-    text-decoration: none;
-  }
-
-  &__file-download:hover {
-    text-decoration: underline;
-  }
-
-  &__message--bottom {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 5px;
-  }
-
-  &__message--date {
-    font-size: 12px;
-    color: rgba(255, 255, 255, 0.8);
-  }
-}
+.messenger {
+  &__messages-row--sender {
+    display: flex;
+    justify-content: flex-end;
+    margin: 10px 0;
+  }
+
+  &__messages-sender {
+    max-width: 80%;
+    padding: 10px;
+    border-radius: 8px;
+    font-family: 'Arial', sans-serif;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  &__file-card {
+    display: flex;
+    align-items: center;
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    padding: 10px;
+  }
+
+  &__file-icon {
+    flex-shrink: 0;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    margin-right: 10px;
+  }
+
+  &__file-details {
+    flex-grow: 1;
+    margin-right: 10px;
+  }
+
+  &__file-name {
+    font-weight: bold;
+    font-size: 14px;
+    margin: 0;
+  }
+
+  &__file-info {
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.8);
+  }
+
+  &__file-download {
+    font-size: 12px;
+    text-decoration: none;
+  }
+
+  &__file-download:hover {
+    text-decoration: underline;
+  }
+
+  &__message--bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 5px;
+  }
+
+  &__message--date {
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.8);
+  }
+}

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

@@ -1,50 +1,50 @@
-import React from 'react'
-import DownloadMinimalistIcon from '../../icons/DownloadMinimalistIcon'
-import { IMessagesBalloon } from 'types'
-import RenderFileIcon from '../RenderFileIcon/RenderFileIcon'
-
-export function formatFileSize (size = 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)
-
-  return (
-    <div className='messenger__messages-row--sender'>
-      <span>
-        {
-          <div className='messenger__file-card'>
-            <div className='messenger__file-icon'>
-              <RenderFileIcon fileType={file?.mimetype} />
-            </div>
-            <div className='messenger__file-details'>
-              <p className='messenger__file-name'>{fileName}</p>
-              <p className='messenger__file-info'>
-                {filePages && filePages + ' página(s) •'} {fileSize} •{' '}
-                {fileType}
-              </p>
-            </div>
-            <a
-              href={file?.location}
-              target='_blank'
-              rel='noopener noreferrer'
-              className='messenger__file-download'
-              style={{ color: 'blue' }}
-            >
-              <DownloadMinimalistIcon width='24' height='24' color='white' />
-            </a>
-          </div>
-        }
-      </span>
-    </div>
-  )
-}
-
-export default DocMessage
+import React from 'react'
+import DownloadMinimalistIcon from '../../icons/DownloadMinimalistIcon'
+import { IMessagesBalloon } from 'types'
+import RenderFileIcon from '../RenderFileIcon/RenderFileIcon'
+
+export function formatFileSize (size = 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)
+
+  return (
+    <div className='messenger__messages-row--sender'>
+      <span>
+        {
+          <div className='messenger__file-card'>
+            <div className='messenger__file-icon'>
+              <RenderFileIcon fileType={file?.mimetype} />
+            </div>
+            <div className='messenger__file-details'>
+              <p className='messenger__file-name'>{fileName}</p>
+              <p className='messenger__file-info'>
+                {filePages && filePages + ' página(s) •'} {fileSize} •{' '}
+                {fileType}
+              </p>
+            </div>
+            <a
+              href={file?.location}
+              target='_blank'
+              rel='noopener noreferrer'
+              className='messenger__file-download'
+              style={{ color: 'blue' }}
+            >
+              <DownloadMinimalistIcon width='24' height='24' color='white' />
+            </a>
+          </div>
+        }
+      </span>
+    </div>
+  )
+}
+
+export default DocMessage

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

@@ -1,79 +1,79 @@
-.images-container {
-  width: 100%;
-  height: 90%;
-  border: 2px solid @secondary-bg-color-chat;
-  background-color: @component-background;
-  border-bottom: none;
-  border-radius: 0 @border-radius 0 0;
-  @media @tab-md {
-    border-radius: @border-radius @border-radius 0 0 !important;
-  }
-
-  &__close {
-    width: 100%;
-    position: relative;
-    margin-top: 15px;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-
-    &--icon {
-      width: 32px;
-      height: 32px;
-      cursor: pointer;
-      background-color: transparent;
-      outline: none;
-      border: none;
-
-      &:hover {
-        opacity: 75%;
-        transition: 200ms;
-      }
-
-      &::before,
-      &::after {
-        position: absolute;
-        right: 25px;
-        top: 0;
-        content: ' ';
-        height: 33px;
-        width: 2px;
-        background-color: red;
-      }
-
-      &:after {
-        transform: rotate(45deg);
-      }
-
-      &:before {
-        transform: rotate(-45deg);
-      }
-    }
-  }
-
-  &__container {
-    width: 100%;
-    height: 100%;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: @title-form-color;
-  }
-
-  &__image {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 100%;
-    padding: 0 10px;
-    max-width: 700px;
-    max-height: 300px;
-  }
-
-  &__title-img {
-    width: 100%;
-    text-align: center;
-    word-wrap: break-word;
-  }
-}
+.images-container {
+  width: 100%;
+  height: 90%;
+  border: 2px solid @secondary-bg-color-chat;
+  background-color: @component-background;
+  border-bottom: none;
+  border-radius: 0 @border-radius 0 0;
+  @media @tab-md {
+    border-radius: @border-radius @border-radius 0 0 !important;
+  }
+
+  &__close {
+    width: 100%;
+    position: relative;
+    margin-top: 15px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+
+    &--icon {
+      width: 32px;
+      height: 32px;
+      cursor: pointer;
+      background-color: transparent;
+      outline: none;
+      border: none;
+
+      &:hover {
+        opacity: 75%;
+        transition: 200ms;
+      }
+
+      &::before,
+      &::after {
+        position: absolute;
+        right: 25px;
+        top: 0;
+        content: ' ';
+        height: 33px;
+        width: 2px;
+        background-color: red;
+      }
+
+      &:after {
+        transform: rotate(45deg);
+      }
+
+      &:before {
+        transform: rotate(-45deg);
+      }
+    }
+  }
+
+  &__container {
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: @title-form-color;
+  }
+
+  &__image {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    padding: 0 10px;
+    max-width: 700px;
+    max-height: 300px;
+  }
+
+  &__title-img {
+    width: 100%;
+    text-align: center;
+    word-wrap: break-word;
+  }
+}

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

@@ -1,51 +1,51 @@
-import React, { useEffect, useState } from 'react'
-import { IImagesContainer } from 'types'
-import RenderFileIcon from '../RenderFileIcon/RenderFileIcon'
-
-function ImagesContainer ({ file, onClose }: IImagesContainer) {
-  const [fileInfo, setFileInfo] = useState<{ name: string; type: string }>({
-    name: '',
-    type: '',
-  })
-
-  const [b64, setB64] = useState<string>('')
-
-  useEffect(() => {
-    function getBase64 (file: File) {
-      return new Promise((resolve, reject) => {
-        const reader = new FileReader()
-        reader.readAsDataURL(file)
-        reader.onload = () => resolve(reader.result)
-        reader.onerror = (error) => reject(error)
-      })
-    }
-
-    if (file) getBase64(file).then((base64) => setB64(base64 as string))
-  }, [file])
-
-  useEffect(() => {
-    if (file) {
-      setFileInfo({
-        name: file.name,
-        type: file.type,
-      })
-    }
-  }, [file])
-
-  return (
-    <div className='images-container'>
-      <div className='images-container__close'>
-        <button className='images-container__close--icon' onClick={onClose} />
-      </div>
-
-      <div className='images-container__container'>
-        <div className='images-container__image'>
-          <RenderFileIcon fileType={fileInfo.type} b64={b64} />
-          <span className='images-container__title-img'>{fileInfo.name}</span>
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default ImagesContainer
+import React, { useEffect, useState } from 'react'
+import { IImagesContainer } from 'types'
+import RenderFileIcon from '../RenderFileIcon/RenderFileIcon'
+
+function ImagesContainer ({ file, onClose }: IImagesContainer) {
+  const [fileInfo, setFileInfo] = useState<{ name: string; type: string }>({
+    name: '',
+    type: '',
+  })
+
+  const [b64, setB64] = useState<string>('')
+
+  useEffect(() => {
+    function getBase64 (file: File) {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        reader.readAsDataURL(file)
+        reader.onload = () => resolve(reader.result)
+        reader.onerror = (error) => reject(error)
+      })
+    }
+
+    if (file) getBase64(file).then((base64) => setB64(base64 as string))
+  }, [file])
+
+  useEffect(() => {
+    if (file) {
+      setFileInfo({
+        name: file.name,
+        type: file.type,
+      })
+    }
+  }, [file])
+
+  return (
+    <div className='images-container'>
+      <div className='images-container__close'>
+        <button className='images-container__close--icon' onClick={onClose} />
+      </div>
+
+      <div className='images-container__container'>
+        <div className='images-container__image'>
+          <RenderFileIcon fileType={fileInfo.type} b64={b64} />
+          <span className='images-container__title-img'>{fileInfo.name}</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ImagesContainer