quickblox-react-ui-kit 0.1.7 → 0.2.0

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

@@ -15,14 +15,17 @@ 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 {
+  FunctionTypeVoidToVoid,
+  IChatMessage,
+} from '../../../../Views/Base/BaseViewModel';
 import VideoAttachmentComponent from './VideoAttachmentComponent/VideoAttachmentComponent';
 import ImageAttachmentComponent from './ImageAttachmentComponent/ImageAttachmentComponent';
 import { DialogType } from '../../../../../Domain/entity/DialogTypes';
 import { GroupDialogEntity } from '../../../../../Domain/entity/GroupDialogEntity';
 import { PrivateDialogEntity } from '../../../../../Domain/entity/PrivateDialogEntity';
 import { UserEntity } from '../../../../../Domain/entity/UserEntity';
-import useQbDataContext from '../../../providers/QuickBloxUIKitProvider/useQbDataContext';
+import useQbInitializedDataContext from '../../../providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
 import { Pagination } from '../../../../../Domain/repository/Pagination';
 import {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -45,35 +48,51 @@ import ViewedDelivered from '../../svgs/Icons/Status/ViewedDelivered';
 import { stringifyError } from '../../../../../utils/parse';
 import VoiceRecordingProgress from './VoiceRecordingProgress/VoiceRecordingProgress';
 import UiKitTheme from '../../../../assets/UiKitTheme';
+import { AIWidget } from './AIWidgets/AIWidget';
 import { DialogsViewModel } from '../../../../Views/Dialogs/DialogViewModel';
 import { HighLightLink, messageHasUrls } from './HighLightLink/HighLightLink';
+import { loopToLimitTokens } from '../../../../../utils/utils';
 
 type HeaderDialogsMessagesProps = {
+  AIEditMessage?: AIWidget;
+  AITranslation?: AIWidget;
+  AIAnswerToMessage?: AIWidget;
   dialogsViewModel: DialogsViewModel;
-  InformationHandler?: FunctionTypeVoidToVoid;
+  onDialogInformationHandler?: FunctionTypeVoidToVoid;
   maxWidthToResize?: string;
   theme?: UiKitTheme;
+  subHeaderContent?: React.ReactNode;
+  upHeaderContent?: React.ReactNode;
 };
 
 // eslint-disable-next-line react/function-component-definition
 const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  AIEditMessage,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  AITranslation,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  AIAnswerToMessage,
   dialogsViewModel,
-  InformationHandler,
+  onDialogInformationHandler,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   maxWidthToResize = undefined,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   theme = undefined,
+  subHeaderContent = undefined,
+  upHeaderContent = undefined,
 }: HeaderDialogsMessagesProps) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const maxWidthToResizing =
     maxWidthToResize || '$message-view-container-wrapper-min-width';
   // const maxWidthToResizing = '720px'; // $message-view-container-wrapper-min-width:
 
-  const currentContext = useQbDataContext();
+  const currentContext = useQbInitializedDataContext();
   const currentUserId =
     currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.userId;
   const currentUserName =
     currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.userName;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { connectionRepository, browserOnline } = useQBConnection();
   const [dialogMessagesCount, setDialogMessageCount] = useState(100);
   const [hasMore, setHasMore] = React.useState(true);
@@ -81,6 +100,32 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
   const [messagesToView, setMessagesToView] = React.useState<MessageEntity[]>(
     [],
   );
