quickblox-react-ui-kit 0.1.8 → 0.2.0

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

@@ -15,7 +15,10 @@ import useMessagesViewModel from './useMessagesViewModel';
 import LoaderComponent from '../../Placeholders/LoaderComponent/LoaderComponent';
 import ErrorComponent from '../../Placeholders/ErrorComponent/ErrorComponent';
 import HeaderMessages from './HeaderMessages/HeaderMessages';
-import { FunctionTypeVoidToVoid } from '../../../../Views/Base/BaseViewModel';
+import {
+  FunctionTypeVoidToVoid,
+  IChatMessage,
+} from '../../../../Views/Base/BaseViewModel';
 import VideoAttachmentComponent from './VideoAttachmentComponent/VideoAttachmentComponent';
 import ImageAttachmentComponent from './ImageAttachmentComponent/ImageAttachmentComponent';
 import { DialogType } from '../../../../../Domain/entity/DialogTypes';
@@ -45,14 +48,15 @@ import ViewedDelivered from '../../svgs/Icons/Status/ViewedDelivered';
 import { stringifyError } from '../../../../../utils/parse';
 import VoiceRecordingProgress from './VoiceRecordingProgress/VoiceRecordingProgress';
 import UiKitTheme from '../../../../assets/UiKitTheme';
+import { AIWidget } from './AIWidgets/AIWidget';
 import { DialogsViewModel } from '../../../../Views/Dialogs/DialogViewModel';
 import { HighLightLink, messageHasUrls } from './HighLightLink/HighLightLink';
-// import CompanyLogo from '../../../layouts/TestStage/CompanyLogo/CompanyLogo';
+import { loopToLimitTokens } from '../../../../../utils/utils';
 
 type HeaderDialogsMessagesProps = {
-  // InputWidgetToLeftPlaceHolder?: InputWidget;
-  // InputWidgetToRightPlaceHolder?: InputWidget;
-  // IncomingMessageWidgetToRightPlaceHolder?: InputWidget;
+  AIEditMessage?: AIWidget;
+  AITranslation?: AIWidget;
+  AIAnswerToMessage?: AIWidget;
   dialogsViewModel: DialogsViewModel;
   onDialogInformationHandler?: FunctionTypeVoidToVoid;
   maxWidthToResize?: string;
@@ -64,11 +68,11 @@ type HeaderDialogsMessagesProps = {
 // eslint-disable-next-line react/function-component-definition
 const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // InputWidgetToLeftPlaceHolder,
+  AIEditMessage,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // InputWidgetToRightPlaceHolder,
+  AITranslation,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  // IncomingMessageWidgetToRightPlaceHolder,
+  AIAnswerToMessage,
   dialogsViewModel,
   onDialogInformationHandler,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -96,6 +100,32 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
   const [messagesToView, setMessagesToView] = React.useState<MessageEntity[]>(
     [],
   );
+  const [waitAIWidget, setWaitAIWidget] = useState<boolean>(false);
+
+  const messageEntitiesToIChatMessageCollection = (
+    messageEntities: MessageEntity[],
+  ): IChatMessage[] => {
+    const MAX_TOKENS = 3584;
+    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;
+  };
 
   const messagesViewModel: MessagesViewModel = useMessagesViewModel(
     dialogsViewModel.entity?.type,
@@ -181,6 +211,23 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
     }
   }, [dialogMessagesCount]);
   //
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const menuItems = [
+    {
+      title: 'Item 1',
+      action: () => {
+        console.log('Clicked on Item 1');
+      },
+    },
+    {
+      title: 'Item 2',
+      action: () => {
+        console.log('Clicked on Item 2');
+      },
+    },
+    // ... добавьте дополнительные элементы меню
+  ];
+  //
 
   const getSenderName = (sender?: UserEntity): string | undefined => {
     if (!sender) return undefined;
@@ -357,13 +404,18 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
           <div
             className="message-view-container__incoming-time"
             onClick={() => {
-              // IncomingMessageWidgetToRightPlaceHolder?.textToWidget(
-              //   message.message,
-              // );
+              if (!waitAIWidget) {
+                setWaitAIWidget(true);
+                AIAnswerToMessage?.textToWidget(
+                  message.message,
+                  messageEntitiesToIChatMessageCollection(messagesToView),
+                );
+              }
             }}
           >
-            {/* {IncomingMessageWidgetToRightPlaceHolder?.renderWidget()} */}
+            {AIAnswerToMessage?.renderWidget()}
           </div>
+          {/* <ContextMenu items={menuItems} /> */}
         </div>
       );
     } else {
@@ -634,7 +686,10 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
       setFileToSend(voiceMessage);
       if (useAudioWidget) {
         setUseAudioWidget(false);
-        // InputWidgetToRightPlaceHolder?.fileToWidget(voiceMessage);
+        AITranslation?.fileToWidget(
+          voiceMessage,
+          messageEntitiesToIChatMessageCollection(messagesToView),
+        );
       }
       //
     }
