File size: 3,883 Bytes
cfb0fa4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 | <script lang="ts">
import { getContext, onMount } from 'svelte';
const i18n = getContext('i18n');
import { user as _user, channels, socket } from '$lib/stores';
import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
import { getChannels, getDMChannelByUserId } from '$lib/apis/channels';
import ChatBubbles from '$lib/components/icons/ChatBubbles.svelte';
import ChatBubble from '$lib/components/icons/ChatBubble.svelte';
import ChatBubbleOval from '$lib/components/icons/ChatBubbleOval.svelte';
import { goto } from '$app/navigation';
import Emoji from '$lib/components/common/Emoji.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte';
export let user = null;
const directMessageHandler = async () => {
if (!user) {
return;
}
const res = await getDMChannelByUserId(localStorage.token, user.id).catch((error) => {
console.error('Error fetching DM channel:', error);
return null;
});
if (res) {
goto(`/channels/${res.id}`);
}
};
</script>
{#if user}
<div class="py-3">
<div class=" flex gap-3.5 w-full px-3 items-center">
<div class=" items-center flex shrink-0">
<img
src={`${WEBUI_API_BASE_URL}/users/${user?.id}/profile/image`}
class=" size-14 object-cover rounded-xl"
alt="profile"
/>
</div>
<div class=" flex flex-col w-full flex-1">
<div class="mb-0.5 font-medium line-clamp-1 pr-2">
{user.name}
</div>
<div class=" flex items-center gap-2">
{#if user?.is_active}
<div>
<span class="relative flex size-2">
<span
class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"
/>
<span class="relative inline-flex rounded-full size-2 bg-green-500" />
</span>
</div>
<span class="text-xs"> {$i18n.t('Active')} </span>
{:else}
<div>
<span class="relative flex size-2">
<span class="relative inline-flex rounded-full size-2 bg-gray-500" />
</span>
</div>
<span class="text-xs"> {$i18n.t('Away')} </span>
{/if}
</div>
</div>
</div>
{#if user?.status_emoji || user?.status_message}
<div class="mx-2 mt-2">
<Tooltip content={user?.status_message}>
<div
class="w-full gap-2 px-2.5 py-1.5 rounded-xl bg-gray-50 dark:text-white dark:bg-gray-900/50 text-black transition text-xs flex items-center"
>
{#if user?.status_emoji}
<div class=" self-center shrink-0">
<Emoji className="size-4" shortCode={user?.status_emoji} />
</div>
{/if}
<div class=" self-center line-clamp-2 flex-1 text-left">
{user?.status_message}
</div>
</div>
</Tooltip>
</div>
{/if}
{#if user?.bio}
<div class="mx-3.5 mt-2">
<Tooltip content={user?.bio}>
<div class=" self-center line-clamp-3 flex-1 text-left text-xs">
{user?.bio}
</div>
</Tooltip>
</div>
{/if}
{#if (user?.groups ?? []).length > 0}
<div class="mx-3.5 mt-2 flex gap-0.5">
{#each user.groups as group}
<div
class="px-1.5 py-0.5 rounded-lg bg-gray-50 dark:text-white dark:bg-gray-900/50 text-black transition text-xs"
>
{group.name}
</div>
{/each}
</div>
{/if}
{#if $_user?.id !== user.id}
<hr class="border-gray-100/50 dark:border-gray-800/50 my-2.5" />
<div class=" flex flex-col w-full px-2.5 items-center">
<button
class="w-full text-left px-3 py-1.5 rounded-xl border border-gray-100/50 dark:border-gray-800/50 hover:bg-gray-50 dark:hover:bg-gray-850 transition flex items-center gap-2 text-sm"
type="button"
on:click={() => {
directMessageHandler();
}}
>
<div>
<ChatBubbleOval className="size-4" />
</div>
<div class="font-medium">
{$i18n.t('Message')}
</div>
</button>
</div>
{/if}
</div>
{/if}
|