quickblox-react-ui-kit 0.1.7 → 0.1.8

package/src/Presentation/components/UI/Dialogs/MessagesView/MessagesView.tsx

@@ -22,7 +22,7 @@ import { DialogType } from '../../../../../Domain/entity/DialogTypes';
 import { GroupDialogEntity } from '../../../../../Domain/entity/GroupDialogEntity';
 import { PrivateDialogEntity } from '../../../../../Domain/entity/PrivateDialogEntity';
 import { UserEntity } from '../../../../../Domain/entity/UserEntity';
-import useQbDataContext from '../../../providers/QuickBloxUIKitProvider/useQbDataContext';
+import useQbInitializedDataContext from '../../../providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
 import { Pagination } from '../../../../../Domain/repository/Pagination';
 import {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -47,33 +47,48 @@ import VoiceRecordingProgress from './VoiceRecordingProgress/VoiceRecordingProgr
 import UiKitTheme from '../../../../assets/UiKitTheme';
 import { DialogsViewModel } from '../../../../Views/Dialogs/DialogViewModel';
 import { HighLightLink, messageHasUrls } from './HighLightLink/HighLightLink';
+// import CompanyLogo from '../../../layouts/TestStage/CompanyLogo/CompanyLogo';
 
 type HeaderDialogsMessagesProps = {
+  // InputWidgetToLeftPlaceHolder?: InputWidget;
+  // InputWidgetToRightPlaceHolder?: InputWidget;
+  // IncomingMessageWidgetToRightPlaceHolder?: InputWidget;
   dialogsViewModel: DialogsViewModel;
-  InformationHandler?: FunctionTypeVoidToVoid;
+  onDialogInformationHandler?: FunctionTypeVoidToVoid;
   maxWidthToResize?: string;
   theme?: UiKitTheme;
+  subHeaderContent?: React.ReactNode;
+  upHeaderContent?: React.ReactNode;
 };
 
 // eslint-disable-next-line react/function-component-definition
 const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // InputWidgetToLeftPlaceHolder,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // InputWidgetToRightPlaceHolder,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // IncomingMessageWidgetToRightPlaceHolder,
   dialogsViewModel,
-  InformationHandler,
+  onDialogInformationHandler,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   maxWidthToResize = undefined,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   theme = undefined,
+  subHeaderContent = undefined,
+  upHeaderContent = undefined,
 }: HeaderDialogsMessagesProps) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const maxWidthToResizing =
     maxWidthToResize || '$message-view-container-wrapper-min-width';
   // const maxWidthToResizing = '720px'; // $message-view-container-wrapper-min-width:
 
-  const currentContext = useQbDataContext();
+  const currentContext = useQbInitializedDataContext();
   const currentUserId =
     currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.userId;
   const currentUserName =
     currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.userName;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { connectionRepository, browserOnline } = useQBConnection();
   const [dialogMessagesCount, setDialogMessageCount] = useState(100);
   const [hasMore, setHasMore] = React.useState(true);
@@ -339,6 +354,16 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
           >
             {getTimeShort24hFormat(message.date_sent)}
           </div>
