feat: autocomplete custom emoji

2023-06-24 08:25:25 +02:00 · 2023-06-24 08:25:25 +02:00 · 4eb30813ed
commit 4eb30813ed
parent becae9cfb4
17 changed files with 528 additions and 211 deletions
--- a/.prettierrc.json
+++ b/.prettierrc.json
@ -0,0 +1 @@
+{}
--- a/package.json
+++ b/package.json
@ -7,7 +7,10 @@
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
+    "@types/webscopeio__react-textarea-autocomplete": "^4.7.2",
+    "@webscopeio/react-textarea-autocomplete": "^4.9.2",
    "hls.js": "^1.4.6",
+    "lodash": "^4.17.21",
    "qr-code-styling": "^1.6.0-rc.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
@ -43,7 +46,9 @@
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@types/lodash": "^4.14.195",
    "@webbtc/webln-types": "^1.0.12",
+    "prettier": "^2.8.8",
    "typescript": "^5.1.3"
  }
 }
--- a/src/element/emoji.css
+++ b/src/element/emoji.css
@ -0,0 +1,6 @@
+.emoji {
+  width: 21px;
+  height: 21px;
+  display: inline-block;
+  margin-bottom: -5px;
+}
--- a/src/element/emoji.tsx
+++ b/src/element/emoji.tsx
@ -0,0 +1,33 @@
+import "./emoji.css";
+import { useMemo } from "react";
+
+export type EmojiProps = {
+  name: string;
+  url: string;
+};
+
+export function Emoji({ name, url }: EmojiProps) {
+  return <img alt={name} src={url} className="emoji" />;
+}
+
+export type EmojiTag = ["emoji", string, string];
+
+export function Emojify({
+  content,
+  emoji,
+}: {
+  content: string;
+  emoji: EmojiTag[];
+}) {
+  const emojified = useMemo(() => {
+    return content.split(/:(\w+):/g).map((i) => {
+      const t = emoji.find((t) => t[1] === i);
+      if (t) {
+        return <Emoji name={t[1]} url={t[2]} />;
+      } else {
+        return i;
+      }
+    });
+  }, [content, emoji]);
+  return <>{emojified}</>;
+}
--- a/src/element/live-chat.css
+++ b/src/element/live-chat.css
@ -74,4 +74,4 @@
  display: flex;
  align-items: center;
  gap: 8px;
-}
+}
--- a/src/element/live-chat.tsx
+++ b/src/element/live-chat.tsx
@ -1,99 +1,75 @@
 import "./live-chat.css";
-import { EventKind, NostrLink, TaggedRawEvent, EventPublisher, parseZap } from "@snort/system";
-import { useState } from "react";
+import {
+  EventKind,
+  NostrLink,
+  TaggedRawEvent,
+  EventPublisher,
+  parseZap,
+} from "@snort/system";
+import { useState, type KeyboardEvent, type ChangeEvent } from "react";

+import useEmoji from "hooks/emoji";
 import { System } from "index";
 import { useLiveChatFeed } from "hooks/live-chat";
 import AsyncButton from "./async-button";
 import { Profile } from "./profile";
 import { Icon } from "./icon";
 import { Text } from "./text";
+import { Textarea } from "./textarea";
 import Spinner from "./spinner";
 import { useLogin } from "hooks/login";
 import { useUserProfile } from "@snort/system-react";
-import { formatSats, formatShort } from "number";
+import { formatSats } from "number";

 export interface LiveChatOptions {
-  canWrite?: boolean,
-  showHeader?: boolean
+  canWrite?: boolean;
+  showHeader?: boolean;
 }

