quickblox-react-ui-kit 0.2.0 → 0.2.2

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.0",
+  "version": "0.2.2",
   "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,
         );
@@ -193,6 +193,12 @@ function App() {
     console.log('0. APP INIT');
     prepareSDK(currentUser).catch();
   }, []);
+  //
+  // const { proxyConfig } = QBConfig.configAIApi.AIAnswerAssistWidgetConfig;
+  //
+  // const defaultAIAnswer = UseDefaultAIAssistAnswerWidget({
+  //   ...proxyConfig,
+  // });
 
   // todo: uncomment authSecret
   return (
@@ -200,14 +206,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,
@@ -221,7 +220,14 @@ function App() {
             <Route
               path="/desktop-test-mock"
               element={
-                <QuickBloxUIKitDesktopLayout theme={new DefaultTheme()} />
+                <QuickBloxUIKitDesktopLayout
+                  theme={new DefaultTheme()}
+                  // AIAssist={{
+                  //   enabled: true,
+                  //   default: true,
+                  //   AIWidget: defaultAIAnswer,
+                  // }}
+                />
               }
             />
 

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

@@ -0,0 +1,197 @@
+import { ProxyConfig, QBConfig } from '../CommonTypes/FunctionResult';
+
+const supportedLanguagesForIATranslate: string[] = [
+  'English',
+  'Ukrainian',
+  'Spanish',
+  'Portuguese',
+  'French',
+  'German',
+];
+
+const languageBCP47: Record<string, string> = {
+  'ar-SA': 'Arabic',
+  'bn-BD': 'Bangla',
+  'bn-IN': 'Bangla',
+  'cs-CZ': 'Czech',
+  'da-DK': 'Danish',
+  'de-AT': 'German',
+  'de-CH': 'German',
+  'de-DE': 'German',
+  'el-GR': 'Greek',
+  'en-AU': 'English',
+  'en-CA': 'English',
+  'en-GB': 'English',
+  'en-IE': 'English',
+  'en-IN': 'English',
+  'en-NZ': 'English',
+  'en-US': 'English',
+  'en-ZA': 'English',
+  'es-AR': 'Spanish',
+  'es-CL': 'Spanish',
+  'es-CO': 'Spanish',
+  'es-ES': 'Spanish',
+  'es-MX': 'Spanish',
+  'es-US': 'Spanish',
+  'fi-FI': 'Finnish',
+  'fr-BE': 'French',
+  'fr-CA': 'French',
+  'fr-CH': 'French',
+  'fr-FR': 'French',
+  'he-IL': 'Hebrew',
+  'hi-IN': 'Hindi',
+  'hu-HU': 'Hungarian',
+  'id-ID': 'Indonesian',
+  'it-CH': 'Italian',
+  'it-IT': 'Italian',
+  'ja-JP': 'Japanese',
+  'ko-KR': 'Korean',
+  'nl-BE': 'Dutch',
+  'nl-NL': 'Dutch',
+  'no-NO': 'Norwegian',
+  'pl-PL': 'Polish',
+  'pt-BR': 'Portuguese',
+  'pt-PT': 'Portuguese',
+  'ro-RO': 'Romanian',
+  'ru-RU': 'Russian',
+  'sk-SK': 'Slovak',
+  'sv-SE': 'Swedish',
+  'ta-IN': 'Tamil',
+  'ta-LK': 'Tamil',
+  'th-TH': 'Thai',
+  'tr-TR': 'Turkish',
+  'zh-CN': 'Chinese',
+  'zh-HK': 'Chinese',
+  'zh-TW': 'Chinese',
+  'uk-UA': 'Ukrainian',
+};
+
+const getDefaultSystemLanguage = () => {
+  const sysLanguage = navigator.language;
+
+  const language: string = languageBCP47[sysLanguage] || 'English';
+
+  return language;
+};
+
+export class DefaultConfigurations {
+  static getDefaultProxyConfig(): ProxyConfig {
+    return {
+      api: 'v1/chat/completions',
+      servername: 'https://api.openai.com',
+      port: '',
+      sessionToken: '',
+    };
+  }
+
+  static getDefaultLanguageForAITranslate(): string {
+    let languageForAITranslate = 'English';
+    const { defaultLanguage } =
+      DefaultConfigurations.getDefaultQBConfig().configAIApi
+        .AITranslateWidgetConfig;
+
+    if (
+      defaultLanguage.length > 0 &&
+      supportedLanguagesForIATranslate.includes(defaultLanguage)
+    ) {
+      languageForAITranslate = defaultLanguage;
+    } else {
+      const sysLanguage = getDefaultSystemLanguage();
+
+      if (supportedLanguagesForIATranslate.includes(sysLanguage)) {
+        languageForAITranslate = sysLanguage;
+      }
+    }
+
+    return languageForAITranslate;
+  }
+
+  static getAdditionalLanguagesForAITranslate(): string[] {
+    const additionalLanguages: string[] = [];
+    const { languages } =
+      DefaultConfigurations.getDefaultQBConfig().configAIApi
+        .AITranslateWidgetConfig;
+
+    languages.forEach((item) => {
+      if (supportedLanguagesForIATranslate.includes(item)) {
+        additionalLanguages.push(item);
+      } else {
+        additionalLanguages.push('English');
+      }
+    });
+
+    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/Stubs.ts

@@ -145,7 +145,7 @@ export class Stubs {
     for (let i = 0; i < 47; i += 1) {
       const newMessageEntity: MessageEntity =
         Stubs.createMessageEntityWithParams(
-          i,
+          i.toString(),
           '103',
           i % 9 === 0
             ? `${
@@ -171,7 +171,7 @@ export class Stubs {
     for (let i = 47; i < 100; i += 1) {
       const newMessageEntity: MessageEntity =
         Stubs.createMessageEntityWithParams(
-          i,
+          i.toString(),
           '103',
           `${i + 1} test message for dialog 103`,
           '31.03.2023',
@@ -744,7 +744,7 @@ export class Stubs {
   }
 
   static createMessageEntityWithParams(
-    id: number,
+    id: string,
     dialogId: string,
     message: string,
     created_at: string,
@@ -876,7 +876,7 @@ export class Stubs {
     const messages: Array<MessageEntity> = new Array<MessageEntity>();
     // shot text message
     const message102_1 = Stubs.createMessageEntityWithParams(
-      1021,
+      '1021',
       '102',
       '1 test message for dialog 102',
       '31.03.2023',
@@ -890,7 +890,7 @@ export class Stubs {
     );
     // long text message
     const message102_2 = Stubs.createMessageEntityWithParams(
-      1022,
+      '1022',
       '102',
       '2 test message for dialog 102',
       '31.03.2023',
@@ -917,7 +917,7 @@ export class Stubs {
     };
     const photoAttachments: ChatMessageAttachmentEntity[] = [photo];
     const message102_3 = Stubs.createMessageEntityWithParams(
-      1023,
+      '1023',
       '102',
       '3 test message for dialog 102',
       '31.03.2023',
@@ -945,7 +945,7 @@ export class Stubs {
     };
     const videoAttachments: ChatMessageAttachmentEntity[] = [video];
     const message102_4 = Stubs.createMessageEntityWithParams(
-      1024,
+      '1024',
       '102',
       '3 test message for dialog 102',
       '31.03.2023',
@@ -973,7 +973,7 @@ export class Stubs {
     };
     const audioAttachments: ChatMessageAttachmentEntity[] = [audio];
     const message102_5 = Stubs.createMessageEntityWithParams(
-      1025,
+      '1025',
       '102',
       '3 test message for dialog 102',
       '31.03.2023',
@@ -1001,7 +1001,7 @@ export class Stubs {
     };
     const textAttachments: ChatMessageAttachmentEntity[] = [text];
     const message102_6 = Stubs.createMessageEntityWithParams(
-      1026,
+      '1026',
       '102',
       '3 test message for dialog 102',
       '31.03.2023',
@@ -1023,7 +1023,7 @@ export class Stubs {
     messages.push(message102_6); // text
 
     const message112_1 = Stubs.createMessageEntityWithParams(
-      1121,
+      '1121',
       '112',
       '1 test message for dialog 112',
       '31.03.2023',
@@ -1037,7 +1037,7 @@ export class Stubs {
     );
 
     const message112_2 = Stubs.createMessageEntityWithParams(
-      1122,
+      '1122',
       '112',
       '2 test message for dialog 112',
       '31.03.2023',
@@ -1051,7 +1051,7 @@ export class Stubs {
     );
 
     const message112_3 = Stubs.createMessageEntityWithParams(
-      1123,
+      '1123',
       '112',
       '3 test message for dialog 112',
       '31.03.2023',
@@ -1069,7 +1069,7 @@ export class Stubs {
     messages.push(message112_3);
 
     const message113_1 = Stubs.createMessageEntityWithParams(
-      1131,
+      '1131',
       '113',
       '1 test message for dialog 113',
       '31.03.2023',
@@ -1083,7 +1083,7 @@ export class Stubs {
     );
 
     const message113_2 = Stubs.createMessageEntityWithParams(
-      1132,
+      '1132',
       '113',
       '2 test message for dialog 113',
       '31.03.2023',
@@ -1097,7 +1097,7 @@ export class Stubs {
     );
 
     const message113_3 = Stubs.createMessageEntityWithParams(
-      1133,
+      '1133',
       '113',
       '3 test message for dialog 113',
       '31.03.2023',

package/src/Data/mapper/MessageLocalDTOMapper.ts

@@ -67,7 +67,8 @@ export class MessageLocalDTOMapper implements IMapper {
     const messageEntity: MessageEntity =
       MessageLocalDTOMapper.createDefaultMessageEntity();
 
-    messageEntity.id = parseInt(messageDTO.id, 10);
+    // messageEntity.id = parseInt(messageDTO.id, 10);
+    messageEntity.id = messageDTO.id;
     messageEntity.dialogId = messageDTO.dialogId;
     messageEntity.created_at = messageDTO.created_at;
     messageEntity.date_sent = messageDTO.date_sent;
@@ -409,7 +410,7 @@ export class MessageLocalDTOMapper implements IMapper {
 
   private static createDefaultMessageEntity() {
     return {
-      id: 0,
+      id: '',
       dialogId: '',
       created_at: '',
       date_sent: 0,

package/src/Data/mapper/MessageRemoteDTOMapper.ts

@@ -74,7 +74,8 @@ export class MessageRemoteDTOMapper implements IMapper {
     const messageEntity: MessageEntity =
       MessageRemoteDTOMapper.createDefaultMessageEntity();
 
-    messageEntity.id = parseInt(messageDTO.id, 10);
+    // messageEntity.id = parseInt(messageDTO.id, 10);
+    messageEntity.id = messageDTO.id;
     messageEntity.dialogId = messageDTO.dialogId;
     messageEntity.created_at = messageDTO.created_at;
     messageEntity.date_sent = messageDTO.date_sent;
@@ -419,7 +420,7 @@ export class MessageRemoteDTOMapper implements IMapper {
       date_sent: 0,
       delivered_ids: new Array<number>(),
       dialogId: '',
-      id: 0,
+      id: '',
       message: '',
       read: 0,
       read_ids: new Array<number>(),