refac: playground

src/lib/components/chat/ModelSelector/Selector.svelte

@@ -42,6 +42,7 @@
 	}[] = [];
 
 	export let className = 'w-[32rem]';
+	export let triggerClassName = 'text-lg';
 
 	let show = false;
 
@@ -236,7 +237,7 @@
 		id="model-selector-{id}-button"
 	>
 		<div
-			class="flex w-full text-left px-0.5 outline-none bg-transparent truncate text-lg font-medium placeholder-gray-400 focus:outline-none"
+			class="flex w-full text-left px-0.5 outline-none bg-transparent truncate {triggerClassName} justify-between font-medium placeholder-gray-400 focus:outline-none"
 		>
 			{#if selectedModel}
 				{selectedModel.label}

src/lib/components/common/Collapsible.svelte

@@ -15,6 +15,8 @@
 	export let buttonClassName = 'w-fit';
 	export let title = null;
 
+	export let grow = false;
+
 	export let disabled = false;
 	export let hide = false;
 </script>
@@ -60,13 +62,28 @@
 		>
 			<div>
 				<slot />
+
+				{#if grow}
+					{#if open && !hide}
+						<div
+							transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}
+							on:pointerup={(e) => {
+								e.stopPropagation();
+							}}
+						>
+							<slot name="content" />
+						</div>
+					{/if}
+				{/if}
 			</div>
 		</div>
 	{/if}
 
-	{#if open && !hide}
-		<div transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}>
-			<slot name="content" />
-		</div>
+	{#if !grow}
+		{#if open && !hide}
+			<div transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}>
+				<slot name="content" />
+			</div>
+		{/if}
 	{/if}
 </div>

src/lib/components/common/Sidebar.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { quadInOut, quintIn } from 'svelte/easing';
+	import { fade, slide } from 'svelte/transition';
+
+	export let show = false;
+	export let side = 'right';
+	export let width = '200px';
+
+	export let className = '';
+</script>
+
+{#if show}
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div
+		class="absolute z-20 top-0 right-0 left-0 bottom-0 bg-black/10 w-full min-h-full h-full flex justify-center overflow-hidden overscroll-contain"
+		on:mousedown={() => {
+			show = false;
+		}}
+		transition:fade
+	/>
+
+	<div
+		class="absolute z-30 shadow-xl {side === 'right' ? 'right-0' : 'left-0'} top-0 bottom-0"
+		transition:slide={{ easing: quadInOut, axis: side === 'right' ? 'x' : 'y' }}
+	>
+		<div class="{className} h-full" style="width: {show ? width : '0px'}">
+			<slot />
+		</div>
+	</div>
+{/if}

src/lib/components/icons/ArrowRight.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
+</svg>

src/lib/components/icons/Cog6.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	export let className = 'w-4 h-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"
+	/>
+	<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
+</svg>

src/lib/components/icons/PencilSquare.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	export let className = 'size-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class={className}>
+	<path
+		d="m5.433 13.917 1.262-3.155A4 4 0 0 1 7.58 9.42l6.92-6.918a2.121 2.121 0 0 1 3 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 0 1-.65-.65Z"
+	/>
+	<path
+		d="M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0 0 10 3H4.75A2.75 2.75 0 0 0 2 5.75v9.5A2.75 2.75 0 0 0 4.75 18h9.5A2.75 2.75 0 0 0 17 15.25V10a.75.75 0 0 0-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5Z"
+	/>
+</svg>

src/lib/components/playground/Chat.svelte

@@ -10,13 +10,21 @@
 		WEBUI_API_BASE_URL,
 		WEBUI_BASE_URL
 	} from '$lib/constants';
-	import { WEBUI_NAME, config, user, models, settings, showSidebar } from '$lib/stores';
+	import { WEBUI_NAME, config, user, models, settings } from '$lib/stores';
 
 	import { generateOpenAIChatCompletion } from '$lib/apis/openai';
 
 	import { splitStream } from '$lib/utils';
-	import ChatCompletion from '$lib/components/playground/ChatCompletion.svelte';
 	import Selector from '$lib/components/chat/ModelSelector/Selector.svelte';
+	import Collapsible from '../common/Collapsible.svelte';
+
+	import Messages from './chat/Messages.svelte';
+	import ChevronUp from '../icons/ChevronUp.svelte';
+	import ChevronDown from '../icons/ChevronDown.svelte';
+	import Pencil from '../icons/Pencil.svelte';
+	import Cog6 from '../icons/Cog6.svelte';
+	import Sidebar from '../common/Sidebar.svelte';
+	import ArrowRight from '../icons/ArrowRight.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -28,13 +36,15 @@
 
 	let messagesContainerElement: HTMLDivElement;
 
+	let showSystem = false;
+	let showSettings = false;
+
 	let system = '';
-	let messages = [
-		{
-			role: 'user',
-			content: ''
-		}
-	];
+
+	let role = 'user';
+	let message = '';
+
+	let messages = [];
 
 	const scrollToBottom = () => {
 		const element = messagesContainerElement;
@@ -137,6 +147,20 @@
 		}
 	};
 
+	const addHandler = async () => {
+		if (message) {
+			messages.push({
+				role: role,
+				content: message
+			});
+			messages = messages;
+			message = '';
+			role = role === 'user' ? 'assistant' : 'user';
+			await tick();
+			scrollToBottom();
+		}
+	};
+
 	const submitHandler = async () => {
 		if (selectedModelId) {
 			loading = true;
@@ -164,40 +188,95 @@
 </script>
 
 <div class=" flex flex-col justify-between w-full overflow-y-auto h-full">
-	<div class="mx-auto w-full md:px-0 h-full">
-		<div class=" flex flex-col h-full">
-			<div class="flex flex-col justify-between mb-1 gap-1">
-				<div class="flex flex-col gap-1 w-full">
-					<div class="flex w-full">
-						<div class="overflow-hidden w-full">
-							<div class="max-w-full">
-								<Selector
-									placeholder={$i18n.t('Select a model')}
-									items={$models.map((model) => ({
-										value: model.id,
-										label: model.name,
-										model: model
-									}))}
-									bind:value={selectedModelId}
-								/>
-							</div>
+	<div class="mx-auto w-full md:px-0 h-full relative">
+		<Sidebar bind:show={showSettings} className=" dark:bg-gray-900" width="250px">
+			<div class="flex flex-col px-5 py-3 text-sm">
+				<div class="flex justify-between items-center mb-2">
+					<div class=" font-medium text-base">Settings</div>
+
+					<div>
+						<button class="p-1.5 bg-transparent hover:bg-white/5 transition rounded-lg">
+							<ArrowRight strokeWidth="2.5" />
+						</button>
+					</div>
+				</div>
+
+				<div>
+					<div>
+						<div class=" text-xs font-medium mb-1">Model</div>
+
+						<div class="w-full">
+							<Selector
+								triggerClassName="text-sm"
+								placeholder={$i18n.t('Select a model')}
+								items={$models.map((model) => ({
+									value: model.id,
+									label: model.name,
+									model: model
+								}))}
+								bind:value={selectedModelId}
+							/>
 						</div>
 					</div>
 				</div>
 			</div>
+		</Sidebar>
+
+		<div class=" flex flex-col h-full px-4 py-1">
+			<div class="flex w-full items-start gap-1.5">
+				<Collapsible
+					className="w-full flex-1"
+					bind:open={showSystem}
+					buttonClassName="w-full rounded-lg text-sm border border-gray-50 dark:border-gray-850 w-full py-1 px-1.5"
+					grow={true}
+				>
+					<div class="flex gap-2 justify-between items-center">
+						<div class=" flex-shrink-0 font-medium ml-1.5">
+							{$i18n.t('System Instructions')}
+						</div>
+
+						{#if !showSystem}
+							<div class=" flex-1 text-gray-500 line-clamp-1">
+								{system}
+							</div>
+						{/if}
+
+						<div class="flex-shrink-0">
+							<button class="p-1.5 bg-transparent hover:bg-white/5 transition rounded-lg">
+								{#if showSystem}
+									<ChevronUp className="size-3.5" />
+								{:else}
+									<Pencil className="size-3.5" />
+								{/if}
+							</button>
+						</div>
+					</div>
 
-			<div class="p-1">
-				<div class="p-3 outline outline-1 outline-gray-200 dark:outline-gray-800 rounded-lg">
-					<div class=" text-sm font-medium">{$i18n.t('System')}</div>
-					<textarea
-						id="system-textarea"
-						class="w-full h-full bg-transparent resize-none outline-none text-sm"
-						bind:value={system}
-						placeholder={$i18n.t("You're a helpful assistant.")}
-						rows="4"
-					/>
+					<div slot="content">
+						<div class="pt-1 px-1.5">
+							<textarea
+								id="system-textarea"
+								class="w-full h-full bg-transparent resize-none outline-none text-sm"
+								bind:value={system}
+								placeholder={$i18n.t("You're a helpful assistant.")}
+								rows="4"
+							/>
+						</div>
+					</div>
+				</Collapsible>
+
+				<div class="translate-y-1">
+					<button
+						class="p-1.5 bg-transparent hover:bg-white/5 transition rounded-lg"
+						on:click={() => {
+							showSettings = !showSettings;
+						}}
+					>
+						<Cog6 />
+					</button>
 				</div>
 			</div>
+
 			<div
 				class=" pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0"
 				id="messages-container"
@@ -205,43 +284,84 @@
 			>
 				<div class=" h-full w-full flex flex-col">
 					<div class="flex-1 p-1">
-						<ChatCompletion bind:messages />
+						<Messages bind:messages />
 					</div>
 				</div>
 			</div>
 
-			<div class="pb-3 flex justify-end">
-				{#if !loading}
-					<button
-						class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-full"
-						on:click={() => {
-							submitHandler();
-						}}
-					>
-						{$i18n.t('Submit')}
-					</button>
-				{:else}
-					<button
-						class="px-3 py-1.5 text-sm font-medium bg-gray-300 text-black transition rounded-full"
-						on:click={() => {
-							stopResponse();
-						}}
-					>
-						{$i18n.t('Cancel')}
-					</button>
-				{/if}
+			<div class="pb-3">
+				<div class="border border-gray-50 dark:border-gray-850 w-full px-3 py-2.5 rounded-xl">
+					<div class="py-0.5">
+						<!-- $i18n.t('a user') -->
+						<!-- $i18n.t('an assistant') -->
+						<textarea
+							bind:value={message}
+							class=" w-full h-full bg-transparent resize-none outline-none text-sm"
+							placeholder={$i18n.t(`Enter {{role}} message here`, {
+								role: role === 'user' ? $i18n.t('a user') : $i18n.t('an assistant')
+							})}
+							on:input={(e) => {
+								e.target.style.height = '';
+								e.target.style.height = Math.min(e.target.scrollHeight, 150) + 'px';
+							}}
+							on:focus={(e) => {
+								e.target.style.height = '';
+								e.target.style.height = Math.min(e.target.scrollHeight, 150) + 'px';
+							}}
+							rows="2"
+						/>
+					</div>
+
+					<div class="flex justify-between">
+						<div>
+							<button
+								class="px-3.5 py-1.5 text-sm font-medium bg-gray-50 hover:bg-gray-100 text-gray-900 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition rounded-lg"
+								on:click={() => {
+									role = role === 'user' ? 'assistant' : 'user';
+								}}
+							>
+								{#if role === 'user'}
+									{$i18n.t('User')}
+								{:else}
+									{$i18n.t('Assistant')}
+								{/if}
+							</button>
+						</div>
+
+						<div>
+							{#if !loading}
+								<button
+									disabled={message === ''}
+									class="px-3.5 py-1.5 text-sm font-medium disabled:bg-gray-50 dark:disabled:hover:bg-gray-850 disabled:cursor-not-allowed bg-gray-50 hover:bg-gray-100 text-gray-900 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition rounded-lg"
+									on:click={() => {
+										addHandler();
+									}}
+								>
+									{$i18n.t('Add')}
+								</button>
+
+								<button
+									class="px-3.5 py-1.5 text-sm font-medium bg-black hover:bg-gray-900 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition rounded-lg"
+									on:click={() => {
+										submitHandler();
+									}}
+								>
+									{$i18n.t('Run')}
+								</button>
+							{:else}
+								<button
+									class="px-3 py-1.5 text-sm font-medium bg-gray-300 text-black transition rounded-lg"
+									on:click={() => {
+										stopResponse();
+									}}
+								>
+									{$i18n.t('Cancel')}
+								</button>
+							{/if}
+						</div>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>
 </div>
-
-<style>
-	.scrollbar-hidden::-webkit-scrollbar {
-		display: none; /* for Chrome, Safari and Opera */
-	}
-
-	.scrollbar-hidden {
-		-ms-overflow-style: none; /* IE and Edge */
-		scrollbar-width: none; /* Firefox */
-	}
-</style>

src/lib/components/playground/ChatCompletion.svelte → src/lib/components/playground/Chat/Messages.svelte

@@ -74,38 +74,5 @@
 				</button>
 			</div>
 		</div>
-
-		<hr class=" dark:border-gray-800" />
 	{/each}
-
-	<button
-		class="flex items-center gap-2 px-2 py-1"
-		on:click={() => {
-			console.log(messages.at(-1));
-			messages.push({
-				role: (messages.at(-1)?.role ?? 'assistant') === 'user' ? 'assistant' : 'user',
-				content: ''
-			});
-			messages = messages;
-		}}
-	>
-		<div>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				fill="none"
-				viewBox="0 0 24 24"
-				stroke-width="1.5"
-				stroke="currentColor"
-				class="w-5 h-5"
-			>
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					d="M12 9v6m3-3H9m12 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
-				/>
-			</svg>
-		</div>
-
-		<div class=" text-sm font-medium">{$i18n.t('Add message')}</div>
-	</button>
 </div>

src/lib/components/playground/Completions.svelte

@@ -6,12 +6,9 @@
 
 	import { WEBUI_BASE_URL } from '$lib/constants';
 	import { WEBUI_NAME, config, user, models, settings, showSidebar } from '$lib/stores';
-
-	import { generateChatCompletion } from '$lib/apis/ollama';
 	import { generateOpenAIChatCompletion } from '$lib/apis/openai';
 
 	import { splitStream } from '$lib/utils';
-	import ChatCompletion from '$lib/components/playground/ChatCompletion.svelte';
 	import Selector from '$lib/components/chat/ModelSelector/Selector.svelte';
 	import MenuLines from '../icons/MenuLines.svelte';
 
@@ -125,7 +122,7 @@
 
 <div class=" flex flex-col justify-between w-full overflow-y-auto h-full">
 	<div class="mx-auto w-full md:px-0 h-full">
-		<div class=" flex flex-col h-full">
+		<div class=" flex flex-col h-full px-4">
 			<div class="flex flex-col justify-between mb-1 gap-1">
 				<div class="flex flex-col gap-1 w-full">
 					<div class="flex w-full">
@@ -147,15 +144,15 @@
 			</div>
 
 			<div
-				class=" pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0"
+				class=" pt-0.5 pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0"
 				id="messages-container"
 			>
 				<div class=" h-full w-full flex flex-col">
-					<div class="flex-1 p-1">
+					<div class="flex-1">
 						<textarea
 							id="text-completion-textarea"
 							bind:this={textCompletionAreaElement}
-							class="w-full h-full p-3 bg-transparent outline outline-1 outline-gray-200 dark:outline-gray-800 resize-none rounded-lg text-sm"
+							class="w-full h-full p-3 bg-transparent border border-gray-50 dark:border-gray-850 outline-none resize-none rounded-lg text-sm"
 							bind:value={text}
 							placeholder={$i18n.t("You're a helpful assistant.")}
 						/>
@@ -171,7 +168,7 @@
 							submitHandler();
 						}}
 					>
-						{$i18n.t('Submit')}
+						{$i18n.t('Run')}
 					</button>
 				{:else}
 					<button

src/routes/(app)/playground/+layout.svelte

@@ -64,7 +64,7 @@
 		</div>
 	</div>
 
-	<div class=" pb-1 px-[18px] flex-1 max-h-full overflow-y-auto">
+	<div class=" flex-1 max-h-full overflow-y-auto">
 		<slot />
 	</div>
 </div>