mirror of
https://github.com/open-webui/open-webui
synced 2024-11-15 04:53:54 +00:00
96 lines
2.8 KiB
Svelte
96 lines
2.8 KiB
Svelte
|
<script>
|
||
|
import { onMount, getContext } from 'svelte';
|
||
|
const i18n = getContext('i18n');
|
||
|
|
||
|
import Switch from './Switch.svelte';
|
||
|
|
||
|
export let valvesSpec = null;
|
||
|
export let valves = {};
|
||
|
</script>
|
||
|
|
||
|
{#if valvesSpec}
|
||
|
{#each Object.keys(valvesSpec.properties) as property, idx}
|
||
|
<div class=" py-0.5 w-full justify-between">
|
||
|
<div class="flex w-full justify-between">
|
||
|
<div class=" self-center text-xs font-medium">
|
||
|
{valvesSpec.properties[property].title}
|
||
|
|
||
|
{#if (valvesSpec?.required ?? []).includes(property)}
|
||
|
<span class=" text-gray-500">*required</span>
|
||
|
{/if}
|
||
|
</div>
|
||
|
|
||
|
<button
|
||
|
class="p-1 px-3 text-xs flex rounded transition"
|
||
|
type="button"
|
||
|
on:click={() => {
|
||
|
valves[property] =
|
||
|
(valves[property] ?? null) === null
|
||
|
? valvesSpec.properties[property]?.default ?? ''
|
||
|
: null;
|
||
|
}}
|
||
|
>
|
||
|
{#if (valves[property] ?? null) === null}
|
||
|
<span class="ml-2 self-center">
|
||
|
{#if (valvesSpec?.required ?? []).includes(property)}
|
||
|
{$i18n.t('None')}
|
||
|
{:else}
|
||
|
{$i18n.t('Default')}
|
||
|
{/if}
|
||
|
</span>
|
||
|
{:else}
|
||
|
<span class="ml-2 self-center"> {$i18n.t('Custom')} </span>
|
||
|
{/if}
|
||
|
</button>
|
||
|
</div>
|
||
|
|
||
|
{#if (valves[property] ?? null) !== null}
|
||
|
<!-- {valves[property]} -->
|
||
|
<div class="flex mt-0.5 mb-1.5 space-x-2">
|
||
|
<div class=" flex-1">
|
||
|
{#if valvesSpec.properties[property]?.enum ?? null}
|
||
|
<select
|
||
|
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none border border-gray-100 dark:border-gray-800"
|
||
|
bind:value={valves[property]}
|
||
|
>
|
||
|
{#each valvesSpec.properties[property].enum as option}
|
||
|
<option value={option} selected={option === valves[property]}>
|
||
|
{option}
|
||
|
</option>
|
||
|
{/each}
|
||
|
</select>
|
||
|
{:else if (valvesSpec.properties[property]?.type ?? null) === 'boolean'}
|
||
|
<div class="flex justify-between items-center">
|
||
|
<div class="text-xs text-gray-500">
|
||
|
{valves[property] ? 'Enabled' : 'Disabled'}
|
||
|
</div>
|
||
|
|
||
|
<div class=" pr-2">
|
||
|
<Switch bind:state={valves[property]} />
|
||
|
</div>
|
||
|
</div>
|
||
|
{:else}
|
||
|
<input
|
||
|
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none border border-gray-100 dark:border-gray-800"
|
||
|
type="text"
|
||
|
placeholder={valvesSpec.properties[property].title}
|
||
|
bind:value={valves[property]}
|
||
|
autocomplete="off"
|
||
|
required
|
||
|
/>
|
||
|
{/if}
|
||
|
</div>
|
||
|
</div>
|
||
|
{/if}
|
||
|
|
||
|
{#if (valvesSpec.properties[property]?.description ?? null) !== null}
|
||
|
<div class="text-xs text-gray-500">
|
||
|
{valvesSpec.properties[property].description}
|
||
|
</div>
|
||
|
{/if}
|
||
|
</div>
|
||
|
{/each}
|
||
|
{:else}
|
||
|
<div class="text-sm">No valves</div>
|
||
|
{/if}
|