quickblox-react-ui-kit 0.2.0 → 0.2.1

package/src/Presentation/components/layouts/Desktop/QuickBloxUIKitDesktopLayout.tsx

@@ -16,21 +16,27 @@ import { Pagination } from '../../../../Domain/repository/Pagination';
 // import { DialogEventInfo } from '../../../../Domain/entity/DialogEventInfo';
 import UiKitTheme from '../../../assets/UiKitTheme';
 import BaseViewModel from '../../../Views/Base/BaseViewModel';
-import { AIWidget } from '../../UI/Dialogs/MessagesView/AIWidgets/AIWidget';
+import { AIMessageWidget } from '../../UI/Dialogs/MessagesView/AIWidgets/AIMessageWidget';
 import { QBConfig } from '../../../../QBconfig';
-import UseDefaultAIAssistAnswerWidgetWithProxy from '../../UI/Dialogs/MessagesView/AIWidgets/UseDefaultAIAssistAnswerWidgetWithProxy';
+import UseDefaultAIAssistAnswerWidget from '../../UI/Dialogs/MessagesView/AIWidgets/UseDefaultAIAssistAnswerWidget';
+import UseDefaultAITranslateWidget from '../../UI/Dialogs/MessagesView/AIWidgets/UseDefaultAITranslateWidget';
+import UseDefaultAIRephraseMessageWidget from '../../UI/Dialogs/MessagesView/AIWidgets/UseDefaultAIRephraseMessageWidget';
+import {
+  DefaultConfigurations,
+  ProxyConfig,
+} from '../../../../Data/DefaultConfigurations';
 
 type AIWidgetPlaceHolder = {
   enabled: boolean;
   default: boolean;
-  AIWidget?: AIWidget;
+  AIWidget?: AIMessageWidget;
 };
 
 type QuickBloxUIKitDesktopLayoutProps = {
   theme?: UiKitTheme;
-  AIEditMessage?: AIWidgetPlaceHolder;
-  AITranslation?: AIWidgetPlaceHolder;
-  AIAnswerToMessage?: AIWidgetPlaceHolder;
+  AIRephrase?: AIWidgetPlaceHolder;
+  AITranslate?: AIWidgetPlaceHolder;
+  AIAssist?: AIWidgetPlaceHolder;
 };
 
 const QuickBloxUIKitDesktopLayout: React.FC<
