Add chat undo

src/app/commands.ts

@@ -27,6 +27,7 @@ import {
   signer,
   repository,
   publishThunk,
+  mergeThunks,
   loadProfile,
   loadInboxRelaySelections,
   profilesByPubkey,
@@ -253,21 +254,24 @@ export const attemptRelayAccess = async (url: string, claim = "") =>
 export const sendWrapped = async ({
   template,
   pubkeys,
+  delay,
 }: {
   template: EventTemplate
   pubkeys: string[]
+  delay?: number
 }) => {
   const nip59 = Nip59.fromSigner(signer.get()!)
 
-  await Promise.all(
-    uniq(pubkeys).map(async recipient => {
-      const thunk = publishThunk({
-        event: await nip59.wrap(recipient, stamp(template)),
-        relays: ctx.app.router.PublishMessage(recipient).getUrls(),
-      })
-
-      await thunk.result
-    }),
+  return mergeThunks(
+    await Promise.all(
+      uniq(pubkeys).map(async recipient =>
+        publishThunk({
+          event: await nip59.wrap(recipient, stamp(template)),
+          relays: ctx.app.router.PublishMessage(recipient).getUrls(),
+          delay,
+        })
+      ),
+    )
   )
 }
 

src/app/components/ChatMessage.svelte

@@ -10,15 +10,16 @@
     formatTimestampAsTime,
     pubkey,
   } from "@welshman/app"
+  import type {MergedThunk} from "@welshman/app"
   import {REACTION, ZAP_RESPONSE, displayRelayUrl} from "@welshman/util"
   import {repository} from "@welshman/app"
-  import {slideAndFade} from "@lib/transition"
   import Icon from "@lib/components/Icon.svelte"
   import Tippy from "@lib/components/Tippy.svelte"
   import Delay from "@lib/components/Delay.svelte"
   import Avatar from "@lib/components/Avatar.svelte"
   import Button from "@lib/components/Button.svelte"
   import Content from "@app/components/Content.svelte"
+  import ThunkStatus from "@app/components/ThunkStatus.svelte"
   import ProfileDetail from "@app/components/ProfileDetail.svelte"
   import ChatMessageMenu from "@app/components/ChatMessageMenu.svelte"
   import {colors, displayReaction} from "@app/state"
@@ -26,6 +27,7 @@
   import {makeDelete, makeReaction, sendWrapped} from "@app/commands"
 
   export let event: TrustedEvent
+  export let thunk: MergedThunk
   export let pubkeys: string[]
   export let showPubkey = false
 
@@ -56,77 +58,77 @@
   let popoverIsVisible = false
 </script>
 
-<Delay>
-  <div
-    in:slideAndFade
-    class="group chat flex items-center justify-end gap-1"
-    class:chat-start={event.pubkey !== $pubkey}
-    class:flex-row-reverse={event.pubkey !== $pubkey}
-    class:chat-end={event.pubkey === $pubkey}>
-    <Tippy
-      bind:popover
-      component={ChatMessageMenu}
-      props={{event, pubkeys, popover}}
-      params={{
-        interactive: true,
-        trigger: "manual",
-        onShow() {
-          popoverIsVisible = true
-        },
-        onHidden() {
-          popoverIsVisible = false
-        },
-      }}>
-      <Button class="opacity-0 transition-all group-hover:opacity-100" on:click={togglePopover}>
-        <Icon icon="menu-dots" size={4} />
-      </Button>
-    </Tippy>
-    <div class="flex flex-col">
-      <div class="chat-bubble mx-1 max-w-sm">
-        <div class="flex w-full items-start gap-2">
+<div
+  class="group chat flex items-center justify-end gap-1"
+  class:chat-start={event.pubkey !== $pubkey}
+  class:flex-row-reverse={event.pubkey !== $pubkey}
+  class:chat-end={event.pubkey === $pubkey}>
+  <Tippy
+    bind:popover
+    component={ChatMessageMenu}
+    props={{event, pubkeys, popover}}
+    params={{
+      interactive: true,
+      trigger: "manual",
+      onShow() {
+        popoverIsVisible = true
+      },
+      onHidden() {
+        popoverIsVisible = false
+      },
+    }}>
+    <Button class="opacity-0 transition-all group-hover:opacity-100" on:click={togglePopover}>
+      <Icon icon="menu-dots" size={4} />
+    </Button>
+  </Tippy>
+  <div class="flex flex-col">
+    <div class="chat-bubble mx-1 max-w-sm">
+      <div class="flex w-full items-start gap-2">
+        {#if showPubkey}
+          <Button on:click={showProfile}>
+            <Avatar
+              src={$profile?.picture}
+              class="border border-solid border-base-content"
+              size={8} />
+          </Button>
+        {/if}
+        <div class="-mt-1 flex-grow pr-1">
           {#if showPubkey}
-            <Button on:click={showProfile}>
-              <Avatar
-                src={$profile?.picture}
-                class="border border-solid border-base-content"
-                size={8} />
-            </Button>
-          {/if}
-          <div class="-mt-1 flex-grow pr-1">
-            {#if showPubkey}
-              <div class="flex items-center gap-2">
-                <Button class="font-bold text-sm" style="color: {colorValue}" on:click={showProfile}>
-                  {$profileDisplay}
-                </Button>
-                <span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
-              </div>
-            {/if}
-            <div class="text-sm">
-              <Content showEntire {event} />
+            <div class="flex items-center gap-2">
+              <Button class="font-bold text-sm" style="color: {colorValue}" on:click={showProfile}>
+                {$profileDisplay}
+              </Button>
+              <span class="text-xs opacity-50">{formatTimestampAsTime(event.created_at)}</span>
             </div>
+          {/if}
+          <div class="text-sm">
+            <Content showEntire {event} />
+            {#if thunk}
+              <ThunkStatus {thunk} />
+            {/if}
           </div>
         </div>
       </div>
-      {#if $reactions.length > 0 || $zaps.length > 0}
-        <div class="relative z-feature -mt-4 flex justify-end text-xs">
-          {#each groupBy( e => e.content, uniqBy(e => e.pubkey + e.content, $reactions), ).entries() as [content, events]}
-            {@const isOwn = events.some(e => e.pubkey === $pubkey)}
-            {@const onClick = () => onReactionClick(content, events)}
-            <button
-              type="button"
-              class="flex-inline btn btn-neutral btn-xs mr-2 gap-1 rounded-full"
-              class:border={isOwn}
-              class:border-solid={isOwn}
-              class:border-primary={isOwn}
-              on:click|stopPropagation={onClick}>
-              <span>{displayReaction(content)}</span>
-              {#if events.length > 1}
-                <span>{events.length}</span>
-              {/if}
-            </button>
-          {/each}
-        </div>
-      {/if}
     </div>
+    {#if $reactions.length > 0 || $zaps.length > 0}
+      <div class="relative z-feature -mt-4 flex justify-end text-xs">
+        {#each groupBy( e => e.content, uniqBy(e => e.pubkey + e.content, $reactions), ).entries() as [content, events]}
+          {@const isOwn = events.some(e => e.pubkey === $pubkey)}
+          {@const onClick = () => onReactionClick(content, events)}
+          <button
+            type="button"
+            class="flex-inline btn btn-neutral btn-xs mr-2 gap-1 rounded-full"
+            class:border={isOwn}
+            class:border-solid={isOwn}
+            class:border-primary={isOwn}
+            on:click|stopPropagation={onClick}>
+            <span>{displayReaction(content)}</span>
+            {#if events.length > 1}
+              <span>{events.length}</span>
+            {/if}
+          </button>
+        {/each}
+      </div>
+    {/if}
   </div>
-</Delay>
+</div>

src/app/components/ThunkStatus.svelte

@@ -1,37 +1,37 @@
 <script lang="ts">
   import {displayRelayUrl} from "@welshman/util"
   import {PublishStatus} from "@welshman/net"
-  import type {Thunk} from "@welshman/app"
+  import type {Thunk, MergedThunk} from "@welshman/app"
   import Icon from '@lib/components/Icon.svelte'
   import Button from '@lib/components/Button.svelte'
 
-  export let thunk: Thunk
+  export let thunk: Thunk | MergedThunk
 
   const {status} = thunk
   const {Pending, Success, Failure, Timeout} = PublishStatus
 
-  const undo = () => thunk.controller.abort()
+  const abort = () => thunk.controller.abort()
 
   $: ps = Object.values($status)
-  $: canUndo = ps.length === 0
+  $: canCancel = ps.length === 0
   $: isPending = ps.some(s => s.status === Pending)
   $: isSuccess = ps.some(s => s.status === Success)
-  $: isFailure = !canUndo && ps.every(s => [Failure, Timeout].includes(s.status))
+  $: isFailure = !canCancel && ps.every(s => [Failure, Timeout].includes(s.status))
   $: failure = Object.entries($status).find(([url, s]) => [Failure, Timeout].includes(s.status))
 </script>
 
-{#if canUndo || isPending}
-  <span class="flex gap-1">
+{#if canCancel || isPending}
+  <span class="flex gap-1 mt-2 items-center">
     <span class="loading loading-spinner mx-1 h-3 w-3 translate-y-px" />
     <span class="opacity-50">Sending...</span>
-    {#if canUndo}
-      <Button class="link" on:click={undo}>Undo</Button>
+    {#if canCancel}
+      <Button class="link" on:click={abort}>Cancel</Button>
     {/if}
   </span>
 {:else if isFailure && failure}
   {@const [url, {message}] = failure}
   <span
-    class="flex tooltip cursor-pointer gap-1"
+    class="flex tooltip cursor-pointer gap-1 mt-2"
     data-tip="{message} ({displayRelayUrl(url)})">
     <Icon icon="danger" class="translate-y-px" size={3} />
     <span class="opacity-50">Failed to send!</span>

src/lib/transition.ts

@@ -13,7 +13,6 @@ export function slideAndFade(
   node: any,
   {delay = 0, duration = 400, easing = cubicOut, axis = "y"} = {},
 ) {
-  console.log('slideAndFade')
   const style = getComputedStyle(node)
   const primary_property = axis === "y" ? "height" : "width"
   const primary_property_value = parseFloat(style[primary_property])

src/routes/home/[chat]/+page.svelte

@@ -10,8 +10,8 @@
 <script lang="ts">
   import {onMount} from "svelte"
   import {page} from "$app/stores"
-  import {derived} from "svelte/store"
-  import {ctx, sortBy, now, remove} from "@welshman/lib"
+  import {derived, writable} from "svelte/store"
+  import {ctx, assoc, sortBy, now, remove} from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
   import {createEvent, DIRECT_MESSAGE} from "@welshman/util"
   import {
@@ -21,6 +21,7 @@
     loadInboxRelaySelections,
     tagPubkey,
   } from "@welshman/app"
+  import type {MergedThunk} from "@welshman/app"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
@@ -42,6 +43,7 @@
   const chat = deriveChat(id)
   const pubkeys = splitChatId(id)
   const others = remove($pubkey!, pubkeys)
+  const thunks = writable({} as Record<string, MergedThunk>)
   const missingInboxes = derived(inboxRelaySelectionsByPubkey, $m =>
     pubkeys.filter(pk => !$m.has(pk)),
   )
@@ -55,8 +57,9 @@
   const onSubmit = async ({content, ...params}: EventContent) => {
     const tags = [...params.tags, ...remove($pubkey!, pubkeys).map(tagPubkey)]
     const template = createEvent(DIRECT_MESSAGE, {content, tags})
+    const thunk = await sendWrapped({template, pubkeys, delay: 60000})
 
-    await sendWrapped({template, pubkeys})
+    thunks.update(assoc(thunk.thunks[0].event.id, thunk))
   }
 
   let loading = true
@@ -154,7 +157,9 @@
       {#if type === "date"}
         <Divider>{value}</Divider>
       {:else}
-        <ChatMessage event={assertEvent(value)} {pubkeys} {showPubkey} />
+        {@const event = assertEvent(value)}
+        {@const thunk = $thunks[event.id]}
+        <ChatMessage {event} {thunk} {pubkeys} {showPubkey} />
       {/if}
     {/each}
     <p class="flex h-10 items-center justify-center py-20">