quickblox-react-ui-kit 0.2.4 → 0.2.5

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

@@ -18,23 +18,39 @@ import { AIMessageWidget } from '../AIWidgets/AIMessageWidget';
 import LoaderComponent from '../../../Placeholders/LoaderComponent/LoaderComponent';
 import AIWidgetActions from '../AIWidgets/AIWidgetActions/AIWidgetActions';
 import TranslateIcon from '../../../svgs/Icons/Media/Translate';
-import AvatarContentIncomingUser from './AvatarContentIncomingUser/AvatarContentIncomingUser';
+import AvatarContentIncomingUser, {
+  AvatarContentIncomingUserProps,
+} from './AvatarContentIncomingUser/AvatarContentIncomingUser';
 import { DefaultConfigurations } from '../../../../../../Data/DefaultConfigurations';
 import useQbInitializedDataContext from '../../../../providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
 import { AIUtils } from '../../../../../../utils/utils';
 import BotIcon from '../../../svgs/Icons/AIWidgets/BotIcon/BotIcon';
+import { UserEntity } from '../../../../../../Domain/entity/UserEntity';
+import DefaultAttachmentComponent from '../DefaultAttachmentComponent/DefaultAttachmentComponent';
+
+export type GetUserNameFct = (props: {
+  userId?: number;
+  sender?: UserEntity;
+}) => Promise<string | undefined>;
 
 export function InComingMessage(props: {
   theme: UiKitTheme | undefined;
-  senderName: string | undefined;
+  senderNameFct: GetUserNameFct;
   message: MessageEntity;
   onStartLoader: () => void;
+  // eslint-disable-next-line react/no-unused-prop-types
   onStopLoader: () => void;
   onErrorToast: (messageError: string) => void;
   currentUserId?: number;
   messagesToView: MessageEntity[];
   AITranslation?: AIMessageWidget;
   AIAnswerToMessage?: AIMessageWidget;
+  userIconRenderer?: (
+    props: AvatarContentIncomingUserProps,
+  ) => React.ReactElement;
+  // index?: number;
+  // updateData?: (index: number, text: string) => void;
+  // translationDATA?: Record<number, string>;
 }) {
   const currentContext = useQbInitializedDataContext();
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -45,6 +61,22 @@ export function InComingMessage(props: {
     useState<boolean>(false);
   const [widgetTextContent, setWidgetTextContent] = useState<string>('');
   const [originalTextMessage, setOriginalTextMessage] = useState<boolean>(true);
+  const [senderName, setSenderName] = useState<string | undefined>('');
+
+  useEffect(() => {
+    props
+      .senderNameFct({
+        userId: props.message.sender_id,
+        sender: props.message.sender,
+      })
+      // eslint-disable-next-line promise/always-return
+      .then((name) => {
+        setSenderName(name);
+      })
+      .catch(() => console.log(`unexpected error: `));
+  }, [props.message.sender_id]);
+
+  // const [errorAITranslate, setErrorAITranslate] = useState<boolean>(false);
 
   const maxTokensForAITranslate =
     currentContext.InitParams.qbConfig.configAIApi.AITranslateWidgetConfig
@@ -59,6 +91,16 @@ export function InComingMessage(props: {
   //
   useEffect(() => {
     setWaitAIWidget(false);
+    // if (
+    //   props.AIAnswerToMessage?.textToContent &&
+    //   props.AIAnswerToMessage?.textToContent.length > 0
+    // ) {
+    //   // setMessageTextState(props.AIAnswerToMessage?.textToContent);
+    //   setWidgetTextContent(props.AIAnswerToMessage?.textToContent);
+    //   setTimeout(() => {
+    //     setWidgetTextContent('');
+    //   }, 45 * 1000);
+    // }
   }, [props.AIAnswerToMessage?.textToContent]);
 
   const messageContentRender = (
@@ -71,14 +113,18 @@ export function InComingMessage(props: {
         {!originalTextMessage ? (
           <div>{widgetTextContent}</div>
         ) : (
-          <div>{mc.message}</div>
+          <div className="message-in-a-single-line">{mc.message}</div>
         )}
       </div>
     );
     let messageContent: JSX.Element = messageText;
-
     const attachmentContentRender = (att: ChatMessageAttachmentEntity) => {
-      let contentPlaceHolder: JSX.Element = <div>{att.type.toString()}</div>;
+      let contentPlaceHolder: JSX.Element = (
+        <DefaultAttachmentComponent
+          fileName={att.file?.name || ''}
+          fileUrl={att.file?.url || ''}
+        />
+      );
 
       if (att.type.toString().includes(FileType.video)) {
         contentPlaceHolder = att.file ? (
@@ -103,9 +149,13 @@ export function InComingMessage(props: {
       }
       if (att.type.toString().includes(FileType.text)) {
         contentPlaceHolder = att.file ? (
-          <div>TEXT</div>
+          // <div>TEXT</div>
+          <DefaultAttachmentComponent
+            fileName={att.file?.name || ''}
+            fileUrl={att.file?.url || ''}
+          />
         ) : (
-          <ImageFile applyZoom />
+          <ImageFile width="24" height="24" applyZoom />
         );
       }
       let contentResult: JSX.Element = (
@@ -137,7 +187,6 @@ export function InComingMessage(props: {
           {mc.attachments.map((attachment) =>
             attachmentContentRender(attachment),
           )}
-          {messageText}
         </ColumnContainer>
       );
     }
@@ -164,6 +213,7 @@ export function InComingMessage(props: {
       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,
@@ -212,25 +262,13 @@ export function InComingMessage(props: {
       // 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,
         ),
-      )
-        .then((answerText) => {
-          // eslint-disable-next-line promise/always-return
-          if (answerText === 'Assist failed.') {
-            props.onErrorToast('Assist failed.');
-          }
-          setWaitAIWidget(false);
-          props.onStopLoader();
-        })
-        .catch(() => {
-          props.onErrorToast('Assist failed.');
-          setWaitAIWidget(false);
-          props.onStopLoader();
-        });
+      );
     }
   }
 
@@ -365,12 +403,17 @@ export function InComingMessage(props: {
       onMouseEnter={() => setHaveHover(true)}
       onMouseLeave={() => setHaveHover(false)}
     >
-      <AvatarContentIncomingUser />
+      {props.userIconRenderer ? (
+        props.userIconRenderer({ userId: props.message.sender_id })
+      ) : (
+        // <AvatarContentIncomingUser userId={props.message.sender_id} />
+        <AvatarContentIncomingUser />
+      )}
       <div className="incoming">
         <div className="name">
           <div className="caption">
             <div className="name2">
-              {props.senderName || props.message.sender_id.toString()}
+              {senderName || props.message.sender_id.toString()}
             </div>
           </div>
         </div>
@@ -379,11 +422,13 @@ export function InComingMessage(props: {
             <div className="chat-bubble-background">
               {/* <div className="message-in-a-single-line"> */}
               {/* </div> */}
-              {messageContentRender(
-                props.message,
-                widgetTextContent,
-                props.theme,
-              )}
+              <div className="message-in-a-single-line">
+                {messageContentRender(
+                  props.message,
+                  widgetTextContent,
+                  props.theme,
+                )}
+              </div>
             </div>
             {renderWidgetAITranslate(
               props.message,

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

@@ -221,11 +221,11 @@ $message-view-container-ai-translate-text-color: var(--tertiary-elements);
     color: $message-view-container-message-text-color;
   }
   &--message-content-wrapper{
-    max-width: 240px;
+    max-width: 300px;
     max-height: 160px;
-    min-width: 240px;
+    min-width: 300px;
     // min-height: 160px;
-    width: 240px;
+    width: 300px;
     // height: 160px;
     // height: 100%;
 
@@ -346,7 +346,7 @@ $message-view-container-ai-translate-text-color: var(--tertiary-elements);
   box-sizing: border-box;
 }
 .input-text-message {
-  background: var(--primary-primary-a-200, #f7f9ff);
+  background: var(--chat-input);
   border-radius: 4px;
   //padding: 10px 8px 10px 16px;
   display: flex;
@@ -359,16 +359,21 @@ $message-view-container-ai-translate-text-color: var(--tertiary-elements);
 }
 
 .type-message {
-  color: var(--secondary-secondary-200, #90979f);
+  color: var(--field-border);
   text-align: left;
-  font: var(--body-body-large, 400 16px/24px "Roboto", sans-serif);
+  font: var(--body-body-large);
   position: relative;
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: flex-start;
 }
-
+.type-message textarea{
+  color: var(--input-elements);
+  font: var(--body-body-large);
+  border: none;
+  outline: none;
+}
 .right {
   display: flex;
   flex-direction: row;
@@ -392,19 +397,3 @@ $message-view-container-ai-translate-text-color: var(--tertiary-elements);
   height: 24px;
   position: relative;
 }
-
-//
-
-
-//textarea::-webkit-scrollbar {
-//  width: 1em;
-//}
-//
-//textarea::-webkit-scrollbar-track {
-//  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-//}
-//
-//textarea::-webkit-scrollbar-thumb {
-//  background-color: darkgrey;
-//  outline: 1px solid slategrey;
-//}

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

@@ -47,7 +47,10 @@ import { AIMessageWidget } from './AIWidgets/AIMessageWidget';
 import { DialogsViewModel } from '../../../../Views/Dialogs/DialogViewModel';
 import { HighLightLink, messageHasUrls } from './HighLightLink/HighLightLink';
 import { OutGoingMessage } from './OutGoingMessage/OutGoingMessage';
-import { InComingMessage } from './InComingMessage/InComingMessage';
+import {
+  GetUserNameFct,
+  InComingMessage,
+} from './InComingMessage/InComingMessage';
 import NecktieIcon from '../../svgs/Icons/AIWidgets/NecktieIcon';
 import HandshakeIcon from '../../svgs/Icons/AIWidgets/HandshakeIcon';
 import WhiteCheckMarkIcon from '../../svgs/Icons/AIWidgets/WhiteCheckMarkIcon';
@@ -67,6 +70,11 @@ import ToneIcon from '../../svgs/Icons/Actions/Tone';
 import DefaultAttachmentComponent from './DefaultAttachmentComponent/DefaultAttachmentComponent';
 import { AIUtils } from '../../../../../utils/utils';
 import { ErrorToast } from './ErrorToast/ErrorToast';
+import { AvatarContentIncomingUserProps } from './InComingMessage/AvatarContentIncomingUser/AvatarContentIncomingUser';
+import { SystemMessageBanner } from './SystemMessageBanner/SystemMessageBanner';
+import { SystemDateBanner } from './SystemDateBanner/SystemDateBanner';
+// import ToneIcon from '../../svgs/Icons/Actions/Tone';
+// import AIWidgetActions from './AIWidgets/AIWidgetActions/AIWidgetActions';
 
 type HeaderDialogsMessagesProps = {
   AIRephrase?: AIMessageWidget;
@@ -76,8 +84,18 @@ type HeaderDialogsMessagesProps = {
   onDialogInformationHandler?: FunctionTypeVoidToVoid;
   maxWidthToResize?: string;
   theme?: UiKitTheme;
-  subHeaderContent?: React.ReactNode;
-  upHeaderContent?: React.ReactNode;
+  headerContent?: React.ReactNode;
+  subHeaderContent?: React.ReactNode; // I recommend removing this as it can be done with headerContent
+  upHeaderContent?: React.ReactNode; // I recommend removing this as it can be done with headerContent
+  rootStyles?: React.CSSProperties;
+  messagesContainerStyles?: React.CSSProperties;
+  userIconRenderer?: (
+    props: AvatarContentIncomingUserProps,
+  ) => React.ReactElement;
+  getSenderNameFct?: (props: {
+    sender?: UserEntity;
+    userId?: number;
+  }) => Promise<string | undefined>;
 };
 
 // eslint-disable-next-line react/function-component-definition
@@ -96,6 +114,11 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
   theme = undefined,
   subHeaderContent = undefined,
   upHeaderContent = undefined,
+  headerContent = undefined,
+  rootStyles = {},
+  messagesContainerStyles = {},
+  userIconRenderer = undefined,
+  getSenderNameFct,
 }: HeaderDialogsMessagesProps) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const maxWidthToResizing =
@@ -223,12 +246,20 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
   }, [dialogMessagesCount]);
   //
 
-  const getSenderName = (sender?: UserEntity): string | undefined => {
-    if (!sender) return undefined;
+  const defaultGetSenderName: GetUserNameFct = (props: {
+    sender?: UserEntity;
+  }): Promise<string | undefined> => {
+    let result = 'undefined user';
+    // eslint-disable-next-line react/prop-types
+    const { sender } = props;
+
+    if (!sender) return Promise.resolve(result);
+    // eslint-disable-next-line react/prop-types
+    result =
+      // eslint-disable-next-line react/prop-types
+      sender.full_name || sender.login || sender.email || sender.id.toString();
 
-    return (
-      sender.full_name || sender.login || sender.email || sender.id.toString()
-    );
+    return Promise.resolve(result);
   };
 
   // function sendMessageToTranslate(message: MessageEntity) {
@@ -282,7 +313,10 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
         // let contentPlaceHolder: JSX.Element = <div>{att.type.toString()}</div>;
 
         let contentPlaceHolder: JSX.Element = (
-          <DefaultAttachmentComponent fileName={att.file?.name || ''} />
+          <DefaultAttachmentComponent
+            fileName={att.file?.name || ''}
+            fileUrl={att.file?.url || ''}
+          />
         );
 
         if (att.type.toString().includes(FileType.video)) {
@@ -309,7 +343,10 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
         if (att.type.toString().includes(FileType.text)) {
           contentPlaceHolder = att.file ? (
             // <div>TEXT</div>
-            <DefaultAttachmentComponent fileName={att.file.name || ''} />
+            <DefaultAttachmentComponent
+              fileName={att.file?.name || ''}
+              fileUrl={att.file?.url || ''}
+            />
           ) : (
             <ImageFile width="24" height="24" applyZoom />
           );
@@ -343,7 +380,6 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
             {mc.attachments.map((attachment) =>
               attachmentContentRender(attachment),
             )}
-            {messageText}
           </ColumnContainer>
         );
       }
@@ -368,10 +404,11 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
             style={theme ? { backgroundColor: theme.disabledElements() } : {}}
             className="message-view-container--system-message-wrapper__date_container"
           >
-            <div>{getDateShortFormatEU(message.date_sent)},</div>
+            <SystemDateBanner text={getDateShortFormatEU(message.date_sent)} />
+            {/* <div>{getDateShortFormatEU(message.date_sent)},</div> */}
           </div>
           {/* <div>{getTimeShort24hFormat(message.date_sent)}</div> */}
-          <div>{message.message}</div>
+          <SystemMessageBanner messageText={message.message} />
         </div>
       );
     } else if (messageTypes === IncomingMessage) {
@@ -379,7 +416,8 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
         <InComingMessage
           key={message.id}
           theme={theme}
-          senderName={getSenderName(message.sender)}
+          senderNameFct={getSenderNameFct || defaultGetSenderName}
+          userIconRenderer={userIconRenderer}
           message={message}
           // element={messageContentRender(message)}
           onStartLoader={() => {
@@ -490,7 +528,15 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
     const flag = fileToSend?.size && fileToSend?.size < MAXSIZE;
 
     if (fileToSend?.size && fileToSend?.size < MAXSIZE) {
-      messagesViewModel.sendAttachmentMessage(fileToSend);
+      // eslint-disable-next-line promise/catch-or-return
+      messagesViewModel
+        .sendAttachmentMessage(fileToSend)
+        .then((resultOperation) => {
+          // eslint-disable-next-line promise/always-return
+          if (!resultOperation) {
+            showErrorMessage(`Incorrect data`);
+          }
+        });
     } else if (fileToSend) {
       showErrorMessage(
         `file size ${fileToSend?.size} must be less then ${MAXSIZE_FOR_MESSAGE} mb.`,
@@ -1204,6 +1250,7 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
           setPrevTextMessage(messageText);
           AIRephrase?.textToWidget(
             messageText,
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-argument
             AIUtils.messageEntitiesToIChatMessageCollection(
               messagesToView,
               currentUserId,
@@ -1259,27 +1306,46 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
               minWidth: `$message-view-container-wrapper-min-width`,
               // width: `${maxWidthToResizing}`,
               width: '100%',
+              ...rootStyles,
             }
-          : {}
+          : rootStyles
       }
       className="message-view-container"
     >
-      <div
-        style={{
-          flexGrow: `1`,
-          flexShrink: `1`,
-          flexBasis: `${maxWidthToResizing}`,
-        }}
-        className="message-view-container--header"
-      >
-        {useUpContent && upHeaderContent}
-        <HeaderMessages
-          dialog={messagesViewModel.entity}
-          InformationHandler={onDialogInformationHandler}
-          countMembers={getCountDialogMembers(dialogsViewModel.entity)}
-        />
-        {useSubContent && subHeaderContent}
-      </div>
+      {headerContent || (
+        <div
+          style={{
+            flexGrow: `1`,
+            flexShrink: `1`,
+            flexBasis: `${maxWidthToResizing}`,
+          }}
+          className="message-view-container--header"
+        >
+          {useUpContent && upHeaderContent}
+          <HeaderMessages
+            dialog={messagesViewModel.entity}
+            InformationHandler={onDialogInformationHandler}
+            countMembers={getCountDialogMembers(dialogsViewModel.entity)}
+          />
+          {useSubContent && subHeaderContent}
+        </div>
+      )}
+      {/* <div */}
+      {/*  style={{ */}
+      {/*    flexGrow: `1`, */}
+      {/*    flexShrink: `1`, */}
+      {/*    flexBasis: `${maxWidthToResizing}`, */}
+      {/*  }} */}
+      {/*  className="message-view-container--header" */}
+      {/* > */}
+      {/*  {useUpContent && upHeaderContent} */}
+      {/*  <HeaderMessages */}
+      {/*    dialog={messagesViewModel.entity} */}
+      {/*    InformationHandler={onDialogInformationHandler} */}
+      {/*    countMembers={getCountDialogMembers(dialogsViewModel.entity)} */}
+      {/*  /> */}
+      {/*  {useSubContent && subHeaderContent} */}
+      {/* </div> */}
       {showErrorToast && !messagesViewModel?.loading ? (
         <ErrorToast messageText={messageErrorToast} />
       ) : null}
@@ -1353,11 +1419,13 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
                 flexShrink: `1`,
                 flexBasis: `${maxWidthToResizing}`,
                 backgroundColor: theme.secondaryBackground(), // var(--secondary-background);
+                ...messagesContainerStyles,
               }
             : {
                 flexGrow: `1`,
                 flexShrink: `1`,
                 flexBasis: `${maxWidthToResizing}`,
+                ...messagesContainerStyles,
               }
         }
         className="message-view-container--messages"
@@ -1472,7 +1540,7 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
           <input
             id="btnUploadAttachment"
             type="file"
-            accept="image/*, audio/*, video/*, .pdf, .txt,"
+            accept="image/*, audio/*, video/*, .pdf, .txt, .apk, .zip, .ipa, .ppt, .pptx, .doc, .docx, .xls, .xlsx, .json, .log"
             style={{ display: 'none' }}
             onChange={(event) => {
               ChangeFileHandler(event);

package/src/Presentation/components/UI/Dialogs/MessagesView/MessagesViewModel.ts

@@ -1,5 +1,5 @@
 import BaseViewModel, {
-  FunctionTypeFileToToVoid,
+  FunctionTypeFileToToBoolean,
   FunctionTypePaginationToVoid,
   FunctionTypeStringToVoid,
   FunctionTypeVoidToVoid,
@@ -13,7 +13,7 @@ export interface MessagesViewModel extends BaseViewModel<DialogEntity> {
   messages: MessageEntity[]; // content
   getMessages: FunctionTypePaginationToVoid; // prepareContent
   sendTextMessage: FunctionTypeStringToVoid;
-  sendAttachmentMessage: FunctionTypeFileToToVoid;
+  sendAttachmentMessage: FunctionTypeFileToToBoolean;
   release: FunctionTypeVoidToVoid; // release Content
   sendTypingTextMessage: FunctionTypeVoidToVoid; //
   typingText: string;

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

@@ -92,7 +92,7 @@ export function OutGoingMessage(props: {
         }
         className="message-view-container__outgoing-message"
       >
-        {props.element}
+        <div className="message-in-a-single-line">{props.element}</div>
       </div>
     </div>
   );

package/src/Presentation/components/UI/Dialogs/MessagesView/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/components/UI/Dialogs/MessagesView/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/components/UI/Dialogs/MessagesView/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/components/UI/Dialogs/MessagesView/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>
+  );
+};