agx-chat-web 0.4.9

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

@@ -0,0 +1,106 @@
+import TrashIcon from '../../icons/TrashIcon'
+import React, { useMemo } from 'react'
+import useTheme from '../../hooks/useThemes'
+
+interface IProps {
+  fileList: File[]
+  onUpdateFile: (files: File) => void
+  label: string
+  onRemoveFile: (files: File) => void
+}
+
+function InputFile ({ fileList, onUpdateFile, label, onRemoveFile }: IProps) {
+  const { theme } = useTheme()
+
+  const validateFileType = useMemo(() => ( allowedTypes: string[], file?: File) => {
+    if (file?.type) {
+      return allowedTypes.includes(file?.type)
+    }
+    return false
+  }, [])
+
+  
+
+  const onUpload = () => {
+    const input = document.querySelector(".file-input__input") as HTMLElement
+    input?.click()
+  }
+
+
+  const onChange = (e:  React.ChangeEvent<HTMLInputElement>) => {
+    const file = e?.target?.files?.[0]
+
+    const isAllowedType =  validateFileType(['image/png', 'image/jpeg'], file,)
+    if (!isAllowedType) {
+      console.error('Escolha uma imagem de extensão JPG ou PNG')
+      return false
+    }
+
+    if (file) onUpdateFile(file)
+    return true
+  }
+
+  const removeItem = (file: File) => {
+    if (fileList.some((item) => item === file)) {    
+      onRemoveFile(file)
+    }
+
+  }
+
+  return (
+    <>
+      <div className='file-input'>
+        <label style={{ color: theme.newChatFormTexts}} htmlFor="" className='file-input__label'>{label}</label>
+        <div className="file-input__container"
+          style={{
+            backgroundColor: theme.inputBg,
+            color: theme.newChatFormTexts
+          }}>
+          <input
+            className='file-input__input'
+            type="file"
+            id="docpicker"
+            hidden
+            accept=".jpg, .jpeg, .png"
+            onChange={(event) => onChange(event)}
+          />
+          <h4>Escolha o arquivo</h4>
+          <button
+            className='file-input__button'
+            type="button"
+            onClick={onUpload}
+            style={
+              {
+                background: theme?.buttonPrimary,
+                color: theme?.buttonPrimaryText
+              }
+            }
+          >
+          Escolher arquivo
+          </button>
+          <p>São aceitas imagens no formato .png ou .jpg</p>
+        </div>
+      </div>
+      <div>
+        {fileList && fileList.map((item) => {
+          return <div className="file-input__list" key={item.name}
+            style={{
+              backgroundColor: theme.inputBg,
+              color: theme.newChatFormTexts
+            }}
+          >
+            {item.name}
+            <button 
+              className="file-input__delete"
+              onClick={() => removeItem(item)}
+            >
+              <TrashIcon color={theme.newChatFormDeleteFileButton || 'red'} />
+            </button>
+          </div>
+        })}
+      </div>
+    </>
+  )
+}
+
+export default InputFile

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

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

package/src/app/Messenger/components/MessageBallon/MessageBalloon.tsx

@@ -0,0 +1,88 @@
+import React from 'react'
+import { Iimages, IMessages } from "types"
+import IncomingMessage from "../IncomingMessage/IncomingMessage"
+import SenderMessages from "../SenderMessages/SenderMessages"
+import SystemMessage from '../SystemMessage/SystemMessage'
+
+function MessageBalloon({ item, creatorId, formatDate, id }: {
+  item: IMessages,
+  creatorId?: string,
+  formatDate: (date: string | Date) => string | undefined,
+  id: string
+}) {
+  if (item.isSystemMessage) {
+    return (
+      <SystemMessage
+        formatDate={formatDate}
+        date={item.createdAt}
+        message={item.content}
+        id={item.senderId}
+        user={{ name: 'System' }}
+      />
+    )
+  }
+
+  if (item.sender.uniqueCode && !item.isSystemMessage && (item.sender.uniqueCode === creatorId)) {
+    return (
+      <>
+        <SenderMessages
+          id={id}
+          formatDate={formatDate}
+          message={item.content}
+          date={item.createdAt}
+          read={item.everybodyHasRead}
+          hasFile={item.hasFile}
+          file={item.file}
+        />
+        {item.images && item.images.map((image: Iimages, index: number) =>
+          <SenderMessages
+            key={image.key}
+            id={`${id}image-${index}`}
+            formatDate={formatDate}
+            date={item.createdAt}
+            file={image}
+            message=''
+            hasFile={true}
+            read={item.everybodyHasRead}
+          />
+        )}
+      </>
+    )
+  }
+
+  return (
+    <>
+      <IncomingMessage
+        id={id}
+        formatDate={formatDate}
+        date={item.createdAt}
+        message={item.content}
+        hasFile={item.hasFile}
+        isSystemMessage={item.isSystemMessage}
+        file={item.file}
+        user={{
+          avatar: item.sender?.image,
+          name: item.sender.username
+        }}
+      />
+
+      {item.images && item.images.map((image: Iimages, index: number) =>
+        <IncomingMessage
+          key={image.key}
+          id={`${id}image-${index}`}
+          formatDate={formatDate}
+          date={item.createdAt}
+          file={image}
+          message=''
+          hasFile={true}
+          user={{
+            avatar: item.sender?.image,
+            name: item.sender.username
+          }}
+        />
+      )}
+    </>
+  )
+}
+
+export default MessageBalloon

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

