quickblox-react-ui-kit 0.3.0-beta.2 → 0.3.0-beta.3

package/dist/index-ui.js

@@ -1494,12 +1494,12 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 const SvgVideoFile = props => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 44 44"
+  viewBox: "0 0 24 24"
 }, props), _path || (_path = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("path", {
-  d: "m33 7.333 3.667 7.334h-5.5L27.5 7.333h-3.667l3.667 7.334H22l-3.667-7.334h-3.666l3.666 7.334h-5.5L9.167 7.333H7.333c-2.016 0-3.648 1.65-3.648 3.667l-.018 22a3.677 3.677 0 0 0 3.666 3.667h29.334A3.677 3.677 0 0 0 40.333 33V7.333z"
+  d: "M8.697 7.333v9.334L16.031 12z"
 })));
 
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNDQgNDQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMzMuMDAwMSA3LjMzMzI1TDM2LjY2NjcgMTQuNjY2NkgzMS4xNjY3TDI3LjUwMDEgNy4zMzMyNUgyMy44MzM0TDI3LjUwMDEgMTQuNjY2NkgyMi4wMDAxTDE4LjMzMzQgNy4zMzMyNUgxNC42NjY3TDE4LjMzMzQgMTQuNjY2NkgxMi44MzM0TDkuMTY2NzUgNy4zMzMyNUg3LjMzMzQxQzUuMzE2NzUgNy4zMzMyNSAzLjY4NTA4IDguOTgzMjUgMy42ODUwOCAxMC45OTk5TDMuNjY2NzUgMzIuOTk5OUMzLjY2Njc1IDM1LjAxNjYgNS4zMTY3NSAzNi42NjY2IDcuMzMzNDEgMzYuNjY2NkgzNi42NjY3QzM4LjY4MzQgMzYuNjY2NiA0MC4zMzM0IDM1LjAxNjYgNDAuMzMzNCAzMi45OTk5VjcuMzMzMjVIMzMuMDAwMVoiLz4KPC9zdmc+Cg==");
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNOC42OTcyNyA3LjMzMzM3VjE2LjY2NjdMMTYuMDMwNiAxMkw4LjY5NzI3IDcuMzMzMzdaIi8+Cjwvc3ZnPgo=");
 
 /***/ }),
 
