quickblox-react-ui-kit 0.2.8 → 0.3.0-beta.2

package/src/Presentation/Views/Dialog/AIComponents/AITranslate/AITranslate.tsx

@@ -0,0 +1,117 @@
+import Dropdown from '../../../../ui-components/Dropdown/Dropdown';
+import { ReactComponent as TranslateSvg } from '../../../../icons/actions/translate.svg';
+import { MessageEntity } from '../../../../../Domain/entity/MessageEntity';
+import { AIMessageWidget } from '../../AIWidgets/AIMessageWidget';
+import { AIUtils } from '../../../../../utils/utils';
+import './AITranslate.scss';
+
+interface AITranslateComponentProps {
+  AITranslateWidget: AIMessageWidget;
+  originalTextMessage: boolean;
+  loading?: boolean;
+  defaultLanguage: string;
+  languages: string[];
+  maxTokens?: number;
+  onLoading: (isLoading: boolean, id: string) => void;
+  onError: (messageError: string) => void;
+  onTranslated: (id: string, textTranslated: string) => void;
+  messageToTranslate?: MessageEntity;
+  messageHistory?: MessageEntity[];
+  currentUserId?: number;
+}
+
+export default function AITranslate({
+  AITranslateWidget,
+  originalTextMessage,
+  loading = false,
+  defaultLanguage,
+  languages,
+  maxTokens,
+  onLoading,
+  onError,
+  onTranslated,
+  messageToTranslate,
+  messageHistory,
+  currentUserId,
+}: AITranslateComponentProps) {
+  const options = languages.map((lang) => ({ value: lang, label: lang }));
+
+  async function translateHandler(translateLanguage: string) {
+    if (loading) {
+      return;
+    }
+
+    if (!messageToTranslate || !messageHistory) {
+      onError('Translation failed.');
+      onLoading(false, messageToTranslate ? messageToTranslate.id : '0');
+      onTranslated(messageToTranslate ? messageToTranslate.id : '0', '');
+
+      return;
+    }
+
+    onLoading(true, messageToTranslate.id);
+
+    try {
+      const textTranslate = await AITranslateWidget.textToWidget(
+        messageToTranslate.message,
+        AIUtils.messageEntitiesToIChatMessageCollection(
+          messageHistory,
+          currentUserId,
+          maxTokens,
+        ),
+        { language: translateLanguage },
+      );
+
+      if (textTranslate === 'Translation failed.') {
+        onError('Translation failed.');
+        onTranslated(messageToTranslate.id, '');
+      } else {
+        onTranslated(messageToTranslate.id, textTranslate || '');
+      }
+    } catch (error) {
+      onError('Translation failed.');
+      onTranslated(messageToTranslate.id, '');
+    } finally {
+      onLoading(false, messageToTranslate.id);
+    }
+  }
+
+  return (
+    <div className="ai-translate">
+      <div
+        className={
+          loading ? 'translate__caption--disable' : 'ai-translate__caption'
+        }
+      >
+        <div
+          className="ai-translate__caption__label"
+          onClick={() => {
+            if (originalTextMessage) {
+              translateHandler(defaultLanguage);
+            } else {
+              onTranslated(
+                messageToTranslate ? messageToTranslate.id : '0',
+                '',
+              );
+            }
+          }}
+        >
+          {originalTextMessage ? 'Show translation' : 'Show original'}
+        </div>
+      </div>
+      <div>
+        <Dropdown
+          options={options}
+          disabled={loading}
+          onSelect={(language) => {
+            translateHandler(language);
+          }}
+        >
+          <div className="ai-translate__icon">
+            <TranslateSvg className="ai-translate__icon__media-translate" />
+          </div>
+        </Dropdown>
+      </div>
+    </div>
+  );
+}

package/src/Presentation/Views/Dialog/AIComponents/AITranslateComponent/AITranslateComponent.scss

