work on call

package-lock.json

@@ -44,6 +44,7 @@
         "react-js-pagination": "^3.0.3",
         "react-loader-spinner": "^4.0.0",
         "react-media-recorder": "^1.6.3",
+        "react-moveable": "^0.38.4",
         "react-query": "^3.24.3",
         "react-redux": "^7.2.2",
         "react-responsive-carousel": "^3.2.23",
@@ -1291,6 +1292,29 @@
         "date-fns": "^2.0.0"
       }
     },
+    "node_modules/@daybrush/utils": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@daybrush/utils/-/utils-1.9.1.tgz",
+      "integrity": "sha512-0vP3erVCOdptTWnmzfJUkOkuPEUsmDc64X1+7W1vFn/PyI+3KfnlGupMYG4LqgAaXHZmFaZTWidDZqlSG4CLEw=="
+    },
+    "node_modules/@egjs/agent": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/@egjs/agent/-/agent-2.4.3.tgz",
+      "integrity": "sha512-XvksSENe8wPeFlEVouvrOhKdx8HMniJ3by7sro2uPF3M6QqWwjzVcmvwoPtdjiX8O1lfRoLhQMp1a7NGlVTdIA=="
+    },
+    "node_modules/@egjs/children-differ": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@egjs/children-differ/-/children-differ-1.0.1.tgz",
+      "integrity": "sha512-DRvyqMf+CPCOzAopQKHtW+X8iN6Hy6SFol+/7zCUiE5y4P/OB8JP8FtU4NxtZwtafvSL4faD5KoQYPj3JHzPFQ==",
+      "dependencies": {
+        "@egjs/list-differ": "^1.0.0"
+      }
+    },
+    "node_modules/@egjs/list-differ": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@egjs/list-differ/-/list-differ-1.0.0.tgz",
+      "integrity": "sha512-HsbMKc0ZAQH+EUeCmI/2PvTYSybmkaWwakU8QGDYYgMVIg9BQ5sM0A0Nnombjxo2+JzXHxmH+jw//yGX+y6GYw=="
+    },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.7.2",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz",
@@ -2829,6 +2853,36 @@
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
       "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw=="
     },
+    "node_modules/@scena/dragscroll": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@scena/dragscroll/-/dragscroll-1.2.1.tgz",
+      "integrity": "sha512-bVJGC9ZpShoQB1yTRXYRhkAzC6KAlvlRPEiPb4tz15lda5F5va1wX1oeZpLTxmmHkf0x/AeVI1eolWihkILS4Q==",
+      "dependencies": {
+        "@daybrush/utils": "1.6.0",
+        "@scena/event-emitter": "^1.0.2"
+      }
+    },
+    "node_modules/@scena/dragscroll/node_modules/@daybrush/utils": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@daybrush/utils/-/utils-1.6.0.tgz",
+      "integrity": "sha512-9MjMoOLl1U+l8lXByN3BbLZXf+mktoLyeb6t78Jz2WZ7LRldK0FNg8oW//9giO2hHCUyxS7LX6jS1hToGIfRWA=="
+    },
+    "node_modules/@scena/event-emitter": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@scena/event-emitter/-/event-emitter-1.0.5.tgz",
+      "integrity": "sha512-AzY4OTb0+7ynefmWFQ6hxDdk0CySAq/D4efljfhtRHCOP7MBF9zUfhKG3TJiroVjASqVgkRJFdenS8ArZo6Olg==",
+      "dependencies": {
+        "@daybrush/utils": "^1.1.1"
+      }
+    },
+    "node_modules/@scena/matrix": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@scena/matrix/-/matrix-1.1.1.tgz",
+      "integrity": "sha512-JVKBhN0tm2Srl+Yt+Ywqu0oLgLcdemDQlD1OxmN9jaCTwaFPZ7tY8n6dhVgMEaR9qcR7r+kAlMXnSfNyYdE+Vg==",
+      "dependencies": {
+        "@daybrush/utils": "^1.4.0"
+      }
+    },
     "node_modules/@sinonjs/commons": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.1.tgz",
@@ -6581,6 +6635,27 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "node_modules/css-styled": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-styled/-/css-styled-1.0.0.tgz",
+      "integrity": "sha512-lDdPvM2/djv+La110zVY3RGQ7X4OOlzLS+IEjRcn8UlUmJd1+GNcGfDFmsKWwnLBupsY1w0QM1gRgV4RdcCjfw==",
+      "dependencies": {
+        "@daybrush/utils": "^1.0.0",
+        "string-hash": "^1.1.3"
+      },
+      "peerDependencies": {
+        "@daybrush/utils": ">=1.0.0"
+      }
+    },
+    "node_modules/css-to-mat": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/css-to-mat/-/css-to-mat-1.0.3.tgz",
+      "integrity": "sha512-HADRhVqPc8wFqEp6ClK+uuPYg+FMBinNo2ReLyI/KQCncmHPJ60o5zldyJG7NjsTqXWbdfGJO51jnoxfMvWJiA==",
+      "dependencies": {
+        "@daybrush/utils": "^1.3.1",
+        "@scena/matrix": "^1.0.0"
+      }
+    },
     "node_modules/css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -9368,6 +9443,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/framework-utils": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/framework-utils/-/framework-utils-1.1.0.tgz",
+      "integrity": "sha512-KAfqli5PwpFJ8o3psRNs8svpMGyCSAe8nmGcjQ0zZBWN2H6dZDnq+ABp3N3hdUmFeMrLtjOCTXD4yplUJIWceg=="
+    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -9572,6 +9652,15 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/gesto": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/gesto/-/gesto-1.12.2.tgz",
+      "integrity": "sha512-29hLp39ajlNEQvmqi1N1Plhon9wxRZ/KpWKq6U0cwfUwXnk6XiBwaxzFffJQqpbs3ueWm9bi1yTXDoc31Av54g==",
+      "dependencies": {
+        "@daybrush/utils": "^1.7.1",
+        "@scena/event-emitter": "^1.0.2"
+      }
+    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -15401,6 +15490,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/overlap-area": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/overlap-area/-/overlap-area-1.1.0.tgz",
+      "integrity": "sha512-3dlJgJCaVeXH0/eZjYVJvQiLVVrPO4U1ZGqlATtx6QGO3b5eNM6+JgUKa7oStBTdYuGTk7gVoABCW6Tp+dhRdw==",
+      "dependencies": {
+        "@daybrush/utils": "^1.7.1"
+      }
+    },
     "node_modules/p-each-series": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/p-each-series/-/p-each-series-2.2.0.tgz",
@@ -17959,6 +18056,15 @@
         "react": "^15.3.0 || ^16.0.0 || ^17.0.0"
       }
     },
