mirror of
https://github.com/open-webui/open-webui
synced 2025-05-21 13:36:35 +00:00
feat: chat valves
This commit is contained in:
Timothy J. Baek
parent
9f9122b6d7
commit
97098edfeb
@ -104,6 +104,7 @@
|
||||
};
|
||||
|
||||
let params = {};
|
||||
let valves = {};
|
||||
|
||||
$: if (history.currentId !== null) {
|
||||
let _messages = [];
|
||||
@ -1541,6 +1542,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ChatControls bind:show={showControls} bind:params />
|
||||
<ChatControls
|
||||
models={selectedModelIds.reduce((a, e, i, arr) => {
|
||||
const model = $models.find((m) => m.id === e);
|
||||
|
||||
if (model) {
|
||||
return [...a, model];
|
||||
}
|
||||
return a;
|
||||
}, [])}
|
||||
bind:show={showControls}
|
||||
bind:params
|
||||
bind:valves
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
@ -6,7 +6,11 @@
|
||||
|
||||
export let show = false;
|
||||
|
||||
export let models = [];
|
||||
|
||||
export let chatId = null;
|
||||
export let valves = {};
|
||||
|
||||
export let params = {};
|
||||
|
||||
let largeScreen = false;
|
||||
@ -43,6 +47,8 @@
|
||||
on:close={() => {
|
||||
show = false;
|
||||
}}
|
||||
{models}
|
||||
bind:valves
|
||||
bind:params
|
||||
/>
|
||||
</div>
|
||||
@ -56,6 +62,8 @@
|
||||
on:close={() => {
|
||||
show = false;
|
||||
}}
|
||||
{models}
|
||||
bind:valves
|
||||
bind:params
|
||||
/>
|
||||
</div>
|
||||
|
||||
@ -5,7 +5,10 @@
|
||||
|
||||
import XMark from '$lib/components/icons/XMark.svelte';
|
||||
import AdvancedParams from '../Settings/Advanced/AdvancedParams.svelte';
|
||||
import Valves from '$lib/components/common/Valves.svelte';
|
||||
|
||||
export let models = [];
|
||||
export let valves = {};
|
||||
export let params = {};
|
||||
</script>
|
||||
|
||||
@ -23,6 +26,18 @@
|
||||
</div>
|
||||
|
||||
<div class=" dark:text-gray-200 text-sm font-primary">
|
||||
{#if models.length === 1 && models[0]?.pipe?.valves_spec}
|
||||
<div>
|
||||
<div class=" font-medium">Valves</div>
|
||||
|
||||
<div>
|
||||
<Valves valvesSpec={models[0]?.pipe?.valves_spec} bind:valves />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-2 border-gray-100 dark:border-gray-800" />
|
||||
{/if}
|
||||
|
||||
<div>
|
||||
<div class="mb-1.5 font-medium">System Prompt</div>
|
||||
|
||||
|
||||
@ -19,6 +19,7 @@
|
||||
import Tooltip from '$lib/components/common/Tooltip.svelte';
|
||||
import Spinner from '$lib/components/common/Spinner.svelte';
|
||||
import Switch from '$lib/components/common/Switch.svelte';
|
||||
import Valves from '$lib/components/common/Valves.svelte';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
@ -170,91 +171,7 @@
|
||||
|
||||
<div>
|
||||
{#if !loading}
|
||||
{#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"
|
||||
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"
|
||||
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>No valves</div>
|
||||
{/if}
|
||||
<Valves {valvesSpec} bind:valves />
|
||||
{:else}
|
||||
<Spinner className="size-5" />
|
||||
{/if}
|
||||
|
||||
95
src/lib/components/common/Valves.svelte
Normal file
95
src/lib/components/common/Valves.svelte
Normal file
@ -0,0 +1,95 @@
|
||||
<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}
|
||||
@ -13,6 +13,7 @@
|
||||
import { getToolValvesById, getToolValvesSpecById, updateToolValvesById } from '$lib/apis/tools';
|
||||
import Spinner from '../../common/Spinner.svelte';
|
||||
import Switch from '$lib/components/common/Switch.svelte';
|
||||
import Valves from '$lib/components/common/Valves.svelte';
|
||||
|
||||
const i18n = getContext('i18n');
|
||||
const dispatch = createEventDispatcher();
|
||||
@ -127,91 +128,7 @@
|
||||
>
|
||||
<div class="px-1">
|
||||
{#if !loading}
|
||||
{#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"
|
||||
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"
|
||||
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}
|
||||
<Valves {valvesSpec} bind:valves />
|
||||
{:else}
|
||||
<Spinner className="size-5" />
|
||||
{/if}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user