@streamplace/components 0.9.0 → 0.9.4

package/src/components/chat/chat-box.tsx

@@ -1,33 +1,36 @@
 import Picker from "@emoji-mart/react";
 import { AtSignIcon, ExternalLink, X } from "lucide-react-native";
+import { env } from "process";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Platform, Pressable, TextInput } from "react-native";
 import { ChatMessageViewHydrated } from "streamplace";
+import { Button, Loader, Text, useTheme, View } from "../../";
+import { handleSlashCommand } from "../../lib/slash-commands";
+import { registerTeleportCommand } from "../../lib/slash-commands/teleport";
+import { StreamNotifications } from "../../lib/stream-notifications";
+import { SystemMessages } from "../../lib/system-messages";
 import {
-  Button,
-  Loader,
-  Text,
-  useChat,
-  useCreateChatMessage,
-  useLivestream,
-  useReplyToMessage,
-  useSetReplyToMessage,
-  useTheme,
-  View,
-} from "../../";
-import {
-  bg,
+  borders,
   flex,
   gap,
   h,
   layout,
   mb,
-  mr,
   pl,
   pr,
   py,
+  r,
   w,
 } from "../../lib/theme/atoms";
+import {
+  useChat,
+  useCreateChatMessage,
+  useLivestream,
+  useLivestreamStore,
+  useReplyToMessage,
+  useSetReplyToMessage,
+} from "../../livestream-store";
+import { useDID, usePDSAgent } from "../../streamplace-store";
 import { Textarea } from "../ui/textarea";
 import { RenderChatMessage } from "./chat-message";
 import { EmojiData, EmojiSuggestions } from "./emoji-suggestions";
