finished upload files

package-lock.json

@@ -28,6 +28,7 @@
         "bootstrap": "^4.6.0",
         "canvas": "^2.8.0",
         "date-fns": "^2.28.0",
+        "file-saver": "^2.0.5",
         "formik": "^2.2.6",
         "gh-pages": "^3.1.0",
         "lodash.debounce": "^4.0.8",
@@ -50,8 +51,6 @@
         "redux-logger": "^3.0.6",
         "redux-persist": "^6.0.0",
         "redux-toolkit": "^1.1.2",
-        "shortid": "^2.2.16",
-        "socket.io-client": "4.0.0",
         "typescript": "^4.3.5",
         "uuid": "^8.3.1",
         "video-react": "^0.15.0",
@@ -59,6 +58,7 @@
         "yup": "^0.32.8"
       },
       "devDependencies": {
+        "@types/file-saver": "^2.0.5",
         "@types/react-redux": "^7.1.18",
         "@types/react-router-dom": "^5.1.8",
         "@types/shortid": "^0.0.29",
@@ -3249,11 +3249,6 @@
         "@babel/types": "^7.3.0"
       }
     },
-    "node_modules/@types/component-emitter": {
-      "version": "1.2.11",
-      "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.11.tgz",
-      "integrity": "sha512-SRXjM+tfsSlA9VuG8hGO2nft2p8zjXCK1VcC6N4NXbBbYbSia9kzCChYQajIjzIqOOOuh5Ock6MmV2oux4jDZQ=="
-    },
     "node_modules/@types/eslint": {
       "version": "7.2.5",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.5.tgz",
@@ -3268,6 +3263,12 @@
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.45.tgz",
       "integrity": "sha512-jnqIUKDUqJbDIUxm0Uj7bnlMnRm1T/eZ9N+AVMqhPgzrba2GhGG5o/jCTwmdPK709nEZsGoMzXEDUjcXHa3W0g=="
     },
+    "node_modules/@types/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ==",
+      "dev": true
+    },
     "node_modules/@types/glob": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz",
@@ -4915,11 +4916,6 @@
         "babylon": "bin/babylon.js"
       }
     },
-    "node_modules/backo2": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
-      "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc="
-    },
     "node_modules/balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -4988,14 +4984,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/base64-arraybuffer": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.4.tgz",
-      "integrity": "sha1-mBjHngWbE1X5fgQooBfIOOkLqBI=",
-      "engines": {
-        "node": ">= 0.6.0"
-      }
-    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -7472,33 +7460,6 @@
         "once": "^1.4.0"
       }
     },
-    "node_modules/engine.io-client": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-5.0.1.tgz",
-      "integrity": "sha512-CQtGN3YwfvbxVwpPugcsHe5rHT4KgT49CEcQppNtu9N7WxbPN0MAG27lGaem7bvtCFtGNLSL+GEqXsFSz36jTg==",
-      "dependencies": {
-        "base64-arraybuffer": "0.1.4",
-        "component-emitter": "~1.3.0",
-        "debug": "~4.3.1",
-        "engine.io-parser": "~4.0.1",
-        "has-cors": "1.1.0",
-        "parseqs": "0.0.6",
-        "parseuri": "0.0.6",
-        "ws": "~7.4.2",
-        "yeast": "0.1.2"
-      }
-    },
-    "node_modules/engine.io-parser": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-4.0.3.tgz",
-      "integrity": "sha512-xEAAY0msNnESNPc00e19y5heTPX4y/TJ36gr8t1voOaNmTojP9b3oK3BbJLFufW2XFPQaaijpFewm2g2Um3uqA==",
-      "dependencies": {
-        "base64-arraybuffer": "0.1.4"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      }
-    },
     "node_modules/enhanced-resolve": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.3.0.tgz",
@@ -8905,6 +8866,11 @@
         "node": ">= 10.13.0"
       }
     },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "node_modules/file-selector": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.4.0.tgz",
@@ -9871,11 +9837,6 @@
         "node": ">= 0.4.0"
       }
     },
-    "node_modules/has-cors": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz",
-      "integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk="
-    },
     "node_modules/has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -15523,16 +15484,6 @@
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
       "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug=="
     },
-    "node_modules/parseqs": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.6.tgz",
-      "integrity": "sha512-jeAGzMDbfSHHA091hr0r31eYfTig+29g3GKKE/PPbEQ65X0lmMwlEoqmhzu0iztID5uJpZsFlUPDP8ThPL7M8w=="
-    },
-    "node_modules/parseuri": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.6.tgz",
-      "integrity": "sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow=="
-    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -19770,19 +19721,6 @@
       "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==",
       "optional": true
     },