+    "node_modules/react-css-styled": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/react-css-styled/-/react-css-styled-1.0.3.tgz",
+      "integrity": "sha512-6H3aZPO66PYmYg9wx12WzOJpPlBEdA7O5JefCh+4SldlihVKBCxA6mityfWSGWL5ldOkJdHJWGwHR6nGPcVm+A==",
+      "dependencies": {
+        "css-styled": "^1.0.0",
+        "framework-utils": "^1.1.0"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "11.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.1.tgz",
@@ -18206,6 +18312,24 @@
       "resolved": "https://registry.npmjs.org/react-media-recorder/-/react-media-recorder-1.6.3.tgz",
       "integrity": "sha512-uJ5lys9JNzE77cLXZ0EOg9jxAqQb6BpntHHRpC1nHaVKA0ygbGLvBVXU95xms+VnS9mp8pW21oM9uxAjBylTtg=="
     },
+    "node_modules/react-moveable": {
+      "version": "0.38.4",
+      "resolved": "https://registry.npmjs.org/react-moveable/-/react-moveable-0.38.4.tgz",
+      "integrity": "sha512-+5s9RGulX1b1QZsa95bmy2LcdXOjtLZIUT9OW0kEBnwKwY4EnHoC8VEawmmRmB7lEKKDiwxWj5Nwt99tutC8qQ==",
+      "dependencies": {
+        "@daybrush/utils": "^1.7.1",
+        "@egjs/agent": "^2.2.1",
+        "@egjs/children-differ": "^1.0.1",
+        "@scena/dragscroll": "^1.2.0",
+        "@scena/event-emitter": "^1.0.5",
+        "@scena/matrix": "^1.1.1",
+        "css-to-mat": "^1.0.3",
+        "framework-utils": "^1.1.0",
+        "gesto": "^1.12.2",
+        "overlap-area": "^1.1.0",
+        "react-css-styled": "^1.0.3"
+      }
+    },
     "node_modules/react-query": {
       "version": "3.24.3",
       "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.24.3.tgz",
@@ -20469,6 +20593,11 @@
         "node": ">=0.6.19"
       }
     },
+    "node_modules/string-hash": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz",
+      "integrity": "sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A=="
+    },
     "node_modules/string-length": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.1.tgz",
@@ -24944,6 +25073,29 @@
         "@date-io/core": "^1.3.13"
       }
     },
+    "@daybrush/utils": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@daybrush/utils/-/utils-1.9.1.tgz",
+      "integrity": "sha512-0vP3erVCOdptTWnmzfJUkOkuPEUsmDc64X1+7W1vFn/PyI+3KfnlGupMYG4LqgAaXHZmFaZTWidDZqlSG4CLEw=="
+    },
+    "@egjs/agent": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/@egjs/agent/-/agent-2.4.3.tgz",
+      "integrity": "sha512-XvksSENe8wPeFlEVouvrOhKdx8HMniJ3by7sro2uPF3M6QqWwjzVcmvwoPtdjiX8O1lfRoLhQMp1a7NGlVTdIA=="
+    },
+    "@egjs/children-differ": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@egjs/children-differ/-/children-differ-1.0.1.tgz",
+      "integrity": "sha512-DRvyqMf+CPCOzAopQKHtW+X8iN6Hy6SFol+/7zCUiE5y4P/OB8JP8FtU4NxtZwtafvSL4faD5KoQYPj3JHzPFQ==",
+      "requires": {
+        "@egjs/list-differ": "^1.0.0"
+      }
+    },
+    "@egjs/list-differ": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@egjs/list-differ/-/list-differ-1.0.0.tgz",
+      "integrity": "sha512-HsbMKc0ZAQH+EUeCmI/2PvTYSybmkaWwakU8QGDYYgMVIg9BQ5sM0A0Nnombjxo2+JzXHxmH+jw//yGX+y6GYw=="
+    },
     "@emotion/babel-plugin": {
       "version": "11.7.2",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz",
@@ -26056,6 +26208,38 @@
         }
       }
     },
+    "@scena/dragscroll": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@scena/dragscroll/-/dragscroll-1.2.1.tgz",
+      "integrity": "sha512-bVJGC9ZpShoQB1yTRXYRhkAzC6KAlvlRPEiPb4tz15lda5F5va1wX1oeZpLTxmmHkf0x/AeVI1eolWihkILS4Q==",
+      "requires": {
+        "@daybrush/utils": "1.6.0",
+        "@scena/event-emitter": "^1.0.2"
+      },
+      "dependencies": {
+        "@daybrush/utils": {
+          "version": "1.6.0",
+          "resolved": "https://registry.npmjs.org/@daybrush/utils/-/utils-1.6.0.tgz",
+          "integrity": "sha512-9MjMoOLl1U+l8lXByN3BbLZXf+mktoLyeb6t78Jz2WZ7LRldK0FNg8oW//9giO2hHCUyxS7LX6jS1hToGIfRWA=="
+        }
+      }
+    },
+    "@scena/event-emitter": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@scena/event-emitter/-/event-emitter-1.0.5.tgz",
+      "integrity": "sha512-AzY4OTb0+7ynefmWFQ6hxDdk0CySAq/D4efljfhtRHCOP7MBF9zUfhKG3TJiroVjASqVgkRJFdenS8ArZo6Olg==",
+      "requires": {
+        "@daybrush/utils": "^1.1.1"
+      }
+    },
+    "@scena/matrix": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@scena/matrix/-/matrix-1.1.1.tgz",
+      "integrity": "sha512-JVKBhN0tm2Srl+Yt+Ywqu0oLgLcdemDQlD1OxmN9jaCTwaFPZ7tY8n6dhVgMEaR9qcR7r+kAlMXnSfNyYdE+Vg==",
+      "requires": {
+        "@daybrush/utils": "^1.4.0"
+      }
+    },
     "@sinonjs/commons": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.8.1.tgz",
@@ -29270,6 +29454,24 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "css-styled": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-styled/-/css-styled-1.0.0.tgz",
+      "integrity": "sha512-lDdPvM2/djv+La110zVY3RGQ7X4OOlzLS+IEjRcn8UlUmJd1+GNcGfDFmsKWwnLBupsY1w0QM1gRgV4RdcCjfw==",
+      "requires": {
+        "@daybrush/utils": "^1.0.0",
+        "string-hash": "^1.1.3"
+      }
+    },
+    "css-to-mat": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/css-to-mat/-/css-to-mat-1.0.3.tgz",
+      "integrity": "sha512-HADRhVqPc8wFqEp6ClK+uuPYg+FMBinNo2ReLyI/KQCncmHPJ60o5zldyJG7NjsTqXWbdfGJO51jnoxfMvWJiA==",
+      "requires": {
+        "@daybrush/utils": "^1.3.1",
+        "@scena/matrix": "^1.0.0"
+      }
+    },
     "css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -31568,6 +31770,11 @@
         "map-cache": "^0.2.2"
       }
     },
+    "framework-utils": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/framework-utils/-/framework-utils-1.1.0.tgz",
+      "integrity": "sha512-KAfqli5PwpFJ8o3psRNs8svpMGyCSAe8nmGcjQ0zZBWN2H6dZDnq+ABp3N3hdUmFeMrLtjOCTXD4yplUJIWceg=="
+    },
     "fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -31745,6 +31952,15 @@
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
       "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="
     },
