agx-chat-web 0.4.9

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "agx-chat-web",
+  "version": "0.4.9",
+  "description": "Chat application using React and less",
+  "author": {
+    "name": "Jeiel Alves",
+    "email": "jeiel.oliveira@agxsoftware.com"
+  },
+  "license": "MIT",
+  "main": "./dist/agx-chat.min.js",
+  "types": "./dist/esm/index.d.ts",
+  "files": [
+    "dist",
+    "src/**/*"
+  ],
+  "repository": "git@github.com:AGX-Software/chat-web.git",
+  "peerDependencies": {
+    "react": ">=16",
+    "react-dom": ">=16",
+    "react-simple-image-viewer": "^1.2.2",
+    "dayjs": "^1.11.9"
+  },
+  "scripts": {
+    "clean": "shx rm -rf dist",
+    "build": "yarn clean && tsc && webpack",
+    "build-dev": "tsc && webpack",
+    "lint": "eslint \"{**/*,*}.{js,ts,jsx,tsx}\"",
+    "test": "jest --config jestconfig.json",
+    "deploy": "yarn build && npm publish"
+  },
+  "jest": {
+    "preset": "ts-jest",
+    "testEnvironment": "node",
+    "setupFilesAfterEnv": [
+      "./jestconfig.json"
+    ]
+  },
+  "devDependencies": {
+    "@testing-library/react": "^13.4.0",
+    "@types/jest": "^29.2.5",
+    "@types/react": "^17.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.48.1",
+    "@typescript-eslint/parser": "^5.48.1",
+    "css-loader": "^6.7.3",
+    "eslint": "^8.31.0",
+    "eslint-plugin-only-warn": "^1.1.0",
+    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "jest": "^29.3.1",
+    "jest-canvas-mock": "^2.4.0",
+    "jest-environment-jsdom": "^29.3.1",
+    "less": "^4.1.3",
+    "less-loader": "^11.1.0",
+    "react-simple-image-viewer": "^1.2.2",
+    "shx": "^0.3.4",
+    "style-loader": "^3.3.1",
+    "svg-url-loader": "^8.0.0",
+    "terser-webpack-plugin": "^5.3.6",
+    "ts-jest": "^29.1.1",
+    "ts-loader": "^9.4.2",
+    "typescript": "^4.9.4",
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "dayjs": "^1.11.9"
+  }
+}

package/src/__tests__/app/Messenger/classes/slaCalculations.spec.ts

