@messenger-box/platform-browser 0.0.1-alpha.42 → 0.0.1-alpha.420

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

@@ -1,324 +1,748 @@
-import React, { FC } from 'react';
-import { useGetUserAccountQuery } from '@adminide-stack/account-api-client';
-import { Col, Row } from 'antd';
+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 { IMessageList } from '../types/message';
-import 'antd/dist/antd.css';
-import { Comment, Popover, Avatar } from 'antd';
-import { BiEdit } from 'react-icons/bi';
-import {  BiPaperPlane } from 'react-icons/bi';
+// import 'antd/dist/antd.css';
+import { BiDotsVerticalRounded, BiPaperPlane, BiDotsHorizontalRounded } from 'react-icons/bi';
 import Moment from 'moment';
-import { useFela } from 'react-fela';
+import { css } from '@emotion/css';
 import { styleSheet3 } from './style';
 import { IoBookmarkOutline } from 'react-icons/io5';
-import { BiDotsHorizontalRounded, BsReply, FaRobot, MdOutlineEmojiEmotions } from 'react-icons/all';
+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 { styleSheet2 } from '../../post/style';
+import { Picker } from 'emoji-mart';
+import MoreAction from '../more_action';
+import { Button, Modal } from 'react-bootstrap';
+import { IPostFragment } from '@messenger-box/core';
+
 interface IProps {
-    userMessagesList: IMessageList[];
+    userMessagesList: IPostFragment[];
     handleShowSideBar: () => void;
+    handleDeleteMessage: any;
+    handleEditMessage: any;
+    channel: any;
+    currentUsrId: string;
 }
 
-export const MessagesList: FC<IProps> = ({ userMessagesList, handleShowSideBar }) => {
-    // const { data: { getOrganizationMembers: orgMembers } = {} } = useGetOrganizationMembersQuery();
+export const MessagesList: FC<IProps> = ({
+    userMessagesList,
+    handleShowSideBar,
+    handleDeleteMessage,
+    handleEditMessage,
+    channel,
+    currentUsrId
+}) => {
+    const [showMoreAction, setShowMoreAction] = useState<boolean>(false);
     const userId = useSelector<any>((state) => state.user.auth0UserId);
-    const { data: { getUserAccount } = {} } = useGetUserAccountQuery({
-        //@ts-ignore
-        variables: { userId },
-        skip: !userId,
-    });
-    const { css } = useFela();
+    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: '' });
+
+    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>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')}>Close</Button>
+                    <Button
+                        style={{ backgroundColor: '#2b5ebf', color: 'white' }}
+                        onClick={() => handleEdit('editMessage')}
+                    >
+                        Save
+                    </Button>
+                </Modal.Footer>
+            </Modal>
+            <Modal show={showAddMember} onHide={() => handleClose('addMember')}>
+                <Modal.Header
+                    style={{ backgroundColor: '#2b5ebf', color: 'white', display: 'flex', alignItems: 'center' }}
+                >
+                    <Modal.Title>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)}>
-                <Popover
-                    placement="right"
-                    title={<a>{'@' + 'surveybot'}</a>}
-                    content={
-                        <div
-                            style={{
-                                display: 'flex',
-                                flexDirection: 'column',
-                            }}
-                        >
-                            <Avatar
-                                size={{ xxl: 100 }}
+                {!channel ? (
+                    <Popover
+                        placement="right"
+                        title={<a>{'@' + 'surveybot'}</a>}
+                        content={
+                            <div
                                 style={{
-                                    backgroundColor: 'black',
-                                    marginBottom: '15px',
-                                    marginLeft: '25px',
-                                    alignItems: 'center',
+                                    display: 'flex',
+                                    flexDirection: 'column',
                                 }}
                             >
-                                <FaRobot style={{ marginTop: '22px' }} fontSize="50px" fill="white" />
-                            </Avatar>
-                            <p style={{ fontWeight: 'bold' }}>Surveybot</p>
-                            <p>Survey bot collects your..</p>
-                            <div>
-                                <h5>
-                                    Local Time <span>{Moment().format('HH:mm A')}</span>
-                                </h5>
+                                <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' }}>Surveybot</p>
+                                <p>Survey bot collects your..</p>
+                                <div>
+                                    <h5>
+                                        Local Time <span>{Moment().format('HH:mm A')}</span>
+                                    </h5>
+                                </div>
+                                <a className="icon-popover">
+                                    <BiPaperPlane style={{ fontSize: '15px', marginRight: '3px' }} />
+                                    Send Message
+                                </a>
                             </div>
-                            <a className="icon-popover"><BiPaperPlane style={{fontSize : '15px' , marginRight : '3px'}}/>Send Message</a>
+                        }
+                        trigger="click"
+                    >
+                        <Avatar className="main_avatar">
+                            <FaRobot className="inner_main_avatar" />
+                        </Avatar>
+                    </Popover>
+                ) : (
+                    ''
+                )}
+                {channel ? (
+                    <div>
+                        <p style={{ fontSize: '20px', fontWeight: 600, color: '#4b4a4e' }}>
+                            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>Direct messages and files shared here are not shown to people outside this area.</h5>
+                        )}
+                        <div className='di_chat_head'>
+                            <a
+                                style={{ marginRight: '1.5em' }}
+                                onClick={() => {
+                                    setShowAddMember(true);
+                                }}
+                            >
+                                <TiUserAdd /> <h5>Invite others to this channel</h5>
+                            </a>
+                            <a>
+                                <MdModeEditOutline /> <h5>Set a Header</h5>
+                            </a>
                         </div>
-                    }
-                    trigger="click"
-                >
-                    <Avatar className="main_avatar">
-                        <FaRobot className="inner_main_avatar" />
-                    </Avatar>
-                </Popover>
-                <div className="text-nav">
-                    <h5>surveybot</h5>
-                    <span>BOT</span>
-                </div>
-                <p className="p_style">This is the start of your direct message history with surveybot.</p>
-                <p className="p_style">
-                    Direct messages and files shared here are not shown to people outside this area.
-                </p>
+                    </div>
+                ) : (
+                    <>
+                        <div className="text-nav">
+                            <h5>surveybot</h5>
+                            <span>BOT</span>
+                        </div>
+                        <p className="p_style">This is the start of your direct message history with surveybot.</p>
+                        <p className="p_style">
+                            Direct messages and files shared here are not shown to people outside this area.
+                        </p>
+                    </>
+                )}
             </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>