+    "gesto": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/gesto/-/gesto-1.12.2.tgz",
+      "integrity": "sha512-29hLp39ajlNEQvmqi1N1Plhon9wxRZ/KpWKq6U0cwfUwXnk6XiBwaxzFffJQqpbs3ueWm9bi1yTXDoc31Av54g==",
+      "requires": {
+        "@daybrush/utils": "^1.7.1",
+        "@scena/event-emitter": "^1.0.2"
+      }
+    },
     "get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -36438,6 +36654,14 @@
         "lcid": "^1.0.0"
       }
     },
+    "overlap-area": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/overlap-area/-/overlap-area-1.1.0.tgz",
+      "integrity": "sha512-3dlJgJCaVeXH0/eZjYVJvQiLVVrPO4U1ZGqlATtx6QGO3b5eNM6+JgUKa7oStBTdYuGTk7gVoABCW6Tp+dhRdw==",
+      "requires": {
+        "@daybrush/utils": "^1.7.1"
+      }
+    },
     "p-each-series": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/p-each-series/-/p-each-series-2.2.0.tgz",
@@ -38533,6 +38757,15 @@
         "prop-types": "^15.5.8"
       }
     },
+    "react-css-styled": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/react-css-styled/-/react-css-styled-1.0.3.tgz",
+      "integrity": "sha512-6H3aZPO66PYmYg9wx12WzOJpPlBEdA7O5JefCh+4SldlihVKBCxA6mityfWSGWL5ldOkJdHJWGwHR6nGPcVm+A==",
+      "requires": {
+        "css-styled": "^1.0.0",
+        "framework-utils": "^1.1.0"
+      }
+    },
     "react-dev-utils": {
       "version": "11.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.1.tgz",
@@ -38732,6 +38965,24 @@
       "resolved": "https://registry.npmjs.org/react-media-recorder/-/react-media-recorder-1.6.3.tgz",
       "integrity": "sha512-uJ5lys9JNzE77cLXZ0EOg9jxAqQb6BpntHHRpC1nHaVKA0ygbGLvBVXU95xms+VnS9mp8pW21oM9uxAjBylTtg=="
     },
+    "react-moveable": {
+      "version": "0.38.4",
+      "resolved": "https://registry.npmjs.org/react-moveable/-/react-moveable-0.38.4.tgz",
+      "integrity": "sha512-+5s9RGulX1b1QZsa95bmy2LcdXOjtLZIUT9OW0kEBnwKwY4EnHoC8VEawmmRmB7lEKKDiwxWj5Nwt99tutC8qQ==",
+      "requires": {
+        "@daybrush/utils": "^1.7.1",
+        "@egjs/agent": "^2.2.1",
+        "@egjs/children-differ": "^1.0.1",
+        "@scena/dragscroll": "^1.2.0",
+        "@scena/event-emitter": "^1.0.5",
+        "@scena/matrix": "^1.1.1",
+        "css-to-mat": "^1.0.3",
+        "framework-utils": "^1.1.0",
+        "gesto": "^1.12.2",
+        "overlap-area": "^1.1.0",
+        "react-css-styled": "^1.0.3"
+      }
+    },
     "react-query": {
       "version": "3.24.3",
       "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.24.3.tgz",
@@ -40649,6 +40900,11 @@
       "integrity": "sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==",
       "dev": true
     },
+    "string-hash": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz",
+      "integrity": "sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A=="
+    },
     "string-length": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.1.tgz",

package.json

@@ -39,6 +39,7 @@
     "react-js-pagination": "^3.0.3",
     "react-loader-spinner": "^4.0.0",
     "react-media-recorder": "^1.6.3",
+    "react-moveable": "^0.38.4",
     "react-query": "^3.24.3",
     "react-redux": "^7.2.2",
     "react-responsive-carousel": "^3.2.23",

src/components/HomePage/CentralBar/ChatBar/Messages/MessageLeftDeleted/index.tsx

