agx-chat-web 1.1.0 → 1.2.1

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

@@ -1,64 +1,64 @@
-import React from 'react'
-import useTheme from '../../hooks/useThemes'
-
-interface INewChatButton {
-  removeActiveItem: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void
-  messegerView: 'empty' | 'messages' | 'newChat'
-  chatButtons: {
-    label: string
-    onClick: () => void
-    type: string
-    canSee: boolean
-    disabled?: boolean
-  }[]
-}
-
-function ChatButtons ({ chatButtons, removeActiveItem }: INewChatButton) {
-  const { theme } = useTheme()
-
-  const getButtonType = (type: string, disabled?: boolean) => {
-    if (type === 'primary')
-      return {
-        background: disabled ? theme?.buttonsDisabled : theme?.buttonPrimary,
-        color: theme?.buttonPrimaryText,
-      }
-
-    if (type === 'outlined')
-      return {
-        background: 'transparent',
-        color: theme?.asideFontColor,
-        border: `${theme?.asideFontColor} 1px solid`,
-      }
-    return
-  }
-
-  return (
-    <>
-      {chatButtons.map((button) => {
-        return (
-          button.canSee && (
-            <>
-              <button
-                key={`button-${button.label}`}
-                className={
-                  button.disabled
-                    ? 'messenger__chat-button messenger__chat-button--disabled'
-                    : 'messenger__chat-button'
-                }
-                onClick={(event) => {
-                  button.onClick()
-                  removeActiveItem(event)
-                }}
-                style={getButtonType(button.type, button.disabled)}
-              >
-                {button.label}
-              </button>
-            </>
-          )
-        )
-      })}
-    </>
-  )
-}
-
-export default ChatButtons
+import React from 'react'
+import useTheme from '../../hooks/useThemes'
+
+interface INewChatButton {
+  removeActiveItem: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void
+  messegerView: 'empty' | 'messages' | 'newChat'
+  chatButtons: {
+    label: string
+    onClick: () => void
+    type: string
+    canSee: boolean
+    disabled?: boolean
+  }[]
+}
+
+function ChatButtons ({ chatButtons, removeActiveItem }: INewChatButton) {
+  const { theme } = useTheme()
+
+  const getButtonType = (type: string, disabled?: boolean) => {
+    if (type === 'primary')
+      return {
+        background: disabled ? theme?.buttonsDisabled : theme?.buttonPrimary,
+        color: theme?.buttonPrimaryText,
+      }
+
+    if (type === 'outlined')
+      return {
+        background: 'transparent',
+        color: theme?.asideFontColor,
+        border: `${theme?.asideFontColor} 1px solid`,
+      }
+    return
+  }
+
+  return (
+    <>
+      {chatButtons.map((button) => {
+        return (
+          button.canSee && (
+            <>
+              <button
+                key={`button-${button.label}`}
+                className={
+                  button.disabled
+                    ? 'messenger__chat-button messenger__chat-button--disabled'
+                    : 'messenger__chat-button'
+                }
+                onClick={(event) => {
+                  button.onClick()
+                  removeActiveItem(event)
+                }}
+                style={getButtonType(button.type, button.disabled)}
+              >
+                {button.label}
+              </button>
+            </>
+          )
+        )
+      })}
+    </>
+  )
+}
+
+export default ChatButtons

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

@@ -1,18 +1,18 @@
-.chat-tabs {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  &__button {
-    background: transparent;
-    border: none;
-    border-bottom: 1px solid transparent;
-    cursor: pointer;
-    padding: 0.5rem 1rem;
-    margin-bottom: 0.5rem;
-
-    &--active {
-      border-bottom: 1px solid var(--secondary-color);
-      transition: 0.5s;
-    }
-  }
-}
+.chat-tabs {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  &__button {
+    background: transparent;
+    border: none;
+    border-bottom: 1px solid transparent;
+    cursor: pointer;
+    padding: 0.5rem 1rem;
+    margin-bottom: 0.5rem;
+
+    &--active {
+      border-bottom: 1px solid var(--secondary-color);
+      transition: 0.5s;
+    }
+  }
+}

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

@@ -1,32 +1,32 @@
-import useTheme from '../../hooks/useThemes'
-import { activeItem } from '../../views/MessengerListItem'
-import React from 'react'
-
-interface IProps {
-  handleChangeTickets: (tab: string) => void
-  chatListTabs: { value: string; label: string }[]
-}
-
-function ChatTabs ({ handleChangeTickets, chatListTabs }: IProps) {
-  const { theme } = useTheme()
-  return (
-    <div className='chat-tabs' style={{ color: theme.asideFontColor }}>
-      {chatListTabs.map((tab, index) => {
-        return (
-          <button
-            key={`chatListTab-${index}`}
-            className={`chat-tabs__button ${index === 0 && 'chat-tabs__button--active'}`}
-            onClick={(e) => {
-              handleChangeTickets(tab.value)
-              activeItem(e, 'chat-tabs__button', 'chat-tabs__button--active')
-            }}
-          >
-            {tab.label}
-          </button>
-        )
-      })}
-    </div>
-  )
-}
-
-export default ChatTabs
+import useTheme from '../../hooks/useThemes'
+import { activeItem } from '../../views/MessengerListItem'
+import React from 'react'
+
+interface IProps {
+  handleChangeTickets: (tab: string) => void
+  chatListTabs: { value: string; label: string }[]
+}
+
+function ChatTabs ({ handleChangeTickets, chatListTabs }: IProps) {
+  const { theme } = useTheme()
+  return (
+    <div className='chat-tabs' style={{ color: theme.asideFontColor }}>
+      {chatListTabs.map((tab, index) => {
+        return (
+          <button
+            key={`chatListTab-${index}`}
+            className={`chat-tabs__button ${index === 0 && 'chat-tabs__button--active'}`}
+            onClick={(e) => {
+              handleChangeTickets(tab.value)
+              activeItem(e, 'chat-tabs__button', 'chat-tabs__button--active')
+            }}
+          >
+            {tab.label}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+export default ChatTabs

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;
+  }
+}