@@ -3128,34 +3128,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".dialogs-with-search-body {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  align-items: flex-start;\n  justify-content: flex-start;\n  align-self: stretch;\n  flex-shrink: 0;\n  position: relative;\n}\n\n.dialogs-with-search-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0px;\n  align-items: flex-start;\n  justify-content: flex-start;\n  flex-shrink: 0;\n  width: 332px;\n  max-height: 260px;\n  height: 260px;\n  min-height: 260px;\n  position: relative;\n}\n\n.dialogs-with-search-list-item {\n  display: flex;\n  flex-direction: column;\n  gap: 0px;\n  align-items: flex-start;\n  justify-content: flex-start;\n  flex-shrink: 0;\n  position: relative;\n}\n\n.dialogs-with-search-list-divider {\n  flex-shrink: 0;\n  position: relative;\n  overflow: visible;\n}", "",{"version":3,"sources":["webpack://./src/Presentation/Views/Dialog/ForwardMessageFlow/DialogsWithSearch/DialogsWithSearch.scss"],"names":[],"mappings":"AAAA;EACE,aAAA;EACA,sBAAA;EACA,QAAA;EACA,uBAAA;EACA,2BAAA;EACA,mBAAA;EACA,cAAA;EACA,kBAAA;AACF;;AAEA;EACE,aAAA;EACA,sBAAA;EACA,QAAA;EACA,uBAAA;EACA,2BAAA;EACA,cAAA;EACA,YAAA;EACA,iBAAA;EACA,aAAA;EACA,iBAAA;EACA,kBAAA;AACF;;AAEA;EACE,aAAA;EACA,sBAAA;EACA,QAAA;EACA,uBAAA;EACA,2BAAA;EACA,cAAA;EACA,kBAAA;AACF;;AAEA;EACE,cAAA;EACA,kBAAA;EACA,iBAAA;AACF","sourcesContent":[".dialogs-with-search-body {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  align-items: flex-start;\n  justify-content: flex-start;\n  align-self: stretch;\n  flex-shrink: 0;\n  position: relative;\n}\n\n.dialogs-with-search-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0px;\n  align-items: flex-start;\n  justify-content: flex-start;\n  flex-shrink: 0;\n  width: 332px;\n  max-height: 260px;\n  height: 260px;\n  min-height: 260px;\n  position: relative;\n}\n\n.dialogs-with-search-list-item {\n  display: flex;\n  flex-direction: column;\n  gap: 0px;\n  align-items: flex-start;\n  justify-content: flex-start;\n  flex-shrink: 0;\n  position: relative;\n}\n\n.dialogs-with-search-list-divider {\n  flex-shrink: 0;\n  position: relative;\n  overflow: visible;\n}\n"],"sourceRoot":""}]);
-// Exports
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
-
-
-/***/ }),
-
-/***/ "./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/Presentation/Views/Dialog/ForwardMessageFlow/DialogsWithSearch/SearchComponent/SearchComponent.scss":
-/*!**********************************************************************************************************************************************************************************************!*\
-  !*** ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/Presentation/Views/Dialog/ForwardMessageFlow/DialogsWithSearch/SearchComponent/SearchComponent.scss ***!
-  \**********************************************************************************************************************************************************************************************/
-/***/ ((module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
-/* harmony export */ });
-/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../../../../node_modules/css-loader/dist/runtime/sourceMaps.js */ "./node_modules/css-loader/dist/runtime/sourceMaps.js");
-/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../../node_modules/css-loader/dist/runtime/api.js */ "./node_modules/css-loader/dist/runtime/api.js");
-/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
-// Imports
-
-
-var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
-// Module
-___CSS_LOADER_EXPORT___.push([module.id, ".search-component,\n.search-component * {\n  box-sizing: border-box;\n}\n\n.search-component {\n  background: var(--main-background, #ffffff);\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  align-items: flex-start;\n  justify-content: flex-start;\n  align-self: stretch;\n  flex-shrink: 0;\n  position: relative;\n}\n\n.search-component-field {\n  border-radius: 4px;\n  border-style: solid;\n  border-color: var(--tertiary-elements, #636d78);\n  border-width: 1px;\n  padding: 6px 8px 6px 8px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  align-self: stretch;\n  flex-shrink: 0;\n  position: relative;\n}\n\n.search-component-field-left {\n  display: flex;\n  flex-direction: row;\n  gap: 6px;\n  align-items: center;\n  justify-content: flex-start;\n  flex-shrink: 0;\n  position: relative;\n}\n\n.search-component-field-left-icon {\n  border-radius: 4px;\n  padding: 4px;\n  display: flex;\n  flex-direction: row;\n  gap: 0px;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n  position: relative;\n}\n\n.navigation-search {\n  align-self: stretch;\n  flex: 1;\n  position: relative;\n  overflow: visible;\n}\n\n.search-component-field-left-input {\n  color: var(--secondary-text, #636d78);\n  text-align: left;\n  font: var(400 16px/24px \"Roboto\", sans-serif);\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: 280px;\n}\n.search-component-field-left-input input {\n  color: var(--secondary-text);\n  background-color: var(--main-background);\n  margin-left: 6px;\n  margin-right: 6px;\n  font-family: \"Roboto\";\n  font-style: normal;\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 24px;\n  display: flex;\n  align-items: center;\n  letter-spacing: 0.15px;\n  border: none;\n  outline: none;\n}\n\n.search-component-field-right {\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  align-items: center;\n  justify-content: flex-end;\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n  position: relative;\n}", "",{"version":3,"sources":["webpack://./src/Presentation/Views/Dialog/ForwardMessageFlow/DialogsWithSearch/SearchComponent/SearchComponent.scss"],"names":[],"mappings":"AAAA;;EAEE,sBAAA;AACF;;AACA;EACE,2CAAA;EACA,aAAA;EACA,sBAAA;EACA,QAAA;EACA,uBAAA;EACA,2BAAA;EACA,mBAAA;EACA,cAAA;EACA,kBAAA;AAEF;;AAAA;EACE,kBAAA;EACA,mBAAA;EACA,+CAAA;EACA,iBAAA;EACA,wBAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,mBAAA;EACA,cAAA;EACA,kBAAA;AAGF;;AADA;EACE,aAAA;EACA,mBAAA;EACA,QAAA;EACA,mBAAA;EACA,2BAAA;EACA,cAAA;EACA,kBAAA;AAIF;;AAFA;EACE,kBAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,QAAA;EACA,mBAAA;EACA,uBAAA;EACA,cAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;AAKF;;AAHA;EACE,mBAAA;EACA,OAAA;EACA,kBAAA;EACA,iBAAA;AAMF;;AAJA;EACE,qCAAA;EACA,gBAAA;EACA,6CAAA;EACA,kBAAA;EACA,aAAA;EACA,mBAAA;EACA,2BAAA;EACA,YAAA;AAOF;AALE;EACE,4BAAA;EACA,wCAAA;EACA,gBAAA;EACA,iBAAA;EAEA,qBAAA;EACA,kBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EAEA,aAAA;EACA,mBAAA;EACA,sBAAA;EAEA,YAAA;EACA,aAAA;AAIJ;;AADA;EACE,aAAA;EACA,mBAAA;EACA,SAAA;EACA,mBAAA;EACA,yBAAA;EACA,cAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;AAIF","sourcesContent":[".search-component,\n.search-component * {\n  box-sizing: border-box;\n}\n.search-component {\n  background: var(--main-background, #ffffff);\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  align-items: flex-start;\n  justify-content: flex-start;\n  align-self: stretch;\n  flex-shrink: 0;\n  position: relative;\n}\n.search-component-field {\n  border-radius: 4px;\n  border-style: solid;\n  border-color: var(--tertiary-elements, #636d78);\n  border-width: 1px;\n  padding: 6px 8px 6px 8px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  align-self: stretch;\n  flex-shrink: 0;\n  position: relative;\n}\n.search-component-field-left {\n  display: flex;\n  flex-direction: row;\n  gap: 6px;\n  align-items: center;\n  justify-content: flex-start;\n  flex-shrink: 0;\n  position: relative;\n}\n.search-component-field-left-icon {\n  border-radius: 4px;\n  padding: 4px;\n  display: flex;\n  flex-direction: row;\n  gap: 0px;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n  position: relative;\n}\n.navigation-search {\n  align-self: stretch;\n  flex: 1;\n  position: relative;\n  overflow: visible;\n}\n.search-component-field-left-input {\n  color: var(--secondary-text, #636d78);\n  text-align: left;\n  font: var(400 16px/24px \"Roboto\", sans-serif);\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: 280px;\n\n  input {\n    color: var(--secondary-text);\n    background-color: var(--main-background);\n    margin-left: 6px;\n    margin-right: 6px;\n\n    font-family: 'Roboto';\n    font-style: normal;\n    font-weight: 400;\n    font-size: 16px;\n    line-height: 24px;\n\n    display: flex;\n    align-items: center;\n    letter-spacing: 0.15px;\n\n    border: none;\n    outline: none;\n  }\n}\n.search-component-field-right {\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  align-items: center;\n  justify-content: flex-end;\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n  position: relative;\n}\n"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, ".dialogs-with-search-body {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  align-items: flex-start;\n  justify-content: flex-start;\n  align-self: stretch;\n  flex-shrink: 0;\n  position: relative;\n}\n\n.dialogs-with-search-icon {\n  width: 24px;\n  height: 24px;\n  fill: var(--tertiary-elements);\n}\n\n.dialogs-with-search-text-field {\n  width: 100%;\n}\n\n.dialogs-with-search-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0px;\n  align-items: flex-start;\n  justify-content: flex-start;\n  flex-shrink: 0;\n  width: 332px;\n  max-height: 260px;\n  height: 260px;\n  min-height: 260px;\n  position: relative;\n}\n\n.dialogs-with-search-list-item {\n  display: flex;\n  flex-direction: column;\n  gap: 0px;\n  align-items: flex-start;\n  justify-content: flex-start;\n  flex-shrink: 0;\n  position: relative;\n}\n\n.dialogs-with-search-list-divider {\n  flex-shrink: 0;\n  position: relative;\n  overflow: visible;\n}", "",{"version":3,"sources":["webpack://./src/Presentation/Views/Dialog/ForwardMessageFlow/DialogsWithSearch/DialogsWithSearch.scss"],"names":[],"mappings":"AAAA;EACE,aAAA;EACA,sBAAA;EACA,QAAA;EACA,uBAAA;EACA,2BAAA;EACA,mBAAA;EACA,cAAA;EACA,kBAAA;AACF;;AAEA;EACE,WAAA;EACA,YAAA;EACA,8BAAA;AACF;;AAEA;EACE,WAAA;AACF;;AAEA;EACE,aAAA;EACA,sBAAA;EACA,QAAA;EACA,uBAAA;EACA,2BAAA;EACA,cAAA;EACA,YAAA;EACA,iBAAA;EACA,aAAA;EACA,iBAAA;EACA,kBAAA;AACF;;AAEA;EACE,aAAA;EACA,sBAAA;EACA,QAAA;EACA,uBAAA;EACA,2BAAA;EACA,cAAA;EACA,kBAAA;AACF;;AAEA;EACE,cAAA;EACA,kBAAA;EACA,iBAAA;AACF","sourcesContent":[".dialogs-with-search-body {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  align-items: flex-start;\n  justify-content: flex-start;\n  align-self: stretch;\n  flex-shrink: 0;\n  position: relative;\n}\n\n.dialogs-with-search-icon {\n  width: 24px;\n  height: 24px;\n  fill: var(--tertiary-elements);\n}\n\n.dialogs-with-search-text-field {\n  width: 100%;\n}\n\n.dialogs-with-search-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0px;\n  align-items: flex-start;\n  justify-content: flex-start;\n  flex-shrink: 0;\n  width: 332px;\n  max-height: 260px;\n  height: 260px;\n  min-height: 260px;\n  position: relative;\n}\n\n.dialogs-with-search-list-item {\n  display: flex;\n  flex-direction: column;\n  gap: 0px;\n  align-items: flex-start;\n  justify-content: flex-start;\n  flex-shrink: 0;\n  position: relative;\n}\n\n.dialogs-with-search-list-divider {\n  flex-shrink: 0;\n  position: relative;\n  overflow: visible;\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -3344,7 +3317,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".header-dialog-info,\n.header-dialog-info * {\n  box-sizing: border-box;\n}\n\n.header-dialog-info {\n  background: var(--color-background, #ffffff);\n  padding: 16px 16px 16px 24px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  align-self: stretch;\n  flex-shrink: 0;\n  position: relative;\n  border-bottom: 1px solid var(--divider);\n  height: 64px;\n}\n\n.header-dialog-info-headline {\n  color: var(--main-text, #0b1b0f);\n  text-align: left;\n  font: var(--title-title-large);\n  position: relative;\n}\n\n.header-dialog-info-icon {\n  border-radius: 4px;\n  padding: 4px;\n  display: flex;\n  flex-direction: row;\n  gap: 0px;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n  position: relative;\n}\n\n.dialog-information-profile,\n.dialog-information-profile * {\n  box-sizing: border-box;\n}\n\n.dialog-information-profile {\n  background: var(--color-background, #ffffff);\n  padding: 24px 0px 24px 0px;\n  align-self: stretch;\n  flex-flow: column;\n  flex-shrink: 0;\n  height: 160px;\n  position: relative;\n  border-bottom: 1px solid var(--divider);\n}\n\n.dialog-information-profile-avatar {\n  height: 80px;\n  left: 140px;\n  top: 24px;\n}\n\n.dialog-info-profile-avatar-default-icon {\n  display: flex;\n  justify-content: center;\n}\n\n.dialog-info-profile-avatar-ellipse {\n  background: var(--disabled-elements, #bcc1c5);\n  border-radius: 50%;\n  position: absolute;\n  height: 81px;\n  width: 81px;\n  top: 24px;\n}\n\n.dialog-info-profile-avatar-contents {\n  height: auto;\n  position: absolute;\n  right: 17.86%;\n  left: 17.86%;\n  width: 64.29%;\n  bottom: 17.86%;\n  top: 17.86%;\n  height: 64.29%;\n  overflow: visible;\n}\n\n.dialog-information-profile-dialog-name {\n  margin-top: 8px;\n  color: var(--main-text, #0b1b0f);\n  text-align: center;\n  font: var(--title-title-medium);\n  left: 134.5px;\n  top: 112px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.dialog-information-profile-edit {\n  position: relative;\n  right: -10px;\n  border-radius: 4px;\n  padding: 8px 56px 0px 0px;\n  display: flex;\n  flex-direction: row;\n  gap: 0px;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 8px;\n}\n\n.dialog-information-profile-edit-button {\n  color: var(--main-elements, #3978fc);\n  text-align: left;\n  font: var(--button-default);\n  position: relative;\n}\n\n.dialog-info-action-wrapper-settings,\n.dialog-info-action-wrapper-settings * {\n  box-sizing: border-box;\n}\n\n.dialog-info-action-wrapper-settings {\n  background: var(--color-background, #ffffff);\n  padding: 16px;\n  display: flex;\n  flex-direction: row;\n  gap: 16px;\n  align-items: center;\n  justify-content: flex-start;\n  align-self: stretch;\n  flex-shrink: 0;\n  position: relative;\n  border-bottom: 1px solid var(--divider);\n}\n\n@media only screen and (max-width: var(--min-width-screen-desktop)) {\n  .dialog-info-action-wrapper-settings {\n    padding: 6px;\n  }\n}\n.no-padding {\n  padding: 0;\n}\n\n.dialog-info-action-wrapper-settings-icon {\n  border-radius: 4px;\n  padding: 4px;\n  display: flex;\n  flex-direction: row;\n  gap: 0px;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 24px;\n  height: 24px;\n  position: relative;\n}\n\n.dialog-info-action-wrapper-settings-subtitle {\n  color: var(--main-text, #0b1b0f);\n  text-align: left;\n  font: var(--body-body-large);\n  position: relative;\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\n\n.dialog-info-action-wrapper-settings-contents {\n  flex-shrink: 0;\n  width: 24px;\n  height: 24px;\n  position: relative;\n  overflow: visible;\n}\n\n.dialog-info-action-wrapper-settings-right {\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n  justify-content: flex-end;\n  flex-shrink: 0;\n  position: relative;\n}\n\n.dialog-info-action-wrapper-settings-right-badge {\n  background: var(--disabled-elements, #bcc1c5);\n  border-radius: 30px;\n  padding: 2px 6px 2px 6px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  position: relative;\n}\n\n.dialog-info-action-wrapper-settings-right-badge-title {\n  color: var(--color-background, #ffffff);\n  text-align: center;\n  font: var(--label-label-medium);\n  position: relative;\n  padding: 0px 5px 0px 5px;\n}\n\n.dialog-info-leave {\n  fill: var(--error);\n  border-bottom: 1px solid var(--divider);\n}\n\n.dialog-info-members {\n  fill: var(--main-elements);\n  border-bottom: 1px solid var(--divider);\n}\n\n.dialog-info-action-wrapper-button {\n  border: 1px solid var(--secondary-elements);\n  color: var(--secondary-elements);\n}\n.dialog-info-action-wrapper-button:active {\n  border: 1px solid var(--secondary-elements);\n  color: var(--secondary-elements);\n}\n.dialog-info-action-wrapper-button:focus {\n  border: 1px solid var(--secondary-elements);\n}", "",{"version":3,"sources":["webpack://./src/Presentation/Views/DialogInfo/DialogInfo.scss"],"names":[],"mappings":"AASA;;EAEE,sBAAA;AARF;;AAUA;EACE,4CAAA;EACA,4BAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,mBAAA;EACA,cAAA;EACA,kBAAA;EACA,uCAAA;EACA,YAvBuD;AAgBzD;;AASA;EACE,gCAAA;EACA,gBAAA;EACA,8BAAA;EACA,kBAAA;AANF;;AAQA;EACE,kBAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,QAAA;EACA,mBAAA;EACA,uBAAA;EACA,cAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;AALF;;AAQA;;EAEE,sBAAA;AALF;;AAOA;EACE,4CAAA;EACA,0BAAA;EACA,mBAAA;EACA,iBAAA;EACA,cAAA;EACA,aAAA;EACA,kBAAA;EACA,uCAAA;AAJF;;AAMA;EAEE,YAAA;EAEA,WAAA;EACA,SAAA;AALF;;AAOA;EACE,aAAA;EACA,uBAAA;AAJF;;AAMA;EACE,6CAAA;EACA,kBAAA;EACA,kBAAA;EACA,YAAA;EACA,WAAA;EACA,SAAA;AAHF;;AAKA;EACE,YAAA;EACA,kBAAA;EACA,aAAA;EACA,YAAA;EACA,aAAA;EACA,cAAA;EACA,WAAA;EACA,cAAA;EACA,iBAAA;AAFF;;AAIA;EACE,eAAA;EACA,gCAAA;EACA,kBAAA;EACA,+BAAA;EAEA,aAAA;EACA,UAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;AAFF;;AAIA;EACE,kBAAA;EACA,YAAA;EAEA,kBAAA;EACA,yBAAA;EACA,aAAA;EACA,mBAAA;EACA,QAAA;EACA,mBAAA;EACA,uBAAA;EACA,kBAAA;EAEA,QAAA;AAHF;;AAKA;EACE,oCAAA;EACA,gBAAA;EACA,2BAAA;EACA,kBAAA;AAFF;;AAKA;;EAEE,sBAAA;AAFF;;AAIA;EACE,4CAAA;EACA,aAAA;EACA,aAAA;EACA,mBAAA;EACA,SAAA;EACA,mBAAA;EACA,2BAAA;EACA,mBAAA;EACA,cAAA;EACA,kBAAA;EACA,uCAAA;AADF;;AAGA;EACE;IACE,YAAA;EAAF;AACF;AAEA;EACE,UAAA;AAAF;;AAEA;EACE,kBAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,QAAA;EACA,mBAAA;EACA,uBAAA;EACA,cAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;AACF;;AACA;EACE,gCAAA;EACA,gBAAA;EACA,4BAAA;EACA,kBAAA;EACA,OAAA;EACA,aAAA;EACA,mBAAA;EACA,2BAAA;AAEF;;AACA;EACE,cAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,iBAAA;AAEF;;AACA;EACE,aAAA;EACA,mBAAA;EACA,QAAA;EACA,mBAAA;EACA,yBAAA;EACA,cAAA;EACA,kBAAA;AAEF;;AAAA;EACE,6CAAA;EACA,mBAAA;EACA,wBAAA;EACA,aAAA;EACA,sBAAA;EACA,SAAA;EACA,mBAAA;EACA,uBAAA;EACA,cAAA;EACA,kBAAA;AAGF;;AADA;EACE,uCAAA;EACA,kBAAA;EACA,+BAAA;EACA,kBAAA;EACA,wBAAA;AAIF;;AADA;EACE,kBAAA;EAEA,uCAAA;AAGF;;AAAA;EACE,0BAAA;EAEA,uCAAA;AAEF;;AACA;EACE,2CAAA;EACA,gCAAA;AAEF;AAAE;EACE,2CAAA;EACA,gCAAA;AAEJ;AACE;EACE,2CAAA;AACJ","sourcesContent":["$dialog-information-container-height: 800px;\n$dialog-information-container-dialog-information-height: 64px;\n\n.dialog-information-container {\n  // min-height: $dialog-information-container-height;\n  // max-height: $dialog-information-container-height;\n  // height: $dialog-information-container-height;\n  // border: 1px solid var(--divider);\n}\n.header-dialog-info,\n.header-dialog-info * {\n  box-sizing: border-box;\n}\n.header-dialog-info {\n  background: var(--color-background, #ffffff);\n  padding: 16px 16px 16px 24px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  align-self: stretch;\n  flex-shrink: 0;\n  position: relative;\n  border-bottom: 1px solid var(--divider);\n  height: $dialog-information-container-dialog-information-height;\n}\n.header-dialog-info-headline {\n  color: var(--main-text, #0b1b0f);\n  text-align: left;\n  font: var(--title-title-large);\n  position: relative;\n}\n.header-dialog-info-icon {\n  border-radius: 4px;\n  padding: 4px;\n  display: flex;\n  flex-direction: row;\n  gap: 0px;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n  position: relative;\n}\n\n.dialog-information-profile,\n.dialog-information-profile * {\n  box-sizing: border-box;\n}\n.dialog-information-profile {\n  background: var(--color-background, #ffffff);\n  padding: 24px 0px 24px 0px;\n  align-self: stretch;\n  flex-flow: column;\n  flex-shrink: 0;\n  height: 160px;\n  position: relative;\n  border-bottom: 1px solid var(--divider);\n}\n.dialog-information-profile-avatar {\n  // width: 80px;\n  height: 80px;\n  // position: absolute;\n  left: 140px;\n  top: 24px;\n}\n.dialog-info-profile-avatar-default-icon {\n  display: flex;\n  justify-content: center;\n}\n.dialog-info-profile-avatar-ellipse {\n  background: var(--disabled-elements, #bcc1c5);\n  border-radius: 50%;\n  position: absolute;\n  height: 81px;\n  width: 81px;\n  top: 24px;\n}\n.dialog-info-profile-avatar-contents {\n  height: auto;\n  position: absolute;\n  right: 17.86%;\n  left: 17.86%;\n  width: 64.29%;\n  bottom: 17.86%;\n  top: 17.86%;\n  height: 64.29%;\n  overflow: visible;\n}\n.dialog-information-profile-dialog-name {\n  margin-top: 8px;\n  color: var(--main-text, #0b1b0f);\n  text-align: center;\n  font: var(--title-title-medium);\n  // position: absolute;\n  left: 134.5px;\n  top: 112px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.dialog-information-profile-edit {\n  position: relative;\n  right: -10px;\n  //top: 30px;\n  border-radius: 4px;\n  padding: 8px 56px 0px 0px;\n  display: flex;\n  flex-direction: row;\n  gap: 0px;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  //left: 294px;\n  top: 8px;\n}\n.dialog-information-profile-edit-button {\n  color: var(--main-elements, #3978fc);\n  text-align: left;\n  font: var(--button-default);\n  position: relative;\n}\n\n.dialog-info-action-wrapper-settings,\n.dialog-info-action-wrapper-settings * {\n  box-sizing: border-box;\n}\n.dialog-info-action-wrapper-settings {\n  background: var(--color-background, #ffffff);\n  padding: 16px;\n  display: flex;\n  flex-direction: row;\n  gap: 16px;\n  align-items: center;\n  justify-content: flex-start;\n  align-self: stretch;\n  flex-shrink: 0;\n  position: relative;\n  border-bottom: 1px solid var(--divider);\n}\n@media only screen and (max-width: var(--min-width-screen-desktop)) {\n  .dialog-info-action-wrapper-settings {\n    padding: 6px;\n  }\n}\n.no-padding {\n  padding: 0;\n}\n.dialog-info-action-wrapper-settings-icon {\n  border-radius: 4px;\n  padding: 4px;\n  display: flex;\n  flex-direction: row;\n  gap: 0px;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 24px;\n  height: 24px;\n  position: relative;\n}\n.dialog-info-action-wrapper-settings-subtitle {\n  color: var(--main-text, #0b1b0f);\n  text-align: left;\n  font: var(--body-body-large);\n  position: relative;\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\n\n.dialog-info-action-wrapper-settings-contents {\n  flex-shrink: 0;\n  width: 24px;\n  height: 24px;\n  position: relative;\n  overflow: visible;\n}\n\n.dialog-info-action-wrapper-settings-right {\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n  justify-content: flex-end;\n  flex-shrink: 0;\n  position: relative;\n}\n.dialog-info-action-wrapper-settings-right-badge {\n  background: var(--disabled-elements, #bcc1c5);\n  border-radius: 30px;\n  padding: 2px 6px 2px 6px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  position: relative;\n}\n.dialog-info-action-wrapper-settings-right-badge-title {\n  color: var(--color-background, #ffffff);\n  text-align: center;\n  font: var(--label-label-medium);\n  position: relative;\n  padding: 0px 5px 0px 5px;\n}\n\n.dialog-info-leave {\n  fill: var(--error);\n\n  border-bottom: 1px solid var(--divider);\n}\n\n.dialog-info-members {\n  fill: var(--main-elements);\n\n  border-bottom: 1px solid var(--divider);\n}\n\n.dialog-info-action-wrapper-button {\n  border: 1px solid var(--secondary-elements);\n  color: var(--secondary-elements);\n\n  &:active {\n    border: 1px solid var(--secondary-elements);\n    color: var(--secondary-elements);\n  }\n\n  &:focus {\n    border: 1px solid var(--secondary-elements);\n  }\n}\n"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, ".header-dialog-info,\n.header-dialog-info * {\n  box-sizing: border-box;\n}\n\n.header-dialog-info {\n  background: var(--color-background, #ffffff);\n  padding: 16px 16px 16px 24px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  align-self: stretch;\n  flex-shrink: 0;\n  position: relative;\n  border-bottom: 1px solid var(--divider);\n  height: 64px;\n}\n\n.header-dialog-info-headline {\n  color: var(--main-text, #0b1b0f);\n  text-align: left;\n  font: var(--title-title-large);\n  position: relative;\n}\n\n.header-dialog-info-icon {\n  width: 24px;\n  height: 24px;\n  fill: var(--secondary-elements);\n}\n\n.dialog-information-profile,\n.dialog-information-profile * {\n  box-sizing: border-box;\n}\n\n.dialog-information-profile {\n  background: var(--color-background, #ffffff);\n  padding: 24px 0px 24px 0px;\n  align-self: stretch;\n  flex-flow: column;\n  flex-shrink: 0;\n  height: 160px;\n  position: relative;\n  border-bottom: 1px solid var(--divider);\n}\n\n.dialog-information-profile-avatar {\n  height: 80px;\n  left: 140px;\n  top: 24px;\n}\n\n.dialog-info-profile-avatar-default-icon {\n  display: flex;\n  justify-content: center;\n}\n\n.dialog-info-profile-avatar-ellipse {\n  background: var(--disabled-elements, #bcc1c5);\n  border-radius: 50%;\n  position: absolute;\n  height: 81px;\n  width: 81px;\n  top: 24px;\n}\n\n.dialog-info-profile-avatar-contents {\n  height: auto;\n  position: absolute;\n  right: 17.86%;\n  left: 17.86%;\n  width: 64.29%;\n  bottom: 17.86%;\n  top: 17.86%;\n  height: 64.29%;\n  overflow: visible;\n}\n\n.dialog-information-profile-dialog-name {\n  margin-top: 8px;\n  color: var(--main-text, #0b1b0f);\n  text-align: center;\n  font: var(--title-title-medium);\n  left: 134.5px;\n  top: 112px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.dialog-information-profile-edit {\n  position: relative;\n  right: -10px;\n  border-radius: 4px;\n  padding: 8px 56px 0px 0px;\n  display: flex;\n  flex-direction: row;\n  gap: 0px;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 8px;\n}\n\n.dialog-information-profile-edit-button {\n  color: var(--main-elements, #3978fc);\n  text-align: left;\n  font: var(--button-default);\n  position: relative;\n}\n\n.dialog-info-action-wrapper-settings,\n.dialog-info-action-wrapper-settings * {\n  box-sizing: border-box;\n}\n\n.dialog-info-action-wrapper-settings {\n  background: var(--color-background, #ffffff);\n  padding: 16px;\n  display: flex;\n  flex-direction: row;\n  gap: 16px;\n  align-items: center;\n  justify-content: flex-start;\n  align-self: stretch;\n  flex-shrink: 0;\n  position: relative;\n  border-bottom: 1px solid var(--divider);\n}\n\n@media only screen and (max-width: var(--min-width-screen-desktop)) {\n  .dialog-info-action-wrapper-settings {\n    padding: 6px;\n  }\n}\n.no-padding {\n  padding: 0;\n}\n\n.dialog-info-action-wrapper-settings-icon {\n  border-radius: 4px;\n  padding: 4px;\n  display: flex;\n  flex-direction: row;\n  gap: 0px;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 24px;\n  height: 24px;\n  position: relative;\n}\n\n.dialog-info-action-wrapper-settings-subtitle {\n  color: var(--main-text, #0b1b0f);\n  text-align: left;\n  font: var(--body-body-large);\n  position: relative;\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\n\n.dialog-info-action-wrapper-settings-contents {\n  flex-shrink: 0;\n  width: 24px;\n  height: 24px;\n  position: relative;\n  overflow: visible;\n}\n\n.dialog-info-action-wrapper-settings-right {\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n  justify-content: flex-end;\n  flex-shrink: 0;\n  position: relative;\n}\n\n.dialog-info-action-wrapper-settings-right-badge {\n  background: var(--disabled-elements, #bcc1c5);\n  border-radius: 30px;\n  padding: 2px 6px 2px 6px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  position: relative;\n}\n\n.dialog-info-action-wrapper-settings-right-badge-title {\n  color: var(--color-background, #ffffff);\n  text-align: center;\n  font: var(--label-label-medium);\n  position: relative;\n  padding: 0px 5px 0px 5px;\n}\n\n.dialog-info-leave {\n  fill: var(--error);\n  border-bottom: 1px solid var(--divider);\n}\n\n.dialog-info-members {\n  fill: var(--main-elements);\n  border-bottom: 1px solid var(--divider);\n}\n\n.dialog-info-action-wrapper-button {\n  border: 1px solid var(--secondary-elements);\n  color: var(--secondary-elements);\n}\n.dialog-info-action-wrapper-button:active {\n  border: 1px solid var(--secondary-elements);\n  color: var(--secondary-elements);\n}\n.dialog-info-action-wrapper-button:focus {\n  border: 1px solid var(--secondary-elements);\n}", "",{"version":3,"sources":["webpack://./src/Presentation/Views/DialogInfo/DialogInfo.scss"],"names":[],"mappings":"AASA;;EAEE,sBAAA;AARF;;AAUA;EACE,4CAAA;EACA,4BAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,mBAAA;EACA,cAAA;EACA,kBAAA;EACA,uCAAA;EACA,YAvBuD;AAgBzD;;AASA;EACE,gCAAA;EACA,gBAAA;EACA,8BAAA;EACA,kBAAA;AANF;;AAQA;EACE,WAAA;EACA,YAAA;EACA,+BAAA;AALF;;AAQA;;EAEE,sBAAA;AALF;;AAOA;EACE,4CAAA;EACA,0BAAA;EACA,mBAAA;EACA,iBAAA;EACA,cAAA;EACA,aAAA;EACA,kBAAA;EACA,uCAAA;AAJF;;AAMA;EAEE,YAAA;EAEA,WAAA;EACA,SAAA;AALF;;AAOA;EACE,aAAA;EACA,uBAAA;AAJF;;AAMA;EACE,6CAAA;EACA,kBAAA;EACA,kBAAA;EACA,YAAA;EACA,WAAA;EACA,SAAA;AAHF;;AAKA;EACE,YAAA;EACA,kBAAA;EACA,aAAA;EACA,YAAA;EACA,aAAA;EACA,cAAA;EACA,WAAA;EACA,cAAA;EACA,iBAAA;AAFF;;AAIA;EACE,eAAA;EACA,gCAAA;EACA,kBAAA;EACA,+BAAA;EAEA,aAAA;EACA,UAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;AAFF;;AAIA;EACE,kBAAA;EACA,YAAA;EAEA,kBAAA;EACA,yBAAA;EACA,aAAA;EACA,mBAAA;EACA,QAAA;EACA,mBAAA;EACA,uBAAA;EACA,kBAAA;EAEA,QAAA;AAHF;;AAKA;EACE,oCAAA;EACA,gBAAA;EACA,2BAAA;EACA,kBAAA;AAFF;;AAKA;;EAEE,sBAAA;AAFF;;AAIA;EACE,4CAAA;EACA,aAAA;EACA,aAAA;EACA,mBAAA;EACA,SAAA;EACA,mBAAA;EACA,2BAAA;EACA,mBAAA;EACA,cAAA;EACA,kBAAA;EACA,uCAAA;AADF;;AAGA;EACE;IACE,YAAA;EAAF;AACF;AAEA;EACE,UAAA;AAAF;;AAEA;EACE,kBAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,QAAA;EACA,mBAAA;EACA,uBAAA;EACA,cAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;AACF;;AACA;EACE,gCAAA;EACA,gBAAA;EACA,4BAAA;EACA,kBAAA;EACA,OAAA;EACA,aAAA;EACA,mBAAA;EACA,2BAAA;AAEF;;AACA;EACE,cAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,iBAAA;AAEF;;AACA;EACE,aAAA;EACA,mBAAA;EACA,QAAA;EACA,mBAAA;EACA,yBAAA;EACA,cAAA;EACA,kBAAA;AAEF;;AAAA;EACE,6CAAA;EACA,mBAAA;EACA,wBAAA;EACA,aAAA;EACA,sBAAA;EACA,SAAA;EACA,mBAAA;EACA,uBAAA;EACA,cAAA;EACA,kBAAA;AAGF;;AADA;EACE,uCAAA;EACA,kBAAA;EACA,+BAAA;EACA,kBAAA;EACA,wBAAA;AAIF;;AADA;EACE,kBAAA;EAEA,uCAAA;AAGF;;AAAA;EACE,0BAAA;EAEA,uCAAA;AAEF;;AACA;EACE,2CAAA;EACA,gCAAA;AAEF;AAAE;EACE,2CAAA;EACA,gCAAA;AAEJ;AACE;EACE,2CAAA;AACJ","sourcesContent":["$dialog-information-container-height: 800px;\n$dialog-information-container-dialog-information-height: 64px;\n\n.dialog-information-container {\n  // min-height: $dialog-information-container-height;\n  // max-height: $dialog-information-container-height;\n  // height: $dialog-information-container-height;\n  // border: 1px solid var(--divider);\n}\n.header-dialog-info,\n.header-dialog-info * {\n  box-sizing: border-box;\n}\n.header-dialog-info {\n  background: var(--color-background, #ffffff);\n  padding: 16px 16px 16px 24px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  align-self: stretch;\n  flex-shrink: 0;\n  position: relative;\n  border-bottom: 1px solid var(--divider);\n  height: $dialog-information-container-dialog-information-height;\n}\n.header-dialog-info-headline {\n  color: var(--main-text, #0b1b0f);\n  text-align: left;\n  font: var(--title-title-large);\n  position: relative;\n}\n.header-dialog-info-icon {\n  width: 24px;\n  height: 24px;\n  fill: var(--secondary-elements);\n}\n\n.dialog-information-profile,\n.dialog-information-profile * {\n  box-sizing: border-box;\n}\n.dialog-information-profile {\n  background: var(--color-background, #ffffff);\n  padding: 24px 0px 24px 0px;\n  align-self: stretch;\n  flex-flow: column;\n  flex-shrink: 0;\n  height: 160px;\n  position: relative;\n  border-bottom: 1px solid var(--divider);\n}\n.dialog-information-profile-avatar {\n  // width: 80px;\n  height: 80px;\n  // position: absolute;\n  left: 140px;\n  top: 24px;\n}\n.dialog-info-profile-avatar-default-icon {\n  display: flex;\n  justify-content: center;\n}\n.dialog-info-profile-avatar-ellipse {\n  background: var(--disabled-elements, #bcc1c5);\n  border-radius: 50%;\n  position: absolute;\n  height: 81px;\n  width: 81px;\n  top: 24px;\n}\n.dialog-info-profile-avatar-contents {\n  height: auto;\n  position: absolute;\n  right: 17.86%;\n  left: 17.86%;\n  width: 64.29%;\n  bottom: 17.86%;\n  top: 17.86%;\n  height: 64.29%;\n  overflow: visible;\n}\n.dialog-information-profile-dialog-name {\n  margin-top: 8px;\n  color: var(--main-text, #0b1b0f);\n  text-align: center;\n  font: var(--title-title-medium);\n  // position: absolute;\n  left: 134.5px;\n  top: 112px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.dialog-information-profile-edit {\n  position: relative;\n  right: -10px;\n  //top: 30px;\n  border-radius: 4px;\n  padding: 8px 56px 0px 0px;\n  display: flex;\n  flex-direction: row;\n  gap: 0px;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  //left: 294px;\n  top: 8px;\n}\n.dialog-information-profile-edit-button {\n  color: var(--main-elements, #3978fc);\n  text-align: left;\n  font: var(--button-default);\n  position: relative;\n}\n\n.dialog-info-action-wrapper-settings,\n.dialog-info-action-wrapper-settings * {\n  box-sizing: border-box;\n}\n.dialog-info-action-wrapper-settings {\n  background: var(--color-background, #ffffff);\n  padding: 16px;\n  display: flex;\n  flex-direction: row;\n  gap: 16px;\n  align-items: center;\n  justify-content: flex-start;\n  align-self: stretch;\n  flex-shrink: 0;\n  position: relative;\n  border-bottom: 1px solid var(--divider);\n}\n@media only screen and (max-width: var(--min-width-screen-desktop)) {\n  .dialog-info-action-wrapper-settings {\n    padding: 6px;\n  }\n}\n.no-padding {\n  padding: 0;\n}\n.dialog-info-action-wrapper-settings-icon {\n  border-radius: 4px;\n  padding: 4px;\n  display: flex;\n  flex-direction: row;\n  gap: 0px;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 24px;\n  height: 24px;\n  position: relative;\n}\n.dialog-info-action-wrapper-settings-subtitle {\n  color: var(--main-text, #0b1b0f);\n  text-align: left;\n  font: var(--body-body-large);\n  position: relative;\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\n\n.dialog-info-action-wrapper-settings-contents {\n  flex-shrink: 0;\n  width: 24px;\n  height: 24px;\n  position: relative;\n  overflow: visible;\n}\n\n.dialog-info-action-wrapper-settings-right {\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n  justify-content: flex-end;\n  flex-shrink: 0;\n  position: relative;\n}\n.dialog-info-action-wrapper-settings-right-badge {\n  background: var(--disabled-elements, #bcc1c5);\n  border-radius: 30px;\n  padding: 2px 6px 2px 6px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  position: relative;\n}\n.dialog-info-action-wrapper-settings-right-badge-title {\n  color: var(--color-background, #ffffff);\n  text-align: center;\n  font: var(--label-label-medium);\n  position: relative;\n  padding: 0px 5px 0px 5px;\n}\n\n.dialog-info-leave {\n  fill: var(--error);\n\n  border-bottom: 1px solid var(--divider);\n}\n\n.dialog-info-members {\n  fill: var(--main-elements);\n\n  border-bottom: 1px solid var(--divider);\n}\n\n.dialog-info-action-wrapper-button {\n  border: 1px solid var(--secondary-elements);\n  color: var(--secondary-elements);\n\n  &:active {\n    border: 1px solid var(--secondary-elements);\n    color: var(--secondary-elements);\n  }\n\n  &:focus {\n    border: 1px solid var(--secondary-elements);\n  }\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -3371,7 +3344,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".members-container-header,\n.members-container-header * {\n  box-sizing: border-box;\n}\n\n.members-container-header {\n  background: var(--color-background, #ffffff);\n  padding: 16px 16px 16px 24px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  align-self: stretch;\n  flex-shrink: 0;\n  position: relative;\n  border-style: solid;\n  border-color: var(--color-divider, #e7efff);\n  border-width: 0 0 1px 0;\n  height: 64px;\n}\n\n.members-container-header-left {\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n  justify-content: flex-start;\n  flex-shrink: 0;\n  position: relative;\n}\n\n.members-container-header-left-headline {\n  color: var(--main-text, #0b1b0f);\n  text-align: left;\n  font: var(--title-title-large);\n  position: relative;\n}\n\n.members-container-header-left-headline-badge {\n  background: var(--disabled-elements, #bcc1c5);\n  border-radius: 30px;\n  padding: 2px 6px 2px 6px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  position: relative;\n}\n\n.members-container-header-left-headline-badge-value {\n  color: var(--color-background, #ffffff);\n  text-align: center;\n  font: var(--label-label-medium);\n  position: relative;\n}\n\n.members-container-header-icon {\n  border-radius: 4px;\n  padding: 4px;\n  display: flex;\n  flex-direction: row;\n  gap: 0px;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n  position: relative;\n  cursor: pointer;\n}\n\n.members-container-search,\n.members-container-search * {\n  box-sizing: border-box;\n}\n\n.members-container-search {\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  align-items: center;\n  justify-content: flex-start;\n  align-self: stretch;\n  flex-shrink: 0;\n  position: relative;\n}\n\n.members-container-search-text-field {\n  background: var(--color-background, #ffffff);\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  align-items: flex-start;\n  justify-content: flex-start;\n  align-self: stretch;\n  flex-shrink: 0;\n  position: relative;\n}\n\n.members-container-search-text-field-f {\n  border-radius: 4px;\n  border-style: solid;\n  border-color: var(--tertiary-elements, #636d78);\n  border-width: 1px;\n  padding: 6px 8px 6px 8px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  align-self: stretch;\n  flex-shrink: 0;\n  position: relative;\n}\n\n.members-container-search-text-field-f-left {\n  display: flex;\n  flex-direction: row;\n  gap: 6px;\n  align-items: center;\n  justify-content: flex-start;\n  flex-shrink: 0;\n  position: relative;\n}\n\n.members-container-search-text-field-f-left-icon {\n  border-radius: 4px;\n  padding: 4px;\n  display: flex;\n  flex-direction: row;\n  gap: 0px;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n  position: relative;\n}\n\n.members-container-search-text-field-f-left-input {\n  color: var(--secondary-text, #636d78);\n  text-align: left;\n  font: var(--body-body-large);\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\n.members-container-search-text-field-f-left-input input {\n  color: var(--secondary-text);\n  background-color: var(--main-background);\n  font-family: \"Roboto\";\n  font-style: normal;\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 24px;\n  display: flex;\n  align-items: center;\n  letter-spacing: 0.15px;\n  border: none;\n  outline: none;\n}\n\n.members-container-search-text-field-f-right {\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  align-items: center;\n  justify-content: flex-end;\n  flex-shrink: 0;\n  position: relative;\n}\n\n.members-container-members-list-wrapper {\n  display: flex;\n}", "",{"version":3,"sources":["webpack://./src/Presentation/Views/DialogInfo/MembersList/MembersList.scss"],"names":[],"mappings":"AAGA;;EAEE,sBAAA;AAFF;;AAIA;EACE,4CAAA;EACA,4BAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,mBAAA;EACA,cAAA;EACA,kBAAA;EAEA,mBAAA;EACA,2CAAA;EACA,uBAAA;EAEA,YAtBgC;AAmBlC;;AAKA;EACE,aAAA;EACA,mBAAA;EACA,QAAA;EACA,mBAAA;EACA,2BAAA;EACA,cAAA;EACA,kBAAA;AAFF;;AAIA;EACE,gCAAA;EACA,gBAAA;EACA,8BAAA;EACA,kBAAA;AADF;;AAGA;EACE,6CAAA;EACA,mBAAA;EACA,wBAAA;EACA,aAAA;EACA,sBAAA;EACA,SAAA;EACA,mBAAA;EACA,uBAAA;EACA,cAAA;EACA,kBAAA;AAAF;;AAEA;EACE,uCAAA;EACA,kBAAA;EACA,+BAAA;EACA,kBAAA;AACF;;AACA;EACE,kBAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,QAAA;EACA,mBAAA;EACA,uBAAA;EACA,cAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,eAAA;AAEF;;AAEA;;EAEE,sBAAA;AACF;;AACA;EACE,aAAA;EACA,aAAA;EACA,sBAAA;EACA,SAAA;EACA,mBAAA;EACA,2BAAA;EACA,mBAAA;EACA,cAAA;EACA,kBAAA;AAEF;;AAAA;EACE,4CAAA;EACA,aAAA;EACA,sBAAA;EACA,QAAA;EACA,uBAAA;EACA,2BAAA;EACA,mBAAA;EACA,cAAA;EACA,kBAAA;AAGF;;AADA;EACE,kBAAA;EACA,mBAAA;EACA,+CAAA;EACA,iBAAA;EACA,wBAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,mBAAA;EACA,cAAA;EACA,kBAAA;AAIF;;AAFA;EACE,aAAA;EACA,mBAAA;EACA,QAAA;EACA,mBAAA;EACA,2BAAA;EACA,cAAA;EACA,kBAAA;AAKF;;AAHA;EACE,kBAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,QAAA;EACA,mBAAA;EACA,uBAAA;EACA,cAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;AAMF;;AAJA;EACE,qCAAA;EACA,gBAAA;EACA,4BAAA;EACA,kBAAA;EACA,aAAA;EACA,mBAAA;EACA,2BAAA;AAOF;AALE;EACE,4BAAA;EACA,wCAAA;EAEA,qBAAA;EACA,kBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EAEA,aAAA;EACA,mBAAA;EACA,sBAAA;EAEA,YAAA;EACA,aAAA;AAIJ;;AADA;EACE,aAAA;EACA,mBAAA;EACA,SAAA;EACA,mBAAA;EACA,yBAAA;EACA,cAAA;EACA,kBAAA;AAIF;;AADA;EACE,aAAA;AAIF","sourcesContent":["$members-container-header-height: 64px;\n.members-container{\n}\n.members-container-header,\n.members-container-header * {\n  box-sizing: border-box;\n}\n.members-container-header {\n  background: var(--color-background, #ffffff);\n  padding: 16px 16px 16px 24px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  align-self: stretch;\n  flex-shrink: 0;\n  position: relative;\n\n  border-style: solid;\n  border-color: var(--color-divider, #e7efff);\n  border-width: 0 0 1px 0;\n\n  height: $members-container-header-height;\n}\n.members-container-header-left {\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n  justify-content: flex-start;\n  flex-shrink: 0;\n  position: relative;\n}\n.members-container-header-left-headline {\n  color: var(--main-text, #0b1b0f);\n  text-align: left;\n  font: var(--title-title-large);\n  position: relative;\n}\n.members-container-header-left-headline-badge {\n  background: var(--disabled-elements, #bcc1c5);\n  border-radius: 30px;\n  padding: 2px 6px 2px 6px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  position: relative;\n}\n.members-container-header-left-headline-badge-value {\n  color: var(--color-background, #ffffff);\n  text-align: center;\n  font: var(--label-label-medium);\n  position: relative;\n}\n.members-container-header-icon {\n  border-radius: 4px;\n  padding: 4px;\n  display: flex;\n  flex-direction: row;\n  gap: 0px;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n  position: relative;\n  cursor: pointer;\n}\n\n\n.members-container-search,\n.members-container-search * {\n  box-sizing: border-box;\n}\n.members-container-search {\n  padding: 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  align-items: center;\n  justify-content: flex-start;\n  align-self: stretch;\n  flex-shrink: 0;\n  position: relative;\n}\n.members-container-search-text-field {\n  background: var(--color-background, #ffffff);\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  align-items: flex-start;\n  justify-content: flex-start;\n  align-self: stretch;\n  flex-shrink: 0;\n  position: relative;\n}\n.members-container-search-text-field-f {\n  border-radius: 4px;\n  border-style: solid;\n  border-color: var(--tertiary-elements, #636d78);\n  border-width: 1px;\n  padding: 6px 8px 6px 8px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  align-self: stretch;\n  flex-shrink: 0;\n  position: relative;\n}\n.members-container-search-text-field-f-left {\n  display: flex;\n  flex-direction: row;\n  gap: 6px;\n  align-items: center;\n  justify-content: flex-start;\n  flex-shrink: 0;\n  position: relative;\n}\n.members-container-search-text-field-f-left-icon {\n  border-radius: 4px;\n  padding: 4px;\n  display: flex;\n  flex-direction: row;\n  gap: 0px;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n  position: relative;\n}\n.members-container-search-text-field-f-left-input {\n  color: var(--secondary-text, #636d78);\n  text-align: left;\n  font: var(--body-body-large);\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n\n  input {\n    color: var(--secondary-text);\n    background-color: var(--main-background);\n\n    font-family: 'Roboto';\n    font-style: normal;\n    font-weight: 400;\n    font-size: 16px;\n    line-height: 24px;\n\n    display: flex;\n    align-items: center;\n    letter-spacing: 0.15px;\n\n    border: none;\n    outline: none;\n  }\n}\n.members-container-search-text-field-f-right {\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  align-items: center;\n  justify-content: flex-end;\n  flex-shrink: 0;\n  position: relative;\n}\n\n.members-container-members-list-wrapper{\n  display: flex;\n}\n\n"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, ".members-container-header,\n.members-container-header * {\n  box-sizing: border-box;\n}\n\n.members-container-header {\n  background: var(--color-background, #ffffff);\n  padding: 16px 16px 16px 24px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  align-self: stretch;\n  flex-shrink: 0;\n  position: relative;\n  border-style: solid;\n  border-color: var(--color-divider, #e7efff);\n  border-width: 0 0 1px 0;\n  height: 64px;\n}\n\n.members-container-header-left {\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n  justify-content: flex-start;\n  flex-shrink: 0;\n  position: relative;\n}\n\n.members-container-header-left-headline {\n  color: var(--main-text, #0b1b0f);\n  text-align: left;\n  font: var(--title-title-large);\n  position: relative;\n}\n\n.members-container-header-left-headline-badge {\n  background: var(--disabled-elements, #bcc1c5);\n  border-radius: 30px;\n  padding: 2px 6px 2px 6px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  position: relative;\n}\n\n.members-container-header-left-headline-badge-value {\n  color: var(--color-background, #ffffff);\n  text-align: center;\n  font: var(--label-label-medium);\n  position: relative;\n}\n\n.members-container-header-icon {\n  border-radius: 4px;\n  padding: 4px;\n  display: flex;\n  flex-direction: row;\n  gap: 0px;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n  position: relative;\n  cursor: pointer;\n}\n\n.members-container-members-list-wrapper {\n  display: flex;\n}\n\n.members-container-text-field {\n  padding: 16px;\n}\n\n.members-container-text-field-icon {\n  width: 24px;\n  height: 24px;\n  fill: var(--tertiary-elements);\n}", "",{"version":3,"sources":["webpack://./src/Presentation/Views/DialogInfo/MembersList/MembersList.scss"],"names":[],"mappings":"AAGA;;EAEE,sBAAA;AAFF;;AAIA;EACE,4CAAA;EACA,4BAAA;EACA,aAAA;EACA,mBAAA;EACA,mBAAA;EACA,8BAAA;EACA,mBAAA;EACA,cAAA;EACA,kBAAA;EAEA,mBAAA;EACA,2CAAA;EACA,uBAAA;EAEA,YAtBgC;AAmBlC;;AAKA;EACE,aAAA;EACA,mBAAA;EACA,QAAA;EACA,mBAAA;EACA,2BAAA;EACA,cAAA;EACA,kBAAA;AAFF;;AAIA;EACE,gCAAA;EACA,gBAAA;EACA,8BAAA;EACA,kBAAA;AADF;;AAGA;EACE,6CAAA;EACA,mBAAA;EACA,wBAAA;EACA,aAAA;EACA,sBAAA;EACA,SAAA;EACA,mBAAA;EACA,uBAAA;EACA,cAAA;EACA,kBAAA;AAAF;;AAEA;EACE,uCAAA;EACA,kBAAA;EACA,+BAAA;EACA,kBAAA;AACF;;AACA;EACE,kBAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,QAAA;EACA,mBAAA;EACA,uBAAA;EACA,cAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,eAAA;AAEF;;AACA;EACE,aAAA;AAEF;;AACA;EACE,aAAA;AAEF;;AACA;EACE,WAAA;EACA,YAAA;EACA,8BAAA;AAEF","sourcesContent":["$members-container-header-height: 64px;\n.members-container {\n}\n.members-container-header,\n.members-container-header * {\n  box-sizing: border-box;\n}\n.members-container-header {\n  background: var(--color-background, #ffffff);\n  padding: 16px 16px 16px 24px;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  align-self: stretch;\n  flex-shrink: 0;\n  position: relative;\n\n  border-style: solid;\n  border-color: var(--color-divider, #e7efff);\n  border-width: 0 0 1px 0;\n\n  height: $members-container-header-height;\n}\n.members-container-header-left {\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  align-items: center;\n  justify-content: flex-start;\n  flex-shrink: 0;\n  position: relative;\n}\n.members-container-header-left-headline {\n  color: var(--main-text, #0b1b0f);\n  text-align: left;\n  font: var(--title-title-large);\n  position: relative;\n}\n.members-container-header-left-headline-badge {\n  background: var(--disabled-elements, #bcc1c5);\n  border-radius: 30px;\n  padding: 2px 6px 2px 6px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  position: relative;\n}\n.members-container-header-left-headline-badge-value {\n  color: var(--color-background, #ffffff);\n  text-align: center;\n  font: var(--label-label-medium);\n  position: relative;\n}\n.members-container-header-icon {\n  border-radius: 4px;\n  padding: 4px;\n  display: flex;\n  flex-direction: row;\n  gap: 0px;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n  position: relative;\n  cursor: pointer;\n}\n\n.members-container-members-list-wrapper {\n  display: flex;\n}\n\n.members-container-text-field {\n  padding: 16px;\n}\n\n.members-container-text-field-icon {\n  width: 24px;\n  height: 24px;\n  fill: var(--tertiary-elements);\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -3454,7 +3427,7 @@ var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBP
 ___CSS_LOADER_EXPORT___.push([module.id, "@import url(https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400;0,500;0,700;1,700&display=swap);"]);
 ___CSS_LOADER_EXPORT___.push([module.id, "@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap);"]);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, "@charset \"UTF-8\";\n/*\n@font-face {\n  font-family: \"Roboto-Regular\";\n  src: url(\"../fonts/Roboto-Regular.eot\");\n  src: local(\"☺\"), url(\"../fonts/Roboto-Regular.woff\") format(\"woff\"),\n  url(\"../fonts/Roboto-Regular.ttf\") format(\"truetype\");\n  font-weight: normal;\n  font-style: normal;\n}\n\n@font-face {\n  font-family: \"Roboto-Medium\";\n  src: url(\"../fonts/Roboto-Medium.eot\");\n  src: local(\"☺\"), url(\"../fonts/Roboto-Medium.woff\") format(\"woff\"),\n  url(\"../fonts/Roboto-Medium.ttf\") format(\"truetype\");\n  font-weight: normal;\n  font-style: normal;\n}\n\n@font-face {\n  font-family: \"Roboto-Bold\";\n  src: url(\"../fonts/Roboto-Bold.eot\");\n  src: local(\"☺\"), url(\"../fonts/Roboto-Bold.woff\") format(\"woff\"),\n  url(\"../fonts/Roboto-Bold.ttf\") format(\"truetype\");\n  font-weight: normal;\n  font-style: normal;\n}\n*/\n:root {\n  --primary: #3978FC;\n  --color-background: #FFFFFF;\n  --color-background-modal: #C4D7FE;\n  --color-background-overlay: #0B121B;\n  --color-divider: #E7EFFF;\n  --color-font: #0B121B;\n  --color-icon: #3978FC;\n  --color-media-icon: #FFFFFF;\n  --color-default-hover: #2C65FB;\n  --color-default-active: #1748FA;\n  --color-background-info: #C4D7FE;\n  --color-border-active: #9CBCFE;\n  --tertiary-elements: #636D78;\n  --main-elements: #3978FC;\n  --toast-color: #131D28;\n  --secondary-elements: #202F3E;\n  --input-elements: #202F3E;\n  --disabled-elements: #BCC1C5;\n  --field-border: #90979F;\n  --main-text: #0B121B;\n  --secondary-text: #636D78;\n  --caption: #90979F;\n  --main-background: #FFFFFF;\n  --secondary-background: #FFFFFF;\n  --secondary-background-modal: rgba(19, 29, 40, 0.8);\n  --incoming-background: #E4E6E8;\n  --outgoing-background: #E7EFFF;\n  --dropdown-background: #FFFFFF;\n  --chat-input: #F7F9FF;\n  --divider: #E7EFFF;\n  --error: #FF3B30;\n  --error-secondary: #FF9D98;\n  --hightlight: #FFFDC1;\n}\n\nhtml[data-theme=dark] {\n  --primary: #3978FC;\n  --color-background: #0B121B;\n  --color-background-modal: #131D28;\n  --color-background-overlay: #0B121B;\n  --color-divider: #414E5B;\n  --color-font: #FFFFFF;\n  --color-icon: #74A1FD;\n  --color-media-icon: #FFFFFF;\n  --color-default-hover: #182330;\n  --color-default-active: #0B121B;\n  --color-background-info: #3978FC;\n  --color-border-active: #90979F;\n  --tertiary-elements: rgba(144, 151, 159, 0.8);\n  --main-elements: #74A1FD;\n  --secondary-elements: #FFFFFF;\n  --input-elements: #90979F;\n  --disabled-elements: #636D78;\n  --field-border: #90979F;\n  --main-text: #FFFFFF;\n  --secondary-text: #90979F;\n  --caption: #BCC1C5;\n  --main-background: #202F3E;\n  --secondary-background: #131D28;\n  --incoming-background: #414E5B;\n  --outgoing-background: #3978FC;\n  --dropdown-background: #414E5B;\n  --chat-input: #131D28;\n  --divider: #414E5B;\n  --error: #FF766E;\n  --error-secondary: #FFC4C1;\n  --hightlight: #FFFDC1;\n}\n\n/* Fonts */\n:root {\n  --title-title-large: 500 20px/24px \"Roboto\", sans-serif;\n  --title-title-medium: 500 16px/24px \"Roboto\", sans-serif;\n  --title-title-small: 500 14px/20px \"Roboto\", sans-serif;\n  --label-label-large: 500 14px/20px \"Roboto\", sans-serif;\n  --label-label-medium: 500 12px/16px \"Roboto\", sans-serif;\n  --label-label-small: 500 11px/16px \"Roboto\", sans-serif;\n  --body-body-large: 400 16px/24px \"Roboto\", sans-serif;\n  --body-body-medium: 400 14px/20px \"Roboto\", sans-serif;\n  --body-body-small: 400 12px/16px \"Roboto\", sans-serif;\n  --button-fab: 500 14px/16px \"Roboto\", sans-serif;\n  --button-default: 700 14px/16px \"Roboto\", sans-serif;\n  --ui-kit-header: 500 48px \"Roboto Mono\", sans-serif;\n  --ui-kit-title: 500 32px \"Roboto Mono\", sans-serif;\n  --ui-kit-body: 400 17px \"Roboto Mono\", sans-serif;\n  /* Width */\n  --max-width-message-bubble: 480px;\n  --max-width-message-view-container: 680px;\n  --max-width-image-message: 240px;\n  --max-width-audio-message: 300px;\n  --max-width-dialog-list: 320px;\n  --min-width-screen-desktop: 980px;\n}\n\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: \"Roboto\";\n  color: var(--main-text);\n  background-color: var(--main-background);\n  overflow: hidden !important;\n  scrollbar-width: none !important;\n}\n\n/* Media-query for mobile devices */\n@media only screen and (max-width: 980px) {\n  :root {\n    --max-width-message-view-container: 345px;\n    --max-width-message-bubble: 170px;\n    --max-width-image-message: 150px;\n    --max-width-audio-message: 150px;\n    --max-width-dialog-list: 100%;\n  }\n}\n.header-dialogs-container {\n  display: flex;\n  height: 64px;\n  gap: 0 30px;\n  padding: 16px 16px 16px 20px;\n  justify-content: space-between;\n}\n.header-dialogs-container--title_wrapper {\n  font-family: \"Roboto\";\n  font-style: normal;\n  font-weight: 500;\n  font-size: 20px;\n  line-height: 24px;\n  letter-spacing: 0.0015em;\n  width: 100%;\n  text-align: left;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.header-dialogs-container__buttons {\n  display: flex;\n  align-items: center;\n  gap: 29px;\n  background: none;\n  color: var(--color-icon);\n}\n.header-dialogs-container__buttons svg {\n  width: 24px;\n  height: 24px;\n  viewBox: 0 0 24px 24px;\n}\n.header-dialogs-container__buttons svg path {\n  fill: var(--color-icon);\n}\n\n.header-dialogs {\n  border: 1px solid var(--color-divider);\n}", "",{"version":3,"sources":["webpack://./src/Presentation/Views/DialogListHeader/DialogListHeader.scss","webpack://./src/Presentation/themes/styles/_fonts.scss","webpack://./src/Presentation/themes/styles/_theme_light.scss","webpack://./src/Presentation/themes/styles/_theme_dark.scss","webpack://./src/Presentation/themes/styles/_variables.scss","webpack://./src/index.scss"],"names":[],"mappings":"AAAA,gBAAgB;ACIhB;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACFA;EACE,kBAAA;EACA,2BAAA;EACA,iCAAA;EACA,mCAAA;EACA,wBAAA;EACA,qBAAA;EACA,qBAAA;EACA,2BAAA;EACA,8BAAA;EACA,+BAAA;EAEA,gCAAA;EACA,8BAAA;EACA,4BAAA;EACA,wBAAA;EACA,sBAAA;EACA,6BAAA;EACA,yBAAA;EACA,4BAAA;EACA,uBAAA;EACA,oBAAA;EACA,yBAAA;EACA,kBAAA;EACA,0BAAA;EACA,+BAAA;EACA,mDAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,qBAAA;EACA,kBAAA;EACA,gBAAA;EACA,0BAAA;EACA,qBAAA;AF6BF;;AG9DA;EACE,kBAAA;EACA,2BAAA;EACA,iCAAA;EACA,mCAAA;EACA,wBAAA;EACA,qBAAA;EACA,qBAAA;EACA,2BAAA;EACA,8BAAA;EACA,+BAAA;EAEA,gCAAA;EACA,8BAAA;EACA,6CAAA;EACA,wBAAA;EACA,6BAAA;EACA,yBAAA;EACA,4BAAA;EACA,uBAAA;EACA,oBAAA;EACA,yBAAA;EACA,kBAAA;EACA,0BAAA;EACA,+BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,qBAAA;EACA,kBAAA;EACA,gBAAA;EACA,0BAAA;EACA,qBAAA;AHgEF;;AIzEA,UAAA;AACA;EACE,uDAAA;EACA,wDAAA;EACA,uDAAA;EACA,uDAAA;EACA,wDAAA;EACA,uDAAA;EACA,qDAAA;EACA,sDAAA;EACA,qDAAA;EACA,gDAAA;EACA,oDAAA;EACA,mDAAA;EACA,kDAAA;EACA,iDAAA;EAEF,UAAA;EACE,iCAAA;EACA,yCAAA;EACA,gCAAA;EACA,gCAAA;EACA,8BAAA;EACA,iCAAA;AJ2EF;;AKvHA;EACE,sBAAA;AL0HF;;AKvHA;EACE,qBAAA;EACA,uBAAA;EACA,wCAAA;EACA,2BAAA;EACA,gCAAA;AL0HF;;AKvHA,mCAAA;AACA;EACE;IACE,yCAAA;IACA,iCAAA;IACA,gCAAA;IACA,gCAAA;IACA,6BAAA;EL0HF;AACF;AAnIA;EACE,aAAA;EACA,YAfwB;EAgBxB,WAAA;EACA,4BAAA;EACA,8BAAA;AAqIF;AApIE;EACC,qBAhBkC;EAiBlC,kBAAA;EACA,gBAAA;EACA,eAlBgC;EAmBhC,iBAlBkC;EAmBlC,wBAAA;EAEC,WAAA;EACD,gBAAA;EAEA,uBAAA;EACA,mBAAA;EACA,gBAAA;AAoIH;AAhIE;EACE,aAAA;EACA,mBAAA;EACA,SA/BiC;EAgCjC,gBAAA;EACA,wBA9B0B;AAgK9B;AAhII;EACE,WAnC4B;EAoC5B,YAnC6B;EAoC7B,sBAAA;AAkIN;AAhII;EACE,uBAtCwB;AAwK9B;;AAvHA;EACE,sCAAA;AA0HF","sourcesContent":["@import \"../../../index\";\n\n$header-color-divider: var(--color-divider);\n$header-container-height: 64px;\n$header-container-gap-width: 30px; // 140px;\n$header-container-bottom: 20px;\n$header-container-padding-interval: 16px;\n$header-container-title-font-family: 'Roboto';\n$header-container-title-font-size: 20px;\n$header-container-title-line-height: 24px;\n$header-container-title-width: 180px;\n$header-container-buttons-gap-width: 29px;\n$header-container-svg-icon-width: 24px;\n$header-container-svg-icon-height: 24px;\n$header-container-color-icon: var(--color-icon);\n\n.header-dialogs-container{\n  display: flex;\n  height: $header-container-height;\n  gap: 0 $header-container-gap-width;\n  padding: $header-container-padding-interval $header-container-padding-interval $header-container-padding-interval $header-container-bottom;\n  justify-content: space-between;\n  &--title_wrapper{\n   font-family: $header-container-title-font-family;\n   font-style: normal;\n   font-weight: 500;\n   font-size: $header-container-title-font-size;\n   line-height: $header-container-title-line-height;\n   letter-spacing: 0.0015em;\n\n    width: 100%;\n   text-align: left;\n\n   text-overflow: ellipsis;\n   white-space: nowrap;\n   overflow: hidden;\n}\n  &__title{\n  }\n  &__buttons{\n    display: flex;\n    align-items: center;\n    gap: $header-container-buttons-gap-width;\n    background: none;\n    color: $header-container-color-icon;\n\n    svg{\n      width:$header-container-svg-icon-width;\n      height:$header-container-svg-icon-height;\n      viewBox: 0 0 $header-container-svg-icon-width $header-container-svg-icon-height;\n    }\n    svg path {\n      fill: $header-container-color-icon;\n    }\n\n    //#Search{\n    //  fill: $header-container-color-icon;\n    //}\n    //#NewChat{\n    //  fill: $header-container-color-icon;\n    //}\n  }\n}\n.header-dialogs{\n  border: 1px solid $header-color-divider;\n}\n\n\n","@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400;0,500;0,700;1,700&display=swap');\n////font-family: 'Ubuntu', sans-serif;\n@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');\n////font-family: 'Roboto', sans-serif;\n/*\n@font-face {\n  font-family: \"Roboto-Regular\";\n  src: url(\"../fonts/Roboto-Regular.eot\");\n  src: local(\"☺\"), url(\"../fonts/Roboto-Regular.woff\") format(\"woff\"),\n  url(\"../fonts/Roboto-Regular.ttf\") format(\"truetype\");\n  font-weight: normal;\n  font-style: normal;\n}\n\n@font-face {\n  font-family: \"Roboto-Medium\";\n  src: url(\"../fonts/Roboto-Medium.eot\");\n  src: local(\"☺\"), url(\"../fonts/Roboto-Medium.woff\") format(\"woff\"),\n  url(\"../fonts/Roboto-Medium.ttf\") format(\"truetype\");\n  font-weight: normal;\n  font-style: normal;\n}\n\n@font-face {\n  font-family: \"Roboto-Bold\";\n  src: url(\"../fonts/Roboto-Bold.eot\");\n  src: local(\"☺\"), url(\"../fonts/Roboto-Bold.woff\") format(\"woff\"),\n  url(\"../fonts/Roboto-Bold.ttf\") format(\"truetype\");\n  font-weight: normal;\n  font-style: normal;\n}\n*/\n","@import 'theme_colors_scheme';\n\n:root {\n  --primary: #{$primary-500};\n  --color-background: #{$primary-a-100};\n  --color-background-modal: #{$primary-100};\n  --color-background-overlay: #{$secondary-900};\n  --color-divider: #{$primary-50};\n  --color-font: #{$secondary-900};\n  --color-icon: #{$primary-500};\n  --color-media-icon: #{$primary-a-100};\n  --color-default-hover: #{$primary-700};\n  --color-default-active: #{$primary-900};\n\n  --color-background-info: #{$primary-100};\n  --color-border-active: #{$primary-200};\n  --tertiary-elements: #{$secondary-300};\n  --main-elements: #{$primary-500};\n  --toast-color: #{$secondary-800};\n  --secondary-elements: #{$secondary-500};\n  --input-elements: #{$secondary-500};\n  --disabled-elements: #{$secondary-100};\n  --field-border: #{$secondary-200};\n  --main-text: #{$secondary-900};\n  --secondary-text: #{$secondary-300};\n  --caption: #{$secondary-200};\n  --main-background: #{$primary-a-100};\n  --secondary-background: #{$primary-a-100}; // #{$primary-50};\n  --secondary-background-modal: #{$background-overlay-light};\n  --incoming-background: #{$secondary-50};\n  --outgoing-background: #{$primary-50};\n  --dropdown-background: #{$primary-a-100};\n  --chat-input: #{$primary-a-200};\n  --divider: #{$primary-50};\n  --error: #{$error-500};\n  --error-secondary: #{$error-200};\n  --hightlight: #{$highlight};\n}\n","@import 'theme_colors_scheme';\n// https://sass-lang.com/documentation/breaking-changes/css-vars\n\nhtml[data-theme='dark'] {\n  --primary: #{$primary-500};\n  --color-background: #{$secondary-900};\n  --color-background-modal: #{$secondary-800};\n  --color-background-overlay: #{$secondary-900};\n  --color-divider: #{$secondary-400};\n  --color-font: #{$primary-a-100};\n  --color-icon: #{$primary-300};\n  --color-media-icon: #{$primary-a-100};\n  --color-default-hover: #{$secondary-700};\n  --color-default-active: #{$secondary-900};\n\n  --color-background-info: #{$primary-500};\n  --color-border-active: #{$secondary-200};\n  --tertiary-elements: #{$background-overlay-dark};\n  --main-elements: #{$primary-300};\n  --secondary-elements: #{$primary-a-100};\n  --input-elements: #{$secondary-200};\n  --disabled-elements: #{$secondary-300};\n  --field-border: #{$secondary-200};\n  --main-text: #{$primary-a-100};\n  --secondary-text: #{$secondary-200};\n  --caption: #{$secondary-100};\n  --main-background: #{$secondary-500};\n  --secondary-background: #{$secondary-800};\n  --incoming-background: #{$secondary-400};\n  --outgoing-background: #{$primary-500};\n  --dropdown-background: #{$secondary-400};\n  --chat-input: #{$secondary-800};\n  --divider: #{$secondary-400};\n  --error: #{$error-300};\n  --error-secondary: #{$error-100};\n  --hightlight: #{$highlight};\n}\n","@import \"theme_light\";\n@import \"theme_dark\";\n\n$qb-min-width-screen-desktop: 980px;\n\n$qb-max-width-screen: 980px;\n\n$qb-max-width-message-view-container-desktop: 680px;\n$qb-max-width-message-view-container-mobile: 345px;\n\n$qb-max-width-message-bubble-desktop: 480px;\n$qb-max-width-message-bubble-mobile: 170px;\n\n$qb-max-width-image-message-desktop: 240px;\n$qb-max-width-image-message-mobile: 150px;\n\n$qb-max-width-audio-message-desktop: 300px;\n$qb-max-width-audio-message-mobile: 150px;\n\n$qb-max-width-dialog-list-desktop: 320px;\n$qb-max-width-dialog-list-mobile: 100%;\n\n$create-dialog-container-width: 380px;\n\n\n\n/* Fonts */\n:root{\n  --title-title-large: 500 20px/24px \"Roboto\", sans-serif;\n  --title-title-medium: 500 16px/24px \"Roboto\", sans-serif;\n  --title-title-small: 500 14px/20px \"Roboto\", sans-serif;\n  --label-label-large: 500 14px/20px \"Roboto\", sans-serif;\n  --label-label-medium: 500 12px/16px \"Roboto\", sans-serif;\n  --label-label-small: 500 11px/16px \"Roboto\", sans-serif;\n  --body-body-large: 400 16px/24px \"Roboto\", sans-serif;\n  --body-body-medium: 400 14px/20px \"Roboto\", sans-serif;\n  --body-body-small: 400 12px/16px \"Roboto\", sans-serif;\n  --button-fab: 500 14px/16px \"Roboto\", sans-serif;\n  --button-default: 700 14px/16px \"Roboto\", sans-serif;\n  --ui-kit-header: 500 48px \"Roboto Mono\", sans-serif;\n  --ui-kit-title: 500 32px \"Roboto Mono\", sans-serif;\n  --ui-kit-body: 400 17px \"Roboto Mono\", sans-serif;\n\n/* Width */\n  --max-width-message-bubble: #{$qb-max-width-message-bubble-desktop};\n  --max-width-message-view-container: #{$qb-max-width-message-view-container-desktop};\n  --max-width-image-message: #{$qb-max-width-image-message-desktop};\n  --max-width-audio-message: #{$qb-max-width-audio-message-desktop};\n  --max-width-dialog-list: #{$qb-max-width-dialog-list-desktop};\n  --min-width-screen-desktop: #{$qb-min-width-screen-desktop};\n}\n\n\n\n","@import 'Presentation/themes/styles/fonts';\n@import 'Presentation/themes/styles/theme_colors_scheme';\n@import 'Presentation/themes/styles/variables';\n@import 'Presentation/themes/styles/mixins';\n\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: 'Roboto';\n  color: var(--main-text);\n  background-color: var(--main-background);\n  overflow: hidden !important;\n  scrollbar-width: none !important;\n}\n\n/* Media-query for mobile devices */\n@media only screen and (max-width: #{$qb-max-width-screen}) {\n  :root {\n    --max-width-message-view-container: #{$qb-max-width-message-view-container-mobile};\n    --max-width-message-bubble: #{$qb-max-width-message-bubble-mobile};\n    --max-width-image-message: #{$qb-max-width-image-message-mobile};\n    --max-width-audio-message: #{$qb-max-width-audio-message-mobile};\n    --max-width-dialog-list: #{$qb-max-width-dialog-list-mobile};\n  }\n}\n"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, "@charset \"UTF-8\";\n/*\n@font-face {\n  font-family: \"Roboto-Regular\";\n  src: url(\"../fonts/Roboto-Regular.eot\");\n  src: local(\"☺\"), url(\"../fonts/Roboto-Regular.woff\") format(\"woff\"),\n  url(\"../fonts/Roboto-Regular.ttf\") format(\"truetype\");\n  font-weight: normal;\n  font-style: normal;\n}\n\n@font-face {\n  font-family: \"Roboto-Medium\";\n  src: url(\"../fonts/Roboto-Medium.eot\");\n  src: local(\"☺\"), url(\"../fonts/Roboto-Medium.woff\") format(\"woff\"),\n  url(\"../fonts/Roboto-Medium.ttf\") format(\"truetype\");\n  font-weight: normal;\n  font-style: normal;\n}\n\n@font-face {\n  font-family: \"Roboto-Bold\";\n  src: url(\"../fonts/Roboto-Bold.eot\");\n  src: local(\"☺\"), url(\"../fonts/Roboto-Bold.woff\") format(\"woff\"),\n  url(\"../fonts/Roboto-Bold.ttf\") format(\"truetype\");\n  font-weight: normal;\n  font-style: normal;\n}\n*/\n:root {\n  --primary: #3978FC;\n  --color-background: #FFFFFF;\n  --color-background-modal: #C4D7FE;\n  --color-background-overlay: #0B121B;\n  --color-divider: #E7EFFF;\n  --color-font: #0B121B;\n  --color-icon: #3978FC;\n  --color-media-icon: #FFFFFF;\n  --color-default-hover: #2C65FB;\n  --color-default-active: #1748FA;\n  --color-background-info: #C4D7FE;\n  --color-border-active: #9CBCFE;\n  --tertiary-elements: #636D78;\n  --main-elements: #3978FC;\n  --toast-color: #131D28;\n  --secondary-elements: #202F3E;\n  --input-elements: #202F3E;\n  --disabled-elements: #BCC1C5;\n  --field-border: #90979F;\n  --main-text: #0B121B;\n  --secondary-text: #636D78;\n  --caption: #90979F;\n  --main-background: #FFFFFF;\n  --secondary-background: #FFFFFF;\n  --secondary-background-modal: rgba(19, 29, 40, 0.8);\n  --incoming-background: #E4E6E8;\n  --outgoing-background: #E7EFFF;\n  --dropdown-background: #FFFFFF;\n  --chat-input: #F7F9FF;\n  --divider: #E7EFFF;\n  --error: #FF3B30;\n  --error-secondary: #FF9D98;\n  --hightlight: #FFFDC1;\n}\n\nhtml[data-theme=dark] {\n  --primary: #3978FC;\n  --color-background: #0B121B;\n  --color-background-modal: #131D28;\n  --color-background-overlay: #0B121B;\n  --color-divider: #414E5B;\n  --color-font: #FFFFFF;\n  --color-icon: #74A1FD;\n  --color-media-icon: #FFFFFF;\n  --color-default-hover: #182330;\n  --color-default-active: #0B121B;\n  --color-background-info: #3978FC;\n  --color-border-active: #90979F;\n  --tertiary-elements: rgba(144, 151, 159, 0.8);\n  --main-elements: #74A1FD;\n  --secondary-elements: #FFFFFF;\n  --input-elements: #90979F;\n  --disabled-elements: #636D78;\n  --field-border: #90979F;\n  --main-text: #FFFFFF;\n  --secondary-text: #90979F;\n  --caption: #BCC1C5;\n  --main-background: #202F3E;\n  --secondary-background: #131D28;\n  --incoming-background: #414E5B;\n  --outgoing-background: #3978FC;\n  --dropdown-background: #414E5B;\n  --chat-input: #131D28;\n  --divider: #414E5B;\n  --error: #FF766E;\n  --error-secondary: #FFC4C1;\n  --hightlight: #FFFDC1;\n}\n\n/* Fonts */\n:root {\n  --title-title-large: 500 20px/24px \"Roboto\", sans-serif;\n  --title-title-medium: 500 16px/24px \"Roboto\", sans-serif;\n  --title-title-small: 500 14px/20px \"Roboto\", sans-serif;\n  --label-label-large: 500 14px/20px \"Roboto\", sans-serif;\n  --label-label-medium: 500 12px/16px \"Roboto\", sans-serif;\n  --label-label-small: 500 11px/16px \"Roboto\", sans-serif;\n  --body-body-large: 400 16px/24px \"Roboto\", sans-serif;\n  --body-body-medium: 400 14px/20px \"Roboto\", sans-serif;\n  --body-body-small: 400 12px/16px \"Roboto\", sans-serif;\n  --button-fab: 500 14px/16px \"Roboto\", sans-serif;\n  --button-default: 700 14px/16px \"Roboto\", sans-serif;\n  --ui-kit-header: 500 48px \"Roboto Mono\", sans-serif;\n  --ui-kit-title: 500 32px \"Roboto Mono\", sans-serif;\n  --ui-kit-body: 400 17px \"Roboto Mono\", sans-serif;\n  /* Width */\n  --max-width-message-bubble: 480px;\n  --max-width-message-view-container: 680px;\n  --max-width-image-message: 240px;\n  --max-width-audio-message: 300px;\n  --max-width-dialog-list: 320px;\n  --min-width-screen-desktop: 980px;\n}\n\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: \"Roboto\";\n  color: var(--main-text);\n  background-color: var(--main-background);\n}\n\n/* Media-query for mobile devices */\n@media only screen and (max-width: 980px) {\n  :root {\n    --max-width-message-view-container: 345px;\n    --max-width-message-bubble: 170px;\n    --max-width-image-message: 150px;\n    --max-width-audio-message: 150px;\n    --max-width-dialog-list: 100%;\n  }\n}\n.header-dialogs-container {\n  display: flex;\n  height: 64px;\n  gap: 0 30px;\n  padding: 16px 16px 16px 20px;\n  justify-content: space-between;\n}\n.header-dialogs-container--title_wrapper {\n  font-family: \"Roboto\";\n  font-style: normal;\n  font-weight: 500;\n  font-size: 20px;\n  line-height: 24px;\n  letter-spacing: 0.0015em;\n  width: 100%;\n  text-align: left;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n}\n.header-dialogs-container__buttons {\n  display: flex;\n  align-items: center;\n  gap: 29px;\n  background: none;\n  color: var(--color-icon);\n}\n.header-dialogs-container__buttons svg {\n  width: 24px;\n  height: 24px;\n  viewBox: 0 0 24px 24px;\n}\n.header-dialogs-container__buttons svg path {\n  fill: var(--color-icon);\n}\n\n.header-dialogs {\n  border: 1px solid var(--color-divider);\n}", "",{"version":3,"sources":["webpack://./src/Presentation/Views/DialogListHeader/DialogListHeader.scss","webpack://./src/Presentation/themes/styles/_fonts.scss","webpack://./src/Presentation/themes/styles/_theme_light.scss","webpack://./src/Presentation/themes/styles/_theme_dark.scss","webpack://./src/Presentation/themes/styles/_variables.scss","webpack://./src/index.scss"],"names":[],"mappings":"AAAA,gBAAgB;ACIhB;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACFA;EACE,kBAAA;EACA,2BAAA;EACA,iCAAA;EACA,mCAAA;EACA,wBAAA;EACA,qBAAA;EACA,qBAAA;EACA,2BAAA;EACA,8BAAA;EACA,+BAAA;EAEA,gCAAA;EACA,8BAAA;EACA,4BAAA;EACA,wBAAA;EACA,sBAAA;EACA,6BAAA;EACA,yBAAA;EACA,4BAAA;EACA,uBAAA;EACA,oBAAA;EACA,yBAAA;EACA,kBAAA;EACA,0BAAA;EACA,+BAAA;EACA,mDAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,qBAAA;EACA,kBAAA;EACA,gBAAA;EACA,0BAAA;EACA,qBAAA;AF6BF;;AG9DA;EACE,kBAAA;EACA,2BAAA;EACA,iCAAA;EACA,mCAAA;EACA,wBAAA;EACA,qBAAA;EACA,qBAAA;EACA,2BAAA;EACA,8BAAA;EACA,+BAAA;EAEA,gCAAA;EACA,8BAAA;EACA,6CAAA;EACA,wBAAA;EACA,6BAAA;EACA,yBAAA;EACA,4BAAA;EACA,uBAAA;EACA,oBAAA;EACA,yBAAA;EACA,kBAAA;EACA,0BAAA;EACA,+BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,qBAAA;EACA,kBAAA;EACA,gBAAA;EACA,0BAAA;EACA,qBAAA;AHgEF;;AIzEA,UAAA;AACA;EACE,uDAAA;EACA,wDAAA;EACA,uDAAA;EACA,uDAAA;EACA,wDAAA;EACA,uDAAA;EACA,qDAAA;EACA,sDAAA;EACA,qDAAA;EACA,gDAAA;EACA,oDAAA;EACA,mDAAA;EACA,kDAAA;EACA,iDAAA;EAEF,UAAA;EACE,iCAAA;EACA,yCAAA;EACA,gCAAA;EACA,gCAAA;EACA,8BAAA;EACA,iCAAA;AJ2EF;;AKvHA;EACE,sBAAA;AL0HF;;AKvHA;EACE,qBAAA;EACA,uBAAA;EACA,wCAAA;AL0HF;;AKvHA,mCAAA;AACA;EACE;IACE,yCAAA;IACA,iCAAA;IACA,gCAAA;IACA,gCAAA;IACA,6BAAA;EL0HF;AACF;AAjIA;EACE,aAAA;EACA,YAfwB;EAgBxB,WAAA;EACA,4BAAA;EACA,8BAAA;AAmIF;AAlIE;EACC,qBAhBkC;EAiBlC,kBAAA;EACA,gBAAA;EACA,eAlBgC;EAmBhC,iBAlBkC;EAmBlC,wBAAA;EAEC,WAAA;EACD,gBAAA;EAEA,uBAAA;EACA,mBAAA;EACA,gBAAA;AAkIH;AA9HE;EACE,aAAA;EACA,mBAAA;EACA,SA/BiC;EAgCjC,gBAAA;EACA,wBA9B0B;AA8J9B;AA9HI;EACE,WAnC4B;EAoC5B,YAnC6B;EAoC7B,sBAAA;AAgIN;AA9HI;EACE,uBAtCwB;AAsK9B;;AArHA;EACE,sCAAA;AAwHF","sourcesContent":["@import \"../../../index\";\n\n$header-color-divider: var(--color-divider);\n$header-container-height: 64px;\n$header-container-gap-width: 30px; // 140px;\n$header-container-bottom: 20px;\n$header-container-padding-interval: 16px;\n$header-container-title-font-family: 'Roboto';\n$header-container-title-font-size: 20px;\n$header-container-title-line-height: 24px;\n$header-container-title-width: 180px;\n$header-container-buttons-gap-width: 29px;\n$header-container-svg-icon-width: 24px;\n$header-container-svg-icon-height: 24px;\n$header-container-color-icon: var(--color-icon);\n\n.header-dialogs-container{\n  display: flex;\n  height: $header-container-height;\n  gap: 0 $header-container-gap-width;\n  padding: $header-container-padding-interval $header-container-padding-interval $header-container-padding-interval $header-container-bottom;\n  justify-content: space-between;\n  &--title_wrapper{\n   font-family: $header-container-title-font-family;\n   font-style: normal;\n   font-weight: 500;\n   font-size: $header-container-title-font-size;\n   line-height: $header-container-title-line-height;\n   letter-spacing: 0.0015em;\n\n    width: 100%;\n   text-align: left;\n\n   text-overflow: ellipsis;\n   white-space: nowrap;\n   overflow: hidden;\n}\n  &__title{\n  }\n  &__buttons{\n    display: flex;\n    align-items: center;\n    gap: $header-container-buttons-gap-width;\n    background: none;\n    color: $header-container-color-icon;\n\n    svg{\n      width:$header-container-svg-icon-width;\n      height:$header-container-svg-icon-height;\n      viewBox: 0 0 $header-container-svg-icon-width $header-container-svg-icon-height;\n    }\n    svg path {\n      fill: $header-container-color-icon;\n    }\n\n    //#Search{\n    //  fill: $header-container-color-icon;\n    //}\n    //#NewChat{\n    //  fill: $header-container-color-icon;\n    //}\n  }\n}\n.header-dialogs{\n  border: 1px solid $header-color-divider;\n}\n\n\n","@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400;0,500;0,700;1,700&display=swap');\n////font-family: 'Ubuntu', sans-serif;\n@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');\n////font-family: 'Roboto', sans-serif;\n/*\n@font-face {\n  font-family: \"Roboto-Regular\";\n  src: url(\"../fonts/Roboto-Regular.eot\");\n  src: local(\"☺\"), url(\"../fonts/Roboto-Regular.woff\") format(\"woff\"),\n  url(\"../fonts/Roboto-Regular.ttf\") format(\"truetype\");\n  font-weight: normal;\n  font-style: normal;\n}\n\n@font-face {\n  font-family: \"Roboto-Medium\";\n  src: url(\"../fonts/Roboto-Medium.eot\");\n  src: local(\"☺\"), url(\"../fonts/Roboto-Medium.woff\") format(\"woff\"),\n  url(\"../fonts/Roboto-Medium.ttf\") format(\"truetype\");\n  font-weight: normal;\n  font-style: normal;\n}\n\n@font-face {\n  font-family: \"Roboto-Bold\";\n  src: url(\"../fonts/Roboto-Bold.eot\");\n  src: local(\"☺\"), url(\"../fonts/Roboto-Bold.woff\") format(\"woff\"),\n  url(\"../fonts/Roboto-Bold.ttf\") format(\"truetype\");\n  font-weight: normal;\n  font-style: normal;\n}\n*/\n","@import 'theme_colors_scheme';\n\n:root {\n  --primary: #{$primary-500};\n  --color-background: #{$primary-a-100};\n  --color-background-modal: #{$primary-100};\n  --color-background-overlay: #{$secondary-900};\n  --color-divider: #{$primary-50};\n  --color-font: #{$secondary-900};\n  --color-icon: #{$primary-500};\n  --color-media-icon: #{$primary-a-100};\n  --color-default-hover: #{$primary-700};\n  --color-default-active: #{$primary-900};\n\n  --color-background-info: #{$primary-100};\n  --color-border-active: #{$primary-200};\n  --tertiary-elements: #{$secondary-300};\n  --main-elements: #{$primary-500};\n  --toast-color: #{$secondary-800};\n  --secondary-elements: #{$secondary-500};\n  --input-elements: #{$secondary-500};\n  --disabled-elements: #{$secondary-100};\n  --field-border: #{$secondary-200};\n  --main-text: #{$secondary-900};\n  --secondary-text: #{$secondary-300};\n  --caption: #{$secondary-200};\n  --main-background: #{$primary-a-100};\n  --secondary-background: #{$primary-a-100}; // #{$primary-50};\n  --secondary-background-modal: #{$background-overlay-light};\n  --incoming-background: #{$secondary-50};\n  --outgoing-background: #{$primary-50};\n  --dropdown-background: #{$primary-a-100};\n  --chat-input: #{$primary-a-200};\n  --divider: #{$primary-50};\n  --error: #{$error-500};\n  --error-secondary: #{$error-200};\n  --hightlight: #{$highlight};\n}\n","@import 'theme_colors_scheme';\n// https://sass-lang.com/documentation/breaking-changes/css-vars\n\nhtml[data-theme='dark'] {\n  --primary: #{$primary-500};\n  --color-background: #{$secondary-900};\n  --color-background-modal: #{$secondary-800};\n  --color-background-overlay: #{$secondary-900};\n  --color-divider: #{$secondary-400};\n  --color-font: #{$primary-a-100};\n  --color-icon: #{$primary-300};\n  --color-media-icon: #{$primary-a-100};\n  --color-default-hover: #{$secondary-700};\n  --color-default-active: #{$secondary-900};\n\n  --color-background-info: #{$primary-500};\n  --color-border-active: #{$secondary-200};\n  --tertiary-elements: #{$background-overlay-dark};\n  --main-elements: #{$primary-300};\n  --secondary-elements: #{$primary-a-100};\n  --input-elements: #{$secondary-200};\n  --disabled-elements: #{$secondary-300};\n  --field-border: #{$secondary-200};\n  --main-text: #{$primary-a-100};\n  --secondary-text: #{$secondary-200};\n  --caption: #{$secondary-100};\n  --main-background: #{$secondary-500};\n  --secondary-background: #{$secondary-800};\n  --incoming-background: #{$secondary-400};\n  --outgoing-background: #{$primary-500};\n  --dropdown-background: #{$secondary-400};\n  --chat-input: #{$secondary-800};\n  --divider: #{$secondary-400};\n  --error: #{$error-300};\n  --error-secondary: #{$error-100};\n  --hightlight: #{$highlight};\n}\n","@import \"theme_light\";\n@import \"theme_dark\";\n\n$qb-min-width-screen-desktop: 980px;\n\n$qb-max-width-screen: 980px;\n\n$qb-max-width-message-view-container-desktop: 680px;\n$qb-max-width-message-view-container-mobile: 345px;\n\n$qb-max-width-message-bubble-desktop: 480px;\n$qb-max-width-message-bubble-mobile: 170px;\n\n$qb-max-width-image-message-desktop: 240px;\n$qb-max-width-image-message-mobile: 150px;\n\n$qb-max-width-audio-message-desktop: 300px;\n$qb-max-width-audio-message-mobile: 150px;\n\n$qb-max-width-dialog-list-desktop: 320px;\n$qb-max-width-dialog-list-mobile: 100%;\n\n$create-dialog-container-width: 380px;\n\n\n\n/* Fonts */\n:root{\n  --title-title-large: 500 20px/24px \"Roboto\", sans-serif;\n  --title-title-medium: 500 16px/24px \"Roboto\", sans-serif;\n  --title-title-small: 500 14px/20px \"Roboto\", sans-serif;\n  --label-label-large: 500 14px/20px \"Roboto\", sans-serif;\n  --label-label-medium: 500 12px/16px \"Roboto\", sans-serif;\n  --label-label-small: 500 11px/16px \"Roboto\", sans-serif;\n  --body-body-large: 400 16px/24px \"Roboto\", sans-serif;\n  --body-body-medium: 400 14px/20px \"Roboto\", sans-serif;\n  --body-body-small: 400 12px/16px \"Roboto\", sans-serif;\n  --button-fab: 500 14px/16px \"Roboto\", sans-serif;\n  --button-default: 700 14px/16px \"Roboto\", sans-serif;\n  --ui-kit-header: 500 48px \"Roboto Mono\", sans-serif;\n  --ui-kit-title: 500 32px \"Roboto Mono\", sans-serif;\n  --ui-kit-body: 400 17px \"Roboto Mono\", sans-serif;\n\n/* Width */\n  --max-width-message-bubble: #{$qb-max-width-message-bubble-desktop};\n  --max-width-message-view-container: #{$qb-max-width-message-view-container-desktop};\n  --max-width-image-message: #{$qb-max-width-image-message-desktop};\n  --max-width-audio-message: #{$qb-max-width-audio-message-desktop};\n  --max-width-dialog-list: #{$qb-max-width-dialog-list-desktop};\n  --min-width-screen-desktop: #{$qb-min-width-screen-desktop};\n}\n\n\n\n","@import 'Presentation/themes/styles/fonts';\n@import 'Presentation/themes/styles/theme_colors_scheme';\n@import 'Presentation/themes/styles/variables';\n@import 'Presentation/themes/styles/mixins';\n\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: 'Roboto';\n  color: var(--main-text);\n  background-color: var(--main-background);\n}\n\n/* Media-query for mobile devices */\n@media only screen and (max-width: #{$qb-max-width-screen}) {\n  :root {\n    --max-width-message-view-container: #{$qb-max-width-message-view-container-mobile};\n    --max-width-message-bubble: #{$qb-max-width-message-bubble-mobile};\n    --max-width-image-message: #{$qb-max-width-image-message-mobile};\n    --max-width-audio-message: #{$qb-max-width-audio-message-mobile};\n    --max-width-dialog-list: #{$qb-max-width-dialog-list-mobile};\n  }\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -3481,7 +3454,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".edit-container {\n  min-height: 236px;\n  max-height: 236px;\n  height: 236px;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n\n.edit-btn-container {\n  min-height: 34px;\n  max-height: 34px;\n  height: 34px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: flex-end;\n}\n\n.edit-dialog-container {\n  min-height: 180px;\n  max-height: 180px;\n  height: 180px;\n  width: 100%;\n  margin-bottom: 24px;\n}\n.edit-dialog-container--wrapper {\n  min-height: 180px;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n.edit-dialog-container--wrapper__inf {\n  min-height: 20px;\n  font-family: \"Roboto\";\n  font-style: normal;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  letter-spacing: 0.25px;\n  color: var(--main-text);\n}\n.edit-dialog-container--wrapper__icon-container {\n  min-height: 56px;\n  max-height: 56px;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n.edit-dialog-container--wrapper__icon-container__icon {\n  min-height: 56px;\n  max-height: 56px;\n  height: 56px;\n  min-width: 56px;\n  max-width: 56px;\n  height: 56px;\n  margin-top: 8px;\n  background-color: var(--disabled-elements);\n  border-radius: 50%;\n  text-align: center;\n  align-content: center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.edit-dialog-container--wrapper__icon-container__upload {\n  min-height: 32px;\n  max-height: 32px;\n  min-width: 80px;\n  max-width: 80px;\n  margin-top: 8px;\n  padding-left: 16px;\n  padding-top: 20px;\n  font-family: \"Roboto\";\n  font-style: normal;\n  font-weight: 700;\n  font-size: 14px;\n  line-height: 16px;\n  letter-spacing: 0.4px;\n  color: var(--color-icon);\n}\n.edit-dialog-container--wrapper__upload-error {\n  min-height: 20px;\n  font-family: \"Roboto\";\n  font-style: normal;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  letter-spacing: 0.25px;\n  margin-top: 5px;\n  color: var(--error);\n}\n.edit-dialog-container--wrapper__dialog-name-inf {\n  min-height: 20px;\n  font-family: \"Roboto\";\n  font-style: normal;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  letter-spacing: 0.25px;\n  margin-top: 24px;\n}\n.edit-dialog-container--wrapper__dialog-name-input {\n  margin-top: 8px;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  align-items: center;\n  padding: 6px 8px;\n  width: 100%;\n  height: 44px;\n  border: 1px solid var(--tertiary-elements);\n  border-radius: 4px;\n  flex: none;\n  order: 1;\n  align-self: stretch;\n  flex-grow: 0;\n  background-color: var(--main-background);\n}\n.edit-dialog-container--wrapper__dialog-name-input input {\n  color: var(--secondary-text);\n  background-color: var(--main-background);\n  font-family: \"Roboto\";\n  font-style: normal;\n  font-weight: 400;\n  font-size: 16px;\n  line-height: 24px;\n  display: flex;\n  align-items: center;\n  letter-spacing: 0.15px;\n  border: none;\n  outline: none;\n}", "",{"version":3,"sources":["webpack://./src/Presentation/Views/EditDialog/EditDialog.scss"],"names":[],"mappings":"AAKA;EAEE,iBANiB;EAOjB,iBAPiB;EAQjB,aARiB;EAYjB,WAAA;EAEA,aAAA;EACA,sBAAA;EACA,iBAAA;EACA,2BAAA;EACA,uBAAA;AATF;;AAYA;EAEE,gBAAA;EACA,gBAAA;EACA,YAAA;EAIA,WAAA;EAEA,aAAA;EACA,mBAAA;EACA,iBAAA;EACA,yBAAA;EACA,qBAAA;AAdF;;AAiBA;EACE,iBArC+B;EAsC/B,iBAtC+B;EAuC/B,aAvC+B;EA2C/B,WAAA;EAIA,mBAAA;AApBF;AAsBE;EACE,iBAAA;EACA,aAAA;EACA,sBAAA;EACA,iBAAA;EACA,2BAAA;EACA,uBAAA;AApBJ;AAwBI;EACE,gBAAA;EAEA,qBAAA;EACA,kBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,sBAAA;EACA,uBAAA;AAvBN;AA6BI;EACE,gBAAA;EACA,gBAAA;EACA,aAAA;EACA,mBAAA;EACA,iBAAA;EACA,2BAAA;EACA,uBAAA;AA3BN;AA6BM;EACE,gBAAA;EACA,gBAAA;EACA,YAAA;EACA,eAAA;EACA,eAAA;EACA,YAAA;EACA,eAAA;EAEA,0CAAA;EACA,kBAAA;EACA,kBAAA;EACA,qBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;AA5BR;AAqCM;EACE,gBAAA;EACA,gBAAA;EACA,eAAA;EACA,eAAA;EACA,eAAA;EACA,kBAAA;EACA,iBAAA;EAEA,qBAAA;EACA,kBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,qBAAA;EACA,wBAAA;AApCR;AA2CI;EACE,gBAAA;EAEA,qBAAA;EACA,kBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,sBAAA;EACA,eAAA;EACA,mBAAA;AA1CN;AA6CI;EACE,gBAAA;EAEA,qBAAA;EACA,kBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,sBAAA;EACA,gBAAA;AA5CN;AAiDI;EACE,eAAA;EAEA,sBAAA;EACA,aAAA;EACA,mBAAA;EACA,8BAAA;EACA,mBAAA;EACA,gBAAA;EAGA,WAAA;EACA,YAAA;EAEA,0CAAA;EACA,kBAAA;EAEA,UAAA;EACA,QAAA;EACA,mBAAA;EACA,YAAA;EAEA,wCAAA;AArDN;AAuDM;EACE,4BAAA;EACA,wCAAA;EAEA,qBAAA;EACA,kBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EAEA,aAAA;EACA,mBAAA;EACA,sBAAA;EAEA,YAAA;EACA,aAAA;AAxDR","sourcesContent":["$container-width: 332px;\n$container-height: 236px;\n$create-dialog-container-width: 332px;\n$create-dialog-container-height: 180px;\n\n.edit-container {\n  //border: 1px solid blue;\n  min-height: $container-height;\n  max-height: $container-height;\n  height: $container-height;\n  //min-width: $container-width;\n  //max-width: $container-width;\n  //width: $container-width;\n  width: 100%;\n\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n\n.edit-btn-container {\n  //border: 3px solid black;\n  min-height: 34px;\n  max-height: 34px;\n  height: 34px;\n  //min-width: $container-width;\n  //max-width: $container-width;\n  //width: $container-width;\n  width: 100%;\n\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: flex-end;\n}\n\n.edit-dialog-container {\n  min-height: $create-dialog-container-height;\n  max-height: $create-dialog-container-height;\n  height: $create-dialog-container-height;\n  //min-width: $create-dialog-container-width;\n  //max-width: $create-dialog-container-width;\n  //width: $create-dialog-container-width;\n  width: 100%;\n\n  //border: 3px solid green;\n\n  margin-bottom: 24px;\n\n  &--wrapper {\n    min-height: 180px;\n    display: flex;\n    flex-direction: column;\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    align-items: flex-start;\n\n    //border: 1px solid blue;\n\n    &__inf {\n      min-height: 20px;\n\n      font-family: 'Roboto';\n      font-style: normal;\n      font-weight: 400;\n      font-size: 14px;\n      line-height: 20px;\n      letter-spacing: 0.25px;\n      color: var(--main-text);\n      // color: var(--color-background);\n\n      //border: 1px solid orange;\n    }\n\n    &__icon-container {\n      min-height: 56px;\n      max-height: 56px;\n      display: flex;\n      flex-direction: row;\n      flex-wrap: nowrap;\n      justify-content: flex-start;\n      align-items: flex-start;\n\n      &__icon {\n        min-height: 56px;\n        max-height: 56px;\n        height: 56px;\n        min-width: 56px;\n        max-width: 56px;\n        height: 56px;\n        margin-top: 8px;\n\n        background-color: var(--disabled-elements);\n        border-radius: 50%;\n        text-align: center;\n        align-content: center;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        //border: 1px solid red;\n\n        &__content {\n          // margin: 10px;\n        }\n      }\n\n      &__upload {\n        min-height: 32px;\n        max-height: 32px;\n        min-width: 80px;\n        max-width: 80px;\n        margin-top: 8px;\n        padding-left: 16px;\n        padding-top: 20px;\n\n        font-family: 'Roboto';\n        font-style: normal;\n        font-weight: 700;\n        font-size: 14px;\n        line-height: 16px;\n        letter-spacing: 0.4px;\n        color: var(--color-icon);\n        //cursor: pointer;\n\n        // border: 1px solid green;\n      }\n    }\n\n    &__upload-error {\n      min-height: 20px;\n\n      font-family: 'Roboto';\n      font-style: normal;\n      font-weight: 400;\n      font-size: 14px;\n      line-height: 20px;\n      letter-spacing: 0.25px;\n      margin-top: 5px;\n      color: var(--error);\n    }\n\n    &__dialog-name-inf {\n      min-height: 20px;\n\n      font-family: 'Roboto';\n      font-style: normal;\n      font-weight: 400;\n      font-size: 14px;\n      line-height: 20px;\n      letter-spacing: 0.25px;\n      margin-top: 24px;\n\n      //border: 1px solid orange;\n    }\n\n    &__dialog-name-input {\n      margin-top: 8px;\n\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: row;\n      justify-content: space-between;\n      align-items: center;\n      padding: 6px 8px;\n\n      //width: 320px;\n      width: 100%;\n      height: 44px;\n\n      border: 1px solid var(--tertiary-elements); //#90979F;\n      border-radius: 4px;\n\n      flex: none;\n      order: 1;\n      align-self: stretch;\n      flex-grow: 0;\n\n      background-color: var(--main-background);\n\n      input {\n        color: var(--secondary-text);\n        background-color: var(--main-background);\n\n        font-family: 'Roboto';\n        font-style: normal;\n        font-weight: 400;\n        font-size: 16px;\n        line-height: 24px;\n\n        display: flex;\n        align-items: center;\n        letter-spacing: 0.15px;\n\n        border: none;\n        outline: none;\n      }\n    }\n  }\n}\n"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, ".edit-container {\n  min-height: 236px;\n  max-height: 236px;\n  height: 236px;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n\n.edit-btn-container {\n  min-height: 34px;\n  max-height: 34px;\n  height: 34px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: flex-end;\n}\n\n.edit-dialog-container {\n  min-height: 180px;\n  max-height: 180px;\n  height: 180px;\n  width: 100%;\n  margin-bottom: 24px;\n}\n.edit-dialog-container--wrapper {\n  min-height: 180px;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n.edit-dialog-container--wrapper__inf {\n  min-height: 20px;\n  font-family: \"Roboto\";\n  font-style: normal;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  letter-spacing: 0.25px;\n  color: var(--main-text);\n}\n.edit-dialog-container--wrapper__icon-container {\n  min-height: 56px;\n  max-height: 56px;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n.edit-dialog-container--wrapper__icon-container__icon {\n  min-height: 56px;\n  max-height: 56px;\n  height: 56px;\n  min-width: 56px;\n  max-width: 56px;\n  height: 56px;\n  margin-top: 8px;\n  background-color: var(--disabled-elements);\n  border-radius: 50%;\n  text-align: center;\n  align-content: center;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.edit-dialog-container--wrapper__icon-container__upload {\n  min-height: 32px;\n  max-height: 32px;\n  min-width: 80px;\n  max-width: 80px;\n  margin-top: 8px;\n  padding-left: 16px;\n  padding-top: 20px;\n  font-family: \"Roboto\";\n  font-style: normal;\n  font-weight: 700;\n  font-size: 14px;\n  line-height: 16px;\n  letter-spacing: 0.4px;\n  color: var(--color-icon);\n}\n.edit-dialog-container--wrapper__upload-error {\n  min-height: 20px;\n  font-family: \"Roboto\";\n  font-style: normal;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  letter-spacing: 0.25px;\n  margin-top: 5px;\n  color: var(--error);\n}\n.edit-dialog-container--wrapper__dialog-name-inf {\n  min-height: 20px;\n  font-family: \"Roboto\";\n  font-style: normal;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  letter-spacing: 0.25px;\n  margin-top: 24px;\n}\n.edit-dialog-container--wrapper__text-field {\n  width: 100%;\n}", "",{"version":3,"sources":["webpack://./src/Presentation/Views/EditDialog/EditDialog.scss"],"names":[],"mappings":"AAKA;EAEE,iBANiB;EAOjB,iBAPiB;EAQjB,aARiB;EAYjB,WAAA;EAEA,aAAA;EACA,sBAAA;EACA,iBAAA;EACA,2BAAA;EACA,uBAAA;AATF;;AAYA;EAEE,gBAAA;EACA,gBAAA;EACA,YAAA;EAIA,WAAA;EAEA,aAAA;EACA,mBAAA;EACA,iBAAA;EACA,yBAAA;EACA,qBAAA;AAdF;;AAiBA;EACE,iBArC+B;EAsC/B,iBAtC+B;EAuC/B,aAvC+B;EA2C/B,WAAA;EAIA,mBAAA;AApBF;AAsBE;EACE,iBAAA;EACA,aAAA;EACA,sBAAA;EACA,iBAAA;EACA,2BAAA;EACA,uBAAA;AApBJ;AAwBI;EACE,gBAAA;EAEA,qBAAA;EACA,kBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,sBAAA;EACA,uBAAA;AAvBN;AA6BI;EACE,gBAAA;EACA,gBAAA;EACA,aAAA;EACA,mBAAA;EACA,iBAAA;EACA,2BAAA;EACA,uBAAA;AA3BN;AA6BM;EACE,gBAAA;EACA,gBAAA;EACA,YAAA;EACA,eAAA;EACA,eAAA;EACA,YAAA;EACA,eAAA;EAEA,0CAAA;EACA,kBAAA;EACA,kBAAA;EACA,qBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;AA5BR;AAqCM;EACE,gBAAA;EACA,gBAAA;EACA,eAAA;EACA,eAAA;EACA,eAAA;EACA,kBAAA;EACA,iBAAA;EAEA,qBAAA;EACA,kBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,qBAAA;EACA,wBAAA;AApCR;AA2CI;EACE,gBAAA;EAEA,qBAAA;EACA,kBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,sBAAA;EACA,eAAA;EACA,mBAAA;AA1CN;AA6CI;EACE,gBAAA;EAEA,qBAAA;EACA,kBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,sBAAA;EACA,gBAAA;AA5CN;AAiDI;EACE,WAAA;AA/CN","sourcesContent":["$container-width: 332px;\n$container-height: 236px;\n$create-dialog-container-width: 332px;\n$create-dialog-container-height: 180px;\n\n.edit-container {\n  //border: 1px solid blue;\n  min-height: $container-height;\n  max-height: $container-height;\n  height: $container-height;\n  //min-width: $container-width;\n  //max-width: $container-width;\n  //width: $container-width;\n  width: 100%;\n\n  display: flex;\n  flex-direction: column;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n}\n\n.edit-btn-container {\n  //border: 3px solid black;\n  min-height: 34px;\n  max-height: 34px;\n  height: 34px;\n  //min-width: $container-width;\n  //max-width: $container-width;\n  //width: $container-width;\n  width: 100%;\n\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: flex-end;\n  align-items: flex-end;\n}\n\n.edit-dialog-container {\n  min-height: $create-dialog-container-height;\n  max-height: $create-dialog-container-height;\n  height: $create-dialog-container-height;\n  //min-width: $create-dialog-container-width;\n  //max-width: $create-dialog-container-width;\n  //width: $create-dialog-container-width;\n  width: 100%;\n\n  //border: 3px solid green;\n\n  margin-bottom: 24px;\n\n  &--wrapper {\n    min-height: 180px;\n    display: flex;\n    flex-direction: column;\n    flex-wrap: nowrap;\n    justify-content: flex-start;\n    align-items: flex-start;\n\n    //border: 1px solid blue;\n\n    &__inf {\n      min-height: 20px;\n\n      font-family: 'Roboto';\n      font-style: normal;\n      font-weight: 400;\n      font-size: 14px;\n      line-height: 20px;\n      letter-spacing: 0.25px;\n      color: var(--main-text);\n      // color: var(--color-background);\n\n      //border: 1px solid orange;\n    }\n\n    &__icon-container {\n      min-height: 56px;\n      max-height: 56px;\n      display: flex;\n      flex-direction: row;\n      flex-wrap: nowrap;\n      justify-content: flex-start;\n      align-items: flex-start;\n\n      &__icon {\n        min-height: 56px;\n        max-height: 56px;\n        height: 56px;\n        min-width: 56px;\n        max-width: 56px;\n        height: 56px;\n        margin-top: 8px;\n\n        background-color: var(--disabled-elements);\n        border-radius: 50%;\n        text-align: center;\n        align-content: center;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        //border: 1px solid red;\n\n        &__content {\n          // margin: 10px;\n        }\n      }\n\n      &__upload {\n        min-height: 32px;\n        max-height: 32px;\n        min-width: 80px;\n        max-width: 80px;\n        margin-top: 8px;\n        padding-left: 16px;\n        padding-top: 20px;\n\n        font-family: 'Roboto';\n        font-style: normal;\n        font-weight: 700;\n        font-size: 14px;\n        line-height: 16px;\n        letter-spacing: 0.4px;\n        color: var(--color-icon);\n        //cursor: pointer;\n\n        // border: 1px solid green;\n      }\n    }\n\n    &__upload-error {\n      min-height: 20px;\n\n      font-family: 'Roboto';\n      font-style: normal;\n      font-weight: 400;\n      font-size: 14px;\n      line-height: 20px;\n      letter-spacing: 0.25px;\n      margin-top: 5px;\n      color: var(--error);\n    }\n\n    &__dialog-name-inf {\n      min-height: 20px;\n\n      font-family: 'Roboto';\n      font-style: normal;\n      font-weight: 400;\n      font-size: 14px;\n      line-height: 20px;\n      letter-spacing: 0.25px;\n      margin-top: 24px;\n\n      //border: 1px solid orange;\n    }\n\n    &__text-field {\n      width: 100%;\n    }\n  }\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -3805,7 +3778,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".desktop-layout-main-container {\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  margin: 0 auto;\n}\n.desktop-layout-main-container__item-left {\n  border-bottom: 1px solid var(--divider);\n  flex: 1 1 320px;\n  height: 100%;\n}\n.desktop-layout-main-container__item-right {\n  border: 1px solid var(--divider);\n  flex: 1 1 320px;\n  width: 100%;\n  height: 100%;\n}\n.desktop-layout-main-container__item-center {\n  border-style: solid;\n  border-color: var(--divider, #e7efff);\n  border-width: 1px 1px 1px 0;\n  height: 100%;\n  width: 100%;\n}\n\n.dialog-leave-container {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  margin-top: 48px;\n  gap: 8px;\n}\n\n.empty-chat-placeholder {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n}\n\n.empty-chat-history-placeholder {\n  justify-content: center;\n  height: 100%;\n}", "",{"version":3,"sources":["webpack://./src/Presentation/layouts/Desktop/DesktopLayout.scss"],"names":[],"mappings":"AAMA;EAME,aAAA;EACA,qBAAA;EACA,2BAAA;EACA,uBAAA;EACA,cAAA;AAVF;AAYE;EACE,uCAAA;EACA,eAAA;EAEA,YAAA;AAXJ;AAaE;EACE,gCAAA;EACA,eAAA;EAEA,WAAA;EACA,YAAA;AAZJ;AAcE;EAEE,mBAAA;EACA,qCAAA;EACA,2BAAA;EAEA,YAAA;EACA,WAAA;AAdJ;;AAmBA;EACE,aAAA;EACA,mBAAA;EACA,yBAAA;EACA,gBAAA;EACA,QAAA;AAhBF;;AAmBA;EACE,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,YAAA;AAhBF;;AAmBA;EACE,uBAAA;EACA,YAAA;AAhBF","sourcesContent":["$desktop-main-container-max-width: 1360px;\n$desktop-main-container-min-height: 800px;\n$desktop-main-container-item-width: 320px;\n$desktop-main-container-item-center-width: 720px;\n// $desktop-main-container-item-center-width: 1040px;\n\n.desktop-layout-main-container{\n  // border: 1px solid var(--color-divider, #e7efff);\n   // border: 2px solid #6c38cc;\n  // min-height: $desktop-main-container-min-height;\n  // max-width: $desktop-main-container-max-width;\n  // height: calc(100vh - 128px);\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  margin: 0 auto;\n\n  &__item-left {\n    border-bottom: 1px solid var(--divider);\n    flex: 1 1 $desktop-main-container-item-width;\n    // max-width: $desktop-main-container-item-width\n    height: 100%;\n  }\n  &__item-right {\n    border: 1px solid  var(--divider);\n    flex: 1 1 $desktop-main-container-item-width;\n    // max-width: $desktop-main-container-item-width\n    width: 100%;\n    height: 100%;\n  }\n  &__item-center {\n    //border: 1px solid  var(--divider);\n    border-style: solid;\n    border-color: var(--divider, #e7efff);\n    border-width: 1px 1px 1px 0;\n   // flex: 3 2 $desktop-main-container-item-center-width;\n    height: 100%;\n    width: 100%;\n   //  min-width: 320px;\n  }\n}\n\n.dialog-leave-container{\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  margin-top: 48px;\n  gap: 8px;\n}\n\n.empty-chat-placeholder{\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n}\n\n.empty-chat-history-placeholder {\n  justify-content: center;\n  height: 100%;\n}\n"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, ".desktop-layout-main-container {\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  margin: 0 auto;\n}\n.desktop-layout-main-container__item-left {\n  border-bottom: 1px solid var(--divider);\n  flex: 1 1 320px;\n  height: 100%;\n}\n.desktop-layout-main-container__item-right {\n  border: 1px solid var(--divider);\n  flex: 1 0 320px;\n  width: 100%;\n  height: 100%;\n}\n.desktop-layout-main-container__item-center {\n  border-style: solid;\n  border-color: var(--divider, #e7efff);\n  border-width: 1px 1px 1px 0;\n  height: 100%;\n  width: 100%;\n}\n\n.dialog-leave-container {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  margin-top: 48px;\n  gap: 8px;\n}\n\n.empty-chat-placeholder {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n}\n\n.empty-chat-history-placeholder {\n  justify-content: center;\n  height: 100%;\n}", "",{"version":3,"sources":["webpack://./src/Presentation/layouts/Desktop/DesktopLayout.scss"],"names":[],"mappings":"AAMA;EAME,aAAA;EACA,qBAAA;EACA,2BAAA;EACA,uBAAA;EACA,cAAA;AAVF;AAYE;EACE,uCAAA;EACA,eAAA;EAEA,YAAA;AAXJ;AAaE;EACE,gCAAA;EACA,eAAA;EAEA,WAAA;EACA,YAAA;AAZJ;AAcE;EAEE,mBAAA;EACA,qCAAA;EACA,2BAAA;EAEA,YAAA;EACA,WAAA;AAdJ;;AAmBA;EACE,aAAA;EACA,mBAAA;EACA,yBAAA;EACA,gBAAA;EACA,QAAA;AAhBF;;AAmBA;EACE,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,YAAA;AAhBF;;AAmBA;EACE,uBAAA;EACA,YAAA;AAhBF","sourcesContent":["$desktop-main-container-max-width: 1360px;\n$desktop-main-container-min-height: 800px;\n$desktop-main-container-item-width: 320px;\n$desktop-main-container-item-center-width: 720px;\n// $desktop-main-container-item-center-width: 1040px;\n\n.desktop-layout-main-container {\n  // border: 1px solid var(--color-divider, #e7efff);\n  // border: 2px solid #6c38cc;\n  // min-height: $desktop-main-container-min-height;\n  // max-width: $desktop-main-container-max-width;\n  // height: calc(100vh - 128px);\n  display: flex;\n  flex-flow: row nowrap;\n  justify-content: flex-start;\n  align-items: flex-start;\n  margin: 0 auto;\n\n  &__item-left {\n    border-bottom: 1px solid var(--divider);\n    flex: 1 1 $desktop-main-container-item-width;\n    // max-width: $desktop-main-container-item-width\n    height: 100%;\n  }\n  &__item-right {\n    border: 1px solid var(--divider);\n    flex: 1 0 $desktop-main-container-item-width;\n    // max-width: $desktop-main-container-item-width\n    width: 100%;\n    height: 100%;\n  }\n  &__item-center {\n    //border: 1px solid  var(--divider);\n    border-style: solid;\n    border-color: var(--divider, #e7efff);\n    border-width: 1px 1px 1px 0;\n    // flex: 3 2 $desktop-main-container-item-center-width;\n    height: 100%;\n    width: 100%;\n    //  min-width: 320px;\n  }\n}\n\n.dialog-leave-container {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  margin-top: 48px;\n  gap: 8px;\n}\n\n.empty-chat-placeholder {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  height: 100%;\n}\n\n.empty-chat-history-placeholder {\n  justify-content: center;\n  height: 100%;\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -4102,7 +4075,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".audio-player {\n  display: flex;\n  gap: 5px;\n  flex-direction: row;\n  align-items: center;\n}\n\n.audio-body {\n  padding: 5px;\n  border-radius: 4px;\n  display: none;\n  width: var(--max-width-audio-message);\n}\n.audio-body__controls {\n  display: flex;\n  flex-flow: row;\n  align-items: center;\n  gap: 5px;\n  width: 24px;\n  height: 24px;\n}\n.audio-body__controls--color {\n  fill: var(--main-elements);\n}\n\n.equalizer {\n  display: flex;\n  flex-direction: row;\n  gap: 2px;\n  align-items: flex-end;\n  justify-content: flex-start;\n  position: relative;\n}\n.equalizer__rectangle {\n  background: var(--main-elements, #636d78);\n  flex-shrink: 0;\n  width: 2px;\n  position: relative;\n}\n\n.audio-bubble-background__incoming {\n  background: var(--incoming-background, #e4e6e8);\n  border-radius: 22px 22px 22px 0px;\n  padding: 8px 12px 8px 12px;\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  align-items: flex-start;\n  justify-content: flex-start;\n  flex-shrink: 0;\n  position: relative;\n}\n.audio-bubble-background__outgoing {\n  background: var(--outgoing-background, #E7EFFF);\n  border-radius: 22px 22px 0px 22px;\n  padding: 8px 12px 8px 12px;\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  align-items: flex-start;\n  justify-content: flex-start;\n  flex-shrink: 0;\n  position: relative;\n}", "",{"version":3,"sources":["webpack://./src/Presentation/ui-components/Message/Bubble/AudioBubble/AudioBubble.scss"],"names":[],"mappings":"AAAA;EACE,aAAA;EACA,QAAA;EACA,mBAAA;EACA,mBAAA;AACF;;AACA;EACE,YAAA;EACA,kBAAA;EACA,aAAA;EACA,qCAAA;AAEF;AAAE;EACE,aAAA;EACA,cAAA;EACA,mBAAA;EACA,QAAA;EACA,WAAA;EACA,YAAA;AAEJ;AAAI;EACE,0BAAA;AAEN;;AAGA;EACE,aAAA;EACA,mBAAA;EACA,QAAA;EACA,qBAAA;EACA,2BAAA;EACA,kBAAA;AAAF;AAEE;EACE,yCAAA;EACA,cAAA;EACA,UAAA;EACA,kBAAA;AAAJ;;AAME;EACE,+CAAA;EACA,iCAAA;EACA,0BAAA;EACA,aAAA;EACA,mBAAA;EACA,SAAA;EACA,uBAAA;EACA,2BAAA;EACA,cAAA;EACA,kBAAA;AAHJ;AAME;EACE,+CAAA;EACA,iCAAA;EACA,0BAAA;EACA,aAAA;EACA,mBAAA;EACA,SAAA;EACA,uBAAA;EACA,2BAAA;EACA,cAAA;EACA,kBAAA;AAJJ","sourcesContent":[".audio-player {\n  display: flex;\n  gap: 5px;\n  flex-direction: row;\n  align-items: center;\n}\n.audio-body{\n  padding: 5px;\n  border-radius: 4px;\n  display: none;\n  width: var(--max-width-audio-message);\n\n  &__controls {\n    display: flex;\n    flex-flow: row;\n    align-items: center;\n    gap: 5px;\n    width: 24px;\n    height: 24px;\n\n    &--color{\n      fill: var(--main-elements)\n    }\n  }\n}\n\n.equalizer {\n  display: flex;\n  flex-direction: row;\n  gap: 2px;\n  align-items: flex-end;\n  justify-content: flex-start;\n  position: relative;\n\n  &__rectangle {\n    background: var(--main-elements, #636d78);\n    flex-shrink: 0;\n    width: 2px;\n    position: relative;\n  }\n}\n\n.audio-bubble-background {\n\n  &__incoming {\n    background: var(--incoming-background, #e4e6e8);\n    border-radius: 22px 22px 22px 0px;\n    padding: 8px 12px 8px 12px;\n    display: flex;\n    flex-direction: row;\n    gap: 10px;\n    align-items: flex-start;\n    justify-content: flex-start;\n    flex-shrink: 0;\n    position: relative;\n  }\n\n  &__outgoing {\n    background: var(--outgoing-background, #E7EFFF);\n    border-radius: 22px 22px 0px 22px;\n    padding: 8px 12px 8px 12px;\n    display: flex;\n    flex-direction: row;\n    gap: 10px;\n    align-items: flex-start;\n    justify-content: flex-start;\n    flex-shrink: 0;\n    position: relative;\n  }\n\n}\n"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, ".audio-player {\n  display: flex;\n  gap: 5px;\n  flex-direction: row;\n  align-items: center;\n}\n.audio-player__equalizer-time {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.audio-body {\n  padding: 5px;\n  border-radius: 4px;\n  display: none;\n  width: var(--max-width-audio-message);\n}\n.audio-body__controls {\n  display: flex;\n  flex-flow: row;\n  align-items: center;\n  gap: 5px;\n  width: 24px;\n  height: 24px;\n}\n.audio-body__controls--color {\n  fill: var(--main-elements);\n}\n\n.equalizer {\n  display: flex;\n  flex-direction: row;\n  gap: 2px;\n  align-items: flex-end;\n  justify-content: flex-start;\n  position: relative;\n}\n.equalizer__rectangle {\n  background: var(--main-elements, #636d78);\n  flex-shrink: 0;\n  width: 2px;\n  position: relative;\n}\n\n.time-play {\n  color: var(--secondary-text, #636d78);\n  text-align: left;\n  font: var(--label-label-small);\n  height: 16px;\n}\n\n.audio-bubble-background__incoming {\n  background: var(--incoming-background, #e4e6e8);\n  border-radius: 22px 22px 22px 0px;\n  padding: 8px 12px 8px 12px;\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  align-items: flex-start;\n  justify-content: flex-start;\n  flex-shrink: 0;\n  position: relative;\n}\n.audio-bubble-background__outgoing {\n  background: var(--outgoing-background, #E7EFFF);\n  border-radius: 22px 22px 0px 22px;\n  padding: 8px 12px 8px 12px;\n  display: flex;\n  flex-direction: row;\n  gap: 10px;\n  align-items: flex-start;\n  justify-content: flex-start;\n  flex-shrink: 0;\n  position: relative;\n}", "",{"version":3,"sources":["webpack://./src/Presentation/ui-components/Message/Bubble/AudioBubble/AudioBubble.scss"],"names":[],"mappings":"AAAA;EACE,aAAA;EACA,QAAA;EACA,mBAAA;EACA,mBAAA;AACF;AACE;EACE,aAAA;EACA,sBAAA;EACA,QAAA;AACJ;;AAEA;EACE,YAAA;EACA,kBAAA;EACA,aAAA;EACA,qCAAA;AACF;AACE;EACE,aAAA;EACA,cAAA;EACA,mBAAA;EACA,QAAA;EACA,WAAA;EACA,YAAA;AACJ;AACI;EACE,0BAAA;AACN;;AAIA;EACE,aAAA;EACA,mBAAA;EACA,QAAA;EACA,qBAAA;EACA,2BAAA;EACA,kBAAA;AADF;AAGE;EACE,yCAAA;EACA,cAAA;EACA,UAAA;EACA,kBAAA;AADJ;;AAKA;EACE,qCAAA;EACA,gBAAA;EACA,8BAAA;EACA,YAAA;AAFF;;AAOE;EACE,+CAAA;EACA,iCAAA;EACA,0BAAA;EACA,aAAA;EACA,mBAAA;EACA,SAAA;EACA,uBAAA;EACA,2BAAA;EACA,cAAA;EACA,kBAAA;AAJJ;AAOE;EACE,+CAAA;EACA,iCAAA;EACA,0BAAA;EACA,aAAA;EACA,mBAAA;EACA,SAAA;EACA,uBAAA;EACA,2BAAA;EACA,cAAA;EACA,kBAAA;AALJ","sourcesContent":[".audio-player {\n  display: flex;\n  gap: 5px;\n  flex-direction: row;\n  align-items: center;\n\n  &__equalizer-time {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n  }\n}\n.audio-body{\n  padding: 5px;\n  border-radius: 4px;\n  display: none;\n  width: var(--max-width-audio-message);\n\n  &__controls {\n    display: flex;\n    flex-flow: row;\n    align-items: center;\n    gap: 5px;\n    width: 24px;\n    height: 24px;\n\n    &--color{\n      fill: var(--main-elements)\n    }\n  }\n}\n\n.equalizer {\n  display: flex;\n  flex-direction: row;\n  gap: 2px;\n  align-items: flex-end;\n  justify-content: flex-start;\n  position: relative;\n\n  &__rectangle {\n    background: var(--main-elements, #636d78);\n    flex-shrink: 0;\n    width: 2px;\n    position: relative;\n  }\n}\n\n.time-play {\n  color: var(--secondary-text, #636d78);\n  text-align: left;\n  font: var(--label-label-small);\n  height: 16px;\n}\n\n.audio-bubble-background {\n\n  &__incoming {\n    background: var(--incoming-background, #e4e6e8);\n    border-radius: 22px 22px 22px 0px;\n    padding: 8px 12px 8px 12px;\n    display: flex;\n    flex-direction: row;\n    gap: 10px;\n    align-items: flex-start;\n    justify-content: flex-start;\n    flex-shrink: 0;\n    position: relative;\n  }\n\n  &__outgoing {\n    background: var(--outgoing-background, #E7EFFF);\n    border-radius: 22px 22px 0px 22px;\n    padding: 8px 12px 8px 12px;\n    display: flex;\n    flex-direction: row;\n    gap: 10px;\n    align-items: flex-start;\n    justify-content: flex-start;\n    flex-shrink: 0;\n    position: relative;\n  }\n\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -4210,7 +4183,7 @@ __webpack_require__.r(__webpack_exports__);
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".message-attachment-video-body {\n  max-height: 130px;\n  max-width: var(--max-width-audio-message);\n  width: var(--max-width-audio-message);\n  padding: 0;\n  border-radius: 4px;\n}\n\n.message-attachment-video {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-flow: column;\n  max-width: var(--max-width-audio-message);\n  width: var(--max-width-audio-message);\n  max-height: 160px;\n}", "",{"version":3,"sources":["webpack://./src/Presentation/ui-components/Message/Bubble/VideoBubble/VideoBubble.scss"],"names":[],"mappings":"AAAA;EACE,iBAAA;EACA,yCAAA;EACA,qCAAA;EACA,UAAA;EACA,kBAAA;AACF;;AAEA;EACE,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,iBAAA;EAEA,yCAAA;EACA,qCAAA;EACA,iBAAA;AAAF","sourcesContent":[".message-attachment-video-body{\n  max-height: 130px;\n  max-width: var(--max-width-audio-message);\n  width: var(--max-width-audio-message);\n  padding: 0;\n  border-radius: 4px;\n}\n\n.message-attachment-video {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-flow: column;\n  //max-width: 300px;\n  max-width: var(--max-width-audio-message);\n  width: var(--max-width-audio-message);\n  max-height: 160px;\n}\n"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, ".message-attachment-video-body {\n  max-height: 130px;\n  max-width: var(--max-width-audio-message);\n  width: var(--max-width-audio-message);\n  padding: 0;\n  border-radius: 4px;\n}\n.message-attachment-video-body__link {\n  color: var(--secondary-text, #636d78);\n  text-align: left;\n  font: var(--label-label-small);\n  height: 16px;\n}\n\n.message-attachment-video {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-flow: column;\n  max-width: var(--max-width-audio-message);\n  width: var(--max-width-audio-message);\n  max-height: 160px;\n}", "",{"version":3,"sources":["webpack://./src/Presentation/ui-components/Message/Bubble/VideoBubble/VideoBubble.scss"],"names":[],"mappings":"AAAA;EACE,iBAAA;EACA,yCAAA;EACA,qCAAA;EACA,UAAA;EACA,kBAAA;AACF;AACE;EACE,qCAAA;EACA,gBAAA;EACA,8BAAA;EACA,YAAA;AACJ;;AAGA;EACE,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,iBAAA;EAEA,yCAAA;EACA,qCAAA;EACA,iBAAA;AADF","sourcesContent":[".message-attachment-video-body{\n  max-height: 130px;\n  max-width: var(--max-width-audio-message);\n  width: var(--max-width-audio-message);\n  padding: 0;\n  border-radius: 4px;\n\n  &__link {\n    color: var(--secondary-text, #636d78);\n    text-align: left;\n    font: var(--label-label-small);\n    height: 16px;\n  }\n}\n\n.message-attachment-video {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-flow: column;\n  //max-width: 300px;\n  max-width: var(--max-width-audio-message);\n  width: var(--max-width-audio-message);\n  max-height: 160px;\n}\n\n\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -4644,7 +4617,7 @@ var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBP
 ___CSS_LOADER_EXPORT___.push([module.id, "@import url(https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400;0,500;0,700;1,700&display=swap);"]);
 ___CSS_LOADER_EXPORT___.push([module.id, "@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap);"]);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, "@charset \"UTF-8\";\n/*\n@font-face {\n  font-family: \"Roboto-Regular\";\n  src: url(\"../fonts/Roboto-Regular.eot\");\n  src: local(\"☺\"), url(\"../fonts/Roboto-Regular.woff\") format(\"woff\"),\n  url(\"../fonts/Roboto-Regular.ttf\") format(\"truetype\");\n  font-weight: normal;\n  font-style: normal;\n}\n\n@font-face {\n  font-family: \"Roboto-Medium\";\n  src: url(\"../fonts/Roboto-Medium.eot\");\n  src: local(\"☺\"), url(\"../fonts/Roboto-Medium.woff\") format(\"woff\"),\n  url(\"../fonts/Roboto-Medium.ttf\") format(\"truetype\");\n  font-weight: normal;\n  font-style: normal;\n}\n\n@font-face {\n  font-family: \"Roboto-Bold\";\n  src: url(\"../fonts/Roboto-Bold.eot\");\n  src: local(\"☺\"), url(\"../fonts/Roboto-Bold.woff\") format(\"woff\"),\n  url(\"../fonts/Roboto-Bold.ttf\") format(\"truetype\");\n  font-weight: normal;\n  font-style: normal;\n}\n*/\n:root {\n  --primary: #3978FC;\n  --color-background: #FFFFFF;\n  --color-background-modal: #C4D7FE;\n  --color-background-overlay: #0B121B;\n  --color-divider: #E7EFFF;\n  --color-font: #0B121B;\n  --color-icon: #3978FC;\n  --color-media-icon: #FFFFFF;\n  --color-default-hover: #2C65FB;\n  --color-default-active: #1748FA;\n  --color-background-info: #C4D7FE;\n  --color-border-active: #9CBCFE;\n  --tertiary-elements: #636D78;\n  --main-elements: #3978FC;\n  --toast-color: #131D28;\n  --secondary-elements: #202F3E;\n  --input-elements: #202F3E;\n  --disabled-elements: #BCC1C5;\n  --field-border: #90979F;\n  --main-text: #0B121B;\n  --secondary-text: #636D78;\n  --caption: #90979F;\n  --main-background: #FFFFFF;\n  --secondary-background: #FFFFFF;\n  --secondary-background-modal: rgba(19, 29, 40, 0.8);\n  --incoming-background: #E4E6E8;\n  --outgoing-background: #E7EFFF;\n  --dropdown-background: #FFFFFF;\n  --chat-input: #F7F9FF;\n  --divider: #E7EFFF;\n  --error: #FF3B30;\n  --error-secondary: #FF9D98;\n  --hightlight: #FFFDC1;\n}\n\nhtml[data-theme=dark] {\n  --primary: #3978FC;\n  --color-background: #0B121B;\n  --color-background-modal: #131D28;\n  --color-background-overlay: #0B121B;\n  --color-divider: #414E5B;\n  --color-font: #FFFFFF;\n  --color-icon: #74A1FD;\n  --color-media-icon: #FFFFFF;\n  --color-default-hover: #182330;\n  --color-default-active: #0B121B;\n  --color-background-info: #3978FC;\n  --color-border-active: #90979F;\n  --tertiary-elements: rgba(144, 151, 159, 0.8);\n  --main-elements: #74A1FD;\n  --secondary-elements: #FFFFFF;\n  --input-elements: #90979F;\n  --disabled-elements: #636D78;\n  --field-border: #90979F;\n  --main-text: #FFFFFF;\n  --secondary-text: #90979F;\n  --caption: #BCC1C5;\n  --main-background: #202F3E;\n  --secondary-background: #131D28;\n  --incoming-background: #414E5B;\n  --outgoing-background: #3978FC;\n  --dropdown-background: #414E5B;\n  --chat-input: #131D28;\n  --divider: #414E5B;\n  --error: #FF766E;\n  --error-secondary: #FFC4C1;\n  --hightlight: #FFFDC1;\n}\n\n/* Fonts */\n:root {\n  --title-title-large: 500 20px/24px \"Roboto\", sans-serif;\n  --title-title-medium: 500 16px/24px \"Roboto\", sans-serif;\n  --title-title-small: 500 14px/20px \"Roboto\", sans-serif;\n  --label-label-large: 500 14px/20px \"Roboto\", sans-serif;\n  --label-label-medium: 500 12px/16px \"Roboto\", sans-serif;\n  --label-label-small: 500 11px/16px \"Roboto\", sans-serif;\n  --body-body-large: 400 16px/24px \"Roboto\", sans-serif;\n  --body-body-medium: 400 14px/20px \"Roboto\", sans-serif;\n  --body-body-small: 400 12px/16px \"Roboto\", sans-serif;\n  --button-fab: 500 14px/16px \"Roboto\", sans-serif;\n  --button-default: 700 14px/16px \"Roboto\", sans-serif;\n  --ui-kit-header: 500 48px \"Roboto Mono\", sans-serif;\n  --ui-kit-title: 500 32px \"Roboto Mono\", sans-serif;\n  --ui-kit-body: 400 17px \"Roboto Mono\", sans-serif;\n  /* Width */\n  --max-width-message-bubble: 480px;\n  --max-width-message-view-container: 680px;\n  --max-width-image-message: 240px;\n  --max-width-audio-message: 300px;\n  --max-width-dialog-list: 320px;\n  --min-width-screen-desktop: 980px;\n}\n\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: \"Roboto\";\n  color: var(--main-text);\n  background-color: var(--main-background);\n  overflow: hidden !important;\n  scrollbar-width: none !important;\n}\n\n/* Media-query for mobile devices */\n@media only screen and (max-width: 980px) {\n  :root {\n    --max-width-message-view-container: 345px;\n    --max-width-message-bubble: 170px;\n    --max-width-image-message: 150px;\n    --max-width-audio-message: 150px;\n    --max-width-dialog-list: 100%;\n  }\n}", "",{"version":3,"sources":["webpack://./src/index.scss","webpack://./src/Presentation/themes/styles/_fonts.scss","webpack://./src/Presentation/themes/styles/_theme_light.scss","webpack://./src/Presentation/themes/styles/_theme_dark.scss","webpack://./src/Presentation/themes/styles/_variables.scss"],"names":[],"mappings":"AAAA,gBAAgB;ACIhB;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACFA;EACE,kBAAA;EACA,2BAAA;EACA,iCAAA;EACA,mCAAA;EACA,wBAAA;EACA,qBAAA;EACA,qBAAA;EACA,2BAAA;EACA,8BAAA;EACA,+BAAA;EAEA,gCAAA;EACA,8BAAA;EACA,4BAAA;EACA,wBAAA;EACA,sBAAA;EACA,6BAAA;EACA,yBAAA;EACA,4BAAA;EACA,uBAAA;EACA,oBAAA;EACA,yBAAA;EACA,kBAAA;EACA,0BAAA;EACA,+BAAA;EACA,mDAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,qBAAA;EACA,kBAAA;EACA,gBAAA;EACA,0BAAA;EACA,qBAAA;AF6BF;;AG9DA;EACE,kBAAA;EACA,2BAAA;EACA,iCAAA;EACA,mCAAA;EACA,wBAAA;EACA,qBAAA;EACA,qBAAA;EACA,2BAAA;EACA,8BAAA;EACA,+BAAA;EAEA,gCAAA;EACA,8BAAA;EACA,6CAAA;EACA,wBAAA;EACA,6BAAA;EACA,yBAAA;EACA,4BAAA;EACA,uBAAA;EACA,oBAAA;EACA,yBAAA;EACA,kBAAA;EACA,0BAAA;EACA,+BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,qBAAA;EACA,kBAAA;EACA,gBAAA;EACA,0BAAA;EACA,qBAAA;AHgEF;;AIzEA,UAAA;AACA;EACE,uDAAA;EACA,wDAAA;EACA,uDAAA;EACA,uDAAA;EACA,wDAAA;EACA,uDAAA;EACA,qDAAA;EACA,sDAAA;EACA,qDAAA;EACA,gDAAA;EACA,oDAAA;EACA,mDAAA;EACA,kDAAA;EACA,iDAAA;EAEF,UAAA;EACE,iCAAA;EACA,yCAAA;EACA,gCAAA;EACA,gCAAA;EACA,8BAAA;EACA,iCAAA;AJ2EF;;AAvHA;EACE,sBAAA;AA0HF;;AAvHA;EACE,qBAAA;EACA,uBAAA;EACA,wCAAA;EACA,2BAAA;EACA,gCAAA;AA0HF;;AAvHA,mCAAA;AACA;EACE;IACE,yCAAA;IACA,iCAAA;IACA,gCAAA;IACA,gCAAA;IACA,6BAAA;EA0HF;AACF","sourcesContent":["@import 'Presentation/themes/styles/fonts';\n@import 'Presentation/themes/styles/theme_colors_scheme';\n@import 'Presentation/themes/styles/variables';\n@import 'Presentation/themes/styles/mixins';\n\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: 'Roboto';\n  color: var(--main-text);\n  background-color: var(--main-background);\n  overflow: hidden !important;\n  scrollbar-width: none !important;\n}\n\n/* Media-query for mobile devices */\n@media only screen and (max-width: #{$qb-max-width-screen}) {\n  :root {\n    --max-width-message-view-container: #{$qb-max-width-message-view-container-mobile};\n    --max-width-message-bubble: #{$qb-max-width-message-bubble-mobile};\n    --max-width-image-message: #{$qb-max-width-image-message-mobile};\n    --max-width-audio-message: #{$qb-max-width-audio-message-mobile};\n    --max-width-dialog-list: #{$qb-max-width-dialog-list-mobile};\n  }\n}\n","@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400;0,500;0,700;1,700&display=swap');\n////font-family: 'Ubuntu', sans-serif;\n@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');\n////font-family: 'Roboto', sans-serif;\n/*\n@font-face {\n  font-family: \"Roboto-Regular\";\n  src: url(\"../fonts/Roboto-Regular.eot\");\n  src: local(\"☺\"), url(\"../fonts/Roboto-Regular.woff\") format(\"woff\"),\n  url(\"../fonts/Roboto-Regular.ttf\") format(\"truetype\");\n  font-weight: normal;\n  font-style: normal;\n}\n\n@font-face {\n  font-family: \"Roboto-Medium\";\n  src: url(\"../fonts/Roboto-Medium.eot\");\n  src: local(\"☺\"), url(\"../fonts/Roboto-Medium.woff\") format(\"woff\"),\n  url(\"../fonts/Roboto-Medium.ttf\") format(\"truetype\");\n  font-weight: normal;\n  font-style: normal;\n}\n\n@font-face {\n  font-family: \"Roboto-Bold\";\n  src: url(\"../fonts/Roboto-Bold.eot\");\n  src: local(\"☺\"), url(\"../fonts/Roboto-Bold.woff\") format(\"woff\"),\n  url(\"../fonts/Roboto-Bold.ttf\") format(\"truetype\");\n  font-weight: normal;\n  font-style: normal;\n}\n*/\n","@import 'theme_colors_scheme';\n\n:root {\n  --primary: #{$primary-500};\n  --color-background: #{$primary-a-100};\n  --color-background-modal: #{$primary-100};\n  --color-background-overlay: #{$secondary-900};\n  --color-divider: #{$primary-50};\n  --color-font: #{$secondary-900};\n  --color-icon: #{$primary-500};\n  --color-media-icon: #{$primary-a-100};\n  --color-default-hover: #{$primary-700};\n  --color-default-active: #{$primary-900};\n\n  --color-background-info: #{$primary-100};\n  --color-border-active: #{$primary-200};\n  --tertiary-elements: #{$secondary-300};\n  --main-elements: #{$primary-500};\n  --toast-color: #{$secondary-800};\n  --secondary-elements: #{$secondary-500};\n  --input-elements: #{$secondary-500};\n  --disabled-elements: #{$secondary-100};\n  --field-border: #{$secondary-200};\n  --main-text: #{$secondary-900};\n  --secondary-text: #{$secondary-300};\n  --caption: #{$secondary-200};\n  --main-background: #{$primary-a-100};\n  --secondary-background: #{$primary-a-100}; // #{$primary-50};\n  --secondary-background-modal: #{$background-overlay-light};\n  --incoming-background: #{$secondary-50};\n  --outgoing-background: #{$primary-50};\n  --dropdown-background: #{$primary-a-100};\n  --chat-input: #{$primary-a-200};\n  --divider: #{$primary-50};\n  --error: #{$error-500};\n  --error-secondary: #{$error-200};\n  --hightlight: #{$highlight};\n}\n","@import 'theme_colors_scheme';\n// https://sass-lang.com/documentation/breaking-changes/css-vars\n\nhtml[data-theme='dark'] {\n  --primary: #{$primary-500};\n  --color-background: #{$secondary-900};\n  --color-background-modal: #{$secondary-800};\n  --color-background-overlay: #{$secondary-900};\n  --color-divider: #{$secondary-400};\n  --color-font: #{$primary-a-100};\n  --color-icon: #{$primary-300};\n  --color-media-icon: #{$primary-a-100};\n  --color-default-hover: #{$secondary-700};\n  --color-default-active: #{$secondary-900};\n\n  --color-background-info: #{$primary-500};\n  --color-border-active: #{$secondary-200};\n  --tertiary-elements: #{$background-overlay-dark};\n  --main-elements: #{$primary-300};\n  --secondary-elements: #{$primary-a-100};\n  --input-elements: #{$secondary-200};\n  --disabled-elements: #{$secondary-300};\n  --field-border: #{$secondary-200};\n  --main-text: #{$primary-a-100};\n  --secondary-text: #{$secondary-200};\n  --caption: #{$secondary-100};\n  --main-background: #{$secondary-500};\n  --secondary-background: #{$secondary-800};\n  --incoming-background: #{$secondary-400};\n  --outgoing-background: #{$primary-500};\n  --dropdown-background: #{$secondary-400};\n  --chat-input: #{$secondary-800};\n  --divider: #{$secondary-400};\n  --error: #{$error-300};\n  --error-secondary: #{$error-100};\n  --hightlight: #{$highlight};\n}\n","@import \"theme_light\";\n@import \"theme_dark\";\n\n$qb-min-width-screen-desktop: 980px;\n\n$qb-max-width-screen: 980px;\n\n$qb-max-width-message-view-container-desktop: 680px;\n$qb-max-width-message-view-container-mobile: 345px;\n\n$qb-max-width-message-bubble-desktop: 480px;\n$qb-max-width-message-bubble-mobile: 170px;\n\n$qb-max-width-image-message-desktop: 240px;\n$qb-max-width-image-message-mobile: 150px;\n\n$qb-max-width-audio-message-desktop: 300px;\n$qb-max-width-audio-message-mobile: 150px;\n\n$qb-max-width-dialog-list-desktop: 320px;\n$qb-max-width-dialog-list-mobile: 100%;\n\n$create-dialog-container-width: 380px;\n\n\n\n/* Fonts */\n:root{\n  --title-title-large: 500 20px/24px \"Roboto\", sans-serif;\n  --title-title-medium: 500 16px/24px \"Roboto\", sans-serif;\n  --title-title-small: 500 14px/20px \"Roboto\", sans-serif;\n  --label-label-large: 500 14px/20px \"Roboto\", sans-serif;\n  --label-label-medium: 500 12px/16px \"Roboto\", sans-serif;\n  --label-label-small: 500 11px/16px \"Roboto\", sans-serif;\n  --body-body-large: 400 16px/24px \"Roboto\", sans-serif;\n  --body-body-medium: 400 14px/20px \"Roboto\", sans-serif;\n  --body-body-small: 400 12px/16px \"Roboto\", sans-serif;\n  --button-fab: 500 14px/16px \"Roboto\", sans-serif;\n  --button-default: 700 14px/16px \"Roboto\", sans-serif;\n  --ui-kit-header: 500 48px \"Roboto Mono\", sans-serif;\n  --ui-kit-title: 500 32px \"Roboto Mono\", sans-serif;\n  --ui-kit-body: 400 17px \"Roboto Mono\", sans-serif;\n\n/* Width */\n  --max-width-message-bubble: #{$qb-max-width-message-bubble-desktop};\n  --max-width-message-view-container: #{$qb-max-width-message-view-container-desktop};\n  --max-width-image-message: #{$qb-max-width-image-message-desktop};\n  --max-width-audio-message: #{$qb-max-width-audio-message-desktop};\n  --max-width-dialog-list: #{$qb-max-width-dialog-list-desktop};\n  --min-width-screen-desktop: #{$qb-min-width-screen-desktop};\n}\n\n\n\n"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, "@charset \"UTF-8\";\n/*\n@font-face {\n  font-family: \"Roboto-Regular\";\n  src: url(\"../fonts/Roboto-Regular.eot\");\n  src: local(\"☺\"), url(\"../fonts/Roboto-Regular.woff\") format(\"woff\"),\n  url(\"../fonts/Roboto-Regular.ttf\") format(\"truetype\");\n  font-weight: normal;\n  font-style: normal;\n}\n\n@font-face {\n  font-family: \"Roboto-Medium\";\n  src: url(\"../fonts/Roboto-Medium.eot\");\n  src: local(\"☺\"), url(\"../fonts/Roboto-Medium.woff\") format(\"woff\"),\n  url(\"../fonts/Roboto-Medium.ttf\") format(\"truetype\");\n  font-weight: normal;\n  font-style: normal;\n}\n\n@font-face {\n  font-family: \"Roboto-Bold\";\n  src: url(\"../fonts/Roboto-Bold.eot\");\n  src: local(\"☺\"), url(\"../fonts/Roboto-Bold.woff\") format(\"woff\"),\n  url(\"../fonts/Roboto-Bold.ttf\") format(\"truetype\");\n  font-weight: normal;\n  font-style: normal;\n}\n*/\n:root {\n  --primary: #3978FC;\n  --color-background: #FFFFFF;\n  --color-background-modal: #C4D7FE;\n  --color-background-overlay: #0B121B;\n  --color-divider: #E7EFFF;\n  --color-font: #0B121B;\n  --color-icon: #3978FC;\n  --color-media-icon: #FFFFFF;\n  --color-default-hover: #2C65FB;\n  --color-default-active: #1748FA;\n  --color-background-info: #C4D7FE;\n  --color-border-active: #9CBCFE;\n  --tertiary-elements: #636D78;\n  --main-elements: #3978FC;\n  --toast-color: #131D28;\n  --secondary-elements: #202F3E;\n  --input-elements: #202F3E;\n  --disabled-elements: #BCC1C5;\n  --field-border: #90979F;\n  --main-text: #0B121B;\n  --secondary-text: #636D78;\n  --caption: #90979F;\n  --main-background: #FFFFFF;\n  --secondary-background: #FFFFFF;\n  --secondary-background-modal: rgba(19, 29, 40, 0.8);\n  --incoming-background: #E4E6E8;\n  --outgoing-background: #E7EFFF;\n  --dropdown-background: #FFFFFF;\n  --chat-input: #F7F9FF;\n  --divider: #E7EFFF;\n  --error: #FF3B30;\n  --error-secondary: #FF9D98;\n  --hightlight: #FFFDC1;\n}\n\nhtml[data-theme=dark] {\n  --primary: #3978FC;\n  --color-background: #0B121B;\n  --color-background-modal: #131D28;\n  --color-background-overlay: #0B121B;\n  --color-divider: #414E5B;\n  --color-font: #FFFFFF;\n  --color-icon: #74A1FD;\n  --color-media-icon: #FFFFFF;\n  --color-default-hover: #182330;\n  --color-default-active: #0B121B;\n  --color-background-info: #3978FC;\n  --color-border-active: #90979F;\n  --tertiary-elements: rgba(144, 151, 159, 0.8);\n  --main-elements: #74A1FD;\n  --secondary-elements: #FFFFFF;\n  --input-elements: #90979F;\n  --disabled-elements: #636D78;\n  --field-border: #90979F;\n  --main-text: #FFFFFF;\n  --secondary-text: #90979F;\n  --caption: #BCC1C5;\n  --main-background: #202F3E;\n  --secondary-background: #131D28;\n  --incoming-background: #414E5B;\n  --outgoing-background: #3978FC;\n  --dropdown-background: #414E5B;\n  --chat-input: #131D28;\n  --divider: #414E5B;\n  --error: #FF766E;\n  --error-secondary: #FFC4C1;\n  --hightlight: #FFFDC1;\n}\n\n/* Fonts */\n:root {\n  --title-title-large: 500 20px/24px \"Roboto\", sans-serif;\n  --title-title-medium: 500 16px/24px \"Roboto\", sans-serif;\n  --title-title-small: 500 14px/20px \"Roboto\", sans-serif;\n  --label-label-large: 500 14px/20px \"Roboto\", sans-serif;\n  --label-label-medium: 500 12px/16px \"Roboto\", sans-serif;\n  --label-label-small: 500 11px/16px \"Roboto\", sans-serif;\n  --body-body-large: 400 16px/24px \"Roboto\", sans-serif;\n  --body-body-medium: 400 14px/20px \"Roboto\", sans-serif;\n  --body-body-small: 400 12px/16px \"Roboto\", sans-serif;\n  --button-fab: 500 14px/16px \"Roboto\", sans-serif;\n  --button-default: 700 14px/16px \"Roboto\", sans-serif;\n  --ui-kit-header: 500 48px \"Roboto Mono\", sans-serif;\n  --ui-kit-title: 500 32px \"Roboto Mono\", sans-serif;\n  --ui-kit-body: 400 17px \"Roboto Mono\", sans-serif;\n  /* Width */\n  --max-width-message-bubble: 480px;\n  --max-width-message-view-container: 680px;\n  --max-width-image-message: 240px;\n  --max-width-audio-message: 300px;\n  --max-width-dialog-list: 320px;\n  --min-width-screen-desktop: 980px;\n}\n\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: \"Roboto\";\n  color: var(--main-text);\n  background-color: var(--main-background);\n}\n\n/* Media-query for mobile devices */\n@media only screen and (max-width: 980px) {\n  :root {\n    --max-width-message-view-container: 345px;\n    --max-width-message-bubble: 170px;\n    --max-width-image-message: 150px;\n    --max-width-audio-message: 150px;\n    --max-width-dialog-list: 100%;\n  }\n}", "",{"version":3,"sources":["webpack://./src/index.scss","webpack://./src/Presentation/themes/styles/_fonts.scss","webpack://./src/Presentation/themes/styles/_theme_light.scss","webpack://./src/Presentation/themes/styles/_theme_dark.scss","webpack://./src/Presentation/themes/styles/_variables.scss"],"names":[],"mappings":"AAAA,gBAAgB;ACIhB;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAA;ACFA;EACE,kBAAA;EACA,2BAAA;EACA,iCAAA;EACA,mCAAA;EACA,wBAAA;EACA,qBAAA;EACA,qBAAA;EACA,2BAAA;EACA,8BAAA;EACA,+BAAA;EAEA,gCAAA;EACA,8BAAA;EACA,4BAAA;EACA,wBAAA;EACA,sBAAA;EACA,6BAAA;EACA,yBAAA;EACA,4BAAA;EACA,uBAAA;EACA,oBAAA;EACA,yBAAA;EACA,kBAAA;EACA,0BAAA;EACA,+BAAA;EACA,mDAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,qBAAA;EACA,kBAAA;EACA,gBAAA;EACA,0BAAA;EACA,qBAAA;AF6BF;;AG9DA;EACE,kBAAA;EACA,2BAAA;EACA,iCAAA;EACA,mCAAA;EACA,wBAAA;EACA,qBAAA;EACA,qBAAA;EACA,2BAAA;EACA,8BAAA;EACA,+BAAA;EAEA,gCAAA;EACA,8BAAA;EACA,6CAAA;EACA,wBAAA;EACA,6BAAA;EACA,yBAAA;EACA,4BAAA;EACA,uBAAA;EACA,oBAAA;EACA,yBAAA;EACA,kBAAA;EACA,0BAAA;EACA,+BAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EACA,qBAAA;EACA,kBAAA;EACA,gBAAA;EACA,0BAAA;EACA,qBAAA;AHgEF;;AIzEA,UAAA;AACA;EACE,uDAAA;EACA,wDAAA;EACA,uDAAA;EACA,uDAAA;EACA,wDAAA;EACA,uDAAA;EACA,qDAAA;EACA,sDAAA;EACA,qDAAA;EACA,gDAAA;EACA,oDAAA;EACA,mDAAA;EACA,kDAAA;EACA,iDAAA;EAEF,UAAA;EACE,iCAAA;EACA,yCAAA;EACA,gCAAA;EACA,gCAAA;EACA,8BAAA;EACA,iCAAA;AJ2EF;;AAvHA;EACE,sBAAA;AA0HF;;AAvHA;EACE,qBAAA;EACA,uBAAA;EACA,wCAAA;AA0HF;;AAvHA,mCAAA;AACA;EACE;IACE,yCAAA;IACA,iCAAA;IACA,gCAAA;IACA,gCAAA;IACA,6BAAA;EA0HF;AACF","sourcesContent":["@import 'Presentation/themes/styles/fonts';\n@import 'Presentation/themes/styles/theme_colors_scheme';\n@import 'Presentation/themes/styles/variables';\n@import 'Presentation/themes/styles/mixins';\n\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: 'Roboto';\n  color: var(--main-text);\n  background-color: var(--main-background);\n}\n\n/* Media-query for mobile devices */\n@media only screen and (max-width: #{$qb-max-width-screen}) {\n  :root {\n    --max-width-message-view-container: #{$qb-max-width-message-view-container-mobile};\n    --max-width-message-bubble: #{$qb-max-width-message-bubble-mobile};\n    --max-width-image-message: #{$qb-max-width-image-message-mobile};\n    --max-width-audio-message: #{$qb-max-width-audio-message-mobile};\n    --max-width-dialog-list: #{$qb-max-width-dialog-list-mobile};\n  }\n}\n","@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400;0,500;0,700;1,700&display=swap');\n////font-family: 'Ubuntu', sans-serif;\n@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');\n////font-family: 'Roboto', sans-serif;\n/*\n@font-face {\n  font-family: \"Roboto-Regular\";\n  src: url(\"../fonts/Roboto-Regular.eot\");\n  src: local(\"☺\"), url(\"../fonts/Roboto-Regular.woff\") format(\"woff\"),\n  url(\"../fonts/Roboto-Regular.ttf\") format(\"truetype\");\n  font-weight: normal;\n  font-style: normal;\n}\n\n@font-face {\n  font-family: \"Roboto-Medium\";\n  src: url(\"../fonts/Roboto-Medium.eot\");\n  src: local(\"☺\"), url(\"../fonts/Roboto-Medium.woff\") format(\"woff\"),\n  url(\"../fonts/Roboto-Medium.ttf\") format(\"truetype\");\n  font-weight: normal;\n  font-style: normal;\n}\n\n@font-face {\n  font-family: \"Roboto-Bold\";\n  src: url(\"../fonts/Roboto-Bold.eot\");\n  src: local(\"☺\"), url(\"../fonts/Roboto-Bold.woff\") format(\"woff\"),\n  url(\"../fonts/Roboto-Bold.ttf\") format(\"truetype\");\n  font-weight: normal;\n  font-style: normal;\n}\n*/\n","@import 'theme_colors_scheme';\n\n:root {\n  --primary: #{$primary-500};\n  --color-background: #{$primary-a-100};\n  --color-background-modal: #{$primary-100};\n  --color-background-overlay: #{$secondary-900};\n  --color-divider: #{$primary-50};\n  --color-font: #{$secondary-900};\n  --color-icon: #{$primary-500};\n  --color-media-icon: #{$primary-a-100};\n  --color-default-hover: #{$primary-700};\n  --color-default-active: #{$primary-900};\n\n  --color-background-info: #{$primary-100};\n  --color-border-active: #{$primary-200};\n  --tertiary-elements: #{$secondary-300};\n  --main-elements: #{$primary-500};\n  --toast-color: #{$secondary-800};\n  --secondary-elements: #{$secondary-500};\n  --input-elements: #{$secondary-500};\n  --disabled-elements: #{$secondary-100};\n  --field-border: #{$secondary-200};\n  --main-text: #{$secondary-900};\n  --secondary-text: #{$secondary-300};\n  --caption: #{$secondary-200};\n  --main-background: #{$primary-a-100};\n  --secondary-background: #{$primary-a-100}; // #{$primary-50};\n  --secondary-background-modal: #{$background-overlay-light};\n  --incoming-background: #{$secondary-50};\n  --outgoing-background: #{$primary-50};\n  --dropdown-background: #{$primary-a-100};\n  --chat-input: #{$primary-a-200};\n  --divider: #{$primary-50};\n  --error: #{$error-500};\n  --error-secondary: #{$error-200};\n  --hightlight: #{$highlight};\n}\n","@import 'theme_colors_scheme';\n// https://sass-lang.com/documentation/breaking-changes/css-vars\n\nhtml[data-theme='dark'] {\n  --primary: #{$primary-500};\n  --color-background: #{$secondary-900};\n  --color-background-modal: #{$secondary-800};\n  --color-background-overlay: #{$secondary-900};\n  --color-divider: #{$secondary-400};\n  --color-font: #{$primary-a-100};\n  --color-icon: #{$primary-300};\n  --color-media-icon: #{$primary-a-100};\n  --color-default-hover: #{$secondary-700};\n  --color-default-active: #{$secondary-900};\n\n  --color-background-info: #{$primary-500};\n  --color-border-active: #{$secondary-200};\n  --tertiary-elements: #{$background-overlay-dark};\n  --main-elements: #{$primary-300};\n  --secondary-elements: #{$primary-a-100};\n  --input-elements: #{$secondary-200};\n  --disabled-elements: #{$secondary-300};\n  --field-border: #{$secondary-200};\n  --main-text: #{$primary-a-100};\n  --secondary-text: #{$secondary-200};\n  --caption: #{$secondary-100};\n  --main-background: #{$secondary-500};\n  --secondary-background: #{$secondary-800};\n  --incoming-background: #{$secondary-400};\n  --outgoing-background: #{$primary-500};\n  --dropdown-background: #{$secondary-400};\n  --chat-input: #{$secondary-800};\n  --divider: #{$secondary-400};\n  --error: #{$error-300};\n  --error-secondary: #{$error-100};\n  --hightlight: #{$highlight};\n}\n","@import \"theme_light\";\n@import \"theme_dark\";\n\n$qb-min-width-screen-desktop: 980px;\n\n$qb-max-width-screen: 980px;\n\n$qb-max-width-message-view-container-desktop: 680px;\n$qb-max-width-message-view-container-mobile: 345px;\n\n$qb-max-width-message-bubble-desktop: 480px;\n$qb-max-width-message-bubble-mobile: 170px;\n\n$qb-max-width-image-message-desktop: 240px;\n$qb-max-width-image-message-mobile: 150px;\n\n$qb-max-width-audio-message-desktop: 300px;\n$qb-max-width-audio-message-mobile: 150px;\n\n$qb-max-width-dialog-list-desktop: 320px;\n$qb-max-width-dialog-list-mobile: 100%;\n\n$create-dialog-container-width: 380px;\n\n\n\n/* Fonts */\n:root{\n  --title-title-large: 500 20px/24px \"Roboto\", sans-serif;\n  --title-title-medium: 500 16px/24px \"Roboto\", sans-serif;\n  --title-title-small: 500 14px/20px \"Roboto\", sans-serif;\n  --label-label-large: 500 14px/20px \"Roboto\", sans-serif;\n  --label-label-medium: 500 12px/16px \"Roboto\", sans-serif;\n  --label-label-small: 500 11px/16px \"Roboto\", sans-serif;\n  --body-body-large: 400 16px/24px \"Roboto\", sans-serif;\n  --body-body-medium: 400 14px/20px \"Roboto\", sans-serif;\n  --body-body-small: 400 12px/16px \"Roboto\", sans-serif;\n  --button-fab: 500 14px/16px \"Roboto\", sans-serif;\n  --button-default: 700 14px/16px \"Roboto\", sans-serif;\n  --ui-kit-header: 500 48px \"Roboto Mono\", sans-serif;\n  --ui-kit-title: 500 32px \"Roboto Mono\", sans-serif;\n  --ui-kit-body: 400 17px \"Roboto Mono\", sans-serif;\n\n/* Width */\n  --max-width-message-bubble: #{$qb-max-width-message-bubble-desktop};\n  --max-width-message-view-container: #{$qb-max-width-message-view-container-desktop};\n  --max-width-image-message: #{$qb-max-width-image-message-desktop};\n  --max-width-audio-message: #{$qb-max-width-audio-message-desktop};\n  --max-width-dialog-list: #{$qb-max-width-dialog-list-desktop};\n  --min-width-screen-desktop: #{$qb-min-width-screen-desktop};\n}\n\n\n\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -6696,61 +6669,6 @@ var update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js
        /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_DialogsWithSearch_scss__WEBPACK_IMPORTED_MODULE_6__["default"] && _node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_DialogsWithSearch_scss__WEBPACK_IMPORTED_MODULE_6__["default"].locals ? _node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_DialogsWithSearch_scss__WEBPACK_IMPORTED_MODULE_6__["default"].locals : undefined);
 
 
-/***/ }),
-
-/***/ "./src/Presentation/Views/Dialog/ForwardMessageFlow/DialogsWithSearch/SearchComponent/SearchComponent.scss":
-/*!*****************************************************************************************************************!*\
-  !*** ./src/Presentation/Views/Dialog/ForwardMessageFlow/DialogsWithSearch/SearchComponent/SearchComponent.scss ***!
-  \*****************************************************************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
-/* harmony export */ });
-/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../../../../../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ "./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
-/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !../../../../../../../node_modules/style-loader/dist/runtime/styleDomAPI.js */ "./node_modules/style-loader/dist/runtime/styleDomAPI.js");
-/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../../../../../../../node_modules/style-loader/dist/runtime/insertBySelector.js */ "./node_modules/style-loader/dist/runtime/insertBySelector.js");
-/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../../../../../../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js */ "./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js");
-/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! !../../../../../../../node_modules/style-loader/dist/runtime/insertStyleElement.js */ "./node_modules/style-loader/dist/runtime/insertStyleElement.js");
-/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! !../../../../../../../node_modules/style-loader/dist/runtime/styleTagTransform.js */ "./node_modules/style-loader/dist/runtime/styleTagTransform.js");
-/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__);
-/* harmony import */ var _node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_SearchComponent_scss__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../../node_modules/sass-loader/dist/cjs.js!./SearchComponent.scss */ "./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/Presentation/Views/Dialog/ForwardMessageFlow/DialogsWithSearch/SearchComponent/SearchComponent.scss");
-
-      
-      
-      
-      
-      
-      
-      
-      
-      
-
-var options = {};
-
-options.styleTagTransform = (_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default());
-options.setAttributes = (_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());
-
-      options.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, "head");
-    
-options.domAPI = (_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());
-options.insertStyleElement = (_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());
-
-var update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_SearchComponent_scss__WEBPACK_IMPORTED_MODULE_6__["default"], options);
-
-
-
-
-       /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_SearchComponent_scss__WEBPACK_IMPORTED_MODULE_6__["default"] && _node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_SearchComponent_scss__WEBPACK_IMPORTED_MODULE_6__["default"].locals ? _node_modules_css_loader_dist_cjs_js_node_modules_sass_loader_dist_cjs_js_SearchComponent_scss__WEBPACK_IMPORTED_MODULE_6__["default"].locals : undefined);
-
-
 /***/ }),
 
 /***/ "./src/Presentation/Views/Dialog/ForwardMessageFlow/ForwardMessageFlow.scss":
@@ -14587,10 +14505,30 @@ var DialogsRepository = /** @class */ (function () {
             });
         });
     };
+    DialogsRepository.prototype.updateCurrentDialogInLocalDataSource = function (entity) {
+        return __awaiter(this, void 0, void 0, function () {
+            var dto, e_4;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, , 3]);
+                        return [4 /*yield*/, this.dialogRemoteDTOMapper.fromEntity(entity)];
+                    case 1:
+                        dto = _a.sent();
+                        this.remoteDataSource.updateCurrentDialog(dto);
+                        return [2 /*return*/, Promise.resolve(entity)];
+                    case 2:
+                        e_4 = _a.sent();
+                        return [2 /*return*/, Promise.reject(e_4)];
+                    case 3: return [2 /*return*/];
+                }
+            });
+        });
+    };
     // eslint-disable-next-line class-methods-use-this,@typescript-eslint/no-unused-vars
     DialogsRepository.prototype.updateDialogInRemote = function (entity) {
         return __awaiter(this, void 0, void 0, function () {
-            var remoteDialogDTO, resultDTO, resultEntity, e_4;
+            var remoteDialogDTO, resultDTO, resultEntity, e_5;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0: return [4 /*yield*/, this.dialogRemoteDTOMapper.fromEntity(entity)];
@@ -14607,8 +14545,8 @@ var DialogsRepository = /** @class */ (function () {
                         resultEntity = _a.sent();
                         return [2 /*return*/, Promise.resolve(resultEntity)];
                     case 5:
-                        e_4 = _a.sent();
-                        return [2 /*return*/, Promise.reject(e_4)];
+                        e_5 = _a.sent();
+                        return [2 /*return*/, Promise.reject(e_5)];
                     case 6: return [2 /*return*/];
                 }
             });
@@ -14616,7 +14554,7 @@ var DialogsRepository = /** @class */ (function () {
     };
     DialogsRepository.prototype.getDialogFromLocal = function (dialogId) {
         return __awaiter(this, void 0, void 0, function () {
-            var dto, checkResult, dialog, dtoResult, e_5, prom;
+            var dto, checkResult, dialog, dtoResult, e_6, prom;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -14636,9 +14574,9 @@ var DialogsRepository = /** @class */ (function () {
                         dialog = _a.sent();
                         return [3 /*break*/, 5];
                     case 4:
-                        e_5 = _a.sent();
-                        if (e_5 instanceof _source_exception_LocalDataSourceException__WEBPACK_IMPORTED_MODULE_1__.LocalDataSourceException) {
-                            if (e_5.code !== _source_exception_LocalDataSourceException__WEBPACK_IMPORTED_MODULE_1__.UNEXPECTED_LOCAL_DATASOURCE_EXCEPTION_CODE) {
+                        e_6 = _a.sent();
+                        if (e_6 instanceof _source_exception_LocalDataSourceException__WEBPACK_IMPORTED_MODULE_1__.LocalDataSourceException) {
+                            if (e_6.code !== _source_exception_LocalDataSourceException__WEBPACK_IMPORTED_MODULE_1__.UNEXPECTED_LOCAL_DATASOURCE_EXCEPTION_CODE) {
                                 // return Promise.reject(new RepositoryException(e.message, e.code));
                                 return [2 /*return*/, Promise.reject(new _source_exception_RepositoryException__WEBPACK_IMPORTED_MODULE_0__["default"](_source_exception_LocalDataSourceException__WEBPACK_IMPORTED_MODULE_1__.NOT_FOUND_LOCAL_DATASOURCE_EXCEPTION_MESSAGE, _source_exception_LocalDataSourceException__WEBPACK_IMPORTED_MODULE_1__.NOT_FOUND_LOCAL_DATASOURCE_EXCEPTION_CODE))];
                                 //
@@ -14663,7 +14601,7 @@ var DialogsRepository = /** @class */ (function () {
     };
     DialogsRepository.prototype.getDialogFromRemote = function (dialogId) {
         return __awaiter(this, void 0, void 0, function () {
-            var dto, resultDTO, resultEntity, e_6;
+            var dto, resultDTO, resultEntity, e_7;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -14680,8 +14618,8 @@ var DialogsRepository = /** @class */ (function () {
                         resultEntity = _a.sent();
                         return [2 /*return*/, Promise.resolve(resultEntity)];
                     case 4:
-                        e_6 = _a.sent();
-                        return [2 /*return*/, Promise.reject(e_6)];
+                        e_7 = _a.sent();
+                        return [2 /*return*/, Promise.reject(e_7)];
                     case 5: return [2 /*return*/];
                 }
             });
@@ -14689,7 +14627,7 @@ var DialogsRepository = /** @class */ (function () {
     };
     DialogsRepository.prototype.getDialogsFromLocal = function (pagination) {
         return __awaiter(this, void 0, void 0, function () {
-            var resultDTO, entyties, _i, _a, item, entity, e_7;
+            var resultDTO, entyties, _i, _a, item, entity, e_8;
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
@@ -14713,8 +14651,8 @@ var DialogsRepository = /** @class */ (function () {
                         return [3 /*break*/, 2];
                     case 5: return [2 /*return*/, Promise.resolve(entyties)];
                     case 6:
-                        e_7 = _b.sent();
-                        return [2 /*return*/, Promise.reject(e_7)];
+                        e_8 = _b.sent();
+                        return [2 /*return*/, Promise.reject(e_8)];
                     case 7: return [2 /*return*/];
                 }
             });
@@ -14723,7 +14661,7 @@ var DialogsRepository = /** @class */ (function () {
     // eslint-disable-next-line class-methods-use-this
     DialogsRepository.prototype.getDialogsFromRemote = function (pagination) {
         return __awaiter(this, void 0, void 0, function () {
-            var resultDTO, entyties, _i, _a, item, entity, result, e_8;
+            var resultDTO, entyties, _i, _a, item, entity, result, e_9;
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
@@ -14753,8 +14691,8 @@ var DialogsRepository = /** @class */ (function () {
                         };
                         return [2 /*return*/, Promise.resolve(result)];
                     case 6:
-                        e_8 = _b.sent();
-                        return [2 /*return*/, Promise.reject(e_8)];
+                        e_9 = _b.sent();
+                        return [2 /*return*/, Promise.reject(e_9)];
                     case 7: return [2 /*return*/];
                 }
             });
@@ -14762,7 +14700,7 @@ var DialogsRepository = /** @class */ (function () {
     };
     DialogsRepository.prototype.deleteDialogFromLocal = function (dialogId) {
         return __awaiter(this, void 0, void 0, function () {
-            var dto, e_9;
+            var dto, e_10;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -14776,9 +14714,9 @@ var DialogsRepository = /** @class */ (function () {
                         _a.sent();
                         return [2 /*return*/, Promise.resolve(true)];
                     case 3:
-                        e_9 = _a.sent();
-                        console.log('exception in deleteDialogFromLocal: ', (0,_utils_parse__WEBPACK_IMPORTED_MODULE_7__.stringifyError)(e_9));
-                        return [2 /*return*/, Promise.reject(e_9)];
+                        e_10 = _a.sent();
+                        console.log('exception in deleteDialogFromLocal: ', (0,_utils_parse__WEBPACK_IMPORTED_MODULE_7__.stringifyError)(e_10));
+                        return [2 /*return*/, Promise.reject(e_10)];
                     case 4: return [2 /*return*/];
                 }
             });
@@ -14787,7 +14725,7 @@ var DialogsRepository = /** @class */ (function () {
     // eslint-disable-next-line class-methods-use-this,@typescript-eslint/no-unused-vars
     DialogsRepository.prototype.deleteDialogFromRemote = function (dialogId) {
         return __awaiter(this, void 0, void 0, function () {
-            var dto, e_10;
+            var dto, e_11;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -14801,8 +14739,8 @@ var DialogsRepository = /** @class */ (function () {
                         _a.sent();
                         return [2 /*return*/, Promise.resolve(true)];
                     case 3:
-                        e_10 = _a.sent();
-                        return [2 /*return*/, Promise.reject(e_10)];
+                        e_11 = _a.sent();
+                        return [2 /*return*/, Promise.reject(e_11)];
                     case 4: return [2 /*return*/];
                 }
             });
@@ -14810,7 +14748,7 @@ var DialogsRepository = /** @class */ (function () {
     };
     DialogsRepository.prototype.deleteUsersFromDialogFromRemote = function (dialogId, usersIds) {
         return __awaiter(this, void 0, void 0, function () {
-            var dialogDTO, arrayUsersDTO, i, dto, e_11;
+            var dialogDTO, arrayUsersDTO, i, dto, e_12;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -14830,8 +14768,8 @@ var DialogsRepository = /** @class */ (function () {
                         _a.sent();
                         return [2 /*return*/, Promise.resolve(true)];
                     case 3:
-                        e_11 = _a.sent();
-                        return [2 /*return*/, Promise.reject(e_11)];
+                        e_12 = _a.sent();
+                        return [2 /*return*/, Promise.reject(e_12)];
                     case 4: return [2 /*return*/];
                 }
             });
@@ -17881,6 +17819,9 @@ var RemoteDataSource = /** @class */ (function () {
         var dialogDTOMapper = new _Mapper_DialogDTOMapper__WEBPACK_IMPORTED_MODULE_6__.DialogDTOMapper(currentUserId);
         return dialogDTOMapper;
     };
+    RemoteDataSource.prototype.updateCurrentDialog = function (dto) {
+        this.currentDialog = dto;
+    };
     RemoteDataSource.prototype.setUpMockStorage = function () {
         return __awaiter(this, void 0, void 0, function () {
             var dialogsDTOtoEntityMapper, dialogsEntities, _loop_1, this_1, _i, dialogsEntities_1, item;
@@ -18074,68 +18015,121 @@ var RemoteDataSource = /** @class */ (function () {
             _this.subscriptionOnSystemMessages[resultMessage.notification_type].informSubscribers(resultMessage, _Domain_entity_EventMessageType__WEBPACK_IMPORTED_MODULE_15__["default"].SystemMessage);
         };
         QB.chat.onMessageListener = function (userId, message) {
+            var _a;
             console.log("EVENT: receive  message for userid: ".concat(userId, ", message: ").concat((0,_utils_parse__WEBPACK_IMPORTED_MODULE_12__.stringifyError)(message)));
-            // нужно получить реализовать так как при обработке onDeliveredStatusListener
             var dialogId = message.dialog_id || message.extension.dialog_id || '-1';
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            var currentUserId = (_a = _this._authInformation) === null || _a === void 0 ? void 0 : _a.userId;
             //
             (0,_qb_api_calls__WEBPACK_IMPORTED_MODULE_8__.qbChatGetMessagesExtended)(dialogId, {
                 _id: message.id,
+                mark_as_read: 0,
             })
                 // eslint-disable-next-line promise/always-return
                 .then(function (qbMessages) {
                 ///
                 qbMessages.items.map(function (currentItem) { return __awaiter(_this, void 0, void 0, function () {
                     var dtoMessage;
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
+                    var _a;
+                    return __generator(this, function (_b) {
+                        switch (_b.label) {
                             case 0: return [4 /*yield*/, this.messageDTOMapper.toTDO(currentItem)];
                             case 1:
-                                dtoMessage = _a.sent();
+                                dtoMessage = _b.sent();
                                 dtoMessage.dialogId = dialogId;
                                 this.subscriptionOnChatMessages.informSubscribers(dtoMessage, _Domain_entity_EventMessageType__WEBPACK_IMPORTED_MODULE_15__["default"].RegularMessage);
+                                //
+                                if (((_a = this.currentDialog) === null || _a === void 0 ? void 0 : _a.id) === dialogId) {
+                                    (0,_qb_api_calls__WEBPACK_IMPORTED_MODULE_8__.QBChatMarkMessageRead)({
+                                        messageId: message.id,
+                                        dialogId: dialogId,
+                                        userId: dtoMessage.sender_id,
+                                    });
+                                }
+                                ///
                                 return [2 /*return*/, dtoMessage];
                         }
                     });
                 }); });
-                ///
             })
                 .catch();
         };
         QB.chat.onDeliveredStatusListener = function (messageId, dialogId, userId) {
             console.log("EVENT: receive delivered message id: ".concat(messageId, ", dialogid: ").concat(dialogId, " userid: ").concat(userId));
             (0,_qb_api_calls__WEBPACK_IMPORTED_MODULE_8__.QBGetDialogById)(dialogId)
-                .then(function (result) {
-                //
-                var dialogs = result === null || result === void 0 ? void 0 : result.items.filter(function (v) { return v._id === dialogId; });
-                var current = dialogs && dialogs.length > 0 ? dialogs[0] : undefined;
-                // eslint-disable-next-line promise/always-return
-                if (current && current.type === _Domain_entity_DialogTypes__WEBPACK_IMPORTED_MODULE_13__.DialogType["private"]) {
-                    //
-                    (0,_qb_api_calls__WEBPACK_IMPORTED_MODULE_8__.qbChatGetMessagesExtended)(dialogId, {
-                        _id: messageId,
-                    })
-                        // eslint-disable-next-line promise/always-return
-                        .then(function (qbMessages) {
-                        ///
-                        qbMessages.items.map(function (currentItem) { return __awaiter(_this, void 0, void 0, function () {
-                            var dtoMessage;
-                            return __generator(this, function (_a) {
-                                switch (_a.label) {
-                                    case 0: return [4 /*yield*/, this.messageDTOMapper.toTDO(currentItem)];
-                                    case 1:
-                                        dtoMessage = _a.sent();
-                                        dtoMessage.dialogId = dialogId;
-                                        this.subscriptionOnChatMessages.informSubscribers(dtoMessage, _Domain_entity_EventMessageType__WEBPACK_IMPORTED_MODULE_15__["default"].RegularMessage);
-                                        return [2 /*return*/, dtoMessage];
-                                }
-                            });
-                        }); });
-                        ///
-                    })
-                        .catch();
-                    //
-                }
-            })
+                .then(function (result) { return __awaiter(_this, void 0, void 0, function () {
+                var currentUserId, dialogs, current, dialogDTO, dialogsDTOtoEntityMapper, dialogEntity, resultMessage;
+                var _this = this;
+                var _a;
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
+                        case 0:
+                            currentUserId = (_a = this._authInformation) === null || _a === void 0 ? void 0 : _a.userId;
+                            dialogs = result === null || result === void 0 ? void 0 : result.items.filter(function (v) { return v._id === dialogId; });
+                            current = dialogs && dialogs.length > 0 ? dialogs[0] : undefined;
+                            return [4 /*yield*/, this.getCurrentDialogDTOMapper().toTDO(current)];
+                        case 1:
+                            dialogDTO = _b.sent();
+                            dialogsDTOtoEntityMapper = new _mapper_DialogRemoteDTOMapper__WEBPACK_IMPORTED_MODULE_11__.DialogRemoteDTOMapper();
+                            return [4 /*yield*/, dialogsDTOtoEntityMapper.toEntity(dialogDTO)];
+                        case 2:
+                            dialogEntity = _b.sent();
+                            resultMessage = {
+                                eventMessageType: _Domain_entity_EventMessageType__WEBPACK_IMPORTED_MODULE_15__["default"].LocalMessage,
+                                dialogInfo: dialogEntity,
+                                messageInfo: undefined,
+                                messageStatus: {
+                                    isTyping: false,
+                                    userId: userId,
+                                    dialogId: dialogId,
+                                    messageId: messageId,
+                                    deliveryStatus: 'delivered',
+                                },
+                                notificationTypes: undefined,
+                            };
+                            this.subscriptionOnMessageStatus.informSubscribers(resultMessage, _Domain_entity_EventMessageType__WEBPACK_IMPORTED_MODULE_15__["default"].LocalMessage);
+                            //
+                            //
+                            // eslint-disable-next-line promise/always-return
+                            if (current && current.type === _Domain_entity_DialogTypes__WEBPACK_IMPORTED_MODULE_13__.DialogType["private"]) {
+                                (0,_qb_api_calls__WEBPACK_IMPORTED_MODULE_8__.qbChatGetMessagesExtended)(dialogId, {
+                                    _id: messageId,
+                                    mark_as_read: 0,
+                                })
+                                    // eslint-disable-next-line promise/always-return
+                                    .then(function (qbMessages) {
+                                    ///
+                                    qbMessages.items.map(function (currentItem) { return __awaiter(_this, void 0, void 0, function () {
+                                        var dtoMessage;
+                                        var _a;
+                                        return __generator(this, function (_b) {
+                                            switch (_b.label) {
+                                                case 0: return [4 /*yield*/, this.messageDTOMapper.toTDO(currentItem)];
+                                                case 1:
+                                                    dtoMessage = _b.sent();
+                                                    dtoMessage.dialogId = dialogId;
+                                                    this.subscriptionOnChatMessages.informSubscribers(dtoMessage, _Domain_entity_EventMessageType__WEBPACK_IMPORTED_MODULE_15__["default"].RegularMessage);
+                                                    //
+                                                    if (((_a = this.currentDialog) === null || _a === void 0 ? void 0 : _a.id) === dialogId) {
+                                                        (0,_qb_api_calls__WEBPACK_IMPORTED_MODULE_8__.QBChatMarkMessageRead)({
+                                                            messageId: messageId,
+                                                            dialogId: dialogId,
+                                                            userId: dtoMessage.sender_id,
+                                                        });
+                                                    }
+                                                    return [2 /*return*/, dtoMessage];
+                                            }
+                                        });
+                                    }); });
+                                    ///
+                                })
+                                    .catch();
+                                //
+                            }
+                            return [2 /*return*/];
+                    }
+                });
+            }); })
                 .catch();
         };
         QB.chat.onMessageTypingListener = function (isTyping, userId, dialogId) {
@@ -18146,7 +18140,14 @@ var RemoteDataSource = /** @class */ (function () {
             var resultMessage = {
                 eventMessageType: _Domain_entity_EventMessageType__WEBPACK_IMPORTED_MODULE_15__["default"].LocalMessage,
                 messageInfo: undefined,
-                messageStatus: { isTyping: isTyping, userId: userId, dialogId: dialogId },
+                dialogInfo: undefined,
+                messageStatus: {
+                    isTyping: isTyping,
+                    userId: userId,
+                    dialogId: dialogId,
+                    messageId: '',
+                    deliveryStatus: 'sending',
+                },
                 notificationTypes: undefined,
             };
             _this.subscriptionOnMessageStatus.informSubscribers(resultMessage, _Domain_entity_EventMessageType__WEBPACK_IMPORTED_MODULE_15__["default"].LocalMessage);
@@ -18176,6 +18177,20 @@ var RemoteDataSource = /** @class */ (function () {
         };
         QB.chat.onReadStatusListener = function (messageId, dialogId, userId) {
             console.log("EVENT: receive read message id: ".concat(messageId, ", dialogid: ").concat(dialogId, " userid: ").concat(userId));
+            var resultMessage = {
+                eventMessageType: _Domain_entity_EventMessageType__WEBPACK_IMPORTED_MODULE_15__["default"].LocalMessage,
+                messageInfo: undefined,
+                dialogInfo: undefined,
+                messageStatus: {
+                    isTyping: false,
+                    userId: userId,
+                    dialogId: dialogId,
+                    messageId: messageId,
+                    deliveryStatus: 'read',
+                },
+                notificationTypes: undefined,
+            };
+            _this.subscriptionOnMessageStatus.informSubscribers(resultMessage, _Domain_entity_EventMessageType__WEBPACK_IMPORTED_MODULE_15__["default"].LocalMessage);
         };
         //
     };
@@ -18653,7 +18668,7 @@ var RemoteDataSource = /** @class */ (function () {
                                                 (0,_qb_api_calls__WEBPACK_IMPORTED_MODULE_8__.QBChatMarkMessageRead)({
                                                     messageId: dtoMessage.id,
                                                     dialogId: dtoMessage.dialogId,
-                                                    userId: currentUserId,
+                                                    userId: dtoMessage.sender_id,
                                                 });
                                             }
                                             messagesDTO.push(dtoMessage);
@@ -18731,6 +18746,7 @@ var RemoteDataSource = /** @class */ (function () {
                                 qb_original_messages: _Mapper_MessageDTOMapper__WEBPACK_IMPORTED_MODULE_10__.MessageDTOMapper.translateOriginalDataToJSON(_Mapper_MessageDTOMapper__WEBPACK_IMPORTED_MODULE_10__.MessageDTOMapper.convertToQBChatNewMessage(dto.qb_original_messages || []) || []),
                             },
                             markable: 1,
+                            // markable: 0, // mark_as_read ??
                         };
                         if (((_a = dto.attachments) === null || _a === void 0 ? void 0 : _a.length) > 0) {
                             qbEntity.extension.attachments = [];
@@ -19601,7 +19617,7 @@ var GetAllMessagesForDialogMock = /** @class */ (function () {
                         // return this.messagesRepository.getMessagesFromLocal(this.dialogId);
                         //
                         //
-                        return [2 /*return*/, result.ResultData];
+                        return [2 /*return*/, result];
                 }
             });
         });
@@ -19697,7 +19713,7 @@ var GetDialogByIdUseCase = /** @class */ (function () {
     }
     GetDialogByIdUseCase.prototype.execute = function () {
         return __awaiter(this, void 0, void 0, function () {
-            var fromRemote, dialogResult;
+            var fromRemote, e_1, dialogResult;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -19705,11 +19721,21 @@ var GetDialogByIdUseCase = /** @class */ (function () {
                         return [4 /*yield*/, this.dialogRepository.getDialogFromRemote(this.dialogId)];
                     case 1:
                         fromRemote = _a.sent();
-                        return [4 /*yield*/, this.dialogRepository.updateDialogInLocal(fromRemote)];
+                        _a.label = 2;
                     case 2:
-                        _a.sent();
-                        return [4 /*yield*/, this.dialogRepository.getDialogFromLocal(this.dialogId)];
+                        _a.trys.push([2, 4, , 6]);
+                        return [4 /*yield*/, this.dialogRepository.updateDialogInLocal(fromRemote)];
                     case 3:
+                        _a.sent();
+                        return [3 /*break*/, 6];
+                    case 4:
+                        e_1 = _a.sent();
+                        return [4 /*yield*/, this.dialogRepository.saveDialogToLocal(fromRemote)];
+                    case 5:
+                        _a.sent();
+                        return [3 /*break*/, 6];
+                    case 6: return [4 /*yield*/, this.dialogRepository.getDialogFromLocal(this.dialogId)];
+                    case 7:
                         dialogResult = _a.sent();
                         return [2 /*return*/, dialogResult];
                 }
@@ -20675,6 +20701,81 @@ var SyncDialogsUseCase = /** @class */ (function (_super) {
 
 
 
+/***/ }),
+
+/***/ "./src/Domain/use_cases/UpdateCurrentDialogInDataSourceUseCase.ts":
+/*!************************************************************************!*\
+  !*** ./src/Domain/use_cases/UpdateCurrentDialogInDataSourceUseCase.ts ***!
+  \************************************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "UpdateCurrentDialogInDataSourceUseCase": () => (/* binding */ UpdateCurrentDialogInDataSourceUseCase)
+/* harmony export */ });
+var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (undefined && undefined.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var UpdateCurrentDialogInDataSourceUseCase = /** @class */ (function () {
+    function UpdateCurrentDialogInDataSourceUseCase(dialogRepository, updateDialog) {
+        console.log('CONSTRUCTOR UpdateCurrentDialogInDataSourceUseCase');
+        this.dialogRepository = dialogRepository;
+        this.updateDialog = updateDialog;
+    }
+    UpdateCurrentDialogInDataSourceUseCase.prototype.execute = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var result;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        console.log('execute UpdateCurrentDialogInDataSourceUseCase');
+                        return [4 /*yield*/, this.dialogRepository.updateCurrentDialogInLocalDataSource(this.updateDialog)];
+                    case 1:
+                        result = _a.sent();
+                        return [2 /*return*/, Promise.resolve(result)];
+                }
+            });
+        });
+    };
+    return UpdateCurrentDialogInDataSourceUseCase;
+}());
+
+
+
 /***/ }),
 
 /***/ "./src/Domain/use_cases/UpdateDialogUseCase.ts":
@@ -23006,10 +23107,11 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _DialogsWithSearch_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./DialogsWithSearch.scss */ "./src/Presentation/Views/Dialog/ForwardMessageFlow/DialogsWithSearch/DialogsWithSearch.scss");
-/* harmony import */ var _SearchComponent_SearchComponent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./SearchComponent/SearchComponent */ "./src/Presentation/Views/Dialog/ForwardMessageFlow/DialogsWithSearch/SearchComponent/SearchComponent.tsx");
-/* harmony import */ var _DialogListItem_DialogListItem__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./DialogListItem/DialogListItem */ "./src/Presentation/Views/Dialog/ForwardMessageFlow/DialogsWithSearch/DialogListItem/DialogListItem.tsx");
-/* harmony import */ var _components_containers_ScrollableContainer_ScrollableContainer__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../components/containers/ScrollableContainer/ScrollableContainer */ "./src/Presentation/components/containers/ScrollableContainer/ScrollableContainer.tsx");
-/* harmony import */ var _Domain_entity_DialogTypes__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../../Domain/entity/DialogTypes */ "./src/Domain/entity/DialogTypes.ts");
+/* harmony import */ var _DialogListItem_DialogListItem__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./DialogListItem/DialogListItem */ "./src/Presentation/Views/Dialog/ForwardMessageFlow/DialogsWithSearch/DialogListItem/DialogListItem.tsx");
+/* harmony import */ var _components_containers_ScrollableContainer_ScrollableContainer__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../components/containers/ScrollableContainer/ScrollableContainer */ "./src/Presentation/components/containers/ScrollableContainer/ScrollableContainer.tsx");
+/* harmony import */ var _Domain_entity_DialogTypes__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../../Domain/entity/DialogTypes */ "./src/Domain/entity/DialogTypes.ts");
+/* harmony import */ var _ui_components__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../ui-components */ "./src/Presentation/ui-components/index.ts");
+/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../../icons */ "./src/Presentation/icons/index.ts");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -23037,6 +23139,7 @@ var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from
 
 
 
+
 // eslint-disable-next-line react/function-component-definition
 var DialogsWithSearch = function (_a) {
     var dialogs = _a.dialogs, currentDialog = _a.currentDialog, selectedDialogs = _a.selectedDialogs, onSelect = _a.onSelect;
@@ -23054,71 +23157,17 @@ var DialogsWithSearch = function (_a) {
         }
         return __spreadArray([], dialogs.filter(function (u) { return u.id !== currentDialog.id; }), true);
     }
-    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
-        setFilteredDialogs(filterDialogsByName(stringForFilter, currentDialog.id));
-    }, [stringForFilter]);
     var renderItem = function (item) {
-        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "dialogs-with-search-list-item" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DialogListItem_DialogListItem__WEBPACK_IMPORTED_MODULE_4__["default"], { name: item.name, id: item.id, avatar: item.type === _Domain_entity_DialogTypes__WEBPACK_IMPORTED_MODULE_6__.DialogType.group
+        return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "dialogs-with-search-list-item" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_DialogListItem_DialogListItem__WEBPACK_IMPORTED_MODULE_3__["default"], { name: item.name, id: item.id, avatar: item.type === _Domain_entity_DialogTypes__WEBPACK_IMPORTED_MODULE_5__.DialogType.group
                         ? item.photo
                         : '', typeDialog: item.type, checked: selectedDialogs.includes(item.id), onSelect: function () { return onSelect(item.id); } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("svg", { className: "dialogs-with-search-list-divider", width: "332", height: "0" })] }), item.id));
     };
-    /* eslint-disable-next-line react/jsx-no-bind */
-    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "dialogs-with-search-body" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_SearchComponent_SearchComponent__WEBPACK_IMPORTED_MODULE_3__["default"], { onChange: function (str) {
-                    setStringForFilter(str);
-                } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_containers_ScrollableContainer_ScrollableContainer__WEBPACK_IMPORTED_MODULE_5__["default"], { className: "dialogs-with-search-list", data: filteredDialogs, renderItem: renderItem, onEndReachedThreshold: 0.8, refreshing: false })] })));
-};
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (DialogsWithSearch);
-
-
-/***/ }),
-
-/***/ "./src/Presentation/Views/Dialog/ForwardMessageFlow/DialogsWithSearch/SearchComponent/SearchComponent.tsx":
-/*!****************************************************************************************************************!*\
-  !*** ./src/Presentation/Views/Dialog/ForwardMessageFlow/DialogsWithSearch/SearchComponent/SearchComponent.tsx ***!
-  \****************************************************************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
-/* harmony export */ });
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/react/jsx-runtime.js");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _SearchComponent_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./SearchComponent.scss */ "./src/Presentation/Views/Dialog/ForwardMessageFlow/DialogsWithSearch/SearchComponent/SearchComponent.scss");
-/* harmony import */ var _components_UI_svgs_Icons_Navigation_Search__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../components/UI/svgs/Icons/Navigation/Search */ "./src/Presentation/components/UI/svgs/Icons/Navigation/Search/index.tsx");
-/* harmony import */ var _components_UI_svgs_Icons_Actions_Remove__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../../components/UI/svgs/Icons/Actions/Remove */ "./src/Presentation/components/UI/svgs/Icons/Actions/Remove/index.tsx");
-var __assign = (undefined && undefined.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-
-
-
-
-// eslint-disable-next-line react/function-component-definition
-var SearchComponent = function (_a) {
-    var onChange = _a.onChange;
-    var _b = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(''), stringForFilter = _b[0], setStringForFilter = _b[1];
     (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
-        onChange(stringForFilter);
+        setFilteredDialogs(filterDialogsByName(stringForFilter, currentDialog.id));
     }, [stringForFilter]);
-    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "search-component" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "search-component-field" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "search-component-field-left" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "search-component-field-left-icon" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_UI_svgs_Icons_Navigation_Search__WEBPACK_IMPORTED_MODULE_3__["default"], { applyZoom: true, width: "24", height: "24", color: "var(--tertiary-elements)" }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "search-component-field-left-input" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "text", style: { width: '280px' }, value: stringForFilter, onChange: function (event) {
-                                        setStringForFilter(event.target.value);
-                                    }, placeholder: "Search" }), stringForFilter.length > 0 ? ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ style: { cursor: 'pointer' }, onClick: function () {
-                                        setStringForFilter('');
-                                    } }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_UI_svgs_Icons_Actions_Remove__WEBPACK_IMPORTED_MODULE_4__["default"], { width: "24", height: "24", color: "var(--tertiary-elements)" }) }))) : null] }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "search-component-field-right" })] })) })));
+    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "dialogs-with-search-body" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components__WEBPACK_IMPORTED_MODULE_6__.TextField, { icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_icons__WEBPACK_IMPORTED_MODULE_7__.SearchSvg, { className: "dialogs-with-search-icon" }), value: stringForFilter, onChange: function (value) { return setStringForFilter(value); }, placeholder: "Search", className: "dialogs-with-search-text-field" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_containers_ScrollableContainer_ScrollableContainer__WEBPACK_IMPORTED_MODULE_4__["default"], { className: "dialogs-with-search-list", data: filteredDialogs, renderItem: renderItem, onEndReachedThreshold: 0.8, refreshing: false })] })));
 };
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SearchComponent);
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (DialogsWithSearch);
 
 
 /***/ }),
