quickblox-react-ui-kit 0.3.1 → 0.4.0

package/dist/qb-api-calls/index.d.ts

@@ -1,4 +1,4 @@
-import { ChatConnectParams, GetMessagesResult, GetUserParams, ListUserParams, ListUserResponse, QBBlob, QBBlobCreateUploadParams, QBCustomObject, QBDataDeletedResponse, QBGetDialogResult, QBLoginParams, QBMediaParams, QBMessageStatusParams, QBSession, QBSystemMessage, QBUser, QBUserCreateParams, QBWebRTCSession } from 'quickblox/quickblox';
+import { AIAnswerResponse, AIChatHistory, ChatConnectParams, GetMessagesResult, GetUserParams, ListUserParams, ListUserResponse, QBBlob, QBBlobCreateUploadParams, QBCustomObject, QBDataDeletedResponse, QBGetDialogResult, QBLoginParams, QBMediaParams, QBMessageStatusParams, QBSession, QBSystemMessage, QBUser, QBUserCreateParams, QBWebRTCSession } from 'quickblox/quickblox';
 import { QBUIKitChatDialog, QBUIKitChatNewMessage, QBUIKitConfig } from '../CommonTypes/CommonTypes';
 export type QBInitParams = {
     appIdOrToken: string | number;
@@ -72,3 +72,5 @@ export declare function QBChatSendSystemMessage(to: QBUser['id'] | string, messa
 export declare function QBChatMarkMessageRead(params: QBMessageStatusParams): void;
 export declare function QBChatMarkMessageDelivered(params: QBMessageStatusParams): void;
 export declare function QBWebRTCSessionGetUserMedia(session: QBWebRTCSession, params: QBMediaParams): Promise<MediaStream | undefined>;
+export declare function QBAnswerAssist(smartChatAssistantId: string, messageToAssist: string, history: AIChatHistory): Promise<AIAnswerResponse>;
+export declare function QBTranslate(smartChatAssistantId: string, textToTranslate: string, languageCode: string): Promise<AIAnswerResponse>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quickblox-react-ui-kit",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "main": "dist/index-ui.js",
   "license": "MIT",
   "dependencies": {
@@ -12,7 +12,7 @@
     "qb-ai-core": "^0.1.3",
     "qb-ai-rephrase": "^0.1.2",
     "qb-ai-translate": "^0.1.2",
-    "quickblox": "^2.16.4",
+    "quickblox": "^2.17.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.11.1",
@@ -26,7 +26,6 @@
     "@storybook/addon-essentials": "^7.6.12",
     "@storybook/addon-interactions": "^7.6.12",
     "@storybook/addon-links": "^7.6.12",
-    "@storybook/addon-onboarding": "^1.0.11",
     "@storybook/addon-viewport": "^7.6.16",
     "@storybook/blocks": "^7.6.12",
     "@storybook/preset-create-react-app": "^7.6.12",
@@ -87,8 +86,7 @@
     "lint": "eslint ./src",
     "eject": "react-scripts eject",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "build:storybook": "storybook build"
+    "build-storybook": "storybook build"
   },
   "lint-staged": {
     "src/**/*.{ts,tsx}": "eslint"

package/src/CommonTypes/CommonTypes.ts

@@ -21,6 +21,7 @@ export interface WidgetConfig {
   maxTokens: number;
   useDefault: boolean;
   proxyConfig: ProxyConfig;
+  smartChatAssistantId: string;
 }
 
 export interface AITranslateWidgetConfig extends WidgetConfig {

package/src/Data/DefaultConfigurations.ts

@@ -147,6 +147,7 @@ export class DefaultConfigurations {
         AIAnswerAssistWidgetConfig: {
           organizationName: 'Quickblox',
           openAIModel: 'gpt-3.5-turbo',
+          smartChatAssistantId: '',
           apiKey: '',
           maxTokens: 3584,
           useDefault: true,
@@ -159,6 +160,7 @@ export class DefaultConfigurations {
         AITranslateWidgetConfig: {
           organizationName: 'Quickblox',
           openAIModel: 'gpt-3.5-turbo',
+          smartChatAssistantId: '',
           apiKey: '',
           maxTokens: 3584,
           useDefault: true,
@@ -178,6 +180,7 @@ export class DefaultConfigurations {
         AIRephraseWidgetConfig: {
           organizationName: 'Quickblox',
           openAIModel: 'gpt-3.5-turbo',
+          smartChatAssistantId: '',
           apiKey: '',
           maxTokens: 3584,
           useDefault: true,

package/src/Data/repository/ConnectionRepository.ts

@@ -104,7 +104,8 @@ export default class ConnectionRepository extends SubscriptionPerformer<boolean>
     const pingChat = (): Promise<string> => {
       return new Promise<string>((resolve, reject) => {
         try {
-          QB.chat.ping((error) => {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+          QB.chat.pingchat((error) => {
             if (error) {
               console.log('ping failed: ', stringifyError(error));
               resolve('failed');

package/src/Data/source/remote/IRemoteDataSource.ts

@@ -1,3 +1,4 @@
+import { AIChatHistory, AIAnswerResponse } from 'quickblox';
 import { RemoteDialogDTO } from '../../dto/dialog/RemoteDialogDTO';
 import { RemoteDialogsDTO } from '../../dto/dialog/RemoteDialogsDTO';
 import { RemoteUserDTO } from '../../dto/user/RemoteUserDTO';
@@ -111,4 +112,16 @@ export interface IRemoteDataSource extends IRemoteMessaging<RemoteMessageDTO> {
   subscribeToChatConnectionEvents(fileId: string): Promise<void>;
 
   updateCurrentDialog(dto: RemoteDialogDTO): void;
+
+  createAnswer(
+    text: string,
+    messages: AIChatHistory,
+    smartChatAssistantId: string,
+  ): Promise<AIAnswerResponse>;
+
+  translate(
+    text: string,
+    languageCode: string,
+    smartChatAssistantId: string,
+  ): Promise<AIAnswerResponse>;
 }

package/src/Data/source/remote/RemoteDataSource.ts

@@ -14,6 +14,8 @@ import QB, {
   QBSystemMessage,
   QBUser,
   QBMessageStatusParams,
+  AIChatHistory,
+  AIAnswerResponse,
 } from 'quickblox/quickblox';
 import { RemoteDialogDTO } from '../../dto/dialog/RemoteDialogDTO';
 import {
@@ -34,6 +36,7 @@ import { DialogDTOMapper } from './Mapper/DialogDTOMapper';
 import { IDTOMapper } from './Mapper/IDTOMapper';
 import { Stubs } from '../../Stubs';
 import {
+  QBAnswerAssist,
   QBChatConnect,
   QBChatDisconnect,
   qbChatGetMessagesExtended,
@@ -56,6 +59,7 @@ import {
   QBLogout,
   QBSendIsStopTypingStatus,
   QBSendIsTypingStatus,
+  QBTranslate,
   QBUpdateDialog,
   QBUsersGet,
   QBUsersGetById,
@@ -179,6 +183,24 @@ export class RemoteDataSource implements IRemoteDataSource {
       new SubscriptionPerformer<RemoteMessageDTO>();
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  createAnswer(
+    text: string,
+    messages: AIChatHistory,
+    smartChatAssistantId: string,
+  ): Promise<AIAnswerResponse> {
+    return QBAnswerAssist(smartChatAssistantId, text, messages);
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  translate(
+    text: string,
+    languageCode: string,
+    smartChatAssistantId: string,
+  ): Promise<AIAnswerResponse> {
+    return QBTranslate(smartChatAssistantId, text, languageCode);
+  }
+
   async updateCurrentDialog(dto: RemoteDialogDTO): Promise<void> {
     this.currentDialog = dto;
     //

package/src/Domain/use_cases/ai/AIAnswerAssistWithSDKUseCase.ts

@@ -0,0 +1,50 @@
+// eslint-disable-next-line import/extensions
+import { AIAnswerResponse, AIChatMessage, AIRole } from 'quickblox';
+import { IChatMessage } from '../../../Data/source/AISource';
+import { IUseCase } from '../base/IUseCase';
+import { IRemoteDataSource } from '../../../Data/source/remote/IRemoteDataSource';
+
+// interface AIChatMessageEx extends AIChatMessage {
+//   content: string;
+// } // artik 19.05.2024
+export class AIAnswerAssistWithSDKUseCase implements IUseCase<void, string> {
+  private textToSend: string;
+
+  private dialogMessages: IChatMessage[];
+
+  private dataSource: IRemoteDataSource;
+
+  private smartChatAssistantId: string;
+
+  constructor(
+    textToSend: string,
+    dialogMessages: IChatMessage[],
+    dataSource: IRemoteDataSource,
+    smartChatAssistantId: string,
+  ) {
+    console.log('CONSTRUCTOR AIAnswerAssistWithSDKUseCase');
+    this.textToSend = textToSend;
+    this.dialogMessages = dialogMessages;
+    this.dataSource = dataSource;
+    this.smartChatAssistantId = smartChatAssistantId;
+  }
+
+  async execute(): Promise<string> {
+    console.log('execute AIAnswerAssistWithSDKUseCase');
+    const history: AIChatMessage[] = this.dialogMessages.map(
+      (msg: IChatMessage) => {
+        return {
+          role: msg.role as AIRole,
+          message: msg.content,
+        } as AIChatMessage;
+      },
+    );
+    const response: AIAnswerResponse = await this.dataSource.createAnswer(
+      this.textToSend,
+      history,
+      this.smartChatAssistantId,
+    );
+
+    return response.answer;
+  }
+}

package/src/Domain/use_cases/ai/AITranslateWithSDKUseCase.ts

@@ -0,0 +1,107 @@
+// eslint-disable-next-line import/extensions
+import { AIAnswerResponse } from 'quickblox/quickblox';
+import { IUseCase } from '../base/IUseCase';
+import { IRemoteDataSource } from '../../../Data/source/remote/IRemoteDataSource';
+
+export class AITranslateWithSDKUseCase implements IUseCase<void, string> {
+  private languageCodes: { [key: string]: string } = {
+    English: 'en',
+    Spanish: 'es',
+    'Chinese simplified': 'zh-Hans',
+    'Chinese traditional': 'zh-Hant',
+    French: 'fr',
+    German: 'de',
+    Japanese: 'ja',
+    Korean: 'ko',
+    Italian: 'it',
+    Russian: 'ru',
+    Portuguese: 'pt',
+    Arabic: 'ar',
+    Hindi: 'hi',
+    Turkish: 'tr',
+    Dutch: 'nl',
+    Polish: 'pl',
+    Ukrainian: 'uk',
+    Albanian: 'sq',
+    Armenian: 'hy',
+    Azerbaijani: 'az',
+    Basque: 'eu',
+    Belarusian: 'be',
+    Bengali: 'bn',
+    Bosnian: 'bs',
+    Bulgarian: 'bg',
+    Catalan: 'ca',
+    Croatian: 'hr',
+    Czech: 'cs',
+    Danish: 'da',
+    Estonian: 'et',
+    Finnish: 'fi',
+    Galician: 'gl',
+    Georgian: 'ka',
+    Greek: 'el',
+    Gujarati: 'gu',
+    Hungarian: 'hu',
+    Indonesian: 'id',
+    Irish: 'ga',
+    Kannada: 'kn',
+    Kazakh: 'kk',
+    Latvian: 'lv',
+    Lithuanian: 'lt',
+    Macedonian: 'mk',
+    Malay: 'ms',
+    Maltese: 'mt',
+    Mongolian: 'mn',
+    Nepali: 'ne',
+    Norwegian: 'no',
+    Pashto: 'ps',
+    Persian: 'fa',
+    Punjabi: 'pa',
+    Romanian: 'ro',
+    Sanskrit: 'sa',
+    Serbian: 'sr',
+    Sindhi: 'sd',
+    Sinhala: 'si',
+    Slovak: 'sk',
+    Slovenian: 'sl',
+    Uzbek: 'uz',
+    Vietnamese: 'vi',
+    Welsh: 'cy',
+  };
+
+  private textToSend: string;
+
+  private language: string;
+
+  private dataSource: IRemoteDataSource;
+
+  private smartChatAssistantId: string;
+
+  constructor(
+    textToSend: string,
+    language: string,
+    dataSource: IRemoteDataSource,
+    smartChatAssistantId: string,
+  ) {
+    console.log('CONSTRUCTOR AITranslateWithSDKUseCase');
+    this.dataSource = dataSource;
+    this.textToSend = textToSend;
+    this.language = language;
+    this.smartChatAssistantId = smartChatAssistantId;
+  }
+
+  getLanguageCode(language: string): string {
+    return this.languageCodes[language] || 'en';
+  }
+
+  async execute(): Promise<string> {
+    console.log('execute AITranslateWithSDKUseCase');
+
+    const response: AIAnswerResponse = await this.dataSource.translate(
+      this.textToSend,
+      this.getLanguageCode(this.language),
+      this.smartChatAssistantId,
+    );
+
+    return response.answer;
+  }
+}

package/src/Presentation/Views/Dialog/AIWidgets/UseDefaultAIAssistAnswerWidgetWithSDK.tsx

@@ -0,0 +1,74 @@
+import { useState } from 'react';
+import { AIMessageWidget } from './AIMessageWidget';
+import AIWidgetIcon from '../../../components/UI/svgs/Icons/AIWidgets/AIWidget';
+import ErrorMessageIcon from './ErrorMessageIcon';
+import { IChatMessage } from '../../../../Data/source/AISource';
+import { RemoteDataSource } from '../../../../Data/source/remote/RemoteDataSource';
+import { AIAnswerAssistWithSDKUseCase } from '../../../../Domain/use_cases/ai/AIAnswerAssistWithSDKUseCase';
+
+export default function UseDefaultAIAssistAnswerWidgetWithSDK(
+  dataSource: RemoteDataSource,
+  smartChatAssistantId: string,
+): 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[],
+  ): Promise<string> => {
+    if (textToSend && textToSend.length > 0) {
+      const useCaseAIAnswerAssist = new AIAnswerAssistWithSDKUseCase(
+        textToSend,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        context,
+        dataSource,
+        smartChatAssistantId,
+      );
+
+      // eslint-disable-next-line no-return-await
+      return await useCaseAIAnswerAssist
+        .execute()
+        .then((data) => {
+          setTextFromWidgetToContent(data);
+
+          return data;
+        })
+        .catch((reason) => {
+          console.log('SDK: ai answer assist error: ', reason);
+          setTextFromWidgetToContent(JSON.stringify(reason));
+
+          return reason;
+        });
+    }
+
+    return '';
+  };
+
+  return {
+    textToContent: textFromWidgetToContent,
+    renderWidget,
+    textToWidget,
+  };
+}

package/src/Presentation/Views/Dialog/AIWidgets/UseDefaultAITranslateWidgetWithSDK.tsx

@@ -0,0 +1,70 @@
+import { useState } from 'react';
+import AIWidgetIcon from '../../../components/UI/svgs/Icons/AIWidgets/AIWidget';
+import ErrorMessageIcon from './ErrorMessageIcon';
+import { AIMessageWidget } from './AIMessageWidget';
+import { IChatMessage } from '../../../../Data/source/AISource';
+import { RemoteDataSource } from '../../../../Data/source/remote/RemoteDataSource';
+import { AITranslateWithSDKUseCase } from '../../../../Domain/use_cases/ai/AITranslateWithSDKUseCase';
+
+export default function UseDefaultAITranslateWidgetWithSDK(
+  dataSource: RemoteDataSource,
+  smartChatAssistantId: string,
+): 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
+      const { language } = additionalSettings || {};
+
+      const useCaseAITranslate = new AITranslateWithSDKUseCase(
+        textToSend,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        language,
+        dataSource,
+        smartChatAssistantId,
+      );
+
+      // eslint-disable-next-line no-return-await
+      return await useCaseAITranslate.execute().then((data) => {
+        setTextFromWidgetToContent(data);
+
+        return data;
+      });
+    }
+
+    return '';
+  };
+
+  return {
+    textToContent: textFromWidgetToContent,
+    renderWidget,
+    textToWidget,
+  };
+}

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

@@ -62,6 +62,8 @@ import useQBConnection from '../../providers/QuickBloxUIKitProvider/useQBConnect
 import { ProxyConfig } from '../../../CommonTypes/CommonTypes';
 import EventMessageType from '../../../Domain/entity/EventMessageType';
 import { formatFileSize } from '../../../utils/formatFileSize';
+import UseDefaultAIAssistAnswerWidgetWithSDK from '../../Views/Dialog/AIWidgets/UseDefaultAIAssistAnswerWidgetWithSDK';
+import UseDefaultAITranslateWidgetWithSDK from '../../Views/Dialog/AIWidgets/UseDefaultAITranslateWidgetWithSDK';
 
 type AIWidgetPlaceHolder = {
   enabled: boolean;
@@ -116,7 +118,12 @@ const QuickBloxUIKitDesktopLayout: React.FC<
   let defaultAIAssistWidget = AIAssist?.AIWidget;
 
   const getAIAssistAnswer = (): void => {
-    if (AIAssist?.enabled && !AIAssist?.default) {
+    if (QBConfig.configAIApi.AIAnswerAssistWidgetConfig.smartChatAssistantId) {
+      defaultAIAssistWidget = UseDefaultAIAssistAnswerWidgetWithSDK(
+        currentContext.storage.REMOTE_DATA_SOURCE,
+        QBConfig.configAIApi.AIAnswerAssistWidgetConfig.smartChatAssistantId,
+      );
+    } else if (AIAssist?.enabled && !AIAssist?.default) {
       defaultAIAssistWidget = AIAssist.AIWidget;
     } else if (
       AIAssist?.enabled ||
@@ -151,7 +158,12 @@ const QuickBloxUIKitDesktopLayout: React.FC<
     }
   };
   const getAITranslate = (): void => {
-    if (AITranslate?.enabled && !AITranslate?.default) {
+    if (QBConfig.configAIApi.AITranslateWidgetConfig.smartChatAssistantId) {
+      defaultAITranslateWidget = UseDefaultAITranslateWidgetWithSDK(
+        currentContext.storage.REMOTE_DATA_SOURCE,
+        QBConfig.configAIApi.AITranslateWidgetConfig.smartChatAssistantId,
+      );
+    } else if (AITranslate?.enabled && !AITranslate?.default) {
       defaultAITranslateWidget = AITranslate.AIWidget;
     } else if (
       AITranslate?.enabled ||

package/src/QBconfig.ts

@@ -12,6 +12,7 @@ export const QBConfig: QBUIKitConfig = {
     AIAnswerAssistWidgetConfig: {
       organizationName: 'Quickblox',
       openAIModel: 'gpt-3.5-turbo',
+      smartChatAssistantId: '',
       apiKey: '',
       maxTokens: 3584,
       useDefault: true,
@@ -24,6 +25,7 @@ export const QBConfig: QBUIKitConfig = {
     AITranslateWidgetConfig: {
       organizationName: 'Quickblox',
       openAIModel: 'gpt-3.5-turbo',
+      smartChatAssistantId: '',
       apiKey: '',
       maxTokens: 3584,
       useDefault: true,
@@ -50,6 +52,7 @@ export const QBConfig: QBUIKitConfig = {
     AIRephraseWidgetConfig: {
       organizationName: 'Quickblox',
       openAIModel: 'gpt-3.5-turbo',
+      smartChatAssistantId: '',
       apiKey: '',
       maxTokens: 3584,
       useDefault: true,

package/src/package_artan_react_ui.json

@@ -0,0 +1,91 @@
+{
+  "name": "artan-react-ui-sample",
+  "version": "0.0.55",
+  "main": "dist/index-ui.js",
+  "license": "MIT",
+  "dependencies": {
+    "@types/node": "^16.18.6",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "classnames": "^2.3.2",
+    "qb-ai-answer-assistant": "^0.1.0",
+    "qb-ai-core": "^0.1.0",
+    "qb-ai-rephrase": "^0.1.0",
+    "qb-ai-translate": "^0.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.11.1",
+    "react-scripts": "5.0.1",
+    "rxjs": "^7.8.0",
+    "typescript": "^4.9.3",
+    "web-vitals": "^2.1.4"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.6",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
+    "@typescript-eslint/eslint-plugin-tslint": "^5.45.1",
+    "@typescript-eslint/parser": "^5.45.1",
+    "classnames": "^2.3.2",
+    "css-loader": "^6.7.3",
+    "eslint": "^8.29.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-typescript": "^3.5.2",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-no-loops": "^0.3.0",
+    "eslint-plugin-optimize-regex": "^1.2.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "prettier": "^2.8.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.4.3",
+    "react-scripts": "5.0.1",
+    "sass": "^1.62.1",
+    "sass-loader": "^13.2.2",
+    "style-loader": "^3.3.2",
+    "ts-loader": "^9.4.2",
+    "typedoc": "^0.23.22",
+    "typescript": "^4.9.3",
+    "web-vitals": "^2.1.4",
+    "webpack": "^5.82.1",
+    "webpack-cli": "^5.1.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "build:lib": "webpack",
+    "test": "react-scripts test",
+    "lint": "eslint ./src",
+    "eject": "react-scripts eject"
+  },
+  "lint-staged": {
+    "src/**/*.{ts,tsx}": "eslint"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}