quickblox-react-ui-kit 0.2.3 → 0.2.5

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

@@ -2,7 +2,8 @@ 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';
+import { IChatMessage } from '../../../../../../Data/source/AISource';
+import { AITranslateWithProxyUseCase } from '../../../../../../Domain/use_cases/ai/AITranslateWithProxyUseCase';
 
 // interface MessageWidgetProps {
 //   // https://api.openai.com/v1/chat/completions'
@@ -52,25 +53,25 @@ export default function UseDefaultAITranslateWidgetWithProxy({
   ): 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 || {};
+      //
+      const openAIModel = 'gpt-3.5-turbo';
 
-      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,
+      // AIRephraseWithProxyUseCase
+      const useCaseAITranslate = new AITranslateWithProxyUseCase(
+        textToSend,
         // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        language,
         context,
         servername,
         api,
         port,
         apiKeyOrSessionToken,
-      ).then((data) => {
+        openAIModel,
+      );
+
+      // eslint-disable-next-line no-return-await
+      return await useCaseAITranslate.execute().then((data) => {
         setTextFromWidgetToContent(data);
 
         return data;

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

@@ -17,7 +17,7 @@ const AudioAttachmentComponent: React.FC<AudioAttachmentComponentProps> = ({
         <source src={audioFile.url} type="audio/mpeg" />
         <source src={audioFile.url} type="audio/ogg" />
       </audio>
-      <a href={audioFile.url} download>
+      <a href={audioFile.url} target="_blank" download rel="noreferrer">
         Download
       </a>
     </div>

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

@@ -0,0 +1,76 @@
+.default-attachment-component-container,
+.default-attachment-component-container * {
+  box-sizing: border-box;
+}
+.default-attachment-component-container {
+  // background: var(--incoming-background, #e4e6e8);
+  border-radius: 22px 22px 22px 0px;
+  padding: 8px 16px 8px 1px;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  position: relative;
+
+  &--file-wrapper {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: stretch;
+    flex-shrink: 0;
+    position: relative;
+
+    &--placeholder {
+      flex-shrink: 0;
+      width: 32px;
+      height: 32px;
+      position: static;
+
+      &__bg {
+        background: var(--field-border, #90979f);
+        border-radius: 8px;
+        width: 32px;
+        height: 32px;
+        position: absolute;
+        left: 0px;
+        top: 0px;
+      }
+
+      &__icon {
+        border-radius: 4px;
+        padding: 4px;
+        display: flex;
+        flex-direction: row;
+        gap: 0px;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        position: absolute;
+        left: 4px;
+        top: 4px;
+      }
+    }
+
+    &--file-d {
+      color: var(--secondary-elements, #202f3e);
+      text-align: left;
+      font: 400 14px/20px "Roboto", sans-serif;
+      position: relative;
+    }
+  }
+}
+
+
+
+.media-text-document {
+  align-self: stretch;
+  flex: 1;
+  position: relative;
+  overflow: visible;
+}
+

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import './DefaultAttachmentComponent.scss';
+import TextDocument from '../../../svgs/Icons/Media/TextDocument';
+
+type DefaultAttachmentComponentProps = {
+  fileName: string;
+  fileUrl: string;
+};
+// eslint-disable-next-line react/function-component-definition
+const DefaultAttachmentComponent: React.FC<DefaultAttachmentComponentProps> = ({
+  fileName,
+  fileUrl,
+}: DefaultAttachmentComponentProps) => {
+  return (
+    <div>
+      <div className="default-attachment-component-container">
+        <div className="default-attachment-component-container--file-wrapper">
+          <div className="default-attachment-component-container--file-wrapper--placeholder">
+            <div className="default-attachment-component-container--file-wrapper--placeholder__bg" />
+            <div className="default-attachment-component-container--file-wrapper--placeholder__icon">
+              <a href={fileUrl} target="_blank" download rel="noreferrer">
+                <TextDocument
+                  width="16"
+                  height="16"
+                  applyZoom
+                  color="var(--incoming-background)"
+                />
+              </a>
+            </div>
+          </div>
+          <div className="default-attachment-component-container--file-wrapper__file-d">
+            {fileName}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DefaultAttachmentComponent;

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

@@ -0,0 +1,26 @@
+.error-toast,
+.error-toast * {
+  box-sizing: border-box;
+}
+.error-toast {
+  background: var(--color-background-overlay);
+  border-radius: 4px;
+  opacity: 0.6000000238418579;
+  padding: 4px 12px 4px 12px;
+  // margin-top: 36px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: flex-start;
+  justify-content: flex-start;
+  position: relative;
+}
+.translation-failed-try-again {
+  color: var(--color-background);
+  text-align: left;
+  font: 500 12px/16px "Roboto", sans-serif;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import './ErrorToast.scss';
+
+type ErrorToastProps = {
+  messageText: string;
+  // displayTimeout: number;
+};
+
+// eslint-disable-next-line react/function-component-definition
+export const ErrorToast: React.FC<ErrorToastProps> = ({
+  messageText,
+}: // displayTimeout,
+ErrorToastProps) => {
+  return (
+    // <div>
+    //   {messageText} - {displayTimeout}
+    // </div>
+
+    <div className="error-toast">
+      <div className="translation-failed-try-again">
+        {messageText} Try again.
+      </div>
+    </div>
+  );
+};

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

@@ -12,12 +12,14 @@ const ImageAttachmentComponent: React.FC<ImageAttachmentComponentProps> = ({
 }: ImageAttachmentComponentProps) => {
   return (
     <div>
-      <img
-        className="image-body"
-        key={imageFile.id}
-        src={imageFile.url}
-        alt={imageFile.name || 'attached image'}
-      />
+      <a href={imageFile.url} download="file" target="_blank" rel="noreferrer">
+        <img
+          className="image-body"
+          key={imageFile.id}
+          src={imageFile.url}
+          alt={imageFile.name || 'attached image'}
+        />
+      </a>
     </div>
   );
 };

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

@@ -1,7 +1,13 @@
 import React from 'react';
 import './AvatarContentIncomingUser.scss';
 
+export interface AvatarContentIncomingUserProps {
+  // eslint-disable-next-line react/no-unused-prop-types
+  userId: number;
+}
+
 export default function AvatarContentIncomingUser() {
+  // props: AvatarContentIncomingUserProps,
   return (
     <div className="avatar-wrap">
       <div className="avatar">

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

@@ -255,7 +255,7 @@
   max-width: 480px;
 }
 .message-in-a-single-line {
-  color: var(--secondary-secondary-900, #0b121b);
+  color: var(--main-text);
   text-align: left;
   font: var(--body-body-medium, 400 14px/20px "Roboto", sans-serif);
   position: relative;
@@ -289,7 +289,7 @@
   font: var(--label-label-small, 500 11px/16px "Roboto", sans-serif);
   position: relative;
 }
-.icon {
+.icon-translate {
   border-radius: 4px;
   display: flex;
   flex-direction: row;
@@ -349,16 +349,15 @@
 }
 
 .ai-translate-action {
-  color: var(--secondary-secondary-300, #636d78);
+  color: var(--tertiary-elements);
   text-align: right;
-  font: var(--label-label-small, 500 11px/16px "Roboto", sans-serif);
+  font: 500 11px/16px "Roboto", sans-serif;
   position: relative;
-  cursor: pointer;
 }
 
 
 // --- AIAssist
-.assist-answer {
+.ai-assist-answer {
   display: flex;
   flex-direction: row;
   gap: 10px;
@@ -367,7 +366,6 @@
   align-self: stretch;
   flex-shrink: 0;
   position: relative;
-  cursor: pointer;
 }
 .icon {
   border-radius: 4px;