quickblox-react-ui-kit 0.2.1 → 0.2.3

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;

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

@@ -0,0 +1,86 @@
+import { useState } from 'react';
+import { AIMessageWidget, MessageWidgetProps } from './AIMessageWidget';
+import ErrorMessageIcon from './ErrorMessageIcon';
+import AIWidgetIcon from '../../../svgs/Icons/AIWidgets/AIWidget';
+import { Tone } from './Tone';
+import { IChatMessage } from '../../../../../../Data/source/AISource';
+import { AIRephraseWithProxyUseCase } from '../../../../../../Domain/use_cases/ai/AIRephraseWithProxyUseCase';
+
+// interface MessageWidgetProps {
+//   servername: string;
+//   api: string;
+//   port: string;
+//   apiKeyOrSessionToken: string;
+//   apiKey: string;
+// }
+
+export default function UseDefaultAIRephraseMessageWidgetWithProxy({
+  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[],
+    additionalSettings?: { [key: string]: any },
+  ): Promise<string> => {
+    if (textToSend && textToSend.length > 0) {
+      const { tone } = additionalSettings || {};
+
+      const openAIModel = 'gpt-3.5-turbo';
+
+      const useCaseAIRephrase = new AIRephraseWithProxyUseCase(
+        textToSend,
+        tone as Tone,
+        context,
+        servername,
+        api,
+        port,
+        apiKeyOrSessionToken,
+        openAIModel,
+      );
+
+      // eslint-disable-next-line no-return-await
+      return await useCaseAIRephrase.execute().then((data) => {
+        setTextFromWidgetToContent(data);
+
+        return data;
+      });
+    }
+
+    //
+    return '';
+  };
+
+  return {
+    textToContent: textFromWidgetToContent,
+    renderWidget,
+    textToWidget,
+  };
+}

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

@@ -1,26 +1,25 @@
 import { useState } from 'react';
 import AIWidgetIcon from '../../../svgs/Icons/AIWidgets/AIWidget';
 import ErrorMessageIcon from './ErrorMessageIcon';
