@messenger-box/platform-browser 10.0.3-alpha.7 → 10.0.3-alpha.74

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

@@ -1,32 +1,33 @@
 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 { BiDotsVerticalRounded } from '@react-icons/all-files/bi/BiDotsVerticalRounded';
+import { BiPaperPlane } from '@react-icons/all-files/bi/BiPaperPlane';
+import { BiDotsHorizontalRounded } from '@react-icons/all-files/bi/BiDotsHorizontalRounded';
 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 { IoBookmarkOutline } from '@react-icons/all-files/io5/IoBookmarkOutline';
+import { MdModeEdit } from '@react-icons/all-files/md/MdModeEdit';
+import { MdFavoriteBorder } from '@react-icons/all-files/md/MdFavoriteBorder';
+import { MdCloudDownload } from '@react-icons/all-files/md/MdCloudDownload';
+import { MdSentimentSatisfied } from '@react-icons/all-files/md/MdSentimentSatisfied';
+import { MdDesktopMac } from '@react-icons/all-files/md/MdDesktopMac';
+// import {
+//     MdModeEditOutline,
+//     MdOutlineAddReaction,
+//     MdOutlineCloudDownload,
+//     MdOutlineDesktopMac,
+//     MdOutlineEmojiEmotions,
+// } from 'react-icons/md';
+import { VscChromeClose } from '@react-icons/all-files/vsc/VscChromeClose';
+import { FaRobot } from '@react-icons/all-files/fa/FaRobot';
+import { TiUserAdd } from '@react-icons/all-files/ti/TiUserAdd';
+import { RiShareForwardLine } from '@react-icons/all-files/ri/RiShareForwardLine';
+import { BsReply } from '@react-icons/all-files/bs/BsReply';
+import { GrClose } from '@react-icons/all-files/gr/GrClose';
 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[];
