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

refac: usage event handling

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2025-06-16 10:42:34 +04:00
parent deaa7133a2
commit 423a35782b
12 changed files with 219 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/lib/components/channel/Messages/Message/ProfilePreview.svelte
View File

@@ -1,10 +1,9 @@
<script lang="ts">
import { DropdownMenu } from 'bits-ui';
import { createEventDispatcher } from 'svelte';
import { flyAndScale } from '$lib/utils/transitions';
import { WEBUI_BASE_URL } from '$lib/constants';
import { activeUserIds } from '$lib/stores';
import { getUserActiveStatusById } from '$lib/apis/users';
export let side = 'right';
export let align = 'top';
@@ -12,15 +11,29 @@
export let user = null;
let show = false;
const dispatch = createEventDispatcher();
let active = false;
const getActiveStatus = async () => {
const res = await getUserActiveStatusById(localStorage.token, user.id).catch((error) => {
console.error('Error fetching user active status:', error);
});
if (res) {
active = res.active;
} else {
active = false;
}
};
$: if (show) {
getActiveStatus();
}
</script>
<DropdownMenu.Root
bind:open={show}
closeFocus={false}
onOpenChange={(state) => {
dispatch('change', state);
}}
onOpenChange={(state) => {}}
typeahead={false}
>
<DropdownMenu.Trigger>
@@ -52,7 +65,7 @@
</div>
<div class=" flex items-center gap-2">
{#if $activeUserIds.includes(user.id)}
{#if active}
<div>
<span class="relative flex size-2">
<span

83
src/lib/components/layout/Sidebar/UserMenu.svelte
View File

@@ -4,10 +4,14 @@
import { flyAndScale } from '$lib/utils/transitions';
import { goto } from '$app/navigation';
import { showSettings, activeUserIds, USAGE_POOL, mobile, showSidebar, user } from '$lib/stores';
import { fade, slide } from 'svelte/transition';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import { getUsage } from '$lib/apis';
import { userSignOut } from '$lib/apis/auths';
import { showSettings, mobile, showSidebar, user } from '$lib/stores';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import ArchiveBox from '$lib/components/icons/ArchiveBox.svelte';
import QuestionMarkCircle from '$lib/components/icons/QuestionMarkCircle.svelte';
import Map from '$lib/components/icons/Map.svelte';
@@ -28,10 +32,28 @@
let showShortcuts = false;
const dispatch = createEventDispatcher();
let usage = null;
const getUsageInfo = async () => {
const res = await getUsage(localStorage.token).catch((error) => {
console.error('Error fetching usage info:', error);
});
if (res) {
usage = res;
} else {
usage = null;
}
};
$: if (show) {
getUsageInfo();
}
</script>
<ShortcutsModal bind:show={showShortcuts} />
<!-- svelte-ignore a11y-no-static-element-interactions -->
<DropdownMenu.Root
bind:open={show}
onOpenChange={(state) => {
@@ -181,34 +203,41 @@
<div class=" self-center truncate">{$i18n.t('Sign Out')}</div>
</button>
{#if $activeUserIds?.length > 0}
<hr class=" border-gray-100 dark:border-gray-800 my-1 p-0" />
{#if usage}
{#if usage?.user_ids?.length > 0}
<hr class=" border-gray-100 dark:border-gray-800 my-1 p-0" />
<Tooltip
content={$USAGE_POOL && $USAGE_POOL.length > 0
? `${$i18n.t('Running')}: ${$USAGE_POOL.join(', ')} ✨`
: ''}
>
<div class="flex rounded-md py-1 px-3 text-xs gap-2.5 items-center">
<div class=" flex items-center">
<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>
<Tooltip
content={usage?.model_ids && usage?.model_ids.length > 0
? `${$i18n.t('Running')}: ${usage.model_ids.join(', ')} ✨`
: ''}
>
<div
class="flex rounded-md py-1 px-3 text-xs gap-2.5 items-center"
on:mouseenter={() => {
getUsageInfo();
}}
>
<div class=" flex items-center">
<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>
<div class=" ">
<span class="">
{$i18n.t('Active Users')}:
</span>
<span class=" font-semibold">
{$activeUserIds?.length}
</span>
<div class=" ">
<span class="">
{$i18n.t('Active Users')}:
</span>
<span class=" font-semibold">
{usage?.user_ids?.length}
</span>
</div>
</div>
</div>
</Tooltip>
</Tooltip>
{/if}
{/if}
<!-- <DropdownMenu.Item class="flex items-center py-1.5 px-3 text-sm ">

2
src/lib/components/notes/Notes/NoteMenu.svelte
View File

@@ -5,7 +5,7 @@
import { flyAndScale } from '$lib/utils/transitions';
import { fade, slide } from 'svelte/transition';
import { showSettings, activeUserIds, USAGE_POOL, mobile, showSidebar, user } from '$lib/stores';
import { showSettings, mobile, showSidebar, user } from '$lib/stores';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import ArchiveBox from '$lib/components/icons/ArchiveBox.svelte';

2
src/lib/components/notes/RecordMenu.svelte
View File

@@ -2,7 +2,7 @@
import { DropdownMenu } from 'bits-ui';
import { createEventDispatcher, getContext, onMount } from 'svelte';
import { showSettings, activeUserIds, USAGE_POOL, mobile, showSidebar, user } from '$lib/stores';
import { showSettings, mobile, showSidebar, user } from '$lib/stores';
import { fade, slide } from 'svelte/transition';
import Mic from '../icons/Mic.svelte';