@steroidsjs/core 3.0.0-beta.11 → 3.0.0-beta.111

package/ui/content/CalendarSystem/utils/utils.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.sortEventsInGroup = exports.getOmittedEvent = exports.isDateIsToday = exports.getWeekDaysFromDate = void 0;
+/* eslint-disable no-plusplus */
+var dayjs_1 = __importDefault(require("dayjs"));
+var omit_1 = __importDefault(require("lodash-es/omit"));
+var SIX_DAYS_DIFF = 6;
+var MAX_DAYS_DIFF_IN_WEEK = 7;
+var getWeekDaysFromDate = function (date) {
+    var weekDays = [];
+    var firstDayOfWeek = new Date(date);
+    var currentDay = date.getDay();
+    var diff = currentDay === 0 ? SIX_DAYS_DIFF : currentDay - 1; // Разница между текущим днем и понедельником
+    firstDayOfWeek.setDate(firstDayOfWeek.getDate() - diff); // Устанавливаем первый день недели (понедельник)
+    for (var i = 0; i < MAX_DAYS_DIFF_IN_WEEK; i++) {
+        var currentDate = new Date(firstDayOfWeek);
+        currentDate.setDate(currentDate.getDate() + i);
+        weekDays.push({
+            dayNumber: currentDate.getDate(),
+            date: new Date(currentDate)
+        });
+    }
+    return weekDays;
+};
+exports.getWeekDaysFromDate = getWeekDaysFromDate;
+var isDateIsToday = function (date) { return (0, dayjs_1["default"])(date).isToday(); };
+exports.isDateIsToday = isDateIsToday;
+var getOmittedEvent = function (event) { return (0, omit_1["default"])(event, ['color', 'eventGroupId']); };
+exports.getOmittedEvent = getOmittedEvent;
+var sortEventsInGroup = function (group) { return group.events.sort(function (eventA, eventB) { return eventA.date.getTime() - eventB.date.getTime(); }); };
+exports.sortEventsInGroup = sortEventsInGroup;

package/ui/content/Card/Card.d.ts

