@streamplace/components 0.7.14 → 0.7.17

package/dist/components/chat/chat-box.js

@@ -1,314 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ChatBox = ChatBox;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = tslib_1.__importDefault(require("@emoji-mart/react"));
-const lucide_react_native_1 = require("lucide-react-native");
-const react_2 = require("react");
-const react_native_1 = require("react-native");
-const __1 = require("../../");
-const atoms_1 = require("../../lib/theme/atoms");
-const xrpc_1 = require("../../streamplace-store/xrpc");
-const textarea_1 = require("../ui/textarea");
-const chat_message_1 = require("./chat-message");
-const emoji_suggestions_1 = require("./emoji-suggestions");
-const mention_suggestions_1 = require("./mention-suggestions");
-const COOL_EMOJI_LIST = [
-    ..."😀🥸😍😘😁🥸😆🥸😜🥸😂😅🥸🙂🤫😱🥸🤣😗😄🥸😎🤓😲😯😰🥸😥🥸😣🥸😞😓🥸😩😩🥸😤🥱",
-];
-function ChatBox({ isPopout, chatBoxStyle, emojiData, setIsChatVisible, }) {
-    const [submitting, setSubmitting] = (0, react_2.useState)(false);
-    const [message, setMessage] = (0, react_2.useState)("");
-    const [showSuggestions, setShowSuggestions] = (0, react_2.useState)(false);
-    const [showEmojiSuggestions, setShowEmojiSuggestions] = (0, react_2.useState)(false);
-    const [showEmojiSelector, setShowEmojiSelector] = (0, react_2.useState)(false);
-    const [emojiIconIndex, setEmojiIconIndex] = (0, react_2.useState)(Math.floor(Math.random() * COOL_EMOJI_LIST.length));
-    const [highlightedIndex, setHighlightedIndex] = (0, react_2.useState)(0);
-    const [filteredAuthors, setFilteredAuthors] = (0, react_2.useState)(new Map());
-    const [filteredEmojis, setFilteredEmojis] = (0, react_2.useState)([]);
-    let linfo = (0, __1.useLivestream)();
-    const chat = (0, __1.useChat)();
-    const createChatMessage = (0, __1.useCreateChatMessage)();
-    const replyTo = (0, __1.useReplyToMessage)();
-    const setReplyToMessage = (0, __1.useSetReplyToMessage)();
-    const textAreaRef = (0, react_2.useRef)(null);
-    // are we logged in?
-    let agent = (0, xrpc_1.usePDSAgent)();
-    if (!agent?.did) {
-        (0, jsx_runtime_1.jsx)(__1.View, { style: [atoms_1.layout.flex.row, atoms_1.layout.flex.alignCenter, atoms_1.gap.all[2]], children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Log in to chat." }) });
-    }
-    const authors = (0, react_2.useMemo)(() => {
-        if (!chat)
-            return null;
-        return chat.reduce((acc, msg) => {
-            acc.set(msg.author.handle, msg.chatProfile);
-            return acc;
-        }, new Map());
-    }, [chat]);
-    const handleMentionSelect = (handle) => {
-        const beforeAt = message.slice(0, message.lastIndexOf("@"));
-        setMessage(`${beforeAt}@${handle} `);
-        setShowSuggestions(false);
-    };
-    const handleEmojiSelect = (emoji) => {
-        const beforeColon = message.slice(0, message.lastIndexOf(":"));
-        setMessage(`${beforeColon}${emoji.skins[0]?.native} `);
-        setShowEmojiSuggestions(false);
-    };
-    const updateSuggestions = (text) => {
-        // Handle mentions
-        const atIndex = text.lastIndexOf("@");
-        if (atIndex !== -1 && authors) {
-            const searchText = text.slice(atIndex + 1).toLowerCase();
-            const filteredAuthorsMap = new Map(Array.from(authors.entries()).filter(([handle]) => handle.toLowerCase().includes(searchText)));
-            setFilteredAuthors(filteredAuthorsMap);
-            setHighlightedIndex(0);
-            setShowSuggestions(filteredAuthorsMap.size > 0);
-            setShowEmojiSuggestions(false);
-        }
-        else {
-            setShowSuggestions(false);
-        }
-        const colonIndex = text.lastIndexOf(":");
-        if (colonIndex !== -1) {
-            const searchText = text.slice(colonIndex + 1).toLowerCase();
-            if (searchText.length > 0) {
-                const aliasMatches = Object.entries(emojiData.aliases)
-                    .map(([alias, emojiId]) => {
-                    const aliasLower = alias.toLowerCase();
-                    if (aliasLower === searchText) {
-                        return { emojiId, alias, matchType: 0, index: 0 };
-                    }
-                    else if (aliasLower.startsWith(searchText)) {
-                        return { emojiId, alias, matchType: 1, index: 0 };
-                    }
-                    else if (aliasLower.includes(searchText)) {
-                        return {
-                            emojiId,
-                            alias,
-                            matchType: 2,
-                            index: aliasLower.indexOf(searchText),
-                        }; // includes
-                    }
-                    return null;
-                })
-                    .filter(Boolean);
-                // Map emojiId to best alias match info
-                const bestAliasMatch = {};
-                for (const match of aliasMatches) {
-                    if (!match)
-                        continue;
-                    const prev = bestAliasMatch[match.emojiId];
-                    if (!prev ||
-                        match?.matchType < prev.matchType ||
-                        (match.matchType === prev.matchType && match.index < prev.index)) {
-                        bestAliasMatch[match.emojiId] = match;
-                    }
-                }
-                // Collect all matching emojis by id, name, keywords, or alias
-                const allEmojis = Object.values(emojiData.emojis);
-                const filtered = allEmojis
-                    .map((emoji) => {
-                    // Check alias match
-                    const aliasMatch = bestAliasMatch[emoji.id];
-                    if (aliasMatch) {
-                        return {
-                            emoji,
-                            sort: [aliasMatch.matchType, aliasMatch.index, 0],
-                        };
-                    }
-                    // Check id, name, keywords
-                    if (emoji.id.toLowerCase() === searchText) {
-                        return { emoji, sort: [3, 0, 0] }; // exact id
-                    }
-                    if (emoji.id.toLowerCase().startsWith(searchText)) {
-                        return { emoji, sort: [4, 0, 0] }; // startsWith id
-                    }
-                    if (emoji.id.toLowerCase().includes(searchText)) {
-                        return {
-                            emoji,
-                            sort: [5, emoji.id.toLowerCase().indexOf(searchText), 0],
-                        }; // includes id
-                    }
-                    if (emoji.name.toLowerCase().includes(searchText)) {
-                        return {
-                            emoji,
-                            sort: [6, emoji.name.toLowerCase().indexOf(searchText), 0],
-                        };
-                    }
-                    if (emoji.keywords &&
-                        emoji.keywords.some((keyword) => keyword.toLowerCase().includes(searchText))) {
-                        return { emoji, sort: [7, 0, 0] };
-                    }
-                    return null;
-                })
-                    .filter(Boolean)
-                    // Remove duplicates by emoji id (keep best match)
-                    .reduce((acc, curr) => {
-                    if (!acc.find((e) => e.emoji.id === curr.emoji.id)) {
-                        acc.push(curr);
-                    }
-                    return acc;
-                }, [])
-                    // Sort by alias match type, then position, then fallback
-                    .sort((a, b) => {
-                    for (let i = 0; i < a.sort.length; ++i) {
-                        if (a.sort[i] !== b.sort[i])
-                            return a.sort[i] - b.sort[i];
-                    }
-                    return 0;
-                })
-                    .slice(0, 10) // Limit to 10 results
-                    .map((entry) => entry.emoji);
-                setFilteredEmojis(filtered);
-                setHighlightedIndex(0);
-                setShowEmojiSuggestions(filtered.length > 0);
-                setShowSuggestions(false);
-            }
-            else {
-                setShowEmojiSuggestions(false);
-            }
-        }
-        else {
-            setShowEmojiSuggestions(false);
-        }
-        // If neither mention nor emoji, hide all suggestions
-        if (atIndex === -1 && colonIndex === -1) {
-            setShowSuggestions(false);
-            setShowEmojiSuggestions(false);
-        }
-    };
-    const submit = () => {
-        if (!message.trim())
-            return;
-        setMessage("");
-        setReplyToMessage(null);
-        setSubmitting(true);
-        createChatMessage({
-            text: message,
-            reply: replyTo || undefined,
-        });
-        setSubmitting(false);
-        // if we press "send" button, we want the same action as pressing "Enter"
-        // if we're already focused no need to do extra work
-        if (textAreaRef.current && !textAreaRef.current.isFocused()) {
-            textAreaRef.current.focus();
-            requestAnimationFrame(() => {
-                textAreaRef.current?.focus();
-            });
-        }
-    };
-    (0, react_2.useEffect)(() => {
-        if (replyTo && textAreaRef.current) {
-            textAreaRef.current.focus();
-        }
-    }, [replyTo]);
-    return ((0, jsx_runtime_1.jsxs)(__1.View, { style: [atoms_1.layout.flex.column, atoms_1.flex.shrink[1], atoms_1.gap.all[2]], children: [replyTo && ((0, jsx_runtime_1.jsxs)(__1.View, { style: [
-                    atoms_1.layout.flex.row,
-                    atoms_1.layout.flex.alignCenter,
-                    atoms_1.layout.flex.spaceBetween,
-                    atoms_1.pl[2],
-                    atoms_1.pr[6],
-                    atoms_1.mr[6],
-                    atoms_1.mb[2],
-                    atoms_1.py[1],
-                    atoms_1.bg.gray[800],
-                    { borderRadius: 16 },
-                ], children: [(0, jsx_runtime_1.jsx)(chat_message_1.RenderChatMessage, { item: replyTo, showReply: false, userCache: authors || new Map() }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => setReplyToMessage(null), children: (0, jsx_runtime_1.jsx)(__1.View, { style: [
-                                atoms_1.layout.flex.row,
-                                atoms_1.layout.flex.alignCenter,
-                                atoms_1.layout.flex.justifyCenter,
-                                atoms_1.h[12],
-                                atoms_1.w[12],
-                                atoms_1.bg.gray[600],
-                                { borderRadius: 999 },
-                            ], children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.X, { size: 24 }) }) })] })), showEmojiSelector && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: {
-                            position: "absolute",
-                            top: 0,
-                            left: 0,
-                            right: 0,
-                            bottom: 0,
-                            zIndex: 200,
-                        }, onPress: () => setShowEmojiSelector(false) }), (0, jsx_runtime_1.jsx)(__1.View, { style: {
-                            position: "absolute",
-                            bottom: "100%",
-                            left: 0,
-                            zIndex: 2001,
-                        }, children: (0, jsx_runtime_1.jsx)(react_1.default, { data: emojiData, onEmojiSelect: (e) => setMessage(message + e.native) }) })] })), (0, jsx_runtime_1.jsxs)(__1.View, { style: [atoms_1.layout.flex.row, atoms_1.layout.flex.alignCenter, atoms_1.gap.all[2]], children: [(0, jsx_runtime_1.jsx)(textarea_1.Textarea, { ref: textAreaRef, numberOfLines: 1, value: message, enterKeyHint: "send", onSubmitEditing: (e) => {
-                            e.preventDefault();
-                            submit();
-                        }, multiline: false, onChangeText: (text) => {
-                            setMessage(text);
-                            updateSuggestions(text);
-                        }, onKeyPress: (k) => {
-                            if (k.nativeEvent.key === "Enter") {
-                                if (showSuggestions) {
-                                    k.preventDefault();
-                                    const handles = Array.from(filteredAuthors.keys());
-                                    if (handles.length > 0) {
-                                        handleMentionSelect(handles[highlightedIndex]);
-                                    }
-                                }
-                                else if (showEmojiSuggestions) {
-                                    k.preventDefault();
-                                    if (filteredEmojis.length > 0) {
-                                        handleEmojiSelect(filteredEmojis[highlightedIndex]);
-                                    }
-                                }
-                                else {
-                                    k.preventDefault();
-                                    submit();
-                                }
-                            }
-                            else if (k.nativeEvent.key === "ArrowUp") {
-                                if (showSuggestions || showEmojiSuggestions) {
-                                    k.preventDefault();
-                                    setHighlightedIndex((prev) => Math.max(prev - 1, 0));
-                                }
-                            }
-                            else if (k.nativeEvent.key === "ArrowDown") {
-                                if (showSuggestions) {
-                                    k.preventDefault();
-                                    setHighlightedIndex((prev) => Math.min(prev + 1, Array.from(filteredAuthors.keys()).length - 1));
-                                }
-                                else if (showEmojiSuggestions) {
-                                    k.preventDefault();
-                                    setHighlightedIndex((prev) => Math.min(prev + 1, filteredEmojis.length - 1));
-                                }
-                            }
-                            else if (k.nativeEvent.key === "Escape") {
-                                if (showSuggestions || showEmojiSuggestions) {
-                                    k.preventDefault();
-                                    setShowSuggestions(false);
-                                    setShowEmojiSuggestions(false);
-                                }
-                            }
-                        }, style: [chatBoxStyle], 
-                        // "submit" won't blur on enter
-                        submitBehavior: "submit", placeholder: "Type a message..." }), (0, jsx_runtime_1.jsx)(__1.Button, { disabled: submitting, variant: "secondary", style: { borderRadius: 16, height: 36, minWidth: 80 }, onPress: submit, children: submitting ? (0, jsx_runtime_1.jsx)(__1.Loader, {}) : "Send" })] }), showSuggestions && ((0, jsx_runtime_1.jsx)(mention_suggestions_1.MentionSuggestions, { authors: filteredAuthors || new Map(), highlightedIndex: highlightedIndex, onSelect: handleMentionSelect })), showEmojiSuggestions && ((0, jsx_runtime_1.jsx)(emoji_suggestions_1.EmojiSuggestions, { emojis: filteredEmojis, highlightedIndex: highlightedIndex, onSelect: handleEmojiSelect })), react_native_1.Platform.OS === "web" && ((0, jsx_runtime_1.jsxs)(__1.View, { style: [
-                    atoms_1.layout.flex.row,
-                    atoms_1.mb[2],
-                    atoms_1.gap.all[2],
-                    { justifyContent: "flex-end" },
-                ], children: [(0, jsx_runtime_1.jsx)(__1.Button, { variant: "secondary", style: { borderRadius: 16, height: 36, maxWidth: 36 }, onPress: () => {
-                            // if the last character is not @, add it
-                            !message.endsWith("@") && setMessage(message + "@");
-                            // get all the text after the last @
-                            const atIndex = message.lastIndexOf("@");
-                            const searchText = message.slice(atIndex + 1).toLowerCase();
-                            updateSuggestions(searchText);
-                            setShowSuggestions(true);
-                            // focus the textarea
-                            textAreaRef.current?.focus();
-                        }, children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.AtSignIcon, { size: 20, color: "white" }) }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onHoverOut: () => {
-                            setEmojiIconIndex(Math.floor(Math.random() * COOL_EMOJI_LIST.length));
-                        }, children: (0, jsx_runtime_1.jsx)(__1.Button, { variant: "secondary", style: { borderRadius: 16, height: 36, maxWidth: 36 }, onPress: () => setShowEmojiSelector(!showEmojiSelector), children: (0, jsx_runtime_1.jsx)(__1.Text, { children: COOL_EMOJI_LIST[emojiIconIndex] }) }) }), !isPopout && ((0, jsx_runtime_1.jsx)(__1.Button, { variant: "secondary", style: { borderRadius: 16, height: 36, maxWidth: 36 }, onPress: () => {
-                            if (!linfo)
-                                return;
-                            const u = new URL(window.location.href);
-                            u.pathname = `/chat-popout/${linfo?.author?.did}`;
-                            window.open(u.toString(), "_blank", "popup=true");
-                            setIsChatVisible?.(false);
-                        }, children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.ExternalLink, { size: 16 }) }))] }))] }));
-}