@@ -39,10 +45,10 @@ const QuickBloxUIKitDesktopLayout: React.FC<
 > = ({
   theme = undefined,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  AITranslation = undefined,
+  AITranslate = undefined,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  AIEditMessage = undefined,
-  AIAnswerToMessage = undefined,
+  AIRephrase = undefined,
+  AIAssist = undefined,
 }: QuickBloxUIKitDesktopLayoutProps) => {
   console.log('create QuickBloxUIKitDesktopLayout');
   const [selectedDialog, setSelectedDialog] =
@@ -62,25 +68,20 @@ const QuickBloxUIKitDesktopLayout: React.FC<
   const dialogsViewModel: DialogsViewModel =
     useDialogsViewModel(currentContext);
 
-  const defaultAIEditMessageWidget = AIEditMessage?.AIWidget; // useDefaultTextInputWidget();
-  const defaultAITranslateWidget = AITranslation?.AIWidget;
-  // if (!defaultAIEditMessageWidget) {
-  //   defaultAIEditMessageWidget = useDefaultTextInputWidget();
-  // }
-  // const defaultAITranslateWidget =
-  //   AITranslation?.AIWidget || useDefaultVoiceInputWidget();
-  let defaultAIAnswerToMessageWidget;
+  let defaultAIEditMessageWidget = AIRephrase?.AIWidget; // useDefaultTextInputWidget();
+  let defaultAITranslateWidget = AITranslate?.AIWidget;
+  let defaultAIAnswerToMessageWidget = AIAssist?.AIWidget;
 
   const getAIAssistAnswer = (): void => {
-    if (AIAnswerToMessage?.enabled && !AIAnswerToMessage?.default) {
-      defaultAIAnswerToMessageWidget = AIAnswerToMessage.AIWidget;
+    if (AIAssist?.enabled && !AIAssist?.default) {
+      defaultAIAnswerToMessageWidget = AIAssist.AIWidget;
     } else if (
-      AIAnswerToMessage?.enabled ||
+      AIAssist?.enabled ||
       QBConfig.configAIApi.AIAnswerAssistWidgetConfig.useDefault
     ) {
       if (
         !QBConfig.configAIApi.AIAnswerAssistWidgetConfig.useDefault ||
-        (AIAnswerToMessage && !AIAnswerToMessage?.default)
+        (AIAssist && !AIAssist?.default)
       ) {
         defaultAIAnswerToMessageWidget = undefined;
       } else {
@@ -96,15 +97,95 @@ const QuickBloxUIKitDesktopLayout: React.FC<
             sessionToken ||
             '';
         }
-        defaultAIAnswerToMessageWidget =
-          UseDefaultAIAssistAnswerWidgetWithProxy({
-            ...QBConfig.configAIApi.AIAnswerAssistWidgetConfig.proxyConfig,
-            sessionToken: token,
-          });
+        const proxyConfig: ProxyConfig =
+          QBConfig.configAIApi.AIAnswerAssistWidgetConfig.proxyConfig ||
+          DefaultConfigurations.getDefaultProxyConfig();
+
+        defaultAIAnswerToMessageWidget = UseDefaultAIAssistAnswerWidget({
+          ...proxyConfig,
+          sessionToken: token,
+          apiKey,
+        });
+      }
+    }
+  };
+  const getAITranslate = (): void => {
+    if (AITranslate?.enabled && !AITranslate?.default) {
+      defaultAITranslateWidget = AITranslate.AIWidget;
+    } else if (
+      AITranslate?.enabled ||
+      QBConfig.configAIApi.AITranslateWidgetConfig.useDefault
+    ) {
+      if (
+        !QBConfig.configAIApi.AITranslateWidgetConfig.useDefault ||
+        (AITranslate && !AITranslate?.default)
+      ) {
+        defaultAITranslateWidget = undefined;
+      } else {
+        const { apiKey } = QBConfig.configAIApi.AITranslateWidgetConfig;
+        let token = '';
+
+        if (apiKey) {
+          token = apiKey;
+        } else {
+          token =
+            QBConfig.configAIApi.AITranslateWidgetConfig.proxyConfig
+              .sessionToken ||
+            sessionToken ||
+            '';
+        }
+        const proxyConfig: ProxyConfig =
+          QBConfig.configAIApi.AITranslateWidgetConfig.proxyConfig ||
+          DefaultConfigurations.getDefaultProxyConfig();
+
+        defaultAITranslateWidget = UseDefaultAITranslateWidget({
+          ...proxyConfig,
+          sessionToken: token,
+          apiKey,
+        });
+      }
+    }
+  };
+  const getAIRephrase = (): void => {
+    if (AIRephrase?.enabled && !AIRephrase?.default) {
+      defaultAIEditMessageWidget = AIRephrase.AIWidget;
+    } else if (
+      AIRephrase?.enabled ||
+      QBConfig.configAIApi.AIRephraseWidgetConfig.useDefault
+    ) {
+      if (
+        !QBConfig.configAIApi.AIRephraseWidgetConfig.useDefault ||
+        (AIRephrase && !AIRephrase?.default)
+      ) {
+        defaultAIEditMessageWidget = undefined;
+      } else {
+        const { apiKey } = QBConfig.configAIApi.AIRephraseWidgetConfig;
+        let token = '';
+
+        if (apiKey) {
+          token = apiKey;
+        } else {
+          token =
+            QBConfig.configAIApi.AIRephraseWidgetConfig.proxyConfig
+              .sessionToken ||
+            sessionToken ||
+            '';
+        }
+        const proxyConfig: ProxyConfig =
+          QBConfig.configAIApi.AIRephraseWidgetConfig.proxyConfig ||
+          DefaultConfigurations.getDefaultProxyConfig();
+
+        defaultAIEditMessageWidget = UseDefaultAIRephraseMessageWidget({
+          ...proxyConfig,
+          sessionToken: token,
+          apiKey,
+        });
       }
     }
   };
 
+  getAITranslate();
+  getAIRephrase();
   getAIAssistAnswer();
 
   const selectDialogActions = (item: BaseViewModel<DialogEntity>): void => {
@@ -269,9 +350,9 @@ const QuickBloxUIKitDesktopLayout: React.FC<
             maxWidthToResize={
               selectedDialog && needDialogInformation ? undefined : '1040px'
             }
-            AIEditMessage={defaultAIEditMessageWidget}
-            AITranslation={defaultAITranslateWidget}
-            AIAnswerToMessage={defaultAIAnswerToMessageWidget}
+            AIRephrase={defaultAIEditMessageWidget}
+            AITranslate={defaultAITranslateWidget}
+            AIAssist={defaultAIAnswerToMessageWidget}
             theme={theme}
           /> // 1 Get Messages + 1 Get User by Id
         ) : (

package/src/QBconfig.ts

@@ -8,12 +8,41 @@ export const QBConfig = {
   },
   configAIApi: {
     AIAnswerAssistWidgetConfig: {
-      apiKey: '', // Replace with your real API key
+      apiKey: '',
       useDefault: true,
       proxyConfig: {
         api: 'v1/chat/completions',
-        servername: 'https://api.openai.com/',
-        port: '',
+        servername: 'http://localhost',
+        port: '3001',
+        sessionToken: '',
+      },
+    },
+    AITranslateWidgetConfig: {
+      apiKey: '',
+      useDefault: true,
+      defaultLanguage: 'English',
+      languages: [
+        'English',
+        'Spanish',
+        'French',
+        'Portuguese',
+        'German',
+        'Ukrainian',
+      ],
+      proxyConfig: {
+        api: 'v1/chat/completions',
+        servername: 'http://localhost',
+        port: '3001',
+        sessionToken: '',
+      },
+    },
+    AIRephraseWidgetConfig: {
+      apiKey: '',
+      useDefault: true,
+      proxyConfig: {
+        api: 'v1/chat/completions',
+        servername: 'http://localhost',
+        port: '3001',
         sessionToken: '',
       },
     },

package/src/index-ui.ts

@@ -33,6 +33,10 @@ import QuickBloxUIKitDesktopLayout from './Presentation/components/layouts/Deskt
 import DefaultTheme from './Presentation/assets/DefaultThemes/DefaultTheme';
 import UiKitTheme from './Presentation/assets/UiKitTheme';
 import useQbUIKitDataContext from './Presentation/components/providers/QuickBloxUIKitProvider/useQbUIKitDataContext';
+import { AIMessageWidget } from './Presentation/components/UI/Dialogs/MessagesView/AIWidgets/AIMessageWidget';
+import { AISource, IChatMessage } from './Data/source/AISource';
+import AIWidgetIcon from './Presentation/components/UI/svgs/Icons/AIWidgets/AIWidget';
+import ErrorMessageIcon from './Presentation/components/UI/Dialogs/MessagesView/AIWidgets/ErrorMessageIcon';
 
 export {
   MainButton,
@@ -65,4 +69,9 @@ export {
   QuickBloxUIKitDesktopLayout,
   DefaultTheme,
   type UiKitTheme,
+  type AIMessageWidget,
+  AISource,
+  type IChatMessage,
+  AIWidgetIcon,
+  ErrorMessageIcon,
 };

package/dist/Presentation/components/UI/Dialogs/MessagesView/AIWidgets/AIWidget.d.ts

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

package/dist/Presentation/components/UI/Dialogs/MessagesView/AIWidgets/UseDefaultAIAssistAnswerWidgetWithProxy.d.ts

@@ -1,9 +0,0 @@
-import { AIWidget } from './AIWidget';
-interface MessageWidgetProps {
-    servername: string;
-    api: string;
-    port: string;
-    sessionToken: string;
-}
-export default function UseDefaultAIAssistAnswerWidgetWithProxy({ servername, api, port, sessionToken, }: MessageWidgetProps): AIWidget;
-export {};

package/dist/Presentation/components/UI/Dialogs/MessagesView/AIWidgets/UseDefaultTextInputWidget.d.ts

@@ -1,2 +0,0 @@
-import { AIWidget } from './AIWidget';
-export default function useDefaultTextInputWidget(): AIWidget;

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

@@ -1,136 +0,0 @@
-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/AIWidgets/UseDefaultTextInputWidget.tsx

@@ -1,60 +0,0 @@
-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,
-  };
-}