-    "node_modules/shortid": {
-      "version": "2.2.16",
-      "resolved": "https://registry.npmjs.org/shortid/-/shortid-2.2.16.tgz",
-      "integrity": "sha512-Ugt+GIZqvGXCIItnsL+lvFJOiN7RYqlGy7QE41O3YC1xbNSeDGIRO7xg2JJXIAj1cAGnOeC1r7/T9pgrtQbv4g==",
-      "dependencies": {
-        "nanoid": "^2.1.0"
-      }
-    },
-    "node_modules/shortid/node_modules/nanoid": {
-      "version": "2.1.11",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.11.tgz",
-      "integrity": "sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA=="
-    },
     "node_modules/side-channel": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.3.tgz",
@@ -20021,36 +19959,6 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
-    "node_modules/socket.io-client": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.0.0.tgz",
-      "integrity": "sha512-27yQxmXJAEYF19Ygyl8FPJ0if0wegpSmkIIbrWJeI7n7ST1JyH8bbD5v3fjjGY5cfCanACJ3dARUAyiVFNrlTQ==",
-      "dependencies": {
-        "@types/component-emitter": "^1.2.10",
-        "backo2": "~1.0.2",
-        "component-emitter": "~1.3.0",
-        "debug": "~4.3.1",
-        "engine.io-client": "~5.0.0",
-        "parseuri": "0.0.6",
-        "socket.io-parser": "~4.0.4"
-      },
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
-    "node_modules/socket.io-parser": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.0.4.tgz",
-      "integrity": "sha512-t+b0SS+IxG7Rxzda2EVvyBZbvFPBCjJoyHuE0P//7OAsN23GItzDRdWa6ALxZI/8R5ygK7jAR6t028/z+7295g==",
-      "dependencies": {
-        "@types/component-emitter": "^1.2.10",
-        "component-emitter": "~1.3.0",
-        "debug": "~4.3.1"
-      },
-      "engines": {
-        "node": ">=10.0.0"
-      }
-    },
     "node_modules/sockjs": {
       "version": "0.3.20",
       "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.20.tgz",
@@ -23733,11 +23641,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/yeast": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz",
-      "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk="
-    },
     "node_modules/yup": {
       "version": "0.32.8",
       "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.8.tgz",
@@ -26377,11 +26280,6 @@
         "@babel/types": "^7.3.0"
       }
     },
-    "@types/component-emitter": {
-      "version": "1.2.11",
-      "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.11.tgz",
-      "integrity": "sha512-SRXjM+tfsSlA9VuG8hGO2nft2p8zjXCK1VcC6N4NXbBbYbSia9kzCChYQajIjzIqOOOuh5Ock6MmV2oux4jDZQ=="
-    },
     "@types/eslint": {
       "version": "7.2.5",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.5.tgz",
@@ -26396,6 +26294,12 @@
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.45.tgz",
       "integrity": "sha512-jnqIUKDUqJbDIUxm0Uj7bnlMnRm1T/eZ9N+AVMqhPgzrba2GhGG5o/jCTwmdPK709nEZsGoMzXEDUjcXHa3W0g=="
     },
+    "@types/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ==",
+      "dev": true
+    },
     "@types/glob": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz",
@@ -27857,11 +27761,6 @@
       "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
       "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ=="
     },
-    "backo2": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
-      "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc="
-    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -27917,11 +27816,6 @@
         }
       }
     },
-    "base64-arraybuffer": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.4.tgz",
-      "integrity": "sha1-mBjHngWbE1X5fgQooBfIOOkLqBI="
-    },
     "base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -29992,30 +29886,6 @@
         "once": "^1.4.0"
       }
     },
-    "engine.io-client": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-5.0.1.tgz",
-      "integrity": "sha512-CQtGN3YwfvbxVwpPugcsHe5rHT4KgT49CEcQppNtu9N7WxbPN0MAG27lGaem7bvtCFtGNLSL+GEqXsFSz36jTg==",
-      "requires": {
-        "base64-arraybuffer": "0.1.4",
-        "component-emitter": "~1.3.0",
-        "debug": "~4.3.1",
-        "engine.io-parser": "~4.0.1",
-        "has-cors": "1.1.0",
-        "parseqs": "0.0.6",
-        "parseuri": "0.0.6",
-        "ws": "~7.4.2",
-        "yeast": "0.1.2"
-      }
-    },
-    "engine.io-parser": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-4.0.3.tgz",
-      "integrity": "sha512-xEAAY0msNnESNPc00e19y5heTPX4y/TJ36gr8t1voOaNmTojP9b3oK3BbJLFufW2XFPQaaijpFewm2g2Um3uqA==",
-      "requires": {
-        "base64-arraybuffer": "0.1.4"
-      }
-    },
     "enhanced-resolve": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.3.0.tgz",