package/dist/components/chat/chat-message.js

@@ -1,87 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RenderChatMessage = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const facet_1 = require("../../lib/facet");
-const atoms_1 = require("../../lib/theme/atoms");
-const ui_1 = require("../ui");
-const livestream_store_1 = require("../../livestream-store");
-const text_1 = require("../ui/text");
-const getRgbColor = (color) => color ? `rgb(${color.red}, ${color.green}, ${color.blue})` : ui_1.colors.gray[500];
-const segmentedObject = (obj, index, userCache) => {
-    if (obj.features && obj.features.length > 0) {
-        let ftr = obj.features[0];
-        // afaik there shouldn't be a case where facets overlap, at least currently
-        if (ftr.$type === "app.bsky.richtext.facet#link") {
-            let linkftr = ftr;
-            return ((0, jsx_runtime_1.jsx)(text_1.Text, { style: [{ color: ui_1.atoms.colors.ios.systemBlue, cursor: "pointer" }], onPress: () => react_native_1.Linking.openURL(linkftr.uri || ""), children: obj.text }, `mention-${index}`));
-        }
-        else if (ftr.$type === "app.bsky.richtext.facet#mention") {
-            let mtnftr = ftr;
-            const profile = userCache?.[mtnftr.did];
-            return ((0, jsx_runtime_1.jsx)(text_1.Text, { style: [
-                    {
-                        cursor: "pointer",
-                        color: getRgbColor(profile?.color),
-                    },
-                ], onPress: () => react_native_1.Linking.openURL(`https://bsky.app/profile/${mtnftr.did || ""}`), children: obj.text }, `mention-${index}`));
-        }
-    }
-    else {
-        return (0, jsx_runtime_1.jsx)(text_1.Text, { children: obj.text }, `text-${index}`);
-    }
-};
-const RichTextMessage = ({ text, facets, }) => {
-    if (!facets?.length)
-        return (0, jsx_runtime_1.jsx)(text_1.Text, { children: text });
-    const userCache = (0, livestream_store_1.useLivestreamStore)((state) => state.authors);
-    let segs = (0, facet_1.segmentize)(text, facets);
-    return segs.map((seg, i) => segmentedObject(seg, i, userCache));
-};
-exports.RenderChatMessage = (0, react_1.memo)(function RenderChatMessage({ item, showReply = true, showTime = true, }) {
-    const formatTime = (0, react_1.useCallback)((dateString) => {
-        return new Date(dateString).toLocaleString(undefined, {
-            hour: "2-digit",
-            minute: "2-digit",
-            hour12: false,
-        });
-    }, []);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [item.replyTo && showReply && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
-                    atoms_1.gap.all[2],
-                    ui_1.layout.flex.row,
-                    { minWidth: 0, maxWidth: "100%" },
-                    atoms_1.borders.left.width.medium,
-                    atoms_1.borders.left.color.gray[700],
-                    atoms_1.ml[4],
-                    atoms_1.pl[4],
-                    atoms_1.opacity[80],
-                ], children: (0, jsx_runtime_1.jsxs)(text_1.Text, { numberOfLines: 1, style: [
-                        atoms_1.flex.shrink[1],
-                        atoms_1.mr[4],
-                        { minWidth: 0, overflow: "hidden" },
-                    ], children: [(0, jsx_runtime_1.jsxs)(text_1.Text, { style: {
-                                color: getRgbColor(item.replyTo.chatProfile.color),
-                                fontWeight: "thin",
-                            }, children: ["@", item.replyTo.author.handle] }), " ", (0, jsx_runtime_1.jsx)(text_1.Text, { style: {
-                                color: ui_1.colors.gray[300],
-                                fontStyle: "italic",
-                            }, children: item.replyTo.record.text })] }) })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
-                    atoms_1.gap.all[2],
-                    ui_1.layout.flex.row,
-                    { minWidth: 0, maxWidth: "100%" },
-                ], children: [showTime && ((0, jsx_runtime_1.jsx)(text_1.Text, { style: {
-                            fontVariant: ["tabular-nums"],
-                            color: ui_1.colors.gray[400],
-                        }, children: formatTime(item.record.createdAt) })), (0, jsx_runtime_1.jsxs)(text_1.Text, { weight: "bold", color: "default", style: [atoms_1.flex.shrink[1], { minWidth: 0, overflow: "hidden" }], children: [(0, jsx_runtime_1.jsxs)(text_1.Text, { style: [
-                                    {
-                                        cursor: "pointer",
-                                        color: getRgbColor(item.chatProfile?.color),
-                                    },
-                                ], children: ["@", item.author.handle] }), ":", " ", (0, jsx_runtime_1.jsx)(RichTextMessage, { text: item.record.text, facets: item.record.facets || [] })] })] })] }));
-}, (prevProps, nextProps) => {
-    return (prevProps.item.author.handle === nextProps.item.author.handle &&
-        prevProps.item.record.text === nextProps.item.record.text &&
-        prevProps.item.uri === nextProps.item.uri);
-});

