585 msg actions (#593)

* stashed files added

* signin page ui

* renamed file

* fixed linting issues

* integrated rainbow wallet

* integrated metamask wallet & fixed home image strech issue

* fixed error message

* removed provider check

* removed fontawesome library & added svg image

* added user profile page

* integrated user contact list

* changed color of contact background on hover

* created hamburger menu ui

* removed unused import

* fixed prettier issue

* created contacts action menu

* added contact menu list

* UI for user contact page

* contact info page

* add conversation UI

* integrated add conversation modal

* integrated preferences modal

* optimized code

* removed unused code & fixed linting

* changed let to const

* UI for profile configuration

* added error messages

* Configure user profile

* removed unused parameter

* fixed prettier issue

* env test

* hide contact integrated

* modified condition check

* profile not configured info box

* env test

* chat screen

* chat message UI

* library function integration for chat

* removed unused code

* message actions

* fixed user config profile method

---------

Co-authored-by: Bhupesh-MS <[email protected]>
Co-authored-by: Heiko Burkhardt <[email protected]>

packages/messenger-widget/src/components/Chat/Chat.tsx

@@ -1,15 +1,14 @@
 import './Chat.css';
-import { useContext, useEffect, useState } from 'react';
-import { GlobalContext } from '../../utils/context-utils';
-import ConfigProfileAlertBox from '../ContactProfileAlertBox/ContactProfileAlertBox';
 import { Message } from '../Message/Message';
-import { MessageProps } from '../../interfaces/props';
-import { MessageInput } from '../MessageInput/MessageInput';
 import { getConversation } from 'dm3-lib-storage';
 import { globalConfig, log } from 'dm3-lib-shared';
+import { MessageProps } from '../../interfaces/props';
+import { useContext, useEffect, useState } from 'react';
+import { GlobalContext } from '../../utils/context-utils';
+import { MessageInput } from '../MessageInput/MessageInput';
+import ConfigProfileAlertBox from '../ContactProfileAlertBox/ContactProfileAlertBox';
 import {
     checkUserProfileConfigured,
-    getPastMessages,
     handleMessages,
     scrollToBottomOfChat,
 } from './bl';
@@ -33,6 +32,7 @@ export function Chat() {
         setMessageList(msgs);
     };
 
+    // handles messages list
     useEffect(() => {
         checkUserProfileConfigured(
             state,
@@ -62,16 +62,9 @@ export function Chat() {
                 log(error, 'error');
             }
         }
-    }, [
-        state.userDb?.conversations,
-        state.accounts.selectedContact,
-        state.accounts.contacts,
-    ]);
-
-    useEffect(() => {
-        getPastMessages(state, dispatch, alias, setListOfMessages);
-    }, [state.accounts.selectedContact]);
+    }, [state.userDb?.conversations, state.accounts.selectedContact]);
 
+    // scrolls to bottom on any new message arrival
     useEffect(() => {
         scrollToBottomOfChat();
     }, [messageList]);

packages/messenger-widget/src/components/Contacts/bl.ts

@@ -39,7 +39,7 @@ export const setContactHeightToMaximum = (isProfileConfigured: boolean) => {
     const element = document.getElementsByClassName(
         'contacts-scroller',
     )[0] as HTMLElement;
-    element.style.height = isProfileConfigured ? '89.5vh' : '68vh';
+    element.style.height = isProfileConfigured ? '89.5vh' : '70vh';
 };
 
 // fetches contact list and sets data according to view on UI

packages/messenger-widget/src/components/Message/Message.css