-import { AIMessageWidget } from './AIMessageWidget';
+import { AIMessageWidget, MessageWidgetProps } from './AIMessageWidget';
 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 UseDefaultAITranslateWidget({
   servername,
   api,
   port,
-  sessionToken,
-  apiKey,
+  apiKeyOrSessionToken,
 }: MessageWidgetProps): AIMessageWidget {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [errorMessage, setErrorMessage] = useState<string>('');
@@ -62,32 +61,15 @@ export default function UseDefaultAITranslateWidget({
         } and give me just only translated text. Text to translate is: "${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);
 

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

@@ -0,0 +1,88 @@
+import { useState } from 'react';
+import AIWidgetIcon from '../../../svgs/Icons/AIWidgets/AIWidget';
+import ErrorMessageIcon from './ErrorMessageIcon';
+import { AIMessageWidget, MessageWidgetProps } from './AIMessageWidget';
+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 UseDefaultAITranslateWidgetWithProxy({
+  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[],
+    additionalSettings?: { [key: string]: any },
+  ): Promise<string> => {
+    if (textToSend && textToSend.length > 0) {
+      // eslint-disable-next-line no-return-await
+      let prompt = `Please, translate the next text in english and give me just only translated text. Text to translate is: "${textToSend}"`;
+      const { language } = additionalSettings || {};
+
+      if (language) {
+        prompt = `Please, translate the next text in ${
+          language as string
+        } and give me just only translated text. Text to translate is: "${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/InComingMessage/InComingMessage.scss

@@ -31,7 +31,7 @@
   box-sizing: border-box;
 }
 .incoming-text-message {
-  background: var(--primary-primary-a-100, #ffffff);
+  background: var(--secondary-background);
   padding: 0px 16px 8px 8px;
   display: flex;
   flex-direction: row;
@@ -241,7 +241,7 @@
   position: relative;
 }
 .chat-bubble-background {
-  background: var(--secondary-secondary-50, #e4e6e8);
+  background: var(--incoming-background);
   border-radius: 22px 22px 22px 0px;
   padding: 8px 12px 8px 12px;
   display: flex;

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

@@ -61,6 +61,8 @@ import SmirkIcon from '../../svgs/Icons/AIWidgets/SmirkIcon';
 import PerformingArtsIcon from '../../svgs/Icons/AIWidgets/PerformingArtsIcon';
 import { FunctionTypeVoidToVoid } from '../../../../Views/Base/BaseViewModel';
 import { IChatMessage } from '../../../../../Data/source/AISource';
+import AIWidgetActions from './AIWidgets/AIWidgetActions/AIWidgetActions';
+import ToneIcon from '../../svgs/Icons/Actions/Tone';
 // import ToneIcon from '../../svgs/Icons/Actions/Tone';
 // import AIWidgetActions from './AIWidgets/AIWidgetActions/AIWidgetActions';
 
@@ -1183,23 +1185,23 @@ const MessagesView: React.FC<HeaderDialogsMessagesProps> = ({
                 placeholder="enter text to send"
               />
             </div>
-            {/* <div className="right"> */}
-            {/*  {AIRephrase && ( */}
-            {/*    <div className="icon"> */}
-            {/*      <AIWidgetActions */}
-            {/*        widgetToRender={ */}
-            {/*          <ToneIcon */}
-            {/*            width="24" */}
-            {/*            height="24" */}
-            {/*            applyZoom */}
-            {/*            color={theme ? theme.mainText() : 'var(--main-text)'} */}
-            {/*          /> */}
-            {/*        } */}
-            {/*        items={getAIEditingMessagesItems()} */}
-            {/*      /> */}
-            {/*    </div> */}
-            {/*  )} */}
-            {/* </div> */}
+            <div className="right">
+              {AIRephrase && (
+                <div className="icon">
+                  <AIWidgetActions
+                    widgetToRender={
+                      <ToneIcon
+                        width="24"
+                        height="24"
+                        applyZoom
+                        color={theme ? theme.mainText() : 'var(--main-text)'}
+                      />
+                    }
+                    items={getAIEditingMessagesItems()}
+                  />
+                </div>
+              )}
+            </div>
           </div>
         )}
 

package/src/Presentation/components/UI/Dialogs/MessagesView/VideoAttachmentComponent/VideoAttachmentComponent.scss

@@ -1,7 +1,11 @@
 .video-body{
   // border: 1px solid red;
-  // max-height: 300px;
-  // max-width: 100%;
+  //max-height: 300px;
+  //max-width: 100%;
+  max-width: 240px;
+  max-height: 130px;
+  min-width: 240px;
+  width: 240px;
   padding: 0;
   border-radius: 4px;
 }

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

@@ -295,7 +295,7 @@ export default function useMessagesViewModel(
   const sendTypingTextMessage = () => {
     console.log('call release in MessagesViewModelWithMockUseCase');
     userTypingMessageUseCase.execute().catch((reason) => {
-      const errorMessage = stringifyError(reason);
+      const errorMessage: string = stringifyError(reason);
 
       console.log('have exception in sendTypingTextMessage: ', errorMessage);
 
@@ -344,7 +344,7 @@ export default function useMessagesViewModel(
     sendTextMessageUseCase
       .execute()
       .catch((reason) => {
-        const errorMessage = stringifyError(reason);
+        const errorMessage: string = stringifyError(reason);
 
         console.log(
           'exception in sendMessage in useMessagesViewModel',
@@ -399,12 +399,18 @@ export default function useMessagesViewModel(
       .then((fileMessage: FileEntity) => {
         console.log(JSON.stringify(fileMessage));
         // '[attachment]'
+        const recipientId =
+          dialog.type === DialogType.private
+            ? (dialog as PrivateDialogEntity).participantId
+            : currentUserId;
+
+        // eslint-disable-next-line promise/always-return
+        const messageBody = fileMessage.name || '[attachment]';
         const messageToSend: MessageEntity =
           Stubs.createMessageEntityWithParams(
             '',
             dialog.id,
-            // eslint-disable-next-line promise/always-return
-            fileMessage.name || '[attachment]',
+            messageBody,
             Date.now().toString(),
             Date.now(),
             Date.now().toString(),
@@ -412,7 +418,8 @@ export default function useMessagesViewModel(
             [],
             1,
             currentUserId,
-            currentUserId,
+            // eslint-disable-next-line promise/always-return
+            recipientId,
             [],
             '',
             DialogType.group,
@@ -421,16 +428,21 @@ export default function useMessagesViewModel(
         messageToSend.dialogType = dialog.type;
         const attachments: ChatMessageAttachmentEntity[] = [
           {
-            id: fileMessage.uid,
+            id: fileMessage.id as string,
+            uid: fileMessage.uid,
             type: fileMessage.type!,
             file: fileMessage,
             name: fileMessage.name,
             size: fileMessage.size,
+            url: fileMessage.url,
           },
         ];
 
         messageToSend.attachments = attachments;
 
+        messageToSend.message = `MediaContentEntity|${messageBody}|${
+          fileMessage.uid
+        }|${fileMessage.type!.toString()}`;
         sendMessage(messageToSend);
         //
       })