@peers-app/peers-ui 0.0.14

package/dist/components/messages/channel-message-list.js

@@ -0,0 +1,158 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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.ChannelMessageList = void 0;
+exports.getMessages = getMessages;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const lodash_1 = require("lodash");
+const react_1 = __importStar(require("react"));
+const react_infinite_scroll_component_1 = __importDefault(require("react-infinite-scroll-component"));
+const globals_1 = require("../../globals");
+const loading_indicator_1 = require("../loading-indicator");
+const message_display_1 = require("./message-display");
+const windowHeight = () => window.innerHeight;
+const ChannelMessageList = (props) => {
+    const { height, channelId, batchSize } = props;
+    const [messages, setMessages] = (0, react_1.useState)([]);
+    const [allMessagesLoaded, setAllMessagesLoaded] = (0, react_1.useState)(false);
+    const messagesEndRef = react_1.default.useRef(null);
+    function scrollToBottom(behavior, delay = 100) {
+        setTimeout(() => {
+            messagesEndRef.current?.scrollIntoView({ behavior });
+        }, delay);
+    }
+    (0, react_1.useEffect)(() => {
+        const observer = new IntersectionObserver(([entry]) => {
+            props?.scrollChanged?.(entry.isIntersecting);
+        }, { threshold: 1.0 });
+        if (messagesEndRef.current) {
+            observer.observe(messagesEndRef.current);
+        }
+        return () => {
+            if (messagesEndRef.current) {
+                observer.unobserve(messagesEndRef.current);
+            }
+        };
+    }, []);
+    function prependItems() {
+        const lastMessage = messages[messages.length - 1];
+        getMessages(batchSize, channelId, lastMessage)
+            .then(fetchedMessages => {
+            if (fetchedMessages.length === 0) {
+                setAllMessagesLoaded(true);
+            }
+            else {
+                const _messages = (0, lodash_1.sortBy)([...messages, ...fetchedMessages], 'createdAt').reverse();
+                setMessages((0, lodash_1.uniqBy)(_messages, 'messageId'));
+            }
+        });
+        return false;
+    }
+    const minHeightOfMessage = 20;
+    (0, react_1.useEffect)(() => {
+        if (!allMessagesLoaded && (!messages.length || messages.length * minHeightOfMessage < windowHeight())) {
+            prependItems();
+        }
+    }, [channelId, messages]);
+    const [effects] = (0, react_1.useState)(() => props.effects || {});
+    effects.pushMessage = (newMessage) => {
+        if ((messages.length > batchSize && (0, lodash_1.min)(messages.map(m => m.createdAt)) > newMessage.createdAt)
+            || messages.find(m => m.messageId === newMessage.messageId)) {
+            return;
+        }
+        let _messages = (0, lodash_1.sortBy)([newMessage, ...messages], 'createdAt').reverse();
+        setMessages(_messages);
+        if (newMessage.userId === globals_1.me.userId && !newMessage.assistantId) {
+            scrollToBottom('instant', 1);
+        }
+        else {
+            scrollToBottom('smooth');
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        const sub = (0, peers_sdk_1.Messages)().dataChanged.subscribe(evt => {
+            const message = evt.dataObject;
+            if (message.channelId !== channelId || message.messageParentId) {
+                return;
+            }
+            if (evt.op === 'insert') {
+                effects.pushMessage(message);
+            }
+        });
+        return () => {
+            sub.unsubscribe();
+        };
+    }, [channelId]);
+    return (react_1.default.createElement("div", { id: "scrollableDiv", style: {
+            height,
+            overflow: 'auto',
+            display: 'flex',
+            flexDirection: 'column-reverse',
+            // marginBottom: '70px',
+        } },
+        react_1.default.createElement(react_infinite_scroll_component_1.default, { dataLength: messages.length, next: prependItems, style: { display: 'flex', flexDirection: 'column-reverse', overflow: 'hidden' }, inverse: true, hasMore: !allMessagesLoaded, loader: react_1.default.createElement(loading_indicator_1.LoadingIndicator, null), scrollableTarget: "scrollableDiv", endMessage: react_1.default.createElement(react_1.Fragment, null,
+                react_1.default.createElement("div", { className: "d-flex justify-content-center" }, messages[0] && (react_1.default.createElement("div", null, (new Date(messages[messages.length - 1].createdAt).toLocaleDateString())))),
+                react_1.default.createElement("div", { className: "d-flex justify-content-center" },
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement("i", null, "beginning of messages")))) },
+            react_1.default.createElement("div", { ref: messagesEndRef }),
+            messages.map((message, index) => {
+                return react_1.default.createElement(message_display_1.MessageDisplay, { key: message.messageId, message: message, messageAbove: messages[index + 1], index: index });
+            }))));
+};
+exports.ChannelMessageList = ChannelMessageList;
+async function getMessages(batchSize, channelId, lastMessage) {
+    const query = {
+        channelId,
+        messageParentId: null,
+    };
+    if (lastMessage) {
+        query.messageId = { $lt: lastMessage.messageId };
+    }
+    const cursor = await (0, peers_sdk_1.Messages)().cursor(query, {
+        sortBy: ['-createdAt', '-messageId'],
+    });
+    const messages = [];
+    for await (const message of cursor) {
+        messages.push(message);
+        if (messages.length >= batchSize) {
+            break;
+        }
+    }
+    return messages;
+}

