quickblox-react-ui-kit 0.1.8 → 0.2.1

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

@@ -15,7 +15,6 @@ import useMessagesViewModel from './useMessagesViewModel';
 import LoaderComponent from '../../Placeholders/LoaderComponent/LoaderComponent';
 import ErrorComponent from '../../Placeholders/ErrorComponent/ErrorComponent';
 import HeaderMessages from './HeaderMessages/HeaderMessages';
-import { FunctionTypeVoidToVoid } from '../../../../Views/Base/BaseViewModel';
 import VideoAttachmentComponent from './VideoAttachmentComponent/VideoAttachmentComponent';
 import ImageAttachmentComponent from './ImageAttachmentComponent/ImageAttachmentComponent';
 import { DialogType } from '../../../../../Domain/entity/DialogTypes';
@@ -28,31 +27,47 @@ import {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   getDateShortFormatEU,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  formatShortTime3,
+  // formatShortTime3,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  formatShortTime4,
-  getTimeShort24hFormat,
+  // formatShortTime4,
+  // getTimeShort24hFormat,
 } from '../../../../../utils/DateTimeFormatter';
-import User from '../../svgs/Icons/Contents/User';
 import ActiveSvg from '../../svgs/ActiveSvg/ActiveSvg';
 import AttachmentIcon from '../../svgs/Icons/Media/Attachment';
 import SendIcon from '../../svgs/Icons/Actions/Send';
 import AudioAttachmentComponent from './AudioAttachmentComponent/AudioAttachmentComponent';
 import AudioFile from '../../svgs/Icons/Media/AudioFile';
 import VoiceIcon from '../../svgs/Icons/Actions/Voice';
-import SentStatusIcon from '../../svgs/Icons/Status/Sent';
-import ViewedDelivered from '../../svgs/Icons/Status/ViewedDelivered';
 import { stringifyError } from '../../../../../utils/parse';
 import VoiceRecordingProgress from './VoiceRecordingProgress/VoiceRecordingProgress';
 import UiKitTheme from '../../../../assets/UiKitTheme';
+import { AIMessageWidget } from './AIWidgets/AIMessageWidget';
 import { DialogsViewModel } from '../../../../Views/Dialogs/DialogViewModel';
 import { HighLightLink, messageHasUrls } from './HighLightLink/HighLightLink';
-// import CompanyLogo from '../../../layouts/TestStage/CompanyLogo/CompanyLogo';
+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';
+import MuscleIcon from '../../svgs/Icons/AIWidgets/MuscleIcon';
+import PalmsUpTogetherIcon from '../../svgs/Icons/AIWidgets/PalmsUpTogetherIcon';
+import NeutralFaceIcon from '../../svgs/Icons/AIWidgets/NeutralFaceIcon';
+import HammerIcon from '../../svgs/Icons/AIWidgets/HammerIcon';
+import BookIcon from '../../svgs/Icons/AIWidgets/BookIcon/BookIcon';
+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';
 
 type HeaderDialogsMessagesProps = {
-  // InputWidgetToLeftPlaceHolder?: InputWidget;
-  // InputWidgetToRightPlaceHolder?: InputWidget;
-  // IncomingMessageWidgetToRightPlaceHolder?: InputWidget;
+  AIRephrase?: AIMessageWidget;
+  AITranslate?: AIMessageWidget;
+  AIAssist?: AIMessageWidget;
   dialogsViewModel: DialogsViewModel;
   onDialogInformationHandler?: FunctionTypeVoidToVoid;
   maxWidthToResize?: string;
@@ -64,11 +79,11 @@ type HeaderDialogsMessagesProps = {
 // eslint-disable-next-line react/function-component-definition
 const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // InputWidgetToLeftPlaceHolder,
+  AIRephrase,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // InputWidgetToRightPlaceHolder,
+  AITranslate,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // IncomingMessageWidgetToRightPlaceHolder,
+  AIAssist,
   dialogsViewModel,
   onDialogInformationHandler,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -88,6 +103,7 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
     currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.userId;
   const currentUserName =
     currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.userName;
+  // const translations: Record<number, string> = {};
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { connectionRepository, browserOnline } = useQBConnection();
   const [dialogMessagesCount, setDialogMessageCount] = useState(100);
@@ -97,6 +113,32 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
     [],
   );
 
+  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,
+      }),
+    );
+
+    //
+    return chatCompletionMessages;
+  };
+
   const messagesViewModel: MessagesViewModel = useMessagesViewModel(
     dialogsViewModel.entity?.type,
     dialogsViewModel.entity,
@@ -190,6 +232,26 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
     );
   };
 
