quickblox-react-ui-kit 0.4.5-beta.2 → 0.4.5-beta.5

package/dist/utils/parse.d.ts

@@ -1,5 +1,5 @@
 import { QBError } from 'quickblox/quickblox';
-export declare const jsonParse: <P>(text: string) => P | string;
+export declare const jsonParse: <P>(text: string) => string | P;
 export declare const parseErrorObject: (data: Dictionary<string | string[]>) => string;
 export declare const parseErrorMessage: (message: string) => string;
 export declare function isQBError(error: unknown): error is QBError;

package/global.d.ts

@@ -1,13 +1,204 @@
+// interface Tone {
+//   name: string;
+//   description: string;
+//   iconEmoji: string;
+// }
+//
+// type Primitive = string | number | boolean | undefined | null | Date | File;
+
+// type SetTails<T, R extends Primitive> = T extends Array<unknown>
+//   ? Array<T[number] extends Primitive ? R : SetTails<T[number], R>>
+//   : {
+//       [K in keyof T]: T[K] extends Primitive ? R : SetTails<T[K], R>;
+//     };
+
+// type ProxyConfig = {
+//   api: string;
+//   servername: string;
+//   port: string;
+// };
+// interface WidgetConfig {
+//   apiKey: string;
+//   useDefault: boolean;
+//   maxTokens: number;
+//   proxyConfig: ProxyConfig;
+// }
+//
+// interface AITranslateWidgetConfig extends WidgetConfig {
+//   defaultLanguage: string;
+//   languages: string[];
+// }
+//
+// interface AIRephraseWidgetConfig extends WidgetConfig {
+//   defaultTone: string;
+//   Tones: Tone[];
+// }
+
+// interface QBConfig {
+//   credentials: {
+//     appId: number;
+//     accountKey: string;
+//     authKey: string;
+//     authSecret: string;
+//     sessionToken: string; // ??? ui-kit
+//   };
+//   configAIApi: {
+//     // ui-kit
+//     AIAnswerAssistWidgetConfig: WidgetConfig;
+//     AITranslateWidgetConfig: AITranslateWidgetConfig;
+//     AIRephraseWidgetConfig: AIRephraseWidgetConfig;
+//   };
+//   appConfig: {
+//     maxFileSize: number; // ui-kit
+//     sessionTimeOut: number; // ?? webRTc -> ui-kit
+//     chatProtocol: {
+//       active: number;
+//     };
+//     debug: boolean;
+//     enableForwarding: boolean; // ui-kit
+//     enableReplying: boolean; // ui-kit
+//     regexUserName?: string; // ui-kit
+//     endpoints: {
+//       api: string;
+//       chat: string;
+//     };
+//     // on: {
+//     //   sessionExpired: (handleResponse: any, retry: any) => Promise<void>;
+//     // };
+//     streamManagement: {
+//       enable: boolean;
+//     };
+//   };
+// }
+
+/*
+    * QuickBlox Types - start
+
+ */
+
 type Dictionary<T> = Record<string, T>;
