quickblox-react-ui-kit 0.2.8 → 0.3.0-beta.2

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;

package/src/Presentation/Views/Dialog/Message/MessageAttachment/AudioAttachment/AudioAttachment.scss

@@ -0,0 +1,31 @@
+.audio-body{
+  padding: 5px;
+  border-radius: 4px;
+  width: var(--max-width-audio-message);
+}
+
+.audio-controls {
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  gap: 5px;
+}
+
+.equalizer,
+.equalizer * {
+  box-sizing: border-box;
+}
+.equalizer {
+  display: flex;
+  flex-direction: row;
+  gap: 2px;
+  align-items: flex-end;
+  justify-content: flex-start;
+  position: relative;
+}
+.rectangle-equalizer {
+  background: var(--main-elements, #636d78);
+  flex-shrink: 0;
+  width: 2px;
+  position: relative;
+}

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

@@ -0,0 +1,155 @@
+import React, { useEffect, useRef, useState } from 'react';
+import './AudioAttachment.scss';
+import { FileEntity } from '../../../../../../Domain/entity/FileEntity';
+import ImagePlay from '../../../../../components/UI/svgs/Icons/Toggle/ImagePlay';
+import Pause from '../../../../../components/UI/svgs/Icons/Toggle/Pause';
+
+type AudioAttachmentComponentProps = {
+  audioFile: FileEntity;
+};
+// eslint-disable-next-line react/function-component-definition
+const AudioAttachment: React.FC<AudioAttachmentComponentProps> = ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  audioFile,
+}: AudioAttachmentComponentProps) => {
+  const [isPlaying, setIsPlaying] = useState<boolean>(false);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [secondsElapsed, setSecondsElapsed] = useState<number>(0);
+
+  const handleAudioEnd = () => {
+    setIsPlaying(false);
+  };
+
+  // eslint-disable-next-line consistent-return
+  useEffect(() => {
+    const audio = audioRef.current;
+
+    if (audio) {
+      audio.addEventListener('ended', handleAudioEnd);
+
+      return () => {
+        audio.removeEventListener('ended', handleAudioEnd);
+      };
+    }
+  }, []);
+
+  useEffect(() => {
+    let intervalId: NodeJS.Timeout;
+
+    if (isPlaying) {
+      intervalId = setInterval(() => {
+        setSecondsElapsed((prevSeconds) => prevSeconds + 1);
+      }, 100);
+    }
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [isPlaying]);
+
+  const playPauseHandler = () => {
+    const audio = audioRef.current as HTMLAudioElement;
+
+    if (audio) {
+      if (isPlaying) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+        audio.pause();
+      } else {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+        audio.play();
+      }
+
+      setIsPlaying(!isPlaying);
+    } else {
+      console.error('Audio element not found');
+    }
+  };
+
+  const generateUniqueNumbers = (
+    inputString: string,
+    count: number,
+  ): number[] => {
+    const uniqueNumbers: number[] = [];
+
+    for (let i = 0; i < count; i += 1) {
+      uniqueNumbers.push(Math.abs((inputString.charCodeAt(i) % 11) + 2));
+    }
+
+    return uniqueNumbers;
+  };
+
+  const renderEqualizer = (uid: string) => {
+    const divElements: JSX.Element[] = [];
+
+    const nums = generateUniqueNumbers(uid, 30);
+
+    for (let i = 0; i < 30; i += 1) {
+      const divStyle = {
+        height: `${nums[i]}px`,
+      };
+
+      divElements.push(
+        <div className="rectangle-equalizer" key={i} style={divStyle} />,
+      );
+    }
+
+    return divElements;
+  };
+
+  const renderRandomEqualizer = () => {
+    const divElements: JSX.Element[] = [];
+
+    for (let i = 0; i < 30; i += 1) {
+      const randomHeight = Math.floor(Math.random() * 12) + 1;
+
+      const divStyle = {
+        height: `${randomHeight}px`,
+      };
+
+      divElements.push(
+        <div className="rectangle-equalizer" key={i} style={divStyle} />,
+      );
+    }
+
+    return divElements;
+  };
+
+  return (
+    <div>
+      <audio
+        ref={audioRef}
+        className="audio-body"
+        controls
+        preload="auto"
+        style={{ display: 'none' }}
+      >
+        <source src={audioFile.url} type={audioFile?.type?.toString()} />
+        <source src={audioFile.url} type="audio/mpeg" />
+        <source src={audioFile.url} type="audio/ogg" />
+        Your browser does not support the audio element.
+      </audio>
+      <div className="audio-controls">
+        <div onClick={playPauseHandler}>
+          {/* eslint-disable-next-line react/button-has-type */}
+          {isPlaying ? (
+            <Pause width="24px" height="24px" color="var(--main-elements)" />
+          ) : (
+            <ImagePlay
+              width="24px"
+              height="24px"
+              color="var(--main-elements)"
+            />
+          )}
+        </div>
+        {isPlaying ? (
+          <div className="equalizer">{renderRandomEqualizer()}</div>
+        ) : (
+          <div className="equalizer">{renderEqualizer(audioFile.uid)}</div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default AudioAttachment;

package/src/Presentation/Views/Dialog/Message/MessageAttachment/DefaultAttachment/DefaultAttachment.scss

@@ -0,0 +1,76 @@
+.default-attachment-component-container,
+.default-attachment-component-container * {
+  box-sizing: border-box;
+}
+.default-attachment-component-container {
+  // background: var(--incoming-background, #e4e6e8);
+  border-radius: 22px 22px 22px 0px;
+  padding: 8px 16px 8px 1px;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  position: relative;
+
+  &--file-wrapper {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: stretch;
+    flex-shrink: 0;
+    position: relative;
+
+    &--placeholder {
+      flex-shrink: 0;
+      width: 32px;
+      height: 32px;
+      position: static;
+
+      &__bg {
+        background: var(--field-border, #90979f);
+        border-radius: 8px;
+        width: 32px;
+        height: 32px;
+        position: absolute;
+        left: 0px;
+        top: 0px;
+      }
+
+      &__icon {
+        border-radius: 4px;
+        padding: 4px;
+        display: flex;
+        flex-direction: row;
+        gap: 0px;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        position: absolute;
+        left: 4px;
+        top: 4px;
+      }
+    }
+
+    &--file-d {
+      color: var(--secondary-elements, #202f3e);
+      text-align: left;
+      font: 400 14px/20px "Roboto", sans-serif;
+      position: relative;
+    }
+  }
+}
+
+
+
+.media-text-document {
+  align-self: stretch;
+  flex: 1;
+  position: relative;
+  overflow: visible;
+}
+

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import './DefaultAttachment.scss';
+import TextDocument from '../../../../../components/UI/svgs/Icons/Media/TextDocument';
+
+function trimFileName(fileName: string) {
+  if (fileName.length > 10) {
+    return `${fileName.substring(0, 9)}... .${fileName.slice(
+      (Math.max(0, fileName.lastIndexOf('.')) || Infinity) + 1,
+    )}`;
+  }
+
+  return fileName;
+}
+
+type DefaultAttachmentComponentProps = {
+  fileName: string;
+  fileUrl: string;
+};
+// eslint-disable-next-line react/function-component-definition
+const DefaultAttachment: React.FC<DefaultAttachmentComponentProps> = ({
+  fileName,
+  fileUrl,
+}: DefaultAttachmentComponentProps) => {
+  return (
+    <div>
+      <div className="default-attachment-component-container">
+        <div className="default-attachment-component-container--file-wrapper">
+          <div className="default-attachment-component-container--file-wrapper--placeholder">
+            <div className="default-attachment-component-container--file-wrapper--placeholder__bg" />
+            <div className="default-attachment-component-container--file-wrapper--placeholder__icon">
+              <a href={fileUrl} target="_blank" download rel="noreferrer">
+                <TextDocument
+                  width="16"
+                  height="16"
+                  applyZoom
+                  color="var(--incoming-background)"
+                />
+              </a>
+            </div>
+          </div>
+          <div className="default-attachment-component-container--file-wrapper__file-d">
+            {trimFileName(fileName)}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DefaultAttachment;

package/src/Presentation/Views/Dialog/Message/MessageAttachment/ImageAttachment/ImageAttachment.scss

@@ -0,0 +1,14 @@
+.message-attachment-image-body{
+  max-width: var(--max-width-image-message);
+  max-height: 160px;
+  padding: 0;
+  border-radius: 4px;
+}
+
+.message-attachment-image {
+  display: flex;
+  justify-content: center;
+  flex-flow: row;
+  max-width: var(--max-width-image-message);
+  max-height: 160px;
+}