From 35407d69b9fad6f16b267d692602d0f9c87961ef Mon Sep 17 00:00:00 2001 From: Matt Grogan Date: Tue, 2 Jan 2024 17:04:34 +0000 Subject: [PATCH] Remove link previews (#5085) --- frontend/app/src/components/AreYouSure.svelte | 32 +-- .../app/src/components/ModalContent.svelte | 9 +- .../app/src/components/home/ChatEvent.svelte | 5 + .../src/components/home/ChatMessage.svelte | 1 + .../components/home/ChatMessageContent.svelte | 2 +- .../src/components/home/CurrentChat.svelte | 35 ++- .../home/CurrentChatMessages.svelte | 1 + .../src/components/home/GenericPreview.svelte | 103 ++++----- .../src/components/home/LinkPreview.svelte | 80 ------- .../src/components/home/LinkPreviews.svelte | 199 ++++++++++++++++++ .../app/src/components/home/Markdown.svelte | 10 +- .../src/components/home/MessageEntry.svelte | 69 +++--- .../src/components/home/TextContent.svelte | 32 ++- .../src/components/home/YouTubePreview.svelte | 32 +-- frontend/app/src/i18n/cn.json | 7 +- frontend/app/src/i18n/de.json | 5 +- frontend/app/src/i18n/en.json | 5 +- frontend/app/src/i18n/es.json | 5 +- frontend/app/src/i18n/fr.json | 5 +- frontend/app/src/i18n/it.json | 5 +- frontend/app/src/i18n/iw.json | 5 +- frontend/app/src/i18n/jp.json | 5 +- frontend/app/src/i18n/ru.json | 5 +- frontend/app/src/i18n/vi.json | 5 +- frontend/openchat-client/src/openchat.ts | 42 ++++ .../src/stores/localMessageUpdates.ts | 10 +- frontend/openchat-client/src/utils/chat.ts | 4 +- .../openchat-client/src/utils/linkPreviews.ts | 48 +++++ .../openchat-shared/src/domain/chat/chat.ts | 1 + 29 files changed, 545 insertions(+), 222 deletions(-) delete mode 100644 frontend/app/src/components/home/LinkPreview.svelte create mode 100644 frontend/app/src/components/home/LinkPreviews.svelte create mode 100644 frontend/openchat-client/src/utils/linkPreviews.ts diff --git a/frontend/app/src/components/AreYouSure.svelte b/frontend/app/src/components/AreYouSure.svelte index 92f5ee614d..027c46fd40 100644 --- a/frontend/app/src/components/AreYouSure.svelte +++ b/frontend/app/src/components/AreYouSure.svelte @@ -7,7 +7,7 @@ import Input from "./Input.svelte"; import Markdown from "./home/Markdown.svelte"; - export let message: string; + export let message: string | undefined = undefined; export let action: (yes: boolean) => Promise; export let doubleCheck: { challenge: string; response: string } | undefined = undefined; export let title: string | undefined = undefined; @@ -31,23 +31,25 @@ - + {title ?? $_("areYouSure")} - + {#if message !== undefined} + - {#if doubleCheck !== undefined} -

- -

- + {#if doubleCheck !== undefined} +

+ +

+ + {/if} {/if} diff --git a/frontend/app/src/components/ModalContent.svelte b/frontend/app/src/components/ModalContent.svelte index fb6bd807d3..011ff74c49 100644 --- a/frontend/app/src/components/ModalContent.svelte +++ b/frontend/app/src/components/ModalContent.svelte @@ -15,6 +15,7 @@ export let fill: boolean = false; export let large: boolean = false; export let hideHeader: boolean = false; + export let hideBody: boolean = false; export let hideFooter: boolean = false; export let compactFooter: boolean = false; export let fadeDuration = 100; @@ -106,9 +107,11 @@ {/if} {/if} -
- -
+ {#if !hideBody} +
+ +
+ {/if} {#if !hideFooter}
diff --git a/frontend/app/src/components/home/ChatEvent.svelte b/frontend/app/src/components/home/ChatEvent.svelte index 8edc164aa8..d585d79a1b 100644 --- a/frontend/app/src/components/home/ChatEvent.svelte +++ b/frontend/app/src/components/home/ChatEvent.svelte @@ -115,6 +115,10 @@ } } } + + function removePreview(ev: CustomEvent) { + dispatch("removePreview", { event, url: ev.detail }); + } {#if event.event.kind === "message"} @@ -158,6 +162,7 @@ on:forward on:expandMessage on:collapseMessage + on:removePreview={removePreview} on:initiateThread={initiateThread} on:deleteFailedMessage={deleteFailedMessage} eventIndex={event.index} diff --git a/frontend/app/src/components/home/ChatMessage.svelte b/frontend/app/src/components/home/ChatMessage.svelte index 0e7e6a67f6..73cd41246a 100644 --- a/frontend/app/src/components/home/ChatMessage.svelte +++ b/frontend/app/src/components/home/ChatMessage.svelte @@ -535,6 +535,7 @@ content={msg.content} edited={msg.edited} height={mediaCalculatedHeight} + on:removePreview on:registerVote={registerVote} on:goToMessageIndex on:upgrade diff --git a/frontend/app/src/components/home/ChatMessageContent.svelte b/frontend/app/src/components/home/ChatMessageContent.svelte index 5ed5522bac..960e57a481 100644 --- a/frontend/app/src/components/home/ChatMessageContent.svelte +++ b/frontend/app/src/components/home/ChatMessageContent.svelte @@ -43,7 +43,7 @@ {#if content.kind === "text_content"} - + {:else if content.kind === "image_content"} {:else if content.kind === "video_content"} diff --git a/frontend/app/src/components/home/CurrentChat.svelte b/frontend/app/src/components/home/CurrentChat.svelte index 852d13aa1c..7d6a26ea4a 100644 --- a/frontend/app/src/components/home/CurrentChat.svelte +++ b/frontend/app/src/components/home/CurrentChat.svelte @@ -1,4 +1,5 @@ - - -
- {#each previews as preview} - {#if preview?.title !== undefined || preview?.description !== undefined || preview?.image !== undefined} -
+{#if rendered} + {#await previewPromise then preview} + {#if preview !== undefined} +
{#if preview.title} -

{preview.title}

+ {preview.title} {/if} {#if preview.description}

{preview.description}

{/if} {#if preview.image} - link preview image + + link preview image + {/if}
{/if} - {/each} -
+ {/await} +{/if} diff --git a/frontend/app/src/components/home/Markdown.svelte b/frontend/app/src/components/home/Markdown.svelte index f8ef7432a3..5f92d4c97b 100644 --- a/frontend/app/src/components/home/Markdown.svelte +++ b/frontend/app/src/components/home/Markdown.svelte @@ -46,10 +46,7 @@ function replaceEveryone(text: string): string { if (!text.includes("@everyone")) return text; - return text.replace( - /(^|\W)(@everyone)($|\W)/gm, - "$1[**$2**](?everyone)$3" - ); + return text.replace(/(^|\W)(@everyone)($|\W)/gm, "$1[**$2**](?everyone)$3"); } function replaceDatetimes(text: string): string { @@ -60,7 +57,10 @@ $: { let parsed = replaceEveryone( - replaceUserGroupIds(replaceUserIds(replaceDatetimes(text)), $userGroups) + replaceUserGroupIds( + replaceUserIds(replaceDatetimes(client.stripLinkDisabledMarker(text))), + $userGroups, + ), ); try { if (inline) { diff --git a/frontend/app/src/components/home/MessageEntry.svelte b/frontend/app/src/components/home/MessageEntry.svelte index fa49c7acb9..cfcf2e333e 100644 --- a/frontend/app/src/components/home/MessageEntry.svelte +++ b/frontend/app/src/components/home/MessageEntry.svelte @@ -89,13 +89,16 @@ (permittedMessages.get("text") ?? false) || editingEvent !== undefined || attachment !== undefined; + $: excessiveLinks = client.extractEnabledLinks(textContent ?? "").length > 5; $: { if (inp) { if (editingEvent && editingEvent.index !== previousEditingEvent?.index) { if (editingEvent.event.content.kind === "text_content") { inp.textContent = formatUserGroupMentions( - formatUserMentions(editingEvent.event.content.text), + formatUserMentions( + client.stripLinkDisabledMarker(editingEvent.event.content.text), + ), ); selectedRange = undefined; restoreSelection(); @@ -270,9 +273,9 @@ // replace anything of the form @username with @UserId(xyz) or @UserGroup(abc) where // xyz is the userId or abc is the user group id // if we can't find the user or user group just leave it as is - function expandMentions(text?: string): [string | undefined, User[]] { + function expandMentions(text: string): [string | undefined, User[]] { let mentionedMap = new Map(); - let expandedText = text?.replace(/@(\w+)/g, (match, p1) => { + let expandedText = text.replace(/@(\w+)/g, (match, p1) => { const userOrGroup = client.lookupUserForMention(p1, false); if (userOrGroup !== undefined) { switch (userOrGroup.kind) { @@ -392,7 +395,7 @@ } function sendMessage() { - const txt = inp.innerText?.trim(); + const txt = inp.innerText?.trim() ?? ""; if (!parseCommands(txt)) { dispatch("sendMessage", expandMentions(txt)); @@ -534,26 +537,31 @@ {/if} {#if canEnterText} {#key textboxId} -
(dragging = true)} - on:dragenter={() => (dragging = true)} - on:dragleave={() => (dragging = false)} - on:drop={onDrop} - on:input={onInput} - on:keypress={keyPress} /> +
+ {#if excessiveLinks} +
{$_("excessiveLinksNote")}
+ {/if} +
(dragging = true)} + on:dragenter={() => (dragging = true)} + on:dragleave={() => (dragging = false)} + on:drop={onDrop} + on:input={onInput} + on:keypress={keyPress} /> +
{/key} {:else}
@@ -634,9 +642,13 @@ .send { flex: 0 0 15px; } - .textbox { - flex: 1; + + .container { margin: 0 $sp3; + flex: 1; + } + + .textbox { padding: toRem(12) $sp4 $sp3 $sp4; background-color: var(--entry-input-bg); border-radius: var(--entry-input-rd); @@ -687,4 +699,9 @@ padding: 0 $sp3; flex: auto; } + + .note { + @include font(book, normal, fs-70); + margin-bottom: $sp2; + } diff --git a/frontend/app/src/components/home/TextContent.svelte b/frontend/app/src/components/home/TextContent.svelte index 931d246dfb..02e08c8eca 100644 --- a/frontend/app/src/components/home/TextContent.svelte +++ b/frontend/app/src/components/home/TextContent.svelte @@ -4,12 +4,16 @@ import Markdown from "./Markdown.svelte"; import IntersectionObserver from "./IntersectionObserver.svelte"; import { _ } from "svelte-i18n"; - import type { TextContent } from "openchat-client"; + import type { OpenChat, TextContent } from "openchat-client"; import ArrowExpand from "svelte-material-icons/ArrowExpand.svelte"; import { lowBandwidth, renderPreviews } from "../../stores/settings"; - import LinkPreview from "./LinkPreview.svelte"; + import LinkPreviews from "./LinkPreviews.svelte"; + import { createEventDispatcher, getContext } from "svelte"; const SIZE_LIMIT = 1000; + const dispatch = createEventDispatcher(); + const client = getContext("client"); + export let content: TextContent; export let truncate: boolean = false; export let pinned: boolean = false; @@ -18,6 +22,14 @@ export let me: boolean; $: expanded = !$lowBandwidth && $renderPreviews; + $: text = truncateText(content.text); + $: containsCodeBlock = content.text.match(/```([\s\S]*)```/); + $: previewUrls = extractPreviewUrls(content.text); + + function extractPreviewUrls(text: string): string[] { + const urls = client.extractEnabledLinks(text); + return urls.length <= 5 ? urls : []; + } function truncateText(text: string): string { // todo - we might be able to do something nicer than this with pure css, but we just need to do @@ -32,9 +44,9 @@ expanded = true; } - $: text = truncateText(content.text); - $: containsCodeBlock = content.text.match(/```([\s\S]*)```/); - $: linkMatch = content.text.match(/(https?:\/\/[^\s\)]+)/g); + function removePreview(ev: CustomEvent) { + dispatch("removePreview", ev.detail); + } @@ -42,20 +54,20 @@ ({$_("edited")}) {/if} -{#if linkMatch} +{#if previewUrls.length > 0} {#if !expanded} {:else} - + links={previewUrls} + {intersecting} + on:remove={removePreview} /> {/if} {/if} diff --git a/frontend/app/src/components/home/YouTubePreview.svelte b/frontend/app/src/components/home/YouTubePreview.svelte index f31e377223..ee3091347f 100644 --- a/frontend/app/src/components/home/YouTubePreview.svelte +++ b/frontend/app/src/components/home/YouTubePreview.svelte @@ -10,21 +10,23 @@ : "0"; -