@@ -0,0 +1,47 @@
+.translate-wrapper {
+  padding: 0px 12px 0px 0px;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  justify-content: flex-end;
+  align-self: stretch;
+  flex-shrink: 0;
+  position: relative;
+}
+
+.translate-caption {
+  display: flex;
+  flex-direction: row;
+  gap: 0px;
+  align-items: center;
+  justify-content: flex-end;
+  flex: 1;
+  position: relative;
+}
+
+.ai-translate-action {
+  color: var(--tertiary-elements);
+  text-align: right;
+  font: 500 11px/16px "Roboto", sans-serif;
+  position: relative;
+}
+
+.icon-translate {
+  border-radius: 4px;
+  display: flex;
+  flex-direction: row;
+  gap: 0px;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  position: relative;
+}
+.media-translate {
+  align-self: stretch;
+  flex: 1;
+  position: relative;
+  overflow: visible;
+}

package/src/Presentation/Views/Dialog/AIComponents/AITranslateComponent/AITranslateComponent.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import './AITranslateComponent.scss';
+import AIWidgetActions from '../../AIWidgets/AIWidgetActions/AIWidgetActions';
+import TranslateIcon from '../../../../components/UI/svgs/Icons/Media/Translate';
+import {
+  FunctionTypeStringToVoid,
+  FunctionTypeVoidToVoid,
+} from '../../../../../CommonTypes/BaseViewModel';
+
+interface AITranslateComponentProps {
+  onTranslate: FunctionTypeStringToVoid;
+  onClickOriginalText: FunctionTypeVoidToVoid;
+  originalTextMessage: boolean;
+  waitAITranslateWidget: boolean;
+  languagesForAITranslate: string[];
+}
+
+export default function AITranslateComponent(props: AITranslateComponentProps) {
+  const {
+    onTranslate,
+    onClickOriginalText,
+    originalTextMessage,
+    waitAITranslateWidget,
+    languagesForAITranslate,
+  } = props;
+
+  return (
+    <div className="translate-wrapper">
+      <div className="translate-caption">
+        <div
+          className="ai-translate-action"
+          style={{
+            cursor: waitAITranslateWidget ? '' : 'pointer',
+          }}
+          onClick={() => {
+            if (waitAITranslateWidget) return;
+
+            if (originalTextMessage) {
+              onTranslate('');
+            } else {
+              onClickOriginalText();
+            }
+          }}
+        >
+          {originalTextMessage ? 'Show translation' : 'Show original'}
+        </div>
+      </div>
+      <AIWidgetActions
+        disabled={!waitAITranslateWidget}
+        widgetToRender={
+          <div
+            className="icon-translate"
+            style={{
+              cursor: waitAITranslateWidget ? '' : 'pointer',
+            }}
+          >
+            <TranslateIcon
+              width="16"
+              height="16"
+              applyZoom
+              color="var(--tertiary-elements)"
+            />
+          </div>
+        }
+        items={languagesForAITranslate.map((item) => {
+          return {
+            title: item,
+            action: () => {
+              if (!props.waitAITranslateWidget) {
+                props.onTranslate(item);
+              }
+            },
+          };
+        })}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,40 @@
+import {
+  FunctionTypeFileWithContextToToVoid,
+  FunctionTypeJSXElement,
+  FunctionTypeStringWithContextToString,
+  FunctionTypeVoidToTones,
+} from '../../../../CommonTypes/BaseViewModel';
+
+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/Views/Dialog/AIWidgets/AIRephraseWidget/AIRephraseWidget.scss

@@ -0,0 +1,20 @@
+.right {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+  justify-content: flex-end;
+  flex-shrink: 0;
+  position: relative;
+  margin-bottom: 5px;
+}
+.rephrase-icon{
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  fill: var(--color-icon);
+
+  svg path{
+    fill: var(--color-icon);
+  }
+}

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

@@ -0,0 +1,177 @@
+import React, { useEffect, useState } from 'react';
+import './AIRephraseWidget.scss';
+import { Tone } from 'qb-ai-rephrase/src/Tone';
+import { QBAIRephrase } from 'qb-ai-rephrase';
+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;
+};
+// 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,
+}: 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
+        ) {
+          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 ? 'pointer' : '',
+          }}
+        >
+          <AIWidgetActions
+            widgetToRender={
+              <RephraseSvg className="rephrase-icon" />
+              // <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

@@ -0,0 +1,55 @@
+
+.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

@@ -0,0 +1,122 @@
+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;