quickblox-react-ui-kit 0.1.7 → 0.2.0

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

@@ -0,0 +1,60 @@
+import { useState } from 'react';
+import { AIWidget } from './AIWidget';
+
+export default function useDefaultTextInputWidget(): AIWidget {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/no-empty-function
+  const fileToWidget = (file: File): void => {};
+
+  const renderWidget = (): JSX.Element => {
+    // return <SendIcon width="21" height="18" applyZoom color="red" />;
+    return (
+      <div
+        style={{
+          width: '21',
+          height: '18',
+          color: 'red',
+          fontSize: '9px',
+          fontStyle: 'bold',
+          fontWeight: '900',
+          border: '2px solid red',
+        }}
+      >
+        T2V
+      </div>
+    );
+  };
+
+  async function getData(textToSend: string): Promise<string> {
+    const response = await fetch(
+      `https://func270519800.azurewebsites.net/api/TranslateTextToEng?text=${textToSend}`,
+    );
+
+    console.log('getData: response: ', response);
+    const data = await response.text();
+
+    console.log(
+      'getData have response: ',
+      JSON.stringify(data.replaceAll('\n\n', '')),
+    );
+
+    return data.replaceAll('\n\n', '');
+  }
+
+  const [textFromWidgetToInput, setTextFromWidgetToInput] = useState('');
+  const textToWidget = (value: string): void => {
+    if (value && value.length > 0) {
+      // eslint-disable-next-line promise/catch-or-return,promise/always-return
+      getData(value).then((data) => {
+        setTextFromWidgetToInput(data);
+      });
+    }
+  };
+
+  return {
+    fileToContent: undefined,
+    textToContent: textFromWidgetToInput,
+    fileToWidget,
+    renderWidget,
+    textToWidget,
+  };
+}

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

@@ -0,0 +1,86 @@
+import { useState } from 'react';
+import { AIWidget } from './AIWidget';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import VoiceIcon from '../../../svgs/Icons/Actions/Voice';
+
+export default function useDefaultVoiceInputWidget(): AIWidget {
+  const renderWidget = (): JSX.Element => {
+    // return <VoiceIcon width="21" height="18" applyZoom color="red" />;
+    return (
+      <div
+        style={{
+          width: '21',
+          height: '18',
+          color: 'red',
+          fontSize: '9px',
+          fontStyle: 'bold',
+          fontWeight: '900',
+          border: '2px solid red',
+        }}
+      >
+        v2t
+      </div>
+    );
+  };
+
+  const [textFromWidgetToInput, setTextFromWidgetToInput] = useState('');
+  const textToWidget = (value: string): void => {
+    if (value && value.length > 0) {
+      setTextFromWidgetToInput(value.toUpperCase());
+    }
+  };
+
+  const [audioFromWidgetToInput, setAudioFromWidgetToInput] = useState<File>();
+
+  async function sendFile(file: File): Promise<any> {
+    if (file) {
+      // Создание объекта FormData и добавление файла
+      const formData = new FormData();
+
+      formData.append('file', file, file.name);
+
+      // Отправка запроса POST с телом formData
+      const response = await fetch(
+        'https://func270519800.azurewebsites.net/api/VoiceToText',
+        {
+          method: 'POST',
+          body: formData,
+        },
+      );
+
+      // Возвращение данных из ответа
+      console.log('sendFile: response: ', response);
+      const data = await response.text();
+
+      console.log(
+        'sendFile have response: ',
+        JSON.stringify(data.replaceAll('\n\n', '')),
+      );
+
+      return data.replaceAll('\n\n', '');
+    }
+  }
+
+  const fileToWidget = (file: File): void => {
+    setAudioFromWidgetToInput(file);
+    const fileInfo = `${file.name}, ${file.type}, ${file.size} Mb`;
+
+    console.log(fileInfo);
+    if (file) {
+      // Отправка файла и получение результата
+      sendFile(file).then((result) => {
+        // Обработка результата
+        console.log(result);
+        setTextFromWidgetToInput(result);
+      });
+    }
+  };
+
+  return {
+    fileToContent: audioFromWidgetToInput,
+    textToContent: textFromWidgetToInput,
+    fileToWidget,
+    renderWidget,
+    textToWidget,
+  };
+}

package/src/Presentation/components/UI/Dialogs/MessagesView/ContextMenu.tsx

@@ -0,0 +1,96 @@
+import React, { useState, CSSProperties, useRef, useEffect } from 'react';
+import EditDots from '../../svgs/Icons/Actions/EditDots';
+
+type MenuItem = {
+  title: string;
+  action: () => void;
+};
+
+type ContextMenuProps = {
+  items?: MenuItem[];
+};
+
+const ContextMenuStyles: { [key: string]: CSSProperties } = {
+  contextMenuIcon: {
+    display: 'inline-block',
+    position: 'relative',
+    width: '42px',
+    height: '42px',
+    cursor: 'pointer',
+  },
+  contextMenuContent: {
+    position: 'absolute',
+    top: '0',
+    left: '50%',
+    transform: 'translateX(-50%)',
+    backgroundColor: 'white',
+    border: '1px solid gray',
+    borderRadius: '8px',
+    padding: '4px',
+    zIndex: 1,
+    width: 'max-content',
+  },
+};
+
+function ContextMenu({ items }: 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}>
+        <EditDots />
+      </div>
+      {menuVisible && (
+        <div ref={contextMenuRef} style={ContextMenuStyles.contextMenuContent}>
+          {items?.map((item, index) => (
+            <div
+              key={index}
+              style={{
+                padding: '4px',
+                cursor: 'pointer',
+              }}
+              onClick={() => {
+                handleMenuItemClick(item.action); // Используем новую функцию обработчика
+              }}
+            >
+              {item.title}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default ContextMenu;