quickblox-react-ui-kit 0.2.3 → 0.2.4

package/dist/utils/utils.d.ts

@@ -1,3 +1,12 @@
+import { MessageEntity } from '../Domain/entity/MessageEntity';
+import { IChatMessage } from '../Data/source/AISource';
+import { Tone } from '../Presentation/components/UI/Dialogs/MessagesView/AIWidgets/Tone';
 export declare const completeSentence: (text?: string) => string;
 export declare const tokenCounter: (text?: string) => number;
 export declare const loopToLimitTokens: <T>(limit: number, data: T[], getValue?: (item: T) => string, tokens?: number) => T[];
+export declare class AIUtils {
+    static createTranslatePrompt(textToSend: string, language?: string): string;
+    static createAnswerAssistPrompt(textToSend: string): string;
+    static createRephrasePrompt(textToSend: string, tone?: Tone): string;
+    static messageEntitiesToIChatMessageCollection(messageEntities: MessageEntity[], currentUserId: number | undefined, MAX_TOKENS?: number): IChatMessage[];
+}

package/global.d.ts

@@ -1,3 +1,9 @@
+interface Tone {
+  name: string;
+  description: string;
+  iconEmoji: string;
+}
+
 type Dictionary<T> = Record<string, T>;
 
 type DictionaryByKey<T, V> = {
@@ -21,20 +27,22 @@ type ProxyConfig = {
   api: string;
   servername: string;
   port: string;
-  sessionToken: string;
 };
 interface WidgetConfig {
   apiKey: string;
   useDefault: boolean;
+  maxTokens: number;
   proxyConfig: ProxyConfig;
 }
 
-interface AITranslateWidgetConfig extends WidgetConfig{
-  defaultLanguage: string; languages: string[];
+interface AITranslateWidgetConfig extends WidgetConfig {
+  defaultLanguage: string;
+  languages: string[];
 }
 
 interface AIRephraseWidgetConfig extends WidgetConfig {
-  defaultTone: string
+  defaultTone: string;
+  Tones: Tone[];
 }
 
 interface QBConfig {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quickblox-react-ui-kit",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "main": "dist/index-ui.js",
   "license": "MIT",
   "dependencies": {
@@ -8,6 +8,10 @@
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "classnames": "^2.3.2",
+    "qb-ai-answer-assistant": "^0.1.0",
+    "qb-ai-core": "^0.1.0",
+    "qb-ai-rephrase": "^0.1.0",
+    "qb-ai-translate": "^0.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.11.1",

package/src/CommonTypes/FunctionResult.ts

@@ -1,3 +1,5 @@
+import {Tone} from "../Presentation/components/UI/Dialogs/MessagesView/AIWidgets/Tone";
+
 export type FunctionResult<T> = {
   result: T | T[] | boolean;
   error: any;
@@ -7,10 +9,12 @@ export type ProxyConfig = {
   api: string;
   servername: string;
   port: string;
-  sessionToken: string;
 };
 export interface WidgetConfig {
+  organizationName: string;
+  openAIModel: string;
   apiKey: string;
+  maxTokens: number;
   useDefault: boolean;
   proxyConfig: ProxyConfig;
 }
@@ -22,6 +26,7 @@ export interface AITranslateWidgetConfig extends WidgetConfig {
 
 export interface AIRephraseWidgetConfig extends WidgetConfig {
   defaultTone: string;
+  Tones: Tone[];
 }
 
 export interface QBConfig {

package/src/Data/DefaultConfigurations.ts

@@ -9,6 +9,7 @@ const supportedLanguagesForIATranslate: string[] = [
   'German',
 ];
 
+// ["en-US", "zh-CN", "ja-JP"]
 const languageBCP47: Record<string, string> = {
   'ar-SA': 'Arabic',
   'bn-BD': 'Bangla',
@@ -80,15 +81,17 @@ export class DefaultConfigurations {
       api: 'v1/chat/completions',
       servername: 'https://api.openai.com',
       port: '',
-      sessionToken: '',
     };
   }
 
-  static getDefaultLanguageForAITranslate(): string {
+  static getDefaultLanguageForAITranslate(
+    configAITranslate: AITranslateWidgetConfig,
+  ): string {
     let languageForAITranslate = 'English';
-    const { defaultLanguage } =
+    const defaultLanguage: string =
+      configAITranslate.defaultLanguage ||
       DefaultConfigurations.getDefaultQBConfig().configAIApi
-        .AITranslateWidgetConfig;
+        .AITranslateWidgetConfig.defaultLanguage;
 
     if (
       defaultLanguage.length > 0 &&
@@ -106,11 +109,14 @@ export class DefaultConfigurations {
     return languageForAITranslate;
   }
 
-  static getAdditionalLanguagesForAITranslate(): string[] {
+  static getAdditionalLanguagesForAITranslate(
+    configAITranslate: AITranslateWidgetConfig,
+  ): string[] {
     const additionalLanguages: string[] = [];
-    const { languages } =
+    const languages: string[] =
+      configAITranslate.languages ||
       DefaultConfigurations.getDefaultQBConfig().configAIApi
-        .AITranslateWidgetConfig;
+        .AITranslateWidgetConfig.languages;
 
     languages.forEach((item) => {
       if (supportedLanguagesForIATranslate.includes(item)) {
@@ -135,43 +141,109 @@ export class DefaultConfigurations {
       },
       configAIApi: {
         AIAnswerAssistWidgetConfig: {
+          organizationName: 'Quickblox',
+          openAIModel: 'gpt-3.5-turbo',
           apiKey: '',
+          maxTokens: 3584,
           useDefault: true,
           proxyConfig: {
             api: 'v1/chat/completions',
             servername: 'https://api.openai.com/',
             port: '',
-            sessionToken: '',
           },
         },
         AITranslateWidgetConfig: {
+          organizationName: 'Quickblox',
+          openAIModel: 'gpt-3.5-turbo',
           apiKey: '',
+          maxTokens: 3584,
           useDefault: true,
           defaultLanguage: 'English',
-          languages: [
-            'English',
-            'Spanish',
-            'French',
-            'Portuguese',
-            'German',
-            'Ukrainian',
-          ],
+          languages: ['English', 'French', 'Portuguese', 'German', 'Ukrainian'],
           proxyConfig: {
             api: 'v1/chat/completions',
-            servername: 'https://api.openai.com/',
+            servername: '',
             port: '',
-            sessionToken: '',
           },
+          // proxyConfig: {
+          //   api: 'v1/chat/completions',
+          //   servername: 'http://localhost',
+          //   port: '3012',
+          // },
         },
         AIRephraseWidgetConfig: {
+          organizationName: 'Quickblox',
+          openAIModel: 'gpt-3.5-turbo',
           apiKey: '',
+          maxTokens: 3584,
           useDefault: true,
           defaultTone: 'Professional',
+          Tones: [
+            {
+              name: 'Professional Tone',
+              description:
+                'This would edit messages to sound more formal, using technical vocabulary, clear sentence structures, and maintaining a respectful tone. It would avoid colloquial language and ensure appropriate salutations and sign-offs',
+              iconEmoji: '👔',
+            },
+            {
+              name: 'Friendly Tone',
+              description:
+                'This would adjust messages to reflect a casual, friendly tone. It would incorporate casual language, use emoticons, exclamation points, and other informalities to make the message seem more friendly and approachable.',
+              iconEmoji: '🤝',
+            },
+            {
+              name: 'Encouraging Tone',
+              description:
+                'This tone would be useful for motivation and encouragement. It would include positive words, affirmations, and express support and belief in the recipient.',
+              iconEmoji: '💪',
+            },
+            {
+              name: 'Empathetic Tone',
+              description:
+                'This tone would be utilized to display understanding and empathy. It would involve softer language, acknowledging feelings, and demonstrating compassion and support.',
+              iconEmoji: '🤲',
+            },
+            {
+              name: 'Neutral Tone',
+              description:
+                'For times when you want to maintain an even, unbiased, and objective tone. It would avoid extreme language and emotive words, opting for clear, straightforward communication.',
+              iconEmoji: '😐',
+            },
+            {
+              name: 'Assertive Tone',
+              description:
+                'This tone is beneficial for making clear points, standing ground, or in negotiations. It uses direct language, is confident, and does not mince words.',
+              iconEmoji: '🔨',
+            },
+            {
+              name: 'Instructive Tone',
+              description:
+                'This tone would be useful for tutorials, guides, or other teaching and training materials. It is clear, concise, and walks the reader through steps or processes in a logical manner.',
+              iconEmoji: '📖',
+            },
+            {
+              name: 'Persuasive Tone',
+              description:
+                'This tone can be used when trying to convince someone or argue a point. It uses persuasive language, powerful words, and logical reasoning.',
+              iconEmoji: '☝️',
+            },
+            {
+              name: 'Sarcastic/Ironic Tone',
+              description:
+                'This tone can make the communication more humorous or show an ironic stance. It is harder to implement as it requires the AI to understand nuanced language and may not always be taken as intended by the reader.',
+              iconEmoji: '😏',
+            },
+            {
+              name: 'Poetic Tone',
+              description:
+                'This would add an artistic touch to messages, using figurative language, rhymes, and rhythm to create a more expressive text.',
+              iconEmoji: '🎭',
+            },
+          ],
           proxyConfig: {
             api: 'v1/chat/completions',
             servername: 'https://api.openai.com/',
             port: '',
-            sessionToken: '',
           },
         },
       },
@@ -190,6 +262,70 @@ export class DefaultConfigurations {
           enable: true,
         },
       },
+      // credentials: {
+      //   appId: -1,
+      //   accountKey: '',
+      //   authKey: '',
+      //   authSecret: '',
+      //   sessionToken: '',
+      // },
+      // configAIApi: {
+      //   AIAnswerAssistWidgetConfig: {
+      //     apiKey: '',
+      //     useDefault: true,
+      //     proxyConfig: {
+      //       api: 'v1/chat/completions',
+      //       servername: 'https://api.openai.com/',
+      //       port: '',
+      //       sessionToken: '',
+      //     },
+      //   },
+      //   AITranslateWidgetConfig: {
+      //     apiKey: '',
+      //     useDefault: true,
+      //     defaultLanguage: 'English',
+      //     languages: [
+      //       'English',
+      //       'Spanish',
+      //       'French',
+      //       'Portuguese',
+      //       'German',
+      //       'Ukrainian',
+      //     ],
+      //     proxyConfig: {
+      //       api: 'v1/chat/completions',
+      //       servername: 'https://api.openai.com/',
+      //       port: '',
+      //       sessionToken: '',
+      //     },
+      //   },
+      //   AIRephraseWidgetConfig: {
+      //     apiKey: '',
+      //     useDefault: true,
+      //     defaultTone: 'Professional',
+      //     proxyConfig: {
+      //       api: 'v1/chat/completions',
+      //       servername: 'https://api.openai.com/',
+      //       port: '',
+      //       sessionToken: '',
+      //     },
+      //   },
+      // },
+      // appConfig: {
+      //   maxFileSize: 10 * 1024 * 1024,
+      //   sessionTimeOut: 122,
+      //   chatProtocol: {
+      //     active: 2,
+      //   },
+      //   debug: true,
+      //   endpoints: {
+      //     api: 'api.quickblox.com',
+      //     chat: 'chat.quickblox.com',
+      //   },
+      //   streamManagement: {
+      //     enable: true,
+      //   },
+      // },
     };
   }
 

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

@@ -0,0 +1,69 @@
+// eslint-disable-next-line import/extensions
+import { QBAIAnswerAssistant } from 'qb-ai-answer-assistant';
+import { IChatMessage } from '../../../Data/source/AISource';
+import { IUseCase } from '../base/IUseCase';
+
+export class AIAnswerAssistUseCase implements IUseCase<void, string> {
+  private textToSend: string;
+
+  private dialogMessages: IChatMessage[];
+
+  private servername: string;
+
+  private api: string;
+
+  private port: string;
+
+  private sessionToken: string;
+
+  private openAIModel: string;
+
+  constructor(
+    textToSend: 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.servername = servername;
+    this.dialogMessages = dialogMessages;
+  }
+
+  async execute(): Promise<string> {
+    console.log('execute AIRephraseUseCase');
+    const settings =
+      QBAIAnswerAssistant.createDefaultAIAnswerAssistantSettings();
+
+    settings.apiKey = this.sessionToken;
+    // settings.organization = 'Quickblox';
+    settings.model = this.openAIModel;
+
+    return QBAIAnswerAssistant.createAnswer(
+      this.textToSend,
+      this.dialogMessages,
+      settings,
+    );
+
+    // const prompt = AIUtils.createAnswerAssistPrompt(this.textToSend);
+    //
+    // //
+    // 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/AIAnswerAssistWithProxyUseCase.ts

@@ -0,0 +1,71 @@
+// eslint-disable-next-line import/extensions
+import { QBAIAnswerAssistant } from 'qb-ai-answer-assistant';
+import { IChatMessage } from '../../../Data/source/AISource';
+import { IUseCase } from '../base/IUseCase';
+
+export class AIAnswerAssistWithProxyUseCase implements IUseCase<void, string> {
+  private textToSend: string;
+
+  private dialogMessages: IChatMessage[];
+
+  private servername: string;
+
+  private api: string;
+
+  private port: string;
+
+  private sessionToken: string;
+
+  private openAIModel: string;
+
+  constructor(
+    textToSend: 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.servername = servername;
+    this.dialogMessages = dialogMessages;
+  }
+
+  async execute(): Promise<string> {
+    console.log('execute AIRephraseUseCase');
+
+    const settings =
+      QBAIAnswerAssistant.createDefaultAIAnswerAssistantSettings();
+
+    settings.token = this.sessionToken;
+    // settings.organization = 'Quickblox';
+    settings.model = this.openAIModel;
+    settings.serverPath = `${this.servername}:${this.port}/${this.api}`;
+
+    return QBAIAnswerAssistant.createAnswer(
+      this.textToSend,
+      this.dialogMessages,
+      settings,
+    );
+
+    // const prompt = AIUtils.createAnswerAssistPrompt(this.textToSend);
+    //
+    // //
+    // 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/AIRephraseUseCase.ts

@@ -1,10 +1,8 @@
 // eslint-disable-next-line import/extensions
-import { AISource, IChatMessage } from '../../../Data/source/AISource';
+import { QBAIRephrase } from 'qb-ai-rephrase';
+import { IChatMessage } from '../../../Data/source/AISource';
 import { IUseCase } from '../base/IUseCase';
-import {
-  Tone,
-  toneToString,
-} from '../../../Presentation/components/UI/Dialogs/MessagesView/AIWidgets/Tone';
+import { Tone } from '../../../Presentation/components/UI/Dialogs/MessagesView/AIWidgets/Tone';
 
 export class AIRephraseUseCase implements IUseCase<void, string> {
   private textToSend: string;
@@ -47,41 +45,45 @@ export class AIRephraseUseCase implements IUseCase<void, string> {
   async execute(): Promise<string> {
     console.log('execute AIRephraseUseCase');
 
-    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:"${this.textToSend}"`;
+    const settings = QBAIRephrase.createDefaultAIRephraseSettings();
 
-    if (this.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(
-        this.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:"${
-        this.textToSend
-      }"`;
-    }
-    //
+    settings.apiKey = this.sessionToken;
+    // settings.organization = 'Quickblox';
+    settings.model = this.openAIModel;
+    settings.tone = this.tone;
 
-    // return await AISource.getData(
-    //     prompt,
-    //     // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-    //     context,
-    //     servername,
-    //     api,
-    //     port,
-    //     apiKeyOrSessionToken,
-    // ).then((data) => {
-    //     setTextFromWidgetToContent(data);
-    //
-    //     return data;
-    // });
+    return QBAIRephrase.rephrase(
+      this.textToSend,
+      this.dialogMessages,
+      settings,
+    );
 
-    //
-    return AISource.getData(
-      prompt,
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    /*
+    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,
-      this.servername,
-      this.api,
-      this.port,
-      this.sessionToken,
-      this.openAIModel,
+      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

@@ -1,10 +1,8 @@
 // eslint-disable-next-line import/extensions
-import { AISource, IChatMessage } from '../../../Data/source/AISource';
+import { QBAIRephrase } from 'qb-ai-rephrase';
+import { IChatMessage } from '../../../Data/source/AISource';
 import { IUseCase } from '../base/IUseCase';
-import {
-  Tone,
-  toneToString,
-} from '../../../Presentation/components/UI/Dialogs/MessagesView/AIWidgets/Tone';
+import { Tone } from '../../../Presentation/components/UI/Dialogs/MessagesView/AIWidgets/Tone';
 
 export class AIRephraseWithProxyUseCase implements IUseCase<void, string> {
   private textToSend: string;
@@ -47,25 +45,31 @@ export class AIRephraseWithProxyUseCase implements IUseCase<void, string> {
   async execute(): Promise<string> {
     console.log('execute AIRephraseUseCase');
 
-    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:"${this.textToSend}"`;
+    const settings = QBAIRephrase.createDefaultAIRephraseSettings();
 
-    if (this.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(
-        this.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:"${
-        this.textToSend
-      }"`;
-    }
+    settings.token = this.sessionToken;
+    // settings.organization = 'Quickblox';
+    settings.model = this.openAIModel;
+    settings.tone = this.tone;
+    settings.serverPath = `${this.servername}:${this.port}/${this.api}`;
 
-    return AISource.getDataWithProxyServer(
-      prompt,
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    return QBAIRephrase.rephrase(
+      this.textToSend,
       this.dialogMessages,
-      this.servername,
-      this.api,
-      this.port,
-      this.sessionToken,
-      this.openAIModel,
+      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,
+    // );
   }
 }