@messenger-box/platform-browser 10.0.3-alpha.56 → 10.0.3-alpha.62

package/lib/components/messenger/messagesList/index.js

@@ -1,4 +1,4 @@
-import React__default,{useState}from'react';import {Popover,Avatar,Row,Col}from'antd';import {Comment}from'@ant-design/compatible';import {useSelector}from'react-redux';import {useTranslation}from'react-i18next';import {BiPaperPlane,BiDotsHorizontalRounded,BiDotsVerticalRounded}from'react-icons/bi';import Moment from'moment';import {css}from'@emotion/css';import {styleSheet3}from'./style.js';import {IoBookmarkOutline}from'react-icons/io5';import {MdModeEditOutline,MdOutlineEmojiEmotions,MdOutlineDesktopMac,MdOutlineCloudDownload,MdOutlineAddReaction}from'react-icons/md';import {VscChromeClose}from'react-icons/vsc';import {FaRobot}from'react-icons/fa';import {TiUserAdd}from'react-icons/ti';import {RiShareForwardLine}from'react-icons/ri';import {BsReply}from'react-icons/bs';import {GrClose}from'react-icons/gr';import {Picker}from'emoji-mart';import {Modal,Button}from'react-bootstrap';import MoreAction from'../more_action/index.js';import {styleSheet2}from'../../post/style.js';const MessagesList = ({
+import React__default,{useState}from'react';import {useSelector}from'react-redux';import {useTranslation}from'react-i18next';import {BiPaperPlane,BiDotsHorizontalRounded,BiDotsVerticalRounded}from'react-icons/bi';import Moment from'moment';import {IoBookmarkOutline}from'react-icons/io5';import {MdModeEditOutline,MdOutlineEmojiEmotions,MdOutlineCloudDownload,MdOutlineAddReaction}from'react-icons/md';import {VscChromeClose}from'react-icons/vsc';import {FaRobot}from'react-icons/fa';import {TiUserAdd}from'react-icons/ti';import {RiShareForwardLine}from'react-icons/ri';import {BsReply}from'react-icons/bs';import {GrClose}from'react-icons/gr';import {Picker}from'emoji-mart';import {Modal,Button}from'react-bootstrap';const MessagesList = ({
   userMessagesList,
   handleShowSideBar,
   handleDeleteMessage,
@@ -25,6 +25,10 @@ import React__default,{useState}from'react';import {Popover,Avatar,Row,Col}from'
   const {
     t
   } = useTranslation();
+  const [showEmoji, setShowEmoji] = useState(false);
+  const [likes, setLikes] = useState(0);
+  const [dislikes, setDislikes] = useState(0);
+  const [action, setAction] = useState(null);
   console.log('-------Selected channel for chatting---------', channel);
   console.log('-------All messages for selected channel---------', userMessagesList);
   const emojiClick = (msgId, id) => {
@@ -38,15 +42,6 @@ import React__default,{useState}from'react';import {Popover,Avatar,Row,Col}from'
     setDisplayEmoji(false);
     setMsgIndex(null);
   };
-  const handlePinBtn = id => {
-    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);
@@ -66,13 +61,6 @@ import React__default,{useState}from'react';import {Popover,Avatar,Row,Col}from'
         }
     }
   };
-  const handleShow = (id, msg) => {
-    setInputValue({
-      id: id,
-      msg: msg
-    });
-    setShow(true);
-  };
   const handleChange = e => {
     setInputValue({
       ...inputValue,
@@ -82,9 +70,6 @@ import React__default,{useState}from'react';import {Popover,Avatar,Row,Col}from'
   const removeEmoji = index => {
     setEmoji(emoji.filter(e => emoji.indexOf(e) !== index));
   };
-  const styles = {
-    backgroundColor: '#fffbed'
-  };
   const handleShowPreview = (file, msgDetails) => {
     setClickedImage({
       file: file,
@@ -115,7 +100,8 @@ import React__default,{useState}from'react';import {Popover,Avatar,Row,Col}from'
   })), React__default.createElement(Modal.Body, null, React__default.createElement("input", {
     type: "text",
     value: inputValue.msg,
-    onChange: e => handleChange(e)
+    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"
   })), React__default.createElement(Modal.Footer, null, React__default.createElement(Button, {
     onClick: () => handleClose('editMessage')
   }, t('messenger_box_browser.close')), React__default.createElement(Button, {
@@ -145,71 +131,55 @@ import React__default,{useState}from'react';import {Popover,Avatar,Row,Col}from'
     type: "search",
     onChange: e => handleChange(e)
   }))), React__default.createElement("div", {
-    className: css(styleSheet2.customStyle)
-  }, !channel ? React__default.createElement(Popover, {
-    placement: "right",
-    title: React__default.createElement("a", null, '@' + 'surveybot'),
-    content: React__default.createElement("div", {
-      style: {
-        display: 'flex',
-        flexDirection: 'column'
-      }
-    }, React__default.createElement(Avatar, {
-      size: {
-        xxl: 100
-      },
-      style: {
-        backgroundColor: 'black',
-        marginBottom: '15px',
-        marginLeft: '25px',
-        alignItems: 'center'
-      }
-    }, React__default.createElement(FaRobot, {
-      style: {
-        marginTop: '22px'
-      },
-      fontSize: "50px",
-      fill: "white"
-    })), React__default.createElement("p", {
-      style: {
-        fontWeight: 'bold'
-      }
-    }, t('messenger_box_browser.surveybot')), React__default.createElement("p", null, t('messenger_box_browser.survey_bot_collects_your')), React__default.createElement("div", null, React__default.createElement("h5", null, t('messenger_box_browser.local_time'), ' ', React__default.createElement("span", null, Moment().format('HH:mm A')))), React__default.createElement("a", {
-      className: "icon-popover"
-    }, React__default.createElement(BiPaperPlane, {
-      style: {
-        fontSize: '15px',
-        marginRight: '3px'
-      }
-    }), t('messenger_box_browser.send_message'))),
-    trigger: "click"
-  }, React__default.createElement(Avatar, {
-    className: "main_avatar"
+    className: "space-y-4"
+  }, !channel ? React__default.createElement("div", {
+    className: "relative group"
+  }, React__default.createElement("button", {
+    className: "flex items-center space-x-2 p-2 rounded-full hover:bg-gray-100",
+    onClick: () => {}
+  }, React__default.createElement("div", {
+    className: "w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center"
   }, React__default.createElement(FaRobot, {
-    className: "inner_main_avatar"
-  }))) : '', channel ? React__default.createElement("div", null, React__default.createElement("p", {
-    style: {
-      fontSize: '20px',
-      fontWeight: 600,
-      color: '#4b4a4e'
-    }
-  }, t('messenger_box_browser.beginning_of'), channel.type !== 'DIRECT' ? channel.title : channel.displayName.split('_').length === 2 ? channel.displayName.split('_')[0].split('-')[0] !== currentUsrId ? channel.displayName.split('_')[0].split('-')[1] : channel.displayName.split('_')[1].split('-')[1] : channel.displayName), channel.type !== 'DIRECT' ? '' : React__default.createElement("h5", null, t('messenger_box_browser.direct_messages_and_files_shared')), React__default.createElement("div", {
-    className: "di_chat_head"
-  }, React__default.createElement("a", {
-    style: {
-      marginRight: '1.5em'
-    },
-    onClick: () => {
-      setShowAddMember(true);
-    }
-  }, React__default.createElement(TiUserAdd, null), " ", React__default.createElement("h5", null, t('messenger_box_browser.invite_others_to_this_channel'))), React__default.createElement("a", null, React__default.createElement(MdModeEditOutline, null), " ", React__default.createElement("h5", null, t('messenger_box_browser.set_a_header'))))) : React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: "text-nav"
-  }, React__default.createElement("h5", null, t('messenger_box_browser.surveybot')), React__default.createElement("span", null, t('messenger_box_browser.bot'))), React__default.createElement("p", {
-    className: "p_style"
-  }, t('messenger_box_browser.this_is_the_start_of_your_direct_message')), React__default.createElement("p", {
-    className: "p_style"
-  }, t('messenger_box_browser.direct_messages_and_files_shared')))), React__default.createElement(Row, {
-    className: css(styleSheet3.customStyle)
+    className: "text-white text-xl"
+  }))), React__default.createElement("div", {
+    className: "hidden group-hover:block absolute left-0 mt-2 w-64 p-4 bg-white rounded-lg shadow-lg"
+  }, React__default.createElement("div", {
+    className: "flex flex-col items-center"
+  }, React__default.createElement("div", {
+    className: "w-20 h-20 bg-gray-800 rounded-full flex items-center justify-center mb-4"
+  }, React__default.createElement(FaRobot, {
+    className: "text-white text-3xl"
+  })), React__default.createElement("p", {
+    className: "font-bold"
+  }, t('messenger_box_browser.surveybot')), React__default.createElement("p", {
+    className: "text-sm text-gray-600"
+  }, t('messenger_box_browser.survey_bot_collects_your')), React__default.createElement("div", {
+    className: "mt-2"
+  }, React__default.createElement("h5", {
+    className: "text-sm"
+  }, t('messenger_box_browser.local_time'), ' ', React__default.createElement("span", null, Moment().format('HH:mm A')))), React__default.createElement("button", {
+    className: "mt-4 flex items-center text-blue-600 hover:text-blue-700"
+  }, React__default.createElement(BiPaperPlane, {
+    className: "mr-1"
+  }), t('messenger_box_browser.send_message'))))) : React__default.createElement("div", {
+    className: "space-y-4"
+  }, React__default.createElement("p", {
+    className: "text-xl font-semibold text-gray-700"
+  }, t('messenger_box_browser.beginning_of'), channel.type !== 'DIRECT' ? channel.title : channel.displayName.split('_').length === 2 ? channel.displayName.split('_')[0].split('-')[0] !== currentUsrId ? channel.displayName.split('_')[0].split('-')[1] : channel.displayName.split('_')[1].split('-')[1] : channel.displayName), channel.type !== 'DIRECT' ? null : React__default.createElement("h5", {
+    className: "text-gray-600"
+  }, t('messenger_box_browser.direct_messages_and_files_shared')), React__default.createElement("div", {
+    className: "flex space-x-6"
+  }, React__default.createElement("button", {
+    className: "flex items-center text-gray-600 hover:text-gray-800",
+    onClick: () => setShowAddMember(true)
+  }, React__default.createElement(TiUserAdd, {
+    className: "mr-2"
+  }), React__default.createElement("span", null, t('messenger_box_browser.invite_others_to_this_channel'))), React__default.createElement("button", {
+    className: "flex items-center text-gray-600 hover:text-gray-800"
+  }, React__default.createElement(MdModeEditOutline, {
+    className: "mr-2"
+  }), React__default.createElement("span", null, t('messenger_box_browser.set_a_header'))))), React__default.createElement("div", {
+    className: "space-y-4"
   }, userMessagesList?.map((item, index) => {
     if (!msgClr.hasOwnProperty(item.author.username)) {
       let temp = msgClr;
@@ -220,17 +190,28 @@ import React__default,{useState}from'react';import {Popover,Avatar,Row,Col}from'
       temp[item.author.username] = color;
       setMsgClr(temp);
     }
-    // if (!item.loginUser) {
-    return React__default.createElement(Col, {
-      md: 24,
+    return React__default.createElement("div", {
       key: index,
-      className: css(styleSheet3.customStyleDemo),
-      style: item.isPinned ? styles : null
+      className: `p-4 ${item.isPinned ? 'bg-yellow-50' : 'bg-white'} relative group`
     }, index !== 0 ? Moment(userMessagesList[index].createdAt).format('DD/MM/YYYY') !== Moment(userMessagesList[index - 1].createdAt).format('DD/MM/YYYY') ? React__default.createElement("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')}`) : '' : React__default.createElement("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')}`), displayEmoji && msgIndex === index ? React__default.createElement(Picker, {
+      className: "flex items-center my-4"
+    }, React__default.createElement("div", {
+      className: "flex-1 border-t border-gray-300"
+    }), React__default.createElement("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')}`), React__default.createElement("div", {
+      className: "flex-1 border-t border-gray-300"
+    })) : null : React__default.createElement("div", {
+      className: "flex items-center my-4"
+    }, React__default.createElement("div", {
+      className: "flex-1 border-t border-gray-300"
+    }), React__default.createElement("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')}`), React__default.createElement("div", {
+      className: "flex-1 border-t border-gray-300"
+    })), displayEmoji && msgIndex === index && React__default.createElement("div", {
+      className: "absolute bottom-full mb-2"
+    }, React__default.createElement(Picker, {
       onSelect: handleOnSelect,
       native: true,
       set: "apple",
@@ -243,373 +224,112 @@ import React__default,{useState}from'react';import {Popover,Avatar,Row,Col}from'
       showPreview: true,
       showSkinTones: false,
       notFoundEmoji: "sleuth_or_spy"
-    }) : '', React__default.createElement("div", {
-      className: "btn-hover"
-    }, React__default.createElement("div", {
-      className: "hover_btns"
-    }, React__default.createElement("button", null, React__default.createElement(BiDotsHorizontalRounded, {
-      fontSize: "16px",
-      fill: "gray",
+    })), React__default.createElement("div", {
+      className: "hidden group-hover:flex absolute right-4 top-2 bg-white shadow-lg rounded-md"
+    }, React__default.createElement("button", {
+      className: "p-2 hover:bg-gray-100 rounded-l-md",
       onClick: () => setShowMoreAction(!showMoreAction)
-    }), showMoreAction ? React__default.createElement(MoreAction, {
-      handleShowSideBar: handleShowSideBar,
-      handleDeleteMessage: () => {
-        handleDeleteMessage(item.id);
-        setShowMoreAction(false);
-      },
-      handleEditMessage: () => handleShow(item.id, item.message),
-      handlePinBtn: handlePinBtn,
-      id: item.id,
-      pinMessage: pinMessage
-    }) : null), React__default.createElement("button", {
+    }, React__default.createElement(BiDotsHorizontalRounded, {
+      className: "text-gray-500"
+    })), React__default.createElement("button", {
+      className: "p-2 hover:bg-gray-100",
       onClick: () => emojiClick(index, item.id)
     }, React__default.createElement(MdOutlineEmojiEmotions, {
-      fontSize: "16px",
-      fill: "gray"
-    })), React__default.createElement("button", null, React__default.createElement(IoBookmarkOutline, {
-      fontSize: "16px",
-      color: "gray"
+      className: "text-gray-500"
+    })), React__default.createElement("button", {
+      className: "p-2 hover:bg-gray-100"
+    }, React__default.createElement(IoBookmarkOutline, {
+      className: "text-gray-500"
     })), React__default.createElement("button", {
+      className: "p-2 hover:bg-gray-100 rounded-r-md",
       onClick: handleShowSideBar
     }, React__default.createElement(BsReply, {
-      fontSize: "16px",
-      fill: "gray"
-    })))), item.message.endsWith('joined the channel') ? React__default.createElement(Comment, {
-      className: "chat-cmt",
-      // actions={actions}
-      // author={<a>{item.author !== null?item.author.username:'User'}</a>}
-      author: React__default.createElement("a", null, " ", t('messenger_box_browser.system'), " "),
-      avatar: React__default.createElement(Avatar, {
-        style: {
-          background: 'gray'
-        }
-      }, React__default.createElement(MdOutlineDesktopMac, {
-        style: {
-          marginTop: '4px',
-          width: '24px',
-          height: '25px'
-        }
-      })),
-      content: React__default.createElement(React__default.Fragment, null, React__default.createElement("p", null, React__default.createElement("a", null, item.message.split(' ')[0]), "` $", item.message.split(' ').splice(1).join(' '))),
-      datetime: React__default.createElement("div", null, React__default.createElement("span", null, Moment(item.createdAt).format('HH:mm A')))
-    }) : React__default.createElement(Comment, {
-      className: "chat-cmt",
-      // actions={actions}
-      // author={<a>{item.author !== null?item.author.username:'User'}</a>}
-      author: React__default.createElement("a", null, item.author ? item.author.username : 'user'),
-      avatar: React__default.createElement(Popover, {
-        placement: "right",
-        title: React__default.createElement("a", null, '@' + item.author.username),
-        content: React__default.createElement("div", {
-          style: {
-            display: 'flex',
-            flexDirection: 'column'
-          }
-        }, React__default.createElement(Avatar, {
-          size: "large",
-          style: {
-            backgroundColor: 'red',
-            marginBottom: '15px',
-            marginLeft: '25px',
-            alignItems: 'center'
-          }
-        }, item.author.username.match(/\b(\w)/g).join('').toUpperCase()), React__default.createElement("p", {
-          style: {
-            fontWeight: 'bold'
-          }
-        }, item.author.username), React__default.createElement("div", null, React__default.createElement("h5", null, t('messenger_box_browser.local_time'), React__default.createElement("span", null, Moment(item.createdAt).format('HH:mm A')))), React__default.createElement("a", {
-          className: "icon-popover"
-        }, React__default.createElement(BiPaperPlane, {
-          style: {
-            fontSize: '15px',
-            marginRight: '3px'
-          }
-        }), t('messenger_box_browser.send_message'))),
-        trigger: "click"
-      }, React__default.createElement(Avatar, {
-        style: {
-          backgroundColor: `${msgClr[item.author.username]}`
-        }
-      }, item.author.username.match(/\b(\w)/g).join('').toUpperCase())),
-      content: React__default.createElement(React__default.Fragment, null, React__default.createElement("p", {
-        style: {
-          color: 'black'
-        }
-      }, item?.message), item.files.totalCount > 0 ? item.files.data.map(file => {
-        if (['gif', 'png', 'bmp', 'jpeg', 'jpg'].includes(file.extension)) {
-          return React__default.createElement("div", {
-            className: "msg_img_preview"
-          }, React__default.createElement("div", {
-            className: "options_style"
-          }, React__default.createElement(MdOutlineCloudDownload, {
-            onClick: () => handleDownload(file.id)
-          }), React__default.createElement(RiShareForwardLine, null), React__default.createElement(BiDotsVerticalRounded, null)), React__default.createElement("img", {
-            src: file.url,
-            className: "preview_img_style",
-            onClick: e => handleShowPreview(file, item)
-          }), React__default.createElement("a", {
-            href: file.url,
-            download: file.name,
-            id: file.id,
-            style: {
-              display: 'none'
-            }
-          }));
-        }
-      }) : '', emoji && item.id === id ? emoji.map((e, index) => {
-        return React__default.createElement("button", {
-          className: "reactionClass",
-          onClick: () => {
-            removeEmoji(index);
-          }
-        }, e, React__default.createElement("span", null, "1"));
-      }) : '', emoji.length && item.id === id ? React__default.createElement("button", {
-        style: {
-          border: '0px',
-          fontSize: '20px',
-          padding: '2px',
-          position: 'absolute'
-        }
-      }, React__default.createElement(MdOutlineAddReaction, {
-        fill: "gray"
-      })) : ''),
-      datetime:
-      // <Tooltip title={Moment().format('YYYY-MM-DD HH:mm:ss')}>
-      React__default.createElement("div", null, React__default.createElement("span", null, Moment(item.createdAt).format('HH:mm A')))
-    }));
-    // } 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>
-    //     );
-    // }
-  })), React__default.createElement(Modal, {
-    className: css(styleSheet3.modalCustomStyle),
+      className: "text-gray-500"
+    }))), React__default.createElement("div", {
+      className: "flex space-x-3"
+    }, React__default.createElement("div", {
+      className: "flex-shrink-0"
+    }, React__default.createElement("div", {
+      className: "w-10 h-10 rounded-full flex items-center justify-center text-white",
+      style: {
+        backgroundColor: msgClr[item.author.username]
+      }
+    }, item.author.username.match(/\b(\w)/g).join('').toUpperCase())), React__default.createElement("div", {
+      className: "flex-1 min-w-0"
+    }, React__default.createElement("div", {
+      className: "flex items-center space-x-2"
+    }, React__default.createElement("span", {
+      className: "font-medium text-gray-900"
+    }, item.author ? item.author.username : 'user'), React__default.createElement("span", {
+      className: "text-sm text-gray-500"
+    }, Moment(item.createdAt).format('HH:mm A'))), React__default.createElement("p", {
+      className: "mt-1 text-gray-900"
+    }, item.message), item.files.totalCount > 0 && React__default.createElement("div", {
+      className: "mt-2 space-y-2"
+    }, item.files.data.map(file => {
+      if (['gif', 'png', 'bmp', 'jpeg', 'jpg'].includes(file.extension)) {
+        return React__default.createElement("div", {
+          key: file.id,
+          className: "relative group"
+        }, React__default.createElement("img", {
+          src: file.url,
+          alt: file.name,
+          className: "max-w-md rounded-lg cursor-pointer",
+          onClick: () => handleShowPreview(file, item)
+        }), React__default.createElement("div", {
+          className: "hidden group-hover:flex absolute top-2 right-2 space-x-2"
+        }, React__default.createElement("button", {
+          className: "p-1 bg-black bg-opacity-50 rounded-full text-white hover:bg-opacity-70",
+          onClick: () => handleDownload(file.id)
+        }, React__default.createElement(MdOutlineCloudDownload, null)), React__default.createElement("button", {
+          className: "p-1 bg-black bg-opacity-50 rounded-full text-white hover:bg-opacity-70"
+        }, React__default.createElement(RiShareForwardLine, null)), React__default.createElement("button", {
+          className: "p-1 bg-black bg-opacity-50 rounded-full text-white hover:bg-opacity-70"
+        }, React__default.createElement(BiDotsVerticalRounded, null))), React__default.createElement("a", {
+          href: file.url,
+          download: file.name,
+          id: file.id,
+          className: "hidden"
+        }));
+      }
+      return null;
+    })), emoji && item.id === id && React__default.createElement("div", {
+      className: "mt-2 flex flex-wrap gap-2"
+    }, emoji.map((e, index) => React__default.createElement("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, React__default.createElement("span", {
+      className: "ml-1 text-xs text-gray-600"
+    }, "1"))), emoji.length > 0 && React__default.createElement("button", {
+      className: "p-1 text-gray-500 hover:text-gray-700"
+    }, React__default.createElement(MdOutlineAddReaction, null))))));
+  }))), React__default.createElement(Modal, {
     show: showPreview,
-    onHide: () => handleClose('directChannel')
+    onHide: () => setShowPreview(false),
+    className: "max-w-4xl mx-auto"
   }, React__default.createElement("div", {
-    className: "mod_head_style"
-  }, React__default.createElement(Modal.Header, {
-    style: {
-      backgroundColor: '',
-      color: 'white',
-      display: 'flex'
-    }
+    className: "bg-gray-900 text-white p-4"
+  }, React__default.createElement("div", {
+    className: "flex items-center justify-between"
   }, React__default.createElement("div", {
-    className: "header_main"
+    className: "flex items-center space-x-4"
   }, React__default.createElement("div", {
-    className: "header_img"
-  }, clickedImage.msgDetail?.author.username.match(/\b(\w)/g).join('').toUpperCase()), React__default.createElement("div", {
-    className: "header_text"
-  }, React__default.createElement("h4", null, clickedImage.msgDetail?.author.username), React__default.createElement("p", null, clickedImage.file?.name))), React__default.createElement(GrClose, {
+    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()), React__default.createElement("div", null, React__default.createElement("h4", {
+    className: "font-medium"
+  }, clickedImage.msgDetail?.author.username), React__default.createElement("p", {
+    className: "text-sm text-gray-300"
+  }, clickedImage.file?.name))), React__default.createElement("button", {
+    className: "text-gray-300 hover:text-white",
     onClick: () => setShowPreview(false)
-  }))), React__default.createElement("div", {
-    className: "modal_main"
-  }, React__default.createElement(Modal.Body, null, React__default.createElement("div", null, React__default.createElement("img", {
-    className: "clk_img",
-    src: clickedImage.file?.url
-  })))), React__default.createElement("div", {
-    className: "mod_head_style"
-  }, React__default.createElement(Modal.Footer, null, React__default.createElement("p", null, t('messenger_box_browser.working'))))));
-};
-// 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>
-// );
-// };
-export{MessagesList};//# sourceMappingURL=index.js.map
+  }, React__default.createElement(GrClose, null)))), React__default.createElement("div", {
+    className: "bg-black flex items-center justify-center p-4"
+  }, React__default.createElement("img", {
+    src: clickedImage.file?.url,
+    alt: clickedImage.file?.name,
+    className: "max-h-[80vh] object-contain"
+  })), React__default.createElement("div", {
+    className: "bg-gray-900 text-white p-4"
+  }, React__default.createElement("p", null, t('messenger_box_browser.working')))));
+};export{MessagesList};//# sourceMappingURL=index.js.map