+
Skip to content

Chat send is slow #503

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Dec 11, 2024
Merged

Chat send is slow #503

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
63af9b7
- fix Chat send is slow #499
ticruz38 Dec 10, 2024
0ee54cc
use circle-notch as loading icon
ticruz38 Dec 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 4 additions & 6 deletions src/app/views/ChannelsDetail.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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)
Expand All @@ -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">
Expand Down
6 changes: 4 additions & 2 deletions src/engine/commands.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
})
}
}
Expand Down
107 changes: 17 additions & 90 deletions src/partials/Channel.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -48,8 +39,6 @@

let confirmIsOpen = false

const getContent = e => (e.kind === 4 ? ensureMessagePlaintext(e) : e.content) || ""

const openConfirm = () => {
confirmIsOpen = true
}
Expand Down Expand Up @@ -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()
}
}

Expand Down Expand Up @@ -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">
Expand All @@ -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>
Expand All @@ -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-circle-notch fa-spin fa-lg"></i>
{:else}
<i class="fa-solid fa-paper-plane fa-lg" />{/if}
</button>
</div>
</div>
Expand Down
87 changes: 87 additions & 0 deletions src/partials/Message.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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-circle-notch 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>
Loading
点击 这是indexloc提供的php浏览器服务，不要输入任何密码和下载