package/dist/components/messages/channel-view.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface IProps {
+    channelId?: string;
+}
+export declare const ChannelMessages: (props: IProps) => React.JSX.Element;
+export {};

package/dist/components/messages/channel-view.js

@@ -0,0 +1,82 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChannelMessages = void 0;
+const react_1 = __importStar(require("react"));
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const globals_1 = require("../../globals");
+const channel_message_list_1 = require("./channel-message-list");
+const message_compose_1 = require("./message-compose");
+const ui_loader_1 = require("../../ui-router/ui-loader");
+const ChannelMessages = (props) => {
+    const messagesEndRef = (0, react_1.useRef)(null);
+    const [effects] = (0, react_1.useState)(() => ({}));
+    const [scrolledToBottom, setScrolledToBottom] = (0, react_1.useState)(true);
+    let channelId = props.channelId;
+    // const scrollToBottom = (behavior: 'instant' | 'smooth' = 'instant') => {
+    //   setTimeout(() => messagesEndRef.current?.scrollIntoView({ behavior }), 500);
+    // };
+    const sendMessage = (userMessage) => {
+        effects.pushMessage(userMessage);
+        (0, peers_sdk_1.Messages)().save(userMessage).then(message => {
+            (0, globals_1.openThread)(message.messageId);
+        });
+    };
+    channelId = channelId || globals_1.me.userId;
+    return (react_1.default.createElement("div", { className: "d-flex flex-column flex-col-reverse", style: {
+            // height: '100vh',
+            height: 'calc(100vh - 50px)',
+            // marginTop: '50px',
+        } },
+        react_1.default.createElement(channel_message_list_1.ChannelMessageList, { batchSize: 30, channelId: channelId, 
+            // height="calc(100vh - 50px)"
+            height: '100vh', effects: effects, scrollChanged: setScrolledToBottom }),
+        react_1.default.createElement("div", { ref: messagesEndRef }),
+        react_1.default.createElement("div", { className: 'p-2 pt-1', style: {
+                boxShadow: scrolledToBottom ? '' : `0 -10px 11px -10px rgba(0, 0, 0, 0.9)`
+            } },
+            react_1.default.createElement(message_compose_1.MessageCompose, { channelId: channelId, onMessageSubmit: sendMessage }))));
+};
+exports.ChannelMessages = ChannelMessages;
+(0, ui_loader_1.registerInternalPeersUI)({
+    peersUIId: '00m5fsd8d4jma58fgvyr1riny',
+    component: exports.ChannelMessages,
+    routes: [
+        {
+            isMatch: (props, context) => context.path === 'threads' || context.path === '',
+            uiCategory: 'screen'
+        },
+    ]
+});

package/dist/components/messages/message-compose.d.ts

@@ -0,0 +1,11 @@
+import { IFile, IMessage, PersistentVar } from "@peers-app/peers-sdk";
+import React from 'react';
+export declare function getContentPersistenceValue(channelId: string, threadId?: string): PersistentVar<string>;
+interface IProps {
+    channelId: string;
+    threadId?: string;
+    onMessageSubmit: (message: IMessage, files?: IFile[]) => any;
+}
+export declare const MessageCompose: (props: IProps) => React.JSX.Element;
+export declare function isMobile(): boolean;
+export {};

package/dist/components/messages/message-compose.js

