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

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

@@ -1,103 +0,0 @@
-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

@@ -1,19 +0,0 @@
-  .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

@@ -1,78 +0,0 @@
-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

@@ -1,21 +0,0 @@
-.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

@@ -1,378 +0,0 @@
-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

@@ -1,23 +0,0 @@
-.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

@@ -1,17 +0,0 @@
-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

@@ -1,21 +0,0 @@
-.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

@@ -1,17 +0,0 @@
-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>
-  );
-};