@viewberapp/chat 0.0.79 → 0.0.81

package/dist/API.d.ts

@@ -9,7 +9,7 @@ export interface ConstructApiParams {
     getChatAblyTokenRoute: () => string;
     getChatStoreMessageRoute: (chatId: number) => string;
     getChatForAppointmentRoute: (appointmentId: number) => string;
-    chatMessagesMarkReadUpToRoute: (chatId: number, messageId: number) => string;
+    markChatMessagesReadUpToRoute: (chatId: number, messageId: number) => string;
 }
 export declare type GetAblyTokenReturnValue = {
     token: Record<any, any>;
@@ -46,13 +46,13 @@ export default class API {
     private getChatAblyTokenRoute;
     private getChatStoreMessageRoute;
     private getChatForAppointmentRoute;
-    private chatMessagesMarkReadUpToRoute;
+    private markChatMessagesReadUpToRoute;
     constructor(params: ConstructApiParams);
     getAblyToken: (chats: number[]) => Promise<GetAblyTokenReturnValue>;
     storeMessage: (chatId: number, message: string, options?: SendMessageOptions) => Promise<StoreMessageReturnValue>;
     getLatestMessages: (chatId: number) => Promise<GetLatestMessagesReturnValue>;
     getChatIdFromAppointmentId: (appointmentId: number) => Promise<GetChatIdFromAppointmentIdReturnValue>;
-    chatMessagesMarkReadUpTo: (chatId: number, message: Message) => Promise<{
+    markChatMessagesReadUpTo: (chatId: number, message: Message) => Promise<{
         error: ChatError | undefined;
     }>;
     private constructHeaders;

package/dist/API.js

@@ -91,8 +91,8 @@ class API {
                 resolve({ error: { code: 'error' } });
             });
         });
