diff --git a/src/lib/components/chat/ModelSelector/Selector.svelte b/src/lib/components/chat/ModelSelector/Selector.svelte
index 787ee882a..38332fb0e 100644
--- a/src/lib/components/chat/ModelSelector/Selector.svelte
+++ b/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}
diff --git a/src/lib/components/common/Collapsible.svelte b/src/lib/components/common/Collapsible.svelte
index e514d92a6..b61e74dd5 100644
--- a/src/lib/components/common/Collapsible.svelte
+++ b/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>
diff --git a/src/lib/components/common/Sidebar.svelte b/src/lib/components/common/Sidebar.svelte
new file mode 100644
index 000000000..4ff3d2a6b
--- /dev/null
+++ b/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}
diff --git a/src/lib/components/icons/ArrowRight.svelte b/src/lib/components/icons/ArrowRight.svelte
new file mode 100644
index 000000000..a3ac1af4b
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/icons/Cog6.svelte b/src/lib/components/icons/Cog6.svelte
new file mode 100644
index 000000000..286b62624
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/icons/PencilSquare.svelte b/src/lib/components/icons/PencilSquare.svelte
new file mode 100644
index 000000000..9d44ac64b
--- /dev/null
+++ b/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>
diff --git a/src/lib/components/playground/Chat.svelte b/src/lib/components/playground/Chat.svelte
index 4abcdca26..eb06a9df2 100644
--- a/src/lib/components/playground/Chat.svelte
+++ b/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="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 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 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>
diff --git a/src/lib/components/playground/ChatCompletion.svelte b/src/lib/components/playground/Chat/Messages.svelte
similarity index 76%
rename from src/lib/components/playground/ChatCompletion.svelte
rename to src/lib/components/playground/Chat/Messages.svelte
index 25cc99ec4..4fd4e212e 100644
--- a/src/lib/components/playground/ChatCompletion.svelte
+++ b/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>
diff --git a/src/lib/components/playground/Completions.svelte b/src/lib/components/playground/Completions.svelte
index f370a2e0c..abc3b8db1 100644
--- a/src/lib/components/playground/Completions.svelte
+++ b/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
diff --git a/src/routes/(app)/playground/+layout.svelte b/src/routes/(app)/playground/+layout.svelte
index 583e83b7d..c4f2e808b 100644
--- a/src/routes/(app)/playground/+layout.svelte
+++ b/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>