quickblox-react-ui-kit 0.3.0-beta.3 → 0.3.0

package/src/Presentation/Views/Dialog/AIComponents/AITranslate/AITranslate.tsx

@@ -1,3 +1,4 @@
+import cn from 'classnames';
 import Dropdown from '../../../../ui-components/Dropdown/Dropdown';
 import { ReactComponent as TranslateSvg } from '../../../../icons/actions/translate.svg';
 import { MessageEntity } from '../../../../../Domain/entity/MessageEntity';
@@ -18,6 +19,7 @@ interface AITranslateComponentProps {
   messageToTranslate?: MessageEntity;
   messageHistory?: MessageEntity[];
   currentUserId?: number;
+  disableAction?: boolean;
 }
 
 export default function AITranslate({
@@ -33,11 +35,12 @@ export default function AITranslate({
   messageToTranslate,
   messageHistory,
   currentUserId,
+  disableAction = false,
 }: AITranslateComponentProps) {
   const options = languages.map((lang) => ({ value: lang, label: lang }));
 
   async function translateHandler(translateLanguage: string) {
-    if (loading) {
+    if (loading || disableAction) {
       return;
     }
 
@@ -79,12 +82,14 @@ export default function AITranslate({
   return (
     <div className="ai-translate">
       <div
-        className={
-          loading ? 'translate__caption--disable' : 'ai-translate__caption'
-        }
+        className={cn('ai-translate__caption', {
+          'translate__caption--disable': loading,
+        })}
       >
         <div
-          className="ai-translate__caption__label"
+          className={cn('ai-translate__caption__label', {
+            'ai-translate__caption__label--disable': disableAction,
+          })}
           onClick={() => {
             if (originalTextMessage) {
               translateHandler(defaultLanguage);
@@ -102,13 +107,17 @@ export default function AITranslate({
       <div>
         <Dropdown
           options={options}
-          disabled={loading}
+          disabled={loading || disableAction}
           onSelect={(language) => {
             translateHandler(language);
           }}
         >
           <div className="ai-translate__icon">
-            <TranslateSvg className="ai-translate__icon__media-translate" />
+            <TranslateSvg
+              className={cn('ai-translate__icon__media-translate', {
+                'ai-translate__icon__media-translate--disable': disableAction,
+              })}
+            />
           </div>
         </Dropdown>
       </div>

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

@@ -9,11 +9,16 @@
   margin-bottom: 5px;
 }
 .rephrase-icon{
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
   cursor: pointer;
   fill: var(--color-icon);
 
+  &--disable {
+    cursor: default;
+    fill: var(--disabled-elements);
+  }
+
   svg path{
     fill: var(--color-icon);
   }

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

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import './AIRephraseWidget.scss';
 import { Tone } from 'qb-ai-rephrase/src/Tone';
 import { QBAIRephrase } from 'qb-ai-rephrase';
+import cn from 'classnames';
 import {
   FunctionTypeBooleanToVoid,
   FunctionTypeStringToVoid,
@@ -36,6 +37,7 @@ type AIRephraseWidgetProps = {
   rephraseTones: Tone[];
   theme?: UiKitTheme;
   setPrevValueText: FunctionTypeStringToVoid;
+  disableActions?: boolean;
 };
 // eslint-disable-next-line react/function-component-definition
 const AIRephraseWidget: React.FC<AIRephraseWidgetProps> = ({
@@ -51,6 +53,7 @@ const AIRephraseWidget: React.FC<AIRephraseWidgetProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   theme = undefined,
   setPrevValueText,
+  disableActions = false,
 }: AIRephraseWidgetProps) => {
   const [currentMessageText, setCurrentMessageText] =
     useState<string>(messageText);
@@ -91,7 +94,8 @@ const AIRephraseWidget: React.FC<AIRephraseWidgetProps> = ({
         if (
           currentMessageText &&
           currentMessageText.length > 0 &&
-          !waitAIWidget
+          !waitAIWidget &&
+          !disableActions
         ) {
           setWaitAIWidget(true);
           setPrevTextMessage(currentMessageText);
@@ -153,12 +157,17 @@ const AIRephraseWidget: React.FC<AIRephraseWidgetProps> = ({
         <div
           className="icon"
           style={{
-            cursor: !waitAIWidget ? 'pointer' : '',
+            cursor: !waitAIWidget || !disableActions ? 'pointer' : '',
           }}
         >
           <AIWidgetActions
+            disabled={!disableActions}
             widgetToRender={
-              <RephraseSvg className="rephrase-icon" />
+              <RephraseSvg
+                className={cn('rephrase-icon', {
+                  'rephrase-icon--disable': disableActions,
+                })}
+              />
               // <ToneIcon
               //   width="24"
               //   height="24"

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: 332px;
+  width: 270px;
   position: relative;
 
 }

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

@@ -17,6 +17,7 @@ type ForwardMessageFlowProps = {
     messages: MessageEntity[],
     relatedText: string,
   ) => void;
+  disableActions: boolean;
 };
 
 // eslint-disable-next-line react/function-component-definition
@@ -26,6 +27,7 @@ const ForwardMessageFlow: React.FC<ForwardMessageFlowProps> = ({
   currentDialog,
   currentUserName,
   onSendData,
+  disableActions,
 }: ForwardMessageFlowProps) => {
   const [activeChatsTab, setActiveChatsTab] = useState(true);
   const [selectedDialogs, setSelectedDialogs] = useState<string[]>([]);
@@ -33,11 +35,13 @@ const ForwardMessageFlow: React.FC<ForwardMessageFlowProps> = ({
 
   const userName = currentUserName;
   const sendMessageHandler = () => {
-    const dialogsForSend: DialogEntity[] = dialogs.filter((item) =>
-      selectedDialogs.includes(item.id),
-    );
+    if (!disableActions) {
+      const dialogsForSend: DialogEntity[] = dialogs.filter((item) =>
+        selectedDialogs.includes(item.id),
+      );
 
-    onSendData(dialogsForSend, messages, inputText);
+      onSendData(dialogsForSend, messages, inputText);
+    }
   };
 
   return (
@@ -108,7 +112,7 @@ const ForwardMessageFlow: React.FC<ForwardMessageFlowProps> = ({
           inputText={inputText}
           onChange={(s) => setInputText(s)}
           onSend={sendMessageHandler}
-          disabled={selectedDialogs.length === 0}
+          disabled={selectedDialogs.length === 0 || disableActions}
         />
       </div>
     </div>

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

@@ -47,7 +47,6 @@
 
 .forwarding-message-input-icon-send {
   border-radius: 4px;
-  padding: 4px;
   display: flex;
   flex-direction: row;
   gap: 0px;
@@ -57,6 +56,37 @@
   width: 24px;
   height: 44px;
   position: relative;
+
+  &__icon{
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    fill: var(--secondary-elements);
+    &__send {
+      width: 24px;
+      height: 24px;
+      cursor: pointer;
+      fill: var(--main-elements);
+    }
+
+    svg path{
+      width: 24px;
+      height: 24px;
+      fill: var(--main-elements);
+    }
+  }
+  &__icon--disable{
+    fill: var(--disabled-elements);
+    cursor: default;
+    width: 24px;
+    height: 24px;
+    svg path{
+      width: 24px;
+      height: 24px;
+      fill: var(--disabled-elements);
+    }
+  }
+
 }
 .actions-send {
   flex-shrink: 0;

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

@@ -1,11 +1,10 @@
-import React from 'react';
-import './InputForForwarding.scss';
+import cn from 'classnames';
 import {
   FunctionTypeStringToVoid,
   FunctionTypeVoidToVoid,
 } from '../../../../../CommonTypes/BaseViewModel';
-import ActiveSvg from '../../../../components/UI/svgs/ActiveSvg/ActiveSvg';
-import SendIcon from '../../../../components/UI/svgs/Icons/Actions/Send';
+import { SendSvg } from '../../../../icons';
+import './InputForForwarding.scss';
 
 type InputForForwardingProps = {
   inputText: string;
@@ -34,10 +33,11 @@ const InputForForwarding: React.FC<InputForForwardingProps> = ({
         />
       </div>
       <div className="forwarding-message-input-icon-send">
-        <ActiveSvg
-          content={<SendIcon width="24" height="24" />}
+        <SendSvg
+          className={cn('forwarding-message-input-icon-send__icon__send', {
+            'forwarding-message-input-icon-send__icon--disable': disabled,
+          })}
           onClick={onSend}
-          disabled={disabled}
         />
       </div>
     </div>

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

@@ -11,6 +11,7 @@ export type MessageContextMenuProps = {
   enableReplying: boolean;
   onReply: FunctionTypeMessageEntityToVoid;
   onForward: FunctionTypeMessageEntityToVoid;
+  disableActions?: boolean;
 };
 
 export default function MessageContextMenu({
@@ -19,22 +20,32 @@ export default function MessageContextMenu({
   enableForwarding,
   onReply,
   onForward,
+  disableActions = false,
 }: MessageContextMenuProps) {
   function selectHandler(value: string) {
-    if (value === 'Reply' && enableReplying) {
-      onReply(message);
-    }
-    if (value === 'Forward' && enableForwarding) {
-      onForward(message);
+    if (!disableActions) {
+      if (value === 'Reply' && enableReplying) {
+        onReply(message);
+      }
+      if (value === 'Forward' && enableForwarding) {
+        onForward(message);
+      }
     }
   }
 
+  // const [disabled, setDisabled] = useState(disableActions);
+
+  // useEffect(() => {
+  //   setDisabled(disableActions);
+  // }, [disableActions]);
+
   const options: Option[] = [];
 
   if (enableReplying) {
     options.push({
       value: 'Reply',
       label: 'Reply',
+      disabled: disableActions,
     });
   }
 
@@ -50,7 +61,7 @@ export default function MessageContextMenu({
       {enableForwarding || enableReplying ? (
         <Dropdown
           options={options}
-          disabled={false}
+          disabled={disableActions}
           onSelect={(value) => selectHandler(value)}
         >
           <div className="message-context-menu-actions">

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

@@ -32,6 +32,7 @@ export type MessageItemProps = {
   listRef?: RefObject<HTMLDivElement>;
   messagesToView: MessageEntity[];
   onError: (messageError: string) => void;
+  disableAction?: boolean;
 };
 
 interface MessageStates {
@@ -79,6 +80,7 @@ export default function MessageItem({
   defaultTranslationLanguage,
   languagesForAITranslate,
   onError,
+  disableAction = false,
 }: MessageItemProps) {
   const messageStates: Record<string, MessageStates> = {};
 
@@ -152,6 +154,7 @@ export default function MessageItem({
           onForward={onForward}
           enableReplying={enableReplying}
           enableForwarding={enableForwarding}
+          disableActions={disableAction}
         />
         {currentMessageType === 'incoming' && state[item.id]?.loading && (
           <Loader size="sm" className="message-item-additional-part__loader" />
@@ -160,6 +163,7 @@ export default function MessageItem({
           !(item.attachments && item.attachments.length > 0) &&
           AIAssistWidget && (
             <AIAssist
+              disableAction={disableAction}
               AIAssistWidget={AIAssistWidget}
               loading={
                 state[item.id] && state[item.id].loading
@@ -204,6 +208,7 @@ export default function MessageItem({
                     nestedMessage.attachments.length > 0
                   ) && AITranslateWidget ? (
                     <AITranslate
+                      disableAction={disableAction}
                       AITranslateWidget={AITranslateWidget}
                       defaultLanguage={defaultTranslationLanguage}
                       languages={languagesForAITranslate}
@@ -306,6 +311,7 @@ export default function MessageItem({
               !(message.attachments && message.attachments.length > 0) &&
               AITranslateWidget ? (
                 <AITranslate
+                  disableAction={disableAction}
                   AITranslateWidget={AITranslateWidget}
                   defaultLanguage={defaultTranslationLanguage}
                   languages={languagesForAITranslate}

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

@@ -227,6 +227,7 @@ export default function useDialogViewModel(
           dialogInfo.messageStatus.messageId?.length > 0 &&
           dialogInfo.messageStatus.dialogId === dialog?.id
         ) {
+          setTypingText('');
           setMessages((prevState) => {
             let newState = [...prevState];
 

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

@@ -112,6 +112,11 @@ $dialog-information-container-dialog-information-height: 64px;
   text-align: left;
   font: var(--button-default);
   position: relative;
+
+  &--disable {
+    color: var(--disabled-elements);
+    cursor: default;
+  }
 }
 
 .dialog-info-action-wrapper-settings,
@@ -202,8 +207,13 @@ $dialog-information-container-dialog-information-height: 64px;
 
 .dialog-info-leave {
   fill: var(--error);
-
   border-bottom: 1px solid var(--divider);
+  cursor: pointer;
+
+   &--disable {
+     fill: var(--disabled-elements);
+     cursor: default;
+   }
 }
 
 .dialog-info-members {

package/src/Presentation/Views/DialogInfo/DialogInfo.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import './DialogInfo.scss';
 import { toast } from 'react-toastify';
+import cn from 'classnames';
 import ColumnContainer from '../../components/containers/ColumnContainer/ColumnContainer';
 import { DialogEntity } from '../../../Domain/entity/DialogEntity';
 import GroupChat from '../../components/UI/svgs/Icons/Contents/GroupChat';
@@ -40,6 +41,7 @@ type HeaderDialogsProps = {
   subHeaderContent?: React.ReactNode;
   upHeaderContent?: React.ReactNode;
   rootStyles?: React.CSSProperties;
+  disableAction?: boolean;
 };
 // eslint-disable-next-line react/function-component-definition
 const DialogInfo: React.FC<HeaderDialogsProps> = ({
@@ -53,6 +55,7 @@ const DialogInfo: React.FC<HeaderDialogsProps> = ({
   subHeaderContent = undefined,
   upHeaderContent = undefined,
   rootStyles = {},
+  disableAction = false,
 }: HeaderDialogsProps) => {
   const [dialogAvatarUrl, setDialogAvatarUrl] = useState('');
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -73,19 +76,21 @@ const DialogInfo: React.FC<HeaderDialogsProps> = ({
   const useUpContent = upHeaderContent || false;
 
   const leaveDialogHandler = () => {
-    // onLeaveDialog((dialogViewModel?.entity || dialog) as GroupDialogEntity);
-    dialogViewModel
-      .deleteDialog((dialogViewModel?.entity || dialog) as GroupDialogEntity)
-      .then((result) => {
-        // eslint-disable-next-line promise/always-return
-        if (!result) {
-          toast('Dialog have not been left');
-        }
-      })
-      .catch((e) => {
-        console.log(e);
-        toast("Can't leave dialog");
-      });
+    if (!disableAction) {
+      // onLeaveDialog((dialogViewModel?.entity || dialog) as GroupDialogEntity);
+      dialogViewModel
+        .deleteDialog((dialogViewModel?.entity || dialog) as GroupDialogEntity)
+        .then((result) => {
+          // eslint-disable-next-line promise/always-return
+          if (!result) {
+            toast('Dialog have not been left');
+          }
+        })
+        .catch((e) => {
+          console.log(e);
+          toast("Can't leave dialog");
+        });
+    }
   };
 
   const getUserAvatarByUid = async () => {
@@ -345,8 +350,17 @@ const DialogInfo: React.FC<HeaderDialogsProps> = ({
           <div className="dialog-information-profile-edit">
             {dialog.type !== DialogType.private &&
             dialog.ownerId === currentUserId ? (
-              <div className="dialog-information-profile-edit-button">
-                <Button variant="text" onClick={editModal.toggleModal}>
+              <div
+                className={cn('dialog-information-profile-edit-button', {
+                  'dialog-information-profile-edit-button--disable':
+                    disableAction,
+                })}
+              >
+                <Button
+                  variant="text"
+                  onClick={editModal.toggleModal}
+                  disabled={disableAction}
+                >
                   Edit
                 </Button>
                 <DialogWindow
@@ -355,6 +369,7 @@ const DialogInfo: React.FC<HeaderDialogsProps> = ({
                   open={editModal.isOpen}
                 >
                   <EditDialog
+                    disableActions={disableAction}
                     nameDialog={dialogViewModel?.entity.name || dialog.name}
                     typeDialog={dialogViewModel?.entity.type || dialog.type}
                     ulrIcon={getUrlAvatar(dialogViewModel?.entity || dialog)}
@@ -387,6 +402,7 @@ const DialogInfo: React.FC<HeaderDialogsProps> = ({
               )}
               <div className="dialog-info-action-wrapper-settings">
                 <DialogWindow
+                  disableActions={disableAction}
                   title="Edit dialog"
                   open={inviteMembersModal.isOpen}
                   onClose={inviteMembersModal.toggleModal}
@@ -406,7 +422,7 @@ const DialogInfo: React.FC<HeaderDialogsProps> = ({
                   className="dialog-info-action-wrapper-button"
                   onClick={inviteMembersModal.toggleModal}
                   variant="outlined"
-                  disabled={dialog.ownerId !== currentUserId}
+                  disabled={dialog.ownerId !== currentUserId || disableAction}
                 >
                   Invite members
                 </Button>
@@ -425,8 +441,10 @@ const DialogInfo: React.FC<HeaderDialogsProps> = ({
         <SettingsItem
           icon={<LeaveSvg />}
           title="Leave dialog"
-          onClick={leaveModal.toggleModal}
-          className="dialog-info-leave"
+          onClick={!disableAction ? leaveModal.toggleModal : undefined}
+          className={cn('dialog-info-leave', {
+            'dialog-info-leave--disable': disableAction,
+          })}
         />
         <DialogWindow
           open={leaveModal.isOpen}

package/src/Presentation/Views/DialogInfo/UsersList/useUsersListViewModel.ts

@@ -112,6 +112,7 @@ export default function useUsersListViewModel(
     },
     set entity(newDialog) {
       setDialog(newDialog);
+      getUsers().catch();
     },
     users,
     loading,

package/src/Presentation/Views/DialogList/DialogList.scss

@@ -19,6 +19,11 @@ $header-container-height: 64px;
     cursor: pointer;
     fill: var(--color-icon);
 
+    &--disable {
+      cursor: default;
+      fill: var(--disabled-elements);
+    }
+
     svg path {
       fill: var(--color-icon);
     }

package/src/Presentation/Views/DialogList/DialogList.tsx

@@ -46,6 +46,7 @@ type DialogsProps = {
   onCreateDialog?: FunctionTypeVoidToVoid;
   dialogListViewModel: DialogListViewModel;
   additionalSettings?: DialogsComponentSettings;
+  disableAction?: boolean;
   scrollableHeight?: number;
 };
 
@@ -60,6 +61,7 @@ const DialogList: React.FC<DialogsProps> = ({
   onCreateDialog,
   dialogListViewModel,
   additionalSettings = undefined,
+  disableAction = false,
   scrollableHeight = 736,
 }: DialogsProps) => {
   const dialogs: PreviewDialogViewModel[] = [];
@@ -146,6 +148,12 @@ const DialogList: React.FC<DialogsProps> = ({
     }
   };
 
+  const onClickHandler = () => {
+    if (!disableAction && onCreateDialog) {
+      onCreateDialog();
+    }
+  };
+
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const useHeader = !additionalSettings?.withoutHeader || header || false;
   const useSubContent =
@@ -163,8 +171,10 @@ const DialogList: React.FC<DialogsProps> = ({
         }}
       />
       <NewChatSvg
-        className="dialog-list-header__icons"
-        onClick={onCreateDialog}
+        className={cn('dialog-list-header__icons', {
+          'dialog-list-header__icons--disable': disableAction,
+        })}
+        onClick={onClickHandler}
       />
     </Header>
   );

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

@@ -117,9 +117,10 @@ export default function useDialogListViewModel(
         );
 
         const sortedData = [...filteredDialogs].sort((a, b) => {
-          return (
-            new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
-          );
+          return b.lastMessage.dateSent && a.lastMessage.dateSent
+            ? new Date(b.lastMessage.dateSent).getTime() -
+                new Date(a.lastMessage.dateSent).getTime()
+            : new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
         });
 
         setDialogs([...sortedData]);
@@ -137,9 +138,10 @@ export default function useDialogListViewModel(
     await useCaseSubscribeToDialogsUpdates?.execute((data) => {
       try {
         const sortedData = [...(data as PublicDialogEntity[])].sort((a, b) => {
-          return (
-            new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
-          );
+          return b.lastMessage.dateSent && a.lastMessage.dateSent
+            ? new Date(b.lastMessage.dateSent).getTime() -
+                new Date(a.lastMessage.dateSent).getTime()
+            : new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
         });
 
         setDialogs(sortedData);
@@ -174,9 +176,12 @@ export default function useDialogListViewModel(
               dialogId,
             );
 
-          // eslint-disable-next-line promise/catch-or-return,promise/always-return
+          // eslint-disable-next-line promise/catch-or-return
           getDialogByIdUseCase.execute().then((updatedDialog) => {
-            setNewDialog(updatedDialog);
+            // eslint-disable-next-line promise/always-return
+            if (newDialog && newDialog.id === updatedDialog.id) {
+              setNewDialog(updatedDialog);
+            }
           });
         }
       } else if (
@@ -226,10 +231,11 @@ export default function useDialogListViewModel(
                 ];
 
                 const sortedData = [...newDialogs].sort((a, b) => {
-                  return (
-                    new Date(b.updatedAt).getTime() -
-                    new Date(a.updatedAt).getTime()
-                  );
+                  return b.lastMessage.dateSent && a.lastMessage.dateSent
+                    ? new Date(b.lastMessage.dateSent).getTime() -
+                        new Date(a.lastMessage.dateSent).getTime()
+                    : new Date(b.updatedAt).getTime() -
+                        new Date(a.updatedAt).getTime();
                 });
 
                 return sortedData;
@@ -237,7 +243,10 @@ export default function useDialogListViewModel(
               //
             })
             .catch((e) => {
-              console.log('Error getDialogByIdUseCase: ', stringifyError(e));
+              console.log(
+                'Error getDialogByIdUseCase in useDialogListViewModel: ',
+                stringifyError(e),
+              );
             });
         }
         // getDialogs(pagination).catch();
@@ -254,11 +263,19 @@ export default function useDialogListViewModel(
           });
 
           const sortedData = [...newDialogs].sort((a, b) => {
-            return (
-              new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
-            );
+            return b.lastMessage.dateSent && a.lastMessage.dateSent
+              ? new Date(b.lastMessage.dateSent).getTime() -
+                  new Date(a.lastMessage.dateSent).getTime()
+              : new Date(b.updatedAt).getTime() -
+                  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;
         });
       }