+//
+// type RequiredProps<T, K extends keyof T> = T & Required<Pick<T, K>>;
+
+// declare enum QBChatProtocol {
+//   BOSH = 1,
+//   WebSockets = 2,
+// }
+//
+// interface ICEServer {
+//   urls: string;
+//   username: string;
+//   credential: string;
+// }
+
+// declare enum QBChatDialogType {
+//   PUBLIC_GROUP = 1,
+//   GROUP = 2,
+//   PRIVATE = 3,
+// }
+
+// declare interface QBChatDialog {
+//   /** ID of the dialog. Generated automatically by the server after dialog creation. */
+//   _id: string;
+//   /** ID of dialog's owner. */
+//   user_id: QBUser['id'];
+//   /** Date & time when a record was created, filled automatically. */
+//   created_at: string;
+//   /** Date & time when a record was created, filled automatically. */
+//   updated_at: string;
+//   /**
+//    * Type of dialog. Possible values are:
+//    * - type=1 (`PUBLIC_GROUP`)
+//    * - type=2 (`GROUP`)
+//    * - type=3 (`PRIVATE`)
+//    */
+//   type: QBChatDialogType;
+//   /**
+//    * Name of a group chat. Makes sense if type=1 (`PUBLIC_GROUP`) or type=2 (`GROUP`).
+//    * The maximum length for the dialog name is 200 symbols.
+//    */
+//   name: string;
+//   /**
+//    * Photo of a group chat. Makes sense if type=1 (`PUBLIC_GROUP`) or type=2 (`GROUP`).
+//    * Can contain a link to a file in Content module, Custom Objects module or just a web link.
+//    */
+//   photo: null | string;
+//   /**
+//    * JID of XMPP room for group chat to connect. Nil if type=3 (PRIVATE).
+//    * Generated automatically by the server after dialog creation.
+//    */
+//   xmpp_room_jid: string | null;
+//   /** Array of users' IDs - dialog occupants. Does not make sense if type=1 (PUBLIC_GROUP). */
+//   occupants_ids: number[];
+//   /** Last sent message in this dialog. */
+//   last_message: string | null;
+//   /** Timestamp of last sent message in this dialog. */
+//   last_message_date_sent: number | null | string; // todo: switch type to number
+//   /** ID of the user who sent last message in this dialog. */
+//   last_message_user_id: QBUser['id'] | null;
+//   /** ID of last message in this dialog. */
+//   last_message_id: string | null;
+//   /** Number of unread messages in this dialog for a current user. */
+//   unread_messages_count: number | null;
+//   /**
+//    * - Information about class and fields in Custom Objects.
+//    * - Any dialog can be extended using Custom Objects to store additional parameters.
+//    */
+//   data?: {
+//     /** Class name in Custom Objects. */
+//     class_name: string;
+//     /** Field name of class in Custom Objects. Can be many: 1..N. */
+//     [field_name_N: string]: QBCustomField;
+//   };
+//   new_occupants_ids?: number[]; // TODO: EXTENDS TYPE AND SWITCH TO THIS NEW TYPE
+//   joined?: boolean; // TODO: EXTENDS TYPE AND SWITCH TO THIS NEW TYPE
+// }
+
+// declare interface QBChatNewMessage {
+//   type: 'chat' | 'groupchat';
+//   body: string;
+//   notification_type?: string; // TODO: NED ADD TO TYPE
+//   dialog_id: QBChatDialog['_id']; // TODO: NED ADD TO TYPE
+//   extension: {
+//     attachments?: ChatMessageAttachment[];
+//     save_to_history: 0 | 1;
+//     dialog_id: QBChatDialog['_id'];
+//     notification_type?: string; // TODO: NED ADD TO TYPE
+//     sender_id?: QBUser['id']; // TODO: NED ADD TO TYPE
+//     qb_message_action?: 'forward' | 'reply'; // TODO: NED ADD TO TYPE
+//     origin_sender_name?: string; // TODO: NED ADD TO TYPE
+//     qb_original_messages?: string; // TODO: NED ADD TO TYPE
+//   };
+//   markable: 0 | 1;
+// }
 
-declare module "*.svg" {
-  import React from "react";
-  const content: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
-  export default content;
-}
-
-declare module "*.svg?react" {
-  import React from "react";
-  const content: (props: React.SVGProps<SVGSVGElement>) => JSX.Element;
-  export default content;
-}
+// TODO: add export to SDK
+// type ChatConnectParams =
+//   | {
+//       /** Connect to the chat by user id */
+//       userId: QBUser['id'];
+//       /** The user's password or session token */
+//       password: string;
+//     }
+//   | {
+//       /** Connect to the chat by user jid */
+//       jid: string;
+//       /** The user's password or session token */
+//       password: string;
+//     }
+//   | {
+//       /** Connect to the chat by user's email */
+//       email: string;
+//       /** The user's password or session token */
+//       password: string;
+//     };
+//
+// type QBCustomField =
+//   | string
+//   | string[]
+//   | number
+//   | number[]
+//   | boolean
+//   | boolean[]
+//   | null
+//   | undefined;

package/media-recorder-js.d.ts

