quickblox-react-ui-kit 0.2.2 → 0.2.4

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

@@ -1,5 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import './MessagesView.scss';
+import { QBAIRephrase } from 'qb-ai-rephrase';
+import { Tone } from 'qb-ai-rephrase/src/Tone';
 import { DialogEntity } from '../../../../../Domain/entity/DialogEntity';
 import useQBConnection from '../../../providers/QuickBloxUIKitProvider/useQBConnection';
 import ScrollableContainer from '../../../containers/ScrollableContainer/ScrollableContainer';
@@ -44,10 +46,8 @@ import UiKitTheme from '../../../../assets/UiKitTheme';
 import { AIMessageWidget } from './AIWidgets/AIMessageWidget';
 import { DialogsViewModel } from '../../../../Views/Dialogs/DialogViewModel';
 import { HighLightLink, messageHasUrls } from './HighLightLink/HighLightLink';
-import { loopToLimitTokens } from '../../../../../utils/utils';
 import { OutGoingMessage } from './OutGoingMessage/OutGoingMessage';
 import { InComingMessage } from './InComingMessage/InComingMessage';
-import { Tone } from './AIWidgets/Tone';
 import NecktieIcon from '../../svgs/Icons/AIWidgets/NecktieIcon';
 import HandshakeIcon from '../../svgs/Icons/AIWidgets/HandshakeIcon';
 import WhiteCheckMarkIcon from '../../svgs/Icons/AIWidgets/WhiteCheckMarkIcon';
@@ -60,9 +60,13 @@ import PointUpIcon from '../../svgs/Icons/AIWidgets/PointUpIcon';
 import SmirkIcon from '../../svgs/Icons/AIWidgets/SmirkIcon';
 import PerformingArtsIcon from '../../svgs/Icons/AIWidgets/PerformingArtsIcon';
 import { FunctionTypeVoidToVoid } from '../../../../Views/Base/BaseViewModel';