+          <div
+            className="message-view-container__incoming-time"
+            onClick={() => {
+              // IncomingMessageWidgetToRightPlaceHolder?.textToWidget(
+              //   message.message,
+              // );
+            }}
+          >
+            {/* {IncomingMessageWidgetToRightPlaceHolder?.renderWidget()} */}
+          </div>
         </div>
       );
     } else {
@@ -410,6 +435,8 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
   const [fileToSend, setFileToSend] = useState<File | null>(null);
   const [messageText, setMessageText] = useState<string>('');
   const [warningErrorText, setWarningErrorText] = useState<string>('');
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [widgetTextContent, setWidgetTextContent] = useState<string>('');
 
   useEffect(() => {
     setWarningErrorText(messagesViewModel.typingText);
@@ -465,6 +492,7 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
 
   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 getMicrophonePermission = async () => {
@@ -499,16 +527,34 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/require-await
   const startRecording = async () => {
     if (!stream) return;
-    // setRecordingStatus('recording');
+    // const mimeTypes = [
+    //   'audio/aac',
+    //   'audio/mp4',
+    //   'audio/mpeg',
+    //   'audio/ogg',
+    //   'audio/wav',
+    //   'audio/webm',
+    //   'audio/3gpp',
+    //   'audio/flac',
+    //   'audio/x-aiff',
+    //   'audio/x-m4a',
+    // ];
+    //
+    // console.log('MIME TYPES: ');
+    // mimeTypes.forEach((mimeType) => {
+    //   if (MediaRecorder.isTypeSupported(mimeType)) {
+    //     console.log(`${mimeType} is supported`);
+    //   } else {
+    //     console.log(`${mimeType} is not supported`);
+    //   }
+    // });
     // audio/mp4;codecs=mp4a audio/webm;codecs=opus audio/webm;codecs=vp9,opus
     const mimeContent = window.MediaRecorder.isTypeSupported(
       'audio/mp4;codecs=mp4a',
     )
       ? 'audio/mp4;codecs=mp4a'
       : 'audio/webm;codecs=opus';
-    /*
-    this.mediaRecorder = new MediaRecorder(window.stream, {mimeType: mimeContent});
-   */
+
     const media = new MediaRecorder(stream, { mimeType: mimeContent });
 
     mediaRecorder.current = media;
@@ -536,7 +582,17 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
     mediaRecorder.current.stop();
 
     mediaRecorder.current.onstop = () => {
-      const audioBlob = new Blob(audioChunks, { type: mimeType });
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const mimeContent = window.MediaRecorder.isTypeSupported(
+        'audio/mp4;codecs=mp4a',
+      )
+        ? 'audio/mp4;codecs=mp4a'
+        : 'audio/webm;codecs=opus';
+      // const audioBlob = new Blob(audioChunks, { type: mimeContent }); // mimeType
+      // const mp4Blob = new Blob(recordedChunks, { type: 'video/mp4' });
+
+      // const audioBlob = new Blob(audioChunks, { type: 'video/mp4' }); // mimeType
+      const audioBlob = new Blob(audioChunks, { type: 'audio/mp4' }); // mimeType
 
       setResultAudioBlob(audioBlob);
 
@@ -564,14 +620,23 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
     return resultFile;
   };
 
+  const [useAudioWidget, setUseAudioWidget] = useState<boolean>(false);
+
   useEffect(() => {
+    const fileExt = 'mp4';
+
     if (resultAudioBlob) {
       const voiceMessage = blobToFile(
         resultAudioBlob,
-        `${currentUserName || ''}_voice_message.webm`,
+        `${currentUserName || ''}_voice_message.${fileExt}`,
       );
 
       setFileToSend(voiceMessage);
+      if (useAudioWidget) {
+        setUseAudioWidget(false);
+        // InputWidgetToRightPlaceHolder?.fileToWidget(voiceMessage);
+      }
+      //
     }
   }, [resultAudioBlob]);
   // test component version
@@ -634,6 +699,49 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
     }
   }
 
+  // useEffect(() => {
+  //   if (
+  //     InputWidgetToLeftPlaceHolder?.textToInput &&
+  //     InputWidgetToLeftPlaceHolder?.textToInput.length > 0
+  //   ) {
+  //     setMessageText(InputWidgetToLeftPlaceHolder?.textToInput);
+  //     setWidgetTextContent(InputWidgetToLeftPlaceHolder?.textToInput);
+  //     setTimeout(() => {
+  //       setWidgetTextContent('');
+  //     }, 45 * 1000);
+  //   }
+  // }, [InputWidgetToLeftPlaceHolder?.textToInput]);
+  //
+  // useEffect(() => {
+  //   if (
+  //     InputWidgetToRightPlaceHolder?.textToInput &&
+  //     InputWidgetToRightPlaceHolder?.textToInput.length > 0
+  //   ) {
+  //     setMessageText(InputWidgetToRightPlaceHolder?.textToInput);
+  //     setWidgetTextContent(InputWidgetToRightPlaceHolder?.textToInput);
+  //     setTimeout(() => {
+  //       setWidgetTextContent('');
+  //     }, 45 * 1000);
+  //   }
+  // }, [InputWidgetToRightPlaceHolder?.textToInput]);
+  //
+  // useEffect(() => {
+  //   if (
+  //     IncomingMessageWidgetToRightPlaceHolder?.textToInput &&
+  //     IncomingMessageWidgetToRightPlaceHolder?.textToInput.length > 0
+  //   ) {
+  //     setWidgetTextContent(
+  //       IncomingMessageWidgetToRightPlaceHolder?.textToInput,
+  //     );
+  //     setTimeout(() => {
+  //       setWidgetTextContent('');
+  //     }, 45 * 1000);
+  //   }
+  // }, [IncomingMessageWidgetToRightPlaceHolder?.textToInput]);
+
+  const useSubContent = subHeaderContent || false;
+  const useUpContent = upHeaderContent || false;
+
   return (
     <div
       style={
@@ -656,46 +764,75 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
         }}
         className="message-view-container--header"
       >
+        {useUpContent && upHeaderContent}
         <HeaderMessages
           dialog={messagesViewModel.entity}
-          InformationHandler={InformationHandler}
+          InformationHandler={onDialogInformationHandler}
           countMembers={getCountDialogMembers(dialogsViewModel.entity)}
         />
+        {useSubContent && subHeaderContent}
       </div>
-      <div
-        style={
-          theme
-            ? {
-                flexGrow: `1`,
-                flexShrink: `1`,
-                flexBasis: `${maxWidthToResizing}`,
-                backgroundColor: theme.mainElements(),
-              }
-            : {
-                flexGrow: `1`,
-                flexShrink: `1`,
-                flexBasis: `${maxWidthToResizing}`,
-              }
-        }
-        className="message-view-container--information"
-      >
-        <div>
-          connection status:
-          {browserOnline ? 'online ' : 'offline '}
-          {/* eslint-disable-next-line no-nested-ternary */}
-          {connectionRepository.isChatConnected() === undefined
-            ? 'unexpected undefined'
-            : connectionRepository.isChatConnected()
-            ? 'connected'
-            : 'disconnected'}
-        </div>
-        {hasMore && (
-          <div style={{ color: 'red' }}>
-            unread: {dialogMessagesCount - messagesToView.length}
-          </div>
-        )}
-        <div>{` current user id: ${currentUserId || 'no user'}`}</div>
-      </div>
+      {/* <div */}
+      {/*  style={{ */}
+      {/*    flexGrow: `1`, */}
+      {/*    flexShrink: `1`, */}
+      {/*    flexBasis: `${maxWidthToResizing}`, */}
+      {/*  }} */}
+      {/*  className="message-view-container--information" */}
+      {/* > */}
+      {/*  <div> */}
+      {/*    connection status: */}
+      {/*    {browserOnline ? 'online ' : 'offline '} */}
+      {/*    /!* eslint-disable-next-line no-nested-ternary *!/ */}
+      {/*    {connectionRepository.isChatConnected() === undefined */}
+      {/*      ? 'unexpected undefined' */}
+      {/*      : connectionRepository.isChatConnected() */}
+      {/*      ? 'connected' */}
+      {/*      : 'disconnected'} */}
+      {/*  </div> */}
+      {/*  {hasMore && ( */}
+      {/*    <div style={{ color: 'red' }}> */}
+      {/*      unread: {dialogMessagesCount - messagesToView.length} */}
+      {/*    </div> */}
+      {/*  )} */}
+      {/*  <div>{` current user id: ${currentUserId || 'no user'}`}</div> */}
+      {/* </div> */}
+      {/* version 2 start */}
+      {/* <div */}
+      {/*  style={ */}
+      {/*    theme */}
+      {/*      ? { */}
+      {/*          flexGrow: `1`, */}
+      {/*          flexShrink: `1`, */}
+      {/*          flexBasis: `${maxWidthToResizing}`, */}
+      {/*          backgroundColor: theme.mainElements(), */}
+      {/*        } */}
+      {/*      : { */}
+      {/*          flexGrow: `1`, */}
+      {/*          flexShrink: `1`, */}
+      {/*          flexBasis: `${maxWidthToResizing}`, */}
+      {/*        } */}
+      {/*  } */}
+      {/*  className="message-view-container--information" */}
+      {/* > */}
+      {/*  <div> */}
+      {/*    connection status: */}
+      {/*    {browserOnline ? 'online ' : 'offline '} */}
+      {/*    /!* eslint-disable-next-line no-nested-ternary *!/ */}
+      {/*    {connectionRepository.isChatConnected() === undefined */}
+      {/*      ? 'unexpected undefined' */}
+      {/*      : connectionRepository.isChatConnected() */}
+      {/*      ? 'connected' */}
+      {/*      : 'disconnected'} */}
+      {/*  </div> */}
+      {/*  {hasMore && ( */}
+      {/*    <div style={{ color: 'red' }}> */}
+      {/*      unread: {dialogMessagesCount - messagesToView.length} */}
+      {/*    </div> */}
+      {/*  )} */}
+      {/*  <div>{` current user id: ${currentUserId || 'no user'}`}</div> */}
+      {/* </div> */}
+      {/* version 2 end */}
       <div
         style={
           theme
@@ -804,7 +941,24 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
             }}
           />
         </label>
-
+        {/*  start InputWidgetToRightPlaceHolder */}
+        {/* {InputWidgetToRightPlaceHolder && ( */}
+        {/*  <div> */}
+        {/*    <ActiveSvg */}
+        {/*      content={InputWidgetToRightPlaceHolder.renderWidget()} */}
+        {/*      clickAction={() => { */}
+        {/*        console.log('click left place golder widget'); */}
+        {/*        if (messagesViewModel?.loading) return; */}
+        {/*        setIsRecording(!isRecording); */}
+        {/*        setUseAudioWidget(true); */}
+        {/*      }} */}
+        {/*      touchAction={() => { */}
+        {/*        console.log('touch left place golder widget'); */}
+        {/*      }} */}
+        {/*    /> */}
+        {/*  </div> */}
+        {/* )} */}
+        {/* end InputWidgetToRightPlaceHolder */}
         {!isRecording && (
           <textarea
             style={theme ? { backgroundColor: theme.chatInput() } : {}}
@@ -849,7 +1003,22 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
             }}
           />
         )}
