ewilliams28/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-08-13 01:02:25 -06:00
Code Issues Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2026-07-20 00:23:01 -04:00
parent 2dbdba1f91
commit d3ea51fd46
5 changed files with 58 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/AddConnectionModal.svelte
+10 -10
View File
@@ -59,9 +59,9 @@
let showDeleteConfirmDialog = false;
const inputClass =
'rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500';
'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700';
const selectClass =
'rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 pe-8 py-1.5 text-gray-700 outline-hidden transition-colors focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500';
'dark:bg-gray-900 bg-transparent pr-5 outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700';
const verifyOllamaHandler = async () => {
// remove trailing slash from url
@@ -252,8 +252,8 @@
<Modal size="sm" bind:show>
<div>
<div class=" flex justify-between dark:text-gray-100 px-4 pt-3 pb-1">
<h1 class="text-sm font-medium self-center">
<div class=" flex justify-between dark:text-gray-100 px-5 pt-4 pb-1.5">
<h1 class="text-lg font-medium self-center font-primary">
{#if edit}
{$i18n.t('Edit Connection')}
{:else}
@@ -261,13 +261,13 @@
{/if}
</h1>
<button
class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
class="self-center"
aria-label={$i18n.t('Close modal')}
on:click={() => {
show = false;
}}
>
<XMark className={'size-4'} />
<XMark className={'size-5'} />
</button>
</div>
@@ -341,7 +341,7 @@
<Tooltip content={$i18n.t('Verify Connection')} className="self-end -mb-1">
<button
class="self-center p-1 bg-transparent hover:bg-gray-50/70 dark:hover:bg-gray-850/50 rounded-lg transition"
class="self-center p-1 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-850 rounded-lg transition"
on:click={() => {
verifyHandler();
}}
@@ -676,11 +676,11 @@
</div>
</div>
<div class="flex justify-between items-center pt-3 text-sm font-normal">
<div class="flex justify-between items-center pt-3 text-sm font-medium">
<div>
{#if edit}
<button
class="px-1 py-1.5 text-sm font-normal text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:underline transition"
class="px-1 py-1.5 text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:underline transition"
type="button"
on:click={() => {
showDeleteConfirmDialog = true;
@@ -692,7 +692,7 @@
</div>
<button
class="px-3.5 py-1.5 text-sm font-normal bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex items-center gap-2 whitespace-nowrap {loading
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex items-center gap-2 whitespace-nowrap {loading
? ' cursor-not-allowed'
: ''}"
type="submit"
src/lib/components/AddTerminalServerModal.svelte
+11 -11
View File
@@ -60,9 +60,9 @@
let policyLoadError = '';
const inputClass =
'rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500';
'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700';
const selectClass =
'rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 pe-8 py-1.5 text-gray-700 outline-hidden transition-colors focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500';
'dark:bg-gray-900 bg-transparent pr-5 outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700';
const stringifyJson = (value: object | null | undefined) => {
return JSON.stringify(value && Object.keys(value).length ? value : {}, null, 2);
@@ -370,8 +370,8 @@
<Modal size="sm" bind:show>
<div>
<div class="flex justify-between dark:text-gray-100 px-4 pt-3 pb-1">
<h1 class="text-sm font-medium self-center">
<div class="flex justify-between dark:text-gray-100 px-5 pt-4 pb-2">
<h1 class="text-lg font-medium self-center font-primary">
{#if edit}
{$i18n.t('Edit Terminal Connection')}
{:else}
@@ -380,13 +380,13 @@
</h1>
<button
class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
class="self-center"
aria-label={$i18n.t('Close')}
on:click={() => {
show = false;
}}
>
<XMark className={'size-4'} />
<XMark className={'size-5'} />
</button>
</div>
@@ -456,7 +456,7 @@
<Tooltip content={$i18n.t('Verify Connection')} className="self-end -mb-1">
<button
class="self-center p-1 bg-transparent hover:bg-gray-50/70 dark:hover:bg-gray-850/50 rounded-lg transition"
class="self-center p-1 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-850 rounded-lg transition"
on:click={() => {
verifyHandler();
}}
@@ -720,7 +720,7 @@
</div>
<button
type="button"
class="px-2 py-1 text-xs font-normal rounded-full bg-gray-100 hover:bg-gray-200 dark:bg-gray-850 dark:hover:bg-gray-800 transition"
class="px-2 py-1 text-xs font-medium rounded-full bg-gray-100 hover:bg-gray-200 dark:bg-gray-850 dark:hover:bg-gray-800 transition"
disabled={refreshing}
on:click={refreshHandler}
>
@@ -848,11 +848,11 @@
</div>
</div>
<div class="flex justify-between items-center pt-3 text-sm font-normal">
<div class="flex justify-between items-center pt-3 text-sm font-medium">
<div>
{#if edit}
<button
class="px-1 py-1.5 text-sm font-normal text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:underline transition"
class="px-1 py-1.5 text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:underline transition"
type="button"
on:click={() => {
showDeleteConfirmDialog = true;
@@ -864,7 +864,7 @@
</div>
<button
class="px-3.5 py-1.5 text-sm font-normal bg-black hover:bg-gray-900 disabled:opacity-50 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center"
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 disabled:opacity-50 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center"
type="submit"
disabled={loadingPolicy || !!policyLoadError}
>
src/lib/components/AddToolServerModal.svelte
+10 -10
View File
@@ -70,9 +70,9 @@
let showDeleteConfirmDialog = false;
const inputClass =
'rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500';
'bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700';
const selectClass =
'rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 pe-8 py-1.5 text-gray-700 outline-hidden transition-colors focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500';
'dark:bg-gray-900 bg-transparent pr-5 outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700';
const registerOAuthClientHandler = async () => {
if (url === '') {
@@ -448,8 +448,8 @@
<Modal size="sm" bind:show>
<div>
<div class=" flex justify-between dark:text-gray-100 px-4 pt-3 pb-1">
<h1 class=" text-sm font-medium self-center">
<div class=" flex justify-between dark:text-gray-100 px-5 pt-4 pb-2">
<h1 class=" text-lg font-medium self-center font-primary">
{#if edit}
{$i18n.t('Edit Connection')}
{:else}
@@ -474,13 +474,13 @@
</button>
</div>
<button
class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
class="self-center"
aria-label={$i18n.t('Close Configure Connection Modal')}
on:click={() => {
show = false;
}}
>
<XMark className={'size-4'} />
<XMark className={'size-5'} />
</button>
</div>
</div>
@@ -614,7 +614,7 @@
className="shrink-0 flex items-center mr-1"
>
<button
class="self-center p-1 bg-transparent hover:bg-gray-50/70 dark:hover:bg-gray-850/50 rounded-lg transition"
class="self-center p-1 bg-transparent hover:bg-gray-100 dark:hover:bg-gray-850 rounded-lg transition"
on:click={() => {
verifyHandler();
}}
@@ -974,11 +974,11 @@
</div>
{/if}
<div class="flex justify-between items-center pt-3 text-sm font-normal">
<div class="flex justify-between items-center pt-3 text-sm font-medium">
<div>
{#if edit}
<button
class="px-1 py-1.5 text-sm font-normal text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:underline transition"
class="px-1 py-1.5 text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 hover:underline transition"
type="button"
on:click={() => {
showDeleteConfirmDialog = true;
@@ -990,7 +990,7 @@
</div>
<button
class="px-3.5 py-1.5 text-sm font-normal bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex items-center gap-2 whitespace-nowrap {loading
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex items-center gap-2 whitespace-nowrap {loading
? ' cursor-not-allowed'
: ''}"
type="submit"
src/lib/components/admin/Settings/Evaluations/ArenaModelModal.svelte
+13 -13
View File
@@ -14,7 +14,6 @@
import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
import XMark from '$lib/components/icons/XMark.svelte';
import { WEBUI_BASE_URL } from '$lib/constants';
import SettingsSelect from '$lib/components/common/SettingsSelect.svelte';
export let show = false;
export let edit = false;
@@ -129,10 +128,10 @@
}}
/>
<Modal size="sm" bind:show className="bg-white dark:bg-gray-900 rounded-4xl">
<Modal size="sm" bind:show>
<div>
<div class=" flex justify-between dark:text-gray-100 px-4 pt-3 pb-1">
<div class=" text-sm font-medium self-center">
<div class=" flex justify-between dark:text-gray-100 px-5 pt-4 pb-2">
<div class=" text-lg font-medium self-center font-primary">
{#if edit}
{$i18n.t('Edit Arena Model')}
{:else}
@@ -140,12 +139,12 @@
{/if}
</div>
<button
class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
class="self-center"
on:click={() => {
show = false;
}}
>
<XMark className={'size-4'} />
<XMark className={'size-5'} />
</button>
</div>
@@ -350,16 +349,17 @@
<hr class=" border-gray-100 dark:border-gray-700/10 my-2.5 w-full" />
<div class="flex items-center">
<SettingsSelect
<select
class="w-full py-1 text-sm rounded-lg bg-transparent {selectedModelId
? ''
: 'text-gray-500'} placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden"
bind:value={selectedModelId}
className="w-full"
selectClassName="text-sm"
>
<option value="">{$i18n.t('Select a model')}</option>
{#each $models.filter((m) => m?.owned_by !== 'arena') as model}
<option value={model.id} class="bg-gray-50 dark:bg-gray-700">{model.name}</option>
{/each}
</SettingsSelect>
</select>
<div>
<button
@@ -374,10 +374,10 @@
</div>
</div>
<div class="flex justify-end pt-3 text-sm font-normal gap-1.5">
<div class="flex justify-end pt-3 text-sm font-medium gap-1.5">
{#if edit}
<button
class="px-3.5 py-1.5 text-sm font-normal dark:bg-black dark:hover:bg-gray-950 dark:text-white bg-white text-black hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center"
class="px-3.5 py-1.5 text-sm font-medium dark:bg-black dark:hover:bg-gray-950 dark:text-white bg-white text-black hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center"
type="button"
on:click={() => {
showDeleteConfirmDialog = true;
@@ -388,7 +388,7 @@
{/if}
<button
class="px-3.5 py-1.5 text-sm font-normal bg-black hover:bg-gray-950 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center {loading
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-950 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex flex-row space-x-1 items-center {loading
? ' cursor-not-allowed'
: ''}"
type="submit"
src/lib/components/chat/Settings/Personalization/MemoryModal.svelte
+14 -25
View File
@@ -7,7 +7,6 @@
import Modal from '$lib/components/common/Modal.svelte';
import Spinner from '$lib/components/common/Spinner.svelte';
import XMark from '$lib/components/icons/XMark.svelte';
import { settings } from '$lib/stores';
const dispatch = createEventDispatcher();
@@ -20,12 +19,6 @@
let content = '';
let type = 'user';
let path = '';
const inputClass =
'h-7 w-full rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 text-xs text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500';
const textareaClass =
'w-full resize-y rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 py-1.5 text-xs text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500';
const actionButtonClass =
'text-xs text-gray-500 transition-colors hover:text-gray-900 dark:text-gray-500 dark:hover:text-white';
$: edit = !!memory?.id;
$: if (show) {
@@ -58,36 +51,31 @@
};
</script>
<Modal bind:show size="sm" className="bg-white dark:bg-gray-900 rounded-4xl">
<Modal bind:show size="sm">
<div>
<div class=" flex justify-between text-gray-900 dark:text-white px-4 pt-3 pb-1">
<div class=" text-sm font-medium self-center">
<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-2">
<div class=" text-lg font-medium self-center">
{#if edit}
{$i18n.t('Edit Memory')}
{:else}
{$i18n.t('Add Memory')}
{/if}
</div>
<button
class="self-center rounded-lg p-1 text-gray-500 transition hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-200"
on:click={() => (show = false)}
>
<XMark className={'size-4'} />
<button class="self-center" on:click={() => (show = false)}>
<XMark className={'size-5'} />
</button>
</div>
<div
class="flex flex-col md:flex-row w-full px-5 pb-4 md:space-x-4 text-gray-600 dark:text-gray-400"
>
<div class="flex flex-col md:flex-row w-full px-5 pb-4 md:space-x-4 dark:text-gray-200">
<div class=" flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
<form class="flex flex-col w-full" on:submit|preventDefault={submitHandler}>
<div class="px-1">
<div class="flex w-full justify-between items-center mb-1.5">
<div class="text-xs text-gray-600 dark:text-gray-400">{$i18n.t('Type')}</div>
<div class="text-xs text-gray-500">{$i18n.t('Type')}</div>
<button
type="button"
class={actionButtonClass}
class="text-xs text-gray-700 dark:text-gray-300"
on:click={() => {
type = type === 'user' ? 'context' : 'user';
}}
@@ -102,15 +90,16 @@
<textarea
bind:value={content}
class={textareaClass}
class="bg-transparent w-full text-sm outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700"
rows="6"
style="resize: vertical;"
placeholder={type === 'user'
? $i18n.t('Add a preference, fact, or instruction about you')
: $i18n.t('Add durable context for future chats')}
/>
<div class="flex flex-col w-full mt-1.5">
<label for="memory-path" class="mb-1 text-xs text-gray-600 dark:text-gray-400">
<label for="memory-path" class="mb-0.5 text-xs text-gray-500">
{$i18n.t('Path')}
<span class="opacity-50">({$i18n.t('optional')})</span>
</label>
@@ -118,16 +107,16 @@
<input
id="memory-path"
bind:value={path}
class={inputClass}
class="w-full text-sm bg-transparent outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700"
placeholder={$i18n.t('Path')}
autocomplete="off"
/>
</div>
</div>
<div class="flex justify-end pt-1 text-sm font-normal">
<div class="flex justify-end pt-1 text-sm font-medium">
<button
class="px-3.5 py-1.5 text-sm font-normal bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex items-center gap-2 whitespace-nowrap {loading
class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full flex items-center gap-2 whitespace-nowrap {loading
? ' cursor-not-allowed'
: ''}"
type="submit"