@@ -23530,7 +23579,7 @@ function reducer(state, action) {
 }
 function MessageItem(_a) {
     var _b, _c, _d, _e, _f, _g;
-    var message = _a.message, userId = _a.userId, enableForwarding = _a.enableForwarding, enableReplying = _a.enableReplying, onReply = _a.onReply, onForward = _a.onForward, 
+    var message = _a.message, currentUserId = _a.currentUserId, enableForwarding = _a.enableForwarding, enableReplying = _a.enableReplying, onReply = _a.onReply, onForward = _a.onForward, 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     listRef = _a.listRef, messagesToView = _a.messagesToView, AITranslateWidget = _a.AITranslateWidget, AIAssistWidget = _a.AIAssistWidget, maxTokens = _a.maxTokens, defaultTranslationLanguage = _a.defaultTranslationLanguage, languagesForAITranslate = _a.languagesForAITranslate, onError = _a.onError;
     var messageStates = {};
@@ -23549,8 +23598,8 @@ function MessageItem(_a) {
         if (m.notification_type && m.notification_type.length > 0) {
             return TypeSystemMessage;
         }
-        if ((m.sender && m.sender.id.toString() !== (userId === null || userId === void 0 ? void 0 : userId.toString())) ||
-            m.sender_id.toString() !== (userId === null || userId === void 0 ? void 0 : userId.toString())) {
+        if ((m.sender && m.sender.id.toString() !== (currentUserId === null || currentUserId === void 0 ? void 0 : currentUserId.toString())) ||
+            m.sender_id.toString() !== (currentUserId === null || currentUserId === void 0 ? void 0 : currentUserId.toString())) {
             return TypeIncomingMessage;
         }
         return TypeOutgoingMessage;
@@ -23562,8 +23611,12 @@ function MessageItem(_a) {
         dispatch({ type: 'SET_LOADING', id: id, payload: isFetching });
     }
     function getStatusMessage(messageEntity) {
-        if (messageEntity.delivered_ids && messageEntity.delivered_ids.length > 0) {
-            if (messageEntity.read_ids && messageEntity.read_ids.length > 0) {
+        if (messageEntity.delivered_ids &&
+            messageEntity.delivered_ids.length > 0 &&
+            messageEntity.delivered_ids.some(function (id) { return id !== currentUserId; })) {
+            if (messageEntity.read_ids &&
+                messageEntity.read_ids.length > 0 &&
+                messageEntity.read_ids.some(function (id) { return id !== currentUserId; })) {
                 return 'viewed';
             }
             return 'delivered';
@@ -23578,7 +23631,7 @@ function MessageItem(_a) {
                         ? state[item.id].loading
                         : false, onLoading: function (isFetching, id) {
                         return fetchingHandler(isFetching, id);
-                    }, onError: onError, messageToAssist: item, messageHistory: messagesToView, currentUserId: userId, maxTokens: maxTokens }))] })));
+                    }, onError: onError, messageToAssist: item, messageHistory: messagesToView, currentUserId: currentUserId, maxTokens: maxTokens }))] })));
     }
     function renderForwardedReplyMessageSegment(currentMessageType) {
         var _a;
@@ -23595,7 +23648,7 @@ function MessageItem(_a) {
                                 ? state[nestedMessage.id].loading
                                 : false, onLoading: function (isFetching, id) {
                                 return fetchingHandler(isFetching, id);
-                            }, onError: onError, messageToTranslate: nestedMessage, messageHistory: messagesToView, currentUserId: userId, maxTokens: maxTokens, onTranslated: function (id, textTranslated) {
+                            }, onError: onError, messageToTranslate: nestedMessage, messageHistory: messagesToView, currentUserId: currentUserId, maxTokens: maxTokens, onTranslated: function (id, textTranslated) {
                                 return translatedHandler(id, textTranslated);
                             } })) : undefined, additionalPart: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "message-item-additional-part" }, { children: renderAdditionalPart(currentMessageType, nestedMessage) })) }, { children: nestedMessage.attachments &&
                             nestedMessage.attachments.length > 0 ? ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { children: nestedMessage.attachments.map(function (attachment) {
@@ -23623,7 +23676,7 @@ function MessageItem(_a) {
                             ? state[message.id].loading
                             : false, onLoading: function (isFetching, id) {
                             return fetchingHandler(isFetching, id);
-                        }, onError: onError, messageToTranslate: message, messageHistory: messagesToView, currentUserId: userId, maxTokens: maxTokens, onTranslated: function (id, textTranslated) {
+                        }, onError: onError, messageToTranslate: message, messageHistory: messagesToView, currentUserId: currentUserId, maxTokens: maxTokens, onTranslated: function (id, textTranslated) {
                             return translatedHandler(id, textTranslated);
                         } })) : undefined, additionalPart: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "message-item-additional-part" }, { children: renderAdditionalPart(messageTypes, message) })) }, { children: message.attachments && message.attachments.length > 0 ? ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { children: message.attachments.map(function (attachment) {
                             return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components_Message_Bubble_AttachmentBubble_AttachmentBubble__WEBPACK_IMPORTED_MODULE_5__["default"], { attachment: attachment, typeMessage: messageTypes }));
@@ -23760,12 +23813,12 @@ function useDialogViewModel(dialogType, dialogEntity) {
     var _a;
     console.log('useDialogViewModel');
     var _b = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false), loading = _b[0], setLoading = _b[1];
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     var _c = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(''), error = _c[0], setError = _c[1];
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var _d = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]), messages = _d[0], setMessages = _d[1];
+    var startPagination = new _Domain_repository_Pagination__WEBPACK_IMPORTED_MODULE_7__.Pagination(0, 0);
+    var _d = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(startPagination), pagination = _d[0], setPagination = _d[1];
+    var _e = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)([]), messages = _e[0], setMessages = _e[1];
     // const [users, setUsers] = useState<Record<number, UserEntity>>();
