quickblox-react-ui-kit 0.3.1-beta.4 → 0.3.1-beta.6

package/README.md

@@ -0,0 +1,324 @@
+<div align="center">
+
+<p>
+		<a href="https://discord.gg/c6bxq9BC"><img src="https://img.shields.io/discord/1042743094833065985?color=5865F2&logo=discord&logoColor=white&label=QuickBlox%20Discord%20server&style=for-the-badge" alt="Discord server" /></a>
+</p>
+
+</div>
+
+# Overview
+
+The QuickBlox UIKit for React is a comprehensive user interface kit specifically designed for building chat applications. It provides a collection of pre-built components, modules, and utilities that simplify the process of creating chat applications.
+
+The main goal of the QuickBlox UIKit for React is to offer developers a streamlined and efficient way to implement chat functionality within their React applications.
+
+The QuickBlox UIKit for React offers modules that encapsulate complex chat functionalities, such as dialogs and chat management and real-time updates. These modules provide a simplified interface for integrating chat features into applications without the need for extensive knowledge of the underlying protocols or server-side infrastructure.
+
+You can view and interact with the interface components of the UI Kit using Storybook. In fact, this provides an interactive environment showcasing different scenarios that UI components might encounter in a live application. To view these, visit our [documentation](https://quickblox.github.io/react-ui-kit/).
+
+# Screenshots
+
+Chat dashboard with list of dialogs and create new chat dialog;
+
+   ![dashboard!](./src/Presentation/assets/img/web-doc.png "chats dashboard")
+
+## Features
+
+QuickBlox UIKit for React provides next functionality:
+- List of dialogs
+- Create dialog(Private or Group)
+- Dialog screen
+- Send text, image, video, audio, file messages
+- Dialog info screen
+- List, invite, remove members
+
+# Send your first message
+
+The QuickBlox UIKit for React comprises a collection of pre-assembled UI components that enable effortless creation of an in-app chat equipped with all the necessary messaging functionalities. Our development kit encompasses light and dark themes, colors, and various other features. These components can be personalized to fashion an engaging messaging interface that reflects your brand's distinct identity.
+
+The QuickBlox UIKit fully supports both private and group dialogs. To initiate the process of sending a message from the ground up using Java or Kotlin, please refer to the instructions provided in the guide below.
+[Additional information with sample](https://docs.quickblox.com/docs/react-uikit-send-your-first-message)
+## Requirements
+
+The minimum requirements for QuickBlox UIKit for React are:
+- JS QuickBlox SDK v2.15.5
+- React v.18.0
+- TypeScript v.4.9.3
+
+# Before you begin
+
+Register a new account following [this link](https://admin.quickblox.com/signup). Type in your email and password to sign in. You can also sign in with your Google or Github accounts.
+Create the app clicking New app button.
+Configure the app. Type in the information about your organization into corresponding fields and click Add button.
+Go to Dashboard => YOUR_APP => Overview section and copy your Application ID, Authorization Key, Authorization Secret, and Account Key .
+
+## Install QuickBlox SDK
+
+```
+npm install quickblox
+```
+
+## Install QuickBlox UIKit
+
+```
+npm install quickblox-react-ui-kit
+```
+
+## Init QuickBlox SDK
+
+To init QuickBlox SDK you need to pass Application ID, Authorization Key, Authorization Secret, and Account Key to the init() method.
+
+```
+var APPLICATION_ID = 41;
+var AUTH_KEY = "lkjdueksu7392kj";
+var AUTH_SECRET = "iiohfdija792hj";
+var ACCOUNT_KEY = "sdjfnksnlk2bk1k34kb";
+var CONFIG = { debug: true };
+
+QB.init(APPLICATION_ID, AUTH_KEY, AUTH_SECRET, ACCOUNT_KEY, CONFIG);
+```
+
+## Authentication
+
+Before sending your first message you need to authenticate users in the QuickBlox system. You can read more about different ways of authentication by [this link](https://docs.quickblox.com/docs/js-authentication).
+In our example we show how to authenticate user with login and password.
+
+```
+import * as QB from "quickblox/quickblox";
+import {
+  QuickBloxUIKitProvider,
+  qbDataContext,
+  QuickBloxUIKitDesktopLayout, 
+  LoginData,
+  AuthorizationData,
+  QBDataContextType,
+} from 'quickblox-ui-kit-react/dist/index-ui';
+
+var params = { login: "garry", password: "garry5santos" };
+
+QB.login(params, function(error, result) {
+  if(error){
+  } else {
+    // Navigate User to the UIKit
+});
+
+const qbUIKitContext: QBDataContextType = React.useContext(qbDataContext);
+```
+To order to config quickblox ui kit provider if you use SDK without session token:
+```
+ <QuickBloxUIKitProvider
+            maxFileSize={100 * 1000000} //set max size for attachments
+            accountData={{ ...QBConfig.credentials }}
+            loginData={{
+              login: params.login,
+              password: params.password,
+            }}
+        >
+  <QuickBloxUIKitDesktopLayout /> // container for DesktopLayout
+</QuickBloxUIKitProvider>
+```
+To order to config quickblox ui kit provider if you use SDK with session token:
+```
+ <QuickBloxUIKitProvider
+            maxFileSize={100 * 1000000} //set max size for attachments
+            accountData={{ ...QBConfig.credentials }} // sessionToken was used in QBConfig
+        >
+  <QuickBloxUIKitDesktopLayout /> // container for DesktopLayout
+</QuickBloxUIKitProvider>
+```
+
+# Customization
+
+The QuickBlox UIKit for React allows you to create your own unique view of the UIKit.
+
+## Default themes
+The QuickBlox UIKit for React has 2 built in themes: Dark and Light.
+Default theme for UIKit is Light.
+To set theme you need to set value 'dark' to key data-theme in global styles (html[data-theme="dark”]).
+For example, you can use pure JavaScript:
+
+```
+document.documentElement.setAttribute('data-theme', 'dark');
+```
+
+## Use your own theme
+
+There are two options how you can create your own theme:
+- Customize current theme using css
+- Create your own theme to customize selected components
+
+To customize the current theme you just need to set the new colors in css variables.
+
+Or you can create your own theme. To do this you need to create a new class that implements the UiKitTheme interface.
+
+To use your own theme using css you need to create _theme_colors_scheme.scss and set colors
+```
+$background-overlay-light: rgba(19, 29, 40, .80);
+$background-overlay-dark: rgba(144, 151, 159, .80);
+$primary-50: #E7EFFF;
+$primary-100: #C4D7FE;
+$primary-200: #9CBCFE;
+$primary-300: #74A1FD;
+$primary-400: #578CFC;
+$primary-500: #3978FC;
+$primary-600: #3370FC;
+$primary-700: #2C65FB;
+$primary-800: #245BFB;
+$primary-900: #1748FA;
+$primary-a-100: #FFFFFF;
+$primary-a-200: #F7F9FF;
+$primary-a-400: #C4CFFF;
+$primary-a-700: #ABBAFF;
+$secondary-50: #E4E6E8;
+$secondary-100: #BCC1C5;
+$secondary-200: #90979F;
+$secondary-300: #636D78;
+$secondary-400: #414E5B;
+$secondary-500: #202F3E;
+$secondary-600: #1C2A38;
+$secondary-700: #182330;
+$secondary-800: #131D28;
+$secondary-900: #0B121B;
+$secondary-a-100: #74A1FD;
+$secondary-a-200: #3978FC;
+$secondary-a-400: #245BFB;
+$secondary-a-700: #0050DC;
+$system-green-100: #C8F1D6;
+$system-green-200: #A4E7BB;
+$system-green-300: #80DDA0;
+$system-green-400: #64D68B;
+$system-green-500: #49CF77;
+$error-100: #FFC4C1;
+$error-200: #FF9D98;
+$error-300: #FF766E;
+$error-400: #FF584F;
+$error-500: #FF3B30;
+$information: #FDB0FF;
+$highlight: #FFFDC1;
+
+```
+To use your own new theme colors create _theme_dark.scss and _theme_light.scss files and set color variable.
+```
+// _theme_dark.scss:
+
+html[data-theme="dark"]{
+  --color-background-info: #{$primary-500};
+  --tertiary-elements: #{$background-overlay-dark};
+  --main-elements: #{$primary-300};
+  --secondary-elements: #{$primary-a-100};
+  --input-elements: #{$secondary-200};
+  --disabled-elements: #{$secondary-300};
+  --field-border: #{$secondary-200};
+  --main-text: #{$primary-a-100};
+  --secondary-text: #{$secondary-200};
+  --caption: #{$secondary-100};
+  --main-background: #{$secondary-500};
+  --secondary-background: #{$secondary-800};
+  --incoming-background: #{$secondary-400};
+  --outgoing-background: #{$primary-500};
+  --dropdown-background: #{$secondary-400};
+  --chat-input: #{$secondary-800};
+  --divider: #{$secondary-400};
+  --error: #{$error-300};
+  --hightlight: #{$highlight};
+}
+
+// _theme_light.scss:
+:root{
+  --color-background-info:#{$primary-100};
+  --tertiary-elements: #{$secondary-300};
+  --main-elements: #{$primary-500};
+  --secondary-elements: #{$secondary-500};
+  --input-elements: #{$secondary-500};
+  --disabled-elements: #{$secondary-100};
+  --field-border: #{$secondary-200};
+  --main-text: #{$secondary-900};
+  --secondary-text: #{$secondary-300};
+  --caption: #{$secondary-200};
+  --main-background: #{$primary-a-100};
+  --secondary-background: #{$primary-a-100};
+  --secondary-background-modal: #{$background-overlay-light};
+  --incoming-background: #{$secondary-50};
+  --outgoing-background: #{$primary-50};
+  --dropdown-background: #{$primary-a-100};
+  --chat-input: #{$primary-a-200};
+  --divider: #{$primary-50};
+  --error: #{$error-500};
+  --hightlight: #{$highlight};
+}
+```
+To create your own theme to customize selected components you need to create a new class that implements the UiKitTheme interface.
+```
+//DefaultTheme implements UiKitTheme
+export default class CustomTheme extends DefaultTheme {
+  divider = (): string => 'var(--divider)';
+  mainText = (): string => '#FFFFFF';
+  fontFamily = (): string => 'Roboto';
+  /*
+  The DefaultTheme contains other theme methods :
+  caption = (): string => 'var(--caption)';
+  chatInput = (): string => 'var(--chat-input)';
+  disabledElements = (): string => 'var(--disabled-elements)';
+  dropdownBackground = (): string => 'var(--dropdown-background)';
+  error = (): string => 'var(--error)';
+  fieldBorder = (): string => 'var(--field-border)';
+  hightlight = (): string => 'var(--hightlight)';
+  incomingBackground = (): string => 'var(--incoming-background)';
+  inputElements = (): string => 'var(--input-elements)';
+  mainBackground = (): string => 'var(--main-background)';
+  mainElements = (): string => 'var(--main-elements)';
+  outgoingBackground = (): string => 'var(--outgoing-background)';
+  secondaryBackground = (): string => 'var(--secondary-background)';
+  secondaryElements = (): string => 'var(--secondary-elements)';
+  secondaryText = (): string => 'var(--secondary-text)';
+  */
+}
+```
+and specify selected components:
+- desktop layout container
+```
+<QuickBloxUIKitDesktopLayout theme={new CustomTheme()}>
+```
+- header of dialogs
+```
+<HeaderDialogs title="Dialog 2" theme={new CustomTheme()} />
+```
+- item of dialogs
+```
+<PreviewDialog
+  theme={{ selected: true, muted: true, colorTheme={new CustomTheme()} }}
+  title="Dialog with states"
+  unreadMessageCount={9}
+  message_date_time_sent="5 min ago"
+/>
+```
+# Sample
+The source code of the sample is available on GitHub:
+https://github.com/QuickBlox/quickblox-javascript-sdk/tree/gh-pages/samples/react-chat-ui-kit-init-sample
+You can view and interact with the interface components of the UI Kit using Storybook. In fact, this provides an interactive environment showcasing different scenarios that UI components might encounter in a live application. To view these, visit our [documentation](https://quickblox.github.io/react-ui-kit/).
+
+## Video guide "How to use AI Feature"
+[Youtube video about AI Assistant](https://youtu.be/BneMtDagOy4)
+# License
+[](#license)
+MIT License [here](https://github.com/QuickBlox/react-ui-kit/blob/main/LICENSE.md).
+
+Copyright © 2023 QuickBlox.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index-ui.js

@@ -3805,7 +3805,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, ".avatar {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  border-radius: 50%;\n  background-color: var(--disabled-elements);\n  color: var(--secondary-text);\n}\n.avatar,\n.avatar * {\n  box-sizing: border-box;\n}\n.avatar svg {\n  fill: var(--secondary-text);\n  padding: 10px;\n}\n.avatar__image {\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n}\n.avatar--xs {\n  width: 32px;\n  height: 32px;\n}\n.avatar--sm {\n  width: 36px;\n  height: 36px;\n}\n.avatar--md {\n  width: 40px;\n  height: 40px;\n}\n.avatar--lg {\n  width: 56px;\n  height: 56px;\n}\n.avatar--xl {\n  width: 64px;\n  height: 64px;\n}\n.avatar--xxl {\n  width: 80px;\n  height: 80px;\n}", "",{"version":3,"sources":["webpack://./src/Presentation/ui-components/Avatar/Avatar.scss","webpack://./src/Presentation/themes/styles/_mixins.scss"],"names":[],"mappings":"AAEA;EAEE,aAAA;EACA,cAAA;EACA,mBAAA;EACA,uBAAA;EAEA,gBAAA;EACA,kBAAA;EACA,0CAAA;EACA,4BAAA;AAHF;ACRE;;EAEE,sBAAA;ADUJ;AACE;EACE,2BAAA;EACA,aAAA;AACJ;AAEE;EACE,iBAAA;EACA,WAAA;EACA,YAAA;AAAJ;AAGE;EACE,WAAA;EACA,YAAA;AADJ;AAIE;EACE,WAAA;EACA,YAAA;AAFJ;AAKE;EACE,WAAA;EACA,YAAA;AAHJ;AAME;EACE,WAAA;EACA,YAAA;AAJJ;AAOE;EACE,WAAA;EACA,YAAA;AALJ;AAQE;EACE,WAAA;EACA,YAAA;AANJ","sourcesContent":["@import '../../themes/styles/mixins';\n\n.avatar {\n  @include applyBorderBox;\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n\n  overflow: hidden;\n  border-radius: 50%;\n  background-color: var(--disabled-elements);\n  color: var(--secondary-text);\n\n  svg {\n    fill: var(--secondary-text);\n    padding: 10px;\n  }\n\n  &__image {\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n  }\n\n  &--xs {\n    width: 32px;\n    height: 32px;\n  }\n\n  &--sm {\n    width: 36px;\n    height: 36px;\n  }\n\n  &--md {\n    width: 40px;\n    height: 40px;\n  }\n\n  &--lg {\n    width: 56px;\n    height: 56px;\n  }\n\n  &--xl {\n    width: 64px;\n    height: 64px;\n  }\n\n  &--xxl {\n    width: 80px;\n    height: 80px;\n  }\n}\n","@mixin applyBorderBox {\n  &,\n  * {\n    box-sizing: border-box;\n  }\n}\n"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, ".avatar {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  border-radius: 50%;\n  background-color: var(--disabled-elements);\n  color: var(--secondary-text);\n}\n.avatar,\n.avatar * {\n  box-sizing: border-box;\n}\n.avatar svg {\n  height: 100%;\n  width: 100%;\n  fill: var(--secondary-text);\n  padding: 10px;\n}\n.avatar__image {\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n}\n.avatar--xs {\n  width: 32px;\n  height: 32px;\n}\n.avatar--sm {\n  width: 36px;\n  height: 36px;\n}\n.avatar--md {\n  width: 40px;\n  height: 40px;\n}\n.avatar--lg {\n  width: 56px;\n  height: 56px;\n}\n.avatar--xl {\n  width: 64px;\n  height: 64px;\n}\n.avatar--xxl {\n  width: 80px;\n  height: 80px;\n}", "",{"version":3,"sources":["webpack://./src/Presentation/ui-components/Avatar/Avatar.scss","webpack://./src/Presentation/themes/styles/_mixins.scss"],"names":[],"mappings":"AAEA;EAEE,aAAA;EACA,cAAA;EACA,mBAAA;EACA,uBAAA;EAEA,gBAAA;EACA,kBAAA;EACA,0CAAA;EACA,4BAAA;AAHF;ACRE;;EAEE,sBAAA;ADUJ;AACE;EACE,YAAA;EACA,WAAA;EAEA,2BAAA;EACA,aAAA;AAAJ;AAGE;EACE,iBAAA;EACA,WAAA;EACA,YAAA;AADJ;AAIE;EACE,WAAA;EACA,YAAA;AAFJ;AAKE;EACE,WAAA;EACA,YAAA;AAHJ;AAME;EACE,WAAA;EACA,YAAA;AAJJ;AAOE;EACE,WAAA;EACA,YAAA;AALJ;AAQE;EACE,WAAA;EACA,YAAA;AANJ;AASE;EACE,WAAA;EACA,YAAA;AAPJ","sourcesContent":["@import '../../themes/styles/mixins';\n\n.avatar {\n  @include applyBorderBox;\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n\n  overflow: hidden;\n  border-radius: 50%;\n  background-color: var(--disabled-elements);\n  color: var(--secondary-text);\n\n  svg {\n    height: 100%;\n    width: 100%;\n    \n    fill: var(--secondary-text);\n    padding: 10px;\n  }\n\n  &__image {\n    object-fit: cover;\n    width: 100%;\n    height: 100%;\n  }\n\n  &--xs {\n    width: 32px;\n    height: 32px;\n  }\n\n  &--sm {\n    width: 36px;\n    height: 36px;\n  }\n\n  &--md {\n    width: 40px;\n    height: 40px;\n  }\n\n  &--lg {\n    width: 56px;\n    height: 56px;\n  }\n\n  &--xl {\n    width: 64px;\n    height: 64px;\n  }\n\n  &--xxl {\n    width: 80px;\n    height: 80px;\n  }\n}\n","@mixin applyBorderBox {\n  &,\n  * {\n    box-sizing: border-box;\n  }\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -4561,7 +4561,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, ".toast {\n  min-height: 24px;\n  padding: 4px 12px;\n  opacity: 60% !important;\n  border-radius: 4px;\n  background-color: var(--toast-color);\n}\n.toast__body {\n  padding: 0;\n  font-family: \"Roboto\";\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 16px;\n  letter-spacing: 0.5px;\n  color: var(--main-background);\n}", "",{"version":3,"sources":["webpack://./src/Presentation/ui-components/Toast/Toast.scss"],"names":[],"mappings":"AAAA;EACE,gBAAA;EACA,iBAAA;EACA,uBAAA;EACA,kBAAA;EACA,oCAAA;AACF;AACE;EACE,UAAA;EACA,qBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,qBAAA;EACA,6BAAA;AACJ","sourcesContent":[".toast {\n  min-height: 24px;\n  padding: 4px 12px;\n  opacity: 60% !important;\n  border-radius: 4px;\n  background-color: var(--toast-color);\n\n  &__body {\n    padding: 0;\n    font-family: 'Roboto';\n    font-weight: 500;\n    font-size: 12px;\n    line-height: 16px;\n    letter-spacing: 0.5px;\n    color: var(--main-background);\n  }\n}\n"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, ".container {\n  width: 100%;\n}\n\n.toast {\n  min-height: 24px;\n  padding: 4px 12px;\n  opacity: 60% !important;\n  border-radius: 4px;\n  background-color: var(--toast-color);\n}\n.toast__body {\n  padding: 0;\n  font-family: \"Roboto\";\n  font-weight: 500;\n  font-size: 12px;\n  line-height: 16px;\n  letter-spacing: 0.5px;\n  color: var(--main-background);\n  text-align: center;\n}", "",{"version":3,"sources":["webpack://./src/Presentation/ui-components/Toast/Toast.scss"],"names":[],"mappings":"AAAA;EACE,WAAA;AACF;;AAEA;EACE,gBAAA;EACA,iBAAA;EACA,uBAAA;EACA,kBAAA;EACA,oCAAA;AACF;AACE;EACE,UAAA;EACA,qBAAA;EACA,gBAAA;EACA,eAAA;EACA,iBAAA;EACA,qBAAA;EACA,6BAAA;EACA,kBAAA;AACJ","sourcesContent":[".container {\n  width: 100%;\n}\n\n.toast {\n  min-height: 24px;\n  padding: 4px 12px;\n  opacity: 60% !important;\n  border-radius: 4px;\n  background-color: var(--toast-color);\n\n  &__body {\n    padding: 0;\n    font-family: 'Roboto';\n    font-weight: 500;\n    font-size: 12px;\n    line-height: 16px;\n    letter-spacing: 0.5px;\n    color: var(--main-background);\n    text-align: center;\n  }\n}\n"],"sourceRoot":""}]);
 // Exports
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
 
@@ -18247,7 +18247,8 @@ var RemoteDataSource = /** @class */ (function () {
             console.log('EVENT: reconnect');
         };
         (quickblox_quickblox__WEBPACK_IMPORTED_MODULE_0___default().chat.onMessageErrorListener) = function (messageId, error) {
-            console.log("EVENT: receive error messageid: ".concat(messageId, ", error: ").concat((0,_utils_parse__WEBPACK_IMPORTED_MODULE_13__.stringifyError)(error)));
+            console.log("EVENT: receive error message id: ".concat(messageId, ", error: ").concat((0,_utils_parse__WEBPACK_IMPORTED_MODULE_13__.stringifyError)(error), ", current auth status is: ").concat(_this.authProcessed ? 'true' : 'false'));
+            _this.subscriptionOnSessionExpiredListener.informSubscribers(true, _Domain_entity_EventMessageType__WEBPACK_IMPORTED_MODULE_16__["default"].LocalMessage);
         };
         (quickblox_quickblox__WEBPACK_IMPORTED_MODULE_0___default().chat.onReadStatusListener) = function (messageId, dialogId, userId) {
             console.log("EVENT: receive read message id: ".concat(messageId, ", dialogid: ").concat(dialogId, " userid: ").concat(userId));
@@ -24845,7 +24846,7 @@ var DialogInfo = function (_a) {
                 } }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components_containers_ColumnContainer_ColumnContainer__WEBPACK_IMPORTED_MODULE_5__["default"], { children: [useUpContent && upHeaderContent, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components_Header_Header__WEBPACK_IMPORTED_MODULE_19__["default"], __assign({ title: "Dialog information", className: "header-dialog-info" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_icons__WEBPACK_IMPORTED_MODULE_16__.CloseSvg, { onClick: onCloseDialogInformationHandler, className: "header-dialog-info-icon" }) })), useSubContent && subHeaderContent, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "dialog-information-profile" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "dialog-information-profile-avatar" }, { children: renderIconForTypeDialog((dialogViewModel === null || dialogViewModel === void 0 ? void 0 : dialogViewModel.entity) || dialog) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "dialog-information-profile-dialog-name" }, { children: ((_c = dialogViewModel === null || dialogViewModel === void 0 ? void 0 : dialogViewModel.entity) === null || _c === void 0 ? void 0 : _c.name) || (dialog === null || dialog === void 0 ? void 0 : dialog.name) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "dialog-information-profile-edit" }, { children: dialog.type !== _Domain_entity_DialogTypes__WEBPACK_IMPORTED_MODULE_8__.DialogType["private"] &&
                                     dialog.ownerId === currentUserId ? ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: classnames__WEBPACK_IMPORTED_MODULE_4___default()('dialog-information-profile-edit-button', {
                                         'dialog-information-profile-edit-button--disable': disableAction,
-                                    }) }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components__WEBPACK_IMPORTED_MODULE_17__.Button, __assign({ variant: "text", onClick: editModal.toggleModal, disabled: disableAction }, { children: "Edit" })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components__WEBPACK_IMPORTED_MODULE_17__.DialogWindow, __assign({ title: "Edit dialog", onClose: editModal.toggleModal, open: editModal.isOpen }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_EditDialog_EditDialog__WEBPACK_IMPORTED_MODULE_11__["default"], { disableActions: disableAction, nameDialog: (dialogViewModel === null || dialogViewModel === void 0 ? void 0 : dialogViewModel.entity.name) || dialog.name, typeDialog: (dialogViewModel === null || dialogViewModel === void 0 ? void 0 : dialogViewModel.entity.type) || dialog.type, ulrIcon: getUrlAvatar((dialogViewModel === null || dialogViewModel === void 0 ? void 0 : dialogViewModel.entity) || dialog), typeAddEditDialog: _EditDialog_EditDialog__WEBPACK_IMPORTED_MODULE_11__.TypeOpenDialog.edit, clickUpdatedHandler: getDialogUpdatedInfoHandler, clickCancelHandler: editModal.toggleModal }) }))] }))) : null }))] })), dialog.type !== _Domain_entity_DialogTypes__WEBPACK_IMPORTED_MODULE_8__.DialogType["private"] ? ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components__WEBPACK_IMPORTED_MODULE_17__.SettingsItem, __assign({ icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_icons__WEBPACK_IMPORTED_MODULE_16__.GroupChatSvg, {}), title: "Members", rightSection: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components__WEBPACK_IMPORTED_MODULE_17__.Badge, { mute: true, count: users.length, limit: 100 }), className: "dialog-info-members" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components_containers_ColumnContainer_ColumnContainer__WEBPACK_IMPORTED_MODULE_5__["default"], { children: [users && users.length > 0 && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "dialog-info-action-wrapper-settings no-padding" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_UsersList_UsersList__WEBPACK_IMPORTED_MODULE_7__["default"], { maxHeight: 75, usersFirstPageToView: users, allUsers: users, usersInDialogCount: users.length }) }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "dialog-info-action-wrapper-settings" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components__WEBPACK_IMPORTED_MODULE_17__.DialogWindow, __assign({ disableActions: disableAction, title: "Edit dialog", open: inviteMembersModal.isOpen, onClose: inviteMembersModal.toggleModal }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_InviteMembers_InviteMembers__WEBPACK_IMPORTED_MODULE_20__["default"], { participants: _Domain_entity_PublicDialogEntity__WEBPACK_IMPORTED_MODULE_12__.PublicDialogEntity.getParticipants((dialogViewModel === null || dialogViewModel === void 0 ? void 0 : dialogViewModel.entity) || dialog), applyInviteUsersHandler: applyInviteUsersHandler, cancelInviteMembersHandler: inviteMembersModal.toggleModal, typeAddEditDialog: _EditDialog_EditDialog__WEBPACK_IMPORTED_MODULE_11__.TypeOpenDialog.edit, typeDialog: dialog.type, idOwnerDialog: dialog.ownerId }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components__WEBPACK_IMPORTED_MODULE_17__.Button, __assign({ className: "dialog-info-action-wrapper-button", onClick: inviteMembersModal.toggleModal, variant: "outlined", disabled: dialog.ownerId !== currentUserId || disableAction }, { children: "Invite members" })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components__WEBPACK_IMPORTED_MODULE_17__.Button, __assign({ className: "dialog-info-action-wrapper-button", onClick: function () { return onShowAllMemberClick(true); }, variant: "outlined", disabled: disableAction }, { children: "See all members" }))] }))] }) }))) : null, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components__WEBPACK_IMPORTED_MODULE_17__.SettingsItem, { icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_icons__WEBPACK_IMPORTED_MODULE_16__.LeaveSvg, {}), title: "Leave dialog", onClick: !disableAction ? leaveModal.toggleModal : undefined, className: classnames__WEBPACK_IMPORTED_MODULE_4___default()('dialog-info-leave', {
+                                    }) }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components__WEBPACK_IMPORTED_MODULE_17__.Button, __assign({ variant: "text", onClick: editModal.toggleModal, disabled: disableAction }, { children: "Edit" })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components__WEBPACK_IMPORTED_MODULE_17__.DialogWindow, __assign({ title: "Edit dialog", onClose: editModal.toggleModal, open: editModal.isOpen }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_EditDialog_EditDialog__WEBPACK_IMPORTED_MODULE_11__["default"], { disableActions: disableAction, nameDialog: (dialogViewModel === null || dialogViewModel === void 0 ? void 0 : dialogViewModel.entity.name) || (dialog === null || dialog === void 0 ? void 0 : dialog.name), typeDialog: (dialogViewModel === null || dialogViewModel === void 0 ? void 0 : dialogViewModel.entity.type) || (dialog === null || dialog === void 0 ? void 0 : dialog.type), ulrIcon: getUrlAvatar((dialogViewModel === null || dialogViewModel === void 0 ? void 0 : dialogViewModel.entity) || dialog), typeAddEditDialog: _EditDialog_EditDialog__WEBPACK_IMPORTED_MODULE_11__.TypeOpenDialog.edit, clickUpdatedHandler: getDialogUpdatedInfoHandler, clickCancelHandler: editModal.toggleModal }) }))] }))) : null }))] })), dialog.type !== _Domain_entity_DialogTypes__WEBPACK_IMPORTED_MODULE_8__.DialogType["private"] ? ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components__WEBPACK_IMPORTED_MODULE_17__.SettingsItem, __assign({ icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_icons__WEBPACK_IMPORTED_MODULE_16__.GroupChatSvg, {}), title: "Members", rightSection: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components__WEBPACK_IMPORTED_MODULE_17__.Badge, { mute: true, count: users.length, limit: 100 }), className: "dialog-info-members" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_components_containers_ColumnContainer_ColumnContainer__WEBPACK_IMPORTED_MODULE_5__["default"], { children: [users && users.length > 0 && ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", __assign({ className: "dialog-info-action-wrapper-settings no-padding" }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_UsersList_UsersList__WEBPACK_IMPORTED_MODULE_7__["default"], { maxHeight: 75, usersFirstPageToView: users, allUsers: users, usersInDialogCount: users.length }) }))), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "dialog-info-action-wrapper-settings" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components__WEBPACK_IMPORTED_MODULE_17__.DialogWindow, __assign({ disableActions: disableAction, title: "Edit dialog", open: inviteMembersModal.isOpen, onClose: inviteMembersModal.toggleModal }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_InviteMembers_InviteMembers__WEBPACK_IMPORTED_MODULE_20__["default"], { participants: _Domain_entity_PublicDialogEntity__WEBPACK_IMPORTED_MODULE_12__.PublicDialogEntity.getParticipants((dialogViewModel === null || dialogViewModel === void 0 ? void 0 : dialogViewModel.entity) || dialog), applyInviteUsersHandler: applyInviteUsersHandler, cancelInviteMembersHandler: inviteMembersModal.toggleModal, typeAddEditDialog: _EditDialog_EditDialog__WEBPACK_IMPORTED_MODULE_11__.TypeOpenDialog.edit, typeDialog: dialog.type, idOwnerDialog: dialog.ownerId }) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components__WEBPACK_IMPORTED_MODULE_17__.Button, __assign({ className: "dialog-info-action-wrapper-button", onClick: inviteMembersModal.toggleModal, variant: "outlined", disabled: dialog.ownerId !== currentUserId || disableAction }, { children: "Invite members" })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components__WEBPACK_IMPORTED_MODULE_17__.Button, __assign({ className: "dialog-info-action-wrapper-button", onClick: function () { return onShowAllMemberClick(true); }, variant: "outlined", disabled: disableAction }, { children: "See all members" }))] }))] }) }))) : null, (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components__WEBPACK_IMPORTED_MODULE_17__.SettingsItem, { icon: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_icons__WEBPACK_IMPORTED_MODULE_16__.LeaveSvg, {}), title: "Leave dialog", onClick: !disableAction ? leaveModal.toggleModal : undefined, className: classnames__WEBPACK_IMPORTED_MODULE_4___default()('dialog-info-leave', {
                             'dialog-info-leave--disable': disableAction,
                         }) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components__WEBPACK_IMPORTED_MODULE_17__.DialogWindow, __assign({ open: leaveModal.isOpen, title: "Leave dialog?", onClose: leaveModal.toggleModal }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "dialog-leave-container" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components__WEBPACK_IMPORTED_MODULE_17__.Button, __assign({ variant: "outlined", onClick: leaveModal.toggleModal }, { children: "Cancel" })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components__WEBPACK_IMPORTED_MODULE_17__.Button, __assign({ variant: "danger", onClick: leaveDialogHandler }, { children: "Leave" }))] })) }))] })] })));
 };