@@ -699,45 +754,45 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
     }
   }
 
-  // useEffect(() => {
-  //   if (
-  //     InputWidgetToLeftPlaceHolder?.textToInput &&
-  //     InputWidgetToLeftPlaceHolder?.textToInput.length > 0
-  //   ) {
-  //     setMessageText(InputWidgetToLeftPlaceHolder?.textToInput);
-  //     setWidgetTextContent(InputWidgetToLeftPlaceHolder?.textToInput);
-  //     setTimeout(() => {
-  //       setWidgetTextContent('');
-  //     }, 45 * 1000);
-  //   }
-  // }, [InputWidgetToLeftPlaceHolder?.textToInput]);
-  //
-  // useEffect(() => {
-  //   if (
-  //     InputWidgetToRightPlaceHolder?.textToInput &&
-  //     InputWidgetToRightPlaceHolder?.textToInput.length > 0
-  //   ) {
-  //     setMessageText(InputWidgetToRightPlaceHolder?.textToInput);
-  //     setWidgetTextContent(InputWidgetToRightPlaceHolder?.textToInput);
-  //     setTimeout(() => {
-  //       setWidgetTextContent('');
-  //     }, 45 * 1000);
-  //   }
-  // }, [InputWidgetToRightPlaceHolder?.textToInput]);
-  //
-  // useEffect(() => {
-  //   if (
-  //     IncomingMessageWidgetToRightPlaceHolder?.textToInput &&
-  //     IncomingMessageWidgetToRightPlaceHolder?.textToInput.length > 0
-  //   ) {
-  //     setWidgetTextContent(
-  //       IncomingMessageWidgetToRightPlaceHolder?.textToInput,
-  //     );
-  //     setTimeout(() => {
-  //       setWidgetTextContent('');
-  //     }, 45 * 1000);
-  //   }
-  // }, [IncomingMessageWidgetToRightPlaceHolder?.textToInput]);
+  useEffect(() => {
+    if (
+      AIEditMessage?.textToContent &&
+      AIEditMessage?.textToContent.length > 0
+    ) {
+      setMessageText(AIEditMessage?.textToContent);
+      setWidgetTextContent(AIEditMessage?.textToContent);
+      setTimeout(() => {
+        setWidgetTextContent('');
+      }, 45 * 1000);
+    }
+  }, [AIEditMessage?.textToContent]);
+
+  useEffect(() => {
+    if (
+      AITranslation?.textToContent &&
+      AITranslation?.textToContent.length > 0
+    ) {
+      setMessageText(AITranslation?.textToContent);
+      setWidgetTextContent(AITranslation?.textToContent);
+      setTimeout(() => {
+        setWidgetTextContent('');
+      }, 45 * 1000);
+    }
+  }, [AITranslation?.textToContent]);
+
+  useEffect(() => {
+    setWaitAIWidget(false);
+    if (
+      AIAnswerToMessage?.textToContent &&
+      AIAnswerToMessage?.textToContent.length > 0
+    ) {
+      setMessageText(AIAnswerToMessage?.textToContent);
+      setWidgetTextContent(AIAnswerToMessage?.textToContent);
+      setTimeout(() => {
+        setWidgetTextContent('');
+      }, 45 * 1000);
+    }
+  }, [AIAnswerToMessage?.textToContent]);
 
   const useSubContent = subHeaderContent || false;
   const useUpContent = upHeaderContent || false;
@@ -850,7 +905,7 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
         }
         className="message-view-container--messages"
       >
