quickblox-react-ui-kit 0.2.5 → 0.2.6-patch

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

@@ -1,52 +0,0 @@
-import React from 'react';
-import './DesktopLayout.scss';
-import UiKitTheme from '../../../assets/UiKitTheme';
-
-type LayoutItems = {
-  dialogsView: React.ReactNode;
-  dialogMessagesView: React.ReactNode;
-  dialogInfoView: React.ReactNode;
-  theme?: UiKitTheme;
-};
-function DesktopLayout({
-  dialogsView,
-  dialogMessagesView,
-  dialogInfoView,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  theme = undefined,
-}: LayoutItems) {
-  const mainContainerStyles = theme
-    ? {
-        color: theme.mainText(),
-        backgroundColor: theme.mainBackground(),
-        border: `1px solid ${theme.divider()}`,
-      }
-    : {};
-
-  return (
-    <div style={mainContainerStyles} className="desktop-layout-main-container">
-      <div
-        style={mainContainerStyles}
-        className="desktop-layout-main-container__item-left"
-      >
-        {dialogsView}
-      </div>
-      <div
-        style={mainContainerStyles}
-        className="desktop-layout-main-container__item-center"
-      >
-        {dialogMessagesView}
-      </div>
-      {dialogInfoView && (
-        <div
-          style={mainContainerStyles}
-          className="desktop-layout-main-container__item-right"
-        >
-          {dialogInfoView}
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default DesktopLayout;

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

@@ -1,382 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import useQbInitializedDataContext from '../../providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
-import { DialogEntity } from '../../../../Domain/entity/DialogEntity';
-import { DialogsViewModel } from '../../../Views/Dialogs/DialogViewModel';
-import DialogsComponent from '../../../Views/Dialogs/Dialogs';
-import DialogInformation from '../../UI/Dialogs/DialogInformation/DialogInformation';
-import DesktopLayout from './DesktopLayout';
-import MessagesView from '../../UI/Dialogs/MessagesView/MessagesView';
-import useDialogsViewModel from '../../../Views/Dialogs/useDialogsViewModel';
-import { Pagination } from '../../../../Domain/repository/Pagination';
-import UiKitTheme from '../../../assets/UiKitTheme';
-import BaseViewModel from '../../../Views/Base/BaseViewModel';
-import { AIMessageWidget } from '../../UI/Dialogs/MessagesView/AIWidgets/AIMessageWidget';
-import UseDefaultAIAssistAnswerWidget from '../../UI/Dialogs/MessagesView/AIWidgets/UseDefaultAIAssistAnswerWidget';
-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;
-  default: boolean;
-  AIWidget?: AIMessageWidget;
-};
-
-type QuickBloxUIKitDesktopLayoutProps = {
-  theme?: UiKitTheme;
-  AIRephrase?: AIWidgetPlaceHolder;
-  AITranslate?: AIWidgetPlaceHolder;
-  AIAssist?: AIWidgetPlaceHolder;
-};
-
-const QuickBloxUIKitDesktopLayout: React.FC<
-  QuickBloxUIKitDesktopLayoutProps
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars,react/function-component-definition
-> = ({
-  theme = undefined,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  AITranslate = undefined,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  AIRephrase = undefined,
-  AIAssist = undefined,
-}: QuickBloxUIKitDesktopLayoutProps) => {
-  console.log('create QuickBloxUIKitDesktopLayout');
-  const [selectedDialog, setSelectedDialog] =
-    React.useState<BaseViewModel<DialogEntity>>();
-
-  const currentContext = useQbInitializedDataContext();
-  const QBConfig =
-    currentContext.InitParams.qbConfig ||
-    DefaultConfigurations.getDefaultQBConfig();
-  // const eventMessaging = useEventMessagesRepository();
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  const userName =
-    currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.userName;
-  const userId =
-    currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.userId;
-  const sessionToken =
-    currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.sessionToken;
-
-  const dialogsViewModel: DialogsViewModel =
-    useDialogsViewModel(currentContext);
-
-  let defaultAIEditMessageWidget = AIRephrase?.AIWidget; // useDefaultTextInputWidget();
-  let defaultAITranslateWidget = AITranslate?.AIWidget;
-  let defaultAIAnswerToMessageWidget = AIAssist?.AIWidget;
-
-  const getAIAssistAnswer = (): void => {
-    if (AIAssist?.enabled && !AIAssist?.default) {
-      defaultAIAnswerToMessageWidget = AIAssist.AIWidget;
-    } else if (
-      AIAssist?.enabled ||
-      QBConfig.configAIApi.AIAnswerAssistWidgetConfig.useDefault
-    ) {
-      if (
-        !QBConfig.configAIApi.AIAnswerAssistWidgetConfig.useDefault ||
-        (AIAssist && !AIAssist?.default)
-      ) {
-        defaultAIAnswerToMessageWidget = undefined;
-      } 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 = sessionToken || '';
-          defaultAIAnswerToMessageWidget =
-            UseDefaultAIAssistAnswerWidgetWithProxy({
-              ...proxyConfig,
-              apiKeyOrSessionToken: token,
-            });
-        }
-      }
-    }
-  };
-  const getAITranslate = (): void => {
-    if (AITranslate?.enabled && !AITranslate?.default) {
-      defaultAITranslateWidget = AITranslate.AIWidget;
-    } else if (
-      AITranslate?.enabled ||
-      QBConfig.configAIApi.AITranslateWidgetConfig.useDefault
-    ) {
-      if (
-        !QBConfig.configAIApi.AITranslateWidgetConfig.useDefault ||
-        (AITranslate && !AITranslate?.default)
-      ) {
-        defaultAITranslateWidget = undefined;
-      } 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 = sessionToken || '';
-          defaultAITranslateWidget = UseDefaultAITranslateWidgetWithProxy({
-            ...proxyConfig,
-            apiKeyOrSessionToken: token,
-          });
-        }
-      }
-    }
-  };
-  const getAIRephrase = (): void => {
-    if (AIRephrase?.enabled && !AIRephrase?.default) {
-      defaultAIEditMessageWidget = AIRephrase.AIWidget;
-    } else if (
-      AIRephrase?.enabled ||
-      QBConfig.configAIApi.AIRephraseWidgetConfig.useDefault
-    ) {
-      if (
-        !QBConfig.configAIApi.AIRephraseWidgetConfig.useDefault ||
-        (AIRephrase && !AIRephrase?.default)
-      ) {
-        defaultAIEditMessageWidget = undefined;
-      } 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 = sessionToken || '';
-          defaultAIEditMessageWidget =
-            UseDefaultAIRephraseMessageWidgetWithProxy({
-              ...proxyConfig,
-              apiKeyOrSessionToken: token,
-            });
-        }
-      }
-    }
-  };
-
-  getAITranslate();
-  getAIRephrase();
-  getAIAssistAnswer();
-
-  const selectDialogActions = (item: BaseViewModel<DialogEntity>): void => {
-    if (!dialogsViewModel.loading) {
-      setSelectedDialog(item);
-    }
-  };
-  // const subscribeToDialogEventsUseCase: SubscribeToDialogEventsUseCase =
-  //   new SubscribeToDialogEventsUseCase(eventMessaging, 'TestStage');
-
-  // инициализация СДК и загрузка тестовых данных, запуск пинга - может не быть
-  // todo: добавить метод в контекст
-  const isAuthProcessed = (): boolean => {
-    console.log('call isAuthProcessed');
-    const result =
-      currentContext.storage.REMOTE_DATA_SOURCE.needInit === false &&
-      currentContext.storage.REMOTE_DATA_SOURCE.authProcessed &&
-      currentContext.storage.CONNECTION_REPOSITORY.needInit === false;
-
-    console.log(
-      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-      `initialValue.REMOTE_DATA_SOURCE_MOCK.needInit: ${currentContext.storage.REMOTE_DATA_SOURCE.needInit}`,
-    );
-    console.log(
-      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-      `initialValue.REMOTE_DATA_SOURCE_MOCK.authProcessed: ${currentContext.storage.REMOTE_DATA_SOURCE.authProcessed}`,
-    );
-
-    console.log(
-      // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-      `initialValue.CONNECTION_REPOSITORY.needInit: ${currentContext.storage.CONNECTION_REPOSITORY.needInit}`,
-    );
-
-    return result;
-  };
-
-  useEffect(() => {
-    console.log('TestStage: GET DATA ');
-    console.log(
-      `auth data: ${JSON.stringify(
-        currentContext.InitParams.loginData,
-      )} at ${new Date().toLocaleTimeString()}`,
-    );
-    if (isAuthProcessed()) {
-      console.log('auth is completed, CAN GET DATA');
-      const pagination: Pagination = new Pagination();
-
-      dialogsViewModel?.getDialogs(pagination);
-    }
-
-    return () => {
-      console.log('TestStage: USE EFFECT release');
-      dialogsViewModel.release();
-    };
-  }, []); // сейчас это выполняется один раз при старте, а нужно каждый раз при смене пользователя
-
-  // const dialogsEventHandler = (dialogInfo: DialogEventInfo) => {
-  //   console.log('call dialogsEventHandler in QuickBloxUIKitDesktopLayout');
-  //   if (dialogInfo.eventMessageType === EventMessageType.SystemMessage) {
-  //     switch (dialogInfo.notificationTypes) {
-  //       case NotificationTypes.DELETE_LEAVE_DIALOG: {
-  //         if (
-  //           dialogInfo.messageInfo &&
-  //           dialogInfo.messageInfo.sender_id === userId
-  //         ) {
-  //           setSelectedDialog(undefined);
-  //         }
-  //
-  //         break;
-  //       }
-  //       default: {
-  //         const pagination: Pagination = new Pagination();
-  //
-  //         dialogsViewModel?.getDialogs(pagination);
-  //         break;
-  //       }
-  //     }
-  //   }
-  // };
-
-  useEffect(() => {
-    console.log('TestStage: GET DATA AFTER User data has CHANGED');
-    console.log(
-      `auth is ${JSON.stringify(
-        currentContext.InitParams.loginData,
-      )} at ${new Date().toLocaleTimeString()}`,
-    );
-
-    if (isAuthProcessed()) {
-      console.log('auth is completed, FETCH DATA');
-      const pagination: Pagination = new Pagination();
-
-      dialogsViewModel?.getDialogs(pagination);
-      //
-      // console.log('auth is completed, subscribe');
-      //
-      // subscribeToDialogEventsUseCase
-      //   .execute(dialogsEventHandler)
-      //   .catch((reason) => {
-      //     console.log(stringifyError(reason));
-      //   });
-      // //
-      // console.log('subscribe is completed, go');
-    }
-  }, [currentContext.InitParams]);
-
-  useEffect(() => {
-    console.log(
-      `TestStage: selectedDialog: ${
-        selectedDialog?.entity?.name || 'Dialog Name is empty'
-      }`,
-    );
-    if (selectedDialog && selectedDialog.entity) {
-      dialogsViewModel.entity = selectedDialog.entity;
-    }
-  }, [selectedDialog]);
-
-  useEffect(() => {
-    console.log(
-      `Clear selected dialog: ${
-        selectedDialog?.entity?.name || 'Dialog Name is empty'
-      }`,
-    );
-    if (!dialogsViewModel.entity) {
-      setSelectedDialog(undefined);
-    }
-  }, [dialogsViewModel.entity]);
-
-  const [needDialogInformation, setNeedDialogInformation] = useState(true);
-  const informationCloseHandler = (): void => {
-    setNeedDialogInformation(false);
-  };
-  const informationOpenHandler = (): void => {
-    setNeedDialogInformation(true);
-  };
-
-  return (
-    <DesktopLayout
-      theme={theme}
-      dialogsView={
-        <DialogsComponent
-          // subHeaderContent={<CompanyLogo />}
-          // upHeaderContent={<CompanyLogo />}
-          dialogsViewModel={dialogsViewModel} // 1 Get 2 Update UseCase
-          onDialogSelectHandler={selectDialogActions}
-          additionalSettings={{
-            withoutHeader: false,
-            themeHeader: theme,
-            themePreview: theme,
-            useSubHeader: false,
-            useUpHeader: false,
-          }}
-        />
-      }
-      dialogMessagesView={
-        selectedDialog && selectedDialog.entity && dialogsViewModel.entity ? (
-          <MessagesView
-            // subHeaderContent={<CompanyLogo />}
-            // upHeaderContent={<CompanyLogo />}
-            dialogsViewModel={dialogsViewModel}
-            onDialogInformationHandler={informationOpenHandler}
-            maxWidthToResize={
-              selectedDialog && needDialogInformation ? undefined : '1040px'
-            }
-            AIRephrase={defaultAIEditMessageWidget}
-            AITranslate={defaultAITranslateWidget}
-            AIAssist={defaultAIAnswerToMessageWidget}
-            theme={theme}
-          /> // 1 Get Messages + 1 Get User by Id
-        ) : (
-          <div
-            style={{
-              minHeight: '799px',
-              minWidth: '1040px',
-              border: '1px solid var(--divider)',
-              margin: '0 auto',
-            }}
-          >
-            You login as {userName}({userId}). Select chat to start
-            conversation.
-          </div>
-        )
-      }
-      dialogInfoView={
-        // 1 Get User by 1 + Get user by name
-        <div>
-          {selectedDialog && needDialogInformation && (
-            <DialogInformation
-              // subHeaderContent={<CompanyLogo />}
-              // upHeaderContent={<CompanyLogo />}
-              dialog={selectedDialog.entity}
-              dialogViewModel={dialogsViewModel}
-              onCloseDialogInformationHandler={informationCloseHandler}
-            />
-          )}
-        </div>
-      }
-    />
-  );
-};
-
-export default QuickBloxUIKitDesktopLayout;