-    var _e = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(dialogEntity), dialog = _e[0], setDialog = _e[1];
+    var _f = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(dialogEntity), dialog = _f[0], setDialog = _f[1];
     // const [dialogsParticipants, setDialogsParticipants] = useState<number[]>([]);
     var currentContext = (0,_providers_QuickBloxUIKitProvider_useQbInitializedDataContext__WEBPACK_IMPORTED_MODULE_2__["default"])();
     var QBConfig = currentContext.InitParams.qbConfig ||
@@ -23773,16 +23826,15 @@ function useDialogViewModel(dialogType, dialogEntity) {
     var regexUserName = QBConfig.appConfig.regexUserName;
     var regex = regexUserName ? new RegExp(regexUserName) : null;
     var eventMessaging = (0,_providers_QuickBloxUIKitProvider_useEventMessagesRepository__WEBPACK_IMPORTED_MODULE_13__["default"])();
-    var _f = currentContext.storage, REMOTE_DATA_SOURCE = _f.REMOTE_DATA_SOURCE, LOCAL_DATA_SOURCE = _f.LOCAL_DATA_SOURCE;
+    var _g = currentContext.storage, REMOTE_DATA_SOURCE = _g.REMOTE_DATA_SOURCE, LOCAL_DATA_SOURCE = _g.LOCAL_DATA_SOURCE;
     var subscribeToDialogEventsUseCase = new _Domain_use_cases_SubscribeToDialogEventsUseCase__WEBPACK_IMPORTED_MODULE_12__.SubscribeToDialogEventsUseCase(eventMessaging, 'MessagesViewModel');
-    var _g = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(''), typingText = _g[0], setTypingText = _g[1];
-    function getMessages(pagination) {
+    var _h = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(''), typingText = _h[0], setTypingText = _h[1];
+    function getMessages(currentPagination) {
         return __awaiter(this, void 0, void 0, function () {
             var participants, userDictionary, getAllUsersFromDialogByIdsUseCase, getDialogMessages;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        console.log('call getMessages in MessagesViewModelWithMockUseCase for dialog: ', JSON.stringify(dialog));
                         setLoading(true);
                         participants = [];
                         userDictionary = {};
@@ -23801,8 +23853,6 @@ function useDialogViewModel(dialogType, dialogEntity) {
                                 .execute()
                                 // eslint-disable-next-line promise/always-return
                                 .then(function (data) {
-                                console.log("use Message have dialog: ".concat(JSON.stringify(dialogEntity), " getUsers:").concat(JSON.stringify(data)));
-                                console.log('have users ids :', JSON.stringify(participants));
                                 userDictionary = data.reduce(function (acc, item) {
                                     var obj = acc;
                                     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -23810,7 +23860,6 @@ function useDialogViewModel(dialogType, dialogEntity) {
                                     acc[item.id] = item;
                                     return obj;
                                 }, {});
-                                console.log('have dictionary of users:', JSON.stringify(userDictionary));
                                 setLoading(false);
                                 setError('');
                             })
@@ -23822,14 +23871,14 @@ function useDialogViewModel(dialogType, dialogEntity) {
                     case 1:
                         //
                         _a.sent();
-                        getDialogMessages = new _Domain_use_cases_GetAllMessagesForDialog__WEBPACK_IMPORTED_MODULE_5__.GetAllMessagesForDialogMock(new _Data_repository_MessagesRepository__WEBPACK_IMPORTED_MODULE_6__["default"](LOCAL_DATA_SOURCE, REMOTE_DATA_SOURCE), dialog.id, pagination || new _Domain_repository_Pagination__WEBPACK_IMPORTED_MODULE_7__.Pagination());
+                        getDialogMessages = new _Domain_use_cases_GetAllMessagesForDialog__WEBPACK_IMPORTED_MODULE_5__.GetAllMessagesForDialogMock(new _Data_repository_MessagesRepository__WEBPACK_IMPORTED_MODULE_6__["default"](LOCAL_DATA_SOURCE, REMOTE_DATA_SOURCE), dialog.id, currentPagination || startPagination || new _Domain_repository_Pagination__WEBPACK_IMPORTED_MODULE_7__.Pagination());
                         //
                         return [4 /*yield*/, getDialogMessages
                                 .execute()
                                 // eslint-disable-next-line promise/always-return
                                 .then(function (data) {
-                                console.log("DIALOG: ".concat(JSON.stringify(dialogEntity), " WITH ").concat(data.length, " messages:").concat(JSON.stringify(data)));
-                                var ResultMessages = data.map(function (message) {
+                                console.log("DIALOG: ".concat(JSON.stringify(dialogEntity), " WITH ").concat(data.ResultData.length, " messages:").concat(JSON.stringify(data)));
+                                var ResultMessages = data.ResultData.map(function (message) {
                                     var obj = __assign({}, message);
                                     console.log('have sender id:', message.sender_id);
                                     if (userDictionary) {
@@ -23844,8 +23893,15 @@ function useDialogViewModel(dialogType, dialogEntity) {
                                     return obj;
                                 });
                                 console.log("result messages:".concat(JSON.stringify(ResultMessages)));
-                                setMessages(ResultMessages);
+                                // setMessages(ResultMessages);
+                                setMessages(function (prevState) {
+                                    var newItems = currentPagination === undefined ||
+                                        (currentPagination === null || currentPagination === void 0 ? void 0 : currentPagination.getCurrentPage()) === 0
+                                        ? __spreadArray([], ResultMessages, true) : __spreadArray(__spreadArray([], prevState, true), ResultMessages, true);
+                                    return newItems;
+                                });
                                 setLoading(false);
+                                setPagination(data.CurrentPagination);
                                 setError('');
                             })
                                 .catch(function (e) {
@@ -23886,10 +23942,12 @@ function useDialogViewModel(dialogType, dialogEntity) {
         });
     }); };
     var dialogUpdateHandler = function (dialogInfo) {
+        var _a;
         console.log('call dialogUpdateHandler in useDialogViewModel');
         if (dialogInfo.eventMessageType === _Domain_entity_EventMessageType__WEBPACK_IMPORTED_MODULE_14__["default"].LocalMessage) {
             if (dialogInfo.messageStatus) {
-                if (dialogInfo.messageStatus.isTyping) {
+                if (dialogInfo.messageStatus.isTyping &&
+                    dialogInfo.messageStatus.dialogId === (dialog === null || dialog === void 0 ? void 0 : dialog.id)) {
                     // eslint-disable-next-line promise/catch-or-return
                     getSender(dialogInfo.messageStatus.userId).then(function (senderUser) {
                         var typingMessage = "User ".concat(
@@ -23905,13 +23963,32 @@ function useDialogViewModel(dialogType, dialogEntity) {
                 else {
                     setTypingText('');
                 }
+                if ((dialogInfo.messageStatus.deliveryStatus === 'read' ||
+                    dialogInfo.messageStatus.deliveryStatus === 'delivered') &&
+                    ((_a = dialogInfo.messageStatus.messageId) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+                    dialogInfo.messageStatus.dialogId === (dialog === null || dialog === void 0 ? void 0 : dialog.id)) {
+                    setMessages(function (prevState) {
+                        var newState = __spreadArray([], prevState, true);
+                        if (newState.find(function (it) { return it.id === dialogInfo.messageStatus.messageId; })) {
+                            newState = newState.map(function (elem) {
+                                var v = __assign(__assign({}, elem), { read_ids: __spreadArray(__spreadArray([], elem.read_ids, true), [
+                                        dialogInfo.messageStatus.userId,
+                                    ], false), delivered_ids: __spreadArray(__spreadArray([], elem.delivered_ids, true), [
+                                        dialogInfo.messageStatus.userId,
+                                    ], false) });
+                                return v;
+                            });
+                        }
+                        return newState; // delivered message
+                    });
+                }
             }
         }
         if (dialogInfo.eventMessageType === _Domain_entity_EventMessageType__WEBPACK_IMPORTED_MODULE_14__["default"].RegularMessage) {
             if (dialogInfo.messageInfo &&
                 dialogInfo.messageInfo.message &&
                 dialogInfo.messageInfo.id &&
-                dialogInfo.messageInfo.dialogId === dialog.id) {
+                dialogInfo.messageInfo.dialogId === (dialog === null || dialog === void 0 ? void 0 : dialog.id)) {
                 var messageId_1 = dialogInfo.messageInfo.id;
                 var messageText = dialogInfo.messageInfo.message;
                 console.log("new message id = ".concat(messageId_1, ", new message text: ").concat(messageText, ", found messages:"));
@@ -23928,21 +24005,17 @@ function useDialogViewModel(dialogType, dialogEntity) {
                         var newState = __spreadArray([], prevState, true);
                         if (newState.find(function (it) { return it.id === messageId_1; })) {
                             newState = newState.map(function (elem) {
-                                var v = __assign(__assign({}, elem), { delivered_ids: ResultMessage_1.delivered_ids });
+                                var v = __assign(__assign({}, elem), { read_ids: __spreadArray(__spreadArray([], elem.read_ids, true), ResultMessage_1.read_ids, true), delivered_ids: __spreadArray(__spreadArray([], elem.delivered_ids, true), ResultMessage_1.delivered_ids, true) });
                                 return v;
                             });
                         }
                         else {
                             newState.push(ResultMessage_1);
                         }
-                        return newState;
+                        return newState; // regular message
                     });
                 });
             }
-            // else {
-            //   // загрузить все сообщения заново
-            //   getMessages().catch();
-            // }
         }
         if (dialogInfo.eventMessageType === _Domain_entity_EventMessageType__WEBPACK_IMPORTED_MODULE_14__["default"].SystemMessage) {
             if (dialogInfo.notificationTypes === _Domain_entity_NotificationTypes__WEBPACK_IMPORTED_MODULE_15__.NotificationTypes.UPDATE_DIALOG) {
@@ -24430,6 +24503,7 @@ function useDialogViewModel(dialogType, dialogEntity) {
             setMessages([]);
         },
         messages: messages,
+        pagination: pagination,
         loading: loading,
         error: error,
         // eslint-disable-next-line @typescript-eslint/no-misused-promises
@@ -24768,11 +24842,11 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _MembersList_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./MembersList.scss */ "./src/Presentation/Views/DialogInfo/MembersList/MembersList.scss");
-/* harmony import */ var _components_UI_svgs_Icons_Navigation_Search__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../components/UI/svgs/Icons/Navigation/Search */ "./src/Presentation/components/UI/svgs/Icons/Navigation/Search/index.tsx");
-/* harmony import */ var _UsersList_UsersList__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../UsersList/UsersList */ "./src/Presentation/Views/DialogInfo/UsersList/UsersList.tsx");
-/* harmony import */ var _ui_components_Header_Header__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../ui-components/Header/Header */ "./src/Presentation/ui-components/Header/Header.tsx");
-/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../icons */ "./src/Presentation/icons/index.ts");
-/* harmony import */ var _ui_components_Badge_Badge__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../ui-components/Badge/Badge */ "./src/Presentation/ui-components/Badge/Badge.tsx");
+/* harmony import */ var _UsersList_UsersList__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../UsersList/UsersList */ "./src/Presentation/Views/DialogInfo/UsersList/UsersList.tsx");
+/* harmony import */ var _ui_components_Header_Header__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../ui-components/Header/Header */ "./src/Presentation/ui-components/Header/Header.tsx");
+/* harmony import */ var _icons__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../icons */ "./src/Presentation/icons/index.ts");
+/* harmony import */ var _ui_components_Badge_Badge__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../ui-components/Badge/Badge */ "./src/Presentation/ui-components/Badge/Badge.tsx");
+/* harmony import */ var _ui_components__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../ui-components */ "./src/Presentation/ui-components/index.ts");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -24821,9 +24895,7 @@ var MembersList = function (_a) {
             setMembersListFilter(__spreadArray([], members, true));
         }
     }, [userNameForFilter]);
-    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "members-container" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components_Header_Header__WEBPACK_IMPORTED_MODULE_5__["default"], __assign({ title: "Members", badge: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components_Badge_Badge__WEBPACK_IMPORTED_MODULE_7__["default"], { count: members.length, mute: true, limit: 9 }), className: "members-container-header" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_icons__WEBPACK_IMPORTED_MODULE_6__.CloseSvg, { onClick: closeInformationHandler, className: "members-container-header-icon" }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "members-container-search" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "members-container-search-text-field" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "members-container-search-text-field-f" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "members-container-search-text-field-f-left" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "members-container-search-text-field-f-left-icon" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_UI_svgs_Icons_Navigation_Search__WEBPACK_IMPORTED_MODULE_3__["default"], { applyZoom: true, width: "24", height: "24", color: "var(--tertiary-elements)" }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "members-container-search-text-field-f-left-input" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "text", value: userNameForFilter, onChange: function (event) {
-                                                setUserNameForFilter(event.target.value);
-                                            }, placeholder: "Search" }) }))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { className: "members-container-search-text-field-f-right" })] })) })) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "members-container-members-list-wrapper" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_UsersList_UsersList__WEBPACK_IMPORTED_MODULE_4__["default"], { maxHeight: maxHeight, usersFirstPageToView: __spreadArray([], membersListFilter, true), allUsers: __spreadArray([], membersListFilter, true), usersInDialogCount: membersListFilter.length }) }))] })));
+    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "members-container" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components_Header_Header__WEBPACK_IMPORTED_MODULE_4__["default"], __assign({ title: "Members", badge: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components_Badge_Badge__WEBPACK_IMPORTED_MODULE_6__["default"], { count: members.length, mute: true, limit: 9 }), className: "members-container-header" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_icons__WEBPACK_IMPORTED_MODULE_5__.CloseSvg, { onClick: closeInformationHandler, className: "members-container-header-icon" }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components__WEBPACK_IMPORTED_MODULE_7__.TextField, { placeholder: "Search", onChange: function (value) { return setUserNameForFilter(value); }, value: userNameForFilter, icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_icons__WEBPACK_IMPORTED_MODULE_5__.SearchSvg, { className: "members-container-text-field-icon" }), className: "members-container-text-field" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "members-container-members-list-wrapper" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_UsersList_UsersList__WEBPACK_IMPORTED_MODULE_3__["default"], { maxHeight: maxHeight, usersFirstPageToView: __spreadArray([], membersListFilter, true), allUsers: __spreadArray([], membersListFilter, true), usersInDialogCount: membersListFilter.length }) }))] })));
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MembersList);
 
