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

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

@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+import './OutgoingRepliedMessage.scss';
+import MessageContentComponent from '../IncomingMessage/MessageContentComponent/MessageContentComponent';
+import UiKitTheme from '../../../../themes/UiKitTheme';
+import { MessageEntity } from '../../../../../Domain/entity/MessageEntity';
+import { FunctionTypeMessageEntityToVoid } from '../../../../../CommonTypes/BaseViewModel';
+import ReplyFilled from '../../../../components/UI/svgs/Icons/Actions/ReplyFilled';
+import MessageContextMenu from '../MessageContextMenu/MessageContextMenu';
+import { FileType } from '../../../../../Domain/entity/FileTypes';
+
+function OutgoingRepliedMessage(props: {
+  theme: UiKitTheme | undefined;
+  messages: MessageEntity[];
+  onReply: FunctionTypeMessageEntityToVoid;
+  onForward: FunctionTypeMessageEntityToVoid;
+  repliedUserName: string;
+  renderOringinalMessage: React.ReactNode;
+  enableForwarding: boolean;
+  enableReplying: boolean;
+}) {
+  const [openMenu, setOpenMenu] = useState(false);
+  // const [haveHover, setHaveHover] = useState(false);
+
+  const disableMenu = !props.enableForwarding && !props.enableReplying;
+
+  return (
+    <div>
+      {props.messages.map((item) => (
+        <div
+          className="outgoing-replied-message"
+          // onMouseEnter={() => setHaveHover(true)}
+          // onMouseLeave={() => setHaveHover(false)}
+          onClick={() => {
+            setOpenMenu(!openMenu);
+          }}
+        >
+          <div className="outgoing-replied-message-func">
+            {
+              // haveHover &&
+              !disableMenu ? (
+                <MessageContextMenu
+                  theme={props.theme}
+                  message={item}
+                  onReply={props.onReply}
+                  onForward={props.onForward}
+                  enableReplying={props.enableReplying}
+                  enableForwarding={props.enableForwarding}
+                />
+              ) : null
+            }
+          </div>
+          <div className="outgoing-replied-message-caption">
+            <div className="outgoing-replied-message-caption-status" />
+          </div>
+          <div className="outgoing-replied-message-data">
+            <div className="outgoing-replied-message-name">
+              <div className="outgoing-replied-message-caption">
+                <div className="outgoing-replied-message-caption-replied">
+                  <div className="outgoing-replied-message-caption-replied-icon">
+                    <ReplyFilled
+                      width="16"
+                      height="16"
+                      color="var(--caption)"
+                    />
+                  </div>
+                  <div className="outgoing-replied-message-caption-replied-from-name">{`Replied to ${props.repliedUserName}`}</div>
+                </div>
+              </div>
+            </div>
+            <div
+              className="outgoing-replied-message-chat-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="outgoing-replied-message-single-line">
+                <MessageContentComponent
+                  theme={props.theme}
+                  messageEntity={item}
+                  originalTextMessage
+                  widgetTextContent=""
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+
+      {props.renderOringinalMessage}
+    </div>
+  );
+}
+
+export default OutgoingRepliedMessage;

package/src/Presentation/Views/Dialog/MessageContextMenu/MessageContextMenu.scss

@@ -0,0 +1,19 @@
+  .message-context-menu-actions {
+    border-radius: 4px;
+    display: flex;
+    flex-direction: row;
+    gap: 0px;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+    position: relative;
+
+    &__icon {
+      fill: var(--tertiary-elements, #636D78);
+      path: var(--tertiary-elements, #636D78);
+      width: 24px;
+      height: 24px;
+    }
+  }

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

@@ -0,0 +1,78 @@
+import Dropdown from '../../../ui-components/Dropdown/Dropdown';
+import { MessageEntity } from '../../../../Domain/entity/MessageEntity';
+import { FunctionTypeMessageEntityToVoid } from '../../../../CommonTypes/BaseViewModel';
+import { ReactComponent as MoreSvg } from '../../../icons/navigation/more.svg';
+import { Option } from '../../../ui-components/Dropdown/DropdownOption';
+import './MessageContextMenu.scss';
+
+export type MessageContextMenuProps = {
+  message: MessageEntity;
+  enableForwarding: boolean;
+  enableReplying: boolean;
+  onReply: FunctionTypeMessageEntityToVoid;
+  onForward: FunctionTypeMessageEntityToVoid;
+  disableActions?: boolean;
+};
+
+export default function MessageContextMenu({
+  message,
+  enableReplying,
+  enableForwarding,
+  onReply,
+  onForward,
+  disableActions = false,
+}: MessageContextMenuProps) {
+  function selectHandler(value: string) {
+    if (!disableActions) {
+      if (value === 'Reply' && enableReplying) {
+        onReply(message);
+      }
+      if (value === 'Forward' && enableForwarding) {
+        onForward(message);
+      }
+    }
+  }
+
+  // const [disabled, setDisabled] = useState(disableActions);
+
+  // useEffect(() => {
+  //   setDisabled(disableActions);
+  // }, [disableActions]);
+
+  const options: Option[] = [];
+
+  if (enableReplying) {
+    options.push({
+      value: 'Reply',
+      label: 'Reply',
+      disabled: disableActions,
+    });
+  }
+
+  if (enableForwarding) {
+    options.push({
+      value: 'Forward',
+      label: 'Forward',
+    });
+  }
+
+  return (
+    <div>
+      {enableForwarding || enableReplying ? (
+        <Dropdown
+          options={options}
+          disabled={disableActions}
+          onSelect={(value) => selectHandler(value)}
+        >
+          <div className="message-context-menu-actions">
+            <MoreSvg className="message-context-menu-actions__icon" />
+          </div>
+        </Dropdown>
+      ) : (
+        <div className="message-context-menu-actions">
+          <MoreSvg className="message-context-menu-actions__icon" />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/Presentation/Views/Dialog/MessageItem/MessageItem.scss

@@ -0,0 +1,21 @@
+.message-item-additional-part {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-start;
+  flex-shrink: 0;
+
+  &__loader {
+    width: 24px;
+    height: 24px;
+    fill: var(--main-elements);
+  }
+
+  &__actions {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: flex-start;
+  }
+}

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

@@ -0,0 +1,378 @@
+import React, { RefObject, useReducer } from 'react';
+import { MessageEntity } from '../../../../Domain/entity/MessageEntity';
+import { getTimeShort24hFormat } from '../../../../utils/DateTimeFormatter';
+import Message from '../../../ui-components/Message/Message';
+import TextBubble from '../../../ui-components/Message/Bubble/TextBubble/TextBubble';
+import AttachmentBubble from '../../../ui-components/Message/Bubble/AttachmentBubble/AttachmentBubble';
+import AIAssist from '../AIComponents/AIAssist/AIAssist';
+import MessageContextMenu from '../MessageContextMenu/MessageContextMenu';
+import { FunctionTypeMessageEntityToVoid } from '../../../../CommonTypes/BaseViewModel';
+import AITranslate from '../AIComponents/AITranslate/AITranslate';
+import { AIMessageWidget } from '../AIWidgets/AIMessageWidget';
+import Loader from '../../../ui-components/Loader/Loader';
+import MessageSeparator from '../../../ui-components/MessageSeparator/MessageSeparator';
+import { MessageDTOMapper } from '../../../../Data/source/remote/Mapper/MessageDTOMapper';
+import Avatar from '../../../ui-components/Avatar/Avatar';
+import { ReactComponent as UserSvg } from '../../../icons/contents/user.svg';
+import './MessageItem.scss';
+
+export type MessageItemProps = {
+  message: MessageEntity;
+  currentUserId?: number;
+  AITranslateWidget?: AIMessageWidget;
+  AIAssistWidget?: AIMessageWidget;
+  maxTokens: number;
+  defaultTranslationLanguage: string;
+  languagesForAITranslate: string[];
+  enableForwarding: boolean;
+  enableReplying: boolean;
+  onReply: FunctionTypeMessageEntityToVoid;
+  onForward: FunctionTypeMessageEntityToVoid;
+  // defaultGetSenderName: GetUserNameFct;
+  listRef?: RefObject<HTMLDivElement>;
+  messagesToView: MessageEntity[];
+  onError: (messageError: string) => void;
+  disableAction?: boolean;
+};
+
+interface MessageStates {
+  loading: boolean;
+  translatedText: string;
+}
+
+type Action =
+  | { type: 'SET_LOADING'; id: string; payload: boolean }
+  | { type: 'SET_TRANSLATED_TEXT'; id: string; payload: string };
+
+function reducer(
+  state: Record<string, MessageStates>,
+  action: Action,
+): Record<string, MessageStates> {
+  switch (action.type) {
+    case 'SET_LOADING':
+      return {
+        ...state,
+        [action.id]: { ...state[action.id], loading: action.payload },
+      };
+    case 'SET_TRANSLATED_TEXT':
+      return {
+        ...state,
+        [action.id]: { ...state[action.id], translatedText: action.payload },
+      };
+    default:
+      return state;
+  }
+}
+
+export default function MessageItem({
+  message,
+  currentUserId,
+  enableForwarding,
+  enableReplying,
+  onReply,
+  onForward,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  listRef,
+  messagesToView,
+  AITranslateWidget,
+  AIAssistWidget,
+  maxTokens,
+  defaultTranslationLanguage,
+  languagesForAITranslate,
+  onError,
+  disableAction = false,
+}: MessageItemProps) {
+  const messageStates: Record<string, MessageStates> = {};
+
+  const [state, dispatch] = useReducer(reducer, messageStates);
+
+  const senderName =
+    message.sender?.full_name ||
+    message.sender?.login ||
+    message.sender?.email ||
+    '';
+
+  const TypeSystemMessage = 'system';
+  const TypeIncomingMessage = 'incoming';
+  const TypeOutgoingMessage = 'outgoing';
+
+  const subTypeMessage = message.qb_message_action?.includes('forward')
+    ? 'forward'
+    : 'reply';
+
+  function checkMessageType(m: MessageEntity): string {
+    if (m.notification_type && m.notification_type.length > 0) {
+      return TypeSystemMessage;
+    }
+    if (
+      (m.sender && m.sender.id.toString() !== currentUserId?.toString()) ||
+      m.sender_id.toString() !== currentUserId?.toString()
+    ) {
+      return TypeIncomingMessage;
+    }
+
+    return TypeOutgoingMessage;
+  }
+
+  function translatedHandler(id: string, textTranslated: string) {
+    dispatch({ type: 'SET_TRANSLATED_TEXT', id, payload: textTranslated });
+  }
+
+  function fetchingHandler(isFetching: boolean, id: string) {
+    dispatch({ type: 'SET_LOADING', id, payload: isFetching });
+  }
+
+  function getStatusMessage(messageEntity: MessageEntity) {
+    if (
+      messageEntity.delivered_ids &&
+      messageEntity.delivered_ids.length > 0 &&
+      messageEntity.delivered_ids.some((id) => id !== currentUserId)
+    ) {
+      if (
+        messageEntity.read_ids &&
+        messageEntity.read_ids.length > 0 &&
+        messageEntity.read_ids.some((id) => id !== currentUserId)
+      ) {
+        return 'viewed';
+      }
+
+      return 'delivered';
+    }
+
+    return 'sent';
+  }
+
+  function renderAdditionalPart(
+    currentMessageType: 'incoming' | 'outgoing',
+    item: MessageEntity,
+  ) {
+    return (
+      <div className="message-item-additional-part__actions">
+        <MessageContextMenu
+          message={message}
+          onReply={() => onReply(item)}
+          onForward={() => onForward(item)}
+          enableReplying={enableReplying}
+          enableForwarding={enableForwarding}
+          disableActions={disableAction}
+        />
+        {currentMessageType === 'incoming' && state[item.id]?.loading && (
+          <Loader size="sm" className="message-item-additional-part__loader" />
+        )}
+        {currentMessageType === 'incoming' &&
+          !(item.attachments && item.attachments.length > 0) &&
+          AIAssistWidget && (
+            <AIAssist
+              disableAction={disableAction}
+              AIAssistWidget={AIAssistWidget}
+              loading={
+                state[item.id] && state[item.id].loading
+                  ? state[item.id].loading
+                  : false
+              }
+              onLoading={(isFetching: boolean, id: string) =>
+                fetchingHandler(isFetching, id)
+              }
+              onError={onError}
+              messageToAssist={item}
+              messageHistory={messagesToView}
+              currentUserId={currentUserId}
+              maxTokens={maxTokens}
+            />
+          )}
+      </div>
+    );
+  }
+
+  function renderForwardedReplyMessageSegment(
+    currentMessageType: 'incoming' | 'outgoing',
+  ) {
+    if (
+      message.qb_original_messages &&
+      message.qb_original_messages?.length > 0
+    ) {
+      return (
+        <>
+          {message.qb_original_messages.map((nestedMessage) => {
+            return (
+              <Message
+                key={nestedMessage.id}
+                userName={senderName}
+                status={getStatusMessage(nestedMessage)}
+                time={getTimeShort24hFormat(message.date_sent)}
+                type={currentMessageType}
+                subtype={subTypeMessage}
+                bottomPart={
+                  !(
+                    nestedMessage.attachments &&
+                    nestedMessage.attachments.length > 0
+                  ) && AITranslateWidget ? (
+                    <AITranslate
+                      disableAction={disableAction}
+                      AITranslateWidget={AITranslateWidget}
+                      defaultLanguage={defaultTranslationLanguage}
+                      languages={languagesForAITranslate}
+                      originalTextMessage={
+                        state[nestedMessage.id] &&
+                        state[nestedMessage.id].translatedText
+                          ? state[nestedMessage.id].translatedText.length === 0
+                          : true
+                      }
+                      loading={
+                        state[nestedMessage.id] &&
+                        state[nestedMessage.id].loading
+                          ? state[nestedMessage.id].loading
+                          : false
+                      }
+                      onLoading={(isFetching: boolean, id: string) =>
+                        fetchingHandler(isFetching, id)
+                      }
+                      onError={onError}
+                      messageToTranslate={nestedMessage}
+                      messageHistory={messagesToView}
+                      currentUserId={currentUserId}
+                      maxTokens={maxTokens}
+                      onTranslated={(id, textTranslated) =>
+                        translatedHandler(id, textTranslated)
+                      }
+                    />
+                  ) : undefined
+                }
+                additionalPart={
+                  <div className="message-item-additional-part">
+                    {renderAdditionalPart(currentMessageType, nestedMessage)}
+                  </div>
+                }
+              >
+                {nestedMessage.attachments &&
+                nestedMessage.attachments.length > 0 ? (
+                  <div>
+                    {/* eslint-disable-next-line @typescript-eslint/no-shadow */}
+                    {nestedMessage.attachments.map((attachment) => {
+                      return (
+                        <AttachmentBubble
+                          attachment={attachment}
+                          typeMessage={currentMessageType}
+                        />
+                      );
+                    })}
+                  </div>
+                ) : (
+                  <TextBubble
+                    text={
+                      state[nestedMessage.id] &&
+                      state[nestedMessage.id].translatedText &&
+                      state[nestedMessage.id].translatedText.length === 0
+                        ? nestedMessage.message
+                        : state[nestedMessage.id]?.translatedText ||
+                          nestedMessage.message
+                    }
+                    type={currentMessageType}
+                  />
+                )}
+              </Message>
+            );
+          })}
+        </>
+      );
+    }
+
+    return null;
+  }
+
+  const messageTypes: string = checkMessageType(message);
+
+  if (messageTypes === TypeSystemMessage) {
+    return <MessageSeparator text={message.message} type="system" />;
+  }
+
+  if (
+    messageTypes === TypeIncomingMessage ||
+    messageTypes === TypeOutgoingMessage
+  ) {
+    return (
+      <div>
+        {renderForwardedReplyMessageSegment(messageTypes)}
+        {!message.message.includes(MessageDTOMapper.FORWARD_MESSAGE_PREFIX) && (
+          <Message
+            key={message.id}
+            avatar={
+              <Avatar
+                src={message?.sender?.photo || ''}
+                icon={<UserSvg />}
+                size="md"
+              />
+            }
+            userName={senderName}
+            status={getStatusMessage(message)}
+            time={getTimeShort24hFormat(message.date_sent)}
+            type={messageTypes}
+            bottomPart={
+              !(message.attachments && message.attachments.length > 0) &&
+              AITranslateWidget ? (
+                <AITranslate
+                  disableAction={disableAction}
+                  AITranslateWidget={AITranslateWidget}
+                  defaultLanguage={defaultTranslationLanguage}
+                  languages={languagesForAITranslate}
+                  originalTextMessage={
+                    state[message.id] && state[message.id].translatedText
+                      ? state[message.id].translatedText.length === 0
+                      : true
+                  }
+                  loading={
+                    state[message.id] && state[message.id].loading
+                      ? state[message.id].loading
+                      : false
+                  }
+                  onLoading={(isFetching: boolean, id: string) =>
+                    fetchingHandler(isFetching, id)
+                  }
+                  onError={onError}
+                  messageToTranslate={message}
+                  messageHistory={messagesToView}
+                  currentUserId={currentUserId}
+                  maxTokens={maxTokens}
+                  onTranslated={(id, textTranslated) =>
+                    translatedHandler(id, textTranslated)
+                  }
+                />
+              ) : undefined
+            }
+            additionalPart={
+              <div className="message-item-additional-part">
+                {renderAdditionalPart(messageTypes, message)}
+              </div>
+            }
+          >
+            {message.attachments && message.attachments.length > 0 ? (
+              <div>
+                {message.attachments.map((attachment) => {
+                  return (
+                    <AttachmentBubble
+                      attachment={attachment}
+                      typeMessage={messageTypes}
+                    />
+                  );
+                })}
+              </div>
+            ) : (
+              <TextBubble
+                text={
+                  state[message.id] &&
+                  state[message.id].translatedText &&
+                  state[message.id].translatedText.length === 0
+                    ? message.message
+                    : state[message.id]?.translatedText || message.message
+                }
+                type={messageTypes}
+              />
+            )}
+          </Message>
+        )}
+      </div>
+    );
+  }
+
+  return null;
+}

package/src/Presentation/Views/Dialog/SystemDateBanner/SystemDateBanner.scss

@@ -0,0 +1,23 @@
+.system-date-banner-chat-banner,
+.system-date-banner-chat-banner * {
+  box-sizing: border-box;
+}
+.system-date-banner-chat-banner {
+  background: var(--incoming-background);
+  border-radius: 30px;
+  padding: 2px 8px 2px 8px;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.system-date-this-chat  {
+  color: var(--secondary-text);
+  text-align: center;
+  font: var(--label-label-small, 500 11px/16px "Roboto", sans-serif);
+  position: relative;
+}

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import './SystemDateBanner.scss';
+
+type SystemDateBannerProps = {
+  text: string;
+};
+
+// eslint-disable-next-line react/function-component-definition
+export const SystemDateBanner: React.FC<SystemDateBannerProps> = ({
+  text,
+}: SystemDateBannerProps) => {
+  return (
+    <div className="system-date-banner-chat-banner">
+      <div className="system-date-this-chat">{text}</div>
+    </div>
+  );
+};

package/src/Presentation/Views/Dialog/SystemMessageBanner/SystemMessageBanner.scss

@@ -0,0 +1,21 @@
+.system-message-chat-banner,
+.system-message-chat-banner * {
+  box-sizing: border-box;
+}
+.system-message-chat-banner {
+  padding: 2px 8px 2px 8px;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 328px;
+  position: relative;
+}
+.username-join-this-chat {
+  color: var(--secondary-text);
+  text-align: center;
+  font: var(--label-label-small, 500 11px/16px "Roboto", sans-serif);
+  position: relative;
+}

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import './SystemMessageBanner.scss';
+
+type SystemMessageBannerProps = {
+  messageText: string;
+};
+
+// eslint-disable-next-line react/function-component-definition
+export const SystemMessageBanner: React.FC<SystemMessageBannerProps> = ({
+  messageText,
+}: SystemMessageBannerProps) => {
+  return (
+    <div className="system-message-chat-banner">
+      <div className="username-join-this-chat">{messageText}</div>
+    </div>
+  );
+};