fix: sidebar model selector issue

This commit is contained in:
Timothy J. Baek 2024-05-14 12:26:53 -10:00
parent ad67339426
commit de75679ffb
4 changed files with 24 additions and 4 deletions

View File

@ -10,7 +10,7 @@
import { cancelOllamaRequest, deleteModel, getOllamaVersion, pullModel } from '$lib/apis/ollama';
import { user, MODEL_DOWNLOAD_POOL, models } from '$lib/stores';
import { user, MODEL_DOWNLOAD_POOL, models, mobile } from '$lib/stores';
import { toast } from 'svelte-sonner';
import { capitalizeFirstLetter, getModels, splitStream } from '$lib/utils';
import Tooltip from '$lib/components/common/Tooltip.svelte';
@ -201,10 +201,11 @@
<ChevronDown className=" self-center ml-2 size-3" strokeWidth="2.5" />
</div>
</DropdownMenu.Trigger>
<DropdownMenu.Content
class=" z-40 {className} max-w-[calc(100vw-1rem)] justify-start rounded-lg bg-white dark:bg-gray-900 dark:text-white shadow-lg border border-gray-300/30 dark:border-gray-700/50 outline-none "
transition={flyAndScale}
side={'bottom'}
side={$mobile ? 'bottom' : 'bottom-start'}
sideOffset={4}
>
<slot>

View File

@ -234,7 +234,7 @@
</button>
<a
id="sidebar-new-chat-button"
class="flex justify-between rounded-xl px-2 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition"
class="flex justify-between rounded-xl px-2 py-2 hover:bg-gray-100 dark:hover:bg-gray-850 transition"
href="/"
on:click={async () => {
selectedChatId = null;

View File

@ -9,6 +9,8 @@ export const user: Writable<SessionUser | undefined> = writable(undefined);
// Frontend
export const MODEL_DOWNLOAD_POOL = writable({});
export const mobile = writable(false);
export const theme = writable('system');
export const chatId = writable('');

View File

@ -1,6 +1,6 @@
<script>
import { onMount, tick, setContext } from 'svelte';
import { config, user, theme, WEBUI_NAME } from '$lib/stores';
import { config, user, theme, WEBUI_NAME, mobile } from '$lib/stores';
import { goto } from '$app/navigation';
import { Toaster, toast } from 'svelte-sonner';
@ -18,9 +18,22 @@
setContext('i18n', i18n);
let loaded = false;
const BREAKPOINT = 1024;
onMount(async () => {
theme.set(localStorage.theme);
mobile.set(window.innerWidth < BREAKPOINT);
const onResize = () => {
if (window.innerWidth < BREAKPOINT) {
mobile.set(true);
} else {
mobile.set(false);
}
};
window.addEventListener('resize', onResize);
let backendConfig = null;
try {
backendConfig = await getBackendConfig();
@ -67,6 +80,10 @@
document.getElementById('splash-screen')?.remove();
loaded = true;
return () => {
window.removeEventListener('resize', onResize);
};
});
</script>