@streamplace/components 0.9.9 → 0.9.10

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

@@ -1,13 +1,15 @@
-import Picker from "@emoji-mart/react";
 import Graphemer from "graphemer";
 import { AtSignIcon, ExternalLink, X } from "lucide-react-native";
 import { env } from "process";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { ReactNode, useEffect, useMemo, useRef, useState } from "react";
 import { Platform, Pressable, TextInput } from "react-native";
 import { ChatMessageViewHydrated } from "streamplace";
 import { Button, Loader, Text, toast, useTheme, View } from "../../";
 import { handleSlashCommand } from "../../lib/slash-commands";
-import { registerTeleportCommand } from "../../lib/slash-commands/teleport";
+import {
+  createTeleport,
+  registerTeleportCommand,
+} from "../../lib/slash-commands/teleport";
 import { StreamNotifications } from "../../lib/stream-notifications";
 import { SystemMessages } from "../../lib/system-messages";
 import {
@@ -24,6 +26,7 @@ import {
   w,
 } from "../../lib/theme/atoms";
 import {
+  useAddSystemMessage,
   useChat,
   useCreateChatMessage,
   useLivestream,
@@ -34,8 +37,13 @@ import {
 import { useDID, usePDSAgent } from "../../streamplace-store";
 import { Textarea } from "../ui/textarea";
 import { RenderChatMessage } from "./chat-message";
-import { EmojiData, EmojiSuggestions } from "./emoji-suggestions";
+import {
+  EmojiData,
+  EmojiSuggestions,
+  getSkinNative,
+} from "./emoji-suggestions";
 import { MentionSuggestions } from "./mention-suggestions";
+import { TeleportModal } from "./teleport-modal";
 
 const COOL_EMOJI_LIST = [
   // @ts-ignore we can iterate through this just fine it seems
@@ -49,11 +57,21 @@ export function ChatBox({
   chatBoxStyle,
   emojiData,
   setIsChatVisible,
+  onEmojiPickerToggle,
+  emojiPicker,
+  skinTone = 0,
 }: {
   isPopout?: boolean;
   chatBoxStyle?: any;
   emojiData: EmojiData | null;
   setIsChatVisible?: (visible: boolean) => void;
+  onEmojiPickerToggle?: () => void;
+  emojiPicker?: (
+    isOpen: boolean,
+    onClose: () => void,
+    onSelect: (emoji: any) => void,
+  ) => ReactNode;
+  skinTone?: number;
 }) {
   const [submitting, setSubmitting] = useState(false);
   const [message, setMessage] = useState("");
@@ -68,6 +86,7 @@ export function ChatBox({
     new Map(),
   );
   const [filteredEmojis, setFilteredEmojis] = useState<any[]>([]);
+  const [showTeleportModal, setShowTeleportModal] = useState(false);
   const isOverLimit = graphemer.countGraphemes(message) > 300;
 
   let linfo = useLivestream();
@@ -76,6 +95,7 @@ export function ChatBox({
 
   const chat = useChat();
   const createChatMessage = useCreateChatMessage();
+  const addSystemMessage = useAddSystemMessage();
   const replyTo = useReplyToMessage();
   const setReplyToMessage = useSetReplyToMessage();
   const textAreaRef = useRef<TextInput>(null);
@@ -88,7 +108,9 @@ export function ChatBox({
 
   useEffect(() => {
     if (pdsAgent && userDID) {
-      registerTeleportCommand(pdsAgent, userDID, setActiveTeleportUri);
+      registerTeleportCommand(pdsAgent, userDID, setActiveTeleportUri, () =>
+        setShowTeleportModal(true),
+      );
     }
   }, [pdsAgent, userDID, setActiveTeleportUri]);
 
@@ -105,7 +127,12 @@ export function ChatBox({
 
   useEffect(() => {
     if (pdsAgent && linfo?.author?.did && pdsAgent.did === linfo.author.did) {
-      registerTeleportCommand(pdsAgent, pdsAgent.did, setActiveTeleportUri);
+      registerTeleportCommand(
+        pdsAgent,
+        pdsAgent.did,
+        setActiveTeleportUri,
+        () => setShowTeleportModal(true),
+      );
     }
   }, [pdsAgent, linfo?.author?.did, setActiveTeleportUri]);
 
@@ -116,11 +143,37 @@ export function ChatBox({
   };
 
   const handleEmojiSelect = (emoji: any) => {
-    const beforeColon = message.slice(0, message.lastIndexOf(":"));
-    setMessage(`${beforeColon}${emoji.skins[0]?.native} `);
+    console.log("[ChatBox] handleEmojiSelect", emoji);
+    if (emoji.s) {
+      const beforeColon = message.slice(0, message.lastIndexOf(":"));
+      setMessage(`${beforeColon}${getSkinNative(emoji, skinTone)} `);
+    } else if (emoji.type === "standard") {
+      setMessage(message + emoji.native);
+    } else if (emoji.type === "custom") {
+      setMessage(message + `:${emoji.name}: `);
+    }
     setShowEmojiSuggestions(false);
   };
 
+  const handleTeleportSubmit = async (
+    targetHandle: string,
+    countdownSeconds: number,
+  ) => {
+    if (!pdsAgent || !userDID) return;
+
+    const result = await createTeleport(
+      pdsAgent,
+      userDID,
+      targetHandle,
+      countdownSeconds,
+      setActiveTeleportUri,
+    );
+
+    if (!result.success && result.error) {
+      SystemMessages.commandError(result.error);
+    }
+  };
+
   const updateSuggestions = (text: string) => {
     // Handle mentions
     const atIndex = text.lastIndexOf("@");
@@ -205,15 +258,15 @@ export function ChatBox({
                 sort: [5, emoji.id.toLowerCase().indexOf(searchText), 0],
               }; // includes id
             }
-            if (emoji.name.toLowerCase().includes(searchText)) {
+            if (emoji.m.toLowerCase().includes(searchText)) {
               return {
                 emoji,
-                sort: [6, emoji.name.toLowerCase().indexOf(searchText), 0],
+                sort: [6, emoji.m.toLowerCase().indexOf(searchText), 0],
               };
             }
             if (
-              emoji.keywords &&
-              emoji.keywords.some((keyword: string) =>
+              emoji.k &&
+              emoji.k.some((keyword: string) =>
                 keyword.toLowerCase().includes(searchText),
               )
             ) {
@@ -280,7 +333,7 @@ export function ChatBox({
       if (result.handled) {
         if (result.error) {
           console.error("Slash command error:", result.error);
-          SystemMessages.commandError(result.error);
+          addSystemMessage(SystemMessages.commandError(result.error));
         }
         return;
       }
@@ -321,6 +374,11 @@ export function ChatBox({
 
   return (
     <View style={[layout.flex.column, flex.shrink[1], gap.all[2]]}>
+      <TeleportModal
+        open={showTeleportModal}
+        onOpenChange={setShowTeleportModal}
+        onSubmit={handleTeleportSubmit}
+      />
       {replyTo && (
         <View
           style={[
@@ -360,45 +418,6 @@ export function ChatBox({
           </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={{
-              position: "absolute",
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
-            }}
-            onPress={() => setShowEmojiSelector(false)}
-          />
-          <View
-            style={{
-              position: "absolute",
-              bottom: "100%",
-              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
           ref={textAreaRef}
@@ -508,6 +527,7 @@ export function ChatBox({
           emojis={filteredEmojis}
           highlightedIndex={highlightedIndex}
           onSelect={handleEmojiSelect}
+          skinTone={skinTone}
         />
       )}
       {Platform.OS === "web" && (
@@ -516,9 +536,14 @@ export function ChatBox({
             layout.flex.row,
             mb[2],
             gap.all[2],
-            { justifyContent: "flex-end" },
+            { justifyContent: "flex-end", position: "relative" },
           ]}
         >
+          {emojiPicker?.(
+            showEmojiSelector,
+            () => setShowEmojiSelector(false),
+            handleEmojiSelect,
+          )}
           {env.NODE_ENV === "development" && (
             <Button
               variant="secondary"
@@ -562,9 +587,14 @@ export function ChatBox({
           >
             <Button
               variant="secondary"
+              id="web-emoji-picker-btn"
               aria-label="Insert Emoji"
               style={{ borderRadius: 16, maxWidth: 44, aspectRatio: 1 }}
-              onPress={() => setShowEmojiSelector(!showEmojiSelector)}
+              onPress={() => {
+                onEmojiPickerToggle
+                  ? onEmojiPickerToggle()
+                  : setShowEmojiSelector(!showEmojiSelector);
+              }}
             >
               <Text>{COOL_EMOJI_LIST[emojiIconIndex]}</Text>
             </Button>

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

@@ -25,6 +25,8 @@ interface Facet {
 
 import { useLivestreamStore } from "../../livestream-store";
 import { Text } from "../ui/text";
+import { BadgeDisplayRow } from "./badge";
+import { UserProfileCard } from "./user-profile-card";
 
 const getRgbColor = (color?: { red: number; green: number; blue: number }) =>
   color ? `rgb(${color.red}, ${color.green}, ${color.blue})` : colors.gray[500];
@@ -152,39 +154,41 @@ export const RenderChatMessage = memo(
             </Text>
           </View>
         )}
-        <View
-          style={[
-            gap.all[2],
-            layout.flex.row,
-            { minWidth: 0, maxWidth: "100%" },
-          ]}
-        >
+        <View style={[layout.flex.row, { minWidth: 0, maxWidth: "100%" }]}>
           {showTime && (
             <Text
               style={{
                 fontVariant: ["tabular-nums"],
                 color: colors.gray[400],
+                width: 44,
+                marginRight: 8,
               }}
             >
               {formatTime(item.record.createdAt)}
             </Text>
           )}
-          <Text
-            weight="bold"
-            color="default"
-            style={[flex.shrink[1], { minWidth: 0, overflow: "hidden" }]}
-          >
-            <Text
-              style={[
-                {
-                  cursor: "pointer",
-                  color: getRgbColor(item.chatProfile?.color),
-                },
-              ]}
+          <Text style={[flex.shrink[1], { minWidth: 0 }]}>
+            <UserProfileCard
+              uri={item.uri}
+              author={item.author}
+              badges={item.badges}
             >
-              {formatHandleWithAt(item.author)}
+              <Text>
+                <BadgeDisplayRow badges={item.badges} />
+                <Text
+                  weight="bold"
+                  style={{
+                    cursor: "pointer",
+                    color: getRgbColor(item.chatProfile?.color),
+                  }}
+                >
+                  {formatHandleWithAt(item.author)}
+                </Text>
+              </Text>
+            </UserProfileCard>
+            <Text weight="bold" color="default">
+              {": "}
             </Text>
-            :{" "}
             <RichTextMessage
               text={item.record.text}
               facets={item.record.facets || []}

package/src/components/chat/chat.tsx

@@ -26,6 +26,7 @@ import {
 import { bg, flex, layout, mr, px, py } from "../../lib/theme/atoms";
 import { RenderChatMessage } from "./chat-message";
 import { ModView } from "./mod-view";
+import { ProfileCardProvider } from "./user-profile-card";
 
 function RightAction(prog: SharedValue<number>, drag: SharedValue<number>) {
   const styleAnimation = useAnimatedStyle(() => {
@@ -141,77 +142,65 @@ const ActionsBar = memo(
   },
 );
 
-const ChatLine = memo(({ item }: { item: ChatMessageViewHydrated }) => {
-  const setReply = useSetReplyToMessage();
-  const setModMsg = usePlayerStore((state) => state.setModMessage);
-  const swipeableRef = useRef<SwipeableMethods | null>(null);
-  const [isHovered, setIsHovered] = useState(false);
-  const hoverTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+const ChatLine = memo(
+  ({
+    item,
+    isHovered,
+    onHoverIn,
+    onHoverOut,
+    hoverTimeoutRef,
+  }: {
+    item: ChatMessageViewHydrated;
+    isHovered?: boolean;
+    onHoverIn?: () => void;
+    onHoverOut?: () => void;
+    hoverTimeoutRef?: React.MutableRefObject<NodeJS.Timeout | null>;
+  }) => {
+    const setReply = useSetReplyToMessage();
+    const setModMsg = usePlayerStore((state) => state.setModMessage);
+    const swipeableRef = useRef<SwipeableMethods | null>(null);
 
-  const handleHoverIn = () => {
-    if (hoverTimeoutRef.current) {
-      clearTimeout(hoverTimeoutRef.current);
-      hoverTimeoutRef.current = null;
+    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}
+        />
+      );
     }
-    setIsHovered(true);
-  };
-
-  const handleHoverOut = () => {
-    hoverTimeoutRef.current = setTimeout(() => {
-      setIsHovered(false);
-    }, 50);
-  };
 
-  useEffect(() => {
-    return () => {
-      if (hoverTimeoutRef.current) {
-        clearTimeout(hoverTimeoutRef.current);
-      }
-    };
-  }, []);
-
-  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}
-      />
-    );
-  }
+    if (Platform.OS === "web") {
+      return (
+        <View
+          style={[
+            py[1],
+            px[2],
+            {
+              position: "relative",
+              borderRadius: 8,
+              minWidth: 0,
+              maxWidth: "100%",
+            },
+            isHovered && bg.gray[950],
+          ]}
+          onPointerEnter={onHoverIn}
+          onPointerLeave={onHoverOut}
+        >
+          <Pressable style={[{ minWidth: 0, maxWidth: "100%" }]}>
+            <RenderChatMessage item={item} />
+          </Pressable>
+          <ActionsBar
+            item={item}
+            visible={!!isHovered}
+            hoverTimeoutRef={hoverTimeoutRef!}
+          />
+        </View>
+      );
+    }
 
-  if (Platform.OS === "web") {
     return (
-      <View
-        style={[
-          py[1],
-          px[2],
-          {
-            position: "relative",
-            borderRadius: 8,
-            minWidth: 0,
-            maxWidth: "100%",
-          },
-          isHovered && bg.gray[950],
-        ]}
-        onPointerEnter={handleHoverIn}
-        onPointerLeave={handleHoverOut}
-      >
-        <Pressable style={[{ minWidth: 0, maxWidth: "100%" }]}>
-          <RenderChatMessage item={item} />
-        </Pressable>
-        <ActionsBar
-          item={item}
-          visible={isHovered}
-          hoverTimeoutRef={hoverTimeoutRef}
-        />
-      </View>
-    );
-  }
-
-  return (
-    <>
       <Swipeable
         containerStyle={[py[1]]}
         friction={2}
@@ -238,9 +227,9 @@ const ChatLine = memo(({ item }: { item: ChatMessageViewHydrated }) => {
       >
         <RenderChatMessage item={item} />
       </Swipeable>
-    </>
-  );
-});
+    );
+  },
+);
 
 export function Chat({
   shownMessages = SHOWN_MSGS,
@@ -254,6 +243,24 @@ export function Chat({
   const chat = useChat();
   const [isScrolledUp, setIsScrolledUp] = useState(false);
   const flatListRef = useRef<FlatList>(null);
+  const [hoveredMessageUri, setHoveredMessageUri] = useState<string | null>(
+    null,
+  );
+  const hoverTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const handleHoverIn = (uri: string) => {
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+      hoverTimeoutRef.current = null;
+    }
+    setHoveredMessageUri(uri);
+  };
+
+  const handleHoverOut = () => {
+    hoverTimeoutRef.current = setTimeout(() => {
+      setHoveredMessageUri(null);
+    }, 50);
+  };
 
   // Animation for scroll-to-bottom button
   const buttonOpacity = useSharedValue(0);
@@ -309,25 +316,35 @@ export function Chat({
         },
       ].concat(propsStyle || [])}
     >
-      <FlatList
-        ref={flatListRef}
-        style={[
-          flex.grow[1],
-          flex.shrink[1],
-          { minWidth: 0, maxWidth: "100%" },
-        ]}
-        data={chat.slice(0, shownMessages)}
-        inverted={true}
-        keyExtractor={keyExtractor}
-        renderItem={({ item, index }) => <ChatLine item={item} />}
-        removeClippedSubviews={true}
-        maxToRenderPerBatch={10}
-        initialNumToRender={10}
-        updateCellsBatchingPeriod={50}
-        onScroll={handleScroll}
-        scrollEventThrottle={16}
-        nestedScrollEnabled={true}
-      />
+      <ProfileCardProvider>
+        <FlatList
+          ref={flatListRef}
+          style={[
+            flex.grow[1],
+            flex.shrink[1],
+            { minWidth: 0, maxWidth: "100%" },
+          ]}
+          data={chat.slice(0, shownMessages)}
+          inverted={true}
+          keyExtractor={keyExtractor}
+          renderItem={({ item }) => (
+            <ChatLine
+              item={item}
+              isHovered={hoveredMessageUri === item.uri}
+              onHoverIn={() => handleHoverIn(item.uri)}
+              onHoverOut={handleHoverOut}
+              hoverTimeoutRef={hoverTimeoutRef}
+            />
+          )}
+          removeClippedSubviews={true}
+          maxToRenderPerBatch={10}
+          initialNumToRender={10}
+          updateCellsBatchingPeriod={50}
+          onScroll={handleScroll}
+          scrollEventThrottle={16}
+          nestedScrollEnabled={true}
+        />
+      </ProfileCardProvider>
       <Reanimated.View
         style={[
           {

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

@@ -4,46 +4,37 @@ import { Code, Text, View } from "../..";
 import { bg, layout, left, right, zIndex } from "../../lib/theme/atoms";
 
 export interface EmojiData {
-  categories: Category[];
   emojis: { [key: string]: Emoji };
   aliases: { [key: string]: string };
-  sheet: Sheet;
-}
-
-export interface Category {
-  id: string;
-  emojis: string[];
 }
 
 export interface Emoji {
   id: string;
-  name: string;
-  keywords: string[];
-  skins: Skin[];
-  version: number;
-  emoticons?: string[];
+  m: string;
+  k: string[];
+  s: Skin[];
 }
 
 export interface Skin {
-  unified: string;
-  native: string;
-}
-
-export interface Sheet {
-  cols: number;
-  rows: number;
+  n: string;
 }
 
 interface EmojiSuggestionsProps {
   emojis: Emoji[];
   onSelect: (emoji: Emoji) => void;
   highlightedIndex: number;
+  skinTone?: number;
+}
+
+export function getSkinNative(emoji: Emoji, skinTone: number = 0): string {
+  return (emoji.s[skinTone] ?? emoji.s[0]).n;
 }
 
 export function EmojiSuggestions({
   emojis,
   onSelect,
   highlightedIndex,
+  skinTone = 0,
 }: EmojiSuggestionsProps) {
   if (!emojis || emojis.length === 0) {
     return null;
@@ -83,10 +74,10 @@ export function EmojiSuggestions({
             ]}
           >
             <Text style={{ fontSize: 16, marginRight: 8 }}>
-              {emoji.skins[0]?.native}
+              {getSkinNative(emoji, skinTone)}
             </Text>
             <Text style={{ color: "white", fontSize: 14 }}>
-              <Code style={[bg.gray[950]]}>:{emoji.id}:</Code> {emoji.name}
+              <Code style={[bg.gray[950]]}>:{emoji.id}:</Code> {emoji.m}
             </Text>
           </Pressable>
         ))}

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

@@ -1,7 +1,7 @@
 import { View } from "react-native";
 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 { bg, colors, flex, gap, layout, ml, pb, pl, px, r, w } from "../../ui";
 import { Code, Text } from "../ui/text";
 import { RichTextMessage } from "./chat-message";
 
@@ -18,8 +18,18 @@ export function SystemMessage({
   timestamp,
   facets,
 }: SystemMessageProps) {
+  const isError = variant === SystemMessageType.command_error;
+
   return (
-    <View style={[w.percent[100], px[2], pb[2]]}>
+    <View
+      style={[
+        w.percent[100],
+        px[2],
+        pb[2],
+        isError && bg.red[950],
+        isError && r.md,
+      ]}
+    >
       <Code color="muted" tracking="widest" style={[pl[12], ml[1]]}>
         SYSTEM MESSAGE
       </Code>