@@ -0,0 +1,152 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageCompose = void 0;
+exports.getContentPersistenceValue = getContentPersistenceValue;
+exports.isMobile = isMobile;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const peers_sdk_2 = require("@peers-app/peers-sdk");
+const react_1 = __importStar(require("react"));
+const globals_1 = require("../../globals");
+const hooks_1 = require("../../hooks");
+const editor_1 = require("../markdown-editor/editor");
+const pVarCache = {};
+function getContentPersistenceValue(channelId, threadId) {
+    const contentPersistenceName = `messageCompose-channel-${channelId}${threadId ? '-thread-' + threadId : ''}`;
+    if (!pVarCache[contentPersistenceName]) {
+        pVarCache[contentPersistenceName] = (0, peers_sdk_1.userVar)(contentPersistenceName, { defaultValue: '' });
+    }
+    return pVarCache[contentPersistenceName];
+}
+const MessageCompose = (props) => {
+    const { channelId, threadId, onMessageSubmit } = props;
+    const [contentObs] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)(''));
+    const [mdEffects] = (0, react_1.useState)(() => ({}));
+    const composeBottomRef = react_1.default.useRef(null);
+    function scrollToBottom() {
+        if (composeBottomRef?.current) {
+            composeBottomRef.current.scrollIntoView({ behavior: 'instant' });
+        }
+    }
+    (0, react_1.useEffect)(() => {
+        let disposed = false;
+        let sub;
+        getContentPersistenceValue(channelId, threadId).loadingPromise.then(pVar => {
+            if (!disposed) {
+                contentObs(pVar() ?? '');
+                sub = contentObs.subscribe(() => pVar(contentObs()));
+                setTimeout(() => scrollToBottom(), 100);
+            }
+        });
+        return () => {
+            disposed = true;
+            sub?.dispose();
+        };
+    }, [channelId, threadId]);
+    (0, react_1.useEffect)(() => {
+        const sub = contentObs.subscribe(() => scrollToBottom());
+        return () => sub.dispose();
+    }, [contentObs]);
+    function submitMessage() {
+        const markdown = contentObs() ?? '';
+        contentObs('');
+        if (!markdown.trim()) {
+            return;
+        }
+        const userMessage = {
+            messageId: (0, peers_sdk_2.newid)(),
+            message: markdown,
+            userId: globals_1.me.userId,
+            channelId,
+            messageParentId: threadId,
+            createdAt: new Date(),
+        };
+        onMessageSubmit(userMessage);
+    }
+    return (react_1.default.createElement("div", { className: "border rounded border-dark-subtle", style: { overflowY: 'auto' } },
+        react_1.default.createElement(editor_1.MarkdownEditor, { value: contentObs, effects: mdEffects, autoFocus: !!threadId, maxHeight: '50vh' }),
+        react_1.default.createElement(BottomControls, { submitMessage: submitMessage, contentObs: contentObs, mdEffects: mdEffects }),
+        react_1.default.createElement("div", { ref: composeBottomRef })));
+};
+exports.MessageCompose = MessageCompose;
+const BottomControls = (props) => {
+    const { submitMessage, contentObs } = props;
+    const [content] = (0, hooks_1.useObservable)(contentObs, [contentObs]);
+    const [submitOnEnter] = (0, react_1.useState)(() => (0, peers_sdk_1.deviceVar)(`messageCompose-submitOnEnter`, { defaultValue: true }));
+    (0, hooks_1.useObservable)(submitOnEnter);
+    if (isMobile()) {
+        submitOnEnter(false);
+    }
+    function onKeyDown(evt) {
+        if (evt.code === 'Enter' && !evt.ctrlKey && !evt.shiftKey && !evt.altKey && !evt.metaKey) {
+            if (submitOnEnter()) {
+                submitMessage();
+                evt.preventDefault();
+                return true;
+            }
+        }
+        else if (evt.code === 'Enter' && (evt.ctrlKey || evt.metaKey)) {
+            if (!submitOnEnter()) {
+                submitMessage();
+                evt.preventDefault();
+                return true;
+            }
+        }
+    }
+    props.mdEffects.onKeyDown = onKeyDown;
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("div", { className: 'float-end small' },
+            react_1.default.createElement("span", { className: 'small', hidden: isMobile() },
+                react_1.default.createElement("input", { type: "checkbox", id: "sendOnEnter", checked: !!submitOnEnter(), onChange: evt => submitOnEnter(evt.target.checked) }),
+                " Send on Enter"),
+            "\u00A0\u00A0",
+            content.trim()?.length === 0
+                ? (react_1.default.createElement("button", { className: "btn btn-sm btn-outline", type: "button", disabled: true },
+                    "Send \u00A0",
+                    react_1.default.createElement("i", { className: "bi bi-send-fill" })))
+                : (react_1.default.createElement("button", { className: "btn btn-sm btn-success", type: "button", onClick: props.submitMessage },
+                    "Send \u00A0",
+                    react_1.default.createElement("i", { className: "bi bi-send-fill" }))))));
+};
+function isMobile() {
+    if (navigator?.userAgentData?.mobile) {
+        return true;
+    }
+    let check = false;
+    // @ts-ignore
+    (function (a) { if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4)))
+        check = true; })(navigator.userAgent || navigator.vendor || window.opera);
+    return check;
+}

