Merge pull request #16 from XpressAI/paul/add-quick-backend-switcher

Add quick backend switcher
XpressAI · Oct 31, 2023 · 5942733 · 5942733
2 parents ded6655 + 705660c
commit 5942733
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 1 deletion.
diff --git a/src/lib/components/SubMenu.svelte b/src/lib/components/SubMenu.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import ChevronLeft from '@tabler/icons-svelte/dist/svelte/icons/IconChevronLeft.svelte';
+	import ChevronRight from '@tabler/icons-svelte/dist/svelte/icons/IconChevronRight.svelte';
+	import { popup } from '@skeletonlabs/skeleton';
+	import type { PopupSettings } from '@skeletonlabs/skeleton';
+
+	export let id;
+	export let position: 'left' | 'right';
+	export let name: string;
+	export let selected: boolean = false;
+	let popupSettings: PopupSettings = {
+		// Set the event as: click | hover | hover-click | focus | focus-click
+		event: 'click',
+		placement: position,
+		// Provide a matching 'data-popup' value.
+		target: `menu-${id}`,
+		closeQuery: 'a',
+		middleware: {
+			offset: 1
+		}
+	};
+</script>
+
+<div class="menu relative" on:click|stopPropagation>
+	<div use:popup={popupSettings} class="w-full btn cursor-pointer [&>*]:pointer-events-none flex" class:variant-filled={selected}>
+		<div class="flex-shrink -ml-3">
+		{#if position == 'left'}
+			<ChevronLeft />
+		{:else}
+			<ChevronRight />
+		{/if}
+		</div>
+		<div class="flex-auto justify-items-start-start">
+			{name}
+		</div>
+	</div>
+	<div data-popup="menu-{id}" style="z-index: 9999">
+		<slot />
+	</div>
+</div>
diff --git a/src/routes/[conversationId]/+page.svelte b/src/routes/[conversationId]/+page.svelte
@@ -12,14 +12,17 @@
 
 	import {
 		conversationStore,
-		currentBackend
+		currentBackend,
+		configStore
 	} from '$lib/stores/technologicStores';
 	import {drawerStore, ProgressRadial, SlideToggle} from '@skeletonlabs/skeleton';
 	import {beforeNavigate, afterNavigate} from '$app/navigation';
 	import { prompt, confirm } from "$lib/components/dialogs";
 	import {page} from "$app/stores";
 	import {generateAnswer, renameConversationWithSummary} from './conversationBroker';
 	import {goto} from "$app/navigation";
+	import SubMenu from "$lib/components/SubMenu.svelte";
+	import type {BackendConfiguration} from "$lib/stores/schema";
 
 	let inputText = '';
 	let afterMessages;
@@ -197,6 +200,16 @@
 
 		waiting = false;
 	}
+
+	function setBackend(backend: BackendConfiguration, model?: string) {
+		$configStore = {
+			...$configStore,
+			backend: {
+				name: backend.name,
+				model: model ?? backend.defaultModel
+			}
+		};
+	}
 </script>
 
 <svelte:head>
@@ -251,6 +264,32 @@
 					<li class="p-3">
 						<SlideToggle name="slider-label" bind:checked={autoSend} size="sm">Auto Send</SlideToggle>
 					</li>
+					<li><hr /></li>
+					<li>
+						<SubMenu id="backends" name="Backend" position="left">
+							<ul class="card shadow-xl dark:shadow-slate-700 list-nav !bg-surface-50-900-token">
+								{#each $configStore.backends as backend}
+									<li>
+										<SubMenu id="backend-{backend.name}"
+												 name={backend.name}
+												 position="left"
+												 selected={$configStore.backend.name === backend.name}
+										>
+											<ul class="card shadow-xl dark:shadow-slate-700 list-nav !bg-surface-50-900-token">
+												{#each backend.models as model}
+													<li><a on:click={() => setBackend(backend, model)}
+														   class="btn" class:variant-filled={$configStore.backend.name === backend.name && $configStore.backend.model === model}
+													>
+														{model}
+													</a></li>
+												{/each}
+											</ul>
+										</SubMenu>
+									</li>
+								{/each}
+							</ul>
+						</SubMenu>
+					</li>
 				</ul>
 			</Menu>
 		</div>