code7-leia 0.1.113 → 0.1.115

package/dist/code7-leia.cjs.development.js

@@ -10,7 +10,8 @@ var React__default = _interopDefault(React);
 var reactRouterDom = require('react-router-dom');
 var PropTypes = _interopDefault(require('prop-types'));
 var cc = _interopDefault(require('classcat'));
-var styled = _interopDefault(require('styled-components'));
+var styled = require('styled-components');
+var styled__default = _interopDefault(styled);
 var fa = require('react-icons/fa');
 var unorm = _interopDefault(require('unorm'));
 var md = require('react-icons/md');
@@ -21,6 +22,8 @@ var redux = require('redux');
 var createSagaMiddleware = _interopDefault(require('redux-saga'));
 var immer = require('immer');
 var effects = require('redux-saga/effects');
+var reactToastify = require('react-toastify');
+require('react-toastify/dist/ReactToastify.css');
 
 function _regeneratorRuntime() {
   _regeneratorRuntime = function () {
@@ -388,8 +391,8 @@ function _taggedTemplateLiteralLoose(strings, raw) {
 }
 
 var _templateObject, _templateObject2;
-var TabsPane = /*#__PURE__*/styled.ul(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: max-content;\n  display: flex;\n  align-items: center;\n  border-bottom: 1px solid var(--neutral-1);\n"])));
-var Tab = /*#__PURE__*/styled.li(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 12px;\n  color: var(--neutral-3);\n  font-size: 0.875rem;\n  font-weight: normal;\n  position: relative;\n  cursor: pointer;\n\n  svg {\n    fill: var(--neutral-3) !important;\n    margin-left: 8px;\n  }\n\n  &.active {\n    color: var(--primary-700-light);\n\n    svg {\n      fill: var(--primary-700-light) !important;\n    }\n\n    ::after {\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      height: 2px;\n      background-color: var(--primary-700-light);\n    }\n  }\n\n  &:not(:last-child) {\n    margin-right: 8px;\n  }\n"])));
+var TabsPane = /*#__PURE__*/styled__default.ul(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: max-content;\n  display: flex;\n  align-items: center;\n  border-bottom: 1px solid var(--neutral-1);\n"])));
+var Tab = /*#__PURE__*/styled__default.li(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: 12px;\n  color: var(--neutral-3);\n  font-size: 0.875rem;\n  font-weight: normal;\n  position: relative;\n  cursor: pointer;\n\n  svg {\n    fill: var(--neutral-3) !important;\n    margin-left: 8px;\n  }\n\n  &.active {\n    color: var(--primary-700-light);\n\n    svg {\n      fill: var(--primary-700-light) !important;\n    }\n\n    ::after {\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      width: 100%;\n      height: 2px;\n      background-color: var(--primary-700-light);\n    }\n  }\n\n  &:not(:last-child) {\n    margin-right: 8px;\n  }\n"])));
 
 var _excluded = ["active", "children"],
   _excluded2 = ["children", "value", "onChange"];
@@ -485,6 +488,34 @@ var defaultLanguage = {
       title: 'No data for analysis',
       description: 'Do a search, click the "Test" button.'
     }
+  },
+  toast: {
+    deleteFile: {
+      success: {
+        title: 'Success',
+        description: 'File deleted successfully!'
+      },
+      fail: {
+        title: 'Failure',
+        description: 'Error deleting the file!'
+      }
+    },
+    uploadFile: {
+      success: {
+        title: 'Success',
+        description: 'File uploaded successfully!'
+      },
+      fail: {
+        title: 'Failure',
+        description: 'Error uploading the file!'
+      }
+    },
+    Test: {
+      fail: {
+        title: 'Failure',
+        description: 'Error testing Le-IA'
+      }
+    }
   }
 };
 var getLanguage = function getLanguage(language) {
@@ -525,7 +556,35 @@ var getLanguage = function getLanguage(language) {
           title: 'Sem dados para análise',
           description: 'Faça uma pesquisa, clique no botão "Teste".'
         })
-      })
+      }),
+      toast: {
+        deleteFile: {
+          success: {
+            title: 'Sucesso',
+            description: 'Arquivo deletado com sucesso!'
+          },
+          fail: {
+            title: 'Falha',
+            description: 'Erro ao deletar o arquivo!'
+          }
+        },
+        uploadFile: {
+          success: {
+            title: 'Sucesso',
+            description: 'Arquivo enviado com sucesso!'
+          },
+          fail: {
+            title: 'Falha',
+            description: 'Erro ao enviar o arquivo!'
+          }
+        },
+        Test: {
+          fail: {
+            title: 'Falha',
+            description: 'Erro ao testar a Le-IA'
+          }
+        }
+      }
     },
     es: _extends({}, defaultLanguage, {
       files: 'Archivos',
@@ -561,23 +620,53 @@ var getLanguage = function getLanguage(language) {
           title: 'Sin datos para el análisis',
           description: 'Realiza una búsqueda, haz clic en el botón "Prueba".'
         })
-      })
+      }),
+      toast: {
+        deleteFile: {
+          success: {
+            title: 'Éxito',
+            description: '¡Archivo eliminado correctamente!'
+          },
+          fail: {
+            title: 'Fallo',
+            description: 'Error al eliminar el archivo!'
+          }
+        },
+        uploadFile: {
+          success: {
+            title: 'Éxito',
+            description: '¡Archivo subido correctamente!'
+          },
+          fail: {
+            title: 'Fallo',
+            description: 'Error al subir el archivo!'
+          }
+        },
+        Test: {
+          fail: {
+            title: 'Fallo',
+            description: 'Error al probar Le-IA'
+          }
+        }
+      }
     })
   };
   return languages[language] || defaultLanguage;
 };
 