@@ -0,0 +1,21 @@
+import useTheme from '../../hooks/useThemes'
+import React from 'react'
+import { IMesssengerAvatar } from 'types'
+
+function MessengerAvatar({ image, children, className = '' }: IMesssengerAvatar) {
+  const { theme } = useTheme()
+  return (
+    <figure
+      style={{
+        background: theme.messengerIncomerColor
+      }}
+      className={`${className} messenger__aside-list-item--avatar`}
+    >
+      {image
+        ? (<img loading="lazy" alt='imagem de um avatar de usuário' src={image} />)
+        : children}
+    </figure>
+  )
+}
+
+export default MessengerAvatar

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

@@ -0,0 +1,58 @@
+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',
+  messengerIncomerColor: "#707070",
+  messengerSystemColor: "#2A313A",
+  borderColor: '#AAAAAA',
+  inputBg:'white',
+  chatInputBorder: '',
+  listItemHover: '',
+  active: '',
+  activeTabBorter: '#25D366',
+  emptyMessagesFontColor: '#000'
+}
+
+type ThemeVariables = typeof defaultThemeVariables
+
+type ThemeContextContent = {
+  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) => {
+  const config = {
+    theme
+  }
+
+  return (
+    <MessageThemeContext.Provider value={config}>
+      {children}
+    </MessageThemeContext.Provider>
+  )
+}
+
+export default MessageThemeWrapper

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

@@ -0,0 +1,45 @@
+.input-search {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin: 1rem 0;
+  position: relative;
+
+  &__select {
+    border-radius: 30px 0 0 30px;
+    padding: 11px;
+    background: transparent;
+    margin-left: 1rem;
+    width: 30%;
+  }
+
+  &__option {
+    color: black;
+  }
+
+  &__search {
+    width: 70%;
+    margin-right: 1rem;
+    border-radius: 0 30px 30px 0;
+    padding: 10px;
+    color: white;
+    border: white 1px solid;
+    background: transparent;
+    position: relative;
+
+    &::placeholder {
+      color: white;
+      opacity: 60%;
+    }
+  }
+
+  &__icon {
+    border: none;
+    background: transparent;
+    position: absolute;
+    right: 2rem;
+    display: flex;
+    cursor: pointer;
+  }
+}

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

@@ -0,0 +1,68 @@
+import SearchIcon from '../../icons/SearchIcon'
+import React, { useState } from 'react'
+import useTheme from '../../hooks/useThemes'
+
+interface IProps {
+  searchChat: (value: string, key: string)=> void
+  searchKeys:{label: string, value: string}[]
+  loadingSearch: boolean
+}
+
+
+function SearchInput({searchChat, searchKeys, loadingSearch}: IProps) {
+  const [searchKey, setSearchKey] = useState<string>(searchKeys[0].value)
+  const [searchValue, setSearchValue] = useState<string>('')
+  const {theme} = useTheme()
+
+  const onSearch = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchValue(event.target.value)
+  }
+
+  const handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      searchChat(searchValue, searchKey)
+    }
+  };
+
+  return (
+    <div className="input-search" >
+      <select className="input-search__select" onChange={(e)=> setSearchKey(e.target.value)}
+        style={{
+          color: theme.asideFontColor,
+          border: `${theme.asideFontColor} 1px solid`
+        }}
+      
+      >
+        {searchKeys.map((item, index)=> 
+          <option className="input-search__option" key={index} value={item.value}>
+            {item.label}
+          </option>
+        )}
+      </select>
+
+      <input 
+        className='input-search__search'
+        placeholder='Pesquisar conversa...'
+        onChange={onSearch}
+        onKeyDown={handleKeyPress}
+        style={{
+          color: theme.asideFontColor,
+          border: `${theme.asideFontColor} 1px solid`
+        }}
+      />
+
+      <button 
+        className="input-search__icon" 
+        onClick={() => searchChat(searchValue, searchKey)}
+      >
+        {loadingSearch ? (
+          <div className="messenger__messages-loading">
+            <div className="messenger__messages-loading--loader" />
+          </div>
+        ) : <SearchIcon />} 
+      </button>
+    </div>
+  )
+}
+
+export default SearchInput

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

@@ -0,0 +1,22 @@
+.form-select {
+  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: 8px 8px;
+    width: 100%;
+
+    &:focus {
+      outline: #2684FF 2px solid !important;
+    }
+  }
+}

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

@@ -0,0 +1,41 @@
+import React from 'react'
+import useTheme from '../../hooks/useThemes'
+interface IProps {
+  options: {
+    label: string,
+    value: string
+  }[],
+  label: string
+  onChange: (value: string) => void
+  name: string
+  placeholder: string
+  value: string
+}
+
+function SelectNew({ options, name, placeholder, label, onChange, value  }: IProps) {
+  const { theme } = useTheme()
+  return (
+    <div className="form-select">
+      <label htmlFor={name} className="form-select__label"
+        style={{ color: theme.newChatFormTexts}}
+      >{label}</label >
+      <select 
+        name={name}
+        placeholder={placeholder}
+        className="form-select__input"
+        onChange={(e) => onChange(e.target.value)}
+        value={value}
+        style={{
+          backgroundColor: theme.inputBg,
+          color: theme.newChatFormTexts
+        }}
+      >
+        {options.map(motivo =>
+          <option key={motivo.value} value={motivo.value}>{motivo.label}</option>
+        )}
+      </select>
+    </div>
+  )
+}
+
+export default SelectNew

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

@@ -0,0 +1,52 @@
+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) {
+  const [currentImage, setCurrentImage] = useState(0);
+  const [isViewerOpen, setIsViewerOpen] = useState(false);
+  const { theme } = useTheme()
+
+  const openImageViewer = useCallback((index) => {
+    setCurrentImage(index);
+    setIsViewerOpen(true);
+  }, []);
+
+  const closeImageViewer = () => {
+    setCurrentImage(0);
+    setIsViewerOpen(false);
+  };
+  
+  return (
+    <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)} />
+            </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'} />
+          </div>
+        </span>
+      </div>
+      {file && 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

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

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

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