@@ -65,7 +68,7 @@ export function ChatBox({
 
   let linfo = useLivestream();
 
-  const { theme } = useTheme();
+  const { theme, zero: zt } = useTheme();
 
   const chat = useChat();
   const createChatMessage = useCreateChatMessage();
@@ -73,6 +76,18 @@ export function ChatBox({
   const setReplyToMessage = useSetReplyToMessage();
   const textAreaRef = useRef<TextInput>(null);
 
+  const pdsAgent = usePDSAgent();
+  const userDID = useDID();
+  const setActiveTeleportUri = useLivestreamStore(
+    (state) => state.setActiveTeleportUri,
+  );
+
+  useEffect(() => {
+    if (pdsAgent && userDID) {
+      registerTeleportCommand(pdsAgent, userDID, setActiveTeleportUri);
+    }
+  }, [pdsAgent, userDID, setActiveTeleportUri]);
+
   const authors = useMemo(() => {
     if (!chat) return null;
     return chat.reduce((acc, msg) => {
@@ -84,6 +99,12 @@ export function ChatBox({
     }, new Map<string, ChatMessageViewHydrated["chatProfile"]>());
   }, [chat]);
 
+  useEffect(() => {
+    if (pdsAgent && linfo?.author?.did && pdsAgent.did === linfo.author.did) {
+      registerTeleportCommand(pdsAgent, pdsAgent.did, setActiveTeleportUri);
+    }
+  }, [pdsAgent, linfo?.author?.did, setActiveTeleportUri]);
+
   const handleMentionSelect = (handle: string) => {
     const beforeAt = message.slice(0, message.lastIndexOf("@"));
     setMessage(`${beforeAt}@${handle} `);
@@ -117,7 +138,7 @@ export function ChatBox({
     const colonIndex = text.lastIndexOf(":");
     if (colonIndex !== -1) {
       const searchText = text.slice(colonIndex + 1).toLowerCase();
-      if (searchText.length > 0) {
+      if (searchText.length >= 3) {
         if (!emojiData) return;
         const aliasMatches = Object.entries(emojiData.aliases)
           .map(([alias, emojiId]) => {
@@ -232,20 +253,44 @@ export function ChatBox({
     }
   };
 
-  const submit = () => {
+  const submit = async () => {
     if (!message.trim()) return;
+
+    const messageText = message;
     setMessage("");
     setReplyToMessage(null);
 
+    if (messageText.startsWith("/")) {
+      const result = await handleSlashCommand(messageText);
+      if (result.handled) {
+        if (result.error) {
+          console.error("Slash command error:", result.error);
+          SystemMessages.commandError(result.error);
+        }
+        return;
+      }
+    }
     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
+    try {
+      const result = await handleSlashCommand(messageText);
+
+      if (result.handled) {
+        if (result.error) {
+          console.error("Slash command error:", result.error);
+        }
+      } else {
+        createChatMessage({
+          text: messageText,
+          reply: replyTo || undefined,
+        });
+      }
+    } catch (err) {
+      console.error("Error submitting message:", err);
+    } finally {
+      setSubmitting(false);
+    }
+
     if (textAreaRef.current && !textAreaRef.current.isFocused()) {
       textAreaRef.current.focus();
       requestAnimationFrame(() => {
@@ -268,38 +313,50 @@ export function ChatBox({
             layout.flex.alignCenter,
             layout.flex.spaceBetween,
             pl[2],
-            pr[6],
-            mr[6],
+            pr[1],
             mb[2],
             py[1],
-            bg.gray[800],
-            { borderRadius: 16 },
+            r["2xl"],
+            zt.bg.card,
           ]}
         >
-          <RenderChatMessage
-            item={replyTo}
-            showReply={false}
-            userCache={authors || new Map()}
-          />
-          <Pressable onPress={() => setReplyToMessage(null)}>
-            <View
-              style={[
-                layout.flex.row,
-                layout.flex.alignCenter,
-                layout.flex.justifyCenter,
-                h[12],
-                w[12],
-                bg.gray[600],
-                { borderRadius: 999 },
-              ]}
-            >
-              <X size={24} />
-            </View>
+          <View style={{ flex: 1, minWidth: 0, marginRight: 8 }}>
+            <RenderChatMessage
+              item={replyTo}
+              showReply={false}
+              userCache={authors || new Map()}
+            />
+          </View>
+          <Pressable
+            onPress={() => setReplyToMessage(null)}
+            style={[
+              layout.flex.row,
+              layout.flex.alignCenter,
+              layout.flex.justifyCenter,
+              h[8],
+              w[8],
+              zt.bg.muted,
+              zt.border.border,
+              borders.width.thin,
+              { borderRadius: 999 },
+            ]}
+          >
+            <X size={24} style={[zt.text.primaryForeground]} />
           </Pressable>
         </View>
       )}
       {showEmojiSelector && (
-        <>
+        <View
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 200,
+          }}
+          pointerEvents="box-none"
+        >
           {/* Overlay to catch outside clicks */}
           <Pressable
             style={{
@@ -308,7 +365,6 @@ export function ChatBox({
               left: 0,
               right: 0,
               bottom: 0,
-              zIndex: 200,
             }}
             onPress={() => setShowEmojiSelector(false)}
           />
@@ -319,13 +375,14 @@ export function ChatBox({
               left: 0,
               zIndex: 2001,
             }}
+            pointerEvents="auto"
           >
             <Picker
               data={emojiData}
               onEmojiSelect={(e) => setMessage(message + e.native)}
             />
           </View>
-        </>
+        </View>
       )}
       <View style={[layout.flex.row, layout.flex.alignCenter, gap.all[2]]}>
         <Textarea
@@ -440,19 +497,35 @@ export function ChatBox({
             { justifyContent: "flex-end" },
           ]}
         >
+          {env.NODE_ENV === "development" && (
+            <Button
+              variant="secondary"
+              style={{ borderRadius: 16 }}
+              width="min"
+              onPress={() => {
+                StreamNotifications.teleport({
+                  targetHandle: "test.bsky.social",
+                  targetDID: "did:plc:test",
+                  countdown: 30,
+                  canCancel: true,
+                  onDismiss: (reason) =>
+                    console.log("teleport dismissed:", reason),
+                });
+              }}
+            >
+              Test Notification
+            </Button>
+          )}
           <Button
             variant="secondary"
             style={{ borderRadius: 16, maxWidth: 44, aspectRatio: 1 }}
             aria-label="Insert Mention"
             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();
             }}
           >

package/src/components/chat/chat-message.tsx

@@ -76,7 +76,7 @@ const segmentedObject = (
   }
 };
 
-const RichTextMessage = ({
+export const RichTextMessage = ({
   text,
   facets,
 }: {

package/src/components/chat/chat.tsx

@@ -1,4 +1,4 @@
-import { Ellipsis, Reply } from "lucide-react-native";
+import { ChevronDown, Ellipsis, Reply } from "lucide-react-native";
 import { ComponentProps, memo, useEffect, useRef, useState } from "react";
 import { Keyboard, Platform, Pressable } from "react-native";
 import { FlatList } from "react-native-gesture-handler";
@@ -8,17 +8,22 @@ import Swipeable, {
 import Reanimated, {
   SharedValue,
   useAnimatedStyle,
+  useSharedValue,
+  withTiming,
 } from "react-native-reanimated";
 import { ChatMessageViewHydrated } from "streamplace";
 import {
+  getSystemMessageType,
   SystemMessage,
+  SystemMessageType,
   Text,
   useChat,
   usePlayerStore,
   useSetReplyToMessage,
+  useTheme,
   View,
 } from "../../";
-import { bg, flex, px, py } from "../../lib/theme/atoms";
+import { bg, flex, layout, mr, px, py } from "../../lib/theme/atoms";
 import { RenderChatMessage } from "./chat-message";
 import { ModView } from "./mod-view";
 
@@ -168,8 +173,10 @@ const ChatLine = memo(({ item }: { item: ChatMessageViewHydrated }) => {
   if (item.author.did === "did:sys:system") {
     return (
       <SystemMessage
+        variant={getSystemMessageType(item) || SystemMessageType.notification}
         timestamp={new Date(item.record.createdAt)}
         title={item.record.text}
+        facets={item.record.facets}
       />
     );
   }
@@ -243,8 +250,30 @@ export function Chat({
   shownMessages?: number;
   style?: ComponentProps<typeof View>["style"];
 }) {
+  const { theme } = useTheme();
   const chat = useChat();
   const [isScrolledUp, setIsScrolledUp] = useState(false);
+  const flatListRef = useRef<FlatList>(null);
+
+  // Animation for scroll-to-bottom button
+  const buttonOpacity = useSharedValue(0);
+  const buttonTranslateY = useSharedValue(20);
+
+  useEffect(() => {
+    buttonOpacity.value = withTiming(isScrolledUp ? 1 : 0, { duration: 200 });
+    buttonTranslateY.value = withTiming(isScrolledUp ? 0 : 20, {
+      duration: 200,
+    });
+  }, [isScrolledUp]);
+
+  const buttonAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: buttonOpacity.value,
+    transform: [{ translateY: buttonTranslateY.value }],
+  }));
+
+  const scrollToBottom = () => {
+    flatListRef.current?.scrollToOffset({ offset: 0, animated: true });
+  };
 
   const handleScroll = (event: any) => {
     const { contentOffset } = event.nativeEvent;
@@ -270,11 +299,18 @@ export function Chat({
 
   return (
     <View
-      style={[flex.shrink[1], { minWidth: 0, maxWidth: "100%" }].concat(
-        propsStyle || [],
-      )}
+      style={[
+        flex.shrink[1],
+        {
+          minWidth: 0,
+          maxWidth: "100%",
+          position: "relative",
+          overflow: "visible",
+        },
+      ].concat(propsStyle || [])}
     >
       <FlatList
+        ref={flatListRef}
         style={[
           flex.grow[1],
           flex.shrink[1],
@@ -292,6 +328,44 @@ export function Chat({
         scrollEventThrottle={16}
         nestedScrollEnabled={true}
       />
+      <Reanimated.View
+        style={[
+          {
+            position: "absolute",
+            bottom: 16,
+            left: 0,
+            right: 0,
+            alignItems: "center",
+            pointerEvents: isScrolledUp ? "box-none" : "none",
+          },
+          buttonAnimatedStyle,
+        ]}
+      >
+        <Pressable
+          onPress={scrollToBottom}
+          style={[
+            {
+              pointerEvents: "auto",
+              backgroundColor: theme.colors.primary,
+              opacity: 0.9,
+              borderRadius: 20,
+              shadowColor: "#000",
+              shadowOffset: { width: 0, height: 2 },
+              shadowOpacity: 0.25,
+              shadowRadius: 4,
+              elevation: 5,
+            },
+            layout.flex.row,
+            layout.flex.center,
+            px[2],
+            py[1],
+            { gap: 6 },
+          ]}
+        >
+          <ChevronDown size={24} style={{ marginTop: 2 }} color="white" />
+          <Text style={[mr[1]]}>Scroll to bottom</Text>
+        </Pressable>
+      </Reanimated.View>
       <ModView />
     </View>
   );

package/src/components/chat/emoji-suggestions.tsx

@@ -1,4 +1,5 @@
 import { Pressable } from "react-native";
+import { ScrollView } from "react-native-gesture-handler";
 import { Code, Text, View } from "../..";
 import { bg, layout, left, right, zIndex } from "../../lib/theme/atoms";
 
@@ -61,34 +62,35 @@ export function EmojiSuggestions({
           borderRadius: 8,
           boxShadow: "0px 4px 6px rgba(0, 0, 0, 0.1)",
           maxHeight: 200,
-          overflow: "auto",
         },
       ]}
     >
-      {emojis.map((emoji, index) => (
-        <Pressable
-          key={emoji.id}
-          onPress={() => onSelect(emoji)}
-          style={[
-            {
-              padding: 8,
-              flexDirection: "row",
-              alignItems: "center",
-              backgroundColor:
-                index === highlightedIndex
-                  ? "rgba(255, 255, 255, 0.1)"
-                  : "transparent",
-            },
-          ]}
-        >
-          <Text style={{ fontSize: 16, marginRight: 8 }}>
-            {emoji.skins[0]?.native}
-          </Text>
-          <Text style={{ color: "white", fontSize: 14 }}>
-            <Code style={[bg.gray[950]]}>:{emoji.id}:</Code> {emoji.name}
-          </Text>
-        </Pressable>
-      ))}
+      <ScrollView>
+        {emojis.map((emoji, index) => (
+          <Pressable
+            key={emoji.id}
+            onPress={() => onSelect(emoji)}
+            style={[
+              {
+                padding: 8,
+                flexDirection: "row",
+                alignItems: "center",
+                backgroundColor:
+                  index === highlightedIndex
+                    ? "rgba(255, 255, 255, 0.1)"
+                    : "transparent",
+              },
+            ]}
+          >
+            <Text style={{ fontSize: 16, marginRight: 8 }}>
+              {emoji.skins[0]?.native}
+            </Text>
+            <Text style={{ color: "white", fontSize: 14 }}>
+              <Code style={[bg.gray[950]]}>:{emoji.id}:</Code> {emoji.name}
+            </Text>
+          </Pressable>
+        ))}
+      </ScrollView>
     </View>
   );
 }

package/src/components/chat/mention-suggestions.tsx

@@ -1,7 +1,7 @@
-import { Pressable } from "react-native";
+import { Pressable, ScrollView } from "react-native";
 import { ChatMessageViewHydrated } from "streamplace";
 import { Text, View } from "../..";
-import { bg, layout, left, right, zIndex } from "../../lib/theme/atoms";
+import { bg, layout, left, right } from "../../lib/theme/atoms";
 
 interface MentionSuggestionsProps {
   authors: Map<string, ChatMessageViewHydrated["chatProfile"]>;
@@ -27,45 +27,48 @@ export function MentionSuggestions({
 
         left[0],
         right[0],
-        zIndex[50],
         {
           bottom: "100%",
           borderRadius: 8,
           boxShadow: "0px 4px 6px rgba(0, 0, 0, 0.1)",
+          maxHeight: 200,
+          zIndex: 999999,
         },
       ]}
     >
-      {authorHandles.map((handle, index) => {
-        let profile = authors.get(handle);
-        return (
-          <Pressable
-            key={handle}
-            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)",
-              },
-            ]}
-          >
-            <Text
-              style={{
-                color: profile?.color
-                  ? `rgb(${profile.color.red}, ${profile.color.green}, ${profile.color.blue})`
-                  : "black",
-                fontWeight: "bold",
-              }}
+      <ScrollView>
+        {authorHandles.map((handle, index) => {
+          let profile = authors.get(handle);
+          return (
+            <Pressable
+              key={handle}
+              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)",
+                },
+              ]}
             >
-              @{handle}
-            </Text>
-          </Pressable>
-        );
-      })}
+              <Text
+                style={{
+                  color: profile?.color
+                    ? `rgb(${profile.color.red}, ${profile.color.green}, ${profile.color.blue})`
+                    : "black",
+                  fontWeight: "bold",
+                }}
+              >
+                @{handle}
+              </Text>
+            </Pressable>
+          );
+        })}
+      </ScrollView>
     </View>
   );
 }

package/src/components/chat/mod-view.tsx

@@ -95,17 +95,6 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
     }
   }, [message]);
 
-  // Early return AFTER all hooks have been called
-  if (!agent?.did) {
-    return <></>;
-  }
-
-  // Can show moderation actions if user can hide, ban, or manage livestream
-  const canModerate =
-    modPermissions.canHide ||
-    modPermissions.canBan ||
-    modPermissions.canManageLivestream;
-
   // Check if any moderation actions are actually available for this message
   // This must match the individual action checks inside the DropdownMenuGroup
   const hasAvailableActions = !!(
@@ -328,14 +317,14 @@ function ModViewContent({
         >
           <Text color="primary">View user on {BSKY_FRONTEND_DOMAIN}</Text>
         </DropdownMenuItem>
-        {message.author.did === agent?.did && (
+        {agent?.did && message.author.did === agent.did && (
           <DeleteButton
             message={message}
             deleteChatMessage={deleteChatMessage}
             onOpenChange={onOpenChange}
           />
         )}
-        {message.author.did !== agent?.did && (
+        {(!agent?.did || message.author.did !== agent.did) && (
           <ReportButton
             message={message}
             setReportModalOpen={setReportModalOpen}

package/src/components/chat/system-message.tsx

@@ -1,14 +1,23 @@
 import { View } from "react-native";
-import { flex, gap, layout, ml, pb, pl, px, w } from "../../ui";
-import { atoms } from "../ui";
+import { Main } from "streamplace/src/lexicons/types/place/stream/richtext/facet";
+import { SystemMessageType } from "../../lib/system-messages";
+import { colors, flex, gap, layout, ml, pb, pl, px, w } from "../../ui";
 import { Code, Text } from "../ui/text";
+import { RichTextMessage } from "./chat-message";
 
 interface SystemMessageProps {
+  variant: SystemMessageType;
   title: string;
   timestamp: Date;
+  facets?: Main[];
 }
 
-export function SystemMessage({ title, timestamp }: SystemMessageProps) {
+export function SystemMessage({
+  variant,
+  title,
+  timestamp,
+  facets,
+}: SystemMessageProps) {
   return (
     <View style={[w.percent[100], px[2], pb[2]]}>
       <Code color="muted" tracking="widest" style={[pl[12], ml[1]]}>
@@ -18,7 +27,7 @@ export function SystemMessage({ title, timestamp }: SystemMessageProps) {
         <Text
           style={{
             fontVariant: ["tabular-nums"],
-            color: atoms.colors.gray[300],
+            color: colors.gray[400],
           }}
         >
           {timestamp.toLocaleTimeString([], {
@@ -28,7 +37,7 @@ export function SystemMessage({ title, timestamp }: SystemMessageProps) {
           })}
         </Text>
         <Text weight="bold" color="default" style={[flex.shrink[1]]}>
-          {title}
+          <RichTextMessage facets={facets} text={title} />
         </Text>
       </View>
     </View>

package/src/components/mobile-player/shared.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from "react";
-import { PlayerProtocol, useStreamplaceStore } from "../..";
+import { PlayerProtocol } from "../../player-store/player-state";
+import { useStreamplaceStore } from "../../streamplace-store";
 
 const protocolSuffixes = {
   m3u8: PlayerProtocol.HLS,