-
+        {/* InputWidgetToRightPlaceHolder start InputWidgetToLeftPlaceHolder */}
+        {/* {InputWidgetToLeftPlaceHolder && ( */}
+        {/*  <div> */}
+        {/*    <ActiveSvg */}
+        {/*      content={InputWidgetToLeftPlaceHolder.renderWidget()} */}
+        {/*      clickAction={() => { */}
+        {/*        console.log('click left place golder widget'); */}
+        {/*        InputWidgetToLeftPlaceHolder?.textToWidget(messageText); */}
+        {/*      }} */}
+        {/*      touchAction={() => { */}
+        {/*        console.log('touch left place golder widget'); */}
+        {/*      }} */}
+        {/*    /> */}
+        {/*  </div> */}
+        {/* )} */}
+        {/* end InputWidgetLeftPlaceHolder */}
         {!isVoiceMessage && (
           <div>
             <ActiveSvg
@@ -897,7 +1066,7 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
         )}
       </div>
       {/* <div className="message-view-container--warning-error"> */}
-      {/*  {warningErrorText} */}
+      {/*  {widgetTextContent} */}
       {/* </div> */}
     </div>
   );

package/src/Presentation/components/UI/Dialogs/MessagesView/useMessagesViewModel.ts

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { DialogType } from '../../../../../Domain/entity/DialogTypes';
-import useQbDataContext from '../../../providers/QuickBloxUIKitProvider/useQbDataContext';
+import useQbInitializedDataContext from '../../../providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
 import { DialogEntity } from '../../../../../Domain/entity/DialogEntity';
 import { MessagesViewModel } from './MessagesViewModel';
 import { MessageEntity } from '../../../../../Domain/entity/MessageEntity';