-                                        <button onClick={handleShowSideBar}>
-                                            <BsReply fontSize="16px" fill="gray" />
-                                        </button>
+                {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
+                                                ? 'Today'
+                                                : Moment(item.createdAt).diff(Moment().format(), "day") == -1
+                                                    ? '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
+                                            ? 'Today'
+                                            : Moment(item.createdAt).diff(Moment().format(), "day") == -1
+                                                ? '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="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 className="text-divider">Today</div>
+                            </div>
+                            {/*<div className="text-divider">Today</div>*/}
+                            {item.message.endsWith('joined the channel')
+                                ?
                                 <Comment
                                     className="chat-cmt"
                                     // actions={actions}
-                                    author={<a>Slack Bot</a>}
+                                    // author={<a>{item.author !== null?item.author.username:'User'}</a>}
+                                    author={<a>System</a>}
                                     avatar={
-                                        <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' }}>Surveybot</p>
-                                                    <p>Survey bot collects your..</p>
-                                                    <div>
-                                                        <h5>
-                                                            Local Time <span>{Moment().format('HH:mm A')}</span>
-                                                        </h5>
-                                                    </div>
-                                                    <a className="icon-popover"><BiPaperPlane style={{fontSize : '15px' , marginRight : '3px' }} />Send Message</a>
-                                                </div>
-                                            }
-                                            trigger="click"
-                                        >
-                                            <Avatar style={{ backgroundColor: 'black' }}>
-                                                <FaRobot style={{ marginTop: '4px' }} fontSize="20px" fill="white" />
-                                            </Avatar>
-                                        </Popover>
+                                        <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>
+                                        </>
                                     }
-                                    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>
+                                            <span>{Moment(item.createdAt).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>
-                                        <button onClick={handleShowSideBar}>
-                                            <BsReply fontSize="16px" fill="gray" />
-                                        </button>
-                                    </div>
-                                </div>
-                                <div className="text-divider">Today</div>
+                                />
+                                :
                                 <Comment
+                                    className="chat-cmt"
                                     // actions={actions}
-                                    author={<a>{getUserAccount?.username}</a>}
+                                    // 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>{'@' + getUserAccount.username}</a>}
+                                            title={<a>{'@' + item.author.username}</a>}
                                             content={
                                                 <div
                                                     style={{
                                                         display: 'flex',
                                                         flexDirection: 'column',
-                                                        alignItems: 'center',
                                                     }}
                                                 >
                                                     <Avatar
-                                                        size={{ xxl: 100 }}
+                                                        size="large"
                                                         style={{
-                                                            backgroundColor: 'blue',
-                                                            textTransform: 'uppercase',
-                                                            fontSize: '50px',
+                                                            backgroundColor: 'red',
                                                             marginBottom: '15px',
+                                                            marginLeft: '25px',
+                                                            alignItems: 'center',
                                                         }}
                                                     >
-                                                        {getUserAccount?.username.substring(0, 1)}
+                                                        {item.author.username
+                                                            .match(/\b(\w)/g)
+                                                            .join('')
+                                                            .toUpperCase()}
                                                     </Avatar>
-                                                    <a>{getUserAccount?.email}</a>
+                                                    <p style={{ fontWeight: 'bold' }}>{item.author.username}</p>
+                                                    {/*<p>Survey bot collects your..</p>*/}
                                                     <div>
                                                         <h5>
-                                                            Local Time <span>{Moment().format('HH:mm A')}</span>
+                                                            Local Time{' '}
+                                                            <span>{Moment(item.createdAt).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>
+                                                    <a className="icon-popover">
+                                                        <BiPaperPlane style={{ fontSize: '15px', marginRight: '3px' }} />
+                                                        Send Message
+                                                    </a>
                                                 </div>
                                             }
                                             trigger="click"
                                         >
-                                            <Avatar style={{ backgroundColor: 'blue', textTransform: 'uppercase' }}>
-                                                {getUserAccount?.username.substring(0, 1)}
+                                            <Avatar style={{ backgroundColor: `${msgClr[item.author.username]}` }}>
+                                                {item.author.username
+                                                    .match(/\b(\w)/g)
+                                                    .join('')
+                                                    .toUpperCase()}
                                             </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>*/
-                                    }
-                                ></Comment>
-                            </Col>
-                        );
-                    }
-                })}
-            </Row>
-        </div>
-    );
-};
-
-export const ThreadMessagesList: FC<IProps> = ({userMessagesList, handleShowSideBar}) => {
-
-    const {css} = useFela();
-
-
-    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>
+                                        <>
+                                            <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().format('HH:mm A')} </span>
+                                            <span>{Moment(item.createdAt).format('HH:mm A')}</span>
                                         </div>
                                         /*</Tooltip>*/
                                     }
-                                >
-
-                                </Comment>
-                            </Col>
-                        );
-                    }
+                                />
+                            }
+                        </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>
-        </div>
 
+            <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>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>
+// );
+// };