quickblox-react-ui-kit 0.2.3 → 0.2.4

package/src/Domain/use_cases/ai/AITranslateUseCase.ts

@@ -0,0 +1,76 @@
+import { AITranslateSettings, QBAITranslate } from 'qb-ai-translate';
+import { IChatMessage } from '../../../Data/source/AISource';
+import { IUseCase } from '../base/IUseCase';
+
+export class AITranslateUseCase implements IUseCase<void, string> {
+  private textToSend: string;
+
+  private language: string;
+
+  private dialogMessages: IChatMessage[];
+
+  private servername: string;
+
+  private api: string;
+
+  private port: string;
+
+  private sessionToken: string;
+
+  private openAIModel: string;
+
+  constructor(
+    textToSend: string,
+    language: string,
+    dialogMessages: IChatMessage[],
+    servername: string,
+    api: string,
+    port: string,
+    sessionToken: string,
+    openAIModel = 'gpt-3.5-turbo',
+  ) {
+    console.log('CONSTRUCTOR AIRephraseUseCase');
+    this.api = api;
+    this.openAIModel = openAIModel;
+    this.port = port;
+    this.sessionToken = sessionToken;
+    this.textToSend = textToSend;
+    this.language = language;
+    this.servername = servername;
+    this.dialogMessages = dialogMessages;
+  }
+
+  async execute(): Promise<string> {
+    console.log('execute AIRephraseUseCase');
+    const settings: AITranslateSettings =
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      QBAITranslate.createDefaultAITranslateSettings();
+
+    settings.apiKey = this.sessionToken;
+    // settings.organization = 'Quickblox';
+    settings.model = this.openAIModel;
+    settings.language = this.language;
+
+    return QBAITranslate.translate(
+      this.textToSend,
+      this.dialogMessages,
+      settings,
+    );
+
+    // const prompt = AIUtils.createTranslatePrompt(
+    //   this.textToSend,
+    //   this.language,
+    // );
+    //
+    // return AISource.getData(
+    //   prompt,
+    //   // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    //   this.dialogMessages,
+    //   this.servername,
+    //   this.api,
+    //   this.port,
+    //   this.sessionToken,
+    //   this.openAIModel,
+    // );
+  }
+}

package/src/Domain/use_cases/ai/AITranslateWithProxyUseCase.ts

@@ -0,0 +1,79 @@
+// eslint-disable-next-line import/extensions
+import { AITranslateSettings, QBAITranslate } from 'qb-ai-translate';
+import { IChatMessage } from '../../../Data/source/AISource';
+import { IUseCase } from '../base/IUseCase';
+
+export class AITranslateWithProxyUseCase implements IUseCase<void, string> {
+  private textToSend: string;
+
+  private language: string;
+
+  private dialogMessages: IChatMessage[];
+
+  private servername: string;
+
+  private api: string;
+
+  private port: string;
+
+  private sessionToken: string;
+
+  private openAIModel: string;
+
+  constructor(
+    textToSend: string,
+    language: string,
+    dialogMessages: IChatMessage[],
+    servername: string,
+    api: string,
+    port: string,
+    sessionToken: string,
+    openAIModel = 'gpt-3.5-turbo',
+  ) {
+    console.log('CONSTRUCTOR AIRephraseUseCase');
+    this.api = api;
+    this.openAIModel = openAIModel;
+    this.port = port;
+    this.sessionToken = sessionToken;
+    this.textToSend = textToSend;
+    this.language = language;
+    this.servername = servername;
+    this.dialogMessages = dialogMessages;
+  }
+
+  async execute(): Promise<string> {
+    console.log('execute AIRephraseUseCase');
+
+    const settings: AITranslateSettings =
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      QBAITranslate.createDefaultAITranslateSettings();
+
+    settings.token = this.sessionToken;
+    // settings.organization = 'Quickblox';
+    settings.model = this.openAIModel;
+    settings.language = this.language;
+    settings.serverPath = `${this.servername}:${this.port}/${this.api}`;
+
+    return QBAITranslate.translate(
+      this.textToSend,
+      this.dialogMessages,
+      settings,
+    );
+
+    // const prompt = AIUtils.createTranslatePrompt(
+    //   this.textToSend,
+    //   this.language,
+    // );
+    //
+    // return AISource.getDataWithProxyServer(
+    //   prompt,
+    //   // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    //   this.dialogMessages,
+    //   this.servername,
+    //   this.api,
+    //   this.port,
+    //   this.sessionToken,
+    //   this.openAIModel,
+    // );
+  }
+}