@@ -0,0 +1,115 @@
+import {describe, expect, it} from '@jest/globals'
+import { SlaDates, timeAsDayjs } from '../../../../app/Messenger/classes/slaCalculations'
+const workingHours = { start: 9, end: 18 }
+
+describe('slaCalculations class', () => {
+  it('Should return true seconds in working hour', () => {
+    const sla = new SlaDates(
+      1300,
+    )
+
+    expect(sla.canUpdateClock(timeAsDayjs('2023-07-21T10:19:29.224+00:00', { applyTimezone: false }))).toBeTruthy()
+  })
+
+  it('Should return false seconds from canUpdateClock', () => {
+    const sla = new SlaDates(
+      1300
+    )
+
+    expect(sla.canUpdateClock(timeAsDayjs('2023-07-21T20:19:29.224+00:00', { applyTimezone: false }))).toBeFalsy()
+  })
+
+  it('Should return false in holiday', () => {
+    const sla = new SlaDates(
+      1300
+    )
+
+    expect(sla.canUpdateClock(
+      timeAsDayjs('2023-10-12T10:19:29.224+00:00', { applyTimezone: false })
+    )).toBeFalsy()
+  })
+
+  it('Should return 3600 seconds diffence', () => {
+    const sla = new SlaDates(
+      3600
+    )
+
+    expect(sla.getDifferenceInSeconds(
+      timeAsDayjs('2023-07-19T09:19:29.224+00:00', { applyTimezone: false }),
+      timeAsDayjs('2023-07-19T10:19:29.224+00:00', { applyTimezone: false }),
+      workingHours
+    )).toBe(3600)
+  })
+
+  it('Should return 7200 seconds diffence', () => {
+    const sla = new SlaDates(
+      3600
+    )
+
+    expect(sla.getDifferenceInSeconds(
+      timeAsDayjs('2023-10-12T09:19:29.224+00:00', { applyTimezone: false }),
+      timeAsDayjs('2023-10-12T11:19:29.224+00:00', { applyTimezone: false }),
+      workingHours
+    )).toBe(0)
+  })
+
+  it('Should return 7200 seconds diffence', () => {
+    const sla = new SlaDates(
+      3600
+    )
+
+    expect(sla.getDifferenceInSeconds(
+      timeAsDayjs('2023-07-21T17:00:00.000+00:00', { applyTimezone: false }),
+      timeAsDayjs('2023-07-24T10:00:00.000+00:00', { applyTimezone: false }),
+      workingHours
+    )).toBe(7200)
+  })
+
+  it('Should return 64800 seconds diffence', () => {
+    const sla = new SlaDates(
+      3600
+    )
+
+    expect(sla.getDifferenceInSeconds(
+      timeAsDayjs('2023-07-21T09:00:00.000+00:00', { applyTimezone: false }),
+      timeAsDayjs('2023-07-24T18:00:00.000+00:00', { applyTimezone: false }),
+      workingHours
+    )).toBe(64800)
+  })
+
+  it('Should return 43200 seconds diffence', () => {
+    const sla = new SlaDates(
+      3600
+    )
+
+    expect(sla.getDifferenceInSeconds(
+      timeAsDayjs('2023-07-21T09:00:00.000+00:00', { applyTimezone: false }),
+      timeAsDayjs('2023-07-24T12:00:00.000+00:00', { applyTimezone: false }),
+      workingHours
+    )).toBe(43200)
+  })
+
+  it('Should return 1800 seconds diffence', () => {
+    const sla = new SlaDates(
+      3600
+    )
+
+    expect(sla.getDifferenceInSeconds(
+      timeAsDayjs('2023-07-24T07:00:00.000+00:00', { applyTimezone: false }),
+      timeAsDayjs('2023-07-24T09:30:00.000+00:00', { applyTimezone: false }),
+      workingHours
+    )).toBe(1800)
+  })
+
+  it('Should return 3600 seconds diffence', () => {
+    const sla = new SlaDates(
+      3600
+    )
+
+    expect(sla.getDifferenceInSeconds(
+      timeAsDayjs('2023-07-24T22:00:00.000+00:00', { applyTimezone: false }),
+      timeAsDayjs('2023-07-25T10:00:00.000+00:00', { applyTimezone: false }),
+      workingHours
+    )).toBe(3600)
+  })
+})

package/src/app/Messenger/classes/slaCalculations.ts

