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

package/src/Presentation/Views/Dialog/Message/IncomingForwardedMessage/IncomingForwardedMessage.scss

@@ -0,0 +1,250 @@
+.incoming-forward-message,
+.incoming-forward-message * {
+  box-sizing: border-box;
+}
+.incoming-forward-message {
+  background: var(--color-background, #ffffff);
+  padding: 10px 16px 0px 8px;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: flex-end;
+  justify-content: flex-start;
+  align-self: stretch;
+  flex-shrink: 0;
+  position: relative;
+}
+.incoming-forward-message-avatar-wrap {
+  padding: 0px 0px 16px 0px;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: flex-end;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  position: relative;
+}
+.incoming-forward-message-avatar {
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
+  position: relative;
+}
+.incoming-forward-message-avatar-rectangle {
+  position: absolute;
+  right: 0%;
+  left: 0%;
+  width: 100%;
+  bottom: 0%;
+  top: 0%;
+  height: 100%;
+}
+.incoming-forward-message-avatar-ellipse {
+  border-radius: 50%;
+  position: absolute;
+  right: 0%;
+  left: 0%;
+  width: 100%;
+  bottom: 0%;
+  top: 0%;
+  height: 100%;
+}
+.ncoming-forward-message-incoming {
+  display: flex;
+  width: 320px;
+  max-width: 320px;
+  flex-direction: column;
+  gap: 2px;
+  align-items: flex-start;
+  justify-content: flex-end;
+  flex-shrink: 0;
+  position: relative;
+}
+.incoming-forward-message-incoming-name {
+  // padding: 0px 16px 0px 16px;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  position: relative;
+}
+.incoming-forward-message-incoming-name-caption {
+  display: flex;
+  flex-direction: row;
+  gap: 0px;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  position: relative;
+}
+.incoming-forward-message-incoming-name-caption-forward {
+  display: flex;
+  flex-direction: row;
+  gap: 2px;
+  align-items: center;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  position: relative;
+}
+.incoming-forward-message-incoming-name-caption-forward-icon {
+  border-radius: 4px;
+  display: flex;
+  flex-direction: row;
+  gap: 0px;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  position: relative;
+}
+.actions-forward-filled {
+  align-self: stretch;
+  flex: 1;
+  height: auto;
+  position: relative;
+  overflow: visible;
+}
+.incoming-forward-message-incoming-name-caption-forward-from-name {
+  color: var(--tertiary-elements, #636d78);
+  text-align: left;
+  font: var(--label-label-medium, 500 12px/16px "Roboto-Medium", sans-serif);
+  position: relative;
+}
+.incoming-forward-message-incoming-message {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: flex-end;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  position: relative;
+}
+.incoming-forward-message-incoming-bubble {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: flex-start;
+  justify-content: flex-end;
+  // flex-shrink: 0;
+  position: relative;
+  // max-width: 320px;
+  max-width: var(--max-width-message-bubble);
+}
+.incoming-forward-message-incoming-bubble-background {
+  background: var(--incoming-background, #e4e6e8);
+  border-radius: 22px 22px 22px 0px;
+  padding: 8px 12px 8px 12px;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  position: relative;
+}
+.incoming-forward-message-incoming-bubble-background-line {
+  color: var(--main-tex, #0b1b0f);
+  text-align: left;
+  font: var(--body-body-medium, 400 14px/20px "Roboto-Regular", sans-serif);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.incoming-forward-message-incoming-bubble-translate {
+  padding: 0px 12px 0px 0px;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-end;
+  align-self: stretch;
+  flex-shrink: 0;
+  position: relative;
+}
+.incoming-forward-message-incoming-bubble-translate-translate {
+  display: flex;
+  flex-direction: row;
+  gap: 0px;
+  align-items: center;
+  justify-content: flex-end;
+  flex: 1;
+  position: relative;
+}
+.incoming-forward-message-incoming-bubble-translate-translate-show {
+  color: var(--secondary-text, #636d78);
+  text-align: right;
+  font: var(--label-label-small, 500 11px/16px "Roboto-Medium", sans-serif);
+  position: relative;
+}
+.incoming-forward-message-incoming-bubble-translate-icon {
+  border-radius: 4px;
+  display: flex;
+  flex-direction: row;
+  gap: 0px;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  position: relative;
+}
+
+.media-translate {
+  align-self: stretch;
+  flex: 1;
+  height: auto;
+  position: relative;
+  overflow: visible;
+}
+.incoming-forward-ai-transcribe {
+  padding: 0px 0px 20px 0px;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  flex-shrink: 0;
+  position: relative;
+}
+.incoming-forward-ai-transcribe-icon {
+  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;
+}
+.actions-assist-answer {
+  padding: 5px 3px 5px 3px;
+  align-self: stretch;
+  flex: 1;
+  height: auto;
+  position: relative;
+  overflow: visible;
+}
+.incoming-forward-message-incoming-message-caption {
+  padding: 0px 0px 16px 0px;
+  display: flex;
+  flex-direction: row;
+  gap: 0px;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  position: relative;
+}
+.incoming-forward-message-incoming-message-caption-time {
+  color: var(--secondary-text, #636d78);
+  text-align: right;
+  font: var(--label-label-small, 500 11px/16px "Roboto-Medium", sans-serif);
+  position: relative;
+}
+

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

@@ -0,0 +1,290 @@
+import React, { useEffect, useState } from 'react';
+import './IncomingForwardedMessage.scss';
+import AvatarContentIncomingUser, {
+  AvatarContentIncomingUserProps,
+} from '../IncomingMessage/AvatarContentIncomingUser/AvatarContentIncomingUser';
+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 ForwardFilled from '../../../../components/UI/svgs/Icons/Actions/ForwardFilled';
+import MessageContentComponent from '../IncomingMessage/MessageContentComponent/MessageContentComponent';
+import AITranslateComponent from '../../AIComponents/AITranslateComponent/AITranslateComponent';
+import MessageContextMenu from '../MessageContextMenu/MessageContextMenu';
+import LoaderComponent from '../../../../components/UI/Placeholders/LoaderComponent/LoaderComponent';
+import AIAssistComponent from '../../AIComponents/AIAssistComponent/AIAssistComponent';
+import { FileType } from '../../../../../Domain/entity/FileTypes';
+
+function IncomingForwardedMessage(props: {
+  theme?: UiKitTheme;
+  // senderNameFct: GetUserNameFct;
+  messages: MessageEntity[];
+  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;
+}) {
+  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(() => {
+          // setWaitAITranslateWidget(false);
+          props.onStopLoader();
+        })
+        .catch(() => {
+          props.onErrorToast('Assist failed. Try again.');
+          // setWaitAITranslateWidget(false);
+          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. Try again.');
+          }
+          setWaitAITranslateWidget(false);
+          setOriginalTextMessage(false);
+        })
+        .catch(() => {
+          props.onErrorToast('Translation failed. Try again.');
+          setWaitAITranslateWidget(false);
+          setOriginalTextMessage(true);
+        });
+    }
+  };
+
+  return (
+    <div>
+      {props.messages.map((item) => (
+        <div className="incoming-forward-message">
+          <div className="incoming-forward-message-avatar-wrap">
+            <div className="incoming-forward-message-avatar">
+              <div className="incoming-forward-message-avatar-rectangle" />
+              {props.userIconRenderer ? (
+                props.userIconRenderer({
+                  userId: props.currentUserId as number,
+                })
+              ) : (
+                <AvatarContentIncomingUser />
+              )}
+            </div>
+          </div>
+          <div className="incoming-forward-message-incoming">
+            <div className="incoming-forward-message-incoming-name">
+              <div className="incoming-forward-message-incoming-name-caption">
+                <div className="incoming-forward-message-incoming-name-caption-forward">
+                  <div className="incoming-forward-message-incoming-name-caption-forward-icon">
+                    <ForwardFilled
+                      width="16"
+                      height="16"
+                      color="var(--caption)"
+                    />
+                  </div>
+                  <div className="incoming-forward-message-incoming-name-caption-forward-from-name">
+                    Forwarded from {props.repliedUserName}
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className="incoming-forward-message-incoming-message">
+              <div className="incoming-forward-message-incoming-bubble">
+                <div
+                  className="incoming-forward-message-incoming-bubble-background"
+                  style={{
+                    // todo need refactoring - should use only item.attachments[0].type
+                    background:
+                      item.attachments &&
+                      (item.attachments[0].type
+                        .toString()
+                        .includes(FileType.image) ||
+                        item.attachments[0].type
+                          .toString()
+                          .includes(FileType.video))
+                        ? 'none'
+                        : undefined,
+                  }}
+                >
+                  <div className="incoming-forward-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-forward-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="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-forward-message-incoming-message-caption">
+                <div className="incoming-forward-message-incoming-message-caption-time">
+                  {props.date_sent}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+      <div>{props.renderOringinalMessage}</div>
+    </div>
+  );
+}
+
+export default IncomingForwardedMessage;

package/src/Presentation/Views/Dialog/Message/IncomingMessage/AvatarContentIncomingUser/AvatarContentIncomingUser.scss

@@ -0,0 +1,22 @@
+.rectangle {
+  width: 36px;
+  height: 36px;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+}
+.ellipse {
+  background: var(--secondary-secondary-100, #bcc1c5);
+  border-radius: 50%;
+  width: 36px;
+  height: 36px;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+}
+.contents-user {
+  position: absolute;
+  left: 6.43px;
+  top: 6.43px;
+  overflow: visible;
+}

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import './AvatarContentIncomingUser.scss';
+
+export interface AvatarContentIncomingUserProps {
+  // eslint-disable-next-line react/no-unused-prop-types
+  userId: number;
+}
+
+export default function AvatarContentIncomingUser() {
+  // props: AvatarContentIncomingUserProps,
+  return (
+    <div className="avatar-wrap">
+      <div className="avatar">
+        <div className="rectangle" />
+        <div className="ellipse" />
+        <svg
+          className="contents-user"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M11.9999 6.11828C13.1185 6.11828 14.0249 7.0247 14.0249 8.14328C14.0249 9.26185 13.1185 10.1683 11.9999 10.1683C10.8814 10.1683 9.97493 9.26185 9.97493 8.14328C9.97493 7.0247 10.8814 6.11828 11.9999 6.11828ZM11.9999 14.7968C14.8639 14.7968 17.8821 16.2047 17.8821 16.8218V17.8826H6.11779V16.8218C6.11779 16.2047 9.136 14.7968 11.9999 14.7968ZM11.9999 4.28613C9.86886 4.28613 8.14279 6.0122 8.14279 8.14328C8.14279 10.2743 9.86886 12.0004 11.9999 12.0004C14.131 12.0004 15.8571 10.2743 15.8571 8.14328C15.8571 6.0122 14.131 4.28613 11.9999 4.28613ZM11.9999 12.9647C9.42529 12.9647 4.28564 14.2568 4.28564 16.8218V19.7147H19.7142V16.8218C19.7142 14.2568 14.5746 12.9647 11.9999 12.9647Z"
+            fill="#636D78"
+          />
+        </svg>
+      </div>
+    </div>
+  );
+}