OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-26 18:26:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

enh: threads & reactions

Browse Source
This commit is contained in:
Timothy Jaeryang Baek 2024-12-29 23:16:18 -08:00
parent d94134ad2d
commit c216d89520
3 changed files with 84 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/lib/components/channel/Messages/Message.svelte
View File

@ -26,6 +26,8 @@
import Image from '$lib/components/common/Image.svelte'; import Image from '$lib/components/common/Image.svelte';
import FileItem from '$lib/components/common/FileItem.svelte'; import FileItem from '$lib/components/common/FileItem.svelte';
import ProfilePreview from './Message/ProfilePreview.svelte'; import ProfilePreview from './Message/ProfilePreview.svelte';
import ChatBubbleOvalEllipsis from '$lib/components/icons/ChatBubbleOvalEllipsis.svelte';
import FaceSmile from '$lib/components/icons/FaceSmile.svelte';
export let message; export let message;
export let showUserProfile = true; export let showUserProfile = true;
@ -66,29 +68,57 @@
? 'pt-1.5 pb-0.5' ? 'pt-1.5 pb-0.5'
: ''} w-full {($settings?.widescreenMode ?? null) : ''} w-full {($settings?.widescreenMode ?? null)
? 'max-w-full' ? 'max-w-full'
: 'max-w-5xl'} mx-auto group hover:bg-gray-500/5 transition relative" : 'max-w-5xl'} mx-auto group hover:bg-gray-300/5 dark:hover:bg-gray-700/5 transition relative"
> >
{#if (message.user_id === $user.id || $user.role === 'admin') && !edit} {#if (message.user_id === $user.id || $user.role === 'admin') && !edit}
<div class=" absolute invisible group-hover:visible right-1 -top-2 z-30"> <div class=" absolute invisible group-hover:visible right-1 -top-2 z-30">
<div <div
class="flex gap-1 rounded-lg bg-white dark:bg-gray-850 shadow-md p-0.5 border border-gray-100 dark:border-gray-800" class="flex gap-1 rounded-lg bg-white dark:bg-gray-850 shadow-md p-0.5 border border-gray-100 dark:border-gray-800"
> >
<button <Tooltip content={$i18n.t('Reactions')}>
class="hover:bg-gray-100 dark:hover:bg-gray-800 transition rounded-lg p-1" <button
on:click={() => { class="hover:bg-gray-100 dark:hover:bg-gray-800 transition rounded-lg p-1"
edit = true; on:click={() => {
editedContent = message.content; edit = true;
}} editedContent = message.content;
> }}
<Pencil /> >
</button> <FaceSmile />
</button>
</Tooltip>
<button <Tooltip content={$i18n.t('Reply in thread')}>
class="hover:bg-gray-100 dark:hover:bg-gray-800 transition rounded-lg p-1" <button
on:click={() => (showDeleteConfirmDialog = true)} class="hover:bg-gray-100 dark:hover:bg-gray-800 transition rounded-lg p-1"
> on:click={() => {
<GarbageBin /> edit = true;
</button> editedContent = message.content;
}}
>
<ChatBubbleOvalEllipsis />
</button>
</Tooltip>
<Tooltip content={$i18n.t('Edit')}>
<button
class="hover:bg-gray-100 dark:hover:bg-gray-800 transition rounded-lg p-1"
on:click={() => {
edit = true;
editedContent = message.content;
}}
>
<Pencil />
</button>
</Tooltip>
<Tooltip content={$i18n.t('Delete')}>
<button
class="hover:bg-gray-100 dark:hover:bg-gray-800 transition rounded-lg p-1"
on:click={() => (showDeleteConfirmDialog = true)}
>
<GarbageBin />
</button>
</Tooltip>
</div> </div>
</div> </div>
{/if} {/if}

19
src/lib/components/icons/ChatBubbleOvalEllipsis.svelte Normal file
View File

@ -0,0 +1,19 @@
<script lang="ts">
export let className = 'size-4';
export let strokeWidth = '1.5';
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width={strokeWidth}
stroke="currentColor"
class={className}
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z"
/>
</svg>

19
src/lib/components/icons/FaceSmile.svelte Normal file
View File

@ -0,0 +1,19 @@
<script lang="ts">
export let className = 'size-4';
export let strokeWidth = '1.5';
</script>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width={strokeWidth}
stroke="currentColor"
class={className}
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.182 15.182a4.5 4.5 0 0 1-6.364 0M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z"
/>
</svg>