@@ -0,0 +1,165 @@
+import dayjs, { ConfigType, Dayjs } from 'dayjs'
+import dayjsBR from 'dayjs/locale/pt-br'
+import utc from 'dayjs/plugin/utc'
+import timezone from 'dayjs/plugin/timezone'
+import isToday from 'dayjs/plugin/isToday'
+const serverTz = 'America/Sao_Paulo'
+
+dayjs.extend(utc)
+dayjs.extend(timezone)
+dayjs.extend(isToday)
+dayjs.locale(dayjsBR)
+
+export const timeAsDayjs = (value: ConfigType = new Date(), options?: {server?: boolean, applyTimezone?: boolean}): Dayjs => {
+  const server = options?.server
+  const applyTimezone = options?.applyTimezone
+
+  let timezone = dayjs.tz.guess()
+  if (!(applyTimezone ?? true)) timezone = 'GMT'
+  else if (server ?? false) timezone = serverTz
+
+  return dayjs.tz(value, timezone)
+}
+
+export const time = (value: ConfigType = new Date(), options?: {server?: boolean, applyTimezone?: boolean}): Date => {
+  const server = options?.server
+  const applyTimezone = options?.applyTimezone
+  let aux: Dayjs
+
+  if (!(applyTimezone ?? true)) aux = dayjs.tz(value, 'GMT') // Set applyTimezone to false when timezone is applied incorrectly (usually when working with JSDate and timestamps)
+  else if (server ?? false) aux = dayjs.tz(value, serverTz)
+  else aux = dayjs.tz(value, dayjs.tz.guess())
+
+  return new Date(Date.UTC(aux.year(), aux.month(), aux.date(), aux.hour(), aux.minute(), aux.second(), aux.millisecond()))
+}
+
+export class SlaDates {
+  public seconds: number | null
+
+  constructor (seconds: number) {
+    this.seconds = seconds
+  }
+
+  private holidays = {
+    2023: [
+      '09-07',
+      '10-12',
+      '10-17',
+      '11-02',
+      '11-15',
+      '11-20',
+      '12-25'
+    ]
+  }
+
+  private isWorkingDay (date: Dayjs) {
+    const dayOfWeek = date.day();
+    return dayOfWeek >= 1 && dayOfWeek <= 5 // Monday to Friday (1 to 5)
+  }
+
+  private isWorkingHour (date: Dayjs) {
+    const hour = date.hour()
+    return hour >= 9 && hour <= 18 // Between 9 AM and 5 PM (inclusive)
+  }
+
+  public isWeekendOrHoliday (date: Dayjs | Date | string): boolean {
+    const weekDay = timeAsDayjs(date, { applyTimezone: false }).day()
+    if ([6, 0].includes(weekDay)) return true
+
+    const formatedDate = timeAsDayjs(date).format('MM-DD')
+    const isHollyday = this.holidays[2023].includes(formatedDate)
+    return isHollyday
+  }
+
+  private isHoliday (date: Dayjs) {
+    const formatedDate = timeAsDayjs(date, { applyTimezone: false }).format('MM-DD')
+    const isHollyday = this.holidays[2023].includes(formatedDate)
+    return isHollyday
+  }
+
+  public canUpdateClock (date: Dayjs) {
+    const isWorking = this.isWorkingDay(date) && this.isWorkingHour(date)
+    return !this.isWeekendOrHoliday(date) && isWorking
+  }
+
+  public getDiffInSeconds (startDate: dayjs.Dayjs, endDate: dayjs.Dayjs): number {
+    const diffInSeconds = endDate.diff(startDate, 'second')
+    return diffInSeconds
+  }
+
+  calculateWorkingTime (startDate: Dayjs, endDate: Dayjs, workingHours: { start: number, end: number }) {
+    let current = startDate.clone()
+    let workingTime = 0;
+
+    while (current.isBefore(endDate)) {
+      // Skip weekends (Saturday and Sunday) and Holydays
+
+      if (this.isWorkingDay(current) && !this.isHoliday(current)) {
+        const startOfDay = current.clone().startOf('day').add(workingHours.start, 'hour');
+        const endOfDay = current.clone().startOf('day').add(workingHours.end, 'hour');
+
+        if (current.isBefore(startOfDay)) {
+          // If current time is before the start of working hours, move to the start of working hours
+          current = startOfDay.clone();
+        }
+
+        if (current.isAfter(endOfDay)) {
+
+          current = current.clone().add(1, 'day').startOf('day')
+
+        } else if (endDate.isAfter(endOfDay)) {
+          // If end date is after the end of working hours, add a full working day
+
+          workingTime += Math.abs(endOfDay.clone().diff(current, 'second'));
+          current = current.clone().add(1, 'day').startOf('day').add(workingHours.start, 'hour');
+
+        }  else {
+          // Calculate working time for the last day (end date)
+          workingTime += Math.abs(endDate.clone().diff(current, 'second'));
+
+          break;
+        }
+      } else {
+        // Move to the next day
+        current = current.clone().add(1, 'day').startOf('day')
+      }
+    }
+
+    return workingTime;
+  }
+
+  // Function to calculate the difference in seconds between two dates considering working hours
+  getDifferenceInSeconds (startDate: Dayjs, endDate: Dayjs, workingHours: { start: number, end: number }) {
+
+    if (endDate.isBefore(startDate)) {
+      throw new Error('End date should be after the start date.');
+    }
+
+    const workingTimeInSeconds = this.calculateWorkingTime(startDate, endDate, workingHours);
+    return workingTimeInSeconds
+  }
+
+  static secondsInHours (currentSeconds: number) {
+    const hours = Math.floor(currentSeconds / 3600);
+    const minutes = Math.floor((currentSeconds % 3600) / 60);
+    const seconds = currentSeconds % 60;
+    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+  }
+
+  static getColorsByTime (seconds: number) {
+    const hours = seconds / 3600;
+    if (hours <= 2) {
+      return '#00CF7B'
+    } 
+
+    if (hours >= 2 && hours < 3) {
+      return '#FF9838'
+    }   
+
+    if (hours >= 3 && hours < 4) {
+      return '#DD4E4E'
+    }
+
+    return '#151919'
+  }
+}

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