@@ -25360,6 +25432,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _Domain_use_cases_GetUsersByIdsUseCase__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../../../Domain/use_cases/GetUsersByIdsUseCase */ "./src/Domain/use_cases/GetUsersByIdsUseCase.ts");
 /* harmony import */ var _Data_repository_UsersRepository__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ../../../Data/repository/UsersRepository */ "./src/Data/repository/UsersRepository.ts");
 /* harmony import */ var _Data_DefaultConfigurations__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ../../../Data/DefaultConfigurations */ "./src/Data/DefaultConfigurations.ts");
+/* harmony import */ var _Domain_use_cases_UpdateCurrentDialogInDataSourceUseCase__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ../../../Domain/use_cases/UpdateCurrentDialogInDataSourceUseCase */ "./src/Domain/use_cases/UpdateCurrentDialogInDataSourceUseCase.ts");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -25435,6 +25508,7 @@ var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from
 
 
 
+
 
 
 function useDialogListViewModel(currentContext, initPagination) {
@@ -25518,6 +25592,7 @@ function useDialogListViewModel(currentContext, initPagination) {
         });
     }
     var dialogUpdateHandler = function (dialogInfo) {
+        console.log('call dialogUpdateHandler in useDialogListView:', dialogInfo);
         if (dialogInfo.eventMessageType === _Domain_entity_EventMessageType__WEBPACK_IMPORTED_MODULE_13__["default"].SystemMessage
         // || dialogInfo.eventMessageType === EventMessageType.RegularMessage
         ) {
@@ -25542,11 +25617,52 @@ function useDialogListViewModel(currentContext, initPagination) {
                     dialogInfo.messageInfo.dialogId === (newDialog === null || newDialog === void 0 ? void 0 : newDialog.id)) {
                     setNewDialog(undefined);
                 }
-                getDialogs(pagination);
+                getDialogs(pagination).catch();
             }
             else if (dialogInfo.notificationTypes === _Domain_entity_NotificationTypes__WEBPACK_IMPORTED_MODULE_14__.NotificationTypes.NEW_DIALOG) {
-                // const pagination: Pagination = new Pagination();
-                getDialogs(pagination).catch();
+                if (dialogInfo.messageInfo) {
+                    var dialogId = dialogInfo.messageInfo.dialogId;
+                    var getDialogByIdUseCase = new _Domain_use_cases_GetDialogByIdUseCase__WEBPACK_IMPORTED_MODULE_15__.GetDialogByIdUseCase(new _Data_repository_DialogsRepository__WEBPACK_IMPORTED_MODULE_3__["default"](currentContext.storage.LOCAL_DATA_SOURCE, currentContext.storage.REMOTE_DATA_SOURCE), dialogId);
+                    // eslint-disable-next-line promise/catch-or-return,promise/always-return
+                    getDialogByIdUseCase
+                        .execute()
+                        // eslint-disable-next-line promise/always-return
+                        .then(function (newItem) {
+                        //
+                        setDialogs(function (prevDialogs) {
+                            var newDialogs = __spreadArray(__spreadArray([], prevDialogs, true), [
+                                newItem,
+                            ], false);
+                            var sortedData = __spreadArray([], newDialogs, true).sort(function (a, b) {
+                                return (new Date(b.updatedAt).getTime() -
+                                    new Date(a.updatedAt).getTime());
+                            });
+                            return sortedData;
+                        });
+                        //
+                    })
+                        .catch(function (e) {
+                        console.log('Error getDialogByIdUseCase: ', (0,_utils_parse__WEBPACK_IMPORTED_MODULE_6__.stringifyError)(e));
+                    });
+                }
+                // getDialogs(pagination).catch();
+            }
+        }
+        else if (dialogInfo.eventMessageType === _Domain_entity_EventMessageType__WEBPACK_IMPORTED_MODULE_13__["default"].LocalMessage) {
+            if (dialogInfo.dialogInfo) {
+                setDialogs(function (prevDialogs) {
+                    var newDialogs = prevDialogs.map(function (dialog) {
+                        var _a;
+                        if (dialog.id === ((_a = dialogInfo.dialogInfo) === null || _a === void 0 ? void 0 : _a.id)) {
+                            return dialogInfo.dialogInfo;
+                        }
+                        return dialog;
+                    });
+                    var sortedData = __spreadArray([], newDialogs, true).sort(function (a, b) {
+                        return (new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime());
+                    });
+                    return sortedData;
+                });
             }
         }
     };