package/src/Presentation/Views/Base/BaseViewModel.ts

@@ -3,6 +3,7 @@ import { GroupDialogEntity } from '../../../Domain/entity/GroupDialogEntity';
 import { DialogEntity } from '../../../Domain/entity/DialogEntity';
 import { FileEntity } from '../../../Domain/entity/FileEntity';
 import { IChatMessage } from '../../../Data/source/AISource';
+import { Tone } from '../../components/UI/Dialogs/MessagesView/AIWidgets/Tone';
 
 export default class BaseViewModel<TResult> {
   get entity(): TResult {
@@ -86,3 +87,4 @@ export type FunctionTypeStringWithContextToString = (
   context: IChatMessage[],
   additionalSettings?: { [key: string]: any },
 ) => Promise<string>;
+export type FunctionTypeVoidToTones = () => Tone[];

package/src/Presentation/Views/Dialogs/Dialogs.tsx

@@ -213,7 +213,7 @@ const DialogsComponent: React.FC<DialogsProps> = ({
       ) {
         const imagePhoto = (currentDialog.entity as GroupDialogEntity).photo;
 
-        console.log('Dialogs: avatar: ', imagePhoto || 'NO FOTO');
+        // console.log('Dialogs: avatar: ', imagePhoto || 'NO FOTO');
         AvatarComponent = imagePhoto ? (
           <img
             style={{ width: '55px', height: '55px', borderRadius: '50%' }}

package/src/Presentation/components/UI/Dialogs/MessagesView/AIWidgets/AIMessageWidget.ts

@@ -1,8 +1,9 @@
 import {
   FunctionTypeFileWithContextToToVoid,
   FunctionTypeJSXElement,
-  FunctionTypeStringWithContextToString,
+  FunctionTypeStringWithContextToString, FunctionTypeVoidToTones,
 } from '../../../../../Views/Base/BaseViewModel';
+import {Tone} from "./Tone";
 
 export interface MessageWidgetProps {
   // https://api.openai.com/v1/chat/completions'
@@ -29,7 +30,11 @@ export interface AIFileWidget extends AIWidget {
 export interface AIMessageWidget extends AITextWidget {
   textToWidget: FunctionTypeStringWithContextToString;
 }
-
+//
+export interface AIRephraseWidget extends AIMessageWidget {
+  tonesToWidget: FunctionTypeVoidToTones;
+}
+//
 export interface AIAttachmentWidget extends AIFileWidget {
   fileToWidget: FunctionTypeFileWithContextToToVoid;
 }

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

@@ -2,7 +2,7 @@ import React, { useState, CSSProperties, useRef, useEffect } from 'react';
 import './AIWidgetActions.scss';
 import EditDots from '../../../../svgs/Icons/Actions/EditDots';
 
-type MenuItem = {
+export type MenuItem = {
   title: string;
   icon?: JSX.Element; // Добавлено поле для иконки пункта меню
   action: () => void;
@@ -12,6 +12,7 @@ type ContextMenuProps = {
   widgetToRender?: JSX.Element;
   items?: MenuItem[];
   title?: string | null;
+  disabled?: boolean;
 };
 
 const ContextMenuStyles: { [key: string]: CSSProperties } = {
@@ -20,7 +21,7 @@ const ContextMenuStyles: { [key: string]: CSSProperties } = {
     position: 'relative',
     maxWidth: '42px',
     maxHeight: '42px',
-    cursor: 'pointer',
+    // cursor: 'pointer',
   },
   contextMenuContent: {
     position: 'absolute',
@@ -50,12 +51,13 @@ function AIWidgetActions({
   items,
   widgetToRender,
   title = null,
+  disabled = true,
 }: ContextMenuProps) {
   const [menuVisible, setMenuVisible] = useState(false);
   const contextMenuRef = useRef<HTMLDivElement | null>(null);
 
   const handleClick = () => {
-    setMenuVisible(!menuVisible);
+    if (disabled) setMenuVisible(!menuVisible);
   };
 
   const handleMenuItemClick = (action: () => void) => {
@@ -85,7 +87,11 @@ function AIWidgetActions({
       <div onClick={handleClick}>{widgetToRender || <EditDots />}</div>
       {menuVisible && (
         // <div ref={contextMenuRef} style={ContextMenuStyles.contextMenuContent}>
-        <div ref={contextMenuRef} className="dropdown-context-menu-tone">
+        <div
+          ref={contextMenuRef}
+          className="dropdown-context-menu-tone"
+          style={{ cursor: 'pointer' }}
+        >
           {title && <div style={ContextMenuStyles.menuTitle}>{title}</div>}
           {items?.map((item, index) => (
             <div

package/src/Presentation/components/UI/Dialogs/MessagesView/AIWidgets/Tone.ts

@@ -1,21 +1,35 @@
-export enum Tone {
-  Professional = 'Professional Tone',
-  Friendly = 'Friendly Tone',
-  Encouraging = 'Encouraging Tone',
-  Empathetic = 'Empathetic Tone',
-  Neutral = 'Neutral Tone',
-  Assertive = 'Assertive Tone',
-  Instructive = 'Instructive Tone',
-  Persuasive = 'Persuasive Tone',
-  Sarcastic = 'Sarcastic/Ironic Tone',
-  Poetic = 'Poetic Tone',
-  Unchanged = 'Unchanged',
+// export enum Tone {
+//   Professional = 'Professional Tone',
+//   Friendly = 'Friendly Tone',
+//   Encouraging = 'Encouraging Tone',
+//   Empathetic = 'Empathetic Tone',
+//   Neutral = 'Neutral Tone',
+//   Assertive = 'Assertive Tone',
+//   Instructive = 'Instructive Tone',
+//   Persuasive = 'Persuasive Tone',
+//   Sarcastic = 'Sarcastic/Ironic Tone',
+//   Poetic = 'Poetic Tone',
+//   Unchanged = 'Unchanged',
+// }
+
+export interface Tone {
+  name: string;
+  description: string;
+  iconEmoji: string;
 }
 
 export const toneToString = (tone: Tone): string => {
-  return tone;
+  return tone.name;
 };
 
-export const stringToTone = (toneStr: string): Tone | undefined => {
-  return Tone[toneStr as keyof typeof Tone];
+export const stringToTone = (
+  toneStr: string,
+  description?: string,
+  emoji?: string,
+): Tone | undefined => {
+  return {
+    name: toneStr,
+    description: description || '',
+    iconEmoji: emoji || '',
+  };
 };

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

@@ -2,7 +2,8 @@ import { useState } from 'react';
 import { AIMessageWidget, MessageWidgetProps } from './AIMessageWidget';
 import AIWidgetIcon from '../../../svgs/Icons/AIWidgets/AIWidget';
 import ErrorMessageIcon from './ErrorMessageIcon';
-import { AISource, IChatMessage } from '../../../../../../Data/source/AISource';
+import { IChatMessage } from '../../../../../../Data/source/AISource';
+import { AIAnswerAssistUseCase } from '../../../../../../Domain/use_cases/ai/AIAnswerAssistUseCase';
 
 // interface MessageWidgetProps {
 //   // https://api.openai.com/v1/chat/completions'
@@ -50,18 +51,21 @@ export default function UseDefaultAIAssistAnswerWidget({
     context: IChatMessage[],
   ): Promise<string> => {
     if (textToSend && textToSend.length > 0) {
-      const prompt = `You are a customer support chat operator. Your goal is to provide helpful and informative responses to customer inquiries. Give a response to the next user's query, considering the entire conversation context, and use grammar and vocabulary at the A2-B2 level. Answer in the format of simple sentences. Do not include question in answer. Please, provide answer for this issue:"${textToSend}"`;
+      const openAIModel = 'gpt-3.5-turbo';
 
-      // eslint-disable-next-line no-return-await
-      return await AISource.getData(
-        prompt,
+      const useCaseAIAnswerAssist = new AIAnswerAssistUseCase(
+        textToSend,
         // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
         context,
         servername,
         api,
         port,
         apiKeyOrSessionToken,
-      ).then((data) => {
+        openAIModel,
+      );
+
+      // eslint-disable-next-line no-return-await
+      return await useCaseAIAnswerAssist.execute().then((data) => {
         setTextFromWidgetToContent(data);
 
         return data;

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

@@ -2,7 +2,8 @@ import { useState } from 'react';
 import { AIMessageWidget, MessageWidgetProps } from './AIMessageWidget';
 import AIWidgetIcon from '../../../svgs/Icons/AIWidgets/AIWidget';
 import ErrorMessageIcon from './ErrorMessageIcon';
-import { AISource, IChatMessage } from '../../../../../../Data/source/AISource';
+import { IChatMessage } from '../../../../../../Data/source/AISource';
+import { AIAnswerAssistWithProxyUseCase } from '../../../../../../Domain/use_cases/ai/AIAnswerAssistWithProxyUseCase';
 
 // interface MessageWidgetProps {
 //   // https://api.openai.com/v1/chat/completions'
@@ -50,18 +51,21 @@ export default function UseDefaultAIAssistAnswerWidgetWithProxy({
     context: IChatMessage[],
   ): Promise<string> => {
     if (textToSend && textToSend.length > 0) {
-      const prompt = `You are a customer support chat operator. Your goal is to provide helpful and informative responses to customer inquiries. Give a response to the next user's query, considering the entire conversation context, and use grammar and vocabulary at the A2-B2 level. Answer in the format of simple sentences. Do not include question in answer. Please, provide answer for this issue:"${textToSend}"`;
+      const openAIModel = 'gpt-3.5-turbo';
 
-      // eslint-disable-next-line no-return-await
-      return await AISource.getDataWithProxyServer(
-        prompt,
+      const useCaseAIAnswerAssist = new AIAnswerAssistWithProxyUseCase(
+        textToSend,
         // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
         context,
         servername,
         api,
         port,
         apiKeyOrSessionToken,
-      ).then((data) => {
+        openAIModel,
+      );
+
+      // eslint-disable-next-line no-return-await
+      return await useCaseAIAnswerAssist.execute().then((data) => {
         setTextFromWidgetToContent(data);
 
         return data;

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

@@ -79,9 +79,26 @@ export default function UseDefaultAIRephraseMessageWidget({
     return '';
   };
 
+  // const tonesToWidget = (): Tone[] => {
+  //   return [
+  //     Tone.Professional,
+  //     Tone.Friendly,
+  //     Tone.Encouraging,
+  //     Tone.Empathetic,
+  //     Tone.Assertive,
+  //     Tone.Neutral,
+  //     Tone.Instructive,
+  //     Tone.Persuasive,
+  //     Tone.Sarcastic,
+  //     Tone.Poetic,
+  //     Tone.Unchanged,
+  //   ];
+  // };
+
   return {
     textToContent: textFromWidgetToContent,
     renderWidget,
     textToWidget,
+    // tonesToWidget,
   };
 }

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

@@ -77,10 +77,26 @@ export default function UseDefaultAIRephraseMessageWidgetWithProxy({
     //
     return '';
   };
+  // const tonesToWidget = (): Tone[] => {
+  //   return [
+  //     Tone.Professional,
+  //     Tone.Friendly,
+  //     Tone.Encouraging,
+  //     Tone.Empathetic,
+  //     Tone.Assertive,
+  //     Tone.Neutral,
+  //     Tone.Instructive,
+  //     Tone.Persuasive,
+  //     Tone.Sarcastic,
+  //     Tone.Poetic,
+  //     Tone.Unchanged,
+  //   ];
+  // };
 
   return {
     textToContent: textFromWidgetToContent,
     renderWidget,
     textToWidget,
+    // tonesToWidget,
   };
 }

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

@@ -2,7 +2,8 @@ import { useState } from 'react';
 import AIWidgetIcon from '../../../svgs/Icons/AIWidgets/AIWidget';
 import ErrorMessageIcon from './ErrorMessageIcon';
 import { AIMessageWidget, MessageWidgetProps } from './AIMessageWidget';
-import { AISource, IChatMessage } from '../../../../../../Data/source/AISource';
+import { IChatMessage } from '../../../../../../Data/source/AISource';
+import { AITranslateUseCase } from '../../../../../../Domain/use_cases/ai/AITranslateUseCase';
 
 // interface MessageWidgetProps {
 //   // https://api.openai.com/v1/chat/completions'
@@ -52,25 +53,25 @@ export default function UseDefaultAITranslateWidget({
   ): Promise<string> => {
     if (textToSend && textToSend.length > 0) {
       // eslint-disable-next-line no-return-await
-      let prompt = `Please, translate the next text in english and give me just only translated text. Text to translate is: "${textToSend}"`;
       const { language } = additionalSettings || {};
+      //
+      const openAIModel = 'gpt-3.5-turbo';
 
-      if (language) {
-        prompt = `Please, translate the next text in ${
-          language as string
-        } and give me just only translated text. Text to translate is: "${textToSend}"`;
-      }
-
-      // eslint-disable-next-line no-return-await
-      return await AISource.getData(
-        prompt,
+      // AIRephraseWithProxyUseCase
+      const useCaseAITranslate = new AITranslateUseCase(
+        textToSend,
         // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        language,
         context,
         servername,
         api,
         port,
         apiKeyOrSessionToken,
-      ).then((data) => {
+        openAIModel,
+      );
+
+      // eslint-disable-next-line no-return-await
+      return await useCaseAITranslate.execute().then((data) => {
         setTextFromWidgetToContent(data);
 
         return data;

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

@@ -2,7 +2,8 @@ import { useState } from 'react';
 import AIWidgetIcon from '../../../svgs/Icons/AIWidgets/AIWidget';
 import ErrorMessageIcon from './ErrorMessageIcon';
 import { AIMessageWidget, MessageWidgetProps } from './AIMessageWidget';
-import { AISource, IChatMessage } from '../../../../../../Data/source/AISource';
+import { IChatMessage } from '../../../../../../Data/source/AISource';
+import { AITranslateWithProxyUseCase } from '../../../../../../Domain/use_cases/ai/AITranslateWithProxyUseCase';
 
 // interface MessageWidgetProps {
 //   // https://api.openai.com/v1/chat/completions'
@@ -52,25 +53,25 @@ export default function UseDefaultAITranslateWidgetWithProxy({
   ): Promise<string> => {
     if (textToSend && textToSend.length > 0) {
       // eslint-disable-next-line no-return-await
-      let prompt = `Please, translate the next text in english and give me just only translated text. Text to translate is: "${textToSend}"`;
       const { language } = additionalSettings || {};
+      //
+      const openAIModel = 'gpt-3.5-turbo';
 
-      if (language) {
-        prompt = `Please, translate the next text in ${
-          language as string
-        } and give me just only translated text. Text to translate is: "${textToSend}"`;
-      }
-
-      // eslint-disable-next-line no-return-await
-      return await AISource.getDataWithProxyServer(
-        prompt,
+      // AIRephraseWithProxyUseCase
+      const useCaseAITranslate = new AITranslateWithProxyUseCase(
+        textToSend,
         // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        language,
         context,
         servername,
         api,
         port,
         apiKeyOrSessionToken,
-      ).then((data) => {
+        openAIModel,
+      );
+
+      // eslint-disable-next-line no-return-await
+      return await useCaseAITranslate.execute().then((data) => {
         setTextFromWidgetToContent(data);
 
         return data;

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

@@ -0,0 +1,76 @@
+.default-attachment-component-container,
+.default-attachment-component-container * {
+  box-sizing: border-box;
+}
+.default-attachment-component-container {
+  // background: var(--incoming-background, #e4e6e8);
+  border-radius: 22px 22px 22px 0px;
+  padding: 8px 16px 8px 1px;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  position: relative;
+
+  &--file-wrapper {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: stretch;
+    flex-shrink: 0;
+    position: relative;
+
+    &--placeholder {
+      flex-shrink: 0;
+      width: 32px;
+      height: 32px;
+      position: static;
+
+      &__bg {
+        background: var(--field-border, #90979f);
+        border-radius: 8px;
+        width: 32px;
+        height: 32px;
+        position: absolute;
+        left: 0px;
+        top: 0px;
+      }
+
+      &__icon {
+        border-radius: 4px;
+        padding: 4px;
+        display: flex;
+        flex-direction: row;
+        gap: 0px;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        position: absolute;
+        left: 4px;
+        top: 4px;
+      }
+    }
+
+    &--file-d {
+      color: var(--secondary-elements, #202f3e);
+      text-align: left;
+      font: 400 14px/20px "Roboto", sans-serif;
+      position: relative;
+    }
+  }
+}
+
+
+
+.media-text-document {
+  align-self: stretch;
+  flex: 1;
+  position: relative;
+  overflow: visible;
+}
+

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import './DefaultAttachmentComponent.scss';
+import TextDocument from '../../../svgs/Icons/Media/TextDocument';
+
+type DefaultAttachmentComponentProps = {
+  fileName: string;
+};
+// eslint-disable-next-line react/function-component-definition
+const DefaultAttachmentComponent: React.FC<DefaultAttachmentComponentProps> = ({
+  fileName,
+}: DefaultAttachmentComponentProps) => {
+  return (
+    <div className="default-attachment-component-container">
+      <div className="default-attachment-component-container--file-wrapper">
+        <div className="default-attachment-component-container--file-wrapper--placeholder">
+          <div className="default-attachment-component-container--file-wrapper--placeholder__bg" />
+          <div className="default-attachment-component-container--file-wrapper--placeholder__icon">
+            <TextDocument
+              width="16"
+              height="16"
+              applyZoom
+              color="var(--incoming-background)"
+            />
+          </div>
+        </div>
+        <div className="default-attachment-component-container--file-wrapper__file-d">
+          {fileName}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DefaultAttachmentComponent;

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

@@ -0,0 +1,26 @@
+.error-toast,
+.error-toast * {
+  box-sizing: border-box;
+}
+.error-toast {
+  background: var(--color-background-overlay);
+  border-radius: 4px;
+  opacity: 0.6000000238418579;
+  padding: 4px 12px 4px 12px;
+  // margin-top: 36px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: flex-start;
+  justify-content: flex-start;
+  position: relative;
+}
+.translation-failed-try-again {
+  color: var(--color-background);
+  text-align: left;
+  font: 500 12px/16px "Roboto", sans-serif;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}