@@ -18,7 +18,7 @@
 .time-style {
     margin-top: 3px;
     font-size: 10px;
-    margin-right: 0.3rem;
+    margin-right: 1.6rem;
 }
 
 .readed-tick-icon {
@@ -32,3 +32,23 @@
 .second-tick {
     margin-left: -5px;
 }
+
+.msg-action-container {
+    height: fit-content;
+    width: fit-content;
+    border: 1px solid var(--text-primary-color);
+    visibility: hidden;
+}
+
+.msg-action-dot {
+    height: 0.9rem;
+    width: 0.9rem;
+}
+
+.msg-action-container:hover {
+    background-color: var(--normal-btn-hover);
+}
+
+.msg:hover div .content-style + .msg-action-container {
+    visibility: visible !important;
+}

packages/messenger-widget/src/components/Message/Message.tsx

@@ -1,16 +1,30 @@
 import './Message.css';
-import { MessageProps } from '../../interfaces/props';
-import tickIcon from '../../assets/images/tick.svg';
+import { useState } from 'react';
 import { MessageState } from 'dm3-lib-messaging';
+import tickIcon from '../../assets/images/tick.svg';
+import { MessageProps } from '../../interfaces/props';
+import threeDotsIcon from '../../assets/images/three-dots.svg';
+import { MessageAction } from '../MessageAction/MessageAction';
 
 export function Message(props: MessageProps) {
+    // state to show action items three dots
+    const [isHovered, setIsHovered] = useState(false);
+
+    const handleMouseOver = () => {
+        setIsHovered(true);
+    };
+
+    const handleMouseOut = () => {
+        setIsHovered(false);
+    };
+
     return (
         <span
-            className={'text-primary-color d-grid'.concat(
+            className={'text-primary-color d-grid msg'.concat(
                 ' ',
                 props.ownMessage
-                    ? 'me-3 justify-content-end'
-                    : 'ms-3 justify-content-start',
+                    ? 'me-2 justify-content-end'
+                    : 'ms-2 justify-content-start',
             )}
         >
             <div className="d-flex">
@@ -24,6 +38,18 @@ export function Message(props: MessageProps) {
                 >
                     {props.message}
                 </div>
+                <div
+                    className="msg-action-container d-flex pointer-cursor border-radius-3 position-relative"
+                    onMouseOver={handleMouseOver}
+                    onMouseLeave={handleMouseOut}
+                >
+                    <img
+                        className="msg-action-dot"
+                        src={threeDotsIcon}
+                        alt="action"
+                    />
+                    {isHovered && <MessageAction {...props} />}
+                </div>
             </div>
             <div
                 className={'d-flex justify-content-end text-secondary-color time-style'.concat(

packages/messenger-widget/src/components/MessageAction/MessageAction.css

@@ -0,0 +1,32 @@
+.msg-dropdown-content {
+    flex-direction: column;
+    position: absolute;
+    background-color: var(--background-container);
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+    z-index: 1;
+    border: 1px solid #000000;
+    border-radius: 5px;
+}
+
+.own-msg {
+    margin-top: 1rem;
+    margin-left: -9rem;
+}
+
+.contact-msg {
+    margin-top: 1rem;
+}
+
+.msg-dropdown-content-top-align {
+    margin-top: -6.9rem !important;
+}
+
+.msg-dropdown-content div {
+    color: var(--text-primary-color);
+    padding: 0.5rem 0.5rem 0.5rem 1rem;
+}
+
+.msg-dropdown-content div:hover {
+    background-color: var(--normal-btn);
+}

packages/messenger-widget/src/components/MessageAction/MessageAction.tsx

@@ -0,0 +1,33 @@
+import './MessageAction.css';
+import editIcon from '../../assets/images/edit.svg';
+import replyIcon from '../../assets/images/reply.svg';
+import deleteIcon from '../../assets/images/chat-delete.svg';
+import { MessageProps } from '../../interfaces/props';
+
+export function MessageAction(props: MessageProps) {
+    return (
+        <div
+            className={'msg-dropdown-content font-size-14 font-weight-400'.concat(
+                ' ',
+                props.ownMessage ? 'own-msg' : 'contact-msg',
+            )}
+        >
+            {props.ownMessage && (
+                <>
+                    <div className="d-flex align-items-center justify-content-start">
+                        <img src={editIcon} alt="edit" className="me-2" />
+                        Edit
+                    </div>
+                    <div className="d-flex align-items-center justify-content-start">
+                        <img src={deleteIcon} alt="delete" className="me-2" />
+                        Delete
+                    </div>
+                </>
+            )}
+            <div className="d-flex align-items-center justify-content-start">
+                <img src={replyIcon} alt="delete" className="me-2" />
+                Reply
+            </div>
+        </div>
+    );
+}