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

refac

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2026-07-15 05:17:41 -04:00
parent a3908f1281
commit 3ce3c52936
24 changed files with 210 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/workspace/Knowledge.svelte
+9 -10
View File
@@ -297,11 +297,10 @@
{#if items !== null && total !== null}
{#if (items ?? []).length !== 0}
<!-- The Aleph dreams itself into being, and the void learns its own name -->
<div class="my-1 grid grid-cols-1 lg:grid-cols-2 gap-x-2 gap-y-0.5">
<div class="my-1 grid grid-cols-1 gap-x-2 gap-y-0.5 lg:grid-cols-2">
{#each items as item}
<button
class="flex space-x-4 cursor-pointer text-left w-full px-2.5 py-1.5 transition rounded-2xl hover:bg-gray-50/70 dark:hover:bg-gray-850/50"
class="flex w-full cursor-pointer rounded-xl px-2 py-1 text-left transition hover:bg-gray-50/60 dark:hover:bg-gray-850/40"
on:click={() => {
if (item?.meta?.document) {
toast.error(
@@ -314,9 +313,9 @@
}
}}
>
<div class=" w-full">
<div class=" self-center flex-1 justify-between">
<div class="flex items-center justify-between -my-1 h-8">
<div class="w-full min-w-0">
<div class="flex-1 self-center justify-between">
<div class="flex h-7 items-center justify-between">
<div class=" flex gap-2 items-center justify-between w-full">
{#if item?.meta?.source === 'external'}
<div>
@@ -360,14 +359,14 @@
{/if}
</div>
<div class=" flex items-center gap-1 justify-between px-1.5">
<div class="flex items-center justify-between gap-2 px-0.5">
<Tooltip content={item?.description ?? item.name}>
<div class=" flex items-center gap-2">
<div class=" text-sm font-normal line-clamp-1 capitalize">{item.name}</div>
<div class="flex min-w-0 items-center gap-2">
<div class="line-clamp-1 text-sm font-normal capitalize">{item.name}</div>
</div>
</Tooltip>
<div class="flex items-center gap-2 shrink-0">
<div class="flex shrink-0 items-center gap-2">
<Tooltip content={dayjs(item.updated_at * 1000).format('LLLL')}>
<div class=" text-xs text-gray-500 line-clamp-1 hidden sm:block">
{$i18n.t('Updated')}
src/lib/components/workspace/Knowledge/ItemMenu.svelte
+2 -2
View File
@@ -29,7 +29,7 @@
<Tooltip content={$i18n.t('More')}>
<slot
><button
class="self-center w-fit text-sm p-1.5 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
class="self-center w-fit rounded-lg p-1 text-sm hover:bg-black/5 dark:text-gray-300 dark:hover:bg-white/5 dark:hover:text-white"
type="button"
aria-label={$i18n.t('More Options')}
on:click={(e) => {
@@ -37,7 +37,7 @@
show = true;
}}
>
<EllipsisHorizontal className="size-5" />
<EllipsisHorizontal className="size-4" />
</button>
</slot>
</Tooltip>
src/lib/components/workspace/Models.svelte
+17 -17
View File
@@ -601,13 +601,13 @@
{#if models !== null}
{#if (models ?? []).length !== 0}
<div class="my-1 gap-x-2 gap-y-0.5 grid lg:grid-cols-2" id="model-list">
<div class="my-1 grid gap-x-2 gap-y-0.5 lg:grid-cols-2" id="model-list">
{#each models as model (model.id)}
<!-- svelte-ignore a11y_no_static_element_interactions -->
<!-- svelte-ignore a11y_click_events_have_key_events -->
<div
class="flex transition w-full px-2.5 py-1.5 rounded-2xl {model.write_access
? 'cursor-pointer hover:bg-gray-50/70 dark:hover:bg-gray-850/50'
class="flex w-full rounded-xl px-2 py-1 transition {model.write_access
? 'cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-850/40'
: ''}"
id="model-item-{model.id}"
on:click={() => {
@@ -616,18 +616,18 @@
}
}}
>
<div class="flex group/item min-w-0 gap-3.5 w-full">
<div class="self-center pl-0.5">
<div class="flex bg-white rounded-2xl">
<div class="flex group/item min-w-0 gap-2.5 w-full">
<div class="self-center">
<div class="flex">
<div
class="{model.is_active
? ''
: 'opacity-50 dark:opacity-50'} bg-transparent rounded-2xl"
: 'opacity-50 dark:opacity-50'} bg-transparent rounded-xl"
>
<img
src={`${WEBUI_API_BASE_URL}/models/model/profile/image?id=${model.id}&lang=${$i18n.language}`}
alt="modelfile profile"
class=" rounded-2xl size-12 object-cover"
class="size-8 rounded-xl object-cover"
loading="lazy"
decoding="async"
on:error={(e) => {
@@ -638,7 +638,7 @@
</div>
</div>
<div class=" shrink-0 flex w-full min-w-0 flex-1 pr-1 self-center">
<div class="flex min-w-0 w-full flex-1 self-center pr-1">
<div class="flex h-full w-full flex-1 flex-col justify-start self-center group">
<div class="min-w-0 flex-1 w-full">
<div class="flex min-w-0 items-center justify-between w-full gap-2">
@@ -648,7 +648,7 @@
placement="top-start"
>
<a
class="font-normal line-clamp-1 hover:underline capitalize"
class="line-clamp-1 text-sm font-normal capitalize hover:underline"
href={`/?models=${encodeURIComponent(model.id)}`}
>
{model.name}
@@ -669,7 +669,7 @@
content={model?.meta?.hidden ? $i18n.t('Show') : $i18n.t('Hide')}
>
<button
class="self-center w-fit text-sm p-1.5 dark:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
class="self-center w-fit rounded-lg p-1 text-sm hover:bg-black/5 dark:text-white dark:hover:bg-white/5"
type="button"
aria-label={model?.meta?.hidden
? $i18n.t('Show')
@@ -689,7 +689,7 @@
<Tooltip content={$i18n.t('Delete')}>
<button
class="self-center w-fit text-sm p-1.5 dark:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
class="self-center w-fit rounded-lg p-1 text-sm hover:bg-black/5 dark:text-white dark:hover:bg-white/5"
type="button"
aria-label={$i18n.t('Delete')}
on:click={(e) => {
@@ -735,9 +735,9 @@
onClose={() => {}}
>
<div
class="self-center w-fit p-1 text-sm dark:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
class="self-center w-fit rounded-lg p-1 text-sm hover:bg-black/5 dark:text-white dark:hover:bg-white/5"
>
<EllipsisHorizontal className="size-5" />
<EllipsisHorizontal className="size-4" />
</div>
</ModelMenu>
{/if}
@@ -772,13 +772,13 @@
</div>
</div>
<div class="flex min-w-0 gap-1 pr-2 -mt-1 items-center">
<div class="flex min-w-0 items-center gap-1 pr-2 text-xs text-gray-500">
<Tooltip
content={model?.user?.email ?? $i18n.t('Deleted User')}
className="flex shrink-0"
placement="top-start"
>
<div class="shrink-0 text-gray-500 text-xs">
<div class="shrink-0">
{$i18n.t('By {{name}}', {
name: capitalizeFirstLetter(
model?.user?.name ?? model?.user?.email ?? $i18n.t('Deleted User')
@@ -794,7 +794,7 @@
className="min-w-0 text-left"
placement="top-start"
>
<div class="flex min-w-0 gap-1 text-xs overflow-hidden">
<div class="flex min-w-0 gap-1 overflow-hidden">
<div class="line-clamp-1 min-w-0">
{#if (model?.meta?.description ?? '').trim()}
{model?.meta?.description}
src/lib/components/workspace/Prompts.svelte
+12 -13
View File
@@ -469,18 +469,17 @@
<Spinner className="size-5" />
</div>
{:else if (prompts ?? []).length !== 0}
<!-- Before they call, I will answer; while they are yet speaking, I will hear. -->
<div class="gap-x-2 gap-y-0.5 grid my-1 lg:grid-cols-2">
<div class="my-1 grid gap-x-2 gap-y-0.5 lg:grid-cols-2">
{#each prompts as prompt (prompt.id)}
<a
class="flex space-x-4 cursor-pointer text-left w-full px-2.5 py-1.5 transition rounded-2xl hover:bg-gray-50/70 dark:hover:bg-gray-850/50"
class="flex w-full cursor-pointer rounded-xl px-2 py-1 text-left transition hover:bg-gray-50/60 dark:hover:bg-gray-850/40"
href={`/workspace/prompts/${prompt.id}`}
>
<div class=" flex flex-col flex-1 space-x-4 cursor-pointer w-full pl-1">
<div class="flex w-full min-w-0 flex-1 cursor-pointer flex-col pl-0.5">
<div class="flex items-center justify-between w-full mb-0.5">
<div class="flex items-center gap-2">
<div class="font-normal line-clamp-1 capitalize">{prompt.name}</div>
<div class="text-xs overflow-hidden text-ellipsis line-clamp-1 text-gray-500">
<div class="flex min-w-0 items-center gap-2">
<div class="line-clamp-1 text-sm font-normal capitalize">{prompt.name}</div>
<div class="line-clamp-1 overflow-hidden text-ellipsis text-xs text-gray-500">
/{prompt.command}
</div>
</div>
@@ -489,13 +488,13 @@
{/if}
</div>
<div class="flex gap-1 text-xs">
<div class="flex min-w-0 gap-1 text-xs text-gray-500">
<Tooltip
content={prompt?.user?.email ?? $i18n.t('Deleted User')}
className="flex shrink-0"
placement="top-start"
>
<div class="shrink-0 text-gray-500">
<div class="shrink-0">
{$i18n.t('By {{name}}', {
name: capitalizeFirstLetter(
prompt?.user?.name ?? prompt?.user?.email ?? $i18n.t('Deleted User')
@@ -519,7 +518,7 @@
{#if shiftKey}
<Tooltip content={$i18n.t('Delete')}>
<button
class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
class="self-center w-fit rounded-lg p-1 text-sm hover:bg-black/5 dark:text-gray-300 dark:hover:bg-white/5 dark:hover:text-white"
type="button"
aria-label={$i18n.t('Delete')}
on:click={() => {
@@ -532,7 +531,7 @@
{:else}
<Tooltip content={$i18n.t('Copy Prompt')}>
<button
class="self-center w-fit text-sm p-1.5 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
class="self-center w-fit rounded-lg p-1 text-sm hover:bg-black/5 dark:text-gray-300 dark:hover:bg-white/5 dark:hover:text-white"
type="button"
aria-label={$i18n.t('Copy Prompt')}
on:click={(e) => {
@@ -568,10 +567,10 @@
onClose={() => {}}
>
<button
class="self-center w-fit text-sm p-1.5 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
class="self-center w-fit rounded-lg p-1 text-sm hover:bg-black/5 dark:text-gray-300 dark:hover:bg-white/5 dark:hover:text-white"
type="button"
>
<EllipsisHorizontal className="size-5" />
<EllipsisHorizontal className="size-4" />
</button>
</PromptMenu>
src/lib/components/workspace/Skills.svelte
+16 -16
View File
@@ -343,23 +343,23 @@
<Spinner className="size-5" />
</div>
{:else if (filteredItems ?? []).length !== 0}
<div class="my-1 gap-x-2 gap-y-0.5 grid lg:grid-cols-2">
<div class="my-1 grid gap-x-2 gap-y-0.5 lg:grid-cols-2">
{#each filteredItems as skill}
<Tooltip content={skill?.description ?? skill?.id}>
<div
class="flex space-x-4 text-left w-full px-2.5 py-1.5 transition rounded-2xl {skill.write_access
? 'cursor-pointer hover:bg-gray-50/70 dark:hover:bg-gray-850/50'
class="flex w-full rounded-xl px-2 py-1 text-left transition {skill.write_access
? 'cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-850/40'
: 'cursor-not-allowed opacity-60'}"
>
{#if skill.write_access}
<a
class=" flex flex-1 space-x-3.5 cursor-pointer w-full"
class="flex w-full min-w-0 flex-1 cursor-pointer"
href={`/workspace/skills/edit?id=${encodeURIComponent(skill.id)}`}
>
<div class="flex items-center text-left">
<div class=" flex-1 self-center">
<div class="flex min-w-0 items-center text-left">
<div class="min-w-0 flex-1 self-center">
<Tooltip content={skill.id} placement="top-start">
<div class="flex items-center gap-2">
<div class="flex min-w-0 items-center gap-2">
<div class="line-clamp-1 text-sm">
{skill.name}
</div>
@@ -369,7 +369,7 @@
</div>
</Tooltip>
<div class="px-0.5">
<div class="text-xs text-gray-500 shrink-0">
<div class="shrink-0 text-xs text-gray-500">
<Tooltip
content={skill?.user?.email ?? $i18n.t('Deleted User')}
className="flex shrink-0"
@@ -387,12 +387,12 @@
</div>
</a>
{:else}
<div class=" flex flex-1 space-x-3.5 w-full">
<div class="flex items-center text-left w-full">
<div class="flex-1 self-center w-full">
<div class="flex w-full min-w-0 flex-1">
<div class="flex w-full min-w-0 items-center text-left">
<div class="w-full min-w-0 flex-1 self-center">
<div class="flex items-center justify-between w-full gap-2">
<Tooltip content={skill.id} placement="top-start">
<div class="flex items-center gap-2">
<div class="flex min-w-0 items-center gap-2">
<div class="line-clamp-1 text-sm">
{skill.name}
</div>
@@ -404,7 +404,7 @@
<Badge type="muted" content={$i18n.t('Read Only')} />
</div>
<div class="px-0.5">
<div class="text-xs text-gray-500 shrink-0">
<div class="shrink-0 text-xs text-gray-500">
<Tooltip
content={skill?.user?.email ?? $i18n.t('Deleted User')}
className="flex shrink-0"
@@ -427,7 +427,7 @@
{#if shiftKey}
<Tooltip content={$i18n.t('Delete')}>
<button
class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
class="self-center w-fit rounded-lg p-1 text-sm hover:bg-black/5 dark:text-gray-300 dark:hover:bg-white/5 dark:hover:text-white"
type="button"
aria-label={$i18n.t('Delete')}
on:click={() => {
@@ -455,10 +455,10 @@
onClose={() => {}}
>
<button
class="self-center w-fit text-sm p-1.5 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
class="self-center w-fit rounded-lg p-1 text-sm hover:bg-black/5 dark:text-gray-300 dark:hover:bg-white/5 dark:hover:text-white"
type="button"
>
<EllipsisHorizontal className="size-5" />
<EllipsisHorizontal className="size-4" />
</button>
</SkillMenu>
{/if}
src/lib/components/workspace/Tools.svelte
+18 -19
View File
@@ -274,7 +274,6 @@
/>
<div class="space-y-1">
<!-- The iron remembers its forge. -->
<div class="flex h-8 w-full items-center gap-2">
<div class="flex min-w-0 flex-1">
<div class=" self-center ml-1 mr-3">
@@ -330,23 +329,23 @@
</div>
{#if (filteredItems ?? []).length !== 0}
<div class="my-1 gap-x-2 gap-y-0.5 grid lg:grid-cols-2">
<div class="my-1 grid gap-x-2 gap-y-0.5 lg:grid-cols-2">
{#each filteredItems as tool}
<Tooltip content={tool?.meta?.description ?? tool?.id}>
<div
class="flex space-x-4 text-left w-full px-2.5 py-1.5 transition rounded-2xl {tool.write_access
? 'cursor-pointer hover:bg-gray-50/70 dark:hover:bg-gray-850/50'
class="flex w-full rounded-xl px-2 py-1 text-left transition {tool.write_access
? 'cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-850/40'
: 'cursor-not-allowed opacity-60'}"
>
{#if tool.write_access}
<a
class=" flex flex-1 space-x-3.5 cursor-pointer w-full"
class="flex w-full min-w-0 flex-1 cursor-pointer"
href={`/workspace/tools/edit?id=${encodeURIComponent(tool.id)}`}
>
<div class="flex items-center text-left">
<div class=" flex-1 self-center">
<div class="flex min-w-0 items-center text-left">
<div class="min-w-0 flex-1 self-center">
<Tooltip content={tool.id} placement="top-start">
<div class="flex items-center gap-2">
<div class="flex min-w-0 items-center gap-2">
<div class="line-clamp-1 text-sm">
{tool.name}
</div>
@@ -358,7 +357,7 @@
</div>
</Tooltip>
<div class="px-0.5">
<div class="text-xs text-gray-500 shrink-0">
<div class="shrink-0 text-xs text-gray-500">
<Tooltip
content={tool?.user?.email ?? $i18n.t('Deleted User')}
className="flex shrink-0"
@@ -376,12 +375,12 @@
</div>
</a>
{:else}
<div class=" flex flex-1 space-x-3.5 w-full">
<div class="flex items-center text-left w-full">
<div class="flex-1 self-center w-full">
<div class="flex w-full min-w-0 flex-1">
<div class="flex w-full min-w-0 items-center text-left">
<div class="w-full min-w-0 flex-1 self-center">
<div class="flex items-center justify-between w-full gap-2">
<Tooltip content={tool.id} placement="top-start">
<div class="flex items-center gap-2">
<div class="flex min-w-0 items-center gap-2">
<div class="line-clamp-1 text-sm">
{tool.name}
</div>
@@ -395,7 +394,7 @@
<Badge type="muted" content={$i18n.t('Read Only')} />
</div>
<div class="px-0.5">
<div class="text-xs text-gray-500 shrink-0">
<div class="shrink-0 text-xs text-gray-500">
<Tooltip
content={tool?.user?.email ?? $i18n.t('Deleted User')}
className="flex shrink-0"
@@ -418,7 +417,7 @@
{#if shiftKey}
<Tooltip content={$i18n.t('Delete')}>
<button
class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
class="self-center w-fit rounded-lg p-1 text-sm hover:bg-black/5 dark:text-gray-300 dark:hover:bg-white/5 dark:hover:text-white"
type="button"
aria-label={$i18n.t('Delete')}
on:click={() => {
@@ -432,7 +431,7 @@
{#if tool?.meta?.manifest?.funding_url ?? false}
<Tooltip content="Support">
<button
class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
class="self-center w-fit rounded-lg p-1 text-sm hover:bg-black/5 dark:text-gray-300 dark:hover:bg-white/5 dark:hover:text-white"
type="button"
aria-label={$i18n.t('Support')}
on:click={() => {
@@ -447,7 +446,7 @@
<Tooltip content={$i18n.t('Valves')}>
<button
class="self-center w-fit text-sm px-2 py-2 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
class="self-center w-fit rounded-lg p-1 text-sm hover:bg-black/5 dark:text-gray-300 dark:hover:bg-white/5 dark:hover:text-white"
type="button"
aria-label={$i18n.t('Valves')}
on:click={() => {
@@ -497,10 +496,10 @@
onClose={() => {}}
>
<button
class="self-center w-fit text-sm p-1.5 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
class="self-center w-fit rounded-lg p-1 text-sm hover:bg-black/5 dark:text-gray-300 dark:hover:bg-white/5 dark:hover:text-white"
type="button"
>
<EllipsisHorizontal className="size-5" />
<EllipsisHorizontal className="size-4" />
</button>
</ToolMenu>
{/if}