@@ -42,7 +42,7 @@ export default function useMessagesViewModel(
   const [dialog, setDialog] = useState<DialogEntity>(dialogEntity);
   // const [dialogsParticipants, setDialogsParticipants] = useState<number[]>([]);
 
-  const currentContext = useQbDataContext();
+  const currentContext = useQbInitializedDataContext();
   const eventMessaging = useEventMessagesRepository();
 
   const subscribeToDialogEventsUseCase: SubscribeToDialogEventsUseCase =

package/src/Presentation/components/UI/svgs/Icons/Media/AIWidget/Send.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.76833 38.5L41.25 22L2.76833 5.5L2.75 18.3333L30.25 22L2.75 25.6667L2.76833 38.5Z" fill="#0B121B"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Media/AIWidget/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function AIWidgetIcon(theme: IconTheme | undefined = undefined) {
+  return !theme?.applyZoom ? (
+    <svg
+      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"
+    >
+      <path
+        d="M2.76833 38.5L41.25 22L2.76833 5.5L2.75 18.3333L30.25 22L2.75 25.6667L2.76833 38.5Z"
+        id="SendB"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  ) : (
+    <svg
+      width={theme && theme.width ? theme.width : '28'}
+      height={theme && theme.height ? theme.height : '28'}
+      viewBox="0 0 22 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M18,6 C20.209139,6 22,7.790861 22,10 L22,18 C22,19.9255253 20.6753401,21.786149 18.0260203,23.581871 C18.5654117,21.193957 18.3975027,20 17.5222933,20 L10,20 C7.790861,20 6,18.209139 6,16 L6,10 C6,7.790861 7.790861,6 10,6 L18,6 Z M18,10 L10,10 C9.44771525,10 9,10.4477153 9,11 L9,14 C9,14.5522847 9.44771525,15 10,15 L18,15 C18.5522847,15 19,14.5522847 19,14 L19,11 C19,10.4477153 18.5522847,10 18,10 Z M12,11 C12.5522847,11 13,11.4477153 13,12 L13,13 C13,13.5522847 12.5522847,14 12,14 C11.4477153,14 11,13.5522847 11,13 L11,12 C11,11.4477153 11.4477153,11 12,11 Z M16,11 C16.5522847,11 17,11.4477153 17,12 L17,13 C17,13.5522847 16.5522847,14 16,14 C15.4477153,14 15,13.5522847 15,13 L15,12 C15,11.4477153 15.4477153,11 16,11 Z M4,10 L5,10 L5,10 L5,16 L4,16 C3.44771525,16 3,15.5522847 3,15 L3,11 C3,10.4477153 3.44771525,10 4,10 Z M23,10 L24,10 C24.5522847,10 25,10.4477153 25,11 L25,15 C25,15.5522847 24.5522847,16 24,16 L23,16 L23,16 L23,10 Z"
+        id="AIWidget"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+/*
+
+
+ */
+export default AIWidgetIcon;

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

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import useQbDataContext from '../../providers/QuickBloxUIKitProvider/useQbDataContext';
+// import { Configuration, OpenAIApi } from 'openai';
+import useQbInitializedDataContext from '../../providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
 import { DialogEntity } from '../../../../Domain/entity/DialogEntity';
 import { DialogsViewModel } from '../../../Views/Dialogs/DialogViewModel';
 import DialogsComponent from '../../../Views/Dialogs/Dialogs';
@@ -16,9 +17,17 @@ import { Pagination } from '../../../../Domain/repository/Pagination';
 // import { DialogEventInfo } from '../../../../Domain/entity/DialogEventInfo';
 import UiKitTheme from '../../../assets/UiKitTheme';
 import BaseViewModel from '../../../Views/Base/BaseViewModel';
+// import { InputWidget } from '../../UI/Dialogs/MessagesView/InputWidget/InputWidget';
+// import useDefaultTextInputWidget from '../../UI/Dialogs/MessagesView/InputWidget/UseDefaultTextInputWidget';
+// import useDefaultVoiceInputWidget from '../../UI/Dialogs/MessagesView/InputWidget/useDefaultVoiceInputWidget';
+// import UseDefaultIncomingMessageWidget from '../../UI/Dialogs/MessagesView/InputWidget/UseDefaultIncomingMessageWidget';
+// import CompanyLogo from '../TestStage/CompanyLogo/CompanyLogo';
 
 type QuickBloxUIKitDesktopLayoutProps = {
   theme?: UiKitTheme;
+  // InputWidgetToLeftPlaceHolder?: InputWidget;
+  // InputWidgetToRightPlaceHolder?: InputWidget;
+  // IncomingMessageWidgetToRightPlaceHolder?: InputWidget;
 };
 
 const QuickBloxUIKitDesktopLayout: React.FC<
@@ -29,7 +38,7 @@ const QuickBloxUIKitDesktopLayout: React.FC<
   const [selectedDialog, setSelectedDialog] =
     React.useState<BaseViewModel<DialogEntity>>();
 
-  const currentContext = useQbDataContext();
+  const currentContext = useQbInitializedDataContext();
   // const eventMessaging = useEventMessagesRepository();
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
@@ -41,12 +50,34 @@ const QuickBloxUIKitDesktopLayout: React.FC<
   const dialogsViewModel: DialogsViewModel =
     useDialogsViewModel(currentContext);
 
+  // let defaultLeftPlaceHolderInputWidget = InputWidgetToLeftPlaceHolder; // useDefaultTextInputWidget();
+  //
+  // if (!defaultLeftPlaceHolderInputWidget) {
+  //   defaultLeftPlaceHolderInputWidget = useDefaultTextInputWidget();
+  // }
+  // const defaultRightPlaceHolderInputWidget =
+  //   InputWidgetToRightPlaceHolder || useDefaultVoiceInputWidget();
+  // let defaultIncomingMessageWidget = IncomingMessageWidgetToRightPlaceHolder;
+  //
+  // if (!defaultIncomingMessageWidget) {
+  //   const apiKey = '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'; // Замените на ваш реальный ключ API
+  //
+  //   const openAIConfiguration = new Configuration({
+  //     apiKey,
+  //   });
+  //
+  //   const openAIApi = new OpenAIApi(openAIConfiguration);
+  //
+  //   defaultIncomingMessageWidget = UseDefaultIncomingMessageWidget({
+  //     openAIApi,
+  //   });
+  // }
+
   const selectDialogActions = (item: BaseViewModel<DialogEntity>): void => {
     if (!dialogsViewModel.loading) {
       setSelectedDialog(item);
     }
   };
-
   // const subscribeToDialogEventsUseCase: SubscribeToDialogEventsUseCase =
   //   new SubscribeToDialogEventsUseCase(eventMessaging, 'TestStage');
 
@@ -181,23 +212,34 @@ const QuickBloxUIKitDesktopLayout: React.FC<
       theme={theme}
       dialogsView={
         <DialogsComponent
+          // subHeaderContent={<CompanyLogo />}
+          // upHeaderContent={<CompanyLogo />}
           dialogsViewModel={dialogsViewModel} // 1 Get 2 Update UseCase
-          itemSelectHandler={selectDialogActions}
+          onDialogSelectHandler={selectDialogActions}
           additionalSettings={{
             withoutHeader: false,
             themeHeader: theme,
             themePreview: theme,
+            useSubHeader: false,
+            useUpHeader: false,
           }}
         />
       }
       dialogMessagesView={
         selectedDialog && selectedDialog.entity && dialogsViewModel.entity ? (
           <MessagesView
+            // subHeaderContent={<CompanyLogo />}
+            // upHeaderContent={<CompanyLogo />}
             dialogsViewModel={dialogsViewModel}
-            InformationHandler={informationOpenHandler}
+            onDialogInformationHandler={informationOpenHandler}
             maxWidthToResize={
               selectedDialog && needDialogInformation ? undefined : '1040px'
             }
+            // InputWidgetToLeftPlaceHolder={defaultLeftPlaceHolderInputWidget}
+            // InputWidgetToRightPlaceHolder={defaultRightPlaceHolderInputWidget}
+            // IncomingMessageWidgetToRightPlaceHolder={
+            //   defaultIncomingMessageWidget
+            // }
             theme={theme}
           /> // 1 Get Messages + 1 Get User by Id
         ) : (
@@ -219,10 +261,11 @@ const QuickBloxUIKitDesktopLayout: React.FC<
         <div>
           {selectedDialog && needDialogInformation && (
             <DialogInformation
+              // subHeaderContent={<CompanyLogo />}
+              // upHeaderContent={<CompanyLogo />}
               dialog={selectedDialog.entity}
               dialogViewModel={dialogsViewModel}
-              closeInformationHandler={informationCloseHandler}
-              theme={theme}
+              onCloseDialogInformationHandler={informationCloseHandler}
             />
           )}
         </div>

package/src/Presentation/components/layouts/TestStage/CompanyLogo/CompanyLogo.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+// eslint-disable-next-line react/function-component-definition
+const CompanyLogo: React.FC = () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        width: '322px',
+        height: '42px',
+        border: '1px solid #333',
+      }}
+    >
+      <img
+        src="../../../../../../src/Presentation/assets/img/bee-img.png"
+        alt="Company Logo"
+        style={{ width: '100px', height: 'auto', marginRight: '10px' }}
+      />
+      <span style={{ fontSize: '24px', fontWeight: 'bold', color: '#333' }}>
+        Your Company Name
+      </span>
+    </div>
+  );
+};
+
+export default CompanyLogo;

