quickblox-react-ui-kit 0.4.6-beta.4 → 0.4.7

package/src/Domain/use_cases/SubscribeToDialogEventsUseCase.ts

@@ -19,7 +19,6 @@ export class SubscribeToDialogEventsUseCase extends BaseUseCase<
     eventMessagesRepository: EventMessagesRepository,
     nameSubscription: string = SubscriptionPerformer.DEFAULT_SUBSCRIPTION_NAME,
   ) {
-    console.log('CONSTRUCTOR SubscribeToDialogsUpdatesUseCaseWithMock');
     super();
     this.callBackExecute = undefined;
 
@@ -75,19 +74,10 @@ export class SubscribeToDialogEventsUseCase extends BaseUseCase<
   }
 
   updateMessageStatusEventHandler(dialogEventInfo: DialogEventInfo): void {
-    console.log(
-      'execute newDialogEventHandler in SubscribeToDialogEventsUseCase:',
-      JSON.stringify(dialogEventInfo),
-    );
-
     this.informSubscribers(dialogEventInfo);
   }
 
   newMessageEventHandler(messageEntity: MessageEntity): void {
-    console.log(
-      'execute newDialogEventHandler in SubscribeToDialogEventsUseCase:',
-      JSON.stringify(messageEntity),
-    );
     const messageInfo: DialogEventInfo = {
       messageInfo: messageEntity,
       notificationTypes: NotificationTypes.UPDATE_DIALOG,
@@ -99,10 +89,6 @@ export class SubscribeToDialogEventsUseCase extends BaseUseCase<
   }
 
   updateDialogEventHandler(messageEntity: MessageEntity): void {
-    console.log(
-      'execute updateDialogEventHandler in SubscribeToDialogEventsUseCase:',
-      JSON.stringify(messageEntity),
-    );
     const messageInfo: DialogEventInfo = {
       messageInfo: messageEntity,
       notificationTypes: NotificationTypes.UPDATE_DIALOG,
@@ -114,10 +100,6 @@ export class SubscribeToDialogEventsUseCase extends BaseUseCase<
   }
 
   leaveDialogEventHandler(messageEntity: MessageEntity): void {
-    console.log(
-      'execute leaveDialogEventHandler in SubscribeToDialogEventsUseCase:',
-      JSON.stringify(messageEntity),
-    );
     const messageInfo: DialogEventInfo = {
       messageInfo: messageEntity,
       notificationTypes: NotificationTypes.DELETE_LEAVE_DIALOG,
@@ -129,10 +111,6 @@ export class SubscribeToDialogEventsUseCase extends BaseUseCase<
   }
 
   removeUserDialogEventHandler(messageEntity: MessageEntity): void {
-    console.log(
-      'execute removeUserDialogEventHandler in SubscribeToDialogEventsUseCase:',
-      JSON.stringify(messageEntity),
-    );
     const messageInfo: DialogEventInfo = {
       messageInfo: messageEntity,
       notificationTypes: NotificationTypes.REMOVE_USER,
@@ -144,10 +122,6 @@ export class SubscribeToDialogEventsUseCase extends BaseUseCase<
   }
 
   newDialogEventHandler(messageEntity: MessageEntity): void {
-    console.log(
-      'execute newDialogEventHandler in SubscribeToDialogEventsUseCase:',
-      JSON.stringify(messageEntity),
-    );
     const messageInfo: DialogEventInfo = {
       messageInfo: messageEntity,
       notificationTypes: NotificationTypes.NEW_DIALOG,

package/src/Domain/use_cases/SubscribeToDialogsUpdatesUseCase.ts

@@ -14,7 +14,6 @@ export class SubscribeToDialogsUpdatesUseCase extends BaseUseCase<
   private dialogs: Array<DialogEntity> = [];
 
   constructor(dialogRepository: DialogsRepository) {
-    console.log('CONSTRUCTOR SubscribeToDialogsUpdatesUseCase');
     super();
     this.callBackExecute = undefined;
 

package/src/Domain/use_cases/SyncDialogsUseCase.ts

@@ -19,7 +19,7 @@ export class SyncDialogsUseCase extends BaseUseCase<boolean, boolean> {
 
   private timer2Id: NodeJS.Timer | undefined;
 
-  private timerId: NodeJS.Timer | undefined;
+  private timerId: NodeJS.Timer | undefined | null = null;
 
   constructor(
     dialogRepository: DialogsRepository,
@@ -27,7 +27,6 @@ export class SyncDialogsUseCase extends BaseUseCase<boolean, boolean> {
     eventMessagesRepository: EventMessagesRepository,
   ) {
     super();
-    console.log('CONSTRUCTOR SyncDialogsUseCaseWithMock');
     this.callBackExecute = undefined;
 
     this.dialogRepository = dialogRepository;

package/src/Domain/use_cases/UpdateCurrentDialogInDataSourceUseCase.ts

@@ -18,14 +18,12 @@ export class UpdateCurrentDialogInDataSourceUseCase
     updateDialog: GroupDialogEntity,
     qbConfig: QBUIKitConfig,
   ) {
-    console.log('CONSTRUCTOR UpdateCurrentDialogInDataSourceUseCase');
     this.dialogRepository = dialogRepository;
     this.updateDialog = updateDialog;
     this.qbConfig = qbConfig;
   }
 
   async execute(): Promise<DialogEntity> {
-    console.log('execute UpdateCurrentDialogInDataSourceUseCase');
     const result: DialogEntity =
       await this.dialogRepository.updateCurrentDialogInLocalDataSource(
         this.updateDialog,

package/src/Domain/use_cases/UpdateDialogUseCase.ts

@@ -22,7 +22,6 @@ export class UpdateDialogUseCase implements IUseCase<void, DialogEntity> {
     updateDialog: GroupDialogEntity,
     textInformationMessage: string,
   ) {
-    console.log('CONSTRUCTOR UpdateDialogUseCase');
     this.dialogRepository = dialogRepository;
     this.updateDialog = updateDialog;
     this.eventMessagesRepository = eventMessagesRepository;
@@ -30,7 +29,6 @@ export class UpdateDialogUseCase implements IUseCase<void, DialogEntity> {
   }
 
   async execute(): Promise<DialogEntity> {
-    console.log('execute UpdateDialogUseCase');
     const result: DialogEntity =
       await this.dialogRepository.updateDialogInRemote(this.updateDialog);
 

package/src/Domain/use_cases/UploadFileUseCase.ts

@@ -8,13 +8,11 @@ export class UploadFileUseCase implements IUseCase<void, FileEntity> {
   private fileEntity: FileEntity;
 
   constructor(fileRepository: FileRepository, fileEntity: FileEntity) {
-    console.log('CONSTRUCTOR UploadFileUseCase');
     this.fileRepository = fileRepository;
     this.fileEntity = fileEntity;
   }
 
   async execute(): Promise<FileEntity> {
-    console.log('execute UploadFileUseCase');
     const result: FileEntity = await this.fileRepository.saveFileInRemote(
       this.fileEntity,
     );

package/src/Domain/use_cases/UserTypingMessageUseCase.ts

@@ -20,14 +20,12 @@ export class UserTypingMessageUseCase implements IUseCase<void, void> {
     dialog: DialogEntity,
     senderId: number,
   ) {
-    console.log('CONSTRUCTOR SendUserIsTypingMessageUseCase');
     this.messagesRepository = messagesRepository;
     this.dialog = dialog;
     this.senderId = senderId;
   }
 
   async execute(): Promise<void> {
-    console.log('execute SendUserIsTypingMessageUseCase');
     this._typingTime = Date.now();
     if (!this._typingTimer) {
       await this.messagesRepository.typingMessageStart(

package/src/Domain/use_cases/ai/AIAnswerAssistUseCase.ts

@@ -27,7 +27,6 @@ export class AIAnswerAssistUseCase implements IUseCase<void, string> {
     sessionToken: string,
     openAIModel = 'gpt-3.5-turbo',
   ) {
-    console.log('CONSTRUCTOR AIRephraseUseCase');
     this.api = api;
     this.openAIModel = openAIModel;
     this.port = port;
@@ -38,7 +37,6 @@ export class AIAnswerAssistUseCase implements IUseCase<void, string> {
   }
 
   async execute(): Promise<string> {
-    console.log('execute AIRephraseUseCase');
     const settings =
       QBAIAnswerAssistant.createDefaultAIAnswerAssistantSettings();
 

package/src/Domain/use_cases/ai/AIAnswerAssistWithProxyUseCase.ts

@@ -27,7 +27,6 @@ export class AIAnswerAssistWithProxyUseCase implements IUseCase<void, string> {
     sessionToken: string,
     openAIModel = 'gpt-3.5-turbo',
   ) {
-    console.log('CONSTRUCTOR AIRephraseUseCase');
     this.api = api;
     this.openAIModel = openAIModel;
     this.port = port;
@@ -38,8 +37,6 @@ export class AIAnswerAssistWithProxyUseCase implements IUseCase<void, string> {
   }
 
   async execute(): Promise<string> {
-    console.log('execute AIRephraseUseCase');
-
     const settings =
       QBAIAnswerAssistant.createDefaultAIAnswerAssistantSettings();
 

package/src/Domain/use_cases/ai/AIAnswerAssistWithSDKUseCase.ts

@@ -22,7 +22,6 @@ export class AIAnswerAssistWithSDKUseCase implements IUseCase<void, string> {
     dataSource: IRemoteDataSource,
     smartChatAssistantId: string,
   ) {
-    console.log('CONSTRUCTOR AIAnswerAssistWithSDKUseCase');
     this.textToSend = textToSend;
     this.dialogMessages = dialogMessages;
     this.dataSource = dataSource;
@@ -30,7 +29,6 @@ export class AIAnswerAssistWithSDKUseCase implements IUseCase<void, string> {
   }
 
   async execute(): Promise<string> {
-    console.log('execute AIAnswerAssistWithSDKUseCase');
     const history: AIChatMessage[] = this.dialogMessages.map(
       (msg: IChatMessage) => {
         return {

package/src/Domain/use_cases/ai/AIRephraseUseCase.ts

@@ -31,7 +31,6 @@ export class AIRephraseUseCase implements IUseCase<void, string> {
     sessionToken: string,
     openAIModel = 'gpt-3.5-turbo',
   ) {
-    console.log('CONSTRUCTOR AIRephraseUseCase');
     this.api = api;
     this.openAIModel = openAIModel;
     this.port = port;
@@ -43,8 +42,6 @@ export class AIRephraseUseCase implements IUseCase<void, string> {
   }
 
   async execute(): Promise<string> {
-    console.log('execute AIRephraseUseCase');
-
     const settings = QBAIRephrase.createDefaultAIRephraseSettings();
 
     settings.apiKey = this.sessionToken;

package/src/Domain/use_cases/ai/AIRephraseWithProxyUseCase.ts

@@ -31,7 +31,6 @@ export class AIRephraseWithProxyUseCase implements IUseCase<void, string> {
     sessionToken: string,
     openAIModel = 'gpt-3.5-turbo',
   ) {
-    console.log('CONSTRUCTOR AIRephraseUseCase');
     this.api = api;
     this.openAIModel = openAIModel;
     this.port = port;
@@ -43,8 +42,6 @@ export class AIRephraseWithProxyUseCase implements IUseCase<void, string> {
   }
 
   async execute(): Promise<string> {
-    console.log('execute AIRephraseUseCase');
-
     const settings = QBAIRephrase.createDefaultAIRephraseSettings();
 
     settings.token = this.sessionToken;

package/src/Domain/use_cases/ai/AITranslateUseCase.ts

@@ -29,7 +29,6 @@ export class AITranslateUseCase implements IUseCase<void, string> {
     sessionToken: string,
     openAIModel = 'gpt-3.5-turbo',
   ) {
-    console.log('CONSTRUCTOR AIRephraseUseCase');
     this.api = api;
     this.openAIModel = openAIModel;
     this.port = port;
@@ -41,7 +40,6 @@ export class AITranslateUseCase implements IUseCase<void, string> {
   }
 
   async execute(): Promise<string> {
-    console.log('execute AIRephraseUseCase');
     const settings: AITranslateSettings =
       // eslint-disable-next-line @typescript-eslint/no-unsafe-call
       QBAITranslate.createDefaultAITranslateSettings();

package/src/Domain/use_cases/ai/AITranslateWithProxyUseCase.ts

@@ -30,7 +30,6 @@ export class AITranslateWithProxyUseCase implements IUseCase<void, string> {
     sessionToken: string,
     openAIModel = 'gpt-3.5-turbo',
   ) {
-    console.log('CONSTRUCTOR AIRephraseUseCase');
     this.api = api;
     this.openAIModel = openAIModel;
     this.port = port;
@@ -42,8 +41,6 @@ export class AITranslateWithProxyUseCase implements IUseCase<void, string> {
   }
 
   async execute(): Promise<string> {
-    console.log('execute AIRephraseUseCase');
-
     const settings: AITranslateSettings =
       // eslint-disable-next-line @typescript-eslint/no-unsafe-call
       QBAITranslate.createDefaultAITranslateSettings();

package/src/Domain/use_cases/ai/AITranslateWithSDKUseCase.ts

@@ -82,7 +82,6 @@ export class AITranslateWithSDKUseCase implements IUseCase<void, string> {
     dataSource: IRemoteDataSource,
     smartChatAssistantId: string,
   ) {
-    console.log('CONSTRUCTOR AITranslateWithSDKUseCase');
     this.dataSource = dataSource;
     this.textToSend = textToSend;
     this.language = language;
@@ -94,8 +93,6 @@ export class AITranslateWithSDKUseCase implements IUseCase<void, string> {
   }
 
   async execute(): Promise<string> {
-    console.log('execute AITranslateWithSDKUseCase');
-
     const response: AIAnswerResponse = await this.dataSource.translate(
       this.textToSend,
       this.getLanguageCode(this.language),

package/src/Domain/use_cases/base/Subscribable/SubscriptionPerformer.ts

@@ -50,7 +50,6 @@ export class SubscriptionPerformer<TArg> implements ISubscribable<TArg> {
   }
 
   constructor() {
-    console.log('CONSTRUCTOR SubscriptionPerformer');
     // this.onEventByTypeSubscribers[EventMessageType.LocalMessage] = [];
     this.onEventByTypeSubscribers[EventMessageType.LocalMessage] =
       this.subscribers;

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

@@ -132,7 +132,7 @@ const AIRephraseWidget: React.FC<AIRephraseWidgetProps> = ({
       });
     }
     //
-    items.push({
+    items.unshift({
       title: 'Back to prev.',
       icon: <WhiteCheckMarkIcon />,
       action: () => {

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

@@ -4,18 +4,18 @@
 }
 .dropdown-context-menu-tone {
   position: absolute;
-  bottom: -15px;
+  bottom: 25px;
   right: 0;
   zIndex: 1;
   width: max-content;
   height: max-content;
 
-  background: var(--primary-primary-a-100, #ffffff);
+  background: var(--main-background, #ffffff);
   border-radius: 4px;
-  padding: 8px 0px 8px 0px;
+  padding: 8px 0 8px 0;
 
-  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.04),
-  0px 3px 14px 0px rgba(0, 0, 0, 0.08), 0px 8px 10px 0px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.04),
+  0 3px 14px 0 rgba(0, 0, 0, 0.08), 0 8px 10px 0 rgba(0, 0, 0, 0.12);
 
 }
 
@@ -31,7 +31,7 @@
 }
 
 .dropdown-context-menu-tone-menu-item-title {
-  color: var(--secondary-secondary-900, #0b121b);
+  color: var(--main-text, #0b121b);
   text-align: left;
   font: var(--body-body-medium, 400 14px/20px "Roboto", sans-serif);
   position: relative;
@@ -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,9 @@ 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/Dialog/ForwardMessageFlow/DialogsWithSearch/DialogListItem/DialogListItem.scss

@@ -11,7 +11,7 @@
   align-items: center;
   justify-content: flex-start;
   flex-shrink: 0;
-  width: 270px;
+  //width: 270px;
   position: relative;
 
 }
@@ -20,22 +20,15 @@
   width: 40px;
   height: 40px;
   position: relative;
-}
-.dialog-item-element-avatar-rectangle {
-  width: 40px;
-  height: 40px;
-  position: absolute;
-  left: 0px;
-  top: 0px;
-}
-.dialog-item-element-avatar-ellipse {
-  background: var(--disabled-elements, #bcc1c5);
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
   border-radius: 50%;
-  width: 40px;
-  height: 40px;
-  position: absolute;
-  left: 0px;
-  top: 0px;
+  background-color: var(--disabled-elements);
+  color: var(--secondary-text);
+
 }
 .contents-user {
   position: absolute;
@@ -52,20 +45,15 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 200px;
+  @media (max-width: 767px) {
+    width: 120px;
+  }
 }
-.dialog-item-element-checkbox {
-  border-radius: 4px;
-  padding: 4px;
-  display: flex;
-  flex-direction: row;
-  gap: 0px;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 32px;
-  height: 32px;
-  position: relative;
-}
+
 .toggle-check-on {
   align-self: stretch;
   flex: 1;

package/src/Presentation/Views/Dialog/ForwardMessageFlow/DialogsWithSearch/DialogListItem/DialogListItem.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import './DialogListItem.scss';
 import { FunctionTypeStringToVoid } from '../../../../../../CommonTypes/BaseViewModel';
 import { DialogType } from '../../../../../../Domain/entity/DialogTypes';
 import User from '../../../../../components/UI/svgs/Icons/Contents/User';
@@ -7,6 +6,8 @@ import GroupChat from '../../../../../components/UI/svgs/Icons/Contents/GroupCha
 import PublicChannel from '../../../../../components/UI/svgs/Icons/Contents/PublicChannel';
 import UserAvatar from '../../../../EditDialog/UserAvatar/UserAvatar';
 import { IconTheme } from '../../../../../components/UI/svgs/Icons/IconsCommonTypes';
+import CheckBox from '../../../../../ui-components/CheckBox/CheckBox';
+import './DialogListItem.scss';
 
 type DialogListItemProps = {
   name: string;
@@ -74,21 +75,15 @@ const DialogListItem: React.FC<DialogListItemProps> = ({
 }: DialogListItemProps) => {
   return (
     <div className="dialog-item-element">
-      <div className="item-element-avatar">
-        <div className="item-element-avatar-rectangle" />
-        <div className="item-element-avatar-ellipse" />
+      <div className="dialog-item-element-avatar">
         {renderAvatar(avatar, typeDialog)}
       </div>
       <div className="dialog-item-element-subtitle">{name}</div>
-      <div className="dialog-item-element-checkbox">
-        <input
-          type="checkbox"
-          checked={checked}
-          onChange={() => {
-            onSelect(id);
-          }}
-        />
-      </div>
+      <CheckBox
+        onChange={() => onSelect(id)}
+        disabled={false}
+        checked={checked}
+      />
     </div>
   );
 };

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

@@ -33,7 +33,7 @@
 }
 .active-tab-button {
   border-style: solid;
-  border-color: var(--light-theme-mainelements, #3978fc);
+  border-color: var(--main-elements, #3978fc);
   border-width: 0px 0px 3px 0px;
   padding: 8px 16px 8px 16px;
   display: flex;
@@ -46,7 +46,7 @@
   position: relative;
 }
 .active-tab-button-content {
-  color: var(--light-theme-mainelements, #3978fc);
+  color: var(--main-elements, #3978fc);
   text-align: left;
   font: var(--button-default, 700 14px/16px "Roboto", sans-serif);
   position: relative;
@@ -64,7 +64,7 @@
   cursor: pointer;
 }
 .no-active-tab-button-content {
-  color: var(--light-theme-tertiaryelements, #636d78);
+  color: var(--tertiary-elements, #636d78);
   text-align: left;
   font: var(--button-default, 700 14px/16px "Roboto", sans-serif);
   position: relative;
@@ -76,10 +76,10 @@
   overflow: visible;
 }
 .forward-message-flow-message-input {
-  background: var(--light-theme-mainbackground, #ffffff);
+  background: var(--main-background);
   display: flex;
   flex-direction: column;
-  gap: 0px;
+  gap: 0;
   align-items: flex-start;
   justify-content: center;
   align-self: stretch;
@@ -108,7 +108,7 @@
 .caption {
   display: flex;
   flex-direction: row;
-  gap: 0px;
+  gap: 0;
   align-items: flex-start;
   justify-content: flex-start;
   flex-shrink: 0;
@@ -127,7 +127,7 @@
   border-radius: 4px;
   display: flex;
   flex-direction: row;
-  gap: 0px;
+  gap: 0;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
@@ -142,13 +142,13 @@
   overflow: visible;
 }
 .forwarded-from-name {
-  color: var(--light-theme-tertiaryelements, #636d78);
+  color: var(--tertiary-elements, #636d78);
   text-align: left;
   font: var(--label-label-medium, 500 12px/16px "Roboto", sans-serif);
   position: relative;
 }
 .i-like-you-new-presentation-style-it-s-very {
-  color: var(--light-theme-maintext, #0b1b0f);
+  color: var(--main-text, #0b1b0f);
   text-align: center;
   font: var(--body-body-large, 400 16px/24px "Roboto", sans-serif);
   position: relative;

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

@@ -25,6 +25,15 @@
   justify-content: flex-start;
   flex: 1;
   position: relative;
+
+  textarea {
+    overflow: auto;
+    scrollbar-width: none;
+  }
+
+  textarea::-webkit-scrollbar {
+    display: none;
+  }
 }
 .forwarding-message-input-input-type-message {
   color: var(--main-text, #636d78);
@@ -43,6 +52,8 @@
   height: 26px;
   min-height: 26px;
   max-height: 26px;
+
+
 }
 
 .forwarding-message-input-icon-send {

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

@@ -57,7 +57,8 @@ export default function MessageContextMenu({
   }
 
   return (
-    <div>
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    <>
       {enableForwarding || enableReplying ? (
         <Dropdown
           options={options}
@@ -73,6 +74,6 @@ export default function MessageContextMenu({
           <MoreSvg className="message-context-menu-actions__icon" />
         </div>
       )}
-    </div>
+    </>
   );
 }