-import { IChatMessage } from '../../../../../Data/source/AISource';
-// import ToneIcon from '../../svgs/Icons/Actions/Tone';
-// import AIWidgetActions from './AIWidgets/AIWidgetActions/AIWidgetActions';
+import AIWidgetActions, {
+  MenuItem,
+} from './AIWidgets/AIWidgetActions/AIWidgetActions';
+import ToneIcon from '../../svgs/Icons/Actions/Tone';
+import DefaultAttachmentComponent from './DefaultAttachmentComponent/DefaultAttachmentComponent';
+import { AIUtils } from '../../../../../utils/utils';
+import { ErrorToast } from './ErrorToast/ErrorToast';
 
 type HeaderDialogsMessagesProps = {
   AIRephrase?: AIMessageWidget;
@@ -112,32 +116,18 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
   const [messagesToView, setMessagesToView] = React.useState<MessageEntity[]>(
     [],
   );
+  const [showErrorToast, setShowErrorToast] = useState<boolean>(true);
+  const [messageErrorToast, setMessageErrorToast] = useState<string>('');
 
   const [waitAIWidget, setWaitAIWidget] = useState<boolean>(false);
-  const messageEntitiesToIChatMessageCollection = (
-    messageEntities: MessageEntity[],
-  ): IChatMessage[] => {
-    const MAX_TOKENS = 3584;
-    const items = messageEntities.filter(
-      (it) =>
-        !it.notification_type ||
-        (it.notification_type && it.notification_type.length === 0),
-    );
-    const messages = loopToLimitTokens(
-      MAX_TOKENS,
-      items,
-      ({ message }) => message || '',
-    ).reverse();
-    const chatCompletionMessages: IChatMessage[] = messages.map(
-      ({ message, sender_id }) => ({
-        role: sender_id === currentUserId ? 'user' : 'assistant',
-        content: message,
-      }),
-    );
+  const [prevTextMessage, setPrevTextMessage] = useState<string>('');
 
-    //
-    return chatCompletionMessages;
-  };
+  const maxTokensForAIRephrase =
+    currentContext.InitParams.qbConfig.configAIApi.AIRephraseWidgetConfig
+      .maxTokens;
+
+  const rephraseTones: Tone[] =
+    currentContext.InitParams.qbConfig.configAIApi.AIRephraseWidgetConfig.Tones;
 
   const messagesViewModel: MessagesViewModel = useMessagesViewModel(
     dialogsViewModel.entity?.type,
@@ -146,6 +136,15 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
 
   const { maxFileSize } = currentContext.InitParams;
 
+  useEffect(() => {
+    if (showErrorToast) {
+      setTimeout(() => {
+        setShowErrorToast(false);
+        setMessageErrorToast('');
+      }, 1800);
+    }
+  }, [showErrorToast]);
+
   useEffect(() => {
     console.log('HAVE NEW DIALOG');
     // messagesViewModel.getMessages(new Pagination());
@@ -280,7 +279,11 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
       let messageContent: JSX.Element = messageText;
 
       const attachmentContentRender = (att: ChatMessageAttachmentEntity) => {
-        let contentPlaceHolder: JSX.Element = <div>{att.type.toString()}</div>;
+        // let contentPlaceHolder: JSX.Element = <div>{att.type.toString()}</div>;
+
+        let contentPlaceHolder: JSX.Element = (
+          <DefaultAttachmentComponent fileName={att.file?.name || ''} />
+        );
 
         if (att.type.toString().includes(FileType.video)) {
           contentPlaceHolder = att.file ? (
@@ -305,9 +308,10 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
         }
         if (att.type.toString().includes(FileType.text)) {
           contentPlaceHolder = att.file ? (
-            <div>TEXT</div>
+            // <div>TEXT</div>
+            <DefaultAttachmentComponent fileName={att.file.name || ''} />
           ) : (
-            <ImageFile applyZoom />
+            <ImageFile width="24" height="24" applyZoom />
           );
         }
         let contentResult: JSX.Element = (
@@ -378,10 +382,16 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
           senderName={getSenderName(message.sender)}
           message={message}
           // element={messageContentRender(message)}
-          onLoader={() => {
-            // sendMessageToTranslate(message);
+          onStartLoader={() => {
             setWaitAIWidget(true);
           }}
+          onStopLoader={() => {
+            setWaitAIWidget(false);
+          }}
+          onErrorToast={(messageError) => {
+            setShowErrorToast(true);
+            setMessageErrorToast(messageError);
+          }}
           // renderWidget={
           //   <ContextMenu
           //     widgetToRender={
@@ -537,31 +547,29 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/require-await
   const startRecording = async () => {
     if (!stream) return;
-    // const mimeTypes = [
-    //   'audio/aac',
-    //   'audio/mp4',
-    //   'audio/mpeg',
-    //   'audio/ogg',
-    //   'audio/wav',
-    //   'audio/webm',
-    //   'audio/3gpp',
-    //   'audio/flac',
-    //   'audio/x-aiff',
-    //   'audio/x-m4a',
-    // ];
-    //
-    // console.log('MIME TYPES: ');
-    // mimeTypes.forEach((mimeType) => {
-    //   if (MediaRecorder.isTypeSupported(mimeType)) {
-    //     console.log(`${mimeType} is supported`);
-    //   } else {
-    //     console.log(`${mimeType} is not supported`);
-    //   }
-    // });
+    const mimeTypes = [
+      'audio/aac',
+      'audio/mp4',
+      'audio/mpeg',
+      'audio/ogg',
+      'audio/wav',
+      'audio/webm',
+      'audio/3gpp',
+      'audio/flac',
+      'audio/x-aiff',
+      'audio/x-m4a',
+    ];
+
+    console.log('MIME TYPES: ');
+    mimeTypes.forEach((mType) => {
+      if (MediaRecorder.isTypeSupported(mimeType)) {
+        console.log(`${mType} is supported`);
+      } else {
+        console.log(`${mType} is not supported`);
+      }
+    });
     // audio/mp4;codecs=mp4a audio/webm;codecs=opus audio/webm;codecs=vp9,opus
-    const mimeContent = window.MediaRecorder.isTypeSupported(
-      'audio/mp4;codecs=mp4a',
-    )
+    const mimeContent = window.MediaRecorder.isTypeSupported('audio/mp4')
       ? 'audio/mp4;codecs=mp4a'
       : 'audio/webm;codecs=opus';
 
@@ -602,7 +610,8 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
       // const mp4Blob = new Blob(recordedChunks, { type: 'video/mp4' });
 
       // const audioBlob = new Blob(audioChunks, { type: 'video/mp4' }); // mimeType
-      const audioBlob = new Blob(audioChunks, { type: 'audio/mp4' }); // mimeType
+      // const audioBlob = new Blob(audioChunks, { type: 'audio/mp4' }); // mimeType
+      const audioBlob = new Blob(audioChunks, { type: 'audio/mp4' });
 
       setResultAudioBlob(audioBlob);
 
@@ -752,163 +761,493 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
   const useUpContent = upHeaderContent || false;
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // function getAIEditingMessagesItems() {
+  //   return [
+  //     {
+  //       title: 'Professional Tone',
+  //       icon: <NecktieIcon />,
+  //       action: () => {
+  //         if (messageText && messageText.length > 0 && !waitAIWidget) {
+  //           setWaitAIWidget(true);
+  //           AIRephrase?.textToWidget(
+  //             messageText,
+  //             AIUtils.messageEntitiesToIChatMessageCollection(
+  //               messagesToView,
+  //               currentUserId,
+  //               maxTokensForAIRephrase,
+  //             ),
+  //             {
+  //               tone: QBAIRephrase.defaultTones()[0],
+  //               // tone: {
+  //               //   name: 'Professional Tone',
+  //               //   description: '',
+  //               //   iconEmoji: '',
+  //               // },
+  //             },
+  //           )
+  //             .then((answerText) => {
+  //               // eslint-disable-next-line promise/always-return
+  //               if (answerText === 'Rephrase failed.') {
+  //                 setMessageErrorToast('Rephrase failed.');
+  //                 setShowErrorToast(true);
+  //               }
+  //               setWaitAIWidget(false);
+  //             })
+  //             .catch(() => {
+  //               setMessageErrorToast('Rephrase failed.');
+  //               setShowErrorToast(true);
+  //               setWaitAIWidget(false);
+  //             });
+  //         }
+  //       },
+  //     },
+  //     {
+  //       title: 'Friendly Tone',
+  //       icon: <HandshakeIcon />,
+  //       action: () => {
+  //         if (messageText && messageText.length > 0 && !waitAIWidget) {
+  //           setWaitAIWidget(true);
+  //           AIRephrase?.textToWidget(
+  //             messageText,
+  //             AIUtils.messageEntitiesToIChatMessageCollection(
+  //               messagesToView,
+  //               currentUserId,
+  //               maxTokensForAIRephrase,
+  //             ),
+  //             {
+  //               // tone: { name: 'Friendly Tone', description: '', iconEmoji: '' },
+  //               tone: QBAIRephrase.defaultTones()[1],
+  //             },
+  //           )
+  //             .then((answerText) => {
+  //               // eslint-disable-next-line promise/always-return
+  //               if (answerText === 'Rephrase failed.') {
+  //                 setMessageErrorToast('Rephrase failed.');
+  //                 setShowErrorToast(true);
+  //               }
+  //               setWaitAIWidget(false);
+  //             })
+  //             .catch(() => {
+  //               setMessageErrorToast('Rephrase failed.');
+  //               setShowErrorToast(true);
+  //               setWaitAIWidget(false);
+  //             });
+  //         }
+  //       },
+  //     },
+  //     {
+  //       title: 'Encouraging Tone',
+  //       icon: <MuscleIcon />,
+  //       action: () => {
+  //         if (messageText && messageText.length > 0 && !waitAIWidget) {
+  //           setWaitAIWidget(true);
+  //           AIRephrase?.textToWidget(
+  //             messageText,
+  //             AIUtils.messageEntitiesToIChatMessageCollection(
+  //               messagesToView,
+  //               currentUserId,
+  //               maxTokensForAIRephrase,
+  //             ),
+  //             {
+  //               tone: QBAIRephrase.defaultTones()[2],
+  //               // tone: {
+  //               //   name: 'Encouraging Tone',
+  //               //   description: '',
+  //               //   iconEmoji: '',
+  //               // },
+  //             },
+  //           )
+  //             .then((answerText) => {
+  //               // eslint-disable-next-line promise/always-return
+  //               if (answerText === 'Rephrase failed.') {
+  //                 setMessageErrorToast('Rephrase failed.');
+  //                 setShowErrorToast(true);
+  //               }
+  //               setWaitAIWidget(false);
+  //             })
+  //             .catch(() => {
+  //               setMessageErrorToast('Rephrase failed.');
+  //               setShowErrorToast(true);
+  //               setWaitAIWidget(false);
+  //             });
+  //         }
+  //       },
+  //     },
+  //     {
+  //       title: 'Empathetic Tone',
+  //       icon: <PalmsUpTogetherIcon />,
+  //       action: () => {
+  //         if (messageText && messageText.length > 0 && !waitAIWidget) {
+  //           setWaitAIWidget(true);
+  //           AIRephrase?.textToWidget(
+  //             messageText,
+  //             AIUtils.messageEntitiesToIChatMessageCollection(
+  //               messagesToView,
+  //               currentUserId,
+  //               maxTokensForAIRephrase,
+  //             ),
+  //             {
+  //               tone: QBAIRephrase.defaultTones()[3],
+  //               // tone: {
+  //               //   name: 'Empathetic Tone',
+  //               //   description: '',
+  //               //   iconEmoji: '',
+  //               // },
+  //             },
+  //           )
+  //             .then((answerText) => {
+  //               // eslint-disable-next-line promise/always-return
+  //               if (answerText === 'Rephrase failed.') {
+  //                 setMessageErrorToast('Rephrase failed.');
+  //                 setShowErrorToast(true);
+  //               }
+  //               setWaitAIWidget(false);
+  //             })
+  //             .catch(() => {
+  //               setMessageErrorToast('Rephrase failed.');
+  //               setShowErrorToast(true);
+  //               setWaitAIWidget(false);
+  //             });
+  //         }
+  //       },
+  //     },
+  //     {
+  //       title: 'Neutral Tone',
+  //       icon: <NeutralFaceIcon />,
+  //       action: () => {
+  //         if (messageText && messageText.length > 0 && !waitAIWidget) {
+  //           setWaitAIWidget(true);
+  //           AIRephrase?.textToWidget(
+  //             messageText,
+  //             AIUtils.messageEntitiesToIChatMessageCollection(
+  //               messagesToView,
+  //               currentUserId,
+  //               maxTokensForAIRephrase,
+  //             ),
+  //             {
+  //               // tone: { name: 'Neutral Tone', description: '', iconEmoji: '' },
+  //               tone: QBAIRephrase.defaultTones()[4],
+  //             },
+  //           )
+  //             .then((answerText) => {
+  //               // eslint-disable-next-line promise/always-return
+  //               if (answerText === 'Rephrase failed.') {
+  //                 setMessageErrorToast('Rephrase failed.');
+  //                 setShowErrorToast(true);
+  //               }
+  //               setWaitAIWidget(false);
+  //             })
+  //             .catch(() => {
+  //               setMessageErrorToast('Rephrase failed.');
+  //               setShowErrorToast(true);
+  //               setWaitAIWidget(false);
+  //             });
+  //         }
+  //       },
+  //     },
+  //     {
+  //       title: 'Assertive Tone',
+  //       icon: <HammerIcon />,
+  //       action: () => {
+  //         if (messageText && messageText.length > 0 && !waitAIWidget) {
+  //           setWaitAIWidget(true);
+  //           AIRephrase?.textToWidget(
+  //             messageText,
+  //             AIUtils.messageEntitiesToIChatMessageCollection(
+  //               messagesToView,
+  //               currentUserId,
+  //               maxTokensForAIRephrase,
+  //             ),
+  //             {
+  //               tone: QBAIRephrase.defaultTones()[5],
+  //               // tone: {
+  //               //   name: 'Assertive Tone',
+  //               //   description: '',
+  //               //   iconEmoji: '',
+  //               // },
+  //             },
+  //           )
+  //             .then((answerText) => {
+  //               // eslint-disable-next-line promise/always-return
+  //               if (answerText === 'Rephrase failed.') {
+  //                 setMessageErrorToast('Rephrase failed.');
+  //                 setShowErrorToast(true);
+  //               }
+  //               setWaitAIWidget(false);
+  //             })
+  //             .catch(() => {
+  //               setMessageErrorToast('Rephrase failed.');
+  //               setShowErrorToast(true);
+  //               setWaitAIWidget(false);
+  //             });
+  //         }
+  //       },
+  //     },
+  //     {
+  //       title: 'Instructive Tone',
+  //       icon: <BookIcon />,
+  //       action: () => {
+  //         if (messageText && messageText.length > 0 && !waitAIWidget) {
+  //           setWaitAIWidget(true);
+  //           AIRephrase?.textToWidget(
+  //             messageText,
+  //             AIUtils.messageEntitiesToIChatMessageCollection(
+  //               messagesToView,
+  //               currentUserId,
+  //               maxTokensForAIRephrase,
+  //             ),
+  //             {
+  //               tone: QBAIRephrase.defaultTones()[6],
+  //               // tone: {
+  //               //   name: 'Instructive Tone',
+  //               //   description: '',
+  //               //   iconEmoji: '',
+  //               // },
+  //             },
+  //           )
+  //             .then((answerText) => {
+  //               // eslint-disable-next-line promise/always-return
+  //               if (answerText === 'Rephrase failed.') {
+  //                 setMessageErrorToast('Rephrase failed.');
+  //                 setShowErrorToast(true);
+  //               }
+  //               setWaitAIWidget(false);
+  //             })
+  //             .catch(() => {
+  //               setMessageErrorToast('Rephrase failed.');
+  //               setShowErrorToast(true);
+  //               setWaitAIWidget(false);
+  //             });
+  //         }
+  //       },
+  //     },
+  //     {
+  //       title: 'Persuasive Tone',
+  //       icon: <PointUpIcon />,
+  //       action: () => {
+  //         if (messageText && messageText.length > 0 && !waitAIWidget) {
+  //           setWaitAIWidget(true);
+  //           AIRephrase?.textToWidget(
+  //             messageText,
+  //             AIUtils.messageEntitiesToIChatMessageCollection(
+  //               messagesToView,
+  //               currentUserId,
+  //               maxTokensForAIRephrase,
+  //             ),
+  //             {
+  //               tone: QBAIRephrase.defaultTones()[7],
+  //               // tone: {
+  //               //   name: 'Persuasive Tone',
+  //               //   description: '',
+  //               //   iconEmoji: '',
+  //               // },
+  //             },
+  //           )
+  //             .then((answerText) => {
+  //               // eslint-disable-next-line promise/always-return
+  //               if (answerText === 'Rephrase failed.') {
+  //                 setMessageErrorToast('Rephrase failed.');
+  //                 setShowErrorToast(true);
+  //               }
+  //               setWaitAIWidget(false);
+  //             })
+  //             .catch(() => {
+  //               setMessageErrorToast('Rephrase failed.');
+  //               setShowErrorToast(true);
+  //               setWaitAIWidget(false);
+  //             });
+  //         }
+  //       },
+  //     },
+  //     {
+  //       title: 'Sarcastic/Ironic Tone',
+  //       icon: <SmirkIcon />,
+  //       action: () => {
+  //         if (messageText && messageText.length > 0 && !waitAIWidget) {
+  //           setWaitAIWidget(true);
+  //           AIRephrase?.textToWidget(
+  //             messageText,
+  //             AIUtils.messageEntitiesToIChatMessageCollection(
+  //               messagesToView,
+  //               currentUserId,
+  //               maxTokensForAIRephrase,
+  //             ),
+  //             {
+  //               tone: QBAIRephrase.defaultTones()[8],
+  //               // tone: {
+  //               //   name: 'Sarcastic/Ironic Tone',
+  //               //   description: '',
+  //               //   iconEmoji: '',
+  //               // },
+  //             },
+  //           )
+  //             .then((answerText) => {
+  //               // eslint-disable-next-line promise/always-return
+  //               if (answerText === 'Rephrase failed.') {
+  //                 setMessageErrorToast('Rephrase failed.');
+  //                 setShowErrorToast(true);
+  //               }
+  //               setWaitAIWidget(false);
+  //             })
+  //             .catch(() => {
+  //               setMessageErrorToast('Rephrase failed.');
+  //               setShowErrorToast(true);
+  //               setWaitAIWidget(false);
+  //             });
+  //         }
+  //       },
+  //     },
+  //     {
+  //       title: 'Poetic Tone',
+  //       icon: <PerformingArtsIcon />,
+  //       action: () => {
+  //         if (messageText && messageText.length > 0 && !waitAIWidget) {
+  //           setWaitAIWidget(true);
+  //           AIRephrase?.textToWidget(
+  //             messageText,
+  //             AIUtils.messageEntitiesToIChatMessageCollection(
+  //               messagesToView,
+  //               currentUserId,
+  //               maxTokensForAIRephrase,
+  //             ),
+  //             {
+  //               tone: QBAIRephrase.defaultTones()[9],
+  //               // tone: { name: 'Poetic Tone', description: '', iconEmoji: '' }
+  //             },
+  //           )
+  //             .then((answerText) => {
+  //               // eslint-disable-next-line promise/always-return
+  //               if (answerText === 'Rephrase failed.') {
+  //                 setMessageErrorToast('Rephrase failed.');
+  //                 setShowErrorToast(true);
+  //               }
+  //               setWaitAIWidget(false);
+  //             })
+  //             .catch(() => {
+  //               setMessageErrorToast('Rephrase failed.');
+  //               setShowErrorToast(true);
+  //               setWaitAIWidget(false);
+  //             });
+  //         }
+  //       },
+  //     },
+  //     {
+  //       title: 'Back to original text',
+  //       icon: <WhiteCheckMarkIcon />,
+  //       action: () => {
+  //         if (messageText && messageText.length > 0 && !waitAIWidget) {
+  //           setWaitAIWidget(true);
+  //           AIRephrase?.textToWidget(
+  //             messageText,
+  //             AIUtils.messageEntitiesToIChatMessageCollection(
+  //               messagesToView,
+  //               currentUserId,
+  //               maxTokensForAIRephrase,
+  //             ),
+  //             {
+  //               tone: {
+  //                 name: 'Unchanged',
+  //                 description: 'Unchanged',
+  //                 iconEmoji: '',
+  //               },
+  //             },
+  //           )
+  //             .then((answerText) => {
+  //               // eslint-disable-next-line promise/always-return
+  //               if (answerText === 'Rephrase failed.') {
+  //                 setMessageErrorToast('Rephrase failed.');
+  //                 setShowErrorToast(true);
+  //               }
+  //               setWaitAIWidget(false);
+  //             })
+  //             .catch(() => {
+  //               setMessageErrorToast('Rephrase failed.');
+  //               setShowErrorToast(true);
+  //               setWaitAIWidget(false);
+  //             });
+  //         }
+  //       },
+  //     },
+  //   ];
+  // }
+
+  function getDefaultIcon(index: number) {
+    const defaultIcons = [
+      <NecktieIcon />,
+      <HandshakeIcon />,
+      <MuscleIcon />,
+      <PalmsUpTogetherIcon />,
+      <NeutralFaceIcon />,
+      <HammerIcon />,
+      <BookIcon />,
+      <PointUpIcon />,
+      <SmirkIcon />,
+      <PerformingArtsIcon />,
+    ];
+
+    return defaultIcons[index] || <NeutralFaceIcon />;
+  }
+
   function getAIEditingMessagesItems() {
-    return [
-      {
-        title: 'Professional Tone',
-        icon: <NecktieIcon />,
-        action: () => {
-          if (messageText && messageText.length > 0 && !waitAIWidget) {
-            setWaitAIWidget(true);
-            AIRephrase?.textToWidget(
-              messageText,
-              messageEntitiesToIChatMessageCollection(messagesToView),
-              { tone: Tone.Professional },
-            );
-          }
-        },
-      },
-      {
-        title: 'Friendly Tone',
-        icon: <HandshakeIcon />,
-        action: () => {
-          if (messageText && messageText.length > 0 && !waitAIWidget) {
-            setWaitAIWidget(true);
-            AIRephrase?.textToWidget(
-              messageText,
-              messageEntitiesToIChatMessageCollection(messagesToView),
-              { tone: Tone.Friendly },
-            );
-          }
-        },
-      },
-      {
-        title: 'Encouraging Tone',
-        icon: <MuscleIcon />,
-        action: () => {
-          if (messageText && messageText.length > 0 && !waitAIWidget) {
-            setWaitAIWidget(true);
-            AIRephrase?.textToWidget(
-              messageText,
-              messageEntitiesToIChatMessageCollection(messagesToView),
-              { tone: Tone.Encouraging },
-            );
-          }
-        },
-      },
-      {
-        title: 'Empathetic Tone',
-        icon: <PalmsUpTogetherIcon />,
-        action: () => {
-          if (messageText && messageText.length > 0 && !waitAIWidget) {
-            setWaitAIWidget(true);
-            AIRephrase?.textToWidget(
-              messageText,
-              messageEntitiesToIChatMessageCollection(messagesToView),
-              { tone: Tone.Empathetic },
-            );
-          }
-        },
-      },
-      {
-        title: 'Neutral Tone',
-        icon: <NeutralFaceIcon />,
-        action: () => {
-          if (messageText && messageText.length > 0 && !waitAIWidget) {
-            setWaitAIWidget(true);
-            AIRephrase?.textToWidget(
-              messageText,
-              messageEntitiesToIChatMessageCollection(messagesToView),
-              { tone: Tone.Neutral },
-            );
-          }
-        },
-      },
-      {
-        title: 'Assertive Tone',
-        icon: <HammerIcon />,
-        action: () => {
-          if (messageText && messageText.length > 0 && !waitAIWidget) {
-            setWaitAIWidget(true);
-            AIRephrase?.textToWidget(
-              messageText,
-              messageEntitiesToIChatMessageCollection(messagesToView),
-              { tone: Tone.Assertive },
-            );
-          }
-        },
-      },
-      {
-        title: 'Instructive Tone',
-        icon: <BookIcon />,
-        action: () => {
-          if (messageText && messageText.length > 0 && !waitAIWidget) {
-            setWaitAIWidget(true);
-            AIRephrase?.textToWidget(
-              messageText,
-              messageEntitiesToIChatMessageCollection(messagesToView),
-              { tone: Tone.Instructive },
-            );
-          }
-        },
-      },
-      {
-        title: 'Persuasive Tone',
-        icon: <PointUpIcon />,
-        action: () => {
-          if (messageText && messageText.length > 0 && !waitAIWidget) {
-            setWaitAIWidget(true);
-            AIRephrase?.textToWidget(
-              messageText,
-              messageEntitiesToIChatMessageCollection(messagesToView),
-              { tone: Tone.Persuasive },
-            );
-          }
-        },
-      },
-      {
-        title: 'Sarcastic/Ironic Tone',
-        icon: <SmirkIcon />,
-        action: () => {
-          if (messageText && messageText.length > 0 && !waitAIWidget) {
-            setWaitAIWidget(true);
-            AIRephrase?.textToWidget(
-              messageText,
-              messageEntitiesToIChatMessageCollection(messagesToView),
-              { tone: Tone.Sarcastic },
-            );
-          }
-        },
-      },
-      {
-        title: 'Poetic Tone',
-        icon: <PerformingArtsIcon />,
-        action: () => {
-          if (messageText && messageText.length > 0 && !waitAIWidget) {
-            setWaitAIWidget(true);
-            AIRephrase?.textToWidget(
-              messageText,
-              messageEntitiesToIChatMessageCollection(messagesToView),
-              { tone: Tone.Poetic },
-            );
-          }
-        },
-      },
-      {
-        title: 'Back to original text',
-        icon: <WhiteCheckMarkIcon />,
-        action: () => {
-          if (messageText && messageText.length > 0 && !waitAIWidget) {
-            setWaitAIWidget(true);
-            AIRephrase?.textToWidget(
-              messageText,
-              messageEntitiesToIChatMessageCollection(messagesToView),
-              { tone: Tone.Unchanged },
-            );
-          }
-        },
+    const items: MenuItem[] = [];
+
+    const tones = rephraseTones || QBAIRephrase.defaultTones();
+
+    for (let i = 0; i < tones.length; i += 1) {
+      const tone = tones[i];
+      const title = tone.name;
+      const icon = getDefaultIcon(i) || <NeutralFaceIcon />;
+
+      const action = () => {
+        if (messageText && messageText.length > 0 && !waitAIWidget) {
+          setWaitAIWidget(true);
+          setPrevTextMessage(messageText);
+          AIRephrase?.textToWidget(
+            messageText,
+            AIUtils.messageEntitiesToIChatMessageCollection(
+              messagesToView,
+              currentUserId,
+              maxTokensForAIRephrase,
+            ),
+            {
+              tone,
+            },
+          )
+            .then((answerText) => {
+              // eslint-disable-next-line promise/always-return
+              if (answerText === 'Rephrase failed.') {
+                setMessageErrorToast('Rephrase failed.');
+                setShowErrorToast(true);
+              }
+              setWaitAIWidget(false);
+            })
+            .catch(() => {
+              setMessageErrorToast('Rephrase failed.');
+              setShowErrorToast(true);
+              setWaitAIWidget(false);
+            });
+        }
+      };
+
+      items.push({
+        title,
+        icon,
+        action,
+      });
+    }
+    //
+    items.push({
+      title: 'Back to prev.',
+      icon: <WhiteCheckMarkIcon />,
+      action: () => {
+        if (messageText && messageText.length > 0 && !waitAIWidget) {
+          setMessageText(prevTextMessage);
+        }
       },
-    ];
+    });
+
+    //
+    return items;
   }
 
   return (
@@ -941,6 +1280,10 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
         />
         {useSubContent && subHeaderContent}
       </div>
+      {showErrorToast && !messagesViewModel?.loading ? (
+        <ErrorToast messageText={messageErrorToast} />
+      ) : null}
+
       {/* <div */}
       {/*  style={{ */}
       {/*    flexGrow: `1`, */}
@@ -1183,23 +1526,28 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
                 placeholder="enter text to send"
               />
             </div>
-            {/* <div className="right"> */}
-            {/*  {AIRephrase && ( */}
-            {/*    <div className="icon"> */}
-            {/*      <AIWidgetActions */}
-            {/*        widgetToRender={ */}
-            {/*          <ToneIcon */}
-            {/*            width="24" */}
-            {/*            height="24" */}
-            {/*            applyZoom */}
-            {/*            color={theme ? theme.mainText() : 'var(--main-text)'} */}
-            {/*          /> */}
-            {/*        } */}
-            {/*        items={getAIEditingMessagesItems()} */}
-            {/*      /> */}
-            {/*    </div> */}
-            {/*  )} */}
-            {/* </div> */}
+            <div className="right">
+              {AIRephrase && (
+                <div
+                  className="icon"
+                  style={{
+                    cursor: !waitAIWidget ? 'pointer' : '',
+                  }}
+                >
+                  <AIWidgetActions
+                    widgetToRender={
+                      <ToneIcon
+                        width="24"
+                        height="24"
+                        applyZoom
+                        color={theme ? theme.mainText() : 'var(--main-text)'}
+                      />
+                    }
+                    items={getAIEditingMessagesItems()}
+                  />
+                </div>
+              )}
+            </div>
           </div>
         )}
 
@@ -1219,191 +1567,6 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
             }}
           />
         )}
-        {/* {AIRephrase && ( */}
-        {/*  <div> */}
-        {/*    /!* <ContextMenu *!/ */}
-        {/*    /!*  widgetToRender={ *!/ */}
-        {/*    /!*    <AIWidgetIcon *!/ */}
-        {/*    /!*      applyZoom *!/ */}
-        {/*    /!*      color="var(--main-elements)" *!/ */}
-        {/*    /!*      width="24" *!/ */}
-        {/*    /!*      height="24" *!/ */}
-        {/*    /!*    /> *!/ */}
-        {/*    /!*  } *!/ */}
-        {/*    /!*  items={[ *!/ */}
-        {/*    /!*    // { *!/ */}
-        {/*    /!*    //   title: 'AI Chat Summary', *!/ */}
-        {/*    /!*    //   // eslint-disable-next-line @typescript-eslint/no-empty-function *!/ */}
-        {/*    /!*    //   action: () => {}, *!/ */}
-        {/*    /!*    // }, *!/ */}
-        {/*    /!*    { *!/ */}
-        {/*    /!*      title: 'AI Translate', *!/ */}
-        {/*    /!*      action: () => { *!/ */}
-        {/*    /!*        if ( *!/ */}
-        {/*    /!*          messageText && *!/ */}
-        {/*    /!*          messageText.length > 0 && *!/ */}
-        {/*    /!*          !waitAIWidget *!/ */}
-        {/*    /!*        ) { *!/ */}
-        {/*    /!*          setWaitAIWidget(true); *!/ */}
-        {/*    /!*          AITranslation?.textToWidget( *!/ */}
-        {/*    /!*            messageText, *!/ */}
-        {/*    /!*            messageEntitiesToIChatMessageCollection(messagesToView), *!/ */}
-        {/*    /!*          ); *!/ */}
-        {/*    /!*        } *!/ */}
-        {/*    /!*      }, *!/ */}
-        {/*    /!*    }, *!/ */}
-        {/*    /!*  ]} *!/ */}
-        {/*    /!* /> *!/ */}
-        {/*    /!* <AIWidgetActions *!/ */}
-        {/*    /!*  widgetToRender={ *!/ */}
-        {/*    /!*    <AIWidgetIcon *!/ */}
-        {/*    /!*      applyZoom *!/ */}
-        {/*    /!*      color="var(--main-elements)" *!/ */}
-        {/*    /!*      width="16" *!/ */}
-        {/*    /!*      height="16" *!/ */}
-        {/*    /!*    /> *!/ */}
-        {/*    /!*  } *!/ */}
-        {/*    /!*  items={[ *!/ */}
-        {/*    /!*    { *!/ */}
-        {/*    /!*      title: 'English', *!/ */}
-        {/*    /!*      // eslint-disable-next-line @typescript-eslint/no-empty-function,@typescript-eslint/no-misused-promises *!/ */}
-        {/*    /!*      action: async () => { *!/ */}
-        {/*    /!*        if ( *!/ */}
-        {/*    /!*          messageText && *!/ */}
-        {/*    /!*          messageText.length > 0 && *!/ */}
-        {/*    /!*          !waitAIWidget *!/ */}
-        {/*    /!*        ) { *!/ */}
-        {/*    /!*          setWaitAIWidget(true); *!/ */}
-        {/*    /!*          const translation = await AITranslation?.textToWidget( *!/ */}
-        {/*    /!*            messageText, *!/ */}
-        {/*    /!*            messageEntitiesToIChatMessageCollection(messagesToView), *!/ */}
-        {/*    /!*            { *!/ */}
-        {/*    /!*              language: *!/ */}
-        {/*    /!*                'English' || *!/ */}
-        {/*    /!*                QBConfig.configAIApi.AITranslateWidgetConfig *!/ */}
-        {/*    /!*                  .defaultLanguage, *!/ */}
-        {/*    /!*            }, *!/ */}
-        {/*    /!*          ); *!/ */}
-
-        {/*    /!*          setMessageText(translation || ''); *!/ */}
-        {/*    /!*        } *!/ */}
-        {/*    /!*      }, *!/ */}
-        {/*    /!*    }, *!/ */}
-        {/*    /!*    { *!/ */}
-        {/*    /!*      title: 'Ukrainian', *!/ */}
-        {/*    /!*      // eslint-disable-next-line @typescript-eslint/no-misused-promises *!/ */}
-        {/*    /!*      action: async () => { *!/ */}
-        {/*    /!*        if ( *!/ */}
-        {/*    /!*          messageText && *!/ */}
-        {/*    /!*          messageText.length > 0 && *!/ */}
-        {/*    /!*          !waitAIWidget *!/ */}
-        {/*    /!*        ) { *!/ */}
-        {/*    /!*          setWaitAIWidget(true); *!/ */}
-        {/*    /!*          const translation = await AITranslation?.textToWidget( *!/ */}
-        {/*    /!*            messageText, *!/ */}
-        {/*    /!*            messageEntitiesToIChatMessageCollection(messagesToView), *!/ */}
-        {/*    /!*            { *!/ */}
-        {/*    /!*              language: *!/ */}
-        {/*    /!*                'Ukrainian' || *!/ */}
-        {/*    /!*                QBConfig.configAIApi.AITranslateWidgetConfig *!/ */}
-        {/*    /!*                  .defaultLanguage, *!/ */}
-        {/*    /!*            }, *!/ */}
-        {/*    /!*          ); *!/ */}
-
-        {/*    /!*          setMessageText(translation || ''); *!/ */}
-        {/*    /!*        } *!/ */}
-        {/*    /!*      }, *!/ */}
-        {/*    /!*    }, *!/ */}
-        {/*    /!*    { *!/ */}
-        {/*    /!*      title: 'Spanish', *!/ */}
-        {/*    /!*      // eslint-disable-next-line @typescript-eslint/no-misused-promises *!/ */}
-        {/*    /!*      action: async () => { *!/ */}
-        {/*    /!*        if ( *!/ */}
-        {/*    /!*          messageText && *!/ */}
-        {/*    /!*          messageText.length > 0 && *!/ */}
-        {/*    /!*          !waitAIWidget *!/ */}
-        {/*    /!*        ) { *!/ */}
-        {/*    /!*          setWaitAIWidget(true); *!/ */}
-        {/*    /!*          const translation = await AITranslation?.textToWidget( *!/ */}
-        {/*    /!*            messageText, *!/ */}
-        {/*    /!*            messageEntitiesToIChatMessageCollection(messagesToView), *!/ */}
-        {/*    /!*            { *!/ */}
-        {/*    /!*              language: *!/ */}
-        {/*    /!*                'Spanish' || *!/ */}
-        {/*    /!*                QBConfig.configAIApi.AITranslateWidgetConfig *!/ */}
-        {/*    /!*                  .defaultLanguage, *!/ */}
-        {/*    /!*            }, *!/ */}
-        {/*    /!*          ); *!/ */}
-
-        {/*    /!*          setMessageText(translation || ''); *!/ */}
-        {/*    /!*        } *!/ */}
-        {/*    /!*      }, *!/ */}
-        {/*    /!*    }, *!/ */}
-        {/*    /!*    { *!/ */}
-        {/*    /!*      title: 'Portuguese', *!/ */}
-        {/*    /!*      // eslint-disable-next-line @typescript-eslint/no-misused-promises *!/ */}
-        {/*    /!*      action: async () => { *!/ */}
-        {/*    /!*        if ( *!/ */}
-        {/*    /!*          messageText && *!/ */}
-        {/*    /!*          messageText.length > 0 && *!/ */}
-        {/*    /!*          !waitAIWidget *!/ */}
-        {/*    /!*        ) { *!/ */}
-        {/*    /!*          setWaitAIWidget(true); *!/ */}
-        {/*    /!*          const translation = await AITranslation?.textToWidget( *!/ */}
-        {/*    /!*            messageText, *!/ */}
-        {/*    /!*            messageEntitiesToIChatMessageCollection(messagesToView), *!/ */}
-        {/*    /!*            { *!/ */}
-        {/*    /!*              language: *!/ */}
-        {/*    /!*                'Portuguese' || *!/ */}
-        {/*    /!*                QBConfig.configAIApi.AITranslateWidgetConfig *!/ */}
-        {/*    /!*                  .defaultLanguage, *!/ */}
-        {/*    /!*            }, *!/ */}
-        {/*    /!*          ); *!/ */}
-
-        {/*    /!*          setMessageText(translation || ''); *!/ */}
-        {/*    /!*        } *!/ */}
-        {/*    /!*      }, *!/ */}
-        {/*    /!*    }, *!/ */}
-        {/*    /!*    { *!/ */}
-        {/*    /!*      title: 'French', *!/ */}
-        {/*    /!*      // eslint-disable-next-line @typescript-eslint/no-misused-promises *!/ */}
-        {/*    /!*      action: async () => { *!/ */}
-        {/*    /!*        if ( *!/ */}
-        {/*    /!*          messageText && *!/ */}
-        {/*    /!*          messageText.length > 0 && *!/ */}
-        {/*    /!*          !waitAIWidget *!/ */}
-        {/*    /!*        ) { *!/ */}
-        {/*    /!*          setWaitAIWidget(true); *!/ */}
-        {/*    /!*          const translation = await AITranslation?.textToWidget( *!/ */}
-        {/*    /!*            messageText, *!/ */}
-        {/*    /!*            messageEntitiesToIChatMessageCollection(messagesToView), *!/ */}
-        {/*    /!*            { *!/ */}
-        {/*    /!*              language: *!/ */}
-        {/*    /!*                'French' || *!/ */}
-        {/*    /!*                QBConfig.configAIApi.AITranslateWidgetConfig *!/ */}
-        {/*    /!*                  .defaultLanguage, *!/ */}
-        {/*    /!*            }, *!/ */}
-        {/*    /!*          ); *!/ */}
-
-        {/*    /!*          setMessageText(translation || ''); *!/ */}
-        {/*    /!*        } *!/ */}
-        {/*    /!*      }, *!/ */}
-        {/*    /!*    }, *!/ */}
-        {/*    /!*    // { *!/ */}
-        {/*    /!*    //   title: 'German', *!/ */}
-        {/*    /!*    //   action: () => {}, *!/ */}
-        {/*    /!*    // }, *!/ */}
-        {/*    /!*  ]} *!/ */}
-        {/*    /!* /> *!/ */}
-        {/*    <AIWidgetActions */}
-        {/*      title="AI Rephrase Message" */}
-        {/*      widgetToRender={ */}
-        {/*        <AIWidgetIcon applyZoom color="blue" width="24" height="24" /> */}
-        {/*      } */}
-        {/*      items={getAIEditingMessagesItems()} */}
-        {/*    /> */}
-        {/*  </div> */}
-        {/* )} */}
         {!isVoiceMessage && !waitAIWidget && (
           <div>
             <ActiveSvg