quickblox-react-ui-kit 0.1.7 → 0.2.0

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import useQbDataContext from '../../providers/QuickBloxUIKitProvider/useQbDataContext';
+import useQbInitializedDataContext from '../../providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
 import { DialogEntity } from '../../../../Domain/entity/DialogEntity';
 import { DialogsViewModel } from '../../../Views/Dialogs/DialogViewModel';
 import DialogsComponent from '../../../Views/Dialogs/Dialogs';
@@ -16,20 +16,39 @@ import { Pagination } from '../../../../Domain/repository/Pagination';
 // import { DialogEventInfo } from '../../../../Domain/entity/DialogEventInfo';
 import UiKitTheme from '../../../assets/UiKitTheme';
 import BaseViewModel from '../../../Views/Base/BaseViewModel';
+import { AIWidget } from '../../UI/Dialogs/MessagesView/AIWidgets/AIWidget';
+import { QBConfig } from '../../../../QBconfig';
+import UseDefaultAIAssistAnswerWidgetWithProxy from '../../UI/Dialogs/MessagesView/AIWidgets/UseDefaultAIAssistAnswerWidgetWithProxy';
+
+type AIWidgetPlaceHolder = {
+  enabled: boolean;
+  default: boolean;
+  AIWidget?: AIWidget;
+};
 
 type QuickBloxUIKitDesktopLayoutProps = {
   theme?: UiKitTheme;
+  AIEditMessage?: AIWidgetPlaceHolder;
+  AITranslation?: AIWidgetPlaceHolder;
+  AIAnswerToMessage?: 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
+  AITranslation = undefined,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  AIEditMessage = undefined,
+  AIAnswerToMessage = undefined,
+}: QuickBloxUIKitDesktopLayoutProps) => {
   console.log('create QuickBloxUIKitDesktopLayout');
   const [selectedDialog, setSelectedDialog] =
     React.useState<BaseViewModel<DialogEntity>>();
 
-  const currentContext = useQbDataContext();
+  const currentContext = useQbInitializedDataContext();
   // const eventMessaging = useEventMessagesRepository();
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
@@ -37,16 +56,62 @@ 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);
 
+  const defaultAIEditMessageWidget = AIEditMessage?.AIWidget; // useDefaultTextInputWidget();
+  const defaultAITranslateWidget = AITranslation?.AIWidget;
+  // if (!defaultAIEditMessageWidget) {
+  //   defaultAIEditMessageWidget = useDefaultTextInputWidget();
+  // }
+  // const defaultAITranslateWidget =
+  //   AITranslation?.AIWidget || useDefaultVoiceInputWidget();
+  let defaultAIAnswerToMessageWidget;
+
+  const getAIAssistAnswer = (): void => {
+    if (AIAnswerToMessage?.enabled && !AIAnswerToMessage?.default) {
+      defaultAIAnswerToMessageWidget = AIAnswerToMessage.AIWidget;
+    } else if (
+      AIAnswerToMessage?.enabled ||
+      QBConfig.configAIApi.AIAnswerAssistWidgetConfig.useDefault
+    ) {
+      if (
+        !QBConfig.configAIApi.AIAnswerAssistWidgetConfig.useDefault ||
+        (AIAnswerToMessage && !AIAnswerToMessage?.default)
+      ) {
+        defaultAIAnswerToMessageWidget = undefined;
+      } else {
+        const { apiKey } = QBConfig.configAIApi.AIAnswerAssistWidgetConfig;
+        let token = '';
+
+        if (apiKey) {
+          token = apiKey;
+        } else {
+          token =
+            QBConfig.configAIApi.AIAnswerAssistWidgetConfig.proxyConfig
+              .sessionToken ||
+            sessionToken ||
+            '';
+        }
+        defaultAIAnswerToMessageWidget =
+          UseDefaultAIAssistAnswerWidgetWithProxy({
+            ...QBConfig.configAIApi.AIAnswerAssistWidgetConfig.proxyConfig,
+            sessionToken: token,
+          });
+      }
+    }
+  };
+
+  getAIAssistAnswer();
+
   const selectDialogActions = (item: BaseViewModel<DialogEntity>): void => {
     if (!dialogsViewModel.loading) {
       setSelectedDialog(item);
     }
   };
