quickblox-react-ui-kit 0.2.2 → 0.2.4

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

@@ -1,24 +1,24 @@
 import { useState } from 'react';
-import { AIMessageWidget } from './AIMessageWidget';
+import { AIMessageWidget, MessageWidgetProps } 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';
+import { Tone } from './Tone';
+import { IChatMessage } from '../../../../../../Data/source/AISource';
+import { AIRephraseUseCase } from '../../../../../../Domain/use_cases/ai/AIRephraseUseCase';
 
-interface MessageWidgetProps {
-  servername: string;
-  api: string;
-  port: string;
-  sessionToken: string;
-  apiKey: string;
-}
+// interface MessageWidgetProps {
+//   servername: string;
+//   api: string;
+//   port: string;
+//   apiKeyOrSessionToken: string;
+//   apiKey: string;
+// }
 
 export default function UseDefaultAIRephraseMessageWidget({
   servername,
   api,
   port,
-  sessionToken,
-  apiKey,
+  apiKeyOrSessionToken,
 }: MessageWidgetProps): AIMessageWidget {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [errorMessage, setErrorMessage] = useState<string>('');
@@ -51,42 +51,24 @@ export default function UseDefaultAIRephraseMessageWidget({
     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);
+      const openAIModel = 'gpt-3.5-turbo';
 
-          return data;
-        });
-      }
-
-      // eslint-disable-next-line no-return-await
-      return await AISource.getDataWithProxyServer(
-        prompt,
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      // AIRephraseWithProxyUseCase
+      const useCaseAIRephrase = new AIRephraseUseCase(
+        textToSend,
+        tone as Tone,
         context,
         servername,
         api,
         port,
-        sessionToken,
-      ).then((data) => {
+        apiKeyOrSessionToken,
+        openAIModel,
+      );
+
+      // eslint-disable-next-line no-return-await
+      return await useCaseAIRephrase.execute().then((data) => {
         setTextFromWidgetToContent(data);
 
         return data;
@@ -97,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

@@ -0,0 +1,102 @@
+import { useState } from 'react';
+import { AIMessageWidget, MessageWidgetProps } from './AIMessageWidget';
+import ErrorMessageIcon from './ErrorMessageIcon';
+import AIWidgetIcon from '../../../svgs/Icons/AIWidgets/AIWidget';
+import { Tone } from './Tone';
+import { IChatMessage } from '../../../../../../Data/source/AISource';
+import { AIRephraseWithProxyUseCase } from '../../../../../../Domain/use_cases/ai/AIRephraseWithProxyUseCase';
+
+// interface MessageWidgetProps {
+//   servername: string;
+//   api: string;
+//   port: string;
+//   apiKeyOrSessionToken: string;
+//   apiKey: string;
+// }
+
+export default function UseDefaultAIRephraseMessageWidgetWithProxy({
+  servername,
+  api,
+  port,
+  apiKeyOrSessionToken,
+}: 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) {
+      const { tone } = additionalSettings || {};
+
+      const openAIModel = 'gpt-3.5-turbo';
+
+      const useCaseAIRephrase = new AIRephraseWithProxyUseCase(
+        textToSend,
+        tone as Tone,
+        context,
+        servername,
+        api,
+        port,
+        apiKeyOrSessionToken,
+        openAIModel,
+      );
+
+      // eslint-disable-next-line no-return-await
+      return await useCaseAIRephrase.execute().then((data) => {
+        setTextFromWidgetToContent(data);
+
+        return data;
+      });
+    }
+
+    //
+    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

@@ -1,26 +1,26 @@
 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';
+import { AIMessageWidget, MessageWidgetProps } from './AIMessageWidget';
+import { IChatMessage } from '../../../../../../Data/source/AISource';
+import { AITranslateUseCase } from '../../../../../../Domain/use_cases/ai/AITranslateUseCase';
 
-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;
-}
+// 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;
+//   apiKeyOrSessionToken: string;
+//   apiKey: string;
+// }
 export default function UseDefaultAITranslateWidget({
   servername,
   api,
   port,
-  sessionToken,
-  apiKey,
+  apiKeyOrSessionToken,
 }: MessageWidgetProps): AIMessageWidget {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [errorMessage, setErrorMessage] = useState<string>('');
@@ -53,42 +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}"`;
-      }
-
-      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,
+      // AIRephraseWithProxyUseCase
+      const useCaseAITranslate = new AITranslateUseCase(
+        textToSend,
         // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        language,
         context,
         servername,
         api,
         port,
-        sessionToken,
-      ).then((data) => {
+        apiKeyOrSessionToken,
+        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

@@ -0,0 +1,89 @@
+import { useState } from 'react';
+import AIWidgetIcon from '../../../svgs/Icons/AIWidgets/AIWidget';
+import ErrorMessageIcon from './ErrorMessageIcon';
+import { AIMessageWidget, MessageWidgetProps } from './AIMessageWidget';
+import { IChatMessage } from '../../../../../../Data/source/AISource';
+import { AITranslateWithProxyUseCase } from '../../../../../../Domain/use_cases/ai/AITranslateWithProxyUseCase';
+
+// 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;
+//   apiKeyOrSessionToken: string;
+//   apiKey: string;
+// }
+export default function UseDefaultAITranslateWidgetWithProxy({
+  servername,
+  api,
+  port,
+  apiKeyOrSessionToken,
+}: 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
+      const { language } = additionalSettings || {};
+      //
+      const openAIModel = 'gpt-3.5-turbo';
+
+      // AIRephraseWithProxyUseCase
+      const useCaseAITranslate = new AITranslateWithProxyUseCase(
+        textToSend,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        language,
+        context,
+        servername,
+        api,
+        port,
+        apiKeyOrSessionToken,
+        openAIModel,
+      );
+
+      // eslint-disable-next-line no-return-await
+      return await useCaseAITranslate.execute().then((data) => {
+        setTextFromWidgetToContent(data);
+
+        return data;
+      });
+    }
+
+    return '';
+  };
+
+  return {
+    textToContent: textFromWidgetToContent,
+    renderWidget,
+    textToWidget,
+  };
+}

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;
+}

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import './ErrorToast.scss';
+
+type ErrorToastProps = {
+  messageText: string;
+  // displayTimeout: number;
+};
+
+// eslint-disable-next-line react/function-component-definition
+export const ErrorToast: React.FC<ErrorToastProps> = ({
+  messageText,
+}: // displayTimeout,
+ErrorToastProps) => {
+  return (
+    // <div>
+    //   {messageText} - {displayTimeout}
+    // </div>
+
+    <div className="error-toast">
+      <div className="translation-failed-try-again">
+        {messageText} Try again.
+      </div>
+    </div>
+  );
+};

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

@@ -289,7 +289,7 @@
   font: var(--label-label-small, 500 11px/16px "Roboto", sans-serif);
   position: relative;
 }
-.icon {
+.icon-translate {
   border-radius: 4px;
   display: flex;
   flex-direction: row;
@@ -349,16 +349,15 @@
 }
 
 .ai-translate-action {
-  color: var(--secondary-secondary-300, #636d78);
+  color: var(--tertiary-elements);
   text-align: right;
-  font: var(--label-label-small, 500 11px/16px "Roboto", sans-serif);
+  font: 500 11px/16px "Roboto", sans-serif;
   position: relative;
-  cursor: pointer;
 }
 
 
 // --- AIAssist
-.assist-answer {
+.ai-assist-answer {
   display: flex;
   flex-direction: row;
   gap: 10px;
@@ -367,7 +366,6 @@
   align-self: stretch;
   flex-shrink: 0;
   position: relative;
-  cursor: pointer;
 }
 .icon {
   border-radius: 4px;