quickblox-react-ui-kit 0.2.0 → 0.2.1

package/package.json

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

package/src/App.tsx

@@ -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 (
@@ -221,7 +227,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/Data/DefaultConfigurations.ts

@@ -0,0 +1,128 @@
+import { QBConfig } from '../QBconfig';
+
+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 type ProxyConfig = {
+  api: string;
+  servername: string;
+  port: string;
+  sessionToken: string;
+};
+
+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 } = QBConfig.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 } = QBConfig.configAIApi.AITranslateWidgetConfig;
+
+    languages.forEach((item) => {
+      if (supportedLanguagesForIATranslate.includes(item)) {
+        additionalLanguages.push(item);
+      } else {
+        additionalLanguages.push('English');
+      }
+    });
+
+    return additionalLanguages;
+  }
+}

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>(),

package/src/Data/source/AISource.ts

@@ -0,0 +1,133 @@
+import { stringifyError } from '../../utils/parse';
+import RepositoryException from './exception/RepositoryException';
+
+export interface IChatMessage {
+  role: string;
+  content: string;
+}
+export type AIParam = {
+  textToAI: string;
+  context: IChatMessage[];
+};
+
+export class AISource {
+  static async getData(
+    prompt: string,
+    dialogMessages: IChatMessage[],
+    servername: string,
+    api: string,
+    port: string,
+    sessionToken: string,
+    openAIModel = 'gpt-3.5-turbo',
+  ): Promise<string> {
+    const apiEndpoint = `${servername}/${api}`;
+    const apiKey = sessionToken;
+    const model = openAIModel; // 'gpt-3.5-turbo';
+
+    const requestOptions = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${apiKey}`,
+      },
+      body: JSON.stringify({
+        messages: [...dialogMessages, { role: 'user', content: prompt }],
+        model,
+        temperature: 0.5,
+      }),
+    };
+
+    try {
+      const response = await fetch(apiEndpoint, requestOptions);
+      const data = await response.json();
+
+      const outputMessage = data.choices[0].message?.content || '';
+
+      return outputMessage;
+    } catch (err) {
+      const outputMessage = stringifyError(err);
+
+      throw new RepositoryException(outputMessage, -1);
+    }
+  }
+
+  static async getDataWithOpenAI(
+    prompt: string,
+    dialogMessages: IChatMessage[],
+    servername: string,
+    api: string,
+    port: string,
+    sessionToken: string,
+    openAIModel = 'gpt-3.5-turbo',
+  ): Promise<string> {
+    const apiEndpoint = `${servername}/${api}`;
+    const apiKey = sessionToken;
+    const model = openAIModel; // 'gpt-3.5-turbo';
+
+    const requestOptions = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${apiKey}`,
+      },
+      body: JSON.stringify({
+        messages: [...dialogMessages, { role: 'user', content: prompt }],
+        model,
+        temperature: 0.5,
+      }),
+    };
+
+    try {
+      const response = await fetch(apiEndpoint, requestOptions);
+      const data = await response.json();
+
+      const outputMessage = data.choices[0].message?.content || '';
+
+      return outputMessage;
+    } catch (err) {
+      const outputMessage = stringifyError(err);
+
+      throw new RepositoryException(outputMessage, -1);
+    }
+  }
+
+  static async getDataWithProxyServer(
+    prompt: string,
+    dialogMessages: IChatMessage[],
+    servername: string,
+    api: string,
+    port: string,
+    sessionToken: string,
+    openAIModel = 'gpt-3.5-turbo',
+  ): Promise<string> {
+    const apiEndpoint = `${servername}:${port}/${api}`;
+    const apiKey = sessionToken;
+    const model = openAIModel; // 'gpt-3.5-turbo';
+
+    const requestOptions = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'qb-token': apiKey,
+      },
+      body: JSON.stringify({
+        messages: [...dialogMessages, { role: 'user', content: prompt }],
+        model,
+        temperature: 0.5,
+      }),
+    };
+
+    try {
+      const response = await fetch(apiEndpoint, requestOptions);
+      const data = await response.json();
+
+      const outputMessage = data.choices[0].message?.content || '';
+
+      return outputMessage;
+    } catch (err) {
+      const outputMessage = stringifyError(err);
+
+      throw new RepositoryException(outputMessage, -1);
+    }
+  }
+}

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

@@ -76,7 +76,7 @@ export class MessageDTOMapper implements IDTOMapper {
     dto.dialogId = qbMessage.chat_dialog_id;
     dto.message = qbMessage.message;
     dto.created_at = qbMessage.created_at;
-    dto.date_sent = qbMessage.date_sent;
+    dto.date_sent = qbMessage.date_sent * 1000;
     dto.delivered_ids = qbMessage.delivered_ids ? qbMessage.delivered_ids : [];
     dto.read_ids = qbMessage.read_ids ? qbMessage.read_ids : [];
 

package/src/Domain/entity/MessageEntity.ts

@@ -3,7 +3,7 @@ import { UserEntity } from './UserEntity';
 import { DialogType } from './DialogTypes';
 
 export interface MessageEntity {
-  id: number;
+  id: string;
   dialogId: string;
   dialogType?: DialogType;
   // TODO: check ChatMessageAttachmentEntity

package/src/Presentation/Views/Base/BaseViewModel.ts

@@ -2,6 +2,7 @@ import { Pagination } from '../../../Domain/repository/Pagination';
 import { GroupDialogEntity } from '../../../Domain/entity/GroupDialogEntity';
 import { DialogEntity } from '../../../Domain/entity/DialogEntity';
 import { FileEntity } from '../../../Domain/entity/FileEntity';
+import { IChatMessage } from '../../../Data/source/AISource';
 
 export default class BaseViewModel<TResult> {
   get entity(): TResult {
@@ -49,10 +50,7 @@ export type EditDialogParams = {
   dialogTitle: string;
   dialogAvatar: File | string | null;
 };
-export interface IChatMessage {
-  role: string;
-  content: string;
-}
+
 export type FunctionTypeFileToToVoid = (file: File) => void;
 export type FunctionTypePaginationToVoid = (pagination: Pagination) => void;
 export type FunctionTypeVoidToVoid = () => void;
@@ -76,8 +74,15 @@ export type FunctionTypeJSXElement = () => JSX.Element;
 export type FunctionTypeFileWithContextToToVoid = (
   file: File,
   context: IChatMessage[],
+  additionalSettings?: { [key: string]: any },
 ) => void;
 export type FunctionTypeStringWithContextToVoid = (
   value: string,
   context: IChatMessage[],
+  additionalSettings?: { [key: string]: any },
 ) => void;
+export type FunctionTypeStringWithContextToString = (
+  value: string,
+  context: IChatMessage[],
+  additionalSettings?: { [key: string]: any },
+) => Promise<string>;

package/src/Presentation/Views/Dialogs/Dialogs.tsx

@@ -266,9 +266,9 @@ const DialogsComponent: React.FC<DialogsProps> = ({
   };
 
   const loaderTheme: IconTheme = {
-    color: 'var(--divider)',
-    width: '42',
-    height: '42',
+    color: 'var(--color-background-info)',
+    width: '44',
+    height: '44',
   };
 
   const renderSearchDialogs = () => {
@@ -315,26 +315,42 @@ const DialogsComponent: React.FC<DialogsProps> = ({
         {useUpContent && upHeaderContent}
         {useHeader && HeaderContent}
         {useSubContent && subHeaderContent}
-        {dialogsViewModel?.loading && (
-          // <div style={{ maxHeight: '44px', minHeight: '44px', height: '44px' }}>
-          //   <LoaderComponent width="44" height="44" color="var(--divider)" />
-          // </div>
-          <LoaderComponent
-            width={loaderTheme.width}
-            height={loaderTheme.height}
-            color={loaderTheme.color}
-          />
-        )}
-        {dialogsViewModel?.error && (
-          <ErrorComponent
-            title="Something is wrong."
-            ClickActionHandler={() => {
-              alert('call click retry');
-            }}
-          />
-        )}
         {/* <div className="scroll-box"> */}
         <div className="scroll-box">
+          {dialogsViewModel?.loading && (
+            // <div style={{ maxHeight: '44px', minHeight: '44px', height: '44px' }}>
+            //   <LoaderComponent width="44" height="44" color="var(--divider)" />
+            // </div>
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <div
+                style={{
+                  height: '44px',
+                  width: '44px',
+                }}
+              >
+                <LoaderComponent
+                  width={loaderTheme.width}
+                  height={loaderTheme.height}
+                  color={loaderTheme.color}
+                />
+              </div>
+            </div>
+          )}
+          {dialogsViewModel?.error && (
+            <ErrorComponent
+              title="Something is wrong."
+              ClickActionHandler={() => {
+                alert('call click retry');
+              }}
+            />
+          )}
           {showSearchDialogs ? renderSearchDialogs() : null}
           {nameDialogForSearch.length > 0 &&
             dialogsToView

package/src/Presentation/components/UI/Dialogs/HeaderDialogs/HeaderDialogs.scss

@@ -10,8 +10,8 @@ $header-container-title-font-size: 20px;
 $header-container-title-line-height: 24px;
 $header-container-title-width: 180px;
 $header-container-buttons-gap-width: 29px;
-$header-container-svg-icon-width: 32px;
-$header-container-svg-icon-height: 32px;
+$header-container-svg-icon-width: 24px;
+$header-container-svg-icon-height: 24px;
 $header-container-color-icon: var(--color-icon);
 
 .header-dialogs-container{

package/src/Presentation/components/UI/Dialogs/HeaderDialogs/HeaderDialogs.tsx

@@ -54,9 +54,9 @@ const HeaderDialogs: React.FC<HeaderDialogsProps> = ({
   const buttonsStyle = {
     background: 'none',
     svg: {
-      width: '44',
-      height: '44',
-      viewBox: '0 0 44 44',
+      width: '24',
+      height: '24',
+      viewBox: '0 0 24 24',
       path: {
         fill: theme?.mainElements(),
       },
@@ -83,7 +83,7 @@ const HeaderDialogs: React.FC<HeaderDialogsProps> = ({
       </div>
       <div style={buttonsStyle} className="header-dialogs-container__buttons">
         <ActiveSvg
-          content={<Search />}
+          content={<Search width="24" height="24" applyZoom />}
           touchAction={() => {
             console.log('touchSearchDialogsHandler');
             if (touchSearchHandler) touchSearchHandler();
@@ -94,7 +94,7 @@ const HeaderDialogs: React.FC<HeaderDialogsProps> = ({
           }}
         />
         <ActiveSvg
-          content={<NewChat />}
+          content={<NewChat width="24" height="24" applyZoom />}
           touchAction={() => {
             console.log('touchAction: Hello from component 1');
             if (TouchActionHandler) TouchActionHandler();

package/src/Presentation/components/UI/Dialogs/MessagesView/AIWidgets/{AIWidget.ts → AIMessageWidget.ts}

@@ -1,13 +1,24 @@
 import {
   FunctionTypeFileWithContextToToVoid,
   FunctionTypeJSXElement,
-  FunctionTypeStringWithContextToVoid,
+  FunctionTypeStringWithContextToString,
 } from '../../../../../Views/Base/BaseViewModel';
 
 export interface AIWidget {
   renderWidget: FunctionTypeJSXElement;
-  textToWidget: FunctionTypeStringWithContextToVoid;
-  fileToWidget: FunctionTypeFileWithContextToToVoid;
+}
+export interface AITextWidget extends AIWidget {
   textToContent: string | undefined;
+}
+
+export interface AIFileWidget extends AIWidget {
   fileToContent: File | undefined;
 }
+
+export interface AIMessageWidget extends AITextWidget {
+  textToWidget: FunctionTypeStringWithContextToString;
+}
+
+export interface AIAttachmentWidget extends AIFileWidget {
+  fileToWidget: FunctionTypeFileWithContextToToVoid;
+}