quickblox-react-ui-kit 0.1.8 → 0.2.1

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

@@ -0,0 +1,106 @@
+import { useState } from 'react';
+import AIWidgetIcon from '../../../svgs/Icons/AIWidgets/AIWidget';
+import ErrorMessageIcon from './ErrorMessageIcon';
+import { AIMessageWidget } from './AIMessageWidget';
+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 UseDefaultAITranslateWidget({
+  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) {
+      // eslint-disable-next-line no-return-await
+      let prompt = `Please, translate the next text in english and give me just only translated text. Text to translate is: "${textToSend}"`;
+      const { language } = additionalSettings || {};
+
+      if (language) {
+        prompt = `Please, translate the next text in ${
+          language as string
+        } and give me just only translated text. Text to translate is: "${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,
+  };
+}

package/src/Presentation/components/UI/Dialogs/MessagesView/{InputWidget → AIWidgets}/useDefaultVoiceInputWidget.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react';
-import { InputWidget } from './InputWidget';
+import { AIAttachmentWidget } from './AIMessageWidget';
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import VoiceIcon from '../../../svgs/Icons/Actions/Voice';
 
-export default function useDefaultVoiceInputWidget(): InputWidget {
+export default function useDefaultVoiceInputWidget(): AIAttachmentWidget {
   const renderWidget = (): JSX.Element => {
     // return <VoiceIcon width="21" height="18" applyZoom color="red" />;
     return (
@@ -32,7 +32,7 @@ export default function useDefaultVoiceInputWidget(): InputWidget {
 
   const [audioFromWidgetToInput, setAudioFromWidgetToInput] = useState<File>();
 
-  async function sendFile(file: File): Promise<any> {
+  async function sendFile(file: File): Promise<string> {
     if (file) {
       // Создание объекта FormData и добавление файла
       const formData = new FormData();
@@ -57,8 +57,10 @@ export default function useDefaultVoiceInputWidget(): InputWidget {
         JSON.stringify(data.replaceAll('\n\n', '')),
       );
 
-      return data.replaceAll('\n\n', '');
+      return data.replaceAll('\n\n', '') || '';
     }
+
+    return '';
   }
 
   const fileToWidget = (file: File): void => {
@@ -68,6 +70,7 @@ export default function useDefaultVoiceInputWidget(): InputWidget {
     console.log(fileInfo);
     if (file) {
       // Отправка файла и получение результата
+      // eslint-disable-next-line promise/catch-or-return,promise/always-return
       sendFile(file).then((result) => {
         // Обработка результата
         console.log(result);
@@ -77,10 +80,8 @@ export default function useDefaultVoiceInputWidget(): InputWidget {
   };
 
   return {
-    fileToInput: audioFromWidgetToInput,
-    textToInput: textFromWidgetToInput,
+    fileToContent: audioFromWidgetToInput,
     fileToWidget,
     renderWidget,
-    textToWidget,
   };
 }

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

@@ -0,0 +1,95 @@
+import React, { useState, CSSProperties, useRef, useEffect } from 'react';
+import EditDots from '../../svgs/Icons/Actions/EditDots';
+
+type MenuItem = {
+  title: string;
+  action: () => void;
+};
+
+type ContextMenuProps = {
+  widgetToRender?: JSX.Element;
+  items?: MenuItem[];
+};
+
+const ContextMenuStyles: { [key: string]: CSSProperties } = {
+  contextMenuIcon: {
+    display: 'inline-block',
+    position: 'relative',
+    maxWidth: '42px',
+    maxHeight: '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, widgetToRender }: 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}>
+          {items?.map((item, index) => (
+            <div
+              key={index}
+              style={{
+                padding: '4px',
+                cursor: 'pointer',
+              }}
+              onClick={() => {
+                handleMenuItemClick(item.action); // Используем новую функцию обработчика
+              }}
+            >
+              {item.title}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default ContextMenu;

package/src/Presentation/components/UI/Dialogs/MessagesView/DropDownMenu/DropDownMenu.scss

@@ -0,0 +1,84 @@
+.popup-container {
+  position: inherit;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.popup-body {
+  position: absolute;
+  left: 30%;
+  right: 30%;
+  bottom: 30%;
+  top: 30%;
+  text-align: center;
+  margin: auto;
+  border-radius: 15px;
+  border-color: black;
+  background: white;
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+  color: #FF766E;
+}
+
+.drop-down-menu-container {
+  position:relative;
+  width:200px;
+
+  //box-shadow:0px 8px 10px rgba(0, 0, 0, 0.11999999731779099);
+  //background-color:rgba(255, 255, 255, 1);
+  //width:135px;
+  //height:112px;
+  //border-radius: 4px;
+  ////position:absolute;
+  //position: relative;
+  //border: var(--outgoing-background);
+}
+
+.drop-down-menu2-container {
+  width: 135px;
+  min-width: 135px;
+  max-width: 135px;
+  //
+  position: fixed;
+  z-index: 100;
+  //
+  //
+  //display: flex;
+  //flex-direction: column;
+
+  display: inline-flex;
+  padding: 8px 0px;
+  flex-direction: column;
+  align-items: flex-end;
+  //
+  //display: flex;
+  //flex-direction: column;
+  //justify-content: flex-end;
+
+  border-radius: 4px;
+  //background-color: #FF766E;
+  //background: #49CF77;
+  background: var(--dropdown-background, #FFF);
+  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);
+
+  //border: 3px solid green;
+
+  &--divider{
+
+    display: flex;
+    padding: 4px 8px 4px 16px;
+    justify-content: flex-end;
+    align-items: center;
+    align-self: stretch;
+
+
+    width: 111px;
+    height: 3px;
+
+    flex-shrink: 0;
+    color: var(--divider);
+  }
+}

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

@@ -0,0 +1,105 @@
+import './DropDownMenu.scss';
+import React from 'react';
+import { ItemDropDownMenu } from './ItemDropDownMenu/ItemDropDownMenu';
+import { FunctionTypeVoidToVoid } from '../../../../../Views/Base/BaseViewModel';
+import { MessageEntity } from '../../../../../../Domain/entity/MessageEntity';
+import ForwardFilled from '../../../svgs/Icons/Actions/ForwardFilled';
+
+export type ContextMessageMenu = {
+  title: string;
+  message?: MessageEntity;
+  icon?: React.ReactNode;
+  clickHandler?: FunctionTypeVoidToVoid;
+  touchHandler?: FunctionTypeVoidToVoid;
+};
+export type ContextMessageMenuAI = {
+  title: string;
+  message?: MessageEntity;
+  icon?: React.ReactNode;
+  clickHandler?: FunctionTypeVoidToVoid;
+  touchHandler?: FunctionTypeVoidToVoid;
+};
+
+export const contextMessageMenu: ContextMessageMenu[] = [
+  {
+    title: 'Reply',
+    // icon: 'ic1',
+    clickHandler: () => {
+      console.log('click Reply');
+    },
+  },
+  {
+    title: 'Forward',
+    icon: <ForwardFilled />,
+    clickHandler: () => {
+      console.log('click Forward');
+    },
+  },
+  {
+    title: 'Copy',
+    // icon: 'ic2',
+    clickHandler: () => {
+      console.log('click Copy');
+    },
+  },
+];
+
+export const contextMessageMenuAI: ContextMessageMenuAI[] = [
+  // {
+  //   title: 'Translate',
+  //   // icon: ,
+  //   clickHandler: () => {
+  //     console.log('click Translate');
+  //   },
+  // },
+  // {
+  //   title: 'Answer',
+  //   // icon: 'ic2',
+  //   clickHandler: () => {
+  //     console.log('click Answer');
+  //   },
+  // },
+];
+
+type DropDownMenuProps = {
+  items: ContextMessageMenu[];
+  itemsAI?: ContextMessageMenuAI[];
+};
+
+// eslint-disable-next-line react/function-component-definition
+export const DropDownMenu: React.FC<DropDownMenuProps> = ({
+  items,
+  itemsAI,
+}: DropDownMenuProps) => {
+  console.log(itemsAI);
+
+  return (
+    <div className="drop-down-menu2-container">
+      {items.map((item, index) => {
+        return (
+          <ItemDropDownMenu
+            key={index}
+            item={item.title}
+            icon={item.icon}
+            clickAction={item.clickHandler}
+            touchAction={item.touchHandler}
+          />
+        );
+      })}
+      <div className="drop-down-menu2-container--divider" />
+      {itemsAI && itemsAI?.length > 0
+        ? itemsAI?.map((itemAI, indexAI) => {
+            return (
+              <ItemDropDownMenu
+                key={indexAI}
+                item={itemAI.title}
+                icon={itemAI.icon}
+                clickAction={itemAI.clickHandler}
+                touchAction={itemAI.touchHandler}
+              />
+            );
+          })
+        : null}
+    </div>
+  );
+};

package/src/Presentation/components/UI/Dialogs/MessagesView/DropDownMenu/ItemDropDownMenu/ItemDropDownMenu.scss

@@ -0,0 +1,50 @@
+.item-drop-down-menu-container {
+  //width:135px;
+  //height:32px;
+  //position:absolute;
+  //left:0px;
+  //top:8px;ß
+
+  //min-height: 36px;
+  //display: flex;
+  //flex-direction: row;
+  //flex-wrap: nowrap;
+  //justify-content: flex-start;
+  //align-items: center;
+  //gap: 16px;
+  //color: firebrick;
+
+  display: flex;
+  padding: 4px 8px 4px 16px;
+  justify-content: flex-end;
+  align-items: center;
+  align-self: flex-start;
+
+  //border: 1px solid blue;
+
+  &--title {
+    color: var(--main-text);
+    text-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+    min-width: 80px;
+    max-width: 80px;
+    width: 80px;
+
+    /* Body/Body Medium */
+    font-family: Roboto;
+    text-align: left;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px; /* 142.857% */
+    letter-spacing: 0.25px;
+  }
+
+  &--icon {
+    display: flex;
+    width: 24px;
+    height: 24px;
+    padding: 4px;
+    justify-content: center;
+    align-items: center;
+  }
+}

package/src/Presentation/components/UI/Dialogs/MessagesView/DropDownMenu/ItemDropDownMenu/ItemDropDownMenu.tsx

@@ -0,0 +1,43 @@
+import './ItemDropDownMenu.scss';
+import React from 'react';
+import { FunctionTypeVoidToVoid } from '../../../../../../Views/Base/BaseViewModel';
+
+type ItemDropDownMenuProps = {
+  item: string;
+  icon?: React.ReactNode;
+  touchAction?: FunctionTypeVoidToVoid;
+  clickAction?: FunctionTypeVoidToVoid;
+};
+
+// eslint-disable-next-line react/function-component-definition
+export const ItemDropDownMenu: React.FC<ItemDropDownMenuProps> = ({
+  item,
+  icon,
+  touchAction,
+  clickAction,
+}: ItemDropDownMenuProps) => {
+  return (
+    <div
+      className="item-drop-down-menu-container"
+      onTouchStart={() => {
+        // eslint-disable-next-line no-unused-expressions
+        touchAction && typeof touchAction === 'function'
+          ? touchAction()
+          : () => {
+              console.log('item menu touched');
+            };
+      }}
+      onClick={() => {
+        // eslint-disable-next-line no-unused-expressions
+        clickAction && typeof clickAction === 'function'
+          ? clickAction()
+          : () => {
+              console.log('item menu clicked');
+            };
+      }}
+    >
+      <span className="item-drop-down-menu-container--title">{item}</span>
+      <div className="item-drop-down-menu-container--icon">{icon}</div>
+    </div>
+  );
+};

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

@@ -3,7 +3,6 @@ import React from 'react';
 import { FunctionTypeVoidToVoid } from '../../../../../Views/Base/BaseViewModel';
 import { DialogEntity } from '../../../../../../Domain/entity/DialogEntity';
 import GroupChat from '../../../svgs/Icons/Contents/GroupChat';
-import Phone from '../../../svgs/Icons/Actions/Phone';
 import InformationFill from '../../../svgs/Icons/Status/InformationFill';
 import ActiveSvg from '../../../svgs/ActiveSvg/ActiveSvg';
 import { DialogType } from '../../../../../../Domain/entity/DialogTypes';
@@ -26,6 +25,7 @@ const HeaderMessages: React.FC<HeaderMessagesProps> = ({
   dialog,
   countMembers = 0,
   InformationHandler,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   CallHandler,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   theme = undefined,
@@ -101,16 +101,19 @@ const HeaderMessages: React.FC<HeaderMessagesProps> = ({
           </div>
         </div>
         <div className="message-header-container--info-wrapper__detail-button">
-          <div className="message-header-container--info-wrapper__detail-button__call">
-            <ActiveSvg
-              content={<Phone width="32" height="32" applyZoom />}
-              clickAction={() => {
-                if (CallHandler) CallHandler();
-              }}
-              touchAction={() => {
-                if (CallHandler) CallHandler();
-              }}
-            />
+          <div
+            className="message-header-container--info-wrapper__detail-button__call"
+            style={{ width: '32px' }}
+          >
+            {/* <ActiveSvg */}
+            {/*  content={<Phone width="32" height="32" applyZoom />} */}
+            {/*  clickAction={() => { */}
+            {/*    if (CallHandler) CallHandler(); */}
+            {/*  }} */}
+            {/*  touchAction={() => { */}
+            {/*    if (CallHandler) CallHandler(); */}
+            {/*  }} */}
+            {/* /> */}
           </div>
           <div className="message-header-container--info-wrapper__detail-button__info">
             <ActiveSvg

package/src/Presentation/components/UI/Dialogs/MessagesView/InComingMessage/AvatarContentIncomingUser/AvatarContentIncomingUser.scss

@@ -0,0 +1,39 @@
+
+.avatar-wrap {
+  padding: 0px 0px 16px 0px;
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: flex-end;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  position: relative;
+}
+.avatar {
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
+  position: relative;
+}
+.rectangle {
+  width: 36px;
+  height: 36px;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+}
+.ellipse {
+  background: var(--secondary-secondary-100, #bcc1c5);
+  border-radius: 50%;
+  width: 36px;
+  height: 36px;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+}
+.contents-user {
+  position: absolute;
+  left: 6.43px;
+  top: 6.43px;
+  overflow: visible;
+}

package/src/Presentation/components/UI/Dialogs/MessagesView/InComingMessage/AvatarContentIncomingUser/AvatarContentIncomingUser.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import './AvatarContentIncomingUser.scss';
+
+export default function AvatarContentIncomingUser() {
+  return (
+    <div className="avatar-wrap">
+      <div className="avatar">
+        <div className="rectangle" />
+        <div className="ellipse" />
+        <svg
+          className="contents-user"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M11.9999 6.11828C13.1185 6.11828 14.0249 7.0247 14.0249 8.14328C14.0249 9.26185 13.1185 10.1683 11.9999 10.1683C10.8814 10.1683 9.97493 9.26185 9.97493 8.14328C9.97493 7.0247 10.8814 6.11828 11.9999 6.11828ZM11.9999 14.7968C14.8639 14.7968 17.8821 16.2047 17.8821 16.8218V17.8826H6.11779V16.8218C6.11779 16.2047 9.136 14.7968 11.9999 14.7968ZM11.9999 4.28613C9.86886 4.28613 8.14279 6.0122 8.14279 8.14328C8.14279 10.2743 9.86886 12.0004 11.9999 12.0004C14.131 12.0004 15.8571 10.2743 15.8571 8.14328C15.8571 6.0122 14.131 4.28613 11.9999 4.28613ZM11.9999 12.9647C9.42529 12.9647 4.28564 14.2568 4.28564 16.8218V19.7147H19.7142V16.8218C19.7142 14.2568 14.5746 12.9647 11.9999 12.9647Z"
+            fill="#636D78"
+          />
+        </svg>
+      </div>
+    </div>
+  );
+}