mirror of
https://github.com/open-webui/open-webui.git
synced 2026-10-09 03:18:18 +00:00
refac
This commit is contained in:
Timothy Jaeryang Baek
parent
98a5e9273a
commit
93d677012e
2 changed files with 73 additions and 96 deletions
|
|
@ -1,14 +1,12 @@
|
|||
<script lang="ts">
|
||||
import { getContext, onMount } from 'svelte';
|
||||
import { getContext } 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 { user as _user } from '$lib/stores';
|
||||
import { WEBUI_API_BASE_URL } from '$lib/constants';
|
||||
import { 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';
|
||||
|
|
@ -33,105 +31,84 @@
|
|||
</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">
|
||||
<div class="text-xs">
|
||||
<div class="px-3 pt-3 pb-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<img
|
||||
src={`${WEBUI_API_BASE_URL}/users/${user?.id}/profile/image`}
|
||||
class=" size-14 object-cover rounded-xl"
|
||||
alt="profile"
|
||||
src={`${WEBUI_API_BASE_URL}/users/${user.id}/profile/image`}
|
||||
class="size-7 shrink-0 rounded-full object-cover"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class=" flex flex-col w-full flex-1">
|
||||
<div class="mb-0.5 font-normal 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 class="min-w-0 flex-1">
|
||||
<div
|
||||
class="truncate text-[0.8125rem] font-medium leading-5 text-gray-900 dark:text-gray-100"
|
||||
title={user.name}
|
||||
>
|
||||
{user.name}
|
||||
</div>
|
||||
<div
|
||||
class="flex items-center gap-1.5 text-[0.6875rem] leading-4 text-gray-500 dark:text-gray-400"
|
||||
>
|
||||
<span
|
||||
class="size-1.5 shrink-0 rounded-full {user.is_active
|
||||
? 'bg-green-500'
|
||||
: 'bg-gray-400'}"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
<span>{user.is_active ? $i18n.t('Active') : $i18n.t('Away')}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if user.status_emoji || user.status_message}
|
||||
<div class="mt-2.5">
|
||||
<Tooltip content={user.status_message}>
|
||||
<div class="flex min-w-0 items-start gap-1.5 text-gray-700 dark:text-gray-300">
|
||||
{#if user.status_emoji}
|
||||
<div class="flex h-4 shrink-0 items-center">
|
||||
<Emoji className="size-3.5" shortCode={user.status_emoji} />
|
||||
</div>
|
||||
{/if}
|
||||
{#if user.status_message}
|
||||
<div class="min-w-0 line-clamp-2 text-left leading-4">{user.status_message}</div>
|
||||
{/if}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if user.bio}
|
||||
<div class="mt-2">
|
||||
<Tooltip content={user.bio}>
|
||||
<div class="line-clamp-3 text-left leading-[1.125rem] text-gray-500 dark:text-gray-400">
|
||||
{user.bio}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if (user.groups ?? []).length > 0}
|
||||
<div class="mt-2 flex max-h-16 flex-wrap gap-1 overflow-y-auto scrollbar-hover">
|
||||
{#each user.groups as group}
|
||||
<span
|
||||
class="max-w-full break-words rounded-md bg-gray-50 px-1.5 py-0.5 text-[0.6875rem] leading-4 text-gray-600 dark:bg-gray-800/50 dark:text-gray-400"
|
||||
>
|
||||
{group.name}
|
||||
</span>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</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 flex-wrap gap-0.5 max-h-20 overflow-y-auto">
|
||||
{#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">
|
||||
<div class="border-t border-gray-50/60 p-1.5 dark:border-gray-800/30">
|
||||
<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"
|
||||
class="flex w-full items-center gap-2 rounded-lg px-3 py-1.5 text-left text-xs text-gray-700 transition-colors hover:bg-gray-50/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 dark:text-gray-300 dark:hover:bg-gray-800/60"
|
||||
type="button"
|
||||
on:click={() => {
|
||||
directMessageHandler();
|
||||
}}
|
||||
on:click={directMessageHandler}
|
||||
>
|
||||
<div>
|
||||
<ChatBubbleOval className="size-4" />
|
||||
</div>
|
||||
|
||||
<div class="font-normal">
|
||||
{$i18n.t('Message')}
|
||||
</div>
|
||||
<ChatBubbleOval className="size-3.5 shrink-0" />
|
||||
<span>{$i18n.t('Message')}</span>
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
{#if user}
|
||||
<LinkPreview.Portal>
|
||||
<LinkPreview.Content
|
||||
class="w-[16.25rem] rounded-2xl border border-gray-100 dark:border-gray-800 z-[9999] bg-white dark:bg-gray-850 dark:text-white shadow-lg transition"
|
||||
class="z-[9999] w-60 max-w-[calc(100vw-1.5rem)] max-h-[calc(100dvh-1.5rem)] overflow-y-auto rounded-xl bg-white font-sans text-gray-900 shadow-[0_16px_40px_-28px_rgba(0,0,0,0.55)] ring-1 ring-black/5 dark:bg-gray-850 dark:text-gray-100 dark:ring-white/10"
|
||||
{side}
|
||||
{align}
|
||||
{sideOffset}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue