quickblox-react-ui-kit 0.5.0-beta.5 → 0.5.0-beta.7

package/src/Data/source/remote/Mapper/DialogDTOMapper.ts

@@ -167,13 +167,32 @@ export class DialogDTOMapper implements IDTOMapper {
           dto.participantsIds = qbDialog.occupants_ids;
           break;
         default:
-          return Promise.reject(
-            new MapperDTOException(
-              UNEXPECTED_MAPPER_DTO_EXCEPTION_MESSAGE,
-              UNEXPECTED_MAPPER_DTO_EXCEPTION_EXCEPTION_CODE,
-              'undefinded type dialog in QBChatDialog',
-            ),
-          );
+          dto.id = qbDialog._id;
+          dto.lastMessageText = qbDialog.last_message as string;
+          dto.lastMessageDateSent = qbDialog.last_message_date_sent || 0;
+          dto.lastMessageUserId =
+            qbDialog.last_message_user_id === null
+              ? 0
+              : // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+              qbDialog.last_message_user_id;
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+          dto.ownerId = qbDialog.user_id.toString();
+          dto.type = qbDialog.type;
+          dto.unreadMessageCount =
+            qbDialog.unread_messages_count === null
+              ? 0
+              : qbDialog.unread_messages_count;
+          dto.updatedAt = qbDialog.updated_at;
+          dto.name = qbDialog.name;
+          dto.photo = qbDialog.photo === null ? '' : qbDialog.photo;
+          dto.participantsIds = qbDialog.occupants_ids;
+          // return Promise.reject(
+          //   new MapperDTOException(
+          //     UNEXPECTED_MAPPER_DTO_EXCEPTION_MESSAGE,
+          //     UNEXPECTED_MAPPER_DTO_EXCEPTION_EXCEPTION_CODE,
+          //     'undefined type dialog in QBChatDialog',
+          //   ),
+          // );
       }
     } catch (e) {
       console.log('MAPPER DTO ERROR for dto: ', JSON.stringify(dto));

package/src/Data/source/remote/RemoteDataSource.ts

@@ -107,6 +107,8 @@ export type AuthorizationData = {
 };
 
 export class RemoteDataSource implements IRemoteDataSource {
+  private processedDialogs = new Set<string>();
+
   private userDTOMapper: IDTOMapper;
 
   private messageDTOMapper: IDTOMapper;
@@ -217,42 +219,6 @@ export class RemoteDataSource implements IRemoteDataSource {
     return QBTranslate(smartChatAssistantId, text, languageCode);
   }
 
-  // async updateCurrentDialog(dto: RemoteDialogDTO, qbConfig: QBUIKitConfig): Promise<void> {
-  //   this.currentDialog = dto;
-  //   //
-  //   //
-  //   const dialogsDTOtoEntityMapper: IMapper = new DialogRemoteDTOMapper();
-  //
-  //   const dialogEntity: DialogEntity = await dialogsDTOtoEntityMapper.toEntity(
-  //     this.currentDialog,
-  //   );
-  //   const userId = this._authInformation?.userId || -1;
-  //   const dialogId = this.currentDialog.id;
-  //   const messageId = this.currentDialog.lastMessageId;
-  //   //
-  //   //
-  //   const resultMessage: DialogEventInfo = {
-  //     eventMessageType: EventMessageType.LocalMessage,
-  //     dialogInfo: dialogEntity,
-  //     messageInfo: undefined,
-  //     messageStatus: {
-  //       isTyping: false,
-  //       userId,
-  //       dialogId,
-  //       messageId,
-  //       deliveryStatus: 'delivered',
-  //     },
-  //     notificationTypes: undefined,
-  //   };
-  //
-  //   this.subscriptionOnMessageStatus.informSubscribers(
-  //     resultMessage,
-  //     EventMessageType.LocalMessage,
-  //   );
-  //   //
-  //
-  //   //
-  // }
   async updateCurrentDialog(
     dto: RemoteDialogDTO,
     qbConfig: QBUIKitConfig,
@@ -421,6 +387,10 @@ export class RemoteDataSource implements IRemoteDataSource {
     }
   }
 
+  public resetProcessedDialogs(): void {
+    this.processedDialogs.clear();
+  }
+
   public async disconnectAndLogoutUser() {
     if (this.authProcessed) {
       QBChatDisconnect();
@@ -428,6 +398,7 @@ export class RemoteDataSource implements IRemoteDataSource {
       this.authProcessed = false;
       this.releaseSubscriptions();
       this.releaseEventsHandlers();
+      this.resetProcessedDialogs();
     }
   }
 
@@ -899,43 +870,70 @@ export class RemoteDataSource implements IRemoteDataSource {
     //
   }
 
+  private async processDialogs(dialogIds: string[]): Promise<void> {
+    await Promise.all(dialogIds.map((id) => this.joinGroupDialog(id)));
+  }
+
+  private async processDialogsInBackground(dialogIds: string[]): Promise<void> {
+    const BATCH_SIZE = 12;
+
+    console.log(`Starting background processing for ${dialogIds.length} dialogs`);
+
+    for (let i = 0; i < dialogIds.length; i += BATCH_SIZE) {
+      const batch = dialogIds.slice(i, i + BATCH_SIZE);
+
+      console.log(`Processing batch ${i / BATCH_SIZE + 1}:`, batch);
+
+      await Promise.all(batch.map((id) => this.joinGroupDialog(id)));
+      console.log(`Batch ${i / BATCH_SIZE + 1} completed.`);
+
+      await new Promise((resolve) => setTimeout(resolve, 1500));
+    }
+
+    console.log('Background processing complete.');
+  }
+
+
+  private async joinGroupDialog(dialogId: string): Promise<void> {
+    try {
+      await QBJoinGroupDialog(dialogId);
+    } catch (reason) {
+      console.log(`QBJoinGroupDialog error for dialog ${dialogId}:`, reason);
+    }
+  }
+
   async getDialogs(pagination?: Pagination): Promise<RemoteDialogsDTO> {
     let currentPagination: Pagination = pagination || new Pagination();
 
     console.log(
       'call getDialogs in RemoteDataSourceMock param pagination: ',
-      JSON.stringify(pagination),
+      JSON.stringify(pagination)
     );
     console.log(
       'call getDialogs in RemoteDataSourceMock with result pagination: ',
-      JSON.stringify(currentPagination),
+      JSON.stringify(currentPagination)
     );
-    const pageNumber = currentPagination.getCurrentPage() || 1;
 
+    const pageNumber = currentPagination.getCurrentPage() || 1;
     console.log('pageNumber: ', pageNumber);
     const perPage = currentPagination.perPage || 100;
-
     console.log('perPage: ', perPage);
+
     const params = {
-      created_at: {
-        lt: Date.now() / 1000,
-      },
-      // sort_desc: 'created_at',// artan 19.0.2024
+      created_at: { lt: Date.now() / 1000 },
       sort_desc: 'updated_at',
       page: pageNumber,
-      // per_page: perPage,
       limit: perPage,
-      type: {
-        in: [2, 3],
-      },
+      type: { in: [2, 3] },
     };
-    // filter['type[in]'] = [3, 2].join(',');
 
     console.log(
       'call getDialogs in RemoteDataSourceMock with params: ',
-      JSON.stringify(params),
+      JSON.stringify(params)
     );
+
     const dialogsDTO: Array<RemoteDialogDTO> = [];
+    const joinDialogIds: string[] = [];
     const qbDialogs: QBGetDialogResult | undefined = await QBGetDialogs(params);
 
     if (qbDialogs) {
@@ -944,50 +942,133 @@ export class RemoteDataSource implements IRemoteDataSource {
           qbDialogs.total_entries
         }, limit: ${qbDialogs.limit}, skip: ${
           qbDialogs.skip
-        } items: ${JSON.stringify(qbDialogs.items)}`,
+        } items: ${JSON.stringify(qbDialogs.items)}`
       );
+
       currentPagination = new Pagination(0, perPage);
       currentPagination.totalPages = qbDialogs.total_entries / perPage;
       currentPagination.setCurrentPage(pageNumber);
 
-      // eslint-disable-next-line no-restricted-syntax
       for (const item of qbDialogs.items) {
         const qbEntity: QBChatDialog = item;
+        if (!qbEntity) continue;
 
-        const newDTO: RemoteDialogDTO =
-          // eslint-disable-next-line no-await-in-loop
-          await this.getCurrentDialogDTOMapper().toTDO(qbEntity);
-
-        // artan 27/06/23
-        if (newDTO.type === DialogType.group) {
-          // eslint-disable-next-line no-await-in-loop
-          await QBJoinGroupDialog(newDTO.id).catch((reason) => {
-            console.log('getDialogs. QBJoinGroupDialog error', reason);
-            throw new RemoteDataSourceException(
-              INCORRECT_REMOTE_DATASOURCE_DATA_EXCEPTION_MESSAGE,
-              INCORRECT_REMOTE_DATASOURCE_DATA_EXCEPTION_CODE,
-            );
-          });
+        const newDTO: RemoteDialogDTO = await this.getCurrentDialogDTOMapper().toTDO(qbEntity);
+
+        if (newDTO.type === DialogType.group && !this.processedDialogs.has(newDTO.id)) {
+          this.processedDialogs.add(newDTO.id);
+          joinDialogIds.push(newDTO.id);
         }
 
-        //
-        const currentUserId = this._authInformation?.userId || 0;
-        const statusMessageParams: QBMessageStatusParams = {
-          userId: newDTO.lastMessageUserId || currentUserId,
-          dialogId: newDTO.id,
-          messageId: newDTO.lastMessageId,
-        };
+        dialogsDTO.push(newDTO);
+      }
 
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-        QBChatMarkMessageDelivered(statusMessageParams);
+      const firstBatch = joinDialogIds.slice(0, 12);
+      await this.processDialogs(firstBatch);
 
-        dialogsDTO.push(newDTO);
+      // Оставшиеся элементы обрабатываются асинхронно в фоне
+      const remainingDialogs = joinDialogIds.slice(12);
+      if (remainingDialogs.length) {
+        this.processDialogsInBackground(remainingDialogs).then();
       }
     }
 
+    // Возвращаем результат после первой партии
     return Promise.resolve(new RemoteDialogsDTO(dialogsDTO, currentPagination));
   }
 
+
+  // async getDialogs(pagination?: Pagination): Promise<RemoteDialogsDTO> {
+  //   let currentPagination: Pagination = pagination || new Pagination();
+  //
+  //   console.log(
+  //     'call getDialogs in RemoteDataSourceMock param pagination: ',
+  //     JSON.stringify(pagination),
+  //   );
+  //   console.log(
+  //     'call getDialogs in RemoteDataSourceMock with result pagination: ',
+  //     JSON.stringify(currentPagination),
+  //   );
+  //   const pageNumber = currentPagination.getCurrentPage() || 1;
+  //
+  //   console.log('pageNumber: ', pageNumber);
+  //   const perPage = currentPagination.perPage || 100;
+  //
+  //   console.log('perPage: ', perPage);
+  //   const params = {
+  //     created_at: {
+  //       lt: Date.now() / 1000,
+  //     },
+  //     // sort_desc: 'created_at',// artan 19.0.2024
+  //     sort_desc: 'updated_at',
+  //     page: pageNumber,
+  //     // per_page: perPage,
+  //     limit: perPage,
+  //     type: {
+  //       in: [2, 3],
+  //     },
+  //   };
+  //   // filter['type[in]'] = [3, 2].join(',');
+  //
+  //   console.log(
+  //     'call getDialogs in RemoteDataSourceMock with params: ',
+  //     JSON.stringify(params),
+  //   );
+  //   const dialogsDTO: Array<RemoteDialogDTO> = [];
+  //   const qbDialogs: QBGetDialogResult | undefined = await QBGetDialogs(params);
+  //
+  //   if (qbDialogs) {
+  //     console.log(
+  //       `request completed. have: total_entries ${
+  //         qbDialogs.total_entries
+  //       }, limit: ${qbDialogs.limit}, skip: ${
+  //         qbDialogs.skip
+  //       } items: ${JSON.stringify(qbDialogs.items)}`,
+  //     );
+  //     currentPagination = new Pagination(0, perPage);
+  //     currentPagination.totalPages = qbDialogs.total_entries / perPage;
+  //     currentPagination.setCurrentPage(pageNumber);
+  //
+  //     // eslint-disable-next-line no-restricted-syntax
+  //     for (const item of qbDialogs.items) {
+  //       const qbEntity: QBChatDialog = item;
+  //       if (!qbEntity) {
+  //         continue;
+  //       }
+  //       const newDTO: RemoteDialogDTO =
+  //         // eslint-disable-next-line no-await-in-loop
+  //         await this.getCurrentDialogDTOMapper().toTDO(qbEntity);
+  //
+  //       // artan 27/06/23
+  //       if (newDTO.type === DialogType.group) {
+  //         // eslint-disable-next-line no-await-in-loop
+  //         await QBJoinGroupDialog(newDTO.id).catch((reason) => {
+  //           console.log('getDialogs. QBJoinGroupDialog error', reason);
+  //           throw new RemoteDataSourceException(
+  //             INCORRECT_REMOTE_DATASOURCE_DATA_EXCEPTION_MESSAGE,
+  //             INCORRECT_REMOTE_DATASOURCE_DATA_EXCEPTION_CODE,
+  //           );
+  //         });
+  //       }
+  //
+  //       //
+  //       // const currentUserId = this._authInformation?.userId || 0;
+  //       // const statusMessageParams: QBMessageStatusParams = {
+  //       //   userId: newDTO.lastMessageUserId || currentUserId,
+  //       //   dialogId: newDTO.id,
+  //       //   messageId: newDTO.lastMessageId,
+  //       // };
+  //       //
+  //       // // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  //       // QBChatMarkMessageDelivered(statusMessageParams);
+  //
+  //       dialogsDTO.push(newDTO);
+  //     }
+  //   }
+  //
+  //   return Promise.resolve(new RemoteDialogsDTO(dialogsDTO, currentPagination));
+  // }
+
   // eslint-disable-next-line class-methods-use-this
   async createDialog(dto: RemoteDialogDTO): Promise<RemoteDialogDTO> {
     console.log(

package/src/Presentation/Views/Dialog/AIWidgets/AIWidgetActions/AIWidgetActions.scss

@@ -53,3 +53,9 @@
   height: 24px;
   position: relative;
 }
+
+.ai-widget-actions-render {
+  display: flex;
+  align-items: center;
+  padding-right: 8px;
+}

package/src/Presentation/Views/Dialog/AIWidgets/AIWidgetActions/AIWidgetActions.tsx

@@ -17,7 +17,7 @@ type ContextMenuProps = {
 
 const ContextMenuStyles: { [key: string]: CSSProperties } = {
   contextMenuIcon: {
-    display: 'inline-block',
+    // display: 'inline-block',
     position: 'relative',
     maxWidth: '42px',
     maxHeight: '42px',
@@ -84,7 +84,7 @@ function AIWidgetActions({
 
   return (
     <div style={ContextMenuStyles.contextMenuIcon}>
-      <div onClick={handleClick}>{widgetToRender || <EditDots />}</div>
+      <div className="ai-widget-actions-render" onClick={handleClick}>{widgetToRender || <EditDots />}</div>
       {menuVisible && (
         // <div ref={contextMenuRef} style={ContextMenuStyles.contextMenuContent}>
         <div

package/src/Presentation/Views/Dialog/Dialog.scss

@@ -26,7 +26,13 @@ $message-view-container-ai-translate-text-color: var(--tertiary-elements);
   &--header{
     min-height: $message-view-container-header-min-height;
     max-height: $message-view-container-header-min-height;
-    width: 100%
+    width: 100%;
+
+    .dialog-header{
+      &__title {
+        font: var(--title-title-medium);
+      }
+    }
   }
   &--information{
     background-color: $message-view-container-information-background-color;

package/src/Presentation/Views/DialogInfo/DialogInfo.scss

@@ -22,7 +22,7 @@ $dialog-information-container-dialog-information-height: 64px;
       svg {
         width: 24px;
         height: 24px;
-        fill: var(--main-text);
+        fill: var(--secondary-elements);
       }
     }
 }

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

@@ -611,7 +611,7 @@ const QuickBloxUIKitDesktopLayout = ({
                     }}
                     rephrase={
                       <AIRephraseWidget
-                        disableActions={!isOnline}
+                        disableActions={!isOnline || messageText.length === 0}
                         waitAIWidget={waitAIWidget}
                         messageText={messageText}
                         theme={theme}

package/src/Presentation/themes/styles/_theme_dark.scss

@@ -29,7 +29,7 @@ html[data-theme='dark'] {
   --incoming-background: #{$secondary-400};
   --outgoing-background: #{$primary-500};
   --dropdown-background: #{$secondary-400};
-  --chat-input: #{$secondary-800};
+  --chat-input: #{$secondary-400};
   --divider: #{$secondary-400};
   --error: #{$error-300};
   --error-secondary: #{$error-100};

package/src/Presentation/themes/styles/_theme_light.scss

@@ -30,7 +30,7 @@
   --incoming-background: #{$secondary-50};
   --outgoing-background: #{$primary-50};
   --dropdown-background: #{$primary-a-100};
-  --chat-input: #{$primary-a-200};
+  --chat-input: #{$secondary-50};
   --divider: #{$primary-50};
   --error: #{$error-500};
   --error-secondary: #{$error-200};

package/src/Presentation/ui-components/DialogItemPreview/DialogItemPreview.stories.tsx

@@ -189,7 +189,9 @@ export const DialogItemPreviewMobileScreenIPad: Story = {
   },
   render: (args) => {
     // eslint-disable-next-line no-param-reassign
-    args.date = args.date ? new Date(args.date!).toLocaleDateString() : new Date().toLocaleDateString();
+    args.date = args.date
+      ? new Date(args.date!).toLocaleDateString()
+      : new Date().toLocaleDateString();
 
     return <DialogItemPreview {...args} />;
   },

package/src/Presentation/ui-components/DialogItemPreview/DialogItemPreview.tsx

@@ -4,8 +4,8 @@ import { FunctionTypeVoidToVoid } from '../../../CommonTypes/BaseViewModel';
 import './DialogItemPreview.scss';
 
 export type DialogItemPreviewProps = {
-  avatar: ReactElement;
-  title: string;
+  avatar?: ReactElement;
+  title?: string;
   active?: boolean;
   date?: string;
   lastMessage?: ReactElement | string;

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

@@ -8,6 +8,12 @@
   font: var(--body-body-medium, 400 14px/20px "Roboto-Regular", sans-serif);
 }
 
+.reply-forward-message {
+  .bubble-content-text {
+    color: var(--secondary-text);
+  }
+}
+
 .text-bubble-background {
 
   &__incoming {
@@ -37,6 +43,7 @@
     justify-content: flex-start;
     flex-shrink: 0;
     position: relative;
+    width: 100%;
   }
 
 }

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

@@ -79,6 +79,10 @@
         flex-shrink: 0;
         position: relative;
       }
+      .reply-forward-message {
+        color: var(--secondary-text);
+        width: 100%;
+      }
     }
   }
 

package/src/Presentation/ui-components/Message/Message.tsx

@@ -1,4 +1,5 @@
 import React, { ReactElement } from 'react';
+import cn from 'classnames';
 import Avatar from '../Avatar/Avatar';
 import CheckBox from '../CheckBox/CheckBox';
 import MessageCaption from './MessageCaption/MessageCaption';
@@ -54,7 +55,11 @@ export default function Message({
                 subtype={subtype}
                 userName={userName}
               />
-              {children}
+              <div className={cn(null, {
+                            'reply-forward-message': subtype === 'reply' || subtype === 'forward'}
+              )}>
+                {children}
+              </div>
             </div>
           </div>
         </div>
@@ -70,7 +75,12 @@ export default function Message({
               />
               <div className="message-item__incoming__chat">
                 <div className="message-item__incoming__chat__bubble">
-                  {children}
+                  <div className={cn(null, {
+                      'reply-forward-message': subtype === 'reply' || subtype === 'forward'
+                    }
+                  )}>
+                    {children}
+                  </div>
                   {bottomPart}
                 </div>
                 {additionalPart}

package/src/Presentation/ui-components/MessageInput/MessageInput.scss

@@ -2,6 +2,10 @@ $message-view-container-header-min-height: 64px;
 $message-view-container-chat-input-min-height: 54px;
 .chat-container{
   width: 100%;
+  &__send-icon {
+    display: flex;
+    align-items: center;
+  }
   &__icon{
     width: 24px;
     height: 24px;