ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-12 12:25:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

refac: add copy link functionality to notes view

Browse source
This commit is contained in:
Tim Jaeryang Baek 2025-07-12 15:20:21 +04:00
parent d99698f7eb
commit 290f4023b1
2 changed files with 49 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/lib/components/notes/Notes.svelte
View file

@ -32,7 +32,7 @@
import { WEBUI_NAME, config, prompts as _prompts, user } from '$lib/stores'; import { WEBUI_NAME, config, prompts as _prompts, user } from '$lib/stores';
import { createNewNote, deleteNoteById, getNotes } from '$lib/apis/notes'; import { createNewNote, deleteNoteById, getNotes } from '$lib/apis/notes';
import { capitalizeFirstLetter } from '$lib/utils'; import { capitalizeFirstLetter, copyToClipboard } from '$lib/utils';
import EllipsisHorizontal from '../icons/EllipsisHorizontal.svelte'; import EllipsisHorizontal from '../icons/EllipsisHorizontal.svelte';
import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte'; import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
@ -324,6 +324,16 @@
downloadHandler(type); downloadHandler(type);
}} }}
onCopyLink={async () => {
const baseUrl = window.location.origin;
const res = await copyToClipboard(`${baseUrl}/notes/${note.id}`);
if (res) {
toast.success($i18n.t('Copied link to clipboard'));
} else {
toast.error($i18n.t('Failed to copy link'));
}
}}
onDelete={() => { onDelete={() => {
selectedNote = note; selectedNote = note;
showDeleteConfirm = true; showDeleteConfirm = true;

70
src/lib/components/notes/Notes/NoteMenu.svelte
View file

@ -23,8 +23,8 @@
export let onDownload = (type) => {}; export let onDownload = (type) => {};
export let onDelete = () => {}; export let onDelete = () => {};
export let onCopyLink = () => {}; export let onCopyLink = null;
export let onCopyToClipboard = () => {}; export let onCopyToClipboard = null;
export let onChange = () => {}; export let onChange = () => {};
</script> </script>
@ -89,40 +89,46 @@
</DropdownMenu.SubContent> </DropdownMenu.SubContent>
</DropdownMenu.Sub> </DropdownMenu.Sub>
<DropdownMenu.Sub> {#if onCopyLink || onCopyToClipboard}
<DropdownMenu.SubTrigger <DropdownMenu.Sub>
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" <DropdownMenu.SubTrigger
>
<Share strokeWidth="2" />
<div class="flex items-center">{$i18n.t('Share')}</div>
</DropdownMenu.SubTrigger>
<DropdownMenu.SubContent
class="w-full rounded-xl px-1 py-1.5 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg"
transition={flyAndScale}
sideOffset={8}
>
<DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
on:click={() => {
onCopyLink();
}}
> >
<Link /> <Share strokeWidth="2" />
<div class="flex items-center">{$i18n.t('Copy link')}</div>
</DropdownMenu.Item>
<DropdownMenu.Item <div class="flex items-center">{$i18n.t('Share')}</div>
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" </DropdownMenu.SubTrigger>
on:click={() => { <DropdownMenu.SubContent
onCopyToClipboard(); class="w-full rounded-xl px-1 py-1.5 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg"
}} transition={flyAndScale}
sideOffset={8}
> >
<DocumentDuplicate strokeWidth="2" /> {#if onCopyLink}
<div class="flex items-center">{$i18n.t('Copy to clipboard')}</div> <DropdownMenu.Item
</DropdownMenu.Item> class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
</DropdownMenu.SubContent> on:click={() => {
</DropdownMenu.Sub> onCopyLink();
}}
>
<Link />
<div class="flex items-center">{$i18n.t('Copy link')}</div>
</DropdownMenu.Item>
{/if}
{#if onCopyToClipboard}
<DropdownMenu.Item
class="flex gap-2 items-center px-3 py-2 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
on:click={() => {
onCopyToClipboard();
}}
>
<DocumentDuplicate strokeWidth="2" />
<div class="flex items-center">{$i18n.t('Copy to clipboard')}</div>
</DropdownMenu.Item>
{/if}
</DropdownMenu.SubContent>
</DropdownMenu.Sub>
{/if}
<DropdownMenu.Item <DropdownMenu.Item
class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md" class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"