quickblox-react-ui-kit 0.1.7 → 0.2.0

package/dist/utils/utils.d.ts

@@ -0,0 +1,3 @@
+export declare const completeSentence: (text?: string) => string;
+export declare const tokenCounter: (text?: string) => number;
+export declare const loopToLimitTokens: <T>(limit: number, data: T[], getValue?: (item: T) => string, tokens?: number) => T[];

package/package.json

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

package/src/App.tsx

@@ -5,9 +5,7 @@ import { QBConfig } from './QBconfig';
 import useQBConnection from './Presentation/components/providers/QuickBloxUIKitProvider/useQBConnection';
 import { LocalDataSource } from './Data/source/local/LocalDataSource';
 import Login from './Presentation/components/layouts/TestStage/LoginView/Login';
-import QuickBloxUIKitProvider, {
-  qbDataContext,
-} from './Presentation/components/providers/QuickBloxUIKitProvider/QuickBloxUIKitProvider';
+import QuickBloxUIKitProvider from './Presentation/components/providers/QuickBloxUIKitProvider/QuickBloxUIKitProvider';
 import TestStageMarkup from './Presentation/components/layouts/TestStage/TestStageMarkup';
 import { Stubs } from './Data/Stubs';
 import {
@@ -16,10 +14,13 @@ import {
 } from './Data/source/remote/RemoteDataSource';
 import QuickBloxUIKitDesktopLayout from './Presentation/components/layouts/Desktop/QuickBloxUIKitDesktopLayout';
 import DefaultTheme from './Presentation/assets/DefaultThemes/DefaultTheme';
+import useQbUIKitDataContext from './Presentation/components/providers/QuickBloxUIKitProvider/useQbUIKitDataContext';
 
 function App() {
-  const currentContext = React.useContext(qbDataContext);
-  const remoteDataSourceMock: RemoteDataSource =
+  // const currentContext = React.useContext(qbDataContext);
+  const currentContext = useQbUIKitDataContext();
+
+  const remoteDataSource: RemoteDataSource =
     currentContext.storage.REMOTE_DATA_SOURCE;
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const localDataSource: LocalDataSource =
@@ -50,7 +51,7 @@ function App() {
     console.log('call release...');
     connectionRepository.stopKeepAlive();
     console.log('call stopKeepAlive...');
-    await remoteDataSourceMock.disconnectAndLogoutUser();
+    await remoteDataSource.disconnectAndLogoutUser();
     console.log('call disconnectAndLogoutUser...');
     await currentContext.storage.LOCAL_DATA_SOURCE.clearAll();
     console.log('call clearAll...');
@@ -61,9 +62,9 @@ function App() {
   const prepareSDK = async (authData: LoginData): Promise<void> => {
     console.log('call prepareSDK with data:', authData);
     // todo: must be real remote datasource
-    if (remoteDataSourceMock.needInit) {
+    if (remoteDataSource.needInit) {
       console.log('start prepareSDK actions with data:', authData);
-      await remoteDataSourceMock.initSDKWithUser(
+      await remoteDataSource.initSDKWithUser(
         {
           appIdOrToken: currentContext.InitParams.accountData.appId,
           authKeyOrAppId: currentContext.InitParams.accountData.authKey,
@@ -114,10 +115,10 @@ function App() {
     console.log('call reloginSDK with data:', JSON.stringify(authData));
     currentContext.storage.SYNC_DIALOGS_USE_CASE.release();
     connectionRepository.stopKeepAlive();
-    await remoteDataSourceMock.disconnectAndLogoutUser();
+    await remoteDataSource.disconnectAndLogoutUser();
     await currentContext.storage.LOCAL_DATA_SOURCE.clearAll();
 
-    await remoteDataSourceMock.loginWithUser(authData);
+    await remoteDataSource.loginWithUser(authData);
     //
     // todo: temporary off, must turn on and reorganize code rows
     await connectionRepository.initializeStates();
@@ -135,20 +136,25 @@ function App() {
   const prepareContent = async (): Promise<void> => {
     console.log('PREPARE CONTENT');
     // todo: must delete it and ADD Preload data (read first page everywhere)
+    // или во все юзкейсы 2) Get/Sync execute(completed/callback):Promise<Entity[]>
+    // await prepareMockData();
     console.log('ADD REAL DATA TO DIALOG MOCK DATA ');
+    // await remoteDataSource.getDialogsFirstPage();
+    // await remoteDataSource.setUpMockStorage();
+    //
     //
   };
 
   const loginHandler = async (data: LoginData): Promise<void> => {
     setCurrentUser(data);
     console.log(`call login actions: ${JSON.stringify(data)}`);
-    if (remoteDataSourceMock.authInformation) {
+    if (remoteDataSource.authInformation) {
       console.log(
         `authInformation: ${JSON.stringify(
-          remoteDataSourceMock?.authInformation.userName,
+          remoteDataSource?.authInformation.userName,
         )}`,
       );
-      if (data.login !== remoteDataSourceMock.authInformation.userName) {
+      if (data.login !== remoteDataSource.authInformation.userName) {
         await reloginSDK(data).catch((e) => {
           console.log(
             `exception in reloginSDK ${(e as unknown as Error).message}`,
@@ -161,9 +167,9 @@ function App() {
       }
     } else {
       console.log('need prepare SDK with data:', data);
-      if (remoteDataSourceMock.needInit) {
+      if (remoteDataSource.needInit) {
         console.log('start prepareSDK actions with data:', data);
-        await remoteDataSourceMock.initSDKWithUser(
+        await remoteDataSource.initSDKWithUser(
           {
             appIdOrToken: currentContext.InitParams.accountData.appId,
             authKeyOrAppId: currentContext.InitParams.accountData.authKey,
@@ -215,10 +221,6 @@ function App() {
             <Route
               path="/desktop-test-mock"
               element={
-                // <QuickBloxUIKitDesktopLayout theme={new CustomTheme()} InputWidgetLeftPlaceHolder={CustomWidgetVoiceToText('','')} />
-
-                // <QuickBloxUIKitDesktopLayout theme={new CustomTheme()} />
-
                 <QuickBloxUIKitDesktopLayout theme={new DefaultTheme()} />
               }
             />

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

@@ -49,7 +49,10 @@ 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;
@@ -65,3 +68,16 @@ export type FunctionTypeDialogEntityToBoolean = (
   entity: GroupDialogEntity,
 ) => Promise<boolean>;
 export type FunctionTypeFileToFileEntity = (file: File) => Promise<FileEntity>;
+export type FunctionTypeJSXElement = () => JSX.Element;
+// 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

@@ -27,6 +27,7 @@ type DialogsComponentSettings = {
   themeName?: ThemeNames;
   withoutHeader?: boolean;
   useSubHeader?: boolean;
+  useUpHeader?: boolean;
   themeHeader?: UiKitTheme;
   themePreview?: UiKitTheme;
 };
@@ -34,7 +35,8 @@ type DialogsComponentSettings = {
 type DialogsProps = {
   header?: React.ReactNode;
   subHeaderContent?: React.ReactNode;
-  itemSelectHandler?: FunctionTypeViewModelToVoid<DialogEntity>;
+  upHeaderContent?: React.ReactNode;
+  onDialogSelectHandler?: FunctionTypeViewModelToVoid<DialogEntity>;
   dialogsViewModel: DialogsViewModel;
   additionalSettings?: DialogsComponentSettings;
 };
@@ -43,7 +45,8 @@ type DialogsProps = {
 const DialogsComponent: React.FC<DialogsProps> = ({
   header,
   subHeaderContent,
-  itemSelectHandler,
+  upHeaderContent,
+  onDialogSelectHandler,
   dialogsViewModel,
   additionalSettings = undefined,
 }: DialogsProps) => {
@@ -68,15 +71,15 @@ const DialogsComponent: React.FC<DialogsProps> = ({
     dialogsViewModel?.dialogs.forEach((entiy, index) => {
       const pw: PreviewDialogViewModel = new PreviewDialogViewModel(
         (it) => {
-          if (itemSelectHandler) {
+          if (onDialogSelectHandler) {
             setSelectedItem({ selectedIndex: index, item: it });
-            itemSelectHandler(it);
+            onDialogSelectHandler(it);
           }
         },
         (it) => {
-          if (itemSelectHandler) {
+          if (onDialogSelectHandler) {
             setSelectedItem({ selectedIndex: index, item: it });
-            itemSelectHandler(it);
+            onDialogSelectHandler(it);
           }
         },
         // Number(entiy.id),
@@ -149,7 +152,9 @@ const DialogsComponent: React.FC<DialogsProps> = ({
   const useHeader = !additionalSettings?.withoutHeader || header || false;
   const useSubContent =
     additionalSettings?.useSubHeader || subHeaderContent || false;
-  const usingHeader = header || (
+  const useUpContent =
+    additionalSettings?.useUpHeader || upHeaderContent || false;
+  const HeaderContent = header || (
     <HeaderDialogs
       title="Dialogs"
       clickSearchHandler={() => {
@@ -307,8 +312,8 @@ const DialogsComponent: React.FC<DialogsProps> = ({
       }}
     >
       <ColumnContainer>
-        {useHeader && usingHeader}
-        {/* {showSearchDialogs ? renderSearchDialogs() : null} */}
+        {useUpContent && upHeaderContent}
+        {useHeader && HeaderContent}
         {useSubContent && subHeaderContent}
         {dialogsViewModel?.loading && (
           // <div style={{ maxHeight: '44px', minHeight: '44px', height: '44px' }}>

package/src/Presentation/Views/Dialogs/useDialogsViewModel.ts

@@ -44,7 +44,7 @@ export default function useDialogsViewModel(
   //
   const currentUserId =
     currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.userId;
-  // const currentContext = useQbDataContext();
+  // const currentContext = useQbInitializedDataContext();
   const remoteDataSourceMock: RemoteDataSource =
     currentContext.storage.REMOTE_DATA_SOURCE;
 

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

@@ -35,24 +35,28 @@ import { stringifyError } from '../../../../../utils/parse';
 import { FileEntity } from '../../../../../Domain/entity/FileEntity';
 import UserAvatar from '../EditDialog/UserAvatar/UserAvatar';
 import MainButton, { TypeButton } from '../../Buttons/MainButton/MainButton';
-import useQbDataContext from '../../../providers/QuickBloxUIKitProvider/useQbDataContext';
+import useQbInitializedDataContext from '../../../providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
 import UiKitTheme from '../../../../assets/UiKitTheme';
 
 type HeaderDialogsProps = {
   dialog: DialogEntity;
   dialogViewModel: DialogsViewModel;
-  closeInformationHandler: FunctionTypeVoidToVoid;
+  onCloseDialogInformationHandler: FunctionTypeVoidToVoid;
   theme?: UiKitTheme;
+  subHeaderContent?: React.ReactNode;
+  upHeaderContent?: React.ReactNode;
 };
 // eslint-disable-next-line react/function-component-definition
 const DialogInformation: React.FC<HeaderDialogsProps> = ({
   dialog,
   dialogViewModel,
-  closeInformationHandler,
+  onCloseDialogInformationHandler,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   theme = undefined,
+  subHeaderContent = undefined,
+  upHeaderContent = undefined,
 }: HeaderDialogsProps) => {
-  const currentContext = useQbDataContext();
+  const currentContext = useQbInitializedDataContext();
   const currentUserId =
     currentContext.storage.REMOTE_DATA_SOURCE.authInformation?.userId.toString();
   const { handleModal } = React.useContext(ModalContext);
@@ -62,9 +66,9 @@ const DialogInformation: React.FC<HeaderDialogsProps> = ({
 
   useEffect(() => {
     console.log('HAVE NEW DIALOG');
-    if (dialog === undefined && closeInformationHandler) {
+    if (dialog === undefined && onCloseDialogInformationHandler) {
       console.log('HAVE UNDEFINED NEW DIALOG');
-      closeInformationHandler();
+      onCloseDialogInformationHandler();
 
       return;
     }
@@ -244,6 +248,9 @@ const DialogInformation: React.FC<HeaderDialogsProps> = ({
     }
   };
 
+  const useSubContent = subHeaderContent || false;
+  const useUpContent = upHeaderContent || false;
+
   return isAllMembersShow ? (
     <MembersList
       closeInformationHandler={() => {
@@ -254,6 +261,7 @@ const DialogInformation: React.FC<HeaderDialogsProps> = ({
   ) : (
     <div className="dialog-information-container">
       <ColumnContainer maxWidth="320px">
+        {useUpContent && upHeaderContent}
         <div className="dialog-information-container--dialog-information-wrapper">
           <div className="dialog-information-container__dialog-information">
             <div>Dialog information</div>
@@ -262,13 +270,14 @@ const DialogInformation: React.FC<HeaderDialogsProps> = ({
             <ActiveSvg
               content={<Close applyZoom color="var(--secondary-elements)" />}
               clickAction={() => {
-                if (closeInformationHandler) {
-                  closeInformationHandler();
+                if (onCloseDialogInformationHandler) {
+                  onCloseDialogInformationHandler();
                 }
               }}
             />
           </div>
         </div>
+        {useSubContent && subHeaderContent}
         <div className="dialog-information-container--icon-dialog-wrapper">
           <div className="dialog-information-container__icon-dialog">
             <div className="dialog-information-container__icon-dialog__info">

package/src/Presentation/components/UI/Dialogs/DialogInformation/UsersList/useUsersListViewModel.ts

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { DialogEntity } from '../../../../../../Domain/entity/DialogEntity';
-import useQbDataContext from '../../../../providers/QuickBloxUIKitProvider/useQbDataContext';
+import useQbInitializedDataContext from '../../../../providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
 import { UserEntity } from '../../../../../../Domain/entity/UserEntity';
 import { UsersListViewModel } from './UsersListViewModel';
 import { GetUsersByIdsUseCase } from '../../../../../../Domain/use_cases/GetUsersByIdsUseCase';
@@ -18,7 +18,7 @@ export default function useUsersListViewModel(
   const [users, setUsers] = useState<UserEntity[]>([]);
   const [dialog, setDialog] = useState<DialogEntity>(dialogEntity);
 
-  const currentContext = useQbDataContext();
+  const currentContext = useQbInitializedDataContext();
 
   async function getUsers() {
     console.log('call getUsers in useUsersListViewModel');

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

@@ -13,7 +13,7 @@ import UserAvatar from './UserAvatar/UserAvatar';
 import { DialogType } from '../../../../../Domain/entity/DialogTypes';
 import GroupChat from '../../svgs/Icons/Contents/GroupChat';
 import PublicChannel from '../../svgs/Icons/Contents/PublicChannel';
-import useQbDataContext from '../../../providers/QuickBloxUIKitProvider/useQbDataContext';
+import useQbInitializedDataContext from '../../../providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
 
 export const TypeOpenDialog = {
   edit: 'edit',
@@ -40,7 +40,7 @@ const EditDialog: React.FC<EditDialogProps> = ({
   clickUpdatedHandler,
   clickCancelHandler,
 }) => {
-  const currentContext = useQbDataContext();
+  const currentContext = useQbInitializedDataContext();
   const maxUploadFileSize = currentContext.InitParams.maxFileSize;
   const minLengthNameDialog = 3;
   const maxLengthNameDialog = 60;

package/src/Presentation/components/UI/Dialogs/InviteMembers/useInviteMembersViewModel.ts

@@ -7,7 +7,7 @@ import {
 import { UserEntity } from '../../../../../Domain/entity/UserEntity';
 import { GetAllUsersUseCase } from '../../../../../Domain/use_cases/GetAllUsersUseCase';
 import UsersRepository from '../../../../../Data/repository/UsersRepository';
-import useQbDataContext from '../../../providers/QuickBloxUIKitProvider/useQbDataContext';
+import useQbInitializedDataContext from '../../../providers/QuickBloxUIKitProvider/useQbInitializedDataContext';
 import { Stubs } from '../../../../../Data/Stubs';
 import { stringifyError } from '../../../../../utils/parse';
 import {
@@ -18,7 +18,7 @@ import {
 export default function useInviteMembersViewModel(): InviteMembersViewModel {
   // initPagination?: Pagination,
   console.log('create useUsersListViewModel');
-  const currentContext = useQbDataContext();
+  const currentContext = useQbInitializedDataContext();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('error with getting user list');
 

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,
+  };
+}