quickblox-react-ui-kit 0.2.0 → 0.2.2

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

@@ -0,0 +1,21 @@
+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 const toneToString = (tone: Tone): string => {
+  return tone;
+};
+
+export const stringToTone = (toneStr: string): Tone | undefined => {
+  return Tone[toneStr as keyof typeof Tone];
+};

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

@@ -0,0 +1,99 @@
+import { useState } from 'react';
+import { AIMessageWidget } from './AIMessageWidget';
+import AIWidgetIcon from '../../../svgs/Icons/AIWidgets/AIWidget';
+import ErrorMessageIcon from './ErrorMessageIcon';
+import { AISource, IChatMessage } from '../../../../../../Data/source/AISource';
+
+interface MessageWidgetProps {
+  // https://api.openai.com/v1/chat/completions'
+  // api: 'v1/chat/completions',
+  // servername: 'https://myproxy.com',
+  // https://func270519800.azurewebsites.net/api/TranslateTextToEng
+  servername: string;
+  api: string;
+  port: string;
+  sessionToken: string;
+  apiKey: string;
+}
+export default function UseDefaultAIAssistAnswerWidget({
+  servername,
+  api,
+  port,
+  sessionToken,
+  apiKey,
+}: MessageWidgetProps): AIMessageWidget {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [errorMessage, setErrorMessage] = useState<string>('');
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/no-empty-function
+  const fileToWidget = (file: File, context: IChatMessage[]): void => {};
+
+  const renderWidget = (): JSX.Element => {
+    if (errorMessage && errorMessage.length > 0) {
+      const errorsDescriptions:
+        | { title: string; action: () => void }[]
+        | undefined = [];
+
+      return (
+        <ErrorMessageIcon
+          errorMessageText={errorMessage}
+          errorsDescriptions={errorsDescriptions}
+        />
+      );
+    }
+
+    return <AIWidgetIcon applyZoom color="green" />;
+  };
+
+  const [textFromWidgetToContent, setTextFromWidgetToContent] = useState('');
+  const textToWidget = async (
+    textToSend: string,
+    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}"`;
+
+      if (apiKey.length > 0) {
+        // eslint-disable-next-line no-return-await
+        return await AISource.getData(
+          prompt,
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+          context,
+          servername,
+          api,
+          port,
+          sessionToken,
+        ).then((data) => {
+          setTextFromWidgetToContent(data);
+
+          return data;
+        });
+      }
+
+      // eslint-disable-next-line no-return-await
+      return await AISource.getDataWithProxyServer(
+        prompt,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        context,
+        servername,
+        api,
+        port,
+        sessionToken,
+      ).then((data) => {
+        setTextFromWidgetToContent(data);
+
+        return data;
+      });
+
+      // eslint-disable-next-line no-return-await
+    }
+
+    return '';
+  };
+
+  return {
+    textToContent: textFromWidgetToContent,
+    renderWidget,
+    textToWidget,
+  };
+}

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

@@ -0,0 +1,105 @@
+import { useState } from 'react';
+import { AIMessageWidget } from './AIMessageWidget';
+import ErrorMessageIcon from './ErrorMessageIcon';
+import AIWidgetIcon from '../../../svgs/Icons/AIWidgets/AIWidget';
+import { Tone, toneToString } from './Tone';
+import { AISource, IChatMessage } from '../../../../../../Data/source/AISource';
+
+interface MessageWidgetProps {
+  servername: string;
+  api: string;
+  port: string;
+  sessionToken: string;
+  apiKey: string;
+}
+
+export default function UseDefaultAIRephraseMessageWidget({
+  servername,
+  api,
+  port,
+  sessionToken,
+  apiKey,
+}: MessageWidgetProps): AIMessageWidget {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [errorMessage, setErrorMessage] = useState<string>('');
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/no-empty-function
+  const fileToWidget = (file: File, context: IChatMessage[]): void => {};
+
+  const renderWidget = (): JSX.Element => {
+    if (errorMessage && errorMessage.length > 0) {
+      const errorsDescriptions:
+        | { title: string; action: () => void }[]
+        | undefined = [];
+
+      return (
+        <ErrorMessageIcon
+          errorMessageText={errorMessage}
+          errorsDescriptions={errorsDescriptions}
+        />
+      );
+    }
+
+    return <AIWidgetIcon applyZoom color="green" />;
+  };
+
+  const [textFromWidgetToContent, setTextFromWidgetToContent] = useState('');
+
+  const textToWidget = async (
+    textToSend: string,
+    context: IChatMessage[],
+    additionalSettings?: { [key: string]: any },
+  ): Promise<string> => {
+    if (textToSend && textToSend.length > 0) {
+      let prompt = `Analyze the entire context of our conversation – all the messages – and create a brief summary of our discussion. Based on this analysis, rephrase the following text in a style and tone that is typical for most of the dialogue messages. Provide only the rephrased text in as the message text to rephrase and nothing more.Give me only rephrase text in brackets and nothing more. Here is the message text to rephrase:"${textToSend}"`;
+      const { tone } = additionalSettings || {};
+
+      if (tone) {
+        prompt = `Analyze the entire context of our conversation – all the messages – and create a brief summary of our discussion. Based on this analysis, rephrase the following text in a ${toneToString(
+          tone as Tone,
+        )} style. Provide only the rephrased text in the same language as the message text to rephrase and nothing more.Give me only rephrase text in brackets and nothing more. Here is the message text to rephrase:"${textToSend}"`;
+      }
+
+      if (apiKey.length > 0) {
+        // eslint-disable-next-line no-return-await
+        return await AISource.getData(
+          prompt,
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+          context,
+          servername,
+          api,
+          port,
+          sessionToken,
+        ).then((data) => {
+          setTextFromWidgetToContent(data);
+
+          return data;
+        });
+      }
+
+      // eslint-disable-next-line no-return-await
+      return await AISource.getDataWithProxyServer(
+        prompt,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        context,
+        servername,
+        api,
+        port,
+        sessionToken,
+      ).then((data) => {
+        setTextFromWidgetToContent(data);
+
+        return data;
+      });
+    }
+
+    //
+    return '';
+  };
+
+  return {
+    textToContent: textFromWidgetToContent,
+    renderWidget,
+    textToWidget,
+  };
+}

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

