@streamplace/components 0.7.3 → 0.7.7

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

@@ -1,33 +1,44 @@
 "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_1 = require("react");
+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");
-function ChatBox({ isPopout, chatBoxStyle, }) {
-    const [submitting, setSubmitting] = (0, react_1.useState)(false);
-    const [message, setMessage] = (0, react_1.useState)("");
-    const [showSuggestions, setShowSuggestions] = (0, react_1.useState)(false);
-    const [highlightedIndex, setHighlightedIndex] = (0, react_1.useState)(0);
-    const [filteredAuthors, setFilteredAuthors] = (0, react_1.useState)(new Map());
+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_1.useRef)(null);
+    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_1.useMemo)(() => {
+    const authors = (0, react_2.useMemo)(() => {
         if (!chat)
             return null;
         return chat.reduce((acc, msg) => {
@@ -40,17 +51,133 @@ function ChatBox({ isPopout, chatBoxStyle, }) {
         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) {
+        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);
-            return;
         }
-        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);
+        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())
@@ -64,7 +191,7 @@ function ChatBox({ isPopout, chatBoxStyle, }) {
         });
         setSubmitting(false);
     };
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         if (replyTo && textAreaRef.current) {
             textAreaRef.current.focus();
         }
@@ -73,10 +200,11 @@ function ChatBox({ isPopout, chatBoxStyle, }) {
                     atoms_1.layout.flex.row,
                     atoms_1.layout.flex.alignCenter,
                     atoms_1.layout.flex.spaceBetween,
-                    atoms_1.h[12],
                     atoms_1.pl[2],
-                    atoms_1.pr[10],
+                    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: [
@@ -87,7 +215,19 @@ function ChatBox({ isPopout, chatBoxStyle, }) {
                                 atoms_1.w[12],
                                 atoms_1.bg.gray[600],
                                 { borderRadius: 999 },
-                            ], children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.X, { size: 24 }) }) })] })), (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: submit, multiline: false, onChangeText: (text) => {
+                            ], 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: submit, multiline: false, onChangeText: (text) => {
                             setMessage(text);
                             updateSuggestions(text);
                         }, onKeyPress: (k) => {
@@ -99,14 +239,62 @@ function ChatBox({ isPopout, chatBoxStyle, }) {
                                         handleMentionSelect(handles[highlightedIndex]);
                                     }
                                 }
-                                else
+                                else if (showEmojiSuggestions) {
+                                    k.preventDefault();
+                                    if (filteredEmojis.length > 0) {
+                                        handleEmojiSelect(filteredEmojis[highlightedIndex]);
+                                    }
+                                }
+                                else {
                                     submit();
+                                }
                             }
                             else if (k.nativeEvent.key === "ArrowUp") {
-                                setHighlightedIndex((prev) => Math.max(prev - 1, 0));
+                                if (showSuggestions || showEmojiSuggestions) {
+                                    k.preventDefault();
+                                    setHighlightedIndex((prev) => Math.max(prev - 1, 0));
+                                }
                             }
                             else if (k.nativeEvent.key === "ArrowDown") {
-                                setHighlightedIndex((prev) => Math.min(prev + 1, Array.from(filteredAuthors.keys()).length - 1));
+                                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));
+                                }
                             }
