quickblox-react-ui-kit 0.2.3 → 0.2.5

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

@@ -14,6 +14,10 @@ import PreviewDialogViewModel from './PreviewDialogViewModel';
 import NotifyOff from '../../svgs/Icons/Toggle/NotifyOff';
 import EditDots from '../../svgs/Icons/Actions/EditDots';
 import UiKitTheme from '../../../../assets/UiKitTheme';
+import PreviewImageFile from './PreviewImageFile/PreviewImageFile';
+import PreviewAudioFile from './PreviewAudioFile/PreviewAudioFile';
+import PreviewVideoFile from './PreviewVideoFile/PreviewVideoFile';
+import PreviewDefaultFile from './PreviewDefaultFile/PreviewDefaultFile';
 
 export type ThemeNames = 'light' | 'dark' | 'custom';
 type PreviewDialogsColorTheme = {
@@ -285,6 +289,52 @@ const PreviewDialog: React.FC<PreviewDialogsProps> = ({
     minWidth: '182px',
   };
 
+  const getMessageParts = (message: string) => {
+    if (
+      message.includes('MediaContentEntity') ||
+      message.includes('[Attachment]')
+    ) {
+      const messageParts = message.split('|');
+
+      // val messageBody = "${MediaContentEntity::class.java.simpleName}|$fileName|$uid|$fileMimeType"
+      // 0, 1, 2, 3
+      return messageParts;
+    }
+
+    return [];
+  };
+
+  const getPreviewMessage = (message: string): JSX.Element => {
+    const messageParts = getMessageParts(message);
+
+    if (messageParts && messageParts.length > 0) {
+      const fileName: string = messageParts[1];
+      const fileUid: string = messageParts[2];
+      const fileUrl: string = fileUid && QB.content.privateUrl(fileUid);
+
+      const result: JSX.Element = (
+        <div className="dialog-item-preview-text">{message}</div>
+      );
+
+      if (messageParts[3].includes('audio')) {
+        return <PreviewAudioFile fileName={fileName} />;
+      }
+      if (messageParts[3].includes('video')) {
+        return <PreviewVideoFile fileName={fileName} />;
+      }
+      if (messageParts[3].includes('image')) {
+        return <PreviewImageFile fileName={fileName} imgUrl={fileUrl} />;
+      }
+      if (fileName.length > 0 && fileName.includes('.')) {
+        return <PreviewDefaultFile fileName={fileName} />;
+      }
+
+      return result;
+    }
+
+    return <div>{message}</div>;
+  };
+
   return (
     <div
       onMouseEnter={() => setHaveHover(true)}
@@ -293,7 +343,8 @@ const PreviewDialog: React.FC<PreviewDialogsProps> = ({
         haveHover
           ? {
               ...titleDialogStyles,
-              background: hoverTheme.backgroundColorMainSection,
+              // background: hoverTheme.backgroundColorMainSection,
+              background: 'var(--chat-input)',
               border: `1px solid ${hoverTheme.divider}`,
             }
           : titleDialogStyles
@@ -334,7 +385,7 @@ const PreviewDialog: React.FC<PreviewDialogsProps> = ({
           <ColumnContainer gapBetweenItem="3px" maxWidth="213px">
             <RowLeftContainer
               RightItem={
-                <div style={{ textAlign: 'right' }}>
+                <div className="dialog-item-date-time-sent">
                   {!haveHover ? message_date_time_sent : ''}
                 </div>
               }
@@ -388,7 +439,7 @@ const PreviewDialog: React.FC<PreviewDialogsProps> = ({
                 CenterItem={
                   <div className="preview-dialog-container__text-left">
                     <span className="preview-dialog-container__text-concat">
-                      {previewMessage}
+                      {getPreviewMessage(previewMessage || '')}
                     </span>
                   </div>
                 }
@@ -420,7 +471,7 @@ const PreviewDialog: React.FC<PreviewDialogsProps> = ({
                     className={textWrapperContainer}
                   >
                     <span className="preview-dialog-container__text-concat">
-                      {previewMessage}
+                      {getPreviewMessage(previewMessage || '')}
                     </span>
                   </div>
                 }

package/src/Presentation/components/UI/Dialogs/PreviewDialog/PreviewImageFile/PreviewImageFile.scss

@@ -0,0 +1,40 @@
+.preview-image-file-container,
+.preview-image-file-container * {
+  box-sizing: border-box;
+}
+.preview-image-file-container {
+  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 {
+      border-radius: 8px;
+      width: 32px;
+      height: 32px;
+      position: absolute;
+      left: 0px;
+      top: 0px;
+    }
+  }
+
+  &--travel-img {
+    color: var(--main-text, #0b121b);
+    text-align: left;
+    font: 400 12px/16px "Roboto", sans-serif;
+    position: relative;
+    flex: 1;
+  }
+}
+
+

package/src/Presentation/components/UI/Dialogs/PreviewDialog/PreviewImageFile/PreviewImageFile.tsx

@@ -0,0 +1,26 @@
+import './PreviewImageFile.scss';
+import React from 'react';
+
+type PreviewImageFileProps = {
+  fileName: string;
+  imgUrl: string;
+};
+// eslint-disable-next-line react/function-component-definition
+const PreviewImageFile: React.FC<PreviewImageFileProps> = ({
+  fileName,
+  imgUrl,
+}: PreviewImageFileProps) => {
+  return (
+    <div className="preview-image-file-container">
+      <div className="preview-image-file-container--placeholder">
+        <img
+          className="preview-image-file-container--placeholder__bg"
+          src={imgUrl}
+        />
+      </div>
+      <div className="preview-image-file-container--travel-img">{fileName}</div>
+    </div>
+  );
+};
+
+export default PreviewImageFile;

package/src/Presentation/components/UI/Dialogs/PreviewDialog/PreviewVideoFile/PreviewVideoFile.scss

@@ -0,0 +1,62 @@
+.preview-video-file-container,
+.preview-video-file-container * {
+  box-sizing: border-box;
+}
+.preview-video-file-container {
+  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(--incoming-background, #e4e6e8);
+      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;
+    }
+  }
+
+  &--video-mp-4 {
+    color: var(--main-text, #0b121b);
+    text-align: left;
+    font: 400 12px/16px "Roboto", sans-serif;
+    position: relative;
+    flex: 1;
+  }
+}
+
+
+.toggle-play {
+  align-self: stretch;
+  flex: 1;
+  position: relative;
+  overflow: visible;
+}
+

package/src/Presentation/components/UI/Dialogs/PreviewDialog/PreviewVideoFile/PreviewVideoFile.tsx

@@ -0,0 +1,25 @@
+import './PreviewVideoFile.scss';
+import React from 'react';
+import ImagePlay from '../../../svgs/Icons/Toggle/ImagePlay';
+
+type PreviewVideoFileProps = {
+  fileName: string;
+};
+// eslint-disable-next-line react/function-component-definition
+const PreviewVideoFile: React.FC<PreviewVideoFileProps> = ({
+  fileName,
+}: PreviewVideoFileProps) => {
+  return (
+    <div className="preview-video-file-container">
+      <div className="preview-video-file-container--placeholder">
+        <div className="preview-video-file-container--placeholder__bg" />
+        <div className="preview-video-file-container--placeholder__icon">
+          <ImagePlay width="16" height="16" applyZoom color="var(--caption)" />
+        </div>
+      </div>
+      <div className="preview-video-file-container--video-mp-4">{fileName}</div>
+    </div>
+  );
+};
+
+export default PreviewVideoFile;

package/src/Presentation/components/UI/svgs/Icons/AIWidgets/BotIcon/BotIcon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
+    <path d="M16.1339 5.61003H12.9186V4.69137C12.9186 4.44772 12.8219 4.21406 12.6496 4.04177C12.4773 3.86949 12.2436 3.77271 12 3.77271C11.7563 3.77271 11.5227 3.86949 11.3504 4.04177C11.1781 4.21406 11.0813 4.44772 11.0813 4.69137V5.61003H7.86601C6.64779 5.61003 5.47946 6.09396 4.61805 6.95537C3.75664 7.81678 3.27271 8.98511 3.27271 10.2033V16.6339C3.27271 17.8522 3.75664 19.0205 4.61805 19.8819C5.47946 20.7433 6.64779 21.2272 7.86601 21.2272H16.1339C16.7371 21.2272 17.3344 21.1084 17.8917 20.8776C18.449 20.6468 18.9554 20.3084 19.3819 19.8819C19.8084 19.4554 20.1468 18.949 20.3776 18.3917C20.6084 17.8344 20.7272 17.2371 20.7272 16.6339V10.2033C20.7272 9.60013 20.6084 9.00283 20.3776 8.44555C20.1468 7.88826 19.8084 7.3819 19.3819 6.95537C18.9554 6.52884 18.449 6.1905 17.8917 5.95967C17.3344 5.72883 16.7371 5.61003 16.1339 5.61003ZM18.8899 16.6339C18.8899 17.3649 18.5996 18.0659 18.0827 18.5827C17.5659 19.0996 16.8649 19.3899 16.1339 19.3899H7.86601C7.13507 19.3899 6.43408 19.0996 5.91723 18.5827C5.40039 18.0659 5.11003 17.3649 5.11003 16.6339V10.2033C5.11003 9.47239 5.40039 8.7714 5.91723 8.25455C6.43408 7.73771 7.13507 7.44735 7.86601 7.44735H16.1339C16.8649 7.44735 17.5659 7.73771 18.0827 8.25455C18.5996 8.7714 18.8899 9.47239 18.8899 10.2033V16.6339Z" fill="#3978FC"/>
+    <path d="M14.7559 10.2034C14.5123 10.2034 14.2786 10.3002 14.1063 10.4724C13.9341 10.6447 13.8373 10.8784 13.8373 11.122V12.9594C13.8373 13.203 13.9341 13.4367 14.1063 13.6089C14.2786 13.7812 14.5123 13.878 14.7559 13.878C14.9996 13.878 15.2332 13.7812 15.4055 13.6089C15.5778 13.4367 15.6746 13.203 15.6746 12.9594V11.122C15.6746 10.8784 15.5778 10.6447 15.4055 10.4724C15.2332 10.3002 14.9996 10.2034 14.7559 10.2034Z" fill="#3978FC"/>
+    <path d="M9.24398 10.2034C9.00034 10.2034 8.76668 10.3002 8.59439 10.4724C8.42211 10.6447 8.32532 10.8784 8.32532 11.122V12.9594C8.32532 13.203 8.42211 13.4367 8.59439 13.6089C8.76668 13.7812 9.00034 13.878 9.24398 13.878C9.48763 13.878 9.72129 13.7812 9.89358 13.6089C10.0659 13.4367 10.1626 13.203 10.1626 12.9594V11.122C10.1626 10.8784 10.0659 10.6447 9.89358 10.4724C9.72129 10.3002 9.48763 10.2034 9.24398 10.2034Z" fill="#3978FC"/>
+</svg>

package/src/Presentation/components/UI/svgs/Icons/AIWidgets/BotIcon/BotIcon.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { IconTheme } from '../../IconsCommonTypes';
+
+function BotIcon(theme: IconTheme | undefined = undefined) {
+  return !theme?.applyZoom ? (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={theme && theme.width ? theme.width : '24'}
+      height={theme && theme.height ? theme.height : '25'}
+      viewBox="0 0 24 25"
+      fill="none"
+    >
+      <path
+        d="M16.1339 5.61003H12.9186V4.69137C12.9186 4.44772 12.8219 4.21406 12.6496 4.04177C12.4773 3.86949 12.2436 3.77271 12 3.77271C11.7563 3.77271 11.5227 3.86949 11.3504 4.04177C11.1781 4.21406 11.0813 4.44772 11.0813 4.69137V5.61003H7.86601C6.64779 5.61003 5.47946 6.09396 4.61805 6.95537C3.75664 7.81678 3.27271 8.98511 3.27271 10.2033V16.6339C3.27271 17.8522 3.75664 19.0205 4.61805 19.8819C5.47946 20.7433 6.64779 21.2272 7.86601 21.2272H16.1339C16.7371 21.2272 17.3344 21.1084 17.8917 20.8776C18.449 20.6468 18.9554 20.3084 19.3819 19.8819C19.8084 19.4554 20.1468 18.949 20.3776 18.3917C20.6084 17.8344 20.7272 17.2371 20.7272 16.6339V10.2033C20.7272 9.60013 20.6084 9.00283 20.3776 8.44555C20.1468 7.88826 19.8084 7.3819 19.3819 6.95537C18.9554 6.52884 18.449 6.1905 17.8917 5.95967C17.3344 5.72883 16.7371 5.61003 16.1339 5.61003ZM18.8899 16.6339C18.8899 17.3649 18.5996 18.0659 18.0827 18.5827C17.5659 19.0996 16.8649 19.3899 16.1339 19.3899H7.86601C7.13507 19.3899 6.43408 19.0996 5.91723 18.5827C5.40039 18.0659 5.11003 17.3649 5.11003 16.6339V10.2033C5.11003 9.47239 5.40039 8.7714 5.91723 8.25455C6.43408 7.73771 7.13507 7.44735 7.86601 7.44735H16.1339C16.8649 7.44735 17.5659 7.73771 18.0827 8.25455C18.5996 8.7714 18.8899 9.47239 18.8899 10.2033V16.6339Z"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+      <path
+        d="M14.7559 10.2034C14.5123 10.2034 14.2786 10.3002 14.1063 10.4724C13.9341 10.6447 13.8373 10.8784 13.8373 11.122V12.9594C13.8373 13.203 13.9341 13.4367 14.1063 13.6089C14.2786 13.7812 14.5123 13.878 14.7559 13.878C14.9996 13.878 15.2332 13.7812 15.4055 13.6089C15.5778 13.4367 15.6746 13.203 15.6746 12.9594V11.122C15.6746 10.8784 15.5778 10.6447 15.4055 10.4724C15.2332 10.3002 14.9996 10.2034 14.7559 10.2034Z"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+      <path
+        d="M9.24398 10.2034C9.00034 10.2034 8.76668 10.3002 8.59439 10.4724C8.42211 10.6447 8.32532 10.8784 8.32532 11.122V12.9594C8.32532 13.203 8.42211 13.4367 8.59439 13.6089C8.76668 13.7812 9.00034 13.878 9.24398 13.878C9.48763 13.878 9.72129 13.7812 9.89358 13.6089C10.0659 13.4367 10.1626 13.203 10.1626 12.9594V11.122C10.1626 10.8784 10.0659 10.6447 9.89358 10.4724C9.72129 10.3002 9.48763 10.2034 9.24398 10.2034Z"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  ) : (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={theme && theme.width ? theme.width : '24'}
+      height={theme && theme.height ? theme.height : '25'}
+      viewBox="0 0 24 25"
+      fill="none"
+    >
+      <path
+        d="M16.1339 5.61003H12.9186V4.69137C12.9186 4.44772 12.8219 4.21406 12.6496 4.04177C12.4773 3.86949 12.2436 3.77271 12 3.77271C11.7563 3.77271 11.5227 3.86949 11.3504 4.04177C11.1781 4.21406 11.0813 4.44772 11.0813 4.69137V5.61003H7.86601C6.64779 5.61003 5.47946 6.09396 4.61805 6.95537C3.75664 7.81678 3.27271 8.98511 3.27271 10.2033V16.6339C3.27271 17.8522 3.75664 19.0205 4.61805 19.8819C5.47946 20.7433 6.64779 21.2272 7.86601 21.2272H16.1339C16.7371 21.2272 17.3344 21.1084 17.8917 20.8776C18.449 20.6468 18.9554 20.3084 19.3819 19.8819C19.8084 19.4554 20.1468 18.949 20.3776 18.3917C20.6084 17.8344 20.7272 17.2371 20.7272 16.6339V10.2033C20.7272 9.60013 20.6084 9.00283 20.3776 8.44555C20.1468 7.88826 19.8084 7.3819 19.3819 6.95537C18.9554 6.52884 18.449 6.1905 17.8917 5.95967C17.3344 5.72883 16.7371 5.61003 16.1339 5.61003ZM18.8899 16.6339C18.8899 17.3649 18.5996 18.0659 18.0827 18.5827C17.5659 19.0996 16.8649 19.3899 16.1339 19.3899H7.86601C7.13507 19.3899 6.43408 19.0996 5.91723 18.5827C5.40039 18.0659 5.11003 17.3649 5.11003 16.6339V10.2033C5.11003 9.47239 5.40039 8.7714 5.91723 8.25455C6.43408 7.73771 7.13507 7.44735 7.86601 7.44735H16.1339C16.8649 7.44735 17.5659 7.73771 18.0827 8.25455C18.5996 8.7714 18.8899 9.47239 18.8899 10.2033V16.6339Z"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+      <path
+        d="M14.7559 10.2034C14.5123 10.2034 14.2786 10.3002 14.1063 10.4724C13.9341 10.6447 13.8373 10.8784 13.8373 11.122V12.9594C13.8373 13.203 13.9341 13.4367 14.1063 13.6089C14.2786 13.7812 14.5123 13.878 14.7559 13.878C14.9996 13.878 15.2332 13.7812 15.4055 13.6089C15.5778 13.4367 15.6746 13.203 15.6746 12.9594V11.122C15.6746 10.8784 15.5778 10.6447 15.4055 10.4724C15.2332 10.3002 14.9996 10.2034 14.7559 10.2034Z"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+      <path
+        d="M9.24398 10.2034C9.00034 10.2034 8.76668 10.3002 8.59439 10.4724C8.42211 10.6447 8.32532 10.8784 8.32532 11.122V12.9594C8.32532 13.203 8.42211 13.4367 8.59439 13.6089C8.76668 13.7812 9.00034 13.878 9.24398 13.878C9.48763 13.878 9.72129 13.7812 9.89358 13.6089C10.0659 13.4367 10.1626 13.203 10.1626 12.9594V11.122C10.1626 10.8784 10.0659 10.6447 9.89358 10.4724C9.72129 10.3002 9.48763 10.2034 9.24398 10.2034Z"
+        fill={theme && theme.color ? theme.color : 'var(--color-icon)'}
+      />
+    </svg>
+  );
+}
+
+export default BotIcon;

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

@@ -94,11 +94,7 @@ const QuickBloxUIKitDesktopLayout: React.FC<
             apiKeyOrSessionToken: token,
           });
         } else {
-          token =
-            QBConfig.configAIApi.AIAnswerAssistWidgetConfig.proxyConfig
-              .sessionToken ||
-            sessionToken ||
-            '';
+          token = sessionToken || '';
           defaultAIAnswerToMessageWidget =
             UseDefaultAIAssistAnswerWidgetWithProxy({
               ...proxyConfig,
@@ -134,11 +130,7 @@ const QuickBloxUIKitDesktopLayout: React.FC<
             apiKeyOrSessionToken: token,
           });
         } else {
-          token =
-            QBConfig.configAIApi.AITranslateWidgetConfig.proxyConfig
-              .sessionToken ||
-            sessionToken ||
-            '';
+          token = sessionToken || '';
           defaultAITranslateWidget = UseDefaultAITranslateWidgetWithProxy({
             ...proxyConfig,
             apiKeyOrSessionToken: token,
@@ -173,11 +165,7 @@ const QuickBloxUIKitDesktopLayout: React.FC<
             apiKeyOrSessionToken: token,
           });
         } else {
-          token =
-            QBConfig.configAIApi.AIRephraseWidgetConfig.proxyConfig
-              .sessionToken ||
-            sessionToken ||
-            '';
+          token = sessionToken || '';
           defaultAIEditMessageWidget =
             UseDefaultAIRephraseMessageWidgetWithProxy({
               ...proxyConfig,

package/src/Presentation/components/providers/QuickBloxUIKitProvider/useQbInitializedDataContext.ts

@@ -4,23 +4,24 @@ import { qbDataContext, QBDataContextType } from './QuickBloxUIKitProvider';
 const useQbInitializedDataContext = (): QBDataContextType => {
   const currentQbDataContext = React.useContext(qbDataContext);
 
-  console.log(
-    `call useQbDataContext with init param: ${JSON.stringify(
-      currentQbDataContext.InitParams,
-      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-    )}`,
-  );
+  // console.log(
+  //   `call useQbDataContext with init param: ${JSON.stringify(
+  //     currentQbDataContext.InitParams,
+  //     // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+  //   )}`,
+  // );
   // todo: throw exception if we have not enough data to start session or login
-  let QuickBloxVersion = '';
+  // let QuickBloxVersion = '';
 
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   if (!window.QB) {
     throw new Error('HAVE NO SDK');
-  } else {
-    QuickBloxVersion = `Have SDK lib: version ${QB.version} build ${QB.buildNumber}`;
-    console.log(QuickBloxVersion);
   }
+  // else {
+  //   QuickBloxVersion = `Have SDK lib: version ${QB.version} build ${QB.buildNumber}`;
+  //   console.log(QuickBloxVersion);
+  // }
   if (!currentQbDataContext) {
     throw new Error('HAVE NO DATA CONTEXT');
   }
@@ -29,10 +30,10 @@ const useQbInitializedDataContext = (): QBDataContextType => {
   }
   // проверять был ли обработан логин
   // если сведения для логина - ник, пароль или токен сессии
-  console.log(
-    'data context: update init param: ',
-    JSON.stringify(currentQbDataContext.InitParams),
-  );
+  // console.log(
+  //   'data context: update init param: ',
+  //   JSON.stringify(currentQbDataContext.InitParams),
+  // );
   if (
     currentQbDataContext.InitParams.accountData.appId &&
     currentQbDataContext.InitParams.accountData.accountKey &&

package/src/QBconfig.ts

@@ -8,19 +8,24 @@ export const QBConfig = {
   },
   configAIApi: {
     AIAnswerAssistWidgetConfig: {
+      organizationName: 'Quickblox',
+      openAIModel: 'gpt-3.5-turbo',
       apiKey: '',
+      maxTokens: 3584,
       useDefault: true,
       proxyConfig: {
         api: 'v1/chat/completions',
-        servername: 'http://localhost',
-        port: '3011',
-        sessionToken: '',
+        servername: 'https://api.openai.com/',
+        port: '',
       },
     },
     AITranslateWidgetConfig: {
+      organizationName: 'Quickblox',
+      openAIModel: 'gpt-3.5-turbo',
       apiKey: '',
+      maxTokens: 3584,
       useDefault: true,
-      defaultLanguage: 'English',
+      defaultLanguage: '',
       languages: [
         'English',
         'Spanish',
@@ -31,20 +36,88 @@ export const QBConfig = {
       ],
       proxyConfig: {
         api: 'v1/chat/completions',
-        servername: 'http://localhost',
-        port: '3011',
-        sessionToken: '',
+        servername: 'https://api.openai.com/',
+        port: '',
       },
+      // proxyConfig: {
+      //   api: 'v1/chat/completions',
+      //   servername: 'http://localhost',
+      //   port: '3012',
+      // },
     },
     AIRephraseWidgetConfig: {
+      organizationName: 'Quickblox',
+      openAIModel: 'gpt-3.5-turbo',
       apiKey: '',
+      maxTokens: 3584,
       useDefault: true,
       defaultTone: 'Professional',
+      Tones: [
+        {
+          name: 'Professional Tone',
+          description:
+            'This would edit messages to sound more formal, using technical vocabulary, clear sentence structures, and maintaining a respectful tone. It would avoid colloquial language and ensure appropriate salutations and sign-offs',
+          iconEmoji: '👔',
+        },
+        {
+          name: 'Friendly Tone',
+          description:
+            'This would adjust messages to reflect a casual, friendly tone. It would incorporate casual language, use emoticons, exclamation points, and other informalities to make the message seem more friendly and approachable.',
+          iconEmoji: '🤝',
+        },
+        {
+          name: 'Encouraging Tone',
+          description:
+            'This tone would be useful for motivation and encouragement. It would include positive words, affirmations, and express support and belief in the recipient.',
+          iconEmoji: '💪',
+        },
+        {
+          name: 'Empathetic Tone',
+          description:
+            'This tone would be utilized to display understanding and empathy. It would involve softer language, acknowledging feelings, and demonstrating compassion and support.',
+          iconEmoji: '🤲',
+        },
+        {
+          name: 'Neutral Tone',
+          description:
+            'For times when you want to maintain an even, unbiased, and objective tone. It would avoid extreme language and emotive words, opting for clear, straightforward communication.',
+          iconEmoji: '😐',
+        },
+        {
+          name: 'Assertive Tone',
+          description:
+            'This tone is beneficial for making clear points, standing ground, or in negotiations. It uses direct language, is confident, and does not mince words.',
+          iconEmoji: '🔨',
+        },
+        {
+          name: 'Instructive Tone',
+          description:
+            'This tone would be useful for tutorials, guides, or other teaching and training materials. It is clear, concise, and walks the reader through steps or processes in a logical manner.',
+          iconEmoji: '📖',
+        },
+        {
+          name: 'Persuasive Tone',
+          description:
+            'This tone can be used when trying to convince someone or argue a point. It uses persuasive language, powerful words, and logical reasoning.',
+          iconEmoji: '☝️',
+        },
+        {
+          name: 'Sarcastic/Ironic Tone',
+          description:
+            'This tone can make the communication more humorous or show an ironic stance. It is harder to implement as it requires the AI to understand nuanced language and may not always be taken as intended by the reader.',
+          iconEmoji: '😏',
+        },
+        {
+          name: 'Poetic Tone',
+          description:
+            'This would add an artistic touch to messages, using figurative language, rhymes, and rhythm to create a more expressive text.',
+          iconEmoji: '🎭',
+        },
+      ],
       proxyConfig: {
         api: 'v1/chat/completions',
-        servername: 'http://localhost',
-        port: '3011',
-        sessionToken: '',
+        servername: 'https://api.openai.com/',
+        port: '',
       },
     },
   },
@@ -72,4 +145,77 @@ export const QBConfig = {
       enable: true,
     },
   },
+  // credentials: {
+  //   appId: -1,
+  //   accountKey: '',
+  //   authKey: '',
+  //   authSecret: '',
+  //   sessionToken: '',
+  // },
+  // configAIApi: {
+  //   AIAnswerAssistWidgetConfig: {
+  //     apiKey: '',
+  //     useDefault: true,
+  //     proxyConfig: {
+  //       api: 'v1/chat/completions',
+  //       servername: 'http://localhost',
+  //       port: '3011',
+  //       sessionToken: '',
+  //     },
+  //   },
+  //   AITranslateWidgetConfig: {
+  //     apiKey: '',
+  //     useDefault: true,
+  //     defaultLanguage: 'English',
+  //     languages: [
+  //       'English',
+  //       'Spanish',
+  //       'French',
+  //       'Portuguese',
+  //       'German',
+  //       'Ukrainian',
+  //     ],
+  //     proxyConfig: {
+  //       api: 'v1/chat/completions',
+  //       servername: 'http://localhost',
+  //       port: '3011',
+  //       sessionToken: '',
+  //     },
+  //   },
+  //   AIRephraseWidgetConfig: {
+  //     apiKey: '',
+  //     useDefault: true,
+  //     defaultTone: 'Professional',
+  //     proxyConfig: {
+  //       api: 'v1/chat/completions',
+  //       servername: 'http://localhost',
+  //       port: '3011',
+  //       sessionToken: '',
+  //     },
+  //   },
+  // },
+  // appConfig: {
+  //   maxFileSize: 10 * 1024 * 1024,
+  //   sessionTimeOut: 122,
+  //   chatProtocol: {
+  //     active: 2,
+  //   },
+  //   debug: true,
+  //   endpoints: {
+  //     api: 'api.quickblox.com',
+  //     chat: 'chat.quickblox.com',
+  //   },
+  //   on: {
+  //     // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/require-await
+  //     async sessionExpired(handleResponse: any, retry: any) {
+  //       console.log(
+  //         // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+  //         `QBconfig sessionExpired handle: ${handleResponse} ${retry}`,
+  //       );
+  //     },
+  //   },
+  //   streamManagement: {
+  //     enable: true,
+  //   },
+  // },
 };

package/src/index-ui.ts

@@ -37,7 +37,10 @@ import { AIMessageWidget } from './Presentation/components/UI/Dialogs/MessagesVi
 import { AISource, IChatMessage } from './Data/source/AISource';
 import AIWidgetIcon from './Presentation/components/UI/svgs/Icons/AIWidgets/AIWidget';
 import ErrorMessageIcon from './Presentation/components/UI/Dialogs/MessagesView/AIWidgets/ErrorMessageIcon';
-
+import PreviewDialogViewModel from './Presentation/components/UI/Dialogs/PreviewDialog/PreviewDialogViewModel';
+import {AvatarContentIncomingUserProps} from './Presentation/components/UI/Dialogs/MessagesView/InComingMessage/AvatarContentIncomingUser/AvatarContentIncomingUser';
+import {FunctionTypeViewModelToVoid} from './Presentation/Views/Base/BaseViewModel';
+import {GetUserNameFct} from './Presentation/components/UI/Dialogs/MessagesView/InComingMessage/InComingMessage';
 export {
   MainButton,
   TypeButton,
@@ -74,4 +77,8 @@ export {
   type IChatMessage,
   AIWidgetIcon,
   ErrorMessageIcon,
+  PreviewDialogViewModel,
+  type FunctionTypeViewModelToVoid,
+  type AvatarContentIncomingUserProps,
+  type GetUserNameFct
 };

package/src/index.scss

@@ -1,4 +1,3 @@
-@import "Presentation/assets/styles/reset-styles";
 @import "Presentation/assets/styles/fonts";
 @import "Presentation/assets/styles/theme_colors_scheme";
 @import "Presentation/assets/styles/variables";