+  // function sendMessageToTranslate(message: MessageEntity) {
+  //   if (!waitAIWidget) {
+  //     setWaitAIWidget(true);
+  //     AITranslation?.textToWidget(
+  //       message.message,
+  //       messageEntitiesToIChatMessageCollection(messagesToView),
+  //     );
+  //   }
+  // }
+  //
+  // function sendMessageToAIAssistAnswer(message: MessageEntity) {
+  //   if (!waitAIWidget) {
+  //     setWaitAIWidget(true);
+  //     AIAnswerToMessage?.textToWidget(
+  //       message.message,
+  //       messageEntitiesToIChatMessageCollection(messagesToView),
+  //     );
+  //   }
+  // }
+
   const renderMessage = (message: MessageEntity, index: number) => {
     const SystemMessage = 'SystemMessage';
     const IncomingMessage = 'IncomingMessage';
@@ -310,108 +372,56 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
       );
     } else if (messageTypes === IncomingMessage) {
       messageView = (
-        <div
-          className="message-view-container--incoming-message-wrapper"
+        <InComingMessage
           key={message.id}
-        >
-          <div className="message-view-container--incoming-message-wrapper__avatar">
-            <div
-              style={theme ? { backgroundColor: theme.disabledElements() } : {}}
-              className="message-view-container__sender-avatar"
-            >
-              <User
-                width="24"
-                height="24"
-                applyZoom
-                color="var(--secondary-text)"
-              />
-            </div>
-          </div>
-          <div className="message-view-container--incoming-message-container">
-            <div
-              style={theme ? { color: theme.secondaryText() } : {}}
-              className="message-view-container__sender-name"
-            >
-              {getSenderName(message.sender) || message.sender_id.toString()}
-            </div>
-            <div
-              style={
-                theme
-                  ? {
-                      color: theme.mainText(),
-                      backgroundColor: theme.incomingBackground(),
-                    }
-                  : {}
-              }
-              className="message-view-container__sender-message"
-            >
-              {messageContentRender(message)}
-            </div>
-          </div>
-          <div
-            style={theme ? { color: theme.mainText() } : {}}
-            className="message-view-container__incoming-time"
-          >
-            {getTimeShort24hFormat(message.date_sent)}
-          </div>
-          <div
-            className="message-view-container__incoming-time"
-            onClick={() => {
-              // IncomingMessageWidgetToRightPlaceHolder?.textToWidget(
-              //   message.message,
-              // );
-            }}
-          >
-            {/* {IncomingMessageWidgetToRightPlaceHolder?.renderWidget()} */}
-          </div>
-        </div>
+          theme={theme}
+          senderName={getSenderName(message.sender)}
+          message={message}
+          // element={messageContentRender(message)}
+          onLoader={() => {
+            // sendMessageToTranslate(message);
+            setWaitAIWidget(true);
+          }}
+          // renderWidget={
+          //   <ContextMenu
+          //     widgetToRender={
+          //       <AIWidgetIcon applyZoom color="var(--main-elements)" />
+          //     }
+          //     items={[
+          //       {
+          //         title: 'AI Assist Answer',
+          //         action: () => {
+          //           sendMessageToAIAssistAnswer(message);
+          //         },
+          //       },
+          //       {
+          //         title: 'AI Translate',
+          //         action: () => {
+          //           sendMessageToTranslate(message);
+          //         },
+          //       },
+          //     ]}
+          //   />
+          // }
+          currentUserId={currentUserId}
+          messagesToView={messagesToView}
+          AITranslation={AITranslate}
+          AIAnswerToMessage={AIAssist}
+          // translationDATA={translations}
+          // index={index}
+          // updateData={(ind: number, v: string) => {
+          //   translations[ind] = v;
+          // }}
+        />
       );
     } else {
       messageView = (
-        <div
-          className="message-view-container--outgoing-message-wrapper"
+        <OutGoingMessage
           key={message.id}
-        >
-          <div className="message-view-container__status-message">
-            <div className="message-view-container__incoming-time">
-              {message.delivered_ids && message.delivered_ids.length > 0 ? (
-                <ViewedDelivered
-                  width="13"
-                  height="13"
-                  applyZoom
-                  color={theme ? theme.mainElements() : 'var(--main-elements)'}
-                />
-              ) : (
-                <SentStatusIcon
-                  width="13"
-                  height="13"
-                  applyZoom
-                  color={theme ? theme.mainElements() : 'var(--main-elements)'}
-                />
-              )}
-            </div>
-            <div
-              style={theme ? { color: theme.mainText() } : {}}
-              className="message-view-container__incoming-time"
-            >
-              {getTimeShort24hFormat(message.date_sent)}
-            </div>
-          </div>
-
-          <div
-            style={
-              theme
-                ? {
-                    color: theme.mainText(),
-                    backgroundColor: theme.outgoingBackground(),
-                  }
-                : {}
-            }
-            className="message-view-container__outgoing-message"
-          >
-            {messageContentRender(message)}
-          </div>
-        </div>
+          message={message}
+          theme={theme}
+          element={messageContentRender(message)}
+        />
       );
     }
 