-                        }, style: [chatBoxStyle] }), (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 || [], highlightedIndex: highlightedIndex, onSelect: handleMentionSelect }))] }));
+                            else if (k.nativeEvent.key === "Escape") {
+                                if (showSuggestions || showEmojiSuggestions) {
+                                    k.preventDefault();
+                                    setShowSuggestions(false);
+                                    setShowEmojiSuggestions(false);
+                                }
+                            }
+                        }, style: [chatBoxStyle] }), (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

@@ -9,7 +9,7 @@ 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})` : "$accentColor";
+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];
@@ -21,7 +21,6 @@ const segmentedObject = (obj, index, userCache) => {
         else if (ftr.$type === "app.bsky.richtext.facet#mention") {
             let mtnftr = ftr;
             const profile = userCache?.[mtnftr.did];
-            console.log(profile, mtnftr.did, userCache);
             return ((0, jsx_runtime_1.jsx)(text_1.Text, { style: [
                     {
                         cursor: "pointer",
@@ -62,11 +61,11 @@ exports.RenderChatMessage = (0, react_1.memo)(function RenderChatMessage({ item,
                                 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.atoms.colors.gray[300],
+                                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, atoms_1.w.percent[100]], children: [showTime && ((0, jsx_runtime_1.jsx)(text_1.Text, { style: {
                             fontVariant: ["tabular-nums"],
-                            color: ui_1.atoms.colors.gray[300],
+                            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]], children: [(0, jsx_runtime_1.jsxs)(text_1.Text, { style: [
                                     {
                                         cursor: "pointer",
@@ -75,5 +74,6 @@ exports.RenderChatMessage = (0, react_1.memo)(function RenderChatMessage({ item,
                                 ], 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.record.text === nextProps.item.record.text &&
+        prevProps.item.uri === nextProps.item.uri);
 });

package/dist/components/chat/chat.js

@@ -28,15 +28,93 @@ function LeftAction(prog, drag) {
     });
     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" }) }));
 }
-const SHOWN_MSGS = react_native_1.Platform.OS === "android" || react_native_1.Platform.OS === "ios" ? 100 : 25;
+// 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}`;
 };
-const ChatLine = (0, react_1.memo)(({ item }) => {
+// 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,
+            },
+        ], 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);
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onLongPress: () => setModMsg(item), children: (0, jsx_runtime_1.jsx)(ReanimatedSwipeable_1.default, { containerStyle: [atoms_1.py[1]], friction: 2, enableTrackpadTwoFingerGesture: true, rightThreshold: 40, renderRightActions: react_native_1.Platform.OS === "android" ? undefined : RightAction, renderLeftActions: react_native_1.Platform.OS === "android" ? undefined : LeftAction, overshootFriction: 9, ref: (ref) => {
+    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 },
+                isHovered && atoms_1.bg.gray[950],
+            ], onPointerEnter: handleHoverIn, onPointerLeave: handleHoverOut, children: [(0, jsx_runtime_1.jsx)(react_native_1.Pressable, { 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")) {
@@ -52,9 +130,9 @@ const ChatLine = (0, react_1.memo)(({ item }) => {
                 }
             }, children: (0, jsx_runtime_1.jsx)(chat_message_1.RenderChatMessage, { item: item }) }) }));
 });