@@ -0,0 +1,133 @@
+declare module 'media-recorder-js' {
+  interface QBMediaRecorderConstructorProps {
+    /** Preferred MIME type */
+    mimeType?: string
+    workerPath?: string
+    /**
+     * The minimum number of milliseconds of data to return
+     * in a single Blob, fire 'ondataavaible' callback
+     * (isn't need to use with 'audio/wav' of 'audio/mp3')
+     *
+     * @default 1000
+     */
+    timeslice?: number
+    /**
+     * What to do with a muted input MediaStreamTrack,
+     * e.g. insert black frames/zero audio volume in the recording
+     * or ignore altogether
+     *
+     * @default true
+     */
+    ignoreMutedMedia?: boolean
+    /** Recording start event handler */
+    onstart?: VoidFunction
+    /** Recording stop event handler */
+    onstop?: (file: Blob) => void
+    /** Recording pause event handler */
+    onpause?: VoidFunction
+    /** Recording resume event handler */
+    onresume?: VoidFunction
+    /** Error event handler */
+    onerror?: (error: unknown) => void
+    /**
+     * `dataavailable` event handler.
+     * The Blob of recorded data is contained in this event (callback
+     * isn't supported if use 'audio/wav' of 'audio/mp3' for recording)
+     */
+    ondataavailable?: (event: { data: Blob }) => void
+  }
+
+  class QBMediaRecorder {
+    constructor(config: QBMediaRecorderConstructorProps)
+
+    /**
+     * Switch recording Blob objects to the specified
+     * MIME type if `MediaRecorder` support it.
+     */
+    toggleMimeType(mimeType: string): void
+
+    /**
+     * Returns current `MediaRecorder` state
+     */
+    getState(): 'inactive' | 'recording' | 'paused'
+
+    /**
+     * Starts recording a stream.
+     * Fires `onstart` callback.
+     */
+    start(stream: MediaStream): void
+
+    /**
+     * Stops recording a stream
+     *
+     * @fires `onstop` callback and passing there Blob recorded
+     */
+    stop(): void
+
+    /** Pausing stream recording */
+    pause(): void
+
+    /** Resumes stream recording */
+    resume(): void
+
+    /**
+     * Change record source
+     */
+    change(stream: MediaStream): void
+
+    /**
+     * Create a file from blob and download as file.
+     * This method will call `stop` if recording is in progress.
+     *
+     * @param {string} filename Name of video file to be downloaded
+     * (default to `Date.now()`)
+     */
+    download(filename?: string): void
+
+    _getBlobRecorded(): Blob
+
+    callbacks: Pick<
+      QBMediaRecorderConstructorProps,
+      | 'onstart'
+      | 'onstop'
+      | 'onpause'
+      | 'onresume'
+      | 'ondataavailable'
+      | 'onerror'
+    >
+
+    /**
+     * Checks capability of recording in the environment.
+     * Checks `MediaRecorder`, `MediaRecorder.isTypeSupported` and `Blob`.
+     */
+    static isAvailable(): boolean
+
+    /**
+     * Checks if AudioContext API is available.
+     * Checks `window.AudioContext` or `window.webkitAudioContext`.
+     */
+    static isAudioContext(): boolean
+    /**
+     * The `QBMediaRecorder.isTypeSupported()` static method returns
+     * a Boolean which is true if the MIME type specified is one
+     * the user agent should be able to successfully record.
+     * @param mimeType The MIME media type to check.
+     *
+     * @returns true if the `MediaRecorder` implementation is capable of
+     * recording `Blob` objects for the specified MIME type. Recording may
+     * still fail if there are insufficient resources to support the
+     * recording and encoding process. If the value is false, the user
+     * agent is incapable of recording the specified format.
+     */
+
+    static isTypeSupported(mimeType: string): boolean
+
+    /**
+     * Return supported mime types
+     * @param type video or audio (dafault to 'video')
+     */
+    static getSupportedMimeTypes(type: 'audio' | 'video' = 'video'): string[]
+  }
+
+  export default QBMediaRecorder
+}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "quickblox-react-ui-kit",
-  "version": "0.4.5-beta.2",
+  "version": "0.4.5-beta.5",
   "main": "dist/index-ui.js",
