quickblox-react-ui-kit 0.1.8 → 0.2.1

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

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-// import { Configuration, OpenAIApi } from 'openai';
 import useQbInitializedDataContext from '../../providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
 import { DialogEntity } from '../../../../Domain/entity/DialogEntity';
 import { DialogsViewModel } from '../../../Views/Dialogs/DialogViewModel';
@@ -17,23 +16,40 @@ import { Pagination } from '../../../../Domain/repository/Pagination';
 // import { DialogEventInfo } from '../../../../Domain/entity/DialogEventInfo';
 import UiKitTheme from '../../../assets/UiKitTheme';
 import BaseViewModel from '../../../Views/Base/BaseViewModel';
-// import { InputWidget } from '../../UI/Dialogs/MessagesView/InputWidget/InputWidget';
-// import useDefaultTextInputWidget from '../../UI/Dialogs/MessagesView/InputWidget/UseDefaultTextInputWidget';
-// import useDefaultVoiceInputWidget from '../../UI/Dialogs/MessagesView/InputWidget/useDefaultVoiceInputWidget';
-// import UseDefaultIncomingMessageWidget from '../../UI/Dialogs/MessagesView/InputWidget/UseDefaultIncomingMessageWidget';
-// import CompanyLogo from '../TestStage/CompanyLogo/CompanyLogo';
+import { AIMessageWidget } from '../../UI/Dialogs/MessagesView/AIWidgets/AIMessageWidget';
+import { QBConfig } from '../../../../QBconfig';
+import UseDefaultAIAssistAnswerWidget from '../../UI/Dialogs/MessagesView/AIWidgets/UseDefaultAIAssistAnswerWidget';
+import UseDefaultAITranslateWidget from '../../UI/Dialogs/MessagesView/AIWidgets/UseDefaultAITranslateWidget';
+import UseDefaultAIRephraseMessageWidget from '../../UI/Dialogs/MessagesView/AIWidgets/UseDefaultAIRephraseMessageWidget';
+import {
+  DefaultConfigurations,
+  ProxyConfig,
+} from '../../../../Data/DefaultConfigurations';
+
+type AIWidgetPlaceHolder = {
+  enabled: boolean;
+  default: boolean;
+  AIWidget?: AIMessageWidget;
+};
 
 type QuickBloxUIKitDesktopLayoutProps = {
   theme?: UiKitTheme;
-  // InputWidgetToLeftPlaceHolder?: InputWidget;
-  // InputWidgetToRightPlaceHolder?: InputWidget;
-  // IncomingMessageWidgetToRightPlaceHolder?: InputWidget;
+  AIRephrase?: AIWidgetPlaceHolder;
+  AITranslate?: AIWidgetPlaceHolder;
+  AIAssist?: AIWidgetPlaceHolder;
 };
 
 const QuickBloxUIKitDesktopLayout: React.FC<
   QuickBloxUIKitDesktopLayoutProps
   // eslint-disable-next-line @typescript-eslint/no-unused-vars,react/function-component-definition
