agx-chat-web 0.4.9 → 0.4.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agx-chat-web",
-  "version": "0.4.9",
+  "version": "0.4.11",
   "description": "Chat application using React and less",
   "author": {
     "name": "Jeiel Alves",

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

@@ -11,7 +11,7 @@
     margin-bottom: 0.5rem;
 
     &--active {
-      border-bottom: 1px solid white;
+      border-bottom: 1px solid var(--secondary-color);
       transition: 0.5s;
     }
   }

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

@@ -1,16 +1,16 @@
 .file-input {
   margin-bottom: 1rem;
   width: 100%;
-  
+
   &__label {
     color: @title-form-color;
     font-weight: bold;
-    margin: 0.5rem;  
+    margin: 0.5rem;
   }
 
   &__container {
     align-items: center;
-    background-color: white;
+    background-color: var(--secondary-color);
     border-radius: 10px;
     display: flex;
     flex-direction: column;
@@ -23,17 +23,17 @@
   &__button {
     border: none;
     border-radius: 30px;
-    color: white;
+    color: var(--secondary-color);
     cursor: pointer;
     font-size: 1rem;
-    font-weight: bold; 
+    font-weight: bold;
     margin: 0.5rem 1rem;
     padding: 0.5rem;
   }
 
   &__list {
     align-items: center;
-    background-color: white;
+    background-color: var(--secondary-color);
     border-radius: 10px;
     display: flex;
     justify-content: space-between;

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

@@ -1,58 +1,61 @@
-import React, { createContext, ReactNode } from 'react'
+import React, { createContext, ReactNode } from "react";
 
 const defaultThemeVariables = {
-  asideBg: '#eee',
-  asideFontColor: 'white',
-  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',
+  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:'white',
-  chatInputBorder: '',
-  listItemHover: '',
-  active: '',
-  activeTabBorter: '#25D366',
-  emptyMessagesFontColor: '#000'
-}
+  borderColor: "#AAAAAA",
+  inputBg: "var(--secondary-color)",
+  chatInputBorder: "",
+  listItemHover: "",
+  active: "",
+  activeTabBorter: "#25D366",
+  emptyMessagesFontColor: "#000",
+};
 
-type ThemeVariables = typeof defaultThemeVariables
+type ThemeVariables = typeof defaultThemeVariables;
 
 type ThemeContextContent = {
-  theme: Partial<ThemeVariables>
-}
+  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) => {
+  children: ReactNode;
+  theme?: Partial<ThemeVariables>;
+};
+const MessageThemeWrapper = ({
+  children,
+  theme = defaultThemeVariables,
+}: Props) => {
   const config = {
-    theme
-  }
+    theme,
+  };
 
   return (
     <MessageThemeContext.Provider value={config}>
       {children}
     </MessageThemeContext.Provider>
-  )
-}
+  );
+};
 
-export default MessageThemeWrapper
+export default MessageThemeWrapper;

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

@@ -23,13 +23,13 @@
     margin-right: 1rem;
     border-radius: 0 30px 30px 0;
     padding: 10px;
-    color: white;
-    border: white 1px solid;
+    color: var(--secondary-color);
+    border: var(--secondary-color) 1px solid;
     background: transparent;
     position: relative;
 
     &::placeholder {
-      color: white;
+      color: var(--secondary-color);
       opacity: 60%;
     }
   }

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

@@ -1,14 +1,21 @@
-import useTheme from '../../hooks/useThemes'
-import React, { useCallback, useState } from 'react'
-import { IMessagesBalloon } from "types"
-import ReadIcon from "../../icons/ReadIcon"
-import ReactSimpleImageViewer from '../../../../../node_modules/react-simple-image-viewer'
+import useTheme from "../../hooks/useThemes";
+import React, { useCallback, useState } from "react";
+import { IMessagesBalloon } from "types";
+import ReadIcon from "../../icons/ReadIcon";
+import ReactSimpleImageViewer from "../../../../../node_modules/react-simple-image-viewer";
 
