bhetherman/open-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2026-07-14 02:11:38 -04:00
parent 251ef952bf
commit b9d5462ed0
7 changed files with 321 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/chat/Messages.svelte
+2 -8
View File
@@ -1,12 +1,6 @@
<script lang="ts">
import { v4 as uuidv4 } from 'uuid';
import {
config,
settings,
user as _user,
mobile,
temporaryChatEnabled
} from '$lib/stores';
import { config, settings, user as _user, mobile, temporaryChatEnabled } from '$lib/stores';
import { refreshChatList } from '$lib/stores/chat-list';
import { tick, getContext, onMount, onDestroy, createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
@@ -23,7 +17,7 @@
const i18n = getContext('i18n');
export let className = 'h-full flex pt-8';
export let className = 'h-full flex pt-12';
export let chatId = '';
export let user = $_user;
src/lib/components/chat/ModelSelector.svelte
+30 -88
View File
@@ -1,9 +1,8 @@
<script lang="ts">
import { models, showSettings, settings, user, mobile, config } from '$lib/stores';
import { onMount, tick, getContext } from 'svelte';
import { models, settings, user } from '$lib/stores';
import { getContext } from 'svelte';
import { toast } from 'svelte-sonner';
import Selector from './ModelSelector/Selector.svelte';
import Tooltip from '../common/Tooltip.svelte';
import { updateUserSettings } from '$lib/apis/users';
import equal from 'fast-deep-equal';
@@ -15,6 +14,8 @@
export let showSetDefault = true;
export let triggerClassName = 'text-lg';
let compareModels = selectedModels.length > 1;
const saveDefaultModel = async () => {
const hasEmptyModel = selectedModels.filter((it) => it === '');
if (hasEmptyModel.length) {
@@ -49,94 +50,35 @@
selectedModels = _selectedModels;
}
}
$: if (selectedModels.length > 1 && !compareModels) {
compareModels = true;
}
</script>
<div class="flex flex-col w-full items-start">
{#each selectedModels as selectedModel, selectedModelIdx}
<div class="flex w-full max-w-fit">
<div class="overflow-hidden w-full">
<div class="max-w-full {($settings?.highContrastMode ?? false) ? 'm-1' : 'mr-1'}">
<Selector
id={`${selectedModelIdx}`}
placeholder={$i18n.t('Select a model')}
items={$models.map((model) => ({
value: model.id,
label: model.name,
model: model
}))}
{pinModelHandler}
{triggerClassName}
bind:value={selectedModel}
/>
</div>
<div class="flex w-full max-w-fit">
<div class="overflow-hidden w-full">
<div class="max-w-full {($settings?.highContrastMode ?? false) ? 'm-1' : 'mr-1'}">
<Selector
id="model"
placeholder={$i18n.t('Select a model')}
items={$models.map((model) => ({
value: model.id,
label: model.name,
model: model
}))}
{pinModelHandler}
{triggerClassName}
{showSetDefault}
onSetDefault={saveDefaultModel}
multipleEnabled={$user?.role === 'admin' ||
($user?.permissions?.chat?.multiple_models ?? true)}
{disabled}
bind:compareEnabled={compareModels}
bind:values={selectedModels}
/>
</div>
{#if $user?.role === 'admin' || ($user?.permissions?.chat?.multiple_models ?? true)}
{#if selectedModelIdx === 0}
<div
class=" self-center mx-1 disabled:text-gray-600 disabled:hover:text-gray-600 -translate-y-[0.5px]"
>
<Tooltip content={$i18n.t('Add Model')}>
<button
class=" "
{disabled}
on:click={() => {
selectedModels = [
...selectedModels,
selectedModels[selectedModels.length - 1] || ''
];
}}
aria-label="Add Model"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
class="size-3.5"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m6-6H6" />
</svg>
</button>
</Tooltip>
</div>
{:else}
<div
class=" self-center mx-1 disabled:text-gray-600 disabled:hover:text-gray-600 -translate-y-[0.5px]"
>
<Tooltip content={$i18n.t('Remove Model')}>
<button
{disabled}
on:click={() => {
selectedModels.splice(selectedModelIdx, 1);
selectedModels = selectedModels;
}}
aria-label="Remove Model"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
class="size-3"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
</svg>
</button>
</Tooltip>
</div>
{/if}
{/if}
</div>
{/each}
</div>
{#if showSetDefault}
<div
class="relative text-left mt-[1px] ml-1 text-[0.7rem] text-gray-600 dark:text-gray-400 font-primary"
>
<button on:click={saveDefaultModel}> {$i18n.t('Set as default')}</button>
</div>
{/if}
</div>
src/lib/components/chat/ModelSelector/ModelItem.svelte
+7 -4
View File
@@ -23,6 +23,8 @@
export let item: any = {};
export let index: number = -1;
export let value: string | null = '';
export let selectedValues: string[] = [];
export let compareEnabled = false;
export let unloadModelHandler: (modelValue: string) => void = () => {};
export let pinModelHandler: (modelId: string) => void = () => {};
@@ -43,16 +45,17 @@
};
let showMenu = false;
$: isSelected = compareEnabled ? selectedValues.includes(item.value) : value === item.value;
</script>
<button
role="option"
aria-selected={value === item.value}
aria-selected={isSelected}
aria-label={$i18n.t('Select {{modelName}} model', { modelName: item.label })}
class="flex group/item w-full text-left font-medium line-clamp-1 select-none items-center rounded-button py-[7px] pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-hidden transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-xl cursor-pointer data-highlighted:bg-muted {index ===
selectedModelIdx
selectedModelIdx && !compareEnabled
? 'bg-gray-100 dark:bg-gray-800 group-hover:bg-transparent'
: ''}"
: ''} {isSelected ? 'bg-gray-100 dark:bg-gray-800 group-hover:bg-transparent' : ''}"
data-arrow-selected={index === selectedModelIdx}
data-value={item.value}
on:click={() => {
@@ -281,7 +284,7 @@
</ModelItemMenu>
{/if}
{#if value === item.value}
{#if isSelected}
<div>
<Check className="size-3" />
</div>
src/lib/components/chat/ModelSelector/Selector.svelte
+91 -16
View File
@@ -43,6 +43,10 @@
export let id = '';
export let value: string | null = '';
export let values: string[] | null = null;
export let compareEnabled = false;
export let multipleEnabled = false;
export let disabled = false;
export let placeholder = $i18n.t('Select a model');
export let searchEnabled = true;
export let searchPlaceholder = $i18n.t('Search a model');
@@ -59,6 +63,8 @@
export let className = 'w-[32rem]';
export let triggerClassName = 'text-lg';
export let showSetDefault = false;
export let onSetDefault: () => Promise<void> | void = () => {};
export let pinModelHandler: (modelId: string) => void = () => {};
@@ -126,7 +132,15 @@
let tags = [];
let selectedModel = '';
$: selectedModel = items.find((item) => item.value === value) ?? '';
$: selectedValues = values ?? (value ? [value] : []);
$: primaryValue = selectedValues[0] ?? value ?? '';
$: selectedModel = items.find((item) => item.value === primaryValue) ?? '';
$: selectedCount = selectedValues.filter(Boolean).length;
$: triggerLabel = selectedModel
? compareEnabled && selectedCount > 1
? `${selectedModel.label} +${selectedCount - 1}`
: selectedModel.label
: placeholder;
let searchValue = '';
@@ -232,7 +246,7 @@
const resetView = async () => {
await tick();
const selectedInFiltered = filteredItems.findIndex((item) => item.value === value);
const selectedInFiltered = filteredItems.findIndex((item) => item.value === primaryValue);
if (selectedInFiltered >= 0) {
// The selected model is visible in the current filter
@@ -257,6 +271,45 @@
item?.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'instant' });
};
const setCompareEnabled = (enabled: boolean) => {
compareEnabled = enabled;
if (!enabled && values) {
values = [primaryValue || selectedValues[0] || ''];
value = values[0];
}
};
const selectItem = (item, index: number) => {
selectedModelIdx = index;
if (values) {
if (compareEnabled) {
const nextValues = selectedValues.includes(item.value)
? selectedValues.length > 1
? selectedValues.filter((selectedValue) => selectedValue !== item.value)
: selectedValues
: [...selectedValues.filter(Boolean), item.value];
values = nextValues.length ? nextValues : [item.value];
value = values[0];
return;
}
values = [item.value];
value = item.value;
show = false;
return;
}
value = item.value;
show = false;
};
const setDefaultHandler = async () => {
await onSetDefault();
};
const pullModelHandler = async () => {
const sanitizedModelTag = searchValue.trim().replace(/^ollama\s+(run|pull)\s+/, '');
@@ -511,12 +564,13 @@
? ''
: 'outline-hidden focus:outline-hidden'}"
aria-label={selectedModel
? $i18n.t('Selected model: {{modelName}}', { modelName: selectedModel.label })
? $i18n.t('Selected model: {{modelName}}', { modelName: triggerLabel })
: placeholder}
aria-haspopup="listbox"
aria-expanded={show}
id="model-selector-{id}-button"
type="button"
{disabled}
on:click={toggleOpen}
>
<div
@@ -533,11 +587,7 @@
);
}}
>
{#if selectedModel}
{selectedModel.label}
{:else}
{placeholder}
{/if}
{triggerLabel}
<ChevronDown className=" self-center ml-2 size-3" strokeWidth="2.5" />
</div>
</button>
@@ -570,8 +620,7 @@
aria-label={$i18n.t('Search In Models')}
on:keydown={(e) => {
if (e.code === 'Enter' && filteredItems.length > 0) {
value = filteredItems[selectedModelIdx].value;
show = false;
selectItem(filteredItems[selectedModelIdx], selectedModelIdx);
return; // dont need to scroll on selection
} else if (e.code === 'ArrowDown') {
e.stopPropagation();
@@ -592,6 +641,21 @@
});
}}
/>
{#if multipleEnabled}
<button
type="button"
class="shrink-0 rounded-full px-2 py-1 text-[11px] font-medium leading-none transition-colors duration-100 {compareEnabled
? 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-200'
: 'text-gray-400 hover:bg-gray-50 hover:text-gray-600 dark:text-gray-500 dark:hover:bg-gray-800/40 dark:hover:text-gray-300'}"
aria-pressed={compareEnabled}
on:click={() => {
setCompareEnabled(!compareEnabled);
}}
>
{$i18n.t('Compare')}
</button>
{/if}
</div>
{/if}
@@ -740,16 +804,15 @@
{selectedModelIdx}
{item}
{index}
{value}
value={primaryValue}
{pinModelHandler}
{unloadModelHandler}
{deleteModelHandler}
{selectionOnly}
{compareEnabled}
{selectedValues}
onClick={() => {
value = item.value;
selectedModelIdx = index;
show = false;
selectItem(item, index);
}}
/>
{/each}
@@ -842,7 +905,19 @@
{/each}
</div>
<div class="pb-2"></div>
{#if showSetDefault}
<div class="px-3 pb-2 pt-1 text-left">
<button
type="button"
class="text-[0.7rem] font-normal text-gray-500 underline-offset-2 transition-colors duration-100 hover:text-gray-700 hover:underline dark:text-gray-500 dark:hover:text-gray-300"
on:click|stopPropagation={setDefaultHandler}
>
{$i18n.t('Set as default')}
</button>
</div>
{:else}
<div class="pb-2"></div>
{/if}
<div class="hidden w-[42rem]" />
<div class="hidden w-[32rem]" />
src/lib/components/chat/Placeholder/FolderTitle.svelte
+1 -1
View File
@@ -229,7 +229,7 @@
>
<button
aria-label={$i18n.t('Change folder icon')}
class=" rounded-full bg-gray-50 dark:bg-gray-800 size-11 flex justify-center items-center"
class="rounded-full bg-gray-50 dark:bg-gray-800 size-11 flex justify-center items-center outline-hidden focus:outline-hidden"
>
{#if folder?.meta?.icon}
<Emoji className="size-6" shortCode={folder.meta.icon} />