@messenger-box/platform-browser 10.0.3-alpha.54 → 10.0.3-alpha.61

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

@@ -1,10 +1,5 @@
 import React, { createElement, useState } from 'react';
-import ReactDOM from 'react-dom';
 import { useTranslation } from 'react-i18next';
-import 'antd/dist/antd.css';
-// import './index.css';
-import { Tooltip, Avatar } from 'antd';
-import { Comment } from '@ant-design/compatible';
 import Moment from 'moment';
 import { AiFillLike } from '@react-icons/all-files/ai/AiFillLike';
 import { AiOutlineLike } from '@react-icons/all-files/ai/AiOutlineLike';
@@ -14,7 +9,7 @@ import { AiFillDislike } from '@react-icons/all-files/ai/AiFillDislike';
 export const MessageBox = () => {
     const [likes, setLikes] = useState(0);
     const [dislikes, setDislikes] = useState(0);
-    const [action, setAction] = useState(null);
+    const [action, setAction] = useState<string | null>(null);
     const { t } = useTranslation();
 
     const like = () => {
@@ -30,37 +25,53 @@ export const MessageBox = () => {
     };
 
     const actions = [
-        <Tooltip key="comment-basic-like" title="Like">
-            <span onClick={like}>
-                {createElement(action === 'liked' ? AiFillLike : AiOutlineLike)}
-                <span className="comment-action">{likes}</span>
-            </span>
-        </Tooltip>,
-        <Tooltip key="comment-basic-dislike" title="Dislike">
-            <span onClick={dislike}>
-                {React.createElement(action === 'disliked' ? AiFillDislike : AiOutlineDislike)}
-                <span className="comment-action">{dislikes}</span>
-            </span>
-        </Tooltip>,
-        <span key="comment-basic-reply-to">{t('messenger_box_browser.reply_to')}</span>,
+        <div key="comment-basic-like" className="group relative inline-block">
+            <button
+                onClick={like}
+                className="flex items-center space-x-1 text-gray-500 hover:text-blue-500 transition-colors"
+            >
+                <span className="text-lg">{createElement(action === 'liked' ? AiFillLike : AiOutlineLike)}</span>
+                <span className="text-sm">{likes}</span>
+            </button>
+            <div className="invisible group-hover:visible absolute -top-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap">
+                Like
+            </div>
+        </div>,
+        <div key="comment-basic-dislike" className="group relative inline-block ml-4">
+            <button
+                onClick={dislike}
+                className="flex items-center space-x-1 text-gray-500 hover:text-red-500 transition-colors"
+            >
+                <span className="text-lg">
+                    {createElement(action === 'disliked' ? AiFillDislike : AiOutlineDislike)}
+                </span>
+                <span className="text-sm">{dislikes}</span>
+            </button>
+            <div className="invisible group-hover:visible absolute -top-8 left-1/2 -translate-x-1/2 px-2 py-1 bg-gray-800 text-white text-xs rounded whitespace-nowrap">
+                Dislike
+            </div>
+        </div>,
+        <button
+            key="comment-basic-reply-to"
+            className="ml-4 text-sm text-gray-500 hover:text-gray-700 transition-colors"
+        >
+            {t('messenger_box_browser.reply_to')}
+        </button>,
     ];
 
     return (
-        <Comment
-            // actions={actions}
-            author={<a>Han Solo</a>}
-            avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" alt="Han Solo" />}
-            content={<p>{t('messenger_box_browser.we_supply_a_series_of_design_principles')}</p>}
-            datetime={
-                // <Tooltip title={Moment().format('YYYY-MM-DD HH:mm:ss')}>
-                <div>
-                    {/*<span>{Moment().fromNow()}</span>*/}
-                    <span>{Moment().format('HH:mm:ss')}</span>
+        <div className="flex space-x-4 p-4">
+            <div className="flex-shrink-0">
+                <img className="h-10 w-10 rounded-full" src="https://via.placeholder.com/40" alt="User avatar" />
+            </div>
+            <div className="flex-grow">
+                <div className="flex items-center space-x-2">
+                    <span className="font-medium text-gray-900">User Name</span>
+                    <span className="text-sm text-gray-500">{Moment().fromNow()}</span>
                 </div>
-                /*</Tooltip>*/
-            }
-        />
+                <div className="mt-1 text-gray-700">Message content goes here</div>
+                <div className="mt-2 flex items-center space-x-2">{actions}</div>
+            </div>
+        </div>
     );
 };
-
-// ReactDOM.render(<Demo />, document.getElementById('container'));

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

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { styleSheet } from './style';
-import { css } from '@emotion/css';
 
 type IProps = {
     handleShowSideBar?: any;
@@ -46,28 +44,36 @@ const MoreAction = ({
         {
             title: t('messenger_box_browser.edit'),
             Link: handleEditMessage,
-            className: 'edit-btn',
+            className: 'text-blue-600 hover:text-blue-700',
         },
         {
             title: t('messenger_box_browser.delete'),
             Link: handleDeleteMessage,
-            className: 'delete-btn',
+            className: 'text-red-600 hover:text-red-700',
         },
     ];
     return (
-        <div className={css(styleSheet.MoreActionStyle)}>
-            <ul>
+        <div className="bg-white rounded-lg shadow-lg py-2 min-w-[200px]">
+            <ul className="divide-y divide-gray-100">
                 {cardData.map((element: any, index: number) => {
                     return (
-                        <li key={index} onClick={() => element.Link(id)}>
-                            <a>{element.tiltle}</a>
+                        <li
+                            key={index}
+                            onClick={() => element.Link(id)}
+                            className="px-4 py-2 hover:bg-gray-50 cursor-pointer"
+                        >
+                            <a className="block text-gray-700 text-sm">{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
+                            key={index}
+                            className={`px-4 py-2 hover:bg-gray-50 cursor-pointer ${element.className}`}
+                            onClick={() => element.Link(id)}
+                        >
+                            <a className="block text-sm">{element.title}</a>
                         </li>
                     );
                 })}

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

@@ -1,27 +1,39 @@
 import React, { FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Col, Input } from 'antd';
 import { AiOutlinePaperClip } from '@react-icons/all-files/ai/AiOutlinePaperClip';
 import { AiOutlineSmile } from '@react-icons/all-files/ai/AiOutlineSmile';
-import { css } from '@emotion/css';
 import { IMessageList } from './../types/message';
-import { messagesData } from './../mock';
-import { styleSheet } from './style';
 
-export const PostMessage = (props) => {
-    const { handleEnterButton, enterValue } = props;
+interface PostMessageProps {
+    handleEnterButton: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    enterValue: string;
+}
+
+export const PostMessage: FC<PostMessageProps> = ({ handleEnterButton, enterValue }) => {
     const { t } = useTranslation();
+
     return (
-        <div className={css(styleSheet.postmessageStyles)}>
-            <Input
-                value={enterValue}
-                onPressEnter={(e) => handleEnterButton(e)}
-                placeholder={t('messenger_box_browser.please_enter')}
-                style={{ width: '100%' }}
-            />
-            <div className="icon">
-                <AiOutlinePaperClip />
-                <AiOutlineSmile />
+        <div className="flex items-center p-4 border-t border-gray-200">
+            <div className="relative flex-1">
+                <input
+                    type="text"
+                    value={enterValue}
+                    onKeyPress={(e) => {
+                        if (e.key === 'Enter') {
+                            handleEnterButton(e);
+                        }
+                    }}
+                    placeholder={t('messenger_box_browser.please_enter')}
+                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
+                />
+                <div className="absolute right-0 top-0 h-full flex items-center pr-3 space-x-2">
+                    <button className="text-gray-400 hover:text-gray-600">
+                        <AiOutlinePaperClip className="h-5 w-5" />
+                    </button>
+                    <button className="text-gray-400 hover:text-gray-600">
+                        <AiOutlineSmile className="h-5 w-5" />
+                    </button>
+                </div>
             </div>
         </div>
     );

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

@@ -1,201 +1,73 @@
 import React, { FC, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Col, Row, Divider } from 'antd';
-import { Popover, Avatar } from 'antd';
-import { Comment } from '@ant-design/compatible';
 import { useSelector } from 'react-redux';
 import { IoBookmarkOutline } from 'react-icons/io5';
 import { useGetUserAccountQuery } from 'common/graphql';
 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 {
     userMessagesList?: IMessageReplyList[];
 }
 
-interface SyntheticEvent<T> {
-    currentTarget: EventTarget & T;
-}
-
 export const SidebarThreadList: FC<IProps> = ({ userMessagesList }) => {
-    const userId = useSelector<any>((state) => state.user.authUserId);
-    const { data: { getUserAccount } = {} } = useGetUserAccountQuery({
-        //@ts-ignore
-        variables: { userId },
-        skip: !userId,
-    });
-    const [showHoverModal, setShowHoverModal] = useState<boolean>(false);
     const { t } = useTranslation();
-    var time = '10:45 PM';
+    const [showEmoji, setShowEmoji] = useState(false);
 
     return (
-        <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)}>
-                            <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 className="flex flex-col h-full bg-white">
+            <div className="flex items-center justify-between p-4 border-b border-gray-200">
+                <h2 className="text-lg font-semibold text-gray-900">{t('messenger_box_browser.thread')}</h2>
+                <button className="text-gray-400 hover:text-gray-600">
+                    <BiDotsHorizontalRounded className="h-5 w-5" />
+                </button>
+            </div>
+            <div className="flex-1 overflow-y-auto">
+                {userMessagesList?.map((thread, index) => (
+                    <div key={index} className="p-4 border-b border-gray-200">
+                        <div className="flex items-start space-x-3">
+                            <div className="flex-shrink-0">
+                                <img
+                                    src={thread.user?.avatar || 'https://via.placeholder.com/40'}
+                                    alt={thread.user?.name || 'User'}
+                                    className="h-10 w-10 rounded-full"
+                                />
                             </div>
-                            <Comment
-                                className="chat-cmt"
-                                // actions={actions}
-                                author={<a>{t('messenger_box_browser.slack_bot')}</a>}
-                                avatar={
-                                    <Popover
-                                        placement="right"
-                                        title={<a>{'@' + 'surveybot'}</a>}
-                                        content={
-                                            <div
-                                                style={{
-                                                    display: 'flex',
-                                                    flexDirection: 'column',
-                                                    // alignItems: 'center',
-                                                }}
-                                            >
-                                                <Avatar
-                                                    size={{ xxl: 100 }}
-                                                    style={{
-                                                        backgroundColor: 'black',
-                                                        marginBottom: '15px',
-                                                        marginLeft: '25px',
-                                                        alignItems: 'center',
-                                                    }}
-                                                >
-                                                    <FaRobot
-                                                        style={{ marginTop: '22px' }}
-                                                        fontSize="50px"
-                                                        fill="white"
-                                                    />
-                                                </Avatar>
-                                                <p style={{ fontWeight: 'bold' }}>
-                                                    {t('messenger_box_browser.surveybot')}
-                                                </p>
-                                                <p>{t('messenger_box_browser.survey_bot_collects_your')}</p>
-                                                <div>
-                                                    <h5>
-                                                        {t('messenger_box_browser.local_time')}{' '}
-                                                        <span>{Moment().format('HH:mm A')}</span>
-                                                    </h5>
-                                                </div>
-                                                <a className="icon-popover">
-                                                    <BiPaperPlane style={{ fontSize: '15px', marginRight: '3px' }} />
-                                                    {t('messenger_box_browser.send_message')}
-                                                </a>
-                                            </div>
-                                        }
-                                        trigger="click"
-                                    >
-                                        <Avatar style={{ backgroundColor: 'black' }}>
-                                            <FaRobot style={{ marginTop: '4px' }} fontSize="20px" fill="white" />
-                                        </Avatar>
-                                    </Popover>
-                                }
-                                content={<p>{items?.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 className="flex-1 min-w-0">
+                                <div className="flex items-center justify-between">
+                                    <div className="flex items-center space-x-2">
+                                        <span className="text-sm font-medium text-gray-900">
+                                            {thread.user?.name || 'Unknown User'}
+                                        </span>
+                                        <span className="text-xs text-gray-500">
+                                            {Moment(thread.create_at).format('LT')}
+                                        </span>
                                     </div>
-                                    /*</Tooltip>*/
-                                }
-                            />
-                        </Col>
-                    );
-                } else {
-                    return (
-                        <Col md={24} key={index} className={css(styleSheet.costumThreadHoverStyles)}>
-                            <div className="btn-hover">
-                                <div className="hover_btns">
-                                    <button>
-                                        <BiDotsHorizontalRounded fontSize="16px" fill="gray" />
+                                    {thread.isBot && <FaRobot className="h-5 w-5 text-gray-400" />}
+                                </div>
+                                <p className="mt-1 text-sm text-gray-700">{thread.message}</p>
+                                <div className="mt-2 flex items-center space-x-4">
+                                    <button
+                                        onClick={() => setShowEmoji(!showEmoji)}
+                                        className="text-gray-400 hover:text-gray-600"
+                                    >
+                                        <MdOutlineEmojiEmotions className="h-5 w-5" />
                                     </button>
-                                    <button>
-                                        <MdOutlineEmojiEmotions fontSize="16px" fill="gray" />
+                                    <button className="text-gray-400 hover:text-gray-600">
+                                        <BiEdit className="h-5 w-5" />
                                     </button>
-                                    <button>
-                                        <IoBookmarkOutline fontSize="16px" color="gray" />
+                                    <button className="text-gray-400 hover:text-gray-600">
+                                        <IoBookmarkOutline className="h-5 w-5" />
                                     </button>
                                 </div>
                             </div>
-                            <Comment
-                                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>
-                                                        {t('messenger_box_browser.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' }} />
-                                                    {t('messenger_box_browser.edit_account_setting')}
-                                                </a>
-                                            </div>
-                                        }
-                                        trigger="click"
-                                    >
-                                        <Avatar style={{ backgroundColor: 'blue', textTransform: 'uppercase' }}>
-                                            {getUserAccount.username.substring(0, 1)}
-                                        </Avatar>
-                                    </Popover>
-                                }
-                                content={<p>{items?.message}</p>}
-                                datetime={
-                                    // <Tooltip title={Moment().format('YYYY-MM-DD HH:mm:ss')}>
-                                    <div>
-                                        {/*<span>{Moment().fromNow()}</span>*/}
-                                        <span>{Moment().format('HH:mm A')}</span>
-                                    </div>
-                                    /*</Tooltip>*/
-                                }
-                            />
-                        </Col>
-                    );
-                }
-            })}
-        </Row>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
     );
 };