-        {messagesViewModel?.error && (
+        {messagesViewModel?.error && !messagesViewModel.loading && (
           <ErrorComponent
             title={messagesViewModel?.error}
             ClickActionHandler={() => {
@@ -872,7 +927,7 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
               autoScrollToBottom={scrollUpToDown}
             />
           )}
-        {messagesViewModel?.loading && (
+        {(messagesViewModel?.loading || waitAIWidget) && (
           <div
             style={{
               height: '44px',
@@ -941,11 +996,11 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
             }}
           />
         </label>
-        {/*  start InputWidgetToRightPlaceHolder */}
-        {/* {InputWidgetToRightPlaceHolder && ( */}
+        {/*  start AITranslation */}
+        {/* {AITranslation && ( */}
         {/*  <div> */}
         {/*    <ActiveSvg */}
-        {/*      content={InputWidgetToRightPlaceHolder.renderWidget()} */}
+        {/*      content={AITranslation.renderWidget()} */}
         {/*      clickAction={() => { */}
         {/*        console.log('click left place golder widget'); */}
         {/*        if (messagesViewModel?.loading) return; */}
@@ -958,7 +1013,7 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
         {/*    /> */}
         {/*  </div> */}
         {/* )} */}
-        {/* end InputWidgetToRightPlaceHolder */}
+        {/* end AITranslation */}
         {!isRecording && (
           <textarea
             style={theme ? { backgroundColor: theme.chatInput() } : {}}
@@ -1003,14 +1058,14 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
             }}
           />
         )}
-        {/* InputWidgetToRightPlaceHolder start InputWidgetToLeftPlaceHolder */}
-        {/* {InputWidgetToLeftPlaceHolder && ( */}
+        {/* AITranslation start AIEditMessage */}
+        {/* {AIEditMessage && ( */}
         {/*  <div> */}
         {/*    <ActiveSvg */}
-        {/*      content={InputWidgetToLeftPlaceHolder.renderWidget()} */}
+        {/*      content={AIEditMessage.renderWidget()} */}
         {/*      clickAction={() => { */}
         {/*        console.log('click left place golder widget'); */}
-        {/*        InputWidgetToLeftPlaceHolder?.textToWidget(messageText); */}
+        {/*        AIEditMessage?.textToWidget(messageText); */}
         {/*      }} */}
         {/*      touchAction={() => { */}
         {/*        console.log('touch left place golder widget'); */}

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,34 @@ 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 { 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;
-  // InputWidgetToLeftPlaceHolder?: InputWidget;
-  // InputWidgetToRightPlaceHolder?: InputWidget;
-  // IncomingMessageWidgetToRightPlaceHolder?: InputWidget;
+  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>>();
@@ -46,32 +56,56 @@ 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,
-  //   });
+  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) {
@@ -235,11 +269,9 @@ const QuickBloxUIKitDesktopLayout: React.FC<
             maxWidthToResize={
               selectedDialog && needDialogInformation ? undefined : '1040px'
             }
-            // InputWidgetToLeftPlaceHolder={defaultLeftPlaceHolderInputWidget}
-            // InputWidgetToRightPlaceHolder={defaultRightPlaceHolderInputWidget}
-            // IncomingMessageWidgetToRightPlaceHolder={
-            //   defaultIncomingMessageWidget
-            // }
+            AIEditMessage={defaultAIEditMessageWidget}
+            AITranslation={defaultAITranslateWidget}
+            AIAnswerToMessage={defaultAIAnswerToMessageWidget}
             theme={theme}
           /> // 1 Get Messages + 1 Get User by Id
         ) : (

package/src/QBconfig.ts

@@ -8,13 +8,12 @@ export const QBConfig = {
   },
   configAIApi: {
     AIAnswerAssistWidgetConfig: {
-      apiKey: '',
+      apiKey: '', // Replace with your real API key
       useDefault: true,
       proxyConfig: {
-        // https://api.openai.com/v1/chat/completions'
         api: 'v1/chat/completions',
-        servername: 'https://myproxy.com',
-        port: '4032',
+        servername: 'https://api.openai.com/',
+        port: '',
         sessionToken: '',
       },
     },

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;
-}
-
-