@@ -25736,12 +25852,21 @@ function useDialogListViewModel(currentContext, initPagination) {
             }
         });
     }); };
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/no-empty-function
+    function informDataSources(item) {
+        var updateCurrentDialogInDataSourceUseCase = new _Domain_use_cases_UpdateCurrentDialogInDataSourceUseCase__WEBPACK_IMPORTED_MODULE_21__.UpdateCurrentDialogInDataSourceUseCase(new _Data_repository_DialogsRepository__WEBPACK_IMPORTED_MODULE_3__["default"](currentContext.storage.LOCAL_DATA_SOURCE, remoteDataSourceMock), item);
+        updateCurrentDialogInDataSourceUseCase.execute().catch(function (e) {
+            console.log('Error updateCurrentDialogInDataSourceUseCase: ', (0,_utils_parse__WEBPACK_IMPORTED_MODULE_6__.stringifyError)(e));
+            throw new Error((0,_utils_parse__WEBPACK_IMPORTED_MODULE_6__.stringifyError)(e));
+        });
+    }
     return {
         get entity() {
             return newDialog;
         },
         set entity(item) {
             setNewDialog(item);
+            informDataSources(item);
         },
         dialogs: dialogs,
         loading: loading,
@@ -25829,7 +25954,7 @@ var EditDialog = function (_a) {
         nameDialog.length > maxLengthNameDialog), disabledButton = _h[0], setDisabledButton = _h[1];
     var _j = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(''), errorMessageUpload = _j[0], setErrorMessageUpload = _j[1];
     var handleUploadAvatar = function (event) {
-        var allowedExtensions = ['jpg', 'jpeg', 'gif', 'png', 'heic', 'heif'];
+        var allowedExtensions = ['jpg', 'jpeg', 'gif', 'png'];
         setErrorMessageUpload('');
         var reader = new FileReader();
         var file = event.currentTarget.files
@@ -25838,7 +25963,7 @@ var EditDialog = function (_a) {
         if (file === null)
             return;
         if (!allowedExtensions.includes(file.type.split('/')[1])) {
-            setErrorMessageUpload('Unsupported file format. Please use JPG, JPEG, PNG, HEIC, HEIF, or GIF.');
+            setErrorMessageUpload('Please use JPG, JPEG, PNG, or GIF.');
             return;
         }
         var fileSize = (file === null || file === void 0 ? void 0 : file.size) || 0;
@@ -25898,7 +26023,7 @@ var EditDialog = function (_a) {
                                                 cursor: typeDialog !== _Domain_entity_DialogTypes__WEBPACK_IMPORTED_MODULE_7__.DialogType["private"] ? 'pointer' : '',
                                             } }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { children: typeDialog !== _Domain_entity_DialogTypes__WEBPACK_IMPORTED_MODULE_7__.DialogType["private"] ? 'Upload' : '' }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { id: "uploadBtn", type: "file", accept: "image/*", style: { display: 'none' }, onChange: function (event) {
                                                         handleUploadAvatar(event);
-                                                    }, disabled: typeDialog === _Domain_entity_DialogTypes__WEBPACK_IMPORTED_MODULE_7__.DialogType["private"] })] })) }))] })), errorMessageUpload.length > 0 ? ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "edit-dialog-container--wrapper__upload-error" }, { children: errorMessageUpload }))) : null, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "edit-dialog-container--wrapper__dialog-name-inf" }, { children: "Dialog name" })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "edit-dialog-container--wrapper__dialog-name-input" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input", { type: "text", style: { width: '100%' }, value: (dialogName === null || dialogName === void 0 ? void 0 : dialogName.length) > 0 ? dialogName : undefined, onChange: function (event) { return setDialogName(event.target.value); }, placeholder: "Enter name" }) }))] })) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "edit-btn-container" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_containers_RowRightContainer_RowRightContainer__WEBPACK_IMPORTED_MODULE_5__["default"], { minHeightContainer: "32px", gapBetweenItem: "8px", RightContainerSize: {
+                                                    }, disabled: typeDialog === _Domain_entity_DialogTypes__WEBPACK_IMPORTED_MODULE_7__.DialogType["private"] })] })) }))] })), errorMessageUpload.length > 0 ? ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "edit-dialog-container--wrapper__upload-error" }, { children: errorMessageUpload }))) : null, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "edit-dialog-container--wrapper__dialog-name-inf" }, { children: "Dialog name" })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components__WEBPACK_IMPORTED_MODULE_11__.TextField, { value: dialogName, onChange: function (value) { return setDialogName(value); }, placeholder: "Enter name", className: "edit-dialog-container--wrapper__text-field" })] })) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "edit-btn-container" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_containers_RowRightContainer_RowRightContainer__WEBPACK_IMPORTED_MODULE_5__["default"], { minHeightContainer: "32px", gapBetweenItem: "8px", RightContainerSize: {
                             flexBasis: '63px',
                             minWidth: '63px',
                             maxWidth: '63px',
@@ -26244,7 +26369,7 @@ var __assign = (undefined && undefined.__assign) || function () {
 // eslint-disable-next-line react/function-component-definition,@typescript-eslint/no-unused-vars
 var InviteMembers = function (_a) {
     var typeDialog = _a.typeDialog, idOwnerDialog = _a.idOwnerDialog, typeAddEditDialog = _a.typeAddEditDialog, applyInviteUsersHandler = _a.applyInviteUsersHandler, participants = _a.participants, cancelInviteMembersHandler = _a.cancelInviteMembersHandler;
-    var userperPage = 12;
+    var userPerPage = 12;
     var userViewModel = (0,_useInviteMembersViewModel__WEBPACK_IMPORTED_MODULE_7__["default"])();
     var initRecord = {};
     if ((participants === null || participants === void 0 ? void 0 : participants.length) && (participants === null || participants === void 0 ? void 0 : participants.length) > 0) {
@@ -26255,8 +26380,16 @@ var InviteMembers = function (_a) {
     var _b = react__WEBPACK_IMPORTED_MODULE_1___default().useState(initRecord), selectedItems = _b[0], setSelectedItems = _b[1];
     var _c = react__WEBPACK_IMPORTED_MODULE_1___default().useState(participants ? participants === null || participants === void 0 ? void 0 : participants.length : 0), countSelectedItems = _c[0], setCountSelected = _c[1];
     (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
-        userViewModel.getUsers(new _Domain_repository_Pagination__WEBPACK_IMPORTED_MODULE_8__.Pagination(0, userperPage));
+        userViewModel.getUsers(new _Domain_repository_Pagination__WEBPACK_IMPORTED_MODULE_8__.Pagination(0, userPerPage));
     }, []);
+    var fetchMoreData = function () {
+        if (userViewModel.pagination.hasNextPage()) {
+            var newPagination = userViewModel.pagination;
+            newPagination.perPage = userPerPage;
+            newPagination.nextPage();
+            userViewModel.getUsers(newPagination);
+        }
+    };
     var getUsersForIncludeInDialog = function () {
         var listSelectedUsers = [];
         Object.entries(selectedItems).map(function (x) {
@@ -26303,14 +26436,6 @@ var InviteMembers = function (_a) {
         });
         setCountSelected(getUsersForIncludeInDialog().length);
     };
-    var fetchMoreData = function () {
-        if (userViewModel.pagination.hasNextPage()) {
-            var newPagination = userViewModel.pagination;
-            newPagination.perPage = 12;
-            newPagination.nextPage();
-            userViewModel.getUsers(newPagination);
-        }
-    };
     var _d = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(''), userNameForFilter = _d[0], setUserNameForFilter = _d[1];
     (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
         if (userNameForFilter.length > 2) {
@@ -26323,10 +26448,10 @@ var InviteMembers = function (_a) {
     }, [userNameForFilter]);
     (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
         if (userNameForFilter.length > 2) {
-            userViewModel.getUsers(new _Domain_repository_Pagination__WEBPACK_IMPORTED_MODULE_8__.Pagination(0, userperPage));
+            userViewModel.getUsers(new _Domain_repository_Pagination__WEBPACK_IMPORTED_MODULE_8__.Pagination(0, userPerPage));
         }
         if (userNameForFilter.length === 0) {
-            userViewModel.getUsers(new _Domain_repository_Pagination__WEBPACK_IMPORTED_MODULE_8__.Pagination(0, userperPage));
+            userViewModel.getUsers(new _Domain_repository_Pagination__WEBPACK_IMPORTED_MODULE_8__.Pagination(0, userPerPage));
         }
     }, [userViewModel.filter]);
     return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_containers_ColumnContainer_ColumnContainer__WEBPACK_IMPORTED_MODULE_3__["default"], __assign({ gapBetweenItem: "8px" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "container-invite-members" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "container-invite-members--add-members-container" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "container-invite-members--add-members-container--wrapper" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components_TextField_TextField__WEBPACK_IMPORTED_MODULE_15__["default"], { className: "filtered-text-field", disabled: userViewModel.loading, placeholder: "Search", icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_icons__WEBPACK_IMPORTED_MODULE_14__.SearchSvg, { className: "filtered-text-field__icon" }), value: userNameForFilter, onChange: function (value) {
@@ -27841,39 +27966,6 @@ function TextDocument(theme) {
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (TextDocument);
 
 
-/***/ }),
-
-/***/ "./src/Presentation/components/UI/svgs/Icons/Navigation/Search/index.tsx":
-/*!*******************************************************************************!*\
-  !*** ./src/Presentation/components/UI/svgs/Icons/Navigation/Search/index.tsx ***!
-  \*******************************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
-/* harmony export */ });
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/react/jsx-runtime.js");
-var __assign = (undefined && undefined.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-function Search(theme) {
-    if (theme === void 0) { theme = undefined; }
-    return !(theme === null || theme === void 0 ? void 0 : theme.applyZoom) ? ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("svg", __assign({ width: theme && theme.width ? theme.width : '44', height: theme && theme.height ? theme.height : '44', viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("path", { d: "M28.8842 26.1342H27.4359L26.9225 25.6392C28.7192 23.5492 29.8009 20.8358 29.8009 17.8842C29.8009 11.3025 24.4659 5.9675 17.8842 5.9675C11.3025 5.9675 5.96753 11.3025 5.96753 17.8842C5.96753 24.4658 11.3025 29.8008 17.8842 29.8008C20.8359 29.8008 23.5492 28.7192 25.6392 26.9225L26.1342 27.4358V28.8842L35.3009 38.0325L38.0325 35.3008L28.8842 26.1342ZM17.8842 26.1342C13.3192 26.1342 9.6342 22.4492 9.6342 17.8842C9.6342 13.3192 13.3192 9.63417 17.8842 9.63417C22.4492 9.63417 26.1342 13.3192 26.1342 17.8842C26.1342 22.4492 22.4492 26.1342 17.8842 26.1342Z", id: "Search", fill: theme && theme.color ? theme.color : 'var(--color-icon)' }) }))) : ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("svg", __assign({ width: theme && theme.width ? theme.width : '24', height: theme && theme.height ? theme.height : '24', viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("path", { d: "M15.7551 14.2549H14.9651L14.6851 13.9849C15.6651 12.8449 16.2551 11.3649 16.2551 9.75488C16.2551 6.16488 13.3451 3.25488 9.75513 3.25488C6.16513 3.25488 3.25513 6.16488 3.25513 9.75488C3.25513 13.3449 6.16513 16.2549 9.75513 16.2549C11.3651 16.2549 12.8451 15.6649 13.9851 14.6849L14.2551 14.9649V15.7549L19.2551 20.7449L20.7451 19.2549L15.7551 14.2549ZM9.75513 14.2549C7.26513 14.2549 5.25513 12.2449 5.25513 9.75488C5.25513 7.26488 7.26513 5.25488 9.75513 5.25488C12.2451 5.25488 14.2551 7.26488 14.2551 9.75488C14.2551 12.2449 12.2451 14.2549 9.75513 14.2549Z", fill: theme && theme.color ? theme.color : 'var(--color-icon)' }) })));
-}
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Search);
-
-
 /***/ }),
 
 /***/ "./src/Presentation/components/UI/svgs/Icons/Status/Error/index.tsx":
@@ -28992,6 +29084,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _ui_components_Toast_ToastProvider__WEBPACK_IMPORTED_MODULE_38__ = __webpack_require__(/*! ../../ui-components/Toast/ToastProvider */ "./src/Presentation/ui-components/Toast/ToastProvider.tsx");
 /* harmony import */ var _Views_Flow_CreateDialogFlow_CreateNewDialogFlow__WEBPACK_IMPORTED_MODULE_39__ = __webpack_require__(/*! ../../Views/Flow/CreateDialogFlow/CreateNewDialogFlow */ "./src/Presentation/Views/Flow/CreateDialogFlow/CreateNewDialogFlow.tsx");
 /* harmony import */ var _hooks_useModal__WEBPACK_IMPORTED_MODULE_40__ = __webpack_require__(/*! ../../../hooks/useModal */ "./src/hooks/useModal.ts");
+/* harmony import */ var _providers_QuickBloxUIKitProvider_useQBConnection__WEBPACK_IMPORTED_MODULE_41__ = __webpack_require__(/*! ../../providers/QuickBloxUIKitProvider/useQBConnection */ "./src/Presentation/providers/QuickBloxUIKitProvider/useQBConnection.ts");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -29087,6 +29180,7 @@ var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from
 
 
 
+
 
 
 var QuickBloxUIKitDesktopLayout = function (_a) {
@@ -29115,11 +29209,22 @@ var QuickBloxUIKitDesktopLayout = function (_a) {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     var userName = (_b = currentContext.storage.REMOTE_DATA_SOURCE.authInformation) === null || _b === void 0 ? void 0 : _b.userName;
-    var userId = (_c = currentContext.storage.REMOTE_DATA_SOURCE.authInformation) === null || _c === void 0 ? void 0 : _c.userId;
-    // const currentUserName =
-    //  currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.userName;
+    var currentUserId = (_c = currentContext.storage.REMOTE_DATA_SOURCE.authInformation) === null || _c === void 0 ? void 0 : _c.userId;
     var sessionToken = (_d = currentContext.storage.REMOTE_DATA_SOURCE.authInformation) === null || _d === void 0 ? void 0 : _d.sessionToken;
     var dialogsViewModel = (0,_Views_DialogList_useDialogListViewModel__WEBPACK_IMPORTED_MODULE_10__["default"])(currentContext);
+    // must re-create as result dialog changing
+    var messagesViewModel = (0,_Views_Dialog_useDialogViewModel__WEBPACK_IMPORTED_MODULE_20__["default"])((_e = dialogsViewModel.entity) === null || _e === void 0 ? void 0 : _e.type, dialogsViewModel.entity);
+    var _w = (0,_providers_QuickBloxUIKitProvider_useQBConnection__WEBPACK_IMPORTED_MODULE_41__["default"])(), connectionRepository = _w.connectionRepository, browserOnline = _w.browserOnline;
+    var _x = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(browserOnline), isOnline = _x[0], setIsOnline = _x[1];
+    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
+        if (isOnline === false ||
+            connectionRepository.isChatConnected() === false) {
+            setIsOnline(false);
+        }
+        else {
+            setIsOnline(true);
+        }
+    }, [browserOnline, connectionRepository.isChatConnected()]);
     var defaultAIRephraseWidget = AIRephrase === null || AIRephrase === void 0 ? void 0 : AIRephrase.AIWidget; // useDefaultTextInputWidget();
     var defaultAITranslateWidget = AITranslate === null || AITranslate === void 0 ? void 0 : AITranslate.AIWidget;
     var defaultAIAssistWidget = AIAssist === null || AIAssist === void 0 ? void 0 : AIAssist.AIWidget;
@@ -29209,14 +29314,20 @@ var QuickBloxUIKitDesktopLayout = function (_a) {
     var selectDialogActions = function (item) {
         if (!dialogsViewModel.loading) {
             setSelectedDialog(item.entity);
+            // dialogsViewModel.entity = item.entity;
         }
     };
-    var _w = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false), showReplyMessage = _w[0], setShowReplyMessage = _w[1];
-    var _x = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)([]), messagesToReply = _x[0], setMessagesToReply = _x[1];
-    var _y = (0,_components_containers_SectionList_hooks__WEBPACK_IMPORTED_MODULE_25__.useMobileLayout)(), isMobile = _y[0], width = _y[1], height = _y[2], breakpoint = _y[3];
-    var _z = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(0), clientHeight = _z[0], setClientHeight = _z[1];
-    // const subscribeToDialogEventsUseCase: SubscribeToDialogEventsUseCase =
-    //   new SubscribeToDialogEventsUseCase(eventMessaging, 'TestStage');
+    var _y = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false), showReplyMessage = _y[0], setShowReplyMessage = _y[1];
+    var _z = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)([]), messagesToReply = _z[0], setMessagesToReply = _z[1];
+    var _0 = (0,_components_containers_SectionList_hooks__WEBPACK_IMPORTED_MODULE_25__.useMobileLayout)(), isMobile = _0[0], width = _0[1], height = _0[2], breakpoint = _0[3];
+    var _1 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(0), clientHeight = _1[0], setClientHeight = _1[1];
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    var _2 = react__WEBPACK_IMPORTED_MODULE_1___default().useState(false), scrollUpToDown = _2[0], setScrollUpToDown = _2[1];
+    // const [dialogMessagesCount, setDialogMessageCount] = useState(100);
+    // const [hasMore, setHasMore] = React.useState(true);
+    // const [messagesToView, setMessagesToView] = React.useState<MessageEntity[]>(
+    //   [],
+    // );
     // инициализация СДК и загрузка тестовых данных, запуск пинга - может не быть
     // todo: добавить метод в контекст
     var isAuthProcessed = function () {
@@ -29259,21 +29370,73 @@ var QuickBloxUIKitDesktopLayout = function (_a) {
             dialogsViewModel === null || dialogsViewModel === void 0 ? void 0 : dialogsViewModel.getDialogs(pagination);
         }
     }, [currentContext.InitParams]);