@@ -0,0 +1,106 @@
+import { useState } from 'react';
+import AIWidgetIcon from '../../../svgs/Icons/AIWidgets/AIWidget';
+import ErrorMessageIcon from './ErrorMessageIcon';
+import { AIMessageWidget } from './AIMessageWidget';
+import { AISource, IChatMessage } from '../../../../../../Data/source/AISource';
+
+interface MessageWidgetProps {
+  // https://api.openai.com/v1/chat/completions'
+  // api: 'v1/chat/completions',
+  // servername: 'https://myproxy.com',
+  // https://func270519800.azurewebsites.net/api/TranslateTextToEng
+  servername: string;
+  api: string;
+  port: string;
+  sessionToken: string;
+  apiKey: string;
+}
+export default function UseDefaultAITranslateWidget({
+  servername,
+  api,
+  port,
+  sessionToken,
+  apiKey,
+}: MessageWidgetProps): AIMessageWidget {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [errorMessage, setErrorMessage] = useState<string>('');
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/no-empty-function
+  const fileToWidget = (file: File, context: IChatMessage[]): void => {};
+
+  const renderWidget = (): JSX.Element => {
+    if (errorMessage && errorMessage.length > 0) {
+      const errorsDescriptions:
+        | { title: string; action: () => void }[]
+        | undefined = [];
+
+      return (
+        <ErrorMessageIcon
+          errorMessageText={errorMessage}
+          errorsDescriptions={errorsDescriptions}
+        />
+      );
+    }
+
+    return <AIWidgetIcon applyZoom color="green" />;
+  };
+
+  const [textFromWidgetToContent, setTextFromWidgetToContent] = useState('');
+  const textToWidget = async (
+    textToSend: string,
+    context: IChatMessage[],
+    additionalSettings?: { [key: string]: any },
+  ): 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 || {};
+
+      if (language) {
+        prompt = `Please, translate the next text in ${
+          language as string
+        } and give me just only translated text. Text to translate is: "${textToSend}"`;
+      }
+
+      if (apiKey.length > 0) {
+        // eslint-disable-next-line no-return-await
+        return await AISource.getData(
+          prompt,
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+          context,
+          servername,
+          api,
+          port,
+          sessionToken,
+        ).then((data) => {
+          setTextFromWidgetToContent(data);
+
+          return data;
+        });
+      }
+
+      // eslint-disable-next-line no-return-await
+      return await AISource.getDataWithProxyServer(
+        prompt,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        context,
+        servername,
+        api,
+        port,
+        sessionToken,
+      ).then((data) => {
+        setTextFromWidgetToContent(data);
+
+        return data;
+      });
+    }
+
+    return '';
+  };
+
+  return {
+    textToContent: textFromWidgetToContent,
+    renderWidget,
+    textToWidget,
+  };
+}

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

@@ -1,9 +1,9 @@
 import { useState } from 'react';
-import { AIWidget } from './AIWidget';
+import { AIAttachmentWidget } from './AIMessageWidget';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import VoiceIcon from '../../../svgs/Icons/Actions/Voice';
 