package/src/Presentation/components/layouts/LayoutCommonTypes.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-
-export type ContainerProps = {
-  children?: React.ReactNode;
-  gapBetweenItem?: string;
-  maxWidth?: string;
-};

package/src/Presentation/components/layouts/TestStage/CompanyLogo/CompanyLogo.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-
-// eslint-disable-next-line react/function-component-definition
-const CompanyLogo: React.FC = () => {
-  return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        width: '322px',
-        height: '42px',
-        border: '1px solid #333',
-      }}
-    >
-      <img
-        src="../../../../../../src/Presentation/assets/img/bee-img.png"
-        alt="Company Logo"
-        style={{ width: '100px', height: 'auto', marginRight: '10px' }}
-      />
-      <span style={{ fontSize: '24px', fontWeight: 'bold', color: '#333' }}>
-        Your Company Name
-      </span>
-    </div>
-  );
-};
-
-export default CompanyLogo;

package/src/Presentation/components/layouts/TestStage/LoginView/Login.scss

@@ -1,71 +0,0 @@
-a { text-decoration: none; }
-
-h1 { font-size: 1em; }
-
-h1, p {
-  margin-bottom: 10px;
-}
-
-strong {
-  font-weight: bold;
-}
-
-.uppercase { text-transform: uppercase; }
-
-/* ---------- LOGIN ---------- */
-
-#login {
-  margin: 50px auto;
-  width: 300px;
-}
-
-form fieldset input[type="text"],
-input[type="password"] {
-  appearance: none;
-  background: #e5e5e5;
-  border: none;
-  border-radius: 3px;
-  color: #5a5656;
-  font-family: inherit;
-  font-size: 14px;
-  height: 50px;
-  outline: none;
-  padding: 0px 10px;
-  width: 280px;
-  border: 1px solid #008dde;
-  margin: 1px;
-}
-
-form fieldset button[type="submit"] {
-  appearance: none;
-  background-color: #008dde;
-  border: none;
-  border-radius: 3px;
-  color: #f4f4f4;
-  cursor: pointer;
-  font-family: inherit;
-  height: 50px;
-  text-transform: uppercase;
-  width: 280px;
-}
-
-form fieldset a {
-  color: #5a5656;
-  font-size: 10px;
-}
-
-form fieldset a:hover { text-decoration: underline; }
-
-.btn-round {
-  background: #5a5656;
-  border-radius: 50%;
-  color: #f4f4f4;
-  display: block;
-  font-size: 12px;
-  height: 50px;
-  line-height: 50px;
-  margin: 30px 125px;
-  text-align: center;
-  text-transform: uppercase;
-  width: 50px;
-}