@@ -634,7 +644,11 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
       setFileToSend(voiceMessage);
       if (useAudioWidget) {
         setUseAudioWidget(false);
-        // InputWidgetToRightPlaceHolder?.fileToWidget(voiceMessage);
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+        // AITranslation?.fileToWidget(
+        //   voiceMessage,
+        //   messageEntitiesToIChatMessageCollection(messagesToView),
+        // );
       }
       //
     }
@@ -699,49 +713,204 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
     }
   }
 
-  // useEffect(() => {
-  //   if (
-  //     InputWidgetToLeftPlaceHolder?.textToInput &&
-  //     InputWidgetToLeftPlaceHolder?.textToInput.length > 0
-  //   ) {
-  //     setMessageText(InputWidgetToLeftPlaceHolder?.textToInput);
-  //     setWidgetTextContent(InputWidgetToLeftPlaceHolder?.textToInput);
-  //     setTimeout(() => {
-  //       setWidgetTextContent('');
-  //     }, 45 * 1000);
-  //   }
-  // }, [InputWidgetToLeftPlaceHolder?.textToInput]);
-  //
-  // useEffect(() => {
-  //   if (
-  //     InputWidgetToRightPlaceHolder?.textToInput &&
-  //     InputWidgetToRightPlaceHolder?.textToInput.length > 0
-  //   ) {
-  //     setMessageText(InputWidgetToRightPlaceHolder?.textToInput);
-  //     setWidgetTextContent(InputWidgetToRightPlaceHolder?.textToInput);
-  //     setTimeout(() => {
-  //       setWidgetTextContent('');
-  //     }, 45 * 1000);
-  //   }
-  // }, [InputWidgetToRightPlaceHolder?.textToInput]);
-  //
-  // useEffect(() => {
-  //   if (
-  //     IncomingMessageWidgetToRightPlaceHolder?.textToInput &&
-  //     IncomingMessageWidgetToRightPlaceHolder?.textToInput.length > 0
-  //   ) {
-  //     setWidgetTextContent(
-  //       IncomingMessageWidgetToRightPlaceHolder?.textToInput,
-  //     );
-  //     setTimeout(() => {
-  //       setWidgetTextContent('');
-  //     }, 45 * 1000);
-  //   }
-  // }, [IncomingMessageWidgetToRightPlaceHolder?.textToInput]);
+  useEffect(() => {
+    setWaitAIWidget(false);
+    if (AIRephrase?.textToContent && AIRephrase?.textToContent.length > 0) {
+      setMessageText(AIRephrase?.textToContent);
+      setWidgetTextContent(AIRephrase?.textToContent);
+      setTimeout(() => {
+        setWidgetTextContent('');
+      }, 45 * 1000);
+    }
+  }, [AIRephrase?.textToContent]);
 
