agx-chat-web 1.1.0 → 1.2.1

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

@@ -1,62 +1,62 @@
-import React, { createContext, ReactNode } from 'react'
-
-const defaultThemeVariables = {
-  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: 'var(--secondary-color)',
-  chatInputBorder: '',
-  listItemHover: '',
-  active: '',
-  activeTabBorter: '#25D366',
-  emptyMessagesFontColor: '#000',
-  documentMessagesTextColor: '#fff',
-}
-
-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
+import React, { createContext, ReactNode } from 'react'
+
+const defaultThemeVariables = {
+  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: 'var(--secondary-color)',
+  chatInputBorder: '',
+  listItemHover: '',
+  active: '',
+  activeTabBorter: '#25D366',
+  emptyMessagesFontColor: '#000',
+  documentMessagesTextColor: '#fff',
+}
+
+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/RenderFileIcon/RenderFileIcon.tsx

@@ -1,34 +1,40 @@
-import React from 'react'
-import FileDoc from '../../icons/DOCFileIcon'
-import FilePdf from '../../icons/PDFFileIcon'
-import { useTranslation } from 'react-i18next'
-
-const RenderFileIcon = ({
-  fileType,
-  b64,
-}: {
-  fileType?: string
-  b64?: string
-}) => {
-  const { t } = useTranslation('messengerMessages')
-
-  if (fileType === 'application/pdf') {
-    return <FilePdf width='40' height='40' />
-  } else if (
-    fileType === 'application/msword' ||
-    fileType ===
-      'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
-  ) {
-    return <FileDoc width='40' height='40' />
-  } else {
-    return (
-      <img
-        alt={t('renderFileIcon.altImage')}
-        src={b64}
-        className='images-container__image'
-      />
-    )
-  }
-}
-
-export default RenderFileIcon
+import React from 'react'
+import FileDoc from '../../icons/DOCFileIcon'
+import FilePdf from '../../icons/PDFFileIcon'
+import CSVFileIcon from '../../icons/CSVFileIcon'
+import MP4FileIcon from '../../icons/MP4FileIcon'
+import { useTranslation } from 'react-i18next'
+
+const RenderFileIcon = ({
+  fileType,
+  b64,
+}: {
+  fileType?: string
+  b64?: string
+}) => {
+  const { t } = useTranslation('messengerMessages')
+
+  if (fileType === 'application/pdf') {
+    return <FilePdf width='40' height='40' />
+  } else if (
+    fileType === 'application/msword' ||
+    fileType ===
+      'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+  ) {
+    return <FileDoc width='40' height='40' />
+  } else if (fileType === 'text/csv') {
+    return <CSVFileIcon width='40' height='40' />
+  } else if (fileType === 'video/mp4') {
+    return <MP4FileIcon width='40' height='40' />
+  } else {
+    return (
+      <img
+        alt={t('renderFileIcon.altImage')}
+        src={b64}
+        className='images-container__image'
+      />
+    )
+  }
+}
+
+export default RenderFileIcon

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

@@ -1,45 +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: 10px;
-    background: transparent;
-    margin-left: 1rem;
-    width: 30%;
-  }
-
-  &__option {
-    color: black;
-  }
-
-  &__search {
-    width: 70%;
-    margin-right: 1rem;
-    border-radius: 0 30px 30px 0;
-    padding: 9px;
-    color: var(--secondary-color);
-    border: var(--secondary-color) 1px solid;
-    background: transparent;
-    position: relative;
-
-    &::placeholder {
-      color: var(--secondary-color);
-      opacity: 60%;
-    }
-  }
-
-  &__icon {
-    border: none;
-    background: transparent;
-    position: absolute;
-    right: 2rem;
-    display: flex;
-    cursor: pointer;
-  }
-}
+.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: 10px;
+    background: transparent;
+    margin-left: 1rem;
+    width: 30%;
+  }
+
+  &__option {
+    color: black;
+  }
+
+  &__search {
+    width: 70%;
+    margin-right: 1rem;
+    border-radius: 0 30px 30px 0;
+    padding: 9px;
+    color: var(--secondary-color);
+    border: var(--secondary-color) 1px solid;
+    background: transparent;
+    position: relative;
+
+    &::placeholder {
+      color: var(--secondary-color);
+      opacity: 60%;
+    }
+  }
+
+  &__icon {
+    border: none;
+    background: transparent;
+    position: absolute;
+    right: 2rem;
+    display: flex;
+    cursor: pointer;
+  }
+}

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

@@ -1,77 +1,77 @@
-import SearchIcon from '../../icons/SearchIcon'
-import React, { useState } from 'react'
-import useTheme from '../../hooks/useThemes'
-import { useTranslation } from 'react-i18next'
-
-interface IProps {
-  searchChat: (value: string, key: string) => void
-  searchKeys: { label: string; value: string }[]
-  loadingSearch: boolean
-}
-
-function SearchInput ({ searchChat, searchKeys, loadingSearch }: IProps) {
-  const { t } = useTranslation('messengerList')
-  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={t('searchInput.placeholder')}
-        onChange={onSearch}
-        onKeyDown={handleKeyPress}
-        style={{
-          color: theme.asideFontColor,
-          border: `${theme.asideFontColor} 1px solid`,
-          borderLeft: 0,
-        }}
-      />
-
-      <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
+import SearchIcon from '../../icons/SearchIcon'
+import React, { useState } from 'react'
+import useTheme from '../../hooks/useThemes'
+import { useTranslation } from 'react-i18next'
+
+interface IProps {
+  searchChat: (value: string, key: string) => void
+  searchKeys: { label: string; value: string }[]
+  loadingSearch: boolean
+}
+
+function SearchInput ({ searchChat, searchKeys, loadingSearch }: IProps) {
+  const { t } = useTranslation('messengerList')
+  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={t('searchInput.placeholder')}
+        onChange={onSearch}
+        onKeyDown={handleKeyPress}
+        style={{
+          color: theme.asideFontColor,
+          border: `${theme.asideFontColor} 1px solid`,
+          borderLeft: 0,
+        }}
+      />
+
+      <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

@@ -1,22 +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;
-    }
-  }
-}
+.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

@@ -1,56 +1,56 @@
-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}
-        className='form-select__input'
-        onChange={(e) => onChange(e.target.value)}
-        value={value}
-        style={{
-          backgroundColor: theme.inputBg,
-          color: theme.newChatFormTexts,
-        }}
-      >
-        <option value='' disabled hidden>
-          {placeholder}
-        </option>
-        {options.map((motivo) => (
-          <option key={motivo.value} value={motivo.value}>
-            {motivo.label}
-          </option>
-        ))}
-      </select>
-    </div>
-  )
-}
-
-export default SelectNew
+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}
+        className='form-select__input'
+        onChange={(e) => onChange(e.target.value)}
+        value={value}
+        style={{
+          backgroundColor: theme.inputBg,
+          color: theme.newChatFormTexts,
+        }}
+      >
+        <option value='' disabled hidden>
+          {placeholder}
+        </option>
+        {options.map((motivo) => (
+          <option key={motivo.value} value={motivo.value}>
+            {motivo.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}
+
+export default SelectNew