package/dist/components/chat/chat.js

@@ -1,149 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Chat = Chat;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const lucide_react_native_1 = require("lucide-react-native");
-const react_1 = require("react");
-const react_native_1 = require("react-native");
-const ReanimatedSwipeable_1 = tslib_1.__importDefault(require("react-native-gesture-handler/ReanimatedSwipeable"));
-const react_native_reanimated_1 = tslib_1.__importStar(require("react-native-reanimated"));
-const __1 = require("../../");
-const atoms_1 = require("../../lib/theme/atoms");
-const chat_message_1 = require("./chat-message");
-const mod_view_1 = require("./mod-view");
-function RightAction(prog, drag) {
-    const styleAnimation = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
-        return {
-            transform: [{ translateX: drag.value + 25 }],
-        };
-    });
-    return ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [styleAnimation], children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.Reply, { color: "white" }) }));
-}
-function LeftAction(prog, drag) {
-    const styleAnimation = (0, react_native_reanimated_1.useAnimatedStyle)(() => {
-        return {
-            transform: [{ translateX: drag.value - 25 }],
-        };
-    });
-    return ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [styleAnimation], children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.ShieldEllipsis, { color: "white" }) }));
-}
-// ios/android, 25, else 100 msgs
-const SHOWN_MSGS = react_native_1.Platform.OS === "ios" || react_native_1.Platform.OS === "android" ? 25 : 100;
-const keyExtractor = (item, index) => {
-    return `${item.uri}`;
-};
-// Actions bar for larger screens
-const ActionsBar = (0, react_1.memo)(({ item, visible, hoverTimeoutRef, }) => {
-    const setReply = (0, __1.useSetReplyToMessage)();
-    const setModMsg = (0, __1.usePlayerStore)((state) => state.setModMessage);
-    if (!visible)
-        return null;
-    return ((0, jsx_runtime_1.jsxs)(__1.View, { style: [
-            {
-                position: "absolute",
-                top: -14,
-                right: 8,
-                flexDirection: "row",
-                backgroundColor: "rgba(180,180,180, 0.5)",
-                borderRadius: 6,
-                borderWidth: 1,
-                padding: 1,
-                gap: 4,
-                zIndex: 10,
-                maxWidth: 120,
-                flexShrink: 0,
-            },
-        ], children: [(0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => setReply(item), style: [
-                    {
-                        padding: 6,
-                        borderRadius: 4,
-                        backgroundColor: "rgba(255, 255, 255, 0.1)",
-                    },
-                ], onHoverIn: () => {
-                    // Keep the actions bar visible when hovering over it
-                    if (hoverTimeoutRef.current) {
-                        clearTimeout(hoverTimeoutRef.current);
-                        hoverTimeoutRef.current = null;
-                    }
-                }, children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.Reply, { color: "white", size: 16 }) }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => setModMsg(item), style: [
-                    {
-                        padding: 6,
-                        borderRadius: 4,
-                        backgroundColor: "rgba(255, 255, 255, 0.1)",
-                    },
-                ], onHoverIn: () => {
-                    // Keep the actions bar visible when hovering over it
-                    if (hoverTimeoutRef.current) {
-                        clearTimeout(hoverTimeoutRef.current);
-                        hoverTimeoutRef.current = null;
-                    }
-                }, children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.Ellipsis, { color: "white", size: 16 }) })] }));
-});
-const ChatLine = (0, react_1.memo)(({ item, canModerate, }) => {
-    const setReply = (0, __1.useSetReplyToMessage)();
-    const setModMsg = (0, __1.usePlayerStore)((state) => state.setModMessage);
-    const swipeableRef = (0, react_1.useRef)(null);
-    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
-    const hoverTimeoutRef = (0, react_1.useRef)(null);
-    const handleHoverIn = () => {
-        if (hoverTimeoutRef.current) {
-            clearTimeout(hoverTimeoutRef.current);
-            hoverTimeoutRef.current = null;
-        }
-        setIsHovered(true);
-    };
-    const handleHoverOut = () => {
-        hoverTimeoutRef.current = setTimeout(() => {
-            setIsHovered(false);
-        }, 50);
-    };
-    (0, react_1.useEffect)(() => {
-        return () => {
-            if (hoverTimeoutRef.current) {
-                clearTimeout(hoverTimeoutRef.current);
-            }
-        };
-    }, []);
-    if (item.author.did === "did:sys:system") {
-        return ((0, jsx_runtime_1.jsx)(__1.SystemMessage, { timestamp: new Date(item.record.createdAt), title: item.record.text }));
-    }
-    if (react_native_1.Platform.OS === "web") {
-        return ((0, jsx_runtime_1.jsxs)(__1.View, { style: [
-                atoms_1.py[1],
-                atoms_1.px[2],
-                {
-                    position: "relative",
-                    borderRadius: 8,
-                    minWidth: 0,
-                    maxWidth: "100%",
-                },
-                isHovered && atoms_1.bg.gray[950],
-            ], onPointerEnter: handleHoverIn, onPointerLeave: handleHoverOut, children: [(0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: [{ minWidth: 0, maxWidth: "100%" }], children: (0, jsx_runtime_1.jsx)(chat_message_1.RenderChatMessage, { item: item }) }), (0, jsx_runtime_1.jsx)(ActionsBar, { item: item, visible: isHovered, hoverTimeoutRef: hoverTimeoutRef })] }));
-    }
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(ReanimatedSwipeable_1.default, { containerStyle: [atoms_1.py[1]], friction: 2, enableTrackpadTwoFingerGesture: true, rightThreshold: 40, leftThreshold: 40, renderRightActions: react_native_1.Platform.OS === "android" ? undefined : RightAction, renderLeftActions: react_native_1.Platform.OS === "android" ? undefined : LeftAction, overshootFriction: 9, ref: (ref) => {
-                swipeableRef.current = ref;
-            }, onSwipeableOpen: (r) => {
-                if (r === (react_native_1.Platform.OS === "android" ? "right" : "left")) {
-                    setReply(item);
-                }
-                if (r === (react_native_1.Platform.OS === "android" ? "left" : "right")) {
-                    setModMsg(item);
-                }
-                // close this swipeable
-                const swipeable = swipeableRef.current;
-                if (swipeable) {
-                    swipeable.close();
-                }
-            }, children: (0, jsx_runtime_1.jsx)(chat_message_1.RenderChatMessage, { item: item }) }) }));
-});
-function Chat({ shownMessages = SHOWN_MSGS, style: propsStyle, canModerate = false, ...props }) {
-    const chat = (0, __1.useChat)();
-    if (!chat)
-        return ((0, jsx_runtime_1.jsx)(__1.View, { style: [atoms_1.flex.shrink[1], { minWidth: 0, maxWidth: "100%" }], children: (0, jsx_runtime_1.jsx)(__1.Text, { children: "Loading chaat..." }) }));
-    return ((0, jsx_runtime_1.jsxs)(__1.View, { style: [atoms_1.flex.shrink[1], { minWidth: 0, maxWidth: "100%" }].concat(propsStyle || []), children: [(0, jsx_runtime_1.jsx)(react_native_1.FlatList, { style: [
-                    atoms_1.flex.grow[1],
-                    atoms_1.flex.shrink[1],
-                    { minWidth: 0, maxWidth: "100%" },
-                ], data: chat.slice(0, shownMessages), inverted: true, keyExtractor: keyExtractor, renderItem: ({ item, index }) => ((0, jsx_runtime_1.jsx)(ChatLine, { item: item, canModerate: canModerate })), removeClippedSubviews: true, maxToRenderPerBatch: 10, initialNumToRender: 10, updateCellsBatchingPeriod: 50 }), (0, jsx_runtime_1.jsx)(mod_view_1.ModView, {})] }));
-}