package/src/Presentation/components/layouts/TestStage/LoginView/Login.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import './Login.scss';
 import { InitParams } from '../../../providers/QuickBloxUIKitProvider/QuickBloxUIKitProvider';
-import useQbDataContext from '../../../providers/QuickBloxUIKitProvider/useQbDataContext';
+import useQbInitializedDataContext from '../../../providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
 import { LoginData } from '../../../../../Data/source/remote/RemoteDataSource';
 
 export type FunctionTypeLoginDataToVoid = (data: LoginData) => void;
@@ -11,7 +11,7 @@ type LoginProps = {
 };
 // eslint-disable-next-line react/function-component-definition
 const Login: React.FC<LoginProps> = ({ loginHandler }: LoginProps) => {
-  const currentContext = useQbDataContext();
+  const currentContext = useQbInitializedDataContext();
   const [UserName, setUsername] = useState(
     currentContext.InitParams.loginData?.login || 'tester',
   );

package/src/Presentation/components/providers/QuickBloxUIKitProvider/useEventMessagesRepository.ts

@@ -1,8 +1,8 @@
 import EventMessagesRepository from '../../../../Data/repository/EventMessagesRepository';
-import useQbDataContext from './useQbDataContext';
+import useQbInitializedDataContext from './useQbInitializedDataContext';
 
 const useEventMessagesRepository = (): EventMessagesRepository => {
-  const currentQbDataContext = useQbDataContext();
+  const currentQbDataContext = useQbInitializedDataContext();
 
   return currentQbDataContext.storage.EVENT_MESSAGE_REPOSITORY;
 };

package/src/Presentation/components/providers/QuickBloxUIKitProvider/{useQbDataContext.ts → useQbInitializedDataContext.ts}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { qbDataContext, QBDataContextType } from './QuickBloxUIKitProvider';
 
-const useQbDataContext = (): QBDataContextType => {
+const useQbInitializedDataContext = (): QBDataContextType => {
   const currentQbDataContext = React.useContext(qbDataContext);
 
   console.log(
@@ -79,4 +79,4 @@ const useQbDataContext = (): QBDataContextType => {
   return currentQbDataContext;
 };
 
-export default useQbDataContext;
+export default useQbInitializedDataContext;