@peers-app/peers-ui 0.14.0 → 0.15.0

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

@@ -38,6 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChannelMessageList = void 0;
 exports.getMessages = getMessages;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
 const lodash_1 = require("lodash");
 const react_1 = __importStar(require("react"));
@@ -51,11 +52,11 @@ const ChannelMessageList = (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) {
+    const scrollToBottom = (0, react_1.useCallback)((behavior, delay = 100) => {
         setTimeout(() => {
             messagesEndRef.current?.scrollIntoView({ behavior });
         }, delay);
-    }
+    }, []);
     (0, react_1.useEffect)(() => {
         const observer = new IntersectionObserver(([entry]) => {
             props?.scrollChanged?.(entry.isIntersecting);
@@ -68,72 +69,71 @@ const ChannelMessageList = (props) => {
                 observer.unobserve(messagesEndRef.current);
             }
         };
-    }, []);
-    function prependItems() {
+    }, [props?.scrollChanged]);
+    const prependItems = (0, react_1.useCallback)(() => {
         const lastMessage = messages[messages.length - 1];
-        getMessages(batchSize, channelId, lastMessage)
-            .then(fetchedMessages => {
+        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'));
+                const _messages = (0, lodash_1.sortBy)([...messages, ...fetchedMessages], "createdAt").reverse();
+                setMessages((0, lodash_1.uniqBy)(_messages, "messageId"));
             }
         });
         return false;
-    }
+    }, [messages, batchSize, channelId]);
     const minHeightOfMessage = 20;
     (0, react_1.useEffect)(() => {
-        if (!allMessagesLoaded && (!messages.length || messages.length * minHeightOfMessage < windowHeight())) {
+        if (!allMessagesLoaded &&
+            (!messages.length || messages.length * minHeightOfMessage < windowHeight())) {
             prependItems();
         }
-    }, [channelId, messages]);
+    }, [messages, allMessagesLoaded, prependItems]);
+    // Shared-ref pattern: parent (ChannelMessages) passes its own `effects` object; we mutate
+    // `pushMessage` on that SAME reference so the parent's sendMessage can invoke it. Do NOT
+    // spread/clone (`{...props.effects}`) — it breaks the shared reference.
+    // biome-ignore lint/style/noNonNullAssertion: initial `{}` is populated on this same render; the `!` placates TS for the optional `IProps["effects"]` shape.
     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)) {
+        if ((messages.length > batchSize &&
+            // biome-ignore lint/style/noNonNullAssertion: guarded by `messages.length > batchSize` — messages is non-empty so `min(...)` is defined.
+            (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();
+        const _messages = (0, lodash_1.sortBy)([newMessage, ...messages], "createdAt").reverse();
         setMessages(_messages);
         if (newMessage.userId === globals_1.me.userId && !newMessage.assistantId) {
-            scrollToBottom('instant', 1);
+            scrollToBottom("instant", 1);
         }
         else {
-            scrollToBottom('smooth');
+            scrollToBottom("smooth");
         }
     };
     (0, react_1.useEffect)(() => {
-        const sub = (0, peers_sdk_1.Messages)().dataChanged.subscribe(evt => {
+        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') {
+            if (evt.op === "insert") {
                 effects.pushMessage(message);
             }
         });
         return () => {
             sub.unsubscribe();
         };
-    }, [channelId]);
-    return (react_1.default.createElement("div", { id: "scrollableDiv", style: {
+    }, [channelId, effects.pushMessage]);
+    return ((0, jsx_runtime_1.jsx)("div", { id: "scrollableDiv", style: {
             height,
-            overflow: 'auto',
-            display: 'flex',
-            flexDirection: 'column-reverse',
+            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 });
-            }))));
+        }, children: (0, jsx_runtime_1.jsxs)(react_infinite_scroll_component_1.default, { dataLength: messages.length, next: prependItems, style: { display: "flex", flexDirection: "column-reverse", overflow: "hidden" }, inverse: true, hasMore: !allMessagesLoaded, loader: (0, jsx_runtime_1.jsx)(loading_indicator_1.LoadingIndicator, {}), scrollableTarget: "scrollableDiv", endMessage: (0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "d-flex justify-content-center", children: messages[0] && ((0, jsx_runtime_1.jsx)("div", { children: new Date(messages[messages.length - 1].createdAt).toLocaleDateString() })) }), (0, jsx_runtime_1.jsx)("div", { className: "d-flex justify-content-center", children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("i", { children: "beginning of messages" }) }) })] }), children: [(0, jsx_runtime_1.jsx)("div", { ref: messagesEndRef }), messages.map((message, index) => {
+                    return ((0, jsx_runtime_1.jsx)(message_display_1.MessageDisplay, { message: message, messageAbove: messages[index + 1], index: index }, message.messageId));
+                })] }) }));
 };
 exports.ChannelMessageList = ChannelMessageList;
 async function getMessages(batchSize, channelId, lastMessage) {
@@ -145,7 +145,7 @@ async function getMessages(batchSize, channelId, lastMessage) {
         query.messageId = { $lt: lastMessage.messageId };
     }
     const cursor = await (0, peers_sdk_1.Messages)().cursor(query, {
-        sortBy: ['-createdAt', '-messageId'],
+        sortBy: ["-createdAt", "-messageId"],
     });
     const messages = [];
     for await (const message of cursor) {

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

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

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

@@ -1,46 +1,14 @@
 "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 jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = require("react");
 const globals_1 = require("../../globals");
+const hooks_1 = require("../../hooks");
+const ui_loader_1 = require("../../ui-router/ui-loader");
 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 hooks_1 = require("../../hooks");
 const ChannelMessages = (props) => {
     const messagesEndRef = (0, react_1.useRef)(null);
     const [effects] = (0, react_1.useState)(() => ({}));
@@ -49,48 +17,46 @@ const ChannelMessages = (props) => {
     const userContext = (0, hooks_1.usePromise)(() => (0, peers_sdk_1.getUserContext)());
     (0, react_1.useEffect)(() => {
         if (userContext) {
-            currentlyActiveGroupId(userContext.currentlyActiveGroupId() || '');
+            currentlyActiveGroupId(userContext.currentlyActiveGroupId() || "");
             const sub = userContext.currentlyActiveGroupId.subscribe(() => {
-                currentlyActiveGroupId(userContext?.currentlyActiveGroupId() || '');
+                currentlyActiveGroupId(userContext?.currentlyActiveGroupId() || "");
             });
             return () => sub.dispose();
         }
-    }, [userContext]);
+    }, [userContext, currentlyActiveGroupId]);
     if (!userContext) {
-        return react_1.default.createElement("div", null, "Loading...");
+        return (0, jsx_runtime_1.jsx)("div", { children: "Loading..." });
     }
-    let channelId = props.channelId || currentlyActiveGroupId();
+    const channelId = props.channelId || currentlyActiveGroupId();
     // 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, peers_sdk_1.Messages)()
+            .save(userMessage)
+            .then((message) => {
             (0, globals_1.openThread)(message.messageId);
         });
     };
-    return (react_1.default.createElement("div", { key: channelId, className: "d-flex flex-column flex-col-reverse", style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "d-flex flex-column flex-col-reverse", style: {
             // height: '100vh',
-            height: 'calc(100vh - 50px)',
+            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 }))));
+        }, children: [(0, jsx_runtime_1.jsx)(channel_message_list_1.ChannelMessageList, { batchSize: 30, channelId: channelId, 
+                // height="calc(100vh - 50px)"
+                height: "100vh", effects: effects, scrollChanged: setScrolledToBottom }), (0, jsx_runtime_1.jsx)("div", { ref: messagesEndRef }), (0, jsx_runtime_1.jsx)("div", { className: "p-2 pt-1", style: {
+                    boxShadow: scrolledToBottom ? "" : `0 -10px 11px -10px rgba(0, 0, 0, 0.9)`,
+                }, children: (0, jsx_runtime_1.jsx)(message_compose_1.MessageCompose, { channelId: channelId, onMessageSubmit: sendMessage }) })] }, channelId));
 };
 exports.ChannelMessages = ChannelMessages;
 (0, ui_loader_1.registerInternalPeersUI)({
-    peersUIId: '00m5fsd8d4jma58fgvyr1riny',
+    peersUIId: "00m5fsd8d4jma58fgvyr1riny",
     component: exports.ChannelMessages,
     routes: [
         {
-            isMatch: (props, context) => context.path === 'threads' || context.path === '',
-            uiCategory: 'screen'
+            isMatch: (_props, context) => context.path === "threads" || context.path === "",
+            uiCategory: "screen",
         },
-    ]
+    ],
 });

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

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

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

