quickblox-react-ui-kit 0.1.7 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quickblox-react-ui-kit",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "main": "dist/index-ui.js",
   "license": "MIT",
   "dependencies": {

package/src/App.tsx

@@ -5,9 +5,7 @@ import { QBConfig } from './QBconfig';
 import useQBConnection from './Presentation/components/providers/QuickBloxUIKitProvider/useQBConnection';
 import { LocalDataSource } from './Data/source/local/LocalDataSource';
 import Login from './Presentation/components/layouts/TestStage/LoginView/Login';
-import QuickBloxUIKitProvider, {
-  qbDataContext,
-} from './Presentation/components/providers/QuickBloxUIKitProvider/QuickBloxUIKitProvider';
+import QuickBloxUIKitProvider from './Presentation/components/providers/QuickBloxUIKitProvider/QuickBloxUIKitProvider';
 import TestStageMarkup from './Presentation/components/layouts/TestStage/TestStageMarkup';
 import { Stubs } from './Data/Stubs';
 import {
@@ -16,10 +14,13 @@ import {
 } from './Data/source/remote/RemoteDataSource';
 import QuickBloxUIKitDesktopLayout from './Presentation/components/layouts/Desktop/QuickBloxUIKitDesktopLayout';
 import DefaultTheme from './Presentation/assets/DefaultThemes/DefaultTheme';
+import useQbUIKitDataContext from './Presentation/components/providers/QuickBloxUIKitProvider/useQbUIKitDataContext';
 
 function App() {
-  const currentContext = React.useContext(qbDataContext);
-  const remoteDataSourceMock: RemoteDataSource =
+  // const currentContext = React.useContext(qbDataContext);
+  const currentContext = useQbUIKitDataContext();
+
+  const remoteDataSource: RemoteDataSource =
     currentContext.storage.REMOTE_DATA_SOURCE;
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const localDataSource: LocalDataSource =
@@ -50,7 +51,7 @@ function App() {
     console.log('call release...');
     connectionRepository.stopKeepAlive();
     console.log('call stopKeepAlive...');
-    await remoteDataSourceMock.disconnectAndLogoutUser();
+    await remoteDataSource.disconnectAndLogoutUser();
     console.log('call disconnectAndLogoutUser...');
     await currentContext.storage.LOCAL_DATA_SOURCE.clearAll();
     console.log('call clearAll...');
@@ -61,9 +62,9 @@ function App() {
   const prepareSDK = async (authData: LoginData): Promise<void> => {
     console.log('call prepareSDK with data:', authData);
     // todo: must be real remote datasource
-    if (remoteDataSourceMock.needInit) {
+    if (remoteDataSource.needInit) {
       console.log('start prepareSDK actions with data:', authData);
-      await remoteDataSourceMock.initSDKWithUser(
+      await remoteDataSource.initSDKWithUser(
         {
           appIdOrToken: currentContext.InitParams.accountData.appId,
           authKeyOrAppId: currentContext.InitParams.accountData.authKey,
@@ -114,10 +115,10 @@ function App() {
     console.log('call reloginSDK with data:', JSON.stringify(authData));
     currentContext.storage.SYNC_DIALOGS_USE_CASE.release();
     connectionRepository.stopKeepAlive();
-    await remoteDataSourceMock.disconnectAndLogoutUser();
+    await remoteDataSource.disconnectAndLogoutUser();
     await currentContext.storage.LOCAL_DATA_SOURCE.clearAll();
 
-    await remoteDataSourceMock.loginWithUser(authData);
+    await remoteDataSource.loginWithUser(authData);
     //
     // todo: temporary off, must turn on and reorganize code rows
     await connectionRepository.initializeStates();
@@ -135,20 +136,25 @@ function App() {
   const prepareContent = async (): Promise<void> => {
     console.log('PREPARE CONTENT');
     // todo: must delete it and ADD Preload data (read first page everywhere)
+    // или во все юзкейсы 2) Get/Sync execute(completed/callback):Promise<Entity[]>
+    // await prepareMockData();
     console.log('ADD REAL DATA TO DIALOG MOCK DATA ');
+    // await remoteDataSource.getDialogsFirstPage();
+    // await remoteDataSource.setUpMockStorage();
+    //
     //
   };
 
   const loginHandler = async (data: LoginData): Promise<void> => {
     setCurrentUser(data);
     console.log(`call login actions: ${JSON.stringify(data)}`);
-    if (remoteDataSourceMock.authInformation) {
+    if (remoteDataSource.authInformation) {
       console.log(
         `authInformation: ${JSON.stringify(
-          remoteDataSourceMock?.authInformation.userName,
+          remoteDataSource?.authInformation.userName,
         )}`,
       );
-      if (data.login !== remoteDataSourceMock.authInformation.userName) {
+      if (data.login !== remoteDataSource.authInformation.userName) {
         await reloginSDK(data).catch((e) => {
           console.log(
             `exception in reloginSDK ${(e as unknown as Error).message}`,
@@ -161,9 +167,9 @@ function App() {
       }
     } else {
       console.log('need prepare SDK with data:', data);
-      if (remoteDataSourceMock.needInit) {
+      if (remoteDataSource.needInit) {
         console.log('start prepareSDK actions with data:', data);
-        await remoteDataSourceMock.initSDKWithUser(
+        await remoteDataSource.initSDKWithUser(
           {
             appIdOrToken: currentContext.InitParams.accountData.appId,
             authKeyOrAppId: currentContext.InitParams.accountData.authKey,
@@ -188,6 +194,18 @@ function App() {
     prepareSDK(currentUser).catch();
   }, []);
 
+  // const { apiKey } = QBConfig.configAIApi.AIAnswerAssistWidgetConfig;
+  // // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  // const openAIConfiguration: Configuration = new Configuration({
+  //   apiKey,
+  // });
+  //
+  // // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  // const openAIApi: OpenAIApi = new OpenAIApi(openAIConfiguration);
+  // const defaultIncomingMessageWidget = UseDefaultIncomingMessageWidget({
+  //   openAIApi,
+  // });
+
   // todo: uncomment authSecret
   return (
     <QuickBloxUIKitProvider
@@ -215,9 +233,12 @@ function App() {
             <Route
               path="/desktop-test-mock"
               element={
-                // <QuickBloxUIKitDesktopLayout theme={new CustomTheme()} InputWidgetLeftPlaceHolder={CustomWidgetVoiceToText('','')} />
-
-                // <QuickBloxUIKitDesktopLayout theme={new CustomTheme()} />
+                // <QuickBloxUIKitDesktopLayout
+                //   theme={new DefaultTheme()}
+                //   IncomingMessageWidgetToRightPlaceHolder={
+                //     defaultIncomingMessageWidget
+                //   }
+                // />
 
                 <QuickBloxUIKitDesktopLayout theme={new DefaultTheme()} />
               }

package/src/Presentation/Views/Base/BaseViewModel.ts

@@ -49,7 +49,10 @@ export type EditDialogParams = {
   dialogTitle: string;
   dialogAvatar: File | string | null;
 };
-
+export interface IChatMessage {
+  role: string;
+  content: string;
+}
 export type FunctionTypeFileToToVoid = (file: File) => void;
 export type FunctionTypePaginationToVoid = (pagination: Pagination) => void;
 export type FunctionTypeVoidToVoid = () => void;
@@ -65,3 +68,8 @@ export type FunctionTypeDialogEntityToBoolean = (
   entity: GroupDialogEntity,
 ) => Promise<boolean>;
 export type FunctionTypeFileToFileEntity = (file: File) => Promise<FileEntity>;
+export type FunctionTypeJSXElement = () => JSX.Element;
+export type FunctionTypeChatMessagesToVoid = (
+  lastMessage: string,
+  messages: IChatMessage,
+) => void;

package/src/Presentation/Views/Dialogs/Dialogs.tsx

@@ -27,6 +27,7 @@ type DialogsComponentSettings = {
   themeName?: ThemeNames;
   withoutHeader?: boolean;
   useSubHeader?: boolean;
+  useUpHeader?: boolean;
   themeHeader?: UiKitTheme;
   themePreview?: UiKitTheme;
 };
@@ -34,7 +35,8 @@ type DialogsComponentSettings = {
 type DialogsProps = {
   header?: React.ReactNode;
   subHeaderContent?: React.ReactNode;
-  itemSelectHandler?: FunctionTypeViewModelToVoid<DialogEntity>;
+  upHeaderContent?: React.ReactNode;
+  onDialogSelectHandler?: FunctionTypeViewModelToVoid<DialogEntity>;
   dialogsViewModel: DialogsViewModel;
   additionalSettings?: DialogsComponentSettings;
 };
@@ -43,7 +45,8 @@ type DialogsProps = {
 const DialogsComponent: React.FC<DialogsProps> = ({
   header,
   subHeaderContent,
-  itemSelectHandler,
+  upHeaderContent,
+  onDialogSelectHandler,
   dialogsViewModel,
   additionalSettings = undefined,
 }: DialogsProps) => {
@@ -68,15 +71,15 @@ const DialogsComponent: React.FC<DialogsProps> = ({
     dialogsViewModel?.dialogs.forEach((entiy, index) => {
       const pw: PreviewDialogViewModel = new PreviewDialogViewModel(
         (it) => {
-          if (itemSelectHandler) {
+          if (onDialogSelectHandler) {
             setSelectedItem({ selectedIndex: index, item: it });
-            itemSelectHandler(it);
+            onDialogSelectHandler(it);
           }
         },
         (it) => {
-          if (itemSelectHandler) {
+          if (onDialogSelectHandler) {
             setSelectedItem({ selectedIndex: index, item: it });
-            itemSelectHandler(it);
+            onDialogSelectHandler(it);
           }
         },
         // Number(entiy.id),
@@ -149,7 +152,9 @@ const DialogsComponent: React.FC<DialogsProps> = ({
   const useHeader = !additionalSettings?.withoutHeader || header || false;
   const useSubContent =
     additionalSettings?.useSubHeader || subHeaderContent || false;
-  const usingHeader = header || (
+  const useUpContent =
+    additionalSettings?.useUpHeader || upHeaderContent || false;
+  const HeaderContent = header || (
     <HeaderDialogs
       title="Dialogs"
       clickSearchHandler={() => {
@@ -307,7 +312,8 @@ const DialogsComponent: React.FC<DialogsProps> = ({
       }}
     >
       <ColumnContainer>
-        {useHeader && usingHeader}
+        {useUpContent && upHeaderContent}
+        {useHeader && HeaderContent}
         {/* {showSearchDialogs ? renderSearchDialogs() : null} */}
         {useSubContent && subHeaderContent}
         {dialogsViewModel?.loading && (

package/src/Presentation/Views/Dialogs/useDialogsViewModel.ts

@@ -44,7 +44,7 @@ export default function useDialogsViewModel(
   //
   const currentUserId =
     currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.userId;
-  // const currentContext = useQbDataContext();
+  // const currentContext = useQbInitializedDataContext();
   const remoteDataSourceMock: RemoteDataSource =
     currentContext.storage.REMOTE_DATA_SOURCE;
 

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

@@ -35,24 +35,28 @@ import { stringifyError } from '../../../../../utils/parse';
 import { FileEntity } from '../../../../../Domain/entity/FileEntity';
 import UserAvatar from '../EditDialog/UserAvatar/UserAvatar';
 import MainButton, { TypeButton } from '../../Buttons/MainButton/MainButton';
-import useQbDataContext from '../../../providers/QuickBloxUIKitProvider/useQbDataContext';
+import useQbInitializedDataContext from '../../../providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
 import UiKitTheme from '../../../../assets/UiKitTheme';
 
 type HeaderDialogsProps = {
   dialog: DialogEntity;
   dialogViewModel: DialogsViewModel;
-  closeInformationHandler: FunctionTypeVoidToVoid;
+  onCloseDialogInformationHandler: FunctionTypeVoidToVoid;
   theme?: UiKitTheme;
+  subHeaderContent?: React.ReactNode;
+  upHeaderContent?: React.ReactNode;
 };
 // eslint-disable-next-line react/function-component-definition
 const DialogInformation: React.FC<HeaderDialogsProps> = ({
   dialog,
   dialogViewModel,
-  closeInformationHandler,
+  onCloseDialogInformationHandler,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   theme = undefined,
+  subHeaderContent = undefined,
+  upHeaderContent = undefined,
 }: HeaderDialogsProps) => {
-  const currentContext = useQbDataContext();
+  const currentContext = useQbInitializedDataContext();
   const currentUserId =
     currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.userId.toString();
   const { handleModal } = React.useContext(ModalContext);
@@ -62,9 +66,9 @@ const DialogInformation: React.FC<HeaderDialogsProps> = ({
 
   useEffect(() => {
     console.log('HAVE NEW DIALOG');
-    if (dialog === undefined && closeInformationHandler) {
+    if (dialog === undefined && onCloseDialogInformationHandler) {
       console.log('HAVE UNDEFINED NEW DIALOG');
-      closeInformationHandler();
+      onCloseDialogInformationHandler();
 
       return;
     }
@@ -244,6 +248,9 @@ const DialogInformation: React.FC<HeaderDialogsProps> = ({
     }
   };
 
+  const useSubContent = subHeaderContent || false;
+  const useUpContent = upHeaderContent || false;
+
   return isAllMembersShow ? (
     <MembersList
       closeInformationHandler={() => {
@@ -254,6 +261,7 @@ const DialogInformation: React.FC<HeaderDialogsProps> = ({
   ) : (
     <div className="dialog-information-container">
       <ColumnContainer maxWidth="320px">
+        {useUpContent && upHeaderContent}
         <div className="dialog-information-container--dialog-information-wrapper">
           <div className="dialog-information-container__dialog-information">
             <div>Dialog information</div>
@@ -262,13 +270,14 @@ const DialogInformation: React.FC<HeaderDialogsProps> = ({
             <ActiveSvg
               content={<Close applyZoom color="var(--secondary-elements)" />}
               clickAction={() => {
-                if (closeInformationHandler) {
-                  closeInformationHandler();
+                if (onCloseDialogInformationHandler) {
+                  onCloseDialogInformationHandler();
                 }
               }}
             />
           </div>
         </div>
+        {useSubContent && subHeaderContent}
         <div className="dialog-information-container--icon-dialog-wrapper">
           <div className="dialog-information-container__icon-dialog">
             <div className="dialog-information-container__icon-dialog__info">

package/src/Presentation/components/UI/Dialogs/DialogInformation/UsersList/useUsersListViewModel.ts

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { DialogEntity } from '../../../../../../Domain/entity/DialogEntity';
-import useQbDataContext from '../../../../providers/QuickBloxUIKitProvider/useQbDataContext';
+import useQbInitializedDataContext from '../../../../providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
 import { UserEntity } from '../../../../../../Domain/entity/UserEntity';
 import { UsersListViewModel } from './UsersListViewModel';
 import { GetUsersByIdsUseCase } from '../../../../../../Domain/use_cases/GetUsersByIdsUseCase';
@@ -18,7 +18,7 @@ export default function useUsersListViewModel(
   const [users, setUsers] = useState<UserEntity[]>([]);
   const [dialog, setDialog] = useState<DialogEntity>(dialogEntity);
 
-  const currentContext = useQbDataContext();
+  const currentContext = useQbInitializedDataContext();
 
   async function getUsers() {
     console.log('call getUsers in useUsersListViewModel');

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

@@ -13,7 +13,7 @@ import UserAvatar from './UserAvatar/UserAvatar';
 import { DialogType } from '../../../../../Domain/entity/DialogTypes';
 import GroupChat from '../../svgs/Icons/Contents/GroupChat';
 import PublicChannel from '../../svgs/Icons/Contents/PublicChannel';
-import useQbDataContext from '../../../providers/QuickBloxUIKitProvider/useQbDataContext';
+import useQbInitializedDataContext from '../../../providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
 
 export const TypeOpenDialog = {
   edit: 'edit',
@@ -40,7 +40,7 @@ const EditDialog: React.FC<EditDialogProps> = ({
   clickUpdatedHandler,
   clickCancelHandler,
 }) => {
-  const currentContext = useQbDataContext();
+  const currentContext = useQbInitializedDataContext();
   const maxUploadFileSize = currentContext.InitParams.maxFileSize;
   const minLengthNameDialog = 3;
   const maxLengthNameDialog = 60;

package/src/Presentation/components/UI/Dialogs/InviteMembers/useInviteMembersViewModel.ts

@@ -7,7 +7,7 @@ import {
 import { UserEntity } from '../../../../../Domain/entity/UserEntity';
 import { GetAllUsersUseCase } from '../../../../../Domain/use_cases/GetAllUsersUseCase';
 import UsersRepository from '../../../../../Data/repository/UsersRepository';
-import useQbDataContext from '../../../providers/QuickBloxUIKitProvider/useQbDataContext';
+import useQbInitializedDataContext from '../../../providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
 import { Stubs } from '../../../../../Data/Stubs';
 import { stringifyError } from '../../../../../utils/parse';
 import {
@@ -18,7 +18,7 @@ import {
 export default function useInviteMembersViewModel(): InviteMembersViewModel {
   // initPagination?: Pagination,
   console.log('create useUsersListViewModel');
-  const currentContext = useQbDataContext();
+  const currentContext = useQbInitializedDataContext();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('error with getting user list');
 

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

@@ -0,0 +1,15 @@
+import {
+  FunctionTypeFileToToVoid,
+  FunctionTypeJSXElement,
+  FunctionTypeStringToVoid,
+} from '../../../../../Views/Base/BaseViewModel';
+
+export interface InputWidget {
+  renderWidget: FunctionTypeJSXElement;
+  textToWidget: FunctionTypeStringToVoid;
+  fileToWidget: FunctionTypeFileToToVoid;
+  textToInput: string | undefined;
+  fileToInput: File | undefined;
+}
+
+

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

@@ -0,0 +1,60 @@
+import { useState } from 'react';
+import { InputWidget } from './InputWidget';
+
+export default function useDefaultTextInputWidget(): InputWidget {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/no-empty-function
+  const fileToWidget = (file: File): void => {};
+
+  const renderWidget = (): JSX.Element => {
+    // return <SendIcon width="21" height="18" applyZoom color="red" />;
+    return (
+      <div
+        style={{
+          width: '21',
+          height: '18',
+          color: 'red',
+          fontSize: '9px',
+          fontStyle: 'bold',
+          fontWeight: '900',
+          border: '2px solid red',
+        }}
+      >
+        T2V
+      </div>
+    );
+  };
+
+  async function getData(textToSend: string): Promise<string> {
+    const response = await fetch(
+      `https://func270519800.azurewebsites.net/api/TranslateTextToEng?text=${textToSend}`,
+    );
+
+    console.log('getData: response: ', response);
+    const data = await response.text();
+
+    console.log(
+      'getData have response: ',
+      JSON.stringify(data.replaceAll('\n\n', '')),
+    );
+
+    return data.replaceAll('\n\n', '');
+  }
+
+  const [textFromWidgetToInput, setTextFromWidgetToInput] = useState('');
+  const textToWidget = (value: string): void => {
+    if (value && value.length > 0) {
+      // eslint-disable-next-line promise/catch-or-return,promise/always-return
+      getData(value).then((data) => {
+        setTextFromWidgetToInput(data);
+      });
+    }
+  };
+
+  return {
+    fileToInput: undefined,
+    textToInput: textFromWidgetToInput,
+    fileToWidget,
+    renderWidget,
+    textToWidget,
+  };
+}

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

@@ -0,0 +1,86 @@
+import { useState } from 'react';
+import { InputWidget } from './InputWidget';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import VoiceIcon from '../../../svgs/Icons/Actions/Voice';
+
+export default function useDefaultVoiceInputWidget(): InputWidget {
+  const renderWidget = (): JSX.Element => {
+    // return <VoiceIcon width="21" height="18" applyZoom color="red" />;
+    return (
+      <div
+        style={{
+          width: '21',
+          height: '18',
+          color: 'red',
+          fontSize: '9px',
+          fontStyle: 'bold',
+          fontWeight: '900',
+          border: '2px solid red',
+        }}
+      >
+        v2t
+      </div>
+    );
+  };
+
+  const [textFromWidgetToInput, setTextFromWidgetToInput] = useState('');
+  const textToWidget = (value: string): void => {
+    if (value && value.length > 0) {
+      setTextFromWidgetToInput(value.toUpperCase());
+    }
+  };
+
+  const [audioFromWidgetToInput, setAudioFromWidgetToInput] = useState<File>();
+
+  async function sendFile(file: File): Promise<any> {
+    if (file) {
+      // Создание объекта FormData и добавление файла
+      const formData = new FormData();
+
+      formData.append('file', file, file.name);
+
+      // Отправка запроса POST с телом formData
+      const response = await fetch(
+        'https://func270519800.azurewebsites.net/api/VoiceToText',
+        {
+          method: 'POST',
+          body: formData,
+        },
+      );
+
+      // Возвращение данных из ответа
+      console.log('sendFile: response: ', response);
+      const data = await response.text();
+
+      console.log(
+        'sendFile have response: ',
+        JSON.stringify(data.replaceAll('\n\n', '')),
+      );
+
+      return data.replaceAll('\n\n', '');
+    }
+  }
+
+  const fileToWidget = (file: File): void => {
+    setAudioFromWidgetToInput(file);
+    const fileInfo = `${file.name}, ${file.type}, ${file.size} Mb`;
+
+    console.log(fileInfo);
+    if (file) {
+      // Отправка файла и получение результата
+      sendFile(file).then((result) => {
+        // Обработка результата
+        console.log(result);
+        setTextFromWidgetToInput(result);
+      });
+    }
+  };
+
+  return {
+    fileToInput: audioFromWidgetToInput,
+    textToInput: textFromWidgetToInput,
+    fileToWidget,
+    renderWidget,
+    textToWidget,
+  };
+}