agx-chat-web 1.2.1 → 1.2.2

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

@@ -1,91 +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 = [
-    '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
+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 +1,25 @@
-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
+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 +1,35 @@
-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
+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 +1,22 @@
-.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;
-    }
-  }
-}
+.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 +1,27 @@
-.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;
-}
+.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;
+}

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

@@ -1,17 +1,17 @@
-import React, { ReactNode } from 'react'
-
-interface ToolTipProps {
-  text: string
-  children: ReactNode
-}
-
-const ToolTip: React.FC<ToolTipProps> = ({ text, children }) => {
-  return (
-    <div className='tooltip'>
-      {children}
-      <div className='tooltip__text'>{text}</div>
-    </div>
-  )
-}
-
-export default ToolTip
+import React, { ReactNode } from 'react'
+
+interface ToolTipProps {
+  text: string
+  children: ReactNode
+}
+
+const ToolTip: React.FC<ToolTipProps> = ({ text, children }) => {
+  return (
+    <div className='tooltip'>
+      {children}
+      <div className='tooltip__text'>{text}</div>
+    </div>
+  )
+}
+
+export default ToolTip