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

package/src/Presentation/layouts/Desktop/QuickBloxUIKitDesktopLayout.tsx

@@ -41,8 +41,6 @@ import { useMobileLayout } from '../../components/containers/SectionList/hooks';
 import { MessageDTOMapper } from '../../../Data/source/remote/Mapper/MessageDTOMapper';
 import MembersList from '../../Views/DialogInfo/MembersList/MembersList';
 import useUsersListViewModel from '../../Views/DialogInfo/UsersList/useUsersListViewModel';
-import { GetUserNameFct } from '../../Views/Dialog/Message/IncomingMessage/IncomingMessage';
-import { UserEntity } from '../../../Domain/entity/UserEntity';
 import Header from '../../ui-components/Header/Header';
 import Avatar from '../../ui-components/Avatar/Avatar';
 import {
@@ -81,57 +79,36 @@ const QuickBloxUIKitDesktopLayout: React.FC<
   // eslint-disable-next-line @typescript-eslint/no-unused-vars,react/function-component-definition
 > = ({
   theme = undefined,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   AITranslate = undefined,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   AIRephrase = undefined,
   AIAssist = undefined,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   uikitHeightOffset = '0px',
 }: QuickBloxUIKitDesktopLayoutProps) => {
-  console.log('create QuickBloxUIKitDesktopLayout');
-  const [forwardMessage, setForwardMessage] = useState<null | MessageEntity>();
-  const forwardMessageModal = useModal();
-  const [selectedDialog, setSelectedDialog] = React.useState<DialogEntity>();
+  const mimeType = 'audio/webm;codecs=opus'; // audio/ogg audio/mpeg audio/webm audio/x-wav audio/mp4
+  const messagePerPage = 47;
 
   const currentContext = useQbInitializedDataContext();
   const QBConfig =
     currentContext.InitParams.qbConfig ||
     DefaultConfigurations.getDefaultQBConfig();
-  // const eventMessaging = useEventMessagesRepository();
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
   const userName =
     currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.userName;
   const currentUserId =
     currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.userId;
   const sessionToken =
     currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.sessionToken;
+  const { enableForwarding } = QBConfig.appConfig;
+  const { enableReplying } = QBConfig.appConfig;
+  const { maxFileSize } = currentContext.InitParams;
 
-  const dialogsViewModel: DialogListViewModel =
-    useDialogListViewModel(currentContext);
-
-  // must re-create as result dialog changing
-  const messagesViewModel: DialogViewModel = useDialogViewModel(
-    dialogsViewModel.entity?.type,
-    dialogsViewModel.entity,
-  );
-
-  const { connectionRepository, browserOnline } = useQBConnection();
-  const [isOnline, setIsOnline] = useState<boolean>(browserOnline);
+  const maxTokensForAIRephrase =
+    currentContext.InitParams.qbConfig.configAIApi.AIRephraseWidgetConfig
+      .maxTokens;
 
-  useEffect(() => {
-    if (
-      isOnline === false ||
-      connectionRepository.isChatConnected() === false
-    ) {
-      setIsOnline(false);
-    } else {
-      setIsOnline(true);
-    }
-  }, [browserOnline, connectionRepository.isChatConnected()]);
+  const rephraseTones: Tone[] =
+    currentContext.InitParams.qbConfig.configAIApi.AIRephraseWidgetConfig.Tones;
 
-  let defaultAIRephraseWidget = AIRephrase?.AIWidget; // useDefaultTextInputWidget();
+  let defaultAIRephraseWidget = AIRephrase?.AIWidget;
   let defaultAITranslateWidget = AITranslate?.AIWidget;
   let defaultAIAssistWidget = AIAssist?.AIWidget;
 
@@ -244,32 +221,101 @@ const QuickBloxUIKitDesktopLayout: React.FC<
   getAITranslate();
   getAIRephrase();
   getAIAssistAnswer();
+  const dialogsViewModel: DialogListViewModel =
+    useDialogListViewModel(currentContext);
 
-  const { enableForwarding } = QBConfig.appConfig;
-  const { enableReplying } = QBConfig.appConfig;
+  const messagesViewModel: DialogViewModel = useDialogViewModel(
+    dialogsViewModel.entity?.type,
+    dialogsViewModel.entity,
+  );
 
-  const selectDialogActions = (item: BaseViewModel<DialogEntity>): void => {
-    if (!dialogsViewModel.loading) {
-      setSelectedDialog(item.entity);
-      // dialogsViewModel.entity = item.entity;
-    }
-  };
+  const [forwardMessage, setForwardMessage] = useState<null | MessageEntity>();
+  const forwardMessageModal = useModal();
+  const [selectedDialog, setSelectedDialog] = React.useState<DialogEntity>();
+  const userViewModel = useUsersListViewModel(selectedDialog);
+  const [dialogAvatarUrl, setDialogAvatarUrl] = React.useState('');
+
+  const { browserOnline, connectionStatus, connectionRepository } =
+    useQBConnection();
+
+  const [isOnline, setIsOnline] = useState<boolean>(
+    browserOnline && connectionStatus,
+  );
+
+  connectionRepository.subscribe((status) => {
+    console.log(`Connection status: ${status ? 'CONNECTED' : 'DISCONNECTED'}`);
+    if (status) setIsOnline(true);
+    else setIsOnline(false);
+  });
+
+  const [needRefresh, setNeedRefresh] = useState(false);
+  const toastConnectionErrorId = React.useRef(null);
+
+  //
+  const [waitAIWidget, setWaitAIWidget] = useState<boolean>(false);
+  const [messageText, setMessageText] = useState<string>('');
 
   const [showReplyMessage, setShowReplyMessage] = useState(false);
   const [messagesToReply, setMessagesToReply] = useState<MessageEntity[]>([]);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [isMobile, width, height, breakpoint] = useMobileLayout();
   const [clientHeight, setClientHeight] = useState<number>(0);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [scrollUpToDown, setScrollUpToDown] = React.useState(false);
+  const [needDialogInformation, setNeedDialogInformation] = useState(false);
+  const informationCloseHandler = (): void => {
+    setNeedDialogInformation(false);
+  };
+  const informationOpenHandler = (): void => {
+    setNeedDialogInformation(true);
+  };
+  //
+  const maxWidthToResizing =
+    selectedDialog && needDialogInformation
+      ? '$message-view-container-wrapper-min-width'
+      : '1040px';
+  const workHeight = isMobile
+    ? `calc(${height.toString()}px - ${uikitHeightOffset} - 28px)`
+    : `calc(100vh - ${uikitHeightOffset} - 28px)`;
+  const messagesContainerMobileHeight = showReplyMessage
+    ? `calc(${clientHeight}px - 128px - 64px - 16px)`
+    : `calc(${clientHeight}px - 128px - 16px)`;
+  const messagesContainerHeight = showReplyMessage
+    ? `calc(${clientHeight}px - 128px - 64px)`
+    : `calc(${clientHeight}px - 128px - 1px)`;
+  const clientContainerHeight = `${clientHeight - 5}px`;
+  const headerHeight = 64;
+  const dialogListScrollableHeight = clientHeight - headerHeight - 6;
+
+  const [warningErrorText, setWarningErrorText] = useState<string>('');
+  const [useAudioWidget, setUseAudioWidget] = useState<boolean>(false);
+  const [fileToSend, setFileToSend] = useState<File | null>(null);
+  const [isRecording, setIsRecording] = useState(false);
+  const [permission, setPermission] = useState(false);
+  const [stream, setStream] = useState<MediaStream>();
+  const mediaRecorder = useRef<MediaRecorder>();
+  const [resultAudioBlob, setResultAudioBlob] = useState<Blob>();
+  const [audioChunks, setAudioChunks] = useState<Array<Blob>>([]);
+  const newModal = useModal();
+  const [dialogToLeave, setDialogToLeave] = useState<DialogEntity>();
+  const [showDialogList, setShowDialogList] = useState<boolean>(true);
+  const [showDialogMessages, setShowDialogMessages] = useState<boolean>(true);
+  const [showDialogInformation, setShowDialogInformation] =
+    useState<boolean>(false);
+  const [isAllMembersShow, setIsAllMembersShow] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+
+  // functions
 
-  // const [dialogMessagesCount, setDialogMessageCount] = useState(100);
-  // const [hasMore, setHasMore] = React.useState(true);
-  // const [messagesToView, setMessagesToView] = React.useState<MessageEntity[]>(
-  //   [],
-  // );
+  const selectDialogActions = (item: BaseViewModel<DialogEntity>): void => {
+    if (isOnline) {
+      if (!dialogsViewModel.loading) {
+        setSelectedDialog(item.entity);
+        // dialogsViewModel.entity = item.entity;
+      }
+    }
+  };
 
-  // инициализация СДК и загрузка тестовых данных, запуск пинга - может не быть
-  // todo: добавить метод в контекст
   const isAuthProcessed = (): boolean => {
     console.log('call isAuthProcessed');
     const result =
@@ -294,106 +340,6 @@ const QuickBloxUIKitDesktopLayout: React.FC<
     return result;
   };
 
-  useEffect(() => {
-    const codeVersion = '0.3.0';
-
-    console.log(`React UIKit CODE VERSION IS ${codeVersion}`);
-    console.log('TestStage: GET DATA ');
-    console.log(
-      `auth data: ${JSON.stringify(
-        currentContext.InitParams.loginData,
-      )} at ${new Date().toLocaleTimeString()}`,
-    );
-    if (isAuthProcessed()) {
-      console.log('auth is completed, CAN GET DATA');
-      const pagination: Pagination = new Pagination();
-
-      dialogsViewModel?.getDialogs(pagination);
-    }
-
-    return () => {
-      console.log('TestStage: USE EFFECT release');
-      dialogsViewModel.release();
-    };
-  }, []);
-
-  useEffect(() => {
-    console.log('TestStage: GET DATA AFTER User data has CHANGED');
-    console.log(
-      `auth is ${JSON.stringify(
-        currentContext.InitParams.loginData,
-      )} at ${new Date().toLocaleTimeString()}`,
-    );
-
-    if (isAuthProcessed()) {
-      console.log('auth is completed, FETCH DATA');
-      const pagination: Pagination = new Pagination();
-
-      dialogsViewModel?.getDialogs(pagination);
-    }
-  }, [currentContext.InitParams]);
-
-  // const fetchMoreData = () => {
-  //   if (messagesToView.length >= dialogMessagesCount) {
-  //     setHasMore(false);
-  //
-  //     return;
-  //   }
-  //   if (
-  //     hasMore &&
-  //     messagesToView.length > 0 &&
-  //     messagesToView.length < dialogMessagesCount
-  //   ) {
-  //     setMessagesToView((prevState) => {
-  //       const newState = [...prevState];
-  //
-  //       const newMessageEntity: MessageEntity =
-  //         messagesViewModel.messages[prevState.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]);
-  const messagePerPage = 47;
-
-  useEffect(() => {
-    if (messagesViewModel.entity) {
-      messagesViewModel.getMessages(new Pagination(0, messagePerPage));
-    }
-  }, [messagesViewModel.entity]);
-
   const fetchMoreData = () => {
     if (messagesViewModel.pagination.hasNextPage()) {
       const newPagination = messagesViewModel.pagination;
@@ -405,8 +351,6 @@ const QuickBloxUIKitDesktopLayout: React.FC<
     }
   };
 
-  const userViewModel = useUsersListViewModel(selectedDialog);
-  const [dialogAvatarUrl, setDialogAvatarUrl] = React.useState('');
   const getUserAvatarByUid = async () => {
     let result = '';
     const participants: Array<number> =
@@ -432,15 +376,6 @@ const QuickBloxUIKitDesktopLayout: React.FC<
     }
   }
 
-  useEffect(() => {
-    getDialogPhotoFileForPreview();
-
-    return () => {
-      if (dialogAvatarUrl) {
-        URL.revokeObjectURL(dialogAvatarUrl);
-      }
-    };
-  }, [dialogsViewModel.entity]);
   // eslint-disable-next-line consistent-return
   const renderIconForTypeDialog = (dialogEntity: DialogEntity) => {
     if (dialogEntity.type === DialogType.group) {
@@ -470,62 +405,6 @@ const QuickBloxUIKitDesktopLayout: React.FC<
     }
   };
 
-  useEffect(() => {
-    console.log(
-      `Clear selected dialog: ${
-        selectedDialog?.name || 'Dialog Name is empty'
-      }`,
-    );
-    if (!dialogsViewModel.entity) {
-      setSelectedDialog(undefined);
-    }
-  }, [dialogsViewModel.entity]);
-
-  const [needDialogInformation, setNeedDialogInformation] = useState(false);
-  const informationCloseHandler = (): void => {
-    setNeedDialogInformation(false);
-  };
-  const informationOpenHandler = (): void => {
-    setNeedDialogInformation(true);
-  };
-  //
-  const maxTokensForAIRephrase =
-    currentContext.InitParams.qbConfig.configAIApi.AIRephraseWidgetConfig
-      .maxTokens;
-
-  const rephraseTones: Tone[] =
-    currentContext.InitParams.qbConfig.configAIApi.AIRephraseWidgetConfig.Tones;
-
-  const { maxFileSize } = currentContext.InitParams;
-  //
-  const [waitAIWidget, setWaitAIWidget] = useState<boolean>(false);
-  const [messageText, setMessageText] = useState<string>('');
-
-  const [warningErrorText, setWarningErrorText] = useState<string>('');
-  // const [showErrorToast, setShowErrorToast] = useState<boolean>(false);
-  // const [messageErrorToast, setMessageErrorToast] = useState<string>('');
-
-  const [useAudioWidget, setUseAudioWidget] = useState<boolean>(false);
-
-  const [fileToSend, setFileToSend] = useState<File | null>(null);
-
-  const [isRecording, setIsRecording] = useState(false);
-  //
-  const [permission, setPermission] = useState(false);
-
-  // const [recordingStatus, setRecordingStatus] = useState('inactive');
-
-  const [stream, setStream] = useState<MediaStream>();
-  // const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder>();
-  const mediaRecorder = useRef<MediaRecorder>();
-  const [resultAudioBlob, setResultAudioBlob] = useState<Blob>();
-
-  const [audioChunks, setAudioChunks] = useState<Array<Blob>>([]);
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const 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
-
   const showErrorMessage = (errorMessage: string) => {
     setWarningErrorText(errorMessage);
     setTimeout(() => {
@@ -561,41 +440,6 @@ const QuickBloxUIKitDesktopLayout: React.FC<
       });
   };
 
-  useEffect(() => {
-    const MAXSIZE = maxFileSize || 90 * 1000000;
-    const MAXSIZE_FOR_MESSAGE = MAXSIZE / (1024 * 1024);
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const flag = fileToSend?.size && fileToSend?.size < MAXSIZE;
-
-    if (fileToSend?.size && fileToSend?.size < MAXSIZE) {
-      if (showReplyMessage && messagesToReply?.length > 0) {
-        const replyData: ReplyMessagesParams = {
-          messagesToReply,
-          relatedFileMessage: fileToSend,
-          relatedTextMessage:
-            messageText || MessageDTOMapper.REPLY_MESSAGE_PREFIX,
-        };
-
-        repliedActions(replyData);
-      } else {
-        // eslint-disable-next-line promise/catch-or-return
-        messagesViewModel
-          .sendAttachmentMessage(fileToSend)
-          .then((resultOperation) => {
-            // eslint-disable-next-line promise/always-return
-            if (!resultOperation) {
-              toast(`Incorrect data`);
-            }
-          });
-      }
-    } else if (fileToSend) {
-      toast(
-        `file size ${fileToSend?.size} must be less then ${MAXSIZE_FOR_MESSAGE} mb.`,
-      );
-    }
-  }, [fileToSend]);
-
-  //  const [isVoiceMessage, setVoiceMessage] = useState(true);
   const getMicrophonePermission = async () => {
     if (window) {
       try {
@@ -707,151 +551,51 @@ const QuickBloxUIKitDesktopLayout: React.FC<
     return resultFile;
   };
 
-  useEffect(() => {
-    const fileExt = 'mp4';
-
-    if (resultAudioBlob) {
-      const voiceMessage = blobToFile(
-        resultAudioBlob,
-        `${userName || ''}_voice_message.${fileExt}`,
-      );
-
-      setFileToSend(voiceMessage);
-      if (useAudioWidget) {
-        setUseAudioWidget(false);
-      }
-      //
-    }
-  }, [resultAudioBlob]);
-
-  useEffect(() => {
-    // setFileToSend(null);
-    if (isRecording) {
-      if (!permission) {
-        // eslint-disable-next-line promise/catch-or-return,promise/always-return
-        getMicrophonePermission().catch(() => {
-          showErrorMessage(`Have no audio.`);
-        });
-      } else {
-        // eslint-disable-next-line promise/catch-or-return,promise/always-return
-        startRecording().then(() => {
-          setWarningErrorText(`Your voice is recording during for 1 minutes`);
-        });
-      }
-    } else {
-      if (permission && mediaRecorder.current) {
-        stopRecording();
-      }
-      setWarningErrorText('');
-    }
-  }, [isRecording]);
-
-  useEffect(() => {
-    if (isRecording && permission) {
-      // eslint-disable-next-line promise/always-return,promise/catch-or-return
-      startRecording().then(() => {
-        setWarningErrorText(`Your voice is recording during for 1 minutes`);
-      });
-    }
-  }, [permission]);
-
-  useEffect(() => {
-    setWaitAIWidget(false);
-    if (
-      defaultAIRephraseWidget?.textToContent &&
-      defaultAIRephraseWidget?.textToContent.length > 0
-    ) {
-      setMessageText(defaultAIRephraseWidget?.textToContent);
-    }
-  }, [defaultAIRephraseWidget?.textToContent]);
-
-  useEffect(() => {
-    setWaitAIWidget(false);
-  }, [defaultAITranslateWidget?.textToContent]);
-
-  useEffect(() => {
-    setWaitAIWidget(false);
-    if (
-      defaultAIAssistWidget?.textToContent &&
-      defaultAIAssistWidget?.textToContent.length > 0
-    ) {
-      setMessageText(defaultAIAssistWidget?.textToContent);
-    }
-  }, [defaultAIAssistWidget?.textToContent]);
-
-  //
-
   function sendTextMessageActions(textToSend: string) {
-    // closeReplyMessageFlowHandler
-    if (messagesViewModel?.loading) return;
-    // setVoiceMessage(true);
-    if (textToSend.length > 0 && textToSend.length <= 1000) {
-      setMessageText('');
-      if (showReplyMessage && messagesToReply?.length > 0) {
-        const replyData: ReplyMessagesParams = {
-          messagesToReply,
-          relatedTextMessage: textToSend,
-        };
+    if (isOnline) {
+      // closeReplyMessageFlowHandler
+      if (messagesViewModel?.loading) return;
+      // setVoiceMessage(true);
+      if (textToSend.length > 0 && textToSend.length <= 1000) {
+        setMessageText('');
+        if (showReplyMessage && messagesToReply?.length > 0) {
+          const replyData: ReplyMessagesParams = {
+            messagesToReply,
+            relatedTextMessage: textToSend,
+          };
 
-        repliedActions(replyData);
-      } else {
-        messagesViewModel.sendTextMessage(textToSend);
+          repliedActions(replyData);
+        } else {
+          messagesViewModel.sendTextMessage(textToSend);
+          setMessageText('');
+        }
         setMessageText('');
+      } else {
+        setWarningErrorText(
+          'length of text message must be less then 1000 chars.',
+        );
+        setTimeout(() => {
+          setWarningErrorText('');
+        }, 3000);
       }
-      setMessageText('');
-    } else {
-      setWarningErrorText(
-        'length of text message must be less then 1000 chars.',
-      );
-      setTimeout(() => {
-        setWarningErrorText('');
-      }, 3000);
     }
   }
-  //
-  useEffect(() => {
-    messagesViewModel.entity = dialogsViewModel.entity;
-    // setMessagesToView([]);
-    setMessageText('');
-  }, [dialogsViewModel.entity]);
-
-  //
-  useEffect(() => {
-    if (!isMobile && messagesViewModel.entity) {
-      dialogsViewModel.setWaitLoadingStatus(messagesViewModel?.loading);
-      const timeoutId = setTimeout(() => {
-        dialogsViewModel.setWaitLoadingStatus(false); // wait only for 3 sec
-      }, 3000);
-
-      return () => clearTimeout(timeoutId);
-    }
-
-    return () => {
-      // Placeholder: Cleanup handler is not required
-    };
-  }, [messagesViewModel?.loading]);
-  //
 
   const ChangeFileHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const reader = new FileReader();
-    const file = event.currentTarget.files
-      ? event.currentTarget.files[0]
-      : null;
+    if (isOnline) {
+      const reader = new FileReader();
+      const file = event.currentTarget.files
+        ? event.currentTarget.files[0]
+        : null;
 
-    reader.onloadend = () => {
-      setFileToSend(file);
-    };
+      reader.onloadend = () => {
+        setFileToSend(file);
+      };
 
-    if (file !== null) reader.readAsDataURL(file);
+      if (file !== null) reader.readAsDataURL(file);
+    }
   };
 
-  //
-  //
-  const maxWidthToResizing =
-    selectedDialog && needDialogInformation
-      ? '$message-view-container-wrapper-min-width'
-      : '1040px';
-
   const handleOnReply = (message: MessageEntity): void => {
     setMessagesToReply([message]);
     setShowReplyMessage(true);
@@ -924,13 +668,107 @@ const QuickBloxUIKitDesktopLayout: React.FC<
     return sections;
   }
 
-  const [showDialogList, setShowDialogList] = useState<boolean>(true);
-  const [showDialogMessages, setShowDialogMessages] = useState<boolean>(true);
-  const [showDialogInformation, setShowDialogInformation] =
-    useState<boolean>(false);
+  const handleHeightChange = (newHeight: number) => {
+    console.log('The new height is:', newHeight);
+    setClientHeight(newHeight);
+  };
+
+  const leaveDialogHandler = (dialog: DialogEntity) => {
+    if (isOnline) {
+      setDialogToLeave(dialog);
+    }
+  };
+
+  const handleDialogOnClick = () => {
+    if (isOpen) {
+      setDialogToLeave(undefined);
+    }
+    setIsOpen((state) => !state);
+  };
+
+  const handleLeaveDialog = () => {
+    if (dialogToLeave) {
+      dialogsViewModel
+        .deleteDialog(dialogToLeave as GroupDialogEntity)
+        .then((result) => {
+          // eslint-disable-next-line promise/always-return
+          if (!result) {
+            toast('Dialog have not been left');
+          }
+          handleDialogOnClick();
+        })
+        .catch((e) => {
+          console.log(e);
+          toast("Can't leave dialog");
+        });
+    }
+  };
+  // // eslint-disable-next-line react/prop-types,@typescript-eslint/no-unused-vars
+  // const defaultGetSenderName: GetUserNameFct = async (props: {
+  //   userId?: number;
+  //   sender?: UserEntity;
+  // }): Promise<string | undefined> => {
+  //   let result = 'undefined user';
   //
-  const [isAllMembersShow, setIsAllMembersShow] = React.useState(false);
+  //   // eslint-disable-next-line react/prop-types
+  //   if (!props.sender) {
+  //     // eslint-disable-next-line react/prop-types
+  //     if (props.userId && props.userId > 0) {
+  //       // eslint-disable-next-line react/prop-types,@typescript-eslint/no-unsafe-call
+  //       const senderUser = await userViewModel.getUserById(props.userId);
+  //
+  //       if (!senderUser) {
+  //         return result;
+  //       }
+  //       result =
+  //         senderUser.full_name ||
+  //         senderUser.login ||
+  //         senderUser.email ||
+  //         // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  //         senderUser.id.toString();
+  //     } else return result;
+  //   } else {
+  //     result =
+  //       // eslint-disable-next-line react/prop-types
+  //       props.sender.full_name ||
+  //       // eslint-disable-next-line react/prop-types
+  //       props.sender.login ||
+  //       // eslint-disable-next-line react/prop-types
+  //       props.sender.email ||
+  //       // eslint-disable-next-line react/prop-types
+  //       props.sender.id.toString();
+  //   }
+  //
+  //   return result;
+  // };
+
+  const createDialogHandler = () => {
+    if (isOnline) {
+      newModal.toggleModal();
+    }
+  };
 
+  useEffect(() => {
+    const codeVersion = '0.3.0';
+
+    console.log(`React UIKit CODE VERSION IS ${codeVersion}`);
+    if (isAuthProcessed()) {
+      const pagination: Pagination = new Pagination();
+
+      dialogsViewModel?.getDialogs(pagination);
+    }
+
+    return () => {
+      dialogsViewModel.release();
+    };
+  }, []);
+  useEffect(() => {
+    if (isAuthProcessed()) {
+      const pagination: Pagination = new Pagination();
+
+      dialogsViewModel?.getDialogs(pagination);
+    }
+  }, [currentContext.InitParams]);
   useEffect(() => {
     if (isMobile) {
       if (!selectedDialog) {
@@ -955,16 +793,78 @@ const QuickBloxUIKitDesktopLayout: React.FC<
       setShowDialogInformation(true);
     }
     //
-    const sizeChangingLogString = `SIZE INFO: height: ${height.toString()} clientHeight: ${clientHeight}  width: ${width.toString()} breakpont: ${breakpoint.toString()} isMobile:
-       ${isMobile?.toString()} selectedDialog:
-      ${selectedDialog ? 'true' : 'false'} showDialogMessages:
-       ${showDialogMessages?.toString()} showDialogList:
-       ${showDialogList?.toString()} showDialogInformation:
-       ${showDialogInformation?.toString()}`;
-
-    console.log(sizeChangingLogString);
+    // const sizeChangingLogString = `SIZE INFO: height: ${height.toString()} clientHeight: ${clientHeight}  width: ${width.toString()} breakpont: ${breakpoint.toString()} isMobile:
+    //    ${isMobile?.toString()} selectedDialog:
+    //   ${selectedDialog ? 'true' : 'false'} showDialogMessages:
+    //    ${showDialogMessages?.toString()} showDialogList:
+    //    ${showDialogList?.toString()} showDialogInformation:
+    //    ${showDialogInformation?.toString()}`;
+    //
+    // console.log(sizeChangingLogString);
   }, [isMobile]);
+  useEffect(() => {
+    if (browserOnline) {
+      setIsOnline(true);
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      toast.dismiss(toastConnectionErrorId.current);
+    } else {
+      setIsOnline(false);
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      toastConnectionErrorId.current = toast('Connection ...', {
+        autoClose: false,
+        isLoading: true,
+      });
+    }
+  }, [browserOnline && connectionStatus]);
+  useEffect(() => {
+    if (!isOnline) {
+      setNeedRefresh(true);
+    }
+  }, [isOnline]);
+  useEffect(() => {
+    if (isOnline && needRefresh) {
+      if (messagesViewModel.entity) {
+        messagesViewModel.getMessages(new Pagination(0, messagePerPage));
+
+        setNeedRefresh(false);
+      }
+    }
+  }, [isOnline]);
+  useEffect(() => {
+    getDialogPhotoFileForPreview();
+    if (dialogsViewModel.entity) {
+      userViewModel.entity = dialogsViewModel.entity;
+    }
 
+    return () => {
+      if (dialogAvatarUrl) {
+        URL.revokeObjectURL(dialogAvatarUrl);
+      }
+    };
+  }, [dialogsViewModel.entity]);
+  useEffect(() => {
+    console.log(
+      `Clear selected dialog: ${
+        selectedDialog?.name || 'Dialog Name is empty'
+      }`,
+    );
+    if (!dialogsViewModel.entity) {
+      setSelectedDialog(undefined);
+    }
+  }, [dialogsViewModel.entity]);
+  useEffect(() => {
+    messagesViewModel.entity = dialogsViewModel.entity;
+    // setMessagesToView([]);
+    setMessageText('');
+  }, [dialogsViewModel.entity]);
+  useEffect(() => {
+    if (userViewModel.entity) {
+      userViewModel.getUsers();
+    }
+  }, [userViewModel.entity]);
   useEffect(() => {
     if (selectedDialog && selectedDialog) {
       dialogsViewModel.entity = selectedDialog;
@@ -978,13 +878,124 @@ const QuickBloxUIKitDesktopLayout: React.FC<
       setShowDialogList(true);
     }
   }, [selectedDialog]);
+  useEffect(() => {
+    if (messagesViewModel.entity) {
+      messagesViewModel.getMessages(new Pagination(0, messagePerPage));
+    }
+  }, [messagesViewModel.entity]);
+  useEffect(() => {
+    if (!isMobile && messagesViewModel.entity) {
+      dialogsViewModel.setWaitLoadingStatus(messagesViewModel?.loading);
+      const timeoutId = setTimeout(() => {
+        dialogsViewModel.setWaitLoadingStatus(false); // wait only for 3 sec
+      }, 3000);
 
+      return () => clearTimeout(timeoutId);
+    }
+
+    return () => {
+      // Placeholder: Cleanup handler is not required
+    };
+  }, [messagesViewModel?.loading]);
   useEffect(() => {
-    if (userViewModel.entity) {
-      userViewModel.getUsers();
+    const MAXSIZE = maxFileSize || 90 * 1000000;
+    const MAXSIZE_FOR_MESSAGE = MAXSIZE / (1024 * 1024);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const flag = fileToSend?.size && fileToSend?.size < MAXSIZE;
+
+    if (fileToSend?.size && fileToSend?.size < MAXSIZE) {
+      if (showReplyMessage && messagesToReply?.length > 0) {
+        const replyData: ReplyMessagesParams = {
+          messagesToReply,
+          relatedFileMessage: fileToSend,
+          relatedTextMessage:
+            messageText || MessageDTOMapper.REPLY_MESSAGE_PREFIX,
+        };
+
+        repliedActions(replyData);
+      } else if (isOnline) {
+        // eslint-disable-next-line promise/catch-or-return
+        messagesViewModel
+          .sendAttachmentMessage(fileToSend)
+          .then((resultOperation) => {
+            // eslint-disable-next-line promise/always-return
+            if (!resultOperation) {
+              toast(`Incorrect data`);
+            }
+          });
+      }
+    } else if (fileToSend) {
+      toast(
+        `file size ${fileToSend?.size} must be less then ${MAXSIZE_FOR_MESSAGE} mb.`,
+      );
     }
-  }, [userViewModel.entity]);
+  }, [fileToSend]);
+  useEffect(() => {
+    const fileExt = 'mp4';
 
+    if (resultAudioBlob) {
+      const voiceMessage = blobToFile(
+        resultAudioBlob,
+        `${userName || ''}_voice_message.${fileExt}`,
+      );
+
+      setFileToSend(voiceMessage);
+      if (useAudioWidget) {
+        setUseAudioWidget(false);
+      }
+      //
+    }
+  }, [resultAudioBlob]);
+  useEffect(() => {
+    // setFileToSend(null);
+    if (isRecording) {
+      if (!permission) {
+        // eslint-disable-next-line promise/catch-or-return,promise/always-return
+        getMicrophonePermission().catch(() => {
+          showErrorMessage(`Have no audio.`);
+        });
+      } else {
+        // eslint-disable-next-line promise/catch-or-return,promise/always-return
+        startRecording().then(() => {
+          setWarningErrorText(`Your voice is recording during for 1 minutes`);
+        });
+      }
+    } else {
+      if (permission && mediaRecorder.current) {
+        stopRecording();
+      }
+      setWarningErrorText('');
+    }
+  }, [isRecording]);
+  useEffect(() => {
+    if (isRecording && permission) {
+      // eslint-disable-next-line promise/always-return,promise/catch-or-return
+      startRecording().then(() => {
+        setWarningErrorText(`Your voice is recording during for 1 minutes`);
+      });
+    }
+  }, [permission]);
+  useEffect(() => {
+    setWaitAIWidget(false);
+    if (
+      defaultAIRephraseWidget?.textToContent &&
+      defaultAIRephraseWidget?.textToContent.length > 0
+    ) {
+      setMessageText(defaultAIRephraseWidget?.textToContent);
+    }
+  }, [defaultAIRephraseWidget?.textToContent]);
+  useEffect(() => {
+    setWaitAIWidget(false);
+  }, [defaultAITranslateWidget?.textToContent]);
+  useEffect(() => {
+    setWaitAIWidget(false);
+    if (
+      defaultAIAssistWidget?.textToContent &&
+      defaultAIAssistWidget?.textToContent.length > 0
+    ) {
+      setMessageText(defaultAIAssistWidget?.textToContent);
+    }
+  }, [defaultAIAssistWidget?.textToContent]);
   useEffect(() => {
     if (isMobile) {
       if (needDialogInformation) {
@@ -996,108 +1007,15 @@ const QuickBloxUIKitDesktopLayout: React.FC<
       }
     }
   }, [needDialogInformation]);
-
-  const handleHeightChange = (newHeight: number) => {
-    console.log('The new height is:', newHeight);
-    setClientHeight(newHeight);
-  };
-  const workHeight = isMobile
-    ? `calc(${height.toString()}px - ${uikitHeightOffset} - 28px)`
-    : `calc(100vh - ${uikitHeightOffset} - 28px)`;
-
-  const [dialogToLeave, setDialogToLeave] = useState<DialogEntity>();
-  const leaveDialogHandler = (dialog: DialogEntity) => {
-    setDialogToLeave(dialog);
-  };
-
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handleDialogOnClick = () => {
-    if (isOpen) {
-      setDialogToLeave(undefined);
-    }
-    setIsOpen((state) => !state);
-  };
-
   useEffect(() => {
     if (dialogToLeave) {
       handleDialogOnClick();
     }
   }, [dialogToLeave]);
 
-  const handleLeaveDialog = () => {
-    if (dialogToLeave) {
-      dialogsViewModel
-        .deleteDialog(dialogToLeave as GroupDialogEntity)
-        .then((result) => {
-          // eslint-disable-next-line promise/always-return
-          if (!result) {
-            toast('Dialog have not been left');
-          }
-          handleDialogOnClick();
-        })
-        .catch((e) => {
-          console.log(e);
-          toast("Can't leave dialog");
-        });
-    }
-  };
-  // eslint-disable-next-line react/prop-types,@typescript-eslint/no-unused-vars
-  const defaultGetSenderName: GetUserNameFct = async (props: {
-    userId?: number;
-    sender?: UserEntity;
-  }): Promise<string | undefined> => {
-    let result = 'undefined user';
-
-    // eslint-disable-next-line react/prop-types
-    if (!props.sender) {
-      // eslint-disable-next-line react/prop-types
-      if (props.userId && props.userId > 0) {
-        // eslint-disable-next-line react/prop-types,@typescript-eslint/no-unsafe-call
-        const senderUser = await userViewModel.getUserById(props.userId);
-
-        if (!senderUser) {
-          return result;
-        }
-        result =
-          senderUser.full_name ||
-          senderUser.login ||
-          senderUser.email ||
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-          senderUser.id.toString();
-      } else return result;
-    } else {
-      result =
-        // eslint-disable-next-line react/prop-types
-        props.sender.full_name ||
-        // eslint-disable-next-line react/prop-types
-        props.sender.login ||
-        // eslint-disable-next-line react/prop-types
-        props.sender.email ||
-        // eslint-disable-next-line react/prop-types
-        props.sender.id.toString();
-    }
-
-    return result;
-  };
-  const messagesContainerMobileHeight = showReplyMessage
-    ? `calc(${clientHeight}px - 128px - 64px - 16px)`
-    : `calc(${clientHeight}px - 128px - 16px)`;
-  const messagesContainerHeight = showReplyMessage
-    ? `calc(${clientHeight}px - 128px - 64px)`
-    : `calc(${clientHeight}px - 128px - 1px)`;
-  const clientContainerHeight = `${clientHeight - 5}px`;
-  const headerHeight = 64;
-  const dialogListScrollableHeight = clientHeight - headerHeight - 6;
-
-  const newModal = useModal();
-
   return (
     <ToastProvider>
-      <div>
-        {/* <div style={{ height: '18px', border: '1px solid red' }}> */}
-        {/*  h:{height},w:{width},ch:{clientHeight},wh:{workHeight} */}
-        {/* </div> */}
+      <div className="qb-uikit-layout">
         <DesktopLayout
           mainContainerStyles={{
             minHeight: workHeight,
@@ -1108,13 +1026,14 @@ const QuickBloxUIKitDesktopLayout: React.FC<
           dialogsView={
             showDialogList ? (
               <DialogList
+                disableAction={!isOnline}
                 scrollableHeight={dialogListScrollableHeight}
                 // subHeaderContent={<CompanyLogo />}
                 // upHeaderContent={<CompanyLogo />}
                 dialogListViewModel={dialogsViewModel} // 1 Get 2 Update UseCase
                 selectedDialog={dialogsViewModel.entity}
                 onDialogSelected={selectDialogActions}
-                onCreateDialog={() => newModal.toggleModal()}
+                onCreateDialog={createDialogHandler}
                 onLeaveDialog={leaveDialogHandler}
                 additionalSettings={{
                   withoutHeader: false,
@@ -1175,7 +1094,7 @@ const QuickBloxUIKitDesktopLayout: React.FC<
                       className="messages-container"
                       onEndReached={fetchMoreData}
                       onEndReachedThreshold={0.95}
-                      refreshing={messagesViewModel?.loading}
+                      refreshing={needRefresh || messagesViewModel?.loading}
                       renderSectionHeader={(section) => (
                         <div className="message-view-container--system-message-wrapper">
                           <div
@@ -1196,6 +1115,7 @@ const QuickBloxUIKitDesktopLayout: React.FC<
                       renderItem={([, groupMessages], listRef) =>
                         groupMessages.map((message) => (
                           <MessageItem
+                            disableAction={!isOnline}
                             // defaultGetSenderName={defaultGetSenderName}
                             message={message}
                             currentUserId={currentUserId || -1}
@@ -1205,8 +1125,10 @@ const QuickBloxUIKitDesktopLayout: React.FC<
                               handleOnReply(m);
                             }}
                             onForward={(m: MessageEntity) => {
-                              setForwardMessage(m);
-                              forwardMessageModal.toggleModal();
+                              if (isOnline) {
+                                setForwardMessage(m);
+                                forwardMessageModal.toggleModal();
+                              }
                             }}
                             listRef={listRef}
                             AIAssistWidget={defaultAIAssistWidget}
@@ -1233,6 +1155,7 @@ const QuickBloxUIKitDesktopLayout: React.FC<
                 }
                 renderMessageInput={
                   <MessageInput
+                    disableActions={!isOnline}
                     previewMessage={
                       showReplyMessage ? (
                         <ReplyMessagePreview
@@ -1263,11 +1186,12 @@ const QuickBloxUIKitDesktopLayout: React.FC<
                     onAttachment={ChangeFileHandler}
                     enableVoice={isRecording}
                     onVoice={() => {
-                      if (messagesViewModel?.loading) return;
+                      if (messagesViewModel?.loading || !isOnline) return;
                       setIsRecording(!isRecording);
                     }}
                     rephrase={
                       <AIRephraseWidget
+                        disableActions={!isOnline}
                         waitAIWidget={waitAIWidget}
                         messageText={messageText}
                         theme={theme}
@@ -1321,6 +1245,7 @@ const QuickBloxUIKitDesktopLayout: React.FC<
               />
             ) : (
               <DialogInfo
+                disableAction={!isOnline}
                 onShowAllMemberClick={(value: boolean) => {
                   setIsAllMembersShow(value);
                 }}
@@ -1368,6 +1293,7 @@ const QuickBloxUIKitDesktopLayout: React.FC<
             onFinished={() => {
               newModal.toggleModal();
             }}
+            isOnline={isOnline}
           />
         </DialogWindow>
         {selectedDialog && (
@@ -1382,6 +1308,7 @@ const QuickBloxUIKitDesktopLayout: React.FC<
               currentUserName={userName || ''}
               dialogs={dialogsViewModel.dialogs}
               onSendData={handleSendData}
+              disableActions={!isOnline}
             />
           </DialogWindow>
         )}