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

feat: reactions

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2024-12-30 23:06:34 -08:00
parent 4b0fa112bb
commit f93c2e4a8d
9 changed files with 479 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/channel/Messages/Message.svelte
+47 -41
View File
@@ -35,25 +35,14 @@
export let onDelete: Function = () => {};
export let onEdit: Function = () => {};
export let onReaction: Function = () => {};
let showButtons = false;
let edit = false;
let editedContent = null;
let showDeleteConfirmDialog = false;
let reactions = [
{
name: 'red_circle',
user_ids: ['U07KUHZSYER'],
count: 1
},
{
name: '+1',
user_ids: [$user.id],
count: 1
}
];
const formatDate = (inputDate) => {
const date = dayjs(inputDate);
const now = dayjs();
@@ -92,7 +81,13 @@
<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"
>
<ReactionPicker onClose={() => (showButtons = false)}>
<ReactionPicker
onClose={() => (showButtons = false)}
onSubmit={(name) => {
showButtons = false;
onReaction(name);
}}
>
<Tooltip content={$i18n.t('Add Reaction')}>
<button
class="hover:bg-gray-100 dark:hover:bg-gray-800 transition rounded-lg p-1"
@@ -271,38 +266,49 @@
>{/if}
</div>
{#if reactions.length > 0}
{#if message.reactions.length > 0}
<div>
<div class="flex items-center gap-1 mt-1 mb-2">
{#each reactions as reaction}
<button
class="flex items-center gap-1.5 transition rounded-xl px-2 py-1 cursor-pointer {reaction.user_ids.includes(
$user.id
)
? ' bg-blue-500/10 outline outline-blue-500/50 outline-1'
: 'bg-gray-500/10 hover:outline hover:outline-gray-700/30 dark:hover:outline-gray-300/30 hover:outline-1'}"
>
{#if $shortCodesToEmojis[reaction.name]}
<img
src="/assets/emojis/{$shortCodesToEmojis[reaction.name].toLowerCase()}.svg"
alt={reaction.name}
class=" size-4"
/>
{:else}
<div>
{reaction.name}
</div>
{/if}
{#each message.reactions as reaction}
<Tooltip content={`:${reaction.name}:`}>
<button
class="flex items-center gap-1.5 transition rounded-xl px-2 py-1 cursor-pointer {reaction.user_ids.includes(
$user.id
)
? ' bg-blue-500/10 outline outline-blue-500/50 outline-1'
: 'bg-gray-500/10 hover:outline hover:outline-gray-700/30 dark:hover:outline-gray-300/30 hover:outline-1'}"
on:click={() => {
onReaction(reaction.name);
}}
>
{#if $shortCodesToEmojis[reaction.name]}
<img
src="/assets/emojis/{$shortCodesToEmojis[
reaction.name
].toLowerCase()}.svg"
alt={reaction.name}
class=" size-4"
/>
{:else}
<div>
{reaction.name}
</div>
{/if}
{#if reaction.user_ids.length > 0}
<div class="text-xs font-medium text-gray-500 dark:text-gray-400">
{reaction.user_ids?.length}
</div>
{/if}
</button>
{#if reaction.user_ids.length > 0}
<div class="text-xs font-medium text-gray-500 dark:text-gray-400">
{reaction.user_ids?.length}
</div>
{/if}
</button>
</Tooltip>
{/each}
<ReactionPicker>
<ReactionPicker
onSubmit={(name) => {
onReaction(name);
}}
>
<Tooltip content={$i18n.t('Add Reaction')}>
<div
class="flex items-center gap-1.5 bg-gray-500/10 hover:outline hover:outline-gray-700/30 dark:hover:outline-gray-300/30 hover:outline-1 transition rounded-xl px-1 py-1 cursor-pointer text-gray-500 dark:text-gray-400"
src/lib/components/channel/Messages/Message/ReactionPicker.svelte
+10 -2
View File
@@ -7,6 +7,7 @@
import Tooltip from '$lib/components/common/Tooltip.svelte';
export let onClose = () => {};
export let onSubmit = (name) => {};
export let side = 'top';
export let align = 'start';
@@ -95,8 +96,15 @@
.join(', ')}
placement="top"
>
<div
<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"
@@ -104,7 +112,7 @@
class="size-5"
loading="lazy"
/>
</div>
</button>
</Tooltip>
{/each}
</div>