quickblox-react-ui-kit 0.4.1 → 0.4.2-beta.2

package/src/Presentation/Views/Dialog/AIWidgets/AIRephraseWidget/AIRephraseWidget.tsx

@@ -1,186 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import './AIRephraseWidget.scss';
-import { Tone } from 'qb-ai-rephrase/src/Tone';
-import { QBAIRephrase } from 'qb-ai-rephrase';
-import cn from 'classnames';
-import {
-  FunctionTypeBooleanToVoid,
-  FunctionTypeStringToVoid,
-} from '../../../../../CommonTypes/BaseViewModel';
-import { AIMessageWidget } from '../AIMessageWidget';
-import { MessageEntity } from '../../../../../Domain/entity/MessageEntity';
-import AIWidgetActions, { MenuItem } from '../AIWidgetActions/AIWidgetActions';
-import NecktieIcon from '../../../../components/UI/svgs/Icons/AIWidgets/NecktieIcon';
-import HandshakeIcon from '../../../../components/UI/svgs/Icons/AIWidgets/HandshakeIcon';
-import MuscleIcon from '../../../../components/UI/svgs/Icons/AIWidgets/MuscleIcon';
-import PalmsUpTogetherIcon from '../../../../components/UI/svgs/Icons/AIWidgets/PalmsUpTogetherIcon';
-import NeutralFaceIcon from '../../../../components/UI/svgs/Icons/AIWidgets/NeutralFaceIcon';
-import HammerIcon from '../../../../components/UI/svgs/Icons/AIWidgets/HammerIcon';
-import BookIcon from '../../../../components/UI/svgs/Icons/AIWidgets/BookIcon/BookIcon';
-import PointUpIcon from '../../../../components/UI/svgs/Icons/AIWidgets/PointUpIcon';
-import SmirkIcon from '../../../../components/UI/svgs/Icons/AIWidgets/SmirkIcon';
-import PerformingArtsIcon from '../../../../components/UI/svgs/Icons/AIWidgets/PerformingArtsIcon';
-import { AIUtils } from '../../../../../utils/utils';
-import WhiteCheckMarkIcon from '../../../../components/UI/svgs/Icons/AIWidgets/WhiteCheckMarkIcon';
-import UiKitTheme from '../../../../themes/UiKitTheme';
-import { RephraseSvg } from '../../../../icons';
-
-type AIRephraseWidgetProps = {
-  messageText: string;
-  waitAIWidget: boolean;
-  setWaitAIWidget: FunctionTypeBooleanToVoid;
-  setMessageErrorToast: FunctionTypeStringToVoid;
-  AIRephrase?: AIMessageWidget;
-  messagesToView: MessageEntity[];
-  currentUserId: number;
-  maxTokensForAIRephrase: number;
-  rephraseTones: Tone[];
-  theme?: UiKitTheme;
-  setPrevValueText: FunctionTypeStringToVoid;
-  disableActions?: boolean;
-};
-// eslint-disable-next-line react/function-component-definition
-const AIRephraseWidget: React.FC<AIRephraseWidgetProps> = ({
-  messageText,
-  waitAIWidget,
-  setWaitAIWidget,
-  setMessageErrorToast,
-  AIRephrase,
-  messagesToView,
-  currentUserId,
-  maxTokensForAIRephrase,
-  rephraseTones,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  theme = undefined,
-  setPrevValueText,
-  disableActions = false,
-}: AIRephraseWidgetProps) => {
-  const [currentMessageText, setCurrentMessageText] =
-    useState<string>(messageText);
-  const [prevTextMessage, setPrevTextMessage] = useState<string>('');
-
-  useEffect(() => {
-    setCurrentMessageText(messageText);
-  }, [messageText]);
-
-  function getDefaultIcon(index: number) {
-    const defaultIcons = [
-      <NecktieIcon />,
-      <HandshakeIcon />,
-      <MuscleIcon />,
-      <PalmsUpTogetherIcon />,
-      <NeutralFaceIcon />,
-      <HammerIcon />,
-      <BookIcon />,
-      <PointUpIcon />,
-      <SmirkIcon />,
-      <PerformingArtsIcon />,
-    ];
-
-    return defaultIcons[index] || <NeutralFaceIcon />;
-  }
-
-  function getAIEditingMessagesItems() {
-    const items: MenuItem[] = [];
-
-    const tones = rephraseTones || QBAIRephrase.defaultTones();
-
-    for (let i = 0; i < tones.length; i += 1) {
-      const tone = tones[i];
-      const title = tone.name;
-      const icon = getDefaultIcon(i) || <NeutralFaceIcon />;
-
-      const action = () => {
-        if (
-          currentMessageText &&
-          currentMessageText.length > 0 &&
-          !waitAIWidget &&
-          !disableActions
-        ) {
-          setWaitAIWidget(true);
-          setPrevTextMessage(currentMessageText);
-          AIRephrase?.textToWidget(
-            currentMessageText,
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-argument
-            AIUtils.messageEntitiesToIChatMessageCollection(
-              messagesToView,
-              currentUserId,
-              maxTokensForAIRephrase,
-            ),
-            {
-              tone,
-            },
-          )
-            .then((answerText) => {
-              // eslint-disable-next-line promise/always-return
-              if (answerText === 'Rephrase failed.') {
-                setMessageErrorToast('Rephrase failed. Try again.');
-              }
-              setWaitAIWidget(false);
-            })
-            .catch(() => {
-              setMessageErrorToast('Rephrase failed. Try again.');
-              setWaitAIWidget(false);
-            });
-        }
-      };
-
-      items.push({
-        title,
-        icon,
-        action,
-      });
-    }
-    //
-    items.push({
-      title: 'Back to prev.',
-      icon: <WhiteCheckMarkIcon />,
-      action: () => {
-        if (
-          currentMessageText &&
-          currentMessageText.length > 0 &&
-          !waitAIWidget
-        ) {
-          setCurrentMessageText(prevTextMessage);
-          setPrevValueText(prevTextMessage);
-        }
-      },
-    });
-
-    //
-    return items;
-  }
-
-  return (
-    <div className="right">
-      {AIRephrase && (
-        <div
-          className="icon"
-          style={{
-            cursor: !waitAIWidget || !disableActions ? 'pointer' : '',
-          }}
-        >
-          <AIWidgetActions
-            disabled={!disableActions}
-            widgetToRender={
-              <RephraseSvg
-                className={cn('rephrase-icon', {
-                  'rephrase-icon--disable': disableActions,
-                })}
-              />
-              // <ToneIcon
-              //   width="24"
-              //   height="24"
-              //   applyZoom
-              //   color={theme ? theme.mainText() : 'var(--main-text)'}
-              // />
-            }
-            items={getAIEditingMessagesItems()}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default AIRephraseWidget;

package/src/Presentation/Views/Dialog/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/Views/Dialog/AIWidgets/AIWidgetActions/AIWidgetActions.tsx

@@ -1,122 +0,0 @@
-import React, { useState, CSSProperties, useRef, useEffect } from 'react';
-import './AIWidgetActions.scss';
-import EditDots from '../../../../components/UI/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/Views/Dialog/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;

package/src/Presentation/Views/Dialog/AIWidgets/SliderMenu.tsx

@@ -1,172 +0,0 @@
-import React, { useState } from 'react';
-
-type MenuItem = {
-  title: string;
-  icon?: JSX.Element;
-  action: () => void;
-};
-
-type SliderMenuProps = {
-  items: MenuItem[];
-  width: number;
-  arrowColor?: string;
-  activeArrowColor?: string;
-  borderColor?: string;
-  backgroundColor?: string;
-  itemBackgroundColor?: string;
-  itemWidth?: number;
-  itemHeight?: number;
-  itemBorder?: string;
-  fontSize?: number;
-  activeItemBorderColor?: string;
-  activeItemBoxShadow?: string;
-};
-
-// eslint-disable-next-line react/function-component-definition
-const SliderMenu: React.FC<SliderMenuProps> = ({
-  items,
-  width,
-  arrowColor = 'black',
-  activeArrowColor = 'red',
-  borderColor = 'gray',
-  backgroundColor = 'white',
-  itemBackgroundColor = 'lightgray',
-  itemWidth = 100,
-  itemHeight = 20,
-  itemBorder = '1px solid gray',
-  fontSize = 14,
-  activeItemBorderColor = 'blue',
-  activeItemBoxShadow = '2px 2px 4px rgba(0, 0, 0, 0.2)',
-}) => {
-  const [currentIndex, setCurrentIndex] = useState(-1);
-  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
-
-  const handlePrev = () => {
-    setCurrentIndex((currentIndex - 1 + items.length) % items.length);
-  };
-
-  const handleNext = () => {
-    setCurrentIndex((currentIndex + 1) % items.length);
-  };
-
-  const handleItemClick = (index: number, action: () => void) => {
-    setCurrentIndex(index);
-    action();
-  };
-
-  return (
-    <div
-      style={{
-        border: `1px solid ${borderColor}`,
-        borderRadius: '10px',
-        padding: '4px',
-        display: 'flex',
-        alignItems: 'center',
-        height: '24px',
-        backgroundColor,
-        position: 'relative',
-        overflow: 'hidden',
-      }}
-    >
-      <div
-        style={{
-          cursor: 'pointer',
-          marginRight: '4px',
-          width: '12px',
-          height: '12px',
-          borderTop: '4px solid transparent',
-          borderBottom: '4px solid transparent',
-          borderRight: `6px solid ${
-            hoveredIndex === null || currentIndex === 0
-              ? arrowColor
-              : activeArrowColor
-          }`,
-          borderRadius: '5px',
-          transition: 'transform 0.3s ease-in-out',
-          transform:
-            hoveredIndex === null || currentIndex === 0
-              ? 'scale(1)'
-              : 'scale(1.2)',
-        }}
-        onClick={handlePrev}
-      />
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          width: `${width}px`,
-          overflow: 'hidden',
-        }}
-      >
-        <div
-          style={{
-            display: 'flex',
-            transform: `translateX(-${currentIndex * itemWidth}px)`,
-            transition: 'transform 0.3s ease-in-out',
-          }}
-        >
-          {items.map((item, index) => (
-            <div
-              key={index}
-              style={{
-                width: `${itemWidth}px`,
-                height: `${itemHeight}px`,
-                display: 'flex',
-                alignItems: 'center',
-                paddingLeft: '4px',
-                backgroundColor: itemBackgroundColor,
-                borderRadius: '8px',
-                margin: '0 2px',
-                border:
-                  index === currentIndex || index === hoveredIndex
-                    ? `2px solid ${activeItemBorderColor}`
-                    : itemBorder,
-                fontSize: `${fontSize}px`,
-                flexDirection: 'row',
-                justifyContent: 'flex-start',
-                cursor: 'pointer',
-                boxShadow:
-                  (index === currentIndex || index === hoveredIndex) &&
-                  currentIndex !== -1
-                    ? activeItemBoxShadow
-                    : 'none',
-              }}
-              onClick={() => handleItemClick(index, item.action)}
-              onMouseEnter={() => setHoveredIndex(index)}
-              onMouseLeave={() => setHoveredIndex(null)}
-            >
-              {item.icon && (
-                <div style={{ marginRight: '4px' }}>{item.icon}</div>
-              )}
-              {item.title}
-            </div>
-          ))}
-        </div>
-      </div>
-      <div
-        style={{
-          cursor: 'pointer',
-          marginLeft: '4px',
-          width: '12px',
-          height: '12px',
-          borderTop: '4px solid transparent',
-          borderBottom: '4px solid transparent',
-          borderLeft: `6px solid ${
-            hoveredIndex === null || currentIndex === items.length - 1
-              ? arrowColor
-              : activeArrowColor
-          }`,
-          borderRadius: '5px',
-          transition: 'transform 0.3s ease-in-out',
-          transform:
-            hoveredIndex === null || currentIndex === items.length - 1
-              ? 'scale(1)'
-              : 'scale(1.2)',
-        }}
-        onClick={handleNext}
-      />
-    </div>
-  );
-};
-
-export default SliderMenu;

package/src/Presentation/Views/Dialog/AIWidgets/Tone.ts

@@ -1,21 +0,0 @@
-export interface Tone {
-  name: string;
-  description: string;
-  iconEmoji: string;
-}
-
-export const toneToString = (tone: Tone): string => {
-  return tone.name;
-};
-
-export const stringToTone = (
-  toneStr: string,
-  description?: string,
-  emoji?: string,
-): Tone | undefined => {
-  return {
-    name: toneStr,
-    description: description || '',
-    iconEmoji: emoji || '',
-  };
-};