-function Chat({ shownMessages = SHOWN_MSGS, style: propsStyle, ...props }) {
+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]], 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]].concat(propsStyle || []), children: [(0, jsx_runtime_1.jsx)(react_native_1.FlatList, { style: [atoms_1.flex.grow[1], atoms_1.flex.shrink[1], atoms_1.w.percent[100]], data: chat, inverted: true, keyExtractor: keyExtractor, renderItem: ({ item, index }) => (0, jsx_runtime_1.jsx)(ChatLine, { item: item }), removeClippedSubviews: true, maxToRenderPerBatch: 10, initialNumToRender: 10, updateCellsBatchingPeriod: 50 }), (0, jsx_runtime_1.jsx)(mod_view_1.ModView, {})] }));
+    return ((0, jsx_runtime_1.jsxs)(__1.View, { style: [atoms_1.flex.shrink[1]].concat(propsStyle || []), children: [(0, jsx_runtime_1.jsx)(react_native_1.FlatList, { style: [atoms_1.flex.grow[1], atoms_1.flex.shrink[1], atoms_1.w.percent[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/mod-view.js

@@ -1,25 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModView = void 0;
+exports.ReportButton = ReportButton;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const dropdown_menu_1 = require("@rn-primitives/dropdown-menu");
 const react_1 = require("react");
 const atoms_1 = require("../../lib/theme/atoms");
 const player_store_1 = require("../../player-store");
 const block_1 = require("../../streamplace-store/block");
 const xrpc_1 = require("../../streamplace-store/xrpc");
+const react_native_1 = require("react-native");
+const streamplace_store_1 = require("../../streamplace-store");
 const ui_1 = require("../ui");
-const chat_message_1 = require("./chat-message");
+const BSKY_FRONTEND_DOMAIN = "bsky.app";
 exports.ModView = (0, react_1.forwardRef)(() => {
     const triggerRef = (0, react_1.useRef)(null);
     const message = (0, player_store_1.usePlayerStore)((state) => state.modMessage);
     let agent = (0, xrpc_1.usePDSAgent)();
-    let createBlockRecord = (0, block_1.useCreateBlockRecord)();
+    let [messageRemoved, setMessageRemoved] = (0, react_1.useState)(false);
+    let { createBlock, isLoading: isBlockLoading } = (0, block_1.useCreateBlockRecord)();
+    let { createHideChat, isLoading: isHideLoading } = (0, block_1.useCreateHideChatRecord)();
+    // get the channel did
+    const channelId = (0, player_store_1.usePlayerStore)((state) => state.src);
+    // get the logged in user's identity
+    const handle = (0, streamplace_store_1.useStreamplaceStore)((state) => state.handle);
     if (!agent?.did) {
         (0, jsx_runtime_1.jsx)(ui_1.View, { style: [ui_1.layout.flex.row, ui_1.layout.flex.alignCenter, atoms_1.gap.all[2]], children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Log in to submit mod actions" }) });
     }
     (0, react_1.useEffect)(() => {
         if (message) {
             console.log("opening mod view");
+            setMessageRemoved(false);
             triggerRef.current?.open();
         }
         else {
@@ -27,10 +38,50 @@ exports.ModView = (0, react_1.forwardRef)(() => {
             triggerRef.current?.close();
         }
     }, [message]);
-    return ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuTrigger, { ref: triggerRef, children: (0, jsx_runtime_1.jsx)(ui_1.View, {}) }), (0, jsx_runtime_1.jsx)(ui_1.ResponsiveDropdownMenuContent, { children: message && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { children: (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { children: (0, jsx_runtime_1.jsx)(ui_1.View, { style: [ui_1.layout.flex.column, atoms_1.mr[5], { gap: 6 }], children: (0, jsx_runtime_1.jsx)(chat_message_1.RenderChatMessage, { item: message }) }) }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: `Moderation actions`, children: (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { disabled: message.author.did === agent?.did, onPress: () => {
-                                    console.log("Creating block record");
-                                    createBlockRecord(message.author.did)
-                                        .then((r) => console.log(r))
-                                        .catch((e) => console.error(e));
-                                }, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { color: "destructive", children: message.author.did === agent?.did ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Block yourself (you can't block yourself)" })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Block user @", message.author.handle, " from this channel"] })) }) }) })] })) })] }));
+    return ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenu, { style: [ui_1.layout.flex.row, ui_1.layout.flex.alignCenter, atoms_1.gap.all[2], atoms_1.w[80]], children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuTrigger, { ref: triggerRef, children: (0, jsx_runtime_1.jsx)(ui_1.View, {}) }), (0, jsx_runtime_1.jsx)(ui_1.ResponsiveDropdownMenuContent, { children: message && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { children: (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { children: (0, jsx_runtime_1.jsx)(ui_1.View, { style: [
+                                        ui_1.layout.flex.column,
+                                        atoms_1.mr[5],
+                                        { gap: 6, maxWidth: "100%" },
+                                    ], children: (0, jsx_runtime_1.jsxs)(ui_1.Text, { style: {
+                                            fontVariant: ["tabular-nums"],
+                                            color: ui_1.atoms.colors.gray[300],
+                                        }, children: [new Date(message.record.createdAt).toLocaleTimeString([], {
+                                                hour: "2-digit",
+                                                minute: "2-digit",
+                                                hour12: false,
+                                            }), " ", "@", message.author.handle, ": ", message.record.text] }) }) }) }), channelId === handle && ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuGroup, { title: `Moderation actions`, children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { disabled: isHideLoading || messageRemoved, onPress: () => {
+                                        if (isHideLoading || messageRemoved)
+                                            return;
+                                        createHideChat(message.uri)
+                                            .then((r) => setMessageRemoved(true))
+                                            .catch((e) => console.error(e));
+                                    }, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { color: isHideLoading || messageRemoved ? "muted" : "destructive", children: isHideLoading
+                                            ? "Removing..."
+                                            : messageRemoved
+                                                ? "Message removed"
+                                                : "Remove this message" }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { disabled: message.author.did === agent?.did || isBlockLoading, onPress: () => {
+                                        createBlock(message.author.did)
+                                            .then((r) => console.log(r))
+                                            .catch((e) => console.error(e));
+                                    }, children: message.author.did === agent?.did ? ((0, jsx_runtime_1.jsx)(ui_1.Text, { color: "muted", children: "Block yourself (you can't block yourself)" })) : ((0, jsx_runtime_1.jsx)(ui_1.Text, { color: "destructive", children: isBlockLoading
+                                            ? "Blocking..."
+                                            : `Block user @${message.author.handle} from this channel` })) })] })), (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuGroup, { title: `User actions`, children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onPress: () => {
+                                        react_native_1.Linking.openURL(`https://${BSKY_FRONTEND_DOMAIN}/profile/${channelId}`);
+                                    }, children: (0, jsx_runtime_1.jsxs)(ui_1.Text, { color: "primary", children: ["View user on ", BSKY_FRONTEND_DOMAIN] }) }), (0, jsx_runtime_1.jsx)(ReportButton, { message: message })] })] })) })] }));
 });
+function ReportButton({ message, }) {
+    const setReportModalOpen = (0, player_store_1.usePlayerStore)((x) => x.setReportModalOpen);
+    const setReportSubject = (0, player_store_1.usePlayerStore)((x) => x.setReportSubject);
+    const { onOpenChange } = (0, dropdown_menu_1.useRootContext)();
+    return ((0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onPress: () => {
+            if (!message)
+                return;
+            onOpenChange?.(false);
+            setReportModalOpen(true);
+            setReportSubject({
+                $type: "com.atproto.repo.strongRef",
+                uri: message.uri,
+                cid: message.cid,
+            });
+        }, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { color: "warning", children: "Report chat..." }) }));
+}

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SystemMessage = SystemMessage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_1 = require("react-native");
+const ui_1 = require("../../ui");
+const ui_2 = require("../ui");
+const text_1 = require("../ui/text");
+function SystemMessage({ title, timestamp }) {
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [ui_1.w.percent[100], ui_1.px[2], ui_1.pb[2]], children: [(0, jsx_runtime_1.jsx)(text_1.Code, { color: "muted", tracking: "widest", style: [ui_1.pl[12], ui_1.ml[1]], children: "SYSTEM MESSAGE" }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [ui_1.gap.all[2], ui_1.layout.flex.row], children: [(0, jsx_runtime_1.jsx)(text_1.Text, { style: {
+                            fontVariant: ["tabular-nums"],
+                            color: ui_2.atoms.colors.gray[300],
+                        }, children: timestamp.toLocaleTimeString([], {
+                            hour: "2-digit",
+                            minute: "2-digit",
+                            hour12: false,
+                        }) }), (0, jsx_runtime_1.jsx)(text_1.Text, { weight: "bold", color: "default", style: [ui_1.flex.shrink[1]], children: title })] })] }));
+}
+exports.default = SystemMessage;

package/dist/components/icons/bluesky-icon.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlueskyIcon = BlueskyIcon;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_native_svg_1 = tslib_1.__importStar(require("react-native-svg"));
+function BlueskyIcon({ size = 20, color = "#000" }) {
+    return ((0, jsx_runtime_1.jsx)(react_native_svg_1.default, { width: size, height: size, viewBox: "0 0 600 530", fill: color, children: (0, jsx_runtime_1.jsx)(react_native_svg_1.Path, { d: "M136 44c66 50 138 151 164 205 26-54 98-155 164-205 48-36 126-64 126 25 0 18-10 149-16 170-21 74-96 93-163 81 117 20 147 86 82 153-122 125-176-32-189-72-3-8-4-11-4-8 0-3-1 0-4 8-13 40-67 197-189 72-65-67-35-133 82-153-67 12-142-7-163-81-6-21-16-152-16-170 0-89 78-61 126-25z" }) }));
+}

package/dist/components/keep-awake.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeepAwake = KeepAwake;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function KeepAwake() {
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+}