-export default function useDefaultVoiceInputWidget(): AIWidget {
+export default function useDefaultVoiceInputWidget(): AIAttachmentWidget {
   const renderWidget = (): JSX.Element => {
     // return <VoiceIcon width="21" height="18" applyZoom color="red" />;
     return (
@@ -32,7 +32,7 @@ export default function useDefaultVoiceInputWidget(): AIWidget {
 
   const [audioFromWidgetToInput, setAudioFromWidgetToInput] = useState<File>();
 
-  async function sendFile(file: File): Promise<any> {
+  async function sendFile(file: File): Promise<string> {
     if (file) {
       // Создание объекта FormData и добавление файла
       const formData = new FormData();
@@ -57,8 +57,10 @@ export default function useDefaultVoiceInputWidget(): AIWidget {
         JSON.stringify(data.replaceAll('\n\n', '')),
       );
 
-      return data.replaceAll('\n\n', '');
+      return data.replaceAll('\n\n', '') || '';
     }
+
+    return '';
   }
 
   const fileToWidget = (file: File): void => {
@@ -68,6 +70,7 @@ export default function useDefaultVoiceInputWidget(): AIWidget {
     console.log(fileInfo);
     if (file) {
       // Отправка файла и получение результата
+      // eslint-disable-next-line promise/catch-or-return,promise/always-return
       sendFile(file).then((result) => {
         // Обработка результата
         console.log(result);
@@ -78,9 +81,7 @@ export default function useDefaultVoiceInputWidget(): AIWidget {
 
   return {
     fileToContent: audioFromWidgetToInput,
-    textToContent: textFromWidgetToInput,
     fileToWidget,
     renderWidget,
-    textToWidget,
   };
 }

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

@@ -7,6 +7,7 @@ type MenuItem = {
 };
 
 type ContextMenuProps = {
+  widgetToRender?: JSX.Element;
   items?: MenuItem[];
 };
 
@@ -14,8 +15,8 @@ const ContextMenuStyles: { [key: string]: CSSProperties } = {
   contextMenuIcon: {
     display: 'inline-block',
     position: 'relative',
-    width: '42px',
-    height: '42px',
+    maxWidth: '42px',
+    maxHeight: '42px',
     cursor: 'pointer',
   },
   contextMenuContent: {
@@ -32,7 +33,7 @@ const ContextMenuStyles: { [key: string]: CSSProperties } = {
   },
 };
 
-function ContextMenu({ items }: ContextMenuProps) {
+function ContextMenu({ items, widgetToRender }: ContextMenuProps) {
   const [menuVisible, setMenuVisible] = useState(false);
   const contextMenuRef = useRef<HTMLDivElement | null>(null);
 
@@ -68,9 +69,7 @@ function ContextMenu({ items }: ContextMenuProps) {
         ...ContextMenuStyles.contextMenuIcon,
       }}
     >
-      <div onClick={handleClick}>
-        <EditDots />
-      </div>
+      <div onClick={handleClick}>{widgetToRender || <EditDots />}</div>
       {menuVisible && (
         <div ref={contextMenuRef} style={ContextMenuStyles.contextMenuContent}>
           {items?.map((item, index) => (

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

@@ -0,0 +1,84 @@
+.popup-container {
+  position: inherit;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.popup-body {
+  position: absolute;
+  left: 30%;
+  right: 30%;
+  bottom: 30%;
+  top: 30%;
+  text-align: center;
+  margin: auto;
+  border-radius: 15px;
+  border-color: black;
+  background: white;
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+  color: #FF766E;
+}
+
+.drop-down-menu-container {
+  position:relative;
+  width:200px;
+
+  //box-shadow:0px 8px 10px rgba(0, 0, 0, 0.11999999731779099);
+  //background-color:rgba(255, 255, 255, 1);
+  //width:135px;
+  //height:112px;
+  //border-radius: 4px;
+  ////position:absolute;
+  //position: relative;
+  //border: var(--outgoing-background);
+}
+
+.drop-down-menu2-container {
+  width: 135px;
+  min-width: 135px;
+  max-width: 135px;
+  //
+  position: fixed;
+  z-index: 100;
+  //
+  //
+  //display: flex;
+  //flex-direction: column;
+
+  display: inline-flex;
+  padding: 8px 0px;
+  flex-direction: column;
+  align-items: flex-end;
+  //
+  //display: flex;
+  //flex-direction: column;
+  //justify-content: flex-end;
+
+  border-radius: 4px;
+  //background-color: #FF766E;
+  //background: #49CF77;
+  background: var(--dropdown-background, #FFF);
+  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.04), 0px 3px 14px 0px rgba(0, 0, 0, 0.08), 0px 8px 10px 0px rgba(0, 0, 0, 0.12);
+
+  //border: 3px solid green;
+
+  &--divider{
+
+    display: flex;
+    padding: 4px 8px 4px 16px;
+    justify-content: flex-end;
+    align-items: center;
+    align-self: stretch;
+
+
+    width: 111px;
+    height: 3px;
+
+    flex-shrink: 0;
+    color: var(--divider);
+  }
+}

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

@@ -0,0 +1,105 @@
+import './DropDownMenu.scss';
+import React from 'react';
+import { ItemDropDownMenu } from './ItemDropDownMenu/ItemDropDownMenu';
+import { FunctionTypeVoidToVoid } from '../../../../../Views/Base/BaseViewModel';
+import { MessageEntity } from '../../../../../../Domain/entity/MessageEntity';
+import ForwardFilled from '../../../svgs/Icons/Actions/ForwardFilled';
+
+export type ContextMessageMenu = {
+  title: string;
+  message?: MessageEntity;
+  icon?: React.ReactNode;
+  clickHandler?: FunctionTypeVoidToVoid;
+  touchHandler?: FunctionTypeVoidToVoid;
+};
+export type ContextMessageMenuAI = {
+  title: string;
+  message?: MessageEntity;
+  icon?: React.ReactNode;
+  clickHandler?: FunctionTypeVoidToVoid;
+  touchHandler?: FunctionTypeVoidToVoid;
+};
+
+export const contextMessageMenu: ContextMessageMenu[] = [
+  {
+    title: 'Reply',
+    // icon: 'ic1',
+    clickHandler: () => {
+      console.log('click Reply');
+    },
+  },
+  {
+    title: 'Forward',
+    icon: <ForwardFilled />,
+    clickHandler: () => {
+      console.log('click Forward');
+    },
+  },
+  {
+    title: 'Copy',
+    // icon: 'ic2',
+    clickHandler: () => {
+      console.log('click Copy');
+    },
+  },
+];
+
+export const contextMessageMenuAI: ContextMessageMenuAI[] = [
+  // {
+  //   title: 'Translate',
+  //   // icon: ,
+  //   clickHandler: () => {
+  //     console.log('click Translate');
+  //   },
+  // },
+  // {
+  //   title: 'Answer',
+  //   // icon: 'ic2',
+  //   clickHandler: () => {
+  //     console.log('click Answer');
+  //   },
+  // },
+];
+
+type DropDownMenuProps = {
+  items: ContextMessageMenu[];
+  itemsAI?: ContextMessageMenuAI[];
+};
+
+// eslint-disable-next-line react/function-component-definition
+export const DropDownMenu: React.FC<DropDownMenuProps> = ({
+  items,
+  itemsAI,
+}: DropDownMenuProps) => {
+  console.log(itemsAI);
+
+  return (
+    <div className="drop-down-menu2-container">
+      {items.map((item, index) => {
+        return (
+          <ItemDropDownMenu
+            key={index}
+            item={item.title}
+            icon={item.icon}
+            clickAction={item.clickHandler}
+            touchAction={item.touchHandler}
+          />
+        );
+      })}
+      <div className="drop-down-menu2-container--divider" />
+      {itemsAI && itemsAI?.length > 0
+        ? itemsAI?.map((itemAI, indexAI) => {
+            return (
+              <ItemDropDownMenu
+                key={indexAI}
+                item={itemAI.title}
+                icon={itemAI.icon}
+                clickAction={itemAI.clickHandler}
+                touchAction={itemAI.touchHandler}
+              />
+            );
+          })
+        : null}
+    </div>
+  );
+};

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

@@ -0,0 +1,50 @@
+.item-drop-down-menu-container {
+  //width:135px;
+  //height:32px;
+  //position:absolute;
+  //left:0px;
+  //top:8px;ß
+
+  //min-height: 36px;
+  //display: flex;
+  //flex-direction: row;
+  //flex-wrap: nowrap;
+  //justify-content: flex-start;
+  //align-items: center;
+  //gap: 16px;
+  //color: firebrick;
+
+  display: flex;
+  padding: 4px 8px 4px 16px;
+  justify-content: flex-end;
+  align-items: center;
+  align-self: flex-start;
+
+  //border: 1px solid blue;
+
+  &--title {
+    color: var(--main-text);
+    text-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    min-width: 80px;
+    max-width: 80px;
+    width: 80px;
+
+    /* Body/Body Medium */
+    font-family: Roboto;
+    text-align: left;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px; /* 142.857% */
+    letter-spacing: 0.25px;
+  }
+
+  &--icon {
+    display: flex;
+    width: 24px;
+    height: 24px;
+    padding: 4px;
+    justify-content: center;
+    align-items: center;
+  }
+}