-export function LiveChat({ link, options }: { link: NostrLink, options?: LiveChatOptions }) {
-  const [chat, setChat] = useState("");
+export function LiveChat({
+  link,
+  options,
+}: {
+  link: NostrLink;
+  options?: LiveChatOptions;
+}) {
  const messages = useLiveChatFeed(link);
  const login = useLogin();
-
-  async function sendChatMessage() {
-    const pub = await EventPublisher.nip7();
-    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}`, "", "root"])
-          .processContent();
-      });
-      if (reply) {
-        console.debug(reply);
-        System.BroadcastEvent(reply);
-      }
-      setChat("");
-    }
-  }
-
-  function writeMessage() {
-    return <>
-      <div className="input">
-        <input
-          type="text"
-          autoFocus={false}
-          onChange={v => setChat(v.target.value)}
-          value={chat}
-          placeholder="Message"
-          onKeyDown={async e => {
-            if (e.code === "Enter") {
-              e.preventDefault();
-              await sendChatMessage();
-            }
-          }}
-        />
-        <Icon name="message" size={15} />
-      </div>
-      <AsyncButton onClick={sendChatMessage} className="btn btn-border">
-        Send
-      </AsyncButton>
-    </>
-  }
-
  return (
    <div className="live-chat">
-      {(options?.showHeader ?? true) && <div className="header">
-        Stream Chat
-      </div>}
+      {(options?.showHeader ?? true) && (
+        <div className="header">Stream Chat</div>
+      )}
      <div className="messages">
        {[...(messages.data ?? [])]
          .sort((a, b) => b.created_at - a.created_at)
-          .map(a => {
+          .map((a) => {
            switch (a.kind) {
              case 1311: {
                return <ChatMessage ev={a} link={link} key={a.id} />;
              }
              case EventKind.ZapReceipt: {
-                return <ChatZap ev={a} key={a.id} />
+                return <ChatZap ev={a} key={a.id} />;
              }
            }
            return null;
          })}
        {messages.data === undefined && <Spinner />}
      </div>
-      {(options?.canWrite ?? true) && <div className="write-message">
-        {login ? writeMessage() : <p>Please login to write messages!</p>}
-      </div>}
+      {(options?.canWrite ?? true) && (
+        <div className="write-message">
+          {login ? (
+            <WriteMessage link={link} />
+          ) : (
+            <p>Please login to write messages!</p>
+          )}
+        </div>
+      )}
    </div>
  );
 }

-function ChatMessage({ ev, link }: { ev: TaggedRawEvent, link: NostrLink }) {
+function ChatMessage({ ev, link }: { ev: TaggedRawEvent; link: NostrLink }) {
  return (
    <div className={`message${link.author === ev.pubkey ? " streamer" : ""}`}>
      <Profile pubkey={ev.pubkey} />
@ -113,19 +89,82 @@ function ChatZap({ ev }: { ev: TaggedRawEvent }) {
    <div className="pill">
      <div className="zap">
        <Icon name="zap" />
-        <Profile pubkey={parsed.anonZap ? "" : (parsed.sender ?? "")} options={{
-          showAvatar: !parsed.anonZap,
-          overrideName: parsed.anonZap ? "Anonymous" : undefined
-        }} />
-        zapped
-        &nbsp;
+        <Profile
+          pubkey={parsed.anonZap ? "" : parsed.sender ?? ""}
+          options={{
+            showAvatar: !parsed.anonZap,
+            overrideName: parsed.anonZap ? "Anonymous" : undefined,
+          }}
+        />
+        zapped &nbsp;
        {formatSats(parsed.amount)}
-        &nbsp;
-        sats
+        &nbsp; sats
      </div>
-      {parsed.content && <p>
-        {parsed.content}
-      </p>}
+      {parsed.content && <p>{parsed.content}</p>}
    </div>
  );
-}
+}
+
+function WriteMessage({ link }: { link: NostrLink }) {
+  const [chat, setChat] = useState("");
+  const login = useLogin();
+  const emojis = useEmoji(login!.pubkey);
+  const names = emojis.map((t) => t.at(1));
+
+  async function sendChatMessage() {
+    const pub = await EventPublisher.nip7();
+    if (chat.length > 1) {
+      let messageEmojis: string[][] = [];
+      for (const name of names) {
+        if (chat.includes(`:${name}:`)) {
+          const e = emojis.find((t) => t.at(1) === name);
+          messageEmojis.push(e as string[]);
+        }
+      }
+      const reply = await pub?.generic((eb) => {
+        eb.kind(1311 as EventKind)
+          .content(chat)
+          .tag(["a", `${link.kind}:${link.author}:${link.id}`, "", "root"])
+          .processContent();
+        for (const e of messageEmojis) {
+          eb.tag(e);
+        }
+        return eb;
+      });
+      if (reply) {
+        console.debug(reply);
+        System.BroadcastEvent(reply);
+      }
+      setChat("");
+    }
+  }
+
+  async function onKeyDown(e: KeyboardEvent) {
+    if (e.code === "Enter") {
+      e.preventDefault();
+      await sendChatMessage();
+    }
+  }
+
+  async function onChange(e: ChangeEvent) {
+    // @ts-expect-error
+    setChat(e.target.value);
+  }
+
+  return (
+    <>
+      <div className="input">
+        <Textarea
+          emojis={emojis}
+          value={chat}
+          onKeyDown={onKeyDown}
+          onChange={onChange}
+        />
+        <Icon name="message" size={15} />
+      </div>
+      <AsyncButton onClick={sendChatMessage} className="btn btn-border">
+        Send
+      </AsyncButton>
+    </>
+  );
+}
--- a/src/element/profile.css
+++ b/src/element/profile.css
@ -14,4 +14,5 @@
    background: #A7A7A7;
    border: unset;
    outline: unset;
-}
+    object-fit: cover;
+}
--- a/src/element/profile.tsx
+++ b/src/element/profile.tsx
@ -5,28 +5,39 @@ import { hexToBech32 } from "@snort/shared";
 import { System } from "index";

 export interface ProfileOptions {
-    showName?: boolean
-    showAvatar?: boolean
-    suffix?: string
-    overrideName?: string
+  showName?: boolean;
+  showAvatar?: boolean;
+  suffix?: string;
+  overrideName?: string;
 }

 export function getName(pk: string, user?: UserMetadata) {
-    const shortPubkey = hexToBech32("npub", pk).slice(0, 12);
-    if ((user?.display_name?.length ?? 0) > 0) {
-        return user?.display_name;
-    }
-    if ((user?.name?.length ?? 0) > 0) {
-        return user?.name;
-    }
-    return shortPubkey;
+  const shortPubkey = hexToBech32("npub", pk).slice(0, 12);
+  if ((user?.display_name?.length ?? 0) > 0) {
+    return user?.display_name;
+  }
+  if ((user?.name?.length ?? 0) > 0) {
+    return user?.name;
+  }
+  return shortPubkey;
 }

-export function Profile({ pubkey, options }: { pubkey: string, options?: ProfileOptions }) {
-    const profile = useUserProfile(System, pubkey);
+export function Profile({
+  pubkey,
+  options,
+}: {
+  pubkey: string;
+  options?: ProfileOptions;
+}) {
+  const profile = useUserProfile(System, pubkey);

-    return <div className="profile">
-        {(options?.showAvatar ?? true) && <img src={profile?.picture ?? ""} />}
-        {(options?.showName ?? true) && (options?.overrideName ?? getName(pubkey, profile))}
+  return (
+    <div className="profile">
+      {(options?.showAvatar ?? true) && (
+        <img alt={profile?.name || pubkey} src={profile?.picture ?? ""} />
+      )}
+      {(options?.showName ?? true) &&
+        (options?.overrideName ?? getName(pubkey, profile))}
    </div>
-}
+  );
+}
--- a/src/element/qr-code.tsx
+++ b/src/element/qr-code.tsx
@ -44,7 +44,12 @@ export default function QrCode(props: QrCodeProps) {
    } else if (qrRef.current) {
      qrRef.current.innerHTML = "";
    }
-  }, [props.data, props.link]);
+  }, [props.data, props.link, props.width, props.height, props.avatar]);

-  return <div className={`qr${props.className ? ` ${props.className}` : ""}`} ref={qrRef}></div>;
+  return (
+    <div
+      className={`qr${props.className ? ` ${props.className}` : ""}`}
+      ref={qrRef}
+    ></div>
+  );
 }
--- a/src/element/text.tsx
+++ b/src/element/text.tsx
@ -1,25 +1,14 @@
-import "./text.css";
 import { useMemo } from "react";
 import { TaggedRawEvent } from "@snort/system";
-
-type Emoji = [string, string];
-
-function replaceEmoji(content: string, emoji: Emoji[]) {
-  return content.split(/:(\w+):/g).map((i) => {
-    const t = emoji.find((a) => a[0] === i);
-    if (t) {
-      return <img alt={t[0]} src={t[1]} className="custom-emoji" />;
-    } else {
-      return i;
-    }
-  });
-}
+import { type EmojiTag, Emojify } from "./emoji";

 export function Text({ ev }: { ev: TaggedRawEvent }) {
  const emojis = useMemo(() => {
-    return ev.tags
-      .filter((t) => t.at(0) === "emoji")
-      .map((t) => t.slice(1) as Emoji);
+    return ev.tags.filter((t) => t.at(0) === "emoji").map((t) => t as EmojiTag);
  }, [ev]);
-  return <span>{replaceEmoji(ev.content, emojis)}</span>;
+  return (
+    <span>
+      <Emojify content={ev.content} emoji={emojis} />
+    </span>
+  );
 }
--- a/src/element/textarea.css
+++ b/src/element/textarea.css
@ -0,0 +1,29 @@
+.rta__list {
+  border: none;
+}
+.rta__item:not(:last-child) {
+  border: none;
+}
+.rta__entity--selected .emoji-item {
+  text-decoration: none;
+  background: #F838D9;
+}
+
+.emoji-item {
+  color: white;
+  background: #171717;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: 16px;
+  padding: 10px;
+}
+
+.emoji-item:hover {
+  color: #171717;
+  background: white;
+}
+
+.emoji-item .emoji-image {
+  margin: 0 8px;
+}
--- a/src/element/textarea.tsx
+++ b/src/element/textarea.tsx
@ -0,0 +1,63 @@
+import "./textarea.css";
+import ReactTextareaAutocomplete from "@webscopeio/react-textarea-autocomplete";
+import "@webscopeio/react-textarea-autocomplete/style.css";
+import type { KeyboardEvent, ChangeEvent } from "react";
+import { Emoji, type EmojiTag } from "./emoji";
+import uniqWith from "lodash/uniqWith";
+import isEqual from "lodash/isEqual";
+
+interface EmojiItemProps {
+  name: string;
+  url: string;
+}
+
+const EmojiItem = ({ entity: { name, url } }: { entity: EmojiItemProps }) => {
+  return (
+    <div className="emoji-item">
+      <div className="emoji-image">
+        <Emoji name={name} url={url} />
+      </div>
+      <div className="emoji-name">{name}</div>
+    </div>
+  );
+};
+
+interface TextareaProps {
+  emojis: EmojiTag[];
+  value: string;
+  onChange: (e: ChangeEvent<Element>) => void;
+  onKeyDown: (e: KeyboardEvent<Element>) => void;
+}
+
+export function Textarea({ emojis, ...props }: TextareaProps) {
+  const emojiDataProvider = async (token: string) => {
+    const results = emojis
+      .map((t) => {
+        return {
+          name: t.at(1) || "",
+          url: t.at(2) || "",
+        };
+      })
+      .filter(({ name }) => name.toLowerCase().includes(token.toLowerCase()));
+    return uniqWith(results, isEqual).slice(0, 5);
+  };
+  const trigger = {
+    ":": {
+      dataProvider: emojiDataProvider,
+      component: EmojiItem,
+      output: (item: EmojiItemProps) => `:${item.name}:`,
+    },
+  };
+
+  return (
+    <ReactTextareaAutocomplete
+      dir="auto"
+      loadingComponent={() => <span>Loading...</span>}
+      placeholder="Message"
+      autoFocus={false}
+      // @ts-expect-error
+      trigger={trigger}
+      {...props}
+    />
+  );
+}
--- a/src/hooks/emoji.tsx
+++ b/src/hooks/emoji.tsx
@ -0,0 +1,70 @@
+import { RequestBuilder, EventKind, FlatNoteStore } from "@snort/system";
+import { useRequestBuilder } from "@snort/system-react";
+import { System } from "index";
+import { useMemo } from "react";
+import type { EmojiTag } from "../element/emoji";
+
+export default function useEmoji(pubkey: string) {
+  const sub = useMemo(() => {
+    const rb = new RequestBuilder(`emoji:${pubkey}`);
+
+    rb.withFilter()
+      .authors([pubkey])
+      .kinds([10030 as EventKind, 30030 as EventKind]);
+
+    return rb;
+  }, [pubkey]);
+
+  const { data } = useRequestBuilder<FlatNoteStore>(System, FlatNoteStore, sub);
+  const userEmoji = data ?? [];
+
+  const related = useMemo(() => {
+    if (userEmoji) {
+      const tags = userEmoji.at(0)?.tags ?? [];
+      return tags.filter(
+        (t) => t.at(0) === "a" && t.at(1)?.startsWith(`30030:`)
+      );
+    }
+    return [];
+  }, [userEmoji]);
+
+  const subRelated = useMemo(() => {
+    const splitted = related.map((t) => t.at(1)!.split(":"));
+    const authors = splitted
+      .map((s) => s.at(1))
+      .filter((s) => s)
+      .map((s) => s as string);
+    const identifiers = splitted
+      .map((s) => s.at(2))
+      .filter((s) => s)
+      .map((s) => s as string);
+
+    const rb = new RequestBuilder(`emoji:${pubkey}`);
+
+    rb.withFilter()
+      .kinds([30030 as EventKind])
+      .authors(authors)
+      // @ts-expect-error
+      .tag(["d", identifiers]);
+
+    return rb;
+  }, [related]);
+
+  const { data: relatedData } = useRequestBuilder<FlatNoteStore>(
+    System,
+    FlatNoteStore,
+    subRelated
+  );
+  const emojiPacks = relatedData ?? [];
+
+  const emojis = useMemo(() => {
+    return userEmoji
+      .concat(emojiPacks)
+      .map((ev) => {
+        return ev.tags.filter((t) => t.at(0) === "emoji");
+      })
+      .flat() as EmojiTag[];
+  }, [userEmoji, emojiPacks]);
+
+  return emojis;
+}
--- a/src/index.tsx
+++ b/src/index.tsx
@ -1,56 +1,56 @@
-import './index.css';
+import "./index.css";

-import React from 'react';
-import ReactDOM from 'react-dom/client';
+import React from "react";
+import ReactDOM from "react-dom/client";
 import { NostrSystem } from "@snort/system";
-import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import { RouterProvider, createBrowserRouter } from "react-router-dom";

-import { RootPage } from './pages/root';
-import { LayoutPage } from 'pages/layout';
-import { StreamPage } from 'pages/stream-page';
-import { ChatPopout } from 'pages/chat-popout';
-import { LoginStore } from 'login';
+import { RootPage } from "./pages/root";
+import { LayoutPage } from "pages/layout";
+import { StreamPage } from "pages/stream-page";
+import { ChatPopout } from "pages/chat-popout";
+import { LoginStore } from "login";

-export const System = new NostrSystem({
-
-});
+export const System = new NostrSystem({});
 export const Login = new LoginStore();

 export const Relays = [
  "wss://relay.snort.social",
  "wss://nos.lol",
  "wss://relay.damus.io",
-  "wss://nostr.wine"
+  "wss://nostr.wine",
 ];

-Relays.forEach(r => System.ConnectToRelay(r, { read: true, write: true }));
+Relays.forEach((r) => System.ConnectToRelay(r, { read: true, write: true }));

 const router = createBrowserRouter([
  {
    element: <LayoutPage />,
-    loader: async() => {
+    loader: async () => {
      await System.Init();
      return null;
    },
    children: [
      {
        path: "/",
-        element: <RootPage />
+        element: <RootPage />,
      },
      {
        path: "/live/:id",
-        element: <StreamPage />
-      }
-    ]
+        element: <StreamPage />,
+      },
+    ],
  },
  {
    path: "/chat/:id",
-    element: <ChatPopout />
-  }
-])
-const root = ReactDOM.createRoot(document.getElementById('root') as HTMLDivElement);
+    element: <ChatPopout />,
+  },
+]);
+const root = ReactDOM.createRoot(
+  document.getElementById("root") as HTMLDivElement
+);
 root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
-);
+);
--- a/src/pages/layout.tsx
+++ b/src/pages/layout.tsx
@ -11,59 +11,72 @@ import { NewStream } from "element/new-stream";
 import { useState } from "react";

 export function LayoutPage() {
-    const navigate = useNavigate();
-    const login = useLogin();
-    const [newStream, setNewStream] = useState(false);
+  const navigate = useNavigate();
+  const login = useLogin();
+  const [newStream, setNewStream] = useState(false);

-    async function doLogin() {
-        const pub = await EventPublisher.nip7();
-        if (pub) {
-            Login.loginWithPubkey(pub.pubKey);
-        }
+  async function doLogin() {
+    const pub = await EventPublisher.nip7();
+    if (pub) {
+      Login.loginWithPubkey(pub.pubKey);
    }
+  }

-    function loggedIn() {
-        if (!login) return;
+  function loggedIn() {
+    if (!login) return;

-        return <>
-            <button type="button" className="btn btn-primary" onClick={() => setNewStream(true)}>
-                New Stream
-                <Icon name="signal" />
-            </button>
-            <Profile pubkey={login.pubkey} options={{
-                showName: false
-            }} />
-        </>
-    }
+    return (
+      <>
+        <button
+          type="button"
+          className="btn btn-primary"
+          onClick={() => setNewStream(true)}
+        >
+          New Stream
+          <Icon name="signal" />
+        </button>
+        <Profile
+          pubkey={login.pubkey}
+          options={{
+            showName: false,
+          }}
+        />
+      </>
+    );
+  }

-    function loggedOut() {
-        if (login) return;
+  function loggedOut() {
+    if (login) return;

-        return <>
-            <AsyncButton type="button" className="btn btn-border" onClick={doLogin}>
-                Login
-                <Icon name="login" />
-            </AsyncButton>
-        </>
-    }
+    return (
+      <>
+        <AsyncButton type="button" className="btn btn-border" onClick={doLogin}>
+          Login
+          <Icon name="login" />
+        </AsyncButton>
+      </>
+    );
+  }

-    return <>
-        <header>
-            <div onClick={() => navigate("/")}>
-                S
-            </div>
-            <div className="input">
-                <input type="text" placeholder="Search" />
-                <Icon name="search" size={15} />
-            </div>
-            <div>
-                {loggedIn()}
-                {loggedOut()}
-            </div>
-        </header>
-        <Outlet />
-        {newStream && <Modal onClose={() => setNewStream(false)} >
-            <NewStream onFinish={() => navigate("/")} />
-        </Modal>}
+  return (
+    <>
+      <header>
+        <div onClick={() => navigate("/")}>S</div>
+        <div className="input">
+          <input type="text" placeholder="Search" />
+          <Icon name="search" size={15} />
+        </div>
+        <div>
+          {loggedIn()}
+          {loggedOut()}
+        </div>
+      </header>
+      <Outlet />
+      {newStream && (
+        <Modal onClose={() => setNewStream(false)}>
+          <NewStream onFinish={() => navigate("/")} />
+        </Modal>
+      )}
    </>
-}
+  );
+}
--- a/src/pages/stream-page.tsx
+++ b/src/pages/stream-page.tsx
@ -53,33 +53,42 @@ export function StreamPage() {
            <h1>{findTag(thisEvent.data, "title")}</h1>
            <p>{findTag(thisEvent.data, "summary")}</p>
            <div className="tags">
-              <span className={`pill${isLive ? " live" : ""}`}>
-                {status}
-              </span>
+              <span className={`pill${isLive ? " live" : ""}`}>{status}</span>
              {thisEvent.data?.tags
-                .filter(a => a[0] === "t")
-                .map(a => a[1])
-                .map(a => (
+                .filter((a) => a[0] === "t")
+                .map((a) => a[1])
+                .map((a) => (
                  <span className="pill" key={a}>
                    {a}
                  </span>
                ))}
            </div>
-            {isMine && <div className="actions">
-              <button type="button" className="btn" onClick={() => setEdit(true)}>
-                Edit
-              </button>
-              <AsyncButton type="button" className="btn btn-red" onClick={deleteStream}>
-                Delete
-              </AsyncButton>
-            </div>}
+            {isMine && (
+              <div className="actions">
+                <button
+                  type="button"
+                  className="btn"
+                  onClick={() => setEdit(true)}
+                >
+                  Edit
+                </button>
+                <AsyncButton
+                  type="button"
+                  className="btn btn-red"
+                  onClick={deleteStream}
+                >
+                  Delete
+                </AsyncButton>
+              </div>
+            )}
          </div>
          <div>
            <div className="flex g24">
-              <Profile
-                pubkey={thisEvent.data?.pubkey ?? ""}
-              />
-              <button onClick={() => setZap(true)} className="btn btn-primary zap">
+              <Profile pubkey={thisEvent.data?.pubkey ?? ""} />
+              <button
+                onClick={() => setZap(true)}
+                className="btn btn-primary zap"
+              >
                Zap
                <Icon name="zap" size={16} />
              </button>
@ -88,16 +97,24 @@ export function StreamPage() {
        </div>
      </div>
      <LiveChat link={link} />
-      {zap && zapTarget && thisEvent.data && <Modal onClose={() => setZap(false)}>
-        <SendZaps
-          lnurl={zapTarget}
-          ev={thisEvent.data}
-          targetName={getName(thisEvent.data.pubkey, profile)}
-          onFinish={() => setZap(false)} />
-      </Modal>}
-      {edit && thisEvent.data && <Modal onClose={() => setEdit(false)}>
-        <NewStream ev={thisEvent.data} onFinish={() => window.location.reload()} />
-      </Modal>}
+      {zap && zapTarget && thisEvent.data && (
+        <Modal onClose={() => setZap(false)}>
+          <SendZaps
+            lnurl={zapTarget}
+            ev={thisEvent.data}
+            targetName={getName(thisEvent.data.pubkey, profile)}
+            onFinish={() => setZap(false)}
+          />
+        </Modal>
+      )}
+      {edit && thisEvent.data && (
+        <Modal onClose={() => setEdit(false)}>
+          <NewStream
+            ev={thisEvent.data}
+            onFinish={() => window.location.reload()}
+          />
+        </Modal>
+      )}
    </div>
  );
 }
--- a/yarn.lock
+++ b/yarn.lock
@ -2188,6 +2188,11 @@
  resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
  integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==

+"@types/lodash@^4.14.195":
+  version "4.14.195"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.195.tgz#bafc975b252eb6cea78882ce8a7b6bf22a6de632"
+  integrity sha512-Hwx9EUgdwf2GLarOjQp5ZH8ZmblzcbTBC2wtQWNKARBSxM9ezRIAUpeDTgoQRAFB0+8CNWXVA9+MaSOzOF3nPg==
+
 "@types/mime@*":
  version "3.0.1"
  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-3.0.1.tgz#5f8f2bca0a5863cb69bc0b0acd88c96cb1d4ae10"
@ -2318,6 +2323,13 @@
  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.3.tgz#a136f83b0758698df454e328759dbd3d44555311"
  integrity sha512-NfQ4gyz38SL8sDNrSixxU2Os1a5xcdFxipAFxYEuLUlvU2uDwS4NUpsImcf1//SlWItCVMMLiylsxbmNMToV/g==

+"@types/webscopeio__react-textarea-autocomplete@^4.7.2":
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/@types/webscopeio__react-textarea-autocomplete/-/webscopeio__react-textarea-autocomplete-4.7.2.tgz#605e8a6b4194fb4b6e55df8a19bc8fcd56319cfa"
+  integrity sha512-e1DZGD+eH19BnllTWCGXAdrMa2kI53wEMuhn/d+wUmnu8//ZI6BiuK/EPdw07fI4+tlyo5qdPZdXdpkoXHJVOw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/ws@^8.5.5":
  version "8.5.5"
  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.5.tgz#af587964aa06682702ee6dcbc7be41a80e4b28eb"
@ -2561,6 +2573,14 @@
  resolved "https://registry.yarnpkg.com/@webbtc/webln-types/-/webln-types-1.0.12.tgz#ddb5f0dbaa0a853ef21a4f36a603199d43cc8682"
  integrity sha512-uCsJt78RaW/UYDXwAjjs6aj7fiXyozwMknWvPROCaGMx+rXoPddtDjMIMbMFLvUJVQmnyzpqGkx/0jBIvVaVvA==

+"@webscopeio/react-textarea-autocomplete@^4.9.2":
+  version "4.9.2"
+  resolved "https://registry.yarnpkg.com/@webscopeio/react-textarea-autocomplete/-/react-textarea-autocomplete-4.9.2.tgz#b39e57d8048ad2e8790d70073afe63eafa877345"
+  integrity sha512-9l5lbyA709d5HHvI/COflSnblBJeYGxB2/0ghP3m3YViLzXRMzJwaXqnqz6oA96y7QdR3pQWYtVmkUKA0AUVAA==
+  dependencies:
+    custom-event "^1.0.1"
+    textarea-caret "3.0.2"
+
 "@xtuc/ieee754@^1.2.0":
  version "1.2.0"
  resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790"
@ -3711,6 +3731,11 @@ csstype@^3.0.2:
  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
  integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==

+custom-event@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/custom-event/-/custom-event-1.0.1.tgz#5d02a46850adf1b4a317946a3928fccb5bfd0425"
+  integrity sha512-GAj5FOq0Hd+RsCGVJxZuKaIDXDf3h6GQoNEjFgbLLI/trgtavwUbSnZ5pVfg27DVCaWjIohryS0JFwIJyT2cMg==
+
 damerau-levenshtein@^1.0.8:
  version "1.0.8"
  resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
@ -7550,6 +7575,11 @@ prelude-ls@~1.1.2:
  resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
  integrity sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==

+prettier@^2.8.8:
+  version "2.8.8"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
+  integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
+
 pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
  version "5.6.0"
  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
@ -8787,6 +8817,11 @@ text-table@^0.2.0:
  resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
  integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==

+textarea-caret@3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/textarea-caret/-/textarea-caret-3.0.2.tgz#f360c48699aa1abf718680a43a31a850665c2caf"
+  integrity sha512-gRzeti2YS4did7UJnPQ47wrjD+vp+CJIe9zbsu0bJ987d8QVLvLNG9757rqiQTIy4hGIeFauTTJt5Xkn51UkXg==
+
 thenify-all@^1.0.0:
  version "1.6.0"
  resolved "https://registry.yarnpkg.com/thenify-all/-/thenify-all-1.6.0.tgz#1a1918d402d8fc3f98fbf234db0bcc8cc10e9726"