\r\n \r\n {!anchorEl? \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\nexport default SmallMenuBar","import { makeStyles, Typography } from '@material-ui/core'\r\nimport Avatar from '@mui/material/Avatar';\r\nimport { slicedWord, firstLetter,prodAwsS3 } from '../../../../../../helpers';\r\nimport { TChat } from '../../../../../../typescript/redux/chats/types';\r\n\r\nconst useStyles = makeStyles({\r\n stackItem: {\r\n display: 'flex',\r\n flexDirection: 'column',\r\n justifyContent: 'center',\r\n alignContent: 'center',\r\n alignItems: 'center',\r\n padding:5,\r\n borderRadius: 5,\r\n cursor:'pointer',\r\n '&:hover': {\r\n background: '#eeeded'\r\n }\r\n },\r\n titleName: {\r\n color: '#575757',\r\n fontSize: 16,\r\n paddingTop:5\r\n }\r\n})\r\n\r\ninterface IRecentItem {\r\n handleListItemClick: (companionId: string) => void,\r\n chat:TChat,\r\n}\r\n\r\nconst RecentItem = ({handleListItemClick,chat}:IRecentItem) => {\r\n const classes = useStyles()\r\n const { name, lastName,color,avatarUrl,companionId } = chat\r\n \r\n \r\n\r\nreturn (\r\n handleListItemClick(companionId)} className={classes.stackItem}>\r\n \r\n {`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n {`${firstLetter(name)}${slicedWord(name, 8, 1)}`} \r\n
\r\n )\r\n}\r\n\r\nexport default RecentItem","import { makeStyles,Typography } from '@material-ui/core'\r\nimport ListItemButton from '@mui/material/ListItemButton';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport ListItemText from '@mui/material/ListItemText';\r\nimport ListItemIcon from '@mui/material/ListItemIcon';\r\n\r\nimport { TChat } from '../../../../../../typescript/redux/chats/types';\r\nimport { firstLetter,slicedWord,timeStampEU,prodAwsS3 } from '../../../../../../helpers';\r\n\r\nconst useStyles = makeStyles({\r\n listItemInnerText: {\r\n display: 'flex',\r\n alignContent: 'center',\r\n alignItems: 'center',\r\n flexWrap: 'nowrap',\r\n },\r\n listItem_iconAvatar: {\r\n marginRight:10\r\n },\r\n listItem_iconRight: {\r\n marginRight: 10,\r\n },\r\n listItem_icon_time: {\r\n fontSize: 12,\r\n marginLeft: 5,\r\n paddingBottom:25,\r\n color: '#1b1b1b'\r\n },\r\n})\r\n\r\ninterface IChatItem {\r\n chat: TChat,\r\n handleListItemClick: (companionId: string) => void,\r\n}\r\n\r\nconst ChatItem = ({chat,handleListItemClick}:IChatItem) => {\r\n const classes = useStyles()\r\n const {name,lastName,avatarUrl,color,companionId,lastMessage,lastMessageCreatedAt,createdAt} = chat\r\n\r\n return (\r\n - \r\n {filteredAndSortedChats.map((chat) =>\r\n
- \r\n {filteredAndSortedMessages.map(({ createdAt, fullType,_id,companionId,name,avatarUrl,lastName,color }) =>\r\n
\r\n handleScrollToTheMessage(_id,companionId)}\r\n alignItems=\"flex-start\" className={classes.listItem}>\r\n \r\n \r\n {`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n \r\n \r\n \r\n
)}\r\n {\r\n handleCloseWatch(e)\r\n handleScrollToTheMessage(id,companionId)\r\n }} id='overlay' className={classes.overlay}>\r\n
:\r\n \r\n
\r\n \r\n \r\n \r\n {!url&&`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n \r\n
\r\n \r\n handleDownload(url, fullType)}\r\n className={classes.downloadIcon} fontSize='large' />\r\n
\r\n \r\n 
\r\n
\r\n - \r\n {filteredAndSortedMessages.map(({ message, createdAt, lastName, name, color, avatarUrl,_id,companionId }) =>\r\n
\r\n handleScrollToTheMessage(_id,companionId)}\r\n alignItems=\"flex-start\" className={classes.listItem}>\r\n \r\n \r\n {`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n \r\n \r\n
)}\r\n - \r\n {filteredAndSortedMessages.map(({ createdAt, fullType,_id,companionId,name,avatarUrl,lastName,color }) =>\r\n
\r\n handleScrollToTheMessage(_id,companionId)}\r\n alignItems=\"flex-start\" className={classes.listItem}>\r\n \r\n \r\n {`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n \r\n \r\n \r\n
)}\r\n - \r\n {filteredAndSortedMessages.map(({ createdAt, fullType,_id,companionId,name,avatarUrl,lastName,color }) =>\r\n
\r\n handleScrollToTheMessage(_id,companionId)}\r\n key={createdAt} alignItems=\"flex-start\" className={classes.listItem}>\r\n \r\n \r\n {`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n \r\n \r\n
)}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default DeleteModal","import { makeStyles,Typography } from '@material-ui/core'\r\nimport { useState } from 'react';\r\nimport { styled } from '@mui/material/styles';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport NotificationsNoneIcon from '@mui/icons-material/NotificationsNone';\r\nimport VolumeOffIcon from '@mui/icons-material/VolumeOff';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\nimport ListItemButton from '@mui/material/ListItemButton';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport ListItemText from '@mui/material/ListItemText';\r\nimport ListItemIcon from '@mui/material/ListItemIcon';\r\nimport Badge from '@mui/material/Badge';\r\nimport DoneAllIcon from '@mui/icons-material/DoneAll';\r\nimport DoneIcon from '@mui/icons-material/Done';\r\nimport PushPinIcon from '@mui/icons-material/PushPin';\r\nimport CloseIcon from '@mui/icons-material/Close';\r\n\r\nimport { muteChat,pinChat } from '../../../../../api-data';\r\nimport { TChat } from '../../../../../typescript/redux/chats/types';\r\nimport { firstLetter, slicedWord, timeStampEU,prodAwsS3 } from '../../../../../helpers';\r\nimport DeleteModal from './DeleteModal';\r\n\r\nconst StyledMenu = styled((props:any) => (\r\n \r\n
\r\n \r\n \r\n {`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n
\r\n Delete chat
\r\n{`Are you sure you want to delete the\r\n chat with ${`${firstLetter(name)}${slicedWord(name, 15, 1)} \r\n ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}?`}
\r\n \r\n \r\n\r\n {watched &&\r\n {timeStampEU(lastMessageCreatedAt?lastMessageCreatedAt:createdAt)}\r\n \r\n
\r\n \r\n {pinned && }\r\n {lastMessage && total > seen &&\r\n } \r\n
\r\n - \r\n {sortedChats.map((el) =>
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nexport default MenuBar","import { makeStyles } from '@material-ui/core'\r\nimport { useState } from 'react';\r\nimport { useDispatch } from 'react-redux';\r\nimport { styled } from '@mui/material/styles';\r\nimport Button from '@mui/material/Button';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\nimport ListItemButton from '@mui/material/ListItemButton';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport ListItemText from '@mui/material/ListItemText';\r\nimport ListItemIcon from '@mui/material/ListItemIcon';\r\nimport ContentCopyIcon from '@mui/icons-material/ContentCopy';\r\nimport PushPinIcon from '@mui/icons-material/PushPin';\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\r\nimport {removeContact,pinContact } from '../../../../../api-data';\r\nimport { actionRightIsOpen } from '../../../../../redux/control/action';\r\nimport { TContact } from '../../../../../typescript/redux/contacts/types';\r\nimport { TRightIsOpen } from '../../../../../typescript/redux/control/types';\r\nimport { firstLetter,slicedWord,timeStampEU,copied,prodAwsS3 } from '../../../../../helpers';\r\n\r\nconst StyledMenu = styled((props:any) => (\r\n \r\n handleListItemClick(companionId)}\r\n onContextMenu={(e) => handleContextMenu(e)}\r\n >\r\n \r\n \r\n {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n \r\n \r\n handleClose('copy')} text={number}>\r\n \r\n \r\n \r\n \r\n \r\n {modal&&
\r\n );\r\n}\r\nexport default ContactItem","import { createSelector } from 'reselect';\r\nimport { IState } from '../../../typescript/redux/interfaces'\r\n\r\nconst getTotal = (state: IState) => state.contacts.total;\r\nconst getLimit = (state:IState) => state.contacts.limit;\r\nconst getPage = (state: IState) => state.contacts.page;\r\nconst getContacts = (state: IState) => state.contacts.contacts;\r\nconst getState = (state: IState) => state.contacts; \r\n\r\nconst getContactsMemo = createSelector([getContacts], state => state);\r\nconst getStateMemo = createSelector([getState], state => state);\r\n\r\nexport { getTotal,getLimit,getPage,getContacts,getState,getContactsMemo,getStateMemo };\r\n","import {\r\n actionGetContactsSuccess,\r\n actionGetContactsReject\r\n} from '../action';\r\nimport { addContact,getContacts} from '../../../api-data';\r\nimport { IContactsState } from '../../../typescript/redux/contacts/interfaces'\r\n\r\nconst asyncGetContacts = () => async (dispatch:any) => {\r\n try {\r\n const data = await getContacts\r\n
}\r\n \r\n
\r\n \r\n \r\n {`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n
\r\n Delete contact
\r\n{`Are you sure you want to delete contact\r\n ${`${firstLetter(name)}${slicedWord(name, 15, 1)}\r\n ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}?`}
\r\n \r\n \r\n\r\n \r\n Add new contact\r\n \r\n ADD\r\n }\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default AddContact;","import { useState } from 'react';\r\nimport { useDispatch } from 'react-redux';\r\nimport { styled } from '@mui/material/styles';\r\nimport IconButton from '@mui/material/IconButton';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport LogoutIcon from '@mui/icons-material/Logout';\r\nimport MoreVertIcon from '@mui/icons-material/MoreVert';\r\n\r\nimport { asyncLogout } from '../../../../../../redux/authorization/operations';\r\n\r\nconst StyledMenu = styled((props:any) => (\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default DeleteModal","import { makeStyles } from '@material-ui/core'\r\nimport { useSelector } from 'react-redux';\r\nimport { useState } from 'react';\r\nimport { getAuthorizationState } from '../../../../../redux/authorization/selector'\r\nimport { Carousel } from 'react-responsive-carousel';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport { firstLetter, slicedWord, timeStampEU, prodAwsS3 } from '../../../../../helpers'\r\nimport transparentPic from './../../../../../img/transparentPic.png'\r\nimport DeleteModal from './DeleteModal';\r\n\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n width: '100%',\r\n backgroundColor: '#ffffff',\r\n position:'relative',\r\n },\r\n nameTitle: {\r\n position:'absolute',\r\n color: '#ffffff',\r\n backgroundColor: 'rgb(0,0,0)',\r\n borderRadius: 10,\r\n padding:8,\r\n fontSize: 18,\r\n zIndex:10,\r\n top: '6%',\r\n left: '50%', \r\n marginLeft: '-45%',\r\n opacity: 0.7,\r\n transition: 'opacity .35s ease-in-out'\r\n },\r\n timeTitle: {\r\n position:'absolute',\r\n color: '#ffffff',\r\n backgroundColor: 'rgb(0,0,0)',\r\n borderRadius: 10,\r\n padding:4,\r\n fontSize: 15,\r\n top: '1%',\r\n left: '50%', \r\n marginLeft: '-45%',\r\n opacity: 0.7,\r\n transition: 'opacity .35s ease-in-out'\r\n },\r\n countryTitle: {\r\n position:'absolute',\r\n color: '#ffffff',\r\n backgroundColor: 'rgb(0,0,0)',\r\n borderRadius: 10,\r\n padding:4,\r\n fontSize: 15,\r\n top: '13%',\r\n left: '50%', \r\n marginLeft: '-45%',\r\n opacity: 0.7,\r\n transition: 'opacity .35s ease-in-out'\r\n },\r\n credentialsTitle: {\r\n position:'absolute',\r\n color: '#ffffff',\r\n fontSize: 100,\r\n top: '30%',\r\n left: '38%',\r\n },\r\n credentialsLowTitle: {\r\n position:'absolute',\r\n color: '#ffffff',\r\n fontSize: 25,\r\n top: '90%',\r\n left: '9%',\r\n }, \r\n iconDeleteWrapper: {\r\n position: 'absolute',\r\n top: '1%',\r\n right: '9%',\r\n },\r\n iconDelete: {\r\n '&:hover': {\r\n opacity: 1,\r\n color: '#fa0000',\r\n animation: `$shake 0.5s`,\r\n }\r\n },\r\n '@keyframes shake': {\r\n '0%': { transform: 'translate(0.5px, 0.5px) rotate(0deg)'},\r\n '10%': { transform: 'translate(-0.5px, -1px) rotate(-1deg)'},\r\n '20%': { transform: 'translate(-1.5px, 0px) rotate(1deg)'},\r\n '30%': { transform: 'translate(1.5px, 1px) rotate(0deg)'},\r\n '40%': { transform: 'translate(0.5px, -0.5px) rotate(1deg)'},\r\n '50%': { transform: 'translate(-0.5px, 1px) rotate(-1deg)'},\r\n '60%': { transform: 'translate(-1.5px, 0.5px) rotate(0deg)'},\r\n '70%': { transform: 'translate(1.5px, 0.5px) rotate(-1deg)'},\r\n '80%': { transform: 'translate(-0.5px, -0.5px) rotate(1deg)'},\r\n '90%': { transform: 'translate(0.5px, 1px) rotate(0deg)'},\r\n '100%': { transform: 'translate(0.5px, -1px) rotate(-1deg)'},\r\n }, \r\n})\r\n\r\nconst SettingsPicture = () => {\r\n const classes = useStyles()\r\n const { name, lastName, avatarsArr, online,createdAt,color,country } = useSelector(getAuthorizationState)\r\n const [modal, setModal] = useState\r\n
\r\n \r\n
\r\n Delete image
\r\n{`Are you sure you want to delete the Image?`}
\r\n \r\n \r\n\r\n {modal &&\r\n }\r\n setIndex(i)} selectedItem={index}>\r\n {isDefault ?\r\n avatarsArr.map(({ avatarUrl, updatedAt }) =>\r\n \r\n {`${firstLetter(name)}${slicedWord(name, 15, 1)}\r\n ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}\r\n {online === 'true' ? 'online' : `last seen ${timeStampEU(online)}`}\r\n {country}\r\n {!isDefault&&{`${firstLetter(name)}${firstLetter(lastName)}`}}\r\n {!isDefault&&{`${firstLetter(name)}${firstLetter(lastName)}`}} \r\n {avatarsArr.length > 0 &&\r\n
\r\n )\r\n}\r\n\r\nexport default SettingsPicture","import { useSelector } from 'react-redux';\r\nimport Paper from '@mui/material/Paper';\r\nimport MenuList from '@mui/material/MenuList';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport ListItemText from '@mui/material/ListItemText';\r\nimport ListItemIcon from '@mui/material/ListItemIcon';\r\nimport PhoneIcon from '@mui/icons-material/Phone';\r\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\r\nimport { makeStyles } from '@material-ui/core'\r\n\r\nimport { getNumber } from '../../../../../redux/authorization/selector'\r\nimport { copied} from '../../../../../helpers';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n width: '100%',\r\n backgroundColor: '#ffffff', \r\n },\r\n})\r\n\r\n\r\nconst SettingsMenu = () => {\r\n const classes = useStyles()\r\n const number = useSelector(getNumber)\r\n\r\n return (\r\n \r\n 
\r\n
) :\r\n [\r\n {timeStampEU(updatedAt)}
\r\n\r\n 
\r\n
\r\n ]\r\n }\r\n {timeStampEU(createdAt)}
\r\n\r\n \r\n \r\n
}\r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nexport default SettingsBar","import Stack from '@mui/material/Stack';\r\nimport IconButton from '@mui/material/IconButton';\r\nimport ArrowBackIcon from '@mui/icons-material/ArrowBack';\r\nimport { makeStyles, Typography } from '@material-ui/core'\r\nimport { useDispatch } from 'react-redux';\r\nimport { actionLeftIsOpen } from '../../../../../redux/control/action';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n paddingLeft: 10,\r\n height:'7vh',\r\n width: '100%',\r\n display: 'flex',\r\n alignContent: 'center',\r\n alignItems: 'center',\r\n backgroundColor: '#ffffff',\r\n },\r\n iconArrow: {\r\n '&:hover': {\r\n transform: 'rotate(360deg)',\r\n transition: 'all 250ms ease-out ',\r\n }\r\n },\r\n})\r\n\r\n\r\nconst ToolBar = () => {\r\n const classes = useStyles()\r\n const dispatch = useDispatch()\r\n\r\n return (\r\n \r\n
\r\n )\r\n};\r\n\r\nexport default EditList;","import { makeStyles} from '@material-ui/core'\r\nimport Avatar from '@mui/material/Avatar';\r\nimport DoneIcon from '@mui/icons-material/Done';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n position: 'absolute',\r\n content: '',\r\n top: '92vh',\r\n right:20,\r\n },\r\n avatarArrow: {\r\n cursor: 'pointer',\r\n '&:hover': {\r\n backgroundColor: 'rgb(62, 149, 231)'\r\n }\r\n },\r\n})\r\n\r\nconst SubmitBtn = ({handleSubmit}:{handleSubmit:() => void}) => {\r\n const classes = useStyles() \r\n\r\n return (\r\n \r\n \r\n \r\n {`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n \r\n
\r\n {camera &&\r\n \r\n
\r\n \r\n \r\n {({ getScreenshot }) => <>\r\n {\r\n setSelfie(getScreenshot())\r\n setOpenBtn(true)\r\n !silentMode&&playNotification(`${prodBaseURL}/cameraCapture.mp3`)\r\n }}\r\n className={classes.capturePhoto} fontSize='large' style={{marginBottom:30}} />\r\n \r\n }\r\n \r\n
}\r\n \r\n \r\n \r\n
\r\n )\r\n};\r\n\r\nexport default SubmitBtn;","import { makeStyles } from '@material-ui/core'\r\nimport { useState,useEffect } from 'react';\r\nimport { useSelector,useDispatch } from 'react-redux';\r\nimport ToolBar from './ToolBar'\r\nimport EditList from './EditList'\r\nimport SubmitBtn from './SubmitBtn';\r\nimport { getAuthorizationState } from '../../../../redux/authorization/selector'\r\nimport { asyncCurrentUser } from '../../../../redux/authorization/operations';\r\nimport { updateCredentials, updateUserAvatar } from '../../../../api-data';\r\nimport { refreshAppTime } from '../../../../helpers';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n width: '100%',\r\n height: '100%',\r\n backgroundColor: '#f3f2f2',\r\n position:'relative'\r\n }\r\n})\r\n\r\n\r\n\r\nconst EditBar= () => {\r\n const classes = useStyles()\r\n const dispatch = useDispatch()\r\n const user = useSelector(getAuthorizationState)\r\n const [name, setName] = useState\r\n {openBtn&&}\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default EditBar","import { useState, useRef, useEffect } from 'react';\r\nimport { useSelector,useDispatch } from 'react-redux';\r\nimport { createPortal } from 'react-dom';\r\n\r\nimport Grid from '@mui/material/Grid'\r\nimport SmallMenuBar from './SmallMenuBar'\r\nimport SearchLists from './SearchLists';\r\nimport SearchBar from './SearchBar'\r\nimport ChatsList from './ChatsList'\r\nimport MenuBar from './MenuBar'\r\nimport ContactsList from './ContactsList'\r\nimport AddContact from './AddContact'\r\nimport SettingsBar from './SettingsBar';\r\nimport EditBar from './EditBar';\r\nimport { getAuthorizationState } from '../../../redux/authorization/selector';\r\nimport { getLeftIsOpen } from '../../../redux/control/selector';\r\nimport { actionLeftIsOpen } from '../../../redux/control/action';\r\n\r\nconst LeftBar = ({chatDivRef}:{chatDivRef: any | null}) => {\r\n const dispatch = useDispatch()\r\n const { sort, nightMode,silentMode } = useSelector(getAuthorizationState)\r\n const leftIsOpen = useSelector(getLeftIsOpen)\r\n const [modal, setModal] = useState\r\n
\r\n )\r\n}\r\n\r\nexport default DeleteModal","import Stack from '@mui/material/Stack';\r\nimport IconButton from '@mui/material/IconButton';\r\nimport SearchIcon from '@mui/icons-material/Search';\r\nimport PhoneIcon from '@mui/icons-material/Phone';\r\nimport { makeStyles } from '@material-ui/core'\r\nimport { useDispatch } from 'react-redux';\r\nimport { useState } from 'react';\r\n\r\nimport MenuList from './MenuList'\r\nimport DeleteModal from './DeleteModal';\r\nimport { actionRightIsOpen } from '../../../../../redux/control/action'\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n marginLeft: 20,\r\n display: 'flex',\r\n alignContent: 'center',\r\n alignItems:'center'\r\n }, \r\n})\r\n\r\ninterface IButtons {\r\n setIsSomeSelected: React.Dispatch\r\n
\r\n \r\n \r\n {`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n
\r\n Delete chat
\r\n{`Are you sure you want to delete the\r\n chat with ${`${firstLetter(name)}${slicedWord(name, 15, 1)} \r\n ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}?`}
\r\n \r\n \r\n- \r\n {pinnedMessagesMemo.map(({ _id }) =>\r\n )}\r\n
- \r\n \r\n
\r\n
} \r\n \r\n
\r\n Telegram
\r\nWould you like to unpin this message?
\r\n \r\n \r\n\r\n \r\n \r\n \r\n {`${pinnedMessagesMemo.length} pinned messages`}\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
} \r\n \r\n
\r\n Delete messages
\r\nAre you sure you want to delete messages?
\r\n \r\n \r\n\r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nexport default ArrowBack","import { makeStyles } from '@material-ui/core'\r\nimport React from 'react';\r\nimport { useDropzone } from 'react-dropzone';\r\nimport { useEffect } from 'react';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n width: '100%',\r\n position:'relative',\r\n },\r\n dropZone: {\r\n width: '100%',\r\n display: 'flex',\r\n position:'relative',\r\n height: 20,\r\n zIndex:10\r\n },\r\n})\r\n\r\ninterface IUploadFile {\r\n children:React.ReactNode,\r\n setFile: any,\r\n setValue: any,\r\n accept: string,\r\n setType: any,\r\n prevType: string | undefined\r\n}\r\n \r\nconst UploadFile = ({children,setFile,setValue,accept,setType,prevType}:IUploadFile) => {\r\n const classes = useStyles()\r\n const onFileDialogCancel = () => setType(prevType)\r\n const { getRootProps, getInputProps, acceptedFiles } = useDropzone({\r\n noDrag: true,accept,onFileDialogCancel});\r\n useEffect(() => {\r\n if (acceptedFiles.slice(-1)[0]) {\r\n setValue('')\r\n setFile(acceptedFiles.slice(-1)[0])\r\n }\r\n }, [setFile,setValue,acceptedFiles])\r\n\r\n return (\r\n \r\n {children}\r\n
\r\n );\r\n}\r\n\r\nexport default UploadFile","import MenuList from '@mui/material/MenuList';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport ListItemText from '@mui/material/ListItemText';\r\nimport ListItemIcon from '@mui/material/ListItemIcon';\r\nimport InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';\r\nimport { makeStyles } from '@material-ui/core'\r\nimport { usePrevious } from '../../../../../../hooks';\r\nimport UploadFile from './UploadFile'\r\n\r\nconst useStyles = makeStyles({\r\n list: {\r\n background: '#fdfdfd',\r\n },\r\n listIcon: {\r\n position: 'absolute',\r\n left:0\r\n },\r\n listText: {\r\n position: 'absolute',\r\n left:40\r\n }, \r\n})\r\n\r\ninterface IFilesMenu {\r\n setIsOpenMenu: any,\r\n setFile: any,\r\n setValue: any,\r\n setType: any,\r\n type: string\r\n}\r\nconst FilesMenu = ({setIsOpenMenu,setFile,setValue,setType,type}:IFilesMenu) => {\r\n const classes = useStyles()\r\n const prevType = usePrevious(type);\r\n const handleClose = (typeFile:string) => {\r\n setIsOpenMenu(false)\r\n setType(typeFile)\r\n }\r\n return (\r\n \r\n \r\n
\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default ReplyBar","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport { useDispatch } from \"react-redux\";\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nimport ReplyIcon from '@mui/icons-material/Reply';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport ListItemText from '@mui/material/ListItemText';\r\nimport LibraryMusicIcon from '@mui/icons-material/LibraryMusic';\r\nimport InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';\r\nimport ImageIcon from '@mui/icons-material/Image';\r\nimport ContentCopyIcon from '@mui/icons-material/ContentCopy';\r\nimport VideoLibraryIcon from '@mui/icons-material/VideoLibrary';\r\n\r\nimport { firstLetter,slicedWord } from \"../../../../../../helpers\";\r\nimport { TMessage } from \"../../../../../../typescript/redux/messages/types\";\r\nimport { asyncGetChatById } from '../../../../../../redux/chat/operations'\r\nimport { actionRightIsOpen, actionOpenPinned } from '../../../../../../redux/control/action'\r\n\r\nconst useStyles = makeStyles({ \r\n forwardTop : {\r\n position: 'absolute',\r\n left: 0,\r\n top: '-7vh',\r\n height: '6vh',\r\n width: '100%',\r\n borderRadius: 8,\r\n display: 'flex',\r\n flexWrap: 'nowrap',\r\n alignContent: 'center',\r\n alignItems: 'center',\r\n color: '#6b6b6b',\r\n border:'solid 2px rgb(41, 139, 231)',\r\n backgroundColor: '#ffffff',\r\n padding: '0px 5px',\r\n zIndex:2,\r\n },\r\n forwardIconClose: {\r\n cursor: 'pointer',\r\n marginLeft: 5,\r\n marginRight: 5,\r\n '&:hover': {\r\n color:'#f02a2a',\r\n transform: 'rotate(180deg)',\r\n transition: 'all 250ms ease-out ',\r\n }\r\n },\r\n forwardListWrapper: {\r\n width: '100%',\r\n },\r\n forwardColumn: {\r\n height: '80%',\r\n width: 2,\r\n backgroundColor: 'rgb(41, 139, 231)',\r\n marginRight:10\r\n },\r\n folderIcon: {\r\n color: '#54b0fc',\r\n }, \r\n});\r\n\r\ninterface IForwardBar {\r\n companionId: string,\r\n isForward:TMessage,\r\n handleCloseForward: () => void,\r\n handleScrollToTheMessage: (_id: string) => void,\r\n setIsForward: React.Dispatch- \r\n \r\n
\r\n
\r\n )\r\n}\r\n\r\nexport default ForwardBar","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nimport EditIcon from '@mui/icons-material/Edit';\r\nimport ListItemText from '@mui/material/ListItemText';\r\n\r\nimport { TMessage } from \"../../../../../../typescript/redux/messages/types\";\r\n\r\nconst useStyles = makeStyles({ \r\n editTop : {\r\n position: 'absolute',\r\n left: 0,\r\n top: '-7vh',\r\n height: '6vh',\r\n width: '100%',\r\n borderRadius: 8,\r\n display: 'flex',\r\n flexWrap: 'nowrap',\r\n alignContent: 'center',\r\n alignItems: 'center',\r\n color: '#6b6b6b',\r\n border:'solid 2px rgb(41, 139, 231)',\r\n backgroundColor: '#ffffff',\r\n padding: '0px 5px',\r\n zIndex:2,\r\n },\r\n editListWrapper: {\r\n width: '100%',\r\n wordBreak: 'break-word',\r\n overflowY: \"auto\",\r\n height: '6vh',\r\n }, \r\n editIconClose: {\r\n cursor: 'pointer',\r\n marginLeft: 5,\r\n marginRight: 5,\r\n '&:hover': {\r\n color:'#f02a2a',\r\n transform: 'rotate(180deg)',\r\n transition: 'all 250ms ease-out ',\r\n }\r\n },\r\n editColumn: {\r\n height: '80%',\r\n width: 2,\r\n backgroundColor: 'rgb(41, 139, 231)',\r\n marginRight:10\r\n }, \r\n});\r\n\r\ninterface IEditBar {\r\n isEdit:TMessage,\r\n handleCloseEdit: () => void,\r\n handleScrollToTheMessage:(_id:string) => void\r\n}\r\n\r\nconst EditBar = ({ isEdit, handleCloseEdit,handleScrollToTheMessage }: IEditBar) => {\r\n const classes = useStyles();\r\n \r\n return (\r\n - \r\n \r\n
\r\n
\r\n )\r\n}\r\n\r\nexport default EditBar","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport SendIcon from '@mui/icons-material/Send';\r\nimport MicNoneIcon from '@mui/icons-material/MicNone';\r\nimport VideocamIcon from '@mui/icons-material/Videocam';\r\nimport PauseIcon from '@mui/icons-material/Pause';\r\nimport AttachFileIcon from '@mui/icons-material/AttachFile';\r\nimport SentimentSatisfiedAltIcon from '@mui/icons-material/SentimentSatisfiedAlt';\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nimport PhotoCameraFrontIcon from '@mui/icons-material/PhotoCameraFront';\r\nimport CommentIcon from '@mui/icons-material/Comment';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport Webcam from \"react-webcam\";\r\nimport CameraIcon from '@mui/icons-material/Camera';\r\nimport TextField from '@material-ui/core/TextField';\r\nimport Picker from 'emoji-picker-react';\r\nimport InputAdornment from '@mui/material/InputAdornment';\r\n\r\nimport { useReactMediaRecorder } from \"react-media-recorder\";\r\nimport { useState,useEffect,useCallback } from \"react\";\r\nimport { useSelector } from \"react-redux\";\r\n\r\nimport FilesMenu from \"./FilesMenu\";\r\nimport ReplyBar from './ReplyBar'\r\nimport ForwardBar from \"./ForwardBar\";\r\nimport EditBar from \"./EditBar\";\r\nimport {\r\n sentMessageById, sentImgMessageById, sentAudioMessageById,\r\n sentVideoMessageById, sentFileMessageById, sentMessageEditById,\r\n sentMessageReplyById, sentMessageForwardById\r\n} from '../../../../../api-data'\r\nimport { getChat } from '../../../../../redux/chat/selector'\r\nimport { getRightIsOpen } from '../../../../../redux/control/selector'\r\nimport { playNotification,prodBaseURL } from \"../../../../../helpers\";\r\nimport { typingChat } from \"../../../../../api-data\";\r\nimport { TMessage } from \"../../../../../typescript/redux/messages/types\";\r\n\r\n\r\nconst useStyles = makeStyles({ \r\n container: {\r\n width: '35vw',\r\n height:'6vh',\r\n position: 'fixed',\r\n bottom: '2vh',\r\n borderRadius: 8,\r\n padding: 10,\r\n display: 'flex',\r\n flexWrap: 'nowrap',\r\n alignContent: 'start',\r\n alignItems: 'start',\r\n color: '#6b6b6b',\r\n border:'solid 2px #ffffff',\r\n backgroundColor: '#ffffff', \r\n },\r\n containerActive: {\r\n width: '35vw',\r\n height:'6vh',\r\n position: 'fixed',\r\n bottom: '2vh',\r\n borderRadius: 8,\r\n padding: 10,\r\n display: 'flex',\r\n flexWrap: 'nowrap',\r\n alignContent: 'start',\r\n alignItems: 'start',\r\n border:'solid 2px rgb(41, 139, 231)',\r\n backgroundColor: '#ffffff', \r\n }, \r\n textarea: {\r\n width: '100%',\r\n height: '100%',\r\n outline: 'none',\r\n border:'none',\r\n padding: '0px 10px',\r\n marginLeft: 8,\r\n marginRight: 8,\r\n overflowY:'auto',\r\n resize: 'none',\r\n '&::placeholder': {\r\n color: 'inherit',\r\n fontWeight: 600,\r\n fontSize:20\r\n },\r\n },\r\n attachIcon: {\r\n transform:'rotate(30deg)', \r\n },\r\n borderTop: {\r\n position: 'absolute',\r\n left: 0,\r\n top: -21,\r\n width: '100%',\r\n height: 1,\r\n background:'#ffffff',\r\n },\r\n filesMenu: {\r\n background: '#fdfdfd',\r\n position: 'absolute',\r\n width: '15vw',\r\n maxWidth: '100%',\r\n left: '61%',\r\n bottom:'9vh',\r\n zIndex: 10,\r\n visibility: 'visible',\r\n borderRadius: 10,\r\n padding: '4px 6px',\r\n },\r\n emoji: {\r\n position: 'absolute',\r\n zIndex: 10,\r\n visibility: 'visible',\r\n },\r\n captionTextField: {\r\n zIndex: 10,\r\n visibility: 'visible', \r\n width: '35vw',\r\n backgroundColor: '#ffffff',\r\n borderRadius: 4,\r\n height: '6vh',\r\n overflowY: 'auto',\r\n },\r\n iconCancel: {\r\n position: 'absolute',\r\n left: -72,\r\n bottom:-1,\r\n display:'flex',\r\n backgroundColor: '#ffffff',\r\n color: 'rgb(243, 69, 69)',\r\n border:'solid 4px rgb(243, 69, 69)',\r\n borderRadius: '50%',\r\n '&:hover': {\r\n backgroundColor: 'rgb(243, 69, 69)',\r\n color: '#ffffff',\r\n }\r\n }, \r\n avatarCamera: {\r\n position: 'absolute',\r\n left: -72,\r\n bottom:-1,\r\n display: 'flex',\r\n borderRadius: '50%',\r\n zIndex: 10,\r\n border: 'solid 14px #ffffff',\r\n '&:hover': {\r\n backgroundColor: 'rgb(41, 139, 231)',\r\n border:'solid 14px rgb(41, 139, 231)',\r\n color: '#ffffff',\r\n }\r\n },\r\n avatarRight: {\r\n position: 'absolute',\r\n right: -72,\r\n bottom:-1,\r\n display: 'flex',\r\n borderRadius: '50%',\r\n zIndex: 10,\r\n border: 'solid 14px #ffffff',\r\n '&:hover': {\r\n backgroundColor: 'rgb(41, 139, 231)',\r\n border:'solid 14px rgb(41, 139, 231)',\r\n color: '#ffffff'\r\n }\r\n },\r\n pauseLeft: {\r\n position: 'absolute',\r\n left: -72,\r\n bottom:-1,\r\n zIndex: 10, \r\n },\r\n pauseRight: {\r\n position: 'absolute',\r\n right: -72,\r\n bottom:-1,\r\n zIndex: 10, \r\n }, \r\n avatarPause: {\r\n backgroundColor: '#ffffff',\r\n cursor: 'pointer',\r\n animation: `$shake 1s`,\r\n animationIterationCount:'infinite',\r\n '&:hover': {\r\n backgroundColor: 'rgb(41, 139, 231)',\r\n color: '#ffffff',\r\n }\r\n },\r\n overlay: {\r\n position: 'fixed',\r\n top: 0,\r\n left: 0,\r\n width: '100vw',\r\n height: '100vh',\r\n zIndex:100\r\n },\r\n ringContainerLeft: {\r\n position: 'absolute',\r\n left: -25,\r\n top: -25,\r\n zIndex: 10,\r\n }, \r\n ringContainerRight: {\r\n position: 'absolute',\r\n right: -25,\r\n top: -25,\r\n zIndex: 10,\r\n },\r\n circle: {\r\n width: 15,\r\n height: 15,\r\n backgroundColor: 'rgb(255, 4, 4)',\r\n borderRadius: '50%',\r\n position: 'relative'\r\n },\r\n ringRing: {\r\n border: '3px solid rgb(255, 4, 4)',\r\n borderRadius: '50%',\r\n height: 25,\r\n width: 25,\r\n position: 'absolute',\r\n right: -5,\r\n top: -5,\r\n animation: `$pulsate 1s ease-out`,\r\n animationIterationCount: 'infinite',\r\n opacity: 0\r\n },\r\n '@keyframes pulsate': {\r\n '0%': {transform: 'scale(0.1, 0.1)', opacity: 0},\r\n '50%': { opacity: 1},\r\n '100%': {transform: 'scale(1.2, 1.2)', opacity: 0},\r\n },\r\n '@keyframes shake': {\r\n '0%': { transform: 'translate(0.5px, 0.5px) rotate(0deg)'},\r\n '10%': { transform: 'translate(-0.5px, -1px) rotate(-1deg)'},\r\n '20%': { transform: 'translate(-1.5px, 0px) rotate(1deg)'},\r\n '30%': { transform: 'translate(1.5px, 1px) rotate(0deg)'},\r\n '40%': { transform: 'translate(0.5px, -0.5px) rotate(1deg)'},\r\n '50%': { transform: 'translate(-0.5px, 1px) rotate(-1deg)'},\r\n '60%': { transform: 'translate(-1.5px, 0.5px) rotate(0deg)'},\r\n '70%': { transform: 'translate(1.5px, 0.5px) rotate(-1deg)'},\r\n '80%': { transform: 'translate(-0.5px, -0.5px) rotate(1deg)'},\r\n '90%': { transform: 'translate(0.5px, 1px) rotate(0deg)'},\r\n '100%': { transform: 'translate(0.5px, -1px) rotate(-1deg)'},\r\n },\r\n overlayCamera: {\r\n position: 'fixed',\r\n top: 0,\r\n left: 0,\r\n width: '100vw',\r\n height: '100vh',\r\n zIndex: 100,\r\n backgroundColor: 'rgba(104, 105, 104, 0.6)',\r\n overflowY: 'hidden',\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignContent: 'center',\r\n alignItems: 'center',\r\n flexDirection:'column'\r\n },\r\n capturedPicture: {\r\n borderRadius: 10,\r\n border:'solid 2px rgb(62, 149, 231)'\r\n }, \r\n capturePhoto: {\r\n color: '#ffffff',\r\n cursor: 'pointer',\r\n '&:hover': {\r\n color: '#48ff00',\r\n animation: `$rotating 2s linear infinite`\r\n },\r\n }, \r\n '@keyframes rotating': {\r\n\t 'from': { transform: 'rotate(0deg)'},\r\n\t 'to': { transform: 'rotate(360deg)'},\r\n }, \r\n});\r\n\r\ninterface ISendMessage{\r\n isArrow: boolean,\r\n silentMode: boolean,\r\n isReply:TMessage | undefined,\r\n setIsReply: React.Dispatch- \r\n
- handleScrollToTheMessage(isEdit._id)}>\r\n
\r\n {isArrow && }\r\n {isReply && }\r\n {isFilming && _status !== 'stopped' && \r\n <>\r\n
\r\n )\r\n}\r\n\r\nexport default SendMessage","import { makeStyles } from '@material-ui/core'\r\nimport { TPinnedMessages } from '../../../../../typescript/redux/pinnedMessages/types' \r\n\r\nconst useStyles = makeStyles({\r\n unpinBar: { \r\n backgroundColor: '#ffffff',\r\n color:'#2b97fd',\r\n display: 'flex',\r\n justifyContent: 'center',\r\n alignContent: 'center',\r\n alignItems: 'center',\r\n width: '100%',\r\n height: '7vh',\r\n position: 'fixed',\r\n cursor:'pointer',\r\n bottom: '0vh',\r\n fontSize:18,\r\n '&:hover': {\r\n color: '#0084ff',\r\n }\r\n }, \r\n})\r\n\r\ninterface IUnpinBar {\r\n pinnedMessagesMemo: TPinnedMessages,\r\n handleUnpinAll: () => void,\r\n}\r\n\r\nconst UnpinBar = ({pinnedMessagesMemo,handleUnpinAll}:IUnpinBar) => {\r\n const classes = useStyles() \r\n\r\n return (\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n } \r\n {isRecording && status !== 'stopped' && \r\n <> \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n } \r\n \r\n
\r\n \r\n onEmojiClick(e,obj,'input')} />\r\n
\r\n \r\n {isOpenCaptionEmoji && \r\n
\r\n \r\n \r\n onEmojiClick(e,obj,'caption')} />\r\n
} \r\n \r\n
\r\n {isOpenCamera &&\r\n \r\n \r\n
\r\n \r\n \r\n {({ getScreenshot }) => <>\r\n handleCaptureAvatar(getScreenshot)}\r\n className={classes.capturePhoto} fontSize='large' style={{marginBottom:30}} />\r\n \r\n }\r\n \r\n
}\r\n \r\n {`UNPIN ALL ${pinnedMessagesMemo.length} MESSAGES`}\r\n
\r\n )\r\n}\r\n\r\nexport default UnpinBar\r\n\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport { styled } from '@mui/material/styles';\r\nimport { useState } from \"react\";\r\nimport Typography from '@mui/material/Typography';\r\nimport ListItemText from '@mui/material/ListItemText';\r\nimport Button from '@mui/material/Button';\r\nimport ContentCopyIcon from '@mui/icons-material/ContentCopy';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport Divider from '@mui/material/Divider';\r\nimport CheckBoxIcon from '@mui/icons-material/CheckBox';\r\nimport Checkbox from '@mui/material/Checkbox';\r\nimport PushPinIcon from '@mui/icons-material/PushPin';\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nimport ReplyIcon from '@mui/icons-material/Reply';\r\nimport VisibilityIcon from '@mui/icons-material/Visibility';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\r\nimport { removeMessageById,updateMessageById,pinMessageById } from \"../../../../../../api-data\";\r\nimport { firstLetter,slicedWord,timeStampMessage,copied,emojisArr,prodAwsS3 } from '../../../../../../helpers'\r\n\r\nconst StyledMenu = styled((props:any) => (\r\n \r\n
\r\n)}; \r\n\r\nexport default MessageLeftDeleted\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport { styled } from '@mui/material/styles';\r\nimport { useState } from \"react\";\r\nimport Typography from '@mui/material/Typography';\r\nimport ListItemText from '@mui/material/ListItemText';\r\nimport Button from '@mui/material/Button';\r\nimport ContentCopyIcon from '@mui/icons-material/ContentCopy';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport Divider from '@mui/material/Divider';\r\nimport CheckBoxIcon from '@mui/icons-material/CheckBox';\r\nimport Checkbox from '@mui/material/Checkbox';\r\nimport PushPinIcon from '@mui/icons-material/PushPin';\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nimport ReplyIcon from '@mui/icons-material/Reply';\r\nimport VisibilityIcon from '@mui/icons-material/Visibility';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\r\nimport { removeMessageById,updateMessageById,pinMessageById } from \"../../../../../../api-data\";\r\nimport { firstLetter,slicedWord,timeStampMessage,copied,emojisArr,prodAwsS3 } from '../../../../../../helpers'\r\n\r\nconst StyledMenu = styled((props:any) => (\r\n handleContextMenu(e)} className={classes.wrapper}\r\n style={{backgroundColor:selected?'#babdbc':'#ffffff',pointerEvents:isSomeSelected?'none':'auto'}}>\r\n \r\n {`${firstLetter(name)}${slicedWord(name, 15, 1)} \r\n ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}\r\n \r\n handleSelected(_id)}/> }\r\n \r\n \r\n handleClose('copy')} text={`${message} ${caption}`}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n {modal &&\r\n
\r\n handleOpenTheChat(companionIdForwardToAndFrom)}>\r\n \r\n \r\n {`${companionIdForwardToAndFrom?'Forwarded from':'Replied to'} ${firstLetter(forwardReplyName)}${slicedWord(forwardReplyName, 15, 1)}\r\n ${firstLetter(forwardReplyLastName)}${slicedWord(forwardReplyLastName, 15, 1)}`}\r\n \r\n
\r\n \r\n \r\n The Message was Deleted\r\n \r\n
\r\n \r\n
\r\n {tongue&&{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}
\r\n {watched&&\r\n \r\n {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n
}\r\n {tongue&&}\r\n {tongue&&}\r\n {emojiCompanion && {emojisArr[Number(emojiCompanion)]}
}\r\n {emoji && {emojisArr[Number(emoji)]}
}\r\n {isSomeSelected && \r\n
} \r\n \r\n
\r\n Delete message
\r\nAre you sure you want to delete message?
\r\n \r\n \r\n\r\n
\r\n)}; \r\n\r\nexport default MessageLeftText\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport { styled } from '@mui/material/styles';\r\nimport { useState } from \"react\";\r\nimport Typography from '@mui/material/Typography';\r\nimport ListItemText from '@mui/material/ListItemText';\r\nimport Button from '@mui/material/Button';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport Divider from '@mui/material/Divider';\r\nimport CheckBoxIcon from '@mui/icons-material/CheckBox';\r\nimport Checkbox from '@mui/material/Checkbox';\r\nimport PushPinIcon from '@mui/icons-material/PushPin';\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nimport ReplyIcon from '@mui/icons-material/Reply';\r\nimport DownloadIcon from '@mui/icons-material/Download';\r\nimport LibraryMusicIcon from '@mui/icons-material/LibraryMusic';\r\nimport InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';\r\nimport ImageIcon from '@mui/icons-material/Image';\r\nimport ContentCopyIcon from '@mui/icons-material/ContentCopy';\r\nimport VideoLibraryIcon from '@mui/icons-material/VideoLibrary';\r\nimport VisibilityIcon from '@mui/icons-material/Visibility';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\r\nimport { removeMessageById,updateMessageById,pinMessageById } from \"../../../../../../api-data\";\r\nimport { firstLetter,slicedWord,timeStampMessage,copied,emojisArr,handleDownload,prodAwsS3 } from '../../../../../../helpers'\r\n\r\nconst StyledMenu = styled((props:any) => (\r\n handleContextMenu(e)} className={classes.wrapper}\r\n style={{backgroundColor:selected?'#babdbc':\"#ffffff\",pointerEvents:isSomeSelected?'none':'auto'}}>\r\n \r\n {`${firstLetter(name)}${slicedWord(name, 15, 1)} \r\n ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}\r\n \r\n handleSelected(_id)}/> }\r\n \r\n \r\n handleClose('copy')} text={`${message?message:''} ${caption?caption:''}`}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n {modal &&\r\n
\r\n \r\n
\r\n \r\n
\r\n {tongue&&{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}
\r\n {watched&&\r\n \r\n {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n
}\r\n {tongue&&}\r\n {tongue&&}\r\n {emojiCompanion && {emojisArr[Number(emojiCompanion)]}
}\r\n {emoji && {emojisArr[Number(emoji)]}
}\r\n {isSomeSelected && \r\n
} \r\n \r\n
\r\n Delete message
\r\nAre you sure you want to delete message?
\r\n \r\n \r\n\r\n
\r\n)}; \r\n\r\nexport default MessageLeftReply\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport { styled } from '@mui/material/styles';\r\nimport { useState } from \"react\";\r\nimport Typography from '@mui/material/Typography';\r\nimport ListItemText from '@mui/material/ListItemText';\r\nimport Button from '@mui/material/Button';\r\nimport DownloadIcon from '@mui/icons-material/Download';\r\nimport LibraryMusicIcon from '@mui/icons-material/LibraryMusic';\r\nimport InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';\r\nimport ImageIcon from '@mui/icons-material/Image';\r\nimport ContentCopyIcon from '@mui/icons-material/ContentCopy';\r\nimport VideoLibraryIcon from '@mui/icons-material/VideoLibrary';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport Divider from '@mui/material/Divider';\r\nimport CheckBoxIcon from '@mui/icons-material/CheckBox';\r\nimport Checkbox from '@mui/material/Checkbox';\r\nimport PushPinIcon from '@mui/icons-material/PushPin';\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nimport ReplyIcon from '@mui/icons-material/Reply';\r\nimport VisibilityIcon from '@mui/icons-material/Visibility';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\r\nimport { removeMessageById,updateMessageById,pinMessageById } from \"../../../../../../api-data\";\r\nimport { firstLetter,slicedWord,timeStampMessage,copied,emojisArr,handleDownload,prodAwsS3 } from '../../../../../../helpers'\r\n\r\nconst StyledMenu = styled((props:any) => (\r\n handleContextMenu(e)} className={classes.wrapper}\r\n style={{backgroundColor:selected?'#babdbc':'#ffffff',pointerEvents:isSomeSelected?'none':'auto'}}>\r\n \r\n {`${firstLetter(name)}${slicedWord(name, 15, 1)} \r\n ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}\r\n \r\n handleSelected(_id)}/> }\r\n \r\n \r\n handleClose('copy')} text={`${replyMessage&&fullType === null ? replyMessage : fullType} ${replyCaption ? replyCaption : ''} ${message ? message : ''} ${caption ? caption : ''}`}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n {modal &&\r\n
\r\n \r\n {fullType === null &&
\r\n handleScrollToTheMessage(oldId)}>\r\n \r\n {`Replied to ${firstLetter(replyName)}${slicedWord(replyName, 15, 1)}\r\n ${firstLetter(replyLastName)}${slicedWord(replyLastName, 15, 1)}`}\r\n \r\n
\r\n \r\n
\r\n {tongue&&{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}
\r\n {watched&&\r\n \r\n {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n
}\r\n {tongue&&}\r\n {tongue&&}\r\n {emojiCompanion && {emojisArr[Number(emojiCompanion)]}
}\r\n {emoji && {emojisArr[Number(emoji)]}
}\r\n {isSomeSelected && \r\n
} \r\n \r\n
\r\n Delete message
\r\nAre you sure you want to delete message?
\r\n \r\n \r\n\r\n
\r\n)}; \r\n\r\nexport default MessageLeftForward\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport { styled } from '@mui/material/styles';\r\nimport { useState, useRef } from \"react\";\r\nimport Typography from '@mui/material/Typography';\r\nimport DownloadForOfflineIcon from '@mui/icons-material/DownloadForOffline';\r\nimport Button from '@mui/material/Button';\r\nimport ContentCopyIcon from '@mui/icons-material/ContentCopy';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport Divider from '@mui/material/Divider';\r\nimport CheckBoxIcon from '@mui/icons-material/CheckBox';\r\nimport Checkbox from '@mui/material/Checkbox';\r\nimport PushPinIcon from '@mui/icons-material/PushPin';\r\nimport ListItemText from '@mui/material/ListItemText';\r\nimport ListItemIcon from '@mui/material/ListItemIcon';\r\nimport ZoomOutIcon from '@mui/icons-material/ZoomOut';\r\nimport ZoomInIcon from '@mui/icons-material/ZoomIn';\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nimport ReplyIcon from '@mui/icons-material/Reply';\r\nimport DownloadIcon from '@mui/icons-material/Download';\r\nimport VisibilityIcon from '@mui/icons-material/Visibility';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\r\nimport { removeMessageById,updateMessageById,pinMessageById } from \"../../../../../../api-data\";\r\nimport { timeStampMessage, timeStampEU,handleDownload,copied,emojisArr,firstLetter, slicedWord,prodAwsS3 } from '../../../../../../helpers'\r\n\r\nconst StyledMenu = styled((props:any) => (\r\n handleContextMenu(e)} className={classes.wrapper}\r\n style={{backgroundColor:selected?'#babdbc':'#ffffff',pointerEvents:isSomeSelected?'none':'auto'}}>\r\n \r\n {`${firstLetter(name)}${slicedWord(name, 15, 1)} \r\n ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}\r\n \r\n handleSelected(_id)}/> }\r\n \r\n \r\n handleClose('copy')} text={`${forwardMessage&&fullType === null ? forwardMessage : fullType} ${forwardCaption ? forwardCaption : ''} ${message ? message : ''} ${caption ? caption : ''}`}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n {modal &&\r\n
\r\n \r\n {fullType === null &&
\r\n handleScrollToTheChat(companionIdForwardToAndFrom,oldId)}>\r\n \r\n {`Forwarded from ${firstLetter(forwardName)}${slicedWord(forwardName, 15, 1)}\r\n ${firstLetter(forwardLastName)}${slicedWord(forwardLastName, 15, 1)}`}\r\n \r\n
\r\n \r\n
\r\n {tongue&&{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}
\r\n {watched&&\r\n \r\n {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n
}\r\n {tongue&&}\r\n {tongue&&}\r\n {emojiCompanion && {emojisArr[Number(emojiCompanion)]}
}\r\n {emoji && {emojisArr[Number(emoji)]}
}\r\n {isSomeSelected && \r\n
} \r\n \r\n
\r\n Delete message
\r\nAre you sure you want to delete message?
\r\n \r\n \r\n\r\n
:\r\n \r\n
\r\n \r\n \r\n \r\n {!url&&`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n \r\n
\r\n \r\n handleDownload(url, fullType)}\r\n className={classes.downloadIcon} fontSize='large' />\r\n
\r\n \r\n \r\n
\r\n \r\n
)\r\n};\r\n\r\nexport default MessagesLeftImage\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport { styled } from '@mui/material/styles';\r\nimport { useState } from \"react\";\r\nimport ListItemText from '@mui/material/ListItemText';\r\nimport Typography from '@mui/material/Typography';\r\nimport ReactAudioPlayer from 'react-audio-player';\r\nimport Button from '@mui/material/Button';\r\nimport ContentCopyIcon from '@mui/icons-material/ContentCopy';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport Divider from '@mui/material/Divider';\r\nimport CheckBoxIcon from '@mui/icons-material/CheckBox';\r\nimport Checkbox from '@mui/material/Checkbox';\r\nimport PushPinIcon from '@mui/icons-material/PushPin';\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nimport ReplyIcon from '@mui/icons-material/Reply';\r\nimport DownloadIcon from '@mui/icons-material/Download';\r\nimport VisibilityIcon from '@mui/icons-material/Visibility';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\r\n\r\nimport { removeMessageById,updateMessageById,pinMessageById } from \"../../../../../../api-data\";\r\nimport { prodAwsS3,timeStampMessage,handleDownload,copied,emojisArr,slicedWord,firstLetter } from '../../../../../../helpers'\r\n\r\nconst StyledMenu = styled((props:any) => (\r\n handleContextMenu(e)} className={classes.wrapper}\r\n style={{backgroundColor:selected?'#babdbc':'#ffffff',pointerEvents:isSomeSelected?'none':'auto'}}>\r\n \r\n {`${firstLetter(name)}${slicedWord(name, 15, 1)} \r\n ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}\r\n \r\n 
\r\n handleSelected(_id)}/> }\r\n \r\n \r\n handleClose('copy')} text={caption}>\r\n \r\n }\r\n \r\n \r\n \r\n \r\n {modal &&\r\n
\r\n \r\n
\r\n {tongue&&{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}
\r\n {watched&&\r\n \r\n {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n
}\r\n {tongue&&}\r\n {tongue&&}\r\n {emojiCompanion && {emojisArr[Number(emojiCompanion)]}
}\r\n {emoji && {emojisArr[Number(emoji)]}
}\r\n {isSomeSelected && \r\n
} \r\n \r\n
\r\n Delete message
\r\nAre you sure you want to delete message?
\r\n \r\n \r\n\r\n
\r\n)};\r\n\r\nexport default MessageLeftAudio\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport { styled } from '@mui/material/styles';\r\nimport { useState } from \"react\";\r\nimport Typography from '@mui/material/Typography';\r\nimport ListItemText from '@mui/material/ListItemText';\r\nimport Button from '@mui/material/Button';\r\nimport ContentCopyIcon from '@mui/icons-material/ContentCopy';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport Divider from '@mui/material/Divider';\r\nimport CheckBoxIcon from '@mui/icons-material/CheckBox';\r\nimport Checkbox from '@mui/material/Checkbox';\r\nimport PushPinIcon from '@mui/icons-material/PushPin';\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nimport ReplyIcon from '@mui/icons-material/Reply';\r\nimport DownloadIcon from '@mui/icons-material/Download';\r\nimport VisibilityIcon from '@mui/icons-material/Visibility';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\r\nimport { removeMessageById,updateMessageById,pinMessageById } from \"../../../../../../api-data\";\r\nimport { prodAwsS3,timeStampMessage,handleDownload,copied,emojisArr,slicedWord,firstLetter } from '../../../../../../helpers'\r\nconst { Player } = require('video-react')\r\n\r\nconst StyledMenu = styled((props:any) => (\r\n handleContextMenu(e)}\r\n className={classes.wrapper} style={{backgroundColor: selected ? '#babdbc' : \"#ffffff\",pointerEvents: isSomeSelected ? 'none' : 'auto'}}>\r\n \r\n {`${firstLetter(name)}${slicedWord(name, 15, 1)} \r\n ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}\r\n \r\n handleSelected(_id)}/> }\r\n \r\n \r\n handleClose('copy')} text={caption}>\r\n \r\n }\r\n \r\n \r\n \r\n \r\n {modal &&\r\n
\r\n \r\n
\r\n {tongue&&{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}
\r\n {watched&&\r\n \r\n {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n
}\r\n {tongue&&}\r\n {tongue&&}\r\n {emojiCompanion && {emojisArr[Number(emojiCompanion)]}
}\r\n {emoji && {emojisArr[Number(emoji)]}
}\r\n {isSomeSelected && \r\n
} \r\n \r\n
\r\n Delete message
\r\nAre you sure you want to delete message?
\r\n \r\n \r\n\r\n
\r\n)};\r\n\r\nexport default MessageLeftVideo\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport { styled } from '@mui/material/styles';\r\nimport { useState, useRef } from \"react\";\r\nimport Typography from '@mui/material/Typography';\r\nimport ListItemText from '@mui/material/ListItemText';\r\nimport Button from '@mui/material/Button';\r\nimport ContentCopyIcon from '@mui/icons-material/ContentCopy';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport Divider from '@mui/material/Divider';\r\nimport CheckBoxIcon from '@mui/icons-material/CheckBox';\r\nimport Checkbox from '@mui/material/Checkbox';\r\nimport PushPinIcon from '@mui/icons-material/PushPin';\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nimport ZoomOutIcon from '@mui/icons-material/ZoomOut';\r\nimport ZoomInIcon from '@mui/icons-material/ZoomIn';\r\nimport ReplyIcon from '@mui/icons-material/Reply';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport DownloadIcon from '@mui/icons-material/Download';\r\nimport VisibilityIcon from '@mui/icons-material/Visibility';\r\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\r\nimport { removeMessageById,updateMessageById,pinMessageById } from \"../../../../../../api-data\";\r\nimport { timeStampMessage,copied,emojisArr,slicedWord,firstLetter,handleDownload,prodAwsS3 } from '../../../../../../helpers'\r\n\r\nconst FileViewer = require('react-file-viewer')\r\n\r\nconst StyledMenu = styled((props:any) => (\r\n handleContextMenu(e)} className={classes.wrapper}\r\n style={{backgroundColor:selected?'#babdbc':'#ffffff',pointerEvents:isSomeSelected?'none':'auto'}}>\r\n \r\n {`${firstLetter(name)}${slicedWord(name, 15, 1)} \r\n ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}\r\n \r\n \r\n handleSelected(_id)}/> }\r\n \r\n \r\n handleClose('copy')} text={caption}>\r\n \r\n }\r\n \r\n \r\n \r\n \r\n {modal &&\r\n
\r\n \r\n
\r\n {tongue&&{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}
\r\n {watched&&\r\n \r\n {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n
}\r\n {tongue&&}\r\n {tongue&&}\r\n {emojiCompanion && {emojisArr[Number(emojiCompanion)]}
}\r\n {emoji && {emojisArr[Number(emoji)]}
}\r\n {isSomeSelected && \r\n
} \r\n \r\n
\r\n Delete message
\r\nAre you sure you want to delete message?
\r\n \r\n \r\n\r\n {read &&
\r\n)};\r\n\r\nexport default MessageLeftFile\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport { styled } from '@mui/material/styles';\r\nimport { useState } from \"react\";\r\nimport Typography from '@mui/material/Typography';\r\nimport ListItemText from '@mui/material/ListItemText';\r\nimport Button from '@mui/material/Button';\r\nimport ContentCopyIcon from '@mui/icons-material/ContentCopy';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport Divider from '@mui/material/Divider';\r\nimport CheckBoxIcon from '@mui/icons-material/CheckBox';\r\nimport Checkbox from '@mui/material/Checkbox';\r\nimport PushPinIcon from '@mui/icons-material/PushPin';\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nimport ReplyIcon from '@mui/icons-material/Reply';\r\nimport DoneAllIcon from '@mui/icons-material/DoneAll';\r\nimport DoneIcon from '@mui/icons-material/Done';\r\nimport EditIcon from '@mui/icons-material/Edit';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\r\nimport { firstLetter, slicedWord, timeStampMessage, copied,emojisArr,prodAwsS3 } from '../../../../../../helpers'\r\nimport { removeMessageById,updateMessageById,pinMessageById } from \"../../../../../../api-data\";\r\n\r\nconst StyledMenu = styled((props:any) => (\r\n \r\n
} \r\n {read && \r\n
}\r\n \r\n
\r\n handleContextMenu(e)} className={classes.wrapper}\r\n style={{backgroundColor:selected?'#babdbc':\"#ffffff\",pointerEvents:isSomeSelected?'none':'auto'}}>\r\n \r\n {`${firstLetter(name)}${slicedWord(name, 15, 1)} \r\n ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}\r\n \r\n {!read &&}\r\n handleSelected(_id)}/> }\r\n \r\n \r\n handleClose('copy')} text={caption}>\r\n \r\n }\r\n \r\n \r\n \r\n \r\n {modal &&\r\n
\r\n \r\n
\r\n {tongue&&{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}
\r\n {watched&&\r\n \r\n {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n
}\r\n {tongue&&}\r\n {tongue&&}\r\n {emojiCompanion && {emojisArr[Number(emojiCompanion)]}
}\r\n {emoji && {emojisArr[Number(emoji)]}
}\r\n {isSomeSelected && \r\n
} \r\n \r\n
\r\n Delete message
\r\nAre you sure you want to delete message?
\r\n \r\n \r\n\r\n
\r\n)};\r\n\r\nexport default MessageRightDeleted\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport { styled } from '@mui/material/styles';\r\nimport { useState } from \"react\";\r\nimport Typography from '@mui/material/Typography';\r\nimport ListItemText from '@mui/material/ListItemText';\r\nimport Button from '@mui/material/Button';\r\nimport ContentCopyIcon from '@mui/icons-material/ContentCopy';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport Divider from '@mui/material/Divider';\r\nimport CheckBoxIcon from '@mui/icons-material/CheckBox';\r\nimport Checkbox from '@mui/material/Checkbox';\r\nimport PushPinIcon from '@mui/icons-material/PushPin';\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nimport ReplyIcon from '@mui/icons-material/Reply';\r\nimport DoneAllIcon from '@mui/icons-material/DoneAll';\r\nimport DoneIcon from '@mui/icons-material/Done';\r\nimport EditIcon from '@mui/icons-material/Edit';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\r\nimport { firstLetter, slicedWord, timeStampMessage, copied,emojisArr,prodAwsS3 } from '../../../../../../helpers'\r\nimport { removeMessageById,updateMessageById,pinMessageById } from \"../../../../../../api-data\";\r\n\r\nconst StyledMenu = styled((props:any) => (\r\n handleContextMenu(e)} className={classes.wrapper}\r\n style={{backgroundColor:selected?'#ced8d7':'#deffa9', pointerEvents: isSomeSelected ? 'none' : 'auto'}}>\r\n \r\n {`${firstLetter(name)}${slicedWord(name, 15, 1)} \r\n ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}\r\n \r\n handleSelected(_id)}/> }\r\n \r\n \r\n handleClose('copy')} text={`${message} ${caption}`}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n {modal &&\r\n
\r\n handleOpenTheChat(companionIdForwardToAndFrom)}>\r\n \r\n \r\n {`${companionIdForwardToAndFrom?'Forwarded from':'Replied to'} ${firstLetter(forwardReplyName)}${slicedWord(forwardReplyName, 15, 1)}\r\n ${firstLetter(forwardReplyLastName)}${slicedWord(forwardReplyLastName, 15, 1)}`}\r\n \r\n
\r\n \r\n \r\n The Message was Deleted\r\n \r\n
\r\n \r\n
\r\n {tongue&&{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}
\r\n {watched ? \r\n \r\n {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n
}\r\n {tongue&&}\r\n {tongue&&}\r\n {emojiCompanion && {emojisArr[Number(emojiCompanion)]}
}\r\n {emoji && {emojisArr[Number(emoji)]}
}\r\n {isSomeSelected && \r\n
} \r\n \r\n
\r\n Delete message
\r\nAre you sure you want to delete message?
\r\n \r\n \r\n\r\n
\r\n)};\r\n\r\nexport default MessageRightText\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport { styled } from '@mui/material/styles';\r\nimport { useState } from \"react\";\r\nimport Typography from '@mui/material/Typography';\r\nimport ListItemText from '@mui/material/ListItemText';\r\nimport Button from '@mui/material/Button';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport Divider from '@mui/material/Divider';\r\nimport CheckBoxIcon from '@mui/icons-material/CheckBox';\r\nimport Checkbox from '@mui/material/Checkbox';\r\nimport PushPinIcon from '@mui/icons-material/PushPin';\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nimport ReplyIcon from '@mui/icons-material/Reply';\r\nimport LibraryMusicIcon from '@mui/icons-material/LibraryMusic';\r\nimport InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';\r\nimport ImageIcon from '@mui/icons-material/Image';\r\nimport ContentCopyIcon from '@mui/icons-material/ContentCopy';\r\nimport VideoLibraryIcon from '@mui/icons-material/VideoLibrary';\r\nimport DoneAllIcon from '@mui/icons-material/DoneAll';\r\nimport DoneIcon from '@mui/icons-material/Done';\r\nimport EditIcon from '@mui/icons-material/Edit';\r\nimport DownloadIcon from '@mui/icons-material/Download';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\r\nimport { firstLetter, slicedWord, timeStampMessage, copied,emojisArr,handleDownload,prodAwsS3 } from '../../../../../../helpers'\r\nimport { removeMessageById,updateMessageById,pinMessageById } from \"../../../../../../api-data\";\r\n\r\nconst StyledMenu = styled((props:any) => (\r\n handleContextMenu(e)} className={classes.wrapper}\r\n style={{backgroundColor:selected?'#ced8d7':\"#deffa9\",pointerEvents:isSomeSelected?'none':'auto'}}>\r\n \r\n {`${firstLetter(name)}${slicedWord(name, 15, 1)} \r\n ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}\r\n \r\n handleSelected(_id)}/> }\r\n \r\n \r\n handleClose('copy')} text={`${message ? message : ''} ${caption ? caption : ''}`}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n {modal &&\r\n
\r\n \r\n
\r\n \r\n
\r\n {tongue&&{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}
\r\n {watched ? \r\n \r\n {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n
}\r\n {tongue&&}\r\n {tongue&&}\r\n {emojiCompanion && {emojisArr[Number(emojiCompanion)]}
}\r\n {emoji && {emojisArr[Number(emoji)]}
}\r\n {isSomeSelected && \r\n
} \r\n \r\n
\r\n Delete message
\r\nAre you sure you want to delete message?
\r\n \r\n \r\n\r\n
\r\n)};\r\n\r\nexport default MessageRightReply\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport { styled } from '@mui/material/styles';\r\nimport { useState } from \"react\";\r\nimport Typography from '@mui/material/Typography';\r\nimport ListItemText from '@mui/material/ListItemText';\r\nimport Button from '@mui/material/Button';\r\nimport LibraryMusicIcon from '@mui/icons-material/LibraryMusic';\r\nimport InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';\r\nimport ImageIcon from '@mui/icons-material/Image';\r\nimport ContentCopyIcon from '@mui/icons-material/ContentCopy';\r\nimport VideoLibraryIcon from '@mui/icons-material/VideoLibrary';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport Divider from '@mui/material/Divider';\r\nimport CheckBoxIcon from '@mui/icons-material/CheckBox';\r\nimport Checkbox from '@mui/material/Checkbox';\r\nimport PushPinIcon from '@mui/icons-material/PushPin';\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nimport ReplyIcon from '@mui/icons-material/Reply';\r\nimport DoneAllIcon from '@mui/icons-material/DoneAll';\r\nimport DoneIcon from '@mui/icons-material/Done';\r\nimport EditIcon from '@mui/icons-material/Edit';\r\nimport DownloadIcon from '@mui/icons-material/Download';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\r\nimport { firstLetter, slicedWord, timeStampMessage, copied,emojisArr,handleDownload,prodAwsS3 } from '../../../../../../helpers'\r\nimport { removeMessageById,updateMessageById,pinMessageById } from \"../../../../../../api-data\";\r\n\r\nconst StyledMenu = styled((props:any) => (\r\n handleContextMenu(e)} className={classes.wrapper}\r\n style={{backgroundColor:selected?'#ced8d7':'#deffa9',pointerEvents:isSomeSelected?'none':'auto'}}>\r\n \r\n {`${firstLetter(name)}${slicedWord(name, 15, 1)} \r\n ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}\r\n \r\n handleSelected(_id)}/> }\r\n \r\n \r\n handleClose('copy')} text={`${replyMessage&&fullType === null ? replyMessage : fullType} ${replyCaption ? replyCaption : ''} ${message ? message : ''} ${caption ? caption : ''}`}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n {modal &&\r\n
\r\n \r\n {fullType === null &&
\r\n handleScrollToTheMessage(oldId)}>\r\n \r\n {`Replied to ${firstLetter(replyName)}${slicedWord(replyName, 15, 1)}\r\n ${firstLetter(replyLastName)}${slicedWord(replyLastName, 15, 1)}`}\r\n \r\n
\r\n \r\n
\r\n {tongue&&{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}
\r\n {watched ? \r\n \r\n {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n
}\r\n {tongue&&}\r\n {tongue&&}\r\n {emojiCompanion && {emojisArr[Number(emojiCompanion)]}
}\r\n {emoji && {emojisArr[Number(emoji)]}
}\r\n {isSomeSelected && \r\n
} \r\n \r\n
\r\n Delete message
\r\nAre you sure you want to delete message?
\r\n \r\n \r\n\r\n
\r\n)};\r\n\r\nexport default MessageRightForward\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport { styled } from '@mui/material/styles';\r\nimport { useState, useRef } from \"react\";\r\nimport Typography from '@mui/material/Typography';\r\nimport DownloadForOfflineIcon from '@mui/icons-material/DownloadForOffline';\r\nimport Button from '@mui/material/Button';\r\nimport ContentCopyIcon from '@mui/icons-material/ContentCopy';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport Divider from '@mui/material/Divider';\r\nimport CheckBoxIcon from '@mui/icons-material/CheckBox';\r\nimport Checkbox from '@mui/material/Checkbox';\r\nimport PushPinIcon from '@mui/icons-material/PushPin';\r\nimport ListItemText from '@mui/material/ListItemText';\r\nimport ListItemIcon from '@mui/material/ListItemIcon';\r\nimport ZoomOutIcon from '@mui/icons-material/ZoomOut';\r\nimport ZoomInIcon from '@mui/icons-material/ZoomIn';\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nimport ReplyIcon from '@mui/icons-material/Reply';\r\nimport DoneAllIcon from '@mui/icons-material/DoneAll';\r\nimport DoneIcon from '@mui/icons-material/Done';\r\nimport DownloadIcon from '@mui/icons-material/Download';\r\nimport EditIcon from '@mui/icons-material/Edit';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\r\nimport { removeMessageById,updateMessageById,pinMessageById } from \"../../../../../../api-data\";\r\nimport { timeStampMessage, timeStampEU,handleDownload,copied,emojisArr,firstLetter, slicedWord,prodAwsS3 } from '../../../../../../helpers'\r\n\r\nconst StyledMenu = styled((props:any) => (\r\n handleContextMenu(e)} className={classes.wrapper}\r\n style={{backgroundColor:selected?'#ced8d7':'#deffa9', pointerEvents: isSomeSelected ? 'none' : 'auto'}}>\r\n \r\n {`${firstLetter(name)}${slicedWord(name, 15, 1)} \r\n ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}\r\n \r\n handleSelected(_id)}/> }\r\n \r\n \r\n handleClose('copy')} text={`${forwardMessage&&fullType === null ? forwardMessage : fullType} ${forwardCaption ? forwardCaption : ''} ${message ? message : ''} ${caption ? caption : ''}`}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n {modal &&\r\n
\r\n \r\n {fullType === null &&
\r\n handleScrollToTheChat(companionIdForwardToAndFrom,oldId)}>\r\n \r\n {`Forwarded from ${firstLetter(forwardName)}${slicedWord(forwardName, 15, 1)}\r\n ${firstLetter(forwardLastName)}${slicedWord(forwardLastName, 15, 1)}`}\r\n \r\n
\r\n \r\n
\r\n {tongue&&{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}
\r\n {watched ? \r\n \r\n {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n
}\r\n {tongue&&}\r\n {tongue&&}\r\n {emojiCompanion && {emojisArr[Number(emojiCompanion)]}
}\r\n {emoji && {emojisArr[Number(emoji)]}
}\r\n {isSomeSelected && \r\n
} \r\n \r\n
\r\n Delete message
\r\nAre you sure you want to delete message?
\r\n \r\n \r\n\r\n
:\r\n \r\n
\r\n \r\n \r\n \r\n {!url&&`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n \r\n
\r\n \r\n handleDownload(url, fullType)}\r\n className={classes.downloadIcon} fontSize='large' />\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n)};\r\n\r\nexport default MessageRightImage\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport { styled } from '@mui/material/styles';\r\nimport { useState } from \"react\";\r\nimport Avatar from '@mui/material/Avatar';\r\nimport ListItemText from '@mui/material/ListItemText';\r\nimport Typography from '@mui/material/Typography';\r\nimport ReactAudioPlayer from 'react-audio-player';\r\nimport Button from '@mui/material/Button';\r\nimport ContentCopyIcon from '@mui/icons-material/ContentCopy';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\nimport Divider from '@mui/material/Divider';\r\nimport CheckBoxIcon from '@mui/icons-material/CheckBox';\r\nimport Checkbox from '@mui/material/Checkbox';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport PushPinIcon from '@mui/icons-material/PushPin';\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nimport ReplyIcon from '@mui/icons-material/Reply';\r\nimport DoneAllIcon from '@mui/icons-material/DoneAll';\r\nimport DoneIcon from '@mui/icons-material/Done';\r\nimport DownloadIcon from '@mui/icons-material/Download';\r\nimport EditIcon from '@mui/icons-material/Edit';\r\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\r\nimport { removeMessageById,updateMessageById,pinMessageById } from \"../../../../../../api-data\";\r\nimport { timeStampMessage,handleDownload,copied,emojisArr,firstLetter,slicedWord,prodAwsS3 } from '../../../../../../helpers'\r\n\r\nconst StyledMenu = styled((props:any) => (\r\n handleContextMenu(e)} className={classes.wrapper}\r\n style={{backgroundColor:selected?'#ced8d7':'#deffa9',pointerEvents:isSomeSelected?'none':'auto'}}>\r\n \r\n {`${firstLetter(name)}${slicedWord(name, 15, 1)} \r\n ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}\r\n \r\n \r\n handleSelected(_id)}/> }\r\n \r\n \r\n handleClose('copy')} text={caption}>\r\n \r\n }\r\n \r\n \r\n \r\n \r\n {modal &&\r\n
\r\n \r\n
\r\n {tongue&&{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}
\r\n {watched ? \r\n \r\n {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n
}\r\n {tongue&&}\r\n {tongue&&}\r\n {emojiCompanion && {emojisArr[Number(emojiCompanion)]}
}\r\n {emoji && {emojisArr[Number(emoji)]}
}\r\n {isSomeSelected && \r\n
} \r\n \r\n
\r\n Delete message
\r\nAre you sure you want to delete message?
\r\n \r\n \r\n\r\n
\r\n)};\r\n\r\nexport default MessageRightAudio\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport { styled } from '@mui/material/styles';\r\nimport { useState } from \"react\";\r\nimport Typography from '@mui/material/Typography';\r\nimport ListItemText from '@mui/material/ListItemText';\r\nimport Button from '@mui/material/Button';\r\nimport ContentCopyIcon from '@mui/icons-material/ContentCopy';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport Divider from '@mui/material/Divider';\r\nimport CheckBoxIcon from '@mui/icons-material/CheckBox';\r\nimport Checkbox from '@mui/material/Checkbox';\r\nimport PushPinIcon from '@mui/icons-material/PushPin';\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nimport ReplyIcon from '@mui/icons-material/Reply';\r\nimport DoneAllIcon from '@mui/icons-material/DoneAll';\r\nimport DoneIcon from '@mui/icons-material/Done';\r\nimport DownloadIcon from '@mui/icons-material/Download';\r\nimport EditIcon from '@mui/icons-material/Edit';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\r\nimport { removeMessageById,updateMessageById,pinMessageById } from \"../../../../../../api-data\";\r\nimport { timeStampMessage,handleDownload,copied,emojisArr,slicedWord,firstLetter,prodAwsS3 } from '../../../../../../helpers'\r\n\r\nconst { Player } = require('video-react')\r\n\r\nconst StyledMenu = styled((props:any) => (\r\n handleContextMenu(e)} className={classes.wrapper}\r\n style={{backgroundColor:selected?'#ced8d7':'#deffa9',pointerEvents: isSomeSelected ? 'none' : 'auto' }}>\r\n \r\n {`${firstLetter(name)}${slicedWord(name, 15, 1)} \r\n ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}\r\n \r\n handleSelected(_id)}/> }\r\n \r\n \r\n handleClose('copy')} text={caption}>\r\n \r\n }\r\n \r\n \r\n \r\n \r\n {modal &&\r\n
\r\n \r\n
\r\n {tongue&&{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}
\r\n {watched ? \r\n \r\n {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n
}\r\n {tongue&&}\r\n {tongue&&}\r\n {emojiCompanion && {emojisArr[Number(emojiCompanion)]}
}\r\n {emoji && {emojisArr[Number(emoji)]}
}\r\n {isSomeSelected && \r\n
} \r\n \r\n
\r\n Delete message
\r\nAre you sure you want to delete message?
\r\n \r\n \r\n\r\n
\r\n)};\r\n\r\nexport default MessageRightVideo\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\nimport { styled } from '@mui/material/styles';\r\nimport { useState,useRef } from \"react\";\r\nimport Typography from '@mui/material/Typography';\r\nimport ListItemText from '@mui/material/ListItemText';\r\nimport Button from '@mui/material/Button';\r\nimport ContentCopyIcon from '@mui/icons-material/ContentCopy';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\nimport Menu from '@mui/material/Menu';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport Divider from '@mui/material/Divider';\r\nimport CheckBoxIcon from '@mui/icons-material/CheckBox';\r\nimport Checkbox from '@mui/material/Checkbox';\r\nimport PushPinIcon from '@mui/icons-material/PushPin';\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nimport ZoomOutIcon from '@mui/icons-material/ZoomOut';\r\nimport ZoomInIcon from '@mui/icons-material/ZoomIn';\r\nimport ReplyIcon from '@mui/icons-material/Reply';\r\nimport DoneAllIcon from '@mui/icons-material/DoneAll';\r\nimport DoneIcon from '@mui/icons-material/Done';\r\nimport DownloadIcon from '@mui/icons-material/Download';\r\nimport EditIcon from '@mui/icons-material/Edit';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\r\nimport { removeMessageById,updateMessageById,pinMessageById } from \"../../../../../../api-data\";\r\nimport { timeStampMessage,copied,emojisArr,slicedWord,firstLetter,handleDownload,prodAwsS3} from '../../../../../../helpers'\r\n\r\nconst FileViewer = require('react-file-viewer')\r\n\r\nconst StyledMenu = styled((props:any) => (\r\n handleContextMenu(e)} className={classes.wrapper}\r\n style={{backgroundColor:selected?'#ced8d7':'#deffa9',pointerEvents:isSomeSelected?'none':'auto'}}>\r\n \r\n {`${firstLetter(name)}${slicedWord(name, 15, 1)} \r\n ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}\r\n \r\n \r\n handleSelected(_id)}/> }\r\n \r\n \r\n handleClose('copy')} text={caption}>\r\n \r\n }\r\n \r\n \r\n \r\n \r\n {modal &&\r\n
\r\n \r\n
\r\n {tongue&&{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}
\r\n {watched ? \r\n \r\n {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n
}\r\n {tongue&&}\r\n {tongue&&}\r\n {emojiCompanion && {emojisArr[Number(emojiCompanion)]}
}\r\n {emoji && {emojisArr[Number(emoji)]}
}\r\n {isSomeSelected && \r\n
} \r\n \r\n
\r\n Delete message
\r\nAre you sure you want to delete message?
\r\n \r\n \r\n\r\n {read &&
\r\n)};\r\n\r\nexport default MessageRightFile\r\n","import { makeStyles } from \"@material-ui/core/styles\";\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n display: \"flex\",\r\n justifyContent: \"center\",\r\n marginBottom: 12\r\n },\r\n wrapper: {\r\n textAlign: 'center',\r\n padding: '1px 10px 3px 10px',\r\n backgroundColor: 'rgba(104, 105, 104, 0.8)',\r\n color:'#ffffff',\r\n borderRadius: 7,\r\n fontSize: \".85em\",\r\n fontWeight:600,\r\n },\r\n});\r\n\r\ninterface IMessageDivider {\r\n message:string,\r\n}\r\n\r\nconst MessageDivider = ({ message }:IMessageDivider) => {\r\n const classes = useStyles();\r\n\r\n return (\r\n \r\n
} \r\n {read && \r\n
}\r\n \r\n
\r\n handleContextMenu(e)} className={classes.wrapper}\r\n style={{backgroundColor:selected?'#ced8d7':\"#deffa9\",pointerEvents:isSomeSelected?'none':'auto'}}>\r\n \r\n {`${firstLetter(name)}${slicedWord(name, 15, 1)} \r\n ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}\r\n \r\n {!read &&}\r\n handleSelected(_id)}/> }\r\n \r\n \r\n handleClose('copy')} text={caption}>\r\n \r\n }\r\n \r\n \r\n \r\n \r\n {modal &&\r\n
\r\n \r\n
\r\n {tongue&&{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}
\r\n {watched ? \r\n \r\n {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n
}\r\n {tongue&&}\r\n {tongue&&}\r\n {emojiCompanion && {emojisArr[Number(emojiCompanion)]}
}\r\n {emoji && {emojisArr[Number(emoji)]}
}\r\n {isSomeSelected && \r\n
} \r\n \r\n
\r\n Delete message
\r\nAre you sure you want to delete message?
\r\n \r\n \r\n\r\n {message}\r\n
\r\n)};\r\n\r\nexport default MessageDivider\r\n","import { DatePicker } from \"@material-ui/pickers\";\r\nimport { makeStyles } from '@material-ui/core'\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n position: 'absolute',\r\n },\r\n})\r\n\r\ninterface IStaticDatePicker {\r\n date: Date,\r\n disabled: boolean,\r\n changeDate: React.Dispatch\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n )\r\n}\r\n\r\nexport default ForwardSearch","import { makeStyles } from '@material-ui/core'\r\nimport { styled } from '@mui/material/styles';\r\nimport ListItemButton from '@mui/material/ListItemButton';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport ListItemText from '@mui/material/ListItemText';\r\nimport ListItemIcon from '@mui/material/ListItemIcon';\r\nimport Badge from '@mui/material/Badge';\r\n\r\nimport { firstLetter, slicedWord, timeStampEU,prodAwsS3 } from '../../../../../../../helpers';\r\n\r\nconst StyledBadge = styled(Badge)(({ theme }) => ({\r\n '& .MuiBadge-badge': {\r\n backgroundColor: '#44b700',\r\n color: '#44b700',\r\n boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,\r\n '&::after': {\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n width: '100%',\r\n height: '100%',\r\n borderRadius: '50%',\r\n animation: 'ripple 1.2s infinite ease-in-out',\r\n border: '1px solid currentColor',\r\n content: '\"\"',\r\n },\r\n },\r\n '@keyframes ripple': {\r\n '0%': {\r\n transform: 'scale(.8)',\r\n opacity: 1,\r\n },\r\n '100%': {\r\n transform: 'scale(2.4)',\r\n opacity: 0,\r\n },\r\n },\r\n}));\r\n\r\nconst useStyles = makeStyles({\r\n listItem_iconAvatar: {\r\n marginRight:10\r\n },\r\n})\r\n\r\ninterface IForwardItem {\r\n name: string,\r\n lastName: string,\r\n avatarUrl: string,\r\n color: string,\r\n online: string,\r\n companionId: string,\r\n handleForwardTo: (companionId: string) => void,\r\n}\r\nconst ForwardItem = ({name,lastName,avatarUrl,color,online,companionId,handleForwardTo}:IForwardItem) => {\r\n const classes = useStyles()\r\n \r\n return (\r\n \r\n handleForwardTo(companionId)}>\r\n \r\n \r\n \r\n {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\nexport default ForwardItem","import List from '@mui/material/List';\r\nimport { makeStyles } from '@material-ui/core'\r\n\r\nimport AlertInfo from '../../../../../reusableComponents/AlertInfo'\r\nimport ForwardItem from './ForwardItem'\r\nimport { TChats } from '../../../../../../typescript/redux/chats/types';\r\n\r\n\r\nconst useStyles = makeStyles({\r\n list: {\r\n width: '100%',\r\n maxHeight: '63vh',\r\n overflowY: 'scroll',\r\n '&::-webkit-scrollbar': {\r\n width: '0.4em'\r\n },\r\n '&::-webkit-scrollbar-track': {\r\n boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',\r\n webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',\r\n backgroundColor: '#eceeec',\r\n },\r\n '&::-webkit-scrollbar-thumb': {\r\n backgroundColor: '#ccc8c8',\r\n },\r\n \"&::-webkit-scrollbar-thumb:focus\": {\r\n backgroundColor: \"#959595\",\r\n },\r\n \"&::-webkit-scrollbar-thumb:active\": {\r\n backgroundColor: \"#959595\",\r\n },\r\n },\r\n})\r\n\r\ninterface IForwardList {\r\n value: string,\r\n date:string,\r\n filteredAndSorted:TChats,\r\n handleForwardTo: (companionId: string) => void,\r\n}\r\n\r\nconst ForwardList = ({ value,date,filteredAndSorted,handleForwardTo }: IForwardList) => {\r\n const classes = useStyles()\r\n \r\n\r\n return <>\r\n - \r\n {filteredAndSorted.map(({ name, lastName, avatarUrl, color, online, companionId, number }) =>\r\n
\r\n
\r\n )\r\n}\r\n\r\nexport default ForwardSearchList","import { createSelector } from 'reselect';\r\nimport { IState } from '../../../typescript/redux/interfaces'\r\n\r\nconst getMessages = (state: IState) => state.messages.messages;\r\nconst getState = (state: IState) => state.messages;\r\nconst getMessagesMemo = createSelector([getMessages], messages => messages);\r\n\r\nexport { getMessages,getState,getMessagesMemo };\r\n\r\n","import {\r\n actionGetPinnedMessagesSuccess,\r\n actionGetPinnedMessagesReject,\r\n} from '../action';\r\n\r\nimport { TPinnedMessages, TPinnedMessage } from '../../../typescript/redux/pinnedMessages/types'\r\nimport { handleSort } from '../../../helpers';\r\n\r\n\r\nconst asyncFindPinnedMessages= (messages:TPinnedMessages) => async (dispatch:any) => {\r\n try {\r\n const pinnedMessages = handleSort('updatedAt', messages.filter((el: TPinnedMessage) => el.pinned === true), true)\r\n if(pinnedMessages) dispatch(actionGetPinnedMessagesSuccess(pinnedMessages))\r\n } catch (e) {\r\n dispatch(actionGetPinnedMessagesReject())\r\n } \r\n};\r\n\r\n\r\nexport { asyncFindPinnedMessages };\r\n\r\n\r\n\r\n\r\n","import {\r\n actionGetMessagesSuccess,\r\n actionGetMessagesReject\r\n} from '../action';\r\nimport { asyncFindPinnedMessages } from '../../pinnedMessages/operations'\r\nimport { getMessagesById } from '../../../api-data';\r\nimport { IMessagesState } from '../../../typescript/redux/messages/interfaces'\r\n\r\n\r\nconst asyncGetMessagesById= (id:string,cb:any) => async (dispatch:any) => {\r\n try {\r\n const data = await getMessagesById\r\n \r\n \r\n
\r\n \r\n \r\n {isForward && modalForward && }\r\n }\r\n {openPinned&&!isSomeSelected&&
\r\n );\r\n}\r\n\r\nexport default ChatBar","import Grid from '@mui/material/Grid'\r\nimport { useState,useEffect } from 'react'\r\nimport { useSelector, useDispatch } from 'react-redux'\r\n\r\nimport HeaderBar from './HeaderBar'\r\nimport ChatBar from './ChatBar'\r\nimport { getPinnedMessagesMemo } from '../../../redux/pinnedMessages/selector'\r\nimport { TRightIsOpen } from '../../../typescript/redux/control/types'\r\nimport { getOpenPinned } from '../../../redux/control/selector'\r\nimport { actionOpenPinned } from '../../../redux/control/action'\r\nimport { unpinAllMessagesById } from '../../../api-data'\r\n\r\ninterface ICentralBar {\r\n rightIsOpen: TRightIsOpen,\r\n chatDivRef: any | null,\r\n companionId: string,\r\n backgroundImage: string,\r\n handleStartCall: () => void,\r\n}\r\n\r\nconst CentralBar = ({rightIsOpen,chatDivRef,companionId,backgroundImage,handleStartCall}:ICentralBar) => {\r\n const dispatch = useDispatch()\r\n const pinnedMessagesMemo = useSelector(getPinnedMessagesMemo)\r\n const openPinned = useSelector(getOpenPinned)\r\n const [selectedArr, setSelectedArr] = useState 0 ? classes.messagesScroll : classes.messagesEmpty}>\r\n
\r\n {!openPinned && !isSomeSelected && \r\n {messagesMemo.length > 0 ? renderArr.map(({ replyMessage,message, name, lastName,avatarUrl,color,pinned,\r\n createdAt, number, type, fullType, replyName, replyLastName, replyCaption, caption, emoji, emojiCompanion,\r\n _id, oldId, forwardName, forwardLastName, companionIdForwardToAndFrom,forwardMessage,forwardCaption,edited,deleted},i) => {\r\n const watched = seenCompanion - (i + 1) < 0 ? false : true\r\n let isUnread\r\n let isTime\r\n let isTongue = false\r\n const nextTongue = renderArr[i + 1]\r\n if (!unread && chatNumber === number&& seen - (i + 1) < 0) {\r\n isUnread = true\r\n unread = true\r\n }\r\n if (!time) {\r\n isTime = true\r\n time = createdAt\r\n } else if (timeStampFilter(time) !== timeStampFilter(createdAt)) {\r\n time = createdAt\r\n isTime = true\r\n } \r\n if (!tongue&&nextTongue&&nextTongue.number === number) {\r\n if (getSeconds(nextTongue.createdAt) - getSeconds(createdAt) < 600) {\r\n isTongue = false\r\n } else {\r\n isTongue = true\r\n }\r\n tongue = number\r\n } else if (!tongue&&nextTongue&&nextTongue.number !== number) {\r\n isTongue = true\r\n tongue = null\r\n } else if (tongue&&nextTongue&&tongue === number&&nextTongue.number === number) {\r\n if (getSeconds(nextTongue.createdAt) - getSeconds(createdAt) < 600) {\r\n isTongue = false\r\n } else {\r\n isTongue = true\r\n }\r\n tongue = number\r\n } else if (tongue&&nextTongue&&tongue === number&&nextTongue.number !== number) {\r\n isTongue = true\r\n tongue = null\r\n } else if (tongue&&!nextTongue&&tongue === number) {\r\n isTongue = true\r\n tongue = null\r\n } else if (tongue&&!nextTongue&&tongue !== number) {\r\n isTongue = false\r\n tongue = number\r\n }\r\n if(renderArr.length-1 === i) isTongue = true\r\n if (nextTongue && timeStampFilter(nextTongue.createdAt) !== timeStampFilter(createdAt)) {\r\n isTongue = true\r\n }\r\n const url = `${prodAwsS3}/${message}`\r\n const urlForward = `${prodAwsS3}/${forwardMessage}`\r\n const urlReply = `${prodAwsS3}/${replyMessage}`\r\n if (number !== userNumber) {\r\n if (type === 'text' && !oldId && !companionIdForwardToAndFrom && !deleted) return (
\r\n \r\n {isTime&&}\r\n {isUnread&&
)\r\n if (type === 'text' && deleted) return ( \r\n {isTime&&}\r\n {isUnread&&
) \r\n if (type === 'text' && companionIdForwardToAndFrom) return ( \r\n {isTime&&}\r\n {isUnread&&
) \r\n if (type === 'text' && oldId) return ( \r\n {isTime&&}\r\n {isUnread&&
) \r\n if (type === 'image') return (\r\n {isTime&&}\r\n {isUnread&&
)\r\n if (type === 'audio') return (\r\n {isTime&&}\r\n {isUnread&&
)\r\n if (type === 'video') return (\r\n {isTime&&}\r\n {isUnread&&
)\r\n if (type) return (\r\n {isTime&&}\r\n {isUnread&&
) \r\n } else {\r\n if (type === 'text' && !oldId && !companionIdForwardToAndFrom && !deleted) return (\r\n {isTime&&}\r\n {isUnread&&
)\r\n if (type === 'text' && deleted) return (\r\n {isTime&&}\r\n {isUnread&&
) \r\n if (type === 'text' && companionIdForwardToAndFrom) return (\r\n {isTime&&}\r\n {isUnread&&
) \r\n if (type === 'text' && oldId) return (\r\n {isTime&&}\r\n {isUnread&&
) \r\n if (type === 'image') return (\r\n {isTime&&}\r\n {isUnread&&
)\r\n if (type === 'audio') return (\r\n {isTime&&}\r\n {isUnread&&
)\r\n if (type === 'video') return (\r\n {isTime&&}\r\n {isUnread&&
)\r\n if (type) return (\r\n {isTime&&}\r\n {isUnread&&
) \r\n }\r\n }) : \r\n
\r\n )\r\n}\r\n\r\nexport default SearchList","import Stack from '@mui/material/Stack';\r\nimport IconButton from '@mui/material/IconButton';\r\nimport PersonAddAltIcon from '@mui/icons-material/PersonAddAlt';\r\nimport EditIcon from '@mui/icons-material/Edit';\r\nimport CloseIcon from '@mui/icons-material/Close';\r\nimport { makeStyles, Typography } from '@material-ui/core'\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { useState,useEffect } from 'react';\r\nimport { actionRightIsOpen } from '../../../../../redux/control/action'\r\nimport { getContactsMemo } from '../../../../../redux/contacts/selector'\r\nimport { getChat } from '../../../../../redux/chat/selector'\r\nimport { asyncAddContact } from '../../../../../redux/contacts/operations';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n display: 'flex',\r\n alignContent: 'center',\r\n alignItems: 'center',\r\n height:'7vh'\r\n },\r\n iconClose: {\r\n '&:hover': {\r\n transform: 'rotate(180deg)',\r\n transition: 'all 250ms ease-out ',\r\n }\r\n }, \r\n})\r\n\r\nconst ToolBar = () => {\r\n const dispatch = useDispatch()\r\n const classes = useStyles()\r\n const contactsMemo = useSelector(getContactsMemo)\r\n const { number } = useSelector(getChat)\r\n const [isContact, setIsContact] = useState 0 ?classes.list:undefined}>\r\n {messagesMemo.length > 0 ? filteredAndSorted.length > 0 ?\r\n
\r\n - \r\n {filteredAndSorted.map(({ name, lastName, avatarUrl, color, message, createdAt,_id,fullType,type }) =>\r\n
\r\n handleScrollToTheMessage(_id)}\r\n alignItems=\"flex-start\" className={classes.listItem}>\r\n \r\n \r\n {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n \r\n \r\n \r\n {type === 'text'? message : fullType}\r\n \r\n {timeStampEU(createdAt)}\r\n }\r\n />\r\n {type === 'text' && \r\n \r\n
)}\r\n \r\n \r\n {isDefault ?\r\n avatarsArr.map(({ avatarUrl, updatedAt }) => \r\n {online === 'true' ? 'online' : `last seen ${timeStampEU(online)}`}\r\n {`${firstLetter(name)}${slicedWord(name, 15, 1)}\r\n ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}\r\n {country}\r\n {!isDefault&&{`${firstLetter(name)}${firstLetter(lastName)}`}}\r\n {!isDefault&&{`${firstLetter(name)}${firstLetter(lastName)}`}}\r\n
\r\n )\r\n}\r\n\r\nexport default ProfilePicture","import { useSelector } from 'react-redux';\r\nimport Paper from '@mui/material/Paper';\r\nimport MenuList from '@mui/material/MenuList';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport ListItemText from '@mui/material/ListItemText';\r\nimport ListItemIcon from '@mui/material/ListItemIcon';\r\nimport PhoneIcon from '@mui/icons-material/Phone';\r\nimport NotificationsIcon from '@mui/icons-material/Notifications';\r\nimport SortIcon from '@mui/icons-material/Sort';\r\nimport Switch from '@mui/material/Switch';\r\nimport Divider from '@mui/material/Divider';\r\nimport AlternateEmailIcon from '@mui/icons-material/AlternateEmail';\r\nimport { CopyToClipboard } from 'react-copy-to-clipboard';\r\nimport { makeStyles } from '@material-ui/core'\r\n\r\nimport { getChat } from '../../../../../redux/chat/selector'\r\nimport { muteChat,sortChat } from '../../../../../api-data'\r\nimport { copied,firstLetter,slicedWord } from '../../../../../helpers';\r\n\r\nconst useStyles = makeStyles({\r\n listIcon: {\r\n marginRight: 15,\r\n },\r\n})\r\n\r\nconst label = { inputProps: { 'aria-label': 'Switch demo' } };\r\n\r\nconst ProfileMenu = ({disabled}:{disabled:boolean}) => {\r\n const classes = useStyles()\r\n const { number, mute,sort,companionId,originalName,originalLastName } = useSelector(getChat)\r\n const handleMute = () => muteChat(companionId)\r\n const handleSort = () => sortChat(companionId)\r\n \r\n const credentials = `${firstLetter(originalName)}${slicedWord(originalName, 15, 1)}\r\n ${firstLetter(originalLastName)}${slicedWord(originalLastName, 15, 1)}`\r\n \r\n return (\r\n \r\n \r\n
):\r\n [\r\n {timeStampEU(updatedAt)}
\r\n\r\n \r\n
\r\n ]}\r\n {timeStampEU(createdAt)}
\r\n- \r\n {filteredAndSorted.map(({ message, createdAt, fullType,_id,name,avatarUrl,lastName,color }) =>\r\n
\r\n handleScrollToTheMessage(_id)}\r\n alignItems=\"flex-start\" className={classes.listItem}>\r\n \r\n \r\n {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n \r\n \r\n \r\n
)}\r\n {\r\n handleCloseWatch(e)\r\n handleScrollToTheMessage(id)\r\n }} className={classes.overlay}>\r\n
:\r\n \r\n
\r\n \r\n \r\n \r\n {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n \r\n
\r\n \r\n handleDownload(url, fullType)}\r\n className={classes.downloadIcon} fontSize='large' />\r\n
\r\n \r\n \r\n
\r\n - \r\n {filteredAndSorted.map(({createdAt, fullType,_id,name,avatarUrl,lastName,color }) =>\r\n
\r\n handleScrollToTheMessage(_id)}\r\n alignItems=\"flex-start\" className={classes.listItem}>\r\n \r\n \r\n {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n \r\n \r\n \r\n
)}\r\n - \r\n {filteredAndSorted.map(({ message, createdAt, lastName, name, color, avatarUrl,_id }) =>\r\n
\r\n handleScrollToTheMessage(_id)}\r\n alignItems=\"flex-start\" className={classes.listItem}>\r\n \r\n \r\n {`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n \r\n \r\n
)}\r\n - \r\n {filteredAndSorted.map(({ message, createdAt, fullType,_id,name,avatarUrl,lastName,color }) =>\r\n
\r\n handleScrollToTheMessage(_id)}\r\n key={createdAt} alignItems=\"flex-start\" className={classes.listItem}>\r\n \r\n \r\n {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n \r\n \r\n \r\n
)}\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default CredentialsList","import Stack from '@mui/material/Stack';\r\nimport IconButton from '@mui/material/IconButton';\r\nimport ArrowBackIcon from '@mui/icons-material/ArrowBack';\r\nimport { makeStyles, Typography } from '@material-ui/core'\r\nimport { useDispatch } from 'react-redux';\r\n\r\nimport { actionRightIsOpen } from '../../../../../redux/control/action'\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n height:'7vh',\r\n width: '100%',\r\n display: 'flex',\r\n alignContent: 'center',\r\n alignItems: 'center',\r\n backgroundColor: '#ffffff',\r\n },\r\n iconArrow: {\r\n '&:hover': {\r\n transform: 'rotate(360deg)',\r\n transition: 'all 250ms ease-out ',\r\n }\r\n },\r\n})\r\n\r\nconst ToolBar = () => {\r\n const dispatch = useDispatch()\r\n const classes = useStyles()\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n {`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n \r\n \r\n {`${firstLetter(originalName)}${slicedWord(originalName, 15, 1)} \r\n ${firstLetter(originalLastName)}${slicedWord(originalLastName, 15, 1)}`}\r\n \r\n original name \r\n
\r\n )\r\n};\r\n\r\nexport default EditList;","import { makeStyles } from '@material-ui/core'\r\nimport Button from '@mui/material/Button';\r\nimport Avatar from '@mui/material/Avatar';\r\nimport MenuItem from '@mui/material/MenuItem';\r\nimport DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';\r\nimport { useState } from 'react';\r\nimport { useDispatch } from 'react-redux';\r\nimport { actionRightIsOpen } from '../../../../../redux/control/action'\r\nimport { removeContact } from '../../../../../api-data';\r\nimport { TContact } from '../../../../../typescript/redux/contacts/types';\r\nimport { slicedWord,firstLetter,prodAwsS3 } from '../../../../../helpers';\r\nconst useStyles = makeStyles({\r\n container: {\r\n width: '100%',\r\n padding: '20px 10px 20px 10px',\r\n backgroundColor: '#ffffff',\r\n },\r\n modalDelete: {\r\n background: '#ffffff',\r\n position: 'absolute',\r\n content:'',\r\n width: '20%',\r\n height:'auto',\r\n left: '40%',\r\n bottom: '48.5%',\r\n borderRadius: 10,\r\n padding: 10,\r\n display: 'flex',\r\n flexDirection:'column'\r\n }, \r\n overlay: {\r\n position: 'fixed',\r\n top: 0,\r\n left: 0,\r\n width: '100vw',\r\n height: '100vh',\r\n zIndex: 100,\r\n backgroundColor: 'rgba(104, 105, 104, 0.6)',\r\n overflowY: 'hidden',\r\n },\r\n titleWrapper: {\r\n display: 'flex',\r\n justifyContent: 'flex-start',\r\n alignContent: 'center',\r\n alignItems:'center'\r\n },\r\n})\r\n\r\nconst Delete = ({ isContact }:{ isContact:TContact}) => {\r\n const classes = useStyles()\r\n const dispatch = useDispatch()\r\n const {_id,avatarUrl,color,name,lastName} = isContact\r\n const [modal, setModal] = useState\r\n
\r\n - \r\n \r\n
\r\n
}\r\n \r\n );\r\n}\r\n\r\nexport default Delete","import { makeStyles} from '@material-ui/core'\r\nimport Avatar from '@mui/material/Avatar';\r\nimport DoneIcon from '@mui/icons-material/Done';\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n position: 'absolute',\r\n top: '92vh',\r\n left: 20,\r\n }, \r\n avatarArrow: {\r\n cursor: 'pointer',\r\n '&:hover': {\r\n backgroundColor: 'rgb(62, 149, 231)'\r\n }\r\n }\r\n})\r\n\r\nconst SubmitBtn = ({handleSubmit}:{handleSubmit:() => void}) => {\r\n const classes = useStyles() \r\n\r\n return (\r\n \r\n
\r\n \r\n \r\n {`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n
\r\n Delete contact
\r\n{`Are you sure you want to delete contact\r\n ${`${firstLetter(name)}${slicedWord(name, 15, 1)}\r\n ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}?`}
\r\n \r\n \r\n\r\n \r\n \r\n
\r\n )\r\n};\r\n\r\nexport default SubmitBtn;","import { makeStyles } from '@material-ui/core'\r\nimport { useState,useEffect } from 'react';\r\nimport { useSelector } from 'react-redux';\r\nimport ToolBar from './ToolBar'\r\nimport EditList from './EditList'\r\nimport Delete from './Delete'\r\nimport SubmitBtn from './SubmitBtn';\r\nimport { getContactsMemo } from '../../../../redux/contacts/selector'\r\nimport { getChat } from '../../../../redux/chat/selector'\r\nimport { muteChat, updateContact } from '../../../../api-data';\r\n\r\n\r\nconst useStyles = makeStyles({\r\n editBar: {\r\n backgroundColor: '#f3f2f2',\r\n height: '100%',\r\n position:'relative'\r\n }\r\n})\r\n\r\nconst EditBar= () => {\r\n const classes = useStyles()\r\n const contactsMemo = useSelector(getContactsMemo)\r\n const chat = useSelector(getChat)\r\n const [isContact, setIsContact] = useState\r\n {openBtn&&}\r\n
\r\n )\r\n}\r\n\r\nexport default EditBar","import Grid from '@mui/material/Grid'\r\nimport SearchList from './SearchList'\r\nimport CredentialsList from './CredentialsList'\r\nimport EditBar from './EditBar'\r\nimport { TRightIsOpen } from '../../../typescript/redux/control/types'\r\n\r\ninterface IRightBar {\r\n rightIsOpen: TRightIsOpen,\r\n chatDivRef: any | null,\r\n}\r\n\r\nconst RightBar = ({ rightIsOpen, chatDivRef }: IRightBar) => {\r\n return (\r\n \r\n
\r\n )\r\n}\r\n\r\nexport default CallBar","export default __webpack_public_path__ + \"static/media/wallpaper.8f0d1af7.jpg\";","export default __webpack_public_path__ + \"static/media/wallpaperNight.63a4f24a.jpg\";","import Grid from '@mui/material/Grid'\r\nimport { makeStyles } from '@material-ui/core'\r\nimport { useSelector } from 'react-redux'\r\nimport { useState,useRef } from 'react'\r\nimport io from 'socket.io-client';\r\nimport Moveable from \"react-moveable\";\r\nimport { OnDrag } from \"react-moveable\";\r\n\r\nimport LeftBar from './LeftBar'\r\nimport CentralBar from './CentralBar'\r\nimport RightBar from './RightBar'\r\nimport CallBar from './CallBar';\r\nimport { getRightIsOpen } from '../../redux/control/selector'\r\nimport { getChatMemo } from '../../redux/chat/selector'\r\nimport { getNightMode } from '../../redux/authorization/selector'\r\nimport wallpaper from '../../img/wallpaper.jpg'\r\nimport wallpaperNight from '../../img/wallpaperNight.jpg'\r\nimport { prodSocketURL } from '../../helpers';\r\n\r\nconst socket = io(prodSocketURL)\r\n\r\nconst useStyles = makeStyles({\r\n container: {\r\n minHeight: '100vh',\r\n maxHeight: '100vh',\r\n },\r\n centralAndRight: {\r\n display:'flex'\r\n },\r\n myVideo: {\r\n width: 250,\r\n height: 'auto',\r\n cursor: 'pointer',\r\n position: 'absolute',\r\n top: 0,\r\n left: 0,\r\n zIndex: 150,\r\n backgroundColor:'#28e217',\r\n }, \r\n})\r\n\r\nconst HomePage = () => {\r\n const classes = useStyles()\r\n const rightIsOpen = useSelector(getRightIsOpen)\r\n const myVideoRef = useRef\r\n \r\n \r\n {`${firstLetter(name)}${firstLetter(lastName)}`}\r\n \r\n }\r\n {
\r\n \r\n
\r\n {\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
}\r\n \r\n \r\n {!true&&
\r\n \r\n \r\n \r\n Screencast \r\n
}\r\n \r\n \r\n {true? \r\n {true?'Stop Video':'Start Video'} \r\n
\r\n \r\n \r\n \r\n \r\n {callStatus === 'is calling you' ? 'Decline' : 'End Call'}\r\n \r\n
\r\n {callStatus === 'is calling you' &&\r\n \r\n \r\n \r\n \r\n \r\n Accept\r\n \r\n
} \r\n \r\n \r\n {true? \r\n {true?'Mute':'Unmute'} \r\n
\r\n