quickblox-react-ui-kit 0.2.0 → 0.2.2

package/src/Presentation/components/UI/Dialogs/MessagesView/DropDownMenu/ItemDropDownMenu/ItemDropDownMenu.tsx

@@ -0,0 +1,43 @@
+import './ItemDropDownMenu.scss';
+import React from 'react';
+import { FunctionTypeVoidToVoid } from '../../../../../../Views/Base/BaseViewModel';
+
+type ItemDropDownMenuProps = {
+  item: string;
+  icon?: React.ReactNode;
+  touchAction?: FunctionTypeVoidToVoid;
+  clickAction?: FunctionTypeVoidToVoid;
+};
+
+// eslint-disable-next-line react/function-component-definition
+export const ItemDropDownMenu: React.FC<ItemDropDownMenuProps> = ({
+  item,
+  icon,
+  touchAction,
+  clickAction,
+}: ItemDropDownMenuProps) => {
+  return (
+    <div
+      className="item-drop-down-menu-container"
+      onTouchStart={() => {
+        // eslint-disable-next-line no-unused-expressions
+        touchAction && typeof touchAction === 'function'
+          ? touchAction()
+          : () => {
+              console.log('item menu touched');
+            };
+      }}
+      onClick={() => {
+        // eslint-disable-next-line no-unused-expressions
+        clickAction && typeof clickAction === 'function'
+          ? clickAction()
+          : () => {
+              console.log('item menu clicked');
+            };
+      }}
+    >
+      <span className="item-drop-down-menu-container--title">{item}</span>
+      <div className="item-drop-down-menu-container--icon">{icon}</div>
+    </div>
+  );
+};

package/src/Presentation/components/UI/Dialogs/MessagesView/HeaderMessages/HeaderMessages.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import { FunctionTypeVoidToVoid } from '../../../../../Views/Base/BaseViewModel';
 import { DialogEntity } from '../../../../../../Domain/entity/DialogEntity';
 import GroupChat from '../../../svgs/Icons/Contents/GroupChat';
-import Phone from '../../../svgs/Icons/Actions/Phone';
 import InformationFill from '../../../svgs/Icons/Status/InformationFill';
 import ActiveSvg from '../../../svgs/ActiveSvg/ActiveSvg';
 import { DialogType } from '../../../../../../Domain/entity/DialogTypes';
