From c03cccfd1468cc4460f50f276299a22fa4f63a33 Mon Sep 17 00:00:00 2001 From: "Timothy J. Baek" Date: Mon, 21 Oct 2024 15:24:59 -0700 Subject: [PATCH] refac: playground --- .../chat/ModelSelector/Selector.svelte | 3 +- src/lib/components/common/Collapsible.svelte | 25 +- src/lib/components/common/Sidebar.svelte | 30 +++ src/lib/components/icons/ArrowRight.svelte | 15 ++ src/lib/components/icons/Cog6.svelte | 20 ++ src/lib/components/icons/PencilSquare.svelte | 13 + src/lib/components/playground/Chat.svelte | 254 +++++++++++++----- .../Messages.svelte} | 33 --- .../components/playground/Completions.svelte | 13 +- src/routes/(app)/playground/+layout.svelte | 2 +- 10 files changed, 294 insertions(+), 114 deletions(-) create mode 100644 src/lib/components/common/Sidebar.svelte create mode 100644 src/lib/components/icons/ArrowRight.svelte create mode 100644 src/lib/components/icons/Cog6.svelte create mode 100644 src/lib/components/icons/PencilSquare.svelte rename src/lib/components/playground/{ChatCompletion.svelte => Chat/Messages.svelte} (76%) 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" >
{#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; @@ -60,13 +62,28 @@ >
+ + {#if grow} + {#if open && !hide} +
{ + e.stopPropagation(); + }} + > + +
+ {/if} + {/if}
{/if} - {#if open && !hide} -
- -
+ {#if !grow} + {#if open && !hide} +
+ +
+ {/if} {/if} 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 @@ + + +{#if show} + +
{ + show = false; + }} + transition:fade + /> + +
+
+ +
+
+{/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 @@ + + + + + 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 @@ + + + + + + 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 @@ + + + + + + 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 @@
-
-
-
-
-
-
-
- ({ - value: model.id, - label: model.name, - model: model - }))} - bind:value={selectedModelId} - /> -
+
+ +
+
+
Settings
+ +
+ +
+
+ +
+
+
Model
+ +
+ ({ + value: model.id, + label: model.name, + model: model + }))} + bind:value={selectedModelId} + />
+ -
-
-
{$i18n.t('System')}
-