@streamplace/components 0.0.1 → 0.7.0

package/package.json

@@ -1,13 +1,55 @@
 {
   "name": "@streamplace/components",
-  "version": "0.0.1",
-  "description": "",
-  "main": "package.json",
+  "version": "0.7.0",
+  "description": "Streamplace React (Native) Components",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "src/index.tsx",
+  "exports": {
+    ".": {
+      "@streamplace/dev": "./src/index.tsx",
+      "types": "./dist/index.d.mjs",
+      "default": "./dist/index.mjs"
+    }
+  },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "tsc",
+    "postinstall": "pnpm run build",
+    "start": "tsc --watch --preserveWatchOutput"
+  },
+  "keywords": [
+    "streamplace"
+  ],
+  "author": "Streamplace",
+  "license": "MIT",
+  "packageManager": "pnpm@10.11.0",
+  "devDependencies": {
+    "tsup": "^8.5.0"
+  },
+  "dependencies": {
+    "@atproto/api": "^0.15.7",
+    "@atproto/crypto": "^0.4.4",
+    "@gorhom/bottom-sheet": "^5.1.6",
+    "@react-navigation/native": "^6.1.18",
+    "@rn-primitives/dropdown-menu": "^1.2.0",
+    "@rn-primitives/portal": "^1.3.0",
+    "class-variance-authority": "^0.6.1",
+    "expo-video": "~2.2.1",
+    "hls.js": "^1.5.17",
+    "lucide-react-native": "^0.514.0",
+    "react-native": "0.79.3",
+    "react-native-edge-to-edge": "^1.6.2",
+    "react-native-gesture-handler": "~2.26.0",
+    "react-native-reanimated": "~3.18.0",
+    "react-native-safe-area-context": "5.4.1",
+    "react-native-webrtc": "git+https://github.com/streamplace/react-native-webrtc.git#6b8472a771ac47f89217d327058a8a4124a6ae56",
+    "react-use-websocket": "^4.13.0",
+    "streamplace": "0.7.0",
+    "viem": "^2.21.44",
+    "zustand": "^5.0.5"
+  },
+  "peerDependencies": {
+    "react": "*"
   },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "packageManager": "pnpm@9.14.4+sha512.c8180b3fbe4e4bca02c94234717896b5529740a6cbadf19fa78254270403ea2f27d4e1d46a08a0f56c89b63dc8ebfd3ee53326da720273794e6200fcf0d184ab"
+  "gitHead": "c0b9266fbc2cb2a643203e8c0450980c1bd29635"
 }

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

