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

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

@@ -2,7 +2,8 @@ import React, { createElement, useState } from 'react';
 import ReactDOM from 'react-dom';
 import 'antd/dist/antd.css';
 // import './index.css';
-import { Comment, Tooltip, Avatar } from 'antd';
+import { Tooltip, Avatar } from 'antd';
+import { Comment,  } from '@ant-design/compatible';
 import Moment from 'moment';
 import { DislikeOutlined, LikeOutlined, DislikeFilled, LikeFilled } from '@ant-design/icons';
 

package/src/components/messenger/messagesList/style.ts

@@ -1,5 +1,5 @@
 export const styleSheet3 = {
-    customStyle: () => ({
+    customStyle: {
         '& .ant-comment-content-author-name > * ': {
             color: '#3d3c40',
             fontWeight: '600',
@@ -56,8 +56,129 @@ export const styleSheet3 = {
                 marginLeft: '10px',
             },
         },
-    }),
-    customStyleDemo: () => ({
+        // '& .modal_class': {
+        //
+        // },
+    },
+    modalCustomStyle:{
+        // backgroundColor: 'black',
+        ':hover': {
+            '& .modal-header': {
+                top: '0',
+            },
+            '& .modal-footer': {
+                bottom: '0',
+            },
+        },
+        '& .modal-dialog': {
+            width: '95%',
+            height: '100%',
+            marginBottom: '0',
+            marginTop: '0',
+            padding: '25px 0px',
+            '& .modal_main': {
+                padding: '0px 40px',
+            },
+        },
+        '& .modal-body': {
+            zIndex: '3',
+            padding: '0px',
+        },
+        '& .modal-content': {
+            height: '100%',
+            overflow: 'hidden',
+            position: 'relative',
+            backgroundColor: '#02020269',
+            border: '1px solid rgba(0, 0, 0, 0.2)',
+            boxShadow: '0 5px 15px rgb(0 0 0 / 50%)',
+            display: 'flex',
+            alignItems: 'center',
+            flexDirection: 'column',
+            justifyContent: 'space-between',
+            overflowY: 'auto',
+            '::after': {
+                content: '""',
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+                top: '0',
+                right: '0',
+                left: '0',
+            },
+        },
+        '& .mod_head_style': {
+            display: 'block',
+            zIndex: '4',
+            width: '100%',
+            position: 'relative',
+            minHeight: '71px',
+            overflow: 'hidden',
+        },
+        '& .modal-header': {
+            zIndex: '3',
+            border: 'unset',
+            width: '100%',
+            transition: 'all 0.5s',
+            background: '#0000000f',
+            position: 'absolute',
+            top: '-100px',
+            '> svg': {
+                marginLeft: 'auto',
+                height: '22px',
+                width: '22px',
+                cursor: 'pointer',
+                '> path': {
+                    stroke: 'white',
+                },
+            },
+        },
+        '& .modal-footer': {
+            zIndex: '3',
+            border: 'unset',
+            width: '100%',
+            position: 'absolute',
+            background: '#0000000f',
+            bottom: '-100px',
+            transition: 'all 0.5s',
+            '> p': {
+                margin: '0',
+            },
+        },
+        '& .clk_img': {
+            // width: '100%',
+            width: '80vw',
+            height: '73vh',
+        },
+        '& .header_main': {
+            display: 'flex',
+        },
+        '& .header_img': {
+            width: '35px',
+            height: '35px',
+            background: 'white',
+            borderRadius: '5px',
+            marginRight: '7px',
+            color: 'black',
+            fontSize: '20px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontWeight: 'bold',
+        },
+        '& .header_text': {
+            '> h4': {
+                fontWeight: 'bold',
+                margin: '0',
+                marginBottom: '4px',
+                fontSize: '16px',
+            },
+            '> p': {
+                fontSize: '12px',
+                margin: '0',
+            },
+        },
+    },
+    customStyleDemo: {
         ':hover .btn-hover': {
             display: 'block',
         },
@@ -88,8 +209,51 @@ export const styleSheet3 = {
                 marginLeft: '10px',
             },
         },
-    }),
-    customInputStyle: () => ({
+        '& .reactionClass': {
+            display: 'inline-block',
+            border: '1px solid #4390ff',
+            padding: '2px',
+            borderRadius: '5px',
+            marginRight: '4px',
+            '> span': {
+                fontSize: '13px',
+                padding: '0px 3px',
+                color: '#4390ff',
+            },
+        },
+        '& .preview_img_style': {
+            height: '180px',
+        },
+        '& .msg_img_preview': {
+            position: 'relative',
+            display: 'inline-block',
+            transition: 'all 0.5s',
+            ':hover': {
+                cursor: 'zoom-in',
+                '& .options_style': {
+                    opacity: '1',
+                },
+            },
+        },
+        '& .options_style': {
+            backgroundColor: '#1a1d21',
+            padding: '7px',
+            display: 'flex',
+            alignItems: 'center',
+            position: 'absolute',
+            top: '10px',
+            right: '10px',
+            borderRadius: '5px',
+            opacity: '0',
+            '> svg': {
+                width: '30px',
+                height: '20px',
+                color: '#aaabac',
+                cursor: 'pointer',
+            },
+        },
+    },
+    customInputStyle: {
         '& .msg_list': {
             position: 'relative',
             bottom: '80px',
@@ -109,12 +273,70 @@ export const styleSheet3 = {
             maxHeight: '100%',
         },
         '& .input_row': {
-            position: 'absolute',
+            // position: 'absolute',
             marginLeft: '0',
             padding: '0px 15px',
             bottom: '0',
             width: '100%',
         },
+        '& .input_msg': {
+            backgroundColor: '#fff',
+            backgroundImage: 'none',
+            border: '1px solid #d9d9d9',
+            borderRadius: '2px',
+        },
+        '& .preview_imgs': {
+            display: 'flex',
+            '& .child_div': {
+                width: '80px',
+                height: '80px',
+                boxShadow: '0 3px 10px rgb(0 0 0 / 20%)',
+                position: 'relative',
+                padding: '0px 5px',
+                ':hover': {
+                    '& .overlay': {
+                        backgroundColor: '#0000006b',
+                        width: '100%',
+                        height: '100%',
+                        position: 'absolute',
+                        right: '0',
+                        left: '0',
+                        zIndex: '2',
+                        // display: 'none',
+                    },
+                    '> i': {
+                        '::after': {
+                            content: '""',
+                            position: 'absolute',
+                            width: '20px',
+                            height: '20px',
+                            borderRadius: '50%',
+                            right: '-5px',
+                            top: '-3px',
+                            left: 'auto',
+                            backgroundColor: 'black',
+                            zIndex: '-1',
+                        },
+                        position: 'absolute',
+                        color: 'white',
+                        zIndex: '3',
+                        right: '0px',
+                        top: '0',
+                        cursor: 'pointer',
+                        display: 'block',
+                    },
+                },
+                '> img': {
+                    width: '100%',
+                    objectFit: 'cover',
+                    height: '100%',
+                    position: 'relative',
+                },
+                '> i': {
+                    display: 'none',
+                },
+            },
+        },
         '& .thread_input_row': {
             position: 'static',
             marginLeft: '0',
@@ -124,20 +346,22 @@ export const styleSheet3 = {
         },
         '& .msg_input': {
             minHeight: '45px',
+            border: 'none',
         },
         '& .input_class': {
             position: 'relative',
+            padding: '0  30px',
         },
         '& .icon_box': {
             position: 'absolute',
             top: '58%',
             display: 'flex',
             transform: 'translateY(-50%)',
-            right: '15px',
+            right: '10px',
         },
         '& .icon_style': {
             fontSize: '20px',
-            marginLeft: '20px',
+            // marginLeft: '20px',
             color: 'rgba(61, 60, 64, 0.56)',
         },
         '& .emoji-mart': {
@@ -145,8 +369,8 @@ export const styleSheet3 = {
             top: 'unset',
             bottom: '100%',
             width: '315px !important',
-            right: '0',
-            zIndex: '999',
+            right: '30px',
+            zIndex: '1',
         },
         '& .emoji-mart-category': {
             '& .emoji-mart-emoji span': {
@@ -158,6 +382,7 @@ export const styleSheet3 = {
         '& .chat_container': {
             overflow: 'hidden',
             display: 'flex',
+            height: 'calc(100vh - 264px)',
         },
         '& .right_chat_box': {
             right: '0',
@@ -215,8 +440,9 @@ export const styleSheet3 = {
         '& .left_chat_box': {
             width: '100%',
             position: 'relative',
+            display: 'flex',
+            flexDirection: 'column',
         },
-    }),
-    customPopoverStyles : ()=>({
-    })
-};
+    },
+    customPopoverStyles: {},
+} as any;

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

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { styleSheet } from './style';
+import { css } from '@emotion/css';
+
+type IProps = {
+    handleShowSideBar?: any;
+    handleDeleteMessage? : any;
+    handleEditMessage? : any;
+    id?: string;
+    pinMessage: any;
+    handlePinBtn?:any;
+}
+
+const MoreAction = ({ handleShowSideBar , handleDeleteMessage , handleEditMessage , id , handlePinBtn , pinMessage} : IProps) => {
+    let cardData = [
+        {
+            tiltle: 'Reply',
+            Link: handleShowSideBar,
+        },
+        {
+            tiltle: 'Mark as Unread',
+            Link: '#',
+        },
+        {
+            tiltle: 'copy link',
+            Link: '#',
+        },
+        {
+            tiltle: pinMessage ? 'unpin to channel' : 'pin to channel',
+            Link: handlePinBtn,
+        },
+    ];
+
+    const moreActionData = [
+        {
+            title: 'Edit',
+            Link: handleEditMessage,
+            className: 'edit-btn',
+        },
+        {
+            title: 'Delete',
+            Link: handleDeleteMessage,
+            className: 'delete-btn',
+        },
+    ];
+    return (
+        <div className={css(styleSheet.MoreActionStyle)}>
+            <ul>
+                {cardData.map((element: any, index: number) => {
+                    return (
+                        <li key={index} onClick={()=>element.Link(id)}>
+                            <a>{element.tiltle}</a>
+                        </li>
+                    );
+                })}
+                {moreActionData.map((element: any, index: number) => {
+                    return (
+                        <li key={index} className={element.className} onClick={()=>element.Link(id)}>
+                            <a>{element.title}</a>
+                        </li>
+                    );
+                })}
+            </ul>
+        </div>
+    );
+};
+
+export default MoreAction;

package/src/components/messenger/more_action/style.ts

@@ -0,0 +1,45 @@
+export const styleSheet = {
+    MoreActionStyle: {
+        position: 'absolute',
+        width: '200px',
+        height: '210px',
+        right: '90px',
+        bottom: '30px',
+        backgroundColor: '#fff',
+        border: '1px solid rgba(61 , 60 ,64 , 0.23)',
+        borderRadius: '5px',
+        '& ul': {
+            padding: '4px 0px',
+        },
+        '& ul li ': {
+            fontSize: '17px',
+            marginBottom: '8px',
+            marginRight: '5px',
+            textAlign: 'left',
+            width: '100%',
+            height: '26px',
+            transition: '0.1s ease-in',
+            listStyleType: 'none',
+        },
+        '& ul li a': {
+            color: '#858487',
+            marginLeft: '15px',
+            textDecoration: 'none'
+        },
+        '& ul li:hover': {
+            backgroundColor: 'rgba(61 , 60 ,64 , 0.12)'
+        },
+        '& .edit-btn': {
+            borderTop: '1px solid rgba(61 , 60 ,64 , 0.23) '
+        },
+        '& .delete-btn a': {
+            color: '#f74343',
+        },
+        '& .delete-btn:hover': {
+            backgroundColor: '#f74343',
+        },
+        '& .delete-btn:hover a': {
+            color: '#fff'
+        },
+    }
+} as any

package/src/components/messenger/postMessage/postMessage.tsx

@@ -1,15 +1,14 @@
 import React, { FC, useState } from 'react';
-import { useFela } from 'react-fela';
 import { Col, Input } from 'antd';
+import { SmileOutlined, PaperClipOutlined } from '@ant-design/icons';
+import { css } from '@emotion/css';
 import { IMessageList } from './../types/message';
 import { messagesData } from './../mock';
-import { SmileOutlined, PaperClipOutlined } from '@ant-design/icons';
 import { styleSheet } from './style';
 
 
 export const PostMessage = (props) => {
     const { handleEnterButton , enterValue } = props;
-    const { css } = useFela();
     return (
         <div className={css(styleSheet.postmessageStyles)}>
             <Input

package/src/components/messenger/postMessage/style.ts

@@ -1,6 +1,6 @@
 export const styleSheet = {
     // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-    postmessageStyles: () => ({
+    postmessageStyles: {
         display: 'inharit',
         position: 'relative',
         '& .message--box-outer': {
@@ -20,5 +20,5 @@ export const styleSheet = {
         '& .icon .anticon svg path': {
             fill: 'grey',
         },
-    }),
-};
+    },
+} as any;

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

@@ -2,13 +2,15 @@ import React, { FC, useState } from 'react';
 import { Col, Row, Divider } from 'antd';
 import { Comment, Popover, Avatar } from 'antd';
 import { useSelector } from 'react-redux';
+import { IoBookmarkOutline } from 'react-icons/io5';
 import { CommentOutlined, SmileOutlined, SaveOutlined, EllipsisOutlined } from '@ant-design/icons';
 import { useGetUserAccountQuery } from '@adminide-stack/account-api-client';
-import { IMessageReplyList } from '../types/message';
-import { BiDotsHorizontalRounded, FaRobot, MdOutlineEmojiEmotions, BiPaperPlane , BiEdit } from 'react-icons/all';
-import { IoBookmarkOutline } from 'react-icons/io5';
-import { useFela } from 'react-fela';
+import { BiDotsHorizontalRounded, BiPaperPlane, BiEdit } from 'react-icons/bi';
+import { MdOutlineEmojiEmotions } from 'react-icons/md';
+import { FaRobot } from 'react-icons/fa';
+import { css } from '@emotion/css';
 import Moment from 'moment';
+import { IMessageReplyList } from '../types/message';
 import { styleSheet } from '../threadSidebar/style';
 
 interface IProps {
@@ -27,15 +29,14 @@ export const SidebarThreadList: FC<IProps> = ({ userMessagesList }) => {
         skip: !userId,
     });
     const [showHoverModal, setShowHoverModal] = useState<boolean>(false);
-    const { css } = useFela();
     var time = '10:45 PM';
 
     return (
-        <Row gutter={[24, 6]} className={css(styleSheet.costumThreadStyles as any)}>
+        <Row gutter={[24, 6]} className={css(styleSheet.costumThreadStyles)}>
             {userMessagesList?.map((items: any, index: any) => {
                 if (!items?.loginUser) {
                     return (
-                        <Col md={24} key={index} className={css(styleSheet.costumThreadHoverStyles as any)}>
+                        <Col md={24} key={index} className={css(styleSheet.costumThreadHoverStyles)}>
                             <div className="btn-hover">
                                 <div className="hover_btns">
                                     <button>
@@ -109,12 +110,12 @@ export const SidebarThreadList: FC<IProps> = ({ userMessagesList }) => {
                                     </div>
                                     /*</Tooltip>*/
                                 }
-                            ></Comment>
+                            />
                         </Col>
                     );
                 } else {
                     return (
-                        <Col md={24} key={index} className={css(styleSheet.costumThreadHoverStyles as any)}>
+                        <Col md={24} key={index} className={css(styleSheet.costumThreadHoverStyles)}>
                             <div className="btn-hover">
                                 <div className="hover_btns">
                                     <button>
@@ -184,7 +185,7 @@ export const SidebarThreadList: FC<IProps> = ({ userMessagesList }) => {
                                     </div>
                                     /*</Tooltip>*/
                                 }
-                            ></Comment>
+                            />
                         </Col>
                     );
                 }

package/src/components/messenger/style.ts

@@ -4,7 +4,7 @@ export const styleSheet = {
         display: 'inharit',
         '& .messagner-list': {
             width: '100%',
-            display : 'flex',
+            display: 'flex',
         },
         '& .messagner-list:hover ': {
             borderColor: 'rgba(61,60,64,0.04)',
@@ -15,23 +15,23 @@ export const styleSheet = {
         },
         '& .modal': {
             position: 'absolute',
-            display : 'flex',
-            width : '120px',
-            height : '30px',
-            boxShadow : '0 6px 10px rgba(0, 0, 0, 0.12)',
-            left : 'auto',
-            right : '30px',
-            top : '30px',
-            backgroundColor : 'white',
-            borderRadius : '5px',
-            alignItems : 'center',
+            display: 'flex',
+            width: '120px',
+            height: '30px',
+            boxShadow: '0 6px 10px rgba(0, 0, 0, 0.12)',
+            left: 'auto',
+            right: '30px',
+            top: '30px',
+            backgroundColor: 'white',
+            borderRadius: '5px',
+            alignItems: 'center',
         },
         '& .modal div': {
-            textAlign : 'center',
-            width : '25px',
-            marginLeft : '5px',
-            marginRight : '5px',
-            borderRadius : '3px',
+            textAlign: 'center',
+            width: '25px',
+            marginLeft: '5px',
+            marginRight: '5px',
+            borderRadius: '3px',
         },
         '& .modal div:hover': {
             backgroundColor: 'rgba(61,60,64,0.12)',

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

@@ -2,10 +2,11 @@ import React, { useState, useRef, useEffect } from 'react';
 import { MessagesList } from './../messagesList/index';
 import { messagesData } from './../mock';
 import { IMessageList } from './../types/message';
-import { useFela } from 'react-fela';
+import { css } from '@emotion/css';
 import { Input, Col, Row } from 'antd';
-import {CloseOutlined} from '@ant-design/icons'
-import { HiOutlinePaperClip, MdOutlineEmojiEmotions } from 'react-icons/all';
+import { CloseOutlined } from '@ant-design/icons'
+import { HiOutlinePaperClip } from 'react-icons/hi';
+import { MdOutlineEmojiEmotions } from 'react-icons/md';
 import { Picker } from 'emoji-mart';
 import { styleSheet } from './style';
 import { PostMessage } from './../postMessage/postMessage';
@@ -13,7 +14,6 @@ import { SidebarThreadList } from './../sidebarThreadList';
 
 export const ThreadSidebar = (props) => {
     // const { handleEnterButton } = props;
-    const { css } = useFela();
     const [enterValue, setEnterValue] = useState<string>('');
     const [flag, setFlag] = useState<boolean>(false);
     const [userMessagesReplyList, setUserMessagesReplyList] = useState<IMessageList | any>([]);
@@ -65,7 +65,7 @@ export const ThreadSidebar = (props) => {
     };
 
     return (
-        <div className={css(styleSheet.ThreadSidebarStyles) as any}>
+        <div className={css(styleSheet.ThreadSidebarStyles)}>
             <Col>
                 <div className='close-icon'><CloseOutlined /></div>
             </Col>

package/src/components/messenger/threadSidebar/style.ts

@@ -1,6 +1,6 @@
 export const styleSheet = {
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-  ThreadSidebarStyles: () => ({
+  ThreadSidebarStyles: {
     '& .input_row_thread': {
       width: 'calc(100% - 240px)',
       paddingLeft: '0',
@@ -15,8 +15,8 @@ export const styleSheet = {
 
       
     }
-  }),
-  costumThreadStyles: () => ({
+  },
+  costumThreadStyles: {
     '& .ant-comment-content-author-name > * ': {
       color: '#3d3c40',
       fontWeight: '600',
@@ -51,8 +51,8 @@ export const styleSheet = {
       height: '28px',
       background: 'white',
     },
-  }),
-  costumThreadHoverStyles: () => ({
+  },
+  costumThreadHoverStyles: {
     ':hover .btn-hover': {
       display: 'block',
     },
@@ -61,5 +61,5 @@ export const styleSheet = {
     },
     padding: '0px 36px',
     paddingRight: '15px',
-  })
-};
+  }
+} as any;

package/src/components/messenger/types/message.ts

@@ -5,6 +5,7 @@ export interface IMessageList {
     timeIsToday: boolean;
     isReply: boolean;
     thread?: IMessageReplyList[]
+    isPin?: boolean
 }
 
 export interface IMessageReplyList {

package/src/components/post/channel_intro_message/channel_intro_message.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Constants, ModalIdentifiers } from '../../../utils/constants';
-// import { Channel } from '../../../packages/types/channels';
 
 export const ChannelIntroMessage = (props) => {
     const {