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

package/src/Presentation/components/UI/Dialogs/InviteMembers/useInviteMembersViewModel.ts

@@ -1,116 +0,0 @@
-import { useState } from 'react';
-import { InviteMembersViewModel } from './InviteMembersViewModel';
-import {
-  PaginatedResult,
-  Pagination,
-} from '../../../../../Domain/repository/Pagination';
-import { UserEntity } from '../../../../../Domain/entity/UserEntity';
-import { GetAllUsersUseCase } from '../../../../../Domain/use_cases/GetAllUsersUseCase';
-import UsersRepository from '../../../../../Data/repository/UsersRepository';
-import useQbInitializedDataContext from '../../../providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
-import { Stubs } from '../../../../../Data/Stubs';
-import { stringifyError } from '../../../../../utils/parse';
-import {
-  NOT_FOUND_REMOTE_DATASOURCE_EXCEPTION_CODE,
-  RemoteDataSourceException,
-} from '../../../../../Data/source/exception/RemoteDataSourceException';
-
-export default function useInviteMembersViewModel(): InviteMembersViewModel {
-  // initPagination?: Pagination,
-  console.log('create useUsersListViewModel');
-  const currentContext = useQbInitializedDataContext();
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState('error with getting user list');
-
-  const startPagination: Pagination = new Pagination(0, 0);
-  const [pagination, setPagination] = useState<Pagination>(startPagination);
-  const [users, setUsers] = useState<UserEntity[]>([]);
-  const [filter, setFilter] = useState<string>('');
-
-  function updateFilter(newFilter: string) {
-    setFilter(newFilter);
-    setPagination(startPagination);
-  }
-
-  async function getUsers(currentPagination: Pagination) {
-    console.log('call getUsers in useInviteMembersViewModel');
-    console.log('currentPagination: ', JSON.stringify(currentPagination));
-    console.log('pagination: ', JSON.stringify(pagination));
-
-    console.log('after return call getUsers');
-    setLoading(true);
-    const allUsersUseCase: GetAllUsersUseCase = new GetAllUsersUseCase(
-      new UsersRepository(
-        currentContext.storage.LOCAL_DATA_SOURCE,
-        currentContext.storage.REMOTE_DATA_SOURCE,
-      ),
-      currentPagination,
-      filter,
-    );
-
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-    await allUsersUseCase
-      .execute()
-      // eslint-disable-next-line promise/always-return
-      .then((data: PaginatedResult<UserEntity>) => {
-        console.log('HAVE PAGINATED RESULT:', JSON.stringify(data.ResultData));
-        setError('');
-        setLoading(false);
-        setPagination(data.CurrentPagination);
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        setUsers((prevState) => {
-          const newItems =
-            currentPagination.getCurrentPage() === 0
-              ? [...data.ResultData]
-              : [...prevState, ...data.ResultData];
-
-          return newItems;
-        });
-      })
-      .catch((e) => {
-        console.log('have ERROR get all users :', JSON.stringify(e));
-        if (
-          (e as RemoteDataSourceException).code ===
-          NOT_FOUND_REMOTE_DATASOURCE_EXCEPTION_CODE
-        ) {
-          setError('');
-        } else {
-          setError(stringifyError(e));
-        }
-        setLoading(false);
-        setUsers([]);
-      });
-    console.log('EXECUTE USE CASES getUsers');
-  }
-
-  const release = () => {
-    console.log('call release in useUsersListViewModel');
-  };
-
-  return {
-    get entity(): UserEntity {
-      return Stubs.createUserEntityWithParams(
-        0,
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-      );
-    },
-    // id: Date.now(),
-    // name: '',
-    users,
-    loading,
-    error,
-    pagination,
-    filter,
-    // eslint-disable-next-line @typescript-eslint/no-misused-promises
-    getUsers,
-    release,
-    updateFilter,
-  };
-}

package/src/Presentation/components/UI/Dialogs/MembersList/MembersList.scss