@@ -0,0 +1,195 @@
+import { X } from "lucide-react-native";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Pressable, TextInput } from "react-native";
+import { ChatMessageViewHydrated } from "streamplace";
+import {
+  Button,
+  Loader,
+  Text,
+  useChat,
+  useCreateChatMessage,
+  useReplyToMessage,
+  useSetReplyToMessage,
+  View,
+} from "../../";
+import { bg, flex, gap, h, layout, mb, pl, pr, w } from "../../lib/theme/atoms";
+import { usePDSAgent } from "../../streamplace-store/xrpc";
+import { Textarea } from "../ui/textarea";
+import { RenderChatMessage } from "./chat-message";
+import { MentionSuggestions } from "./mention-suggestions";
+
+export function ChatBox({
+  isPopout,
+  chatBoxStyle,
+}: {
+  isPopout?: boolean;
+  chatBoxStyle?: any;
+}) {
+  const [submitting, setSubmitting] = useState(false);
+  const [message, setMessage] = useState("");
+  const [showSuggestions, setShowSuggestions] = useState(false);
+  const [highlightedIndex, setHighlightedIndex] = useState(0);
+  const [filteredAuthors, setFilteredAuthors] = useState<Map<string, any>>(
+    new Map(),
+  );
+
+  const chat = useChat();
+  const createChatMessage = useCreateChatMessage();
+  const replyTo = useReplyToMessage();
+  const setReplyToMessage = useSetReplyToMessage();
+  const textAreaRef = useRef<TextInput>(null);
+
+  // are we logged in?
+
+  let agent = usePDSAgent();
+
+  if (!agent?.did) {
+    <View style={[layout.flex.row, layout.flex.alignCenter, gap.all[2]]}>
+      <Text>Log in to chat.</Text>
+    </View>;
+  }
+
+  const authors = useMemo(() => {
+    if (!chat) return null;
+    return chat.reduce((acc, msg) => {
+      acc.set(msg.author.handle, msg.chatProfile);
+      return acc;
+    }, new Map<string, ChatMessageViewHydrated["chatProfile"]>());
+  }, [chat]);
+
+  const handleMentionSelect = (handle: string) => {
+    const beforeAt = message.slice(0, message.lastIndexOf("@"));
+    setMessage(`${beforeAt}@${handle} `);
+    setShowSuggestions(false);
+  };
+
+  const updateSuggestions = (text: string) => {
+    const atIndex = text.lastIndexOf("@");
+    if (atIndex === -1 || !authors) {
+      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 submit = () => {
+    if (!message.trim()) return;
+    setMessage("");
+    setReplyToMessage(null);
+
+    setSubmitting(true);
+    createChatMessage({
+      text: message,
+      reply: replyTo || undefined,
+    });
+    setSubmitting(false);
+  };
+  useEffect(() => {
+    if (replyTo && textAreaRef.current) {
+      textAreaRef.current.focus();
+    }
+  }, [replyTo]);
+
+  return (
+    <View style={[layout.flex.column, flex.shrink[1], gap.all[2]]}>
+      {replyTo && (
+        <View
+          style={[
+            layout.flex.row,
+            layout.flex.alignCenter,
+            layout.flex.spaceBetween,
+            h[12],
+            pl[2],
+            pr[10],
+            mb[2],
+            bg.gray[800],
+            { borderRadius: 16 },
+          ]}
+        >
+          <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>
+          </Pressable>
+        </View>
+      )}
+      <View style={[layout.flex.row, layout.flex.alignCenter, gap.all[2]]}>
+        <Textarea
+          ref={textAreaRef}
+          numberOfLines={1}
+          value={message}
+          enterKeyHint="send"
+          onSubmitEditing={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 submit();
+            } else if (k.nativeEvent.key === "ArrowUp") {
+              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,
+                ),
+              );
+            }
+          }}
+          style={[chatBoxStyle]}
+        />
+        <Button
+          disabled={submitting}
+          variant="secondary"
+          style={{ borderRadius: 16, height: 36, minWidth: 80 }}
+          onPress={submit}
+        >
+          {submitting ? <Loader /> : "Send"}
+        </Button>
+      </View>
+      {showSuggestions && (
+        <MentionSuggestions
+          authors={filteredAuthors || []}
+          highlightedIndex={highlightedIndex}
+          onSelect={handleMentionSelect}
+        />
+      )}
+    </View>
+  );
+}

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