@@ -26,6 +25,7 @@ const HeaderMessages: React.FC<HeaderMessagesProps> = ({
   dialog,
   countMembers = 0,
   InformationHandler,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   CallHandler,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   theme = undefined,
@@ -101,16 +101,19 @@ const HeaderMessages: React.FC<HeaderMessagesProps> = ({
           </div>
         </div>
         <div className="message-header-container--info-wrapper__detail-button">
-          <div className="message-header-container--info-wrapper__detail-button__call">
-            <ActiveSvg
-              content={<Phone width="32" height="32" applyZoom />}
-              clickAction={() => {
-                if (CallHandler) CallHandler();
-              }}
-              touchAction={() => {
-                if (CallHandler) CallHandler();
-              }}
-            />
+          <div
+            className="message-header-container--info-wrapper__detail-button__call"
+            style={{ width: '32px' }}
+          >
+            {/* <ActiveSvg */}
+            {/*  content={<Phone width="32" height="32" applyZoom />} */}
+            {/*  clickAction={() => { */}
+            {/*    if (CallHandler) CallHandler(); */}
+            {/*  }} */}
+            {/*  touchAction={() => { */}
+            {/*    if (CallHandler) CallHandler(); */}
+            {/*  }} */}
+            {/* /> */}
           </div>
           <div className="message-header-container--info-wrapper__detail-button__info">
             <ActiveSvg

package/src/Presentation/components/UI/Dialogs/MessagesView/InComingMessage/AvatarContentIncomingUser/AvatarContentIncomingUser.scss

@@ -0,0 +1,39 @@
+
+.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;
+}
+.avatar {
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
+  position: relative;
+}
+.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/components/UI/Dialogs/MessagesView/InComingMessage/AvatarContentIncomingUser/AvatarContentIncomingUser.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import './AvatarContentIncomingUser.scss';
+
+export default function AvatarContentIncomingUser() {
+  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>
+  );
+}

package/src/Presentation/components/UI/Dialogs/MessagesView/InComingMessage/InComingMessage.scss

@@ -0,0 +1,394 @@
+.message-view-container--incoming-message-wrapper--context-menu{
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  min-width: 35px;
+}
+
+.widget-ai-translate-with-choice-languages-container{
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  &--default-language{
+    cursor: pointer;
+  }
+  &--separator{
+    margin-left: 10px;
+    margin-right: 5px;
+  }
+
+  &--select-language{
+    cursor: pointer;
+  }
+}
+
+// --------
+.incoming-text-message,
+.incoming-text-message * {
+  box-sizing: border-box;
+}
+.incoming-text-message {
+  background: var(--secondary-background);
+  padding: 0px 16px 8px 8px;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: flex-end;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  width: 680px;
+  position: relative;
+}
+//.incoming {
+//  display: flex;
+//  flex-direction: column;
+//  gap: 2px;
+//  align-items: flex-start;
+//  justify-content: flex-end;
+//  flex-shrink: 0;
+//  position: relative;
+//}
+//.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;
+//}
+//.caption {
+//  display: flex;
+//  flex-direction: row;
+//  gap: 0px;
+//  align-items: center;
+//  justify-content: flex-start;
+//  flex-shrink: 0;
+//  position: relative;
+//}
+//.name2 {
+//  color: var(--secondary-secondary-300, #636d78);
+//  text-align: left;
+//  font: var(--label-label-medium, 500 12px/16px "Roboto", sans-serif);
+//  position: relative;
+//}
+//.message {
+//  display: flex;
+//  flex-direction: row;
+//  gap: 8px;
+//  align-items: flex-end;
+//  justify-content: flex-start;
+//  flex-shrink: 0;
+//  position: relative;
+//}
+//.bubble {
+//  display: flex;
+//  flex-direction: column;
+//  gap: 4px;
+//  align-items: flex-end;
+//  justify-content: flex-end;
+//  flex-shrink: 0;
+//  position: relative;
+//}
+//.bubble-w {
+//  display: flex;
+//  flex-direction: row;
+//  align-items: flex-end;
+//  justify-content: flex-end;
+//  flex-shrink: 0;
+//  position: relative;
+//}
+//.chat-bubble-background {
+//  background: var(--secondary-secondary-50, #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;
+//  min-width: 120px;
+//  max-width: 480px;
+//}
+//.message-in-a-single-line {
+//  color: var(--secondary-secondary-900, #0b121b);
+//  text-align: left;
+//  font: var(--body-body-medium, 400 14px/20px "Roboto", sans-serif);
+//  position: relative;
+//  display: flex;
+//  align-items: center;
+//  justify-content: flex-start;
+//}
+//.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;
+//  // margin-right: 32px;
+//}
+//.caption2 {
+//  display: flex;
+//  flex-direction: row;
+//  gap: 0px;
+//  align-items: center;
+//  justify-content: flex-end;
+//  flex: 1;
+//  position: relative;
+//}
+//.time {
+//  color: var(--secondary-secondary-300, #636d78);
+//  text-align: right;
+//  font: var(--label-label-small, 500 11px/16px "Roboto", sans-serif);
+//  position: relative;
+//}
+//.ai-translate-action {
+//  color: var(--secondary-secondary-300, #636d78);
+//  text-align: right;
+//  font: var(--label-label-small, 500 11px/16px "Roboto", sans-serif);
+//  position: relative;
+//  cursor: pointer;
+//}
+//.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;
+//  position: relative;
+//  overflow: visible;
+//}
+//.caption3 {
+//  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 {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  align-items: flex-start;
+  justify-content: flex-end;
+  flex-shrink: 0;
+  position: relative;
+}
+.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;
+}
+.caption {
+  display: flex;
+  flex-direction: row;
+  gap: 0px;
+  align-items: center;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  position: relative;
+}
+.name2 {
+  color: var(--secondary-secondary-300, #636d78);
+  text-align: left;
+  font: var(--label-label-medium, 500 12px/16px "Roboto", sans-serif);
+  position: relative;
+}
+.message {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: flex-end;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  position: relative;
+}
+.bubble {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: flex-end;
+  justify-content: flex-end;
+  flex-shrink: 0;
+  position: relative;
+}
+.chat-bubble-background {
+  background: var(--incoming-background);
+  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;
+  min-width: 120px;
+  max-width: 480px;
+}
+.message-in-a-single-line {
+  color: var(--secondary-secondary-900, #0b121b);
+  text-align: left;
+  font: var(--body-body-medium, 400 14px/20px "Roboto", sans-serif);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+.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;
+}
+.caption2 {
+  display: flex;
+  flex-direction: row;
+  gap: 0px;
+  align-items: center;
+  justify-content: flex-end;
+  flex: 1;
+  position: relative;
+}
+.time {
+  color: var(--secondary-secondary-300, #636d78);
+  text-align: right;
+  font: var(--label-label-small, 500 11px/16px "Roboto", sans-serif);
+  position: relative;
+}
+.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;
+  position: relative;
+  overflow: visible;
+}
+.assist-answer {
+  padding: 0px 0px 16px 0px;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  flex-shrink: 0;
+  position: relative;
+}
+.icon2 {
+  border-radius: 4px;
+  padding: 4px;
+  display: flex;
+  flex-direction: row;
+  gap: 0px;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  position: relative;
+}
+.status-loader {
+  align-self: stretch;
+  flex: 1;
+  position: relative;
+  overflow: visible;
+}
+.caption3 {
+  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;
+}
+
+.ai-translate-action {
+  color: var(--secondary-secondary-300, #636d78);
+  text-align: right;
+  font: var(--label-label-small, 500 11px/16px "Roboto", sans-serif);
+  position: relative;
+  cursor: pointer;
+}
+
+
+// --- AIAssist
+.assist-answer {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  flex-shrink: 0;
+  position: relative;
+  cursor: pointer;
+}
+.icon {
+  border-radius: 4px;
+  padding: 4px;
+  display: flex;
+  flex-direction: row;
+  gap: 0px;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  position: relative;
+}
+.actions-assist-answer {
+  padding: 5px 3px 5px 3px;
+  align-self: stretch;
+  flex: 1;
+  position: relative;
+  overflow: visible;
+}
+
+
+//