quickblox-react-ui-kit 0.2.2 → 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.2",
+  "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/App.tsx

@@ -191,7 +191,9 @@ function App() {
 
   useEffect(() => {
     console.log('0. APP INIT');
-    prepareSDK(currentUser).catch();
+    prepareSDK(currentUser).catch((er) => {
+      console.log(er);
+    });
   }, []);
   //
   // const { proxyConfig } = QBConfig.configAIApi.AIAnswerAssistWidgetConfig;

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/Data/source/remote/Mapper/DialogDTOMapper.ts

@@ -61,6 +61,9 @@ export class DialogDTOMapper implements IDTOMapper {
     dto.lastMessageId = qbDialog.last_message_id || '';
     dto.lastMessageText = qbDialog.last_message as string;
     dto.lastMessageDateSent = qbDialog.last_message_date_sent as string;
+    // dto.lastMessageDateSent = (
+    //   parseInt(qbDialog.last_message_date_sent || '0', 10) * 1000
+    // ).toString();
     dto.lastMessageUserId =
       qbDialog.last_message_user_id === null
         ? ''

package/src/Data/source/remote/Mapper/MessageDTOMapper.ts

@@ -39,7 +39,10 @@ export class MessageDTOMapper implements IDTOMapper {
   }
 
   // eslint-disable-next-line class-methods-use-this
-  public static transformAttachment(qbAtts: ChatMessageAttachment[]) {
+  public static transformAttachment(
+    qbMessage: string,
+    qbAtts: ChatMessageAttachment[],
+  ) {
     const result: ChatMessageAttachmentEntity[] = qbAtts.map((item) => {
       const newItem: ChatMessageAttachmentEntity = {
         id: item.id,
@@ -57,6 +60,25 @@ export class MessageDTOMapper implements IDTOMapper {
           url: item.uid && QB.content.privateUrl(item.uid),
         },
       };
+      const messageParts = MessageDTOMapper.getMessageParts(qbMessage);
+
+      if (messageParts && messageParts.length > 0) {
+        // val messageBody = "${MediaContentEntity::class.java.simpleName}|$fileName|$uid|$fileMimeType"
+        // 0, 1, 2, 3
+        // eslint-disable-next-line prefer-destructuring
+        newItem.uid = messageParts[2];
+        // eslint-disable-next-line prefer-destructuring
+        newItem.name = messageParts[1];
+        // eslint-disable-next-line prefer-destructuring
+        newItem.type = messageParts[3];
+        newItem.url = newItem.uid && QB.content.privateUrl(newItem.uid);
+        if (newItem.file) {
+          newItem.file.uid = newItem.uid;
+          newItem.file.name = newItem.name;
+          newItem.file.url = newItem.uid && QB.content.privateUrl(newItem.uid);
+          newItem.file.type = newItem.type;
+        }
+      }
 
       return newItem;
     });
@@ -74,7 +96,7 @@ export class MessageDTOMapper implements IDTOMapper {
 
     dto.id = qbMessage._id;
     dto.dialogId = qbMessage.chat_dialog_id;
-    dto.message = qbMessage.message;
+    dto.message = MessageDTOMapper.formatMessage(qbMessage.message);
     dto.created_at = qbMessage.created_at;
     dto.date_sent = qbMessage.date_sent * 1000;
     dto.delivered_ids = qbMessage.delivered_ids ? qbMessage.delivered_ids : [];
@@ -82,6 +104,7 @@ export class MessageDTOMapper implements IDTOMapper {
 
     dto.recipient_id = qbMessage.recipient_id ? qbMessage.recipient_id : 0;
     dto.attachments = MessageDTOMapper.transformAttachment(
+      qbMessage.message,
       qbMessage.attachments ? qbMessage.attachments : [],
     );
     dto.read = qbMessage.read;
@@ -98,6 +121,36 @@ export class MessageDTOMapper implements IDTOMapper {
     return Promise.resolve(dto as TResult);
   }
 
+  public static formatMessage(qbMessage: string) {
+    if (
+      qbMessage.includes('MediaContentEntity') ||
+      qbMessage.includes('[Attachment]')
+    ) {
+      const messageParts = qbMessage.split('|');
+
+      // val messageBody = "${MediaContentEntity::class.java.simpleName}|$fileName|$uid|$fileMimeType"
+      // 0, 1, 2, 3
+      return messageParts[1] || '';
+    }
+
+    return qbMessage;
+  }
+
+  private static getMessageParts(qbMessage: string) {
+    if (
+      qbMessage.includes('MediaContentEntity') ||
+      qbMessage.includes('[Attachment]')
+    ) {
+      const messageParts = qbMessage.split('|');
+
+      // val messageBody = "${MediaContentEntity::class.java.simpleName}|$fileName|$uid|$fileMimeType"
+      // 0, 1, 2, 3
+      return messageParts;
+    }
+
+    return [];
+  }
+
   private static validateDTO(messageDTO: RemoteMessageDTO) {
     const messageDTOValidator: DtoValidator<RemoteMessageDTO> = {
       created_at(v: unknown): v is RemoteMessageDTO['created_at'] {

package/src/Data/source/remote/RemoteDataSource.ts

@@ -371,7 +371,7 @@ export class RemoteDataSource implements IRemoteDataSource {
       const resultMessage = new RemoteMessageDTO();
 
       resultMessage.id = message.id;
-      resultMessage.message = message.body;
+      resultMessage.message = MessageDTOMapper.formatMessage(message.body);
       resultMessage.markable = message.markable
         ? message.markable.toString()
         : '0';
@@ -394,6 +394,7 @@ export class RemoteDataSource implements IRemoteDataSource {
 
       // resultMessage.attachments = message.extension.attachments || [];
       resultMessage.attachments = MessageDTOMapper.transformAttachment(
+        message.body,
         message.extension.attachments ? message.extension.attachments : [],
       );
 

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,
+    // );
+  }
+}