quickblox-react-ui-kit 0.2.2 → 0.2.3

package/package.json

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

package/src/App.tsx

@@ -191,7 +191,9 @@ function App() {
 
   useEffect(() => {
     console.log('0. APP INIT');
-    prepareSDK(currentUser).catch();
+    prepareSDK(currentUser).catch((er) => {
+      console.log(er);
+    });
   }, []);
   //
   // const { proxyConfig } = QBConfig.configAIApi.AIAnswerAssistWidgetConfig;

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

@@ -61,6 +61,9 @@ export class DialogDTOMapper implements IDTOMapper {
     dto.lastMessageId = qbDialog.last_message_id || '';
     dto.lastMessageText = qbDialog.last_message as string;
     dto.lastMessageDateSent = qbDialog.last_message_date_sent as string;
+    // dto.lastMessageDateSent = (
+    //   parseInt(qbDialog.last_message_date_sent || '0', 10) * 1000
+    // ).toString();
     dto.lastMessageUserId =
       qbDialog.last_message_user_id === null
         ? ''

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

@@ -39,7 +39,10 @@ export class MessageDTOMapper implements IDTOMapper {
   }
 
   // eslint-disable-next-line class-methods-use-this
-  public static transformAttachment(qbAtts: ChatMessageAttachment[]) {
+  public static transformAttachment(
+    qbMessage: string,
+    qbAtts: ChatMessageAttachment[],
+  ) {
     const result: ChatMessageAttachmentEntity[] = qbAtts.map((item) => {
       const newItem: ChatMessageAttachmentEntity = {
         id: item.id,
@@ -57,6 +60,25 @@ export class MessageDTOMapper implements IDTOMapper {
           url: item.uid && QB.content.privateUrl(item.uid),
         },
       };
+      const messageParts = MessageDTOMapper.getMessageParts(qbMessage);
+
+      if (messageParts && messageParts.length > 0) {
+        // val messageBody = "${MediaContentEntity::class.java.simpleName}|$fileName|$uid|$fileMimeType"
+        // 0, 1, 2, 3
+        // eslint-disable-next-line prefer-destructuring
+        newItem.uid = messageParts[2];
+        // eslint-disable-next-line prefer-destructuring
+        newItem.name = messageParts[1];
+        // eslint-disable-next-line prefer-destructuring
+        newItem.type = messageParts[3];
+        newItem.url = newItem.uid && QB.content.privateUrl(newItem.uid);
+        if (newItem.file) {
+          newItem.file.uid = newItem.uid;
+          newItem.file.name = newItem.name;
+          newItem.file.url = newItem.uid && QB.content.privateUrl(newItem.uid);
+          newItem.file.type = newItem.type;
+        }
+      }
 
       return newItem;
     });
@@ -74,7 +96,7 @@ export class MessageDTOMapper implements IDTOMapper {
 
     dto.id = qbMessage._id;
     dto.dialogId = qbMessage.chat_dialog_id;
-    dto.message = qbMessage.message;
+    dto.message = MessageDTOMapper.formatMessage(qbMessage.message);
     dto.created_at = qbMessage.created_at;
     dto.date_sent = qbMessage.date_sent * 1000;
     dto.delivered_ids = qbMessage.delivered_ids ? qbMessage.delivered_ids : [];
@@ -82,6 +104,7 @@ export class MessageDTOMapper implements IDTOMapper {
 
     dto.recipient_id = qbMessage.recipient_id ? qbMessage.recipient_id : 0;
     dto.attachments = MessageDTOMapper.transformAttachment(
+      qbMessage.message,
       qbMessage.attachments ? qbMessage.attachments : [],
     );
     dto.read = qbMessage.read;
@@ -98,6 +121,36 @@ export class MessageDTOMapper implements IDTOMapper {
     return Promise.resolve(dto as TResult);
   }
 
+  public static formatMessage(qbMessage: string) {
+    if (
+      qbMessage.includes('MediaContentEntity') ||
+      qbMessage.includes('[Attachment]')
+    ) {
+      const messageParts = qbMessage.split('|');
+
+      // val messageBody = "${MediaContentEntity::class.java.simpleName}|$fileName|$uid|$fileMimeType"
+      // 0, 1, 2, 3
+      return messageParts[1] || '';
+    }
+
+    return qbMessage;
+  }
+
+  private static getMessageParts(qbMessage: string) {
+    if (
+      qbMessage.includes('MediaContentEntity') ||
+      qbMessage.includes('[Attachment]')
+    ) {
+      const messageParts = qbMessage.split('|');
+
+      // val messageBody = "${MediaContentEntity::class.java.simpleName}|$fileName|$uid|$fileMimeType"
+      // 0, 1, 2, 3
+      return messageParts;
+    }
+
+    return [];
+  }
+
   private static validateDTO(messageDTO: RemoteMessageDTO) {
     const messageDTOValidator: DtoValidator<RemoteMessageDTO> = {
       created_at(v: unknown): v is RemoteMessageDTO['created_at'] {

package/src/Data/source/remote/RemoteDataSource.ts

@@ -371,7 +371,7 @@ export class RemoteDataSource implements IRemoteDataSource {
       const resultMessage = new RemoteMessageDTO();
 
       resultMessage.id = message.id;
-      resultMessage.message = message.body;
+      resultMessage.message = MessageDTOMapper.formatMessage(message.body);
       resultMessage.markable = message.markable
         ? message.markable.toString()
         : '0';
@@ -394,6 +394,7 @@ export class RemoteDataSource implements IRemoteDataSource {
 
       // resultMessage.attachments = message.extension.attachments || [];
       resultMessage.attachments = MessageDTOMapper.transformAttachment(
+        message.body,
         message.extension.attachments ? message.extension.attachments : [],
       );
 

package/src/Domain/use_cases/ai/AIRephraseUseCase.ts

@@ -0,0 +1,87 @@
+// eslint-disable-next-line import/extensions
+import { AISource, IChatMessage } from '../../../Data/source/AISource';
+import { IUseCase } from '../base/IUseCase';
+import {
+  Tone,
+  toneToString,
+} from '../../../Presentation/components/UI/Dialogs/MessagesView/AIWidgets/Tone';
+
+export class AIRephraseUseCase implements IUseCase<void, string> {
+  private textToSend: string;
+
+  private tone: Tone;
+
+  private dialogMessages: IChatMessage[];
+
+  private servername: string;
+
+  private api: string;
+
+  private port: string;
+
+  private sessionToken: string;
+
+  private openAIModel: string;
+
+  constructor(
+    textToSend: string,
+    tone: Tone,
+    dialogMessages: IChatMessage[],
+    servername: string,
+    api: string,
+    port: string,
+    sessionToken: string,
+    openAIModel = 'gpt-3.5-turbo',
+  ) {
+    console.log('CONSTRUCTOR AIRephraseUseCase');
+    this.api = api;
+    this.openAIModel = openAIModel;
+    this.port = port;
+    this.sessionToken = sessionToken;
+    this.textToSend = textToSend;
+    this.tone = tone;
+    this.servername = servername;
+    this.dialogMessages = dialogMessages;
+  }
+
+  async execute(): Promise<string> {
+    console.log('execute AIRephraseUseCase');
+
+    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:"${this.textToSend}"`;
+
+    if (this.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(
+        this.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:"${
+        this.textToSend
+      }"`;
+    }
+    //
+
+    // return await AISource.getData(
+    //     prompt,
+    //     // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    //     context,
+    //     servername,
+    //     api,
+    //     port,
+    //     apiKeyOrSessionToken,
+    // ).then((data) => {
+    //     setTextFromWidgetToContent(data);
+    //
+    //     return data;
+    // });
+
+    //
+    return AISource.getData(
+      prompt,
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      this.dialogMessages,
+      this.servername,
+      this.api,
+      this.port,
+      this.sessionToken,
+      this.openAIModel,
+    );
+  }
+}

package/src/Domain/use_cases/ai/AIRephraseWithProxyUseCase.ts

@@ -0,0 +1,71 @@
+// eslint-disable-next-line import/extensions
+import { AISource, IChatMessage } from '../../../Data/source/AISource';
+import { IUseCase } from '../base/IUseCase';
+import {
+  Tone,
+  toneToString,
+} from '../../../Presentation/components/UI/Dialogs/MessagesView/AIWidgets/Tone';
+
+export class AIRephraseWithProxyUseCase implements IUseCase<void, string> {
+  private textToSend: string;
+
+  private tone: Tone;
+
+  private dialogMessages: IChatMessage[];
+
+  private servername: string;
+
+  private api: string;
+
+  private port: string;
+
+  private sessionToken: string;
+
+  private openAIModel: string;
+
+  constructor(
+    textToSend: string,
+    tone: Tone,
+    dialogMessages: IChatMessage[],
+    servername: string,
+    api: string,
+    port: string,
+    sessionToken: string,
+    openAIModel = 'gpt-3.5-turbo',
+  ) {
+    console.log('CONSTRUCTOR AIRephraseUseCase');
+    this.api = api;
+    this.openAIModel = openAIModel;
+    this.port = port;
+    this.sessionToken = sessionToken;
+    this.textToSend = textToSend;
+    this.tone = tone;
+    this.servername = servername;
+    this.dialogMessages = dialogMessages;
+  }
+
+  async execute(): Promise<string> {
+    console.log('execute AIRephraseUseCase');
+
+    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:"${this.textToSend}"`;
+
+    if (this.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(
+        this.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:"${
+        this.textToSend
+      }"`;
+    }
+
+    return AISource.getDataWithProxyServer(
+      prompt,
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      this.dialogMessages,
+      this.servername,
+      this.api,
+      this.port,
+      this.sessionToken,
+      this.openAIModel,
+    );
+  }
+}

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

@@ -191,7 +191,7 @@ const DialogsComponent: React.FC<DialogsProps> = ({
         if (Number.isNaN(dateInt)) {
           return formattedValue;
         }
-        formattedValue = getTimeShort24hFormat(dateInt);
+        formattedValue = getTimeShort24hFormat(dateInt * 1000);
       }
 
       return formattedValue;

package/src/Presentation/Views/Dialogs/useDialogsViewModel.ts

@@ -67,7 +67,10 @@ export default function useDialogsViewModel(
 
   const dialogUpdateHandler = (dialogInfo: DialogEventInfo) => {
     console.log('call dialogUpdateHandler in useDialogsViewModel');
-    if (dialogInfo.eventMessageType === EventMessageType.SystemMessage) {
+    if (
+      dialogInfo.eventMessageType === EventMessageType.SystemMessage
+      // || dialogInfo.eventMessageType === EventMessageType.RegularMessage
+    ) {
       if (dialogInfo.notificationTypes === NotificationTypes.UPDATE_DIALOG) {
         if (dialogInfo.messageInfo) {
           const { dialogId } = dialogInfo.messageInfo;

package/src/Presentation/components/UI/Dialogs/MessagesView/AIWidgets/AIMessageWidget.ts

@@ -4,6 +4,17 @@ import {
   FunctionTypeStringWithContextToString,
 } from '../../../../../Views/Base/BaseViewModel';
 
+export interface MessageWidgetProps {
+  // https://api.openai.com/v1/chat/completions'
+  // api: 'v1/chat/completions',
+  // servername: 'https://myproxy.com',
+  // https://func270519800.azurewebsites.net/api/TranslateTextToEng
+  servername: string;
+  api: string;
+  port: string;
+  apiKeyOrSessionToken: string;
+}
+
 export interface AIWidget {
   renderWidget: FunctionTypeJSXElement;
 }

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

@@ -1,26 +1,25 @@
 import { useState } from 'react';
-import { AIMessageWidget } from './AIMessageWidget';
+import { AIMessageWidget, MessageWidgetProps } from './AIMessageWidget';
 import AIWidgetIcon from '../../../svgs/Icons/AIWidgets/AIWidget';
 import ErrorMessageIcon from './ErrorMessageIcon';
 import { AISource, IChatMessage } from '../../../../../../Data/source/AISource';
 
-interface MessageWidgetProps {
-  // https://api.openai.com/v1/chat/completions'
-  // api: 'v1/chat/completions',
-  // servername: 'https://myproxy.com',
-  // https://func270519800.azurewebsites.net/api/TranslateTextToEng
-  servername: string;
-  api: string;
-  port: string;
-  sessionToken: string;
-  apiKey: string;
-}
+// interface MessageWidgetProps {
+//   // https://api.openai.com/v1/chat/completions'
+//   // api: 'v1/chat/completions',
+//   // servername: 'https://myproxy.com',
+//   // https://func270519800.azurewebsites.net/api/TranslateTextToEng
+//   servername: string;
+//   api: string;
+//   port: string;
+//   apiKeyOrSessionToken: string;
+//   apiKey: string;
+// }
 export default function UseDefaultAIAssistAnswerWidget({
   servername,
   api,
   port,
-  sessionToken,
-  apiKey,
+  apiKeyOrSessionToken,
 }: MessageWidgetProps): AIMessageWidget {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [errorMessage, setErrorMessage] = useState<string>('');
@@ -53,39 +52,20 @@ export default function UseDefaultAIAssistAnswerWidget({
     if (textToSend && textToSend.length > 0) {
       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}"`;
 
-      if (apiKey.length > 0) {
-        // eslint-disable-next-line no-return-await
-        return await AISource.getData(
-          prompt,
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-          context,
-          servername,
-          api,
-          port,
-          sessionToken,
-        ).then((data) => {
-          setTextFromWidgetToContent(data);
-
-          return data;
-        });
-      }
-
       // eslint-disable-next-line no-return-await
-      return await AISource.getDataWithProxyServer(
+      return await AISource.getData(
         prompt,
         // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
         context,
         servername,
         api,
         port,
-        sessionToken,
+        apiKeyOrSessionToken,
       ).then((data) => {
         setTextFromWidgetToContent(data);
 
         return data;
       });
-
-      // eslint-disable-next-line no-return-await
     }
 
     return '';

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

@@ -0,0 +1,79 @@
+import { useState } from 'react';
+import { AIMessageWidget, MessageWidgetProps } from './AIMessageWidget';
+import AIWidgetIcon from '../../../svgs/Icons/AIWidgets/AIWidget';
+import ErrorMessageIcon from './ErrorMessageIcon';
+import { AISource, IChatMessage } from '../../../../../../Data/source/AISource';
+
+// interface MessageWidgetProps {
+//   // https://api.openai.com/v1/chat/completions'
+//   // api: 'v1/chat/completions',
+//   // servername: 'https://myproxy.com',
+//   // https://func270519800.azurewebsites.net/api/TranslateTextToEng
+//   servername: string;
+//   api: string;
+//   port: string;
+//   apiKeyOrSessionToken: string;
+//   apiKey: string;
+// }
+export default function UseDefaultAIAssistAnswerWidgetWithProxy({
+  servername,
+  api,
+  port,
+  apiKeyOrSessionToken,
+}: MessageWidgetProps): AIMessageWidget {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [errorMessage, setErrorMessage] = useState<string>('');
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/no-empty-function
+  const fileToWidget = (file: File, context: IChatMessage[]): void => {};
+
+  const renderWidget = (): JSX.Element => {
+    if (errorMessage && errorMessage.length > 0) {
+      const errorsDescriptions:
+        | { title: string; action: () => void }[]
+        | undefined = [];
+
+      return (
+        <ErrorMessageIcon
+          errorMessageText={errorMessage}
+          errorsDescriptions={errorsDescriptions}
+        />
+      );
+    }
+
+    return <AIWidgetIcon applyZoom color="green" />;
+  };
+
+  const [textFromWidgetToContent, setTextFromWidgetToContent] = useState('');
+  const textToWidget = async (
+    textToSend: string,
+    context: IChatMessage[],
+  ): Promise<string> => {
+    if (textToSend && textToSend.length > 0) {
+      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}"`;
+
+      // eslint-disable-next-line no-return-await
+      return await AISource.getDataWithProxyServer(
+        prompt,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        context,
+        servername,
+        api,
+        port,
+        apiKeyOrSessionToken,
+      ).then((data) => {
+        setTextFromWidgetToContent(data);
+
+        return data;
+      });
+    }
+
+    return '';
+  };
+
+  return {
+    textToContent: textFromWidgetToContent,
+    renderWidget,
+    textToWidget,
+  };
+}

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

@@ -1,24 +1,24 @@
 import { useState } from 'react';
-import { AIMessageWidget } from './AIMessageWidget';
+import { AIMessageWidget, MessageWidgetProps } from './AIMessageWidget';
 import ErrorMessageIcon from './ErrorMessageIcon';
 import AIWidgetIcon from '../../../svgs/Icons/AIWidgets/AIWidget';
-import { Tone, toneToString } from './Tone';
-import { AISource, IChatMessage } from '../../../../../../Data/source/AISource';
+import { Tone } from './Tone';
+import { IChatMessage } from '../../../../../../Data/source/AISource';
+import { AIRephraseUseCase } from '../../../../../../Domain/use_cases/ai/AIRephraseUseCase';
 
-interface MessageWidgetProps {
-  servername: string;
-  api: string;
-  port: string;
-  sessionToken: string;
-  apiKey: string;
-}
+// interface MessageWidgetProps {
+//   servername: string;
+//   api: string;
+//   port: string;
+//   apiKeyOrSessionToken: string;
+//   apiKey: string;
+// }
 
 export default function UseDefaultAIRephraseMessageWidget({
   servername,
   api,
   port,
-  sessionToken,
-  apiKey,
+  apiKeyOrSessionToken,
 }: MessageWidgetProps): AIMessageWidget {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [errorMessage, setErrorMessage] = useState<string>('');
@@ -51,42 +51,24 @@ export default function UseDefaultAIRephraseMessageWidget({
     additionalSettings?: { [key: string]: any },
   ): Promise<string> => {
     if (textToSend && textToSend.length > 0) {
-      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}"`;
       const { tone } = additionalSettings || {};
 
-      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 as 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}"`;
-      }
-
-      if (apiKey.length > 0) {
-        // eslint-disable-next-line no-return-await
-        return await AISource.getData(
-          prompt,
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-          context,
-          servername,
-          api,
-          port,
-          sessionToken,
-        ).then((data) => {
-          setTextFromWidgetToContent(data);
+      const openAIModel = 'gpt-3.5-turbo';
 
-          return data;
-        });
-      }
-
-      // eslint-disable-next-line no-return-await
-      return await AISource.getDataWithProxyServer(
-        prompt,
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+      // AIRephraseWithProxyUseCase
+      const useCaseAIRephrase = new AIRephraseUseCase(
+        textToSend,
+        tone as Tone,
         context,
         servername,
         api,
         port,
-        sessionToken,
-      ).then((data) => {
+        apiKeyOrSessionToken,
+        openAIModel,
+      );
+
+      // eslint-disable-next-line no-return-await
+      return await useCaseAIRephrase.execute().then((data) => {
         setTextFromWidgetToContent(data);
 
         return data;