@@ -31164,6 +31034,11 @@
         }
       }
     },
+    "file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "file-selector": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.4.0.tgz",
@@ -31948,11 +31823,6 @@
         "function-bind": "^1.1.1"
       }
     },
-    "has-cors": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz",
-      "integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk="
-    },
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -36522,16 +36392,6 @@
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
       "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug=="
     },
-    "parseqs": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.6.tgz",
-      "integrity": "sha512-jeAGzMDbfSHHA091hr0r31eYfTig+29g3GKKE/PPbEQ65X0lmMwlEoqmhzu0iztID5uJpZsFlUPDP8ThPL7M8w=="
-    },
-    "parseuri": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.6.tgz",
-      "integrity": "sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow=="
-    },
     "parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -40027,21 +39887,6 @@
       "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==",
       "optional": true
     },
-    "shortid": {
-      "version": "2.2.16",
-      "resolved": "https://registry.npmjs.org/shortid/-/shortid-2.2.16.tgz",
-      "integrity": "sha512-Ugt+GIZqvGXCIItnsL+lvFJOiN7RYqlGy7QE41O3YC1xbNSeDGIRO7xg2JJXIAj1cAGnOeC1r7/T9pgrtQbv4g==",
-      "requires": {
-        "nanoid": "^2.1.0"
-      },
-      "dependencies": {
-        "nanoid": {
-          "version": "2.1.11",
-          "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-2.1.11.tgz",
-          "integrity": "sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA=="
-        }
-      }
-    },
     "side-channel": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.3.tgz",
@@ -40237,30 +40082,6 @@
         }
       }
     },
-    "socket.io-client": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.0.0.tgz",
-      "integrity": "sha512-27yQxmXJAEYF19Ygyl8FPJ0if0wegpSmkIIbrWJeI7n7ST1JyH8bbD5v3fjjGY5cfCanACJ3dARUAyiVFNrlTQ==",
-      "requires": {
-        "@types/component-emitter": "^1.2.10",
-        "backo2": "~1.0.2",
-        "component-emitter": "~1.3.0",
-        "debug": "~4.3.1",
-        "engine.io-client": "~5.0.0",
-        "parseuri": "0.0.6",
-        "socket.io-parser": "~4.0.4"
-      }
-    },
-    "socket.io-parser": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.0.4.tgz",
-      "integrity": "sha512-t+b0SS+IxG7Rxzda2EVvyBZbvFPBCjJoyHuE0P//7OAsN23GItzDRdWa6ALxZI/8R5ygK7jAR6t028/z+7295g==",
-      "requires": {
-        "@types/component-emitter": "^1.2.10",
-        "component-emitter": "~1.3.0",
-        "debug": "~4.3.1"
-      }
-    },
     "sockjs": {
       "version": "0.3.20",
       "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.20.tgz",
@@ -43338,11 +43159,6 @@
         }
       }
     },