@@ -26794,7 +26795,8 @@ function useInviteMembersViewModel() {
                                     if (regexUserName && regexUserName.length > 0) {
                                         // work
                                         var filteredUsers = data.ResultData.reduce(function (userList, u) {
-                                            if (!regex || regex.test(u.full_name)) {
+                                            var nameUserForTest = u.full_name || u.login || u.email || u.id.toString();
+                                            if (!regex || regex.test(nameUserForTest)) {
                                                 userList.push(u);
                                             }
                                             return userList;
@@ -29199,6 +29201,8 @@ __webpack_require__.r(__webpack_exports__);
 /* 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");
+/* harmony import */ var _Domain_entity_EventMessageType__WEBPACK_IMPORTED_MODULE_42__ = __webpack_require__(/*! ../../../Domain/entity/EventMessageType */ "./src/Domain/entity/EventMessageType.ts");
+/* harmony import */ var _utils_formatFileSize__WEBPACK_IMPORTED_MODULE_43__ = __webpack_require__(/*! ../../../utils/formatFileSize */ "./src/utils/formatFileSize.ts");
 var __assign = (undefined && undefined.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -29294,6 +29298,8 @@ var __spreadArray = (undefined && undefined.__spreadArray) || function (to, from
 
 
 
+
+
 
 
 
@@ -29413,7 +29419,7 @@ var QuickBloxUIKitDesktopLayout = function (_a) {
             setIsOnline(true);
         else
             setIsOnline(false);
-    });
+    }, _Domain_entity_EventMessageType__WEBPACK_IMPORTED_MODULE_42__["default"].LocalMessage, 'DESKTOP_LAYOUT');
     var _z = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false), needRefresh = _z[0], setNeedRefresh = _z[1];
     var toastConnectionErrorId = react__WEBPACK_IMPORTED_MODULE_1___default().useRef(null);
     //
@@ -30015,11 +30021,15 @@ var QuickBloxUIKitDesktopLayout = function (_a) {
                     if (!resultOperation) {
                         (0,react_toastify__WEBPACK_IMPORTED_MODULE_4__.toast)("Incorrect data");
                     }
+                })
+                    .finally(function () {
+                    setFileToSend(null);
                 });
             }
         }
         else if (fileToSend) {
-            (0,react_toastify__WEBPACK_IMPORTED_MODULE_4__.toast)("file size ".concat(fileToSend === null || fileToSend === void 0 ? void 0 : fileToSend.size, " must be less then ").concat(MAXSIZE_FOR_MESSAGE, " mb."));
+            (0,react_toastify__WEBPACK_IMPORTED_MODULE_4__.toast)("file size ".concat((0,_utils_formatFileSize__WEBPACK_IMPORTED_MODULE_43__.formatFileSize)(fileToSend === null || fileToSend === void 0 ? void 0 : fileToSend.size), " must be less then ").concat(MAXSIZE_FOR_MESSAGE, " mb."));
+            setFileToSend(null);
         }
     }, [fileToSend]);
     (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
@@ -30191,8 +30201,7 @@ var QuickBloxUIKitDesktopLayout = function (_a) {
                             }, users: userViewModel.users, rootStyles: {
                                 minHeight: clientContainerHeight,
                                 maxHeight: clientContainerHeight,
-                            }, 
-                            // subHeaderContent={<CompanyLogo />}
+                            }, subHeaderContent: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p", { children: "v0.3.1-beta.5" }) }), 
                             // upHeaderContent={<CompanyLogo />}
                             dialog: selectedDialog, dialogViewModel: dialogsViewModel, onCloseDialogInformationHandler: informationCloseHandler }))) }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components_DialogWindow_DialogWindow__WEBPACK_IMPORTED_MODULE_33__["default"], __assign({ open: isOpen, title: "Leave dialog?", onClose: handleDialogOnClick }, { children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", __assign({ className: "dialog-leave-container" }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components_Button_Button__WEBPACK_IMPORTED_MODULE_32__["default"], __assign({ variant: "outlined", onClick: handleDialogOnClick }, { children: "Cancel" })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components_Button_Button__WEBPACK_IMPORTED_MODULE_32__["default"], __assign({ variant: "danger", onClick: handleLeaveDialog }, { children: "Leave" }))] })) })), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_components_DialogWindow_DialogWindow__WEBPACK_IMPORTED_MODULE_33__["default"], __assign({ title: "New dialog", onClose: newModal.toggleModal, open: newModal.isOpen, className: isMobile
                         ? 'dialog-list-new-dialog-mobile-container'
@@ -32413,7 +32422,7 @@ var __assign = (undefined && undefined.__assign) || function () {
 var ToastContext = (0,react__WEBPACK_IMPORTED_MODULE_1__.createContext)(undefined);
 function ToastProvider(_a) {
     var children = _a.children;
-    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(ToastContext.Provider, __assign({ value: undefined }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_toastify__WEBPACK_IMPORTED_MODULE_2__.ToastContainer, { position: "top-center", autoClose: 3000, bodyClassName: "toast__body", toastClassName: "toast", pauseOnHover: false, closeButton: false, hideProgressBar: true }), children] })));
+    return ((0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(ToastContext.Provider, __assign({ value: undefined }, { children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(react_toastify__WEBPACK_IMPORTED_MODULE_2__.ToastContainer, { className: "container", position: "top-center", autoClose: 3000, bodyClassName: "toast__body", toastClassName: "toast", pauseOnHover: false, closeButton: false, hideProgressBar: true }), children] })));
 }