quickblox-react-ui-kit 0.2.2 → 0.2.3

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/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

@@ -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,
@@ -433,6 +440,9 @@ export default function useMessagesViewModel(
 
         messageToSend.attachments = attachments;
 
+        messageToSend.message = `MediaContentEntity|${messageBody}|${
+          fileMessage.uid
+        }|${fileMessage.type!.toString()}`;
         sendMessage(messageToSend);
         //
       })

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

@@ -15,6 +15,9 @@ import UseDefaultAIAssistAnswerWidget from '../../UI/Dialogs/MessagesView/AIWidg
 import UseDefaultAITranslateWidget from '../../UI/Dialogs/MessagesView/AIWidgets/UseDefaultAITranslateWidget';
 import UseDefaultAIRephraseMessageWidget from '../../UI/Dialogs/MessagesView/AIWidgets/UseDefaultAIRephraseMessageWidget';
 import { DefaultConfigurations } from '../../../../Data/DefaultConfigurations';
+import UseDefaultAIAssistAnswerWidgetWithProxy from '../../UI/Dialogs/MessagesView/AIWidgets/UseDefaultAIAssistAnswerWidgetWithProxy';
+import UseDefaultAITranslateWidgetWithProxy from '../../UI/Dialogs/MessagesView/AIWidgets/UseDefaultAITranslateWidgetWithProxy';
+import UseDefaultAIRephraseMessageWidgetWithProxy from '../../UI/Dialogs/MessagesView/AIWidgets/UseDefaultAIRephraseMessageWidgetWithProxy';
 
 type AIWidgetPlaceHolder = {
   enabled: boolean;
@@ -80,25 +83,28 @@ const QuickBloxUIKitDesktopLayout: React.FC<
       } else {
         const { apiKey } = QBConfig.configAIApi.AIAnswerAssistWidgetConfig;
         let token = '';
+        const proxyConfig: ProxyConfig =
+          QBConfig.configAIApi.AIAnswerAssistWidgetConfig.proxyConfig ||
+          DefaultConfigurations.getDefaultProxyConfig();
 
         if (apiKey) {
           token = apiKey;
+          defaultAIAnswerToMessageWidget = UseDefaultAIAssistAnswerWidget({
+            ...proxyConfig,
+            apiKeyOrSessionToken: token,
+          });
         } else {
           token =
             QBConfig.configAIApi.AIAnswerAssistWidgetConfig.proxyConfig
               .sessionToken ||
             sessionToken ||
             '';
+          defaultAIAnswerToMessageWidget =
+            UseDefaultAIAssistAnswerWidgetWithProxy({
+              ...proxyConfig,
+              apiKeyOrSessionToken: token,
+            });
         }
-        const proxyConfig: ProxyConfig =
-          QBConfig.configAIApi.AIAnswerAssistWidgetConfig.proxyConfig ||
-          DefaultConfigurations.getDefaultProxyConfig();
-
-        defaultAIAnswerToMessageWidget = UseDefaultAIAssistAnswerWidget({
-          ...proxyConfig,
-          sessionToken: token,
-          apiKey,
-        });
       }
     }
   };
@@ -117,25 +123,27 @@ const QuickBloxUIKitDesktopLayout: React.FC<
       } else {
         const { apiKey } = QBConfig.configAIApi.AITranslateWidgetConfig;
         let token = '';
+        const proxyConfig: ProxyConfig =
+          QBConfig.configAIApi.AITranslateWidgetConfig.proxyConfig ||
+          DefaultConfigurations.getDefaultProxyConfig();
 
         if (apiKey) {
           token = apiKey;
+          defaultAITranslateWidget = UseDefaultAITranslateWidget({
+            ...proxyConfig,
+            apiKeyOrSessionToken: token,
+          });
         } else {
           token =
             QBConfig.configAIApi.AITranslateWidgetConfig.proxyConfig
               .sessionToken ||
             sessionToken ||
             '';
+          defaultAITranslateWidget = UseDefaultAITranslateWidgetWithProxy({
+            ...proxyConfig,
+            apiKeyOrSessionToken: token,
+          });
         }
-        const proxyConfig: ProxyConfig =
-          QBConfig.configAIApi.AITranslateWidgetConfig.proxyConfig ||
-          DefaultConfigurations.getDefaultProxyConfig();
-
-        defaultAITranslateWidget = UseDefaultAITranslateWidget({
-          ...proxyConfig,
-          sessionToken: token,
-          apiKey,
-        });
       }
     }
   };
@@ -154,25 +162,28 @@ const QuickBloxUIKitDesktopLayout: React.FC<
       } else {
         const { apiKey } = QBConfig.configAIApi.AIRephraseWidgetConfig;
         let token = '';
+        const proxyConfig: ProxyConfig =
+          QBConfig.configAIApi.AIRephraseWidgetConfig.proxyConfig ||
+          DefaultConfigurations.getDefaultProxyConfig();
 
         if (apiKey) {
           token = apiKey;
+          defaultAIEditMessageWidget = UseDefaultAIRephraseMessageWidget({
+            ...proxyConfig,
+            apiKeyOrSessionToken: token,
+          });
         } else {
           token =
             QBConfig.configAIApi.AIRephraseWidgetConfig.proxyConfig
               .sessionToken ||
             sessionToken ||
             '';
+          defaultAIEditMessageWidget =
+            UseDefaultAIRephraseMessageWidgetWithProxy({
+              ...proxyConfig,
+              apiKeyOrSessionToken: token,
+            });
         }
-        const proxyConfig: ProxyConfig =
-          QBConfig.configAIApi.AIRephraseWidgetConfig.proxyConfig ||
-          DefaultConfigurations.getDefaultProxyConfig();
-
-        defaultAIEditMessageWidget = UseDefaultAIRephraseMessageWidget({
-          ...proxyConfig,
-          sessionToken: token,
-          apiKey,
-        });
       }
     }
   };

package/src/Presentation/components/providers/QuickBloxUIKitProvider/QuickBloxUIKitProvider.tsx

@@ -291,7 +291,7 @@ function QuickBloxUIKitProvider({
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   // storage.SYNC_DIALOGS_USE_CASE.execute(() => {});
 
-  // todo: MUST use sessionToken or login/pass to re-init
+  // todo: MUST use apiKeyOrSessionToken or login/pass to re-init
   // const remoteDataSourceMock: RemoteDataSource =
   //   storage.REMOTE_DATA_SOURCE as RemoteDataSource;
   // // remoteDataSourceMock