@@ -0,0 +1,192 @@
+import { $Typed } from "@atproto/api";
+import {
+  Link,
+  Mention,
+} from "@atproto/api/dist/client/types/app/bsky/richtext/facet";
+import { memo, useCallback } from "react";
+import { Linking, View } from "react-native";
+import { ChatMessageViewHydrated } from "streamplace";
+import { RichtextSegment, segmentize } from "../../lib/facet";
+import {
+  borders,
+  flex,
+  gap,
+  ml,
+  mr,
+  opacity,
+  pl,
+  w,
+} from "../../lib/theme/atoms";
+import { atoms, layout } from "../ui";
+
+interface Facet {
+  index: {
+    byteStart: number;
+    byteEnd: number;
+  };
+  features: Array<{
+    $type: string;
+    uri?: string;
+    did?: string;
+  }>;
+}
+
+import { useLivestreamStore } from "../../livestream-store";
+import { Text } from "../ui/text";
+
+const getRgbColor = (color?: { red: number; green: number; blue: number }) =>
+  color ? `rgb(${color.red}, ${color.green}, ${color.blue})` : "$accentColor";
+
+const segmentedObject = (
+  obj: RichtextSegment,
+  index: number,
+  userCache?: { [key: string]: ChatMessageViewHydrated["chatProfile"] },
+) => {
+  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 as $Typed<Link>;
+      return (
+        <Text
+          key={`mention-${index}`}
+          style={[{ color: atoms.colors.ios.systemBlue, cursor: "pointer" }]}
+          onPress={() => Linking.openURL(linkftr.uri || "")}
+        >
+          {obj.text}
+        </Text>
+      );
+    } else if (ftr.$type === "app.bsky.richtext.facet#mention") {
+      let mtnftr = ftr as $Typed<Mention>;
+      const profile = userCache?.[mtnftr.did];
+      console.log(profile, mtnftr.did, userCache);
+      return (
+        <Text
+          key={`mention-${index}`}
+          style={[
+            {
+              cursor: "pointer",
+              color: getRgbColor(profile?.color),
+            },
+          ]}
+          onPress={() =>
+            Linking.openURL(`https://bsky.app/profile/${mtnftr.did || ""}`)
+          }
+        >
+          {obj.text}
+        </Text>
+      );
+    }
+  } else {
+    return <Text key={`text-${index}`}>{obj.text}</Text>;
+  }
+};
+
+const RichTextMessage = ({
+  text,
+  facets,
+}: {
+  text: string;
+  facets: ChatMessageViewHydrated["record"]["facets"];
+}) => {
+  if (!facets?.length) return <Text>{text}</Text>;
+
+  const userCache = useLivestreamStore((state) => state.authors);
+
+  let segs = segmentize(text, facets as Facet[]);
+
+  return segs.map((seg, i) => segmentedObject(seg, i, userCache));
+};
+export const RenderChatMessage = memo(
+  function RenderChatMessage({
+    item,
+    showReply = true,
+    showTime = true,
+  }: {
+    item: ChatMessageViewHydrated;
+    userCache?: Map<string, ChatMessageViewHydrated["chatProfile"]>;
+    showReply?: boolean;
+    showTime?: boolean;
+  }) {
+    const formatTime = useCallback((dateString: string) => {
+      return new Date(dateString).toLocaleString(undefined, {
+        hour: "2-digit",
+        minute: "2-digit",
+        hour12: false,
+      });
+    }, []);
+
+    return (
+      <>
+        {item.replyTo && showReply && (
+          <View
+            style={[
+              gap.all[2],
+              layout.flex.row,
+              w.percent[100],
+              borders.left.width.medium,
+              borders.left.color.gray[700],
+              ml[4],
+              pl[4],
+              opacity[80],
+            ]}
+          >
+            <Text numberOfLines={1} style={[flex.shrink[1], mr[4]]}>
+              <Text
+                style={{
+                  color: getRgbColor((item.replyTo.chatProfile as any).color),
+                  fontWeight: "thin",
+                }}
+              >
+                @{(item.replyTo.author as any).handle}
+              </Text>{" "}
+              <Text
+                style={{
+                  color: atoms.colors.gray[300],
+                  fontStyle: "italic",
+                }}
+              >
+                {(item.replyTo.record as any).text}
+              </Text>
+            </Text>
+          </View>
+        )}
+        <View style={[gap.all[2], layout.flex.row, w.percent[100]]}>
+          {showTime && (
+            <Text
+              style={{
+                fontVariant: ["tabular-nums"],
+                color: atoms.colors.gray[300],
+              }}
+            >
+              {formatTime(item.record.createdAt)}
+            </Text>
+          )}
+          <Text weight="bold" color="default" style={[flex.shrink[1]]}>
+            <Text
+              style={[
+                {
+                  cursor: "pointer",
+                  color: getRgbColor(item.chatProfile?.color),
+                },
+              ]}
+            >
+              @{item.author.handle}
+            </Text>
+            :{" "}
+            <RichTextMessage
+              text={item.record.text}
+              facets={item.record.facets || []}
+            />
+          </Text>
+        </View>
+      </>
+    );
+  },
+  (prevProps, nextProps) => {
+    return (
+      prevProps.item.author.handle === nextProps.item.author.handle &&
+      prevProps.item.record.text === nextProps.item.record.text
+    );
+  },
+);

package/src/components/chat/chat.tsx