package/src/Presentation/components/layouts/TestStage/LoginView/Login.tsx

@@ -1,95 +0,0 @@
-import React, { useState } from 'react';
-import './Login.scss';
-import { InitParams } from '../../../providers/QuickBloxUIKitProvider/QuickBloxUIKitProvider';
-import useQbInitializedDataContext from '../../../providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
-import { LoginData } from '../../../../../Data/source/remote/RemoteDataSource';
-
-export type FunctionTypeLoginDataToVoid = (data: LoginData) => void;
-
-type LoginProps = {
-  loginHandler?: FunctionTypeLoginDataToVoid;
-};
-// eslint-disable-next-line react/function-component-definition
-const Login: React.FC<LoginProps> = ({ loginHandler }: LoginProps) => {
-  const currentContext = useQbInitializedDataContext();
-  const [UserName, setUsername] = useState(
-    currentContext.InitParams.loginData?.login || 'tester',
-  );
-  const [Password, setPassword] = useState('quickblox');
-
-  // const [term, setTerm] = useState('');
-
-  const submitForm = (event: React.FormEvent<HTMLFormElement>) => {
-    // Preventing the page from reloading
-    event.preventDefault();
-
-    // Do something
-    // alert(username);
-    console.log('submit actions perform');
-
-    const data: LoginData = {
-      login: UserName,
-      password: Password,
-    };
-
-    console.log('data: ', data);
-
-    if (loginHandler) {
-      //
-      const oldData: InitParams = currentContext.InitParams;
-      const newData: InitParams = { ...oldData, loginData: data };
-
-      currentContext.updateQBInitParams(newData);
-      //
-      loginHandler(data);
-    }
-  };
-
-  return (
-    <div id="login">
-      <h1>Please login.</h1>
-
-      <form onSubmit={submitForm}>
-        <fieldset>
-          <p>
-            <input
-              type="text"
-              required
-              placeholder="Username"
-              value={UserName}
-              onChange={(event) => setUsername(event.target.value)}
-            />
-          </p>
-
-          <p>
-            <input
-              type="password"
-              required
-              placeholder="Password"
-              value={Password}
-              onChange={(event) => setPassword(event.target.value)}
-            />
-          </p>
-
-          <button type="submit">Submit</button>
-        </fieldset>
-      </form>
-    </div>
-    // <div className="container">
-    //   <form onSubmit={submitForm}>
-    //     <input
-    //       value={term}
-    //       onChange={(e) => setTerm(e.target.value)}
-    //       type="text"
-    //       placeholder="Enter a term"
-    //       className="input"
-    //     />
-    //     <button type="submit" className="btn">
-    //       Submit
-    //     </button>
-    //   </form>
-    // </div>
-  );
-};
-
-export default Login;

package/src/Presentation/components/layouts/TestStage/TestStageMarkup.scss

@@ -1,24 +0,0 @@
-$gap-width: 20px;
-$column-count: 4;
-$gap-count: $column-count - 1;
-
-$content-gap-width: 5px;
-
-.container-test-stage{
-  border: 10px solid #6c38cc;
-  display: flex;
-  flex-wrap: wrap;
-  gap: $gap-width;
-  &__item{
-    //border: 1px solid #6c38cc;
-    text-align: center;
-    padding: calc($gap-width / 2);
-    flex: 0 1 calc(100% / $column-count - $gap-width * $gap-count / $column-count);
-  }
-  &--content-wrapper{
-    //border: 10px solid #6c38cc;
-    display: flex;
-    flex-wrap: wrap;
-    gap: $content-gap-width;
-  }
-}