quickblox-react-ui-kit 0.1.8 → 0.2.1

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

@@ -0,0 +1,24 @@
+import {
+  FunctionTypeFileWithContextToToVoid,
+  FunctionTypeJSXElement,
+  FunctionTypeStringWithContextToString,
+} from '../../../../../Views/Base/BaseViewModel';
+
+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 AIAttachmentWidget extends AIFileWidget {
+  fileToWidget: FunctionTypeFileWithContextToToVoid;
+}

package/src/Presentation/components/UI/Dialogs/MessagesView/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/components/UI/Dialogs/MessagesView/AIWidgets/AIWidgetActions/AIWidgetActions.tsx

@@ -0,0 +1,116 @@
+import React, { useState, CSSProperties, useRef, useEffect } from 'react';
+import './AIWidgetActions.scss';
+import EditDots from '../../../../svgs/Icons/Actions/EditDots';
+
+type MenuItem = {
+  title: string;
+  icon?: JSX.Element; // Добавлено поле для иконки пункта меню
+  action: () => void;
+};
+
+type ContextMenuProps = {
+  widgetToRender?: JSX.Element;
+  items?: MenuItem[];
+  title?: string | null;
+};
+
+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,
+}: ContextMenuProps) {
+  const [menuVisible, setMenuVisible] = useState(false);
+  const contextMenuRef = useRef<HTMLDivElement | null>(null);
+
+  const handleClick = () => {
+    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">
+          {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

@@ -0,0 +1,98 @@
+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/components/UI/Dialogs/MessagesView/AIWidgets/SliderMenu.tsx

@@ -0,0 +1,172 @@
+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/components/UI/Dialogs/MessagesView/AIWidgets/Tone.ts

@@ -0,0 +1,21 @@
+export enum Tone {
+  Professional = 'Professional Tone',
+  Friendly = 'Friendly Tone',
+  Encouraging = 'Encouraging Tone',
+  Empathetic = 'Empathetic Tone',
+  Neutral = 'Neutral Tone',
+  Assertive = 'Assertive Tone',
+  Instructive = 'Instructive Tone',
+  Persuasive = 'Persuasive Tone',
+  Sarcastic = 'Sarcastic/Ironic Tone',
+  Poetic = 'Poetic Tone',
+  Unchanged = 'Unchanged',
+}
+
+export const toneToString = (tone: Tone): string => {
+  return tone;
+};
+
+export const stringToTone = (toneStr: string): Tone | undefined => {
+  return Tone[toneStr as keyof typeof Tone];
+};

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

@@ -0,0 +1,99 @@
+import { useState } from 'react';
+import { AIMessageWidget } from './AIMessageWidget';
+import AIWidgetIcon from '../../../svgs/Icons/AIWidgets/AIWidget';
+import ErrorMessageIcon from './ErrorMessageIcon';
+import { AISource, IChatMessage } from '../../../../../../Data/source/AISource';
+
+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;
+  sessionToken: string;
+  apiKey: string;
+}
+export default function UseDefaultAIAssistAnswerWidget({
+  servername,
+  api,
+  port,
+  sessionToken,
+  apiKey,
+}: MessageWidgetProps): AIMessageWidget {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [errorMessage, setErrorMessage] = useState<string>('');
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/no-empty-function
+  const fileToWidget = (file: File, context: IChatMessage[]): void => {};
+
+  const renderWidget = (): JSX.Element => {
+    if (errorMessage && errorMessage.length > 0) {
+      const errorsDescriptions:
+        | { title: string; action: () => void }[]
+        | undefined = [];
+
+      return (
+        <ErrorMessageIcon
+          errorMessageText={errorMessage}
+          errorsDescriptions={errorsDescriptions}
+        />
+      );
+    }
+
+    return <AIWidgetIcon applyZoom color="green" />;
+  };
+
+  const [textFromWidgetToContent, setTextFromWidgetToContent] = useState('');
+  const textToWidget = async (
+    textToSend: string,
+    context: IChatMessage[],
+  ): Promise<string> => {
+    if (textToSend && textToSend.length > 0) {
+      const prompt = `You are a customer support chat operator. Your goal is to provide helpful and informative responses to customer inquiries. Give a response to the next user's query, considering the entire conversation context, and use grammar and vocabulary at the A2-B2 level. Answer in the format of simple sentences. Do not include question in answer. Please, provide answer for this issue:"${textToSend}"`;
+
+      if (apiKey.length > 0) {
+        // eslint-disable-next-line no-return-await
+        return await AISource.getData(
+          prompt,
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+          context,
+          servername,
+          api,
+          port,
+          sessionToken,
+        ).then((data) => {
+          setTextFromWidgetToContent(data);
+
+          return data;
+        });
+      }
+
+      // eslint-disable-next-line no-return-await
+      return await AISource.getDataWithProxyServer(
+        prompt,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        context,
+        servername,
+        api,
+        port,
+        sessionToken,
+      ).then((data) => {
+        setTextFromWidgetToContent(data);
+
+        return data;
+      });
+
+      // eslint-disable-next-line no-return-await
+    }
+
+    return '';
+  };
+
+  return {
+    textToContent: textFromWidgetToContent,
+    renderWidget,
+    textToWidget,
+  };
+}

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

@@ -0,0 +1,105 @@
+import { useState } from 'react';
+import { AIMessageWidget } from './AIMessageWidget';
+import ErrorMessageIcon from './ErrorMessageIcon';
+import AIWidgetIcon from '../../../svgs/Icons/AIWidgets/AIWidget';
+import { Tone, toneToString } from './Tone';
+import { AISource, IChatMessage } from '../../../../../../Data/source/AISource';
+
+interface MessageWidgetProps {
+  servername: string;
+  api: string;
+  port: string;
+  sessionToken: string;
+  apiKey: string;
+}
+
+export default function UseDefaultAIRephraseMessageWidget({
+  servername,
+  api,
+  port,
+  sessionToken,
+  apiKey,
+}: MessageWidgetProps): AIMessageWidget {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [errorMessage, setErrorMessage] = useState<string>('');
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/no-empty-function
+  const fileToWidget = (file: File, context: IChatMessage[]): void => {};
+
+  const renderWidget = (): JSX.Element => {
+    if (errorMessage && errorMessage.length > 0) {
+      const errorsDescriptions:
+        | { title: string; action: () => void }[]
+        | undefined = [];
+
+      return (
+        <ErrorMessageIcon
+          errorMessageText={errorMessage}
+          errorsDescriptions={errorsDescriptions}
+        />
+      );
+    }
+
+    return <AIWidgetIcon applyZoom color="green" />;
+  };
+
+  const [textFromWidgetToContent, setTextFromWidgetToContent] = useState('');
+
+  const textToWidget = async (
+    textToSend: string,
+    context: IChatMessage[],
+    additionalSettings?: { [key: string]: any },
+  ): Promise<string> => {
+    if (textToSend && textToSend.length > 0) {
+      let prompt = `Analyze the entire context of our conversation – all the messages – and create a brief summary of our discussion. Based on this analysis, rephrase the following text in a style and tone that is typical for most of the dialogue messages. Provide only the rephrased text in as the message text to rephrase and nothing more.Give me only rephrase text in brackets and nothing more. Here is the message text to rephrase:"${textToSend}"`;
+      const { tone } = additionalSettings || {};
+
+      if (tone) {
+        prompt = `Analyze the entire context of our conversation – all the messages – and create a brief summary of our discussion. Based on this analysis, rephrase the following text in a ${toneToString(
+          tone as Tone,
+        )} style. Provide only the rephrased text in the same language as the message text to rephrase and nothing more.Give me only rephrase text in brackets and nothing more. Here is the message text to rephrase:"${textToSend}"`;
+      }
+
+      if (apiKey.length > 0) {
+        // eslint-disable-next-line no-return-await
+        return await AISource.getData(
+          prompt,
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+          context,
+          servername,
+          api,
+          port,
+          sessionToken,
+        ).then((data) => {
+          setTextFromWidgetToContent(data);
+
+          return data;
+        });
+      }
+
+      // eslint-disable-next-line no-return-await
+      return await AISource.getDataWithProxyServer(
+        prompt,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        context,
+        servername,
+        api,
+        port,
+        sessionToken,
+      ).then((data) => {
+        setTextFromWidgetToContent(data);
+
+        return data;
+      });
+    }
+
+    //
+    return '';
+  };
+
+  return {
+    textToContent: textFromWidgetToContent,
+    renderWidget,
+    textToWidget,
+  };
+}