@messenger-box/platform-browser 10.0.3-alpha.17 → 10.0.3-alpha.171

package/src/components/messenger/messagesList/index.tsx

@@ -1,764 +0,0 @@
-import React, { FC, useState } from 'react';
-import { Avatar, Col, Popover, Row } from 'antd';
-import { Comment } from '@ant-design/compatible';
-import { useSelector } from 'react-redux';
-import { useTranslation } from 'react-i18next';
-// import 'antd/dist/antd.css';
-import { BiDotsVerticalRounded, BiPaperPlane, BiDotsHorizontalRounded } from 'react-icons/bi';
-import Moment from 'moment';
-import { css } from '@emotion/css';
-import { styleSheet3 } from './style';
-import { IoBookmarkOutline } from 'react-icons/io5';
-import {
-    MdModeEditOutline,
-    MdOutlineAddReaction,
-    MdOutlineCloudDownload,
-    MdOutlineDesktopMac,
-    MdOutlineEmojiEmotions,
-} from 'react-icons/md';
-import { VscChromeClose } from 'react-icons/vsc';
-import { FaRobot } from 'react-icons/fa';
-import { TiUserAdd } from 'react-icons/ti';
-import { RiShareForwardLine } from 'react-icons/ri';
-import { BsReply } from 'react-icons/bs';
-import { GrClose } from 'react-icons/gr';
-import { Picker } from 'emoji-mart';
-import { Button, Modal } from 'react-bootstrap';
-import { IPostFragment } from 'common';
-import MoreAction from '../more_action';
-import { styleSheet2 } from '../../post/style';
-
-interface IProps {
-    userMessagesList: IPostFragment[];
-    handleShowSideBar: () => void;
-    handleDeleteMessage: any;
-    handleEditMessage: any;
-    channel: any;
-    currentUsrId: string;
-}
-
-export const MessagesList: FC<IProps> = ({
-    userMessagesList,
-    handleShowSideBar,
-    handleDeleteMessage,
-    handleEditMessage,
-    channel,
-    currentUsrId,
-}) => {
-    const [showMoreAction, setShowMoreAction] = useState<boolean>(false);
-    const userId = useSelector<any>((state) => state.user.authUserId);
-    const [pinMessage, setPinMessage] = useState<boolean>(false);
-    const [displayEmoji, setDisplayEmoji] = useState(false);
-    const [msgIndex, setMsgIndex] = useState();
-    const [emoji, setEmoji] = useState([]);
-    const [msgClr, setMsgClr] = useState({});
-    const [id, setId] = useState<any>();
-    const [showPreview, setShowPreview] = useState<any>(false);
-    const [clickedImage, setClickedImage] = useState<any>({});
-    const [show, setShow] = useState(false);
-    const [showAddMember, setShowAddMember] = useState(false);
-    const [inputValue, setInputValue] = useState({ id: '', msg: '' });
-    const { t } = useTranslation();
-
-    console.log('-------Selected channel for chatting---------', channel);
-    console.log('-------All messages for selected channel---------', userMessagesList);
-
-    const emojiClick = (msgId, id) => {
-        setDisplayEmoji(!displayEmoji);
-        setMsgIndex(msgId);
-        setId(id);
-    };
-    const handleOnSelect = (e) => {
-        // setEnterValue(enterValue + emoji.native)
-        setEmoji((emoji) => [...emoji, e.native]);
-        setDisplayEmoji(false);
-        setMsgIndex(null);
-    };
-    const handlePinBtn = (id: any) => {
-        userMessagesList.find((element) => {
-            if (element.id == id) {
-                return (element.isPinned = !element.isPinned);
-            }
-        });
-        setShowMoreAction(false);
-        setPinMessage(!pinMessage);
-    };
-    const handleEdit = (name) => {
-        handleEditMessage(inputValue.id, inputValue.msg);
-        setShowMoreAction(false);
-        handleClose(name);
-    };
-
-    const handleClose = (name) => {
-        switch (name) {
-            case 'editMessage': {
-                setShow(false);
-                break;
-            }
-            case 'addMember': {
-                setShowAddMember(false);
-                break;
-            }
-        }
-    };
-    const handleShow = (id, msg) => {
-        setInputValue({ id: id, msg: msg });
-        setShow(true);
-    };
-    const handleChange = (e) => {
-        setInputValue({ ...inputValue, msg: e.target.value });
-    };
-    const removeEmoji = (index) => {
-        setEmoji(emoji.filter((e) => emoji.indexOf(e) !== index));
-    };
-    const styles = {
-        backgroundColor: '#fffbed',
-    };
-
-    const handleShowPreview = (file, msgDetails) => {
-        setClickedImage({ file: file, msgDetail: msgDetails });
-        setShowPreview(true);
-    };
-
-    const handleDownload = (id) => {
-        document.getElementById(id).click();
-    };
-
-    return (
-        <div>
-            <Modal show={show} onHide={() => handleClose('editMessage')}>
-                <Modal.Header
-                    style={{ backgroundColor: '#2b5ebf', color: 'white', display: 'flex', alignItems: 'center' }}
-                >
-                    <Modal.Title>{t('messenger_box_browser.edit_message')}</Modal.Title>
-                    <VscChromeClose
-                        onClick={() => handleClose('addMember')}
-                        fontSize="16px"
-                        style={{ marginLeft: 'auto', cursor: 'pointer' }}
-                    />
-                </Modal.Header>
-                <Modal.Body>
-                    <input type="text" value={inputValue.msg} onChange={(e) => handleChange(e)} />
-                </Modal.Body>
-                <Modal.Footer>
-                    <Button onClick={() => handleClose('editMessage')}>{t('messenger_box_browser.close')}</Button>
-                    <Button
-                        style={{ backgroundColor: '#2b5ebf', color: 'white' }}
-                        onClick={() => handleEdit('editMessage')}
-                    >
-                        {t('messenger_box_browser.save')}
-                    </Button>
-                </Modal.Footer>
-            </Modal>
-            <Modal show={showAddMember} onHide={() => handleClose('addMember')}>
-                <Modal.Header
-                    style={{ backgroundColor: '#2b5ebf', color: 'white', display: 'flex', alignItems: 'center' }}
-                >
-                    <Modal.Title>{t('messenger_box_browser.add_new_members_to_my_first_public_channel')}</Modal.Title>
-                    <VscChromeClose
-                        onClick={() => handleClose('addMember')}
-                        fontSize="16px"
-                        style={{ marginLeft: 'auto', cursor: 'pointer' }}
-                    />
-                </Modal.Header>
-                <Modal.Body>
-                    <input type="search" onChange={(e) => handleChange(e)} />
-                </Modal.Body>
-            </Modal>
-            <div className={css(styleSheet2.customStyle as any)}>
-                {!channel ? (
-                    <Popover
-                        placement="right"
-                        title={<a>{'@' + 'surveybot'}</a>}
-                        content={
-                            <div
-                                style={{
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                }}
-                            >
-                                <Avatar
-                                    size={{ xxl: 100 }}
-                                    style={{
-                                        backgroundColor: 'black',
-                                        marginBottom: '15px',
-                                        marginLeft: '25px',
-                                        alignItems: 'center',
-                                    }}
-                                >
-                                    <FaRobot style={{ marginTop: '22px' }} fontSize="50px" fill="white" />
-                                </Avatar>
-                                <p style={{ fontWeight: 'bold' }}>{t('messenger_box_browser.surveybot')}</p>
-                                <p>{t('messenger_box_browser.survey_bot_collects_your')}</p>
-                                <div>
-                                    <h5>
-                                        {t('messenger_box_browser.local_time')}{' '}
-                                        <span>{Moment().format('HH:mm A')}</span>
-                                    </h5>
-                                </div>
-                                <a className="icon-popover">
-                                    <BiPaperPlane style={{ fontSize: '15px', marginRight: '3px' }} />
-                                    {t('messenger_box_browser.send_message')}
-                                </a>
-                            </div>
-                        }
-                        trigger="click"
-                    >
-                        <Avatar className="main_avatar">
-                            <FaRobot className="inner_main_avatar" />
-                        </Avatar>
-                    </Popover>
-                ) : (
-                    ''
-                )}
-                {channel ? (
-                    <div>
-                        <p style={{ fontSize: '20px', fontWeight: 600, color: '#4b4a4e' }}>
-                            {t('messenger_box_browser.beginning_of')}
-                            {channel.type !== 'DIRECT'
-                                ? channel.title
-                                : channel.displayName.split('_').length === 2
-                                ? channel.displayName.split('_')[0].split('-')[0] !== currentUsrId
-                                    ? channel.displayName.split('_')[0].split('-')[1]
-                                    : channel.displayName.split('_')[1].split('-')[1]
-                                : channel.displayName}
-                        </p>
-                        {channel.type !== 'DIRECT' ? (
-                            ''
-                        ) : (
-                            <h5>{t('messenger_box_browser.direct_messages_and_files_shared')}</h5>
-                        )}
-                        <div className="di_chat_head">
-                            <a
-                                style={{ marginRight: '1.5em' }}
-                                onClick={() => {
-                                    setShowAddMember(true);
-                                }}
-                            >
-                                <TiUserAdd /> <h5>{t('messenger_box_browser.invite_others_to_this_channel')}</h5>
-                            </a>
-                            <a>
-                                <MdModeEditOutline /> <h5>{t('messenger_box_browser.set_a_header')}</h5>
-                            </a>
-                        </div>
-                    </div>
-                ) : (
-                    <>
-                        <div className="text-nav">
-                            <h5>{t('messenger_box_browser.surveybot')}</h5>
-                            <span>{t('messenger_box_browser.bot')}</span>
-                        </div>
-                        <p className="p_style">{t('messenger_box_browser.this_is_the_start_of_your_direct_message')}</p>
-                        <p className="p_style">{t('messenger_box_browser.direct_messages_and_files_shared')}</p>
-                    </>
-                )}
-            </div>
-            <Row className={css(styleSheet3.customStyle as any)}>
-                {userMessagesList?.map((item, index: number) => {
-                    if (!msgClr.hasOwnProperty(item.author.username)) {
-                        let temp = msgClr;
-                        let color = '#';
-                        for (let i = 0; i < 6; i++) {
-                            color += Math.floor(Math.random() * 10);
-                        }
-                        temp[item.author.username] = color;
-                        setMsgClr(temp);
-                    }
-                    // if (!item.loginUser) {
-                    return (
-                        <Col
-                            md={24}
-                            key={index}
-                            className={css(styleSheet3.customStyleDemo as any)}
-                            style={item.isPinned ? styles : null}
-                        >
-                            {index !== 0 ? (
-                                Moment(userMessagesList[index].createdAt).format('DD/MM/YYYY') !==
-                                Moment(userMessagesList[index - 1].createdAt).format('DD/MM/YYYY') ? (
-                                    <div className="text-divider">
-                                        {Moment(item.createdAt).diff(Moment().format(), 'year') == 0
-                                            ? Moment(item.createdAt).diff(Moment().format(), 'day') == 0
-                                                ? t('messenger_box_browser.today')
-                                                : Moment(item.createdAt).diff(Moment().format(), 'day') == -1
-                                                ? t('messenger_box_browser.yesterday')
-                                                : Moment(item.createdAt).diff(Moment().format(), 'day') >= -6
-                                                ? `${Moment(item.createdAt).format('dddd')}`
-                                                : `${Moment(item.createdAt).format('MMMM DD')}`
-                                            : `${Moment(item.createdAt).format('MMMM Do, YYYY')}`}
-                                    </div>
-                                ) : (
-                                    ''
-                                )
-                            ) : (
-                                <div className="text-divider">
-                                    {Moment(item.createdAt).diff(Moment().format(), 'year') == 0
-                                        ? Moment(item.createdAt).diff(Moment().format(), 'day') == 0
-                                            ? t('messenger_box_browser.today')
-                                            : Moment(item.createdAt).diff(Moment().format(), 'day') == -1
-                                            ? t('messenger_box_browser.yesterday')
-                                            : Moment(item.createdAt).diff(Moment().format(), 'day') >= -6
-                                            ? `${Moment(item.createdAt).format('dddd')}`
-                                            : `${Moment(item.createdAt).format('MMMM DD')}`
-                                        : `${Moment(item.createdAt).format('MMMM Do, YYYY')}`}
-                                </div>
-                            )}
-                            {displayEmoji && msgIndex === index ? (
-                                <Picker
-                                    onSelect={handleOnSelect}
-                                    native={true}
-                                    set="apple"
-                                    emoji="point_up"
-                                    title={t('messenger_box_browser.pick_your_emoji')}
-                                    emojiSize={24}
-                                    perLine={6}
-                                    color="#ae65c5"
-                                    sheetSize={16}
-                                    showPreview={true}
-                                    showSkinTones={false}
-                                    notFoundEmoji="sleuth_or_spy"
-                                />
-                            ) : (
-                                ''
-                            )}
-                            <div className="btn-hover">
-                                <div className="hover_btns">
-                                    <button>
-                                        <BiDotsHorizontalRounded
-                                            fontSize="16px"
-                                            fill="gray"
-                                            onClick={() => setShowMoreAction(!showMoreAction)}
-                                        />
-                                        {showMoreAction ? (
-                                            <MoreAction
-                                                handleShowSideBar={handleShowSideBar}
-                                                handleDeleteMessage={() => {
-                                                    handleDeleteMessage(item.id);
-                                                    setShowMoreAction(false);
-                                                }}
-                                                handleEditMessage={() => handleShow(item.id, item.message)}
-                                                handlePinBtn={handlePinBtn}
-                                                id={item.id}
-                                                pinMessage={pinMessage}
-                                            />
-                                        ) : null}
-                                    </button>
-                                    <button onClick={() => emojiClick(index, item.id)}>
-                                        <MdOutlineEmojiEmotions fontSize="16px" fill="gray" />
-                                    </button>
-                                    <button>
-                                        <IoBookmarkOutline fontSize="16px" color="gray" />
-                                    </button>
-                                    <button onClick={handleShowSideBar}>
-                                        <BsReply fontSize="16px" fill="gray" />
-                                    </button>
-                                </div>
-                            </div>
-                            {/*<div className="text-divider">Today</div>*/}
-                            {item.message.endsWith('joined the channel') ? (
-                                <Comment
-                                    className="chat-cmt"
-                                    // actions={actions}
-                                    // author={<a>{item.author !== null?item.author.username:'User'}</a>}
-                                    author={<a> {t('messenger_box_browser.system')} </a>}
-                                    avatar={
-                                        <Avatar style={{ background: 'gray' }}>
-                                            <MdOutlineDesktopMac
-                                                style={{ marginTop: '4px', width: '24px', height: '25px' }}
-                                            />
-                                        </Avatar>
-                                    }
-                                    content={
-                                        <>
-                                            <p>
-                                                <a>{item.message.split(' ')[0]}</a>` $
-                                                {item.message.split(' ').splice(1).join(' ')}
-                                            </p>
-                                        </>
-                                    }
-                                    datetime={
-                                        <div>
-                                            <span>{Moment(item.createdAt).format('HH:mm A')}</span>
-                                        </div>
-                                    }
-                                />
-                            ) : (
-                                <Comment
-                                    className="chat-cmt"
-                                    // actions={actions}
-                                    // author={<a>{item.author !== null?item.author.username:'User'}</a>}
-                                    author={<a>{item.author ? item.author.username : 'user'}</a>}
-                                    avatar={
-                                        <Popover
-                                            placement="right"
-                                            title={<a>{'@' + item.author.username}</a>}
-                                            content={
-                                                <div
-                                                    style={{
-                                                        display: 'flex',
-                                                        flexDirection: 'column',
-                                                    }}
-                                                >
-                                                    <Avatar
-                                                        size="large"
-                                                        style={{
-                                                            backgroundColor: 'red',
-                                                            marginBottom: '15px',
-                                                            marginLeft: '25px',
-                                                            alignItems: 'center',
-                                                        }}
-                                                    >
-                                                        {item.author.username
-                                                            .match(/\b(\w)/g)
-                                                            .join('')
-                                                            .toUpperCase()}
-                                                    </Avatar>
-                                                    <p style={{ fontWeight: 'bold' }}>{item.author.username}</p>
-                                                    {/*<p>Survey bot collects your..</p>*/}
-                                                    <div>
-                                                        <h5>
-                                                            {t('messenger_box_browser.local_time')}
-                                                            <span>{Moment(item.createdAt).format('HH:mm A')}</span>
-                                                        </h5>
-                                                    </div>
-                                                    <a className="icon-popover">
-                                                        <BiPaperPlane
-                                                            style={{ fontSize: '15px', marginRight: '3px' }}
-                                                        />
-                                                        {t('messenger_box_browser.send_message')}
-                                                    </a>
-                                                </div>
-                                            }
-                                            trigger="click"
-                                        >
-                                            <Avatar style={{ backgroundColor: `${msgClr[item.author.username]}` }}>
-                                                {item.author.username
-                                                    .match(/\b(\w)/g)
-                                                    .join('')
-                                                    .toUpperCase()}
-                                            </Avatar>
-                                        </Popover>
-                                    }
-                                    content={
-                                        <>
-                                            <p style={{ color: 'black' }}>{item?.message}</p>
-                                            {item.files.totalCount > 0
-                                                ? item.files.data.map((file) => {
-                                                      if (
-                                                          ['gif', 'png', 'bmp', 'jpeg', 'jpg'].includes(file.extension)
-                                                      ) {
-                                                          return (
-                                                              <div className="msg_img_preview">
-                                                                  <div className="options_style">
-                                                                      <MdOutlineCloudDownload
-                                                                          onClick={() => handleDownload(file.id)}
-                                                                      />
-                                                                      <RiShareForwardLine />
-                                                                      <BiDotsVerticalRounded />
-                                                                  </div>
-                                                                  <img
-                                                                      src={file.url}
-                                                                      className="preview_img_style"
-                                                                      onClick={(e) => handleShowPreview(file, item)}
-                                                                  ></img>
-                                                                  <a
-                                                                      href={file.url}
-                                                                      download={file.name}
-                                                                      id={file.id}
-                                                                      style={{ display: 'none' }}
-                                                                  ></a>
-                                                              </div>
-                                                          );
-                                                      }
-                                                  })
-                                                : ''}
-                                            {emoji && item.id === id
-                                                ? emoji.map((e, index) => {
-                                                      return (
-                                                          <button
-                                                              className="reactionClass"
-                                                              onClick={() => {
-                                                                  removeEmoji(index);
-                                                              }}
-                                                          >
-                                                              {e}
-                                                              <span>1</span>
-                                                          </button>
-                                                      );
-                                                  })
-                                                : ''}
-                                            {emoji.length && item.id === id ? (
-                                                <button
-                                                    style={{
-                                                        border: '0px',
-                                                        fontSize: '20px',
-                                                        padding: '2px',
-                                                        position: 'absolute',
-                                                    }}
-                                                >
-                                                    <MdOutlineAddReaction fill="gray" />
-                                                </button>
-                                            ) : (
-                                                ''
-                                            )}
-                                        </>
-                                    }
-                                    datetime={
-                                        // <Tooltip title={Moment().format('YYYY-MM-DD HH:mm:ss')}>
-                                        <div>
-                                            {/*<span>{Moment().fromNow()}</span>*/}
-                                            <span>{Moment(item.createdAt).format('HH:mm A')}</span>
-                                        </div>
-                                        /*</Tooltip>*/
-                                    }
-                                />
-                            )}
-                        </Col>
-                    );
-                    // } else {
-                    //     return (
-                    //         <Col
-                    //             md={24}
-                    //             key={index}
-                    //             className={css(styleSheet3.customStyleDemo as any)}
-                    //             style={item?.isPin ? styles : null}
-                    //         >
-                    //             {displayEmoji && msgIndex === index ?
-                    //                 <Picker
-                    //                     onSelect={handleOnSelect}
-                    //                     native={true}
-                    //                     set="apple"
-                    //                     emoji="point_up"
-                    //                     title="Pick your emoji..."
-                    //                     emojiSize={24}
-                    //                     perLine={6}
-                    //                     color="#ae65c5"
-                    //                     sheetSize={16}
-                    //                     showPreview={true}
-                    //                     showSkinTones={false}
-                    //                     notFoundEmoji="sleuth_or_spy"
-                    //                 /> : ''
-                    //             }
-                    //             <div className="btn-hover">
-                    //                 <div className="hover_btns">
-                    //                     <button>
-                    //                         <BiDotsHorizontalRounded
-                    //                             fontSize="16px"
-                    //                             fill="gray"
-                    //                             onClick={() => setShowMoreAction(!showMoreAction)}
-                    //                         />
-                    //                         {showMoreAction ? (
-                    //                             <MoreAction
-                    //                                 handleShowSideBar={handleShowSideBar}
-                    //                                 handleDeleteMessage={handleDeleteMessage}
-                    //                                 id={item.id}
-                    //                                 handlePinBtn={handlePinBtn}
-                    //                                 pinMessage={pinMessage}
-                    //                             />
-                    //                         ) : null}
-                    //                     </button>
-                    //                     <button onClick={() => emojiClick(index)}>
-                    //                         <MdOutlineEmojiEmotions fontSize="16px" fill="gray"/>
-                    //                     </button>
-                    //                     <button>
-                    //                         <IoBookmarkOutline fontSize="16px" color="gray"/>
-                    //                     </button>
-                    //                     <button onClick={handleShowSideBar}>
-                    //                         <BsReply fontSize="16px" fill="gray"/>
-                    //                     </button>
-                    //                 </div>
-                    //             </div>
-                    //             {
-                    //                 item.timeIsToday ?
-                    //                     !separatorDisplaying ?
-                    //                         <>
-                    //                             <div className="text-divider">Today</div>
-                    //                             {separatorDisplaying = true}
-                    //                         </>: '' : ''
-                    //             }
-                    //             <Comment
-                    //                 // actions={actions}
-                    //                 author={<a>{getUserAccount?.username}</a>}
-                    //                 avatar={
-                    //                     <Popover
-                    //                         placement="right"
-                    //                         title={<a>{'@' + getUserAccount.username}</a>}
-                    //                         content={
-                    //                             <div
-                    //                                 style={{
-                    //                                     display: 'flex',
-                    //                                     flexDirection: 'column',
-                    //                                     alignItems: 'center',
-                    //                                 }}
-                    //                             >
-                    //                                 <Avatar
-                    //                                     size={{xxl: 100}}
-                    //                                     style={{
-                    //                                         backgroundColor: 'blue',
-                    //                                         textTransform: 'uppercase',
-                    //                                         fontSize: '50px',
-                    //                                         marginBottom: '15px',
-                    //                                     }}
-                    //                                 >
-                    //                                     {getUserAccount?.username.substring(0, 1)}
-                    //                                 </Avatar>
-                    //                                 <a>{getUserAccount?.email}</a>
-                    //                                 <div>
-                    //                                     <h5>
-                    //                                         Local Time <span>{Moment().format('HH:mm A')}</span>
-                    //                                     </h5>
-                    //                                 </div>
-                    //                                 <a
-                    //                                     className="icon-popover"
-                    //                                     style={{display: 'flex', justifyContent: 'c'}}
-                    //                                 >
-                    //                                     <BiEdit style={{fontSize: '15px', marginRight: '3px'}}/>
-                    //                                     Edit Account Setting
-                    //                                 </a>
-                    //                             </div>
-                    //                         }
-                    //                         trigger="click"
-                    //                     >
-                    //                         <Avatar style={{backgroundColor: 'blue', textTransform: 'uppercase'}}>
-                    //                             {getUserAccount?.username.substring(0, 1)}
-                    //                         </Avatar>
-                    //                     </Popover>
-                    //                 }
-                    //                 content={<p>{item?.message}</p>}
-                    //                 datetime={
-                    //                     // <Tooltip title={Moment().format('YYYY-MM-DD HH:mm:ss')}>
-                    //                     <div>
-                    //                         {/*<span>{Moment().fromNow()}</span>*/}
-                    //                         <span>{Moment().format('HH:mm A')} </span>
-                    //                     </div>
-                    //                     /*</Tooltip>*/
-                    //                 }
-                    //             />
-                    //         </Col>
-                    //     );
-                    // }
-                })}
-            </Row>
-
-            <Modal
-                className={css(styleSheet3.modalCustomStyle as any)}
-                show={showPreview}
-                onHide={() => handleClose('directChannel')}
-            >
-                <div className="mod_head_style">
-                    <Modal.Header style={{ backgroundColor: '', color: 'white', display: 'flex' }}>
-                        <div className="header_main">
-                            <div className="header_img">
-                                {clickedImage.msgDetail?.author.username
-                                    .match(/\b(\w)/g)
-                                    .join('')
-                                    .toUpperCase()}
-                            </div>
-                            <div className="header_text">
-                                <h4>{clickedImage.msgDetail?.author.username}</h4>
-                                <p>{clickedImage.file?.name}</p>
-                            </div>
-                        </div>
-                        <GrClose onClick={() => setShowPreview(false)} />
-                    </Modal.Header>
-                </div>
-                <div className="modal_main">
-                    <Modal.Body>
-                        <div>
-                            <img className="clk_img" src={clickedImage.file?.url} />
-                        </div>
-                    </Modal.Body>
-                </div>
-                <div className="mod_head_style">
-                    <Modal.Footer>
-                        <p>{t('messenger_box_browser.working')}</p>
-                    </Modal.Footer>
-                </div>
-            </Modal>
-        </div>
-    );
-};
-
-// export const ThreadMessagesList: FC<IProps> = ({ userMessagesList, handleShowSideBar }) => {
-//
-//     return <></>;
-// return (
-//     <div>
-//         <Row className={css(styleSheet3.customStyle as any)}>
-//             {userMessagesList?.map((item: IMessageList, index: number) => {
-//                 if (!item.loginUser) {
-//                     return (
-//                         <Col md={24} key={index} className={css(styleSheet3.customStyleDemo as any)}>
-//                             <div className="btn-hover">
-//                                 <div className="hover_btns">
-//                                     <button>
-//                                         <BiDotsHorizontalRounded fontSize="16px" fill="gray"/>
-//                                     </button>
-//                                     <button>
-//                                         <MdOutlineEmojiEmotions fontSize="16px" fill="gray"/>
-//                                     </button>
-//                                     <button>
-//                                         <IoBookmarkOutline fontSize="16px" color="gray"/>
-//                                     </button>
-//                                 </div>
-//                             </div>
-//                             <div className="text-divider">Text h.biu guu divider</div>
-//                             <Comment
-//                                 className="chat-cmt"
-//                                 // actions={actions}
-//                                 author={<a>Slack Bot</a>}
-//                                 avatar={
-//                                     <Avatar style={{backgroundColor: 'black'}}>
-//                                         <FaRobot style={{marginTop: '4px'}} fontSize="20px" fill="white"/>
-//                                     </Avatar>
-//                                 }
-//                                 content={<p>{item?.message}</p>}
-//                                 datetime={
-//                                     // <Tooltip title={Moment().format('YYYY-MM-DD HH:mm:ss')}>
-//                                     <div>
-//                                         {/*<span>{Moment().fromNow()}</span>*/}
-//                                         <span>{Moment().format('HH:mm A')}</span>
-//                                     </div>
-//                                     /*</Tooltip>*/
-//                                 }
-//                             ></Comment>
-//                         </Col>
-//                     );
-//                 } else {
-//                     return (
-//                         <Col md={24} key={index} className={css(styleSheet3.customStyleDemo as any)}>
-//                             <div className="btn-hover">
-//                                 <div className="hover_btns">
-//                                     <button>
-//                                         <BiDotsHorizontalRounded fontSize="16px" fill="gray"/>
-//                                     </button>
-//                                     <button>
-//                                         <MdOutlineEmojiEmotions fontSize="16px" fill="gray"/>
-//                                     </button>
-//                                     <button>
-//                                         <IoBookmarkOutline fontSize="16px" color="gray"/>
-//                                     </button>
-//                                 </div>
-//                             </div>
-//                             <div className="text-divider">Text h.biu guu divider</div>
-//                             <Comment
-//                                 // actions={actions}
-//                                 author={<a>Han Solo</a>}
-//                                 avatar={<Avatar style={{backgroundColor: 'blue'}}>HS</Avatar>}
-//                                 content={<p>{item?.message}</p>}
-//                                 datetime={
-//                                     // <Tooltip title={Moment().format('YYYY-MM-DD HH:mm:ss')}>
-//                                     <div>
-//                                         {/*<span>{Moment().fromNow()}</span>*/}
-//                                         <span>{Moment().format('HH:mm A')} </span>
-//                                     </div>
-//                                     /*</Tooltip>*/
-//                                 }
-//                             ></Comment>
-//                         </Col>
-//                     );
-//                 }
-//             })}
-//         </Row>
-//     </div>
-// );
-// };