-    "yeast": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz",
-      "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk="
-    },
     "yup": {
       "version": "0.32.8",
       "resolved": "https://registry.npmjs.org/yup/-/yup-0.32.8.tgz",

package.json

@@ -24,6 +24,7 @@
     "bootstrap": "^4.6.0",
     "canvas": "^2.8.0",
     "date-fns": "^2.28.0",
+    "file-saver": "^2.0.5",
     "formik": "^2.2.6",
     "gh-pages": "^3.1.0",
     "lodash.debounce": "^4.0.8",
@@ -46,8 +47,6 @@
     "redux-logger": "^3.0.6",
     "redux-persist": "^6.0.0",
     "redux-toolkit": "^1.1.2",
-    "shortid": "^2.2.16",
-    "socket.io-client": "4.0.0",
     "typescript": "^4.3.5",
     "uuid": "^8.3.1",
     "video-react": "^0.15.0",
@@ -81,6 +80,7 @@
     ]
   },
   "devDependencies": {
+    "@types/file-saver": "^2.0.5",
     "@types/react-redux": "^7.1.18",
     "@types/react-router-dom": "^5.1.8",
     "@types/shortid": "^0.0.29",

src/components/HomePage/RightBar/ChatBar/Messages/MessageLeftAudio/index.tsx

@@ -4,7 +4,7 @@ import AudioFileIcon from '@mui/icons-material/AudioFile';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import ReactAudioPlayer from 'react-audio-player';
 
-import { timeStampMessage } from '../../../../../../helpers'
+import { timeStampMessage,handleDownload } from '../../../../../../helpers'
 
 const useStyles = makeStyles({
   container: {
@@ -69,16 +69,16 @@ const useStyles = makeStyles({
       color: '#414141',
       padding: 3,
       borderRadius: 5,
-      zIndex:10
     },
 });
 
 interface IMessageLeftAudio {
   url:string,
   updatedAt: string,
+  fullType:string
 }
 
-const MessageLeftAudio = ({ url,updatedAt }:IMessageLeftAudio) => {
+const MessageLeftAudio = ({ url,updatedAt,fullType }:IMessageLeftAudio) => {
   const classes = useStyles();
 
 
@@ -90,11 +90,9 @@ const MessageLeftAudio = ({ url,updatedAt }:IMessageLeftAudio) => {
             src={url}
             controls
           />
-        <a href={url} target="_blank" rel="noreferrer">
-           <IconButton className={classes.bntDownload}  >
-             <FileDownloadIcon fontSize='medium'/>
-           </IconButton>
-        </a>
+        <IconButton onClick={() => handleDownload(url, fullType)} className={classes.bntDownload}  >
+            <FileDownloadIcon fontSize='medium'/>
+        </IconButton>
         <div className={classes.time}>{timeStampMessage(updatedAt)}</div>
       </div>
     </div>    

src/components/HomePage/RightBar/ChatBar/Messages/MessageLeftFile/index.tsx

@@ -75,10 +75,9 @@ const useStyles = makeStyles({
       color: '#414141',
       padding: 3,
       borderRadius: 5,
-      zIndex:10
   },
   overlay: {
-    position: 'absolute',
+    position: 'sticky',
     top: 0,
     left: 0,
     width: '100%',
@@ -86,7 +85,7 @@ const useStyles = makeStyles({
     zIndex: 100,
     backgroundColor: 'rgba(104, 105, 104, 0.6)',
     border: 'solid 1px rgba(179, 179, 179, 0.6)',
-    overflowY: 'hidden'
+    overflow: 'hidden'
   }, 
 });
 

src/components/HomePage/RightBar/ChatBar/Messages/MessageLeftImage/index.tsx

@@ -4,7 +4,7 @@ import { IconButton } from "@material-ui/core";
 import ImageIcon from '@mui/icons-material/Image';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import { useState } from "react";
-import { timeStampMessage, timeStampFilter } from '../../../../../../helpers'
+import { timeStampMessage, timeStampFilter,handleDownload } from '../../../../../../helpers'
 
 const useStyles = makeStyles({
     container: {
@@ -62,7 +62,6 @@ const useStyles = makeStyles({
       color: '#414141',
       padding: 3,
       borderRadius: 5,
-      zIndex:10
   },
   bntDownload: {
     backgroundColor: '#ffffff',
@@ -100,10 +99,11 @@ interface IMessagesLeftImage {
   updatedAt:string,
   color: string,
   message: string,
-  messages: any
+  messages: any,
+  fullType:string
 }
 
-const MessagesLeftImage = ({url,updatedAt,color,message,messages}:IMessagesLeftImage) => {
+const MessagesLeftImage = ({url,updatedAt,color,message,messages,fullType}:IMessagesLeftImage) => {
   const classes = useStyles();
   const [watch, setWatch] = useState<boolean>(false)
   const handleOpenWatch = () => !watch&&setWatch(true)
@@ -134,11 +134,9 @@ const MessagesLeftImage = ({url,updatedAt,color,message,messages}:IMessagesLeftI
         <ImageIcon fontSize='large' style={{ color: '#bd9a00' }} />
         <img onClick={handleOpenWatch} className={classes.image} alt='message pic' src={url}
           style={{ backgroundColor: url ? '' : color }} width='300' height='400' />
-        <a href={url} target="_blank" rel="noreferrer" download>
-           <IconButton className={classes.bntDownload}  >
-             <FileDownloadIcon fontSize='medium'/>
-           </IconButton>
-        </a>        
+        <IconButton onClick={() => handleDownload(url, fullType)} className={classes.bntDownload}  >
+            <FileDownloadIcon fontSize='medium'/>
+        </IconButton>       
         <div className={classes.time}>{timeStampMessage(updatedAt)}</div>
       </div>
     </div>   

src/components/HomePage/RightBar/ChatBar/Messages/MessageLeftText/index.tsx

@@ -55,7 +55,6 @@ const useStyles = makeStyles({
       color: '#414141',
       padding: 3,
       borderRadius: 5,
-      zIndex:10
     },
 });
 

src/components/HomePage/RightBar/ChatBar/Messages/MessageLeftVideo/index.tsx

@@ -2,7 +2,7 @@ import { makeStyles } from "@material-ui/core/styles";
 import { IconButton } from "@material-ui/core";
 import VideoFileIcon from '@mui/icons-material/VideoFile';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
-import { timeStampMessage } from '../../../../../../helpers'
+import { timeStampMessage,handleDownload } from '../../../../../../helpers'
 import poster from '../../../../../../img/videoPoster.png'
 const { Player } = require('video-react')
 
@@ -67,16 +67,16 @@ const useStyles = makeStyles({
       color: '#414141',
       padding: 3,
       borderRadius: 5,
-      zIndex:10
     },
 });
 
 interface IMessageLeftVideo {
   url:string,
   updatedAt: string,
+  fullType:string
 }
 
-const MessageLeftVideo = ({ url,updatedAt }:IMessageLeftVideo) => {
+const MessageLeftVideo = ({ url,updatedAt,fullType }:IMessageLeftVideo) => {
   const classes = useStyles();
 
   return (
@@ -86,11 +86,9 @@ const MessageLeftVideo = ({ url,updatedAt }:IMessageLeftVideo) => {
         <Player playsInline poster={poster}
           src={url}
          />
-        <a href={url} target="_blank" rel="noreferrer">
-           <IconButton className={classes.bntDownload}  >
-             <FileDownloadIcon fontSize='medium'/>
-           </IconButton>
-        </a>
+        <IconButton onClick={() => handleDownload(url, fullType)} className={classes.bntDownload}  >
+            <FileDownloadIcon fontSize='medium'/>
+        </IconButton>
         <div className={classes.time}>{timeStampMessage(updatedAt)}</div>
       </div>
     </div>    

src/components/HomePage/RightBar/ChatBar/Messages/MessageRightAudio/index.tsx

@@ -4,7 +4,7 @@ import AudioFileIcon from '@mui/icons-material/AudioFile';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import ReactAudioPlayer from 'react-audio-player';
 
-import { timeStampMessage } from '../../../../../../helpers'
+import { timeStampMessage,handleDownload } from '../../../../../../helpers'
 
 const useStyles = makeStyles({
   container: {
@@ -69,16 +69,16 @@ const useStyles = makeStyles({
       color: '#414141',
       padding: 3,
       borderRadius: 5,
-      zIndex:10
     },
 });
 
 interface IMessageRightAudio {
   url:string,
   updatedAt: string,
+  fullType:string
 }
 
-const MessageRightAudio = ({ url,updatedAt }:IMessageRightAudio) => {
+const MessageRightAudio = ({ url,updatedAt,fullType }:IMessageRightAudio) => {
   const classes = useStyles();
 
 
@@ -90,11 +90,9 @@ const MessageRightAudio = ({ url,updatedAt }:IMessageRightAudio) => {
           src={url}
           controls
          />
-        <a href={url} target="_blank" rel="noreferrer" download>
-           <IconButton className={classes.bntDownload}  >
-             <FileDownloadIcon fontSize='medium'/>
-           </IconButton>
-        </a>
+        <IconButton onClick={() => handleDownload(url, fullType)} className={classes.bntDownload}  >
+            <FileDownloadIcon fontSize='medium'/>
+        </IconButton>
         <div className={classes.time}>{timeStampMessage(updatedAt)}</div>
       </div>
     </div>    

src/components/HomePage/RightBar/ChatBar/Messages/MessageRightFile/index.tsx

@@ -76,10 +76,9 @@ const useStyles = makeStyles({
       color: '#414141',
       padding: 3,
       borderRadius: 5,
-      zIndex:10
   },
   overlay: {
-    position: 'absolute',
+    position: 'sticky',
     top: 0,
     left: 0,
     width: '100%',
@@ -87,14 +86,14 @@ const useStyles = makeStyles({
     zIndex: 100,
     backgroundColor: 'rgba(104, 105, 104, 0.6)',
     border: 'solid 1px rgba(179, 179, 179, 0.6)',
-    overflowY: 'hidden'
+    overflow: 'hidden'
   },
 });
 
 interface IMessageRightFile {
   url:string,
   updatedAt: string,
-  type:string,
+  type: string,
 }
 
 const MessageRightFile = ({ url,updatedAt,type }:IMessageRightFile) => {

src/components/HomePage/RightBar/ChatBar/Messages/MessageRightImage/index.tsx

@@ -4,7 +4,7 @@ import { IconButton } from "@material-ui/core";
 import ImageIcon from '@mui/icons-material/Image';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import { useState } from "react";
-import { timeStampMessage, timeStampFilter } from '../../../../../../helpers'
+import { timeStampMessage, timeStampFilter,handleDownload } from '../../../../../../helpers'
 
 
 const useStyles = makeStyles({
@@ -63,7 +63,6 @@ const useStyles = makeStyles({
       color: '#414141',
       padding: 3,
       borderRadius: 5,
-      zIndex:10
   },
   bntDownload: {
     backgroundColor: '#deffa9',
@@ -101,10 +100,11 @@ interface IMessageRightImage {
   updatedAt:string,
   color: string,
   message: string,
-  messages: any
+  messages: any,
+  fullType:string
 }
 
-const MessageRightImage = ({url,updatedAt,color,message,messages}:IMessageRightImage) => {
+const MessageRightImage = ({url,updatedAt,color,message,messages,fullType}:IMessageRightImage) => {
   const classes = useStyles();
   const [watch, setWatch] = useState<boolean>(false)
   const handleOpenWatch = () => !watch&&setWatch(true)
@@ -135,11 +135,9 @@ const MessageRightImage = ({url,updatedAt,color,message,messages}:IMessageRightI
         <ImageIcon fontSize='large' style={{ color: '#bd9a00' }} />
         <img onClick={handleOpenWatch} className={classes.image} alt='message pic' src={url}
           style={{ backgroundColor: url ? '' : color }} width='300' height='400' />
-        <a href={url} target="_blank" rel="noreferrer" download>
-           <IconButton className={classes.bntDownload}  >
-             <FileDownloadIcon fontSize='medium'/>
-           </IconButton>
-        </a>        
+        <IconButton onClick={() => handleDownload(url, fullType)} className={classes.bntDownload}  >
+            <FileDownloadIcon fontSize='medium'/>
+        </IconButton>
         <div className={classes.time}>{timeStampMessage(updatedAt)}</div>
       </div>
     </div>   

src/components/HomePage/RightBar/ChatBar/Messages/MessageRightText/index.tsx

@@ -57,7 +57,6 @@ const useStyles = makeStyles({
       color: '#414141',
       padding: 3,
       borderRadius: 5,
-      zIndex:10
     },
 });
 

src/components/HomePage/RightBar/ChatBar/Messages/MessageRightVideo/index.tsx

@@ -2,7 +2,7 @@ import { makeStyles } from "@material-ui/core/styles";
 import { IconButton } from "@material-ui/core";
 import VideoFileIcon from '@mui/icons-material/VideoFile';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
-import { timeStampMessage } from '../../../../../../helpers'
+import { timeStampMessage,handleDownload } from '../../../../../../helpers'
 import poster from '../../../../../../img/videoPoster.png'
 const { Player } = require('video-react')
 
@@ -67,16 +67,16 @@ const useStyles = makeStyles({
       color: '#414141',
       padding: 3,
       borderRadius: 5,
-      zIndex:10
     },
 });
 
 interface IMessageRightVideo {
   url:string,
   updatedAt: string,
+  fullType:string
 }
 
-const MessageRightVideo = ({ url,updatedAt }:IMessageRightVideo) => {
+const MessageRightVideo = ({ url,updatedAt,fullType }:IMessageRightVideo) => {
   const classes = useStyles();
 
   return (
@@ -86,11 +86,9 @@ const MessageRightVideo = ({ url,updatedAt }:IMessageRightVideo) => {
         <Player  playsInline poster={poster}
           src={url}
          />
-        <a href={url} target="_blank" rel="noreferrer" download>
-           <IconButton className={classes.bntDownload}  >
-             <FileDownloadIcon fontSize='medium'/>
-           </IconButton>
-        </a>
+        <IconButton onClick={() => handleDownload(url, fullType)} className={classes.bntDownload}  >
+            <FileDownloadIcon fontSize='medium'/>
+        </IconButton>
         <div className={classes.time}>{timeStampMessage(updatedAt)}</div>
       </div>
     </div>    

src/components/HomePage/RightBar/ChatBar/SendMessage/index.tsx

@@ -16,6 +16,7 @@ import {
     sentVideoMessageById,sentFileMessageById
 } from '../../../../../api-data'
 import { getChat } from '../../../../../redux/chat/selector'
+import { getIsOpen } from '../../../../../redux/control/selector'
 import { playNotification } from "../../../../../helpers";
 import { typingChat } from "../../../../../api-data";
 
@@ -79,7 +80,11 @@ const useStyles = makeStyles({
         overflowY:'auto',
         resize: 'none',
         height: 'auto',
-    },
+        '&::placeholder': {
+            color: 'rgb(82, 82, 82)',
+            fontWeight: 600
+        }
+    },  
     attachIcon: {
         transform:'rotate(30deg)',  
     },
@@ -88,8 +93,8 @@ const useStyles = makeStyles({
       position: 'absolute',
       width: 300,
       maxWidth: '100%',
-      left: 406,
-      bottom:64,
+      left: '61%',
+      bottom:90,
       zIndex: 10,
       visibility: 'visible',
       borderRadius: 10,
@@ -100,8 +105,7 @@ const useStyles = makeStyles({
       position: 'absolute',
       width: 350,
       height:350,
-      left: 0,
-      bottom:64,
+      bottom:90,
       zIndex: 10,
       visibility: 'visible',
       borderRadius: 10,
@@ -142,7 +146,7 @@ const useStyles = makeStyles({
       width: '100vw',
       height: '100vh',
       zIndex:100
-    },    
+    },
 });
 
 interface ISendMessage{
@@ -153,6 +157,7 @@ interface ISendMessage{
 const SendMessage = ({isArrow,handleScrollTo}:ISendMessage) => {
     const classes = useStyles();
     const { companionId } = useSelector(getChat)
+    const isOpen = useSelector(getIsOpen)
     const [value, setValue] = useState<string>('')
     const [file, setFile] = useState<any>(null)
     const [isOpenMenu, setIsOpenMenu] = useState<boolean>(false)
@@ -204,13 +209,16 @@ const SendMessage = ({isArrow,handleScrollTo}:ISendMessage) => {
     const handleCloseEmoji = (e: any) => {
         if (e.target.id === 'overlay'&&isOpenEmoji) setIsOpenEmoji(false) 
     }
-    const handleClearMessage = () => setFile(null)
-    console.log(file)
+    const handleClearMessage = () => {
+        file && setFile(null)
+        value&&setValue('')
+    }
+    
     return (
         <div className={classes.container} style={{borderTop:isArrow?'solid 1px #ffffff':'none'}} >            
             <div onKeyPress={handleKeyPres} className={classes.inputContainer}>
                 <CloseIcon onClick={handleClearMessage} fontSize="small" className={classes.iconCancel}
-                    sx={{backgroundColor:'#ffffff',width:36,height:36,color:'#949393',display:file?'inline-block':'none'}}/>
+                    sx={{backgroundColor:'#ffffff',width:36,height:36,color:'#949393',display:file || value?'inline-block':'none'}}/>
                 <SentimentSatisfiedAltIcon onClick={handleOpenEmoji}
                     fontSize='medium' sx={{
                         color: isOpenEmoji ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
@@ -218,12 +226,14 @@ const SendMessage = ({isArrow,handleScrollTo}:ISendMessage) => {
                     }} />
                 <div onClick={handleCloseEmoji} className={classes.overlay} id='overlay'
                   style={{ display: isOpenEmoji ? 'block':'none'}}>
-                   <div className={classes.emoji}>
+                   <div className={classes.emoji} style={{left: isOpen&&isOpen !== 'menu'?'31%':'44%'}}>
                       <NotDone name='Emoji Bar'/>
                    </div>  
                 </div>
-                <textarea disabled={file?true:false} value={value} onBlur={handleBlurTextarea} onFocus={handleFocusTextarea} onChange={handleTextarea}
-                    className={classes.textarea} placeholder={file?'Press onto Plane to send or Cross to remove':'Message'} rows={1}></textarea>
+                <textarea disabled={file ? true : false} value={value} onBlur={handleBlurTextarea}
+                    onFocus={handleFocusTextarea} onChange={handleTextarea} className={classes.textarea}
+                    placeholder={file ? 'The File is ready to send' : 'Message'} rows={1}>
+               </textarea>
                 <AttachFileIcon onClick={handleOpenFileMenu} className={classes.attachIcon}
                     fontSize='medium' sx={{
                         color: isOpenMenu ? 'rgb(41, 139, 231)' : '#6b6b6b', cursor: 'pointer',
@@ -231,7 +241,7 @@ const SendMessage = ({isArrow,handleScrollTo}:ISendMessage) => {
                     }} />
                 <div onClick={handleCloseFileMenu} className={classes.overlay} id='overlay'
                     style={{ display: isOpenMenu ? 'block':'none'}}>
-                    <div className={classes.filesMenu}>
+                    <div className={classes.filesMenu} style={{left: isOpen&&isOpen !== 'menu'?'48%':'61%'}}>
                       <FilesMenu setFile={setFile} setValue={setValue} setIsOpenMenu={setIsOpenMenu} setType={setType}/>
                     </div>
                 </div>

src/components/HomePage/RightBar/ChatBar/index.tsx

@@ -85,7 +85,8 @@ const ChatBar = () => {
   return (
       <div ref={divRef} className={classes.container} onScroll={debouncedHandleScroll}>
         <div  className={classes.messagesBody}>
-        {messages.length > 0 ? messages.map(({ message, name, lastName, color, updatedAt,createdAt, number, type }) => {
+        {messages.length > 0 ? messages.map(({ message, name, lastName, color, updatedAt, createdAt,
+          number, type,fullType }) => {
           let isTime
           if (!time) {
             isTime = true
@@ -112,18 +113,21 @@ const ChatBar = () => {
                 color={color}
                 message={message}
                 messages={messages}
+                fullType={fullType}
                   /></div>)
             if (type === 'audio') return (<div key={createdAt}>
               {isTime&&<MessageTime message={timeStampFilter(updatedAt)}/>}
                 <MessageLeftAudio    
                 url={url}
-                updatedAt={updatedAt}  
+                updatedAt={updatedAt}
+                fullType={fullType}
                   /></div>)
             if (type === 'video') return (<div key={createdAt}>
               {isTime&&<MessageTime message={timeStampFilter(updatedAt)}/>}
                 <MessageLeftVideo    
                 url={url}
-                updatedAt={updatedAt}  
+                updatedAt={updatedAt}
+                fullType={fullType}
                   /></div>)
             if (type) return (<div key={createdAt}>
               {isTime&&<MessageTime message={timeStampFilter(updatedAt)}/>}
@@ -149,18 +153,21 @@ const ChatBar = () => {
                 color={color}
                 message={message}
                 messages={messages}
+                fullType={fullType}
                   /></div>)
             if (type === 'audio') return (<div key={createdAt}>
               {isTime&&<MessageTime message={timeStampFilter(updatedAt)}/>}
                 <MessageRightAudio    
                 url={url}
-                updatedAt={updatedAt} 
+                updatedAt={updatedAt}
+                fullType={fullType}
                   /></div>)
             if (type === 'video') return (<div key={createdAt}>
               {isTime&&<MessageTime message={timeStampFilter(updatedAt)}/>}
                  <MessageRightVideo  
                  url={url}
-                 updatedAt={updatedAt} 
+                 updatedAt={updatedAt}
+                 fullType={fullType}
                    /></div>)
             if (type) return (<div key={createdAt}>
               {isTime&&<MessageTime message={timeStampFilter(updatedAt)}/>}

src/helpers/index.ts

@@ -1,4 +1,5 @@
 import { toast } from 'react-toastify';
+import FileSaver from 'file-saver';
 
 const format = (a: string) => a.split(' ').join('').trim()
 
@@ -77,6 +78,8 @@ const playNotificationWithoutPermission = (url: string) => {
     .catch(reason => console.error(`Audio permissions denied: ${reason}`));
 }
 
+const handleDownload = async (url: string,type:string) => await FileSaver.saveAs(url, type);
+
 
 
 export {
@@ -88,5 +91,6 @@ export {
   timeStampFilter,
   playNotification,
   notification,
-  playNotificationWithoutPermission
+  playNotificationWithoutPermission,
+  handleDownload
 }

src/typescript/redux/messages/types.ts

@@ -7,6 +7,7 @@ export type TMessage = {
   number:string,
   _id: string,
   type: string,
+  fullType:string,
   companionId: string,
   owner: any,
   createdAt: string,