@@ -1,128 +0,0 @@
-$members-list-container-height: 800px;
-
-.members-container {
-  min-height: $members-list-container-height;
-  max-height: $members-list-container-height;
-  height: $members-list-container-height;
-
-  display: flex;
-  flex-direction: column;
-
-  // border: 3px solid green;
-
-  &--members-information-wrapper {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    margin: 0 0 0 0;
-    height: 64px;
-    min-height: 64px;
-    max-height: 64px;
-
-    // border: 1px solid red;
-
-    &__members-information {
-      font-family: 'Roboto';
-      font-style: normal;
-      font-weight: 500;
-      font-size: 20px;
-      line-height: 24px;
-      letter-spacing: 0.0015em;
-      height: 24px;
-      margin-left: 24px;
-      margin-top: 20px;
-      margin-bottom: 20px;
-
-      // border: 1px solid orange;
-    }
-
-    &__members-information-count{
-      height: 20px;
-      margin: 22px 130px 22px 8px;
-      align-items: center;
-      padding: 2px 6px;
-      gap: 10px;
-      background: var(--disabled-elements);
-      border-radius: 30px;
-
-      font-family: 'Roboto';
-      font-style: normal;
-      font-weight: 500;
-      font-size: 12px;
-      line-height: 16px;
-      text-align: center;
-      letter-spacing: 0.5px;
-      color: var(--main-background);
-    }
-    &__members-close {
-      margin-top: 16px;
-      margin-right: 16px;
-      margin-bottom: 16px;
-
-      max-height: 50px;
-
-      // border: 1px solid purple;
-    }
-  }
-
-
-  &--members-search-wrapper{
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    margin: 0 0 0 0;
-    height: 76px;
-    min-height: 76px;
-    max-height: 76px;
-
-    // border: 1px solid red;
-
-    &__search-member-input{
-      margin: 16px;
-      max-width: 288px;
-      width: 288px;
-      //padding-right: 6px;
-
-      box-sizing: border-box;
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-start;
-
-      align-items: center;
-      text-align: center;
-      align-content: center;
-
-      width: 320px;
-      height: 44px;
-
-      border: 1px solid #90979F;
-      border-radius: 4px;
-
-      background-color: var(--main-background);
-      color: var(--secondary-text);
-
-      input {
-        color: var(--secondary-text);
-        background-color: var(--main-background);
-
-        font-family: 'Roboto';
-        font-style: normal;
-        font-weight: 400;
-        font-size: 16px;
-        line-height: 24px;
-
-        display: flex;
-        align-items: center;
-        letter-spacing: 0.15px;
-      }
-
-    }
-
-    &--members-list-wrapper{
-      //border: 3px solid firebrick;
-      display: flex;
-      max-height: 660px;
-      height: 660px;
-    }
-  }
-}

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

@@ -1,93 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import './MembersList.scss';
-import ColumnContainer from '../../../containers/ColumnContainer/ColumnContainer';
-import ActiveSvg from '../../svgs/ActiveSvg/ActiveSvg';
-import Close from '../../svgs/Icons/Navigation/Close';
-import { FunctionTypeVoidToVoid } from '../../../../Views/Base/BaseViewModel';
-import { UserEntity } from '../../../../../Domain/entity/UserEntity';
-import Search from '../../svgs/Icons/Navigation/Search';
-import UsersList from '../DialogInformation/UsersList/UsersList';
-
-type MembersListProps = {
-  closeInformationHandler: FunctionTypeVoidToVoid;
-  members: UserEntity[];
-};
-// eslint-disable-next-line react/function-component-definition
-const MembersList: React.FC<MembersListProps> = ({
-  closeInformationHandler,
-  members,
-}: MembersListProps) => {
-  const [userNameForFilter, setUserNameForFilter] = useState<string>('');
-  const [membersListFilter, setMembersListFilter] = useState<UserEntity[]>([
-    ...members,
-  ]);
-
-  useEffect(() => {
-    if (userNameForFilter.length >= 3) {
-      const newFilteredMembers = members.filter((item) =>
-        item.full_name
-          ? item.full_name
-              .toUpperCase()
-              .includes(userNameForFilter.toUpperCase(), 0)
-          : false,
-      );
-
-      setMembersListFilter([...newFilteredMembers]);
-    } else {
-      setMembersListFilter([...members]);
-    }
-  }, [userNameForFilter]);
-
-  return (
-    <div className="members-container">
-      <ColumnContainer>
-        <div className="members-container--members-information-wrapper">
-          <div className="members-container--members-information-wrapper__members-information">
-            Members
-          </div>
-          <div className="members-container--members-information-wrapper__members-information-count">
-            {members.length}
-          </div>
-          <div className="members-container--members-information-wrapper__members-close">
-            <ActiveSvg
-              content={<Close applyZoom color="var(--secondary-elements)" />}
-              clickAction={() => {
-                if (closeInformationHandler) {
-                  closeInformationHandler();
-                }
-              }}
-            />
-          </div>
-        </div>
-        <div className="members-container--members-search-wrapper">
-          <div className="members-container--members-search-wrapper__search-member-input">
-            <Search
-              applyZoom
-              width="24"
-              height="24"
-              color="var(--tertiary-elements)"
-            />
-            <input
-              type="text"
-              style={{ width: '280px' }}
-              value={userNameForFilter}
-              onChange={(event) => {
-                setUserNameForFilter(event.target.value);
-              }}
-              placeholder="Search"
-            />
-          </div>
-        </div>
-        <div className="members-container--members-list-wrapper">
-          <UsersList
-            usersFirstPageToView={[...membersListFilter]}
-            allUsers={[...membersListFilter]}
-            usersInDialogCount={membersListFilter.length}
-          />
-        </div>
-      </ColumnContainer>
-    </div>
-  );
-};
-
-export default MembersList;

