Update live stream page

packages/app/src/Element/LiveChat.css

@@ -1,11 +1,46 @@
 .live-chat {
-  height: calc(100vh - 73px);
+  height: 100%;
   display: flex;
   flex-direction: column;
 }
 
 .live-chat > div:nth-child(1) {
+  font-size: 24px;
+  line-height: 29px;
+  font-weight: bold;
+}
+
+.live-chat > div:nth-child(2) {
   flex-grow: 1;
   display: flex;
+  gap: 16px;
   flex-direction: column-reverse;
+  margin-block-end: 20px;
+}
+
+.live-chat > div:nth-child(3) {
+  display: flex;
+  gap: 10px;
+}
+
+.live-chat .message {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.live-chat .message .name {
+  display: inline-flex;
+  align-items: center;
+  color: var(--highlight);
+  font-weight: 600;
+  cursor: pointer;
+  user-select: none;
+}
+
+.live-chat .message .avatar {
+  width: 24px;
+  height: 24px;
+  display: inline-block;
+  margin-right: 8px;
 }

packages/app/src/Element/LiveChat.tsx

@@ -1,30 +1,47 @@
 import "./LiveChat.css";
-import { NostrLink, TaggedRawEvent } from "@snort/system";
+import { EventKind, NostrLink, TaggedRawEvent } from "@snort/system";
 import { useUserProfile } from "@snort/system-react";
 import { useState } from "react";
-import Textarea from "./Textarea";
+import { useNavigate } from "react-router-dom";
+import { FormattedMessage, useIntl } from "react-intl";
+
+import Textarea from "Element/Textarea";
 import { useLiveChatFeed } from "Feed/LiveChatFeed";
 import useEventPublisher from "Feed/EventPublisher";
-import { System } from "index";
 import { getDisplayName } from "Element/ProfileImage";
+import Avatar from "Element/Avatar";
+import AsyncButton from "Element/AsyncButton";
+import Text from "Element/Text";
+import { System } from "index";
+import { profileLink } from "SnortUtils";
 
 export function LiveChat({ ev, link }: { ev: TaggedRawEvent; link: NostrLink }) {
   const [chat, setChat] = useState("");
   const messages = useLiveChatFeed(link);
   const pub = useEventPublisher();
+  const { formatMessage } = useIntl();
 
   async function sendChatMessage() {
-    const reply = await pub?.note(chat, eb => {
-      return eb.tag(["a", `${link.kind}:${link.author}:${link.id}`]);
-    });
-    if (reply) {
-      console.debug(reply);
-      System.BroadcastEvent(reply);
+    if (chat.length > 1) {
+      const reply = await pub?.generic(eb => {
+        return eb
+          .kind(1311 as EventKind)
+          .content(chat)
+          .tag(["a", `${link.kind}:${link.author}:${link.id}`])
+          .processContent();
+      });
+      if (reply) {
+        console.debug(reply);
+        System.BroadcastEvent(reply);
+      }
+      setChat("");
     }
-    setChat("");
   }
   return (
     <div className="live-chat">
+      <div>
+        <FormattedMessage defaultMessage="Stream Chat" />
+      </div>
       <div>
         {[...(messages.data ?? [])]
           .sort((a, b) => b.created_at - a.created_at)
@@ -39,13 +56,19 @@ export function LiveChat({ ev, link }: { ev: TaggedRawEvent; link: NostrLink })
           onChange={v => setChat(v.target.value)}
           value={chat}
           onFocus={() => {}}
-          placeholder=""
+          placeholder={formatMessage({
+            defaultMessage: "Message...",
+          })}
           onKeyDown={async e => {
             if (e.code === "Enter") {
+              e.preventDefault();
               await sendChatMessage();
             }
           }}
         />
+        <AsyncButton onClick={sendChatMessage}>
+          <FormattedMessage defaultMessage="Send" />
+        </AsyncButton>
       </div>
     </div>
   );
@@ -53,11 +76,17 @@ export function LiveChat({ ev, link }: { ev: TaggedRawEvent; link: NostrLink })
 
 function ChatMessage({ ev }: { ev: TaggedRawEvent }) {
   const profile = useUserProfile(System, ev.pubkey);
+  const navigate = useNavigate();
+
   return (
-    <div>
-      <b>{getDisplayName(profile, ev.pubkey)}</b>
-      :&nbsp;
-      {ev.content}
+    <div className="message">
+      <div className="name" onClick={() => navigate(profileLink(ev.pubkey, ev.relays))}>
+        <Avatar user={profile} />
+        {getDisplayName(profile, ev.pubkey)}:
+      </div>
+      <span>
+        <Text disableMedia={true} content={ev.content} creator={ev.pubkey} tags={ev.tags} />
+      </span>
     </div>
   );
 }

packages/app/src/Element/Text.tsx

@@ -50,7 +50,7 @@ export default function Text({ content, tags, creator, disableMedia, depth }: Te
             };
 
             if (validateLink()) {
-              if (disableMedia ?? false) {
+              if ((disableMedia ?? false) && !a.startsWith("nostr:")) {
                 return (
                   <a href={a} onClick={e => e.stopPropagation()} target="_blank" rel="noreferrer" className="ext">
                     {a}