quickblox-react-ui-kit 0.2.0 → 0.2.2

package/src/Data/source/AISource.ts

@@ -0,0 +1,133 @@
+import { stringifyError } from '../../utils/parse';
+import RepositoryException from './exception/RepositoryException';
+
+export interface IChatMessage {
+  role: string;
+  content: string;
+}
+export type AIParam = {
+  textToAI: string;
+  context: IChatMessage[];
+};
+
+export class AISource {
+  static async getData(
+    prompt: string,
+    dialogMessages: IChatMessage[],
+    servername: string,
+    api: string,
+    port: string,
+    sessionToken: string,
+    openAIModel = 'gpt-3.5-turbo',
+  ): Promise<string> {
+    const apiEndpoint = `${servername}/${api}`;
+    const apiKey = sessionToken;
+    const model = openAIModel; // 'gpt-3.5-turbo';
+
+    const requestOptions = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${apiKey}`,
+      },
+      body: JSON.stringify({
+        messages: [...dialogMessages, { role: 'user', content: prompt }],
+        model,
+        temperature: 0.5,
+      }),
+    };
+
+    try {
+      const response = await fetch(apiEndpoint, requestOptions);
+      const data = await response.json();
+
+      const outputMessage = data.choices[0].message?.content || '';
+
+      return outputMessage;
+    } catch (err) {
+      const outputMessage: string = stringifyError(err);
+
+      throw new RepositoryException(outputMessage, -1);
+    }
+  }
+
+  static async getDataWithOpenAI(
+    prompt: string,
+    dialogMessages: IChatMessage[],
+    servername: string,
+    api: string,
+    port: string,
+    sessionToken: string,
+    openAIModel = 'gpt-3.5-turbo',
+  ): Promise<string> {
+    const apiEndpoint = `${servername}/${api}`;
+    const apiKey = sessionToken;
+    const model = openAIModel; // 'gpt-3.5-turbo';
+
+    const requestOptions = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${apiKey}`,
+      },
+      body: JSON.stringify({
+        messages: [...dialogMessages, { role: 'user', content: prompt }],
+        model,
+        temperature: 0.5,
+      }),
+    };
+
+    try {
+      const response = await fetch(apiEndpoint, requestOptions);
+      const data = await response.json();
+
+      const outputMessage = data.choices[0].message?.content || '';
+
+      return outputMessage;
+    } catch (err) {
+      const outputMessage: string = stringifyError(err);
+
+      throw new RepositoryException(outputMessage, -1);
+    }
+  }
+
+  static async getDataWithProxyServer(
+    prompt: string,
+    dialogMessages: IChatMessage[],
+    servername: string,
+    api: string,
+    port: string,
+    sessionToken: string,
+    openAIModel = 'gpt-3.5-turbo',
+  ): Promise<string> {
+    const apiEndpoint = `${servername}:${port}/${api}`;
+    const apiKey = sessionToken;
+    const model = openAIModel; // 'gpt-3.5-turbo';
+
+    const requestOptions = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'qb-token': apiKey,
+      },
+      body: JSON.stringify({
+        messages: [...dialogMessages, { role: 'user', content: prompt }],
+        model,
+        temperature: 0.5,
+      }),
+    };
+
+    try {
+      const response = await fetch(apiEndpoint, requestOptions);
+      const data = await response.json();
+
+      const outputMessage = data.choices[0].message?.content || '';
+
+      return outputMessage;
+    } catch (err) {
+      const outputMessage: string = stringifyError(err);
+
+      throw new RepositoryException(outputMessage, -1);
+    }
+  }
+}

package/src/Data/source/remote/Mapper/MessageDTOMapper.ts

@@ -47,14 +47,14 @@ export class MessageDTOMapper implements IDTOMapper {
         size: item.size,
         type: item.type,
         uid: item.uid,
-        url: item.id.toString() && QB.content.privateUrl(item.id.toString()),
+        url: item.uid && QB.content.privateUrl(item.uid),
         file: {
           id: item.id,
           name: item.name,
           size: item.size,
           type: item.type,
           uid: item.uid || '',
-          url: item.id.toString() && QB.content.privateUrl(item.id.toString()),
+          url: item.uid && QB.content.privateUrl(item.uid),
         },
       };
 
