ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-17 06:45:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

refac

Browse source
This commit is contained in:
Timothy Jaeryang Baek 2025-07-08 22:56:46 +04:00
parent 42f2de68bd
commit 0765f6c230
1 changed files with 45 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
src/lib/components/chat/MessageInput/InputVariablesModal.svelte
View file

@ -77,6 +77,8 @@
{#if !loading} {#if !loading}
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
{#each Object.keys(variables) as variable, idx} {#each Object.keys(variables) as variable, idx}
{@const { type, ...variableAttributes } = variables[variable] ?? {}}
<div class=" py-0.5 w-full justify-between"> <div class=" py-0.5 w-full justify-between">
<div class="flex w-full justify-between mb-1.5"> <div class="flex w-full justify-between mb-1.5">
<div class=" self-center text-xs font-medium"> <div class=" self-center text-xs font-medium">
@ -91,12 +93,20 @@
<div class="flex mt-0.5 mb-0.5 space-x-2"> <div class="flex mt-0.5 mb-0.5 space-x-2">
<div class=" flex-1"> <div class=" flex-1">
{#if variables[variable]?.type === 'select'} {#if variables[variable]?.type === 'select'}
{@const options = variableAttributes?.options ?? []}
{@const placeholder = variableAttributes?.placeholder ?? ''}
<select <select
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100 dark:border-gray-850" class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100 dark:border-gray-850"
bind:value={variableValues[variable]} bind:value={variableValues[variable]}
id="input-variable-{idx}" id="input-variable-{idx}"
> >
{#each variables[variable]?.options ?? [] as option} {#if placeholder}
<option value="" disabled selected>
{placeholder}
</option>
{/if}
{#each options as option}
<option value={option} selected={option === variableValues[variable]}> <option value={option} selected={option === variableValues[variable]}>
{option} {option}
</option> </option>
@ -110,6 +120,7 @@
bind:checked={variableValues[variable]} bind:checked={variableValues[variable]}
class="size-3.5 rounded cursor-pointer border border-gray-200 dark:border-gray-700" class="size-3.5 rounded cursor-pointer border border-gray-200 dark:border-gray-700"
id="input-variable-{idx}" id="input-variable-{idx}"
{...variableAttributes}
/> />
<label for="input-variable-{idx}" class="text-sm" <label for="input-variable-{idx}" class="text-sm"
@ -138,6 +149,7 @@
// Convert the color value to uppercase immediately // Convert the color value to uppercase immediately
variableValues[variable] = e.target.value.toUpperCase(); variableValues[variable] = e.target.value.toUpperCase();
}} }}
{...variableAttributes}
/> />
</div> </div>
@ -159,6 +171,7 @@
autocomplete="off" autocomplete="off"
id="input-variable-{idx}" id="input-variable-{idx}"
required required
{...variableAttributes}
/> />
{:else if variables[variable]?.type === 'datetime-local'} {:else if variables[variable]?.type === 'datetime-local'}
<input <input
@ -169,6 +182,7 @@
autocomplete="off" autocomplete="off"
id="input-variable-{idx}" id="input-variable-{idx}"
required required
{...variableAttributes}
/> />
{:else if variables[variable]?.type === 'email'} {:else if variables[variable]?.type === 'email'}
<input <input
@ -179,6 +193,7 @@
autocomplete="off" autocomplete="off"
id="input-variable-{idx}" id="input-variable-{idx}"
required required
{...variableAttributes}
/> />
{:else if variables[variable]?.type === 'month'} {:else if variables[variable]?.type === 'month'}
<input <input
@ -189,6 +204,7 @@
autocomplete="off" autocomplete="off"
id="input-variable-{idx}" id="input-variable-{idx}"
required required
{...variableAttributes}
/> />
{:else if variables[variable]?.type === 'number'} {:else if variables[variable]?.type === 'number'}
<input <input
@ -199,9 +215,31 @@
autocomplete="off" autocomplete="off"
id="input-variable-{idx}" id="input-variable-{idx}"
required required
{...variableAttributes}
/> />
{:else if variables[variable]?.type === 'range'} {:else if variables[variable]?.type === 'range'}
<input <div class="flex items-center space-x-2">
<div class="relative flex justify-center items-center gap-2 flex-1">
<input
type="range"
bind:value={variableValues[variable]}
class="w-full rounded-lg py-1 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100 dark:border-gray-850"
id="input-variable-{idx}"
{...variableAttributes}
/>
</div>
<input
type="text"
class=" py-1 text-sm dark:text-gray-300 bg-transparent outline-hidden text-right"
placeholder="Enter value"
bind:value={variableValues[variable]}
autocomplete="off"
required
/>
</div>
<!-- <input
type="range" type="range"
class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100 dark:border-gray-850" class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-hidden border border-gray-100 dark:border-gray-850"
placeholder={variables[variable]?.placeholder ?? ''} placeholder={variables[variable]?.placeholder ?? ''}
@ -209,7 +247,7 @@
autocomplete="off" autocomplete="off"
id="input-variable-{idx}" id="input-variable-{idx}"
required required
/> /> -->
{:else if variables[variable]?.type === 'tel'} {:else if variables[variable]?.type === 'tel'}
<input <input
type="tel" type="tel"
@ -219,6 +257,7 @@
autocomplete="off" autocomplete="off"
id="input-variable-{idx}" id="input-variable-{idx}"
required required
{...variableAttributes}
/> />
{:else if variables[variable]?.type === 'text'} {:else if variables[variable]?.type === 'text'}
<input <input
@ -229,6 +268,7 @@
autocomplete="off" autocomplete="off"
id="input-variable-{idx}" id="input-variable-{idx}"
required required
{...variableAttributes}
/> />
{:else if variables[variable]?.type === 'time'} {:else if variables[variable]?.type === 'time'}
<input <input
@ -239,6 +279,7 @@
autocomplete="off" autocomplete="off"
id="input-variable-{idx}" id="input-variable-{idx}"
required required
{...variableAttributes}
/> />
{:else if variables[variable]?.type === 'url'} {:else if variables[variable]?.type === 'url'}
<input <input
@ -249,6 +290,7 @@
autocomplete="off" autocomplete="off"
id="input-variable-{idx}" id="input-variable-{idx}"
required required
{...variableAttributes}
/> />
{:else if variables[variable]?.type === 'map'} {:else if variables[variable]?.type === 'map'}
<!-- EXPERIMENTAL INPUT TYPE, DO NOT USE IN PRODUCTION --> <!-- EXPERIMENTAL INPUT TYPE, DO NOT USE IN PRODUCTION -->