quickblox-react-ui-kit 0.4.2-beta.6 → 0.4.2-beta.7

package/media-recorder-js.d.ts

@@ -0,0 +1,133 @@
+declare module 'media-recorder-js' {
+  interface QBMediaRecorderConstructorProps {
+    /** Preferred MIME type */
+    mimeType?: string
+    workerPath?: string
+    /**
+     * The minimum number of milliseconds of data to return
+     * in a single Blob, fire 'ondataavaible' callback
+     * (isn't need to use with 'audio/wav' of 'audio/mp3')
+     *
+     * @default 1000
+     */
+    timeslice?: number
+    /**
+     * What to do with a muted input MediaStreamTrack,
+     * e.g. insert black frames/zero audio volume in the recording
+     * or ignore altogether
+     *
+     * @default true
+     */
+    ignoreMutedMedia?: boolean
+    /** Recording start event handler */
+    onstart?: VoidFunction
+    /** Recording stop event handler */
+    onstop?: (file: Blob) => void
+    /** Recording pause event handler */
+    onpause?: VoidFunction
+    /** Recording resume event handler */
+    onresume?: VoidFunction
+    /** Error event handler */
+    onerror?: (error: unknown) => void
+    /**
+     * `dataavailable` event handler.
+     * The Blob of recorded data is contained in this event (callback
+     * isn't supported if use 'audio/wav' of 'audio/mp3' for recording)
+     */
+    ondataavailable?: (event: { data: Blob }) => void
+  }
+
+  class QBMediaRecorder {
+    constructor(config: QBMediaRecorderConstructorProps)
+
+    /**
+     * Switch recording Blob objects to the specified
+     * MIME type if `MediaRecorder` support it.
+     */
+    toggleMimeType(mimeType: string): void
+
+    /**
+     * Returns current `MediaRecorder` state
+     */
+    getState(): 'inactive' | 'recording' | 'paused'
+
+    /**
+     * Starts recording a stream.
+     * Fires `onstart` callback.
+     */
+    start(stream: MediaStream): void
+
+    /**
+     * Stops recording a stream
+     *
+     * @fires `onstop` callback and passing there Blob recorded
+     */
+    stop(): void
+
+    /** Pausing stream recording */
+    pause(): void
+
+    /** Resumes stream recording */
+    resume(): void
+
+    /**
+     * Change record source
+     */
+    change(stream: MediaStream): void
+
+    /**
+     * Create a file from blob and download as file.
+     * This method will call `stop` if recording is in progress.
+     *
+     * @param {string} filename Name of video file to be downloaded
+     * (default to `Date.now()`)
+     */
+    download(filename?: string): void
+
+    _getBlobRecorded(): Blob
+
+    callbacks: Pick<
+      QBMediaRecorderConstructorProps,
+      | 'onstart'
+      | 'onstop'
+      | 'onpause'
+      | 'onresume'
+      | 'ondataavailable'
+      | 'onerror'
+    >
+
+    /**
+     * Checks capability of recording in the environment.
+     * Checks `MediaRecorder`, `MediaRecorder.isTypeSupported` and `Blob`.
+     */
+    static isAvailable(): boolean
+
+    /**
+     * Checks if AudioContext API is available.
+     * Checks `window.AudioContext` or `window.webkitAudioContext`.
+     */
+    static isAudioContext(): boolean
+    /**
+     * The `QBMediaRecorder.isTypeSupported()` static method returns
+     * a Boolean which is true if the MIME type specified is one
+     * the user agent should be able to successfully record.
+     * @param mimeType The MIME media type to check.
+     *
+     * @returns true if the `MediaRecorder` implementation is capable of
+     * recording `Blob` objects for the specified MIME type. Recording may
+     * still fail if there are insufficient resources to support the
+     * recording and encoding process. If the value is false, the user
+     * agent is incapable of recording the specified format.
+     */
+
+    static isTypeSupported(mimeType: string): boolean
+
+    /**
+     * Return supported mime types
+     * @param type video or audio (dafault to 'video')
+     */
+    static getSupportedMimeTypes(type: 'audio' | 'video' = 'video'): string[]
+  }
+
+  export default QBMediaRecorder
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quickblox-react-ui-kit",
-  "version": "0.4.2-beta.6",
+  "version": "0.4.2-beta.7",
   "main": "dist/index-ui.js",
   "license": "MIT",
   "dependencies": {
@@ -13,6 +13,7 @@
     "qb-ai-rephrase": "^0.1.2",
     "qb-ai-translate": "^0.1.2",
     "quickblox": "^2.19.2",
+    "media-recorder-js": "^2.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.11.1",

package/src/Data/DefaultConfigurations.ts

@@ -145,7 +145,7 @@ export class DefaultConfigurations {
       },
       configAIApi: {
         AIAnswerAssistWidgetConfig: {
-          smartChatAssistantId: '6633a1300fea600001bd6e71',
+          smartChatAssistantId: '',
           organizationName: 'Quickblox',
           openAIModel: 'gpt-3.5-turbo',
           apiKey: '',
@@ -158,7 +158,7 @@ export class DefaultConfigurations {
           },
         },
         AITranslateWidgetConfig: {
-          smartChatAssistantId: '6633a1300fea600001bd6e71',
+          smartChatAssistantId: '',
           organizationName: 'Quickblox',
           openAIModel: 'gpt-3.5-turbo',
           apiKey: '',

package/src/Presentation/Views/Dialog/MessageItem/MessageItem.tsx

@@ -346,7 +346,7 @@ export default function MessageItem({
             }
           >
             {message.attachments && message.attachments.length > 0 ? (
-              <div>
+              <>
                 {message.attachments.map((attachment) => {
                   return (
                     <AttachmentBubble
@@ -355,7 +355,7 @@ export default function MessageItem({
                     />
                   );
                 })}
-              </div>
+              </>
             ) : (
               <TextBubble
                 text={

package/src/Presentation/Views/Dialog/useDialogViewModel.ts

@@ -90,11 +90,38 @@ export default function useDialogViewModel(
     });
   }
 
+  const getSender = async (sender_id: number) => {
+    const getUser: GetUsersByIdsUseCase = new GetUsersByIdsUseCase(
+      new UsersRepository(
+        currentContext.storage.LOCAL_DATA_SOURCE,
+        currentContext.storage.REMOTE_DATA_SOURCE,
+      ),
+      [sender_id],
+    );
+
+    let userEntity: UserEntity | undefined;
+
+    await getUser
+      .execute()
+      // eslint-disable-next-line promise/always-return
+      .then((data) => {
+        // eslint-disable-next-line prefer-destructuring
+        userEntity = data[0];
+      })
+      .catch((e) => {
+        console.log('have ERROR get users :', JSON.stringify(e));
+      });
+
+    return userEntity;
+  };
+
   async function getMessages(currentPagination?: Pagination) {
     setLoading(true);
 
     let participants: Array<number> = [];
     let userDictionary: Record<number, UserEntity> = {};
+    let userMissingDictionary: Record<number, UserEntity> = {};
+    let messagesDialog: MessageEntity[] = [];
 
     if (dialog?.type === DialogType.group) {
       participants = (dialog as GroupDialogEntity).participantIds;
@@ -124,7 +151,6 @@ export default function useDialogViewModel(
           return obj;
         }, {});
 
-        setLoading(false);
         setError('');
       })
       .catch((e) => {
@@ -152,88 +178,84 @@ export default function useDialogViewModel(
           } messages:${JSON.stringify(data)}`,
         );
 
-        const ResultMessages = data.ResultData.map((message) => {
-          const obj = { ...message };
-
-          console.log('have sender id:', message.sender_id);
-
-          if (userDictionary) {
-            obj.sender = userDictionary[message.sender_id];
-            if (
-              obj.sender &&
-              obj.sender.full_name &&
-              regex &&
-              !regex.test(obj.sender.full_name)
-            ) {
-              obj.sender.full_name = 'Unknown';
-            }
-          }
-
-          return obj;
-        });
-
-        console.log(`result messages:${JSON.stringify(ResultMessages)}`);
-        // setMessages(ResultMessages);
-        setMessages((prevState) => {
-          const newItems: MessageEntity[] =
-            currentPagination === undefined ||
-            currentPagination?.getCurrentPage() === 0
-              ? [...ResultMessages]
-              : [...prevState, ...ResultMessages];
-
-          return newItems;
-        });
-        // eslint-disable-next-line promise/always-return
-        // if (
-        //   dialog?.type === DialogType.private ||
-        //   dialog?.type === DialogType.group
-        // ) {
-        //   const updDialog = { ...dialog };
-        //
-        //   updDialog.unreadMessageCount = 0;
-        //   setDialog(updDialog);
-        //
-        //   informDataSources(updDialog);
-        //
-        // }
-        setLoading(false);
+        messagesDialog = data.ResultData;
         setPagination(data.CurrentPagination);
         setError('');
       })
       .catch((e) => {
-        console.log('have ERROR get users :', JSON.stringify(e));
+        console.log('have ERROR get messages :', JSON.stringify(e));
         setLoading(false);
         setError((e as unknown as Error).message);
       });
-    //
 
-    console.log('EXECUTE USE CASE MessagesViewModelWithMockUseCase EXECUTED');
-  }
+    //
 
-  const getSender = async (sender_id: number) => {
-    const getUser: GetUsersByIdsUseCase = new GetUsersByIdsUseCase(
-      new UsersRepository(
-        currentContext.storage.LOCAL_DATA_SOURCE,
-        currentContext.storage.REMOTE_DATA_SOURCE,
-      ),
-      [sender_id],
+    const senderIds = Array.from(
+      new Set(messagesDialog.map((msg) => msg.sender_id)),
     );
+    const missingSenderIds = senderIds.filter((id) => !(id in userDictionary));
 
-    let userEntity: UserEntity | undefined;
+    const getMissingSenderUsersFromDialogByIdsUseCase: GetUsersByIdsUseCase =
+      new GetUsersByIdsUseCase(
+        new UsersRepository(LOCAL_DATA_SOURCE, REMOTE_DATA_SOURCE),
+        missingSenderIds,
+      );
 
-    await getUser
+    await getMissingSenderUsersFromDialogByIdsUseCase
       .execute()
       // eslint-disable-next-line promise/always-return
       .then((data) => {
-        // eslint-disable-next-line prefer-destructuring
-        userEntity = data[0];
+        userMissingDictionary = data.reduce((acc, item) => {
+          const obj = acc;
+
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          acc[item.id] = item;
+
+          return obj;
+        }, {});
+
+        setError('');
       })
       .catch((e) => {
-        console.log('have ERROR get users :', JSON.stringify(e));
+        console.log('have ERROR get missing users :', JSON.stringify(e));
+        setLoading(false);
+        setError((e as unknown as Error).message);
       });
 
-    return userEntity;
-  };
+    userDictionary = { ...userDictionary, ...userMissingDictionary };
+
+    const ResultMessages = messagesDialog.map((message) => {
+      const obj = { ...message };
+
+      if (userDictionary) {
+        obj.sender = userDictionary[message.sender_id];
+        if (
+          obj.sender &&
+          obj.sender.full_name &&
+          regex &&
+          !regex.test(obj.sender.full_name)
+        ) {
+          obj.sender.full_name = 'Unknown';
+        }
+      }
+
+      return obj;
+    });
+
+    console.log(`result messages:${JSON.stringify(ResultMessages)}`);
+    setMessages((prevState) => {
+      const newItems: MessageEntity[] =
+        currentPagination === undefined ||
+        currentPagination?.getCurrentPage() === 0
+          ? [...ResultMessages]
+          : [...prevState, ...ResultMessages];
+
+      return newItems;
+    });
+    setLoading(false);
+    console.log('EXECUTE USE CASE MessagesViewModelWithMockUseCase EXECUTED');
+  }
 
   const dialogUpdateHandler = (dialogInfo: DialogEventInfo) => {
     console.log('call dialogUpdateHandler in useDialogViewModel');

package/src/Presentation/Views/DialogList/useDialogListViewModel.ts

@@ -157,6 +157,27 @@ export default function useDialogListViewModel(
     });
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/no-empty-function
+  function informDataSources(item: DialogEntity) {
+    const updateCurrentDialogInDataSourceUseCase: UpdateCurrentDialogInDataSourceUseCase =
+      new UpdateCurrentDialogInDataSourceUseCase(
+        new DialogsRepository(
+          currentContext.storage.LOCAL_DATA_SOURCE,
+          remoteDataSourceMock,
+        ),
+        item as GroupDialogEntity,
+        QBConfig,
+      );
+
+    updateCurrentDialogInDataSourceUseCase.execute().catch((e) => {
+      console.log(
+        'Error updateCurrentDialogInDataSourceUseCase: ',
+        stringifyError(e),
+      );
+      throw new Error(stringifyError(e));
+    });
+  }
+
   const dialogUpdateHandler = (dialogInfo: DialogEventInfo) => {
     console.log('call dialogUpdateHandler in useDialogListView:', dialogInfo);
     if (
@@ -256,7 +277,12 @@ export default function useDialogListViewModel(
         setDialogs((prevDialogs) => {
           const newDialogs = prevDialogs.map((dialog) => {
             if (dialog.id === dialogInfo.dialogInfo?.id) {
-              return dialogInfo.dialogInfo as PublicDialogEntity;
+              const updatedDialogInfo = {
+                ...dialogInfo.dialogInfo,
+                unreadMessageCount: 0,
+              };
+
+              return updatedDialogInfo as PublicDialogEntity;
             }
 
             return dialog;
@@ -270,12 +296,6 @@ export default function useDialogListViewModel(
                   new Date(a.updatedAt).getTime();
           });
 
-          // const sortedData = [...newDialogs].sort((a, b) => {
-          //     return (
-          //         new Date(b.lastMessage.dateSent).getTime() - new Date(a.lastMessage.dateSent).getTime()
-          //     );
-          // });
-
           return sortedData;
         });
       }
@@ -534,27 +554,6 @@ export default function useDialogListViewModel(
     return Promise.resolve(resultEnity);
   };
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/no-empty-function
-  function informDataSources(item: DialogEntity) {
-    const updateCurrentDialogInDataSourceUseCase: UpdateCurrentDialogInDataSourceUseCase =
-      new UpdateCurrentDialogInDataSourceUseCase(
-        new DialogsRepository(
-          currentContext.storage.LOCAL_DATA_SOURCE,
-          remoteDataSourceMock,
-        ),
-        item as GroupDialogEntity,
-        QBConfig,
-      );
-
-    updateCurrentDialogInDataSourceUseCase.execute().catch((e) => {
-      console.log(
-        'Error updateCurrentDialogInDataSourceUseCase: ',
-        stringifyError(e),
-      );
-      throw new Error(stringifyError(e));
-    });
-  }
-
   return {
     get entity(): DialogEntity {
       return newDialog as DialogEntity;

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

@@ -435,32 +435,34 @@ const QuickBloxUIKitDesktopLayout: React.FC<
                     />
                   ) : null
                 }
-                renderDialogList={(handleSelectDialog) =>
-                  // eslint-disable-next-line no-nested-ternary
-                  dialogsViewModel?.loading ? (
-                    <div
-                      className="dialog-list__loader-container"
-                      style={{
-                        display: 'flex',
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                      }}
-                    >
-                      <Loader size="md" className="dialog-list__loader" />
-                    </div>
-                  ) : searchedDialogs.length > 0 ? (
-                    searchedDialogs.map((dlg, index) =>
-                      renderDialogItem(dlg, index, handleSelectDialog),
-                    )
-                  ) : (
-                    <Placeholder
-                      icon={<ChatSvg />}
-                      text="There are no dialogs."
-                      className="dialog-empty-chat-placeholder"
-                    />
-                  )
-                }
+                renderDialogList={(handleSelectDialog) => (
+                  <>
+                    {dialogsViewModel?.loading && (
+                      <div
+                        className="dialog-list__loader-container"
+                        style={{
+                          display: 'flex',
+                          flexDirection: 'row',
+                          alignItems: 'center',
+                          justifyContent: 'center',
+                        }}
+                      >
+                        <Loader size="md" className="dialog-list__loader" />
+                      </div>
+                    )}
+                    {searchedDialogs.length > 0 ? (
+                      searchedDialogs.map((dlg, index) =>
+                        renderDialogItem(dlg, index, handleSelectDialog),
+                      )
+                    ) : (
+                      <Placeholder
+                        icon={<ChatSvg />}
+                        text="There are no dialogs."
+                        className="dialog-empty-chat-placeholder"
+                      />
+                    )}
+                  </>
+                )}
               />
             ) : null
           }

package/src/Presentation/ui-components/Message/Bubble/AudioBubble/AudioBubble.scss

@@ -25,7 +25,9 @@
     height: 24px;
 
     &--color{
-      fill: var(--main-elements)
+      fill: var(--main-elements);
+      width: 24px;
+      height: 24px;
     }
   }
 }

package/src/QBconfig.ts

@@ -10,7 +10,7 @@ export const QBConfig: QBUIKitConfig = {
   },
   configAIApi: {
     AIAnswerAssistWidgetConfig: {
-      smartChatAssistantId: '6633a1300fea600001bd6e71',
+      smartChatAssistantId: '',
       organizationName: 'Quickblox',
       openAIModel: 'gpt-3.5-turbo',
       apiKey: '',
@@ -23,7 +23,7 @@ export const QBConfig: QBUIKitConfig = {
       },
     },
     AITranslateWidgetConfig: {
-      smartChatAssistantId: '6633a1300fea600001bd6e71',
+      smartChatAssistantId: '',
       organizationName: 'Quickblox',
       openAIModel: 'gpt-3.5-turbo',
       apiKey: '',