-  "types": "dist/index-ui.d.ts",
   "license": "MIT",
   "dependencies": {
+    "@types/node": "^16.18.6",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "classnames": "^2.3.2",
@@ -12,41 +12,39 @@
     "qb-ai-core": "^0.1.3",
     "qb-ai-rephrase": "^0.1.2",
     "qb-ai-translate": "^0.1.2",
-    "quickblox": "^2.17.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "quickblox": "^2.19.2",
+    "media-recorder-js": "^2.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-router-dom": "^6.11.1",
+    "react-scripts": "5.0.1",
     "react-toastify": "^10.0.4",
     "rxjs": "^7.8.0",
-    "typedoc": "^0.25.0",
-    "typescript": "^5.2.2",
+    "typescript": "^4.9.3",
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.9",
-    "@babel/preset-env": "^7.26.9",
-    "@babel/preset-react": "^7.26.3",
-    "@babel/preset-typescript": "^7.26.0",
-    "@chromatic-com/storybook": "^3.2.4",
-    "@storybook/addon-essentials": "^8.5.8",
-    "@storybook/addon-interactions": "^8.5.8",
-    "@storybook/addon-onboarding": "^8.5.8",
-    "@storybook/addon-webpack5-compiler-swc": "^2.1.0",
-    "@storybook/blocks": "^8.5.8",
-    "@storybook/react": "^8.5.8",
-    "@storybook/react-webpack5": "^8.5.8",
-    "@storybook/test": "^8.5.8",
+    "@storybook/addon-essentials": "^7.6.12",
+    "@storybook/addon-interactions": "^7.6.12",
+    "@storybook/addon-links": "^7.6.12",
+    "@storybook/addon-viewport": "^7.6.16",
+    "@storybook/blocks": "^7.6.12",
+    "@storybook/preset-create-react-app": "^7.6.12",
+    "@storybook/react": "^7.6.12",
+    "@storybook/react-webpack5": "^7.6.12",
+    "@storybook/test": "^7.6.12",
     "@svgr/webpack": "^8.1.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
-    "@testing-library/user-event": "^14.6.1",
+    "@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": "^20.17.19",
+    "@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",
-    "babel-loader": "^9.2.1",
-    "compression-webpack-plugin": "^11.1.0",
-    "css-loader": "^6.11.0",
+    "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",
@@ -59,32 +57,35 @@
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.11.3",
-    "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.6.3",
-    "mini-css-extract-plugin": "^2.9.2",
-    "path-browserify": "^1.0.1",
+    "eslint-plugin-storybook": "^0.6.15",
     "prettier": "^2.8.0",
-    "process": "^0.11.10",
     "prop-types": "^15.8.1",
+    "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": "^16.0.5",
-    "storybook": "^8.5.8",
-    "style-loader": "^3.3.4",
+    "sass-loader": "^13.2.2",
+    "storybook": "^7.6.12",
+    "style-loader": "^3.3.2",
     "ts-loader": "^9.4.2",
+    "typedoc": "^0.23.22",
+    "typescript": "^4.9.3",
     "url-loader": "^4.1.1",
     "web-vitals": "^2.1.4",
     "webpack": "^5.82.1",
-    "webpack-cli": "^5.1.1",
-    "webpack-dev-server": "^4.11.1"
+    "webpack-cli": "^5.1.1"
   },
   "scripts": {
-    "start": "webpack serve --config webpack.app.config.js --mode development",
-    "build:app": "webpack --config webpack.app.config.js --mode production",
-    "build:lib": "webpack --config webpack.lib.config.js --mode production",
-    "test": "jest",
+    "start": "react-scripts start",
+    "start-https": "set HTTPS=true&&react-scripts start --host=0.0.0.0",
+    "start-https-mac": "export HTTPS=true&&react-scripts start",
+    "start-origin": "react-scripts start",
+    "build": "react-scripts build",
+    "build:lib": "webpack",
+    "test": "react-scripts test",
     "lint": "eslint ./src",
-    "format": "prettier --write .",
+    "eject": "react-scripts eject",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
@@ -93,10 +94,8 @@
   },
   "eslintConfig": {
     "extends": [
-      "airbnb",
-      "plugin:react/recommended",
-      "plugin:@typescript-eslint/recommended",
-      "prettier",
+      "react-app",
+      "react-app/jest",
       "plugin:storybook/recommended"
     ]
   },

package/public/index.html

@@ -1,20 +1,47 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <link rel="icon" href="/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="theme-color" content="#000000" />
-  <meta name="description" content="Web site created using React 19" />
-  <link rel="apple-touch-icon" href="/logo192.png" />
-  <link rel="manifest" href="/manifest.json" />
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
 
-  <script src="quickblox.js"></script>
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
 
-  <title>QuickBlox UIKit React App</title>
-</head>
-<body>
-<noscript>You need to enable JavaScript to run this app.</noscript>
-<div id="root"></div>
-</body>
+<!--    <script src="../src/libs/quickblox.js" defer></script>-->
+    <script src="quickblox.js"></script>
+
+    <title>QuickBlox UIKit React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
 </html>

package/src/Data/Stubs.ts

@@ -131,12 +131,12 @@ export class Stubs {
       id: '10231',
       type: FileType.image,
       uid: '10231',
-      url: 'https://files.readme.io/00b5563-small-qb-logo-docs-white-9px.png',
+      url: 'https://via.placeholder.com/600/92c952',
       file: {
         id: '10231',
         uid: '',
         type: FileType.image,
-        url: 'https://files.readme.io/00b5563-small-qb-logo-docs-white-9px.png',
+        url: 'https://via.placeholder.com/600/92c952',
       },
     };
     const photoAttachments: ChatMessageAttachmentEntity[] = [photo];