+  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,
@@ -166,6 +211,23 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
     }
   }, [dialogMessagesCount]);
   //
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const menuItems = [
+    {
+      title: 'Item 1',
+      action: () => {
+        console.log('Clicked on Item 1');
+      },
+    },
+    {
+      title: 'Item 2',
+      action: () => {
+        console.log('Clicked on Item 2');
+      },
+    },
+    // ... добавьте дополнительные элементы меню
+  ];
+  //
 
   const getSenderName = (sender?: UserEntity): string | undefined => {
     if (!sender) return undefined;
@@ -339,6 +401,21 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
           >
             {getTimeShort24hFormat(message.date_sent)}
           </div>
+          <div
+            className="message-view-container__incoming-time"
+            onClick={() => {
+              if (!waitAIWidget) {
+                setWaitAIWidget(true);
+                AIAnswerToMessage?.textToWidget(
+                  message.message,
+                  messageEntitiesToIChatMessageCollection(messagesToView),
+                );
+              }
+            }}
+          >
+            {AIAnswerToMessage?.renderWidget()}
+          </div>
+          {/* <ContextMenu items={menuItems} /> */}
         </div>
       );
     } else {
@@ -410,6 +487,8 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
   const [fileToSend, setFileToSend] = useState<File | null>(null);
   const [messageText, setMessageText] = useState<string>('');
   const [warningErrorText, setWarningErrorText] = useState<string>('');
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [widgetTextContent, setWidgetTextContent] = useState<string>('');
 
   useEffect(() => {
     setWarningErrorText(messagesViewModel.typingText);
@@ -465,6 +544,7 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
 
   const [audioChunks, setAudioChunks] = useState<Array<Blob>>([]);
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const mimeType = 'audio/webm;codecs=opus'; // audio/ogg audio/mpeg audio/webm audio/x-wav audio/mp4
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const getMicrophonePermission = async () => {
@@ -499,16 +579,34 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/require-await
   const startRecording = async () => {
     if (!stream) return;
-    // setRecordingStatus('recording');
+    // 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`);
+    //   }
+    // });
     // audio/mp4;codecs=mp4a audio/webm;codecs=opus audio/webm;codecs=vp9,opus
     const mimeContent = window.MediaRecorder.isTypeSupported(
       'audio/mp4;codecs=mp4a',
     )
       ? 'audio/mp4;codecs=mp4a'
       : 'audio/webm;codecs=opus';
-    /*
-    this.mediaRecorder = new MediaRecorder(window.stream, {mimeType: mimeContent});
-   */
+
     const media = new MediaRecorder(stream, { mimeType: mimeContent });
 
     mediaRecorder.current = media;
@@ -536,7 +634,17 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
     mediaRecorder.current.stop();
 
     mediaRecorder.current.onstop = () => {
-      const audioBlob = new Blob(audioChunks, { type: mimeType });
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const mimeContent = window.MediaRecorder.isTypeSupported(
+        'audio/mp4;codecs=mp4a',
+      )
+        ? 'audio/mp4;codecs=mp4a'
+        : 'audio/webm;codecs=opus';
+      // const audioBlob = new Blob(audioChunks, { type: mimeContent }); // mimeType
+      // 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
 
       setResultAudioBlob(audioBlob);
 
@@ -564,14 +672,26 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
     return resultFile;
   };
 
+  const [useAudioWidget, setUseAudioWidget] = useState<boolean>(false);
+
   useEffect(() => {
+    const fileExt = 'mp4';
+
     if (resultAudioBlob) {
       const voiceMessage = blobToFile(
         resultAudioBlob,
-        `${currentUserName || ''}_voice_message.webm`,
+        `${currentUserName || ''}_voice_message.${fileExt}`,
       );
 
       setFileToSend(voiceMessage);
+      if (useAudioWidget) {
+        setUseAudioWidget(false);
+        AITranslation?.fileToWidget(
+          voiceMessage,
+          messageEntitiesToIChatMessageCollection(messagesToView),
+        );
+      }
+      //
     }
   }, [resultAudioBlob]);
   // test component version
@@ -634,6 +754,49 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
     }
   }
 
+  useEffect(() => {
+    if (
+      AIEditMessage?.textToContent &&
+      AIEditMessage?.textToContent.length > 0
+    ) {
+      setMessageText(AIEditMessage?.textToContent);
+      setWidgetTextContent(AIEditMessage?.textToContent);
+      setTimeout(() => {
+        setWidgetTextContent('');
+      }, 45 * 1000);
+    }
+  }, [AIEditMessage?.textToContent]);
+
+  useEffect(() => {
+    if (
+      AITranslation?.textToContent &&
+      AITranslation?.textToContent.length > 0
+    ) {
+      setMessageText(AITranslation?.textToContent);
+      setWidgetTextContent(AITranslation?.textToContent);
+      setTimeout(() => {
+        setWidgetTextContent('');
+      }, 45 * 1000);
+    }
+  }, [AITranslation?.textToContent]);
+
+  useEffect(() => {
+    setWaitAIWidget(false);
+    if (
+      AIAnswerToMessage?.textToContent &&
+      AIAnswerToMessage?.textToContent.length > 0
+    ) {
+      setMessageText(AIAnswerToMessage?.textToContent);
+      setWidgetTextContent(AIAnswerToMessage?.textToContent);
+      setTimeout(() => {
+        setWidgetTextContent('');
+      }, 45 * 1000);
+    }
+  }, [AIAnswerToMessage?.textToContent]);
+
+  const useSubContent = subHeaderContent || false;
+  const useUpContent = upHeaderContent || false;
+
   return (
     <div
       style={
@@ -656,46 +819,75 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
         }}
         className="message-view-container--header"
       >
+        {useUpContent && upHeaderContent}
         <HeaderMessages
           dialog={messagesViewModel.entity}
-          InformationHandler={InformationHandler}
+          InformationHandler={onDialogInformationHandler}
           countMembers={getCountDialogMembers(dialogsViewModel.entity)}
         />
+        {useSubContent && subHeaderContent}
       </div>
-      <div
-        style={
-          theme
-            ? {
-                flexGrow: `1`,
-                flexShrink: `1`,
-                flexBasis: `${maxWidthToResizing}`,
-                backgroundColor: theme.mainElements(),
-              }
-            : {
-                flexGrow: `1`,
-                flexShrink: `1`,
-                flexBasis: `${maxWidthToResizing}`,
-              }
-        }
-        className="message-view-container--information"
-      >
-        <div>
-          connection status:
-          {browserOnline ? 'online ' : 'offline '}
-          {/* eslint-disable-next-line no-nested-ternary */}
-          {connectionRepository.isChatConnected() === undefined
-            ? 'unexpected undefined'
-            : connectionRepository.isChatConnected()
-            ? 'connected'
-            : 'disconnected'}
-        </div>
-        {hasMore && (
-          <div style={{ color: 'red' }}>
-            unread: {dialogMessagesCount - messagesToView.length}
-          </div>
-        )}
-        <div>{` current user id: ${currentUserId || 'no user'}`}</div>
-      </div>
+      {/* <div */}
+      {/*  style={{ */}
+      {/*    flexGrow: `1`, */}
+      {/*    flexShrink: `1`, */}
+      {/*    flexBasis: `${maxWidthToResizing}`, */}
+      {/*  }} */}
+      {/*  className="message-view-container--information" */}
+      {/* > */}
+      {/*  <div> */}
+      {/*    connection status: */}
+      {/*    {browserOnline ? 'online ' : 'offline '} */}
+      {/*    /!* eslint-disable-next-line no-nested-ternary *!/ */}
+      {/*    {connectionRepository.isChatConnected() === undefined */}
+      {/*      ? 'unexpected undefined' */}
+      {/*      : connectionRepository.isChatConnected() */}
+      {/*      ? 'connected' */}
+      {/*      : 'disconnected'} */}
+      {/*  </div> */}
+      {/*  {hasMore && ( */}
+      {/*    <div style={{ color: 'red' }}> */}
+      {/*      unread: {dialogMessagesCount - messagesToView.length} */}
+      {/*    </div> */}
+      {/*  )} */}
+      {/*  <div>{` current user id: ${currentUserId || 'no user'}`}</div> */}
+      {/* </div> */}
+      {/* version 2 start */}
+      {/* <div */}
+      {/*  style={ */}
+      {/*    theme */}
+      {/*      ? { */}
+      {/*          flexGrow: `1`, */}
+      {/*          flexShrink: `1`, */}
+      {/*          flexBasis: `${maxWidthToResizing}`, */}
+      {/*          backgroundColor: theme.mainElements(), */}
+      {/*        } */}
+      {/*      : { */}
+      {/*          flexGrow: `1`, */}
+      {/*          flexShrink: `1`, */}
+      {/*          flexBasis: `${maxWidthToResizing}`, */}
+      {/*        } */}
+      {/*  } */}
+      {/*  className="message-view-container--information" */}
+      {/* > */}
+      {/*  <div> */}
+      {/*    connection status: */}
+      {/*    {browserOnline ? 'online ' : 'offline '} */}
+      {/*    /!* eslint-disable-next-line no-nested-ternary *!/ */}
+      {/*    {connectionRepository.isChatConnected() === undefined */}
+      {/*      ? 'unexpected undefined' */}
+      {/*      : connectionRepository.isChatConnected() */}
+      {/*      ? 'connected' */}
+      {/*      : 'disconnected'} */}
+      {/*  </div> */}
+      {/*  {hasMore && ( */}
+      {/*    <div style={{ color: 'red' }}> */}
+      {/*      unread: {dialogMessagesCount - messagesToView.length} */}
+      {/*    </div> */}
+      {/*  )} */}
+      {/*  <div>{` current user id: ${currentUserId || 'no user'}`}</div> */}
+      {/* </div> */}
+      {/* version 2 end */}
       <div
         style={
           theme
@@ -713,7 +905,7 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
         }
         className="message-view-container--messages"
       >
-        {messagesViewModel?.error && (
+        {messagesViewModel?.error && !messagesViewModel.loading && (
           <ErrorComponent
             title={messagesViewModel?.error}
             ClickActionHandler={() => {
@@ -735,7 +927,7 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
               autoScrollToBottom={scrollUpToDown}
             />
           )}
-        {messagesViewModel?.loading && (
+        {(messagesViewModel?.loading || waitAIWidget) && (
           <div
             style={{
               height: '44px',
@@ -804,7 +996,24 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
             }}
           />
         </label>
-
+        {/*  start AITranslation */}
+        {/* {AITranslation && ( */}
+        {/*  <div> */}
+        {/*    <ActiveSvg */}
+        {/*      content={AITranslation.renderWidget()} */}
+        {/*      clickAction={() => { */}
+        {/*        console.log('click left place golder widget'); */}
+        {/*        if (messagesViewModel?.loading) return; */}
+        {/*        setIsRecording(!isRecording); */}
+        {/*        setUseAudioWidget(true); */}
+        {/*      }} */}
+        {/*      touchAction={() => { */}
+        {/*        console.log('touch left place golder widget'); */}
+        {/*      }} */}
+        {/*    /> */}
+        {/*  </div> */}
+        {/* )} */}
+        {/* end AITranslation */}
         {!isRecording && (
           <textarea
             style={theme ? { backgroundColor: theme.chatInput() } : {}}
@@ -849,7 +1058,22 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
             }}
           />
         )}
-
+        {/* AITranslation start AIEditMessage */}
+        {/* {AIEditMessage && ( */}
+        {/*  <div> */}
+        {/*    <ActiveSvg */}
+        {/*      content={AIEditMessage.renderWidget()} */}
+        {/*      clickAction={() => { */}
+        {/*        console.log('click left place golder widget'); */}
+        {/*        AIEditMessage?.textToWidget(messageText); */}
+        {/*      }} */}
+        {/*      touchAction={() => { */}
+        {/*        console.log('touch left place golder widget'); */}
+        {/*      }} */}
+        {/*    /> */}
+        {/*  </div> */}
+        {/* )} */}
+        {/* end InputWidgetLeftPlaceHolder */}
         {!isVoiceMessage && (
           <div>
             <ActiveSvg
@@ -897,7 +1121,7 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
         )}
       </div>
       {/* <div className="message-view-container--warning-error"> */}
-      {/*  {warningErrorText} */}
+      {/*  {widgetTextContent} */}
       {/* </div> */}
     </div>
   );

package/src/Presentation/components/UI/Dialogs/MessagesView/useMessagesViewModel.ts

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { DialogType } from '../../../../../Domain/entity/DialogTypes';
-import useQbDataContext from '../../../providers/QuickBloxUIKitProvider/useQbDataContext';
+import useQbInitializedDataContext from '../../../providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
 import { DialogEntity } from '../../../../../Domain/entity/DialogEntity';
 import { MessagesViewModel } from './MessagesViewModel';
 import { MessageEntity } from '../../../../../Domain/entity/MessageEntity';
@@ -42,7 +42,7 @@ export default function useMessagesViewModel(
   const [dialog, setDialog] = useState<DialogEntity>(dialogEntity);
   // const [dialogsParticipants, setDialogsParticipants] = useState<number[]>([]);
 
-  const currentContext = useQbDataContext();
+  const currentContext = useQbInitializedDataContext();
   const eventMessaging = useEventMessagesRepository();
 
   const subscribeToDialogEventsUseCase: SubscribeToDialogEventsUseCase =

package/src/Presentation/components/UI/svgs/Icons/Media/AIWidget/Send.svg

@@ -0,0 +1,3 @@
+<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.76833 38.5L41.25 22L2.76833 5.5L2.75 18.3333L30.25 22L2.75 25.6667L2.76833 38.5Z" fill="#0B121B"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/Media/AIWidget/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function AIWidgetIcon(theme: IconTheme | undefined = undefined) {
+  return !theme?.applyZoom ? (
+    <svg
+      width={theme && theme.width ? theme.width : '44'}
+      height={theme && theme.height ? theme.height : '44'}
+      viewBox="0 0 44 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2.76833 38.5L41.25 22L2.76833 5.5L2.75 18.3333L30.25 22L2.75 25.6667L2.76833 38.5Z"
+        id="SendB"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  ) : (
+    <svg
+      width={theme && theme.width ? theme.width : '28'}
+      height={theme && theme.height ? theme.height : '28'}
+      viewBox="0 0 22 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M18,6 C20.209139,6 22,7.790861 22,10 L22,18 C22,19.9255253 20.6753401,21.786149 18.0260203,23.581871 C18.5654117,21.193957 18.3975027,20 17.5222933,20 L10,20 C7.790861,20 6,18.209139 6,16 L6,10 C6,7.790861 7.790861,6 10,6 L18,6 Z M18,10 L10,10 C9.44771525,10 9,10.4477153 9,11 L9,14 C9,14.5522847 9.44771525,15 10,15 L18,15 C18.5522847,15 19,14.5522847 19,14 L19,11 C19,10.4477153 18.5522847,10 18,10 Z M12,11 C12.5522847,11 13,11.4477153 13,12 L13,13 C13,13.5522847 12.5522847,14 12,14 C11.4477153,14 11,13.5522847 11,13 L11,12 C11,11.4477153 11.4477153,11 12,11 Z M16,11 C16.5522847,11 17,11.4477153 17,12 L17,13 C17,13.5522847 16.5522847,14 16,14 C15.4477153,14 15,13.5522847 15,13 L15,12 C15,11.4477153 15.4477153,11 16,11 Z M4,10 L5,10 L5,10 L5,16 L4,16 C3.44771525,16 3,15.5522847 3,15 L3,11 C3,10.4477153 3.44771525,10 4,10 Z M23,10 L24,10 C24.5522847,10 25,10.4477153 25,11 L25,15 C25,15.5522847 24.5522847,16 24,16 L23,16 L23,16 L23,10 Z"
+        id="AIWidget"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+/*
+
+
+ */
+export default AIWidgetIcon;