+  useEffect(() => {
+    setWaitAIWidget(false);
+    // if (
+    //   AITranslation?.textToContent &&
+    //   AITranslation?.textToContent.length > 0
+    // ) {
+    //   setMessageText(AITranslation?.textToContent);
+    //   setWidgetTextContent(AITranslation?.textToContent);
+    //   setTimeout(() => {
+    //     setWidgetTextContent('');
+    //   }, 45 * 1000);
+    // }
+  }, [AITranslate?.textToContent]);
+
+  useEffect(() => {
+    setWaitAIWidget(false);
+    if (AIAssist?.textToContent && AIAssist?.textToContent.length > 0) {
+      setMessageText(AIAssist?.textToContent);
+      setWidgetTextContent(AIAssist?.textToContent);
+      setTimeout(() => {
+        setWidgetTextContent('');
+      }, 45 * 1000);
+    }
+  }, [AIAssist?.textToContent]);
   const useSubContent = subHeaderContent || false;
   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,
+              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 },
+            );
+          }
+        },
+      },
+    ];
+  }
+
   return (
     <div
       style={
@@ -850,7 +1019,7 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
         }
         className="message-view-container--messages"
       >
-        {messagesViewModel?.error && (
+        {messagesViewModel?.error && !messagesViewModel.loading && (
           <ErrorComponent
             title={messagesViewModel?.error}
             ClickActionHandler={() => {
@@ -872,28 +1041,54 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
               autoScrollToBottom={scrollUpToDown}
             />
           )}
-        {messagesViewModel?.loading && (
-          <div
-            style={{
-              height: '44px',
-              width: '44px',
-            }}
-          >
-            <LoaderComponent
-              width="44"
-              height="44"
-              color="var(--color-background-info)"
-            />
-          </div>
-        )}
+        {/* {(messagesViewModel?.loading || waitAIWidget) && ( */}
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          {messagesViewModel?.loading && (
+            <div
+              style={{
+                height: '44px',
+                width: '44px',
+              }}
+            >
+              <LoaderComponent
+                width="44"
+                height="44"
+                color="var(--color-background-info)"
+              />
+            </div>
+          )}
+        </div>
+
         <div
           style={theme ? { color: theme.mainElements() } : {}}
           className="message-view-container--warning-error"
         >
           {warningErrorText}
         </div>
+        {/* <div> */}
+        {/*  <SliderMenu */}
+        {/*    width={680} */}
+        {/*    arrowColor="var(--chat-input)" */}
+        {/*    activeArrowColor="var(--divider)" */}
+        {/*    activeItemBorderColor="var(--main-elements)" */}
+        {/*    borderColor="var(--divider)" */}
+        {/*    backgroundColor="white" */}
+        {/*    itemBackgroundColor="var(--divider)" */}
+        {/*    itemWidth={130} */}
+        {/*    itemHeight={20} */}
+        {/*    fontSize={11} // Задаем размер шрифта */}
+        {/*    itemBorder="1px solid var(--divider)" */}
+        {/*    items={getAIEditingMessagesItems()} */}
+        {/*  /> */}
+        {/* </div> */}
       </div>
-
       <div
         style={{
           flex: `flex: 1 1 ${maxWidthToResizing}`,
@@ -960,31 +1155,52 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
         {/* )} */}
         {/* end InputWidgetToRightPlaceHolder */}
         {!isRecording && (
-          <textarea
-            style={theme ? { backgroundColor: theme.chatInput() } : {}}
-            disabled={messagesViewModel?.loading}
-            value={messageText}
-            onFocus={() => {
-              setVoiceMessage(false);
-            }}
-            onChange={(event) => {
-              setMessageText(event.target.value);
-            }}
-            onInput={() => {
-              messagesViewModel.sendTypingTextMessage();
-            }}
-            onKeyDown={(e) => {
-              console.log(
-                `onKeyDown: ${e.key} shift ${
-                  e.shiftKey ? 'true' : 'false'
-                } ctrl ${e.ctrlKey ? 'true' : 'false'}`,
-              );
-              if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey) {
-                sendTextMessageActions();
-              }
-            }}
-            placeholder="enter text to send"
-          />
+          <div className="input-text-message">
+            <div className="type-message">
+              <textarea
+                style={theme ? { backgroundColor: theme.chatInput() } : {}}
+                disabled={messagesViewModel?.loading}
+                value={messageText}
+                onFocus={() => {
+                  setVoiceMessage(false);
+                }}
+                onChange={(event) => {
+                  setMessageText(event.target.value);
+                }}
+                onInput={() => {
+                  messagesViewModel.sendTypingTextMessage();
+                }}
+                onKeyDown={(e) => {
+                  console.log(
+                    `onKeyDown: ${e.key} shift ${
+                      e.shiftKey ? 'true' : 'false'
+                    } ctrl ${e.ctrlKey ? 'true' : 'false'}`,
+                  );
+                  if (e.key === 'Enter' && !e.shiftKey && !e.ctrlKey) {
+                    sendTextMessageActions();
+                  }
+                }}
+                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>
         )}
 
         {isRecording && (
@@ -1003,23 +1219,192 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
             }}
           />
         )}
-        {/* InputWidgetToRightPlaceHolder start InputWidgetToLeftPlaceHolder */}
-        {/* {InputWidgetToLeftPlaceHolder && ( */}
+        {/* {AIRephrase && ( */}
         {/*  <div> */}
-        {/*    <ActiveSvg */}
-        {/*      content={InputWidgetToLeftPlaceHolder.renderWidget()} */}
-        {/*      clickAction={() => { */}
-        {/*        console.log('click left place golder widget'); */}
-        {/*        InputWidgetToLeftPlaceHolder?.textToWidget(messageText); */}
-        {/*      }} */}
-        {/*      touchAction={() => { */}
-        {/*        console.log('touch left place golder widget'); */}
-        {/*      }} */}
+        {/*    /!* <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> */}
         {/* )} */}
-        {/* end InputWidgetLeftPlaceHolder */}
-        {!isVoiceMessage && (
+        {!isVoiceMessage && !waitAIWidget && (
           <div>
             <ActiveSvg
               content={
@@ -1040,29 +1425,42 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
             />
           </div>
         )}
-        {isVoiceMessage && (
-          <div>
-            <ActiveSvg
-              content={
-                <VoiceIcon
-                  width="21"
-                  height="18"
-                  applyZoom
-                  color={isRecording ? 'var(--error)' : 'var(--input-elements)'}
-                />
-              }
-              clickAction={() => {
-                console.log('click send voice message');
-                if (messagesViewModel?.loading) return;
-                setIsRecording(!isRecording);
-              }}
-              touchAction={() => {
-                console.log('touch send message');
-                if (messagesViewModel?.loading) return;
-                setIsRecording(!isRecording);
-              }}
-            />
+        {waitAIWidget ? (
+          <div
+            style={{
+              height: '44px',
+              width: '24px',
+            }}
+          >
+            <LoaderComponent width="24" height="24" color="var(--caption)" />
           </div>
+        ) : (
+          isVoiceMessage && (
+            <div>
+              <ActiveSvg
+                content={
+                  <VoiceIcon
+                    width="21"
+                    height="18"
+                    applyZoom
+                    color={
+                      isRecording ? 'var(--error)' : 'var(--input-elements)'
+                    }
+                  />
+                }
+                clickAction={() => {
+                  console.log('click send voice message');
+                  if (messagesViewModel?.loading) return;
+                  setIsRecording(!isRecording);
+                }}
+                touchAction={() => {
+                  console.log('touch send message');
+                  if (messagesViewModel?.loading) return;
+                  setIsRecording(!isRecording);
+                }}
+              />
+            </div>
+          )
         )}
       </div>
       {/* <div className="message-view-container--warning-error"> */}