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/apis/index.ts
View File

@@ -1271,6 +1271,33 @@ export const updatePipelineValves = async (
return res;
};
export const getUsage = async (token: string = '') => {
let error = null;
const res = await fetch(`${WEBUI_BASE_URL}/api/usage`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
...(token && { Authorization: `Bearer ${token}` })
}
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.catch((err) => {
console.error(err);
error = err;
return null;
});
if (error) {
throw error;
}
return res;
};
export const getBackendConfig = async () => {
let error = null;

27
src/lib/apis/users/index.ts
View File

@@ -348,6 +348,33 @@ export const getAndUpdateUserLocation = async (token: string) => {
}
};
export const getUserActiveStatusById = async (token: string, userId: string) => {
let error = null;
const res = await fetch(`${WEBUI_API_BASE_URL}/users/${userId}/active`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${token}`
}
})
.then(async (res) => {
if (!res.ok) throw await res.json();
return res.json();
})
.catch((err) => {
console.error(err);
error = err.detail;
return null;
});
if (error) {
throw error;
}
return res;
};
export const deleteUserById = async (token: string, userId: string) => {
let error = null;

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';

51
src/lib/utils/websocket.ts
View File

@@ -1,51 +0,0 @@
import { io } from 'socket.io-client';
import { socket, activeUserIds, USAGE_POOL } from '$lib/stores';
import { WEBUI_BASE_URL } from '$lib/constants';
export const setupSocket = async (enableWebsocket) => {
const _socket = io(`${WEBUI_BASE_URL}` || undefined, {
reconnection: true,
reconnectionDelay: 1000,
reconnectionDelayMax: 5000,
randomizationFactor: 0.5,
path: '/ws/socket.io',
transports: enableWebsocket ? ['websocket'] : ['polling', 'websocket'],
auth: { token: localStorage.token }
});
await socket.set(_socket);
_socket.on('connect_error', (err) => {
console.log('connect_error', err);
});
_socket.on('connect', () => {
console.log('connected', _socket.id);
});
_socket.on('reconnect_attempt', (attempt) => {
console.log('reconnect_attempt', attempt);
});
_socket.on('reconnect_failed', () => {
console.log('reconnect_failed');
});
_socket.on('disconnect', (reason, details) => {
console.log(`Socket ${_socket.id} disconnected due to ${reason}`);
if (details) {
console.log('Additional details:', details);
}
});
_socket.on('user-list', (data) => {
console.log('user-list', data);
activeUserIds.set(data.user_ids);
});
_socket.on('usage', (data) => {
console.log('usage', data);
USAGE_POOL.set(data['models']);
});
};

12
src/routes/+layout.svelte
View File

@@ -16,8 +16,6 @@
WEBUI_NAME,
mobile,
socket,
activeUserIds,
USAGE_POOL,
chatId,
chats,
currentChatPage,
@@ -103,16 +101,6 @@
console.log('Additional details:', details);
}
});
_socket.on('user-list', (data) => {
console.log('user-list', data);
activeUserIds.set(data.user_ids);
});
_socket.on('usage', (data) => {
console.log('usage', data);
USAGE_POOL.set(data['models']);
});
};
const executePythonAsWorker = async (id, code, cb) => {