mirror of
https://github.com/open-webui/open-webui
synced 2025-03-24 06:37:14 +00:00
refac: playground
This commit is contained in:
Timothy J. Baek
parent
39e3afd55d
commit
c03cccfd14
@ -42,6 +42,7 @@
|
|||||||
}[] = [];
|
}[] = [];
|
||||||
|
|
||||||
export let className = 'w-[32rem]';
|
export let className = 'w-[32rem]';
|
||||||
|
export let triggerClassName = 'text-lg';
|
||||||
|
|
||||||
let show = false;
|
let show = false;
|
||||||
|
|
||||||
@ -236,7 +237,7 @@
|
|||||||
id="model-selector-{id}-button"
|
id="model-selector-{id}-button"
|
||||||
>
|
>
|
||||||
<div
|
<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}
|
{#if selectedModel}
|
||||||
{selectedModel.label}
|
{selectedModel.label}
|
||||||
|
|||||||
@ -15,6 +15,8 @@
|
|||||||
export let buttonClassName = 'w-fit';
|
export let buttonClassName = 'w-fit';
|
||||||
export let title = null;
|
export let title = null;
|
||||||
|
|
||||||
|
export let grow = false;
|
||||||
|
|
||||||
export let disabled = false;
|
export let disabled = false;
|
||||||
export let hide = false;
|
export let hide = false;
|
||||||
</script>
|
</script>
|
||||||
@ -60,13 +62,28 @@
|
|||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<slot />
|
<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>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if open && !hide}
|
{#if !grow}
|
||||||
<div transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}>
|
{#if open && !hide}
|
||||||
<slot name="content" />
|
<div transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}>
|
||||||
</div>
|
<slot name="content" />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
30
src/lib/components/common/Sidebar.svelte
Normal file
30
src/lib/components/common/Sidebar.svelte
Normal file
@ -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}
|
||||||
15
src/lib/components/icons/ArrowRight.svelte
Normal file
15
src/lib/components/icons/ArrowRight.svelte
Normal file
@ -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>
|
||||||
20
src/lib/components/icons/Cog6.svelte
Normal file
20
src/lib/components/icons/Cog6.svelte
Normal file
@ -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>
|
||||||
13
src/lib/components/icons/PencilSquare.svelte
Normal file
13
src/lib/components/icons/PencilSquare.svelte
Normal file
@ -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>
|
||||||
@ -10,13 +10,21 @@
|
|||||||
WEBUI_API_BASE_URL,
|
WEBUI_API_BASE_URL,
|
||||||
WEBUI_BASE_URL
|
WEBUI_BASE_URL
|
||||||
} from '$lib/constants';
|
} 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 { generateOpenAIChatCompletion } from '$lib/apis/openai';
|
||||||
|
|
||||||
import { splitStream } from '$lib/utils';
|
import { splitStream } from '$lib/utils';
|
||||||
import ChatCompletion from '$lib/components/playground/ChatCompletion.svelte';
|
|
||||||
import Selector from '$lib/components/chat/ModelSelector/Selector.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');
|
const i18n = getContext('i18n');
|
||||||
|
|
||||||
@ -28,13 +36,15 @@
|
|||||||
|
|
||||||
let messagesContainerElement: HTMLDivElement;
|
let messagesContainerElement: HTMLDivElement;
|
||||||
|
|
||||||
|
let showSystem = false;
|
||||||
|
let showSettings = false;
|
||||||
|
|
||||||
let system = '';
|
let system = '';
|
||||||
let messages = [
|
|
||||||
{
|
let role = 'user';
|
||||||
role: 'user',
|
let message = '';
|
||||||
content: ''
|
|
||||||
}
|
let messages = [];
|
||||||
];
|
|
||||||
|
|
||||||
const scrollToBottom = () => {
|
const scrollToBottom = () => {
|
||||||
const element = messagesContainerElement;
|
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 () => {
|
const submitHandler = async () => {
|
||||||
if (selectedModelId) {
|
if (selectedModelId) {
|
||||||
loading = true;
|
loading = true;
|
||||||
@ -164,40 +188,95 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class=" flex flex-col justify-between w-full overflow-y-auto h-full">
|
<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="mx-auto w-full md:px-0 h-full relative">
|
||||||
<div class=" flex flex-col h-full">
|
<Sidebar bind:show={showSettings} className=" dark:bg-gray-900" width="250px">
|
||||||
<div class="flex flex-col justify-between mb-1 gap-1">
|
<div class="flex flex-col px-5 py-3 text-sm">
|
||||||
<div class="flex flex-col gap-1 w-full">
|
<div class="flex justify-between items-center mb-2">
|
||||||
<div class="flex w-full">
|
<div class=" font-medium text-base">Settings</div>
|
||||||
<div class="overflow-hidden w-full">
|
|
||||||
<div class="max-w-full">
|
<div>
|
||||||
<Selector
|
<button class="p-1.5 bg-transparent hover:bg-white/5 transition rounded-lg">
|
||||||
placeholder={$i18n.t('Select a model')}
|
<ArrowRight strokeWidth="2.5" />
|
||||||
items={$models.map((model) => ({
|
</button>
|
||||||
value: model.id,
|
</div>
|
||||||
label: model.name,
|
</div>
|
||||||
model: model
|
|
||||||
}))}
|
<div>
|
||||||
bind:value={selectedModelId}
|
<div>
|
||||||
/>
|
<div class=" text-xs font-medium mb-1">Model</div>
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</Sidebar>
|
||||||
|
|
||||||
<div class="p-1">
|
<div class=" flex flex-col h-full px-4 py-1">
|
||||||
<div class="p-3 outline outline-1 outline-gray-200 dark:outline-gray-800 rounded-lg">
|
<div class="flex w-full items-start gap-1.5">
|
||||||
<div class=" text-sm font-medium">{$i18n.t('System')}</div>
|
<Collapsible
|
||||||
<textarea
|
className="w-full flex-1"
|
||||||
id="system-textarea"
|
bind:open={showSystem}
|
||||||
class="w-full h-full bg-transparent resize-none outline-none text-sm"
|
buttonClassName="w-full rounded-lg text-sm border border-gray-50 dark:border-gray-850 w-full py-1 px-1.5"
|
||||||
bind:value={system}
|
grow={true}
|
||||||
placeholder={$i18n.t("You're a helpful assistant.")}
|
>
|
||||||
rows="4"
|
<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>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class=" pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0"
|
class=" pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0"
|
||||||
id="messages-container"
|
id="messages-container"
|
||||||
@ -205,43 +284,84 @@
|
|||||||
>
|
>
|
||||||
<div class=" h-full w-full flex flex-col">
|
<div class=" h-full w-full flex flex-col">
|
||||||
<div class="flex-1 p-1">
|
<div class="flex-1 p-1">
|
||||||
<ChatCompletion bind:messages />
|
<Messages bind:messages />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="pb-3 flex justify-end">
|
<div class="pb-3">
|
||||||
{#if !loading}
|
<div class="border border-gray-50 dark:border-gray-850 w-full px-3 py-2.5 rounded-xl">
|
||||||
<button
|
<div class="py-0.5">
|
||||||
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"
|
<!-- $i18n.t('a user') -->
|
||||||
on:click={() => {
|
<!-- $i18n.t('an assistant') -->
|
||||||
submitHandler();
|
<textarea
|
||||||
}}
|
bind:value={message}
|
||||||
>
|
class=" w-full h-full bg-transparent resize-none outline-none text-sm"
|
||||||
{$i18n.t('Submit')}
|
placeholder={$i18n.t(`Enter {{role}} message here`, {
|
||||||
</button>
|
role: role === 'user' ? $i18n.t('a user') : $i18n.t('an assistant')
|
||||||
{:else}
|
})}
|
||||||
<button
|
on:input={(e) => {
|
||||||
class="px-3 py-1.5 text-sm font-medium bg-gray-300 text-black transition rounded-full"
|
e.target.style.height = '';
|
||||||
on:click={() => {
|
e.target.style.height = Math.min(e.target.scrollHeight, 150) + 'px';
|
||||||
stopResponse();
|
}}
|
||||||
}}
|
on:focus={(e) => {
|
||||||
>
|
e.target.style.height = '';
|
||||||
{$i18n.t('Cancel')}
|
e.target.style.height = Math.min(e.target.scrollHeight, 150) + 'px';
|
||||||
</button>
|
}}
|
||||||
{/if}
|
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>
|
||||||
</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>
|
|
||||||
|
|||||||
@ -74,38 +74,5 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr class=" dark:border-gray-800" />
|
|
||||||
{/each}
|
{/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>
|
</div>
|
||||||
@ -6,12 +6,9 @@
|
|||||||
|
|
||||||
import { WEBUI_BASE_URL } from '$lib/constants';
|
import { WEBUI_BASE_URL } from '$lib/constants';
|
||||||
import { WEBUI_NAME, config, user, models, settings, showSidebar } from '$lib/stores';
|
import { WEBUI_NAME, config, user, models, settings, showSidebar } from '$lib/stores';
|
||||||
|
|
||||||
import { generateChatCompletion } from '$lib/apis/ollama';
|
|
||||||
import { generateOpenAIChatCompletion } from '$lib/apis/openai';
|
import { generateOpenAIChatCompletion } from '$lib/apis/openai';
|
||||||
|
|
||||||
import { splitStream } from '$lib/utils';
|
import { splitStream } from '$lib/utils';
|
||||||
import ChatCompletion from '$lib/components/playground/ChatCompletion.svelte';
|
|
||||||
import Selector from '$lib/components/chat/ModelSelector/Selector.svelte';
|
import Selector from '$lib/components/chat/ModelSelector/Selector.svelte';
|
||||||
import MenuLines from '../icons/MenuLines.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=" 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="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 justify-between mb-1 gap-1">
|
||||||
<div class="flex flex-col gap-1 w-full">
|
<div class="flex flex-col gap-1 w-full">
|
||||||
<div class="flex w-full">
|
<div class="flex w-full">
|
||||||
@ -147,15 +144,15 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<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"
|
id="messages-container"
|
||||||
>
|
>
|
||||||
<div class=" h-full w-full flex flex-col">
|
<div class=" h-full w-full flex flex-col">
|
||||||
<div class="flex-1 p-1">
|
<div class="flex-1">
|
||||||
<textarea
|
<textarea
|
||||||
id="text-completion-textarea"
|
id="text-completion-textarea"
|
||||||
bind:this={textCompletionAreaElement}
|
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}
|
bind:value={text}
|
||||||
placeholder={$i18n.t("You're a helpful assistant.")}
|
placeholder={$i18n.t("You're a helpful assistant.")}
|
||||||
/>
|
/>
|
||||||
@ -171,7 +168,7 @@
|
|||||||
submitHandler();
|
submitHandler();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{$i18n.t('Submit')}
|
{$i18n.t('Run')}
|
||||||
</button>
|
</button>
|
||||||
{:else}
|
{:else}
|
||||||
<button
|
<button
|
||||||
|
|||||||
@ -64,7 +64,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</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 />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user