quickblox-react-ui-kit 0.2.1 → 0.2.3

package/global.d.ts

@@ -17,14 +17,56 @@ interface DateRange {
   to: Date;
 }
 
+type ProxyConfig = {
+  api: string;
+  servername: string;
+  port: string;
+  sessionToken: string;
+};
+interface WidgetConfig {
+  apiKey: string;
+  useDefault: boolean;
+  proxyConfig: ProxyConfig;
+}
+
+interface AITranslateWidgetConfig extends WidgetConfig{
+  defaultLanguage: string; languages: string[];
+}
+
+interface AIRephraseWidgetConfig extends WidgetConfig {
+  defaultTone: string
+}
+
 interface QBConfig {
-  debug: boolean;
-  endpoints: {
-    chat?: string;
-    api?: string;
+  credentials: {
+    appId: number;
+    accountKey: string;
+    authKey: string;
+    authSecret: string;
+    sessionToken: string;
+  };
+  configAIApi: {
+    AIAnswerAssistWidgetConfig: WidgetConfig;
+    AITranslateWidgetConfig: AITranslateWidgetConfig;
+    AIRephraseWidgetConfig: AIRephraseWidgetConfig;
   };
-  webrtc?: {
-    iceServers?: RTCIceServer[];
+  appConfig: {
+    maxFileSize: number;
+    sessionTimeOut: number;
+    chatProtocol: {
+      active: number;
+    };
+    debug: boolean;
+    endpoints: {
+      api: string;
+      chat: string;
+    };
+    // on: {
+    //   sessionExpired: (handleResponse: any, retry: any) => Promise<void>;
+    // };
+    streamManagement: {
+      enable: boolean;
+    };
   };
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quickblox-react-ui-kit",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "main": "dist/index-ui.js",
   "license": "MIT",
   "dependencies": {

package/src/App.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
 import './App.scss';
 import { Route, Routes, useNavigate } from 'react-router-dom';
-import { QBConfig } from './QBconfig';
 import useQBConnection from './Presentation/components/providers/QuickBloxUIKitProvider/useQBConnection';
 import { LocalDataSource } from './Data/source/local/LocalDataSource';
 import Login from './Presentation/components/layouts/TestStage/LoginView/Login';
@@ -15,6 +14,7 @@ import {
 import QuickBloxUIKitDesktopLayout from './Presentation/components/layouts/Desktop/QuickBloxUIKitDesktopLayout';
 import DefaultTheme from './Presentation/assets/DefaultThemes/DefaultTheme';
 import useQbUIKitDataContext from './Presentation/components/providers/QuickBloxUIKitProvider/useQbUIKitDataContext';
+import { QBConfig } from './QBconfig';
 
 function App() {
   // const currentContext = React.useContext(qbDataContext);
@@ -28,8 +28,8 @@ function App() {
   const { connectionRepository } = useQBConnection();
 
   const initLoginData: LoginData = {
-    login: '',
-    password: '',
+    login: 'artimed', // vit1
+    password: 'quickblox',
   };
 
   const [currentUser, setCurrentUser] = React.useState(initLoginData);
@@ -70,7 +70,7 @@ function App() {
           authKeyOrAppId: currentContext.InitParams.accountData.authKey,
           authSecret: currentContext.InitParams.accountData.authSecret,
           accountKey: currentContext.InitParams.accountData.accountKey,
-          config: QBConfig.appConfig,
+          config: QBConfig,
         },
         authData,
       );
@@ -175,7 +175,7 @@ function App() {
             authKeyOrAppId: currentContext.InitParams.accountData.authKey,
             authSecret: currentContext.InitParams.accountData.authSecret,
             accountKey: currentContext.InitParams.accountData.accountKey,
-            config: QBConfig.appConfig,
+            config: QBConfig,
           },
           data,
         );
@@ -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;
@@ -206,14 +208,7 @@ function App() {
       maxFileSize={QBConfig.appConfig.maxFileSize}
       // SDK={QB} //init SDK
       accountData={{ ...QBConfig.credentials, sessionToken: '' }}
-      // qbConfig={{
-      //   debug: true,
-      //   endpoints: {
-      //     api: 'apilpsgdev.quickblox.com',
-      //     chat: 'chatlpsgdev.quickblox.com',
-      //   },
-      //   webrtc: {},
-      // }}
+      qbConfig={{ ...QBConfig }}
       loginData={{
         login: currentUser.login,
         password: currentUser.password,

package/src/CommonTypes/FunctionResult.ts

@@ -2,3 +2,57 @@ export type FunctionResult<T> = {
   result: T | T[] | boolean;
   error: any;
 };
+
+export type ProxyConfig = {
+  api: string;
+  servername: string;
+  port: string;
+  sessionToken: string;
+};
+export interface WidgetConfig {
+  apiKey: string;
+  useDefault: boolean;
+  proxyConfig: ProxyConfig;
+}
+
+export interface AITranslateWidgetConfig extends WidgetConfig {
+  defaultLanguage: string;
+  languages: string[];
+}
+
+export interface AIRephraseWidgetConfig extends WidgetConfig {
+  defaultTone: string;
+}
+
+export interface QBConfig {
+  credentials: {
+    appId: number;
+    accountKey: string;
+    authKey: string;
+    authSecret: string;
+    sessionToken: string;
+  };
+  configAIApi: {
+    AIAnswerAssistWidgetConfig: WidgetConfig;
+    AITranslateWidgetConfig: AITranslateWidgetConfig;
+    AIRephraseWidgetConfig: AIRephraseWidgetConfig;
+  };
+  appConfig: {
+    maxFileSize: number;
+    sessionTimeOut: number;
+    chatProtocol: {
+      active: number;
+    };
+    debug: boolean;
+    endpoints: {
+      api: string;
+      chat: string;
+    };
+    // on: {
+    //   sessionExpired: (handleResponse: any, retry: any) => Promise<void>;
+    // };
+    streamManagement: {
+      enable: boolean;
+    };
+  };
+}

package/src/Data/DefaultConfigurations.ts

@@ -1,4 +1,4 @@
-import { QBConfig } from '../QBconfig';
+import { ProxyConfig, QBConfig } from '../CommonTypes/FunctionResult';
 
 const supportedLanguagesForIATranslate: string[] = [
   'English',
@@ -74,13 +74,6 @@ const getDefaultSystemLanguage = () => {
   return language;
 };
 
-export type ProxyConfig = {
-  api: string;
-  servername: string;
-  port: string;
-  sessionToken: string;
-};
-
 export class DefaultConfigurations {
   static getDefaultProxyConfig(): ProxyConfig {
     return {
@@ -93,7 +86,9 @@ export class DefaultConfigurations {
 
   static getDefaultLanguageForAITranslate(): string {
     let languageForAITranslate = 'English';
-    const { defaultLanguage } = QBConfig.configAIApi.AITranslateWidgetConfig;
+    const { defaultLanguage } =
+      DefaultConfigurations.getDefaultQBConfig().configAIApi
+        .AITranslateWidgetConfig;
 
     if (
       defaultLanguage.length > 0 &&
@@ -113,7 +108,9 @@ export class DefaultConfigurations {
 
   static getAdditionalLanguagesForAITranslate(): string[] {
     const additionalLanguages: string[] = [];
-    const { languages } = QBConfig.configAIApi.AITranslateWidgetConfig;
+    const { languages } =
+      DefaultConfigurations.getDefaultQBConfig().configAIApi
+        .AITranslateWidgetConfig;
 
     languages.forEach((item) => {
       if (supportedLanguagesForIATranslate.includes(item)) {
@@ -125,4 +122,76 @@ export class DefaultConfigurations {
 
     return additionalLanguages;
   }
+
+  //
+  static getDefaultQBConfig(): QBConfig {
+    return {
+      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/AISource.ts

@@ -45,7 +45,7 @@ export class AISource {
 
       return outputMessage;
     } catch (err) {
-      const outputMessage = stringifyError(err);
+      const outputMessage: string = stringifyError(err);
 
       throw new RepositoryException(outputMessage, -1);
     }
@@ -85,7 +85,7 @@ export class AISource {
 
       return outputMessage;
     } catch (err) {
-      const outputMessage = stringifyError(err);
+      const outputMessage: string = stringifyError(err);
 
       throw new RepositoryException(outputMessage, -1);
     }
@@ -125,7 +125,7 @@ export class AISource {
 
       return outputMessage;
     } catch (err) {
-      const outputMessage = stringifyError(err);
+      const outputMessage: string = stringifyError(err);
 
       throw new RepositoryException(outputMessage, -1);
     }

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,
@@ -47,16 +50,35 @@ export class MessageDTOMapper implements IDTOMapper {
         size: item.size,
         type: item.type,
         uid: item.uid,
-        url: item.id.toString() && QB.content.privateUrl(item.id.toString()),
+        url: item.uid && QB.content.privateUrl(item.uid),
         file: {
           id: item.id,
           name: item.name,
           size: item.size,
           type: item.type,
           uid: item.uid || '',
-          url: item.id.toString() && QB.content.privateUrl(item.id.toString()),
+          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/AIRephraseUseCase.ts

@@ -0,0 +1,87 @@
+// eslint-disable-next-line import/extensions
+import { AISource, IChatMessage } from '../../../Data/source/AISource';
+import { IUseCase } from '../base/IUseCase';
+import {
+  Tone,
+  toneToString,
+} 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');
+
+    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}"`;
+
+    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
+      }"`;
+    }
+    //
+
+    // 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 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,71 @@
+// eslint-disable-next-line import/extensions
+import { AISource, IChatMessage } from '../../../Data/source/AISource';
+import { IUseCase } from '../base/IUseCase';
+import {
+  Tone,
+  toneToString,
+} 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');
+
+    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}"`;
+
+    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
+      }"`;
+    }
+
+    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/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;

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

@@ -4,6 +4,17 @@ import {
   FunctionTypeStringWithContextToString,
 } from '../../../../../Views/Base/BaseViewModel';
 
+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;
 }