@@ -76,7 +76,7 @@ export class MessageDTOMapper implements IDTOMapper {
     dto.dialogId = qbMessage.chat_dialog_id;
     dto.message = qbMessage.message;
     dto.created_at = qbMessage.created_at;
-    dto.date_sent = qbMessage.date_sent;
+    dto.date_sent = qbMessage.date_sent * 1000;
     dto.delivered_ids = qbMessage.delivered_ids ? qbMessage.delivered_ids : [];
     dto.read_ids = qbMessage.read_ids ? qbMessage.read_ids : [];
 

package/src/Domain/entity/MessageEntity.ts

@@ -3,7 +3,7 @@ import { UserEntity } from './UserEntity';
 import { DialogType } from './DialogTypes';
 
 export interface MessageEntity {
-  id: number;
+  id: string;
   dialogId: string;
   dialogType?: DialogType;
   // TODO: check ChatMessageAttachmentEntity

package/src/Presentation/Views/Base/BaseViewModel.ts

@@ -2,6 +2,7 @@ import { Pagination } from '../../../Domain/repository/Pagination';
 import { GroupDialogEntity } from '../../../Domain/entity/GroupDialogEntity';
 import { DialogEntity } from '../../../Domain/entity/DialogEntity';
 import { FileEntity } from '../../../Domain/entity/FileEntity';
+import { IChatMessage } from '../../../Data/source/AISource';
 
 export default class BaseViewModel<TResult> {
   get entity(): TResult {
@@ -49,10 +50,7 @@ export type EditDialogParams = {
   dialogTitle: string;
   dialogAvatar: File | string | null;
 };
-export interface IChatMessage {
-  role: string;
-  content: string;
-}
+
 export type FunctionTypeFileToToVoid = (file: File) => void;
 export type FunctionTypePaginationToVoid = (pagination: Pagination) => void;
 export type FunctionTypeVoidToVoid = () => void;
@@ -76,8 +74,15 @@ export type FunctionTypeJSXElement = () => JSX.Element;
 export type FunctionTypeFileWithContextToToVoid = (
   file: File,
   context: IChatMessage[],
+  additionalSettings?: { [key: string]: any },
 ) => void;
 export type FunctionTypeStringWithContextToVoid = (
   value: string,
   context: IChatMessage[],
+  additionalSettings?: { [key: string]: any },
 ) => void;
+export type FunctionTypeStringWithContextToString = (
+  value: string,
+  context: IChatMessage[],
+  additionalSettings?: { [key: string]: any },
+) => Promise<string>;

package/src/Presentation/Views/Dialogs/Dialogs.tsx

@@ -266,9 +266,9 @@ const DialogsComponent: React.FC<DialogsProps> = ({
   };
 
   const loaderTheme: IconTheme = {
-    color: 'var(--divider)',
-    width: '42',
-    height: '42',
+    color: 'var(--color-background-info)',
+    width: '44',
+    height: '44',
   };
 
   const renderSearchDialogs = () => {
@@ -315,26 +315,42 @@ const DialogsComponent: React.FC<DialogsProps> = ({
         {useUpContent && upHeaderContent}
         {useHeader && HeaderContent}
         {useSubContent && subHeaderContent}
-        {dialogsViewModel?.loading && (
-          // <div style={{ maxHeight: '44px', minHeight: '44px', height: '44px' }}>
-          //   <LoaderComponent width="44" height="44" color="var(--divider)" />
-          // </div>
-          <LoaderComponent
-            width={loaderTheme.width}
-            height={loaderTheme.height}
-            color={loaderTheme.color}
-          />
-        )}
-        {dialogsViewModel?.error && (
-          <ErrorComponent
-            title="Something is wrong."
-            ClickActionHandler={() => {
-              alert('call click retry');
-            }}
-          />
-        )}
         {/* <div className="scroll-box"> */}
         <div className="scroll-box">
+          {dialogsViewModel?.loading && (
+            // <div style={{ maxHeight: '44px', minHeight: '44px', height: '44px' }}>
+            //   <LoaderComponent width="44" height="44" color="var(--divider)" />
+            // </div>
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <div
+                style={{
+                  height: '44px',
+                  width: '44px',
+                }}
+              >
+                <LoaderComponent
+                  width={loaderTheme.width}
+                  height={loaderTheme.height}
+                  color={loaderTheme.color}
+                />
+              </div>
+            </div>
+          )}
+          {dialogsViewModel?.error && (
+            <ErrorComponent
+              title="Something is wrong."
+              ClickActionHandler={() => {
+                alert('call click retry');
+              }}
+            />
+          )}
           {showSearchDialogs ? renderSearchDialogs() : null}
           {nameDialogForSearch.length > 0 &&
             dialogsToView

package/src/Presentation/components/UI/Dialogs/HeaderDialogs/HeaderDialogs.scss

@@ -10,8 +10,8 @@ $header-container-title-font-size: 20px;
 $header-container-title-line-height: 24px;
 $header-container-title-width: 180px;
 $header-container-buttons-gap-width: 29px;
-$header-container-svg-icon-width: 32px;
-$header-container-svg-icon-height: 32px;
+$header-container-svg-icon-width: 24px;
+$header-container-svg-icon-height: 24px;
 $header-container-color-icon: var(--color-icon);
 
 .header-dialogs-container{

package/src/Presentation/components/UI/Dialogs/HeaderDialogs/HeaderDialogs.tsx

@@ -54,9 +54,9 @@ const HeaderDialogs: React.FC<HeaderDialogsProps> = ({
   const buttonsStyle = {
     background: 'none',
     svg: {
-      width: '44',
-      height: '44',
-      viewBox: '0 0 44 44',
+      width: '24',
+      height: '24',
+      viewBox: '0 0 24 24',
       path: {
         fill: theme?.mainElements(),
       },
@@ -83,7 +83,7 @@ const HeaderDialogs: React.FC<HeaderDialogsProps> = ({
       </div>
       <div style={buttonsStyle} className="header-dialogs-container__buttons">
         <ActiveSvg
-          content={<Search />}
+          content={<Search width="24" height="24" applyZoom />}
           touchAction={() => {
             console.log('touchSearchDialogsHandler');
             if (touchSearchHandler) touchSearchHandler();
@@ -94,7 +94,7 @@ const HeaderDialogs: React.FC<HeaderDialogsProps> = ({
           }}
         />
         <ActiveSvg
-          content={<NewChat />}
+          content={<NewChat width="24" height="24" applyZoom />}
           touchAction={() => {
             console.log('touchAction: Hello from component 1');
             if (TouchActionHandler) TouchActionHandler();

package/src/Presentation/components/UI/Dialogs/MessagesView/AIWidgets/{AIWidget.ts → AIMessageWidget.ts}

@@ -1,13 +1,24 @@
 import {
   FunctionTypeFileWithContextToToVoid,
   FunctionTypeJSXElement,
-  FunctionTypeStringWithContextToVoid,
+  FunctionTypeStringWithContextToString,
 } from '../../../../../Views/Base/BaseViewModel';
 
 export interface AIWidget {
   renderWidget: FunctionTypeJSXElement;
-  textToWidget: FunctionTypeStringWithContextToVoid;
-  fileToWidget: FunctionTypeFileWithContextToToVoid;
+}
+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/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;