refac
This commit is contained in:
Timothy Jaeryang Baek
parent
834824ce7b
commit
fd7385c392
|
|
@ -30,6 +30,8 @@
|
|||
let url = '';
|
||||
let path = 'openapi.json';
|
||||
|
||||
let type = 'openapi'; // 'openapi', 'mcp'
|
||||
|
||||
let auth_type = 'bearer';
|
||||
let key = '';
|
||||
|
||||
|
|
@ -137,6 +139,7 @@
|
|||
url = connection.url;
|
||||
path = connection?.path ?? 'openapi.json';
|
||||
|
||||
type = connection?.type ?? 'openapi';
|
||||
auth_type = connection?.auth_type ?? 'bearer';
|
||||
key = connection?.key ?? '';
|
||||
|
||||
|
|
@ -189,6 +192,30 @@
|
|||
}}
|
||||
>
|
||||
<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 flex-col w-full">
|
||||
<div class="flex justify-between mb-0.5">
|
||||
|
|
@ -243,6 +270,7 @@
|
|||
</Tooltip>
|
||||
</div>
|
||||
|
||||
{#if ['', 'openapi'].includes(type)}
|
||||
<div class="flex-1 flex items-center">
|
||||
<label for="url-or-path" class="sr-only"
|
||||
>{$i18n.t('openapi.json URL or Path')}</label
|
||||
|
|
@ -257,16 +285,21 @@
|
|||
required
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if ['', 'openapi'].includes(type)}
|
||||
<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}`
|
||||
url: path.includes('://')
|
||||
? path
|
||||
: `${url}${path.startsWith('/') ? '' : '/'}${path}`
|
||||
})}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex gap-2 mt-2">
|
||||
<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" />
|
||||
|
||||
<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 />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -293,7 +293,7 @@
|
|||
<hr class=" border-gray-100 dark:border-gray-700/10 my-2.5 w-full" />
|
||||
|
||||
<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 />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -277,7 +277,7 @@
|
|||
</div>
|
||||
|
||||
{#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 class=" my-2.5 text-sm font-medium">{$i18n.t('System Prompt')}</div>
|
||||
|
|
@ -285,8 +285,8 @@
|
|||
bind:value={system}
|
||||
className={'w-full text-sm outline-hidden resize-vertical' +
|
||||
($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'
|
||||
: ' bg-white dark:text-gray-300 dark:bg-gray-900')}
|
||||
? ' 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'
|
||||
: ' dark:text-gray-300 ')}
|
||||
rows="4"
|
||||
placeholder={$i18n.t('Enter system prompt here')}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<div class="self-center rounded-l-xl bg-transparent">
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
export let show = true;
|
||||
export let size = 'md';
|
||||
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 mounted = false;
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@
|
|||
{/if}
|
||||
|
||||
<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"
|
||||
aria-label={$i18n.t('Add Tag')}
|
||||
on:click={() => {
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
viewBox="0 0 16 16"
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
class="w-3 h-3 {showTagInput ? 'rotate-45' : ''} transition-all transform"
|
||||
class="size-2.5 {showTagInput ? 'rotate-45' : ''} transition-all transform"
|
||||
>
|
||||
<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"
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
@ -2,34 +2,18 @@
|
|||
import { createEventDispatcher } from 'svelte';
|
||||
import { getContext } from 'svelte';
|
||||
const i18n = getContext('i18n');
|
||||
import Tooltip from '../Tooltip.svelte';
|
||||
import XMark from '$lib/components/icons/XMark.svelte';
|
||||
import Badge from '../Badge.svelte';
|
||||
|
||||
import TagItem from './TagItem.svelte';
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let tags = [];
|
||||
</script>
|
||||
|
||||
{#each tags as tag}
|
||||
<Tooltip content={tag.name}>
|
||||
<li
|
||||
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"
|
||||
>
|
||||
<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={() => {
|
||||
<TagItem
|
||||
{tag}
|
||||
onDelete={() => {
|
||||
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}
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@
|
|||
<hr class=" border-gray-100 dark:border-gray-700/10 my-2.5 w-full" />
|
||||
|
||||
<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 />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@
|
|||
</div>
|
||||
|
||||
<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
|
||||
bind:accessControl
|
||||
accessRoles={['read', 'write']}
|
||||
|
|
|
|||
|
|
@ -587,7 +587,7 @@
|
|||
</div>
|
||||
|
||||
<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
|
||||
bind:accessControl
|
||||
accessRoles={['read', 'write']}
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
|
||||
<div class=" rounded-lg flex flex-col gap-2">
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue