quickblox-react-ui-kit 0.2.2 → 0.2.4

package/src/Presentation/components/layouts/Desktop/QuickBloxUIKitDesktopLayout.tsx

@@ -15,6 +15,9 @@ import UseDefaultAIAssistAnswerWidget from '../../UI/Dialogs/MessagesView/AIWidg
 import UseDefaultAITranslateWidget from '../../UI/Dialogs/MessagesView/AIWidgets/UseDefaultAITranslateWidget';
 import UseDefaultAIRephraseMessageWidget from '../../UI/Dialogs/MessagesView/AIWidgets/UseDefaultAIRephraseMessageWidget';
 import { DefaultConfigurations } from '../../../../Data/DefaultConfigurations';
+import UseDefaultAIAssistAnswerWidgetWithProxy from '../../UI/Dialogs/MessagesView/AIWidgets/UseDefaultAIAssistAnswerWidgetWithProxy';
+import UseDefaultAITranslateWidgetWithProxy from '../../UI/Dialogs/MessagesView/AIWidgets/UseDefaultAITranslateWidgetWithProxy';
+import UseDefaultAIRephraseMessageWidgetWithProxy from '../../UI/Dialogs/MessagesView/AIWidgets/UseDefaultAIRephraseMessageWidgetWithProxy';
 
 type AIWidgetPlaceHolder = {
   enabled: boolean;
@@ -80,25 +83,24 @@ const QuickBloxUIKitDesktopLayout: React.FC<
       } else {
         const { apiKey } = QBConfig.configAIApi.AIAnswerAssistWidgetConfig;
         let token = '';
+        const proxyConfig: ProxyConfig =
+          QBConfig.configAIApi.AIAnswerAssistWidgetConfig.proxyConfig ||
+          DefaultConfigurations.getDefaultProxyConfig();
 
         if (apiKey) {
           token = apiKey;
+          defaultAIAnswerToMessageWidget = UseDefaultAIAssistAnswerWidget({
+            ...proxyConfig,
+            apiKeyOrSessionToken: token,
+          });
         } else {
-          token =
-            QBConfig.configAIApi.AIAnswerAssistWidgetConfig.proxyConfig
-              .sessionToken ||
-            sessionToken ||
-            '';
+          token = sessionToken || '';
+          defaultAIAnswerToMessageWidget =
+            UseDefaultAIAssistAnswerWidgetWithProxy({
+              ...proxyConfig,
+              apiKeyOrSessionToken: token,
+            });
         }
-        const proxyConfig: ProxyConfig =
-          QBConfig.configAIApi.AIAnswerAssistWidgetConfig.proxyConfig ||
-          DefaultConfigurations.getDefaultProxyConfig();
-
-        defaultAIAnswerToMessageWidget = UseDefaultAIAssistAnswerWidget({
-          ...proxyConfig,
-          sessionToken: token,
-          apiKey,
-        });
       }
     }
   };
@@ -117,25 +119,23 @@ const QuickBloxUIKitDesktopLayout: React.FC<
       } else {
         const { apiKey } = QBConfig.configAIApi.AITranslateWidgetConfig;
         let token = '';
+        const proxyConfig: ProxyConfig =
+          QBConfig.configAIApi.AITranslateWidgetConfig.proxyConfig ||
+          DefaultConfigurations.getDefaultProxyConfig();
 
         if (apiKey) {
           token = apiKey;
+          defaultAITranslateWidget = UseDefaultAITranslateWidget({
+            ...proxyConfig,
+            apiKeyOrSessionToken: token,
+          });
         } else {
-          token =
-            QBConfig.configAIApi.AITranslateWidgetConfig.proxyConfig
-              .sessionToken ||
-            sessionToken ||
-            '';
+          token = sessionToken || '';
+          defaultAITranslateWidget = UseDefaultAITranslateWidgetWithProxy({
+            ...proxyConfig,
+            apiKeyOrSessionToken: token,
+          });
         }
-        const proxyConfig: ProxyConfig =
-          QBConfig.configAIApi.AITranslateWidgetConfig.proxyConfig ||
-          DefaultConfigurations.getDefaultProxyConfig();
-
-        defaultAITranslateWidget = UseDefaultAITranslateWidget({
-          ...proxyConfig,
-          sessionToken: token,
-          apiKey,
-        });
       }
     }
   };
@@ -154,25 +154,24 @@ const QuickBloxUIKitDesktopLayout: React.FC<
       } else {
         const { apiKey } = QBConfig.configAIApi.AIRephraseWidgetConfig;
         let token = '';
+        const proxyConfig: ProxyConfig =
+          QBConfig.configAIApi.AIRephraseWidgetConfig.proxyConfig ||
+          DefaultConfigurations.getDefaultProxyConfig();
 
         if (apiKey) {
           token = apiKey;
+          defaultAIEditMessageWidget = UseDefaultAIRephraseMessageWidget({
+            ...proxyConfig,
+            apiKeyOrSessionToken: token,
+          });
         } else {
-          token =
-            QBConfig.configAIApi.AIRephraseWidgetConfig.proxyConfig
-              .sessionToken ||
-            sessionToken ||
-            '';
+          token = sessionToken || '';
+          defaultAIEditMessageWidget =
+            UseDefaultAIRephraseMessageWidgetWithProxy({
+              ...proxyConfig,
+              apiKeyOrSessionToken: token,
+            });
         }
-        const proxyConfig: ProxyConfig =
-          QBConfig.configAIApi.AIRephraseWidgetConfig.proxyConfig ||
-          DefaultConfigurations.getDefaultProxyConfig();
-
-        defaultAIEditMessageWidget = UseDefaultAIRephraseMessageWidget({
-          ...proxyConfig,
-          sessionToken: token,
-          apiKey,
-        });
       }
     }
   };

package/src/Presentation/components/providers/QuickBloxUIKitProvider/QuickBloxUIKitProvider.tsx

@@ -291,7 +291,7 @@ function QuickBloxUIKitProvider({
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   // storage.SYNC_DIALOGS_USE_CASE.execute(() => {});
 
-  // todo: MUST use sessionToken or login/pass to re-init
+  // todo: MUST use apiKeyOrSessionToken or login/pass to re-init
   // const remoteDataSourceMock: RemoteDataSource =
   //   storage.REMOTE_DATA_SOURCE as RemoteDataSource;
   // // remoteDataSourceMock

package/src/Presentation/components/providers/QuickBloxUIKitProvider/useQbInitializedDataContext.ts

@@ -4,23 +4,24 @@ import { qbDataContext, QBDataContextType } from './QuickBloxUIKitProvider';
 const useQbInitializedDataContext = (): QBDataContextType => {
   const currentQbDataContext = React.useContext(qbDataContext);
 
-  console.log(
-    `call useQbDataContext with init param: ${JSON.stringify(
-      currentQbDataContext.InitParams,
-      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-    )}`,
-  );
+  // console.log(
+  //   `call useQbDataContext with init param: ${JSON.stringify(
+  //     currentQbDataContext.InitParams,
+  //     // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+  //   )}`,
+  // );
   // todo: throw exception if we have not enough data to start session or login
-  let QuickBloxVersion = '';
+  // let QuickBloxVersion = '';
 
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   if (!window.QB) {
     throw new Error('HAVE NO SDK');
-  } else {
-    QuickBloxVersion = `Have SDK lib: version ${QB.version} build ${QB.buildNumber}`;
-    console.log(QuickBloxVersion);
   }
+  // else {
+  //   QuickBloxVersion = `Have SDK lib: version ${QB.version} build ${QB.buildNumber}`;
+  //   console.log(QuickBloxVersion);
+  // }
   if (!currentQbDataContext) {
     throw new Error('HAVE NO DATA CONTEXT');
   }
@@ -29,10 +30,10 @@ const useQbInitializedDataContext = (): QBDataContextType => {
   }
   // проверять был ли обработан логин
   // если сведения для логина - ник, пароль или токен сессии
-  console.log(
-    'data context: update init param: ',
-    JSON.stringify(currentQbDataContext.InitParams),
-  );
+  // console.log(
+  //   'data context: update init param: ',
+  //   JSON.stringify(currentQbDataContext.InitParams),
+  // );
   if (
     currentQbDataContext.InitParams.accountData.appId &&
     currentQbDataContext.InitParams.accountData.accountKey &&

package/src/QBconfig.ts

@@ -8,19 +8,24 @@ export const QBConfig = {
   },
   configAIApi: {
     AIAnswerAssistWidgetConfig: {
+      organizationName: 'Quickblox',
+      openAIModel: 'gpt-3.5-turbo',
       apiKey: '',
+      maxTokens: 3584,
       useDefault: true,
       proxyConfig: {
         api: 'v1/chat/completions',
-        servername: 'http://localhost',
-        port: '3011',
-        sessionToken: '',
+        servername: 'https://api.openai.com/',
+        port: '',
       },
     },
     AITranslateWidgetConfig: {
+      organizationName: 'Quickblox',
+      openAIModel: 'gpt-3.5-turbo',
       apiKey: '',
+      maxTokens: 3584,
       useDefault: true,
-      defaultLanguage: 'English',
+      defaultLanguage: '',
       languages: [
         'English',
         'Spanish',
@@ -31,20 +36,88 @@ export const QBConfig = {
       ],
       proxyConfig: {
         api: 'v1/chat/completions',
-        servername: 'http://localhost',
-        port: '3011',
-        sessionToken: '',
+        servername: 'https://api.openai.com/',
+        port: '',
       },
+      // 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: 'http://localhost',
-        port: '3011',
-        sessionToken: '',
+        servername: 'https://api.openai.com/',
+        port: '',
       },
     },
   },
@@ -72,4 +145,77 @@ export const QBConfig = {
       enable: true,
     },
   },
+  // credentials: {
+  //   appId: -1,
+  //   accountKey: '',
+  //   authKey: '',
+  //   authSecret: '',
+  //   sessionToken: '',
+  // },
+  // configAIApi: {
+  //   AIAnswerAssistWidgetConfig: {
+  //     apiKey: '',
+  //     useDefault: true,
+  //     proxyConfig: {
+  //       api: 'v1/chat/completions',
+  //       servername: 'http://localhost',
+  //       port: '3011',
+  //       sessionToken: '',
+  //     },
+  //   },
+  //   AITranslateWidgetConfig: {
+  //     apiKey: '',
+  //     useDefault: true,
+  //     defaultLanguage: 'English',
+  //     languages: [
+  //       'English',
+  //       'Spanish',
+  //       'French',
+  //       'Portuguese',
+  //       'German',
+  //       'Ukrainian',
+  //     ],
+  //     proxyConfig: {
+  //       api: 'v1/chat/completions',
+  //       servername: 'http://localhost',
+  //       port: '3011',
+  //       sessionToken: '',
+  //     },
+  //   },
+  //   AIRephraseWidgetConfig: {
+  //     apiKey: '',
+  //     useDefault: true,
+  //     defaultTone: 'Professional',
+  //     proxyConfig: {
+  //       api: 'v1/chat/completions',
+  //       servername: 'http://localhost',
+  //       port: '3011',
+  //       sessionToken: '',
+  //     },
+  //   },
+  // },
+  // appConfig: {
+  //   maxFileSize: 10 * 1024 * 1024,
+  //   sessionTimeOut: 122,
+  //   chatProtocol: {
+  //     active: 2,
+  //   },
+  //   debug: true,
+  //   endpoints: {
+  //     api: 'api.quickblox.com',
+  //     chat: 'chat.quickblox.com',
+  //   },
+  //   on: {
+  //     // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/require-await
+  //     async sessionExpired(handleResponse: any, retry: any) {
+  //       console.log(
+  //         // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+  //         `QBconfig sessionExpired handle: ${handleResponse} ${retry}`,
+  //       );
+  //     },
+  //   },
+  //   streamManagement: {
+  //     enable: true,
+  //   },
+  // },
 };

package/src/package_artan_react_ui.json

@@ -1,6 +1,6 @@
 {
   "name": "artan-react-ui-sample",
-  "version": "0.0.10",
+  "version": "0.0.51",
   "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",
@@ -17,9 +21,17 @@
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.6",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
     "@typescript-eslint/eslint-plugin-tslint": "^5.45.1",
     "@typescript-eslint/parser": "^5.45.1",
     "classnames": "^2.3.2",
+    "css-loader": "^6.7.3",
     "eslint": "^8.29.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.5.0",
@@ -33,14 +45,6 @@
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "prettier": "^2.8.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.2",
-    "@types/node": "^16.18.6",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.9",
-    "css-loader": "^6.7.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.4.3",

package/src/package_original.json

@@ -1,6 +1,6 @@
 {
   "name": "quickblox-react-ui-kit",
-  "version": "0.1.3",
+  "version": "0.2.4",
   "main": "dist/index-ui.js",
   "license": "MIT",
   "keywords": [
@@ -25,6 +25,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/utils/utils.ts

@@ -1,5 +1,12 @@
 // import { encode } from 'gpt-3-encoder';
 
+import { MessageEntity } from '../Domain/entity/MessageEntity';
+import { IChatMessage } from '../Data/source/AISource';
+import {
+  Tone,
+  toneToString,
+} from '../Presentation/components/UI/Dialogs/MessagesView/AIWidgets/Tone';
+
 export const completeSentence = (text?: string) =>
   text?.replace(/([^.!?;]+)[^.!?;]*$/, ' ...') || '';
 
@@ -37,3 +44,59 @@ export const loopToLimitTokens = <T>(
 
   return [];
 };
+
+export class AIUtils {
+  public static createTranslatePrompt(textToSend: string, language?: string) {
+    let prompt = `Please, translate the next text in english and give me just only translated text. Text to translate is: "${textToSend}"`;
+
+    if (language) {
+      prompt = `Please, translate the next text in ${language} and give me just only translated text. Text to translate is: "${textToSend}"`;
+    }
+
+    return prompt;
+  }
+
+  public static createAnswerAssistPrompt(textToSend: string) {
+    const prompt = `You are a customer support chat operator. Your goal is to provide helpful and informative responses to customer inquiries. Give a response to the next user's query, considering the entire conversation context, and use grammar and vocabulary at the A2-B2 level. Answer in the format of simple sentences. Do not include question in answer. Please, provide answer for this issue:"${textToSend}"`;
+
+    return prompt;
+  }
+
+  public static createRephrasePrompt(textToSend: string, tone?: Tone) {
+    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:"${textToSend}"`;
+
+    if (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(
+        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:"${textToSend}"`;
+    }
+
+    return prompt;
+  }
+
+  public static messageEntitiesToIChatMessageCollection(
+    messageEntities: MessageEntity[],
+    currentUserId: number | undefined,
+    MAX_TOKENS = 3584,
+  ): IChatMessage[] {
+    const items = messageEntities.filter(
+      (it) =>
+        !it.notification_type ||
+        (it.notification_type && it.notification_type.length === 0),
+    );
+    const messages = loopToLimitTokens(
+      MAX_TOKENS,
+      items,
+      ({ message }) => message || '',
+    ).reverse();
+    const chatCompletionMessages: IChatMessage[] = messages.map(
+      ({ message, sender_id }) => ({
+        role: sender_id === currentUserId ? 'user' : 'assistant',
+        content: message,
+      }),
+    );
+
+    //
+    return chatCompletionMessages;
+  }
+}