-var _templateObject$1, _templateObject2$1;
-var Container = /*#__PURE__*/styled.div(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  .tag {\n    padding: 4px 8px 4px 8px;\n    background: #C7F9ED;\n    border-radius: 4px;\n  }\n\n  .tags {\n    display: flex;\n    justify-content: left;\n    gap: 4px;\n  }\n\n  .divDelete {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n  }\n\n  .buttonDelete {\n    color: #5b0a1f;\n    background: #fae0d2;\n    padding: 12px 20px;\n    border-radius: 4px;\n  }\n\n  .buttonDelete:hover {\n      background: #f5bba7;\n  }\n\n  .button {\n    padding: 8px 16px 8px 16px;\n    border-radius: 4px;\n    gap: 10px;\n  }\n\n  .cancel {\n    background: #F3F5F9;\n    color: #5A5D68;\n  }\n\n  .send {\n    background: #102693;\n    color: white;\n  }\n\n  .delete {\n    background: #871821;\n    color: white;\n  }\n\n  .presset {\n    padding-top: 10px;\n    display: flex;\n    flex-direction: column;\n  }\n\n  #warning {\n    padding: 10px;\n    background: #FAE0D2;\n    color: #871821;\n  }\n"])));
-var Header = /*#__PURE__*/styled.div(_templateObject2$1 || (_templateObject2$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n\n  .infos {\n    display: flex;\n    flex-direction: column;\n    padding: 14px 0;\n\n    h2 {\n      font-size: 20px\n    }\n\n    p {\n      font-size: 14px\n    }\n  }\n\n  .actions {\n    display: flex;\n    justify-content: space-between;\n    padding-bottom: 14px;\n\n    button {\n      background: #102693;\n      padding: 10px 20px;\n      color: white;\n      border-radius: 4px;\n    }\n  }\n\n"])));
+var _templateObject$1, _templateObject2$1, _templateObject3;
+var Container = /*#__PURE__*/styled__default.div(_templateObject$1 || (_templateObject$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n\n  .tag {\n    padding: 4px 8px 4px 8px;\n    background: #C7F9ED;\n    border-radius: 4px;\n  }\n\n  .tags {\n    display: flex;\n    justify-content: left;\n    gap: 4px;\n  }\n\n  .divDelete {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 4px;\n  }\n\n  .buttonDelete {\n    color: #5b0a1f;\n    background: #fae0d2;\n    padding: 12px 20px;\n    border-radius: 4px;\n  }\n\n  .buttonDelete:hover {\n      background: #f5bba7;\n  }\n\n  .button {\n    padding: 8px 16px 8px 16px;\n    border-radius: 4px;\n    gap: 10px;\n  }\n\n  .cancel {\n    background: #F3F5F9;\n    color: #5A5D68;\n  }\n\n  .send {\n    background: #102693;\n    color: white;\n  }\n\n  .delete {\n    background: #871821;\n    color: white;\n  }\n\n  .presset {\n    padding-top: 10px;\n    display: flex;\n    flex-direction: column;\n  }\n\n  #warning {\n    padding: 10px;\n    background: #FAE0D2;\n    color: #871821;\n  }\n"])), function (props) {
+  return props.isLoading && styled.css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteralLoose(["\n      #loading {\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        background-color: #979aa5;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        z-index: 9999;\n      }\n\n      #loading::after {\n        content: \"\";\n        border: 4px solid #f3f3f3; /* Cor do s\xEDmbolo de carregamento */\n        border-top: 4px solid #3498db; /* Cor do s\xEDmbolo de carregamento */\n        border-radius: 50%;\n        width: 30px;\n        height: 30px;\n        animation: spin 1s linear infinite;\n      }\n\n      @keyframes spin {\n        0% { transform: rotate(0deg); }\n        100% { transform: rotate(360deg); }\n      }\n    "])));
+});
+var Header = /*#__PURE__*/styled__default.div(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n\n  .infos {\n    display: flex;\n    flex-direction: column;\n    padding: 14px 0;\n\n    h2 {\n      font-size: 20px\n    }\n\n    p {\n      font-size: 14px\n    }\n  }\n\n  .actions {\n    display: flex;\n    justify-content: space-between;\n    padding-bottom: 14px;\n\n    button {\n      background: #102693;\n      padding: 10px 20px;\n      color: white;\n      border-radius: 4px;\n    }\n  }\n\n"])));
 
-var _templateObject$2, _templateObject2$2, _templateObject3;
-var TableWrapper = /*#__PURE__*/styled.div(_templateObject$2 || (_templateObject$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: max-content;\n  min-height: 50px;\n  position: relative;\n"])));
-var Table = /*#__PURE__*/styled.table(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  line-height: 143%;\n  color: black;\n  width: 100%;\n  border-collapse: collapse;\n  border-radius: 4px;\n\n  th {\n    font-weight: 600;\n    font-size: 14px;\n    line-height: 143%;\n    letter-spacing: 0.018em;\n    color: #5A5D68;\n    text-align: left;\n    padding: 8px;\n    border-radius: 4px;\n  }\n\n  thead tr {\n    background: #dadce3;\n  }\n\n  tbody tr {\n    border: 1px solid #dadce3;\n  }\n\n  &.small td {\n    padding: 4px;\n  }\n\n  &.medium td {\n    padding: 8px;\n  }\n\n  &.large td {\n    padding: 16px;\n  }\n"])));
-var TableLoadingWrapper = /*#__PURE__*/styled.div(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: #f3f5f961;\n"])));
+var _templateObject$2, _templateObject2$2, _templateObject3$1;
+var TableWrapper = /*#__PURE__*/styled__default.div(_templateObject$2 || (_templateObject$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: max-content;\n  min-height: 50px;\n  position: relative;\n"])));
+var Table = /*#__PURE__*/styled__default.table(_templateObject2$2 || (_templateObject2$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  line-height: 143%;\n  color: black;\n  width: 100%;\n  border-collapse: collapse;\n  border-radius: 4px;\n\n  th {\n    font-weight: 600;\n    font-size: 14px;\n    line-height: 143%;\n    letter-spacing: 0.018em;\n    color: #5A5D68;\n    text-align: left;\n    padding: 8px;\n    border-radius: 4px;\n  }\n\n  thead tr {\n    background: #dadce3;\n  }\n\n  tbody tr {\n    border: 1px solid #dadce3;\n  }\n\n  &.small td {\n    padding: 4px;\n  }\n\n  &.medium td {\n    padding: 8px;\n  }\n\n  &.large td {\n    padding: 16px;\n  }\n"])));
+var TableLoadingWrapper = /*#__PURE__*/styled__default.div(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: #f3f5f961;\n"])));
 
 var _templateObject$3;
-var SpinnerWrapper = /*#__PURE__*/styled.span(_templateObject$3 || (_templateObject$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-block;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  &.spinner--sm {\n    width: 24px;\n    height: 24px;\n  }\n\n  &.spinner--md {\n    width: 32px;\n    height: 32px;\n  }\n\n  &.spinner--lg {\n    width: 60px;\n    height: 60px;\n  }\n\n  span {\n    box-sizing: border-box;\n    display: block;\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    margin: 8px;\n    border: 4px solid #fff;\n    border-radius: 50%;\n    animation: rotateSpinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n    border-color: ", " transparent transparent\n      transparent;\n  }\n\n  & span:nth-child(1) {\n    animation-delay: -0.45s;\n  }\n\n  & span:nth-child(2) {\n    animation-delay: -0.3s;\n  }\n\n  & span:nth-child(3) {\n    animation-delay: -0.15s;\n  }\n\n  @keyframes rotateSpinner {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])), function (props) {
+var SpinnerWrapper = /*#__PURE__*/styled__default.span(_templateObject$3 || (_templateObject$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-block;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  &.spinner--sm {\n    width: 24px;\n    height: 24px;\n  }\n\n  &.spinner--md {\n    width: 32px;\n    height: 32px;\n  }\n\n  &.spinner--lg {\n    width: 60px;\n    height: 60px;\n  }\n\n  span {\n    box-sizing: border-box;\n    display: block;\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    margin: 8px;\n    border: 4px solid #fff;\n    border-radius: 50%;\n    animation: rotateSpinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n    border-color: ", " transparent transparent\n      transparent;\n  }\n\n  & span:nth-child(1) {\n    animation-delay: -0.45s;\n  }\n\n  & span:nth-child(2) {\n    animation-delay: -0.3s;\n  }\n\n  & span:nth-child(3) {\n    animation-delay: -0.15s;\n  }\n\n  @keyframes rotateSpinner {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])), function (props) {
   return "var(--" + props.color + ")";
 });
 
@@ -658,8 +747,8 @@ var SearchInput = function SearchInput(_ref) {
   }, React__default.createElement(fa.FaSearch, null)));
 };
 
-var _templateObject$4, _templateObject2$3, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-var FullScreen = /*#__PURE__*/styled.div(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: ", ";\n  cursor: ", ";\n\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  justify-content: center;\n  align-items: center;\n  z-index: ", ";\n  animation: fadeIn 380ms ease-in-out 1;\n  background-color: #2f3845b8;\n  backdrop-filter: blur(2px);\n\n  @keyframes fadeIn {\n    from {\n      background-color: #2f384521;\n    }\n    to {\n      background-color: #2f3845b8;\n    }\n  }\n"])), function (_ref) {
+var _templateObject$4, _templateObject2$3, _templateObject3$2, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var FullScreen = /*#__PURE__*/styled__default.div(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: ", ";\n  cursor: ", ";\n\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  justify-content: center;\n  align-items: center;\n  z-index: ", ";\n  animation: fadeIn 380ms ease-in-out 1;\n  background-color: #2f3845b8;\n  backdrop-filter: blur(2px);\n\n  @keyframes fadeIn {\n    from {\n      background-color: #2f384521;\n    }\n    to {\n      background-color: #2f3845b8;\n    }\n  }\n"])), function (_ref) {
   var isOpen = _ref.isOpen;
   return isOpen === 1 ? 'flex' : 'none';
 }, function (_ref2) {
@@ -669,25 +758,25 @@ var FullScreen = /*#__PURE__*/styled.div(_templateObject$4 || (_templateObject$4
   var zIndex = _ref3.zIndex;
   return zIndex;
 });
-var Modal = /*#__PURE__*/styled.div(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: #fff;\n  border-radius: 3px;\n  position: relative;\n  cursor: default;\n  width: 100%;\n  max-width: ", ";\n  animation: slideIn 350ms cubic-bezier(0.42, 0, 0.21, 1) 1;\n\n  @keyframes slideIn {\n    from {\n      transform: translateY(-120px);\n      opacity: 0;\n    }\n\n    20% {\n      opacity: 0;\n    }\n\n    to {\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n"])), function (_ref4) {
+var Modal = /*#__PURE__*/styled__default.div(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: #fff;\n  border-radius: 3px;\n  position: relative;\n  cursor: default;\n  width: 100%;\n  max-width: ", ";\n  animation: slideIn 350ms cubic-bezier(0.42, 0, 0.21, 1) 1;\n\n  @keyframes slideIn {\n    from {\n      transform: translateY(-120px);\n      opacity: 0;\n    }\n\n    20% {\n      opacity: 0;\n    }\n\n    to {\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n"])), function (_ref4) {
   var maxWidth = _ref4.maxWidth;
   return maxWidth;
 });
-var ModalContainer = /*#__PURE__*/styled.div(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  overflow-y: auto;\n  max-height: ", ";\n"])), function (_ref5) {
+var ModalContainer = /*#__PURE__*/styled__default.div(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  overflow-y: auto;\n  max-height: ", ";\n"])), function (_ref5) {
   var maxHeight = _ref5.maxHeight;
   return maxHeight;
 });
-var ModalHeader = /*#__PURE__*/styled.header(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom: 1px solid #dadce3;\n  padding: var(--spacement-medium);\n"])));
-var ModalTitle = /*#__PURE__*/styled.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 20px;\n  line-height: 150%;\n  letter-spacing: 0.0075em;\n  color: var(--neutral-4);\n"])));
-var ModalButtonClose = /*#__PURE__*/styled.button(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  outline: none;\n  cursor: pointer;\n\n  :hover {\n    opacity: 0.7;\n  }\n"])));
-var ModalContentWrapper = /*#__PURE__*/styled.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  overflow-y: ", ";\n  max-height: ", ";\n  padding: var(--spacement-medium);\n"])), function (_ref6) {
+var ModalHeader = /*#__PURE__*/styled__default.header(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom: 1px solid #dadce3;\n  padding: var(--spacement-medium);\n"])));
+var ModalTitle = /*#__PURE__*/styled__default.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 20px;\n  line-height: 150%;\n  letter-spacing: 0.0075em;\n  color: var(--neutral-4);\n"])));
+var ModalButtonClose = /*#__PURE__*/styled__default.button(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  outline: none;\n  cursor: pointer;\n\n  :hover {\n    opacity: 0.7;\n  }\n"])));
+var ModalContentWrapper = /*#__PURE__*/styled__default.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  overflow-y: ", ";\n  max-height: ", ";\n  padding: var(--spacement-medium);\n"])), function (_ref6) {
   var overflowY = _ref6.overflowY;
   return overflowY;
 }, function (_ref7) {
   var maxHeight = _ref7.maxHeight;
   return maxHeight;
 });
-var ModalFooterWrapper = /*#__PURE__*/styled.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: var(--spacement-medium);\n  background: var(--neutral-0);\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--spacement-medium);\n"])));
+var ModalFooterWrapper = /*#__PURE__*/styled__default.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: var(--spacement-medium);\n  background: var(--neutral-0);\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--spacement-medium);\n"])));
 
 var _excluded$2 = ["children"];
 var ModalFooter = function ModalFooter(_ref) {
@@ -809,7 +898,7 @@ Modal$1.defaultProps = {
 };
 
 var _templateObject$5;
-var Container$1 = /*#__PURE__*/styled.div(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  padding: 24px 0;\n  height: 193px;\n\n  background: ", ";\n  background-position: top, right, bottom, left;\n  background-repeat: repeat-x, repeat-y;\n  background-size: 40px 1px, 1px 40px;\n  background-color: ", ";\n\n  & .content {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    & > .icon {\n      background-color: ", ";\n      border-radius: 16px;\n      width: 145px;\n      height: 145px;\n\n      display: flex;\n      justify-content: center;\n\n      & svg {\n        width: 100%;\n        height: 70%;\n        margin: 20px;\n      }\n    }\n\n    & .description {\n      max-width: 600px;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      padding: 8px 0 8px 24px;\n\n      .button-add {\n        cursor: pointer;\n      }\n\n      .start-icon {\n        display: flex;\n        align-items: center;\n      }\n    }\n  }\n"])), function (_ref) {
+var Container$1 = /*#__PURE__*/styled__default.div(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  padding: 24px 0;\n  height: 193px;\n\n  background: ", ";\n  background-position: top, right, bottom, left;\n  background-repeat: repeat-x, repeat-y;\n  background-size: 40px 1px, 1px 40px;\n  background-color: ", ";\n\n  & .content {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    & > .icon {\n      background-color: ", ";\n      border-radius: 16px;\n      width: 145px;\n      height: 145px;\n\n      display: flex;\n      justify-content: center;\n\n      & svg {\n        width: 100%;\n        height: 70%;\n        margin: 20px;\n      }\n    }\n\n    & .description {\n      max-width: 600px;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      padding: 8px 0 8px 24px;\n\n      .button-add {\n        cursor: pointer;\n      }\n\n      .start-icon {\n        display: flex;\n        align-items: center;\n      }\n    }\n  }\n"])), function (_ref) {
   var hasBorder = _ref.hasBorder;
   return hasBorder && "linear-gradient(\n        to right,\n        #dadce3 50%,\n        rgba(255, 255, 255, 0) 0%\n      ),\n      linear-gradient(#dadce3 50%, rgba(255, 255, 255, 0) 0%),\n      linear-gradient(to right, #dadce3 50%, rgba(255, 255, 255, 0) 0%),\n      linear-gradient(#dadce3 50%, rgba(255, 255, 255, 0) 0%)";
 }, function (_ref2) {
@@ -870,7 +959,7 @@ EmptyState.defaultProps = {
 };
 
 var _templateObject$6;
-var Container$2 = /*#__PURE__*/styled.div(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 50%;\n  margin-right: 5px;\n  select {\n    padding: 12px;\n    border-radius: 4px;\n    border: 1px solid #979AA5;\n    width: 100%;\n    height: 40px;\n    \n    &:focus {\n      outline: none;\n      box-shadow: 0 0 0 3px #6690ff;\n    }\n\n    option {\n      background: white;\n      font-size: 14px;\n      color: #5a5d68;\n    }\n\n    option:checked, option:hover {\n      background: #6690ff;\n      font-size: 14px;\n      color: white;\n    }\n  }\n"])));
+var Container$2 = /*#__PURE__*/styled__default.div(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 50%;\n  margin-right: 5px;\n  select {\n    padding: 12px;\n    border-radius: 4px;\n    border: 1px solid #979AA5;\n    width: 100%;\n    height: 40px;\n    \n    &:focus {\n      outline: none;\n      box-shadow: 0 0 0 3px #6690ff;\n    }\n\n    option {\n      background: white;\n      font-size: 14px;\n      color: #5a5d68;\n    }\n\n    option:checked, option:hover {\n      background: #6690ff;\n      font-size: 14px;\n      color: white;\n    }\n  }\n"])));
 
 var Select = function Select(_ref) {
   var options = _ref.options,
@@ -912,7 +1001,7 @@ var getColor = function getColor(props) {
   }
   return '#979aa5';
 };
-var Container$3 = /*#__PURE__*/styled.div(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: #f3f5f9;\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  padding: 20px;\n  border-width: 2px;\n  border-radius: 4px;\n  border-color: var(", ");\n  border-style: dashed;\n  color: #5a5d68;\n  outline: none;\n  transition: border 0.24s ease-in-out;\n\n  & > span {\n    margin: 8px 10px 0 0;\n    display: flex;\n  }\n\n  button {\n    padding: 8px 16px 8px 16px;\n    border-radius: 4px;\n    border: 2px #102693 solid;\n    margin-top: 10px;\n  }\n"])), function (props) {
+var Container$3 = /*#__PURE__*/styled__default.div(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: #f3f5f9;\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  padding: 20px;\n  border-width: 2px;\n  border-radius: 4px;\n  border-color: var(", ");\n  border-style: dashed;\n  color: #5a5d68;\n  outline: none;\n  transition: border 0.24s ease-in-out;\n\n  & > span {\n    margin: 8px 10px 0 0;\n    display: flex;\n  }\n\n  button {\n    padding: 8px 16px 8px 16px;\n    border-radius: 4px;\n    border: 2px #102693 solid;\n    margin-top: 10px;\n  }\n"])), function (props) {
   return getColor(props);
 });
 
@@ -1121,7 +1210,13 @@ var Types = {
   UPLOAD_FILES_REQUEST: 'UPLOAD_FILES_REQUEST',
   UPLOAD_FILES_SUCCESS: 'UPLOAD_FILES_SUCCESS',
   TEST_REQUEST: 'TEST_REQUEST',
-  TEST_SUCCESS: 'TEST_SUCCESS'
+  TEST_SUCCESS: 'TEST_SUCCESS',
+  LOADING_START: 'LOADING_START',
+  LOADING_FINISH: 'LOADING_FINISH',
+  CHANGING_START: 'CHANGING_START',
+  CHANGING_FINISH: 'CHANGING_FINISH',
+  NETWORK_ONLINE: 'NETWORK_ONLINE',
+  NETWORK_OFFLINE: 'NETWORK_OFFLINE'
 };
 
 var getFilesAction = function getFilesAction(id) {
@@ -1141,12 +1236,13 @@ var getFilesActionSuccess = function getFilesActionSuccess(_ref) {
     }
   };
 };
-var deleteFilesAction = function deleteFilesAction(name, id) {
+var deleteFilesAction = function deleteFilesAction(name, id, language) {
   return {
     type: Types.DELETE_FILES_REQUEST,
     payload: {
       name: name,
-      id: id
+      id: id,
+      language: language
     }
   };
 };
@@ -1159,13 +1255,14 @@ var deleteFilesActionSuccess = function deleteFilesActionSuccess(_ref2) {
     }
   };
 };
-var uploadFilesAction = function uploadFilesAction(file, id, pressets) {
+var uploadFilesAction = function uploadFilesAction(file, id, pressets, language) {
   return {
     type: Types.UPLOAD_FILES_REQUEST,
     payload: {
       file: file,
       id: id,
-      pressets: pressets
+      pressets: pressets,
+      language: language
     }
   };
 };
@@ -1198,6 +1295,16 @@ var testActionSuccess = function testActionSuccess(_ref4) {
     }
   };
 };
+var commonLoadingStart = function commonLoadingStart() {
+  return {
+    type: Types.LOADING_START
+  };
+};
+var commonLoadingFinish = function commonLoadingFinish() {
+  return {
+    type: Types.LOADING_FINISH
+  };
+};
 
 var FileArea = function FileArea() {
   var _useSharedProps = useSharedProps(),
@@ -1231,6 +1338,9 @@ var FileArea = function FileArea() {
   var initFiles = reactRedux.useSelector(function (state) {
     return state.files;
   });
+  var isLoading = reactRedux.useSelector(function (state) {
+    return state.isLoading;
+  });
   var tags = propTags ? propTags.tags : [];
   React.useEffect(function () {
     dispatch(getFilesAction(id));
@@ -1239,6 +1349,8 @@ var FileArea = function FileArea() {
     if (!!initFiles) {
       setFiles(initFiles);
       setInitialFiles(initFiles);
+      setModal(false);
+      setModalDelete(false);
     }
   }, [initFiles]);
   var optionsPresset = tags.map(function (tag) {
@@ -1263,13 +1375,17 @@ var FileArea = function FileArea() {
     setModalDelete(!modalDelete);
   };
   var deleteFile = function deleteFile() {
-    dispatch(deleteFilesAction(fileDelete, id));
+    dispatch(deleteFilesAction(fileDelete, id, language));
   };
   var handleUploadFile = function handleUploadFile() {
-    dispatch(uploadFilesAction(uploadFile, id, [presset]));
+    dispatch(uploadFilesAction(uploadFile, id, [presset], language));
   };
   var renderFiles = function renderFiles() {
-    return React__default.createElement(Container, null, React__default.createElement(Header, null, React__default.createElement("div", {
+    return React__default.createElement(Container, {
+      isLoading: isLoading
+    }, React__default.createElement("div", {
+      id: 'loading'
+    }), React__default.createElement(Header, null, React__default.createElement("div", {
       className: 'infos'
     }, React__default.createElement("h2", null, t.files), React__default.createElement("p", null, t.fileArea.description)), React__default.createElement("div", {
       className: 'actions'
@@ -1371,17 +1487,17 @@ var FileArea = function FileArea() {
   }, React__default.createElement(Container, null, renderFiles()));
 };
 
-var _templateObject$8, _templateObject2$4, _templateObject3$2, _templateObject4$1;
-var Container$4 = /*#__PURE__*/styled.div(_templateObject$8 || (_templateObject$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n\n"])));
-var Header$1 = /*#__PURE__*/styled.div(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  .infos {\n    display: flex;\n    flex-direction: column;\n    padding: 14px 0;\n\n    h2 {\n      font-size: 20px\n    }\n\n    p {\n      font-size: 14px\n    }\n  }\n"])));
-var Inputs = /*#__PURE__*/styled.div(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 10px;\n\n  button {\n    background: #102693;\n    padding: 10px 20px;\n    color: white;\n    border-radius: 4px;\n    width: 190px;\n    height: 40px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    svg {\n      width: 23px;\n      height: 23px;\n    }\n  }\n"])));
-var Result = /*#__PURE__*/styled.div(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: left;\n  background: #F3F5F9;\n  padding: 15px;\n  border-radius: 5px;\n  margin-top: 15px;\n\n  .text{\n    margin-left: 5px;\n    font-size: 14px;\n    line-height: 1.5;\n  }\n\n  .icon {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-right: 5px;\n\n    svg {\n      width: 35px;\n      height: 35px;\n    }\n  }\n\n"])));
+var _templateObject$8, _templateObject2$4, _templateObject3$3, _templateObject4$1;
+var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$8 || (_templateObject$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n\n"])));
+var Header$1 = /*#__PURE__*/styled__default.div(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  .infos {\n    display: flex;\n    flex-direction: column;\n    padding: 14px 0;\n\n    h2 {\n      font-size: 20px\n    }\n\n    p {\n      font-size: 14px\n    }\n  }\n"])));
+var Inputs = /*#__PURE__*/styled__default.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 10px;\n\n  button {\n    background: #102693;\n    padding: 10px 20px;\n    color: white;\n    border-radius: 4px;\n    width: 190px;\n    height: 40px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    svg {\n      width: 23px;\n      height: 23px;\n    }\n  }\n"])));
+var Result = /*#__PURE__*/styled__default.div(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: left;\n  background: #F3F5F9;\n  padding: 15px;\n  border-radius: 5px;\n  margin-top: 15px;\n\n  .text{\n    margin-left: 5px;\n    font-size: 14px;\n    line-height: 1.5;\n  }\n\n  .icon {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-right: 5px;\n\n    svg {\n      width: 35px;\n      height: 35px;\n    }\n  }\n\n"])));
 
-var _templateObject$9, _templateObject2$5, _templateObject3$3, _templateObject4$2;
-var Container$5 = /*#__PURE__*/styled.div(_templateObject$9 || (_templateObject$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 100%;\n  margin-right: 5px;\n"])));
-var StyledInput = /*#__PURE__*/styled.input(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-left: 10px;\n  padding-right: 40px;\n  border-radius: 5px;\n  border: 1px solid #ccc;\n  height: 40px;\n  width: 100%;\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 3px #6690ff;\n  }\n"])));
-var RecordAudioButton = /*#__PURE__*/styled.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  cursor: pointer;\n"])));
-var StyledMicrophoneIcon = /*#__PURE__*/styled(fa.FaMicrophone)(_templateObject4$2 || (_templateObject4$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  pointer-events: none;\n"])));
+var _templateObject$9, _templateObject2$5, _templateObject3$4, _templateObject4$2;
+var Container$5 = /*#__PURE__*/styled__default.div(_templateObject$9 || (_templateObject$9 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 100%;\n  margin-right: 5px;\n"])));
+var StyledInput = /*#__PURE__*/styled__default.input(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-left: 10px;\n  padding-right: 40px;\n  border-radius: 5px;\n  border: 1px solid #ccc;\n  height: 40px;\n  width: 100%;\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 3px #6690ff;\n  }\n"])));
+var RecordAudioButton = /*#__PURE__*/styled__default.div(_templateObject3$4 || (_templateObject3$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  cursor: pointer;\n"])));
+var StyledMicrophoneIcon = /*#__PURE__*/styled__default(fa.FaMicrophone)(_templateObject4$2 || (_templateObject4$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  pointer-events: none;\n"])));
 
 var InputTest = function InputTest(_ref) {
   var placeholder = _ref.placeholder,
@@ -1524,7 +1640,10 @@ var Leia = function Leia(props) {
 
 var INITIAL_STATE = {
   files: [],
-  message: ''
+  message: '',
+  isLoading: false,
+  isChanging: false,
+  isOffline: true
 };
 function filesReducer(state, action) {
   if (state === void 0) {
@@ -1541,12 +1660,76 @@ function filesReducer(state, action) {
       case Types.TEST_SUCCESS:
         draft.message = action.payload.message;
         break;
+      case Types.LOADING_START:
+        draft.isLoading = true;
+        break;
+      case Types.LOADING_FINISH:
+        draft.isLoading = false;
+        break;
+      case Types.CHANGING_START:
+        draft.isChanging = true;
+        break;
+      case Types.CHANGING_FINISH:
+        draft.isChanging = false;
+        break;
+      case Types.NETWORK_ONLINE:
+        draft.isOffline = false;
+        break;
+      case Types.NETWORK_OFFLINE:
+        draft.isOffline = true;
+        break;
       default:
         return action.payload;
     }
   });
 }
 
+var CustomToastContent = function CustomToastContent(_ref) {
+  var title = _ref.title,
+    description = _ref.description;
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: "custom-toastify-content"
+  }, React__default.createElement("strong", {
+    className: "custom-toastify-title"
+  }, title), description && React__default.createElement("p", {
+    className: "custom-toastify-description"
+  }, description)));
+};
+var toast = {
+  "default": function _default(_ref2) {
+    var title = _ref2.title,
+      description = _ref2.description;
+    return reactToastify.toast(React__default.createElement(CustomToastContent, {
+      title: title,
+      description: description
+    }));
+  },
+  success: function success(_ref3) {
+    var title = _ref3.title,
+      description = _ref3.description;
+    return reactToastify.toast.success(React__default.createElement(CustomToastContent, {
+      title: title,
+      description: description
+    }));
+  },
+  error: function error(_ref4) {
+    var title = _ref4.title,
+      description = _ref4.description;
+    return reactToastify.toast.error(React__default.createElement(CustomToastContent, {
+      title: title,
+      description: description
+    }));
+  },
+  warn: function warn(_ref5) {
+    var title = _ref5.title,
+      description = _ref5.description;
+    return reactToastify.toast.warn(React__default.createElement(CustomToastContent, {
+      title: title,
+      description: description
+    }));
+  }
+};
+
 var _marked = /*#__PURE__*/_regeneratorRuntime().mark(getFilesSaga),
   _marked2 = /*#__PURE__*/_regeneratorRuntime().mark(deleteFilesSaga),
   _marked3 = /*#__PURE__*/_regeneratorRuntime().mark(testSaga),
@@ -1582,36 +1765,51 @@ function getFilesSaga(action) {
   }, _marked, null, [[0, 10]]);
 }
 function deleteFilesSaga(action) {
-  var _action$payload, id, name, _yield$call2, data;
+  var t, _action$payload, id, name, _yield$call2, data;
   return _regeneratorRuntime().wrap(function deleteFilesSaga$(_context2) {
     while (1) switch (_context2.prev = _context2.next) {
       case 0:
-        _context2.prev = 0;
-        _action$payload = action.payload, id = _action$payload.id, name = _action$payload.name;
+        t = getLanguage(action.payload.language);
+        _context2.prev = 1;
         _context2.next = 4;
-        return effects.call(api["delete"], "/delete/" + id + "/" + name);
+        return effects.put(commonLoadingStart());
       case 4:
-        _context2.next = 6;
+        _action$payload = action.payload, id = _action$payload.id, name = _action$payload.name;
+        _context2.next = 7;
+        return effects.call(api["delete"], "/delete/" + id + "/" + name);
+      case 7:
+        _context2.next = 9;
         return effects.call(api.get, "/files/" + id);
-      case 6:
+      case 9:
         _yield$call2 = _context2.sent;
         data = _yield$call2.data;
-        _context2.next = 10;
+        _context2.next = 13;
         return effects.put(deleteFilesActionSuccess({
-          files: data.files
+          files: data.files,
+          success: true
         }));
-      case 10:
-        _context2.next = 15;
+      case 13:
+        _context2.next = 19;
         break;
-      case 12:
-        _context2.prev = 12;
-        _context2.t0 = _context2["catch"](0);
-        console.log('-----------deleteFilesSaga.error------------------->', _context2.t0);
       case 15:
+        _context2.prev = 15;
+        _context2.t0 = _context2["catch"](1);
+        toast.error({
+          title: t.toast.deleteFile.fail.title,
+          description: t.toast.deleteFile.fail.description
+        });
+        console.log('-----------deleteFilesSaga.error------------------->', _context2.t0);
+      case 19:
+        _context2.prev = 19;
+        _context2.next = 22;
+        return effects.put(commonLoadingFinish());
+      case 22:
+        return _context2.finish(19);
+      case 23:
       case "end":
         return _context2.stop();
     }
-  }, _marked2, null, [[0, 12]]);
+  }, _marked2, null, [[1, 15, 19, 23]]);
 }
 function testSaga(action) {
   var _action$payload2, question, profile, presset, files_directory, _yield$call3, data;
@@ -1648,11 +1846,15 @@ function testSaga(action) {
   }, _marked3, null, [[0, 10]]);
 }
 function uploadFilesSaga(action) {
-  var _action$payload3, id, file, pressets, tags, blob, formData, queryParams, _yield$call4, data;
+  var t, _action$payload3, id, file, pressets, tags, blob, formData, queryParams, _yield$call4, data;
   return _regeneratorRuntime().wrap(function uploadFilesSaga$(_context4) {
     while (1) switch (_context4.prev = _context4.next) {
       case 0:
-        _context4.prev = 0;
+        t = getLanguage(action.payload.language);
+        _context4.prev = 1;
+        _context4.next = 4;
+        return effects.put(commonLoadingStart());
+      case 4:
         _action$payload3 = action.payload, id = _action$payload3.id, file = _action$payload3.file, pressets = _action$payload3.pressets;
         tags = pressets.join(',');
         blob = new Blob([file.content]);
@@ -1661,34 +1863,44 @@ function uploadFilesSaga(action) {
         queryParams = new URLSearchParams({
           tags: tags
         }).toString();
-        _context4.next = 9;
+        _context4.next = 12;
         return effects.call(api.post, "/upload/" + id + "?" + queryParams, formData, {
           headers: {
             'Content-Type': 'multipart/form-data'
           }
         });
-      case 9:
-        _context4.next = 11;
+      case 12:
+        _context4.next = 14;
         return effects.call(api.get, "/files/" + id);
-      case 11:
+      case 14:
         _yield$call4 = _context4.sent;
         data = _yield$call4.data;
-        _context4.next = 15;
+        _context4.next = 18;
         return effects.put(uploadFilesActionSuccess({
           files: data.files
         }));
-      case 15:
-        _context4.next = 20;
+      case 18:
+        _context4.next = 24;
         break;
-      case 17:
-        _context4.prev = 17;
-        _context4.t0 = _context4["catch"](0);
-        console.log('-----------uploadFilesSaga.error------------------->', _context4.t0);
       case 20:
+        _context4.prev = 20;
+        _context4.t0 = _context4["catch"](1);
+        toast.error({
+          title: t.toast.uploadFile.fail.title,
+          description: t.toast.uploadFile.fail.description
+        });
+        console.log('-----------uploadFilesSaga.error------------------->', _context4.t0);
+      case 24:
+        _context4.prev = 24;
+        _context4.next = 27;
+        return effects.put(commonLoadingFinish());
+      case 27:
+        return _context4.finish(24);
+      case 28:
       case "end":
         return _context4.stop();
     }
-  }, _marked4, null, [[0, 17]]);
+  }, _marked4, null, [[1, 20, 24, 28]]);
 }
 function filesSagas() {
   return _regeneratorRuntime().wrap(function filesSagas$(_context5) {