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()!)
 
+  return mergeThunks(
     await Promise.all(
-    uniq(pubkeys).map(async recipient => {
+      uniq(pubkeys).map(async recipient =>
-      const thunk = publishThunk({
+        publishThunk({
           event: await nip59.wrap(recipient, stamp(template)),
           relays: ctx.app.router.PublishMessage(recipient).getUrls(),
+          delay,
         })
-
+      ),
-      await thunk.result
+    )
-    }),
   )
 }
 

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,9 +58,7 @@
   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}
@@ -103,6 +103,9 @@
           {/if}
           <div class="text-sm">
             <Content showEntire {event} />
+            {#if thunk}
+              <ThunkStatus {thunk} />
+            {/if}
           </div>
         </div>
       </div>
@@ -129,4 +132,3 @@
     {/if}
   </div>
 </div>
-</Delay>

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}
+{#if canCancel || isPending}
-  <span class="flex gap-1">
+  <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}
+    {#if canCancel}
-      <Button class="link" on:click={undo}>Undo</Button>
+      <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 {derived, writable} from "svelte/store"
-  import {ctx, sortBy, now, remove} from "@welshman/lib"
+  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">