@@ -0,0 +1,63 @@
+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

@@ -0,0 +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 white;
+      transition: 0.5s;
+    }
+  }
+}

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

@@ -0,0 +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

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

@@ -0,0 +1,64 @@
+.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;
+
+  &__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;
+  }
+
+  &__image {
+    max-width: 700px;
+    max-height: 300px;
+  }
+}

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

@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from 'react'
+import { IImagesContainer } from 'types'
+
+function ImagesContainer ({ file, onClose }: IImagesContainer) {
+  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])
+
+  return (
+    <div className="images-container">
+      <div className="images-container__close">
+        <button 
+          className="images-container__close--icon"
+          onClick={onClose}
+        />
+      </div>
+
+      <div className="images-container__container">
+        <img
+          alt='arquivos enviados pelo chat agx'
+          src={b64}
+          className="images-container__image"
+        />
+      </div>
+    </div>
+  )
+}
+
+export default ImagesContainer

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

@@ -0,0 +1,59 @@
+import useTheme from '../../hooks/useThemes'
+import React, { useCallback, useState } from 'react'
+import { IInconmingMessage } from 'types'
+import MessengerAvatar from '../MessengerAvatar/MessengerAvatar'
+import ReactSimpleImageViewer from '../../../../../node_modules/react-simple-image-viewer'
+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) => {
+    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 && (
+            <div className="messenger__message--file">
+              <img src={file?.location} width={200} alt="imagem na mensagem" onClick={() => openImageViewer(currentImage)}/>
+            </div>
+          )}
+          <p className="messenger__message">{message}</p>
+          <p className="messenger__message--date">{formatDate(date) ?? new Date(date).toString()}</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

@@ -0,0 +1,52 @@
+import React, { ReactNode, CSSProperties } from 'react'
+
+interface IInfiniteScroll {
+  loading: boolean
+  more: boolean
+  fetch: () => void
+  children: ReactNode
+  loadingCover: React.ReactElement
+  root: Element | null
+}
+
+const style: CSSProperties = {
+  width: 25,
+  height: 25,
+  visibility: 'hidden'
+}
+
+function InfiniteScroll({ loading, loadingCover, more, fetch, children, root }: 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: '400px',
+      threshold: .5
+    })
+
+    if (currentElement) {
+      observer.observe(currentElement)
+    }
+
+    return () => {
+      if (currentElement) observer.unobserve(currentElement)
+    }
+
+  }, [infiniteElement])
+
+  return (
+    <>
+      {children}
+      {loading && loadingCover}
+      {(more && !loading) && <div ref={SetInfiniteElement} style={style}></div>}
+    </>
+  )
+}
+
+export default InfiniteScroll