root
/
open-webui
mirror of https://github.com/open-webui/open-webui.git
1
0
Fork 0
Code Issues Actions 11 Packages Projects Releases Wiki Activity

refac

This commit is contained in:
Timothy Jaeryang Baek 2025-09-21 03:12:24 -04:00
parent 834824ce7b
commit fd7385c392
12 changed files with 108 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
src/lib/components/AddServerModal.svelte
View File

@ -30,6 +30,8 @@
let url = ''; let url = '';
let path = 'openapi.json'; let path = 'openapi.json';
let type = 'openapi'; // 'openapi', 'mcp'
let auth_type = 'bearer'; let auth_type = 'bearer';
let key = ''; let key = '';
@ -137,6 +139,7 @@
url = connection.url; url = connection.url;
path = connection?.path ?? 'openapi.json'; path = connection?.path ?? 'openapi.json';
type = connection?.type ?? 'openapi';
auth_type = connection?.auth_type ?? 'bearer'; auth_type = connection?.auth_type ?? 'bearer';
key = connection?.key ?? ''; key = connection?.key ?? '';
@ -189,6 +192,30 @@
}} }}
> >
<div class="px-1"> <div class="px-1">
{#if !direct}
<div class="flex gap-2 mb-1.5">
<div class="flex w-full justify-between items-center">
<div class=" text-xs text-gray-500">{$i18n.t('Type')}</div>
<div class="">
<button
on:click={() => {
type = ['', 'openapi'].includes(type) ? 'mcp' : 'openapi';
}}
type="button"
class=" text-xs text-gray-700 dark:text-gray-300"
>
{#if ['', 'openapi'].includes(type)}
{$i18n.t('OpenAPI')}
{:else if type === 'mcp'}
{$i18n.t('MCP')}
{/if}
</button>
</div>
</div>
</div>
{/if}
<div class="flex gap-2"> <div class="flex gap-2">
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
<div class="flex justify-between mb-0.5"> <div class="flex justify-between mb-0.5">
@ -243,30 +270,36 @@
</Tooltip> </Tooltip>
</div> </div>
<div class="flex-1 flex items-center"> {#if ['', 'openapi'].includes(type)}
<label for="url-or-path" class="sr-only" <div class="flex-1 flex items-center">
>{$i18n.t('openapi.json URL or Path')}</label <label for="url-or-path" class="sr-only"
> >{$i18n.t('openapi.json URL or Path')}</label
<input >
class={`w-full text-sm bg-transparent ${($settings?.highContrastMode ?? false) ? 'placeholder:text-gray-700 dark:placeholder:text-gray-100' : 'outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`} <input
type="text" class={`w-full text-sm bg-transparent ${($settings?.highContrastMode ?? false) ? 'placeholder:text-gray-700 dark:placeholder:text-gray-100' : 'outline-hidden placeholder:text-gray-300 dark:placeholder:text-gray-700'}`}
id="url-or-path" type="text"
bind:value={path} id="url-or-path"
placeholder={$i18n.t('openapi.json URL or Path')} bind:value={path}
autocomplete="off" placeholder={$i18n.t('openapi.json URL or Path')}
required autocomplete="off"
/> required
</div> />
</div>
{/if}
</div> </div>
</div> </div>
<div {#if ['', 'openapi'].includes(type)}
class={`text-xs mt-1 ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`} <div
> class={`text-xs mt-1 ${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : 'text-gray-500'}`}
{$i18n.t(`WebUI will make requests to "{{url}}"`, { >
url: path.includes('://') ? path : `${url}${path.startsWith('/') ? '' : '/'}${path}` {$i18n.t(`WebUI will make requests to "{{url}}"`, {
})} url: path.includes('://')
</div> ? path
: `${url}${path.startsWith('/') ? '' : '/'}${path}`
})}
</div>
{/if}
<div class="flex gap-2 mt-2"> <div class="flex gap-2 mt-2">
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
@ -396,7 +429,7 @@
<hr class=" border-gray-100 dark:border-gray-700/10 my-2.5 w-full" /> <hr class=" border-gray-100 dark:border-gray-700/10 my-2.5 w-full" />
<div class="my-2 -mx-2"> <div class="my-2 -mx-2">
<div class="px-3 py-2 bg-gray-50 dark:bg-gray-950 rounded-lg"> <div class="px-4 py-3 bg-gray-50 dark:bg-gray-950 rounded-3xl">
<AccessControl bind:accessControl /> <AccessControl bind:accessControl />
</div> </div>
</div> </div>

2
src/lib/components/admin/Settings/Evaluations/ArenaModelModal.svelte
View File

@ -293,7 +293,7 @@
<hr class=" border-gray-100 dark:border-gray-700/10 my-2.5 w-full" /> <hr class=" border-gray-100 dark:border-gray-700/10 my-2.5 w-full" />
<div class="my-2 -mx-2"> <div class="my-2 -mx-2">
<div class="px-3 py-2 bg-gray-50 dark:bg-gray-950 rounded-lg"> <div class="px-4 py-3 bg-gray-50 dark:bg-gray-950 rounded-3xl">
<AccessControl bind:accessControl /> <AccessControl bind:accessControl />
</div> </div>
</div> </div>

6
src/lib/components/chat/Settings/General.svelte
View File

@ -277,7 +277,7 @@
</div> </div>
{#if $user?.role === 'admin' || ($user?.permissions.chat?.system_prompt ?? true)} {#if $user?.role === 'admin' || ($user?.permissions.chat?.system_prompt ?? true)}
<hr class="border-gray-50 dark:border-gray-850 my-3" /> <hr class="border-gray-50/50 dark:border-gray-850/50 my-3" />
<div> <div>
<div class=" my-2.5 text-sm font-medium">{$i18n.t('System Prompt')}</div> <div class=" my-2.5 text-sm font-medium">{$i18n.t('System Prompt')}</div>
@ -285,8 +285,8 @@
bind:value={system} bind:value={system}
className={'w-full text-sm outline-hidden resize-vertical' + className={'w-full text-sm outline-hidden resize-vertical' +
($settings.highContrastMode ($settings.highContrastMode
? ' p-2.5 border-2 border-gray-300 dark:border-gray-700 rounded-lg bg-gray-50 dark:bg-gray-850 text-gray-900 dark:text-gray-100 focus:ring-1 focus:ring-blue-500 focus:border-blue-500 overflow-y-hidden' ? ' p-2.5 border-2 border-gray-300 dark:border-gray-700 rounded-lg bg-transparent text-gray-900 dark:text-gray-100 focus:ring-1 focus:ring-blue-500 focus:border-blue-500 overflow-y-hidden'
: ' bg-white dark:text-gray-300 dark:bg-gray-900')} : ' dark:text-gray-300 ')}
rows="4" rows="4"
placeholder={$i18n.t('Enter system prompt here')} placeholder={$i18n.t('Enter system prompt here')}
/> />

2
src/lib/components/chat/SettingsModal.svelte
View File

@ -591,7 +591,7 @@
class="tabs flex flex-row overflow-x-auto gap-2.5 mx-3 md:pr-4 md:gap-1 md:flex-col flex-1 md:flex-none md:w-50 md:min-h-[36rem] md:max-h-[36rem] dark:text-gray-200 text-sm text-left mb-1 md:mb-0 -translate-y-1" class="tabs flex flex-row overflow-x-auto gap-2.5 mx-3 md:pr-4 md:gap-1 md:flex-col flex-1 md:flex-none md:w-50 md:min-h-[36rem] md:max-h-[36rem] dark:text-gray-200 text-sm text-left mb-1 md:mb-0 -translate-y-1"
> >
<div <div
class="hidden md:flex w-full rounded-full px-2.5 gap-2 bg-gray-50 dark:bg-gray-850 my-1 mb-1.5" class="hidden md:flex w-full rounded-full px-2.5 gap-2 bg-gray-100/80 dark:bg-gray-850/80 backdrop-blur-2xl my-1 mb-1.5"
id="settings-search" id="settings-search"
> >
<div class="self-center rounded-l-xl bg-transparent"> <div class="self-center rounded-l-xl bg-transparent">

2
src/lib/components/common/Modal.svelte
View File

@ -7,7 +7,7 @@
export let show = true; export let show = true;
export let size = 'md'; export let size = 'md';
export let containerClassName = 'p-3'; export let containerClassName = 'p-3';
export let className = 'bg-white dark:bg-gray-900 rounded-4xl'; export let className = 'bg-white/95 dark:bg-gray-900/95 backdrop-blur-sm rounded-4xl';
let modalElement = null; let modalElement = null;
let mounted = false; let mounted = false;

4
src/lib/components/common/Tags/TagInput.svelte
View File

@ -63,7 +63,7 @@
{/if} {/if}
<button <button
class=" cursor-pointer self-center p-0.5 flex h-fit items-center dark:hover:bg-gray-700 rounded-full transition border dark:border-gray-600 border-dashed" class=" cursor-pointer self-center p-0.5 flex h-fit items-center rounded-full transition border dark:border-gray-600 border-dashed"
type="button" type="button"
aria-label={$i18n.t('Add Tag')} aria-label={$i18n.t('Add Tag')}
on:click={() => { on:click={() => {
@ -76,7 +76,7 @@
viewBox="0 0 16 16" viewBox="0 0 16 16"
aria-hidden="true" aria-hidden="true"
fill="currentColor" fill="currentColor"
class="w-3 h-3 {showTagInput ? 'rotate-45' : ''} transition-all transform" class="size-2.5 {showTagInput ? 'rotate-45' : ''} transition-all transform"
> >
<path <path
d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"

33
src/lib/components/common/Tags/TagItem.svelte Normal file
View File

@ -0,0 +1,33 @@
<script>
import { getContext } from 'svelte';
const i18n = getContext('i18n');
import Tooltip from '../Tooltip.svelte';
import XMark from '$lib/components/icons/XMark.svelte';
export let tag;
export let onDelete = () => {};
</script>
{#if tag}
<Tooltip content={tag.name}>
<button
aria-label={$i18n.t('Remove this tag from list')}
class="relative group/tags px-1.5 py-[0.5px] gap-0.5 flex justify-between h-fit max-h-fit w-fit items-center rounded-lg bg-gray-500/20 text-gray-700 dark:text-gray-200 transition cursor-pointer"
on:click={() => {
onDelete();
}}
>
<div class=" text-[0.7rem] font-medium self-center line-clamp-1 w-fit">
{tag.name}
</div>
<div class="hidden group-hover/tags:block transition">
<div class="rounded-full pl-[1px] backdrop-blur-sm h-full flex self-center cursor-pointer">
<XMark className="size-3" strokeWidth="2.5" />
</div>
</div>
</button>
</Tooltip>
{/if}

32
src/lib/components/common/Tags/TagList.svelte
View File

@ -2,34 +2,18 @@
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import { getContext } from 'svelte'; import { getContext } from 'svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
import Tooltip from '../Tooltip.svelte';
import XMark from '$lib/components/icons/XMark.svelte'; import TagItem from './TagItem.svelte';
import Badge from '../Badge.svelte';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
export let tags = []; export let tags = [];
</script> </script>
{#each tags as tag} {#each tags as tag}
<Tooltip content={tag.name}> <TagItem
<li {tag}
class="relative group/tags px-1.5 py-[0.2px] gap-0.5 flex justify-between h-fit max-h-fit w-fit items-center rounded-full bg-gray-500/20 text-gray-700 dark:text-gray-200 transition cursor-pointer" onDelete={() => {
> dispatch('delete', tag.name);
<div class=" text-[0.7rem] font-medium self-center line-clamp-1 w-fit"> }}
{tag.name} />
</div>
<div class="absolute invisible right-0.5 group-hover/tags:visible transition">
<button
class="rounded-full border bg-white dark:bg-gray-700 h-full flex self-center cursor-pointer"
on:click={() => {
dispatch('delete', tag.name);
}}
type="button"
aria-label={$i18n.t('Remove this tag from list')}
>
<XMark className="size-3" strokeWidth="2.5" />
</button>
</div>
</li>
</Tooltip>
{/each} {/each}

2
src/lib/components/layout/Sidebar/ChannelModal.svelte
View File

@ -125,7 +125,7 @@
<hr class=" border-gray-100 dark:border-gray-700/10 my-2.5 w-full" /> <hr class=" border-gray-100 dark:border-gray-700/10 my-2.5 w-full" />
<div class="my-2 -mx-2"> <div class="my-2 -mx-2">
<div class="px-3 py-2 bg-gray-50 dark:bg-gray-950 rounded-lg"> <div class="px-4 py-3 bg-gray-50 dark:bg-gray-950 rounded-3xl">
<AccessControl bind:accessControl /> <AccessControl bind:accessControl />
</div> </div>
</div> </div>

2
src/lib/components/workspace/Knowledge/CreateKnowledgeBase.svelte
View File

@ -112,7 +112,7 @@
</div> </div>
<div class="mt-2"> <div class="mt-2">
<div class="px-3 py-2 bg-gray-50 dark:bg-gray-950 rounded-lg"> <div class="px-4 py-3 bg-gray-50 dark:bg-gray-950 rounded-3xl">
<AccessControl <AccessControl
bind:accessControl bind:accessControl
accessRoles={['read', 'write']} accessRoles={['read', 'write']}

2
src/lib/components/workspace/Models/ModelEditor.svelte
View File

@ -587,7 +587,7 @@
</div> </div>
<div class="my-2"> <div class="my-2">
<div class="px-3 py-2 bg-gray-50 dark:bg-gray-950 rounded-lg"> <div class="px-4 py-3 bg-gray-50 dark:bg-gray-950 rounded-3xl">
<AccessControl <AccessControl
bind:accessControl bind:accessControl
accessRoles={['read', 'write']} accessRoles={['read', 'write']}

2
src/lib/components/workspace/common/AccessControl.svelte
View File

@ -62,7 +62,7 @@
<div class=" rounded-lg flex flex-col gap-2"> <div class=" rounded-lg flex flex-col gap-2">
<div class=""> <div class="">
<div class=" text-sm font-semibold mb-1">{$i18n.t('Visibility')}</div> <div class=" text-sm font-semibold mb-1.5">{$i18n.t('Visibility')}</div>
<div class="flex gap-2.5 items-center mb-1"> <div class="flex gap-2.5 items-center mb-1">
<div> <div>