@@ -0,0 +1,128 @@
+import { Reply, ShieldEllipsis } from "lucide-react-native";
+import { ComponentProps, memo, useRef } from "react";
+import { FlatList, Platform, Pressable } from "react-native";
+import Swipeable, {
+  SwipeableMethods,
+} from "react-native-gesture-handler/ReanimatedSwipeable";
+import Reanimated, {
+  SharedValue,
+  useAnimatedStyle,
+} from "react-native-reanimated";
+import { ChatMessageViewHydrated } from "streamplace";
+import {
+  Text,
+  useChat,
+  usePlayerStore,
+  useSetReplyToMessage,
+  View,
+} from "../../";
+import { flex, py, w } from "../../lib/theme/atoms";
+import { RenderChatMessage } from "./chat-message";
+import { ModView } from "./mod-view";
+
+function RightAction(prog: SharedValue<number>, drag: SharedValue<number>) {
+  const styleAnimation = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateX: drag.value + 25 }],
+    };
+  });
+
+  return (
+    <Reanimated.View style={[styleAnimation]}>
+      <Reply color="white" />
+    </Reanimated.View>
+  );
+}
+
+function LeftAction(prog: SharedValue<number>, drag: SharedValue<number>) {
+  const styleAnimation = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateX: drag.value - 25 }],
+    };
+  });
+
+  return (
+    <Reanimated.View style={[styleAnimation]}>
+      <ShieldEllipsis color="white" />
+    </Reanimated.View>
+  );
+}
+
+const SHOWN_MSGS =
+  Platform.OS === "android" || Platform.OS === "ios" ? 100 : 25;
+
+const keyExtractor = (item: ChatMessageViewHydrated, index: number) => {
+  return `${item.uri}`;
+};
+
+const ChatLine = memo(({ item }: { item: ChatMessageViewHydrated }) => {
+  const setReply = useSetReplyToMessage();
+  const setModMsg = usePlayerStore((state) => state.setModMessage);
+  const swipeableRef = useRef<SwipeableMethods | null>(null);
+  return (
+    <Pressable onLongPress={() => setModMsg(item)}>
+      <Swipeable
+        containerStyle={[py[1]]}
+        friction={2}
+        enableTrackpadTwoFingerGesture
+        rightThreshold={40}
+        renderRightActions={Platform.OS === "android" ? undefined : RightAction}
+        renderLeftActions={Platform.OS === "android" ? undefined : LeftAction}
+        overshootFriction={9}
+        ref={(ref) => {
+          swipeableRef.current = ref;
+        }}
+        onSwipeableOpen={(r) => {
+          if (r === (Platform.OS === "android" ? "right" : "left")) {
+            setReply(item);
+          }
+          if (r === (Platform.OS === "android" ? "left" : "right")) {
+            setModMsg(item);
+          }
+          // close this swipeable
+          const swipeable = swipeableRef.current;
+          if (swipeable) {
+            swipeable.close();
+          }
+        }}
+      >
+        <RenderChatMessage item={item} />
+      </Swipeable>
+    </Pressable>
+  );
+});
+
+export function Chat({
+  shownMessages = SHOWN_MSGS,
+  style: propsStyle,
+  ...props
+}: ComponentProps<typeof View> & {
+  shownMessages?: number;
+  style?: ComponentProps<typeof View>["style"];
+}) {
+  const chat = useChat();
+
+  if (!chat)
+    return (
+      <View style={[flex.shrink[1]]}>
+        <Text>Loading chaat...</Text>
+      </View>
+    );
+
+  return (
+    <View style={[flex.shrink[1]].concat(propsStyle || [])}>
+      <FlatList
+        style={[flex.grow[1], flex.shrink[1], w.percent[100]]}
+        data={chat}
+        inverted={true}
+        keyExtractor={keyExtractor}
+        renderItem={({ item, index }) => <ChatLine item={item} />}
+        removeClippedSubviews={true}
+        maxToRenderPerBatch={10}
+        initialNumToRender={10}
+        updateCellsBatchingPeriod={50}
+      />
+      <ModView />
+    </View>
+  );
+}

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

@@ -0,0 +1,71 @@
+import { Pressable } from "react-native";
+import { ChatMessageViewHydrated } from "streamplace";
+import { Text, View } from "../..";
+import { bg, layout, left, right, zIndex } from "../../lib/theme/atoms";
+
+interface MentionSuggestionsProps {
+  authors: Map<string, ChatMessageViewHydrated["chatProfile"]>;
+  onSelect: (authorHandle: string) => void;
+  highlightedIndex: number;
+}
+
+export function MentionSuggestions({
+  authors,
+  onSelect,
+  highlightedIndex,
+}: MentionSuggestionsProps) {
+  if (!authors || authors.size === 0) {
+    return null; // No authors to display
+  }
+
+  const authorHandles = Array.from(authors.keys());
+  return (
+    <View
+      style={[
+        bg.gray[800],
+        layout.position.absolute,
+
+        left[0],
+        right[0],
+        zIndex[50],
+        {
+          bottom: "100%",
+          borderRadius: 8,
+          boxShadow: "0px 4px 6px rgba(0, 0, 0, 0.1)",
+        },
+      ]}
+    >
+      {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",
+              }}
+            >
+              @{handle}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}