@@ -267,12 +267,12 @@ export class Stubs {
       id: '10231',
       type: FileType.image,
       uid: '10231',
-      url: 'https://cdn-ikpjoif.nitrocdn.com/WZsqFPiehrtwFaaeJNQAQZrkRMgaTuyL/assets/images/optimized/rev-83f47e6/quickblox.com/wp-content/themes/QuickbloxTheme2021/img/chat-api-feature-rich-sdk.jpg',
+      url: 'https://via.placeholder.com/600/92c952',
       file: {
         id: '10231',
         uid: '',
         type: FileType.image,
-        url: 'https://cdn-ikpjoif.nitrocdn.com/WZsqFPiehrtwFaaeJNQAQZrkRMgaTuyL/assets/images/optimized/rev-83f47e6/quickblox.com/wp-content/themes/QuickbloxTheme2021/img/chat-api-feature-rich-sdk.jpg',
+        url: 'https://via.placeholder.com/600/92c952',
       },
     };
     const photoAttachments: ChatMessageAttachmentEntity[] = [photo];
@@ -1029,12 +1029,12 @@ export class Stubs {
       id: '10231',
       type: FileType.image,
       uid: '10231',
-      url: 'https://files.readme.io/00b5563-small-qb-logo-docs-white-9px.png',
+      url: 'https://via.placeholder.com/600/92c952',
       file: {
         id: '10231',
         uid: '',
         type: FileType.image,
-        url: 'https://files.readme.io/00b5563-small-qb-logo-docs-white-9px.png',
+        url: 'https://via.placeholder.com/600/92c952',
       },
     };
     const photoAttachments: ChatMessageAttachmentEntity[] = [photo];

package/src/Data/repository/ConnectionRepository.ts

@@ -3,7 +3,8 @@ import { stringifyError } from '../../utils/parse';
 import { getQB } from '../../qb-api-calls';
 
 export default class ConnectionRepository extends SubscriptionPerformer<boolean> {
-  private timerId: NodeJS.Timeout | null = null; // Используем Timeout вместо Timer
+  // private timerId: NodeJS.Timer | undefined;
+  private timerId: ReturnType<typeof setTimeout> | undefined;
 
   private _needInit: boolean;
 

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

@@ -118,8 +118,8 @@ export class RemoteDataSource implements IRemoteDataSource {
   private _authProcessed: boolean;
 
   get authProcessed(): boolean {
-    const auth = this._authProcessed;
     const QB = getQB();
+    const auth = this._authProcessed;
     const chatConnection = QB && QB.chat && QB.chat.isConnected;
 
     if (chatConnection) return true;

package/src/Domain/use_cases/SyncDialogsUseCase.ts

@@ -19,7 +19,7 @@ export class SyncDialogsUseCase extends BaseUseCase<boolean, boolean> {
 
   private timer2Id: NodeJS.Timer | undefined;
 
-  private timerId: NodeJS.Timeout | null = null;
+  private timerId: NodeJS.Timer | undefined;
 
   constructor(
     dialogRepository: DialogsRepository,
@@ -171,7 +171,7 @@ export class SyncDialogsUseCase extends BaseUseCase<boolean, boolean> {
   override release() {
     super.release();
     if (this.timerId) {
-      clearInterval(this.timerId as NodeJS.Timeout);
+      clearTimeout(this.timerId);
     }
   }
 }

package/src/Domain/use_cases/UserTypingMessageUseCase.ts

@@ -11,7 +11,7 @@ export class UserTypingMessageUseCase implements IUseCase<void, void> {
 
   private typingTimeout = 3;
 
-  private _typingTimer: NodeJS.Timeout | null = null;
+  private _typingTimer: NodeJS.Timer | undefined;
 
   private _typingTime = 0;
 
@@ -38,8 +38,8 @@ export class UserTypingMessageUseCase implements IUseCase<void, void> {
       this._typingTimer = setInterval(() => {
         if ((Date.now() - this._typingTime) / 1000 >= this.typingTimeout) {
           this.messagesRepository.typingMessageStop(this.dialog, this.senderId);
-          clearInterval(this._typingTimer as NodeJS.Timeout);
-          this._typingTimer = null;
+          clearInterval(this._typingTimer);
+          this._typingTimer = undefined;
           this._typingTime = 0;
         }
       }, 500);