@viewberapp/chat 0.1.10 → 0.1.11

package/dist/react/components/Message.d.ts

@@ -1,23 +1,23 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import MessageModel from "../../Message";
-import PendingMessage from '../../PendingMessage';
-export interface MessageProps {
-    message: MessageModel | PendingMessage;
-    isCurrentUser: boolean;
-    failedPendingMessageIconClassName?: string;
-    failedPendingMessageDescriptionStyles?: React.CSSProperties;
-    failedPendingMessageDescriptionClassName?: string;
-    onFailedPendingMessageClick?: (pendingMessage: PendingMessage) => void;
-}
-export declare const Message: {
-    ({ message, isCurrentUser, failedPendingMessageIconClassName, failedPendingMessageDescriptionStyles, failedPendingMessageDescriptionClassName, onFailedPendingMessageClick }: MessageProps): JSX.Element;
-    propTypes: {
-        message: PropTypes.Requireable<object>;
-        isCurrentUser: PropTypes.Requireable<boolean>;
-        failedPendingMessageIconClassName: PropTypes.Requireable<string>;
-        failedPendingMessageDescriptionStyles: PropTypes.Requireable<object>;
-        failedPendingMessageDescriptionClassName: PropTypes.Requireable<string>;
-        onFailedPendingMessageClick: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-};
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import MessageModel from "../../Message";
+import PendingMessage from '../../PendingMessage';
+export interface MessageProps {
+    message: MessageModel | PendingMessage;
+    isCurrentUser: boolean;
+    failedPendingMessageIconClassName?: string;
+    failedPendingMessageDescriptionStyles?: React.CSSProperties;
+    failedPendingMessageDescriptionClassName?: string;
+    onFailedPendingMessageClick?: (pendingMessage: PendingMessage) => void;
+}
+export declare const Message: {
+    ({ message, isCurrentUser, failedPendingMessageIconClassName, failedPendingMessageDescriptionStyles, failedPendingMessageDescriptionClassName, onFailedPendingMessageClick }: MessageProps): JSX.Element;
+    propTypes: {
+        message: PropTypes.Requireable<object>;
+        isCurrentUser: PropTypes.Requireable<boolean>;
+        failedPendingMessageIconClassName: PropTypes.Requireable<string>;
+        failedPendingMessageDescriptionStyles: PropTypes.Requireable<object>;
+        failedPendingMessageDescriptionClassName: PropTypes.Requireable<string>;
+        onFailedPendingMessageClick: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+};

package/dist/react/components/Message.js

@@ -1,88 +1,88 @@
-"use strict";
-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 };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Message = void 0;
-const React = __importStar(require("react"));
-const prop_types_1 = __importDefault(require("prop-types"));
-const PendingMessage_1 = require("../../PendingMessage");
-const MessageDateTime_1 = require("./MessageDateTime");
-const util_1 = require("../../util");
-const Message = ({ message, isCurrentUser, failedPendingMessageIconClassName, failedPendingMessageDescriptionStyles, failedPendingMessageDescriptionClassName, onFailedPendingMessageClick }) => {
-    const [dateTimeIsShowing, setDateTimeIsShowing] = React.useState(false);
-    const isFailedPendingMessage = ((0, PendingMessage_1.isPendingMessage)(message)
-        && message.status === 'failed');
-    const handleMessageClick = () => {
-        if (!isFailedPendingMessage) {
-            setDateTimeIsShowing(!dateTimeIsShowing);
-            return;
-        }
-        if (onFailedPendingMessageClick) {
-            onFailedPendingMessageClick(message);
-        }
-    };
-    const containerStyles = {
-        display: 'inline-block',
-        maxWidth: '300px',
-        margin: '0.125rem 0.5rem'
-    };
-    const messageStyles = {
-        display: 'inline-block',
-        borderRadius: '0.675rem',
-        backgroundColor: isCurrentUser
-            ? '#218aff'
-            : '#d8d8d8',
-        color: isCurrentUser
-            ? '#fff'
-            : undefined,
-        padding: '0.25rem 1rem',
-    };
-    return (React.createElement("div", { style: containerStyles },
-        React.createElement("div", null,
-            React.createElement("div", { style: messageStyles, onClick: handleMessageClick },
-                React.createElement("span", null, message.message)),
-            isFailedPendingMessage && !(0, util_1.isNil)(failedPendingMessageIconClassName) &&
-                React.createElement("div", { style: { display: 'inline-block' } },
-                    React.createElement("i", { className: failedPendingMessageIconClassName })),
-            isFailedPendingMessage &&
-                React.createElement("div", { className: failedPendingMessageDescriptionClassName, style: failedPendingMessageDescriptionStyles }, (0, util_1.isNil)(onFailedPendingMessageClick)
-                    ? 'This message failed to send'
-                    : 'This message failed to send. Click to retry'),
-            dateTimeIsShowing &&
-                React.createElement("div", null,
-                    React.createElement(MessageDateTime_1.MessageDateTime, { date: message.createdAt, style: { display: 'block' } })))));
-};
-exports.Message = Message;
-exports.Message.propTypes = {
-    message: prop_types_1.default.object,
-    isCurrentUser: prop_types_1.default.bool,
-    failedPendingMessageIconClassName: prop_types_1.default.string,
-    failedPendingMessageDescriptionStyles: prop_types_1.default.object,
-    failedPendingMessageDescriptionClassName: prop_types_1.default.string,
-    onFailedPendingMessageClick: prop_types_1.default.func
-};
+"use strict";
+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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Message = void 0;
+const React = __importStar(require("react"));
+const prop_types_1 = __importDefault(require("prop-types"));
+const PendingMessage_1 = require("../../PendingMessage");
+const MessageDateTime_1 = require("./MessageDateTime");
+const util_1 = require("../../util");
+const Message = ({ message, isCurrentUser, failedPendingMessageIconClassName, failedPendingMessageDescriptionStyles, failedPendingMessageDescriptionClassName, onFailedPendingMessageClick }) => {
+    const [dateTimeIsShowing, setDateTimeIsShowing] = React.useState(false);
+    const isFailedPendingMessage = ((0, PendingMessage_1.isPendingMessage)(message)
+        && message.status === 'failed');
+    const handleMessageClick = () => {
+        if (!isFailedPendingMessage) {
+            setDateTimeIsShowing(!dateTimeIsShowing);
+            return;
+        }
+        if (onFailedPendingMessageClick) {
+            onFailedPendingMessageClick(message);
+        }
+    };
+    const containerStyles = {
+        display: 'inline-block',
+        maxWidth: '300px',
+        margin: '0.125rem 0.5rem'
+    };
+    const messageStyles = {
+        display: 'inline-block',
+        borderRadius: '0.675rem',
+        backgroundColor: isCurrentUser
+            ? '#218aff'
+            : '#d8d8d8',
+        color: isCurrentUser
+            ? '#fff'
+            : undefined,
+        padding: '0.25rem 1rem',
+    };
+    return (React.createElement("div", { style: containerStyles },
+        React.createElement("div", null,
+            React.createElement("div", { style: messageStyles, onClick: handleMessageClick },
+                React.createElement("span", null, message.message)),
+            isFailedPendingMessage && !(0, util_1.isNil)(failedPendingMessageIconClassName) &&
+                React.createElement("div", { style: { display: 'inline-block' } },
+                    React.createElement("i", { className: failedPendingMessageIconClassName })),
+            isFailedPendingMessage &&
+                React.createElement("div", { className: failedPendingMessageDescriptionClassName, style: failedPendingMessageDescriptionStyles }, (0, util_1.isNil)(onFailedPendingMessageClick)
+                    ? 'This message failed to send'
+                    : 'This message failed to send. Click to retry'),
+            dateTimeIsShowing &&
+                React.createElement("div", null,
+                    React.createElement(MessageDateTime_1.MessageDateTime, { date: message.createdAt, style: { display: 'block' } })))));
+};
+exports.Message = Message;
+exports.Message.propTypes = {
+    message: prop_types_1.default.object,
+    isCurrentUser: prop_types_1.default.bool,
+    failedPendingMessageIconClassName: prop_types_1.default.string,
+    failedPendingMessageDescriptionStyles: prop_types_1.default.object,
+    failedPendingMessageDescriptionClassName: prop_types_1.default.string,
+    onFailedPendingMessageClick: prop_types_1.default.func
+};
 //# sourceMappingURL=Message.js.map

package/dist/react/components/MessageDateTime.d.ts

@@ -1,8 +1,8 @@
-import * as React from 'react';
-interface MessageDateTimeProps {
-    date?: Date | null;
-    style?: React.CSSProperties;
-    className?: string;
-}
-export declare const MessageDateTime: ({ date, style, className }: MessageDateTimeProps) => JSX.Element;
-export {};
+import * as React from 'react';
+interface MessageDateTimeProps {
+    date?: Date | null;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export declare const MessageDateTime: ({ date, style, className }: MessageDateTimeProps) => JSX.Element;
+export {};

package/dist/react/components/MessageDateTime.js

@@ -1,32 +1,32 @@
-"use strict";
-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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MessageDateTime = void 0;
-const React = __importStar(require("react"));
-const MessageDateTime = ({ date, style, className }) => {
-    return (React.createElement("small", { style: style, className: className }, date === null || date === void 0 ? void 0 : date.toLocaleString()));
-};
-exports.MessageDateTime = MessageDateTime;
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageDateTime = void 0;
+const React = __importStar(require("react"));
+const MessageDateTime = ({ date, style, className }) => {
+    return (React.createElement("small", { style: style, className: className }, date === null || date === void 0 ? void 0 : date.toLocaleString()));
+};
+exports.MessageDateTime = MessageDateTime;
 //# sourceMappingURL=MessageDateTime.js.map

package/dist/react/components/MessageList.d.ts

@@ -1,46 +1,46 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import ChatError from '../../ChatError';
-import MessageModel from '../../Message';
-import { GetLatestMessagesStatus, Messages } from '../../CachedChat';
-import PendingMessage from '../../PendingMessage';
-export interface MessageListProps {
-    messages: Messages;
-    currentUserId: number;
-    messagesScrollContainerId: string;
-    messagesContainerClassName?: string;
-    failedPendingMessageIconClassName?: string;
-    failedPendingMessageDescriptionStyles?: React.CSSProperties;
-    failedPendingMessageDescriptionClassName?: string;
-    onFailedPendingMessageClick?: (pendingMessage: PendingMessage) => void;
-    getLatestMessagesStatus: GetLatestMessagesStatus;
-    markMessagesReadUpTo(message: MessageModel): Promise<{
-        error: ChatError | undefined;
-    }>;
-    shouldMarkMessagesAsRead: boolean;
-    loadingContent: React.ReactNode;
-    retryContent: React.ReactNode;
-    noMessagesContent: React.ReactNode;
-    onMessagesMarkedAsRead?: () => void;
-    onRequestScrollToBottomOfMessagesScrollContainer: () => void;
-}
-export declare const MessageList: {
-    ({ messages, currentUserId, messagesScrollContainerId, messagesContainerClassName, failedPendingMessageIconClassName, failedPendingMessageDescriptionStyles, failedPendingMessageDescriptionClassName, onFailedPendingMessageClick, getLatestMessagesStatus, markMessagesReadUpTo, shouldMarkMessagesAsRead, loadingContent, retryContent, noMessagesContent, onMessagesMarkedAsRead, onRequestScrollToBottomOfMessagesScrollContainer }: MessageListProps): React.ReactNode;
-    propTypes: {
-        messages: PropTypes.Validator<(object | null | undefined)[]>;
-        currentUserId: PropTypes.Validator<number>;
-        messagesScrollContainerId: PropTypes.Validator<string>;
-        messagesContainerClassName: PropTypes.Requireable<string>;
-        failedPendingMessageIconClassName: PropTypes.Requireable<string>;
-        failedPendingMessageDescriptionStyles: PropTypes.Requireable<object>;
-        failedPendingMessageDescriptionClassName: PropTypes.Requireable<string>;
-        onFailedPendingMessageClick: PropTypes.Requireable<(...args: any[]) => any>;
-        getLatestMessagesStatus: PropTypes.Requireable<string>;
-        markMessagesReadUpTo: PropTypes.Validator<(...args: any[]) => any>;
-        shouldMarkMessagesAsRead: PropTypes.Validator<boolean>;
-        loadingContent: PropTypes.Validator<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        retryContent: PropTypes.Validator<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        noMessagesContent: PropTypes.Validator<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
-        onRequestScrollToBottomOfMessagesScrollContainer: PropTypes.Validator<(...args: any[]) => any>;
-    };
-};
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import ChatError from '../../ChatError';
+import MessageModel from '../../Message';
+import { GetLatestMessagesStatus, Messages } from '../../CachedChat';
+import PendingMessage from '../../PendingMessage';
+export interface MessageListProps {
+    messages: Messages;
+    currentUserId: number;
+    messagesScrollContainerId: string;
+    messagesContainerClassName?: string;
+    failedPendingMessageIconClassName?: string;
+    failedPendingMessageDescriptionStyles?: React.CSSProperties;
+    failedPendingMessageDescriptionClassName?: string;
+    onFailedPendingMessageClick?: (pendingMessage: PendingMessage) => void;
+    getLatestMessagesStatus: GetLatestMessagesStatus;
+    markMessagesReadUpTo(message: MessageModel): Promise<{
+        error: ChatError | undefined;
+    }>;
+    shouldMarkMessagesAsRead: boolean;
+    loadingContent: React.ReactNode;
+    retryContent: React.ReactNode;
+    noMessagesContent: React.ReactNode;
+    onMessagesMarkedAsRead?: () => void;
+    onRequestScrollToBottomOfMessagesScrollContainer: () => void;
+}
+export declare const MessageList: {
+    ({ messages, currentUserId, messagesScrollContainerId, messagesContainerClassName, failedPendingMessageIconClassName, failedPendingMessageDescriptionStyles, failedPendingMessageDescriptionClassName, onFailedPendingMessageClick, getLatestMessagesStatus, markMessagesReadUpTo, shouldMarkMessagesAsRead, loadingContent, retryContent, noMessagesContent, onMessagesMarkedAsRead, onRequestScrollToBottomOfMessagesScrollContainer }: MessageListProps): React.ReactNode;
+    propTypes: {
+        messages: PropTypes.Validator<(object | null | undefined)[]>;
+        currentUserId: PropTypes.Validator<number>;
+        messagesScrollContainerId: PropTypes.Validator<string>;
+        messagesContainerClassName: PropTypes.Requireable<string>;
+        failedPendingMessageIconClassName: PropTypes.Requireable<string>;
+        failedPendingMessageDescriptionStyles: PropTypes.Requireable<object>;
+        failedPendingMessageDescriptionClassName: PropTypes.Requireable<string>;
+        onFailedPendingMessageClick: PropTypes.Requireable<(...args: any[]) => any>;
+        getLatestMessagesStatus: PropTypes.Requireable<string>;
+        markMessagesReadUpTo: PropTypes.Validator<(...args: any[]) => any>;
+        shouldMarkMessagesAsRead: PropTypes.Validator<boolean>;
+        loadingContent: PropTypes.Validator<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        retryContent: PropTypes.Validator<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        noMessagesContent: PropTypes.Validator<string | number | boolean | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        onRequestScrollToBottomOfMessagesScrollContainer: PropTypes.Validator<(...args: any[]) => any>;
+    };
+};

package/dist/react/components/MessageList.js

@@ -1,108 +1,108 @@
-"use strict";
-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 };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MessageList = void 0;
-const React = __importStar(require("react"));
-const prop_types_1 = __importDefault(require("prop-types"));
-const MessageRow_1 = require("./MessageRow");
-const AdminMessage_1 = require("./AdminMessage");
-const Message_1 = require("./Message");
-const PendingMessage_1 = require("../../PendingMessage");
-const util_1 = require("../../util");
-const MessageList = ({ messages, currentUserId, messagesScrollContainerId, messagesContainerClassName, failedPendingMessageIconClassName, failedPendingMessageDescriptionStyles, failedPendingMessageDescriptionClassName, onFailedPendingMessageClick, getLatestMessagesStatus, markMessagesReadUpTo, shouldMarkMessagesAsRead, loadingContent, retryContent, noMessagesContent, onMessagesMarkedAsRead, onRequestScrollToBottomOfMessagesScrollContainer }) => {
-    const [lastMessageMarkedAsReadUpTo, setLastMessageMarkedAsReadUpTo] = React.useState();
-    React.useEffect(() => {
-        if (getLatestMessagesStatus === 'success') {
-            onRequestScrollToBottomOfMessagesScrollContainer();
-        }
-    }, [messages, getLatestMessagesStatus]);
-    React.useEffect(() => {
-        if (!messages.length || !shouldMarkMessagesAsRead) {
-            return;
-        }
-        let latestMessage = (0, util_1.getLatestMessage)(messages);
-        if ((0, util_1.isNil)(latestMessage)) {
-            return;
-        }
-        if (((0, util_1.isNil)(lastMessageMarkedAsReadUpTo) || lastMessageMarkedAsReadUpTo < latestMessage.id)) {
-            markMessagesReadUpTo(latestMessage).then(result => {
-                if (!result.error) {
-                    setLastMessageMarkedAsReadUpTo(latestMessage === null || latestMessage === void 0 ? void 0 : latestMessage.id);
-                    if (onMessagesMarkedAsRead) {
-                        onMessagesMarkedAsRead();
-                    }
-                }
-            }).catch(() => {
-            });
-        }
-    }, [messages, shouldMarkMessagesAsRead]);
-    if (getLatestMessagesStatus === 'failed') {
-        return retryContent;
-    }
-    else if (!getLatestMessagesStatus
-        || getLatestMessagesStatus === 'initialized'
-        || getLatestMessagesStatus === 'fetching'
-        || getLatestMessagesStatus !== 'success') {
-        return loadingContent;
-    }
-    return (React.createElement("div", { id: messagesScrollContainerId, className: messagesContainerClassName, style: { maxHeight: '500px', overflowY: 'auto' } }, messages.length === 0
-        ? noMessagesContent
-        : messages.map(message => {
-            if ((0, PendingMessage_1.isPendingMessage)(message) || (!(0, PendingMessage_1.isPendingMessage)(message) && message.senderId === currentUserId)) {
-                return (React.createElement(MessageRow_1.MessageRow, { key: message.id, isCurrentUser: true },
-                    React.createElement(Message_1.Message, { message: message, isCurrentUser: true, failedPendingMessageIconClassName: failedPendingMessageIconClassName, failedPendingMessageDescriptionStyles: failedPendingMessageDescriptionStyles, failedPendingMessageDescriptionClassName: failedPendingMessageDescriptionClassName, onFailedPendingMessageClick: onFailedPendingMessageClick })));
-            }
-            else if (message.isAdminMessage) {
-                return (React.createElement(MessageRow_1.MessageRow, { key: message.id, isCurrentUser: false },
-                    React.createElement(AdminMessage_1.AdminMessage, { message: message })));
-            }
-            else {
-                return (React.createElement(MessageRow_1.MessageRow, { key: message.id, isCurrentUser: false },
-                    React.createElement(Message_1.Message, { message: message, isCurrentUser: false })));
-            }
-        })));
-};
-exports.MessageList = MessageList;
-exports.MessageList.propTypes = {
-    messages: prop_types_1.default.arrayOf(prop_types_1.default.object).isRequired,
-    currentUserId: prop_types_1.default.number.isRequired,
-    messagesScrollContainerId: prop_types_1.default.string.isRequired,
-    messagesContainerClassName: prop_types_1.default.string,
-    failedPendingMessageIconClassName: prop_types_1.default.string,
-    failedPendingMessageDescriptionStyles: prop_types_1.default.object,
-    failedPendingMessageDescriptionClassName: prop_types_1.default.string,
-    onFailedPendingMessageClick: prop_types_1.default.func,
-    getLatestMessagesStatus: prop_types_1.default.oneOf(['initialized', 'fetching', 'success', 'failed']),
-    markMessagesReadUpTo: prop_types_1.default.func.isRequired,
-    shouldMarkMessagesAsRead: prop_types_1.default.bool.isRequired,
-    loadingContent: prop_types_1.default.node.isRequired,
-    retryContent: prop_types_1.default.node.isRequired,
-    noMessagesContent: prop_types_1.default.node.isRequired,
-    onRequestScrollToBottomOfMessagesScrollContainer: prop_types_1.default.func.isRequired
-};
+"use strict";
+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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageList = void 0;
+const React = __importStar(require("react"));
+const prop_types_1 = __importDefault(require("prop-types"));
+const MessageRow_1 = require("./MessageRow");
+const AdminMessage_1 = require("./AdminMessage");
+const Message_1 = require("./Message");
+const PendingMessage_1 = require("../../PendingMessage");
+const util_1 = require("../../util");
+const MessageList = ({ messages, currentUserId, messagesScrollContainerId, messagesContainerClassName, failedPendingMessageIconClassName, failedPendingMessageDescriptionStyles, failedPendingMessageDescriptionClassName, onFailedPendingMessageClick, getLatestMessagesStatus, markMessagesReadUpTo, shouldMarkMessagesAsRead, loadingContent, retryContent, noMessagesContent, onMessagesMarkedAsRead, onRequestScrollToBottomOfMessagesScrollContainer }) => {
+    const [lastMessageMarkedAsReadUpTo, setLastMessageMarkedAsReadUpTo] = React.useState();
+    React.useEffect(() => {
+        if (getLatestMessagesStatus === 'success') {
+            onRequestScrollToBottomOfMessagesScrollContainer();
+        }
+    }, [messages, getLatestMessagesStatus]);
+    React.useEffect(() => {
+        if (!messages.length || !shouldMarkMessagesAsRead) {
+            return;
+        }
+        let latestMessage = (0, util_1.getLatestMessage)(messages);
+        if ((0, util_1.isNil)(latestMessage)) {
+            return;
+        }
+        if (((0, util_1.isNil)(lastMessageMarkedAsReadUpTo) || lastMessageMarkedAsReadUpTo < latestMessage.id)) {
+            markMessagesReadUpTo(latestMessage).then(result => {
+                if (!result.error) {
+                    setLastMessageMarkedAsReadUpTo(latestMessage === null || latestMessage === void 0 ? void 0 : latestMessage.id);
+                    if (onMessagesMarkedAsRead) {
+                        onMessagesMarkedAsRead();
+                    }
+                }
+            }).catch(() => {
+            });
+        }
+    }, [messages, shouldMarkMessagesAsRead]);
+    if (getLatestMessagesStatus === 'failed') {
+        return retryContent;
+    }
+    else if (!getLatestMessagesStatus
+        || getLatestMessagesStatus === 'initialized'
+        || getLatestMessagesStatus === 'fetching'
+        || getLatestMessagesStatus !== 'success') {
+        return loadingContent;
+    }
+    return (React.createElement("div", { id: messagesScrollContainerId, className: messagesContainerClassName, style: { maxHeight: '500px', overflowY: 'auto' } }, messages.length === 0
+        ? noMessagesContent
+        : messages.map(message => {
+            if ((0, PendingMessage_1.isPendingMessage)(message) || (!(0, PendingMessage_1.isPendingMessage)(message) && message.senderId === currentUserId)) {
+                return (React.createElement(MessageRow_1.MessageRow, { key: message.id, isCurrentUser: true },
+                    React.createElement(Message_1.Message, { message: message, isCurrentUser: true, failedPendingMessageIconClassName: failedPendingMessageIconClassName, failedPendingMessageDescriptionStyles: failedPendingMessageDescriptionStyles, failedPendingMessageDescriptionClassName: failedPendingMessageDescriptionClassName, onFailedPendingMessageClick: onFailedPendingMessageClick })));
+            }
+            else if (message.isAdminMessage) {
+                return (React.createElement(MessageRow_1.MessageRow, { key: message.id, isCurrentUser: false },
+                    React.createElement(AdminMessage_1.AdminMessage, { message: message })));
+            }
+            else {
+                return (React.createElement(MessageRow_1.MessageRow, { key: message.id, isCurrentUser: false },
+                    React.createElement(Message_1.Message, { message: message, isCurrentUser: false })));
+            }
+        })));
+};
+exports.MessageList = MessageList;
+exports.MessageList.propTypes = {
+    messages: prop_types_1.default.arrayOf(prop_types_1.default.object).isRequired,
+    currentUserId: prop_types_1.default.number.isRequired,
+    messagesScrollContainerId: prop_types_1.default.string.isRequired,
+    messagesContainerClassName: prop_types_1.default.string,
+    failedPendingMessageIconClassName: prop_types_1.default.string,
+    failedPendingMessageDescriptionStyles: prop_types_1.default.object,
+    failedPendingMessageDescriptionClassName: prop_types_1.default.string,
+    onFailedPendingMessageClick: prop_types_1.default.func,
+    getLatestMessagesStatus: prop_types_1.default.oneOf(['initialized', 'fetching', 'success', 'failed']),
+    markMessagesReadUpTo: prop_types_1.default.func.isRequired,
+    shouldMarkMessagesAsRead: prop_types_1.default.bool.isRequired,
+    loadingContent: prop_types_1.default.node.isRequired,
+    retryContent: prop_types_1.default.node.isRequired,
+    noMessagesContent: prop_types_1.default.node.isRequired,
+    onRequestScrollToBottomOfMessagesScrollContainer: prop_types_1.default.func.isRequired
+};
 //# sourceMappingURL=MessageList.js.map

package/dist/react/components/MessageRow.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-export interface MessageRowProps {
-    isCurrentUser: boolean;
-}
-export declare const MessageRow: ({ isCurrentUser, children }: React.PropsWithChildren<MessageRowProps>) => JSX.Element;
+import * as React from 'react';
+export interface MessageRowProps {
+    isCurrentUser: boolean;
+}
+export declare const MessageRow: ({ isCurrentUser, children }: React.PropsWithChildren<MessageRowProps>) => JSX.Element;