-> = ({ theme = undefined }: QuickBloxUIKitDesktopLayoutProps) => {
+> = ({
+  theme = undefined,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  AITranslate = undefined,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  AIRephrase = undefined,
+  AIAssist = undefined,
+}: QuickBloxUIKitDesktopLayoutProps) => {
   console.log('create QuickBloxUIKitDesktopLayout');
   const [selectedDialog, setSelectedDialog] =
     React.useState<BaseViewModel<DialogEntity>>();
@@ -46,32 +62,131 @@ const QuickBloxUIKitDesktopLayout: React.FC<
     currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.userName;
   const userId =
     currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.userId;
+  const sessionToken =
+    currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.sessionToken;
 
   const dialogsViewModel: DialogsViewModel =
     useDialogsViewModel(currentContext);
 
-  // let defaultLeftPlaceHolderInputWidget = InputWidgetToLeftPlaceHolder; // useDefaultTextInputWidget();
-  //
-  // if (!defaultLeftPlaceHolderInputWidget) {
-  //   defaultLeftPlaceHolderInputWidget = useDefaultTextInputWidget();
-  // }
-  // const defaultRightPlaceHolderInputWidget =
-  //   InputWidgetToRightPlaceHolder || useDefaultVoiceInputWidget();
-  // let defaultIncomingMessageWidget = IncomingMessageWidgetToRightPlaceHolder;
-  //
-  // if (!defaultIncomingMessageWidget) {
-  //   const apiKey = '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'; // Замените на ваш реальный ключ API
-  //
-  //   const openAIConfiguration = new Configuration({
-  //     apiKey,
-  //   });
-  //
-  //   const openAIApi = new OpenAIApi(openAIConfiguration);
-  //
-  //   defaultIncomingMessageWidget = UseDefaultIncomingMessageWidget({
-  //     openAIApi,
-  //   });
-  // }
+  let defaultAIEditMessageWidget = AIRephrase?.AIWidget; // useDefaultTextInputWidget();
+  let defaultAITranslateWidget = AITranslate?.AIWidget;
+  let defaultAIAnswerToMessageWidget = AIAssist?.AIWidget;
+
+  const getAIAssistAnswer = (): void => {
+    if (AIAssist?.enabled && !AIAssist?.default) {
+      defaultAIAnswerToMessageWidget = AIAssist.AIWidget;
+    } else if (
+      AIAssist?.enabled ||
+      QBConfig.configAIApi.AIAnswerAssistWidgetConfig.useDefault
+    ) {
+      if (
+        !QBConfig.configAIApi.AIAnswerAssistWidgetConfig.useDefault ||
+        (AIAssist && !AIAssist?.default)
+      ) {
+        defaultAIAnswerToMessageWidget = undefined;
+      } else {
+        const { apiKey } = QBConfig.configAIApi.AIAnswerAssistWidgetConfig;
+        let token = '';
+
+        if (apiKey) {
+          token = apiKey;
+        } else {
+          token =
+            QBConfig.configAIApi.AIAnswerAssistWidgetConfig.proxyConfig
+              .sessionToken ||
+            sessionToken ||
+            '';
+        }
+        const proxyConfig: ProxyConfig =
+          QBConfig.configAIApi.AIAnswerAssistWidgetConfig.proxyConfig ||
+          DefaultConfigurations.getDefaultProxyConfig();
+
+        defaultAIAnswerToMessageWidget = UseDefaultAIAssistAnswerWidget({
+          ...proxyConfig,
+          sessionToken: token,
+          apiKey,
+        });
+      }
+    }
+  };
+  const getAITranslate = (): void => {
+    if (AITranslate?.enabled && !AITranslate?.default) {
+      defaultAITranslateWidget = AITranslate.AIWidget;
+    } else if (
+      AITranslate?.enabled ||
+      QBConfig.configAIApi.AITranslateWidgetConfig.useDefault
+    ) {
+      if (
+        !QBConfig.configAIApi.AITranslateWidgetConfig.useDefault ||
+        (AITranslate && !AITranslate?.default)
+      ) {
+        defaultAITranslateWidget = undefined;
+      } else {
+        const { apiKey } = QBConfig.configAIApi.AITranslateWidgetConfig;
+        let token = '';
+
+        if (apiKey) {
+          token = apiKey;
+        } else {
+          token =
+            QBConfig.configAIApi.AITranslateWidgetConfig.proxyConfig
+              .sessionToken ||
+            sessionToken ||
+            '';
+        }
+        const proxyConfig: ProxyConfig =
+          QBConfig.configAIApi.AITranslateWidgetConfig.proxyConfig ||
+          DefaultConfigurations.getDefaultProxyConfig();
+
+        defaultAITranslateWidget = UseDefaultAITranslateWidget({
+          ...proxyConfig,
+          sessionToken: token,
+          apiKey,
+        });
+      }
+    }
+  };
+  const getAIRephrase = (): void => {
+    if (AIRephrase?.enabled && !AIRephrase?.default) {
+      defaultAIEditMessageWidget = AIRephrase.AIWidget;
+    } else if (
+      AIRephrase?.enabled ||
+      QBConfig.configAIApi.AIRephraseWidgetConfig.useDefault
+    ) {
+      if (
+        !QBConfig.configAIApi.AIRephraseWidgetConfig.useDefault ||
+        (AIRephrase && !AIRephrase?.default)
+      ) {
+        defaultAIEditMessageWidget = undefined;
+      } else {
+        const { apiKey } = QBConfig.configAIApi.AIRephraseWidgetConfig;
+        let token = '';
+
+        if (apiKey) {
+          token = apiKey;
+        } else {
+          token =
+            QBConfig.configAIApi.AIRephraseWidgetConfig.proxyConfig
+              .sessionToken ||
+            sessionToken ||
+            '';
+        }
+        const proxyConfig: ProxyConfig =
+          QBConfig.configAIApi.AIRephraseWidgetConfig.proxyConfig ||
+          DefaultConfigurations.getDefaultProxyConfig();
+
+        defaultAIEditMessageWidget = UseDefaultAIRephraseMessageWidget({
+          ...proxyConfig,
+          sessionToken: token,
+          apiKey,
+        });
+      }
+    }
+  };
+
+  getAITranslate();
+  getAIRephrase();
+  getAIAssistAnswer();
 
   const selectDialogActions = (item: BaseViewModel<DialogEntity>): void => {
     if (!dialogsViewModel.loading) {
@@ -235,11 +350,9 @@ const QuickBloxUIKitDesktopLayout: React.FC<
             maxWidthToResize={
               selectedDialog && needDialogInformation ? undefined : '1040px'
             }
-            // InputWidgetToLeftPlaceHolder={defaultLeftPlaceHolderInputWidget}
-            // InputWidgetToRightPlaceHolder={defaultRightPlaceHolderInputWidget}
-            // IncomingMessageWidgetToRightPlaceHolder={
-            //   defaultIncomingMessageWidget
-            // }
+            AIRephrase={defaultAIEditMessageWidget}
+            AITranslate={defaultAITranslateWidget}
+            AIAssist={defaultAIAnswerToMessageWidget}
             theme={theme}
           /> // 1 Get Messages + 1 Get User by Id
         ) : (

package/src/QBconfig.ts

@@ -11,10 +11,38 @@ export const QBConfig = {
       apiKey: '',
       useDefault: true,
       proxyConfig: {
-        // https://api.openai.com/v1/chat/completions'
         api: 'v1/chat/completions',
-        servername: 'https://myproxy.com',
-        port: '4032',
+        servername: 'http://localhost',
+        port: '3001',
+        sessionToken: '',
+      },
+    },
+    AITranslateWidgetConfig: {
+      apiKey: '',
+      useDefault: true,
+      defaultLanguage: 'English',
+      languages: [
+        'English',
+        'Spanish',
+        'French',
+        'Portuguese',
+        'German',
+        'Ukrainian',
+      ],
+      proxyConfig: {
+        api: 'v1/chat/completions',
+        servername: 'http://localhost',
+        port: '3001',
+        sessionToken: '',
+      },
+    },
+    AIRephraseWidgetConfig: {
+      apiKey: '',
+      useDefault: true,
+      proxyConfig: {
+        api: 'v1/chat/completions',
+        servername: 'http://localhost',
+        port: '3001',
         sessionToken: '',
       },
     },

package/src/index-ui.ts

@@ -33,6 +33,10 @@ import QuickBloxUIKitDesktopLayout from './Presentation/components/layouts/Deskt
 import DefaultTheme from './Presentation/assets/DefaultThemes/DefaultTheme';
 import UiKitTheme from './Presentation/assets/UiKitTheme';
 import useQbUIKitDataContext from './Presentation/components/providers/QuickBloxUIKitProvider/useQbUIKitDataContext';
+import { AIMessageWidget } from './Presentation/components/UI/Dialogs/MessagesView/AIWidgets/AIMessageWidget';
+import { AISource, IChatMessage } from './Data/source/AISource';
+import AIWidgetIcon from './Presentation/components/UI/svgs/Icons/AIWidgets/AIWidget';
+import ErrorMessageIcon from './Presentation/components/UI/Dialogs/MessagesView/AIWidgets/ErrorMessageIcon';
 
 export {
   MainButton,
@@ -65,4 +69,9 @@ export {
   QuickBloxUIKitDesktopLayout,
   DefaultTheme,
   type UiKitTheme,
+  type AIMessageWidget,
+  AISource,
+  type IChatMessage,
+  AIWidgetIcon,
+  ErrorMessageIcon,
 };

package/src/utils/utils.ts

@@ -0,0 +1,39 @@
+// import { encode } from 'gpt-3-encoder';
+
+export const completeSentence = (text?: string) =>
+  text?.replace(/([^.!?;]+)[^.!?;]*$/, ' ...') || '';
+
+// export const tokenCounter = (text?: string) => (text ? encode(text).length : 0);
+
+export const tokenCounter = (text?: string) => (text ? text.length / 4 : 0);
+
+export const loopToLimitTokens = <T>(
+  limit: number,
+  data: T[],
+  getValue: (item: T) => string = (item) =>
+    typeof item === 'string' ? item : String(item),
+  tokens = 0,
+): T[] => {
+  if (!data.length) {
+    return [];
+  }
+
+  const [firstItem, ...lastItems] = data;
+
+  const itemValue = getValue(firstItem);
+  const itemTokens = tokenCounter(itemValue);
+  const amountTokens = tokens + itemTokens;
+
+  if (amountTokens <= limit) {
+    const nextData = loopToLimitTokens(
+      limit,
+      lastItems,
+      getValue,
+      amountTokens,
+    );
+
+    return itemTokens === 0 ? nextData : [firstItem, ...nextData];
+  }
+
+  return [];
+};

package/dist/Presentation/components/UI/Dialogs/MessagesView/InputWidget/InputWidget.d.ts

@@ -1,8 +0,0 @@
-import { FunctionTypeFileToToVoid, FunctionTypeJSXElement, FunctionTypeStringToVoid } from '../../../../../Views/Base/BaseViewModel';
-export interface InputWidget {
-    renderWidget: FunctionTypeJSXElement;
-    textToWidget: FunctionTypeStringToVoid;
-    fileToWidget: FunctionTypeFileToToVoid;
-    textToInput: string | undefined;
-    fileToInput: File | undefined;
-}

package/dist/Presentation/components/UI/Dialogs/MessagesView/InputWidget/UseDefaultTextInputWidget.d.ts

@@ -1,2 +0,0 @@
-import { InputWidget } from './InputWidget';
-export default function useDefaultTextInputWidget(): InputWidget;

package/dist/Presentation/components/UI/Dialogs/MessagesView/InputWidget/useDefaultVoiceInputWidget.d.ts

@@ -1,2 +0,0 @@
-import { InputWidget } from './InputWidget';
-export default function useDefaultVoiceInputWidget(): InputWidget;

package/src/Presentation/components/UI/Dialogs/MessagesView/InputWidget/InputWidget.ts

@@ -1,15 +0,0 @@
-import {
-  FunctionTypeFileToToVoid,
-  FunctionTypeJSXElement,
-  FunctionTypeStringToVoid,
-} from '../../../../../Views/Base/BaseViewModel';
-
-export interface InputWidget {
-  renderWidget: FunctionTypeJSXElement;
-  textToWidget: FunctionTypeStringToVoid;
-  fileToWidget: FunctionTypeFileToToVoid;
-  textToInput: string | undefined;
-  fileToInput: File | undefined;
-}
-
-

package/src/Presentation/components/UI/Dialogs/MessagesView/InputWidget/UseDefaultTextInputWidget.tsx

@@ -1,60 +0,0 @@
-import { useState } from 'react';
-import { InputWidget } from './InputWidget';
-
-export default function useDefaultTextInputWidget(): InputWidget {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/no-empty-function
-  const fileToWidget = (file: File): void => {};
-
-  const renderWidget = (): JSX.Element => {
-    // return <SendIcon width="21" height="18" applyZoom color="red" />;
-    return (
-      <div
-        style={{
-          width: '21',
-          height: '18',
-          color: 'red',
-          fontSize: '9px',
-          fontStyle: 'bold',
-          fontWeight: '900',
-          border: '2px solid red',
-        }}
-      >
-        T2V
-      </div>
-    );
-  };
-
-  async function getData(textToSend: string): Promise<string> {
-    const response = await fetch(
-      `https://func270519800.azurewebsites.net/api/TranslateTextToEng?text=${textToSend}`,
-    );
-
-    console.log('getData: response: ', response);
-    const data = await response.text();
-
-    console.log(
-      'getData have response: ',
-      JSON.stringify(data.replaceAll('\n\n', '')),
-    );
-
-    return data.replaceAll('\n\n', '');
-  }
-
-  const [textFromWidgetToInput, setTextFromWidgetToInput] = useState('');
-  const textToWidget = (value: string): void => {
-    if (value && value.length > 0) {
-      // eslint-disable-next-line promise/catch-or-return,promise/always-return
-      getData(value).then((data) => {
-        setTextFromWidgetToInput(data);
-      });
-    }
-  };
-
-  return {
-    fileToInput: undefined,
-    textToInput: textFromWidgetToInput,
-    fileToWidget,
-    renderWidget,
-    textToWidget,
-  };
-}