quickblox-react-ui-kit 0.4.2-beta.2 → 0.4.2-beta.4

package/src/Presentation/Views/Dialog/Message/IncomingRepliedMessage/IncomingRepliedMessage.tsx

@@ -0,0 +1,298 @@
+import React, { useEffect, useState } from 'react';
+import './IncomingRepliedMessage.scss';
+import MessageContentComponent from '../IncomingMessage/MessageContentComponent/MessageContentComponent';
+import UiKitTheme from '../../../../themes/UiKitTheme';
+import { MessageEntity } from '../../../../../Domain/entity/MessageEntity';
+import { FunctionTypeMessageEntityToVoid } from '../../../../../CommonTypes/BaseViewModel';
+import { AIMessageWidget } from '../../AIWidgets/AIMessageWidget';
+import useQbInitializedDataContext from '../../../../providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
+import { AIUtils } from '../../../../../utils/utils';
+import { DefaultConfigurations } from '../../../../../Data/DefaultConfigurations';
+import ReplyFilled from '../../../../components/UI/svgs/Icons/Actions/ReplyFilled';
+import AITranslateComponent from '../../AIComponents/AITranslateComponent/AITranslateComponent';
+import AIAssistComponent from '../../AIComponents/AIAssistComponent/AIAssistComponent';
+import MessageContextMenu from '../MessageContextMenu/MessageContextMenu';
+import AvatarContentIncomingUser, {
+  AvatarContentIncomingUserProps,
+} from '../IncomingMessage/AvatarContentIncomingUser/AvatarContentIncomingUser';
+import LoaderComponent from '../../../../components/UI/Placeholders/LoaderComponent/LoaderComponent';
+import { FileType } from '../../../../../Domain/entity/FileTypes';
+
+function IncomingRepliedMessage(props: {
+  theme: UiKitTheme | undefined;
+  // senderNameFct: GetUserNameFct;
+  messages: MessageEntity[];
+  // eslint-disable-next-line react/no-unused-prop-types
+  date_sent?: string;
+  userIconRenderer?: (
+    props: AvatarContentIncomingUserProps,
+  ) => React.ReactElement;
+  onReply: FunctionTypeMessageEntityToVoid;
+  onForward: FunctionTypeMessageEntityToVoid;
+  repliedUserName: string;
+  renderOringinalMessage: React.ReactNode;
+  AITranslation?: AIMessageWidget;
+  AIAnswerToMessage?: AIMessageWidget;
+  onStartLoader: () => void;
+  // eslint-disable-next-line react/no-unused-prop-types
+  onStopLoader: () => void;
+  onErrorToast: (messageError: string) => void;
+  currentUserId?: number;
+  messagesToView: MessageEntity[];
+  enableForwarding: boolean;
+  enableReplying: boolean;
+  // userIconRenderer?: (
+  //   props: AvatarContentIncomingUserProps,
+  // ) => React.ReactElement;
+  // index?: number;
+  // updateData?: (index: number, text: string) => void;
+  // translationDATA?: Record<number, string>;
+}) {
+  const currentContext = useQbInitializedDataContext();
+
+  const disableMenu = !props.enableForwarding && !props.enableReplying;
+
+  // const [haveHover, setHaveHover] = useState(false);
+  const [widgetTextContent, setWidgetTextContent] = useState<string>('');
+  const [originalTextMessage, setOriginalTextMessage] = useState<boolean>(true);
+  const [waitAITranslateWidget, setWaitAITranslateWidget] =
+    useState<boolean>(false);
+  const [waitAIWidget, setWaitAIWidget] = useState<boolean>(false);
+
+  useEffect(() => {
+    setWaitAIWidget(false);
+  }, [props.AITranslation?.textToContent]);
+
+  useEffect(() => {
+    setWaitAIWidget(false);
+  }, [props.AIAnswerToMessage?.textToContent]);
+
+  const maxTokensForAITranslate =
+    currentContext.InitParams.qbConfig.configAIApi.AITranslateWidgetConfig
+      .maxTokens;
+  const maxTokensForAnswerAssist =
+    currentContext.InitParams.qbConfig.configAIApi.AIAnswerAssistWidgetConfig
+      .maxTokens;
+
+  const sendMessageToAIAssistAnswer = (
+    message: MessageEntity,
+    messagesToView: MessageEntity[],
+    currentUserId?: number,
+    AIAnswerToMessage?: AIMessageWidget,
+  ) => {
+    if (!waitAIWidget) {
+      // setWaitAIWidget(true);
+      props.onStartLoader();
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      AIAnswerToMessage?.textToWidget(
+        message.message,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-unsafe-call
+        AIUtils.messageEntitiesToIChatMessageCollection(
+          messagesToView,
+          currentUserId,
+          maxTokensForAnswerAssist,
+        ),
+      )
+        // eslint-disable-next-line promise/always-return
+        .then(() => {
+          props.onStopLoader();
+        })
+        .catch(() => {
+          props.onErrorToast('Assist failed.');
+          props.onStopLoader();
+        });
+    }
+  };
+
+  const sendMessageToTranslate = async (
+    message: MessageEntity,
+    messagesToView: MessageEntity[],
+    currentUserId?: number,
+    AITranslation?: AIMessageWidget,
+    selectedLanguage?: string,
+  ) => {
+    if (!waitAITranslateWidget) {
+      setWaitAITranslateWidget(true);
+      await AITranslation?.textToWidget(
+        message.message,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-unsafe-call
+        AIUtils.messageEntitiesToIChatMessageCollection(
+          messagesToView,
+          currentUserId,
+          maxTokensForAITranslate,
+        ),
+        {
+          language:
+            selectedLanguage ||
+            DefaultConfigurations.getDefaultLanguageForAITranslate(
+              currentContext.InitParams.qbConfig.configAIApi
+                .AITranslateWidgetConfig,
+            ),
+        },
+      )
+        .then((textTranslate) => {
+          // eslint-disable-next-line promise/always-return
+          setWidgetTextContent(textTranslate || '');
+          // eslint-disable-next-line promise/always-return
+          if (textTranslate === 'Translation failed.') {
+            props.onErrorToast('Translation failed.');
+          }
+          setWaitAITranslateWidget(false);
+          setOriginalTextMessage(false);
+        })
+        .catch(() => {
+          props.onErrorToast('Translation failed.');
+          setWaitAITranslateWidget(false);
+          setOriginalTextMessage(true);
+        });
+    }
+  };
+
+  return (
+    <div>
+      {props.messages.map((item) => (
+        <div
+          className="incoming-replied-message"
+          // onMouseEnter={() => setHaveHover(true)}
+          // onMouseLeave={() => setHaveHover(false)}
+        >
+          <div className="incoming-replied-message-avatar-wrap">
+            <div className="incoming-replied-message-avatar">
+              <div className="incoming-replied-message-avatar-rectangle" />
+              {props.userIconRenderer ? (
+                props.userIconRenderer({
+                  userId: props.currentUserId as number,
+                })
+              ) : (
+                <AvatarContentIncomingUser />
+              )}
+            </div>
+          </div>
+          <div className="incoming-replied-message-incoming">
+            <div className="incoming-replied-message-incoming-name">
+              <div className="incoming-replied-message-incoming-name-caption">
+                <div className="incoming-replied-message-incoming-name-caption-forward">
+                  <div className="incoming-replied-message-incoming-name-caption-forward-icon">
+                    <ReplyFilled
+                      width="16"
+                      height="16"
+                      color="var(--caption)"
+                    />
+                  </div>
+                  <div className="incoming-replied-message-incoming-name-caption-forward-from-name">
+                    {`Replied to ${props.repliedUserName}`}
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="incoming-replied-message-incoming-message">
+              <div className="incoming-replied-message-incoming-bubble">
+                <div
+                  className="incoming-replied-message-incoming-bubble-background"
+                  style={{
+                    background:
+                      item.attachments &&
+                      (item.attachments[0].type
+                        .toString()
+                        .includes(FileType.image) ||
+                        item.attachments[0].type
+                          .toString()
+                          .includes(FileType.video))
+                        ? 'none'
+                        : undefined,
+                  }}
+                >
+                  <div className="incoming-replied-message-incoming-bubble-background-line">
+                    <MessageContentComponent
+                      theme={props.theme}
+                      messageEntity={item}
+                      originalTextMessage={originalTextMessage}
+                      widgetTextContent={widgetTextContent}
+                    />
+                  </div>
+                </div>
+                {props.AITranslation && !item.attachments ? (
+                  <AITranslateComponent
+                    onTranslate={(language) => {
+                      sendMessageToTranslate(
+                        item,
+                        props.messagesToView,
+                        props.currentUserId,
+                        props.AITranslation,
+                        language,
+                      );
+                    }}
+                    onClickOriginalText={() => {
+                      setOriginalTextMessage(true);
+                      setWidgetTextContent('');
+                    }}
+                    originalTextMessage={originalTextMessage}
+                    waitAITranslateWidget={waitAITranslateWidget}
+                    languagesForAITranslate={DefaultConfigurations.getAdditionalLanguagesForAITranslate(
+                      currentContext.InitParams.qbConfig.configAIApi
+                        .AITranslateWidgetConfig,
+                    )}
+                  />
+                ) : (
+                  <div style={{ height: '16px' }} />
+                )}
+              </div>
+              <div className="incoming-replied-ai-transcribe">
+                {
+                  // haveHover &&
+                  !disableMenu ? (
+                    <MessageContextMenu
+                      theme={props.theme}
+                      message={item}
+                      onReply={props.onReply}
+                      onForward={props.onForward}
+                      enableReplying={props.enableReplying}
+                      enableForwarding={props.enableForwarding}
+                    />
+                  ) : null
+                }
+                {waitAITranslateWidget ? (
+                  <div className="incoming-replied-assist-answer">
+                    <div className="icon">
+                      <div>
+                        <LoaderComponent
+                          width="24"
+                          height="24"
+                          applyZoom
+                          color="var(--caption)"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                ) : null}
+                {!waitAITranslateWidget && !item.attachments
+                  ? props.AIAnswerToMessage && (
+                      <AIAssistComponent
+                        onAssistAnswer={() => {
+                          sendMessageToAIAssistAnswer(
+                            item,
+                            props.messagesToView,
+                            props.currentUserId,
+                            props.AIAnswerToMessage,
+                          );
+                        }}
+                        waitAIWidget={waitAIWidget}
+                      />
+                    )
+                  : null}
+              </div>
+              <div className="incoming-replied-message-incoming-message-caption">
+                <div className="incoming-replied-message-incoming-message-caption-time">
+                  {/* {props.date_sent} */}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+      <div>{props.renderOringinalMessage}</div>
+    </div>
+  );
+}
+
+export default IncomingRepliedMessage;

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

@@ -0,0 +1,378 @@
+import React, { useEffect, useState } from 'react';
+import {
+  FunctionTypeBooleanToVoid,
+  FunctionTypeMessageEntityToVoid,
+  FunctionTypeStringToVoid,
+} from '../../../../CommonTypes/BaseViewModel';
+import { MessageEntity } from '../../../../Domain/entity/MessageEntity';
+import { getTimeShort24hFormat } from '../../../../utils/DateTimeFormatter';
+import { SystemMessageBanner } from '../SystemMessageBanner/SystemMessageBanner';
+import UiKitTheme from '../../../themes/UiKitTheme';
+import { AIMessageWidget } from '../AIWidgets/AIMessageWidget';
+import {
+  GetUserNameFct,
+  IncomingMessage,
+} from './IncomingMessage/IncomingMessage';
+import IncomingForwardedMessage from './IncomingForwardedMessage/IncomingForwardedMessage';
+import OutgoingRepliedMessage from './OutgoingRepliedMessage/OutgoingRepliedMessage';
+import { OutgoingMessage } from './OutgoingMessage/OutgoingMessage';
+import MessageContentComponent from './IncomingMessage/MessageContentComponent/MessageContentComponent';
+import OutgoingForwardedMessage from './OutgoinForwardedMessage/OutgoinForwardedMessage';
+import IncomingRepliedMessage from './IncomingRepliedMessage/IncomingRepliedMessage';
+import { MessageDTOMapper } from '../../../../Data/source/remote/Mapper/MessageDTOMapper';
+
+type MessageProps = {
+  message: MessageEntity;
+  userId: number;
+  setWaitAIWidget: FunctionTypeBooleanToVoid;
+  setShowErrorToast: FunctionTypeBooleanToVoid;
+  setMessageErrorToast: FunctionTypeStringToVoid;
+  messagesToView: MessageEntity[];
+  AITranslateWidget: AIMessageWidget;
+  AIAssistWidget: AIMessageWidget;
+  onReply: FunctionTypeMessageEntityToVoid;
+  onForward: FunctionTypeMessageEntityToVoid;
+  defaultGetSenderName: GetUserNameFct;
+  theme?: UiKitTheme;
+  enableForwarding: boolean;
+  enableReplying: boolean;
+};
+
+// eslint-disable-next-line react/function-component-definition
+const Message: React.FC<MessageProps> = ({
+  message,
+  userId,
+  setWaitAIWidget,
+  setShowErrorToast,
+  setMessageErrorToast,
+  messagesToView,
+  AITranslateWidget,
+  AIAssistWidget,
+  onReply,
+  onForward,
+  defaultGetSenderName,
+  theme,
+  enableForwarding,
+  enableReplying,
+}: MessageProps) => {
+  const TypeSystemMessage = 'SystemMessage';
+  const TypeIncomingMessage = 'IncomingMessage';
+  const TypeOutgoingMessage = 'OutgoingMessage';
+
+  let messageView: JSX.Element;
+
+  const [userNameForReplyForward, setUserNameForReplyForward] =
+    useState<string>('');
+
+  async function getUserNameForReplyForward() {
+    if (
+      message.origin_sender_name &&
+      !message.origin_sender_name.includes('undefined')
+    ) {
+      setUserNameForReplyForward(message.origin_sender_name);
+    } else if (
+      message.qb_original_messages &&
+      message.qb_original_messages?.length > 0
+    ) {
+      const userName = await defaultGetSenderName({
+        userId: message.qb_original_messages[0].sender_id,
+        sender: message.qb_original_messages[0].sender,
+      });
+
+      setUserNameForReplyForward(userName || '');
+    }
+  }
+
+  useEffect(() => {
+    getUserNameForReplyForward();
+  }, []);
+
+  const checkMessageType = (m: MessageEntity): string => {
+    if (m.notification_type && m.notification_type.length > 0) {
+      return TypeSystemMessage;
+    }
+    if (
+      (m.sender && m.sender.id.toString() !== userId?.toString()) ||
+      m.sender_id.toString() !== userId?.toString()
+    ) {
+      return TypeIncomingMessage;
+    }
+
+    return TypeOutgoingMessage;
+  };
+
+  const messageTypes: string = checkMessageType(message);
+
+  if (messageTypes === TypeSystemMessage) {
+    messageView = (
+      <div
+        className="message-view-container--system-message-wrapper"
+        key={Date.now().toString()}
+      >
+        <SystemMessageBanner messageText={message.message} />
+      </div>
+    );
+  } else if (messageTypes === TypeIncomingMessage) {
+    if (
+      message.qb_original_messages &&
+      message.qb_original_messages?.length > 0
+    ) {
+      const typeMessage =
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+        message.qb_message_action?.includes('forward') ? 'forward' : 'reply';
+
+      if (typeMessage === 'reply') {
+        messageView = (
+          <IncomingRepliedMessage
+            enableReplying={enableReplying}
+            enableForwarding={enableForwarding}
+            theme={theme}
+            messages={message.qb_original_messages}
+            date_sent={getTimeShort24hFormat(message.date_sent)}
+            repliedUserName={message.origin_sender_name || ''}
+            onReply={onReply}
+            onForward={onForward}
+            onStartLoader={() => {
+              setWaitAIWidget(true);
+            }}
+            onStopLoader={() => {
+              setWaitAIWidget(false);
+            }}
+            onErrorToast={(messageError: string) => {
+              setShowErrorToast(true);
+              setMessageErrorToast(messageError);
+            }}
+            currentUserId={userId}
+            messagesToView={messagesToView}
+            AITranslation={AITranslateWidget}
+            AIAnswerToMessage={AIAssistWidget}
+            renderOringinalMessage={
+              <IncomingMessage
+                theme={theme}
+                senderNameFct={defaultGetSenderName}
+                message={message}
+                date_sent={getTimeShort24hFormat(message.date_sent)}
+                onReply={onReply}
+                onForward={onForward}
+                // element={messageContentRender(message)}
+                onStartLoader={() => {
+                  setWaitAIWidget(true);
+                }}
+                onStopLoader={() => {
+                  setWaitAIWidget(false);
+                }}
+                onErrorToast={(messageError: string) => {
+                  setShowErrorToast(true);
+                  setMessageErrorToast(messageError);
+                }}
+                currentUserId={userId}
+                messagesToView={messagesToView}
+                AITranslation={AITranslateWidget}
+                AIAnswerToMessage={AIAssistWidget}
+                enableReplying={enableReplying}
+                enableForwarding={enableForwarding}
+              />
+            }
+          />
+        );
+      } else {
+        messageView = (
+          <IncomingForwardedMessage
+            enableReplying={enableReplying}
+            enableForwarding={enableForwarding}
+            theme={theme}
+            messages={message.qb_original_messages}
+            repliedUserName={message.origin_sender_name || ''}
+            onReply={onReply}
+            onForward={onForward}
+            date_sent={getTimeShort24hFormat(message.date_sent)}
+            onStartLoader={() => {
+              setWaitAIWidget(true);
+            }}
+            onStopLoader={() => {
+              setWaitAIWidget(false);
+            }}
+            onErrorToast={(messageError: string) => {
+              setShowErrorToast(true);
+              setMessageErrorToast(messageError);
+            }}
+            currentUserId={userId}
+            messagesToView={messagesToView}
+            AITranslation={AITranslateWidget}
+            AIAnswerToMessage={AIAssistWidget}
+            renderOringinalMessage={
+              !message.message.includes(
+                MessageDTOMapper.FORWARD_MESSAGE_PREFIX,
+              ) ? (
+                <IncomingMessage
+                  theme={theme}
+                  senderNameFct={defaultGetSenderName}
+                  message={message}
+                  date_sent={getTimeShort24hFormat(message.date_sent)}
+                  onReply={onReply}
+                  onForward={onForward}
+                  // element={messageContentRender(message)}
+                  onStartLoader={() => {
+                    setWaitAIWidget(true);
+                  }}
+                  onStopLoader={() => {
+                    setWaitAIWidget(false);
+                  }}
+                  onErrorToast={(messageError: string) => {
+                    setShowErrorToast(true);
+                    setMessageErrorToast(messageError);
+                  }}
+                  currentUserId={userId}
+                  messagesToView={messagesToView}
+                  AITranslation={AITranslateWidget}
+                  AIAnswerToMessage={AIAssistWidget}
+                  enableReplying={enableReplying}
+                  enableForwarding={enableForwarding}
+                />
+              ) : null
+            }
+          />
+        );
+      }
+    } else {
+      messageView = (
+        <IncomingMessage
+          theme={theme}
+          senderNameFct={defaultGetSenderName}
+          message={message}
+          date_sent={getTimeShort24hFormat(message.date_sent)}
+          onReply={onReply}
+          onForward={onForward}
+          // element={messageContentRender(message)}
+          onStartLoader={() => {
+            setWaitAIWidget(true);
+          }}
+          onStopLoader={() => {
+            setWaitAIWidget(false);
+          }}
+          onErrorToast={(messageError: string) => {
+            setShowErrorToast(true);
+            setMessageErrorToast(messageError);
+          }}
+          currentUserId={userId}
+          messagesToView={messagesToView}
+          AITranslation={AITranslateWidget}
+          AIAnswerToMessage={AIAssistWidget}
+          enableReplying={enableReplying}
+          enableForwarding={enableForwarding}
+        />
+      );
+    }
+  } else if (
+    message.qb_original_messages &&
+    message.qb_original_messages?.length > 0
+  ) {
+    const typeMessage =
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      message.qb_message_action?.includes('forward') ? 'forward' : 'reply';
+
+    if (typeMessage === 'reply') {
+      messageView = (
+        <OutgoingRepliedMessage
+          enableReplying={enableReplying}
+          enableForwarding={enableForwarding}
+          messages={message.qb_original_messages}
+          repliedUserName={
+            userNameForReplyForward.length > 0
+              ? userNameForReplyForward
+              : 'UNDEFINED REPLIED USER NAME'
+          }
+          onReply={onReply}
+          onForward={onForward}
+          theme={theme}
+          renderOringinalMessage={
+            <OutgoingMessage
+              enableReplying={enableReplying}
+              enableForwarding={enableForwarding}
+              message={message}
+              date_sent={getTimeShort24hFormat(message.date_sent)}
+              onReply={onReply}
+              onForward={onForward}
+              theme={theme}
+              element={
+                <MessageContentComponent
+                  theme={theme}
+                  messageEntity={message}
+                  originalTextMessage
+                  widgetTextContent=""
+                />
+              }
+            />
+          }
+        />
+      );
+    } else {
+      messageView = (
+        <OutgoingForwardedMessage
+          enableReplying={enableReplying}
+          enableForwarding={enableForwarding}
+          messages={message.qb_original_messages}
+          repliedUserName={
+            userNameForReplyForward.length > 0
+              ? userNameForReplyForward
+              : 'UNDEFINED FORWARDING USER NAME'
+          }
+          date_sent={getTimeShort24hFormat(message.date_sent)}
+          status_message={message.delivered_ids && message.delivered_ids.length}
+          onReply={onReply}
+          onForward={onForward}
+          theme={theme}
+          renderOriginalMessage={
+            !message.message.includes(
+              MessageDTOMapper.FORWARD_MESSAGE_PREFIX,
+            ) ? (
+              // message.message.trim().length > 0
+              <OutgoingMessage
+                enableReplying={enableReplying}
+                enableForwarding={enableForwarding}
+                message={message}
+                date_sent={getTimeShort24hFormat(message.date_sent)}
+                onReply={onReply}
+                onForward={onForward}
+                theme={theme}
+                element={
+                  <MessageContentComponent
+                    theme={theme}
+                    messageEntity={message}
+                    originalTextMessage
+                    widgetTextContent=""
+                  />
+                }
+              />
+            ) : null
+          }
+        />
+      );
+    }
+  } else {
+    messageView = (
+      <OutgoingMessage
+        enableReplying={enableReplying}
+        enableForwarding={enableForwarding}
+        message={message}
+        date_sent={getTimeShort24hFormat(message.date_sent)}
+        onReply={onReply}
+        onForward={onForward}
+        theme={theme}
+        // element={messageContentRender(message)}
+        element={
+          <MessageContentComponent
+            theme={theme}
+            messageEntity={message}
+            originalTextMessage
+            widgetTextContent=""
+          />
+        }
+      />
+    );
+  }
+
+  return messageView;
+};
+
+export default Message;