-        this.chatMessagesMarkReadUpTo = (chatId, message) => new Promise((resolve, reject) => {
-            this.axios.post(this.chatMessagesMarkReadUpToRoute(chatId, message.id), undefined, {
+        this.markChatMessagesReadUpTo = (chatId, message) => new Promise((resolve, reject) => {
+            this.axios.post(this.markChatMessagesReadUpToRoute(chatId, message.id), undefined, {
                 headers: this.constructHeaders(),
             }).then(response => {
                 resolve({ error: undefined });
@@ -116,7 +116,7 @@ class API {
         this.getChatAblyTokenRoute = params.getChatAblyTokenRoute;
         this.getChatStoreMessageRoute = params.getChatStoreMessageRoute;
         this.getChatForAppointmentRoute = params.getChatForAppointmentRoute;
-        this.chatMessagesMarkReadUpToRoute = params.chatMessagesMarkReadUpToRoute;
+        this.markChatMessagesReadUpToRoute = params.markChatMessagesReadUpToRoute;
     }
 }
 exports.default = API;

package/dist/CachedChat.js

@@ -95,7 +95,7 @@ class CachedChat {
         });
     }
     markMessagesReadUpTo(message) {
-        return this.api.chatMessagesMarkReadUpTo(this.id, message);
+        return this.api.markChatMessagesReadUpTo(this.id, message);
     }
     addMessage(message) {
         if (message instanceof PendingMessage_1.default) {

package/dist/Chat.d.ts

@@ -11,7 +11,7 @@ export interface ChatOptions {
     getChatAblyTokenRoute: ConstructApiParams['getChatAblyTokenRoute'];
     getChatStoreMessageRoute: ConstructApiParams['getChatStoreMessageRoute'];
     getChatForAppointmentRoute: ConstructApiParams['getChatForAppointmentRoute'];
-    chatMessagesMarkReadUpToRoute: ConstructApiParams['chatMessagesMarkReadUpToRoute'];
+    markChatMessagesReadUpToRoute: ConstructApiParams['markChatMessagesReadUpToRoute'];
 }
 export declare type ConnectionStatus = 'initialized' | 'connecting' | 'connected' | 'disconnected' | 'suspended' | 'closing' | 'closed' | 'failed';
 declare const Chat: {

package/dist/Chat.js

@@ -49,7 +49,7 @@ const Chat = (function () {
     let getChatAblyTokenRoute;
     let getChatStoreMessageRoute;
     let getChatForAppointmentRoute;
-    let chatMessagesMarkReadUpToRoute;
+    let markChatMessagesReadUpToRoute;
     let api;
     let logger;
     let ably;
@@ -67,7 +67,7 @@ const Chat = (function () {
         getChatAblyTokenRoute = options.getChatAblyTokenRoute;
         getChatStoreMessageRoute = options.getChatStoreMessageRoute;
         getChatForAppointmentRoute = options.getChatForAppointmentRoute;
-        chatMessagesMarkReadUpToRoute = options.chatMessagesMarkReadUpToRoute;
+        markChatMessagesReadUpToRoute = options.markChatMessagesReadUpToRoute;
         api = makeApi();
         logger = options.logger || new logger_1.ConsoleLogger;
         ably = new Ably.Realtime({
@@ -170,7 +170,7 @@ const Chat = (function () {
         getChatAblyTokenRoute,
         getChatStoreMessageRoute,
         getChatForAppointmentRoute,
-        chatMessagesMarkReadUpToRoute
+        markChatMessagesReadUpToRoute
     });
     const logout = () => {
         setJwtToken(undefined);

package/dist/PendingMessage.d.ts

@@ -1,3 +1,5 @@
+import Message from "./Message";
+export declare type PendingMessageStatus = 'pending' | 'failed';
 export default class PendingMessage {
     readonly id: string;
     readonly message: string;
@@ -11,4 +13,4 @@ export default class PendingMessage {
     });
     get isPendingMessage(): boolean;
 }
-export declare type PendingMessageStatus = 'pending' | 'failed';
+export declare const isPendingMessage: (message: Message | PendingMessage) => message is PendingMessage;

package/dist/PendingMessage.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.isPendingMessage = void 0;
 class PendingMessage {
     constructor({ id, message, status, createdAt }) {
         this.id = id;
@@ -12,4 +13,8 @@ class PendingMessage {
     }
 }
 exports.default = PendingMessage;
+const isPendingMessage = (message) => {
+    return message.isPendingMessage;
+};
+exports.isPendingMessage = isPendingMessage;
 //# sourceMappingURL=PendingMessage.js.map

package/dist/PendingMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"PendingMessage.js","sourceRoot":"","sources":["../src/PendingMessage.ts"],"names":[],"mappings":";;AAKA,MAAqB,cAAc;IAM/B,YAAY,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAkF;QAC1H,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACb,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;IAC/B,CAAC;IAED,IAAW,gBAAgB;QACvB,OAAO,IAAI,CAAC;IAChB,CAAC;CACJ;AAhBD,iCAgBC"}
+{"version":3,"file":"PendingMessage.js","sourceRoot":"","sources":["../src/PendingMessage.ts"],"names":[],"mappings":";;;AASA,MAAqB,cAAc;IAM/B,YAAY,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAkF;QAC1H,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;QACb,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;IAC/B,CAAC;IAED,IAAW,gBAAgB;QACvB,OAAO,IAAI,CAAC;IAChB,CAAC;CACJ;AAhBD,iCAgBC;AAEM,MAAM,gBAAgB,GAAG,CAAC,OAA+B,EAA6B,EAAE;IAC3F,OAAO,OAAO,CAAC,gBAAgB,CAAC;AACpC,CAAC,CAAA;AAFY,QAAA,gBAAgB,oBAE5B"}

package/dist/index.d.ts

@@ -2,6 +2,6 @@ import Chat from "./Chat";
 import useChat from "./react/useChat";
 import useAppointmentChat from "./react/useAppointmentChat";
 export { ConsoleLogger, RollbarLogger, NullLogger } from './logger';
-export { Message, MessageRow, AdminMessage, ConnectionAndChannelStatusLabel } from './react';
-export { getLatestMessageId } from './util';
+export { Message, MessageRow, MessageList, AdminMessage, ConnectionAndChannelStatusLabel } from './react';
+export { getLatestMessage } from './util';
 export { Chat, useChat, useAppointmentChat };

package/dist/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAppointmentChat = exports.useChat = exports.Chat = exports.getLatestMessageId = exports.ConnectionAndChannelStatusLabel = exports.AdminMessage = exports.MessageRow = exports.Message = exports.NullLogger = exports.RollbarLogger = exports.ConsoleLogger = void 0;
+exports.useAppointmentChat = exports.useChat = exports.Chat = exports.getLatestMessage = exports.ConnectionAndChannelStatusLabel = exports.AdminMessage = exports.MessageList = exports.MessageRow = exports.Message = exports.NullLogger = exports.RollbarLogger = exports.ConsoleLogger = void 0;
 const Chat_1 = __importDefault(require("./Chat"));
 exports.Chat = Chat_1.default;
 const useChat_1 = __importDefault(require("./react/useChat"));
@@ -17,8 +17,9 @@ Object.defineProperty(exports, "NullLogger", { enumerable: true, get: function (
 var react_1 = require("./react");
 Object.defineProperty(exports, "Message", { enumerable: true, get: function () { return react_1.Message; } });
 Object.defineProperty(exports, "MessageRow", { enumerable: true, get: function () { return react_1.MessageRow; } });
+Object.defineProperty(exports, "MessageList", { enumerable: true, get: function () { return react_1.MessageList; } });
 Object.defineProperty(exports, "AdminMessage", { enumerable: true, get: function () { return react_1.AdminMessage; } });
 Object.defineProperty(exports, "ConnectionAndChannelStatusLabel", { enumerable: true, get: function () { return react_1.ConnectionAndChannelStatusLabel; } });
 var util_1 = require("./util");
-Object.defineProperty(exports, "getLatestMessageId", { enumerable: true, get: function () { return util_1.getLatestMessageId; } });
+Object.defineProperty(exports, "getLatestMessage", { enumerable: true, get: function () { return util_1.getLatestMessage; } });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;AACb,kDAA0B;AAsBtB,eAtBG,cAAI,CAsBH;AArBR,8DAAsC;AAsBlC,kBAtBG,iBAAO,CAsBH;AArBX,oFAA4D;AAsBxD,6BAtBG,4BAAkB,CAsBH;AApBtB,mCAIkB;AAHd,uGAAA,aAAa,OAAA;AACb,uGAAA,aAAa,OAAA;AACb,oGAAA,UAAU,OAAA;AAGd,iCAKiB;AAJb,gGAAA,OAAO,OAAA;AACP,mGAAA,UAAU,OAAA;AACV,qGAAA,YAAY,OAAA;AACZ,wHAAA,+BAA+B,OAAA;AAGnC,+BAEgB;AADZ,0GAAA,kBAAkB,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;AACb,kDAA0B;AAuBtB,eAvBG,cAAI,CAuBH;AAtBR,8DAAsC;AAuBlC,kBAvBG,iBAAO,CAuBH;AAtBX,oFAA4D;AAuBxD,6BAvBG,4BAAkB,CAuBH;AArBtB,mCAIkB;AAHd,uGAAA,aAAa,OAAA;AACb,uGAAA,aAAa,OAAA;AACb,oGAAA,UAAU,OAAA;AAGd,iCAMiB;AALb,gGAAA,OAAO,OAAA;AACP,mGAAA,UAAU,OAAA;AACV,oGAAA,WAAW,OAAA;AACX,qGAAA,YAAY,OAAA;AACZ,wHAAA,+BAA+B,OAAA;AAGnC,+BAEgB;AADZ,wGAAA,gBAAgB,OAAA"}

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

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import ChatError from '../../ChatError';
+import MessageModel from '../../Message';
+import { GetLatestMessagesStatus, Messages } from '../../CachedChat';
+export interface MessageListProps {
+    messages: Messages;
+    currentUserId: number;
+    messagesScrollContainerId: string;
+    getLatestMessagesStatus: GetLatestMessagesStatus;
+    markMessagesReadUpTo(message: MessageModel): Promise<{
+        error: ChatError | undefined;
+    }>;
+    shouldMarkMessagesAsRead: boolean;
+    loadingContent: React.ReactNode;
+    retryContent: React.ReactNode;
+    messagesContainerClassName?: string;
+    onRequestScrollToBottomOfMessagesScrollContainer: () => void;
+}
+export declare const MessageList: {
+    ({ messages, currentUserId, messagesScrollContainerId, getLatestMessagesStatus, markMessagesReadUpTo, shouldMarkMessagesAsRead, loadingContent, retryContent, messagesContainerClassName, onRequestScrollToBottomOfMessagesScrollContainer }: MessageListProps): React.ReactNode;
+    propTypes: {
+        messages: PropTypes.Validator<(object | null | undefined)[]>;
+        currentUserId: PropTypes.Validator<number>;
+        messagesScrollContainerId: PropTypes.Validator<string>;
+        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>;
+        messagesContainerClassName: PropTypes.Requireable<string>;
+        onRequestScrollToBottomOfMessagesScrollContainer: PropTypes.Validator<(...args: any[]) => any>;
+    };
+};

package/dist/react/components/MessageList.js

@@ -0,0 +1,98 @@
+"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, getLatestMessagesStatus, markMessagesReadUpTo, shouldMarkMessagesAsRead, loadingContent, retryContent, messagesContainerClassName, 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);
+                }
+            }).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.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 })));
+        }
+        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,
+    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,
+    messagesContainerClassName: prop_types_1.default.string,
+    onRequestScrollToBottomOfMessagesScrollContainer: prop_types_1.default.func.isRequired
+};
+//# sourceMappingURL=MessageList.js.map

package/dist/react/components/MessageList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageList.js","sourceRoot":"","sources":["../../../src/react/components/MessageList.tsx"],"names":[],"mappings":"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"}

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

@@ -1,5 +1,6 @@
 import { Message } from './Message';
 import { MessageRow } from './MessageRow';
+import { MessageList } from './MessageList';
 import { AdminMessage } from "./AdminMessage";
 import { ConnectionAndChannelStatusLabel } from "./ConnectionAndChannelStatusLabel";
-export { Message, MessageRow, AdminMessage, ConnectionAndChannelStatusLabel };
+export { Message, MessageRow, MessageList, AdminMessage, ConnectionAndChannelStatusLabel };

package/dist/react/components/index.js

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConnectionAndChannelStatusLabel = exports.AdminMessage = exports.MessageRow = exports.Message = void 0;
+exports.ConnectionAndChannelStatusLabel = exports.AdminMessage = exports.MessageList = exports.MessageRow = exports.Message = void 0;
 const Message_1 = require("./Message");
 Object.defineProperty(exports, "Message", { enumerable: true, get: function () { return Message_1.Message; } });
 const MessageRow_1 = require("./MessageRow");
 Object.defineProperty(exports, "MessageRow", { enumerable: true, get: function () { return MessageRow_1.MessageRow; } });
+const MessageList_1 = require("./MessageList");
+Object.defineProperty(exports, "MessageList", { enumerable: true, get: function () { return MessageList_1.MessageList; } });
 const AdminMessage_1 = require("./AdminMessage");
 Object.defineProperty(exports, "AdminMessage", { enumerable: true, get: function () { return AdminMessage_1.AdminMessage; } });
 const ConnectionAndChannelStatusLabel_1 = require("./ConnectionAndChannelStatusLabel");

package/dist/react/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/react/components/index.ts"],"names":[],"mappings":";;;AAAA,uCAAoC;AAMhC,wFANK,iBAAO,OAML;AALX,6CAA0C;AAMtC,2FANK,uBAAU,OAML;AALd,iDAA8C;AAM1C,6FANK,2BAAY,OAML;AALhB,uFAAoF;AAMhF,gHANK,iEAA+B,OAML"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/react/components/index.ts"],"names":[],"mappings":";;;AAAA,uCAAoC;AAOhC,wFAPK,iBAAO,OAOL;AANX,6CAA0C;AAOtC,2FAPK,uBAAU,OAOL;AANd,+CAA4C;AAOxC,4FAPK,yBAAW,OAOL;AANf,iDAA8C;AAO1C,6FAPK,2BAAY,OAOL;AANhB,uFAAoF;AAOhF,gHAPK,iEAA+B,OAOL"}

package/dist/react/index.d.ts

@@ -1,3 +1,3 @@
 export { default as useChat } from './useChat';
 export { default as useAppointmentChat } from './useAppointmentChat';
-export { Message, MessageRow, AdminMessage, ConnectionAndChannelStatusLabel } from './components';
+export { Message, MessageRow, MessageList, AdminMessage, ConnectionAndChannelStatusLabel } from './components';

package/dist/react/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConnectionAndChannelStatusLabel = exports.AdminMessage = exports.MessageRow = exports.Message = exports.useAppointmentChat = exports.useChat = void 0;
+exports.ConnectionAndChannelStatusLabel = exports.AdminMessage = exports.MessageList = exports.MessageRow = exports.Message = exports.useAppointmentChat = exports.useChat = void 0;
 var useChat_1 = require("./useChat");
 Object.defineProperty(exports, "useChat", { enumerable: true, get: function () { return __importDefault(useChat_1).default; } });
 var useAppointmentChat_1 = require("./useAppointmentChat");
@@ -11,6 +11,7 @@ Object.defineProperty(exports, "useAppointmentChat", { enumerable: true, get: fu
 var components_1 = require("./components");
 Object.defineProperty(exports, "Message", { enumerable: true, get: function () { return components_1.Message; } });
 Object.defineProperty(exports, "MessageRow", { enumerable: true, get: function () { return components_1.MessageRow; } });
+Object.defineProperty(exports, "MessageList", { enumerable: true, get: function () { return components_1.MessageList; } });
 Object.defineProperty(exports, "AdminMessage", { enumerable: true, get: function () { return components_1.AdminMessage; } });
 Object.defineProperty(exports, "ConnectionAndChannelStatusLabel", { enumerable: true, get: function () { return components_1.ConnectionAndChannelStatusLabel; } });
 //# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":";;;;;;AAAA,qCAA+C;AAAtC,mHAAA,OAAO,OAAW;AAC3B,2DAAqE;AAA5D,yIAAA,OAAO,OAAsB;AAEtC,2CAKsB;AAJlB,qGAAA,OAAO,OAAA;AACP,wGAAA,UAAU,OAAA;AACV,0GAAA,YAAY,OAAA;AACZ,6HAAA,+BAA+B,OAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":";;;;;;AAAA,qCAA+C;AAAtC,mHAAA,OAAO,OAAW;AAC3B,2DAAqE;AAA5D,yIAAA,OAAO,OAAsB;AAEtC,2CAMsB;AALlB,qGAAA,OAAO,OAAA;AACP,wGAAA,UAAU,OAAA;AACV,yGAAA,WAAW,OAAA;AACX,0GAAA,YAAY,OAAA;AACZ,6HAAA,+BAA+B,OAAA"}

package/dist/util/getLatestMessage.d.ts

@@ -0,0 +1,3 @@
+import Message from "../Message";
+import PendingMessage from "../PendingMessage";
+export declare const getLatestMessage: (messages: (Message | PendingMessage)[]) => Message | undefined;

package/dist/util/getLatestMessage.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLatestMessage = void 0;
+const Message_1 = require("../Message");
+const isNil_1 = require("./isNil");
+const getLatestMessage = (messages) => {
+    let latestMessage;
+    for (let i = 0, il = messages.length; i < il; i++) {
+        (0, Message_1.isMessageThen)(messages[i], message => {
+            if ((0, isNil_1.isNil)(latestMessage) || latestMessage.id < message.id) {
+                latestMessage = message;
+            }
+        });
+    }
+    return latestMessage;
+};
+exports.getLatestMessage = getLatestMessage;
+//# sourceMappingURL=getLatestMessage.js.map

package/dist/util/getLatestMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getLatestMessage.js","sourceRoot":"","sources":["../../src/util/getLatestMessage.ts"],"names":[],"mappings":";;;AAAA,wCAAoD;AAEpD,mCAAgC;AAEzB,MAAM,gBAAgB,GAAG,CAAC,QAAoC,EAAqB,EAAE;IACxF,IAAI,aAAgC,CAAC;IAErC,KAAI,IAAI,CAAC,GAAC,CAAC,EAAC,EAAE,GAAC,QAAQ,CAAC,MAAM,EAAC,CAAC,GAAC,EAAE,EAAC,CAAC,EAAE,EAAE;QACrC,IAAA,uBAAa,EAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,EAAE;YACjC,IAAI,IAAA,aAAK,EAAC,aAAa,CAAC,IAAI,aAAa,CAAC,EAAE,GAAG,OAAO,CAAC,EAAE,EAAE;gBACvD,aAAa,GAAG,OAAO,CAAC;aAC3B;QACL,CAAC,CAAC,CAAC;KACN;IAED,OAAO,aAAa,CAAC;AACzB,CAAC,CAAA;AAZY,QAAA,gBAAgB,oBAY5B"}

package/dist/util/index.d.ts

@@ -1,4 +1,4 @@
 import { isNil } from "./isNil";
 import { groupMessages } from "./groupMessages";
-import { getLatestMessageId } from "./getLatestMessageId";
-export { isNil, groupMessages, getLatestMessageId };
+import { getLatestMessage } from "./getLatestMessage";
+export { isNil, groupMessages, getLatestMessage };

package/dist/util/index.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getLatestMessageId = exports.groupMessages = exports.isNil = void 0;
+exports.getLatestMessage = exports.groupMessages = exports.isNil = void 0;
 const isNil_1 = require("./isNil");
 Object.defineProperty(exports, "isNil", { enumerable: true, get: function () { return isNil_1.isNil; } });
 const groupMessages_1 = require("./groupMessages");
 Object.defineProperty(exports, "groupMessages", { enumerable: true, get: function () { return groupMessages_1.groupMessages; } });
-const getLatestMessageId_1 = require("./getLatestMessageId");
-Object.defineProperty(exports, "getLatestMessageId", { enumerable: true, get: function () { return getLatestMessageId_1.getLatestMessageId; } });
+const getLatestMessage_1 = require("./getLatestMessage");
+Object.defineProperty(exports, "getLatestMessage", { enumerable: true, get: function () { return getLatestMessage_1.getLatestMessage; } });
 //# sourceMappingURL=index.js.map

package/dist/util/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/util/index.ts"],"names":[],"mappings":";;;AAAA,mCAAgC;AAK5B,sFALK,aAAK,OAKL;AAJT,mDAAgD;AAK5C,8FALK,6BAAa,OAKL;AAJjB,6DAA0D;AAKtD,mGALK,uCAAkB,OAKL"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/util/index.ts"],"names":[],"mappings":";;;AAAA,mCAAgC;AAK5B,sFALK,aAAK,OAKL;AAJT,mDAAgD;AAK5C,8FALK,6BAAa,OAKL;AAJjB,yDAAsD;AAKlD,iGALK,mCAAgB,OAKL"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viewberapp/chat",
-  "version": "0.0.79",
+  "version": "0.0.81",
   "description": "Viewber chat",
   "author": "Jacob <jacob.chen@viewber.co.uk>",
   "homepage": "https://bitbucket.org/ezadr/viewberjs#readme",
@@ -38,8 +38,9 @@
   "peerDependencies": {
     "ably": "^1.2.29",
     "axios": "^0.21.1",
+    "prop-types": "^15.7.2",
     "react": "^16.14.0",
     "rollbar": "^2.25.0"
   },
-  "gitHead": "40e9c5549354d92e6fe82aa6d83f4aa67da76ec3"
+  "gitHead": "a3d579706cf406084cc849968cce6af19170ae35"
 }