-
   // const subscribeToDialogEventsUseCase: SubscribeToDialogEventsUseCase =
   //   new SubscribeToDialogEventsUseCase(eventMessaging, 'TestStage');
 
@@ -181,23 +246,32 @@ const QuickBloxUIKitDesktopLayout: React.FC<
       theme={theme}
       dialogsView={
         <DialogsComponent
+          // subHeaderContent={<CompanyLogo />}
+          // upHeaderContent={<CompanyLogo />}
           dialogsViewModel={dialogsViewModel} // 1 Get 2 Update UseCase
-          itemSelectHandler={selectDialogActions}
+          onDialogSelectHandler={selectDialogActions}
           additionalSettings={{
             withoutHeader: false,
             themeHeader: theme,
             themePreview: theme,
+            useSubHeader: false,
+            useUpHeader: false,
           }}
         />
       }
       dialogMessagesView={
         selectedDialog && selectedDialog.entity && dialogsViewModel.entity ? (
           <MessagesView
+            // subHeaderContent={<CompanyLogo />}
+            // upHeaderContent={<CompanyLogo />}
             dialogsViewModel={dialogsViewModel}
-            InformationHandler={informationOpenHandler}
+            onDialogInformationHandler={informationOpenHandler}
             maxWidthToResize={
               selectedDialog && needDialogInformation ? undefined : '1040px'
             }
+            AIEditMessage={defaultAIEditMessageWidget}
+            AITranslation={defaultAITranslateWidget}
+            AIAnswerToMessage={defaultAIAnswerToMessageWidget}
             theme={theme}
           /> // 1 Get Messages + 1 Get User by Id
         ) : (
@@ -219,10 +293,11 @@ const QuickBloxUIKitDesktopLayout: React.FC<
         <div>
           {selectedDialog && needDialogInformation && (
             <DialogInformation
+              // subHeaderContent={<CompanyLogo />}
+              // upHeaderContent={<CompanyLogo />}
               dialog={selectedDialog.entity}
               dialogViewModel={dialogsViewModel}
-              closeInformationHandler={informationCloseHandler}
-              theme={theme}
+              onCloseDialogInformationHandler={informationCloseHandler}
             />
           )}
         </div>

package/src/Presentation/components/layouts/TestStage/CompanyLogo/CompanyLogo.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+// eslint-disable-next-line react/function-component-definition
+const CompanyLogo: React.FC = () => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        width: '322px',
+        height: '42px',
+        border: '1px solid #333',
+      }}
+    >
+      <img
+        src="../../../../../../src/Presentation/assets/img/bee-img.png"
+        alt="Company Logo"
+        style={{ width: '100px', height: 'auto', marginRight: '10px' }}
+      />
+      <span style={{ fontSize: '24px', fontWeight: 'bold', color: '#333' }}>
+        Your Company Name
+      </span>
+    </div>
+  );
+};
+
+export default CompanyLogo;

package/src/Presentation/components/layouts/TestStage/LoginView/Login.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import './Login.scss';
 import { InitParams } from '../../../providers/QuickBloxUIKitProvider/QuickBloxUIKitProvider';
-import useQbDataContext from '../../../providers/QuickBloxUIKitProvider/useQbDataContext';
+import useQbInitializedDataContext from '../../../providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
 import { LoginData } from '../../../../../Data/source/remote/RemoteDataSource';
 
 export type FunctionTypeLoginDataToVoid = (data: LoginData) => void;
