mirror of
https://github.com/open-webui/open-webui.git
synced 2025-12-11 20:05:19 +00:00
70 lines
1.9 KiB
Svelte
70 lines
1.9 KiB
Svelte
<script lang="ts">
|
|
import { getContext } from 'svelte';
|
|
const i18n = getContext('i18n');
|
|
|
|
import Minus from '$lib/components/icons/Minus.svelte';
|
|
|
|
export let title = '';
|
|
export let models = [];
|
|
export let modelIds = [];
|
|
|
|
let selectedModelId = '';
|
|
</script>
|
|
|
|
<div>
|
|
<div class="flex flex-col w-full">
|
|
<div class="mb-1 flex justify-between">
|
|
<div class="text-xs text-gray-500">{title}</div>
|
|
</div>
|
|
|
|
<div class="flex items-center -mr-1">
|
|
<select
|
|
class="dark:bg-gray-900 w-full py-1 text-sm rounded-lg bg-transparent {selectedModelId
|
|
? ''
|
|
: 'text-gray-500'} placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden"
|
|
bind:value={selectedModelId}
|
|
on:change={() => {
|
|
if (selectedModelId && !modelIds.includes(selectedModelId)) {
|
|
modelIds = [...modelIds, selectedModelId];
|
|
}
|
|
selectedModelId = '';
|
|
}}
|
|
>
|
|
<option value="">{$i18n.t('Select a model')}</option>
|
|
{#each models as model}
|
|
{#if !modelIds.includes(model.id)}
|
|
<option value={model.id} class="bg-gray-50 dark:bg-gray-700">{model.name}</option>
|
|
{/if}
|
|
{/each}
|
|
</select>
|
|
</div>
|
|
|
|
<!-- <hr class=" border-gray-100 dark:border-gray-700/10 my-2.5 w-full" /> -->
|
|
|
|
{#if modelIds.length > 0}
|
|
<div class="flex flex-col">
|
|
{#each modelIds as modelId, modelIdx}
|
|
<div class=" flex gap-2 w-full justify-between items-center">
|
|
<div class=" text-sm flex-1 py-1 rounded-lg">
|
|
{models.find((model) => model.id === modelId)?.name}
|
|
</div>
|
|
<div class="shrink-0">
|
|
<button
|
|
type="button"
|
|
on:click={() => {
|
|
modelIds = modelIds.filter((_, idx) => idx !== modelIdx);
|
|
}}
|
|
>
|
|
<Minus strokeWidth="2" className="size-3.5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
{:else}
|
|
<div class="text-gray-500 text-xs text-center py-2">
|
|
{$i18n.t('No models selected')}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</div>
|