@@ -59,6 +60,10 @@ export const MessagesList: FC<IProps> = ({
     const [showAddMember, setShowAddMember] = useState(false);
     const [inputValue, setInputValue] = useState({ id: '', msg: '' });
     const { t } = useTranslation();
+    const [showEmoji, setShowEmoji] = useState(false);
+    const [likes, setLikes] = useState(0);
+    const [dislikes, setDislikes] = useState(0);
+    const [action, setAction] = useState<string | null>(null);
 
     console.log('-------Selected channel for chatting---------', channel);
     console.log('-------All messages for selected channel---------', userMessagesList);
@@ -124,6 +129,18 @@ export const MessagesList: FC<IProps> = ({
         document.getElementById(id).click();
     };
 
+    const like = () => {
+        setLikes(1);
+        setDislikes(0);
+        setAction('liked');
+    };
+
+    const dislike = () => {
+        setLikes(0);
+        setDislikes(1);
+        setAction('disliked');
+    };
+
     return (
         <div>
             <Modal show={show} onHide={() => handleClose('editMessage')}>
@@ -138,7 +155,12 @@ export const MessagesList: FC<IProps> = ({
                     />
                 </Modal.Header>
                 <Modal.Body>
-                    <input type="text" value={inputValue.msg} onChange={(e) => handleChange(e)} />
+                    <input
+                        type="text"
+                        value={inputValue.msg}
+                        onChange={(e) => handleChange(e)}
+                        className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    />
                 </Modal.Body>
                 <Modal.Footer>
                     <Button onClick={() => handleClose('editMessage')}>{t('messenger_box_browser.close')}</Button>
@@ -165,55 +187,42 @@ export const MessagesList: FC<IProps> = ({
                     <input type="search" onChange={(e) => handleChange(e)} />
                 </Modal.Body>
             </Modal>
-            <div className={css(styleSheet2.customStyle as any)}>
+            <div className="space-y-4">
                 {!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>
+                    <div className="relative group">
+                        <button
+                            className="flex items-center space-x-2 p-2 rounded-full hover:bg-gray-100"
+                            onClick={() => {}}
+                        >
+                            <div className="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center">
+                                <FaRobot className="text-white text-xl" />
+                            </div>
+                        </button>
+                        <div className="hidden group-hover:block absolute left-0 mt-2 w-64 p-4 bg-white rounded-lg shadow-lg">
+                            <div className="flex flex-col items-center">
+                                <div className="w-20 h-20 bg-gray-800 rounded-full flex items-center justify-center mb-4">
+                                    <FaRobot className="text-white text-3xl" />
+                                </div>
+                                <p className="font-bold">{t('messenger_box_browser.surveybot')}</p>
+                                <p className="text-sm text-gray-600">
+                                    {t('messenger_box_browser.survey_bot_collects_your')}
+                                </p>
+                                <div className="mt-2">
+                                    <h5 className="text-sm">
                                         {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' }} />
+                                <button className="mt-4 flex items-center text-blue-600 hover:text-blue-700">
+                                    <BiPaperPlane className="mr-1" />
                                     {t('messenger_box_browser.send_message')}
-                                </a>
+                                </button>
                             </div>
-                        }
-                        trigger="click"
-                    >
-                        <Avatar className="main_avatar">
-                            <FaRobot className="inner_main_avatar" />
-                        </Avatar>
-                    </Popover>
+                        </div>
+                    </div>
                 ) : (
-                    ''
-                )}
-                {channel ? (
-                    <div>
-                        <p style={{ fontSize: '20px', fontWeight: 600, color: '#4b4a4e' }}>
+                    <div className="space-y-4">
+                        <p className="text-xl font-semibold text-gray-700">
                             {t('messenger_box_browser.beginning_of')}
                             {channel.type !== 'DIRECT'
                                 ? channel.title
@@ -223,542 +232,249 @@ export const MessagesList: FC<IProps> = ({
                                     : channel.displayName.split('_')[1].split('-')[1]
                                 : channel.displayName}
                         </p>
-                        {channel.type !== 'DIRECT' ? (
-                            ''
-                        ) : (
-                            <h5>{t('messenger_box_browser.direct_messages_and_files_shared')}</h5>
+                        {channel.type !== 'DIRECT' ? null : (
+                            <h5 className="text-gray-600">
+                                {t('messenger_box_browser.direct_messages_and_files_shared')}
+                            </h5>
                         )}
-                        <div className="di_chat_head">
-                            <a
-                                style={{ marginRight: '1.5em' }}
-                                onClick={() => {
-                                    setShowAddMember(true);
-                                }}
+                        <div className="flex space-x-6">
+                            <button
+                                className="flex items-center text-gray-600 hover:text-gray-800"
+                                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>
+                                <TiUserAdd className="mr-2" />
+                                <span>{t('messenger_box_browser.invite_others_to_this_channel')}</span>
+                            </button>
+                            <button className="flex items-center text-gray-600 hover:text-gray-800">
+                                <MdModeEdit className="mr-2" />
+                                <span>{t('messenger_box_browser.set_a_header')}</span>
+                            </button>
                         </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);
+
+                <div className="space-y-4">
+                    {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);
                         }
-                        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>
+
+                        return (
+                            <div
+                                key={index}
+                                className={`p-4 ${item.isPinned ? 'bg-yellow-50' : 'bg-white'} relative group`}
+                            >
+                                {/* Date Separator */}
+                                {index !== 0 ? (
+                                    Moment(userMessagesList[index].createdAt).format('DD/MM/YYYY') !==
+                                    Moment(userMessagesList[index - 1].createdAt).format('DD/MM/YYYY') ? (
+                                        <div className="flex items-center my-4">
+                                            <div className="flex-1 border-t border-gray-300"></div>
+                                            <span className="px-3 text-sm text-gray-500">
+                                                {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')}`}
+                                            </span>
+                                            <div className="flex-1 border-t border-gray-300"></div>
+                                        </div>
+                                    ) : null
                                 ) : (
-                                    ''
-                                )
-                            ) : (
-                                <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)}
+                                    <div className="flex items-center my-4">
+                                        <div className="flex-1 border-t border-gray-300"></div>
+                                        <span className="px-3 text-sm text-gray-500">
+                                            {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')}`}
+                                        </span>
+                                        <div className="flex-1 border-t border-gray-300"></div>
+                                    </div>
+                                )}
+
+                                {/* Emoji Picker */}
+                                {displayEmoji && msgIndex === index && (
+                                    <div className="absolute bottom-full mb-2">
+                                        <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"
                                         />
-                                        {showMoreAction ? (
-                                            <MoreAction
-                                                handleShowSideBar={handleShowSideBar}
-                                                handleDeleteMessage={() => {
-                                                    handleDeleteMessage(item.id);
-                                                    setShowMoreAction(false);
-                                                }}
-                                                handleEditMessage={() => handleShow(item.id, item.message)}
-                                                handlePinBtn={handlePinBtn}
-                                                id={item.id}
-                                                pinMessage={pinMessage}
-                                            />
-                                        ) : null}
+                                    </div>
+                                )}
+
+                                {/* Message Actions */}
+                                <div className="hidden group-hover:flex absolute right-4 top-2 bg-white shadow-lg rounded-md">
+                                    <button
+                                        className="p-2 hover:bg-gray-100 rounded-l-md"
+                                        onClick={() => setShowMoreAction(!showMoreAction)}
+                                    >
+                                        <BiDotsHorizontalRounded className="text-gray-500" />
                                     </button>
-                                    <button onClick={() => emojiClick(index, item.id)}>
-                                        <MdOutlineEmojiEmotions fontSize="16px" fill="gray" />
+                                    <button
+                                        className="p-2 hover:bg-gray-100"
+                                        onClick={() => emojiClick(index, item.id)}
+                                    >
+                                        <MdSentimentSatisfied className="text-gray-500" />
                                     </button>
-                                    <button>
-                                        <IoBookmarkOutline fontSize="16px" color="gray" />
+                                    <button className="p-2 hover:bg-gray-100">
+                                        <IoBookmarkOutline className="text-gray-500" />
                                     </button>
-                                    <button onClick={handleShowSideBar}>
-                                        <BsReply fontSize="16px" fill="gray" />
+                                    <button className="p-2 hover:bg-gray-100 rounded-r-md" onClick={handleShowSideBar}>
+                                        <BsReply className="text-gray-500" />
                                     </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"
+
+                                {/* Message Content */}
+                                <div className="flex space-x-3">
+                                    <div className="flex-shrink-0">
+                                        <div
+                                            className="w-10 h-10 rounded-full flex items-center justify-center text-white"
+                                            style={{ backgroundColor: msgClr[item.author.username] }}
                                         >
-                                            <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>
+                                            {item.author.username
+                                                .match(/\b(\w)/g)
+                                                .join('')
+                                                .toUpperCase()}
+                                        </div>
+                                    </div>
+                                    <div className="flex-1 min-w-0">
+                                        <div className="flex items-center space-x-2">
+                                            <span className="font-medium text-gray-900">
+                                                {item.author ? item.author.username : 'user'}
+                                            </span>
+                                            <span className="text-sm text-gray-500">
+                                                {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>
+                                        <p className="mt-1 text-gray-900">{item.message}</p>
 
-            <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">
+                                        {/* Files/Images */}
+                                        {item.files.totalCount > 0 && (
+                                            <div className="mt-2 space-y-2">
+                                                {item.files.data.map((file) => {
+                                                    if (['gif', 'png', 'bmp', 'jpeg', 'jpg'].includes(file.extension)) {
+                                                        return (
+                                                            <div key={file.id} className="relative group">
+                                                                <img
+                                                                    src={file.url}
+                                                                    alt={file.name}
+                                                                    className="max-w-md rounded-lg cursor-pointer"
+                                                                    onClick={() => handleShowPreview(file, item)}
+                                                                />
+                                                                <div className="hidden group-hover:flex absolute top-2 right-2 space-x-2">
+                                                                    <button
+                                                                        className="p-1 bg-black bg-opacity-50 rounded-full text-white hover:bg-opacity-70"
+                                                                        onClick={() => handleDownload(file.id)}
+                                                                    >
+                                                                        <MdCloudDownload />
+                                                                    </button>
+                                                                    <button className="p-1 bg-black bg-opacity-50 rounded-full text-white hover:bg-opacity-70">
+                                                                        <RiShareForwardLine />
+                                                                    </button>
+                                                                    <button className="p-1 bg-black bg-opacity-50 rounded-full text-white hover:bg-opacity-70">
+                                                                        <BiDotsVerticalRounded />
+                                                                    </button>
+                                                                </div>
+                                                                <a
+                                                                    href={file.url}
+                                                                    download={file.name}
+                                                                    id={file.id}
+                                                                    className="hidden"
+                                                                />
+                                                            </div>
+                                                        );
+                                                    }
+                                                    return null;
+                                                })}
+                                            </div>
+                                        )}
+
+                                        {/* Reactions */}
+                                        {emoji && item.id === id && (
+                                            <div className="mt-2 flex flex-wrap gap-2">
+                                                {emoji.map((e, index) => (
+                                                    <button
+                                                        key={index}
+                                                        className="inline-flex items-center px-2 py-1 rounded-full bg-gray-100 hover:bg-gray-200"
+                                                        onClick={() => removeEmoji(index)}
+                                                    >
+                                                        {e}
+                                                        <span className="ml-1 text-xs text-gray-600">1</span>
+                                                    </button>
+                                                ))}
+                                                {emoji.length > 0 && (
+                                                    <button className="p-1 text-gray-500 hover:text-gray-700">
+                                                        <MdFavoriteBorder />
+                                                    </button>
+                                                )}
+                                            </div>
+                                        )}
+                                    </div>
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+
+            {/* Image Preview Modal */}
+            <Modal show={showPreview} onHide={() => setShowPreview(false)} className="max-w-4xl mx-auto">
+                <div className="bg-gray-900 text-white p-4">
+                    <div className="flex items-center justify-between">
+                        <div className="flex items-center space-x-4">
+                            <div className="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center">
                                 {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>
+                                <h4 className="font-medium">{clickedImage.msgDetail?.author.username}</h4>
+                                <p className="text-sm text-gray-300">{clickedImage.file?.name}</p>
                             </div>
                         </div>
-                        <GrClose onClick={() => setShowPreview(false)} />
-                    </Modal.Header>
+                        <button className="text-gray-300 hover:text-white" onClick={() => setShowPreview(false)}>
+                            <GrClose />
+                        </button>
+                    </div>
                 </div>
-                <div className="modal_main">
-                    <Modal.Body>
-                        <div>
-                            <img className="clk_img" src={clickedImage.file?.url} />
-                        </div>
-                    </Modal.Body>
+                <div className="bg-black flex items-center justify-center p-4">
+                    <img
+                        src={clickedImage.file?.url}
+                        alt={clickedImage.file?.name}
+                        className="max-h-[80vh] object-contain"
+                    />
                 </div>
-                <div className="mod_head_style">
-                    <Modal.Footer>
-                        <p>{t('messenger_box_browser.working')}</p>
-                    </Modal.Footer>
+                <div className="bg-gray-900 text-white p-4">
+                    <p>{t('messenger_box_browser.working')}</p>
                 </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>
-// );
-// };