Merge pull request #396 from streamplace/natb/system-messages

chat: add system messages to New Player

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

···
   (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
     );
   },
 );

js/components/src/components/chat/chat.tsx

···
 } from "react-native-reanimated";
 import { ChatMessageViewHydrated } from "streamplace";
 import {
+  SystemMessage,
   Text,
   useChat,
   usePlayerStore,
···
         }
       };
     }, []);
+
+    // Check if this is a system message
+    const isSystemMessage = item.author.did === "did:sys:system";
+
+    // For system messages, render without swipe gestures
+    if (isSystemMessage) {
+      return (
+        <View style={[py[1]]}>
+          <SystemMessage
+            title={item.record.text}
+            timestamp={new Date(item.record.createdAt)}
+          />
+        </View>
+      );
+    }
 
     if (isMouseDriven) {
       return (

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

···
+import { View } from "react-native";
+import { flex, gap, layout, ml, p, pl, w } from "../../ui";
+import { atoms } from "../ui";
+import { Code, Text } from "../ui/text";
+
+interface SystemMessageProps {
+  title: string;
+  timestamp: Date;
+}
+
+export function SystemMessage({ title, timestamp }: SystemMessageProps) {
+  return (
+    <View style={[w.percent[100], p[2]]}>
+      <Code color="muted" tracking="widest" style={[pl[12], ml[1]]}>
+        SYSTEM MESSAGE
+      </Code>
+      <View style={[gap.all[2], layout.flex.row]}>
+        <Text
+          style={{
+            fontVariant: ["tabular-nums"],
+            color: atoms.colors.gray[300],
+          }}
+        >
+          {timestamp.toLocaleTimeString([], {
+            hour: "2-digit",
+            minute: "2-digit",
+            hour12: false,
+          })}
+        </Text>
+        <Text weight="bold" color="default" style={[flex.shrink[1]]}>
+          {title}
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+export default SystemMessage;

js/components/src/index.tsx

···
 
 export * from "./components/chat/chat";
 export * from "./components/chat/chat-box";
+export * from "./components/chat/system-message";
+export * from "./lib/system-messages";

js/components/src/lib/system-messages.ts

···
+import { ChatMessageViewHydrated } from "streamplace";
+
+export enum SystemMessageType {
+  stream_start = "stream_start",
+  stream_end = "stream_end",
+  notification = "notification",
+}
+
+export interface SystemMessageMetadata {
+  username?: string;
+  action?: string;
+  count?: number;
+  duration?: string;
+  reason?: string;
+  streamerName?: string;
+}
+
+/**
+ * Creates a system message with the proper structure
+ * @param type The type of system message
+ * @param text The message text
+ * @param metadata Optional metadata for the message
+ * @returns A properly formatted ChatMessageViewHydrated object
+ */
+export const createSystemMessage = (
+  type: SystemMessageType,
+  text: string,
+  metadata?: SystemMessageMetadata,
+  date: Date = new Date(),
+): ChatMessageViewHydrated => {
+  const now = date;
+
+  return {
+    uri: `at://did:sys:system/place.stream.chat.message/${now.getTime()}`,
+    cid: `system-${now.getTime()}`,
+    author: {
+      did: "did:sys:system",
+      handle: type, // Use handle to specify the type of system message
+    },
+    record: {
+      text,
+      createdAt: now.toISOString(),
+      streamer: "system",
+      $type: "place.stream.chat.message",
+    },
+    indexedAt: now.toISOString(),
+    chatProfile: {
+      color: { red: 128, green: 128, blue: 128 }, // Gray color for system messages
+    },
+  };
+};
+
+/**
+ * System message factory functions for common scenarios
+ */
+export const SystemMessages = {
+  streamStart: (streamerName: string): ChatMessageViewHydrated =>
+    createSystemMessage(
+      SystemMessageType.stream_start,
+      `Now streaming - ${streamerName}`,
+      {
+        streamerName,
+      },
+    ),
+
+  // technically, streams can't 'end' on Streamplace
+  // possibly we could use deleting or editing streams (`endedAt` param) for this?
+  streamEnd: (duration?: string): ChatMessageViewHydrated =>
+    createSystemMessage(
+      SystemMessageType.stream_end,
+      duration ? `Stream has ended. Duration: ${duration}` : "Stream has ended",
+      { duration },
+    ),
+
+  notification: (message: string): ChatMessageViewHydrated =>
+    createSystemMessage(SystemMessageType.notification, message),
+};
+
+/**
+ * Checks if a message is a system message
+ * @param message The message to check
+ * @returns True if the message is a system message
+ */
+export const isSystemMessage = (message: ChatMessageViewHydrated): boolean => {
+  return message.author.did === "did:sys:system";
+};
+
+/**
+ * Gets the system message type from a message
+ * @param message The message to check
+ * @returns The system message type or null if not a system message
+ */
+export const getSystemMessageType = (
+  message: ChatMessageViewHydrated,
+): SystemMessageType | null => {
+  if (!isSystemMessage(message)) {
+    return null;
+  }
+  return message.author.handle as SystemMessageType;
+};
+
+/**
+ * Parses metadata from a system message based on its type
+ * @param message The system message to parse
+ * @returns The parsed metadata
+ */
+export const parseSystemMessageMetadata = (
+  message: ChatMessageViewHydrated,
+): SystemMessageMetadata => {
+  const metadata: SystemMessageMetadata = {};
+  const type = getSystemMessageType(message);
+  const text = message.record.text;
+
+  if (!type) return metadata;
+
+  switch (type) {
+    case "stream_end": {
+      const durationMatch = text.match(/Duration:\s*(\d+:\d+(?::\d+)?)/);
+      if (durationMatch) {
+        metadata.duration = durationMatch[1];
+      }
+      break;
+    }
+
+    case "stream_start": {
+      const streamerMatch = text.match(/^(.+?)\s+is now live!/);
+      if (streamerMatch) {
+        metadata.streamerName = streamerMatch[1];
+      }
+      break;
+    }
+  }
+
+  return metadata;
+};

js/components/src/livestream-store/chat.tsx

···
 
         if (parentMsgKey) {
           const parentMsg = newChatIndex[parentMsgKey];
-          processedMessage = {
-            ...message,
-            replyTo: {
-              cid: parentMsg.cid,
-              uri: parentMsg.uri,
-              author: parentMsg.author,
-              record: parentMsg.record,
-              chatProfile: parentMsg.chatProfile,
-              indexedAt: parentMsg.indexedAt,
-            },
-          };
+          // Don't allow replies to system messages
+          if (parentMsg.author.did !== "did:sys:system") {
+            processedMessage = {
+              ...message,
+              replyTo: {
+                cid: parentMsg.cid,
+                uri: parentMsg.uri,
+                author: parentMsg.author,
+                record: parentMsg.record,
+                chatProfile: parentMsg.chatProfile,
+                indexedAt: parentMsg.indexedAt,
+              },
+            };
+          }
         }
       }
     }

js/components/src/livestream-store/websocket-consumer.tsx

···
   PlaceStreamLivestream,
   PlaceStreamSegment,
 } from "streamplace";
+import { SystemMessages } from "../lib/system-messages";
 import { reduceChat } from "./chat";
 import { LivestreamState } from "./livestream-state";
 
···
 ): LivestreamState => {
   for (const message of messages) {
     if (PlaceStreamLivestream.isLivestreamView(message)) {
+      const newLivestream = message as LivestreamViewHydrated;
+      const oldLivestream = state.livestream;
+
+      // check if this is actually new
+      if (!oldLivestream || oldLivestream.uri !== newLivestream.uri) {
+        const streamTitle = newLivestream.record.title || "something cool!";
+        const systemMessage = SystemMessages.streamStart(streamTitle);
+        // set proper times
+        systemMessage.indexedAt = newLivestream.indexedAt;
+        systemMessage.record.createdAt = newLivestream.record.createdAt;
+
+        state = reduceChat(state, [systemMessage], []);
+      }
+
       state = {
         ...state,
-        livestream: message as LivestreamViewHydrated,
+        livestream: newLivestream,
       };
     } else if (PlaceStreamLivestream.isViewerCount(message)) {
       state = {