@@ -1,22 +1,51 @@
-export interface ICardProps {
+/// <reference types="react" />
+import { ILinkProps } from '../../nav/Link/Link';
+import { IButtonProps } from '../../form/Button/Button';
+import { IAvatarProps } from '../Avatar/Avatar';
+import { IMenuProps } from '../Menu/Menu';
+export interface ICardHeader {
     /**
-     * Цвет границы (если передать false, то граница будет скрыта)
-     * @example success
-     */
-    borderColor?: ColorName | 'default' | boolean;
+    * Параметры для аватара
+    * @example
+    * {
+    *   src: 'Kate.png',
+    *   status: true,
+    * }
+    */
+    avatar?: IAvatarProps;
     /**
-     * Дополнительный CSS-класс
-     */
-    className?: CssClassName;
+    * Свойства для компонента <Menu/>
+    */
+    menu?: IMenuProps;
     /**
-     * Дочерние элементы
+    * Текст шапки (заголовок)
+    * @example 'Steroids.js head'
+    */
+    head?: string;
+    /**
+    * Текст шапки (заголовок)
+    * @example 'Steroids.js subhead'
+    */
+    subhead?: string;
+}
+/**
+ * Card
+ *
+ * Компонент карточки, который представляет контент в структурированном формате с заголовком, обложкой, описанием,
+ * кнопками, ссылками и другими элементами.
+ *
+ * Компонент `Card` позволяет передать дочерние элементы, обложку, описание, заголовок, параметры заголовка,
+ * футер, коллекцию ссылок и коллекцию кнопок.
+ */
+export interface ICardProps extends IUiComponent {
+    /**
+     * Коллекция кнопок
      */
-    children?: CustomView;
+    buttons?: IButtonProps[];
     /**
-     * Цвет состояния
-     * @example success
+     * Дочерние элементы
      */
-    color?: ColorName;
+    children?: React.ReactNode;
     /**
      * Обложка для карточки, нужно передать ссылку на изображение
      * @example 'https://cat/cat.png'
@@ -24,50 +53,57 @@ export interface ICardProps {
     cover?: string;
     /**
      * Описание карточки
-     * @example {'Scroll to see more...'}
+     * @example 'Scroll to see more...'
      */
     description?: string;
     /**
-     * Текст для header
-     */
-    header?: string;
-    /**
-     * Текст для footer
-     */
-    footer?: string;
-    /**
-     * Ориентация карточки, горизонтальная и вертикальная
-     * @example {'vertical-reverse'}
+     * Контент футера
      */
-    orientation?: 'vertical' | 'vertical-reverse' | 'horizontal' | string;
+    footer?: {
+        head: string;
+        subhead: string;
+    };
     /**
-     * Ориентация карточки, горизонтальная и вертикальная
-     * @example {'vertical-reverse'}
+     * Контент хедера
+     * @example
+     * avatar: {
+     *  src: 'Kate.png',
+     *  status: true,
+     * },
+     * head: 'Header',
+     * subhead: 'Subhead',
+     * menu: {
+     *  dropDownProps: {
+     *   position: 'bottom',
+     *   closeMode: 'click-any',
+     *  },
+     *  items: [
+     *   {
+     *    label: 'Вырезать',
+     *    icon: 'cut',
+     *    onClick: voidFunction
+     *   },
+     *   {
+     *    label: 'Копировать',
+     *    icon: 'copy',
+     *    hasBorder: true
+     *    onClick: voidFunction
+     *   },
+     *  ],
+     *  icon: 'menu_dots',
+     * },
      */
-    shape?: 'square' | 'circle';
+    header?: ICardHeader;
     /**
-     * Объект CSS стилей
-     * @example {width: '30px'}
+     * Коллекция ссылок
      */
-    style?: CustomStyle;
+    links?: ILinkProps[];
     /**
      * Заголовок карточки
-     * @example {'Main card'}
+     * @example 'Main card'
      */
     title?: string;
-    /**
-     * Переопределение view React компонента для кастомизации отображения
-     * @example MyCustomView
-     */
-    view?: CustomView;
 }
 export type ICardViewProps = ICardProps;
-declare function Card(props: ICardProps): any;
-declare namespace Card {
-    var defaultProps: {
-        borderColor: string;
-        orientation: string;
-        shape: string;
-    };
-}
+declare function Card(props: ICardProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 export default Card;

package/ui/content/Card/Card.js

@@ -16,9 +16,4 @@ function Card(props) {
     var components = (0, hooks_1.useComponents)();
     return components.ui.renderView(props.view || 'content.CardView', __assign({}, props));
 }
-Card.defaultProps = {
-    borderColor: 'default',
-    orientation: 'vertical',
-    shape: 'circle'
-};
 exports["default"] = Card;

package/ui/content/Chart/Chart.d.ts

@@ -0,0 +1,67 @@
+/// <reference types="react" />
+import { ICheckboxListFieldProps } from 'src/ui/form/CheckboxListField/CheckboxListField';
+import { IButtonGroupProps } from 'src/ui/nav/ButtonGroup/ButtonGroup';
+/**
+ * Chart
+ * Этот компонент позволяет создавать в проекте графики разных типов, используя библиотеки nivo, react-vis и другие.
+ *  Под капотом для графиков могут использоваться различные библиотеки в зависимости от предпочтений и потребностей проекта.
+ *  Для работы с nivo графиками, необходимо установить в проекте зависимости @nivo/core и соответствующий пакет графика, например @nivo/line.
+ *  Компонент графика, независимо от выбранной библиотеки, нужно передать в пропс chartComponent.
+ */
+export interface IChartProps extends IUiComponent {
+    /**
+     * Компонент графика из библиотеки nivo
+     * @example ResponsiveLine
+     */
+    chartComponent: any;
+    /**
+     * Данные для графика
+     * @example
+     * [
+     *  {id: 1, value: 15},
+     *  {id: 2, value: 30}
+     * ]
+     */
+    data?: Record<string, any>[];
+    /**
+     * Конфигурация, настройки отображения графика
+     * @example
+     * {
+     *  lineWidth: 3,
+     *  pointSize: 10
+     * }
+     */
+    config?: Record<string, any>;
+    /**
+     * Фиксированная высота обертки в пикселях
+     * @example 500
+     */
+    wrapperHeight?: number;
+    /**
+     * Фиксированная высота обертки в пикселях
+     * @example 500
+     */
+    chartHeight?: number;
+    /**
+    * Чекбоксы
+    * Могут служить в качестве настаиваемых контроллов для создания функционала
+    */
+    checkboxes?: ICheckboxListFieldProps;
+    /**
+    * Кнопки
+    * Могут служить в качестве настаиваемых контроллов для создания функционала
+    */
+    buttonGroup?: IButtonGroupProps;
+    /**
+    * Заголовок графика
+    */
+    title?: string;
+    /**
+     * Использовать ли дефолтную конфигурацию для графика типа line
+     * @example ResponsiveLine
+     */
+    useDefaultLineChartConfig?: boolean;
+    [key: string]: any;
+}
+export type IChartViewProps = IChartProps;
+export default function Chart(props: IChartProps): JSX.Element;

package/ui/content/Chart/Chart.js

@@ -0,0 +1,19 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+exports.__esModule = true;
+var hooks_1 = require("../../../hooks");
+function Chart(props) {
+    var components = (0, hooks_1.useComponents)();
+    return components.ui.renderView(props.view || 'content.ChartView', __assign({}, props));
+}
+exports["default"] = Chart;

package/ui/content/Chart/index.d.ts

@@ -0,0 +1,2 @@
+import Chart from './Chart';
+export default Chart;

package/ui/content/Chart/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var Chart_1 = __importDefault(require("./Chart"));
+exports["default"] = Chart_1["default"];

package/ui/content/Chat/Chat.d.ts

@@ -0,0 +1,71 @@
+import React from 'react';
+import { IAvatarProps } from '../Avatar/Avatar';
+import { IGroupedMessagesByDates } from './hooks/useChat';
+export interface IChatUser {
+    id: number;
+    firstName?: string;
+    lastName?: string;
+    avatar?: IAvatarProps;
+}
+export interface IChatMessage {
+    id: number;
+    user: IChatUser;
+    text: string;
+    timestamp: Date | string;
+}
+/**
+ * Chat
+ *
+ * Комплексный компонент `Chat` предназначен для коммуникации пользователей с помощью текстовых сообщений.
+ */
+export interface IChatProps extends IUiComponent {
+    /**
+     * Идентификатор чата
+     * @example TaskChat
+     */
+    chatId: string;
+    /**
+     * Коллекция сообщений
+     * @example
+     * [
+     *  {
+     *   id: 1,
+     *   text: 'Всем привет!',
+     *   user: {
+     *     id: 1,
+     *     firstName: 'Olga',
+     *     lastName: 'Petrova',
+     *     avatar: {
+     *       src: 'images.com/image.png',
+     *       status: true,
+     *     },
+     *   },
+     *   timestamp: '2023-10-25T12:38:00',
+     *  },
+     * ]
+     */
+    messages: IChatMessage[];
+    /**
+     * Данные о текущем пользователе, нужны для отправки сообщений и определения сообщений пользователя
+     * @example
+     * {
+     *  id: 1,
+     *  firstName: 'Olga',
+     *  lastName: 'Petrova',
+     *  avatar: {
+     *    src: 'images.com/image.png',
+     *    status: true,
+     *  },
+     * }
+     */
+    currentUser: IChatUser;
+    /**
+     * Обработчик события отправки сообщения
+     */
+    onSendMessage?: (chatId: string, message: IChatMessage) => void;
+}
+export interface IChatViewProps extends Omit<IChatProps, 'messages'> {
+    groupedMessagesByDates: IGroupedMessagesByDates;
+    onSendMessage: (data: any) => void;
+}
+export default function Chat(props: IChatProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/ui/content/Chat/Chat.js

@@ -0,0 +1,29 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var hooks_1 = require("../../../hooks");
+var useChat_1 = __importDefault(require("./hooks/useChat"));
+function Chat(props) {
+    var components = (0, hooks_1.useComponents)();
+    var _a = (0, useChat_1["default"])({
+        chatId: props.chatId,
+        messages: props.messages,
+        currentUser: props.currentUser,
+        onSendMessage: props.onSendMessage
+    }), onSendMessage = _a.onSendMessage, groupedMessagesByDates = _a.groupedMessagesByDates;
+    return components.ui.renderView(props.view || 'content.ChatView', __assign(__assign({}, props), { groupedMessagesByDates: groupedMessagesByDates, onSendMessage: onSendMessage }));
+}
+exports["default"] = Chat;

package/ui/content/Chat/constants/timeTemplatesAndUnits.d.ts

@@ -0,0 +1,8 @@
+export declare const MONTH_AND_DAY_TEMPLATE = "MMMM DD";
+export declare const HOURS_AND_MINUTES_TEMPLATE = "HH:mm";
+export declare const MINUTE_UNIT = "minute";
+export declare const ISO_TIMESTAMP_TEMPLATE = "YYYY-MM-DDTHH:mm:ss.SSS";
+export declare const HOUR_UNIT = "hour";
+export declare const SECONDS_IN_MINUTE_VALUE = 60000;
+export declare const MINUTES_IN_HOUR_VALUE = 60;
+export declare const HOURS_IN_DAY_VALUE = 24;

package/ui/content/Chat/constants/timeTemplatesAndUnits.js

@@ -0,0 +1,11 @@
+"use strict";
+exports.__esModule = true;
+exports.HOURS_IN_DAY_VALUE = exports.MINUTES_IN_HOUR_VALUE = exports.SECONDS_IN_MINUTE_VALUE = exports.HOUR_UNIT = exports.ISO_TIMESTAMP_TEMPLATE = exports.MINUTE_UNIT = exports.HOURS_AND_MINUTES_TEMPLATE = exports.MONTH_AND_DAY_TEMPLATE = void 0;
+exports.MONTH_AND_DAY_TEMPLATE = 'MMMM DD';
+exports.HOURS_AND_MINUTES_TEMPLATE = 'HH:mm';
+exports.MINUTE_UNIT = 'minute';
+exports.ISO_TIMESTAMP_TEMPLATE = 'YYYY-MM-DDTHH:mm:ss.SSS';
+exports.HOUR_UNIT = 'hour';
+exports.SECONDS_IN_MINUTE_VALUE = 60000;
+exports.MINUTES_IN_HOUR_VALUE = 60;
+exports.HOURS_IN_DAY_VALUE = 24;

package/ui/content/Chat/hooks/useChat.d.ts

@@ -0,0 +1,12 @@
+import { IChatMessage, IChatProps } from '../Chat';
+export type IChatConfig = Pick<IChatProps, 'chatId' | 'messages' | 'currentUser' | 'onSendMessage'>;
+export interface IGroupedMessage extends IChatMessage {
+    isFirstMessage?: boolean;
+    isLastMessage?: boolean;
+}
+export type IGroupedMessagesByDates = Record<string, IGroupedMessage[][]>;
+declare const useChat: (config: IChatConfig) => {
+    groupedMessagesByDates: {};
+    onSendMessage: (rawMessage: any) => void;
+};
+export default useChat;

package/ui/content/Chat/hooks/useChat.js

@@ -0,0 +1,41 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var react_1 = require("react");
+var dayjs_1 = __importDefault(require("dayjs"));
+var uniqueId_1 = __importDefault(require("lodash-es/uniqueId"));
+var hooks_1 = require("../../../../hooks");
+var form_1 = require("../../../../actions/form");
+var utils_1 = require("../utils");
+var timeTemplatesAndUnits_1 = require("../constants/timeTemplatesAndUnits");
+var useChat = function (config) {
+    var _a = (0, react_1.useState)({}), groupedMessagesByDates = _a[0], setGroupedMessagesByDates = _a[1];
+    (0, react_1.useEffect)(function () { return setGroupedMessagesByDates((0, utils_1.getMessagesGroupedByDate)(config.messages)); }, [config.messages]);
+    var dispatch = (0, hooks_1.useDispatch)();
+    var onSendMessage = (0, react_1.useCallback)(function (rawMessage) {
+        var newMessage = __assign(__assign({}, rawMessage), { id: (0, uniqueId_1["default"])(), user: config.currentUser, timestamp: (0, dayjs_1["default"])().format(timeTemplatesAndUnits_1.ISO_TIMESTAMP_TEMPLATE) });
+        if (config.onSendMessage) {
+            config.onSendMessage(config.chatId, newMessage);
+        }
+        setGroupedMessagesByDates(function (prevGroupedMessagesByDates) { return (0, utils_1.addNewMessageIntoGroupedMessages)(newMessage, prevGroupedMessagesByDates); });
+        dispatch((0, form_1.formReset)(config.chatId));
+    }, [config, dispatch]);
+    return {
+        groupedMessagesByDates: groupedMessagesByDates,
+        onSendMessage: onSendMessage
+    };
+};
+exports["default"] = useChat;

package/ui/content/Chat/index.d.ts

@@ -0,0 +1,2 @@
+import Chat from './Chat';
+export default Chat;

package/ui/content/Chat/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var Chat_1 = __importDefault(require("./Chat"));
+exports["default"] = Chat_1["default"];

package/ui/content/Chat/utils/addNewMessageIntoGroupedMessages.d.ts

@@ -0,0 +1,5 @@
+import { IChatMessage } from '@steroidsjs/core/ui/content/Chat/Chat';
+import { IGroupedMessage, IGroupedMessagesByDates } from '../hooks/useChat';
+export declare const addNewMessageIntoGroupedMessages: (newMessage: IChatMessage, groupedMessagesByDates: IGroupedMessagesByDates) => {
+    [x: string]: IGroupedMessage[][];
+};

package/ui/content/Chat/utils/addNewMessageIntoGroupedMessages.js

@@ -0,0 +1,61 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.addNewMessageIntoGroupedMessages = void 0;
+var dayjs_1 = __importDefault(require("dayjs"));
+var last_1 = __importDefault(require("lodash-es/last"));
+var getMessagesGroupedByDate_1 = require("../utils/getMessagesGroupedByDate");
+var timeTemplatesAndUnits_1 = require("../constants/timeTemplatesAndUnits");
+var addMessageToExistingGroup = function (newMessage, groupedMessagesByDates, dateKey) {
+    var _a;
+    var currentGroupedMessagesByDates = __spreadArray([], groupedMessagesByDates[dateKey], true);
+    // last array of messages for this date
+    var lastMessageGroup = currentGroupedMessagesByDates.pop();
+    // last message for this date
+    var lastMessageFromGroup = (0, last_1["default"])(lastMessageGroup);
+    var messagesGroupForCurrentDate = __spreadArray(__spreadArray([], groupedMessagesByDates[dateKey], true), [[newMessage]], false);
+    if ((0, getMessagesGroupedByDate_1.isWithinTimeThreshold)(lastMessageFromGroup, newMessage)) {
+        // make a new message the last in the group
+        delete lastMessageFromGroup.isLastMessage;
+        delete newMessage.isFirstMessage;
+        if (lastMessageGroup.length === 1) {
+            messagesGroupForCurrentDate = __spreadArray(__spreadArray([], currentGroupedMessagesByDates, true), [[lastMessageFromGroup, newMessage]], false);
+        }
+        else {
+            messagesGroupForCurrentDate = __spreadArray(__spreadArray([], currentGroupedMessagesByDates, true), [__spreadArray(__spreadArray([], lastMessageGroup, true), [newMessage], false)], false);
+        }
+    }
+    return __assign(__assign({}, groupedMessagesByDates), (_a = {}, _a[dateKey] = messagesGroupForCurrentDate, _a));
+};
+var addNewMessageIntoGroupedMessages = function (newMessage, groupedMessagesByDates) {
+    var _a;
+    var dateKey = (0, dayjs_1["default"])(newMessage.timestamp).format(timeTemplatesAndUnits_1.MONTH_AND_DAY_TEMPLATE);
+    var singleMessageInGroup = __assign(__assign({}, newMessage), { isFirstMessage: true, isLastMessage: true });
+    if (groupedMessagesByDates[dateKey]) {
+        return addMessageToExistingGroup(singleMessageInGroup, groupedMessagesByDates, dateKey);
+    }
+    return __assign(__assign({}, groupedMessagesByDates), (_a = {}, _a[dateKey] = [[singleMessageInGroup]], _a));
+};
+exports.addNewMessageIntoGroupedMessages = addNewMessageIntoGroupedMessages;

package/ui/content/Chat/utils/calculateMessageTimeAgo.d.ts

@@ -0,0 +1 @@
+export declare const calculateMessageTimeAgo: (timestamp: any) => string;

package/ui/content/Chat/utils/calculateMessageTimeAgo.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.calculateMessageTimeAgo = void 0;
+var dayjs_1 = __importDefault(require("dayjs"));
+var timeTemplatesAndUnits_1 = require("../constants/timeTemplatesAndUnits");
+var calculateMessageTimeAgo = function (timestamp) {
+    var now = (0, dayjs_1["default"])();
+    var messageTime = (0, dayjs_1["default"])(timestamp);
+    var diffInMinutes = now.diff(messageTime, timeTemplatesAndUnits_1.MINUTE_UNIT);
+    var diffInHours = now.diff(messageTime, timeTemplatesAndUnits_1.HOUR_UNIT);
+    var timeAgo = '';
+    if (diffInMinutes < timeTemplatesAndUnits_1.MINUTES_IN_HOUR_VALUE) {
+        timeAgo = __("".concat(diffInMinutes, " \u043C\u0438\u043D. \u043D\u0430\u0437\u0430\u0434"), { diffInMinutes: diffInMinutes });
+    }
+    else if (diffInHours < timeTemplatesAndUnits_1.HOURS_IN_DAY_VALUE) {
+        timeAgo = __("".concat(diffInHours, " \u0447. \u043D\u0430\u0437\u0430\u0434"), { diffInHours: diffInHours });
+    }
+    else {
+        timeAgo = messageTime.format(timeTemplatesAndUnits_1.HOURS_AND_MINUTES_TEMPLATE);
+    }
+    return timeAgo;
+};
+exports.calculateMessageTimeAgo = calculateMessageTimeAgo;

package/ui/content/Chat/utils/getMessagesGroupedByDate.d.ts

@@ -0,0 +1,4 @@
+import { IGroupedMessagesByDates } from '../hooks/useChat';
+import { IChatMessage } from '../Chat';
+export declare const isWithinTimeThreshold: (firstMessage: IChatMessage, secondMessage: IChatMessage) => boolean;
+export declare const getMessagesGroupedByDate: (messages: IChatMessage[]) => IGroupedMessagesByDates;

package/ui/content/Chat/utils/getMessagesGroupedByDate.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.getMessagesGroupedByDate = exports.isWithinTimeThreshold = void 0;
+var first_1 = __importDefault(require("lodash-es/first"));
+var last_1 = __importDefault(require("lodash-es/last"));
+var dayjs_1 = __importDefault(require("dayjs"));
+var timeTemplatesAndUnits_1 = require("../constants/timeTemplatesAndUnits");
+var isWithinTimeThreshold = function (firstMessage, secondMessage) {
+    var firstMessageTime = new Date(firstMessage.timestamp).getTime();
+    var secondMessageTime = new Date(secondMessage.timestamp).getTime();
+    return firstMessage.user.id === secondMessage.user.id && Math.abs(firstMessageTime - secondMessageTime) <= timeTemplatesAndUnits_1.SECONDS_IN_MINUTE_VALUE;
+};
+exports.isWithinTimeThreshold = isWithinTimeThreshold;
+var addFirstAndLastKeyForMessageGroup = function (messageGroup) {
+    (0, first_1["default"])(messageGroup).isFirstMessage = true;
+    (0, last_1["default"])(messageGroup).isLastMessage = true;
+};
+var getMessagesGroupedByDate = function (messages) {
+    var groupedMessages = {};
+    var prevDateKey = null;
+    messages.forEach(function (message) {
+        var dateKey = (0, dayjs_1["default"])(message.timestamp).format(timeTemplatesAndUnits_1.MONTH_AND_DAY_TEMPLATE);
+        if (!groupedMessages[dateKey]) {
+            groupedMessages[dateKey] = [];
+        }
+        // array of grouped messages for dateKey
+        var messagesGroupFromDate = groupedMessages[dateKey];
+        // last group of messages
+        var lastMessageGroup = (0, last_1["default"])(messagesGroupFromDate);
+        // add fields to the last group of messages for the previous date
+        if (!lastMessageGroup && prevDateKey) {
+            addFirstAndLastKeyForMessageGroup((0, last_1["default"])(groupedMessages[prevDateKey]));
+        }
+        var lastMessageFromGroup = (0, last_1["default"])(lastMessageGroup);
+        // if time difference between messages is less than a minute, and they are from the same user
+        if (lastMessageFromGroup && (0, exports.isWithinTimeThreshold)(lastMessageFromGroup, message)) {
+            lastMessageGroup.push(message);
+        }
+        else if (lastMessageGroup) {
+            // add fields to the previous group of messages for the same date
+            addFirstAndLastKeyForMessageGroup(lastMessageGroup);
+            messagesGroupFromDate.push([message]);
+        }
+        else {
+            prevDateKey = dateKey;
+            messagesGroupFromDate.push([message]);
+        }
+    });
+    // add fields to the last group of messages
+    addFirstAndLastKeyForMessageGroup((0, last_1["default"])(groupedMessages[prevDateKey]));
+    return groupedMessages;
+};
+exports.getMessagesGroupedByDate = getMessagesGroupedByDate;