package/dist/components/messages/message-display.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { IMessage } from "@peers-app/peers-sdk";
+interface IProps {
+    message: IMessage;
+    messageAbove?: IMessage;
+    isThreadParent?: boolean;
+    index?: number;
+}
+export declare const MessageDisplay: (props: IProps) => React.JSX.Element;
+export {};

package/dist/components/messages/message-display.js

@@ -0,0 +1,152 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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.MessageDisplay = void 0;
+const react_1 = __importStar(require("react"));
+const avatar_1 = require("./avatar");
+// import { FileListDisplay } from './file-list-display';
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const moment_1 = __importDefault(require("moment"));
+const globals_1 = require("../../globals");
+const hooks_1 = require("../../hooks");
+const markdown_with_mentions_1 = require("../markdown-with-mentions");
+const message_logs_1 = require("../message-logs/message-logs");
+const MessageDisplay = (props) => {
+    const { message, messageAbove, isThreadParent } = props;
+    const [messageId, setMessageId] = (0, react_1.useState)(message.messageId);
+    (0, hooks_1.useSubscription)(globals_1.openThreads, () => {
+    });
+    const [user, setUser] = (0, react_1.useState)();
+    const [messageChangedTime, setMessageChangedTime] = (0, react_1.useState)(0);
+    const assistant = (0, hooks_1.usePromise)(async () => {
+        if (message.assistantId) {
+            return (0, peers_sdk_1.Assistants)().get(message.assistantId);
+        }
+    }, undefined, [message.assistantId]);
+    const countReplies = (0, hooks_1.usePromise)(() => (0, peers_sdk_1.Messages)().count({ messageParentId: messageId }), 1, [messageId, messageChangedTime]);
+    const [showMenu] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)(false));
+    (0, react_1.useEffect)(() => {
+        setMessageId(message.messageId);
+        const sub = (0, peers_sdk_1.Messages)().dataChanged.subscribe((evt) => {
+            const changedMessage = evt.dataObject;
+            if (changedMessage.messageId === messageId || changedMessage.messageParentId === messageId) {
+                setMessageChangedTime(Date.now());
+            }
+        });
+        return () => {
+            sub.unsubscribe();
+        };
+    }, [message]);
+    // calculate short time string
+    const messageDate = new Date(message.createdAt);
+    let hour = messageDate.getHours();
+    const minute = messageDate.getMinutes().toString().padStart(2, '0');
+    let ampm = "AM";
+    if (hour > 11) {
+        ampm = "PM";
+    }
+    if (hour > 12) {
+        hour = hour - 12;
+    }
+    let timeStr = `${hour || 12}:${minute} ${ampm}`;
+    const showDateDivider = messageAbove
+        && messageDate.toDateString() !== (new Date(messageAbove.createdAt)).toDateString();
+    const showUserInfo = showDateDivider
+        || !messageAbove || !message
+        || messageAbove.userId !== message.userId
+        || messageAbove.assistantId !== message.assistantId
+        || messageDate.getHours() !== (new Date(messageAbove.createdAt)).getHours()
+        || countReplies > 0;
+    // // show time of this message if hour is different than last message
+    // const showTime = !showUserInfo 
+    //   && messageDate.getHours() !== (new Date(messageAbove.modified)).getHours(); 
+    const isThreadView = isThreadParent || message.messageParentId;
+    const dateTimeStr = (0, moment_1.default)(message.createdAt).calendar().split(' at ')[0] + ' ' + timeStr;
+    if (isThreadParent) {
+        timeStr = dateTimeStr;
+    }
+    let messageParsed = message.message.trim();
+    return (react_1.default.createElement("div", { className: isThreadParent ? '' : `peers-message-container`, onMouseEnter: () => showMenu(true), onMouseLeave: () => showMenu(false) },
+        react_1.default.createElement(MessageMenu, { message: message, showMenu: showMenu, isThreadView: !!isThreadView }),
+        showDateDivider && (react_1.default.createElement("div", { style: { marginTop: `20px` } },
+            react_1.default.createElement("hr", null),
+            react_1.default.createElement("div", { className: "d-flex justify-content-center" },
+                react_1.default.createElement("span", { className: 'message-display-list-date', style: {
+                        position: 'relative',
+                        top: '-29px',
+                        paddingLeft: '11px',
+                        paddingRight: '11px',
+                        fontSize: '16px',
+                        borderRadius: '20px',
+                    } },
+                    react_1.default.createElement("strong", null, (0, moment_1.default)(message.createdAt).calendar().split(' at ')[0].replace('Last', '')))))),
+        showUserInfo && (react_1.default.createElement("div", { style: { marginTop: '15px' } })),
+        react_1.default.createElement("div", { className: "d-flex" },
+            react_1.default.createElement("div", { className: "p-0 flex-shrink-0 justify-content-center align-items-center", style: {
+                    width: '46px',
+                    height: '20px',
+                    overflow: 'visible',
+                    // zIndex: message.modified,
+                    position: 'relative',
+                    top: '4px',
+                    left: '3px',
+                } }, showUserInfo && react_1.default.createElement(avatar_1.Avatar, { userId: message.userId, assistantId: message.assistantId, setUser: setUser })),
+            react_1.default.createElement("div", { className: "p-1 flex-grow-1 justify-content-start text-break", style: {
+                    maxWidth: 'calc(100% - 50px)',
+                } },
+                showUserInfo && (react_1.default.createElement("div", { className: "peers-message" },
+                    react_1.default.createElement("span", { style: { fontSize: '9pt' } },
+                        react_1.default.createElement("b", null, assistant?.name || message?.assistantId || user?.name || message.userId)),
+                    react_1.default.createElement("span", { className: "text-muted sub-sup-font-size", style: { fontSize: '8pt' }, title: dateTimeStr },
+                        "\u00A0\u00A0",
+                        timeStr))),
+                messageParsed.length > 0 && (react_1.default.createElement("div", { className: "peers-message" },
+                    react_1.default.createElement(markdown_with_mentions_1.MarkdownWithMentions, { content: messageParsed }))),
+                react_1.default.createElement(message_logs_1.MessageLogs, { key: messageId, messageId: messageId }),
+                !isThreadView && countReplies > 0 && (react_1.default.createElement("div", { className: "d-inline" },
+                    "\u00A0",
+                    react_1.default.createElement("button", { className: "btn btn-sm btn-link m-1", onClick: () => (0, globals_1.openThread)(message.messageParentId || messageId), tabIndex: props.index }, countReplies === 1 ? '1 reply' : countReplies + ' replies'))))),
+        message?.fileIds?.length && (react_1.default.createElement("div", { style: { marginLeft: '46px' } })) || undefined));
+};
+exports.MessageDisplay = MessageDisplay;
+const MessageMenu = (props) => {
+    const { message, isThreadView, showMenu } = props;
+    (0, hooks_1.useObservable)(showMenu);
+    return (react_1.default.createElement(react_1.default.Fragment, null, showMenu() && !isThreadView && (react_1.default.createElement("div", { className: "message-hover-menu" },
+        react_1.default.createElement("button", { className: "btn btn-sm btn-link m-1", onClick: () => (0, globals_1.openThread)(message.messageParentId || message.messageId) }, "Reply")))));
+};

package/dist/components/messages/thread-message-list.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { IMessage } from "@peers-app/peers-sdk";
+interface IProps {
+    threadId: string;
+    effects?: {
+        pushMessage: (message: IMessage) => any;
+    };
+    scrollChanged?: (isBottomInView: boolean) => any;
+}
+export declare const ThreadMessageList: (props: IProps) => false | React.JSX.Element;
+export {};