package/src/Presentation/components/UI/Dialogs/MessagesView/AIWidgets/AIMessageWidget.ts

@@ -1,40 +0,0 @@
-import {
-  FunctionTypeFileWithContextToToVoid,
-  FunctionTypeJSXElement,
-  FunctionTypeStringWithContextToString, FunctionTypeVoidToTones,
-} from '../../../../../Views/Base/BaseViewModel';
-import {Tone} from "./Tone";
-
-export 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;
-}
-
-export interface AIWidget {
-  renderWidget: FunctionTypeJSXElement;
-}
-export interface AITextWidget extends AIWidget {
-  textToContent: string | undefined;
-}
-
-export interface AIFileWidget extends AIWidget {
-  fileToContent: File | undefined;
-}
-
-export interface AIMessageWidget extends AITextWidget {
-  textToWidget: FunctionTypeStringWithContextToString;
-}
-//
-export interface AIRephraseWidget extends AIMessageWidget {
-  tonesToWidget: FunctionTypeVoidToTones;
-}
-//
-export interface AIAttachmentWidget extends AIFileWidget {
-  fileToWidget: FunctionTypeFileWithContextToToVoid;
-}

package/src/Presentation/components/UI/Dialogs/MessagesView/AIWidgets/AIWidgetActions/AIWidgetActions.scss