-
-function SenderMessages({ date, message, read, hasFile, file, formatDate, id }: IMessagesBalloon) {
+function SenderMessages({
+  date,
+  message,
+  read,
+  hasFile,
+  file,
+  formatDate,
+  id,
+}: IMessagesBalloon) {
   const [currentImage, setCurrentImage] = useState(0);
   const [isViewerOpen, setIsViewerOpen] = useState(false);
-  const { theme } = useTheme()
+  const { theme } = useTheme();
 
   const openImageViewer = useCallback((index) => {
     setCurrentImage(index);
@@ -19,24 +26,35 @@ function SenderMessages({ date, message, read, hasFile, file, formatDate, id }:
     setCurrentImage(0);
     setIsViewerOpen(false);
   };
-  
+
   return (
-    <div className="messenger__messages-row--sender" >
-      <div className="messenger__messages-sender" id={id} style={{ background: theme?.messengerSenderColor }}>
+    <div className="messenger__messages-row--sender">
+      <div
+        className="messenger__messages-sender"
+        id={id}
+        style={{ background: theme?.messengerSenderColor }}
+      >
         <span>
           {hasFile && (
             <div className="messenger__message--file">
-              <img src={file?.location} width={200} alt="imagem na mensagem" onClick={() => openImageViewer(currentImage)} />
+              <img
+                src={file?.location}
+                width={200}
+                alt="imagem na mensagem"
+                onClick={() => openImageViewer(currentImage)}
+              />
             </div>
           )}
           <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'} />
+            <p className="messenger__message--date">
+              {formatDate(date) ?? new Date(date).toString()}
+            </p>
+            <ReadIcon fill={read ? "#00efff" : "var(--secondary-color)"} />
           </div>
         </span>
       </div>
-      {file && isViewerOpen && 
+      {file && isViewerOpen && (
         <ReactSimpleImageViewer
           src={[file.location]}
           currentIndex={0}
@@ -44,9 +62,9 @@ function SenderMessages({ date, message, read, hasFile, file, formatDate, id }:
           closeOnClickOutside={true}
           onClose={closeImageViewer}
         />
-      }
+      )}
     </div>
-  )
+  );
 }
 
-export default SenderMessages
+export default SenderMessages;

package/src/app/Messenger/icons/TimerIcon.tsx

@@ -1,10 +1,18 @@
-import React from 'react'
-
+import React from "react";
 
 export default function TimerIcon() {
   return (
-    <svg width="10" height="10" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path d="M9.42207 4.79883H8.57656C8.49922 4.79883 8.43594 4.86211 8.43594 4.93946V9.77871C8.43594 9.82442 8.45703 9.8666 8.49394 9.89297L11.3996 12.0147C11.4629 12.0604 11.5508 12.048 11.5965 11.9848L12.0992 11.2992C12.1467 11.2342 12.1326 11.1463 12.0693 11.1023L9.56269 9.29004V4.93946C9.56269 4.86211 9.49941 4.79883 9.42207 4.79883ZM13.2857 6.12071L16.042 6.79395C16.1299 6.81504 16.216 6.74824 16.216 6.6586L16.2301 3.81973C16.2301 3.70196 16.0947 3.63516 16.0033 3.70899L13.233 5.87285C13.2121 5.88905 13.1961 5.91083 13.187 5.93568C13.1779 5.96054 13.176 5.98746 13.1815 6.01335C13.187 6.03924 13.1997 6.06305 13.2182 6.08204C13.2366 6.10103 13.26 6.11444 13.2857 6.12071ZM16.2336 11.4135L15.2369 11.0707C15.2022 11.0588 15.1641 11.061 15.131 11.0767C15.0978 11.0925 15.0721 11.1206 15.0594 11.1551C15.026 11.2447 14.9908 11.3326 14.9539 11.4205C14.641 12.1605 14.1928 12.8268 13.6197 13.3981C13.053 13.9665 12.3815 14.4196 11.6422 14.7322C10.8764 15.056 10.0531 15.2222 9.22168 15.2209C8.38145 15.2209 7.56758 15.0574 6.80117 14.7322C6.06191 14.4196 5.39032 13.9665 4.82363 13.3981C4.25234 12.8268 3.8041 12.1605 3.48945 11.4205C3.16745 10.6542 3.00248 9.83117 3.0043 9C3.0043 8.15977 3.16777 7.34414 3.49297 6.57774C3.80586 5.8377 4.2541 5.17149 4.82715 4.6002C5.39383 4.03175 6.06542 3.57866 6.80469 3.26602C7.56758 2.94082 8.3832 2.77735 9.22344 2.77735C10.0637 2.77735 10.8775 2.94082 11.6439 3.26602C12.3832 3.57866 13.0548 4.03175 13.6215 4.6002C13.8008 4.78125 13.9695 4.96934 14.1242 5.16797L15.1754 4.34531C13.792 2.57696 11.6387 1.43965 9.21992 1.44141C5.0082 1.44317 1.62617 4.86387 1.66836 9.07735C1.71055 13.217 5.07676 16.5586 9.22344 16.5586C12.4842 16.5586 15.2615 14.4914 16.3197 11.5963C16.3461 11.5225 16.3074 11.4398 16.2336 11.4135Z" fill="white" />
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M9.42207 4.79883H8.57656C8.49922 4.79883 8.43594 4.86211 8.43594 4.93946V9.77871C8.43594 9.82442 8.45703 9.8666 8.49394 9.89297L11.3996 12.0147C11.4629 12.0604 11.5508 12.048 11.5965 11.9848L12.0992 11.2992C12.1467 11.2342 12.1326 11.1463 12.0693 11.1023L9.56269 9.29004V4.93946C9.56269 4.86211 9.49941 4.79883 9.42207 4.79883ZM13.2857 6.12071L16.042 6.79395C16.1299 6.81504 16.216 6.74824 16.216 6.6586L16.2301 3.81973C16.2301 3.70196 16.0947 3.63516 16.0033 3.70899L13.233 5.87285C13.2121 5.88905 13.1961 5.91083 13.187 5.93568C13.1779 5.96054 13.176 5.98746 13.1815 6.01335C13.187 6.03924 13.1997 6.06305 13.2182 6.08204C13.2366 6.10103 13.26 6.11444 13.2857 6.12071ZM16.2336 11.4135L15.2369 11.0707C15.2022 11.0588 15.1641 11.061 15.131 11.0767C15.0978 11.0925 15.0721 11.1206 15.0594 11.1551C15.026 11.2447 14.9908 11.3326 14.9539 11.4205C14.641 12.1605 14.1928 12.8268 13.6197 13.3981C13.053 13.9665 12.3815 14.4196 11.6422 14.7322C10.8764 15.056 10.0531 15.2222 9.22168 15.2209C8.38145 15.2209 7.56758 15.0574 6.80117 14.7322C6.06191 14.4196 5.39032 13.9665 4.82363 13.3981C4.25234 12.8268 3.8041 12.1605 3.48945 11.4205C3.16745 10.6542 3.00248 9.83117 3.0043 9C3.0043 8.15977 3.16777 7.34414 3.49297 6.57774C3.80586 5.8377 4.2541 5.17149 4.82715 4.6002C5.39383 4.03175 6.06542 3.57866 6.80469 3.26602C7.56758 2.94082 8.3832 2.77735 9.22344 2.77735C10.0637 2.77735 10.8775 2.94082 11.6439 3.26602C12.3832 3.57866 13.0548 4.03175 13.6215 4.6002C13.8008 4.78125 13.9695 4.96934 14.1242 5.16797L15.1754 4.34531C13.792 2.57696 11.6387 1.43965 9.21992 1.44141C5.0082 1.44317 1.62617 4.86387 1.66836 9.07735C1.71055 13.217 5.07676 16.5586 9.22344 16.5586C12.4842 16.5586 15.2615 14.4914 16.3197 11.5963C16.3461 11.5225 16.3074 11.4398 16.2336 11.4135Z"
+        fill="var(--secondary-color)"
+      />
     </svg>
-  )
+  );
 }

package/src/app/Messenger/views/Messenger.less

@@ -43,7 +43,7 @@
     align-items: center;
 
     & path {
-      fill: white;
+      fill: var(--secondary-color);
     }
 
     & p {
@@ -98,7 +98,7 @@
     right: 0;
     top: 0;
     border-radius: 10px;
-    background-color: white;
+    background-color: var(--secondary-color);
     padding: 0 0.5rem;
     font-size: 0.6rem;
   }
@@ -111,10 +111,10 @@
     bottom: 0;
     right: 0;
     border-radius: 10px;
-    background-color: white;
+    background-color: var(--secondary-color);
     padding: 0.3rem 0.5rem;
     margin: 0.5rem;
-    font-size: 0.5rem; 
+    font-size: 0.5rem;
   }
 
   &__aside-list-item {
@@ -196,7 +196,7 @@
 
     &--title,
     &--description {
-      white-space: nowrap;
+      var(--secondary-color)-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
       line-height: 1;
@@ -290,7 +290,7 @@
 
     & div {
       animation: spin 1s infinite linear;
-      border-left: 2px solid white;
+      border-left: 2px solid var(--secondary-color);
       border-radius: 50%;
       height: 25px;
       margin-bottom: 10px;
@@ -328,7 +328,7 @@
     padding: 10px;
 
     &>span {
-      color: white;
+      color: var(--secondary-color);
       overflow-wrap: break-word;
       word-break: break-word;
       width: 200px;
@@ -354,7 +354,7 @@
 
   &__message-title {
     max-width: 100%;
-    white-space: nowrap;
+    var(--secondary-color)-space: nowrap;
     overflow: hidden;
     max-width: 100%;
     display: block;
@@ -364,7 +364,7 @@
     margin: 0 0 3px;
     justify-content: flex-end;
     font-size: 13px;
-    color: white;
+    color: var(--secondary-color);
     font-weight: bold;
     filter: opacity(.7);
     font-weight: 700;
@@ -373,7 +373,7 @@
   &__message {
     padding: 0;
     margin: 0;
-    white-space: pre-wrap;
+    var(--secondary-color)-space: pre-wrap;
     line-height: 1.2;
 
     &--file {
@@ -564,7 +564,7 @@
   &__chat-button {
     border: none;
     border-radius: 30px;
-    color: white;
+    color: var(--secondary-color);
     cursor: pointer;
     font-size: 1rem;
     font-weight: bold;
@@ -579,7 +579,7 @@
   &__input-button {
     border: none;
     border-radius: 30px;
-    color: white;
+    color: var(--secondary-color);
     font-size: 1rem;
     font-weight: bold;
     margin: 0.5rem 1rem;
@@ -587,7 +587,7 @@
   }
 
   &__input-button-label {
-    color: white;
+    color: var(--secondary-color);
     font-weight: bold;
     margin: 0rem 1rem;
   }

package/src/app/Messenger/views/MessengerList.tsx

@@ -36,6 +36,7 @@ interface IMessengerList {
   hasNext: boolean
   onIntersect: () => void
   sliceCount: number
+  currentViewerId: string
 }
 
 const ListLoading = () => {
@@ -90,7 +91,8 @@ function MessengerList({
   canSeeTimer,
   hasNext,
   onIntersect,
-  sliceCount
+  sliceCount,
+  currentViewerId
 }: IMessengerList) {
   const { theme } = useTheme()
 
@@ -152,6 +154,7 @@ function MessengerList({
                   currentId={currentId}
                   item={item}
                   onClick={onClick}
+                  currentViewerId={currentViewerId}
                 />
               </div>
             )

package/src/app/Messenger/views/MessengerListItem.tsx

@@ -10,9 +10,14 @@ interface IListItem {
   item: IList
   currentId?: string
   canSeeTimer: boolean
+  currentViewerId: string
 }
 
-export function activeItem(e: React.MouseEvent<HTMLElement, MouseEvent>, defaultClass: string, activeClass: string,) {
+export function activeItem(
+  e: React.MouseEvent<HTMLElement, MouseEvent>,
+  defaultClass: string,
+  activeClass: string
+) {
   const click = document.querySelectorAll(`.${defaultClass}`)
   click.forEach((item) => {
     item.classList.remove(activeClass)
@@ -21,29 +26,53 @@ export function activeItem(e: React.MouseEvent<HTMLElement, MouseEvent>, default
   e.currentTarget.className += ` ${activeClass} `
 }
 
-function MessengerListItem ({ item, onClick, canSeeTimer, currentId }: IListItem) {
-  const [unreadMessages, setUnreadMessages] = useState<typeof item.totalUnreadMessages>(item.totalUnreadMessages)
-  const closedChat = useMemo(() => item.status.current.state === 'final' ? 'messenger__aside-list-item--closed' : '', [item])
+function MessengerListItem({
+  item,
+  onClick,
+  canSeeTimer,
+  currentId,
+  currentViewerId,
+}: IListItem) {
+  const [unreadMessages, setUnreadMessages] = useState<
+    typeof item.totalUnreadMessages
+  >(item.totalUnreadMessages)
+  const closedChat = useMemo(
+    () =>
+      item.status.current.state === 'final'
+        ? 'messenger__aside-list-item--closed'
+        : '',
+    [item]
+  )
   const [background, setBackground] = useState<string | undefined>('')
-  const [counter, setCounter] = useState<number | null>(null)  
+  const [counter, setCounter] = useState<number | null>(null)
 
   const { theme } = useTheme()
   const isInprogress = item.status?.current?.systemicValue === 'inprogress'
 
-  useEffect(() => {    
+  const otherChatMember = useMemo(
+    () =>
+      item?.users.find((item) => item.uniqueCode !== currentViewerId) ||
+      item.creator,
+    [item?.users, currentViewerId]
+  )
+
+  useEffect(() => {
     let interval: NodeJS.Timer
     if (isInprogress && canSeeTimer) {
-      const sla = new SlaDates(timeAsDayjs(item.currentTime).diff(item.createdAt, 'second'))
+      const sla = new SlaDates(
+        timeAsDayjs(item.currentTime).diff(item.createdAt, 'second')
+      )
       const diference = sla.calculateWorkingTime(
         timeAsDayjs(item.createdAt),
-        timeAsDayjs(), { start: 9, end: 18 }
+        timeAsDayjs(),
+        { start: 9, end: 18 }
       )
 
       setCounter(diference)
       if (sla.canUpdateClock(timeAsDayjs())) {
         interval = setInterval(() => {
-          setCounter(prev => prev !== null ? prev + 1 : null)
-        }, 1000)        
+          setCounter((prev) => (prev !== null ? prev + 1 : null))
+        }, 1000)
       }
     } else {
       setCounter(item.SLATimePassed ?? null)
@@ -58,8 +87,15 @@ function MessengerListItem ({ item, onClick, canSeeTimer, currentId }: IListItem
     setUnreadMessages(item.totalUnreadMessages)
   }, [item])
 
-  function handleClick(e: React.MouseEvent<HTMLElement, MouseEvent>, item: IList) {
-    activeItem(e, 'messenger__aside-list-item', 'messenger__aside-list-item--active')
+  function handleClick(
+    e: React.MouseEvent<HTMLElement, MouseEvent>,
+    item: IList
+  ) {
+    activeItem(
+      e,
+      'messenger__aside-list-item',
+      'messenger__aside-list-item--active'
+    )
     onClick(item)
   }
 
@@ -77,7 +113,6 @@ function MessengerListItem ({ item, onClick, canSeeTimer, currentId }: IListItem
     setBackground('')
   }
 
-
   const ShowTimer = () => {
     if (counter === null) return null
 
@@ -86,14 +121,12 @@ function MessengerListItem ({ item, onClick, canSeeTimer, currentId }: IListItem
         className='messenger__aside-timer'
         style={{
           background: SlaDates.getColorsByTime(counter),
-          color: 'white'
+          color: 'var(--secondary-color)',
         }}
       >
-        <TimerIcon />&nbsp;
-
-        <b>
-          {SlaDates.secondsInHours(counter)}
-        </b>
+        <TimerIcon />
+        &nbsp
+        <b>{SlaDates.secondsInHours(counter)}</b>
       </span>
     )
   }
@@ -110,18 +143,26 @@ function MessengerListItem ({ item, onClick, canSeeTimer, currentId }: IListItem
           backgroundColor: currentId === item._id ? theme?.active : background,
         }}
       >
-        <MessengerAvatar image={item?.creator?.image}>
-          {(item?.creator && item?.creator.username) ? item?.creator.username.slice(0, 1) : ''}
+        <MessengerAvatar image={otherChatMember?.image}>
+          {otherChatMember && otherChatMember.username
+            ? otherChatMember.username.slice(0, 1)
+            : ''}
         </MessengerAvatar>
 
-        <div className="messenger__aside-list-item--info">
-          <p className="messenger__aside-list-item--title">{item?.creator?.username}</p>
-          {item?.reason && (<p className="messenger__aside-list-item--description">{item.reason}</p>)}
+        <div className='messenger__aside-list-item--info'>
+          <p className='messenger__aside-list-item--title'>
+            {otherChatMember?.username}
+          </p>
+          {item?.reason && (
+            <p className='messenger__aside-list-item--description'>
+              {item.reason}
+            </p>
+          )}
         </div>
 
-        <div className="messenger__aside-list-item--additional">
+        <div className='messenger__aside-list-item--additional'>
           {unreadMessages > 0 && (
-            <div className="messenger__aside-list-item--unread">
+            <div className='messenger__aside-list-item--unread'>
               <span>{formatUnreadMessages(unreadMessages)}</span>
             </div>
           )}

package/src/styles/abstracts/variables.less

@@ -23,3 +23,6 @@
 @title-form-color: #476077;
 @border-radius: 20px;
 
+:root {
+  --secondary-color: var(--secondary-color);
+}