-    // const getCountDialogMembers = (dialogEntity: DialogEntity): number => {
-    //   let participants = [];
+    // const fetchMoreData = () => {
+    //   if (messagesToView.length >= dialogMessagesCount) {
+    //     setHasMore(false);
     //
-    //   if (dialogEntity.type === DialogType.group) {
-    //     participants = (dialogEntity as GroupDialogEntity).participantIds;
-    //   } else if (dialogEntity.type === DialogType.private) {
-    //     participants = [(dialogEntity as PrivateDialogEntity).participantId];
-    //   } else if (dialogEntity.type === DialogType.public) {
-    //     participants = [];
+    //     return;
     //   }
+    //   if (
+    //     hasMore &&
+    //     messagesToView.length > 0 &&
+    //     messagesToView.length < dialogMessagesCount
+    //   ) {
+    //     setMessagesToView((prevState) => {
+    //       const newState = [...prevState];
+    //
+    //       const newMessageEntity: MessageEntity =
+    //         messagesViewModel.messages[prevState.length];
     //
-    //   return participants.length;
+    //       newState.push(newMessageEntity);
+    //       // newState.unshift(newMessageEntity);
+    //
+    //       return newState;
+    //     });
+    //   }
     // };
+    // function prepareFirstPage(initData: MessageEntity[]) {
+    //   const firstPageSize = messagesViewModel.messages.length;
+    //
+    //   for (let i = firstPageSize - 1; i >= 0; i -= 1) {
+    //     initData.push(messagesViewModel.messages[i]);
+    //   }
+    // }
+    //
+    // useEffect(() => {
+    //   setDialogMessageCount(messagesViewModel?.messages?.length || 0);
+    //   if (messagesToView?.length === 0 && messagesViewModel.messages.length > 0) {
+    //     const initData: MessageEntity[] = [];
+    //
+    //     console.log(JSON.stringify(messagesViewModel.messages));
+    //     prepareFirstPage(initData);
+    //     setMessagesToView(initData);
+    //   } else if (messagesViewModel.messages.length - messagesToView.length >= 1) {
+    //     setHasMore(true);
+    //     setScrollUpToDown(true);
+    //   }
+    // }, [messagesViewModel.messages]);
+    //
+    // useEffect(() => {
+    //   if (messagesViewModel.messages.length - messagesToView.length >= 1) {
+    //     fetchMoreData();
+    //   }
+    // }, [dialogMessagesCount]);
+    var messagePerPage = 47;
+    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
+        if (messagesViewModel.entity) {
+            messagesViewModel.getMessages(new _Domain_repository_Pagination__WEBPACK_IMPORTED_MODULE_11__.Pagination(0, messagePerPage));
+        }
+    }, [messagesViewModel.entity]);
+    var fetchMoreData = function () {
+        if (messagesViewModel.pagination.hasNextPage()) {
+            var newPagination = messagesViewModel.pagination;
+            newPagination.perPage = messagePerPage;
+            newPagination.nextPage();
+            messagesViewModel.getMessages(newPagination);
+        }
+    };
     var userViewModel = (0,_Views_DialogInfo_UsersList_useUsersListViewModel__WEBPACK_IMPORTED_MODULE_28__["default"])(selectedDialog);
