ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-15 13:55:19 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

fix: playground styling

Browse source
This commit is contained in:
Timothy Jaeryang Baek 2025-07-30 14:06:42 +04:00
parent 00a00f5162
commit 22d98e6ee5
1 changed files with 39 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
src/lib/components/playground/Chat.svelte
View file

@ -293,10 +293,12 @@
/> />
</div> </div>
<div class="flex justify-between"> <div
<div> class="flex justify-between flex-col sm:flex-row items-start sm:items-center gap-2 mt-2"
>
<div class="flex-1 shrink-0">
<button <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" 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 shrink-0"
on:click={() => { on:click={() => {
role = role === 'user' ? 'assistant' : 'user'; role = role === 'user' ? 'assistant' : 'user';
}} }}
@ -309,10 +311,10 @@
</button> </button>
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center justify-between gap-2 w-full sm:w-auto">
<div class=""> <div class="flex-1">
<select <select
class=" bg-transparent border border-gray-100 dark:border-gray-850 rounded-lg py-1 px-2 -mx-0.5 text-sm outline-hidden w-40" class=" bg-transparent border border-gray-100 dark:border-gray-850 rounded-lg py-1 px-2 -mx-0.5 text-sm outline-hidden w-full"
bind:value={selectedModelId} bind:value={selectedModelId}
> >
{#each $models as model} {#each $models as model}
@ -323,36 +325,38 @@
</select> </select>
</div> </div>
{#if !loading} <div class="flex gap-2 shrink-0">
<button {#if !loading}
disabled={message === ''} <button
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" disabled={message === ''}
on:click={() => { 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"
addHandler(); on:click={() => {
role = role === 'user' ? 'assistant' : 'user'; addHandler();
}} role = role === 'user' ? 'assistant' : 'user';
> }}
{$i18n.t('Add')} >
</button> {$i18n.t('Add')}
</button>
<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" 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={() => { on:click={() => {
submitHandler(); submitHandler();
}} }}
> >
{$i18n.t('Run')} {$i18n.t('Run')}
</button> </button>
{:else} {:else}
<button <button
class="px-3 py-1.5 text-sm font-medium bg-gray-300 text-black transition rounded-lg" class="px-3 py-1.5 text-sm font-medium bg-gray-300 text-black transition rounded-lg"
on:click={() => { on:click={() => {
stopResponse(); stopResponse();
}} }}
> >
{$i18n.t('Cancel')} {$i18n.t('Cancel')}
</button> </button>
{/if} {/if}
</div>
</div> </div>
</div> </div>
</div> </div>