quickblox-react-ui-kit 0.1.8 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quickblox-react-ui-kit",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "main": "dist/index-ui.js",
   "license": "MIT",
   "dependencies": {

package/src/App.tsx

@@ -194,18 +194,6 @@ function App() {
     prepareSDK(currentUser).catch();
   }, []);
 
-  // const { apiKey } = QBConfig.configAIApi.AIAnswerAssistWidgetConfig;
-  // // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-  // const openAIConfiguration: Configuration = new Configuration({
-  //   apiKey,
-  // });
-  //
-  // // eslint-disable-next-line @typescript-eslint/no-unsafe-call
-  // const openAIApi: OpenAIApi = new OpenAIApi(openAIConfiguration);
-  // const defaultIncomingMessageWidget = UseDefaultIncomingMessageWidget({
-  //   openAIApi,
-  // });
-
   // todo: uncomment authSecret
   return (
     <QuickBloxUIKitProvider
@@ -233,13 +221,6 @@ function App() {
             <Route
               path="/desktop-test-mock"
               element={
-                // <QuickBloxUIKitDesktopLayout
-                //   theme={new DefaultTheme()}
-                //   IncomingMessageWidgetToRightPlaceHolder={
-                //     defaultIncomingMessageWidget
-                //   }
-                // />
-
                 <QuickBloxUIKitDesktopLayout theme={new DefaultTheme()} />
               }
             />

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

@@ -69,7 +69,15 @@ export type FunctionTypeDialogEntityToBoolean = (
 ) => Promise<boolean>;
 export type FunctionTypeFileToFileEntity = (file: File) => Promise<FileEntity>;
 export type FunctionTypeJSXElement = () => JSX.Element;
-export type FunctionTypeChatMessagesToVoid = (
-  lastMessage: string,
-  messages: IChatMessage,
+// export type FunctionTypeChatMessagesToVoid = (
+//   lastMessage: string,
+//   messages: IChatMessage,
+// ) => void;
+export type FunctionTypeFileWithContextToToVoid = (
+  file: File,
+  context: IChatMessage[],
+) => void;
+export type FunctionTypeStringWithContextToVoid = (
+  value: string,
+  context: IChatMessage[],
 ) => void;

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

@@ -314,7 +314,6 @@ const DialogsComponent: React.FC<DialogsProps> = ({
       <ColumnContainer>
         {useUpContent && upHeaderContent}
         {useHeader && HeaderContent}
-        {/* {showSearchDialogs ? renderSearchDialogs() : null} */}
         {useSubContent && subHeaderContent}
         {dialogsViewModel?.loading && (
           // <div style={{ maxHeight: '44px', minHeight: '44px', height: '44px' }}>

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

@@ -0,0 +1,13 @@
+import {
+  FunctionTypeFileWithContextToToVoid,
+  FunctionTypeJSXElement,
+  FunctionTypeStringWithContextToVoid,
+} from '../../../../../Views/Base/BaseViewModel';
+
+export interface AIWidget {
+  renderWidget: FunctionTypeJSXElement;
+  textToWidget: FunctionTypeStringWithContextToVoid;
+  fileToWidget: FunctionTypeFileWithContextToToVoid;
+  textToContent: string | undefined;
+  fileToContent: File | undefined;
+}

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/UseDefaultAIAssistAnswerWidgetWithProxy.tsx

@@ -0,0 +1,136 @@
+import { useState } from 'react';
+import { AIWidget } from './AIWidget';
+import AIWidgetIcon from '../../../svgs/Icons/Media/AIWidget';
+import { IChatMessage } from '../../../../../Views/Base/BaseViewModel';
+import { stringifyError } from '../../../../../../utils/parse';
+import ErrorMessageIcon from './ErrorMessageIcon';
+
+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;
+}
+export default function UseDefaultAIAssistAnswerWidgetWithProxy({
+  servername,
+  api,
+  port,
+  sessionToken,
+}: MessageWidgetProps): AIWidget {
+  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" />;
+  };
+
+  // async function getData(
+  //   textToSend: string,
+  //   dialogMessages: ChatCompletionRequestMessage[],
+  // ): Promise<string> {
+  //   //
+  //   const apiEndpoint = 'https://api.openai.com/v1/chat/completions';
+  //   const { apiKey } = QBConfig.configAIApi.AIAnswerAssistWidgetConfig; // Замените на ваш реальный ключ API
+  //   const model = 'gpt-3.5-turbo';
+  //   const requestOptions = {
+  //     method: 'POST',
+  //     headers: {
+  //       'Content-Type': 'application/json',
+  //       Authorization: `Bearer ${apiKey}`,
+  //     },
+  //     body: JSON.stringify({
+  //       messages: [...dialogMessages, { role: 'user', content: textToSend }],
+  //       model,
+  //       temperature: 0.5,
+  //     }),
+  //   };
+  //
+  async function getData(
+    textToSend: string,
+    dialogMessages: IChatMessage[],
+  ): Promise<string> {
+    let outputMessage = '';
+    const apiEndpoint = `${servername}${port}${api}`;
+    const apiKey = sessionToken; // Замените на ваш реальный ключ API
+    const model = 'gpt-3.5-turbo';
+    const prompt = `Respond as a knowledgeable customer support specialist with access to ChatGPT features, and provide a simple and informative response to the inquiry :"${textToSend}"`;
+
+    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();
+
+      outputMessage = data.choices[0].message?.content || '';
+    } catch (err) {
+      outputMessage = stringifyError(err);
+      setErrorMessage(outputMessage);
+    }
+
+    return outputMessage;
+  }
+
+  const [textFromWidgetToContent, setTextFromWidgetToContent] = useState('');
+  // const textToWidget = (value: string, context: IChatMessage[]): void => {
+  //   if (value && value.length > 0) {
+  //     // eslint-disable-next-line promise/catch-or-return
+  //     getOpenAIApiData(value, context as ChatCompletionRequestMessage[]).then(
+  //       // eslint-disable-next-line promise/always-return
+  //       (data) => {
+  //         setTextFromWidgetToContent(data);
+  //       },
+  //     );
+  //   }
+  // };
+
+  const textToWidget = (value: string, context: IChatMessage[]): void => {
+    if (value && value.length > 0) {
+      // eslint-disable-next-line promise/catch-or-return
+      getData(value, context).then(
+        // eslint-disable-next-line promise/always-return
+        (data) => {
+          setTextFromWidgetToContent(data);
+        },
+      );
+    }
+  };
+
+  return {
+    fileToContent: undefined,
+    textToContent: textFromWidgetToContent,
+    fileToWidget,
+    renderWidget,
+    textToWidget,
+  };
+}

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

@@ -1,7 +1,7 @@
 import { useState } from 'react';
-import { InputWidget } from './InputWidget';
+import { AIWidget } from './AIWidget';
 
-export default function useDefaultTextInputWidget(): InputWidget {
+export default function useDefaultTextInputWidget(): AIWidget {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/no-empty-function
   const fileToWidget = (file: File): void => {};
 
@@ -51,8 +51,8 @@ export default function useDefaultTextInputWidget(): InputWidget {
   };
 
   return {
-    fileToInput: undefined,
-    textToInput: textFromWidgetToInput,
+    fileToContent: undefined,
+    textToContent: textFromWidgetToInput,
     fileToWidget,
     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 { AIWidget } from './AIWidget';
 // 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(): AIWidget {
   const renderWidget = (): JSX.Element => {
     // return <VoiceIcon width="21" height="18" applyZoom color="red" />;
     return (
@@ -77,8 +77,8 @@ export default function useDefaultVoiceInputWidget(): InputWidget {
   };
 
   return {
-    fileToInput: audioFromWidgetToInput,
-    textToInput: textFromWidgetToInput,
+    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;