@@ -11,7 +11,7 @@ type LoginProps = {
 };
 // eslint-disable-next-line react/function-component-definition
 const Login: React.FC<LoginProps> = ({ loginHandler }: LoginProps) => {
-  const currentContext = useQbDataContext();
+  const currentContext = useQbInitializedDataContext();
   const [UserName, setUsername] = useState(
     currentContext.InitParams.loginData?.login || 'tester',
   );

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

@@ -1,8 +1,8 @@
 import EventMessagesRepository from '../../../../Data/repository/EventMessagesRepository';
-import useQbDataContext from './useQbDataContext';
+import useQbInitializedDataContext from './useQbInitializedDataContext';
 
 const useEventMessagesRepository = (): EventMessagesRepository => {
-  const currentQbDataContext = useQbDataContext();
+  const currentQbDataContext = useQbInitializedDataContext();
 
   return currentQbDataContext.storage.EVENT_MESSAGE_REPOSITORY;
 };

package/src/Presentation/components/providers/QuickBloxUIKitProvider/{useQbDataContext.ts → useQbInitializedDataContext.ts}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { qbDataContext, QBDataContextType } from './QuickBloxUIKitProvider';
 
-const useQbDataContext = (): QBDataContextType => {
+const useQbInitializedDataContext = (): QBDataContextType => {
   const currentQbDataContext = React.useContext(qbDataContext);
 
   console.log(
@@ -79,4 +79,4 @@ const useQbDataContext = (): QBDataContextType => {
   return currentQbDataContext;
 };
 
-export default useQbDataContext;
+export default useQbInitializedDataContext;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { qbDataContext, QBDataContextType } from './QuickBloxUIKitProvider';
+
+const useQbUIKitDataContext = (): QBDataContextType => {
+  const currentQbDataContext: QBDataContextType =
+    React.useContext(qbDataContext);
+
+  return currentQbDataContext;
+};
+
+export default useQbUIKitDataContext;

package/src/QBconfig.ts

@@ -6,6 +6,18 @@ export const QBConfig = {
     authSecret: '',
     sessionToken: '',
   },
+  configAIApi: {
+    AIAnswerAssistWidgetConfig: {
+      apiKey: '', // Replace with your real API key
+      useDefault: true,
+      proxyConfig: {
+        api: 'v1/chat/completions',
+        servername: 'https://api.openai.com/',
+        port: '',
+        sessionToken: '',
+      },
+    },
+  },
   appConfig: {
     maxFileSize: 10 * 1024 * 1024,
     sessionTimeOut: 122,

package/src/index-ui.ts

@@ -8,7 +8,7 @@ import QuickBloxUIKitProvider, {
 } from './Presentation/components/providers/QuickBloxUIKitProvider/QuickBloxUIKitProvider';
 import { LocalDataSource } from './Data/source/local/LocalDataSource';
 import useQBConnection from './Presentation/components/providers/QuickBloxUIKitProvider/useQBConnection';
-import useQbDataContext from './Presentation/components/providers/QuickBloxUIKitProvider/useQbDataContext';
+import useQbInitializedDataContext from './Presentation/components/providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
 import useEventMessagesRepository from './Presentation/components/providers/QuickBloxUIKitProvider/useEventMessagesRepository';
 import { DialogsViewModel } from './Presentation/Views/Dialogs/DialogViewModel';
 import useDialogsViewModel from './Presentation/Views/Dialogs/useDialogsViewModel';
@@ -32,6 +32,7 @@ import {
 import QuickBloxUIKitDesktopLayout from './Presentation/components/layouts/Desktop/QuickBloxUIKitDesktopLayout';
 import DefaultTheme from './Presentation/assets/DefaultThemes/DefaultTheme';
 import UiKitTheme from './Presentation/assets/UiKitTheme';
+import useQbUIKitDataContext from './Presentation/components/providers/QuickBloxUIKitProvider/useQbUIKitDataContext';
 
 export {
   MainButton,
@@ -44,7 +45,8 @@ export {
   RemoteDataSource,
   LocalDataSource,
   useQBConnection,
-  useQbDataContext,
+  useQbInitializedDataContext,
+  useQbUIKitDataContext,
   useEventMessagesRepository,
   type DialogsViewModel,
   useDialogsViewModel,

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/providers/QuickBloxUIKitProvider/useQbDataContext.d.ts

@@ -1,3 +0,0 @@
-import { QBDataContextType } from './QuickBloxUIKitProvider';
-declare const useQbDataContext: () => QBDataContextType;
-export default useQbDataContext;