@steroidsjs/core 3.0.0-beta.99 → 3.0.0

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

@@ -1,14 +1,27 @@
 "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;
-exports.sortEventsInGroup = exports.getOmittedEvent = exports.isDateIsToday = exports.getWeekDaysFromDate = void 0;
+exports.getFormattedWeekFromDate = exports.getSourceCalendarControl = 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 calendar_1 = require("../../../../utils/calendar");
 var SIX_DAYS_DIFF = 6;
 var MAX_DAYS_DIFF_IN_WEEK = 7;
+var WEEK_DAY_FORMAT = 'dd, D MMM';
 var getWeekDaysFromDate = function (date) {
     var weekDays = [];
     var firstDayOfWeek = new Date(date);
@@ -32,3 +45,16 @@ var getOmittedEvent = function (event) { return (0, omit_1["default"])(event, ['
 exports.getOmittedEvent = getOmittedEvent;
 var sortEventsInGroup = function (group) { return group.events.sort(function (eventA, eventB) { return eventA.date.getTime() - eventB.date.getTime(); }); };
 exports.sortEventsInGroup = sortEventsInGroup;
+var getSourceCalendarControl = function (control) { return document.querySelector("[data-sourcecontrol=\"".concat(control, "\"]")); };
+exports.getSourceCalendarControl = getSourceCalendarControl;
+var getFormattedWeekFromDate = function (fromDate) {
+    if (fromDate === void 0) { fromDate = null; }
+    var currentWeek = (0, exports.getWeekDaysFromDate)(fromDate || new Date());
+    return currentWeek.map(function (dayOfWeek) {
+        var copyOfDayWeek = __assign({}, dayOfWeek);
+        copyOfDayWeek.formattedDisplay = (0, calendar_1.convertDate)(dayOfWeek.date, null, WEEK_DAY_FORMAT);
+        copyOfDayWeek.isToday = (0, exports.isDateIsToday)(copyOfDayWeek.date);
+        return copyOfDayWeek;
+    });
+};
+exports.getFormattedWeekFromDate = getFormattedWeekFromDate;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { ILinkProps } from '../../nav/Link/Link';
 import { IButtonProps } from '../../form/Button/Button';
 import { IAvatarProps } from '../Avatar/Avatar';
@@ -38,6 +38,10 @@ export interface ICardHeader {
  * футер, коллекцию ссылок и коллекцию кнопок.
  */
 export interface ICardProps extends IUiComponent {
+    /**
+     * Коллекция кнопок
+     */
+    buttons?: IButtonProps[];
     /**
      * Дочерние элементы
      */
@@ -52,46 +56,48 @@ export interface ICardProps extends IUiComponent {
      * @example 'Scroll to see more...'
      */
     description?: string;
+    /**
+     * Контент футера
+     */
+    footer?: {
+        head: string;
+        subhead: string;
+    };
     /**
      * Контент хедера
      * @example
      * avatar: {
-     * src: 'Kate.png',
-     * status: true,
+     *  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},
-            {label: 'Показать историю изменений', hasBorder: true, onClick: voidFunction},
-            {label: 'Редактировать', icon: 'edit', onClick: voidFunction},
-            {label: 'Удалить', icon: 'trash', onClick: voidFunction},
-        ],
-        icon: 'menu_dots',
+     *   position: 'bottom',
+     *   closeMode: 'click-any',
+     *  },
+     *  items: [
+     *   {
+     *    label: 'Вырезать',
+     *    icon: 'cut',
+     *    onClick: voidFunction
+     *   },
+     *   {
+     *    label: 'Копировать',
+     *    icon: 'copy',
+     *    hasBorder: true
+     *    onClick: voidFunction
+     *   },
+     *  ],
+     *  icon: 'menu_dots',
      * },
      */
     header?: ICardHeader;
     /**
-     * Контент футера
+     * Коллекция ссылок
      */
-    footer?: {
-        head: string;
-        subhead: string;
-    };
-    /**
-    * Коллекция ссылок
-    */
     links?: ILinkProps[];
-    /**
-     * Коллекция кнопок
-     */
-    buttons?: IButtonProps[];
     /**
      * Заголовок карточки
      * @example 'Main card'
@@ -99,5 +105,5 @@ export interface ICardProps extends IUiComponent {
     title?: string;
 }
 export type ICardViewProps = ICardProps;
-declare function Card(props: ICardProps): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare function Card(props: ICardProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export default Card;

package/ui/content/Card/Card.js

@@ -1,19 +1,8 @@
 "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 Card(props) {
     var components = (0, hooks_1.useComponents)();
-    return components.ui.renderView(props.view || 'content.CardView', __assign({}, props));
+    return components.ui.renderView(props.view || 'content.CardView', props);
 }
 exports["default"] = Card;

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

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

package/ui/content/Chart/Chart.js

@@ -1,19 +1,23 @@
 "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 react_1 = require("react");
 var hooks_1 = require("../../../hooks");
 function Chart(props) {
     var components = (0, hooks_1.useComponents)();
-    return components.ui.renderView(props.view || 'content.ChartView', __assign({}, props));
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        chartComponent: props.chartComponent,
+        data: props.data,
+        config: props.config,
+        wrapperHeight: props.wrapperHeight,
+        chartHeight: props.chartHeight,
+        checkboxes: props.checkboxes,
+        buttonGroup: props.buttonGroup,
+        title: props.title,
+        useDefaultLineChartConfig: props.useDefaultLineChartConfig,
+        className: props.className,
+        style: props.style
+    }); }, [props.chartComponent, props.data, props.config, props.wrapperHeight, props.chartHeight,
+        props.checkboxes, props.buttonGroup, props.title, props.useDefaultLineChartConfig, props.className, props.style]);
+    return components.ui.renderView(props.view || 'content.ChartView', viewProps);
 }
 exports["default"] = Chart;

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

@@ -1,24 +1,109 @@
 import React from 'react';
+import { IFileFieldProps } from '../../form/FileField/FileField';
 import { IAvatarProps } from '../Avatar/Avatar';
-import { IChatConfig, IGroupedMessagesByDates } from './hooks/useChat';
+import { IGroupedMessagesByDates } from './hooks/useChat';
 export interface IChatUser {
     id: number;
     firstName?: string;
     lastName?: string;
     avatar?: IAvatarProps;
 }
+export interface IMessageFile {
+    uid?: string;
+    title?: string;
+    size?: number;
+    url?: string;
+    downloadUrl?: string;
+    fullHeight?: number;
+    fullWidth?: number;
+}
 export interface IChatMessage {
     id: number;
     user: IChatUser;
     text: string;
-    timestamp: Date;
+    timestamp: Date | string;
+    files?: IMessageFile[];
 }
-interface IChatProps extends IChatConfig, IUiComponent {
+/**
+ * Chat
+ *
+ * Комплексный компонент `Chat` предназначен для коммуникации пользователей с помощью текстовых сообщений.
+ */
+export interface IChatProps extends IUiComponent {
+    /**
+     * Идентификатор чата
+     * @example TaskChat
+     */
     chatId: string;
+    /**
+     * Коллекция сообщений
+     * @example
+     * [
+     *  {
+     *   id: 1,
+     *   text: 'Всем привет!',
+     *   files: [
+     *      {
+     *       id: 929,
+     *       uid: 'c46f3d14-5891-4601-9e98-06f2c1e70a07',
+     *       title: 'image.jpg',
+     *       url: 'https://kozhin.dev/files/uploaded/c46f3d14-5891-4601-9e98-06f2c1e70a07.jpg',
+     *       size: 47305,
+     *      }
+     *   ],
+     *   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;
+    /**
+     * Переопределение view React компонента для кастомизации отображения элемента инпута
+     * @example MyCustomView
+     */
+    customChatInputView?: React.ReactNode;
+    /**
+     * Кастомный placeholder для инпута
+     */
+    customInputPlaceholder?: string;
+    /**
+     * Пропсы для инпута загрузки файлов
+     */
+    fileFieldProps?: IFileFieldProps;
 }
-export interface IChatViewProps extends Omit<IChatProps, 'messages'> {
+export interface IChatViewProps extends Pick<IChatProps, 'currentUser'> {
     groupedMessagesByDates: IGroupedMessagesByDates;
+    renderChatInput: () => JSX.Element;
+}
+export interface IChatInputViewProps extends Pick<IChatProps, 'chatId' | 'fileFieldProps'> {
+    onSendMessage: (data: any) => void;
+    onUploadFiles: (files: any) => void;
+    inputPlaceholder: string;
 }
 export default function Chat(props: IChatProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-export {};

package/ui/content/Chat/Chat.js

@@ -1,26 +1,52 @@
 "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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
+var react_1 = __importStar(require("react"));
 var hooks_1 = require("../../../hooks");
 var useChat_1 = __importDefault(require("./hooks/useChat"));
 function Chat(props) {
     var components = (0, hooks_1.useComponents)();
-    var groupedMessagesByDates = (0, useChat_1["default"])({
-        messages: props.messages
-    }).groupedMessagesByDates;
-    return components.ui.renderView(props.view || 'content.ChatView', __assign(__assign({}, props), { groupedMessagesByDates: groupedMessagesByDates }));
+    var _a = (0, useChat_1["default"])({
+        chatId: props.chatId,
+        messages: props.messages,
+        currentUser: props.currentUser,
+        onSendMessage: props.onSendMessage
+    }), onSendMessage = _a.onSendMessage, onUploadFiles = _a.onUploadFiles, groupedMessagesByDates = _a.groupedMessagesByDates;
+    var ChatInputView = props.customChatInputView || components.ui.getView('content.ChatInputView');
+    var renderChatInput = (0, react_1.useCallback)(function () { return (react_1["default"].createElement(ChatInputView, { chatId: props.chatId, onSendMessage: onSendMessage, onUploadFiles: onUploadFiles, fileFieldProps: props.fileFieldProps, inputPlaceholder: props.customInputPlaceholder || __('Введите сообщение') })); }, [ChatInputView, onSendMessage, onUploadFiles, props.chatId, props.customInputPlaceholder, props.fileFieldProps]);
+    var viewProps = (0, react_1.useMemo)(function () { return ({
+        currentUser: props.currentUser,
+        groupedMessagesByDates: groupedMessagesByDates,
+        onSendMessage: onSendMessage,
+        renderChatInput: renderChatInput,
+        className: props.className,
+        style: props.style
+    }); }, [groupedMessagesByDates, onSendMessage, props.className, props.currentUser, props.style, renderChatInput]);
+    return components.ui.renderView(props.view || 'content.ChatView', viewProps);
 }
 exports["default"] = Chat;

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

@@ -1,6 +1,7 @@
 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;

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

@@ -1,9 +1,10 @@
 "use strict";
 exports.__esModule = true;
-exports.HOURS_IN_DAY_VALUE = exports.MINUTES_IN_HOUR_VALUE = exports.SECONDS_IN_MINUTE_VALUE = exports.HOUR_UNIT = exports.MINUTE_UNIT = exports.HOURS_AND_MINUTES_TEMPLATE = exports.MONTH_AND_DAY_TEMPLATE = void 0;
+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;

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

@@ -1,13 +1,12 @@
-import { IChatMessage } from '../Chat';
-export interface IChatConfig {
-    messages: IChatMessage[];
-}
+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) => {
+export default function useChat(config: IChatConfig): {
     groupedMessagesByDates: {};
+    onSendMessage: (rawMessage: any) => void;
+    onUploadFiles: (files: any) => void;
 };
-export default useChat;

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

@@ -1,12 +1,58 @@
 "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 isEqual_1 = __importDefault(require("lodash-es/isEqual"));
+var File_1 = __importDefault(require("fileup-core/lib/models/File"));
+var hooks_1 = require("../../../../hooks");
+var form_1 = require("../../../../actions/form");
 var utils_1 = require("../utils");
-var useChat = function (config) {
+var timeTemplatesAndUnits_1 = require("../constants/timeTemplatesAndUnits");
+function useChat(config) {
+    var dispatch = (0, hooks_1.useDispatch)();
     var _a = (0, react_1.useState)({}), groupedMessagesByDates = _a[0], setGroupedMessagesByDates = _a[1];
+    var _b = (0, react_1.useState)([]), uploadedFiles = _b[0], setUploadedFiles = _b[1];
     (0, react_1.useEffect)(function () { return setGroupedMessagesByDates((0, utils_1.getMessagesGroupedByDate)(config.messages)); }, [config.messages]);
+    var onUploadFiles = (0, react_1.useCallback)(function (files) {
+        if (!(0, isEqual_1["default"])(uploadedFiles, files)) {
+            setUploadedFiles(files);
+        }
+    }, [uploadedFiles]);
+    var onSendMessage = (0, react_1.useCallback)(function (rawMessage) {
+        if (!rawMessage) {
+            return;
+        }
+        var newMessage = __assign(__assign({}, rawMessage), { id: (0, uniqueId_1["default"])(), user: config.currentUser, timestamp: (0, dayjs_1["default"])().format(timeTemplatesAndUnits_1.ISO_TIMESTAMP_TEMPLATE), files: (uploadedFiles === null || uploadedFiles === void 0 ? void 0 : uploadedFiles.reduce(function (acc, file) {
+                if (file.getResult() !== File_1["default"].RESULT_ERROR) {
+                    acc.push(__assign({}, file._resultHttpMessage));
+                }
+                return acc;
+            }, [])) || null });
+        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, uploadedFiles]);
     return {
-        groupedMessagesByDates: groupedMessagesByDates
+        groupedMessagesByDates: groupedMessagesByDates,
+        onSendMessage: onSendMessage,
+        onUploadFiles: onUploadFiles
     };
-};
+}
 exports["default"] = useChat;

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/getMessagesGroupedByDate.d.ts

@@ -1,3 +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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-exports.getMessagesGroupedByDate = void 0;
+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"));
@@ -13,6 +13,7 @@ var isWithinTimeThreshold = function (firstMessage, secondMessage) {
     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;
@@ -35,7 +36,7 @@ var getMessagesGroupedByDate = function (messages) {
         }
         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 && isWithinTimeThreshold(lastMessageFromGroup, message)) {
+        if (lastMessageFromGroup && (0, exports.isWithinTimeThreshold)(lastMessageFromGroup, message)) {
             lastMessageGroup.push(message);
         }
         else if (lastMessageGroup) {