@@ -1,55 +0,0 @@
-
-.dropdown-context-menu-tone * {
-  box-sizing: border-box;
-}
-.dropdown-context-menu-tone {
-  position: absolute;
-  bottom: -15px;
-  right: 0;
-  zIndex: 1;
-  width: max-content;
-  height: max-content;
-
-  background: var(--primary-primary-a-100, #ffffff);
-  border-radius: 4px;
-  padding: 8px 0px 8px 0px;
-
-  box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.04),
-  0px 3px 14px 0px rgba(0, 0, 0, 0.08), 0px 8px 10px 0px rgba(0, 0, 0, 0.12);
-
-}
-
-.dropdown-context-menu-tone-menu-item {
-  padding: 4px 8px 4px 16px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: flex-start;
-  align-self: stretch;
-  flex-shrink: 0;
-  position: relative;
-}
-
-.dropdown-context-menu-tone-menu-item-title {
-  color: var(--secondary-secondary-900, #0b121b);
-  text-align: left;
-  font: var(--body-body-medium, 400 14px/20px "Roboto", sans-serif);
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-}
-
-.dropdown-context-menu-tone-menu-item-icon {
-  border-radius: 4px;
-  padding: 4px;
-  display: flex;
-  flex-direction: row;
-  gap: 0px;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: 24px;
-  height: 24px;
-  position: relative;
-}

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

@@ -1,122 +0,0 @@
-import React, { useState, CSSProperties, useRef, useEffect } from 'react';
-import './AIWidgetActions.scss';
-import EditDots from '../../../../svgs/Icons/Actions/EditDots';
-
-export type MenuItem = {
-  title: string;
-  icon?: JSX.Element; // Добавлено поле для иконки пункта меню
-  action: () => void;
-};
-
-type ContextMenuProps = {
-  widgetToRender?: JSX.Element;
-  items?: MenuItem[];
-  title?: string | null;
-  disabled?: boolean;
-};
-
-const ContextMenuStyles: { [key: string]: CSSProperties } = {
-  contextMenuIcon: {
-    display: 'inline-block',
-    position: 'relative',
-    maxWidth: '42px',
-    maxHeight: '42px',
-    // cursor: 'pointer',
-  },
-  contextMenuContent: {
-    position: 'absolute',
-    bottom: '10px',
-    right: '0',
-    backgroundColor: 'white',
-    border: '1px solid gray',
-    borderRadius: '8px',
-    padding: '4px',
-    zIndex: 1,
-    width: 'max-content',
-  },
-  menuItemContainer: {
-    display: 'flex',
-    alignItems: 'center',
-    padding: '4px',
-    cursor: 'pointer',
-    fontWeight: 'normal',
-  },
-  menuTitle: {
-    padding: '4px',
-    fontWeight: 'bold',
-  },
-};
-
-function AIWidgetActions({
-  items,
-  widgetToRender,
-  title = null,
-  disabled = true,
-}: ContextMenuProps) {
-  const [menuVisible, setMenuVisible] = useState(false);
-  const contextMenuRef = useRef<HTMLDivElement | null>(null);
-
-  const handleClick = () => {
-    if (disabled) setMenuVisible(!menuVisible);
-  };
-
-  const handleMenuItemClick = (action: () => void) => {
-    action();
-    setMenuVisible(false);
-  };
-
-  useEffect(() => {
-    function handleClickOutside(event: MouseEvent) {
-      if (
-        contextMenuRef.current &&
-        !contextMenuRef.current.contains(event.target as Node)
-      ) {
-        setMenuVisible(false);
-      }
-    }
-
-    document.addEventListener('mousedown', handleClickOutside);
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
-
-  return (
-    <div style={ContextMenuStyles.contextMenuIcon}>
-      <div onClick={handleClick}>{widgetToRender || <EditDots />}</div>
-      {menuVisible && (
-        // <div ref={contextMenuRef} style={ContextMenuStyles.contextMenuContent}>
-        <div
-          ref={contextMenuRef}
-          className="dropdown-context-menu-tone"
-          style={{ cursor: 'pointer' }}
-        >
-          {title && <div style={ContextMenuStyles.menuTitle}>{title}</div>}
-          {items?.map((item, index) => (
-            <div
-              key={index}
-              // style={ContextMenuStyles.menuItemContainer}
-              className="dropdown-context-menu-tone-menu-item"
-              onClick={() => {
-                handleMenuItemClick(item.action);
-              }}
-            >
-              {item.icon && (
-                <div className="dropdown-context-menu-tone-menu-item-icon">
-                  {item.icon}
-                </div>
-              )}
-              <div className="dropdown-context-menu-tone-menu-item-title">
-                {item.title}
-              </div>
-              <div className="dropdown-context-menu-tone-menu-item-icon" />
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default AIWidgetActions;

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

@@ -1,98 +0,0 @@
-import React, { useState, CSSProperties } from 'react';
-
-type ErrorDescription = {
-  title: string;
-  action: () => void;
-};
-
-type ErrorMessageIconProps = {
-  errorMessageText: string;
-  errorsDescriptions?: ErrorDescription[];
-};
-
-const errorMessageIconStyles: { [key: string]: CSSProperties } = {
-  errorIcon: {
-    display: 'inline-block',
-    position: 'relative',
-    width: '21px', // Уменьшен размер круга
-    height: '21px', // Уменьшен размер круга
-    cursor: 'pointer',
-  },
-  circle: {
-    width: '21px', // Уменьшен размер круга
-    height: '21px', // Уменьшен размер круга
-    backgroundColor: 'red',
-    borderRadius: '50%',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  exclamationMark: {
-    color: 'white',
-    fontSize: '12px', // Уменьшен размер восклицательного знака
-  },
-  errorMessage: {
-    position: 'absolute',
-    bottom: '100%', // Изменено выравнивание, чтобы текст был выше
-    left: '50%',
-    transform: 'translateX(-50%)',
-    backgroundColor: 'lightgray',
-    border: '1px solid gray',
-    padding: '6px',
-    borderRadius: '8px',
-    whiteSpace: 'nowrap',
-    display: 'inline-block',
-    zIndex: 1, // Установлен zIndex, чтобы текст был выше других элементов
-  },
-};
-
-function ErrorMessageIcon({
-  errorMessageText,
-  errorsDescriptions,
-}: ErrorMessageIconProps) {
-  const [isHovered, setIsHovered] = useState(false);
-
-  const handleMouseEnter = () => {
-    setIsHovered(true);
-  };
-
-  const handleMouseLeave = () => {
-    setIsHovered(false);
-  };
-
-  return (
-    <div
-      style={{
-        ...errorMessageIconStyles.errorIcon,
-        ...(isHovered ? { backgroundColor: 'yellow' } : {}),
-      }}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-    >
-      <div style={errorMessageIconStyles.circle}>
-        <span style={errorMessageIconStyles.exclamationMark}>!</span>
-      </div>
-      {isHovered && (
-        <div style={errorMessageIconStyles.errorMessage}>
-          {errorMessageText}
-          {errorsDescriptions?.map((item, index) => (
-            <div
-              key={index}
-              style={{
-                padding: '4px',
-                cursor: 'pointer',
-              }}
-              onClick={() => {
-                item.action();
-              }}
-            >
-              {item.title}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default ErrorMessageIcon;