@@ -36,22 +36,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MessageCompose = void 0;
 exports.getContentPersistenceValue = getContentPersistenceValue;
 exports.isMobile = isMobile;
+const jsx_runtime_1 = require("react/jsx-runtime");
 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 : ''}`;
+    const contentPersistenceName = `messageCompose-channel-${channelId}${threadId ? `-thread-${threadId}` : ""}`;
     if (!pVarCache[contentPersistenceName]) {
-        const pVar = (0, peers_sdk_1.userVar)(contentPersistenceName, { defaultValue: '' });
+        const pVar = (0, peers_sdk_1.userVar)(contentPersistenceName, { defaultValue: "" });
         pVarCache[contentPersistenceName] = pVar;
         // Auto-delete the pvar when content is cleared (message sent or editor cleared)
         // This ensures drafts don't accumulate in the database
         pVar.loadingPromise.then(() => {
-            pVar.subscribe(value => {
+            pVar.subscribe((value) => {
                 if (!value) {
                     pVar.delete();
                 }
@@ -62,20 +62,20 @@ function getContentPersistenceValue(channelId, threadId) {
 }
 const MessageCompose = (props) => {
     const { channelId, threadId, onMessageSubmit, initialMessage } = props;
-    const [contentObs] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)(''));
+    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() {
+    const scrollToBottom = (0, react_1.useCallback)(() => {
         if (composeBottomRef?.current) {
-            composeBottomRef.current.scrollIntoView({ behavior: 'instant' });
+            composeBottomRef.current.scrollIntoView({ behavior: "instant" });
         }
-    }
+    }, []);
     (0, react_1.useEffect)(() => {
         let disposed = false;
         let sub;
-        getContentPersistenceValue(channelId, threadId).loadingPromise.then(pVar => {
+        getContentPersistenceValue(channelId, threadId).loadingPromise.then((pVar) => {
             if (!disposed) {
-                const persistedValue = pVar() ?? '';
+                const persistedValue = pVar() ?? "";
                 contentObs(initialMessage ?? persistedValue);
                 sub = contentObs.subscribe(() => pVar(contentObs()));
                 setTimeout(() => scrollToBottom(), 100);
@@ -85,19 +85,19 @@ const MessageCompose = (props) => {
             disposed = true;
             sub?.dispose();
         };
-    }, [channelId, threadId]);
+    }, [channelId, threadId, contentObs, initialMessage, scrollToBottom]);
     (0, react_1.useEffect)(() => {
         const sub = contentObs.subscribe(() => scrollToBottom());
         return () => sub.dispose();
-    }, [contentObs]);
+    }, [contentObs, scrollToBottom]);
     function submitMessage() {
-        const markdown = contentObs() ?? '';
-        contentObs('');
+        const markdown = contentObs() ?? "";
+        contentObs("");
         if (!markdown.trim()) {
             return;
         }
         const userMessage = {
-            messageId: (0, peers_sdk_2.newid)(),
+            messageId: (0, peers_sdk_1.newid)(),
             message: markdown,
             userId: globals_1.me.userId,
             channelId,
@@ -106,10 +106,7 @@ const MessageCompose = (props) => {
         };
         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 })));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "border rounded border-dark-subtle", style: { overflowY: "auto" }, children: [(0, jsx_runtime_1.jsx)(editor_1.MarkdownEditor, { value: contentObs, effects: mdEffects, autoFocus: !!threadId, maxHeight: "50vh" }), (0, jsx_runtime_1.jsx)(BottomControls, { submitMessage: submitMessage, contentObs: contentObs, mdEffects: mdEffects }), (0, jsx_runtime_1.jsx)("div", { ref: composeBottomRef })] }));
 };
 exports.MessageCompose = MessageCompose;
 const BottomControls = (props) => {
@@ -121,14 +118,14 @@ const BottomControls = (props) => {
         submitOnEnter(false);
     }
     function onKeyDown(evt) {
-        if (evt.code === 'Enter' && !evt.ctrlKey && !evt.shiftKey && !evt.altKey && !evt.metaKey) {
+        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)) {
+        else if (evt.code === "Enter" && (evt.ctrlKey || evt.metaKey)) {
             if (!submitOnEnter()) {
                 submitMessage();
                 evt.preventDefault();
@@ -137,27 +134,19 @@ const BottomControls = (props) => {
         }
     }
     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" }))))));
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { className: "float-end small", children: [(0, jsx_runtime_1.jsxs)("span", { className: "small", hidden: isMobile(), children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", id: "sendOnEnter", checked: !!submitOnEnter(), onChange: (evt) => submitOnEnter(evt.target.checked) }), " ", "Send on Enter"] }), "\u00A0\u00A0", content.trim()?.length === 0 ? ((0, jsx_runtime_1.jsxs)("button", { className: "btn btn-sm btn-outline", type: "button", disabled: true, children: ["Send \u00A0", (0, jsx_runtime_1.jsx)("i", { className: "bi bi-send-fill" })] })) : ((0, jsx_runtime_1.jsxs)("button", { className: "btn btn-sm btn-success", type: "button", onClick: props.submitMessage, children: ["Send \u00A0", (0, jsx_runtime_1.jsx)("i", { className: "bi bi-send-fill" })] }))] }) }));
 };
 function isMobile() {
-    if (navigator?.userAgentData?.mobile) {
+    const nav = navigator;
+    if (nav.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);
+    const legacyWindow = window;
+    ((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 || legacyWindow.opera || "");
     return check;
 }

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

@@ -1,10 +1,9 @@
-import React from 'react';
-import { IMessage } from "@peers-app/peers-sdk";
+import { type 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 declare const MessageDisplay: (props: IProps) => import("react/jsx-runtime").JSX.Element;
 export {};