@streamplace/components 0.7.18 → 0.7.21

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

@@ -0,0 +1,319 @@
+"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) => {
+            // our fake system user "did"
+            if (msg.author.did === "did:sys:system")
+                return acc;
+            if (acc.has(msg.author.handle))
+                return acc;
+            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

@@ -0,0 +1,87 @@
+"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

@@ -0,0 +1,150 @@
+"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 react_native_gesture_handler_1 = require("react-native-gesture-handler");
+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.Ellipsis, { 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_gesture_handler_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

@@ -0,0 +1,35 @@
+"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

@@ -0,0 +1,42 @@
+"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));
+        }) }));
+}