Emil_Shanaty/open-webui-ai4me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

enh: reply count

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2024-12-31 02:05:11 -08:00
parent 584e9e6da5
commit 9c337552e6
7 changed files with 224 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/channel/Messages/Message.svelte
+24
View File
@@ -29,6 +29,7 @@
import ChatBubbleOvalEllipsis from '$lib/components/icons/ChatBubbleOvalEllipsis.svelte';
import FaceSmile from '$lib/components/icons/FaceSmile.svelte';
import ReactionPicker from './Message/ReactionPicker.svelte';
import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
export let message;
export let showUserProfile = true;
@@ -324,6 +325,29 @@
</div>
</div>
{/if}
{#if message.reply_count > 0}
<div class="flex items-center gap-1.5 -mt-0.5 mb-1.5">
<button
class="flex items-center text-xs py-1 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 transition"
on:click={() => {
onThread(message.id);
}}
>
<span class="font-medium mr-1">
{$i18n.t('{{COUNT}} Replies', { COUNT: message.reply_count })}</span
><span>
{' - '}{$i18n.t('Last reply')}
{dayjs.unix(message.latest_reply_at / 1000000000).fromNow()}</span
>
<span class="ml-1">
<ChevronRight className="size-2.5" strokeWidth="3" />
</span>
<!-- {$i18n.t('View Replies')} -->
</button>
</div>
{/if}
{/if}
</div>
</div>
src/lib/components/channel/Messages/Message/ReactionPicker.svelte
+48 -46
View File
@@ -75,7 +75,7 @@
<slot name="content">
<DropdownMenu.Content
class="max-w-full w-80 bg-gray-50 dark:bg-gray-850 rounded-lg z-50 shadow-lg text-white"
class="max-w-full w-80 bg-gray-50 dark:bg-gray-850 rounded-lg z-50 shadow-lg dark:text-white"
sideOffset={8}
{side}
{align}
@@ -90,54 +90,56 @@
/>
</div>
<div class=" w-full flex justify-start h-96 overflow-y-auto px-3 pb-3 text-sm">
<div>
{#if Object.keys(emojis).length === 0}
<div class="text-center text-xs text-gray-500 dark:text-gray-400">No results</div>
{:else}
{#each Object.keys(emojiGroups) as group}
{@const groupEmojis = emojiGroups[group].filter((emoji) => emojis[emoji])}
{#if groupEmojis.length > 0}
<div class="flex flex-col">
<div class="text-xs font-medium mb-2 text-gray-500 dark:text-gray-400">
{group}
</div>
{#if show}
<div>
{#if Object.keys(emojis).length === 0}
<div class="text-center text-xs text-gray-500 dark:text-gray-400">No results</div>
{:else}
{#each Object.keys(emojiGroups) as group}
{@const groupEmojis = emojiGroups[group].filter((emoji) => emojis[emoji])}
{#if groupEmojis.length > 0}
<div class="flex flex-col">
<div class="text-xs font-medium mb-2 text-gray-500 dark:text-gray-400">
{group}
</div>
<div class="flex mb-2 flex-wrap gap-1">
{#each groupEmojis as emoji (emoji)}
<Tooltip
content={(typeof emojiShortCodes[emoji] === 'string'
? [emojiShortCodes[emoji]]
: emojiShortCodes[emoji]
)
.map((code) => `:${code}:`)
.join(', ')}
placement="top"
>
<button
class="p-1.5 rounded-lg cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700 transition"
on:click={() => {
typeof emojiShortCodes[emoji] === 'string'
? onSubmit(emojiShortCodes[emoji])
: onSubmit(emojiShortCodes[emoji][0]);
show = false;
}}
<div class="flex mb-2 flex-wrap gap-1">
{#each groupEmojis as emoji (emoji)}
<Tooltip
content={(typeof emojiShortCodes[emoji] === 'string'
? [emojiShortCodes[emoji]]
: emojiShortCodes[emoji]
)
.map((code) => `:${code}:`)
.join(', ')}
placement="top"
>
<img
src="/assets/emojis/{emoji.toLowerCase()}.svg"
alt={emoji}
class="size-5"
loading="lazy"
/>
</button>
</Tooltip>
{/each}
<button
class="p-1.5 rounded-lg cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700 transition"
on:click={() => {
typeof emojiShortCodes[emoji] === 'string'
? onSubmit(emojiShortCodes[emoji])
: onSubmit(emojiShortCodes[emoji][0]);
show = false;
}}
>
<img
src="/assets/emojis/{emoji.toLowerCase()}.svg"
alt={emoji}
class="size-5"
loading="lazy"
/>
</button>
</Tooltip>
{/each}
</div>
</div>
</div>
{/if}
{/each}
{/if}
</div>
{/if}
{/each}
{/if}
</div>
{/if}
</div>
</DropdownMenu.Content>
</slot>