package/dist/components/chat/emoji-suggestions.js

@@ -1,35 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EmojiSuggestions = EmojiSuggestions;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("react-native");
-const __1 = require("../..");
-const atoms_1 = require("../../lib/theme/atoms");
-function EmojiSuggestions({ emojis, onSelect, highlightedIndex, }) {
-    if (!emojis || emojis.length === 0) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsx)(__1.View, { style: [
-            atoms_1.bg.gray[800],
-            atoms_1.layout.position.absolute,
-            atoms_1.left[0],
-            atoms_1.right[0],
-            atoms_1.zIndex[50],
-            {
-                bottom: "100%",
-                borderRadius: 8,
-                boxShadow: "0px 4px 6px rgba(0, 0, 0, 0.1)",
-                maxHeight: 200,
-                overflow: "auto",
-            },
-        ], children: emojis.map((emoji, index) => ((0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPress: () => onSelect(emoji), style: [
-                {
-                    padding: 8,
-                    flexDirection: "row",
-                    alignItems: "center",
-                    backgroundColor: index === highlightedIndex
-                        ? "rgba(255, 255, 255, 0.1)"
-                        : "transparent",
-                },
-            ], children: [(0, jsx_runtime_1.jsx)(__1.Text, { style: { fontSize: 16, marginRight: 8 }, children: emoji.skins[0]?.native }), (0, jsx_runtime_1.jsxs)(__1.Text, { style: { color: "white", fontSize: 14 }, children: [(0, jsx_runtime_1.jsxs)(__1.Code, { style: [atoms_1.bg.gray[950]], children: [":", emoji.id, ":"] }), " ", emoji.name] })] }, emoji.id))) }));
-}