@@ -0,0 +1,396 @@
+import { makeStyles } from "@material-ui/core/styles";
+import { styled } from '@mui/material/styles';
+import { useState } from "react";
+import Typography from '@mui/material/Typography';
+import ListItemText from '@mui/material/ListItemText';
+import Button from '@mui/material/Button';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Divider from '@mui/material/Divider';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import Checkbox from '@mui/material/Checkbox';
+import PushPinIcon from '@mui/icons-material/PushPin';
+import CloseIcon from '@mui/icons-material/Close';
+import ReplyIcon from '@mui/icons-material/Reply';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import Avatar from '@mui/material/Avatar';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
+import { firstLetter,slicedWord,timeStampMessage,copied,emojisArr,prodAwsS3 } from '../../../../../../helpers'
+
+const StyledMenu = styled((props:any) => (
+  <Menu
+    elevation={0}
+    anchorOrigin={{
+      vertical: 'top',
+      horizontal: 'right',
+    }}
+    transformOrigin={{
+      vertical: 'bottom',
+      horizontal: 'right',
+    }}
+    {...props}
+  />
+))(({ theme }:any) => ({
+  '& .MuiPaper-root': {
+    borderRadius: 10,
+    marginTop: theme.spacing(0),
+    minWidth: 220,
+    color:
+      theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[500],
+    boxShadow:
+      'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
+    '& .MuiMenu-list': {
+       padding: '4px 4px',
+    },
+    '& .MuiMenuItem-root': {
+      marginBottom: theme.spacing(1),
+      '& .MuiSvgIcon-root': {
+        fontSize: 21,
+        color: theme.palette.text.secondary,
+        marginRight: theme.spacing(2),
+      }
+    },
+  },
+}));
+
+const useStyles = makeStyles({
+  container: {
+    display: "flex",
+    alignItems: 'flex-start',
+    alignContent: 'flex-start',
+    flexDirection:'column',
+    borderRadius: 7,
+    position: 'relative',
+    padding:'4px 0px 4px 22px'
+  }, 
+  wrapper: {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'start',
+    alignContent: 'start',
+    flexDirection: 'column',
+    maxWidth: 450,
+    minWidth:200,
+    padding: 5,
+    borderRadius: 7,
+    wordBreak:'break-word',
+    textAlign: "left",
+    font: "400 .9em 'Open Sans', sans-serif",
+  },
+  wrapperInner: {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'start',
+    alignContent: 'start',
+    flexDirection: 'column',
+    width: '100%',
+    cursor: 'pointer',
+    padding:'0px 10px',
+    '&:hover': {
+      backgroundColor: 'rgba(104, 105, 104, 0.2)'
+    }
+  },
+  deletedInformation: {
+    display: 'flex',
+    justifyContent:'start',
+    alignItems: 'center',
+    alignContent: 'center',
+  },  
+  informationWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    justifyContent: 'flex-end',
+    width: '100%',
+    paddingRight:3,
+  },
+  time: {
+    fontSize: ".65em",
+    fontWeight:600,
+    color: '#414141',
+  },
+  modalDelete: {
+    background: '#ffffff',
+    position: 'absolute',
+    content:'',
+    width: '20%',
+    height:'auto',
+    left: '40%',
+    bottom: '48.5%',
+    borderRadius: 10,
+    padding: 10,
+    display: 'flex',
+    flexDirection:'column'
+  },  
+  overlay: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100vw',
+    height: '100vh',
+    zIndex: 100,
+    backgroundColor: 'rgba(104, 105, 104, 0.6)',
+    overflowY: 'hidden',
+  },
+  emojiTitle: {
+      position: "absolute",
+      fontSize: "1.7em",
+      fontWeight:600,
+      bottom: '0.2rem',
+      right: -40,
+  },
+  emojiCompanionTitle: {
+      position: "absolute",
+      fontSize: "1.7em",
+      fontWeight:600,
+      bottom: '2.2rem',
+      right: -40,
+  },  
+  emoji: {
+		cursor: 'pointer',
+		fontSize: '1.7rem',
+    transition: 'all 0.3s',
+    '&:hover': {
+      transform: 'scale(1.5)'
+    }
+  },
+  emojiActive: {
+    cursor: 'pointer',
+    fontSize: '1.2rem',
+    animation: `$emoji 0.6s ease-out`,
+		animationDirection: 'forwards',
+		animationIterationCount: 1,
+  },  
+  '@keyframes emoji': {
+	  '5%': { transform: 'translateY(1rem)'},
+	  '10%': { transform: 'translateY(0) scale(1)',opacity: 1},
+	  '50%': { transform: 'translateY(-4rem) scale(1.5) rotateY(90deg)'},
+	  '80%': {opacity: 0},
+	  '100%': {transform: 'translateY(-8rem) scale(2) rotateY(180deg)',opacity: 0},
+  },
+  iconClose: {
+    '&:hover': {
+      transform: 'rotate(180deg)',
+      transition: 'all 250ms ease-out ',
+    }
+  },
+  checkboxSelect: {
+    position: 'absolute',
+    left: -64,
+    top: -10,
+    pointerEvents: 'auto'
+  },
+  folderIcon: {
+    color: '#535353',
+    marginRight:5
+  },
+  column: {
+    position: 'absolute',
+    content: '',
+    width: 2,
+    left:0,
+    top:'10%',
+    height:'80%',
+    backgroundColor: '#535353',
+  },
+ avatarIcon: {
+    position: 'absolute',
+    left: -54,
+    bottom: 0,
+  },
+ tongueOne: {
+  content: "''",
+  position: "absolute",
+  width: "0",
+  height: "0",
+  borderLeft: "15px solid transparent",
+  borderRight: "15px solid transparent",
+  bottom: '0px',
+  left: "-15px",
+},
+tongueTwo: {
+  content: "''",
+  position: "absolute",
+  width: "0",
+  height: "0",
+  borderLeft: "16px solid transparent",
+  borderRight: "16px solid transparent",
+  bottom: "0px",
+  left: "-17px",
+ },    
+});
+
+const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
+
+interface IMessageLeftDeleted {
+  tongue: boolean,
+  watched: boolean,
+  edited: boolean,
+  companionIdForwardToAndFrom: string,
+  avatarUrl: string,
+  color: string,
+  message: string,
+  name: string,
+  lastName: string,
+  forwardReplyName:string,
+  forwardReplyLastName: string,
+  caption: string,
+  createdAt: string,
+  emoji: string,
+  emojiCompanion: string,
+  pinned: boolean,
+  isSomeSelected: boolean,
+  isSelected:(_id:string) => boolean,
+  handleSelected: (_id:string) => void,  
+  _id: string,
+  nightMode: boolean,
+  handleReply: (_id: string) => void,
+  handleForward: (_id: string) => void,
+  handleEdit: (_id: string) => void,
+  handleOpenTheChat: (companionIdForwardToAndFrom:string | null) => void,
+}
+
+const MessageLeftDeleted = ({tongue,watched,edited,companionIdForwardToAndFrom,avatarUrl,color,message,name,lastName,forwardReplyName,forwardReplyLastName,caption,createdAt,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward,handleEdit,handleOpenTheChat}:IMessageLeftDeleted) => {
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = useState<any>(null);
+  const [selected, setSelected] = useState<boolean>(false);
+  const [modal,setModal] = useState<boolean>(false)
+  const open = Boolean(anchorEl);
+  const checked = isSelected(_id)
+  
+  const handleClose = (type: string | undefined): void => {
+    if (type === 'copy') copied('Text')
+    if (type === 'delete') setModal(true)
+    setAnchorEl(null)
+    setSelected(false)
+  }
+
+  const handleDeleteModal = (e: any) => {
+    const id = e.target.id
+    if (id === 'overlay' || id === 'cancel') return setModal(false)
+    if (id === 'delete') {
+      removeMessageById(_id)
+      setModal(false)
+    }
+  }  
+  const handleContextMenu = (e: React.MouseEvent<HTMLDivElement>):void => {
+    e.preventDefault()
+    setAnchorEl(e.currentTarget)
+    setSelected(true)
+  }     
+
+  const handleEmojiMenu = ({ target }: any): void => {
+    const idEmoji = target.id
+    if (idEmoji === emoji) {updateMessageById(_id,'')  
+    } else updateMessageById(_id,idEmoji)
+  }
+
+  
+  return (
+    <div className={classes.container} style={{marginBottom:tongue?12:0}}>
+     <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
+       style={{backgroundColor:selected?'#babdbc':'#ffffff',pointerEvents:isSomeSelected?'none':'auto'}}>
+        <Typography style={{color: "#00b333"}} variant="h6" align="right">
+          {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
+          ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
+        </Typography>
+        <div className={classes.wrapperInner} onClick={() => handleOpenTheChat(companionIdForwardToAndFrom)}>
+          <div className={classes.column}></div>
+          <Typography style={{color: "#535353"}} variant="h6" align="right">
+            {`${companionIdForwardToAndFrom?'Forwarded from':'Replied to'} ${firstLetter(forwardReplyName)}${slicedWord(forwardReplyName, 15, 1)}
+            ${firstLetter(forwardReplyLastName)}${slicedWord(forwardReplyLastName, 15, 1)}`}
+          </Typography>
+          <div className={classes.deletedInformation}>
+            <DeleteOutlineIcon className={classes.folderIcon} fontSize='large' />
+            <Typography style={{color: "#535353"}} variant="h6" align="right">
+              The Message was Deleted
+            </Typography>
+          </div>
+        </div>
+        <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }} />
+        <ListItemText secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
+        <div className={classes.informationWrapper}>
+           <div className={classes.time} style={{ color: '#959595'}}>{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}</div>
+           {watched&&<VisibilityIcon style={{ color: '#959595', marginLeft: 5 }} fontSize='small' />}
+        </div>
+        {tongue&&<div className={classes.avatarIcon}>
+          <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
+              sx={{ background: color, width: 40, height: 40 }}>
+              {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
+          </Avatar>
+        </div>}
+        {tongue&&<span className={classes.tongueOne} style={{borderBottom: `15px solid ${selected?'#babdbc' : "#ffffff"}`}}></span>}
+        {tongue&&<span className={classes.tongueTwo} style={{borderBottom: `17px solid ${selected?'#babdbc' : "#ffffff"}`}}></span>}
+        {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
+        {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
+        {isSomeSelected && <div className={classes.checkboxSelect}><Checkbox {...label} checked={checked} sx={{ color: nightMode ? '#ffffff' : '#00ff48', '&.Mui-checked': { color: nightMode ? '#ffffff' : '#00ff48' } }}
+        onClick={() => handleSelected(_id)}/></div>}
+      <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
+          anchorEl={anchorEl} open={open} onClose={handleClose}>
+          <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >
+            {emojisArr.map((el:string, i:number) =>
+              <div key={el} className={emoji === String(i)?classes.emojiActive:classes.emoji} id={String(i)}>{el}</div>)}
+          </MenuItem>
+        <Divider />
+        <MenuItem onClick={() => {
+          handleReply(_id)
+          handleClose(undefined)
+        }}>
+          <ReplyIcon />
+          Reply
+        </MenuItem>
+        <MenuItem onClick={() => {
+            handleForward(_id)
+            handleClose(undefined)
+        }}>
+            <ReplyIcon style={{transform :'rotateY(180deg)'}} />
+            Forward
+        </MenuItem>                   
+          <CopyToClipboard onCopy={() => handleClose('copy')} text={`${message} ${caption}`}>
+          <MenuItem>
+            <ContentCopyIcon />
+             Copy Text
+          </MenuItem>
+        </CopyToClipboard>
+        <MenuItem onClick={() => {
+          pinMessageById(_id, !pinned)
+          handleClose(undefined)
+        }}>
+            {pinned ?
+              <CloseIcon className={classes.iconClose} /> :
+              <PushPinIcon />}
+             {pinned?'Unpin':'Pin'}
+        </MenuItem>          
+        <MenuItem onClick={() => {
+            handleSelected(_id)
+            handleClose(undefined)
+          }}>
+            <CheckBoxIcon />
+            Select
+        </MenuItem>  
+        <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
+            <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
+            Delete
+        </MenuItem>        
+      </StyledMenu>
+      {modal &&
+      <div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
+        <div className={classes.modalDelete}>
+          <h3 style={{color: '#2c2c2c'}}>Delete message</h3>
+          <p style={{ color: '#050505' }}>Are you sure you want to delete message?</p>
+          <Button id='delete' variant="text" color="error" style={{fontWeight:500,fontSize:22}}>
+            DELETE MESSAGE
+          </Button>         
+          <Button id='cancel' variant="text" style={{fontWeight:500,fontSize:22}}>
+             CANCEL
+          </Button>
+        </div>  
+      </div>}         
+      </div>
+  </div>    
+)};  
+
+export default MessageLeftDeleted

src/components/HomePage/CentralBar/ChatBar/Messages/MessageRightDeleted/index.tsx

@@ -0,0 +1,403 @@
+import { makeStyles } from "@material-ui/core/styles";
+import { styled } from '@mui/material/styles';
+import { useState } from "react";
+import Typography from '@mui/material/Typography';
+import ListItemText from '@mui/material/ListItemText';
+import Button from '@mui/material/Button';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Divider from '@mui/material/Divider';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import Checkbox from '@mui/material/Checkbox';
+import PushPinIcon from '@mui/icons-material/PushPin';
+import CloseIcon from '@mui/icons-material/Close';
+import ReplyIcon from '@mui/icons-material/Reply';
+import DoneAllIcon from '@mui/icons-material/DoneAll';
+import DoneIcon from '@mui/icons-material/Done';
+import EditIcon from '@mui/icons-material/Edit';
+import Avatar from '@mui/material/Avatar';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import { firstLetter, slicedWord, timeStampMessage, copied,emojisArr,prodAwsS3 } from '../../../../../../helpers'
+import { removeMessageById,updateMessageById,pinMessageById } from "../../../../../../api-data";
+
+const StyledMenu = styled((props:any) => (
+  <Menu
+    elevation={0}
+    anchorOrigin={{
+      vertical: 'top',
+      horizontal: 'right',
+    }}
+    transformOrigin={{
+      vertical: 'bottom',
+      horizontal: 'right',
+    }}
+    {...props}
+  />
+))(({ theme }:any) => ({
+  '& .MuiPaper-root': {
+    borderRadius: 10,
+    marginTop: theme.spacing(0),
+    minWidth: 220,
+    color:
+      theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[500],
+    boxShadow:
+      'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
+    '& .MuiMenu-list': {
+       padding: '4px 4px',
+    },
+    '& .MuiMenuItem-root': {
+      marginBottom: theme.spacing(1),
+      '& .MuiSvgIcon-root': {
+        fontSize: 21,
+        color: theme.palette.text.secondary,
+        marginRight: theme.spacing(2),
+      }
+    },
+  },
+}));
+
+const useStyles = makeStyles({
+  container: {
+    display: "flex",
+    alignItems: 'flex-end',
+    alignContent: 'flex-end',
+    flexDirection:'column',
+    borderRadius: 7,
+    position: 'relative',
+    padding:'4px 22px 4px 0px'
+  },
+  wrapper: {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'start',
+    alignContent: 'start',
+    flexDirection: 'column',
+    maxWidth: 450,
+    minWidth:200,
+    padding: 5,
+    borderRadius: 7,
+    wordBreak:'break-word',
+    textAlign: "left",
+    font: "400 .9em 'Open Sans', sans-serif",
+  },
+  wrapperInner: {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'start',
+    alignContent: 'start',
+    flexDirection: 'column',
+    width: '100%',
+    cursor: 'pointer',
+    padding:'0px 10px',
+    '&:hover': {
+      backgroundColor: 'rgba(104, 105, 104, 0.2)'
+    }
+  },
+  deletedInformation: {
+    display: 'flex',
+    justifyContent:'start',
+    alignItems: 'center',
+    alignContent: 'center',
+  },
+  informationWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    justifyContent: 'flex-end',
+    width: '100%',
+    paddingRight:3,
+  },
+  time: {
+    fontSize: ".65em",
+    fontWeight:600,
+  },
+  modalDelete: {
+    background: '#ffffff',
+    position: 'absolute',
+    content:'',
+    width: '20%',
+    height:'auto',
+    left: '40%',
+    bottom: '48.5%',
+    borderRadius: 10,
+    padding: 10,
+    display: 'flex',
+    flexDirection:'column'
+  },  
+  overlay: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    width: '100vw',
+    height: '100vh',
+    zIndex: 100,
+    backgroundColor: 'rgba(104, 105, 104, 0.6)',
+    overflowY: 'hidden',
+  },
+  emojiTitle: {
+      position: "absolute",
+      fontSize: "1.7em",
+      fontWeight:600,
+      bottom: '0.2rem',
+      left: -40,
+  },
+  emojiCompanionTitle: {
+      position: "absolute",
+      fontSize: "1.7em",
+      fontWeight:600,
+      bottom: '2.2rem',
+      left: -40,
+  },   
+  emoji: {
+		cursor: 'pointer',
+		fontSize: '1.7rem',
+    transition: 'all 0.3s',
+    '&:hover': {
+      transform: 'scale(1.5)'
+    }
+  },
+  emojiActive: {
+    cursor: 'pointer',
+    fontSize: '1.2rem',
+    animation: `$emoji 0.6s ease-out`,
+		animationDirection: 'forwards',
+		animationIterationCount: 1,
+  },  
+  '@keyframes emoji': {
+	  '5%': { transform: 'translateY(1rem)'},
+	  '10%': { transform: 'translateY(0) scale(1)',opacity: 1},
+	  '50%': { transform: 'translateY(-4rem) scale(1.5) rotateY(90deg)'},
+	  '80%': {opacity: 0},
+	  '100%': {transform: 'translateY(-8rem) scale(2) rotateY(180deg)',opacity: 0},
+  },
+  iconClose: {
+    '&:hover': {
+      transform: 'rotate(180deg)',
+      transition: 'all 250ms ease-out ',
+    }
+  },
+  checkboxSelect: {
+    position: 'absolute',
+    right: -64,
+    top: -10,
+    pointerEvents: 'auto'
+  },
+  folderIcon: {
+    color: '#535353',
+    marginRight:5
+  },
+  column: {
+    position: 'absolute',
+    content: '',
+    width: 2,
+    left:0,
+    top:'10%',
+    height:'80%',
+    backgroundColor: '#535353',
+  },
+ avatarIcon: {
+    position: 'absolute',
+    right: -54,
+    bottom: 0,
+  },
+ tongueOne: {
+  content: "''",
+  position: "absolute",
+  width: "0",
+  height: "0",
+  borderRight: "15px solid transparent",
+  borderLeft: "15px solid transparent",
+  bottom: '0px',
+  right: "-15px",
+},
+tongueTwo: {
+  content: "''",
+  position: "absolute",
+  width: "0",
+  height: "0",
+  borderRight: "16px solid transparent",
+  borderLeft: "16px solid transparent",
+  bottom: "0px",
+  right: "-17px",
+ },    
+});
+
+const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
+
+interface IMessageRightDeleted {
+  tongue: boolean,
+  watched: boolean,
+  edited: boolean,
+  companionIdForwardToAndFrom: string,
+  avatarUrl: string,
+  color: string,
+  message: string,
+  name: string,
+  lastName: string,
+  forwardReplyName:string,
+  forwardReplyLastName: string,
+  caption: string,
+  createdAt: string,
+  emoji: string,
+  emojiCompanion: string,
+  pinned: boolean,
+  isSomeSelected: boolean,
+  isSelected:(_id:string) => boolean,
+  handleSelected: (_id:string) => void,  
+  _id: string,
+  nightMode: boolean,
+  handleReply: (_id: string) => void,
+  handleForward: (_id: string) => void,
+  handleEdit: (_id: string) => void,
+  handleOpenTheChat: (companionIdForwardToAndFrom:string | null) => void,
+}
+
+const MessageRightDeleted = ({tongue,watched,edited,avatarUrl,companionIdForwardToAndFrom,color,message,name,lastName,forwardReplyName,forwardReplyLastName,caption,createdAt,emoji,emojiCompanion,pinned,isSomeSelected,isSelected,handleSelected,_id,nightMode,handleReply,handleForward,handleEdit,handleOpenTheChat}:IMessageRightDeleted) => {
+  const classes = useStyles();
+  const [anchorEl, setAnchorEl] = useState<any>(null);
+  const [selected, setSelected] = useState<boolean>(false);
+  const [modal,setModal] = useState<boolean>(false)
+  const open = Boolean(anchorEl);
+  const checked = isSelected(_id)
+  const handleClose = (type: string | undefined): void => {
+    if (type === 'copy') copied('Text')
+    if (type === 'delete') setModal(true)
+      setAnchorEl(null)
+      setSelected(false)
+  }
+
+  const handleDeleteModal = (e: any) => {
+    const id = e.target.id
+    if (id === 'overlay' || id === 'cancel') return setModal(false)
+    if (id === 'delete') {
+      removeMessageById(_id)
+      setModal(false)
+    }
+  }  
+  const handleContextMenu = (e: React.MouseEvent<HTMLDivElement>):void => {
+    e.preventDefault()
+    setAnchorEl(e.currentTarget)
+    setSelected(true)
+  }
+  
+  const handleEmojiMenu = ({ target }: any): void => {
+    const idEmoji = target.id
+    if (idEmoji === emoji) {updateMessageById(_id,'')  
+    } else updateMessageById(_id,idEmoji)
+  }   
+
+  return (
+    <div className={classes.container} style={{marginBottom:tongue?12:0}}>
+      <div onContextMenu={(e) => handleContextMenu(e)} className={classes.wrapper}
+        style={{backgroundColor:selected?'#ced8d7':'#deffa9', pointerEvents: isSomeSelected ? 'none' : 'auto'}}>
+        <Typography style={{color: "#26afee"}} variant="h6" align="right">
+          {`${firstLetter(name)}${slicedWord(name, 15, 1)} 
+          ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
+        </Typography>
+        <div className={classes.wrapperInner} onClick={() => handleOpenTheChat(companionIdForwardToAndFrom)}>
+          <div className={classes.column}></div>
+          <Typography style={{color: "#535353"}} variant="h6" align="right">
+            {`${companionIdForwardToAndFrom?'Forwarded from':'Replied to'} ${firstLetter(forwardReplyName)}${slicedWord(forwardReplyName, 15, 1)}
+            ${firstLetter(forwardReplyLastName)}${slicedWord(forwardReplyLastName, 15, 1)}`}
+          </Typography>
+          <div className={classes.deletedInformation}>
+            <DeleteOutlineIcon className={classes.folderIcon} fontSize='large' />
+            <Typography style={{color: "#535353"}} variant="h6" align="right">
+              The Message was Deleted
+            </Typography>
+          </div>
+        </div>
+        <ListItemText primary={message} primaryTypographyProps={{ color: "#000000" }} />
+        <ListItemText secondary={caption} secondaryTypographyProps={{color: "#000000"}}/>
+        <div className={classes.informationWrapper}>
+           <div className={classes.time} style={{ color: '#18bd03'}}>{`${edited?'edited ':''}${timeStampMessage(createdAt)}`}</div>
+           {watched ? <DoneAllIcon style={{ color: '#18bd03', marginLeft: 5 }} fontSize='small' /> :
+            <DoneIcon style={{ color: '#18bd03',marginLeft:5}} fontSize='small' />}
+        </div>
+        {tongue&&<div className={classes.avatarIcon}>
+          <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
+              sx={{ background: color, width: 40, height: 40 }}>
+              {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
+          </Avatar>
+        </div>}
+        {tongue&&<span className={classes.tongueOne} style={{borderBottom: `15px solid ${selected?'#ced8d7':'#deffa9'}`}}></span>}
+        {tongue&&<span className={classes.tongueTwo} style={{borderBottom: `17px solid ${selected?'#ced8d7':'#deffa9'}`}}></span>}
+        {emojiCompanion && <div className={classes.emojiCompanionTitle}>{emojisArr[Number(emojiCompanion)]}</div>}
+        {emoji && <div className={classes.emojiTitle}>{emojisArr[Number(emoji)]}</div>}
+        {isSomeSelected && <div className={classes.checkboxSelect}><Checkbox {...label} checked={checked} sx={{ color: nightMode ? '#ffffff' : '#00ff48', '&.Mui-checked': { color: nightMode ? '#ffffff' : '#00ff48' } }}
+        onClick={() => handleSelected(_id)}/></div>}
+      <StyledMenu id="demo-positioned-menu" aria-labelledby="demo-positioned-button"
+          anchorEl={anchorEl} open={open} onClose={handleClose}>
+          <MenuItem onClick={handleEmojiMenu} style={{ cursor: 'none' }} >
+            {emojisArr.map((el:string, i:number) =>
+              <div key={el} className={emoji === String(i)?classes.emojiActive:classes.emoji} id={String(i)}>{el}</div>)}
+          </MenuItem>
+        <Divider />
+        <MenuItem onClick={() => {
+          handleReply(_id)
+          handleClose(undefined)
+        }}>
+          <ReplyIcon />
+          Reply
+        </MenuItem>
+        <MenuItem onClick={() => {
+            handleForward(_id)
+            handleClose(undefined)
+        }}>
+            <ReplyIcon style={{transform :'rotateY(180deg)'}} />
+            Forward
+        </MenuItem>                  
+        <MenuItem onClick={() => {
+            handleEdit(_id)
+            handleClose(undefined)
+        }}>
+            <EditIcon/>
+            Edit
+        </MenuItem>       
+        <CopyToClipboard onCopy={() => handleClose('copy')} text={`${message} ${caption}`}>
+          <MenuItem>
+            <ContentCopyIcon />
+             Copy Text
+          </MenuItem>
+        </CopyToClipboard>
+        <MenuItem onClick={() => {
+          pinMessageById(_id, !pinned)
+          handleClose(undefined)
+        }}>
+            {pinned ?
+              <CloseIcon className={classes.iconClose} /> :
+              <PushPinIcon />}
+             {pinned?'Unpin':'Pin'}
+        </MenuItem>           
+        <MenuItem onClick={() => {
+            handleSelected(_id)
+            handleClose(undefined)
+          }}>
+            <CheckBoxIcon />
+            Select
+        </MenuItem>
+        <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
+            <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
+            Delete
+        </MenuItem>        
+      </StyledMenu>
+      {modal &&
+      <div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
+        <div className={classes.modalDelete}>
+          <h3 style={{color: '#2c2c2c'}}>Delete message</h3>
+          <p style={{ color: '#050505' }}>Are you sure you want to delete message?</p>
+          <Button id='delete' variant="text" color="error" style={{fontWeight:500,fontSize:22}}>
+            DELETE MESSAGE
+          </Button>         
+          <Button id='cancel' variant="text" style={{fontWeight:500,fontSize:22}}>
+             CANCEL
+          </Button>
+        </div>  
+      </div>}        
+      </div>
+   </div>    
+)};
+
+export  default MessageRightDeleted

src/components/HomePage/CentralBar/HeaderBar/Buttons/CallModal/index.tsx

@@ -1,4 +1,5 @@
-import { makeStyles } from '@material-ui/core'
+import { makeStyles, Typography } from '@material-ui/core'
+import { useState } from 'react';
 import { useSelector } from 'react-redux';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemAvatar from '@mui/material/ListItemAvatar';
@@ -13,6 +14,8 @@ import VideocamOffIcon from '@mui/icons-material/VideocamOff';
 import MicIcon from '@mui/icons-material/Mic';
 import MicOffIcon from '@mui/icons-material/MicOff';
 import CallEndIcon from '@mui/icons-material/CallEnd';
+import Moveable from "react-moveable";
+import {OnDrag,OnResize,OnScale} from "react-moveable";
 
 import { getChat } from '../../../../../../redux/chat/selector';
 import { prodAwsS3,firstLetter,slicedWord } from '../../../../../../helpers'
@@ -26,6 +29,16 @@ const useStyles = makeStyles({
     height: '100vh',
     zIndex: 100,
     overflowY: 'hidden',
+  },
+  shareScreenActive: {
+    width: '90%',
+    borderRadius: 7,
+    margin: 'auto',
+    border:'solid 2px #0084ff',
+  },
+  shareScreenDisabled: {
+    width: 0,
+    height:0,
   },  
   modalCall: {
     background: 'rgb(36, 36, 36)',
@@ -36,10 +49,9 @@ const useStyles = makeStyles({
     alignItems: 'center',
     justifyItems:"center",
     width: '34vw',
-    // height:'50vh',
+    height:'50vh',
     left: '33vw',
-    top: 0,
-    // bottom: '25vh',
+    bottom: '25vh',
     borderRadius: 7,
   },
   rightIcons: {
@@ -47,7 +59,6 @@ const useStyles = makeStyles({
     justifyContent: 'end',
     alignContent: 'center',
     alignItems: 'center',
-    marginBottom: 40,
     width:'100%'
   },
   rightIconWrapper: {
@@ -55,7 +66,7 @@ const useStyles = makeStyles({
     cursor: 'pointer',
     padding:'3px 10px 3px 10px',
     '&:hover': {
-      backgroundColor:'rgb(54, 54, 54)'
+      backgroundColor:'rgb(80, 80, 80)'
     }
   },
   rightIconWrapperClose: {
@@ -78,6 +89,28 @@ const useStyles = makeStyles({
     clipPath: 'inset(0 3ch 0 0)',
     animation: `$run 2s steps(5) infinite`,   
   },
+  bottomWrapper: {
+    display: 'flex',
+    justifyContent: 'center',
+    padding: 5
+  },
+  bottomItem: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignContent: 'center',
+    alignItems: 'center',
+    cursor:'pointer', 
+    width: 80,
+  },
+  bottomIcon: {
+    cursor:'pointer',
+  },
+  titleIconBottom: {
+    color: '#ffffff',
+    fontSize: 13,
+    paddingTop:7
+  },
   '@keyframes run': {
     to: {
        clipPath: 'inset(0 -1ch 0 0)'
@@ -85,45 +118,117 @@ const useStyles = makeStyles({
   },  
 })
 
-const CallModal = ({setModalCall}:{setModalCall:any}) => {
-  const classes = useStyles()
-  const {name,lastName,avatarUrl,color,companionId} = useSelector(getChat)
+interface ICallModal {
+  setModalCall:any,
+  shareRef: any,
+  videoRef: any,
+}
 
-  const handleDeleteModal = (e: any) => {
-    // const id = e.target.id
-    // if (id === 'overlay' || id === 'cancel')  return setModalCall(false)
-    // if (id === 'delete') {
-    //   setModalCall(false)
-    // }
-  }
+const CallModal = ({setModalCall,shareRef,videoRef}:ICallModal) => {
+  const classes = useStyles()
+  const { name, lastName, avatarUrl, color } = useSelector(getChat)
+  const [mute, setMute] = useState<boolean>(false)
+  const [share, setShare] = useState<any>(null)
+  const target = videoRef.current
+  const handleShareScreen = async () => {
+    const displayMediaStreamConstraints = {
+      video: true 
+    };
+    const navigator:any = window.navigator
+    const stream = await navigator.mediaDevices.getDisplayMedia(displayMediaStreamConstraints);
+    shareRef.current.srcObject = stream;
+    setShare(true)
+    stream.getVideoTracks()[0].onended = () => setShare(false)
+  };
+  const handleMute = () => setMute(prevState => !prevState)
+  const handleCloseCallModal = () => setModalCall(false)
+  // requesting, waiting ,ringing, hanging up,line busy
 
   return (
-    <div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
+    <div className={classes.overlay} >
+      <video ref={videoRef} style={{minWidth:100,minHeight:70}} playsInline muted autoPlay/>
+      <Moveable
+        target={target}
+        container={null}
+        origin={true}
+        edge={false}
+        draggable={true}
+        throttleDrag={0}
+        onDrag={({ target, transform }: OnDrag) =>
+          target!.style.transform = transform }
+        keepRatio={true}
+        resizable={true}
+        throttleResize={0}
+        onResize={({target, width, height,delta}: OnResize) => {
+          delta[0] && (target!.style.width = `${width}px`);
+          delta[1] && (target!.style.height = `${height}px`);
+        }}
+        scalable={true}
+        throttleScale={0}
+        onScale={({target, scale, transform}: OnScale) => {
+          target!.style.transform = transform;
+        }}
+        rotatable={false}
+        pinchable={true}
+      />
       <div className={classes.modalCall}>
-        <div className={classes.rightIcons}>
+        <div className={classes.rightIcons} style={{marginBottom: share?0:40,}}>
           <div className={classes.rightIconWrapper}>
             <MinimizeIcon fontSize='small' />
           </div>
           <div className={classes.rightIconWrapper}>
             <CropLandscapeIcon fontSize='small' />
           </div>
-          <div className={classes.rightIconWrapperClose}>
+          <div className={classes.rightIconWrapperClose} onClick={handleCloseCallModal}>
             <CloseIcon fontSize='small' />
           </div>
         </div>
-        <ListItemAvatar style={{marginBottom:15}}>
+        {!share&&<ListItemAvatar style={{marginBottom:15}}>
           <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
             sx={{ background: color, width: 120, height: 120, marginRight: 2, fontSize:30}}>
              {`${firstLetter(name)}${firstLetter(lastName)}`}
           </Avatar>
-        </ListItemAvatar>
-        <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 
+        </ListItemAvatar>}
+        {!share&&<div style={{marginBottom:'auto'}}>
+          <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)}
           ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
           primaryTypographyProps={{ color: '#ffffff', fontSize: 20, fontWeight: 500 }} />
-        <ListItemText secondary={<span className={classes.statusCall}>
+          <ListItemText secondary={<span className={classes.statusCall}>
             ringing<span className={classes.animatedDots}>
               ...</span>
-          </span>}/>      
+          </span>} secondaryTypographyProps={{ textAlign: "center" }} />
+        </div>}
+        <video className={share?classes.shareScreenActive:classes.shareScreenDisabled} ref={shareRef} playsInline muted autoPlay/>
+        <div className={classes.bottomWrapper}>
+          {!share&&<div className={classes.bottomItem}>
+            <Avatar className={classes.bottomIcon} onClick={handleShareScreen}
+              sx={{backgroundColor: '#ffffff',color: 'rgb(36, 36, 36)', width: 44, height: 44}}>
+             <ScreenShareIcon fontSize="medium" />
+            </Avatar>
+            <Typography variant="h6" className={classes.titleIconBottom}>Screencast</Typography>
+          </div>}
+          <div className={classes.bottomItem}>
+            <Avatar className={classes.bottomIcon}
+              sx={{backgroundColor: share?'rgb(88, 88, 88)':'#ffffff',color: share?'#ffffff':'rgb(36, 36, 36)', width: 44, height: 44}}>
+              <VideocamOffIcon fontSize="medium" />
+            </Avatar>
+            <Typography variant="h6" className={classes.titleIconBottom}>Start Video</Typography>
+          </div>
+          <div className={classes.bottomItem}>
+            <Avatar className={classes.bottomIcon}
+              sx={{backgroundColor: '#f02a2a',color: '#ffffff', width: 44, height: 44}}>
+              <CallEndIcon fontSize="medium" />
+            </Avatar>
+            <Typography variant="h6" className={classes.titleIconBottom}>End Call</Typography>
+          </div>
+          <div className={classes.bottomItem}>
+            <Avatar className={classes.bottomIcon} onClick={handleMute}
+              sx={{backgroundColor: mute?'#ffffff':'rgb(88, 88, 88)',color: mute?'rgb(36, 36, 36)':'#ffffff', width: 44, height: 44}}>
+              {mute?<MicOffIcon fontSize="medium" />:<MicIcon fontSize="medium" />}
+            </Avatar>
+            <Typography variant="h6" className={classes.titleIconBottom}>{mute?'Unmute':'Mute'}</Typography>
+          </div>
+        </div>
       </div>
     </div>      
    )

src/components/HomePage/CentralBar/HeaderBar/Buttons/index.tsx

@@ -4,7 +4,7 @@ import SearchIcon from '@mui/icons-material/Search';
 import PhoneIcon from '@mui/icons-material/Phone';
 import { makeStyles } from '@material-ui/core'
 import { useDispatch } from 'react-redux';
-import { useState } from 'react';
+import { useState,useRef } from 'react';
 
 import MenuList from './MenuList'
 import DeleteModal from './DeleteModal';
@@ -27,6 +27,8 @@ interface IButtons {
 const Buttons = ({setIsSomeSelected}:IButtons) => {
   const classes = useStyles()
   const dispatch = useDispatch()
+  const shareRef = useRef<any>(null)
+  const videoRef = useRef<any>(null)
   const [modalDelete, setModalDelete] = useState<boolean>(false)
   const [modalCall, setModalCall] = useState<boolean>(true)
   const handleOpenSearch = (e: any) => {
@@ -48,7 +50,7 @@ const Buttons = ({setIsSomeSelected}:IButtons) => {
       </IconButton>      
       <MenuList setModalDelete={setModalDelete} setIsSomeSelected={setIsSomeSelected}/>
       {modalDelete && <DeleteModal setModalDelete={setModalDelete} />}
-      {modalCall && <CallModal setModalCall={setModalCall} />}
+      {modalCall && <CallModal setModalCall={setModalCall} shareRef={shareRef} videoRef={videoRef}/>}
     </Stack>
   );
 }