quickblox-react-ui-kit 0.2.3 → 0.2.4

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/InComingMessage/InComingMessage.scss

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

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

@@ -15,30 +15,28 @@ import ImageFile from '../../../svgs/Icons/Media/ImageFile';
 import ColumnContainer from '../../../../containers/ColumnContainer/ColumnContainer';
 import { HighLightLink, messageHasUrls } from '../HighLightLink/HighLightLink';
 import { AIMessageWidget } from '../AIWidgets/AIMessageWidget';
-import { loopToLimitTokens } from '../../../../../../utils/utils';
 import LoaderComponent from '../../../Placeholders/LoaderComponent/LoaderComponent';
-import { IChatMessage } from '../../../../../../Data/source/AISource';
-import AssistAnswer from '../../../svgs/Icons/Actions/AssistAnswer';
 import AIWidgetActions from '../AIWidgets/AIWidgetActions/AIWidgetActions';
 import TranslateIcon from '../../../svgs/Icons/Media/Translate';
 import AvatarContentIncomingUser from './AvatarContentIncomingUser/AvatarContentIncomingUser';
 import { DefaultConfigurations } from '../../../../../../Data/DefaultConfigurations';
+import useQbInitializedDataContext from '../../../../providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
+import { AIUtils } from '../../../../../../utils/utils';
+import BotIcon from '../../../svgs/Icons/AIWidgets/BotIcon/BotIcon';
 
 export function InComingMessage(props: {
   theme: UiKitTheme | undefined;
   senderName: string | undefined;
   message: MessageEntity;
-  // element: JSX.Element;
-  onLoader: () => void;
-  // renderWidget: JSX.Element | undefined;
+  onStartLoader: () => void;
+  onStopLoader: () => void;
+  onErrorToast: (messageError: string) => void;
   currentUserId?: number;
   messagesToView: MessageEntity[];
   AITranslation?: AIMessageWidget;
   AIAnswerToMessage?: AIMessageWidget;
-  // index?: number;
-  // updateData?: (index: number, text: string) => void;
-  // translationDATA?: Record<number, string>;
 }) {
+  const currentContext = useQbInitializedDataContext();
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [haveHover, setHaveHover] = useState(false);
   // const [openMenu, setOpenMenu] = useState(false);
@@ -47,21 +45,13 @@ export function InComingMessage(props: {
     useState<boolean>(false);
   const [widgetTextContent, setWidgetTextContent] = useState<string>('');
   const [originalTextMessage, setOriginalTextMessage] = useState<boolean>(true);
-  // const [errorAITranslate, setErrorAITranslate] = useState<boolean>(false);
 
-  // useEffect(() => {
-  //   setWaitAIWidget(false);
-  //   if (
-  //     props.AIRephraseMessage?.textToContent &&
-  //     props.AIRephraseMessage?.textToContent.length > 0
-  //   ) {
-  //     setMessageTextState(props.AIRephraseMessage?.textToContent);
-  //     setWidgetTextContent(props.AIRephraseMessage?.textToContent);
-  //     setTimeout(() => {
-  //       setWidgetTextContent('');
-  //     }, 45 * 1000);
-  //   }
-  // }, [props.AIRephraseMessage?.textToContent]);
+  const maxTokensForAITranslate =
+    currentContext.InitParams.qbConfig.configAIApi.AITranslateWidgetConfig
+      .maxTokens;
+  const maxTokensForAnswerAssist =
+    currentContext.InitParams.qbConfig.configAIApi.AIAnswerAssistWidgetConfig
+      .maxTokens;
 
   useEffect(() => {
     setWaitAIWidget(false);
@@ -69,16 +59,6 @@ export function InComingMessage(props: {
   //
   useEffect(() => {
     setWaitAIWidget(false);
-    // if (
-    //   props.AIAnswerToMessage?.textToContent &&
-    //   props.AIAnswerToMessage?.textToContent.length > 0
-    // ) {
-    //   // setMessageTextState(props.AIAnswerToMessage?.textToContent);
-    //   setWidgetTextContent(props.AIAnswerToMessage?.textToContent);
-    //   setTimeout(() => {
-    //     setWidgetTextContent('');
-    //   }, 45 * 1000);
-    // }
   }, [props.AIAnswerToMessage?.textToContent]);
 
   const messageContentRender = (
@@ -172,32 +152,6 @@ export function InComingMessage(props: {
     return messageContent;
   };
 
-  const messageEntitiesToIChatMessageCollection = (
-    messageEntities: MessageEntity[],
-    currentUserId?: number,
-  ): 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;
-  };
-
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   async function sendMessageToTranslate(
     message: MessageEntity,
@@ -206,31 +160,36 @@ export function InComingMessage(props: {
     AITranslation?: AIMessageWidget,
     selectedLanguage?: string,
   ) {
-    // setErrorAITranslate(false);
     if (!waitAITranslateWidget) {
       setWaitAITranslateWidget(true);
       await AITranslation?.textToWidget(
         message.message,
-        messageEntitiesToIChatMessageCollection(messagesToView, currentUserId),
+        AIUtils.messageEntitiesToIChatMessageCollection(
+          messagesToView,
+          currentUserId,
+          maxTokensForAITranslate,
+        ),
         {
           language:
             selectedLanguage ||
-            DefaultConfigurations.getDefaultLanguageForAITranslate(),
-          //     language: DefaultConfigurations.getDefaultLanguageForAITranslate()
-          // selectedLanguage ||
-          // QBConfig.configAIApi.AITranslateWidgetConfig.defaultLanguage ||
-          // 'English',
+            DefaultConfigurations.getDefaultLanguageForAITranslate(
+              currentContext.InitParams.qbConfig.configAIApi
+                .AITranslateWidgetConfig,
+            ),
         },
       )
         .then((textTranslate) => {
           // eslint-disable-next-line promise/always-return
           setWidgetTextContent(textTranslate || '');
+          // eslint-disable-next-line promise/always-return
+          if (textTranslate === 'Translation failed.') {
+            props.onErrorToast('Translation failed.');
+          }
           setWaitAITranslateWidget(false);
           setOriginalTextMessage(false);
         })
         .catch(() => {
-          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-          // setErrorAITranslate(true);
+          props.onErrorToast('Translation failed.');
           setWaitAITranslateWidget(false);
           setOriginalTextMessage(true);
         });
@@ -249,12 +208,29 @@ export function InComingMessage(props: {
   ) {
     if (!waitAIWidget) {
       setWaitAIWidget(true);
-      props.onLoader();
+      props.onStartLoader();
       // eslint-disable-next-line @typescript-eslint/no-unsafe-call
       AIAnswerToMessage?.textToWidget(
         message.message,
-        messageEntitiesToIChatMessageCollection(messagesToView, currentUserId),
-      );
+        AIUtils.messageEntitiesToIChatMessageCollection(
+          messagesToView,
+          currentUserId,
+          maxTokensForAnswerAssist,
+        ),
+      )
+        .then((answerText) => {
+          // eslint-disable-next-line promise/always-return
+          if (answerText === 'Assist failed.') {
+            props.onErrorToast('Assist failed.');
+          }
+          setWaitAIWidget(false);
+          props.onStopLoader();
+        })
+        .catch(() => {
+          props.onErrorToast('Assist failed.');
+          setWaitAIWidget(false);
+          props.onStopLoader();
+        });
     }
   }
 
@@ -270,17 +246,23 @@ export function InComingMessage(props: {
           <div className="caption2">
             <div
               className="ai-translate-action"
+              style={{
+                cursor: !waitAITranslateWidget ? 'pointer' : '',
+              }}
               onClick={() => {
-                if (originalTextMessage) {
-                  sendMessageToTranslate(
-                    mc,
-                    messagesToView,
-                    currentUserId,
-                    AITranslate,
-                  );
-                } else {
-                  setOriginalTextMessage(true);
-                  setWidgetTextContent('');
+                console.log('click translate....');
+                if (!waitAITranslateWidget) {
+                  if (originalTextMessage) {
+                    sendMessageToTranslate(
+                      mc,
+                      messagesToView,
+                      currentUserId,
+                      AITranslate,
+                    );
+                  } else {
+                    setOriginalTextMessage(true);
+                    setWidgetTextContent('');
+                  }
                 }
               }}
             >
@@ -288,8 +270,14 @@ export function InComingMessage(props: {
             </div>
           </div>
           <AIWidgetActions
+            disabled={!waitAITranslateWidget}
             widgetToRender={
-              <div className="icon">
+              <div
+                className="icon-translate"
+                style={{
+                  cursor: !waitAITranslateWidget ? 'pointer' : '',
+                }}
+              >
                 <TranslateIcon
                   width="16"
                   height="16"
@@ -298,11 +286,15 @@ export function InComingMessage(props: {
                 />
               </div>
             }
-            items={DefaultConfigurations.getAdditionalLanguagesForAITranslate().map(
-              (item) => {
-                return {
-                  title: item,
-                  action: () => {
+            items={DefaultConfigurations.getAdditionalLanguagesForAITranslate(
+              currentContext.InitParams.qbConfig.configAIApi
+                .AITranslateWidgetConfig,
+            ).map((item) => {
+              return {
+                title: item,
+                action: () => {
+                  console.log('click translate....');
+                  if (!waitAITranslateWidget) {
                     sendMessageToTranslate(
                       mc,
                       messagesToView,
@@ -310,204 +302,12 @@ export function InComingMessage(props: {
                       AITranslate,
                       item,
                     );
-                  },
-                };
-              },
-            )}
-            // items={[
-            //   {
-            //     title: 'English',
-            //     // eslint-disable-next-line @typescript-eslint/no-empty-function
-            //     action: () => {
-            //       sendMessageToTranslate(
-            //         mc,
-            //         messagesToView,
-            //         currentUserId,
-            //         AITranslation,
-            //         'English',
-            //       );
-            //     },
-            //   },
-            //   {
-            //     title: 'Ukrainian',
-            //     action: () => {
-            //       sendMessageToTranslate(
-            //         mc,
-            //         messagesToView,
-            //         currentUserId,
-            //         AITranslation,
-            //         'Ukrainian',
-            //       );
-            //     },
-            //   },
-            //   {
-            //     title: 'Spanish',
-            //     action: () => {
-            //       sendMessageToTranslate(
-            //         mc,
-            //         messagesToView,
-            //         currentUserId,
-            //         AITranslation,
-            //         'Spanish',
-            //       );
-            //     },
-            //   },
-            //   {
-            //     title: 'Portuguese',
-            //     action: () => {
-            //       sendMessageToTranslate(
-            //         mc,
-            //         messagesToView,
-            //         currentUserId,
-            //         AITranslation,
-            //         'Portuguese',
-            //       );
-            //     },
-            //   },
-            //   {
-            //     title: 'French',
-            //     action: () => {
-            //       sendMessageToTranslate(
-            //         mc,
-            //         messagesToView,
-            //         currentUserId,
-            //         AITranslation,
-            //         'French',
-            //       );
-            //     },
-            //   },
-            //   // {
-            //   //   title: 'German',
-            //   //   action: () => {},
-            //   // },
-            // ]}
+                  }
+                },
+              };
+            })}
           />
         </div>
-        // <div className="widget-ai-translate-with-choice-languages-container">
-        //   <div
-        //     className="widget-ai-translate-with-choice-languages-container--default-language"
-        //     onClick={() => {
-        //       if (originalTextMessage) {
-        //         sendMessageToTranslate(
-        //           mc,
-        //           messagesToView,
-        //           currentUserId,
-        //           AITranslation,
-        //         );
-        //       } else {
-        //         setOriginalTextMessage(true);
-        //         setWidgetTextContent('');
-        //       }
-        //     }}
-        //   >
-        //     {originalTextMessage ? 'Show translation' : 'Show original'}
-        //   </div>
-        //   <div className="widget-ai-translate-with-choice-languages-container--separator">
-        //     {'      '}
-        //   </div>
-        //   <div className="widget-ai-translate-with-choice-languages-container--select-language">
-        //     <AIWidgetActions
-        //       widgetToRender={
-        //         <AIWidgetIcon
-        //           applyZoom
-        //           color="var(--main-elements)"
-        //           width="16"
-        //           height="16"
-        //         />
-        //       }
-        //       items={[
-        //         {
-        //           title: 'English',
-        //           // eslint-disable-next-line @typescript-eslint/no-empty-function
-        //           action: () => {
-        //             sendMessageToTranslate(
-        //               mc,
-        //               messagesToView,
-        //               currentUserId,
-        //               AITranslation,
-        //               'English',
-        //             );
-        //           },
-        //         },
-        //         {
-        //           title: 'Ukrainian',
-        //           action: () => {
-        //             sendMessageToTranslate(
-        //               mc,
-        //               messagesToView,
-        //               currentUserId,
-        //               AITranslation,
-        //               'Ukrainian',
-        //             );
-        //           },
-        //         },
-        //         {
-        //           title: 'Spanish',
-        //           action: () => {
-        //             sendMessageToTranslate(
-        //               mc,
-        //               messagesToView,
-        //               currentUserId,
-        //               AITranslation,
-        //               'Spanish',
-        //             );
-        //           },
-        //         },
-        //         {
-        //           title: 'Portuguese',
-        //           action: () => {
-        //             sendMessageToTranslate(
-        //               mc,
-        //               messagesToView,
-        //               currentUserId,
-        //               AITranslation,
-        //               'Portuguese',
-        //             );
-        //           },
-        //         },
-        //         {
-        //           title: 'French',
-        //           action: () => {
-        //             sendMessageToTranslate(
-        //               mc,
-        //               messagesToView,
-        //               currentUserId,
-        //               AITranslation,
-        //               'French',
-        //             );
-        //           },
-        //         },
-        //         // {
-        //         //   title: 'German',
-        //         //   action: () => {},
-        //         // },
-        //       ]}
-        //     />
-        //   </div>
-        //   {waitAITranslateWidget && (
-        //     <div
-        //       className="widget-ai-translate-with-choice-languages-container--separator"
-        //       style={{
-        //         height: '16px',
-        //         width: '16px',
-        //       }}
-        //     >
-        //       <LoaderComponent
-        //         width="16"
-        //         height="16"
-        //         color="var(--color-background-info)"
-        //       />
-        //     </div>
-        //   )}
-        //   {errorAITranslate && (
-        //     <div className="widget-ai-translate-with-choice-languages-container--separator">
-        //       <ErrorMessageIcon
-        //         errorMessageText="OpenAI server does not response"
-        //         errorsDescriptions={[]}
-        //       />
-        //     </div>
-        //   )}
-        // </div>
       )
     );
   };
@@ -520,9 +320,14 @@ export function InComingMessage(props: {
   ) => {
     return (
       AIAnswer && (
-        <div className="assist-answer">
+        <div
+          className="ai-assist-answer"
+          style={{
+            cursor: !waitAIWidget ? 'pointer' : '',
+          }}
+        >
           <div
-            className="icon"
+            className="ai-assist-icon"
             onClick={() =>
               sendMessageToAIAssistAnswer(
                 mc,
@@ -541,11 +346,11 @@ export function InComingMessage(props: {
                 overflow: 'visible',
               }}
             >
-              <AssistAnswer
+              <BotIcon
                 width="24"
-                height="24"
+                height="25"
                 applyZoom
-                color="var(--main-elements)"
+                color="var(--primary)"
               />
             </div>
           </div>
@@ -626,122 +431,5 @@ export function InComingMessage(props: {
         </div>
       </div>
     </div>
-    // <div
-    //   className="message-view-container--incoming-message-wrapper"
-    //   onMouseEnter={() => setHaveHover(true)}
-    //   onMouseLeave={() => setHaveHover(false)}
-    // >
-    //   <div className="message-view-container--incoming-message-wrapper__message">
-    //     <div className="message-view-container--incoming-message-wrapper__avatar">
-    //       <div
-    //         style={
-    //           props.theme
-    //             ? { backgroundColor: props.theme.disabledElements() }
-    //             : {}
-    //         }
-    //         className="message-view-container__sender-avatar"
-    //       >
-    //         <User
-    //           width="24"
-    //           height="24"
-    //           applyZoom
-    //           color="var(--secondary-text)"
-    //         />
-    //       </div>
-    //     </div>
-    //     <div className="message-view-container--incoming-message-container">
-    //       <div
-    //         style={props.theme ? { color: props.theme.secondaryText() } : {}}
-    //         className="message-view-container__sender-name"
-    //       >
-    //         {props.senderName || props.message.sender_id.toString()}
-    //       </div>
-    //       <div
-    //         style={
-    //           props.theme
-    //             ? {
-    //                 color: props.theme.mainText(),
-    //                 backgroundColor: props.theme.incomingBackground(),
-    //               }
-    //             : {}
-    //         }
-    //         className="message-view-container__sender-message"
-    //       >
-    //         {/* eslint-disable-next-line @typescript-eslint/no-unsafe-argument */}
-    //         {messageContentRender(
-    //           props.message,
-    //           widgetTextContent,
-    //           props.theme,
-    //         )}
-    //       </div>
-    //     </div>
-    //     {haveHover || openMenu ? (
-    //       <div
-    //         className="message-view-container--incoming-message-wrapper--context-menu"
-    //         onClick={() => {
-    //           setOpenMenu(!openMenu);
-    //         }}
-    //       >
-    //         <EditDots
-    //           color={
-    //             props.theme
-    //               ? props.theme.secondaryText()
-    //               : 'var(--secondary-text)'
-    //           }
-    //         />
-    //         {/* {openMenu ? ( */}
-    //         {/*  <DropDownMenu */}
-    //         {/*    items={contextMessageMenu} */}
-    //         {/*    itemsAI={contextMessageMenuAI} */}
-    //         {/*  /> */}
-    //         {/* ) : null} */}
-    //       </div>
-    //     ) : (
-    //       <div
-    //         style={props.theme ? { color: props.theme.mainText() } : {}}
-    //         className="message-view-container__incoming-time"
-    //       >
-    //         {getTimeShort24hFormat(props.message.date_sent)}
-    //       </div>
-    //     )}
-    //
-    //     <div
-    //       className="message-view-container__incoming-time"
-    //       onClick={props.onClick}
-    //     >
-    //       {/* {props.renderWidget} */}
-    //       {renderWidgetAIAssist(
-    //         props.message,
-    //         props.messagesToView,
-    //         props.currentUserId,
-    //         props.AITranslation,
-    //         props.AIAnswerToMessage,
-    //       )}
-    //     </div>
-    //     {waitAIWidget && (
-    //       <div
-    //         className="message-view-container__incoming-time"
-    //         style={{
-    //           height: '24px',
-    //           width: '24px',
-    //         }}
-    //       >
-    //         <LoaderComponent
-    //           width="24"
-    //           height="24"
-    //           color="var(--color-background-info)"
-    //         />
-    //       </div>
-    //     )}
-    //   </div>
-    //   <div className="message-view-container__widget-ai-translate">
-    //     {renderWidgetAITranslate(
-    //       props.message,
-    //       props.messagesToView,
-    //       props.currentUserId,
-    //       props.AITranslation,
-    //     )}
-    //   </div>
-    // </div>
   );
 }