From 63af9b77017b2c370153e4c512039f8a659654a1 Mon Sep 17 00:00:00 2001
From: Ticruz <thib.duchene@gmail.com>
Date: Tue, 10 Dec 2024 16:39:34 +0100
Subject: [PATCH 1/2] - fix Chat send is slow #499 - add cancelable button to
 message - show message status

---
 src/app/views/ChannelsDetail.svelte |  10 ++-
 src/engine/commands.ts              |   6 +-
 src/partials/Channel.svelte         | 107 +++++-----------------------
 src/partials/Message.svelte         |  87 ++++++++++++++++++++++
 4 files changed, 112 insertions(+), 98 deletions(-)
 create mode 100644 src/partials/Message.svelte

diff --git a/src/app/views/ChannelsDetail.svelte b/src/app/views/ChannelsDetail.svelte
index a40892631..1e9565b6b 100644
--- a/src/app/views/ChannelsDetail.svelte
+++ b/src/app/views/ChannelsDetail.svelte
@@ -10,7 +10,7 @@
   import PersonCircles from "src/app/shared/PersonCircles.svelte"
   import PersonAbout from "src/app/shared/PersonAbout.svelte"
   import {router} from "src/app/util/router"
-  import {sendMessage, markChannelRead, getChannelIdFromEvent, listenForMessages} from "src/engine"
+  import {markChannelRead, getChannelIdFromEvent, listenForMessages} from "src/engine"
   import Popover from "src/partials/Popover.svelte"
 
   export let pubkeys
@@ -30,10 +30,6 @@
 
   const showPerson = pubkey => router.at("people").of(pubkey).open()
 
-  const send = async content => {
-    await sendMessage(channelId, content)
-  }
-
   onMount(() => {
     isAccepted = $messages.some(m => m.pubkey === $session.pubkey)
     markChannelRead(channelId)
@@ -50,9 +46,11 @@
   })
 
   document.title = `Direct Messages`
+
+  $: console.log("messages", $messages)
 </script>
 
-<Channel {pubkeys} messages={$messages} sendMessage={send} {initialMessage}>
+<Channel {pubkeys} {channelId} messages={$messages} {initialMessage}>
   <div slot="header" class="flex h-16 justify-between px-4">
     <div class="flex items-center gap-4">
       <div class="flex items-center gap-4 pt-1">