package/dist/components/chat/mention-suggestions.js

@@ -1,42 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MentionSuggestions = MentionSuggestions;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_native_1 = require("react-native");
-const __1 = require("../..");
-const atoms_1 = require("../../lib/theme/atoms");
-function MentionSuggestions({ authors, onSelect, highlightedIndex, }) {
-    if (!authors || authors.size === 0) {
-        return null; // No authors to display
-    }
-    const authorHandles = Array.from(authors.keys());
-    return ((0, jsx_runtime_1.jsx)(__1.View, { style: [
-            atoms_1.bg.gray[800],
-            atoms_1.layout.position.absolute,
-            atoms_1.left[0],
-            atoms_1.right[0],
-            atoms_1.zIndex[50],
-            {
-                bottom: "100%",
-                borderRadius: 8,
-                boxShadow: "0px 4px 6px rgba(0, 0, 0, 0.1)",
-            },
-        ], children: authorHandles.map((handle, index) => {
-            let profile = authors.get(handle);
-            return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => onSelect(handle), style: [
-                    {
-                        padding: 8,
-                        flexDirection: "row",
-                        alignItems: "center",
-                        backgroundColor: index === highlightedIndex
-                            ? "rgba(0, 0, 0, 0.1)"
-                            : "rgba(0, 0, 0, 0.5)",
-                    },
-                ], children: (0, jsx_runtime_1.jsxs)(__1.Text, { style: {
-                        color: profile?.color
-                            ? `rgb(${profile.color.red}, ${profile.color.green}, ${profile.color.blue})`
-                            : "black",
-                        fontWeight: "bold",
-                    }, children: ["@", handle] }) }, handle));
-        }) }));
-}