-    var _0 = react__WEBPACK_IMPORTED_MODULE_1___default().useState(''), dialogAvatarUrl = _0[0], setDialogAvatarUrl = _0[1];
+    var _3 = react__WEBPACK_IMPORTED_MODULE_1___default().useState(''), dialogAvatarUrl = _3[0], setDialogAvatarUrl = _3[1];
     var getUserAvatarByUid = function () { return __awaiter(void 0, void 0, void 0, function () {
         var result, participants, senderUser;
         return __generator(this, function (_a) {
@@ -29339,7 +29502,7 @@ var QuickBloxUIKitDesktopLayout = function (_a) {
             setSelectedDialog(undefined);
         }
     }, [dialogsViewModel.entity]);
-    var _1 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false), needDialogInformation = _1[0], setNeedDialogInformation = _1[1];
+    var _4 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false), needDialogInformation = _4[0], setNeedDialogInformation = _4[1];
     var informationCloseHandler = function () {
         setNeedDialogInformation(false);
     };
@@ -29352,28 +29515,22 @@ var QuickBloxUIKitDesktopLayout = function (_a) {
     var rephraseTones = currentContext.InitParams.qbConfig.configAIApi.AIRephraseWidgetConfig.Tones;
     var maxFileSize = currentContext.InitParams.maxFileSize;
     //
-    var _2 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false), waitAIWidget = _2[0], setWaitAIWidget = _2[1];
-    var _3 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(''), messageText = _3[0], setMessageText = _3[1];
-    // must re-create as result dialog changing
-    var messagesViewModel = (0,_Views_Dialog_useDialogViewModel__WEBPACK_IMPORTED_MODULE_20__["default"])((_e = dialogsViewModel.entity) === null || _e === void 0 ? void 0 : _e.type, dialogsViewModel.entity);
-    var _4 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(''), warningErrorText = _4[0], setWarningErrorText = _4[1];
+    var _5 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false), waitAIWidget = _5[0], setWaitAIWidget = _5[1];
+    var _6 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(''), messageText = _6[0], setMessageText = _6[1];
+    var _7 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(''), warningErrorText = _7[0], setWarningErrorText = _7[1];
     // const [showErrorToast, setShowErrorToast] = useState<boolean>(false);
     // const [messageErrorToast, setMessageErrorToast] = useState<string>('');
-    var _5 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(100), dialogMessagesCount = _5[0], setDialogMessageCount = _5[1];
-    var _6 = react__WEBPACK_IMPORTED_MODULE_1___default().useState(true), hasMore = _6[0], setHasMore = _6[1];
-    var _7 = react__WEBPACK_IMPORTED_MODULE_1___default().useState(false), scrollUpToDown = _7[0], setScrollUpToDown = _7[1];
-    var _8 = react__WEBPACK_IMPORTED_MODULE_1___default().useState([]), messagesToView = _8[0], setMessagesToView = _8[1];
-    var _9 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false), useAudioWidget = _9[0], setUseAudioWidget = _9[1];
-    var _10 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(null), fileToSend = _10[0], setFileToSend = _10[1];
-    var _11 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false), isRecording = _11[0], setIsRecording = _11[1];
+    var _8 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false), useAudioWidget = _8[0], setUseAudioWidget = _8[1];
+    var _9 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(null), fileToSend = _9[0], setFileToSend = _9[1];
+    var _10 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false), isRecording = _10[0], setIsRecording = _10[1];
     //
-    var _12 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false), permission = _12[0], setPermission = _12[1];
+    var _11 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false), permission = _11[0], setPermission = _11[1];
     // const [recordingStatus, setRecordingStatus] = useState('inactive');
-    var _13 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(), stream = _13[0], setStream = _13[1];
+    var _12 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(), stream = _12[0], setStream = _12[1];
     // const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder>();
     var mediaRecorder = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)();
-    var _14 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(), resultAudioBlob = _14[0], setResultAudioBlob = _14[1];
-    var _15 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)([]), audioChunks = _15[0], setAudioChunks = _15[1];
+    var _13 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(), resultAudioBlob = _13[0], setResultAudioBlob = _13[1];
+    var _14 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)([]), audioChunks = _14[0], setAudioChunks = _14[1];
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     var mimeType = 'audio/webm;codecs=opus'; // audio/ogg audio/mpeg audio/webm audio/x-wav audio/mp4
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -29639,14 +29796,9 @@ var QuickBloxUIKitDesktopLayout = function (_a) {
     //
     (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
         messagesViewModel.entity = dialogsViewModel.entity;
-        setMessagesToView([]);
+        // setMessagesToView([]);
         setMessageText('');
     }, [dialogsViewModel.entity]);
-    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
-        if (messagesViewModel.entity) {
-            messagesViewModel.getMessages(new _Domain_repository_Pagination__WEBPACK_IMPORTED_MODULE_11__.Pagination());
-        }
-    }, [messagesViewModel.entity]);
     //
     (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
         if (!isMobile && messagesViewModel.entity) {
@@ -29661,12 +29813,6 @@ var QuickBloxUIKitDesktopLayout = function (_a) {
         };
     }, [messagesViewModel === null || messagesViewModel === void 0 ? void 0 : messagesViewModel.loading]);
     //
-    function prepareFirstPage(initData) {
-        var firstPageSize = messagesViewModel.messages.length;
-        for (var i = firstPageSize - 1; i >= 0; i -= 1) {
-            initData.push(messagesViewModel.messages[i]);
-        }
-    }
     var ChangeFileHandler = function (event) {
         var reader = new FileReader();
         var file = event.currentTarget.files
@@ -29678,44 +29824,6 @@ var QuickBloxUIKitDesktopLayout = function (_a) {
         if (file !== null)
             reader.readAsDataURL(file);
     };
-    var fetchMoreData = function () {
-        if (messagesToView.length >= dialogMessagesCount) {
-            setHasMore(false);
-            return;
-        }
-        if (hasMore &&
-            messagesToView.length > 0 &&
-            messagesToView.length < dialogMessagesCount) {
-            setMessagesToView(function (prevState) {
-                var newState = __spreadArray([], prevState, true);
-                var newMessageEntity = messagesViewModel.messages[prevState.length];
-                newState.push(newMessageEntity);
-                // newState.unshift(newMessageEntity);
-                return newState;
-            });
-        }
-    };
-    //
-    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
-        var _a;
-        setDialogMessageCount(((_a = messagesViewModel === null || messagesViewModel === void 0 ? void 0 : messagesViewModel.messages) === null || _a === void 0 ? void 0 : _a.length) || 0);
-        if ((messagesToView === null || messagesToView === void 0 ? void 0 : messagesToView.length) === 0 && messagesViewModel.messages.length > 0) {
-            var initData = [];
-            console.log(JSON.stringify(messagesViewModel.messages));
-            prepareFirstPage(initData);
-            setMessagesToView(initData);
-        }
-        else if (messagesViewModel.messages.length - messagesToView.length >= 1) {
-            setHasMore(true);
-            setScrollUpToDown(true);
-        }
-    }, [messagesViewModel.messages]);
-    //
-    (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
-        if (messagesViewModel.messages.length - messagesToView.length >= 1) {
-            fetchMoreData();
-        }
-    }, [dialogMessagesCount]);
     //
     //
     var maxWidthToResizing = selectedDialog && needDialogInformation
@@ -29751,7 +29859,8 @@ var QuickBloxUIKitDesktopLayout = function (_a) {
     };
     function getSectionData(messages2View) {
         var groupMessages = {};
-        messages2View.forEach(function (message) {
+        var reversedMessages = __spreadArray([], messages2View, true).reverse();
+        reversedMessages.forEach(function (message) {
             var date = new Date(message.created_at);
             date.setUTCHours(0, 0, 0, 0);
             var dateString = date.toISOString();
@@ -29762,20 +29871,28 @@ var QuickBloxUIKitDesktopLayout = function (_a) {
         Object.keys(groupMessages).forEach(function (date) {
             groupMessages[date].sort(function (a, b) { return a.date_sent - b.date_sent; });
         });
-        var sections = Object.keys(groupMessages).map(function (date) {
+        var sections = Object.keys(groupMessages)
+            .sort(function (a, b) { return a.localeCompare(b); })
+            .map(function (date) {
             var _a;
             return ({
                 title: date,
                 data: (_a = {}, _a[date] = groupMessages[date], _a),
             });
         });
+        // const sections: SectionItem<MessageEntity>[] = Object.keys(
+        //   groupMessages,
+        // ).map((date) => ({
+        //   title: date,
+        //   data: { [date]: groupMessages[date] },
+        // }));
         return sections;
     }
-    var _16 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(true), showDialogList = _16[0], setShowDialogList = _16[1];
-    var _17 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(true), showDialogMessages = _17[0], setShowDialogMessages = _17[1];
-    var _18 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false), showDialogInformation = _18[0], setShowDialogInformation = _18[1];
+    var _15 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(true), showDialogList = _15[0], setShowDialogList = _15[1];
+    var _16 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(true), showDialogMessages = _16[0], setShowDialogMessages = _16[1];
+    var _17 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false), showDialogInformation = _17[0], setShowDialogInformation = _17[1];
     //
-    var _19 = react__WEBPACK_IMPORTED_MODULE_1___default().useState(false), isAllMembersShow = _19[0], setIsAllMembersShow = _19[1];
+    var _18 = react__WEBPACK_IMPORTED_MODULE_1___default().useState(false), isAllMembersShow = _18[0], setIsAllMembersShow = _18[1];
     (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
         if (isMobile) {
             if (!selectedDialog) {
@@ -29842,11 +29959,11 @@ var QuickBloxUIKitDesktopLayout = function (_a) {
     var workHeight = isMobile
         ? "calc(".concat(height.toString(), "px - ").concat(uikitHeightOffset, " - 28px)")
         : "calc(100vh - ".concat(uikitHeightOffset, " - 28px)");
-    var _20 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(), dialogToLeave = _20[0], setDialogToLeave = _20[1];
+    var _19 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(), dialogToLeave = _19[0], setDialogToLeave = _19[1];
     var leaveDialogHandler = function (dialog) {
         setDialogToLeave(dialog);
     };
-    var _21 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false), isOpen = _21[0], setIsOpen = _21[1];
+    var _20 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false), isOpen = _20[0], setIsOpen = _20[1];
     var handleDialogOnClick = function () {
         if (isOpen) {
             setDialogToLeave(undefined);
@@ -29955,9 +30072,7 @@ var QuickBloxUIKitDesktopLayout = function (_a) {
                         // upHeaderContent={<CompanyLogo />}
                         renderHeader: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components_Header_Header__WEBPACK_IMPORTED_MODULE_29__["default"], __assign({ title: dialogsViewModel.entity.name, avatar: renderIconForTypeDialog(dialogsViewModel.entity), onGoBack: function () { return setSelectedDialog(undefined); }, className: "dialog-header__line" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "dialog-header-right" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_icons__WEBPACK_IMPORTED_MODULE_31__.InformationSvg, { className: "dialog-header-right__icon", onClick: informationOpenHandler }) })) })), renderMessageList: messagesViewModel &&
                             messagesViewModel.messages &&
-                            messagesViewModel.messages.length > 0 &&
-                            messagesToView &&
-                            messagesToView.length > 0 && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_containers_SectionList__WEBPACK_IMPORTED_MODULE_24__["default"], { resetScroll: scrollUpToDown, className: "messages-container", onEndReached: fetchMoreData, onEndReachedThreshold: 0.95, refreshing: messagesViewModel === null || messagesViewModel === void 0 ? void 0 : messagesViewModel.loading, renderSectionHeader: function (section) { return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "message-view-container--system-message-wrapper" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ style: theme
+                            messagesViewModel.messages.length > 0 && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_containers_SectionList__WEBPACK_IMPORTED_MODULE_24__["default"], { resetScroll: scrollUpToDown, className: "messages-container", onEndReached: fetchMoreData, onEndReachedThreshold: 0.95, refreshing: messagesViewModel === null || messagesViewModel === void 0 ? void 0 : messagesViewModel.loading, renderSectionHeader: function (section) { return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "message-view-container--system-message-wrapper" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ style: theme
                                         ? { backgroundColor: theme.disabledElements() }
                                         : {}, className: "message-view-container--system-message-wrapper__date_container" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components__WEBPACK_IMPORTED_MODULE_37__.MessageSeparator, { text: section.title, type: "date" }) })) }))); }, renderItem: function (_a, listRef) {
                                 var groupMessages = _a[1];
@@ -29965,7 +30080,7 @@ var QuickBloxUIKitDesktopLayout = function (_a) {
                                 // defaultGetSenderName={defaultGetSenderName}
                                 , { 
                                     // defaultGetSenderName={defaultGetSenderName}
-                                    message: message, userId: userId || -1, enableForwarding: enableForwarding, enableReplying: enableReplying, onReply: function (m) {
+                                    message: message, currentUserId: currentUserId || -1, enableForwarding: enableForwarding, enableReplying: enableReplying, onReply: function (m) {
                                         handleOnReply(m);
                                     }, onForward: function (m) {
                                         setForwardMessage(m);
@@ -29974,8 +30089,8 @@ var QuickBloxUIKitDesktopLayout = function (_a) {
                                         .AITranslateWidgetConfig), defaultTranslationLanguage: _Data_DefaultConfigurations__WEBPACK_IMPORTED_MODULE_15__.DefaultConfigurations.getDefaultLanguageForAITranslate(currentContext.InitParams.qbConfig.configAIApi
                                         .AITranslateWidgetConfig), onError: function (messageError) {
                                         (0,react_toastify__WEBPACK_IMPORTED_MODULE_4__.toast)(messageError);
-                                    }, messagesToView: messagesToView, maxTokens: maxTokensForAIRephrase })); });
-                            }, sections: getSectionData(messagesToView) })), renderMessageInput: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components_MessageInput_MessageInput__WEBPACK_IMPORTED_MODULE_34__["default"], { previewMessage: showReplyMessage ? ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components_MessageInput_ReplyMessagePreview_ReplyMessagePreview__WEBPACK_IMPORTED_MODULE_22__["default"], { messages: __spreadArray([], messagesToReply, true), userNameSentMessage: ((_g = (_f = messagesToReply[0]) === null || _f === void 0 ? void 0 : _f.sender) === null || _g === void 0 ? void 0 : _g.full_name) ||
+                                    }, messagesToView: messagesViewModel.messages, maxTokens: maxTokensForAIRephrase })); });
+                            }, sections: getSectionData(messagesViewModel.messages) })), renderMessageInput: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components_MessageInput_MessageInput__WEBPACK_IMPORTED_MODULE_34__["default"], { previewMessage: showReplyMessage ? ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components_MessageInput_ReplyMessagePreview_ReplyMessagePreview__WEBPACK_IMPORTED_MODULE_22__["default"], { messages: __spreadArray([], messagesToReply, true), userNameSentMessage: ((_g = (_f = messagesToReply[0]) === null || _f === void 0 ? void 0 : _f.sender) === null || _g === void 0 ? void 0 : _g.full_name) ||
                                     ((_j = (_h = messagesToReply[0]) === null || _h === void 0 ? void 0 : _h.sender) === null || _j === void 0 ? void 0 : _j.login) ||
                                     ((_l = (_k = messagesToReply[0]) === null || _k === void 0 ? void 0 : _k.sender) === null || _l === void 0 ? void 0 : _l.email) ||
                                     ((_o = (_m = messagesToReply[0]) === null || _m === void 0 ? void 0 : _m.sender) === null || _o === void 0 ? void 0 : _o.id.toString()) ||
@@ -29993,7 +30108,7 @@ var QuickBloxUIKitDesktopLayout = function (_a) {
                                     setMessageText(prevValue);
                                 }, setMessageErrorToast: function (e) {
                                     (0,react_toastify__WEBPACK_IMPORTED_MODULE_4__.toast)(e);
-                                }, messagesToView: messagesToView, currentUserId: userId || -1, maxTokensForAIRephrase: maxTokensForAIRephrase, rephraseTones: rephraseTones }) }), maxWidthToResize: maxWidthToResizing, theme: theme })) : (!isMobile && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "empty-chat-placeholder", style: {
+                                }, messagesToView: messagesViewModel.messages, currentUserId: currentUserId || -1, maxTokensForAIRephrase: maxTokensForAIRephrase, rephraseTones: rephraseTones }) }), maxWidthToResize: maxWidthToResizing, theme: theme })) : (!isMobile && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "empty-chat-placeholder", style: {
                             minHeight: clientContainerHeight,
                             maxHeight: clientContainerHeight,
                         } }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components__WEBPACK_IMPORTED_MODULE_37__.Placeholder, { text: ['Select a chat to start messaging.'], className: "empty-chat-history-placeholder" }) })))), dialogInfoView: showDialogInformation &&
@@ -30801,7 +30916,7 @@ var __assign = (undefined && undefined.__assign) || function () {
 var DialogItemPreview = function (_a) {
     var avatar = _a.avatar, title = _a.title, date = _a.date, active = _a.active, lastMessage = _a.lastMessage, badge = _a.badge, contextMenu = _a.contextMenu, onClick = _a.onClick, className = _a.className;
     // eslint-disable-next-line consistent-return
-    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('dialog-item-preview', { 'dialog-item-preview--active': active }, className), onClick: onClick }, { children: [avatar, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "dialog-item-preview__content" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "dialog-item-preview__content-top" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", __assign({ className: "dialog-item-preview__content-top-title" }, { children: title })), date && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", __assign({ className: "dialog-item-preview__content-top-date" }, { children: date })))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "dialog-item-preview__content-bottom" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "dialog-item-preview__content-bottom-message" }, { children: lastMessage })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "dialog-item-preview__content-bottom-controls" }, { children: [badge, contextMenu && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "dialog-item-preview__content-bottom-controls-menu" }, { children: contextMenu })))] }))] }))] }))] })));
+    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: classnames__WEBPACK_IMPORTED_MODULE_1___default()('dialog-item-preview', { 'dialog-item-preview--active': active }, className), onClick: onClick }, { children: [avatar, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "dialog-item-preview__content" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "dialog-item-preview__content-top" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", __assign({ className: "dialog-item-preview__content-top-title" }, { children: title })), date && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span", __assign({ className: "dialog-item-preview__content-top-date" }, { children: date })))] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "dialog-item-preview__content-bottom" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "dialog-item-preview__content-bottom-message" }, { children: lastMessage })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ onClick: function (event) { return event.stopPropagation(); }, className: "dialog-item-preview__content-bottom-controls" }, { children: [badge, contextMenu && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "dialog-item-preview__content-bottom-controls-menu" }, { children: contextMenu })))] }))] }))] }))] })));
 };
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (DialogItemPreview);
 
@@ -30909,7 +31024,9 @@ function Dropdown(_a) {
             }
         };
         if (isOpen)
-            document.addEventListener('click', handleBlur);
+            document.addEventListener('click', handleBlur, {
+                capture: true,
+            });
         return function () { return document.removeEventListener('click', handleBlur); };
     }, [isOpen]);
     return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ ref: dropdownRef, className: classnames__WEBPACK_IMPORTED_MODULE_2___default()('dropdown', className) }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button", __assign({ type: "button", disabled: disabled, className: "dropdown__toggle", onClick: handleToggleOpen }, { children: children })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("ul", __assign({ className: classnames__WEBPACK_IMPORTED_MODULE_2___default()('dropdown__menu', "dropdown__menu--".concat(placement), {
@@ -31128,7 +31245,9 @@ function AttachmentBubble(_a) {
     if (attachment.type.toString().includes(_Domain_entity_FileTypes__WEBPACK_IMPORTED_MODULE_2__.FileType.audio)) {
         return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_AudioBubble_AudioBubble__WEBPACK_IMPORTED_MODULE_4__["default"], { title: ((_c = attachment.file) === null || _c === void 0 ? void 0 : _c.name) || '', href: attachment.url, type: typeMessage, audioFileType: (_e = (_d = attachment.file) === null || _d === void 0 ? void 0 : _d.type) === null || _e === void 0 ? void 0 : _e.toString(), fileUid: (_f = attachment.file) === null || _f === void 0 ? void 0 : _f.uid }));
     }
-    if (attachment.type.toString().includes(_Domain_entity_FileTypes__WEBPACK_IMPORTED_MODULE_2__.FileType.image)) {
+    if (attachment.type.toString().split('/')[1] !== 'heic' &&
+        attachment.type.toString().split('/')[1] !== 'heif' &&
+        attachment.type.toString().includes(_Domain_entity_FileTypes__WEBPACK_IMPORTED_MODULE_2__.FileType.image)) {
         return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ImageBubble_ImageBubble__WEBPACK_IMPORTED_MODULE_5__["default"], { title: ((_g = attachment.file) === null || _g === void 0 ? void 0 : _g.name) || '', href: fileUrl });
     }
     return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_FileBubble_FileBubble__WEBPACK_IMPORTED_MODULE_6__["default"], { type: typeMessage, title: ((_h = attachment.file) === null || _h === void 0 ? void 0 : _h.name) || '', href: fileUrl }));
@@ -31180,6 +31299,7 @@ function AudioBubble(_a) {
     var _c = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(0), secondsElapsed = _c[0], setSecondsElapsed = _c[1];
     var handleAudioEnd = function () {
         setIsPlaying(false);
+        setSecondsElapsed(0);
     };
     // eslint-disable-next-line @typescript-eslint/no-unsafe-call,consistent-return
     (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
@@ -31248,7 +31368,14 @@ function AudioBubble(_a) {
         }
         return divElements;
     };
-    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "audio-bubble-background__".concat(type) }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("audio", __assign({ ref: audioRef, className: "audio-body", preload: "auto" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("source", { src: href, type: audioFileType }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("source", { src: href, type: "audio/mpeg" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("source", { src: href, type: "audio/ogg" }), "Your browser does not support the audio element."] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "audio-player" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "audio-body__controls", onClick: playPauseHandler }, { children: isPlaying ? ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_icons_toggle_pause_svg__WEBPACK_IMPORTED_MODULE_3__.ReactComponent, { className: "audio-body__controls--color" })) : ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_icons_toggle_play_svg__WEBPACK_IMPORTED_MODULE_2__.ReactComponent, { className: "audio-body__controls--color" })) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "equalizer" }, { children: isPlaying ? renderRandomEqualizer() : renderEqualizer(fileUid) }))] }))] })));
+    var formatTime = function (time) {
+        var minutes = Math.floor((time % 3600) / 60);
+        var seconds = Math.floor(time % 60);
+        var formattedMinutes = minutes.toString().padStart(2, '0');
+        var formattedSeconds = seconds.toString().padStart(2, '0');
+        return "".concat(formattedMinutes, ":").concat(formattedSeconds);
+    };
+    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "audio-bubble-background__".concat(type) }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("audio", __assign({ ref: audioRef, className: "audio-body", preload: "auto" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("source", { src: href, type: audioFileType }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("source", { src: href, type: "audio/mpeg" }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("source", { src: href, type: "audio/ogg" }), "Your browser does not support the audio element."] })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "audio-player" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "audio-body__controls", onClick: playPauseHandler }, { children: isPlaying ? ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_icons_toggle_pause_svg__WEBPACK_IMPORTED_MODULE_3__.ReactComponent, { className: "audio-body__controls--color" })) : ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_icons_toggle_play_svg__WEBPACK_IMPORTED_MODULE_2__.ReactComponent, { className: "audio-body__controls--color" })) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "audio-player__equalizer-time" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "equalizer" }, { children: isPlaying ? renderRandomEqualizer() : renderEqualizer(fileUid) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "time-play" }, { children: formatTime(secondsElapsed) }))] }))] }))] })));
 }
 
 
@@ -31389,7 +31516,7 @@ var __assign = (undefined && undefined.__assign) || function () {
 
 function VideoBubble(_a) {
     var title = _a.title, href = _a.href, className = _a.className;
-    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: className }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "message-attachment-video" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("video", __assign({ className: "message-attachment-video-body", controls: true, playsInline: true, src: href }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("a", __assign({ href: href, download: true }, { children: "Download" })) }), title) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("a", __assign({ href: href, download: true }, { children: "Download" }))] }) })));
+    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: className }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "message-attachment-video" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("video", __assign({ className: "message-attachment-video-body", controls: true, playsInline: true, src: href }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("a", __assign({ href: href, download: true }, { children: "Download" })) }), title) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("a", __assign({ href: href, download: true, className: "message-attachment-video-body__link" }, { children: "Download" }))] })));
 }