diff --git a/src/engine/commands.ts b/src/engine/commands.ts
index 3a710b6f0..6b31b745a 100644
--- a/src/engine/commands.ts
+++ b/src/engine/commands.ts
@@ -408,7 +408,7 @@ export const markAsSeen = async (kind: number, eventsByKey: Record<string, Trust
 
 // Messages
 
-export const sendMessage = async (channelId: string, content: string) => {
+export const sendMessage = async (channelId: string, content: string, delay: number) => {
   const recipients = channelId.split(",")
   const template = {
     content,
@@ -421,10 +421,12 @@ export const sendMessage = async (channelId: string, content: string) => {
     const helper = Nip59.fromSigner(signer.get())
     const rumor = await helper.wrap(recipient, template)
 
-    await publish({
+    repository.publish(rumor)
+    publish({
       event: rumor.wrap,
       relays: ctx.app.router.PubkeyInbox(recipient).getUrls(),
       forcePlatform: false,
+      delay,
     })
   }
 }
diff --git a/src/partials/Channel.svelte b/src/partials/Channel.svelte
index da90e2c4f..9c4f9a0a7 100644
--- a/src/partials/Channel.svelte
+++ b/src/partials/Channel.svelte
@@ -1,36 +1,27 @@
 <script lang="ts">
-  import cx from "classnames"
-  import {onMount} from "svelte"
-  import {pluralize} from "hurdak"
-  import {derived} from "svelte/store"
   import {sleep} from "@welshman/lib"
   import {getListTags, type TrustedEvent} from "@welshman/util"
-  import {Nip46Signer} from "@welshman/signer"
-  import {
-    session,
-    signer,
-    displayProfileByPubkey,
-    inboxRelaySelectionsByPubkey,
-  } from "@welshman/app"
+  import {session, displayProfileByPubkey, inboxRelaySelectionsByPubkey} from "@welshman/app"
+  import {pluralize} from "hurdak"
   import {prop, max, reverse, pluck, sortBy, last} from "ramda"
-  import {fly, slide} from "src/util/transition"
-  import {createScroller, displayList, formatTimestamp} from "src/util/misc"
+  import {onMount} from "svelte"
+  import {derived} from "svelte/store"
+  import {Editor} from "svelte-tiptap"
+  import {fly} from "src/util/transition"
+  import {createScroller, displayList} from "src/util/misc"
   import Spinner from "src/partials/Spinner.svelte"
   import Anchor from "src/partials/Anchor.svelte"
-  import Popover from "src/partials/Popover.svelte"
   import FlexColumn from "src/partials/FlexColumn.svelte"
+  import Message from "src/partials/Message.svelte"
   import Modal from "src/partials/Modal.svelte"
   import Subheading from "src/partials/Subheading.svelte"
-  import PersonBadgeMedium from "src/app/shared/PersonBadgeMedium.svelte"
-  import NoteContent from "src/app/shared/NoteContent.svelte"
-  import {hasNip44, ensureMessagePlaintext} from "src/engine"
-  import {Editor} from "svelte-tiptap"
+  import {hasNip44, sendMessage, userSettings} from "src/engine"
   import {getEditorOptions} from "src/app/editor"
   import Compose from "src/app/shared/Compose.svelte"
 
   export let pubkeys
-  export let sendMessage: (content: string) => Promise<void>
   export let initialMessage = ""
+  export let channelId: string
   export let messages: TrustedEvent[]
 
   let editor: Editor
@@ -48,8 +39,6 @@
 
   let confirmIsOpen = false
 
-  const getContent = e => (e.kind === 4 ? ensureMessagePlaintext(e) : e.content) || ""
-
   const openConfirm = () => {
     confirmIsOpen = true
   }
@@ -122,15 +111,15 @@
 
   const send = async () => {
     const content = editor.getText({blockSeparator: "\n"}).trim()
+    editor.commands.clearContent()
 
     if (content) {
       sending = true
 
-      await sendMessage(content)
+      await sendMessage(channelId, content, $userSettings.send_delay)
 
       sending = false
       stickToBottom()
-      editor.commands.clearContent()
     }
   }
 
@@ -166,16 +155,6 @@
   <div
     bind:this={element}
     class="flex flex-grow flex-col-reverse justify-start overflow-auto p-4 pb-6">
-    <div>
-      {#if sending && $signer instanceof Nip46Signer}
-        <div
-          class="m-auto flex items-center justify-center gap-2 pt-6 text-neutral-500"
-          transition:slide>
-          <i class="fa fa-circle-notch fa-spin" />
-          <span>Sending your message...</span>
-        </div>
-      {/if}
-    </div>
     {#if !userHasInbox}
       <div class="m-auto max-w-96 py-20 text-center">
         <div class="mb-4 text-lg text-accent">
@@ -187,62 +166,7 @@
       </div>
     {/if}
     {#each groupedMessages as message (message.id)}
-      <div in:fly={{y: 20}} class="grid gap-2 py-1">
-        <div
-          class={cx("flex max-w-xl flex-col gap-2 rounded-2xl px-4 py-2", {
-            "ml-12 justify-self-end rounded-br-none bg-neutral-100 text-neutral-800":
-              message.pubkey === $session.pubkey,
-            "mr-12 rounded-bl-none bg-tinted-800": message.pubkey !== $session.pubkey,
-          })}>
-          {#if message.showProfile && message.pubkey !== $session.pubkey}
-            <PersonBadgeMedium pubkey={message.pubkey} />
-          {/if}
-          <div class="break-words">
-            {#await getContent(message)}
-              <!-- pass -->
-            {:then content}
-              <NoteContent showEntire note={{...message, content}} />
-            {/await}
-          </div>
-          <small
-            class="mt-1 flex items-center justify-between gap-2 text-xs"
-            class:text-tinted-700={message.pubkey === $session.pubkey}
-            class:text-neutral-100={message.pubkey !== $session.pubkey}>
-            {formatTimestamp(message.created_at)}
-            {#if message.kind === 4}
-              <Popover triggerType="mouseenter">
-                <i slot="trigger" class="fa fa-unlock cursor-pointer text-neutral-400" />
-                <p slot="tooltip">
-                  This message was sent using nostr's legacy DMs, which have a number of
-                  shortcomings. Read more <Anchor underline modal href="/help/nip-44-dms"
-                    >here</Anchor
-                  >.
-                </p>
-              </Popover>
-            {:else}
-              <Popover triggerType="mouseenter">
-                <i slot="trigger" class="fa fa-lock cursor-pointer text-neutral-400" />
-                <div slot="tooltip" class="flex flex-col gap-2">
-                  <p>
-                    This message was sent using nostr's new group chat specification, which solves
-                    several problems with legacy DMs. Read more <Anchor
-                      underline
-                      modal
-                      href="/help/nip-44-dms">here</Anchor
-                    >.
-                  </p>
-                  {#if message.pubkey === $session.pubkey}
-                    <p>
-                      Note that these messages are not yet universally supported. Make sure the
-                      person you're chatting with is using a compatible nostr client.
-                    </p>
-                  {/if}
-                </div>
-              </Popover>
-            {/if}
-          </small>
-        </div>
-      </div>
+      <Message {message} />
     {/each}
     {#await loading}
       <Spinner>Looking for messages...</Spinner>
@@ -267,7 +191,10 @@
           on:click={sendOrConfirm}
           class="flex cursor-pointer flex-col justify-center gap-2 p-3
                py-6 text-neutral-100 transition-all hover:bg-accent hover:text-white">
-          <i class="fa-solid fa-paper-plane fa-lg" />
+          {#if sending}
+            <i class="fa fa-spinner fa-spin fa-lg"></i>
+          {:else}
+            <i class="fa-solid fa-paper-plane fa-lg" />{/if}
         </button>
       </div>
     </div>
diff --git a/src/partials/Message.svelte b/src/partials/Message.svelte
new file mode 100644
index 000000000..621d18df6
--- /dev/null
+++ b/src/partials/Message.svelte
@@ -0,0 +1,87 @@
+<script lang="ts">
+  import cx from "classnames"
+  import {repository, session, thunks, type Thunk} from "@welshman/app"
+  import {fly} from "svelte/transition"
+  import NoteContent from "src/app/shared/NoteContent.svelte"
+  import PersonBadgeMedium from "src/app/shared/PersonBadgeMedium.svelte"
+  import {formatTimestamp, timestamp1} from "src/util/misc"
+  import Popover from "src/partials/Popover.svelte"
+  import Anchor from "src/partials/Anchor.svelte"
+  import {ensureMessagePlaintext, userSettings} from "src/engine"
+
+  export let message
+
+  const getContent = e => (e.kind === 4 ? ensureMessagePlaintext(e) : e.content) || ""
+
+  $: thunk = $thunks[message.wrap?.id || message.id] as Thunk
+</script>
+
+<div in:fly={{y: 20}} class="grid gap-2 py-1">
+  <div
+    class={cx("flex max-w-xl flex-col gap-2 rounded-2xl px-4 py-2", {
+      "ml-12 justify-self-end rounded-br-none bg-neutral-100 text-neutral-800":
+        message.pubkey === $session.pubkey,
+      "mr-12 rounded-bl-none bg-tinted-800": message.pubkey !== $session.pubkey,
+    })}>
+    {#if message.showProfile && message.pubkey !== $session.pubkey}
+      <PersonBadgeMedium pubkey={message.pubkey} />
+    {/if}
+    <div class="break-words">
+      {#await getContent(message)}
+        <!-- pass -->
+      {:then content}
+        <NoteContent showEntire note={{...message, content}} />
+      {/await}
+    </div>
+    <small
+      class="mt-1 flex items-center justify-between gap-2 text-xs"
+      class:text-tinted-700={message.pubkey === $session.pubkey}
+      class:text-neutral-100={message.pubkey !== $session.pubkey}>
+      {#if thunk}
+        {#await thunk.result}
+          <i class="fa fa-spinner fa-spin"></i>
+          Sending...
+          {#if message.created_at > $timestamp1 - $userSettings.send_delay / 1000}
+            <button
+              class="cursor-pointer py-1 text-tinted-700-d underline"
+              on:click={() => {
+                thunk.controller.abort()
+                repository.removeEvent(message.id)
+              }}>Cancel</button>
+          {/if}
+        {:then}
+          {formatTimestamp(message.created_at)}
+        {/await}
+      {:else}
+        {formatTimestamp(message.created_at)}
+      {/if}
+      {#if message.kind === 4}
+        <Popover triggerType="mouseenter">
+          <i slot="trigger" class="fa fa-unlock cursor-pointer text-neutral-400" />
+          <p slot="tooltip">
+            This message was sent using nostr's legacy DMs, which have a number of shortcomings.
+            Read more <Anchor underline modal href="/help/nip-44-dms">here</Anchor>.
+          </p>
+        </Popover>
+      {:else}
+        <Popover triggerType="mouseenter">
+          <i slot="trigger" class="fa fa-lock cursor-pointer text-neutral-400" />
+          <div slot="tooltip" class="flex flex-col gap-2">
+            <p>
+              This message was sent using nostr's new group chat specification, which solves several
+              problems with legacy DMs. Read more <Anchor underline modal href="/help/nip-44-dms"
+                >here</Anchor
+              >.
+            </p>
+            {#if message.pubkey === $session.pubkey}
+              <p>
+                Note that these messages are not yet universally supported. Make sure the person
+                you're chatting with is using a compatible nostr client.
+              </p>
+            {/if}
+          </div>
+        </Popover>
+      {/if}
+    </small>
+  </div>
+</div>

From 0ee54cc1342c138262639d3698881e76d08e6f54 Mon Sep 17 00:00:00 2001
From: Ticruz <thib.duchene@gmail.com>
Date: Tue, 10 Dec 2024 17:59:42 +0100
Subject: [PATCH 2/2] use circle-notch as loading icon

---
 src/partials/Channel.svelte | 2 +-
 src/partials/Message.svelte | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/partials/Channel.svelte b/src/partials/Channel.svelte
index 9c4f9a0a7..35ee1b5f1 100644
--- a/src/partials/Channel.svelte
+++ b/src/partials/Channel.svelte
@@ -192,7 +192,7 @@
           class="flex cursor-pointer flex-col justify-center gap-2 p-3
                py-6 text-neutral-100 transition-all hover:bg-accent hover:text-white">
           {#if sending}
-            <i class="fa fa-spinner fa-spin fa-lg"></i>
+            <i class="fa fa-circle-notch fa-spin fa-lg"></i>
           {:else}
             <i class="fa-solid fa-paper-plane fa-lg" />{/if}
         </button>
diff --git a/src/partials/Message.svelte b/src/partials/Message.svelte
index 621d18df6..25c68331c 100644
--- a/src/partials/Message.svelte
+++ b/src/partials/Message.svelte
@@ -39,7 +39,7 @@
       class:text-neutral-100={message.pubkey !== $session.pubkey}>
       {#if thunk}
         {#await thunk.result}
-          <i class="fa fa-spinner fa-spin"></i>
+          <i class="fa fa-circle-notch fa-spin"></i>
           Sending...
           {#if message.created_at > $timestamp1 - $userSettings.send_delay / 1000}
             <button