quickblox-react-ui-kit 0.2.2 → 0.2.4

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

@@ -0,0 +1,89 @@
+// eslint-disable-next-line import/extensions
+import { QBAIRephrase } from 'qb-ai-rephrase';
+import { IChatMessage } from '../../../Data/source/AISource';
+import { IUseCase } from '../base/IUseCase';
+import { Tone } from '../../../Presentation/components/UI/Dialogs/MessagesView/AIWidgets/Tone';
+
+export class AIRephraseUseCase implements IUseCase<void, string> {
+  private textToSend: string;
+
+  private tone: Tone;
+
+  private dialogMessages: IChatMessage[];
+
+  private servername: string;
+
+  private api: string;
+
+  private port: string;
+
+  private sessionToken: string;
+
+  private openAIModel: string;
+
+  constructor(
+    textToSend: string,
+    tone: Tone,
+    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.tone = tone;
+    this.servername = servername;
+    this.dialogMessages = dialogMessages;
+  }
+
+  async execute(): Promise<string> {
+    console.log('execute AIRephraseUseCase');
+
+    const settings = QBAIRephrase.createDefaultAIRephraseSettings();
+
+    settings.apiKey = this.sessionToken;
+    // settings.organization = 'Quickblox';
+    settings.model = this.openAIModel;
+    settings.tone = this.tone;
+
+    return QBAIRephrase.rephrase(
+      this.textToSend,
+      this.dialogMessages,
+      settings,
+    );
+
+    /*
+    const settings: AITranslateSettings =
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      QBAITranslate.createDefaultAITranslateSettings();
+
+    settings.apiKey = this.sessionToken;
+    settings.language = this.language;
+
+    return QBAITranslate.translate(
+      this.textToSend,
+      this.dialogMessages,
+      settings,
+    );
+     */
+
+    // const prompt = AIUtils.createRephrasePrompt(this.textToSend, this.tone);
+    //
+    // 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/AIRephraseWithProxyUseCase.ts

@@ -0,0 +1,75 @@
+// eslint-disable-next-line import/extensions
+import { QBAIRephrase } from 'qb-ai-rephrase';
+import { IChatMessage } from '../../../Data/source/AISource';
+import { IUseCase } from '../base/IUseCase';
+import { Tone } from '../../../Presentation/components/UI/Dialogs/MessagesView/AIWidgets/Tone';
+
+export class AIRephraseWithProxyUseCase implements IUseCase<void, string> {
+  private textToSend: string;
+
+  private tone: Tone;
+
+  private dialogMessages: IChatMessage[];
+
+  private servername: string;
+
+  private api: string;
+
+  private port: string;
+
+  private sessionToken: string;
+
+  private openAIModel: string;
+
+  constructor(
+    textToSend: string,
+    tone: Tone,
+    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.tone = tone;
+    this.servername = servername;
+    this.dialogMessages = dialogMessages;
+  }
+
+  async execute(): Promise<string> {
+    console.log('execute AIRephraseUseCase');
+
+    const settings = QBAIRephrase.createDefaultAIRephraseSettings();
+
+    settings.token = this.sessionToken;
+    // settings.organization = 'Quickblox';
+    settings.model = this.openAIModel;
+    settings.tone = this.tone;
+    settings.serverPath = `${this.servername}:${this.port}/${this.api}`;
+
+    return QBAIRephrase.rephrase(
+      this.textToSend,
+      this.dialogMessages,
+      settings,
+    );
+
+    // const prompt = AIUtils.createRephrasePrompt(this.textToSend, this.tone);
+    //
+    // 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/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

@@ -191,7 +191,7 @@ const DialogsComponent: React.FC<DialogsProps> = ({
         if (Number.isNaN(dateInt)) {
           return formattedValue;
         }
-        formattedValue = getTimeShort24hFormat(dateInt);
+        formattedValue = getTimeShort24hFormat(dateInt * 1000);
       }
 
       return formattedValue;
@@ -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/Views/Dialogs/useDialogsViewModel.ts

@@ -67,7 +67,10 @@ export default function useDialogsViewModel(
 
   const dialogUpdateHandler = (dialogInfo: DialogEventInfo) => {
     console.log('call dialogUpdateHandler in useDialogsViewModel');
-    if (dialogInfo.eventMessageType === EventMessageType.SystemMessage) {
+    if (
+      dialogInfo.eventMessageType === EventMessageType.SystemMessage
+      // || dialogInfo.eventMessageType === EventMessageType.RegularMessage
+    ) {
       if (dialogInfo.notificationTypes === NotificationTypes.UPDATE_DIALOG) {
         if (dialogInfo.messageInfo) {
           const { dialogId } = dialogInfo.messageInfo;

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

@@ -1,8 +1,20 @@
 import {
   FunctionTypeFileWithContextToToVoid,
   FunctionTypeJSXElement,
-  FunctionTypeStringWithContextToString,
+  FunctionTypeStringWithContextToString, FunctionTypeVoidToTones,
 } from '../../../../../Views/Base/BaseViewModel';
+import {Tone} from "./Tone";
+
+export 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;
+}
 
 export interface AIWidget {
   renderWidget: FunctionTypeJSXElement;
@@ -18,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

@@ -1,26 +1,26 @@
 import { useState } from 'react';
-import { AIMessageWidget } from './AIMessageWidget';
+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'
-  // 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 UseDefaultAIAssistAnswerWidget({
   servername,
   api,
   port,
-  sessionToken,
-  apiKey,
+  apiKeyOrSessionToken,
 }: MessageWidgetProps): AIMessageWidget {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [errorMessage, setErrorMessage] = useState<string>('');
@@ -51,41 +51,25 @@ 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}"`;
-
-      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;
-        });
-      }
+      const openAIModel = 'gpt-3.5-turbo';
 
-      // eslint-disable-next-line no-return-await
-      return await AISource.getDataWithProxyServer(
-        prompt,
+      const useCaseAIAnswerAssist = new AIAnswerAssistUseCase(
+        textToSend,
         // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
         context,
         servername,
         api,
         port,
-        sessionToken,
-      ).then((data) => {
+        apiKeyOrSessionToken,
+        openAIModel,
+      );
+
+      // eslint-disable-next-line no-return-await
+      return await useCaseAIAnswerAssist.execute().then((data) => {
         setTextFromWidgetToContent(data);
 
         return data;
       });
-
-      // eslint-disable-next-line no-return-await
     }
 
     return '';

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

@@ -0,0 +1,83 @@
+import { useState } from 'react';
+import { AIMessageWidget, MessageWidgetProps } from './AIMessageWidget';
+import AIWidgetIcon from '../../../svgs/Icons/AIWidgets/AIWidget';
+import ErrorMessageIcon from './ErrorMessageIcon';
+import { IChatMessage } from '../../../../../../Data/source/AISource';
+import { AIAnswerAssistWithProxyUseCase } from '../../../../../../Domain/use_cases/ai/AIAnswerAssistWithProxyUseCase';
+
+// 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 UseDefaultAIAssistAnswerWidgetWithProxy({
+  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[],
+  ): Promise<string> => {
+    if (textToSend && textToSend.length > 0) {
+      const openAIModel = 'gpt-3.5-turbo';
+
+      const useCaseAIAnswerAssist = new AIAnswerAssistWithProxyUseCase(
+        textToSend,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        context,
+        servername,
+        api,
+        port,
+        apiKeyOrSessionToken,
+        openAIModel,
+      );
+
+      // eslint-disable-next-line no-return-await
+      return await useCaseAIAnswerAssist.execute().then((data) => {
+        setTextFromWidgetToContent(data);
+
+        return data;
+      });
+    }
+
+    return '';
+  };
+
+  return {
+    textToContent: textFromWidgetToContent,
+    renderWidget,
+    textToWidget,
+  };
+}